@import"https://img1.tiancitycdn.com/project5/fs2/v3/css/base.css";
body { background: #383838; }
#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:silver;text-align:center}

.wraper{width:100%; min-width: 1200px; max-width: 1920px; margin:0 auto; position: relative; overflow: hidden; }
.wraper .content{ background: 
  url(../images/bg_02.jpg) no-repeat 50% 1080px,
  url(../images/bg_03.jpg) no-repeat 50% 1910px,
  url(../images/bg_04.jpg) no-repeat 50% 3018px,
  url(../images/bg_05.jpg) no-repeat 50% 3824px;}
.wraper .layer { width: 100%; margin: 0 auto; height: 1080px; position: relative; overflow: hidden;}
.wraper #obindex{ width: 215px; height: 146px; position:absolute; top: 50px; left: 50%; margin-left: -107px; 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: 3; }
.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 .t-1{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/tit-1.png) no-repeat; z-index: 5; }
.wraper .t-2{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/tit-2.png) no-repeat; z-index: 2; }
.wraper .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 6; }

.wraper .box .box1{ height: 732px; margin-top: 100px;}
.wraper .box .box2{ height: 1109px;}
.wraper .box .box3{ height: 806px;}
.wraper .box .box4{ height: 1021px;}

#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg,.layer .slogan{ opacity: 0; transform: scale(1.5);filter: blur(10px);} 
.layer .t-1,.layer .npc-2{ transform: translate(-300px,0); opacity: 0; filter: blur(10px);}
.layer .t-2,.layer .npc-1{ transform: 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 .slogan,.load_complate .layer .t-1,.load_complate .layer .t-2{ filter: blur(0); transform: scale(1) translate(0,0); opacity: 1; transition: all 1s ease;}
.load_complate .layer .npc-1 { transition-delay: .3s }
.load_complate .layer .npc-2 { transition-delay: .3s }
.load_complate .layer .t-1 { transition-delay: .5s }
.load_complate .layer .t-2 { transition-delay: .5s }
.load_complate .layer .slogan { transition-delay: .3s }


.wraper .nav{ width: 1200px; height: 92px; position: absolute; top: 762px; left: 50%; margin-left: -600px; z-index: 9; display: flex; justify-content: space-between;}	
.wraper .nav a{ width: 274px; height: 100%; font-size: 30px; 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; transition:margin .3s ease-in-out 0s}
.wraper .nav a.n2,.wraper .nav a.n3{ margin-top: 66px;}
.wraper .nav a:hover span{ background-position-y: 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;}


.wraper .quick { display: none; position: fixed; z-index: 18; right: -12px; bottom: 184px; width: 274px;}
.wraper .quick a {display: block;width: 274px;height: 50px; background: rgba(85, 93, 93, .6); margin-bottom: 48px; font-size: 24px; color: #fff; font-weight: bold; display: flex; justify-content: center; align-items: center; position: relative;}
.wraper .quick a:hover,.wraper .quick a.on{ background: #2bd4de;}
.wraper .quick a:hover::after,.wraper .quick a.on::after{ content: ""; position: absolute; top: -12px; left: -12px; bottom: -12px; right: -12px; border: 1px solid #2bd4de;}