@charset "utf-8";

/*
 * File    : style.css
 * Author  : STUDIO-JT (KMS)
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * COMPONENT
 * VISUAL
 * INTRO
 * ENDORSEMENT
 * SINCERE
 * INTERVIEW
 * HONESTY
 * SPONSOR
 * REWARD
 * REVIEW
 * FAQ
 * ANIMATIOM KEYFRAME
 * HOVER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
html { font-size: 0.2666666666666666vw; }

body { --container-width: 420rem; overflow-x: hidden; font-family: var(--font-primary); font-size: 16rem; word-break: keep-all; color: var(--color-black); background: var(--color-white); }
a { color: inherit; text-decoration: none; }

.body-gradient { display: none; }

/* CONTAINER */
.global-container { --section-fvh: 100vh; position: relative; }
html.mobile .global-container { --section-fvh: 100svh; }

/* WRAP */
.wrap { margin: 0 16rem; position: relative; }

/* RESPONSIVE */
.lscreen-slogan, .lscreen-sponsor { display: none; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 80rem; position: absolute; top: 0; left: 0; border-bottom: 1px solid transparent; z-index: 500; transition: height .3s, background-color .3s, border .4s; }
#header.sticky { position: fixed; }

/* LOGO */
#logo { width: 108rem; height: 40rem; position: absolute; left: 16rem; top: 20rem; transition: width .3s, height .3s, top .3s; }
#logo a { display: block; width: 100%; height: 100%; }
#logo a svg { display: block; width: 100%; height: 100%; }
#logo a svg path { fill: var(--color-white); transition: fill .3s; }

/* MINIMIZE */
.minimize#header { height: 64rem; background: var(--color-white); border-bottom-color: var(--color-gray-400); }
.minimize#header #logo { width: 87rem; height: 32rem; top: 16rem; }
.minimize#header #logo a svg path { fill: var(--color-pms-300); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { padding-bottom: 90rem; background: var(--color-pms-300); }

