/* sub visual */
.sub_visual_wrap{position: relative;  margin: 0 auto;}
.sub_visual_box { width: 100%; height: 400px; overflow: hidden; position: relative; } 
.sub_page_visual { background-repeat: no-repeat; background-position: center; background-size: cover; animation: bg-active 5s; height: 100%; overflow: hidden; } 

/* sub visual + pc_top_menu */
.sub_visual_box .visual_menu_wrap { padding-top: 60px; position: relative; z-index: 1111; } 
.depth_wrap { display: flex; flex-direction: row; flex-wrap: nowrap;  max-width: 1720px;   width: 90%;margin: 0 auto; height: 100%;} 
.depth_wrap .depth_name { display: flex; justify-content: space-between; min-width:87px; font-size: 18px; align-items: center; height: 100%; word-break: keep-all; color: #111; font-weight: 400;}  
.depth_wrap > div.home_btn {width: 70px;  } 
.depth_wrap > div.home_btn a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.depth_wrap > div.home_btn a span{font-size: 16px; }
.depth_wrap > div { padding: 0 20px; position: relative; cursor: pointer; width: 220px;} 
.depth_wrap > div::after{content: ""; display: block; width: 1px; height: 100%; background-color: #ccc; position: absolute; top: 50%; right: 0;  transform: translateY(-50%);}
.depth_wrap > div.home_btn::before{content: ""; display: block; width: 1px; height: 100%; background-color: #ccc; position: absolute; top: 50%; left: 0;  transform: translateY(-50%);}


.depth_wrap > div.depth2{width: auto; min-width: 250px;}
/* .depth_wrap > div.depth3 {width: 100%;max-width: 250px; width: 250px;}  
.depth_wrap > div.depth3.show { display:block; }  */
.depth_wrap > div
.depth_wrap > div:last-child { border-right: unset; } 
.depth_wrap > div .depth_name i {line-height: 50px; font-size: 20px;} 
.visual_menu_wrap { width: 100%; background-color: #fff; height: 50px;  z-index: 99; display: flex; align-items: center; border: 1px solid #ddd;} 
.visual_menu_wrap.fixed{position: fixed; top: 81px;}
.visual_menu_wrap .com_depth { position: absolute; background: #f6f6f6; padding: 10px; width: 97%; left: 50%; transform: translateX(-50%); top: 50px; z-index: 10; } 
.visual_menu_wrap .com_depth li:hover a{color: var(--main-color); font-weight: 600;}
.visual_menu_wrap .com_depth li.on a{color: var(--main-color);}
.visual_menu_wrap .com_depth li a.on{color: var(--main-color); }
.visual_menu_wrap .com_depth li a {padding: 15px 0; font-size: 16px; display: block; width: 100%; height: 100%; color: #444; } 
.visual_menu_wrap .com_depth li a i{display: none;}
.visual_menu_wrap .com_depth li.on a{text-decoration: underline; text-underline-offset: 5px;}
/* .visual_menu_wrap .com_depth.sub_depth2{background-color:var(--main-color) ;}
.visual_menu_wrap .com_depth.sub_depth2 li a{color: #fff;} */
.depth_wrap > div.depth2 i{ color: #242424;}

.product_top .depth2::before{content: ""; display: block; width: 1px; height: 100%; background-color: #ccc; position: absolute; top: 50%; left: 0;  transform: translateY(-50%);}


.sub_page_visual1 { background-image: url(../img/sub_visual_1.jpg); } 
.sub_page_visual2 { background-image: url(../img/sub_visual_2.jpg); } 
.sub_page_visual3 { background-image: url(../img/sub_visual_3.jpg); } 
.sub_page_visual4 { background-image: url(../img/sub_visual_4.jpg); } 
.sub_page_visual5 { background-image: url(../img/sub_visual_5.jpg); } 


/* sub_visual */
.sub_visual_txt { position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%); z-index: 10;   width: 90%; max-width: 1400px; } 
.sub_visual_txt h2 { font-size: 60px; text-align: center;   font-weight: 500; color: #fff; } 
 .sub_visual_txt p{color: #fff; text-align: center; font-size: 2.8rem; line-height: 1.8; font-weight: 400;}
/* top menu */
.top_menu .mobile_sub_menu { display: none; } 



/*sub_공통*/
.sub_inner{max-width: 1400px; margin: 0 auto;}
.sub_bottom{margin-bottom: 150px;}
.sub_tit{font-size: 4.8rem; font-weight: 600; position: relative;margin: 130px 0 80px; display: inline-block;}
.sub_tit::before{content: ""; width: 120px; height: 1px; background-color: #111; position: absolute; left: -150px; top: 50%; transform: translateY(-50%); }
.sub_tit::after{content: ""; width: 13px; height: 13px; background-color: var(--sub-color); border-radius: 50%; position: absolute; right: -20px; bottom: 0;}
.mb_menu{display: none;}





/*About*/
.company_top{align-items: center;}
.company_top h2{width: auto;}
.company_top p{font-size: 2.2rem;   line-height: 1.5;}

/* .company_overview{background: url(../img/company_overview.jpg) no-repeat; width: 100%; height: 100%; background-size: cover; background-size: cover;} */
.company1_table{margin: 100px 0; justify-content: space-between; align-items: center;}
.company1_table ul{ width: 60%;  }
.company1_table ul li{display: flex; position: relative; padding-left: 25px;  margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 15px; align-items: center;}
.company1_table ul li::before{content: ""; width: 7px; height: 7px; background-color: #ccc; border-radius: 50%; position: absolute; top: 30%; left: 0; transform: translateY(-50%);}
.company1_table ul li span{font-size: 2rem; font-weight: 400; width: 25%;}
.company1_table ul li p{font-size: 2rem;  font-weight: 400;} 

.company1_table .company_img{width: 35%;}
.company1_table .company_img img{width: 100%;}


.company_greeting{margin-bottom: 100px;}
.company_greeting div{font-size: 2rem; margin-bottom: 40px; line-height: 1.8;}
.company_greeting div:last-child{margin-bottom: 0;}
.company_greeting div.sing{text-align: right; font-size: 2.2rem;}




.company_vision{margin: 100px 0;}
.company_vision ul{justify-content: space-between;}
.company_vision ul li{width: calc(100% / 5 - 40px); background-color: #f7f5f5; border-radius: 10px; padding:30px 20px; text-align: center;}
.company_vision ul li img{}
.company_vision ul li div{}
.company_vision ul li div span{font-size: 2rem; font-weight: 400;}
.company_vision ul li div p{font-size: 1.8rem; font-weight: 500;margin-top: 5px;}


/*contact*/
.contact_wrap{width: 90%; margin: 0 auto;}
.contact_wrap h2{font-size: 2.5rem; font-weight: 400; margin-bottom: 20px;}
.contact_wrap ul{ justify-content: space-between; flex-wrap: wrap; gap: 10px;}
.contact_wrap ul li{width: calc(100% / 2 - 20px); background-color: #f7f5f5; border-radius: 10px; padding: 50px; height: 200px; display: flex;flex-direction: column; justify-content: center; position: relative; overflow: hidden; flex: 1 1 33%;}

.contact_wrap ul li::before{content: ""; width: 200px; height: 200px; background: url(../img/contact_logo.png) no-repeat; position: absolute; bottom: -27px; right: -35px; opacity: 0.15; background-size: contain;}
.contact_wrap ul li h3{position: relative; font-size: 2.5rem; margin-bottom: 15px;display: inline-block;font-weight: 400; }
.contact_wrap ul li h3::before{content: ""; width: 7px; height: 7px; background-color: var(--sub-color);position: absolute;top: -3px;left: -10px;border-radius: 50%; }
.contact_wrap ul li p{font-size: 2rem; }
.contact_wrap ul li p i{color: var(--sub-color); font-size: 2.5rem; margin-right: 10px; vertical-align: middle;}
.map{margin-top: 100px;}

.contact_wrap ul li a {display: flex; flex-direction: column; align-items: start; justify-content: center; width: 100%; height: 100%; position: relative; padding: 50px;}
.contact_wrap ul li a i{position: absolute; top: 30px;right: 30px; font-size: 3rem; color: var(--main-color); transition: all .3s;}
.contact_wrap ul li a:hover i{font-size: 3.5rem;}
.location ul li{padding: 0;}
.contact_wrap.mar{margin-top: 50px;}


/*product*/
.product_wrap{max-width: 1720px; width: 100%; margin: 50px auto 0;}
.pro_top_tit{padding-left: 150px;}
.pro_top_tit::before{left: 0;}
.pro_table_wrap{overflow-x: auto;}
.pro_table_wrap table{width: 100%; min-width: 650px; border-collapse: collapse;}
.pro_table_wrap table tr{border-bottom: 1px solid #d5d4d4;}
.pro_table_wrap table tr th{padding: 10px; text-align: center; background-color: var(--main-color); color: #fff; font-size: 2.2rem; position: relative; line-height: 1; font-weight: 400;}
.pro_table_wrap table tr th::after{content: ""; width: 1px ; height:30px; background-color: #fff; opacity: 0.4; position: absolute; right: 0; bottom: 0;}
.pro_table_wrap table tr th:last-child::after{display: none;}
.pro_table_wrap table tr th span{font-size: 1.8rem;}
.pro_table_wrap table tr td{padding: 10px; text-align: center;  font-size: 1.8rem; }
.pro_table_wrap table tr td img{transition: all .3s;}
.pro_table_wrap table tr td.pro_down a:hover img{transform: translateY(5px);}
.pro_table_wrap table tr td.pro_img{align-items: center; justify-content: space-between;}

.product_search{text-align: right; margin-bottom: 30px;}
.product_search input{border: 1px solid #ddd; width: 300px; height: 45px; border-radius: 3px; padding-left:10px;}
.product_search button{background-color: var(--main-color); padding: 0 10px;height: 45px; width: 80px; color: #fff; border: none;}
.product_search button i{color: #fff; font-size: 2rem;}



/******************************반응형********************************************/
@media (max-width: 1770px) { 


/*product*/
.product_wrap{width: 95%;}



} 

@media (max-width: 1540px) {
      /*sub_top*/
  .visual_menu_wrap{left: 1%;}
  .sub_inner{width: 95%;}
.sub_tit::before{width: 10%; left: -60px;}

/*인사말*/
.organization  img{width: 100%;}

/*제품*/
.pro_top_tit{padding-left: 75px;}
.pro_top_tit::before{left: 0;}
.pro_table_wrap table tr td.pro_img img{width: 120px;}

 } 

@media (max-width: 1380px) {
       /*sub-top*/
   .sub_visual_txt h2{font-size:4rem;}
   .sub_top{width: 95%;}
   .sub_tit{font-size: 4.5rem;}
    .sub_tit::before{display: none;}

/*인사말*/
.company_top p{font-size: 2.2rem;}
.company_overview ul li span{font-size: 2.2rem; }
.company_overview ul li p{font-size: 2.2rem;}

/*제품*/
.pro_top_tit{padding-left: 0px;}
.pro_table_wrap table tr td.pro_img{flex-direction: column;}
.pro_table_wrap table tr td.pro_img span{margin-top: 10px;}
.pro_table_wrap table tr th{font-size: 2rem;}

 } 

@media (max-width: 1280px) {
    /*sub-top*/
.sub_visual_box{height: 600px;}
.sub_visual_txt h2{font-size:3.6rem;}
.visual_menu_wrap{left: 0;}
.sub_tit{font-size: 4rem; margin: 100px 0 30px;}
.product_top .home_btn{display: none;}
.product_top .depth1{display: none;}
.product_top .depth2{display: none;}
.product_top .depth3::before{content: ""; display: block; width: 1px; height: 100%; background-color: #ccc; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.pro_slide{display: none;}


/*인사말*/
.company_top{flex-direction: column; align-items: start; margin-bottom: 30px;}
.company_overview ul{width: 100%;}
.company_overview{background-position: center;}
.company_overview ul li span{font-size: 2rem;}
.company_overview ul li p{font-size: 2rem;}
.company_vision ul li{width: calc(100% / 5 - 20px);}
.company_vision ul li div span{font-size: 1.8rem;}
.company_top p{width: 100%;}
.company_overview ul li::before{width: 5px; height: 5px;}

/*contact*/
.contact_wrap ul li h3{font-size: 2.2rem;}




 } 

@media (max-width: 1080px) { 
       /*sub-top*/
   .sub_visual_txt h2{font-size: 3rem; margin-bottom: 15px;}
   .sub_visual_txt{text-align: center; z-index:50 ; color: #fff;}
   .sub_page_visual{position: relative; }
   .sub_page_visual::before{content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(3px); position: absolute; left: 0; top: 0;}
   .sub_tit{font-size: 3.5rem;}
   .sub_tit::after{width: 10px; height: 10px;}
.sub_visual_txt p{line-height: 1.2;}

   /*인사말*/
.company_top p{font-size: 2rem;}
.company_overview ul{padding: 80px 0;}
.company_overview ul li{flex-direction: column; align-items: start;}
.company_overview ul li p{margin-top: 10px;}
.company_vision ul li{width:calc(100% / 5 - 10px) ;}
.company_overview ul li span{width: 100%;}


/*contact*/
.contact_wrap h2{font-size: 2.2rem;}
.contact_wrap ul li h3{font-size: 2rem;}
.contact_wrap ul li{height: auto; padding: 50px 30px;}
.contact_wrap ul li::before{width:180px; height: 180px; bottom: -10px; background-size: contain;}
.location ul li{padding: 0;}

/*제품*/
.pro_table_wrap table tr th{font-size: 1.8rem;}
.pro_table_wrap table tr td{padding: 5px;}




} 

@media (max-width: 800px) { 
       /*sub-top*/
   .sub_visual_txt h2{font-size: 2.6rem;}
   .visual_menu_wrap{width: 100%;}
   .depth_wrap{padding-left: 0; width: 98%;}
   .sub_tit{font-size: 3rem;}
   .sub_visual_box{height: 500px;}
   .sub_visual_txt p{font-size:2.4rem ;}

    .sub_bottom{margin-bottom: 100px;}


    /*인사말*/
.company_top p{font-size: 2rem;}
.company_overview ul li span{font-size: 1.8rem;}
.company_overview ul li p{font-size: 1.8rem;}
.company_vision ul{flex-wrap: wrap; gap: 10px;}
.company_vision ul li{flex: 1 1 27%;}
.company_vision{margin-bottom: 30px;}
.company_vision ul li img{width: 100px;}
.company1_table{flex-direction: column;}
.company1_table ul{width: 100%; margin-bottom: 20px;}
.company1_table .company_img{width: 100%;}
.company1_table ul li{flex-direction: column; justify-content: start; align-items: start;}
.company1_table ul li::before{top: 10px;}
.company1_table ul li span{width: 100%; }
.company1_table ul li p{width: 100%;margin-top: 10px;}
.company_greeting div{font-size: 1.8rem;}
.company_greeting div.sing{font-size: 2rem;}


/*contact*/
.contact_wrap h2{font-size: 2rem; margin-top: 50px;}
.contact_wrap ul li p{font-size: 1.8rem; display: flex;}
.contact_wrap ul li p i{font-size: 2rem;}
.contact_wrap ul li{flex: 1 1 33%; padding: 30px 20px;}
.contact_wrap ul li::before{width: 120px; height: 120px;}

.contact_wrap ul li a{padding:50px 30px;}
.contact_wrap ul li a i{top: 10px; right: 10px;}
.location ul li{padding: 0;}


/*제품*/
.pro_table_wrap table tr th{font-size: 1.7rem;}
.pro_table_wrap table tr td{font-size: 1.6rem;}
.pro_table_wrap table tr th span{font-size: 1.7rem;}
.pro_table_wrap table tr td.pro_img img{width: 100px;}
.pro_table_wrap table tr td.pro_img span{line-height: 1;}


} 
@media (max-width: 650px) {
     /*sub-top*/
    .sub_visual_box{height: 480px;}
    .sub_visual_txt h2{font-size: 2.4rem;}
    .sub_tit{font-size: 2.4rem; margin: 80px 0 30px;}
    .depth_wrap > div{width: 33%;}
    .depth_wrap > div.depth2{min-width: 50%;}
    .sub_tit i{font-size: 2rem; height: 9px;}
    .depth_wrap > div.home_btn{display: none;}
    /* .depth_wrap > div:last-child::after{display: none;} */
    .sub_visual_txt p{line-height: 1.5; font-size: 1.8rem;}
/* .product_top .depth3{display: none;} */




    /*인사말*/
.company_top p{font-size: 1.8rem;}
.company_overview ul li span{font-size: 1.7rem;}
 .company_overview ul li p{font-size: 1.6rem;}
.company_vision ul li div span{font-size: 1.6rem;}
.company_vision ul li{padding: 20px;}
.company1_table ul li span{font-size: 1.8rem;}
.company1_table ul li p{font-size: 1.8rem;}

/*contact*/
.contact_wrap h2{margin-top: 30px;}
.map{margin-top: 50px;}
.contact_wrap ul li a img{width: 180px;}

/*제품*/
.pro_table_wrap table tr th span{font-size: 1.4rem;}
.product_search input{width: 80%;}
.product_search button{width: 15%;}
.pro_table_wrap table tr td img{width: 30px;}


 } 
@media (max-width: 480px) {
        /*sub-top*/
    .depth_wrap .depth_name{font-size: 16px;}
    .sub_visual_txt h2{font-size: 2.2rem; margin-bottom: 20px;}
    .visual_menu_wrap .com_depth{padding: 10px;}
    .depth_wrap > div{padding: 0 10px;}
    .visual_menu_wrap .com_depth li a{font-size: 15px;}
    .depth_wrap{width: 95%;}
    .sub_visual_txt p br{display: none;}
.sub_visual_txt p{font-size: 1.6rem;}
    .sub_bottom{margin-bottom: 80px;}
    .sub_tit{font-size: 2rem; }


    /*인사말*/
.company_top p{font-size: 1.7rem;}
.company_vision ul li{flex: 1 1 33%;}
.company_vision ul li img{width: 80px;}
.company1_table ul li span{font-size: 1.6rem;}
.company1_table ul li p{font-size: 1.6rem;}
.company_greeting div{font-size: 1.6rem; margin-bottom: 20px;}
.company_greeting div.sing{font-size: 1.8rem;}
.company_vision ul li div p{font-size: 1.4rem;}

/*contact*/
.contact_wrap h2{font-size: 1.8rem;}
.contact_wrap ul li h3{font-size: 1.7rem;}
.contact_wrap ul li p{font-size: 1.6rem;}
.contact_wrap ul li{flex: 1 1 80%;}
.contact_wrap ul li h3::before{width: 5px; height: 5px;}


 } 
@media (max-width: 400px) { }