/* 오버레이 기본 비활성 상태 */
.dimmed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 활성화 시 */
.dimmed.active {
  opacity: 1;
  pointer-events: auto;
}

/* 팝업 오버레이 */
.popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 팝업 오버레이 활성화 시 */
.popup_overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* common */
.main-tit-logo {
  width: 68px;
  height: 51px;
}

.main_tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-family: "Paperlogy";
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.0092em;
}

.main-tit-small-txt {
  text-transform: uppercase;
  color: var(--Navy-Logo);
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  font-family: "Paperlogy";
}

.main_tit b {
  color: rgb(58, 58, 58, 0.1);
}

.main_tit b .copy {
  color: #3A3A3A;
}

.main_tit b i {
  color: rgb(0, 65, 157, 0.1);
}

.main_tit b .copy i {
  color: var(--Navy-Logo);
}

.main_tit i {
  color: var(--Navy-Logo);
  font-weight: 700;
}

/* 화이트 모드 */
.main_tit.white::before {
  color: #d9e7ed;
}

.main_tit.white {
  color: #fff;
}

.main_tit.white b {
  color: rgb(50, 50, 50, 0.1);
}

.main_tit.white b .copy {
  color: #fff;
}

/* h2 ani css */
.copy_e {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.3em;
}

.copy_e .copy {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.3em;
  /* color: #222; */
  opacity: 0.2;
  overflow: hidden;
  white-space: nowrap;
  transition: width 1s ease-in-out;
}

.copy_e.active .copy {
  width: 100%;
  opacity: 1;
}

.copy_e br {
  display: none;
}

.copy_e .copy br {
  display: none;
}

.split {
  display: inline-block;
  opacity: 1;
}

.split .char {
  display: inline-block;
  opacity: 0;
}


.sub_line {
  display: inline-block;
  background: #C9C9C9;
  width: 1px;
  height: 50px;
  transform: scaleY(0);
  transform-origin: top;
  animation: drawLine2 0.8s ease-out forwards;
  animation-delay: 1s;
}

