@charset "UTF-8";

/* =========================
   반응형 3분기 대응 (KRS)
   ========================= */

/* ---------- Tablet (<=1200px) ---------- */
@media (max-width:1200px) {
    /* .header_wrap {
        padding:0 30px; box-sizing: border-box;
    } */
    .max-width {
      padding: 0 40px; box-sizing: border-box;
    }
  
    /* header */
    .header_wrap {padding:10px 30px 10px 10px;}
    .gnb {gap:30px;}
    .gnb > li > a {font-size: 18px; padding: 20px 0;}
    .lang-wrap {margin-left: 20px;}
  
    /* main visual */
    #mainVisual {height: 550px;}
    .main-text .main {font-size: 40px;}
    .main-text .main span {font-size: 46px;}
    .main-text .desc {font-size: 18px;}
    .bx-wrapper,.bx-viewport,.sliderUl,.sliderLi, .sliderLi a {width:100%; height: 100% !important;}
    .main-text {padding:0 30px; box-sizing: border-box;}

    /* feature list */
    .feature-list ul {flex-wrap: wrap;}
    .feature-list ul li {
      width: calc(50% - 20px);
      border-radius: 40px;
    }
  
    /* core-skill */
    .core-skill ul {flex-wrap: wrap;}
    .core-skill ul li {
      width: 48%;
    }
  
  .solution-list {padding:100px 0;}
    .solution-list .title-wrap .right {display: flex; justify-content: center;}
    .solution-list .title-wrap .left {gap:20px; margin-bottom: 20px; align-items: center;}
    .solution-list .title-wrap .left .title,.solution-list .title-wrap .left .title span {font-size: 36px;}
    .solution-list ul li {
        width: 100%;
        /* width: 70%; */
        /* flex: none; */
    }
    .solution-list ul li h3 {font-size: 18px;}
    .solution-list .title-wrap .right a.more {width: 180px; height: 50px; font-size: 16px;}
    .solution-list ul {
        margin-left: 0px;
        flex-wrap: nowrap;
        flex-direction: row !important;
        width: 100% !important;
    }
    .solution-slide a.arrow-right ,.solution-slide a.arrow-left {
        background: #fff;
        border-radius: 50%;
    }
    .solution-slide a.arrow-right {
        margin-right: 40px;
    }
    /* .solution-slide a.arrow-left {
        left: 55px;
    }  */
    .solution-slide li {
     
      }

    /* 조직도 전체 래퍼 */
  .org-chart {
    width: 100%;
    overflow-x: auto;   /* 가로 스크롤 활성화 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
    padding-bottom: 20px;
  }

  /* 스크롤 생겼을 때 안쪽 여백 정리 */
  .org-chart > ul {
    min-width: 650px;   /* 실제 트리 크기에 맞게 조정 */
    margin: 0 auto;
  }

  /* 노드 스타일 조정 */
  .org-chart .node {
    min-width: 120px;
    font-size: 14px;
    padding: 8px 12px;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  }

  /* 연결선(line) 깨짐 방지 */
   .org-chart ul { padding: 40px 50px 4px;}
  .org-chart ul, 
  .org-chart li {
    position: relative;
  }

  /* 필요 시 모바일에서 트리 간격 좁히기 */
  .org-chart ul ul {
    /* margin-top: 15px; */
  }

  /* 메인 노드 간격 */
  .org-chart ul > li {
    /* margin: 0 30px; */
  }
  .scroll-guide {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-top: 10px;
  }

  /* 제품소개 */
  .product-info>ul>li {flex-direction: column;}
  .product-info>ul>li .right .img-wrap {width: 100%;}

}
/* 반응형 */
@media (max-width: 1024px) {
  .solution-slide ul li {
    padding: 0 10px;
  }
.solution-slide ul>li>a {
    width: 100%;
  }
}

@media (max-width: 600px) {
 

  

}

/* --- 모바일 중간 (768px 이하) --- */
@media (max-width: 768px) {


  
    /* main product list */
    .main-product-list ul {flex-wrap: wrap; gap:50px;}
    .main-product-list ul li {
      width: 48%;
    }
  
    /* footer */
    .footer_bot {flex-direction: column; gap: 40px;}
    .footer_logo img {max-width: 150px;}

    /* 제품 */
    .product-info>ul>li {flex-direction: column;}
    .product-info>ul li .right {margin: 0 auto;}
    .product-info>ul>li>.left h3 {text-align: center;}
  }
  
  
  /* ---------- Mobile (<=768px) ---------- */
  @media (max-width:768px) {
  
    .max-width {padding: 0 20px; box-sizing: border-box;}
    .flex-area {flex-direction: column !important;}
    .gnb {display: none;} /* 모바일 메뉴는 햄버거로 대체 */
  
    /* header */
    .header_wrap {
      flex-wrap: wrap;
      justify-content: space-between;
      flex-direction: row !important;
      padding:10px 20px;
    }
    .header_wrap .logo img {width: 100px;}
    .lang-wrap {
        /* order: 3; margin-top: 10px; */
        margin-left: auto;
    }
    #m_gnb {
        display: flex !important;
        align-items: center;
        margin-left:10px;
    }
    .m_bg.hidden {display: none;}
  

    /* top text */
    .top-main-text{padding-left:20px; padding-right:20px; box-sizing: border-box; padding-top: 100px;}
    .top-main-text h3 {font-size: 36px;}
    .top-main-text p {font-size: 18px;
        word-break: break-all;
    }

    /* main visual */
    .main-text {text-align: center;}
    .main-text-wrap {padding:50px 20px; box-sizing: border-box;}
    .main-text .top {font-size: 14px; text-align: center;}
    .main-text .main {font-size: 26px; line-height: 1.3;}
    .main-text .main span {font-size: 32px;}
    .main-text .desc {font-size: 14px; line-height: 22px; margin-top: 10px; }
    .main-text .desc br {display: none;}
    .main-more {font-size: 16px; padding: 10px 40px; margin-top:20px}
    #mainVisual {width:100%; height: 400px;}
    .bx-wrapper,.bx-viewport,.sliderUl,.sliderLi, .sliderLi a {width:100%; height: 100% !important;}
  
    /* feature */
    .feature-list ul li {
      width: 100%;
      height: auto;
      padding: 40px 0;
    }
    .feature-list ul li h3 {font-size: 36px;}
    .feature-list ul li p {font-size: 20px;}
  
    /* core-skill */
    .core-skill {margin-top: 100px; padding-bottom: 100px;}
    .core-skill h2,.core-skill h2 span {font-size: 36px;}
    .core-skill p.desc {font-size: 16px;}
    .core-skill ul li {width: 100%;}
    .core-skill ul li .content {padding: 25px 20px; align-items: center;}
    .core-skill ul li .content .title h3 {font-size: 22px;}
    .core-skill ul li .content p {font-size: 15px; text-align: center;}
  
    /* solution */
    
    /* product */
    .main-product-list {padding: 0 20px; box-sizing: border-box;}
    .main-product-list {margin-top: 100px;}
    .main-product-list ul {padding:20px; box-sizing: border-box;}
    .main-product-list h2,.main-product-list h2 span {font-size: 36px;}
    .main-product-list ul li {width: 100%;}
    .main-product-list ul li .content {height: auto; padding: 25px 20px;}
    .lang-en .main-product-list ul li .content {padding:30px 10px; box-sizing: border-box;}
    .main-product-list ul li .content .title h3 {font-size: 18px; text-align: center;}
    .main-product-list ul li .content p {font-size: 14px;}
    .main-product-list .more-btn a {
      width: 180px;
      height: 50px;
      font-size: 16px;
      margin-top:20px; 
    }
  
    /* bottom */
    .bottom-main-text {padding: 120px 0;}
    .bottom-main-text h3 {font-size: 36px; text-align: center;}
    .bottom-main-text p {font-size: 15px; padding: 0 20px; box-sizing: border-box;}
    .bottom-main-text .more-btn {margin-top: 0;}
    .bottom-main-text .more-btn a {width: 180px; height: 50px; font-size: 16px; }
  
    /* footer */
    #footer {padding: 50px 0;}
    .footer_menu {flex-wrap: wrap; gap: 15px;}
    .footer_info address, .footer_info small {font-size: 13px;}
    .footer_info {align-items: center; text-align: center;}
    .footer_menu li:before {display: none;}
    .footer_logo {display: flex; justify-content: center;}


    /* gnb */
     /* 햄버거 버튼 */
    #header #m_gnb {
        display: flex !important;
        align-items: center;
        margin-left: 10px;
        z-index: 999999;
    }

    #header .m-btn {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        cursor: pointer;
        position: relative;
        z-index: 1002;
    }
    #header .m-btn span {
        display: block;
        height: 2px;
        width: 100%;
        background: #222;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    #m_gnb:has(.m-btn.active) {
        position: fixed;
        right: 20px;
    }
    /*  active일 때 X로 변환 */
    .m-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    }
  
    .m-btn.active span:nth-child(2) {
        opacity: 0;
    }
    
    .m-btn.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    /* X 아이콘으로 변환 */
    #header .m-btn.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #header .m-btn.active span:nth-child(2) {
        opacity: 0;
    }
    #header .m-btn.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* GNB 기본: 숨김 (오른쪽 바깥) */
    #header .gnb {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px 40px;
        gap: 24px;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        transition: right 0.3s ease;
        z-index: 99999;
    }

    /* GNB가 열릴 때 */
    #header .gnb.active {
        right: 0;
        display: block;
    }

    /* 메뉴 스타일 */
    #header .gnb > li {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    #header .gnb > li:nth-child(3) {
        width: 100%;
        display: block;
        /* display: flex; */
        justify-self: center;
    }
    #header .gnb > li:nth-child(4),#header .gnb > li:nth-child(5) {
        display: none;
    }
    #header .gnb > li:nth-child(3) a{
        color:#fff;
        text-align: center;
        margin-top: 10px;
    }
    #header .gnb > li:nth-child(3):hover .ulDepth2{ display: none !important;}

    
    #header .gnb > li > a {
        font-size: 20px;
        font-weight: 700;
        color: #252525;
        text-decoration: none;
        display: block;
        padding: 12px 0;
        width: 100%;
    }
    .gnb > li:hover .ulDepth2 li a{
        color: #252525;
    }
    .gnb > li:hover .ulDepth2 li:hover {
        background: #e3e3e3;
    }
    .gnb > li:hover .ulDepth2 li:hover a{
        font-weight: bold;
    }
    /* 2뎁스는 모바일에서 숨김 */
    #header .gnb > li .ulDepth2 {
        display: none !important;
        position: static;
        width: 100%;
        background: #f5f5f5;
    }
    #header .gnb > li:hover .ulDepth2 {
        display: block !important;
    }

    /* 배경 딤드 */
    #header .m-dim {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
        z-index: 999;
    }
    #header .m-dim.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* sub */
    .sub_visu .small-en {text-align: center;}
    .sub_visu>div {flex-direction: column; gap:30px;}
    .sub_visu>div h3 {text-align: center;}
    .subcon_wrap .lnb>ul {height: auto; padding:10px 0; }
    .subcon_wrap .lnb ul .ulDepth2 {border-bottom: none;flex-wrap: wrap; }
    .subcontent-wrap {padding:50px 0;}

    /* 개요 */
    .map-content {flex-direction: column;}
    .map-content ul ul {padding-left:0;}

    /* 연혁 */
    .history-wrap>ul>li {flex-direction: column;}
    .history-wrap ul li h3{
        position: relative;
        width: 100%;
        font-size: 35px;
        display: flex;
        justify-content: start;
        padding-left: 50px;
        align-items: start;
        font-weight: 800;
        color: #091634;
    }
    .history-wrap ul li div{
        padding-left: 50px;
    }
    .history-wrap ul li div>ul>li {gap:10px;}

    /* 핵심역량 */
    .core-list>ul {gap:50px;}
    .core-list>ul>li {flex-direction: column;}
    .core-list>ul>li .title {width: 100%;}
    .core-list>ul>li {gap:10px;}

    .solution-slide a.arrow-right {
        margin-right: 20px;
    }

    /* 특허인증 */
    .bd_category_area {flex-direction: column; gap:5px;}
    .bd_category_area li a {text-align: center; font-size: 16px;}
    .gallery_con ul {
        padding: 0 1rem;
        text-align: center;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        /* flex-direction: column; */
        justify-content: center;
    }

    /* 제품 */
    .product-info>ul>li {flex-direction: column;}
    .product-info>ul>li .right .img-wrap {width: 100%;}
    .product-info .gallery-pro-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 30px;
      }
     
      .sub0301 .flex-area {flex-direction: row !important;}
      .flex-table .table-content .table-inner.input, 
      .flex-table .table-content .table-inner.select,
      .flex-table .table-content .table-inner.label,
      .sub0301 .flex-table .table-content.half {width: 100%;}
      .sub0301 .flex-table .table-content .table-inner.input.tel .table-text,
      .sub0301 .flex-table .table-content .table-inner.input.email .table-text {display: flex; flex-direction: row !important;}
      .sub0301 .flex-table .table-content .table-inner.input.tel .table-text input,
      .sub0301 .flex-table .table-content .table-inner.input.email .table-text input {width: 100% !important;}
  }
  @media (max-width:600px) {
    .solution-slide a.arrow-right {margin-right: 20px;}
    /* .solution-slide a.arrow-left {left:30px} */
    .bx-wrapper img{
         width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .solution-slide li a {gap:20px;}
    .solution-list ul li img {
        /* height: auto !important;min-height: auto; max-height: auto; */
    }
    .sub_visu>div h3 {font-size: 35px;}
    .subcon_wrap .lnb ul .ulDepth2,
    .tab-wrap ul {gap:15px;}
    .subcon_wrap .lnb ul li.menuDepth2.on a,
    .subcon_wrap .lnb ul li.menuDepth2 a {
        font-size: 18px;
    }
    .sub0201 .product-info>ul>li>.left>ul>li {
        gap:20px
    }
    .product-info>ul>li>.left ul li .title {
        white-space: nowrap;
    }
    .product-info>ul>li>.left ul li{
        flex-direction: column;
        gap: 0;
        margin-bottom: 15px;
    }
    .product-info .gallery-pro-list {
        display: flex !important
        ;
                flex-wrap: wrap;
        gap: 30px 0;
      }
      .map-content iframe {width: 100%;}
      .tab-wrap ul li a {font-size: 15px;;}
      .gallery-pro-list-wrap {box-sizing: border-box;}
      .title-wrap h2 {font-size: 30px;}
      .company-info h3 {
        font-size: 45px;
      }
      .company-info p {
        font-size: 30px;
      }
      .company-info div {
        font-size: 16px;;
      }

      /* 조직도 */
   

  /* 제품 */
  .tab-wrap {padding:50px 0;}
  .product-info>ul>li>.left h3 {font-size: 20px;}
  .video-wrap>div {flex-direction: column;}

  .top-btn.is-show {font-size: 14px;}


  .sub0301 .flex-area {flex-direction: column !important;    align-items: self-end;}
  .sub0301 .agreement .checkBox {display: flex; flex-direction: row !important;}
  .sub0301 .btnList.flex-area {    align-items: center !important;
    flex-direction: row !important;}

  }