
/*------common------*/
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,div,input,img{margin:0px; padding:0px; border:0px;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%}
em,i,b{font-style:normal}
ul,ol,li{list-style:none}
input{vertical-align:-2px; outline:0}
textarea{resize:none}
td,th,ul,ol{padding:0px;}
a{text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;cursor:pointer}
a:hover{text-decoration:none;}
a:visited{ color: inherit; }
.fix{*zoom:1}
.fix:after{content:'\20';display:block;height:0;line-height:0;visibility:hidden;clear:both}
.clear{clear:both;font-size:0px;padding:0px;margin:0px;height:0px;line-height:0px;}
.clearfix {display: block;}
.pr{position:relative;}
.pa{position:absolute;}
.fl{float:left;}
.fr{float:right;}
.ofh{ overflow:hidden;}
.dpb{ display:block;}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
a{ width:100%; height:100%; display:block;}

body{
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-family: "Microsoft YaHei", tahoma, arial, SimSun;
    color: #4f4f4f;
    background: #000;
}

#wrap {
    width:100%;
    height:100%;
    position:absolute;
}

#swiper {
    width:100%;
    height:100%;
    position:absolute;
}

.page {
    width:100%;
    height:100%;
    overflow: hidden;
}
.swiper-container{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}



/*第一页*/
.page1 {
    background: url(../images/bg_1.jpg) no-repeat top center;
    background-size: 100% auto;
    color: #fff;
    font-size: 0.56rem;
    text-align: center;
    position: relative;
}
.page1_logo{
    width: 2.11rem;
    height: 0.73rem;
    position: absolute;
    top: 0.2rem;
    left: 0.4rem;
	z-index:50;
}
.page1_1{
    width: 1.1rem;
    height: 3rem;
    position: absolute;
    top: 1.42rem;
    left: 0.52rem;
    z-index: 4;
}
.page1_2{
    width: 6.4rem;
    height: 10.23rem;
    position: absolute;
    top: 0.2rem;
    left: 0rem;
    z-index: 3;
}
.page1_3{
    width: 4.38rem;
    height: 5.01rem;
    position: absolute;
    top: 0rem;
    right: 0rem;
    z-index: 2;
}
.page1_4{
    width: 4.38rem;
    height: 5.01rem;
    position: absolute;
    top: 0rem;
    right: 0rem;
    z-index: 2;
}
.shitou{ width:6.4rem; 
    height:2rem;
    position:absolute;
	left:0rem;
	bottom:0rem;
	z-index:10;
	}

/*第二页*/
.page2{
    background: url(../images/bg_2.jpg) no-repeat top center;
    background-size: 100% auto;
}
.page2_logo{
    width: 3rem;
    height: 1rem;
    margin: 0.4rem auto 0 auto;
}
.page2_1{
    width: 6.4rem;
	height:1.98rem;
    margin: 0.1rem 0 0 0;
}
.page2_2{
    width: 6.4rem;
    margin: 0;
}
.page2_3{
    width: 6.4rem;
    margin: 0rem 0 0 0;
}
.page2_btn{
    width: 4rem;
    height: 1rem;
    position: absolute;
    bottom:0.5rem;
    left: 50%;
    margin-left: -2rem;
}
.page2_btn a{
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/page2_btn.png) no-repeat top center;
    background-size: 100% auto;
    animation: linear circle .4s infinite alternate;
    -webkit-animation: linear circle .4s infinite alternate;
}
@-webkit-keyframes circle {
    0% {
        -webkit-transform: scale(1)
    }

    100% {
        -webkit-transform: scale(1.1)
    }
}

@keyframes circle {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.1)
    }
}


/*竖屏浏览*/
@-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/8){
    #orientLayer{display:block}
    #loading{display:none}
}
.mod-orient-layer{
    display:none;
    position:fixed;
    height:100%;
    width:100%;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.6);
    z-index:9997;
}
.mod-orient-layer__content{
    position:absolute;
    width:100%;
    top:45%;
    margin-top:-1.17rem;
    text-align:center
}
.mod-orient-layer__icon-orient{
    background:url(../images/xxx.png) no-repeat left top;
    display:inline-block;
    width:1.05rem;
    height:1.7rem;
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -webkit-animation:rotation infinite 1.5s ease-in-out;
    animation:rotation infinite 1.5s ease-in-out;
    -webkit-background-size:1.05rem;background-size:1.05rem;
}
.mod-orient-layer__desc{
    margin-top:0.31rem;
    font-size:0.23rem;
    color:#fff;
    text-align:center;
}

/*------popupbox_download------*/
.popupbox_download {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: url(../images/mask.jpg) no-repeat left top;
    background-size: cover;
    z-index: 999;
}
