@import "reset.css";
@import "phoneLogin.css";

html {
    font-size: 52px;
}

body {
    opacity: 0;
}

.btn {
    background-color: #ff6b2f;
    color: #ffffff;
    font-size: .24rem;
    text-align: center;
    line-height: .60rem;
    width: 2.40rem;
    height: .61rem;
    border-radius: .06rem;
    transition: all .3s;
    display: inline-block;
}

/*.btn:hover {*/
/*    background-color: #ffffff;*/
/*    color: #ff6b2f;*/
/*}*/

/*.btn_hover_dark:hover {*/
/*    background-color: #1e181f;*/
/*    color: #ffffff;*/
/*}*/

.btn_dark {
    background: #1e181f;
    color: #ffffff;
}

.btn_blue {
    background: #0cd4ff;
    color: #ffffff;
}

.btn_yellow {
    background: #ff733e;
    color: #ffffff;
}

.btn_gray {
    background: #8c9f9c;
    color: #ffffff;
}

.btn_dark_green {
    background: #517982;
    color: #ffffff;
}

/*.btn_gray:hover, .btn_dark:hover {*/
/*    background: #646262;*/
/*    color: #ffffff;*/
/*}*/

/*.btn_hover_gray:hover {*/
/*    background: #646262;*/
/*    color: #ffffff;*/
/*}*/

/*.btn_hover_yellow:hover {*/
/*    background: #ffffff;*/
/*    color: #ff6b2f;*/
/*}*/

/*a:not(.btn, .btn_dark):hover {*/
/*    filter: brightness(1.2);*/
/*}*/

.btn_link {
    color: #605f5e;
    text-decoration: underline;
    font-size: .2rem;
}

/*wrap*/
.wrap {
    width: 7.5rem;
    height: 43.95rem;
    position: relative;
    overflow: hidden;
    background: url("../images/m/bg.jpg") no-repeat 0 0/100%;
    font-size: .24rem;
    margin: 0 auto;
}

.wrap_inner {
    width: 7.5rem;
}

@media screen and (max-width: 768px) {
    .wrap {
        width: 100%;
    }

    .wrap_inner {
        width: 100%;
    }
}

.userinfo {
    position: absolute;
    top: .24rem;
    right: .16rem;
    font-size: .2rem;
    color: #fff;
    display: flex;
    align-items: center;
    z-index: 9;
}

.login_box {
    display: flex;
    align-items: center;
}

.userinfo .user_img {
    width: .44rem;
    height: .44rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 .12rem;
    background: url("../images/box_no_user.png") no-repeat center/100% 100%;
}

.userinfo .login_in .user_img {
    border-radius: 50%;
    background: transparent;
}

.userinfo .username {
    margin-right: .1rem;
    text-shadow: 0 0 .1rem rgba(0, 0, 0, .37), 0 0 .2rem rgba(0, 0, 0, .57);
}

.userinfo a {
    color: #ffffff;
    display: inline-block;
    position: relative;
    text-shadow: 0 0 .1rem rgba(0, 0, 0, .37), 0 0 .2rem rgba(0, 0, 0, .57);
}

.userinfo a::after {
    content: '';
    background: #ffffff;
    height: .02rem;
    width: 90%;
    position: absolute;
    bottom: -.04rem;
    left: 5%;
}

.user_img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

.page {
    position: relative;
}

.page1 {
    height: 10.13rem;
}

.page2 {
    height: 16.82rem;
}

.page3 {
    height: 17.00rem;
}

.logo {
    background-image: url("../images/logo.png");
    width: 1.64rem;
    height: .52rem;
    top: .3rem;
    left: .16rem;
}

.act_time {
    background-image: url("../images/m/time.png");
    width: 4.94rem;
    height: 1rem;
    top: 6.21rem;
    left: 1.33rem;
}

.slogan {
    background-image: url("../images/m/slogan.png");
    width: 7.5rem;
    height: 2.44rem;
    top: 6.76rem;
    left: 0;
}

