@charset "utf-8";

:root {
    --Cp_green-50: #EDFBF4;
    --Cp_green-100: #E1F6EC;
    --Cp_green-150: #D3F2E3;
    --Cp_green-200: #C7EEDC;
    --Cp_green-300: #A8E4CB;
    --Cp_green-400: #68CFA3;
    --Cp_green-500: #00B173;
    --Cp_green-600: #00935F;
    --Cp_green-700: #016F3F;
    --Cp_green-800: #004B30;
    --Cp_green-900: #003925;


    --Cp_gray-50: #FAFBFF;
    --Cp_gray-100: #F1F5F9;
    --Cp_gray-150: #E7EBF1;
    --Cp_gray-200: #D9DDE5;
    
    
    --PineGreen-50: #EFFEFB;
    --PineGreen-100: #E6FBF6;
    --PineGreen-150: #D0F8F0;
    --PineGreen-200: #A8F2E6;
    --PineGreen-300: #7BE9DA;
    --PineGreen-400: #45DBCC;
    --PineGreen-500: #15C7B7;
    --PineGreen-600: #09AEA0;
    --PineGreen-700: #05958E;
    --PineGreen-800: #086A66;
    --PineGreen-850: #094745;
    --PineGreen-900: #003333;
    --PineGreen-950: #001E1E;

    --Gray-50: #f7f7f7;
    --Gray-100: #F0F0F0;
    --Gray-150: #EAEAEA;
    --Gray-200: #e0e0e0;
    --Gray-300: #c8c8c8;
    --Gray-400: #A3A3A3;
    --Gray-500: #939393;
    --Gray-600: #7b7b7b;
    --Gray-700: #676767;
    --Gray-800: #545454;
    --Gray-850: #434343;
    --Gray-900: #363636;
    --Gray-950: #1D1D1D;

    --Cool-gray-50: #F7F7F8;
    --Cool-gray-100: #F0F1F2;
    --Cool-gray-150: #E9EBEC;
    --Cool-gray-200: #DFE3E6;
    --Cool-gray-300: #CAD1D7;
    --Cool-gray-400: #AFB7C2;
    --Cool-gray-500: #8E94A0;
    --Cool-gray-600: #777E8B;
    --Cool-gray-700: #616672;
    --Cool-gray-800: #52565D;
    --Cool-gray-850: #424549;
    --Cool-gray-900: #303236;
    --Cool-gray-950: #1A1B1E;


    --Blue-50: #f0f5fe;
    --Blue-100: #E6EFFE;
    --Blue-150: #D6E5FC;
    --Blue-200: #c2d8fb;
    --Blue-300: #98c1f8;
    --Blue-400: #649df2;
    --Blue-500: #447ced;
    --Blue-600: #2f5fe1;
    --Blue-700: #264acf;
    --Blue-800: #253ea8;
    --Blue-850: #233885;
    --Blue-900: #1a2451;
    --Blue-950: #0E142E;


    --SeaBlue-50: #F1FEFF;
    --SeaBlue-100: #E0FCFF;
    --SeaBlue-150: #cbfaff;
    --SeaBlue-200: #9ef4ff;
    --SeaBlue-300: #5be8ff;
    --SeaBlue-400: #00d0ff;
    --SeaBlue-500: #00b6e5;
    --SeaBlue-600: #0090c0;
    --SeaBlue-700: #03729b;
    --SeaBlue-800: #0d5c7d;
    --SeaBlue-850: #104c69;
    --SeaBlue-900: #033149;
    --SeaBlue-950: #001F2F;


    --Emerald-green-50: #EFFAF5;
    --Emerald-green-100: #E6F6EF;
    --Emerald-green-150: #D0EEE0;
    --Emerald-green-200: #B6E1CF;
    --Emerald-green-300: #97D4BE;
    --Emerald-green-400: #54AD93;
    --Emerald-green-500: #2f9a7c;
    --Emerald-green-600: #207e65;
    --Emerald-green-700: #196351;
    --Emerald-green-800: #164f42;
    --Emerald-green-850: #113931;
    --Emerald-green-900: #0a241f;
    --Emerald-green-950: #010303;


    --Violet-50: #F7F6FF;
    --Violet-100: #F1EFFF;
    --Violet-150: #ebe8ff;
    --Violet-200: #d9d5ff;
    --Violet-300: #bdb3ff;
    --Violet-400: #9c88fd;
    --Violet-500: #7d58fa;
    --Violet-600: #6c35f2;
    --Violet-700: #5e23de;
    --Violet-800: #4e1dba;
    --Violet-850: #411a98;
    --Violet-900: #260e67;
    --Violet-950: #120634;


    --Rose-red-50: #FEF3F5;
    --Rose-red-100: #FFECEF;
    --Rose-red-150: #FEE5E9;
    --Rose-red-200: #FFD7DF;
    --Rose-red-300: #FF9CAF;
    --Rose-red-400: #FF6485;
    --Rose-red-500: #FF2E60;
    --Rose-red-600: #EB0847;
    --Rose-red-700: #CE0240;
    --Rose-red-800: #9B1643;
    --Rose-red-850: #85163F;
    --Rose-red-900: #4A071E;
    --Rose-red-950: #22040E;


    --Red-50: #FFF1F1;
    --Red-100: #FFE9E9;
    --Red-150: #FFD9D9;
    --Red-200: #FFC5C5;
    --Red-300: #FF9D9D;
    --Red-400: #FF6464;
    --Red-500: #F33;
    --Red-600: #ED1515;
    --Red-700: #C80D0D;
    --Red-800: #A50F0F;
    --Red-850: #881414;
    --Red-900: #4B0404;
    --Red-950: #2C0202;


    --Orange-50: #FFF4ED;
    --Orange-100: #FFECDD;
    --Orange-150: #FFDDC2;
    --Orange-200: #FECBAA;
    --Orange-300: #FDA774;
    --Orange-400: #FB773C;
    --Orange-500: #F95316;
    --Orange-600: #EA390C;
    --Orange-700: #C2280C;
    --Orange-800: #9A2112;
    --Orange-850: #7C1E12;
    --Orange-900: #430C07;
    --Orange-950: #210604;


    
    --BlackOpacity-0: rgba(23, 23, 25, 0.00);
    --BlackOpacity-5: rgba(23, 23, 25, 0.05);
    --BlackOpacity-12: rgba(23, 23, 25, 0.12);
    --BlackOpacity-16: rgba(23, 23, 25, 0.16);
    --BlackOpacity-22: rgba(23, 23, 25, 0.22);
    --BlackOpacity-28: rgba(23, 23, 25, 0.28);
    --BlackOpacity-35: rgba(23, 23, 25, 0.35);
    --BlackOpacity-52: rgba(23, 23, 25, 0.52);
    --BlackOpacity-74: rgba(23, 23, 25, 0.74);
    --BlackOpacity-84: rgba(23, 23, 25, 0.84);
    --BlackOpacity-93: rgba(23, 23, 25, 0.93);

    --WhiteOpacity-0: rgba(255, 255, 255, 0.00);
    --WhiteOpacity-5: rgba(255, 255, 255, 0.05);
    --WhiteOpacity-12: rgba(255, 255, 255, 0.12);
    --WhiteOpacity-16: rgba(255, 255, 255, 0.16);
    --WhiteOpacity-22: rgba(255, 255, 255, 0.22);
    --WhiteOpacity-28: rgba(255, 255, 255, 0.28);
    --WhiteOpacity-35: rgba(255, 255, 255, 0.35);
    --WhiteOpacity-52: rgba(255, 255, 255, 0.52);
    --WhiteOpacity-74: rgba(255, 255, 255, 0.74);
    --WhiteOpacity-84: rgba(255, 255, 255, 0.84);

    --Common-white: #FFF;
    --Common-black: #000;

    --px0: 0;
    --px1: 1px;
    --px2: 2px;
    --px3: 3px;
    --px4: 4px;
    --px6: 6px;
    --px8: 8px;
    --px10: 10px;
    --px12: 12px;
    --px15: 15px;
    --px16: 16px;
    --px20: 20px;
    --px21: 21px;
    --px24: 24px;
    --px28: 28px;
    --px30: 30px;
    --px32: 32px;
    --px36: 36px;
    --px40: 40px;
    --px48: 48px;
    --px56: 56px;
    --px80: 80px;
    --px100: 100px;

    --font-family-Pretendard: Pretendard;
    --font-size-Label-S: var(--px15);
    --font-size-Label-M: var(--px17);

    --font-size-Title-L: var(--px21);

    --font-size-Body-S: var(--px15);
    --font-size-Body-M: var(--px17);

    --font-size-Detail-M: var(--px15);
    --font-size-Detail-L: var(--px17);
    

    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-700: 700;

    --letter-spacing--0_4: -0.4px;

    --Semantic-Colors-Text-title: #303236;
    --Semantic-Colors-Text-body: #616672;
    --Semantic-Colors-Border-2: #E9EBEC;
    --Semantic-Colors-Surface: var(--Common-white);
    --Semantic-Colors-Text-on-dark: var(--Common-white);
    --Semantic-Colors-Disabled: #E0E0E0;
    --Semantic-Colors-Text-disabled: #A3A3A3;


    --vh: 1vh;
}


