@charset "utf-8";
@import url('/skin/notokr/notokr.css');
html { overflow-x: hidden; overflow-y: scroll; }
.body-layout { overflow-x: hidden; background-color: #fff; padding-top:140px;}
a:hover { text-decoration: none; }

/* 폰트 설정 */
.body-layout, h1, h2, h3, h4, h5, h6, input, textarea, button { font-family: 'notokr', "NanumGothic", "나눔고딕", 'NanumBarunGothic', 'Apple SD Neo Gothic', 'Malgun Gothic', 'Gulim', sans-serif; }
ol, ul, li { list-style: none; list-style-position: inside; }
.navbar .caret, .navbar .divider-vertical, .navbar~br, .footer-social-layout, .footer_copy .text-center>br,.topmarginLay_a { display: none; }

/*가로 100% 레이아웃 정의*/
.container_contents,
.footer_copy>div,
.sub-layout {
	width: 100%;
	padding: 0;
}

.intro-board-widget-layout,
.dh-board,
.dh-view-box,
.bbs-list-view-layout+.row,
#mailForm,
#insertForm {
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}

/* personal setting 0.48v */
.navbar-inverse {
	background-color: #005bac;
	border-color: transparent;
	margin-bottom: 0;
}



@media screen and (min-width: 768px) {
	.navbar-inverse .navbar-brand {
		display:none;
	}	
	.navbar-inverse .navbar-nav{
		width:100%;
	}
	.navbar-inverse .navbar-nav > li {
    width: auto !important;
    min-width: 60px;
    margin-right: 40px;
}
	.navbar-inverse .navbar-nav > li > a {
    padding: 20px 0;
    color: #fff;
    -webkit-text-shadow: none;
    text-shadow: none;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    letter-spacing: -0.04em;
    line-height: 1;
}
 	.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li:hover > a, .navbar-inverse .navbar-nav > li:focus > a, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    color: #fff;
}
}
@media screen and (min-width: 768px) {
  	.navbar-inverse .navbar-nav .dropdown-menu {
    background-color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 10px;
    left: 0;
    right: auto;
}
	.navbar-inverse .navbar-nav .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #444;
    padding: 12px 15px;
    margin: 2px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    letter-spacing: -0.02em;
    border-radius: 50px;
}
	.navbar-inverse .navbar-nav .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .dropdown-menu > li > a:focus {
    color: #fff;
    background: #00b2e2;
}
}
/* layout */

.mt-0 {
	margin-top: 0px!important;
}

.mt-20 {
	margin-top: 20px!important;
}

.mt-30 {
	margin-top: 30px!important;
}

.mt-40 {
	margin-top: 40px!important;
}

.mt-60 {
	margin-top: 60px!important;
}

.mb-0 {
	margin-bottom: 0px!important;
}

.mb-20 {
	margin-bottom: 20px!important;
}

.mb-30 {
	margin-bottom: 30px!important;
}

.mb-40 {
	margin-bottom: 40px!important;
}

.mb-60 {
	margin-bottom: 60px!important;
}

.mv-10 {
	margin-bottom: 10px!important;
	margin-top: 10px!important;
}

.mv-30 {
	margin-bottom: 30px!important;
	margin-top: 30px!important;
}

.mv-60 {
	margin-bottom: 60px!important;
	margin-top: 60px!important;
}

.mg-0 {
	margin: 0!important;
}

.pd-0 {
	padding: 0!important;
}

@media(min-width:768px) {
	.col-sm-20 {
		width: 20%;
	}
}

/* img */

.img-shadow {
	box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.1);
}

.img-bordered {
	border: 1px solid #ddd;
}

.img-caption {
	margin: 10px 0;
	text-align: center;
	font-size: 16px;
	color: #555;
	font-weight: 500;
}

/* align */

.absolute-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	margin: 0;
}

.horizontal-center {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding: 0;
	margin: 0;
}

.text-center-table thead th,
.text-center-table thead td,
.text-center-table tbody th,
.text-center-table tbody td {
	text-align: center!important;
	vertical-align: middle!important;
}

.text-center-table .text-left,
.text-center-table .text-left th,
.text-center-table .text-left td {
	text-align: left!important;
}

/* font */

.font-12 {
	font-size: 12px!important;
}

.font-14 {
	font-size: 14px!important;
}
.font-16 {
    color: #666;
    font-size: 15px !important;
    letter-spacing: -0.04em;
}
.font-18 {
	font-size: 18px!important;
}

.font-20 {
	font-size: 20px!important;
}

.font-22 {
	font-size: 22px!important;
}

.text-bold {
	font-weight: bold!important;
}

