/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';



/*서브 공통******************************************************************************************************************/

/*공통*/
#sub_wrap{ font-size:1.8rem; line-height:1.8;  }

/*공통 컬러*/
body .color_blue{ color:#10338b; }


/*서브 공통 end******************************************************************************************************************/

/*회사소개******************************************************************************************************************/

/*인사말*/
#about_sec01{ display:flex; flex-wrap:wrap; }
#about_sec01 > div.img_box{ position:relative; z-index:1;  width:40%; }
#about_sec01 > div.txt_box{ width:60%; padding-right:15px;  }
#about_sec01 > div.txt_box h4{ margin-bottom:3rem;  font-size:2.8rem;  line-height:1.4; }
#about_sec01 > div.txt_box .content_box{ position:relative; padding:3rem 0 30rem;}
#about_sec01 > div.txt_box .content_box:after{ content:""; position:absolute; top:0; left:50%; width:200vw; height:100%; background:#f7f7f7;
	transform:translateX(-50%);  -webkit-transform:translateX(-50%);  -moz-transform:translateX(-50%); 
}
#about_sec01 > div.txt_box .content_box > p{ position:relative; z-index:1;  margin-bottom:2rem;}
#about_sec01 > div.txt_box .content_box > strong{ position:relative; z-index:1; display:block; margin-top:5rem; font-size:2.4rem;  }
#about_sec01 > div.txt_box .content_box > strong span{ display:inline-block; margin-right:1rem;  font-size:2rem; font-weight:500;  }

@media all and (max-width:1199.98px) {
	#about_sec01 > div.img_box{ display:none; }
	#about_sec01 > div.txt_box{ width:100%; }
	#about_sec01 > div.txt_box .content_box{ padding-bottom:7rem;}
}

@media all and (max-width:991.98px) {
	#about_sec01 > div.txt_box h4{ font-size:2.5rem;}
	#about_sec01 > div.txt_box .content_box{ padding-bottom:5rem;}
	#about_sec01 > div.txt_box .content_box > p{ margin-bottom:1rem;}
	#about_sec01 > div.txt_box .content_box > strong{ font-size:2rem; margin-top:3rem;}
	#about_sec01 > div.txt_box .content_box > strong span{ font-size:1.8rem; }
}

/*오시는길*/
#location_sec01 .root_daum_roughmap{ width:100%; height:550px; margin-bottom:6rem;  }
#location_sec01 .root_daum_roughmap .wrap_controllers,
#location_sec01 .root_daum_roughmap .map_border{ display:none; }
#location_sec01 .root_daum_roughmap .wrap_map{ height:100%;}

#location_sec01 .location_info{ background:url('../_img/sub/location_logo.png') no-repeat right bottom; }
#location_sec01 .location_info li{ position:relative; padding-left:115px; margin-bottom:2rem; }
#location_sec01 .location_info li:last-child{ margin-bottom:0; }
#location_sec01 .location_info li b{ position:absolute; top:0; left:0; padding-left:35px; }
#location_sec01 .location_info li b i{ position:absolute; top:50%; left:0; color:#efefef; font-size:2.4rem; 
	transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);
}

@media all and (max-width:1199.98px) {
	#location_sec01 .root_daum_roughmap{ height:450px; margin-bottom:4rem;  }
	#location_sec01 .location_info li{ margin-bottom:1rem;}
	#location_sec01 .location_info{ background-size:120px; }
}

@media all and (max-width:991.98px) {
	#location_sec01 .root_daum_roughmap{ height:300px; margin-bottom:3rem;  }
	#location_sec01 .location_info{ background:none; }
	#location_sec01 .location_info li{ padding-left:90px; }
	#location_sec01 .location_info li b{ padding-left:30px; }
}



/*회사소개 end******************************************************************************************************************/

/*제품리스트*/
#product_list_top{ /* border-top:3px solid #333; */ padding:0rem 15px 7rem;  }
#product_list_top .about_box{ display:flex; flex-wrap:wrap; margin-bottom:7rem; }
#product_list_top .about_box > div.img_box{ position:relative; width:40%; padding-top:28%; background:#f9f9f9;  overflow:hidden;  }
#product_list_top .about_box > div.img_box img{ position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
#product_list_top .about_box > div.txt_box{ display:flex; align-items:center; width:60%; padding-left:7rem; }
#product_list_top .about_box > div.txt_box > div{ width:100%; }
#product_list_top .about_box > div.txt_box h4{ font-size:3rem; font-weight:700; line-height:1.4; letter-spacing: -0.7px;   }
#product_list_top .about_box > div.txt_box h4:after{ content:""; display:block; width:50px; height:2px; background:#000; margin:4rem 0; }
#product_list_top .about_box > div.txt_box h4 span{ font-weight:300; }
#product_list_top .about_box > div.txt_box ul{ padding:0; margin:0;}
#product_list_top .about_box > div.txt_box ul li{ list-style: none; padding-left:12px; position: relative; font-size: 2rem; font-weight: 300; margin-bottom: 0.5rem;}
#product_list_top .about_box > div.txt_box ul li:after{ content: ""; position: absolute; top:17px; left:0; width:3px; height:3px; border-radius: 100%; background:#000; }
#product_list_top .about_box > div.txt_box p{ font-size:2rem; font-weight:300; }

