@charset "UTF-8";

body::after {
	position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden; 
    z-index:-1;  
    content:
   	url(../images/section09-btn-quizStart-hover.png)
   	url(../images/section09-quiz01-bg.jpg)
   	url(../images/section09-quiz02-bg.jpg)
   	url(../images/section09-quiz03-bg.jpg)
	url(../images/section09-quiz01-title.png)
	url(../images/section09-quiz02-title.png)
	url(../images/section09-quiz03-title.png)
	url(../images/section09-quiz-correct.png)
	url(../images/section09-quiz-incorrect.png)
	url(../images/section09-quizModal-close.png);
}

html {font-size:62.5%}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}

.wrap-camp {letter-spacing:-0.01em}
.campaign-wrap {position:relative;width:192rem;margin:auto;font-family:'Pretendard';font-size:2rem;letter-spacing:-0.03em}
.campaign-wrap img {width:100%;max-width:100%}
.campaign-wrap * {box-sizing:border-box}
.campaign-wrap input[type='checkbox'] {position:absolute;left:0;top:0;width:0;height:0;opacity:0}
.campaign-wrap .cont-section {position:relative;background-repeat:no-repeat;background-position:center top;background-size:cover}
.campaign-wrap .cont-section .section-inner {position:relative;height:100%;width:144rem;margin:auto}
.campaign-wrap .cont-section .section-inner-full {position:relative;width:100%}
  
