@import "https://img1.tiancitycdn.com/mh/homepage/v8/css/base.css";
html body{background:#383838;width:100%;}
.link{position:absolute; background:url(about:blank);text-indent:-999em;overflow:hidden;display:block;}
#gnb_menu{ z-index: 1; position: relative;}
.loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:#000; z-index:20; font-size: 18px; color: #cfd1cc; z-index: 101;}
.loading .box{ width: 100%; height: 1px; background: #414141; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); left: 0;}
.loading .box span{ height: 1px; background: #c4c4c4; position: relative; top: 0; left: 0; display: block;}
.loading .box p{ font-size: 16px; line-height: 30px; color: #c0c0c0; text-align: center;}
#obindex{ width: 161px; height: 119px; top: 0; left: 50%; margin-left: -610px; z-index: 10; background: url(../images/logo.png) no-repeat;}
.wraper{width:100%; height: 904px; min-width: 1200px; max-width: 1920px; margin:0 auto; position: relative; overflow: hidden; background: #383838; }
.wraper .layer { width: 100%; margin: 0 auto; height: 904px; position: relative; background: #5ec3e0;}
.wraper .bgimg{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/body.jpg) no-repeat center top; z-index: 1; }
.wraper .slogan{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 8; }
.wraper .npc1{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-1.png) no-repeat; z-index: 7; }
.wraper .npc2{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-2.png) no-repeat; z-index: 6; }
.wraper .npc3{ width: 1920px; height: 961px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-3.png) no-repeat; z-index: 5; }
.wraper .npc3-s{ width: 1920px; height: 961px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-3-1.png) no-repeat; z-index: 5; }
.wraper .npc4{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-4.png) no-repeat; z-index: 4; }
.wraper .npc5{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-5.png) no-repeat; z-index: 3; }
.wraper .npc6{ width: 1920px; height: 904px; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-6.png) no-repeat; z-index: 2; }



#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg{ opacity: .5; filter: blur(10px); transform: scale(1.2);filter: blur(10px);} 
.layer .slogan{ opacity: 0; filter: blur(10px); transform: scale(1.5);}
.load_complate #obindex{ filter: blur(0); opacity: 1; transition: all 1s ease;}
.layer .npc3-s{ opacity: 0; filter: blur(10px); transform: scale(.5) translate(100px,-220px);  transform-origin: center center;}
.layer .npc1{ opacity: 0; filter: blur(10px); transform: scale(1.2) translate(-100px,0);}
.layer .npc2,.layer .npc3{ opacity: 0; filter: blur(10px); transform: scale(1.2) translate(100px,0);}
.layer .npc4,.layer .npc5,.layer .npc6{ opacity: 0; filter: blur(10px); transform: scale(1.4) translate(0,30px);}

.load_complate .layer .bgimg,.load_complate .layer .slogan,.load_complate .layer .npc1,.load_complate .layer .npc2,.load_complate .layer .npc3,.load_complate .layer .npc4,.load_complate .layer .npc5,.load_complate .layer .npc6,.load_complate .layer .npc3-s{ filter: blur(0); transform: scale(1) translate(0,0); opacity: 1; }

.load_complate .layer .bgimg{  transition: all 1s ease; transition-delay: .2s; }
.load_complate .layer .npc6{ transition: all 1s ease; transition-delay: .7s; }
.load_complate .layer .npc5{ transition: all 1s ease; transition-delay: .8s; }
.load_complate .layer .npc4{ transition: all 1s ease; transition-delay: .2s; }
.load_complate .layer .npc3{ transition: all 1s ease; transition-delay: .3s; }
.load_complate .layer .npc2{ transition: all 1s ease; transition-delay: .5s; }
.load_complate .layer .npc1{ transition: all 1s ease; transition-delay: .6s; }

.load_complate .layer .npc3-s{ transition: all 1s ease; transition-delay: .4s; }
.load_complate .layer .slogan { transition: all 1s ease; transition-delay: 1s; }


.wraper .nav{ width: 952px; height: 60px; position: absolute; top: 750px; left: 50%; margin-left: -476px; z-index: 9;}	
.wraper .nav a{ width: 190px; height: 60px; margin: 0 auto; float: left; text-indent: -9999px; transform: translateY(50px) scale(1.2); opacity: 0; filter: blur(10px);}
.wraper .nav a span{ width: 100%; height: 100%; display: block; transition:margin .3s ease-in-out 0s}
.wraper .nav a:nth-child(1) span{ background: url(../images/nav-1.png) no-repeat center bottom;}
.wraper .nav a:nth-child(2) span{ background: url(../images/nav-2.png) no-repeat center bottom;}
.wraper .nav a:nth-child(3) span{ background: url(../images/nav-3.png) no-repeat center bottom;}
.wraper .nav a:nth-child(4) span{ background: url(../images/nav-4.png) no-repeat center bottom;}
.wraper .nav a:nth-child(5) span{ background: url(../images/nav-5.png) no-repeat center bottom;}
.wraper .nav a:hover span{ background-position: center top; margin-top: -16px;}

.load_complate .nav a,.load_complate .layer #video{transform: translateY(0) scale(1);opacity: 1;transition: all .8s ease; filter: blur(0);}
.load_complate .nav a:nth-child(1) { transition-delay: .6s;}
.load_complate .nav a:nth-child(2) {transition-delay: .7s;}
.load_complate .nav a:nth-child(3) {transition-delay: .8s;}
.load_complate .nav a:nth-child(4) {transition-delay: .9s;}
.load_complate .nav a:nth-child(5) {transition-delay: 1s;}
.load_complate .layer #video{transition-delay: 1s;}

#popdiv{ width: 700px; height: 500px; background: #000; display: none; z-index: 999;}
#popdiv .popbox{ width: 700px; height: 500px; overflow: hidden;}	
#popdiv .close{ width: 48px; height: 48px; position: absolute; top: 0; right: -50px; display: block; text-indent: -9999px; background: url(https://image.tiancity.com/player/images/close_btn.jpg) no-repeat; cursor: pointer;}



@keyframes scale{
    0%,100%{
        transform: scale(1)translateY(0); filter: blur(0px);
    }
    50%{
        transform: scale(1.05)translateY(10px); filter: blur(1px);
    }
}