@charset "UTF-8";
*{font-style:normal;margin:0px;padding:0px;list-style:none;text-decoration:none;}
body{-webkit-user-select:none;-webkit-touch-callout:none;/*-webkit-tap-highlight-color:rgba(0, 0, 0,0); */-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;color:#595959;word-break:break-word;word-wrap:break-word;font-family:"Microsoft YaHei";background:#000;}
img{display:block;}
/*prePage*/
#prePage{width:100%; height:100%; position:absolute; top:0; left:0; z-index:9999999;}
#prePage img{width:100%; position:absolute; top:0; left:0;}
#prePage img:last-of-type{top:40%;}
#prePage.on img{-webkit-transition: all 2s cubic-bezier(.215, .61, .355, 1) 0; opacity:0;}
#prePage.on img:nth-of-type(1){-webkit-transform: translate3d(150px, 0, 0) rotate(-125deg) scale(.1,.1);}
#prePage.on img:nth-of-type(2){-webkit-transform: translate3d(0, 200px, 0) rotate(-125deg) scale(.1,.1);}
#prePage.on img:nth-of-type(3){-webkit-transform: translate3d(-150px, 0, 0) rotate(-125deg) scale(.1,.1);}
#prePage.on img:nth-of-type(4){-webkit-transform: translate3d(-130px, -200px, 0) rotate(-125deg) scale(.1,.1);}
#prePage.on img:nth-of-type(5){-webkit-transform: translate3d(0, 200px, 0) rotate(-125deg) scale(.1,.1);}
#prePage.on img:nth-of-type(6){-webkit-transform: translate3d(120px, -100px, 0) rotate(-125deg) scale(.1,.1);}
#prePage.on img:nth-of-type(7){-webkit-transform: translate3d(-130px, 170px, 100px) rotate(-125deg) scale(.1,.1);}
/*swipe*/
body, html{height: 100%;overflow: hidden;}
.swipe{position: relative;z-index: 1;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;height: 100%;}
#position{height:100%;width:100%}
.swipe dl dd{height: 100%;width: 100%;position: relative;overflow: hidden;}
/*page1*/
.page1,.page4{background:url(../images/index_Bg.jpg) no-repeat; width:100%; height:100%; background-size:100%; position:relative;}
.page1 img,.page4 img{width:100%;}
.index_logo{position:absolute; left:0; top:80px!important;}
.index_people{position:absolute; left:0; top:130px!important;}
.page4 .index_logo,.page4 .index_people{opacity: 0;}
#position dd.on .page4 .index_logo{-webkit-animation: point 0.4s linear; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: .2s;}
#position dd.on .page4 .index_people{-webkit-animation: slideinfromLeft .5s linear; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: .4s;}
#position dd.on .starTxt{-webkit-animation: slideinfromLeft .2s linear; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0s;}
.starTxt{position: absolute; left: 0; bottom: 0px; opacity: 0;}


.mapPng{ display: none; background: url("../images/mapPng.png") no-repeat; background-size: 100%; width: 100%; height: 100%; position: absolute!important; top: 50px!important; left: 0!important;}
.starPng{ display: none; background: url("../images/starPng.png") no-repeat; background-size: 100%; width: 100%; height: 100%; position: absolute!important; top: 0px!important; left: 0!important;}
dd.on .mapPng,dd.on .starPng{ display: block; animation: rotate6  .5s ease-out ;-webkit-animation: rotate6 .5s ease-out;-webkit-transform: translateZ(1px); }


/*ui*/
.mainWarp{width:100%; height:100%; position:relative; overflow:hidden;}
.mainWarp ul li{float:left; display:inline;}
.mainWarp ul li img{width:100%; height:100%;}
.leftBtn,.rightBtn{position:absolute; top:160px; background:#f00; width:48px; height:64px; z-index:3;}
.leftBtn{left:0px; background:red;}
.rightBtn{right:0px; background:red;}
.pointList{width: 100%;height: 20px;position: absolute;left: 0;bottom: 55px;z-index: 10; text-align:center;}
.pointList a{display:block; width:11px; height:11px; background:#fff; border-radius:50%; display:inline-block; margin-right:5px;}
.pointList a.on{background:#4647b5;}
/*ui2*/
.mainWarp1{width:100%; height:100%; position:relative; overflow:hidden;}
.mainWarp1 ul li{float:left; display:inline;}
.mainWarp1 ul li img{width:100%; height:100%;}
.leftBtn1,.rightBtn1{position:absolute; top:160px; background:#f00; width:48px; height:64px; z-index:3;}
.leftBtn1{left:0px; background:red;}
.rightBtn1{right:0px; background:red;}


.pointList1{width: 100%;height: 20px;position: absolute;left: 0;bottom: 55px;z-index: 10; text-align:center;}
.pointList1 a{display:block; width:8px; height:8px; background:#fff; border:3px solid #fff; border-radius:50%; display:inline-block; margin-right:5px;}
.pointList1 a.on{background:#85b300; border:3px solid #fff;}

/*menu_box*/
.menu_box{height: 144px; position: absolute; bottom: 0; width: 600px; display: block;}
.menu_bt{width: 65px; height: 144px; background-color: rgba(0,0,0,.6); float: left; position: relative; margin-right: 1px; color: #fff; text-decoration: none; font-size: .9em; -webkit-tap-highlight-color: transparent;}
.menu_bt h3{ border-bottom: 1px solid #000; padding: 10px 0; text-align: center; color:#e9b61f;}
.menu_bt:nth-of-type(1){-webkit-transition: all .6s 0.1s; -webkit-transform: translate3D(41px,0,0); background: rgba(0,0,0,.6); background-size: 100%;}
.menu_bt:nth-of-type(2){-webkit-transform: translate3D(41px,0,0); -webkit-transition: all .6s 0.3s; background: rgba(0,0,0,.6); background-size: 100%;}
.menu_bt:nth-of-type(3){-webkit-transform: translate3D(41px,0,0); -webkit-transition: all .6s 0.5s; background: rgba(0,0,0,.6); background-size: 100%;}
.menu_bt:nth-of-type(4){-webkit-transform: translate3D(41px,0,0); -webkit-transition: all .6s 0.7s; background: rgba(0,0,0,.6); background-size: 100%;}
.menu_bt:nth-of-type(5){-webkit-transform: translate3D(41px,0,0); -webkit-transition: all .6s .9s; background: rgba(0,0,0,.6); background-size: 100%;}
.menu_bt:active{-webkit-transition: none;}
.icon01,
.icon02,
.icon03,
.icon04,
.icon05,
.icon06{margin: 10px auto; display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: contain; opacity: 0.9;}
.icon01{background-image: url(../images/fast1.png);}
.icon02{background-image: url(../images/fast2.png);}
.icon03{background-image: url(../images/fast3.png);}
.icon04{background-image: url(../images/fast4.png);}
.icon05{background-image: url(../images/fast5.png);}
.menu_dis{display: block;
    padding: 5px 5px 10px 5px;
    line-height: 1.2em;
    font-size: .8em;
    text-align: justify;
    color:#e9b61f;}
.arrow{width: 18px; height: 17px; position: absolute; bottom: 30px; left: 50%; margin-left: -9px; background: url("../images/arrar.png") no-repeat; -webkit-animation: arrowMove 1.5s infinite; z-index: 999; background-size: 18px;}
.icon.prev,
.icon.next{width: 80px; height: 80px; background: url("../images/leftBen.png") center center no-repeat; -webkit-transition: all .6s; -webkit-transition-delay: 2.2s; opacity: 0; position: absolute; z-index: 11; top: 50%; margin-top: -40px; -webkit-transition: all .6s; -webkit-transition-delay: 2.2s; z-index: 999; background-size: 24px;}
.icon.prev,.icon.next{opacity: 1;}
.icon.prev{left: 0px; -webkit-animation: guidePrev 1.5s infinite;}
.icon.next{right: 0px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(180deg); transform:rotate(-180deg); -webkit-animation: guideNext 1.5s infinite;}
.icon.prev1,
.icon.next1{width: 80px; height: 80px; background: url("../images/leftBen.png") center center no-repeat; -webkit-transition: all .6s; -webkit-transition-delay: 2.2s; opacity: 0; position: absolute; z-index: 11; top: 50%; margin-top: -40px; -webkit-transition: all .6s; -webkit-transition-delay: 2.2s; z-index: 999; background-size: 24px;}
.icon.prev1,.icon.next1{opacity: 1;}
.icon.prev1{left: 0px; -webkit-animation: guidePrev 1.5s infinite;}
.icon.next1{right: 0px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(180deg); transform:rotate(-180deg); -webkit-animation: guideNext 1.5s infinite;}
@-webkit-keyframes guidePrev{0%{-webkit-transform: translateX(0px)} 20%{-webkit-transform: translateX(0px)} 35%{-webkit-transform: translateX(12px)} 50%{-webkit-transform: translateX(-20px)} 65%{-webkit-transform: translateX(0px)} 80%{-webkit-transform: translateX(-12px)} 100%{-webkit-transform: translateX(0px)}}
@-webkit-keyframes guideNext{0%{-webkit-transform: translateX(0px) rotateZ(180deg)} 20%{-webkit-transform: translateX(0px) rotateZ(180deg)} 35%{-webkit-transform: translateX(-12px) rotateZ(180deg)} 50%{-webkit-transform: translateX(20px) rotateZ(180deg)} 65%{-webkit-transform: translateX(0px) rotateZ(180deg)} 80%{-webkit-transform: translateX(12px) rotateZ(180deg)} 100%{-webkit-transform: translateX(0px) rotateZ(180deg)}}
@-webkit-keyframes arrowMove{0%{-webkit-transform: translateY(42px); opacity: 0} 60%{-webkit-transform: translateY(12px); opacity: 1} 100%{-webkit-transform: translateY(0px); opacity: 0}}
@-webkit-keyframes point{0%{opacity:0; z-index:3; -webkit-transform:translate3d(0px,-40px,0px);} 20%{opacity:1; z-index:3; -webkit-transform:translate3d(0px,0px,0px);} 40%{opacity:1; -webkit-transform:translate3d(0px,-15px,0px);} 60%{opacity:1; z-index:3; -webkit-transform:translate3d(0px,0px,0px);} 80%{opacity:1; z-index:3; -webkit-transform:translate3d(0px,-5px,0px);} 100%{opacity:1; z-index:3; -webkit-transform:translate3d(0px,0px,0px);}}
@-webkit-keyframes slideinfromLeft{from{opacity:0; -webkit-transform:translate(-30%,0); z-index:3;} to{opacity:1; -webkit-transform:translate(0,0); z-index:3;}}
@-webkit-keyframes rotate6 {
    0% {
        /*-webkit-transform:rotate3d(0, 50, 0, -120deg) scale3d(2, 2, 3) translate3d(100px, 0px, 18px);*/
        -webkit-transform: rotate3d(0, 50, 0, -100deg) scale3d(5, 5, 5) translate3d(-50px, 100px, 30px);
        transform: rotate3d(0, 50, 0, -100deg) scale3d(5, 5, 5) translate3d(-50px, 100px, 30px);
        opacity: 0;
    }
    100% {
        -webkit-transform:rotate3d(0, 50, 0, 0deg) scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform:rotate3d(0, 50, 0, 0deg) scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
        -webkit-animation-fill-mode: forwards;
    }
}