@charset "UTF-8";

/**font(NOTO SANS KR)*/
@font-face {
	font-family: 'NotoThin';
	src: url(../font/NotoSansKR-Thin.woff2) format('woff2');
}
@font-face {
	font-family: 'NotoLight';
	src: url(../font/NotoSansKR-Light.woff2) format('woff2');
}
@font-face {
	font-family: 'Noto';
	src: url(../font/NotoSansKR-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'NotoMedium';
	src: url(../font/NotoSansKR-Medium.woff2) format('woff2');
}
@font-face {
	font-family: 'NotoBold';
	src: url(../font/NotoSansKR-Bold.woff2) format('woff2');
}
@font-face {
	font-family: 'NotoBlack';
	src: url(../font/NotoSansKR-Black.woff2) format('woff2');
}

/***config***/
:root {
	--main-color: #135F90; /*encom blue*/
	--sub-color-1: #3BB0A2;
	--font-color: #525252;
	--border-color: #DDD;
}
::selection {
	background: var(--main-color);
	color: #FFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .5);
}

/***common***/
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font: 18px 'Noto';
	color: var(--font-color);
	overflow-x: hidden;
	background: #FFF;
	letter-spacing: -0.02rem;
}
div, span {
	display: inline-block;
}
a {
	text-decoration: none;
	color: inherit;
}
ol, ul, dl, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
dl, dt, dd {
	margin: 0;
	padding: 0;
	display: inline-block;
}
p {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
/***body***/
/**header**/
header {
	position: relative;
	float: left;
	width: 100%;
	height: 390px;
	color: #FFF;
}
	header.smart {
		background: center /cover url(../images/bg_smart.png) no-repeat;
	}
	header.special {
		background: center /cover url(../images/bg_special.jpg) no-repeat;
	}
	header > * {
		box-sizing: border-box;
	}
	header::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 100%;
		background: rgba(19, 95, 144, .8);
	}
/*GNB*/
.gnb {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0 10%;
	width: 100%;
	height: 50px;
}
.logo {
	float: left;
	height: 50px;
}
	.ci_encom {
		float: left;
		width: 110px;
		height: 100%;
		background: center /contain url('../images/ci_encom.svg') no-repeat;
	}
	.logo > span:last-child {
		float: left;
		margin-left: 10px;
		font: 1rem/50px 'NotoMedium';
	}
		.logo > span:last-child::before {
			content: '';
			position: absolute;
			top: 17px;
			float: left;
			margin: 0 -6px;
			display: inline-block;
			width: 2px;
			height: 16px;
			background: #FFF;
		}
.mm_wrap {
	float: right;
	font: 1rem/50px 'NotoMedium';
	color: #BEC8DF;
}
	.mm_wrap > span {
		float: left;
		padding: 0 22px;
	}
	.mm_wrap > span > a {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.mm_wrap > span > a:hover {
		background: trasnparent;
		color: #FFF;
	}
.mm_wrap > span > a::before, .mm_wrap > span > a::after {
		content: '\005B';
		left: 50px;
		position: absolute;
		top: -11px;
		display: inline-block;
		font-size: 1.5rem;
		color: #FFF;
		opacity: 0;
}
	.mm_wrap > span > a::after {
		content: '\005D';
		left: initial;
		right: 50px;
	}
	.mm_wrap > span > a:hover:before {
		left: -15px;
		opacity: 1;
	}
	.mm_wrap > span > a:hover:after {
		right: -15px;
		opacity: 1;
	}
	.mm_wrap > span > a, .mm_wrap > span > a:after, .mm_wrap > span > a:before {
		-webkit-transition: all 400ms ease-in-out;
		transition: all 400ms ease-in-out;
	}
.breadcrumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 70px;
	text-align: center;
}
	.breadcrumb > ul {
		float: left;
		padding: 0;
		width: 100%;
		text-align: center;
	}
	.breadcrumb > ul > li {
		display: inline-block;
		margin-right: 15px;
		font: 1.944rem/70px 'NotoBold';
	}
	.breadcrumb > ul > li::after {
		content: '';
		position: absolute;
		top: 22px;
		float: left;
		margin: 0 8px;
		display: inline-block;
		width: 3px;
		height: 30px;
		background: #FFF;
	}
	.breadcrumb > ul > li:last-child::after {
		display: none;
	}
.nav {
	display: flex;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	flex-direction: row;
    justify-content: center;
    align-items: center;
	position: absolute;
	bottom: -30px;
	padding: 0 10%;
	width: 100%;
	text-align: center;
}
	.nav > ul {
		display: inline-block;
		padding: 0;
		width: 100%;
		text-align: center;
		overflow: hidden;
		box-shadow: 0 2px 7px -3px rgba(0, 0, 0, .3);
	}
	.nav > ul > li {
		cursor: pointer;
		box-sizing: border-box;
		display: inline-block;
		float: left;
		height: 100%;
		background: #FFF;
		border: 1px solid var(--border-color);
		border-left: 0;
		font: 0.833rem/60px 'Noto';
		color: var(--font-color);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}
		.nav.nav_smart > ul > li {
			width: calc(100% / 6);
		}
		.nav.nav_special > ul > li {
			width: calc(100% / 2);
		}
	.nav > ul > li:first-child {
		border-left: 1px solid var(--border-color);
	}
	.nav > ul > li > a {
		box-sizing: border-box;
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.nav > ul > li.sm_on {
		background: var(--main-color);
		font-family: 'NotoMedium';
		color: #FFF;
	}
/*mobile*/
.mobile, .mobile body {
	overflow-y: hidden;
}
.btn_toggle {
	cursor: pointer;
	position: relative;
	display: none;
	float: right;
	width: 50px;
	height: 50px;
}
	.btn_toggle span {
		position:absolute;
		left: 5px;
		display:inline-block;
		width:35px;
		height:3px;
		background-color: #FFF;
		transform-origin:center;
		transition: opacity 0.1s linear, all 0.35s linear;
	}
	.btn_toggle span:nth-of-type(1){ top: 5px;	}
	.btn_toggle span:nth-of-type(2){ top: 20px;	}
	.btn_toggle span:nth-of-type(3){ top: 35px; }
	.mobile .btn_toggle span:nth-of-type(1){ transform: rotate(45deg); top: 20px; }
	.mobile .btn_toggle span:nth-of-type(2){ opacity:0; }
	.mobile .btn_toggle span:nth-of-type(3){ transform: rotate(-45deg); top: 20px; }
.mask {
	display: none;
	position: fixed;
	top: 90px;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.6);
	z-index: 997;
}
	.mobile .mask {
		display: block;
	}
