@charset "utf-8";

/*------------------------- COMMON -------------------------*/
:root {
	/* fonts */
	--nt-r: 'Noto Regular';
	--nt-m: 'Noto Medium';
	--nt-b: 'Noto Bold';
	--sq-m: 'spoqa Medium';
	/* colors */
	--transp: transparent;
	--black: #000;
	--white: #FFF;
	--gray: #54575A;
	--navy: #003071;
	--hover: #fbfbfb;
	--primary-navy: #1C1F37;
	--secondary-blue: #0073E3;
	--accent-red: #FC532E;
	--neutral1: #262626;
	--neutral2: #777777;
	--neutral3: #A4A4A4;
	--neutral4: #E6E7E9;
	--neutral5: #FCFDFF;
	--neutral6: #FAFAFA;
	--neutral7: #E1E1E1;
	--neutral8: #999999;
	--neutral9: #f2f2f2;
	--neutral10: #8B8B8B;
	/* item */
	--item-md: translateY(-50%);
	--item-ct: translateX(-50%);
	--item-mc: translate(-50%, -50%);
	/* title */
	--title1-size: 38px;
	--title2-size: 34px;
	--title3-size: 32px;
	--title4-size: 30px;
	--sub-title1-size: 28px;
	--sub-title2-size: 26px;
	--sub-title3-size: 24px;
	--sub-title4-size: 22px;
	--sub-title5-size: 20px;
}

/* font */
@font-face {
	font-family: 'Noto Regular';
	font-style: normal;
	src: url("../font/NotoSansKR-Regular.woff2") format("woff2"), url("../font/NotoSansKR-Regular.woff") format("woff")
}

@font-face {
	font-family: 'Noto Medium';
	font-style: normal;
	src: url("../font/NotoSansKR-Medium.woff2") format("woff2"), url("../font/NotoSansKR-Medium.woff") format("woff")
}

@font-face {
	font-family: 'Noto Bold';
	font-style: normal;
	src: url("../font/NotoSansKR-Bold.woff2") format("woff2"), url("../font/NotoSansKR-Bold.woff") format("woff")
}

@font-face {
	font-family: 'spoqa Medium';
	font-style: normal;
	src: url("../font/SpoqaHanSansNeo-Medium.woff2") format("woff2"), url("../font/SpoqaHanSansNeo-Medium.woff") format("woff")
}

/* reset */
* {
	box-sizing: border-box
}

