/* CSS Document */

/* === 공통 기본 스타일 === */
#header { position: absolute; width: 100%; height: 96px; z-index: 9; transition: all 0.3s ease; }
#header .container { padding: 23px 0 0 0; position: relative; }
#header h1 { width: 102px; height: 44px; position: absolute; }
#header .logo { background: url(/assets/images/fumax_logo_01.png) no-repeat 0 0; width: 100%; height: 100%; display: block;}
#header .gnd { display: inline-block; padding: 11px 0 0 20%; width: 100%;}
#header .gnd > li { float: left; text-align: center; width: calc((100% - 20px) / 5);}
#header .gnd > li > a { color: #fff; height: 62px; display: inline-block; position: relative; font-size: 1.188rem; font-family: 'Noto Sans Korean'; font-weight: 400;}
#header .gnd > li > a:after { content: ""; position: absolute; bottom: 0; height: 3px; width: 100%; left: 0; background: #00427a; transform: scaleX(0); transition: transform 0.5s ease;}
#header .gnd > li:hover > a:after,
#header.active .gnd > li.active > a:after { transform: scaleX(1);}


@media(max-width: 1800px) {
	 #header h1 {left: 15px}
	#header .container {padding-right: 15px;padding-left: 15px;}
	#header .eng {right: 15px;}
	#header .btn-contact{ right: 150px;}  


}

@media(max-width: 1500px) {
	#header .gnd > li > a {font-size: 1.1rem;}
	#header .eng span {font-size: .8rem;}
	#header .btn-contact{ right: 134px;}  
}



@media(max-width: 1200px) {
	#header {height: 70px;}
	#header .container {padding:7px 0 0px 0;}
	
    #header .gnd {/*padding: 12px 0px 0px 7.3%;*//*width: 97%;*/ padding: 12px 0px 0px 20%; width: 100%; transform: scale(0.9);padding-top: 0px;}


    #header .gnd > li > a {padding: 14px 0; height: 59px;}
    #header.active .gnd > li > a {padding: 0;}
    #header.active:before {top: 75px;}
    #header.active {height: 330px;}
    #header.active .gnd > li .depth2  {margin-top: -1px;padding: 10px 3% 0 3%;}

    #header .eng {right: 15px; height: 20px; width: 21px;border-radius: 0; padding: 0; border: 0;top: 16px;font-size: 20px;}
    #header .eng span {display: none;}
    #header .eng i{display: block; padding-top: 4px;}
    #header .eng:before {width: 19px; height: 19px; /* background: url(../images/eng_icon.png) no-repeat 0 0; */ /*font-family: 'xeicon'; content: "\e9d3"; */}
    /* #header .eng:hover:before {background: url(../../common/images/eng-icon-hover.png) no-repeat 0 0;} */
    #header .eng:hover, #header .eng:focus{color: #FFF !important;background: transparent;}
    #header .eng:before {top: 0;}
    #header.active .eng {border: 0;}

	#header .btn-contact {right: 100px;}
	#header .btn-help {width: 77px;}
	#header .btn-help span {display: block;padding-top: 4px;}
}


@media(max-width: 1024px) {

 	#header {animation: none;transform: inherit;}
 	#header h1{top:14px;left: 15px;}
 	#header .logo {background-size: 88%;}
    #header .gnd,#header.active{display: none;}
    #header .gnd-mobile {display: inline-block;}
}

@media(max-width:1024px) {
	#header h1{top:14px;}
	#header .logo {background-size: 88%;}
}


/* === .fixed 클래스가 추가된 상태 === */
#header.fixed { position: fixed; top: 0; background: #fff; height: 60px; box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.26); z-index: 999;}
#header.fixed .container { padding: 5px 0 0 0;}
#header.fixed .gnd > li > a { color: #333; padding-bottom: 18px; height: 44px;}
#header.fixed .logo { background-position: 0 -47px;}
#header.fixed.active:before {top: 60px;}

/* === .active 클래스는 메뉴 확장에 사용 === */
#header.active { height: 450px; background: #fff; overflow: hidden; box-shadow: 5px 5px 23px rgba(0, 0, 0, 0.33);  }
#header.active:before { content: ""; position: absolute; top: 96px; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.11);}
#header.active .gnd li a { color: #000;}
#header.active .gnd > li .depth2 { display: block; padding: 25px 0 0 0; border: 1px solid #eaeaea;}
#header.active .gnd > li:hover .depth2 { background: #f3f5f7;}

@media(max-width: 1200px) {
	#header.fixed.active:before {top: 65px;} 
	#header.active:before { content: ""; position: absolute; top: 80px; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.11);}
}


@media(max-width: 1024px) {
	#header .gnd { display: none;}
	#header.fixed {  display: none; }
}

.sticky-nav {position: fixed; top: 40px; /* #header.fixed 높이와 동일 */  width: 100%; z-index: 998;  background: #fff; padding-bottom: 20px; /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);*/}
@media(max-width:1024px) {
	.sticky-nav {position: fixed; top: 0px; padding-bottom: 10px; }

}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 30px;
  padding-bottom: 30px;

}
@media(max-width:1024px) {
	.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl { 
  padding-top: 5px;
  padding-bottom: 5px;

}

}