@charset "UTF-8";

@media (max-width: 1730px) { .topbanner .open { display: none; }
  #footer .btn-top { left: auto; right: 1rem; margin-left: 0; } 
}

@media (max-width: 1520px) { #hnb .hnb1 { margin-left: -1rem; }
  #hnb .hnb2 { margin-right: -1rem; }
/*   #gnb1 > ul > li { margin: 0 3rem; }  */
}
@media (max-width: 1280px){
	#gnb1::after {height: 110%;}	
}

@media all and (max-width:1279px){
    #header {position:fixed;top:0;left:0;width:100%;height:50px;border-bottom:1px solid #ccc;z-index:1001;background:#fff}
    #header>.header_wrap {    position: fixed; top: 0; left: 0; width: 100%; height: 50px; border-bottom: 1px solid #ccc; z-index: 1001; background: #fff;}
    #header>.header_wrap >.inner_new {position:relative;width:auto;height:auto}
    #header .header_wrap h1 {float:none;position:absolute;top:0;left:0;}
    #header .header_wrap h1 a {width:150px;height:auto;background-size:auto 50%;line-height:50px;background-position:center}
    #gnb1 {display:none}
    #gnb2 {display: block;}
    #gnb2 a {/* display: none; */display: block; position: absolute;top: 12px;right: 0;/* width: 20px; *//* height: 14px; */background: url(/eng/images/ico_allmenu.png) no-repeat 50% 50%;z-index: 1002;/*text-indent: -9999em;*/background-size: 100%;}
    #gnb2 a.site_map_control {text-indent: -9999em !important;display: none;}
    #gnb2 .control {right: 10px; background: none;}
    #gnb2 > ul { top: 100%; left: auto; right:0; -webkit-transform: translateY(0); transform: translateY(0); z-index:20;}
	#gnb2 > ul::before { top: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	#gnb2 > ul > li { margin-top: 0 !important; padding-left: 0; border-top: 1px solid #f6f7f9;background-color:#033bae; }
	#gnb2 > ul > li > a { font-size: 2rem; display: block; position: relative; width: 100%; height: auto; padding: 2rem 4rem 2rem 2rem;background: none; font-weight: 400; color: #fff; text-align: left;  }
	#gnb2 > ul > li > a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 1rem; color: #fff; content: ''; }
	#gnb2 > ul > li.active > a { background-color: #033bae; color: #fff; }
	#gnb2 > ul > li.active > a::after { color: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
	#gnb2 > ul > li.active .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }
	#gnb2 > ul .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
	#gnb2 > ul .submenu > ul { padding: 0; background-color: #f6f7f9;}
	#gnb2 > ul .submenu > ul > li { float: none; width: 100%;}
	#gnb2 > ul .submenu > ul > li > div {}
	#gnb2 > ul .submenu > ul > li > a { font-size: 1.8rem; position: static; margin-bottom: 0; padding: 1.2rem 0 1.2rem 3rem;; color: #242424; }
/* 	#gnb2 > ul .submenu > ul > li > a::before { position: absolute; left: 0; top: 1rem; width: 0.5rem; height: 0.5rem; background-color: #c69c6d; content: ''; } */
/* 	#gnb2 > ul .submenu > ul > li > a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 0; color: #4f525f; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; } */
	#gnb2 > ul .submenu > ul > li > a:not(:only-child)::after { content:''; display:block; position:absolute; top: auto; left: auto; right:11px; color: #4f525f; background: url(/eng/images/ico_plus.png) no-repeat center !important; width:20px; height:20px; margin-top:-20px; } 
	#gnb2 > ul .submenu > ul > li.active > a:not(:only-child)::after {  background: url(/eng/images/ico_minus.png) no-repeat center !important; }
	#gnb2 > ul .submenu > ul > li.active .lnb-detail { visibility: visible !important; overflow: visible !important; width: auto !important; height: auto !important; opacity: 1;padding: 2rem;}
	#gnb2 > ul .submenu > ul > li.active .lnb-detail a {position:inherit !important; visibility: visible !important; overflow: visible !important; width: auto !important; padding:1.2rem 1rem 1.2rem 1.5rem; height: auto !important; opacity: 1; background-size: auto !important;background: none !important;top:auto !important;text-indent: -1.6rem;line-height: 2.5rem;}
	#gnb2 > ul .submenu > ul > li.active .lnb-detail a:before {content: "-";padding-right: 0.8rem;}
	#gnb2 > ul .lnb-detail { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; padding-left: 2rem;  }
	#gnb2.active > ul { width: 100%; }
    
    
    #hnb .hnb1 .label { display: block; }
	#hnb .hnb1 .list { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: -1px; top: 100%; width: 100%; background: #484c58; }
	#hnb .hnb1 .list li { width: 100%; border: 0 none; }
	#hnb .hnb1 .list a { padding-left: 2rem; text-align: left; }
	#hnb .hnb1.active .list { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }
	#hnb .hnb2 a { padding: 0 1.5rem; }
	#gnb1 { display: none; }
    
    #container.sub {min-height:auto}
    .m_search {display:block !important; float:left;width:22px;height:26px;background:url(/eng/images/m_ico_btn_search.png) no-repeat 50% 50%;z-index:1002;text-indent:-9999em;background-size:100%}
	.m_search_detail {display:block !important;;float:left;width:20px;height:14px;background:url(/eng/images/m_ico_btn_search_detail.png) no-repeat 50% 50%;z-index:1002;text-indent:-9999em;background-size:50%}
    .m_left_menu {display:block !important; ;width:50px;height:50px}
    .m_btn_area {display:block !important; }
    .util {display:none}
    .nav {display:none}
    #container {padding-top:50px}
    .lnb {display:none}
    .sub_tit_box {display:none}
    .sub_cont_top {border-top:0}
    .sub_cont_top .page_navi {margin-right:0;padding:0 10px;text-align:left}

    .search_header {display:none}
    .search_header.on {display:block}
    .search_header {float:none;position:absolute;top:50px;left:0;width:100%;height:48px;margin:0;padding:7px 50px 7px 7px;border-radius:0;background:#086fcb;z-index:1003;border-bottom:1px solid #0858a0;border:0}
    .search_header .btn_search span {background:url(/images/ncp/eng/m_ico_btn_search2.png) no-repeat 50% 50%;background-size:40%}
    .search_header input[type=text] {border-radius:0}
    .search_header .btn_search {width:50px;height:50px;height:100%;top:0;right:0;background-image:none;background:#086fcb}
    .search_header .btn_search span {height:46px}
    
    #footer .inner {padding:20px 10px;width:auto}
    .f_logo {display:none}
    
    .lst_f_menu dd a {font-size:13px}
    .lst_f_menu dd:first-of-type {margin-left:0}
    .lst_f_menu {margin-left:0;border-top:0;border-bottom:0}
    .lst_f_menu:before,.lst_f_menu dl:after {display:none}
    
    /* 영문 검색창모양 반응형 */
    .inne.inner_new .search_header.on {width:100%; left:0; margin-left:0; float:none; top:20px; z-index:20;}
    .inne.inner_new .search_header.on input[type=text] {width:100%;}
}

@media (max-width: 1024px) { 
	
	
	.footbanner { padding: 1.5rem 4rem; }
	#footer { padding: 0 0 2rem 0; text-align: center; }
	#footer .btn-top { bottom: 25rem; }
	#footer .mark { display: none; }
	#footer .related { bottom: 0; left: -1rem; z-index: 2; width: calc(100% + 2rem + 1px); }
	#footer .related .group { width: calc(50% - 1px); height: 4.5rem; margin: 0 1px 0 0; border: 0 none; background-color: #969ca1; color: #fff; line-height: 4.5rem; }
	#footer .related .list { margin-bottom: 0; }
	#fnb { margin-bottom: 2rem; }
	#fnb .fnb2 { width: 100%; }
	#siteinfo { padding-left: 0; }
	#siteinfo .logo { display: inline-block; position: static; margin-bottom: 1rem; } 
}

@media (max-width: 1010px) {
	/* .lst_f_menu {margin-left: 60px;} */
	.lst_f_menu,.user_box {float:none}
	.lst_f_menu dl {padding: 10px 15px;}
	.user_box {margin-top: 10px;}
}
 
@media (max-width: 763px) {
	.lst_f_menu dl:first-of-type {width: 250px;}
	.lst_f_menu dl:last-child {width: 150px;}
}

@media all and (max-width:450px){
    .lst_f_menu dd:nth-of-type(3) {margin:10px 0 0 0}
	.user_box ul, .user_box select {float: none; width: 100%;}
	.user_box select {margin: 10px 0 0 0;}
}

@media all and (max-width:375px){
    .lst_f_menu dl:first-of-type {width:150px}
}

@media all and (max-width:320px){
    .lst_f_menu dl:first-of-type dd:last-child {margin:10px 0 0 0}
}