*{
  outline:none;font-family:"Microsoft Yahei";
  -webkit-tap-highlight-color:transparent;
  /**以下两行隐藏一些input控件本身样式及select箭头***/
  /*-webkit-appearance:none;
  -moz-appearance:none;*/
  /**以下3行解决webkit translation 闪烁问题**/
  -webkit-backface-visibility:hidden;
  -webkit-perspective:1000;
  -webkit-transform-style:preserve-3d;
}
body,html{padding:0; margin:0;width:100%;overflow:hidden;height:100%;background-color:#000;}
/*body{
	background: url(../images/bg.jpg) left bottom no-repeat;
	background-size: 100% 100%;
}*/
.clearfix {*zoom:1}
.clearfix:before, .clearfix:after {content: ' '; display: table }
.clearfix:after {clear: both; }
a{text-decoration:none;}
ul,li{margin:0;padding:0;list-style:none;list-style-type:none;}
.hideimg{opacity:0;}
.align-left{text-align:left;}

/***arrow and loading***/
/***音乐控制按钮****/
.musicBar{width:30px;height:30px;position:absolute;z-index:99999;right:10px;top:15px;}
img.musicOn{animation:rolling 1.2s linear infinite;-webkit-animation:rolling 1.2s linear infinite;}

.arrow{width:9.375%;position:absolute;bottom:1.5%;left:45.3125%;opacity:1;z-index:99;}
.arrow{animation:arrow 1s ease-out infinite;-webkit-animation:arrow 1s ease-out infinite;}
.back{width:14.68%;position:absolute;top:1.5%;left:3%;opacity:1;z-index:999;}

/***loading***/
#loading{
	width:100%;
	height:100%;
	position:fixed;
	left:0;top:0;
	z-index:999999999;
	text-align:center;
	background:#000;
}
#loading .loadingBox{position:absolute;top:35%;left:calc(50% - 79px);width:157px;height:42px;}
#loading .loadingBox img{width:100%;position:absolute;left:0;top:0;}
#loading .percent{color:#fff;position:absolute;left:0;top:48%;text-align:center;width:100%;font-family:"network",Arial;}
#loading4{z-index:10;opacity:1;}
#loading p{font-family:"network",Arial;color:#fff;position:absolute;left:0;top:49%;text-align:center;width:100%;}

.main{
	width:100%;height:100%;overflow:hidden;
	-webkit-transform:translateZ(0);
	transform:translateZ(0);
	background: url(../images/bg.jpg) left bottom no-repeat;
	background-size: 100% 100%;
}
.page{
	width: 100%;
	height: 100%;
	min-height: 416px;
	overflow: hidden;
	position: absolute;
	text-align: center;
	left:0;
	top:0;
	/*background: url(../images/bg.jpg) left bottom no-repeat;
	background-size: 100% 100%;*/
	color: #c0c0bf;
	transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}
#page1{z-index:19;}
#page2{z-index:18;}
#page3{z-index:17;}
#page4{z-index:16;}
#page5{z-index:15;}
#page6{z-index:14;}
#page7{z-index:13;}
#page8{z-index:12;}
#page9{z-index:11;}
#page10{z-index:10;}
#page11{z-index:9;}
#page12{z-index:8;}
#page1.goOut,
#page2.goOut,
#page3.goOut,
#page4.goOut,
#page5.goOut,
#page6.goOut,
#page7.goOut,
#page8.goOut,
#page9.goOut,
#page10.goOut,
#page11.goOut,
#page12.goOut,
#page13.goOut,
#page14.goOut,
#page15.goOut{
    -webkit-animation: slideOutUp 0.8s ease forwards;
    animation: slideOutUp 0.8s ease forwards;
}
#page1.goOutDown,
#page2.goOutDown,
#page3.goOutDown,
#page4.goOutDown,
#page5.goOutDown,
#page6.goOutDown,
#page7.goOutDown,
#page8.goOutDown,
#page9.goOutDown,
#page10.goOutDown,
#page11.goOutDown,
#page12.goOutDown,
#page13.goOutDown,
#page14.goOutDown,
#page15.goOutDown{
    -webkit-animation: slideOutDown 0.8s ease forwards;
    animation: slideOutDown 0.8s ease forwards;
}
#page1.goIn,
#page2.goIn,
#page3.goIn,
#page4.goIn,
#page5.goIn,
#page6.goIn,
#page7.goIn,
#page8.goIn,
#page9.goIn,
#page10.goIn,
#page11.goIn,
#page12.goIn,
#page13.goIn,
#page14.goIn,
#page15.goIn{
    -webkit-animation: slideInDown 0.8s ease forwards;
    animation: slideInDown 0.8s ease forwards;
}


