/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
 


@font-face {
    font-family: 'Pyeongchang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChang-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pyeongchang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChang-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
 

.inner {max-width: var(--layout-total-width);padding: var(--layout-padding-set);margin: 0 auto;}

/* Display Helpers */
.pc-only { display: block; }
.mo-only { display: none !important; }

/* Animation Classes */
.animate-up {opacity: 0;transform: translateY(30px);transition: all 0.8s ease;}
.animate-up.visible {opacity: 1;transform: translateY(0);}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* Hero Section */
.hero-section {background: #C9C6ED;padding: 140px 0 160px;text-align: center;}
.hero-title .sub {font-size: 36px;font-weight: 700;line-height: 1.36;}
.hero-title {font-size: 50px;font-weight: 900;line-height: 1.1;color: #000;display: flex;flex-direction: column;align-items: center;}
.hero-title em {font-family: "Playball", cursive;font-size: 136px;color: #602CD6;font-weight: 400;margin-top: -52px;}
.hero-title .master {
    font-size: 152px;
    font-weight: 700;
    font-family: 'Pyeongchang', sans-serif;
}
.hero-coupons {margin-top: -12%;margin-bottom: 120px;}
.hero-coupons img {max-width: 100%;height: auto;}

/* Benefit Cards */
.benefit-cards {display: flex;justify-content: center;gap: 12px;max-width: var(--layout-total-width);padding: var(--layout-padding-set);margin: 0 auto;flex-wrap: wrap;}
.benefit-cards li {
    background: #fff;
    border-radius: 20px;
    width: calc(20% - 10px);
    transition: transform 0.3s;
}
.benefit-cards li:hover { transform: translateY(-10px); }
.benefit-cards li img {width: 100%;}
.b-num {color: #4101A5;font-size: 22px;font-weight: 700;padding: 23px 0;border-bottom: 1px solid #DBDBDB;margin-bottom: 40px;margin-left: 20px;margin-right: 20px;}
.b-desc {font-size: 26px;margin-bottom: 24px;color: #888888;font-weight: 600;}
.b-desc strong {font-size: 42px;display: block;margin-top: 15px;font-weight: 800;color: #000;letter-spacing: -1px;}
.b-desc strong .fs34 {
    font-size: 34px;
}

.b-desc strong .fs44 {
    font-size: 44px;
}
.b-desc strong .fs32 {
    font-size: 32px;
}
.b-desc strong .fs28 {
    font-size: 28px;
}
.b-desc strong .weight800 {
    font-weight: 800;
}
.b-desc strong .gmarket {
    font-weight: 800;
    font-family: 'Gmarket Sans';
}
/* Sticky Nav */
.sticky-nav-wrapper {height: 80px;} /* 고정 시 레이아웃 튐 방지용 */
.sticky-nav {background: #fff;border-bottom: 1px solid #dbdbdb;width: 100%;z-index: 999;transition: box-shadow 0.3s;}
.sticky-nav.fixed {position: fixed;top: 0;left: 0;/* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */border-bottom: 1px solid #eaeaea;}
.sticky-nav ul { display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; }
.sticky-nav li {width: 200px;text-align: center;position: relative;}
.sticky-nav li + li::after {content:"";width: 4px;height: 4px;border-radius: 50%;background: #DBDBDB;position: absolute;top: 50%;transform: translateY(-50%);left: 0;}
.sticky-nav a {display: block;padding: 28px 0;color: #888;border-bottom: 3px solid transparent;font-size: 20px;font-weight: 500;}
.sticky-nav a.active {color: var(--main-color);font-weight: 700;}

/* Content Sections */
.content-sections {padding: 120px 16px 0;}
.section-header {text-align: center;margin-bottom: 64px;}
.section-header h3 {font-size: 36px;margin-bottom: 18px;font-weight: 600;}
.section-header p {color: #888888;font-size: 22px;font-weight: 500;}

 

/* 공통 컬러 변수 (시안 기반 추출) */
.c-family {color: #65AE23 !important;}
.c-bronze {color: #BF856E !important;}
.c-silver { color: #b1b1b1 !important; }
.c-gold   {color: #BF9748 !important;}
.c-vip    {color: #766FBD !important;}
.c-vvip   {color: #EF4D92 !important;}
/* Points Section */
.points-box { display: flex; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; margin-bottom: 15px; }
.points-header { background: #222; color: #fff; width: 200px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.points-content { display: flex; flex: 1; background: #fff; }
.p-item { flex: 1; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 30px; position: relative; }
.p-item:first-child::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: #ddd; }
.p-item span { font-size: 18px; font-weight: bold; }
.p-item strong { font-size: 24px; }
.points-notice {font-size: 18px;color: #505050;}
/* 공통 P 아이콘 스타일 */
.p-icon {
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 700;
}

.pc-tier-container {
    display: flex;
    gap: 8px;
    margin-bottom: 40px;
}
.tier-col {
    flex: 1;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 12px;
    /* padding-bottom: 30px; */
}
.tier-col.header-col {
    background: #191919;
    color: #fff;
    border: none;
    flex: 0 0 clamp(180px, 14vw ,227px);
}

/* 셀 공통 레이아웃 (정렬 및 높이) */
.t-cell {
    height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    line-height: 1.3;
}
.t-cell:has(.multiplication) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}
.multiplication {
    background: var(--main-color);
    color: #fff;
    width: 41px;
    height: 28px;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 4px;
}
 
/* 타이틀 텍스트 (FAMILY, VIP 등) */
.t-head {
    height: 144px;
    font-size: 34px;
    font-weight: 800;
    position: relative;
}
/* 타이틀 아래 밑줄 */
.tier-col:not(.header-col) .t-head::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 27px - 27px);
    height: 3px;
    background: #000;
}

/* 좌측 검정 컬럼 텍스트 세부조정 */
.header-col .t-cell {font-size: 24px;font-weight: 600;}
.header-col .t-head {font-size: 24px;/* border-bottom: 1px solid #444; */width: 80%;margin: 0 auto;height: 144px;font-weight: 600;}
.t-cell span.sub {font-size: 16px;color: #999;margin-top: 6px;font-weight: 500;}

/* 데이터 값 텍스트 */
.t-cell.val {font-weight: 700;font-size: 24px;color: #000;margin: 0 27px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;align-content: center;}
.t-cell.val + .val {border-top:1px solid #EAEAEA;}
/* [PC 전용] 적립금 혜택 스타일 */
.pc-points-container {text-align: center;margin-bottom: 40px;}
.pc-points-container h3 {font-size: 36px;font-weight: 600;margin-bottom: 64px;}
.pc-points-flex {display: flex;gap: 8px;justify-content: center;}

.pt-box-dark {
    background: #191919;
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    flex: 0 0 227px;
    height: 120px;
}
.pt-box-white {
    background: #fff;
    border: 1px solid #DBDBDB;
    border-radius: 12px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    gap: 64px;
    font-size: 28px;
    font-weight: 800;
}
.pt-box-white .p-num {font-size: 28px;display: flex;align-items: center;gap: 8px;font-weight: 700;}
.pt-box-white .p-icon {width: 30px;height: 30px;font-size: 20px;}

/* 흘러가는 보라색 띠 (Marquee) */
.marquee-banner {
    background-color: #4101A5; /* 배너 보라색 배경 */
    overflow: hidden;
    white-space: nowrap;
    padding: 41.5px 0;
    position: relative;
    margin-top: 32px;
}
.marquee-content {
    display: inline-flex;
    animation: marquee 15s linear infinite; /* 15초 동안 일정한 속도로 무한 반복 */
}
.marquee-text {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
     /* 두 텍스트 묶음 사이의 간격 */
}
.marquee-text span {
    margin: 0 52px; /* 텍스트와 + 기호 사이의 간격 */
}

/* 마키 애니메이션 키프레임 (0에서 시작해서 절반 지점까지 이동 후 다시 0으로) */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
 
#section-membership {
    margin-bottom: 120px;
}
#section-joinbenefit .t-cell {
    height: 120px;
}

#section-joinbenefit .tier-col.header-col {}

#section-joinbenefit .tier-col.header-col .t-cell {
    height: 100%;
}

section#section-joinbenefit {
    margin-bottom: 120px;
}

/* =========================================
   Mobile / Tablet (1024px 이하)
   ========================================= */
@media screen and (max-width: 1024px) {
    .pc-only { display: none !important; }
    .mo-only { display: block !important; }
    
    /* 마키 배너 모바일 사이즈 조정 */
    .marquee-banner {padding: 19px 0;margin-top: 12px;}
    .marquee-text {font-size: 12px;}
    .marquee-text span {margin: 0 12px;}
    
    .hero-title { font-size: 32px; }
    .hero-title em {font-size: 36px;margin-top: -15px;}
    .hero-coupons {
    margin-top: -5%;
    margin-bottom: 42px;
}
    
    /* 모바일 혜택 카드 - 2단 그리드 처리 */
    .benefit-cards {flex-wrap: wrap;justify-content: center;gap: 6px;padding-bottom: 56px;}
    .benefit-cards li {width: calc(50% - 3px);border-radius: 12px;}
    .benefit-cards li:hover {
    transform: translateY(0);
}
    .benefit-cards li:last-child {width: 100%;margin-top: 0;overflow: hidden;} /* 5번째 카드는 전체너비 */
.benefit-cards li img {
    width: 80%;
    margin-bottom: 24px;
}
    .benefit-cards li:last-child img {
    margin-bottom: 0;
    width: 50vw;
    margin-top: -5vw;
}
.benefit-cards li:last-child .b-desc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-cards li:last-child .b-desc br {
    display: none;
}

.benefit-cards li:last-child .b-desc strong {
    display: inline-block;
    margin: 0 0 0 6px;
}
/* 모바일 멤버십 카드 스타일 */
    .mo-tier-list {display: flex;flex-direction: column;gap: 16px;margin-bottom: 16px;}
    .m-tier-card {
        /* border: 1px solid #eaeaea; */
        border-radius: 16px;
        background: #fff;
        padding: 16px;
        box-shadow: 2px 2px 9px 0px #0000001F;
    }
    .m-tier-card h4 {text-align: center;font-size: 20px;font-weight: 800;border-bottom: 2px solid #DBDBDB;padding-bottom: 16px;}
    
    .m-tier-card ul li {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        border-bottom: 1px solid #eaeaea;
    }
    .m-tier-card ul li:last-child {/* border-bottom: none; *//* padding-bottom: 0; */}
    
    .m-tier-card .m-label {
        font-size: 13px;
        color: #777;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 15.5px 12px;
        background: #FAFAFA;
        width: 144px;
        justify-content: center;
    }
    .m-tier-card .m-label span {font-size: 10px;color: #888;font-weight: normal;font-weight: 700;}
    .m-tier-card .m-value {font-size: 14px;font-weight: 700;color: #000;padding: 15.5px 14px;width: calc(100% - 144px);display: flex;align-items: center;}

    /* 모바일 적립금 혜택 스타일 */
    .mo-points-container {margin-bottom: 16px;}
    .mo-points-container h3 {text-align: center;font-size: 16px;font-weight: 700;margin-bottom: 16px;}
    
    .m-points-card {
        overflow: hidden;
        border-radius: 16px;
        background: #fff;
        padding: 16px;
        box-shadow: 2px 2px 9px 0px #0000001F;
    }
    .m-points-header {
        text-align: center;
        padding-bottom: 16px;
        font-weight: 700;
        font-size: 16px;
        border-bottom: 2px solid #dbdbdb;
        color: #000;
    }
    .m-points-card ul li {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        border-bottom: 1px solid #f0f0f0;
    }
    .m-points-card ul li:last-child { border-bottom: none; }
    
    .m-points-card .m-label {font-size: 13px;color: #777;font-weight: 600;display: flex;flex-direction: column;gap: 4px;padding: 15.5px 12px;background: #FAFAFA;width: 144px;justify-content: center;}
    .m-points-card .m-value {display: flex;align-items: center;gap: 4px;font-size: 14px;font-weight: 500;color: #000;padding: 15.5px 14px;width: calc(100% - 144px);}
    .m-points-card .p-icon {width: 16px;height: 16px;font-size: 10px;}
    
    /* 모바일 적립금 혜택 */
    .points-box { flex-direction: column; }
    .points-header { width: 100%; padding: 15px; }
    .points-content { flex-direction: column; }
    .p-item { padding: 20px; border-bottom: 1px solid #eee; justify-content: space-between; }
    .p-item:first-child::after { display: none; }
    .p-item:last-child { border-bottom: none; }
    .sticky-nav-wrapper {height: 48px;}
    .sticky-nav li { width: 50%; }
   .sticky-nav li a {
    padding: 15.5px 0;
    font-size: 14px;
}


    .hero-section {
    padding: 42px 0 0;
}

.hero-title .sub {
    font-size: 15px;
    line-height: 1.33;
}

.hero-title .master {
    font-size: 44px;
    margin-top: 10px;
}

.b-num {
    padding: 11px 0;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 16px;
    font-size: 12px;
}

.b-desc {
    font-size: 13px;
    margin-bottom: 18px;
}

.b-desc strong {
    margin-top: 10px;
    font-size: 19px;
    letter-spacing: 0;
}

.b-desc strong .fs34 {
    font-size: 14px;
}

.b-desc strong .fs44 {
    font-size: 19px;
}
.b-desc strong .fs32 {
    font-size: 19px;
}
.b-desc strong .fs28 {
    font-size: 14px;
}
.b-desc strong .weight800 {
    font-weight: 800;
} 

.content-sections {
    max-width: var(--layout-total-width);
    padding: var(--layout-padding-set);
    margin: 32px auto 0;
}

.section-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.section-header p {
    font-size: 16px;
    font-weight: 700;
}

.section-header p span {
    font-size: 13px;
}

.section-header {
    margin-bottom: 16px;
}

.points-notice {
    font-size: 12px;
    font-weight: 700;
    color: #505050;
}
.t-cell:has(.multiplication) {
    gap: 4px;
}
.multiplication { 
    width: 24px;
    height: 16px;
    font-size:9px;
    font-weight:700;
}
#section-membership {
    margin-bottom: 32px;
}
 

section#section-joinbenefit {
    margin-bottom: 32px;
}

#section-joinbenefit .m-tier-card h4 {
    font-size: 16px;
}

#section-joinbenefit .m-tier-card .m-label, #section-joinbenefit .m-tier-card .m-value {
    background: #fff;
    width: 100%;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    gap: 4px;
    justify-content: center;
}

#section-joinbenefit .m-tier-card .m-label span {
    color: #fff;
    font-size: 9px;
}

#section-joinbenefit .m-tier-card .m-value {
    border-left: 1px solid #dbdbdb;
}
 .m-points-card .p-icon img {
    width: 10px;
}
    
} 

/* =========================================
   Mobile / Tablet benefit cards
   ========================================= */
   
@media screen and (min-width: 1024px) and (max-width: 1470px) {
    .benefit-cards li {width: calc(33% - 5px);} 
    .benefit-cards li img {margin-bottom: 15px;width: 70%;}

}
 
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .benefit-cards li { width: calc(33.333% - 4px); }
    .benefit-cards li:last-child { width: calc(33.333% - 4px);}
    .benefit-cards li:last-child img {width: auto;margin-top: 0;}
}
  
/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */