/**
* 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:#fff}
.logo{padding:20px 20px}
.mobile_btn {float:right;position:relative;width:34px;height:34px;background-color:#000;border:0px solid #2f2f2f;margin:15px 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 {width:100%; text-align:center;padding-bottom:5px;background:#fff; 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: "nanum_EB", sans-serif}
.call img{max-width:5%}
.call a{display:block;border-radius:6px;background:#000;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:11px;color:#8e8e8e;line-height:18px; padding:0 15px; word-break: keep-all;}
.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%}

/* -------------------------------------------------------------------
| 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;
}

.box1_all{font-size: 0;}
.box1_all>a{display:inline-block; width:33.3%;}
.box1_all>a:nth-child(2){width:33.4%;}
.box1_all>a>img{width: 100%;}

.box2{display:inline-block; width:100%; margin:3px 0;}
.box2>img{width: 100%;}
.box3{display:inline-block; width:100%;}
.box3>img{width: 100%;}

.main_map{width:100%; height:230px; padding:0 20px;background: #535353;}
/* -------------------------------------------------------------------
| Body section
|
| 테마내에 일반적인 컨텐츠들의 속성을 정의합니다.
| ------------------------------------------------------------------*/
/* warp */
#wrap {}
/* 서브 레이아웃 */
#sub_top_area_wrap{width:100%; }
.sub_top_area{position:relative;margin:0 auto;text-align:center;color:#fff; padding: 12% 0;}
.sub_top_area_t{font-size:18px;font-family: "NanumSquare_B", sans-serif; line-height:30px;}
.sub_top_area_t2{font-size:12px;font-family: "NanumSquare", sans-serif}
.sub_article{position:relative;width:1300px;margin:0 auto;padding-bottom:50px;border-bottom:1px solid #151314}
.title{text-align:center;margin:10px 0 20px;border-bottom:1px dashed #494949;}
.sub_title{color:#342b2a;font-size:20px;letter-spacing:0.5px;font-family: "NotoSans-Medium", sans-serif}
.contents{padding:0 15px 30px;}



.sub_info{position:relative;font-size:15px;color:#666;line-height:35px;text-align:center}
.sub_txt1{font-size:25px;color:#333;font-family: "NotoSans-Bold", sans-serif}
.sub_txt2{font-size:25px;color:#0152a2;font-family: "NotoSans-Bold", sans-serif}
.sub_txt3{font-size:20px;color:#333;font-family: "NotoSans-Medium", sans-serif}

.sub_left{float:left;width:600px;padding-left:100px}
.sub_left img{float:right;margin-right:20px}
.sub_right{float:right;width:466px;margin-right:100px}

/* 카테고리 */
.about_wrap{ position: relative; *zoom:1;}
.about_wrap:after{display: block;content: "";clear: both;}
.about_wrap .about_text{ font-size:15px; font-family: 'nanum-square-r', sans-serif;color:#3c3c3c; line-height:30px; text-align: center; }
.about_wrap .about_text img{width:75%; margin: 10% 0;}

.about_text_b{ font-size:20px; font-family: 'nanum-square-b', sans-serif;color:#0054a7; }
.about_text_n{font-size:18px; font-family: 'BarunGothic_EB', sans-serif;color:#333; margin: 2% 0 10% 0; padding-bottom: 5%;border-bottom:1px solid #ccc; }
.about_text_n2{font-size:25px; font-family: 'BarunGothic_EB', sans-serif;color:#333; margin:10% 0 5% 0; text-align: center; }


.history_wrap .history{ width: 200px; height: 200px;  border-radius: 50%;  text-align: center; margin: 0 auto; }
.history1{ border:10px solid #0054a7; background: #fff; font-size:32px; font-family: 'nanum-square-b', sans-serif; color: #424141;line-height:185px;}
.history2{ background: #0054a7; font-size:32px; font-family: 'nanum-square-b', sans-serif; color: #fff; line-height:200px;}
.history_text{padding:10% 0 10% 25%; font-size:13px; font-family: 'nanum-square-r', sans-serif; color: #000; line-height:25px;}

.chart_wrap{ position: relative; width: 1200px; height: 455px;  }
.chart_1{position: absolute; top:0; left:485px; width: 230px; height: 65px; background: #01395c; font-size:20px; font-family: 'nanum-square-b', sans-serif; color: #fff; line-height: 65px; text-align: center; z-index:10; border-radius: 30px;}
.chart_line1{position: absolute; top:10px; left:600px; width: 1px; height:330px; background: #ccc; z-index:8;}
.chart_line2{position: absolute; top:200px; left:600px; width:300px; height: 1px; background: #ccc;}
.chart_2{position: absolute; top:165px; left:716px; width: 230px; height: 65px; background: #0061a5; font-size:20px; font-family: 'nanum-square-r', sans-serif; color: #fff; line-height: 65px; text-align: center;  border-radius: 30px;}
.chart_line3{position: absolute; top:340px; left:72px; width:1055px; height: 1px; background: #ccc; }
.chart_3{ position:relative; top:390px; *zoom:1; z-index: 8;}
.chart_3:after{display: block;content: "";clear: both;}
.chart_3_1{ float: left; width:144px;  height: 65px; background: #008eec; margin-right: 32px; font-size:17px; font-family: 'nanum-square-r', sans-serif; color: #fff; line-height: 65px; text-align: center;border-radius: 30px; }
.chart_3_1:last-child{ margin-right: 0;}
.chart_4{ position:relative; top:276px; *zoom:1; z-index: 7;}
.chart_4:after{display: block;content: "";clear: both;}
.chart_line4{float: left; width: 1px; height:80px; background: #ccc;}
.chart_line4:nth-child(1){margin-left: 72px;}
.chart_line4:nth-child(2){margin-left: 175px;}
.chart_line4:nth-child(3){margin-left: 175px;}
.chart_line4:nth-child(4){margin-left: 175px;}
.chart_line4:nth-child(5){margin-left: 175px;}
.chart_line4:nth-child(6){margin-left: 175px;}
.chart_line4:nth-child(7){margin-left: 173px;}


.certification_img{ width: 100%;}
.certification_img img{ width: 100%; }
.delivery_title{ font-size: 15px; font-weight: 400; text-align: center; }

.location_wrap{text-align: center; }
.location_text{ display: inline-block; font-size: 17px;color:#666; vertical-align: middle; font-family: "nanum", sans-serif; margin: 5% 0; }
.location_con{display: inline-block;}
.location_con>img{width:80%;}
.location_icon_margin{ margin: 20px 0;}

.location_wrap h1 {text-align: center; color: #333; font-size: 22px; font-family: 'nanum-square-b', sans-serif; }




.product{width:100%; position: relative;display: inline-block;margin-top:30px;}
.product2{width:100%;position: relative;}
.product:nth-child(3){margin-right:0 !important;}
.product_img{width:100%;float:left;display: inline-block;}
.product_img img{width:100%;}
.product_info{width:100%;display: inline-block;}
.product_info22{ width:100%;display: inline-block;margin-top:10px !important;margin-bottom:20px;}
.product_t{float:left;width:100%;font-size: 15px;color:#333; font-weight: bold;}
.product_t2{float:left;width:100%;font-size: 15px;color:#555;}
.product_t22{float:left;width:100%;font-size: 15px;color:#555;}
.product_t3{font-size: 13px;}
.product_t4{font-size: 20px;color:#d01c25;font-family: "NotoSans-Bold", sans-serif;}
.product_t5{font-size: 20px;color:#333;border-bottom: 1px solid #ccc;line-height: 60px;}
.product_info2{width:100%;display:inline-block; border-bottom:1px solid #ededed; padding:15px 0px;}
.product_con{display: inline-block;width:100%;padding-bottom:20px;}
.pd_btn{width:180px;}
.pd_btn a{width:180px;height:40px;color:#fff;background: #0054a7;line-height: 36px;vertical-align: middle;text-align: center;display: inline-block;font-size: 15px;text-decoration: none;}
.pd_btn a:hover{color:#fff;background: #0054a7;opacity: 0.8;}
.pd_btn2 a{width:180px;height:40px;color:#fff;background: #0054a7;line-height: 36px;vertical-align: middle;text-align: center;display: inline-block;font-size: 15px;text-decoration: none;}
.pd_btn2 a:hover{color:#fff;background: #0054a7;opacity: 0.8;}
.pd_ing{width:100%;padding:50px 30px;background: #fff;vertical-align: middle;border:1px solid #eee;}
.product_con ul{width:100%;display: inline-block;margin-top:50px;border:1px solid #eee;padding:5%;}
.product_con li{float:left;width:22.5%;height:300px;margin-right:3%;margin-bottom:5%;text-align: center;line-height: 300px;vertical-align: middle;font-size: 17px;background: #f5f5f5;color:#aaa;}
.pd_tab{width:100%;position: relative;margin:20px auto 0;height:50px;}
.pd_tab a{text-decoration: none;color:#000;}
.pd_tab p a{float:left;width:33.33%;line-height: 50px;border:1px solid #eee;background: #fff;text-align: center;vertical-align: middle;font-size: 17px;color:#000;display: inline-block;}
.pd_tab p a:hover{background: #698089;color:#fff;border:1px solid #698089;font-family: "NotoSans-Medium", sans-serif;}
.pd_tab p.on a{background: #698089;border:1px solid #698089;color:#fff;font-family: "NotoSans-Medium", sans-serif;}
.product_top{border:1px solid #eee;width:100%; display: inline-block;padding:20px 20px;}
.product_top2{border:1px solid #eee;width:100%;padding:20px 20px;margin:20px auto 0;}
.board_t{color:red;text-align: center;}



.title_line{ width:30px; height:3px; background:#0054a7;margin-bottom:5px;}
.video_title{ font-size:18px; font-family: 'nanum-square-b', sans-serif; color: #353535; margin-bottom:15px; text-transform:uppercase;}

.abrasives_img:after{display: block;content: "";clear: both;}
.abrasives_img>div{width:100%;}
.abrasives_img>div>img{width:100%;}

.processing_img:after{display: block;content: "";clear: both;}
.processing_img>div{width: 100%;}
.processing_img>div>img{width: 100%;}


.processing_title1{font-family: 'Noto Sans KR', sans-serif; font-size:23px; font-weight: 400; color: #353535; margin:20px 0;}
.processing_title1>span{display: inline-block; width: 10px; height: 10px; background: #1d5b9e; margin:0 10px 5px 0;}

.img_title{font-family: 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 400px; color:#353535;  text-align: center; margin-top:15px; }

/* certi_wr 인증서 */
.certi_wr {display: flex; flex-wrap:wrap; text-align: center;}
.certi_wr li {width:calc(50% - 15px); margin-right:30px; position: relative; margin-bottom:30px;}
.certi_wr li img {width:100%; border:1px solid #eee;}
.certi_wr li:nth-child(even) {margin-right:0;}
.certi_wr li a {display: block; position: relative;}
.certi_wr li p {    font-size: 15px; font-family: 'nanum-square-r', sans-serif; color: #3c3c3c; margin-top:15px;}
.certi_wr li .cer_cover {width:100%; height:100%; position: absolute; left:0; top:0; transition: all .3s ease; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; opacity: 0; display: none;}
/* .certi_wr li .cer_cover span {font-size:40px; color:#fff;}
.certi_wr li a:hover .cer_cover {opacity: 1;} */