@charset "UTF-8";

body {font-family:Microsoft Yahei, STHeiti, Droid Sans Fallback, Sans-serif; font-size:16px; font-weight:normal; color:#333;}
* {margin:0; padding:0; border:0;}
ul,ol,li{ list-style: none;}
a{ text-decoration:none; color:#5d0202;outline:none;}
a:hover{ text-decoration:none; color:#5d0202;}
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%; background:#000; 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:-10px 0 0 -11px; z-index:2;width:22px; height:20px; 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;
}

@-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 -11px;z-index:20; width:22px; height:20px; 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 */
#page1{ background:#000 url(../images/bg_01.jpg) center top no-repeat; background-size:100% 100%;}

.target{width:100%; height:auto; position:absolute; left:0; top:-20px;}
.target img{width:100%;}

.active .target{
  -webkit-animation-name: target;
          animation-name: target;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -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;
}

@-webkit-keyframes target {
	30% { left:60px; top:-20px;}
	60%{ left:30px; top:10px; }
	100% { left:0; top:-20px; }
}
@keyframes target {
	30% { left:60px; top:-20px;}
	60%{ left:30px; top:10px; }
	100% { left:0; top:-20px; }
}

.yuebing{width:90%; height:auto; position:absolute; left:5%; top:10%; opacity:0;}
.yuebing img{width:100%;}

.active .yuebing{
  -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:3s;
	      animation-delay:3s;
		  opacity:1;
}


.zidan1{width:220px; height:89px; position:absolute; left:0; bottom:15%;}
.zidan1 img{width:100%;}


.zidan2{width:120px; height:48px; position:absolute; right:0; bottom:25%;}
.zidan2 img{width:100%;}


.logo{width:76px; height:17px;background:url(../images/logo.png) center top no-repeat; background-size:100% auto; position:absolute; left:50%; bottom:50px; margin-left:-38px;}


/* page2 */
#page2{ background:#000 url(../images/bg_02.jpg) center top no-repeat; background-size:100% auto;}
.weapon{width:86%; padding-top:10%; margin:0 auto; position:relative;}
.weapon img{width:90%; display:block; margin:0 auto;}
.watching{width:80px; height:80px; position:absolute; bottom:-70px; right:15px;}
.watching img{width:100%;}
.watching .watch2{width:85px; height:39px; position:absolute; top:20px; left:-4px;}

.swiper-slide-active .watching .watch1{
  -webkit-animation-name: xuanzhuan;
          animation-name: xuanzhuan;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:0.1s;
	      animation-delay:0.1s;
  -webkit-animation-timing-function: linear;
  		  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes xuanzhuan {
	0% {
		-webkit-transform: rotate(0deg);
    	transform:rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
    	transform:rotate(360deg);
	}
}
@keyframes xuanzhuan {
	0% {
		-webkit-transform: rotate(0deg);
    	transform:rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
    	transform:rotate(360deg);
	}
}


/* page3 */
#page3{ background:#000 url(../images/bg_04.jpg) center top no-repeat; background-size:100% auto;}

.door1{width:50%; height:100%; position:absolute; left:-30%; top:0;}
.door1 img{width:100%; height:100%;}

.active .door1{
	-webkit-transition: all 1s ease-in-out 1s;
    transition: all 1s ease-in-out 1s;
	left:0;
}

.door2{width:50%; height:100%; position:absolute; right:-30%; top:0;}
.door2 img{width:100%; height:100%;}

.active .door2{
	-webkit-transition: all 1s ease-in-out 1s;
    transition: all 1s ease-in-out 1s;
	right:0;
}

.light3{width:70%; height:auto; position:absolute; left:-15%; top:15%; z-index:2;}
.light3 img{width:100%; height:auto;}

.plane{width:64px; height:60px; position:absolute; right:8%; bottom:30%; z-index:2;}
.plane img{width:100%; height:auto;}

.fire{width:86%; height:auto; position:absolute; right:0; bottom:0; z-index:2;}
.fire img{width:100%; height:auto;}

.active .light3, .active .plane, .active .fire{
	-webkit-transition: all 1s ease-in-out 1s;
    transition: all 1s ease-in-out 1s;
	opacity:0;
}

.tank{width:300px; height:160px; position:absolute; left:-300px; bottom:30px; z-index:2;}
.tank img{width:100%; height:100%;}

.active .tank{
	-webkit-transition: all 1s ease-in-out 2s;
    transition: all 1s ease-in-out 2s;
	left:-100px;
}

.active .tank img{
  -webkit-animation-name: tank;
          animation-name: tank;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:3s;
	      animation-delay:3s;
}


@-webkit-keyframes tank {
  0% {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-8%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-8%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes tank {
  0% {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-8%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-8%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.zidan3{width:150px; height:100px; position:absolute; left:50px; bottom:120px; z-index:2; opacity:0;}
.zidan3 img{width:100%; height:100%;}

.active .zidan3{
	-webkit-transition: all 0.8s ease-in-out 3s;
    transition: all 0.8s ease-in-out 3s;
	opacity:1;
	left:400px;
	bottom:300px;
}

.btn_01{width:69px; height:170px; position:absolute; left:10%; top:10%; z-index:2; opacity:0;}
.btn_01 img{width:100%; height:100%;}

.btn_02{width:69px; height:170px; position:absolute; right:10%; top:10%; z-index:2; opacity:0;}
.btn_02 img{width:100%; height:100%;}

.active .btn_01, .active .btn_02{
  -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:3.8s;
	      animation-delay:3.8s;
		  opacity:1;
}

/*视频弹出*/
.video_wrap{width:100%; max-width:480px; height:100%; background:#000 url(../images/bg_03.jpg) center top no-repeat; background-size:100% auto; overflow: hidden; position:fixed; left:0; top:0; z-index:9; display:none;}
.video_wrap .people{width:180px; height:140px; margin:0 auto;}
.video_wrap .people img{width:100%; opacity:0.5;}
.video_wrap .close_video{width:28px; height:24px; position:absolute; top:10px; right:18px;}
.video_wrap .close_video img{width:100%; height:auto;}
.video_wrap .heart_video{width:32px; height:27px; position:absolute; top:50px; right:15px;}
.video_wrap .heart_video img{
  width:100%;
  height:auto;
  -webkit-transform:scale(0);
  transform:scale(0);
  -webkit-animation-name: fudong;
          animation-name: fudong;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay:0.1s;
	      animation-delay:0.1s;
  -webkit-animation-timing-function: linear;
  		  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes fudong {
  0%,100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes fudong {
  0%,100% {
	-webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
	-webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

.video_yuebing{/*width:316px; height:178px;*/ width:auto; height:auto; background:#000; border:1px solid #666; /*box-shadow:0 0 1px #ccc;*/ margin:-20px auto 0; position:relative;}
.video_yuebing video{width:100%; height:auto;}
.video_yuebing .light2{width:265px; height:90px; position:absolute; right:-15px; top:-52px; display:none;}
.video_wrap .title{width:90%; height:auto; line-height:32px; font-size:24px; font-weight:normal; color:#fff; text-shadow:2px 2px 2px #000; position:absolute; left:5%; bottom:16%;}
.video_wrap .info{width:90%; height:auto; line-height:18px; font-size:12px; font-weight:normal; color:#fff; position:absolute; left:5%; bottom:6%;}

/*结束页*/
.finish{width:100%; max-width:480px; height:100%; background:#000 url(../images/bg_04.jpg) center top no-repeat; background-size:100% auto; overflow: hidden; position:fixed; left:-9999px; top:0; z-index:10;}

.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:none;}
.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;}
.audio2015{width:0;height:0;position:absolute;left:-99999px;top:0;margin:0;padding:0;}

/*滚屏样式*/
.device { width:100%; height:100%; position:relative;}
.swiper-container { width:100%; height:auto;}
.content-slide { padding:20px; color:#fff;}
.pagination { width:96%; padding:0 2%; height:34px; text-align:center; position:absolute; left:0; bottom:5%; z-index:2; background:url(../images/bg_page.jpg) center 10px no-repeat; background-size:auto 30%;}
.swiper-pagination-switch {width:34px; height:34px; display:inline-block; margin:0 auto; background:url(../images/dot.png) center center no-repeat; background-size:85%;}
.swiper-active-switch {background:url(../images/dot2.png) center center no-repeat; background-size:100%;}
.swiper-slide h3{ font-weight:bold; font-size:1em; line-height:1.5em; color:#fff; opacity:0.7; position:absolute; left:15%; top:35%;}
.swiper-slide h3.t2{ left:2%; top:15%;}
.swiper-slide h3.t3{ left:5%; top:48%;}
.swiper-slide h3.t4{ left:5%; top:40%;}
.swiper-slide h3.t5{ left:auto; right:5%; top:45%;}
.swiper-slide p{ padding:0 5px; font-size:0.875em; line-height:1.5em; color:#fff; opacity:0.7;}
.pagination li{width:20%; float:left; position:relative;}
.pagination .year{width:48px; height:24px; position:absolute; top:-40px; left:50%; margin-left:-24px;}
.pagination .year.t0{background:url(../images/year1.png) center top no-repeat; background-size:auto 100%;}
.pagination .year.t1{background:url(../images/year2.png) center top no-repeat; background-size:auto 100%;}
.pagination .year.t2{background:url(../images/year3.png) center top no-repeat; background-size:auto 100%;}
.pagination .year.t3{background:url(../images/year4.png) center top no-repeat; background-size:auto 100%;}
.pagination .year.t4{background:url(../images/year5.png) center top no-repeat; background-size:auto 100%;}
.light{width:50px;height:40px;position:absolute;top:-70px;left:50%;margin-left:-25px;background:url(../images/light.png) center top no-repeat; background-size:auto 100%;display:none;}
.swiper-active-switch .light{ display:block;}

/*横屏提示*/
@-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){
#page1{ background:#000 url(../images/bg_01.jpg) center top no-repeat; background-size:auto 100%;}
#page2{ background:#000 url(../images/bg_02.jpg) center top no-repeat; background-size:auto 100%;}
#page3{ background:#000 url(../images/bg_04.jpg) center top no-repeat; background-size:auto 100%;}
.video_wrap{ background:#000 url(../images/bg_03.jpg) center top no-repeat; background-size:auto 100%;}
.weapon{width:70%; padding-top:12%;}
.swiper-slide p{ padding:0 10px 0; font-size:0.75em;}
.swiper-slide h3{top:40%;}
.swiper-slide h3.t2{ top:12%;}
.swiper-slide h3.t3{ top:48%;}
.swiper-slide h3.t4{ top:40%;}
.swiper-slide h3.t5{ top:50%;}
.pagination { width:76%; padding:0 13%; bottom:3%;}
.pagination .year{width:36px; height:18px; top:-35px; margin-left:-18px;}
.light{width:44px; height:35px; top:-65px; margin-left:-22px;}

}