/* 전체 적용 */

html {
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
  margin: 0 auto;
  font-family: 'Pretendard', sans-serif;
}
li {
  list-style: none;
}
body {
  background-color: #fff !important;
}
#wrap {

}
.img-fluid {
  display: flex;
  width: 100%;
}
.section {
  position: relative;
}
.modal {
  z-index: 5;
}
/* ===== 이미지 밑에서 위로 슬라이드 페이드 효과 ===== */
.fade-up-init {
  opacity: 0;
  transform: translateY(150px); /* 살짝 더 아래 */
  transition: all 1.5s ease;
}
.fade-up-show {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------ DB팝업 ----------------------- */

.popup-wrap {
  display: none;
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
  text-align: center;
}
.popup-box {
  background: white;
  width: 90%;
  height: 32vw;
  max-width: 24%;
  padding: 3% 1.5% 1.5% 1.5%;
  margin: 100px auto;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.popup-box h2 {
  font-size: 2.5vw;
  color: #0044CE;
  font-weight: 700;
  letter-spacing: -2px;
}
.popup-box span {
  font-size: 1.6vw;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1.8vw;
}
.close-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 0%;
  left: 100%;
  background: none;
  border: none;
  font-size: 1.2vw;
  cursor: pointer;
  width: 10%;
  color: #fff;
  height: 7%;
  background-color: #0044CE;
  border-radius: 100%;
  line-height: 1vw;
}
.close-btn:hover {
  background-color: #002e8a;
}
.popup-bg {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: 1px solid red; */
}
.popup-bg input {
  width: 100%;
  height: 22%;
  font-size: 1.3vw;
  padding-left: 3%;
  border: 0.1vw solid gray;
  outline-color: #00389C;
  border-radius: 0.25vw;
}
.chk {
  font-size: 1vw;
  text-align: center;
}
.chk label input {
  width: 1vw;
  height: 0.7vw;
}
.chk span {
  font-size: 1vw;
}
.chk label {
  cursor: pointer;
}
.chk span {
  cursor: pointer;
  font-weight: bold;
}
.popup-bg button {
  width: 100%;
  height: 22%;
  background-color: #0044CE;
  border: none;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 500;
}
.popup-bg button:hover {
  background-color: #002e8a;
}
.winaid {
  color: #afafaf;
  margin-top: 3%;
  font-size: 0.8vw;
}
/* --------------------- 플로팅 라벨 --------------------- */

.pc-floating {
  position: fixed;
  z-index: 2;
  display: flex;
  flex-direction: column;
  top: 12vw;
  right: 1vw;
  gap: 0.5vw;
  transform: translateX(150%);
  transition: transform 0.8s ease, opacity 0.8s ease;
  opacity: 0;
}
.pc-floating.show {
  transform: translateX(0);
  opacity: 1;
}
.pc-floating img {
  width: 5vw;
  max-width: 90px;
  height: auto;
  max-height: 90px;
  cursor: pointer;
}
.hover-swap.blog:hover img {
  content: url('../images/pc/0. 블로그 hover.png');
}
.hover-swap.reserve:hover img {
  content: url('../images/pc/0. 예약 hover.png');
}
.hover-swap.place:hover img {
  content: url('../images/pc/0. 플레이스 hover.png');
}
.hover-swap.telbtn:hover img {
  content: url('../images/pc/0. 전화문의 hover.png');
}
/* --------------------- 섹션 01 --------------------- */

.menu-bar {
  /* position: absolute; */
  position: fixed;
  transform: translate(-50%, -50%);
  top: 4vw;
  left: 50%;
  width: 85%;
  height: 4.5vw;
  /* border: 1px solid red; */
  background: #fff;
  border-radius: 50px;
  z-index: 2;
}
.logo {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 8%;
  width: 10%;
  /* border: 1px solid red; */
}
.logo img {
  width: 100%;
  cursor: pointer;
}
.menu {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 80%;
  /* border: 1px solid red; */
  width: 33%;
  font-size: 1.2vw;
  font-weight: 500;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #265ac0;
}
.menu span {
  cursor: pointer;
  letter-spacing: -1px;
}
.menu span:hover {
  color: #133986;
}
/* 모바일 버전 */

.mo-sec01 {
  display: none;
}

.mo-menu-bar {
  /* position: absolute; */
  position: fixed;
  transform: translate(-50%, -50%);
  top: 6vw;
  left: 50%;
  width: 85%;
  height: 7vw;
  /* border: 1px solid red; */
  background: #fff;
  border-radius: 50px;
  z-index: 2;
}
.mo-logo {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 13%;
  width: 15%;
  /* border: 1px solid red; */
}
.mo-logo img {
  width: 100%;
  cursor: pointer;
}
.menu-drop {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 93%;
  background: none;
  border: none;
  font-size: 4vw;
  display: flex;
}
.offcanvas {
  width: 30% !important;
  /* border: 1px solid red; */
  display: flex;
  background-color: #081735ea !important;
  color: #fff !important;
}
.offcanvas-body {
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 3.5vw;
  width: 100%;
  position: relative;
  /* border: 1px solid red; */
}
.mo-click {
  display: flex;
  flex-direction: column;
  gap: 1vw; /* 항목 간 간격을 비율로 */
  padding: 6vw 2vw; /* 전체 안쪽 여백 */
  text-align: left;
}
.mo-click p {
  width: 100%;
  font-size: 3vw; /* 글자 크기도 반응형 */
}
.mo-click p:hover {
  color: rgb(187, 187, 187)
}
/* --------------------- 섹션 02 --------------------- */

.sec2-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 22%;
  left: 50%;
  width: 70%;
  height: 20%;
  display: flex;
  flex-direction: column;
}
.sec2-word-1f {
  font-size: 3vw;
  font-weight: 700;
  color: #396edc;
  letter-spacing: -1px;
}
.sec2-word-1f span {
  color: #0c3282;
}
.sec2-word-2f {
  text-align: center;
  margin-top: 1.5%;
  font-size: 1.5vw;
  line-height: 1.9vw;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.sec2-word-2f span {
  color: #0c3282;
  font-weight: 800;
}
.sec2-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 60%;
  left: 50%;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.sec2-img img {
  width: 36%;
  margin: -2.7%;
}

/* .fade-init {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-show {
  opacity: 1;
} */
/* 모바일 */

.mo-sec2-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 22%;
  left: 50%;
  width: 100%;
  /* height: 20%; */
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
}
.mo-sec2-word-1f {
  font-size: 7.3vw;
  font-weight: 700;
  color: #396edc;
  letter-spacing: -1px;
}
.mo-sec2-word-1f span {
  color: #0c3282;
}
.mo-sec2-word-2f {
  text-align: center;
  margin-top: 5%;
  font-size: 4vw;
  line-height: 5.5vw;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.mo-sec2-word-2f span {
  color: #0c3282;
  font-weight: 800;
}
.mo-sec2-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 66%;
  left: 50%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.mo-sec2-img img {
  width: 55%;
  margin: -5%;
}



/* 모바일 */
.mo-sec02 {
  display: none;
}

/* --------------------- 섹션 03 --------------------- */

.sec3-word-left {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 57%;
  left: 25%;
  width: 30%;
  height: 80%;
  /* border: 1px solid red; */
  color: #fff;
}
.sec3-word-right {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 55%;
  left: 75.7%;
  width: 24%;
  color: #fff;
  /* border: 1px solid red; */
}

.sec3-word-left-1f {
  font-size: 2vw;
  letter-spacing: -0.5px;
  line-height: 2.6vw;
}
.sec3-word-left-1f span {
  font-weight: 700;
}
.sec3-word-left-2f {
  font-size: 1.2vw;
  margin-top: 9%;
  font-weight: 200;
  letter-spacing: -0.2px;
}

/* 모바일 */

.mo-sec03 {
  display: none;
}
.mo-sec3-word-left {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 28%;
  left: 50%;
  width: 82%;
  /* border: 1px solid red; */
  color: #fff;
}
.mo-sec3-word-left-1f {
  font-size: 6.8vw;
  letter-spacing: -0.5px;
  line-height: 8.5vw;
}
.mo-sec3-word-left-1f span {
  font-weight: 700;
}
.mo-sec3-word-left-2f {
  font-size: 3.35vw;
  margin-top: 7%;
  font-weight: 200;
  letter-spacing: -0.2px;
}
.mo-sec3-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 61.75%;
  left: 34.5%;
  /* border: 1px solid red; */
  width: 45%;
}
.mo-sec3-img img {
  width: 100%;
}
/* --------------------- 섹션 04 --------------------- */