/* 공통 가이드 */
.footer__inner { padding: 28rem 30rem 0; position: relative; font-size: 14rem; line-height: 20rem; font-weight: normal; color: #83afd9; }

.footer__sns { display: flex; align-items: center; justify-content: center; gap: 18rem; margin-bottom: 20rem; }
.footer__sns a { display: block; height: 20rem; background: no-repeat center / contain; opacity: 0.5; }
.footer__sns a.ico-youtube { width: 31rem; background-image: url('../images/common/btn_footer_youtube.png'); }
.footer__sns a.ico-instagram { width: 20rem; background-image: url('../images/common/btn_footer_instagram.png'); }
.footer__sns a.ico-facebook { width: 11rem; background-image: url('../images/common/btn_footer_facebook.png'); }
.footer__sns a.ico-naver-blog { width: 23rem; background-image: url('../images/common/btn_footer_naverblog.png'); }
.footer__sns a.ico-kakao-channel { width: 20rem; background-image: url('../images/common/btn_footer_kakaoch.png'); }
.footer__sns a.ico-post { width: 15rem; background-image: url('../images/common/btn_footer_naverpost.png'); }
.footer__sns a.ico-happybean { width: 18rem; background-image: url('../images/common/btn_footer_happybean.png'); }

.footer_address { display: flex; flex-direction: column; gap: 8rem; word-break: keep-all; }
.footer_address p:first-child { margin-bottom: -8rem; }
.footer_address p > span { display: block; }
.footer_address p strong { font-weight: bold; color: #fff; }

.footer__copyright { margin-top: 12rem; }



/* **************************************** *
 * COMPONENT
 * **************************************** */
/* SECTION */
.global-container section { padding: 80rem 0; position: relative; }
.global-container section.section--compact { padding: 0; }
.global-container section:has(.ribbon-banner) { margin-top: -119rem; padding-bottom: 0; overflow: hidden; }

/* STICKY BANNER */
.sticky-banner { position: fixed; width: calc(100% - 32rem); height: 55rem; left: 16rem; bottom: 16rem; border-radius: var(--radius-01); z-index: 500; }

.sticky-banner__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; background: var(--color-pms-109); border-radius: inherit; box-shadow: 0 0 10rem 0 rgba(0, 0, 0, 0.50); transition: background-color .3s; }
.sticky-banner__link:has(.sticky-banner__lamp) { padding-right: 21rem; }

.sticky-banner__lamp { width: 42rem; position: absolute; top: -9rem; right: 61rem; }
.sticky-banner__lamp:before { content: ''; display: block; width: 106rem; height: 69rem; position: absolute; top: -24rem; left: 50%; background: url(../images/campaign/lamp-product-light.png) no-repeat center / contain; transform: translateX(-50%); opacity: 0; transition: opacity .3s; }
.sticky-banner__lamp > img { display: block; width: 100%; height: auto; position: relative; }

.sticky-banner__link:hover { background: var(--color-pms-7549); }
.sticky-banner__link:hover .sticky-banner__lamp:before { opacity: 1; }

/* RIBBON BANNER */
.ribbon-banner { height: 133rem; position: relative; z-index: 2; }
.ribbon-banner > div { width: 110vw; padding: 8rem 0; position: absolute; }
.ribbon-banner__typo { display: inline-block; vertical-align: middle; font-weight: 600; color: var(--color-white); }
.ribbon-banner__typo:before { content: ''; display: inline-block; vertical-align: middle; width: 36rem; height: 36rem; margin: 0 12rem; position: relative; top: -4rem; background: url(../images/icon/symbol.png) no-repeat center center / contain; }

.ribbon-banner--primary { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: var(--color-pms-7458); }
.ribbon-banner--secondary { top: -13rem; left: 50%; transform: rotate(-12deg) translateX(-50%); background: var(--color-pms-541); }

.ribbon-banner + * { margin-top: -39rem; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.visual { height: var(--section-fvh); }

.visual__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.visual__bg:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.2); }

.visual__content { width: 222rem; position: absolute; top: calc(50% - 10rem); left: 50%; transform: translate3d(-50%, -50%, 0); z-index: 2; }
.visual__content .jt-lazyload { padding-top: 114.41%; }

.visual.jt-autoplay--error .visual__content { top: 18.7%; transform: translate3d(-50%, 0, 0); }

/* SCROLL BUTTON */
.visual__scroll-button { display: flex; flex-direction: column; padding: 0 12rem; position: absolute; left: 50%; bottom: 71rem; transform: translate3d(-50%, -50%, 0); z-index: 3; }
.visual__scroll-button .jt-icon { width: 16rem; }
.visual__scroll-button .jt-icon path { fill: var(--color-white); }
.visual__scroll-button .jt-icon ~ .jt-icon { margin-top: -4rem; }



/* **************************************** *
 * INTRO
 * **************************************** */
.intro { background: var(--color-pms-300); }

/* IMAGES */
.intro__gallery { display: flex; flex-direction: column; gap: 100rem; }
.intro__gallery-item { width: 166rem; position: relative; border-radius: var(--radius-02); overflow: hidden; }
.intro__gallery-item .jt-lazyload { padding-top: 120.48%; }
.intro__gallery-item:nth-child(even) { align-self: flex-end; }
.intro__gallery-item:nth-child(3) { width: 254rem; }
.intro__gallery-item:nth-child(3) .jt-lazyload { padding-top: 62.99%; }

/* TEXT */
.intro__message { width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; }
.intro__message-inner { height: var(--section-fvh); position: relative; }
.intro__message strong { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--color-white); }



/* **************************************** *
 * ENDORSEMENT
 * **************************************** */
.endorsement { overflow: hidden; }

.endorsement__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-gray-600) no-repeat center center / cover; }
html.mobile .endorsement__bg { height: 100lvh; }

