@charset "utf-8";



/**********제품소개 카테고리 1******************************/
/**** pc ****/
@media only all and (min-width:1301px) {

.cate_title, .iconbox, .cate_listbox{
			transition: all 0.5s;
			-moz-transition: all 0.5s; /* Firefox 4 */
			-webkit-transition: all 0.5s; /* Safari and Chrome */
			-o-transition: all 0.5s; /* Opera */
		}    
    
.cate_box01{ width: 100%; float: left;; margin-top: -1px  ;    }   
.cate_box01 ul{  width: 100%; float: left; height: auto}      
.cate_box01 ul.outbox>li{ width:calc(25% + 1px); float: left; border: 1px solid #ccc; box-sizing: border-box;  margin-right: -1px; height: 100%; position: relative }     

.cate_box01 ul.outbox>li .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li .cate_inbox .cate_title{ width: 100%; float: left; box-sizing: border-box; height: 80px; background-color: #f7f7f7; line-height: 80px; font-size: 16px; color:  #333 ; padding: 0px 20px; position: relative}   
.cate_box01 ul.outbox>li .cate_inbox .cate_title a{ color: #333 ; position: relative; ;width: 100%; float: left;}       
.cate_box01 ul.outbox>li .cate_inbox .cate_title a i{ display: none}       
.cate_box01 ul.outbox>li .cate_inbox .cate_title .iconbox{  position: absolute; right: 10px; top: 0px}
.cate_box01 ul.outbox>li .cate_inbox .cate_title .iconbox img{  }     
	
 .cate_box01 ul.outbox>li:hover { width:calc(25% + 1px); float: left; border: 1px solid  rgba(0, 0, 0,0.7); box-sizing: border-box;  margin-right: -1px; height: 100%; pposition: relative ; z-index: 9}   
.cate_box01 ul.outbox>li:hover .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title{ width: 100%; float: left; box-sizing: border-box; height: 80px; background-color: #f7f7f7; line-height: 80px; font-size: 16px; color:  #333 ; padding: 0px 20px; position: relative}   
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title a{ color: #333 ; position: relative;width: 100%; float: left;}       
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title a i{ display: none}       
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title .iconbox{  position: absolute; right: 10px; top: 0px}
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title .iconbox img{  }       
    

    
.cate_box01 ul.outbox>li.on{ width:calc(25% + 1px); float: left; border: 1px solid  #ed1a3b;  box-sizing: border-box;   margin-right: -1px; height: 100%; pposition: relative ; z-index: 1}     
.cate_box01 ul.outbox>li.on .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title{ width: 100%; float: left;  box-sizing: border-box; height: 80px; background-color: #fff; line-height: 80px; font-size: 16px; color:  #333; padding: 0px 20px; ; position: relative;}  
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title a{ color: #333; position: relative; z-index:1; width: 100%; float: left;}       
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title a i{  position: absolute; right:0px; top: 15px; color: #fff; font-size: 25px; display: block}         
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title .iconbox{  position: absolute; right: 5px; top: 0px}
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title .iconbox img{  }    
    



  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
  
.cate_title, .iconbox, .cate_listbox{
			transition: all 0.5s;
			-moz-transition: all 0.5s; /* Firefox 4 */
			-webkit-transition: all 0.5s; /* Safari and Chrome */
			-o-transition: all 0.5s; /* Opera */
		}    
    
.cate_box01{ width: 100%; float: left; margin-top: -1px  ;  }   
.cate_box01 ul.outbox{  width: 100% !important; float: left; }      
.cate_box01 ul.outbox>li{ width:25%; float: left; border: 1px solid #ccc; box-sizing: border-box;  margin-right: -1px; height: 100%; position: relative }   
	
.cate_box01 ul.outbox>li .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li .cate_inbox .cate_title{ width: 100%; float: left; box-sizing: border-box; height: 80px; background-color: #f7f7f7; line-height: 80px; font-size: 16px; color:  #333 ; padding: 0px 20px; position: relative}   
.cate_box01 ul.outbox>li .cate_inbox .cate_title a{ color: #333 ; position: relative; z-index: 99;width: 100%; float: left;}       
.cate_box01 ul.outbox>li .cate_inbox .cate_title a i{ display: none}       
.cate_box01 ul.outbox>li .cate_inbox .cate_title .iconbox{  position: absolute; right: 10px; top: 0px}
.cate_box01 ul.outbox>li .cate_inbox .cate_title .iconbox img{  }     
	
 .cate_box01 ul.outbox>li:hover { width:calc(25% + 1px); float: left; border: 1px solid  rgba(0, 0, 0,0.7); box-sizing: border-box;  margin-right: -1px; height: 100%; pposition: relative ; z-index: 9}   
.cate_box01 ul.outbox>li:hover .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title{ width: 100%; float: left; box-sizing: border-box; height: 80px; background-color: #f7f7f7; line-height: 80px; font-size: 16px; color:  #333 ; padding: 0px 20px; position: relative}   
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title a{ color: #333 ; position: relative; z-index: 99;width: 100%; float: left;}       
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title a i{ display: none}       
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title .iconbox{  position: absolute; right: 10px; top: 0px}
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title .iconbox img{  }       
    

    
.cate_box01 ul.outbox>li.on{ width:calc(25% + 1px); float: left; border: 1px solid  #ed1a3b;  box-sizing: border-box;   margin-right: -1px; height: 100%; pposition: relative ; z-index: 999 }     
.cate_box01 ul.outbox>li.on .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title{ width: 100%; float: left;  box-sizing: border-box; height: 80px; background-color: #fff; line-height: 80px; font-size: 16px; color:  #333; padding: 0px 20px; ; position: relative;}  
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title a{ color: #333; position: relative; z-index: 99; width: 100%; float: left;}       
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title a i{  position: absolute; right:0px; top: 15px; color: #fff; font-size: 25px; display: block}         
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title .iconbox{  position: absolute; right: 5px; top: 0px}
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title .iconbox img{  }    
    
     
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
   .cate_title, .iconbox, .cate_listbox{
			transition: all 0.5s;
			-moz-transition: all 0.5s; /* Firefox 4 */
			-webkit-transition: all 0.5s; /* Safari and Chrome */
			-o-transition: all 0.5s; /* Opera */ 
		}    
    
.cate_box01{ width: 100%; float: left;; }  
.cate_box01 ul{  width: 100%; float: left; height: auto}       
.cate_box01 ul.outbox>li{ width:50%; float: left; border: 1px solid #ccc; box-sizing: border-box;margin-top: -1px  ; margin-right: -1px; height: 100%; position: relative }     
	
.cate_box01 ul.outbox>li .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li .cate_inbox .cate_title{ width: 100%; float: left; box-sizing: border-box; height: 50px; background-color: #f7f7f7; line-height: 50px; font-size: 14px; color:  #333 ; padding: 0px 20px; position: relative}   
.cate_box01 ul.outbox>li .cate_inbox .cate_title a{ color: #333 ; position: relative; z-index: 99;width: 100%; float: left;}       
.cate_box01 ul.outbox>li .cate_inbox .cate_title a i{ display: none}       
.cate_box01 ul.outbox>li .cate_inbox .cate_title .iconbox{  position: absolute; right: 10px; top: 0px}
.cate_box01 ul.outbox>li .cate_inbox .cate_title .iconbox img{ width: 40px   }     
	
 .cate_box01 ul.outbox>li:hover { width:50%;  float: left; border: 1px solid  rgba(0, 0, 0,0.7); box-sizing: border-box;  margin-right: -1px; height: 100%; pposition: relative ; z-index: 9}   
.cate_box01 ul.outbox>li:hover .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title{ width: 100%; float: left; box-sizing: border-box; height: 50px; background-color: #f7f7f7; line-height: 50px; font-size: 14px; color:  #333 ; padding: 0px 20px; position: relative}   
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title a{ color: #333 ; position: relative; z-index: 99;width: 100%; float: left;}       
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title a i{ display: none}       
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title .iconbox{  position: absolute; right: 10px; top: 0px}
.cate_box01 ul.outbox>li:hover .cate_inbox .cate_title .iconbox img{width: 40px    }       
    

    
.cate_box01 ul.outbox>li.on{ width:50%; float: left; border: 1px solid  #ed1a3b;  box-sizing: border-box;   margin-right: -1px; height: 100%; pposition: relative ; z-index: 999 }     
.cate_box01 ul.outbox>li.on .cate_inbox{ width:100%; height: 100%; float: left;}   
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title{ width: 100%; float: left;  box-sizing: border-box; height: 50px; background-color: #fff; line-height: 50px; font-size: 14px; color:  #333; padding: 0px 20px; ; position: relative;}  
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title a{ color: #333; position: relative; z-index: 99; width: 100%; float: left;}       
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title a i{  position: absolute; right:0px; top: 15px; color: #fff; font-size: 25px; display: block}         
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title .iconbox{  position: absolute; right: 5px; top: 0px}
.cate_box01 ul.outbox>li.on .cate_inbox .cate_title .iconbox img{ width: 40px   }    
    

}


/*---------------------- ----------------------*/

/**** pc ****/
@media only all and (min-width:1301px) {
	    
.cate_box01_2{ width:calc(100% + 1px) ; float: left; padding: 1vw; box-sizing: border-box; border: 1px solid #ccc;  } 
.cate_box01_2 .cate_listbox { width: 100%; float: left;  position: relative; z-index: 1; }   
.cate_box01_2 .cate_listbox ul.smen{ width: 80%; min-height:100px; float: right;  font-size: 16px; color:  #999 ; box-sizing: border-box;  line-height: 28px!important;  display:flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between;  justify-content: flex-start;  }       	
.cate_box01_2 .cate_listbox ul.smenu li { width: 20%; float: left;    }     	
.cate_box01_2 .cate_listbox ul.smenu li a{ width: 100%; float: left;  font-size: 16px; color:  #999 ; box-sizing: border-box;  line-height: 28px!important;  }       
.cate_box01_2 .cate_listbox ul.smenu li a:hover{ idth: 20%; float: left; font-size: 16px; color:  #000 ; box-sizing: border-box;  line-height: 28px!important;  }   
    
.cate_box01_2  .cate_listbox .iconbox{ width:15%; float: left; text-align: center	}     
.cate_box01_2  .cate_listbox .iconbox img{  width: 80px	}    
    

    
}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
.cate_box01_2{ width:calc(100% + 1px) ; float: left; padding: 1vw; box-sizing: border-box; border: 1px solid #ccc; } 
.cate_box01_2 .cate_listbox { width: 100%; float: left;  position: relative; z-index: 99; }   
.cate_box01_2 .cate_listbox ul.smen{ width: 80%; min-height:100px; float: right;  font-size: 16px; color:  #999 ; box-sizing: border-box;  line-height: 28px!important;  display:flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between;  justify-content: flex-start;  }       	
.cate_box01_2 .cate_listbox ul.smenu li { width: 33.3%; float: left;    }     	
.cate_box01_2 .cate_listbox ul.smenu li a{ width: 100%; float: left;  font-size: 14px; color:  #999 ; box-sizing: border-box;  line-height: 28px!important;  }       
.cate_box01_2 .cate_listbox ul.smenu li a:hover{ idth: 20%; float: left; font-size: 14px; color:  #000 ; box-sizing: border-box;  line-height: 28px!important;  }   
    
.cate_box01_2  .cate_listbox .iconbox{ width:15%; float: left; text-align: center	}     
.cate_box01_2  .cate_listbox .iconbox img{  width: 80px	}    
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.cate_box01_2{ width:calc(100% + 1px) ; float: left; padding: 1vw 2vw; box-sizing: border-box; border: 1px solid #ccc;  } 
.cate_box01_2 .cate_listbox { width: 100%; float: left;  position: relative; z-index: 99; }   
.cate_box01_2 .cate_listbox ul.smen{ width:100%;float: right;  font-size: 16px; color:  #999 ; box-sizing: border-box;  line-height: 28px!important;  display:flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between;  justify-content: flex-start;  }       	
.cate_box01_2 .cate_listbox ul.smenu li { width: 50%; float: left;    }     	
.cate_box01_2 .cate_listbox ul.smenu li a{ width: 100%; float: left;  font-size: 13px; color:  #999 ; box-sizing: border-box;  line-height: 28px!important;  }       
.cate_box01_2 .cate_listbox ul.smenu li a:hover{ idth: 20%; float: left; font-size: 13px; color:  #000 ; box-sizing: border-box;  line-height: 28px!important;  }   
    
.cate_box01_2  .cate_listbox .iconbox{ width:20%; float: left; text-align: center; display: none	}     
.cate_box01_2  .cate_listbox .iconbox img{  width: 50px	}    
}






/**********제품소개 카테고리 검색******************************/


/**** pc ****/
@media only all and (min-width:1301px) {    
.cate_box02{  width:calc(100% + 1px); float: left; margin-top: -1px;border: 1px solid #ccc; box-sizing: border-box; background-color: #f7f7f7;   padding: 20px ; }   
.cate_box02 .search_in{ width: 100%; float: left;} 
.cate_box02 .search_in .fl_t{ width: 120px; float: left;height: 40px; text-align: center; border-right: 1px solid #ccc;  line-height: 40px; }   
.cate_box02 .search_in .fr_t{ width:calc(100% - 120px); float: left;padding-left: 20px; box-sizing: border-box } 		
.cate_box02 .search_in .search_w{ width:50%; float: left;padding-left: 20px; box-sizing: border-box } 	
.cate_box02 .search_in .search_info{ float: left;padding-left: 20px; box-sizing: border-box ;  line-height: 40px; font-size: 12px;} 	
.cate_box02 .search_in .search_info .inin{ float: left; margin-right: 10px; line-height: 20px; margin-top: 10px} 	
.cate_box02 .search_in .search_info input{ float: left; margin-right: 10px; } 	
	
	
.cate_box02 .search_in2{ width: 100%; float: left; margin-bottom: 20px}   
.cate_box02 .search_in2 .fl_t{width: 120px; float: left;height: 40px; text-align: center; border-right: 1px solid #ccc;  line-height: 40px;}   
.cate_box02 .search_in2 .fr_t{ width:calc(100% - 120px); float: right; padding-left: 20px; box-sizing: border-box} 
.cate_box02 .search_in2 .fr_t .tx1{  float: left; padding-left: 10px; font-size: 12px; box-sizing: border-box; line-height: 30px} 
.cate_box02 .search_in2 .fr_t .tx_btn{float: left; margin-top: 4px } 	
	
.cate_box02 .search_in2 .fr_t  .tx_btn input.tt_1{ float: left;padding:5px  10px; border: 1px solid #ccc; margin-right: -1px;  position: relative; color: #666; font-size: 13px; background-color: #fff} 		
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1{ float: left;padding:5px  10px; border: 1px solid #ccc; margin-right: -1px;  position: relative; color: #666; font-size: 13px; background-color: #fff} 	
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1:hover{ padding:5px  10px; border: 1px solid  #333; background-color: #333; color: #fff; margin-right: -1px;  position: relative;font-size: 13px;} 	
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1:active{ padding:5px  10px; border: 1px solid #333;  background-color: #333; color: #fff; margin-right: -1px;  position: relative; font-size: 13px;} 	
  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
.cate_box02{  width:calc(100% + 1px); float: left; margin-top: -1px;border: 1px solid #ccc; box-sizing: border-box; background-color: #f7f7f7;   padding: 20px ; }   
.cate_box02 .search_in{ width: 100%; float: left;} 
.cate_box02 .search_in .fl_t{ width: 120px; float: left;height: 40px; text-align: center; border-right: 1px solid #ccc;  line-height: 40px; }   
.cate_box02 .search_in .fr_t{ width:calc(100% - 120px); float: left;padding-left: 20px; box-sizing: border-box } 		
.cate_box02 .search_in .search_w{ width:50%; float: left;padding-left: 20px; box-sizing: border-box } 	
.cate_box02 .search_in .search_info{ float: left;padding-left: 20px; box-sizing: border-box ;  line-height: 40px; font-size: 12px;} 	
.cate_box02 .search_in .search_info .inin{ float: left; margin-right: 10px; line-height: 20px; margin-top: 10px} 	
.cate_box02 .search_in .search_info input{ float: left; margin-right: 10px; } 	
	
	
.cate_box02 .search_in2{ width: 100%; float: left; margin-bottom: 20px}   
.cate_box02 .search_in2 .fl_t{width: 120px; float: left;height: 40px; text-align: center; border-right: 1px solid #ccc;  line-height: 40px;}   
.cate_box02 .search_in2 .fr_t{ width:calc(100% - 120px); float: right; padding-left: 20px; box-sizing: border-box} 
.cate_box02 .search_in2 .fr_t .tx1{  float: left; padding-left: 10px; font-size: 12px; box-sizing: border-box; line-height: 30px} 
.cate_box02 .search_in2 .fr_t .tx_btn{float: left; margin-top: 4px } 	
	
.cate_box02 .search_in2 .fr_t  .tx_btn input.tt_1{ float: left;padding:5px  10px;border: 1px solid #ccc; margin-right: -1px;  position: relative; color: #666; font-size: 13px; background-color: #fff} 		
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1{ float: left;padding:5px  10px;border: 1px solid #ccc; margin-right: -1px;  position: relative; color: #666; font-size: 13px; background-color: #fff} 	
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1:hover{ padding:5px  10px;border: 1px solid  #333; background-color: #333; color: #fff; margin-right: -1px;  position: relative;font-size: 13px;} 	
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1:active{ padding:5px  10px; border: 1px solid #333;  background-color: #333; color: #fff; margin-right: -1px;  position: relative; font-size: 13px;} 
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
 .cate_box02{  width:100%; float: left;; margin-top: -1px;border: 1px solid #ccc; box-sizing: border-box; background-color: #f7f7f7;   padding: 10px 10px 5px ; }   
.cate_box02 .search_in{ width: 100%; float: right;}   
.cate_box02 .search_in .fl_t{ width: 120px; float: left;height: 40px; background-color: #eee; text-align: center; border: 1px solid #ccc;  line-height: 40px; border-right: none; display: none; }   
.cate_box02 .search_in .fr_t{ width:100%; float: left; margin-top: 10px } 	
.cate_box02 .search_in .search_w{ width:100%; float: left;  box-sizing: border-box ; } 	
.cate_box02 .search_in .search_info{ float: left;  box-sizing: border-box ;  line-height: 40px; font-size: 12px;} 	
.cate_box02 .search_in .search_info .inin{ float: left; margin-right: 10px; line-height: 20px; } 	
.cate_box02 .search_in .search_info input{ float: left; margin-right: 10px; } 	
		
	
.cate_box02 .search_in2{ width: 100%;float: left;}   
.cate_box02 .search_in2 .fl_t{width: 120px; float: left;height: 40px; background-color: #eee; text-align: center; border: 1px solid #ccc;  line-height: 40px; display: none}   
.cate_box02 .search_in2 .fr_t{ width:100%; float: right;  box-sizing: border-box} 
.cate_box02 .search_in2 .fr_t .tx1{ width:100%; float: left;  margin-bottom: 3px; font-size: 12px; margin-top: 10px} 
.cate_box02 .search_in2 .fr_t .tx_btn{ width:100%; float: left; } 	
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1{ float: left;padding:3px  7px; border: 1px solid #ccc; margin-right: -1px;  position: relative; color: #666; font-size: 13px; background-color: #fff; margin-top: -1px} 	
.cate_box02 .search_in2 .fr_t  .tx_btn .tt_1:hover{ padding:3px 7px ; border: 1px solid  #333; background-color: #333; color: #fff; margin-right: -1px;  position: relative;font-size: 13px;; margin-top: -1px} 	

}

/**********제품소개 카테고리 검색******************************/
/**** pc ****/
@media only all and (min-width:1301px) {    
.search_tx{  width:100%; float: left;padding: 50px 0px 10px 0px ;  text-align: center; display:flex; justify-content: center;}   
.search_tx .icon{ height: 44px; width: 44px; margin-right: 10px}   
.search_tx .tx{ height: 44px; line-height: 44px; font-size: 18px; color: #666}   
.search_tx .tx em{ font-size: 18px; color: #000; font-weight: 500}      
  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
  .search_tx{  width:100%; float: left;padding: 50px 0px 10px 0px ;  text-align: center; display:flex; justify-content: center;}   
.search_tx .icon{ height: 44px; width: 44px; margin-right: 10px}   
.search_tx .tx{ height: 44px; line-height: 44px; font-size: 18px; color: #666}   
.search_tx .tx em{ font-size: 18px; color: #000; font-weight: 500}       
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
   .search_tx{  width:100%; float: left;padding: 40px 0px 10px 0px ;  text-align: center; display:flex; justify-content: center;}   
.search_tx .icon{ height: 44px; width: 44px; margin-right: 10px}   
.search_tx .icon img{  width:30px;}       
.search_tx .tx{ height: 30px; line-height: 30px; font-size: 14px; color: #666}   
.search_tx .tx em{ font-size: 14px; color: #000; font-weight: 500}     
}


/**********제품소개 카테고리 검색******************************/
/**** pc ****/
@media only all and (min-width:1301px) {    


#detail_wrap{ width:100%; float:left; margin-top: 50px}
#detail_wrap .products_top{ width:100%; float:left; margin-bottom:50px;  position:relative;}
#detail_wrap .products_top .fl{ width:50%; float:left; position:relative}
#detail_wrap .products_top .fl .bimg{ width:calc(100% - 120px) ; /*min-height:400px;*/ float:left; position:relative; border: 1px solid #ccc; box-sizing: border-box; overflow: hidden }
#detail_wrap .products_top .fl .bimg img{width: 100%;}
#detail_wrap .products_top .fl .simg{ width:120px; float:left; position:relative; border: 1px solid #ccc; box-sizing: border-box; margin-left: -1px; margin-bottom: -1px; height: 104px; overflow: hidden }
#detail_wrap .products_top .fl .simg img{ max-width: 120px;}


#detail_wrap .products_top .fr{ width:50%; float:left; position:relative; box-sizing: border-box; padding-left:3vw; box-sizing: border-box}
#detail_wrap .products_top .fr .pro_title{ width:100%; float:left; margin-bottom: 20px; font-size: 25px; color: #000;  font-weight: 500; font-family: 'Noto Sans KR', sans-serif; line-height: 30px}
#detail_wrap .products_top .fr .pro_info_box{ width:100%; float:left; margin-bottom: 20px; }
#detail_wrap .products_top .fr .btn_box{ width:100%; float:left; margin-bottom: 10px; }
#detail_wrap .products_top .fr .btn_box .btn_down{ width:30%; float:left; }
#detail_wrap .products_top .fr .btn_box .btn_down a{ width:100%; float:left; display: block;  background-color: #ff3333; padding: 20px 0px; color: #fff; font-size: 16px; text-align: center }
    
#detail_wrap .products_top .fr .btn_box .btn_search{ width:30%; float:left;  }
#detail_wrap .products_top .fr .btn_box .btn_search a{ width:100%; float:left; display: block;  background-color: #666666; padding: 20px 0px; color: #fff; font-size: 16px; text-align: center }

#detail_wrap .products_top .fr .btn_box .btn_movie{ width:30%; float:left;  }
#detail_wrap .products_top .fr .btn_box .btn_movie a{ width:100%; float:left; display: block;  background-color: #FAA61A; padding: 20px 0px; color: #fff; font-size: 16px; text-align: center }

#detail_wrap .products_top .fr .btn_box .btn_sns{ width:10%; float:right; display:flex;  flex-direction:row;  justify-content: flex-end; margin-top: 0px }
#detail_wrap .products_top .fr .btn_box .btn_sns a{ width: 50px; height: 50px; background-color: #666; text-align: center; border-radius: 50px; margin-left: 2px ;transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}
#detail_wrap .products_top .fr .btn_box .btn_sns a i{  color:  #fff; line-height:50px }
#detail_wrap .products_top .fr .btn_box .btn_sns a img{  margin-top: 3px }
#detail_wrap .products_top .fr .btn_box .btn_sns a:hover{ width: 50px; height: 50px; background-color: #000; text-align: center; border-radius: 50px; margin-left: 2px }    
  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {


#detail_wrap{ width:100%; float:left; margin-top: 50px}
#detail_wrap .products_top{ width:100%; float:left; margin-bottom:50px;  position:relative;}
#detail_wrap .products_top .fl{ width:50%; float:left; position:relative}
#detail_wrap .products_top .fl .bimg{ width:calc(100% - 120px) ; /*min-height:400px;*/ float:left; position:relative; border: 1px solid #ccc; box-sizing: border-box; overflow: hidden }
#detail_wrap .products_top .fl .bimg img{width: 100%;}
#detail_wrap .products_top .fl .simg{ width:120px; float:left; position:relative; border: 1px solid #ccc; box-sizing: border-box; margin-left: -1px; margin-bottom: -1px; height: 104px; overflow: hidden }
#detail_wrap .products_top .fl .simg img{ max-width: 120px;}


#detail_wrap .products_top .fr{ width:50%; float:left; position:relative; box-sizing: border-box; padding-left:3vw; box-sizing: border-box}
#detail_wrap .products_top .fr .pro_title{ width:100%; float:left; margin-bottom: 20px; font-size: 25px; color: #000;  font-weight: 500; font-family: 'Noto Sans KR', sans-serif; line-height: 30px; font-weight: 500; font-family: 'Noto Sans KR', sans-serif; }
#detail_wrap .products_top .fr .pro_info_box{ width:100%; float:left; margin-bottom: 20px; }
#detail_wrap .products_top .fr .btn_box{ width:100%; float:left; margin-bottom: 10px; }
#detail_wrap .products_top .fr .btn_box .btn_down{ width:30%; float:left; }
#detail_wrap .products_top .fr .btn_box .btn_down a{ width:100%; float:left; display: block;  background-color: #ff3333; padding: 20px 0px; color: #fff; font-size: 16px; text-align: center }
    
#detail_wrap .products_top .fr .btn_box .btn_search{ width:30%; float:left;  }
#detail_wrap .products_top .fr .btn_box .btn_search a{ width:100%; float:left; display: block;  background-color: #666666; padding: 20px 0px; color: #fff; font-size: 16px; text-align: center }

#detail_wrap .products_top .fr .btn_box .btn_movie{ width:30%; float:left;  }
#detail_wrap .products_top .fr .btn_box .btn_movie a{ width:100%; float:left; display: block;  background-color: #FAA61A; padding: 20px 0px; color: #fff; font-size: 16px; text-align: center }

#detail_wrap .products_top .fr .btn_box .btn_sns{ width:10%; float:right; display:flex;  flex-direction:row;  justify-content: flex-end; margin-top: 0px }
#detail_wrap .products_top .fr .btn_box .btn_sns a{ width: 50px; height: 50px; background-color: #666; text-align: center; border-radius: 50px; margin-left: 2px ;transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}
#detail_wrap .products_top .fr .btn_box .btn_sns a i{  color:  #fff; line-height:50px }
#detail_wrap .products_top .fr .btn_box .btn_sns a img{  margin-top: 3px }
#detail_wrap .products_top .fr .btn_box .btn_sns a:hover{ width: 50px; height: 50px; background-color: #000; text-align: center; border-radius: 50px; margin-left: 2px }    
}
/**** 모바일 ****/
@media only all and (max-width:767px) {


#detail_wrap{ width:100%; float:left; margin-top:-1px}
#detail_wrap .products_top{ width:100%; float:left; margin-bottom:50px;  position:relative;}
#detail_wrap .products_top .fl{ width:100%; float:left; position:relative}
#detail_wrap .products_top .fl .bimg{ width:100% ;  float:left; position:relative; border: 1px solid #ccc; box-sizing: border-box; overflow: hidden }
#detail_wrap .products_top .fl .bimg img{width: 100%;}
#detail_wrap .products_top .fl .simg{ width:calc(25% + 1px) ; float:left; position:relative; border: 1px solid #ccc; box-sizing: border-box; margin-left: -1px; margin-top: -1px;  overflow: hidden }
#detail_wrap .products_top .fl .simg img{ max-width: 100%;}


#detail_wrap .products_top .fr{ width:100%; float:left; position:relative; box-sizing: border-box; padding-top:3vw; box-sizing: border-box}
#detail_wrap .products_top .fr .pro_title{ width:100%; float:left; margin-bottom: 10px; font-size: 20px; color: #000; line-height: 30px; font-weight: 500; font-family: 'Noto Sans KR', sans-serif; }
#detail_wrap .products_top .fr .pro_info_box{ width:100%; float:left; margin-bottom: 20px; }
#detail_wrap .products_top .fr .btn_box{ width:100%; float:left; margin-bottom: 10px; }
#detail_wrap .products_top .fr .btn_box .btn_down{ width:50%; float:left; margin-bottom: 10px }
#detail_wrap .products_top .fr .btn_box .btn_down a{ width:100%; float:left; display: block;  background-color: #ff3333; padding: 15px 0px; color: #fff; font-size: 14px; text-align: center }
    
#detail_wrap .products_top .fr .btn_box .btn_search{ width:50%; float:left;  margin-bottom: 10px  }
#detail_wrap .products_top .fr .btn_box .btn_search a{ width:100%; float:left; display: block;  background-color: #666666; padding: 15px 0px; color: #fff; font-size: 14px; text-align: center }

#detail_wrap .products_top .fr .btn_box .btn_movie{ width:50%; float:left;  margin-bottom: 10px  }
#detail_wrap .products_top .fr .btn_box .btn_movie a{ width:100%; float:left; display: block;  background-color: #FAA61A; padding: 15px 0px; color: #fff; font-size: 14px; text-align: center }
   
#detail_wrap .products_top .fr .btn_box .btn_sns{ width:40%; float:right; display:flex;  flex-direction:row;  justify-content: flex-end; margin-top: 0px }
#detail_wrap .products_top .fr .btn_box .btn_sns a{ width: 45px; height: 45px; background-color: #666; text-align: center; border-radius: 50px; margin-left: 2px ;transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}
#detail_wrap .products_top .fr .btn_box .btn_sns a i{  color:  #fff; line-height:45px }
#detail_wrap .products_top .fr .btn_box .btn_sns a img{  margin-top: 3px }
#detail_wrap .products_top .fr .btn_box .btn_sns a:hover{ width: 45px; height: 45px; background-color: #000; text-align: center; border-radius: 50px; margin-left: 2px }    
}


/**********제품소개 카테고리 검색******************************/
/**** pc ****/
@media only all and (min-width:1301px) {    
.pro_cont01{ width:100%; float:left;  margin-top: 30px ; line-height: 25px; font-size: 15px }
  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {  
.pro_cont01{ width:100%; float:left;  margin-top: 30px ; line-height: 25px; font-size: 15px }    
}
/**** 모바일 ****/
@media only all and (max-width:767px) {  
.pro_cont01{ width:100%; float:left;  margin-top: 10px ; line-height: 20px; font-size:12px }
}



/**********제품소개  소식******************************/
/**** pc ****/
@media only all and (min-width:1301px) {    
.pro_news{ width:100%; float:left; margin-top:2vw   }
.pro_news .pro_img{ width:40%; float:left; height: 330px  ; overflow: hidden; border: 1px solid #ccc}   
.pro_news .pro_img img{ width:100%; }       
.pro_news .pro_text{ width:60%; float:left; padding-left: 5vw; box-sizing: border-box ; height: 330px  ; position: relative; padding-top: 1vw  }   
.pro_news .pro_text .title{ width:100%; float:left; font-size: 24px; color:#333; font-weight: 500; font-family: 'Noto Sans KR', sans-serif;  margin-bottom: 20px  }  
.pro_news .pro_text .s_tx{ width:100%; float:left; font-size: 16px; line-height: 25px; color:#666;  margin-bottom: 20px  }   
.pro_news .pro_text .btn_more{ width:100%; float:left;  position: absolute; bottom: 0px;  }  
.pro_news .pro_text .btn_more a{ float:left;  padding: 12px 40px 12px 20px; color:  #fff;  font-size: 16px; position: relative ; background-color: #ff0000; display: block }  
.pro_news .pro_text .btn_more a i{  position: absolute; right: 10px; top: 10px; color:  #fff; font-size: 20px  } 
.pro_news .pro_text .btn_more a:hover{ float:left;  padding: 12px 40px 12px 20px; color:  #fff;  font-size: 16px; position: relative ; background-color: #cc0000; display: block }  

  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {  
.pro_news{ width:100%; float:left; margin-top:2vw   }
.pro_news .pro_img{ width:40%; float:left; height: 330px  ; overflow: hidden; border: 1px solid #ccc}   
.pro_news .pro_img img{ width:100%; }       
.pro_news .pro_text{ width:60%; float:left; padding-left: 5vw; box-sizing: border-box ; height: 330px  ; position: relative; padding-top: 1vw  }   
.pro_news .pro_text .title{ width:100%; float:left; font-size: 24px; color:#333; font-weight: 500; font-family: 'Noto Sans KR', sans-serif;  margin-bottom: 20px  }  
.pro_news .pro_text .s_tx{ width:100%; float:left; font-size: 16px; line-height: 25px; color:#666;  margin-bottom: 20px  }   
.pro_news .pro_text .btn_more{ width:100%; float:left;  position: absolute; bottom: 0px;  }  
.pro_news .pro_text .btn_more a{ float:left;  padding: 12px 40px 12px 20px; color:  #fff;  font-size: 16px; position: relative ; background-color: #ff0000; display: block }  
.pro_news .pro_text .btn_more a i{  position: absolute; right: 10px; top: 10px; color:  #fff; font-size: 20px  } 
.pro_news .pro_text .btn_more a:hover{ float:left;  padding: 12px 40px 12px 20px; color:  #fff;  font-size: 16px; position: relative ; background-color: #cc0000; display: block }  

}
/**** 모바일 ****/
@media only all and (max-width:767px) {  
.pro_news{ width:100%; float:left; margin-top:-1px   }
.pro_news .pro_img{ width:100%; float:left; height: 300px  ; overflow: hidden; border: 1px solid #ccc}   
.pro_news .pro_img img{ width:100%; }       
.pro_news .pro_text{ width:100%; float:left;  box-sizing: border-box ;  position: relative; padding-top:2vw  }   
.pro_news .pro_text .title{ width:100%; float:left; font-size: 20px; color:#333; font-weight: 500; font-family: 'Noto Sans KR', sans-serif;  margin-bottom: 1vw  }  
.pro_news .pro_text .s_tx{ width:100%; float:left; font-size: 14px; line-height: 20px; color:#666;  margin-bottom: 20px  }   
.pro_news .pro_text .btn_more{ width:100%; float:left;   }  
.pro_news .pro_text .btn_more a{ width:100%; float:left;  padding: 12px 40px 12px 20px; color:  #fff;  font-size: 16px; position: relative ; background-color: #ff0000; display: block }  
.pro_news .pro_text .btn_more a i{  position: absolute; right: 10px; top: 10px; color:  #fff; font-size: 20px  } 
.pro_news .pro_text .btn_more a:hover{ float:left;  padding: 12px 40px 12px 20px; color:  #fff;  font-size: 16px; position: relative ; background-color: #cc0000; display: block }  

}


/**********제품소개 카테고리 검색******************************/
/**** pc ****/
@media only all and (min-width:1301px) {    
.cate_ui{ width:100%; float:left;  margin-top: 30px }
.cate_ui .fl_title{ width:200px; float:left; padding-right: 40px; box-sizing: border-box  }	
.cate_ui .fl_title .line{ width:100%; float:left; height: 2px; background-color: #666; margin-bottom: 10px }	
.cate_ui .fl_title .tx{ width:100%; float:left;  font-size: 18px; color: #333; font-weight: 900}		
.cate_ui .fr_box{ width:calc(100% - 200px); float:left;  }		
  }  
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {  
.cate_ui{ width:100%; float:left;  margin-top: 30px }
.cate_ui .fl_title{width:100%; float:left; box-sizing: border-box; margin-bottom: 10px  }	
.cate_ui .fl_title .line{ width:100%; float:left; height: 2px; background-color: #666; margin-bottom: 10px; display: none }	
.cate_ui .fl_title .tx{ width:100%; float:left;  font-size: 18px; color: #333; font-weight: 900}		
.cate_ui .fr_box{ width:100%; float:left;  }		
}
/**** 모바일 ****/
@media only all and (max-width:767px) {  
.cate_ui{ width:100%; float:left;  margin-top: 15px }
.cate_ui .fl_title{width:100%; float:left; box-sizing: border-box; margin-bottom: 10px   }	
.cate_ui .fl_title .line{ width:100%; float:left; height: 2px; background-color: #666; margin-bottom: 10px; display: none  }	
.cate_ui .fl_title .tx{ width:100%; float:left;  font-size: 16px; color: #333; font-weight: 500}		
.cate_ui .fr_box{ width:100%; float:left;   }		
}