.wximg{display:block;position:absolute;left:-2000%;z-index:-99;}
.fullimg{width:100%;height:100%;position:absolute;left:0;bottom:0;}
.page img.arrow,.page img.nomovies{opacity:1;}
.logo{width:19.55%;position:absolute;left:5.8%;top:4%;z-index:99;}
.top-bg{width:72.5%;position:absolute;top:0;left:0;z-index:0;}
.bottom-bg{width:100%;position:absolute;bottom:0;left:0;z-index:0;}
.boxes{position:relative;text-align:center;width:100%;}
.imgboxe{position:absolute;font-size:0;}
.box-bg-img{width:100%;position:relative;z-index:1;}
.box-images{position:absolute;z-index:2;}
.center{text-align:center;}
.hideimg{opacity:0;}
.current{top:-100%;}
.big{width:90%;position:absolute;left:8%;margin:0;font-size:13vw;text-align:left;color:rgb(33, 150, 237);}
.middle{width:90%;position:absolute;left:8%;margin:0 auto;font-size:8vw;text-align:left;}
.title{width:60%;position:absolute;left:20%;top:13%;z-index:9;}


/***第一页***/
#page1{background:url(../images/bg0.jpg) no-repeat 50% 50%; background-size:100% 100%;}
.head-ico{width:46.6%;margin-top:30.5%;}
.call-name{font-size:5vw;margin-top:3%;line-height:150%;}
.call-name small{font-size:4.5vw;}
.buttons{
  width:17.6%;
  position:absolute;
  font-size:3vw;
  top:73%;
  text-align:center;
}
.buttons p{margin:5px 0;padding:0;}
.buttons img{width:100%;}
.refuse{left:21.6%;}
.access{right:21.6%;}


/***第二页***/
#page2{background:url(../images/bg0.jpg) no-repeat 50% 50%; background-size:100% 100%;}
.callVideo{width:100%;height:100%;position:relative;z-index:4;overflow:hidden;object-fit:contain;}
.hungup{top:80%;left:41.2%;z-index:5;}
.logo1{width:38%;position:absolute;right:4.5%;top:2.5%;z-index:10;}

/***第三页***/
#box1{width:89.0625%;right:2%;top:15%;}
#dot1{width:100%;left:-5%;top:5%;}
#run1{width:55.5%;left:18%;top:12%;}
#w1-1{width:77.07%;left:7%;top:45%;}
#w1-2{width:55.67%;left:8%;top:61%;}
.img1{width:72.4%;position:absolute;left:13.8%;bottom:3%;}