html,
body {
	width: 100%;
	height: 100%
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button,
select,
figure {
	margin: 0;
	padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
	font-weight: normal
}

body,
input,
textarea,
select,
button,
table {
	font-family: 'Noto Regular', Malgun Gothic, '돋움', Dotum, helvetica, arial, sans-serif;
	letter-spacing: -0.05rem
}

article,
aside,
dialog,
footer,
header,
section,
footer,
nav {
	display: block;
	margin: 0;
	padding: 0
}

/* html5 tags */
img,
fieldset,
iframe {
	border: 0 none
}

pre {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit
}

img {
	vertical-align: top
}

input,
select,
button {
	vertical-align: middle
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

select::-ms-expand {
	display: none
}

ul,
ol {
	list-style: none
}

i,
em,
address {
	font-style: normal
}

a {
	color: #000;
	text-decoration: none;
	word-break: break-all
}

a:hover,
a:active,
a:focus {
	text-decoration: none
}

a:focus {
	outline: -webkit-focus-ring-color auto 1px
}

label,
button {
	cursor: pointer
}

table {
	table-layout: fixed;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse
}

caption {
	visibility: hidden;
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0
}

th {
	font-weight: normal
}

button {
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	background-color: transparent
}

/* Fire Fox button style bug */
button:-moz-focus-inner {
	padding: 0;
	border: 0
}

/* layout */
body {
	height: 100%;
	background-color: var(--neutral5)
}

#wrap {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 1280px;
	max-width: 1920px;
	height: 100%;

}

.center {
	padding: 0 7%
}

.w50 {
	width: 50%
}

.w60 {
	width: 60%
}

.w100 {
	width: 100%
}

/* margin */
.mt-5 {
	margin-top: 5px !important
}

.mt-10 {
	margin-top: 10px !important
}

.mt-20 {
	margin-top: 20px !important
}

.mt-30 {
	margin-top: 30px !important
}

.mt-40 {
	margin-top: 30px !important
}

.mt-50 {
	margin-top: 30px !important
}

.ml-0 {
	margin-left: 0 !important
}

.ml-10 {
	margin-left: 10px !important
}

.ml-20 {
	margin-left: 20px !important
}

.ml-30 {
	margin-left: 30px !important
}

.ml-40 {
	margin-left: 40px !important
}

.mr-0 {
	margin-right: 0 !important
}

.mr-10 {
	margin-right: 10px !important
}

.mr-20 {
	margin-right: 20px !important
}

.mr-30 {
	margin-right: 30px !important
}

.mr-40 {
	margin-right: 40px !important
}

.mb-0 {
	margin-bottom: 0 !important
}

/* padding */
.pd-0 {
	padding: 0 !important
}

.pr-0 {
	padding-right: 0 !important
}

/* flex */
.flex {
	display: flex
}

.column {
	flex-direction: column !important
}

.item-start {
	align-items: start !important
}

.item-center {
	align-items: center !important
}

.item-end {
	align-items: flex-end !important
}

.js-l {
	justify-content: left !important
}

.js-c {
	justify-content: center !important
}

.js-r {
	justify-content: right !important
}

.js-sb {
	justify-content: space-between !important
}

.fx-wrap {
	flex-wrap: wrap !important
}

.fx-nowrap {
	flex-wrap: nowrap !important
}

.fx-none {
	flex: none !important
}


/* grid */
.grid{display:grid;}
.grid-col3{grid-template-columns:1fr 1fr 1fr}
.gap-5{gap:5px}
.gap-10{gap:10px}
.gap-20{gap:20px}
.gap-10x20{gap:10px 20px}

/* font */
.fs-14 {
	font-size: 14px !important
}

/* text */
.hidetext {
	position: absolute !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	margin: -1px !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	min-height: auto !important;
	display: block !important
}

.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.ta-c {
	text-align: center !important
}

.ta-l {
	text-align: left !important
}

.ta-r {
	text-align: right !important
}

.ta-top {
	vertical-align: top !important
}

.ta-top>.lang-txt {
	margin-top: 10px !important;
}

.ta-l.pos-center {
	display: block;
	margin: 0 auto;
	width: 75px;
}
.ta-l.pos-center.w-sm {
	width: 54px;
}

.fs-0 {
	font-size: 0
}

.fs-def>* {
	font-size: 16px
}

.link-blue,
.link-blue:hover,
.link-blue:active {
	color: var(--secondary-blue);
	text-decoration: underline
}

.txt-blue {
	color: var(--secondary-blue) !important
}

.txt-red {
	color: var(--accent-red) !important
}

.txt-gray {
	color: var(--neutral2) !important
}

.use-txt {
	font-family: var(--nt-m);
	color: var(--accent-red)
}

.disabled-txt {
	font-family: var(--nt-m);
	color: var(--neutral2)
}

.lang-txt {
	display: inline-block;
	width: 88px;
	height: 30px;
	margin-right: 10px;
	font-size: 14px;
	color: var(--neutral2);
	line-height: 28px;
	background-color: #F4F4F4;
	border: 1px solid #D8D8D8;
	border-radius: 3px;
	text-align: center
}

.state-txt-red {
	display: inline-block;
	width: 60px;
	height: 30px;
	line-height: 27px;
	border-radius: 5px;
	color: var(--accent-red);
	border: 1px solid var(--accent-red)
}

.state-txt-blue {
	display: inline-block;
	width: 60px;
	height: 30px;
	line-height: 27px;
	border-radius: 5px;
	color: var(--secondary-blue);
	border: 1px solid var(--secondary-blue)
}

.state-txt-gray {
	display: inline-block;
	width: 60px;
	height: 30px;
	line-height: 28px;
	border-radius: 5px;
	color: var(--neutral2);
	border: 1px solid var(--neutral2)
}

/* index */
.zindex-5 {
	z-index: 5
}

/*------------------------- ICON -------------------------*/
.ico {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center
}

.ico-down-blue {
	background-image: url('../img/ico-down-blue.svg')
}

.ico-down-black {
	background-image: url('../img/ico-down-black.svg')
}

.ico-down-white {
	background-image: url('../img/ico-down-white.svg')
}

.ico-upload-blue {
	background-image: url('../img/ico-upload-blue.svg')
}

.ico-upload-white {
	background-image: url('../img/ico-upload-white.svg')
}

.ico-sch-white {
	background-image: url('../img/ico-sch-white.svg')
}

.ico-sch-black {
	background-image: url('../img/ico-sch-black.svg')
}

.ico-sch-gray {
	background-image: url('../img/ico-sch-gray.svg')
}

.ico-close-black {
	background-image: url('../img/ico-close-black.svg')
}

.ico-close-gray {
	background-image: url('../img/ico-close-gray.svg')
}

.ico-refresh-black {
	background-image: url('../img/ico-refresh-black.svg')
}

.ico-date {
	background-image: url('../img/ico-date.svg')
}

.ico-description {
	width: 18px;
	height: 18px;
	background-image: url('../img/ico-description.svg')
}

.ico-pluscircle {
	width: 32px;
	height: 32px;
	background-image: url('../img/ico-pluscircle.svg')
}

.ico-circle-view {
	width: 36px;
	height: 36px;
	background-image: url('../img/ico-circle-view.svg')
}

.ico-circle-view-b {
	width: 32px;
	height: 32px;
	background-image: url('../img/ico-circle-view-b.svg')
}

.ico-circle-edit {
	width: 36px;
	height: 36px;
	background-image: url('../img/ico-circle-edit.svg')
}

.ico-circle-tr-edit {
	width: 32px;
	height: 32px;
	background-image: url('../img/ico-circle-tr-edit.svg')
}

.ico-circle-tr-preview {
	width: 32px;
	height: 32px;
	background-image: url('../img/ico-circle-tr-preview.svg')
}

.ico-circle-plus-black {
	width: 70px;
	height: 70px;
	background-image: url('../img/ico-circle-plus-black.svg')
}

.ico-circle-plus-border-white {
	width: 16px;
	height: 16px;
	background-image: url('../img/ico-circle-plus-border-white.svg')
}

.ico-circle-trash {
	width: 32px;
	height: 32px;
	background-image: url('../img/ico-circle-trash.svg')
}

.ico-circle-plus {
	width: 32px;
	height: 32px;
	background-image: url('../img/ico-circle-plus.svg')
}

.ico-card-arrow-prev {
	width: 68px;
	height: 68px;
	background-image: url('../img/ico-card-arrow-prev.svg')
}

.ico-file-del {
	background-image: url('../img/ico-file-del.svg')
}

.ico-list {
	background-image: url('../img/ico-list.svg')
}

.ico-save {
	background-image: url('../img/ico-save.svg')
}

.ico-trash {
	background-image: url('../img/ico-trash.svg')
}

.ico-preview {
	background-image: url('../img/ico-preview.svg')
}

.ico-url {
	width: 23px;
	height: 23px;
	background-image: url('../img/ico-url.svg')
}

.ico-arrow-more {
	width: 36px;
	height: 36px;
	background-image: url('../img/arrow-more.svg')
}

.ico-trending-up {
	width: 24px;
	height: 24px;
	background-image: url('../img/ico-trending-up.svg')
}

.ico-trending-down {
	width: 24px;
	height: 24px;
	background-image: url('../img/ico-trending-down.svg')
}

.ico-state1 {
	width: 90px;
	height: 90px;
	background-image: url('../img/ico-state1.svg')
}

.ico-state2 {
	width: 70px;
	height: 70px;
	background-image: url('../img/ico-state2.svg')
}

.ico-state3 {
	width: 70px;
	height: 70px;
	background-image: url('../img/ico-state3.svg')
}

.ico-fb-pp {
	width: 9px;
	height: 19px;
	background-image: url('../img/ico-fb-pp.svg')
}

.ico-fb-org {
	width: 9px;
	height: 19px;
	background-image: url('../img/ico-fb-org.svg')
}

.ico-ins-org {
	width: 26px;
	height: 26px;
	background-image: url('../img/ico-ins-org.svg')
}

.ico-ins-pp {
	width: 26px;
	height: 26px;
	background-image: url('../img/ico-ins-pp.svg')
}

.ico-ins-sky {
	width: 26px;
	height: 26px;
	background-image: url('../img/ico-ins-sky.svg')
}

.ico-sns-gr {
	width: 29px;
	height: 15px;
	background-image: url('../img/ico-sns-gr.svg')
}

.ico-tt-gr {
	width: 18px;
	height: 18px;
	background-image: url('../img/ico-tt-gr.svg')
}

.ico-tt-pp {
	width: 18px;
	height: 18px;
	background-image: url('../img/ico-tt-pp.svg')
}

.ico-twitter-sky {
	width: 19px;
	height: 19px;
	background-image: url('../img/ico-twitter-sky.svg')
}

.ico-waibo-gr {
	width: 23px;
	height: 18px;
	background-image: url('../img/ico-waibo-gr.svg')
}

.ico-wechat-gr {
	width: 22px;
	height: 22px;
	background-image: url('../img/ico-wechat-gr.svg')
}

.ico-blue-pencil {
	width: 110px;
	height: 110px;
	background-image: url('../img/ico-blue-pencil.svg')
}

.ico-green-export {
	width: 110px;
	height: 110px;
	background-image: url('../img/ico-green-export.svg')
}

.ico-purple-pluscircle {
	width: 110px;
	height: 110px;
	background-image: url('../img/ico-purple-pluscircle.svg')
}

.ico-bx01 {
	width: 80px;
	height: 80px;
	background-image: url('../img/ico-bx01.svg')
}

.ico-bx02 {
	width: 80px;
	height: 80px;
	background-image: url('../img/ico-bx02.svg')
}

.ico-bx03 {
	width: 80px;
	height: 80px;
	background-image: url('../img/ico-bx03.svg')
}

.ico-bx04 {
	width: 80px;
	height: 80px;
	background-image: url('../img/ico-bx04.svg')
}

.ico-bx05 {
	width: 80px;
	height: 80px;
	background-image: url('../img/ico-bx05.svg')
}

/*------------------------- BUTTON -------------------------*/
.btn {
	display: inline-block;
	border-radius: 5px;
	font-family: var(--nt-m);
	background-color: var(--white)
}

.btn-full {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5
}

.btn>span {
	display: flex;
	justify-content: center;
	align-items: center
}

.btn .ico {
	margin-right: 5px
}

.btn-small {
	display: inline-block;
	border-radius: 5px;
	font-family: var(--nt-m);
	color: var(--secondary-blue);
	border: 1px solid var(--secondary-blue)
}

.btn-small>span {
	display: flex;
	height: 30px;
	padding: 0 16px;
	justify-content: center;
	align-items: center
}

.txt-btn {
	display: flex;
	padding: 5px 10px;
	align-items: center
}

.txt-btn>span {
	margin-left: 5px;
	line-height: 24px;
	font-family: var(--nt-m)
}

.btn-more {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 34px;
	right: 50px
}

/* button 높이 */
.h-small {
	height: 42px
}

.h-middle {
	height: 46px
}

.h-large {
	height: 50px
}

.h-small>span {
	height: 40px;
	padding: 0 10px 0 9px
}

.h-middle>span {
	height: 44px;
	padding: 0 10px 0 9px
}

.h-large>span {
	height: 50px;
	padding: 0 10px 0 9px
}

/* button 너비 */

.w-large>span {
	min-width: 210px
}

.w-mbase>span {
	min-width: 190px
}

.w-base>span {
	min-width: 140px
}

.w-middle>span {
	min-width: 116px
}

.w-small>span {
	min-width: 100px
}

/* button 색상 */
.btn-blue {
	background-color: var(--secondary-blue);
	color: var(--white)
}

.btn-black {
	background-color: var(--neutral1);
	color: var(--white)
}

.btn-blue-border {
	border: 1px solid var(--secondary-blue);
	color: var(--secondary-blue)
}

.btn-black-border {
	border: 1px solid var(--black);
	color: var(--black)
}

.btn-dgray-border {
	border: 1px solid var(--neutral2);
	color: var(--neutral1)
}

.btn-lgray-border {
	border: 1px solid var(--neutral7);
	background-color: var(--neutral6);
	color: var(--neutral2)
}

/* button 비활성화 */
.btn-disabled {
	border: 1px solid var(--neutral7);
	background-color: var(--neutral6);
	color: var(--neutral3);
	cursor: default;
	pointer-events: none;
}

.btn-disabled2 {
	border: 1px solid var(--neutral10);
	background-color: var(--neutral10);
	color: var(--white);
	cursor: default;
	pointer-events: none;
}

.table-toggle-area {
	position: relative;
}
.table-toggle-area .table-wrap {
	overflow: hidden;
	position: relative;
	height: 130px;
}

.table-toggle-area.open .table-wrap {
	height: auto;
}

.table-toggle-area .btn-block {
	position: relative;
	display: block;
	width: 100%;
	background: #EFF3F8;
	text-align: center;
}

.table-toggle-area .btn-toggle {
	position: relative;
	display: inline-block;
	padding: 6px 5px 8px;
	width: 100%;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.05em;
	color: #1C73E3;
	text-align: center;
}

.table-toggle-area .ico-css-arrow {
	display: inline-block;
	vertical-align: middle;
	width: 9px;
	height: 9px;
	border-top: 2px solid #1C73E3;
	border-right: 2px solid #1C73E3;
	margin-top: -8px;
	margin-left: 15px;
	transition: all .3s ease-in-out;
	transform: rotate(135deg) skew(2deg, 2deg);
}

.table-toggle-area.open .ico-css-arrow {
	margin-top: -1px;
	transform: rotate(-45deg) skew(2deg, 2deg);

}



/*------------------------- PAGINATION -------------------------*/
.pagination-wrap {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	align-items: center;
	justify-content: center
}

.pagination {
	display: flex;
	justify-content: center
}

.pagination>li {
	margin: 0 5px
}

.pagination a {
	color: var(--neutral2)
}

.pagination a,
.pagination strong {
	display: block;
	width: 36px;
	height: 36px;
	text-align: center;
	line-height: 36px
}

.pagination .active a,
.pagination .active strong {
	font-family: var(--nt-b);
	color: var(--secondary-blue);
	text-decoration: underline
}

.pg-ctrl a {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center
}

.pg-ctrl.disabled {
	cursor: default
}

.pg-ctrl.pg-first.disabled {
	opacity: .2
}

.pg-ctrl.pg-prev.disabled {
	opacity: .2
}

.pg-ctrl.pg-next.disabled {
	opacity: .2
}

.pg-ctrl.pg-last.disabled {
	opacity: .2
}

.pg-ctrl.pg-first {
	background-image: url('../img/pg-first.svg')
}

.pg-ctrl.pg-prev {
	background-image: url('../img/pg-prev.svg')
}

.pg-ctrl.pg-next {
	background-image: url('../img/pg-next.svg')
}

.pg-ctrl.pg-last {
	background-image: url('../img/pg-last.svg')
}

/* 오른쪽에 버튼이 있는 경우 */
.pagination-wrap.pg-left {
	padding-right: 150px
}


.dataTables_paginate.paging_bootstrap.pagination>ul {
	display: flex;
	justify-content: center
}

.dataTables_paginate.paging_bootstrap.pagination>li {
	margin: 0 5px
}

.dataTables_paginate.paging_bootstrap.pagination a {
	color: var(--neutral2)
}

.dataTables_paginate.pagination a,
.dataTables_paginate.pagination strong {
	display: block;
	width: 36px;
	height: 36px;
	text-align: center;
	line-height: 36px
}

.dataTables_paginate.pagination .active a,
.dataTables_paginate.pagination .active strong {
	font-family: var(--nt-b);
	color: var(--secondary-blue);
	text-decoration: underline
}
.dataTables_paginate.pagination .prev > a {
	background-image: url('../img/pg-prev.svg')
}
.dataTables_paginate.pagination .next > a {
	background-image: url('../img/pg-next.svg');
	content: ""
}



/*------------------------- TABLE -------------------------*/
.cmm-table thead th {
	height: 60px;
	padding: 10px;
	border-bottom: 1px solid var(--neutral7);
	text-align: center;
	background-color: #F9F9F9;
	border-top: 1px solid var(--neutral1);
	font-family: var(--nt-m);
	color: var(--neutral1)
}

.cmm-table tbody th,
.cmm-table tbody td {
	height: 60px;
	padding: 10px;
	border-bottom: 1px solid var(--neutral7);
	text-align: center;
	color: var(--neutral2);
	/* word-break: keep-all */
}

/* kty : 콘텐츠 리스트 ID 길이가 늘어남에 따라 font-size를 13px 로 변경*/
.rowspan-cell {
	border-right: 1px solid var(--neutral7);
	vertical-align: top;
	/* line-height: 40px */
	word-break: break-all !important;
}

.bd-top-gray thead th {
	border-top: 1px solid var(--neutral7)
}

/* scroll */
.table-scroll {
	overflow-y: scroll;
	max-height: 580px;
	padding-right: 20px
}

.table-scroll thead th {
	border-top: 1px solid var(--neutral7)
}

.table-scroll::-webkit-scrollbar {
	width: 10px;
	height: 10px
}

.table-scroll::-webkit-scrollbar-track {
	background-color: #D9D9D9
}

.table-scroll::-webkit-scrollbar-thumb {
	background-color: #ACACAC
}

/* 그룹관리 */
.cmm-table .menu-depth1 {
	padding-left: 20px;
	font-family: var(--nt-m);
	color: var(--secondary-blue)
}

.cmm-table .menu-depth2 {
	padding-left: 40px;
	font-family: var(--nt-m)
}

.cmm-table .menu-depth3 {
	padding-left: 70px;
	font-family: var(--nt-m)
}

.cmm-table .menu-depth4 {
	padding-left: 90px
}

.cmm-table .menu-depth5 {
	padding-left: 110px
}

.cmm-table .menu-depth3,
.cmm-table .menu-depth3~td {
	background-color: #F2F8FF
}

.cmm-table .menu-depth4,
.cmm-table .menu-depth4~td {
	background-color: #FAFCFF
}

.cmm-table .menu-depth5,
.cmm-table .menu-depth5~td {
	background-color: #f9f9f9
}


.cmm-table.type--row {
	position: relative;
}

.cmm-table.type--row::before {
	content: '';
	border-top: 1px solid #999;
	position: absolute;
	width: 100%;
	z-index: 10;
}

.cmm-table.type--row tbody th,
.cmm-table.type--row tbody td {
	border-bottom: 1px solid var(--neutral7);
	text-align: left;
}

.cmm-table.type--row tbody th {
	padding: 7px 20px;
	background-color: var(--neutral6);
	border-right: 1px solid var(--neutral7);
	font-weight: 400;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.05em;
	color: var(--neutral2);
}

.cmm-table.type--row tbody th h3 {
	padding: 10px;
}

.cmm-table.type--row tbody th label {
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.5px;
	color: var(--black);
}

.cmm-table.type--row tbody td {
	padding: 20px;
	color: var(--neutral2);
}



/*------------------------- FORM TYPE -------------------------*/
.form-base {
	width: 100%;
	min-width: 140px;
	height: 46px;
	padding: 0 20px 0 16px;
	border: 1px solid var(--neutral7);
	border-radius: 4px;
	background-color: var(--white);
	font-family: var(--nt-r);
	color: var(--neutral1);
	font-size: 16px
}

select {
	background-image: url('../img/arrow-select.svg');
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: right 13px center;

	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

select:disabled {
	background-image: url('../img/arrow-select-disabled.svg')
}

.form-base:disabled,
.form-base.disabled {
	background-color: var(--neutral6) !important;
	color: var(--neutral3) !important;
	pointer-events: none;
}

.form-base::placeholder {
	color: var(--neutral3)
}

.form-base:hover,
.form-base:focus {
	/* background-color: var(--hover) */
	background-color: var(--white);
}

.line-input {
	width: 60px;
	font-size: 16px;
	border: none;
	background: transparent;
	border-bottom: 1px solid var(--black);
	outline: none;
	text-align: center
}

/* input number 초기화 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

input[type=number] {
	-moz-appearance: textfield
}

/* input - check */
.chk-base input {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0
}

.chk-base input:hover+label:before {
	background-color: var(--hover)
}

.chk-base label {
	position: relative;
	padding-left: 32px;
	line-height: 24px
}

.chk-base label:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	margin-top: 1px;
	transform: translateY(-50%);
	left: 0;
	width: 22px;
	height: 22px;
	border: 1px solid var(--neutral7);
	box-sizing: border-box;
	background-color: var(--white)
}

.chk-base label:after {
	content: "";
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 22px;
	height: 22px;
	border: 1px solid var(--secondary-blue);
	background: var(--white) url('../img/ico-checkbox.svg') no-repeat center / contain;
	box-sizing: border-box
}

.chk-base input:checked+label:after {
	display: block
}

.chk-base input:disabled+label {
	cursor: default;
	color: var(--neutral-gray)
}

.chk-base input:disabled:checked+label:after {
	cursor: default;
	color: var(--neutral-gray);
	background: var(--neutral6) url('../img/ico-checkbox-disabled.svg') no-repeat center / contain
}

.chk-base input:disabled+label:before,
.chk-base input:disabled+label:after {
	border-color: var(--neutral7);
	background-color: var(--neutral6)
}

.chk-one label {
	padding-left: 22px !important
}

.chk-base.chk-pos-r label:before {
	left: auto;
	right: 0;
}

.chk-base.chk-pos-r label:after {
	left: auto;
	right: 0;
}

.chk-base.chk-pos-r label {
	padding-left: 0;
	padding-right: 30px;
}

.chk-base.chk-pos-r label span {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.5px;
}


.chk-list {
	display: flex
}

.chk-list li {
	margin-right: 10px;
	padding: 6px 0
}

.chk-list li:last-child {
	margin-left: 0
}

/* input - radio */
.rdo-base input {
	position: absolute;
	overflow: hidden;
	position: absolute;
	clip: rect(0 0 0 0);
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0
}

.rdo-base input:hover+label:before {
	background-color: var(--hover)
}

.rdo-base label {
	position: relative;
	padding-left: 30px;
	line-height: 24px;
	color: var(--neutral1);
}

.rdo-base label:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--neutral7);
	box-sizing: border-box;
	background-color: var(--white);
	border-radius: 100%
}