.numbering {
	margin-right: 10px;
}

/*list style*/

.li-none>li {
	list-style: none!important;
	margin-left: 20px;
}

.li-circle>li {
	list-style: circle!important;
	margin-left: 20px;
}

.li-square>li {
	list-style: square!important;
	margin-left: 20px;
}

.li-disc>li {
	list-style: disc!important;
	margin-left: 20px;
}

.li-dash>li,
.li-dot>li {
	margin-left: 10px;
	padding-left: 20px;
	position: relative;
}

.li-dash>li:before,
.li-dot>li:before {
	content: '-';
	display: block;
	position: absolute;
	left: 5px;
	top: 0;
}

.li-dot>li:before {
	content: '·';
}

.location-li {
	margin-bottom: 20px;
}

.location-li li {
	padding: 5px 10px;
	font-size: 16px;
}

.location-li span {
	display: inline-block;
	margin-right: 10px;
	padding: 0 20px;
	min-width: 130px;
	font-weight: 500;
	color: #fff;
	background: #666;
	border-radius: 4px;
}

.location-li span i {
	margin-right: 5px;
}

.partner-li {
	border: 1px solid #ddd;
}

.partner-li:after {
	content: '';
	display: block;
	clear: both;
}

.partner-li>li {
	float: left;
	width: 16.666%;
}

.partner-li>li img {
	border: 1px solid #ddd;
}

.category-li {
	display: inline-block;
	margin: 20px auto;
}

.category-li:after {
	content: '';
	display: block;
	clear: both;
}

.category-li>li {
	float: left;
	display: inline-block;
	margin: 5px;
	padding: 10px 20px;
	background: #f5f5f5;
	border: 1px solid #ddd;
}

@media(max-width:767px) {
	.partner-li>li {
		width: 50%;
	}
}

/* component */

.card {
	display: block;
	position: relative;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	min-height: max-content;
}

.column-2 {
	column-count: 2;
	column-rule: 1px solid #ddd;
	column-gap: 30px;
}

.column-2 ul,
.column-2 dl,
.column-2 ol {
	margin: 0;
}

.quote-box {
	margin: 20px auto;
	padding: 25px;
	background: #f5f5f5;
}
p.quote {
    margin: 0 0 40px;
    font-size: 28px;
    font-weight: 400;
    color: #222;
    line-height: 1.4;
    letter-spacing: -0.04em;
}

p.quote span {
	font-weight: 500;
}

/* custom setting */

.container_contents,
.footer_copy>div,
.sub-layout {
	width: 100%;
	padding: 0;
}

ul,
dl,
ol {
	padding: 0;
}
p,
li,
dt,
dd {
	line-height: 1.6;
}

* {
	box-sizing: border-box;
	word-break: keep-all;
}
.table {
    margin: 0 0 20px !important;
    border-top: 2px solid #005bac !important;
    border-bottom: 1px solid #dedede !important;
}
.table tr th, .table tr td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e6e6e6 !important;
    letter-spacing: -0.04em;
    line-height: 1.6 !important;
    word-break: keep-all;
    vertical-align: middle !important;
    color: #666;
    font-size: 15px;
}
.table tr th {
    color: #222;
    font-weight: 500;
}
.table thead tr th {
    background: #f8f8f8;
    border-bottom: 1px solid #dedede !important;
}

/* personal setting 0.48v end */

/* navigation setting */
.menu-top {
    background: #fff;
    padding: 16px 0;
}
.logo{
	display:inline-block;
	margin:0;
}
.logo img { max-width: 280px; }
.menu-top ul {
    margin: 20px 0 0;
}
.menu-top ul:after{
	content:'';
	display:block;
	clear:both;
}
.menu-top li {
    float: left;
    text-align: right;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #ccc;
    line-height: 1;
}
.menu-top li:last-of-type {
    border-right: none;
    padding: 0;
    margin: 0;
}
.menu-top li a {
    color: #888;
    font-size: 13px;
    letter-spacing: -0.04em;
}
@media(max-width:767px) {
	.body-layout{
		padding-top:66px;
	}
	.menu-top{
		display:none;
	}
	.navbar-inverse {
    	background-color: #fff;
    	border-color: #ddd;
	}
	.navbar-brand img {
    	margin-top: 0px;
		max-width:215px;
	}
	.navbar-toggle{
		top:10px;
		border:none!important;
		background:transparent!important;
	}
	.navbar-toggle .icon-bar{
		background:#333!important;
	}
	.navbar-inverse .navbar-right{
 		margin: 0 -15px;
		background: #eee;
	}
	.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
		background-color:#005bac;
	}
	.navbar-nav .open .dropdown-menu{
		background:#fff;
	}

}

