@charset "utf-8";
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{
  left: 0 !important;
  display: inline-block !important;
  width: 10% !important;
  text-align:  left !important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
  width: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.swiper-pagination {
  width: 50% !important;
  top: auto !important; 
  bottom: 7.5% !important;
  left: 50% !important;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 1); /* Progressbar background color */
}

.pagin_spa {bottom:15% !important;} /*유황온천 관리방법 슬라이드*/
@media (max-width:768px){
  .pagin_spa{bottom: 7% !important;}
}

/* @media(max-width:1200px){
  .swiper-pagination {
    top: 80% !important; 
    bottom: auto !important;
    left: 50% !important;
  }
}
@media(max-width:1000px){
  .swiper-pagination {
    top: 70% !important; 
    bottom: auto !important;
    left: 50% !important;
  }
} */

.swiper-pagination-left {
  display: none;
  position: absolute; /* 부모 요소의 위치를 기준으로 절대 위치 */
  width: 70% !important; /* 페이지네이션 너비 설정 */
  height: 4px; /* 높이 설정 */
  bottom: 366px !important; /* 부모 요소의 하단에서 위치 조정 */
  left: 50%; /* 수평 중앙 정렬 */
  transform: translateX(-50%); /* 수평 중앙 정렬 보정 */
  background: rgba(255, 255, 255, 1); /* Progressbar 배경색 */
  z-index: 10; 
}
.swiper-pagination-right, .swiper-pagination-text {
  display: none;
}
.swiper-pagination-progressbar {
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #222; /* Progressbar fill color */
  height: 100%;
  transition: all 0.4s ease;
}

.main4 .swiper-horizontal>.swiper-pagination-bullets, .main4 .swiper-pagination-bullets.swiper-pagination-horizontal, .main4 .swiper-pagination-custom, .main4 .swiper-pagination-fraction{
  top: 50%;

  left: 0% !important;
  transform: translate(0,-50%) !important;
}
.swiper-slide {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}
.slide_page{
  position: absolute;
  bottom: 50% !important;
  right: 6% !important;
  z-index: 200;
  width: 90% !important;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.slide_page_spa {
  bottom: 50% !important;
  width: 120% !important;
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, 50%);
}
/* @media(max-width:1200px){
  .slide_page{
    bottom: 55% !important;
    right: 6% !important;
  }
}
@media(max-width:1000px){
  .slide_page{
    bottom: 65% !important;
    right: 6% !important;
  }
} */

