[class^=swiper-button-] {
	transition: all 0.2s ease;
}

html,
body {
	overflow-x: hidden;
}

.main-slider {
	width: min(1800px, 100vw);
	/* <- 여기 숫자만 바꾸면 됨 */
	margin: 0 auto;
	overflow: hidden;
}

.main-slider .swiper-wrapper {
	width: 100%;
}

.main-slider .swiper-slide {
	width: 100%;
}

.main-slider .wfix {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.main-slider img {
	width: 100%;
	max-width: 100%;
	display: block;
}

.swiper-slide {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.swiper-container {
	width: 100%;
	height: 700px;
	float: none;
	transition: opacity 0.6s ease, transform 0.3s ease;
}

@media screen and (max-width:950px) {

	

	.swiper-container {
		width: 100%;
		height: 500px !important;
		float: right;
		transition: opacity 0.6s ease, transform 0.3s ease;
		margin-top: 0px !important;
		/*margin-bottom: 35px !important;*/
	}

	.mswidth {
		width: 95% !important;
		margin: 0 auto !important;
	}

	.bgm1 {
		background-image: url('../img/cover/cv_01m.png') !important;
	}

	.bgm2 {
		background-image: url('../img/cover/cv_02m.png') !important;
	}

	.bgm3 {
		background-image: url('../img/cover/cv_03m.png') !important;
	}

	.bgm4 {
		background-image: url('../img/cover/cv_04m.png') !important;
	}

	.bgm5 {
		background-image: url('../img/cover/cv_05m.png') !important;
	}

	.swiper-slide .content .title {
		font-size: 29px !important;
		margin-bottom: 20px;
		font-family: 's-core';
		font-weight: 500;
		letter-spacing: -0.08em;
		line-height: 1.3em;
	}

	.swiper-slide .content {
		position: absolute;
		top: 73% !important;
		left: 11px !important;
		width: 100% !important;
		padding-left: 2% !important;
		color: #fff;
	}


}

.swiper-container.nav-slider {
	width: 15%;
	padding-left: 5px;
}

.swiper-container.nav-slider .swiper-slide {
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s ease;
	filter: brightness(100%);
}

.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
	opacity: 1;
	filter: brightness(80%);
	transition: opacity 0.5s ease;

}

.swiper-container.nav-slider .swiper-slide .content {
	width: 100%;

}

.swiper-container.nav-slider .swiper-slide .content .title {
	font-size: 20px;
}



.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}


.swiper-container.loading {
	opacity: 0;
	visibility: hidden;
}

.swiper-slide {
	overflow: hidden;
}

.swiper-slide .slide-bgimg {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	border-radius: 7px;
}



.swiper-slide .entity-img {
	display: none;
}

.swiper-slide .content {
	position: absolute;
    top: 68%;
    left: 0;
    /*width: 70%;*/
    padding-left: 3.5%;
    color: #fff;
}

.swiper-slide.swiper-slide-active .content a{
	width: 150px;
}

.swiper-slide .content-title {
	position: absolute;
	top: 42%;
	right: 0;
	width: 71%;
	padding-right: 5%;
	color: #fff;
	text-align: right;
	font-size: 20px;
	font-family: 's-core';
	font-weight: 500;
}



.swiper-slide .content-title p {

	font-size: 18px;
	font-family: 'NanumSquareNeoBold';
	font-weight: 500;
	line-height: 1.4em;
}


.swiper-slide .content .title {
	font-size: 52px;
	font-family: 'Paperozi7';
	letter-spacing: -0.00em;
	line-height: 1.2em;
}

.swiper-slide .content .caption {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	transform: translateX(50px);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.7s ease;
}

.swiper-slide .content .caption.show {
	transform: translateX(0);
	opacity: 1;
}

[class^=swiper-button-] {
	width: 44px;
	opacity: 0;
	visibility: hidden;
}

.swiper-button-prev {
	transform: translateX(50px);
}

