

@media (max-width: 1640px) {

.top_head .logo{left: 3rem}
.top_head .right_top{right: 3rem}

.main_txt h2{font-size: 50px;}
.main_visual .scroll p{font-size: 14px}

.main_title h2{font-size: 40px}
.main_title p{font-size: 18px;}

.main_product .main_product_silde .box .txt{font-size: 18px}

.main_product .main_product_silde .box .thum{width: 200px; height: 200px; }

.main_key_flex .key_img{width: 40%}
.main_key_flex .key_txt{width: 60%}
.key_txt .flex_txt h2,
#image .txt_info h2,
.sub_visual .title_are h2,
.product_all .box h2{font-size: 40px}

.sub_title h4,
.rnd_flex .box .txt h3,
.sub_title p,
.rnd_slide .thum .txt p{font-size: 18px}

.mission .inner .mission_slide .slick-slide{max-height: 100%}

.tlb table th,
.tlb table td{font-size: 16px}

.form_in ul li label{font-size: 16px}

.all_nav_are .nav_are .main_deps{font-size: 40px}
.all_nav_are .nav_are .sub_deps a{font-size: 18px}

}






@media (max-width: 1580px) {

.main_key,
.main_news{padding: 150px 3rem}
.main_product,
.history{padding-left: 3rem}

.inner{padding: 0 3rem}

.rnd_ink .inner .ink{max-width: 400px;}
.rnd_ink .inner .ink img{max-width: 100%}



}


@media (max-width: 1360px) {

#image_top{min-height: 80vh}

#image .txt_info {
    width: 100%;
    padding: 0 3rem;
}


.main_btn span{height: 50px; font-size: 16px}
.main_btn i{width: 50px; height: 50px}
.main_btn{padding-right: 60px}

.slide_ct span{width: 50px; height: 50px}

.foot_add{margin: 15px 0}

}


@media (max-width: 1300px) {
	
.foot_add {
    flex-wrap: wrap;
    gap:10px 30px;
}	
	

.main_product .main_product_silde .box a{height: 50vh}
.main_product .main_product_silde .box .thum{width: 150px; height: 150px}

.key_txt .flex_txt{gap:10px}
.key_txt .flex_txt p{font-size: 14px; display: none}
.key_txt .flex_txt h2{font-size: 30px}

#image_top{min-height: 100%; padding-bottom: 150px}
#image_top .img_box{display: none}
.flex_img_top{gap:10px}


.inner_flex{padding: 0 3rem}

#image .txt_info h2 br{display: none}


.ceo .ceo_txt{padding: 0}
.ceo .ceo_txt h3{font-size: 30px}
.ceo .ceo_txt p{font-size: 18px}

.history .history_slide .slick-list{padding-right: 8rem}

.mission .inner .left_box{padding: 30px}

.sub_title h2{font-size: 30px}

.sub_title h4{font-size: 16px}

.product_last a,
.inq_btn{height: 50px; padding: 0 30px; font-size: 16px}
.inq_btn p{font-size: 16px}
.main_btn span{padding: 0 30px}



.gall_list_style {
    gap: 40px 20px;
    flex-wrap: wrap;
}
.gall_list_style li {
    width: calc(33.33% - 13.33px);
}

.suv_nav_are .sub_deps a{height: 60px}
.sub_visual{margin-bottom: -60px}
.suv_nav_are{border-radius: 20px 20px 0 0}

.flex_img_top.eng{flex-direction: column;}
.flex_img_top.eng p br{display: none}

}

@media (min-width: 1025px) {

.mission_tab .slick-track{transform:none !important }
}	

