@import "https://img1.tiancitycdn.com/mh/homepage/v8/css/base.css";
html body{background:#383838;width:100%;}
#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: 119px; height: 74px; display: block; text-indent:-999em; position: absolute; top: 46px; left: 50%; margin-left: -325px; z-index: 10; background: url(../images/logo.png) center top / contain no-repeat;}
.wraper{width:100%; height: 1080px; min-width: 1200px; max-width: 1920px; margin:0 auto; position: relative; overflow: hidden; background: #383838; }
.wraper .content{ width: 100%; margin: 0 auto;}
.wraper .layer { width: 100%; margin: 0 auto; height: 100%; background: #080504;}
.wraper .layer .bgimg{ width: 1920px; height: 100%; position: absolute; left: 50%; margin-left: -960px; bottom: 0; background: url(../images/bg-body.jpg) center top / contain no-repeat; z-index: 1; }
.wraper .layer .shadow{ width: 1122px; height: 100%; position: absolute; left: 50%; margin-left: -235px; bottom: 0; background: url(../images/bg-light.png) center top / contain no-repeat; z-index: 2; mix-blend-mode: screen; }
.wraper .layer .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; margin-left: -960px; bottom: 0; background: url(../images/slogan.png) center top / contain no-repeat; z-index: 7; }
.wraper .layer .npc{ width: 1277px; height: 100%; position: absolute; left: 50%; margin-left: -315px; bottom: 0;  z-index: 3; }
.wraper .layer .npc::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/npc.png) center top / contain no-repeat; animation: breathe 3.5s ease-in-out infinite; transform-origin: bottom center;}
.wraper .layer .mask{ width: 1920px; height: 100%; position: absolute; left: 50%; margin-left: -960px; bottom: 0; background: url(../images/mask.png) center top / contain no-repeat; z-index: 6; }
.wraper .layer .butterfly{ width: 1920px; height: 1080px; position: absolute; left: 50%; margin-left: -960px; top: 0; z-index: 5;}
.wraper .layer .butterfly::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/butterfly-1.png) center top / contain no-repeat; animation: scaleing 10s linear infinite;}
.wraper .layer .butterfly::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/butterfly-2.png) center top / contain no-repeat; animation: scaleing 10s linear 3s infinite;}

.wraper .layer #stroy{ width: 325px; height: 93px; position: absolute; left: 50%; margin-left: -390px; top: 716px; z-index: 6;}
.wraper .layer #order{ width: 325px; height: 93px; position: absolute; left: 50%; margin-left: -390px; top: 635px; z-index: 6;}
.wraper .layer #stroy span{ width: 100%; height: 100%; display: block; text-indent: -9999px; background: url(../images/btn-stroy.png) no-repeat;}
.wraper .layer #order span{ width: 100%; height: 100%; display: block; text-indent: -9999px; background: url(../images/btn-order.png) no-repeat;}
.wraper .layer #order:hover span,.wraper .layer #stroy:hover span{ background-position: center bottom;}

.wraper .layer #video{ width: 120px; height: 120px; position: absolute; left: 50%; margin-left: -292px; top: 499px; z-index: 12; background: url(../images/bg-video.png) no-repeat;}
.wraper .layer #video:hover{ -webkit-filter: contrast(120%);filter: contrast(120%);}

.wraper .nav{ width: 700px; height: 38px; position: absolute; top: 15px; left: 50%; margin-left: 270px; z-index: 10;}	
.wraper .nav a{ width: 116px; height: 38px; float: left; margin: 0 7px; font-size: 16px; transform: translateY(50px) scale(1.2); opacity: 0; filter: blur(10px);}
.wraper .nav a span{ width: 116px; height: 38px; line-height: 35px; text-align: center; display: block; transition:margin .3s ease-in-out 0s;  color: #b9d3f5; background: url(../images/bg-nav.png) no-repeat;}
.wraper .nav a:hover span{ background-position-y: -38px; margin-top: -10px; color: #f5b9b9;}

#popdiv{ width: 700px; height: 500px; background: #000; display: none; z-index: 999;}
#popdiv .popvd{ 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;}


.resdiv{ width: 1051px; height: 648px; background: url(../images/pop-2.png) no-repeat; display: none; z-index: 999; font-size: 18px; color: #fff; text-align: center;}
.resdiv .close{ width: 44px; height: 43px; position: absolute; top: 74px; right: 50px; display: block; text-indent: -9999px; background: url(../images/bg-close.png) no-repeat; cursor: pointer;}
#resmsg .txt{ margin: 160px auto 0;}

#resmsg .ewm{ width: 185px; height: 185px; margin: 30px auto; background: #fff; border: 3px solid #fff;}
#resmsg .icon strong{ color: #ff805f; font-size: 20px; display: block;}
#resmsg .icon span{ color: #a6a6a6;}
#resmsg .time { font-size: 14px; margin-top: 35px;}


#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg,.layer .shadow,.layer .npc,.layer .butterfly,.layer #video{ opacity: 0; transform: scale(1.3);filter: blur(10px);} 
.layer .slogan{ opacity: 0; filter: blur(10px); transform: scale(1.5);}
.layer #order,.layer #stroy{ opacity: 0; filter: blur(10px); transform: scale(1.3) translate(0,50px);}


.load_complate #obindex{ filter: blur(0); opacity: 1; transition: all 1s ease;}
.load_complate .layer .bgimg,.load_complate .layer .npc,.load_complate .layer .shadow,.load_complate .layer .butterfly,.load_complate .layer .slogan,.load_complate .layer #video,.load_complate .layer #stroy,.load_complate .layer #order{ filter: blur(0); transform: scale(1) translate(0,0); opacity: 1; transition: all 1s ease;}


.load_complate .layer .bgimg{  transition-delay: .1s; }
.load_complate .layer .shadow{  transition-delay: .2s; }
.load_complate .layer .npc{  transition-delay: .4s; }
.load_complate .layer .butterfly{  transition-delay: .5s; }

.load_complate .layer .slogan{  transition-delay: .5s; }
.load_complate .layer #video{  transition-delay: .6s; }
.load_complate .layer #order{  transition-delay: .7s; }
.load_complate .layer #stroy{  transition-delay: .9s; }



.load_complate .nav a{transform: translateY(0) scale(1);opacity: 1;transition: all 0.5s ease; filter: blur(0);}
.load_complate .nav a:nth-child(1) { transition-delay: .8s;}
.load_complate .nav a:nth-child(2) {transition-delay: .9s;}
.load_complate .nav a:nth-child(3) {transition-delay: 1s;}
.load_complate .nav a:nth-child(4) {transition-delay: 1.1s;}




 @keyframes breathe {
    0%, 100% {
        transform: translate(0, 0) scaleY(1) scaleX(1);
    }
    50% {
        transform: translate(0, 0) scaleY(1.01) scaleX(1.015);
    }
}



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