@charset "utf-8"; /* 1. 카페24 및 브라우저 기본 레이아웃 완전 고정 */
 html, body { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; /* 스크롤바 감춤 */
 position: fixed !important; /* 바깥 스크롤 완벽 차단 */
 top: 0; left: 0; } 
 .hide { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } 

 /* 2. 전체를 감싸는 컨테이너 */
 .full { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; transition: transform 0.8s cubic-bezier(0.65, 0, 0.45, 1); /* 이동 애니메이션 */
 will-change: transform; } 

 /* 3. 각 섹션 */
 .page { width: 100vw; height: 100vh; display: flex; } 

.main-visual { position:relative; /* height:100vh; */overflow:hidden; } 
.main-visual .swiper,
.main-visual .swiper-slide { position:relative; width:100%; height:100%; } 
.main-visual .main__slide-item img { width:100%; height:100%; object-fit:cover; transform:scale(1); transition:7s; } 
.main-visual .swiper-slide-active img { transform:scale(1.08); } 
.main-visual .swiper-slide::before { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 22%) 45%, rgba(0, 0, 0, 0) 100%); } 

#sec01 { position: relative; } 

/* ① 슬라이드 이미지 */
#sec01 .main__slide-item { height: 96rem; /* KAIST GGGS 동일 */ } 

#sec01 .main__slide-item img { width: 100%; height: 100%; object-fit: cover; } 

/* ② 중앙 텍스트 레이어 */
#sec01 .main__slide-con { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; color: #fff; text-align: center; } 

/* ③ 메인 타이틀 — 초기: 아래에서 올라오는 진입 애니메이션 대기 */
#sec01 .main__slide-title { transform: translateY(4.6rem); opacity: 0; margin-bottom: 2.6rem; font-size: 5.6rem; font-weight: 800; line-height: 1.2142857143; } 

#sec01 .progress__wrap { position: relative; top: -1px; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2); } 
#sec01 .progress__bar { position: absolute; top: 0; left: 0; transform: translateX(-100%); width: 22rem; height: 1px; background-color: #fff; animation-name: progress; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: 1; } 

#sec01 .progress__bar.stop { animation-play-state: paused; } 

@keyframes progress { 
 from { transform: translateX(-100%); } 
 to { transform: translateX(calc(100vw - 22rem)); } 
 }

/* ⑥ 서브 텍스트 — 초기 대기 */
#sec01 .main__slide-text { transform: translateY(4.6rem); opacity: 0; margin-top: 4rem; font-size: 2.4rem; font-weight: 500; line-height: 1.25; } 

/* ⑦ 하단 바 — 초기 대기 */
#sec01 .main__slide-btm { display: flex; justify-content: center; align-items: center; transform: translateY(4rem); opacity: 0; margin-top: 4rem; gap: 0 2rem; } 

/* ⑧ .on 클래스 추가 시 진입 애니메이션 실행 (KAIST GGGS 동일) */
#sec01.on .main__slide-title,
#sec01.on .main__slide-text,
#sec01.on .main__slide-btm { transform: translateY(0); opacity: 1; transition: transform 2s, opacity 2s; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } 

#sec01.on .main__slide-title { transition-delay: 0.24s; } 
#sec01.on .main__slide-text { transition-delay: 0.54s; } 
#sec01.on .main__slide-btm { transition-delay: 0.70s; } 

/* ⑨ 페이지네이션 도트 (KAIST GGGS 동일) */
#sec01 .main__slide-dot { display: flex; justify-content: center; align-items: center; width: auto; gap: 0 0.8rem; } 

#sec01 .main__slide-dot .swiper-pagination-bullet { opacity: 1; width: 1rem; height: 1rem; margin: 0; border: 1px solid #fff; border-radius: 50%; background-color: transparent; transition: 0.14s; } 

#sec01 .main__slide-dot .swiper-pagination-bullet-active { background-color: #fff; } 

/* ⑩ 재생/정지 버튼 (KAIST GGGS 동일) */
#sec01 .main__slide-btn { display: none; height: 2.4rem; font-size: 2.4rem; color: #fff; line-height: 1; } 

#sec01 .main__slide-btn.active { display: inline-block; } 

/* ⑪ 하단 4분할 탭 바 (KAIST GGGS 동일) */

