/* *************************************************************1행( 캠페인 표지 )*************************************************************** */
#wrap .intro {
    background-image: url(../images/bg1.png);
    background-size: cover; 
    background-position: center bottom;
    padding: 100px 0;
    position: relative;
}
#wrap .intro > *  { position: relative; z-index: 999;} 
#wrap .intro::after {
    content: ''; display: block;
    background:linear-gradient(transparent,#000  69%);
    opacity: 0.6;
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 100;
}
#wrap .intro .logo {
    position: absolute; 
    left: 21px; top: 18px; 
    width: 24px; /* 가로,세로 중 한가지값만 작성(나머지 비율은 자동조정) */
}   
#wrap .intro .logo img {width: 100%;}
#wrap .intro h1 {margin:0 0 50px;}
#wrap .intro h1 span {
    font-size: 1.88rem; font-weight: 700;
    display: block; text-align: center;
    line-height: 1.3; color: #fff;
}
#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);
    padding: 70px;
}

#wrap .quiz_bg .quiz {
    display: flex; flex-flow: column nowrap; /* t,d column을 low로 */
    gap: 50px;
}
#wrap .quiz_bg .quiz .quiz_list {
    
}
#wrap .quiz_bg .quiz .quiz_list > * {margin: 0 0 16px;}
#wrap .quiz_bg .quiz .quiz_list h1 {
    font-size: 1.5rem; font-weight:500; line-height: 1.2; letter-spacing: -0.01rem;
    color: #fff;
}
#wrap .quiz_bg .quiz .quiz_list h2 {margin-bottom: 16px;}
#wrap .quiz_bg .quiz .quiz_list h2 span {
    color: #fff;
    display: block;
    line-height: 1.7; 
}
#wrap .quiz_bg .quiz .quiz_list h2 span:first-child {}
#wrap .quiz_bg .quiz .quiz_list h2 span:last-child {}
#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/quiz_chk.svg);}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li label {
    color: #fff;
    font-size: 0.88rem;
    background-image: url(../images/quiz_no_chk.svg);
    background-size: 16px; background-repeat: no-repeat; /* 반복 유무 */
    padding-left: 47.75px; /* 원 위치로부터 떨어져있는 거리 */
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li:hover label {color: #FF7300;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn {
    color: #fff;
    width:100%; line-height: 47px; line-height: 1.7;
    background-color: #050505; padding: 10px;
    border-radius: 50px;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn:hover {
    background-color: #FF7300;
}
#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: 70px 0}
/* *************************************************************4행*************************************************************** */
#wrap .reduction_bg {
    background-image: url(../images/reduction_50bg.png);
}
#wrap .reduction_bg .reduction h1 {color: #fff;}
#wrap .reduction_bg .reduction h1 .highlight {}
#wrap .reduction_bg .reduction 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;
    margin: 0 0 40px;
}
#wrap .humanity_bg .humanity p {text-align: center; }
#wrap .humanity_bg .humanity .list {
    display: flex; flex-flow: column nowrap;
    /* display: grid; grid-template-rows: 1fr 1fr 1fr; */ /* grid 사용해서 배치하는법 */
    gap: 20px;
}
#wrap .humanity_bg .humanity .list li {}
#wrap .humanity_bg .humanity .list li dl {
    background-size: cover; background-position: center;
    text-align: center;
    padding: 48px 0;
    position: relative;
}
#wrap .humanity_bg .humanity .list li dl > * {
    position: relative; 
    z-index: 999;
    color: #fff; 
}
#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_27.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%; 
    background: linear-gradient(180deg,#000,transparent);
    position: absolute; left: 0; top: 0;
    opacity: 0.7;
    z-index: 100;
} /* 그라데이션 배경 */
#wrap .humanity_bg .humanity .list li dl dt {
    font-size: 1.38rem; 
    font-weight: 500; line-height: 1.2;
    margin: 0 0 11px;
}
#wrap .humanity_bg .humanity .list li dl dd {line-height: 1.7;}
#wrap .humanity_bg .humanity .list li .txt {background-color: #fff; padding: 20px;}
#wrap .humanity_bg .humanity .list li .txt p {
    font-size: 0.81rem; line-height: 1.7; 
}
/* *************************************************************6행*************************************************************** */
#wrap .crisis_bg {
    background-image: url(../images/reduction_50bg.png);
}
#wrap .crisis_bg .crisis {}
#wrap .crisis_bg .crisis h1 {color: #fff;}
#wrap .crisis_bg .crisis h1 .highlight {}
#wrap .crisis_bg .crisis 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 {
    content: ''; display: block;
    width: 100%; height: 100%;
    background-color: #fff; /* background-color: rgba(255,255,255,0) */
    position: absolute; left: 0; top: 0;
    opacity: 0.8;
    z-index: 10;
}
#wrap .wwf_bg .wwf {
    position: relative; z-index: 11; text-align: center;
    line-height: 1.3;
}
#wrap .wwf_bg .wwf h1 {
    font-size: 1.88rem; font-weight: 700;
}
#wrap .wwf_bg .wwf p {font-size: 0.81rem; line-height: 1.7;}
#wrap .wwf_bg .wwf p:last-child {}

