@font-face {
    font-family: 'NanumSquare';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Light.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Light.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Light.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Light.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Light.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquare';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Regular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Regular.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Regular.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Regular.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Regular.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquare';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Bold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Bold.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Bold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-Bold.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquare';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-ExtraBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-ExtraBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-ExtraBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/NanumSquare/NanumSquare-ExtraBold.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'gong';
    font-style: normal;
    font-weight: 800;
    src: url('./font/GongGothicBold.ttf') format('truetype'); /* 파일 경로와 포맷에 유의하세요 */
  }
  
  @font-face {
    font-family: 'GongGothicBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
#wrap * {
    font-family: 'NanumSquare';
}
header {
    padding: 10px 0;
}
.header_mo {
    display: none;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
}

nav img {
    height: 40px;
    margin-left: 20px;
}

nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 17px;
    padding: 5px 10px;
    border-radius: 5px;
}

#wrap header ul li.selected a {
    font-weight: 800;
    color: #003faa;
}
.header_mo .menu {
    display: none;
}
@media screen and (max-width: 1020px) {
    nav ul {
        display: none;
    }
    header {
        display: none;
    }
    .header_mo {
        display: flex;
        padding: 0;
    }
    .header_mo .menu {
        display: block;
        width: 50%;
        height: 50%;
        text-align: right;
    }
    .header_mo .header_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 15px 20px;
    }
    .header_mo .header_box .movelink_2 {
        display: flex;
        justify-content: right;
        cursor: pointer;
    }
    .header_mo .header_box .logo {
        width: 50%;
    }
    .header_mo nav.nav {
        position: fixed;
        top: 0;
        right: -70%;
        width: 70%;
        min-height: 100vh;
        background: #fff;
        z-index: 999;
        transition: .3s;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .header_mo .back {
        background: #00000038; 
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        display: none;
        z-index: 998; 
    }
    .header_mo nav.open + .back {
        display: block;
    }
    .header_mo   nav.open {
        right: 0;
    }
    .header_mo  .nav_logo {
        width: 100%;
        height: 6rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 1.5rem;
        box-sizing: border-box;
    }
    .header_mo .close {
        display: block;
        background: url(../img/mo/close.png) no-repeat center/contain;
        width: 2.5rem;
        height:2.5rem;
        cursor: pointer;
    }
    .header_mo  .nav_menu {
        align-items: center;
        flex-direction: column;
        flex-grow: 1;
        display: flex;
        width: 100%;
       
    }
    .header_mo   .nav_menu li {
        border-bottom: 1px solid #e3e3e3;
        padding: 15px;
        background-color: #fff;
        text-align: left;
        width: 90%;
        margin:0;
    }


    .header_mo .nav_menu li  a  {
        font-size:15px;
        font-weight: 700;
        color: #9099a9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }
    .header_mo .nav_menu li  a  .arrow{
        width: 8px;
        height: auto;
    }
    .toggle .submenu {
        display: none;
    }
    .toggle .submenu.on {
        display: block;
    }
    .toggle .submenu .li2 {
        padding: 10px 0 0 0;
        border-bottom: none;

    }
    .toggle .submenu .li2 a{
        color: #746d6e;

    }
    .toggle p {
        cursor: pointer;
        margin: 0; 
        font-size: 15px;
        color: #8d97a7;
        font-weight: 700;
        position: relative;
    }
    .toggle.on p{
        color: #004baf;
    }
    .toggle p::after{
        content: '';
        background-image: url('../img/mo/menu-arrow-1.png');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 15px;
        height: 13px;
        right: -0.8rem;
        top: 50%;
        transform: translateY(-50%);
    }
    .toggle.on p::after{
        background-image: url('../img/mo/menu-arrow-2.png');
        width: 13px;
        height: 13px;
        right: -0.2rem;
    }
}