@charset "utf-8";
/* 기본설정 */
/* @import "default.css"; */
html, body { 
  overflow-x: hidden;
  background: #EEEEEE;
}

/* 서브내비 간격 */
@media (min-width:769px){
  .sub-nav li {
      width: 160px !important;
  }
}

@media (max-width:768px){
 .sub-nav {
    margin-top: 95px !important;
  }

}


.special_slide{
    position: relative;
}
.special_slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media(max-width:500px){
    .special_slide img{
        height: auto;
    }
}

.sub-nav {
  margin-top: 50px;
}



/* section 01 */
.section.section01 { 
  position: relative;
  max-width: 1520px;
  margin: 170px auto 0;
  padding-top: 0;
  /* padding-bottom: 150px; */
}
.section01 .inner {
  display: flex;
  max-width: 1520px;
  gap: 100px;
}
.section01 .left {
  position: relative;
  width: 37vw;
  height: 32.8vw;
  min-height: 500px;
  display: flex;
}
.section01 .left video, .section01 .left img {
  display: block;
  width: 100%;
  height: 32.8vw;
  object-fit: cover;
}
.section01 .right { 
  width: 36vw;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.section01 .right .img-box {
  margin-left: auto;
}
.section01 .right h2 { 
  /* overflow: hidden;
  position: relative;
  font-size: 50px;
  letter-spacing: 0.02em;
  margin: 10px 0 50px; */
}
.section01 .right p.spe-text01 {
  font-size: 18px;
  color: #959595;
  margin-bottom: 20px;
}
.section01 .right p.spe-text02 {
  margin-top: 60px;
}
.section01 .right .line {
  display: block;
  margin: 60px 0;
  width: 0;
  height: 1px;
  background: #272727;
  transition: width 1.7s;
}
.section01 .right .line.active {
  width: 100%;
}
.section01 .right .btn-box {
  position: absolute;
  right: 17%;
  bottom: -22%;
}

.section01 .right img {
  max-width: 243px;
  display: block;
}

@media(max-width:1500px) {
  .section01 .right h2 {
    margin: 30px 0 50px;
  }
}

@media(max-width:1024px){
  .section01 .inner {
    flex-direction: column;
    gap: 24px;
    padding: 0 30px;
  }
  .section01 .left, .section01 .right {
    width: 100%;
    height: auto;
    min-height: 1px;
  }
  .section01 .left video, .section01 .left img {
    height: auto;
  }
  .section01 .right .img-box {
    display: none;
  } 
}
@media(max-width:768px){
    
    .section.section01  {
      margin-top: 80px;
      padding: 0 5vw;
    }
    .section01 .inner {
      padding: 0;
    }
    .section01 .right h2 {
      font-size: 33px;
      margin: 30px 0 0;
    }
    .section01 .right .text {
      padding: 0 2.5vw;
    }
    .section01 .right p.spe-text01 {
      font-size: 15px;
      margin-bottom: 15px;
    }
    .section01 .right p.spe-text02 {
      margin-top: 30px;
    }
    .section01 .right .line {
      margin: 30px 0;
    }

}
@media(max-width:400px){
    
}



/* section01 끝*/






/* ===== inner-list ===== */
section.inner-list {
    margin: 165px 0 200px;
}
.inner-list .inner-tit {
    margin-bottom: 30px;
    font-size: 28px;
    font-family: 'pret-m';
    line-height: 1.4;
}
.inner-list .inner-slider {
    position: relative;
    max-width: 1670px;            
    margin: 0 auto;
    padding: 0 85px;
    box-sizing: border-box;
}
.inner-list .swiper {
    overflow: hidden;
}
.inner-list .swiper-wrapper {
  height: auto !important;
}

/* 이미지 + 호버 레이어 */
.inner-list .img-box {
    max-width: 360px;
    position: relative;
    aspect-ratio: 360 / 285;
    overflow: hidden;
}
.inner-list .img-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inner-list .img-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(96, 96, 96, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.inner-list .name {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    font-size: 23px;
    font-family: 'pret-sb';
    line-height: 1.4;
    color: #fff;
}
.inner-list .btn-more {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s, background 0.3s, color 0.3s;
}
.inner-list .img-box:hover::after,
.inner-list .img-box:focus-within::after,
.inner-list .img-box:hover .btn-more,
.inner-list .img-box:focus-within .btn-more {
    opacity: 1;
}

/* 슬라이드가 모두 보여서 이동할 필요가 없으면 화살표 숨김 */
.inner-list .swiper-button-lock {
    display: none;
}

/* ===== PC: 화살표를 좌우 양끝에 배치, 페이지네이션 숨김 ===== */
@media all and (min-width: 769px) {
    .inner-list .swiper-custom-ctrl {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .inner-list .swiper-custom-ctrl button {
        pointer-events: auto;
    }
    .inner-list .swiper-custom-pagination {
        display: none;
    }
}

/* ===== Mobile ===== */
@media all and (max-width: 768px) {
    section.inner-list {
      margin: 110px 0 60px;
    }
    .inner-list .inner-tit {
        margin-bottom: 24px;
        font-size: 22px;
    }
    .inner-list .inner-slider {
        padding: 0 5%;
    }

    /* 레이어 대신 하단 그라데이션, MORE 항상 노출 */
    .inner-list .img-box::after {
        opacity: 1;
        background: transparent linear-gradient(180deg, #00000000 0%, #00000066 100%) 0% 0% no-repeat padding-box;
    }
    .inner-list .btn-more {
        opacity: 1;
    }
    .inner-list .name {
        left: 10px;
        bottom: 5px;
        font-size: 16px;
    }

    .inner-list .swiper-custom-ctrl {
        margin-top: 15px;
        gap: 30px;
    }
}