@charset "utf-8";

/* auto_scrolling2 - 좌측 Sticky 타이틀 + 우측 2열 스태거 카드 */

.auto_scrolling2 {
  position: relative;
  width: 100%;
  float: left;
}

/* admin_div 오버라이드 */
.auto_scrolling2.admin_div,
.auto_scrolling2.admin_div:hover {
  overflow: visible !important;
  position: relative !important;
  border: none !important;
  outline: none !important;
}

/* === 래퍼 === */
.auto_scrolling2 .asc2_wrap {
  position: relative;
  width: 100%;
  float: left;
}

/* === 내부 flex === */
.auto_scrolling2 .asc2_inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(30px, calc(3.91vw + 17.5px), 80px);
  width: 100%;
}

/* === 좌측 타이틀 영역 - Sticky === */
.auto_scrolling2 .asc2_title_area {
  flex: 0 0 clamp(240px, calc(15.63vw + 190px), 440px);
  position: sticky;
  top: calc(50% - 80px);
}

/* 타이틀 (위젯제목2) */
.auto_scrolling2 .asc2_title {
  width: 100%;
  float: left;
}

/* 서브 타이틀 (위젯제목3) */
.auto_scrolling2 .asc2_sub {
  width: 100%;
  float: left;
}

/* 설명 (위젯제목4) */
.auto_scrolling2 .asc2_desc {
  width: 100%;
  float: left;
}

/* 타이틀 하위 요소 간격 */
.auto_scrolling2 .asc2_title_area .COM_tit + .COM_tit {
  margin-top: 8px;
}

/* 버튼 영역 (위젯제목5) */
.auto_scrolling2 .asc2_btn_area {
  width: 100%;
  float: left;
  margin-top: clamp(20px, calc(1.56vw + 15px), 40px);
}

/* MORE 버튼 시스템 오버라이드 */
.auto_scrolling2 .asc2_title_area .hymore_wrap {
  position: static;
  margin-top: clamp(20px, calc(1.56vw + 15px), 40px);
}

.auto_scrolling2 .asc2_title_area .hymore_wrap .hymore {
  display: inline-flex;
}

/* === 우측 카드 영역 - 2열 그리드 === */
.auto_scrolling2 .asc2_card_area {
  flex: 1 1 0%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, calc(1.56vw + 15px), 40px);
}

/* 짝수 카드 아래로 오프셋 (엇갈린 배치) */
.auto_scrolling2 .asc2_card:nth-child(2n) {
  transform: translateY(clamp(50px, calc(3.91vw + 37.5px), 100px));
}

/* === 개별 카드 === */
.auto_scrolling2 .asc2_card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: clamp(12px, calc(0.63vw + 10px), 20px);
  padding: clamp(16px, calc(1.88vw + 10px), 40px);
  transition: all 0.3s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}

.auto_scrolling2 a.asc2_card:hover {
  border-color: #ccc;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* === 카드 이미지 === */
.auto_scrolling2 .asc2_card_img {
  width: 100%;
  float: left;
  height: clamp(150px, calc(8.59vw + 122.5px), 260px);
  border-radius: clamp(8px, calc(0.47vw + 6.5px), 14px);
  overflow: hidden;
}

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

.auto_scrolling2 .asc2_card_img video,
.auto_scrolling2 .asc2_card_img iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* === 카드 텍스트 === */
.auto_scrolling2 .asc2_card_txt {
  width: 100%;
  float: left;
  margin-top: clamp(16px, calc(1.88vw + 10px), 40px);
}

/* 카드 제목 (txt1) */
.auto_scrolling2 .asc2_txt1 {
  width: 100%;
  float: left;
}

/* 카드 설명 (txt2) */
.auto_scrolling2 .asc2_txt2 {
  width: 100%;
  float: left;
  margin-top: clamp(6px, calc(0.47vw + 4.5px), 12px);
  line-height: 160% !important;
}

/* ========== 반응형 - 태블릿 ========== */
@media screen and (max-width: 992px) {
  .auto_scrolling2 .asc2_inner {
    flex-direction: column;
    gap: clamp(20px, calc(2.63vw + 11.6px), 40px);
  }

  .auto_scrolling2 .asc2_title_area {
    flex: none;
    width: 100%;
    position: static;
  }

  .auto_scrolling2 .asc2_card_area {
    flex: none;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, calc(1.58vw + 10.7px), 28px);
  }

  .auto_scrolling2 .asc2_card:nth-child(2n) {
    transform: translateY(clamp(20px, calc(2.63vw + 11.6px), 40px));
  }

  .auto_scrolling2 .asc2_card {
    padding: clamp(12px, calc(1.05vw + 8.6px), 20px);
  }

  .auto_scrolling2 .asc2_card_img {
    height: clamp(120px, calc(11.84vw + 82.1px), 200px);
  }

  .auto_scrolling2 .asc2_card_txt {
    margin-top: clamp(12px, calc(1.05vw + 8.6px), 20px);
  }

  .auto_scrolling2 .asc2_txt2 {
    margin-top: clamp(4px, calc(0.53vw + 2.3px), 8px);
  }

  .auto_scrolling2 .asc2_btn_area,
  .auto_scrolling2 .asc2_title_area .hymore_wrap {
    margin-top: clamp(16px, calc(1.05vw + 12.6px), 24px);
  }
}

/* ========== 반응형 - 모바일 ========== */
@media screen and (max-width: 640px) {
  .auto_scrolling2 .asc2_card_area {
    grid-template-columns: 1fr;
  }

  .auto_scrolling2 .asc2_card:nth-child(2n) {
    transform: none;
  }
}