.swiper-button-next {
	transform: translateX(-50px);
}

/* ✅ 메인 슬라이드 내부 썸네일 오버레이 */
.cover-thumbs-wrapper {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 5;
}

.cover-thumbs {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.cover-thumb {
	width: 86px;
	height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	opacity: .75;
	transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease, filter .25s ease;
	filter: brightness(95%);
}

.cover-thumb:hover {
	opacity: 1;
	transform: translateY(-2px);
	filter: brightness(100%);
}

.cover-thumb.is-active {
	opacity: 1;
	filter: brightness(110%);
	outline: 2px solid rgba(255, 255, 255, .95);
	outline-offset: 2px;
}

.cover-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.swiper-container.main-slider{
  width: min(83%, 100vw);
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cover-thumbs-wrapper{ z-index: 9999 !important; pointer-events:auto !important; }

/* 썸네일 영역 위를 덮는 슬라이드 텍스트 레이어가 클릭을 가로채면 통과시킴 */
.main-slider .swiper-slide .content{
  pointer-events: none;
}

/* 대신 content 안의 링크(기사읽기 버튼)는 다시 클릭 가능하게 */
.main-slider .swiper-slide .content a,
.main-slider .swiper-slide .content button{
  pointer-events: auto;
}

/* =========================
   THUMBS: 우측 중앙 세로 배치 + 원형 150 + 비활성 오버레이
   ========================= */

/* 썸네일 패널(우측 중앙) + 하단 배경 */
.main-slider .cover-thumbs-wrapper.hidden-xs{
 position: absolute;
    right: 40px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 9999;
    pointer-events: auto;
    padding: 16px 15px;
    border-radius: 10px;
    background: rgb(13 91 171 / 90%);
    border: 1px solid rgb(255 255 255 / 65%);;
}
/* 썸네일 박스 전체에 그림자 */
.cover-thumbs-wrapper {
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.5);
  border-radius: 10px;        /* 이미 둥근 패널이면 맞춰주기 */
}


/* 세로 정렬 */
.main-slider .cover-thumbs{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* 버튼을 정확히 150x150 원형으로 */
.main-slider .cover-thumb{
  width:80px;
  height: 80px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;

  /* hover/active에서 크기/높이/테두리 변화 없게 */
  transform: none !important;
  outline: none !important;
  opacity: 1;
  filter: none;
  position: relative;
}

/* 이미지 꽉 채우기 */
.main-slider .cover-thumb-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✅ 비활성 썸네일: 검은색 불투명 오버레이 덮기 */
.main-slider .cover-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  transition: opacity .2s ease;
  pointer-events: none;
}

/* ✅ 활성 썸네일(현재 슬라이드): 원본 그대로(오버레이 제거) */
.main-slider .cover-thumb.is-active::after{
  opacity: 0;
}

/* hover는 “테두리/높이 변화 없이” 오버레이만 살짝 줄이는 정도 */
.main-slider .cover-thumb:hover::after{
  opacity: .35;
}

/* 기존에 있던 active outline 제거(원본 그대로만 원하면) */
.main-slider .cover-thumb.is-active{
  outline: none !important;
  filter: none !important;
}

/* 모바일에서는 기존대로 숨김(현재 hidden-xs 사용 중) */
@media (max-width: 950px){
  .main-slider .cover-thumbs-wrapper.hidden-xs{ display:none !important; }
}
/* 슬라이드 내 기사읽기 링크 영역 제한 */
.main-slider .content > a {
  display: inline-block;   /* ⭐ 핵심 */
  width: auto !important;
  position: relative;
}

/* cover_btn 자체 크기만큼만 클릭되도록 */
.main-slider .cover_btn {
  display: inline-block;
}

/* 혹시 a에 block/absolute가 걸려 있으면 무력화 */
.main-slider .content > a::before,
.main-slider .content > a::after {
  display: none !important;
}