#page3.active #run1{
    -webkit-animation: bounceIn 1.5s ease-out 0.8s forwards;
            animation: bounceIn 1.5s ease-out 0.8s forwards;
}
#page3.active #w1-1{
    -webkit-animation: fadeInLeft 0.8s ease-out 2s forwards;
            animation: fadeInLeft 0.8s ease-out 2s forwards;
}
#page3.active #w1-2{
    -webkit-animation: fadeInRight 0.8s ease-out 2s forwards;
            animation: fadeInRight 0.8s ease-out 2s forwards;
}
#page3.active .img1{
    -webkit-animation: fadeInLeft 1.5s ease-out 2.8s forwards;
            animation: fadeInLeft 1.5s ease-out 2.8s forwards;
}
#page3.active #line1{
    -webkit-animation: fadeInTopRight 1.2s ease-out 4.3s forwards,moveUpRight 2s linear 5.5s infinite;
            animation: fadeInTopRight 1.2s ease-out 4.3s forwards,moveUpRight 2s linear 5.5s infinite;
}
#page3.active #dot1{
    -webkit-animation: fadeIn 1.5s linear 5.5s forwards,flash 2s linear 7s infinite;
            animation: fadeIn 1.5s linear 5.5s forwards,flash 2s linear 7s infinite;
}

/***第四页***/
#box2{width:89.0625%;right:7%;top:19%;}
#box3{width:72.4%;left:13.8%;bottom:6%;}
#san1{width:78.6%;left:6%;top:2%;}
#run2{width:55.5%;left:23%;top:7.5%;}
#w2-1{width:76.6%;left:12.3%;top:49%;}
#w2-2{width:56.14%;left:23.2%;top:71%;}
#dai{width:138%;left:-19%;top:43%;}

#page4.active #run2{
    -webkit-animation: bounceIn 1.5s ease-out 0.8s forwards;
            animation: bounceIn 1.5s ease-out 0.8s forwards;
}
#page4.active #w2-1{
    -webkit-animation: fadeInDown 0.5s ease-out 2s forwards;
            animation: fadeInDown 0.5s ease-out 2s forwards;
}
#page4.active #w2-2{
    -webkit-animation: fadeInUp 0.5s ease-out 2s forwards;
            animation: fadeInUp 0.5s ease-out 2s forwards;
}
#page4.active #box3{
    -webkit-animation: zoomIn 1.5s ease-out 2.5s forwards;
            animation: zoomIn 1.5s ease-out 2.5s forwards;
}
#page4.active #dai{
    -webkit-animation: slideOutRight 1s ease-out 4s forwards;
            animation: slideOutRight 1s ease-out 4s forwards;
}
#page4.active #san1{
    -webkit-animation: zoomIn 1s ease-out 5s forwards,pulse 2s linear 6s infinite;
            animation: zoomIn 1s ease-out 5s forwards,pulse 2s linear 6s infinite;
}
#page4.active #dot2{
    -webkit-animation: fadeIn 1.5s linear 6s forwards,flash 2s linear 7.5s infinite;
            animation: fadeIn 1.5s linear 6s forwards,flash 2s linear 7.5s infinite;
}


/***第五页***/
#box4{width:91%;right:0;top:15%;}
#dot3{width:98%;right:0;top:9%;}
#run3{width:55.5%;left:18.5%;top:19%;}
#w3-1{width:75.5%;right:9%;top:54%;}
#w3-2{width:84%;right:9%;top:70%;}
.img3{width:90.625%;position:absolute;left:4.2875%;bottom:9%;}

#page5.active #run3{
    -webkit-animation: bounceIn 1.5s ease-out 0.8s forwards;
            animation: bounceIn 1.5s ease-out 0.8s forwards;
}
#page5.active #w3-1{
    -webkit-animation: fadeInUp 0.5s ease-out 2s forwards;
            animation: fadeInUp 0.5s ease-out 2s forwards;
}
#page5.active #w3-2{
    -webkit-animation: fadeInDown 0.5s ease-out 2s forwards;
            animation: fadeInDown 0.5s ease-out 2s forwards;
}
#page5.active .img3{
   /* -webkit-animation: movehole 2.5s linear 3.8s forwards;
            animation: movehole 2.5s linear 3.8s forwards;*/
    -webkit-animation: fadeInLeft 1.5s linear 2.5s forwards,fadeOutRight 1.5s linear 7s forwards;
            animation: fadeInLeft 1.5s linear 2.5s forwards,fadeOutRight 1.5s linear 7s forwards;
}
#page5.active #line2{
    -webkit-animation: fadeInTopRight 1.5s ease-out 4s forwards,moveUpRight 2s linear 5.5s infinite;
            animation: fadeInTopRight 1.5s ease-out 4s forwards,moveUpRight 2s linear 5.5s infinite;
}
#page5.active #dot3{
    -webkit-animation: fadeIn 1.5s linear 5.5s forwards,flash 2s linear 7s infinite;
            animation: fadeIn 1.5s linear 5.5s forwards,flash 2s linear 7s infinite;
}