.rdo-base label:after {
	content: "";
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--secondary-blue);
	background: var(--white) url('../img/ico-radio.svg') no-repeat center / contain;
	box-sizing: border-box;
	border-radius: 100%
}

.rdo-base input:checked+label:after {
	display: block
}

.rdo-base input:disabled+label {
	cursor: default;
	color: var(--neutral-gray)
}

.rdo-base input:disabled:checked+label:after {
	cursor: default;
	color: var(--neutral-gray);
	background: var(--neutral6) url('../img/ico-radio-disabled.svg') no-repeat center / contain
}

.rdo-base input:disabled+label:before,
.rdo-base input:disabled+label:after {
	border-color: var(--neutral7);
	background-color: var(--neutral6)
}

.rdo-list {
	/* display: flex */
}

.rdo-list li {
	margin-right: 20px;
	display: inline-block;
	vertical-align: top;
}

/* .rdo-list li:first-child {
	margin-left: 0
} */

/* textarea */
.txtarea-edit {
	overflow: hidden;
	position: relative;
	/* height: 100px; */
	min-height: 100px;
	padding-bottom: 30px;
	border: 1px solid var(--neutral7);
	border-radius: 4px;
	cursor: text
}

.txtarea-edit textarea {
	display: block;
	width: 100% !important;
	height: 100%;
	padding: 10px;
	/* resize: none; */
	border: none;
	outline: none;
	font-size: 16px
}

.txtarea-low {
	/* height: 70px; */
	min-height: 70px;
	padding: 0
}

textarea::placeholder {
	color: var(--neutral3)
}

.length-chk {
	display: flex;
	position: absolute;
	bottom: 7px;
	right: 11px
}

.length-chk>div {
	font-size: 14px;
	color: var(--neutral-gray)
}

.length-chk-num {
	display: flex;
	position: absolute;
	bottom: 7px;
	right: 11px
}

.length-chk-num>div {
	font-size: 14px;
	color: var(--neutral-gray)
}

/* input file */
.file-name {
	color: var(--neutral2);
	letter-spacing: 0
}

.file-clear {
	font-size: 0;
	margin-left: 20px
}

/* 가이드북 상세 이미지 */
.form-img-area {
	height: 260px;
	margin-right: 10px
}

.form-img-area img {
	height: 100%
}

/*------------------------- DATEPICKER -------------------------*/
.datepicker_wrap {
	position: relative;
	width: 160px;
	height: 46px
}

.datepicker {
	width: 100%;
	height: 100%;
	padding: 0 15px
}

.ui-datepicker {
	width: 300px;
	padding: 10px;
	border: none !important;
	border-radius: 5px;
	margin-top: 5px;
	box-shadow: 2px 2px 10px rgba(176, 186, 204, 0.5)
}

.ui-datepicker-calendar thead th {
	font-family: var(--nt-r);
	padding: 0;
	width: 30px;
	height: 30px;
	line-height: 30px
}

.ui-datepicker-calendar td {
	padding: 2px;
	text-align: center
}

.ui-datepicker-calendar .ui-state-default {
	font-family: var(--nt-r);
	font-size: 14px;
	background: transparent;
	border: none;
	text-align: center;
	width: 30px;
	height: 30px;
	padding: 0;
	line-height: 30px;
	border-radius: 30px
}

.ui-datepicker-calendar .ui-state-default.ui-state-hover {
	background: var(--hover)
}

.ui-datepicker-calendar .ui-state-default.ui-state-highlight {
	font-family: var(--nt-m);
	color: var(--secondary-blue)
}

.ui-datepicker-calendar .ui-state-highlight.ui-state-active {
	color: var(--white)
}

.ui-datepicker-calendar .ui-state-default.ui-state-active {
	font-family: var(--nt-m);
	background: var(--secondary-blue);
	color: var(--white)
}

.ui-datepicker-header {
	background-color: transparent;
	border: none;
	margin-bottom: 10px
}

.ui-datepicker-header .ui-icon {
	width: 24px;
	height: 24px
}

.ui-datepicker-header .ui-datepicker-prev.ui-state-hover {
	cursor: pointer;
	border: none;
	left: 2px;
	top: 2px;
	background-color: var(--hover)
}

.ui-datepicker-header .ui-datepicker-next.ui-state-hover {
	cursor: pointer;
	border: none;
	right: 2px;
	top: 2px;
	background-color: var(--hover)
}

.ui-datepicker-header .ui-datepicker-prev {
	width: 35px;
	height: 35px;
	border-radius: 35px;
	background-image: url('../img/pg-prev_on.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain
}

.ui-datepicker-header .ui-datepicker-next {
	width: 35px;
	height: 35px;
	border-radius: 35px;
	background-image: url('../img/pg-next_on.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain
}

.ui-datepicker-title select {
	height: 32px;
	border-color: var(--neutral7);
	border-radius: var(--bdr-base);
	text-align: left;
	padding: 0 7px;
	font-family: var(--nt-m)
}

.ui-datepicker .ui-datepicker-title select {
	width: 40%
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {
	margin-left: 10px
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
	margin-right: 5px
}

.datepicker_wrap .ico-date {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 24px;
	height: 24px;
	transform: var(--item-md)
}

.datepicker:disabled~.ico-date {
	background-image: url('../img/ico-date-disabled.svg')
}

/*------------------------- HEADER -------------------------*/
.header {
	width: 100%;
	color: #777;
	background-color: var(--white)
}

/* header top */
.header-top {
	display: flex;
	height: 70px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--neutral7)
}

.logo a {
	display: block;
	width: 226px;
	height: 33px;
	background: url('../img/logo.png') no-repeat center;
	background-size: contain
}

.top-content {
	display: flex;
	align-items: center
}

.profile-txt em {
	font-family: var(--nt-m);
	color: var(--navy)
}

.top-menu {
	display: flex;
	position: relative;
	margin-left: 26px
}

.top-menu:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: -10px;
	width: 1px;
	height: 20px;
	background-color: #D2D2D2;
	transform: var(--item-md)
}

.top-menu a {
	display: block;
	width: 46px;
	height: 46px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain
}

.link-my {
	background-image: url('../img/ico-my.svg')
}

.link-logout {
	background-image: url('../img/ico-logout.svg')
}

.link-api {
	background-image: url('../img/ico-api.svg')
}

/* gnb */
.gnb-wrap {
	position: relative;
	/* background-color: var(--navy) */
}

.gnb-wrap.center {
	padding: 0;
}

.gnb-wrap:before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	min-width: 100%;
	height: 78px;
	transform: translateX(calc(-50% - 9px));
	background-color: var(--navy);
}

.gnb {
	/* display: flex;
	align-items: center;
	gap: 6.65% */
	display: table;
	table-layout: fixed;
	width: 100%;
	width: calc(100% - 34px);
}

.gnb li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.gnb a {
	display: inline-block;
	position: relative;
	padding: 27px 0;
	font-family: var(--nt-r);
	font-size: 18px;
	color: var(--white);
	line-height: 135%
}

.gnb li.on a,
.gnb li a:hover {
	font-family: var(--nt-m);
	color: #96BAFF
}

.gnb li a:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 4px;
	background-color: #96BAFF;
	border-radius: 3px;
	transition: .2s;
	transform: translateX(-50%)
}

.gnb li.on a:before,
.gnb li:hover a:before {
	content: "";
	display: block;
	width: 100%
}

/*------------------------- LNB -------------------------*/
.lnb-wrap {
	position: absolute;
	top: 287px;
	left: 7%;
	width: 220px;
	padding-bottom: 30px
}

.dth02-wrap,
.dth03-wrap,
.dth04-wrap,
.dth05-wrap {
	display: none
}

/* dth01 */
.dth01-wrap>li {
	margin-top: 10px
}

.dth01-wrap>li:first-child {
	margin-top: 0
}

.dth01-link {
	display: flex;
	width: 100%;
	height: 55px;
	padding: 0 20px;
	border-radius: 8px;
	align-items: center;
	justify-content: space-between;
	font-family: var(--nt-m);
	font-size: 17px;
	color: #262626;
	transition: .2s
}

/* dth01 하위 메뉴 존재 */
.dth01-link:after {
	content: "";
	display: none;
	width: 8px;
	height: 8px;
	border: 1px solid #777;
	border-width: 0 0 2px 2px;
	line-height: 0;
	font-size: 0;
	transform: rotate(-45deg);
	transition: .2s
}

.dth01.yes-dth .dth01-link:after {
	display: block
}

/* dth01 on */
.dth01.on .dth01-link {
	background-color: var(--secondary-blue);
	color: var(--white)
}

.dth01.on .dth01-link:after {
	border-color: var(--white);
	transform: rotate(-226deg)
}

/* dth02 */
.dth02-wrap {
	padding-left: 20px
}

.dth02 {
	border-bottom: 1px dotted var(--neutral7)
}

.dth02-link {
	display: flex;
	height: 50px;
	/* padding-right: 17px; */
	padding-right: 21px;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	color: #777
}

