:root {
    --color-roletxt-span: #c70002;
    --color-main-background: #191919;
    --color-font-warning:#f25e3f;
    --color-font-success:#000;
    --color-font-error:#ff0000;
    --color-table-border-gray:#8f8888;
    --color-table-border-light:#f7f2f2;
    --top-base-300: calc((100vh - 300px)/2);
    --top-base-350: calc((100vh - 350px)/2);
    --top-base-460: calc((100vh - 460px)/2);
    --top-base-601: calc((100vh - 601px)/2);
    --top-base-750: calc((100vh - 750px)/2);
    --top-base-975: calc((100vh - 975px)/2);
    --top-base-1333: calc((100vh - 1333px)/2);
}
*{padding:0;margin:0;}
ul,ol{list-style: none;}
.flex {display: flex;}
.flex-row {flex-direction: row; flex-wrap: wrap; justify-content: space-around;}
.flex-col {flex-direction: column; flex-wrap: nowrap; justify-content: center;}
.fixed {position: fixed;}
.display {display: block;}
.hide {display: none;}
.show-border {border:red dashed thin;} 
.btn {cursor: pointer;}
.btn:hover{transform: scale(1.02);filter: brightness(1.1);}
.pop{display: none;}
body{
    background-color: #000000;
    font-family: "Noto Serif SC", serif;
    font-weight: bold;
}
.wrap{
    width: 750px;
    height: calc(11521px * 750/1080);
    margin: 0 auto;
    display: flex;
    position: relative;
    /* min-height: 100vh; */
    background: url(../images/bg-1080x11521.webp) no-repeat top center/100% 100%;
}
.slice {
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: auto;
    /* display: none; */
}
.slice.active{display: block;}
.slice .title {
    font-size: 42px;
    font-weight: bolder;
    text-align: center;
    letter-spacing: 5px;
}
.nav{width: 750px; height: 60px; border: red solid thin;filter: opacity(0);
    /* border-radius: 0 0 30px 30px;  */
    font-size: 28px; font-weight: bold;text-align: center; line-height: 60px;    min-width: 748px;}

.nav-bottom {
    /* left: calc((100vw - 750px) / 2); */
    left:50%;
    transform: translate(-50%,0);
    bottom: 0px;
    background-color: #fff1ca;
    color: #fff;
    cursor: pointer;
    z-index: 100;
}
.m .nav-bottom {
    top: min(100vh,1333px);
}
.nav-item{
    /* padding: 0 10px 0 10px; */
    width: 186px;
    height: calc(104px * 186/270);
    background: url(../images/bg-nav-item.png) no-repeat top center/100% 100%;
}
.pc .nav-item:hover,.nav-item.active{
    background: url(../images/bg-nav-item-active.png) no-repeat top center/100% 100%;
}
.m input[type=text], .m input[type=tel],.m input[type=password]{
    font-size: 32px;
    height: 80px;
    border-radius: 5px;
    width: 100%;
}
/* slice-1 start */
.slice-1{
    width: 750px;
    /* height: calc(1920px * 750/1080); */
    height: 1393px;
    /* background: url(../images/bg-1.webp) no-repeat top center/100% 100%; */
}
.slice-1 .slice-wrap{width: 100%; margin: 0 auto;bottom: 130px;
    position: absolute;}

.btn-app-top{margin: 0 auto;
    width: calc(815px * 750/1080);
    height: calc(164px * 750/1080);
    background: url(../images/bg-btn-app.png) no-repeat top center/100% 100%;
}
.app-rules{
    font-size: 24px;
    color: #000;
    width: 50%;
    top: 0px;
    right: 0px;
    position: absolute;
}
.app-rules .btn{
    text-decoration: underline;
}
.app-tips {
    font-size: 26px;
    color: #fefefe;
    line-height: 90px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: 'Noto Sans SC';
}
.media-sn{
    font-size: 30px;
    color: #fef174;
    border: #414141 solid thin;
    border-radius: 10px;display: inline;margin-left: 25px;padding: 0 15px 0 15px;
}
.app-press-bg{
    width: calc(944px * 750/1080);
    height: calc(18px * 750/1080);
    background: url(../images/bg-app-press-bk.png) no-repeat top center/100% 100%;margin: 0 auto;
}
.app-press-fnt{
    max-width: calc(944px * 750/1080);
    height: calc(18px * 750/1080);
    width: 2%;
    background: url(../images/bg-app-press-fnt.png) no-repeat 0 0 /100%;
    background-size: cover;
}
.slice-wrap .app-press-fnt{margin:0;}
.app-press-steps{width:86%; margin:   0 auto; color: red; font-size: 20px;}
.slice-wrap .app-press-steps{
    margin-top: -30px;
}
.app-step{text-align: center;}
.step-icon{
    max-width: calc(42px * 750/1080);
    height: calc(57px * 750/1080);
    margin: 0 auto;
    background: url(../images/bg-app-step-1.png) no-repeat top center/100% 100%;
}
.light .step-desc{color: white;    font-weight: bold;}
.light .step-icon{
    background-image: url(../images/bg-app-step-2.png);
}

.step-sample{
    width: calc(142px * 750/1080);
    height: calc(157px * 750/1080);
    /* background: url(../images/bg-app-item-bk.png) no-repeat top center/100% 100%; */
    margin: 0 auto;
    filter: grayscale(1);
}
.light .step-sample {filter: grayscale(0);}

.sample-item{
    width: calc(127px * 750 / 1080);
    height: calc(141px * 750 / 1080);
    /* background: url(../images/bg-app-item-1.png) no-repeat top center/100% 100%; */
    background:  no-repeat top center/100% 100%;
    margin:0 auto;
}
.app-step-1 .sample-item{background-image: url(../images/bg-app-item-1.png);}
.app-step-2 .sample-item{background-image: url(../images/bg-app-item-2.png);}
.app-step-3 .sample-item{background-image: url(../images/bg-app-item-3.png);}
.app-step-4 .sample-item{background-image: url(../images/bg-app-item-4.png);}
.app-step-5 .sample-item{background-image: url(../images/bg-app-item-5.png);}

/* slice-1 end */


