@charset "utf-8";
.mask{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; background: rgba(0,0,0,.8); display: none;}
.tcbox{ width: 4.2rem; height: auto;  position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    -webkit-border-radius: .14rem;
    -moz-border-radius: .14rem;
    border-radius: .14rem;
    box-shadow: 0 0 .29rem #f1e4a5 inset;
    /* margin-top: -.8rem;  */
    background: #fff;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: .3rem;
}

.tcbox2{
    width: 3.6rem; height: auto;min-height: 2.4rem;
    position: absolute;top: 50%;left: 50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    border-radius: .2rem;
    border: solid .03rem #fffac7;
    box-sizing: border-box;
    background: #fff;
    background: -webkit-linear-gradient(#ffa6a6,#ffffff 31%);
    background: -moz-linear-gradient(#ffa6a6,#ffffff 31%);
    background: -o-linear-gradient(#ffa6a6,#ffffff 31%);
    background: linear-gradient(#ffa6a6,#ffffff 31%);
}
.tcbox2::before{
    content: ''; width: 4.61rem; height: 3.19rem;display: block;
    background: url("../images/tc-bg01.png") no-repeat center / 100%;
    position: absolute; left: -.53rem; top: -1.83rem;z-index: 2;
    opacity: .5;
}
.tcbox2 .tit{
    width: 100%; clear: both;
    /* margin-top: -1.65rem; */
    z-index: 3;
    position: absolute; top: -1.65rem;
}
.tcbox2 .tit img{width: 3.58rem; display: block;}


.tcbox h3{
    font-size: .36rem; line-height: .8rem; font-weight: bold;color: #fff;
    width: 100%; height: .8rem; float: left;text-align: center;
    background: #2489f9;
    background: -webkit-linear-gradient(#1563f4 12%,#39c0ff);
    background: -moz-linear-gradient(#1563f4 12%,#39c0ff);
    background: -o-linear-gradient(#1563f4 12%,#39c0ff);
    background: linear-gradient(#1563f4 12%,#39c0ff);
    border-radius: .14rem .14rem 0 0;
}
.tcbox h3.end{
    background: #797979;
    background: -webkit-linear-gradient(#616161 12%,#969696);
    background: -moz-linear-gradient(#616161 12%,#969696);
    background: -o-linear-gradient(#616161 12%,#969696);
    background: linear-gradient(#616161 12%,#969696);
}

.tcbtm{
    width: 100%; clear: both;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
}
.tcbtm2{
    margin-bottom: -.92rem;
}
.tcbtm a.btn01{
    width: 2.8rem; height: .66rem; display: block;
    border: solid 1px #fff;
    box-sizing: border-box;
    border-radius: .4rem;
    background: #f96752;
    background: -webkit-linear-gradient(#ff9369,#f43a3a);
    background: -moz-linear-gradient(#ff9369,#f43a3a);
    background: -o-linear-gradient(#ff9369,#f43a3a);
    background: linear-gradient(#ff9369,#f43a3a);
    box-shadow: 0 .06rem .09rem #ffd1d1;
    margin: auto;
    font-size: .3rem;line-height: .64rem; color: #fff; font-weight: bold; text-align: center;
}
.tcbtm a.btn02,.tcbtm a.btn03,.tcbtm a.btn04{
    height: .63rem; display: inline-block;
    font-size: .26rem; font-weight: bold; line-height: .56rem; color: #fff;
    text-align: center;
    margin: auto .06rem;
}
.tcbtm a.btn02{
    width: 1.6rem;
    background: url("../images/tc-btn01.png") no-repeat center / 100%;
}
.tcbtm a.btn03{
    width: 1.6rem;
    background: url("../images/tc-btn02.png") no-repeat center / 100%;
}
.tcbtm a.btn04{
    width: 2rem;
    background: url("../images/tc-btn03.png") no-repeat center / 100%;
}
.tcbtm2 p{
    width: 100%; clear: both;
    margin-top: .3rem;
    text-align: center;
}
.tcbtm2 p a{
    font-size: .22rem; color: #ff7a00;line-height: 1; font-weight: 600;
    padding-bottom: .08rem;
    border-bottom: solid 1px #ff7a00;
    width: auto;
    margin: auto;
}


.close{
    position: absolute; bottom: -.7rem; left:50%; display: block;
    transform: translateX(-50%);
    z-index: 99;
    width: .4rem; height: .4rem;
}
.close02{bottom: -1.6rem;}
.close a{width: 100%; display: block;}
.close a img{width: 100%; display: block;}

/* 文案提示 */
/* #notePage{display: block;} */
.noteTxt{
    width: 100%; clear: both; margin-top: .2rem;
    text-align: center;
}
.noteTxt p{
    width: 100%; clear: both;
    font-size: .24rem; line-height: 1.5; color: #333;
}
.noteTxt p span{
    color: #196cf5;
}
.noteTxt .pic{
    width: 100%; clear: both;
}
.noteTxt .pic img.sf{
    width: 3.4rem; display: block; margin:0 auto -.53rem;
}
.noteTxt .pic img.yy{
    width: 3.42rem; display: block; margin:0 auto;
}
.noteTxt .pic img.null{
    width: 2.77rem; display: block; margin:0 auto -.2rem;
}

/* 我的奖品 */
/* #myGiftPage{display: block;} */
.giftPart{
    width: 86%; clear: both;  margin: .2rem auto 0;
}
.giftPart ul{
    width: 100%; clear: both;
}
.giftPart ul li{
    width: 100%; clear: both;
    border-bottom: dashed 2px #d9d9d9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 1.2rem;
}
.giftPart ul li:last-child{border-bottom: 0;}
.giftPart ul li img{
    width: 1rem; display: block;
    margin-right: .2rem;
}
.giftPart ul li .txt{
    text-align: left;
    width: 2.4rem;

}
.giftPart ul li .txt span{
    font-size: .24rem; line-height: 1.5;font-weight: bold;
    width: 100%; display: block;
}
.giftPart ul li .txt a{
    font-size: .18rem; display: inline-block;line-height: .3rem;
    color: #196cf5;
    border: solid 1px #bbd4ff;
    border-radius: .5rem;
    width: auto;
    padding: 0 .18rem;
}

/* 中奖弹窗 */
/* #drawPage{display: block} */
#drawPage .giftBoxTc{
    width: 100%;height: auto; clear: both;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
}
#drawPage .giftBoxTc .giftPic{
    width: 100%;height: 2.24rem;
    margin-top: -1.03rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;

}
#drawPage .giftBoxTc .giftPic img{width: 3.2rem; display: block;}
#drawPage .giftBoxTc .txt{
    width: 100%; clear: both;
    font-size: .24rem; line-height: .36rem; color: #333;
    text-align: center;
    margin-bottom: .15rem;
}
#drawPage .giftBoxTc .txt b{
    font-size: .28rem; color: #e63b3b; font-weight: bold; display: block;
}

/* 科目选择 */
/* #kmPage{display: block;} */
#kmPage .kmList{
    width: 100%; clear: both; margin: .25rem auto 0;
    text-align: center;
}
#kmPage .kmList h4{
    width: 100%; clear: both;
    font-size: .28rem; line-height: 1.5; color: #333; font-weight: bold;
}
#kmPage .kmList ul{
    width: 80%; margin: .15rem auto 0;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
}
#kmPage .kmList ul li{
    width: auto; display: block;
    height: .45rem;
    font-size: .26rem; line-height: .45rem;
    border: solid 1px #39c0ff; color: #2e59d9;
    border-radius: .4rem;
    padding: 0 .35rem;
    margin: 0 .2rem .15rem;
    cursor: pointer;
}
#kmPage .kmList ul li.on,#kmPage .kmList ul li:hover{
    background: #2e59d9; color: #fff;
}

/* 填写地址 */
/* #addressPage{display: block;} */
.addressbox{
    width: 100%; clear: both; float: left; margin: .2rem auto;
}
.addressbox .tip{
    width: 100%; clear: both; float: left;
}
.addressbox .tip font{
    width: 100%; font-size: .2rem; line-height: .32rem; color: #e94a55; font-weight: bold; text-align: center; float: left;
}
.addressbox .tip p{font-size: .16rem; line-height:.26rem; clear: both; margin: .1rem 5% 0; width: 90%; float: left;}

.addressbox ul{width: 3.6rem; margin: .1rem .3rem 0; float: left;}
.addressbox ul li{width: 100%; clear: both; float: left; margin-bottom: .15rem;}
.addressbox ul li.user,.addressbox ul li.phone{
    background: #ffefea;
    height: .45rem;
    line-height: .45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius:.1rem;
}
.addressbox ul li.region{margin-bottom: .1rem;}
.addressbox ul li.address{margin-bottom: 0;}
.addressbox ul label{
    font-size: .16rem;color: #333;float: left; text-align: left; font-weight: 500;
    margin-left: .1rem; margin-right: .1rem;
    white-space: nowrap;
}
.addressbox ul em{color: #ff3f3f;}
.addressbox ul li input{
    width: 100%; height: .45rem; float: left;
    background: rgba(255,255,255,.15); font-size: .16rem; line-height: .45rem;
    border: none;
    color: #333;
}
.addressbox ul li.address input{
    width: 90%;padding: 0 5%;
    border: solid .01rem #ffcbb9;
    border-radius: .5rem;
    line-height: .47rem; height: .47rem;
    margin-top: .05rem;
}
.addressbox ul li input#userNames{width: 3.4rem;}
.addressbox ul li input#userPhones{width: 3.4rem;}

.addressbox ul li .form-group{width: 32%; float: left; margin-right: 1%;}
.addressbox ul li .form-group:last-child{width: 34%; margin-right: 0;}
.addressbox ul li .form-group span{
    float: left;color: #444;font-size: .16rem;font-weight: 500;
}
.addressbox ul li select{
    width: 100%; height: .46rem;clear: both;float: left;
    background: rgba(255,255,255,.15);
    font-size: .24rem; line-height: .46rem;color: #444;
    border: solid .01rem #ffcbb9;
    border-radius:.1rem;
}

/* 确认地址弹窗 */
/* #surePage{display: block;} */
#surePage .sureTxt{
    width: 80%; clear: both; margin: .25rem auto;
}
#surePage .sureTxt ul{
    width: 100%; clear: both;
}
.sureTxt ul li{
    width: 100%; clear: both; float: left; margin-bottom: .1rem;
    font-size: .18rem; line-height: 1.5; color: #333;
}
.sureTxt ul li span{float: left; color: #555}
.sureTxt ul li p{
    font-weight: bold; color: #222;
}
.sureTxt .zhu{
    font-size: .16rem; line-height: 1.5; color: #fe4c44;
    text-align: center;
}

/* 物流信息 */
/* #logisticsPage{display: block;} */
.logistbox{
    width: 80%; clear: both; margin: .25rem auto .1rem;
    text-align: center;
}
.logistbox img{width: 2rem; display: inline-block;}
.logistbox p{font-size: .18rem; line-height: 1.3; color: #333; width: 100%;
    clear: both; float: left;margin-top: .15rem;
}
.logistbox p span{
    color: #e94a55; display: block;
}

@media screen and (max-width: 800px) {
    .tcbox{
        width: 6rem;
    }
    .tcbox2{min-height: 3.12rem;}
    .close{width: .55rem; height: .55rem}
    .close02{bottom: -1.8rem;}
    .noteTxt p{font-size: .26rem;}
    .noteTxt .pic img.sf{
        width: 3.8rem;
    }
    .noteTxt .pic img.yy{margin: .2rem auto 0}
    .noteTxt .pic img.timeNull{width: 4rem;}
    .giftPart ul li{height: 2rem;}
    .giftPart ul li img{
        width: 1.8rem;
    }
    .giftPart ul li .txt{
        width: 3rem;
    }
    .giftPart ul li .txt span{
        font-size: .28rem;
    }
    .giftPart ul li .txt a{
        font-size: .24rem; line-height: .42rem;
    }
    .tcbox2{
        width: 5.2rem;
    }
    .tcbox2::before{
        width: 6rem;
        height: 4.2rem; top: -2.55rem;
    }
    .tcbox2 .tit{top: -2.2rem}
    .tcbox2 .tit img{
        width: 4.8rem;
    }
    #drawPage .giftBoxTc .giftPic img{
        width: 4rem;
    }
    #drawPage .giftBoxTc .txt{
        font-size: .28rem; margin-top: .2rem;
        line-height: 1.5;
    }
    #drawPage .giftBoxTc .txt b{
        font-size: .36rem;
    }
    .tcbtm a.btn02, .tcbtm a.btn03, .tcbtm a.btn04{
        height: .82rem; width: 2.2rem;
        font-size: .32rem; line-height: .7rem;
    }
    .tcbtm a.btn04{
        width: 2.6rem;
    }
    .tcbtm2 p a{
        font-size: .26rem;
    }
    #kmPage .kmList ul li{margin-bottom: .25rem;}

    .addressbox .tip font{
       font-size: .26rem; line-height: .48rem;
    }
    .addressbox .tip p{font-size: .24rem; line-height:.34rem; margin: .1rem .35rem .15rem; width: 5.3rem;}
    .addressbox ul{
        width: 5rem; margin: .1rem .5rem 0;
    }
    .addressbox ul li{margin-bottom: .25rem;}
    .addressbox ul li.user,.addressbox ul li.phone{
        height: .7rem;
        line-height: .7rem;
        border-radius:.1rem;
    }
    .addressbox ul label{
        font-size: .24rem;
        margin-left: .2rem; margin-right: .1rem;
    }
    .addressbox ul li input{
        height: .7rem;font-size: .28rem; line-height: .36rem;
    }
    .addressbox ul li.address input{
        line-height: .77rem; height: .77rem;
    }
    .addressbox ul li input#userNames{width: 3.8rem;}
    .addressbox ul li input#userPhones{width: 3.8rem;}
    .addressbox ul li select{
        height: .6rem;clear: both;float: left;
        font-size: .24rem; line-height: .6rem;color: #444;
        border: solid .01rem #ffcbb9;
        border-radius:.1rem;
    }
    .addressbox ul li .form-group span{
        font-size: .28rem;
    }

    .sureTxt ul li{
        font-size: .28rem; line-height: .36rem; margin-bottom: 1.5;
    }
    .sureTxt .zhu{
        font-size: .24rem; line-height: .36rem; color: #fe4c44;
    }
    .logistbox p{
        font-size: .26rem; line-height: .48rem;
        margin-top: .15rem;
    }

}