* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center;}
body{background: #130b18; background-image: url(../images/bg-bottom.png),url(../images/bg-top.png); background-position: bottom,0 -1.666rem; background-size: 100% auto,100% auto; background-repeat: no-repeat,no-repeat;}
section{width: 10rem;min-height: 14.88rem; height: 100%; max-height: 18rem; position: absolute; margin: auto;}
.logo{position: absolute; width: 3.8rem; height: 0.453rem; top: 0.48rem; left: 0.44rem; background: url(../images/logo.png) no-repeat; background-size: 100% 100%; z-index: 1000;}   



/* 首页 */
.homeSection{}
.homeSection .title{position: absolute; top: 7.1%; left: 50%; margin-left: -3.8rem;height: 1.906666rem; width: 7.56rem; background: url(../images/home-title.png) no-repeat; background-size: 100% 100%; }
.homeSection .home-content{position: absolute; top: 22.7%; left: 50%;  margin-left:-3.186666rem;height: 5.533333rem; width: 6.36rem; background: url(../images/home-content.png) no-repeat; background-size: 100% 100%; }
.homeSection .home-content2{position: absolute; top: 59.5%; left: 50%;  margin-left:-3.186666rem;height: 2.773333rem; width: 6.36rem; background: url(../images/home-content2.png) no-repeat; background-size: 100% 100%; }
.homeSection .home-main-button{position: absolute;width: 2.693333rem; height: 0.666666rem; bottom: 10.49%; left: 50%; margin-left: -1.346666rem;  background: url(../images/home-main-button.png) no-repeat; background-size: 100% 100%; }
.homeSection .home-btn1{position: absolute;width: 1.653333rem; height: 0.666666rem; bottom:10.49%; left: 50%; margin-left: -3.2rem;  background: url(../images/button-bg.png) no-repeat; background-size: 100% 100%; font-size: 0.293rem; line-height: 0.666666rem; color: #fff; }
.homeSection .home-btn2{position: absolute;width: 1.653333rem; height: 0.666666rem; bottom: 10.49%; left: 50%; margin-left: 1.533333rem;   background: url(../images/button-bg.png) no-repeat; background-size: 100% 100%; font-size: 0.293rem; line-height: 0.666666rem; color: #fff; }
.home-note{position: absolute; width: 10rem; text-align: center; bottom: 5.61%; font-size: 0.266666rem; color: #eec152;}
.home-note-top1{position: absolute; width: 10rem; text-align: center; top: 19.6%;  font-size: 0.24rem; color: #eec152;}
.home-note-top2{position: absolute; width: 10rem; text-align: center; top: 28%; font-size: 0.24rem; color: #eec152;}
.home-note-top2>span{font-size: 0.306rem; color: #fff;}
.box-note1{position:absolute;top: 1rem; left: 1.026666rem; font-size: 0.418266rem; color: #fff;text-align: left;}
.box-note2{position:absolute;top: 4.10rem; left: 1.026666rem; font-size: 0.418266rem; color: #fff; text-align: left; line-height: 1.2;}
.box-note2>p{font-size: 0.24rem; color: #EEC152;}
.box-note1>span,.box-note2>span{font-size: 0.5228rem;}
.marquee{ position: absolute; width: 8.026666rem; height: 0.42rem; bottom: 18%; left: 50%; margin-left: -3.1rem; padding-left: 0.4rem; background: url(../images/m-icon.png) no-repeat; background-size: 0.28rem 0.306666rem; background-position: left;}
.marquee{ text-align: left;color: #EEC152; font-size: 0.266666rem; line-height: 0.42rem;}
.marquee .swiper-container{ position: absolute; left: 1.7rem; top: 0; right: 0;}
/* popups */
.md-modal {position: fixed;top: 50%;left: 50%;max-width: 10rem;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-modal-fixtop {position: fixed;top: 0;left: 0;width: 10rem;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;-webkit-transition: all 0.3s; background: rgba(0,0,0,0.7);
}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}
/* Content styles */
.md-content {position: relative;margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}

.popUp{background: url(../images/pop-bg.png) no-repeat; background-size: 100%; width: 7.733rem; height: 12.293rem;text-align: center; }
.popUp2{background: url(../images/pop-bg2.png) no-repeat; background-size: 100%; width: 10rem; height: 10.666rem;text-align: center; }
.popUp .md-close,.popUp2 .md-close{ width: 0.666rem; height: 0.666rem; position: absolute; display: block; right: 0.36rem;  top:0.386rem; background:url(../images/close-btn.png) no-repeat; background-size: 100% 100%;z-index: 1;}
#pop-intro .intro-title{ width: 6.32rem; height: 0.8rem; position: absolute; left: 50%; margin-left: -2.946rem;  top:1.2rem; background:url(../images/intro-title.png) no-repeat; background-size: 100% 100%;}
#pop-intro .swiper-container{width:100%; height: 8.933rem; position: absolute; top: 2.6rem; left: 0;}
#pop-intro .swiper-slide {font-size: 18px;height: auto; color: #eec152; text-align: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0.4rem; text-align: justify;}
#pop-intro .swiper-slide h4{font-size: 0.4rem; line-height: 0.6rem; margin: 0.266rem 0;}
#pop-intro .swiper-slide h5{font-size: 0.32rem; line-height: 0.6rem; margin: 0.133rem 0;}
#pop-intro .swiper-slide p{font-size: 0.32rem; line-height: 0.6rem; margin-bottom: 0.14rem;}
#pop-intro .swiper-slide ul{margin: 0; padding: 0; list-style: none;}
#pop-intro .swiper-slide ul li{font-size: 0.32rem; line-height: 0.6rem; padding-left: 0.4rem;margin-bottom: 0.14rem;}
#pop-intro .swiper-slide ul li>span{margin-left: -0.4rem; display: inline-block; width: 0.4rem;}

#pop-list .intro-title{ width: 6.32rem; height: 0.8rem; position: absolute; left: 50%; margin-left: -2.946rem;  top:1.2rem; background:url(../images/list-title.png) no-repeat; background-size: 100% 100%;}
#pop-list .swiper-container{width:100%; height: 8.933rem; position: absolute; top: 2.6rem; left: 0;}
#pop-list .swiper-slide {font-size: 18px;height: auto; color: #eec152; text-align: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0.4rem; text-align: justify;}
#pop-list .swiper-slide h4{font-size: 0.4rem; line-height: 0.6rem; margin: 0.266rem 0;}
#pop-list .swiper-slide h5{font-size: 0.32rem; line-height: 0.6rem; margin: 0.133rem 0;}
#pop-list .swiper-slide p{font-size: 0.32rem; line-height: 0.6rem; margin-bottom: 0.14rem;}
#pop-list .swiper-slide ul{margin: 0; padding: 0; list-style: none;}
#pop-list .swiper-slide ul li{font-size: 0.32rem; line-height: 0.6rem; padding-left: 0.4rem;margin-bottom: 0.14rem;}
#pop-list .swiper-slide ul li>span{margin-left: -0.4rem; display: inline-block; width: 0.4rem;}

.pop-title{width: 100%; top: 2.826rem; position: absolute; left: 0;}
.pop-title h3{font-size: 0.573rem; color: #fff; text-align: center;}
.pop-title h5{font-size: 0.4rem; color: #fff;text-align: center; font-weight: normal;}
.pop-title h4{font-size:0.486rem; color: #fff;text-align: center;}
.pop-title h4.biger{font-size: 0.506666rem;color: #fff;text-align: center;}
.pop-title h6{font-size: 0.346666rem; color: #fff; text-align: center;}
.pop-note{font-size: 0.293rem; color: #eec152;width: 100%; top: 5.066rem; position: absolute; left: 0;}
.success-btns{position: absolute;  width: 100%; text-align: center; top: 7.693rem; left: 0;}
.success-btns>.view-btn{margin: auto;}
.success-btns>p{font-size: 0.253rem; color: #eec152; margin-top: 0.266rem;}
.view-btn{width: 6.2rem; height: 1rem; background: url(../images/view-btn.png) no-repeat; background-size: 100% 100%;}
.code{position: absolute;  width: 100%; text-align: center; top: 6.213rem; left: 0;}
.code>img{width: 3.013rem; height: 3.013rem; margin: auto;}

.progressSection{}
.progressSection .title{position: absolute; top: 15.12%; left: 50%; margin-left: -4.56rem;height: 1.133rem; width: 9.026rem; background: url(../images/progress-title.png) no-repeat; background-size: 100% 100%; }
.progressSection .note{}
.progress-note-top1{position: absolute; width: 10rem; text-align: center; top: 24.8%;  font-size: 0.266rem; color: #eec152;}
.progress-note-top2{position: absolute; width: 10rem; text-align: center; top: 28%; font-size: 0.594rem; color: #fefbbe;}
.progress-content{position: absolute; width: 7.746rem; height: 5rem; left: 50%; top: 50%; margin-left: -3.866rem; margin-top: -2.493rem; background: url(../images/progress-box.png) no-repeat; background-size: 100%;}
.progress-note{position: absolute; width: 10rem; text-align: center; top: 69.4%;  font-size: 0.213rem; color: #eec152;}
.progress-btn1{position: absolute;width:3.786rem; height:1.666rem; bottom: 16.4%; left: 50%; margin-left: -3.866rem;  background: url(../images/progress-btn1.png) no-repeat; background-size: 100% 100%; }
.progress-btn2{position: absolute;width:3.786rem; height:1.666rem; bottom: 16.4%; left: 50%; margin-left: 0.066rem;  background: url(../images/progress-btn2.png) no-repeat; background-size: 100% 100%; }
.check{position: absolute; width: 1.426rem; height: 1.52rem; background: url(../images/check.png) no-repeat; background-size: 100%;}
.check1{top: 0.72rem; left: 50%; margin-left: -3.093rem;}
.check2{top: 0.72rem; left: 50%; margin-left: -0.693rem;}
.check3{top: 0.72rem; left: 50%; margin-left: 1.706rem;}
.check.active{ background: url(../images/check-active.png) no-repeat; background-size: 100%;}
.progress-tip{width: 100%; position: absolute; top: 3rem; font-size: 0.346rem; color: #eec152;}
.progress-tip>span{font-size: 0.683rem; color: #fff;}

.pop-tips{position: absolute; width: 100%; top: 7.186666rem; color: #eec152; font-size: 0.253333rem;}
.pop-tips>.tips-title{font-size: 0.333333rem;}
.btns{ position: absolute; top: 8.706666rem; width: 100%; text-align: center;}
.btns .get8-btn{width: 6.2rem; height: 1rem; background: url(../images/get8-btn.png) no-repeat; background-size: 100%; margin: auto;}
.btns .get68-btn{width: 6.2rem; height: 1rem; background: url(../images/get68-btn.png) no-repeat; background-size: 100%; margin: auto;}
.btns .get-btn{width: 6.2rem; height: 1.493333rem; background: url(../images/get-btn.png) no-repeat; background-size: 100%; margin: auto; margin-bottom: 0.16rem;}
#pop-get .pop-title{top: 2.506666rem;}
#pop-get .pop-note{top: 4.986666rem;}
#pop-get .pop-tips{top: 6.186666rem;}
#pop-get .btns{top: 7.773333rem;}

#pop-outtime .pop-title{top: 2.786666rem;}
#pop-outtime .pop-note{top: 5.653333rem;}
#pop-outtime .code{top: 6.826666rem;}

.failSection{}
.failSection .title{position: absolute; top: 13.71%; left: 50%; margin-left:-4.493333rem;height:1.306666rem; width:9.026666rem; background: url(../images/fail-title.png) no-repeat; background-size: 100% 100%; }
.failSection .message-note-top1{font-size: 0.537866rem; color: #fff; text-align: center; top: 27.6%; position: absolute; width: 100%;}
.failSection .message-note-top2{font-size: 0.873599rem; color: #fff; text-align: center; top: 37.85%; position: absolute; width: 100%;}
.failSection .get8-box{position: absolute; width: 6.666666rem; height: 3.2rem; left: 50%; top: 50%; margin-top: -0.64rem; margin-left: -3.333333rem; background: url(../images/get8-box.png) no-repeat; background-size: 100%;}
.failSection .get68-box{position: absolute; width: 6.666666rem; height: 3.2rem; left: 50%; top: 50%; margin-top: -0.64rem; margin-left: -3.333333rem; background: url(../images/get68-box.png) no-repeat; background-size: 100%;}
.message-box .message-tip{width: 100%; position: absolute; font-size: 0.266666rem; color: #eec152; top: 0.466666rem; text-align: center;}
.failSection .message-note{width: 100%; position: absolute; font-size: 0.213333rem; color: #eec152; bottom: 27.1%; text-align: center;}
.message-btn-back{position: absolute; width: 7.733333rem; height: 1.306666rem; background: url(../images/back-home-btn.png) no-repeat; background-size: 100%;}
.failSection .message-btn-back{ bottom: 17.2%; left: 50%; margin-left: -3.866666rem;}

.successSection{}
.successSection .title{position: absolute; top: 13.71%; left: 50%; margin-left:-4.493333rem;height:1.306666rem; width:9.026666rem; background: url(../images/success-title.png) no-repeat; background-size: 100% 100%; }
.successSection .message-note-top1{font-size: 0.5888rem; color: #fff; text-align: center; top: 25.3%; position: absolute; width: 100%;}
.successSection .code-note{font-size: 0.288266rem; color: #eec152; position: absolute; width: 100%; top: 38%; text-align: center;}
.successSection .code{top: 44%;}
.successSection .message-note{width: 100%; position: absolute; font-size: 0.213333rem; color: #eec152; bottom: 31.8%; text-align: center;}
.successSection .message-btn-back{ bottom: 11.57%; left: 50%; margin-left: -3.866666rem;}
.message-btn-view{position: absolute; width: 7.733333rem; height: 1.306666rem; background: url(../images/view-btn2.png) no-repeat; background-size: 100%;}
.successSection .message-btn-view{bottom: 21.9%; left: 50%; margin-left: -3.866666rem;}

.loading{width: 2.666666rem; height: 2.133333rem; background: url(../images/loading.gif) no-repeat rgba(0,0,0,0); background-position: center; background-size: 2.666666rem 2.13333rem; 
visibility: hidden;-webkit-backface-visibility: hidden; position: absolute; left: 50%; top: 50%; margin-left: -1.333rem; margin-top: -1rem;
-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s; border-radius: 0.2rem;}
.loading.show{visibility: visible;-webkit-transform: translateY(0%);opacity: 1;}