/* dth02 하위 메뉴 존재 */
.dth02-link:after {
	content: "";
	display: none;
	width: 6px;
	height: 6px;
	border: 1px solid #777;
	border-width: 0 0 1px 1px;
	line-height: 0;
	font-size: 0;
	transform: rotate(-45deg);
	transition: .2s
}

.dth02.yes-dth .dth02-link:after {
	display: block
}

/* dth02 on & hover */
.dth02.on .dth02-link,
.dth02:hover .dth02-link {
	color: var(--secondary-blue)
}

.dth02.on .dth02-link:after {
	border-color: var(--secondary-blue);
	transform: rotate(-226deg)
}

/* dth03 */
.dth03-wrap {
	/* padding: 10px 0 10px 10px; */
	padding: 10px 0 10px 6px;
	border-radius: 10px;
	background-color: #F2F8FF
}

.dth03-link {
	display: flex;
	/* height: 34px; */
	height: 30px;
	/* padding: 0 10px 0 25px; */
	padding: 0 10px 0 23px;
	align-items: center;
	position: relative;
	color: #858D93;
	/* font-size: 15px; */
	font-size: 14px;
}

.dth03-link.on,
.dth03-link:hover {
	color: var(--secondary-blue)
}

.dth03-link:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: 1px;
	width: 5px;
	height: 5px;
	background-color: #858D93;
	border-radius: 5px;
	transform: var(--item-md)
}

/* dth03 on & hover */
.dth03.on .dth03-link,
.dth03:hover .dth03-link {
	color: var(--secondary-blue)
}

.dth03.on .dth03-link:before,
.dth03:hover .dth03-link:before {
	background-color: var(--secondary-blue)
}

/*------------------------- SECTION -------------------------*/
/* section info */
.section-info {
	display: flex;
	height: 106px;
	padding: 0 10px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--neutral7)
}

.section-info.wide {
	height: 120px;
	justify-content: center;
	border-bottom: none
}

.section-title {
	font-family: var(--nt-m);
	font-size: 32px;
	color: #262626
}

/* path */
.path {
	display: flex;
	align-items: center
}

.path>li {
	position: relative;
	margin-left: 36px
}

.path>li>a,
.path>li>strong {
	font-size: 14px;
	color: #777;
	display: inline-block;
	vertical-align: top;
	margin-top: 1px;
}

.path>li>strong {
	color: var(--secondary-blue)
}

.path>li:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: -26px;
	width: 16px;
	height: 16px;
	background: url('../img/path-arrow.svg') no-repeat center;
	background-size: contain;
	transform: var(--item-md)
}

.path>li:first-child:after {
	display: none
}

.link-home {
	display: block;
	width: 20px;
	height: 20px;
	background: url('../img/ico-home.svg') no-repeat center;
	background-size: contain
}

/* container */
.container {
	margin-top: 31px;
	padding-left: 260px;
	padding-bottom: 50px
}

.container.wide {
	margin-top: 0;
	padding-left: 0
}

.content {
	padding-bottom: 58px
}

.content-top {
	display: flex;
	align-items: center;
	height: 43px;
	margin-bottom: 20px
}

.content-title {
	font-family: var(--nt-m);
	font-size: var(--sub-title3-size);
	color: var(--primary-navy)
}

.content-sub-title {
	margin-left: 14px;
	color: #969696
}

.content-sub-title:before {
	content: "/";
	margin-right: 7px
}

.content-sub-header {
	display: flex;
	margin-bottom: 16px
}

.content-sub-header h3 {
	font-family: var(--nt-m);
	font-size: var(--sub-title4-size)
}

.content-sub-header h3.small-tit {
	font-family: var(--nt-b);
	font-size: var(--sub-title5-size)
}

.content-sub-header .content-sub-title {
	margin-left: 10px
}

.content-sub-header .content-sub-title:before {
	content: "";
	margin-right: 0
}

/* content */
.content-box {
	padding: 30px;
	background-color: var(--white);
	border: 1px solid #E6E7E9;
	border-radius: 10px
}

.content-box .small-tit {
	font-family: var(--nt-m)
}

.content-bot {
	position: relative
}

.content-bot.js-r .btn {
	margin-left: 10px
}

.content-bot .btn {
	z-index: 5
}

/*------------------------- LOGIN -------------------------*/
.login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	background: url('../img/login-bg.jpg') no-repeat bottom;
	background-size: cover
}

.card {
	position: relative;
	width: 690px;
	height: 680px;
	padding: 90px 100px 100px;
	margin-top: -1%;
	background-color: rgba(255, 255, 255, .8);
	border-radius: 30px;
	box-shadow: 10px 10px 20px rgba(176, 186, 204, 0.4)
}

.card h1 {
	margin-bottom: 45px;
	text-align: center;
	font-family: var(--nt-m);
	font-size: var(--title2-size)
}

.card-row {
	margin-bottom: 14px
}

.card .form-base {
	height: 60px
}

.card .btn-blue {
	width: 100%;
	height: 70px;
	font-size: 18px
}

.card .reftxt-red {
	margin-bottom: 14px
}

.login-info {
	display: flex;
	justify-content: space-between;
	margin-top: 20px
}

.login-info label {
	color: var(--neutral2)
}

.login-info-find a {
	position: relative;
	color: var(--neutral2);
	margin-left: 12px
}

.login-info-find a+a {
	position: relative;
	padding-left: 14px;
	margin-left: 11px;
}

.login-info-find a+a::before {
	content: '';
	display: inline-block;
	border-left: 1px solid var(--neutral7);
	width: 1px;
	height: 14px;
	position: absolute;
	top: 6px;
	left: 0;
}


.link-row {
	position: absolute;
	bottom: 94px;
	left: 100px;
	width: calc(100% - 200px);
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding-top: 20px;
	border-top: 1px dashed var(--neutral7);

}


.btn-request {
	display: inline-block;
	width: 150px;
	height: 30px;
	background-color: #EFF3F8;
	color: var(--secondary-blue);
	font-size: 14px;
	text-align: center;
	line-height: 29px;
	border: 1px solid #D0DAED;
	border-radius: 5px
}

/* card sub */
.card.sub-on .card-login {
	display: none
}

.card.sub-on {
	width: 989px;
	height: 728px;
	overflow-y: auto;
	padding: 60px 72px 70px
}

.card-sub {
	display: none
}

.card.sub-on .card-sub {
	display: block
}

.card-sub-tit {
	position: relative
}

.card-sub-tit h2 {
	text-align: center;
	font-family: var(--nt-m);
	font-size: var(--title2-size);
	line-height: 68px
}

.card-sub-tit .card-prev {
	position: absolute;
	top: 0;
	left: 0
}

.request-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

.request-list>li {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 400px;
	height: 130px;
	margin-top: 30px;
	padding: 0 35px;
	font-size: 18px;
	font-family: var(--nt-m);
	color: var(--secondary-blue);
	background-color: #EFF3F8;
	border: 1px solid #D0DAED;
	border-radius: 5px;
	text-align: center;
	transition: .2s
}

.request-list>li:hover {
	background-color: var(--secondary-blue);
	color: var(--white)
}

.request-list>li:hover>p {
	color: var(--white) !important
}

.request-list>li a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.request-list>li p {
	font-size: 14px;
	color: #909CAB;
	line-height: 20px
}

.request-list>li p.txt-blue {
	margin: 4px 0;
	font-size: 16px;
	color: var(--secondary-blue)
}



.login-page .certify-field {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--neutral7);
	border-radius: 4px;

}

.login-page .certify-field .form-base {
	border: none;
	width: calc(100% - 100px);
	height: 46px;
}


.login-page .certify-field .btn {
	width: 100px;
	height: 46px;
	line-height: 43px;
	margin: 0;
	background-color: var(--white);
	border-left: 1px solid var(--neutral7);
	border-radius: 0 5px 5px 0;
}

.login-page .certify-field .btn span {
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.03em;
	color: var(--secondary-blue);
}


.login-page.js-step1 {}

.login-page.js-step1 .card-row.certify,
.login-page.js-step1 .btn-login {
	display: none;
}

.login-page.js-step2 {}

.login-page.js-step2 .certify-field {}

.login-page.js-step2 .btn-certify {
	display: none;
}


.login-page.js-step3 {}

.login-page.js-step3 .btn-certify {
	display: none;
}

.login-page.js-step3 .certify-field .btn {
	background-color: transparent;
	cursor: default;
	pointer-events: none;
	background-color: var(--neutral6);
	color: var(--neutral3);
}

.login-page.js-step3 .certify-field .btn span {
	color: var(--neutral1);
}

.login-page.js-step3 .login-page .certify-field .form-base,
.login-page.js-step3 .certify-field .form-base {
	background-color: transparent;
}

.login-page.js-step3 .certify-field .form-base {
	background-color: var(--neutral6);
}





/*------------------------- LOGOUT -------------------------*/
.logout-page {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center
}

.logout-page h1 {
	font-size: var(--title2-size);
	font-family: var(--nt-m);
	margin-bottom: 50px
}

.logout-page p {
	margin-bottom: 50px;
	font-size: 18px;
	line-height: 28px;
	color: var(--neutral1)
}

.logout-inner {
	padding-top: 271px;
	text-align: center;
	background: url('../img/logout-ill.svg') no-repeat top center / 261px 221px
}

.logout-inner .btn-blue {
	width: 100%;
	height: 70px;
	font-size: 18px
}







/*------------------------- DASHBOARD -------------------------*/
.dashboard {
	padding-bottom: 116px !important
}

.dashboard .content-box {
	overflow: hidden;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05)
}

.dashboard .section-title {
	font-family: var(--nt-b);
	font-size: 34px
}

.dashboard .section-info.wide {
	height: 150px
}

.dashboard .total-contents {
	height: 150px;
	background-color: #6A6FF9;
	box-shadow: 0px 3px 20px #CAD2FF
}

.dashboard .total-contents:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 19px;
	right: 61px;
	width: 159px;
	height: 158px;
	background: url('../img/ill-pp.svg') no-repeat center / contain
}

.total-contents h2 {
	font-size: 18px;
	font-family: var(--nt-m);
	color: var(--white)
}

.total-contents p {
	font-size: 24px;
	font-family: var(--nt-m);
	color: var(--white)
}

.total-contents em {
	font-size: 45px;
	font-family: var(--nt-b);
	color: var(--white)
}

.dashboard .content-box {
	position: relative;
	padding: 40px
}

.box-tit-wrap {
	display: flex;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--black)
}

.box-tit {
	display: flex;
	align-items: flex-end
}

.box-tit h2 {
	font-family: var(--nt-b);
	font-size: var(--sub-title4-size);
	color: #1C1F37;
	line-height: 32px;
	white-space: nowrap
}

.box-tit small {
	color: var(--neutral2);
	margin-left: 10px;
	line-height: 23px;
	white-space: nowrap
}

/* 실시간 연계 서비스 연동 현황 (m-bx1) */
.state-colors {
	display: flex;
	align-items: center;
	width: 132px;
	justify-content: space-between;
	padding: 6px 15px;
	border: 1px solid var(--neutral7);
	border-radius: 10px
}

.state-colors dt {
	font-size: 14px;
	color: var(--neutral2)
}

.state-colors dd {
	display: flex;
	align-items: center
}

.circle-ico {
	flex: none;
	display: inline-block;
	width: 19px;
	height: 19px;
	border-radius: 100%
}

.circle-blue {
	width: 14px;
	height: 14px;
	background-color: #1D92FF
}

.circle-blue-sdw {
	background-color: #1D92FF;
	box-shadow: 0px 0px 4px #1C73E3;
	border: 1px solid var(--white)
}

.circle-orange {
	width: 14px;
	height: 14px;
	background-color: #FF5E18
}

.circle-orange-sdw {
	background-color: #FF5E18;
	box-shadow: 0px 0px 4px #FD8630;
	border: 1px solid var(--white)
}

.real-time-list {
	display: flex;
	width: 100%;
	margin-left: 64px;
	flex-direction: column
}

