/*// 공통 관련 ///////////////////////////////////////////////*/
@media all {
    .section{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0px 0px 0px 0px;
        background: url(./img/bg.png) no-repeat 0 0;
    }
    .quiz_con{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        padding: 53px 0px 0px 0px;
    }
    .quiz{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 10px 20px 0px 20px;
        display: none;
    }    
    .quiz.active{
        display: block;
    }
    .quiz.finished button{
        pointer-events: none;
    }
}

/* pop 관련 */
@media all{
    .pop_con{
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .pop{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 1280px;
        height: 0px;
        padding: 0 0 0 0;
        background: rgba(0,0,0,0.5);
        transition: all 0.2s;
        display: block;
        overflow: hidden;
    }
    .pop.active {
        height: 720px;
    }
    .pop .pop_inner{
        position: relative;
        display: block;
        margin: 40px auto 0;
        padding: 14px 25px 50px 25px;
        width: 1014px;
        height: 599px;
        text-align: center;
        background: url(./img/pop_con.png) no-repeat 0 0;
    }
    .pop_inner .title{
        font-family: "Tenada";
        position: relative;
        display: block;
        margin: 47px 0 0 0;
        font-weight: 900;
        font-size: 4.625rem;
        color: #627cf3;
        text-align: center;
        /* top: 60px; */
    }
    .pop_inner img{
        position: relative;
        margin: 5px auto 0;
    }
    .pop_inner .exp{
        position: absolute;
        left: 26px;
        bottom: 95px;
        min-height: 152px;
        padding: 30px 50px 30px;
        width: calc(100% - 52px);
        font-size: 2.375rem;
        color: #2d2d2d;
        letter-spacing: -1px;
        line-height: 1.2;
        text-align: center;
        background: #fefaba;
    }
    .pop_con .pop:nth-child(2) .pop_inner img{
        margin: -10px auto 0;
    }
}   

/* btns_wrap 관련*/
@media all{
    .quiz .btns_wrap{
        position: relative;
        display: block;
        margin: 170px auto 150px;
        text-align: center;
        padding: 0 0 0 0;
    }
    .btns_wrap button{
        display: inline-block;
        margin: 0 14px 0;
        width: 312px;
        height: 321px;
        background: url(./img/btn_1_1.png) no-repeat 0 0;
    }
    .btns_wrap button:nth-child(2){
        background: url(./img/btn_1_2.png) no-repeat 0 0;
    }
    .btns_wrap button:last-child{
        background: url(./img/btn_1_3.png) no-repeat 0 0;
    }
    .btns_wrap button:hover{
        background-position-y: -321px;
    }
    .btns_wrap button.end{
        pointer-events: none;
        cursor: none;
        background-position-y: -642px;
    }
}


/* container, note 관련 */
@media all{
    .quiz .container{
        /* position: relative; */
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
        margin: 0px 0px;
        padding: 20px 130px 20px 70px;
    }

    .container .note_con{
        position: relative;
        margin: -50px 45px 0 20px;
        padding: 61px 13px 20px;
        width: 506px;
        height: 463px;
        background: url(./img/note_bg.png) no-repeat 0 0;
    }

    .note_con .title{
        position: relative;
        margin: 0px;
        left: -31px;
    }
    .note_con p{
        position: relative;
        margin: 23px 20px 0px 55px;
        font-size: 2.125rem;
    }
    .note_con .sub_title::after{
        position: relative;
        position: absolute;
        display: inline-block;
        content: '';
    }
    .note_con .sub_title[data-icon="sun"]::after{        
        top: -10px;
        margin-left: 14px;
        width: 52px;
        height: 52px;
        background: url(./img/icon_sun.png) no-repeat 0 0;
    }
    .note_con .sub_title[data-icon="cloud"]::after{
        top: -5px;
        margin-left: 14px;
        width: 50px;
        height: 41px;
        background: url(./img/icon_cloud.png) no-repeat 0 0;
    }
    .note_con .sub_title[data-icon="snow"]::after{
        top: -12px;
        margin-left: 14px;
        width: 43px;
        height: 50px;
        background: url(./img/icon_snow.png) no-repeat 0 0;
    }
    p .under{
        position: relative;
        display: inline-block;
        line-height: 0.5;
        border-bottom: 7px inset #ffeea1;
    }    
}

/* mobile 관련 */
@media all{
    .container .mobile_con{
        position: relative;
        margin: 0 0px 0 100px;
        padding: 253px 27px 95px 24px;
        width: 372px;
        height: 633px;
        background: url(./img/mobile.png) no-repeat 0 0;
    }
    .mobile_con .list_con{
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 15px 11px 0px 11px;
        min-height: 72px;
        border-bottom: 3px solid #a1b2ff;
    }
    .list_con .list{
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0 0 0 0;
        width: 48%;
        min-height: 37px;
    }
    .list img{

    }
    .list p{
        margin: 0 0 0 10px;
        font-size: 1.8125rem;
        letter-spacing: -2px;
        line-height: 1.3;
        color: #2d2d2d;
    }

    .list_con button{
        width: 75px;
        height: 42px;
        background: url(./img/btn_on.png) no-repeat 0 0;
    }
    .list_con button:last-child{
        background: url(./img/btn_off.png) no-repeat 0 0;
    }
    .list_con button:hover,
    .list_con button.active{
        background-position-y: -42px;
    }
    .list_con.dis button{
        pointer-events: none;
        cursor: none;
    }
}