@charset "utf-8";
/*
	Contents CSS _ 15.05.27
*/


/*공통*/
.bgbox{background:#fafafa; padding:20px 3%;}
.pdbox{padding:30px 20px;}
.mEnter{display:block;}
.tEnter{display:inline;}
.vab{vertical-align:bottom;}

.col-02{width:100%;}
.col-03{width:100%;}
.col-04{width:100%;}

.imgbox img{width:100%; max-width:530px;}
.w1400{max-width:1400px; margin: 0 auto;}
.w1000{max-width:1000px; margin: 0 auto;}
.w800{max-width:800px; margin: 0 auto;}

.perimg{text-align:center;}
.cb{clear:both;}

.blackTxt{color:#000000}
.blTxt{color:#1c3f95}
.blgrTxt{color:#345468}
.jjTxt{color:#e50049}
.point_txt{position:relative; font-family:'Montserrat', 'ns'; text-transform:uppercase; color:#323232; font-weight:bold;}
.pDot{padding-left:15px; position:relative}
.pDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; top:3px; background:#928c74}
.fsb{font-size:1.2em}
.bgGray{background:rgba(230,230,230,0.3);}
.bgbox{padding:20px 3%; background:rgba(230,230,230,0.3);}
.pdbox{padding:20px 3%}

.pointTxt{background:#ffef67;}
.redTxt{color:#d10000}
.blueTxt{color:#2159c0}
.bdLine{border-bottom:1px solid #e6e6e6; padding-bottom:20px; margin-bottom:20px;}

.dot_li{overflow:hidden; }
.dot_li li{background:url("../img/dot_li.gif") no-repeat 0px 10px; padding-left:7px; margin-bottom:3px;}
.dot_li li:last-child{margin-bottom:0px;}

.tit_nm{font-size:1.3em; font-weight:700; letter-spacing:-0.06em; color:#000000}
.tit_sm{font-size:1.1em; font-weight:500; letter-spacing:-0.06em; color:#000000}
.tit_dot{color:#000000; font-size:1.3em; font-weight:700; letter-spacing:-0.065em; padding-left:30px; background:url(../img/tit_cir.png) no-repeat left center; background-size:22px !important; position:relative}


@media all and (min-width:768px) {
.bgbox{padding:30px 3%;}
.col-02{width:47%; margin:0 1.5%; float:left;}
.col-03{width:30.33%; margin:0 1.5%; float:left;}
.pdbox{padding:30px 3%;}
.mEnter{display:inline;}
.tEnter{display:block;}

.tit_nm{font-size:1.4em; }
.tit_dot{ font-size:1.4em; padding-left:30px;}

}

@media all and (min-width:1200px) {
.bgbox{padding:40px 25px;}
.pdbox{padding:40px 25px;}
/*.tEnter{display:inline;}*/
.pEnter{display:block;}
.bdLine{padding-bottom:60px; margin-bottom:60px;}
.tit_nm{font-size:1.6em; }
.tit_sm{font-size:1.2em; }
.tit_dot{ font-size:1.6em; padding-left:35px}
}


/*탭리스트*/
.tablist {overflow:hidden; text-align:center; position:relative;}
.tablist:before{position:absolute; content:''; width:100%; height:2px; left:0; bottom:0; background:#334061}
.tablist li{display:inline-block;  line-height:40px; text-align:center; background:#ffffff; position:relative;}
.tablist li:last-child{border-right:0}
.tablist.list02 li{width:45%}
.tablist.list03 li{width:30%}
.tablist.list04 li{width:45%}
.tablist li a{ display:block; text-align:center; border:2px solid #e6e6e6;  background:#f5f5f5; color:#808080; border-bottom:0px;}
.tablist li.active a{color:#334061; background:#ffffff; font-weight:500; border:2px solid #334061; border-bottom:3px solid #ffffff}


@media all and (min-width:768px) {
.tablist {text-align:left}
.tablist.list04 li{width:25%}
.tablist li{line-height:50px;}
}

@media all and (min-width:768px) {
.comm_table{font-size:1em;}
.comm_table th, .comm_table td{padding:20px 10px}
}




/*서브공통*/
.sub_tit{padding-bottom: 20px;text-align: center;}
.sub_tit h3{font-size: 1.4em;font-weight:800;}
.sub_tit p{font-size: 1em;/*! word-break: break-all; *//*! text-align: justify; */}
.sub_tit h3 span{color: var(--main_color);}

@media all and (min-width:500px) {
.sub_tit h3{font-size: 1.6em;}
.sub_tit p{font-size:1.05em;}
}

@media all and (min-width:768px) {
.sub_tit h3{font-size:2em;}
.sub_tit{padding-bottom: 40px;}
.sub_tit p{font-size:1.1em;}
}

@media all and (min-width:980px) {
.sub_tit h3{font-size:2.2em;}
.sub_tit{padding-bottom: 60px;}
.sub_tit p{font-size:1.2em;}
}

@media all and (min-width:1200px) {
.sub_tit h3{font-size:2.5em;/*! margin-bottom: 20px; */}
.sub_tit p{font-size:1.25em;}
.sub_tit{padding-bottom: 60px;}
}




/*회사개요*/
.overview{position:relative;}
.overview .top_box .img{margin-bottom: 20px;}
.overview .top_box .img img{display: block;border-radius: 10px;}
.overview .top_box .txt{margin-bottom: 40px;}
.overview .top_box .txt h3{font-size: 1.5em;font-weight: 800;margin-bottom: 15px;}
.overview .top_box .txt h3 b{color:#1a5fbc; font-weight: 800;}
.overview .top_box .txt p span{display: block;margin-top: 15px;}

.overview .flex_box ul{margin-bottom: 40px;}
.overview .flex_box ul li{background: #f8f8f8;border-radius: 10px;padding: 15px;margin-bottom: 10px;}
.overview .flex_box ul li dl{display: flex;flex-wrap: wrap;}
.overview .flex_box ul li dt{width:4em; font-weight:700;}
.overview .flex_box ul li dd{width: calc(100% - 4em);font-weight: 400;}
.overview .flex_box ul li:last-child dd{font-size: 0.9em;width: calc(100% - 4.5em);}

@media all and (min-width:768px) {
.overview .top_box .img img,
.overview .mid_box ul li img{border-radius: 20px;}
.overview .top_box .txt{display:flex; flex-wrap:wrap; margin-bottom:60px;}
.overview .top_box .img{margin-bottom:60px;}
.overview .top_box .txt h3{width:50%; font-size:1.7em}
.overview .top_box .txt p{width:50%; font-size:1.1em }
	
.overview .flex_box ul{display:flex; gap:2%; flex-wrap:wrap; margin-bottom:60px;}
.overview .flex_box ul li{width:32%;font-size: 1.1em;margin-bottom: 20px;}
}

@media all and (min-width:1200px) {
.overview .top_box .img, .overview .top_box .txt, .overview .flex_box ul{margin-bottom:100px;}
.overview .top_box .txt h3{font-size:2em}
	.overview .top_box .txt p{font-size:1.2em; line-height:33px; }
	.overview .flex_box ul li{padding:20px;font-size: 1.2em;}
}


/*연혁*/
.cont_his{position:relative}
.his_cont ul {position:relative;}
.his_cont ul li {position:relative;}
.his_cont ul li strong {padding-left:40px; position:relative; color:var(--main_color); font-weight:800; display:block; padding:10px 0 10px 50px; font-size:1.2em; margin-top:15px;}
.his_cont ul li strong:before {position:absolute; display:block; content:''; left:0; top:12px; width:24px; height:24px; background:var(--main_color); border-radius:50%; -webkit-border-radius:50%; opacity:0.2; }
.his_cont ul li strong:after {position:absolute; display:block; content:''; left:0; top:12px; width:24px; height:24px; background:var(--main_color); border-radius:50%; -webkit-border-radius:50%; transform:scale(0.3);}
.his_cont ul li ol {position:relative; margin-left:50px;  padding-bottom:20px; }
.his_cont ul li ol:before {position:absolute; display:block; content:''; left:-38px; top:0; width:1px; height:95%; background:var(--main_color); transform:translateY(2%); opacity:0.2; }
.his_cont ul li ol li {position:relative; padding-left:80px; margin-bottom:5px;}
.his_cont ul li ol li:last-child {margin-bottom:0px;}
.his_cont ul li ol li .month {font-weight:600; color:#505050;  position:absolute; left:0; top:0;}
.cont_his .comm_top h3{color: var(--main_color);font-size: 1.3em;font-weight: 800;}
.cont_his .comm_top img{margin-top:20px; border-radius:15px;}

@media all and (min-width:768px) {
.cont_his .comm_top{position:absolute; left:0; top:0; text-align:left; width:40%}
.his_cont {padding-left:300px; position:relative; width:100%;}
.cont_his .comm_top h3{font-size: 1.8em;font-weight: 800;}
.cont_his .comm_top p{font-size:1.1em}
.cont_his .comm_top img{margin-top:30px;}
}

@media all and (min-width:830px) {
.his_cont {padding-left:380px; position:relative; width:100%;}
}

@media all and (min-width:980px) {
.his_cont {padding-left:450px; position:relative; width:100%;}
}

@media all and (min-width:1200px) {
.his_cont ul li strong{padding:20px 0 20px 50px}
.his_cont ul li strong:before,
.his_cont ul li strong:after {top:24px;}

.his_cont ul li ol li{padding-left:100px; margin-bottom:10px;}
.his_cont {padding-left:500px;}
.cont_his .comm_top{width:400px}
.cont_his{margin-left: 50px;}
.cont_his .comm_top img{margin-top:40px;}
}

@media all and (min-width:1500px) {
.cont_his{margin-left: 300px;}
}



/*고객사*/
h3.sub_top{font-weight: 800;text-align: center;font-size: 1.2em;margin-bottom: 15px;}
p.sub_p{margin-bottom: 30px;text-align: center;color: #888;}
h3.sub_top b{color:var(--main_color); font-weight:800;}
.customer ul{display: flex; flex-wrap:wrap; gap:2%;justify-content: center;}
.customer ul li{ width:49%;  padding:10px;text-align: center;margin-bottom: 15px;border-radius: 15px;background: #fff;-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.24);}
/*.customer ul li:hover{-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.24);}*/
.customer ul li img{width:100%; display:block; margin:0 auto;mix-blend-mode: multiply;}
.customer ul li p{border-top:1px solid #ddd; margin-top:10px; padding-top:10px; color:#666}
.customer ul li p.no{border-top:0px; margin:0;}

@media all and (min-width:768px) {
h3.sub_top{font-size:1.5em;}
p.sub_p{margin-bottom: 40px;}
  .customer ul li{width:23.5%; }
}

@media all and (min-width:1200px) {
h3.sub_top{font-size:2.2em;}
p.sub_p{margin-bottom: 60px; font-size:1.1em}
.customer ul li{padding:15px 30px;margin-bottom: 20px;}
.customer ul li p{margin-top:15px; padding-top:15px;}
}

@media all and (min-width:1400px) {
h3.sub_top{font-size:2.5em;}
p.sub_p{margin-bottom: 70px; font-size:1.25em}
}


/*오시는길*/
.map .root_daum_roughmap_landing {width: 100% !important;}
.root_daum_roughmap .cont {display: none !important;}
.map .map_info{background-color: #f8f8f8;padding: 20px;margin-bottom: 20px;border-radius: 15px;}
.map .map_info .info_box{display: flex;flex-wrap: wrap;margin-bottom: 20px;}
.map .map_info .info_box:first-of-type{border-bottom:1px solid #ddd; padding-bottom:20px;}
.map .map_info .info_box p.t01{width: 6em;font-weight: 700;}
.map .map_info .info_box p.t02{width: calc(100% - 6em);}
.map .sub_tit a{color: #fff;text-align: center;padding: 10px;width: 100%;display: block;background: var(--sub_color);margin-top: 20px;}


@media all and (min-width:768px) {
.map{position:relative;}
.map .map_info{padding:25px;}
.map .sub_tit a{padding: 10px;width: 150px;display: block;margin-top: 20px; position:absolute; right:20px; top:-20px;}
.map .map_info{width:100%;margin-bottom: 40px;font-size: 1.2em;}
}

@media all and (min-width:980px) {
.map .map_info{padding:30px; display:flex; flex-wrap:wrap;}
.map .map_info .info_box:first-of-type{width:70%; margin-right:5%; border-bottom:0px; padding-bottom: 0px;border-right: 1px solid #ddd;padding-right: 5%;margin-bottom: 0px;}
.map .map_info .info_box:last-of-type{width:25%; margin-bottom: 0px;}
.map .map_info .info_box a{position:absolute; width:150px; top:0px; right:0;}
.map .map_info .info_box p.t01{width: 4em;}
.map .map_info .info_box p.t02{width: calc(100% - 4em);letter-spacing: -0.085em;}
 .map .root_daum_roughmap .wrap_map{height: 400px !important;}
}

@media all and (min-width:1200px) {
.map .root_daum_roughmap .wrap_map{height: 500px !important;}
.map .sub_tit a{padding: 15px;width: 180px;top:-10px;}
.map .map_info .info_box:first-of-type{width:60%;}
.map .map_info .info_box:last-of-type{width:35%;}
}



/*설비현황*/
.factory{}
.factory .box{margin-bottom: 50px;}
.factory .box:last-child{margin-bottom: 0px}
.factory .left{}
.factory .left h4{font-size: 1.3em;font-weight: 800;margin-bottom: 20px;position: relative; padding-left:15px; padding-top:3px;}
.factory .left h4:before{position:absolute; display: block; content: ''; background: var(--main_color); width:5px; height:15px; left:0; top:0}
.factory .left h4:after{position:absolute; display: block; content: ''; background: var(--sub_color); width:5px; height:15px; left:0; top:15px}
.factory .right{}
.factory .right li img{}
.factory .right li p{background: #f0f0f0;padding: 10px 15px;margin-bottom: 20px;text-align: center;}

@media all and (min-width:768px) {
.factory .right ul{display:flex; flex-wrap: wrap; gap:2%}
.factory .right li{width:49%;}
	.factory .left h4{font-size: 1.5em;}
	.factory .box{margin-bottom: 70px;}
}

@media all and (min-width:980px) {
.factory .box{display:flex; flex-wrap:wrap;}
.factory .left{width:25%;}
	.factory .right{width:75%;}
	.factory .left h4{font-size: 1.6em; padding-top:0;}
	.factory .box{margin-bottom: 100px;}
}

@media all and (min-width:1200px) {
.factory .right li{width:23.5%;}
	.factory .left{width:20%;}
	.factory .right{width:80%;}
	.factory .left h4:before{ top:5px}
.factory .left h4:after{top:20px}
}


/*org*/
.org{}
.org dl{text-align: center;display: flex;flex-wrap: wrap;-webkit-box-shadow: 0px 0px 20px -5px rgba(134, 134, 134, 0.24);-moz-box-shadow: 0px 0px 20px -5px rgba(134, 134, 134, 0.24);box-shadow: 0px 0px 20px -5px rgba(134, 134, 134, 0.24);margin-bottom: 20px;}
.org dt{background: #DBDEEA;padding: 5px;width: 8em;border-bottom: 1px solid #FFF;}
.org dd{background: #fff;padding: 5px;width: calc(100% - 8em);border-bottom: 1px solid #EEE;}
.org dt:last-child,
.org dd:last-child{border-bottom:0px}

.org .org_list{border-radius: 15px;background: #fff;-webkit-box-shadow: 0px 0px 20px -5px rgba(134, 134, 134, 0.24);-moz-box-shadow: 0px 0px 20px -5px rgba(134, 134, 134, 0.24);box-shadow: 0px 0px 20px -5px rgba(134, 134, 134, 0.24);}
.org .org_list img{mix-blend-mode: multiply;}
.org .org_list .mob{}
.org .org_list .pc{display:none;}

@media all and (min-width:650px) {
.org .org_list .mob{display: none;}
.org .org_list .pc{display:block;}
.org .org_list img{padding:20px 20px 20px 60px}.org dl{margin-bottom:40px;}
}

@media all and (min-width:768px) {
.org dt{width:5em; border-bottom:0px; padding:7px;}
.org dd{width:4.6em; border-bottom:0px; padding:7px}
}

@media all and (min-width:980px) {
	.org dl{width:100%; margin-bottom:60px;}
	.org dt{width:10%; padding:10px}
.org dd{width:10%; padding:10px}
	.org .factory{display:flex; flex-wrap:wrap;}
	.org .org_list img{padding:40px 0px 40px 70px}
}


@media all and (min-width:1200px) {
	.org dl{width:100%; margin-bottom:80px;}
	.org .org_list img{padding:60px 30px 60px 100px}
}


/*product*/
.product .flex_box .img{}
.product .flex_box .img img{background: #f4f4f4; display: block;margin: 0 auto;}

.product .txt{margin: 20px 0px;}
.product .txt .tit{margin-bottom: 20px;}
.product .txt .tit span{background: #1993DE4F;color: #0B9BF4;padding: 7px 10px;border-radius: 5px;display: block;width: 80px;text-align: center;}
.product.car .txt .tit span{width:100px;}
.product .txt .tit h3{font-size: 1.5em;font-weight: 700;margin: 10px 0px;}
.product .txt .tit p{font-weight: 400;color: #777;}

.product .table{border-top: 2px solid #dfdfdf;}
.product .table table{width:100%;}
.product .table th{background: var(--bg_color); padding: 3px; vertical-align: middle;}
.product .table tr{border-bottom: 1px solid #ddd;}
.product .table td{padding: 10px; vertical-align: middle;}


.etc_box .left h3{font-size: 1.3em;font-weight: 800;margin-bottom: 20px;position: relative; padding-left:15px; padding-top:3px;}
.etc_box .left h3:before{position:absolute; display: block; content: ''; background: var(--main_color); width:5px; height:15px; left:0; top:0}
.etc_box .left h3:after{position:absolute; display: block; content: ''; background: var(--sub_color); width:5px; height:15px; left:0; top:15px}

.etc_box .right li{background: #f8f8f8;margin-bottom: 20px;}
.etc_box .right img{mix-blend-mode: multiply;display: block;width: 100%;margin: 0 auto;}
.etc_box .right p{background: #ddd;text-align: center;padding: 5px;}

@media all and (min-width:650px) {
.etc_box .right ul{display: flex; flex-wrap:wrap; gap:2%;}
	.etc_box .right li{width:49%;}
}

@media all and (min-width:768px) {
.product .flex_box{display:flex; flex-wrap:wrap}
	.product .img{width:300px; margin-right:50px;}
	.product .flex_box .img img{width:100%; margin: 0;}
	.product .txt{width:calc(100% - 350px);margin-top: 0px;}
	.product .txt .tit span{display: inline-block; margin-bottom: 10px;}
	.product .txt .tit h3{display: inline-block; margin: 0px 0px 0px 15px;font-size: 1.8em;}
.product .txt .tit p{font-size:1.1em;}
	.product .txt .tit{margin-bottom: 30px;}
	
	.etc_box{display: flex; flex-wrap:wrap}
	.etc_box .left h3{font-size: 1.5em;}
.etc_box .left{width:25%}
.etc_box .right{width:75%}

}

@media all and (min-width:980px) {
.product .img{width:400px; margin-right:50px;}
	.product .txt{width:calc(100% - 450px);margin-top: 0px;}
	.etc_box .left h3{font-size: 1.6em; padding-top:0;}
	.etc_box .right li{width:32%;}
}

@media all and (min-width:1200px) {
.product .img{width:450px; margin-right:70px;}
	.product .txt{width:calc(100% - 520px);margin-top: 0px;}
  .product .table th{padding: 15px;}
.product .table td{padding: 14.5px;}
	
	.etc_box .left h3:before{ top:5px}
.etc_box .left h3:after{top:20px}
}