@charset "utf-8";

.mobMenu, .mobClose { display: none; }
.mobImg { display: none !important; }
@media (max-width:1628px) {
  .main footer { padding: 140px 48px 200px; }
}
@media (max-width:1450px) {
  header > .inner3 { padding-right: 50px; }
  .main .con01 .conBot ul li { padding: 40px 20px; }
  .history .sinceBox > * { flex: 1 1; }
  .history .sinceBox ul, .storyBox .conLeft, .storyBox .conRight { width: 100%; }
  .line-guide { transform: translateX(calc(-50% + 30px)); }
  .history .ad ul { transform: translateY(-50%); }
}
@media (max-width:1400px) {
  .main .con01 .conTop, .main .titleBox .title h3 { font-size: 54px; }
  .main .titleBox .title h2 { font-size: 18px; }
  .main .con01 .conBot ul li { padding: 38px 16px; }
  .main .con01 dt { font-size: 28px; }
  .main .con01 dd:first-of-type { font-size: 18px; line-height: 26px; }
  .main .con01 dd:last-of-type { font-size: 16px; }
  .main .con01 .conBot ul li { gap: 80px; }
  .main .con02 li:first-child { font-size: 98px ; }
  .main .con03 .content { margin-top: 100px; }
  .main .con03 .content li div:last-child { font-size: 20px; }
  .main .con03 .content li .imgBox img { max-width: 80%; max-height: 80%; }
  .main .con03 .content li .imgBox { margin-bottom: 8px;; }
  .inner2 { padding: 0 28px; }
  .main .con04 .titleBox .title .desc { font-size: 24px; }
  .main .formBox { margin-top: 48px; padding: 60px; }
  .main .formBox button { margin-top: 48px; height: 68px; font-size: 19px; }
  .sec_tit7 { font-size: 32px; }
}
@media (max-width:1200px) {
  .pc_only { display: none; }
  .home .mobMenu { margin-right: 0; }
  .mobMenu { display: block; margin-right: 15px; }
  .mobMenu button { background: transparent; border: 0; cursor: pointer; }
  header { transform: none !important; left: 0; }
  header > .inner3 { max-width: 1630px; padding-right: 0; padding: 0 30px; }
  header:not(.home) h1 { padding: 30px 0 30px 30px; }
  header:not(.home) h1::after { left: 0; }
  header .gnbBox { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: #fff; 
    /* align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column-reverse; */
    display: block; transition: right 0.3s ease-in-out; padding: 15px; overflow-y: auto; z-index: 100; }
  header .gnbBox.on { right: 0; }
  .gnbBox nav { position: static; transform: none; padding-top: 0; }
  header.home.scroll nav .gnb > li a {
    color: #000;
}
header.scroll .rightMenu > a, header.open .rightMenu > a {
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.7);
}
  nav .gnb > li > a { color: #000; padding: 15px 0 15px; width: 100%; text-align: left; }
  nav .gnb > li > a { color: #000; padding: 15px 0 15px; width: 100%; text-align: left; }
  nav .gnb > li > a img { filter: brightness(0); }
  nav .gnb { display: block; width: 100%; margin-top: 70px; }
  nav .gnb .subMenu { position: static; transform: translateX(0); padding-top: 0; }
  nav .gnb .subMenu ul { width: 100%; border-radius: 0; padding: 0; background: #f1f1f1; }
  nav .gnb .subMenu ul li a { text-align: left; padding: 10px 0 10px 10px; color: #000; }
  nav .gnb .subMenu ul li ~ li { padding-top: 0; }
  .mobClose { display: block; text-align: right; padding-right: 15px; }
  .mobClose button { background: transparent; border: 0; cursor: pointer; }
  header .rightMenu { padding: 0 ; margin: 15px auto 0; gap: 17px; position: absolute; top: 30px; }
  header .rightMenu > a { color: #000; border: 1px solid rgba(0, 0, 0, 0.7); }
  header .lang button img { filter: invert(100%); }
  nav { width: 100%; }
  .main .con02 .content { justify-content: space-between; gap: 0; }
  .product .category { display: inline-block; margin-bottom: 30px; }
  .product .category > li { display: inline-block; }
  .viewTitle { gap: 50px; }
  .sec_tit3 { font-size: 24px; }
}
@media (max-width:991px) {
  .main .con02 .content { justify-content: space-between; gap: 0; }
  .main .con01 .conTop span { margin-bottom: 28px; }
  div.main > div { height: auto; padding: 80px 5%; }
  .main > div.con01 { background: none; padding: 0; }
  .main .con01 { height: auto; }
  .main .con01 .conTop { font-size: 40px; height: 720px; position: static; transform: none; background: url("../images/main/con01_bg.png") no-repeat center 0; background-size: cover; display: flex; align-items: center; justify-content: center; margin-bottom: 0; padding: 0 5%; }
  .main .con01 .conBot { margin-top: 0; }
  .main .con01 .conBot ul { display: grid; grid-template-columns: repeat(2, 1fr); }
  .conBot ul li dl { display: flex; flex-direction: column; gap: 8px; }
  .more_btn { width: 36px; height: auto; }
  .main .con01 .conBot ul li { padding: 28px 40px; background: none; background-size: 100% 100%; text-align: left; }
  .main .con01 .conBot ul li:after { top: 28px; height: calc(100% - 48px); }
  .main .con01 .conBot ul li dd:first-of-type { display: none; }
  .main .con01 .conBot ul li dd:last-of-type { justify-content: flex-start; }
  .main .con01 .conBot ul li:hover { background: none; }
  .main .con01 dt { font-size: 21px; }
  .main .con01 dd:first-of-type { padding: 15px 0; }
  .main .con01 dd:last-of-type { font-size: 16px; }
  .main .titleBox .title h3 { font-size: 40px; line-height: 1.2; }
  .main .con02 h3 { padding: 17px 0 68px; }
  .main .con02 .content { flex-direction: column; gap: 50px; }
  .main .con02 li:first-child { font-size: 86px; }
  .main .con02 li:nth-child(2) { font-size: 20px; padding: 20px 0 8px; }
  .main .con02 li:last-child { font-size: 16px; }
  .main .titleBox .title .desc { font-size: 18px; }
  .main .con03 .titleBox .title h3 { padding: 15px 0 17px; }
  .main .con03 .content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 0; margin-top: 65px; }
  .main .con03 .content li .imgBox { height: 75px; margin-bottom: 15px; }
  .main .con03 .content li .imgBox img { height: 100%; object-fit: cover; }
  .main .con03 .content li div:last-child { font-size: 16px; }
  .main .con04 .titleBox .title h3 { padding: 15px 0 20px; }
  .main .con04 .titleBox .title .desc { font-size: 18px; }
  .main .formBox { margin-top: 30px; padding: 25px 20px; flex-direction: column; position: relative; }
  .main .formBox div.info label { margin-top: 0; position: absolute; bottom: 100px; z-index: 1; }
  .main .formBox button { width: 100%; height: 50px; font-size: 16px; }
  footer { padding: 35px 5% 30px; }
  footer .footerTop { flex-direction: column; gap: 50px; }
  footer .footerTop ul li { display: block; text-align: center; }
  footer .inner > div ul li ~ li { margin-top: 0; }
  footer .inner > div ul li ~ li div { margin-top: 10px; }
  footer .copyRight { margin-top: 20px; padding-top: 20px; text-align: center; }
  .chatBox { left: 0; top: 0; right: auto; width: 100%; height: 100%; border-radius: 0; padding-top: 60px; }
  .chatMobClose { display: block; position: absolute; right: 15px; top: 30px; border: 0; background: transparent; cursor: pointer; }
  .fixBtn { right: 15px; }
  .mobMenu img { width: 40px; }
  header:not(.home) { top: 15px; }
  header > .inner3 { padding: 0 15px; }
  .subPage { padding: 15px 15px 0; }
  .subLnb .lnbBg img { height: 405px; }
  .subLnb .subTitle { left: 35px; }
  .subLnb .subTitle p { font-size: 16px; padding-bottom: 15px; }
  .subLnb .subTitle h2 { font-size: 40px; }
  .subLnb .lnb { padding: 15px 0; border-radius: 0; max-width: none; }
  .subLnb .lnb .homeBtn { width: 40px; margin-right: 0; }
  .subLnb .lnb div:not(.homeBtn) { min-width: auto; width: calc((100% - 40px) / 2); }
  .subLnb .lnb::before { right: 0; bottom: 100%; rotate: 180deg; }
  .mouse { right: 15px; bottom: 80px; }
  .subPage .content { padding: 80px 0 100px; }
  .subPage .conTop h3 { font-size: 24px; line-height: 1.45; padding-bottom: 35px; }
  .greeting .conTop .desc { font-size: 18px; padding-bottom: 55px; }
  .greeting .conTop img { height: 400px; object-fit: cover; border-radius: 30px; }
  .greeting .conBot { padding-left: 0; padding-right: 0; }
  .greeting .conBot, .greeting .conBot > div ~ div { margin-top: 80px; }
  .greeting .conBot > div { flex-direction: column; }
  .greeting .conBot > div img { height: 376px; width: 100%; object-fit: cover; border-radius: 30px; }
  .greeting .conBot > div:first-child div.conRight, .greeting .conBot > div:last-child div.conLeft { padding-left: 0; padding-top: 35px; }
  .greeting .content dd br { display: none; }
  .greeting .content dd ~ dd { padding-top: 25px; }
  .greeting .conBot > div:last-child { flex-direction: column-reverse; }
  .greeting .conBot > div:last-child div.conRight { padding: 0; }
  .greeting .content dt { font-size: 32px; padding-bottom: 30px; }
  .greeting .content dd { font-size: 18px; }
  .history .sinceBox { flex-direction: column; gap: 48px; }
  .history .sinceBox ul li:first-child { font-size: 20px; }
  .history .sinceBox ul li:nth-child(2) { font-size: 24px; padding: 15px 0; }
  .history .sinceBox ul li:last-child { font-size: 16px; }
  .history .sinceBox img { height: 388px; object-fit: cover; width: 100%; border-radius: 20px; }
  .history .sinceBox { padding: 0; }
  .history .sinceBox > * { width: 100%; }
  .history .ad ul li:first-child { font-size: 20px; }
  .history .ad { margin-top: 55px; }
  .history .ad ul li:last-child { font-size: 36px; padding-top: 15px; }
  .history .ad img { width: 100%; height: 258px; object-fit: cover; border-radius: 20px; }
  .storyBox { flex-direction: column; padding-left: 60px; }
  .line-guide { left: 0; }
  .history .conBot { margin-top: 55px; }
  .storyBox .conLeft { top: 0; padding-top: 15px; background: #fff; z-index: 5; margin-bottom: 130px; }
  .storyBox .storyTitle h3 { font-size: 36px; }
  .storyBox .storyTitle p { font-size: 16px; padding: 15px 0 45px; }
  .storyBox .imgBox { height: 250px; }
  .storyBox .conRight { padding-top: 0; padding-left: 0; }
  .storyBox .conRight dl dt { font-size: 20px; padding-bottom: 16px; }
  .storyBox .conRight dl dd { font-size: 18px; }
  .certifications.subPage .conTop h3 { padding-bottom: 65px; }
  .certifications .conBot ul { grid-template-columns: repeat(3, 1fr); }
  .certifications .conBot ul li .imgBox { padding: 15px 20px; height: 280px; }
  .certifications .conBot ul li p { margin-top: 10px; font-size: 16px; }
  .main .formBox > div.conLeft { padding-right: 0; }
  .directions.subPage .conTop h3 { padding-bottom: 60px; }
  .directions .conBot .info { flex-direction: column; gap: 30px; }
  .directions .conBot .info ul { margin-top: 0; }
  .directions .conBot .info div > img { width: 100%; height: 230px; object-fit: cover; border-radius: 30px; }
  .directions .map { height: 280px; }
  .directions .conBot .conBb { margin-top: 50px; padding-top: 50px; }
  .product.subPage .conTop h3 { padding-bottom: 35px; }
  .productList { grid-template-columns: repeat(3, 1fr); }
  .productList .productCard { padding: 20px 15px; height: auto }
  .productInfo .name { font-size: 18px; padding: 20px 12px; }
  .product .contactAd { margin-top: 100px; padding: 50px 0 55px; }
  .product .contactAd li:first-child { font-size: 16px; }
  .product .contactAd li:nth-child(2) { font-size: 30px; padding: 10px 0 17px; }
  .product .contactAd li:last-child a { font-size: 18px; width: 170px; height: 46px; }
  .viewTitle { flex-direction: column; align-items: flex-start; gap: 25px; padding: 40px 30px; }
  .viewTitle dl dt { font-size: 20px; }
  .viewTitle dl dd, .viewTitle p { font-size: 18px; }
  .viewTitle { grid-template-columns: 1fr; }
  .directions .conBot .info li { font-size: 20px!important; }
}
@media (max-width:767px) {
  div.main > div, .main .con03 { padding: 128px 5%; }
  .main .con01 .conTop, .main .titleBox .title h3 { font-size: 36px; }
  .main .con03 .content { grid-template-columns: repeat(2, 1fr); gap: 48px 0; }
  .main .formBox { padding: 36px; }
  .main .formBox label { font-size: 16px; }
  .main .con01 dt { text-align: center; }
  .main .con01 .conBot ul li { padding: 28px 8px; }
  .main .con01 dd:last-of-type { font-size: 14px; font-weight: 400; }
  .main .con01 .conBot ul li dd:last-of-type { justify-content: center; margin-top: 12px; }
  .main .con01 .conTop br, .main .con01 .conBot ul li dd:first-of-type br, .main .titleBox .title h3 br, .greeting .conTop .desc br, .history .sinceBox ul li:last-child br, .subPage .conTop h3 br { display: none; }
  .conBot ul li dl { gap: 0; }
  header.home { padding: 15px 5%; }
  header:not(.home) h1 { width: 200px; }
  header h1 img { width: 145px; }
  .certifications .conBot ul, .productList { grid-template-columns: repeat(2, 1fr); }
  .productList { gap: 20px 15px; }
  .product .category li a { font-size: 16px; padding: 0 20px; }
  .sec_tit7 { font-size: 24px; }
  .bgap { height: 40px; }
  .sec_tit3 { font-size: 20px; }
  .sec_txt2 { font-size: 15px; }
}
@media (max-width:548px) {
  .main .con01 .conTop, .main .titleBox .title h3 { font-size: 32px; }
  .main .con01 .conBot ul li:first-child, .main .con01 .conBot ul li:nth-child(2) { padding: 28px 40px 0 40px; }
  .more_btn { display: none; }
  .main .con01 .conTop span { margin-bottom: 80px; }
}





/* ==========================================================
   통합 반응형 CSS v4 — response.css 맨 아래에 추가
   대상: hvac.php / chassis.php / engine_electrical.php

   수정 원칙:
   · viewInfo / imgWrap / imgBox 에 overflow:hidden 절대 금지
   · li.on 크기를 34px로 고정해서 뷰포트 이탈 방지
   · left:0 / right:0 처리 버튼은 .on 때 translateX 제거
   ========================================================== */

html { overflow-x: hidden; }

@media (max-width: 767px) {

  /* ── 1. 카테고리 탭 래퍼: 가로 스크롤 ── */
  .product .categoryWrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
  }
  .product .categoryWrap::-webkit-scrollbar { display: none; }
  .product .category { white-space: nowrap; }

  /* ── 2. 카테고리 탭 크기 축소 ──
     vw:397 기준: font:13px + padding:0 5px → catW:365 < wrapW:367 ✅
     vw:500 기준: catW:356 < wrapW:455 ✅                             */
  .product .category li a {
    font-size: 13px !important;
    padding: 0 5px !important;
    height: 42px !important;
    border-radius: 21px !important;
  }

  /* ── 3. viewInfo 이미지 overflow 수정 (hvac) ──
     havc_img max-width:75% × 자연폭 1059px = 794px → 뷰포트 초과
     → imgBox + havc_img max-width:100% 로 부모 기준 제한              */
  .viewInfo .imgBox { max-width: 100%; box-sizing: border-box; }
  .havc_img { max-width: 100% !important; width: auto; height: auto; display: block; margin: 0 auto; }
  .viewInfo .imgWrap { padding: 30px 0; }

  /* ── 4. li.on 크기 고정 ──
     원본: .viewInfo ul li.on { width: max-content; padding-left:25px; }
     → li가 right 기준 좌측으로 늘어나며 viewport 밖으로 이탈 (left:-108px)
     수정: 34px 원형 고정, span(버튼 텍스트) 숨김
     → 팝업으로 내용이 표시되므로 버튼 텍스트 불필요
     검증: li.left 63px (양수) ✅                                      */
  .viewInfo ul li.on {
    width: 34px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 50% !important;
    z-index: 50 !important;
  }
  .viewInfo ul li.on span { display: none !important; }

  /* ── 5. 팝업 툴팁: 버튼 위 중앙 정렬 ──
     infoTxt2(left:100%), infoTxt3(left:100%) → 화면 우측 이탈 수정     */
  .viewInfo .infoTxt,
  .viewInfo .infoTxt2,
  .viewInfo .infoTxt3 {
    left: 50%;
    right: auto;
    bottom: calc(100% + 10px);
    margin: 0;
    transform: translateX(-50%) translateY(10px) scale(0.98);
    max-width: min(260px, calc(100vw - 40px));
    width: min(260px, calc(100vw - 40px));
    padding: 16px 14px;
    box-sizing: border-box;
  }
  .viewInfo ul li.on .infoTxt,
  .viewInfo ul li.on .infoTxt2,
  .viewInfo ul li.on .infoTxt3 {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    z-index: 100;
  }
  .viewInfo .infoTxt h6,.viewInfo .infoTxt2 h6,.viewInfo .infoTxt3 h6 { font-size: 15px; }
  .viewInfo .infoTxt p,.viewInfo .infoTxt2 p,.viewInfo .infoTxt3 p { font-size: 13px; margin-top: 8px; }

  /* ── 6. Chassis item01/03: 왼쪽 끝 버튼 → left:0 ──
     centered 시 -51/-26px 이탈 → left:0 으로 오른쪽 전개
     .on 때 translateX(-50%) 충돌 방지 → translateY(0) only            */
  .product.chassis .viewInfo ul li.item01 .infoTxt,
  .product.chassis .viewInfo ul li.item01 .infoTxt2,
  .product.chassis .viewInfo ul li.item01 .infoTxt3,
  .product.chassis .viewInfo ul li.item03 .infoTxt,
  .product.chassis .viewInfo ul li.item03 .infoTxt2,
  .product.chassis .viewInfo ul li.item03 .infoTxt3 {
    left: 0; right: auto;
    transform: translateY(10px) scale(0.98);
  }
  .product.chassis .viewInfo ul li.item01.on .infoTxt,
  .product.chassis .viewInfo ul li.item01.on .infoTxt2,
  .product.chassis .viewInfo ul li.item01.on .infoTxt3,
  .product.chassis .viewInfo ul li.item03.on .infoTxt,
  .product.chassis .viewInfo ul li.item03.on .infoTxt2,
  .product.chassis .viewInfo ul li.item03.on .infoTxt3 { transform: translateY(0) scale(1); }

  /* ── 7. Engine parts01(왼쪽 끝) → left:0 / parts02(오른쪽 끝) → right:0 ──
     parts01: centered 시 -31px 이탈 → left:0 → 82~342px ✅
     parts02: centered 시 +45px 이탈 → right:0 → 172~432px ✅          */
  .product.engine .viewInfo ul li.engine_parts01 .infoTxt,
  .product.engine .viewInfo ul li.engine_parts01 .infoTxt2,
  .product.engine .viewInfo ul li.engine_parts01 .infoTxt3 {
    left: 0; right: auto;
    transform: translateY(10px) scale(0.98);
  }
  .product.engine .viewInfo ul li.engine_parts01.on .infoTxt,
  .product.engine .viewInfo ul li.engine_parts01.on .infoTxt2,
  .product.engine .viewInfo ul li.engine_parts01.on .infoTxt3 { transform: translateY(0) scale(1); }

  .product.engine .viewInfo ul li.engine_parts02 .infoTxt,
  .product.engine .viewInfo ul li.engine_parts02 .infoTxt2,
  .product.engine .viewInfo ul li.engine_parts02 .infoTxt3 {
    left: auto; right: 0;
    transform: translateY(10px) scale(0.98);
  }
  .product.engine .viewInfo ul li.engine_parts02.on .infoTxt,
  .product.engine .viewInfo ul li.engine_parts02.on .infoTxt2,
  .product.engine .viewInfo ul li.engine_parts02.on .infoTxt3 { transform: translateY(0) scale(1); }

  /* ── 8. contactAd 좌우 패딩 ── */
  .product .contactAd {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border-radius: 20px;
  }
  .product .contactAd li:nth-child(2) { font-size: 22px; word-break: keep-all; }
}