@charset "utf-8";
/* CSS Document */

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; bottom:5%; left:50%; margin:-10px 0 0 -18px; z-index:2;width:36px; height:36px; 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);}
}

/* page1 */
#page1{ background:#ba0303 url(../images/bg1.png) no-repeat; background-size:100% 100%;}
.music_icon{ width:40px; height:40px; display:block;position:absolute; right:10px; top:20px; z-index:100; background:url(../images/open.png) no-repeat; background-size:100% 100%;}
.music_close{ width:40px; height:40px; display:block;position:absolute; right:10px; top:20px; z-index:100; background:url(../images/close.png) no-repeat; background-size:100% 100%;} 
/* page2 */
#page2{ background:#000;}
.btn{ width:40px; position:absolute; z-index:9; top:50%; margin-top:-41px;}
.btn img{ width:100%;}
.btnL{ left:0;}
.btnR{ right:0;}
#page2 .swiper-slide .weapon ul img{ width:100%;}
.swiper-slide{ overflow:hidden;}

.img_L{width:100%; position:relative; right:0; top:0; -webkit-transform:translate3d(100%, 0, 0); -moz-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0);}
.img_R{width:100%; position:relative; left:0; bottom:0; z-index:10; -webkit-transform:translate3d(-100%, 0, 0); -moz-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0);}

.img_L1{width:100%; position:relative; right:0; top:0; -webkit-transform:translate3d(0, 100%, 0); -moz-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0);}
.img_R1{width:100%; position:relative; left:0; bottom:0; z-index:10; -webkit-transform:translate3d(0, -100%, 0); -moz-transform:translate3d(0, -100%, 0); transform:translate3d(-100%, -100%, 0);}

.swiper-slide-active .img_L,.swiper-slide-active .img_R,.swiper-slide-active .img_L1,.swiper-slide-active .img_R1{-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;
    -moz-transition: -moz-transform 1s ease-in-out 0.5s;
    transition: transform 1s ease-in-out 0.5s;
    -webkit-transform:translate3d(0, 0, 0);
       -moz-transform:translate3d(0, 0, 0);
            transform:translate3d(0, 0, 0);}
.img_L img,.img_R img,.img_L1 img,.img_R1 img{ width:100%;}
/* page3 */
#page3{ background:url(../images/bg_last.jpg) repeat;}
.shear-box{ width:50%; margin:0 auto;}
.shear-box li,.shear-box li a{ color:#fff;}
.shear-box li img{ margin-right:10px;}
.shear-01{ width:60%; margin:40% auto 10px;}
.shear-01 img{ width:100%;}
.from{ font-size:14px; color:#fff; text-align:center; line-height:30px; padding:10px}
/*结束页*/
.finish{width:100%;height:100%;background-size:100% auto; overflow: hidden;}
.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;}

/*横屏提示*/
@-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){
.weapon{width:100%}

}