.campaign-wrap .cont-section.section01 {height:90rem;background-image:url(../images/section01-bg.jpg)}
.campaign-wrap .cont-section.section01 .section-inner {padding-top:40rem}
.campaign-wrap .cont-section.section01 .section-inner .inner-box {margin-left:12.2rem}
.campaign-wrap .cont-section.section01 .section-inner .inner-box h3 {width:55.9rem;height:26.1rem;margin-bottom:3.2rem}
.campaign-wrap .cont-section.section01 .section-inner .inner-box .camp-txt {font-weight:500;font-size:2.6rem;line-height:140%;color:#fff}

.campaign-wrap .cont-section.section02.dissolve-section {position:relative;height:100vh}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap {position:relative;width:100%;height:100vh;overflow:hidden}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide {position:absolute;inset:0;width:100%;height:100%}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide img {width:100%;height:100%;object-fit:cover;display:block}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .slide-txt-box {width:100%;height:100%;position:absolute;top:10rem;left:12rem}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .slide-txt-box h4 {margin-bottom:3.5rem}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide.slideBox01 .slide-txt-box h4 {width:38rem;height:13.2rem}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide.slideBox02 .slide-txt-box h4 {width:43.4rem;height:18.7rem}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .slide-txt-box .camp-txt {font-weight:500;font-size:1.8rem;line-height:140%;color:#111;display:flex;flex-direction:column;gap:1.2rem}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .slide-txt-box .camp-txt strong {font-weight:700}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .slide-txt-box .camp-txt .txt-small {font-weight:400;font-size:1.5rem;line-height:140%;letter-spacing:-0.01em}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .txt-scroll {display:inline-block;position:absolute;bottom:16rem;left:12rem;font-weight:500;font-size:1.6rem;color:#939393;padding-bottom:0.8rem;border-bottom:0.12rem solid #939393}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .txt-scroll > span {display:flex;align-items:center;gap:0.4rem}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide .txt-scroll > span::after {content:'';display:block;width:1rem;height:1.4rem;background-image:url(../images/section02-icon-arrow.png);background-repeat:no-repeat;background-position:center center;background-size:contain}
.campaign-wrap .cont-section.section02.dissolve-section .dissolve-wrap .fixed-slide.slideBox02 {opacity:0}

.campaign-wrap .cont-section.section03 {height:108.7rem;background-image:url(../images/section03-bg.jpg)}
.campaign-wrap .cont-section.section03 .section-inner {padding:8rem 0}
.campaign-wrap .cont-section.section03 .section-inner h4 {width:68.2rem;height:13.1rem;margin:auto;margin-bottom:6.5rem}
.campaign-wrap .cont-section.section03 .section-inner ul {display:flex;justify-content:space-between;gap:2rem;width:89.4rem;margin:auto}
.campaign-wrap .cont-section.section03 .section-inner ul > li {width:43.7rem;position:relative}
.campaign-wrap .cont-section.section03 .section-inner ul > li::before {content:'';display:block;height:3.5rem;background-repeat:no-repeat;background-position:center center;background-size:contain;position:absolute;filter:drop-shadow(1px 1px 0px rgba(0,0,0,0.1))}
.campaign-wrap .cont-section.section03 .section-inner ul > li:nth-child(1)::before {width:11.2rem;background-image:url(../images/section03-photo01-tape.png);top:0;left:17rem}
.campaign-wrap .cont-section.section03 .section-inner ul > li:nth-child(2)::before {width:11rem;background-image:url(../images/section03-photo02-tape.png);top:11.6rem;left:16.3rem}
.campaign-wrap .cont-section.section03 .section-inner ul > li > .child-list-inner {background-repeat:no-repeat;background-position:center top;background-size:contain;padding-top:38.7rem;text-align:center;box-shadow:1.45667px 2.91333px 7.28333px rgba(0, 0, 0, 0.15)}
.campaign-wrap .cont-section.section03 .section-inner ul > li > .child-list-inner h5 {font-weight:600;font-size:2.4rem;line-height:135%;letter-spacing:-0.02em;color:#009A6E;margin-bottom:3rem}
.campaign-wrap .cont-section.section03 .section-inner ul > li > .child-list-inner p {font-weight:400;font-size:1.6rem;line-height:190%;letter-spacing:-0.01em;color:#111}
.campaign-wrap .cont-section.section03 .section-inner ul > li:nth-child(1) > .child-list-inner {height:57rem;background-image:url(../images/section03-photo01.png);margin-top:1.6rem}
.campaign-wrap .cont-section.section03 .section-inner ul > li:nth-child(2) > .child-list-inner {height:60rem;background-image:url(../images/section03-photo02.png);margin-top:13.1rem}

.campaign-wrap .cont-section.section04 {height:130rem;background-image:url(../images/section04-bg.jpg)}
.campaign-wrap .cont-section.section04 .section-inner {padding:8rem 0 7rem;text-align:center;height:auto}
.campaign-wrap .cont-section.section04 .section-inner h4 {width:60.8rem;height:14.9rem;margin:auto;margin-bottom:3.5rem}
.campaign-wrap .cont-section.section04 .section-inner .camp-txt {font-weight:500;font-size:2rem;line-height:150%;letter-spacing:-0.01em;color:#111;margin-bottom:5.5rem}
.campaign-wrap .cont-section.section04 .section-inner > img {width:89.4rem;height:53rem}
.campaign-wrap .cont-section.section04 .section-inner-full::before {content:'';display:block;width:100%;height:0.15rem;position:absolute;top:5.5rem;left:0;background:linear-gradient(90deg,#0BC3A7 0%,#009A6E 29%,#004D9A 50%,#FF7200 71%,#0BC3A7 100%)}
.campaign-wrap .cont-section.section04 .section-inner-full > ul {display:flex;justify-content:space-between;gap:6.5rem;width:85rem;height:24rem;margin:auto}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li {width:24rem;position:relative;text-align:center}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li::before {content:'';display:block;width:11rem;height:11rem;margin:auto;margin-bottom:3rem;background-repeat:no-repeat;background-position:center center;background-size:contain}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li:nth-child(1)::before {background-image:url(../images/section04-icon01.png)}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li:nth-child(2)::before {background-image:url(../images/section04-icon02.png)}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li:nth-child(3)::before {background-image:url(../images/section04-icon03.png)}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li > h5 {font-weight:700;font-size:2.2rem;line-height:100%;letter-spacing:-0.01em;display:flex;align-items:center;justify-content:center;width:14.4rem;height:3.6rem;margin:auto;margin-bottom:1.4rem}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li:nth-child(1) > h5 {background-image:url(../images/section04-list01-titleBg.png);color:#105E4C}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li:nth-child(2) > h5 {background-image:url(../images/section04-list02-titleBg.png);color:#004D9A}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li:nth-child(3) > h5 {background-image:url(../images/section04-list03-titleBg.png);color:#B85300}
.campaign-wrap .cont-section.section04 .section-inner-full > ul > li > p {font-weight:500;font-size:1.8rem;line-height:140%;color:#111}

.campaign-wrap .cont-section.section05 {height:60rem;background-image:url(../images/section05-bg.jpg)}
.campaign-wrap .cont-section.section05 .section-inner {width:120rem;padding:10rem 0}
.campaign-wrap .cont-section.section05 .section-inner .inner-box {display:flex;justify-content:space-between;align-items:flex-start}
.campaign-wrap .cont-section.section05 .section-inner .inner-box .box-left h4 {width:49rem;height:13.7rem;margin-bottom:3.5rem}
.campaign-wrap .cont-section.section05 .section-inner .inner-box .box-left .txt-sub {font-weight:500;font-size:2rem;line-height:150%;letter-spacing:-0.01em;color:#fff;margin-bottom:4rem}
.campaign-wrap .cont-section.section05 .section-inner .inner-box .box-left .camp-txt {font-weight:400;font-size:1.6rem;line-height:140%;color:#fff}
.campaign-wrap .cont-section.section05 .section-inner .inner-box .box-right {width:59rem;height:40rem;background-image:url(../images/section05-img.jpg);background-repeat:no-repeat;background-position:center top;background-size:contain}

.campaign-wrap .cont-section.section06 {height:105rem;background-image:url(../images/section06-bg.jpg)}
.campaign-wrap .cont-section.section06 .section-inner {padding-top:10rem}
.campaign-wrap .cont-section.section06 .section-inner h4 {width:48.1rem;height:13.6rem;margin:auto;margin-bottom:3.5rem}
.campaign-wrap .cont-section.section06 .section-inner .camp-txt {font-weight:400;font-size:2rem;line-height:150%;letter-spacing:-0.01em;color:#fff;margin-bottom:4.5rem;text-align:center}
.campaign-wrap .cont-section.section06 .section-inner .camp-txt strong {font-weight:700;color:#72FFCB}
.campaign-wrap .cont-section.section06 .section-inner ul {display:flex;justify-content:space-between;width:89.4rem;margin:auto}
.campaign-wrap .cont-section.section06 .section-inner ul li img {width:43.7rem;height:57.7rem}

.campaign-wrap .cont-section.section07 {height:98.6rem;background-image:url(../images/section07-bg.jpg)}
.campaign-wrap .cont-section.section07 .section-inner {padding-top:23rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box {width:89.3rem;height:67.5rem;margin:auto;display:flex;justify-content:space-between;align-items:center}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-left {width:37rem;height:100%;position:relative}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-left > p {width:24.4rem;height:3.6rem;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-left .yt-inner {width:37rem;aspect-ratio:9/16;margin-top:0.7rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-left .yt-inner > .yt-box {width:100%;height:100%}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-right {margin-left:6rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-right .camp-txt {position:relative;padding-top:1rem;padding-left:1.5rem;font-weight:500;font-size:2rem;line-height:140%;letter-spacing:-0.01em;color:#fff}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-right .camp-txt strong {font-weight:700}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-right .camp-txt::before {content:'';display:block;width:1.3rem;height:1.2rem;background-image:url(../images/section07-icon-comment.png);background-repeat:no-repeat;background-position:center center;background-size:contain;position:absolute;top:0;left:0}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-right .camp-txt .comment-point {font-weight:400;font-size:2.4rem;line-height:140%;letter-spacing:-0.02em;color:#72FFCB;margin-bottom:1.8rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .box-right .camp-txt .comment-small {font-weight:400;font-size:1.5rem;line-height:140%;letter-spacing:-0.01em;margin-top:1.5rem}

.campaign-wrap .cont-section.section08 {height:103.8rem;background-image:url(../images/section08-bg.jpg)}
.campaign-wrap .cont-section.section08 .section-inner {padding:10rem}
.campaign-wrap .cont-section.section08 .section-inner h4 {width:74.7rem;height:13.6rem;margin:auto;margin-bottom:6.5rem}
.campaign-wrap .cont-section.section08 .section-inner ul {display:flex;justify-content:space-between;width:89.4rem;margin:auto}
.campaign-wrap .cont-section.section08 .section-inner ul li {filter:drop-shadow(0.2rem 0.4rem 0.3rem rgba(0,0,0,0.2))}
.campaign-wrap .cont-section.section08 .section-inner ul li:nth-child(2) {margin-top:6.8rem}
.campaign-wrap .cont-section.section08 .section-inner ul li img {width:43.7rem;height:57.6rem}

.campaign-wrap .cont-section.section09 {height:90rem;background-image:url(../images/section09-bg.jpg)}
.campaign-wrap .cont-section.section09 .section-inner {padding-top:8.1rem}
.campaign-wrap .cont-section.section09 .section-inner h4 {width:48.8rem;height:13.5rem;margin:auto;margin-bottom:3.5rem}
.campaign-wrap .cont-section.section09 .section-inner .txt-sub {font-weight:400;font-size:2rem;line-height:150%;letter-spacing:-0.01em;color:#111;text-align:center}
.campaign-wrap .cont-section.section09 .section-inner .btn-quiz-start {margin-top:4.8rem}
.campaign-wrap .cont-section.section09 .section-inner .btn-quiz-start > a  {display:block;width:41.9rem;height:6.9rem;margin:auto;background-image:url(../images/section09-btn-quizStart.png);background-repeat:no-repeat;background-position:center center;background-size:contain;transition:all 0.3s}
.campaign-wrap .cont-section.section09 .section-inner .btn-quiz-start > a:hover  {background-image:url(../images/section09-btn-quizStart-hover.png)}
.campaign-wrap .cont-section.section09 .section-inner .quiz-info-box {width:45.6rem;height:21.9rem;margin:auto;margin-top:1.8rem;background-image:url(../images/section09-quiz-infoBox-bg.png);background-repeat:no-repeat;background-position:center top;background-size:contain;display:flex;align-items:center;justify-content:center}
.campaign-wrap .cont-section.section09 .section-inner .quiz-info-box > ul {margin-top:2.5rem;display:flex;flex-direction:column;gap:2rem}
.campaign-wrap .cont-section.section09 .section-inner .quiz-info-box > ul > li {font-weight:400;font-size:1.8rem;line-height:160%;letter-spacing:-0.03em;color:#111;display:flex;align-items:center;gap:1rem}
.campaign-wrap .cont-section.section09 .section-inner .quiz-info-box > ul > li > span {display:flex;align-items:center;justify-content:center;width:9rem;height:3rem;background-color:#0BC3A7;color:#fff;font-weight:600;font-size:1.6rem;line-height:150%;letter-spacing:-0.01em;border-radius:0.5rem}

/* quize modal */
html.modal-active,
body.modal-active {overflow:hidden}
.quiz-modal {display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999}
.quiz-modal .modal-container {width:100%;height:100%}
.quiz-modal .modal-container .quizSlide {position:relative;width:100%;height:100%}
.quiz-modal .modal-container .quizSlide .slide {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .3s ease;pointer-events:none;background-repeat:no-repeat;background-position:center center;background-size:cover;display:flex;align-items:center;justify-content:center}
.quiz-modal .modal-container .quizSlide .slide.active {opacity:1;pointer-events:auto;z-index:10}
.quiz-modal .modal-container .quizSlide .slide.slide01 {background-image:url(../images/section09-quiz01-bg.jpg)}
.quiz-modal .modal-container .quizSlide .slide.slide02 {background-image:url(../images/section09-quiz02-bg.jpg)}
.quiz-modal .modal-container .quizSlide .slide.slide03 {background-image:url(../images/section09-quiz03-bg.jpg)}
.quiz-modal .modal-container .quizSlide .slide .slide-inner h5 {margin:auto;margin-bottom:9rem}
.quiz-modal .modal-container .quizSlide .slide.slide01 .slide-inner h5 {width:50.3rem;height:10rem}
.quiz-modal .modal-container .quizSlide .slide.slide02 .slide-inner h5 {width:66.6rem;height:15.5rem}
.quiz-modal .modal-container .quizSlide .slide.slide03 .slide-inner h5 {width:80.2rem;height:10.7rem}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .quiz-options {display:flex;flex-direction:column;gap:4.2rem;align-items:center;justify-content:center}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .quiz-options .option {font-weight:600;font-size:3.4rem;line-height:100%;letter-spacing:-0.01em;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1.6rem}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .quiz-options .option > span {width:3.4rem;height:3.4rem;background-repeat:no-repeat;background-position:center center;background-size:contain}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .quiz-options .option:nth-child(1) > span {background-image:url(../images/section09-quiz-option01.png)}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .quiz-options .option:nth-child(2) > span {background-image:url(../images/section09-quiz-option02.png)}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .quiz-options .option:nth-child(3) > span {background-image:url(../images/section09-quiz-option03.png)}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent {display:none;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:67rem;height:36rem;background-color:#fff;border-radius:1rem;box-shadow:0.2rem 0.2rem 0 0 rgba(0,0,0,0.1)}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent.active {display:block}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer {display:none}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent.active .answer.active {height:100%;display:flex;align-items:center;justify-content:center}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer.correct-answer h6 {width:23rem;height:7.1rem;margin:auto}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer.correct-answer h6::after {content:'';display:block;width:3rem;height:0.2rem;margin:auto;margin-top:0.4rem;background-color:#0BC3A7}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer.wrong-answer h6 {width:21.8rem;height:4rem;margin:auto}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer.wrong-answer h6::after {content:'';display:block;width:3rem;height:0.2rem;margin:auto;margin-top:2rem;background-color:#B63729}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer p {font-weight:500;font-size:1.8rem;line-height:150%;letter-spacing:-0.02em;color:#111;margin-bottom:3rem;margin-top:2rem}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer.wrong-answer p {margin-top:4rem}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer p > strong {font-weight:700}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer .btn-next,
.modal-close,
.btn-event-go {display:inline-block;padding:1.2rem 3rem;font-weight:700;font-size:2rem;line-height:initial;letter-spacing:-0.01em;background-color:#A6A6A6;color:#fff;border-radius:6.3rem;box-shadow:0.2rem 0.2rem 0.2rem 0 rgba(0,0,0,0.1);transition:all 0.3s ease}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer .btn-next:hover,
.modal-close:hover,
.btn-event-go:hover {background-color:#009465}
.quiz-modal .modal-container .quizSlide .slide .slide-inner .quiz-box .answerContent .answer .answerContent-close {width:2.7rem;height:2.7rem;background-image:url(../images/section09-quiz-popup-close.png);background-repeat:no-repeat;background-position:center center;background-size:contain;position:absolute;top:2.5rem;right:2.7rem;cursor:pointer}
.quizModal-close {position:absolute;top:2.5rem;right:2.5rem;width:2.7rem;height:2.7rem;background-image:url(../images/section09-quizModal-close.png);background-repeat:no-repeat;background-position:center center;background-size:contain;z-index:99}


/* 노트북 배율 스타일 지우지 말 것 */
@media (max-width: 1536px) {
    html {overflow-x:hidden;font-size:50%}
    .wrap-camp {width:1536px}
    .campaign-wrap {width:100%}
    .campaign-wrap img {max-width:100%}    
}