@keyframes drawLine2 {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.main-tit-bot {
  font-size: 28px;
  color: var(--BK-Logo);
  font-weight: 500;
}


/* main start */
/* 성모SK 인사말 */
.sec1 {
  background: url(../img/main_sec1-bglogo.png) no-repeat;
  background-size: 1136px 851px;
  background-position: left top;
}

.content-wrap,
.navigate-wrap {
  display: flex;
}

.content-wrap .left {
  flex: 1.4;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 25px;
  margin-right: -70px;
  overflow: hidden;
}

.content-wrap .left img {
  border-radius: 25px;
  height: 100%;
  object-fit: cover;
}

.content-wrap .right {
  flex: 1;
  position: relative;
  top: 0;
  right: 0;
  z-index: 2;
  background: var(--Navy-Logo);
  border-radius: 25px;
  padding: 60px 50px;
  color: var(--White);
}

.sec1-swiper-wrap {
  position: relative;
}

.sec1-swiper {
  position: relative;
}

.sec1-swiper-wrap::after {
  content: '';
  display: block;
  width: 145px;
  height: 145px;
  background: url(../img/main_sec1-round_logo.png) no-repeat center;
  background-size: cover;
  position: absolute;
  transition: 300s;
  transform: rotate(10000deg);
  top: -80px;
  right: -80px;
  z-index: 1;
  animation: rotateLogo 30s linear infinite;
}

@keyframes rotateLogo {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.content-wrap .inner-box {
  color: var(--BK-Logo);
  border-radius: 15px;
  background: #FFF;
  padding: 20px 15px;
}

.flex-bar-box {
  display: flex;
  gap: 10px;
  cursor: pointer;
}

.flex-bar-box span {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
}

.flex-bar-box span.on {
  background: #fff;
  transform: scale(1.2);
}

.navigate-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
}

.navigate-wrap .left {
  flex: 1.4;
  margin-right: -70px;
}

.navigate-wrap .right {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  flex: 1;
  padding: 0px 50px 0px 0px;
  z-index: 55;
}

.navigate-wrap .arrow-wrap {
  display: flex;
  gap: 10px;
}

.navigate-wrap .arrow-wrap button {
  all: unset;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.navigate-wrap .arrow-wrap button img {
  height: 16px;
  object-fit: contain;
}

.bounce-word {
  color: var(--Navy-Logo);
  font-weight: 700;
  display: inline-flex;
  gap: 4px;
}

/* 통, 증, 의 → 서로 붙이기 */
.bounce-word .ball:nth-child(1),
.bounce-word .ball:nth-child(2) {
  margin-right: -4px;
  /* gap 상쇄 */
}

.ball {
  display: inline-block;
}

/* 글자 단위 */
.ball {
  position: relative;
  display: inline-block;
  padding-top: 10px;
}

/* 동그라미 */
.ball::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
  animation: softBounce 1.4s cubic-bezier(.34, 1.56, .64, 1);
  animation-iteration-count: 2;
  animation-delay: 1s;
}

/* 부드러운 통통 */
@keyframes softBounce {
  0% {
    transform: translateX(-50%) translateY(0);
  }

  18% {
    transform: translateX(-50%) translateY(-7px);
  }

  35% {
    transform: translateX(-50%) translateY(1px);
  }

  55% {
    transform: translateX(-50%) translateY(-4px);
  }

  72% {
    transform: translateX(-50%) translateY(0.5px);
  }

  100% {
    transform: translateX(-50%) translateY(0);
  }
}

.arrow-prev:hover img {
  animation: softShakeLeftX 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.arrow-next:hover img {
  animation: softShakeRightX 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes softShakeLeftX {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  50% {
    transform: translateX(2px);
  }

  75% {
    transform: translateX(-1px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes softShakeRightX {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(2px);
  }

  50% {
    transform: translateX(-2px);
  }

  75% {
    transform: translateX(1px);
  }

  100% {
    transform: translateX(0);
  }
}

/* sec2 */
.sec2 {
  background: url(../img/main_sec2-bg.png) no-repeat center/cover;
}

.sec2-content-wrap {
  display: flex;
  gap: 25px;
  align-items: stretch;
}

.content-box {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}

.content-box .txt {
  /* padding: 25px; */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content-box .txt-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 25px;
}

.content-box .img {
  position: relative;

}

.content-box .txt ul {
  margin-bottom: auto;
}

.content-box .txt ul li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-box .txt ul li img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  transition: transform 0.4s ease;
  aspect-ratio: 1/1;
}

.hover-plus-wrap {
  position: absolute;
  bottom: 25px;
  right: 25px;
}

.content-box .hover-plus {
  /* align-self: flex-end; */
  /* float: right; */
}

.content-box:hover {
  background: rgba(34, 88, 174, 0.7);
}

.content-box:hover {
  background: rgba(34, 88, 174, 1);
}

/* 텍스트 화이트 */
.content-box:hover .txt,
.content-box:hover .txt h3,
.content-box:hover .txt h4,
.content-box:hover .txt ul li {
  color: #fff;
}

/* 체크 아이콘 화이트화 */
.content-box:hover .txt ul li img {
  filter: brightness(0) invert(1);
}

.content-box .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 88, 174, 0.7);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.content-box .img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size:
    2px 40px,
    40px 2px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 2;

  transform: scale(0.8) rotate(0deg);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.content-box:hover .img::before {
  opacity: 1;
  transform: scale(1) rotate(180deg);
}

.content-box:hover .img::after {
  opacity: 1;
}

.content-box:hover .img::before {
  opacity: 1;
}

.content-box:hover .img img {
  filter: blur(1px);
}

/* 기본 상태 */
.hover-plus svg path {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: transform 0.4s ease;
}

/* 카드 hover 시 십자가 회전 */
.content-box:hover .hover-plus svg path {
  transform: rotate(180deg);
}

/* sec3 */
.sec3 {
  background: url(../img/main_sec3-bg.png) no-repeat center/cover;
}

.con3 {
  position: relative;
  background: #fff;
  display: flex;
}

.s3_left {
  width: 100%;
  background: #083781 url('../img/main_sec3-left-bg.png') no-repeat center / cover;
  position: relative;
  flex: 0.85;
}

.s3_left .s3_arr {
  position: absolute;
  top: 50%;
  right: -70px;
  transform: translateY(-50%);
  width: 140px;
  line-height: 0;
  z-index: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 38px 40px;
  border-radius: 25px;
  z-index: 10;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
}

.s3_left .s3_arr img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.s3_left_inner {
  margin-left: calc(calc(100vw - 1280px) / 2);
}

.s3_left_inner h3 {
  font-size: 25px;
  color: #fff;
  font-weight: 600;
}

.s3_left_inner h3 i {
  color: #C9D6FF;
}

.s3_left_ul li {
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  gap: 30px;
  cursor: pointer;
  line-height: 3;
}

.s3_left_ul li span:before {
  content: '';
  margin-right: 0px;
  transition: .3s;
}

.s3_left_ul li .line {
  width: 5px;
  background: rgba(255, 255, 255, 0.20);
}

.s3_left_ul li.on {
  color: #fff;
  font-weight: 600;
}

.s3_left_ul li.on .line {
  background: #fff;
}

.s3_left_ul li.on span:before {
  content: '·';
  margin-right: 10px;
  transition: .3s;
}

/*  */
.s3_right {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.s3_right::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(to right, #fff, rgba(247, 247, 247, 0));
  pointer-events: none;
}

.s3_right_inner {
  margin-right: calc(calc(100vw - 1280px) / 2);
}

.s3_right_swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
}

.s3_right_swiper .swiper-slide>* {
  width: 100%;
  height: auto;
  max-width: 570px;
}

.s3_img_wrap {
  width: 100%;
  line-height: 0;
  border-radius: 20px;
  overflow: hidden;

}

.s3_img_wrap img {
  transition: transform 0.5s ease;
}

.s3_img_wrap:hover img {
  transform: scale(1.08);
}

.s3_tit {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  color: var(--BK-Logo);
}

.s3_tit span {
  width: 35px;
  height: 35px;
  background: #2258AE;
  border-radius: 50%;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s3_tit span img {
  height: 22px;
  object-fit: contain;
}

.s3_txt {
  color: var(--Navy-Logo);
  font-size: 22px;
  font-weight: 500;
}

.s3_more {
  /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); */
  color: var(--White);
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.s3_more img {
  height: 17px;
  object-fit: contain;
}

.s3-more-inner {
  position: relative;
  overflow: hidden;
  z-index: 2;
  background: var(--Navy-Logo);
  width: 190px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  color: #fff;
  transition: color 0.3s ease;
}

/* 텍스트, 아이콘은 위 */
.s3-more-inner .txt,
.s3-more-inner svg {
  position: relative;
  z-index: 2;
}

/* btn-6 span 역할 */
.s3-more-inner .ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  z-index: 1;
}

.s3-more-inner svg,
.s3-more-inner svg path {
  fill: currentColor;
}

/* hover 시 확장 */
.s3_more:hover .ripple {
  width: 225%;
  height: 430px;
}

.s3_more:hover .s3-more-inner {
  color: var(--Navy-Logo);
}

.s3_more:hover .s3-more-inner .txt {
  font-weight: 700;
}

/* active 느낌 */
.s3_more:active .s3-more-inner {
  transform: scale(0.97);
  font-weight: 800;
}

.s3_left .s3_arr {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

/* 화살표 SVG */
.s3_left .s3_arr svg {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover */
.s3_left .s3_arr:hover {
  transform: translateY(-50%) translateX(6px);
}

.s3_left .s3_arr:hover svg {
  transform: translateX(6px);
}

.s3_left .s3_arr:active {
  transform: translateY(-50%) translateX(2px) scale(0.97);
}

/* 둘러보기 */
.sec4 {
  /* background-attachment: fixed; */
  position: relative;
}

.tour_swiper .swiper-slide {
  width: auto;
  height: auto;
  line-height: 0;
  max-width: 60%;
}

.tour_pagination {
  text-align: center;
  margin-top: 50px;
}

/* 기본 bullet */
.tour_pagination .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
  opacity: 1;
  margin: 0 6px !important;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* 활성 bullet */
.tour_pagination .swiper-pagination-bullet-active {
  background: var(--Navy-Logo);
  transform: scale(1.2);
}

/* sec5 */
.sec5 {
  background: url(../img/main_way-bg.png) no-repeat center/cover;
}

.map_wrap .root_daum_roughmap .cont {
  display: none;
}

.map_wrap .root_daum_roughmap .wrap_controllers {
  display: none;
}

.map_wrap .root_daum_roughmap .wrap_map {
  width: 100%;
  height: 100%;
}

.map_wrap .root_daum_roughmap {
  width: 100%;
  height: 100%;
}

.map_flex {
  display: flex;
  gap: 25px;
}

.map_flex>* {
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
}

.map_txt {
  flex: 1;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.50);
  /* drop-light */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.03);
}

.map_txt_inner {
  padding: 40px;
}

.map_wrap {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
}

.map_tit {
  color: var(--BK-Logo);
  font-size: 30px;
  font-weight: 800;
}

.map_phone {
  color: var(--Navy-Logo);
  font-size: 40px;
  font-weight: 800;
  line-height: 0;
}

.location_txt_ul {
  color: var(--Grey-title-dark);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.location_txt_ul li {
  display: flex;
  align-items: center;
  gap: 30px;
}

.location_txt_ul li:last-child {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.location_txt_ul li strong {
  width: 150px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.location-small {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--Grey-03);
  line-height: 1.3;
}

.location_txt_ul li b {
  font-weight: 800;
}

.map-bot {
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.50);
  /* drop-light */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.03);
  padding: 40px;
  display: flex;
}

.map-bot .location-small .first {
  color: var(--Grey-title-dark);
  line-height: 1.5;
}

.map-bot .location-small .second {
  color: #2258AE;
  line-height: 1.5;
}

.map-bot .location-small .third {
  color: var(--Grey-title-dark);
  font-weight: 700;
}

.map-bot .left,
.map-bot .right {
  flex: 1;
}