/* @font-face {
    font-family: 'ONE Mobile Title';
    src: url('/font/ONEMobileTitle.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

@font-face {
    font-family: "GmarketSans";
    font-weight: 300;
    src: url("/font/GmarketSansLight.woff2") format("woff2");
}
@font-face {
    font-family: "GmarketSans";
    font-weight: 500;
    src: url("/font/GmarketSansMedium.woff2") format("woff2");
}
@font-face {
    font-family: "GmarketSans";
    font-weight: 800;
    src: url("/font/GmarketSansBold.woff2") format("woff2");
}

@font-face {
    font-family: 'ONE Mobile Title';
    src: url('/font/ONEMobileTitleRegular.woff2') format('woff2'),
        url('/font/ONEMobileTitleRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('/font/Pretendard-1.3.9/woff/Pretendard-Regular.woff') format('woff'),
        url('/font/Pretendard-1.3.9/woff2/Pretendard-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('/font/Pretendard-1.3.9/woff/Pretendard-Medium.woff') format('woff'),
        url('/font/Pretendard-1.3.9/woff2/Pretendard-Medium.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('/font/Pretendard-1.3.9/woff/Pretendard-SemiBold.woff') format('woff'),
        url('/font/Pretendard-1.3.9/woff2/Pretendard-SemiBold.woff2') format('woff2');
    font-display: swap;
}
* {
    /* font-size: 16px; */
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
    /* align-self: stretch; */
}

