@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    font-family: 'NEXON Lv2 Gothic';
}


/*
font-family: 'Noto Sans KR', sans-serif;
color : #86789F, #665085, #573C81
*/

/* reset */
*{margin: 0; padding: 0;}
ul,ol{list-style: none;}
a{text-decoration: none;}
img{border: none; display: block;}
video{border: none; display: block;}
address, em{font-style: normal;}
button{border:none; box-shadow:none; background: inherit ;}

body, section, header, footer, div, aside, nav, ul, ol, li, h1, h2, h3, h4, h5, h6, p, a, tr, td, th, article{font-family: 'Noto Sans KR', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 160%; color: #2A2A2A;}

/* common */
#header>.main_gnb>ul>li>ul{display: none;}
#m_header{display: none;}
.m_header_gnb{display: none;}
.header_mobile{display: none;}
.br_mobile{display: none;}
/*------------------------------------------------------------*/

/* ------------- PC -------------- */


@media screen and (min-width:1201px){
    
    body{padding-top: 80px;}

    #header.nav-up{top: -80px;}
    #header.nav-down{top: 0;}
    
    #header{position: fixed; left: 0; top: 0; width: 100%; height: 80px; border-bottom: 1px solid #8A8A8A; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: top 0.2s ease-in-out;}
    #header>div{position: relative; width: 80%; height: 100%; display: flex; justify-content: space-between; align-items: center;}
    #header>div>.main_logo{width: 136px;}
    #header>div>.main_logo>a{position: relative;width: 100%; height: 34px;}
    #header>div>.main_logo>a>img{width: 100%;}

    #header>div>.main_gnb{position: absolute; left: 20%; width: 50%;}
    #header>div>.main_gnb>ul{position: relative;display: flex; justify-content: space-between;}
    #header>div>.main_gnb>ul>li>a{display: block; font-weight: 500; line-height: 26px; text-align: center; color: #3A3A3A;}
    #header>div>.main_gnb>ul>li>a:hover{font-weight: 700;}

    .sub_menu_wrap{position: fixed; left: 0; top: 81px; width: 100%; height: 280px; background: rgba(0, 0, 0, 0.7); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); backdrop-filter: blur(30px); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .sub_menu_wrap>div{width: 80%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
    .sub_menu_wrap>div>.sub_menu_inner{position: absolute; left: 24%; width:45%; display: flex;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(1){width: 22%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(2){width: 13%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(3){width: 17%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(4){width: 22%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(5){width: 25%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul{border-left: 1px solid rgba(255, 255, 255, 0.29); display: flex; flex-direction: column; align-items: center;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li{width: 98%; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li:last-child{margin-bottom: 0;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li>a{display: block; text-align: center; line-height: 40px; text-align: center; font-size: 16px; line-height: 23px; color: #FCFCFC;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li>a:hover{font-weight: 600; color: #FFFFFF;}

    #header>div>.main_util{width: 180px;}
    #header>div>.main_util>ul{ display: flex; height: 26px;}
    #header>div>.main_util>ul>li{height: 100%; margin-right: 5%;}
    #header>div>.main_util>ul>li:last-child{margin-right: 0;}
    #header>div>.main_util>ul>li>a{display: block; font-weight: 400; line-height: 26px; color: #3A3A3A;}
    #header>div>.main_util>ul>li:nth-child(2){display: flex; flex-direction: column; align-items: center; justify-content: center;}
    #header>div>.main_util>ul>li:nth-child(2)>div{width: 0; height: 12.5px; border: 1px solid #777777;}
    #header>div>.main_util>ul>li>a:hover{font-weight: 600;}

    #footer{position: relative; width: 100%; height: 220px; background: #22132E; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div{width: 80%; display: flex; justify-content: space-between;}
    #footer>div>div{display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div>.footer_left>address{font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF;}
    #footer>div>.footer_right>address{ font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF;}

}




@media screen and (min-width:901px) and (max-width:1200px){
    .br_mobile{display: block;}
    


    #header.nav-up {top: -70px;}
    #header.nav-down{top: 0;}

    #header{position: fixed; left: 0; top: 0; width: 100%; height: 70px; border-bottom: 1px solid #8A8A8A; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #header>div{position: relative; width: 80%; height: 100%; display: flex; justify-content: space-between; align-items: center;}
    #header>div>.main_logo{width: 136px;}
    #header>div>.main_logo>a{position: relative;width: 100%; height: 34px;}
    #header>div>.main_logo>a>img{width: 100%;}

    #header>div>.main_gnb{position: absolute; left: 22%; width: 57%;}
    #header>div>.main_gnb>ul{position: relative;display: flex; justify-content: space-between;}
    #header>div>.main_gnb>ul>li>a{display: block; font-weight:  500; font-size: 16px; line-height: 26px; text-align: center; color: #3A3A3A;}
    #header>div>.main_gnb>ul>li>a:hover{font-weight: 700;}

    .sub_menu_wrap{position: fixed; left: 0; top: 71px; width: 100%; height: 280px; background: rgba(0, 0, 0, 0.7); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); backdrop-filter: blur(30px); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .sub_menu_wrap>div{width: 80%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
    .sub_menu_wrap>div>.sub_menu_inner{position: absolute; left: 26%; width:47%; display: flex;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(1){width: 24%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(2){width: 15%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(3){width: 18%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(4){width: 24%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:nth-child(5){width: 19%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul:last-child>li>a{width: 80%;}
    .sub_menu_wrap>div>.sub_menu_inner>ul{border-left: 1px solid rgba(255, 255, 255, 0.29); display: flex; flex-direction: column; align-items: center;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li{width: 98%; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li:last-child{margin-bottom: 0;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li>a{display: block; text-align: center; line-height: 40px; text-align: center; font-size: 16px; line-height: 23px; color: #FCFCFC;}
    .sub_menu_wrap>div>.sub_menu_inner>ul>li>a:hover{font-weight: 600; color: #FFFFFF;}

    #header>div>.main_util{width: 145px;}
    #header>div>.main_util>ul{ display: flex; height: 26px;}
    #header>div>.main_util>ul>li{height: 100%; margin-right: 3%;}
    #header>div>.main_util>ul>li:last-child{margin-right: 0;}
    #header>div>.main_util>ul>li>a{display: block; font-size: 16px; font-weight: 400; line-height: 26px; color: #3A3A3A;}
    #header>div>.main_util>ul>li:nth-child(2){display: flex; flex-direction: column; align-items: center; justify-content: center;}
    #header>div>.main_util>ul>li:nth-child(2)>div{width: 0; height: 12.5px; border: 1px solid #777777;}
    #header>div>.main_util>ul>li>a:hover{font-weight: 600;}


    #footer{position: relative; width: 100%; height: 250px; background: #22132E; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div{width: 80%; display: flex; justify-content: space-between;}
    #footer>div>div{display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div>.footer_left>address{font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF;}
    #footer>div>.footer_right>address{ font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF;}
}


@media screen and (min-width:601px) and (max-width:900px){

    #header{display: none;}
    #m_header{display: block;}
    .m_header_gnb{display: none}



    #m_header.nav-up {top: -70px;}
    #m_header.nav-down{top: 0;}

    #m_header{position: sticky; top: 0; left: 0; width: 100%; height: 70px;  border-bottom: 1px solid #8A8A8A; z-index: 9999; display: flex;}
    #m_header>.m_main_logo{position: relative; left: 11.72%; width: 136px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #m_header>.m_main_logo>a{position: relative; width: 100%; height: 34px;}
    #m_header>.m_main_logo>a>img{width: 100%;}

    #m_header>.m_main_util{position: absolute; left: 81.77%; width: 108px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #m_header>.m_main_util>div{display: flex; flex-direction: column; justify-content: baseline; align-items: center;}
    #m_header>.m_main_util>div>div{width: 20px; height: 2.21px; background: #000000; border-radius: 24px; margin-bottom: 4.42px;}
    #m_header>.m_main_util>div>div:last-child{margin-bottom: 0;}

    .m_header_gnb{position: absolute; top: 0; right: -100%; height: 100%; width: 80%; background: #FFFFFF; z-index: 99999;}
    .m_header_gnb>div{width: 100%; height: 70px; display: flex; flex-direction: column; justify-content: center;}
    .m_header_gnb>div>div{width: 95%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: end;}
    .m_header_gnb>div>div>button{width: 25px; height: 25px; cursor: pointer;}
    .m_header_gnb>div>div>button>img{width: 100%}
    .m_header_gnb>.m_main_gnb{width: 100%;}
    .m_header_gnb>.m_main_gnb>ul>li{border-bottom: 1px solid #D8D8D8; background: #FFFFFF;}
    .m_header_gnb>.m_main_gnb>ul>li:first-child{border-top: 1px solid #D8D8D8;}
    .m_header_gnb>.m_main_gnb>ul>li:nth-child(5){border-bottom: 2px solid #D8D8D8;}
    .m_header_gnb>.m_main_gnb>ul>li>div{display: flex; width: 90%; justify-content: space-between;}
    .m_header_gnb>.m_main_gnb>ul>li>div>a{position: relative; display: block; width: 90%; left: 50%; transform: translateX(-50%); line-height: 70px; font-size: 20px; letter-spacing: -0.06em; color: #272430;}
    .m_header_gnb>.m_main_gnb>ul>li>div>button{cursor: pointer; width: 20px;  color: #272430;}
    .m_header_gnb>.m_main_gnb>ul>li>div>button>img{width: 100%;}
    .m_header_gnb>.m_main_gnb>ul>li>.m_sub_menu{position: relative; background-color: #F6F6F6; display: none;}
    .m_header_gnb>.m_main_gnb>ul>li>.m_sub_menu>li>a{position: relative; display: block; width: 90%;  left: 50%; transform: translateX(-50%); line-height: 50px; font-size: 16px; letter-spacing: -0.06em; color: #3A3A3A;}
    .m_header_gnb>.m_main_gnb>ul>li>div>a:hover{font-weight: 700; color: #281153;}
    .m_header_gnb>.m_main_gnb>ul>li>.m_sub_menu>li>a:hover{font-weight: 700;}

    
    #footer{position: relative; width: 100%; height: 392px; background: #22132E; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div{width: 80%;}
    #footer>div>div{display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div>.footer_left>address{font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF; text-align: center; margin-bottom: 5%;}
    #footer>div>.footer_right>address{ font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF; text-align: center;}
}


/* ------------- mobile -------------- */
@media screen and (max-width:600px){

    #header{display: none;}
    #m_header{display: block;}
    .m_header_gnb{display: none;}



    #m_header.nav-up {top: -70px;}
    #m_header.nav-down{top: 0;}

    #m_header{position: sticky; top: 0; left: 0; width: 100%; height: 70px; border-bottom: 1px solid #8A8A8A; z-index: 9999; display: flex;}
    #m_header>.m_main_logo{position: relative; left: 11.72%; width: 136px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #m_header>.m_main_logo>a{position: relative; width: 100%; height: 34px;}
    #m_header>.m_main_logo>a>img{width: 100%;}

    #m_header>.m_main_util{position: absolute; right: 11.72%; width: 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #m_header>.m_main_util>div{display: flex; flex-direction: column; justify-content: baseline; align-items: center;}
    #m_header>.m_main_util>div>div{width: 20px; height: 2.21px; background: #000000; border-radius: 24px; margin-bottom: 4.42px;}
    #m_header>.m_main_util>div>div:last-child{margin-bottom: 0;}

    .m_header_gnb{position: absolute; top: 0; right: -100%; height: 100%; width: 80%; background: #FFFFFF; z-index: 99999; overflow: hidden;}
    .m_header_gnb>div{width: 100%; height: 70px; display: flex; flex-direction: column; justify-content: center;}
    .m_header_gnb>div>div{width: 90%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: end;}
    .m_header_gnb>div>div>button{width: 20px; height: 20px; cursor: pointer;}
    .m_header_gnb>div>div>button>img{width: 100%}
    .m_header_gnb>.m_main_gnb{width: 100%;}
    .m_header_gnb>.m_main_gnb>ul>li{border-bottom: 1px solid #D8D8D8; background: #FFFFFF;}
    .m_header_gnb>.m_main_gnb>ul>li:first-child{border-top: 1px solid #D8D8D8;}
    .m_header_gnb>.m_main_gnb>ul>li:nth-child(5){border-bottom: 2px solid #D8D8D8;}
    .m_header_gnb>.m_main_gnb>ul>li>div{display: flex; width: 90%; justify-content: space-between;}
    .m_header_gnb>.m_main_gnb>ul>li>div>a{position: relative; display: block; width: 90%; left: 50%; transform: translateX(-50%); line-height: 50px; font-size: 17px; letter-spacing: -0.06em; color: #272430;}
    .m_header_gnb>.m_main_gnb>ul>li>div>button{cursor: pointer; width: 20px;}
    .m_header_gnb>.m_main_gnb>ul>li>div>button>img{width: 70%;}
    .m_header_gnb>.m_main_gnb>ul>li>.m_sub_menu{position: relative; background-color: #F6F6F6; display: none;}
    .m_header_gnb>.m_main_gnb>ul>li>.m_sub_menu>li>a{position: relative; display: block; width: 90%;  left: 50%; transform: translateX(-50%); line-height: 45px; font-size: 15px; letter-spacing: -0.06em; color: #3A3A3A;}
    .m_header_gnb>.m_main_gnb>ul>li>div>a:hover{font-weight: 700; color: #281153;}
    .m_header_gnb>.m_main_gnb>ul>li>.m_sub_menu>li>a:hover{font-weight: 700;}

    #footer{position: relative; width: 100%; height: 392px; background: #22132E; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div{width: 80%;}
    #footer>div>div{display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #footer>div>.footer_left>address{font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF; text-align: center; margin-bottom: 5%;}
    #footer>div>.footer_right>address{ font-family: 'NEXON Lv2 Gothic'; font-size: 16px; color: #FFFFFF; text-align: center;}


}