@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-family: "montserrat", sans-serif;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 {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	}
	.blurButton:hover:after {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}
/* [정리 후보] 마크업에서 미사용 + arrowRight.png 자산 없음 */
.irpr__more {display: block; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #fff url(/images/main/arrowRight.png) no-repeat center/1.6rem; position: absolute; left: clamp(2.5rem, 3vw, 4rem); bottom: clamp(2.5rem, 3vw, 4rem)}
.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 등 마크업 전체를 검색해도 이 클래스를 쓰는 곳이 없고,
   background 아이콘(arrowRight.png, strengths1~3.png, strengths1~3_on.png, more.png)도
   images 폴더에 실제로 존재하지 않음. 예전 시안이었거나 아직 미착수 섹션으로 보이므로,
   실제로 쓸 계획이 없다면 삭제, 나중에 쓸 예정이면 주석 유지 후 자산 준비 필요.
   ========================================================== */
.strengths {background-color: #f9f9f9}
.strengths__center {width: 95%; max-width: 129.6rem; margin-inline: auto}
.strengths__list {display: flex; flex-direction: column; row-gap: 1.5rem}
.strengths__cell {height: 33rem; background-color: #fff; border-radius: var(--gap-30); padding: var(--gap-20); box-shadow: 4px 4px 15px 4px rgba(0,0,0,.16); display: flex; align-items: center; justify-content: center}
.strengths__inner {position: relative; z-index: 1; text-align: center}
.strengths__icon {height: 8rem; margin-bottom: var(--gap-30); display: flex; align-items: center; justify-content: center}
.strengths__icon::after {content: ""; display: block}
.strengths__icon.icon1::after {width: 7.8rem; height: 7.8rem; background: url(/images/main/strengths1.png) no-repeat center/cover}
.strengths__icon.icon2::after {width: 8rem; height: 7.9rem; background: url(/images/main/strengths2.png) no-repeat center/cover}
.strengths__icon.icon3::after {width: 8rem; height: 7.9rem; background: url(/images/main/strengths3.png) no-repeat center/cover}
.strengths__name {font-size: var(--fs-22); font-weight: 700; margin-bottom: 1rem; transition: color .5s}
.strengths__desc {font-size: var(--fs-16); color: #9c9c9c; transition: color .5s}
.strengths__more {display: block; margin-inline: auto; margin-top: var(--gap-30); width: 6rem; height: 6rem; border: .3rem solid #ddd; position: relative; text-align: center; transition: all .5s}
.strengths__more:after {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/images/main/more.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity .5s}
.strengths__more .moretext {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; width: 0%; transition: width .5s}
.strengths__more span {display: block; width: 9.35rem; font-size: var(--fs-18); font-weight: 700; color: var(--mainColor); position: relative; left: 50%; transform: translateX(-50%)}

@media screen and (min-width: 960px) {
	.strengths__list {flex-direction: row; justify-content: space-between}
	.strengths__cell {width: 32%; position: relative; overflow: hidden}
	.strengths__cell::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0%; height: 0%; background-color: var(--mainColor); border-radius: 100%; transition: all .5s}
	.strengths__cell:hover::after {width: 150%; height: 150%}
	.strengths__cell:hover .strengths__icon.icon1:after {background: url(/images/main/strengths1_on.png) no-repeat center/cover}
	.strengths__cell:hover .strengths__icon.icon2:after {background: url(/images/main/strengths2_on.png) no-repeat center/cover}
	.strengths__cell:hover .strengths__icon.icon3:after {background: url(/images/main/strengths3_on.png) no-repeat center/cover}
	.strengths__cell:hover .strengths__name, .strengths__cell:hover .strengths__desc {color: #fff}
	.strengths__more:hover {width: 20rem; border-color: var(--mainColor)}
	.strengths__more:hover:after {opacity: 0}
	.strengths__more:hover .moretext {width: 100%}
}

/* ==========================================================
   제품 카테고리 (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}
}