@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%; min-width: 1200px; max-width: 1920px; margin:0 auto; position: relative; overflow: hidden; background: #383838; }



.wraper .bg { width: 100%; margin: 0 auto}
.wraper .bg div { height: 1080px}
.wraper.bg-1 .bg .bg2 { background: url(../images/bg1_img_02.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg3 { background: url(../images/bg1_img_03.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg4 { background: url(../images/bg1_img_04.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg5 { background: url(../images/bg1_img_05.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg6 { height: 984px; background: url(../images/bg1_img_06.jpg) repeat-y center top;}


.wraper.bg-2 .bg .bg2 { background: url(../images/bg2_img_02.jpg) repeat-y center top;}
.wraper.bg-2 .bg .bg3 { background: url(../images/bg2_img_03.jpg) repeat-y center top;}
.wraper.bg-2 .bg .bg4 { background: url(../images/bg2_img_04.jpg) repeat-y center top;}
.wraper.bg-2 .bg .bg5 { background: url(../images/bg2_img_05.jpg) repeat-y center top;}
.wraper.bg-2 .bg .bg6 { background: url(../images/bg2_img_06.jpg) repeat-y center top;}

.wraper .content{ width:100%; min-width: 1200px; margin:0 auto; position:absolute; top: 0; left: 0;}

.wraper .picBox { width: 1100px; height: 1100px; position: absolute; top: 1191px; left: 50%; margin-left: -627px; }
.wraper .picBox li{  width: 100%; position: absolute; top: 0; left: 0; list-style-type: none; }
.wraper .picBox li .active{ display: block;}
.wraper .picBox .arr{ width: 148px; height: 144px; top:430px; text-align:center; display:block; position:absolute; cursor:pointer; text-indent:-9999px; z-index:10;}
.wraper .picBox .arr::after{ content: ""; background:url(../images/btn-arr.png) no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.wraper .picBox .Prev{ left: 216px; }
.wraper .picBox .Next{ right: -146px; }
.wraper .picBox .Next::after{ transform: rotateY(180deg); }
.wraper .picBox :hover::after{ -webkit-filter: contrast(120%);filter: contrast(120%);  } 
                
.wraper .picBox li .btn-link{ width: 105px; height: 35px; position: absolute; right: 129px; top: 750px; text-indent: -9999px;}





.wraper .layer { width: 100%; margin: 0 auto; height: 1080px; position: relative; overflow: hidden;}
.wraper #obindex{ width: 155px; height: 107px; position:absolute; top: 85px; left: 50%; margin-left: -600px; 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: 4; }
.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: 3; }
.wraper .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 8; }
.wraper .mask{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/mask.png) no-repeat; z-index: 7; } 
.wraper .cover{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/cover.png) no-repeat; z-index: 9; } 



.wraper .role .btn{ width: 71px; height: 171px; position: absolute; left: 50%; z-index: 11; text-indent: -9999px;}
.wraper .role .btn a{ width: 138px; height: 136px; position: absolute; left: -40px; bottom: -50px; background: url(../images/music-bg.png) no-repeat;}
.wraper .role .btn a::after{content: ""; width: 30px; height: 30px; background: url(../images/music-s.png) no-repeat center bottom; position: absolute; left: 53px; top: 53px;}
.wraper .role .btn .btn-play::after{ animation: playiing 1.2s steps(3) infinite;  background: url(../images/music-s.png);}

.wraper .role .role-1{  background: url(../images/name-1.png) no-repeat; top: 330px; margin-left: -550px;}
.wraper .role .role-2{  background: url(../images/name-2.png) no-repeat; top: 250px; margin-left: 485px;}


.wraper .music span{ width: 155px; height: 140px; position: absolute; left: 50%; background: url(../images/music-more.png); z-index: 7;}
.wraper .music .m1{ background-position: 20px -65px; top: 680px; margin-left: -848px; animation: moving 5s linear infinite;}
.wraper .music .m2{ background-position: -198px -128px; top: 739px; margin-left: -648px; animation: moving 5s linear 1s infinite;}
.wraper .music .m3{ background-position: -1522px 0; top: 600px; margin-left: 681px; animation: moving 5s linear .5s infinite;}
.wraper .music .m4{ background-position: -1616px -180px; top: 780px; margin-left: 774px; animation: moving 5s linear infinite;}


.wraper .btn-video{ width: 80px; height: 80px; position: absolute; left: 50%; top: 700px; margin-left: -49px; z-index: 10; text-indent: -9999px;}
.wraper .btn-video::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;  background: url(../images/btn-video.png) no-repeat; animation: spinning 15s linear infinite;}
.wraper .btn-video::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/btn-video-s.png) no-repeat;}

.wraper .btn-video:hover{ -webkit-filter: contrast(120%);filter: contrast(120%); }


#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg,.layer .slogan,.wraper .mask,.wraper .btn-video,.wraper .music span{ opacity: 0; transform: scale(1.5);filter: blur(10px);} 
.layer .npc-1,.layer .role-1{ transform: scale(1.5) translate(100px,0); opacity: 0; filter: blur(10px);}
.layer .npc-2,.layer .role-2{ transform: scale(1.5) translate(-100px,0); opacity: 0; filter: blur(10px);}



.load_complate #obindex,.load_complate .layer .bgimg,.load_complate .layer .btn-video,.load_complate .layer .npc-1,.load_complate .layer .npc-2,.load_complate .layer .slogan,.load_complate .layer .mask,.load_complate .layer .role-1,.load_complate .layer .role-2,.load_complate .music span{ 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 { transition-delay: .2s }
.load_complate .layer .npc-2 { transition-delay: .1s }
.load_complate .layer .slogan { transition-delay: .4s }
.load_complate .layer .mask { transition-delay: .3s }
.load_complate .layer .btn-video { transition-delay: .5s }
.load_complate .layer .music span{ transition-delay: .9s}


.load_complate .layer .role-1 { transition-delay: .3s }
.load_complate .layer .role-2 { transition-delay: .2s }







.wraper .nav{ width: 1150px; height: 102px; position: absolute; top: 900px; left: 50%; margin-left: -575px; z-index: 9; display: flex; justify-content: space-between;}	
.wraper .nav a{ width: 343px; height: 100%; font-size: 22px; text-align: center; display: inline-block;}
.wraper .nav a span{ width: 100%; height: 100%; line-height: 32px; background: url(../images/btn-nav.png) no-repeat; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; box-sizing: border-box; padding-left: 70px; text-shadow: -1px 0 1px #ff23ff; transition:margin .3s ease-in-out 0s;}
.wraper .nav a:hover span{ background-position: center bottom;  margin-top: -16px;}


.wraper .nav a{ transform: translateY(50px) scale(1.2); 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: .8s;}
.load_complate .nav a.n2 {transition-delay: .9s;}
.load_complate .nav a.n3 { transition-delay: 1s;}
.load_complate .nav a.n4 {transition-delay: 1.1s;}




#popvd{ width: 900px; height: 506px; 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);;}
}



.wraper #go_top { right:1%; position:fixed; z-index: 20; top:1200px; box-sizing: border-box; width: 176px; height: 292px; background: url(../images/bg-top.png) no-repeat; padding-top: 20px;}
.wraper #go_top a {display: block;width: 187px;height: 44px; font-size: 20px; color: #9063bf; margin-bottom: 6px; font-weight: bold; display: flex; justify-content: center; align-items: center; position: relative;}
.wraper #go_top a:hover,.wraper #go_top a.on{ background: url(../images/top-a.png) no-repeat; color: #fff; text-shadow: 1px 1px 1px #6b5fdd,-1px -1px 1px #6b5fdd,-1px 1px 1px #6b5fdd,1px -1px 1px #6b5fdd;}