@charset "utf-8";

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

#page-bar .gnb { position: relative; width: 250px; box-sizing: border-box; }
#page-bar .gnb h2 { position: relative; z-index: 1; display: block; padding-left: 30px; line-height: 70px; font-size: 15px; border-right: 1px solid var(--border-01); color: var(--gray-55); font-size: 15px; font-weight: 500; cursor: pointer; }
#page-bar .open { position: absolute; z-index: 0; top: 0; right: 30px; width: 22px; height: 70px; cursor: pointer; }
#page-bar .gnb ul { position: relative; z-index: 99; border-left: 1px solid var(--border-01); background-color: #fff; max-height: 0; overflow: hidden; box-sizing: border-box;}
#page-bar .gnb li { display: block; border-right: 1px solid var(--border-01); }
#page-bar .gnb li:first-child { padding-top: 15px; }
#page-bar .gnb li:last-child { padding-bottom: 15px; border-bottom: 1px solid var(--border-01); }
#page-bar .gnb li a { padding-left: 30px; line-height: 36px; font-size: 15px; color: var(--gray-61); display: block; }

#page-bar .gnb.on h2 { color: var(--mc); }
#page-bar .gnb.on ul { max-height: 212px; transition-duration: 0.7s; }
#page-bar .gnb.on .open { transform: rotate(180deg); transition: all ease 0.7s; }
#page-bar .gnb.on a:hover { color: var(--gray-11); font-weight: 500; }

#page-bar .lnb { position: relative; width: 250px; box-sizing: border-box; }
#page-bar .lnb > h3 { position: relative; z-index: 1; display: block; padding-left: 30px; line-height: 70px; font-size: 15px; border-right: 1px solid var(--border-01); color: var(--gray-55); font-size: 15px; font-weight: 500; cursor: pointer; }
#page-bar .lnb ul { position: relative; left: -1px; z-index: 99; width: calc(100% + 1px); border-left: 1px solid var(--border-01); background-color: #fff; max-height: 0; overflow: hidden;}
#page-bar .lnb li { display: block; border-right: 1px solid var(--border-01); }
#page-bar .lnb li:first-child { padding-top: 15px; }
#page-bar .lnb li:last-child { padding-bottom: 15px; border-bottom: 1px solid var(--border-01); }
#page-bar .lnb li a { padding-left: 30px; line-height: 36px; font-size: 15px; color: var(--gray-61); display: block; }

#page-bar .lnb.on h3 { color: var(--mc); }
#page-bar .lnb.on ul { max-height: 350px; transition-duration: 0.7s; }
#page-bar .lnb.on .open { transform: rotate(180deg); transition: all ease 0.7s; }
#page-bar .lnb.on a:hover { color: var(--gray-11); font-weight: 500; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #page-bar { height: 60px; }
    #page-bar .btn_home {width: 60px; height: 60px;}
    #page-bar .gnb { width: 220px; }
    #page-bar .gnb h2 { padding-left: 30px; font-size: 14px; line-height: 60px; }
    #page-bar .gnb li a { line-height: 30px; font-size: 14px; }
    #page-bar .lnb { width: 220px; }
    #page-bar .lnb h3 { padding-left: 30px; font-size: 14px; line-height: 60px; }
    #page-bar .lnb li a { line-height: 30px; font-size: 14px; }
    #page-bar .open { right: 30px; width: 22px; height: 60px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #page-bar { height: 50px; }
    #page-bar .container-xxl { padding-left: 0 !important; padding-right: 0 !important; }
    #page-bar .btn_home {width: 50px; height: 50px;}
    #page-bar .gnb { width: calc(50% - 25px); }
    #page-bar .gnb h2 { padding-left: 20px; font-size: 14px; line-height: 50px; }
    #page-bar .gnb li a { line-height: 30px; font-size: 14px; padding-left: 20px; }
    #page-bar .lnb { width: calc(50% - 25px); }
    #page-bar .lnb h3 { padding-left: 20px; font-size: 14px; line-height: 50px }
	#page-bar .lnb h3.line_hidden_right { border-right: 0; }
    #page-bar .lnb li { border-right: 0; }
    #page-bar .lnb li a { line-height: 30px; font-size: 14px; padding-left: 20px; }
    #page-bar .open { right: 20px; width: 22px; height: 50px; }
    #page-bar.big-menu { position: relative; padding-bottom: 35px; box-sizing: content-box; }
    #page-bar.big-menu .gnb.on { position: relative; z-index: 999; }
    #page-bar.big-menu .lnb.on { position: relative; z-index: 999; }
    #page-bar .lnb-02 { position: absolute; bottom: 0; left: 0; padding: 0 15px; width: 100%; height: 36px; background: var(--gray-f5); border-top: 1px solid var(--border-01); }
    #page-bar .lnb-02 h3 { display: none; }
    #page-bar .lnb-02 .open { display: none; }
    #page-bar .lnb-02 ul { max-height: 35px; display: flex; justify-content: flex-end; align-self: center; background: var(--gray-f5); border: 0; }
    #page-bar .lnb-02 li { position: relative; border: 0; }
    #page-bar .lnb-02 li::before { position: absolute; top: 14px; left: 10px; width: 1px; height: 8px; background: var(--border-02); display: block; content: ""; }
    #page-bar .lnb-02 li a { line-height: 35px; font-size: 12px; font-weight: 500; }
    #page-bar .lnb-02 li a.now { color: var(--mc); }
    #page-bar .lnb-02 li:first-child { padding-top: 0; padding-bottom: 0; }
    #page-bar .lnb-02 li:first-child:before { display: none; }
    #page-bar .lnb-02 li:last-child { border: 0; padding-bottom: 0; }
}