.slide_page2{
  position: absolute;
  bottom: 2% !important;
  left: 6.5% !important;
  width: 10% !important;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.slide_page4{
  position: absolute;
  top: 51% !important;
  left: 4% !important;
  width: 92% !important;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.special_slide_page4{
  position: absolute;
  top: 200px !important;
  left: 6.5% !important;
  width: 92% !important;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.slide_page3{
  position: absolute;
  top: -7% !important;
  left: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  width: 10% !important;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 34px !important;
}
.popupBox .swiper-button-next:after, .swiper-button-prev:after{
  font-size: 0 !important;
}
.swiper-pagination-current{
  font-size: 20px !important;
  margin-bottom: 0 !important;
}
.swiper-pagination-total{
  font-size: 17px !important;
  margin-bottom: 0 !important;
}



.swiper1 .mainbtn1, .swiper1 .mainbtn2, .swiper4 .roombtn1, .swiper4 .roombtn2, .swiper5 .aboutbtn1, .swiper5 .aboutbtn2, .swiper6 .specialbtn1, .swiper6 .specialbtn2, .swiper_spa .spabtn1, .swiper_spa .spabtn2 {
  width: 25px;
  height: 67px !important;
  top: 20% !important;
  color: transparent !important;
  font-weight: lighter !important;
}
.swiper1 .mainbtn1, .swiper4 .roombtn1, .swiper5 .aboutbtn1, .swiper6 .specialbtn1 {
  background: url(../images/common/prebtn1_white.png) no-repeat ; background-size: 25px 67px;
}
.swiper_spa .spabtn1 {
  background: url(../images/common/prebtn1_black.png) no-repeat ; background-size: 25px 67px;
}
.swiper1 .mainbtn2, .swiper4 .roombtn2, .swiper5 .aboutbtn2, .swiper6 .specialbtn2 {
  background: url(../images/common/prebtn2_white.png) no-repeat ; background-size: 25px 67px;
}
.swiper_spa .spabtn2 {
  background: url(../images/common/prebtn2_black.png) no-repeat ; background-size: 25px 67px;
}

.slide_page2 .roombtn1, .slide_page2 .roombtn2{
  color: #000 !important;
  font-weight: lighter !important;
}
.slide_page4 .prebtn1{
  color: transparent !important;
  font-weight: lighter !important;
  background: url('../images/main/prebtn1_white.png') no-repeat center center;
  background-size: cover;
  
}
.slide_page4 .prebtn2{
  color: transparent !important;
  font-weight: lighter !important;
  background: url('../images/main/prebtn2_white.png') no-repeat center center;
  background-size: cover;
  background-position: right 50%;
}
.special_slide_page4 .prebtn1{
  color: transparent !important;
  font-weight: lighter !important;
  background: url('../images/main/prebtn1.png') no-repeat center center;
  background-size: cover;
  
}
.special_slide_page4 .prebtn2{
  color: transparent !important;
  font-weight: lighter !important;
  background: url('../images/main/prebtn2.png') no-repeat center center;
  background-size: cover;
  background-position: right 50%;
}
.slide_page3 .prebtn1, .slide_page3 .prebtn2{
  color: #000 !important;
  font-weight: lighter !important;
}


.swiper2{
	overflow: hidden;
	width: 100%;
  height: 100%;
  max-height: 420px;
	margin: 0 auto;
	text-align: center;
}

.swiper2 .swiper-slide img{
	display: none;
  width: 100%;
  height: 70%;
  overflow: hidden;
  object-fit: cover;
  filter: brightness(70%);
}


/* 스와이퍼 2 페이지네이션 */
.swiper2 .swiper-pagination {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important; /* right 대신 left를 사용하여 왼쪽에 배치하도록 설정 */
  transform: translateY(-50%) !important;
  height: 100px !important;
  cursor:  pointer !important;
}

.swiper2 .swiper-pagination-bullet {
  width: max-content;
  min-height: 30px;
  background: transparent;
  opacity: 1;
}

.swiper2 .swiper-pagination-bullet-active:before {
  content: "";
  display: block;
  position: absolute;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid pink;
  transition: all 0.5s ease-in-out;
}
.custom-pagination-item{
  color: #fff;
  border-radius: 0 30px 30px 0;
  padding: 4% 5%;
  cursor: pointer;
  text-align: left;
}

.swiper-pagination-bullet-active{
  background-color: #E3BB17;

}

.swiper3 .swiper-pagination{
  color:  #000 !important;
  top: 35% !important;
}
.swiper3 .swiper-pagination-current{
font-size: 15px !important;
}
.swiper3 .swiper-pagination-total{
font-size: 13px !important;
}

.swiper9 .swiper-pagination{
  color:  #000 !important;
  top: 35% !important;
}
.swiper9 .swiper-pagination-current{
font-size: 15px !important;
}
.swiper9 .swiper-pagination-total{
font-size: 13px !important;
}

/* 스와이퍼 2 페이지네이션 */
.swiper7 .swiper-pagination {
  position: absolute !important;
  top: 50% !important;
  left:50% !important; /* right 대신 left를 사용하여 왼쪽에 배치하도록 설정 */
  transform: translate(-50%,-50%) !important;
  cursor:  pointer !important;
  color:  #000 !important;
}

.mobile{
  display: none !important;
}
i{
  margin-right: 2%;
}
@media(max-width:1200px){
  .slide_page{
    
  }
  .slide_page3{
    width: 15% !important;
  }
}
@media(max-width:991px){
  .slide_page4{
    width: 93% !important;
    left: 3.5% !important;
    bottom: 45% !important;
  }
  .special_slide_page4 {
    top: 150px !important;
    left: 6.5% !important;
    width: 92% !important;
}

@media(max-width:768px){

  .mobile{
    display: block ;
  }
  .pc{
    display: none ;
  }
  .swiper1 .mainbtn1, .swiper4 .roombtn1, .swiper5 .aboutbtn1, .swiper6 .specialbtn1, .swiper_spa .spabtn1 {
    background: url(../images/common/prebtn1_white.png) no-repeat ; background-size: 17px 45px;
  }
 
  .swiper1 .mainbtn2, .swiper4 .roombtn2, .swiper5 .aboutbtn2, .swiper6 .specialbtn2, .swiper_spa .spabtn2  {
    background: url(../images/common/prebtn2_white.png) no-repeat ; background-size: 17px 45px;
  }
  
  .swiper1 .mainbtn1, .swiper1 .mainbtn2, .swiper4 .roombtn1, .swiper4 .roombtn2, .swiper5 .aboutbtn1, .swiper5 .aboutbtn2, .swiper6 .specialbtn1, .swiper6 .specialbtn2, .swiper_spa .spabtn1, .swiper_spa .spabtn2{
    width: 25px;
    height: 67px !important;
    top: -45px !important;
    color: transparent !important;
    font-weight: lighter !important;
  }

  .slide_page{
    width: 90% !important;
    left: 50% !important;
    bottom: 35% !important;
    
    transform: translateX(-50%) !important;
    z-index: 9997 !important;
  }
  .mainslide .swiper-wrapper{
    height: auto !important;
  }
  .swiper1{
    position: relative !important;
  }
  .swiper2 .swiper-slide img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 500px;
  }

  .custom-pagination-item{
    margin-bottom: 15px !important;
    font-size: 10px;
  }

  .slide_page4{
    width: 85% !important;
    top: 44% !important;
    left: 7% !important;
  }
  .special_slide_page4{
    position: absolute;
    top: 330px !important;
    left: 5% !important;
    z-index: 10;
    width: 90% !important;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .special_slide_page4 .prebtn1{
    color: transparent !important;
    font-weight: bolder !important;
    background: url('../images/main/prebtn1.png') no-repeat center center;
    background-size: 10px 23px;
    
  }
  .special_slide_page4 .prebtn2{
    color: transparent !important;
    font-weight: bolder !important;
    background: url('../images/main/prebtn2.png') no-repeat center center;
    background-size: 10px 23px;
    background-position: right 50%;
  }
  .swiper-pagination-left {  /*progression bar*/
    display: block;
    position: absolute; 
    width: 70% !important; 
    height: 4px;
    top: 364px !important; 
    left: 50%;
    transform: translateX(-50%); 
    background: rgba(255, 255, 255, 1); 
    z-index: 10; 
  }
  .slide_page3{
    width: 22% !important;
  }
  .main4 .swiper-horizontal>.swiper-pagination-bullets, .main4 .swiper-pagination-bullets.swiper-pagination-horizontal, .main4 .swiper-pagination-custom, .main4 .swiper-pagination-fraction{
    top: 40% !important;
  }
}

@media(max-width:500px){
  .main4 .swiper2 .text-box h2{
    font-size: 16px;
    margin-bottom: 5%;
  }
  .main4 .swiper2 .text-box p{
    font-size: 10px;
  }
  .custom-pagination-item{
    display: none;
    font-size: 8px;
    line-height: 12px;
  }
  .slide_page4{
    width: 98% !important;
    left: 0.8% !important;
    top: 42% !important;
  }
  .special_slide_page4{
    position: absolute;
    top: 310px !important;
    left: 5% !important;
    z-index: 10;
    width: 90% !important;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .special_slide_page4 .prebtn1{
    color: transparent !important;
    font-weight: bolder !important;
    background: url('../images/main/prebtn1.png') no-repeat center center;
    background-size: 10px 23px;
    
  }
  .special_slide_page4 .prebtn2{
    color: transparent !important;
    font-weight: bolder !important;
    background: url('../images/main/prebtn2.png') no-repeat center center;
    background-size: 10px 23px;
    background-position: right 50%;
  }
  .swiper-pagination-left {  /*progression bar*/
    position: absolute; 
    width: 70% !important; 
    height: 4px;
    top: 344px !important; 
    left: 50%;
    transform: translateX(-50%); 
    background: rgba(255, 255, 255, 1); 
    z-index: 10; 
  }

  .slide_page{
    
  }
  .slide_page3{
    width: 35% !important;
    top: -7% !important;
  }

}