.btn_help {
    background-image: url("../images/m/icon_help.png");
    width: .42rem;
    height: .42rem;
    top: 7.1rem;
    left: 50%;
    margin-left: 2.7rem;
    z-index: 9;
}

.box_go_question {
    position: absolute;
    top: 9rem;
    width: 100%;
    left: 0;
}

.btn_go_question {
    background-image: url("../images/btn_go_question.png");
    width: 2.52rem;
    height: .74rem;
    margin: 0 auto .1rem;
}

.tit {
    width: 4.33rem;
    height: 1.23rem;
    margin: 0 auto;
}

.page2 .tit {
    background-image: url("../images/m/tit_invite.png");
}

.page3 .tit {
    background-image: url("../images/m/tit_lott.png");
}


.page2_cont {
}

.invite_wrap {
    width: 7.39rem;
    height: 9.33rem;
    background: url("../images/m/invite_panel.png") no-repeat center/100%;
    box-sizing: border-box;
    padding: 0 0 0 .52rem;
    margin-left: .04rem;
}

.invite_tit {
    height: 1.28rem;
}

.invite_form {
    width: 6.36rem;
    height: 2.2rem;
}

.input_item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: .52rem;
    margin-bottom: .3rem;
}

.invite_input_label {
    font-size: .26rem;
    color: #44464a;
    margin-right: .2rem;
}

.invite_input {
    display: block;
    width: 4.78rem;
    height: .55rem;
    background: url("../images/m/input_code.png") no-repeat center/100% 100%;
    border: none;
    font-size: .22rem;
    color: #44464a;
    text-align: center;
    box-sizing: border-box;
    padding: 0 .24rem 0 .10rem;
}

.btns_copy {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .54rem;
}

.invite_panel {
    width: 5.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: .52rem;
}

.panel_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .21rem;
    line-height: 1.2;
}


.invite_list {
    width: 5.45rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: .18rem auto .36rem;
}

.invite_list li {
    margin-right: .5rem;
    margin-top: .8rem;
}

.invite_list li:nth-child(-n + 3) {
    margin-top: 0;
}

.invite_list li:nth-child(3n) {
    margin-right: 0;
}

.user {
    flex-shrink: 0;
    width: 1.47rem;
    height: 1.47rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../images/box_user_bg.png") no-repeat center center/auto 100%;
    position: relative;
}

