@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&family=Noto+Serif+Display:wght@700;800&family=Noto+Serif+KR:wght@300;500;700&family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap');

.img-box > img {  width:100%; display:block; }
.row::after {content:""; display:block; clear:both;}
.cell {float:left; box-sizing:border-box;}
.cell-right {float:right; box-sizing:border-box;}
.margin-0-auto {margin:0 auto;}
.block {display:block;}
.inline-block {display:inline-block;}
.text-align-center {text-align:center;}
.line-height-0-ch-only {line-height:0;}
.line-height-0-ch-only > * {line-height:normal;}
.relative {position:relative;}
.absolute-left {position:absolute; left:0;}
.absolute-right {position:absolute; right:0;}
.absolute-middle {position:absolute; top:50%; transform:translateY(-50%);}

/* 메인 슬라이더 */
.main-visual { width:100%; height:calc(26vh - 0px); position:relative; top:0px; text-align:center; }

.main-visual .main-slider {font-size:0; position:relative; width:100%; height:100%;}
.main-visual > .main-slider .slick-list,
.main-visual > .main-slider .slick-track {height:100%;}

/* 이 코드는 옆으로 넘어가는 슬라이더일 경우 이미지가 background css 로 되어 있으면 absolute 의 집인 relative 를 따로 주어야함. 기존의 상위에 relative 는 너무 가로 길이가 김 (옆으로 넘어가는 슬라이더이기 때문) 거기에 추가적으로 슬라이더 트랜지션에 scale 이 들어가 있다면 옆으로 침범하기 때문에 overflow:hidden 도 주어야 한다 */
.main-visual > .main-slider .slick-slide {position:relative; overflow:hidden;}

.main-visual .main-slider .slider-visual > .img-box > .img {
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform:scale(1.15);
    transition:transform 0s 2s;
}

/* 메인 슬라이더 배너 애니메이션 */
.main-visual .main-slider .slick-active .img-box > .img {transform:scale(1); transition:transform 2s;}