.sec4-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 19%;
  left: 50%;
  width: 45%;
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
}
.sec4-word-1f {
  font-size: 3vw;
  color: #00399f;
  font-weight: 700;
}
.sec4-word-2f {
  margin-top: 2%;
  font-size: 1.9vw;
  font-weight: 700;
}
.sec4-word-2f span {
  color: #0c3180;
}
.sec4-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 59%;
  left: 50%;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  /* border: 1px solid red; */
}
.sec4-img img {
  width: 45%;
  margin: 1%;
}

.sec4-img-word1 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 46.5%;
  left: 28.5%;
  width: 25%;
  height: 15%;
  /* border: 1px solid red; */
}
.sec4-img-word2 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 46.5%;
  left: 66%;
  width: 25%;
  height: 15%;
  /* border: 1px solid red; */
}
.sec4-img-word3 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 75.3%;
  left: 28.5%;
  width: 25%;
  height: 15%;
  /* border: 1px solid red; */
}
.sec4-img-word4 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 75.3%;
  left: 66%;
  width: 25%;
  height: 15%;
  /* border: 1px solid red; */
}
.sec4-img-word-1f {
  color: #00399f;
  font-weight: 700;
  font-size: 2vw;
  letter-spacing: -0.5px;
}
.sec4-img-word-2f {
  margin-top: 4%;
  font-size: 1.3vw;
  font-weight: 600;
  line-height: 1.7vw;
  letter-spacing: -0.5px;
}

