/* 반응형 보강 — 원본 style.css는 수정하지 않고 덮어쓴다 (2026-10 리뉴얼) */

/* 공통: 이미지 유동폭 */
#con img, #main img { max-width: 100%; height: auto; }

/* ===== ≤1024px : 유동 컨테이너 ===== */
@media (max-width: 1024px) {
  #header, #footer, .index, .navi-bg .white-bg { min-width: 0; }
  #header .container, #footer .container { width: auto; padding: 0 16px; }
  .navi { width: 100%; left: 0; }
  .gnb { left: 190px; }
  .gnb ul li { width: 115px; }
  .gnb .depth1 { font-size: 15px; }
  .language { right: 16px; }
  #con .con_wrap { width: auto; padding: 60px 16px 0; }
  #con .con_wrap .con_left { width: 150px; margin-right: 30px; }
  #con .con_wrap .con_left ul li { width: auto; }
  #con .con_wrap .con_right { width: calc(100% - 180px); }
  #con .con_box.sub1_3 .tab, #con .con_box.sub1_3 .tab > li > div.tab_box, #con .con_box.sub4_1 .form_wrap { width: 100%; }
  #con .con_box.sub1_3 .tab > li > a { width: auto; }
  #con .con_box .packaging .inner .left, #con .con_box .packaging .inner .right { width: 48%; margin-right: 4%; }
  #con .con_box .packaging .inner .right { margin-right: 0; }
  #con .con_box ul.prd li { width: 32%; margin-right: 2%; }
  #con .con_box ul.prd li:nth-child(3n) { margin-right: 0; }
  #con .con_box.sub3_1 .process_box .box, #con .con_box.sub3_1 .process_box .box.b1, #con .con_box.sub3_1 .process_box .box.b2, #con .con_box.sub3_1 .process_box .box.b3, #con .con_box.sub3_1 .process_box .box.b4 { width: 49.5%; height: auto; min-height: 300px; box-sizing: border-box; }
  #con .con_box.sub3_1 .process_box .box .padding, #con .con_box.sub3_1 .process_box .box.b1 .padding, #con .con_box.sub3_1 .process_box .box.b2 .padding, #con .con_box.sub3_1 .process_box .box.b3 .padding, #con .con_box.sub3_1 .process_box .box.b4 .padding { padding: 40px 20px 20px 40px; }
  #con .con_box.sub3_1 .process_box .circle { display: none; }
  #con .con_box.sub3_3 ul.deliver li { width: 23.5%; margin-right: 2%; }
  #con .con_box.sub3_3 ul.deliver li:nth-child(4n) { margin-right: 0; }
  #con .con_box.sub3_4 ul.cert li { width: 23.5%; margin-right: 2%; }
  #con .con_box.sub3_4 ul.cert li:nth-child(4n) { margin-right: 0; }
  #con .con_box.sub3_4 ul.cert li .img, #con .con_box.sub3_4 ul.cert li .img img, #con .con_box.sub3_4 ul.cert li .bg { width: 100%; height: auto; }
  #con .con_box.sub2_4 .triple_img .img { width: 32%; margin-right: 2%; }
  #con .con_box.sub2_4 .triple_img .img:nth-child(3n) { margin-right: 0; }
  #con .con_box.sub1_2 .ci_box.logo.system .con .logo_img .left, #con .con_box.sub1_2 .ci_box.logo.system .con .logo_img .right { width: 100%; float: none; }
  #con .con_box.sub1_2 .ci_box.pattern .con .pattern_box ul { width: 100%; }
  #con .con_box.sub1_2 .ci_box.pattern .con .pattern_box ul li { width: 30%; margin-right: 5%; }
  #con .con_box.sub1_2 .ci_box.rule .con .rule_box .box { width: 33%; }
  #con .con_box.sub4_1 .form_wrap .form_box dl dd { width: calc(100% - 250px); }
  #con .con_box.sub4_1 .form_wrap .form_box dl dd input, #con .con_box.sub4_1 .form_wrap .form_box textarea { width: 100%; box-sizing: border-box; }
  /* 메인 */
  #main .page ul.business { width: 100%; padding: 17% 16px 0; box-sizing: border-box; }
  #main .page ul.business li { width: 19%; margin-right: 1.25%; }
  #main .page ul.business li.last { margin-right: 0; }
}

