/**
* 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:transparent; height:80px;}
.logo{padding:25px 14px}
.mobile_btn {float:right;position:relative;width:34px;height:34px;background-color:#000;border:0px solid #2f2f2f;margin:25px 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}
.m_language_btn {display:block;}

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

.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:#7a7a7a;line-height:18px; font-weight:300;}
.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:#0e4ba1;border:1px solid #0e4ba1;color:#fff}

.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.8;
	 background-color: rgba( 255, 255, 255, 0.2 );
}
.bxslider_btn_next {
	position: absolute;
	right: 0px;
	top: 50%;
	z-index: 99;
	background: url('../images/bxslider_btn_next.png') no-repeat 14px 50%;
	border: 0;
	width: 46px;
	height: 64px;
	text-indent: -9999px;
	margin-top: -30px;
	opacity:0.8;
	 background-color: rgba( 255, 255, 255, 0.2 );
}

/* main page */
/* main visual */
.main_visual {position:relative;}
.main_txt {position:absolute; text-align:center; color:#fff; top:33%; z-index: 100; left:50%; transform:translateX(-50%); width:80%; font-size:16px;}
.main_txt h1 {font-weight:300; text-shadow: 2px 2px 6px #000; font-family: 'NanumSquare_L', sans-serif; font-size:2.6em;}
.main_txt h2 {text-shadow: 2px 2px 6px #000; letter-spacing: 1px; font-family: 'NanumSquare_B', sans-serif; font-size:2.7em;}
@media (max-width:515px) {
	.main_txt {font-size:12px; top:31%;}
}
@media (max-width:414px) {
	.main_txt {font-size:10px;}
}
/* about us */
.main_content1 {text-align:center; margin-top:40px; padding:0 2%;}
.main_content1 img {max-width:98%; height:auto;}
.main_head {color:#333; font-size:28px; font-weight:500; margin-bottom:30px;}
.main_content1 p {font-weight:400; color:#333; margin:40px 0 20px 0; font-size:20px;}
.main_content1 > span {font-weight:300; color:#666; font-size:15px; display:block; line-height:24px;}
.main_btn {display:inline-block; width:200px; height:50px; line-height:50px; border:1px solid #0e4ba1;  text-decoration: none; font-size:15px; margin-top:25px; text-align:center;}
.main_btn span {font-size:11px; padding-bottom:4px; padding-left:75px;}
.main_btn a:hover {background:#0e4ba1; color:#fff;}
/* business */
.main_content2 {width:100%; height:auto; padding:25px 2%; background:#f5f5f5; text-align:center;}
.main_content2 ul {max-width:100%; height:auto; margin:0 auto; display:inline-block;}
.main_content2 ul li {background:#fff; border:1px solid #ddd; max-width:32.3%; margin:0 auto 30px; float:left; margin-right:1%; height:auto;}
.main_content2 ul li:last-child {margin-right:0;}
.main_content2 ul li img {max-width:100%; height:auto;}
.main_content2 ul li p {padding:15px 0; border-top:1px solid #ddd; color:#333; font-size:16px; font-weight:500;}
/* customers*/
.main_content3 {text-align:center; margin-top:40px;}
.main_content3 ul {width:95%; margin:0 auto;}
.main_content3 ul li {width:50%;border:1px solid #ddd; border-bottom:none; float:left; height:240px; line-height:240px; display:block;}
.main_content3 ul li:nth-child(even) {border-left:none;}
.main_content3 ul li:nth-child(11), .main_content3 ul li:nth-child(12) {border-bottom:1px solid #ddd;}
.main_content3 ul li img {width:50%; height:auto;}
@media (max-width:540px) {
	.main_content3 ul li {height:180px; line-height:180px;}
	.main_content3 ul li img {width:55%;}
}
@media (max-width:375px) {
	.main_content3 ul li {height:150px; line-height:150px;}
	.main_content3 ul li img {width:70%;}
}
/* infor */
.main_content4 {border-top:1px solid #ddd; padding:30px 0 50px 0; text-align:center;}
.c_title {font-size: 36px; font-weight: 500; color:#0e4ba1; margin: 10px 0 0 0; }
.c_title span { color:#333;}
.main_content4 h2 {margin: 20px 0; padding: 10px 0 10px 0; font-size: 22px; font-weight:500; color:#13181e;}
.main_content4 h2 img {padding-bottom:4px; display:inline-block; margin-right:10px;}
.main_content4 p {font-size:14px; color:#666; line-height:30px; }
.main_btn.ver2 {border:1px solid #13181e; color:#666;}
/* @media (max-width:375px) {
	.main_content4 p {padding-left:0;}
} */

.more_btn {display:inline-block; font-size:14px; text-decoration:none; color:#fff; transition: all 0.3s ease; border:1px solid #fff; width:130px; height:40px;
line-height:40px; text-align:center; font-weight:300;}
.more_btn:hover {background:#fff; color:#033a24; text-decoration:none;}
/* box2 */
.box2 {height:300px; background: url('../images/common/box2_bg.jpg'); background-position:center center; background-attachment: fixed; background-repeat: no-repeat;
margin:50px 0;}
.box2_program {height:100%; width:100%; margin:0 auto; background-color: rgba( 0, 0, 0, 0.64 ); color:#fff; text-align:center; padding-top:55px;}
.program_h {font-family: 'nanumMJ'; font-size:42px; line-height:40px; margin:0;}
.program_h span {font-size:28px; }
.program_t {line-height:135%; font-size:16px;}
.more_btn.ver2 {font-size:16px;}
/* box3 */
.box3_title {font-size:1.8em; font-family: 'NanumSquare_L'; float:left; width:100%; display:block;}
.box3_title strong {font-family: 'NanumSquare_B'; padding-left:2%;}
.more_btn2 {float:right; padding:10px 2% 0 0; font-size:15px; text-decoration:none; color:#8a8a8a; display:block;}
.more_btn2:hover {text-decoration:none; color:#000;}
/* box3 */
.gallery_photo{display:inline-block; width:49%; float:left; height:100%; overflow:hidden; margin-bottom:10px;}
.gallery_photo:nth-child(2n+0) {float:right;}
.gallery_photo_img {width:100%;}
/* box4*/
.box4 {height:500px; border-top:1px solid #d5d5d5; text-align:center; display:block; margin:50px 0; height:auto;}
.box4_text {padding-top:30px}
.box4_text_title {font-size:1.8em; font-family: 'NanumSquare_B';}
.box4_text_title span {font-family: 'NanumSquare_L';}
.box4_icon {margin:-8px 0 0 20px;}
.box4_text_t {font-size:16px;}
.more_btn.ver3 {background:#00a040; border:1px solid #00a040; color:#fff; display:inline-block; }
/* .more_btn.ver3:hover {background:#00a040; border:1px solid #00a040; color:#fff;} */
.box4_map  {margin: 0 auto; width:100%; height:90%;}
.box4_map img {max-width:90%; max-height:auto; display:inline-block; }
/* box5 */
.box5 {border-top:1px solid #6e6e6e; border-bottom:1px solid #6e6e6e; height:650px;}
.box5_left {width:100%; height:300px; overflow:hidden;}
.box5_right {width:100%; height:350px; float:right; background: url('../images/common/box5_right.jpg') 0 0; padding:35px 2% 0 10%; color:#fff;}
.box5_right > h3 {font-size:1.5em; font-family: 'NanumSquare_B';}
.box5_right > h3 > span {display:block; float:left;width:20px; height:2px; background:#fff; margin:10px 20px 0 0;}
.bullet2 {font-size:18px; font-weight:400; background: url('../images/common/bullet.jpg') no-repeat 0 10px; padding-left:25px; }
.box5_right ul li {margin-bottom:15px;}
.box5_right ul li span {font-size:13px; font-weight:300;}
/* box6(bx)*/
.bxslider4 {height:120px; width:100%; line-height:120px; text-align:center; padding:0 5%;}
/* .bxslider4 li {display:inline-block; width:30%;} */
/* .box6 ul li a img {width:70%;} */
/* @media (max-width:460px) {
	 .box6 ul li {width:50%;}
} */
#bx-wrapper img {
    width: auto !important
}
/* -------------------------------------------------------------------
| 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:40px 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_top_area > span {display:inline-block; background:#fff; width:48px; height:3px; }
.sub_top_title {color:#fff;font-size:34px;font-weight: 400; letter-spacing: -2px; text-shadow: 2px 2px 8px #000; margin-top:0;}

.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:24px;border-bottom:1px solid #2d43a0;padding-bottom:18px;}
.contents{min-height:350px;padding:0 15px 30px;}

/* 인사말 */
.greetings {text-align:center; margin-bottom:40px;}
.gree_title_box {width: 100%; margin: 0 auto; position:relative; z-index: 1;   border: 15px solid #f7f7f7; padding:30px 15%;}
.gree_title_box img {position:absolute; z-index: -1; width:34px;}
.gree_title_box img:first-child {top:40px; left:2%;}
.gree_title_box img:nth-child(2) {top:40px; right:2%;}
.gree_title_box h1 {font-size: 18px; color:#333; font-weight: 400; letter-spacing: -0.5px; line-height:24px; word-break : keep-all;}
.greetings > p {font-size: 15px; letter-spacing: -0.5px; font-weight: 300; line-height: 28px; color:#666; margin-top: 50px; }
.gree_img {margin-top: 30px;}
.gree_img img {width: 100%;}
.greetings ul {width:100%; margin:50px 0;}
.greetings ul li {width:50%; float:left; padding:40px 0;  border:2px solid #0e4ba1;}
.greetings ul li:nth-child(even) {border-left:none;}
.greetings ul li:nth-child(1),.greetings ul li:nth-child(2) {border-bottom:none;}
.greetings ul li p {font-size: 16px; font-weight: 400; color:#333; letter-spacing: -0.5px; margin-top: 20px;}
@media (max-width:375px) {
	.greetings ul li {padding:30px 0;}
}

/* 연혁 */
.his_img img {max-width: 100%; height:auto;}
.history h1 {font-weight: 900; font-size: 60px; text-align: center;  color: #ccc;}
.history h1 span {color: #417be6;}
.his_box {width: 100%; margin-top: 30px; }
.his_box h2 span {float:right; display: inline-block; width:60%; height:2px; background:#343434; margin-top:16px;}
.his_table {margin-top: 20px; width: 100%;}
.his_table th, .his_table td {padding: 10px 0;}
.his_table th {color:#333;font-weight: 500; vertical-align: top; font-size: 16px;}
.his_table td {color: #666; font-weight: 300; font-size: 15px; letter-spacing: -1.1px;}
@media (max-width:515px) {
	.his_box h2 span {width:50%;}
}
@media (max-width:375px) {
	.his_box h2 span {width:40%;}
}
/*location*/
.location_talbe_box {margin-bottom: 50px;}
.location_talbe_box table {width: 100%; border-top: 2px solid #0e4ba1;}
.location_talbe_box table th, .location_talbe_box table td {text-align: center ; padding:15px;  border: 1px solid #ddd; }
.location_talbe_box table th {background: #f8f8f8;}
.location_map {width:100%; height:400px;}
.location_talbe_box table th{border-left:none;}
.location_talbe_box table td{border-right:none;}
/*product1*/
.pd_box {width: 100%; margin-bottom:40px;}
.pd_img_box {width:620px; float:left;}
.pd_img_box ul li {float: left; margin-right: 20px;}
.pd_img_box ul li:last-child {margin-right: 0;}
.pd_script_box {width:530px; float:right; padding-top: 20px;}
.sub_h1 {margin: 0 0 30px 0; font-size: 24px; font-weight: 500; color:#333; background: url('../images/sub/title_bar.jpg') no-repeat 0% 12px; padding-left: 40px;}
.sub_h1 span {font-size: 18px; font-weight: 400; color:#666; }

.pd_table_box {}
.pd_table_box {margin-top: 30px;}
.pd_table_box table {width: 100%;  border-top: 2px solid #0e4ba1;}
.pd_table_box table th, .pd_table_box table td {text-align: center ; padding:10px 15px;  border: 1px solid #ddd;}
.pd_table_box table th {background-color: #f8f8f8;}
.pd_table_box table td {font-size: 14px; color:#666; word-break : keep-all;}
/*product3*/
.pd_img_box3 {width:100%; margin-top: 50px;}
.pd_img_box3 ul li {float: left; width: 48%; margin-right:2%; margin-bottom:10px;}
.pd_img_box3 ul li img {width: 100%;}
.pd_img_box3 ul li:last-child {margin-right: 0;}
/*product7*/
.pd7_box {width: 100%;}
.pd7_box ul li {float: left; width: 100%; margin-bottom: 70px; height: 240px;}
.pd7_box ul li:nth-child(2n) {margin-right: 0;}
.pd7_title_box {width: 100%; height: 35px; border-bottom: 35px solid #0e4ba1; border-left: 0 solid transparent; border-right: 50px solid transparent; color: #fff; line-height: 35px; padding-left: 20px;}
.pd7_img_box {border: 1px solid #ddd; height: 240px; text-align: center; line-height: 240px; overflow:hidden;}
.pd7_img_box img {max-width:85%; height:auto;}
.pd7_box2 .pd7_title_box{width: 100%; height: 35px; border-bottom: 35px solid #efefef; border-left: 0 solid transparent; border-right: 50px solid transparent; color: #333; line-height: 35px; padding-left: 20px; font-weight: 500;}
/*rnd1*/
/* .rnd1 .sub_h1 {margin-bottom: 15px;} */
.rnd_article {width: 100%; margin-top: 30px; }
.rnd_box1 {width: 100%; margin-top: -1px;  padding:20px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #f7f7f7}
.rnd_box1:nth-child(2n) {background: #fff}
.sub_h3 {margin: 0 0 5px 0; font-size: 18px; font-weight: 500; color:#333; background: url('../images/sub/s_blet.png') no-repeat 0% 2px; padding-left: 20px; letter-spacing: -0.5px; word-break : keep-all; line-height: 24px; padding-bottom: 0; }
.rnd_box1 p {font-size: 16px; color:#333; font-weight: 40000; padding: 0 0 0 20px; letter-spacing: -0.5px; margin-bottom: 10px; word-break : keep-all;}
.rnd_box1 ul, .rnd_box2 ul {padding-left: 20px;}
.rnd_box1 ul li, .rnd_box2 ul li  {font-size: 14px; color:#666; font-weight: 300; line-height: 24px; padding: 0 0 0 13px; letter-spacing: -0.5px;  background: url('../images/sub/dotblet.png') no-repeat 0% 7px; word-break : keep-all;}




/*rnd3*/
.rnd3 ul li {width: 48%; float: left; margin-right: 2%; margin-bottom: 50px; }
.rnd3 ul li img {max-width: 100%;}
.rnd3 ul li:nth-child(2n) {margin-right: 0;}