/* 모바일 */

.mo-sec04 {
  display: none;
}
.mo-sec4-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 11%;
  left: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
}
.mo-sec4-word-1f {
  font-size: 8vw;
  color: #00399f;
  font-weight: 700;
}
.mo-sec4-word-2f {
  margin-top: 2%;
  font-size: 4.5vw;
  font-weight: 700;
  text-align: center;
  line-height: 6vw;
}
.mo-sec4-word-2f span {
  color: #0c3180;
}
.mo-sec4-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 56%;
  left: 50%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.mo-sec4-img img {
  width: 88%;
  margin: 1.5%;
}
.mo-sec4-img-word1 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 29%;
  left: 41.5%;
  width: 55%;
  /* height: 15%; */
  /* border: 1px solid red; */
}
.mo-sec4-img-word2 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 49.9%;
  left: 41.5%;
  width: 55%;
  height: 15%;
  /* border: 1px solid red; */
}
.mo-sec4-img-word3 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 67%;
  left: 41.5%;
  width: 55%;
  height: 15%;
  /* border: 1px solid red; */
}
.mo-sec4-img-word4 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 86.3%;
  left: 41.5%;
  width: 55%;
  height: 15%;
  /* border: 1px solid red; */
}
.mo-sec4-img-word-1f {
  color: #00399f;
  font-weight: 700;
  font-size: 5.5vw;
  letter-spacing: -0.5px;
}
.mo-sec4-img-word-2f {
  margin-top: 4%;
  font-size: 3.7vw;
  font-weight: 600;
  /* line-height: 1.7vw; */
  letter-spacing: -0.5px;
}

/* --------------------- 섹션 05 --------------------- */

.sec5-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 58%;
  left: 27%;
  width: 24%;
}
.sec5-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 70%;
  width: 50%;
  height: 52.5%;
  /* border: 1px solid red; */
}
.sec5-word-1f {
  color: #12274c;
  font-size: 1.3vw;
  font-weight: 500;
}
.sec5-word-2f {
  color: #0e1e40;
  font-size: 1.75vw;
  font-weight: 800;
}
.sec5-word-3f {
  margin-top: 2%;
  color: #12274c;
  font-size: 1vw;
  line-height: 1.4vw;
}

