/**
* Theme styleseet file
*
* @Program     DWEBS
* @Type  	   css
* @author      DWEBS
* @link        https://www.dwebs.kr
*/

@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/* -------------------------------------------------------------------
| Custom selection color
| ------------------------------------------------------------------*/
::selection { background-color: #5d5d5d; color: #58FAF4; }
::-moz-selection { background-color: #cccccc; color: white; }


/* -------------------------------------------------------------------
| Custom mark tag
| ------------------------------------------------------------------*/
mark {
	background: #CEECF5;
	border-radius: 3px;
	padding:4px;
	color: #000;
	font-weight:bold;
}


/* ------------------------------------------------------------------------------------
| Custom bootstrap breadcrumb
|
| 서브페이지 타이틀 영역
| 부트스트랩 breadcrumb 기본 구분자 및 속성 수정
|
| 부트스트랩은 페이지 로케이션을 위한 breadcrumb 클래스를 기본 제공합니다.
| 이러한 페이지로케이션의 각 영역간 구분자는 따로 명시하지 않으면 기본 / 로 표시하게되며,
| 이것을 변경하려면 .breadcrumb>li+li:before {content: ">";}등과 같이 재선언 합니다.
| -----------------------------------------------------------------------------------*/
.breadcrumb {color:#9c9c9c; font-size:12px; padding: 5px 0px 0; margin-bottom: 10px; list-style: none; border-radius: 4px; background:none;font-family: "NotoSans-Medium", sans-serif}
.breadcrumb>li+li:before {padding: 0 5px; color: #9c9c9c; content: ">";}
.breadcrumb .active{color:#9c9c9c;}


/* -------------------------------------------------------------------
| Header section
|
| 테마의 헤더영역내의 속성을 정의합니다.
| ------------------------------------------------------------------*/
#navitop_mobile {vertical-align:middle;background:#292929}
.logo{}
.mobile_btn {float:right;position:relative;width:34px;height:34px;background-color:#000;border:0px solid #2f2f2f;margin:20px 15px 0 0}
.icon-bar {margin-top:4px;margin-bottom:4px;background-color:#939393;display:block;width:22px;height:2px;border-radius:1px}

.top_navi{background:#151314;padding:5px 0 7px}
.top_navi ul{;}
.top_navi ul li{display:inline;padding:0 2.3% 0;}
.top_navi ul li a{font-size:9pt;color:#fff;text-decoration:none;letter-spacing:0.5px;font-family: "nanumMJ_B", sans-serif}
.top_navi ul li a.active{color:#666}

/* -------------------------------------------------------------------
| Foot section
|
| 테마의 푸터영역의 속성을 정의합니다.
| ------------------------------------------------------------------*/
.footer_area {text-align:center;padding-bottom:5px;border-top:1px solid #ccc;}

.call{color:#fff;font-size:13px;}
.call_txt1{color:#2f2f2d;border-bottom:1px solid #2f2f2d;padding-bottom:1px;font-family: "NotoSans-Medium", sans-serif}
.call img{max-width:5%}
.call a{display:block;border-radius:6px;background:#383838;;padding:4px 0;width:98%;margin:2% auto 0;color:#fff;font-size:10pt;font-weight:bold;text-decoration:none}

.open_info{border-top:1px solid #484848;border-bottom:1px solid #484848;padding:5px 0;color:#c0c0c0;font-size:12px;line-height:20px}
.open_info a{color:#898d8e;font-size:20px;}

.footer_copy {font-size:12px; color:#b8b8b8; line-height:20px; font-family: "nanum", sans-serif;}
.admin{;}
.admin a{font-size:10px;color:#ccc;border:1px solid #666;background:#333;padding:3px 7px;border-radius:3px;font-family: "nanum_B", sans-serif;letter-spacing:0.5px;text-decoration:none}
.dwebs_logo{;}
.footer_device{;}
.footer_area .btn-default{font-size:10px;background:#fff;color:#666}
.footer_area .btn-primary.active, .btn-primary.active:hover{font-size:10px;background:#ececec;border:1px solid #ccc;color:#666}

.quick_wrap{width:100%}
.quick{position:relative;text-align:center;padding:20px 0}
.quick img{width:80%}
.quick a{text-decoration:none}
.quick ul{;}
.quick ul:after {display:block;clear:both;content:"";}
.quick ul li{width:48%;float:left;margin:0 1%}

#q_call {position: fixed; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #292929; border-radius: 50%; right: 20px;
bottom: 20px; text-align: center;}
#q_call i {font-size:22px; color:#0eb559; }

/* -------------------------------------------------------------------
| Button section
|
| 테마내의 버튼들의 속성을 정의 합니다.
| ------------------------------------------------------------------*/
.btn_page_up{position:fixed; bottom:50px; right:50px; z-index:1000; display:none;}
.btn_page_up img:hover{opacity:0.5; cursor:pointer;}
.login_btn_default { background-color:#474a4d; border:1px solid #474a4d; color:#3c4349; font-size:12pt; height:68px; color:#ccc; }
.login_btn_default:hover { background-color:#333; color:#fff; }
#device_btn {vertical-align:middle; margin:0 auto;}
.board_btn_default { background-color:#474a4d; border:1px solid #474a4d; color:#d8d8d8; font-size:10pt; padding-left:10px; padding-right:10px; height:30px; }
.board_btn_default:hover { color:#fff; }


/* -------------------------------------------------------------------
| Bxslider section
|
| 테마의 Body영역의 속성을 정의합니다.
| ------------------------------------------------------------------*/
/* BXSLIDER */
.bxslider li img { margin:0 auto; }
.bxslider_btn_prev {
	position: absolute;
	left: 0px;
	top: 50%;
	z-index: 99;
	background: url('../images/bxslider_btn_prev.png') no-repeat 0 50%;
	border: 0;
	width: 46px;
	height: 64px;
	text-indent: -9999px;
	margin-top: -30px;
	opacity:0.6;
}
.bxslider_btn_next {
	position: absolute;
	right: 0px;
	top: 50%;
	z-index: 99;
	background: url('../images/bxslider_btn_next.png') no-repeat 0 50%;
	border: 0;
	width: 46px;
	height: 64px;
	text-indent: -9999px;
	margin-top: -30px;
	opacity:0.6;
}

.contents_1{width: 100%; background-image:url('../images/common/box1_bg.jpg'); background-size: cover;overflow:hidden; padding-top: 50px; border-top: 3px solid #116e3b; border-bottom: 3px solid #116e3b;}

.c_script_box{background: #116e3b; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 14px; letter-spacing:-0.5px; color: #fff; padding: 20px; text-align: center;}
.box1_intro_txt_title{font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 24px; letter-spacing:-0.5px; color: #fff; margin-bottom: 10px;}
.box1_intro_txt_title>span{font-weight:700; }
.box1_bt{width: 80px; height: 35px; background:url('../images/common/box1_bt_bg.png') no-repeat; text-align: center;  margin: 15px auto 0 auto; }
.box1_bt a { line-height: 35px; font-weight: 300; font-size: 11px;  display: block; color: #fff;   text-decoration: none;}

.box1_4{width: 100%; background:url('../images/common/box1_contact_img.jpg')no-repeat 0 100%; background-size: cover; padding: 20px; text-align: center;}
.box1_contact_bt{width: 50px; height: 50px; background:url('../images/common/box1_contact_bt.png') #116e3b no-repeat 50% 50%; border-radius: 50%; padding-bottom: 10px; margin: 30px auto; position: relative;}
.box1_contact_bt a {display: block; width: 100%; height: 100%; position: absolute;top: 0; left: 0;}

.box1_contact_title{font-weight: 700; color: #232222; font-size: 25px; margin-top: 20px; }
.box1_contact_txt{font-weight: 300; color: #1f1f1f; font-size:14px; line-height:24px; letter-spacing: -0.5px; margin-top: 15px; }
.box1_contact_tel{font-weight: 700; font-size:16px;}


/* -------------------------------------------------------------------
| Body section
|
| 테마내에 일반적인 컨텐츠들의 속성을 정의합니다.
| ------------------------------------------------------------------*/
/* warp */
#wrap {}
/* 서브 레이아웃 */
#sub_top_area_wrap{width:100%;height:100%;}
.sub_top_area{position:relative;width:100%;margin:0 auto;text-align:center;color:#fff;padding:30px 0}
.sub_top_area_t{font-size:15px;font-family: "NotoSans-Light", sans-serif;}
.sub_top_area_line{width:100px;height:1px;border-bottom:1px solid #fff;margin:0 auto;padding-top:10px;}
.sub_top_area>p{ font-family: 'NotoSans-Light', sans-serif; color:#fff; font-size: 18px; line-height: 1.7em;}
.sub_top_area>p>span{ font-family: 'NotoSans-Bold', sans-serif;}

.sub_article{position:relative;width:1300px;margin:0 auto;padding-bottom:50px;border-bottom:1px solid #151314}
.title{text-align:center;padding:20px;border-bottom: 1px solid #ccc;}
.sub_title{color:#222;font-size:25px;border-bottom:1px solid #333;padding-bottom:22px;}
.contents{min-height:350px;padding:0 15px 30px;}


.greetings{text-align: center; }
.greetings_title{color: #232323; font-weight: 400; font-size: 22px;  margin-bottom:40px;}
.greetings_title>span{color: #116e3b; font-weight: 700; font-size: 22px; }
.greetings_text{color: #212121; font-weight: 400; font-size: 16px; line-height: 28px; margin-bottom: 60px; }
.greetings_text>span{color: #000; font-size: 18px;}

.location_table{width: 100%; text-align: center; margin-bottom: 30px;}
.location_table th{border: 1px solid #ccc;text-align: center;  padding: 15px; font-weight: 700; background: #f6f6f6; font-size: 16px;}
.location_table td{border: 1px solid #ccc; padding:20px; font-weight: 400; font-size: 14px;}

.products_wrap{width: 100%;}
.products_wrap:nth-child(2){margin-bottom:0;}
.products_wrap:after{display: block;content: "";clear: both;}
.products_box{position: relative; display: inline-block; width: 100%; height: 450px; box-sizing:border-box; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #efefef; }
.products_box:hover {text-decoration: none;}
.products_box:first-child{margin-left: 0; }
.products_box_more{position:absolute; top: 20px; right: 22px; width: 37px; height: 37px; background: url('../images/sub/products_bt_img.png') center center no-repeat; z-index:15;}

.products_img>img{ z-index:10; }

.products_img{width:100%; height: 300px; border: 1px solid #ccc;   box-sizing:border-box; overflow: hidden;}
.products_title{font-weight: 700; color: #353535; font-size:20px; border-bottom: 1px solid #353535; padding: 13px 0; }
.products_text{font-weight: 400; color: #6e6e6e; font-size:15px;  padding: 13px 0; }

.hydraulic_box:after{display: block;content: "";clear: both;}
.hydraulic_box>div{}
.hydraulic_img_wrap{width: 100%; margin-bottom: 30px; }
.hydraulic_img_wrap:after{display: block;content: "";clear: both;}
.hydraulic_img_wrap>div{float: left;overflow:hidden; border: 1px solid #ccc; box-sizing: border-box;}
.hydraulic_img1{ width: 50%;border-right: 1px solid #ccc;  }
.hydraulic_img2{ width: 50%; margin-left: -1px;}
.hydraulic_table{width:100%;}
.hydraulic_table>table{width: 100%; }
.hydraulic_table>table th{border: 1px solid #ccc; padding: 15px; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 16px; color: #353535;}
.hydraulic_table>table td{border: 1px solid #ccc; padding: 15px 0 15px 30px; font-weight: 400;  font-size: 14px; color: #666; }
.pro_title_all{ font-size: 23px; color: #2c2c2c; font-weight: 400; margin-bottom: 30px;}
.pro_title_all>span{display: inline-block; width: 5px; height: 18px; background: #116e3b; margin-right: 7px; }

.hydraulic-tools_box:after{display: block;content: "";clear: both;}
.hydraulic-tools_box>div{}
.hydraulic-tools_img_wrap{width: 100%; }
.hydraulic-tools_img_wrap:after{display: block;content: "";clear: both;}
.hydraulic-tools_img_wrap>div{ border: 1px solid #ccc; box-sizing: border-box;}
.hydraulic-tools_img1{ width: 100%; border-right: 1px solid #ccc; margin-bottom: 30px;  }
.hydraulic-tools_table{width:100%;}
.hydraulic-tools_table>table{width: 100%; }
.hydraulic-tools_table>table th{border: 1px solid #ccc; padding: 10px; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.hydraulic-tools_table>table td{border: 1px solid #ccc; padding: 10px 0 10px 30px; font-weight: 400;  font-size: 14px; color: #666; }

.hy_box:after{display: block;content: "";clear: both;}
.hy_box>div{width: 100%; height:auto;}
.hy_box>div:first-child{margin-left: 0; }
.hy_box_img{width: 100%; border: 1px solid #ccc; overflow: hidden; margin-bottom: 20px;}
.hy_box1 {margin-bottom: 50px;}
.hy_box1>table{width: 100%;}
.hy_box1>table th{ border:1px solid #ccc; text-align: center; padding: 10px; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.hy_box1>table td{ border:1px solid #ccc;  text-align: center; padding: 10px; font-weight: 400;  font-size: 13px; color: #666;}

.hydraulic-tools_table2{width:100%;}
.hydraulic-tools_table2>table{width: 100%; }
.hydraulic-tools_table2>table th{border: 1px solid #ccc; padding: 21px; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.hydraulic-tools_table2>table td{border: 1px solid #ccc; padding: 22px 0 21px 30px; font-weight: 400;  font-size: 14px; color: #666; }

.hy2_box:after{display: block;content: "";clear: both;}
.hy2_box>div{ width:100%; height:auto; }
.hy2_box>div:first-child{margin-left: 0; }
.hy2_box_img{width:100%; border: 1px solid #ccc; overflow: hidden; margin-bottom: 20px;}
.hy2_box1>table{width: 100%; margin-bottom: 30px;}
.hy2_box1>table th{ border:1px solid #ccc; text-align: center; padding: 10px; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.hy2_box1>table td{ border:1px solid #ccc;  text-align: center; padding: 10px; font-weight: 400;  font-size: 13px; color: #666;}

.punching_box:after{display: block;content: "";clear: both;}
.punching_box>div{ width:100%; height:auto; }
.punching_box>div:first-child{margin-left: 0; }
.punching_box_img{width:100%; border: 1px solid #ccc; overflow: hidden; margin-bottom: 20px;}
.punching_box1>table{width: 100%; margin-bottom: 30px;}
.punching_box1>table th{ border:1px solid #ccc; text-align: center; padding: 10px; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.punching_box1>table td{ border:1px solid #ccc;  text-align: center; padding: 10px; font-weight: 400;  font-size: 13px; color: #666;}

.cutting_box:after{display: block;content: "";clear: both;}
.cutting_box>div{}
.cutting_img_wrap{width: 100%; }
.cutting_img_wrap:after{display: block;content: "";clear: both;}
.cutting_img_wrap>div{width: 50%;float:left; overflow:hidden; border: 1px solid #ccc; box-sizing: border-box;}
.cutting_img1{ width: 100%; border-right: 1px solid #ccc;  }
.cutting_img2{ width: 100%;margin-left: -1px;}
.cutting_table{width:100%; margin-top: 20px;}
.cutting_table>table{width: 100%; margin-bottom: 30px;}
.cutting_table>table th{border: 1px solid #ccc; padding: 21px 0 20px 0; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 16px; color: #353535;}
.cutting_table>table td{border: 1px solid #ccc; padding:21px 0 20px 20px; font-weight: 400;  font-size: 14px; color: #666; }

.cutting2_box:after{display: block;content: "";clear: both;}
.cutting2_box>div{ width: 100%; height:auto; }
.cutting2_box>div:first-child{margin-left: 0; }
.cutting2_box_img{width: 100%; border: 1px solid #ccc; overflow: hidden; margin-bottom: 20px;}
.cutting2_box1>table{width: 100%; margin-bottom: 30px;}
.cutting2_box1>table th{ border:1px solid #ccc; text-align: center; padding: 10px; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.cutting2_box1>table td{ border:1px solid #ccc;  text-align: center; padding: 10px; font-weight: 400;  font-size: 13px; color: #666;}

.cutting3_box:after{display: block;content: "";clear: both;}
.cutting3_box>div{}
.cutting3_img_wrap{width: 100%;  overflow:hidden; border: 1px solid #ccc; box-sizing: border-box;}
.cutting3_table{width: 100%; }
.cutting3_table>table{width: 100%; margin-bottom: 30px; }
.cutting3_table>table th{border: 1px solid #ccc; padding: 12px 0 12px 0; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 16px; color: #353535;}
.cutting3_table>table td{border: 1px solid #ccc; padding:12px 0 12px 20px; font-weight: 400;  font-size: 14px; color: #666; }

.cutting4_box:after{display: block;content: "";clear: both;}
.cutting4_box>div{ width: 100%; height:auto;  }
.cutting4_box>div:first-child{margin-left: 0; }
.cutting4_box_img{width: 100%; border: 1px solid #ccc; overflow: hidden; margin-bottom: 20px;}
.cutting4_box1>table{width: 100%; margin-bottom: 30px;}
.cutting4_box1>table th{ border:1px solid #ccc; text-align: center; padding: 10px; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.cutting4_box1>table td{ border:1px solid #ccc;  text-align: center; padding: 10px; font-weight: 400;  font-size: 13px; color: #666;}

.pipe_box:after{display: block;content: "";clear: both;}
.pipe_box>div{float: left;}
.pipe_img_wrap{width: 100%; }
.pipe_img_wrap:after{display: block;content: "";clear: both;}
.pipe_img_wrap>div{width: 50%; float: left; overflow:hidden; border: 1px solid #ccc; box-sizing: border-box;}
.pipe_img1{ width: 50%;  border-right: 1px solid #ccc;  }
.pipe_img2{ width: 50%; margin-left: -1px;}
.pipe_table{width:100%;}
.pipe_table>table{width: 100%; margin: 20px 0 0px 0; }
.pipe_table>table th{border: 1px solid #ccc; padding: 15px; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 16px; color: #353535;}
.pipe_table>table td{border: 1px solid #ccc; padding: 15px 0 15px 30px; font-weight: 400;  font-size: 14px; color: #666; }

.pipe2_box:after{display: block;content: "";clear: both;}
.pipe2_box>div{float: left;}
.pipe2_img_wrap{width: 100%;}
.pipe2_img_wrap:after{display: block;content: "";clear: both;}
.pipe2_img_wrap>div{float: left;overflow:hidden; border: 1px solid #ccc; box-sizing: border-box;}
.pipe2_img1{ width: 50%; border-right: 1px solid #ccc;  }
.pipe2_img2{ width: 50%; margin-left: -1px;}
.pipe2_table{width:100%;}
.pipe2_table>table{width: 100%; margin: 20px 0 0px 0;}
.pipe2_table>table th{border: 1px solid #ccc; padding: 15px; text-align: center; background: #ebebeb; font-weight: 700;  font-size: 16px; color: #353535;}
.pipe2_table>table td{border: 1px solid #ccc; padding: 15px 15px 15px 30px; font-weight: 400;  font-size: 14px; color: #666; }

.accessories_box:after{display: block;content: "";clear: both;}
.accessories_box>div{width: 100%; height:auto;}
.accessories_box>div:first-child{margin-left: 0; }
.accessories_box_img{width: 100%;border: 1px solid #ccc; overflow: hidden; margin-bottom: 20px;}
.accessories_box1>table{width: 100%; margin-bottom: 30px;}
.accessories_box1>table th{ border:1px solid #ccc; text-align: center; padding: 10px; background: #ebebeb; font-weight: 700;  font-size: 14px; color: #353535;}
.accessories_box1>table td{ border:1px solid #ccc;  text-align: center; padding: 10px; font-weight: 400;  font-size: 13px; color: #666;}