html, body {
	padding: 0;
    margin: 0;
    
}
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
p {
    margin: 0;
}
ol, ul {
    padding: 0;
    margin: 0;

    list-style: none;
}
li {
    list-style: none;
}
a {
    text-decoration:none;
    color: inherit;
}
a:visited {
    text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
}
button {
    border: 0;
    padding: 0;
    margin: 0;

    cursor: pointer;
}
input {
    border: 0;
}
@media screen and (min-width: 768px) {
   
}



/* .wrapper {
    min-height: 70vh;
} */
.container {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.container-content {
    display: flex;
    min-width: 375px;
    padding: 24px 20px 32px 20px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    
}


.dropdown-menu {
    transform: none !important;
}

.modal-consult-menu.show, .modal-code-menu.show, .modal-my-menu.show {
    display: flex !important;
}
 
.dropdown-menu.modal-consult-menu, .dropdown-menu.modal-code-menu {
    inset: 51px auto auto 0 !important;
}
.dropdown-menu.modal-my-menu {
    inset: 44px 0 auto auto !important;
}


@media(min-width: 768px) {
    .container-content {
        max-width: 1280px;
        width: 100%;
        padding: 28px 48px 48px 48px;
        align-self: center;

    }    
    
    .dropdown-menu.modal-consult-menu, .dropdown-menu.modal-code-menu {
        inset: 69px auto auto 0 !important;
    }

    .dropdown-menu.modal-my-menu {
        inset: 54px 0 auto auto !important;
    }
}






/* 플로팅 라벨 스타일 */
/* 기본 스타일 */
.floating-label {
    position: relative;
    width: 100%;
}

.floating-label input {
    width: 100%;
    padding: 18px 16px;
    outline: none;
    height: 56px;
    
    border: 1px solid #CECECE;
    background: #EFEFEF;

    font-size: 14px;
    color: var(--text-text-label-03-neutral-900, #121214);
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 140% */
    /* letter-spacing: var(--letter-spacing-1, 1px); */

}

/* 라벨 스타일 */
.floating-label label {
    position: absolute;
    top: 17px;
    left: 16px;
    font-size: 14px;
    color: #ABABAB;
    pointer-events: none;
    /* transition: all 0.3s ease; */
}

/* 입력 필드가 포커스되거나 값이 입력된 경우 */
.floating-label input:focus,
.floating-label input:not(:placeholder-shown) {
    padding: 26px 16px 10px;

    border: 1px solid var(--Cp_green-500);
    background: var(--background-field-01-white, #FFF);

    /* Shadow/shadow-20 */
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
}
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
    top: 12px;
    left: 16px;
    
    color: var(--text-text-placeholder-neutral-500, #8B8B8F);
    /* Label/label-01 */
    font-family: "Noto Sans KR";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 100% */
    letter-spacing: -0.4px;
    
}


/* 체크박스 */
.agree {
    display: flex;
    align-items: center;
    gap: 7px;
}
.agree > label {
    color: #292B2C;
    font-family: "Malgun Gothic";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -1.5px;
}
.all_agree {
    display: flex;
}
.all_agree > input[type="checkbox"] {display: none;}

.all_agree > input[type="checkbox"] + label {
    display: inline-block; 
    width:20px; 
    height:20px; 
    background:#EFEFEF;
    cursor: pointer;
    border:1px solid #CECECE;
    padding:0;
}
.all_agree:after {
    display:block; clear:both; content:"";
}

.all_agree > input[type="checkbox"]:checked + label {
    background:url(https://img.studycode.com/homepage_re/images_2020/images/check.png) var(--Cp_green-500) no-repeat center/16px 16px;
    float:right;border-color: var(--Cp_green-500);
}



.btn.dashboard {
    background: var(--Cp_green-500);
    transition: all 0.3s ease;
}
.btn.dashboard:hover,
.btn.dashboard:active {
    background: var(--Cp_green-600, #00935F);
}



/* nav */
.banner {
    display: flex;
    min-width: 360px;
    max-width: 767px;
    padding: var(--Spacing_20, 20px) var(--Spacing_16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing_8, 8px);
    align-self: stretch;

    background: var(--Cp_green-500, #00B173);
}
.banner img {
    width: 32px;
}
.banner p {
    flex: 1 0 0;
    color: var(--Semantic-Colors-Text-on-dark, #FFF);
    font-family: var(--font-family-Pretendard, Pretendard);
    font-size: var(--font-size-Body-S, 15px);
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: 150%; /* 22.5px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);
    word-break: keep-all;
}
.banner button{
    background: var(--Cp_green-500, #00B173);
    cursor: pointer;
}

.badge {
    display: flex !important;
    align-items: start;
    height: 100%;
    padding: 0 !important;
}


.header {
    position: sticky;
    top: 0;
    z-index: 999;
}


.nav {
    display: flex;
    min-width: 360px;
    /* max-width: 767px; */
    padding-top: var(--Spacing_12, 12px);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;

    border-bottom: var(--1, 1px) solid var(--Semantic-Colors-Border-3, #DFE3E6);
    background: var(--Semantic-Colors-Surface, #FFF);

    /* 01 */
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}
.nav > div:first-child {
    display: flex;
    justify-content: space-between;
    height: 44px;
    padding: 0px var(--Spacing_16, 16px);
    width: 100%;
    align-items: center;
    gap: var(--Spacing_12, 12px);
    align-self: stretch;

}
.nav > div:first-child > .logo img {
    cursor: pointer;
}

.nav-menu-m {
    display: flex;
    height: 50px;
    padding: 0px var(--Spacing_16, 16px);
    align-items: center;
    gap: var(--px4);

    cursor: pointer;
}
.nav-menu {
    display: none;
}

.nav-menu-m > div {
    display: flex;
    height: 50px;
    padding: var(--Spacing_16, 16px) var(--Spacing_8, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing_2, 2px);

    border-radius: var(--Radius-0, 0px);

    border-bottom: var(--3, 3px) solid #fff;

    cursor: pointer;
}

.nav-menu-m > div label {
    color: var(--Semantic-Colors-Text-title, #303236);
    font-family: var(--font-family-Pretendard, Pretendard);
    font-size: var(--font-size-Label-M, 17px);
    font-style: normal;
    font-weight: var(--font-weight-500, 500);
    line-height: 100%; /* 17px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);

    cursor: pointer;
}
.nav-menu-m > div.active {
    border-bottom: var(--px3) solid var(--Cp_green-500, #00B173);
}
.nav-menu-m > div.active label {
    font-weight: var(--font-weight-700, 700);
}


.nav-login {
    display: flex;
    align-items: center;
}
.nav-login > div:first-child {
    display: none;
}
.nav-login .btn-my {
    display: flex;
    width: 36px;
    height: 36px;
    padding: var(--Spacing_0, 0px) var(--Spacing_8, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing_4, 4px);

    border-radius: var(--px100, 100px);
    background: var(--Cp_green-500, #00B173);

    position: relative;
    cursor: pointer;
}
.nav-login .btn-my:hover {
    background: var(--Cp_green-600, #00935F);
}
.nav-login .btn-login {
    display: flex;
    height: 40px;
    padding: var(--Spacing_0, 0px) var(--Spacing_16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing_4, 4px);

    border-radius: 100px;
    background: var(--Cp_green-100, #E1F6EC);

    color: var(--Cp_green-500, #00B173);
    font-family: var(--font-family-Pretendard, Pretendard);
    font-size: var(--font-size-Label-S, 15px);
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: 150%; /* 22.5px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);

    cursor: pointer;
}
.nav-login .btn-login:hover {
    background: var(--Cp_green-300, #A8E4CB);
}
.nav-login .btn-login:active {
    background: var(--Cp_green-300, #A8E4CB);
}



.logo-img-m {
    display: flex;
    width: 40px;
    padding: 0px 0.709px 0.254px 0.068px;
    justify-content: center;
    align-items: center;
}
.logo-img {
    display: none;
    width: 140px;
    justify-content: center;
    align-items: center;
}


.menu-modal {
    display: inline-flex;
    padding: var(--Spacing_8, 8px) var(--Spacing_0, 0px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Spacing_0, 0px);

    border-radius: var(--Radius-8, 8px);
    border: 1px solid var(--Semantic-Colors-Border-2, #E9EBEC);
    background: var(--gray-gray-0, #FFF);

    /* 02 */
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);

    margin: 0;
}
.menu-modal > li {
    display: flex;
    height: 48px;
    padding: var(--Spacing_0, 0px) var(--Spacing_28, 28px) var(--Spacing_0, 0px) var(--Spacing_20, 20px);
    align-items: center;
    gap: var(--Spacing_4, 4px);
    align-self: stretch;

    color: var(--Semantic-Colors-Text-body);
    font-family: Pretendard;
    font-size: var(--font-size-Label-S, 15px);
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    /* line-height: 150%; */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);

    cursor: pointer;
}
.menu-modal > li > a {
    color: var(--Semantic-Colors-Text-body);
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
}
.menu-modal > li:hover {
    border-radius: var(--Radius-4, 4px);
    background: var(--Cp_gray-100, #F1F5F9);
}

.menu-modal > li:hover > div svg path {
    fill: #00B173;
}
.menu-modal > li > .new-badge {
    display: flex;
    width: 39.6px;
    height: 18px;
    padding: 5.478px 7.826px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7.826px;

    border-radius: var(--Radius-100, 100px);
    background: var(--Red-100, #FFE9E9);
}

.modal-my-menu {
    width: 170px;
    position: absolute;
    display: none;
    justify-content: end;
    right: 0;
    top: 44px;
    z-index: 9;
}

.modal-consult-menu {
    width: 220px;
    position: absolute;
    display: none;
    justify-content: start;
    left: 0;
    top: 51px;
}

.modal-code-menu {
    width: 140px;
    position: absolute;
    display: none;
    justify-content: start;
    left: 0;
    top: 51px;
}

.dropdown-toggle > svg {
    cursor: pointer;
}

@media(min-width: 768px) {
    .banner {
        min-width: 768px;
        max-width: none;
        padding: var(--Spacing_20, 20px) var(--Spacing_24, 24px);
    }
    .banner p {
        flex: none;
        font-size: var(--font-size-Body-L, 19px);
    }
    
    .nav {
        display: flex;
        min-width: 768px;
        padding: var(--Spacing_12, 12px) var(--Spacing_24, 24px) !important;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;
        align-self: stretch;

        border-bottom: var(--px1) solid var(--Semantic-Colors-Border-3, #DFE3E6);
        background: var(--Semantic-Colors-Surface, #FFF);
        box-shadow: none;
    }
    .nav > div:first-child {
        display: flex;
        height: 56px;
        width: 100%;
        max-width: 1232px;
        align-items: center;
        gap: var(--Spacing_12, 12px);
        align-self: stretch;
        padding: 0;
    }
    .nav-menu-m {
        display: none;
    }
    .nav-menu {
        display: flex;
        padding: 0px var(--Spacing_20, 20px);
        align-items: center;
        gap: var(--Spacing_8, 8px);
        flex: 1 0 0;
    }

    .nav-menu > div {
        display: flex;
        height: 56px;
        padding: var(--Spacing_16, 16px) var(--Spacing_12, 12px);
        justify-content: center;
        align-items: center;
        gap: var(--Spacing_2, 2px);

        border-radius: var(--Radius-0, 0px);

    }
    .nav-menu > div > div:first-child {
        display: flex;
        gap: var(--Spacing_2, 2px);
        height: 100%;
        align-items: center;
    }
    .nav-menu > div label {
        color: var(--Semantic-Colors-Text-title, #303236);
        font-family: var(--font-family-Pretendard, Pretendard);
        font-size: var(--font-size-Label-L, 19px);
        font-style: normal;
        font-weight: var(--font-weight-500, 500);
        line-height: 100%; /* 19px */
        letter-spacing: var(--letter-spacing--0_4, -0.4px);

        cursor: pointer;
    }

    .nav-login {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .nav-login > div:first-child {
        display: block;
    }
    .nav-login .btn-my {
        display: flex;
        width: 44px;
        height: 44px;
        padding: var(--Spacing_0, 0px) var(--Spacing_8, 8px);
        justify-content: center;
        align-items: center;
        gap: var(--Spacing_4, 4px);

        border-radius: var(--px100, 100px);
        background: var(--Cp_green-500, #00B173);
    }
    .nav-login .btn-login {
        display: inline-flex;
        height: 44px;
        padding: var(--Spacing_0, 0px) var(--Spacing_20, 20px);
        justify-content: center;
        align-items: center;
        gap: var(--Spacing_4, 4px);

        border-radius: 100px;
        background: var(--Cp_green-100, #E1F6EC);
    }


    .logo-img-m {
        display: none;
    }
    .logo-img {
        display: flex;
    }

    .menu-modal > li {
        font-size: var(--font-size-Label-M, 17px);
    }
    .modal-consult-menu, .modal-code-menu {
        top: 69px;
    }
    .modal-my-menu {
        width: 180px;
        top: 54px;
    }
}