@import"https://img1.tiancitycdn.com/project5/fs2/v3/css/base.css";
html body{background:#383838;width:100%;}
#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;}
.wraper{width:100%; height: 1080px; min-width: 1200px; max-width: 1920px; margin:0 auto; position: relative; overflow: hidden; background: #383838; }
.wraper .layer { width: 100%; margin: 0 auto; height: 1080px; position: relative;}
.wraper #obindex{ width: 174px; height: 118px; position:absolute; top: 48px; left: 50%; margin-left: -87px; z-index: 10; text-indent:-999em; background: url(../images/logo.png) no-repeat;}
.wraper .bgimg{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/body.jpg) no-repeat center top; z-index: 1; }
.wraper .npc-1{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-1.png) no-repeat; z-index: 6; }
.wraper .npc-2{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-2.png) no-repeat; z-index: 6; }
.wraper .npc-3{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-3.png) no-repeat; z-index: 4; }
.wraper .npc-4{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-4.png) no-repeat; z-index: 4; }
.wraper .npc-5{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-5.png) no-repeat; z-index: 3; }
.wraper .npc-6{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-6.png) no-repeat; z-index: 3; }
.wraper .cover{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/cover.png) no-repeat; z-index: 7; }
.wraper .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 5; }


#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg,.layer .slogan,.layer .cover{ opacity: 0; transform: scale(1.8);filter: blur(10px);} 
.layer .npc-1,.layer .npc-3,.layer .npc-5{ transform: scale(1) translate(-300px,0); opacity: 0; filter: blur(10px);}
.layer .npc-2,.layer .npc-4,.layer .npc-6{ transform: scale(1) translate(300px,0); opacity: 0; filter: blur(10px);}

.load_complate #obindex,.load_complate .layer .bgimg,.load_complate .layer .npc-1,.load_complate .layer .npc-2,.load_complate .layer .npc-3,.load_complate .layer .npc-4,.load_complate .layer .npc-5,.load_complate .layer .npc-6,.load_complate .layer .slogan,.load_complate .layer .cover{ filter: blur(0); transform: scale(1) translate(0,0); opacity: 1; transition: all 1s ease;}
.load_complate .layer .bgimg { transition-delay: 0s}
.load_complate .layer .npc-1,.load_complate .layer .npc-2,.load_complate .layer .npc-3,.load_complate .layer .npc-4,.load_complate .layer .npc-5,.load_complate .layer .npc-6{ transition-duration: 0.5s;}
.load_complate .layer .npc-1{ transition-delay: .2s; }
.load_complate .layer .npc-2{ transition-delay: .1s; }
.load_complate .layer .npc-3{ transition-delay: .3s; }
.load_complate .layer .npc-4{ transition-delay: .4s; }
.load_complate .layer .npc-5{ transition-delay: .5s; }
.load_complate .layer .npc-6{ transition-delay: .6s; }

.load_complate .layer .slogan { transition-delay: .1s }
.load_complate .layer .cover { transition-delay: .1s }


.wraper .nav{ width: 308px; height: 260px; position: absolute; top: 650px; left: 50%; margin-left: -154px; z-index: 9; }	
.wraper .nav a{ width: 308px; height: 66px; font-size: 25px; display: inline-block; margin: 0 0 18px 0;}
.wraper .nav a span{ width: 100%; height: 100%; line-height: 66px; display: inline-block; background: url(../images/btn-nav.png) no-repeat left top; color: #2165e0; font-weight: bold; box-sizing: border-box; text-align: center;}
.wraper .nav a:hover span{ color: #fffc18; }


.wraper .nav a{ transform: translateY(-100px) scale(1); opacity: 0; filter: blur(10px);}
.load_complate .nav a{transform: translateY(0) scale(1);opacity: 1;transition: all 0.5s ease; filter: blur(0);}
.load_complate .nav a.n1 { transition-delay: .6s;}
.load_complate .nav a.n2 {transition-delay: .7s;}
.load_complate .nav a.n3 { transition-delay: .8s;}
.load_complate .nav a.n4 {transition-delay: .9s;}



.wraper .download {box-shadow: 0 0 15px rgb(0 0 0 / 50%); overflow: hidden; width: 143px; position: fixed; top: 200px; right: 0px; z-index: 80;}
.wraper .download a {display: block; width: 143px; height: 47px; background: url(https://img1.tiancitycdn.com/project5/fs2/event/2023/fs230119cs/images/nav.png) no-repeat; background-size: 702px 516px;}
.wraper .download a.a_zc {background-position: -136px -160px;}
.wraper .download a.a_gw {background-position: -136px -207px;}
.wraper .download a.a_xz {background-position: -136px -255px;}
.wraper .download a:hover{ background-position-x: -487px;}


#popvd{ width: 906px; height: 543px; background: #000; display: none; z-index: 999;}
#popvd .popbox{ width: 100%; height: 100%; overflow: hidden;}	
#popvd .popbox video{ object-fit: cover;}
#popvd .close{ width: 60px; height: 60px; position: absolute; top: 0; right: -65px; display: block; text-indent: -9999px; background: url(https://img5.tiancitycdn.com/fs2/event/2026/fs260212Yeondu/images/btn_close.png) no-repeat; cursor: pointer;}


@keyframes spinning {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@keyframes playiing{
	0%{background-position:0 90px;}
  100%{background-position:0 0;}
}

@keyframes moving {
	0%,100%{ transform: translateY(0);}
	50% {transform: translateY(-30px);;}
}