/* 슬라이더 이동 버튼 */
.main-visual > .arrow-con { display:none; position:absolute; top:90%; width:100%;}
.main-visual > .arrow-con > .arrows {max-width:90%; margin:0 auto;}
.main-visual > .arrow-con > .arrows::after {content:""; display:block; clear:both;}
.main-visual > .arrow-con > .arrows > .slick-arrow {position:static; font-size:15px; color:#fff; width:auto; height:auto; line-height:normal;}
.main-visual > .arrow-con > .arrows > .slick-arrow::before {display:none;}
.main-visual > .arrow-con > .arrows > .slick-prev {float:left; transition: all 0.3s ease;}
.main-visual > .arrow-con > .arrows > .slick-prev:hover {margin-left:-10px; transition: all 0.3s ease;}
.main-visual > .arrow-con > .arrows > .slick-next {float:right; transition: all 0.3s ease;}
.main-visual > .arrow-con > .arrows > .slick-next:hover {margin-right:-10px; transition: all 0.3s ease;}

/* 슬라이더 내부 텍스트 */
.main-visual .main-slider .slider-visual > .visual-txt {position:absolute;	text-align:center; margin:0 auto; top:10px; width:100%; box-sizing:border-box;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con { margin:0 auto; text-align:left; }
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-1 img { margin:0 auto; }
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-2 img { margin:0 auto; }
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3 img { margin:0 auto; }
.main-visual .main-slider .slider-visual > .visual-txt .only_pc { display:none; }
.main-visual .main-slider .slider-visual > .visual-txt .only_mobile { display:block; }


/* 메인 슬라이더 내부 텍스트 애니메이션 */
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt {transform:translateY(-50px); opacity:0; transition:opacity 0s 1s, transform 0s 1s;}
.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt { transform:translateY(0); opacity:1; transition:opacity 1s, transform 1s;}
.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt-1 {transition-delay:0.5s;}
.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt-2 {transition-delay:0.8s;}
.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt-3 {transition-delay:1.2s;}
.main-visual .main-slider .reset-animation .visual-txt > .inner-txt-con > .inner-txt {transform:translateY(-50px); opacity:0; transition:all 0s;}

/* 슬라이더 내부 위치 커스텀 */
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-1.v1-1 { margin:20px 0 0 30px;font-family:'Noto Sans Kr'; color:#fff; font-weight:600; font-size:20px; letter-spacing:-0.02em; text-shadow: 2px 2px 3px #000;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-2.v1-2 { margin:10px 0 0 30px; font-family:'Noto Sans Kr'; color:#fff; font-weight:500; font-size:16px; line-height:20px; letter-spacing:-0.02em; text-shadow: 1px 1px 1px #000;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3.v1-3 > a { display:inline-block; float:left; left:0; position:absolute; z-index:99999; width:110px; height:30px; line-height:30px; margin:10px 0 0 30px; text-align:center; font-size:15px; color:#000; background:#fff; border-radius:15px; transition: all 0.3s ease;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3.v1-3 > a:hover { color:#fff; background:#000; text-decoration:none;transition: all 0.3s ease; }

.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-1.v2-1 { margin:20px 0 0 30px;font-family:'Noto Sans Kr'; color:#fff; font-weight:600; font-size:20px; letter-spacing:-0.02em; text-shadow: 2px 2px 3px #000;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-2.v2-2 { margin:10px 0 0 30px; font-family:'Noto Sans Kr'; color:#fff; font-weight:500; font-size:16px; line-height:20px; letter-spacing:-0.02em; text-shadow: 1px 1px 1px #000;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3.v2-3 > a { display:inline-block; float:left; left:0; position:absolute; z-index:99999; width:110px; height:30px; line-height:30px; margin:10px 0 0 30px; text-align:center; font-size:15px; color:#000; background:#fff; border-radius:15px; transition: all 0.3s ease;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3.v2-3 > a:hover { color:#fff; background:#000; text-decoration:none;transition: all 0.3s ease; }

.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-1.v3-1 { margin:20px 0 0 30px;font-family:'Noto Sans Kr'; color:#fff; font-weight:600; font-size:20px; letter-spacing:-0.02em; text-shadow: 2px 2px 3px #000;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-2.v3-2 { margin:10px 0 0 30px; font-family:'Noto Sans Kr'; color:#fff; font-weight:500; font-size:16px; line-height:20px; letter-spacing:-0.02em; text-shadow: 1px 1px 1px #000;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3.v3-3 > a { display:inline-block; float:left; left:0; position:absolute; z-index:99999; width:110px; height:30px; line-height:30px; margin:10px 0 0 30px; text-align:center; font-size:15px; color:#000; background:#fff; border-radius:15px; transition: all 0.3s ease;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3.v3-3 > a:hover { color:#fff; background:#000; text-decoration:none;transition: all 0.3s ease; }


.slick-dots{ position: absolute; bottom: 40px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center;}
.slick-dots li{ position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 3px; padding: 0; cursor: pointer;}
.slick-dots li button:before{ font-family: 'arial'; font-size: 25px; line-height: 25px; position: absolute; top: 0; left: 0; width: 10px; height: 10px; content: '•'; text-align: center; opacity: 1; color: #999; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.slick-dots li.slick-active button:before{ font-size: 12px; opacity: 1; top: 0px; left: -2px; content: '●'; color: #fff;}


/* ───────────────────────────────────────────────
   1) 비디오 보이도록 only-pc 강제 해제
─────────────────────────────────────────────── */
.only-pc {
  display: block !important;
}

/* ───────────────────────────────────────────────
   2) 16:9 비율 유지 & 잘림 없이 보여주기
─────────────────────────────────────────────── */
.main-visual {
  overflow: hidden;
}
.main-visual .video_wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}
.main-visual .video_wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* 잘림 없이 전체 노출 */
  object-position: center;
}

/* ───────────────────────────────────────────────
   3) 좌우 슬라이드 화살표(‹ ›) 보이기
─────────────────────────────────────────────── */
.main-visual > .arrow-con {
  display: block !important;
  bottom: 10px !important;
  width: 100%;
}
.main-visual .slick-prev,
.main-visual .slick-next {
  opacity: 1 !important;
  width: 32px; height: 32px;
  line-height: 32px;
}
.main-visual .slick-prev { left: 5px !important; }
.main-visual .slick-next { right: 5px !important; }


/*───────────────────────────────────
모바일에서만: 화살표 크기·위치 조정
───────────────────────────────────*/
@media only screen and (max-width: 1024px) {
  /* 화살표 컨테이너 위치 살짝 위로 */
  .main-visual > .arrow-con {
    bottom: 68px !important;
    top: auto !important;
    width: 100%;
  }

  /* 버튼 자체 크기 축소 */
  .main-visual .slick-prev,
  .main-visual .slick-next {
    width: 30px !important;    /* 원하는 너비 */
    height: 30px !important;   /* 원하는 높이 */
    line-height: 30px !important;
    opacity: 1 !important;
  }

  /* 이미지 크기도 버튼에 딱 맞게 */
  .main-visual .slick-prev img,
  .main-visual .slick-next img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 좌/우 간격 조정 (버튼 위치) */
  .main-visual .slick-prev {
    left: 5px !important;
  }
  .main-visual .slick-next {
    right: 5px !important;
  }
}