/* [1] 설정값 — 관리자 수정 구역 */

:root {
  /* ---------- 메인 비주얼 (왼쪽 큰 이미지 영역) ---------- */
  --ds-tit-size:     clamp(2.6rem, 9vw, 11rem);      /* "Datasolid LAB" */
  --ds-subtit-size:  clamp(1rem, 2.5vw, 5rem);       /* "Data-driven Solid…" */
  --ds-desc-size:    clamp(0.9rem, 1.15vw, 1.6rem);  /* 소개 문단 */
  --ds-desc-gap:     60px;                           /* 부제 ↔ 소개 문단 간격 */
  --ds-about-size: 2.9rem;
  /* ---------- 오른쪽 칼럼 (About / Contact Us) ---------- */
  --ds-area2-width:  75rem;    /* ★ 오른쪽 칼럼 전체 폭 */
  --ds-gap-img:      0rem;     /* 제목 ↔ 이미지 (PC) */
  --ds-gap-con:      0rem;     /* 이미지 ↔ 본문 (PC) */
  --ds-gap-more:     1.2rem;   /* "more +" ↔ 구분선 */
  --ds-gap-contact:  1.6rem;   /* 구분선 ↔ "Contact Us" */

  /* ---------- Notice & News 목록 (PC) ---------- */
  --ds-news-tit-size:  2.0rem;   /* ★ 공지 제목 글자 크기 */
  --ds-news-cate-size: 1.4rem;   /* ★ NEWS 뱃지 글자 크기 */
}

/* 모바일에서만 다르게 쓸 값 */
@media only screen and (max-width: 1024px) {
  :root {
    --ds-gap-img:   0rem;
    --ds-gap-con:   0rem;
	  --ds-about-size: 2.0rem;
	  
	--ds-con-size-m:     1.0rem;   /* ★ 본문 */
    --ds-more-size-m:    1.3rem;   /* ★ more + */
    --ds-contact-size-m: 2.0rem;   /* ★ Contact Us 제목 */
    --ds-info-size-m:    1.0rem;   /* ★ 주소·전화·이메일 */

    /* ---------- Notice & News 목록 (모바일) ---------- */
    --ds-news-tit-size:  1.0rem;   /* ★ 공지 제목 (모바일) */
    --ds-news-cate-size: 0.9rem;   /* ★ NEWS 뱃지 (모바일) */
  }
}


/*[2] 메인 비주얼 — 타이포 / 이미지 비율 */

.main-slider1 .swiper-slide .img img {
  height: auto !important;
}

