@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(/skin/font/pretendard/woff2/Pretendard-Black.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(/skin/font/pretendard/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(/skin/font/pretendard/woff2/Pretendard-Bold.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(/skin/font/pretendard/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(/skin/font/pretendard/woff2/Pretendard-Medium.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(/skin/font/pretendard/woff2/Pretendard-Regular.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(/skin/font/pretendard/woff2/Pretendard-Light.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(/skin/font/pretendard/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(/skin/font/pretendard/woff2/Pretendard-Thin.woff2) format('woff2'), url(/skin/font/pretendard/woff/Pretendard-Thin.woff) format('woff');
}

:root {
    --info: #30B5BC;
}
* {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
header { background-color: var(--info); min-height: 56px; position: absolute; padding: 0px; z-index: 999; left: 0px; right: 0px; top: 0px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);}
#header-inner { height: 24px; overflow: hidden; }
#header-inner img { max-height: 24px; }
#nav-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
#nav-title span { font-size: 24px; color: white;}
#nav-title div.nav-title-logo { width: 118px; height: 24px; display: block; text-indent: -1000px; background: url(/skin/v2/image/logo/bg_logos.svg) no-repeat -109px -16px; overflow: hidden; }
#aside-header-title div.nav-title-logo { width: 118px; height: 24px; display: block; text-indent: -1000px; background: url(/skin/v2/image/logo/bg_logos.svg) no-repeat -109px -16px; overflow: hidden; }
#nav-left {position: absolute; left: 15px; top: 15px; max-width: 30px;}
#nav-back {position: absolute; left: 15px; top: 15px; max-width: 30px;}
#nav-right { position: absolute; right: 15px; top: 15px; max-width: 120px; }
#nav-right ul, #nav-right li { list-style: none; float: left;}
#nav-right li { width: 24px; margin-left: 16px;}
#nav-right .nav-right-item { width: 24px; height: 24px; display: inline-block; text-align: center; font-size: 20px;}
#nav-left .btn-aside { width: 24px; height: 24px; color: #fff;}

main { z-index: 998; padding-top: 15px; position: absolute; top:56px; left: 0px; right: 0px; min-height: 800px;}
main h3 { height: 24px; width: 100%; padding: 0px; position: relative; margin: 10px 0px;}
main h3 span {font-size: 1.2rem; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); font-weight: 600;}

#frmSign > div.form-group.mb-3 {background-color: var(--info);}

footer { background-color: #fff; z-index: 999; padding-top: 0;}

/*hr style*/
.bg-dot-wz { background-image: url('/skin/v2/image/bg/bg_dot_wz.svg'); background-repeat: repeat-x; width: 100%; height: 4px; display: block; border: none !important; padding: 0px; margin-bottom: 1rem; margin-top: 0;}
.bg-dot-white { background-image: url('/skin/v2/image/bg/bg_dot_white.svg'); background-repeat: repeat-x; width: 100%; height: 4px; display: block; border: none !important; padding: 0px; margin-bottom: 1rem; margin-top: 0;}

aside { height: 100%; position: fixed; left: 0; right: 0; transform: translateX(-100%); transition:transform 250ms ease-in-out; background-color: #fff; z-index: 2000; }
#aside-menu.on { transform: translateX(0); }
#aside-header { background-color: var(--info); width: 100%; height: 56px; position: absolute; left: 0; right: 0; top: 0;  }
#aside-header-title { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); height: 24px;}
#aside-header-right { position: absolute; right: 15px; top: 15px;}
#aside-header-right a { width: 24px; height: 24px; display: block; }
#aside-body { position: absolute; left: 0; top: 56px; right: 0; bottom: 0; overflow-y: scroll;}

.wz-box { width: 100vw; height: 220px; background: url('/skin/v2/image/bg/bg_wz_img.png') center center; background-size: cover; display: block; position: relative; border-bottom: 1px solid var(--info);}
.wz-box h5 { text-align: center; position: absolute; bottom: 5px; left: 0; right: 0; height: 24px; margin: 0; padding: 0; }
.wz-box h5.wz-box-text { }
.wz-box h5.wz-box-logo {  width: 118px; height: 30px; display: block; text-indent: -1000px; background: url(/skin/v2/image/logo/bg_logos.svg) no-repeat -109px -62px; overflow: hidden; left: 50%; transform:translateX(-50%);}
.wz-h4 { background-color: var(--info); color: #fff; padding: 5px 0; font-size: 1.25rem; text-align: center; margin: 15px 0; font-weight: 500;}

/*icons*/
.bi { display: inline-block; vertical-align: text-bottom;}


/*background color*/
.bg-info-light { background-color: var(--info-light);}
.bg-basic { background-color: #30B5BC !important;}

/*text color*/
.text-wz { color: #30B5BC !important;}
.badge-wz { background-color: var(--info); color: white;}
.border-wz { border-color: var(--info);}
.bg-wz { background-color: var(--info);}
.btn-wz-norad{ background-color: var(--info); color: white;}
.btn-wz{ background-color: var(--info); color: white; border-radius: 25px;}
.wz-rounded{ border-radius: 25px !important;}

.modal-title {color: white;}
.modal-header { background-color: var(--info);}
.btn-close {filter: invert(100%); vertical-align: middle; }
.btn-point-time:hover {background-color: var(--info); color: white; border-color: transparent;}
.btn-point-add:hover {background-color: var(--info); color: white; border-color: transparent;}
.wz-list li::marker{color: var(--info) !important;}
.text-gray{color: #d3d3d3;}
.text-content {line-height: 20px; font-size: 14px; color: #333; background-color: #f2f2f2;}
.fix-footer {position: absolute; left: 0; bottom: 0; width: 100%; padding: 15px 0;}


.fas[data-count]{
    position:relative;
}

.fas[data-count]:after{
    position: absolute;
    right: -0.75em;
    top: -.75em;
    content: attr(data-count);
    padding: .5em;
    border-radius: 10em;
    line-height: .9em;
    color: white;
    background: rgba(255,0,0,.75);
    text-align: center;
    min-width: 2em;
    font: bold .4em sans-serif;
}

.sr-only { display: none !important;}