@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:18px; color:#291d5b; opacity:0;}
.zhounian{width:80%; 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%;}

.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: 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:0.8s;
	      animation-delay:0.8s;
  -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.5s;
	      animation-delay:1.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:1.6s;
	      animation-delay:1.6s;
  -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:#fff url(../images/bg_02.jpg) no-repeat; background-size:100% auto; position: relative;}
.bg_03{ background:#f9f9f9 url(../images/bg_03.jpg) no-repeat; background-size:100% auto; position: relative;}

/*人物*/
.h3_qx{height:24px; padding:30px 0 20px; text-align:center;}
.h3_qx img{ width:auto; height:24px;}
.notes{width:90%; margin:0 auto;}
.notes img{width:100%;}
.people{width:100%; height:auto; margin:20px 0; opacity:1;}
.people img{width:100%;}
.intro{width:88%; height:auto; margin:0 auto; opacity:1;}
.intro img{width:100%;}
/*.active .people{
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
  -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;
}

.active .intro{
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -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;
}

#page3.active .people{
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -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;
}

#page3.active .intro{
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
  -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;
}*/

/*区选*/
.people_qx{width:100%; height:auto; margin-bottom:15px; opacity:1;}
.people_qx img{width:100%;}
.intro_qx{width:85%; height:auto; margin:0 auto; opacity:1;}
.intro_qx img{width:100%;}
.huawen_qx{width:100%; margin-bottom:10px;}
.huawen_qx img{width:100%;}
/*.active .people_qx{
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
  -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;
}

.active .intro_qx{
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -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;
}

#page4.active .people_qx, #page6.active .people_qx, #page8.active .people_qx, #page10.active .people_qx, #page12.active .people_qx{
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -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;
}

#page4.active .intro_qx, #page6.active .intro_qx, #page8.active .intro_qx, #page10.active .intro_qx, #page12.active .intro_qx{
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
  -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;
}*/

/*结束*/
#page5 {background:url(../images/bg_04.jpg) no-repeat; background-size:100% 100%; position: relative;}
.jiemi{width:64%; height:auto; padding:19% 0 0 10%; opacity:0;}
.jiemi img{width:100%; height:auto;}

.active .jiemi{
  -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.1s;
	      animation-delay:0.1s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

.gohome{width:80%; height:auto; padding:0 10%; position:absolute; left:0; bottom:15%;}
.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:#8957a1; 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;}
.people{width:85%; margin:10px auto;}
.intro{width:85%;}
.h3_qx{height:16px; padding:15px 0;}
.h3_qx img{height:16px;}
.people_qx{ width:85%; margin:0 auto 10px;}
.intro_qx{width:80%;}
.huawen_qx{width:80%;}
.jiemi{width:60%; padding:13% 0 0 13%;}
}