@charset "UTF-8";




.bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6,
.bg7,
.bg8,
.bg9 {
    width: 101vw !important;
    height: 216vw !important;
    left: 0vw !important;
    top: 0vw !important;
    position: absolute;
    z-index: -1;
}

.bg1 {
    background: url(../img_pop/bg1.png) no-repeat 100% / 100%;
}

.bg2 {
    background: url(../img_pop/bg2.png) no-repeat 100% / 100%;
}

.bg3 {
    background: url(../img_pop/bg3.png) no-repeat 100% / 100%;
}

.bg4 {
    background: url(../img_pop/bg4.png) no-repeat 100% / 100%;
}

.bg5 {
    background: url(../img_pop/bg5.png) no-repeat 100% / 100%;
}

.bg6 {
    background: url(../img_pop/bg6.png) no-repeat 100% / 100%;
}

.bg7 {
    background: url(../img_pop/bg7.png) no-repeat 100% / 100%;
}

.bg8 {
    background: url(../img_pop/bg8.png) no-repeat 100% / 100%;
}





.pop_poster .pop_poster_qrcode {
    background: url(../img_pop/guanfang.jpg)  no-repeat 100% / 100%;
    /* left: 90.5868vw !important; */
    width: 72px !important;
    height: 72px !important;
    left: 646px !important;
    top: 1317px !important;
}

.pop_poster .poster1 {
    /* background: url(../img_pop/poster1.png) no-repeat 100% / 100%; */
}

.pop_poster .poster2 {
    /* background: url(../img_pop/poster2.png) no-repeat 100% / 100%; */
}

.pop_poster .poster3 {
    /* background: url(../img_pop/poster3.png) no-repeat 100% / 100%; */
}

.pop_poster .poster4 {
    /* background: url(../img_pop/poster4.png) no-repeat 100% / 100%; */
}

.pop_poster .poster9 {
    /* background: url(../img_pop/poster9.png) no-repeat 100% / 100%; */
}

.pop_poster .poster10 {
    /* background: url(../img_pop/poster10.png) no-repeat 100% / 100%; */
}

.pop_poster .poster11 {
    /* background: url(../img_pop/poster11.png) no-repeat 100% / 100%; */
}

.pop_poster .poster12 {
    /* background: url(../img_pop/poster12.png) no-repeat 100% / 100%; */
}

.pop_poster .poster13 {
    /* background: url(../img_pop/poster13.png) no-repeat 100% / 100%; */
}

.pop_poster .poster14 {
    /* background: url(../img_pop/poster14.png) no-repeat 100% / 100%; */
}

.pop_poster .poster15 {
    /* background: url(../img_pop/poster15.png) no-repeat 100% / 100%; */
}

.pop_poster .poster16 {
    /* background: url(../img_pop/poster16.png) no-repeat 100% / 100%; */
}


.pop_poster .poster {
    position: absolute !important;
    width: 100vw !important;
    height: 191.466667vw !important;
    left: 300vw !important;
    top: 0vw !important;
    width: 750px !important;
    height: 1436px !important;
    display: block;
}

.pop_poster .poster_title {
    top: 8vw !important;
    transform: scale(1.2);
}

.pop_poster .poster_bg {
    position: absolute !important;
    background: url(../img_pop/poster_bg.png) no-repeat;
    background-size: cover;
    width: 100.000000vw !important;
    height: 100vh !important;
    height: 100dvh  !important;
    left: 0.000000vw !important;
    top: 0.000000vw !important;
    display: block;
    
}
.page_answer {
    position: fixed !important;
    left: 0;
    /* top: calc(0px + env(safe-area-inset-top)); */
    width: 100vw;
    height: 100vh;
    /* height: 100dvh; */
    overflow: hidden;
    will-change: opacity, transform;
    transform: translateZ(0);
}
.pop_poster .btn_enjoy {
    top: 150vw !important;
}


.pop_poster .btn_back {
    top: 150vw !important;
}

.pop_poster .poster_tip {
    top: 145vw !important;
}

.btn_music_on {
    position: absolute !important;
    background: url(../img_home/btn_music_on.png) no-repeat 100% / 100%;
    width: 10vw !important;
    height: 10vw !important;
    right: 3vw !important;
    top: 6vw !important;
    display: block;
    z-index: 2010!important;
}


.btn_music_off {
    background: url(../img_home/btn_music_off.png) no-repeat 100% / 100%;
}

