@media (min-width: 320px) {
    html {font-size: 100%;}
}
@media (min-width: 360px) {
    html {font-size: 112.5%;}
}
@media (min-width: 384px) {
    html {font-size: 120%;}
}
@media (min-width: 400px) {
    html {font-size: 125%;}
}
@media (min-width: 540px) {
    html {font-size: 168.75%;}
}
@media (min-width: 600px) {
    html {font-size: 187.5%;}
}
@media (min-width: 640px) {
    html {font-size: 200%;}
}
@media (min-width: 720px) {
    html {font-size: 225%;}
}
@media (min-width: 768px) {
    html {font-size: 100%;}
}
html {font-size: calc(100vw / 320 * 16);}


html,div,ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img,form,embed,label{margin:0;padding:0;border:0;font-weight:normal;}
body{background:#000;overflow:hidden;}
*, *:before, *:after {
    -moz-box-sizing: border-box;		/* Firefox 1, probably can drop this */
    -webkit-box-sizing: border-box;	/* Safari 3-4, also probably droppable */
    box-sizing: border-box;			/* Everything else */
}
a {text-decoration: none;}
img {border:none;display: block;}
ul{list-style: none;}

.fl {float:left;}
.fr {float:right;}
.pos-rel {position: relative;}
.clearfix{clear:both; line-height:0px!important; height:0px!important;font-size:0px!important;}


/* ==== 页面容器样式开始 ==== */
#page1{background:url("../img/tpage1.png") no-repeat; background-size:100% 100%;-webkit-background-size:100% 100%;}
#page2{background:url("../img/tpage2.png") no-repeat;background-size:100% 100%;-webkit-background-size:100% 100%;}
#page3{background:url("../img/tpage3.png") no-repeat;background-size:100% 100%;-webkit-background-size:100% 100%;}
#page4{background:url("../img/tpage4.png") no-repeat;background-size:100% 100%;-webkit-background-size:100% 100%;}
.section img, .section div{position:absolute;}

/*page1*/
.pg1_img1{left:3.36rem;top:13%;height:5.17rem;width:13.28rem; display:none;}
.pg1_img2{left:6rem;top:31%;height:8rem;width:8rem; display:none;}
.btn_moveTo{width:10.67rem; bottom:18%; cursor:pointer; left:4.665rem; display:none;}
.btn_moveTo a{width:10.67rem; float:left; display:block; margin-bottom:3.5rem;}
.btn_moveTo img{width:10.67rem; height:3.06rem; vertical-align:top; -ms-interpolation-mode:bicubic; border:0;}
.arrow-down{height:auto;width:1.4rem;position:absolute;left:50%;bottom:1.5rem;margin-left:-0.7rem;}
.moveOutdown {animation: moveOutdown 2s infinite ease; -webkit-animation: moveOutdown 2s infinite ease; }
@-webkit-keyframes moveOutdown {
    from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
    to{opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}

@keyframes moveOutdown {
    from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
    to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}


/*page2*/
.page2_title{left:3.5rem;top:10%;height:2.4rem; display:none; text-align: center; }
.page2_title h3{font-size:1.49rem; color: #c60200; font-weight: bold; }
.pg2_img1{left:3rem;top:20%;height:17.46rem;width:16.16rem; display:none;}
.page2_txt{bottom:9%; display:none;  }
.page2_txt p{font-size:0.8rem; color: #823800; padding: 0 1rem; line-height:1.5rem; text-align: justify;}


/*page3*/
.page3_title{left:3.5rem;top:10%;height:2.4rem; display:none; text-align: center; }
.page3_title h3{font-size:1.49rem; color: #fff; font-weight: bold; }
.pg3_img1{left:4rem;top:20%;height:17.46rem;width:16.16rem; display:none;}
.page3_txt{bottom:12%; display:none;  }
.page3_txt p{font-size:0.8rem; color: #fff; padding: 0 1rem; line-height:1.5rem; text-align: justify;}

/*page4*/
.page4_title{left:3.5rem;top:10%;height:2.4rem; display:none; text-align: center;}
.page4_title h3{font-size:1.49rem; color: #fff82e; font-weight: bold; }
.pg4_img1{left:3.5rem;top:20%;height:17.46rem;width:16.16rem; display:none;}
.page4_txt{bottom:12%; display:none;}
.page4_txt p{font-size:0.8rem; color: #fff; padding: 0 1rem; line-height:1.5rem; text-align: justify;}
.pg4_img2{left:12rem;bottom:1%;height:4.8rem;width:7.95rem; display:none;}