/* ==================================1행 캠페인 표지 */
#wrap .intro {
    background-image: url(../images/bg1.png);
    padding: 100px 0; position: relative;
    display: flex; flex-flow: column; justify-content: center; align-items: center;
    gap: 50px;
    background-size: cover; background-position: center;
}
#wrap .intro::after {
    content: ''; display: block;
    background:linear-gradient(transparent, #000 69%);
    opacity: 0.6;
    width: 100%; height:100%;
    position: absolute; top:0; left:0;
    z-index: 90;
}
#wrap .intro > * {position: relative; z-index: 100;}
#wrap .intro .logo {
    width: 24px;
    position: absolute; top:18px; left: 21px;
}
#wrap .intro .logo img {width: 100%;}
#wrap .intro h1 {
    text-align: center;
}
#wrap .intro h1 span {
    font-size: 1.88rem; font-weight: 700;
    color: #fff; line-height: 1.3;
}
#wrap .intro .sponsor_btn {}
/* ================================2행 퀴즈 */
/* ------------------공통선택자 */
#wrap .container {}
#wrap .container .contents {}
/* ------------------개별 선택자 */
#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 -> row */
    gap: 50px;
}
#wrap .quiz_bg .quiz .quiz_question > * {margin: 0 0 16px;}
#wrap .quiz_bg .quiz .quiz_question {}
#wrap .quiz_bg .quiz .quiz_question h2 {
    color: #fff; font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01rem;
}
#wrap .quiz_bg .quiz .quiz_question p {}
#wrap .quiz_bg .quiz .quiz_question p span {line-height: 1.7; color: #fff; display: block;}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm {}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol {margin:0 0 16px;} 
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol li {margin: 0 0 16px;}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol li:hover label {
    color: #FF7300;
}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol li:last-child {margin: 0;}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol li input {display: none;}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol li input:checked + label {
    background-image: url(../images/chk_on.svg);
}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm ol li label {
    color: #fff; font-size: 0.88rem;/*  line-height: 1.7; */
    background-image: url(../images/chk_off.svg);
    background-size:16px; background-repeat: no-repeat;
    padding-left: 47.75px;
}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm .check_btn {
    color: #fff; margin-top: 8px; width: 100%; padding: 10px 0; background: #050505;
    border-radius: 50px; line-height: 1.7;
}
#wrap .quiz_bg .quiz .quiz_question #quiz_frm .check_btn:hover {
    background: #6A70A2;
}
#wrap .quiz_bg .quiz .quiz_info {} 
#wrap .quiz_bg .quiz .quiz_info img {margin-bottom: 20px; width: 100%;}
#wrap .quiz_bg .quiz .quiz_info p {color: #fff; font-size: 1.25rem; line-height: 1.7;}
/* ===================================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%;height:350px ; margin:70px 0;}
/* ===================================4행 */
#wrap .reduction_bg {
    background-image: url(../images/50_bg.png);
}
#wrap .reduction_bg .reduction h1 {color: #fff;}
#wrap .reduction_bg .reduction h1+p {color: #fff; margin-bottom: 40px;}
#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;margin-bottom: 40px;}
#wrap .humanity_bg .humanity .list {
    display: flex; flex-flow: column nowrap; gap: 20px;
}
#wrap .humanity_bg .humanity .list li {text-align: center;}
#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 {
    padding: 48px 0; background-size: cover; 
    background-position:center; position: relative;
}
#wrap .humanity_bg .humanity .list li dl:before {
    content: ''; display: block; position: absolute;
    width: 100% ;height: 100%; top:0;left:0; z-index: 5; background: linear-gradient(#000,transparent);
}
#wrap .humanity_bg .humanity .list li dl dt {
    color:#fff;font-size: 1.38rem;font-weight: 500; line-height: 1.2;
    position: relative; z-index: 10;
}
#wrap .humanity_bg .humanity .list li dl dd {
    color:#fff; line-height: 1.7;
    position: relative; z-index: 10;
}
#wrap .humanity_bg .humanity .list li .txt {padding: 20px 20px; background-color: #fff;}
#wrap .humanity_bg .humanity .list li .txt p {font-size: 0.81rem; line-height: 1.7;}
/* ===================================6행 */
#wrap .crisis_bg .crisis h1 {color: #fff;}
#wrap .crisis_bg .crisis p {color: #fff; }
#wrap .crisis_bg .crisis p img {width: 100%;}
#wrap .crisis_bg {
    background-image: url(../images/50_bg.png);
    
}
#wrap .crisis_bg::before {
    
}
/* ====================================7행 */
#wrap .wwf_bg {
    background-image: url(../images/wwf.jpg);position: relative;
}
#wrap .wwf_bg::before {
    content: ''; display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute;
    background: rgba(255,255,255,0.8); z-index: 10;
}
#wrap .wwf_bg .wwf {text-align: center; position: relative; z-index: 20;}
#wrap .wwf_bg .wwf h1 {}
#wrap .wwf_bg .wwf p {line-height: 1.7; font-size: 0.81rem; font-weight: 500;}
/* ========================================8행 */
#wrap .activity_bg {}
#wrap .activity_bg .activity {}
#wrap .activity_bg .activity h1 {margin-bottom: 40px;}
#wrap .activity_bg .activity .details {
    display: grid; gap: 20px;
    grid-template-areas: 
        'public'
        'corporation'
        'nature';
}
#wrap .activity_bg .activity .details li {
    background-size: cover; padding-top: 94px;
    background-position: center;
}
#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.png);
}
#wrap .activity_bg .activity .details li .txt {
    padding: 20px; background: rgba(0,0,0,0.5);
}
#wrap .activity_bg .activity .details li .txt * {color: #fff;}
#wrap .activity_bg .activity .details li .txt dt {font-size: 1.38rem; margin-bottom: 18px;}
#wrap .activity_bg .activity .details li .txt dd {font-size: 0.81rem;}
/* =========================================9행 */
#wrap .gift_bg {
    background-image: url(../images/50_bg.png);
}
#wrap .gift_bg .gift {text-align: center;}
#wrap .gift_bg .gift .gift_title {
    display: flex; flex-flow: column; align-items: start;
}
#wrap .gift_bg .gift .gift_title h1 {margin-bottom:22px; text-align: left;}
#wrap .gift_bg .gift .gift_title h1,
#wrap .gift_bg .gift p {color: #fff;}
#wrap .gift_bg .gift .gift_title .sponsor_btn {margin: 0;}
#wrap .gift_bg .gift .gift_title .sponsor_btn em {}
#wrap .gift_bg .gift .donation {
    margin: 40px auto; display:grid;
    gap:22px;
    grid-template-areas:
        't_th'
        'th_th'
        'f_th';
}
#wrap .gift_bg .gift .donation li {}
#wrap .gift_bg .gift .donation li .gift_img {
    display: block; width: 100%; height: 150px;
    background-size: cover; background-position: center;
    margin-bottom: 13px;
}
#wrap .gift_bg .gift .donation li:nth-child(1) {grid-area:t_th;}
#wrap .gift_bg .gift .donation li:nth-child(2) {grid-area:th_th;}
#wrap .gift_bg .gift .donation li:nth-child(3) {grid-area:f_th;}
#wrap .gift_bg .gift .donation li:nth-child(1) .gift_img {background-image: url(../images/freebie2.jpg);}
#wrap .gift_bg .gift .donation li:nth-child(2) .gift_img {background-image: url(../images/freebie1.jpg);}
#wrap .gift_bg .gift .donation li:nth-child(3) .gift_img {background-image: url(../images/freebie3.jpg);}
#wrap .gift_bg .gift .donation li p {text-align: center; line-height: 1.7;}
#wrap .gift_bg .gift > p{
    line-height: 1.7; background: #fff; color: #000;
    width: max-content; display: inline-block;
}
/* ==============================================10행 */
#wrap .pay_info_bg {
    background: #E4E5EA;
}
#wrap .pay_info_bg .pay_info {}
#wrap .pay_info_bg .pay_info h1,
#wrap .pay_info_bg .pay_info ul li {color: #050505;}
#wrap .pay_info_bg .pay_info h1 {line-height: 1.2;}
#wrap .pay_info_bg .pay_info ul li {line-height: 1.7;}