@media only screen
and (min-width:1050px){

    /*animation:S*/
    @keyframes modal-pop {
        0% {
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }
        50% {
            transform: translate(-50%, -50%) scale(1.2);
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    }

    @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: 50%;
        left: 50%;
        width: 860px;
        height: 600px;
        transform: translate(-50%, -50%) scale(1);
        background: #3ecaf0;
        border-radius: 45px;
        opacity: 1;
    }

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

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

    .quiz-modal .question-index:after{
        content: "";
        width: 135px;
        height: 47px;
        background-image: url(assets/images/7-12/question/pc/4.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: -54px;
        left: 50%;
        transform: translateX(-50%);
    }
    .quiz-modal .question-count {
        position: absolute;
        top: 20px;
        right: 190px;
        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: 580px;
        margin: 0 auto;
        font-size:26px;
        line-height: 2em;
        margin-top: 30px; 
        height: 165px;
        /*single line align center; multiple lines align left*/
        display: flex;
        justify-content: center;
    }

    .quiz-modal .answer-list{
        text-align: center;
    }

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


    .quiz-modal .answer-list .answer-item::after{
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        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: 6px solid #3ecaf0;
        transform: scale(.6) translateX(200px);
        position: absolute;
        top: 26px;
        right: 131px;
        z-index: 52;
    }

    .question-result{

    }

    .question-result .title{
        font-size: 47px;
        font-weight: bolder;
        line-height: 1em;
        position: absolute;
        top: 100px;
        left: 467px;
    }

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

    .question-result .icon{
        position: absolute;
        top: 44px;
        left: 255px;
    }

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

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

    .question-result-wrap{
        height: 230px;
        width: 740px;
        margin: 230px auto 0;
        border-radius: 96px;
        background-image: url(assets/images/images/bg_1.png);
    }

    .question-result-wrap .question-result-answer{
        text-align: center;
        font-size: 25px;
        line-height: 1em;
        padding-top: 48px;
        padding-bottom: 32px;
        font-weight: bolder;
    }

    .question-result-explain{
        width: 660px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 28px;
        /*single line align center; multiple lines align left*/
        display: flex;
        justify-content: center;
    }

    .question-result-actions{
        text-align: center;
    }

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

    .question-result-actions a::after{
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        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: 6px solid #3ecaf0;
        transform: scale(.6) translateX(200px);
        position: absolute;
        top: 26px;
        right: 131px;
        z-index: 52;
    }

    .summary-title{
        text-align: center;
    }
    .summary-title .num{
        font-size: 70px;
        font-weight: bolder;
        line-height: 1em;
        color: #ffff00;
        display: inline-block;
        position: absolute;
        top: 21px;
        left: 325px;
    }

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

    .summary-title .text{
        font-size: 43px;
        font-weight: bolder;
        line-height: 1em;
        display: inline-block;
        position: absolute;
        top: 41px;
        left: 382px;
    }

    .summary-level{
        text-align: center;
        margin-top: 345px;
        margin-bottom: 20px;
    }

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

    .summary-text{
        width: 700px;
        font-size: 16px;
        text-align: left;
        line-height: 2em;
        margin: 0 auto;
    }

    .summary-image .icon{
        position: absolute;
        top: 96px;
        left: 50%;
        transform: translateX(-50%);
    }

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

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

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

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

    .summary-actions{
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: 4px;
    }

    .summary-actions a{
        margin: 16px 10px;
        background-image: url(assets/images/images/bg_1.png);
        width: 210px;
        height: 66px;
        
        border-radius: 66px;
        display: inline-block;
        font-size: 20px;
        position: relative;
        z-index: 51;
        cursor: pointer;
    }


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

    .summary-actions a .text{
        line-height: 20px;
        font-size: 13px;
        text-align: center;
        width: 70%;
        display: block;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }


    .summary-actions a::after{
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        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: 6px solid #3ecaf0;
        transform: scale(.6) translateX(200px);
        position: absolute;
        top: 13px;
        right: 123px;
        z-index: 52;
    }


}