/* 모바일 */

.mo-sec05 {
  display: none;
}
.mo-sec5-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 29.5%;
  left: 50%;
  width: 100%;
  /* border: 1px solid red; */
  text-align: center;
}
.mo-sec5-word-1f {
  color: #12274c;
  font-size: 3.6vw;
  font-weight: 500;
}
.mo-sec5-word-2f {
  color: #0e1e40;
  font-size: 6.1vw;
  font-weight: 800;
}
.mo-sec5-word-3f {
  margin-top: 5%;
  color: #12274c;
  font-size: 3.6vw;
  line-height: 5vw;
}
.mo-sec5-img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 73%;
  left: 50%;
  /* border: 1px solid red; */
  width: 50%;
}
.mo-sec5-img img {
  width: 100%;
}





/* --------------------- 섹션 06 --------------------- */

.pc-sec06 {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.pc-sec06 img {
  width: 50%;
}
.slide-init {
  opacity: 0;
  transform: translateX(0);
  transition: all 1s ease;
}
.img-left-slide {
  transform: translateX(-100px);
}
.img-right-slide {
  transform: translateX(100px);
}
.slide-show {
  opacity: 1;
  transform: translateX(0);
}
/* .sec6-word-left {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 55%;
  left: 25%;
  width: 50%;
  height: 83%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  letter-spacing: -0.5px;
}
.sec6-word-right {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 75%;
  width: 50%;
  height: 100%;
  letter-spacing: -0.5px;
}
.sec6-word-left-1f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 8%;
  left: 50%;
  color: #b2cbff;
  font-size: 2.7vw;
  font-weight: 600;
}
.sec6-word-left-2f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 22.5%;
  left: 50%;
  font-weight: 600;
  font-size: 1.7vw;
}
.sec6-word-left-3f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 33%;
  left: 50%;
  width: 64%;
  text-align: center;
  font-size: 1.2vw;
  font-weight: 700;
  color: #00226a;
  background: #e4edfc;
}
.sec6-word-left-4f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 44%;
  left: 50%;
  font-size: 1.2vw;
  margin-top: -2.5%;
}
.sec6-word-left-5f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 75%;
  left: 50%;
  width: 27%;
}
.sec6-word-left-5f img {
  width: 100%;
}
.sec6-word-right-1f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 20%;
  left: 50%;
  color: #b2cbff;
  font-size: 2.7vw;
  font-weight: 600;
}
.sec6-word-right-2f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 32%;
  left: 50%;
  font-weight: 600;
  font-size: 1.7vw;
  color: #fff;
}
.sec6-word-right-3f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 41%;
  left: 50%;
  width: 66%;
  text-align: center;
  font-size: 1.2vw;
  font-weight: 700;
  color: #fff;
}
.sec6-word-right-4f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 49%;
  left: 50%;
  font-size: 1.2vw;
  margin-top: -2.4%;
  color: #fff;
  width: 100%;
  text-align: center;
}
.sec6-word-right-4f span {
  background: #e4edfc;
  color: #00226a;
  font-weight: 700;
  padding-left: 1%;
  padding-right: 1%;
  font-size: 1.2vw;
} */

/* 모바일 */
.mo-sec06 {
  display: none;
}
.mo-sec6-word-left {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 50%;
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  letter-spacing: -0.5px;
}
.mo-sec6-word-right {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 75%;
  left: 50%;
  width: 100%;
  height: 50%;
  letter-spacing: -0.5px;
}
.mo-sec6-word-left-1f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 15%;
  left: 50%;
  color: #b2cbff;
  font-size: 8vw;
  font-weight: 600;
}
.mo-sec6-word-left-2f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  font-weight: 600;
  font-size: 6vw;
  width: 100%;
  text-align: center;
}
.mo-sec6-word-left-3f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;
  width: 60%;
  text-align: center;
  font-size: 4.4vw;
  font-weight: 800;
  color: #00226a;
  background: #e4edfc;
  line-height: 6vw;
}
.mo-sec6-word-left-4f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 45.5%;
  left: 50%;
  width: 64%;
  text-align: center;
  font-size: 4.4vw;
  line-height: 6vw;
  font-weight: 800;
  color: #00226a;
  background: #e4edfc;
}
.mo-sec6-word-left-5f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 52.5%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 4.35vw;
  margin-top: -2.5%;
}

