/*  =====================================================1행 캠페인 표지(m) */
#wrap .intro {
    /* 북극곰배경 bg1.png */
    padding: 100px 0;
    background-image: url(../image/bg1.png);
    background-size: auto 130%;
    background-position: center bottom;
    /* 배경이미지 속성 사용시 다른 background-로 시작하는 배경 추가 속성도 생각하기 */
    position: relative;
}
#wrap .intro > * {position: relative; z-index: 100;}
#wrap .intro::after {
    /* 북극곰 위에 깔리는 반투명한 검은색 배경 rgba() */
    /* 가상요소 before, after(자식)의 필수속성이 뭔지 먼저 생각하기 */
    content: ''; display: block;
    background: linear-gradient(transparent, #000 69%);
    opacity: 0.6;
    width: 100%; height: 100%;
    /* p, h1, a(형제들)와 겹침 효과를 줄 수 있는 속성 */
    position: absolute;
    left: 0; top: 0; z-index: 90;
}
#wrap .intro .logo {
    width: 24px;/* w, h 중 한가지값만 작성(나머지는 자동비율조정) */
    position: absolute; left: 21px; top: 18px;
}
#wrap .intro .logo img {width: 100%;}/* 이미지는 w100%설정후부모크기, 위치따라가기 */
#wrap .intro h1 {text-align: center; margin: 0 0 50px;}
#wrap .intro h1 span {
    display: block;
    color: #fff;
    font-size: 1.88rem; font-weight: 500;
    line-height: 1.3;
}
#wrap .intro h1 span:nth-child(1) {}
#wrap .intro h1 span:nth-child(2) {}
#wrap .intro .sponsor_btn {}
#wrap .intro .sponsor_btn:hover {box-shadow: 0 0 5px #FE9300;}
#wrap .intro .sponsor_btn:hover::after {animation: x5 0.5s infinite;}
@keyframes x5 {
    0% {transform: translateX(0);}
    100% {transform: translateX(5px);}
}
/* ======================================================================2행 퀴즈 */
#wrap .quiz_bg {
    background-image: url(../image/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_list > * {margin: 0 0 16px;}
#wrap .quiz_bg .quiz .quiz_list {}
#wrap .quiz_bg .quiz .quiz_list h1 {
    font-size: 1.5rem; line-height: 1.2;
    letter-spacing: -0.01rem; font-weight: 500;
    font-size: 'notosans KR', sanserif; /* 단독글꼴일경우 */
    color: #fff;
}
#wrap .quiz_bg .quiz .quiz_list h2 {}
#wrap .quiz_bg .quiz .quiz_list h2 span {
    color: #fff; display: block; line-height: 1.7;
}
#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:hover label {color: #FF7300;}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li:last-child {margin: 0;}
/*
radio, checkbox, select, option은 디자인 변경 불가!
radio 체크박스 디자인 변경하는 방법 -> background-image
1.`label {background-image}`로 off 이미지 설정
    * size, no-repeat, padding 설정
2. `input:chacked + label{background-image}` on 이미지 설정
    *  input이 체크 되었을 때(:chacked) 형제 label의 배경이미지가 변경 된다.
3. `input {display:none;}` radio의 기본 체크 박스를 숨김처리
 */

#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(../image/chk_on.svg)
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm ul li label {
    color: #fff; font-size: 0.88rem;
    background-image: url(../image/chk_off.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    padding-left: 47.75px;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn {
    width: 100%; line-height: 1.7;
    border-radius: 50px; padding: 10px;
    background-color: #050505; color: #fff;
    transition: background-color 0.3s, font-weight 0.3s;
}
#wrap .quiz_bg .quiz .quiz_list #quiz_frm #answer_btn:hover {background-color: #FF7300; font-weight: 600;}
#wrap .quiz_bg .quiz .quiz_status {
    display: flex; flex-flow: column nowrap;
    align-items: flex-end; gap: 20px;
}
#wrap .quiz_bg .quiz .quiz_status img {width: 100%;}
#wrap .quiz_bg .quiz .quiz_status p {
    font-size: 1.25rem; color: #fff; line-height: 1.7;
}
/* ====================================================================================3.동영상 */
#wrap .video_bg {
    background-image: url(../image/video_bg.png);
    padding: 50px 15px;
}
#wrap .video_bg .video {}
#wrap .video_bg .video h1 {text-align: center; }
#wrap .video_bg .video iframe {width: 100%; margin: 0 0 40px;}
/* ====================================================================================4.50감소 */
#wrap .reduction_bg {
    background-image: url(../image/reduction_50_bg.png);
}
#wrap .reduction_bg .reduction {}
#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-row: 1fr 1fr 1fr; */
}
#wrap .humanity_bg .humanity .list li {}
#wrap .humanity_bg .humanity .list li dl {
    padding: 48px 0;
    background-size: cover; background-position: center;
    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(../image/warmming_28t.png);}