/* mainpage setting */
.carousel-inner > .item {
    height: 500px;
}
.carousel-control > .glyphicon{
	display:none;
}
.carousel-control.left{
	background:url(/skin/img/slide/arrow_prev.png) no-repeat center;
}
.carousel-control.right{
	background:url(/skin/img/slide/arrow_next.png) no-repeat center;
}
.carousel-caption {
    margin: 0;
    padding: 0;
    top: 50%;
	left:50%;
	right:auto;
    bottom: auto;
    transform: translate(-50%,-50%);
    width: 90%;
    max-width: 1170px;
    text-align: left;
    text-shadow: 0 0 0 rgba(0,0,0,0);
}
.carousel-caption h2 {
    margin: 0;
    font-size: 56px;
    color: #fff;
    font-weight: 300;
    letter-spacing: -0.06em;
}
.carousel-caption h2 span {
    font-weight: 600;
}
.carousel-caption p {
    margin: 0 0 10px;
    font-size: 16px;
    color: #ccc;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}
.main-product { padding: 60px 0; }
.m-product { padding: 0 5px; }
.main-product a {
    display: block;
    padding: 20px 10px;
    color: #666;
    text-align: center;
    border: 1px solid #dedede;
    border-top: 4px solid #005bac;
    border-radius: 4px;
    transition: all .3s ease;
}
.main-product a:hover {
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    transform: translatey(-5px);
    background: #f8f8f8;
}
.main-product a h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.main-product a h4 span {
    margin-bottom: 10px;
    display: block;
    color: #aaa;
    font-size: 18px;
    font-style: oblique;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.main-product a:hover h4 {
    color: #222;
}
.main-product a:hover h4 span {
    color: #00b2e2;
}
.main-product .title h3 {
    margin: 0 0 20px;
    color: #222;
    font-size: 26px;
    letter-spacing: -0.04em;
    line-height: 1;
}
.main-product .title p {
    color: #666;
    font-size: 15px;
    letter-spacing: -0.04em;
}
.main-link {
    padding: 60px 0 80px;
    background: #f8f8f8;
}
.main-link a {
    display: block;
    position: relative;
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: all .3s ease;
}
.main-link a h4 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.04em;
    background: rgba(0,0,0,0.8);
}
.main-link a:hover h4 { background: #005bac; }

@media(max-width:767px) {
	.carousel .item{
		height:300px;
	}
	.carousel .item img{
		margin-left:-30%;
		max-width:none;
		height:100%;
		width:auto;
	}
	.carousel-caption h2{
		font-size:45px;
	}
	.carousel-caption p{
		font-size:14px;
	}
	.main-product a{
		min-height:112px;
		margin-bottom:10px;
	}
	.main-product .title{
		margin-bottom:40px;
	}
	.main-link a{
		margin-bottom:15px;
	}
}

/* footer setting */
.footer_copy>div {
    padding: 40px 0 60px;
    background: #e6e6e6;
    color: #888;
    font-size: 13px;
}
.footer_copy ul:after {
	content: '';
	display: block;
	clear: both;
}

.footer_copy li {
	float: left;
	padding-right: 10px;
	margin-right: 10px;
	border-right: 2px solid rgba(255, 255, 255, 0.2);
}

.footer_copy li:last-of-type {
	border-right: none;
}

@media(max-width:767px) {
	.foot-logo{
		margin-bottom:10px;
		max-width:215px;
		margin-left:0;
	}
	
}

/* subpage setting */
.pageheader {
    position: relative;
    height: 320px;
    background: #555 url(/skin/img/sub/subtop-bg.jpg) no-repeat center / cover;
}
div[id^="product"] .pageheader,
div[id^="consult"] .pageheader{
	background: #555 url(/skin/img/sub/subtop-bg2.jpg) no-repeat center / cover;
}
.pageheader .container {
	position: relative;
	height: 100%;
}
.pageheader .snb{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
}
.snb ul{
	margin:0;
	border-top:1px solid rgba(255,255,255,0.2);
}
.snb ul:after{
	content:'';
	display:block;
	clear:both;
}
.snb ul li{
	float:left;
	width:25%;
	border-right:1px solid rgba(255,255,255,0.2);
}

.snb_lv2{
    background: #f8f8f8;
}
.snb_lv2 ul{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 10px;
    gap: 30px;
}
.snb_lv2 ul li{}
.snb_lv2 ul li a{
    font-size: 16px;
    color: #999;
    border-bottom: 1px solid transparent;
}
.snb_lv2 ul li a:hover,
.snb_lv2 ul li a:focus{
    color: #005bac;
}
.snb_lv2 ul li.active a{
    color: #005bac;
    border-color: #005bac;
}


/* div[id^="product"] .snb li{
	width:20%;
} */
div[id^="product"] .snb li{
	width: calc(100% / 3);
}
div[id^="consult"] .snb li{
	width:50%;
}
.snb ul li:first-child{
	border-left:1px solid rgba(255,255,255,0.2);
}
.snb ul li a {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.04em;
    background: rgba(0,0,0,0.6);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}
.snb ul li.active a {
    background: #fff;
    color: #005bac;
    font-weight: 500;
}
.pageheader h2 {
    margin: 0;
    color: #fff;
    position: absolute;
    left: 50%;
    top: calc(50% - 10px);
    transform: translate(-50%,-50%);
    font-size: 36px;
}
.breadcrumb {
    margin: 20px 15px 0 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    color: #ccc;
    text-align: right;
}
.breadcrumb .active {
	color: #fff;
}
.subpage-content { padding: 80px 0 100px; }
.subpage-content section {
    padding-bottom: 60px;
}
.subpage-content .emp {
	font-weight: 500;
	color: #005bac;
}
.subpage-content .title h3 {
    margin: 0 0 20px;
    font-size: 32px;
    letter-spacing: -0.04em;
}
.subpage-content .title h3:before{
	content:'';
	display:inline-block;
	margin-right:15px;
	width:30px;
	height:30px;
	border:7px solid #005bac;
	border-radius:50%;
	vertical-align:middle;
}
.dh-board,.dh-view-box,#insertForm,#mailForm,.bbs-list-view-layout + .row,.bbs-blog-view-layout + .row,#mod_type_formForm{
	visibility:hidden;
}
.subpage-content section h4 {
    margin: 0 0 20px;
    color: #222;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    position: relative;
    padding-left: 15px;
}
.subpage-content section h4:before {
    content: "";
    background: #005bac;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
}
.subpage-content section h5 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.04em;
}