@media (max-width: 1024px) {
	
.top_head .top_nav{display: none}	
	
.all_nav_are .nav_are {
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-direction: column;
}	
	
.all_nav_are .nav_are .sub_deps{margin-top: 0; height: 0; max-height: 0; visibility: hidden; transition-duration: .5s; overflow: hidden}	
.all_nav_are .nav_are .main_deps.open_deps + .sub_deps{
	margin-top: 15px; height: auto; max-height: 500px; visibility: visible
}


.main_product {
    padding: 100px 0 100px 3rem;
    overflow: hidden;
    flex-direction: column;
    gap:50px
}


.main_product .main_title{width: 100%; padding: 0}
.main_product .main_product_silde{width: 100%}

.main_product .main_product_silde .box a {
        height: auto;
        aspect-ratio: 1;}

.main_product .main_title{position: relative; }
.main_product .slide_ct{margin: 0; position: absolute; right: 3rem; bottom: 0}

.main_key, .main_news{padding: 100px 3rem}

.inner_flex {
    padding: 0 3rem;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
   
.main_ani_sc{padding-top: 100px} 
 
 
 
.flex_img_top {
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    margin-top: 20px
}
 
.flex_img_top p{font-size: 30px; text-align: center; word-break: keep-all}
.flex_img_top p br{display: none}
 
#image_top{padding-bottom: 100px} 
 
 
.foot_are .inner {
    gap: 30px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.sub_visual{height: 50vh}

.ceo .inner{gap:3rem}
 
    .history .history_slide .slick-list {
        padding-right: 3rem;
    } 
.history .history_slide .box{padding: 30px}
 
.mission .inner {
    gap: 30px;
    flex-direction: column;
}
 
.mission .inner .left_box{width: 100%}
.mission .inner .mission_slide{width: 100%}
.mission .inner .left_box .mission_tab h2{word-break: keep-all}
.mission .inner .left_box .mission_tab h2 br{display: none}

.location .map_info .main_btn{position: relative; margin-top: 40px}
  
 
.rnd_flex {
    gap: 30px;
    flex-direction: column;
}

.rnd_flex .box{flex:none;}

.sub_section.rndbg .inner {
    flex-direction: column;
    gap: 50px;
}
.sub_title p br{display: none}
.sub_section.rndbg .sub_title{width: 100%}
  
.rnd_step{width: 100%}   
 
.sub_section{padding: 100px 0} 
.sub_section.history{padding-left: 3rem }

.rnd_ink .inner{gap:3rem}

.product_all {
    flex-direction: column;
}
.product_all .box {
    width: 100%;
    height: 50vh;}



}


@media (max-width: 860px) {
	
.ceo .inner {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}
.ceo .ceo_img{width: 100%}


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

.history .history_slide{width: 100%}
 
.rnd_ink .inner {
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}
 
.product_02_flex {
    flex-direction: column;
} 
 
.flex_tlb {
    gap: 30px;
    margin-top: 50px;
    flex-direction: column;
}
 
.flex_tlb .box .thum img{width: 100%}

    .main_product .main_product_silde .box .thum {
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 0;
    }
.main_product .main_product_silde .box .txt{color: #fff}
 
.main_product .main_product_silde .box a{padding: 25px} 
 
.main_product .main_product_silde .slick-slide {
    margin: 0 10px; padding: 0
} 

.main_product .main_product_silde{margin: 0 -10px}
 
 .main_key_flex {
    margin-top: 60px;
    flex-direction: column;
    gap:50px
}
 
.main_key_flex .key_img{width: 100%} 
.main_key_flex .key_txt{width: 100%; padding: 0} 
.key_txt .slick-slide{padding: 10px 0} 

.main_news_silde_are .slide_ct{display: none}
 
.main_news_silde_are{padding: 0} 
 
.history .sub_title{width: 100%} 
 
 
.agree_pop_content{max-width: 90%}
.agree_pop_content .agree_title h2{font-size: 18px}
.agree_pop_info p,
.agree_pop_info h3{font-size: 14px} 
 
}


@media (max-width: 600px) {

.top_head .logo{left: 25px}
.top_head .right_top{right: 25px}
.all_nav_are .nav_are .main_deps{font-size: 30px}
.main_txt h2{font-size: 30px}

.floating{bottom: calc(3rem + 60px);}
.floating,
.floating_up{right: 25px; width: 50px; height: 50px}

.inner,
.inner_flex,
#image .txt_info{padding: 0 25px}
.main_product{padding-left: 25px}

.main_product .main_product_silde .slick-list{padding-right: 3rem !important}

.main_title h2{font-size: 24px}
.main_title p{margin-top: 10px; font-size: 16px}

.slide_ct{gap:10px}
    .main_product .slide_ct {
        margin: 0;
        position: absolute;
        right: 25px;
        bottom: 0;
    }

.flex_img_top{gap:0}
.main_key, .main_news{padding: 80px 25px}

.key_txt .flex_txt h2, #image .txt_info h2, .sub_visual .title_are h2, .product_all .box h2{font-size: 24px}


.main_news_silde .slick-slide{padding: 0}

.main_news_silde p{margin-top: 5px; font-size: 14px}


.foot_add {
    gap: 10px;
    flex-wrap: wrap;
}

.foot_are p{
	gap: 10px;
    flex-wrap: wrap;
}

.foot_are .inner .foot_link a,
.foot_are p{font-size: 14px}

.main_news .main_title{margin-bottom: 30px}

.main_news .main_btn{display: none}

.ceo .ceo_txt h3{font-size: 24px}
.suv_nav_are .sub_deps a{font-size: 16px}

.ceo .ceo_txt p{font-size: 16px}
.ceo .ceo_txt p br{display: none}

.history .slide_ct{margin-top: 30px}
.sub_section.history{padding-left: 25px}

.history .history_slide .box ul li{font-size: 14px}

.mission .inner .left_box .mission_tab .slick-slide{padding: 0}

.mission .inner .mission_slide h2{font-size: 2rem; bottom: auto; top: 50%;}

.sub_title h2{font-size: 24px}
.location .map iframe{height: 200px}

.location .map_info ul li{font-size: 14px}

.main_btn span{font-size: 14px}

.rnd_step .box{width: 100%; padding: 25px}

.rnd_step .box p{font-size: 16px}

.rnd3 .sub_title,
.rnd_num .sub_title{margin-bottom: 30px}

    .slide_ct span {
        width: 40px;
        height: 40px;
        border: 0
    }

.rnd_flex .box{padding: 25px}

.process_flex {
    gap: 30px;
    flex-direction: column;
}

.process_flex .box {
    width: 100%;
}

.process_down.monone{display: none}


.process_flex .box h2{font-size: 16px}
.process_flex .box ul li p{margin-top: 10px; font-size: 14px}


.process_flex .box.w100 ul{
	    flex-direction: column;
}

.process_flex .box.w100 ul li{width: 100%}

    .sub_section {
        padding: 80px 0;
    }
    
.sub_title p{font-size: 14px}
    
.rnd_slide .thum .txt{padding: 25px}    
 
.rnd_slide {
    margin: 0 -5px;
} 
    
.rnd_slide .slick-slide {
    margin: 0 5px;
}  
   
.rnd_slide .thum .txt p{font-size: 14px}   
   
.tlb{overflow-x: auto}   
.sub_title + .tlb{margin-top: 30px}   
   
.product_note{background: #f5f5f5; padding: 25px}

.product_note h2{font-size: 18px}
.product_note p,
.tlb table th, .tlb table td,
p.tlb_note,
.product_last p{font-size: 14px}

.sub_section.product_last{
	padding: 80px 25px
}

.product_02_flex .box{padding: 25px}

.product_02_flex .box p,
.flex_tlb .box h3{font-size: 16px}

.form_in ul li{width: 100%}

.flex_input{gap:5px}
.form_in ul li input, .form_in ul li select,
.form_in ul li textarea{font-size: 16px}


.ck_agree p{font-size: 14px}


.board_top_flex{display: none}

    .gall_list_style {
        gap: 40px 10px;
        flex-wrap: wrap;
    }

    .gall_list_style li {
        width: calc(50% - 5px);
   
    }

.board_list_txt{margin-top: 15px}
.board_list_txt p{font-size: 12px; margin-bottom: 5px}
.board_list_txt h3{font-size: 14px}

.main_news_silde .slick-slide{margin: 0 5px}
.main_news_silde {margin: 0 -5px}


}





@media (max-width: 360px) {

 
 
 
 
}


