.m_nav {	
	box-sizing: border-box;
	position: fixed;
	top: 90px;
	right: -60%;
	float: right;
	width: 60%;
	max-width: 400px;
	height: calc(100% - 90px);
	background: #FFF;
	overflow-y: auto;
	transition: right 1s ease;
	z-index: 998;
}
	.mobile .m_nav {
		right: 0;
	}
.m_nav > ul {
	box-sizing: border-box;
	overflow: hidden;
}
.m_nav > ul > li {
	cursor: pointer;
	box-sizing: border-box;
	float: left;
	padding: 15px 20px;
	width: 100%;
	border-bottom: 1px solid var(--border-color);
	font: 1.143rem 'Noto';
	color: var(--font-color);
	text-align: left;
}
.m_nav > ul a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.m_nav > ul > .m_mm {
	background: var(--main-color);
	color: #FFF;
	font-family: 'NotoBold';
}

/**content**/
section {
	float: left;
	width: 100%;
}
	section > article {
	box-sizing: border-box;

	}
.intro {
	padding: 100px 0 60px 0;
	border-bottom: 1px solid var(--border-color);
}
	.intro > p {
		padding: 0 10%;
		line-height: 35px;
		word-break: keep-all;
	}
.content {
	display: flex;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	flex-direction: column;
	align-items: center;
	float: left;
	width: 100%;
	padding: 60px 10%;
	border-bottom: 1px solid var(--border-color);
	text-align: center;
}
	.content:last-child {
		border-bottom: 0;
	}
.sub_title {
	float: left;
	margin-bottom: 50px;
	width: 100%;
	font: 1.444rem 'NotoBold';
	color: var(--main-color);
	text-align: left;
}
	.reference > .sub_title {
		font:1rem 'NotoBold';
		margin-bottom: 20px;
	}
.content > img {
	width: auto;
	max-width: 100%;
}
.content > h3 {
	float: left;
	margin: 0 0 80px 0;
	width: 100%;
	font: 1.667rem 'NotoBold';
	color: var(--font-color);
}
	.content > h3::before, .content > h3::after {
		content: '\275D';
		margin-right: 10px;
		font: 2.222rem 'NotoBlack';
		color: var(--main-color);
	}
	.content > h3::after {
		content: '\275E';
		margin-left: 10px;
	}
/**footer**/
footer {
	box-sizing: border-box;
	display: flex;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
    justify-content: center;
	align-items: center;
	float: left;
	width: 100%;
	padding: 40px 10%;
	min-height: 150px;
	background: #2C2C2C;
	font: 0.778rem/25px 'NotoLight';
	color: #FFF;
	text-align: center;
}
.logo_footer {
	box-sizing: border-box;
	margin-right: 10px;
	width: 200px;
	height: 60px;
	background: center /contain url('../images/ci_encom.svg') no-repeat;
}
.info {
	box-sizing: border-box;
	width: 70%;
	text-align: left;
}
	.info > span {
		box-sizing: border-box;
		float: left;
		margin-right: 10px;
		width: 47%;
	}
	.info > span:nth-child(2n) {
		margin-right: 0;
	}
	.info > span:last-child {
		width: 100%;
	}
/**Media Query**/
@media screen and (max-width:1900px) {
	.nav.nav_smart > ul > li {
		width: calc(100% / 3);
	}
	.nav.nav_smart > ul > li:nth-child(3n+1) {
		border-left: 1px solid var(--border-color);
	}
	.nav_smart {
		bottom: -62px;
	}
}
@media screen and (max-width:768px) {
	html, body { font-size: 14px; }
	.gnb { padding: 0 10px; }
	.mm_wrap { display: none; }
	.btn_toggle { display: block; }
	.nav { padding: 0 5%; bottom: -25px; }
		.nav > ul > li { line-height: 50px; }
	.nav.nav_smart > ul > li { width: calc(100% / 2); }
		.nav.nav_smart > ul > li:nth-child(3n+1) { border-left: 0; }
		.nav.nav_smart > ul > li:nth-child(2n+1) { border-left: 1px solid var(--border-color); }
	.nav_smart { bottom: -75px; }
	.breadcrumb { height: 100px; }
		.breadcrumb > ul > li { width: 100%; }
		.breadcrumb > ul > li:first-child { font: 1.571rem/30px 'NotoBold'; }
		.breadcrumb > ul > li::after { display: none; }
	.sub_title { font-size: 1.286rem; }
	.intro { padding: 120px 0 60px 0; }
		.intro > p { padding: 0 7%; line-height: 25px; }
	.content { padding: 30px 7%; }
		.content > h3 { margin-bottom: 40px; }
		.sub_title { margin-bottom: 20px; }
	footer { flex-direction: column; padding: 30px 7%; }
		.logo_footer { margin: 0 0 20px 0 !important; }
		.info, .info > span { margin: 0; width: 100%; }
}