/* BASIC css start */
/* =========================================================
   2026 TAVALON
   MEMBERSHIP
========================================================= */


/* =========================================================
   PAGE
========================================================= */

#memberBenefit {
    width: 100%;

    background: #fff;
    color: #111;

    font-family: 'Noto Sans KR', sans-serif;

    word-break: keep-all;
}

#memberBenefit * {
    box-sizing: border-box;
}

#memberBenefit .benefit_inner {
    width: 100%;
}

#memberBenefit .benefit_intro {
    width: 100%;
}


/* =========================================================
   VISUAL
========================================================= */

#memberBenefit .intro_visual {
    position: relative;

    width: 100%;

    background: #fff;

    overflow: hidden;
}


/* =========================================================
   CONTENT
========================================================= */

#memberBenefit .intro_content {
    position: relative;

    width: 1500px;

    margin: 0 auto;
    padding: 180px 0 120px;

    color: #111;
}


/* =========================================================
   INTRO
   CONTACT TONE
========================================================= */

#memberBenefit .intro_txt {
    width: 100%;

    margin: 0 0 90px;
    padding: 0;

    text-align: center;

    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

#memberBenefit.act .intro_txt {
    opacity: 1;
    transform: translateY(0);
}


/* ENGLISH */
#memberBenefit .intro_label {
    margin: 0 0 18px;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;

    letter-spacing: 2px;

    color: #777;
}


/* TITLE */
#memberBenefit .intro_txt h1 {
    margin: 0;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 38px;
    line-height: 1.35;
    font-weight: 600;

    letter-spacing: 0;

    color: #111;
}


/* DESCRIPTION */
#memberBenefit .intro_sub {
    margin: 25px 0 0;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;

    color: #777;
}


/* ENGLISH DESCRIPTION */
#memberBenefit .intro_sub_en {
    margin: 12px 0 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    line-height: 1.7;
    font-weight: 400;

    letter-spacing: 0.3px;

    color: #aaa;
}


/* =========================================================
   MY MEMBERSHIP
========================================================= */

#memberBenefit .my_membership {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 130px;

    padding: 30px 20px;

    border-top: 1px solid #111;
    border-bottom: 1px solid #ddd;

    background: #fafafa;

    text-align: center;

    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.9s ease 0.15s,
        transform 0.9s ease 0.15s;
}

#memberBenefit.act .my_membership {
    opacity: 1;
    transform: translateY(0);
}


#memberBenefit .my_membership_left {
    display: flex;
    flex-direction: column;

    align-items: center;
}


#memberBenefit .my_membership_label {
    margin: 0 0 10px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    letter-spacing: 2px;

    color: #888;
}


#memberBenefit .my_membership_user {
    margin: 0;

    font-size: 13px;
    line-height: 1.6;
    font-weight: 400;

    color: #777;
}


#memberBenefit .my_membership_right {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 10px;
}


#memberBenefit .my_membership_grade {
    font-family: 'Montserrat', sans-serif;

    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;

    letter-spacing: 0.3px;

    color: #111;
}


/* =========================================================
   MEMBERSHIP GRADE
========================================================= */

#memberBenefit .member_grade_wrap {
    display: flex;

    width: 100%;

    margin-top: 80px;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity 1s ease 0.25s,
        transform 1s ease 0.25s;
}

#memberBenefit.act .member_grade_wrap {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   GRADE
========================================================= */

#memberBenefit .member_grade {
    position: relative;

    flex: 1;

    min-height: 360px;

    padding: 40px 35px 38px;

    border-right: 1px solid #ddd;

    transition: background-color 0.35s ease;
}

#memberBenefit .member_grade:last-child {
    border-right: 0;
}


#memberBenefit .member_grade:hover {
    background: #f8f8f8;
}


/* SIGNATURE */
#memberBenefit .member_grade.signature {
    background: #f5f5f5;
}

#memberBenefit .member_grade.signature:hover {
    background: #eee;
}


/* =========================================================
   GRADE HEAD
========================================================= */

#memberBenefit .grade_en {
    margin: 0 0 9px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;

    letter-spacing: 2.2px;

    color: #999;
}


#memberBenefit .grade_head h3 {
    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 23px;
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: 0.3px;

    color: #111;
}


#memberBenefit .grade_condition {
    min-height: 45px;

    margin: 15px 0 0;

    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;

    letter-spacing: -0.3px;

    color: #777;
}


/* =========================================================
   BENEFIT
========================================================= */

#memberBenefit .grade_benefit {
    margin-top: 32px;
}


#memberBenefit .benefit_label {
    display: block;

    margin-bottom: 13px;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;

    letter-spacing: 1.7px;

    color: #aaa;
}


