@charset "utf-8";
@import url('font.css');

/* reset */
* { padding: 0px; margin: 0px;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table {margin: 0; padding: 0; list-style: none;}
header, main, footer, section, article, aside, nav {display: block;}
a {color: inherit; text-decoration: none;}
a img {border: none;}
ul, dl,dt,dd {list-style: none;}
body,input,textarea,select,button,table{ font-family: "Noto Sans KR", 'Nanum Gothic', '돋움', sans-serif;  font-size: 15px; font-weight: 300; line-height: 26px; color: #333;} /*기본폰트설정*/



html{font-size: 10px;}
body { font-size: 15px;font-family: 'Noto Sans KR',sans-serif;color: #333;}


/*common*/
.wrap{width: 100%;}
.inner{position: relative;width: 1920px;margin: 0 auto;}

/*skip-nav*/
.skip-nav{position: absolute;top: -50px;left: 0;width: 1920px;height: 40px;line-height: 40px;text-align: center;background:#2e2e2e;z-index: 1000;transition: all 0.3s;color: #fff;font-size: 20px;}
.skip-nav:focus{top: 0;}




/*product*/
#uil .product{ width:900px;float:right; margin-top:10px;}
#uil .product .auto{height: 300px;}
#uil .product h2{font-size: 32px; margin-bottom:20px;}
#uil .product ul li{position: relative;display:inline-block; margin:10px;width:180px; height:180px; border:1px solid #ccc;overflow: hidden;transition: all 0.4s}
#uil .product ul li a:hover img{transform: scale(1.2)}
#uil .product .inline{ display:inline-block}
#uil .product ul li a{display: block; width: 100%; height: 100%;} 
#uil .product ul li .number{position: absolute;z-index: 999; background: #03c75a; color: #fff;width: 30px; height: 30px; text-align: center; line-height: 1.7; font-size: 15px;font-weight: bold} 
/*product_title*/
#uil .product ul li > img{position:absolute; top: -10px; left: -10px; z-index: 1;}
.btn-wrap{position: relative;margin-bottom:20px;height: 30px; padding: 10px; display: inline-block; border: 1px solid #ccc; border-radius: 30px; width: 800px; background: #ccc}
		.btn_area{height: 40px; float:left; color: #fff; text-align: center; font-size:25px /*line-height: 40px; margin-right: 10px; margin-bottom: 10px;*/}
		.royal-blue{ background-color:#051bb6;padding: 0 20px;position: absolute; left: -10px; height:50px; top: 0; border-radius: 30px 0 0 30px; width: 170px; line-height: 1.7; font-weight: bold}
		/*.royal-blue:after{content: ''; position: absolute; top: 0; left: 0; border-top:15px solid #fff; border-right: 15px solid rgb(83,111,255); width: 0}*/
.btn-wrap .view a{float:right; padding-right: 30px; line-height: 1.4; font-size: 18px;}
.btn-wrap .view a:hover{font-weight: bold}


/*footer*/
.footer{text-align: center; width: 1920px;background:#f5f5f5}
.footer .top { background-color:#f5f1ec;}
.footer .inner{widht:1200px}
.footer .inner .left{display: inline-block;width: 250px;height: 100px; text-align: center;box-sizing: border-box; margin:0 20px}
.footer .inner .left img{margin-bottom: 30px}
.footer .inner .left > span{height: 100px; line-height: 10; display: block;font-size: 20px;font-weight: 700}
.footer .inner .right{display: inline-block;margin: 20px auto;width: 660px;text-align: left;}
.footer .inner .right span{width: 100%;line-height: 1.8; color: #777;font-size: 13px;}
.footer .inner .right span .stick{display: inline-block;}
.footer .inner .right span .stick:after{margin: 0 10px; content: '';display: inline-block;width: 1px;height: 10px; background: #777;}
.footer .inner .right .adm{ font-size:13px;color: #999;}
.footer .inner .right .copy{ font-size:13px;color: #999;}


/*top*/
#top {position: fixed;bottom:20px;right: 200px;opacity: 0; visibility: hidden;	transition: all 0.4s;}
#top.on {opacity: 1;	visibility: visible}
#top a {display: block;padding: 20px; width: 50px;height: 50px; line-height: 10px;border-radius: 50%;background: #333;box-sizing: border-box;}
#top img{position: absolute;top: 10px;left: 17px;}
#top a span{position: absolute;top: 25px;left: 14px; font-size: 12px;color: #fff;text-align: center;}



/**********************300px ~1200px******************************/
@media screen and (min-width:300px) and (max-width:1200px){
	
	header{border-bottom:none;}
	header .inner{border-bottom: 1px solid #000;}
	#main-visual .main-bg{width: 1200px}
	footer{border-top:none;}
	footer .inner{border-top: 1px solid #000;}
}































/* 탑메뉴 */
.header { position:relative; top:0; left:0; right:0;  z-index:1000; width:1920px; min-width:1200px; height:100px;}
.header .header_wrap { position:relative; margin:0 auto; width:1200px}
.header .header_wrap .logo { position:absolute; left:150px; top:15px; display:block; width:200px;}
.header .header_wrap .logo img {}

.header .header_wrap .topmenu{ font-size:18px; font-weight:400; float:right;}
.header .header_wrap .topmenu ul{ height:100px;}
.header .header_wrap .topmenu li{ float:left;  position:relative}
.header .header_wrap .topmenu li a{ color:#000; display:block; font-weight:bold; line-height:100px; padding:0px 30px; text-align:center;}
.header .header_wrap .topmenu li ul{ display:none; background: rgb(109,109,109); height:auto; position:absolute; width:180px; z-index:200; left:-22px; top:90px}
.header .header_wrap .topmenu li:nth-child(4) ul { left:-28px}
.header .header_wrap .topmenu li:nth-child(5) ul { left:16px}
.header .header_wrap .topmenu li:hover ul{ display:block; }
.header .header_wrap .topmenu li li { background: rgb(109,109,109); display:block; float:none; margin:0px; padding:0px; width:180px; border-bottom:solid 1px #999; }
.header .header_wrap .topmenu li li:last-child { border:none}
.header .header_wrap .topmenu li:hover li a{ background:none; }
.header .header_wrap .topmenu li ul a{ display:block; height:40px; line-height:40px; font-size:14px; font-weight:400; padding:0 10px; text-align:center; color:#fff !important; }
.header .header_wrap .topmenu li ul a:hover, .topmenu li ul li:hover a{ background: rgb(71,71,71);transition: all 0.15s ease-in;}




/******  메인 ******/


/* main_visual*/
#mainVisual_wrap {width:100%; position:relative; background:url('')top center repeat-x; height:300px; margin:0 auto; }
.main_visual {clear:both;position:relative;top:0px;width:100%;margin:0 auto;padding:0;height:300px;z-index:1;min-width:1200px;}
#main_bg {clear:both; width:1920px; height:300px;position:absolute;top:0px;z-index:1;left:0;background:url(../img/main/main_visual.jpg) no-repeat}
#main_bg .inner { width:1000px;margin:0 auto; padding-top:50px;}
#main_bg .inner > span{font-size:25px;}
#main_bg .inner > p{padding:20px 0;font-weight:bold; font-size:40px; color:#de0023}

/*left-menu*/
#uil{width:1920px; height:1000px;margin:30px 0 0 0}
#uil .inner{ width:1200px}

#uil .customer{ width:230px; float:left}
#uil .customer .cus{ padding:13px}
#uil .customer .cus > a{ display:block}
#uil .customer .online{ margin-top:4px; border:1px solid #051bb6; border-radius:30px}
#uil .customer .center{ margin-top:3px; border:1px solid #333; background:#051bb6; border-radius:30px}
#uil .customer .center .txt{ color:#fff; font-size:20px;}
#uil .customer .center .txt span{font-weight: bold; margin-left: 55px;} 
#uil .customer .center .txt .e-mail{font-size:14px}
#uil .customer .txt { display:inline-block;}
#uil .customer .img_icon{ display:inline-block}
#uil .customer .txt .title{width:200px; font-size:30px; border-bottom:1px solid #051bb6; font-weight:bold; color:#051bb6}
#uil .customer .txt .title span{display:inline-block; padding:10px 0}
#uil .customer .txt .title p{ display:inline-block; margin:0 0 0 20px}
#uil .customer .txt ul li{ font-size:18px;border-bottom:1px dotted #333; padding: 10px 0}
#uil .customer .txt ul li:last-child{border-bottom:none;padding:10px 0 0 0}
#uil .customer .txt ul li a:hover{color:blue}
#uil .customer .txt ul li a.title_area{ font-size:20px; font-weight: bold}
#uil .customer .txt ul li > ul li{ font-size:16px}


/* product */
.product_wrap { width:100%; margin:50px 0;}
.product_wrap .product {margin:0 auto; width:1200px; margin-top:100px; height:300px}
.product_wrap .product:first-child {margin-top:10px;}
.product_wrap .product h2 { /*text-align:center;*/ font-size:30px; font-weight:600}
.product_wrap .product p { text-align:center; font-size:20px; font-weight:500; color:#6d6d6d; line-height:40px}
.product_wrap .product p:after { content:""; display:block; width:40px; height:6px; background-color:#e52c1f; text-align:center; margin:0 auto; margin-top:10px}
.product_wrap .product ul.list { margin-top:50px; text-align:center;}
.product_wrap .product ul.list li { width:280px; float:left; padding-left:20px;}
.product_wrap .product ul.list li:first-child { padding-left:8px}
.product_wrap .product ul.list li img {}
.product_wrap .product ul.list li .tit { text-align:center; font-size:18px; font-weight:400; line-height:32px; margin-bottom:50px}
.product_wrap .product ul.list li a:hover .tit { color:#e52c1f}




/* icon  */
.icon { width:100%; min-width:1200px; height:240px; background:#e5e5e4 }
.icon .icon_wrap .inner { margin:0 auto;width:1200px; text-align:center;}
.icon .icon_wrap .inner .icon_img{}
.icon .icon_wrap .inner .icon_img ul{ padding:30px}
.icon .icon_wrap .inner .icon_img ul li{ display:inline-block; width:250px;}
.icon .icon_wrap .inner .icon_img ul li p{ font-size:25px; padding-top:25px;}
.icon .icon_wrap .inner .icon_img ul li:hover p{color:#ea6e16}







/********** 서브 ***********/

.sub_visual { width:100%; min-width:1200px;}
.sub_visual .inner {width:100%; height:250px}
.sub_visual .inner > img{ width:1920px; height:250px} 

.snb{ display:inline-block; width:260px; float:left}
.snb h2 {background-color:#e52c1e; width:220px; line-height:70px; text-align:center; font-size:22px; font-weight:500; color:#fff; margin-bottom:20px}
.snb > ul > li { width:220px; overflow:hidden; box-sizing:border-box; border:solid 1px #ddd; margin-bottom:10px}
.snb > ul > li > a { display:block; width:220px; line-height:40px; padding-left:10px }
.snb > ul > li > a:hover { padding-left:12px;color:#e52c1e}
.snb > ul > li > ul { background-color:#f6f6f6}
.snb > ul > li > ul li { border-bottom:dotted 1px #ddd; }
.snb > ul > li > ul li a { font-size:13px;  letter-spacing:-0.5px; background:url(../images/sub/sub_icon02.png) no-repeat 10px 15px; display:block; width:190px; padding:5px 5px 5px 20px;}
.snb > ul > li > ul li a:hover { color:#000 }


.side_call { margin-top:20px}
.side_call ul { width:220px; border:solid 1px #ddd; padding:10px; overflow:hidden; box-sizing:border-box; margin-bottom:70px}
.side_call ul li.txt1 { font-size:18px; font-weight:400; color:#e52c1e}
.side_call ul li.txt2 { font-size:28px; font-weight:500; line-height:40px}
.side_call ul li.txt3 { font-size:14px; font-weight:400; color:#666}


.sub_title { font-size:34px; font-weight:500; padding-top:15px !important; border-bottom:solid 1px #ddd;}
.sub_title span { font-size:20px; font-weight:400; color:#666; padding-left:10px}
.sub_title:after { content:""; display:block; width:100px; height:3px; background-color:#e52c1e; margin-top:20px}
.sub_title span:before { content:"｜";}







/* 회사소개 */
.ceo_area{width:1920px}
.ceo_area .inner .sub_area{ display:inline-block; width:940px;}
.ceo_area .inner .sub_area .img_area{ float:left; width:350px; margin-top:100px;}
.ceo_area .inner .sub_area .img_area .ceo_img{overflow:hidden}
.ceo_area .inner .sub_area .txt_area{ float:right; width:550px; word-break: keep-all}
.sub1_1_txt1 { font-size:22px; font-weight:500; line-height:35px; letter-spacing:-0.8px; padding:10px 0; word-break:keep-all}
.sub1_1_txt2 { font-size:16px; font-weight:400; line-height:30px; letter-spacing:-0.8px; padding:10px 0; word-break:keep-all}
.sub1_1_txt2 > span{color:#FF6600; font-weight:bold}
.sub1_1_txt2 p { font-size:16px; font-weight:500; color:#0066b4; margin:25px 0}
.sub1_1_txt3 { font-size:18px; font-weight:500; text-align:right}


.ceo_area .inner{width:1200px; margin:30px auto}

.map{width:1920px}
.map .inner{ width:1200px; margin:30px auto}
.map .inner .map_area{ display:inline-block; width:940px;}
.map .inner .map_area .map_info .txt1 { font-size:20px; font-weight:400; padding:10px 0; text-align:center}
.map .inner .map_area .map_info ul{border-bottom:dotted 1px #ddd; text-align:center; margin:20px 0;}
.map .inner .map_area .map_info ul li {display:inline-block;font-size:18px; line-height:45px; padding:0 30px }
.map .inner .map_area .map_info ul li img {display:inline-block; padding-right:8px}



/* 생산품목 & 취급품목 */

.bold { font-weight:400}


.sub2_pro_img { /*border:solid 1px #ddd; padding:20px;*/ text-align:center}

.sub_tit { font-size:20px; font-weight:500; padding-bottom:5px}
.sub_tit img { padding-right:7px}
.sub_tit2 { font-size:20px; font-weight:500; padding-top:7px;}
.sub_tit3 { font-size:22px; font-weight:500; background:#e52c1e; color:#fff; display:block; width:180px; line-height:35px; padding-left:10px}


.sub_txt1 { font-size:16px; padding-left:10px}
.sub_txt2 { font-size:16px; padding-left:5px}
.sub_txt2 p { background:url(../images/sub/sub_icon02.png) no-repeat 5px 12px; padding-left:15px; line-height:28px; margin-bottom:5px}
.sub_txt2 p span { padding-right:10px; font-weight:400; color:#e52c1e;}
.sub_txt3 { font-size:16px; background-color:#f1f7f8; padding:20px;}
.sub_txt3-2 {border-collapse:collapse; border-spacing:0; width:100%}
.sub_txt3-2 .box { font-size:16px; padding:20px; background:#f1f7f8; text-align:center; width:48%}
.sub_txt4 ul { display:inline-block; border:solid 1px #ddd; margin: 0 20px 20px 0; width:31%; height:160px;  box-sizing:border-box; overflow:hidden; padding:10px 20px}
.sub_txt4 ul:nth-child(3), .sub_txt4 ul:nth-child(6), .sub_txt4 ul:nth-child(9), .sub_txt4 ul:nth-child(12), .sub_txt4 ul:nth-child(15) { margin-right:0}
.sub_txt4 ul li.tit { background:url(../images/sub/sub_icon04.png) no-repeat 4px 7px; padding-left:22px;font-size:16px; font-weight:400; padding-bottom:5px}
.sub_txt4 ul li.tit:after { display:block; content:""; border-bottom:dotted 1px #ddd; width:250px; margin-top:7px; margin-left:-22px}
.sub_txt4 ul li.txt { background:url(../images/sub/sub_icon03.png) no-repeat 3px center; font-size:14px; padding-left:15px}
.sub_txt4 ul li.txt img { margin: 0 7px 3px 0}
.sub_txt4-2 ul { display:inline-block; border:solid 1px #ddd; margin: 0 20px 20px 0; width:31%; height:140px;  box-sizing:border-box; overflow:hidden; padding:10px 20px}
.sub_txt4-2 ul:nth-child(3), .sub_txt4-2 ul:nth-child(6), .sub_txt4-2 ul:nth-child(9), .sub_txt4-2 ul:nth-child(12), .sub_txt4-2 ul:nth-child(15) { margin-right:0}
.sub_txt4-2 ul li.tit { background:url(../images/sub/sub_icon04.png) no-repeat 4px 7px; padding-left:22px;font-size:16px; font-weight:400; padding-bottom:5px}
.sub_txt4-2 ul li.tit:after { display:block; content:""; border-bottom:dotted 1px #ddd; width:250px; margin-top:7px; margin-left:-22px}
.sub_txt4-2 ul li.txt { background:url(../images/sub/sub_icon03.png) no-repeat 3px center; font-size:14px; padding-left:15px}
.sub_txt4-2 ul li.txt img { margin: 0 7px 3px 0}
.sub_txt5 { background-color:#F6F6F6; padding-left:35px; line-height:28px; font-weight:400}


.table1 { width:100%; border-collapse:collapse; border-spacing:0; border-top:2px solid #b4bcc7}
.table1 th, .table1 td { border:solid 1px #ddd; text-align:center; line-height:20px}
.table1 th { font-size:15px; padding:7px 0; background-color:#edf1f6}
.table1 td { padding:7px 0;}
.table1 td .style1 ul {width:47px; margin:0 auto}
.table1 td .style1 ul li.left { float:left}
.table1 td .style1 ul li.right { float:right; padding-top:10px}
.table1 td .style2 ul {width:110px; margin:0 auto}
.table1 td .style2 ul li.left { float:left}
.table1 td .style2 ul li.right { float:right; padding-top:10px}
.table1 .gray { background-color:#f6f6f6; padding:7px 0;}
.table1 .t-left { text-align:left; padding-left:20px}


.table2 { width:90%; border-collapse:collapse; border-spacing:0; border-top:2px solid #b4bcc7}
.table2 th, .table2 td { border:solid 1px #ddd; text-align:left; line-height:20px}
.table2 th { font-size:15px; padding:7px 0 7px 20px; background-color:#edf1f6; width:62%}
.table2 td { padding-left:20px }