.real-time-list>li {
	display: flex;
	margin-bottom: 6px;
	justify-content: space-between;
	padding: 19px 20px;
	border: 1px solid #E0E7F2;
	border-radius: 5px;
	background-color: #fcfcfc
}

.real-time-list h3 {
	font-size: 16px;
	color: var(--neutral2)
}

.m-bx1:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 30px;
	left: 40px;
	width: 150px;
	height: 137px;
	background: url('../img/ill-cells.svg') no-repeat center / contain
}

/* top 5 (m-bx2) */
.top5-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between
}

.top5-list {
	display: flex;
	width: 100%;
	height: 254px;
	margin-left: 64px;
	flex-direction: column;
	justify-content: space-between
}

.top5-list>li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	height: 46px;
	padding: 0 20px;
	border: 1px solid #E0E7F2;
	border-radius: 5px;
	background-color: var(--white)
}

.top5-tit b {
	display: inline-block;
	margin-right: 10px;
	font-size: 16px;
	font-family: var(--nt-m);
	color: var(--neutral1)
}

.top5-tit h3 {
	max-width: 200px;
	font-size: 16px;
	font-family: var(--nt-m);
	color: var(--neutral1)
}

.top5-list>li>p {
	width: 80px;
	text-align: right;
	font-family: var(--nt-m);
	color: var(--neutral2)
}

.top5-list>li:first-child {
	background-color: #F7FBFF
}

.top5-list>li:first-child .top5-tit>* {
	color: var(--secondary-blue)
}

.top5-list>li:first-child>p {
	font-size: 18px;
	color: var(--secondary-blue)
}

.top5-tit {
	display: flex
}

.m-bx2:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 32px;
	left: 50px;
	width: 146px;
	height: 119px;
	background: url('../img/ill-top5.svg') no-repeat center / contain
}

/* 비짓서울 운영지원 요청 (m-bx3) */
.m-bx3 h3 {
	font-size: 18px;
	font-family: var(--nt-m);
	color: var(--gray)
}

.m-bx3 small {
	font-size: 14px;
	color: var(--neutral2);
	font-family: var(--nt-r)
}

.m-bx3 h4 {
	font-family: var(--nt-b);
	font-size: 18px;
	color: var(--white)
}

.m-bx3 ul {
	display: grid;
	height: 174px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0 14px;
	grid-template-areas: "green sky blue purple"
}

.m-bx3 li {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	border-radius: 10px
}

.m-bx3 li p {
	font-size: 20px;
	font-family: var(--nt-m);
	color: var(--white);
	text-align: right
}

.m-bx3 li strong {
	font-size: 50px;
	font-family: var(--sq-m);
	color: var(--white);
	margin-right: 5px
}

.m-bx3 li:nth-child(1) {
	background-color: #50E3C9
}

.m-bx3 li:nth-child(2) {
	background-color: #71CBF4
}

.m-bx3 li:nth-child(3) {
	background-color: #5B89FF
}

.m-bx3 li:nth-child(4) {
	background-color: #A261FD
}

/* chart (m-bx4) */
.chart-legends>li {
	display: flex;
	align-items: center;
	height: 34px;
	margin: 5px;
	padding: 0 11px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.09)
}

.chart-legends>li:first-child {
	margin-left: 0
}

.chart-legends>li i {
	flex: none;
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 13px
}

.chart-legends>li span {
	font-size: 14px;
	color: var(--neutral2);
	margin-left: 10px
}

.c-bl {
	background-color: #5B89FF
}

.c-sk {
	background-color: #8FE4FF
}

.c-pk {
	background-color: #FB3EFF
}

.c-pp {
	background-color: #6E2FF2
}

.c-lpp {
	background-color: #DB76FF
}

.c-rd {
	background-color: #FA6F7D
}

.c-mt {
	background-color: #71E7D2
}

.c-yel {
	background-color: #FFD033
}

.chk-base label {
	color: var(--neutral2);

	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* 주간 현황 차트 (m-bx5) */
.m-bx5 .tab-btns {
	display: flex;
	margin-top: 24px;
	color: #E6E8F0;
	padding: 5px;
	border-radius: 5px;
	width: 177px;
	background-color: #E6E8F0;
	border-radius: 5px
}

.m-bx5 .tab-btns a {
	display: flex;
	justify-content: center;
	border-radius: 5px;
	align-items: center;
	border: none;
	padding: 0 20px;
	height: 30px;
	font-size: 14px;
	font-family: var(--nt-m);
	color: var(--gray);
	background-color: var(--transp)
}

.m-bx5 .tab-btns li.on a {
	box-shadow: 0px 8px 16px rgba(143, 149, 178, 0.25);
	background-color: var(--white);
	color: #54575A;
	font-family: var(--nt-b)
}

.m-bx5 .tab-btns li.on a:before {
	display: none
}

.m-bx5 .charts li {
	padding: 20px 50px;
	border-radius: 8px;
	background: var(--white);
	transition: opacity .3s ease;
	opacity: .5
}

.m-bx5 .charts li:hover {
	box-shadow: 0px 4px 20px #E3E5F3;
	opacity: 1
}

.m-bx5 .charts {
	display: grid;
	padding: 0 20px;
	margin-top: 30px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0 2%
}

.m-bx5 .charts p {
	text-align: center;
	font-size: 16px;
	color: var(--neutral2)
}

/* 조회수 (m-bx6) */
.view-top5-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0 30px
}

.view-top5-list>li {
	display: flex;
	position: relative;
	flex-direction: column;
	height: 340px;
	justify-content: space-between;
	padding: 18px 28px 35px;
	border: 1px solid var(--neutral7);
	border-radius: 20px;
	transition: border, box-shadow .3s ease
}

.view-top5-list>li:hover {
	border-color: #428EFF;
	box-shadow: 4px 4px 20px rgba(0, 23, 227, 0.2)
}

.v-t-tit-wrap {
	display: flex;
	justify-content: space-between
}

.v-t-tit-wrap .num {
	font-size: 100px;
	font-family: var(--sq-m);
	font-weight: bold
}

.v-t-tit {
	display: flex;
	align-items: flex-end;
	flex-direction: column
}

.v-t-num {
	display: flex;
	justify-content: right;
	align-items: flex-end
}

.v-t-num>span {
	font-size: 16px;
	color: var(--neutral2);
	margin-right: 10px;
	line-height: 180%
}

.v-t-num>strong {
	font-size: 50px;
	color: var(--black);
	font-family: var(--sq-m);
	line-height: 105%
}

.v-t-tit>span {
	display: flex;
	height: 40px;
	padding: 0 15px;
	justify-content: center;
	align-items: center;
	border-radius: 30px;
	border: 1px solid var(--neutral8);
	font-size: 16px;
	color: var(--neutral2)
}

.v-t-tit h3 {
	max-width: 175px;
	margin-top: 20px;
	word-break: keep-all;
	font-size: 30px;
	font-family: var(--nt-b);
	text-align: right;
	line-height: 150%
}

.view-top5-list>li:nth-child(1) {
	background-color: #F9FAFF
}

.view-top5-list>li:nth-child(2) {
	background-color: #FAFEFF
}

.view-top5-list>li:nth-child(3) {
	background-color: #FFFDFB
}

.view-top5-list>li:nth-child(4) {
	background-color: #FAFFFC
}

.view-top5-list>li:nth-child(5) {
	background-color: #FFFAFB
}

.view-top5-list>li:nth-child(1) .num,
.view-top5-list>li:nth-child(1) h3 {
	color: #7618F9
}

.view-top5-list>li:nth-child(2) .num,
.view-top5-list>li:nth-child(2) h3 {
	color: #11C5F3
}

.view-top5-list>li:nth-child(3) .num,
.view-top5-list>li:nth-child(3) h3 {
	color: #FFA347
}

.view-top5-list>li:nth-child(4) .num,
.view-top5-list>li:nth-child(4) h3 {
	color: #0CBD88
}

.view-top5-list>li:nth-child(5) .num,
.view-top5-list>li:nth-child(5) h3 {
	color: #F23677
}

.all-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}


/*------------------------- FORM LIST -------------------------*/
.necessary {
	color: var(--accent-red)
}

.reftxt-gray {
	font-size: 14px;
	color: var(--neutral2);
	line-height: 21px
}

.reftxt-lgray {
	font-size: 14px;
	color: #C5C5C5;
	line-height: 21px
}

.reftxt-red {
	font-size: 14px;
	color: var(--accent-red);
	line-height: 21px
}

/* tooltip */
.tooltip-wrap {
	display: flex;
	position: relative;
	align-items: center;
	margin-left: 6px
}

.tooltip-txt {
	visibility: hidden;
	padding: 10px;
	position: absolute;
	left: 30px;
	width: 330px;
	background-color: var(--gray);
	font-family: var(--nt-r);
	color: var(--white);
	font-size: 14px;
	text-align: left;
	word-break: keep-all;
	border-radius: 6px;
	z-index: 1
}

.tooltip-txt:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	border-width: 7px;
	border-style: solid;
	border-color: transparent var(--gray) transparent transparent;
	transform: translateY(-50%)
}

.tooltip-txt em {
	font-family: var(--nt-b)
}

.tooltip-wrap:hover .tooltip-txt {
	visibility: visible
}

/* 적합, 불가 */
.confirm-input {
	position: relative
}

.confirm-input input {
	padding-right: 58px
}

.confirm-txt {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	line-height: 46px;
	text-align: center
}

.confirm-no {
	color: var(--accent-red)
}

.confirm-ok {
	color: var(--secondary-blue)
}

/* form 타이틀 영역 */
.form-list-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px
}

.form-list-top h2 {
	font-family: var(--nt-m);
	font-size: var(--sub-title4-size)
}

/* form */
.form-list-section {
	margin-top: 30px
}

.form-list-section:first-child {
	margin-top: 0
}

.form-list-type {
	display: flex;
	position: relative;
	align-items: center;
	flex-wrap: wrap;
	border-top: 1px solid #999
}

.form-list-item {
	display: flex;
	flex-wrap: nowrap;
	align-content: stretch;
	width: 100%;
	min-height: 65px;
	border-bottom: 1px solid var(--neutral7)
}

.form-list-item .form-base {
	width: 300px
}

.form-list-item .form-base.w-100 {
	width: 100px
}

.form-list-item .form-base.w-160 {
	width: 160px
}

.form-list-item .form-base.w-200 {
	width: 200px;
	min-width: 200px;
}

.form-list-item .form-base.w-420 {
	width: 420px
}

.form-list-item .form-base.w100 {
	width: 100%
}

.form-list-item .form-base[name="tag"] {
	width: calc(100% - 145px);
}


.form-list-type .rdo-list {
	padding: 10px 0
}

.item-column {
	align-items: flex-start !important;
	flex-direction: column !important
}

.form-list-name {
	flex: none;
	display: flex;
	align-items: start;
	width: 250px;
	padding: 20px 30px;
	font-family: var(--nt-m);
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.05rem;
	background-color: var(--neutral6)
}
.form-list-name.w-300 {
	width: 300px;
}

.form-list-name h4,
.form-list-name h3,
.form-list-name label {
	font-size: inherit;
	word-break: keep-all
}

.form-list-cont {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* width: 78%; */
	width: calc(100% - (250px));
	padding: 9px 20px;
	color: var(--neutral2)
}

.form-list-cont .btn {
	margin-left: 10px
}

.form-list-cont.w100 {
	width: 100%
}

.form-list-row>li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	min-height: 63px;
	padding: 9px 20px;
	color: var(--neutral2);
	border-top: 1px solid var(--neutral7)
}

.form-list-row>li:first-child {
	border-top: none
}

.column-title {
	min-width: 65px;
	margin-right: 20px;
	white-space: nowrap;
	font-family: var(--nt-m);
	font-size: 14px;
	color: var(--neutral1)
}

