#tap {
      display: none;
  }

  .onframe {
      width: 100%;
      height: 1600px;
  }

.main_frame {
    width: 100%;
    height: 500px;
}


  .page {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px 100px;
  }

  @media (max-width: 1024px) {
      .onframe {
          width: 100%;
          height: 1500px;
      }

      .main_frame {
    width: 100%;
    height: 500px;
}

      .page {
          width: 100%;
          max-width: 1440px;
          margin: 0 auto;
          padding: 0 20px 80px;
      }
  }



  .board_title {
      padding: 70px 0;
  }

  .board_title h2 {
      font-size: 38px;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 0px;
  }


  @media (max-width: 1024px) {
      .board_title h2 {
          font-size: 28px;
      }

      .board_title {
          padding: 50px 0;
      }
  }


  /* =========================================
           Sticky Horizontal Tab Navigation
           ========================================= */
  .sticky-tab-wrapper {
      position: sticky;
      top: 90px;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      background: #ffffff;
      border-bottom: 2px solid #e0e0e0;
  }

  .sticky-tab-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px;
  }

  .breadcrumbs-compact {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 16px 0;
      font-size: 14px;
      color: #666666;
  }

  .breadcrumbs-compact a {
      color: #666666;
      transition: color 0.3s;
  }

  .breadcrumbs-compact a:hover {
      color: #008751;
  }

  .breadcrumbs-compact .separator {
      color: #cccccc;
  }

  .breadcrumbs-compact .current {
      font-weight: 600;
      color: #008751;
  }

  .horizontal-tabs {
      display: flex;
      gap: 0;
      scrollbar-width: none;
      overflow-x: auto;
      -ms-overflow-style: none;
  }

  .horizontal-tabs::-webkit-scrollbar {
      display: none;
  }

  .horizontal-tabs a {
      display: flex;
      align-items: center;
      position: relative;
      padding: 20px 32px;
      font-size: 16px;
      font-weight: 600;
      color: #666666;
      white-space: nowrap;
      transition: all 0.3s;
      border-bottom: 3px solid transparent;
  }

  .horizontal-tabs a:hover {
      background: #f8f9fa;
      color: #008751;
  }

  .horizontal-tabs a.active {
      background: #f0fdf4;
      color: #008751;
      border-bottom-color: #008751;
  }

  /* =========================================
           Full-Width Page Container
           ========================================= */
  .page-fullwidth {
      width: 100%;
  }

  /* Content Container with Max-Width */
  .content-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
  }

  /* Section Full-Width Backgrounds */
  .section-fullwidth {
      width: 100%;
  }

  /* =========================================
           Hero Section (Full-Width)
           ========================================= */
  .about-hero {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
      background-position: 50% 0;
      background-size: cover;
  }

  .about-hero:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      content: '';
  }

  .pagetop01 {
      background: url('/img/main_slide/m1.jpg') no-repeat 50% 50%;
      background-size: cover;

  }

  .pagetop02 {
      background: url('/img/page/pagetop02.jpg') no-repeat 50% 20%;
      background-size: cover;
  }

  .pagetop03 {
      background: url('/img/page/pagetop03.jpg') no-repeat 50% 20%;
      background-size: cover;
  }

  .pagetop04 {
      background: url('/img/page/pagetop04.jpg') no-repeat 50% 50%;
      background-size: cover;
  }

  .pagetop05 {
      background: url('/img/page/pagetop05.jpg') no-repeat 50% 50%;
      background-size: cover;
  }

  .pagetop001 {
      background: url('/img/page/pagetop001.jpg') no-repeat 50% 50%;
      background-size: cover;
  }

  .about-hero::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(6, 25, 18, 0.6));
      content: '';
  }

  .about-hero-content {
      position: relative;
      z-index: 10;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      color: #ffffff;
      text-align: center;
  }

  .about-hero-label {
      display: inline-block;
      font-size: 14px;
      font-weight: 700;
      color: #10ba98;
      text-transform: uppercase;
      letter-spacing: 5px;
      margin-top: 70px;
      margin-bottom: 20px;
  }

  .about-hero-title {
      font-size: 38px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 20px;
  }

  .about-hero-subtitle {
      font-size: 20px;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
  }

  /* =========================================
           CEO Message Section
           ========================================= */
  .ceo-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .ceo-inner {
      display: flex;
      gap: 80px;
      align-items: flex-start;
  }

  .ceo-text {
      flex: 1.5;
  }

  .ceo-image {
      flex: 1;
  }

  .ceo-label {
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: #008751;
      text-transform: uppercase;
      margin-bottom: 16px;
  }

  .ceo-title {
      font-size: 40px;
      font-weight: 700;
      line-height: 1.3;
      color: #111111;
      margin-bottom: 40px;
  }

  .ceo-message {
      font-size: 18px;
      line-height: 1.4;
      color: #333333;
      margin-bottom: 30px;
  }

  .ceo-message p {
      margin-bottom: 24px;
  }

  .ceo-message strong {
      font-weight: 700;
      color: #008751;
  }

  .ceo-signature {
      display: flex;
      margin-top: 50px;
  }

  .ceo-name {
      font-size: 24px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 8px;
  }

  .ceo-name span {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
  }

  .ceo-image-wrap {
      position: relative;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      overflow: hidden;
  }

  .ceo-image-wrap img {
      width: 100%;
      height: auto;
  }

  /* =========================================
           Core Values Section
           ========================================= */
  .core-values-section {
      padding: 100px 0;
      background: #f8f9fa;
  }

  .core-values-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .core-values-grid {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(3, 1fr);
  }

  .core-value-card {
      padding: 50px 30px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      background: #ffffff;
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
  }

  .core-value-card:hover {
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transform: translateY(-10px);
  }

  .core-value-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #008751, #00a060);
  }

  .core-value-icon i {
      font-size: 36px;
      color: #ffffff;
  }

  .core-value-title {
      font-size: 24px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 16px;
  }

  .core-value-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #555555;
  }

  /* =========================================
           Timeline Section
           ========================================= */
  .timeline-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .timeline-header {
      text-align: center;
      margin-bottom: 80px;
  }

  .timeline-list {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
  }

  .timeline-item {
      display: flex;
      gap: 40px;
      position: relative;
      margin-bottom: 60px;
  }

  .timeline-year {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 0 4px 15px rgba(0, 135, 81, 0.3);
      background: #008751;
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
  }

  .timeline-content {
      flex: 1;
      padding: 24px;
      border-radius: 12px;
      background: #f9f9f9;
      border-left: 4px solid #008751;
  }

  .timeline-content ul {
      list-style: none;
  }

  .timeline-content li {
      position: relative;
      font-size: 16px;
      line-height: 1.8;
      color: #333333;
      margin-bottom: 8px;
      padding-left: 20px;
  }

  .timeline-content li::before {
      position: absolute;
      left: 0;
      font-weight: 700;
      color: #008751;
      content: '▪';
  }

  /* =========================================
           Partners Section
           ========================================= */
  .partners-section {
      padding: 100px 0;
      background: #f8f9fa;
  }

  .partners-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .certification-grid {
      display: grid;
      gap: 30px;
      max-width: 900px;
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: 60px;
      margin-left: auto;
      margin-right: auto;
  }

  .certification-card {
      padding: 40px;
      border: 2px solid #008751;
      border-radius: 12px;
      background: #ffffff;
      text-align: center;
  }

  .cert-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      margin-bottom: 20px;
  }

  .cert-title {
      font-size: 20px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 8px;
  }

  .cert-desc {
      font-size: 15px;
      color: #666666;
  }

  .partners-logo-grid {
      display: grid;
      gap: 24px;
      max-width: 1000px;
      margin: 0 auto;
      grid-template-columns: repeat(4, 1fr);
  }

  .partner-logo-box {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100px;
      padding: 30px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background: #ffffff;
      transition: all 0.3s;
  }

  .partner-logo-box:hover {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      transform: translateY(-4px);
  }

  /* =========================================
           Branch Network Section
           ========================================= */
  .branch-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .branch-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .branch-grid {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: 60px;
  }

  .branch-card {
      padding: 30px;
      border-radius: 12px;
      background: #f9f9f9;
      transition: all 0.3s;
      border-left: 4px solid #008751;
  }

  .branch-card:hover {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      background: #ffffff;
  }

  .branch-name {
      font-size: 22px;
      font-weight: 700;
      color: #008751;
      margin-bottom: 12px;
  }

  .branch-address {
      font-size: 16px;
      line-height: 1.6;
      color: #555555;
      margin-bottom: 12px;
  }

  .branch-tel {
      font-size: 15px;
      color: #666666;
  }

  .branch-cta {
      padding: 60px 40px;
      border-radius: 16px;
      background: linear-gradient(135deg, #008751, #00a060);
      color: #ffffff;
      text-align: center;
  }

  .branch-cta-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 16px;
  }

  .branch-cta-tel {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 24px;
  }

  .btn-cta-white {
      display: inline-block;
      padding: 16px 40px;
      border-radius: 50px;
      background: #ffffff;
      font-size: 18px;
      font-weight: 700;
      color: #008751;
      transition: all 0.3s;
  }

  .btn-cta-white:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      background: #f0f0f0;
      transform: translateY(-2px);
  }

  /* =========================================
           Responsive Design
           ========================================= */
  @media (max-width: 1024px) {
      .sticky-tab-wrapper {
          top: 70px;
      }

      .sticky-tab-inner {
          align-items: flex-start;
          flex-direction: column;
          padding: 0 24px;
      }

      .breadcrumbs-compact {
          padding: 12px 0 8px;
      }

      .horizontal-tabs {
          width: 100%;
          padding-bottom: 8px;
      }

      .horizontal-tabs a {
          padding: 16px 24px;
          font-size: 15px;
      }

      .content-container {
          padding: 0 24px;
      }

      .ceo-inner {
          gap: 40px;
          flex-direction: column;
      }

      .core-values-grid {
          gap: 20px;
          grid-template-columns: 1fr;
      }

      .certification-grid {
          grid-template-columns: 1fr;
      }

      .partners-logo-grid {
          grid-template-columns: repeat(3, 1fr);
      }

      .branch-grid {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 767px) {
      .about-hero {
          height: 400px;
      }

      .about-hero-title {
          font-size: 26px;
          line-height: 1.4;
      }

      .about-hero-subtitle {
          font-size: 16px;
      }

      .horizontal-tabs a {
          padding: 14px 20px;
          font-size: 14px;
      }

      .ceo-image {
          flex: 1;
          order: 1;
      }

      .ceo-text {
          flex: 1;
          order: 2;
      }

      .ceo-section,
      .core-values-section,
      .timeline-section,
      .partners-section,
      .branch-section {
          padding: 60px 0;
      }

      .ceo-title {
          font-size: 28px;
      }

      .ceo-message {
          font-size: 16px;
      }

      .timeline-list::before {
          left: 40px;
      }

      .timeline-year {
          width: 60px;
          height: 60px;
          font-size: 16px;
      }

      .timeline-item {
          gap: 24px;
      }

      .partners-logo-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .branch-cta-title {
          font-size: 22px;
      }

      .branch-cta-tel {
          font-size: 36px;
      }
  }












  /* =========================================
   Sub-Pages Common Stylesheet
   서부소방가스설비 - 서브페이지 공통 스타일
   ========================================= */

  /* =========================================
   Sticky Horizontal Tab Navigation
   ========================================= */
  .sticky-tab-wrapper {
      position: sticky;
      top: 90px;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      background: #ffffff;
      border-bottom: 2px solid #e0e0e0;
  }

  .sticky-tab-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px;
  }

  .breadcrumbs-compact {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 16px 0;
      font-size: 14px;
      color: #666666;
  }

  .breadcrumbs-compact a {
      color: #666666;
      transition: color 0.3s;
  }

  .breadcrumbs-compact a:hover {
      color: #008751;
  }

  .breadcrumbs-compact .separator {
      color: #cccccc;
  }

  .breadcrumbs-compact .current {
      font-weight: 600;
      color: #008751;
  }

  .horizontal-tabs {
      display: flex;
      gap: 0;
      justify-content: center;
      scrollbar-width: none;
      overflow-x: auto;
      -ms-overflow-style: none;
  }

  .horizontal-tabs::-webkit-scrollbar {
      display: none;
  }

  .horizontal-tabs a {
      display: flex;
      align-items: center;
      padding: 20px 32px;
      font-size: 16px;
      font-weight: 600;
      color: #666666;
      white-space: nowrap;
      transition: all 0.3s;
      border-bottom: 3px solid transparent;
  }

  .horizontal-tabs a:hover {
      background: #f8f9fa;
      color: #008751;
  }

  .horizontal-tabs a.active {
      background: #f0fdf4;
      color: #008751;
      border-bottom-color: #008751;
  }

  /* =========================================
   Full-Width Page Container
   ========================================= */
  .page-fullwidth {
      width: 100%;
  }

  .content-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
  }

  .section-fullwidth {
      width: 100%;
  }

  /* =========================================
   Page Hero Section
   ========================================= */
  .page-hero {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
      background-position: center;
      background-size: cover;
  }

  .page-hero::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 135, 81, 0.5));
      content: '';
  }

  .page-hero-content {
      position: relative;
      z-index: 10;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      color: #ffffff;
      text-align: center;
  }

  .page-hero-label {
      display: inline-block;
      font-size: 14px;
      font-weight: 700;
      color: #00ff88;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 16px;
  }

  .page-hero-title {
      font-size: 48px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 16px;
  }

  .page-hero-subtitle {
      font-size: 18px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
  }

  /* =========================================
   Product Introduction Section
   ========================================= */
  .product-intro-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .product-intro-inner {
      display: flex;
      gap: 60px;
      align-items: center;
  }

  .product-intro-text {
      flex: 1;
  }

  .product-intro-image {
      flex: 1;
  }

  .product-intro-image img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .product-label {
      display: inline-block;
      padding: 6px 16px;
      border-radius: 20px;
      background: #e8f5e9;
      font-size: 14px;
      font-weight: 700;
      color: #008751;
      margin-bottom: 20px;
  }

  .product-title {
      font-size: 40px;
      font-weight: 800;
      line-height: 1.3;
      color: #111111;
      margin-bottom: 24px;
  }

  .product-desc {
      font-size: 18px;
      line-height: 1.8;
      color: #333333;
      margin-bottom: 30px;
  }

  .product-highlight-list {
      list-style: none;
      margin-bottom: 40px;
  }

  .product-highlight-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 17px;
      line-height: 1.6;
      color: #333333;
      margin-bottom: 14px;
  }

  .product-highlight-list li i {
      flex-shrink: 0;
      font-size: 20px;
      color: #008751;
      margin-top: 2px;
  }

  /* =========================================
   Features Grid Section
   ========================================= */
  .features-section {
      padding: 100px 0;
      background: #f8f9fa;
  }

  .features-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .features-grid {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(3, 1fr);
  }

  .feature-card {
      padding: 40px 30px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      background: #ffffff;
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
  }

  .feature-card:hover {
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transform: translateY(-8px);
  }

  .feature-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #008751, #00a060);
  }

  .feature-icon i {
      font-size: 36px;
      color: #ffffff;
  }

  .feature-title {
      font-size: 22px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 14px;
  }

  .feature-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #555555;
  }

  /* =========================================
   Construction Site Gallery Section
   ========================================= */
  .construction-gallery-section {
      padding: 80px 0;
      background: #ffffff;
  }

  .construction-gallery-header {
      text-align: center;
      margin-bottom: 50px;
  }

  .construction-gallery-grid {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(4, 1fr);
  }

  .construction-gallery-item {
      position: relative;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
  }

  .construction-gallery-item:hover {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transform: translateY(-6px);
  }

  .construction-gallery-item img {
      width: 100%;
      height: 280px;
      transition: transform 0.5s;
      object-fit: cover;
  }

  .construction-gallery-item:hover img {
      transform: scale(1.1);
  }

  .construction-overlay {
      display: none;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
      color: #ffffff;
      transition: transform 0.3s;
      transform: translateY(100%);
  }

  .construction-gallery-item:hover .construction-overlay {
      transform: translateY(0);
  }

  .construction-label {
      font-size: 14px;
      font-weight: 600;
      opacity: 0.9;
  }

  /* =========================================
   Social Contribution Section
   ========================================= */
  .social-contribution-section {
      padding: 100px 0;
      background: #f8f9fa;
  }

  .social-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .social-content {
      display: flex;
      gap: 60px;
      align-items: flex-start;
  }

  .social-text {
      flex: 1.2;
  }

  .social-subtitle {
      font-size: 28px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 24px;
  }

  .social-description {
      font-size: 17px;
      line-height: 1.8;
      color: #444444;
      margin-bottom: 20px;
  }

  .social-highlights {
      display: flex;
      gap: 16px;
      flex-direction: column;
      margin-top: 32px;
  }

  .social-highlight-item {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 16px 20px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      background: #ffffff;
  }

  .social-highlight-item i {
      flex-shrink: 0;
      font-size: 24px;
      color: #008751;
  }

  .social-highlight-item span {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
  }

  .social-gallery {
      display: flex;
      gap: 20px;
      flex: 1;
      flex-direction: column;
  }

  .social-photo {
      position: relative;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      overflow: hidden;
  }

  .social-photo img {
      display: block;
      width: 100%;
      height: 280px;
      object-fit: cover;
  }

  .social-photo-caption {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
      font-size: 15px;
      font-weight: 600;
      color: #ffffff;
  }

  /* =========================================
   Specifications Table Section
   ========================================= */
  .specs-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .specs-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .specs-table-wrap {
      max-width: 900px;
      margin: 0 auto;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      overflow: hidden;
  }

  .specs-table {
      width: 100%;
      background: #ffffff;
      border-collapse: collapse;
  }

  .specs-table tr {
      border-bottom: 1px solid #eeeeee;
  }

  .specs-table tr:last-child {
      border-bottom: none;
  }

  .specs-table th {
      width: 30%;
      padding: 20px;
      background: #f8f9fa;
      font-size: 16px;
      font-weight: 700;
      color: #111111;
      text-align: left;
      border-right: 1px solid #eeeeee;
  }

  .specs-table td {
      padding: 20px;
      font-size: 16px;
      line-height: 1.6;
      color: #333333;
  }

  /* =========================================
   Application Areas Section
   ========================================= */
  .application-section {
      display: none;
      padding: 100px 0;
      background: #f8f9fa;
  }

  .application-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .application-grid {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(2, 1fr);
  }

  .application-card {
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      background: #ffffff;
      transition: transform 0.3s;
  }

  .application-card:hover {
      transform: translateY(-6px);
  }

  .application-image {
      height: 220px;
      overflow: hidden;
  }

  .application-image img {
      width: 100%;
      height: 100%;
      transition: transform 0.5s;
      object-fit: cover;
  }

  .application-card:hover .application-image img {
      transform: scale(1.05);
  }

  .application-content {
      padding: 30px;
  }

  .application-title {
      font-size: 22px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 12px;
  }

  .application-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #555555;
  }

  /* =========================================
   Installation Process Section
   ========================================= */
  .process-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .process-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .process-list {
      max-width: 900px;
      margin: 0 auto;
  }

  .process-item {
      display: flex;
      gap: 30px;
      position: relative;
      margin-bottom: 40px;
  }

  .process-item::before {
      position: absolute;
      top: 80px;
      bottom: -40px;
      left: 30px;
      width: 2px;
      background: linear-gradient(to bottom, #008751, #e0e0e0);
      content: '';
  }

  .process-item:last-child::before {
      display: none;
  }

  .process-number {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #008751;
      font-size: 24px;
      font-weight: 800;
      color: #ffffff;
  }

  .process-content {
      flex: 1;
      padding: 24px;
      border-radius: 12px;
      background: #f9f9f9;
      border-left: 4px solid #008751;
  }

  .process-title {
      font-size: 20px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 12px;
  }

  .process-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #555555;
  }

  /* =========================================
   CTA Section
   ========================================= */
  .cta-section {
      position: relative;
      z-index: 1;
      padding: 80px 0;
      background: url("/img/main_slide/m2.jpg") no-repeat 50% 45%;
      background-size: cover;
      color: #ffffff;
      text-align: center;
  }


  .cta-section .overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
  }

  .content-container {
      position: relative;
      z-index: 3;
  }

  .cta-title {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 16px;
  }

  .cta-desc {
      font-size: 18px;
      margin-bottom: 32px;
      opacity: 0.95;
  }

  .cta-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
  }

  .btn-cta {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      padding: 16px 40px;
      border-radius: 50px;
      font-size: 18px;
      font-weight: 700;
      transition: all 0.3s;
  }

  .btn-cta.white {
      background: #ffffff;
      color: #008751;
  }

  .btn-cta.white:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      background: #f0f0f0;
      transform: translateY(-2px);
  }

  .btn-cta.outline {
      border: 2px solid #ffffff;
      background: transparent;
      color: #ffffff;
  }

  .btn-cta.outline:hover {
      background: #ffffff;
      color: #008751;
  }

  /* =========================================
   Map Section (Location Page)
   ========================================= */
  .map-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .map-container {
      width: 100%;
      height: 500px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      background: #f0f0f0;
      margin-bottom: 40px;
  }

  .branch-tabs {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 40px;
  }

  .branch-tab {
      padding: 14px 28px;
      border: 2px solid transparent;
      border-radius: 8px;
      background: #f8f9fa;
      font-size: 16px;
      font-weight: 600;
      color: #666666;
      transition: all 0.3s;
      cursor: pointer;
  }

  .branch-tab:hover {
      background: #e8f5e9;
      color: #008751;
  }

  .branch-tab.active {
      background: #008751;
      color: #ffffff;
      border-color: #008751;
  }

  .branch-info-grid {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(2, 1fr);
  }

  .branch-info-card {
      padding: 30px;
      border-radius: 12px;
      background: #f9f9f9;
      border-left: 4px solid #008751;
  }

  .branch-info-card h3 {
      font-size: 22px;
      font-weight: 700;
      color: #008751;
      margin-bottom: 16px;
  }

  .branch-detail-item {
      display: flex;
      gap: 12px;
      font-size: 16px;
      color: #333333;
      margin-bottom: 12px;
  }

  .branch-detail-item i {
      flex-shrink: 0;
      color: #008751;
      margin-top: 2px;
  }

  /* =========================================
   Inquiry Form Section
   ========================================= */
  .inquiry-form-section {
      padding: 100px 0;
      background: #f8f9fa;
  }

  .inquiry-form-inner {
      display: flex;
      gap: 60px;
  }

  .inquiry-info {
      flex: 1;
  }

  .inquiry-info-box {
      padding: 40px;
      border-radius: 16px;
      background: #008751;
      color: #ffffff;
      margin-bottom: 30px;
  }

  .inquiry-info-box h3 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
  }

  .inquiry-info-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 16px;
      margin-bottom: 16px;
  }

  .inquiry-info-item i {
      flex-shrink: 0;
      margin-top: 2px;
  }

  .inquiry-form-box {
      flex: 1;
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      background: #ffffff;
  }

  .inquiry-form-box h3 {
      font-size: 28px;
      font-weight: 800;
      color: #fff;
      margin-bottom:0px;
      text-align:center;
  }

  .form-group {
      margin-bottom: 20px;
  }

  .form-label {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 8px;
  }

  .form-input,
  .form-select,
  .form-textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #dddddd;
      border-radius: 8px;
      font-family: 'Pretendard', sans-serif;
      font-size: 16px;
      transition: border-color 0.3s;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
      outline: none;
      border-color: #008751;
  }

  .form-textarea {
      min-height: 150px;
      resize: vertical;
  }

  .form-checkbox-group {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 20px;
  }

  .form-checkbox {
      width: 18px;
      height: 18px;
      cursor: pointer;
  }

  .form-checkbox-label {
      font-size: 14px;
      color: #666666;
      cursor: pointer;
  }

  .btn-submit {
      width: 100%;
      padding: 18px;
      border: none;
      border-radius: 8px;
      background: #008751;
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      transition: all 0.3s;
      cursor: pointer;
  }

  .btn-submit:hover {
      box-shadow: 0 6px 20px rgba(0, 135, 81, 0.3);
      background: #007043;
      transform: translateY(-2px);
  }

  /* =========================================
   Gallery Grid Section
   ========================================= */
  .gallery-grid-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .gallery-filter {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 50px;
  }

  .filter-btn {
      padding: 12px 24px;
      border: none;
      border-radius: 30px;
      background: #f8f9fa;
      font-size: 16px;
      font-weight: 600;
      color: #666666;
      transition: all 0.3s;
      cursor: pointer;
  }

  .filter-btn:hover {
      background: #e8f5e9;
      color: #008751;
  }

  .filter-btn.active {
      background: #008751;
      color: #ffffff;
  }

  .gallery-grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(3, 1fr);
  }

  .gallery-item {
      position: relative;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
  }

  .gallery-item:hover {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transform: translateY(-6px);
  }

  .gallery-item img {
      width: 100%;
      height: 280px;
      transition: transform 0.5s;
      object-fit: cover;
  }

  .gallery-item:hover img {
      transform: scale(1.1);
  }

  .gallery-overlay {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
      color: #ffffff;
      transition: transform 0.3s;
      transform: translateY(100%);
  }

  .gallery-item:hover .gallery-overlay {
      transform: translateY(0);
  }

  .gallery-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
  }

  .gallery-desc {
      font-size: 14px;
      opacity: 0.9;
  }




  /* Empty State UI */
  .no-data {
      padding: 120px 0;
      border: 1px dashed #ddd;
      border-radius: 12px;
      background: #fafafa;
      color: #999;
      text-align: center;
      grid-column: 1 / -1;
      margin-bottom: 100px;
  }

  .no-data i {
      display: block;
      font-size: 48px;
      color: #ccc;
      margin-bottom: 20px;
  }

  .no-data p {
      font-size: 18px;
      font-weight: 500;
      color: #666;
  }

  @media (max-width: 1024px) {
      .gallery-grid {
          gap: 20px;
          grid-template-columns: repeat(2, 1fr);
      }

      .gallery-card .img-box {
          height: 220px;
      }
  }

  @media (max-width: 767px) {
      .gallery-grid {
          gap: 20px;
          grid-template-columns: 1fr;
      }
  }





  /* =========================================
   Responsive Design
   ========================================= */
  @media (max-width: 1024px) {
      .sticky-tab-wrapper {
          top: 70px;
      }

      .sticky-tab-inner {
          align-items: flex-start;
          flex-direction: column;
          padding: 0 24px;
      }

      .breadcrumbs-compact {
          padding: 12px 0 8px;
      }

      .horizontal-tabs {
          justify-content: flex-start;
          width: 100%;
          padding-bottom: 8px;
      }

      .horizontal-tabs a {
          padding: 16px 24px;
          font-size: 15px;
      }

      .content-container {
          padding: 0 24px;
      }

      .page-hero {
          height: 350px;
      }

      .page-hero-title {
          font-size: 36px;
      }

      .product-intro-inner {
          gap: 40px;
          flex-direction: column-reverse;
      }

      .features-grid,
      .application-grid {
          gap: 20px;
          grid-template-columns: 1fr;
      }

      .inquiry-form-inner {
          gap: 40px;
          flex-direction: column;
      }

      .branch-info-grid {
          grid-template-columns: 1fr;
      }

      .gallery-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .construction-gallery-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .social-content {
          gap: 40px;
          flex-direction: column;
      }
  }

  @media (max-width: 767px) {
      .page-hero {
          height: 300px;
      }

      .page-hero-title {
          font-size: 28px;
      }

      .page-hero-subtitle {
          font-size: 16px;
      }

      .horizontal-tabs a {
          padding: 14px 20px;
          font-size: 14px;
      }

      .product-title {
          font-size: 28px;
      }

      .product-desc {
          font-size: 16px;
      }

      .features-section,
      .specs-section,
      .application-section,
      .process-section {
          padding: 60px 0;
      }

      .specs-table th,
      .specs-table td {
          padding: 14px;
          font-size: 14px;
      }

      .specs-table th {
          width: 35%;
      }

      .cta-title {
          font-size: 24px;
      }

      .cta-desc {
          font-size: 16px;
      }

      .btn-cta {
          padding: 14px 30px;
          font-size: 16px;
      }

      .map-container {
          height: 350px;
      }

.inquiry-info {text-align:center;}


      .inquiry-form-box,
      .inquiry-info-box {
          padding: 30px 20px;
      }

      .gallery-grid {
          gap: 16px;
          grid-template-columns: 1fr;
      }

      .construction-gallery-grid {
          gap: 16px;
          grid-template-columns: 1fr;
      }

      .construction-gallery-item img {
          height: 220px;
      }

      .social-subtitle {
          font-size: 22px;
      }

      .social-photo {
          order: 1;
      }

      .social-text {
          order: 2;
      }

      .social-photo img {
          height: 220px;
      }


      .process-timeline::before {
          left: 20px;
      }

      .process-step {
          padding-left: 60px;
      }

      .process-step-number {
          width: 50px;
          height: 50px;
          font-size: 20px;
      }

      .process-step-content {
          padding: 20px;
      }

      .process-step-title {
          font-size: 18px;
      }

      .process-arrow {
          left: 24px;
      }
  }




  /* =========================================
   Process Timeline Section
   ========================================= */
  .process-timeline-section {
      padding: 100px 0;
      background: #ffffff;
  }

  .process-timeline-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .process-timeline {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
  }

  .process-step {
      position: relative;
      padding-left: 80px;
      margin-bottom: 50px;
  }

  .process-step:last-child {
      margin-bottom: 0;
  }

  .process-step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0, 135, 81, 0.3);
      background: #008751;
      font-size: 24px;
      font-weight: 800;
      color: #ffffff;
  }

  .process-step-content {
      padding: 30px;
      border-radius: 12px;
      background: #f9f9f9;
      border-left: 4px solid #008751;
  }

  .process-step-title {
      font-size: 22px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 12px;
  }

  .process-step-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #555555;
  }