.user span {
    font-size: .22rem;
    line-height: 1.2;
    position: absolute;
    width: 1.80rem;
    text-align: center;
    top: 1.56rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.user img {
    width: 1.31rem;
    height: 1.31rem;
    object-fit: contain;
}

.invite_detail {
    font-size: .24rem;
    margin-top: .42rem;
}


.accept_wrap {
    background: url("../images/m/accept_panel.png") no-repeat center/100%;
    width: 7.26rem;
    height: 4.35rem;
    box-sizing: border-box;
    padding: 1.30rem .6rem 0 .5rem;
    margin-bottom: .18rem;
    margin-left: .04rem;
    font-size: .22rem;
}

.accept_wrap .user {
    margin-right: .20rem;
}

.input_item2 {
    display: flex;
    align-items: flex-end;
}

.accept_input_label {
    display: block;
    margin-bottom: .1rem;
}

.accept_input {
    width: 4.78rem;
    height: .55rem;
    background: url("../images/m/input_code.png") no-repeat center/100% 100%;
    border: none;
    font-size: .22rem;
    color: #44464a;
    text-align: center;
    box-sizing: border-box;
    padding: 0 .24rem 0 .10rem;
}

.btns_accept {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-top: .28rem;
}

.txt_yellow {
    color: #ff733e;
}

.txt_red {
    color: #ff4f4f;
}


.lott_wrap {
    width: 7.5rem;
    margin: .36rem auto auto;
    background: url("../images/m/lott_bg.png") no-repeat top center/100%;
    position: relative;
}

.lott_cont {
    width: 6.85rem;
    height: 6.85rem;
    position: relative;
    margin: 0 auto;
}

.lott_cont li {
    width: 2.42rem;
    height: 3.19rem;
    position: absolute;
    transform-origin: center bottom;
    top: .22rem;
    left: 50%;
    margin-left: -1.22rem;
}

.lott_cont li:nth-child(1) {
    transform: rotate(0);
}

.lott_cont li:nth-child(2) {
    transform: rotate(45deg);
}

.lott_cont li:nth-child(3) {
    top: .23rem;
    transform: rotate(90deg);
}

.lott_cont li:nth-child(4) {
    top: .24rem;
    transform: rotate(134.7deg);
}

.lott_cont li:nth-child(5) {
    top: .22rem;
    transform: rotate(180deg);
}

.lott_cont li:nth-child(6) {
    top: .24rem;
    transform: rotate(225.6deg);
}

.lott_cont li:nth-child(7) {
    top: .24rem;
    transform: rotate(270deg);
}

.lott_cont li:nth-child(8) {
    top: .24rem;
    transform: rotate(315deg);
}

.lott_cont li.curr {
    background: url("../images/lott_shade.png") no-repeat center center/100% auto;
}

.btn_record {
    width: 1.67rem;
    height: .74rem;
    position: absolute;
    left: 5.55rem;
    top: -.20rem;
    background-image: url("../images/m/btn_record.png");
}

.btn_lott_start {
    width: 1.64rem;
    height: 1.98rem;
    position: absolute;
    left: 2.88rem;
    top: 2.40rem;
    background-image: url("../images/btn_lott.png");
}


.tip_lott_box {
    margin-top: .46rem;
}

.tip_lott {
    font-size: .22rem;
    width: 100%;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: .06rem;
    color: #ffffff;
}

.remain_box {
    width: 100%;
    font-size: .22rem;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    margin-top: .2rem;
    line-height: 1.2;
}

.remain_box em {
    color: #ff733e;
}

.gift_pool {
    background-image: url("../images/m/pool_panel.png");
    width: 6.93rem;
    height: 4.32rem;
    margin: .26rem auto 0;
}

.links_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 4.2rem;
    margin: 0 auto;
}

.links_wrap a {
    font-size: .28rem;
    color: #808080;
    text-decoration: underline;
}

.links_wrap a:hover {
    text-decoration: underline;
}

/*弹窗*/
.pop {
    display: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    position: relative;
    padding-top: .42rem;
    box-sizing: border-box;
    font-size: .24rem;
}

body .pop {
    transition: opacity, transform .3s;
    /*transform: scale(1.2);*/
    color: #363636;
}

.pop_close {
    background-image: url("../images/pop_close.png");
    background-size: .32rem;
    background-position: center center;
    width: .40rem;
    height: .40rem;
    right: .24rem;
    top: .24rem;
    position: absolute;
    z-index: 3;
}

.pop_share .pop_close {
    right: -.3rem;
    top: .2rem;
}

.show_click_tip::after {
    content: '\70b9\51fb\7a7a\767d\5904\5173\95ed';
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: .22rem;
    color: #f4f4f4;
    text-shadow: 0 0 .01rem rgba(255, 255, 255, .95);
    bottom: -.4rem;
    pointer-events: none;
}

.pop1 {
    background-image: url("../images/pop1.png");
    width: 5.81rem;
    height: 3.50rem;
}

.pop2 {
    background-image: url("../images/pop2.png");
    width: 6.82rem;
    height: 5.32rem;
}

.pop3 {
    background-image: url("../images/pop3.png");
    width: 6.82rem;
    height: 4.04rem;
}

.pop4 {
    background-image: url("../images/pop4.png");
    width: 6.82rem;
    height: 5.84rem;
}

