@charset "utf-8";



/********************************************************

    body 기본 설정 및 스크롤 설정

********************************************************/

body::-webkit-scrollbar {width:12px;}
body::-webkit-scrollbar-thumb {background:#999; border-radius:20px;}
body::-webkit-scrollbar-track {background:#fefefe;}

body {padding:40px;}

@media screen and (max-width:1400px) {
}

@media screen and (max-width:1280px) {
    body {padding:30px;}
}

@media screen and (max-width:1000px) {
    body {padding:0;}
}

@media screen and (max-width:760px) {
}

@media screen and (max-width:680px) {
}

@media screen and (max-width:480px) {
}

@media screen and (max-width:360px) {
}












/********************************************************

    pc header

********************************************************/

#pc_nav {position:fixed; height:calc(100% - 80px); background:#fff; width:260px; border-radius:30px; padding:75px 20px 40px;}
#pc_nav .gnb {display:flex; flex-wrap:wrap; align-content:space-between; justify-content:center; height:100%; width:100%;}

#pc_nav .menu {flex-grow:1;}
#pc_nav .menu h2 {text-align:center;}
#pc_nav .menu h2 a {display:block;}
#pc_nav .menu h2 a img {}

#pc_nav .menu .list {flex-grow:1; display:grid; gap:10px; margin-top:60px; width:100%;}
#pc_nav .menu .list .dep1 {width:100%;}
#pc_nav .menu .list .dep1 a {display:flex; justify-content:space-between; align-items:center; text-align:left; width:100%; border-radius:10px; padding:15px 20px;}
#pc_nav .menu .list .dep1 a span {font-size:18px; font-weight:600; color:#222;}
#pc_nav .menu .list .dep1 a span i {color:#fff;font-weight:600;}

#pc_nav .menu .list .dep1 a:hover, #pc_nav .menu .list .dep1 a.active {background:#006d80;}
#pc_nav .menu .list .dep1 a:hover span, #pc_nav .menu .list .dep1 a.active span {color:#fff;}

#pc_nav .footer {flex-grow:1;}
#pc_nav .footer p {text-align:center; color:#aaa; font-weight:500; font-size:14px;}


@media screen and (max-width:1400px) {
}

@media screen and (max-width:1280px) {
    #pc_nav {height:calc(100% - 60px); width:220px; border-radius:20px; padding:70px 15px 30px;}

    #pc_nav .menu h2 a img {width:130px;}

    #pc_nav .menu .list {margin-top:50px;}
    #pc_nav .menu .list .dep1 a {padding:12px 15px;}
    #pc_nav .menu .list .dep1 a span {font-size:16px;}

    #pc_nav .footer p {font-size:12px;}
}

@media screen and (max-width:1000px) {
    #pc_nav {display:none;}
}

@media screen and (max-width:760px) {
}

@media screen and (max-width:680px) {
}

@media screen and (max-width:480px) {
}

@media screen and (max-width:360px) {
}















/********************************************************

    mobile_header

********************************************************/

#mobile_nav, .m_footer {display:none;}


@media screen and (max-width:1400px) {
}

@media screen and (max-width:1280px) {
}

@media screen and (max-width:1000px) {
    #mobile_nav, .m_footer {display:block;}

    /* 모바일 헤더 상단 */
    #mobile_nav {width:100%; background:#fff;}
    #mobile_nav .mn_gnb {display:flex; justify-content:space-between; align-items:center; padding:5px 30px;}
    #mobile_nav .mn_logo img {display:block; width:200px;}
    #mobile_nav .mn_btn {border:none; background:transparent; font-size:42px; cursor:pointer;}

    /* 오버레이 */
    #mobile_nav .m_overlay {position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; transition:all .3s ease;}
    #mobile_nav .m_overlay.show {background:rgba(0,0,0,0.5); pointer-events:auto;}

    /* 모바일 전체 메뉴 */
    #mobile_nav .m_menu_wrap {position:fixed; top:0; right:-100%; width:80%; height:100%; background:#fff; transition:all .3s ease; overflow-y:auto; z-index:99;}
    #mobile_nav .m_menu_wrap.open {right:0;}

    /* 메뉴 헤더 */
    #mobile_nav .m_menu_header {display:flex; justify-content:space-between; align-items:center; padding:10px 30px; background:#006d80;}
    #mobile_nav .m_menu_header h2 {}
    #mobile_nav .m_menu_header h2 img {width:220px;}
    #mobile_nav .m_close {border:none; font-size:36px; color:#fff;}

    /* 메뉴 리스트 */
    #mobile_nav .m_gnb {}
    #mobile_nav .m_gnb .dep1 a { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; background:#fff; border-bottom:1px solid #e5e5e5; font-size:18px; font-weight:500; color:#222; }
    #mobile_nav .m_gnb .dep1 a:hover, #mobile_nav .m_gnb .dep1 a.active {background:#f0f6f7; color:#006d80; font-weight:700;}

    /* footer */
    .m_footer {padding:20px; background:#333; text-align:center;}
    .m_footer p {font-size:14px; color:#aaa;}

    /* body 스크롤 막기 */
    body.no_scroll {overflow:hidden;}

}

@media screen and (max-width:760px) {
    /* 모바일 헤더 상단 */
    #mobile_nav .mn_gnb {padding:5px 20px;}
    #mobile_nav .mn_logo img {width:200px;}
    #mobile_nav .mn_btn {font-size:36px;}

    /* 메뉴 헤더 */
    #mobile_nav .m_menu_header {padding:5px 20px;}
    #mobile_nav .m_menu_header h2 img {width:200px;}
    #mobile_nav .m_close {font-size:36px;}

    /* 메뉴 리스트 */
    #mobile_nav .m_gnb .dep1 a {font-size:16px;}

    /* footer */
    .m_footer {padding:20px 10px;}
    .m_footer p {font-size:12px;}
}

@media screen and (max-width:680px) {
}

@media screen and (max-width:480px) {
    /* 모바일 헤더 상단 */
    #mobile_nav .mn_logo img {width:170px;}
    #mobile_nav .mn_btn {font-size:30px;}

    /* 모바일 전체 메뉴 */
    #mobile_nav .m_menu_wrap {width:100%;}

    /* 메뉴 헤더 */
    #mobile_nav .m_menu_header h2 img {width:170px;}
    #mobile_nav .m_close {font-size:30px;}
}

@media screen and (max-width:360px) {
}