/* =========================
1640px ↓ (여백 줄이기)
========================= */
@media (max-width: 1640px) {

  .inner,
  .inner_w,
  .inner_w2 {
    padding: 0 4rem;
  }

  .header .logo {
    left: 2rem;
  }

  .header .right {
    right: 2rem;
  }

  .main_visual .down_sc {
    right: 4rem;
    bottom: 4rem;
  }
  
  .sub_visual_top{
    height: 480px;
  }
  
  .hisotry .in_flex .left_year .thum{max-width: 50%}
  .hisotry .in_flex .info{padding-left: 80px}

}


/* =========================
1580px ↓ (타이포 살짝 축소)
========================= */
@media (max-width: 1500px) {

  .main_visual .txt h1 {
    font-size: 52px;
  }

  .main_title h2 {
    font-size: 38px;
  }

  .main_bu_flex .box .txt .info h2 {
    font-size: 30px;
  }
  
  .header .top_nav{gap:40px}


.sub_visual_top .txt h2{
    font-size: 46px;
  }

  .sub_title h2{
    font-size: 34px;
  }
  
  .gall_list_style.tech_style .tech_list_txt h3{font-size: 20px;}
  .gall_list_style.tech_style .gall_img{padding: 25px}
  
  .detail_top .thum_are .thum{padding: 40px}
  .detail_top .thum_are{width: 40%}
  .tlb table td,
  .tlb table th{padding: 15px; font-size: 16px}

}


/* =========================
1370px ↓ (레이아웃 축소)
========================= */
@media (max-width: 1370px) {

  .header .top_nav {
    gap: 50px;
  }

  .main_board {
    gap: 40px;
  }

  .main_board .left {
    width: 420px;
  }

  .main_contact {
    padding: 50px;
  }
  
  .site_map{padding: 0 4rem}
  
  
  .company_bu_flex .box{height: 50vh}
  
  
  .flex_ceo .tab__content .info ul {
    display: flex;
    margin-top: 35px;
    gap: 30px;
    flex-wrap: wrap;
}

.bu_list .box,
.detail_top{gap:40px}
  
 .product_list li a .thum img{max-width: 260px} 
 
.detail_top .sub_title .product_info li p{font-size: 16px} 
 
.sub_small_title h3,
.board_title h2,
.inquery .info h3{font-size: 24px} 


.board_list_txt h3,
.notice_list .box a h4{font-size: 18px}

.gall_list_style.tech_style .tech_list_txt .tech_tag,
.notice_list .box a p,
.recruitment_tag,
.cate_tag{font-size: 14px}

.inquery .info li p {
    color: #222;
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
    word-break: keep-all;
    display: flex;
    gap: 4px;
    flex-direction: column;
}

.inquery .info li p b{font-size: 14px}

.inquery .info li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

}