#product_cate_con{ border:1px solid #ddd;  }
#product_cate{ display:flex; flex-wrap:wrap; }
#product_cate li{ width:16.66666666666667%; border-right:1px solid #eee; border-bottom:1px solid #eee; border-bottom:1px solid #eee; margin-bottom:-1px;    }
#product_cate li:nth-child(6n+6){ border-right:0; }
#product_cate li a{display:block; height:5.5rem; line-height:5.5rem; font-size:1.6rem; padding:0 3rem; color:#333;  }
#product_cate li.on a{ font-weight:700; }

#product_list{ padding:7rem 0; background:#edf0f4;  }
#product_list > div > ul.list-unstyled{ display:flex; flex-wrap:wrap;}
#product_list > div > ul.list-unstyled li{ width:calc(33.33% - 2.666666666666667rem); margin-right:4rem; margin-top:4rem; text-align:center; }
#product_list > div > ul.list-unstyled li:nth-child(-n+3){ margin-top:0;}
#product_list > div > ul.list-unstyled li:nth-child(3n+3){ margin-right:0;}
#product_list > div > ul.list-unstyled li .img_box{ position:relative; padding-top:100%; background:#fff; }
#product_list > div > ul.list-unstyled li .img_box img{ position:absolute; top:50%; left:50%; width:100%; 
	transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);
}
#product_list > div > ul.list-unstyled li  .hover_box{ opacity:0;  position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,40,113,0.3);  display:flex; align-items:center; justify-content:center; 
	transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#product_list > div > ul.list-unstyled li a:hover  .hover_box{ opacity:1;}
#product_list > div > ul.list-unstyled li  .hover_box span{ width:10rem; height:10rem; line-height:10rem; border-radius:100%; color:#fff; font-weight:700; border:3px solid #fff;
	background: rgb(26,86,238);
	background: -moz-linear-gradient(128deg, rgba(26,86,238,1) 0%, rgba(17,54,148,1) 100%);
	background: -webkit-linear-gradient(128deg, rgba(26,86,238,1) 0%, rgba(17,54,148,1) 100%);
	background: linear-gradient(128deg, rgba(26,86,238,1) 0%, rgba(17,54,148,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a56ee",endColorstr="#113694",GradientType=1);
}
#product_list > div > ul.list-unstyled li strong{ display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; color:#333; margin-top:1.5rem;  }

@media all and (max-width:1430px) {
	#product_cate_con{ border:1px solid #ddd; }
	#product_cate{ flex-wrap:unset; }
	#product_cate li{ width:auto; border:0; border-right:1px solid #eee;  }
	#product_cate li:nth-child(6n+6){ border-right:1px solid #eee;  }
	#product_cate li a{font-size:1.6rem; padding:0 2rem; }
}

@media all and (max-width:1199.98px) {
	#product_list_top .about_box{ margin-bottom:5rem;}
	#product_list_top .about_box > div.txt_box{ padding-left:3rem; }
	#product_list_top .about_box > div.txt_box h4{ font-size:2.5rem; }
	#product_list_top .about_box > div.txt_box h4:after{ margin:2rem 0; }
	#product_list_top .about_box > div.txt_box p,
    #product_list_top .about_box > div.txt_box ul li{ font-size:1.8rem; }

	#product_list > div > ul.list-unstyled li{ width:calc(33.33% - 1rem); margin-right:1.5rem; margin-top:3rem; }
}

@media all and (max-width:991.98px) {
	#product_list_top{ padding:3rem 15px 5rem; }
    #product_list_top .about_box > div.img_box{ width:100%; padding-top: 70%;}
    #product_list_top .about_box > div.txt_box{ width:100%; margin-top:2rem; padding-left:0;  }
	#product_list_top .about_box > div.txt_box h4{ font-size:2rem; }
	#product_list_top .about_box > div.txt_box h4:after{ width:30px; }
	#product_list_top .about_box > div.txt_box p{ font-size:1.6rem; }

	#product_list{ padding:5rem 0; }
	#product_list > div > ul.list-unstyled li  .hover_box span{ width:60px; height:60px; line-height:60px;  font-size:1.4rem; }
}

@media all and (max-width:767.98px) {
	#product_list > div > ul.list-unstyled li{ width:calc(50% - .75rem); }
	#product_list > div > ul.list-unstyled li:nth-child(-n+3){ margin-top:3rem;}
	#product_list > div > ul.list-unstyled li:nth-child(3n+3){ margin-right:1.5rem;}
	#product_list > div > ul.list-unstyled li:nth-child(-n+2){ margin-top:0;}
	#product_list > div > ul.list-unstyled li:nth-child(2n+2){ margin-right:0;}
}

@media all and (max-width:380px) {
	#product_list > div > ul.list-unstyled li{ width:100%; margin-right:0; }
	#product_list > div > ul.list-unstyled li:nth-child(-n+2){ margin-top:3rem;}
}


/*제품 뷰*/
#product_view .top_box{ display:flex; flex-wrap:wrap; }
#product_view .top_box > div{ width:50%; }
#product_view .top_box > div.img_box .big_box{ position:relative;  padding-top:65%; background:#f9f9f9;  overflow:hidden; border:1px solid #ddd;   }
#product_view .top_box > div.img_box .big_box img{ position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
#product_view .top_box > div.img_box ul{ display:flex; flex-wrap:wrap;  }
#product_view .top_box > div.img_box ul li{ position:relative; padding-top:9%;  width:calc(16.66666666666667% -  16.66666666666667px); margin-right:20px; margin-top:20px;  border:1px solid #ddd; background:#f9f9f9;   }
#product_view .top_box > div.img_box ul li:nth-child(6n+6){ margin-right:0; }
#product_view .top_box > div.img_box ul li button{ position:absolute; top:0; left:0; width:100%; height:100%; border:none; background:none; outline:none; overflow:hidden; background:#fff;     }
#product_view .top_box > div.img_box ul li button img{ position:absolute; top:50%; left:50%; width:100%; 
	transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);
}
#product_view .top_box > div.txt_box{ display:flex; flex-wrap:wrap; align-content: space-between;   padding-left:7rem; }
#product_view .top_box > div.txt_box div{ width:100%; }
#product_view .top_box > div.txt_box h4{ font-size:2.4rem; font-weight:700;  }
#product_view .top_box > div.txt_box h4:after{ content:""; display:block; width:50px; height:2px; background:#000; margin:4rem 0; }
#product_view .top_box > div.txt_box p{ font-size:1.7rem; font-weight:300; margin-bottom:3rem;  }
#product_view .top_box > div.txt_box .link_box{ display:flex; flex-wrap:wrap;}
#product_view .top_box > div.txt_box .link_box a{ width:calc(50% - .75rem); margin-right:1.5rem; height:65px; line-height:65px; color:#fff; border:1px solid #10338b; background:#10338b; text-align:center;  font-size:1.6rem;  }
#product_view .top_box > div.txt_box .link_box a:nth-child(2n+2){ margin-right:0; }
#product_view .top_box > div.txt_box .link_box a:last-child{ width:100%;  margin-top:1.5rem; margin-right:0; }
#product_view .top_box > div.txt_box .link_box a.color_write{ background:#fff; border-color:#ddd; color:#333;  }


