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


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

.deco{display:inline-block; height:3px; width:20px;  position:relative; background:#000000; vertical-align:middle; margin-left:5px}
.deco:after{content:''; position:absolute; display:inline-block; left:-7px;  border-left: 7px solid transparent; border-bottom:3px solid #000000; box-sizing:border-box}
.deco:before{content:''; position:absolute; border-right:7px solid transparent; border-top:3px solid #000000; right:-7px; bottom:0;}

.deco_w{background:#ffffff}
.deco_w:after{border-bottom-color:#ffffff}
.deco_w:before{border-top-color:#ffffff}

.comm_table{width:100%; border-top:1px solid #323232; border-collapse:separate; font-size:0.9em}
.comm_table th, .comm_table td{border-bottom:1px solid #dcdcdc; padding:7px 5px; 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; }

.comm_table tr.bgc th, .comm_table tr.bgc td{ background:#e7e7e7; font-weight:500}
.comm_table .tal{text-align:left;}



.bd_table{border-right:1px solid #dcdcdc}
.bd_table th, .bd_table td{border-left:1px solid #dcdcdc}




.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; 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;}


@media all and (min-width:768px) {
.comm_table{font-size:1em}

.deco{height:5px; width:40px; margin-left:10px}
.deco:after{border-bottom-width:5px}
.deco:before{border-top-width:5px}

}


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

.pDot{padding-left:15px; position:relative}
.pDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; top:3px; background:#05235f}

.fsb{font-size:1.2em}
.bgGray{background:rgba(230,230,230,0.3);}
.bgbox{padding:30px 0; background:rgba(230,230,230,0.3);}
.pdbox{padding:50px 20px}
/*.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:#cef2ff;}
.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:8px; margin-bottom:3px;}
.dot_li li:last-child{margin-bottom:0;}

.tit_nm{font-size:1.4em; font-weight:500; letter-spacing:-0.06em; color:#000000}
.tit_sm{font-size:1.2em;  font-weight:500; letter-spacing:-0.06em; color:#000000}
.tit_dot{color:#000000; font-size:1.3em; font-weight:500; letter-spacing:-0.065em; padding-left:26px; background:url(../img/tit_dot.png) no-repeat left center;}
.tit_h5{color:#05235f; font-weight:600; margin-bottom:10px}

/*탭리스트*/
.tablist {overflow:hidden; text-align:center; }
.tablist li{display:inline-block;  line-height:50px; text-align:center;}
.tablist li:last-child{border-right:0}
.tablist.list02 li{width:45%}
.tablist.list03 li{width:30%}
.tablist.list04 li{width:20%}


.tablist li a{ display:block; text-align:center; border:1px solid #dcdcdc; color:#808080; }
.tablist li.active a{background:#4c5159; color:#ffffff; font-weight:500}


/*탭홀더*/
#tabsholder .tabs li{background:#ffffff; color:#808080; border:1px solid #dcdcdc; cursor:pointer}
#tabsholder .tabs li.current{background:#4c5159; color:#ffffff; border-color:#4c5159}
#tabsholder .tabscontent {display:none;}

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

}

@media all and (min-width:768px) {
.bgbox{padding:60px 0;}
.pdbox{padding:60px 0;}

.comm_table th{padding:20px 5px}
.comm_table td{padding:15px 5px;}

.content_table th{padding:20px 5px}
.content_table td{padding:15px 5px;}
.comm_dl dt{float:left; margin-right:1%; clear:both;}
.comm_dl dd{width:87%; float:right;}

.sub_con .col-02{width:47%;float:left; margin:0 1.5%;}
.sub_con .col-03{width:30.33%; margin:0 1.5%; float:left;}
.sub_con .col-04{width:22%; margin:0 1.5%; float:left;}
.bdLine{padding-bottom:40px; margin-bottom:40px;}

.mEnter{display:inline-block;}
.tEnter{display:block;}

.tit_nm{font-size:1.8em;}
.tit_sm{font-size:1.4em;}
.tit_dot{ font-size:1.5em;}

}

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

.tit_nm{font-size:2em;}
.tit_sm{font-size:1.6em;}
}

/*소개공통*/
.comm_top{position:relative; }
.deco:after{content:''; display:block; width:100%; position:absolute; bottom:0; height:8px; background:url(../img/line_bg.png) no-repeat;}
.comm_top h4{color:#29343f;  font-size:1.3em; line-height:1.3;}
@media all and (min-width:768px) {
.comm_top h4{font-size:1.8em;}
}

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

/*CEO인사말*/
.greeting{background:url('../img/greeting_bg.jpg') no-repeat center bottom; background-size:cover !important; padding-bottom:50px;}
.greeting .photo{margin-bottom:20px; position:relative;}
.greeting .photo:before{content:''; background:#bfc5cd; z-index:0; left:-10px; bottom:-10px; position:absolute; width:100%; height:100%;}
.greeting .photo img{position:relative;}

.greeting .sign img{width:140px}
.greeting .sign b{display:inline-block; vertical-align:bottom; margin-right:5px}

@media all and (min-width:768px) {
.greeting{padding-bottom:80px}
.greeting .photo{float:left; width:45%;}
.greeting .txt{float:right; width:50%;}
}


/*회사소개*/

.company_info{overflow:hidden;}
.company_info .photo{position:relative;}
.company_info .photo:after{content:''; width:40%; height:100%; display:block; position:absolute; top:0; right:0; background: url(../img/logo_mark2.png) no-repeat right top; background-size:100% !important; opacity:0.5}
.company_info .photo div{display:inline-block; position:absolute; bottom:0; left:15px; background:#05235f; background:rgba(5,35,95,0.9);padding:20px; color:#ffffff; font-weight:600}
.company_info .photo p.tit{font-size:1.4em; font-weight:700}
@media all and (min-width:768px) {
.company_info .photo div{font-size:1.4em; padding:30px 40px; background-size:50% !important;}
}



.half_bg{padding-bottom:30px; position:relative;}
.half_bg:before{content:''; position:absolute; bottom:0; left:0; right:0; display:block; width:100%; height:50%; background:#f5f5f5; z-index:0; }

/*비전*/
.vs_tit{font-weight:900; color:#05235f; font-size:2em;}
.vs_tit b{background:#1c3f95; color:#ffffff; position:relative;}
.vs_tit b:after{content:''; display:block; position:absolute; right:0; left:0; top:-10px; border-top:10px solid transparent; border-right:150px solid #1c3f95}

.vision_li:after{content:''; clear:both; display:block}
.vision_li li{position:relative; overflow:hidden; -webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3);
margin-bottom:20px;
}
.vision_li dl{padding:20px 3%; background:#ffffff}
.vision_li dl dt{text-align:center; color:#05235f; font-weight:600; font-size:1.2em}
.vision_li dl dt span{font-size:14px; color:#808080; display:block;}

@media all and (min-width:620px) {
.vision_li li{width:48%; margin:0 1% 30px; float:left;position:relative; overflow:hidden; }
.vision_li li:nth-child(3){clear:both;}
.vision_li dl{min-height:195px}
.vision_li dl dt{margin-bottom:10px}
.vision_li dl dd{font-size:0.9em}

}


@media all and (min-width:1200px) {
.vision_li li{width:24%; margin:0 0.5%;}
.vision_li li:nth-child(3){clear:none;}
.vision_li li:nth-child(even){margin-top:30px}
.vision_li dl{min-height:225px}
.vision_li dl dt{font-size:1.4em}
.vision_li dl dt span{font-size:16px;}

}

/*경영전략 bfc5cd*/
.strategy_wrap{background:url(../img/strategy_bg.jpg) no-repeat center center; background-size:cover !Important; color:#ffffff; padding:50px 0px;}
.strategy_wrap h3,
.strategy_wrap h4{color:#ffffff;}
.strategy_wrap h3:after{background:#ffffff}
.strategy{position:relative; max-width:300px; margin:0 auto; }
.strategy:before{content:''; width:3px; height:100%; background:#bfc5cd; position:absolute; left:20px; top:0; bottom:0;}
.strategy .pdTxt{padding-bottom:20px; }
.strategy .pdTxt b{font-size:0.9em; position:relative; display:inline-block; background:#ffffff; color:#bfc5cd; border-radius:100px; padding:0 10px; border:10px solid #bfc5cd; margin-right:3px; margin-bottom:15px}
.strategy .pdTxt span{display:block; margin-left:50px; border-radius:100px; }
.strategy .pdTxt span.clTxt{ font-weight:600}

@media all and (min-width:620px) {
.strategy_wrap{padding:80px 0px}
.strategy_wrap h3.conh3:after{margin-bottom:30px;}
.strategy{max-width:500px;}
.strategy:before{display:none;}

.strategy .pdTxt{color:#ffffff;  position:relative; border-radius:500px; padding-left:20px; padding-bottom:0; margin-bottom:20px; }
.strategy .pdTxt:last-child{margin-bottom:0;}
.strategy .pdTxt:nth-child(2){padding-left:40px;}
.strategy .pdTxt:nth-child(3){padding-left:60px;}
.strategy .pdTxt:nth-child(4){padding-left:80px;}
.strategy .pdTxt:nth-child(5){padding-left:100px;}

.strategy .pdTxt:before{content:''; width:40%; height:3px; background:#bfc5cd; display:block; margin:auto; position:absolute; left:0; top:0; bottom:0;}
.strategy:after{content:''; width:3px; height:calc(100% - 42px); position:absolute; background:#bfc5cd; display:block; top:0; bottom:0; margin:auto }
.strategy .pdTxt span{background:#05235f; padding:10px 15px; display:inline-block; margin-left:0; position:relative;}
.strategy .pdTxt span.clTxt{border:1px solid #ffffff; background:none; color:#ffffff; margin-left:-10px;}
.strategy .pdTxt b{display:inline-block; font-weight:600;  background:#ffffff; color:#05235f; padding:0 15px; height:25px; line-height:25px; border-radius:100px; box-sizing:content-box; text-align:center; margin-bottom:0; margin-right:10px;}
}

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

.strategy_wrap{padding:120px 0px}

.strategy{max-width:700px;}
.strategy:after{height:calc(100% - 65px);}
.strategy .pdTxt{margin-bottom:40px;}
.strategy .pdTxt b{padding:10px 20px}
.strategy .pdTxt span{padding:20px 40px}
.strategy .pdTxt span.clTxt{margin-left:-20px}
.strategy .pdTxt:nth-child(2){padding-left:60px;}
.strategy .pdTxt:nth-child(3){padding-left:100px;}
.strategy .pdTxt:nth-child(4){padding-left:140px;}
.strategy .pdTxt:nth-child(5){padding-left:180px;}
}




/*그래프연혁*/
.hisGrap{position:relative;}
.hisGrap h4{text-align:center; position:relative; padding-bottom:30px;}
.hisGrap h4 b{font-size:2em; color:#0083ef}
.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:10px 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:#0083ef; 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:#0083ef; 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}

}

/*텍스트연혁*/

.historybox .historyline:last-child{border-bottom:1px solid #dcdcdc}
.historyline{position:relative; clear:both; overflow:hidden}
.historyline:after{content:''; clear:both;}
.historyline h4{text-align:center; font-weight:600; font-size:1.7em; padding:20px;}
.historyline .right{position:relative;}
.historyline .total{position:absolute; right:0px; top:-40px; display:inline-block; padding:5px 10px; color:#ffffff; background:#cd1212; font-size:0.8em; border-radius:100px;}
.historyline .total:after{content:''; position:absolute; border-top:10px solid #cd1212; border-left:10px solid rgba(0, 0, 0, 0); border-right:10px solid rgba(0, 0, 0, 0); bottom:-8px; margin-left:-5px; left:50%;}

.historyline dl.his{border-top:1px solid #dcdcdc; padding:30px 20px; overflow:hidden;}
.historyline dl.his dt{float:left; clear:both; width:17%; font-weight:600; color:#323232}
.historyline dl.his dd{float:right; width:80%; margin-bottom:5px; overflow:hidden}
.historyline dl.his dd .date,
.historyline dl.his dd .none{width:30px; float:left; min-height:1px; font-weight:600}
.historyline dl.his dd .txt{float:right; width: calc(100% - 30px)}
.historyline dl.his dd span.point{background:#ffef67; display:inline-block;}
.historyline dl.his dd:last-child{margin-bottom:0px}

.historyline dl.last{border-bottom:1px solid #dcdcdc !important}

@media all and (min-width:768px) {
.historyline{margin-bottom:0px !important}
.historyline h4{text-align:left; float:left; width:20%; clear:both;}
.historyline h4:after{content:''; width:20%; height:1px; background:#dcdcdc; position:absolute; left:0px; top:0px;}
.historyline .right{float:right; width:75%; }

.historyline dl.his{padding:30px}
.historyline dl.his dt{font-size:1.4em; line-height:100%}
.historyline .total{padding:15px 20px; top:-60px;}
/*.historyline .right dl:nth-last-child(2){border-bottom:0px}
/*.historyline :after{content:''; display:block; clear:both}*/
}





/*조직도*/
.organization{text-align:center;}
.organization img{width:100%; max-width:1085px;}



/*오시는길*/

.mapbox{position:relative;}
.address_info{background:#05235f; color:#ffffff; text-align:center; padding:30px 20px;}
.address_info h4{font-size:1.4em; font-weight:600}
.address_info p{margin-bottom:10px;}


@media all and (min-width:768px) {
.address_info{position:absolute; left:10px; top:10px; z-index:100; text-align:left; min-width:360px}
}






/*인증서*/

.certi{font-size:0;}
.certi li{display:inline-block; width:47%; margin:0 1.5% 15px; font-size:14px; vertical-align:top}
.certi li img{-webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.3);}
.certi li span{display:block; width:100%; padding:8px 0; text-align:center; color:#000000; font-weight:600}

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

@media all and (min-width:1200px) {
.certi li{width:22%; margin:0 1.5% 25px;}
}

/*수상내역*/
.prize_bg{background:url(../img/prize_bg.jpg) no-repeat center center; background-size: cover !Important; color:#ffffff}
.prize_bg h4{color:#ffffff}
.prize_bg .col-02{padding:30px;}
.prize_bg img{width:100%;}
.prize ul {position:relative;}
.prize ul li {position:relative;}
.prize ul li b {padding-left:40px; position:relative; color:#ffffff; display:block; padding:5px 0 5px 50px; font-size:1.2em; margin-top:15px;}
.prize ul li b:before {position:absolute; display:block; content:''; left:0; top:5px; width:24px; height:24px; background:#ffffff; border-radius:50%; -webkit-border-radius:50%; opacity:0.2; }
.prize ul li b:after {position:absolute; display:block; content:''; left:0; top:5px; width:24px; height:24px; background:#ffffff; border-radius:50%; -webkit-border-radius:50%; transform:scale(0.3);}
.prize ul li ol {position:relative; margin-left:50px; border-bottom:1px dashed #ddd; padding-bottom:20px; border-color:rgba(255,255,255,0.2)}
.prize ul li ol:before {position:absolute; display:block; content:''; left:-38px; top:0; width:1px; height:95%; background:#ddd; opacity:0.2;  transform:translateY(2%);} 
.prize ul li ol li {position:relative; background:url(../img/dot_li.gif) no-repeat 3px 9px; padding-left:15px }


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

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



/*사업부서*/
.divi_top{position:relative; padding-bottom:20px;}
.divi_top:before{width:50%; content:''; display:block; position:absolute; left:0; bottom:0; margin:auto;  height:80%; background:#f5f5fa}
.divi_top .txt{}
.divi_top .txt h4{font-size:1.8em; color:#05235f;}
.divi_top .txt h4,
.divi_top .txt p.tit{text-align:center}
.divi_top .txt h4 span{display:block; font-size:16px; font-weight:600; color:#bec5cd; margin-bottom:10px}
.divi_top .txt p.tit{font-size:1.1em}
.divi_top .txt .info{max-width:400px; margin:0 auto; overflow:hidden; padding-bottom:70px;}
.divi_top .photo{position:relative; text-align:center;}
.divi_top .photo img{width:100%; max-width:400px;}
.divi_top .photo span{display:inline-block; position:absolute; right:20px; bottom:20px; background:#4c5059; color:#ffffff; padding:2px 10px; font-size:0.9em}

.divi_top .dot_li{text-align:left;}
.line_ul li{display:inline-block; font-size:0.8em; padding:2px 5px; border:1px solid #505050; }

@media all and (min-width:768px) {
.divi_top:before{width:60%; height:60%}
.divi_top .txt h4{font-size:2.5em; margin-bottom:30px !important}
.divi_top .txt h4 span{font-size:18px; margin-bottom:25px}
.divi_top .txt h4,
.divi_top .txt p.tit{text-align:left}
.divi_top .txt{width:50%;}
.divi_top .photo{position:absolute; width:50%; right:0; top:10%;}
.divi_top .txt .info{max-width:100%; margin:0; }
.divi_top .txt .info .box{width:47%; float:left; margin:0 1.5%}

}

@media all and (min-width:1200px) {
.divi_top{padding-bottom:60px}
.divi_top:before{height:65%; top:auto; margin:0; bottom:0}
.divi_top .txt h4{font-size:3em; letter-spacing:-2px}
.divi_top .txt h4 span{letter-spacing:0; font-size:24px}
.divi_top .photo img{max-width:100%}

.divi02 .txt{min-height:600px;}
.divi02 .photo{top:0px;}
}

/*사업부하단*/
.divi_part{margin-top:-40px}
.divi_part div{background:#6b654d; color:#ffffff; padding:30px 25px;}
.divi_part:after{content:''; clear:both; display:block}
.divi_part .box h6{font-size:1.2em; font-weight:600; margin-bottom:10px;}
.divi_part .box:first-child{background:#05235f}
.divi_part .box:last-child{background:#4c5059}

.divi_part ul li{position:relative;}
.divi_part ul li:before{display:inline-block;  font-family:'FontAwesome'; content:'\f00c'; font-size:8px; margin-right:5px; vertical-align:middle}

@media all and (min-width:768px) {
.divi_part .box{margin-top:20px; width:33.33%; float:left; padding:40px 30px}
.divi_part .box:first-child{margin-top:0;}
.divi_part .box:last-child{margin-top:-40px}
.divi_part .box.list02{width:50%;}
}

@media all and (min-width:1200px) {
.divi_part .box{padding:60px 40px}
.divi_part{margin-top:-60px}
}

/*시스템사업부*/
.sys_process .tit_h5 span {font-weight:normal;}
.sys_process .line_ads,
.sys_process .line_pc {position:relative;}
.sys_process .line_ads:before {display:block; content:'ADVANCING DIRECTION';position:absolute; top:-22px; left:0; width:100%; font-size:15px; color:#4c5059; font-family:'Play'; font-weight:700;}
.sys_process .line_ads:after {display:block; content:'';position:absolute; bottom:-5px; left:0; width:100%; height:3px; background: linear-gradient( to right, #4c5059, #e9e9e9 );}
.sys_process .line_pc:before {display:block; content:'PROCESS';position:absolute; top:23px; left:-8px;  font-size:15px; color:#4c5059; font-family:'Play'; font-weight:700; writing-mode: vertical-lr; transform: rotate(180deg);}
.sys_process .line_pc:after {display:block; content:'';position:absolute; top:17px; left:13px; width:3px; height:928px; background: linear-gradient( to bottom, #4c5059, #e9e9e9 );}

.step {padding:30px 20px 0 50px;}
.step .box {margin-bottom:10px;}
.step .box:after,
.step .box .box_txt:after {clear:both; display:block; content:'';}
.step .box .box_tit {float:left; width:100%; padding:20px;  background:#4c5059; color:#fff; text-align:center;}
.step .box .tab {position:relative;  cursor: pointer;  outline: 0;}
.step .box .tab:after  {content: '+';	position: absolute;	top: 0;right: 0;	display: block;	font-size: 1.5em;padding: 0.5em; color:#fff;}
.step .box .tab.active:after  {content: '-'; }
.step .box .box_txt {float:left; width:100%; }
.step .box .box_txt li { background:#e9e9e9; border:1px solid #dcdcdc; padding:20px;}
.step .box .box_txt li p {padding-left:15px; position:relative;}
.step .box .box_txt li p:after {display:block; content:'·'; position:absolute; top:0px; left:0; color:#000;}

.step .box .box_tit .vendor {position:relative;}
.step .box .box_tit .vendor:after {display:block; content:'VENDOR';position:absolute; bottom:-25px; right:-19px; color:rgba(255,255,255,0.5); font-family:'Play'; font-weight:700; font-size:1.2em;}
.step .box .box_txt li.vendor {position:relative;}
.step .box .box_txt li.vendor:after {display:block; content:'VENDOR';position:absolute; bottom:-5px; right:0; color:rgba(76,80,89,0.5); font-family:'Play'; font-weight:700; font-size:1.2em;}

.panel {   overflow: hidden;}
.js .panel {
  max-height: 0;
  -webkit-transition: max-height 0.3s ease-out;
  -moz-transition: max-height 0.3s ease-out;
  -ms-transition: max-height 0.3s ease-out;
  -o-transition: max-height 0.3s ease-out;
  transition: max-height 0.3s ease-out;
}
.js .panel.active {  max-height: 30em;}
.panel p:last-child {   margin: 0; }



@media all and (min-width:768px) {
  .tab {    cursor: default;  } 
  .tab.active {     background: none;   }
  .tab:after, .tab.active:after {     content: "";   }
  .js .panel, .js .panel.active {     max-height: none;   }

 .step .box .box_tit {width:25%; min-height:100px; }
 .step .box .box_tit span {margin-top:18px; display:inline-block;}
 .step .box .box_tit span.one_line {margin-top:15px;}
 .step .box .box_txt {width:75%; padding-left:5px; }
 .step .box .box_txt li {float:left; width:32%; margin-right:5px; min-height:100px;}
 .step .box .tab::after {display:none; cursor: auto;}
 .step .box .box_tit .vendor:after { bottom:-45px; }

.sys_process .line_pc:after {height:1330px;}
}


@media all and (min-width:1000px) {
.step .box .box_tit span {margin-top:15px;}

}


/*크레인*/
.crane_busi{position:relative;}
.crane_busi .busi{background:#05235f; padding:30px 20px; color:#ffffff}
.crane_busi .busi h5{font-size:1.2em; font-weight:600}
.crane_busi .busi ul li b{display:inline-block; width:20px; height:20px; line-height:20px; background:#3f4758;  text-align:center; border-radius:50px;}


@media all and (min-width:1200px) {
.crane_busi .busi{position:absolute; left:20px; bottom:20px; max-width:450px; background:rgba(5,35,95,0.8)}
}


/*환경사업부*/
.enviro{overflow:hidden; position:relative;  border-top:2px solid #1d2e79 ; border-left:1px solid #e6e6e6; text-align:center; text-transform:uppercase}
.enviro dl{padding:20px 0px; border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; width:50%; float:left; box-sizing:border-box}
.env_list03 dl {width:33.3% !important; min-height:218px !important;}
.enviro dl dt{font-weight:bold; margin-bottom:3px; color:#323232; font-size:2em; color:#000000}
.enviro dl dt b{font-size:15px; display:block;}
.enviro dl dt  span{display:block; color:#1d2e79 }
.mh_env dl {min-height:180px;}
.air_pro .mm {display:block; text-align:right; font-size:14px;}

.logo_oden img {max-width:170px; padding-top:5px;}
.scllow_m{width:100%; border-top:1px solid #323232; text-align:center; border-collapse:separate; font-size:0.9em}
.scllow_m th{background:#f5f5f5; color:#000000;}
.scllow_m th:first-child{}
.scllow_m th,
.scllow_m td{border-bottom:1px solid #e6e6e6; padding:12px 5px; vertical-align:middle}
.scllow_m th{padding:14px 5px;}

.m_arrow {display:block; font-size:12px; padding:5px 0 0 15px; position:relative;}
.m_arrow:after {display:block;content:'\f061'; position:absolute; top:5px; left:0; font-family:'FontAwesome'}
.scllow_m {overflow-x:auto; }
.scllow_m table { width:600px; margin-bottom:0 !important}

@media all and (min-width:768px) {
.enviro dl{width:25% !important; padding:40px 0px}
.env_list03 dl {width:33.3% !important; min-height:175px !important;}

.enviro dl dt  span{font-size:1.3em}
.mh_env dl {min-height:210px;}


}

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

.m_arrow {display:none;}
.scllow_m table { width:100%;}

}

/*생산공정*/
.process ul {text-align:center;}
.process ul li{margin:25px auto; position:relative; padding:10px 10px;; color:#ffffff; font-size:1.2em;font-weight:400; text-align:center; }
.process ul li:before{content:''; position:absolute; width:100%; height:100%; background:#194293; left:0; top:0; border-radius:500px}
.process ul li b{position:relative; z-index:1; font-weight:500;}
.process ul li span{position:relative; z-index:1; color:#bfc5cd; font-size:14px; line-height:1.2; font-weight:400; display:block; }

.process ul li:last-child:before{background:#05235f}
@media all and (min-width:440px){
.process ul li{position:relative;width:150px; height:150px; margin:25px auto;padding:45px 10px;; color:#ffffff; font-size:1.4em;font-weight:400; text-align:center;}
.process ul li:before{content:''; position:absolute; width:160px; height:160px; background:#194293; z-index:0; top:0; left:50%; margin-left:-80px; border-radius:500px;}
.process ul li:after{font-family:'FontAwesome'; content:'\f078'; color:#bfc5cd; width:12px; height:40px; line-height:40px; font-size:20px; position:relative;}
.process ul li:last-child:after{content:'';}
.process ul li span{margin-top:10px;}
.process ul  li{margin:20px; display:inline-block; vertical-align:top;}
.process ul li:after{position:absolute; right:-25px; color:#bfc5cd; content:'\f105'; font-weight:bold; font-size:32px; top:0; bottom:0; margin:auto}

}
@media all and (max-width:767px){
.process ul {max-width:450px; margin:auto;}
}
@media all and (min-width:768px){
.process ul{max-width:100%;}
.process ul li{margin:13px; font-size:1.4em}
.process ul li:after{right:-19px}
}
@media all and (min-width:980px){
.process ul li{margin:0 40px 50px;}
.process ul li:after{right:-45px; font-size:35px;}
}


/*제품소개*/
.product_li{position:relative;}
.product_li ul{overflow:hidden; }
.product_li ul li{width:46%; margin:0 1.5% 20px; display:inline-block; vertical-align:top; text-align:center;}
.product_li ul li img{width:100%; max-width:300px; margin-bottom:10px}
.product_li ul li span{display:block; font-size:0.9em; font-weight:600}


@media all and (min-width:768px){
.product_li ul li{width:29.33%}
}

/*설비현황*/
.facility_wrap{overflow:hidden;}
.facility{position:relative; overflow:hidden; border-top:3px solid #194293;}
.facility .photo img{width:100%;}

.dash_table{width:100%; border-top:1px solid #d7d9e2; font-size:0.9em; border-bottom:1px solid #d7d9e2}
.dash_table th, .dash_table td{padding:12px 10px; vertical-align:middle;  border-bottom:1px solid #d7d9e2}
.dash_table th{font-weight:600; background:#f8f8f8}

.remark{padding:15px 3%; border:10px solid #d7d9e2; position:relative; overflow:hidden}
.remark h5{color:#05235f; font-weight:600; margin-bottom:10px}
.remark ul li b{color:#000000; font-weight:600}
.remark .pic li {margin-bottom:10px;}
.remark .pic li img {border:1px solid #eee; }


@media all and (min-width:480px) {
.remark .col02:after,
.remark .pic:after {clear:both; display:block; content:'';}
.remark .pic li {float:left; width:45%; margin:10px;}

}

@media all and (min-width:540px) {
.facility{float:left; width:47%;  margin:0 1.5% 20px}

}

@media all and (min-width:768px) {
.remark {padding:20px;}
.remark h5{float:left; width:20%; font-size:1.1em}
.remark ul{float:right; width:80%;}
.remark .col02 .col2_txt {float:left ;width:37%;}
.remark .col02 .col2_img {float:left ;width:42%;}
.remark .pic li {width:29%;}

}

@media all and (min-width:1024px) {
.facility{float:left; width:23%; margin:0 1%}
.facility_wrap.list03 .facility{width:31.33%;}
.remark .pic li {width:15%; margin:5px;}
}

@media all and (min-width:1200px) {
.remark {padding:30px 20px; width:100%; margin:0 auto}
}



.customer_wrap{ border-top:1px solid #323232; border-bottom:1px solid #e6e6e6; margin-bottom:50px}
.customer{position:relative; overflow:hidden; }
.customer .photo{position:relative;  text-align:center; padding-top:30px}
.customer .photo img{max-width:245px}
.customer .txt h4{z-index:10; position:absolute; left:10px; top:10px; font-weight:normal;  display:inline-block; line-height:50px; font-size:1em; min-width:100px; padding:0 10px; height:50px; color:#ffffff; background:#05235f; background:linear-gradient(90deg, #05235f 0%, #194293 100%); text-align:center;}
.customer .txt h4 span{display:inline-block;}
.customer .txt{padding:20px 3% 30px; border-bottom:1px solid #e6e6e6}
.customer .txt span.since{font-size:30px; color:#bfc5cd; letter-spacing:-1px;  font-weight:600; position:absolute; right:0; bottom:0; line-height:100%; opacity:0.7}
.customer:last-child .txt{border-bottom:0;}


@media only screen and (min-width: 620px) {
.customer{border-bottom:1px solid #e6e6e6}
.customer .photo{width:40%;  float:left;}
.customer .txt{width: 60%; float:left; border:0px; padding:35px 20px 45px;}
.customer .txt h4{position:relative; display:block; padding:0;  margin-bottom:20px; font-size:1.8em; font-weight:600;  width:auto; height:auto; line-height:1.3; background:#ffffff; color:#05235f; text-align:left; left:auto; top:auto}
.customer .txt span.since{font-size:40px;}
}

@media only screen and (min-width: 1200px) {
.customer_wrap{margin-bottom:80px}
.customer .photo{width:30%;  float:left;}
.customer .txt{width: 70%; float:left; border:0px; padding:40px 20px;}

}


/*rnd센터*/
.flow_li{text-align:center; vertical-align:top; position:relative;}
.flow_li li{padding-bottom:20px; display:inline-block; position:relative; width:140px; height:140px; margin:-5px;}
.flow_li li:after{content:''; position:absolute; width:150px; height:150px; left:50%; margin-left:-75px; top:50%; margin-top:-75px; border-radius:300px; background:rgba(230,230,230,0.3); z-index:-1}
.flow_li li img{display:block; margin:0 auto; width:100%; max-width:70px; padding-top:20px;}
.flow_li li span{padding:5px 10px 5px 0px ; background:#05235f; color:#ffffff; border-radius:500px;}
.flow_li li span.bgRed{background:#cd1212; }

.flow_li li span b{font-weight:bold;  display:inline-block; background:#ffffff; color:#05235f; border:10px solid #05235f; width:20px; height:20px; line-height:20px; border-radius:100px; box-sizing:content-box;}
.flow_li li span.bgRed b{color:#cd1212; border-color:#cd1212}

@media all and (min-width:1200px) {
.flow_li:before{content:''; width:100%; height:1px; background:#c8c8c8; position:absolute; z-index:-1; top:50%; left:0}
.flow_li li{margin:10px;}
.flow_li li:after{background:#f7f7f7}
.flow_li li img{padding-top:40px;}
.flow_li li{width:200px; height:200px;}
.flow_li li:after{width:200px; height:200px; margin-left:-100px; margin-top:-100px;}
.flow_li li span{padding:10px 20px 10px 0px}
.flow_li li span b{width:30px; height:30px; line-height:30px;}
}



.consult ul {position:relative;}
.consult ul li {position:relative;}
.consult ul li b {padding-top:40px; position:relative;  display:block;  font-size:1.2em; margin-top:15px;}
.consult ul li b:before {position:absolute; display:block; content:''; left:0; top:5px; width:24px; height:24px; background:#505050; border-radius:50%; -webkit-border-radius:50%; opacity:0.2; }
.consult ul li b:after {position:absolute; display:block; content:''; left:0; top:5px; width:24px; height:24px; background:#505050; border-radius:50%; -webkit-border-radius:50%; transform:scale(0.3);}
.consult ul li span {position:relative; display:block margin-left:50px; border-bottom:1px dashed #dcdcdc; padding-bottom:20px; border-color:rgba(255,255,255,0.2)}
.consult ul li span:before {position:absolute; display:block; content:''; left:-38px; top:0; width:100%; height:1px; background:#dcdcdc;   transform:translateY(2%);} 

.detail_view div.ofh{border:1px solid #e6e6e6;; margin-bottom:5%; position:relative}
.detail_view img{width:100%; left:-1px ;top:-1px; right:-1px; }
.detail_view dl{padding:30px 20px}
.detail_view dl dt{font-weight:600; font-size:1.2em; margin-bottom:10px; color:#323232}
.detail_view dl dt span{color:#bfc5cd; font-size:30px; position:absolute; right:50%; bottom:0}
.detail_view dl dd ul{font-size:0.9em}


@media all and (min-width:640px) {
.detail_view dl{padding:50px 30px}
.detail_view dl dt{font-size:1.4em;}
.detail_view .col-02{width:50%; margin:0%; float:left}
.detail_view .col-02.right{float:right;}
.detail_view div.ofh{position:relative;}
.detail_view dl dt span{font-size:40px; }
.detail_view .col-02.right dt span{right:0}
}

@media all and (min-width:1200px) {
.consulting_detail .col-03{min-height:370px;}
}









/*반응형테이블*/
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:1px solid #05235f
}
table.responsive-table td {
	display: block;
	text-align: left;
	padding:3px 20px;
}
table.responsive-table td:last-child {
	border-bottom: 0
}
table.responsive-table td:before {
	content: attr(data-rt-label);
	float: left;
	min-width:60px;
	text-transform: uppercase;
	font-weight: 600;
	margin-right:10px;
}


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

.responTable{width:100%; border-top:1px solid #323232; text-align:center; border-collapse:separate; font-size:0.9em}
.responTable th{background:#f5f5f5; color:#000000;}
.responTable th:first-child{}
.responTable th,
.responTable td{border-bottom:1px solid #e6e6e6; padding:12px 5px; vertical-align:middle}
.responTable th{padding:14px 5px;}

}

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