@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.m-inner {	width:100%; max-width:1720px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner {	width:100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
#wrap { /* overflow-x: hidden; */ /*scroll-behavior:smooth;*/ }

/* 타블렛 가로 */
@media all and (max-width:1720px) {
	.m-inner {	width:90%; }
}
@media all and (max-width:1600px) {
	.inner {	width:90%; }
}
@media all and (max-width:1400px) {
	.s-inner {	width:90%; }
}
@media all and (max-width:1280px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:976px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:768px) {
	html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}




.p-Part {padding-top:120px}
.p-Part-b {padding:120px 0}
.m-Part {margin-top:120px}
.m-Part-b {margin:120px 0}

@media all and (max-width:1280px) {
	.p-Part {padding-top:90px}
	.p-Part-b {padding:90px 0}
	.m-Part {margin-top:90px}
	.m-Part-b {margin:90px 0}
}
@media all and (max-width:480px) {
	.p-Part {padding-top:13vw}
	.p-Part-b {padding:13vw 0}
	.m-Part {margin-top:13vw}
	.m-Part-b {margin:13vw 0}
}


.br1280 {display:none}
.br1024 {display:none}
.br768 {display:none}
.br680 {display:none}
.br480 {display:none}
@media all and (max-width:1280px) {
	.br1280 {display:block !important}
}
@media all and (max-width:1024px) {
	.br1024 {display:block !important}
}
@media all and (max-width:768px) {
	.br768 {display:block !important}
}
@media all and (max-width:680px) {
	.br680 {display:block !important}
}
@media all and (max-width:480px) {
	.br480 {display:block !important}
}


/*Header*/
#header { position:fixed; width:100%; height:100px; box-sizing:border-box; z-index:300;  margin: 0 auto; 
				display:flex; justify-content:space-between;align-items: center; transition: all 0.2s ease-out;}
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }


#header.scroll { background:#FFF; height:90px;}
#header.scroll .hd_bx { line-height:100px;  }
#header.hide-special {opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-30px); transition:opacity .4s ease, transform .4s ease, visibility .4s ease;} /* 메인스페셜서 숨김 */


#header #logo { font-size:0; padding-left:2%; z-index:103; position:relative}
#header #logo a { width:250px; height:72px;}
#header #logo a.logo { display: block; background:url("/images/common/logo_engn.webp") no-repeat left center / 100% auto; }

#header.scroll #logo a.logo {background-image:url("/images/common/logo_on_engn.webp")}



.menuToggle { position: relative; width:80px; height:80px; cursor:pointer; z-index:101; }
.menuToggle span { display:block;  height:3px; border-radius:3px;   position:absolute; top: 50%; left:50%; 
						margin-left: -16px; transition:all 0.5s; background:#FFF}
.menuToggle span.t { margin-top: -11px; width:27px;}
.menuToggle span.m { margin-top:-1px; width: 27px; }
.menuToggle span.b { margin-top: 9px; width:27px; }

#header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:27px;  margin-top: 0;} 
#header.mo_on .menuToggle span { background:#FFF; } 


#header.scroll  .menuToggle span { background:#072546; } 
#header.mo_on .menuToggle span { background:#FFF; } 


#gnb_pc {margin: 0 auto;}
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:1.7rem; text-transform:uppercase; line-height:100px; 
							position:relative; width: auto; padding: 0 20px; cursor: pointer;letter-spacing:0; }
#gnb_pc > ul > li > div  a { color:#FFF;}
#gnb_pc > ul > li > ul { display: none; padding:15px 0; width:180px; background:#0d3d65; 
								position: absolute; top: 100px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%;padding:10px; color:#fff;box-sizing: border-box; font-size:1.6rem; font-weight:400 }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li:hover > div { background: ;  }
#gnb_pc > ul > li > ul > li > a:hover {text-decoration:underline}
#gnb_pc > ul > li > ul > li > ul {display:none}

#header.scroll #gnb_pc > ul > li > div {line-height:90px;} 
#header.scroll #gnb_pc > ul > li > div  a { color:#333;}
#header.scroll #gnb_pc > ul > li > ul {top: 90px; }







