@charset "utf-8";
.main-section .inner {display: flex; flex-direction: column; row-gap: 20px;}
.main-section .section-tit {font-size: 40px;}
/* 메인 */
.hero-section {width: 100%; height: 100dvh; min-height: 800px; background-color: gray;}
.hero-section img {width: 100%; height: 100%; object-fit: cover;}
/* 시그니처 */
.signature-section {padding: 140px 0 180px; background:#fff; }
.signature-section .section-tit {text-align: center; position: sticky; top: 100px;}
.signature-section .fixed-slide{width: 100%; display: flex; align-items: start; column-gap: 50px;}
.sig-tab-list{border-left: 1px solid #eee; padding: 15px 20px 15px 15px; width: fit-content; position: sticky; top: 170px; height: 32vw; max-height: 620px; display: flex; align-items: center; justify-content: center;}
.sig-tab-list ul {display: flex; flex-direction: column; gap: 30px;}
.sig-tab{display: flex; flex-direction: column; row-gap: 6px; text-align:left; border:0; background:transparent; cursor:pointer;}
.sig-tab strong {position: relative;}
.sig-tab strong::after {transition: background-color 0.2s; position: absolute; right: calc(100% + 12px); bottom: 50%; transform: translateY(50%); content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background-color: transparent;}
.sig-tab.active .label {background-color: #7A4A6E;}
.sig-tab.active strong {color: #7A4A6E;}
.sig-tab.active strong::after {background-color: #7A4A6E;}
.sig-img-wrap{width: 50%; max-width: 848px; position: sticky; top: 170px; height: 32vw; max-height: 620px; display: flex; align-items: center; justify-content: center;}
.sig-stack{position: relative; width: 100%; height: 100%; max-height: 600px; border-radius: 10px; overflow: hidden;}
.sig-img{position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; will-change: opacity; background-size: cover; background-position: center;}
.sig-img.active{ opacity: 1; }
.sig-img img {width: 100%; height: 100%; object-fit: cover;}
.sig-img .label {position: absolute; left: 20px; bottom: 20px; z-index: 20;}
.sig-cont-wrap{width: 35%; max-width: 613px;}
.sig-cont-wrap .sig-cont {display: flex;  align-items: flex-end; justify-content: space-between; margin-bottom: 24vw; height: fit-content;}
.sig-cont-wrap .sig-cont:last-child {margin-bottom: 20vw;}
.sig-cont-wrap .sig-cont .left {display: flex; flex-direction: column; row-gap: 40px;}
.sig-cont-wrap .sig-tit span {font-size: 18px;}
.sig-cont-wrap .sig-tit h3 {font-size: 48px;}
.sig-cont-wrap .sig-txt strong {font-size: 24px; font-weight: 600;}
.sig-cont-wrap .sig-txt p {margin-top: 10px; font-size: 17px; line-height: 1.5; color: #5B5B5B;}
.sig-cont-wrap .sig-cont .img-wrapper {display: flex; flex-direction: column; row-gap: 14px;}
.sig-cont-wrap .sig-cont .img-wrapper img {max-width: 314px;}
.sig-cont-wrap .sig-cont .right {width: fit-content;}
/* 리핏이 특별한 이유 */
.why-section {background-image: url(../img/main/why-bg.webp); object-position: center bottom; object-fit: cover; padding-top: 40px;}
.why-section .inner2 {display: flex; flex-direction: column; row-gap: 32px; align-items: center;}
.why-section .why-wrap {width: 100%; display: flex;  align-items: center; justify-content: space-between;}
.why-section .why-wrap .left {max-width: 747px; width: 48%;}
.why-section .why-wrap .left img {width: 100%;}
.why-section .why-wrap .right {max-width: 690px; width: 44%; padding-bottom: 156px;}
.why-section .why-wrap .why-tit {display: flex; align-items: flex-end; column-gap: 24px; margin-bottom: 100px;}
.why-section .why-wrap .why-tit strong {font-size: 69px; font-weight: 600;}
.why-section .why-wrap .why-tit .txt-wrap span {font-size: 32px; font-weight: 500;}
.why-section .why-wrap .why-tit .txt-wrap p {margin-top: 10px; font-size: 18px; line-height: 1.4; color: #4B5563;}
.why-section .why-wrap .why-list {display: flex; flex-wrap: wrap; column-gap: 60px; row-gap: 40px;}
.why-section .why-wrap .why-list li {width: calc(100% / 3 - (120px) / 3);}
.why-section .why-wrap .why-list .round-btn{margin-bottom: 4px;}
.why-section .why-wrap .why-list p {display: flex; align-items: center; column-gap: 10px; font-size: 17px; color: #4B5563;}
.why-section .why-wrap .why-list p strong {font-size: 40px; font-weight: 400; color: #111827;}