html, body{ height: 100%; overflow: hidden;}
.wrap { max-width: 750px; min-width: 320px; height: 100%; position: relative; overflow: hidden; margin: 0 auto;  }
.wrap-panle{ width: 100%;}
.wrap-item{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto; position: relative;}
.wrap-item:first-child{ overflow-y: hidden;}
.draw-index{ width: 100%; height: 100%; overflow: hidden; text-align: center; background: url(../images/bg.jpg) no-repeat 0 0; background-size: 100% auto; position: relative;}


.top-title { height: .508rem; background-color: #1B1A1F; overflow: hidden; position: relative; }
.top-title .back { width: .12rem; height: 100%; padding: 0 .115rem; position: absolute; left: 0; top: 0; background: url(../images/back.png) no-repeat center center; background-size: .12rem auto; }
.top-title .title { text-align: center; color: #fff; font-size: .17rem; line-height: .508rem; height: .508rem; }

.draw-index .logo{ font-size: .12rem; color: #39BBE7; padding-top: .4rem; height: .16rem; line-height: .16rem;}
.draw-index .logo img{ width: auto; display: inline-block; height: .16rem; vertical-align: bottom;}

.coupon{ font-size: .26rem; color: #323335; margin-top: .6rem; line-height: 1.1; font-weight: 500}

.state-box{ margin-top: .47rem; }
.state-box .portrait{ width: .5rem; height: .5rem; overflow: hidden; display: inline-block; border-radius: 100%; }
.state-box .portrait img{ width: 100%;}
.state-box .tip{ padding: 0 .5rem; font-size: .12rem; color: #9C9C9C; margin-top: .125rem; line-height: .18rem; min-height: .36rem;}
.state-box .state-name{ margin-top: 0; display: none;}
.state-box .state-name span{ display: inline-block; position: relative; height: .2rem; line-height: .2rem; padding-left: .3rem; font-size: .15rem; color: #323335;}
.state-box .state-name span:before{ content: ''; width: .2rem; height: .2rem; overflow: hidden; background: url(../images/success.png) no-repeat 0 0; background-size: 100% auto; position: absolute; left: 0; top:50%; margin-top: -.1rem;}
.state-box .state-fail span:before{ hidden; background: url(../images/fail.png) no-repeat 0 0; background-size: 100% auto;}

.invite-box{ margin-top: 1.08rem; padding: 0 .5rem; display: none;}
.invite-box .btn-invite, .receive-box .btn-receive{ width: 100%; height: .4rem; line-height: .4rem; color: #fff; font-size: .14rem; display: block; background-color: #39BBE7; border-radius: 2px;}
.invite-box .btn-invite:active, .receive-box .btn-receive:active{ opacity: .5}
.invite-box .btn-invite{ opacity: 0}
.invite-box .tip{ margin-top: .1rem; font-size: .12rem; color: #9C9C9C; opacity: 0; line-height: .18rem;}
.invite-box.invite-active .btn-invite{ opacity: 1; -webkit-transition: opacity 1s linear .5s; transition: opacity 1s linear .5s;}
.invite-box.invite-active .tip{ display: none; /*opacity: 1;-webkit-transition: opacity .2s linear 4s; transition: opacity .2s linear 4s;*/}

.invite .btn-invite, .invite .tip{ opacity: 1}

.receive-box{ margin-top: .35rem; padding: 0 .5rem;}
.receive-box input{ width: 100%; border: 1px solid #9B9B9B; background: none; border-radius: 2px; color: #ABACAC; height: .4rem; padding: 0 .1rem; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-size: .14rem; }
.receive-box .error{ border-color: #f00;}
.receive-box .btn-receive{ margin-top: .15rem;}
.rule{ margin-top: .57rem; color: #ABACAC; font-size: .12rem;}

.popup-box{ width: 100%; max-width: 750px; margin: 0 auto; height: 0; position: fixed; left: 0; right: 0; top: 0; overflow: hidden; background-color: rgba(255, 255, 255, .8);}
.popup-box .inner{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in;-webkit-transform: translateX(0); transform: translateX(0);}
.popup-active{ height: 100%;}
/*.popup-active .inner{ -webkit-transform: translateX(-100%); transform: translateX(-100%);}*/
.popup-box .close{ width: .31rem; height: .31rem; background: url(../images/close.png) no-repeat 0 0; background-size: 100% auto; position: absolute; left: 50%; margin-left: -.1505rem; bottom: .2rem;}

.rule-box .main{ padding: 1.25rem .3rem 0; font-size: .14rem;}
.rule-box .hd{ color: #ABACAC}
.rule-box .bd{ color: #323335; margin-top: .2rem;}

.share-box { text-align: center;}
.share-box .arrow{ width: 1.05rem; position: absolute; right: .375rem; top: .375rem;}
.share-box .arrow img{ width: 100%;}
.share-box .name{ margin-top: 1.65rem; font-size: .16rem; color: #323335;}
.share-box .name img{ width: .34rem; vertical-align: middle; display: inline-block; margin: 0 .15rem;}
.share-box .tip{ padding: 0 .5rem; color: #4A4A4A; font-size: .14rem; margin-top: .4rem;}

.sharelink-box{ text-align: center;}
.sharelink-box .name{ font-size: .2rem; margin-top: 1.4rem; color: #242929;}
.sharelink-box .link{ font-size: .14rem; color: #868A8A; margin-top: .05rem; border: 0; text-align: center; background: none; width: 100%}
.sharelink-box .tip{ font-size: .14rem; color: #242929; margin-top: .4rem; padding: 0 .3rem;}
.sharelink-box .ico{ margin-top: .4rem;}
.sharelink-box .ico img{ width: 2.5rem;}

.pullup{ width: 100%; text-align: center; margin-top: .75rem; position: relative; color: #fff; }
.pullup:before{ content: ""; width: .225rem; height: .115rem; position: absolute; top: -.155rem; left: 50%; margin-left: -.1125rem; display: inline-block;  background: url(../images/back.png) no-repeat center center; background-size: 100% auto; }
.ico-support{ display: none;}


/* invite */
.invite{ width: 100%; height: 100%; background: url(../images/bg-1.jpg) no-repeat 0 0; background-size: 100% auto; text-align: center;}
.invite .main{ width: 3.15rem; height: 4.29rem; position: absolute; left: 50%; margin-left: -1.575rem; top: 50%; margin-top: -2.145rem; background-color: rgba(255,255,255,.9); border-radius: 2px}

.invite .invite-box{ display: block; margin-top: .9rem; padding: 0 .25rem;}
.invite .main .title{ font-size: .12rem; color: #39BBE7; padding-top: .2rem;}
.invite .coupon{ font-size: .36rem; color: #373B3D; margin-top: .75rem;}

.invite .bottom-info{ width: 100%; position: absolute; left: 0; bottom: .1rem; font-size: .12rem; color: #ABACAC}
.invite .bottom-info span{ color: #52B5DA; display: inline-block; margin: 0 .1rem;}


/* blog-list */
.invite-blog{ background-color: #F5F7F8; min-height: 100%; overflow: auto;}
.blog-list ul { padding-bottom: .6rem; background-color: #fff; }
.blog-list li { border-bottom: .01rem solid rgba(162, 179, 185, .1); padding: .15rem 0; position: relative; }
.blog-list .portrait { width: .5rem; height: .5rem; border-radius: 100%; overflow: hidden; position: absolute; left: .15rem; top: .15rem; }
.blog-list .portrait img { width: 100%; }
.blog-list .info-1 { padding:0 .92rem; }
.blog-list .info-1 .tit, .blog-list .info-2 .total { font-size: .17rem; color: #242929; }
.blog-list .info-1 .time, .blog-list .info-2 .used { font-size: .1rem; color: #9B9B9B; margin-top: .05rem; }
.blog-list .info-2 { position: absolute; width: .9rem; right: 0; top: .15rem; }
.blog-list .info-2 .total { color: #52B5DA; }


.loginBox{ position: absolute;}
.BottomselectSBox .language, .BottomselectSBox .moneyBox{ position: absolute; top: 7rem;}
/*.search-select {
	max-height: auto;
    height: 3rem;
}
.search-select .select-box {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    max-height: 1000px;
}*/
.scrollbar1, .scrollbar1V { position: absolute; z-index: 100; width: 3px; bottom: 2px; top: 2px; right: .03rem; }
.scrollbar1 div, .scrollbar1V div { position: absolute; z-index: 100; background-color: #b5c2c7; width: 100%; border-radius: 1px; }

.invite-blog .invite-box{ text-align: center; position: absolute; margin: 0; left: 0; top: 50%; margin-top: -.2rem; display: block; width: 100%;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.invite-blog .invite-box .btn-invite{ opacity: 1;}

.share2-box .invite-code{ width: 1.96rem; height: 1.77rem; margin: .75rem auto 0; background: url(../images/code.png) no-repeat 0 0; background-size: 100% auto; text-align: center;}
.share2-box .invite-code .code{ font-size: .2rem; line-height: .28rem; font-weight: 600; color: #49C9F5; padding-top: .28rem;}
.share2-box .invite-code .name{ font-size: .13rem; color: #bbb; margin-top: .07rem;}
.share2-box .info{ font-size: .14rem; text-align: center; color: #424445; margin-top: .3rem; line-height: .2rem; padding: 0 .2rem;}