@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(var(--header-h, 100px) + 20px);
  align-self: flex-start;
}

/* 타이틀 (위젯제목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;
  position: relative;
}

/* 이미지 우측 하단 "포트폴리오 보기" 버튼 (항목3 텍스트) */
.auto_scrolling2 .asc2_more_btn {
  position: absolute;
  right: clamp(10px, calc(0.78vw + 7.5px), 20px);
  bottom: clamp(10px, calc(0.78vw + 7.5px), 20px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(8px, calc(0.31vw + 7px), 12px) clamp(12px, calc(0.63vw + 10px), 20px);
  background-color: var(--primary, #f0473e);
  color: #fff;
  border-radius: 10px;
  font-size: clamp(12px, calc(0.16vw + 11.5px), 14px);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.auto_scrolling2 .asc2_more_btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.auto_scrolling2 .asc2_more_btn,
.auto_scrolling2 .asc2_more_btn * {
  color: #fff;
}
.auto_scrolling2 .asc2_more_btn .asc2_more_btn_txt {
  display: inline-block;
}
.auto_scrolling2 .asc2_more_btn .uil {
  font-size: 1.05em;
  line-height: 1;
}

.auto_scrolling2 .asc2_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  will-change: transform;
}

.auto_scrolling2 .asc2_card_img video,
.auto_scrolling2 .asc2_card_img iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* 카드 hover 시 이미지 1.1배 확대 (마스크는 overflow:hidden으로 잘림) */
.auto_scrolling2 a.asc2_card:hover .asc2_card_img img,
.auto_scrolling2 a.asc2_card:hover .asc2_card_img video,
.auto_scrolling2 a.asc2_card:hover .asc2_card_img iframe,
.auto_scrolling2 .asc2_card .asc2_card_img:hover img,
.auto_scrolling2 .asc2_card .asc2_card_img:hover video,
.auto_scrolling2 .asc2_card .asc2_card_img:hover iframe {
  transform: scale(1.1);
}

/* === 카드 텍스트 === */
.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;
  }
}