@charset "UTF-8";
/* ==========================================================
   AIR ROAD 공통 스타일 (모든 페이지에서 로드)
   리셋, 색·폰트 변수, 공통 컴포넌트(헤더·푸터·버튼·섹션 타이틀), 메인 페이지 스타일.
   ========================================================== */

/* 색상·폰트 변수 */
:root { --green: #00ae1d; --black: #222; --gray-6: #666; --gray-8: #888; --gray-9: #999; --line: #ddd; --bg-gray: #f4f6f8; --footer-bg: #232323; --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; }

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body { font-family: var(--font); color: var(--black); line-height: 1.4; overflow-x: hidden; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { vertical-align: top; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; }
em { font-style: normal; }

.inner { width: 1400px; max-width: calc(100% - 80px); margin: 0 auto; }

/* ---------- common: section title ---------- */
.sec-eyebrow { font-size: 18px; font-weight: 400; letter-spacing: 3.6px; text-transform: uppercase; }
.sec-eyebrow.green { color: var(--green); }
.sec-eyebrow.white { color: #fff; }
.sec-title { margin-top: 15px; font-size: 50px; font-weight: 800; color: var(--black); }
.sec-title.white { color: #fff; }
.sec-desc { margin-top: 25px; font-size: 20px; color: var(--gray-8); line-height: 28px; }
.sec-desc.white { color: #fff; }
.sec-head.center { text-align: center; }
.sec-head.between { display: flex; justify-content: space-between; align-items: flex-end; }
.sec-head.between .btn-outline { margin-bottom: 6px; }

/* ---------- common: outline button ---------- */
.btn-outline { display: inline-flex; align-items: center; justify-content: space-between; width: 250px; height: 65px; padding: 0 30px; border: 1px solid #333; border-radius: 3px; font-size: 18px; font-weight: 600; color: var(--black); transition: background .3s, color .3s; }
.btn-outline.white { border-color: #fff; color: #fff; }
.btn-outline.lg { width: 300px; height: 80px; border-radius: 5px; font-size: 20px; font-weight: 700; letter-spacing: -0.6px; }
.btn-arrow { position: relative; width: 20px; height: 12px; }
.btn-arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; border-radius: 999px; background: currentColor; transform: translateY(-50%); }
.btn-arrow::after { content: ""; position: absolute; right: 1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); border-radius: 1px; }
.btn-outline:hover { background: #333; color: #fff; }
.btn-outline.white:hover { background: #fff; color: var(--black); }

/* ==========================================================
   HEADER
   ========================================================== */
#header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; padding-top: 50px; transition: padding .3s ease, background .3s ease, box-shadow .3s ease; }
/* 스크롤 시: 상단 고정 + 좁아짐 + 다크 글래스 (텍스트 흰색 유지) */
#header.scrolled { padding-top: 14px; padding-bottom: 14px; background: rgba(20, 22, 26, .72); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.header-inner { position: relative; z-index: 2; /* 모바일 메뉴 오버레이 위에 로고/버튼 유지 */ width: 1660px; max-width: calc(100% - 80px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo a { display: flex; align-items: center; gap: 10px; }
.logo-img { width: 51px; height: 51px; object-fit: cover; }
.logo-txt { font-family: Arial, sans-serif; font-weight: 700; font-size: 26px; color: #fff; }
.gnb ul { display: flex; gap: 90px; }
.gnb a { position: relative; font-size: 22px; font-weight: 700; color: #fff; transition: opacity .2s; }
.gnb a:hover { opacity: .65; }
/* active(현재 페이지): 색 대신 하단 바 표시 */
.gnb > ul > li > a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 3px; border-radius: 2px; background: var(--green); }
/* GNB 2뎁스 드롭다운 (데스크톱, hover) */
.gnb > ul > li { position: relative; }
.gnb .sub-menu { display: block; position: absolute; top: 100%; left: 50%; margin-top: 24px; min-width: 150px; padding: 10px 0; background: rgba(20, 22, 26, .85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.gnb .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.gnb .has-sub:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gnb .sub-menu a { display: block; padding: 11px 26px; font-size: 17px; font-weight: 500; color: #fff; white-space: nowrap; text-align: center; transition: opacity .2s; }
.gnb .sub-menu a:hover { opacity: .6; }
.gnb .sub-menu a.active { color: var(--green); opacity: 1; }
.lang-btn { display: flex; align-items: center; gap: 9px; width: 130px; height: 55px; padding: 0 23px; border: 1px solid #fff; border-radius: 999px; }
.lang-globe { width: 26px; height: 26px; flex-shrink: 0; }
.lang-btn span { font-family: Arial, sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.lang-arrow { width: 8px; height: 7px; margin-left: auto; flex-shrink: 0; background: #fff; clip-path: polygon(50% 100%, 0 25%, 100% 25%); transition: transform .3s ease; }
.lang.open .lang-arrow { transform: rotate(180deg); }

/* 언어 드롭다운 */
.lang { position: relative; }
.lang-btn { cursor: pointer; }
.lang-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; min-width: 100px; padding: 6px; list-style: none; background: rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px; overflow: hidden; z-index: 120; /* 닫힘 상태 */ max-height: 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: max-height .35s ease, opacity .25s ease, transform .3s ease, visibility .35s; }
.lang.open .lang-menu { max-height: 160px; opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt { display: block; width: 100%; text-align: center; padding: 10px 16px; border-radius: 10px; font-family: Arial, sans-serif; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.lang-opt:hover { background: rgba(255, 255, 255, .14); }
.lang-opt.is-active { color: var(--green); }

.lnb { display: flex; align-items: center; gap: 15px; }

/* 햄버거 (모바일 전용) */
.menu-btn { display: none; position: relative; width: 26px; height: 20px; }
.menu-btn span { position: absolute; left: 0; width: 100%; height: 3px; background: #fff; transition: transform .3s, opacity .3s, width .3s; }
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: 8px; }
.menu-btn span:nth-child(3) { top: 16px; left: auto; right: 0; width: 55%; }
.menu-btn.active span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-btn.active span:nth-child(2) { opacity: 0; }
.menu-btn.active span:nth-child(3) { top: 8px; width: 100%; transform: rotate(-45deg); }

/* 모바일 메뉴 패널 */
.m-gnb { display: none; position: absolute; top: 0; left: 0; z-index: 1; /* 헤더(fixed)가 기준 → 스크롤 backdrop-filter 영향 없음 */ width: 100%; height: 100vh; height: 100dvh; padding-top: 72px; /* 헤더 바 아래부터 시작 */ background: rgba(0, 0, 0, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.m-gnb.open { opacity: 1; visibility: visible; }
.m-gnb a { display: block; padding: 20px 24px; font-size: 18px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); }
/* 모바일 2뎁스 아코디언 */
.m-sub-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 24px; font-size: 18px; font-weight: 700; color: #fff; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.m-sub-arrow { flex-shrink: 0; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg); transition: transform .3s ease; }
.m-has-sub.open .m-sub-arrow { transform: rotate(-135deg); }
.m-sub { max-height: 0; overflow: hidden; background: rgba(255, 255, 255, .04); transition: max-height .35s ease; }
.m-has-sub.open .m-sub { max-height: 320px; }
.m-sub a { padding: 15px 24px 15px 44px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.m-gnb a.active { color: var(--green); }

/* 유틸 */
.m-only { display: none; }
.btn-outline.full { width: 100%; justify-content: center; gap: 12px; }

/* ==========================================================
   HERO (swiper)
   ========================================================== */
.hero { position: relative; height: 100vh; min-height: 800px; overflow: hidden; /* 하단을 곡선으로 잘라내는 마스크 (시안 m_bg 이미지) */ -webkit-mask-image: url("../images/main_mask_1.svg"); mask-image: url("../images/main_mask_1.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.hero-swiper { height: 100%; }
.hero-slide { position: relative; height: 100%; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.hero-txt { position: relative; z-index: 1; padding-top: 285px; text-align: center; color: #fff; }
.hero-eyebrow { font-size: 24px; font-weight: 500; }
.hero-title { margin-top: 10px; font-size: 50px; font-weight: 700; line-height: 70px; letter-spacing: -1px; }
.hero-desc { margin-top: 15px; font-size: 22px; font-weight: 500; line-height: 28px; }
.hero-en { margin-top: 50px; font-size: 18px; line-height: 28px; letter-spacing: 3.6px; text-transform: uppercase; }

/* 하단 배너 (표시 전용, 링크 없음) */
.hero-banner { position: absolute; left: 0; bottom: 0; z-index: 1; display: flex; width: 100%; }
.hero-banner li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 30px; height: 130px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .2); border-left: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.hero-banner li:first-child { border-left: 1px solid rgba(255, 255, 255, .2); }
.banner-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.banner-txt strong { display: block; font-size: 24px; font-weight: 700; color: #fff; line-height: 24px; }
.banner-txt span { display: block; margin-top: 12px; font-size: 20px; color: #fff; line-height: 24px; }

/* 페이지네이션 (Swiper) */
.hero-swiper .swiper-pagination { position: absolute; left: 50%; bottom: 200px; top: auto; z-index: 2; transform: translateX(-50%); display: flex; gap: 11px; width: auto; }
.hero-swiper .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0; border-radius: 999px; background: rgba(255, 255, 255, .5); opacity: 1; transition: width .3s, background .3s; }
.hero-swiper .swiper-pagination-bullet-active { width: 30px; background: #fff; }

/* ==========================================================
   CON_2 회사 소개
   ========================================================== */
.company { position: relative; padding: 150px 0 195px; color: #fff; }
.company-bg { position: absolute; inset: 0; z-index: -1; background: url("../images/main_bg_3.jpg") center / cover no-repeat; -webkit-mask-image: url("../images/main_mask_2.svg"); mask-image: url("../images/main_mask_2.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.company-inner { display: flex; justify-content: space-between; align-items: flex-start; }
.company-txt .sec-desc { margin-top: 20px; }
.company-txt .btn-outline { margin-top: 100px; }
.company-list { display: grid; grid-template-columns: repeat(2, 300px); gap: 20px; }
.company-list li { width: 300px; height: 125px; padding: 30px; background: rgba(0, 0, 0, .2); border-radius: 10px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.company-list strong { display: block; font-size: 24px; font-weight: 700; }
.company-list span { display: block; margin-top: 8px; font-size: 18px; opacity: .8; }

/* ==========================================================
   CON_3 제품 소개
   ========================================================== */
.products { padding: 150px 0; background: var(--bg-gray); }
.products .sec-desc { margin-top: 15px; }
.product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
.product-card { display: block; height: 540px; padding: 80px 30px 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; text-align: center; color: inherit; text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .3s; }
.product-card:hover { border-color: var(--green); box-shadow: 0 10px 30px rgba(0, 174, 29, .12); transform: translateY(-8px); }
.product-img { display: flex; align-items: center; justify-content: center; height: 265px; margin-bottom: 50px; }
.product-img img { max-width: 310px; max-height: 265px; object-fit: contain; }
.product-list strong { display: block; font-size: 28px; font-weight: 700; color: var(--black); }
.product-list span { display: block; margin-top: 20px; font-size: 20px; color: var(--gray-6); }

/* ==========================================================
   CON_4 제품 적용 분야
   ========================================================== */
.application { padding: 150px 0 160px; }
.app-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 27px; margin-top: 65px; }
.app-card { display: block; position: relative; overflow: hidden; height: 380px; padding: 40px 30px 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; color: inherit; text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .3s; }
.app-card:hover { border-color: var(--green); box-shadow: 0 10px 30px rgba(0, 174, 29, .12); transform: translateY(-8px); }
.app-card:hover .app-arrow { background-color: var(--green); }
.app-head { display: flex; justify-content: space-between; align-items: center; }
.app-head strong { font-size: 28px; font-weight: 700; color: var(--black); }
/* 화살표: arrow.svg를 mask로 사용 (hover 시 색 변경 위해) + 카드 우상단 고정 */
.app-arrow { position: absolute; top: 30px; right: 30px; width: 13px; height: 14px; flex-shrink: 0; background-color: #333; -webkit-mask: url("../images/arrow.svg") no-repeat center / contain; mask: url("../images/arrow.svg") no-repeat center / contain; transition: background-color .3s; }
.app-card > p { margin-top: 5px; font-size: 20px; color: var(--gray-6); line-height: 28px; }
.app-img { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 270px; height: 160px; border-radius: 10px; overflow: hidden; }
.app-img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   CON_5 AR TECHNOLOGY
   ========================================================== */
.technology { position: relative; padding: 150px 0; color: #fff; }
.tech-bg { position: absolute; inset: 0; z-index: -1; background: url("../images/main_bg_4.jpg") center / cover no-repeat; -webkit-mask-image: url("../images/main_mask_3.svg"); mask-image: url("../images/main_mask_3.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.tech-inner { display: flex; justify-content: space-between; align-items: center; }
.tech-txt .sec-title { line-height: 1.3; }
.tech-txt .sec-desc { margin-top: 20px; }

/* ==========================================================
   CON_6 에어로드 뉴스
   ========================================================== */
.news { padding: 150px 0; }
.news-list { margin-top: 70px; }
.news-list li + li { margin-top: 15px; }
.news-list a { display: flex; align-items: center; height: 100px; padding: 0 40px; background: var(--bg-gray); border-radius: 10px; transition: background .3s; }
.news-list a:hover { background: var(--green); }
.news-list a:hover strong { color: #fff; }
.news-list a:hover .news-date { color: rgba(255, 255, 255, .85); }
.news-list a:hover .news-arrow::before { border-color: #fff; }
.news-list strong { flex: 1; font-size: 22px; font-weight: 500; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.news-date { margin-right: 40px; font-size: 18px; color: var(--gray-9); transition: color .3s; }
.news-arrow { position: relative; width: 12px; height: 20px; }
.news-arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; border-top: 2px solid var(--gray-9); border-right: 2px solid var(--gray-9); transform: translateY(-50%) rotate(45deg); border-radius: 1px; transition: border-color .3s; }

/* ==========================================================
   CON_7 문의하기
   ========================================================== */
.contact { position: relative; padding: 200px 0 175px; color: #fff; }
.contact .sec-eyebrow { font-size: 15px; letter-spacing: 3px; }
.contact-bg { position: absolute; inset: 0; z-index: -1; background: url("../images/main_bg_5.jpg") center / cover no-repeat; -webkit-mask-image: url("../images/main_mask_4.svg"); mask-image: url("../images/main_mask_4.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.contact-inner { display: flex; justify-content: space-between; align-items: flex-end; }
.contact-txt .sec-title { font-size: 50px; }
.contact-copy { margin-top: 40px; font-size: 50px; line-height: 1.4; color: #fff; }
.contact-copy span { font-weight: 400; }
.contact-copy strong { font-weight: 800; }
.contact-btn { margin-bottom: 8px; }

/* ==========================================================
   FOOTER
   ========================================================== */
#footer { padding: 60px 0 70px; background: var(--footer-bg); color: #fff; }
.footer-top { display: flex; justify-content: space-between; align-items: center; }
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo img { width: 51px; height: 51px; object-fit: cover; }
.footer-logo span { font-family: Arial, sans-serif; font-weight: 700; font-size: 26px; }
.footer-btns { display: flex; gap: 10px; }
.footer-btns a { display: flex; align-items: center; justify-content: center; width: 170px; height: 55px; border: 1px solid var(--gray-6); border-radius: 999px; font-size: 16px; transition: background .3s; }
.footer-btns a:hover { background: #333; }
.footer-line { height: 1px; margin: 40px 0; background: #393939; }
.footer-info { font-size: 18px; }
.footer-info em { margin-right: 20px; color: var(--gray-6); }
.footer-row { display: flex; align-items: center; gap: 45px; margin-top: 18px; }
.footer-copy { margin-left: auto; color: var(--gray-6); }

/* ==========================================================
   반응형 (PC 축소 대응. 모바일 시안은 아래 767px 블록에서 별도 처리)
   ========================================================== */
@media (max-width: 1720px) {
  .gnb ul { gap: 50px; }
}
@media (max-width: 1480px) {
  html { font-size: 15px; }
  .sec-title { font-size: 42px; }
  .hero-title { font-size: 42px; line-height: 58px; }
  .contact-copy { font-size: 42px; }
  .banner-txt strong { font-size: 20px; }
  .banner-txt span { font-size: 16px; margin-top: 8px; }
  .hero-banner li { gap: 16px; padding: 0 10px; }
  .gnb a { font-size: 18px; }
  .gnb ul { gap: 34px; }
  .company-list { grid-template-columns: repeat(2, 260px); }
  .company-list li { width: 260px; padding: 24px; }
  /* 적용분야 4열 구간 텍스트 축소 (잘림 방지) */
  .app-head strong { font-size: 22px; }
  .app-card > p { font-size: 16px; line-height: 24px; }
}

/* ----- 중간 구간 보정 (제품/적용분야 2열 전환 + 푸터) ----- */
@media (max-width: 1280px) {
  .product-list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .app-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  /* 히어로 하단 배너: 좁은 컬럼 줄바꿈 방지 (폰트·아이콘·간격 축소) */
  .hero-banner li { gap: 10px; padding: 0 8px; }
  .banner-icon { width: 32px; height: 32px; }
  .banner-txt strong { font-size: 16px; line-height: 20px; }
  .banner-txt span { font-size: 13px; margin-top: 6px; line-height: 18px; }
  /* 푸터 카피라이트를 아래 줄로 내려 줄바꿈 방지 */
  .footer-row { flex-wrap: wrap; }
  .footer-copy { flex-basis: 100%; margin-left: 0; margin-top: 16px; }
}

/* ----- 태블릿 (구간 보정) ----- */
@media (max-width: 1024px) {
  .gnb { display: none; }
  .menu-btn { display: block; }
  .m-gnb { display: block; }
}

/* 태블릿 구간: 히어로 배너 아이콘/텍스트 세로 정렬 (좁은 컬럼 줄바꿈 방지) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-banner li { flex-direction: column; gap: 8px; padding: 0 6px; }
  .banner-txt { text-align: center; }

  /* 회사 소개: 좌우 배치가 눌리므로 세로 스택으로 정리 */
  .company-inner { display: block; text-align: center; }
  .company-txt .sec-desc br { display: none; }
  /* 강제 줄바꿈 해제 → 자연 줄바꿈 */
  .company-txt .btn-outline { display: none; }
  /* 중간 버튼 숨김 */
  .company-list { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 40px auto 0; }
  .company-list li { width: auto; }
  .company .btn-outline.m-only { /* 하단 버튼 노출 (시안과 동일) */ display: inline-flex; width: auto; margin: 35px auto 0; }

  /* AR TECHNOLOGY: 제목이 버튼과 겹치므로 세로 스택으로 정리 */
  .tech-inner { display: block; text-align: center; }
  .technology .btn-outline.lg { margin-top: 35px; border-color: #fff; }
}

/* ==========================================================
   모바일 (m_AIR ROAD_main 시안 720px 기준을 360px로 환산)
   ========================================================== */
@media (max-width: 767px) {
  .inner { max-width: calc(100% - 30px); }

  /* 공통 타이틀 (모바일에서는 전부 가운데 정렬) */
  /* 360=시안값 하한, 큰 폰에서 완만 확대 (clamp) */
  .sec-eyebrow { font-size: clamp(11px, 3vw, 15px); letter-spacing: 2.2px; }
  .sec-title { margin-top: 10px; font-size: clamp(25px, 6.9vw, 40px); }
  .sec-desc { margin-top: 15px; font-size: clamp(13px, 3.6vw, 20px); line-height: 1.35; }
  .sec-head.between { display: block; text-align: center; }
  .sec-head.between .btn-outline { display: none; }
  /* PC 우측 버튼 → 모바일은 하단 풀폭 */
  .m-only { display: inline-flex; }
  br.m-only { display: inline; }
  /* br은 줄바꿈 유지 (inline-flex면 안 깨짐) */
  .btn-outline { height: 45px; padding: 0 20px; border-radius: 5px; border-color: #222; font-size: 14px; font-weight: 700; }
  .btn-outline.full { margin-top: 15px; }
  .btn-outline.lg { width: 175px; height: 45px; font-size: 14px; }

  /* header */
  #header { padding-top: 16px; }
  #header.scrolled { padding-top: 9px; padding-bottom: 9px; }
  .header-inner { max-width: calc(100% - 30px); }
  .logo-img { width: 27px; height: 27px; }
  .logo-txt { font-size: 13px; }
  .lang-btn { width: 80px; height: 30px; padding: 0 10px; gap: 5px; }
  .lang-globe { width: 13px; height: 13px; }
  .lang-btn span { font-size: 13px; }
  .lang-arrow { width: 7px; height: 6px; }
  .lang-menu { top: calc(100% + 5px); padding: 4px; border-radius: 10px; min-width: 80px; }
  .lang-opt { padding: 7px 10px; font-size: 12px; border-radius: 7px; }

  /* 히어로 높이: 모바일 시안(720×1000) 비율 그대로. 1000÷720 ≈ 139vw */
  .hero { height: 139vw; min-height: 0; }
  .hero-txt { padding-top: 21.5vw; }
  /* 360 시안 기준을 최소값으로, 큰 폰(~767)에서는 완만하게 확대 (clamp) */
  .hero-eyebrow { font-size: clamp(12px, 3.3vw, 24px); }
  .hero-title { margin-top: 8px; font-size: clamp(22.5px, 5.2vw, 34px); line-height: 1.35; letter-spacing: -0.45px; }
  .hero-desc { margin-top: 12px; font-size: clamp(11px, 3.1vw, 22px); line-height: 1.45; }
  .hero-en { margin-top: 14px; font-size: clamp(10px, 2.5vw, 18px); line-height: 1.5; letter-spacing: 2px; }

  /* 배너: 2열 그리드 (슬라이드1은 5번째 풀폭) */
  .hero-banner { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-banner li { height: 19.4vw; gap: 2.8vw; /* 시안 140px / 20px */ justify-content: flex-start; padding: 0 5vw; border-left: 0; border-top: 0; }
  .hero-banner li:first-child { border-left: 0; }
  .banner-feature li:nth-child(5) { grid-column: 1 / -1; }
  .banner-icon { width: 6.9vw; height: 6.9vw; }
  /* 시안 50px */
  .banner-txt strong { font-size: 4.2vw; line-height: 1.2; }
  /* 시안 30px */
  .banner-txt span { margin-top: 1.4vw; font-size: 3.3vw; line-height: 1.2; }
  /* 시안 24px */
  .hero-swiper .swiper-pagination { display: none; }
  /* 모바일은 페이지네이션 숨김 */

  /* con_2 회사 소개 */
  .company { padding: 35px 0 40px; text-align: center; }
  .company-inner { display: block; }
  .company-txt .sec-desc { margin-top: 15px; }
  .company-txt .btn-outline { display: none; }
  /* PC용 중간 버튼 숨김 → 하단 m-only 버튼만 노출 */
  .company-list { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }
  .company-list li { width: auto; height: 70px; padding: 16px 15px; text-align: left; }
  .company-list strong { font-size: 15px; }
  .company-list span { margin-top: 6px; font-size: 13px; }
  .company .btn-outline.full { border-color: #fff; }

  /* con_3 제품 소개 */
  .products { padding: 35px 0 40px; }
  .product-list { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
  .product-card { height: 260px; padding: 37px 10px 0; }
  .product-img { height: 110px; margin-bottom: 25px; }
  .product-img img { max-width: 116px; max-height: 110px; }
  .product-list strong { font-size: 15px; }
  .product-list span { margin-top: 8px; font-size: 13px; line-height: 17.5px; }

  /* con_4 적용 분야 */
  .application { padding: 35px 0 40px; }
  .app-list { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
  .app-card { height: 222px; padding: 20px 15px 0; }
  .app-head strong { font-size: 15px; }
  .app-arrow { top: 15px; right: 15px; }
  .app-card > p { margin-top: 8px; font-size: 13px; line-height: 17.5px; }
  .app-img { /* 패딩 안쪽(콘텐츠 폭)에 맞춤 + 라운드 제거 */ left: 15px; right: 15px; width: auto; height: 100px; bottom: 15px; transform: none; border-radius: 0; }

  /* con_5 technology */
  .technology { padding: 35px 0 40px; text-align: center; }
  .tech-inner { display: block; }
  .tech-txt .sec-desc { margin-top: 10px; }
  .technology .btn-outline.lg { margin-top: 75px; border-color: #fff; }

  /* con_6 뉴스 */
  .news { padding: 35px 0 40px; }
  .news .sec-head.between { text-align: center; }
  .news-list { margin-top: 20px; }
  .news-list li + li { margin-top: 10px; }
  .news-list a { height: 55px; padding: 0 18px; border-radius: 6px; }
  .news-list strong { font-size: clamp(15px, 3.5vw, 18px); margin-right: 14px; }
  .news-date { margin-right: 15px; font-size: clamp(12px, 3.2vw, 16px); }
  .news-arrow { transform: scale(.8); }

  /* con_7 문의하기 */
  .contact { padding: 35px 0 40px; text-align: center; }
  .contact .sec-eyebrow { font-size: 11px; letter-spacing: 2.2px; }
  .contact-inner { display: block; }
  .contact-copy { margin-top: 25px; font-size: clamp(25px, 6.9vw, 40px); }
  .contact-btn { margin: 40px auto 0; }

  /* footer */
  #footer { padding: 40px 0 45px; text-align: center; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-logo img { width: 30px; height: 30px; }
  .footer-logo span { font-size: clamp(14px, 3.8vw, 20px); }
  .footer-btns { justify-content: center; gap: 8px; }
  .footer-btns a { width: auto; padding: 0 26px; height: 40px; font-size: clamp(13px, 3.6vw, 17px); }
  .footer-line { margin: 30px 0; }
  .footer-info { font-size: clamp(13px, 3.6vw, 18px); }
  .footer-info em { margin-right: 10px; }
  .footer-addr { font-size: clamp(12px, 3.4vw, 16px); line-height: 1.5; }
  .footer-addr em { display: block; margin: 0 0 8px; font-size: clamp(13px, 3.6vw, 17px); }
  .footer-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 26px; margin-top: 26px; }
  .footer-row p:nth-child(3) { flex-basis: 100%; }
  /* 이메일 */
  .footer-copy { flex-basis: 100%; margin: 10px 0 0; font-size: clamp(12px, 3.3vw, 15px); }
}

/* 좁은 폰(≤460px): 적용분야 카드 설명 강제 줄바꿈 해제 → 자연 줄바꿈 */
@media (max-width: 460px) {
  .app-card > p br { display: none; }
}

/* ==========================================================
   터치 기기: hover 효과 전부 해제 (탭 후 고착 방지)
   ========================================================== */
@media (hover: none) {
  .btn-outline:hover { background: transparent; color: var(--black); }
  .btn-outline.white:hover { background: transparent; color: #fff; }
  .gnb a:hover { opacity: 1; }
  .lang-opt:hover { background: transparent; }
  .product-card:hover { border-color: var(--line); box-shadow: none; transform: none; }
  .app-card:hover { border-color: var(--line); box-shadow: none; transform: none; }
  .app-card:hover .app-arrow { background-color: #333; }
  .prod-list > li:hover { border-color: var(--line); box-shadow: none; transform: none; }
  .news-list a:hover { background: var(--bg-gray); }
  .news-list a:hover strong { color: var(--black); }
  .news-list a:hover .news-date { color: var(--gray-9); }
  .news-list a:hover .news-arrow::before { border-color: var(--gray-9); }
  .footer-btns a:hover { background: transparent; }
}