.scrolled #header-wrap { color:#555}

#header {
	width: 100%;
    display: flex;
    max-width: none;
    height: inherit;
}
#header-wrap {  border-bottom: 1px solid #ddd; height: 85px}
#header .lnb-line { right: 10px;top: 28px; font-weight:bold}




#btn-menu-m,#btn-menu-m span{display:inline-block;transition:all .4s;box-sizing:border-box}
#btn-menu-m{position:fixed;width:30px;height:40px;top:20px;right:15px;z-index:120;display:none}
#btn-menu-m span{position:absolute;left:0;width:100%;height:2px;background-color:#808080}
#btn-menu-m.active span{background-color:#fff;height:1px}
#btn-menu-m span:nth-of-type(1) {top: 8px;}
#btn-menu-m span:nth-of-type(2) {top: 16px;width:25px}
#btn-menu-m span:nth-of-type(3) {bottom: 13px;}
#btn-menu-m.active span:nth-of-type(1) {-webkit-transform: translateY (16px) rotate (-45deg);transform: translateY(16px) rotate(-45deg); top: 0px; background-color:#808080}
#btn-menu-m.active span:nth-of-type(2) { opacity: 0; background-color:#808080}
#btn-menu-m.active span:nth-of-type(3){-webkit-transform:translateY(-23px) rotate(45deg);transform:translateY(-23px) rotate(45deg);bottom:0; background-color:#808080}
.scrolled #btn-menu-m span { background-color:#808080}


.logo { margin: 0px 0 0 0px; align-self: center;}
.logo a {display:block; width:300px; height:47px; margin-left: 61px; line-height:47px; background-image:url(../img/sgplant-logo.png); background-position: center left; background-repeat: no-repeat; background-size:86%}
.scrolled .logo a {background-image:url(../img/sgplant-logo.png);}
.scrolled #header-wrap{background-color:#fff;border-bottom:0;top:0;z-index:110}


#header-wrap{position:fixed;z-index:100;width:100%;height:80px;z-index:110; border-bottom: 1px solid rgba(255, 255, 255, .3);}
#header .lnb-line {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: inherit;
}
#header.fixed { position: fixed;width: 100%; top:0}
#header .lnb-line:after{content: ;visibility:hidden;display:block;height:0;clear:both}
#lnb { float:left;}
#lnb * { box-sizing: border-box;}
#lnb > ul:after{content: ;visibility:hidden;display:block;height:0;clear:both}
#lnb > ul > li{display:inline-block;float:left;margin-left:-1px;transition:all .5s;white-space:nowrap;padding-bottom:20px}
.scrolled #lnb > ul > li > a {color: #222; opacity: 0.8 }
.scrolled #lnb > ul > li > a:hover {color: #222; opacity: 1}


