@charset "utf-8";

:root { --home-muted: #f5f5f5; --home-placeholder: #aaaaaa; --home-border: #dddddd; --home-shadow-card: 4px 4px 20px rgba(0, 0, 0, 0.07); --home-shadow-photo: 29px 22px 56px rgba(0, 0, 0, 0.21); }

/* Layout */
footer { padding: 2.6rem 0; font-size: var(--fs-20); text-align: center; background: #FFFFFF33; }

/* S: home 레이아웃 */
.home-main { position: relative; overflow: hidden; }

/* S: home 히어로 */
.home-hero { position: relative; padding-bottom: 21rem; }
.home-hero .inner { display: flex; flex-direction: column; height: 100%; }
.home-hero .home-logo { width: 100%; padding: 3.2rem 0; }
.home-hero .home-logo img { width: 20.4rem; }

.home-hero__photos { position: absolute; inset: 0; pointer-events: none; }
.home-hero__photos div:nth-child(1) { position: absolute; width: 36%; left:0; bottom:0; }
.home-hero__photos div:nth-child(2) { position: absolute; width: 32%; right:0; bottom:0; }

.home-hero__title { position: relative; margin: 16.8rem auto 5.5rem; text-align: center; }
.home-hero__title .home-hero__deco { position: absolute; width: 48%; left:50%; top:0; transform: translate(-50%, -60%); }
.home-hero__slogan { position: relative; width: fit-content; margin:0 auto; text-align: center; }

@media screen and (max-width: 1500px) { 
	.home-hero { padding-bottom: 18rem; }
	.home-hero__title { width: 80%; margin: 14rem auto 4.8rem; }
}
@media screen and (max-width: 1024px) { 
	.home-hero { padding-bottom: 15rem; }
	.home-hero__title { margin: 12rem auto 4rem; }
}
@media screen and (max-width: 500px) { 
	.home-hero__title { width: 100%; }
}


/* S: home 인트로 카드 */
.home-intro { position: relative; }
.home-intro::before { content: ""; position: absolute; left: 0; top: 8%; transform: translateX(-40%); width: 32.2rem; aspect-ratio: 322/298; background: url('/resources/img/main/1__4.svg') no-repeat center center / contain; pointer-events: none; }
.home-intro::after { content: ""; position: absolute; right: 0; top: 24%; transform: translateX(50%); width: 20.4rem; aspect-ratio: 204/326; background: url('/resources/img/main/1__3.svg') no-repeat center center / contain; pointer-events: none; }
.home-intro__card { position: relative; z-index: 1; background: #fff; box-shadow: var(--home-shadow-card); padding: 10rem 3rem; text-align: center; }
.home-intro__card::before { content: ""; position: absolute; left: -3rem; top: -3rem; width: 7rem; aspect-ratio: 70/72; background: url('/resources/img/main/1__5.svg') no-repeat center center / contain; pointer-events: none; }
.home-intro__card::after { content: ""; position: absolute; right: -3rem; bottom: -3rem; width: 7.8rem; aspect-ratio: 78/64; background: url('/resources/img/main/1__6.svg') no-repeat center center / contain; pointer-events: none; }
.home-intro__title { font-size: var(--fs-40); font-weight: 800; line-height: 1.3; margin-bottom: 6rem; }
.home-intro__text { max-width: 92rem; margin: 0 auto; font-size: var(--fs-26); }
.home-intro__text p { line-height: 1.5; }
.home-intro__text p + p { margin-top: 3.2rem; line-height: 1.5; }
.home-intro__text p u { position: relative; text-decoration: none; }
.home-intro__text p u::after { content: ""; position: absolute; left: -5%; bottom: 0; transform: translateY(100%); width: 110%; aspect-ratio: 505/15; background: url('/resources/img/main/1__underline.svg') no-repeat center center / contain; }

/* S: home 상품 롤링 스트립 */
.home-strip-wrap { position: relative; padding: 13rem 0 8rem; overflow: hidden; }
.home-strip-wrap::before, 
.home-strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 2; pointer-events: none; }
.home-strip-wrap::before { left: 0; background: linear-gradient(90deg, #ededed50, transparent); }
.home-strip-wrap::after { right: 0; background: linear-gradient(270deg, #ededed50, transparent); }
.home-strip__deco { position: absolute; left: 10%; bottom: 6rem; width: 34rem; height: auto; pointer-events: none; }
.home-strip { display: flex; gap: 0; width: max-content; animation: home-strip-scroll 20s linear infinite; }
.home-strip__item { flex: 0 0 auto; height: 33.6rem; width: auto; max-width: 75.6rem; }
.home-strip__item img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover; }
@keyframes home-strip-scroll { 
	0% { transform: translateX(0); } 
	100% { transform: translateX(-50%); } 
}

@media screen and (max-width: 1500px) { 
	.home-strip { height: 30rem; }
	.home-intro::before { display: none; }
	.home-intro::after { display: none; }
	.home-intro__card::before { width: 6rem; height: 6rem; left: -2rem; top: -2rem; }
	.home-intro__card::after { width: 6.8rem; height: 6.8rem; right: -2rem; bottom: -2rem; }

}
@media screen and (max-width: 768px) { 
	.home-intro__card { padding: 6rem 2.4rem; } 
	.home-strip { height: 20rem; }
}
@media screen and (max-width: 500px) { 
	.home-strip__deco { width: 20rem; }
	.home-intro__text p br{ display: none; }
}


/* S: home LIFEWEAR 정보 블록 */
.home-info { position: relative; padding: 16rem 0; background: #fff; }
.home-info::before { content: ""; position: absolute; right: 0; bottom: 20%; transform: translateX(10%); width: 18.8rem; aspect-ratio: 188/208; background: url('/resources/img/main/2__4.svg') no-repeat center center / contain; pointer-events: none; }
.home-info__title { display: flex; flex-wrap:wrap; gap: 6rem 2rem; justify-content: space-between; align-items: end; margin-bottom: 10rem; }
.home-info__title-block img { transform: translateX(-4.8rem); }
.home-info__heading { font-size: var(--fs-42); font-weight: 800; line-height: 1.3; margin-bottom: 1.7rem; }
.home-info__lead { font-size: var(--fs-30); line-height: 1.5; }
.home-info__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12rem 6rem; }
.home-info__col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; padding-bottom: 4rem; border-bottom: 2px solid var(--main-black); }
.home-info__col-status { width: 12rem; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; padding-top: 2px; border-radius: 50%; font-size: var(--fs-20); font-weight: 800; line-height: 1.3; text-align: center; }
.home-info__columns li:nth-child(1) .home-info__col-status { background: var(--key-color); color:white; }
.home-info__columns li:nth-child(2) .home-info__col-status { border: 3px solid var(--key-color); color:var(--key-color); background: white; }
.home-info__col-icon { display: inline-block; width: 4rem; height: 4rem; margin-bottom: 1.6rem; }
.home-info__col-icon img { width: 100%; height: 100%; object-fit: contain; }
.home-info__col-title { font-size: var(--fs-32); font-weight: 600; }
.home-info__col-sub { font-size: var(--fs-20); color: var(--sub-black); margin-top: 1.6rem; }
.home-info__col-body { font-size: var(--fs-24); }
.home-info__col-body p { line-height: 1.5; }
.home-info__col-body p + p { margin-top: 3.7rem; }

@media screen and (max-width: 1500px) { 
	
}
@media screen and (max-width: 1024px) { 
	.home-info__title-block { width: 43rem; }
	.home-hero__photos div:nth-child(1) { bottom:auto; top:30%; }
	.home-hero__photos div:nth-child(2) { bottom:auto; top:30%; }
}
@media screen and (max-width: 900px) { 
	.home-info__columns { grid-template-columns: 1fr; } 
	.home-info::before { opacity: 0.35; }
}
@media screen and (max-width: 500px) { 
	.home-info__title-block { width: 34rem; }
	.home-info__title-block img { transform: translateX(-3rem); }
	.home-info__lead br { display: none; }
	.home-info__col-status { width: 10rem; }
}


/* S: home 설문 */
.home-survey { padding: 20rem 0 8rem; }
.home-survey-lead { margin-bottom: 8rem; text-align: center; }
.home-survey-lead__title { font-size: var(--fs-42); font-weight: 700; line-height: 1.3; }
.home-survey-lead__title u { z-index: 1; position: relative; text-decoration: none; }
.home-survey-lead__title u::after { z-index: -1; content: ""; position: absolute; left: -2%; bottom: -4px; width: 104%; height:60%; background: var(--key-color); }
.home-survey-lead__note { margin-top: 2rem; font-size: var(--fs-26); line-height: 1.5; }

.home-survey-block, 
.home-summary { position: relative; background: #fff; border-radius: 3.2rem; padding: 6.4rem; margin-bottom: 3.2rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03); }
.home-survey-block__label { display: block; font-size: var(--fs-24); font-weight: 800; margin-bottom: 1rem; }
.home-survey-block__title { font-size: var(--fs-30); font-weight: 600; margin-top: 1.4rem; margin-bottom: 4rem; }
.home-survey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.4rem 1.6rem; }
.home-survey-grid-wrap { position: relative; }
.home-survey-block__cat1 .home-survey-block__label { color: var(--key-color); }
.home-survey-block__cat2 .home-survey-block__label { color: var(--sub-key-color); }

.home-survey-card { position: relative; }
.home-survey-card__visual { position: relative; background: var(--home-muted); border-radius: 1.6rem; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; }
.home-survey-card__visual img { max-width: 100%; max-height: 26rem; width: auto; height: auto; object-fit: contain; }
.home-survey-card__detail { position: absolute; right: 3.2rem; bottom: 3.2rem; width: 6.4rem; height: 6.4rem; padding: 0; border: 0; background: url('/resources/img/main/ico_detail.svg') no-repeat center center / contain; cursor: pointer; z-index: 2; opacity: 0.6; }
.home-survey-card__meta { position: relative; display: flex; align-items: flex-start; gap: 1.2rem; margin-top: 1.6rem; }
.home-survey-card__meta input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-survey-card__meta label { position: relative; padding-left: 4.4rem; font-size: var(--fs-24); font-weight: 500; cursor: pointer; }
.home-survey-card__meta label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3.2rem; aspect-ratio: 1/1; background: url('/resources/img/main/ico_radio.svg') no-repeat center center / contain; }
.home-survey-block__cat1 .home-survey-card__meta input:checked ~ label::before { content: ""; background: url('/resources/img/main/ico_radio_checked_1.svg') no-repeat center center / contain; }
.home-survey-block__cat2 .home-survey-card__meta input:checked ~ label::before { content: ""; background: url('/resources/img/main/ico_radio_checked_2.svg') no-repeat center center / contain; }
.home-survey-block__cat1 li:has(.home-survey-card__meta input:checked) .home-survey-card__visual { border-color: var(--key-color); }
.home-survey-block__cat2 li:has(.home-survey-card__meta input:checked) .home-survey-card__visual { border-color: var(--sub-key-color); }

#home-survey-grid-wrap-cat1 { scroll-margin-top: 16rem; }
#home-survey-grid-wrap-cat2 { scroll-margin-top: 16rem; }

@media screen and (max-width: 1500px) { 
	.home-survey { padding: 16rem 0 8rem; }
}
@media screen and (max-width: 900px) { 
	.home-survey-grid { grid-template-columns: repeat(2, 1fr); } 
}

@media screen and (max-width: 768px) { 
	.home-survey-block,
	.home-summary { padding: 4rem 1.6rem 5rem; border-radius: 2rem; } 
}

@media screen and (max-width: 500px) { 
	.home-survey-grid { grid-template-columns: 1fr; } 
	.home-survey-grid--cat1, 
	.home-survey-grid--cat2 { grid-template-columns: 1fr; } 
}


/* S: home 제출 전 요약 */
.home-summary__title { position: relative; font-size: var(--fs-32); font-weight: 600; margin-bottom: 2.4rem; }
.home-summary__desc { position: relative; font-size: var(--fs-24); margin-bottom: 4rem; line-height: 1.4; }
.home-summary__panels { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: start; margin-top: 7.2rem; margin-bottom: 5rem; text-align: center; }
.home-summary__divider { width: 1px; align-self: stretch; min-height: 24rem; margin: 0 auto; background: #DDDDDD; }

.home-summary__tags { display: flex; justify-content: center; }
.home-summary__tag { display: inline-flex; align-items: center; justify-content: center; padding: 8px 2rem; font-size: var(--fs-18); font-weight: 700; color: #fff; }
.home-summary__tag--c1 { background: var(--key-color); }
.home-summary__tag--c2 { background: var(--sub-key-color); }
.home-summary__panel-title { font-size: var(--fs-26); font-weight: 700; margin:2rem auto 4rem; }
.home-summary__thumbs { display: flex; justify-content: center; gap:4rem; }
.home-summary__thumb { position: relative; width: 12rem; height: 10rem; border-radius: 0.4rem; background: var(--home-muted); }
.home-summary__thumb img { width: 100%; height: 100%; object-fit: contain; }
.home-summary__thumb figcaption { font-size: var(--fs-16); line-height: 1.2; padding: 1.2rem 0 0; }
.home-summary__thumb--empty { border: 2px dashed var(--home-placeholder); background: #F5F5F5; transition: .3s; }
.home-summary__thumb--empty:hover { background: #eee; }
.home-summary__thumb-remove { position: absolute; top: 0.4rem; right: 0.4rem; width: 2.4rem; height: 2.4rem; border: 1px solid var(--home-border); border-radius: 0.4rem; background: #fff; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.home-summary__thumb-remove img { width: 1.6rem; height: 1.6rem; object-fit: contain; }

@media screen and (max-width: 900px) { 
	.home-summary__panels { grid-template-columns: 1fr; gap:8rem; } 
	.home-summary__divider { display: none; } 
	.home-summary__thumbs { gap: 2rem; }
	.home-summary__thumb figcaption { padding: 0.8rem 0 0; }
}
@media screen and (max-width: 500px) { 
	.home-summary__thumbs { gap: 0.4rem; }
	.home-summary__thumb { width: 11rem; }
	.home-survey-card__detail { right: 1.6rem; bottom: 1.6rem; }
}

/* S: home 폼 하단 */
.home-form-footer { position: relative; max-width: 48rem; margin: 8rem auto 0; }
.home-form-row { display: flex; align-items: center; gap: 1.6rem 2rem; margin-bottom: 6rem; }
.home-form-row__label { font-size: var(--fs-26); font-weight: 600; }
.home-form-row__star { position: relative; top:-1rem; color: var(--key-color); }
.home-form-row__input-wrap { flex: 1; border-bottom: 2px solid var(--main-black); padding: 1.2rem; }
.home-form-row__input { width: 100%; border: 0; background: transparent; font-size: var(--fs-24); outline: none; }
.home-form-row__input::placeholder { color: var(--home-placeholder); }
.home-agree { display: flex; justify-content: center; align-items: center; gap: 1.2rem 2rem; margin-bottom: 1.6rem; font-size: var(--fs-18); font-weight: 500; text-align: center; }
.home-agree p { line-height: 1.25; }
.home-agree__check { font-size: var(--fs-18); font-weight: 500; }
.home-agree__check input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-agree__check label { position: relative; padding-left: 2.8rem; cursor: pointer; }
.home-agree__check label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; aspect-ratio: 1/1; background: url('/resources/img/main/ico_check.svg') no-repeat center center / contain; }
.home-agree__check input:checked + label::before { background: url('/resources/img/main/ico_checked.svg') no-repeat center center / contain; }
.home-agree__detail { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem; background: #F5F5F5; border-radius: 0.4rem; font-size: var(--fs-16); font-weight: 600; color: var(--sub-key-color); text-decoration: none; line-height: 1; }
.home-submit { width: 100%; display: block; padding: 2.8rem 2rem; background: var(--main-black); color: #fff; font-size: var(--fs-26); font-weight: 600; border-radius: 1.2rem; cursor: pointer; }
.home-submit:hover { opacity: 0.92; }


/* S: home 설문 알림 */
.alert-message { visibility: hidden; opacity: 0; transition: 0.3s; position: absolute; top: -2rem; right: 0; transform: translateY(-100%); padding: 1.2rem 2rem; background: var(--main-black); color: #fff; font-weight: 700; z-index: 5; border-radius: 0.4rem; }
.alert-message.active { visibility: visible; opacity: 1; }
.alert-message::before { content: "⚠️"; margin-right: 4px; }
.alert-message::after { content: " "; position: absolute; bottom: 0; left: 2rem; transform: translateY(100%); border: 8px solid transparent; border-top: 12px solid var(--main-black); }


.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; }
.popup.active { opacity: 1; visibility: visible; }
.popup-container { position: relative; max-width: 82rem; width: 92%; background: #fff; border-radius: 1.6rem; padding: 7.2rem 4rem 4rem; }
.popup-inner { position: relative; height:70vh; overflow-y: auto; }
.popup-close { text-indent: -9999px; overflow: hidden; position: absolute; top: 2.4rem; right: 2.4rem; width: 4.8rem; height: 4.8rem; cursor: pointer; background: url('/resources/img/main/popup_close.svg') no-repeat center center / contain; }

/* 인덱스 팝업 */
.divpop { position: fixed; background: #fff; border: 1px solid #eee; z-index: 9999; }
.divpop .close_box { padding: 5px; color: #000; border-top: 1px solid #eee; }
.divpop .close_box label { font-size: 12px; }
.divpop .close_box .close { float: right; padding-top: 3px; cursor: pointer; font-size: 14px; color: #999; }
@media screen and (max-width: 1200px) { .divpop { left: 0px !important; } }
@media screen and (max-width: 768px) { .divpop { width: 100% !important; height: auto !important; top: 0px !important; left: 0px !important; } }

/* S: 제출 완료 페이지 */
.home-main--complete { overflow: visible; }

.home-complete { min-height: calc(100vh - 7.2rem); display: flex; align-items: center; justify-content: center; }
.home-complete__card {	position: relative;	max-width: 108rem;	margin: 0 auto;	background: #fff;	border-radius: 3.2rem;	padding: 8rem 4rem 7.2rem;	box-shadow: var(--home-shadow-card);	text-align: center;}
.home-complete__icon {	width: 8rem;	height: 8rem;	margin: 0 auto 3.2rem;	display: flex;	align-items: center;	justify-content: center;	border-radius: 50%;	background: rgba(102, 243, 51, 0.15);}
.home-complete__icon img { width: 4rem; height: 4rem; max-width: none; object-fit: contain; }
.home-complete__title {	font-size: var(--fs-42);	font-weight: 800;	line-height: 1.35;	margin-bottom: 2.4rem;	color: var(--main-black);}
.home-complete__lead {	font-size: var(--fs-28);	font-weight: 600;	line-height: 1.5;	margin-bottom: 2rem;	color: var(--main-black);}
.home-complete__desc {	font-size: var(--fs-24);	line-height: 1.55;	color: var(--sub-black);	margin-bottom: 5.6rem;}
.home-complete__actions { max-width: 48rem; margin: 0 auto; }
.home-complete__btn { text-align: center; }

@media screen and (max-width: 768px) {
	.home-complete__card { padding: 5.6rem 2.4rem 5rem; border-radius: 2rem; }
	.home-complete__title { font-size: var(--fs-36); }
	.home-complete__lead { font-size: var(--fs-24); }
	.home-complete__desc { font-size: var(--fs-22); }
	.home-complete__br { display: none; }
}
@media screen and (max-width: 500px) {
	.home-complete { padding-bottom: 12rem; }
	.home-complete__icon { width: 7.2rem; height: 7.2rem; margin-bottom: 2.4rem; }
}