@charset "utf-8"; /* 비주얼 영역 */
/* 메인 비주얼 기본 구조 */
.mainVisual .mainVisualSwiper { position: relative; overflow: hidden; } 
.mainVisual .mainVisualSwiper .swiper-wrapper { position: relative; overflow: hidden; } 
.mainVisual .mainVisualSwiper .swiper-slide { position: relative; overflow: hidden; background-size: cover !important; height: 100%; } 
.mainVisual .mainVisualSwiper .swiper-slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; background-repeat: no-repeat; background-size: cover; background-position: 0% 50%; transform: scale(1); will-change: transform, background-position; } 
.mainVisual .mainVisualSwiper .swiper-slide.zoom-anim::before { animation: zoomPan 8s ease-in-out forwards; } 
.mainVisual .inner { position: relative; z-index: 1; height: 100vh; margin: 0 auto; } 
.mainVisual .left { position: absolute; top: 50%; transform: translateY(-50%); } 
.mainVisual .right { position: absolute; bottom: 50px; right: 0; } 
.mainVisual .left .text,.mainVisual .right .text { color: #FFF; } 
.mainVisual .left .small { font-size: clamp(14px,1.2vw,18px); font-family: 'Montserrat'; padding-bottom: clamp(20px,2vw,40px); } 
.mainVisual .left .middle { font-size: clamp(16px,3vw,54px); font-weight: 600; line-height: 1.4; } 
.mainVisual .left .big { font-size: clamp(20px,4vw,68px); font-weight: 600; line-height: 1.4; } 
.mainVisual .right .small { font-size: clamp(14px,1.4vw,24px); text-align: right; padding-bottom: clamp(5px,0.5vw,10px); font-family: 'Montserrat'; } 
.mainVisual .right .middle { font-size: clamp(18px,2.4vw,40px); text-align: right; font-family: 'Montserrat'; } 

/* =========================
 메인 비주얼 레이아웃/페이징
 ========================= */
.mainVisual .paging { pointer-events: none; padding-top: 60px; } 
.mainVisual .mv-pager { display:flex; align-items:center; gap:12px; } 
.mainVisual .mv-pager .curr,
.mainVisual .mv-pager .total { font: 500 16px/1.2 "Montserrat", sans-serif; letter-spacing: 0.06em; color:#fff; } 
.mainVisual .mv-pager .total { opacity:.35; } /* 스샷처럼 옅게 */

.mainVisual .mv-pager .line { position:relative; width:140px; height:2px; background:rgba(255,255,255,.35); overflow:hidden; } 
.mainVisual .mv-pager .line .fill { position:absolute; left:0; top:0; height:100%; width:0; background:#fff; /* 진행색 */
 transition: width linear; /* duration은 JS에서 주입 */}

.mainVisual .swiper-slide .left .text_area .text { transform: translateY(-24px); opacity: 0; transition:
 transform 1s cubic-bezier(0.25,0.1,0.25,1),
 opacity 1s cubic-bezier(0.25,0.1,0.25,1); will-change: transform, opacity; } 
.mainVisual .swiper-slide-active .left .text_area .text,
.mainVisual .swiper-slide-duplicate-active .left .text_area .text { transform: translateY(0); opacity: 1; } 
.mainVisual .swiper-slide-active .left .text_area .small,
.mainVisual .swiper-slide-duplicate-active .left .text_area .small { transition-delay: .2s; } 
.mainVisual .swiper-slide-active .left .text_area .middle,
.mainVisual .swiper-slide-duplicate-active .left .text_area .middle { transition-delay: .6s; } 
.mainVisual .swiper-slide-active .left .text_area .big,
.mainVisual .swiper-slide-duplicate-active .left .text_area .big { transition-delay: 1.2s; } 
.mainVisual .mainVisualSwiper .swiper-slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; background-repeat: no-repeat; background-size: cover; background-position: 0% 50%; /* 처음엔 왼쪽 */
 transform: scale(1); will-change: transform, background-position; } 
.mainVisual .mainVisualSwiper .swiper-slide.zoom-anim::before { animation: zoomPan 10000ms ease-in forwards; /* autoplay.delay와 맞춤 */ } 

@keyframes zoomPan { 
 0% { transform: scale(1); background-position: 0% 50%; } 
 100% { transform: scale(1.1); background-position: 100% 50%; } 
 }

/* ========================= 접근성: 모션 최소화 환경 ========================= */
@media (prefers-reduced-motion: reduce){
 .mainVisual .swiper-slide .left .text_area .text { transform: none !important; opacity: 1 !important; transition: none !important; } 
 .mainVisual .mainVisualSwiper .swiper-slide.zoom-anim::before { animation: none !important; } 
 .mainVisual .mv-pager .line .fill { transition: none !important; width: 100% !important; } 
 }

/****************************** Our Work ******************************/
.section_02 { padding: clamp(50px,20vw,200px ) 0 clamp(50px,18vw,180px ); } 
.section_02 h2 { margin-bottom: 90px; font-weight: 700; font-size: clamp(32px, 3.4vw, 68px); text-align: center; } 
.section_02 .flex_wrap { display: flex; gap: clamp(15px, 2vw, 40px); } 
.section_02 .flex_wrap li { width: calc((100% - clamp(15px, 2vw, 40px)) / 2); aspect-ratio: 257 / 143; position: relative; } 
.section_02 .flex_wrap li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.5s ease-in; } 
.section_02 .flex_wrap li:nth-child(1) { background: url(../images/main/work_01.jpg) no-repeat 0 0 / 100%; } 
.section_02 .flex_wrap li:nth-child(2) { background: url(../images/main/work_02.jpg) no-repeat 0 0 / 100%; } 
.section_02 .flex_wrap li a { display: block; width: 100%; height: 100%; padding: clamp(20px,2.5vw,50px ); } 
.section_02 .flex_wrap li .text_area { position: absolute; bottom: clamp(20px,2.5vw,50px ); } 
.section_02 .flex_wrap li .text_area .title { color: #fff; font-size: clamp(18px, 2.5vw, 30px); font-weight: 600; margin-bottom: clamp(5px, 1vw, 16px); } 
.section_02 .flex_wrap li .text_area .con { color: #fff; font-size: clamp(16px, 1.6vw, 24px); font-weight: 600; } 

.section_02 .flex_wrap li:hover::before { background-color: #3f3b408a } 

/* 스크롤 액션 */
/* 초기 상태 */
.section_02 .flex_wrap li { transform: translateY(-50px); opacity: 0; transition: transform 1.5s ease, opacity 1.5s ease; will-change: transform, opacity; } 
/* 보일 때 */
.section_02 .flex_wrap li.is-inview { transform: translateY(0); opacity: 1; } 
/* 살짝 시차 */
.section_02 .flex_wrap li.is-inview:nth-child(1) { transition-delay: .05s; } 
.section_02 .flex_wrap li.is-inview:nth-child(2) { transition-delay: .18s; } 
/* 모션 최소화 배려 */
@media (prefers-reduced-motion: reduce){
 .section_02 .flex_wrap li { transform:none; opacity:1; transition:none; } 
 }


/****************************** 주요실적 ******************************/
.section_03 { padding: clamp(50px,12vw,120px ) 0 clamp(50px,12vw,120px ); background-color: #fafafa; } 
/* 섹션 바깥 여백 */

/* 타이틀 영역(옵션) */
.section_03 .title_area { margin-bottom: clamp(18px, 3vw, 40px); } 
.section_03 .notice { display: flex; align-items: center; } 
.section_03 .notice .left { padding: clamp(60px,9vw,90px) clamp(60px,10vw,120px) clamp(40px,6vw,60px) clamp(40px,6vw,60px); background: #134899; aspect-ratio: 380 / 480; max-height: 480px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; } 
.section_03 .left .text_area { position: relative; } 
.section_03 .left .text_area::before { content: ''; position: absolute; width: 66px; height: 51px; background: url(../images/common/logo_icon.png) no-repeat 0 0 / 100%; left: 0; top: -65px; } 
.section_03 .left .text_area span { color: #fff; font-size: clamp(22px, 2vw, 36px); font-weight: 500; line-height: 1; } 
.section_03 .left .text_area .eng { font-family: 'Montserrat'; font-weight: 500; } 
.section_03 .left .btnMore { color: #fff; } 
.section_03 .left .text_area a { display: block; font-size: clamp(12px, 0.8vw, 14px); margin-top: 20px; color: #fff; font-family: 'Montserrat'; position: relative; width: fit-content; padding-right: 20px; } 
.section_03 .left .text_area a::before { content: ''; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background: url(../images/common/more.png); } 

/* fraction pagination 영역 */
.section_03 .notice .left .paging { display: inline-flex; align-items: center; gap: .5rem; font-size: clamp(14px, 1.5vw, 16px); color: #1f2937; user-select: none; } 
.section_03 .notice .left .paging .swiper-pagination-current { font-weight: 700; } 
.section_03 .notice .left .paging .sep { opacity: .35; padding: 0 .25rem; } 
/* 좌우 버튼 */
.section_03 .notice .left .nav_btns .cert-prev { display: block; width: 50px; height: 50px; background: url(../images/common/prev_icon.png) no-repeat 0 0 / 100%; } 
.section_03 .notice .left .nav_btns .cert-next { display: block; width: 50px; height: 50px; background: url(../images/common/next_icon.png) no-repeat 0 0 / 100%; } 
/* nav 버튼 줄 레이아웃(페이징 포함) */
.section_03 .notice .left .nav_btns .btns_wrap { display: flex; gap: 10px; padding-top: 25px; } 
/* 페이징 컨테이너 */
.section_03 .notice .left .nav_btns .paging { display:flex; align-items:center; gap:15px; min-width: 180px; /* 진행바가 너무 작지 않게 */ } 
/* 현재/총 개수 숫자 (JS가 주입) */
.section_03 .notice .left .nav_btns .paging .current,
.section_03 .notice .left .nav_btns .paging .total { font-size: clamp(14px, 1.5vw, 16px); line-height:1; color:#0b0b0b; } 
/* 진행 라인(회색 바탕) */
.section_03 .notice .left .nav_btns .paging .art_progress_line { position:relative; flex:1 1 auto; height:4px; background:#e5e7eb24; /* 연한 회색 */
 border-radius:999px; overflow:hidden; } 
/* 진행막대(검은 라인) */
.section_03 .notice .left .nav_btns .paging .art_progress { position:absolute; left:0; top:0; bottom:0; width:0%; background:#fff; border-radius:999px; transition:width .35s ease; } 

.section_03 .notice .right { flex: 1 1 auto; min-width: 0; overflow: hidden; transform: translate3d(-72px, 0px, 0px); z-index: 2; } 
.section_03 .cert-swiper { width: 100%; overflow: hidden; padding: 2.3% 0; } 
/* .section_03 .cert-swiper .swiper-slide { width: 380px; flex: 0 0 380px; } */
.section_03 .right ul li { background-color: #fff; aspect-ratio: 1/1; position: relative; z-index: 3; width: 380px; box-shadow: -1px 7px 38px rgba(0, 0, 0, 0.17); border: 3px solid transparent; transition: 0.3s ease-in; } 
.section_03 .right ul li a { display: block; width: 100%; height: 100%; padding: clamp(20px,2.5vw,50px) clamp(15px,2vw,40px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } 
.section_03 .right ul li a .title { font-size: clamp(15px, 1.2vw, 22px); font-weight: 600; } 
.section_03 .right ul li a .contents { font-size: clamp(16px, 1.6vw, 24px); margin: clamp(16px, 1.6vw, 24px) 0 clamp(16px, 1.6vw, 30px); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: calc(1.5em * 2); word-break: keep-all; } 
.section_03 .right ul li a .date { color: #666666; font-size: 14px; font-family: 'Montserrat'; } 
.section_03 .right ul li a .flex_wrap { display: flex; justify-content: space-between; align-items: center; } 
.section_03 .right ul li a .flex_wrap .more { font-size: 14px; font-weight: 500; font-family: 'Montserrat'; } 
.section_03 .right ul li a .flex_wrap .arrow { padding: 10px; width: 46px; height: 46px; border-radius: 50%; background: #333 url(../images/common/view_more_icon.png) no-repeat center center / 22px; transition: 0.3s; } 
.section_03 .right ul li:hover { border-color: #468fff; } 
.section_03 .right ul li:hover .flex_wrap .arrow { background: #005bae url(../images/common/view_more_icon.png) no-repeat center center / 22px !important; } 

 @media (max-width:1000px){
 .section_03 .section_major { width: 94%; margin: 0 auto !important; } 
 .section_03 .notice { flex-direction: column; gap: 40px; } 
 .section_03 .notice .left { flex-direction: row; height: auto; aspect-ratio: unset; width: 100%; padding: clamp(20px,3vw,30px) clamp(30px,6vw,60px) clamp(20px,3vw,30px) clamp(70px,11vw,136px); } 
 .section_03 .left .text_area::before { left: -60px; top: 0; width: 50px; height: 38px; } 
 .section_03 .notice .left .nav_btns .btns_wrap { justify-content: end; } 

 .section_03 .notice .right { transform: translate3d(0px, 0px, 0px); width: 100%; } 
 .section_03 .right ul li { width: 300px; } 
 }
 @media (max-width:640px){
 .section_03 .notice .left { flex-direction: column; } 
 .section_03 .left .text_area::before { width: 40px; height: 31px; left: -50px; } 
 .section_03 .notice .left .nav_btns { display: flex; flex-direction: column; } 
 .section_03 .notice .left .nav_btns .paging { order: 2; } 
 .section_03 .notice .left .nav_btns .btns_wrap { order: 1; padding-top: 10px; padding-bottom: 20px; } 
 .section_03 .notice .left .nav_btns .cert-prev ,.section_03 .notice .left .nav_btns .cert-next { width: 40px; height: 40px; } 
 }

/****************************** 특허 및 인증서 ******************************/
.section_04 { padding: clamp(50px,20vw,200px ) 0 clamp(50px,20vw,200px ); } 

.section_04 .certification_flex_wrap { display: flex; gap: clamp(25px, 4vw, 100px); align-items: flex-start; } 
.section_04 .certification_flex_wrap .left { flex: 0 0 clamp(134px, 17vw, 257px); } 
.section_04 .certification_flex_wrap .right { flex: 1 1 auto; min-width: 0; /* Swiper overflow 깨짐 방지 */ } 

/* Swiper 기본 */
.section_04 .certification_flex_wrap .right .cert-swiper { overflow: hidden; } 
.section_04 .certification_flex_wrap .right .cert-swiper .swiper-wrapper { align-items: stretch; /* 슬라이드 높이 강제 동일화 방지 */ padding-top: 30px; } 
.section_04 .certification_flex_wrap .right .cert-swiper .swiper-slide { height: auto; /* 콘텐츠 높이대로 */
 width: 268px !important; flex:0 0 268px; } 
 .section_04 .certification_flex_wrap .right .cert-swiper .swiper-slide:hover { transform: translateY(-30px); transition: 0.3s ease-in; } 

/* 인증 카드 (프레임+그림자) */
.section_04 .certification_flex_wrap .right .cert_card { display: flex; flex-direction: column; gap: 30px; align-items: center; text-align: center; } 
.section_04 .certification_flex_wrap .right .img_wrap { position: relative; width: 268px; height: auto; left: 0; top: 0; background: url(../images/main/frame.png) no-repeat 0 0 / 100%; z-index: -1; box-shadow: 2.7px 13.7px 29px rgba(0, 0, 0, 0.28); aspect-ratio: 268/362; } 
.section_04 .certification_flex_wrap .right .cert_card .img_wrap img { width: 204px; height: auto; display: block; aspect-ratio: 204/298; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); } 

.section_04 .certification_flex_wrap .right .cert_card > figcaption { font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; color: #222222; word-break: keep-all; } 

@media (max-width: 790px){
 .section_04 { margin-top: 0; padding-top: clamp(50px, 17vw, 150px); overflow: hidden; } 
 .section_04 .certification_flex_wrap { flex-direction: column; } 
 .section_04 .certification_flex_wrap .left { flex: none; } 
 .section_04 .certification_flex_wrap .left .nav_btns .cert-prev,.section_04 .certification_flex_wrap .left .nav_btns .cert-next { display: block !important; } 
 }

@media (max-width: 640px){
 .section_04 .certification_flex_wrap .left.vertical { flex-direction: column; } 
.section_04 .certification_flex_wrap .left .nav_btns { justify-content: flex-end; } 
.section_04 .certification_flex_wrap .right .cert-swiper .swiper-slide { width: 200px !important; flex: 0 0 200px; } 
.section_04 .certification_flex_wrap .right .img_wrap { width: 200px; } 
.section_04 .certification_flex_wrap .right .cert_card .img_wrap img { width: 149px; } 
 }
 
/* 컨테이너/슬라이더 폭 명시 (초기 0폭 계산 방지) */
.section_04 .certification_flex_wrap .right,
.section_04 .certification_flex_wrap .right .cert-swiper { width: 100%; position: relative; z-index: 1; } 

/* 스와이프 허용 + 이미지가 터치 가로막지 않게 */
.section_04 .certification_flex_wrap .right .cert-swiper { touch-action: pan-y; } 
.section_04 .certification_flex_wrap .right .cert-swiper img { -webkit-user-drag: none; user-select: none; pointer-events: none; display: block; } 


/****************************** 주요 고객사 ******************************/
.section_05 { padding: clamp(50px,12vw,120px ) 0 clamp(100px,22vw,220px ); background: #f7f9ff url(../images/main/section_05.png) no-repeat right bottom; position: relative;} 
.section_05 .title_area{    text-align: center; margin-bottom: clamp(50px,5vw,100px);}
.section_05 .list { display: flex; gap: clamp(10px,1.8vw,23px) clamp(15px,2vw,30px); flex-wrap: wrap; } 
.section_05 .list li { width: calc((100% - (clamp(15px,2vw,30px) * 4)) / 5); padding: 5px 10px; border: 1px solid #cbcbcb; background-color: #fff; border-radius: clamp(8px,1vw,15px); aspect-ratio: 274 / 90; position: relative; } 
.section_05 .list li a { display: block; width: 100%; height: 100%; } 
.section_05 .list li img { height: clamp(50%,4vw,60%); object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 

@media (max-width: 1000px){
 .section_05 { background-size: 50%; } 
 }
@media (max-width: 640px){
 .section_05 .list li { width: calc((100% - (clamp(15px,2vw,30px) * 3)) / 4); } 
 }

 /****************************** contats_us ******************************/
 .contats_us{background-color: #009999; padding:clamp(20px,2vw,45px) clamp(20px,2vw,48px) clamp(20px,2vw,45px) clamp(16%,5vw,350px); width: 868px; position: absolute; left: 0; bottom: -13%;}
.contats_us .box_inner{position: relative; display: block; width: 100%; height: 100%;}
.contats_us .box_inner::before{content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50px;height: 50px; background: url(../images/common/icon-arr-cc-bl-next.png) no-repeat 0 0 /100% ;}
.contats_us .text p{color: #fff; font-size: clamp(18px,1.2vw,24px); margin-bottom: clamp(15px,2vw,27px); font-weight: 600;}
.contats_us .text span{color: #fff; font-size: clamp(16px,1vw,18px);}

@media (max-width: 1400px){
    .contats_us{bottom: -10%; width: 50%;}
}
@media (max-width: 1000px){
    .contats_us .box_inner::before{width: 37px; height: 37px;}
}
@media (max-width: 640px){
     .contats_us{display: none;}
}