@charset "utf-8";

:root {
    --black: #171717;
    --pointColor: #0f3a6d;
    --pointColor2: #05182f;
    --pointColor3: #ff9089;
    --pointColor4: #0e294a;
}

@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('../font/GmarketSansTTFBold.woff') format("woff");
    font-display: swap;
} 
@font-face {
    font-family: 'Dinpro';
    font-weight: 600;
    font-style: normal;
    src: url('../font/D-DIN-PRO-600-SemiBold.woff') format("woff");
    font-display: swap;
} 
@font-face {
    font-family: 'Dinpro';
    font-weight: 700;
    font-style: normal;
    src: url('../font/D-DIN-PRO-700-Bold.woff') format("woff");
    font-display: swap;
} 
@font-face {
    font-family: 'Dinpro';
    font-weight: 800;
    font-style: normal;
    src: url('../font/D-DIN-PRO-800-ExtraBold.woff') format("woff");
    font-display: swap;
} 

@font-face {
    font-family: "Helvetica Condensed Light";
    font-weight: 200;
    font-style: normal;
    src: url('../font/helvetica/Helvetica Light Condensed.otf') format("opentype");
}
@font-face {
    font-family: "Helvetica Condensed Medium";
    font-weight: 400;
    font-style: normal;
    src: url('../font/helvetica/Helvetica Medium Condensed.otf') format("opentype");
}
@font-face {
    font-family: "Helvetica Condensed Bold";
    font-weight: 600;
    font-style: normal;
    src: url('../font/helvetica/Helvetica Bold Condensed.otf') format("opentype");
}
@font-face {
    font-family: "Helvetica Condensed Black";
    font-weight: 800;
    font-style: normal;
    src: url('../font/helvetica/Helvetica Black Condensed.otf') format("opentype");
}

