@font-face {
    font-family: "WebFont";
    src: url("/custom/img/act/act240119/webfont.ttf");
}
*{
   font-family: "WebFont","Arial";
    /*font-family: Arial;*/
}
#mycanvas{
    width: 7.5rem;
    height: 15rem;
    z-index: -2;
    pointer-events:none;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#code{
    display: inline-block;
    opacity: 0;
    pointer-events:none;
    width: 1.2rem;
    position: absolute;
    top: 0;
}
#code canvas{
    width: 100%;
}
.hide{
    visibility: hidden;
}
/*loading页*/
.loading-pg{
    width: 7.5rem;
    height: 15rem;
    position: relative;
    display: none;
    background: url("/custom/img/act/act240119/loading-pg.jpg");
    background-size: 100% 100%;
}
.loading-inner{
    width: 0;
    height: 0.11rem;
    position: absolute;
    background: url("/custom/img/act/act240119/loading-inner.png");
    background-size: 100% 100%;
    top: 7.35rem;
    left: 1.35rem;
}
.loading-txt{
   font-size: 0.32rem;
   color: #fcf8b2;
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
   top: 8rem;
}

.login-pg{
    width: 7.5rem;
    height: 15rem;
    position: relative;
    display: none;
    background: url("/custom/img/act/act240119/main.jpg");
    background-size: 100% 100%;
}
.login-pg:after{
    content: "";
    display: block;
    width: 7.5rem;
    height: 15rem;
    background: url("/custom/img/act/act240119/main-move.gif");
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
.logo{
    width: 1.43rem;
    height: 1.22rem;
    background: url("/custom/img/act/act240119/logo.png");
    background-size: 100% 100%;
    position: absolute;
    left: 0.3rem;
    top: 0.2rem;
}
.login-download{
    display: inline-block;
    width: 0.64rem;
    height: 0.65rem;
    background: url("/custom/img/act/act240119/btn-download.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0.4rem;
    left: 5.35rem;
}
.login-music{
    width: 0.64rem;
    height: 0.65rem;
    background: url("/custom/img/act/act240119/btn-music.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0.4rem;
    left: 6.4rem;
}
.login-music.active{
    background: url("/custom/img/act/act240119/btn-music-close.png");
    background-size: 100% 100%;
}
.login-slogan{
    width: 7.5rem;
    height:4rem;
    background: url("/custom/img/act/act240119/slogan.gif");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    top: 2.2rem;
}
.login-lattern{
    width: 4rem;
    height: 6rem;
    background: url("/custom/img/act/act240119/lattern.gif");
    background-size: 100% 100%;
    position: absolute;
    left: 52%;
    transform: translate(-50%,0);
    top: 5.2rem;
}
.login-bg{
    width: 4.34rem;
    height: 0.41rem;
    background: url("/custom/img/act/act240119/login-bg.png");
    background-size: 100% 100%;
    position: absolute;
    top: 6.2rem;
    left: 1.5rem;
    justify-content: center;
    display: none;
}
.login-mobile{
    font-size: 0.28rem;
    color: #fffae3;
}
.logout{
    margin: 0 0.15rem;
    color: #e87130;
    font-size: 0.24rem;
    position: relative;
}
.logout::after{
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0.05rem;
    width: 0.5rem;
    background:#e87130;
    height: 0.01rem;
    left: 0;
}
.login-change{
    display: inline-block;
    color: #e87130;
    font-size: 0.24rem;
    position: relative;
}
.login-change::after{
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0.05rem;
    width: 0.5rem;
    background:#e87130;
    height: 0.01rem;
    left: 0;
}
.start-memory{
    width: 1.5rem;
    height: 2.5rem;
    position: absolute;
    left: 3rem;
    top: 7.4em;
}
.btn-gift{
    width: 2.38rem;
    height: 2.41rem;
    background: url("/custom/img/act/act240119/share-gift.png");
    background-size: 100% 100%;
    position: absolute;
    left: 5rem;
    top: 8.5rem;
}
.btn-gift.active{
    background: url("/custom/img/act/act240119/get-gift.png");
    background-size: 100% 100%;
}

/*弹窗*/
.pop{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: none;
}
.pop-inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.is-show{
    display: block!important;
}
.is-flex{
    display: flex!important;
}

.jump{
    width: 0.6rem;
    height: 0.33rem;
    background: url("/custom/img/act/act240119/jump.png");
    background-size: 100% 100%;
    position: absolute;
    left:0.4rem ;
    top: 0.5rem;
    display: none;
}
.save{
   width: 1.48rem;
   height: 1.42rem;
   background: url("/custom/img/act/act240119/btn-save.png");
   background-size: 100% 100%;
   position: absolute;
   top: 0.4rem;
   right:0.3rem ;
}
.btn-left{
    width: 0.96rem;
    height: 0.7rem;
    background: url("/custom/img/act/act240119/slide-left.png");
    background-size: 100% 100%;
    position: absolute;
    left: 1rem;
    top: 9.5rem;
}
.btn-right{
    width: 0.96rem;
    height: 0.7rem;
    background: url("/custom/img/act/act240119/slide-right.png");
    background-size: 100% 100%;
    position: absolute;
    right: 1rem;
    top: 9.5rem;
}
.scene-left{
    width: 3.91rem;
    height: 7.76rem;
    position: absolute;
    left: 0;
    top: 1.8rem;
    opacity: 0;
    animation: 1s show 0.5s ease alternate forwards;
}
.slide-hammer{
    width: 4rem;
    height: 3.5rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    top: 8rem;
    display: none;
}
.import{
    font-weight: bold;
    font-size: 0.36rem;
    color: #c15d44;
}
.text{
    width: 5.2rem;
    position: absolute;
    left: 55%;
    top: 1.7rem;
    transform: translate(-50%,0);
    color: #5b370c;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.72rem;
    opacity: 0;
    animation: 1s show 0.5s ease alternate forwards;
}
.scene-side{
    width: 4.49rem;
    height: 8.71rem;
    position: absolute;
    left: 0;
    top: 2.2rem;
    pointer-events: none;
}

/*转场*/
.login2start{
   position: relative;
   pointer-events: none;
   width: 7.5rem;
   height: 15rem;
   background: url("/custom/img/act/act240119/login2start.jpg");
   background-size: 1500% 100%;
   animation: l2s steps(14) 1s forwards;
   display: none;
}
@keyframes l2s {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1400% 0;
    }
}


.static-pg{
    width: 7.5rem;
    height: 15rem;
    background: url("/custom/img/act/act240119/scene.jpg");
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    pointer-events: none;
}
.static-pg::after{
    content: "";
    width: 7.5rem;
    height: 15rem;
    display: block;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    background: url("/custom/img/act/act240119/bg.png");
    background-size: 1600% 100%;
    animation: static-move 2s steps(16) infinite;
}
@keyframes static-move {
    from{
        background-position: 0 0;
    }
    to{
        background-position: -1600% 0 ;
    }
}
/*前言*/
.start-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.start-scene-text{
   width: 5.37rem;
   height: 5.49rem;
   background: url("/custom/img/act/act240119/one-scene.png");
   background-size: 100% 100%;
   position: absolute;
   left: 50%;
   top: 1.4rem;
   transform: translate(-50%,0);
   opacity: 0;
   animation: 1s show ease alternate forwards;
}
@keyframes show {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100;
    }
}

/*第一幕-初入*/
.one-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.one-scene-side{
    background: url("/custom/img/act/act240119/scene-side1.png");
    background-size: 100% 100%;
}
.one-scene-left{
    background: url("/custom/img/act/act240119/one-scene-left.png");
    background-size: 100% 100%;
}

/*第二幕-战力*/
.two-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.two-scene-side{
    background: url("/custom/img/act/act240119/scene-side2.png");
    background-size: 100% 100%;
}
.two-scene-left{
    background: url("/custom/img/act/act240119/two-scene-left.png");
    background-size: 100% 100%;
}

/*第三幕--好友*/
.three-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.three-scene-side{
    background: url("/custom/img/act/act240119/scene-side3.png");
    background-size: 100% 100%;
}
.three-scene-left{
    background: url("/custom/img/act/act240119/three-scene-left.png");
    background-size: 100% 100%;
}

/*第四幕--副本*/
.four-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.four-scene-side{
    background: url("/custom/img/act/act240119/scene-side4.png");
    background-size: 100% 100%;
}
.four-scene-left{
    background: url("/custom/img/act/act240119/four-scene-left.png");
    background-size: 100% 100%;
}

/*第五幕--帮会*/
.five-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.five-scene-side{
    background: url("/custom/img/act/act240119/scene-side5.png");
    background-size: 100% 100%;
}
.five-scene-left{
    background: url("/custom/img/act/act240119/five-scene-left.png");
    background-size: 100% 100%;
}

/*第六幕--仙侣*/
.six-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.six-scene-side{
    background: url("/custom/img/act/act240119/scene-side6.png");
    background-size: 100% 100%;
}
.six-scene-left{
    background: url("/custom/img/act/act240119/six-scene-left.png");
    background-size: 100% 100%;
}

/*第七幕--灵兽*/
.seven-scene{
    width: 7.5rem;
    height: 15rem;
    display: none;
    position: relative;
}
.seven-scene-side{
    background: url("/custom/img/act/act240119/scene-side7.png");
    background-size: 100% 100%;
}
.seven-scene-left{
    background: url("/custom/img/act/act240119/seven-scene-left.png");
    background-size: 100% 100%;
}

.choose-year-tags{
    width: 2.73rem;
    height: 0.96rem;
    background: url("/custom/img/act/act240119/btn-tags.png");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    top: 12rem;
    transition: all 1s;
}

/*弹窗-选择渠道*/
.fangqu-account-inner{
    width: 7.24rem;
    height: 9.4rem;
    background: url("/custom/img/act/act240119/select-os.png");
    background-size: 100% 100%;
    position: relative;
}
.fangqu-account-select-os-radio label{
    display: inline-block;
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    left: 0;
    top: 0;
}
.fangqu-account-select-os-radio label[for="fangqu-account-ios"]{
    top: 3.1rem;
    left: 2.2rem;
}
.fangqu-account-select-os-radio label[for="fangqu-account-android"]{
    top: 3.1rem;
    left:3.93rem;
}
.fangqu-account-select-os-radio input[type="radio"]{
    display: none;
}
.fangqu-account-select-os-radio span{
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
}
.fangqu-account-select-os-radio input[type="radio"]  +span{
   position: absolute;
   top: 0.15rem;
   left: 0.08rem;
}
.fangqu-account-select-os-radio input[type="radio"]:checked +span{
    background: #724328;
}

.fangqu-account-dropdown{
    position: absolute;
    left: 2.3rem;
    top: 3.66rem;
    width: 3.5rem;
}
.fangqu-account-list{
    width: 3.8rem;
    background: #efd690;
    line-height: 0.5rem;
    font-size: 0.3rem;
    color: #633722;
    z-index: 100;
}
.fangqu-account-default{
    color: #bda78d;
    font-size: 0.3rem;
}
.fangqu-account-submit{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    bottom: 1.9rem;
    width: 3rem;
    height: 1rem;
}

/*账单*/
.bill{
    width: 7.5rem;
    height: 15rem;
    display: none;
}
.bill-pic{
    width: 100%;
}
.bill-back{
    width: 0.97rem;
    height: 0.81rem;
    background: url("/custom/img/act/act240119/btn-back.png");
    background-size: 100% 100%;
    position: absolute;
    left: 0.2rem;
    top: 0.2rem;
}
.bill-share{
    width: 0.82rem;
    height: 3.72rem;
    background: url("/custom/img/act/act240119/bill-share-gift.png");
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 2.3rem;
}
.bill-share.active{
    background: url("/custom/img/act/act240119/bill-get-gift.png");
    background-size: 100% 100%;
}
.btn-appoint{
    display: block;
    width: 2.73rem;
    height: 0.96rem;
    background: url("/custom/img/act/act240119/btn-appoint.png");
    background-size: 100% 100%;
    position: absolute;
    left: 0.8rem;
    top: 11.3rem;
}
.btn-new{
    display: block;
    width: 2.73rem;
    height: 0.96rem;
    background: url("/custom/img/act/act240119/btn-new.png");
    background-size: 100% 100%;
    position: absolute;
    left: 4rem;
    top: 11.3rem;
}
.bill-long{
    width: 2.98rem;
    height: 0.35rem;
    background: url("/custom/img/act/act240119/btn-long-press-save.png");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 12.5rem;
    transform: translate(-50%,0);
}

/*弹窗--引导*/
.guide-pg{
    width: 7.5rem;
    height: 15rem;
    background: url("/custom/img/act/act240119/guide-pg.png");
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    animation: 1s  show 1s forwards;
}

/*弹窗--分享有礼*/
.modal-share{
    width: 7.5rem;
    height: 7.3rem;
    background: url("/custom/img/act/act240119/modal-share.png");
    background-size: 100% 100%;
}
.modal-close{
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: 0.6rem;
    top: 0.3rem;
}

/*弹窗--礼包码*/
.gift{
    width: 7.5rem;
    height: 7.3rem;
    background: url("/custom/img/act/act240119/gift-bg.png");
    background-size: 100% 100%;
}
.gift-code{
    color: #8d5326;
    font-size: 0.36rem;
    position: absolute;
    width: 3.6rem;
    left: 1.2rem;
    top: 2.6rem;
    text-align: center;
}
.gift-code-copy{
    width: 1.5rem;
    height: 0.8rem;
    position: absolute;
    left: 5rem;
    top: 2.5rem;
}

/*弹窗--选择称号*/
.pop-bottom{
    position: absolute;
    bottom: 0;
}
.choose-tags{
    width: 7.5rem;
    height: 7.29rem;
    background: url("/custom/img/act/act240119/choose-title-bg.png");
    background-size: 100% 100%;
    bottom: 0;
}
.tags-inner{
    display: flex;
    position: absolute;
    top: 1.6rem;
    left: 0.25rem;
    width:7rem ;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
}
.tags-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.2rem;
}
.tags-item-1{
    margin: 0.1rem 0;
}
.tags-item-title{
    width: 2.17rem;
    height: 0.71rem;
    background: url("/custom/img/act/act240119/tags-bg.png");
    background-size: 100% 100%;
    color: #3f2409;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.71rem;
}
.tags-item-title.active{
    color: #ffeabe;
    background: url("/custom/img/act/act240119/tags-bg-active.png");
    background-size: 100% 100%;
}
.tags-item-sub{
    font-size: 0.22rem;
    color: #664524;
}
.generate-bill-btn{
    width: 2.73rem;
    height: 0.96rem;
    background: url("/custom/img/act/act240119/btn-generate.png");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 0.4rem;
}