/* =========================================================
   PERCENT
========================================================= */

#memberBenefit .benefit_percent {
    display: flex;
    align-items: flex-start;

    height: 70px;
}


#memberBenefit .benefit_percent strong {
    font-family: 'Montserrat', sans-serif;

    font-size: 60px;
    font-weight: 300;
    line-height: 1;

    letter-spacing: -3px;

    color: #111;
}


#memberBenefit .benefit_percent span {
    margin: 7px 0 0 5px;

    font-family: 'Montserrat', sans-serif;

    font-size: 19px;
    font-weight: 300;

    color: #555;
}


/* =========================================================
   BASIC BENEFIT
========================================================= */

#memberBenefit .benefit_basic {
    display: block;

    height: 70px;

    font-size: 28px;
    font-weight: 300;
    line-height: 60px;

    letter-spacing: -1px;

    color: #333;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#memberBenefit .benefit_desc {
    margin: 10px 0 0;

    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;

    letter-spacing: -0.3px;

    color: #777;
}


/* =========================================================
   FREE SHIPPING
========================================================= */

#memberBenefit .benefit_badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 30px;

    margin-top: 17px;
    padding: 0 15px;

    border: 1px solid #222;
    border-radius: 30px;

    font-size: 11px;
    font-weight: 400;

    color: #222;
}


/* =========================================================
   MEMBERSHIP GUIDE
========================================================= */

#memberBenefit .membership_guide {
    margin-top: 110px;
    padding-top: 65px;

    border-top: 1px solid #222;

    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 1s ease 0.45s,
        transform 1s ease 0.45s;
}

#memberBenefit.act .membership_guide {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   GUIDE TITLE
========================================================= */

#memberBenefit .guide_title {
    margin-bottom: 50px;
}


#memberBenefit .guide_title > p {
    margin: 0 0 13px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;

    letter-spacing: 2px;

    color: #999;
}


#memberBenefit .guide_title h2 {
    margin: 0;

    font-size: 32px;
    font-weight: 400;

    letter-spacing: -1.5px;

    color: #111;
}


/* =========================================================
   GUIDE LIST
========================================================= */

#memberBenefit .guide_list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    column-gap: 90px;
}


#memberBenefit .guide_item {
    display: flex;

    min-height: 175px;

    padding: 28px 0;

    border-top: 1px solid #ddd;
}


#memberBenefit .guide_item:nth-child(3),
#memberBenefit .guide_item:nth-child(4) {
    border-bottom: 1px solid #ddd;
}


#memberBenefit .guide_num {
    flex: 0 0 55px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;

    letter-spacing: 1px;

    color: #aaa;
}


#memberBenefit .guide_txt {
    flex: 1;
}


#memberBenefit .guide_txt strong {
    display: block;

    margin-bottom: 10px;

    font-size: 15px;
    font-weight: 500;

    letter-spacing: -0.4px;

    color: #111;
}


#memberBenefit .guide_txt > p {
    margin: 0;

    font-size: 13px;
    font-weight: 300;
    line-height: 1.75;

    letter-spacing: -0.3px;

    color: #666;
}


/* =========================================================
   BUSINESS MEMBER
========================================================= */

#memberBenefit .business_login_notice {
    margin-top: 12px !important;

    font-size: 12px !important;
    font-weight: 300;
    line-height: 1.6 !important;

    color: #999 !important;
}


#memberBenefit .business_member_buttons {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 18px;
}


#memberBenefit .business_member_btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 120px;
    height: 42px;

    padding: 0 20px;

    border: 1px solid #111;

    font-size: 12px;
    font-weight: 400;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


/* LOGIN */
#memberBenefit .business_login_btn {
    background: #fff;
    color: #111;
}

#memberBenefit .business_login_btn:hover {
    background: #111;
    color: #fff;
}


/* JOIN */
#memberBenefit .business_join_btn {
    background: #111;
    color: #fff;
}

#memberBenefit .business_join_btn:hover {
    background: #333;
    border-color: #333;
}


/* APPLY */
#memberBenefit .business_apply_btn {
    min-width: 190px;

    margin-top: 18px;

    background: #111;
    color: #fff;
}

#memberBenefit .business_apply_btn:hover {
    background: #333;
    border-color: #333;
}


/* =========================================================
   NOTICE
========================================================= */

#memberBenefit .membership_notice {
    margin-top: 42px;
    padding: 25px 30px;

    background: #f7f7f7;
}


#memberBenefit .membership_notice p {
    margin: 0 0 7px;

    font-size: 12px;
    font-weight: 300;
    line-height: 1.7;

    color: #888;
}


#memberBenefit .membership_notice p:last-child {
    margin-bottom: 0;
}
/* BASIC css end */