@import url(reset.css);
@import url(common.css);
@import url(main.css);

/* ==================== V2 전용 스타일 ==================== */

/* 추가 - v2 - Start */
.pt50 {
  padding-top: 50px;
}

/* 가로 스크롤 방지 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

main {
  overflow-x: hidden;
  max-width: 100%;
}

/* PC 레이아웃 래퍼 */
.pc_layout_wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* PC 버전에서만 clearfix 적용 */
html.pc_version .pc_layout_wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* 모바일 버전에서는 래퍼가 영향 없음 */
html.mobile_version .pc_layout_wrapper {
  display: block;
}

.basic_section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  background:linear-gradient(139.78deg, #3C3C3C 0%, #2A2A2A 79.53%);
  overflow: hidden;
  padding: 1.5rem 1rem 3rem;
  width: 100%;
  float: none;
}

.basic_section.pc_version,
html.pc_version .basic_section {
  width: 32%;
  max-width: 32%;
  float: left;
  box-sizing: border-box;
}

html.mobile_version .basic_section {
  width: 100%;
  max-width: 100%;
  float: none;
}

.basic_section .bg {
  background: url(/img/v2/main_sec_01_bg.svg) no-repeat center top / cover;
  position: absolute;
  width: 170px;
  height: 180px;
  left: -12px;
  bottom: -30px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
  display: block;
}

.basic_section .twice_box {
  display: flex;
  flex-direction: row;
  padding-top: 30px;
  gap: 12px;
  width: 100%;
}

.basic_section .twice_box > * {
  flex: 1 1 0;
  min-width: 0;
  width: calc(50% - 6px);
}

.basic_section .twice_box img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.basic_section .video {
  text-align: center;
  padding-top: 30px;
  position: relative;
  display: block;
  width: 100%;
}

.basic_section .video .play_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  max-width: 60px;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.basic_section .video:hover .play_icon {
  transform: translate(-50%, -50%) scale(1.1);
}


.basic_section02 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  background:linear-gradient(139.78deg, #3C3C3C 0%, #2A2A2A 79.53%);
  overflow: hidden;
  padding: 1.5rem 1rem 3rem;
  width: 100%;
  float: none;
}

.basic_section02.pc_version,
html.pc_version .basic_section02 {
  width: 68%;
  max-width: 68%;
  float: left;
  box-sizing: border-box;
}

html.mobile_version .basic_section02 {
  width: 100%;
  max-width: 100%;
  float: none;
}

.basic_section02 .bg {
  background: url(/img/v2/main_sec_08_bg.svg) no-repeat center top / cover;
  position: absolute;
  width: 170px;
  height: 180px;
  right: -12px;
  top: -30px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
  display: block;
  z-index: -1; /* 배경을 뒤로 보내기 */
}

.basic_section02.pc_version .bg {
    background: url(/img/v2/main_sec_08_bg_pc.svg) no-repeat right top / contain;
    width: 75%;
    right: 0;
    top: 0;
    transform: matrix(1, 0, 0, 1, 0, 0);
    height: 75%;
}

.basic_section02 .partnership_box {
  display: flex;
  flex-direction: row;
  max-width: calc(100% - 2rem);
  gap: 18px;
  padding: 30px 10px 0;
}

.basic_section02.pc_version .partnership_box {
  margin: 0 1rem 0 auto; 
} 

.basic_section02 .partnership_box a {
  flex: 1;
}

.basic_section02 .partnership_box a img {
  max-width: 100%;
}

.basic_section02.pc_version .partnership_box a img {
  height:2rem;
}

.basic_section02 .fifth_box {
  display: flex;
  flex-direction: row;
  max-width: calc(100% - 40px);
  gap: 1.2rem;
  padding: 30px 30px 0;
}
.basic_section02.mobile_version .fifth_box.mobile_only {
  display: flex;
}

.basic_section02 .fifth_box a {
  flex: 1;
}

.basic_section02 .fifth_box a img {
  max-width: 100%;
}

.basic_section02 .sns_box {
  display: block;
  flex-direction: row;
  max-width: calc(100% - 2rem);
  gap: 18px;
  text-align: right;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 10;
}

.basic_section02 .sns_box a + a {
  margin-left: 10px;
}

.basic_section02 .sns_box img {
  height: 1.5rem;
}
/* 추가 - v2 - End */