.mo-sec6-word-right-1f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 20%;
  left: 50%;
  color: #b2cbff;
  font-size: 8vw;
  font-weight: 600;
}
.mo-sec6-word-right-2f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 35%;
  left: 50%;
  font-weight: 600;
  width: 100%;
  text-align: center;
  font-size: 6vw;
  color: #fff;
}
.mo-sec6-word-right-3f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 45.5%;
  left: 50%;
  width: 66%;
  text-align: center;
  font-size: 4.5vw;
  color: #fff;
}
.mo-sec6-word-right-4f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 52.5%;
  left: 50%;
  font-size: 4.5vw;
  margin-top: -2.4%;
  color: #fff;
  width: 100%;
  text-align: center;
}
.mo-sec6-word-right-4f span {
  background: #e4edfc;
  color: #00226a;
  font-weight: 700;
  padding-left: 0.5%;
  padding-right: 2%;
  font-size: 5vw;
}
.mo-sec6-word-right-5f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 58%;
  left: 50%;
  font-size: 4.5vw;
  margin-top: -2.4%;
  color: #fff;
  width: 100%;
  text-align: center;
}
.mo-sec6-word-right-5f span {
  background: #e4edfc;
  color: #00226a;
  font-weight: 700;
  padding-left: 2%;
  padding-right: 0.5%;
  font-size: 5vw;
}

/* --------------------- 섹션 07 --------------------- */

.sec7-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 52%;
  left: 50%;
  width: 35%;
  /* border: 1px solid red; */
  height: 50%;
  display: flex;
  flex-direction: column;
}
.sec7-word-1f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 10%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 1.4vw;
}
.sec7-word-2f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 3vw;
  font-weight: 700;
  color: #1e6bff;
}
.sec7-word-3f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 60%;
  left: 50%;
  width: 94%;
  text-align: center;
  font-size: 1.5vw;
  background: #1e6bff;
  color: #fff;
  font-weight: 500;
}
.sec7-word-4f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 80%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 1.29vw;
  font-weight: 700;
}

/* 모바일 */

.mo-sec07 {
  display: none;
}
.mo-sec7-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mo-sec7-word-1f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 16%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 4.5vw;
  line-height: 6vw;
  font-weight: 500;
  word-spacing: -2px;
}
.mo-sec7-word-2f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 7.4vw;
  font-weight: 700;
  color: #00389C;
}
.mo-sec7-word-3f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 33%;
  left: 50%;
  width: 92%;
  text-align: center;
  font-size: 4.3vw;
  background: #1e6bff;
  color: #fff;
  font-weight: 500;
}
.mo-sec7-word-4f {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 42%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 4.5vw;
  font-weight: 700;
}

/* --------------------- 섹션 08 --------------------- */

.sec8-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 23%;
  left: 50%;
  font-size: 2.4vw;
  font-weight: 600;
}

.sec8-img-slide-wrapper {
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  overflow: hidden;
  /* border: 1px solid red; */
}
.sec8-img-slide {
  display: flex;
  transition: transform 3s ease;
  width: calc(25% * 6.25 + 0% * 14); /* 이미지 너비 x 개수 + 패딩 */
  cursor: grab;
}
.sec8-img-slide img {
  width: 16%;
  padding: 0.1%;
  max-width: 500px;
  max-height: 282px;
}
.slider-dots {
  text-align: center;
  margin-top: 2.2%;
  position: relative;
}
.slider-dots .dot {
  height: 0.75vw;
  width: 0.75vw;
  background-color: #65a1ff;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.slider-dots .dot.active {
  background-color: #fff;
  width: 5vw;
  height: 0.75vw;
  border-radius: 50px;
}

/* 모바일 */