/* slice-2 start */
.slice-2{
    width: 750px;
    /* height: calc(1920px * 750/1080); */
    height: 1466px;
    /* background: url(../images/bg-2.webp) no-repeat top center/100% 100%; */
}
.slice-2 .slice-wrap{
    width: 100%;
    margin: 0 auto;
    margin-top: 175px;
}
/* roles show */
/*
.role-img{
    width:  calc(882px * 750/1080);
    height: calc(777px * 750/1080);
    background: url(../../appraisal/images/hs_m.png) no-repeat top center/100% 100%;
}

.tianwang .role-img{
    background-image: url(../../appraisal/images/tw_m.png);
}
.tianwang-wm .role-img{
    background-image: url(../../appraisal/images/tw_wm.png);}
.shaolin .role-img{
    background-image: url(../../appraisal/images/sl_m.png);}
.emei .role-img{
    background-image: url(../../appraisal/images/em_wm.png);}
.taohuadao .role-img{
    background-image: url(../../appraisal/images/thd_m.png);}
.taohuadao-wm .role-img{
    background-image: url(../../appraisal/images/thd_wm.png);
}
.xiaoyao .role-img{
    background-image: url(../../appraisal/images/xy_m.png);
}
.xiaoyao-wm .role-img{
    background-image: url(../../appraisal/images/xy_wm.png);
}
.huashan .role-img{
    background-image: url(../../appraisal/images/hs_m.png);
}
.huashan-wm .role-img{
    background-image: url(../../appraisal/images/hs_wm.png);
}
.tangmeng .role-img{
    background-image: url(../../appraisal/images/tm_m.png);
}
.tangmeng-wm .role-img{
    background-image: url(../../appraisal/images/tm_m.png);}
.gaibang .role-img{
    background-image: url(../../appraisal/images/gb_m.png);}
.gaibang-wm .role-img{
    background-image: url(../../appraisal/images/gb_wm.png);}
.kunlun .role-img{
    background-image: url(../../appraisal/images/kl_m.png);}
.kunlun-wm .role-img{
    background-image: url(../../appraisal/images/kl_wm.png);}
.wudang .role-img{
    background-image: url(../../appraisal/images/wd_m.png);}
.wudang-wm .role-img{
    background-image: url(../../appraisal/images/wd_wm.png);
}
*/
.role-points {
    position: relative;
    width: 200px;
    height: auto;
    margin-top: -441px;
    float: right;
}
.role-desc {
    width: 650px;
    height: 100px;
    font-size: 28px;
    text-align: left;
    margin: 0 auto;
}

.role-points .sub-title{

}
.role-points .sub-title::before{

}

/*  */