/* ==================== 가격 비교 섹션 (64~73 라인) ==================== */

/* 기본 상태: 클래스 추가 전까지 대기 */
.basic_section,
.basic_section02 {
  display: none;
}

/* PC 버전 표시 */
.basic_section.pc_version,
.basic_section02.pc_version {
  display: flex;
  justify-content: start;
}

/* 모바일 버전 표시 */
.basic_section.mobile_version,
.basic_section02.mobile_version {
  display: flex;
}

.basic_section.pc_version .pc_only,
.basic_section02.pc_version .pc_only {
  display: block;
  padding-bottom: 1rem;
}

.basic_section.pc_version .mobile_only,
.basic_section02.pc_version .mobile_only {
  display: none;
}

.basic_section.mobile_version .pc_only,
.basic_section02.mobile_version .pc_only {
  display: none;
}

.basic_section.mobile_version .mobile_only,
.basic_section02.mobile_version .mobile_only {
  display: flex;
}

/* 모바일 버전 스타일 */
.basic_section02.mobile_version {
  position: relative;
  width: 100vw;
  background: linear-gradient(139.78deg, #3C3C3C 0%, #2A2A2A 79.53%);
  overflow: hidden;
}

/* 배경 이미지 */
.mobile_bg_container {
  position: absolute;
  width: 891.78px;
  height: 698.66px;
  left: 208.57px;
  top: -10.41px;
  pointer-events: none;
}

.mobile_bg_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 컨텐츠 래퍼 */
.mobile_content_wrapper {
  position: relative;
  width: 720px;
  height: 1012.7px;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

/* 협력사 로고 영역 */
.partner_logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 45.68px;
  width: 637.71px;
  height: 39.97px;
  margin-top: 1042.7px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.partner_logos .logo_item {
  height: 34.26px;
  display: flex;
  align-items: center;
}

/* 롯데손해보험 로고 */
.partner_logos .logo_item:first-child {
  width: 142.74px;
}

.partner_logos .logo_item:first-child img {
  width: 100%;
  height: auto;
}

/* 고씨중앙종문회 */
.partner_logos .logo_item.with_text {
  width: 166.11px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner_logos .logo_item.with_text .profile_icon {
  width: 34.26px;
  height: 34.26px;
  border-radius: 50%;
  object-fit: cover;
}

.partner_logos .logo_item.with_text span {
  font-family: 'Pretendard', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20.554px;
  line-height: 140%;
  color: #FFFFFF;
}

/* 가산디지털단지역 */
.partner_logos .logo_item.circle {
  width: 237.51px;
  height: 39.97px;
  position: relative;
}

.partner_logos .logo_item.circle img {
  width: 100%;
  height: auto;
}

/* 가격 비교 박스 */
.price_comparison_box {
  width: 640.6px;
  height: 448.7px;
  position: relative;
}

/* 헤더 */
.comparison_header {
  position: absolute;
  width: 640.6px;
  height: 59.96px;
  left: 0px;
  top: 0px;
  background: linear-gradient(90deg, #5B5041 0%, #685C4C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison_header h3 {
  font-family: 'Eulyoo1945', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 35.1748px;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: #FFB744;
  text-shadow: 0px 3.90831px 3.90831px rgba(0, 0, 0, 0.25);
  margin: 0;
}

/* 월납입 정보 박스 */
.monthly_payment_info {
  position: absolute;
  width: 640.6px;
  height: 212.82px;
  left: 0px;
  top: 59.96px;
  background: transparent;
  border: 0.977078px solid #5B5041;
  box-sizing: border-box;
  padding: 30px 45px;
  display: flex;
  flex-direction: column;
  gap: 7.82px;
}

.payment_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 45.77px;
}

.payment_row .company_name {
  font-family: 'Eulyoo1945', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  line-height: 140%;
  color: #FFFFFF;
}

.payment_row .total_badge {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4.88539px 29.3124px;
  gap: 9.77px;
  min-width: 151.62px;
  height: 45.77px;
  background: linear-gradient(276.46deg, #CCB06E 12.13%, #FFE8B2 86.56%);
  border-radius: 39.0831px;
  font-family: 'Eulyoo1945', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  line-height: 140%;
  color: #482E08;
}

/* 큐브 가격 비교 영역 */
.cube_price_section {
  position: absolute;
  width: 640.6px;
  height: 175.91px;
  left: 0px;
  top: 272.78px;
  background: rgba(254, 251, 219, 0.17);
  border: 5.86247px solid #FEFBDB;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 80px;
  gap: 51.39px;
}

/* 큐브 로고 */
.cube_logo_container {
  width: 160px;
  height: 38.86px;
  flex-shrink: 0;
}

.cube_logo_container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 가격 비교 그리드 */
.price_comparison_grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6.85px;
  flex: 1;
}

.price_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 40px;
}

.price_item .grade_label {
  font-family: 'Eulyoo1945', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
  color: #FFFFFF;
  min-width: 128px;
}

.price_item .price_value {
  font-family: 'Eulyoo1945', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 34px;
  line-height: 40px;
  background: linear-gradient(94.65deg, #FFDE70 0%, #FFFAD3 98.75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 서비스 아이콘 */
.service_icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 38px;
  width: 512px;
  height: 72px;
  margin-top: -30px;
}

.service_icons .icon_item {
  width: 72px;
  height: 72px;
  background: #FFFFFF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.service_icons .icon_item:nth-child(2) {
  background: #00BF18;
}

.service_icons .icon_item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 샘플 이미지 컨테이너 */
.sample_image_container {
  width: 641px;
  height: 364px;
  position: relative;
  margin-top: -20px;
}

.sample_image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 화살표 버튼 */
.arrow_btn {
  position: absolute;
  width: 62.98px;
  height: 62.98px;
  background: #0D0D0D;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}

.arrow_btn:hover {
  opacity: 0.8;
}

.arrow_btn.prev_btn {
  left: 0px;
  transform: translateY(-50%) rotate(-135deg);
}

.arrow_btn.next_btn {
  right: 0px;
  transform: translateY(-50%) rotate(45deg);
}

.arrow_btn .arrow_icon {
  display: block;
  width: 13.89px;
  height: 13.89px;
  position: relative;
}

.arrow_btn .arrow_icon::before,
.arrow_btn .arrow_icon::after {
  content: '';
  position: absolute;
  border: 1.85249px solid #FFFFFF;
}

.arrow_btn .arrow_icon::before {
  width: 11.11px;
  height: 11.11px;
  top: 1.39px;
  left: 1.39px;
}

.arrow_btn .arrow_icon::after {
  width: 13.89px;
  height: 13.89px;
  top: 0;
  left: 0;
}

/* 페이지 인디케이터 */
.page_indicator {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4.63px;
  height: 8px;
}

.indicator_bar {
  width: 85.33px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 4.63122px;
}

.indicator_dot {
  width: 8px;
  height: 8px;
  background: #818181;
  border-radius: 50%;
}

/* 모바일 반응형 - 추가 스타일 조정 */
@media (max-width: 1024px) {
  .price_comparison_section.mobile_version {
    width: 100vw;
    max-width: 720px;
    height: auto;
    min-height: 1203px;
    margin: 0 auto;
  }

  .mobile_content_wrapper {
    width: 100%;
    padding: 60px 20px 0;
  }

  .price_comparison_box {
    width: 100%;
    max-width: 640.6px;
    height: auto;
    margin: 0 auto;
  }

  .comparison_header {
    width: 100%;
    height: auto;
    min-height: 59.96px;
    padding: 10px 20px;
    position: relative;
  }

  .comparison_header h3 {
    font-size: clamp(20px, 5vw, 35.1748px);
  }

  .monthly_payment_info {
    width: 100%;
    height: auto;
    padding: 20px;
    position: relative;
  }

  .payment_row .company_name {
    font-size: clamp(16px, 4vw, 26px);
  }

  .payment_row .total_badge {
    font-size: clamp(16px, 4vw, 26px);
    min-width: auto;
    padding: 5px 15px;
  }

  .cube_price_section {
    width: 100%;
    height: auto;
    padding: 20px;
    position: relative;
    flex-direction: column;
    gap: 20px;
  }

  .price_item .grade_label {
    font-size: clamp(18px, 4vw, 28px);
    min-width: auto;
  }

  .price_item .price_value {
    font-size: clamp(20px, 5vw, 34px);
  }

  .partner_logos {
    width: 100%;
    max-width: 637.71px;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 20px;
    height: auto;
    position: relative;
    margin-top: 50px;
  }

  .service_icons {
    width: 100%;
    max-width: 512px;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }

  .service_icons .icon_item {
    width: 60px;
    height: 60px;
  }

  .sample_image_container {
    width: 100%;
    max-width: 641px;
    height: auto;
    aspect-ratio: 641 / 364;
  }

  .arrow_btn {
    width: 50px;
    height: 50px;
  }

  .page_indicator {
    bottom: -30px;
  }
}

/* ==================== 이미지 슬라이드 (106~126 라인) ==================== */

/* 슬라이드 래퍼 (버튼 포함) */
.slide_wrapper {
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px; /* 버튼을 위한 양쪽 여백 */
  overflow: visible; /* 인디케이터가 보이도록 변경 */
}

/* PC 버전 슬라이드 래퍼 */
.slide_wrapper.pc_version {
  max-width: 640px; /* 480px 이미지 + 버튼 공간 (80px x 2) */
  height: 273px;
  margin-bottom: 50px; /* PC 버전만 인디케이터 공간 확보 */
}

/* 모바일 버전 슬라이드 래퍼 */
.slide_wrapper.mobile_version {
  max-width: 100%;
  height: auto;
  padding: 0 60px; /* 모바일에서는 버튼 공간 좁게 */
  margin-bottom: 0; /* 모바일은 margin 없음 */
}

/* 슬라이드 컨테이너 - 기본 (모바일) */
.slide {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 820; /* 1440x820 비율 정확히 유지 */
  position: relative;
  overflow: hidden;
  background: #000000;
  border-radius: 8px;
  margin-top: 30px;
}

/* PC 버전 슬라이드 컨테이너 */
.slide_wrapper.pc_version .slide {
  width: 480px !important; /* PC 기준 고정 너비 */
  height: 273px !important; /* PC 기준 고정 높이 (1440:820 = 480:273) */
  max-width: 480px !important;
  flex-shrink: 0;
}

/* 슬라이드 콘텐츠 래퍼 */
.slide_content {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  position: relative;
  width: 100%;
}

/* 각 슬라이드 이미지 */
.slide_content img {
  width: 100%;
  min-width: 100%;
  height: 100%; /* 컨테이너 높이에 맞춤 */
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 768px) {
  .slide_content img {
    min-width: 100%;
    width: 100%;
    height: 100%;
  }
}

/* 화살표 버튼 공통 스타일 - 슬라이드 바깥쪽에 배치 */
.slide_wrapper .prev_btn,
.slide_wrapper .next_btn {
  position: absolute;
  top: calc(50% + 20px);
  transform: translateY(-50%);
  width: 62.98px;
  height: 62.98px;
  background: rgba(13, 13, 13, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-indent: -999px;
}

.slide_wrapper.pc_version .prev_btn,
.slide_wrapper.pc_version .next_btn {
  width: 3rem;
  height: 3rem;
  top: calc(50% + 1.5rem);
}

/* CSS 화살표 (이미지가 없을 경우 대비) */
.slide_wrapper .prev_btn::before,
.slide_wrapper .next_btn::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  position: absolute;
}

.slide_wrapper .prev_btn::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.slide_wrapper .next_btn::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

.slide_wrapper .prev_btn:hover,
.slide_wrapper .next_btn:hover {
  background: rgba(13, 13, 13, 1);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.5);
}

/* 이전 버튼 - 슬라이드 바깥 왼쪽에 고정 배치 */
.slide_wrapper .prev_btn {
  left: 0;
}

/* 다음 버튼 - 슬라이드 바깥 오른쪽에 고정 배치 */
.slide_wrapper .next_btn {
  right: 0;
}

/* 화살표 아이콘 */
.slide_wrapper .prev_btn img,
.slide_wrapper .next_btn img {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  filter: brightness(0) invert(1);
  display: block !important;
  position: relative;
  z-index: 2;
  pointer-events: none;
  opacity: 1 !important;
  flex-shrink: 0;
  object-fit: contain;
}

/* 이미지가 있을 경우 CSS 화살표 숨김 */
.slide_wrapper .prev_btn:has(img)::before,
.slide_wrapper .next_btn:has(img)::before {
  display: none;
}

/* 페이지 인디케이터 - 기본(모바일)은 슬라이드 내부 */
.slide_wrapper .slide_indicators {
  position: absolute;
  bottom: 20px; /* 모바일은 슬라이드 내부 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

/* PC 버전만 슬라이드 바깥 아래로 이동 */
.slide_wrapper.pc_version .slide_indicators {
  bottom: -40px; /* PC 버전은 슬라이드 바깥 */
}

.slide_wrapper .slide_indicators .indicator {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide_wrapper .slide_indicators .indicator.active {
  width: 32px;
  border-radius: 4px;
  background: #ffffff;
}

/* 슬라이드 카운터 */
.slide_counter {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
  .slide_wrapper {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0 60px; /* 모바일에서도 버튼 공간 확보 */
  }

  .slide_wrapper.mobile_version {
    padding: 0 60px;
  }

  .slide {
    width: 100%;
    max-width: none; /* 최대 너비 제한 제거 */
    height: auto;
    aspect-ratio: 1440 / 820; /* 1440x820 비율 정확히 유지 */
  }

  .slide_content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .slide_wrapper {
    padding: 0 50px; /* 모바일에서 적절한 여백 */
  }

  .slide_wrapper.mobile_version {
    padding: 0 50px;
  }

  .slide {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1440 / 820; /* 1440x820 비율 정확히 유지 */
  }

  .slide_content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slide_wrapper .prev_btn,
  .slide_wrapper .next_btn {
    width: 50px;
    height: 50px;
  }

  .slide_wrapper .prev_btn {
    left: 0;
  }

  .slide_wrapper .next_btn {
    right: 0;
  }

  .slide_wrapper .prev_btn img,
  .slide_wrapper .next_btn img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block !important;
    opacity: 1 !important;
    flex-shrink: 0;
  }

  .slide_indicators {
    bottom: 10px;
  }

  .slide_counter {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  .slide_wrapper {
    padding: 0 1.5rem;
  }

  .slide_wrapper.mobile_version {
    padding: 0 1.5rem;
  }

  .slide_wrapper .prev_btn,
  .slide_wrapper .next_btn {
    width: 40px;
    height: 40px;
  }

  .slide_wrapper .prev_btn {
    left: 0;
  }

  .slide_wrapper .next_btn {
    right: 0;
  }

  .slide_wrapper .prev_btn img,
  .slide_wrapper .next_btn img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    display: block !important;
    opacity: 1 !important;
    flex-shrink: 0;
  }
}

/* ==================== 마우스 스크롤 유도 애니메이션 ==================== */

/* 마우스 스크롤 유도 전체 컨테이너 */
.mouse_scroll {
  position: fixed;
  bottom: 1rem;
  left: calc(40% + 2rem);
  z-index: 1000;
  cursor: pointer;
}

/* 마우스 외형 */
.mouse_scroll .mouse {
  display: block;
  width: 23px;
  height: 36px;
  border: 2px solid #ffffff;
  border-radius: 23px;
}

/* 마우스 내부 점 (휠 느낌) */
.mouse_scroll .mouse::after {
  content: '';
  display: block;
  position: relative;
  width: 2px;
  height: 6px;
  margin: 5px auto;
  background: #ffffff;
  animation: mouse-pulse 1.2s ease infinite;
}

/* 아래쪽 화살표 묶음 영역 */
.mouse_scroll .down_arrow {
  margin-top: 6px;
}

/* 각 화살표 스타일 */
.mouse_scroll .down_arrow span {
  display: block;
  position: relative;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-bottom: 2px;
  margin-left: -2px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translateX(-50%);
  animation: fade-arrow 1s infinite;
}

/* 두 번째 화살표 애니메이션 설정 */
.mouse_scroll .down_arrow .down_arrow2 {
  animation-delay: 0.2s;
  animation-direction: alternate;
}

/* 세 번째 화살표 애니메이션 설정 */
.mouse_scroll .down_arrow .down_arrow3 {
  animation-delay: 0.3s;
  animation-direction: alternate;
}

/* 마우스 휠 점 애니메이션 */
@keyframes mouse-pulse {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* 화살표 깜빡이는 애니메이션 */
@keyframes fade-arrow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 모바일에서는 숨김 */
@media (max-width: 768px) {
  .mouse_scroll {
    display: none;
  }
}