@charset "utf-8";
/* GS TECZEN 메인·공통 */

:root {
  --gs-navy: #06111d;
  --gs-orange: #e55c29;
  --gs-ink: #171b1f;
  --gs-gray: #4b5157;
  --gs-line: #e3e6ea;
  --gs-soft: #f4f6f8;
  --gs-hd-h: 90px;
  --gs-side: clamp(20px, 5.2vw, 100px);
}

html.is-sitemap-open { overflow: hidden; }
body { background: #fff; color: var(--gs-ink); letter-spacing: -0.02em; }
#gs-wrap img { max-width: 100%; }

/* ===== 헤더 ===== */
#gs-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
#gs-hd.is-sub,
#gs-hd.is-scrolled { background: rgba(6, 17, 29, .88); border-bottom-color: rgba(255, 255, 255, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gs-hd__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; height: var(--gs-hd-h); padding: 0 var(--gs-side); }
.gs-hd__logo { flex: none; display: block; width: 205px; }
.gs-hd__logo img { display: block; width: 100%; height: auto; }

.gs-gnb > ul { display: flex; gap: clamp(30px, 3.6vw, 70px); }
.gs-gnb__item { position: relative; }
.gs-gnb__link { display: block; line-height: var(--gs-hd-h); font-size: 20px; font-weight: 700; color: #fff; opacity: .6; letter-spacing: -0.02em; white-space: nowrap; transition: opacity .2s; }
.gs-gnb__item:hover .gs-gnb__link,
.gs-gnb__item.is-active .gs-gnb__link { opacity: 1; }
.gs-gnb__sub { position: absolute; top: 100%; left: 50%; min-width: 180px; padding: 14px 0; background: rgba(6, 17, 29, .96); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s, visibility .2s; }
.gs-gnb__item:hover .gs-gnb__sub,
.gs-gnb__item:focus-within .gs-gnb__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.gs-gnb__sub a { display: block; padding: 9px 24px; font-size: 16px; color: rgba(255, 255, 255, .75); white-space: nowrap; text-align: center; }
.gs-gnb__sub a:hover { color: var(--gs-orange); }

.gs-hd__util { flex: none; display: flex; align-items: center; gap: 14px; }
.gs-hd__menu { width: 47px; height: 47px; padding: 0; background: none; border: 0; cursor: pointer; }
.gs-hd__menu img { display: block; width: 100%; }
.gs-hd__contact { display: flex; align-items: center; gap: 10px; padding: 10px 30px; border-radius: 100px; background: var(--gs-orange); color: #fff; font-size: 20px; font-weight: 500; line-height: 1.2; transition: background .2s; }
.gs-hd__contact:hover { background: #cf4c1c; }
.gs-hd__contact img { width: 16px; height: 16px; }

/* 전체메뉴 */
.gs-sitemap { position: fixed; inset: var(--gs-hd-h) 0 0 0; z-index: 999; background: rgba(2, 3, 6, .7); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
html.is-sitemap-open .gs-sitemap { opacity: 1; visibility: visible; }
html.is-sitemap-open #gs-hd { background: var(--gs-navy); border-bottom-color: rgba(255, 255, 255, .2); }
.gs-sitemap__inner { background: var(--gs-navy); padding: 60px var(--gs-side) 80px; max-height: 100%; overflow-y: auto; }
.gs-sitemap__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; max-width: 1720px; margin: 0 auto; }
.gs-sitemap__en { font-size: 14px; font-weight: 600; color: var(--gs-orange); letter-spacing: .08em; }
.gs-sitemap__title { display: block; margin: 8px 0 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .2); font-size: 26px; font-weight: 800; color: #fff; }
.gs-sitemap__list ul a { display: block; padding: 7px 0; font-size: 17px; color: rgba(255, 255, 255, .65); }
.gs-sitemap__list ul a:hover { color: #fff; }

/* ===== 공통 타이포 ===== */
.gs-h2 { font-size: clamp(30px, 3.125vw, 60px); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 0 20px #02050a; word-break: keep-all; }
.gs-lead { font-size: clamp(16px, 1.354vw, 26px); font-weight: 400; line-height: 1.55; color: #fff; text-shadow: 0 0 20px #02050a; word-break: keep-all; }
.gs-btn-line { display: inline-flex; align-items: center; justify-content: center; padding: 10px 30px; border: 1px solid #fff; border-radius: 100px; color: #fff; font-size: clamp(15px, 1.04vw, 20px); font-weight: 500; text-transform: uppercase; white-space: nowrap; transition: background .2s, border-color .2s; }
.gs-btn-line:hover { background: var(--gs-orange); border-color: var(--gs-orange); }

/* ===== 메인 ===== */
#gs-main section { position: relative; overflow: hidden; color: #fff; }

/* 비주얼 */
.gs-visual { height: 100vh; min-height: 640px; background: var(--gs-navy); }
.gs-visual__slider { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-visual__slider .swiper-slide { position: relative; height: 100%; overflow: hidden; }
.gs-visual__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.gs-visual__slider .swiper-slide::after { content: ""; position: absolute; inset: 0; background: rgba(2, 3, 6, .3); }
.gs-visual__slider .swiper-slide-active .gs-visual__img { animation: gs-zoom 7s ease-out both; }
@keyframes gs-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.gs-visual__copy { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 0 var(--gs-side); transform: translateY(-50%); }
.gs-visual__text { flex: 1; text-align: center; }
.gs-visual__title { font-size: clamp(30px, 3.65vw, 70px); font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.02em; text-shadow: 0 0 20px #02050a; }
.gs-visual__desc { margin-top: 11px; font-size: clamp(15px, 1.5625vw, 30px); font-weight: 300; }
.gs-visual__arrow { flex: none; width: 48px; height: 80px; padding: 0; background: none; border: 0; cursor: pointer; opacity: .2; transition: opacity .2s; }
.gs-visual__arrow:hover { opacity: .8; }
.gs-visual__arrow img { width: 38px; height: 77px; }
.gs-visual__scroll { position: absolute; left: 50%; bottom: 40px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translateX(-50%); font-size: 14px; font-weight: 300; text-transform: uppercase; }
.gs-visual__scroll i { position: relative; width: 3px; height: 60px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.gs-visual__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 20px; background: var(--gs-orange); animation: gs-scroll 1.8s ease-in-out infinite; }
@keyframes gs-scroll { from { transform: translateY(-20px); } to { transform: translateY(60px); } }

/* 회사소개 */
.gs-about { background: var(--gs-navy); }
.gs-about::before { content: ""; position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; opacity: .1; }
#gs-main .gs-about { overflow: visible; }
.gs-about__inner { position: relative; display: flex; justify-content: space-between; gap: 60px; padding: calc(var(--gs-hd-h) + 108px) var(--gs-side) 160px; }
.gs-about__text { flex: 1; }
.gs-about__sticky { position: sticky; top: var(--gs-hd-h); display: flex; flex-direction: column; justify-content: center; gap: 40px; height: calc(100vh - var(--gs-hd-h)); max-height: 760px; }
.gs-about__list { flex: none; display: flex; flex-direction: column; gap: 40px; width: 45.15%; max-width: 867px; }
.gs-about__card a { position: relative; display: block; aspect-ratio: 867 / 635; padding: 64px 66px; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; }
.gs-about__card a::before { content: ""; position: absolute; inset: 0; background: rgba(6, 17, 29, .8); transition: background .5s; }
.gs-about__card strong {position: relative;display: block;font-size: clamp(24px, 2.08vw, 40px);font-weight: 700;opacity: .3;transition: opacity .5s;color: #fff;}
.gs-about__card .gs-more {position: absolute;left: 66px;bottom: 56px;font-size: 18px;text-transform: uppercase;opacity: 0;transition: opacity .5s;color: #fff;}
.gs-about__card.is-active a::before {background: rgba(6, 17, 29, .3);}
.gs-about__card.is-active strong,
.gs-about__card.is-active .gs-more { opacity: 1; }

/* 제품소개 */
.gs-products { min-height: 100vh; background: var(--gs-navy); }
.gs-products::before { content: ""; position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; opacity: .4; }
.gs-products__inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; min-height: 100vh; padding: calc(var(--gs-hd-h) + 117px) var(--gs-side) 117px; }
.gs-products__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 6px; }
.gs-products__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.gs-pcard { display: flex; justify-content: space-between; gap: 20px; height: 100%; padding: 40px 10px 10px 40px; border-radius: 20px; background: #fff; transition: background .3s; }
.gs-pcard__text strong { display: block; font-size: clamp(26px, 2.08vw, 40px); font-weight: 900; color: var(--gs-ink); white-space: nowrap; transition: color .3s; }
.gs-pcard__text em { display: block; margin-top: 14px; font-size: clamp(15px, 1.04vw, 20px); font-weight: 700; font-style: normal; color: var(--gs-gray); transition: color .3s; }
.gs-pcard__img { display: flex; flex-direction: column; align-items: center; width: 52%; max-width: 287px; padding-top: 60px; }
.gs-pcard__img img:first-child { width: 85%; transform: rotate(10.82deg); transition: transform .6s; }
.gs-pcard__shadow { width: 40%; margin-top: 4px; }
.gs-pcard:hover { background: var(--gs-orange); }
.gs-pcard:hover strong,
.gs-pcard:hover em { color: #fff; }
.gs-pcard:hover .gs-pcard__img img:first-child { transform: rotate(40deg); }

/* 기술 및 생산 */
.gs-tech { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: calc(var(--gs-hd-h) + 102px) var(--gs-side) 100px; background: var(--gs-navy) center / cover no-repeat; }
.gs-tech__head { text-align: center; }
.gs-tech__head .gs-lead { margin-top: 16px; }
.gs-tech__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.gs-tcard { display: block; height: 166px; padding: 40px; border-radius: 20px; background: rgba(6, 17, 29, .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: #fff; transition: background .3s; }
.gs-tcard strong { display: block; font-size: clamp(26px, 2.08vw, 40px); font-weight: 900; }
.gs-tcard em { display: block; margin-top: 14px; font-size: clamp(15px, 1.04vw, 20px); font-weight: 700; font-style: normal; }
.gs-tcard:hover { background: var(--gs-orange); }

/* 문의 */
.gs-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 593px; padding: calc(var(--gs-hd-h) + 120px) var(--gs-side) 120px; background: var(--gs-navy) center / cover no-repeat; text-align: center; }
.gs-cta .gs-lead { margin-top: 16px; }
.gs-cta .gs-btn-line { margin-top: 80px; }

/* 풀페이지 */
html.gs-fp,
html.gs-fp body { height: 100%; overflow: hidden; }
#gs-fp { transition: transform .9s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
html.gs-fp #gs-hd { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.gs-fp .gs-visual,
html.gs-fp .gs-products,
html.gs-fp .gs-tech { height: 100vh; min-height: 0; }
html.gs-fp .gs-products__inner { height: 100%; min-height: 0; }
html.gs-fp #gs-main .gs-about { height: 100vh; overflow: hidden; }
html.gs-fp .gs-about__inner { height: 100%; }
html.gs-fp .gs-about__text { display: flex; align-items: center; }
html.gs-fp .gs-about__sticky { position: static; height: auto; max-height: none; }
html.gs-fp .gs-about__list { transition: transform .9s cubic-bezier(.65, 0, .35, 1); will-change: transform; }

/* ===== 푸터 ===== */
#gs-ft { background: #000; color: #99a1af; font-size: 16px; line-height: 24px; }
.gs-ft__inner { display: flex; justify-content: space-between; gap: 40px; padding: 65px 255px 80px 113px; }
.gs-ft__brand img { width: 205px; }
.gs-ft__brand p { margin-top: 20px; color: #6a7282; }
.gs-ft__cols { display: flex; gap: 47px; }
.gs-ft__cols h4 { margin-bottom: 24px; font-size: 20px; line-height: 28px; font-weight: 700; color: #fff; }
.gs-ft__contact { width: 387px; }
.gs-ft__contact li { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.gs-ft__contact li img { flex: none; width: 24px; height: 24px; }
.gs-ft__links li { margin-bottom: 10px; }
#gs-ft a { color: #99a1af; }
#gs-ft a:hover { color: #fff; }

/* ===== 반응형 ===== */
@media (max-width: 1600px) {
  .gs-ft__inner { padding: 65px var(--gs-side) 80px; }
}

@media (max-width: 1280px) {
  :root { --gs-hd-h: 72px; }
  .gs-gnb { display: none; }
  .gs-hd__logo { width: 160px; }
  .gs-sitemap__list { grid-template-columns: repeat(3, 1fr); }
  .gs-products__list,
  .gs-tech__list { gap: 20px; }
  .gs-pcard { padding: 30px 6px 6px 26px; }
  .gs-tcard { padding: 30px; height: auto; }
}

@media (max-width: 1024px) {
  .gs-about__inner { flex-direction: column; gap: 40px; padding: 80px var(--gs-side); }
  .gs-about__sticky { position: static; height: auto; gap: 24px; }
  .gs-about__list { width: 100%; max-width: none; gap: 20px; }
  .gs-about__card a { aspect-ratio: 380 / 200; padding: 30px; }
  .gs-about__card a::before { background: rgba(6, 17, 29, .45); }
  .gs-about__card strong { opacity: 1; }
  .gs-about__card .gs-more { left: 30px; bottom: 26px; font-size: 14px; opacity: 1; }
  .gs-products__inner { min-height: 0; padding: 80px var(--gs-side); }
  .gs-products__list,
  .gs-tech__list { grid-template-columns: 1fr; }
  .gs-pcard { align-items: center; }
  .gs-pcard__img { width: 45%; padding-top: 0; }
  .gs-tech { min-height: 0; padding: 80px var(--gs-side); }
  .gs-cta { min-height: 0; padding: 80px var(--gs-side); }
  .gs-cta .gs-btn-line { margin-top: 40px; }

  .gs-ft__inner { flex-direction: column; padding: 40px 20px 50px; }
  .gs-ft__cols { flex-direction: column; gap: 40px; }
  .gs-ft__contact { width: auto; }

}

@media (max-width: 640px) {
  :root { --gs-hd-h: 64px; }
  .gs-hd__inner { gap: 10px; }
  .gs-hd__logo { width: 130px; }
  .gs-hd__util { gap: 6px; }
  .gs-hd__menu { width: 36px; height: 36px; }
  .gs-hd__contact { padding: 7px 16px; font-size: 15px; gap: 6px; }
  .gs-sitemap__list { grid-template-columns: 1fr; gap: 30px; }
  .gs-sitemap__inner { padding: 30px 20px 50px; }

  .gs-visual { height: 350px; min-height: 0; }
  .gs-visual__copy { top: auto; bottom: 70px; transform: none; padding: 0 12px; }
  .gs-visual__arrow { width: 24px; height: 40px; }
  .gs-visual__arrow img { width: 18px; height: 36px; }
  .gs-visual__scroll { display: none; }
  .gs-pcard__img { width: 50%; }
  .gs-products__row { flex-direction: column; align-items: flex-start; }

}