@charset "utf-8";

/* =========================================================
    MAIN
========================================================= */
.page-main #container{overflow:hidden;}

.swiper-nav{display:flex;align-items:center;column-gap:var(--space-12);}

.main-visual{--cate-w:300px;--cate-gap:24px;--visual-h:500px;padding-top:var(--space-24);}
.main-visual .inner{position:relative;}

.main-visual-cate{position:absolute;top:0;left:0;bottom:0;width:var(--cate-w);z-index:5;}
.main-visual-cate .cate-box{height:100%;padding:var(--space-32) var(--space-12) var(--space-24);border-radius:var(--radius-20);background:var(--bg-1);overflow-y:auto;scrollbar-width:none;}
.main-visual-cate .eyebrow{padding:0 var(--space-12);margin-bottom:var(--space-12);}
.main-visual-cate .category-list a{height:56px;font-size:var(--fs-16);}
.main-visual-cate .category-list a:hover{background:var(--color-white);}

.main-visual-swiper{overflow:visible;}
.main-visual-swiper .swiper-slide{height:var(--visual-h);border-radius:var(--radius-20);overflow:hidden;clip-path:inset(0 0 0 0 round var(--radius-20));transition:clip-path .6s ease;}
.main-visual-swiper .swiper-slide-active{clip-path:inset(0 0 0 calc(var(--cate-w) + var(--cate-gap)) round var(--radius-20));}
.main-visual-swiper .swiper-slide a{display:block;height:100%;}

.main-visual-swiper .visual-prev,
.main-visual-swiper .visual-next{position:absolute;top:50%;z-index:4;transform:translateY(-50%);}
.main-visual-swiper .visual-prev{left:calc(var(--cate-w) + var(--cate-gap) + var(--space-20));}
.main-visual-swiper .visual-next{right:var(--space-20);}

.main-visual .visual-pagination{display:none;}

.main-toolbar{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-20);margin-bottom:var(--space-24);}
.best-swiper .swiper-slide{height:auto;}

.main-group-body{display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:var(--space-24);}
.main-group-side{display:flex;flex-direction:column;justify-content:space-between;row-gap:var(--space-24);}
.group-tag-list{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-10);}
.group-tag-list .chip{background:var(--color-white);}
.main-group .swiper-nav .btn-icon{border-color:var(--color-white);}
.main-group .swiper-nav .btn-icon:hover{border-color:var(--border-3);}
.group-swiper{width:100%;min-width:0;}
.group-swiper .swiper-slide{height:auto;}

.main-brand{padding-top:var(--space-80);}
.brand-banner{position:relative;display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-40);min-height:300px;padding:var(--space-48) var(--space-80);border-radius:var(--radius-20);overflow:hidden;isolation:isolate;}
.brand-banner .brand-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.brand-banner::before{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%);z-index:-1;content:'';}
.brand-text{display:flex;flex-direction:column;row-gap:var(--space-16);color:var(--color-white);}
.brand-text .eyebrow{color:var(--color-white);}
.brand-tit{font-size:var(--fs-28);font-weight:700;line-height:1.45;letter-spacing:-.02em;}
.brand-text .body-md{color:var(--text-on-dark-2);}
.brand-banner>.btn{flex-shrink:0;height:52px;border-color:var(--color-white);font-weight:600;}
.brand-banner>.btn:hover{background:var(--bg-2);border-color:var(--bg-2);}

.main-special .inner{display:grid;grid-template-columns:minmax(0,46.5fr) minmax(0,53.5fr);column-gap:var(--space-60);align-items:start;}
.special-banner{display:block;aspect-ratio:1/1;border-radius:var(--radius-20);}
.special-banner img{transition:transform .6s ease;}
.special-banner:hover img{transform:scale(1.03);}
.special-cont .common-grid2{column-gap:var(--space-24);}