.inBox {width: 1100px;text-align: right;color: rgb(109, 109, 109);padding-top: 60px;font-size: 12px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;padding-bottom: 20px;}
.inBox span {padding-left: 6px; font-size: 12px;font-weight: bold;color: #333;}
.inBox a {padding: 0px 6px; font-size: 12px;color: #666;}

@media screen and (max-width: 1560px) {   
	#lnb { display:none}
	#btn-menu-m { display:block}
}


@media screen and (max-width: 920px) {  
    #lnb > ul > li.hide{width:10px;overflow:hidden;opacity:.5;background-color:#888;padding:0 10px;box-sizing:border-box}
}




#lnb > ul > li > a { color: #fff;opacity: 0.8}
#lnb > ul > li > a:hover {color: #fff; opacity:1}
#lnb > ul > li > ul{position:absolute;width:100%;display:none;box-sizing:content-box;margin-left:-1px;z-index:2}
#lnb > ul > li > ul ul{position:absolute;width:100%;display:none;border:1px solid #525252;box-sizing:content-box;margin-top:-1px;top:0;left:100%;margin-left:0}
#lnb > ul > li { padding: 0 5px; position: relative;}
#lnb > ul > li > a{display:block;width:100%;height:100%;padding:0 14px;text-align:center;font-size:20px;font-weight:bold;color:#000;transition: 0.3s; opacity:0.8}
#lnb > ul > li > a:hover { opacity:1}
#lnb > ul > li li{border-top:1px solid #525252;line-height:48px;height:50px;background-color:#333;padding:0;margin-top:-1px}
#lnb > ul > li li:first-child {border-top:0}
#lnb > ul > li li:nth-last-child(1) {height: 50px;line-height: 50px;}
#lnb > ul > li li > a{width:100%;height:100%;display:block;padding:0 20px;color:#fff;font-size:14px}
#lnb > ul > li li > a:hover {background-color:#39F; color:#fff;}
#lnb > ul > li > ul { width: 220px; top: 100%;left: 0px;}
#lnb > ul > li.on > ul { position: absolute;display: block;}
#lnb > ul > li .d1 { display:none}
#lnb .arrow{position:absolute;width:30px;height:30px;font-size:14px;color:#fff;display:inline-block;right:0;top:50%;margin-top:-15px;text-align:center;line-height:30px;z-index:1}
#lnb ul ul .arrow {transform: rotate(-90deg);}



@media screen and (max-width: 768px) {
  #header .lnb-line { display: none;}
  #header-wrap {position: fixed;top:0;}
  #header-wrap #logo-line { margin: 0;}
  #logo-line .logo { display: inline-block;float: none;}
  #logo-line .contact { display: none;}
  #btn-menu-m { display: inline-block;}
  #top-bg-wrapper {}
}







#m-lnb-wrapper{position:fixed;top:0;right:100%;z-index:110;width:100%;overflow:auto;background-color: rgba(255 255 255 / 0.9) !important;opacity:.9;box-sizing:border-box;padding-top:60px;padding-left:2em;padding-right:1em;transition:all .5s;opacity:1}
#m-lnb-wrapper.on {right: 0px;}
#m-lnb > ul {font-size: 14px; margin-top: 20px }
#m-lnb > ul > li > span{position:absolute;right:0;top:0;width:40px;height:50px;font-size:14px;text-align:center;transition:all .4s;color:#ffffff00;line-height:inherit;cursor:pointer}
#m-lnb > ul > li.on > span {transform: rotate(180deg);}
#m-lnb > ul > li li > span{position:absolute;right:0;top:0;width:40px;height:40px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer}
#m-lnb > ul > li li.on > span { transform: rotate(180deg);}
#m-lnb > ul > li {position: relative;}
#m-lnb > ul > li > a{
    display: inline-block;
    padding: 10px 10px;
    font-size: 22px;
    color: #013F90;
    font-family: Pretendard, Sans-serif;
    font-weight: 700;
}
#m-lnb > ul > li {line-height: 55px;border-bottom: 1px solid #333;}
#m-lnb > ul > li:nth-last-child(1) {border-bottom: 0;}
#m-lnb > ul > li ul {display: none;line-height: 40px;}
#m-lnb > ul > li li {border-top: 1px solid #474747;background-color: #222;}
#m-lnb > ul > li li li {border-top: 1px solid #959595; background-color: #777;}
#m-lnb > ul > li li > a {display:inline-block;padding:3px 15px 3px 20px;font-weight:300}
#m-lnb > ul > li li li > a { display: inline-block; padding: 0 10px 0 30px;}


#m-lnb > ul > li:nth-child(1) > span {
    background-image: url(../img/mobile-menu-icon_01.png);
    background-repeat: no-repeat;
    background-size:contain;
    width: 65px;
    height: auto;
    position: absolute;
    bottom: 10px;
	background-position: center;
}

 #m-lnb > ul > li:nth-child(2) > span {
    background-image: url(../img/mobile-menu-icon_02.png);
    background-repeat: no-repeat;
	background-size:contain;
    width: 65px;
    height: auto;
    position: absolute;
    bottom: 10px;
	background-position: center;
}
 #m-lnb > ul > li:nth-child(3) > span {
    background-image: url(../img/mobile-menu-icon_03.png);
    background-repeat: no-repeat;
    background-size:contain;
    width: 65px;
    height: auto;
    position: absolute;
    bottom: 10px;
	background-position: center;
}
 #m-lnb > ul > li:nth-child(4) > span {
    background-image: url(../img/mobile-menu-icon_04.png);
    background-repeat: no-repeat;
    background-size:contain;
    width: 65px;
    height: auto;
    position: absolute;
    bottom: 10px;
	background-position: center;
}
 #m-lnb > ul > li:nth-child(5) > span {
    background-image: url(../img/mobile-menu-icon_05.png);
    background-repeat: no-repeat;
    background-size:contain;
    width: 65px;
    height: auto;
    position: absolute;
    bottom: 10px;
	background-position: center;
}

@media screen and (max-width: 640px) {
	.logo { margin-top:12px}
	.scrolled .logo a {  background-image: url(../img/sgplant-logo.png); width:265px; height:60px; margin-left:20px;}
	.logo a { width:265px; height:60px; margin-left:20px;}
	#btn-menu-m { top:23px}
}