@charset "utf-8";


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

*/

img {max-width:100%;}
.tac {text-align: center;}
em {font-style: normal;}


/*서브공통*/
table{border-spacing:0; border-collapse:collapse;}
table{width:100%; margin:10px 0 5px; border-top:2px solid #4f4e4e; word-break:keep-all; word-wrap:break-word;}
table th,
table td{border:1px solid #e4e4e4; font-size:17px;}
table th{padding:20px 20px; background:#f5f5f5; font-weight:500; font-size:17px; text-align:center;}
table thead + tbody th{background:#fcfcfc;}
table tbody th{padding-left:12px; padding-right:12px;}
table td{padding:20px 20px;}

.slick-track {
  will-change: transform;
  transform: translateZ(0); /* 강제 하드웨어 가속 */
    transition: 1s;
}

.slider .slick-track,
.slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-delay: 10ms;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
    bottom:0;
  background-color:rgba(0,0,0,0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

.loader {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent #FF3D00 #FF3D00;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
    
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
    
/* 텍스트 */
.loading-text {
  margin-top: 15px;
  font-size: 1.2rem;
  color: #fff;
}

/* 회전 애니메이션 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
body {max-width:1920px; margin:0 auto; }

button {border:0; background:none;}

.t_bg {background:#0066f0; border-bottom-right-radius:20% 9vw;  border-bottom-left-radius:20% 9vw; overflow:hidden;}



body.scroll {overflow-y:hidden; height:100%;}


.dots-container { position: absolute; left:0; top:0; right:0; bottom:0; pointer-events: none; z-index: 9999; overflow:hidden; }
.dots-container .dot {position: absolute;top: 0%;background: rgba(255, 255, 255, 1); /* 투명한 흰색 */border-radius: 50%;animation-name: fall, sway;animation-timing-function: linear, ease-in-out;animation-iteration-count: infinite, infinite;opacity: 0.7; color:transparent; opacity:0;
}
.dots-container .dot:nth-child(1) {width: 11px; height: 11px;left: 5%;animation-duration: 15s, 4s;animation-delay: 0s, 0s;}
.dots-container .dot:nth-child(2) {width: 16px; height: 16px;left: 15%;animation-duration: 20s, 5s;animation-delay: 3s, 1s;}
.dots-container .dot:nth-child(3) { width: 9px; height: 9px; left: 25%; animation-duration: 12s, 3.5s; animation-delay: 6s, 0.5s;}
.dots-container .dot:nth-child(4) { width: 15px; height: 15px; left: 40%; animation-duration: 18s, 4.5s; animation-delay: 2s, 1.5s;}
.dots-container .dot:nth-child(5) { width: 8px; height: 8px; left: 55%; animation-duration: 22s, 5s; animation-delay: 4s, 0.2s;}
.dots-container .dot:nth-child(6) { width: 13px; height: 13px; left: 70%; animation-duration: 14s, 3.7s; animation-delay: 7s, 1.7s;}
.dots-container .dot:nth-child(7) { width: 9px; height: 9px; left: 80%; animation-duration: 16s, 4.2s; animation-delay: 1s, 1s;}
.dots-container .dot:nth-child(8) { width: 16px; height: 16px; left: 90%; animation-duration: 19s, 4.8s; animation-delay: 5s, 1.2s;}
.dots-container .dot:nth-child(9) { width: 13px; height: 13px; left: 50%; animation-duration: 13s, 3.9s; animation-delay: 8s, 0.7s;}
.dots-container .dot:nth-child(10) { width: 12px; height: 12px; left: 35%; animation-duration: 21s, 5.1s; animation-delay: 6s, 1.4s;}

@keyframes fall {
  0% { top: -10%; opacity: 1;}
  70% { opacity: .25; }
  100% { top: 90%; opacity:0; }
}

@keyframes sway {
  0%, 100% { transform: translateX(0);}
  50% { transform: translateX(35px);}
}


.slickwrap .nav .slick-dots li{display:inline-block; padding:0 5px;}
.slickwrap .nav .slick-dots button{display:inline-block; position:relative; width:18px; height:18px; padding:2px; border-radius:50%; border:1px solid transparent; background-color:rgba(0,0,0,.3); background-clip:content-box; font-size:12px; vertical-align:middle; transition:all .3s; text-indent:-999px; overflow:hidden;}
.slickwrap .nav .slick-dots button:after{display:none;}
.slickwrap .nav .slick-dots .slick-active button{padding:5px; border-color:rgba(0,0,0,1); background-color:rgba(0,0,0,1);}


.cont_main {padding-top:90px; }
.cont_main .visual {height:600px; position:relative; display:flex; justify-content: center; align-items: center; background:#0d73f0 ; text-align:center; color:#fff;  margin:0 auto; animation:m_v 20s linear infinite; z-index:2; overflow:hidden; background: url("../images/main/visual01.png") no-repeat center bottom; padding-top:110px;}



.cont_main .visual h2 {font-size:72px; font-weight:900; margin:0 0 20px; letter-spacing:-0.1em;}
.cont_main .visual span {font-size:36px; font-weight:bold; display:block; padding-bottom:20px;}
.cont_main .visual span em {font-size:28px; font-weight:normal; position:relative; top:-4px;}



.cont_main .m_quick { padding:60px 0; z-index:10; position:relative; background:#fff;}
.cont_main .m_quick ul {max-width:1400px; margin:0 auto; display:flex; justify-content: space-between;}
.cont_main .m_quick ul li {width:20%; text-align:center; text-align:center; position:relative;}
.cont_main .m_quick ul li img {filter: contrast(1.2);}
.cont_main .m_quick ul li span {display:block; padding-top:16px; font-size:19px;}



 


.cont_main .m_box { padding:130px 0;}
.cont_main .m_tit {text-align:center; font-size:42px; margin-bottom:34px;  }


.m1  { max-width:1400px; margin:0 auto; position:relative; z-index:2; display:flex; justify-content: space-between;}
.m1 .notice {width:calc(100% - 450px); height:450px; border-radius:30px; border:5px solid #eff3f8; background:#fff;}
.m1 .notice h2 {height:80px; line-height:78px; border-radius:24px 24px 0 0; background:#eff3f8; padding-left:40px; font-size:20px; color:#1d8b49; position:relative; }
.m1 .notice ul {padding:56px 60px;}
.m1 .notice ul li {margin-bottom:30px; display:flex; justify-content: space-between; align-items:center;}
.m1 .notice ul li a {display:flex; align-items: center; position:relative; }
.m1 .notice ul li  .date {  white-space: nowrap;}

.m1 .notice ul li a .type { display:block; width:102px; height:40px; line-height:40px; text-align:center; font-size:18px; font-weight:500; color:#fff; border-radius:60px; background:#1d8b49; margin-right:50px;}
.m1 .notice ul li a p {font-size:18px; font-weight:500; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.m1 .notice .more_btn {position:absolute; right:40px;top:23px; display:flex; align-items: center; gap:12px;}
.m1 .notice .more_btn span {display:block; width:30px; height:30px; border-radius:30px; background:#fff; text-align:center; line-height:28px; font-size:18px;}



.m1 .popup { width:410px; height:450px;  }
.m1 .popup h2 {position:absolute; left:30px; top:30px; z-index:20; color:#fff; font-size:20px;}
.m1 .popup .popupzone .slider { border-radius:30px; overflow:hidden;}
.m1 .popup .nav {display:flex; justify-content: center; margin-top:25px;}
.m1 .popup .slickwrap .nav .slick-dots button{ background-color:rgba(255,255,255,.3); }
.m1 .popup .slickwrap .nav .slick-dots .slick-active button{ border-color:rgba(255,255,255,1); background-color:rgba(255,255,255,1);}




.m2 {padding:130px 0 146px; position:relative; margin-top:-70px; background:#4d6ee3 url(../images/main/obj06.png) no-repeat right bottom;}
.m2 .inr {max-width:1320px; margin:0 auto;}
.m2 .inr h2 {font-size:34px;  margin-bottom:30px; color:#fff;}
.m2 .inr ul {display:flex; gap:20px;}
.m2 .inr ul li {text-align:center; width:100%; background:rgba(0,0,0,0.75); line-height:1.35; padding:30px 10px; color:#fff; border-radius:20px;}
.m2 .inr ul li img {display:block; margin:0 auto; filter: brightness(2) hue-rotate(14deg); }
.m2 .inr ul li strong {display:block; margin:20px 0 8px;  }


.m3 {max-width:1400px; margin:70px auto 80px;}
.m3 h2 {font-size:34px; margin-bottom:30px;}
.m3 h2 span {font-weight:normal; font-size:17px; color:#555; margin-left:25px; letter-spacing:-0.04em;}
.m3 ul {display:flex;  flex-wrap:wrap; justify-content: center; margin:0 -12px -40px;}
.m3 ul li { width:calc(25% - 24px); margin:0 12px 50px;}
.m3 ul li img {}
.m3 ul li span {font-size:18px; text-align:center; font-weight:500; display:block; margin-top:12px;}






.m4 {position:relative;}
.m4:before {content:''; display:block; width:100%; height:1px; background:#fff; position:absolute; left:0; top:0; z-index:10;}
.m4 .root_daum_roughmap .wrap_controllers , .root_daum_roughmap .cont { display:none; }



@media (max-width: 1400px){
    .m1 , .m2 , .m3 {padding-left:20px; padding-right:20px;}
    
    .cont_main .visual {border-radius:0;}
    
}
    
@media (max-width: 1279px){
    
    .cont_main {padding-top:90px;}
    .m1 .notice ul {padding:50px 30px;}
    .m1 .notice ul li a .type {font-size:16px; margin-right:24px; min-width:72px;}
    
    
    
}


@media (max-width: 1023px){
   
    .cont_main .visual {height:640px;}
    .cont_main .visual p {font-size:18px;}
    .cont_main .visual h2 {font-size:62px; margin-bottom:20px;}
    .cont_main .visual span {font-size:30px;}
   .cont_main .visual span em {font-size:22px; }
    
    .m1 {display:block;}
    .m1 .notice {width:auto;}
    
    .m1 .popup {margin:50px auto 0;}
    
   
}

@media (max-width: 767px){
    
    .m1, .m2, .m3 {padding-left:15px; padding-right:15px;}
    
    .cont_main {}
    .cont_main .visual {height:360px; padding:0 20px 60px; word-break: keep-all; background-size:cover;}
    .cont_main .visual .img01 {min-width:700px;}
    .cont_main .visual p {font-size:17px; word-break: keep-all;}
    .cont_main .visual h2 {font-size:9vw; margin-bottom:18px;}
    .cont_main .visual span {font-size:20px; padding-bottom:0;}
    .cont_main .visual span em {font-size:15px; top:-3px; }
    .cont_main .visual .obj01 { background-size:1200px auto; animation:m_obj01 200s linear infinite;  }
@keyframes m_obj01{
	0%{ background-position:0 bottom;}
    100%{ background-position:-1200px bottom;  }
}
    .cont_main .visual .obj02 { background-size:1200px auto; animation:m_obj02 200s linear infinite;  }
@keyframes m_obj02{
	0%{ background-position:0 bottom;}
    100%{ background-position:1200px bottom;  }
}

    .cont_main .visual .img04 {width:40px; bottom:70px; margin-left:-170px;} 
    
    .cont_main .m_quick {padding:40px 15px;}
    .cont_main .m_quick ul {flex-wrap:wrap;}
    .cont_main .m_quick ul li img { width:60px;}
    .cont_main .m_quick ul li span {font-size:16px; padding-top:9px;}
    
    .m1 .notice {height:auto; border-width:3px; border-radius:16px;}
    .m1 .notice h2 {padding-left:20px; height:60px; line-height:57px; border-radius:12px 12px 0 0;}
    .m1 .notice ul {padding:20px;}
    .m1 .notice ul li {margin-bottom:0; position:relative; display:block;}
    .m1 .notice ul li a .type {display:none;}
    .m1 .notice ul li a {display:block;}
    .m1 .notice ul li a p { font-size:16px; line-height:40px; width:100%; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; padding-right:70px; box-sizing: border-box;}
    .m1 .notice ul li .date {top:0; line-height:40px; font-size:16px; position:absolute; right:0;}
    
    .m1 .notice .more_btn {position:initial; display:none;}
    
    
    .m1 .popup {width:100%;  margin-top:24px; height:auto;}
    
    
    
    .m2 {background-size:70%; padding:100px 15px 70px; }
    .m2 .inr h2 {font-size:24px; margin-bottom:20px;}
    .m2 .inr ul {flex-wrap:wrap; gap:0; justify-content: space-between;}
    .m2 .inr ul li {width:calc(50% - 10px); margin-bottom:15px; padding:25px 10px;}
    .m2 .inr ul li img {width:60px;}
    
    
    .m3 {margin:50px 0;}
    .m3 ul {margin:0 -6px -20px;}
    .m3 ul li {width:calc(50% - 12px); margin:0 6px 20px;}
    .m3 ul li span {font-size:16px;}
    .root_daum_roughmap .wrap_map {height:300px !important;}
    .m3 h2 span {display:block; margin:10px 0 0;}
}


@media (max-width: 500px){
    
    .cont_main {padding-top:140px;}
    .m2 .inr h2 {margin-bottom:10px;}
    .m2 .inr ul {gap:0;}

    .m2 .inr ul li {width:100%; margin-bottom:0; }
    .cont_main .m_quick {margin-bottom:0; padding-bottom:20px;}
    .cont_main .m_quick ul {justify-content: center;}
    .cont_main .m_quick ul li {width:33.3333%; margin-bottom:20px; }
    
    .cont_main .visual h2 { margin-bottom:4px;}
    
    .cont_main .visual {padding-top:90px; height:280px;}
    
    .m2 ul {display:block; padding-top:12px;}
    .m2 ul li {width:100%; padding:0 40px;}
    .m2 ul li + li {margin-top:20px;}
    .m2 ul li img {max-width:80px; margin-bottom:12px;}
}