/* 반응형조건 responsive */
/* m(320~) -> t(1024~) -> d(1250~) */
@media screen and (min-width:680px) {
    #wrap .quiz_bg .quiz {
        flex-flow: row nowrap;
    }
    #wrap .quiz_bg .quiz > * {flex: 1;} /* 양쪽 같은 비율로 반응하게 하기. */
/*     #wrap .quiz_bg .quiz .quiz_list {width: 200px;}
    #wrap .quiz_bg .quiz .quiz_status {flex: 1;} */
}
@media screen and (min-width:860px) { /* ====================================================================860==================== */
    #wrap .intro {padding: 300px 0 100px;}
    /* 3-6행 공통 */
    #wrap .container {padding: 200px 80px;}
    #wrap .container .contents h1 {font-size: 2.5rem; margin: 0 0 40;}
    #wrap .container .contents h1+p {font-size: 1.38rem;}
    /* 3행----------------------------------- */
    #wrap .container .contents h1 {margin: 0 0 70px;}
    #wrap .video_bg .video iframe {height:400px;}
    /* 3행----------------------------------- */
    #wrap .container .contents h1 .highlight {font-size: 2.5rem;}
    /* --------------------------------5행---------------------------- */
    #wrap .humanity_bg .humanity h1+p {margin: 0 0 40px;}
    #wrap .humanity_bg .humanity .list {flex-flow: row nowrap;}
    #wrap .humanity_bg .humanity .list li {flex: 1;}
    #wrap .humanity_bg .humanity .list li dl dt {font-size: 2.69rem;}
    #wrap .humanity_bg .humanity .list li .txt p {font-size: 1rem;}
    #wrap .humanity_bg .humanity .list li .txt {height: 250px;}
    /* ----------------------------------------9행-------------------- */
    #wrap .gift_bg .gift .title h1 {margin-bottom: 0;}
    #wrap .gift_bg .gift .title {flex-flow: row nowrap; 
        justify-content: space-between; 
        align-items: flex-end;
    }
    #wrap .gift_bg .gift .title .sponsor_btn {width: 270px; height: 62px;}
    #wrap .gift_bg .gift .title .sponsor_btn em {font-size: 1.38rem; font-weight: 700;}
    #wrap .container .sponsor_btn::after {font-size: 2rem;}
    #wrap .gift_bg .gift .gift_list {
        grid-template-areas:
        'sponser2 sponser3'
        'sponser4 sponser4'
        ;
    }
}
@media screen and (min-width:1024px) {/* ====================================================================1024==================== */
    #wrap .intro {padding: 410px 0 100px;}
    #wrap .intro .logo {width: 32px;left: 36px; top: 30px;}
    #wrap .intro h1 span {font-size: 3.13rem;}
    #wrap .intro h1 {margin:0 0 100px;}
    #wrap .container .sponsor_btn {width: 238px; height: 60px;}
    #wrap .container .sponsor_btn::after {font-size: 1rem;}
    #wrap .container .sponsor_btn em {font-size: 1.38rem;}
    /* --------------------2행 퀴즈----------------------------- */
    #wrap .quiz_bg {padding: 150px;}
    #wrap .quiz_bg .quiz {flex-flow: row nowrap; gap: 100px;}
    #wrap .quiz_bg .quiz .quiz_list h1 {font-size: 2.5rem;}
    #wrap .quiz_bg .quiz .quiz_list h2 span {font-size: 1.25rem; display: inline;}
    #wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li label {font-size: 1.25rem; 
        background-size: 28px; 
        line-height: 2; display: 
        block;
    }
    /* --------4행--------------------------------------------------------- */
    #wrap .container .contents h1 .highlight {
        background-color: #fff; color: #050505; 
        font-size: 2.5rem; font-weight: 500;
    }
    #wrap .container .contents h1+p {
        font-size: 1.38rem; font-weight: 700;
        line-height: 1.2; letter-spacing: 0rem;
    }
    #wrap .container .reduction > * {margin: 0 0 40px;}
    /* ------------------------5행---------------------------------------------- */
    #wrap .humanity_bg .humanity .list li dl {height: 320px;}
    #wrap .humanity_bg .humanity .list li dl dt {font-weight: 700;}
    /* ------------------------8행---------------------------------------------- */
    #wrap .activity_bg .activity .details {
        grid-template-areas:
            'public nature' 
            'corperation nature';
        grid-template-columns: 1fr 1fr;
    }
    #wrap .activity_bg .activity .details li {position:relative ; padding-bottom: 30px;}
    #wrap .activity_bg .activity .details li .txt {width: 50%;}
    #wrap .activity_bg .activity .details li:last-child .txt {position: absolute; left: 0; bottom: 30px;}
    #wrap .activity_bg .activity .details li .txt dt {}
    #wrap .activity_bg .activity .details li .txt dd {}
    /* ------------------------9행---------------------------------------------- */
    #wrap .gift_bg .gift .title h1 {margin-bottom: 0;}
    #wrap .gift_bg .gift .title {
        flex-flow: row nowrap; 
        justify-content: space-between; 
        align-items: flex-end;
    }
    #wrap .gift_bg .gift {text-align: right;}
    #wrap .gift_bg .gift .gift_list {
        grid-template-areas:
        'sponser2 sponser3'
        'sponser4 sponser4'
        ;
    }
    #wrap .container .sponsor_btn::after {font-size: 2rem;}
    /* ------------------------10행---------------------------------------------- */
}/* 1024~ */
@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;}
    #wrap .intro h1 span:nth-child(1) {font-weight: 400;}
    #wrap .container .sponsor_btn {width: 409px; height: 71px;}
    #wrap .container .sponsor_btn::after {font-size: 2rem;}
    #wrap .container .sponsor_btn em {font-size: 2.13rem;}
    /* --------------------2행 퀴즈----------------------------- */
    /* ------------------------9행---------------------------------------------- */
    #wrap .gift_bg .gift {text-align: center;}
    #wrap .gift_bg .gift .title h1 {font-size: 3.44rem;}
    #wrap .gift_bg .gift .gift_list {
        grid-template-areas:
        'sponser2 sponser3 sponser4'
        ;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0 0 70px;
    }
    #wrap .gift_bg .gift .gift_list li .photo {height: 300px;}
    #wrap .gift_bg .gift .gift_list li .photo img {transform: translateY(70px);}
    #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 h2+p {margin-top: 13px;}
    #wrap .gift_bg .gift .info {font-size: 1.25rem;}
    /* ---------------------------------------------------10행--------------------------------- */
    #wrap .container {padding: 100px 0;}
    #wrap .notice_bg .notice .list dt {font-size: 2.13rem; font-weight: 700;}
    #wrap .notice_bg .notice .list dd {line-height: 1.7; font-size: 1.25rem;}
}