@font-face {
	font-family: 'NotoSansCJK_Bold';
	/*src: url('../fonts/NotoSansCJKkr-Bold.otf');*/
}

@font-face {
	font-family: 'NotoSansCJK_Regular';
	/*src: url('../fonts/NotoSansCJKkr-Regular.otf');*/
}

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

/* Box Model */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Basic */

@-ms-viewport {
	width: device-width;
}

body {
	-ms-overflow-style: scrollbar;
}

body {background: #264766;}

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

/* Type */
body, input, select, textarea {
	color: rgba(255, 255, 255, 0.55);
	font-family: NotoSansCJK_Regular;
	font-size: 16.5pt;
	font-weight: normal;
	line-height: 1.75;
	overflow: hidden;
}

a {
	-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
	-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
	-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
	transition: color 0.2s ease, border-bottom-color 0.2s ease;
	border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
	color: inherit;
	text-decoration: none;
}

/* Wrapper */
.wrapper {position: relative;}
.wrapper.alt {background-color: #261c3e;}

/* 각 컨텐츠별로 색상 및 패턴 적용 */
.wrapper.style1 {background-color: #4f6f84; background-image: url("../images/pattern2.png");}
.wrapper.style2 {background-color: #326594;	background-image: url("../images/pattern2.png");}
.wrapper.style3 {background-color: #264766;}

.wrapper.fullscreen {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	min-height: 40vh;
}

body.is-ie .wrapper.fullscreen {height: 100vh;}

.wrapper.fade-up > .inner {
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	-moz-transition: opacity 1s ease, -moz-transform 1s ease;
	-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
	-ms-transition: opacity 1s ease, -ms-transform 1s ease;
	transition: opacity 1s ease, transform 1s ease;
	opacity: 1.0;
}

.wrapper.fade-up.inactive > .inner, body.is-loading .wrapper.fade-up > .inner {
	opacity: 0;
	-moz-transform: translateY(1em);
	-webkit-transform: translateY(1em);
	-ms-transform: translateY(1em);
	transform: translateY(1em);
}

.wrapper.fade-down > .inner {
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	-moz-transition: opacity 1s ease, -moz-transform 1s ease;
	-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
	-ms-transition: opacity 1s ease, -ms-transform 1s ease;
	transition: opacity 1s ease, transform 1s ease;
	opacity: 1.0;
}

.wrapper.fade-down.inactive > .inner, body.is-loading .wrapper.fade-down > .inner {
	opacity: 0;
	-moz-transform: translateY(-1em);
	-webkit-transform: translateY(-1em);
	-ms-transform: translateY(-1em);
	transform: translateY(-1em);
}

.wrapper.fade > .inner {
	-moz-transition: opacity 1s ease;
	-webkit-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	transition: opacity 1s ease;
	opacity: 1.0;
}

.wrapper.fade.inactive > .inner, body.is-loading .wrapper.fade > .inner {
	opacity: 0;
}

/* Wrapper (main) */
#wrapper {padding-left: 384px;}

/* Sidebar */
#sidebar {
	width: 284px;
	margin: 0 50px;
	cursor: default;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	text-align: right;
}

#sidebar > .inner {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	-moz-transition: opacity 1s ease;
	-webkit-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	transition: opacity 1s ease;
	min-height: 100%;
	opacity: 1;
	width: 100%;
	height: 100%;
}

#sidebar nav > ul {
	list-style: none;
	padding: 0;
}

#sidebar nav > ul > li {
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	-moz-transition: opacity 0.15s ease, -moz-transform 0.75s ease;
	-webkit-transition: opacity 0.15s ease, -webkit-transform 0.75s ease;
	-ms-transition: opacity 0.15s ease, -ms-transform 0.75s ease;
	transition: opacity 0.15s ease, transform 0.75s ease;
	opacity: 1;
	padding: 0;
	position: relative;
}

/* sidebar 지연로딩*/
#sidebar nav > ul > li:first-child {
	margin: 0;
}

#sidebar nav > ul > li:nth-child(1) {
	-moz-transition-delay: 0.45s;
	-webkit-transition-delay: 0.45s;
	-ms-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

#sidebar nav > ul > li:nth-child(2) {
	-moz-transition-delay: 0.65s;
	-webkit-transition-delay: 0.65s;
	-ms-transition-delay: 0.65s;
	transition-delay: 0.65s;
}

#sidebar nav > ul > li:nth-child(3) {
	-moz-transition-delay: 0.85s;
	-webkit-transition-delay: 0.85s;
	-ms-transition-delay: 0.85s;
	transition-delay: 0.85s;
}

#sidebar nav > ul > li:nth-child(4) {
	-moz-transition-delay: 1.05s;
	-webkit-transition-delay: 1.05s;
	-ms-transition-delay: 1.05s;
	transition-delay: 1.05s;
}

#sidebar nav > ul > li:nth-child(5) {
	-moz-transition-delay: 1.25s;
	-webkit-transition-delay: 1.25s;
	-ms-transition-delay: 1.25s;
	transition-delay: 1.25s;
}

#sidebar nav a {
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-ms-transition: color 0.2s ease;
	transition: color 0.2s ease;
	border: 0;
	color: #7a90a7;
	display: block;
	font-size: 20px;
	height: 90px;
	padding: 27px 14px 0px 0px;
	outline: 0;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	border-bottom: 2px solid #254563;
}

