@charset "utf-8";

/*서브비주얼*/
#subVisual{ width:100%; height:300px;position:relative; }
#subVisual .svisual {width:100%; height:300px;}
#subVisual .bg1 {background:url("/img/sub/subVisual01.jpg") no-repeat center top;}
#subVisual .bg2 {background:url("/img/sub/subVisual02.jpg") no-repeat center top;}
#subVisual .bg3 {background:url("/img/sub/subVisual03.jpg") no-repeat center top;}
#subVisual .bg4 {background:url("/img/sub/subVisual04.jpg") no-repeat center top;}
#subVisual .bg5 {background:url("/img/sub/subVisual05.jpg") no-repeat center top;}
#subVisual .visu_sgarea{letter-spacing:-0.03em; position:relative; padding-top:48px; text-align:center; filter:alpha(opacity=0); opacity:0;}
#subVisual .visu_sgarea .copy1{margin-top:35px; font-size:28px; color:#fff;   text-shadow:1px 1px 3px rgba(0,0,0,0.3);}
#subVisual .visu_sgarea .copy2{color:#fff; font-size:18px; margin-top:2px; text-shadow:1px 1px 3px rgba(0,0,0,0.3);}
#subVisual .visu_sgarea .copy3{color:#fff; font-size:16px; height:50px; background:url("/img/main/vsl_txt_bg.png") no-repeat center top; margin-top:10px; padding-top:10px; text-shadow:1px 1px 3px rgba(0,0,0,0.3);}

@media only screen and (max-width:767px){
	#subVisual .visu_sgarea .copy1{font-size:20px;}
	#subVisual .visu_sgarea .copy2{font-size:15px;}
	#subVisual .visu_sgarea .copy3{font-size:14px;}
}