body .pop_share {
    width: 10.07rem;
    height: 7.78rem;
    margin-top: -.4rem;
    transform: scale(.9);
}

.pop_alert_desc {
    width: 80%;
    height: 2.16rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: .24rem;
    color: #2a2a2a;
}

.pop_alert_desc2 {
    height: 1.3rem;
}

.pop_title {
    height: .33rem;
    font-size: .32rem;
    line-height: .34rem;
    color: #2a2a2a;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../images/pop_tit.png") no-repeat center .16rem/auto .11rem;
}

.record_wrap {
    width: 6.0rem;
    margin: .2rem auto 0;
    color: #7c7c7c;
}

.record_list {
    width: 5.8rem;
    position: relative;
}

.no_data::after {
    content: '\6682\65e0\8bb0\5f55';
    position: absolute;
    top: 1.0rem;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: .22rem;
}

.record_list_head {
    display: flex;
    align-items: center;
    background: #9dbcc2;
}

.record_list_head li {
    flex: 1;
    height: .45rem;
    font-size: .22rem;
    font-weight: bold;
    text-align: center;
    line-height: .44rem;
    color: #ffffff;
    position: relative;
}

.record_list_head li:nth-child(2) {
    flex: 0 0 1.4rem;
}

.record_list_head li:nth-child(3) {
    flex: 0 0 1.2rem;
}

.record_list_head li::after {
    content: '';
    position: absolute;
    right: .02rem;
    width: .02rem;
    height: .29rem;
    background: #ffffff;
    top: .08rem;
}

.record_list_head li:last-child::after {
    display: none;
}

.record_list_body_wrap {
    height: 3.24rem;
}

.record_list_body {
    box-sizing: border-box;
    padding: 0 .1rem;
}

.record_list_body li {
    width: 100%;
    height: .58rem;
    display: flex;
    align-items: center;
    font-size: .20rem;
    border-bottom: .02rem solid #9dbcc2;
}

.record_list_body .record_td {
    flex: 1;
    text-align: center;
}


.record_list_body .record_td:nth-child(2) {
    flex: 0 0 1.2rem;
}

.record_list_body .record_td:nth-child(3) {
    flex: 0 0 1.2rem;
}

.record_td a {
    color: #363636;
    text-decoration: underline;
    text-underline-offset: .04rem;
}

.record_td a:hover {
    text-decoration: underline;
}