/***第六页***/
#box5{width:89.0625%;right:7%;top:19%;}
#san2{width:81%;left:14%;top:3%;}
#run4{width:55.5%;left:25%;top:7.5%;}
#w4-1{width:75.67%;left:14.5%;top:50%;}
#w4-2{width:85.85%;left:10%;top:71.5%;}
#img4{width:100%;left:0%;bottom:0%;position:absolute;z-index:1;mix-blend-mode:multiply;}
#img5{width:41%;left:28%;bottom:8%;position:absolute;z-index:2;mix-blend-mode:multiply;}

#page6.active #run4{
    -webkit-animation: bounceIn 1.5s ease-out 0.8s forwards;
            animation: bounceIn 1.5s ease-out 0.8s forwards;
}
#page6.active #w4-1{
    -webkit-animation: fadeInDown .5s ease-out 2s forwards;
            animation: fadeInDown .5s ease-out 2s forwards;
}
#page6.active #w4-2{
    -webkit-animation: fadeInUp .5s ease-out 2s forwards;
            animation: fadeInUp .5s ease-out 2s forwards;
}
#page6.active #img4{
    -webkit-animation: fadeInUp 1.5s ease-out 2.5s forwards;
            animation: fadeInUp 1.5s ease-out 2.5s forwards;
}
#page6.active #img5{
    -webkit-animation: fadeInUp 1s ease-out 4s forwards;
            animation: fadeInUp 1s ease-out 4s forwards;
}
#page6.active #san2{
    -webkit-animation: fadeIn 1.5s ease-out 5s forwards,pulse 2s linear 6.5s infinite;
            animation: fadeIn 1.5s ease-out 5s forwards,pulse 2s linear 6.5s infinite;
}
#page6.active #dot4{
    -webkit-animation: fadeIn 1.5s linear 6.5s forwards,flash 2s linear 8s infinite;
            animation: fadeIn 1.5s linear 6.5s forwards,flash 2s linear 8s infinite;
}

/***第七页***/
#box6{width:89.0625%;right:7%;top:19%;}
#img6{width:76.37%;left:8%;top:6%;}
#img7{width:95.79%;left:4.5%;bottom:-8%;}

#page7.active #img6{
    -webkit-animation: bounceIn 1s ease-out 0.8s forwards,pulse 1s linear 1.8s infinite;
            animation: bounceIn 1s ease-out 0.8s forwards,pulse 1s linear 1.8s infinite;
}
#page7.active #img7{
    -webkit-animation: fadeInUp 1s ease-out 1.8s forwards;
            animation: fadeInUp 1s ease-out 1.8s forwards;
}
#page7.active #dot5{
    -webkit-animation: fadeIn 1.5s linear 2.8s forwards,flash 2s linear 4.3s infinite;
            animation: fadeIn 1.5s linear 2.8s forwards,flash 2s linear 4.3s infinite;
}


/***第八页***/
#dot6{position:absolute;width:86.5625%;left:7%;top:8%;z-index:1;}
#box7{width:20.3125%;left:25.0625%;top:19%;z-index:2;}
#img8{width:206%;left:25%;top:25%;}
#times{position:absolute;width:43.6%;left:28.19%;top:31.2%;z-index:2;}
#box8{width:20.3125%;left:25.0625%;top:30%;z-index:2;}
#img9{width:206%;left:25%;top:15%;}
#hotel{position:absolute;width:77.7%;left:11.15%;top:54%;z-index:2;}
#address{position:absolute;width:51.5625%;left:24.21875%;top:60.5%;z-index:2;}

