@charset "utf-8";

/* 슬라이더 전체 영역 */
#sliderWrapper {
  position: relative;
  width: 100%;
  height: calc(100vh); /* footer 영역 */
  overflow: hidden;
  background-color: #000;
}
/* 각 슬라이드 공통 */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; 
}
/* 비디오 배경 */
.background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 이미지 배경 */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 슬라이드 콘텐츠 영역 */
.slide-content {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  color: #fff;
  width: 100%;
  max-width: 1490px;
  margin: 0 auto;
  display: flex;
  justify-content: end;
}
.slide-content .inner {
  display: flex;
  flex-direction: column;
  width: max-content;
  border-top: 2px solid #fff;
  padding-top: 28px;
}
.slide-content h2 {
  font-family: "Pretendard-Regular";
  font-size: 70px;
  line-height: 1.2;
  margin-bottom: 20px;
}
.slide-content p {
  font-family: "Pretendard-Regular";
  font-size: 17px;
  margin-bottom: 15px;
  color:#FFFFFFA6;
}
/* 상세보기 버튼 */
.detail-btn {
  display: flex;
  align-items: center;
  padding: 12px 28px;
  color: #000;
  border: none;
  border-radius: 0;
  font-size: 20px;
  width: calc(210px - 56px);
  height: calc(80px - 24px);
  font-weight: bold;
  margin-top: 40px;
  background: #fff url(../images/ico_arrow_more.svg) no-repeat 146px center;
}
.detail-btn:hover{
  background: rgba(255,255,255,0.5) url(../images/ico_arrow_more.svg) no-repeat 146px center;
}
/* 하단 네비게이션 + 화살표 버튼 */
#sliderNavWrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  z-index: 10;
}
#sliderNav {
  width: 100%;
  max-width: 1490px;
  margin: 0 auto;
  text-align: center;
  z-index: 10;
}
#sliderNav ul {
  display: flex;
  gap: 20px;
}
#sliderNav li {
  width: calc(232px - 40px);
  height: calc(180px - 68px);
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  font-family: "Pretendard-Bold";
  text-align: left;
  padding: 34px 20px;
  line-height: 1.4;
  background-color: #00000080;
  position: relative;
}
#sliderNav li::after {
  content: "";
  background: url(../images/ico_heor_arrow.svg) no-repeat left;
  width: 35px;
  height: 11px;
  position: absolute;
  bottom: 39px;
  left: 20px;
}
#sliderNav li:nth-child(1)::after{
  content: none;
}
#sliderNav li[data-index="1"]{
  margin-left: auto;
} 
#sliderNav li a {
  color: #fff;
  width: 100%;
  height: 100%;
  display: block;
}
#sliderNav li:hover{
  opacity: .7;
}
#sliderNav li:nth-child(1){
  cursor: default;
  width: calc(610px - 40px);
}
#sliderNav li:nth-child(1):hover{
  opacity: 1;
}
#sliderNav li:nth-child(1) p.top_txt{
  font-size: 18px;
  font-family: "Pretendard-Bold";
  padding: 10px 0 28px;
}
#sliderNav li:nth-child(1) p.bottom_txt{
  font-size: 14px;
  position: relative;
  overflow: hidden; 
  line-height: 1.7;
  font-family: "Pretendard-Regular";
}

#sliderNav li.active {
  font-family: "Pretendard-Bold";
}
#sliderNav li p{
  line-height: 1.2;
}

/* 좌우 화살표 공통 스타일 */
.slider-arrows {
  position: absolute;
  bottom: 0;
  right: 214px;
  display: flex;
  z-index: 20;
}
.slider-arrow {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 16px;
  width: 55px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.slider-arrow:hover{
  opacity: .7;
}
.slider-arrow.prev {
  left: 30px;
}
.slider-arrow.next {
  right: 30px;
}

/* menu1-2 slider */
/* 공통 */
.research-slider {
  width: 100%;
  height: calc(100vh - 215px);
  background-color: #eee;
  padding: 115px 0 100px 0;
  color: #111;
  display: none;
}
.research-slider.on{
  display: block;
}
.research-slider .slider-header{padding-left: 214px;}
.research-slider .main-title,
.research-slider .title-area{
  margin-bottom: 26px;
}
/* 메인 슬라이드 */
.slider-main {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #000;
}
.slider-header{
  z-index: 2;
  position: absolute;
}
.slider-main .slide {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  display: flex;
  padding-top : 280px;
}

.slider-main .slide::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: transparent linear-gradient(90deg, #000000 0%, #000000EF 48%, #00000000 100%);
  z-index: -1; 
}
.slider-main .slide.active {
  left: 0;
  opacity: 1;
  z-index: 1;
}
.slide-text {
  padding: 0 0 0 214px;
  color: #fff;
}
.slide-text h1 {
  font-size: 60px;
  margin-bottom: 50px;
}
.slide-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #FFFFFFA6;
}
.btn-detail {
  display: flex;
  font-size: 20px;
  margin-top: 40px;
  padding: 12px 30px;
  color: #fff;
  width: calc(210px - 60px);
  height: calc(80px - 24px);
  align-items: center;
  background: #141212 url(../images/ico_arrow_more_on.svg) no-repeat 146px center;
}
.btn-detail:hover{
  background: rgba(20,18,18,0.7) url(../images/ico_arrow_more_on.svg) no-repeat 146px center;
}
/* 썸네일 */
.slider-thumbs {
  position: absolute;
  bottom: 150px;
  width: auto;
  margin: 30px auto 0;
  display: flex;
  gap: 25px;
  padding: 0 0 0 214px;
  z-index: 1;
}
.thumb {
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  width: 302px;
  height: 147px;
  border-radius: 20px;
}
.thumb::before {
  width: 302px;
  height: 147px;
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);    
  border-radius: inherit;           
  z-index: 1;                   
}
.thumb.active {
  width: calc(302px - 20px);
  height: calc(147px - 20px);
  border: 10px solid #DDEC39;
}
.thumb:hover::before,
.thumb.active::before{
  background: none;
}
.thumb span {
  font-size: 20px;
  color: #fff;
  position: absolute;
  bottom: -52px;
}
.thumb.active span{
  bottom: -62px;
}