#product_view .bottom_box{ border-top:2px solid #10338b; margin-top:9rem; padding-top:5rem;}
#product_view .bottom_box img{ max-width:100%; }
#product_view .bottom_box .row{ margin:0 auto; max-width:80%; }

@media all and (max-width:1199.98px) {
	#product_view .top_box > div.img_box ul li{ width:calc(20% -  8px); margin-right:10px; margin-top:10px; padding-top:11%;    }
	#product_view .top_box > div.img_box ul li:nth-child(6n+6){ margin-right:10px; }
	#product_view .top_box > div.img_box ul li:nth-child(5n+5){ margin-right:0; }

	#product_view .top_box > div.txt_box{ padding-left:3rem; }
	#product_view .top_box > div.txt_box h4{ font-size:2.5rem; }
	#product_view .top_box > div.txt_box h4:after{ margin:2rem 0; }
	#product_view .top_box > div.txt_box p{ font-size:1.8rem; }
	#product_view .top_box > div.txt_box .link_box a{ height:55px; line-height:55px; }

	#product_view .bottom_box{ margin-top:7rem; padding-top:3rem; }
}

@media all and (max-width:991.98px) {
	#product_view .top_box > div.img_box{ width:100%; }
	#product_view .top_box > div.img_box ul li{ width:calc(25% -  7.5px); padding-top:15%;    }
	#product_view .top_box > div.img_box ul li:nth-child(5n+5){ margin-right:10px; }
	#product_view .top_box > div.img_box ul li:nth-child(4n+4){ margin-right:0; }

	#product_view .top_box > div.txt_box{ width:100%; padding-left:0; margin-top:3rem; }
	#product_view .top_box > div.txt_box h4{ font-size:2rem; }
	#product_view .top_box > div.txt_box h4:after{ width:30px; }
	#product_view .top_box > div.txt_box p{ font-size:1.6rem; }
	#product_view .top_box > div.txt_box .link_box a{ height:45px; line-height:45px; font-size:1.4rem;  }

	#product_view .bottom_box{ margin-top:4rem;}
}