#sec01 .main__slide-tab { display: flex; flex-wrap: wrap; position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(0, 0, 0, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } 

#sec01 .main__slide-tab-item { display: inline-flex; align-items: center; position: relative; width: 25%; height: 12.8rem; padding: 0 6rem; padding-right: 10rem; border-right: 1px solid rgba(255, 255, 255, 0.4); font-size: 2rem; color: #fff; transition: 0.24s; gap: 0 2.4rem; } 

#sec01 .main__slide-tab-item:hover { background-color: var(--main-color); } 

#sec01 .main__slide-tab-item:last-child { border-right: none; } 

/* 우측 화살표 아이콘 (remixicon \ea70 = ri-arrow-right-up-line) */
i.arrow_icon svg { width: 2.4rem; position: absolute; top: 50%; right: 6rem; transform: translateY(-50%); font-family: "remixicon"; font-size: 2.4rem; font-weight: 400; color: #fff; content: "\ea70"; } 

#sec01 .main__slide-tab-icon { width: 4rem; height: 4rem; flex-shrink: 0; } 

#sec01 .main__slide-tab-icon img { max-width: fit-content; width: 100%; height: 100%; margin: 0 auto; object-fit: contain; } 

#sec01 .main__slide-tab-title { font-weight: 500; } 

/* seciton2 */
.product-bg { background: #f9fbff; } 
.page .container { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -60%); width: 94%; text-align: center; } 
.products-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.8rem; align-items: stretch; margin-top: 7rem; } 

