/*---------- header ----------*/
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 5000; background: transparent; color: #fff; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: all .4s ease}
#header:hover { color: black; background: #fff; border-bottom: 1px solid #c1c1c1; } 
#header .header_inner { position: relative; margin: 0 auto; max-width: 1660px; width: 90%; height: 100%; display: flex; justify-content:space-between; align-items: center; } 

/*header_logo*/
#header .logo { padding-top: 10px; } 
#header .logo>a { display: block; width: 128px; height: 29px; background: url(../image/main_logo_w.png) no-repeat; } 
#header .logo .sub_logo { background: url(../image/main_logo.png) no-repeat; } 

/*header_util*/
#header .util { padding-top: 10px; } 
#header .lang { width: 50px; padding-right: 15px; color: rgba(255,255,255,0.7)}
#header .lang .on { color: #fff; font-weight: 700; } 
#header .lang .on::after { display: block; content:""; position:absolute; width: 20px; height: 2px; background: #fff; } 
#header:hover .lang { color: #999; } 
#header:hover .lang .on { color: #222; } 
#header:hover .lang .on::after { background: #222; } 
#header .tel { /* position: absolute; bottom: 15px; right: 0; */ cursor: pointer; padding: 0.6em 1.5em 0.6em; color: #fff; font-weight: 400; border-radius: 100px; background: #008f14; } 

