@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 10px 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%;}
.sanjiao{ width:400px; height:363px; position:absolute; left:-30%; top:-15px; 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: 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 .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:1.6s;
	      animation-delay:1.6s;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
		  opacity:1;
}

#page2{ background:url(../images/bg_02.jpg) no-repeat; background-size:100% 100%; position: relative;}
.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;
}

#page3{ background:url(../images/bg_03.jpg) no-repeat; background-size:100% 100%; position: relative;}

#page4,#page5,#page6,#page7,#page8,#page9,#page10,#page11,#page12,#page13,#page14,#page15,#page16,#page17,#page18,#page19,#page20,#page21{ background:url(../images/bg_04.jpg) no-repeat; background-size:100% 100%; position: relative;}

/*人物*/
.h3_qx{height:24px; padding:30px 0 25px; text-align:center;}
.h3_qx img{ height:24px;}
.people{width:100%; height:auto; margin-bottom:40px; opacity:0;}
.people img{width:100%;}
.intro{width:88%; height:auto; margin:0 auto; opacity:0;}
.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:60%; height:auto; margin:0 auto 40px; opacity:0;}
.people_qx img{width:100%;}
.intro_qx{width:85%; height:auto; margin:0 auto; opacity:0;}
.intro_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, #page14.active .people_qx, #page16.active .people_qx, #page18.active .people_qx, #page20.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, #page14.active .intro_qx, #page16.active .intro_qx, #page18.active .intro_qx, #page20.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;
}

/*结束*/
#page22 {background:url(../images/bg_05.jpg) no-repeat; background-size:100% 100%; position: relative;}
.jiemi{width:75%; height:auto; padding:8% 0 20%; margin:0 auto; opacity:0;}
.jiemi img{width:100%; height:auto;}

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


/*横屏提示*/
@-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:568px){
.people{ margin-bottom:35px;}
.h3_qx{ padding:20px 0;}
}

@media screen and (max-height:480px){
.qianzhan{ padding:30px 0px 10px 10%;}
.zhounian{ margin:5% auto 15px;}
.sanjiao{width:326px; height:296px; left:-20%;}
.shuoming{ bottom:80px;}
.people{width:85%; margin:0 auto 10px;}
.intro{width:72%;}
.h3_qx{height:16px; padding:15px 0;}
.h3_qx img{height:16px;}
.people_qx{ margin:0 auto 10px;}
.intro_qx{width:70%;}
}