* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center;}
body{background: #020714; background-image: url(../images/bg-bottom.png),url(../images/bg.png); background-position: bottom,top; background-size: 100% auto,100% auto; background-repeat: no-repeat,repeat-y;}
section{width: 10rem;min-height: 14.88rem; height: 100%; max-height: 18rem; position: absolute; margin: auto;}
.logo{position: absolute; width: 3.226rem; height: 0.386rem; top: 0.466rem; left: 0.52rem; background: url(../images/logo.png) no-repeat; background-size: 100% 100%; z-index: 1000;}   



/* 首页 */
.homeSection{}
.homeSection .title{position: absolute;width:7.306rem;height: 1.746rem; top: 17%; left: 50%; margin-left:-3.64rem;  background: url(../images/home-title.png) no-repeat; background-size: 100% 100%; }
.homeSection .home-content{position: absolute;width: 6.36rem;height: 5.24rem;  top: 31.7%; left: 50%;  margin-left:-3.173rem; background: url(../images/home-content.png) no-repeat; background-size: 100% 100%; }
.homeSection .home-content2{position: absolute; top: 67.1%; left: 50%;  margin-left:-5rem;height: 1.6rem; width: 10rem; background: url(../images/home-content2.png) no-repeat; background-size: 5.106rem 0.373rem; background-position: top center; }
.homeSection .home-main-button{position: absolute;width: 2.773rem; height: 0.906rem; top: 0.733rem; left: 1.546rem;}
.homeSection .home-btn1{position: absolute;width: 3.053rem; height: 0.973rem; top: 0; left: 0;}
.homeSection .home-btn2{position: absolute;width: 3.04rem; height: 0.973rem; top: 0; right: 0;}
.btns-ray{position: absolute; width: 3.066rem; height: 1.56rem; top: -0.773rem; left: 50%; margin-left: -1.533rem; pointer-events: none; background: url(../images/btns-ray.png) no-repeat; background-size: 100%;}
.home-note{position: absolute; width: 100%; text-align: center; top: 1.133rem; font-size:0.2rem; color: #edb85e;}
.home-note1{position: absolute; width: 100%; text-align: center; top: 0.506rem; font-size:0.266rem; color: #f0c884;}
.home-note-top1{position: absolute; width: 4.133rem; text-align: center; top:0.08rem; left: 1.186rem;  font-size: 0.24rem; color: #000;}
.home-note-top2{position: absolute; width: 100%; text-align: center; top: 1.04rem; font-size: 0.302rem; color: #f0c884;}
.home-note-top2>span{font-size: 0.385rem;}

.home-btns{position: absolute; width: 6.093rem; height:0.973rem; left: 50%; margin-left: -3.04rem; top: 80.16%; background: url(../images/home-btn-bg.png) no-repeat; background-size: 100% 100%; }
.home-links{ position: absolute; top: 1.2rem; width: 100%; height: 0.4rem; text-align: center; font-size: 0.266rem;}
.home-links a{ font-size: 0.266rem; color: #fff; padding: 0 0.133rem; text-decoration: none; }
.home-links :after{content: ""; position: absolute; width: 0.026rem; height: 0.4rem; left: 50%; top: 0; background: #e0c463; position: absolute;}
/* 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.76rem; height:12.226rem;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.346rem;  top:0.4rem; background:url(../images/close-btn.png) no-repeat; background-size:100%;z-index: 1;}
#pop-intro .intro-title{ width: 6.32rem; height: 0.813rem; position: absolute; left: 50%; margin-left: -3.24rem;  top:1.32rem; 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: #f0c884; 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; text-align: center; color: #fff;}
#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.813rem; position: absolute; left: 50%; margin-left: -3.16rem;  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: #d3c4aa; 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.30rem; line-height: 0.6rem;margin-bottom: 0.14rem; color: #fff; font-weight: bold;}
#pop-list .swiper-slide ul li>span{font-size: 0.26rem; font-weight: normal;}
#pop-list .list-note{text-align: center;}
#pop-list .list-note .strong{font-weight: bold;}
#pop-list p.list-title{font-size: 0.373rem; text-align: center; color: #fff;}

.pop-title{width: 100%; top: 2.933rem; position: absolute; left: 0;}
.pop-title h3{font-size: 0.65rem; color: #f0c884; text-align: center; font-weight: normal;}
.pop-title h5{font-size: 0.36rem; color: #f0c884;text-align: center; font-weight: normal;}
.pop-title h4{font-size:0.65rem; color: #f0c884;text-align: center; font-weight: normal;}
.pop-title h4 >.strong{font-size: 0.6rem;color: #fff;}
.pop-title h6{font-size: 0.346666rem; color: #fff; text-align: center;}
.pop-note{font-size: 0.293rem; color: #f0c884;width: 100%; top:5.066rem; position: absolute; left: 0;}
.success-btns{position: absolute;  width: 4.6rem; height: 0.973rem; text-align: center; top: 8.213rem; left:50%; margin-left: -2.293rem;}
.success-btns>.view-btn{position: absolute;  width: 4.6rem; height: 0.973rem; background: url(../images/view-btn.png) no-repeat; background-size: 100%;}
.success-btns>.view-btn2{position: absolute;  width: 4.6rem; height: 0.973rem; background: url(../images/view-btn2.png) no-repeat; background-size: 100%;}
.success-btns>p{font-size: 0.253rem; color: #eec152; margin-top: 0.266rem;}
.view-btn{width: 4.826rem; height: 2.026rem ; 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;}

#pop-success .pop-title{top:4.133rem;}
#pop-success .pop-note{font-size: 0.346rem; color: #fff;top:5.026rem;}

#pop-success .pop-success-title{position: absolute; width: 3.826rem; height: 0.8rem; top: 2.16rem; left: 50%; margin-left: -1.906rem; background: url(../images/pop-success-title.png) no-repeat; background-size: 100% 100%; }
#pop-fail .pop-title{top:4.133rem;}
#pop-fail .pop-fail-title{position: absolute; width: 3.826rem; height: 0.8rem; top: 2.16rem; left: 50%; margin-left: -1.906rem; background: url(../images/pop-fail-title.png) no-repeat; background-size: 100% 100%; }

#pop-finish .pop-title{top:4.133rem;}

#pop-not-started .pop-title{top: 5.173rem;}
#pop-over-time .pop-title{top: 5.173rem;}
#pop-get-ed .pop-title{top: 5.173rem;}

.progressSection{}
.progressSection .title{position: absolute; top: 19.75%; left: 50%; margin-left:-4.253rem;height:1.053rem; width: 8.506rem; background: url(../images/progress-title.png) no-repeat; background-size: 100% 100%; }
.progressSection .note{}
.progress-note-top1{position: absolute; width: 100%; top:0.6rem; text-align: center;   font-size: 0.36rem; color: #f0c884;}
.progress-note-top1 .tip-day{font-size:0.6rem; color: #fff;}
.progress-note-top2{position: absolute; width: 100%; top: 4.733rem; text-align: center;  font-size:0.36rem; color: #f0c884;}
.progress-note-top2>span{font-size: 0.533rem;}
.progress-note-top2>span.strong{font-size:0.533rem;}
.progress-note-top2 .tip{text-align: center;   font-size:0.266rem; color: #edb85e;}
.tip-note{position: absolute; width: 100%; top:6.8rem; text-align: center;   font-size:0.266rem; color: #edb85e;}
.progress-content{position: absolute; width:6.36rem; height: 6.52rem; left: 50%; top: 32.47%; margin-left:-3.16rem; background: url(../images/progress-box.png) no-repeat; background-size: 100%;}
.progress-content2{position: absolute; width: 6.52rem; height: 2.186rem; left: 50%; top: 53.22%; margin-left: -3.266rem; background: url(../images/progress-box2.png) no-repeat; background-size: 100%;}

.progressSection .active-tag{ position: absolute; width: 2.48rem; height: 1.293rem;  background-size: 100%; top: -0.146rem; left: -0.36rem;}
.progress-content2 .active-tag{top: -0.413rem;}
.check{position: absolute; width:1.2rem; height: 1.28rem; background: url(../images/check.png) no-repeat; background-size: 100%;}
.check1{top: 3.24rem; left: 50%; margin-left: -2.093rem;}
.check2{top: 3.24rem; left: 50%; margin-left: -0.613rem;}
.check3{top: 3.24rem; left: 50%; margin-left: 0.92rem;}
.check.active{ background: url(../images/check-active.png) no-repeat; background-size: 100%;}
.progress-tip{width: 100%; position: absolute; top:2.32rem; font-size: 0.36rem; color: #4d361c;}
.progress-tip .tip-day>span{font-size: 0.48rem; color: #4d361c;}
.progress-tip>p{font-size: 0.266rem;}
.progress-btns{position: absolute;width:4.6rem; height:0.973rem;top: 79%; left: 50%; margin-left: -2.3rem;}
.progress-btn1{position: absolute;width:4.6rem; height:0.973rem; top: 0; left: 0;  background: url(../images/view-btn.png) no-repeat; background-size: 100% 100%; }

.disable-tag{ position: absolute; width: 2.48rem; height: 1.293rem; background: url(../images/disable-tag.png) no-repeat; background-size: 100%; top:0.426rem; left: 0.4rem; display: none;}
.progress-btn1.disabled{ background: url(../images/progress-btn1-disable.png) no-repeat; background-size: 100%;}
.progress-btn2.disabled{ background: url(../images/my-btn-disable.png) no-repeat; background-size: 100%;}

.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;}

#pop-badnet .face{position: absolute; width: 2.24rem; height: 2.266rem; top: 3.293rem; left: 50%; margin-left: -1.12rem; background: url(../images/sad-icon.png) no-repeat; background-size: 100%;}
#pop-badnet .pop-title{top: 6.4rem;}

.failSection{}
.failSection .title{position: absolute; top: 17.44%; left: 50%; margin-left:-3.426rem;height:1.106rem; width:6.84rem; background: url(../images/fail-title.png) no-repeat; background-size: 100% 100%; }
.failSection .message-note-top1{font-size: 0.666rem; font-weight: bold; color: #4d361c; text-align: center; top: 26.69%; 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 .message-box{position: absolute; width: 6.52rem; height: 5.866rem; left: 50%; top: 36.36%;  margin-left: -3.266rem; background: url(../images/fail-box.png) no-repeat; background-size: 100%;}
.failSection .message-box2{position: absolute; width: 6.52rem; height: 5.866rem; left: 50%; top: 36.36%;  margin-left: -3.266rem; background: url(../images/fail-box2.png) no-repeat; background-size: 100%;}
.message-box .message-tip,.message-box2 .message-tip{width: 100%; position: absolute; font-size: 0.266rem; color: #fff; top: 0.08rem; 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: 3.68rem; height: 1.973rem; background: url(../images/back-home-btn.png) no-repeat; background-size: 100%;}
.failSection .message-btn-back{ top: 72.72%; left: 50%; margin-left: -3.613rem;}

.successSection{}
.successSection .title{position: absolute; top: 17.35%; left: 50%; margin-left:-3.466rem;height:1.106rem; width:6.84rem; background: url(../images/success-title.png) no-repeat; background-size: 100% 100%; }
.successSection .message-note-top1{font-size: 0.666rem; color: #4d361c; text-align: center; top: 27.27%; position: absolute; width: 100%;}
.successSection .message-note-top2{font-size: 0.4rem; color: #4d361c; text-align: center; top: 32.72%; position: absolute; width: 100%;}
.successSection.su2 .message-note-top1{top: 26.77%;}
.successSection.su2 .message-note-top2{top: 32.22%;}
.successSection .code-note{font-size: 0.293rem; color: #4d361c; position: absolute; width: 100%; top: 49.25%; text-align: center;}
.successSection .code{top: 54.71%;}
.successSection .message-note{width: 100%; position: absolute; font-size: 0.213333rem; color: #eec152; bottom: 31.8%; text-align: center;}
.successSection .message-btn-back{ top: 72.15%; left: 50%; margin-left: -3.64rem;}
.message-btn-view{position: absolute; width: 3.44rem; height: 0.866rem; background: url(../images/view-btn2.png) no-repeat; background-size: 100%;}
.successSection .message-btn-view{top: 40%; left: 50%; margin-left: -1.72rem;}
.successSection.su2 .message-btn-view{top: 41%;}

.mySection{}
.mySection .title{position: absolute; top: 19.58%; left: 50%; margin-left:-4.186rem;height:1.026rem; width:8.386rem; background: url(../images/my-title.png) no-repeat; background-size: 100% 100%; }
.mySection .message-btn-back{ top: 73.63%; left: 50%; margin-left:-1.84rem;}

.no-gift{top: 44%; position: absolute; width: 100%; text-align: center; display: none;}
.no-gift h4{ font-size: 0.666rem; color: #f0c884; line-height: 1.2rem;}
.no-gift h5{ font-size: 0.4rem; color: #f0c884; line-height: 0.8rem;}
.gift-list{position: absolute; top:5.493rem; left: 50%; margin-left: -3.573rem; display: none;}
.gift-list li{width: 7.173rem; height:1.853rem; list-style: none; display: none; margin-bottom: 0.493rem; position: relative;}
.gift-list li>img{ width: 100%; height: 100%;}
.no-gift.show{display: block;}
.gift-list.show{display: block;}
.gift-list li.show{display: block;}
.gift-list li .note{ width: 3.173rem; position: absolute; top: 0.933rem; right:1.133rem;  font-size: 0.201rem; color: #1a3b02; text-align: center;}
.gift-list li .pov{ width: 3.173rem; position: absolute; top: 1.24rem; right: 1.133rem; font-size: 0.201rem; color: #1a3b02; text-align: center;}
.gift-list li .val{ width: 2.3rem; position: absolute; top: 0.6rem; letter-spacing:-0.08rem; left: 0.333rem; font-size: 0.8rem; line-height: 0.8rem; color: #1a3b02; text-align: center;}
.gift-list li .val:before{content: "￥"; font-size: 0.533rem;}
.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;}
.my-btns{position: absolute; width: 3.68rem; height: 1.2rem; top: 77.4%; left: 50%; margin-left: -1.84rem;}
.back-home{position: absolute;width: 3.68rem; height: 1.2rem; top: 0; left: 0; background:url(../images/back-home.png) no-repeat; background-size: 100%;}

.share-btns{position: absolute;  width: 4.6rem; height: 0.973rem; text-align: center; top: 6.4rem; left:50%; margin-left: -2.293rem;}
.share-btns>.share-btn{position: absolute;  width: 4.6rem; height: 0.973rem; background: url(../images/pop-share-btn.png) no-repeat; background-size: 100%;}
.my-share-btns{position: absolute; width: 3.68rem; height: 1.2rem; top: 67.4%; left: 50%; margin-left: -1.84rem;}
.my-share-btns>.my-share-btn{position: absolute;width: 3.68rem; height: 1.2rem; top: 0; left: 0; background:url(../images/share-btn.png) no-repeat; background-size: 100%;}

.shareSection{}
.shareSection .title{position: absolute;width:7.306rem;height: 1.746rem; top: 17%; left: 50%; margin-left:-3.64rem;  background: url(../images/home-title.png) no-repeat; background-size: 100% 100%; }
.shareSection .share-content{position: absolute;width:6.36rem;height:7.6rem;  top: 34.2%; left: 50%;  margin-left:-3.173rem; background: url(../images/share-box.png) no-repeat; background-size: 100% 100%; }
.share-note-1{position: absolute; width: 100%; text-align: center; top:0.72rem; left: 0;  font-size:0.4rem; color: #f5e4a3;}
.share-note-2{font-size:0.533rem;}
.share-note-2 span{font-size: 0.72rem;}
.share-note-3{position: absolute; width: 100%; text-align: center; top:4.386rem; left: 0;  font-size:0.366rem; color: #f5e4a3;}
.share-content-btns{position: absolute;  width:4.52rem; height:0.973rem; text-align: center; top:6.04rem; left:50%; margin-left: -2.26rem;}
.share-content-btns>.share-btn{position: absolute;  width: 4.52rem; height: 0.973rem; background: url(../images/share-content-btn.png) no-repeat; background-size: 100%;}
.share-content-btns>.btns-ray{left: 2.026rem; margin-left: 0;}