.mo-sec08 {
  display: none;
}
.mo-sec8-word {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25.5%;
  left: 50%;
  font-size: 6.5vw;
  font-weight: 600;
  text-align: center;
  line-height: 7.5vw;
  color: #001D54;
  font-weight: 700;
}
.mo-sec8-img-slide-wrapper {
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 70%;
  overflow: hidden;
}
.mo-sec8-img-slide {
  display: flex;
  transition: transform 3s ease;
  width: calc(100% * 7 + 0% * 14); /* 이미지 너비 x 개수 + 패딩 */
  cursor: grab;
}
.mo-sec8-img-slide img {
  width: 85vw;
  padding: 0%;
}
.mo-slider-dots {
  text-align: center;
  margin-top: 8%;
  position: relative;
}
.mo-slider-dots .mo-dot {
  height: 2vw;
  width: 2vw;
  background-color: #65a1ff;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.mo-slider-dots .mo-dot.active {
  background-color: #fff;
  width: 8vw;
  height: 2vw;
  border-radius: 50px;
}
/* --------------------- 섹션 09 --------------------- */

.sec9-img-1 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 65%;
}
.sec9-img-1 img,
.sec9-img-2 img {
  width: 100%;
}
.sec9-img-2 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 83%;
  left: 50%;
  width: 65%;
}

/* 모바일 */

.mo-sec09 {
  display: none;
}
.mo-sec9-img-1 img,
.mo-sec9-img-2 img {
  width: 100%;
}
.mo-sec9-img-1 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 32%;
  left: 50%;
  width: 85%;
}
.mo-sec9-img-2 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 77%;
  left: 50%;
  width: 85%;
}
/* --------------------- 섹션 푸터 --------------------- */

.btn-non-covered.pc-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 1.5vw));
  padding: 0.8vw 2vw;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  color: #fff;
  font-size: 1.1vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
}
.btn-non-covered.pc-btn:hover {
  background-color: #fff;
  color: #12274c;
}

.footer-word {
  position: absolute;
  transform: translate(-50%, calc(-50% + 2.5vw));
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.25vw;
}

/* 모바일 */

.mo-sec10 {
  display: none;
}
.btn-non-covered.mo-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 5vw - 3px));
  padding: 2vw 6vw;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  color: #fff;
  font-size: 3.5vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
}
.btn-non-covered.mo-btn:hover {
  background-color: #fff;
  color: #12274c;
}

.mo-footer-word {
  position: absolute;
  transform: translate(-50%, calc(-50% + 6vw));
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 3vw;
}

/* ----------------------------- 모바일 버전 ------------------------------------- */

