@import"https://img5.tiancitycdn.com/fs2c/homepage/v1/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:40px auto 0; position: relative; overflow: hidden; background: #383838; }
.wraper .bg { width: 100%; margin: 0 auto}
.wraper .bg div { height: 1000px;}

.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 { background: url(../images/bg1_img_06.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg7 { background: url(../images/bg1_img_07.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg8 { background: url(../images/bg1_img_08.jpg) repeat-y center top;}
.wraper.bg-1 .bg .bg9 { height: 730px; background: url(../images/bg1_img_09.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.bg-2 .bg .bg7 { height: 550px; background: url(../images/bg2_img_07.jpg) repeat-y center top;}

.wraper .content{ width:100%; min-width: 1200px; margin:0 auto; position:absolute; top: 0; left: 0;}
.wraper .layer { width: 100%; margin: 0 auto; height: 1000px; position: relative; overflow: hidden;}

.wraper #obindex{ width: 177px; height: 113px; position:absolute; top: 22px; left: 50%; margin-left: -480px; 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/bg1_img_01.jpg) no-repeat center top; z-index: 1; }
.wraper .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 7; }
.wraper .npc1{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-1.png) no-repeat center top; z-index: 4;}
.wraper .npc2{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-2.png) no-repeat center top; z-index: 3;}
.wraper .npc3{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-3.png) no-repeat center top; z-index: 3;}
.wraper .mask{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/mask.png) no-repeat center top; z-index: 6;}

.wraper .picBox { width: 1200px; height: 670px; position: absolute; top: 1160px; left: 50%; margin-left:-600px; }
.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: 85px; height: 85px; top:328px; 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: 18px; }
.wraper .picBox .Next{ right: 5px; }
.wraper .picBox .Next::after{ transform: rotateY(180deg); }
.wraper .picBox :hover::after{ filter: brightness(1.2); } 

#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg{ opacity: 0; transform: scale(1.8);filter: blur(10px);} 
.layer .slogan{ opacity: 0; transform: scale(1.5);filter: blur(10px);} 
.layer .npc1{ transform: translate(0,100px) scale(1); opacity: 0; filter: blur(10px);} 
.layer .npc2{ transform: translate(100px,0) scale(1); opacity: 0; filter: blur(10px);}
.layer .npc3{ transform: translate(-100px,0) scale(1); opacity: 0; filter: blur(10px);}

.load_complate #obindex,.load_complate .layer .bgimg,.load_complate .layer .slogan,.load_complate .layer .npc1,.load_complate .layer .npc2,.load_complate .layer .npc3{ filter: blur(0); transform: scale(1) translate(0,0) rotate(0); opacity: 1; transition: all .7s ease;}

.load_complate .layer .slogan { transition-delay: .4s }
.load_complate .layer .bgimg { transition-delay: .1s }
.load_complate .layer .npc1 { transition-delay: .2s }
.load_complate .layer .npc2 { transition-delay: .3s }
.load_complate .layer .npc3 { transition-delay: .3s }

.wraper .nav{ width: 1070px; height: 103px; position: absolute; top: 770px; left:  calc(50% - 1070px / 2); z-index: 9; display: flex; justify-content: space-between;}	
.wraper .nav a{ width: 330px; height: 100%; font-size: 22px; text-align: center; display: inline-block; margin: 0 -10px;}
.wraper .nav a span{ width: 100%; height: 100%; line-height: 26px; background: url(../images/btn-nav.png) no-repeat center top; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; box-sizing: border-box; transition:margin .3s ease-in-out 0s; box-sizing: border-box;}
.wraper .nav a:hover span,.wraper .nav a.on span{ background-position: center bottom; color: #fff667; }
.wraper .nav a:hover span{ 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: .6s;}
.load_complate .nav a.n2 {transition-delay: .7s;}
.load_complate .nav a.n3 { transition-delay: .8s;}

.wraper #go_top { right:1%; position:fixed; z-index: 20; top:1200px; box-sizing: border-box; width: 260px;}
.wraper #go_top::before{ content: ""; width: 16px; height: 89%; background: #4e8cff; position: absolute; right: 0; top: 23px;}
.wraper #go_top a {display: block;width: 235px;height: 54px; font-size: 27px; padding-right: 20px; box-sizing: border-box; color: #fff; font-weight: bold; font-style: italic; display: flex; justify-content: right; align-items: center; position: relative; font-style: italic; text-shadow: 1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;}
.wraper #go_top a::before{ content: ""; position: absolute; right: -32px; top: 19px; width: 24px; height: 24px; background: #4e8cff; border-radius: 50%; border: 2px solid #4e8cff; }
.wraper #go_top a::after{  content: ""; position: absolute; right: -36px; top: 15px; width: 26px; height: 26px; border-radius: 50%; border: 5px solid #4e8cff;}
.wraper #go_top a:hover,.wraper #go_top a.on{ color: #fff95a; }
.wraper #go_top a:hover::before,.wraper #go_top a.on::before{ background: #fff95a; border: 2px solid #000;}


@keyframes scaleing {
	0%,100%{
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
}