.music1.btn_music_on {
    background: url(../img_pop/btn_music_on.png) no-repeat 100% / 100%;
    left: 3vw !important;
    z-index: 2010!important;
}

.music1.btn_music_off {
    background: url(../img_pop/btn_music_off.png) no-repeat 100% / 100%;
    left: 3vw !important;
    z-index: 2010!important;
}

.music2.btn_music_on {
    background: url(../img_config/btn_music_on.png) no-repeat 100% / 100%;
    left: 3vw !important;
    z-index: 2010!important;
}

.music2.btn_music_off {
    background: url(../img_config/btn_music_off.png) no-repeat 100% / 100%;
    left: 3vw !important;
    z-index: 2010!important;
}

.pop_poster .bg_black {
    position: absolute !important;
    width: 100vw !important;
    height: 103vh !important;
    left: 0vw !important;
    top: 0vw !important;
    display: block;
    z-index: 2003;
    background: url(../img_pop/bg_black.png);
}


.qrcode{
    /* background: url(../img_pop/qrcode.png) no-repeat 100% / 100%; */
    position: absolute !important;
    width: 12vw !important;
    height: 12vw !important;
    right: 6.2vw !important;
    bottom: 7vw !important;
    display: block;
    z-index: 2003;
}

.pop_poster_saveimg1,.pop_poster_saveimg {
    width: 100.000000vw !important;
    height: 191.466667vw !important;
    left: 0.000000vw !important;
    top: 0.000000vw !important;
    display: block;
    z-index: -1;
    margin-top: -58px;
    /* transform: scale(0.7); */
    /* border: 5px solid black; */
    /* solid color: black;
    background-color: unset;
    outline: 5px solid #000; 创建一个外部轮廓 */
    /* outline-offset: -3px; */
    /* 将轮廓向内偏移 */
    /* box-shadow: inset 0 0 0 3px #000; */
    /* 内阴影模拟内部描边 */
}
.pop_poster_saveimg1{
    left: -1000vw !important;
    position: absolute;
}


/**
* ====================================================
* 按钮
* ====================================================
*/

.page_answer1 .answer1_A {
    position: absolute !important;
    background: url(../img_pop/answer1_A.png) no-repeat 100% / 100%;
    width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer1 .answer1_B {
    position: absolute !important;
    background: url(../img_pop/answer1_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}



.page_answer2 .answer2_A {
    position: absolute !important;
    background: url(../img_pop/answer2_A.png) no-repeat 100% / 100%;
    width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer2 .answer2_B {
    position: absolute !important;
    background: url(../img_pop/answer2_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}


.page_answer3 .answer3_A {
    position: absolute !important;
    background: url(../img_pop/answer3_A.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer3 .answer3_B {
    position: absolute !important;
    background: url(../img_pop/answer3_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}


.page_answer4 .answer4_A {
    position: absolute !important;
    background: url(../img_pop/answer4_A.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer4 .answer4_B {
    position: absolute !important;
    background: url(../img_pop/answer4_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}



.page_answer5 .answer5_A {
    position: absolute !important;
    background: url(../img_pop/answer5_A.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer5 .answer5_B {
    position: absolute !important;
    background: url(../img_pop/answer5_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}



.page_answer6 .answer6_A {
    position: absolute !important;
    background: url(../img_pop/answer6_A.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer6 .answer6_B {
    position: absolute !important;
    background: url(../img_pop/answer6_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}


.page_answer7 .answer7_A {
    position: absolute !important;
    background: url(../img_pop/answer7_A.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer7 .answer7_B {
    position: absolute !important;
    background: url(../img_pop/answer7_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}


.page_answer8 .answer8_A {
    position: absolute !important;
    background: url(../img_pop/answer8_A.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 73vw;
    display: block;
}


.page_answer8 .answer8_B {
    position: absolute !important;
    background: url(../img_pop/answer8_B.png) no-repeat 100% / 100%;
     width: 88.2vw;
    height: 23.16vw;
    left: 5vw;
    top: 97vw;
    display: block;
}

.page_answer1,
.page_answer2,
.page_answer3,
.page_answer4,
.page_answer5,
.page_answer6,
.page_answer7,
.page_answer8 {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    /* top: calc(0px + env(safe-area-inset-top)); */
    width: 100vw !important;
    height: 100vh !important;
    /* height: 100dvh !important; */
    will-change: opacity;
    transform: translateZ(0);
}


.pop_poster_scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
}