@media screen and (min-width: 1400px) {
	body {-ms-overflow-style: none}
	body::-webkit-scrollbar {display: none}
	body.noScroll {overflow: hidden}
}

/* ==========================================================
   메인 콘텐츠 섹션 공통 높이 / 등장 애니메이션 딜레이
   ========================================================== */
.visualContents .mainVisual, .visualContents .mainVisual__cell, .visualContents .company, .visualContents .careers {height: 63rem}
.visualContents .indelay12 {transition-delay: .2s !important}
.visualContents .indelay14 {transition-delay: .4s !important}
.visualContents .indelay16 {transition-delay: .6s !important}
.visualContents .indelay18 {transition-delay: .8s !important}
@media screen and (min-width: 960px) {
	.visualContents .mainVisual, .visualContents .mainVisual__cell, .visualContents .company, .visualContents .careers {height: 100dvh}
	.visualContents .indelay12 {transition-delay: .7s !important}
	.visualContents .indelay14 {transition-delay: .9s !important}
	.visualContents .indelay16 {transition-delay: 1.1s !important}
	.visualContents .indelay18 {transition-delay: 1.3s !important}
	.visualContents .indelay20 {transition-delay: 1.5s !important}
}

/* ==========================================================
   메인 롤링 비주얼 (mainVisual) - slick 슬라이더
   ========================================================== */
.mainVisual {position: relative; overflow: hidden}
.mainVisual__slide .active-item .mainVisual__image {animation: mv 5s 0s forwards }
.mainVisual__slide .active-item .mainVisual__line {animation: transLeft forwards 1.5s }
.mainVisual__slide .active-item .comment2 {animation-delay: .2s}
.mainVisual__slide .active-item .comment4 {animation-delay: .4s}
.mainVisual__cell {position: relative}
.mainVisual__texts {width: 95%; max-width: 174rem; z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.mainVisual__title {font-size: clamp(3.2rem, 6.5vw, 7rem)}
.mainVisual__desc {font-weight: 300;	font-size: clamp(1.8rem, 3.5vw, 2.5rem) }
.mainVisual__line {opacity: 0}
.mainVisual__image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 }
.mainVisual__image img,
.mainVisual__image video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; object-position: center}

