@keyframes topMenuOver {
	0% {height:10px; opacity: 0; overflow:hidden;} 
	30% {height: 70px; opacity: 0.5;overflow: hidden; } 
	100% { height: auto; opacity: 1; } 
 }
:root {
    --menuOver: #203b89;
}
#wrap {min-width: 360px;overflow: hidden;color: #5d5d5d;line-height: 24px; } 

/* header */
	header,
	header * {z-index: 1000; } 
	header {top: 0px;left: 0;width: 100%;height: 120px;min-width: 360px; } 
	.nm_eg {display: flex;width: 100%;height: 30px;position: absolute;top: 0;left: 0;padding-right: 40px;align-items: center;background: #4f6280;box-sizing: border-box;justify-content: flex-end;transition: top 0.2s;z-index: 10; } 
	.nm_eg>p {background: url(../images/common/ico_korea.png) left center no-repeat;color: #fff;display: inline-block;font-size: 13px;font-weight: 400;line-height: 16px;padding-left: 30px; } 
	header.mainHeader {position: fixed;background: rgba(0, 0, 0, 0.5);transition: all 0.5s; min-width: 360px;} 
	header.subHeader {position: relative;background: #fff;border-bottom: 1px solid #e9e9e9}
	header #header {display: flex;position: absolute;top: 30px;left: 0;width: 100%;height: 90px;align-items: center;box-sizing: border-box; } 
	header h1 {flex-basis: 300px;margin: 0 40px;transition: all 0.5s; } 
	header h1 a {display: block;width: 300px;height: 50px; } 
	header.mainHeader h1 a {background: url(../images/common/main-logo.png) no-repeat; } 
	header.subHeader h1 a {background: url(../images/common/logo.png) no-repeat; } 
	header h1 a i {overflow: hidden;display: block;position: fixed;top: -1000px;left: 0;width: 1px;height: 1px; } 
	header.mainHeader:hover,
	header.mainHeader:focus,
	header.mainHeader:active {background: #fff; } 
	header.mainHeader:hover h1 a,
	header.mainHeader:focus h1 a,
	header.mainHeader:active h1 a {background: url(../images/common/logo.png) no-repeat; } 
	#header .btn_mobile,
	#nav .btn-mobile-close {display: none; } 

@media all and (max-width:1200px) {
	header h1 {flex-basis: 200px; } 
	header h1 a,
	header.mainHeader #header>h1 a,
	header.subHeader #header>h1 a {width: 200px;height: 40px;background-size: 200px; } 
	header.mainHeader {background: #fff; } 
	header.mainHeader h1 a {background: url(../images/common/logo.png) no-repeat; } 
 }

@media all and (max-width: 1024px) {
	header #header,
	header.mainHeader {display: block;background: #fff !important; } 
	header h1 {position: absolute;top: 30px;left: 0px;margin: 0 20px; } 
	header.mainHeader h1 a {background: url(../images/common/logo.png) no-repeat; } 
 }

@media all and (max-width:640px) {
header.mainHeader {position: absolute;}
header,
header #header {height: 60px; top: 0;}
	header h1 {flex-basis: 150px; top: 19px;} 
	header h1 a,
	header.mainHeader #header h1 a,
	header.subHeader #header h1 a {width: 150px;height: 28px;background-size: 150px; } 
.nm_eg {display: none;}
 }

/* navigation */

header #navigation {flex-basis: calc(100% - 300px); } 
header #navigation,
header #navigation .mobile_area {height: 100%; } 
#nav {position: relative;left: 50%;transform: translateX(-88%);transition: all 0.5s;max-width: 500px;height: 100%; } 
#nav>h2,
#nav p button i {overflow: hidden;display: block;position: fixed;top: -1000px;left: 0;width: 1px;height: 1px; } 
#nav div {height: 100%; } 
#nav .mnav {display: flex;height: 100%;text-align: center;z-index: 1001; transition: all 0.3s; } 
#nav .mnav>li {position: relative;flex-basis: calc(100% / 3);display: table; } 
#nav .mnav>li>a {display: table-cell;position: relative;font-weight: 600;font-size: 18px;text-align: center;vertical-align: middle; } 
#nav .m-close,
#header .btn_mobile-tit {display: none; } 
header.mainHeader:hover #nav .mnav>li>a,
header.mainHeader:focus #nav .mnav>li>a,
header.mainHeader:active #nav .mnav>li>a {color: #363636; } 
header #nav .mnav>li>a {color: #fff; } 
header.subHeader #nav .mnav>li>a {color: #373737; } 
header #nav .mnav>li>a:hover,
header #nav .mnav>li>a:focus,
header #nav .mnav>li>a.active {color: var(--menuOver); } 
header #nav .mnav>li>a.on:after,
header #nav .mnav>li>a:hover:after,
header #nav .mnav>li>a:focus:after,
header #nav .mnav>li>a.active:after {content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);display: block;width: 80px;height: 4px;background: var(--menuOver); bottom: -1px;  } 
header #nav .sub1 {height: 0;opacity: 1;position: absolute;overflow-x: hidden;overflow-y: auto;top: 90px;left: 50%;transform: translateX(-50%);width: 147px;padding: 0;background-color: #fff;text-align: left;transition: all 0.3s; box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.20);  } 
header  #nav .sub1.__open{height: auto;visibility: visible;opacity: 1;animation: topMenuOver 0.2s ease-out; } 
#nav .sub1>li {position: relative;} 
#nav .sub1>li:first-child {padding-top: 10px;}
#nav .sub1>li:last-child {padding-bottom: 10px;}
#nav .sub1>li>a {position: relative;display: block;font-size: 17px;color: #5d5d5d;text-align: center;padding:  5px;line-height: 1.4; } 
#nav .sub1>li>a:hover,
#nav .sub1>li>a:focus {color: var(--menuOver); text-decoration: underline; font-weight: 600;letter-spacing: -0.2px; } 

@media all and (min-width:1920px) {
	#nav .mnav {max-width: 1200px;margin: 0 auto; } 
 }

@media all and (max-width:1400px) {
	#nav {transform: translateX(-78%);} 
 }

@media all and (max-width:1200px) {
	
	header.mainHeader #nav .mnav>li>a  {color: #363636; } 

	#nav {flex-basis: calc(100% - 200px - 200px); } 
 }

@media all and (max-width:1024px) {
	.mmenu-overlay {visibility: hidden;opacity: 0;transition: opacity 0.5s;position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.3);z-index: 990; } 
	.__open-mmenu .mmenu-overlay {visibility: visible;top: 56px;opacity: 1; } 
	#navigation {box-sizing: border-box;position: fixed;top: 0;right: 0;bottom: 0;right: -1200px;overflow-x: hidden;overflow-y: auto;background: #fdfdfd;visibility: hidden;opacity: 0;transition: right 0.6s, opacity 0.3s;z-index: 1000;box-shadow: -2px 7px 7px rgba(0, 0, 0, 0.25); } 
	.__open-mmenu #navigation {visibility: visible;opacity: 1;right: 0;width: 330px; } 
	#nav {display: inline-block; left: 0; margin-left: 0px; box-sizing: border-box;z-index: 1001;transform: translateX(0); background: #fff; } 
	#header .btn_mobile {display: block;position: absolute;right: 0px;top: 7px;width: 40px;height: 40px;padding: 20px; } 
	#header .btn_mobile button {display: block;width: 40px;height: 40px;background: url('../images/common/ico_mob_menu.png') no-repeat 0 0;background-size: 35px; } 
	#header .btn_mobile button span {overflow: hidden;display: block;position: fixed;top: -1000px;left: 0;width: 1px;height: 1px; } 
	#nav .btn-mobile-close {display: block;visibility: hidden;opacity: 0;position: fixed;top: 15px;right: 5px;width: 50px;height: 50px;z-index: 1000;transition: opacity 0.5s;background: url('../images/common/ico_mob_close.png') no-repeat 0 0;background-position: 0px 0px;width: 32px;height: 23px; } 
	.__open-mmenu #nav .btn-mobile-close {visibility: visible;opacity: 1; } 
	header.sub #nav div button {background-position: 0 -50px; } 
	#nav>div {box-sizing: border-box;width: 334px;height: auto;padding-right: 50px;z-index: 1001; } 
	#nav>div>div {height: 100vh;overflow-y: scroll}
	#header #nav {display: block;margin-left: 0px; margin-bottom: 35px;box-sizing: border-box;}
	#header #nav h2 {position: relative;top: 0px;display: block;width: 330px;height: 60px;background: url(../images/common/logo.png) no-repeat 23px center;background-size: 150px;border-bottom: 1px solid #E4E4E4;padding-left: 20px; } 
	#header #nav h2 span,
	#header button span {overflow: hidden;display: block;position: fixed;top: -1000px;left: 0;width: 1px;height: 1px; } 


	#nav > div .mnav {margin-top: 30px;padding-bottom: 40px;display: block;}
	#nav > div .mnav li {flex-basis: 100%;padding-left: 25px;width: 100%; margin-top: 20px;}
	#nav > div .mnav a {display: flex;width: 100%;padding-left: 5px;align-items: center;flex-wrap: wrap;text-align: left;font-size: 18px;color: #363636;line-height: 1.3rem;min-height: 35px;}
	#nav > div .mnav ul {left: 147px;margin-top: 0px;flex-basis: 100%; } 
	#nav > div .mnav ul li { margin: 0px;padding-left: 0 } 
	#nav > div .mnav ul li a {padding-left: 10px;min-height: 35px;font-size: 16px; line-height: 1.0rem; color: #5d5d5d; } 
	#nav ul li a.on,
	#nav ul li a:hover,
	#nav ul li a:focus {color: var(--menuOver); } 
	header #nav .mnav li a.on:after,
	header #nav .mnav li a:hover:after,
	header #nav .mnav li a:focus:after,
	header #nav .mnav li a.active:after {display: none; } 
	header #nav .sub1 {display: none;height: auto;position: relative;top: 0; width: auto; box-shadow: none;} 
	#nav .sub1>li:first-child {padding-top: 0px;}
	#nav .sub1>li:last-child {padding-bottom: 0px;}
}
@media all and (max-width: 640px) {
	#header .btn_mobile {width: 30px;height: 30px; top: 5px; padding: 10px;} 
	#header .btn_mobile button {width: 30px;height: 30px;background-size: 25px; } 
 }

.cyberIngWrap {flex-basis: 250px; } 
.cyberIngWrap li {width: 108px;height: 54px;transition: all 0.5s}
.cyberIngWrap li i {overflow: hidden;display: block;position: fixed;top: -1000px;left: 0;width: 1px;height: 1px; } 
.cyberIngWrap li.cyberIng1 {background: url(../images/common/cybrIng01.png) no-repeat; } 
.cyberIngWrap li.cyberIng2 {background: url(../images/common/cybrIng02.png) no-repeat; } 
.cyberIngWrap li.cyberIng3 {background: url(../images/common/cybrIng03.png) no-repeat; } 
.cyberIngWrap li.cyberIng4 {background: url(../images/common/cybrIng04.png) no-repeat; } 

@media all and (max-width:1024px) {
	.cyberIngWrap {position: absolute;top: 20px;right: 100px; } 
	.cyberIngWrap li {width: 100px; } 
	.cyberIngWrap li.cyberIng1,
	.cyberIngWrap li.cyberIng2,
	.cyberIngWrap li.cyberIng3,
	.cyberIngWrap li.cyberIng4 {background-size: 100px; } 
 }

@media all and (max-width: 640px) {
	.cyberIngWrap {position: absolute;top: 24px;right: 65px; } 

	.cyberIngWrap li {width: 60px; } 

	.cyberIngWrap li.cyberIng1,
	.cyberIngWrap li.cyberIng2,
	.cyberIngWrap li.cyberIng3,
	.cyberIngWrap li.cyberIng4 {background-size: 60px; } 
 }

#footer {position: relative;display: flex;width: 100%;min-width: 360px; padding: 50px 0;box-sizing: border-box;text-align: left;word-break: keep-all; } 

footer.subFooter #footer {border-top: 1px solid #cecece; } 

#footer .fleft {flex-basis: 300px;margin-left: 40px;transition: all 0.5s}

#footer .fright {flex-basis: calc(100% - 340px);margin-left: 140px;transition: all 0.5s}

#footer .f_link a {color: #3f3f3f;font-size: 18px; } 

#footer address {font-size: 14px;line-height: 1.8em;color: #949494; } 
@media all and (max-width:1200px) {
#footer .fright {margin-left: 60px; margin-right: 50px;}
}

@media all and (max-width:1024px) {
	#footer {padding: 30px 0;}
	#footer .fleft {flex-basis: 200px;margin-left: 20px; } 

	#footer .fleft img {width: 100%; } 

	#footer .fright {flex-basis: calc(100% - 200px);margin-left: 80px; } 
 }

@media all and (max-width:640px) {
	#footer {padding: 20px 0;}
	#footer .fleft {display: none; }
	#footer,
	#footer .fright {display: block;}

	#footer .fleft img {width: 200px; } 

	#footer .fright {margin-left: 20px;width: 90%; } 
 }