@media screen and (max-width:768px) {
  /* .floating {
    display: none;
  } */
  .pc-sec01 {
    display: none;
  }
  .mo-sec01 {
    display: block;
  }
  .pc-sec02 {
    display: none;
  }
  .mo-sec02 {
    display: block;
  }
  .pc-sec03 {
    display: none;
  }
  .mo-sec03 {
    display: block;
  }
  .pc-sec04 {
    display: none;
  }
  .mo-sec04 {
    display: block;
  }
  .pc-sec05 {
    display: none;
  }
  .mo-sec05 {
    display: block;
  }
  .pc-sec06 {
    display: none;
  }
  .mo-sec06 {
    display: block;
  }
  .pc-sec07 {
    display: none;
  }
  .mo-sec07 {
    display: block;
  }
  .pc-sec08 {
    display: none;
  }
  .mo-sec08 {
    display: block;
  }
  .pc-sec09 {
    display: none;
  }
  .mo-sec09 {
    display: block;
  }
  .pc-sec10 {
    display: none;
  }
  .mo-sec10 {
    display: block;
  }
  .pc-floating {
    position: fixed;
    z-index: 2;
    display: flex;
    flex-direction: column;
    top: 80vw;
    right: 5vw;
    gap: 2vw;
    transform: translateX(150%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    opacity: 0;
  }
  .pc-floating.show {
    transform: translateX(0);
    opacity: 1;
  }
  .pc-floating img {
    width: 12vw;
    max-width: 90px;
    height: auto;
    max-height: 90px;
    cursor: pointer;
  }

  /* -------------- 팝업 ------------------ */
.popup-box {
  height: 75vw;
  max-width: 60%;
  padding: 5% 3% 3% 3%;
  margin: 100px auto;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.popup-box h2 {
  font-size: 6vw;
  color: #0044CE;
  font-weight: 700;
  letter-spacing: -2px;
}
.popup-box span {
  font-size: 4vw;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 4.5vw;
}
.close-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 0%;
  left: 100%;
  background: none;
  border: none;
  font-size: 3vw;
  cursor: pointer;
  width: 10%;
  color: #fff;
  height: 8%;
  background-color: #0044CE;
  border-radius: 100%;
  line-height: 1vw;
}
.popup-bg {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.popup-bg input {
  width: 90%;
  height: 22%;
  font-size: 3.5vw;
  padding-left: 3%;
  border-radius: 0.8vw;
  border: 0.1vw solid gray;
  outline-color: #00389C;
}
.chk {
  font-size: 2.5vw;
  text-align: center;
}
.chk label input {
  width: 2vw;
  height: 1.6vw;
}
.chk span {
  font-size: 2.5vw;
}
.chk label {
  cursor: pointer;
}
.chk span {
  cursor: pointer;
  font-weight: bold;
}
.popup-bg button {
  width: 90%;
  height: 22%;
  background-color: #0044CE;
  border: none;
  color: #fff;
  font-size: 4vw;
  font-weight: 500;
}
.winaid {
  font-size: 2vw;
}
}



.ap-pop-layer[hidden]{ display:none !important; }
.ap-pop-layer{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }

.ap-pop-dim{
  position:absolute; inset:0; backdrop-filter: blur(1px);
  background: radial-gradient(1200px 800px at 50% 30%, rgba(32,45,64,.35), rgba(9,14,25,.45));
  opacity:0; transition:opacity .28s ease;
}
.ap-pop-panel{
  position:relative; width:min(88vw, 480px); border-radius:18px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.40), 0 2px 10px rgba(0,0,0,.28); background:#0b1220;
  transform:translateY(10px) scale(.985); opacity:0; transition:all .28s ease;
}
.ap-pop-layer:not([hidden]) .ap-pop-dim{ opacity:1; }
.ap-pop-layer:not([hidden]) .ap-pop-panel{ transform:none; opacity:1; }

.ap-pop-hero, .ap-pop-hero img{ display:block; width:100%; height:auto; }
.ap-pop-hero img{ object-fit:cover; }

.ap-pop-ctrl{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.65) 60%, rgba(11,18,32,.9) 100%);
  color:#eef3ff; font-size:14px;
}
.ap-pop-today{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.ap-pop-today input{ width:16px; height:16px; }

.ap-pop-close{
  appearance:none; border:0; cursor:pointer; padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.5); color:#fff; font-weight:600;
  transition: transform .2s ease, background .2s ease;
}
.ap-pop-close:hover{ transform:translateY(-1px); background:rgba(255,255,255,.18); }










































@font-face {
  font-family: 'NanumHyeokYi';
  src: url('font\나눔손글씨 혁이체.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ================== 이미지 줌 모달 ================== */
.image-modal-wrap {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.image-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  height: 85vh;
  background: transparent;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.image-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,255,255,0.7);
  color: #333;
  border: none; border-radius: 50%;
  width: 36px; height: 36px; font-size: 18px;
  cursor: pointer;
  z-index: 100;
  font-weight: bold;
}
.image-modal-close:hover {
  background: #fff;
}
.image-pan-container {
  width: 100%; height: 100%;
  overflow: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: none;
}
#panImage {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.15s ease-out;
  transform-origin: center center;
  object-fit: contain;
}
.zoom-controls {
  position: absolute;
  bottom: 25px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 15px;
  z-index: 10;
}
.zoom-controls button {
  background: rgba(0,68,206,0.9);
  color: #fff; border: none;
  width: 50px; height: 50px; border-radius: 50%;
  font-size: 24px; font-weight: bold;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.zoom-controls button:active {
  background: #002e8a;
  transform: scale(0.95);
}
.mo-only {
  display: none;
}
@media screen and (max-width:768px) {
  .mo-only { display: flex; }
  .image-modal-content {
    width: 100%; height: 100vh;
    border-radius: 0;
  }
}