.endorsement__content { display: flex; flex-direction: column; gap: 80rem; padding: 166rem 0; }
.endorsement__content p { text-align: center; color: var(--color-white); }



/* **************************************** *
 * SINCERE
 * **************************************** */
.sincere { height: calc(100vh - 80rem); }
html.mobile .sincere { height: calc(100lvh - 80rem); }

.sincere__txt { display: flex; align-items: center; width: 100%; height: 100%; padding-top: 80rem; }
.sincere__txt p + p { margin-top: 24rem; }



/* **************************************** *
 * INTERVIEW
 * **************************************** */
.interview { overflow: hidden; }

.interview__list { display: flex; flex-direction: column; gap: 16rem; }
.interview__list > li { perspective: 1000rem; }

.interview__cards { aspect-ratio: 1 / 1.749; position: relative; border-radius: var(--radius-03); transform-style: preserve-3d; }
.interview__cards.interview__cards--ready { transition: transform 0.5s cubic-bezier(0.42, 0.12, 0.49, 0.97); }

.interview__cards > div { width: 100%; height: 100%; border-radius: inherit; backface-visibility: hidden; }

.interview__card--front { position: relative; }
.interview__card-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: inherit; overflow: hidden; }
.interview__card-bg:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 57.25%, rgba(0, 94, 184, 0.5) 100%); }
.interview__card-bg > span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center / cover; }
.interview__card-title { display: flex; flex-direction: column; align-items: center; gap: 20rem; width: 100%; position: absolute; top: 41rem; left: 0; text-align: center; color: var(--color-white); }
.interview__card-tag { display: inline-flex; align-items: center; justify-content: center; gap: 8rem; padding: 8rem 16rem; border: 4rem solid rgba(255, 255, 255, .6); border-radius: 99rem; }

.interview__card--back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: var(--color-pms-300); transform: rotateY(180deg); }
.interview__card-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24rem; width: 100%; height: 100%; text-align: center; color: var(--color-white); }
.interview__card-icon { width: 52rem; }
.interview__card-icon .jt-lazyload { padding-top: 100%; }

.interview__card-button { display: flex; justify-content: center; align-items: center; gap: 10rem; margin: 56rem 0 0; padding: 8rem 0; color: currentColor; background: transparent; border: none; position: relative; cursor: pointer; }
.interview__card-button:before,
.interview__card-button:after { content: ''; display: block; height: 2rem; position: absolute; bottom: 0; background: var(--color-white); transition: width .4s; transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.interview__card-button:before { width: 100%; right: 0; transition-delay: .2s; }
.interview__card-button:after { width: 0; left: 0; transition-delay: 0s; }
.interview__card-button > i { width: 24rem; }
.interview__card-button > i svg { display: block; width: 100%; height: auto; }

.interview__list > li:nth-child(2) .interview__card--back { background: var(--color-pms-7460); }
.interview__list > li:nth-child(3) .interview__card--back { background: var(--color-pms-541); }



/* **************************************** *
 * HONESTY
 * **************************************** */
.honesty__content > * { background: var(--color-pms-109); position: relative; }

.honesty__picture { overflow: hidden; }
.honesty__picture:after { content: ''; display: block; width: 100%; aspect-ratio: 1 / 0.29; position: absolute; bottom: -9rem; left: 0; background: url(../images/campaign/honesty-picture-layer.svg) no-repeat center / 100% 100%; }
.honesty__picture .jt-lazyload { padding-top: 98.13%; }
.honesty__picture .jt-lazyload img { transform: scale(1.2); }

.honesty__percent { margin-top: -17rem; padding-top: 31rem; text-align: center; }
.honesty__percent span { display: block; margin-top: 4rem; opacity: 0.45; }

.honesty__certify { padding-top: 24rem; padding-bottom: 48rem; text-align: center; }
.honesty__certify-symbol { width: 77rem; margin: 0 auto 12rem; }
.honesty__certify-symbol .jt-lazyload { padding-top: 76.62%; }
.honesty__certify span { display: block; opacity: 0.45; }



/* **************************************** *
 * SPONSOR
 * **************************************** */
.sponsor { background: var(--color-pms-300); }

/* TITLE */
.sponsor__title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16rem; margin-bottom: 40rem; text-align: center; color: var(--color-white); }
.sponsor__title-icon { width: 52rem; }
.sponsor__title-icon .jt-lazyload { padding-top: 100%; }