.main-slider1 .con .desc {
  display: block;
  margin-top: var(--ds-desc-gap);
  max-width: 54em;
  font-size: var(--ds-desc-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: #fff;
}

@media only screen and (min-width: 1025px) {
  .main-slider1 {
    --el-visual-swiper-tit-fontSize: var(--ds-tit-size);
    --el-visual-swiper-con-fontSize: var(--ds-subtit-size);
  }
}


/* [3] 오른쪽 칼럼(area2) 폭 */
@media only screen and (min-width: 1025px) {

  .main-section.visual .area2 {
    flex: 0 0 var(--ds-area2-width) !important;
    width: var(--ds-area2-width) !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }
}


/* [4] 오른쪽 칼럼 블록 — 순서 / 이미지 / 본문  */

.main-section.visual .area2 .main-info1 {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: var(--ds-gap-more) !important;
}

.main-section.visual .area2 .main-info1 .main-tit { order: 0; }  /* 제목(숨김) */
.main-section.visual .area2 .main-info1 .data     { order: 1; }  /* 본문 묶음 */
.main-section.visual .area2 .main-info1 .btn-more { order: 2; }  /* more + */

/* --- 안쪽 .data 순서: 제목 → 이미지 → 본문 --- */
.main-section.visual .area2 .main-info1 .data {
  display: flex !important;
  flex-direction: column!important ;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.main-section.visual .area2 .main-info1 strong.tit { order: 0; }  /* About */
.main-section.visual .area2 .main-info1 .img       { order: 1; }
.main-section.visual .area2 .main-info1 .con       { order: 2; }

/* --- 이미지: 가로폭에 맞춰 원본 비율 --- */
.main-section.visual .area2 .main-info1 .img {
  display: block !important;
  height: auto !important;
  margin-top: var(--ds-gap-img);
}

.main-section.visual .area2 .main-info1 .img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- 본문: 줄수 제한 해제 + 입력한 줄바꿈 살리기 --- */
.main-section.visual .area2 .main-info1 .con {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  white-space: pre-line;
  margin-top: var(--ds-gap-con);
}

/* --- more + 자체 여백 제거 --- */
.main-section.visual .area2 .main-info1 .btn-more {
  margin-bottom: 0 !important;

}


/*  [5] 구분선 · Contact Us 간격 */
.main-section.visual .area2 .main-info2 {
  margin-top: 0 !important;
  padding-top: var(--ds-gap-contact) !important;
}


/* [6] Hot Issue 숨김 */
.main-section.visual .area2 .main-info1 .main-tit {
  display: none !important;
}
.main-section.visual .area2 section.main-info1 p.data strong.tit {
  margin: 0 0 1.4rem 0 !important;
}

/* [7] 모바일 — About 제목 크기 */
@media only screen and (max-width: 1024px) {
  .main-section.visual .area2 section.main-info1 p.data strong.tit {
    font-size: var(--ds-about-size-m) !important;
    line-height: 1.3 !important;
  }
}

/* [1] :root 에 추가 */
    /* ★ PC About 제목 크기 */

/* [6] 아래에 추가 */
@media only screen and (min-width: 1025px) {
  .main-section.visual .area2 section.main-info1 p.data strong.tit {
    font-size: var(--ds-about-size) !important;
    line-height: 1.3 !important;
  }
}


/* [7] 모바일 — 본문 · more + · Contact Us 크기 */
@media only screen and (max-width: 1024px) {

  /* 본문 (About 아래 문단) */
	
  .main-section.visual .area2 section.main-info1 p.data strong.tit {
    font-size: var(--ds-about-size) !important;
    line-height: 1.3 !important;
	}
  .main-section.visual .area2 .main-info1 .con {
    font-size: var(--ds-con-size-m) !important;
    line-height: 1.6 !important;
  }

  /* more + */
  .main-section.visual .area2 .main-info1 .btn-more {
    font-size: var(--ds-more-size-m) !important;
  }

  /* Contact Us 제목 */
  .main-section.visual .area2 .main-info2 .main-tit {
    font-size: var(--ds-contact-size-m) !important;
  }
	
  .main-section.news .bbs-data1.area1 .main-tit,
  .main-section.news .bbs-data1.area1 .main-tit .btn-view {
    font-size: var(--ds-contact-size-m) !important;
  }
  .main-section.news .main-tit,
  .main-section.news .main-tit .btn-view,
  .main-section.gallery .main-tit,
  .main-section.gallery .main-tit .btn-view {
    font-size: var(--ds-contact-size-m) !important;
  }



  /* Contact Us 목록 (주소 · 전화 · 이메일) */
  .main-section.visual .area2 .main-info2 li {
    font-size: var(--ds-info-size-m) !important;
    line-height: 1.6 !important;
  }
}


/* [8] Notice & News 목록 — 제목 / 뱃지 글자 크기 (신규) */

.main-section.news .bbs-data1 a .tit {
  font-size: var(--ds-news-tit-size) !important;
  line-height: 1.5 !important;
}

.main-section.news .bbs-data1 a .cate2 {
  font-size: var(--ds-news-cate-size) !important;
}

/* 선택: 제목을 2줄까지 표시 (기본은 1줄 말줄임)
.main-section.news .bbs-data1 a .tit {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
*/


/* ======================================================
   [9] 메인 비주얼 배경 — About 칼럼 길이에 맞춰 늘리기 (PC 전용)
   기존 CSS 맨 아래에 붙여넣기. 기존 값은 건드리지 않음.
   구조(측정 확인): .main-slider1.area1 > ul > li > div.img(absolute) > img
   ====================================================== */

:root {
  --ds-visual-min-h: 90rem;   /* ★ 배경 최소 높이 (About이 짧을 때 기준). 1rem = 10px */
}

@media only screen and (min-width: 1025px) {

  /* ① 왼쪽 칸: 고정 높이 풀고 오른쪽 칼럼 높이만큼 늘어나게 */
  .main-section.visual .main-slider1.area1 {
    height: auto !important;
    min-height: var(--ds-visual-min-h) !important;
    align-self: stretch !important;
  }

  /* ② 중간 층(ul, li): 부모 높이를 그대로 물려받기 */
  .main-section.visual .main-slider1.area1 > ul,
  .main-section.visual .main-slider1.area1 > ul > li {
    height: 100% !important;
  }

  /* ③ 이미지 틀: 칸 전체를 덮도록 */
  .main-section.visual .main-slider1.area1 .img {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
  }

  /* ④ 이미지: 틀을 꽉 채우고 비율은 잘라서 유지 (cover) */
  .main-section.visual .main-slider1.area1 .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* [9-2] About 칼럼 아래 여백 (PC) */
:root {
  --ds-gap-bottom: 8rem;   /* ★ Contact Us 아래 여백. 1rem = 10px */
}

@media only screen and (min-width: 1025px) {
  .main-section.visual .area2 {
    padding-bottom: var(--ds-gap-bottom) !important;
  }
}