html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,table,img,label,abbr,object{margin:0;padding:0;background:transparent;border:0;outline:0;}
html{-webkit-text-size-adjust:none;}
object{line-height:1%}
a{hide-focus:expression(this.hideFocus=true); outline:none;text-decoration: none;}
a:focus{-moz-outline-style:none;}
a:hover{ text-decoration:none !important;}
body{font:12px/1.5 Microsoft YaHei,tahoma,arial; background:#000; color:#fff; }
html,body{ height:100%;overflow:hidden;}
.pr{position:relative;z-index:0;}
em{font-style:normal;}
img{vertical-align:top;border:0;}
.active{ display: block!important;}
.clearfix{display:block}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both}
.clearfix{zoom:1}
.l{float:left}
.r{float:right}
.none{ display:none;}
.active{ display:block !important;}

#wrapper{position:relative;width:100%;height:100%;min-width:1263px;max-width:2560px;min-height:760px;margin:0 auto;overflow: hidden;}

.loading{ width: 100%; height: 100%; position: fixed; background:#000; z-index:20; font-size: 18px; color: #cfd1cc;}
.loading .box{ width: 100%; height: 1px; background: #414141; margin: 0 auto; position: relative; top: 45%; 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;}

.container {position: relative;width: 100%;}
.section {width: 100%;z-index: 8; overflow: hidden; position: relative; position: absolute; top: 0; left: 0;}
.section.active {z-index: 10;}
.obj {position: absolute;left: 50%;display: block;z-index: 3;}
.section .obj{ background-image: url(../images/obj.png?v=2); background-repeat: no-repeat; display:block; text-indent: -9999px; overflow: hidden;}
.header{ z-index: 10; position: relative;}
.obindex{ width:293px; height:98px; position: fixed; top: 10px; left: 50%; margin-left: -146px; z-index: 6; background: url(../images/logo.png) no-repeat; text-indent: -9999px;}

#go_top{ width: 750px; height: 183px; left:50%; margin-left: -380px; overflow: hidden; position:fixed; bottom:0; overflow: hidden;}
#go_top .go_top{ width: 860px; background: url(../images/line.png) repeat-x center left;}
#go_top a{ width: 133px; height: 133px; float: left; margin-right: 71px;  text-indent: -9999px; position: relative;}
#go_top a::before,#go_top a::after{ content: ""; width: 133px; height: 133px; position: absolute; top: 0; left: 0; background: url(../images/obj.png) no-repeat 0 0;}

#go_top a.g1.active,#go_top a.g1:hover{background-position: 0 -138px; }
#go_top a.g2.active,#go_top a.g2:hover{background-position: -204px -138px; }
#go_top a.g3.active,#go_top a.g3:hover{background-position: -408px -138px;}
#go_top a.g4.active,#go_top a.g4:hover{background-position: -612px -138px;}

#go_top a.g1::after{background-position: 0 0;  }
#go_top a.g2::after{background-position: -204px 0; }
#go_top a.g3::after{background-position: -408px 0; }
#go_top a.g4::after{background-position: -612px 0; }

#go_top a.g1::before{background-position: 0 -138px;  }
#go_top a.g2::before{background-position: -204px -138px; }
#go_top a.g3::before{background-position: -408px -138px; }
#go_top a.g4::before{background-position: -612px -138px; }

#go_top a:hover::after,#go_top a.active::after{ z-index: 1; animation: move1 1s cubic-bezier(0.23, 1, 0.32, 1) both;-webkit-animation: move1 1s cubic-bezier(0.23, 1, 0.32, 1) both;}
#go_top a:hover::before,#go_top a.active::before{ z-index: 2; animation: move1 1s cubic-bezier(0.23, 1, 0.32, 1) both;-webkit-animation: move1 1s cubic-bezier(0.23, 1, 0.32, 1) both;}

#go_more{ width: 540px; height: 46px; right:0; position:fixed; top:25px; z-index: 6;}
#go_more a{ width: 172px; height: 46px; line-height: 46px; text-align: center; float: left; color: #fff; margin-right: 5px; font-size: 24px; font-weight: bold; background: url(../images/obj.png) no-repeat -828px 0;}
#go_more a:hover{ background-position: -828px -46px;}

.section .bg{ position: absolute;left:0;top:0; background-size:cover; background-position:center top; background-repeat:no-repeat; display: block;width: 100%;height: 100%; z-index: 1;}

#box1 .bg { background-image:url(../images/bg_box1.jpg);}
#box2 .bg { background-image:url(../images/bg_box2.jpg);}
#box3 .bg { background-image:url(../images/bg_box3.jpg);}
#box4 .bg { background-image:url(../images/bg_box3.jpg);}



#box1 .npc{ width: 2056px; height: 987px; position: absolute; bottom: -20px; left: 50%; margin-left: -1028px; z-index: 2;}
#box1 .npc span{ width: 100%; height: 100%; display: block; background: url(../images/npc1.png);}
#box1 .solgan{ position: absolute;left:50%;bottom:-100px;margin-left:-960px;width: 1920px;height: 1080px;z-index: 5;}
#box1 .solgan span{ width: 100%; height: 100%; display: block; background: url(../images/slogen.png);}
#box1 .obindex{ margin-left: -146px;}




#box2 .npc{ width: 1920px; height: 898px; position: absolute; bottom: 0; left: 50%; margin-left: -960px; z-index: 2; }
#box2 .npc span{ width: 100%; height: 100%; display: block; background: url(../images/npc2.png);}
#box2 .obindex,#box3 .obindex,#box4 .obindex{ margin-left: -446px;}
.section .listbox{ width: 486px; position: absolute; top: 50%; left: 50%; margin-left: 140px; z-index: 6; transform: translateY(-50%);}
.section .listbox a{ width: 486px; height: 125px; background: url(../images/obj.png) no-repeat; display: block; margin-bottom: 40px; position: relative;}
.section .listbox a::before{ content: ""; width: 45px; height: 35px; position: absolute; top: 43px; left: 49px; background: url(../images/obj.png) no-repeat;}
.section .listbox a strong{ font-size: 28px; display: inline-block; color: #fff; margin: 20px 0 10px 120px;}
.section .listbox a b{ display: block; margin-left: 120px; font-size: 16px;}


#box2 .listbox a{  background-position: -514px -286px; }
#box2 .listbox a:hover{ background-position: -514px -414px;}
#box2 .listbox a b{color: #ffdfb8; }
#box2 .listbox a:nth-child(1)::before{ background-position: -14px -321px;}
#box2 .listbox a:nth-child(2)::before{ background-position: -74px -321px;}

#box2 .listbox a:nth-child(1):hover::before{ background-position: -14px -375px;}
#box2 .listbox a:nth-child(2):hover::before{ background-position: -74px -375px;}

#box3 .npc{ width: 1920px; height: 898px; position: absolute; bottom: 0; left: 50%; margin-left: -960px; z-index: 2; }
#box3 .npc span{ width: 100%; height: 100%; display: block; background: url(../images/npc3.png);}



#box3 .listbox a{  background-position: -514px -541px; }
#box3 .listbox a:hover{ background-position: -514px -669px;}
#box3 .listbox a b{color: #c5bdfa;}
#box3 .listbox a:hover b{color: #dde7ff;}

#box3 .listbox a:nth-child(1)::before{ background-position: -203px -321px;}
#box3 .listbox a:nth-child(2)::before{ background-position: -263px -321px;}

#box3 .listbox a:nth-child(1):hover::before{ background-position: -203px -375px;}
#box3 .listbox a:nth-child(2):hover::before{ background-position: -263px -375px;}


#box4 .npc{ width: 1920px; height: 898px; position: absolute; bottom: 0; left: 50%; margin-left: -960px; z-index: 2; }
#box4 .npc span{ width: 100%; height: 100%; display: block; background: url(../images/npc4.png);}
#box4 .listbox{margin-left:-580px;}
#box4 .listbox a{  background-position: 0 -541px; }
#box4 .listbox a:hover{ background-position: 0 -669px;}
#box4 .listbox a b{color: #b6e9ff;}
#box4 .listbox a:hover b{color: #fcc2ce;}

#box4 .listbox a:nth-child(1)::before{ background-position: -337px -321px;}
#box4 .listbox a:nth-child(2)::before{ background-position: -397px -321px;}
#box4 .listbox a:nth-child(3)::before{ background-position: -457px -321px;}
#box4 .listbox a:nth-child(1):hover::before{ background-position: -337px -375px;}
#box4 .listbox a:nth-child(2):hover::before{ background-position: -397px -375px;}
#box4 .listbox a:nth-child(3):hover::before{ background-position: -457px -375px;}



.footer{ background:#000; height: 200px; width:100%; position:absolute; left:0; bottom:0; z-index: 10;}


@media screen and (min-height:0) and (max-height:900px){
    .section .npc span,.section .solgan span,#go_top,#go_more{ transform: scale(0.8); transform-origin: center bottom;}
    .obindex{ transform: scale(0.8); transform-origin: center top;}
    .section .listbox{ transform: scale(0.8) translateY(-50%); transform-origin: center top;}
  
}


@keyframes move1 {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0); opacity: 1;}
  }
  @-webkit-keyframes move1 {
    0% { -webkit-transform:  rotateY(90deg); opacity: 0; }
    100% { -webkit-transform:  rotateY(0); opacity: 1;}
}