@charset "utf-8";

/* 커뮤니티 */
.comm-nav {margin:60px 0 90px; text-align:center;}
.comm-nav ul {display:flex; justify-content:center; gap:10px;}
.comm-nav ul li {min-width:120px;}
.comm-nav ul li a {display:block;}
.comm-nav ul li a:hover .ico {background:var(--color-secondary);}
.comm-nav ul li .ico {display:flex; justify-content:center; align-items:center; width:78px; height:78px; margin:0 auto; background:#f1f1f1; border-radius:20px; transition:.2s;}
.comm-nav ul li .ico img {width:36px;}
.comm-nav ul li .txt {display:block; margin-top:13px; font-size:18px; font-weight:500; line-height:1.3em;}

.gallery-carousel {position:relative;}
.gallery-carousel .gallery-item {width:auto; padding:0; margin:0;}
.gallery-carousel .slide-btn {display:flex; align-items:center; justify-content:center; position:absolute; top:20%; z-index:10; width:32px; height:32px; background:transparent; border:0; transition:.2s; opacity:.4;}
.gallery-carousel .slide-btn:hover {opacity:1;}
.gallery-carousel .slide-btn svg {width:14px; height:auto;}
.gallery-carousel .slide-btn.prev {left:-70px;}
.gallery-carousel .slide-btn.next {right:-70px;}
.gallery-carousel .slide-btn.swiper-button-disabled {display:none;}
.gallery-carousel .swiper-pagination {display:none;}

/* 고객센터 */
.cs-wrap {max-width:1000px; margin:0 auto;}

.cs-menu {margin:-10px 0 100px;}
.cs-menu ul {display:flex; justify-content:center; gap:20px;}
.cs-menu ul li {width:160px;}
.cs-menu ul li a {display:block; position:relative; height:198px; padding:16px 23px; border-radius:10px; background-position:100% 100%; background-repeat:no-repeat;}
.cs-menu ul li a:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid #dfdfdf; border-radius:10px; pointer-events:none;}
.cs-menu ul li a small {display:inline-block; vertical-align:middle; color:#a8a8a8; font-size:12px; font-weight:500; line-height:1em; letter-spacing:-.01em;}
.cs-menu ul li a strong {font-size:18px; line-height:1.3em; letter-spacing:-.04em;}
.cs-menu ul li a:hover *,
.cs-menu ul li.active a * {color:var(--color-third);}
.cs-menu ul li a:hover::after,
.cs-menu ul li.active a::after {border:2px solid var(--color-third);}
.cs-menu ul li:nth-child(1) a {background-image:url('/images/sub/cs-nav-1.jpg');}
.cs-menu ul li:nth-child(2) a {background-image:url('/images/sub/cs-nav-2.jpg');}
.cs-menu ul li:nth-child(3) a {background-image:url('/images/sub/cs-nav-3.jpg');}
.cs-menu ul li:nth-child(4) a {background-image:url('/images/sub/cs-nav-4.jpg');}

.quick-cs {position:fixed; top:217px; right:50%; z-index:50; width:214px; margin-right:600px; padding:30px; background:#f6f6f6; border-radius:10px;}
.quick-cs .cs {margin-bottom:28px;}
.quick-cs .cs h3 {font-size:16px; line-height:1.3em;}
.quick-cs .cs .hour {margin:9px 0 14px; color:var(--color-third); font-size:26px; line-height:1.3em; letter-spacing:-.04em;}
.quick-cs .cs .etc {color:#878787; font-size:13px; line-height:1.8em;}
.quick-cs .links {display:grid; gap:14px;}
.quick-cs .link {display:flex; align-items:center; font-size:14px; font-weight:700; line-height:1.4em;}
.quick-cs .link img {width:34px; min-width:34px; margin-right:10px;}

.inquiry-wrap h3 {margin-bottom:65px; text-align:center; font-size:24px; line-height:1.5em; letter-spacing:-.04em;}
.inquiry-wrap .form {max-width:360px; margin:0 auto;}
.inquiry-wrap .form  {display:grid; gap:30px;}
.inquiry-wrap .required {color:#f84949;}
.inquiry-wrap .group {display:grid; gap:8px;}
.inquiry-wrap .tit {display:block; margin-bottom:4px; color:#878787; font-size:15px; font-weight:500; line-height:1.3em;}
.inquiry-wrap .input {display:block; width:100%; color:#a8a8a8;}
.inquiry-wrap textarea.input {height:120px;}
.inquiry-wrap .submit {margin-top:50px; text-align:center;}

/* 특가 */
.promotion-banner {text-align:center; margin-bottom:var(--space-30);}

/* 브랜드 */
.brand-content .item {padding:var(--space-100) 0;}
.brand-content .item .wrap {display:flex; align-items:flex-start; gap:var(--space-50);}
.brand-content .item .content {flex:1; min-width:0;}
.brand-content .item .content .num {display:inline-flex; align-items:center; justify-content:center; margin-bottom:clamp(18px, calc(24 / var(--inner) * 100vw ), 24px); width:56px; height:32px; color:#fff; font-size:var(--font-size-18); font-weight:700; line-height:1.2em; background:#3F80EA; border-radius:40px;}
.brand-content .item .content h3 {margin-bottom:clamp(24px, calc(40 / var(--inner) * 100vw ), 40px); color:#242424; font-size:var(--font-size-30); line-height:1.5em; letter-spacing:-.04em;}
.brand-content .item .content p {margin-bottom:clamp(18px, calc(24 / var(--inner) * 100vw ), 24px); color:#454545; font-size:var(--font-size-18); line-height:1.5em;}
.brand-content .item .content p:last-child {margin-bottom:0;}
.brand-content .item .image {width:50%; flex-shrink:0; border-radius:8px; overflow:hidden;}
.brand-content .item:nth-child(even) {background:#fafafa;}
.brand-content .item:nth-child(even) .wrap {flex-direction:row-reverse;}

.brand-company {padding:var(--space-100) 0; background:#fafafa;}
.brand-company .title {text-align:center; margin-bottom:var(--space-40);}
.brand-company .title .en {font-size:var(--font-size-16); font-weight:600; line-height:1.5em; letter-spacing:-.02em; color:var(--color-primary);}
.brand-company .title h3 {margin-top:clamp(16px, calc(24 / var(--inner) * 100vw ), 24px); color:#242424; font-size:var(--font-size-30); line-height:1.5em; letter-spacing:-.04em;}
.brand-company .image {margin:0 auto var(--space-40); width:100%; max-width:1200px; aspect-ratio:1200/560; border-radius:8px; overflow:hidden;}
.brand-company .image img {width:100%; height:100%; object-fit:cover;}
.brand-company .space-center {text-align:center;}

/* 마이페이지 - 친구 초대 */
.invite-image {margin-bottom:var(--space-24);}

.btn-invite-code-copy {display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:clamp(48px, calc(72 / var(--inner) * 100vw ), 72px); padding:10px 20px; background:var(--color-primary); border-radius:8px; border:0; transition:.2s; font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.02em; color:#fff;}
.btn-invite-code-copy:hover {background:var(--color-primary-hover);}

.invite-code-input {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(12px, calc(40 / var(--inner) * 100vw ), 40px); margin-top:var(--space-24); padding:24px; background:#F7F8FA; border-radius:8px;}
.invite-code-input .text {flex-shrink:0; font-size:var(--font-size-20); font-weight:700; line-height:1.5em; letter-spacing:-.02em; color:#242424;}
.invite-code-input .btn {flex:1; display:flex; align-items:center; justify-content:center; width:100%; max-width:700px; height:clamp(48px, calc(72 / var(--inner) * 100vw ), 72px); gap:10px; padding:10px 20px; background:#fff; border:1px solid var(--color-primary); border-radius:8px; font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.02em; color:var(--color-primary); transition:.1s;}
.invite-code-input .btn:hover {outline:3px solid rgba(21, 93, 252, 0.2);}