/* *************************************************************8행*************************************************************** */
#wrap .activity_bg {}
#wrap .activity_bg .activity {}
#wrap .activity_bg .activity h1 {text-align: center;}
#wrap .activity_bg .activity .details {
    display: grid;
    grid-template-areas:
        'public' 
        'corperation' 
        'nature';
        gap: 22px;
}
#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;background-image: url(../images/warming_28t.png);} 
#wrap .activity_bg .activity .details li:nth-child(2) {grid-area: corperation;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.5); padding: 20px;}
#wrap .activity_bg .activity .details li .txt * {color: #fff;}
#wrap .activity_bg .activity .details li .txt dt {font-size: 1.38rem; margin: 0 0 18px;}
#wrap .activity_bg .activity .details li .txt dd {font-size: 0.81rem;}
/* *************************************************************9행*************************************************************** */
#wrap .gift_bg {background-image: url(../images/reduction_50bg.png);}
#wrap .gift_bg .gift {text-align: center;}
#wrap .gift_bg .gift > * {}
#wrap .gift_bg .gift .title {
    display: flex; flex-flow: column nowrap;
}
#wrap .gift_bg .gift .title h1 {margin-bottom: 22px; text-align: left; color: #fff;}
#wrap .gift_bg .gift .title .sponsor_btn {margin: 0;}
#wrap .gift_bg .gift .title .sponsor_btn em {}
#wrap .gift_bg .gift .gift_list {
    display: grid; gap: 22px;
    grid-template-areas:
    'sponser2'
    'sponser3'
    'sponser4'
    ;
}
#wrap .gift_bg .gift .gift_list li {}
#wrap .gift_bg .gift .gift_list li:nth-child(1) {grid-area: sponser2;}
#wrap .gift_bg .gift .gift_list li:nth-child(2) {grid-area: sponser3;}
#wrap .gift_bg .gift .gift_list li:nth-child(3) {grid-area: sponser4;}
#wrap .gift_bg .gift .gift_list li .photo {
    height: 150px; 
    overflow: hidden;
}
#wrap .gift_bg .gift .gift_list li .photo img {
    width: 100%;
    transform: translateY(-85px);
}
#wrap .gift_bg .gift .gift_list li h2, 
#wrap .gift_bg .gift .gift_list li h2+p {text-align: center; color: #fff;}
#wrap .gift_bg .gift .gift_list li h2 {margin-top: 13px;}
#wrap .gift_bg .gift .gift_list li h2+p {}
#wrap .gift_bg .gift .info {background-color: #fff; color: #050505; display: inline-block;}
/* *************************************************************10행*************************************************************** */
#wrap .notice_bg {background-color: #E4E5EA;}
#wrap .notice_bg .notice {}
#wrap .notice_bg .notice .list {}
#wrap .notice_bg .notice .list dt {font-size: 1.38rem; font-weight: 700;}
#wrap .notice_bg .notice .list dd {line-height: 1.7;}