/* 제품 카드 공통 */
.product-card { position: relative; border-radius: 8px; transition: transform var(--transition), box-shadow var(--transition); padding-bottom: 0; background: #f9fbff; } 
.product-card:nth-child(1) .product-img-wrap img { left: -22px; top: 11rem; } 
.product-card:nth-child(2) .product-img-wrap img { left: -22px; top: 11.5rem; } 
.product-card:nth-child(3) .product-img-wrap img { top: 11rem; right: 0; } 
.product-card:nth-child(4) .product-img-wrap img { top: 9rem; left: 0; } 


/* gap 방식으로 변경 - margin-left 제거 */

.product-card:hover { transform: translateY(-6px); z-index: 2; } 

.product-card-inner { padding: 2.4rem 2.4rem 0rem 2.4rem; display: flex; /* gap: 2rem; */position: relative; border-radius: 15px; overflow: hidden; background: #fff; bottom: 0; transition: all .3s; } 

.product-card-header { display: flex; gap: 4px; justify-content: space-between; width: 100%; } 

.product-card-header h3 {font-weight: 700;line-height: 1.4;color: var(--color-dark);text-align: left;font-size: 1.8rem;} 

.product-card-header h3 br{display:none;}

.product-badges img { max-width: fit-content; width: 100%; margin: 0 auto; } 

.product-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 34rem; } 
.product-img-wrap img { position: absolute; } 

.product-img { width: fit-content; object-fit: contain; transition: transform var(--transition); } 

.product-card:hover .product-img { /* transform: scale(1.04); */ } 

/* 더보기 버튼 */
.product-more-btn { position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center; justify-content: center; color: #444; font-size: 2.4rem; border-radius: 50%; transition: color var(--transition), border-color var(--transition), background var(--transition); } 

/* 강조 카드 (첫 번째) */
.product-card:hover { } 

.product-card:hover .product-card-inner { min-height: auto; background: var(--color-accent); bottom: 2rem; } 

.product-card:hover .product-card-header p { color: rgba(255,255,255,0.8); } 

.product-card:hover .product-card-header h3 { color: var(--color-white); } 

.product-card:hover .product-more-btn { color: var(--color-white); } 

.page .section-label { color: #b4b4b4; font-weight: 600; margin-bottom: 2.2rem; } 
.page .section-title { margin-bottom: 1rem; line-height: 1.4; } 
.page .section-desc { font-weight: 200; } 

/* #support */
#support .support-bg { background: url(../../img/support_bg.jpg) no-repeat 50% 100%/cover; width: 100%; height: 100%; } 
.support-text { text-align: left; color: #fff; } 
.support-text .section-label { color: #fff; } 
.support-cards { display: flex; gap: 1.4rem; margin-top: 9rem; justify-content: flex-end; } 
.support-cards a { background-color: rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 10px; color: #fff; padding: 3.2rem 4rem; flex: 0 1 27rem; height: 19rem; text-align: left; transition: all .3s; } 
 .support-card:nth-child(1):hover { background-color: #6ab6ff; } 
 .support-card:nth-child(2):hover { background-color: #1e91ff; } 
 .support-card:nth-child(3):hover { background-color: #006bea; } 
.support-card-text p { font-weight: 200; } 
.support-card-text h3 { margin-bottom: 1rem; font-family: "Teko"; font-weight: 600; line-height: 1; } 
.support-card-icon i { background-repeat: no-repeat; width: 4rem; height: 4rem; display: block; background-position: 50% 50%; background-size: contain; position: absolute; right: 3rem; bottom: 3rem; } 
.support-card-icon i.sup_icon1 { background-image: url(../../img/sup_icon1.png); } 
.support-card-icon i.sup_icon2 { background-image: url(../../img/sup_icon3.png); } 
.support-card-icon i.sup_icon3 { background-image: url(../../img/sup_icon2.png); } 

/* 설치사례 */
/* 필터 탭 */
.reference-filter { position: relative; margin-top: 3rem; margin-bottom: 2rem; } 
.filter-tabs { display: flex; gap: 1rem; justify-content: center; } 

.filter-btn { border-radius: 50px; color: #999; font-weight: 500; background: #f4f4f4; transition: background var(--transition), color var(--transition), border-color var(--transition); width: 19rem; height: 6rem; display: flex; align-items: center; align-content: center; justify-content: center; cursor: pointer; } 

 .filter-btn:hover { border-color: var(--main-color); color: var(--main-color); } 

 .filter-btn.active { background: var(--main-color); color: var(--color-white); border-color: var(--main-color); } 

 .btn-view-all {position: absolute;top: 0;right: 0;background: var(--main-color);color: var(--color-white);border-radius: 50px;font-weight: 500;transition: background var(--transition), transform var(--transition);display: flex;justify-content: space-around;border: 1px solid #fff;} 
.btn-view-all i { font-weight: 600; font-size: 1.5rem; } 
 .btn-view-all:hover {background: #fff;transform: translateX(2px);border: 1px solid var(--main-color);} 

/* 갤러리 그리드 */
.reference-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } 

/* 레퍼런스 카드 */
.ref-card { border-radius: 6px; overflow: hidden; background: var(--color-white); box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: transform var(--transition), box-shadow var(--transition); } 

.ref-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,0.14); } 

.ref-card-img-wrap { overflow: hidden; aspect-ratio: 4/3; } 

.ref-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } 

.ref-card:hover .ref-card-img { transform: scale(1.06); } 

/* 정보 포함 카드 */
.ref-card--info .ref-card-img-wrap { aspect-ratio: 16/9; } 

.ref-card-body { padding: 20px 22px 24px; } 

.ref-card-tag { display: inline-block; color: var(--color-primary); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 8px; } 

.ref-card-title { font-weight: 700; color: var(--color-dark); margin-bottom: 14px; } 

.ref-card-info { display: flex; flex-direction: column; gap: 5px; } 

.ref-card-info li { color: var(--color-gray-700); line-height: 1.5; } 

.ref-card-info li span { font-weight: 500; color: var(--color-dark); } 

/* 하단 구분선 */
.reference-divider { margin-top: 60px; height: 1px; background: var(--color-gray-200); width: 200px; } 
#reference { } 
.watermark-wrap { width:100%; overflow:hidden; position: absolute; bottom: 0; z-index: -1; } 

.watermark-track { display:flex; width:max-content; animation: marquee 38s linear infinite; } 

.watermark-track span { flex-shrink:0; white-space:nowrap; padding-right: 2rem; font-size: 13rem; font-weight: 600; color: #f8f7f7; text-transform:uppercase; line-height: 0.7; letter-spacing: 10px; } 


#reference .tabs-contents { display: none; } 
#reference .tabs-contents.active { display: block; } 
#reference .filter-tabs { display: flex; gap: 1.4rem; } 
#reference .filter-btn { cursor: pointer; } 
#reference .filter-btn.active { /* 활성화 스타일 */
 color: #fff; font-weight: 600; } 

@keyframes marquee { 
 from { transform:translateX(0); } 
 to { transform:translateX(-50%); } 
 }

 /* ===================== 반응형 ===================== */
 @media (max-width:1024px) { /* sec01 탭 아이템 */
 #sec01 .main__slide-tab-item { height: 10.8rem; padding: 0 3rem; padding-right: 7rem; gap: 0 2rem; } 

 i.arrow_icon svg { right: 3rem; } 

 #sec01 .main__slide-tab-icon { width: 3.6rem; height: 3.6rem; } 
 .page .container { position: relative; top: unset; left: unset; transform: unset; padding: 10rem 0; } 
 #support .support-content { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -60%); width: 94%; text-align: center; } 
 #support .support-bg img { display: none; } 
 #support { display: block; } 
 #support .support-bg { height: 70rem; } 
 }

 @media (max-width:840px) { /* sec01 */
 #sec01 .main__slide-title { margin-bottom: 0; font-size: 4rem; } 

 #sec01 .main__slide-title br { display: none; } 

 #sec01 .main__slide-con { top: 42%; } 

 #sec01 .main__slide-text { margin-top: 2.4rem; font-size: 1.8rem; } 

 /* 탭 2열 */
 #sec01 .main__slide-tab-item { width: 50%; height: 10rem; border-top: 1px solid rgba(255, 255, 255, 0.4); padding: 2.4rem; padding-right: 6rem; gap: 0 1.4rem; } 

 #sec01 .main__slide-tab-item:nth-child(-n + 2) { border-top: none; } 

 #sec01 .main__slide-tab-item:nth-child(even) { border-right: none; } 

 i.arrow_icon svg { right: 2.4rem; } 

 #sec01 .main__slide-tab-icon { width: 4rem; height: 4rem; display: block; } 

 /* 진행 바 숨김 */
 #sec01 .progress__wrap { opacity: 0; visibility: hidden; pointer-events: none; } 
 }

 @media (max-width: 767px){
 #sec01 .main__slide-tab-title { font-size: 1.6rem; } 
 i.arrow_icon svg { right: 1.4rem; } 
 .reference-filter { position: unset; } 
 #sec01.on .main__slide-text { width: 90%; margin: 0 auto; margin-top: 2rem; line-height: 1.3; } 
 #sec01 .main__slide-con { top: 47%; } 
 #reference .filter-btn { height: 5rem; } 
 #reference .container { padding-bottom: 17rem; } 
 .page .container { padding: 5rem 0; } 
 .products-grid { display: grid; grid-template-columns: 1fr 1fr; } 
 .support-cards { justify-content: flex-start; margin-top: 6rem; } 
 .support-cards a { flex: 1 1 30%; padding: 2rem; } 
 #sec01 .main__slide-tab-item { padding: 1.8rem 1.2rem; height: 8.4rem; gap: 0 0.8rem; } 
 #sec01 .main__slide-tab-item:nth-child(1) .left_box span { width: 5rem; } 
 #sec01 .main__slide-item { height: 80rem; } 
 .product-img-wrap img { width: 120%; } 
 .product-img-wrap { min-height: 27rem; } 
 .product-card:nth-child(2) .product-img-wrap img { top: 9rem; } 
 .product-card-inner { padding: 1.4rem 1.4rem 0rem 1.4rem; display: flex; justify-content: space-between; flex-direction: row; gap: unset; } 
 .product-card-header { display: flex; justify-content: space-between; } 
 .watermark-track span { font-size: 8rem; letter-spacing: -2px; } 
 .btn-view-all { bottom: 10.4rem; top: unset; left: 50%; transform: translateX(-50%); } 
 }

@media (max-width: 480px){
 .product-card-header { display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; align-items: flex-start; } 
 .product-card-inner { padding: 2rem 2rem 0 2rem; } 
 .product-img-wrap { min-height: 32rem; } 
 .product-card:nth-child(2) .product-img-wrap img { top: 14rem; } 
 .product-card:nth-child(1) .product-img-wrap img { top: 15rem; } 
 .product-card:nth-child(3) .product-img-wrap img { top: 13rem; } 
 .product-card:nth-child(4) .product-img-wrap img { top: 13rem; } 
 }