.header_sub .lang { color: #999 !important; } 
.header_sub .lang .on { color: #222 !important; } 
.header_sub .lang .on::after { background: #222 !important; } 

/* .active */
#header.active { color: black; background: #fff; border-bottom: 1px solid #c1c1c1; } 
#header.active .logo>a,
#header:hover .logo>a { background: url(../image/main_logo.png) no-repeat; } 
#header .nav ul.gnb .active>a { color: #008f14; } 
#header.active .lang { color: #999; } 
#header.active .lang .on { color: #222; } 
#header.active .lang .on::after { background: #222; } 

/*header_nav> ui*/
#header .nav { width: 700px; height: 90px; } 
#header .nav ul.gnb { display: flex; justify-content: center; align-items: flex-end; height: 100%; margin: 0 auto; } 
#header .nav ul.gnb li { position: relative; margin: 0 auto; max-width: 90%; flex-grow: 1; margin-bottom: 0; text-align: center; } 
#header .nav ul.gnb li a { box-sizing: border-box; display: block; font-size: 18px; transition: .8s; text-transform: uppercase; font-weight: 500; } 
#header .nav ul.gnb>li>a { padding: 30px 0; } 
#header .nav ul.gnb>li>a:after { content: ""; width: 0; height: 3px; background: #008f14; position: absolute; left: 0; bottom: -2px; z-index: 2; transition: all .4s ease}
#header .nav ul.gnb li:hover a:after { width: 100%; } 

/*header_nav> ui> ui*/
#header .nav ul.gnb li ul.sub { position: absolute; opacity: 0; visibility: hidden; z-index: 3; width: 100%; height: 350px; padding: 20px 0; } 
#header .nav ul.gnb li ul.sub li { position: relative; display: block; padding: 5px 0; } 
#header .nav ul.gnb li ul.sub li a { padding: 10px 10px; font-size: 18px; } 
#header .nav ul.gnb li ul.sub li a:hover { color: #008f14; } 


/*---------- m_header ----------*/
#header .nav .logo { display: flex; width: 200px; flex-wrap: wrap; justify-content: center; align-items: center; text-transform: uppercase; cursor: pointer; } 
#header .menu_btn { position: absolute; top: 20px; right: 20px; display: none; } 
#header .menu_btn div { position: relative; width: 25px; height: 2px; background-color: #fff; margin: 6px 0px; transition: all .8s ease; } 
@media(max-width: 768px){
 #header .menu_btn div { width: 15px; height: 2px; margin: 3px 0px; } 
 }

#header:hover .menu_btn div { background-color: #000; } 
#header.active .menu_btn div { background-color: #000; } 
#header .menu_btn.lijo div { position: absolute; transition: all .8s ease; background-color: #000; } 
#header .menu_btn.lijo div:nth-child(1) { transform: rotate(45deg); top: 7px; right: 0px; } 
#header .menu_btn.lijo div:nth-child(2) { width: 0px; top: 7px; right: 0px; } 
#header .menu_btn.lijo div:nth-child(3) { transform: rotate(-45deg); top: 7px; right: 0px; } 

@media(min-width:1024px){
 #header .nav ul.gnb:hover li ul.sub { visibility: visible; opacity: 1; transform: translateY(0px); } 
 #header .nav ul.gnb li:hover { display: inline-block; margin-bottom: 0px; } 
 #header.open .hd_bg { position: absolute; width: 100%; height: 1000px; background: #fff; z-index: 1; transition: all .4s; border-bottom: 1px solid #e0e0e0; } 
 #header .nav ul.gnb li ul.sub li a { text-align: center}
 #header .nav ul.gnb li ul.sub { display: block !important} 
 }

@media(max-width:1024px){
 #header .header_inner { width: 100%; } 
 #header .logo { padding-left: 5%; } 
 #header .logo>a { background: url(../image/m_main_logo_w.png) no-repeat !important; width: 100px; height: 24px; } 
 #header.active .logo>a,
 #header:hover .logo>a { background: url(../image/m_main_logo.png) no-repeat !important; } 
 #header .logo .m_sub_logo { background: url(../image/m_main_logo.png) no-repeat !important; } 
 #header .util { position: absolute; right: 65px; padding-top: 0; } 
 #header .nav { height: 30px; } 
 #header .catalog { display: none; } 
 #header .tel { /* position: absolute; bottom: 0; right: 65px; */mfont-size: 13px; } 
 #header { color: #fff; } 
 #header { position: relative; position: fixed; width: 100%; top: 0; left: 0; padding: 15px 0}
 #header .menu_btn { display: block; top: 50%; transform: translateY(-50%)}
 #header .menu_btn.lijo { top: 15%}
 #header .nav ul.gnb { position: absolute; top: 50px; transform: translateX(100%); left: 0; transition: .8s ease; width: 100%; height: calc(100vh - 40px); background: url(../image/m_main_bg.png) top center no-repeat; background-size:cover; overflow-y: auto; display: block}
 #header .nav ul.gnb li a { text-align: left}
 #header .nav ul.gnb>li>a { padding: 6% 5%; border-bottom: 1px solid #999; } 
 #header .nav ul.gnb.surya { transform: translateX(0%); } 
 #header .nav ul.gnb li ul.sub { opacity: 1; visibility: visible; display: none; position: relative; width: 100%; transition: 0s; transform: translateY(0px); /*background: #fff;*/ height: auto; } 
 #header .nav ul.gnb li ul.sub:after { display: none; } 
 #header .nav ul.gnb li ul.sub li a { padding: 5px 5%; font-size: 16px; } 
 .hd_bg { display: none !important} 
}

@media(max-width: 768px){
 #header .nav ul.gnb>li>a {font-size: 18px;}
 #header .nav ul.gnb li ul.sub li a {font-size: 15px; color: #222;}
 #header .tel { font-size: 11px; } 
 }

/*---------- sub header ----------*/
.header_sub { color: black !important; background: #fff !important; border-bottom: 1px solid #c1c1c1 !important; } 
.header_sub .menu_btn div { background-color: #000 !important; } 

.m_nav_box {margin: 0 auto; max-width: 90%; padding: 30px 0; display: none;}
.m_nav_box >div {border: 1px solid #80c269; margin: 5px 0;}
.m_nav_box >div .m_btn {display: flex; justify-content:space-between; align-items:center; padding: 10px;}
.m_nav_box >div span {font-weight: 500; font-size: 15px;}
.m_nav_box >div p {font-size: 13px;}

@media(max-width:1024px){
    .m_nav_box {display: block;}
}