/* ===== ≤768px : 모바일 내비게이션·1~2열 ===== */
@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }
  #header { height: 70px; }
  #header .container { min-height: 70px; }
  .navi { height: 70px; }
  h1 { width: 150px; }
  h1 a { width: 150px; height: auto; padding-top: 22px; }
  h1 a img { width: 150px; }
  .language { right: 60px; }
  .language li { height: 50px; padding-top: 16px; }
  .navi-bg { display: none !important; }

  /* 햄버거 버튼 */
  .nav-toggle { display: block; position: absolute; right: 8px; top: 15px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; z-index: 800; padding: 0; }
  .nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: #363636; transition: transform .2s, opacity .2s; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* GNB → 세로 패널 */
  .gnb { display: none; position: fixed; left: 0; right: 0; top: 70px; bottom: 0; height: auto; overflow-y: auto; background: #fff; border-top: 1px solid #ddd; z-index: 900; }
  body.nav-open .gnb { display: block; }
  .gnb > ul > li { float: none; width: 100%; height: auto; text-align: left; border-bottom: 1px solid #eee; }
  .gnb .depth1 { height: 50px; line-height: 50px; text-align: left; padding: 0 20px; font-weight: 500; color: #1b4591; box-sizing: border-box; }
  .gnb ul li ul { display: block !important; opacity: 1 !important; transform: none !important; padding: 0 0 10px; min-height: 0; background: #f7f8fa; }
  .gnb ul li ul li { height: auto; }
  .gnb ul li ul li a { text-align: left; padding: 0 32px; line-height: 40px; box-sizing: border-box; }
  body.nav-open { overflow: hidden; }

  /* 서브 레이아웃 */
  #con .sub_vis { height: 220px; }
  #con .sub_vis h2 { padding-top: 95px; font-size: 24px; }
  #con .con_wrap { padding: 30px 16px 0; }
  #con .con_wrap .con_left { float: none; width: 100%; margin: 0 0 20px; }
  #con .con_wrap .con_left h3.title { height: auto; padding: 0 0 10px 30px; background-position: 0 0; background-size: 24px; font-size: 20px; }
  #con .con_wrap .con_left ul { display: flex; flex-wrap: wrap; border-top: 0; }
  #con .con_wrap .con_left ul li { padding: 0; border: 1px solid #ddd; margin: 0 6px 6px 0; }
  #con .con_wrap .con_left ul li a, #con .con_wrap .con_left ul li.double a { height: 34px; line-height: 34px; padding: 0 12px; font-size: 14px; }
  #con .con_wrap .con_left ul li.on { border-color: #2263af; background: #2263af; }
  #con .con_wrap .con_left ul li.on a { color: #fff; }
  #con .con_wrap .con_right { float: none; width: 100%; }
  #con .con_wrap .con_right .title { height: auto; margin-bottom: 24px; }
  #con .con_wrap .con_right .title h4 { font-size: 26px; }
  #con .con_wrap .con_right .title ul.history { display: none; }
  #con .con_box { padding-bottom: 60px; }

  /* 표: 세로 쌓기 */
  #con .con_box .table_box table, #con .con_box .table_box tbody, #con .con_box .table_box tr, #con .con_box .table_box th, #con .con_box .table_box td { display: block; width: 100% !important; box-sizing: border-box; }
  #con .con_box .table_box colgroup { display: none; }
  #con .con_box .table_box th { text-align: left; }
  #con .con_box .table_box#default table thead { display: none; }
  #con .con_box .table_box#default table tbody th, #con .con_box .table_box#default table tbody td { height: auto; line-height: 1.5; padding: 10px 12px; border-right: 0 !important; }

  /* 격자류 2열 */
  #con .con_box ul.prd li, #con .con_box.sub3_3 ul.deliver li, #con .con_box.sub3_4 ul.cert li, #con .con_box.sub2_4 .triple_img .img { width: 48.5%; margin-right: 3%; }
  #con .con_box ul.prd li:nth-child(3n), #con .con_box.sub3_3 ul.deliver li:nth-child(4n), #con .con_box.sub3_4 ul.cert li:nth-child(4n), #con .con_box.sub2_4 .triple_img .img:nth-child(3n) { margin-right: 3%; }
  #con .con_box ul.prd li:nth-child(2n), #con .con_box.sub3_3 ul.deliver li:nth-child(2n), #con .con_box.sub3_4 ul.cert li:nth-child(2n), #con .con_box.sub2_4 .triple_img .img:nth-child(2n) { margin-right: 0; }
  #con .con_box .packaging .inner .left, #con .con_box .packaging .inner .right { width: 100%; float: none; margin: 0 0 16px; }
  #con .con_box.sub3_1 .process_box .box, #con .con_box.sub3_1 .process_box .box.b1, #con .con_box.sub3_1 .process_box .box.b2, #con .con_box.sub3_1 .process_box .box.b3, #con .con_box.sub3_1 .process_box .box.b4 { width: 100%; height: auto; float: none; min-height: 0; border: 1px solid #b7b7b7 !important; margin-bottom: 12px; background-size: 50% auto !important; background-position: right bottom !important; }
  #con .con_box.sub3_1 .process_box .box .padding, #con .con_box.sub3_1 .process_box .box.b1 .padding, #con .con_box.sub3_1 .process_box .box.b2 .padding, #con .con_box.sub3_1 .process_box .box.b3 .padding, #con .con_box.sub3_1 .process_box .box.b4 .padding { padding: 20px 16px; }
  #con .con_box.sub1_2 .ci_box.rule .con .rule_box .box { width: 50%; }
  #con .con_box.sub1_2 .ci_box.pattern .con .pattern_box ul li { width: 100%; margin: 0 0 12px; }

  /* 찾아오시는 길 */
  #con .con_box.sub1_3 .tab > li > a { font-size: 16px; height: 48px; line-height: 48px; }
  #con .con_box.sub1_3 .map { height: 240px; }
  #con .con_box.sub1_3 .map-links { right: 8px; bottom: 8px; }
  #con .con_box.sub1_3 .map-links a { height: 32px; line-height: 32px; padding: 0 10px; font-size: 13px; margin-left: 4px; }

  /* 견적문의 폼 */
  #con .con_box.sub4_1 p.txt { font-size: 15px; }
  #con .con_box.sub4_1 .form_wrap .form_box dl, #con .con_box.sub4_1 .form_wrap .form_box dl.first { height: auto; margin-bottom: 14px; }
  #con .con_box.sub4_1 .form_wrap .form_box dl dt { float: none; width: 100%; height: 32px; line-height: 32px; text-indent: 16px; border: 0; }
  #con .con_box.sub4_1 .form_wrap .form_box dl.essential dt { background-position: 4px 51%; }
  #con .con_box.sub4_1 .form_wrap .form_box dl dd { float: none; width: 100%; height: auto; padding: 0; border: 0; }
  #con .con_box.sub4_1 .form_wrap .form_box dl dd input { height: 44px; border: 1px solid #ccc; padding: 0 10px; }
  #con .con_box.sub4_1 .form_wrap .form_box textarea { height: 180px; border: 1px solid #ccc; padding: 10px; }
  #con .con_box.sub4_1 .form_wrap textarea#agree-text { height: 120px; }
  #con .con_box.sub4_1 p.send { margin-top: 30px; }

  /* 푸터 */
  #footer { height: auto; padding: 24px 0; }
  #footer .container p { line-height: 1.6; font-size: 12px; }

  /* 메인: 풀페이지 스크롤 해제, 세로 흐름 */
  .index { height: auto; min-height: 0; overflow: visible; }
  #video { display: none; }
  #main { position: relative; height: auto; }
  #main .page { display: block; position: relative; height: auto; overflow: visible; }
  #main .page:first-child { height: 260px; background: #000 url(../img/p_img/visual_main.jpg) no-repeat center center; background-size: cover; }
  #main .page .big_logo { margin-top: 0; padding-top: 100px; }
  #main .page .big_logo img { width: 60%; }
  #main .page .scroll_view, .page-pagination { display: none !important; }
  #main .page ul.business { height: auto; padding: 24px 16px 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
  #main .page ul.business li { position: relative; float: none; width: 48.5%; height: 240px; margin: 0 0 16px; background-size: cover !important; background-position: center 35% !important; border: 1px solid #e5e5e5; overflow: hidden; }
  #main .page ul.business li:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.95) 45%); }
  #main .page ul.business li .logo, #main .page ul.business li h3, #main .page ul.business li a { position: relative; z-index: 2; }
  #main .page ul.business li .logo { margin-top: 140px; }
  #main .page ul.business li h3 { font-size: 15px; margin: 4px 0 8px; }
  #main .page p.copyright { position: static; height: auto; padding: 16px; line-height: 1.5; font-size: 12px; box-sizing: border-box; }
  #main .page p.copyright a { display: inline-block; }
}

/* ===== ≤480px : 1열 ===== */
@media (max-width: 480px) {
  #con .con_wrap .con_right .title h4 { font-size: 22px; }
  #con .con_box ul.prd li, #con .con_box.sub3_3 ul.deliver li, #con .con_box.sub3_4 ul.cert li, #con .con_box.sub2_4 .triple_img .img { width: 100%; margin-right: 0 !important; }
  #con .con_box.sub1_2 .ci_box.rule .con .rule_box .box { width: 100%; }
  #con .con_box ul.script_txt li p.tit { font-size: 16px; }
  #con .con_box ul.script_txt li p.txt { font-size: 14px; line-height: 22px; }
  #con .con_box.sub1_3 .map-links a { display: block; margin: 0 0 6px; text-align: center; }
  #main .page ul.business li { width: 100%; height: 220px; }
  #main .page ul.business li .logo { margin-top: 120px; }
}

/* 햄버거 버튼은 모바일에서만 */
@media (min-width: 769px) { .nav-toggle { display: none; } }