@charset "UTF-8";

/* ====================
* 
* container
*
========================*/
.container {max-width: 1400px ; margin: 0 auto;}


/* ====================
* 
* header
*
========================*/
/*레이아웃*/
#header {position: absolute;  z-index: 9; width: 100%;height: 96px;/*background-color: rgba(0, 16, 70, 0.25);*//* background-color: rgba(0, 66, 122, 0.8);*/ -webkit-transition: all 0.3s ease 0s;  -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s;  -o-transition: all 0.3s ease 0s;   transition: all 0.3s ease 0s; }
#header .container {padding: 23px 0 0px 0;line-height: 0; position: relative;}
#header h1 {width: 102px;/* height: 44px;*/ 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,#header.active .gnd > li .depth2,#header .container,#header .gnd > li {height: 100%;}

#header .gnd {display: inline-block; /*padding: 11px 0px 0px 11%; width: 89%;*/ padding: 11px 0px 0px 20%; width: 100%;}
#header .gnd > li > a {color: #fff; font-size: 1.188rem;display: inline-block; position: relative; /*height: 62px;*/ height: 62px; font-family: 'Noto Sans Korean' !important ; font-weight: 400;  }
#header .gnd > li > a:after {position: absolute; content: ""; display: block; height: 3px; width: 100%; bottom: 0; transition:.5s ease;background-color: .5s ease, left .5s ease; transform: scaleX(0); left: 0;/*background: #2e4cbb;*/ background: #00427a;}
#header.active .gnd > li.active > a:after, 
#header .gnd > li:hover > a:after  {transform: scaleX(1);}


#header .gnd > li {float: left; text-align: center; /*width:calc((100% - 119px) /5);*/  width:calc((100% - 20px) /5); cursor: pointer;}
#header .gnd > li:first-of-type {padding-left: 0;}
#header .gnd > li .depth2 {display: none;}
#header .gnd-mobile {display: none;}

#header.active{overflow: hidden; height: 450px; background: #fff; box-shadow: 5px 5px 23px rgba(0, 0, 0, 0.33);}
#header.active:before {top: 96px; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.11);}
#header.active .logo {background-position: 0 -47px;}
#header.active .gnd li a {color: #000;}
#header.active .gnd li .depth2 a:hover {text-decoration: underline;}
#header.active .gnd > li .depth2 {display: block; margin-top: 0px; padding: 25px 0% 0 0%; border: 1px solid #eaeaea; margin-left: -1px;}
#header.active .gnd > li .depth2 li{/*padding:0.3rem 0;*/padding:0.25rem 0;}
#header.active .gnd > li:last-of-type .depth2{ border-right: 1px solid rgba(0, 0, 0, 0.11);}

#header.active .gnd > li:hover .depth2,
#header.active .gnd > li.active .depth2{background: #f3f5f7; border-top: 1px solid #Ddd; border: 1px solid #eaeaea;}
#header.active .gnd li:hover > a, #header.active .gnd li.active > a {color: #2e4cbb; text-decoration: none;}


/*eng*/
#header .eng {font-weight: 100; padding: 7px 15px; font-family: 'Noto Sans Korean' , 'gothic'; border: 1px solid #fff; position: absolute; right: 0; margin-top: 5px;font-weight: 600; }
#header .eng:hover, #header .eng:focus{ background: #ffffff; color: #000 !important} 
#header .eng i{display:none;}
#header .eng span {display: inline-block;/* padding-left: 26px */}
#header.active .eng {border: 1px solid #666666;}
/* #header.active .eng:before{background: url(../../common/images/eng-icon-hover.png) no-repeat 0 0;} */
#header.active .eng i,
#header.active .eng span {color: #000;}

#header .btn-contact {right: 134px;}



/*헤더 애니메이션 등장 효과*/
/* 
#header {animation-duration: 1s;animation-iteration-count: 1;animation-fill-mode: forwards; transition-timing-function: ease-out; transform: translate3d(0%, -100%, 0);animation-name: rampDown;}
@keyframes rampDown {
  0% {transform: translate3d(0%, -100%, 0);}
  100% { transform: translate3d(0, 0, 0);}
}
 */