.main-cs .inner{display:flex;flex-direction:column;row-gap:var(--space-24);}
.cs-call{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-40);padding:var(--space-40) var(--space-50);border-radius:var(--radius-24);background:var(--color-white);}
.cs-call .common-tit{row-gap:var(--space-10);}
.cs-number{display:flex;align-items:center;column-gap:var(--space-40);}
.cs-number strong{font-size:var(--fs-56);font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--text-1);font-variant-numeric:tabular-nums;}
.cs-number img{width:var(--space-80);height:auto;}

.cs-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-24);row-gap:var(--space-20);}
.cs-link{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-20);height:100%;padding:var(--space-40) var(--space-50);border-radius:var(--radius-24);transition:transform var(--transition);}
.cs-link:hover{transform:translateY(-4px);}
.cs-link>div{display:flex;flex-direction:column;row-gap:var(--space-20);}
.cs-link img{width:var(--space-80);height:auto;flex-shrink:0;}
.cs-link.kakao{background:#FAF2C2;}
.cs-link.notice{background:var(--bg-2);}
.cs-link.faq{background:#EBEBEB;}


/* =========================================================
    RESPONSIVE
========================================================= */
@media screen and (max-width: 1280px) {
    .main-visual{--cate-w:240px;--visual-h:420px;}
    .main-group-body{grid-template-columns:240px minmax(0,1fr);}
    .cs-link{padding:var(--space-32);}
}

@media screen and (max-width: 1024px) {
    .main-visual{--visual-h:360px;}
    .main-visual-cate{display:none;}
    .main-visual-swiper .swiper-slide-active{clip-path:inset(0 0 0 0 round var(--radius-20));}
    .main-visual-swiper .visual-prev{left:var(--space-20);}

    .main-group-body{grid-template-columns:minmax(0,1fr);row-gap:var(--space-24);}
    .main-group-side{flex-direction:row;align-items:center;}
    .group-tag-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;column-gap:8px;scrollbar-width:none;}
    .group-tag-list::-webkit-scrollbar{display:none;}

    .main-special .inner{grid-template-columns:minmax(0,1fr);row-gap:var(--space-48);}
    .special-banner{aspect-ratio:16/10;}

    .brand-banner{padding:var(--space-40);}
    .cs-links{grid-template-columns:minmax(0,1fr);}
    .cs-link{min-height:auto;}
}

@media screen and (max-width: 500px) {
    .main-visual{--visual-h:auto;padding-top:12px;}
    .main-visual-swiper .swiper-slide{aspect-ratio:4/3;border-radius:var(--radius-16);}
    .main-visual-swiper .visual-prev,
    .main-visual-swiper .visual-next{display:none;}
    .main-visual .visual-pagination{position:absolute;right:12px;bottom:12px;left:auto!important;top:auto;z-index:4;display:inline-flex;width:auto!important;padding:4px 10px;border-radius:var(--radius-full);background:rgba(0,0,0,.45);font-size:12px;color:var(--color-white);}

    .main-best,
    .main-group,
    .main-special{padding:56px 0;}

    .main-toolbar{margin-bottom:16px;}
    .main-toolbar .chip-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px;}
    .main-toolbar .chip-list::-webkit-scrollbar{display:none;}
    .main-toolbar .swiper-nav,
    .main-group-side .swiper-nav{display:none;}

    .brand-banner{flex-direction:column;align-items:flex-start;row-gap:24px;min-height:auto;padding:32px 24px;}
    .brand-banner::before{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.3));}
    .brand-tit{font-size:19px;}
    .brand-tit br{display:none;}
    .brand-banner>.btn{height:44px;}

    .special-banner{aspect-ratio:1/1;}
    .special-cont .common-grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px;}

    .main-brand{padding-top:48px;}
    .main-cs{padding:48px 0;}
    .cs-call{flex-direction:column;align-items:flex-start;row-gap:20px;padding:28px 24px;}
    .cs-number{column-gap:12px;}
    .cs-number strong{font-size:32px;}
    .cs-number img{width:40px;}
    .cs-link{padding:24px;}
    .cs-link img{width:52px;}
    .cs-link>div{row-gap:6px;}
}