/* subpage product */
.prod-rule .card h5 {
    margin-bottom: 20px;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    background: #005bac;
}
#product01 .se1 .prod-rule .card {
    min-height: 220px;
    padding: 0;
}
.prod-rule .card ul {
    margin: 0;
    padding: 0 30px;
}
#product01 .se3 .prod-rule .card {
    min-height: 260px;
    padding: 0;
}
#product01 .se4 .prod-rule .card {
    min-height: 180px;
    padding: 0;
}
.prod01-se1-img, .prod-info {
    margin-bottom: 60px !important;
}
.prod-info dt{
	margin-top:15px;
	font-size:18px;
}
.prod04-se3 p{
	height:4.8em;
}
#product04 .se1 .quote-box {
    margin-bottom: 60px;
}

.img-wrap{margin-top: 30px;}
.img-wrap .caption{text-align: center;font-weight: 600;}

/* subpage consult */
.process > div:after{
	content:'\f061';
	font-family:'fontawesome';
	position:absolute;
	right:-8px;
	top:50%;
	transform:translatey(-50%);
	font-size:20px;
	color:#005bac;
	opacity:0.3;
}
.process > div:last-child:after{
	display:none;
}
.process .card{
	min-height:185px;
}
.process .card h5{
	margin:-15px;
	margin-bottom:15px;
	padding:15px 20px;
	background:#005bac;
	color:#fff;
}
.process .card h5 small{
	margin-left:10px;
	color:#fff;
}
.process .card h5 .numbering{
	color: #fdd201;
}

#product08 p.intro{font-size: 17px;color: #0070d4;font-weight: 500;margin: 25px 0 25px;}
@media(max-width:767px) {
	.pageheader{
		height:150px;
	}	
	.pageheader h2{
		top:50%;
		width: 100%;
		font-size: 26px;
		text-align: center;
	}
	.snb{
		display:none;
	}
	.subpage-content{
		padding:40px 0 60px;
	}
	.subpage-content .title h3 {
		font-size: 28px;
	}
	.subpage-content .title h3:before{
		width:25px;
		height:25px;
		border:5px solid #005bac;
	}
	p.quote{
		margin-top:40px;
		font-size:24px;
	}
	.dh-board .regdate,
	.dh-board .hits{
		display:none;
	}
	.dh-board .pagination {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 10px;
	}
	#about02 .se1 img{
		max-width:100%!important;
	}
	.subpage-content section img{
		margin-bottom:10px;
	}
	.process .card{
		margin-bottom:40px;
	}
	.process > div:after{
		content:'\f063';
		right:auto;
		left:50%;
		transform:translatex(-50%);
		top:104%;
	}
}