/* 반응형조건 responsive */
/* m(320~) -> t(1024~) -> d(1250~) */
@media screen and (min-width:580px) {
    #wrap .quiz_bg .quiz {
        flex-flow: row nowrap;/* t,d column -> row */
    }
    /* --------------------------------------------2행 퀴즈 */
    #wrap .quiz_bg .quiz .quiz_list {width: 220px;}
    #wrap .quiz_bg .quiz .quiz_status {flex:1;}
}
@media screen and (min-width:860px) {
    #wrap .intro {padding: 300px 0 100px;}
    /* ------------------------------------------------------------------------------2행 퀴즈 */
    #wrap .quiz_bg {padding: 150px 80px;}
    #wrap .quiz_bg .quiz .quiz_list {width: 360px;}
    #wrap .quiz_bg .quiz .quiz_list h1 {font-size: 2.5rem;}
    #wrap .quiz_bg .quiz .quiz_list h2 span {display: inline-block; font-size: 1.25rem;}
    #wrap .quiz_bg .quiz .quiz_list h2 span:nth-child(1) {margin-right: 6px;}
    #wrap .quiz_bg .quiz .quiz_list #quiz_frm ul {margin: 0 0 38px;}
    #wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li {margin: 0 0 38px;}
    #wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li label {
        font-size: 1.25rem; background-size: 28px; display: block;
        padding-left: 48px; line-height: 1.4;
    }
    #wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn { font-size: 1.25rem;}
    /* ----------------------------------------------------------------------------------3~6행공통 */
    #wrap .container {padding: 200px 80px;}
    #wrap .container .contents h1 {font-size: 2.5rem; margin: 0 0 40px;}
    #wrap .container .contents h1+p,
    #wrap .container .contents p {font-size: 1.38rem;}
    /* ----------------------------------------------------------------------------------3행 */
    #wrap .container .contents h1 {margin: 0 0 70px;}
    #wrap .video_bg .video iframe {height: 484px;}
    /* ------------------------------------------------------------------------------------5행 */
    #wrap .humanity_bg .humanity .list {flex-flow: row nowrap;}
    #wrap .humanity_bg .humanity .list li {flex:1;}
    #wrap .humanity_bg .humanity .list li dl {height: 320px;}
    #wrap .humanity_bg .humanity .list li dl dt {font-size: 2.69rem;}
    #wrap .humanity_bg .humanity .list li .txt {height: 250px;}
    #wrap .humanity_bg .humanity .list li .txt p {font-size: 1rem;}
     /* ---------------------------------------------------------------------9행 */
    #wrap .gift_bg .gift {text-align: right;}
    #wrap .gift_bg .gift .title {
        display: flex; flex-flow: row nowrap;
        justify-content: space-between; align-items: flex-end;
        margin:0 0 40px;
    }
    #wrap .gift_bg .gift .title h1 {margin: 0;}
    #wrap .gift_bg .gift .gift_list {
        grid-template-areas:
        'sponsor2 sponsor3'
        'sponsor5 sponsor5'
        ;
        grid-template-columns: 1fr 1fr;
    }
    #wrap .gift_bg .gift .gift_list li {text-align: center;}
    #wrap .gift_bg .gift .gift_list li h2,
#wrap .gift_bg .gift .gift_list li h2+p {font-size: 1.25rem;}
    #wrap .gift_bg .gift .gift_list li .photo {height: 300px;}
    #wrap .gift_bg .gift .gift_list li .photo img {width: 130%; transform: translate(-40px, 0);}
    #wrap .gift_bg .gift .info {font-size: 1.25rem;}
    /* ------------------------------------------------------------------10행 */
    #wrap .payment_bg .payment h1 {margin: 0; font-size: 1.38rem;}
    #wrap .payment_bg .payment h1+p {font-size: 1rem;}
}
@media screen and (min-width:1024px) {
    #wrap .intro {padding: 410px 0 100px;}
    #wrap .intro .logo {width: 32px;left: 36px; top:30px;}
    #wrap .intro h1 {margin: 0 0 100px;}
    #wrap .intro h1 span {font-size: 3.13rem; font-weight: 600;}
    #wrap .container .sponsor_btn {width: 238px; height: 60px;}
    #wrap .container .sponsor_btn em {font-size: 1.38rem;}
    #wrap .container .sponsor_btn::after {font-size: 1rem;}
    /* --------------------------------------------2행 퀴즈 */
    #wrap .quiz_bg .quiz .quiz_list {width: 500px;}
    /* -------------------------------------------------7행 */
    /* --------------------------------------------8행 */
    #wrap .activity_bg .activity .details {
        grid-template-areas:
            'public nature'
            'corporation nature';
        grid-template-columns: 1fr 1fr;
    }
    #wrap .activity_bg .activity .details li {position: relative; padding: 102px 0 30px;}
    #wrap .activity_bg .activity .details li .txt {width: 50%;}
    #wrap .activity_bg .activity .details li:nth-child(3) {background-position: center;}
    #wrap .activity_bg .activity .details li:nth-child(3) .txt {
        position: absolute;
        left: 0; bottom: 30px;
    }
    #wrap .activity_bg .activity .details li .txt dt {font-size:2.13rem; line-height: 1.7;}
    #wrap .activity_bg .activity .details li .txt dd {font-size: 1.25rem;}
    /* --------------------------------------------------------------------------------------9행 */
    #wrap .gift_bg {background-size: 120%;}
    #wrap .gift_bg .gift .title {margin-bottom: 70px;}
    #wrap .gift_bg .gift .title h1 {font-size: 3.44rem;}
    #wrap .gift_bg .gift {text-align: center;}
    #wrap .gift_bg .gift .gift_list {
        display: grid; gap: 45px;
        grid-template-areas:
            'sponsor2 sponsor3 sponsor5'
        ;
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom: 70px;
        }
    #wrap .gift_bg .gift .gift_list li .photo {height: 300px; overflow: hidden;}
    #wrap .gift_bg .gift .gift_list li .photo img {transform: translateY(0);}
    /* --------------------------------------------------------------------------------------10행 */
    #wrap .payment_bg {padding: 100px 0;}
    #wrap .payment_bg .payment h1 {font-size: 2.13rem; font-weight: 700;}
    #wrap .payment_bg .payment ul {}
    #wrap .payment_bg .payment ul li {font-size: 1.25rem; line-height: 1.7;}
}/* 1024~1249 */
@media screen and (min-width:1250px) {
    #wrap .intro {padding: 447px 0 100px;}
    #wrap .intro .logo {width: 42px; left: 61px; top:53px;}
    #wrap .intro h1 span {font-size: 4.38rem; line-height: 1.2;}
    #wrap .intro h1 span:nth-child(1) {font-weight: 400;}
    #wrap .intro h1 span:nth-child(2) {font-weight: 700;}
    #wrap .container .sponsor_btn {width: 409px; height: 71px;}
    #wrap .container .sponsor_btn em {font-size: 2.13rem;}
    #wrap .container .sponsor_btn::after {font-size: 2rem;}
    /* --------------------------------------------2행 퀴즈 */
    #wrap .quiz_bg .quiz .quiz_list {width: 600px;}
     /* ----------------------------------------------------------------------------------3~6행공통 */
    #wrap .container .contents h1 {font-size: 3.44rem; margin: 0 0 70px;}
    #wrap .container .contents h1+p,
    #wrap .container .contents p {font-size: 2.13rem; margin: 0 0 70px;}
    /* ----------------------------------------------------------------------------------3행 */
    #wrap .video_bg .video iframe {height: 600px;}
}/* 1250~max */