.column-small-title {
	min-width: 50px;
	margin-right: 20px;
	white-space: nowrap;
	font-size: 14px;
	color: var(--neutral1)
}

/* img row */
.select-img-wrap {
	display: flex;
	flex-wrap: wrap
}

.select-img-area {
	overflow: hidden;
	position: relative;
	width: 300px;
	height: 210px;
	margin-right: 10px;
	margin-top: 10px;
	background-color: var(--neutral4)
}

.select-img-area .file-clear {
	position: absolute;
	top: 10px;
	right: 10px
}

/* url form */
.url-input {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.at {
	display: inline-block;
	width: 36px;
	text-align: center
}

.domain {
	margin-right: 10px
}

/* result */
.form-result {
	padding: 29px 0;
	margin-top: 30px;
	text-align: center;
	background-color: #F3F6FC;
	border-top: 1px solid #999;
	border-bottom: 1px solid var(--neutral7)
}

.form-result label {
	color: var(--gray)
}

.result-id {
	width: 392px;
	height: 54px;
	text-align: center;
	background-color: var(--white);
	border: 1px solid var(--neutral7);
	font-family: var(--nt-b);
	font-size: 20px;
	color: var(--secondary-blue)
}

/* two column */
.two-column-small .w50 {
	width: 50%
}

.two-column-small .form-list-name {
	width: 120px
}

.two-column-small .form-list-cont {
	width: 70%
}

.two-column-small .w100 .form-list-cont {
	/* width: 90% */
	width: 100%;
}

.two-column-base .w50 {
	width: 50%;
	flex-wrap: nowrap
}

.two-column-base .w50 .form-base {
	width: auto
}

.two-column-base .w50 .form-list-cont {
	width: auto
}

/* cont select row */
.cont-select-item {
	display: flex;
	align-items: center;
	min-height: 42px
}

/* 권장 사이즈 */
.img-size-ref {
	display: none
}

/*------------------------- POPUP -------------------------*/
.popup-wrap {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	min-width: 1280px;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000
}

.popup-wrap.open {
	display: flex
}

.popup-box {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 1040px;
	max-height: 90%;
	padding: 30px 30px 40px 30px;
	background-color: var(--white);
	border-radius: 20px
}

.popup-title-wrap {
	display: flex;
	margin-bottom: 20px;
	padding-bottom: 20px;
	justify-content: space-between;
	border-bottom: 1px solid var(--black)
}

.popup-title {
	font-family: var(--nt-m);
	font-size: var(--sub-title3-size);
	color: var(--black)
}

.popup-content {
	padding-right: 20px
}

.popup-content .form-list-type {
	border-color: var(--neutral7)
}

.popup-scroll {
	overflow-y: auto;
	height: 100%
}

.popup-container {
	height: 100%
}

.popup-wrap .form-list-name {
	width: 200px
}

.popup-wrap .form-list-cont {
	width: 740px
}

.popup-wrap .cell-search .form-base {
	width: 570px
}

.popup-wrap .cell-select-search select.form-base {
	width: 170px
}

.popup-wrap .cell-select-search input.form-base {
	width: 384px;
	margin-left: 10px
}

.popup-wrap .w50.form-list-item {
	width: 50%
}

.popup-wrap .w50 .form-list-name {
	width: 50%
}

.popup-wrap .w50 .form-list-cont {
	width: 50%
}

.ref-box {
	padding: 20px;
	background-color: var(--neutral6);
	line-height: 180%
}

/* 이미지 관리 팝업 */
.popup-img-admin .cell-row3 .form-base {
	width: 226px
}

.thumb-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: -10px
}

.thumb-list>li {
	width: 300px;
	margin-top: 30px
}

.thumb-img-wrap {
	position: relative
}

.thumb-img {
	width: 300px;
	height: 210px
}

.thumb-img img {
	width: 100%;
	height: 100%
}

.thumb-insert {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	transform: var(--item-mc);
	transition: .2s
}

.thumb-img-wrap:hover .thumb-insert {
	opacity: 1
}

.thumb-title-wrap {
	display: flex;
	margin-top: 10px;
	align-items: flex-start
}

.thumb-title {
	flex: 1;
	line-height: 24px;
	font-family: var(--nt-m);
	margin-right: 30px
}

.thumb-edit {
	margin-left: 5px
}

.search-result-num {
	font-size: 18px;
	font-family: var(--nt-m)
}

.search-result-num strong {
	font-size: 18px;
	font-family: var(--nt-m);
	color: var(--accent-red)
}

.img-search-result .ico-circle-plus-border-white {
	margin-left: 5px
}

/* 콘텐츠 수정 팝업 */
.popup-edit-history .popup-box {
	height: 100%
}

/* 콘텐츠 수정 팝업 상세 */
.in-popup-edit-history {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white)
}

.in-popup-edit-history.open {
	display: block
}

.in-popup-edit-history .pop-cont-area img {
	width: 100%
}

/* scroll style */
.popup-wrap ::-webkit-scrollbar {
	width: 10px;
	height: 10px
}

.popup-wrap ::-webkit-scrollbar-track {
	background-color: #D9D9D9
}

.popup-wrap ::-webkit-scrollbar-thumb {
	background-color: #ACACAC
}

/*------------------------- JS Tree -------------------------*/
.tree-menu-wrap {
	width: 28%
}

.tree-menu-box {
	width: 100%;
	padding: 20px;
	border: 1px solid var(--neutral4)
}

.jstree-default .jstree-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 5px;
	padding: 0;
	line-height: 24px;
	vertical-align: top;
	background-repeat: no-repeat;
	text-decoration: none;
	cursor: pointer
}

.jstree-default .jstree-open>.jstree-ocl {
	background-image: url('../img/btn-menu-close.svg')
}

.jstree-default .jstree-closed>.jstree-ocl {
	background-image: url('../img/btn-menu-open.svg')
}

.jstree-default .jstree-themeicon {
	background-image: url('../img/ico-menu-folder.svg')
}

.jstree-default .jstree-er:after {
	display: inline-block;
	padding: 1px 2px;
	content: "제거";
	background-color: var(--accent-red);
	color: var(--white);
	white-space: nowrap
}

.jstree-default .jstree-ok:after {
	display: inline-block;
	padding: 1px 2px;
	content: "이동";
	background-color: var(--secondary-blue);
	color: var(--white);
	white-space: nowrap
}

.jstree-default .jstree-leaf[aria-level="3"] .jstree-themeicon {
	background-image: url('../img/ico-menu-doc.svg')
}

.jstree-anchor {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-family: var(--nt-m);
	color: var(--neutral1);
	line-height: 24px;
	margin-left: 5px
}

.jstree-anchor:focus {
	outline: none
}

.jstree-default .jstree-node {
	margin: 20px 0 0 24px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.jstree-default>.jstree-container-ul>.jstree-node {
	margin-left: 0;
	margin-top: 0
}

.jstree-anchor.jstree-clicked {
	color: var(--secondary-blue)
}

.jstree-anchor.jstree-hovered {
	color: var(--black)
}

.jstree-anchor.jstree-clicked.jstree-hovered {
	color: var(--secondary-blue)
}

/* tab */
.tab-wrap {
	display: flex;
	position: relative;
	margin-bottom: 20px
}

.tab-wrap:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--gray);
	z-index: 10
}

.tab-wrap.has-reftxt:after {
	content: "* 필수 입력";
	display: block;
	font-size: 14px;
	color: var(--accent-red);
	line-height: 21px;
	position: absolute;
	bottom: 18px;
	right: 0;
	z-index: 10;
	text-align: right;
}

.tab-link {
	display: flex;
	height: 56px;
	padding: 0 40px;
	border: 1px solid var(--neutral7);
	align-items: center;
	justify-content: center;
	font-family: var(--nt-m);
	font-size: 18px;
	background-color: var(--white);
	color: var(--neutral2);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px
}

.tab-link:hover {
	color: var(--primary-navy)
}

.tab-item {
	position: relative
}

.tab-item.on .tab-link {
	background-color: var(--transp);
	border-color: var(--gray);
	color: var(--primary-navy)
}

.tab-item.on .tab-link:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--neutral5);
	z-index: 15
}

.tab-content {
	display: none
}

.tab-content.on {
	display: block
}

.gray-tab-btns {
	display: inline-block;
	color: #E6E8F0;
	padding: 5px;
	border-radius: 5px;
	background-color: #E6E8F0;
	border-radius: 5px
}

.gray-tab-btns a {
	display: flex;
	justify-content: center;
	border-radius: 5px;
	align-items: center;
	border: none;
	padding: 0 20px;
	height: 30px;
	font-size: 14px;
	font-family: var(--nt-m);
	color: var(--gray);
	background-color: var(--transp)
}

.gray-tab-btns li {
	display: inline-block
}

.gray-tab-btns li.on a {
	box-shadow: 0px 8px 16px rgba(143, 149, 178, 0.25);
	background-color: var(--white);
	color: #54575A;
	font-family: var(--nt-b)
}

.gray-tab-btns li.on a:before {
	display: none
}

.gray-tab-content {
	display: none
}

.gray-tab-content.on {
	display: block
}

.small-tab-wrap {
	display: flex;
	position: relative;
	margin-bottom: 20px
}

.small-tab-wrap:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--gray);
	z-index: 10
}

.small-tab-link {
	display: flex;
	height: 56px;
	padding: 0 40px;
	border: 1px solid var(--neutral7);
	align-items: center;
	justify-content: center;
	font-family: var(--nt-m);
	font-size: 18px;
	background-color: var(--white);
	color: var(--neutral2);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px
}

.small-tab-link:hover {
	color: var(--primary-navy)
}

.small-tab-item {
	position: relative
}

.small-tab-item.on .small-tab-link {
	background-color: var(--transp);
	border-color: var(--gray);
	color: var(--primary-navy)
}

.small-tab-item.on .small-tab-link:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--neutral5);
	z-index: 15
}

.small-tab-content {
	display: none
}

.small-tab-content.on {
	display: block
}

/* 메뉴 */
.menu-form {
	width: 70%
}

/* popup */
.popup-content .tree-menu-wrap {
	width: 100%;
	padding: 0
}

/*------------------------- THUMBNAIL LIST -------------------------*/
.cover-list {
	/* display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 35px 35px */
	display: flex;
	flex-wrap: wrap;
	gap: 40px 35px;
}

.cover-list>li {
	/* width: 270px; */
	width: calc((100% / 5) - 28px);
	min-width: 220px;
}

.cover-thumb {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 0 8px;
	width: 100%;
	height: 260px;
	border: 1px solid var(--neutral7)
}

.cover-thumb .chk-base {
	position: absolute;
	/* top: 8px; */
	top: 6px;
	left: 8px;
	z-index: 10
}

.cover-thumb-img {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* max-width: 261px; */
	height: 200px;
}

.cover-thumb-img img {
	height: 100%
}

.cover-thumb-txts dt {
	/* width: 28.5%; */
	width: 80px;
	margin-top: 4px;
	white-space: nowrap;
	color: var(--neutral2)
}

.cover-thumb-txts dd {
	/* width: 71.5%; */
	width: calc(100% - 80px);
	margin-top: 4px;
	white-space: nowrap;
	color: var(--neutral8)
}