/*弹窗--下载游戏*/
.download{
    width: 7.24rem;
    height: 6.84rem;
    background: url("/custom/img/act/act240119/need-download-bg.png");
    background-size: 100% 100%;
}
.download-game-btn{
    width: 2.5rem;
    height: 0.8rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    top: 3.5rem;
}

/*弹窗--保存回忆*/
.save-memory{
    width: 6.5rem;
}
.save-close{
    width: 0.9rem;
    height: 0.9rem;
    background: url("/custom/img/act/act240119/save-close.png");
    background-size: 100% 100%;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
}
/*弹窗--截图加载*/
.snap-loading{
    width: 0.37rem;
    height: 0.37rem;
    background: url("/custom/img/act/act240119/loading.gif");
    background-size: 100% 100%;
}

/*转场*/
.lattern{
   width: 3rem;
   height: 3rem;
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
   pointer-events: none;
   top: 8.7rem;
}
.lattern-start{
    background: url("/custom/img/act/act240119/lattern-start.png");
    background-size: 100% 100%;
}
.lattern-start-2-one{
    background: url("/custom/img/act/act240119/trans/lattern-start-2-one.png");
    background-size: 1100% 100%;
    animation: l2s2o steps(10) 1s forwards;
}
@keyframes l2s2o {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-one-2-start{
    background: url("/custom/img/act/act240119/trans/lattern-one-2-start.png");
    background-size: 1100% 100%;
    animation: l2o2s steps(10) 1s forwards;
}
@keyframes l2o2s {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-one-2-two{
    background: url("/custom/img/act/act240119/trans/lattern-one-2-two.png");
    background-size: 1100% 100%;
    animation: l2o2t steps(10) 1s forwards;
}
@keyframes l2o2t {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-two-2-one{
    background: url("/custom/img/act/act240119/trans/lattern-two-2-one.png");
    background-size: 1100% 100%;
    animation: l2t2o steps(10) 1s forwards;
}
@keyframes l2t2o {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-two-2-three{
    background: url("/custom/img/act/act240119/trans/lattern-two-2-three.png");
    background-size: 1100% 100%;
    animation: l2t2t steps(10) 1s forwards;
}
@keyframes l2t2t {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-three-2-two{
    background: url("/custom/img/act/act240119/trans/lattern-three-2-two.png");
    background-size: 1100% 100%;
    animation: l2t2t1 steps(10) 1s forwards;
}
@keyframes l2t2t1 {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-three-2-four{
    background: url("/custom/img/act/act240119/trans/lattern-three-2-four.png");
    background-size: 1100% 100%;
    animation: l2t2f steps(10) 1s forwards;
}
@keyframes l2t2f {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-four-2-three{
    background: url("/custom/img/act/act240119/trans/lattern-four-2-three.png");
    background-size: 1100% 100%;
    animation: l2t2f steps(10) 1s forwards;
}
@keyframes l2f2t {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-four-2-five{
    background: url("/custom/img/act/act240119/trans/lattern-four-2-five.png");
    background-size: 1100% 100%;
    animation: l2f2f steps(10) 1s forwards;
}
@keyframes l2f2f {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-five-2-four{
    background: url("/custom/img/act/act240119/trans/lattern-five-2-four.png");
    background-size: 1100% 100%;
    animation: l2f2f1 steps(10) 1s forwards;
}
@keyframes l2f2f1 {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-five-2-six{
    background: url("/custom/img/act/act240119/trans/lattern-five-2-six.png");
    background-size: 1100% 100%;
    animation: l2f2s steps(10) 1s forwards;
}
@keyframes l2f2s {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-six-2-five{
    background: url("/custom/img/act/act240119/trans/lattern-six-2-five.png");
    background-size: 1100% 100%;
    animation: l2s2f steps(10) 1s forwards;
}
@keyframes l2s2f {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-six-2-seven{
    background: url("/custom/img/act/act240119/trans/lattern-six-2-seven.png");
    background-size: 1100% 100%;
    animation: l2s2s steps(10) 1s forwards;
}
@keyframes l2s2s {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-seven-2-six{
    background: url("/custom/img/act/act240119/trans/lattern-seven-2-six.png");
    background-size: 1100% 100%;
    animation: l2s2s1 steps(10) 1s forwards;
}
@keyframes l2s2s1 {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000% 0;
    }
}
.lattern-end{
    background: url("/custom/img/act/act240119/lattern-end.png");
    background-size: 100% 100%;
}

/*右上角分享*/
.weixin-share{
    width: 5.81rem;
    height: 4.18rem;
    background: url("/custom/img/act/act240119/go-share.png");
    background-size: 100% 100%;
    position: absolute;
    top: 1.5rem;
    left: 0.4rem;
}
.btn-copy{
    width: 1.5rem;
    height: 0.6rem;
    position: absolute;
    left: 3.2rem;
    top: 1.2rem;
}