.maintextbox {
    width: 630px;
    height: 215px;
    margin: 0 auto;
    z-index: 2;
}
.maintxtch {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    font-weight: 600;
}
.maintxtzw {
    width: 100%;
    height: 160px;
    line-height: 49px;
    font-size: 24px;
    font-weight: 600;
}
.m .maintxtch{ font-size: 32px;}
.m .maintxtzw{ font-size: 28px;}
.maintxtch span,.maintxtzw span {
    color: var(--color-roletxt-span);
    border-bottom: 1px solid #000;
}
.rolebox {
    width: 100%;
    height: 600px;
    position: relative;
}
.rolebox2 {
    width: 100%;
    height: 610px;
    position: relative;
}
.touxiang {
    width: 684px;
    height: 600px;
    position: absolute;
    top: -60px;
    left: 0;
}
.touxiang.em_wm {
    background: url(../../appraisal/images/em_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.gb_m {
    background: url(../../appraisal/images/gb_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.gb_wm {
    background: url(../../appraisal/images/gb_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.hs_m {
    background: url(../../appraisal/images/hs_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.hs_wm {
    background: url(../../appraisal/images/hs_wm_2.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.kl_m {
    background: url(../../appraisal/images/kl_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.kl_wm {
    background: url(../../appraisal/images/kl_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.sl_m {
    background: url(../../appraisal/images/sl_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.tm_m {
    background: url(../../appraisal/images/tm_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.tm_wm {
    background: url(../../appraisal/images/tm_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.thd_m {
    background: url(../../appraisal/images/thd_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.thd_wm {
    background: url(../../appraisal/images/thd_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.tw_m {
    background: url(../../appraisal/images/tw_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.tw_wm {
    background: url(../../appraisal/images/tw_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.wd_m {
    background: url(../../appraisal/images/wd_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.wd_wm {
    background: url(../../appraisal/images/wd_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.xy_m {
    background: url(../../appraisal/images/xy_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.xy_wm {
    background: url(../../appraisal/images/xy_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.emsx_wm {
    background: url(../../appraisal/images/emsx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.hssx_m {
    background: url(../../appraisal/images/hssx_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.hssx_wm {
    background: url(../../appraisal/images/hssx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.klsx_m {
    background: url(../../appraisal/images/klsx_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.klsx_wm {
    background: url(../../appraisal/images/klsx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.thdsx_m {
    background: url(../../appraisal/images/thdsx_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.thdsx_wm {
    background: url(../../appraisal/images/thdsx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.twsx_m {
    background: url(../../appraisal/images/twsx_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.twsx_wm {
    background: url(../../appraisal/images/twsx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.wdsx_m {
    background: url(../../appraisal/images/wdsx_m_2.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.wdsx_wm {
    background: url(../../appraisal/images/wdsx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.dxx_m {
    background: url(../../appraisal/images/dxx_m.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.dxx_wm {
    background: url(../../appraisal/images/dxx_wm.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.newbie {
    background: url(../../appraisal/images/newbie.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.oking {
    background: url(../../appraisal/images/oking.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.tzqc {
    background: url(../../appraisal/images/tzqc.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.qian {
    background: url(../../appraisal/images/qian.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.rich {
    background: url(../../appraisal/images/rich.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}
.touxiang.realgirl {
    background: url(../../appraisal/images/realgirl.png) no-repeat 0 -50px;
    background-size: 680px 600px;
}


.touxiang2 {
    width: 611px;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
}

.touxiang2.em_wm {
    background: url(../../appraisal/images/em_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.gb_m {
    background: url(../../appraisal/images/gb_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.gb_wm {
    background: url(../../appraisal/images/gb_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.hs_m {
    background: url(../../appraisal/images/hs_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.hs_wm {
    background: url(../../appraisal/images/hs_wm_2.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.kl_m {
    background: url(../../appraisal/images/kl_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.kl_wm {
    background: url(../../appraisal/images/kl_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.sl_m {
    background: url(../../appraisal/images/sl_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.tm_m {
    background: url(../../appraisal/images/tm_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.tm_wm {
    background: url(../../appraisal/images/tm_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.thd_m {
    background: url(../../appraisal/images/thd_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.thd_wm {
    background: url(../../appraisal/images/thd_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.tw_m {
    background: url(../../appraisal/images/tw_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.tw_wm {
    background: url(../../appraisal/images/tw_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.wd_m {
    background: url(../../appraisal/images/wd_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.wd_wm {
    background: url(../../appraisal/images/wd_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.xy_m {
    background: url(../../appraisal/images/xy_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.xy_wm {
    background: url(../../appraisal/images/xy_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.emsx_wm {
    background: url(../../appraisal/images/emsx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.hssx_m {
    background: url(../../appraisal/images/hssx_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.hssx_wm {
    background: url(../../appraisal/images/hssx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.klsx_m {
    background: url(../../appraisal/images/klsx_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.klsx_wm {
    background: url(../../appraisal/images/klsx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.thdsx_m {
    background: url(../../appraisal/images/thdsx_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.thdsx_wm {
    background: url(../../appraisal/images/thdsx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.twsx_m {
    background: url(../../appraisal/images/twsx_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.twsx_wm {
    background: url(../../appraisal/images/twsx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.wdsx_m {
    background: url(../../appraisal/images/wdsx_m_2.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.wdsx_wm {
    background: url(../../appraisal/images/wdsx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.dxx_m {
    background: url(../../appraisal/images/dxx_m.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.dxx_wm {
    background: url(../../appraisal/images/dxx_wm.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.newbie {
    background: url(../../appraisal/images/newbie.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.oking {
    background: url(../../appraisal/images/oking.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.tzqc {
    background: url(../../appraisal/images/tzqc.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.qian {
    background: url(../../appraisal/images/qian.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.rich {
    background: url(../../appraisal/images/rich.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}
.touxiang2.realgirl {
    background: url(../../appraisal/images/realgirl.png) no-repeat 0 -45px;
    background-size: 613px 540px;
}

@font-face {
    font-family: 'mysanji'; /* 你可以给字体起一个名称 */
    src: url('../../appraisal/images/sanji.woff2') ; /* 指定字体文件的路径和格式 */
}

.roletitle {
    width: 615px;
    height: 189px;
    background: url(../../appraisal/images/titlebg.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 461px;
    left: 0;
}
.roletitle2 {
    width: 613px;
    height: 190px;
    background: url(../../appraisal/images/titlebg.png) no-repeat center center;
    background-size: 613px 190px;
    position: absolute;
    top: 450px;
    left: 0;
}
.rttxt {
    width: 462px;
    height: 90px;
    margin: 50px 0 0 4px;
    line-height: 90px;
    font-size: 75px;
    font-family: 'mysanji', sans-serif;
    font-weight: normal;
    background-image: linear-gradient(to bottom, #ffffff, #ccb473);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; /* 使得文字颜色透明，以便看到背景渐变 */
    text-align: center;
}
.roletitle2 .rttxt {
    width: 462px;
    height: 90px;
    margin:50px 0 0 4px;
    line-height: 90px;
    font-size: 75px;
    background-image: none;
    background-clip: none;
    color: #ebe2c8;
    text-align: center;
}
.shuju {
    width: 210px;
    height: 390px;
    position: absolute;
    top: 40px;
    right: 0px;
    text-align: center;
}
.shuju2 {
    width: 180px;
    height: 390px;
    position: absolute;
    top: 40px;
    right: 0px;
}
/* .shuju .datatxt {
    padding-left: 25px;
} */
.rolebox .datatxt{font-size: 30px;color: #c01211;font-weight: bolder;}
.m .rolebox .datatxt {
    font-size: 38px;
    padding-left: 5px;
}
.onedatabox {
    width: 100%;
    height: 130px;    
    position: relative;
}
.dot {
    width: 26px;
    height: 26px;
    background: url(../../appraisal/images/dot.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 7px;
    left: 25px;
}
.dataname {
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    position: absolute;
    top: 0;
    left: 30px;
    font-weight: 600;
}
.datatxt {
    width: 180px;
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    position: absolute;
    top: 40px;
    left: 30px;
    vertical-align: bottom;
}
.datatxt span {
    color: var(--color-roletxt-span);
    font-size:48px;
    margin: 0 5px;
    font-weight: bold;
}

.giftbox {
    width: 210px;
    height: 80px;
    position: absolute;
    top: 450px;
    right: 20px;
}
.changebtn {
    width: 80px;
    height: 80px;
    background: url(../images/changebtn.png) no-repeat center center;
    background-size: cover;
    cursor: pointer;
    display: none;
    margin: 0 10px;
}
.changebtn::after {
    content: " ";
    color: #5a5a58;
    margin: 86px 0 0 0;
    position: absolute;
    font-size: 12px;
    font-weight: bold;
}
.changebtn.on {
    display: block;
}
.gainbtn {
    width: 80px;
    height: 80px;
    background: url(../images/gainbtn.png) no-repeat center center;
    background-size: cover;
    cursor: pointer;
    display: none;
    margin: 0 10px;
    animation: BreathBright 2s infinite;
}
.gainbtn.on {
    display: block;
}
@keyframes BreathBright {
    from {filter: brightness(1);transform: scale(1);}
    50% {filter: brightness(1.3);transform: scale(1.1);}
    to {filter: brightness(1);transform: scale(1);}
}

.heartbeat {
    opacity: 1;
    overflow: hidden;
    -webkit-animation-name: HeartBeat;
    -moz-animation-name: HeartBeat;
    -o-animation-name: HeartBeat;
    animation-name: HeartBeat;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes HeartBeat {
    from {
        transform: rotate(0deg) scale(0.8, 0.8);
    }
    50% {
        transform: rotate(0deg) scale(1, 1);
    }
    to {
        transform: rotate(0deg) scale(0.8, 0.8);
    }
}

@-webkit-keyframes HeartBeat {
    from {
        transform: rotate(0deg) scale(0.8, 0.8);
    }
    50% {
        transform: rotate(0deg) scale(1, 1);
    }
    to {
        transform: rotate(0deg) scale(0.8, 0.8);
    }
}


.infobox {
    width: 630px;
    margin: 0 auto;
}
.congratulation {
    float: left;
    width: 420px;
    height: 190px;
    line-height: 48px;
    font-size: 26px;
    font-weight: 600;
    font-family: 'Microsoft YaHei';
}
.congratulation span {
    color: var(--color-roletxt-span);
}
.qrbox {
    float: right;
    /* width: 180px;
    height: 210px; */
}
.notice-role{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 25px;
    padding: 5px 15px;
}
.imgbox {
    width: 162px;
    height: 162px;
    padding: 7px;
    margin: 0 auto;
    background: url(../../appraisal/images/qrbg.png) no-repeat center center;
    background-size: cover;
}
.imgbox img {
    width: 160px;
    height: 160px;
}
.qrtxt {
    width: 200px;
    height: 36px;
    line-height: 36px;
    font-size: 24px;
    text-align: center;
}
.clean {
    clear: both;
}
.endbtns {
    width: 626px;
    margin: 0px auto;
}
.sharebtn {
    /* width: 243px;
    height: 58px; 
    margin: 0 35px;
    */
    width: calc(437px * 750/1080);
    height:  calc(123px * 750/1080);
    cursor: pointer;
}
.sharebtn:hover {
    filter: brightness(1.2);
    -moz-filter: brightness(1.2);
    -webkit-filter: brightness(1.2);
    -o-filter: brightness(1.2);
}
.sharebtn:active {
    filter: brightness(0.7);
    -moz-filter: brightness(0.7);
    -webkit-filter: brightness(0.7);
    -o-filter: brightness(0.7);
}
.sharebtn.sharelnk {
    background: url(../images/sharelnk.png) no-repeat center center;
    background-size: cover;
}
.sharebtn.sharepic {
    background: url(../images/sharepic.png) no-repeat center center;
    background-size: cover;
}
/*  slice-3 start */
.slice-3{
    width: 750px;
    /* height: calc(1920px * 750/1080); */
    height: 1393px;
    /* background: url(../images/bg-3.webp) no-repeat top center/100% 100%; */
}

.slice-3 .snap{
    width: calc(994px * 750/1080);
    margin: 0 auto;
    margin-top: 80px;
    font-size: 28px;
    text-indent: 2rem;
    line-height: 50px;
}
.signin-days, .signin-gifts {
    font-size: 26px;
    color:#c70002;
    /* color: #0000ff; */
    font-weight: bolder;
    /* text-decoration: solid underline; */
}
.calendar-wrap {
    width: calc(994px * 750/1080);
    height: calc(1360px * 750/1080);
    margin: 0 auto;
    background: url(../images/bg-calander.png) no-repeat top center/100% 100%; 
    margin-top: 35px;
}
.calendar-container * {
    font-size: 30px;
}

.slice-4{
    width: 750px;
    height: calc(5760px * 750/1080);
    /* background: url(../images/bg-4.webp) no-repeat top center/100% 100%; */
}
.sub-slice-1 {
    width: 750px;
    height: 1242px;
    /* background: url(../images/bg02_750x1242.png) no-repeat top center; */
}
.sub-slice-2 {
    width: 750px;
    height: 1611px;
    /* background: url(../images/bg01_750x1611.png) no-repeat top center; */
}
.slice-3 .calendar-container{
    width: 588px;margin: 0 auto;
}
.calendar-container  .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0px;
    width: 568px;
    margin: 0 auto;
    margin-top: -12px;
    /* margin-left: 3px; */
}
.calendar-container  .day{    
    width: 81.4px;
    border-radius: unset;
    border: unset;
}
.calendar-container .day-number {
    width: 100%;
    text-align: center;    
    background-color: #ddb773;
    /* height: 38px; */
    height: 43px;
    margin-bottom:0px;

}
.calendar-container .weekdays {
    color: #1a1a1a;
    border: unset;
    padding:unset;
    height: 51px;
}
.calendar .checked .check-icon{
    width: 63px;
    height: 61px;
    margin: 0 auto;
    background: url(../images/bg-sign-flg.png) no-repeat top center;
    margin-top: 10px;
}
.calendar .checked .check-icon::before{
    content: "";
}
.calendar-container .action-btn{
    width: calc(437px * 750/1080);
    height: calc(123px * 750/1080);
    background: url(../images/btn-sign.png) no-repeat top center/100% 100%;
    margin: 0 auto;
}
.action-btn .check-today-tips {display: none;}
.cur-month .day-note {
    background-color: #fbf1d6;
}
.sign-rule {
    font-size: 30px;
    text-decoration: underline;
    color: #000;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: -80px;
}
.calendar .day {
    height: 120px;
}
/*
.slice-3 .calendar-wrap {
    width: 86%;
    margin: 0 auto;
}
.calendar-wrap .calendar {
    height: 595px;
    width: 580px;
}
.calendar  .day-number {
    margin-bottom: unset;
    font-size: 25px;
    width: 100%;
    HEIGHT: 40px;
    background-color: #dbb874;
    border-radius: 10px 10px 0 0;
}
.calendar .day{
    width: 65px;
    height: 76px;
    text-align: center;
}
*/
.calendar .day-note{
    width: 100%;
    height: 77px;
}

/* .m .slice{
    display: none;
}
.m .slice.active{
    display: block;
} */

.tasks-guide {
    /* width: 955px;
    height: 599px; */
    width: calc(1037px*750/1080);
    height: calc(699px*750/1080);
    margin: 0 auto;
    margin-top: 15px;
    justify-content: space-evenly;
    background: url(../images/bg-jh-gifts.png) no-repeat top center/100% 100%;
}
.task-item {
    width: 100%;
    height: 60px;
    margin: 0 auto;
}
.task-desc{font-size: 30px; color: #4C6473;text-align: center;width: 45%;}
.task-action {
    width: auto;
    margin: 0 auto;
}
.task-name,.yuyue-state{color: #4C6473;}

.yuyue-state{font-size: 24px;}
.btn-guide{
    width: calc(282px * 750/1080);
    height: calc(90px * 750/1080);
    background: url(../images/btn-guide.png) no-repeat top center/100% 100%;
}
.task-item.done .btn-guide{
    background: url(../images/btn-guide-done-gray.png) no-repeat top center/100% 100%;
    /* filter: grayscale(0.8) brightness(0.8); */
}
.yuyue-state .num {
    color: #947347;
}
.invit-friends{
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
}
.hi-slogan{
    width: 100%;
    margin: 0 auto;
    text-align: center;color: #fff2c3;
    font-size: 35px;
}
.invited-gift-show {
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-top: 30px;
    justify-content: center;
}

.invited-gift-1,.invited-gift-2{
    width: 180px;
    height:180px;
    background: url(../images/bg-invite-gift-1.png) no-repeat top center/100% 100%;
    margin: 0 38px;
}
.invited-gift-show .invited-gift-2 {
    background-image: url(../../invite/img/bg-invite-gift-2.png);
}

.btn-invited-award{
    /* width: 208px;
    height: 61px; */
    width: calc(210px* 750/1080);
    height: calc(68px* 750/1080);
    background: url(../images/btn-invite-stage.png) no-repeat top center /100% 100%;
    margin: 0 auto;
}

.btn-invited-award.done{
    background-image: url(../images/btn-invite-stage-done.png);
    cursor: none;
}
.btn-invited-award.disable{
    background-image: url(../images/btn-invite-stage-gray.png);
    cursor: none;
}
.friend-sites {
    justify-content: space-evenly;
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
}
.site {
    width: 20%;
}
.add-firend{
    width: 120px;
    height: 120px;
    background: url(../../invite/img/btn-add-friend.png) no-repeat top center/100% 100%;
    border-radius: 50%;
    border: #d0ddb400 solid thin;
    margin: 0 auto;
}
.add-firend.add:hover{
    border: #d0ddb4 solid thin;
    cursor: pointer;
}
.add-firend.added{
    animation: BreathBright 1s ease-in-out infinite;
}
.friend-sites .desc {
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #ffffffcf;
}
.added .avatar{
    width: 100px;
    height: 100px;
    background: url(../../invite/img/bg-default-avatar.png) no-repeat;
    border-radius: 50%;
    background-size: 100% 100%;
    margin-top: 10px;
    margin-left: 10px;
}

/**/
.slice-4 .title,.slice-4 .title-rep {
    width: 100%;
    margin:0 auto;
    text-align: center;   
    padding-bottom: 20px;
    font-size: 26px;
    color: #fefefe;
}
.slice-4 .title{
    padding-top: 70px;
}
.slice-4 .title-rep{
    padding-top: 270px;
}
.zone-lottery{
    width: 750px;
    height: calc(1343px * 750/1080);
    margin-top: 50px;
    background: url(../images/bg-lottery.png) no-repeat top center/100% 100%;
}
.lottery-items-wrap {
    width: 100%;
    height: 650px;
    margin: 0 auto;
    padding-top: 80px;
}
/* .slice-4 .title-rep {
    margin-top: 135px;
} */
.lottery-row {
	justify-content: space-around;
	padding: 15px 35px;
}
.lottery-item .img-show:hover{
    background-color: #f3f5f4a4;
    mask-border: var(--box-shadow-1);
    transform: scale(1.02);
    border-radius: 50%;
}

.btn-lottery{
    width: 278px;
    height: 278px;
    background: url(../../invite/img/lottery/btn-btn-lottery.png) no-repeat;
    zoom:0.6;
}
.btn-lottery.disable {
    filter: grayscale(0.5) brightness(0.8);
    cursor: none;
}
.lottery-items-wrap .desc{
    /* font-size: 32px; */
    font-size: 24px;
    color: #4c6373;
    text-align: center;
}
.img-show{
    width: 248px;
    height: 248px;
    background: url(../../invite/img/lottery/bg-lottery-item-outside-border.png) no-repeat;
    zoom:0.6;
}
.lottery-item.active .img-show{
    background-image: url(../../invite/img/lottery/bg-lottery-item-outside-border-1.png);
}
[class^=lottery-item-]{
    width: 238px;
    height: 238px;
    background: url(../images/lottery/bg-lottery-item-1.png) no-repeat 10px 10px /100% 100%;
}
.lottery-item-2 {
    background-image: url(../images/lottery/bg-lottery-item-2.png);
}
.lottery-item-3 {
    background-image: url(../images/lottery/bg-lottery-item-3.png);
}
.lottery-item-4 {
    background-image: url(../images/lottery/bg-lottery-item-4.png);
}
.lottery-item-5 {
    background-image: url(../images/lottery/bg-lottery-item-5.png);
}
.lottery-item-6 {
    background-image: url(../images/lottery/bg-lottery-item-6.png);
}
.lottery-item-7 {
    background-image:url(../images/lottery/bg-lottery-item-7.png);
}
.lottery-item-8 {
    background-image: url(../images/lottery/bg-lottery-item-8.png);
}

.lottery-user-status{width: 90%; margin: 0 auto;
    margin-top: 110px;}
.lottery-info {
    font-size: 28px;
    color: #BDC0c9;
    width: 240px;line-height: 65px;
    word-spacing: 5px;text-align: center;
}
.lottery-info .balance{
    color: #fefefe;
}
.btn-groups {
	justify-content: space-around;
	width: 430px;
}
.btn-groups .btn{
    width: calc(282px * 750/1080);
    height: calc(90px * 750/1080); 
     /* zoom: 0.6; */
    background: url(../images/btn-lottery-awarded.png) no-repeat top center/100% 100%;
}
.btn-groups .btn-lottery-awarded{
    background-image: url(../images/btn-lottery-awarded.png);
  
}
.btn-groups  .btn-hd-rule{
    background-image: url(../images/btn-hd-rule.png);
}

/**/
.close_pop {color:#fefefe;left: unset;right: 10px;position: absolute; cursor:pointer;height: 30px; width: 30px;text-align: center;font-size: 28px;}
.close_pop:hover{animation: 0.8s windmill ease 2.2s; transform: scale(1.02);}
.pop .content {
    margin-top: 50px;
    /* width: 80%; */
    /*
    border: #e0e0ee solid thin;
    border-radius: 5px;
    background-color: #d6c9c9; */
}
.pop .title{width:100%; margin:0 auto;text-align: center;font-size: 28px;}

/* pop question*/
.popquestion {
    display: none;
    position: fixed;
    width: 750px;
    margin: 0 auto;
    left: calc((100% - 750px)/2);
    height: auto;
    overflow-y: auto;
    top: max(0px,var(--top-base-350));
    background: url(../images/bg-pop-1_1080x748.png) no-repeat top center/cover;
}

@keyframes windmill {
   0%{
         transform: rotatee(0deg);
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
  }

  70%{
         transform: rotatee(-8deg);
         -webkit-transform: rotate(-8deg);
         -moz-transform: rotate(-8deg);
         -ms-transform: rotate(-8deg);
  }
 75%{
         transform: rotatee(-7deg);
         -webkit-transform: rotate(-7deg);
         -moz-transform: rotate(-7deg);
         -ms-transform: rotate(-7deg);
  }
 80%{
         transform: rotatee(-7.8deg);
         -webkit-transform: rotate(-7.8deg);
         -moz-transform: rotate(-7.8deg);
         -ms-transform: rotate(-7.8deg);
  }
 90%{
         transform: rotatee(-7.5deg);
         -webkit-transform: rotate(-7.5deg);
         -moz-transform: rotate(-7.5deg);
         -ms-transform: rotate(-7.5deg);
  }
95% {
    -webkit-transform: rotate(-7.4deg);    
   -moz-transform: rotate(-7.4deg);    
   -ms-transform: rotate(-7.4deg);    
   transform: rotate(-7.4deg);
}
 100%{
         transform: rotatee(-7.5deg);
         -webkit-transform: rotate(-7.5deg);
         -moz-transform: rotate(-7.5deg);
         -ms-transform: rotate(-7.5deg);
  }

}

.guide-line {
    text-align: left;
    padding-left: 5%;
    font-size: 20px;
    font-weight: 500;
}
.m .guide-line {
    font-size: 26px;
}
.cur-q-i,.num-q{
    background-color: #7c4c4c;
    color: white;
    padding: 0 10px 0 10px;
}
.done{
    color: green;
    font-weight: bolder;
}
.m .popquestion .content {
    padding: unset;
}
.m .close_popquestion {
    margin: 10px 40px;
}
.pc .close_popquestion {
    margin: 0px 60px;
}
.questions {
    padding-top: 30px;
    width: 90%;
    margin: 0 auto;
}
.ask {
    font-size: 20px;
    text-align: left;
    text-indent: 1rem;
}
.m .ask {
    font-size: 26px;
    /* text-indent: 1rem; */
}
.question{display: none;}
.question.display{display: block;}
.question .option{font-size: 16px; text-indent: 2rem; line-height: 40px;text-align: left;}
.m .q-options * {
    font-size: 24px;
    text-align: left;
    padding-left: 14px;
    line-height: 50px;
}
.m .question .option {
    font-size: 24px;
    line-height: 56px;
    text-align: left;
    padding-left: 1rem;
}

/* .option .opt-q::after {
    content: " ";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    color: red;
    border: red solid thin;
    margin: -10px 0 0 -10px;
} */
 .m .option .opt-q{opacity: 0;}
/* .m .option .opt-q:checked::before {
    content: "✔";
    color: red;
    position: absolute;
    font-size: 40px;
    margin: -20px 0 0 -5px;
}
.m .option .opt-q::after{
    width: 30px;
    height: 30px;
    border-radius: 50%;
} */
input[type='radio'].opt-q+label:before {
    content: '\a0';
}
input[type='radio'].opt-q+label {
    background: url(../images/bg-radio-1.png) top center no-repeat;
    width: 26px;
    height: 26px;
    display: inline-block;
    margin: 25px 10px 0 0px;
    line-height: 25px;
    filter: brightness(0.1);
}
input[type='radio'].opt-q:checked+label {
    background-image:url(../images/bg-radio-2.png);
    filter: brightness(1);
}
/* .opt-q {
    margin: 0px 20px 0 0;
} */

.m .pop-gift-desc {
    font-size: 24px;
}
.btn-next {
    width: 100px;
    margin: 0 auto;
    text-align: center;
    font-size: 22px;
    line-height: 40px;
    background-color: #a7875e;
    border-radius: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.close_pop,.closepop {
    width: 49px;
    height: 49px;
    line-height: 49px;
    font-size: 49px;
    font-weight: bold;
    color: #38a0ff;
    text-align: center;
    position: absolute;
    top: 40px;
    right: 30px;
    cursor: pointer;
    transition: transform 0.5s ease;
    z-index: 1001;
    font-family:"Microsoft YaHei";
}

.pop .content,.pop .popmsgarea{
    /* width: 85%;
    padding: 80px 20px 30px 20px;
    margin: 0 auto;
    text-align: center; */
    width: 75%;
    margin: 80px;
    text-align: center;
}
.popmsgarea .qrcode {
    padding: 25px;
}
.m .pop .content,.m .pop .popmsgarea{
    /* padding: 80px 40px 50px 40px; */
}
.pop.popmsg, .pop.popsharelnk,.popposter {
    display: none;
    background: transparent url("../images/bg-pop-1_1080x748.png") no-repeat top center/cover;
    width: 750px;
    min-height: calc(748px * 750/1080);
    left: calc((100% - 750px)/2);;
    top: max(0px,var(--top-base-750));
    height: auto;
}
.m .popsharelnk input {
    width: 80%;
    height: 90px;
    line-height: 100px;
}
.pop .sharelnkshowinput {
    margin-top: 100px;
}
.popmyawards,.lottery-awarded-gifts{
    display: none;
    width: 750px;
    left: calc((100% - 750px)/2);
    min-height: calc(879px * 750/1080);
    height:auto;
    left: calc((100vw - 750px)/2);
    top: max(0px,var(--top-base-975));;
    background: url(../images/bg-pop-2_1080x879.png) no-repeat top center/100% 100%;
}

.m .popmyawards .title {
    margin-top: 10px;
}
.m .close_popmyawards {
    margin: 10px 60px;
}
.m .popmyawards .content {
    width: 70%;
    margin: 0 auto;
    /* border: red dashed thin; */
    margin-top: 60px;
    padding: unset;
}

.awarded-types {
    width: 100%;
    margin: 0 auto;
}



.popsignrule, .poprule,.poplotrule{
    display: none;
    width: 750px;
    left: calc((100% - 750px)/2);
    min-height: calc(879px * 750/1080);
    height: auto;
    top: max(0px,var(--top-base-750));
    background: url(../images/bg-pop-2_1080x879.png) no-repeat top center/100% 100%;
}

/* .pc .popsignrule, .pc  .poprule,.pc .poplotrule{
    top: 0;
} */
.pop.share-tips{
    width: 750px;
    height: calc(575px * 750/1080);    
    background: url(../../invite/img/bg-share-tips.png) no-repeat top center/100% 100%;
    top: 0vh;
    position: fixed;
}
.sharelnktxt {
    line-height: 60px;
    font-size: 30px;
}

.sharelnkbtn {
    width: 560px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    margin: 20px auto 0;
    display: block;
    /* color: #aaa; */
    color:#69d655;
    text-align: center;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    top: -72px;
}

.pop.popsharepic, .pop.popsharepic2 {
    display: none;
    position:fixed;
    width: 750px;
    height: 1333px;
    /* transform: translate(-50%, 0); */
    top: max(0px, var(--top-base-1333));
    left: calc((100% - 750px)/2);
}

.sharepicbg {
    width: 673px;
    height: 1153px;
    background: url(../../appraisal/images/poppic.webp) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 70px;
    left: 38.5px;
}

.sharepicbg0 {
    width: 673px;
    height: 1153px;
    position: absolute;
    top: 70px;
    left: 38.5px;
}
.sharepicbg0 img {
    width: 673px;
    height: 1153px;
}

.sharepiccont {
    width: 649px;
    height: 1129px;
    position: relative;
    top: 12px;
    margin: 0 auto;
    overflow: hidden;
}
.copypiclnk, .copypiclnk0 {
    width: 320px;
    height: 40px;
    line-height: 40px;
    font-size: 32px;
    text-align: center;
    color: #ccc;
    cursor: pointer;
    position: absolute;
    top: 1240px;
    left: 50%;
    transform: translateX(-50%);
}
.popsharelnk {
    width: 673px;
    height: 460px;
    background: url(../../appraisal/images/poplnk.png) no-repeat center center;
    background-size: cover;
}
.sharelnkcont {
    width: 609px;
    height: 350px;
    position: relative;
    top: 90px;
    margin: 0 auto;
    overflow: hidden;
}
.sharelnktxt {
    line-height: 60px;
    font-size: 30px;
    width: 90%;
    margin: 0 auto;
}
.sharelnkhidinput {
    width: 520px;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    padding: 0 20px;
    margin: 20px auto;
    display: none;
    color: #aaa;
    text-align: center;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 2px;
}
.sharelnkshowinput {
    width: 520px;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    padding: 0 20px;
    margin: 20px auto;
    display: block;
    color: #aaa;
    text-align: center;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 2px;
    position: relative;
    top: -72px;
}
.popconfirm1 {
    display: none;
    width: 673px;
    height: 460px;
    background: url(../../appraisal/images/poplnk.png) no-repeat center center;
    background-size: cover;    
    left: calc((100vw - 673px)/2);
    top: max(0px, var(--top-base-460));
}
.popconfirm2 {
    display: none;
    width: 673px;
    height: 601px;
    background: url(../../appraisal/images/poplogin.png) no-repeat center center;
    background-size: cover;
    left: calc((100vw - 673px)/2);
    top: max(0px, var(--top-base-601));
}
.confirm2cont {
    width: 609px;
    height: 480px;
    position: relative;
    top: 90px;
    margin: 0 auto;
    overflow: hidden;
}
.confirmtxt {
    line-height: 70px;
    font-size: 29px;
    font-weight: bold;
}
.confirmtxt span {
    color: var(--color-roletxt-span);
    border-bottom: 1px solid #000;
}
.confirmdesc {
    line-height: 50px;
    font-size: 26px;
}
.confirmbtnbox {
    width: 600px;
    height: 80px;
    margin: 20px auto;
}
.cfbtn {
    width: 265px;
    height: 63px;
    margin: 8px 17.5px;
    cursor: pointer;
}
.cfbtn.okbtn {
    background: url(../../appraisal/images/ok.png) no-repeat center center;
    background-size: cover;
}
.cfbtn.cancelbtn {
    background: url(../../appraisal/images/cancel.png) no-repeat center center;
    background-size: cover;
}
.cfbtn.thinkbtn {
    background: url(../../appraisal/images/think.png) no-repeat center center;
    background-size: cover;
}
.cfbtn:hover {
    filter: brightness(1.2);
    -webkit-filter: brightness(1.2);
    -moz-filter: brightness(1.2);
    -o-filter: brightness(1.2);
}
.cfbtn:active {
    filter: brightness(0.7);
    -webkit-filter: brightness(0.7);
    -moz-filter: brightness(0.7);
    -o-filter: brightness(0.7);
}
.confirmattent {
    line-height: 40px;
    font-size: 28px;
    color: var(--color-font-warning);
}

.slice-tail-1 .title{    
    margin-top: 140px;
    color: #373A41;
    font-weight: bolder;
}

.hot-points-show {
    overflow-y: hidden;padding-top: 65px;
}
.swiper-hot-points{
    overflow: hidden;
    width: 750px;
    height: calc(540px * 750/1080);
}

.swiper-wrapper {
    width: 750px;
    height: 375px;
    display: flex;
}
.swiper-slide {
    width: 750px;
    height: calc(540px * 750/1080);
}
.swiper-slide img {
    width: 750px;
    height: calc(540px * 750/1080);
}
.hot-points-show .swiper-pagination {
    height: 50px;
    width: 38%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;    
    position: relative;
}
.hot-points-show .swiper-pagination-bullet{
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/swiper-point.png) no-repeat top center/100% 100%;
    filter: brightness(0.4);

}
.hot-points-show .swiper-pagination-bullet-active{
    background: url(../images/swiper-point-active.png) no-repeat top center/100% 100%;
    filter: brightness(1);
}

.search-blank{
    width: calc(732px * 750/1080);
    height: calc(126px *  750/1080);
    margin: 0 auto;
    background: url(../../invite/img/bg-search.png) no-repeat top center/100% 100%;
    font-size: 30px;
    line-height: 75px;
    text-align: center;
    color: #607b72;
    font-weight: 500;
}
.web-addr {
    width: fit-content;
    margin: 0 auto;
    color: #4C6373;
    text-align: center;
    font-size: 40px;
    padding-top: 12px;
    border-bottom: #4C6373 solid 2px;
}

.slice-tail-2 .logo{
    width: 351px;
    height: 139px;
    margin: 0 auto;
    background: url(../../../assets/images/xy_logo_2510.png) no-repeat;
    margin-top: 48px;
}
.bottom-note{
    width: 100%;
    font-size: 30px;
    color: #4c6373;
    text-align: center;    
    padding-top: 60px;
}
.popposter{
    display: none;
}
.m .month-nav * {
    font-size: 28px;
}
/* .m .pop .popmsgarea,.m .pop .content {
    padding: 100px 50px 0 50px;
    width: 75%;
} */

.popmsgarea .desc {
    font-size: 20px;
    color: #926868;
    line-height: 50px;
    padding: 10px;
    text-indent: 3rem;
}

.sel-options {
    display: flex;
    flex-direction: row;
    font-size: 32px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    justify-content: space-evenly;
    height: 60px;
}
.sel-options * {
    font-size: 36px;
    color: #1c614a;
    text-align: center;
}
.sel-options input[type=radio] {
    font-size: 36px;
    width: 35px;
    height: 35px;
}
.btn-avator-permit{
    width: 354px;
    height: calc(151px * 354/669);
    margin: 0 auto;
    background: url(../../invite/img/btn-yuyue-blank.png) no-repeat top center/100% 100%;
    margin-top: 25px;
    font-size: 35px;
    font-weight: 400;
    line-height: 75px;
    color: #000;
}

.added .avatar::after {
    content: "♥️";
    position: absolute;
    color: red;
    /* 
    font-size: 40px;
    margin: -45px 80px; */
    font-size: 20px;
    margin: -35px 37px;
}

/*  */
.m .pop.guide-lnreg {
    height: auto;
}
.m .lnregbox{width:100%;margin:0 auto;}
.m .guide-lnreg .contents{
    width: calc(750/1080 * 640px);
    height: auto;
}
.m .guide-lnreg .formline1{
    /* line-height: 110px; */
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.m .guide-lnreg .lnreglnk,.m .lost-pwd {width: 32%;margin: 0 auto;}
.m #loginbtn{
    /* width: calc(750/1080 * 537px); */
    width: 373px;
    height: 80px;
    background: url(../../invite/img/btn-login.png) no-repeat top center/100% 100%;
}

.m .lnregbox {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 80px;
    height: auto;
}
.m .formline2 {
    height: 75px;
    color: red;
    margin-top: 20px;
}
.m .formline2 * {
    color: #3f4a2a;
}

.m input#checkbox {
    width: 30px;
    height: 30px;
    margin-right: 20px;
}
.m .close-pop.flg-close {
    position: absolute;
    color: #323c2b;
    font-size: 40px;
    right: 50px;
}
.pop .guildtitle, .pop .second-title {
    display: none;
}
.pop .lnregbox.on {
    padding-top: 50px;
}
.pop #regtips {
    margin: 60px 0 0 0;
}
.m .register .formline2 input {
    width: 100%;
    height: 65px;
}

.m .top-mask .warning,.m .pop .warning {
    font-size: 28px;
}

.hd-rule-lines {
    text-align: left;
    font-size: 18px;
    line-height: 30px;
    padding: 0 50px 0 50px;
    max-height: 600px;
    overflow-y: scroll;
}
/* .m .hd-rule-lines {
    font-size: 20px;
    line-height: 30px;
} */
.m .hd-rule-lines {
    font-size: 24px;
    line-height: 50px;
    width: 84%;
    height: auto;
    overflow-y: scroll;
    max-height: 660px;
    margin: 0 auto;
    padding: 0;
}
.tools-group {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    padding-bottom: 60px;
    font-size: 25px;
    line-height: 40px;
    justify-content: space-around;
}
.tools-group .btn {
    width: 200px;
    border: red solid thin;
    border-radius: 5px;
    height: 45px;
    text-align: center;
}
.tools-group .btn-ok{display: none;}


.my-awards {
    font-size: 22px;
    line-height: 47px;
    text-align: left;    
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
}

.tips {
    text-align: left;
    font-size: 28px;
    line-height: 60px;
    /* margin-top: 35px; */
}
.tips .user-ac-info {
    font-size: 30px;
}
.user-ac-info .ac-mask {
    font-weight: bold;
}
.tips action {
    text-align: left;
    padding-left: 2rem;
}
.line {
    border-bottom: #626e4a solid 1px;
    line-height: 10px;
    margin: 15px 0 15px 0;
    text-shadow: 0 0 #cc5454;
}
.gift-head,.gift-body-wrap {
    font-size: 24px;
    line-height: 50px;
    /* margin: 15px; */
}
.th, .td {
    padding: unset;
    text-align: center;
}
.gift-head{
    font-size: 26px;
    line-height: 50px;
    background-color: #dedede;
    border: var(--color-table-border-gray) solid 1px;
}
.gift-head .th{text-align: center;}
.gift-head .th-1{
    width: 60%;
}
.gift-head .th-2 {
    width: 38%;
    border-left: var(--color-table-border-gray) solid 1px;
}
.gift-body-wrap {
    height: 300px;
    max-height: 300px;
    overflow-y: scroll;
    display: none;
}
.gift-body-wrap.active{display: block;}

.gift-body-wrap * {
    font-size: 25px;
}
.gift-body-wrap li {
    border-bottom: var(--color-table-border-gray) solid 1px;
    border-left: var(--color-table-border-gray) solid 1px;
    border-right: var(--color-table-border-gray) solid 1px;
}
.gift-body-wrap .td-1 {
    width: 60%;
}
.gift-body-wrap .td-2 {
    width: 38%;
    border-left: var(--color-table-border-gray) solid 1px;
}

.awarde-type{
    display: block;
    width: calc(241px * 750/1080);
    height: calc(72px * 750/1080);
    background: url(../images/bg-awarded-p-1.png) no-repeat top center/100% 100%;
}
.awarded-type-1{
    background-image: url(../images/bg-awarded-p-1.png) ;
}
.awarded-type-1:hover,.awarde-type-1.active{
    background-image: url(../images/bg-awarded-p-1-hover.png);
}

.awarded-type-2{
    background-image: url(../images/bg-awarded-p-2.png);
}
.awarded-type-2:hover,.awarde-type-2.active{
    background-image: url(../images/bg-awarded-p-2-hover.png);
}
.awarded-type-3{
    background-image: url(../images/bg-awarded-p-3.png);
}
.awarded-type-3:hover,.awarde-type-3.active{
    background-image: url(../images/bg-awarded-p-3-hover.png);
}
.my-awards .notes {
    padding: 30px 0 40px 0;
    font-size: 24px;
    color: #50514e;
    line-height: 35px;
}
.notes .note-1, .notes .note-2{display: none;}
.notes .note-1.active, .notes .note-2.active{display: block;}
.award-will{display: none;}

.go-bind-role,.go-bind-role-help{
    cursor: pointer;
    color: #191919;
    font-size: 30px;
    text-decoration: underline dashed;
    font-weight: bold;
}
.go-bind-role-help{
    color: #919739;
     text-decoration: #6e6eeb underline dashed;
     display: inline;
}
.user-info {
    justify-content: space-around;    
    font-size: 26px;
    padding-top: 40px;
}
.user-status {
    width: 62%;
}

.help-tip{ 
    font-size: 20px;
    line-height: 50px;
}
.user-status .lab {
    width: fit-content;
    float: left;
    padding-right: 25px;
}
.user-status .cur-state {
    float: left;
}
.my-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background-size: 100% 100%;
}
.m .other {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
}
.m .tools-admin .btn {
    border: red dashed thin;
    width: 220px;
    font-size: 24px;
    text-align: center;
    border-radius: 15px;
    background: linear-gradient(100deg, #acdb8f, #5c5353);
    color: #fefefe;
    font-weight: 500;
}
.m .pop .invitor-info {
    width: 80%;
    padding-top: 80px;
    height: auto;
    min-height: 300px;
    max-height: calc(100% - 100px);
    font-size: 28px;
    text-align: left;
    border-radius: 5px;
}

.lottery-awarded-gifts .user-status {
    font-size: 30px;
    line-height: 60px;
}
.lottery-awarded-gifts .gifts {
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow-y: scroll;
    max-height: 440px;
    /* border: red dashed thin; */
}
.lottery-awarded-gifts .desc {
    margin-top: -25px;
    font-size: 25px;
}
.bind-roles {
    width: 750px;
    /* min-height: 350px;
    max-height: 600px; */
    height: calc(748px * 750/1080);
    top: max(0px, var(--top-base-300));
    left: calc((100% - 750px)/2);
    background: url(../images/bg-pop-1_1080x748.png) no-repeat top center/cover;
}

.btn-bind{
    /* width: 322px;
    height: 96px;
    background: url(../img/btn-guide.png) no-repeat; */
    width: 322px;
    height: calc(151px * 322/669);
    background: url(../../invite/img/btn-yuyue-blank.png) no-repeat top center/100% 100%;
    margin: 0 auto;
    margin-top: 25px;
}
.bind-roles .btn-bind {
    font-size: 34px;
    text-align: center;
    line-height: 70px;
    text-indent: 0rem;
    font-weight: 400;
}
.sel-roles {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
}

.m .sel-roles .role {
    line-height: 60px;
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 30px;
}
.m .role input {
    width: 35px;
    height: 35px;
    margin-right: 20px;
}
.m .bind-roles .title {
    font-size: 40px;
    line-height: 60px;
    padding-top: 40px;
    padding-bottom: 20px;
}

.m .popmsgarea .btn-go-share {
    width: 400px;
    height: calc(151px * 400/669);
    background: url(../../invite/img/btn-yuyue-blank.png) no-repeat top center/100% 100%;
    margin: 0 auto;
    font-size: 35px;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
    color: #403939;
    font-weight: 400;
}

@media screen and (max-height:calc(667px * 2)){
    .m .nav-bottom{
        top: unset;
    }
}

.m .pop .title {
    font-size: 40px;
    margin-top: 60px;
}

.m .popsignrule .title, .m .poprule  .title,.m .poplotrule  .title,
.m .lottery-awarded-gifts .title,
.m .popmyawards .title{
        margin-top: 0px;
}
.popsharepic2 .infobox {
    margin-top: 50px;
}
.popsharepic2 .maintextbox {
    margin-top: 35px;
}
.m .popposter .title{
    margin-top:20px;
}
.qrcode {
    padding: 35px;
}
.qrcode img {
    width: 296px;
    height: 296px;
}
.qrcode .tip {
    font-size: 30px;
    padding-top: 40px;
}

.error {
    width: 80%;
    margin: 0 auto;
    padding: 45px;
    font-size: 25px;
    text-align: center;
    color: var(--color-font-error);
}

.giftbox {display: none;}


.hd-rule-lines .rule p {
    font-weight: bolder;
    font-size: 14px;
}
.hd-rule-lines .rule *, .hd-rule-lines .rule  li ul li p {
    font-size: 12px;
    font-weight: 400;
}
.hd-rule-lines .rule ul li p {
    font-size: 14px;
    font-weight: 500;
}

.m .hd-rule-lines .rule p {
    font-weight: bolder;
    font-size: 28px;
}
.m .hd-rule-lines .rule *, .m .hd-rule-lines .rule  li ul li p {
    font-size: 24px;
    font-weight: 400;
}
.m .hd-rule-lines .rule ul li p {
    font-size: 26px;
    font-weight: 500;
}