#wrap .humanity_bg .humanity .list li:nth-child(2) dl {background-image: url(../image/warmming_27cm.png);}
#wrap .humanity_bg .humanity .list li:nth-child(3) dl {background-image: url(../image/wwf.jpg);}
#wrap .humanity_bg .humanity .list li dl::before {
    content: ''; display: block;
    left: 0; top:0; z-index: 9;
    width: 100%; height: 100%;
    position: absolute;
    background: linear-gradient(#000 19%, transparent 55%);
}
#wrap .humanity_bg .humanity .list li dl dt {
    font-size: 1.38rem; font-weight: 500; line-height: 1.2; margin: 0 0 12px;
}
#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 {text-align: center; font-size: 0.81rem; line-height: 1.7;}
/* ====================================================================================6.빙하위기 */
#wrap .crisis_bg {
    background-image: url(../image/reduction_50_bg.png);
}
#wrap .crisis_bg .crisis {}
#wrap .crisis_bg .crisis h1 {color: #fff;}
#wrap .crisis_bg .crisis h1+p {color: #fff;}
#wrap .crisis_bg .crisis p img {width: 100%;}
/* ====================================================================================7.WWF단체소개 */
#wrap .wwf_bg {
    background-image: url(../image/wwf.jpg);
    background-size: 200%;
    position: relative;
}
#wrap .wwf_bg::before {
    content: ''; display: block;
    width: 100%; height: 100%;
    top: 0; left: 0; 
    position:absolute; z-index: 20;
    background-color: rgba(255, 255, 255, 0.8);
}
#wrap .wwf_bg .wwf {position: relative; z-index: 21; text-align: center;}
#wrap .wwf_bg .wwf h1 {font-size: 1.88rem; font-weight: 700; line-height: 1.3;}
#wrap .wwf_bg .wwf h1+p{
    font-size: 0.81rem; line-height: 1.7;
    font-weight: 500; margin: 0 0 22px;
}
/* ====================================================================================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'
        'corporation'
        'nature';
        gap: 22px;
}
#wrap .activity_bg .activity .details li {
    padding-top: 94px;
    background-size: cover;
    background-repeat: no-repeat;
}
#wrap .activity_bg .activity .details li:nth-child(1) {
    grid-area: public;/* 대중-grid 2차원 정렬을 위한 자식 이름 짓기 */
    background-image: url(../image/warmming_28t.png);
    background-position: center;
}
#wrap .activity_bg .activity .details li:nth-child(2) {
    grid-area: corporation;/* 기업 */
    background-image: url(../image/wwf.jpg);
    background-size: 110%;
    background-position: center;
}
#wrap .activity_bg .activity .details li:nth-child(3) {
    grid-area: nature;/* 자연 */
    background-image: url(../image/reduction_50.png);
}
#wrap .activity_bg .activity .details li .txt {
    padding: 20px; background-color: rgba(0,0,0,0.7);
}
#wrap .activity_bg .activity .details li .txt > * {color: #fff;}
#wrap .activity_bg .activity .details li .txt dt {font-size: 1.38rem; font-weight: 500; line-height: 1.2; margin: 0 0 18px;}
#wrap .activity_bg .activity .details li .txt dd {font-size: 0.81rem; line-height: 1.7;}
/* ====================================================================================9.선물정보 */
#wrap .gift_bg {
    background-image: url(../image/reduction_50_bg.png);
}
#wrap .gift_bg .gift {text-align: center;}
#wrap .gift_bg .gift .title {
    display: flex; flex-flow: column nowrap;
}
#wrap .gift_bg .gift .title h1 {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: 20px;
    grid-template-areas:
        'sponsor2'
        'sponsor3'
        'sponsor5'
    ;
    margin-bottom: 40px;
}
#wrap .gift_bg .gift .gift_list li {}
#wrap .gift_bg .gift .gift_list li:nth-child(1) {grid-area: sponsor2;}
#wrap .gift_bg .gift .gift_list li:nth-child(2) {grid-area: sponsor3;}
#wrap .gift_bg .gift .gift_list li:nth-child(3) {grid-area: sponsor5;}
#wrap .gift_bg .gift .gift_list li:nth-child(2) .photo {background-image: url(../image/freebie2.jpg); grid-area: sponsor3;}
#wrap .gift_bg .gift .gift_list li:nth-child(3) .photo {background-image: url(../image/freebie3.jpg); grid-area: sponsor5;}
#wrap .gift_bg .gift .gift_list li .photo {
    height: 150px; overflow: hidden;
    background-size: cover; background-position: center;
}
#wrap .gift_bg .gift .gift_list li .photo img {width: 100%; transform: translateY(-100px);}
#wrap .gift_bg .gift .gift_list li h2,
#wrap .gift_bg .gift .gift_list li h2+p {color: #fff;}
#wrap .gift_bg .gift .gift_list li h2 {margin-top: 13px;}
#wrap .gift_bg .gift .gift_list li h2+p {line-height: 1.7; font-size: 1rem;}
#wrap .gift_bg .gift .info {
    background-color: #fff; color: #050505;
    display: inline-block;
}
/* ====================================================================================10.안내 */
#wrap .payment_bg {background-color: #E4E5EA;}
#wrap .payment_bg .payment {}
#wrap .payment_bg .payment h1 {margin: 0;}
#wrap .payment_bg .payment h1+p {font-size: 1rem;}