#t-loginPc {margin-right:20px; display:flex; gap:0 10px}
#t-loginPc li.login a {display:block; width:20px; height:20px; }
#t-loginPc li.login a img.on {display:none}
#t-loginPc li a img {width:100%}

#header.scroll #t-loginPc li.login a img.off {display:none}
#header.scroll #t-loginPc li.login a img.on {display:block}




.langSelect {position:relative; display:inline-block;}
.langSelect .langToggle {width:20px; height:20px; border:0; background:none; padding:0; cursor:pointer; 
								display:flex; align-items:center; justify-content:center;}
.langSelect .langToggle img {display:block; width:100%; max-width:24px; height:auto;}
.langSelect .langToggle img.on {display:none}
.langSelect .langMenu {position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%); min-width:90px; 
							margin:0; padding:0; list-style:none; background:#fff; border:1px solid #ddd; border-radius:12px; 
							box-shadow:0 8px 20px rgba(0,0,0,0.12); max-height:0; overflow:hidden; opacity:0; visibility:hidden; 
							transition:opacity .2s ease, max-height .4s cubic-bezier(.25,1,.5,1); z-index:100;}
.langSelect.open .langMenu {max-height:200px; padding:8px 0; opacity:1; visibility:visible; transition-delay:0s,0s;}
.langSelect:not(.open) .langMenu {transition-delay:0s,0s,0.35s;}
.langSelect .langMenu li {margin:0; padding:0;}
.langSelect .langMenu li a {display:block; padding:10px 18px; font-size:14px; color:#111; text-align:center; 
								text-decoration:none; transition:background .2s ease;}
.langSelect .langMenu li a:hover {background:#f5f5f5;}

#header.scroll .langSelect .langToggle img.off {display:none}
#header.scroll .langSelect .langToggle img.on {display:block}





#header.mo_on #logo a.logo { background:url("/images/common/logo_engn.webp") no-repeat left center;background-size:100% auto; }



#gnb_mo { position:fixed; top:0; left:0; width:100%; height:100%; max-width:500px; padding: 80px 0;
                background:rgba(5,24,45,0.90); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left;
                transition: all 0.4s ease; -webkit-transform: translateX(-100%) rotate(0); -moz-transform: translateX(-100%) rotate(0);
                -ms-transform: translateX(-100%) rotate(0); -o-transform: translateX(-100%) rotate(0);
                 transform: translateX(-100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:2.0rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:0 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.8rem; color:#4b4b4b;padding:0 2em; font-weight: 500;
                                             border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}
#gnb_mo > ul > li > div.on { background: #cba067; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }







#tLogin.mo {margin:20px; border-top:0}
#tLogin.mo {display:flex; gap:5px}
#tLogin.mo li a {padding:0.8em 1.5em; display:block; width:100%; height:100%; font-size:1.8rem; color:#09a5d9;
					border-radius:60px; border:1px solid #09a5d9}
#tLogin.mo li a p {line-height:1.0em}
#tLogin.mo li.ver2 a {background:#09a5d9; color:#FFF; border:1px solid #09a5d9}






@media all and (max-width:1600px){
	#header #logo a { width:230px;}
	#gnb_pc > ul > li > div { padding: 0 15px; }
}
@media all and (max-width:1499px){
  #header.scroll { height:80px;}

  #header { height:80px; text-align: center}
  #header .hd_bx { line-height:80px; }
  #header .hd_mbx { display: block; }
  #header #logo { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding-left:0}
  
  #t-loginPc {margin-left:auto}
  .langSelect {margin-right:30px}
  
  #gnb_pc {display:none;}
  #gnb_mo { text-align: left; }

  #allmenuWrap {display:none}
}
@media all and (max-width:976px){
	#header { height:70px; }	
    #header.scroll { height:70px;}
	.menuToggle { width:70px; height:70px }
	#header #logo a { width:200px;}
	#gnb_mo { padding: 70px 0; }	
}
@media all and (max-width:768px) {
	#gnb_mo { max-width: 100%; ; }
	#header.mo_on #logo a.logo { background:url("/images/common/logo_engn.webp") no-repeat left center; 
										background-size:100% auto; }	
	#tLogin.pc {margin-right:10px;}
}
@media all and (max-width:640px) {
	#t-loginPc {display:none}
	.langSelect {margin-right:20px}
}
@media all and (max-width:480px) {
	#header #logo a {width:46vw;}

.langSelect .langMenu { min-width:50px;} 
	.langSelect .langMenu li a {padding:2vw 4vw; font-size:1.4rem; }
}