@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;}

    /*메뉴 gnd > hamburger*/
    .hamburger-btn {margin-top:12px; position: absolute; right: 15px; padding: 0;border: 0; margin-top: 9px;}
    #hamburger {display: block; width: 28px;height: 19px;position: relative; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}
    #hamburger span {display: block;position: absolute;height: 2px;width: 100%;background: #fff;border-radius: 9px;opacity: 1;left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
    #hamburger.open span {background: red;}
    #hamburger span:nth-child(1) {top: 0px; -webkit-transform-origin: left center;-moz-transform-origin: left center; -o-transform-origin: left center;transform-origin: left center;}
    #hamburger span:nth-child(2) {top: 8px;-webkit-transform-origin: left center;-moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
    #hamburger span:nth-child(3) {top: 16px; -webkit-transform-origin: left center; -moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
    #hamburger.open span:nth-child(1) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);top: -3px;left: 8px;}
    #hamburger.open span:nth-child(2) {width: 0%; opacity: 0;}
    #hamburger.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);top: 27px;left: 8px;}

    .modal-open  #hamburger span {background: #191919;}

    /*메뉴 gnd > modal */
    .modal-backdrop {z-index: 1;}
	#menuModal .modal-dialog {display:block; transform: translate(150%,0); height: 100%; width:50%; margin: 0; transition:transform .5s ease-out;}
	#menuModal.show .modal-dialog {-webkit-transform: translate(100%,0); transform: translate(100%,0); transition:transform .5s ease-out;}
	#menuModal .modal-content {border-radius: 0; height: 100%;}
	#menuModal .modal-content ul li {float: none; text-align: left; margin-top: -1px;}
	#menuModal .modal-content ul li button {font-size: 1.25rem; padding: 15px 20px; width: 100%; text-align: left; border-bottom: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1;}
	#menuModal .modal-content ul li button:hover,
	#menuModal .modal-content ul li button:active,
	#menuModal .modal-content ul li button:focus {text-decoration:none;}
	#menuModal .modal-content ul li button.btn.btn-link.collapsed {background: #fff; color:#000; border: 1px solid #fff ;border-left: 0;border-right: 0;}
	#menuModal .modal-content ul li button {border-bottom: 1px solid #e1e1e1 !important; border-top: 1px solid #e1e1e1 !important;}
	#menuModal .modal-content ul li button.btn.btn-link {color:#3c3c3c; border-radius: 0;border: 1px solid #e1e1e1; position: relative;}
	#menuModal .modal-content ul li>a {color:#000; font-size: 1rem; padding: 12px 20px;; border-bottom: 1px solid #e1e1e1; display: block;}
	#menuModal .modal-content ul li>a:hover {background: #e0e0e0;color: #3a3a3a;}
	#menuModal .modal-content ul li:last-child>a {border-bottom: none;}
	#menuModal .modal-content ul li ul {background: #f7f7f7;}
	.modal-open .modal, .modal-open {padding-right: 0 !important;}
	.accordian-logo {padding: 10px 15px; width: 111px;}
	.modal-dialog {max-width: inherit;}
	.accordion .btn-link:before {position: absolute; top: 50%; right: 21px; width: 12px; height: 12px; display: block;content: ""; border-top: 2px solid #ddd;
    border-left: 2px solid #ddd;border-bottom: 2px solid transparent; border-right: 2px solid transparent; transform: translate( 0,-19%) rotate(45deg);}
	.accordion .btn-link.collapsed:before { transform: translate( 0,-74%) rotate(-136deg); }
	
	
	/* eng  */
    #header .eng {right: 61px;}
    #header .eng {height: auto; width: auto; padding: 0; border: 0;top: 22px;font-size: 15px;}
    #header .eng i{display: none;}
    #header .eng span {display: block; padding-left: 26px;margin-top: 0px;}
    #header .eng:before {top:0px;display:none;}

    #header h1 {left: 15px;}
    
    #header .btn-contact {right: 139px;}
    #header .btn-help span {padding-top: 0;padding-left: 0;}
    
}

