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


/*공통*/
.bgbox{background:#fafafa; padding:20px 3%;}
.pdbox{padding:30px 20px;}
.mEnter{display:block;}
.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;}

.content_table{width:100%; border-top:2px solid #6d6a60; border-collapse:collapse;}
.content_table th{padding:10px 5px}
.content_table th, .content_table td{border-bottom:1px solid #dcdcdc; padding:7px 3px; vertical-align:middle}
.content_table .bl, .content_table tr.bl td, .content_table tr.bl th{border-left:1px solid #dcdcdc}
/*.content_table tr.bl td:first-child, .content_table tr.bl th:first-child{border-left:0px;}*/
.content_table .bli{border-left:1px solid #dcdcdc !important}
.content_table th{font-weight:600; background:#f5f5f5; color:#323232; padding:12px 3px;}
.content_table .bgc{background:#fafafa; text-align:center}
.content_table tr.bgc th, .content_table tr.bgc td{ background:#fafafa}
.content_table .tal{text-align:left;}



.blackTxt{color:#000000}
.blTxt{color:#1c3f95}
.blgrTxt{color:#345468}

.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:#fbca4d}
.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%}
/*.point_txt:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; bottom:0px; background:#fbca4d}
.point_txt:after{content:''; clear:both;}*/
/*.redDot{display:inline-block; position:relative; padding-right:15px}
.redDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; bottom:0px; background:#fbca4d}
.redDot:after{clear:both;}*/

.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.png") no-repeat 0px 10px; padding-left:15px; margin-bottom:3px;}

.tit_nm{font-size:1.4em; font-weight:600; letter-spacing:-0.06em; color:#323232}
.tit_dot{color:#334061; font-size:1.3em; font-weight:600; letter-spacing:-0.065em; padding-left:26px; background:url(../img/tit_dot.png) no-repeat left center;}
.tit_nm2{font-weight: 600;font-size: 1.2em;color: #646464;}

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

.tit_nm{font-size:1.3em; font-weight:600}
	.tit_nm2{font-size: 1.1em;}
.tit_dot{ font-size:1.3em;}

}

@media all and (min-width:1200px) {
.bgbox{padding:40px 25px;}
.pdbox{padding:40px 25px;}
.tEnter{display:inline-block;}
.pEnter{display:block;}
.bdLine{padding-bottom:60px; margin-bottom:60px;}

.tit_nm{font-weight:600}
	.tit_nm2{}
}

/*탭리스트*/
.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;font-size: 16px;}
.tablist li.active a{color:#334061; background:#ffffff; font-weight:500; border:2px solid #334061; border-bottom:3px solid #ffffff}
.tablist.lay li a{font-size:14px;}

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



.comm_table{width:100%; border-top:1px solid #4e5463; border-collapse:separate; font-size:0.95em;}
.comm_table th, .comm_table td{border-bottom:1px solid #dcdcdc; padding:15px 3px; vertical-align:middle}
.comm_table .bl, .comm_table tr.bl td, .comm_table tr.bl th{border-left:1px solid #dcdcdc}
/*.comm_table tr.bl td:first-child, .comm_table tr.bl th:first-child{border-left:0px;}*/
.comm_table .bli{border-left:1px solid #dcdcdc !important}
.comm_table th{font-weight:600; background:#fafafa}

.syncSlider{margin-bottom:20px; position:relative;}
.syncSlider #sync1 .owl-wrapper-outer{margin-bottom:10px;}
.syncSlider #sync1 .item img{width:100%}
.syncSlider #sync2 .item{margin: 5px; cursor: pointer; padding:2px; opacity:0.5;}
.syncSlider #sync2 .synced .item{background: #2448a9; opacity:1;}

.syncSlider .owl-controls{margin-top:0px !important; position:absolute; z-index:2; right:0px; bottom:0px;}
.syncSlider .owl-controls .owl-buttons{float:right;}
.syncSlider .owl-controls .owl-buttons div{margin:0px !important; border-radius:0px  !important; opacity:0.8 !important; width:40px; height:40px; padding: 10px  !important; text-indent:-9999999px;}
.syncSlider .owl-controls .owl-buttons div.owl-prev{margin-right:3px !important; background:#505050 url(../img/btn_prev.png) no-repeat center center !important;}
.syncSlider .owl-controls .owl-buttons div.owl-next{background:#505050 url(../img/btn_next.png) no-repeat center center !important;}

.syncSlider #sync2 {position:relative; margin-top:10px}
.syncSlider .owl-controls clickable{float:right}


/*컨텐츠공통*/
.conh4{font-size:1.9em; font-weight:600}
.conh4:after{content:''; width:60px; height:3px; background:#4e5463; display:block; margin:20px 0}
.conh4 span.st{font-size:0.7em; display:block}


@media all and (min-width:768px) {
.conh4{font-size:2.3em;}

}




/*사훈 및 경영방침*/

.manage{padding-bottom:30px;}
.manage li{box-shadow:5px 5px 10px hsla(0,0%,0%,0.2); margin-bottom:20px;}
.manage li img{width:100%;}
.manage li span{padding:15px 0px; text-align:center; display:block}

@media all and (min-width:640px) {
.manage{overflow:hidden;}
.manage li{float:left; width:30.33%; margin:0 1.5%; margin-bottom:0}
}


/*조직도*/
@media all and (min-width:1200px) {
.org img{max-width:800px}
}


/*인증서*/

.certi{overflow:hidden; font-size:0;}
.certi li{display:inline-block; width:47%; margin: 1%; font-size:14px;}
.certi li img{border:1px solid #dcdcdc}
.certi li span{display:block; width:100%; padding:8px 0; text-align:center; background:#334061; color:#ffffff; border-left:10px solid #32b3e3;vertical-align:top}

@media all and (min-width:768px) {
.certi li{width:31.33%; }
.certi li span{padding:14px 0; }
}


/*주요고객사*/
.customer_li{overflow:hidden; font-size:0;}
.customer_li li{display:inline-block; width:48%; margin:0 1% 15px;  padding:10px; background:#f5f5f5;  text-align:center; }
.customer_li li img{width:100%; margin-bottom:10px;}
.customer_li li span{display:block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:0.9em;  text-align:center;}

@media all and (min-width:640px) {
.customer_li li{width:31.33%; padding:20px}
}

@media all and (min-width:1200px) {
.customer_li li{width:23%;}
}


/*제품소개*/

.pro_top{position:relative}
.pro_top h4{font-size:2.3em; font-weight:600; }
.pro_top .txt{font-size:1.2em; font-weight:500; color:#505564;}
.pro_top ul{color:#505050;}

.pro01box{overflow:hidden}
.pro01box .imgbox{margin-bottom:10px;}

@media all and (min-width:768px) {
.pro_top h4{font-size:3em; }
}

@media all and (min-width:1024px) {
.pro01box ul{float:left; width:55%;}
.pro01box .imgbox{float:right; width:40%; margin-bottom:0}

}


.pro_li{overflow:hidden; font-size:0;}
.pro_li li{display:inline-block; vertical-align:top; width:48%; margin:0 1%; margin-bottom:15px; position:relative;}
.pro_li li.lay{width:98%;}.pro_li li:nth-child(odd){clear:both;}
.pro_li li img{width:100%; margin-bottom:10px;}
.pro_li.lay li img {
    border: 1px solid #eee;
}
.pro_li li span{display:block; font-size:13px; text-align:center;}
.pro_li li b{display:inline-block; position:absolute; width:60px; text-align:center; position:absolute; left:0; top:0;  padding:2px; background:#21469b; color:#ffffff; font-size:10px; text-transform:uppercase; font-weight:600}


@media all and (min-width:768px) {
.pro_li li span{font-size:14px;}
.pro_li li b{letter-spacing:0}
/*.pro_li li:nth-child(odd){clear:none;}
.pro_li li:nth-child(4),
.pro_li li:nth-child(8),
.pro_li li:nth-child(12),
.pro_li li:nth-child(16),
.pro_li li:nth-child(20),
.pro_li li:nth-child(24),
.pro_li li:nth-child(),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4),
.pro_li li:nth-child(4){clear:none;}*/
.pro_li li{width:31.33%; margin-bottom:20px}
	.pro_li li.lay{width:48%;}
}

@media all and (min-width:1200px) {
.pro_li li span{font-size:15px;}
.pro_li li{width:23%;}
	.pro_li li.lay{width: 48%;}
	.pro_li.lay{margin-bottom: 30px;}
	.pro_li.lay li{width: 18%;}
	.pro_li.lay2 li img{}
	.pro_li.lay2 li{width: 23%;}
}



/*반응형*/
 img.ic_nu{display:inline-block; width:18px;}

table.responsive-table {
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	font-size:0.9em
}
table.responsive-table thead {
	display: none
}
table.responsive-table tr {
	margin-bottom: 10px;
	display: block;
	padding: 10px 0px;
	border:1px solid #dcdcdc;
	border-top:2px solid #505564
}
table.responsive-table td {
	display: block;
	text-align: right;
	padding:3px 15px;
}
table.responsive-table td:last-child {
	border-bottom: 0
}
table.responsive-table td:before {
	content: attr(data-rt-label);
	float: left;
	text-transform: uppercase;
	font-weight: 600;
	margin-right:10px;
}


@media all and (min-width:640px) {	
.responTable tr {padding: 10px}

.responTable{width:100%; border-top:1px solid #323232; border-left:1px solid #e6e6e6; text-align:center; border-collapse:separate; font-size:0.9em}
.responTable th{background:#505564; color:#ffffff;}
.responTable th:first-child{border-left:1px solid #e6e6e6; border-color:rgba(0,0,0,0.2)}
.responTable th,
.responTable td{border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; padding:4px 3px; vertical-align:middle}
.responTable th{border-color:rgba(0,0,0,0.2); padding:8px 5px;}

}

@media all and (min-width:640px) {	
.responTable{font-size:0.95em}
}



/*설비현황*/
.bd_table{width:100%; border-top:1px solid #323232; border-left:1px solid #e6e6e6; text-align:center; border-collapse:separate; font-size:0.9em}
.bd_table th{background:#505564; color:#ffffff;}
.bd_table th:first-child{border-left:1px solid #e6e6e6; border-color:rgba(0,0,0,0.2)}
.bd_table th,
.bd_table td{border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; padding:4px 3px; vertical-align:middle}
.bd_table th{border-color:rgba(0,0,0,0.2); padding:8px 5px;}



/*열처리*/
.heatbox{position:relative;}
.heatbox h5{display:inline-block;  background:#2448a9; color:#ffffff; padding:0px 20px; line-height:35px; position:absolute; left:0; top:0;  font-size:1.2em; font-weight:600;}
.heatbox h5:before{display:block; content:''; position:absolute; right:-10px; top:0; border-top:35px solid #2448a9; border-right:10px solid transparent}
.heatbox .col-02{width:47%; margin:0 1.5%; float:left; margin-top:30px;}

@media all and (min-width:768px) {	
.heatbox h5{line-height:40px;}
.heatbox h5:before{border-top-width:40px}
}



/*제작공정*/
.process li b{line-height:30px; width:30px; font-size:12px; font-weight:600}
.process li img{margin-bottom:0}
.process li span{background:#505564; padding:14px 0px; color:#ffffff}



/*삼원테크소개*/
.introduce img{position:relative; margin-top:-50px}
.ci_info h5{margin-bottom:20px;}
.ci_info dl{position:relative; overflow:hidden; text-align:center; margin-bottom:20px;}
.ci_info dl dt{width:60px; height:60px; margin:0 auto; margin-bottom:10px;}
.ci_info dl dt span{display:block; text-indent:-999999px; width:100%; height:100%; background:#06a3db; border-radius:500px;}
.ci_info dl dt span.bl{background:#1b3f94}
.ci_info dl dd{display:inline-block; padding:0 5px; font-weight:600}

@media all and (min-width:768px) {
.introduce .col-02:last-child{padding-top:70px; background:url(../img/logo_b.png) no-repeat right top; background-size:170px !Important}
.introduce:after{content:''; display:block; clear:both;}
.introduce img{margin-top:-100px}
.ci_info dl{width:50%; float:left;}
.ci_info .col-02:after{content:''; display:block; clear:both;}
}

@media all and (min-width:1200px) {

}


/*비전및 이념*/
.bracket{position:relative; display:inline-block; padding:0 20px}
.bracket:after,
.bracket:before{content:''; width:30px; height:18px; position:absolute; background-size:cover !important; z-index:-1;}
.bracket:after{right:0; top:0; background:url("../img/bracket_after.png") no-repeat center center}
.bracket:before{left:0; top:0; background:url("../img/bracket_before.png") no-repeat center center}

@media all and (min-width:768px) {
.bracket{padding:0 40px}
.bracket:after,
.bracket:before{width:50px; height:30px;}
}

.vision{overflow:hidden; position:relative;  border-top:2px solid #1c3f95; border-left:1px solid #e6e6e6; text-align:center;}
.vision dl{padding:20px 0px; border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; width:50%; float:left;}
.vision dl dt{font-weight:bold; margin-bottom:3px; color:#323232}
.vision dl dt img{max-width:50px}
.vision dl dt  span{display:block; color:#1c3f95}

@media all and (min-width:1200px) {
.vision dl{width:25%; padding:40px 0px}
.vision dl dt  span{font-size:1.3em}
}

.cir_vision,
.cir_vision h5,
.cir_vision p{position:relative; text-align:center; }
.cir_vision h5{font-weight:600; text-transform:uppercase; margin-bottom:20px;}
.cir_vision p{font-size:1.5em; color:#1c3f95; letter-spacing:-2px}
.cir_vision{padding:50px 0px}
.cir_vision:before{content:''; display:block; position:absolute; width:240px; top:50%; margin-top:-120px; height:240px; left:50%; margin-left:-120px;  background:url(../img/vision_bg.png) no-repeat center center; background-size:cover !important; z-index:-1; opacity:0.5}

@media all and (min-width:768px) {
.cir_vision{font-size:1.5em;}
.cir_vision:before{width:360px; margin-top:-180px; height:360px; margin-left:-180px}
}




/*그래프연혁*/
.hisGrap{position:relative;}
.hisGrap h4{text-align:center; position:relative; padding-bottom:30px;}
.hisGrap h4 b{font-size:2em; color:#06a3db}
.hisGrap h4:after{content:''; display:block; position:absolute; bottom:0; left:0; right:0; margin:auto; width:20px; height:20px; background:url(../img/tit_dot.png) no-repeat center center;}
.hisGrap h4 span{display:block; position:relative;}

.hisGrap ul{position:relative; padding:20px 0px; text-align:center;}
.hisGrap ul li{background:#ffffff; margin-bottom:10px; position:relative; padding:4px 0px;}
.hisGrap ul li span.date{display:block; font-weight:600;}


.hisGrap ul:before{content:''; display:block; width:1px; height:100%; background:#dcdcdc; position:absolute; top:0;  left:0; right:0; margin:auto}
.hisGrap ul:after{content:''; display:block; width:7px; height:7px; background:#06a3db; position:absolute; bottom:0; left:0; right:0; margin:auto; border-radius:500px}

.hisGrap.his02 h4:before{background:#b0cf01}
.hisGrap.his02 ul:after{background:#b0cf01}

.hisGrap.his03 h4:before{background:#777e8f}
.hisGrap.his03 ul:after{background:#777e8f}


@media all and (min-width:768px) {
.hisGrap h4{position:relative; color:#ffffff; margin:0 auto;  color:#ffffff; text-align:center; padding-bottom:40px;}
.hisGrap h4 b{display:block; font-size:2.3em}
.hisGrap ul li{background:none; margin-bottom:0;}
.hisGrap ul li span{position:relative; display:block; padding-right:10%}
.hisGrap ul li span.date{padding-top:10px;}
.hisGrap ul li span.date:before{content:''; width:10%; height:1px; background:#dcdcdc; position:absolute; right:0;top:0;}
.hisGrap ul li span.date:after{content:''; width:7px; height:7px; background:#06a3db; position:absolute; top:-2px; right:10%; border-radius:500px;}
.hisGrap ul .left{text-align:right; margin-right:50%;}
.hisGrap ul .right{text-align:left;}

.hisGrap ul .right{margin-left:50%;}
.hisGrap ul li.right span{padding-right:0; padding-left:10%}
.hisGrap ul li.right span.date:before{right:auto; left:0;}
.hisGrap ul li.right span.date:after{right:auto; left:10%}

.hisGrap.his02 ul li span.date:after{background:#b0cf01}
.hisGrap.his03 ul li span.date:after{background:#777e8f}
}

@media all and (min-width:1200px) {
.hisGrap h4 b{ font-size:2.6em}

}






/*글로벌네트워크*/

.network{max-width:1400px; margin:0 auto; position:relative; padding:30px 3%; background:#1c3f95; color:#ffffff; margin-top:50px; }
.network .photo{margin:0 auto; margin-top:-50px; margin-bottom:25px; width:100%;
-webkit-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.5);
box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.5); }

.network .info h4{margin-bottom:20px;}
.network .info h4 span{display:inline-block; font-size:12px;  margin-bottom:10px; position:relative; padding-right:50px;}
.network .info h4 span:before{content:''; display:inline-block; width:40px; height:3px; background:#ffffff; position:absolute; right:0; top:0; bottom:0; margin:auto}
.network .info h4 b{display:block; font-size:1.4em; font-weight:600;}

.corp_info{border-top:1px solid #ffffff; overflow:hidden}
.corp_info dl{padding:20px 0px 20px 50px; border-bottom:1px solid #ffffff; border-color:rgba(255,255,255,0.2); background-size:35px !Important; background-position:5px 20px !important}
.corp_info dl dt{font-weight:600; margin-bottom:3px;}

.corp_info dl.address{background:url(../img/ic_address.png) no-repeat;}
.corp_info dl.call{background:url(../img/ic_call.png) no-repeat; overflow:hidden;}

@media all and (min-width:640px) {
.network .info{margin:0 0 0 42%;}
.network .info h4{font-size:1.6em}
.network .photo{width:35%; position:absolute; top:20px; max-width:400px;}
.corp_info{margin-left:42%}
}

@media all and (min-width:768px) {
.network{padding:50px 3%; margin-top:70px; }
.network .info h4{font-size:1.8em}
.network .info h4 span{font-size:14px}

.corp_info{border-bottom:1px solid #ffffff; border-color:rgba(255,255,255,0.2);}
.corp_info dl{border-bottom:0; float:left; width:46%; margin:0 2%; }

}

@media all and (min-width:1200px) {
.network{padding:60px 100px; }
.network .info{margin-left:460px;}
.corp_info{margin-left:460px}

.corp_info dl.call dd{float:left; margin-right:10px}
.corp_info dl.call dd:last-child{margin-right:0}
}


/*택슬라이드*/
.tag_slider li{position:relative;}
.tag_slider li span{position:absolute; display:block; background:rgba(0,0,0,0.5); color:#ffffff; bottom:0px; height:40px; line-height:40px; width:100%; text-align:center; font-weight:400; }
.tag_slider .owl-buttons div{margin: 0px !important;}

.tag_slider .owl-buttons{margin:0px; position:absolute; right:0px; bottom:0px;}
.tag_slider .owl-buttons div{opacity:1 !important; border-radius:0px !important; padding:0px !important; margin:0px 0px 0px 1px !important; width:40px !important; height:40px !important; background:rgba(0,0,0,0.8) !important; text-indent:-999999px; position:relative; float:left;}
.tag_slider .owl-buttons div:hover{opacity:0.9 !important}
.tag_slider .owl-buttons div:after{font-family: FontAwesome; content:"\f053"; font-size:18px; text-indent:0px; position:absolute; width:10px; height:10px; left:50%; margin-left:-5px; top:50%; margin-top:-10px; color:#ffffff}
.tag_slider .owl-buttons div.disabled{opacity:0.8}
.tag_slider .owl-buttons div.owl-next:after{content:"\f054";}


@media all and (min-width:768px){
.tag_slider li span{line-height:50px; height:50px;}
.tag_slider .owl-buttons div{width:50px !important; height:50px !important}

}





/*약력*/
.chairman h5{position:relative; margin-bottom:20px; padding-bottom:25px; font-size:1.4em}
.chairman img{width:100%;}
@media all and (min-width:640px) {
.chairman h5{font-size:2.3em}
.chairman .left{width:30%; margin-right:5%; float:left; margin-bottom:0 !important;}
.chairman .right{width:65%; float:left; overflow:hidden;}
}

@media all and (min-width:1200px) {
.chairman .box{float:left; width:47%; margin:0 1.5%;}
}


/*도선사회소개*/

.Gtxt{font-size:2em; color:#c8c8c8; font-weight:800}
.circle_li{overflow:hidden; text-align:center;padding:5px;}
.circle_li li{width:140px; height:140px;  font-weight:400; display:inline-block; vertical-align:middle; color:#ffffff ; text-align:center; position:relative; padding-top:40px; z-index:1; margin:-5px;}
.circle_li li:before{content:''; width:100%; height:100%;display:block;  background:#2a3653;  border-radius:500px; position:absolute; z-index:0; top:0; left:0; z-index:-1; opacity:0.95}
.circle_li li.bm{padding-top:50px;}


.historyholder .Gtxt{text-align:center;}
@media all and (min-width:768px) {
.Gtxt{font-size:2.5em}
}

@media all and (min-width:1200px) {
.circle_li{padding:0}
.circle_li li{width:200px; height:200px; padding-top:50px; margin:5px;}
.circle_li li:nth-child(even):before{background:#3a445e}
.circle_li li.bm{padding-top:70px;}

}

/*운영세칙*/

.rule h4{text-align:center; font-size:1.1em}
.rul_tab h4{font-size:1em;}
.rul_tab h5{font-weight:600; margin-bottom:5px; font-size:1.05em}
@media all and (min-width:768px) {
.rule_li ul{float:right}
}

.responsive-tabs-wrapper{border-bottom:1px solid #dcdcdc}
.responsive-tabs__list { display: none;}
.responsive-tabs__heading { display: block; cursor: pointer; }
.responsive-tabs__panel--closed-accordion-only { display: none;}

.responsive-tabs__list { font-size: 1.2em; margin: 2em 0 0 0; padding: 0;border-bottom: 1px solid #ddd; padding-bottom:11px; line-height: 1em;}
.responsive-tabs__heading {padding: 17px 20px; border-top: 1px solid #dcdcdc; position: relative; font-weight:500}
.responsive-tabs__heading:after{font-family:'FontAwesome';	content:"\f107"; display: block;	position: absolute; right: 20px;	top:13px; margin:auto;;color:#323232; font-size:20px;}
.responsive-tabs__heading:hover,
.responsive-tabs__heading--active{background:#fafafa; color:#d10000; font-weight:600}
.responsive-tabs__heading--active:hover {color:#d10000 }
.responsive-tabs__heading--active:after {color:#d10000; }
.responsive-tabs__panel{padding:20px; background:#fafafa}
.responsive-tabs h4:last-child{border-bottom:1px solid #dcdcdc}





/*제조공정*/
.process_li{overflow:hidden;}
.process_li li{width:47%; position:relative; float:left; text-align:center; margin: 0 1.5% 0px;}
.process_li li b{position:absolute; left:0; top:0; background:#505050; border-radius:500px; color:#ffffff; font-weight:600; font-size:0.9em; display:inline-block; width:45px; height:45px; line-height:37px; border:3px solid #f0f0f0}
.process_li li img{border-radius:1000px; border:3px solid #f0f0f0}
.process_li li span{display:inline-block; color:#ffffff; padding:10px 25px; border-radius:50px; background:#042163; border:3px solid #f0f0f0;  position:relative; top:-30px; text-align:center; bottom:0; z-index:3; font-weight:500}

@media all and (min-width:768px) {
.process_li li{width:30.33%;}
}
@media all and (min-width:1200px) {
.process_li li{width:22%;}
}



/*추가*/


table.lay{width:100%;border-left: 1px solid #e6e6e6;vertical-align: middle;}
table.lay th{background: #505564;color: #fff;padding: 10px;vertical-align: middle;border-bottom: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-color: rgba(0,0,0,0.2);}
table.lay .w50{width:50%;}
table.lay td.gr{background:#f1f1f1;}
table.lay td{border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; padding:4px 3px; vertical-align:middle;text-align: center;}
table.lay .bl{background:#f3f4f5;}
table.lay .yl{background:#fffdd6;}
.gr_box{background: rgba(230,230,230,0.3);padding: 30px 3%;}
.gr_box b{display:block;}
.de_txt{font-weight: 600;margin-bottom: 10px;}
.de_txt2{font-size: 0.9em;color: #666;}
.de_txt2 span.yl{transform: translate(0px, 2.5px);background: #fffa9b;display: inline-block;width: 30px;height: 15px;margin-right: 5px;}
.scroll-box{overflow-x: scroll;}
.scroll-box table{width: 800px;}

table.lay th:first-child{border-left:1px solid #e6e6e6; border-color:rgba(0,0,0,0.2)}
.table-de{width: 100%;border-top: 1px solid #000;}
.table-de th{background: #f4f4f4;padding: 5px;border-bottom: 1px solid #dedede;width: 30%;}
.table-de td{padding: 5px;border-bottom: 1px solid #dedede;}


@media all and (min-width:768px) {
.gr_box{}
.de_txt{}
.de_txt2{}
	.scroll-box{overflow-x:hidden}
	.scroll-box table{width:100%;}
	.scroll-box.lay{
    overflow: scroll;
    height: 500px;
}
	.scroll-box.lay table.lay th{
    /* position: absolute; */
}
	.scroll-box.lay table{width: 1500px;}
.table-de{}
.table-de th{padding: 10px;width: 20%;}
.table-de td{padding: 10px;}
	.responTable.lay  .w30{width:30%;}
}

@media all and (min-width:1200px) {
.gr_box{}
.de_txt{margin-bottom: 15px;}
.de_txt2{}
.scroll-box table{width:100%;}
	}