@charset "utf-8";

/* ---------- page_bar ---------- */ 
#page_nav_bar {width: 100%; height: 70px; background-color: #fff; border-bottom: 1px solid var(--border-color);}
#page_nav_bar .container { padding-top: 0; padding-bottom: 0; display: flex; justify-content: flex-start;}
#page_nav_bar .btn_home {width: 70px; height: 70px; background-color: var(--gray-11); text-align: center;}
#page_nav_bar .btn_home img { display: inline-block; width: 26px; height: 100%; }

#page_nav_bar .page_gnb_wrap { position: relative; width: 250px; box-sizing: border-box; }
#page_nav_bar .page_gnb_on { position: relative; padding-left: 30px; border-right: 1px solid var(--border-color); color: var(--gray-75); font-size: 15px; font-weight: 400; line-height: 70px; }
#page_nav_bar .page_gnb_box { position: relative; z-index: 99; margin-left: -1px; padding: 30px 0;
    border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background-color: #fff; display: none; overflow: hidden;}
#page_nav_bar .page_gnb_box::after { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--border-color); display: block; content: ""; }
#page_nav_bar .page_gnb h2, #page_nav_bar .page_lnb_title { display: block; }
#page_nav_bar .page_gnb h2 { padding: 5px 30px; line-height: 120%; font-size: 15px; font-weight: 300;}
#page_nav_bar .page_gnb h3 { padding: 5px 30px; line-height: 120%; font-size: 15px; font-weight: 300;}
#page_nav_bar .page_lnb_on { color: var(--main-color); font-weight: 700; }
.page_nav_open { position: absolute; top: 0; right: 30px; width: 22px; height: 70px; cursor: pointer; }
.img_rotate { transform: rotate(180deg); transition: all ease 1s;}

#page_nav_bar .page_gnb h2:hover { color: var(--gray-11); font-weight: 500; }
#page_nav_bar .page_gnb h3:hover { color: var(--gray-11); font-weight: 500; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #page_nav_bar {height: 60px;}
    #page_nav_bar .btn_home {width: 60px; height: 60px;}
    #page_nav_bar .page_gnb_wrap { width: 220px; }
    #page_nav_bar .page_gnb_on { padding-left: 30px; font-size: 14px; line-height: 60px; }
    #page_nav_bar .page_gnb h2 { font-size: 14px; }
    #page_nav_bar .page_gnb h3 { font-size: 14px; }
    .page_nav_open { right: 30px; width: 22px; height: 60px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #page_nav_bar {height: 55px;}
    #page_nav_bar .container { width: 100%; margin: 0; padding: 0; }
    #page_nav_bar .btn_home {width: 30px; height: 55px;}
    #page_nav_bar .btn_home img { width: 20px; }
    #page_nav_bar .page_gnb_wrap { width: calc((100% - 30px)/2); }
    #page_nav_bar .page_gnb_on { padding-left: 15px; font-size: 13px; line-height: 55px; }
    #page_nav_bar .page_lnb_on { border-right: 0; }
    #page_nav_bar .page_gnb_box { padding: 20px 0; }
    .page_lnb_box { border-right: 0; }
    #page_nav_bar .page_gnb h2 { padding: 4px 15px; font-size: 13px; }
    #page_nav_bar .page_gnb h3 { padding: 4px 15px; font-size: 13px; }
    .page_nav_open { right: 10px; width: 20px; height: 55px; }

    #page_nav_bar .page_gnb_wrap.gnb_full { width: 100%; }
}