.cover-thumb-txts h3 {
	margin-top: 5px;
	font-family: var(--nt-m);
	color: var(--black);
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.cover-thumb-txts h3 a {
	display: block;
	max-width: 300px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.cover-thumb-category .type-txt-blue {
	margin-right: 8px
}

/* text label */
.cover-thumb-txts strong {
	display: inline-block;
	padding: 0 8px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	border-radius: 3px
}

.lang-txt-navy {
	color: #1E3483;
	border: 1px solid #1E3483
}

.lang-txt-purple {
	color: #674192;
	border: 1px solid #674192
}

.lang-txt-orange {
	color: #E03009;
	border: 1px solid #E03009
}

.lang-txt-violet {
	color: #A6237A;
	border: 1px solid #A6237A
}

.lang-txt-brown {
	color: #6A2C42;
	border: 1px solid #6A2C42
}

.lang-txt-green {
	color: #3B9094;
	border: 1px solid #3B9094
}

.lang-txt-lgreen {
	color: #88BE4B;
	border: 1px solid #88BE4B
}

.state-txt-fill {
	display: inline-block;
	min-width: 48px;
	height: 26px;
	padding: 0 5px;
	border-radius: 4px;
	background-color: var(--secondary-blue);
	font-size: 14px;
	color: var(--white);
	line-height: 26px
}

.site-txt-gray {
	display: inline-block;
	padding: 0 8px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	color: var(--gray);
	border: 1px solid var(--gray);
	border-radius: 3px
}

.type-txt-blue {
	display: inline-block;
	padding: 0 8px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	color: var(--secondary-blue);
	border: 1px solid var(--secondary-blue);
	border-radius: 3px
}

/* disable */
.cover-disabled strong,
.cover-txt-disabled strong,
.cover-txt-disabled .type-txt-blue {
	color: #BDBDBD;
	border-color: #BDBDBD
}

.cover-disabled h3,
.cover-txt-disabled h3 {
	color: #BDBDBD
}

.cover-disabled .state-txt-fill,
.cover-txt-disabled .state-txt-fill {
	background-color: #BDBDBD
}

.cover-disabled .cover-thumb-img {
	filter: grayscale(1)
}

/* 통계 */
.tab-radius-radio {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 0;
	margin-right: 1px
}

.tab-radius-radio input {
	position: absolute;
	overflow: hidden;
	position: absolute;
	clip: rect(0 0 0 0);
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0
}

.tab-radius-radio label {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 46px;
	padding: 0 15px;
	border: 1px solid #E1E1E1;
	font-size: 16px;
	margin-left: -1px;
	line-height: 105%;
	color: var(--neutral2)
}

.tab-radius-radio input:checked+label {
	background: #F2F8FF;
	color: #0084EE
}

.tab-radius-radio .first {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px
}

.tab-radius-radio .last {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px
}

.tab-radius-radio .tit {
	font-size: 16px;
	color: #777;
	margin-right: 10px
}

.shadow-box {
	border-radius: 5px;
	padding: 50px;
	box-shadow: 0px 3px 20px rgba(11, 51, 88, 0.1)
}

.shadow-box.path-graph {
	max-height: 542px;
	margin-right: 50px
}

.shadow-box.standard-graph {
	max-height: 542px;
	margin-right: 50px
}

.shadow-box.n-tour-graph {
	max-height: 542px;
	margin-right: 50px
}

.ctg-graph-layout .shadow-box {
	padding: 20px
}

.ctg-graph-layout h3 {
	font-family: var(--nt-b)
}

.ctg-graph-layout .left {
	flex: none;
	width: 430px
}

.ctg-graph-layout .right {
	width: 100%
}

.top10-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 26px 26px
}

.top10-grid>li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 260px;
	padding: 20px;
	border: 1px solid #EFEFEF;
	border-radius: 10px;
	transition: all .3s ease-in
}

.top10-grid .num {
	color: #ABC6DB;
	font-size: 40px;
	font-family: var(--sq-m);
	transition: all .2s ease-in
}

.top10-grid .tit {
	font-family: var(--nt-m);
	color: var(--neutral1);
	line-height: 150%;
	transition: all .2s ease-in
}

.top10-grid .trend-state {
	display: inline-block;
	border-radius: 3px;
	padding: 0 5px;
	transition: all .2s ease-in
}

.top10-grid .trend-state .ico {
	margin-right: 6px
}

.top10-grid .trend-state.up {
	background-color: #F2F8FF
}

.top10-grid .trend-state.down {
	background-color: #FFE8E3
}

.top10-grid .trend-state.up .trend-num {
	color: #0073E3
}

.top10-grid .trend-state.down .trend-num {
	color: #FC532E
}

.top10-grid strong {
	display: block;
	margin-top: 5px;
	margin-left: 10px;
	color: #1C1F37;
	font-size: 50px;
	letter-spacing: -0.05rem;
	font-family: var(--sq-m);
	line-height: 110%
}

/* hover */
.top10-grid>li:hover {
	background-color: #F2F8FF;
	border: 1px solid #0073E3;
	transform: scale(1.03);
	box-shadow: 0px 4px 20px rgba(11, 51, 88, 0.1)
}

.top10-grid>li:hover .num {
	color: #1D73E4;
	font-size: 60px
}

.top10-grid>li:hover .tit {
	color: #1D73E4;
	font-size: 28px
}

/* 홈페이지 총 콘텐츠 현황 */
.content-state-tit {
	flex: none;
	width: 240px
}

.content-state-num {
	margin-top: 68px;
	font-size: 20px;
	color: var(--neutral2);
	font-family: var(--nt-m)
}

.content-state-num .total {
	font-size: 50px;
	color: var(--secondary-blue);
	font-family: var(--sq-m)
}

.content-state-box {
	width: 379px;
	height: 140px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid #EFEFEF;
	background-color: var(--white);
	border-radius: 10px
}

.content-state-box.first {
	width: 532px;
	height: 160px;
	margin-left: 0;
	box-shadow: 0px 3px 20px rgba(11, 51, 88, 0.05)
}

.content-state-box h4 {
	font-size: 18px;
	color: var(--neutral2)
}

.content-state-box .num {
	font-family: var(--nt-m);
	font-size: 20px;
	color: var(--neutral2)
}

.content-state-box .num strong {
	font-family: var(--sq-m);
	font-size: 44px;
	color: var(--primary-navy)
}

.type-content-state-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 310px;
	height: 160px;
	margin-left: 20px;
	padding: 20px;
	background-color: var(--white);
	border: 1px solid #EFEFEF;
	border-radius: 10px
}

.type-content-state-box.first {
	margin-left: 0
}

.type-content-state-box h4 {
	font-size: 18px;
	color: var(--neutral2)
}

.type-content-state-box .num {
	font-family: var(--nt-m);
	font-size: 20px;
	color: var(--neutral2)
}

.type-content-state-box .num strong {
	font-family: var(--sq-m);
	font-size: 34px;
	color: var(--primary-navy)
}

.type-graph {
	width: 70px;
	height: 70px
}

/* 기간 내 발행한 콘텐츠 메뉴 분포 */
.bubble-box {
	padding: 0
}

.bubble-wrap {
	position: relative;
	width: 100%;
	height: 463px;
	background: url('../img/bubble-graph-bg.svg') no-repeat center / cover
}

.bb {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%
}

.bb-pp {
	background-color: rgba(147, 82, 229, 0.8)
}

.bb-pp2 {
	background-color: #9352E5
}

.bb-lpp {
	background-color: rgba(105, 93, 251, 0.8)
}

.bb-lpp2 {
	background-color: #695DFB
}

.bb-yel {
	background-color: #F9E001
}

.bb-pk {
	background-color: #FF737D
}

.bb01 {
	width: 44.17px;
	height: 44px;
	transform: translate(-418.33px, 55.02px);
	box-shadow: 0px 109px 80px rgba(132, 13, 226, 0.14), 0px 45.5376px 33.4221px rgba(132, 13, 226, 0.10064), 0px 24.3466px 17.869px rgba(132, 13, 226, 0.083455), 0px 13.6485px 10.0172px rgba(132, 13, 226, 0.07), 0px 7.24861px 5.32008px rgba(132, 13, 226, 0.056545), 0px 3.01631px 2.21381px rgba(132, 13, 226, 0.0393604)
}

.bb02 {
	width: 16.06px;
	height: 16px;
	transform: translate(-369.13px, 0)
}

.bb03 {
	width: 25.1px;
	height: 25px;
	transform: translate(-16.74px, 91.02px)
}

.bb04 {
	width: 16.06px;
	height: 16px;
	transform: translate(135.86px, -22.98px)
}

.bb05 {
	width: 16.06px;
	height: 16px;
	transform: translate(363px, 39px)
}

.bb06 {
	width: 44.17px;
	height: 44px;
	transform: translate(385px, 60.02px)
}

.bb07 {
	width: 68.27px;
	height: 68px;
	transform: translate(239px, -63px);
	box-shadow: 0px 109px 80px rgba(132, 13, 226, 0.14), 0px 45.5376px 33.4221px rgba(132, 13, 226, 0.10064), 0px 24.3466px 17.869px rgba(132, 13, 226, 0.083455), 0px 13.6485px 10.0172px rgba(132, 13, 226, 0.07), 0px 7.24861px 5.32008px rgba(132, 13, 226, 0.056545), 0px 3.01631px 2.21381px rgba(132, 13, 226, 0.0393604)
}

.bb08 {
	width: 25.1px;
	height: 25px;
	transform: translate(190px, 102px)
}

.bb09 {
	width: 77.3px;
	height: 77px;
	transform: translate(276px, 26px);
	box-shadow: 0px 109px 80px rgba(226, 13, 148, 0.13), 0px 45.5376px 33.4221px rgba(226, 13, 148, 0.0934511), 0px 24.3466px 17.869px rgba(226, 13, 148, 0.0774939), 0px 13.6485px 10.0172px rgba(226, 13, 148, 0.065), 0px 7.24861px 5.32008px rgba(226, 13, 148, 0.0525061), 0px 3.01631px 2.21381px rgba(226, 13, 148, 0.0365489)
}

.bb10 {
	width: 34.13px;
	height: 34px;
	transform: translate(-430px, -51px)
}

.bb11 {
	width: 94.37px;
	height: 94px;
	transform: translate(-153px, 33px)
}

.bb-main {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%
}

.bb-main01 {
	transform: translate(-343px, -54px);
	border-radius: 100%;
	width: 146px;
	height: 146px;
	background: #DB76FF;
	mix-blend-mode: multiply;
	box-shadow: 0px 109px 80px rgba(132, 13, 226, 0.14), 0px 24.3466px 17.869px rgba(132, 13, 226, 0.083455), 0px 13.6485px 10.0172px rgba(132, 13, 226, 0.07), 0px 7.24861px 5.32008px rgba(132, 13, 226, 0.056545), 0px 3.01631px 2.21381px rgba(132, 13, 226, 0.0393604)
}

.bb-main02 {
	transform: translate(-247px, -163px);
	border-radius: 100%;
	width: 247px;
	height: 247px;
	opacity: 0.8;
	background: #5B89FF;
	mix-blend-mode: multiply;
	box-shadow: 0px 100px 80px rgba(255, 43, 43, 0.15), 0px 46.233px 36.9864px rgba(255, 43, 43, 0.111251), 0px 26.4535px 21.1628px rgba(255, 43, 43, 0.0940171), 0px 16.0571px 12.8457px rgba(255, 43, 43, 0.0809922), 0px 9.67509px 7.74008px rgba(255, 43, 43, 0.0690078), 0px 5.38772px 4.31018px rgba(255, 43, 43, 0.0559829), 0px 2.31722px 1.85378px rgba(255, 43, 43, 0.0387487)
}

.bb-main03 {
	transform: translate(-20px, -69px);
	border-radius: 100%;
	width: 162px;
	height: 162px;
	background: #5BD8FF;
	mix-blend-mode: multiply;
	box-shadow: 0px 109px 80px rgba(91, 216, 255, 0.05), 0px 45.5376px 33.4221px rgba(91, 216, 255, 0.05), 0px 24.3466px 17.869px rgba(91, 216, 255, 0.05), 0px 13.6485px 10.0172px rgba(91, 216, 255, 0.05), 0px 7.24861px 5.32008px rgba(91, 216, 255, 0.05), 0px 3.01631px 2.21381px rgba(91, 216, 255, 0.05)
}

.bb-main04 {
	transform: translate(161px, -30px);
	border-radius: 100%;
	width: 129px;
	height: 129px;
	background: #FAE634
}

.bb-main .txt {
	color: var(--white)
}