/*서브페이지 메뉴 */
.sub_gnb_box{width:100%; overflow:hidden; position:absolute; margin-top:-50px; z-index:99;}
.sub_gnb {width:100%; max-width:1200px; margin:0 auto 0;}
.sub_gnb .gnb{ font-size:0; position:relative; height:50px;}
.sub_gnb .gnb .mu_1 li{width:15%;}
.sub_gnb .gnb .mu_2 li{width:15%;}
.sub_gnb .gnb .mu_3 li{width:20%;}
.sub_gnb .gnb .mu_4 li{width:20%;}
.sub_gnb .gnb .mu_5 li{width:15%;}
.sub_gnb .gnb .dp2 {margin:0 auto; text-align:center;}
.sub_gnb .gnb .dp2 li{ display:inline-block; *display:inline; zoom:1; vertical-align:bottom; position:relative;}
.sub_gnb .gnb .dp2 li a{ display:block; background:#b5110b; padding:0 20px; font-size:16px; line-height:50px; color: #fff; letter-spacing:-0.03em;  -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; }
.sub_gnb .gnb .dp2 li:after { content:""; display:block; width: 1px; height: 100%; background:#c75254; position: absolute; top:0; right: 0; }
.sub_gnb .gnb .dp2 li:last-child:after {width:0;}
.sub_gnb .gnb .dp2 li:hover > a {background:#940702; color: #fff;}
.sub_gnb .gnb .dp2 li.on a{background:#fff; color: #333;}

@media screen and (max-width:960px) {
	.sub_gnb .gnb .mu_2 li{width:25%;}
	.sub_gnb .gnb .dp2 li a{padding:0 10px;}
}

@media screen and (max-width:650px) {
	.sub_gnb .gnb .mu_1 li{width:33.333%;}
    .sub_gnb .gnb .mu_3 li{width:50%;}
	.sub_gnb .gnb .mu_4 li{width:50%;}
	.sub_gnb .gnb .mu_5 li{width:50%;}
	.sub_gnb .gnb .dp2 li a{font-size:14px; padding:0;}
}

/* 박스 */
.SubBax {width:100%;}
.SubBax h2{color:#444; font-size:18px; line-height:20px; font-weight:600; letter-spacing:-0.01em;}
.SubBax p{color:#444;font-size:14px; line-height:16px; letter-spacing:-0.01em;}
.SubBax span{font-size:14px; color:444; line-height:25px; letter-spacing:-0.01em;}

/*주요 타이틀 */
.headLine {background:url("/img/sub/line_bg.png") 0 50% repeat-x; display: block; margin:0 0 20px 0; }
.headLine h2 {background-color:#fff;display: inline; padding:0 10px 0 0; color:#000; font-size:23px; letter-spacing:-0.01em;}

/* 1-1 인사말 */
.greeting {width:100%; overflow:hidden; letter-spacing:-0.03em;}
.greeting .left {width:55%; float:left;}
.greeting .right{width:45%; float:left; padding-left:60px;}
.greeting .right img {width:100%;}

.greeting .left .txt {width:100%; overflow:hidden; position:relative;}
.greeting .left .txt h2 { font-size:25px; color:#000; margin-bottom:11px;}
.greeting .left .txt span { font-size:18px; color:#000;}
.greeting .left .txt .span_box {color:#666; line-height:24px; font-size:14px; margin-top:25px}
.greeting .left .txt .ceo {text-align:right; margin-top:15px; font-size:16px; color:#333; margin:10px 0 25px 0;}
.greeting .left .txt .ceo span{font-size:33px; color:#000; font-family: 'DoKdo';}

@media only screen and (max-width: 960px){
  /* 1-1 인사말 */
    .greeting .left {width:100%; float:none;}
	.greeting .right {width:100%; float:none; margin-top:30px; padding-left:0;}
}

@media only screen and (max-width: 768px){
    /* 1-1 인사말 */
	.greeting .left .txt h2 { font-size:18px; margin-bottom:8px;}
    .greeting .left .txt span { font-size:15px; line-height:16px;}
	.greeting .left .txt .span_box {margin-top:20px}
	.greeting .left .txt .ceo{font-size:14px;}
    .greeting .left .txt .ceo span{font-size:25px;}
}

/* 1회사소개-2개요 */
.txt_box { width:55%; height:75px; font-size:17px; color:#444; padding-top:35px; line-height:27px; letter-spacing:-0.03em;}
.company { background:#f5f5f5; position:relative; padding:30px; margin-top: 40px;}

.company p{ background:url("/img/sub/txt_icon2.png")no-repeat 0 8px; font-size:14px; color:#666; padding-left:13px; clear:both; line-height:100%; margin-bottom:10px;}
.company p span{font-size:16px; color:#333;}
.company .img { position:absolute; right:30px ; top:-100px;}
.company .img img { width:100%; max-width:410px;  }

table.com {width:55%; color:#666; border-collapse:separate; border-spacing:0; border:none; font-size:15px; letter-spacing:-0.03em;}
table.com th {height:1px; background-color:#ccc;}
table.com td:last-child {border-right:1px solid #ccc;}
table.com th:last-child {border-right:1px solid #ccc;}
table.com td {padding:10px 15px; border:#ccc 1px solid; border-top:none; border-right:none;}
.comTd_bg2 {background-color: #666; width:20%; color:#fff;}

@media screen and ( max-width:1100px){
/* 1회사소개-2개요 */
    .txt_box { width:100%; margin-bottom:10px; padding-top:0; font-size:14px;}
	.company { padding:39px 29px; margin:0 0 0 0; }
	.company h3:before { display:none;}
	.company h3 { font-size:20px; margin:0 0 44px 0; line-height:1.4;}
	.company .img { position:relative; right:0; top:0; margin:40px 0 0 0; }

	table.com {width:100%; font-size:14px;}
}	

@media screen and ( max-width:650px){	
/* 1회사소개-2개요 */
    .txt_box {margin-bottom:20px;}
	.company { padding:39px 29px; margin:0;}
	.company h3 { font-size:18px; margin:0 0 22px 0; }
	.company p {font-size:13px;}
	.company p span{font-size:14px; color:#333;}
	
	table.com {font-size:13px;}
	table.com td {padding:10px 5px;}
    .comTd_bg2 {width:25%;}
}

/* 오시는 길 */
.map_wrap {width:100%; overflow:hidden; position:relative;}
.map_wrap .left_map {float:left; width:49%; height:350px; margin-right:20px;}
.map_wrap .left_map > *{ width:100% !important}

.map_wrap .right_roadview{float:right; width:49%; height:350px;}
.map_wrap .right_roadview object,
.map_wrap .right_roadview embed {width:100% !important}

.map_table {width:100%; font-size:15px;}
.map_table thead {background:#f1f1f1;}
.map_table.thborder1 tbody th {background:#f1f1f1;}
.map_table th {padding:15px 0; font-size:15px; font-weight:500; color:#333;}
.map_table.thborder1 tbody tr:first-of-type th {border-top:3px solid #b5110b;}
.map_table.thborder1 tbody tr:first-of-type td:nth-child(2) {border-top:3px solid #666;}
.map_table tbody td {color:#666; font-size:14px;}
.map_table tbody td, .map_table tbody th {border-bottom:1px solid #b1b1b1; border-right:1px solid #b1b1b1; padding:15px;}
.map_table tbody td:last-of-type {border-right:none;}
.map_table tbody td ul {margin:0;}
.map_table tbody td ul li {margin:5px 0;}

@media only screen and (max-width: 1100px){
	/* 오시는 길 */
   .map_wrap .left_map {width:100%; margin-right:0;}
   .map_wrap .left_map iframe,
   .map_wrap .right_roadview iframe {width:100%;}
   .map_wrap .right_roadview{width:100%; margin-top:20px;}
   .map_wrap .right_roadview{display:none;}
 }

/* 제품소개 1, 작업유지 시스템 */
.pro_machin1{width:100%; overflow:hidden; position:relative; margin-top:40px; letter-spacing:-0.03em;}
.pro_machin1 h2 {background: url("/img/sub/txt_icon1.png") 0 5px no-repeat; font-size:26px; font-family:notokrB; line-height:24px; color:#000; padding-left:25px; margin-bottom:25px; clear:both;}
.pro_machin1 h2 span{font-size:22px;}
.pro_machin1 ul{margin:0 0 -30px -3%; overflow:hidden;}
.pro_machin1 ul li{float:left; width: calc(33.333% - 3%); margin:0 0 30px 3%; position: relative; overflow:hidden;  padding:20px 30px; border:1px solid #ddd;}
.pro_machin1 ul li img{width:100%;}

.pro_machin2{width:100%; overflow:hidden; position:relative; margin-top:40px; letter-spacing:-0.03em;}
.pro_machin2 h2 {background: url("/img/sub/txt_icon1.png") 0 5px no-repeat; font-size:26px; font-family:notokrB; line-height:24px; color:#000; padding-left:25px; margin-bottom:25px; clear:both;}
.pro_machin2 h2 span{font-size:22px;}
.pro_machin2 ul{margin:0 0 -30px -3%; overflow:hidden;}
.pro_machin2 ul li{float:left; width: calc(33.333% - 3%); margin:0 0 30px 3%; position: relative; overflow:hidden; border:1px solid #ddd;}
.pro_machin2 ul li img{width:100%;}

.pro_machin3{width:100%; overflow:hidden; position:relative; margin-top:40px; letter-spacing:-0.03em;}
.pro_machin3 h2 {background: url("/img/sub/txt_icon1.png") 0 5px no-repeat; font-size:26px; font-family:notokrB; line-height:24px; color:#000; padding-left:25px; margin-bottom:25px; clear:both;}
.pro_machin3 h2 span{font-size:22px;}
.pro_machin3 ul{margin:0 0 -30px -3%; overflow:hidden;}
.pro_machin3 ul li{float:left; width: calc(50% - 3%); margin:0 0 30px 3%; position: relative; overflow:hidden; }
.pro_machin3 ul li .title{width:100%; border-bottom:2px solid #ddd; color:#444; padding-bottom:10px; text-align:center; font-size:20px; margin-bottom:25px}
.pro_machin3 ul li .img{width:100%; border:1px solid #ddd; position: relative; overflow:hidden; padding-bottom: 20px;}
.pro_machin3 ul li .img img{width:100%;}

.pro_machin4{width:100%; overflow:hidden; position:relative; margin-top:40px; letter-spacing:-0.03em;}
.pro_machin4 h2 {background: url("/img/sub/txt_icon1.png") 0 5px no-repeat; font-size:26px; font-family:notokrB; line-height:24px; color:#000; padding-left:25px; margin-bottom:25px; clear:both;}
.pro_machin4 h2 span{font-size:22px;}
.pro_machin4 ul {margin:0 0 -30px -2%; overflow:hidden;}
.pro_machin4 ul li{float:left; width: calc(25% - 2%); margin:0 0 30px 2%; position: relative; overflow:hidden; border:1px solid #ddd;}
.pro_machin4 ul li .img img{width:100%;}

.pro_machin5{width:100%; overflow:hidden; position:relative; margin-top:40px; letter-spacing:-0.03em;}
.pro_machin5 h2 {background: url("/img/sub/txt_icon1.png") 0 5px no-repeat; font-size:26px; font-family:notokrB; line-height:24px; color:#000; padding-left:25px; margin-bottom:25px; clear:both;}
.pro_machin5 h2 span{font-size:22px;}
.pro_machin5 .img{width:100%; text-align:center;  background:#000;}

@media only screen and (max-width: 768px){
	/* 제품소개 1, 작업유지 시스템 */
	.pro_machin1 h2 {font-size:18px;}
    .pro_machin1 h2 span{font-size:14px;}
    .pro_machin1 ul li{float:left; width: calc(50% - 3%);}

	.pro_machin2 h2 {font-size:18px;}
    .pro_machin2 h2 span{font-size:14px;}
	.pro_machin2 ul li{width: calc(50% - 3%);}

	.pro_machin3 h2 {font-size:18px;}
    .pro_machin3 h2 span{font-size:14px;}
	.pro_machin3 ul li {float:none; width: calc(100% - 3%);}
	.pro_machin3 ul li .title{font-size:16px;}

	.pro_machin4 h2 {font-size:18px;}
    .pro_machin4 h2 span{font-size:14px;}
	.pro_machin4 ul li{float:left; width: calc(50% - 2%);}

	.pro_machin5 h2 {font-size:18px;}
    .pro_machin5 h2 span{font-size:14px;}
	.pro_machin5 .img img{width:100%;}
 }


/* 제품소개 2, 하인북척 */
.pro_hain1{width:100%; overflow:hidden; position:relative;}
.pro_hain1 img{width:100%;}

.pro_hain2{width:100%; overflow:hidden; position:relative; margin-top:40px;}
.pro_hain2 ul{margin:0 0 -30px -2%; overflow:hidden;}
.pro_hain2 ul li{float:left; width: calc(25% - 2%); margin:0 0 30px 2%; position: relative; overflow:hidden;  border:1px solid #ddd;}
.pro_hain2 ul li img{width:100%;}
.pro_hain2 ul li .tit{width:100%; height:70px; overflow:hidden; color:#fff; background:#b5110b; padding:10px 10px; line-height:16px;}
.pro_hain2 ul li .tit p{font-size:16px; margin-bottom:3px;}
.pro_hain2 ul li .tit span{font-size:13px; }

.pro_hain3{width:100%; overflow:hidden; position:relative; margin-top:40px;}
.pro_hain3 ul{margin:0 0 -30px -2%; overflow:hidden;}
.pro_hain3 ul li{float:left; width: calc(25% - 2%); margin:0 0 30px 2%; position: relative; overflow:hidden;  border:1px solid #ddd;}
.pro_hain3 ul li img{width:100%;}

@media only screen and (max-width: 960px){
	/* 제품소개 1, 하인북척 */
   .pro_hain2 ul li{width: calc(33.333% - 2%);}
   .pro_hain3 ul li{width: calc(33.333% - 2%);}
 }

 @media only screen and (max-width: 650px){
	/* 제품소개 1, 하인북척 */
   .pro_hain2 ul li{width: calc(50% - 2%);}
   .pro_hain2 ul li .tit{height:35px; font-size:14px;}
   .pro_hain2 ul li .tit span{display:none;}
   .pro_hain3 ul li{width: calc(50% - 2%);}
 }

 /* 제품소개 3, 지그픽쳐 */


 /* 제품소개 4, 기계 및 공구 */
.pro_eng1{width:100%; overflow:hidden; position:relative; letter-spacing:-0.03em;}
.pro_eng1 .left {float:left; width:50%; margin-bottom:30px;}
.pro_eng1 .left h2 {background: url("/img/sub/txt_icon1.png") 0 4px no-repeat; font-size:20px; line-height:24px; color:#000; padding-left:25px; margin-bottom:25px; clear:both;}
.pro_eng1 .left p {font-size:16px; line-height:24px; color:#333; margin-bottom:5px; clear:both;}
.pro_eng1 .left ul{margin-bottom:30px;}
.pro_eng1 .left ul li{ font-size:14px; color:#666; line-height:20px; background:url("/img/sub/txt_icon2.png") no-repeat left 8px; padding-left:10px; margin-bottom:6px;}
.pro_eng1 .right {float:right; width:45%; margin-bottom:30px; background:#f9f9f9; text-align:center;}

.pro_eng2 {width:100%; overflow:hidden; position:relative;}
.pro_eng2 ul{margin:0 0 -30px -3%; overflow:hidden;}
.pro_eng2 ul li{float:left; width: calc(50% - 3%); margin:0 0 30px 3%; position: relative; overflow:hidden;  border:1px solid #ddd;}
.pro_eng2 ul li img{width:100%;}

@media only screen and (max-width: 768px){
	/* 제품소개 4, 기계 및 공구 */
   .pro_eng1 .left, .pro_eng1 .right{float:none; width:100%;}
   .pro_eng2 ul li{float:none; width: calc(100% - 4%); }
 }

 


/* 회원약관 */
.font_b {font-size:16px; color:#000;}
.font_mtit {font-size:15px; color:#000; margin-bottom:5px;}
.font_stxt {font-size:13px; color:#777;}

@media screen and (max-width:767px) { 
	/* 회원약관 */
	.font_b {font-size:15px;}
	.font_mtit {font-size:14px;}
	.font_stxt {font-size:12px;}
}

/* 페이지 준비중 */
.page_perpare {text-align:center;}

@media (max-width:768px){
.page_perpare img {width:100%; padding:0 0 10px 0}
}
/* 박스 */
.SubBax {width:100%;}
.SubBax h2{color:#444; font-size:18px; line-height:20px; font-weight:600; letter-spacing:-0.01em; font-family:notokrM;}
.SubBax p{color:#444;font-size:14px; line-height:16px; letter-spacing:-0.01em;}
.SubBax span{font-size:13.5px; color:444; line-height:25px; letter-spacing:-0.01em;}

/* 1-1 인사말 */
.greeting{ width:100%; overflow:hidden; letter-spacing:-0.03em;}
.greeting .ceo_img{ float:left; width:40%;}
.greeting .ceo_img img{width:100%; }

.greeting .ceo_txt{ float:left; width:60%; padding-left:60px;}
.greeting .ceo_txt h2 { display: inline-block; font-size:18px; line-height:35px; color:#c34b15; letter-spacing:-0.04em;}
.greeting .ceo_txt .ceo_cnt {width:100%;  overflow:hidden; margin-top:20px; }
.greeting .ceo_txt span { font-size:15px; color:#666; line-height:26px;}
.greeting .ceo_txt p {text-align:right; margin-top:20px; font-size:15px; color:#666;}
.greeting .ceo_txt p span{font-size:30px; color:#000; font-family: 'DoKdo'; padding-left:10px; letter-spacing:-0.01em;}

/* 개요 */
.com_info {width:100%; overflow:hidden;}
.com_info h2 {background:url("/img/sub/t_icon1.png") no-repeat 0 5px; padding-left:22px; color:#000; line-height:24px; font-size:20px; margin:50px 0 15px 0;}
.com_info .com_left {width:50%; float:left; padding-right:50px;}
.com_info .com_right{width:50%; float:left;}
.com_info .com_right img{ width:100%; float:right;}

.infoTable {width:100%; font-size:15px;}
.infoTable tbody th {width:20%; text-align:left; padding-left:20px; background:#fafafa; font-size:14px; color:#333; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.infoTable tbody tr:first-of-type th {border-top:2px solid #ddd;}
.infoTable tbody tr:first-of-type td:nth-child(2) {border-top:2px solid #ddd;}
.infoTable tbody td {border-bottom:1px solid #ddd; padding:15px; color:#666; font-size:14px; border-right:1px solid #ddd;}
.infoTable tbody td:hover {background:#fafafa;}

@media (max-width:960px){
	/* 회사소개-인사말 */
	.greeting .ceo_img,
    .greeting .ceo_txt{float:none; width:100%; padding:0;}
	.greeting .ceo_txt{margin-top:40px;}
    
	.com_info .com_left{float:none;width:100%;padding:0;}
	.com_info .com_right{display:none}
	.infoTable tbody th {width:25%; padding:10px;}
	.infoTable tbody td {padding:10px;}
}

@media (max-width:767px){
	/* 회사소개-인사말 */
	   .greeting .ceo_txt h2 { font-size:20px; line-height:28px;}
}

 @media (max-width:650px){
	 /* 회사소개-인사말 */
	   .greeting .ceo_txt h2 { font-size:17px; line-height:28px;}
	   .greeting .ceo_txt span { font-size:14px; line-height:22px;}  
	   .greeting .ceo_txt p {margin-top:10px; font-size:14px;}
	   .greeting .ceo_txt p span{font-size:28px;}

	   .com_info h2 {font-size:18px;}
 }

/* 회사소개-기업정신 */
.com_mind { width:100%; overflow:hidden; position:relative; text-align:center; letter-spacing:-0.03em;}
.com_mind .title {width:65%; height:60px;  overflow:hidden; position:relative; display:table; margin:0 auto 30px auto}
.com_mind .title h2{font-size:20px; line-height:60px; color:#333;}
.com_mind .title:before { content:""; display:block; width:45px; height:100%; box-sizing:border-box; border:10px solid #e2e2e2; border-right:none; position:absolute; top:0; left:0; }
.com_mind .title:after { content:""; display:block; width:45px; height:100%; box-sizing:border-box; border:10px solid #e2e2e2; border-left:none; position:absolute; top:0; right:0; }

@media (max-width:1100px){
	/* 회사소개-기업정신 */
	.com_mind .title {width:100%;}
}

@media (max-width:767px){
	  /* 회사소개-기업정신 */
      .com_mind .title h2{font-size:16px; line-height:22px;}
      .com_mind .title {height:70px; padding-top:15px;}
	  .com_mind .title:before {width:30px; border:7px solid #e2e2e2; border-right:none;}
      .com_mind .title:after {width:30px;border:7px solid #e2e2e2; border-left:none;}
	  .com_mind img{ width:100%;}
}