/* =========================
1280px ↓ (중간 해상도)
========================= */
@media (max-width: 1280px) {

  .main_visual .txt h1 {
    font-size: 44px;
  }

  .main_title h2,
  .sub_visual_top .txt h2,
  .sub_title h2,
  .hisotry .in_flex .left_year h3 {
    font-size: 34px;
  }

.site_map .top_nav li .onedeps{font-size: 30px}

  
  
  .foot_btn{right: 25px; bottom: 25px}
  
  
.sub_visual_top .txt p,
.sub_visual_nav .sub_deps a,
.sub_title p,
.company_bu_flex .box .txt p,
.flex_ceo .ceo_txt p,
.hisotry .in_flex .info li .txt p,
.bu_list .box .txt p,
.product_list li a .txt p,
.logo_type li p{font-size: 16px}

.color_type .box ul li{width: 100%}

.company_bu_flex .box{padding: 25px}

.company_bu_flex .box .txt h2,
.flex_ceo .tab__content .info h3{font-size: 24px}

.flex_ceo .ceo_txt h4,
.hisotry .in_flex .info li h4,
.product_list li a .txt h3,
.gall_list_style.tech_style .tech_list_txt h3{font-size: 18px}

.flex_ceo {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.flex_ceo .sub_title{width: 100%}

.flex_ceo .tab__content .info{margin-top: 40px}

.hisotry .in_flex .info li{gap:0}

.sub_title h2 br{display: none}

.flex_ceo .sub_title .tab {
    display: flex;
    width: 100%;
    margin-top: 30px;
    gap:16px
}
.flex_ceo .sub_title .tab .tab__item + .tab__item{margin: 0}



.inquery {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px;
    flex-direction: column-reverse;
}

.inquery .info {
    width: 100%;
    margin: 0;
    position: relative;
    top: 0;
    right: 0;
}

.inquery .info h3 br{display: none}

}


/* =========================
1024px ↓ (태블릿 시작)
========================= */
@media (max-width: 1024px) {

  /* 헤더 */
  .header .top_nav {
    display: none;
  }

  .header .right {
    gap: 20px;
  }

  /* 메인 비주얼 */
  .main_visual {
    padding: 6rem 0;
  }

  .main_visual .txt h1 {
    font-size: 36px;
  }

  /* 보드 */
  .main_board {
    flex-direction: column;
    gap:0
  }

  .main_board .left {
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
  }
  
  .main_board a {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
        align-items: center;
}

.main_board .thum{
	max-width: 224px;
	width: 100%
}

.main_board .txt{flex:1}

  .main_board .right {
    border-left: none;
    padding-left: 0;
    margin-top: 0px;
  }

  /* 컨택트 */
  .main_contact {
    flex-direction: column;
    gap: 30px;
  }

  .main_contact_btn a {
    width: 100%;
  }
  
    .main_bu_flex {
    flex-direction: column;
  }

  .main_bu_flex .box {
    height: 50vh;
            width: 100%;
             flex: 1;
  }

  .main_bu_flex .box:hover {
    flex: 1;
  }
  
  .main_bu_flex .box .txt .more_btn {
    visibility: visible;
    opacity: 1;
}

.main_contact_btn{width: 100%}


.foot_info .inner_w {
    display: flex;
    gap: 3rem;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}


.company_bu_flex{
	flex-direction: column;
}

.company_bu_flex .box:nth-child(2){margin: 0}

.company_bu_flex .box{height: 40vh;
 width: 100%;
             flex: none;}


.hisotry .in_flex {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 50px;
}

.hisotry .in_flex .left_year {
    width: 100%;
    display: flex;
    gap: 40px;
    position: relative;
    top: 0;
    left: 0;
    flex-direction: column;
}
.hisotry .in_flex .left_year .thum{max-width: 100%; width: 100%; height: 25vh; overflow: hidden}
.hisotry .in_flex .left_year .thum img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 100%;
}


    .hisotry .in_flex .info {
        padding-left: 0;
        width: 100%;
    }

.hisotry .line_are{display: none}

.hisotry{padding: 0}

.product_list li,
.gall_list_style li,
.gall_list_style.news_style li {
    width: calc(50% - 12px);}


.detail_top {
    display: flex;
    flex-direction: column;
}
.detail_top .thum_are {
        width: 100%;
    }

.header{height: 100px}


.tlb table td .flex {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-direction: column;
}

.color_type{gap:24px}
.color_type .box {
    width: calc(50% - 12px);
}

}


/* =========================
860px ↓ (모바일 전환)
========================= */
@media (max-width: 860px) {

  .inner,
  .inner_w,
  .inner_w2 {
    padding: 0 2rem;
  }

  .main_section {
    padding: 100px 0;
  }

  .main_title h2 {
    font-size: 28px;
  }

  .main_title h4 {
    font-size: 16px;
  }

  .main_bu_flex .box {
    height: 40vh;
  }

  .main_bu_flex .box .txt .info h2 {
    font-size: 24px;
  }


  .site_map .top_nav li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    flex-direction: column;
}

.site_map .top_nav li .sub_deps {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: baseline;
    opacity: 0;
    transition-duration: .8s;
    flex-direction: column;
    overflow: hidden;
    height: 0;
    max-height: 0;
    visibility: hidden
}
  
.site_map .top_nav li .on_drop + .sub_deps{
	height: auto; max-height: 80vh; 
	opacity: 1; visibility: visible;
	margin-top: 20px;
}

.site_map .top_nav li:after{display: none}
  

    .main_contact {
        flex-direction: column;
        gap: 60px;
    }
    
  .main_contact .txt h2{font-size: 30px}  
    


.bu_list .box {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-direction: column;
}

.bu_list .box .thum{width: 100%}
.bu_list .box .thum img{}

.notice_list .box a{padding: 25px; padding-right: 100px}

.notice_list .box a .go{width: 60px; height: 60px; right: 25px}
.gall_list_style.news_style li .board_list_txt{padding: 30px 20px}

.sub_visual_nav{display: none}


