*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,html{
    width: 100%;
    height: 100%;
}

#canvas{
    width: 100%;
    height: 100%;
}
.wrap{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
}

/*--------------------------common----------------------------------*/

@keyframes bgmBtnRotate {
    100%{
        transform: rotate(360deg);
    }
}
.music-control{
    width: 6vw;
    height: 6vw;
    background-image: url("./imgs/bgmbtn.png");
    background-size: auto 100%;
    background-position: 0 0;
    position: fixed;
    z-index: 75;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    border: 1px solid #a54f40;
    animation: bgmBtnRotate 5s linear infinite;

}
.music-control.close{
    background-position: 100% 0;
    background-size: auto 100%;
    animation: none;
}

.btn{
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.page{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.wave:before{
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #a54f40;
    border-radius: 50%;
    transform-origin: center center;
    transform: scale(0);
    animation: circleMove 1.8s infinite;
}
.wave:after{
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #a54f40;
    border-radius: 50%;
    transform-origin: center center;
    transform: scale(0);
    animation: circleMove 1.8s infinite 0.5s;
}
@keyframes circleMove {
    80%{
        opacity: 0.8;
    }
    100%{
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes figherMove {
    50%{
        transform: translateX(10px);
    }
}
.finger-tip{
    position: absolute;
    width: 8vw;
    animation: figherMove 1s infinite linear;
}

/*--------------------------loading----------------------------------*/
.page.loading{
    background: #fff;
    z-index: 100;
    background: url("./imgs/keywordsbg.jpg") center center no-repeat;
    background-size: 100% 100%;
}

.page.loading .page-loading-inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #a54f40;
    font-size: 14px;
}



#start{
    width: 32.53vw;
    height: 9.46vw;
    background: url("./imgs/startBtn.png") center center no-repeat;
    background-size: 100%;
    margin-top: 10vw;
    display: none;
}
.page.loading .page-loading-inner img.fire-gif{
    width: 20vw;
    position: absolute;
    bottom: 30vw;
}
.page.loading .page-loading-inner img.logo{
    width: 15vw;
    position: absolute;
    top: 20vw;
}

.loading-cglogo{
    position: absolute;
    width: 32vw;
    left: 34vw;
    bottom: 5vw
}

/*--------------------------animation----------------------------------*/
.page.animation{
    z-index:70;
}

/*---------------------------menu------------------------------------*/
.page.menu{
    background: #e7d9be url("//cbgccdn.thecover.cn/@/images/20210224/1614168862340073581.jpg") center top no-repeat;
    background-size: 100% auto;
    position: relative;
    z-index: 20;
    /*display: none;*/
}

.page.menu .circle{
    width: 9vw;
    height: 9vw;
    /*background: bisque;*/
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.page.menu .circle.circle1{
    left: 40.7vw;
    top: 25.25vw;
}

.page.menu .circle.circle2{
    left: 21.25vw;
    top: 69.85vw;
}

.finger-tip-menu{
    left:9vw;
    top: 72vw;
    opacity: 0.5;
}

.page.menu .circle.circle3{
    left: 70.85vw;
    top: 44.25vw;
}


@keyframes buttonScale {
    50%{
        transform: scale(0.9);
    }
}
.page.menu .btn.btn-go-select{
    position: absolute;
    top: 150vw;
    width: 50.4vw;
    height: 9.46vw;
    left: 25vw;
    background: url('./imgs/btn-select.png') center center no-repeat;
    background-size: 100% 100%;
    animation: buttonScale 0.7s infinite linear;
    display: none;
}

.finger-tip-go-select{
    left: 18vw;
    top:152vw;
    display: none;
}

/*-------------------------huiju---------------------*/
.page.huiju{
    background: #e7d9be url("//cbgccdn.thecover.cn/@/images/20210224/1614175531129023629.jpg") center top no-repeat;
    background-size: 100% 100%;
    display: none;
    position: absolute;
    z-index: 25;
}
@keyframes fireScale {
    50%{
        transform: scale(0.9);
    }
}
.page.huiju .huiju-fire-btn{
    position: absolute;
    width: 8vw;
    animation: fireScale 1s linear infinite;
}
.page.huiju .huiju-fire-btn.h0{
    left: 55%;
    top: 24%;
}
.page.huiju .huiju-fire-btn.h1{
    left: 21%;
    top: 58%;
}
.page.huiju .huiju-fire-btn.h2{
    left: 55%;
    top: 58%;
}
.page.huiju .huiju-fire-btn.h3{
    left: 88%;
    top: 86%;
}
.page.huiju .huiju-tip{
    width: 57.46vw;
    position: absolute;
    left: 22%;
    top: 33%;
}
.page.huiju .huiju-back-btn{
    width: 20vw;
    position: absolute;
    right: 10px;
    top: 10px;
}

/*-------------------------video-----------------------*/
.page.video{
    z-index: 80;
    display: none;
    background: black;
}
.page.video video{
    position: relative;
    z-index: 35;
    outline: none;
}
.page.video .video-mask{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(12,156,0,.3);*/
    z-index: 36;
    display: none;
}

.page.video .video-mask .mask-content{
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}
.page.video .video-mask .mask-content .dot{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.page.video .video-mask .mask-content .dot .click-item{
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dot .click-item.click-wave-btn{
    width: 9vw;
    height: 9vw;
    background: url("./imgs/cilck-circle.png") center center no-repeat;
    background-size: 100% 100%;
}
.dot .click-item.click-wave-btn:before{
    border: 1px solid #fff;
}
.dot .click-item.click-wave-btn:after{
    border: 2px solid #fff;
}
@keyframes shake-horizontal {
    12.5%{
        transform: translateX(-5px);
    }
    25%{
        transform: translateX(0px);
    }
    37.5%{
        transform: translateX(5px);
    }
    50%{
        transform: translateX(0px);
    }
    62.5%{
        transform: translateX(-5px);
    }
    75%{
        transform: translateX(0px);
    }
    87.5%{
        transform: translateX(5px);
    }
    100%{
        transform: translateX(0px);
    }
}
.click-item-error{
    animation: shake-horizontal 0.3s;
}


/*涅槃*/
/*0*/
.dot .click-item.click-tip-niepan-1{
    left: 31vw;
    width: 44.93vw;
    top: 20vw;
}
.dot .click-item.niepan0-btn:nth-of-type(1){
    left: 21%;
    top: 23%;
}
.dot .click-item.niepan0-btn:nth-of-type(2){
    left: 77%;
    top: 40%;
}
.dot .click-item.niepan0-btn:nth-of-type(3){
    left: 52%;
    top: 77%;
}

/*1*/
.dot .click-item.niepan1-btn{
    left: 55%;
    top: 28%;
}
.dot .click-item.click-tip-qiuyi{
    width: 38.4vw;
    left: 42%;
    top: 36%;
}


/*2*/
.dot .click-item.click-tip-niepan-3{
    width: 44.8vw;
    left: 29vw;
    top: 42vw;
    /*height: 10vw;*/
}
.dot .click-item.answer{
    top: 60vw;
    width: 21.6vw;
}
.dot .click-item.answer.a_xichang{
    left: 8vw;
}
.dot .click-item.answer.a_meigu{
    left: 39vw;
}
.dot .click-item.answer.a_zhaojue{
    left: 71vw;
}

/*温暖*/
.dot .click-item.click-tip-wennuan-1{
    width: 57vw;
    left: 21.5vw;
    top: 42vw;
}
.dot .click-item.answer.a_red{
    left: 8vw;
}
.dot .click-item.answer.a_yellow{
    left: 39vw;
}
.dot .click-item.answer.a_black{
    left: 71vw;
}

.dot .click-item.click-tip-wennuan-2{
    width: 68.66vw;
    left: 16vw;
    top: 21vw;
}
.dot .click-item.answer.a_children{
    left: 16vw;
    width: 25.6vw;
    top: 38vw;
}
.dot .click-item.answer.a_huoba{
    left: 58vw;
    width: 25.6vw;
    top: 38vw;
}

.page.video .btn.btn-video-skip{
    position: absolute;
    top: 10px;
    right: 20px;
    width: 20vw;
    height: 7.5vw;
    background: url("./imgs/skipBtn.png") center center no-repeat;
    background-size: 100% 100%;
    z-index: 37;
}

/*--------------------------select-----------------------------*/
.page.select{
    background: url("./imgs/keywordsbg.jpg") center center no-repeat;
    background-size: 100% 100%;
    display: none;
    z-index: 40;
}
@keyframes shake {
    2% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    4% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    6% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    8% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    10% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    12% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    14% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    16% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    18% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    20% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    22% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    24% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    26% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    28% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    30% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    32% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    34% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    36% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    38% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    40% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    42% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    44% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    46% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    48% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    50% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    52% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    54% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    56% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    58% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    60% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    62% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    64% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    66% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    68% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    70% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    72% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    74% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    76% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    78% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    80% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    82% {
        transform: translate(1px, 0px) rotate(0.5deg); }
    84% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    86% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    88% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    90% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    92% {
        transform: translate(0px, 1px) rotate(0.5deg); }
    94% {
        transform: translate(0px, 0px) rotate(0.5deg); }
    96% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    98% {
        transform: translate(1px, 1px) rotate(0.5deg); }
    0%, 100% {
        transform: translate(0, 0) rotate(0); } }



.page.select .finger-tip-select{
    position: absolute;
    left: 29.2vw;
    top: 27.93vw;
}
.page.select .s-item{
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.s-item.s-hl{
    width: 11.46vw;
    left: 5.2vw;
    top:16.93vw;
    animation: shake 5s infinite 0.3s;
}
.s-item.s-wn{
    width: 12.26vw;
    left: 27.73vw;
    top: 12.93vw;
    animation: shake 5s infinite 0.1s;
}
.s-item.s-hx{
    width: 12.26vw;
    left: 46vw;
    top: 12.66vw;
    animation: shake 5s infinite 0.15s;

}
.s-item.s-jq{
    width: 12.26vw;
    left: 40.8vw;
    top: 26.667vw;
    animation: shake 5s infinite ;
}

.s-item.s-cy{
    width: 11.6vw;
    left: 66.93vw;
    top: 29.73vw;
    animation: shake 5s infinite 0.35s;
}

.s-item.s-jm{
    width: 11.86vw;
    left: 15.6vw;
    top: 44.66vw;
    animation: shake 5s infinite 0.05s;
}
.s-item.s-dq{
    width: 12vw;
    left: 38.4vw;
    top: 39.86vw;
    animation: shake 5s infinite 0.2s;
}
.s-item.s-sj{
    width: 12.26vw;
    left: 62.53vw;
    top: 43.73vw;
    animation: shake 5s infinite 0.25s;
}
.s-item.s-xy{
    width: 11.6vw;
    left: 82.4vw;
    top: 51.73vw;
    animation: shake 5s infinite 0.18s;
}

.s-item.s-zq{
    width: 11.6vw;
    left: 8vw;
    top: 63.73vw;
    animation: shake 5s infinite 0.122s;
}
.s-item.s-jy{
    width: 12.4vw;
    left: 29.73vw;
    top: 58.66vw;
    animation: shake 5s infinite 0.2548s;
}
.s-item.s-sz{
    width: 9.46vw;
    left: 52.8vw;
    top: 57.46vw;
    animation: shake 5s infinite 0.27s;
}

.s-item.s-xf{
    width: 10.8vw;
    left: 30.4vw;
    top: 73.86vw;
    animation: shake 5s infinite 0.17s;
}

.s-item.s-rn{
    width: 12.13vw;
    left: 52.4vw;
    top: 72.53vw;
    animation: shake 5s infinite 0.27s;
}

.s-item.s-jx{
    width: 10.93vw;
    left: 76.4vw;
    top: 77.06vw;
    animation: shake 5s infinite 0.37s;
}

.s-item.s-fj{
    width: 12.13vw;
    left: 20.4vw;
    top: 94.66vw;
    animation: shake 5s infinite 0.32s;
}

.s-item.s-cc{
    width: 12.53vw;
    left: 44.13vw;
    top: 90vw;
    animation: shake 5s infinite 0.255s;
}
.s-item.s-pb{
    width: 12.4vw;
    left: 66.4vw;
    top: 92.66vw;
    animation: shake 5s infinite 0.05s;
}
.page.select .select-back-btn{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 18.26vw;
    height: 6.8vw;
    background: url("./imgs/backBtn.png") center center no-repeat;
    background-size: 100% 100%;
}

.page.select .select-tip{
    position: absolute;
    width: 61.2vw;
    height: 16.6vw;
    bottom: 47vw;
    left: 19vw;
}

.select-logo{
    position: absolute;
    width: 12.8vw;
    left: 43.6vw;
    bottom: 8vw;
}


.page.select .poster-container{
    position: fixed;
    z-index: 41;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,.8);*/
    display: none;
}
.poster-container-inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #111;
}

.poster-box {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    line-height: 0;
}

.poster-box img{
    width: 100%;
    box-shadow: 0 0 12px 2px rgba(0,0,0,.8);
}

.poster-box .btn.btn-close{
    position: absolute;
    background: url("./imgs/close-btn.png");
    width:9.3vw;
    height:9.3vw;
    left: 50%;
    bottom: 0;
    margin-bottom: -4.65vw;
    margin-left: -4.65vw;
    background-size: 100% 100%;
    box-shadow: 0 0 12px 2px rgba(0,0,0,.8);
    border-radius: 50%;
}
.poster-box .poster-tip{
    position: absolute;
    left: 0;
    bottom: -14px;
    font-size: 12px;

}