#footer {background:#0e1e2f; }
#footer .inner {padding:4em 0;  background:url('/images/common/f-bg.png') no-repeat right bottom / auto 90%;
					display:flex;;gap: 20px 0}
#footer #f-info { padding-left:5%; font-size:1.6rem;}
#footer #f-info .f-link {display:flex; flex-wrap:wrap; gap:5px 25px; margin-bottom:2.5em}
#footer #f-info .f-link a { color:#a0a9b4}
#footer #f-info .cont {width:90%; max-width:1110px; display:flex; flex-wrap:wrap; gap:8px 25px; color:#606974 }
#footer #f-info .copy {margin-top:0.8em ; font-size:1.4rem; color:#606974; width:100%}
#footer #f-sns {margin-left:auto; display:flex; gap: 5px; }
#footer #f-sns li a {display:block; width:48px; height:48px}
#footer #f-sns li a img {width:100%}


@media all and (max-width:1600px) {
	#footer #f-info .f-link { margin-bottom:2.0em}
}
@media all and (max-width:976px) {
	#footer #f-sns {flex-direction: column;}
}
@media all and (max-width:768px) {
	#footer .inner {flex-wrap:wrap}
	#footer #f-logo {width:100%; text-align:center; margin-bottom:1em}
	#footer #f-logo img {width:100%; max-width:90px}
	#footer #f-info { padding-left:0}
	#footer #f-info .f-link {justify-content:center; margin-bottom:1.5em}
	#footer #f-info .cont {width:100%;justify-content:center}
	#footer #f-info .copy {text-align:center}
	#footer #f-sns {flex-direction: unset; margin-left:0; margin:1em auto 0}
	#footer #f-sns li a {width:40px; height:40px}
}
@media all and (max-width:480px) {
	#footer .inner {gap: 10px 0}
	#footer #f-info { padding-left:0;}
	#footer #f-info .f-link {gap:5px 15px;}
	#footer #f-info .cont { gap:4px 15px; }
}





/*
#Quick {position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:30}
#Quick li {margin:4px 0; text-align:center }
#Quick li img {width:100%; max-width:54px}
#Quick li.bg2 {border-radius:54px; background:#0c4677}
#Quick li .t1 {padding:0 0 1em; font-size:1.5rem; text-align:center; color:#FFF; line-height:1.2em}


@media all and (max-width:976px) {
	#Quick {right:10px;}
	#Quick li {width:40px}
	#Quick li .t1 {display:none}
}
@media all and (max-width:480px) {
	#Quick {right:6px;}
	#Quick li {width:13vw}
}
*/

#Quick {padding:10px; position:fixed; right:5px; top:50%; transform:translateY(-50%); z-index:30; background:#FFF; border-radius:100px;
			box-shadow:0 0 10px rgba(0,0,0,0.1); }
#Quick li {text-align:center}
#Quick li a {padding:10px 0; display:block; width:100%; height:100% }
#Quick li + li {border-top:1px dotted #CCC}
#Quick li img {width:100%; max-width:30px}
#Quick li .t1 { padding-top:0.3em; font-size:1.5rem; text-align:center; color:#333; line-height:1.2em; font-size:1.5rem;}
#Quick li .t2 {font-family:'Montserrat'; font-weight:600; font-size:1.4rem; line-height:1.0em;}
#Quick li a:hover .t1,
#Quick li a:hover .t2,
#Quick li a:hover i {color:#0d3d65}

@media all and (max-width:1024px) {	
	#Quick {padding:10px 5px}
	#Quick li img {max-width:24px}
	#Quick li a {padding:6px 0; }
}
@media all and (max-width:480px) {	
	#Quick {padding:1.3vw; transform:translateY(-40%);}
	#Quick li img { max-width:4.2vw}
	#Quick li a {padding:1.6vw 0; }
	#Quick li .t1 {font-size:1.1rem; letter-spacing:-0.05em}
	#Quick li .t2 {font-size:1.0rem; }
}