/* SLIDER */
.sponsor__list { margin: 0 -16rem; overflow: hidden; }

.sponsor__list-item { width: fit-content; padding: 0 12rem; }
.sponsor__list-item:first-child { padding-left: 16rem; }
.sponsor__list-item:last-child { padding-right: 16rem; }

.sponsor__list-image { width: 260rem; position: relative; aspect-ratio: 1 / 1.33; border-radius: var(--radius-01); overflow: hidden; }
.sponsor__list-image img { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.sponsor__list-info { display: flex; flex-direction: column; gap: 8rem; width: 260rem; padding-top: 24rem; }
.sponsor__list-name { color: var(--color-white); }
.sponsor__list-desc { color: var(--color-white); }

.sponsor__list-btn { display: flex; align-items: center; justify-content: center; gap: 8rem; margin-top: 16rem; padding: 12rem 0; background: var(--color-pms-109); border-radius: var(--radius-01); transition: background-color .3s; }
.sponsor__list-btn > i { width: 24rem; height: 24rem; background: url(../images/icon/heart-color.svg) no-repeat center / contain; }

/* BUTTON */
.sponsor__action { margin-top: 40rem; font-size: 0; text-align: center; }

.sponsor__action-btn { display: inline-block; min-width: 260rem; padding: 12rem 24rem; margin: 0; position: relative; background: var(--color-white); border: none; border-radius: 99rem; transition: background-color .3s; cursor: pointer; }

.sponsor__action-label { display: flex; align-items: center; justify-content: center; gap: 10rem; color: var(--color-pms-300); }
.sponsor__action-label .jt-icon { width: 24rem; }
.sponsor__action-label .jt-icon svg path { fill: var(--color-pms-300); }

.sponsor__action-spinner { display: none; width: 60rem; height: 8rem; margin: -4rem 0 0 -30rem; position: absolute; top: 50%; left: 50%; font-size: 0; line-height: 1; text-align: center; }
.sponsor__action-spinner-ball { display: inline-block; width: 8rem; height: 8rem; margin: 0 6rem; background: var(--color-pms-300); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.sponsor__action-spinner-ball:nth-child(1) { animation-delay: -0.32s; }
.sponsor__action-spinner-ball:nth-child(2) { animation-delay: -0.16s; }

.sponsor__action-btn.loading .sponsor__action-label { visibility: hidden; }
.sponsor__action-btn.loading .sponsor__action-spinner { display: block; }

/* HOVER */
.sponsor__list-btn:hover { background: var(--color-pms-7549); }

.sponsor__action-btn:hover { background: var(--color-gray-400); }



/* **************************************** *
 * REWARD
 * **************************************** */
.global-container section.reward { padding-bottom: 0; }

/* INTRO */
.reward__intro { text-align: center; }

.reward__intro-product { margin: 20rem -16rem 32rem; }
.reward__intro-product .jt-lazyload { padding-top: 123.73%; }

.reward__intro ul { display: flex; flex-direction: column; gap: 16rem; margin-top: 24rem; }
.reward__intro li { color: var(--color-gray-800); }
.reward__intro li:before { content: ''; display: inline-block; vertical-align: baseline; width: 4rem; height: 4rem; position: relative; left: -2rem; top: -3rem; background: var(--color-pms-7545); border-radius: 50%; }

/* STORY */
.reward__story { padding: 60rem 0; position: relative; }
.reward__story:before { content: ''; width: 100%; height: 60%; position: absolute; left: 0; bottom: 0; background: linear-gradient(0deg, #FFEDA5 45.67%, #FFF 100%); }

.reward__story-cover { position: relative; border-radius: var(--radius-03); overflow: hidden; }
.reward__story-cover > p { width: 100%; position: absolute; left: 0; top: 50%; text-align: center; color: var(--color-white); transform: translateY(-50%); }
.reward__story-bg { padding-top: 163.26%; position: relative; border-radius: inherit; }
.reward__story-bg:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .2); border-radius: inherit; }

.reward__story-source { margin-top: 60rem; text-align: center; }
.reward__story-logo { width: 260rem; margin: 40rem auto 0; }
.reward__story-logo .jt-lazyload { padding-top: 18.84%; }

/* GALLERY */
.reward__gallery { display: flex; flex-direction: column; gap: 16rem; padding-bottom: 120rem; background: #FFEDA5; overflow: hidden; }
.reward__gallery-item { width: 260rem; padding: 0 8rem; border-radius: var(--radius-02); overflow: hidden; }
.reward__gallery-item .jt-lazyload { padding-top: 181.14%; border-radius: inherit; }



/* **************************************** *
 * REVIEW
 * **************************************** */
.review__inner { padding: 120rem 0 80rem; background: var(--color-pms-300); }

/* TITLE */
.review__title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16rem; margin-bottom: 60rem; text-align: center; color: var(--color-white); }

/* SLIDER */
.review__list { margin: 0 -16rem; overflow: hidden; }

.review__list-item { width: fit-content; padding: 0 12rem; }
.review__list-item:first-child { padding-left: 16rem; }
.review__list-item:last-child { padding-right: 16rem; }

.review__list-thumb { width: 260rem; position: relative; border-radius: var(--radius-03); overflow: hidden; }
.review__list-thumb .jt-lazyload { padding-top: 133.07%; }
.review__list-thumb:has(.review__list-icon--comment) { cursor: pointer; }

.review__list-icon { width: 52rem; height: 52rem; margin: 0; padding: 0; position: absolute; right: 20rem; bottom: 20rem; background: var(--color-white); border: none; border-radius: 100%; transition: background-color .3s; cursor: pointer; }
.review__list-icon .jt-icon { width: 100%; }
.review__list-icon .jt-icon svg path { fill: var(--color-pms-300); }

.review__list-report { display: flex; flex-direction: column; justify-content: center; gap: 16rem; padding: 20rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: var(--color-white); background: color-mix(in srgb, var(--color-pms-541) 90%, transparent 10%); opacity: 0; visibility: hidden; }

.review__list-info { display: flex; flex-direction: column; gap: 12rem; width: 260rem; padding-top: 24rem; color: var(--color-white); }



/* **************************************** *
 * FAQ
 * **************************************** */
/* TITLE */
.faq__title { margin-bottom: 40rem; text-align: center; }



/* **************************************** *
 * ANIMATIOM KEYFRAME
 * **************************************** */
/* LOADMORE BOUNCE */
@keyframes bounce-delay {
    0%, 80%, 100% { scale: 0; }
    40% { scale: 1; }
}

/* BACKGROUND LIGHT */
@keyframes twinkle {
    0% { transform: translate(-50%, -50%) scale(0, 0); }
    50% { transform: translate(-50%, -50%) scale(1, 1); }
    100% { transform: translate(-50%, -50%) scale(0, 0); }
}



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* HOVER */
    .interview__list > li:hover .interview__cards.interview__cards--ready { transform: rotateY(-180deg); }

    .interview__card-button:hover:before { width: 0; transition-delay: 0s; }
    .interview__card-button:hover:after { width: 100%; transition-delay: .2s; }

    /* REVIEW */
    .review__list-thumb:hover .review__list-icon--comment { background: var(--color-pms-7457); }
    .review__list-icon--play:hover { background: var(--color-pms-7457); }

}