@charset "UTF-8";

/* background-image preload - 호버 이미지 로드용 */
body::after {
	position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden; 
    z-index:-1;
    
    /* load images */
    content:
    url(../images/icon-voice-play.png)
    url(../images/section05-tab02-img-left.jpg)
    url(../images/section05-tab02-img-right.jpg);
}

html {font-size:62.5%}

.wrap-camp {letter-spacing:-0.01em}
.campaign-wrap {position:relative;width:192rem;margin:auto;font-family:'Pretendard';font-size:2.4rem;font-weight:500;line-height:4rem;color:#121212;letter-spacing:-0.015em}
.campaign-wrap img {vertical-align:bottom}
.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-position:center top;background-repeat:no-repeat;background-size:cover}
.campaign-wrap .cont-section .section-inner {position:relative;width:140rem;margin:auto}

.bg-container {position:absolute;top:0;left:0;width:100%;height:100%}
.bg-container .bg-change {width:100%;height:100%;background-position:center top;background-repeat:no-repeat;background-size:cover;position:absolute;top:0;left:0;opacity:0;transition:opacity 1s ease-in-out}
.bg-container .bg-change:first-child {opacity:1}

.button {pointer-events:auto;cursor:pointer;background:#e7e7e7;border:none;margin:0;font-family:inherit;font-size:inherit;position:relative;display:inline-block;text-align:center}
.button::before,
.button::after {position:absolute;top:0;left:0;width:100%;height:100%}
.button--dione {background:none;font-family:Pretendard,'Noto Sans KR', sans-serif;font-weight:700;font-size:2.8rem;width:32.6rem;height:10rem;line-height:10rem;vertical-align:middle;border-radius:1.5rem;letter-spacing:0}
.button--dione span {display:inline-block;position:relative;color:#fff}
.button--dione::before {content:'';background:#005B48;transition:transform 0.3s cubic-bezier(0.2,1,0.7,1);border-radius:1.5rem;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.31)}
.button--dione:hover>span {color:#fffb9b;outline-offset:12px;outline-color:#005B48}
.button--dione:hover::before {transform:scale3d(0.9, 0.8, 1);box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.31);background-color:#094c3e}
.button--dione::after {content:'';transition:transform 0.3s cubic-bezier(0.2,1,0.7,1);transform:scale3d(0.9, 0.8, 1)}
.button--dione:hover::after {transform:scale3d(1,1,1);outline:4px solid rgba(255, 255, 255, 0.5);-webkit-transition:all 1.25s cubic-bezier(0.19, 1, 0.22, 1);transition:all 2.2s cubic-bezier(0.19, 1, 0.22, 1);border-radius:15px;animation:fadeout 1.2s 1 ease;animation-fill-mode:forwards}

@keyframes fadeout {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

.audio > button {width:10.2rem;height:10.2rem;display:flex;align-items:center;justify-content:center;background-color:#4b433d;border-radius:50%;position:relative;z-index:1;box-shadow:0.2rem 0.2rem 0.7rem 0px rgba(0, 0, 0, 0.4)}
.audio > button > span {font-size:1.5rem;font-weight:700;line-height:1.9rem;color:rgba(255,255,255,0.9);display:flex;flex-direction:column;align-items:center;gap:0.9rem}
.audio > button > span::before {content:'';display:block;width:2.9rem;height:2.9rem;background-image:url(../images/icon-voice-play.png);background-repeat:no-repeat;background-position:center center;background-size:contain;transition:all 0.3s}
.audio > button.playing > span::before {background-image:url(../images/icon-voice-stop.png)}

.audio > .circle-wrapper {position:absolute;width:10.2rem;height:10.2rem;top:0;left:0;display:none;z-index:0}
.audio > .circle-wrapper .wrapper-inner {width:1005;height:100%;position:relative}
.audio > .circle-wrapper .wrapper-inner .circle {position:absolute;top:50%;left:50%;width:10.2rem;height:10.2rem;background:rgba(75,67,61,0.8);border-radius:50%;transform:translate(-50%, -50%) scale(0.5);animation:ripple 3s ease-out infinite}
.audio > .circle-wrapper .wrapper-inner .circle:nth-child(2) {animation-delay:1s}
.audio > .circle-wrapper .wrapper-inner .circle:nth-child(3) {animation-delay:2s}
.audio > button.playing + .circle-wrapper {display:block}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.camp-txt-box {display:flex;flex-direction:column;gap:2.25rem;font-weight:400}
.camp-txt-box > p > strong {font-weight:600}


.campaign-wrap .cont-section.section01 {height:80rem}
.campaign-wrap .cont-section.section01 .section-inner {display:flex;justify-content:flex-end;padding-top:19.2rem}
.campaign-wrap .cont-section.section01 .section-inner .inner-box {width:40rem;margin-right:9.7rem;text-align:center}
.campaign-wrap .cont-section.section01 .section-inner .inner-box h3 {margin-bottom:5rem}
.campaign-wrap .cont-section.section01 .section-inner .inner-box > p {text-shadow:0 1px 10px rgba(0, 0, 0, 0.2)}
.campaign-wrap .cont-section.section01 .section-inner .inner-box .camp-btn-box {margin-top:5rem}

.campaign-wrap .cont-section.section02 {height:75.2rem;background-image:url(../images/section02-bg.jpg)}
.campaign-wrap .cont-section.section02 .section-inner {padding-top:10.8rem;height:100%}
.campaign-wrap .cont-section.section02 .section-inner .yt-inner {margin-bottom:4rem}
.campaign-wrap .cont-section.section02 .section-inner .yt-inner > .yt-box {width:85.2rem;height:47.9rem;margin:auto;box-shadow:9px 9px 32px 2px rgba(0, 0, 0, 0.2)}
.campaign-wrap .cont-section.section02 .section-inner > p {font-size:1.8rem;color:rgba(255,255,255,0.5);text-align:center}

.campaign-wrap .cont-section.section03 {height:90.5rem}
.campaign-wrap .cont-section.section03 .section-inner {display:flex;justify-content:flex-end;padding-top:7rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box {width:50%;padding-left:5.8rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .camp-txt-main {width:50.6rem;height:11.4rem;margin-bottom:4.5rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .camp-txt-box {margin-left:3.3rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .voice {margin:0.45rem 0 0.45rem -1.8rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .voice .comment {position:relative}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .voice .comment > p {width:51.3rem;height:6.1rem;padding-left:1.8rem;background-image:url(../images/section03-txt-voice-bg.png);background-repeat:no-repeat;background-position:center center;background-size:contain;display:flex;align-items:center}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .voice .comment > p > img {width:42.6rem;height:3rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .voice .comment > .audio {position:absolute;top:-2rem;right:1rem}
.campaign-wrap .cont-section.section03 .section-inner .inner-box .voice .desc {font-size:1.8rem;font-weight:700;line-height:2.7rem;margin-top:1.6rem;margin-left:1.8rem}

.campaign-wrap .cont-section.section04 {height:71.9rem}
.campaign-wrap .cont-section.section04 .section-inner {padding-top:10rem}
.campaign-wrap .cont-section.section04 .section-inner .inner-box {margin-left:1.9rem}
.campaign-wrap .cont-section.section04 .section-inner .inner-box .camp-txt-main {width:42.2rem;height:11.3rem;margin-bottom:4.4rem}
.campaign-wrap .cont-section.section04 .section-inner .inner-box .camp-txt-box {margin-left:2.8rem}

.campaign-wrap .cont-section.section05 {background-color:#fff;padding:9rem 0 11.5rem}
.campaign-wrap .cont-section.section05 .section-inner {width:125.8rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu {width:100%}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu > ul {display:flex;gap:0.7rem;justify-content:flex-end;width:calc(100% - 5rem);height:7rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu > ul li {width:23rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu > ul li a {display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#a6a09c;color:rgba(255,255,255,0.75);font-size:2.4rem;line-height:3.3rem;font-weight:600;border:0.2rem solid #fff;border-radius:1rem 1rem 0 0;box-shadow:0.6rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2)}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu > ul li.on a {background-color:#4b433d;color:#fff;font-weight:900}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content {display:none;width:100%;background-color:#4b433d;padding:2.3rem;border-radius:1rem;margin-top:-0.2rem;position:relative}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content .tab-cont-inner {display:flex;width:100%;height:50rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content .tab-cont-inner .inner-photo {width:65.8rem;height:100%}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content .tab-cont-inner .inner-text {width:55.9rem;display:flex;align-items:center;padding-left:7rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content .tab-cont-inner .inner-text .tab-txt-box {display:flex;flex-direction:column;gap:2.25rem;color:#fff;font-size:2.4rem;font-weight:400;line-height:4rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content .tab-cont-inner .inner-text .tab-txt-box strong {font-weight:600}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content .tab-cont-inner .inner-text .tab-txt-box .txt-img {margin:0.45rem 0 0 -1.5rem;width:28.2rem;height:7.2rem}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content.tab-content01 .tab-cont-inner .inner-photo > .comparison-slider .after-img {background-image:url(../images/section05-tab01-img-left.jpg)}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content.tab-content02 .tab-cont-inner .inner-photo > .comparison-slider .after-img {background-image:url(../images/section05-tab02-img-left.jpg)}
.campaign-wrap .cont-section.section05 .section-inner .tab-menu .content.on {display:block}

.comparison-slider {position:relative;width:100%;height:100%;overflow:hidden}
.comparison-slider img {display:block;height:100%}
.after-img {position:absolute;top:0;left:0;width:50%;overflow:hidden;height:100%;background-size:cover;background-repeat:no-repeat}
/* .after-img img {position:absolute;top:0;left:0} */
.slider-bar {position:absolute;top:0;left:50%;width:4.8rem;height:100%;background-image:url(../images/section05-photo-sliderBar-icon.png);background-size:contain;background-repeat:no-repeat;background-position:center center;cursor:ew-resize;z-index:10;transform:translateX(-50%)}
.slider-bar::before {content:'';display:block;position:absolute;top:0;left:50%;width:0.2rem;height:100%;background-color:#efefef}

.campaign-wrap .cont-section.section06 {height:67.2rem;background-image:url(../images/section06-bg.jpg)}
.campaign-wrap .cont-section.section06 .section-inner {display:flex;justify-content:flex-end;padding-top:7rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box {width:50%;padding-left:5.8rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .camp-txt-main {width:36.6rem;height:11.7rem;margin-bottom:4.5rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .camp-txt-box {margin-left:3.3rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .voice {margin:0.45rem 0 0.45rem -1.8rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .voice .comment {position:relative}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .voice .comment > p {width:43.3rem;height:6.1rem;padding-left:1.8rem;background-image:url(../images/section06-txt-voice-bg.png);background-repeat:no-repeat;background-position:center center;background-size:contain;display:flex;align-items:center}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .voice .comment > p > img {width:34.4rem;height:3.2rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .voice .comment > .audio {position:absolute;top:-2rem;right:9.2rem}
.campaign-wrap .cont-section.section06 .section-inner .inner-box .voice .desc {font-size:1.8rem;font-weight:700;line-height:2.7rem;margin-top:1.6rem;margin-left:1.8rem}

.campaign-wrap .cont-section.section07 {height:63.4rem;background-image:url(../images/section07-bg.jpg)}
.campaign-wrap .cont-section.section07 .section-inner {padding-top:10rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box {margin-left:4.7rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .camp-txt-main {width:43.1rem;height:5.1rem;margin-bottom:4rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .camp-txt-box {gap:3rem}
.campaign-wrap .cont-section.section07 .section-inner .inner-box .camp-txt-box .comment {margin-left:-1.6rem;width:32rem;height:7.1rem}

.campaign-wrap .cont-section.section08 {height:66rem;background-image:url(../images/section08-bg.jpg)}
.campaign-wrap .cont-section.section08 .section-inner {padding-top:35.5rem;text-align:center}
.campaign-wrap .cont-section.section08 .section-inner > p {font-size:2.8rem;line-height:4.8rem;color:rgba(255,255,255,0.95);text-shadow:0 0 1.5rem #2b2521;filter:drop-shadow(0 0 1.8rem rgba(43,37,33,0.7))}
.campaign-wrap .cont-section.section08 .section-inner > p > span {font-weight:700}
.campaign-wrap .cont-section.section08 .camp-btn-box {margin-top:3rem}

.campaign-wrap .cont-section.section09 {background-color:#f5f2e9;padding:9rem 0}
.campaign-wrap .cont-section.section09 .section-inner {width:129rem}
.campaign-wrap .cont-section.section09 .section-inner h4 {font-size:3.3rem;font-weight:700;line-height:5.3rem;color:#161015;display:flex;align-items:center;justify-content:center;gap:0.3rem;margin-bottom:5rem}
.campaign-wrap .cont-section.section09 .section-inner h4 > span {margin-top:0.3rem}
.campaign-wrap .cont-section.section09 .section-inner ul {display:flex;justify-content:space-between;margin-bottom:5rem}
.campaign-wrap .cont-section.section09 .section-inner ul > li {width:40.4rem}
.campaign-wrap .cont-section.section09 .section-inner ul > li > .list-inner {background-color:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 0 0.9rem 0.3rem rgba(0, 0, 0, 0.15)}
.campaign-wrap .cont-section.section09 .section-inner ul > li > .list-inner > p {display:flex;align-items:center;justify-content:center;gap:1.5rem;height:7rem;background-color:#22433c;font-size:2.3rem;line-height:3.2rem;letter-spacing:-0.025em;color:#fff;margin-top:0.3rem}
.campaign-wrap .cont-section.section09 .section-inner ul > li > .list-inner > p > span {font-weight:800;color:#f5f2e9;display:flex;align-items:center;gap:1.5rem}
.campaign-wrap .cont-section.section09 .section-inner ul > li > .list-inner > p > span::after {content:'';display:block;width:0.3rem;height:1.1rem;background-color:#fffef2}
.campaign-wrap .cont-section.section09 .section-inner > p {font-size:2rem;font-weight:400;line-height:3.4rem;color:rgba(18,18,18,0.8);text-align:center}

.camp-floating-banner {width:50.6rem;height:8.8rem;background-color:#005b48;border-radius:1rem 1rem 0 0;position:fixed;bottom:-30rem;left:50%;transform:translateX(-50%);z-index:99;transition:all 0.5s}
.camp-floating-banner:hover {background-color:#094c3e}
.camp-floating-banner.active {bottom:0}
.camp-floating-banner > a {display:block;width:100%;height:100%;position:relative}
.camp-floating-banner > a > img {width:44.2rem;height:12.5rem;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}


/* 노트북 배율 스타일 지우지 말 것 */
@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%}    
}