/* ----------------------------------------------1행 캠페인 표지(m) */
#wrap .intro { /* 북극곰 배경 */
    padding:100px 0;
    background-image:url(../images/bg1.png);
    background-size:auto 130%;
    background-position:center bottom;
    position:relative;
}
#wrap .intro > * {position:relative; z-index:100;}
#wrap .intro::after {/* 북극곰배경 위에 깔리는 반투명한 검은색배경 rgba() */
    content: "";
    display:block;
    background: linear-gradient(transparent, #000 69%);
    opacity:0.6;
    width:100%; height:100%;
    position:absolute; left:0; top:0; z-index:90;
}
#wrap .intro .logo {
    width:24px;  /* w,h 중 한가지값만 작성(나머지는 자동비율조정) */
    position: absolute; /* 피그마 무시기능과 동일 absolute */
    top:18px;
    left:21px;
}
#wrap .intro .logo img {width:100%;}
#wrap .intro h1 {text-align:center; margin:0 0 50px;}
#wrap .intro h1 span {
    color:#fff;
    font-size:1.88rem;
    font-weight:500;
    line-height:1.3;
    display:block;
    display:flex; flex-flow:column nowrap;
    justify-content:center; align-items:center;
}
#wrap .intro h1 span:nth-child(1) {}
#wrap .intro h1 span:nth-child(2) {}
#wrap .intro .sponsor_btn {}
/* -----------------------------------------------------------------------2행 퀴즈 */
#wrap .quiz_bg {
    background-image: url(../images/quiz_bg.png);
    background-size:cover; background-position: center;
    padding: 70px;
}
#wrap .quiz_bg .quiz {
    display: flex; flex-flow: column nowrap; /* t, d column -> row */
    gap:50px;
}
#wrap .quiz_bg .quiz .quiz_list {/* margin:0 0 50px; */}
#wrap .quiz_bg .quiz .quiz_list > * {margin:0 0 16px;}
#wrap .quiz_bg .quiz .quiz_list h1 {
    font-size:1.5rem;
    line-height:1.2;
    font-weight:500; letter-spacing: -0.01rem;
    color:#fff;
    font-family:'Noto Sans KR', sans-serif; /* 단독글꼴인경우 */
}
#wrap .quiz_bg .quiz .quiz_list h2 {}
#wrap .quiz_bg .quiz .quiz_list h2 span {
    line-height:1.7;
    color:#fff;
    display: block;
}
#wrap .quiz_bg .quiz .quiz_list h2 span:nth-child(1) {}
#wrap .quiz_bg .quiz .quiz_list h2 span:nth-child(2) {}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm {margin:0;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul {margin:0 0 16px;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li {margin:0 0 16px;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li:last-child {margin:0;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li input {display: none;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li input:checked + label {
    background-image: url(../images/chk_on.svg);
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li input[type="radio"]:checked + label{
    color:#f7caca;
    font-weight:600;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li label  {
    font-size:0.88rem; /* line-height:1.7; */
    color:#fff;
    transition:color 0.2s;
    background-image: url(../images/chk_off.svg);
    background-size:16px; background-repeat:no-repeat;
    padding-left:47.75px;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn {
    background:#050505; color:#fff; line-height:1.7;
    padding:10px; border-radius:50px; width:100%;
    transition:transform 0.2s;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li:hover label {
    color:#f7caca;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn:hover {
    transform:translateY(-3px);
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
#wrap .quiz_bg .quiz .quiz_status {}
#wrap .quiz_bg .quiz .quiz_status img {width:100%;}
#wrap .quiz_bg .quiz .quiz_status p {
    color:#fff; line-height:1.7; font-size:1.25rem;
    margin:20px 0 0;
}
/* ============================================================3 */
#wrap .video_bg {
    background-image:url(../images/video_bg.png);
    padding:50px 15px;
}
#wrap .video_bg .video h1 {text-align:center;}
#wrap .video_bg .video iframe {width:100%; margin:0 0 70px;}
/* ============================================================4 */
#wrap .reduction_bg {
    background-image:url(../images/reduction_50_bg.png);
}
#wrap .reduction_bg .reduction h1 {color:#fff;}
#wrap .reduction_bg .reduction h1+p {color:#fff;}
#wrap .reduction_bg .reduction p img {width:100%;}
/* ============================================================5 */
#wrap .humanity_bg {
    background-color:#f5f5f5;
}
#wrap .humanity_bg .humanity h1 {text-align: center;}
#wrap .humanity_bg .humanity h1+p {text-align: center;}
#wrap .humanity_bg .humanity .list {
    display:flex; flex-flow:column nowrap; gap:20px;
    /* display:grid; grid-template-rows:1fr 1fr 1fr; */
}
#wrap .humanity_bg .humanity .list li dl {
    background-size:cover; background-position:center;
    padding:48px 0; text-align:center; position:relative;
}
#wrap .humanity_bg .humanity .list li dl * {
    color:#fff; position:relative; z-index:10;
}
#wrap .humanity_bg .humanity .list li:nth-child(1) dl {background-image:url(../images/warming_28t.png);}
#wrap .humanity_bg .humanity .list li:nth-child(2) dl {background-image:url(../images/warming_27cm.png);}
#wrap .humanity_bg .humanity .list li:nth-child(3) dl {background-image:url(../images/wwf.jpg);}
#wrap .humanity_bg .humanity .list li dl:before {
    content:''; display:block; width:100%; height:100%;
    position:absolute; left:0; top:0; z-index:9;
    background:linear-gradient(rgba(0,0,0,0.9), transparent);
}
#wrap .humanity_bg .humanity .list li dl dt {
    font-size:1.38rem; margin:0 0 11px; line-height:1.2; font-weight:500;
}
#wrap .humanity_bg .humanity .list li dl dd {line-height:1.7;}
#wrap .humanity_bg .humanity .list li .txt {background:#fff; padding:20px;}
#wrap .humanity_bg .humanity .list li .txt p {text-align:center; line-height:1.7; font-size:0.81rem;}
/* ============================================================6 */
#wrap .crisis_bg {
    background-image:url(../images/reduction_50_bg.png);
}
#wrap .crisis_bg .crisis h1 {color:#fff;}
#wrap .crisis_bg .crisis h1+p {color:#fff;}
#wrap .crisis_bg .crisis p img {width:100%;}
/* -----------------------------------------------7행 */
#wrap .wwf_bg {
    background-image: url(../images/wwf.jpg);
    position:relative;
}
#wrap .wwf_bg::before {
    position:absolute; content:''; display:block;
    width:100%; height:100%; left:0; top:0;
    background:rgba(255,255,255,0.7); z-index:9;
}
#wrap .wwf_bg .wwf {
    position:relative; z-index:10; text-align:center;
}
#wrap .wwf_bg .wwf h1 {}
#wrap .wwf_bg .wwf p {}
/* -----------------------------------------------8행 */
#wrap .activity_bg {}
#wrap .activity_bg .activity {}
#wrap .activity_bg .activity h1 {}
#wrap .activity_bg .activity .details {
    display:grid; gap:20px;
    grid-template-areas:
        'public'
        'corporation'
        'nature';
}
#wrap .activity_bg .activity .details li {
    background-size:cover; background-position:center;
    padding-top:94px;
}
#wrap .activity_bg .activity .details li:nth-child(1) {
    grid-area:public;/* 대중-grid 2차원 정렬을 위한 자식 이름 짓기 */
    background-image:url(../images/warming_28t.png);
}
#wrap .activity_bg .activity .details li:nth-child(2) {
    grid-area:corporation;/* 기업 */
    background-image:url(../images/wwf.jpg);
}
#wrap .activity_bg .activity .details li:nth-child(3) {
    grid-area:nature;/* 자연 */
    background-image:url(../images/reduction_50.png);
}
#wrap .activity_bg .activity .details li .txt {
    background-color:rgba(0,0,0,0.8);
    padding:20px;
}
#wrap .activity_bg .activity .details li .txt * {color:#fff;}
#wrap .activity_bg .activity .details li .txt dt {margin-bottom:18px;}
#wrap .activity_bg .activity .details li .txt dd {}