@media(max-width:1024px) {
	#header h1{top:14px;}
	#header .logo {background-size: 88%;}
	.hamburger-btn{margin-top:12px;}
	.hamburger-btn.close {margin-top:14px;}
	.hamburger-btn.close i { font-size: 2rem; color: #000;}
}

@media(max-width: 780px) {
    #header {height: 64px;}
    #header .logo {background-size: 100%;}
    #header h1 {width: 77px; height: 33px;top: 15px;}
    #header .eng {padding: 4px 9px;top: 14px;}
	.hamburger-btn{margin-top:9px;}
	
	/*메뉴 gnd > modal */
	#menuModal .modal-dialog {width:100%;}
	#menuModal.show .modal-dialog {-webkit-transform: translate(0%,0); transform: translate(0%,0);}
	
}


/* ====================
* 
* footer
*
========================*/
.footer-wrap {position: relative; font-size:14px;}
footer {background: #19334d;}
footer .container {padding: 40px 0 40px 235px; background: url(/assets/images/footerlogo_01.png) no-repeat 0 43px;}
footer *  {color: #eaeaeb; font-weight: 100;}


footer .address address,
footer .address span {display: inline-block;padding-bottom: 0px; margin-bottom: 0;}
footer .address span {padding-left: 18px;color: #eaeaeb;}
footer .address span .footer-tag{color:#eaeaeb }

@media(max-width: 1800px) {
	footer .container {background-position: 15px 43px;}
}

@media(max-width: 1200px) {
	footer .container {/* background-position: 31px 42px; */background: none;padding:30px;}
	footer .address span {padding-left: 0; padding-bottom: 0;color:#eaeaeb;}
	footer .address a{color: #eaeaeb;}
}

@media(max-width: 780px) {
	footer .container {/* padding: 25px 25px 25px 140px; */background-position: 21px 39px;}
	footer .address address {display: block;}
}

@media(max-width: 480px) {
	footer .container{text-align: center;padding: 30px 15px 80px 15px;background-position: center 150px;}
}


/* ====================
* 
* top버튼
*
========================*/
/*a.top {height: 99px; width: 99px; background: linear-gradient(-180deg, rgba(159,33,141,1) 0%, rgba(94,57,151,1) 52%, rgba(78,63,153,1) 100%);position: absolute;  top: -67px; z-index: 99999; right: 151px;padding-top: 22px;text-align: center;color: #fff;}*/

a.top {height: 99px; width: 99px; background: linear-gradient(-180deg, #6599cd, #3e80c1, #32669a);position: absolute;  top: -67px; z-index: 99999; right: 151px;padding-top: 22px;text-align: center;color: #fff;}

a.top i {font-weight: 900;font-size: 1.6rem;}
a.top span {display: block; font-family: 'Noto Sans Korean';font-size: .9rem;font-weight: 300; padding-top: 5px; }
a.top:hover{background: linear-gradient(-180deg, #0066cc, #004d99);text-decoration: none;}
.top:hover i{animation:topAnimation 1s ease-out infinite; -webkit-animation:topAnimation 1s ease-out infinite; -moz-animation:topAnimation 1s ease-out infinite;}
@keyframes topAnimation {
		0%{transform:translate3d(0,0,0);  -webkit-transform:translate3d(0,0,0);}
		20%{transform:translate3d(0,1px,0); -webkit-transform:translate3d(0,1px,0);}
		33%{transform:translate3d(0,2px,0); -webkit-transform:translate3d(0,2px,0);}
		75%{transform:translate3d(0,-3px,0); -webkit-transform:translate3d(0,-3px,0);}
		100%{transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);}
	}
	@-webkit-keyframes topAnimation {
		0%{transform:translate3d(0,0,0);  -webkit-transform:translate3d(0,0,0);}
		20%{transform:translate3d(0,1px,0); -webkit-transform:translate3d(0,1px,0);}
		25% {}
		33% {transform:translate3d(0,2px,0); -webkit-transform:translate3d(0,2px,0);}
		75%{transform:translate3d(0,-3px,0); -webkit-transform:translate3d(0,-3px,0);}
		100%{transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);}
}



@media(max-width: 1800px) {
    a.top {right: 15px;}
}


@media(max-width: 1024px) {
    a.top {height: 80px; width: 80px;padding-top:15px;}

}

@media only screen and (max-width:780px) {
a.top{width:50px;height:50px;top:-50px;padding-top:3px;}
a.top span {padding-top: 0;}
	
}

/* ====================
* 
* 컨텐츠페이지 > 서브헤더
*
========================*/
/*tit-nav*/
.tit-nav {height: 374px; overflow: hidden;position: relative;}
.tit-nav .bg {width: 100%; height: 100%; -webkit-transform: scale(1) rotate(.001deg); transform: scale(1) rotate(.001deg);-webkit-animation: scaleAnim 3s 1 ease-in-out forwards; animation: scaleAnim 3s 1 ease-in-out forwards;    background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; position: absolute;}
.tit-nav-bg01 .bg {background-image: url(/assets/images/CompanyIntroduction/company_bg_001.jpg);}
.tit-nav-bg02 .bg {background-image: url(/assets/images/esg/business_bg_003.jpg);}
.tit-nav-bg03 .bg {background-image: url(/assets/images/SalesPresentation/product_bg_001.jpg);}
.tit-nav-bg04 .bg {background-image: url(/assets/images/contact/contact_bg.jpg);}
.tit-nav-bg05 .bg {background-image: url(/assets/images/esg/esg_bg.jpg);}
.tit-nav-bg06 .bg {background-image: url(../images/top-nav-bg6.png);}
.tit-nav-bg07 .bg {background-image: url(../images/top-nav-bg7.png);}

.tit-nav .tit-nav-h{padding-top: 207px;}
.tit-nav .tit-nav-h > div {position: relative;}
.tit-nav h1 {font-size: 2.5rem; text-align: center; color: #fff;font-family: 'Noto Sans Korean'; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.tit-nav .tit-nav-h .top-nav-arrow {z-index: 999; width: 50px; height: 50px; border: 1px solid  rgba(255, 255, 255, 0.48); border-radius: 600px; position: absolute; top: 0}
.tit-nav .tit-nav-h .top-nav-arrow  i {color: #fff; font-size: 29px; position: absolute; right: 50%;margin-right: -14px; top: 50%; margin-top: -15px;}
.tit-nav .tit-nav-h .next {right: 0;}

.tit-nav .path {text-align: center; padding-top: 25px; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.tit-nav .path a {color: rgba(255, 255, 255, 0.54); font-size: 18px;}
.tit-nav .path .home {position: relative;line-height: 1; padding-right: 37px;}
.tit-nav .path ul {text-align: center;}
.tit-nav .path ul,
.tit-nav .path ul li {display: inline-block;}
.tit-nav .path ul li a {position: relative; line-height: 1; display: inline-block;}
.tit-nav .path ul li:not(:last-of-type) a {padding-right: 37px;}
.tit-nav .path a i.xi-home-o {padding-right: 5px;}
.tit-nav .path i.arr {position: absolute;right: 7px; top: 0;}


.tit-nav .tit-nav-h .top-nav-arrow:hover {background: #fff; }
.tit-nav .tit-nav-h .top-nav-arrow:hover i {color: #000; }



/*location*/
.location {background: #fff; border-bottom: 1px solid #ddd; height: 60px;}
.location .container {padding: 0; position: relative; width: 100%; height: 100%;}
.location .container .home {display: inline-block;width: 64px;background: #515464;height: 100%; color: #fff; text-align: center; line-height: 56px;}
.location .container .home i {font-size: 1.25rem; padding-top: 20px; display: block;}
.location .container ul {display: table;}
.location .container ul li {border-right: 1px solid #ddd; display: table-cell; width: 33.3%;}
.location .container .print {position: absolute; right: 0;top: 50%;margin-top: -22px; border: 1px solid #ddd;    background-color: #fff;border-radius: 600px;width: 40px;height: 40px;}
.location .container .print i {position: absolute; right: 50%; top: 50%;margin-top: -10px;margin-right: -11px;font-size: 1.375rem;color: #c4c4c5;}

.location .container .print:hover,.location .container .print:focus {border: 1px solid #515151;}
.location .container .print:hover i, .location .container .print:focus i {color: #515151;}

.location .container .home, 
.location .container ul, 
.location .container ul li {float: left;height: 100%;}
.location .container ul li a {display: block;padding-left: 23px; position: relative; height: 100%; padding: 21px 23px 18px 23px; line-height: 1;}
.location .container ul li a span {display: inline-block;width: 145px;;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; font-size: 1.1rem;}
.location .container ul li a i {position: absolute; right: 0;top: 50%;margin-top: -8px;margin-right: 23px;}
.location .container ul {width: 50%;}

/*location dropdown*/
.location .container ul li a.dropdown-item{padding:13px 23px;}
.location .container ul li > a:hover,
.location .container ul li > a:focus, 
.location .container ul li.show > a, 
.location .container ul li.show > a{border-bottom:2px solid #3c489d; color: #3c489d; text-decoration: none; background: none;}
.location .dropdown-menu.show {width: 100%; border-radius: 0;border-top: 0;min-width: 9rem;}
.location  .dropdown-toggle::after {display: none;}
.location .dropdown-item:focus, .dropdown-item:hover {background-color:#deeeff;}
.location .dropdown-menu a:hover {background:#e6e6e6;}
.location .dropdown-menu.show {box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.06);}



@media(max-width: 1800px) {
    .location .container .print {right: 15px;}
}

@media(max-width: 1200px) {
    .location .container ul {width: 60%;}
    .location .container ul li a span {width: 82%;}
}

@media(max-width: 1024px) {
    .tit-nav .tit-nav-h {padding-top: 190px;}
    .tit-nav .tit-nav-h .top-nav-arrow {display: none;}

    .location .container ul {width: 86%;}
    .location .container ul li a span { width: 66%;}
    .location .container .print {border: 0;height: 100%;border-radius: 0;top: 0; margin-top: 0;width: calc(100% - 86% - 64px );right: 0;}
}

@media(max-width: 780px) {
    /*tit-nav*/
    .tit-nav { height: 183px;}
    .tit-nav .tit-nav-h { padding-top: 115px;}
    .tit-nav h1 { font-size: 1.5rem;;}
    .tit-nav .path {display: none;}

    /*location*/
    .location {height: 50px;}
    .location .container ul {width: 90%; height: 100%;}
    .location .container ul li{width:50%;}
    .location .container ul li a {padding: 16px 15px;}
    .location .container ul li a.dropdown-item {padding: 13px 18px;}
    .location .container .print {/* width: calc(100% - 89%) */display:none;}
    .location .container .home {width:10%;}

	.location .dropdown, .dropleft, 
	.location .dropright, .dropup {position: inherit;}
	.location .dropdown-menu.show { transform: translate3d(0px, 50px, 0px) !important;}



}



@media(max-width: 480px) {

}