#sidebar nav a:before, #sidebar nav a:after {
	border-radius: 0.2em;
	bottom: 0;
	content: '';
	height: 100%;
	position: absolute;
	right: 0;
	width: 100%;
	opacity: 0.1;
}

#sidebar nav a:after {
	background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91);
	background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91);
	background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91);
	-moz-transition: max-width 0.2s ease;
	-webkit-transition: max-width 0.2s ease;
	-ms-transition: max-width 0.2s ease;
	transition: max-width 0.2s ease;
	max-width: 0;
}

/* 사이드바 마우스오버시 백그라운드이미지 삽입 */
#sidebar nav a:hover {
	color: #ffffff;
	background:url(../images/lnb-over-bg.png) no-repeat; width: 284px; height: 88px;
}

#sidebar nav a.active {
	color: #ffffff;
}

#sidebar nav a.active:after {
	max-width: 100%;
}

body.is-loading #sidebar > .inner {
	opacity: 0;
}

body.is-loading #sidebar nav ul li {
	-moz-transform: translateY(2em);
	-webkit-transform: translateY(2em);
	-ms-transform: translateY(2em);
	transform: translateY(2em);
	opacity: 0;
}

.inner {width: 100%; height: 384px;}

/* 사이드바 */
.sidebar_wrapper {height: 100%;width: 384px; position: fixed; z-index: 99; background-color: #172532;}

.sidebar_header {height: 90%;}
.header_title {height: 168px;}
.titleDiv {width: 284px; height: 100%; margin-left: 50px; padding-top: 52px;}
.titleDiv > p {font-size: 36px; color: #ffffff; font-family: NotoSansCJK_Bold; letter-spacing: 0.05em; text-align: right; padding-right: 14px;}
.titleUnder {width: 284px; border-top: 2px solid #254563; margin-left: 50px;}

.sidebar_footer {height: 10%; width: 100%; background-color: #0b1219; display: table;}
.sidebar_footer > p {text-align: center; font-size: 16px; color: #3d4c5b; /*line-height: 6.2; */display: table-cell; vertical-align: middle;}

/* 컨텐츠 영역 */
.content_curr_wrapper {float: left; width: 31px; height: 100%;}
.icon_curr {background:url(../images/current.png) no-repeat; width: 31px; height: 384px;}

.content_icon_wrapper {float: left; width: 488px; padding: 58px 125px 58px 95px;}
.content_icon_wrapper > div.icon_01 {background:url(../images/pw-check.png) no-repeat; width: 268px; height: 268px; cursor: pointer;}
.content_icon_wrapper > div.icon_02 {background:url(../images/pw-change.png) no-repeat; width: 268px; height: 268px; cursor: pointer;}
.content_icon_wrapper > div.icon_03 {background:url(../images/certificate-out.png) no-repeat; width: 268px; height: 268px; cursor: pointer;}
.content_icon_wrapper > div.icon_04 {background:url(../images/certificate-get.png) no-repeat; width: 268px; height: 268px; cursor: pointer;}
.content_icon_wrapper > div.icon_05 {background:url(../images/certificate-copy.png) no-repeat; width: 268px; height: 268px; cursor: pointer;}
.content_icon_wrapper > div.icon_06 {background:url(../images/certificate-delete.png) no-repeat; width: 268px; height: 268px; cursor: pointer;}
.content_icon_wrapper > div.icon_07 {background:url(../images/backup.png) no-repeat; width: 268px; height: 268px;}
.content_icon_wrapper > div.icon_08 {background:url(../images/restore.png) no-repeat; width: 268px; height: 268px;}

.content_main_wrapper {height: 100%; padding: 118px 110px 0px 519px;}
.content_main_wrapper.special1 {padding-top: 88px;}

.content_main_title {height: 60px; cursor: pointer;}
.content_main_title > div:first-child {float: left; font-size: 39px; letter-spacing: -0.025em; color: #ffffff; font-family: NotoSansCJK_Bold; text-align: left; line-height: 1.4;}
.content_main_title.width1 {width: 277px;}
.content_main_title.width2 {width: 316px;}
.content_main_title.width3 {width: 355px;}

.content_main_ico_out {background:url(../images/btn_out.png) no-repeat; width: 38px; height: 38px; float: left; margin: 11px 16px;}
.content_main_ico_over {background:url(../images/btn_over.png) no-repeat; width: 38px; height: 38px; float: left;}
.content_main_info {font-size: 20px; color: #ffffff; text-align: left; padding-top: 25px; line-height: 34px;}
.content_main_info.special2 {padding-top: 28px; line-height: 28px;}
.special2 > p {padding-bottom: 16px;}

.content_division {width: 100%; border-top: 1px solid #ffffff;}

.moveTop > .inner {width: 220px; height: 96px; padding: 29px 0; margin: 0 auto;}
.moveTop_info {float: left; font-size: 20px; color: #ffffff;}
.top_ico_out {background:url(../images/top-out.png) no-repeat; width: 38px; height: 38px; float: left; margin-right: 30px;}
.top_ico_over {background:url(../images/top-over.png) no-repeat; width: 38px; height: 38px; float: left;}

/* 비활성화 컨텐츠 */
section.disableContent {background-color: #959595 !important; background-image: url("../images/pattern2.png");} /*disable메뉴에 대한 배경 처리(최우선적 적용)*/
section.disableContent > div.inner > div.content_main_wrapper > div.content_main_title {cursor: default;}  /*disable메뉴에 대한 포인터효과 제거*/