.bb-tooltip {
	opacity: 0;
	position: absolute;
	padding: 6px 12px;
	background-color: #fff;
	border: 2px solid var(--secondary-blue);
	border-radius: 5px;
	text-align: center;
	transition: .3s;
	z-index: 55
}

.bb-tooltip p {
	font-family: var(--nt-m);
	font-size: 14px;
	color: #262626
}

.bb-tooltip span {
	font-family: var(--nt-l);
	font-size: 14px;
	color: #777
}

.bb-main01 .txt {
	font-size: 16px
}

.bb-main02 .txt {
	font-size: 30px
}

.bb-main03 .txt {
	font-size: 20px
}

.bb-main04 .txt {
	font-size: 16px
}

.bb-main:hover .bb-tooltip {
	opacity: 1
}

.bb-main01 .bb-tooltip {
	top: -30px;
	left: -50px
}

.bb-main02 .bb-tooltip {
	top: 10px;
	right: -20px
}

.bb-main03 .bb-tooltip {
	top: -30px;
	right: -20px
}

.bb-main04 .bb-tooltip {
	bottom: -30px;
	right: -40px
}

.balloon1 {
	animation: balloon 2.2s ease-in-out infinite 0s alternate
}

.balloon2 {
	animation: balloon 3.3s ease-in-out infinite 0.5s alternate
}

.balloon3 {
	animation: balloon 2.7s ease-in-out infinite 1s alternate
}

.balloon4 {
	animation: balloon 4s ease-in-out infinite 0.5s alternate
}

.balloon5 {
	animation: balloon 3s ease-in-out infinite 0s alternate
}

@keyframes balloon {
	0% {
		margin-top: 0
	}

	100% {
		margin-top: -10px
	}
}

.lang-chart {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 357px
}

.line-group-tit {
	margin-bottom: 7px
}

.line-group-tit span {
	color: var(--neutral2);
	line-height: 110%
}

.line-group-tit span.num {
	color: var(--black)
}

.line {
	background-color: #F3F5FA;
	width: 100%;
	height: 14px;
	border-radius: 14px
}

.line>.progress {
	height: 100%;
	background-color: #81CE97;
	border-radius: 14px
}

.line.blue>.progress {
	background-color: #7A9FFD
}

.line.purple>.progress {
	background-color: #9352E5
}

.line.lpink>.progress {
	background-color: #FF708B
}

.line.pink>.progress {
	background-color: #E85BFF
}

.line.yellow>.progress {
	background-color: #FFBA69
}

.line.mint>.progress {
	background-color: #01F1E3
}

.line.skyblue>.progress {
	background-color: #8BD3F4
}

.pie-chart {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #DBDFF1;
	position: relative;
}

.pie-chart.gt-50 {
	background-color: #9352E5;
}

.pie-chart>.progress {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 35px);
	top: calc(50% - 35px);
	width: 70px;
	height: 70px;
	clip: rect(0, 70px, 70px, 35px);
}

.pie-chart .progress-fill {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 35px);
	top: calc(50% - 35px);
	width: 70px;
	height: 70px;
	clip: rect(0, 35px, 70px, 0);
	background: #5B89FF;
	transform: rotate(60deg);
}

.pie-chart.red .progress-fill {
	background-color: #FC532E !important;
}

.pie-chart.gt-50 .progress {
	clip: rect(0, 35px, 70px, 0);
}

.pie-chart.gt-50 .progress .progress-fill {
	clip: rect(0, 70px, 70px, 35px);
	background: #DBDFF1;
}

.pie-chart>.percents {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 30px);
	top: calc(50% - 30px);
	width: 60px;
	height: 60px;
	background: #fff;
	text-align: center;
	display: table;
}

.pie-chart>.percents span {
	display: flex;
	font-size: 20px;
	font-family: var(--sq-m);
	color: #383874;
	display: table-cell;
	vertical-align: middle;
}

.pie-chart>.percents span:after {
	content: "%";
	font-size: 12px;
	margin-left: 2px
}

/* 운영 지원 현황 */
.color-box-wrap {
	display: flex;
	width: 100%
}

.color-box {
	position: relative;
	width: 100%;
	padding: 30px;
	border-radius: 10px
}

.color-box .tit {
	margin-bottom: 10px;
	display: inline-block;
	height: 30px;
	border: 1px solid var(--white);
	border-radius: 5px;
	color: var(--white);
	font-size: 14px;
	padding: 0 10px;
	line-height: 30px
}

.color-box p {
	font-size: 20px;
	font-family: var(--nt-m);
	color: var(--white)
}

.color-box strong {
	font-size: 50px;
	font-family: var(--sq-m);
	color: var(--white)
}

.color-box.green {
	background-color: #28DDBD
}

.color-box.green li {
	background-color: #08C7A5
}

.color-box.green .ico,
.color-box.blue .ico,
.color-box.purple .ico,
.color-box.sky .ico {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

.color-box.blue {
	background-color: #5B89FF
}

.color-box.blue li {
	background-color: #3E73FA
}

.color-box.purple {
	background-color: #A261FD
}

.color-box.purple li {
	background-color: #8E40FB
}

.color-box.sky {
	height: 235px;
	background-color: #FBFCFE;
	border: 1px solid #E9F2FE
}

.color-box.sky li {
	background-color: #E5F1FF
}

.color-box.sky .tit {
	color: #389AFA;
	border-color: #389AFA
}

.color-box.sky p {
	color: var(--neutral2)
}

.color-box.sky strong {
	color: var(--black)
}

.color-box.sky .grid span {
	color: #389AFA
}

.color-box .grid {
	position: relative;
	z-index: 5;
	margin-top: 20px;
	display: grid;
	width: 166px;
	grid-template-columns: 1fr 1fr;
	gap: 6px 6px
}

.color-box .grid.one-col {
	width: 80px;
	grid-template-columns: 1fr
}

.color-box .grid li {
	display: flex;
	justify-content: space-between;
	padding: 4px 6px;
	border-radius: 4px
}

.color-box .grid span {
	font-size: 14px;
	color: var(--white)
}

.color-box .grid em {
	font-family: var(--nt-b)
}

.oper-stats .row-3 .right {
	width: 328px;
	flex: none
}

.color-box.lpurple {
	border: 1px solid #E3E8FF;
	background-color: #F9FAFF
}

.color-box.lsky {
	border: 1px solid #D6F1F8;
	background-color: #FAFEFF
}

.color-box.lgreen {
	border: 1px solid #DFF2E7;
	background-color: #FAFFFC
}

.color-box.lorange {
	border: 1px solid #FEEFE0;
	background-color: #FFFDFB
}

.sns-box {
	display: flex
}

.sns-box li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 90px;
	padding: 10px;
	margin-left: 8px;
	border: 1px solid var(--neutral3);
	border-radius: 5px
}

.sns-box li p {
	color: var(--black)
}

.sns-box li:first-child {
	margin-left: 0
}

.color-tit {
	font-size: 22px;
	font-family: var(--nt-m)
}

.lpurple .color-tit {
	color: #7618F9
}

.lsky .color-tit {
	color: #11BEEA
}

.lgreen .color-tit {
	color: #28CE9C
}

.lorange .color-tit {
	color: #FD8813
}

.oper-stats .row-4-box>div {
	margin-left: 30px
}

.oper-stats .row-4-box>div:first-child {
	margin-left: 0
}

.lpurple .sns-box li {
	border-color: #E3E8FF
}

.lsky .sns-box li {
	border-color: #D6F1F8
}

.lgreen .sns-box li {
	border-color: #DFF2E7
}

.lorange .sns-box li {
	border-color: #FEEFE0
}

.graph-box {
	position: relative
}

.graph-box-inner {
	position: relative;
	z-index: 3
}

.graph-d-tit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}


/*------------------------- 반응형 -------------------------*/
@media screen and (max-width:1920px) {
	.center {
		padding: 0 3%
	}

	.lnb-wrap {
		left: 3%
	}

	/* 메뉴관리 */
	.menu-form .form-list-name {
		width: 28%
	}

	.menu-form .form-list-cont {
		width: 72%
	}

	/* 통계 */
	.top10-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		gap: 15px 15px
	}
}

@media screen and (max-width:1900px) {

	/* 메뉴관리 */
	.menu-form .form-list-name {
		width: 26%
	}

	.menu-form .form-list-cont {
		width: 74%
	}

	/* ip */
	.ip-numbers .row-enter {
		width: 100%;
		margin-top: 20px
	}

	.ip-numbers .row-enter.ml-20 {
		margin-left: 0 !important
	}

	.ip-access .row-enter {
		width: 100%;
		margin-top: 20px
	}

	.ip-access .row-enter.ml-40 {
		margin-left: 0 !important
	}

	/* dashboard tit */
	.content-box.w50 .box-tit>div {
		flex-direction: column;
		align-items: flex-start !important
	}

	.content-box.w50 .box-tit small {
		margin-left: 0
	}
}


@media screen and (max-width:1840px) {

	/* cover list */
	/* .cover-list {
		gap: 35px 25px
	} */

	/* 통계 */
	.top10-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 26px 26px
	}
}

@media screen and (max-width:1770px) {

	/* cover list */
	/* .cover-list {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 35px 25px;
	} */
}


@media screen and (max-width:1680px) {


	.tab-link {
		padding: 0 30px
	}

	.cover-list>li {
		width: calc((100% / 4) - 26.3333px);
		min-width: 216.06px;
	}
}




@media screen and (max-width:1580px) {

	/* 체크박스가 영역에서 넘칠경우 */
	.rdo-list.long {
		flex-direction: column
	}

	.rdo-list.long>li {
		margin-left: 0;
		margin-top: 5px
	}

	.rdo-list.long>li:first-child {
		margin-top: 0
	}

	.chk-list.long {
		flex-direction: column
	}

	.chk-list.long>li {
		margin-left: 0;
		margin-top: 5px
	}

	.chk-list.long>li:first-child {
		margin-top: 0
	}

	/* 테이블 수정 버튼 */
	.btn-small>span {
		padding: 0 8px
	}

	/* cover list */
	/* .cover-list {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 35px 25px;
	} */
}

/* @media screen and (max-width:1500px) { */
@media screen and (max-width:1570px) {
	.center {
		padding: 0 1.5%
	}

	.lnb-wrap {
		left: 1.5%
	}

	.content-box {
		padding: 20px
	}

	.gnb {
		/* padding: 0 7%; */
	}

	/* 이벤트 목록 테이블 버튼 간격 */
	.thumb-view.ml-10 {
		margin-left: 3px !important
	}

	/* two-column 넘칠 때 */
	.row-enter {
		width: 100% !important
	}

	.two-column-base .w50.row-enter .form-list-cont {
		width: 78%
	}

	.two-column-base .w50 .form-base.w-300 {
		width: 300px
	}

	/* url input */
	.url-input .form-base {
		width: 230px
	}
}

@media screen and (max-width:1350px) {
	.container {
		padding-left: 230px
	}
}

@media screen and (max-width:1320px) {

	/* 메뉴관리 */
	.menu-form .btn.w-middle>span {
		min-width: 100px
	}
}

@media screen and (max-width:1300px) {

	.gnb-wrap:before {
		transform: translateX(-50%);
	}
}

@media screen and (max-width:1280px) {

	.cover-list>li {
		width: calc((100% / 3) - 23.3333px);
		min-width: 299.88px;
	}

}




/* background spinner */
#cover-spin {
	position:fixed;
	width:100%;
	left:0;right:0;top:0;bottom:0;
	background-color: rgba(242, 242, 242, 0.7);
	z-index:9999;
	display:none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
	content:'';
	display:block;
	position:absolute;
	left:48%;top:40%;
	width:40px;height:40px;
	border-style:solid;
	border-color:black;
	border-top-color:transparent;
	border-width: 4px;
	border-radius:50%;
	-webkit-animation: spin .8s linear infinite;
	animation: spin .8s linear infinite;
}

.cover-spin-txt{
	position: relative;
	top: 50%;
	text-align: center;
	font-size: large;
}