@media only screen
and (max-width:1050px){
    /*animation:S*/
    @keyframes modal-pop {
        0% {
            top: 100vh;
        }
        100% {
            top: 0;
        }
    }

    @keyframes question-enter {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }


    @keyframes question-result-enter {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes summary-enter {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .modal-enter-active {
        animation: modal-pop .5s;
    }
    .modal-leave-active {
        animation: modal-pop .5s reverse;
    }


    .question-animate-enter-active{
        animation: question-enter .5s;
    }

    .question-animate-leave-active{
        display: none;
    }

    .question-result-animate-enter-active{
        animation: question-result-enter .3s;
    }

    .question-result-animate-leave-active{
        display: none;
    }

    .summary-animate-enter-active{
        animation: summary-enter 1s;
    }

    .summary-animate-leave-active{
        display: none;
    }


    /*animation:E*/

    .mask{
        /* position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: .7; */
    }

    .quiz-modal{
        position: fixed;
        z-index: 51;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background: #3ecaf0;
    }

    .quiz-modal .close-btn{
        font-size: 0;
        display: inline-block;
        width: 12vw;
        height: 12vw;
        background-image: url(assets/images/7-12/question/pc/3.png);
        position: absolute;
        right: 3.46vw;
        top: 5.6vw;
    }

    .quiz-modal .question-index{
        font-size: 14.4vw;
        line-height: 1em;
        text-align: center;
        margin-top: 23.73vw;
        position: relative;
        font-weight: bolder;
    }

    .quiz-modal .question-index:after{
        content: "";
        width: 36vw;
        height: 12.66vw;
        background-image: url(assets/images/7-12/question/pc/4.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: -14.4vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .quiz-modal .question-count{
        position: absolute;
        top: 20px;
        right: 10%;
        font-size: x-large;
        text-underline: yellow;
    }
    .quiz-modal .question-count:after {
        content: "";
        display: block;
        height: 0;
        border: 4px solid yellow;
        position: absolute;
        left: 0;
        right: 0;
        border-radius: 4px;
        z-index: 4;
    }

    .quiz-modal .question-content{
        width: 80vw;
        margin: 0 auto;
        font-size:5.6vw;
        line-height: 11.73vw;
        margin-top: 6.66vw; 
        /*single line align center; multiple lines align left*/
        display: flex;
        justify-content: center;
    }

    .quiz-modal .answer-list{
        text-align: center;
        margin-top: 4vw;
    }

    .quiz-modal .answer-list .answer-item{
        margin: 16px 10px;
        background-image: url(assets/images/images/bg_1.png);
        width: 76vw;
        line-height: 18vw;
        border-radius: 90px;
        display: inline-block;
        font-size: 5.06vw;
        position: relative;
        z-index: 51;
        cursor: pointer;
    }


    .quiz-modal .answer-list .answer-item::after{
        content: "";
        display: inline-block;
        width: 5.33vw;
        height: 5.33vw;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #3ecaf0;
        background-image: url(assets/images/sp/arrow_03.png);
        border-radius: 50%;
        border: 1vw solid #3ecaf0;
        position: absolute;
        top: 5vw;
        right: 5vw;
        z-index: 52;
    }

    .question-result{

    }

    .question-result .title{
        font-size: 12.53vw;
        font-weight: bolder;
        line-height: 1em;
        position: absolute;
        top: 59.4vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .question-result.result-correct .title{
        color: #ffff00;
    }

    .question-result .icon{
        position: absolute;
        top: 10.73vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .question-result .icon.icon-incorrect{
        width: 42.13vw;
        height: 42.13vw;
        background-image: url(assets/images/7-12/question/pc/1.png);
    }

    .question-result .icon.icon-correct{
        width: 42.13vw;
        height: 42.13vw;
        background-image: url(assets/images/7-12/question/pc/2.png);
    }

    .question-result-wrap{
        width: 75.46vw;
        margin: 80.73vw auto 0;
        border-radius: 13.33vw;
        background-image: url(assets/images/images/bg_1.png);
    }

    .question-result-wrap .question-result-answer{
        text-align: center;
        font-size: 5.06vw;
        line-height: 1em;
        padding-top: 10.66vw;
        padding-bottom: 7.2vw;
        font-weight: bolder;
    }

    .question-result-explain{
        width: 64.66vw;
        margin: 0 auto;
        font-size: 3.73vw;
        line-height: 8vw;
        padding-bottom: 8.8vw;
        /*single line align center; multiple lines align left*/
        display: flex;
        justify-content: center;
    }

    .question-result-actions{
        text-align: center;
        margin-top: 9.33vw;
        padding-bottom: 20vw;
    }

    .question-result-actions a{
        
        background-image: url(assets/images/images/bg_1.png);
        width: 75.46vw;
        line-height: 20vw;
        border-radius: 20vw;
        display: inline-block;
        font-size: 5.06vw;
        position: relative;
        z-index: 51;
        cursor: pointer;
    }

    .question-result-actions a::after{
        content: "";
        display: inline-block;
        width: 5.33vw;
        height: 5.33vw;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #3ecaf0;
        background-image: url(assets/images/sp/arrow_03.png);
        border-radius: 50%;
        border: 1vw solid #3ecaf0;
        position: absolute;
        top: 6vw;
        right: 5vw;
        z-index: 52;
    }

    .summary-title{
        text-align: center;
    }
    .summary-title .num{
        font-size: 12.33vw;
        font-weight: bolder;
        line-height: 1em;
        color: #ffff00;
        display: inline-block;
        position: absolute;
        top: 16.66vw;
        left: 29.06vw;
    }

    .summary-title .num.fullmark{
        left: 50%;
        transform: translateX(-50%);
    }

    .summary-title .text{
        font-size: 10.26vw;
        font-weight: bolder;
        line-height: 1em;
        display: inline-block;
        position: absolute;
        top: 18.26vw;
        left: 40vw;
    }

    .summary-level{
        text-align: center;
        margin-top: 108.53vw;
        margin-bottom: 5.33vw;
        
    }

    .summary-level .text{
        font-size: 5.2vw;
        line-height: 9.33vw;
        padding: 0 4vw;
        text-align: center;
        display: block;
        background: #ffff00;
        border-radius: 9.33vw;
        color: #3ecaf0;
        display: inline-block;
    }

    .summary-text{
        width: 74vw;
        font-size: 3.6vw;
        text-align: left;
        line-height: 2em;
        margin: 0 auto;
    }

    .summary-image .icon{
        position: absolute;
        top: 45.6vw;
        left: 50%;
        transform: translateX(-50%);
        height: 46.13333333333333vw;
        width: 92.26666666666667vw;
    }

    .summary-image .img1{
        background-image: url(assets/images/7-12/result/pc/3.png);
    }

    .summary-image .img2{
        background-image: url(assets/images/7-12/result/pc/5.png);
    }

    .summary-image .img3{
        background-image: url(assets/images/7-12/result/pc/7.png);
    }

    .summary-image .img4{
        background-image: url(assets/images/7-12/result/pc/2.png);
    }

    .summary-actions{
        text-align: center;
        margin-top: 6vw;
    }

    .summary-actions a{
        background-image: url(assets/images/images/bg_1.png);
        width: 75.46666666666667vw;
        height: 24.66666666666667vw;
        
        border-radius: 24.66666666666667vw;
        display: inline-block;
        position: relative;
        z-index: 51;
        cursor: pointer;
    }

    .summary-actions a .tw-icon{
        width: 16vw;
        height: 16vw;
        background-image: url(assets/images/7-12/result/pc/tw.png);
        position: absolute;
        top: 4.266666666666667vw;
        left: 5.333333333333333vw;
    }

    .summary-actions a .text{
        line-height: 8vw;
        font-size: 5.066666666666667vw;
        width: 54vw;
        display: block;
        position: absolute;
        left: 10vw;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
    }

    .summary-actions a::after{
        content: "";
        display: inline-block;
        width: 5.33vw;
        height: 5.33vw;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #3ecaf0;
        background-image: url(assets/images/sp/arrow_03.png);
        border-radius: 50%;
        border: 1vw solid #3ecaf0;
        position: absolute;
        top: 9vw;
        right: 4vw;
        z-index: 52;
    }
}