/** Layout **/
:root {
  --main-banner1: 19, 80, 149;
  --main-banner2: 19, 80, 149;
  --main-banner3: 19, 80, 149;
  --main-banner4: 175, 175, 175;

  --swiper-pagination-bullet-width: 15px;
  --swiper-pagination-bullet-size: 15px;
  --swiper-pagination-bullet-height: 15px;
  --swiper-navigation-sides-offset:0px;
}


/* Tab */
.border-tit h3 {font-weight:500;margin-bottom:0rem;font-family: 'SBAggroM';}
.border-tit i {font-size:1.6rem;}
.border-tit {border-bottom:0px solid #bbb;padding-bottom:0px;margin-bottom:10px;}
.board-box .nav-tabs {
  border-bottom: 0px solid #dee2e6;
}

.board-box .nav-tabs .nav-link {
  border:1px solid #0b328c;
  border-right:0;
  /*border-radius:6px;*/
  color: #0b328c;
  font-weight: 500;
  /*margin-right:6px;*/
  font-size:1rem;
  padding:6px 14px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.board-box .nav-tabs .nav-item:last-child .nav-link { border-right:1px solid #0b328c;}



.board-box .nav-tabs .nav-link.active {
  color:#fff;
  font-weight: 700;
  background: var(--bs-primary);
}

.board-box .tab-content {
  padding-top: 1.5rem;
}



/* 공지사항 및 교육신청 */
.main-boards {
  padding-top: 80px;
}

.board-box {
  background: #fff;
  padding: 0rem;
  /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);*/
}

.notice-list {
  list-style: none;
  padding-left: 0;
}
.notice-list li {
  margin-bottom: 0.75rem;
}

.notice-list a {
  color: #222;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-list a:hover .title {
  color: var(--bs-primary);
}

.notice-list .title {
  font-size:1rem;font-weight:400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}
.notice-list .date {
  font-size: 0.875rem;
  color: #6c757d;
  flex-shrink: 0;
}



.training-carousel {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.training-carousel .swiper-slide {
  background: #f8f9fa;
  padding:30px;
  border-radius: 0.5rem;border:1px dotted #bbb;
}

.training-carousel .title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.training-carousel .info {
  font-size: 0.875rem;
  color: #666;
}

/* 교육신청 캐러셀 네비게이션 버튼 스타일 추가 */
.training-carousel {
  overflow: hidden;
  /* 이전과 동일 */
  position: relative;
  /* 버튼 배치를 위해 */
  margin-bottom: 20px;
  /* 버튼 공간 확보 */
}

.training-carousel .swiper-button-prev,
.training-carousel .swiper-button-next {
  color: var(--bs-primary);
  /* 버튼 색상 */
  width: 30px;
  /* 버튼 크기 */
  height: 30px;
  /* 버튼 크기 */
  margin-top: -15px;
  /* 세로 중앙 정렬 */
}

.training-carousel .swiper-button-prev::after,
.training-carousel .swiper-button-next::after {
  font-size: 1.2rem;
  /* 아이콘 크기 */
}

.training-carousel .swiper-button-prev {
  left: 0px;
}

/* 왼쪽에서 살짝 안으로 */
.training-carousel .swiper-button-next {
  right: 0px;
}

/* 오른쪽에서 살짝 안으로 */

.training-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.training-controls .btn {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #444;
  padding: 0.25rem 0.5rem;
}

.training-controls .btn:hover {
  background-color: #f8f9fa;
  color: var(--bs-primary);
}


/* main visual */
.hero-section {
  position: relative;
  width: 100%;
  height: calc(100vh - 95px);
  overflow: hidden;
  color: #fff;
}

.hero-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-slide {
  overflow: hidden;
}

.hero-swiper .slide-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}


  /* overlay */
  .hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding:200px 0 80px 0
  }

  .hero-slogan {
    max-width: 500px;
  }

  .hero-slogan h1 {
    font-family: 'SBAggroM';
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.25;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0px;
  }

  .hero-slogan p {
    font-size: 1.35rem;
    font-weight: 500;
    opacity: 0.9;
  }



  /* 바로가기 버튼 */
/*
  .hero-shortcuts .btn {
    display: block;
    width: 100%;
    background: rgba(11, 50, 140, 0.59);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 50, 140, 0.2);
    color: #fff;
    text-align: left;
    padding: 1rem 1.5rem;
    margin-bottom: 30px;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    transition: all 0.2s;
    text-align: center;
  }
  .hero-shortcuts .btn.qu-04 {
    background: rgba(23, 162, 184, 0.59);
    border: 1px solid rgba(23, 162, 184, 0.2);
  }

  .hero-shortcuts .btn i {
    display: block;
    font-size: 5rem;
  }

  .hero-shortcuts .btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-6px);
  }

  .hero-shortcuts .btn img {
    max-height: 80px
  }

  .hero-shortcuts .btn .tit {
    margin-top: 10px;
  }


  .hero-shortcuts .btn.qu-01:hover {
    background: var(--zd-mc);
  }

  .hero-shortcuts .btn.qu-02:hover {
    background: var(--zd-mc);
  }

  .hero-shortcuts .btn.qu-03:hover {
    background: var(--zd-mc);
  }

  .hero-shortcuts .btn.qu-04:hover {
    background: var(--zd-mc2);
  }

  .hero-shortcuts .btn i {
    margin-right:0rem;
    opacity: 0.8;
  }

@media (max-width: 1998.98px) {
  .hero-section {height:auto !important;}
  .hero-section {padding:50px 60px 30px;}
  .hero-slogan h1 {font-size: 2.25rem;}
  .hero-shortcuts .btn {font-size: 1.125rem;}
}
@media (max-width: 991.98px) {
  .hero-section {padding:50px 60px 30px;}
  .hero-slogan h1 {font-size: 2rem;}
  .hero-content {padding:20px 0}
}
@media (max-width: 767.98px) {
  .hero-section {padding:50px 40px 20px;}
  .hero-slogan h1 {font-size: 1.75rem;}
  .hero-slogan h1 br {display:none}
  .hero-slogan p {font-size: 1.25rem;}

}
@media (max-width: 567.98px) {
  .hero-section {padding:50px 30px 40px;}
  .hero-content {padding:0px 0}
  .hero-slogan h1 br {display:none}
  .hero-shortcuts .btn {margin-bottom:10px}
}

*/

.main-banner .col-lg-6 { padding-left:0; padding-right:0; }

.main-banner-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.main-banner-wrap:first-child { margin-bottom:10px; }

.hero-shortcuts {
  flex: 1 1 auto;       /* allows flexible growth/shrink */
}

.hero-shortcuts .desc { font-size:0.75em; font-weight:400; margin-top:10px;height: 40px;}
.hero-shortcuts .banner-btn.qu-01 { background-color:rgba(var(--main-banner1), 1); }
.hero-shortcuts .banner-btn.qu-02 { background-color:rgba(var(--main-banner2), 1); }
.hero-shortcuts .banner-btn.qu-03 { background-color:rgba(var(--main-banner3), 1); }
.hero-shortcuts .banner-btn.qu-04 { background-color:rgba(var(--main-banner4), 1); }

/* 바로가기 버튼 */
.hero-shortcuts .banner-btn {
  display: block;
  width: 100%;
  border-radius: 0.3rem;
  transition: all 0.2s;
  padding:0;
}
.hero-shortcuts .banner-btn .text-box {
  color: #fff;
  padding: 1rem 1.5rem 1rem 1.5rem ;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
}

.hero-shortcuts .banner-btn .image { position:relative; overflow:hidden;   border-top-left-radius: 0.3rem 0.3rem;
  border-top-right-radius: 0.3rem 0.3rem;
  background-color:#fff;
  padding:20px 0;
  text-align:center;
}
.hero-shortcuts .banner-btn .imagexx:after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:60%;
  margin: 0;
  background: linear-gradient(to top, #aaa, transparent);
  z-index:1;
}

@media (min-width: 990px) and (max-width: 1200px) {
  .hero-shortcuts .banner-btn .text-box { padding:1rem 1rem; }
}


.hero-shortcuts .banner-btn.qu-01:hover {
  background-color:rgba(var(--main-banner1), 1);
}
.hero-shortcuts .banner-btn.qu-02:hover {
  background-color:rgba(var(--main-banner2), 1);
}
.hero-shortcuts .banner-btn.qu-03:hover {
  background-color:rgba(var(--main-banner3), 1);
}
.hero-shortcuts .banner-btn.qu-04:hover {
  background-color:rgba(var(--main-banner4), 1);
}

.hero-shortcuts .banner-btn .image img {
  max-height: 80px;
  z-index:2;
  /*width:100%;*/
  border-top-left-radius: 0.3rem 0.3rem;
  border-top-right-radius: 0.3rem 0.3rem;
  transition: transform 0.6s ease; /* Smooth animation */
  /*max-height: 80px*/
}

.hero-shortcuts .banner-btn:hover .image img {
  transform: scale(1.1);
}

.hero-shortcuts .banner-btn .tit {
  /*margin-top: 10px;*/
}

.hero-shortcuts .banner-btn i {
  display: block;
  font-size: 5rem;
  margin-right:0rem;
  opacity: 0.8;
}

@media (max-width: 1998.98px) {
  .hero-section {height:auto !important;}
  .hero-section {padding:50px 60px 30px;}
  .hero-slogan h1 {font-size: 2.25rem;}
  .hero-shortcuts .banner-btn .text-box {font-size: 1rem;}
}
@media (max-width: 991.98px) {
  .hero-section {padding:50px 60px 30px;}
  .hero-slogan h1 {font-size: 2rem;}
  .hero-content {padding:20px 0}
}
@media (max-width: 767.98px) {
  .hero-section {padding:50px 40px 20px;}
  .hero-slogan h1 {font-size: 1.75rem;}
  .hero-slogan h1 br {display:none}
  .hero-slogan p {font-size: 1.25rem;}

}
@media (max-width: 567.98px) {
  .hero-section {padding:50px 20px 40px;}
  .hero-content {padding:0px 0}
  .hero-slogan h1 br {display:none}
}

.row.main-map { margin-top: 30px; }
@media (max-width: 991.98px) {
  .main-map .col-xl-9:first-child { margin-bottom:20px; }
}

@media (max-height:700px) {
  .hero-section {height:auto !important;/*color:red*/}
  .hero-content {padding:80px 0}
}


.train-wrap {
  background: var(--zd-mc);
  border-radius:5px;
  /*padding: 20px; */
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}

.main-training {
  --swiper-pagination-bottom:0;
}
.main-training .swiper-wrapper{
  padding-bottom: 30px;
}

.main-training a { display:block; color:#fff; padding:10px; background-color:rgba(255, 255, 255, 0.3); border-radius:5px;}
.main-training a:hover {
  background-color:rgba(255, 255, 255, 0.2);
  color:#fff
}
.main-training a .title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.main-training a .summary { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255, 255, 255, 0.1); font-weight:400; font-size:0.9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-training { text-align:center;  color:#fff; padding:10px; background-color:rgba(255, 255, 255, 0.1); border-radius:5px;}


.page-main .training-calendar { padding:20px 10px; }
.page-main .training-calendar .monthtxt { font-size:2em; display:flex; justify-content: center !important; gap:15px; }
.page-main .training-calendar .monthtxt a { color:#fff; }
.page-main .table-training { width:100%; }
.page-main .table-training th { padding:10px; text-align:center; }
.page-main .table-training td { padding:5px; text-align:center; }
.page-main .table-training td div { width:25px; height:25px; text-align:center;}
.page-main .table-training td div.active { background-color:rgba(255, 255, 255, 0.5); border-radius:50%; color:#000;}

@media (min-width: 990px) and (max-width: 1400px) {
  .page-main .training-calendar .monthtxt { font-size:1.6em; }
  .page-main .table-training th { padding:8px; }
  .page-main .table-training td { padding:2px; }
  .page-main .table-training td div { width:23px; height:23px; }
}

.train-wrap { display:flex; gap:0px; }
@media (max-width: 991.98px) {
  .page-main .train-wrap {margin-top:30px; }
}

@media (max-width: 567.98px) {
  .page-main .train-wrap { display:block;}
  .page-main .table-training td div { margin:0 auto; }
}

.train-wrap .training-calendar {
  flex-basis: 35%; /* Sets the initial size of this column to 40% */
  flex-grow: 1; /* Allows this column to grow if extra space is available */
}

.train-wrap .training-list {
  flex-basis: 65%; /* Sets the initial size of this column to 40% */
  flex-grow: 1; /* Allows this column to grow if extra space is available */
}

.training-list { padding:20px 10px; background-color:rgba(255, 255, 255, 0.1); }
.training-list h3 { text-align:center; font-weight:400; font-family: 'SBAggroM';}
.training-list ul { margin:0; padding:0; max-height:210px; overflow:auto;}
.training-list ul li { list-style:none; padding:10px 0; border-bottom:1px solid rgba(255, 255, 255, 0.1); }
.training-list ul li:first-child { padding-top:0; }
.training-list ul li:last-child { border-bottom:none; padding-bottom:0; }
.training-list ul li a { display:block; color:#fff; }
.training-list ul li a .monthday { font-size:0.9em; display:inline-block; background-color:rgba(0, 0, 0, 0.2); padding:2px 5px; border-radius:10px; margin-right:10px;}
.training-list ul li a .lab { color:var(--bs-warning); }
@media (max-width: 567.98px) {
  .training-list ul {max-height:none; overflow:visible;}
}




.swiper-wrapper.equipment-wrap { padding-bottom:60px; }


.section-equipment { margin-top:50px; background-color:#eee; padding:30px; }
.section-map { margin:50px 0px; }

.main-equipment .main-srch {
  text-align: center;
}

.main-equipment .main-srch input::placeholder {
font-size: 0.9em;
color: gray;
}

.main-equipment .main-srch .box {
  position: relative;
  margin: 0 auto 20px;
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 50px;
}

.main-equipment .main-srch .box input[type="text"] {
  margin: 0;
  padding: 0 100px 0 50px;
  width: 100%;
  height: 100%;
  font-size: 1em;
  background: transparent;
  border: none;
  box-sizing: border-box;
}

.main-equipment .main-srch .box .btn-srch {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  width: 100px;
  height: 100%;
  text-indent: -9999px;
  border: none;
  background: transparent url('/_skin/kor/images/site/icon_search.svg') no-repeat center / 29px auto;
}




  /* quick menu */
  .quick-menu {
    position: fixed;
    top: 50%;
    right: 10px ;
    transform: translateY(-50%);
    z-index: 1035;
    display: flex;
    align-items: center;
  }

  .quick-menu-trigger {
    background: #0B328C;
    background: linear-gradient(90deg, rgba(11, 50, 140, 1) 0%, rgba(0, 146, 219, 1) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s;
/*    writing-mode: vertical-rl;*/
    padding:10px;text-align:center
    cursor: pointer;
    width:100px;
    height:100px;
    border-radius:50%;
    font-family: 'SBAggroM';font-size:1.25rem !important;line-height:1.2;
  }

  .quick-menu-trigger:hover {
    color: #ffd200;
  }


  .quick-menu-panel {
    background-color: #fff;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.4s ease;
    border-radius:20px;margin-left:4px;
    font-size:1rem;letter-spacing:-0.03em;font-weight:700;
  }

  .quick-menu.active .quick-menu-panel {
    max-width: 300px;
  }

  .quick-menu-panel .list-group-item {
    border: none;
    padding: 0.75rem 1.25rem;
  }

  .quick-menu-panel .list-group-item i {
    margin-right: 0.5rem;
    color: var(--bs-primary);
  }

@media (max-width: 567.98px) {
  .quick-menu {display:none}
}





.mf-link {background:rgba(255,255,255,0);position:absolute;bottom:10px;left:calc(50% - 50px);width:100px;height:100px;border-radius:50%;text-align:center;color:#fff !important;font-size:2.5rem;}
.mf-link span {padding:3px 0 0;display:inline-block}
.mf-link a {color:rgba(255,255,255,0.8) !important;}
.mf-link a:hover {color:rgba(255,255,255,1) !important;}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
.blinking-icon {
  animation: blink 1s step-end infinite;
}

@keyframes fade-in-down-out {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* 애니메이션을 적용할 클래스 */
.animate-fade-down {
  animation-name: fade-in-down-out;
  animation-duration: 1.5s; /* 전체 애니메이션 시간 (2.5초) */
  animation-timing-function: ease-in-out; /* 부드러운 움직임 */
  animation-iteration-count: infinite; /* 무한 반복 */
}
.animate-fade-down:hover {
  animation-play-state: paused;
}

@media (max-width: 567.98px) {
  .mf-link {display:none}
}


.mlink-card {
  border:0px solid #ddd;
  border-radius: 8px;
  background:#eceff6;color:#222;
  margin-bottom:15px;
}
.mlink-card:last-child { margin-bottom:0; }
.mlink-card:hover {background:var(--bs-primary);}
.mlink-card a:hover {color:#fff;}
.mlink-card .card-body {padding:32px 24px;line-height:1;font-size:1.25rem;}
.mlink-card h5 {font-size:1.125rem;margin-bottom:0;}
.mlink-card i {font-size:1.5rem;}




/* 메인 */

.swiper-slide .hero-content { position:absolute; width:100%; height:auto; left:0; top:55%; z-index:10; padding:0;transform: translateY(-50%);}
.hero-section::after { display:none; }
.hero-swiper .slide-bg::after {
  display:block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1;
}
.swiper-slide .hero-content .hero-slogan p { margin-bottom:0; margin-top: .5rem !important;}

@media (max-width: 991.98px) {
  .swiper-slide .hero-content {top:0;;transform: translateY(120px); padding-top:40px;}
  .swiper-slide .hero-content .hero-slogan br { display:none; }
  .swiper-slide .hero-content .hero-slogan {
    max-width: 100%;
    text-align:center;
  }
  .container.hero-content {
    padding: 250px 0 0 0;
  }
}

#popupModal .modal-footer { position:relative; }
#popupModal .carousel-indicators [data-bs-target] { background-color:var(--bs-primary); width:10px; height:10px; margin-top:0px; border-radius:50%;border-top: 0;  border-bottom: 0;}
#popupModal .carousel-indicators {position: relative; right: auto; bottom: auto; left: auto; z-index: 2; margin-right: 10px; margin-bottom: 0; margin-left: 10px; align-items: center !important; }
#popupModal .carousel-control-next,
#popupModal .carousel-control-prev { border-radius:50%; position:relative; }
#popupModal .carousel-control-next:hover,
#popupModal .carousel-control-prev:hover { color: #000; opacity: .4; }
#popupModal .carousel-control-next-icon,
#popupModal .carousel-control-prev-icon { background-size:50%; filter: invert(1) grayscale(100); }
#popupModal .carousel-control-next, #popupModal .carousel-control-prev { width: 30px; height: 30px; }
#popupModal .popup-modal h3.poptitle { text-align:center; margin-top:0; margin-bottom:20px; padding:5px; font-size:25px; color: var(--bs-primary); font-family: 'Nanum Myeongjo', serif;}
#popupModal .popup-modal .carousel-control-next, #popupModal .carousel-control-prev { width: auto; }
#popupModal .carousel-control-prev:hover, #popupModal .carousel-control-next:hover { background-color:rgba(0, 0, 0, .2); }
#popupModal .modal-title img { height:40px; }

#popupModal .modal-body { padding:0; }
#popupModal .modal-header { border-bottom:0 !important; }
#popupModal .carousel-item.extraspace {padding: var(--bs-modal-padding);}


.renewalalert { background-color:#373d49; padding:0 50px 20px 50px;  }
.renewalalert .header { border-left:3px solid #ff6616; padding-left:20px; padding-top:50px; margin-bottom:30px; color:#fff; }
.renewalalert .header h6 { font-size:1.2em; font-weight:400; margin-bottom:10px;}
.renewalalert .header h2 { font-size:3.5em; margin-bottom:0; line-height:1; }
.renewalalert .itembox {  }
.renewalalert .itembox .item { padding:30px 60px; font-size:1.7em; font-weight:600; background-color:#ff6616; margin-bottom:20px; color:#fff; border-radius:20px;}
.renewalalert .itembox .item ul { margin-bottom:0; }
.renewalalert .itembox .item ul li { font-size:0.6em; font-weight:400; }
.renewalalert .itembox .bottom-text { text-align:center; color:#fff; }

@media (max-width: 991.98px) {
  .renewalalert { background-color:#373d49; padding:0 20px 20px 20px;  }
  .renewalalert .itembox .item { padding:30px 20px;}
}