.g_box {
    width: .34rem;
    height: .34rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.g_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pop_get_prize .pop_wrap {
    height: 3.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prize_show_wrap {
    margin: auto auto;
}

.prize_show {
    width: 1.50rem;
    height: 1.50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.24rem auto .08rem;
    background: url("../images/box.png") no-repeat center/100% 100%;
    border-radius: 50%;
}

.prize_show img {
    height: 100%;
}

.tip_real_prize {
    padding: 0 .4rem;
    margin-top: .14rem;
    color: #7c7c7c;
    font-size: .2rem;
}

.btn_link_wrap {
    color: #605f5e;
    margin-top: .1rem;
}

.pop_get_prize .btn_box {
    margin-top: .4rem;
}

.rule_wrap {
    width: 6.2rem;
    height: 4.2rem;
    overflow: auto;
    margin: .44rem auto 0;
    line-height: .36rem;
    font-size: .2rem;
    padding-right: .2rem;
}

.rule_wrap h4 {
    font-size: .21rem;
}

.rule_wrap ul {
    padding-left: 2em; /* 为序号留出空间 */
}

.rule_wrap ul > li {
    list-style-type: disc;
}

.rule_wrap li {
    margin-bottom: .08rem;
}

.rule_wrap ol {
    padding-left: 2em; /* 为序号留出空间 */
}

.rule_wrap ol li {
    list-style-type: decimal;
}

.rule_wrap ol li::marker {
    color: #1e181f;
}

.question_intro {
    font-size: .20rem;
    width: 5.92rem;
    margin: .44rem auto 0;
    line-height: .36rem;
}

.btn_start_question {
    width: 2.24rem;
    height: .65rem;
    background-image: url("../images/btn_start_question.png");
}

.pop-question-info .btn_box {
    margin-top: .40rem;
}

.question_form {
    width: 6.1rem;
    height: 3.6rem;
    overflow: auto;
    margin: .3rem auto .2rem;
    font-size: .2rem;
}

.question_list {
    width: 5.36rem;
    margin: .2rem 0 0 .4rem;
}

.question_list li {
    margin-top: .12rem;
}

.question_list li:first-child {
    margin-top: 0;
}


.pop-question input[type="checkbox"], .question_list input[type="radio"] {
    background: #ffffff;
    border: .02rem solid #b0b6b5;
    width: .22rem;
    height: .22rem;
    vertical-align: middle;
    position: relative;
    top: -.02rem;
}

.question_list input[type="radio"] {
    border-radius: 50%;
}

.question_list li input[type="text"] {
    display: inline-block;
    height: .34rem;
    width: 3.50rem;
    border-bottom: .02rem solid #b0b6b5;
}

.question_list li textarea {
    width: 5.4rem;
    height: 2.7rem;
    background: #ffffff;
    border: .02rem solid #b0b6b5;
    font-family: '微软雅黑', Arial, sans-serif;
    padding: .04rem .10rem;
}

.question_list li label {
    display: block;
    padding: .08rem 0;
    box-sizing: border-box;
}

.pop-question .btn_box {
    gap: .66rem;
    margin-left: .1rem;
}

.pop-question .btn_box .btn {
    width: 2.24rem;
    height: .66rem;
    line-height: .66rem;
    font-size: .275rem;
}

.pop-submit-success {
    padding-top: .86rem;
}

.submit-result {
    width: 5.9rem;
    height: 3.62rem;
    margin: 0 auto;
    font-size: .2rem;
}

.icon_correct {
    width: 1.86rem;
    height: 1.85rem;
    margin: 0 auto;
    display: block;
}

.submit-result h3 {
    font-size: .32rem;
    line-height: .34rem;
    font-weight: bold;
    margin: .2rem auto;
}

.pop em {
    color: #ff6b2f;
}

.table {
    width: 3.6rem;
    text-align: center;
}

.table th, .table td {
    height: .34rem;
    border: .02rem solid #7c7c7c;
}


/*PC端共用-入场动效*/
.slogan, .act_time, .btn_help, .box_go_question, .invite_wrap, .accept_wrap, .gift_pool, .lott_wrap, .btn_record, .page .tit, .invite_tit, .accept_tit  {
    opacity: 0;
}

.slogan, .act_time, .btn_help,  .box_go_question, .invite_wrap, .ani-show-page .accept_wrap, .page2 .tit, .page3.ani-show-page .tit, .ani-show-page .invite_tit, .ani-show-page .btn_record, .ani-show-page .accept_tit, .ani-show-page .gift_pool, .ani-show-page .lott_wrap {
    animation: fadeUpIn .5s ease-in-out forwards;
}

.box_go_question {
    animation-delay: .1s;
}

.ani-show-page .act_time {
    animation-delay: .5s;
}

.ani-show-page .slogan {
    animation-delay: .8s;
}

.ani-show-page .btn_help {
    animation-delay: .95s;
}

.page2 .tit {
    animation-delay: .3s;
}

.invite_wrap {
    animation-delay: .6s;
}

.page3 .tit {
    animation-delay: .3s;
}

.ani-show-page .accept_wrap {
    animation-delay: .5s;
}
.ani-show-page .lott_wrap {
    animation-delay: .7s;
}
.ani-show-page .gift_pool {
    animation-delay: .9s;
}
.ani-show-page .btn_record {
    animation-delay: .9s;
}

.btn_go_question:not(.disabled) {
    animation: aniBreath 1s infinite;
}