#page8.active #img8{
    -webkit-animation: fadeIn 1s ease-out 0.8s forwards;
            animation: fadeIn 1s ease-out 0.8s forwards;
}
#page8.active #time-bg{
    -webkit-animation: rotateIn 1s ease-out 1.8s forwards;
            animation: rotateIn 1s ease-out 1.8s forwards;
}
#page8.active #times{
    -webkit-animation: fadeInUp .5s ease-out 2.8s forwards;
            animation: fadeInUp .5s ease-out 2.8s forwards;
}
#page8.active #img9{
    -webkit-animation: fadeIn 1s ease-out 3.3s forwards;
            animation: fadeIn 1s ease-out 3.3s forwards;
}
#page8.active #add-bg{
    -webkit-animation: rotateIn 1s ease-out 4.3s forwards;
            animation: rotateIn 1s ease-out 4.3s forwards;
}
#page8.active #hotel{
    -webkit-animation: fadeInUp .5s ease-out 5.3s forwards;
            animation: fadeInUp .5s ease-out 5.3s forwards;
}
#page8.active #address{
    -webkit-animation: fadeInUp .5s ease-out 5.8s forwards;
            animation: fadeInUp .5s ease-out 5.8s forwards;
}
#page8.active #dot6{
    -webkit-animation: fadeIn 1.5s linear 6.3s forwards,flash 2s linear 7.8s infinite;
            animation: fadeIn 1.5s linear 6.3s forwards,flash 2s linear 7.8s infinite;
}


/***第九页***/
#dot7{position:absolute;width:86.35%;left:8%;top:22%;z-index:1;}
#box9{width:20.3125%;left:29.0625%;top:19%;z-index:2;}
#img10{width:206%;left:25%;top:15%;}
#page9 .img9-1{position:absolute;width:86%;left:7%;top:35%;height:50%;font-size:14px;z-index:2;}

#page9.active #img10{
    -webkit-animation: fadeIn 1s ease-out 0.8s forwards;
            animation: fadeIn 1s ease-out 0.8s forwards;
}
#page9.active #map-bg{
    -webkit-animation: rotateIn 1s ease-out 1.8s forwards;
            animation: rotateIn 1s ease-out 1.8s forwards;
}
#page9.active .img9-1{
    -webkit-animation: fadeIn 1.5s ease 2.8s forwards;
            animation: fadeIn 1.5s ease 2.8s forwards;
}
#page9.active #dot7{
    -webkit-animation: fadeIn 1.5s ease 4s forwards,flash 2s linear 5.5s infinite;
            animation: fadeIn 1.5s ease 4s forwards,flash 2s linear 5.5s infinite;
}

/***第十页**/
#erweima{position:absolute;width:53.23%;left:23.38%;top:20%;}
#w6-1{position:absolute;width:43.02%;left:28.49%;top:54%;}
#w6-2{position:absolute;width:43.33%;left:30.34%;top:58.2%;}
#w6-3{position:absolute;width:60%;left:20%;top:63%;}

#page10.active #erweima{
    -webkit-animation: rotateIn 1s ease-out 0.8s forwards;
            animation: rotateIn 1s ease-out 0.8s forwards;
}
#page10.active #w6-1{
    -webkit-animation: fadeInUp .5s ease-out 1.8s forwards;
            animation: fadeInUp .5s ease-out 1.8s forwards;
}
#page10.active #w6-2{
    -webkit-animation: fadeInUp .5s ease-out 2.3s forwards;
            animation: fadeInUp .5s ease-out 2.3s forwards;
}
#page10.active #w6-3{
    -webkit-animation: fadeInUp .5s ease-out 2.8s forwards;
            animation: fadeInUp .5s ease-out 2.8s forwards;
}


/**iphone4***/
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
}

/**iphone6s***/
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:3){
}