@charset "UTF-8";
@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2")
 format("woff2"); font-weight: 100; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2")
 format("woff2"); font-weight: 200; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2")
 format("woff2"); font-weight: 300; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2")
 format("woff2"); font-weight: 400; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2")
 format("woff2"); font-weight: 500; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2")
 format("woff2"); font-weight: 600; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2")
 format("woff2"); font-weight: 700; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2")
 format("woff2"); font-weight: 800; font-display: swap; } 

@font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2")
 format("woff2"); font-weight: 900; font-display: swap; } 

* { box-sizing: border-box; } 

body,
html { overflow-x: hidden; overflow-y: visible !important; height: auto !important; max-width: 100vw; width: 100%; } 

header { position: unset; } 

#container { margin-top: 68px; } 

/* 공통 영역 */
.sr-only { width: 0px; height: 0px; overflow: hidden; clip: rect(0, 0, 0, 0); position: absolute; top: -9999em; left: -9999em; text-indent: -9999em; } 

.campaign-wrap { margin: 0 auto; max-width: 1920px; font-family:
 "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif !important; } 

.cd-sec,
.cd-sec * { font-family: Pretendard, "Noto Sans KR", sans-serif; } 

.cd-btn-donate { display: inline-flex;padding: 20px 36px;justify-content: center;align-items: center;gap: 8px;border-radius: 500px;background: #fff;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);border: 1px solid #1b9d6c;color: #1b9d6c !important;text-align: center;font-size: 28px;font-weight: 700;line-height: 1;transition: all 0.3s;min-width: 278px; } 

.cd-btn-donate::after { content: ""; display: block; width: 26px; height: 28px; background: url(../images/arrow-gr.png) center center no-repeat; background-size: contain; transition: all 0.3s; } 

.cd-btn-donate.no-bor { border: 0; } 

.cd-btn-donate.size-lg { padding: 23px 72px; } 

.cd-btn-donate:hover { background: #1b9d6c; color: #fff !important; } 

.cd-btn-donate:hover::after { background: url(../images/arrow-wh.png) center center no-repeat; background-size: contain; } 

@keyframes shake-left-right { 
 0% { transform: translate(-3px, 3px) rotate(-4deg); } 

 50% { transform: translate(3px, 3px) rotate(4deg); } 

 100% { transform: translate(-3px, 3px) rotate(-4deg); } 
 }

/* end 공통 영역 */
.cd-sec1 { position: relative; text-align: center; padding: 70px 0 58px; } 

.cd-sec1::after { content: ""; display: block; width: 100%; height: 1968px; background: url(../images/sec1-bg.png) top center no-repeat; position: absolute; top: -68px; left: 0; z-index: 1; } 

.cd-sec1-tit { position: relative; z-index: 5; } 

.cd-sec1 > div { position: relative; z-index: 2; } 

.cd-sec1-calendar { width: 1719px; height: 595px; background: url(../images/sec1-calendar.png) center center no-repeat; margin: -29px auto; position: relative; } 

.cd-sec1-calendar .cd-sec1-img { position: absolute; z-index: 5; } 

.cd-sec1-calendar .cd-sec1-img1 { top: 214px; left: 137px; animation: shake-left-right 1.5s ease infinite; } 

.cd-sec1-calendar .cd-sec1-img2 { top: 52px; left: 520px; animation: 1.5s shake-left-right 0.5s ease reverse infinite; } 

.cd-sec1-calendar .cd-sec1-img3 { top: 349px; left: 934px; animation: 1.5s shake-left-right 0.5s ease infinite; } 

.cd-sec1 .cd-btn-donate { position: relative; z-index: 5; } 

.cd-sec2 { padding: 105px 0 154px; position: relative; z-index: 2; text-align: center; } 

.cd-sec2::before { content: ""; display: block; width: 1179px; height: 435px; background: url(../images/sec2-star.png) center center no-repeat; background-size: contain; position: absolute; top: 144px; left: 50%; transform: translateX(-50%); z-index: 2; } 

.cd-sec2::before ~ * { position: relative; z-index: 5; } 

.cd-sec2-tit { margin-bottom: 40px; } 

.cd-sec2 p { color: #1b2f2b; text-align: center; font-size: 24px; font-weight: 400; line-height: 150%; letter-spacing: -0.72px; } 

.cd-sec2 p + p { margin-top: 18px; } 

.cd-sec2-giftBox { margin: 27px auto 0; position: relative; text-align: center; width: 590px; height: 334px; } 

.cd-sec2-giftBox .gift { position: relative; display: block; margin: 0 auto; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); z-index: 1; } 

.cd-sec2-giftBox .giftBox { display: block; position: absolute; width: 453px; height: 126px; bottom: 6px; left: 52.68%; transform: translateX(-50%); z-index: 5; background: url(../images/sec2-giftBox.png) center center no-repeat; } 

.cd-sec2-giftBox .reward { position: absolute; display: block; z-index: 3; width: 535px; height: 356px; left: 54%; transform: translateX(-50%); bottom: 50px; overflow: hidden; } 

.cd-sec2-giftBox .reward.act img { animation: pop-out ease-out 0.4s forwards; animation-delay: 0.5s; } 

.cd-sec2-giftBox .reward img { display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%) scale(0.5) rotate(0deg); opacity: 0; } 

@keyframes pop-out { 100% { transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); opacity: 1; } 
 }

.cd-sec3 { background: #faf5ef; text-align: center; padding: 194px 0 235px; text-align: center; width: 100%; max-width: 100vw; overflow-x: clip; } 

.cd-sec3 p { color: #222; font-size: 24px; font-weight: 400; line-height: 150%; letter-spacing: -0.72px; margin-top: 25px; } 

.cd-sec3-indicator { margin: 37px 0 19px; } 

.cd-sec3 .indicator-list { display: flex; width: fit-content; padding: 8px; justify-content: center; align-items: center; gap: 8px; border-radius: 50px; border: 0.5px solid #ececec; background: #fdfbfd; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); margin: 0 auto; } 

.cd-sec3 .indicator-list .icon { width: 34px; height: 34px; border-radius: 50%; display: block; } 

.cd-sec3 .indicator-list .step1 .icon { background: url(../images/sec3-tabds1.png) center center no-repeat; background-size: contain; } 

.cd-sec3 .indicator-list .step1.act .icon { background-image: url(../images/sec3-tab1.png); } 

.cd-sec3 .indicator-list .step2 .icon { background: url(../images/sec3-tabds2.png) center center no-repeat; background-size: contain; } 

.cd-sec3 .indicator-list .step2.act .icon { background-image: url(../images/sec3-tab2.png); } 

.cd-sec3 .indicator-list .step3 .icon { background: url(../images/sec3-tabds3.png) center center no-repeat; background-size: contain; } 

.cd-sec3 .indicator-list .step3.act .icon { background-image: url(../images/sec3-tab3.png); } 

.cd-sec3 .indicator-list .step4 .icon { background: url(../images/sec3-tabds4.png) center center no-repeat; background-size: contain; } 

.cd-sec3 .indicator-list .step4.act .icon { background-image: url(../images/sec3-tab4.png); } 

.cd-sec3 .cd-sec3-diary { position: relative; perspective: 1000px; height: 677px; } 

.cd-sec3 .diary-list { position: relative; } 

.cd-sec3 .diary-list .diary-item { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; will-change: transform, opacity, filter; } 

.cd-sec3 .diary-list .diary-item:not(:first-child) { transform: translateX(-50%) translateY(130%); } 

.cd-sec4 { text-align: center; padding: 161px 0 235px; background: url(../images/sec4-bg.png) right center no-repeat; } 

.cd-sec4 .cd-sec4-tit { margin-bottom: 31px; } 

.cd-sec4 .cd-sec4-desc { color: #222; text-align: center; font-size: 24px; font-weight: 400; line-height: 150%; letter-spacing: -0.72px; margin-bottom: 69px; } 

.cd-sec4 .splide__track { width: 100%; height: 100%; } 

.cd-sec4 .splide__slide { width: 591px; height: 316px; } 

.cd-sec4-slide .splide__slide > div { display: block; width: 100%; height: 100%; padding: 61px 80px 20px 39px; text-align: left; } 

.cd-sec4-slide .splide__slide > div h3 { font-size: 40px; font-weight: 700; line-height: 134%; letter-spacing: -1.2px; } 

.cd-sec4-slide .splide__slide > div p { font-size: 21px; font-weight: 400; line-height: 159%; letter-spacing: -0.42px; margin-top: 37px; } 

.cd-sec4-slide .splide__slide.slide1 { background: url(../images/sec4-slide1.png) center center no-repeat; background-size: contain; } 

.cd-sec4-slide .splide__slide.slide1 h3,
.cd-sec4-slide .splide__slide.slide1 p { color: #fff; } 

.cd-sec4-slide .slide2 { background: url(../images/sec4-slide2.png) center center no-repeat; background-size: contain; } 

.cd-sec4-slide .splide__slide.slide2 h3,
.cd-sec4-slide .splide__slide.slide2 p { color: #44495f; } 

.cd-sec4-slide .splide__slide.slide3 { background: url(../images/sec4-slide3.png) center center no-repeat; background-size: contain; } 

.cd-sec4-slide .splide__slide.slide3 h3,
.cd-sec4-slide .splide__slide.slide3 p { color: #333; } 

.cd-sec4-slide .splide__slide.slide4 { background: url(../images/sec4-slide4.png) center center no-repeat; background-size: contain; } 

.cd-sec4-slide .splide__slide.slide4 h3,
.cd-sec4-slide .splide__slide.slide4 p { color: #fffef4; } 

.cd-sec4-slide .splide__slide.slide5 { background: url(../images/sec4-slide5.png) center center no-repeat; background-size: contain; } 

.cd-sec4-slide .splide__slide.slide5 h3,
.cd-sec4-slide .splide__slide.slide5 p { color: #fff; } 

.cd-sec4-slide .splide__slide.slide6 { background: url(../images/sec4-slide6.png) center center no-repeat; background-size: contain; } 

.cd-sec4-slide .splide__slide.slide6 h3,
.cd-sec4-slide .splide__slide.slide6 p { color: #44495f; } 

.cd-sec5 { text-align: center; padding: 128px 0 0; margin-top: 66px; height: 1079px; background: url(../images/sec5-bg.png) center bottom no-repeat; background-size: cover; } 

.cd-sec5 .cd-sec5-tit { margin-bottom: 31px; } 

.cd-sec5 p { color: #222; text-align: center; font-size: 24px; font-weight: 400; line-height: 176%; letter-spacing: -0.72px; margin-bottom: 39px; } 

.cd-sec5 .cd-btn-donate { max-width: 491px; width: 100%; box-sizing: border-box; } 

.cd-sec6 { background: url(../images/sec6-bg.png) center center no-repeat; background-size: cover; padding: 195px 0 217px; display: flex; align-items: center; justify-content: center; align-content: center; gap: 64px; text-align: center; } 

.cd-sec6-tit { margin-bottom: 41px; } 

.cd-sec6-right { position: relative; text-align: left; margin-right: 180px; } 

.cd-sec6-imgBox { position: absolute; right: -280px; bottom: 0; width: 336px; height: 370px; } 

.cd-sec6-imgBox .cd-sec6-img { position: absolute; } 

.cd-sec6-imgBox .cd-sec6-img1 { left: 0; animation: shake-left-right 1.5s infinite; } 

.cd-sec6-imgBox .cd-sec6-img2 { right: 44px; bottom: 0; } 

.cd-sec6-reward { width: 37.5em;height: 36.5em;background: url("../images/sec6-post.png") center center no-repeat;background-size: contain;padding-top: 4.875em;position: relative; } 

.cd-sec6-reward .reward-title { color: #3c322f; text-align: center; font-size: 29px; font-weight: 300; line-height: 133%; letter-spacing: -0.87px; } 

.cd-sec6-reward .reward-title h3 { font-weight: 300; } 

.cd-sec6-reward .reward-title mark { background-color: transparent; position: relative; display: inline-block; font-weight: 700; margin-bottom: 8px; isolation: isolate; } 

.cd-sec6-reward .reward-title mark::after { content: ""; display: block; width: 103%; height: 88%; position: absolute; top: 6%; left: -1.5%; opacity: 0.68; background: #e2e7ff; mix-blend-mode: darken; z-index: -1; } 

.cd-sec6-reward .notice-wrap { margin-top: 0.625em; } 

.cd-sec6-reward .notice-divider { height: 27px; width: 486px; position: relative; padding: 0 33px; display: flex; align-items: center; justify-content: center; align-content: center; gap: 24px; margin: 0 auto; } 

.cd-sec6-reward .notice-divider::after,
.cd-sec6-reward .notice-divider::before { content: ""; display: block; width: 100%; height: 100%; background: url(../images/line.png) center center no-repeat; background-size: contain; } 

.cd-sec6-reward .notice-divider span { display: block; min-width: fit-content; color: #555b77; text-align: center; font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -0.54px; } 

.cd-sec6-reward .notice-list { margin: 1.3125em auto 0; text-align: left; width: 417px; } 

.cd-sec6-reward .notice-list li { display: flex; gap: 10px; } 

.cd-sec6-reward .notice-list li .num { color: #5563a2; text-align: center; font-size: 21px; font-weight: 400; line-height: 100%; letter-spacing: -0.63px; background-color: #ffefb3; min-width: 26px; max-height: 26px; aspect-ratio: 1/1; line-height: 26px; border-radius: 50%; margin-top: 4px; } 

.cd-sec6-reward .notice-list li p { color: #3d4155; font-size: 21px; font-weight: 400; line-height: 150%; letter-spacing: -0.63px; } 

.cd-sec6-reward .notice-list li p strong { font-weight: 700; color: #27221c; } 

.cd-sec6-reward .notice-list li + li { border-top: 1px solid #8485ad; padding-top: 14px; margin-top: 14px; } 

.cd-sec7 { display: flex; align-items: center; justify-content: center; align-content: center; color: #fff; text-align: center; font-size: 21px; font-weight: 400; line-height: 125%; letter-spacing: -0.42px; background: #000; height: 162px; } 

.cd-comp-floating { position: fixed; right: 56px; top: 50%; transform: translateY(-50%); z-index: 100; } 

@media screen and (max-width: 1600px){
 .cd-sec3-diary .diary-item .story-card { height: 75vh; display: block; } 

 .cd-sec3-diary .diary-item .story-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; } 

 .cd-sec1-calendar { zoom: 0.85; } 
 }