/* header */
#header {position: fixed; top: 0; left: 0; width: 100%; height: 120px; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.4); text-align: right; z-index: 500; transition: all .5s ease-in-out;}
.header_inner {position: relative; width: 100%; height: 100%; margin: 0 auto;}
/* #header .logo {position: absolute; top: 50%; left: 80px; transform: translateY(-50%);  width: 400px; height: 40px;}
#header .logo > a {display: block; width: 100%; height: 100%; background: url(../images/logo_WH.png) no-repeat 50% 50%; background-size: 100% auto;} */

#header .logo {position: absolute; top: 50%; left: 40px; transform: translateY(-50%);}
#header .logo > a {display: block; height: 32px;}
#header .logo > a > img {width: auto; height: 32px;}
#header .logo > a > .logo_wh {display: inline-block;}
#header .logo > a > .logo_bk {display: none;}
#header .logo > a > span {color: #fff; font-size: 24px; vertical-align: top; font-weight: 600; letter-spacing: -1px; border-left: 1px solid #ededed; padding: 0 10px;}

.gnb_wrap {display: block;}
.gnb {display: inline-block; text-align: right; padding-right: 350px;}
.gnb > ul {font-size: 0;}
.gnb > ul > li {display: inline-block; font-size: 18px; margin-right: 50px;}
.gnb > ul > li:last-child {margin-right: 0;}
.gnb > ul > li > a {display: block; line-height: 120px; color: #fff; transition: all .5s ease-in-out;}
.util_gnb {position: absolute; top: 50%; right: 80px; transform: translateY(-50%);}
.util_gnb > ul {background: rgba(255,255,255,.4); font-size: 0; padding: 10px 10px;}
.util_gnb > ul > li {position: relative; display: inline-block; font-size: 14px; padding: 0 14px;}
.util_gnb > ul > li > a {color: rgba(255,255,255,0.6); transition: color .4s;}
.util_gnb > ul > li > a:hover {color: #fff;}
.util_gnb > ul > li:before {content: ''; display: block; position: absolute; top: 0; left: 0; margin-top: 5px; width: 1px; height: 12px; background: #000;}
.util_gnb > ul > li:first-child:before {content: none;}

.m_gnb_wrap {display: none;}

#header.down {height: 100px;}
#header.down .gnb > ul > li > a {line-height: 100px;}

#header.white {background: #fff; border-bottom: 1px solid rgba(0,0,0,0.1);}
#header.white .logo > a > .logo_wh {display: none;}
#header.white .logo > a > .logo_bk {display: inline-block;}
#header.white .logo > a > span {color: #6d6e71;}
/* #header.white .logo {}
#header.white .logo > a {background: url(../images/logo.png) no-repeat 50% 50%; background-size: 100% auto;} */

#header.white .gnb > ul > li > a {color: #333;}
#header.white .gnb > ul > li > a:hover {color: #1b7cc9;}
#header.white .util_gnb > ul {background: #25245e;}
#header.white .util_gnb > ul > li > a {color: rgba(255,255,255,0.6);}
#header.white .util_gnb > ul > li > a:hover {color: #fff;}
#header.white .util_gnb > ul > li:before {content: ''; background: #fff;}
#header.white .util_gnb > ul > li:first-child:before {content: none;}

/* depth2 */
.gnb_dep2 {visibility: hidden; position: absolute; left: 0; width: 100%; background: #25245e; text-align: center;  opacity: 0; transition: all .4s;}
.gnb_dep2 li {display: inline-block; text-align: center;}
.gnb_dep2 li a {display: block; color: rgba(255,255,255,0.6); font-size: 15px; padding: 20px 40px; transition: color .4s;}
.gnb_dep2 li a:hover {color: #fff;}
.gnb > ul > li:hover .gnb_dep2 {visibility: visible;  opacity: 1;}

.header_menu_btn{display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width:48px; height:48px; padding:16px 12px; background:transparent; cursor:pointer; transition:top 300ms; z-index: 9999;}
.header_menu_btn .menu_btn{display: block; position:relative; width:100%; height:100%;}
.header_menu_btn .btn_line{display:block; position:absolute; width:100%; height:2px; background:#fff; transition:all 280ms ease;}
.header_menu_btn .line_01{top:0;}
.header_menu_btn .line_02{top:50%; margin-top:-1px;}
.header_menu_btn .line_03{bottom:0;}
.header_menu_btn.menu_open .btn_line {background: #333;}
.header_menu_btn.menu_open .line_01{top:50%; margin-top:-1px; transform:rotate(45deg);}
.header_menu_btn.menu_open .line_03{top:50%; margin-top:-1px; transform:rotate(-45deg);}
.header_menu_btn.menu_open .line_02{width:0;}

#header.white .header_menu_btn .btn_line,
#header.down .header_menu_btn .btn_line{background: #333;}

/* footer */
#footer {position: relative; background: #fff; padding: 60px 0; border-top: 1px solid #ededed;}
.footer_nav {overflow: hidden; padding-bottom: 40px;}
.footer_nav li {float: left; margin-right: 10px;}
.footer_nav li a {display: block; border: 1px solid #ededed; font-size: 14px; color: #333; padding: 10px 20px;}
.footer_nav li.admin a {background: #25245e; border: 1px solid #25245e; color: #fff;}
.footer_txt {clear: both;}
.footer_txt > strong {color: #25245e; font-weight: 600; display: block; padding-bottom: 20px;}
.footer_txt > ul {font-size: 0;}
.footer_txt > ul > li {display: inline-block; font-size: 14px; color: #333; margin-right: 40px;}
.footer_txt > ul > li em {width: 50px; display: inline-block; font-size: 14px; color: #333; font-weight: 600;}
.copyright {color: #767676; padding-top: 60px;}

.top_btn {position: absolute; right: 80px; top: 50px; z-index: 300;}
.top_btn > a {display: table; background: #25245e; width: 80px; height: 80px; color: #fff;}
.top_btn > a > span {display: table-cell; vertical-align: middle; text-align: center;}
.top_btn > a > span:before {content: ''; display: block; width: 20px; height: 10px; background: url(../images/common/icon_up_WH.svg) no-repeat 50% 50%; background-size: 16px auto; margin: 0 auto;}



@media (max-width:1920px) {
    #header .logo > a{height:27px; font-size:0;}
    #header .logo > a > img{height:27px;}
    #header .logo > a > span{font-size:18px; margin-left:10px;}
    
    .gnb{padding-right:230px;}
    .gnb > ul > li{margin-right:30px;}
    .gnb > ul > li > a{font-size:16px;}
    .util_gnb{right:50px;}

}

@media (min-width: 1440px) {
    .header_menu_btn {display: none;}
}


@media (max-width: 1440px) {
    /* menu open gnb & menu scroll down */
    .gnb_wrap {display: none;}
    
    .header_menu_btn {display: block; right:40px;}
    .header_menu_btn.menu_open .btn_line,
    #header.white .header_menu_btn .btn_line {background: #333;}
    #header.white .util_gnb > ul > li > a {color: #fff;}

    .header_menu_btn.menu_open .btn_line {background: #fff !important;}
    .m_gnb_wrap .gnb {display: block; padding: 0; text-align: left;}
    .m_gnb_wrap .gnb > ul > li {display: block; width: 100%;}
    .m_gnb_wrap .gnb > ul > li > a,
    #header.down .gnb > ul > li > a {color: #333; padding: 20px 14px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #ededed; line-height: inherit;}
    .m_gnb_wrap .gnb .menu_item {position: relative;}
    .m_gnb_wrap .gnb .menu_item:after {content: ''; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: block; width: 20px; height: 20px; background: url(../images/common/icon_arw_down.svg) no-repeat 50% 50%; background-size: 14px auto;}
    .m_gnb_wrap .gnb .menu_item.on {color: #1b7cc9;} 

    .m_gnb_wrap .util_gnb {position: absolute; top: 0; left: 0; width: 100%; transform: none; text-align: left;}
    .m_gnb_wrap .util_gnb > ul {background: linear-gradient(135deg, #25245e 30%, #cf7a42) !important; padding: 40px 20px 20px 20px;}   
    .m_gnb_wrap .util_gnb > ul > li > a {color: #fff !important;}
    .m_gnb_wrap .util_gnb > ul > li:before {background: #fff;}

    .m_gnb_wrap {display: block; background: #fff; position: fixed; top: 0; right: -100%; width: 100%; height: 100%; padding-top: 80px; padding-bottom: 80px; transition: right .5s ease;}
    .menu_open .m_gnb_wrap {right: 0;}

    .m_gnb_wrap .gnb_dep2 {display: none; visibility: visible; opacity: 1; position: static; background: #f8f9fa; border-bottom: 1px solid #ededed; text-align: left; transition: none;}
    .m_gnb_wrap .gnb_dep2 li {display: block; text-align: left;}
    .m_gnb_wrap .gnb_dep2 li a {color: #333; font-size: 14px; padding: 14px 20px}
    .m_gnb_wrap .gnb_dep2 li a:hover {color: #1b7cc9;}
    .m_gnb_wrap .gnb_dep2 li .menu_item:after {position: relative;}
    .m_gnb_wrap .gnb_wrap {display: none;}
}

@media (max-width:1024px){
    #header {height: 80px;}
    .header_inner {width: 92%; margin: 0 auto;}

    #header .logo {left: 0;}
    #header .logo > a {height: 27px; display: flex; align-items: center;}
    #header .logo > a > img {height: 27px;}
    #header .logo > a > span {font-size: 16px; vertical-align: middle;}
    
    #header.down {height: 80px;}
    .header_menu_btn {right:0;}

    /* footer */
    .top_btn {display: none;}

    
}



@media (max-width:767px) {
    /* header */
    /* #header .logo {width: 200px; height: 27px;} */
    #header .logo > a {height: 18px;}
    #header .logo > a > img {height: 18px;}
    #header .logo > a > span {font-size: 12px;}

    /* footer */
    #footer {padding: 40px 0;}
    .footer_nav li {margin: 0 5px 5px 0;}
    .footer_nav li a {padding: 4px 10px;}
    .copyright {padding-top: 40px;}

    .top_btn {top: auto; bottom: 20px; right: 20px;}
    .top_btn > a {width: 60px; height: 60px;}
    
}