.main-top-side {--value: 24px;  border-radius: 40px;}
.btn-swiper-pause {width: 32px; height: 32px; background: url(../img/paused.svg) no-repeat 50% 50% / 26px auto;  -ms-flex-negative: 0; flex-shrink: 0;  border-radius: 100%; margin-left:10px;}
.btn-swiper-pause.paused {background-image: url(../img/play.svg);}

h2.title {position:relative; display:flex; gap:10px; align-items: center; margin-bottom:60px;}
h2.title:after {content: ""; position: absolute; top: 20px; height: 2px; background: #0066b3;}
h2.title p {font-size:50px;}
h2.title small {font-size:20px; color:#999; font-weight:200; margin-top:15px;} 
h2.title a {margin-left:auto;}

@media(max-width: 991.98px) {
    h2.title {margin-bottom:40px;}
    h2.title p {font-size:45px;}
    h2.title small {font-size:15px; margin-top:10px;}
}

@media(max-width: 767.98px) {
    h2.title {flex-direction: column; align-items: flex-start; gap:0px;}
    h2.title:after {top: 15px;}
    h2.title p {font-size:35px;}
    h2.title small {font-size:14px; margin-top:0;}
    h2.title a {position: absolute; right: 0; top: 10px; font-size: 0; padding: 15px;}
    h2.title a i {margin-left:0px;}
}

/* main */
.main {padding-top:50px;}

@media(max-width: 1280px) {
 .main {padding-top: 0px;}
}

@media(min-width: 1241px) {
    .main-top {display:-webkit-box; display: -ms-flexbox; display: flex; padding-top: 7px; gap: 32px; margin:0 auto;}
    .main-notice {-ms-flex-preferred-size: 52%; flex-basis: 52%; max-width:52%}
    .main-top-side {-ms-flex-preferred-size: calc(48% - 20px); flex-basis: calc(48% - 20px); max-width: calc(48% - 20px); display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical;-webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px}
}

.main-top {padding-top: 30px; padding-bottom:50px}
.main-top-side {display: flex; flex-wrap: wrap; gap: 20px;}
.main-top-visual {border-radius: 40px 40px 0;}
.main-top-visual .swiper-slide:before {content: ""; position: absolute; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); z-index: 1; left: 0; opacity: 0.7;}
.main-top-visual .main-visual-cont {position: absolute; bottom: 12%; left: 5%; color: #fff; z-index: 2;}
.main-top-visual .main-visual-cont small {font-size:18px; font-weight:200;letter-spacing: 1px;}
.main-top-visual .main-visual-cont h4 {font-size:40px; color:#fff; font-weight:600; line-height:1.2; margin-top:5px;}
.main-top-visual img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 10% 100%; object-position: 10% 100%}
.main-top-visual .text-wrap {position: absolute; bottom: 13%; left: 6%}
.main-top-visual .tit04 {margin: .6em 0 1.3em}
.main-top-visual .bt {min-width: 10em}
.main-top-visual .embed-responsive {height: 100%}
.main-top-visual .embed-responsive:before {padding-bottom: 56.72%}
.main-top-visual a {display: block; height: 100%}
.main-top-visual .embed-responsive-item {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover}

.main-top-visual .swiper-control {position: absolute; bottom: 0; right: 0; padding: 40px 20px 20px 50px; width: auto; height: 90px; background:url(./../img/mainslide-btnbg.svg) no-repeat bottom left; z-index:3;  display: flex; justify-content: space-between;}
.main-top-visual .swiper-control:after {content: ""; z-index: 1; border-radius: 0 0 30px; width: 30px; height: 30px; position: absolute; bottom: 70px; right: 0; box-shadow: 30px 30px 0 30px #fff;}

.main-top-visual .swiper-control .swiper-pagination {position: static;}
.main-top-visual .swiper-control .swiper-pagination-bullet-active {width: 32px}

@media(min-width:1770px) {
    .main-top-visual {height:360px;}
    .main-top-visual img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;  -o-object-position:center; object-position:center;}
}

@media(max-width: 1240.98px) {
    .main-top-visual {height:auto; border-radius:30px 30px 0;}
    .main-top-visual .main-visual-cont h4 {font-size:34px; margin-top:3px;}
    .main-top-visual .main-visual-cont small {font-size:15px;}
}
@media(max-width: 767.98px) {
    .main-top-visual .main-visual-cont h4 {font-size:28px;}
    .main-top-visual .main-visual-cont small {font-size:14px;}

    .main-top-visual .swiper-control {height:50px; background-image:url(./../img/mainslide-btnbg_m.svg); padding:20px 20px 20px 40px;}
    .main-top-visual .swiper-control:after {bottom:50px;}
}
@media(max-width: 575.98px) {
    .main-top-visual {height:180px;}
    .main-top-visual .main-visual-cont h4 {font-size:20px; margin-top:0; max-width: 75%;}
    .main-top-visual .main-visual-cont h4 br {display: none;}
    .main-top-visual .main-visual-cont small {font-size:11px; letter-spacing:0;}

    .btn-swiper-pause {display: none;}
}


.main-top-banner {width: 100%; border-radius: 30px;}
.main-top-banner .inner {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 8px}

.main-top-banner .label {background: #fff; color: var(--primary) !important;  font-weight: 700}

.main-top-banner .text-clamp,.main-top-banner .gei .main-resources ul li .tit,.gei .main-resources ul li .main-top-banner .tit {--clamp: 1; line-height: 1.2em; height: calc(1.2em*var(--clamp)); color: #fff; margin: .5em 0}

.main-top-banner .period {opacity: .8; margin-top: auto; margin-bottom: 1em; word-break: keep-all; display: -webkit-box !important; overflow: hidden; max-height: 3em; line-height: 1.5em !important; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap: break-word;}

.main-top-banner .swiper-control {position: absolute; z-index: 5; -webkit-box-pack: end;-ms-flex-pack: end; justify-content: flex-end; bottom: 12px; right: var(--value); left: var(--value); width: auto}

.main-top-banner .swiper-pagination {-ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-end;}

.main-top-search {position:relative; height:80px; border-radius:30px; padding:20px 40px; background:var(--basic); display:flex; align-items: center; justify-content: space-between; color:#fff;}
.main-top-search form {width:80%;}
.main-top-search .form_inner {position: relative; width: 100%;}
.main-top-search .form_inner input[type=text] {width: 100%; height: 40px; font-size: 17px; color:#fff; border:none;}
.main-top-search .form_inner .submit {position: absolute; top: 0; right: 0; width: 26px; height: 26px;}
.main-top-search .form_inner .submit input[type=submit] {width: 100%; height: 100%; border: none; background-image: url(./../img/all_search.svg); background-position: center; background-repeat: no-repeat; font-size: 0;}

.main-top-quick {background:#F5F5F5; position:relative; border-radius:0px; padding: 50px; display:flex; align-items: center; justify-content: space-between; flex-direction: column; flex:1;}
.main-top-quick:after {content:''; position:absolute; width:100%; height:100%; background:url(./../img/quickMenu_bg.png) no-repeat bottom right; bottom:0; right:2rem;}
.main-top-quick ul {display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; gap: 1rem; width: 100%; height: 100%; z-index:1}
.main-top-quick ul li {width: 100%; background: #fff; padding: 15px 0; border-radius: 20px; position: relative;  overflow: hidden;  z-index: 1;}
.main-top-quick ul li:after {content: ""; position: absolute; top: 0; left: 0;  width: 100%;  height: 100%;  background: var(--primary);  transition: .5s;  z-index: 2; opacity: 0;}
.main-top-quick ul li:hover:after {opacity: 1;}
.main-top-quick ul li a {display:block; text-align: center; padding:0 10px;z-index:3;position:relative;}
.main-top-quick ul li a p {font-size:16px; line-height:1.5; font-weight:400; word-break: keep-all; color:#555;}
.main-top-quick ul li:hover a p {color:#fff}
.main-top-quick ul li a .icoBox {position: relative; display:block; width:60px; height:60px; margin: 0 auto 5px; z-index: 3; transition: .5s;}
.main-top-quick ul li:hover a .icoBox {transform: rotateY(360deg);}
.main-top-quick ul li a .quick00 {background:url(../img/main_q031.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick00 {background-image:url(../img/main_q031w.svg);}
.main-top-quick ul li a .quick01 {background:url(../img/main_q032.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick01 {background-image:url(../img/main_q032w.svg);}
.main-top-quick ul li a .quick02 {background:url(../img/main_q033.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick02 {background-image:url(../img/main_q033w.svg);}
.main-top-quick ul li a .quick03 {background:url(../img/main_q034.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick03 {background-image:url(../img/main_q034w.svg);}
.main-top-quick ul li a .quick04 {background:url(../img/main_q035.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick04 {background-image:url(../img/main_q035w.svg);}
.main-top-quick ul li a .quick05 {background:url(../img/main_q036.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick05 {background-image:url(../img/main_q036w.svg);}
.main-top-quick ul li a .quick06 {background:url(../img/main_q037.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick06 {background-image:url(../img/main_q037w.svg);}
.main-top-quick ul li a .quick07 {background:url(../img/main_q038.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick07 {background-image:url(../img/main_q038w.svg);}
.main-top-quick ul li a .quick08 {background:url(../img/main_q039.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick08 {background-image:url(../img/main_q039w.svg);}
.main-top-quick ul li a .quick09 {background:url(../img/main_q030.svg) no-repeat center;}
.main-top-quick ul li:hover a .quick09 {background-image:url(../img/main_q030w.svg);}

.main-qbtn {display: flex; gap: 17px; flex-shrink: 0;}
.main-qbtn li {flex: 1; height: 225px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-radius: 30px; border:1px solid #ddd; transition: .5s;}
.main-qbtn li a {display:flex; flex-direction: column; align-items: center; text-align: center; line-height:1.2; gap:20px; font-weight:500; font-size:20px;}
.main-qbtn li:hover, .main-qbtn li:active {box-shadow: 0 3px 10px rgba(0, 0, 0, 0.078); transform: translateY(-5px);}

/* 마우스 올렸을 때 (Hover) 스타일 설정 */
.main-qbtn li:hover {background-color: #0066B3;color: #fff;text-decoration: none;}
.main-qbtn li:hover a {color: #fff;text-decoration: none;}

.main-top-qbtn {display: flex; gap: 10px; flex-shrink: 0; height: 90px;}
.main-top-qbtn a {flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-radius: 30px;}
.main-top-qbtn a:nth-child(1) {background:#0066B3;}
.main-top-qbtn a:nth-child(2) {background:#014B83;}
.main-top-qbtn a:nth-child(1):hover {background:#5086de}
.main-top-qbtn a:nth-child(2):hover {background:#5086de}
/* .main-top-qbtn a:nth-child(1):hover {background:#01518d} */
/* .main-top-qbtn a:nth-child(2):hover {background:#003761} */
/* .main-top-qbtn a:nth-child(1):hover {background-color:#fff; color:#0066B3; text-decoration: none;} */
/* .main-top-qbtn a:nth-child(2):hover {background-color:#fff; color:#0066B3; text-decoration: none;} */
.main-top-qbtn a:hover, .main-top-qbtn a:active {box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); transform: translateY(-3px);}
.main-top-qbtn a p {color:#fff; font-size:20px; font-weight:600}

@media(max-width: 1240.98px) {
    .main-top-side {flex-direction: column; margin-top:30px;}
    .main-top-side .main-top-search {width:100%;}
    .main-top-side .main-top-banner {width:100%; grid-row: 2;}
    .main-top-side .main-top-banner img {width: 100%;}
    .main-top-side .main-top-quick {grid-row: 1 / span 2;}
    .main-top-side .main-top-qbtn {grid-column: 1 / span 2;}
}

@media(max-width: 939px) {
    .main-top-quick ul {grid-template-columns: repeat(2, 1fr);}
    .main-top-side .main-top-quick {grid-row: 1 / span 3;}
    .main-top-side .main-top-qbtn {grid-column: 1; height:auto;}
    .main-top-side .main-top-qbtn a {gap: 5px; padding: 20px; flex-wrap: wrap;    align-content: center;}
    .main-top-side .main-top-qbtn a i img {width:35px;}
    .main-top-side .main-top-qbtn a p {font-size:18px;}
    .main-top-search form {width: 78%;}
}
@media(max-width: 859px) {
    .main-top-side {grid-template-columns:1fr 360px;}
}
@media(max-width: 767.98px) {
    .main-top-side {grid-template-columns:1fr;}
    .main-top-side .main-top-quick {grid-row:3;}
    .main-top-search {padding: 15px 25px;  height:auto; }
    .main-top-quick {padding: 30px 20px;}
    .main-top-quick ul li a {padding:10px;}
    .main-top-quick ul li a p {font-size:12px; font-weight: 500;}
}
@media(max-width: 620px) {
  .main-qbtn {flex-direction: column;}
  .main-qbtn li {padding:30px 20px;}
  .main-qbtn li a {flex-direction: row;}
}

/* 공지사항 */
.main-notice {}
.main-notice h3 {display:flex; justify-content: space-between; margin-bottom:15px; font-size:26px;}
.main-notice h3 a img {vertical-align: middle;}
.main-notice li {display:flex; padding:15px 0; border-bottom:1px solid #E0E0E0; font-size:.95rem; align-items: center; justify-content: space-between;}
.main-notice li:last-child {border-bottom:none;}
.main-notice li span {width:100px; font-size : .8rem; color: #aaa; text-align:right}
.main-notice li p {width: calc(100% - 100px); overflow: hidden; display: flex;}
.main-notice li p i {width:65px; font-size:.8rem; color:var(--primary); font-style: normal; margin-right:10px;}
.main-notice li p a {display: block;white-space: nowrap;overflow: hidden; text-overflow: ellipsis; width: calc(100% - 75px); color:#000;}
.main-notice li p a:hover, .main-notice li p a:active {font-weight:500}


/* --------------  popup 팝업   ---------------- */
.main-popup-container {position: fixed; top: 0;left: 0; width: 100%; height: 100%;  z-index: 99999; visibility: hidden;  opacity: 0; pointer-events: none;
  /* 모바일 사용 */}
.main-popup-container.open {visibility: visible; opacity: 1; pointer-events: auto;}

.main-popup-container .main-popup-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}
.main-popup-container .main-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.main-popup-container .main-popup .main-popup-top {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  /* 모바일 사용 */
}
.main-popup-container .main-popup .main-popup-top .swiper {width: 75.5%; overflow: hidden;}
.main-popup-container .main-popup .main-popup-top .main-popup-slider {width:100%;}
.main-popup-container .main-popup .main-popup-top[data-slide-count="1"] .main-popup-indicator {display: none !important;}

.main-popup-container .main-popup .main-popup-top .main-popup-content {aspect-ratio: 6/6; background-color: #ededed;}

.main-popup-container .main-popup .main-popup-bottom {display: flex; align-items: center; justify-content: center; gap: 1.6rem; width: 100%; padding-top: 3rem; position:relative;}
.main-popup-container .main-popup .main-popup-bottom .btn {border:none;}
.main-popup-container .main-popup .main-popup-bottom .btn.mo {display: none;}

.main-popup-container .next-btn {position:absolute;}
.main-popup-container .prev-btn {order: 1;}


@media(min-width: 2350px) {
    .main-popup-container .main-popup .main-popup-top .main-popup-content img {width:100%;}
}

@media screen and (max-width: 600px) {  
  .main-popup-container .main-popup .main-popup-top .sheet-top {
    display: flex;
    border: 0;
  }
  .main-popup-container .main-popup .main-popup-top .main-popup-content {
    max-width: 100%;
    width: 100%;
    height: 75vw;
    max-height: 75vh;
    flex-shrink: 0;
  }
  .main-popup-container .main-popup .main-popup-top .main-popup-content > a {
    width: 100%;
    height: 75vw;
  }
  .main-popup-container .main-popup .main-popup-bottom {
    justify-content: space-between;
    padding: 0 1.6rem;
    height: 5.2rem;
  }
}