@charset "UTF-8";

body {font-family:Microsoft Yahei, STHeiti, Droid Sans Fallback, Sans-serif; font-size:16px; font-weight:normal; color:#333; background:#fff;}
* {margin:0; padding:0; border:0;}
ul,ol,li{ list-style: none;}
a{ text-decoration:none; color:#333;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{ text-decoration:none; color:#333;}
img{ vertical-align:middle;}
section{ display:block;}
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear{clear:both; font-size:0; height:0; line-height:0; overflow:hidden;}

.main{width:100%; max-width:480px; height:100%; overflow: hidden; position:relative; margin:0 auto;}
.page{ width:100%; height:100%; font-size:1em; overflow:hidden; position:relative;}
#loading{width:100%; height:100%; background:#000; opacity:0.5; text-align:center; position:fixed; top:0; left:0; z-index:1000;}

/* 改变动画的效果方式*/
* {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

/*箭头指示引导1*/
.arrow { position:absolute; top:96%; left:50%; margin:-14px 0 0 -12px; z-index:20;width:20px; height:22px; background:url(../images/arrow.png) no-repeat; background-size:100% auto;
-webkit-animation: start 1.5s infinite ease-in-out;
   -moz-animation: start 1.5s infinite ease-in-out;
        animation: start 1.5s infinite ease-in-out;
}
.arrow.gray{background:url(../images/arrow2.png) no-repeat;background-size:100% auto;}
@-webkit-keyframes start {
    0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
    60% {opacity: 1;-webkit-transform: translate(0,0);}
    100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
    0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
    60% {opacity: 1;-moz-transform: translate(0,0);}
    100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
    0%,30% {opacity: 0;transform: translate(0,10px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,-8px);}
}

/*箭头指示引导2*/
.arrow2{ position:absolute; top:95%; left:50%; margin:-10px 0 0 -22px;z-index:20; width:40px; height:18px; background:url(../images/arrow2.png) no-repeat; background-size:100% auto;
-webkit-animation: start2 1.5s infinite ease-in-out;
   -moz-animation: start2 1.5s infinite ease-in-out;
        animation: start2 1.5s infinite ease-in-out;
}

@-webkit-keyframes start2 {
    0%,30% {opacity: 0;-webkit-transform: translate(0,-8px);}
    60% {opacity: 1;-webkit-transform: translate(0,0);}
    100% {opacity: 0;-webkit-transform: translate(0,10px);}
}
@-moz-keyframes start2 {
    0%,30% {opacity: 0;-moz-transform: translate(0,-8px);}
    60% {opacity: 1;-moz-transform: translate(0,0);}
    100% {opacity: 0;-moz-transform: translate(0,10px);}
}
@keyframes start2 {
    0%,30% {opacity: 0;transform: translate(0,-8px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,10px);}
}

/*封面*/
#page1{ background:url(../images/bg_01.jpg) no-repeat; background-size:100% 100%; position: relative;}
.qianzhan{ padding:90px 0 15px 10%; font-size:20px; color:#fff; opacity:0;}
.zhounian{width:85%; height:auto; margin:0 auto; opacity:0;}
.zhounian img{width:100%;}
.shuoming{ width:100%; height:auto; line-height:1.5em; font-size:18px; color:#fff; text-align:center; opacity:0; position:absolute; left:0; bottom:100px;}
.fengbei{width:20%; height:auto; opacity:0; position:absolute; left:50%; margin-left:-10%; bottom:50px;}
.fengbei img{width:100%;}
.sanjiao{ width:330px; height:310px; position:absolute; left:-30px; top:40px; opacity:0;}
.sanjiao img{ width:100%;}

.active .qianzhan{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:0.1s;
	      animation-delay:0.1s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.active .zhounian{
  -webkit-animation-name: bounceInRight;
          animation-name: bounceInRight;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:1s;
	      animation-delay:1s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.active .shuoming{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:1.8s;
	      animation-delay:1.8s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.active .sanjiao{ 
  -webkit-animation-name: rollIn;
          animation-name: rollIn;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:0.5s;
	      animation-delay:0.5s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.active .fengbei{
  -webkit-animation-name: bounceInUp;
          animation-name: bounceInUp;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:2s;
	      animation-delay:2s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.information{ width:90%; height:auto; padding-top:20%; margin:0 auto;}
.information img{ width:100%; height:auto; opacity:0;}
.active .information img{
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:0.1s;
	      animation-delay:0.1s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.bg_02{ background:url(../images/bg_02.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_03{ background:url(../images/bg_03.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_04{ background:url(../images/bg_04.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_05{ background:url(../images/bg_05.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_06{ background:url(../images/bg_06.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_07{ background:url(../images/bg_07.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_08{ background:url(../images/bg_08.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_09{ background:url(../images/bg_09.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_10{ background:url(../images/bg_10.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_11{ background:url(../images/bg_11.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_12{ background:url(../images/bg_12.jpg) no-repeat; background-size:100% auto; position: relative;}

.arrow_left{ width:40px; position:absolute; left:45px; top:50%; margin-left:-45px; z-index:1000;}
.arrow_right{ width:40px; position:absolute; right:0; top:50%; margin-left:-45px; z-index:1000;}
.arrow_left img,.arrow_right img{ width:100%;}

/*人物*/
.pics_quxuan{width:100%; height:auto; position:relative;}
.bg_text{ width:100%; height:100%;  padding:20px 0; background:url(../images/bg_black.png) repeat; position:absolute; left:0; top:270px; text-align:center;}
.bg_text img{ width:85%;}
.bg_text .arrow_wrap{ width:56px; height:28px; background:url(../images/bg_black.png) repeat; position:absolute; top:-28px; left:50%; margin-left:-28px;}
.bg_text .arrow_wrap .arrow_down{ width:100%; height:100%; display:block; background:url(../images/arrow_down.png) center center no-repeat; background-size:40% auto;}
.bg_text .arrow_wrap .arrow_down.up{background:url(../images/arrow_up.png) center center no-repeat; background-size:40% auto;}

/*结束*/
#page7 {background:url(../images/bg_13.jpg) no-repeat; background-size:100% 100%; position: relative;}
.jiemi{width:85%; height:auto; padding:12% 0 15%; opacity:0; margin:0 auto;}
.jiemi img{width:100%; height:auto;}

.active .jiemi{
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:0.1s;
	      animation-delay:0.1s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.gohome{width:80%; height:auto; padding:0 10%;}
.gohome li{width:50%; height:38px; font-size:1em; color:#323a47; text-align:center; float:left;}
.gohome li a{width:90px; height:38px; line-height:38px; background:#00a0e9; display:block; margin:0 auto; font-size:20px; color:#fff; text-align:center; border-radius:5px; opacity:0;}
.gohome li img{ height:100%; opacity:0;}

.active .gohome li a{
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:1s;
	      animation-delay:1s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.chupin{ width:100%; height:auto; font-size:18px; color:#666; text-align:center; position:absolute; left:0; bottom:20px; display:none;}

.share_tips{ width:100%; height:100%; margin:0; padding:0; position:fixed; top:0; left:0; z-index:100; background:#000; -webkit-opacity:0.7; -moz-opacity:0.7; opacity:0.7; text-align:right; display:block;}
.share_tips img{width:70%; margin:10px 5px 0 0;}
.black{ width:100%; height:100%; margin:0; padding:0; position:fixed; top:0; left:0; z-index:100; background:#acceb5; opacity:0.8; display:none;}

.btn_play{ width:25px; height:25px; background:url(../images/open.png) no-repeat; background-size:100% auto; position:fixed; right:10px; top:10px; z-index:10; display:none;}
.btn_play.pause{ width:25px; height:25px; background:url(../images/close.png) no-repeat; background-size:100% auto;}

.device {
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-container {
  height: auto;
  width: 100%;
}
.content-slide {
  padding: 20px;
  color: #fff;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom: 10px;
  width: 100%;
  z-index:9;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(../images/dot.png) no-repeat; background-size:100% 100%;
  margin: 0 8px;
  cursor: pointer;
}
.swiper-active-switch {
  background: url(../images/dot2.png) no-repeat; background-size:100% 100%;
}


/*横屏提示*/
@-webkit-keyframes rotation {
	10% { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
	50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
	90% { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
	100% { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
}
@keyframes rotation {
	10% { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
	50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
	90% { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
	100% { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
}
#orientLayer { display:none; }
@media screen and (min-aspect-ratio: 13/9) { #orientLayer { display:block; } }
.browse_tips { width:100%; height:100%; background:#000; position:fixed; left:0; top:0; right:0; bottom:0; z-index:9997; display: none; }
.browse_tips_ul { width:100%; position:absolute; top:45%; margin-top:-75px; text-align:center; }
.browse_tips_icon { width:67px; height:109px; display:inline-block;  background-image:url(../images/browse_tips.png); background-size:100%; transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out;}
.browse_tips_txt { margin-top:20px; font-size:15px; color:#fff }

@media screen and (max-height:480px){
.qianzhan{ padding:30px 0px 10px 10%;}
.zhounian{ margin:5% auto 15px;}
.shuoming{ bottom:80px;}

.jiemi{width:60%; padding:13% 0 0 13%;}
}