/* 모바일에서 슬라이드별로 다른 기준점 필요할 때 여기서 이미지별로 조정 (기본값: 중앙) */
@media screen and (max-width: 768px) {
	.mainVisual__image.vpc img {object-position: center}
	.mainVisual__image.vpl img {object-position: left center}   /* 왼쪽 기준 */
	.mainVisual__image.vpr img {object-position: right center}  /* 오른쪽 기준 */
	.mainVisual__image.vp25 img {object-position: 25% center}      /* 특정 좌표 (가로 25%, 세로 c 지점) */
	.mainVisual__image.vp75 img {object-position: 75% center}      /* 특정 좌표 (가로 75%, 세로 c 지점) */

}
.mainVisual__more {display: flex; align-items: center; justify-content: center; margin-top: var(--gap-60); width: 24rem; height: 5.5rem; border-radius: 50vmax; border: .1rem solid #fff; font-size: 1.6rem; font-weight: 700; transition: background-color .5s }
.mainVisual__dot {position: absolute; left: calc(2.5% + 9rem); right: 2.5%; bottom: var(--gap-130); display: flex; gap: .5rem }
.mainVisual__dot li {width: 33.3333%; position: relative; text-align: right}
.mainVisual__dot li button {font-size: 0; color: #fff; opacity: .4; background: none}
.mainVisual__dot li button::before {content: none}
.mainVisual__dot li::before {content: ""; display: block; width: 100%; height: .4rem; background-color: #fff; opacity: .4; position: absolute; bottom: 0; z-index: 0}
.mainVisual__dot li::after {content: ""; display: block; width: 0%; height: .4rem; background-color: #fff; position: relative; z-index: 1 }
.mainVisual__dot li.active-dot button {opacity: 1; font-weight: 900 }
.mainVisual__dot li.active-dot::after {animation: dotWidth 10s .5s forwards}
.mainVisual__arrows {display: flex; -moz-column-gap: var(--gap-30); column-gap: var(--gap-30); width: auto; position: absolute; left: 2.5%; bottom: var(--gap-118)}
.mainVisual__arrows button { background: none; width: 1.4rem}

@media screen and (max-width: 768px) {
	.mainVisual__desc br {display: none}
}
@media screen and (min-width: 960px) {
	.mainVisual__more:hover {background-color: var(--mainColor)}
}

@keyframes mv {
	0% {transform: scale(1.05) }
	100% {transform: scale(1)}
}
@keyframes transLeft {
	0% {transform: translateX(-6rem)}
	100% {opacity: 1; transform: translateX(0)}
}
@keyframes dotWidth {
	0% {width: 0}
	100% {width: 100%}
}

/* ==========================================================
   소개 (company) / 커리어 (careers) - 배경이미지 + 중앙정렬 텍스트
   ========================================================== */
.company {background: url(/images/main/company.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center }
.company__center {width: 95%}
.company__title {font-size: clamp(3rem, 6.5vw, 7rem); line-height:clamp(3.5rem,6vw,7rem)}
.company__desc {font-size: clamp(1.8rem, 3.5vw, 2.5rem)}
.careers {background: url(/images/main/careers.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center }
.careers__center {width: 95%}
.careers__title {font-size: clamp(3rem, 6.5vw, 7rem); line-height:clamp(3.5rem,6vw,7rem)}
.careers__desc {font-size: clamp(1.8rem, 3.5vw, 2.5rem)}

@media screen and (min-width: 960px){
.company{height:98rem}
.careers{height:98rem}
}

/* ==========================================================
   공용 버튼 - system__more(소개/커리어 CTA 위에 얹히는 반투명 배경),
   blurButton(블러 배경 CTA, 여러 섹션에서 재사용)
   ========================================================== */
.system__more {background-color: hsla(0, 0%, 100%, .8)}

.blurButton {display: flex; align-items: center; justify-content: center; width: 85%; max-width: 28rem; height: 6.5rem; font-size: 1.6rem; font-weight: 600; color: #000; border-radius: 0.5vmax; border: solid 1px hsla(0, 0%, 0%, .1); gap: var(--gap-20); transition: all .5s; -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(2.0rem)}
.blurButton:after {content: ""; display: block; width: 0rem; height: 1.2rem;}
@media screen and (min-width: 960px) {
	.blurButton:hover {-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background-color: #000; color: #fff	}
	/* [정리] 값이 없는 빈 선언(background: ;)이라 브라우저가 무시하던 죽은 줄이라 제거했습니다. */
}

/* ==========================================================
   IR/PR - 카드 2개 (반응형: 960px 이상 2열, 미만 1열)
   ========================================================== */
.irpr {background: url(/images/main/irpr_bg.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center}
.irpr__center {width: 95%; max-width: 150rem; margin-inline: auto; padding-block: var(--gap-100);}
.irpr__list {display: grid; grid-template-columns: 1fr; gap: 2rem}
.irpr__box {border-radius: var(--gap-30); overflow: hidden; position: relative; height: 34rem; color: #fff; border: .1rem solid rgba(255,255,255,.3)}
.irpr__box.box1 {background: url(/images/main/irpr01.jpg) no-repeat center/cover}
.irpr__box.box2 {background: url(/images/main/irpr02.jpg) no-repeat center/cover}
.irpr__box a {display: block; width: 100%; height: 100%; padding: clamp(2.5rem, 3vw, 4rem)}
.irpr__title {font-size: clamp(2.4rem, 3vw, 3.6rem); font-weight: 800; margin-bottom: 1rem}
.irpr__desc {font-size: var(--fs-18); line-height: 1.4}
/* [정리 완료] .irpr__more - 마크업 미사용 + arrowRight.png 자산 없음을 재확인하여 삭제했습니다. */
.irpr_over {position: relative; overflow: hidden}
.irpr_over::after {content: ""; display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; background: url(/images/main/botplus.png) no-repeat center/cover; position: absolute; left: 5%; bottom: 10%; transform: translateY(10rem); transition: transform .5s}
.irpr_over:hover::after {transform: translateY(0)}
@media screen and (max-width: 959px) {
    .irpr__box {height: 24rem;}
}
@media screen and (min-width: 960px) {
	.irpr__list {grid-template-columns: repeat(2, 1fr); gap: 2.5rem}
}

/* [정리 완료] 핵심 역량 3분할 아이콘 그리드 (strengths) 섹션을 삭제했습니다.
   index.php 등 마크업 전체와 js/*.js를 다시 검색해도 이 클래스를 쓰는 곳이 없고,
   background 아이콘(arrowRight.png, strengths1~3.png, strengths1~3_on.png, more.png)도
   images 폴더에 존재하지 않는 예전 시안이었습니다. 나중에 실제로 이 섹션을 쓰게 되면
   위 이미지 자산부터 준비한 뒤 새로 작성해 주세요. */

/* ==========================================================
   제품 카테고리 (products) - 960px 미만: 1열, 960~1400px: 2열
   두 구간 다 모든 카드가 "활성화 상태"처럼 풀 콘텐츠 노출
   1400px 이상: 가로 1줄, 호버한 카드만 확장(activeBox)
   ========================================================== */
.pro_cate {background-color: #2F4C9C; min-height: 100dvh; display: flex; align-items: center}
.pro_cate__head {text-align: center}
.pro_cate__title {font-size: clamp(3rem, 6.5vw, 7rem); line-height:clamp(3.5rem,6vw,7rem); color: #fff}
.pro_cate__desc {font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: #fff}
.products {display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: var(--gap-120)}
.products__box {border-radius: var(--gap-30); overflow: hidden; position: relative; color: #fff; height: 40rem; border: .1rem solid rgba(255,255,255,.3)}
.products__box.box1 {background: url(/images/main/pro_cate01.jpg) no-repeat center/cover}
.products__box.box2 {background: url(/images/main/pro_cate02.jpg) no-repeat center/cover}
.products__box.box3 {background: url(/images/main/pro_cate03.jpg) no-repeat center/cover}
.products__box.box4 {background: url(/images/main/pro_cate04.jpg) no-repeat center/cover}
.products__box a {display: flex; align-items: center; width: 100%; height: 100%}
.products__text {width: 100%; padding: clamp(3rem, 4vw, 6rem); display: flex; flex-direction: column; align-items: flex-start; text-align: left}
.products__icon {height: 5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: flex-start}
.products__icon img {max-height: 100%; filter: brightness(0) invert(1)}
.products__title {font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 800; margin-bottom: .5rem}
.products__subtitle {display: block; font-size:  clamp(1.6rem, 3vw, 1.8rem); margin-bottom: 2rem}
.products__features {display: block; margin-bottom: 3rem}
.products__features li {font-size: var(--fs-18); font-weight: 700; line-height: 1.6}
.products__cta {display: flex; align-items: center; gap: 1.5rem; font-size: var(--fs-16)}
.products__ctaIcon {display: block; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff url(/images/main/btgo.png) no-repeat center/1.4rem}

@media screen and (max-width: 959px) {
	.products__box {height: 33rem}
}

@media screen and (min-width: 960px) {
	.products {grid-template-columns: repeat(2, 1fr); gap: 2.4rem}
}

@media screen and (min-width: 1400px) {
	.pro_cate {height: 100dvh; display: flex; align-items: center}

	.products {display: flex; gap: 1.25rem; flex-direction: row}
	.products__box {flex: 1; width: auto; height: 49.4rem; border-radius: var(--gap-30); background: linear-gradient(180deg, #8DAEFF 0%, #6B88CE 100%); color: #fff; transition: flex-grow .5s, background-color .5s}
	.products__box.box1, .products__box.box2, .products__box.box3, .products__box.box4 {background: linear-gradient(180deg, #8DAEFF 0%, #6B88CE 100%)}
	.products__box a {display: flex; align-items: center; width: 100%; height: 100%}
	.products__box a::after {content: none}
	.products__text {position: static; width: 100%; padding: clamp(3rem, 3vw, 6rem); display: flex; flex-direction: column; align-items: center; text-align: center}
	.products__icon {height: 6rem; margin: 26rem 0 2rem; display: flex; align-items: center; justify-content: center}
	.products__icon img {max-height: 100%; filter: brightness(0) invert(1)}
	.products__title {font-size: clamp(2.2rem, 2.4vw, 3.4rem); font-weight: 800; line-height: 1.2}
	.products__subtitle, .products__features, .products__cta {display: none}

	.products__box.activeBox {flex: 2.62; color: #fff}
	.products__box.box1.activeBox {background: #1E1E5A url(/images/main/pro_cate01.jpg) no-repeat center/cover}
	.products__box.box2.activeBox {background: #1E1E5A url(/images/main/pro_cate02.jpg) no-repeat center/cover}
	.products__box.box3.activeBox {background: #1E1E5A url(/images/main/pro_cate03.jpg) no-repeat center/cover}
	.products__box.box4.activeBox {background: #1E1E5A url(/images/main/pro_cate04.jpg) no-repeat center/cover}
	.products__box.activeBox .products__text {align-items: flex-start; text-align: left}
	.products__box.activeBox .products__icon {height: 6rem; margin: 5rem 0 1.5rem; justify-content: flex-start}
	.products__box.activeBox .products__title {font-size: clamp(2.6rem, 2.8vw, 3.8rem); margin-bottom: .5rem}
	.products__box.activeBox .products__subtitle {display: block; font-size: var(--fs-18); margin-bottom: 2rem}
	.products__box.activeBox .products__features {display: block; margin-bottom: 3rem}
	.products__box.activeBox .products__features li {font-size: var(--fs-18); font-weight: 700; line-height: 1.6}
	.products__box.activeBox .products__cta {display: flex; align-items: center; gap: 1.5rem; font-size: var(--fs-16)}
	.products__box.activeBox .products__ctaIcon {display: block; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff url(/images/main/btgo.png) no-repeat center/1.4rem}
}