#bo_cate ul,
.product_list_are .tab {
    zoom: 1;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

#bo_cate a,
.product_list_are .tab .tab__item a{padding: 10px; font-size: 14px}

.board_list_txt h3, .notice_list .box a h4{font-size: 16px}
.tlb {
    overflow-x: auto;
}

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

.sub_small_title {
    margin-bottom: 20px;
}

.flex_ceo .tab__content .info ul li{width: 100%}
.flex_ceo .tab__content .info ul li:first-child{width: 100%}
.flex_ceo .tab__content .info ul li i {width: 40px; height: 40px;}
.flex_ceo .tab__content .info ul li .txt p + p{margin-top: 6px}

.company_bu_flex .box .txt h2, .flex_ceo .tab__content .info h3{font-size:20px}

    .flex_ceo .sub_title .tab {
        display: flex;
        width: 100%;
        margin-top: 30px;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    
 
    
}


/* =========================
600px ↓ (모바일 핵심)
========================= */
@media (max-width: 600px) {
	
	
	  .main_section {
        padding: 80px 0;
    }

  .header .logo {
    width: 140px;
    height: 30px;
    top: 24px;
    left: 25px
  }
  
  .header .right{right: 25px; top: 25px}
  
  .header{height: 80px;}

   .inner, .inner_w,
   .inner_w2{padding: 0 25px}


  .main_visual .txt h1 {
    font-size: 24px;
  }

  .main_visual .down_sc {
    display: none;
  }

  .main_title h2 {
    font-size: 22px;
  }

  .main_title h4 {
    font-size: 14px;
  }

  .main_contact {
    padding: 30px;
  }

  .main_contact .txt h2 {
    font-size: 28px;
  }

  .main_contact .txt p {
    font-size: 16px;
  }

  .foot_btn {
    width: 50px;
    height: 50px;
    right: 2rem;
    bottom: 2rem;
  }
  
  
  .main_bu_flex .box{padding: 25px;}
  .main_bu_flex .box .txt .more_btn{font-size: 14px}
  
  .main_bu_flex .box .txt {
    position: relative;
    display: flex;
    z-index: 2;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}


.main_title.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

.common_btn{font-size: 14px}

.main_bu_flex .box .txt .info p{font-size: 14px}

.main_board .txt h3{font-size: 18px;}
.main_board .thum{display: none}

.main_board .txt p{font-size: 14px; margin-top: 10px}

.main_contact .txt h2{font-size: 24px}
.main_contact .txt p {
        font-size: 14px;
    }

.main_contact_btn a{padding: 25px}
.main_contact_btn a h3{font-size: 20px}
.main_contact_btn a p,
.foot_copy p,
.foot_copy a{font-size: 14px}

.foot_adress .foot_txt li {
    font-size: 14px;
    gap: 4px;
    flex-wrap: wrap;
}

.foot_copy .inner_w {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    gap: 30px;
}


.site_map{padding: 0 25px; text-align: center}

    .site_map .top_nav li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        flex-direction: column;
        width: 100%;
    }

.site_map .top_nav{gap:20px}

.site_map .top_nav li .onedeps{font-size: 20px}

.site_map .top_nav li .sub_deps{text-align: center;
        align-items: center;}
.site_map .top_nav li .sub_deps a{font-size: 16px}



.sub_section{padding: 80px 0}
.sub_title h4{font-size: 14px}

.main_title h2, .sub_visual_top .txt h2, .sub_title h2, .hisotry .in_flex .left_year h3{font-size: 24px;}

.inquery .info h4,
.color_type .box .top h3{font-size: 18px}
.inquery .info li p,
.inquery .info .time_info p,
.form_in label,
.form_in .ck_agree input + label{font-size: 16px}
.form_in ul li{width: 100%}

.agree_txt .in_txt p, .agree_txt .in_txt h3{font-size: 14px}

    .sub_visual_top {
        height: 40vh;
        padding-top: 50px
    }


.notice_list .box a{padding: 25px 0; padding-right: 80px}
.notice_list .box a .go {
        width: 40px;
        height: 40px;
        right: 0px;
    }

.notice_list .box a:hover {
    background: #fff;
}

.recruitment_tag{margin-bottom: 10px}

.sub_visual_top .txt p, .sub_visual_nav .sub_deps a, .sub_title p, .company_bu_flex .box .txt p, 
.flex_ceo .ceo_txt p, .hisotry .in_flex .info li .txt p, .bu_list .box .txt p, .product_list li a .txt p,
.board_list_txt p,
.logo_type li p,
.color_type .box ul li{font-size: 14px}

.product_list li, .gall_list_style li, .gall_list_style.news_style li{width: 100%}


.logo_type {
    display: flex;
    gap: 24px;
    flex-direction: column;
}


.color_type .box{width: 100%}

.logo_bg_img{padding: 40px}

}


/* =========================
360px ↓ (초소형)
========================= */
@media (max-width: 360px) {

  .main_visual .txt h1 {
    font-size: 22px;
  }

  .main_title h2 {
    font-size: 20px;
  }

  .main_contact .txt h2 {
    font-size: 24px;
  }

}