/* SUIT  */
@font-face {
	font-family: 'SUIT';
	font-weight: 100;
	src: url('../font/SUIT-ExtraLight.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 200;
	src: url('../font/SUIT-Thin.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 300;
	src: url('../font/SUIT-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	src: url('../font/SUIT-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	src: url('../font/SUIT-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 600;
	src: url('../font/SUIT-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 700;
	src: url('../font/SUIT-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 800;
	src: url('../font/SUIT-ExtraBold.woff2') format('woff2');
}

/* 프리텐다드 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-Thin.woff2') format('woff2'),
		url('../font/pretendard/Pretendard-Thin.woff') format('woff'),
    
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-Light.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Light.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-Medium.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Medium.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-Regular.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Regular.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-SemiBold.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-ExtraBold.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-Bold.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Bold.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
      src: url('../font/pretendard/Pretendard-Black.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Black.woff') format('woff2'),
}





body, select, input,textarea, button {color: #0A0A0A; font-family: 'Roboto'; word-break: keep-all; letter-spacing: -.3px;}


.ft_hc { font-family: "Helvetica Condensed Bold" !important;}
.ft_su { font-family: 'SUIT' !important;}

@-webkit-keyframes textupMove {0% {transform: translateY(0px);} 10% {transform: translateY(-40%);} 20% {transform: none;}}

@keyframes textupMove {0% {transform: translateY(0px);} 10% {transform: translateY(-40%);} 20% {transform: none;}}
@-webkit-keyframes textupMove2 {0% {transform: translateY(0px);} 10% {transform: translateY(-20%);} 20% {transform: none;}}
@keyframes textupMove2 {0% {transform: translateY(0px);} 10% {transform: translateY(-20%);} 20% {transform: none;}}
@-webkit-keyframes circleHoverMove { 100% {opacity: 1;transform: translate(-50%, -50%) scale(1);}}
@keyframes circleHoverMove { 100% {opacity: 1;transform: translate(-50%, -50%) scale(1);}}
@-webkit-keyframes quicktextMove {0% {transform: scale(.9);} 100% {transform: none}}
@keyframes quicktextMove {0% {transform: scale(.9);} 100% {transform: none}}
@-webkit-keyframes upMoveList {5% {transform: translateY(-2%);} 10% {transform: none}}
@keyframes upMoveList {5% {transform: translateY(-2%);} 10% {transform: none}}
@-webkit-keyframes upMoveList2 {0% {opacity: 0; transform: translateY(10%);} 100% {transform: none; opacity: 1;}}
@keyframes upMoveList2 {0% {opacity: 0; transform: translateY(10%);} 100% {transform: none; opacity: 1;}}
@-webkit-keyframes imgHoverMove {5% {transform: translateY(-10px) rotate(5deg);} 10% {transform: rotate(-5deg);} 15% {transform: translate(0);} 100% {transform: translate(0);}}
@keyframes imgHoverMove {5% {transform: translateY(-10px) rotate(5deg);} 10% {transform: rotate(-5deg);} 15% {transform: translate(0);} 100% {transform: translate(0);}}
@-webkit-keyframes spanUpText {0% {transform: none;} 5% {transform: translateY(-10%);} 10% {transform: none;} 100% {transform: none;}}
@keyframes spanUpText {0% {transform: none;} 5% {transform: translateY(-10%);} 10% {transform: none;} 100% {transform: none;}}
@-webkit-keyframes spanUpText2 {0% {transform: none;} 5% {transform: translateY(-5%);} 10% {transform: none;} 100% {transform: none;}}
@keyframes spanUpText2 {0% {transform: none;} 5% {transform: translateY(-5%);} 10% {transform: none;} 100% {transform: none;}}
@-webkit-keyframes spanUpText3 {0% {transform: translateY(-100%);} 10% {transform: none;} 100% {transform: none;}}
@keyframes spanUpText3 {0% {transform: translateY(-100%);} 10% {transform: none;} 100% {transform: none;}}
@-webkit-keyframes spanUpText3-2 {0% {transform: none;} 10% {transform: translateY(-100%);} 100% {transform: translateY(-100%);}}
@keyframes spanUpText3-2 {0% {transform: none;} 10% {transform: translateY(-100%);} 100% {transform: translateY(-100%);}}
@-webkit-keyframes upMovetwo {10% {transform: translateY(10px);} 15% {transform: none;} 100% {transform: none;}}
@keyframes upMovetwo {10% {transform: translateY(10px);} 15% {transform: none;} 100% {transform: none;}}
@-webkit-keyframes imgOpacity {0% {transform: scale(.8); opacity: 0;} 30% {transform: none; opacity: 1;} 100% {transform: none; opacity: 1;}}
@keyframes imgOpacity {0% {transform: scale(.8); opacity: 0;} 30% {transform: none; opacity: 1;} 100% {transform: none; opacity: 1;}}
@-webkit-keyframes spanTextColor {6% {transform: none;} 10% {transform: translateY(-10%); color: var(--pointColor);} 14% {transform: none;} 50% {color: var(--black);} 100% {transform: none;}}
@keyframes spanTextColor {6% {transform: none;} 10% {transform: translateY(-10%); color: var(--pointColor);} 14% {transform: none;} 50% {color: var(--black);} 100% {transform: none;}}
@-webkit-keyframes spanTextColor2 {6% {transform: none;} 20% {transform: translateY(-2px); color: #c3d0f1;} 30% {transform: none;} 50% {color: #fff;} 100% {transform: none;}}
@keyframes spanTextColor2 {6% {transform: none;} 20% {transform: translateY(-2px); color: #c3d0f1;} 30% {transform: none;} 50% {color: #fff;} 100% {transform: none;}}
@-webkit-keyframes spanTextColor3 {10% {color: var(--pointColor);} 50% {color: var(--black);}}
@keyframes spanTextColor3 {10% {color: var(--pointColor);} 50% {color: var(--black);}}
@-webkit-keyframes spanTextColor4  {6% {transform: none;} 10% {transform: translateY(-10%);} 14% {transform: none;} 100% {transform: none;}}
@keyframes spanTextColor4  {6% {transform: none;} 10% {transform: translateY(-10%);} 14% {transform: none;} 100% {transform: none;}}
@-webkit-keyframes rotateMove {100% {transform: rotate(360deg);}}
@keyframes rotateMove {100% {transform: rotate(360deg);}}
@-webkit-keyframes imgShow {0% {opacity: 0; transform: scale(.6);} 100% {opacity: 1; transform: none;}}
@keyframes imgShow {0% {opacity: 0; transform: scale(.6);} 100% {opacity: 1; transform: none;}}
@-webkit-keyframes leftMove {0% {opacity: 0; transform: translateX(-20%);} 100% {opacity: 1; transform: none;}}
@keyframes leftMove {0% {opacity: 0; transform: translateX(-20%);} 100% {opacity: 1; transform: none;}}
@-webkit-keyframes leftMove2 {0% {opacity: 0; transform: translateX(-20%);} 50% {opacity: 1; transform: none;} 100% {opacity: 1; transform: none;}}
@keyframes leftMove2 {0% {opacity: 0; transform: translateX(-20%);} 50% {opacity: 1; transform: none;} 100% {opacity: 1; transform: none;}}
@-webkit-keyframes leftMove3 {0% {opacity: 0; transform: translateX(-10%);} 100% {opacity: 1; transform: none;}}
@keyframes leftMove3 {0% {opacity: 0; transform: translateX(-10%);} 100% {opacity: 1; transform: none;}}
@-webkit-keyframes leftMove4 {0% {opacity: 0; transform: translateX(-20px);} 100% {opacity: 1; transform: none;}}
@keyframes leftMove4 {0% {opacity: 0; transform: translateX(-20px);} 100% {opacity: 1; transform: none;}}
@-webkit-keyframes rightMove {0% {opacity: 0; transform: translateX(20%);} 50% {opacity: 1; transform: none;} 100% {opacity: 1; transform: none;}}
@keyframes rightMove {0% {opacity: 0; transform: translateX(20%);} 50% {opacity: 1; transform: none;} 100% {opacity: 1; transform: none;}}
@-webkit-keyframes cursorMove {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes cursorMove {0% {opacity: 0;} 100% {opacity: 1;}}
@-webkit-keyframes bulletMove {0% {background-size: 0 100%;} 100% {background-size: 100% 100%}}
@keyframes bulletMove {0% {background-size: 0 100%;} 100% {background-size: 100% 100%}}
@-webkit-keyframes opacityMove {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;}}
@keyframes opacityMove {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;}}
@-webkit-keyframes opacityMove_1 {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes opacityMove_1 {0% {opacity: 0;} 100% {opacity: 1;}}
@-webkit-keyframes opacityMove_5 {0% {opacity: .5;} 30% {opacity: 1;} 100% {opacity: 1;}}
@keyframes opacityMove_5 {0% {opacity: .5;} 30% {opacity: 1;} 100% {opacity: 1;}}
@-webkit-keyframes scrollDown {0% {transform: none;} 50% {transform: translateY(10px);}}
@keyframes scrollDown {0% {transform: none;} 50% {transform: translateY(10px);}}
@-webkit-keyframes scaleMove {0% {transform: scale(.5); opacity: 0} 100% {transform: scale(1); opacity: 1}}
@keyframes scaleMove {0% {transform: scale(.5); opacity: 0} 100% {transform: scale(1); opacity: 1}}
@-webkit-keyframes scaleMove1 {0% {transform: scale(.5);} 100% {transform: scale(1);}}
@keyframes scaleMove1 {0% {transform: scale(.5);} 100% {transform: scale(1);}}
@-webkit-keyframes scaleMove_1 {0% {transform: scale(1); opacity: 0} 100% {transform: scale(1.05); opacity: 1}}
@keyframes scaleMove_1 {0% {transform: scale(1); opacity: 0} 100% {transform: scale(1.05); opacity: 1}}
@-webkit-keyframes scaleMove2 {0% {transform: scale(1.05); opacity: 0} 100% {transform: scale(1.0); opacity: 1}}
@keyframes scaleMove2 {0% {transform: scale(1.05); opacity: 0} 100% {transform: scale(1.0); opacity: 1}}
@-webkit-keyframes scaleMove3 {0% {transform: scale(1.05);} 100% {transform: scale(1.0);}}
@keyframes scaleMove3 {0% {transform: scale(1.05);} 100% {transform: scale(1.0);}}
@-webkit-keyframes scaleMove3-1 {0% {transform: scale(1.2);} 100% {transform: scale(1.0);}}
@keyframes scaleMove3-1 {0% {transform: scale(1.2);} 100% {transform: scale(1.0);}}
@-webkit-keyframes scaleMove4 {0% {transform: scale(.85); opacity: 0;} 100% {transform: scale(1.0); opacity: 1;}}
@keyframes scaleMove4 {0% {transform: scale(.85); opacity: 0;} 100% {transform: scale(1.0); opacity: 1;}}
@-webkit-keyframes scaleMove5 {0% {transform: scale(.8); opacity: 0;} 50% {opacity: 1; transform: scale(1.1);} 100% {transform: none; opacity: 1;}}
@keyframes scaleMove5 {0% {transform: scale(.8); opacity: 0;} 50% {opacity: 1; transform: scale(1.1);} 100% {transform: none; opacity: 1;}}
@-webkit-keyframes upMove {0% {transform: translateY(20%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove {0% {transform: translateY(20%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@-webkit-keyframes upMove_1 {0% {transform: translateY(100%);} 100% {transform: none;}}
@keyframes upMove_1 {0% {transform: translateY(100%);} 100% {transform: none;}}
@-webkit-keyframes upMove_2 {10% {transform: translateY(-3%);} 20% {transform: none;}}
@keyframes upMove_2 {10% {transform: translateY(-3%);} 20% {transform: none;}}
@-webkit-keyframes upMove_3 {0% {transform: translateX(-100%);} 10% {transform: none;} 100% {transform: none;}}
@keyframes upMove_3 {0% {transform: translateX(-100%);} 10% {transform: none;} 100% {transform: none;}}
@-webkit-keyframes upMove_4 {10% {transform: translateY(-10%);} 20% {transform: none;}}
@keyframes upMove_4 {10% {transform: translateY(-10%);} 20% {transform: none;}}
@-webkit-keyframes upMove_5 {100% {transform: translateY(-50%);}}
@keyframes upMove_5 {100% {transform: translateY(-50%);}}
@-webkit-keyframes upMove_6 {15% {transform: translateY(-20%);} 30% {transform: none;}}
@keyframes upMove_6 {15% {transform: translateY(-20%);} 30% {transform: none;}}
@-webkit-keyframes upMove_7 {0% {transform: translateY(10%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove_7 {0% {transform: translateY(10%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@-webkit-keyframes upMove_8 {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove_8 {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@-webkit-keyframes rightUpMove {30% {transform: translate(10px, -10px); opacity: 0;} 31% {transform: translate(-10px, 10px); opacity: 0;} 60% { opacity: 1;} 100% {opacity: 1;}}
@keyframes rightUpMove {30% {transform: translate(10px, -10px); opacity: 0;} 31% {transform: translate(-10px, 10px); opacity: 0;} 60% { opacity: 1;} 100% {opacity: 1;}}
@Keyframes rotateMove {100% {transform: rotate(360deg);}}


/* footer .scrollUpBox .scroll{display: none !important;} */


* {
    font-family: 'Roboto'; 
  }
#wrap {width: 100%; min-width: 320px; font-size: 18px;} button {font-size: 18px;} a {color: #0A0A0A;}

.sec {position: relative;}
#container {position: relative;}
.inner {max-width: 1460px; padding: 0 30px; margin: 0 auto; width: 100%; box-sizing: border-box;}
/* header .opa {opacity: .5 !important;} */

.ft_pt { font-family: 'Pretendard' !important;}
body::-webkit-scrollbar {width: 5px;}
body::-webkit-scrollbar-track {background-color: #3b5a5878;}
body::-webkit-scrollbar-thumb {background-color: #139f98;border-radius: 30px;}

.logo p { font-size: 32px; color:#151C60 ;letter-spacing: -0.5px;}
.logo span { font-size: 18px; color: #171B60;}

header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99;}
header .hInner {max-width: 1460px; padding: 0 30px; margin: 0 auto; width: 100%; box-sizing: border-box; position: relative;}
header .hTop {background: rgb(255, 255, 255); height: 80px; position: relative; z-index: 10;}
header .hTop .hInner {display: flex; justify-content:space-between; gap: 20px; height: 100%; align-items: center;}

header .hTop button {padding: 0 10px; box-sizing: border-box; font-weight: 400; width: 130px; height: 40px ;border-radius: 50px; border: 1px solid #007FC6; color: #007FC6;position: relative;overflow: hidden;width: -webkit-fit-content ;width: -moz-fit-content ;width: fit-content ; height: -webkit-fit-content ; height: -moz-fit-content ; height: fit-content ; background-color: transparent ; border: none ; padding: 0 ;  border-radius: 0;}
header .hTop button.loginBtn {font-weight: 500;}
header .hTop button::before { content: ""; position: absolute; border-radius: 100px; width: 0%; height: 0%; transform: translate(-50% , -50%); left: 50%; top: 50%; background-color: #076aa1; transition: all 0.32s ease-out; opacity: 0.5;}
header .hBot {height: 60px; background: #083569;  position: relative; z-index: 10; border-bottom: 1px solid #355A85; box-sizing: border-box;}
header .hBot .hInner {display: flex; height: 100%; align-items: center; justify-content:center;}
header .hBot h1 {flex: none;}
header .hBot h1 a {display: flex;}
header .hBot h1 a img {height: 100%; -o-object-fit: contain; object-fit: contain;}
header .hBot h1 a img:not(:last-child) {margin-right: 7px;}
header .hBot nav {width: 100%;}
header .hBot .dep {width: 100%; display: flex; justify-content: space-between; gap: 0 15px; align-items: center;}
header .hBot .dep li {text-align: center; padding: 0 5px; flex-basis: calc(100% / 6);}
header .hBot .dep li:hover a , 
header .hBot .dep li.color a {color: #139F98;}
header .hBot .dep li a {font-size: 20px; color:#fff; font-weight: 400;}
header .hBot .dep li a span {background-image: linear-gradient(rgba(72, 102, 176, .2),rgba(72, 102, 176, .2)); background-repeat: no-repeat; background-position: center bottom 1px; background-size: 0 30%; transition: .5s ease; -webkit-box-sizing: border-box; display: initial;}
header .hBot .dep li a:hover span {background-size: 100% 30%;}
header .sitemapBtn {display: none; width: 25px; height: 17px; position: relative; cursor: pointer;}
header .sitemapBtn:before, header .sitemapBtn:after {content: ""; width: 100%; height: 2px; background: #fff; position: absolute; transform: translateX(-50%); left: 50%;}
header .sitemapBtn:before {top: 0;}
header .sitemapBtn:after {bottom: 0;}
header .sitemapBtn span {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; height: 2px;}
header .sitemapBtn.open:before, header .sitemapBtn.open:after, header .sitemapBtn.open span {background: #fff;}
header .hInner > .logo4 {width: 120px; position: absolute; right: -100px; top: 50%; transform: translateY(-50%);}
header .hInner h1 .logo4 {display: none;}
header .sitemap {background: #083569; position: fixed; top: -0; left: 0; right: 0; padding: 30px 0 35px; transition: .3s linear; z-index: 9; display: none;}
header .sitemap.on {display: block; -webkit-animation: sitemapShow .25s ease-out both; animation: sitemapShow .25s ease-out both;}
/* @keyframes sitemapShow {0% {top: -0; height: auto;} 100% {top: 180px; height: auto;}} */
@-webkit-keyframes sitemapShow {0% {top: -0; height: auto;opacity: 0;} 100% {top: 180px; height: auto;opacity: 1;}}
@keyframes sitemapShow {0% {top: -0; height: auto;opacity: 0;} 100% {top: 180px; height: auto;opacity: 1;}}
@-webkit-keyframes sitemapShow_verli { 100% {opacity: 1; transform: translateY(0);}}
@keyframes sitemapShow_verli { 100% {opacity: 1; transform: translateY(0);}}
header .sitemap.on .dep2 li {-webkit-animation: sitemapShow_verli 0.5s ease-out 1 forwards;animation: sitemapShow_verli 0.5s ease-out 1 forwards;}
header .sitemap.on .dep2 li:nth-child(1) {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
header .sitemap.on .dep2 li:nth-child(2) {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
header .sitemap.on .dep2 li:nth-child(3) {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
header .sitemap.on .dep2 li:nth-child(4) {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
header .sitemap.on .dep2 li:nth-child(5) {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
/* header .sitemap .dep > li {opacity: 0;} */
/* header .sitemap.on .dep > li {animation: opacityMove_1 .5s .2s ease both;} */
header .sitemap .dep > li .pcnone { display: none;}
header .sitemap .sitemapBox {max-width: 1460px; padding: 0 30px; margin: 0 auto; width: 100%; box-sizing: border-box;}
header .sitemap .sitemapBox::-webkit-scrollbar {width: 6px;}
header .sitemap .sitemapBox::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .3); border-radius: 10px; background-clip: padding-box; border: 1.5px solid transparent;}
header .sitemap .sitemapBox::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, .0); border-radius: 10px;}
header .sitemap a {color: #fff;}
header .sitemap .dep {display: flex; gap: 0 2%;}
header .sitemap .dep > li {width: calc(100% / 6); text-align: center;}
header .sitemap .dep > li > a {width: 100%; height: 37px; border-radius: 18px; background: #265991; display: flex; align-items: center; justify-content: center; font-weight: 500; margin-bottom: 20px; position: relative; pointer-events: none; font-size: 17px; letter-spacing: -.8px; line-height: .8;}
header .sitemap .dep > li > a:after {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .5); z-index: -1; opacity: 0; transition: .5s ease;}
header .sitemap .dep > li.on > a {background: #fff; color: var(--pointColor);}
header .sitemap .dep > li.on > a:after {top: 2px; left: 2px; opacity: 1;}
header .sitemap .dep > li > a i {display: none;}
header .sitemap .dep2 {display: flex; flex-direction: column; gap: 20px;}
header .sitemap .dep2 li { opacity: 0; transform: translateY(-30px);}
header .sitemap .dep2 a {font-weight: 300; font-size: 16px; transition: .3s ease; width: 100%;}
header .sitemap .dep2 a span {position: relative;}
header .sitemap .dep2 a span:after {content: ""; width: 4px; height: 4px; border-radius: 50%; background: #99c8ff; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); opacity: 0; transition: .3s ease; display: none;}
header .sitemapBg {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 7; transition: 0s linear; opacity: 0; visibility: hidden;}
header .sitemapBg:after {content: ""; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); transition: 0s linear; opacity: 0; visibility: hidden;}
header .sitemapBg.on {opacity: 1; visibility: visible;transition: .15s linear;}
header .sitemapBg.on:after {left: 0; transition: .3s linear;}

header .hMid .con{display: flex; align-items: center; justify-content: center; background-color: #CCE1F6; height: 40px; text-align: center; font-size: 18px; font-weight: 700; z-index: 10; position: relative;}
header .hMid .con p { background: linear-gradient(to right, #3F50E8 20%, #5E1BA1 30% ,#3F50E8 70%, #5E1BA1 80%);-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;; -webkit-animation: hMid_con_p  10s ease-out infinite forwards;; animation: hMid_con_p  10s ease-out infinite forwards;}
@-webkit-keyframes hMid_con_p {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}}
@keyframes hMid_con_p {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}}
header .hMid .con img {display: none;}
header .hMid .con p br {display:none}

.hTop .hInner .login_zone {display: flex; align-items: center; gap: 0 30px; z-index: 10; }
.hTop .hInner .login_zone figure {width: 130px; height: 40px; display: flex; align-items: center ; justify-content: center; margin-right: 9px;}
.hTop .hInner .login_zonefigure img {max-width: 100%;max-height:100%; width: 100%;}
.hTop .hInner .login_zone img {width: 110px; height: auto;}
.hTop .hInner .login_zone .login_select { display: flex; align-items: center;color: #fff;font-family: 'Roboto'; font-weight: 500; cursor: pointer; position: relative;}
.hTop .hInner .login_zone .login_select .select_tt {display: flex; gap: 0 13px; justify-content: space-between; align-items: center;}
.hTop .hInner .login_zone .login_select .select_wrap { position: absolute; left: 0; top: 100%; width: 100%; display: flex ; flex-direction: column ; padding-top: 10px; display: none;}
.hTop .hInner .login_zone .login_select .select_wrap button { display: flex; align-items: center  ; width: 100%; background-color: #3a3a3a4f; color: #fff; font-size: 15px; padding:5px; box-sizing: border-box; border-radius: 5px; white-space: nowrap;}
.hTop .hInner .login_zone .login_select .select_wrap button:hover { color: #139F98;}
.hTop .hInner .login_zone .login_select .select_wrap button:nth-child(1) {margin-bottom: 5px;}
.hTop .hInner .login_zone .login_select svg , .hTop .hInner .login_zone .login_select svg path {transition: all 0.3s ease;}
.hTop .hInner .login_zone .login_select.show svg {transform: rotate(180deg); }
.hTop .hInner .login_zone .login_select.show svg path {fill: #006f69; stroke: #006f69; }

footer {background: #434343; color: #fff; position: relative;}
footer a {color: #fff;}
footer .scrollUpBox {position: fixed; right: 40px; bottom: 40px; display: none; z-index: 5; cursor: pointer;}
footer .scrollUpBox .scroll {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #0286ce; box-shadow:0 5px 10px rgba(0, 0, 0, .34); border-radius: 100%; overflow: hidden;position: relative;}
footer .scrollUpBox .scroll::after{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); border-radius: 100%; width: 0; height: 0; background-color: #073954; transition: all 0.25s ease-out; z-index: 2; opacity: 0;}
footer .scrollUpBox .scroll i {z-index: 3;}
footer .scrollUpBox.on {position: absolute; right: 40px; bottom: 400px;}
footer .scrollUpBox:hover .scroll::after { width: 120%; height: 120%; opacity: 1;}
footer .scrollUpBox .scrollHover {display: none;}
footer .scrollUpBox .scrollHover i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;}
@-webkit-keyframes scrollUpHoverI {0% {transform: translate(-50%, -50%);} 20% {transform: translate(-50%, -60%);} 50% {transform: translate(-50%, -50%);} 70% {transform: translate(-50%, -60%);}}
@keyframes scrollUpHoverI {0% {transform: translate(-50%, -50%);} 20% {transform: translate(-50%, -60%);} 50% {transform: translate(-50%, -50%);} 70% {transform: translate(-50%, -60%);}}
footer .scrollUpBox .scroll:hover i{-webkit-animation: scrollupboxiani 1s ease-out infinite forwards;animation: scrollupboxiani 1s ease-out infinite forwards;}
@-webkit-keyframes scrollupboxiani {
    0%,100%{transform: translateY(0px);opacity: 0.2;} 50%{transform: translateY(-5px);opacity: 1;}
}
@keyframes scrollupboxiani {
    0%,100%{transform: translateY(0px);opacity: 0.2;} 50%{transform: translateY(-5px);opacity: 1;}
}
footer .scrollUpBox .scrollHover img {-webkit-animation: rotateMove 10s linear infinite;animation: rotateMove 10s linear infinite;}
footer .footercon {  display: flex;flex-direction: column;}
footer .top { padding: 40px 0; border-bottom: 1px solid #8F8F8F;}
footer .top .list strong { font-size: 16px; display: block; margin-bottom: 10px; font-weight: 500;}
footer .top .list ul {font-size: 15px; display: flex; flex-wrap: wrap; gap: 10px 25px;}
footer .top .list ul li { display: flex; gap: 0 5px; font-weight: 300;}
footer .top .list ul li span { white-space: nowrap;}
footer .top .inner > ul { display: flex; gap:0 58px; flex-wrap: wrap; letter-spacing: 0px;} 
footer .top .inner > ul > li { flex-basis: calc(33.33% - 26px);}
footer .top .inner > ul > li:nth-child(3) { flex-basis: calc(34.33% - 78px);}
footer .btm {padding: 20px 0 20px;text-align: center;color: #E7E7E7;font-size: 15px;font-weight: 300;}


#wrap.header_ver02 .hMid{display: none;}
#wrap.header_ver02 #container{padding-top: 0;}
#wrap.header_ver02 .subWrap {margin-top: 0;}
#wrap.header_ver02 header .sitemap.on {-webkit-animation: sitemapShow02 .25s ease-out both;animation: sitemapShow02 .25s ease-out both;}



/* ======================================================================================================================================= 
layout css ver 2025 
======================================================================================================================================= */

header .hBot nav {width: auto;}
header .logo { position: absolute; left: 0;z-index: 20; max-width: 230px;}
header .hTop {background-color: transparent; height: 100px; border-bottom: 1px solid rgba(255,255,255,.2); transition: all 0.2s ease;}
header .hBot {height: 100%; display: flex; align-items: center; background: transparent; border-bottom: none; width: 100%; justify-content: center;}
@-webkit-keyframes sitemapShow02 {0% {top: -0; height: auto;opacity: 0;} 100% {top: 100px; height: auto;opacity: 1;}}
@keyframes sitemapShow02 {0% {top: -0; height: auto;opacity: 0;} 100% {top: 100px; height: auto;opacity: 1;}}
header .hTop .hInner {max-width: 1780px; gap: 10px;}
.hTop .hInner .login_zone {position: absolute; right: 0;}
header .hBot .dep li {width: 140px; flex-basis: unset; box-sizing: border-box; text-align: center;}
header .hBot .dep {gap: 0 40px;}
header .hBot .dep li a {font-size: 17px;}
header .sitemap .dep {justify-content: center; gap: 0 40px;}
header .sitemap {background: #002F30CC;}
body.fixed .hTop,
header:has(.sitemap.on) .hTop{ background: #002F30CC;} 
header .sitemap .dep > li {width: 140px; text-align: center;}
header .sitemap .dep2 li {line-height: 1.6;}
header .sitemap .dep2 a{font-size: 15px; transition: all 0.25s ease-out;}


/* header .hTop button > span {font-family: 'sSUIT' !important;} */
footer {background: #1C1C1C;}
footer .btns_quick {position: fixed;left: 50%;transform: translate(-50%,100px);bottom: 30px;z-index: 10; transition: all 0.35s ease-out; -webkit-animation: btns-quick 1s cubic-bezier(0.68, -0.14, 0.17, 1.25) 1 forwards; animation: btns-quick 1s cubic-bezier(0.68, -0.14, 0.17, 1.25) 1 forwards;}
@-webkit-keyframes btns-quick {
    100%{transform: translate(-50%,0);}}
@keyframes btns-quick {
    100%{transform: translate(-50%,0);}}
footer .btns_quick .btns { display: flex; align-items: center; gap: 0 20px; border-radius: 100px;-webkit-backdrop-filter: blur(21.520000457763672px);backdrop-filter: blur(21.520000457763672px);box-shadow: 6.46px 3.23px 4.3px 0px #0D0D0D40;padding: 10px 12px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: #FFFFFF33;}
footer .btns_quick .btns a{display: flex; align-items: center; justify-content: center;  border-radius: 100px; transition: all 0.35s ease-out;}
footer .btns_quick .btns a:not(:nth-child(2)) {width: 215px; height: 40px;font-size: 18px;font-weight: 400; }
footer .btns_quick .btns a:nth-child(1) {background: linear-gradient(90deg, #1F7BD8 0%, #00979C 100%);}
footer .btns_quick .btns a:nth-child(2) {background-color: #1C1C1C; width: 40px; height: 40px;}
footer .btns_quick .btns a:nth-child(3){background: linear-gradient(90deg, #08918A 0%, #E4CD6D 100%);}
footer .btns_quick .btns a:nth-child(1):hover {-webkit-filter: hue-rotate(60deg);filter: hue-rotate(60deg);}
footer .btns_quick .btns a:nth-child(3):hover {-webkit-filter: hue-rotate(-110deg);filter: hue-rotate(-110deg);}
footer .btns_quick .btns a:nth-child(2):hover { background-color: #48677d;}
footer .top .inner > ul {gap: 0 110px;}
footer .scrollUpBox .scroll {background:#507188 ; border-radius: 10px;}
footer:has(.scrollUpBox.on) .btns_quick {  opacity: 0; pointer-events: none;}
footer .scrollUpBox:hover .scroll::after {width: 130%; height: 130%; background-color: #244154ba;}
footer .footercon .inner { max-width: 1560px}
footer .top .inner > ul{flex-wrap: nowrap;}
footer .top .list strong {margin-bottom: 15px;}
footer .top .list ul {gap: 15px 25px;}
footer .top .inner > ul > li{flex-basis: fit-content; white-space: nowrap;}
footer .top{padding: 70px 0 85px;}
footer .btm {height: 95px; display: flex; align-items: center;}
footer .btm .copyright { display: flex ; justify-content: space-between; align-items: center;}

footer .btns_quick .btns:has(a.down) {box-sizing: border-box;}
footer .btns_quick .btns a.down { background: linear-gradient(90deg, #1F7BD8 0%, #00979C 100%); width: 100%; padding: 5px 6px 5px 26px; box-sizing: border-box; text-align: center; min-height: 45px; height: 100% !important;letter-spacing: 0px; font-size: 21px ; font-weight: 500;}
footer .btns_quick .btns a.down p {margin-right: 15px;}
footer .btns_quick .btns a.down i {border-radius: 100px ; display:inline-flex; align-items: center; justify-content: center; color: #fff; background-color: #1C1C1C; aspect-ratio: 1/1; height:36px; width: 36px; flex-shrink: 0;background: #1C1C1C; box-sizing: border-box; font-size: 21px;}

header .hTop .login_ttzone button  {  padding: 5px 10px; border-radius: 50px; transition: all 0.35s ease-out;min-width: 79px;}
header .hTop .login_ttzone span { color: #fff; font-size: 16px;}
header .hTop .login_ttzone .xe {display: none;}
header .hTop .login_ttzone .loginBtn { background-color: #139F98;border:1px solid #ffffff4f}
header .hTop .login_ttzone .loginBtn:hover {background-color: #176d69;}
header .hTop .login_ttzone .singBtn { background-color:#F28142;}
header .hTop .login_ttzone .singBtn:hover { background-color:#b1521f;}


/* 반응형 */
@media screen and (max-width:1024px) {
    #wrap.header_ver02 header .sitemap {top:80px}
    #wrap.header_ver02 header .sitemap .sitemapBox {height: calc(100% - 80px); transform: translateX(0);}

    footer .btns_quick:has(a.down) {width: 70%;} 
    footer .btns_quick .btns:has(a.down) {width: 100%;} 
    footer .btns_quick .btns a.down {width: 100% !important;} 

    
}

@media screen and (min-width: 1025px) {
  /* header .hTop button:hover > span:after {opacity: 1;}
  header .hTop button:hover span > span {animation: spantextcolor_ver02 1.4s linear both infinite;} */
  @-webkit-keyframes spantextcolor_ver02 {
      0%,36%,100%{transform: none;} 20%{transform: translateY(-3px);}   }
  @keyframes spantextcolor_ver02 {
      0%,36%,100%{transform: none;} 20%{transform: translateY(-3px);}   }
    header .sitemap {height: 0;}
    header .sitemapBg {height: 0; transition: 0s ease;}
    header .sitemap .dep2 a:hover {color: #139F98;}
    header .sitemap .dep2 a:hover span:after {top: -6px; opacity: 1;}
    /* footer .scrollUpBox:hover .scroll {display: none;} */
    footer .scrollUpBox.on:hover .scrollHover {bottom: 12px;}
    footer .scrollUpBox:hover .scrollHover {width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 5px 7px rgba(255, 144, 137, .5); display: block; font-weight: 600; background: var(--pointColor3); -webkit-animation: scaleMove1 .5s ease both; animation: scaleMove1 .5s ease both; left: 13px; bottom: -13px; position: relative;}
    footer .scrollUpBox:hover .scrollHover i {-webkit-animation: scrollUpHoverI 3s ease both infinite;animation: scrollUpHoverI 3s ease both infinite;}
    footer .left .list .addressBox li.hover i:after {opacity: 1;}
    footer .left .list .addressBox a:hover:after {opacity: 1;}
    footer .left .list .addressBox a:hover {text-shadow: 2px 2px rgba(255, 144, 137, .3);}
}

@media screen and (max-width:1830px) {
    header .logo{left: 20px;}
    header .hTop .hInner{max-width: 100%;}
    .hTop .hInner .login_zone{right: 20px;gap: 0 25px;}

}

@media screen and (max-width:1730px) {
    .hTop .hInner .login_zone{gap: 0 5px;}
    header .sitemap .dep,
    header .hBot .dep{gap: 0 20px;}
    header .hBot .dep li,
    header .sitemap .dep > li{width: 120px;}
}
@media screen and (max-width: 1600px) {
  header .hBot h1 a {align-items: center;}
  header .hInner > .logo4 {display: none;}
  header .hInner h1 .logo4 {display: block; width: 100px;}
  header .hBot .dep li a {font-size: 17px}
  header .logo {width: 180px;}
  footer .top .inner > ul {gap: 0; justify-content: space-between;}
  footer .top .inner > ul > li:nth-child(3) {flex-basis: fit-content;}
  .hTop .hInner .login_zone > a { width: 120px;}
  .hTop .hInner .login_zone {right: 12px;}
  header .logo{left: 12px;}
  .hTop .hInner .login_zone .login_select .select_tt{gap: 0 9px;}
  .hTop .hInner .login_zone .login_select{font-size: 15px;}
  .hTop .hInner .login_zone .login_select .select_wrap button {font-size: 13px;}
}
@media screen and (max-width:1460px ) {
    footer .top .inner > ul > li , 
    footer .top .inner > ul > li:nth-child(3) {flex-basis: calc(33.33% - 39px)}
    footer .scrollUpBox.on {bottom: auto; top: -25px;}
    footer .top .list ul {gap: 10px;}
    header .hTop .login_ttzone span{font-size: 14px;}
    header .hTop .login_ttzone button{min-width: 64px;}
    header .sitemap .dep,
    header .hBot nav{transform: translateX(-15px);}
}
@media screen and (max-width:1400px) {
    footer .top .inner > ul{flex-wrap: wrap; gap: 30px 80px; justify-content: flex-start;}
    footer .top .inner > ul > li:nth-child(3){flex-basis: 100%;}
    .hTop .hInner .login_zone{gap: 0 10px;}
    .hTop .hInner .login_zone > a { width: 100px;}
    header .hBot .dep, header .sitemap .dep {gap: 0 15px;}
}
@media screen and (max-width:1280px) {
    /* footer .top .inner > ul > li {flex-basis: calc(33.33% - 27px);} */
    footer .top .list ul li {flex-basis: 100%;}
    .hTop .hInner .login_zone {gap: 16px; flex-direction: column; align-items: flex-end;right: 12px;}
    header .logo{width: 160px;}
    header .logo{left: 12px;}
    header .hBot .dep,
    header .sitemap .dep{gap: 0 20px;}
    header .hBot .dep li a {font-size: 15px;}
    .hTop .hInner .login_zone > a { width: 115px;}
    header .sitemap .sitemapBox,
    header .hBot{transform: translateX(20px);}
    header .sitemap .dep,
    header .hBot nav{transform: translateX(0px);}

}
@media screen and (max-width: 1200px) {
  header .hBot h1 a img {height: 43px;}
    header .sitemap .dep > li > a {font-size: 16px; height: 35px;}
    header .sitemap .dep2 {gap: 15px;}
    header .sitemap .dep2 a {font-size: 15px;}
    footer .left {width: 70%;}
    footer .left .list .addressBox {flex-wrap: wrap;}
    footer .left .list .addressBox li:first-child {width: 100%;}
    footer .right .listWrap .listBox {height: 45px;}
    footer .right .listWrap .listBox {font-size: 18px;}
    footer .copyright span {font-size: 14px;}
    header .sitemap {padding: 20px 0 30px;}
    header .logo{width: 140px;}
    header .hBot .dep, header .sitemap .dep{gap: 0 12px;}
    header .sitemap .dep > li, header .hBot .dep li{width: 120px;}
}
@media screen and (max-width: 1100px) {
  header .hBot .dep li {padding: 0;}
  header .sitemap .dep2 a,
  header .hBot .dep li a {font-size: 14px;}

  header .hInner, header .sitemap .sitemapBox {padding: 0 20px;}
  .inner {padding: 0 20px;}
  .hTop .hInner .login_zone > a { width: 100px;}
  header .sitemap .dep > li, header .hBot .dep li{width: 110px;}
}
@media screen and (max-width: 1024px) {
    header .hTop {height: 80px;}
    /* header .hTop button {font-size: 16px; padding: 0 5px;} */
    header .hBot {z-index: auto; display: none;}
    header .hBot {height: 70px;}
    header .hBot h1 a img {height: 40px;}
    header .hBot nav {display: none;}
    header .sitemapBtn {display: block; z-index: 15; margin-left: 15px;}
    header:has(.sitemapBg.on) .hTop { background: #002F30CC;}
    header .sitemapBg.on {transition: 0.85s ease;}
    header .sitemap {width: 100%; height: 100% !important; right: -100%; top: 90px; left: auto; background: #002F30CC; padding-top: 0px;}
    header .sitemap .sitemapBox {padding: 0; height: calc(100% - 90px); overflow-y: auto; overflow-x: hidden;}
    header .sitemap .dep {flex-direction: column; gap: 0; margin-bottom: 30px;}
    header .sitemap .dep li {width: 100%;}
    header .sitemap .dep > li > a {border-radius: 0; padding: 15px 20px; justify-content: space-between; box-sizing: border-box; font-size: 18px; height: auto; margin-bottom: 0; pointer-events: auto; background: transparent; font-weight: 400;}
    header .sitemap .dep > li {transform: translateY(-30px);}
    header .sitemap .dep > li > a i {display: block; transition: .5s ease;}
    header .sitemap .dep li > a.on i {transform: rotate(180deg);}
    header .sitemap.open {display: block; -webkit-animation: sitemapShow .3s linear both; animation: sitemapShow .3s linear both;}
    @-webkit-keyframes sitemapShow {0% {right: -100%;} 100% {right: 0;}}
    @keyframes sitemapShow {0% {right: -100%;} 100% {right: 0;}}
    header .sitemapBtn.open:before {-webkit-animation: sitemapBtnOpen-1 1s ease both;animation: sitemapBtnOpen-1 1s ease both;}
    header .sitemapBtn.open span {opacity: 0;}
    header .sitemapBtn.open:after {-webkit-animation: sitemapBtnOpen-2 1s ease both;animation: sitemapBtnOpen-2 1s ease both;}
    header .sitemapBtn.close span{transform: translate(150%, -50%); opacity: 0;}
    header .sitemapBg {background: transparent; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
    header .sitemapBtn::before ,
    header .sitemapBtn::after {transition: all 0.3s ease-out;}
    header .sitemapBtn span {transition: all 0.19s ease-out;}
    header .sitemapBtn.close::before{transform: rotate(45deg) translate(0px,11px);}
    header .sitemapBtn.close::after{transform: rotate(-45deg) translate(0px,-11px);}

    @-webkit-keyframes sitemapBtnOpen-1 {50% {top: 47%; transform: translate(-50%, -50%);} 100% {top: 47%; transform: translate(-50%, 50%) rotate(45deg);}}

    @keyframes sitemapBtnOpen-1 {50% {top: 47%; transform: translate(-50%, -50%);} 100% {top: 47%; transform: translate(-50%, 50%) rotate(45deg);}}
    @-webkit-keyframes sitemapBtnOpen-2 {50% {bottom: 47%; transform: translate(-50%, -50%);} 100% {bottom: 47%; transform: translate(-50%, 50%) rotate(-45deg);}}
    @keyframes sitemapBtnOpen-2 {50% {bottom: 47%; transform: translate(-50%, -50%);} 100% {bottom: 47%; transform: translate(-50%, 50%) rotate(-45deg);}}
    @-webkit-keyframes opacityMove_1_ver02 {0%{opacity: 0; transform: translateY(-30px);} 100%{opacity: 1; transform: translateY(0);}}
    @keyframes opacityMove_1_ver02 {0%{opacity: 0; transform: translateY(-30px);} 100%{opacity: 1; transform: translateY(0);}}
    header .sitemap.open .dep li {-webkit-animation: opacityMove_1_ver02 .65s ease both;animation: opacityMove_1_ver02 .65s ease both;}
    header .sitemap.open .dep li:nth-child(1) {-webkit-animation-delay: .15s;animation-delay: .15s;}
    header .sitemap.open .dep li:nth-child(2) {-webkit-animation-delay: .2s;animation-delay: .2s;}
    header .sitemap.open .dep li:nth-child(3) {-webkit-animation-delay: .3s;animation-delay: .3s;}
    header .sitemap.open .dep li:nth-child(4) {-webkit-animation-delay: .4s;animation-delay: .4s;}
    header .sitemap.open .dep li:nth-child(5) {-webkit-animation-delay: .5s;animation-delay: .5s;}
    header .sitemap.open .dep li:nth-child(6) {-webkit-animation-delay: .6s;animation-delay: .6s;}
    header .sitemap.open .dep li:nth-child(7) {-webkit-animation-delay: .7s;animation-delay: .7s;}
    header .sitemap.open .dep li:nth-child(8) {-webkit-animation-delay: .8s;animation-delay: .8s;}
    header .sitemap .dep2 {display: none; padding: 25px 0; gap: 0; background: #0a699a; padding: 0!important; background:linear-gradient(180deg, rgb(5 44 46) 0%, rgb(99 247 255 / 38%) 100%);}
    header .sitemap .dep2 a {padding: 15px 30px; width: 100%; font-size: 15px; text-align: left;}
    footer .scrollUpBox {right: 20px; bottom: 20px;}
    footer .scrollUpBox.on {top: -21px;}
    footer .scrollUpBox .scroll {width: 42px; height: 42px; font-size: 15px;}
    footer .left .list:not(:last-child) {margin-bottom: 27px;}
    footer .left .list > strong {font-size: 16px; margin-bottom: 10px;}
    footer .left .list .addressBox {font-size: 13px;}
    footer .right {width: 35%;}
    footer .right .listWrap .listBox {font-size: 16px;}
    footer .copyright figure img {width: 125px;}

    header .hTop .hInner .logo ,
    header .hTop .hInner .logo a{height: 100%;}
    header .hTop .hInner .logo a {display: flex; align-items: center;}
    header .hMid .con {height: 35px; font-size: 16.5px;}
    header .sitemap .dep > li .pcnone { display: flex;}
    header .sitemap .dep > li .pcnone.on { background-color: #052c2e; border-bottom: 1px solid #ffffff2b; }
    header .sitemap .dep2 li {transform: translateY(0);}

    header .sitemap .dep > li > a:after {display: none;}
    header .sitemap .dep > li.on > a {background-color: #0a699a;color: #fff; background-color: #052c2e6b;}

    footer .top .inner > ul {flex-wrap: wrap; gap: 22px 0;}
    footer .top .inner > ul > li ,
    footer .top .inner > ul > li:nth-child(3) {flex-basis: 100%;}
    footer .top .list strong {margin-bottom: 5px; font-size: 15px;}
    footer .top .list ul {gap: 5px 25px; font-size: 14px;}
    footer .top .list ul li {flex-basis: fit-content;}
    footer .top {padding: 30px 0;}
    footer .btm {padding: 15px 0; height: 100%; padding: 25px 0 20px;}

    .hTop .hInner .login_zone {right: 20px; flex-direction: row; margin-right: 10px; align-items: center; gap: 15px;}
    header .logo {width: auto; left: 20px;}
    footer .top .list ul {flex-direction: column;}
    footer .top .inner > ul > li {white-space: normal;}
    footer .top .list ul {line-height: 1.5;}
    footer .btm .copyright {flex-direction: column; align-items: flex-start; gap: 15px;}
    footer .copyright .nocont  {display: none;}
    .hTop .hInner .login_zone > a { width: 130px;}
}
@media screen and (max-width: 768px) {
    header .hBot h1 a img:not(:last-child) {margin-right: 5px;}
    footer .scrollUpBox.on {top: -25px; right: 15px;}
    footer .inner {flex-direction: column;}
    footer .left, footer .right {width: 100%; text-align: left;}
    footer .right .listWrap .listBox {height: 40px; max-width: 200px; padding: 0 15px; font-size: 15px;}
    footer .copyright figure {margin-bottom: 5px;}
    footer .copyright span {font-size: 12px;}
    footer .left .list .addressBox i {top: 2px;}
    footer .left .list .addressBox .text {padding-left: 18px;}

    header .hMid .con {font-size: 15px;padding: 0 10px; white-space: pre-wrap;}
    footer .btns_quick .btns a:not(:nth-child(2))  {width: 170px; height: 34px ; font-size: 15px;}
    footer .btns_quick .btns a:nth-child(2) {width: 35px; height: 35px;}
    footer .btns_quick .btns a:nth-child(2) svg { width: 20px; height: auto;}
    footer .btns_quick .btns{gap: 0 8px;}
    footer .btns_quick .btns a.down{font-size: 19px;}
}
@media screen and (max-width:640px) {
    .hTop .hInner .login_zone {margin-right: 0;}
    header .hTop .loginBtn {margin-right: 5px;}
    header .sitemapBtn {margin-left: 12px;}

    header .hInner, header .sitemap .sitemapBox {padding: 0 15px;}
    header .sitemap .sitemapBox {padding: 0  !important;}

    .inner {padding: 0 15px;}

    .hTop .hInner .login_zone figure {width: 100px; height: auto;}
    header .logo{width: 180px;}
    .hTop .hInner .login_zone > a {width: 110px;}
    .hTop .hInner .login_zone img{width: 90px;}
    .hTop .hInner .login_zone{gap: 0px;}
    header .hTop .loginBtn{margin-right: 0;}

    footer .btns_quick:has(a.down) {width: 90%;}
}

@media screen and (max-width:550px) {
    footer .top .list ul li {flex-basis: 100%;}
    footer .top .list ul {font-size: 13px;}

    /* header .hTop button {width: 80px; height: 27px; font-size: 13px;} */
    header .sitemapBtn {margin-left: 9px;}
    footer .scrollUpBox{bottom: 85px;}

    header .hTop .login_ttzone span {display: none;}
    header .hTop .login_ttzone .xe {display: block; color: #fff;}
    header .hTop .loginBtn{margin-right: 4px;}
    header .hTop .login_ttzone button {min-width: -webkit-fit-content;min-width: -moz-fit-content;min-width: fit-content; height: 35px ; width: 35px; padding: 0;}
    .hTop .hInner .login_zone > a {width: 100px;}

}

@media screen and (max-width: 480px) {
    header .sitemap .dep > li > a {font-size: 16px;}
    header .sitemap .dep2 {padding: 10px 0;}
    header .sitemap .dep2 a {padding: 13px 6%;}

    .hTop .hInner .login_zone {flex-direction: column; gap: 10px; margin-right: 60px; align-items: flex-end;}
    header .hTop .loginBtn {margin-right: 0;}
    header .sitemapBtn {margin-left: 0;  position: absolute;  right: 15px;  top: 50%;  transform: translateY(-50%); margin-right: -55px;}
    /* header .hTop button {width: 80px; height: 22px; font-size: 13px; font-weight: 500;} */
    header .hMid .con {font-size: 12.5px;}

    footer .top .list ul li {flex-wrap: wrap; gap: 4px 3px;}
	header .hMid .con p br {display:block}
    footer .scrollUpBox {bottom: 68px;}

    .hTop .hInner .login_zone figure {position: absolute; right: 140px; top: 50%; transform: translateY(-50%); margin-right: 0;}
    .hTop .hInner .login_zone{right: 0;margin-right: 60px; }
    header .logo {width: 150px;}
    footer .btns_quick {width: 90%; bottom: 10px;}
    footer .btns_quick .btns{max-width: 100%;}
    footer .btns_quick .btns a:nth-child(2){min-width: 35px;}
    footer .btns_quick .btns a:not(:nth-child(2)) {width: 100%; text-align: center;}
    .hTop .hInner .login_zone img {width: 100%;}
    header .hTop .loginBtn{margin-right: 5px;}
    header .hTop .login_ttzone button {width: 48px; height: 30px;}

    footer .btns_quick:has(a.down) {bottom: 15px;}
}


@media screen and (max-width:400px) {
    .hTop .hInner .login_zone {margin-right: 32px;} 
    /* header .hTop button {width: 72px;} */
    header .hMid .con {font-size: 13px;}
    header .sitemap {width: 100%;}
    .hTop .hInner .login_zone {margin-right: 50px;}
    .hTop .hInner .login_zone figure {right: 116px; width: 25vw;}
    header .sitemapBtn {margin-right: -50px;}
    header .logo {left: 12px;}
    footer .btns_quick .btns a:not(:nth-child(2)){font-size: 14px;}
    footer .btns_quick .btns{gap: 0 4px; padding: 5px;}
    footer .btns_quick {width: 95%;}
    header .logo {width: 130px;}
    footer .btns_quick .btns a.down{font-size: 17px;}
    
}

@media screen and (max-width:350px) {
    header .hMid .con {font-size: 12px;}
}



/* 로딩바 Start */
.loading-prograss {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#000;
	background-color: rgba( 0, 0, 0, 0.6 );
	z-index:9999;
}
.loading-prograss .square {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.loading-prograss .loader {font-size: 10px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: mulShdSpin 1.1s infinite ease; animation: mulShdSpin 1.1s infinite ease; transform: translateZ(0); margin-bottom: 35px;}
.loading-prograss .load-txt {color: #fff;}

@-webkit-keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

/* 로딩바 End */