/**
* 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
|
| 테마의 헤더영역내의 속성을 정의합니다.
| ------------------------------------------------------------------*/
header{z-index: 10000;}
body{font-family: 'Noto Sans KR', sans-serif;}
#navitop_mobile {vertical-align:middle;  background:#2d2d2d; border-bottom: 1px solid #3f3f3f; }
.logo{padding:20px 20px}
.mobile_btn {float:right;position:relative;width:34px;height:34px;background-color:#000;border:0px solid #2f2f2f;margin:30px 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}

.navitop_line{width: 100%; }
.navitop_line:after{display: block;content: "";clear: both;}
.navitop_line1{float: left; width:50%; height: 10px; background: #0b51a1; }
.navitop_line2{float: left; width:50%; height: 10px; background: #7bc42f; }


.box1{ width: 100%; padding:40px 30px;  background: url('../images/common/box1_bg.png') -100px center  #f5f5f5 no-repeat; text-align: center; }
.box1_title{font-size: 23px; font-weight: 300; color: #03a761; line-height: 30px; letter-spacing: -1px; text-align: center;  word-break: keep-all;}
.box1_title>span{font-weight: 700; }
.box1_text{font-size: 15px; font-weight: 400; color: #454545; line-height:25px; letter-spacing: -1px; margin: 25px 0; text-align: center;  word-break: keep-all;}
.box1_more{display: inline-block; width: 235px; height: 65px; border: 1px solid #353535; font-size: 14px; font-weight: 400; color: #333; line-height: 65px; padding-left: 53px;  background: url('../images/common/box1_more.png') 158px 18px no-repeat; transition: all 0.3s; text-align: left; }
.box1_more:hover{color: #fff; text-decoration: none; background: url('../images/common/box1_more_ov.png') #333 158px 18px no-repeat;  }


.box2{  width: 100%; padding: 30px 20px 70px 20px; background:url('../images/common/box2_bg.png') center center #e5e6d9 no-repeat; }
.box2_title1{font-size: 30px; font-weight: 500; color: #444;  letter-spacing: -1px; text-align: center; word-break: keep-all; }
.box2_title2{font-size: 16px; font-weight: 400; color: #686868;  letter-spacing: -1px; text-align: center; margin-bottom: 35px; word-break: keep-all;}
.box2_all:after{display: block;content: "";clear: both;}
.box2_all>a{ display: inline-block; position: relative; width: 288px; height: 475px; box-sizing: border-box; }
.box2_1_ov{position: absolute; right: 0; bottom: 0; width: 270px; height: 455px; border: 4px solid #03a761; opacity: 0; transition: all 0.3s;}
.box2_text{position: absolute; bottom:0; right:0; width: 288px; height: 410px; background: #fff; }
.box2_1_img{position:absolute; top: 0; left: 0; width: 260px; height: 280px;overflow:hidden; box-shadow: 5px 5px 10px #999; }
.box2_1_img_over{position: absolute; width: 260px; height: 280px; background:url('../images/common/box2_more.png') rgba(0,0,0,0.5) center center no-repeat;  opacity: 0; transition: all 0.3s; }
.box2_text_all{position:absolute; bottom: 0; width: 288px; height: 195px; padding: 35px 0 0 40px;  }
.box2_text_t{font-size: 23px; font-weight: 500; color: #333; }
.box2_text_line{width: 30px; height: 1px; background: #333; margin:10px 0; }
.box2_con{font-size: 14px; font-weight: 400; color: #4c4c4c; letter-spacing: -1px; line-height: 20px; }
.box2_1:hover .box2_1_ov{opacity: 1; }
.box2_1:hover .box2_1_img_over{opacity: 1; }

.bx-controls{ position: relative; top:10px; }
.bx-pager{position: absolute; left: 50%; margin-left:-60px;}
.bx-pager:after{display: block;content: "";clear: both;}
.bx-pager>div{float: left; }
.bx-pager>div>a{text-indent:999px; font-size: 0; display: inline-block; width: 12px; height: 12px; background: #a1d3b5; margin-left: 15px; border-radius: 50%; }
.bx-pager>div>a.active{background: #03a761; }

.box3{width:100%; height:580px;  }
.box3_bg{width: 100%; height: 440px; background-image:url('../images/common/box3_bg.jpg'); background-repeat: no-repeat; background-position:center center; background-size: cover; text-align: center; }
.box3_wrap{width: 100%; margin: 0 auto; padding: 30px 10px 0 10px; }
.box3_title{font-size: 35px; font-weight: 500; color: #fff;  letter-spacing: -1px; text-align: center; }
.box3_text{font-size: 16px; font-weight: 400; color: #fff;  letter-spacing: -1px; text-align: center; margin: 0 0 20px 0; }
.notice_wrap{width:100%; height: 360px; background: #fff;  padding: 30px 15px 0 15px; }
.box3_more{display: inline-block; width: 200px; height: 60px; border: 1px solid #353535; font-size: 14px; font-weight: 400; color: #333; line-height: 60px; padding-left: 35px;  background: url('../images/common/box3_more.png') 140px 23px no-repeat; transition:all 0.3s; text-align:left;}
.box3_more:hover{background: url('../images/common/box3_more_ov.png') #333  140px 23px no-repeat; color: #fff; text-decoration: none; }


.news_con{display: inline-block; position:relative; width: 100%; height:70px; border-bottom: 1px solid #ccc;  transition: all 0.4s;  text-align: left;}
.news_more{display: inline-block; width: 30px; height: 30px; border: 2px solid #ccc; position: absolute; bottom:20px; right: 0; font-size: 16px; color: #cccccc; font-weight: 900; text-align:center; line-height: 26px; transition: all 0.4s;}
.news_con:after{display: block;content: "";clear: both;}
.news_con>div{float: left;}
.news_day{font-weight: 400; color: #989898; font-size: 13px; text-align:center; line-height: 2em; padding:10px 0 0 5px;}
.news_day>p{ font-size:30px; transition: all 0.4s;}
.news_text{width: 80%; font-family: "Noto Sans KR", sans-serif; font-weight: 300; color: #616161; font-size: 20px; padding-left:15px;  }
.news_text>p{ color: #000; font-size: 15px; padding-top: 20px; }
.news_text span{ font-weight: 400; color:#353535; font-size: 14px; letter-spacing: -0.8px;}
.news_text span:hover{text-decoration: none;  color: #959595;}
.news_con:first-child{border-bottom: 1px solid #03a761; }
.news_con:first-child .news_day1{color: #03a761; }
.news_con:first-child .news_more{ border: 2px solid #03a761; color: #fff; background:#03a761;  }
.news_con:hover { border-bottom: 1px solid #03a761;}
.news_con:hover .news_day1{color: #03a761; }
.news_con:hover .news_more{ border: 2px solid #03a761; color: #fff; background:#03a761;  }


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

.sns_link {display: flex; justify-content: center;}
.sns_link li {margin-right:15px;}
.sns_link li:last-child {margin-right:0;}
.sns_link a {font-size:35px; color:#989898;}



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






/* -------------------------------------------------------------------
| 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% 10%;}
.sub_top_area_t{font-size:23px;font-family: "NanumSquare_B", sans-serif; word-break: keep-all;}
.sub_top_area_tt{font-size:12px;font-family: "NanumSquare_B", sans-serif;}
.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 5px 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}


.greetings_wrap{width: 100%;  text-align: center; background: #f1f1f1; padding: 40px 20px 0 20px;}
.greetings_wrap>img{width:60%; margin-top: 20px; }
.greetings_title{font-size: 23px; color: #03a761; font-weight: 300; letter-spacing: -0.8px; line-height: 30px;  }
.greetings_title>span{font-weight: 700;}
.greetings_all{height: auto; font-size: 16px; color: #525252; font-weight: 300;  line-height: 30px; margin: 0 auto; text-align: center; padding: 30px 10px;  word-break:keep-all; }
.greetings_all>span{ font-weight: 500;  }
.greetings_text1{font-size:25px; color: #03a761; font-weight: 700; line-height: 40px;}
.greetings_text2{font-size:18px; color: #3c3c3c; font-weight: 700; margin-top:20px; }
.greetings_img>img{width:100%;  }


.history_wrap:after{display: block;content: "";clear: both;}
.history_title{font-size:35px; color: #222222; font-weight: 700; letter-spacing: -1.5px; text-align: center; margin-bottom: 30px; }
.history>li{margin-bottom: 30px; text-align: center; }
.history_title>span{color: #03a761;  }
.history_title>p{  font-size:15px; color: #888; font-weight: 400; }

.history_y{position:relative; display: inline-block; width: 130px; height: 45px; background:#03a761; font-size:25px; color: #fff; font-weight: 400; text-align: center; line-height: 45px; border-radius: 90px;margin-bottom: 20px; }
.history_con{width: 300px; margin: 0 auto; font-size:15px; color: #444; font-weight: 400;  letter-spacing: -1px; text-align:  left; line-height: 25px; }


.about_wrap{width: 100%;  background: #f0f3f7; }
.about_all{padding: 30px 20px 0 20px; }
.title_all{font-size:24px; font-weight: 400; color: #353535;  background:url('../images/sub/title_bg.png') 0 center no-repeat;  padding-left: 25px; margin-bottom: 10px; }
.text_all{  font-size:15px; color: #888; font-weight: 400;  letter-spacing: -0.5px;  line-height:25px;  }
.text_all>span{font-weight: 700;  }
.about_img{width:100%;}
.about_img>img{width:100%;}

.organizationchart_t{width: 100%; border-top: 3px solid #03a761; margin-bottom: 30px; }
.organizationchart_t th{ border: 1px solid #ccc; padding:5px; background:#fafafa; text-align: center; font-size: 15px; }
.organizationchart_t td{ border: 1px solid #ccc; padding:5px; font-size: 14px;text-align: center; }
.organizationchart_img{text-align: center;}
.organizationchart_img>img{ width: 60%;  }


.location_table{width:100%; border-top:3px solid #03a761; margin-bottom: 30px; }
.location_table th{ border: 1px solid #ccc; padding:10px; background:#fafafa; text-align: center; font-size: 15px; }
.location_table td{ border: 1px solid #ccc; padding:5px; font-size: 14px; text-align: center; }

.outline_title{font-size:17px; color: #444; font-weight: 400; letter-spacing: -0.5px; }
.outline_title>span{position: relative; bottom:3px; display: inline-block; width: 7px; height: 7px; background:#03a761; margin-right: 7px;  }
.outline_img{width:100%; margin: 50px 0; }
.outline_wrap:after{display: block;content: "";clear: both;}
.outline_wrap>div{position: relative; width:100%;   border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }

.outline_wrap2{ margin-top: 30px;}
.outline_wrap2:after{display: block;content: "";clear: both;}
.outline_wrap2>div{position: relative;  width:100%;  border: 1px solid #ccc; padding: 20px;margin-bottom: 20px;  }
.outline_t{ width:100%; background: #878787; font-size:15px; color: #fff; font-weight: 400; letter-spacing: -0.5px; text-align: center; padding: 7px 0; margin-top: 20px;}

.business_table{width: 100%; margin: 15px 0 30px 0; }
.business_table th{ border: 1px solid #ccc; padding:5px; background:#fafafa; text-align: center; font-size: 15px; text-align: center; }
.business_table td{ border: 1px solid #ccc; padding:5px; font-size: 14px;text-align: center; }

.business_img:after{display: block;content: "";clear: both;}
.business_img>div{ float: left; width:49%;  border: 1px solid #ccc;  overflow: hidden; box-sizing: border-box; margin-bottom: 2%; }
.business_img>div:nth-child(2n){margin-left: 2%; }
.business_img>div>img{width: 100%; }

.company_wrap{margin-top: 30px; }
.company_wrap:after{display: block;content: "";clear: both;}
.company_wrap>div{float: left; width:49%;  border: 1px solid #ccc;  overflow: hidden; box-sizing: border-box; margin-bottom: 2%;}
.company_wrap>div:nth-child(2n){margin-left: 2%; }
.company_wrap>div>img{width: 100%; }
.title_all2{ font-size: 18px; font-weight: 400; color: #353535; padding-left: 23px;}

.outline_wrap3{ margin-top: 30px;}
.outline_wrap3:after{display: block;content: "";clear: both;}
.outline_wrap3>div{position: relative; width:100%;   border: 1px solid #ccc; padding: 30px; margin-bottom: 20px; }


.method_wrap:after{display: block;content: "";clear: both;}
.method_wrap>div{ width:100%;    border:1px solid #ccc; padding: 25px; margin-bottom: 20px; }

.method_title1{ width: 100%; font-size: 17px; font-weight: 400; color: #fff; text-align: center; background:#03a761;  padding: 10px 0; }
.method_title2{ width: 100%; font-size: 17px; font-weight: 400; color: #fff; text-align: center; background:#555;  padding: 10px 0; }
.method_title3{ width: 100%; font-size: 17px; font-weight: 400; color: #fff; text-align: center; background:#999;  padding: 10px 0; }
.method_title4{ width: 100%; font-size: 17px; font-weight: 400; color: #fff; text-align: center; background:#ffa800;  padding: 10px 0; }
.method_text{ font-size: 16px; font-weight: 400; color: #353535; margin-top: 15px;   }
.method_text1{ font-size: 16px; font-weight: 400; color: #353535; margin-top: 15px; text-align: center;  }

.a_06{width: 100%; padding: 30px 60px; background: #f7fdff;  }

/* orga */
.orga {padding-top:50px; margin-top:50px; border-top:1px solid #eee; text-align: center;}
.orga h2 {margin:0 0 40px; font-family: "Noto Sans KR", sans-serif; font-weight: 400; color: #353535; font-size: 20px;}
.orga h2::before {content: ''; display: block; width: 25px; height: 3px; background: #03a761; margin: 0 auto 15px auto;}
.orga a {color:#aaa; font-weight: 300;}
.orga a:hover {color:#03a761;}