@charset "utf-8";

/* wrap */
#wrap {position:relative; width:100%; min-width:1400px; min-height:100%; margin:0; /* overflow:hidden; */}
#wrap_pop {position:relative; width:100%; height:auto; margin:0;}

/*error_area*/
.error_area {width: 100%; position: relative; min-width: 1400px; min-height: 100%;}
.error-container {position: relative; width: 100%; height: 100vh; min-height:600px; background: rgba(0, 0, 0, .2)}
.error-container::before {content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: url(../images/bg_01.jpg) no-repeat center; background-size: cover; z-index:-1;}
.error-contets {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
.error_header {margin-bottom: 10px;}
.error_content {padding: 50px 45px 120px; background: #fff; border-radius: 12px; line-height: 28px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);}
.error_content p {text-align: center;}
.error-hd {font-size: 36px; font-weight: 700; color: #217CFF; margin-bottom: 5px;}
.error-subhd {margin-bottom: 30px; border-bottom: 1px solid #e8e8e8; padding-bottom: 15px;}
.error_content .home-button {position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid #5793ea; padding: 7px; background-color: #5793EA; color:#fff; border-radius: 4px; height: 45px; width:150px; margin: 30px auto; transition: .3s;}
.error_content .home-button:hover {border: 1px solid #5793ea; background: #fff; color:#5793ea;}

/* header */
.header {position: relative; display: flex; justify-content: space-between; width: 100%; min-width: 1250px; height: 80px; padding: 0 70px; background: linear-gradient(90deg, rgba(68,216,187,1) 0%, rgba(87,147,234,1) 100%); z-index: 990;}

/* left-menu */
.header .left-menu {display: flex;}
.header .left-menu .logo > a {display: flex; width: 100%; height: 100%;}
.header .left-menu .logo img {width: 165px; height: 90px;}
.header .left-menu .logo > a > h1 > p {position: absolute; top: -999px; color: transparent;}

/* gnb */
.gnb nav > ul {display: flex; white-space: nowrap;}
.gnb nav > ul > li {position: relative; font-size: 16.5px; font-weight: 500; transition: color .3s;}
.gnb nav > ul > li:not(:last-of-type) {margin-right: 35px;}
.gnb nav > ul > li > a {line-height:97px; color: #fff; transition: color .3s;}
.gnb nav > ul > li:hover > a {color: #000; transition: color .3s;}
.gnb .submenu {display: none; position: absolute; left: 50%; top: 75px; transform: translateX(-50%); padding: 15px 15px 5px; border-radius: 7px; color: #000; background-color: #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); opacity: 0; transition: .3s;}
.gnb nav > ul > li:hover .submenu {display: block; opacity: 1; transition: .3s; animation: menuAni .3s;}
.gnb .submenu::before {content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 14.5px; height: 14.5px; border-radius: 100%; background-color: var(--sub-color); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);}
.gnb .submenu > ul > li > a {display: block; width: 100%; font-size: 14.5px; line-height: 28px; transition: color .3s;}
.gnb .submenu > ul > li:hover > a {color: var(--sub-color); transition: color .3s;}

/* right-menu */
.right-menu > ul {display: flex; line-height: 97px; white-space: nowrap;}
.right-menu > ul > li {position: relative;}
.right-menu > ul > li:first-of-type {margin-right:20px; font-size:16px; font-weight: 700; color: #fff;}
.right-menu > ul > li:last-of-type {margin-left:5px;}
.right-menu > ul > li > button {padding:5px 15px; font-size:15px; font-weight: 500; border:none; border-radius:60px; background-color:#fff; cursor: pointer; transition: box-shadow .3s;}
.right-menu > ul > li > button:hover {box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); transition: box-shadow .3s;}
.right-menu > ul > li:last-of-type > button {color:#fff; background-color:var(--red-color);}
.right-menu > ul > li:last-of-type > button svg {transform-origin: top center; transition:.3s;}
.right-menu > ul > li:last-of-type > button:hover svg {animation: bellAni 2s; transition:.3s;}

@keyframes bellAni{
	0%{transform: rotate(0deg);}
    10%{transform: rotate(40deg);}
	20%{transform: rotate(-40deg);}
	30%{transform: rotate(25deg);}
	40%{transform: rotate(-25deg);}
	50%{transform: rotate(5deg);}
	60%{transform: rotate(-5deg);}
	70%{transform: rotate(0deg);}
	100%{transform: rotate(0deg);}
}

.right-menu .myinfo-menu{display: none; position: absolute; left: 50%; top: 75px; transform: translateX(-50%); padding: 10px 15px; border-radius: 7px; color: #000; background-color: #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); opacity: 0; transition: .3s;}
.right-menu li:nth-of-type(2):hover .myinfo-menu {display: block; opacity: 1; transition: .3s; animation: menuAni .3s;}
.right-menu .myinfo-menu > ul {line-height: 20px;}
.right-menu .myinfo-menu > ul > li > a {font-size: 14.5px; transition: color .3s;}
.right-menu .myinfo-menu > ul > li:hover > a {color: var(--sub-color); transition: color .3s;}
/*notice-menu*/
.right-menu .notice-menu {display: none; position: absolute; left: 50%; top: 75px; transform: translateX(-50%); padding: 10px 15px; border-radius: 7px; color: #000; background-color: #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); opacity: 0; transition: .3s;}
.right-menu li:nth-of-type(3):hover .notice-menu {display: block; opacity: 1; transition: .3s; animation: menuAni .3s;}
.right-menu .notice-menu > ul {line-height: 20px;}
.right-menu .notice-menu {width: 360px; max-height: 650px; left:-130%;}
.right-menu .notice-menu .notice-header {border-bottom: 1px solid #ddd; font-weight: 700; line-height: 35px; margin-bottom: 10px;}
.right-menu .notice-menu .notice-header ul li {transition: .3s;}
.right-menu .notice-menu .notice-header ul li:nth-child(2) svg:nth-child(2):hover {color:#217CFF;}
.right-menu .notice-menu .notice-inner-wrap {max-height: 500px; overflow-y: scroll;}
.right-menu .notice-menu .notice-inner-wrap.scroll-style li {margin-right: 10px;}
.right-menu .notice-menu .notice-inner {position: relative; width: 100%; height: auto; background-color: #f1f1f1; border-radius: 7px; padding: 10px 15px; margin-bottom: 10px; font-size: 14px; white-space: wrap; transition: .3s;}
.right-menu .notice-menu .notice-inner:hover {background-color: #f3f3f3;}
.right-menu .notice-menu .notice-inner div {margin-top: 3px;}
.right-menu .notice-menu .notice-inner .notice-inner-bottom {font-size: 12px; color: #282828; margin-top: 10px;}
/*new-notice*/
.right-menu .notice-menu .notice-inner.new-notice {background-color: #DDE9FB; transition: .3s;}
.right-menu .notice-menu .notice-inner.new-notice:hover {background-color: #B2D1FF;}
.right-menu .notice-menu .notice-inner.new-notice h6 svg {color:#217CFF;}
/*notice-menu*/
.right-menu .notice-menu .notice-inner .menu-inner {display:none; position: absolute; top: 30px; right: 10px; width: 200px; padding: 5px 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 7px; line-height: 30px;}
.right-menu .notice-header .menu-inner {display:none; position: absolute; top: 35px; right: 15px; width: 200px; padding: 5px 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 7px; z-index:999; font-size: 14px; line-height: 30px;}
.right-menu .notice-header .menu-inner ul > li:hover, .right-menu .notice-menu .notice-inner .menu-inner:hover {background-color: #f3f3f3;}


@keyframes menuAni {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


/* snb */
.snb {position:absolute; width:290px; height: calc(100% - 65px); padding:25px 35px 0 30px;}
.snb::before {content: ""; position:absolute; top:50%; right: 0; transform:translateY(-50%); width:1px; height: calc(100% - 35px); border-right:1px dashed #E2E2E2;}
.snb nav ul > li {position:relative; border-radius:50px; background-color:transparent; transition: background-color .3s;}
.snb nav ul > li:not(:last-of-type) {margin-bottom: 8px;}
.snb nav ul > li:hover,
.snb nav ul > li.on {background-color:#F2F2F2; transition: background-color .3s;}
.snb nav ul > li > a {display: flex; padding: 10px 10px; font-size:15px;}
.snb nav ul > li.on > a {font-weight: 700;}
.snb nav ul > li .snb-icon {width:22px; margin-right: 10px; text-align: center;}
.snb nav ul > li .snb-icon svg {color:var(--sub-color);}
.snb nav ul > li .snb-icon.small svg {font-size:14px;}


/* layout */
.layout-treeview {display: flex; margin-bottom: 2rem;}
.layout-treeview-head {display: flex; flex-direction: column; width: 55rem;}
.layout-treeview-head .treeview-box {flex-grow: 1; height: 100%; min-height: 20rem; border: 1px solid #dddddd; padding: 1rem;}
.layout-treeview-head button {margin-right: 0.5rem; margin-bottom: 1rem;}
.layout-treeview-body {width: calc(100% - 25rem); padding-left: 1.5rem;}


/* container */
#wrap .container {position: relative; width: 100%; height: 100%; padding: 10px 35px 25px; z-index: 1;}
#wrap .container-nonebg {position: relative; width: 100%; height: 100%; padding: 10px 35px 25px; z-index: 1;}
#wrap .container::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 145px; background: linear-gradient(90deg, rgba(68,216,187,1) 0%, rgba(87,147,234,1) 100%); z-index: -1;}
#wrap_pop .container {position: relative; width: 100%; height: 100%; min-height: 100%;}
#wrap_pop .container-nonebg {position: relative; width: 100%; height: 100%; min-height: 100%; padding: 10px 35px 25px; z-index: 1;}


/* login container */
.login-container {position: relative; width: 100%; height: 100vh; min-height:600px;}
.login-container::before {content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: url(../images/bg_02.png) no-repeat center; background-size: cover; z-index:-1;}
.login-container::after {content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: url(../images/bg_01.jpg) no-repeat; background-size: cover; z-index:-2;}

/* login-contents */
.login-contents {position:relative; width:100%; height:100%;}
.login-box {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:375px; padding: 20px 30px 30px; border-radius:20px; background:rgba(255, 255, 255,0.6);}
.login-box::before {content:""; position:absolute; top:-85px; left:50%; transform:translateX(-50%); width:250px; height:50px; background: url(../images/logo.svg) no-repeat center;}
.login-box .login-title {position:relative; padding-bottom:20px; margin-bottom:30px; font-size:22px; font-weight:700; text-align:center;}
.login-box .login-title::before {content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:1px; background:#fff;}
.login-box form {display:flex; flex-direction:column;}
.login-box form input,
.login-box form button {width:270px; height:48px; font-size:15px; border:none; border-radius:48px;}
.login-box form input {padding:0 15px; margin:0 auto 8px;}
.login-box form button {margin:8px auto 0; font-size:16.5px; font-weight:600; color:#fff; background:var(--sub-color);}
.login-contents .copyright {position:absolute; bottom:22px; width:100%; font-size:14px; font-weight:500; text-align:center;}


/* contents */
#wrap .contents {width: calc(100% - 20px); height: 100%; min-height: calc(100vh - 115px); padding: 25px 30px; margin: 0 auto; border-radius: 20px; background-color: #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);}
#wrap_pop .contents {width: 100%; min-width: 800px; /* max-width: 1600px;  */height: auto; margin: 0 auto;  padding: 20px 30px; border-radius: 20px; background-color: #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3)}
#wrap_pop .contents.fix-980width {max-width: 980px;}

.title {padding-right: 10px; margin-bottom: 15px; font-size: 20px; font-weight: 600;}

.title-nav-bar {display: flex;}
.title-nav-bar.border {border-bottom:1px dashed #bcbcbc;}
.title-nav-bar.btn {justify-content:space-between; line-height:34px;}
.title-nav-bar.btn > div:first-of-type {display:flex;}

.navigator {margin-bottom: 15px; line-height: 24px;}
.title-nav-bar.btn .navigator {line-height:34px;}
.navigator > ul {display: flex; font-size: 14px;}
.navigator > ul > li {position: relative; color: #656565;}
.navigator > ul > li:not(:last-child) {padding-right: 5px;}
.navigator > ul > li:not(:last-child)::after {content: "\002F"; padding-left: 5px; color: #aaa;}

.top-bar {display: flex; justify-content: space-between; padding:7px 10px; margin-bottom: 10px; font-size:13.5px; border-top: 1px dashed #bcbcbc; border-bottom: 1px dashed #bcbcbc;}
.top-bar > div {display: flex;}


/* inner-contents */
/* .inner-contents {padding: 0 10px;} */
.inner-contents.border {border-bottom:1px dashed #bcbcbc;}


/* tab-menu */
.tab-menu > ul {position: relative; display: flex; justify-content: space-between; height: 38px;}
.tab-menu > ul::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 7px; background-color: #e8e8e8;}
.tab-menu > ul > li {position: relative; width: 100%; text-align: center;}
.tab-menu > ul > li:not(:last-of-type)::before {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 15px); background-color: #bfbfbf;}
.tab-menu > ul > li > a {position: relative; display: block; width: 100%; height: 100%; border-radius: 7px; font-size: 15px; line-height: 38px; color: var(--default-color); transition: .3s; z-index: 2;}
.tab-menu > ul > li.on > a {font-weight: 500; color: #fff; background-color: var(--sub-color); transition: .3s;}
.tab-menu > ul > li:not(.on):hover > a {color: #F2F2F2; background-color: #B6BDCA; transition: .3s;}

/* sub-tab-menu */
.sub-tab-menu {margin-top: 7px; border-radius: 7px; background-color: var(--sub-color); overflow: hidden;}
.sub-tab-menu > ul {position:relative; display: flex; width: 100%; height: 32px;}
.sub-tab-menu > ul > li {position: relative; width: auto; min-width:104px; padding:0 12px;}
.sub-tab-menu > ul > li:not(:last-of-type)::before {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 15px); background-color: #fff;}
.sub-tab-menu > ul > li > a {display: block; width: 100%; height: 100%; font-size: 14px; font-weight: 500; text-align: center; line-height: 32px; color: #011d45; transition: color .3s;}
.sub-tab-menu:nth-child(2) > ul {left: 275px;}
.sub-tab-menu:nth-child(3) > ul {left: 575px;}
.sub-tab-menu:nth-child(4) > ul {left: 875px;}
.sub-tab-menu:nth-child(5) > ul {left: 1175px;}
.sub-tab-menu > ul > li.on > a,
.sub-tab-menu > ul > li:hover > a {color: #fff; transition: color .3s;}

	
/* content */
.content-wrap {height:calc(100% - 45px); padding:0 10px 0 0; margin-right:10px; overflow-y: auto;}
.content-wrap::-webkit-scrollbar {margin-left: 10px; width:8px;}
.content-wrap::-webkit-scrollbar-thumb {background-color: #8e8e8e; border-radius: 10px;}
.content-wrap::-webkit-scrollbar-track {background-color: #e2e2e2; border-radius: 10px;}
.content-group:not(:last-of-type) {margin-bottom: 15px;}
.group-title {font-size: 16px; font-weight: 600; padding:15px 0 10px;}
.content-group:first-of-type .group-title {padding:0 0 10px;}
.group-title-btns {display:flex; padding:15px 0 10px; margin-left:10px;}
.group-title-btns > button {height:26px; padding:0 10px; font-size:14px; border:none; border-radius:7px;}
.group-title-btns > button:not(:first-of-type) {margin-left:5px;}
.group-title-btns > button.group-icon-btn {padding:0; font-size:18px; color:var(--default-color); background-color:transparent;}
.group-title-btns > button:hover {opacity:0.6;}


/* tab-content */
.tab-button-wrap > .tab-button {background-color:var(--default-color);}
.tab-button-wrap > .tab-button.on {background-color:var(--main-color);}
.tab-view-wrap > .tab-view {display:none;}
.tab-view-wrap > .tab-view.on {display:block;}
.tab-bottom-bar {display: flex; padding: 15px 0;}
.tab-bottom-bar {border-top: 1px dashed #bcbcbc;}
.tab-bottom-bar.left {justify-content: flex-start;}
.tab-bottom-bar.center {justify-content: center;}
.tab-bottom-bar.right {justify-content: flex-end;}


/* modal - category content */
.top-category {display:flex; justify-content: space-between; padding:0 10px;}
.top-category li {padding:8.5px 0; font-size: 15px; font-weight: 600;}
.top-category li:not(:first-of-type) {padding-left: 10px;}
.top-category li:not(:last-of-type) {border-right:1px solid #cecece;}
.top-category li:first-of-type,
.top-category li:last-of-type {width: 26%;}
.top-category li:nth-of-type(2) {width: 48%;}

.inner-category-contents {position: relative; display: flex; justify-content: space-between; height: 100%; padding:0 10px;}
.inner-category-contents div[class^=inner]:not(:last-of-type) {border-right:1px solid #cecece;}
.inner-category-contents .inner-left {width: 26%; padding: 10px 10px 10px 0;}
.inner-category-contents .inner-center {width: 48%; padding:10px;}
.inner-category-contents .inner-right {width: 26%; padding: 10px 0 10px 10px;}

.category-wrap.scroll-style {height: 100%; max-height:278px; padding-right: 10px; overflow-y: scroll;}
.category-wrap.sub ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.category-wrap ul li:not(:last-of-type) {padding-bottom: 7px;}
.category-wrap.sub ul li {width: 50%;}
.category-wrap.sub ul li:nth-child(2n) {padding-left: 2.5px;}
.category-wrap.sub ul li:not(:nth-of-type(2n)) {padding-right: 2.5px;}
.category-wrap ul li button {transition: .3s;}
.category-wrap ul li button:hover,
.category-wrap ul li.on button {background-color: var(--sub-color); color: #fff; transition: .3s;}
.category-wrap ul li button {width: 100%; font-size: 14.5px; border:none; border-radius: 7px; background-color: #e8e8e8;}
.category-wrap.main ul li button {height: 50px;}
.category-wrap.sub ul li button {height: 33.5px; font-size: 13px;}
.category-wrap.detail ul li button {position:relative; height: 87px; text-indent: 15px;}
.category-wrap.detail ul li button svg {position: absolute; top:50%; left:55px; transform: translateY(-50%); font-size: 16px;}
.category-wrap.detail ul li:not(:first-of-type) button svg {font-size: 17px;}
.category-wrap.two-button ul li:first-child {padding-bottom: 10px;}
.category-wrap.two-button ul li button {height: 135px;}

.modal-bottom-bar {display: flex; justify-content: center; padding:15px 0;}
.modal-bottom-bar button {width: 135px; height: 38px; font-size: 14.5px; font-weight: 500; color:#fff; border:none; border-radius: 7px; background-color: var(--default-color); transition: opacity .3s;}
.modal-bottom-bar button:hover {opacity: 0.8; transition: opacity .3s;}
.modal-bottom-bar button:not(:last-of-type) {margin-right: 5px;}

/* modal - list content */
.list-title-bar {display:flex; justify-content:space-between; line-height:30px;}
.list-title-bar .bar-btn:not(:first-of-type) {margin-left: 0;}
.list-title {font-size: 16px; font-weight: 600; padding-bottom: 10px;}
.list-subtitle {font-size: 15px; padding-bottom: 10px;}
.list-wrap {padding:15px 10px; border-bottom:1px solid #cecece;}
.list-wrap.top-border {border-top:1px solid #cecece; border-bottom:none;}
.list-wrap .scroll-box.scroll-style {height: 100%; padding-right: 10px; overflow-x:hidden; overflow-y: auto;} 
	/* modal small size */
.modal-content.small .list-wrap .scroll-box.scroll-style {max-height:330px;}
.list-wrap .total-count-wrap {position:relative; width: calc(50% - 10px);}
.list-wrap input.total-count {width: 100%; padding:8px 10px; border:none; border-radius: 7px; background-color:#dde9fb;}
input.total-count[type="number"]::-webkit-outer-spin-button,
input.total-count[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.list-wrap .count-btn-wrap {position: absolute; top:50%; right:10px; transform: translateY(-50%);}
.list-wrap .count-btn-wrap button {font-size: 16px; padding:0; border:none; background-color: transparent;}
.list-wrap .bar-search {display:inline-block;}

.list-wrap > ul,
form > .list-wrap > div:not(.single-content) > ul {display: flex; justify-content: space-between; flex-wrap: wrap;}

.list-wrap > ul > li,
form > .list-wrap > div:not(.single-content) > ul:not(.ul-thngRegForm) > li {width: 50%; padding-bottom: 13px;}

.list-wrap > ul > li:nth-child(2n),
form > .list-wrap > div:not(.single-content) > ul:not(.ul-thngRegForm) > li:nth-child(2n) {padding-left: 6px;}

.list-wrap > ul > li:not(:nth-child(2n)),
form > .list-wrap > div:not(.single-content) > ul:not(.ul-thngRegForm) > li:not(:nth-child(2n)) {padding-left:1px; padding-right: 6px;}

.ul-thngRegForm > li {width: 50%; padding: 6px;}

.list-wrap > ul > li.single,
form > .list-wrap > div:not(.single-content) > ul > li.single {width: 100%; padding:0 0 13px;}

.list-wrap > ul > li > p,
form > .list-wrap > div:not(.single-content) > ul > li > p {padding-bottom: 7px;}

.list-wrap > ul > li label,
form > .list-wrap > div:not(.single-content) > ul > li label {font-size: 14px;} 

.list-wrap > ul > li.important label,
form > .list-wrap > div:not(.single-content) > ul > li.important label {font-weight:600;}

.list-wrap > ul > li input[type='email'],
.list-wrap > ul > li input[type='number'],
.list-wrap > ul > li input[type='password'],
.list-wrap > ul > li input[type='search'],
.list-wrap > ul > li input[type='tel'],
.list-wrap > ul > li input[type='text'],
.list-wrap > ul > li input[type='url'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='email'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='number'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='password'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='search'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='tel'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='text'],
form > .list-wrap > div:not(.single-content) > ul > li input[type='url'] {width: 100%; padding:8px 10px; border:none; border-radius: 7px; background-color:#e8e8e8;}

.list-wrap > ul > li.important input,
form > .list-wrap > div:not(.single-content) > ul > li.important input {background-color:#dee9fa;}

.list-wrap > ul > li textarea,
form > .list-wrap > div:not(.single-content) > ul > li textarea {width:100%; max-width:100%; padding:8px 10px; border:none; border-radius: 7px; background-color:#e8e8e8;}

.list-wrap textarea {width:100%; max-width:100%; padding:8px 10px; border:none; border-radius: 7px; background-color:#e8e8e8;}

.list-wrap > ul > li .input-btn-list,
form > .list-wrap > div:not(.single-content) > ul > li .input-btn-list {display:flex; justify-content:space-between;}

.list-wrap > ul > li .input-btn-list:not(:first-of-type),
form > .list-wrap > div:not(.single-content) > ul > li .input-btn-list:not(:first-of-type) {margin-top:5px;}

.list-wrap > ul > li .input-btn-list button,
form > .list-wrap > div:not(.single-content) > ul > li .input-btn-list button {width:32px; height:32px; margin-left:5px; color: #fff; border:none; border-radius:7px; background-color: #6b6b6b; transition: opacity .3s;}

.list-wrap > ul > li .input-btn-list button:hover,
form > .list-wrap > div:not(.single-content) > ul > li .input-btn-list button:hover {opacity: 0.6; transition: opacity .3s;}


.addbtn-btn {display:block; padding:10px 5px; font-size:14px; font-weight:700; color:var(--sub-color); transition: opacity .3s;}
.addbtn-btn:hover {opacity: 0.6; transition: opacity .3s;}


/* 디자인 확인용 추후 삭제예정 */
.list-wrap form > div:not(.single-content) > ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.list-wrap form > div:not(.single-content) > ul > li {width: 50%; padding-bottom: 13px;}
.list-wrap form > div:not(.single-content) > ul > li:nth-child(2n) {padding-left: 6px;}
.list-wrap form > div:not(.single-content) > ul > li:not(:nth-child(2n)) {padding-left:1px; padding-right: 6px;}
.list-wrap form > div:not(.single-content) > ul > li.single {width: 100%; padding:0 0 13px 1px;}
.list-wrap form > div:not(.single-content) > ul > li > p {padding-bottom: 7px;}
.list-wrap form > div:not(.single-content) > ul > li label {font-size: 14px;} 
.list-wrap form > div:not(.single-content) > ul > li.important label {font-weight:600;}
.list-wrap form > div:not(.single-content) > ul > li input[type='email'],
.list-wrap form > div:not(.single-content) > ul > li input[type='number'],
.list-wrap form > div:not(.single-content) > ul > li input[type='password'],
.list-wrap form > div:not(.single-content) > ul > li input[type='search'],
.list-wrap form > div:not(.single-content) > ul > li input[type='tel'],
.list-wrap form > div:not(.single-content) > ul > li input[type='text'],
.list-wrap form > div:not(.single-content) > ul > li input[type='url'] {width: 100%; padding:8px 10px; font-size:14px; border:none; border-radius: 7px; background-color:#e8e8e8;}
.list-wrap form > div:not(.single-content) > ul > li.important input {background-color:#dee9fa;}
.list-wrap form > div:not(.single-content) > ul > li textarea {width:100%; max-width:100%; padding:8px 10px; border:none; border-radius: 7px; background-color:#e8e8e8;}
.list-wrap form > div:not(.single-content) > ul > li .input-btn-list {display:flex; justify-content:space-between;}
.list-wrap form > div:not(.single-content) > ul > li .input-btn-list:not(:first-of-type) {margin-top:5px;}
.list-wrap form > div:not(.single-content) > ul > li .input-btn-list button {width:32px; height:32px; margin-left:5px; color: #fff; border:none; border-radius:7px; background-color: #6b6b6b; transition: opacity .3s;}
.list-wrap form > div:not(.single-content) > ul > li .input-btn-list button:hover {opacity: 0.6; transition: opacity .3s;}

.list-wrap .multi-input-wrap {display: flex; justify-content: space-between;}
.list-wrap .multi-input-wrap input:first-of-type {margin-right: 3.5px;}
.list-wrap .multi-input-wrap input:last-of-type {margin-left: 3.5px;}

.list-wrap-text ul {line-height:22px;}

.inner-select-wrap {display:flex; position: relative; height:32px; border-radius: 7px; background-color: #e8e8e8;}
.inner-select-wrap .inner-select-btn {position: absolute; top:50%; right: 10px; transform: translateY(-50%); padding: 0; text-align: left; font-size: 13px; font-weight: 600; border:none; background-color: transparent;}
.inner-select-wrap .inner-select-option {display: none; position: absolute; top: 32px; right: 0; padding:5px 5px 5px 0; border-radius: 7px; background-color: #626262; box-shadow: 7px 7px 13px rgba(0, 0, 0, 0.15); z-index: 100;}
.inner-select-wrap.on .inner-select-option {display: block;}
.inner-select-option > ul {min-width: 145px; max-width: 165px; height: auto; max-height: 140px; overflow-y: auto;}
.inner-select-option > ul >  li:not(:last-of-type) {border-bottom:1px dashed #969696;}
.inner-select-option > ul > li a {display: inline-block; width: 100%; height: 100%; padding:5px 10px; font-size: 13.5px; word-break: break-all; color: #fff; transition: .3s;}
.inner-select-option > ul > li:hover a {color:var(--main-color); transition: .3s;}

.inner-sign-wrap {position: relative;}
.list-wrap > div > ul > li > .inner-sign-wrap > input {padding-right: 35px;}
.inner-sign-wrap .inner-sign {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-weight: 500;}
.inner-sign-wrap > input {width: 100%; padding:8px 10px; border:none; border-radius: 7px; background-color:#e8e8e8;}


.inner-img-contents {height:501px;}
.img-content {width:100%; height:403.5px; overflow:hidden;}
.img-content .img-wrap {display:flex; width:100%; height:100%; padding:7px; border-radius:7px; background-color:#f2f2f2; overflow:hidden;}
.img-content .img-wrap > img, .img-content .img-wrap.pdf-div > div {width:100%; height:100%; margin:auto; object-position:center; object-fit:contain;}
.thumbnail-content {width:100%; height:86.5px; margin-top:10px; border-radius:7px;}
.thumbnail-list {display:flex; height:86.5px;}
.thumbnail-list li {width:86.5px; height:86.5px; border:2px solid #ddd; border-radius:7px; background-color:#fff; overflow:hidden; transition: .3s;}
.thumbnail-list li:hover,
.thumbnail-list li.on {border:2px solid var(--main-color); transition: .3s;}
.thumbnail-list li:not(:last-of-type) {margin-right:5px;}
.thumbnail-list li a {display:block; width:100%; height:100%;}
.thumbnail-list li a img {width:100%; height:100%; object-position:center; object-fit:contain;}


.inner-img-wrap {display:flex; height:48px;}
.inner-img-wrap .img-add-btn {display:none; width:48px; min-width:48px; height:48px; margin-right:9px; border:none; border-radius:7px; background-color:#e8e8e8; transition: background .3s;}
.inner-img-wrap .img-add-btn.on {display:block;}
.inner-img-wrap .img-add-btn:hover {background-color:var(--main-color); transition: background .3s;}
.inner-img-wrap .img-add-btn > svg {font-size:18px; color:#282828; transition: color .3s;}
.inner-img-wrap .img-add-btn:hover > svg {color:#fff; transition: color .3s;}
.inner-img-wrap .inner-img {position:relative;}
.inner-img-wrap .inner-img:not(:last-of-type) {margin-right:10px;}
.inner-img-wrap .inner-img .img-box {width:48px; height:48px; border:1px solid #c3c3c8; border-radius:7px; background:#fff; overflow:hidden;}
.inner-img-wrap .inner-img .img-box img {width:100%; height:100%; object-position:center; object-fit:contain;}

.inner-img-wrap .img-remove-btn {display:block; position:absolute; top:-6px; right:-6px; width:16px; height:16px; padding:0; border:none; border-radius:100%; background-color:#fff; transition:color .3s;}
.inner-img-wrap .img-remove-btn:hover {color:var(--sub-color); transition:color .3s;}

.inner-pdf-wrap {display: flex; height: 32px; align-items: center;}
.inner-pdf-wrap .pdf-add-btn {display:none; width:90px; height:32px; margin-right:9px; border:none; border-radius:7px; background-color:#e8e8e8; transition: background .3s;}
.inner-pdf-wrap .pdf-add-btn.on {display:block;}
.inner-pdf-wrap .pdf-add-btn:hover {background-color:var(--main-color); transition: background .3s;}
.inner-pdf-wrap .pdf-add-btn {font-size:14px; color:#282828; transition: color .3s;}
.inner-pdf-wrap .pdf-add-btn:hover > svg, .inner-pdf-wrap .pdf-add-btn:hover {color:#fff; transition: color .3s;}
.inner-pdf-wrap .inner-pdf-name {display:flex; justify-content:space-between; font-size: 14px; width: 180px; align-items: center; background: #e8e8e8; padding: 8px 10px; border-radius: 7px;}
.inner-pdf-wrap .inner-pdf-name a > svg {cursor: pointer; color: #282828;}
.inner-pdf-wrap .inner-pdf-name p {margin-right: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.inner-pdf-wrap .inner-pdf-name:hover {text-decoration:underline; color: #bbb; transition: color .3s; }

.inner-chk {width: 100%; padding:8px 3px;}
.inner-chk .chkbox-style {left: 0;}

.tag-wrap {display: flex; align-items: center; flex-wrap: wrap;}
.tag-wrap button {width: 80px; height: 32px; margin-right: 5px; border: none; border-radius: 7px; background-color: #e8e8e8; transition: background .3s;}
.tag-wrap button:hover {background-color: var(--main-color); color: #ffffff;}
.tag-wrap .tag-item {display: flex; align-items: center; height: 32px; font-size: 14px; padding: 3px 7px; border-radius: 7px; border: 1px solid #DFDFDF; color: #DFDFDF; margin-right: 5px; margin-top: 3px; transition: .3s;}
.tag-wrap .tag-item.on {color: #282828; border: 1px solid #282828;}

/*모달 내 경고표지*/
.warning-img-wrap {display: flex; justify-content: space-between; margin-top: 15px;}
.warning-img-wrap .warning-img {display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px;}
.warning-img-wrap .warning-tilte {background: #F70808; color:#fff; font-weight: 700; width: 50px; border-radius: 5px; padding: 45px 8px; margin-right: 5px; font-size: 14px;}
.warning-img-wrap .warning-img li {display:flex; flex-direction: column; justify-content:space-around; align-items: center; width: 95px; height: 125px; background: #FFF; border: 1px solid #dbdbdb; border-radius: 7px; padding: 10px; box-sizing: border-box; opacity:1; transition: .3s; cursor: pointer;}
.warning-img-wrap .warning-img li:hover {opacity: 0.6;}
.warning-img-wrap .warning-img li.on {background: #FFECEC; border: 1px solid #F70808;}
.warning-img-wrap .warning-img li img {width: 60px; height: 60px; object-fit: cover;}
.warning-img-wrap .warning-img li p {margin-top: 10px; font-size: 13px;}

.warning-img-wrap.yellow .warning-img {grid-template-columns: repeat(6, 1fr); gap: 9px;}
.warning-img-wrap.yellow .warning-tilte {color: #232323; background: #FFD500; padding-top:175px;}
.warning-img-wrap.yellow .warning-img li {width: 130px;}
.warning-img-wrap.yellow .warning-img li.on {background: #FFF5BF; border:1px solid #FFD500;}
.warning-img-wrap.yellow .warning-img li.smallimg img {width: 50px; height: 50px;}

.warning-img-wrap.blue .warning-img {grid-template-columns: repeat(6, 1fr); gap: 9px;}
.warning-img-wrap.blue .warning-tilte {color: #fff; background: #5693EA; padding-top: 105px;}
.warning-img-wrap.blue .warning-img li {width: 130px;}
.warning-img-wrap.blue .warning-img li.on {background: #DDE9FB; border:1px solid #5693EA;}

.warning-img-wrap.green .warning-tilte {background: #01733F;}
.warning-img-wrap.green .warning-img li.on {background:#CEF3EC; border:1px solid #01733F;}

.warning-img-wrap.orange .warning-img {grid-template-columns: repeat(6, 1fr); gap: 9px;}
.warning-img-wrap.orange .warning-tilte {color: #fff; background: #EB5405; padding-top: 70px;}
.warning-img-wrap.orange .warning-img li {width: 160px; text-align: center; height: 205px; font-size: 14px;}
.warning-img-wrap.orange .warning-img li.on {background: #FFE1D1; border:1px solid #EB5405;}

.info-content .info-title {font-size: 16px; font-weight: 600; padding: 15px 0 10px;}
.info-content:first-of-type .info-title {padding:0 0 10px;}
.info-box-list {display: grid; grid-template-columns: repeat(4, 1fr); column-gap:10px; row-gap: 10px;}
.info-box-list .info-box > div {position: relative; width:100%; height:100%; padding:15px; border-radius: 7px; background-color: #f2f2f2;}
.info-box-list .info-box.active > div {background-color: rgba(87, 147, 234, 0.2);}

.info-box .box-title {padding-bottom: 5px; font-size: 15px; color:#585858;}
.info-box .box-text {max-width: 260px; word-break: break-all; font-size: 15.5px; font-weight: 600;}
.info-box .box-icon {position: absolute; top:50%; right: 18px; transform: translateY(-50%); font-size: 21px; color:var(--sub-color);}

.info-box .info-box-head {margin-bottom:10px;}
.info-box-head .head-text {max-width: 205px; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.info-list {min-height: 230px;}
.info-list > li:not(:last-of-type) {padding-bottom:10px;}
.info-list > li > * {line-height: 19px;}
.info-list .info-list-title {font-size: 14.5px; font-weight: 500;}
.info-list .info-list-text {padding-top:5px; font-size: 14.5px; color:#3b3b3b;}
.info-list .info-list-img {display: flex; justify-content: space-between; padding-top:5px;}
.info-list .info-list-img > img {width: 44px; min-width: 44px;}
.info-list .info-list-img .img-overflow {width: 27px; height: 44px; text-align: center; line-height: 44px}

.info-box .info-box-foot {display: flex; justify-content: center; margin-top: 10px;}
.info-box-foot .foot-btns button {height: 25px; padding: 0 10px; font-size: 12.5px; line-height: 25px; color:#fff; border:none; border-radius: 7px; background-color: var(--default-color); transition: opacity .3s;}
.info-box-foot .foot-btns button svg {font-size: 12px;}
.info-box-foot .foot-btns button:hover {opacity: 0.8; transition: opacity .3s;}


.tree-contents-wrap {display: flex; min-height: 518px;}
.tree-contents-wrap > div:not(.tree-content) {width: 100%; padding: 15px 0 15px 15px;}
.tree-contents-wrap .tree-content {display: flex; flex-direction: column; width:320px; min-width:320px; padding:15px 15px 15px 0; border-right:1px dashed #cecece;}
.tree-contents-wrap .tree-list-area {flex:1; margin-top:10px; word-break: break-all; overflow: hidden;}
.tree-search-wrap input {height:30px; padding: 0 10px; border:1px solid #c5c8c8; border-radius:7px;}

.info-content:not(:last-of-type),
.info-content.border {border-bottom: 1px dashed #bcbcbc; padding-bottom: 15px;}
.info-content.padding {padding:0 10px 15px;}
.info-content.border.padding {border-bottom: 1px dashed #bcbcbc; padding:0 10px 15px;}

.info-content-wrap .inner-locker.scroll-style {max-height: 459px; height: 100%; overflow-y: scroll;}

/* search */
.bar-search {position: relative; height:30px; padding-left: 5px; margin-right: 5px; white-space: nowrap; border-radius: 30px; background-color: #e8e8e8;}
.bar-search::before {content: ""; position: absolute; top:50%; left: 33px; transform: translateY(-50%); width: 1px; height: calc(100% - 10px); background-color: #bfbfbf;}
.bar-search .search-btn {height: 30px; border: none; background-color: transparent; transition: opacity .3s;}
.bar-search .search-btn:hover {opacity: 0.8; transition: opacity .3s;}
.bar-search input {position: relative; width:calc(100% - 30px); height: 30px; text-indent: 5px; background-color: transparent; border: none; border-radius: 0 30px 30px 0 !important;}
.bar-search.width_165 {width: 165px;}

.info-icon {position: relative; width: 40px; height: 40px; margin-right: 10px; border-radius: 7px; background: linear-gradient(45deg, rgba(68,216,187,1) 0%, rgba(87,147,234,0.8) 100%);}
.info-icon > svg {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; color:#fff;}
.info-icon-title {line-height: 40px; font-weight: 600;}
.bar-btn.info {margin:auto 0;}

.bar-btn {min-width:65px; height: 30px; padding: 0 9.5px; line-height: 30px; color: #fff; border: none; border-radius: 7px; background-color: var(--default-color); transition: .3s;}
.bar-btn.only-icon {width: 30px; min-width:30px; padding:0;}
.bar-btn.btn-proj {width: 27px; min-width: 27px; padding: 0; margin-left: 7px; height: 27px; line-height: 27px; background: #e5e5e5; color: #6b6b6b;}
.bar-btn:not(:first-of-type) {margin-left: 5px;}
.bar-btn:hover {opacity: 0.8; transition: .3s;}
.bar-btn:disabled, .bar-btn.red-color:disabled, .bar-btn.default-color:disabled, .bar-btn.sub-color:disabled, .bar-btn.main-color:disabled {background-color:#cecece; color:var(--default-color);}
.bar-btn:disabled:hover, .bar-btn.red-color:disabled:hover, .bar-btn.default-color:disabled:hover, .bar-btn.sub-color:disabled:hover, .bar-btn.main-color:disabled:hover {opacity: 1; cursor: default; }
.bar-btn:not(.only-icon, .btn-proj) > svg {margin-right: 2.5px;}
.bar-btn.activebtn {background-color: #5793EA;}

.btnDelRcord, .btnRecovryDsuse, .btnDsuseItem {height: 25px; padding:3px 9.5px; box-sizing:border-box; color: #5a5a5a; border: none; border-radius: 7px; background-color: #dedede; transition: .3s;}
.btnDelRcord:hover, .btnRecovryDsuse:hover {opacity: 0.8; transition: .3s;}

.inner-bar {display: flex; padding: 15px 0 10px;}
.inner-bar.none-padding-top {padding:0 0 10px;}
.inner-bar.none-padding-bottom {padding: 15px 0 0;}
.inner-bar.top {padding:0 10px 7px 0; margin-bottom:15px; border-bottom:1px dashed #bcbcbc;}
.inner-bar.between {justify-content: space-between;}
.inner-bar .innerbar-title {padding-right: 7px; font-size: 18px; line-height:30px; font-weight: 700; color:#444;}
.inner-bar .innerbar-subtitle {font-size: 16.5px; font-weight: 700; line-height: 30px; padding-right:10px; color:#333;}
.innerbar-btns button {height: 30px; padding:0 15px; font-size: 14px; white-space: nowrap; color:#fff; border:none; border-radius: 7px; transition: .3s;}
.innerbar-btns button:hover {opacity: 0.8; transition: .3s;}

.inner-subbar {display: flex; justify-content:space-between; padding: 15px 0 10px;}
.inner-subbar.none-padding-top {padding:0 0 10px;}
.inner-subbar.none-padding-bottom {padding:15px 0 0;}
.inner-subbar .subbar-title {padding-right: 7px; font-size: 16.5px; line-height:30px; font-weight: 700; color:#333;}
.subbar-btns button {height: 30px; padding:0 15px; font-size: 14px; white-space: nowrap; color:#fff; border:none; border-radius: 7px; transition: .3s;}
.subbar-btns button:hover {opacity: 0.8; transition: .3s;}

.inner-navigator {padding-bottom: 10px;}
.inner-navigator ul {display: flex; font-size: 14.5px;}
.inner-navigator ul > li:not(:last-child) {padding-right: 5px;}
.inner-navigator ul > li:not(:last-child)::after {content: "\002F"; padding-left: 5px; color: #5a5a5a;}
.inner-navigator ul > li > span {padding-left: 3px; font-size: 14px; font-weight: 600; color: var(--sub-color);}

.inner-bottom-bar {display: flex; justify-content: end; padding:15px 0;}

.main-btn {width:135px; height:35px; font-size: 14.5px; color: #fff; border:none; border-radius: 7px; transition: opacity .3s;}
.main-btn.red-color {background-color: var(--red-color);}
.main-btn:hover {opacity: 0.6; transition: opacity .3s;}

.icon-btn {height: 23px; padding:0; font-size: 15px; color: var(--defalt-color); border: none; background-color: transparent; transition: opacity .3s;}
.icon-btn.sub-color {color: var(--sub-color);}
.icon-btn:hover {opacity: 0.8; transition: opacity .3s;}


.title-nav-btn {color: #fff; height: 34px; padding:0 15px; margin-bottom:15px; font-size: 15px; color: #fff; border: none; border-radius: 7px; background-color: var(--default-color); transition:opacity .3s;}
.title-nav-btn:hover {opacity:0.6; transition:opacity .3s;}


.product-list {margin:10px 0 15px;}
.product-list > ul {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 15px; row-gap: 10px;}
.product-list > ul > li {border-radius: 7px; background-color: #f2f2f2; transition: opacity .3s;}
.product-list > ul > li:hover {opacity:0.6; transition: opacity .3s;}
.product-list > ul > li > a {position:relative; display:block; width:100%; height:100%; padding: 13px 15px;}
.product-list > ul > li > a::before {content:"\f054"; position:absolute; top:50%; right:15px; transform:translateY(-50%); font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900);}

.product-inner-list {display:flex; line-height:30px;}
.product-inner-list .product-icon {position:relative; width:30px; height:30px; margin-right:10px; border-radius:7px; background-color:var(--main-color);}
.product-inner-list .product-icon.blue {background-color:var(--sub-color);}
.product-inner-list .product-icon.red {background-color:var(--red-color);}
.product-inner-list .product-icon.purple {background-color:#9b57ea;}
.product-inner-list .product-icon.pink {background-color:#ff49b8;}
.product-inner-list .product-icon.yellow {background-color:#ffca58;}
.product-inner-list .product-icon > svg {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:17px; color:#fff;}

.product-inner-list .product-text {display:flex; justify-content:space-between; width:calc(100% - 60px);}
.product-inner-list .product-text > p > span {font-weight:600;}


.none-box {width: 100%; padding: 40px 25px; border-radius: 7px; background-color: #f2f2f2;}
.none-box ul li {font-size:14px; font-weight: 500; text-align: center; line-height: 20px;}


.text-box .text-list {display: grid; grid-template-columns: repeat(4, 1fr); column-gap:10px; row-gap: 10px;}
.text-box.two .text-list {grid-template-columns: repeat(2, 1fr);}
.text-box .text-list > li {position: relative; padding:15px; border-radius: 7px; background-color: #f2f2f2;}
.text-box .text-list > li > h3 {font-size: 14.5px; font-weight: 500;}
.text-box .text-list > li > p {padding-top: 5px; font-size: 14.5px; color: #3b3b3b;}
.text-list .inner-select-wrap {height: auto;}
.text-list .inner-select-wrap .inner-select-btn {right:15px; padding:7px 10px; font-size: 15px; font-weight: 400; color:#282828; border-radius: 7px; background-color: #f2f2f2; cursor: pointer;}
.text-list .inner-select-wrap .inner-select-option {top: 48px; right: 15px; background-color: #484848;}
.text-list .inner-select-option > ul {max-width: 310px; max-height: 190px;}
.text-list .inner-select-option > ul > li {padding:5px 2px;}
.text-list .inner-select-option > ul > li a {font-size: 14px;}
.text-list .inner-select-option > ul > li a .option-innertext {padding-top:5px; font-size: 13px; color:#d3d3d3;}
.text-list .inner-select-option > ul > li:hover .option-innertext {color:var(--main-color); transition: .3s;}


.check-list {display: flex; justify-content: space-between; flex-wrap: wrap;}
.check-list > li {display:flex; justify-content: space-between; width:49.5%; height:auto; min-height:33px; padding:8px 15px; margin-bottom:10px; border-radius: 7px; background-color: #f2f2f2;}
.check-list > li > div:first-of-type {display:flex; justify-content:center; flex-direction:column;}
.check-list > li > div:first-of-type label {font-size: 15px; font-weight:600; white-space: nowrap;}
.check-list > li > div:first-of-type p {max-width:230px; padding-top:5px; font-size: 14px; line-height:20px;}
.check-list > li > div:last-of-type {position:relative; display: flex; justify-content: space-between; width: 37px;}
.check-list > li > div:last-of-type a {position:relative; display:inline-block; width:100%; height:100%;}
.check-list > li > div:last-of-type svg {position: absolute; top: 50%; transform: translateY(-50%); font-size: 15px; color:#494949;}


.check-option-list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap:10px; row-gap: 10px; width:100%;}
.check-option-list.single {grid-template-columns: repeat(1, 1fr);}
.check-option-list > li {position: relative; display:flex; width:100%; height:33px; padding: 0 15px; border-radius: 7px; background-color: #f2f2f2;}
.check-option-list > li label {font-size:14px; line-height:33px;}
.check-option-list > li label .minus-icon {color:var(--defalut-color);}
.check-option-list > li label .minus-icon:hover {opacity:0.6;}
.check-option-list .check-option-box {width:16px; margin-right:8px;}

.chkbox {position: relative; display: block; width:100%; height: 100%; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.chkbox input[type="checkbox"] {display: none;}
.chkbox-style {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 17.5px; height: 17.5px; border:2px solid #494949; border-radius: 5px; transition: .3s;}
.chkbox-style::after {content:"\f00c"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); color:transparent;}
.chkbox input[type="checkbox"]:checked + .chkbox-style {background-color: #494949; transition: .3s;}
.chkbox input[type="checkbox"]:checked + .chkbox-style::after {display: block; color:#fff;}


.chkbox2 {position: relative; display: block; width:100%; height: 100%; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.chkbox2 input[type="checkbox"] {display: none;}
.chkbox-style2 {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 17.5px; height: 17.5px; background:transparent; transition: .3s;}
.chkbox-style2:hover::before {color: #494949;}
.chkbox-style2::before {content:"\f055"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 20px; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); color:#ddd; transition: .3s;}
.chkbox-style2::after {content:"\f00c"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); color:transparent;  width: 17.5px; height: 17.5px; line-height:17.5px; background: transparent; border-radius: 50%; text-align: center; transition: .3s;}
.chkbox2 input[type="checkbox"]:checked + .chkbox-style2::after {display: block; background: #5793EA; color:#fff;}
.chkbox2 input[type="checkbox"]:checked + .chkbox-style2::before {display: none; color:transparent;}

.check-option-list .chkbox-style {width: 16px; height: 16px;}
.check-option-list .chkbox-style::after {font-size: 10px;}

.chk-text-wrap {display:flex;}
.chk-text-wrap .chkbox {width:17.5px; height:17.5px;}
.chk-text-wrap .chk-text {display:inline-block; max-width:92%; margin-left:5px; font-size:14px;}

.chkbox-wrap .chkbox {width:17.5px; height:17.5px;}


.radio-btns {display: flex; flex-wrap:wrap; align-items: center; column-gap: 15px; row-gap:10px;}
.radio-btns .radio-btn {position: relative; padding-left: 25px; cursor: pointer;}
.radio-btn input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;}
.radio-btns .radio-btn .radio-style {position: absolute; top: 0; left: 0; height: 17.5px; width: 17.5px; border-radius: 50%; background: #e8e8e8}
.radio-btns .radio-btn input[type="radio"]:checked ~ .radio-style {background-color: var(--main-color);}
.radio-btns .radio-style:after {content: ""; position: absolute; display: none; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; background: white;}
.radio-btns .radio-btn input[type="radio"]:checked ~ .radio-style:after {display: block;}


.group-table {display:table; table-layout:fixed; width:100%; border-collapse:separate; border-spacing:8px;}
.group-table > tbody > tr > th {padding:8px 10px; font-size:14px; background-color:#e7e7e7; border-radius:7px;}
.group-table > tbody > tr > td {padding:8px 15px; font-size:14px; background-color:#f2f2f2; border-radius:7px;}

.bar-grap {padding: 35px 15px 20px;}
.bar-grap .under-bar {width: 620px; height: 18px; border-radius: 5px; background: #f2f2f2; position: relative; text-align: center;}
.bar-grap .bar-comment {padding: 2px 10px; border-radius: 7px; background: #5793EA; color: #fff; font-size: 12px; font-weight: 600; position: absolute; left: -5px; top: -33px;}
.bar-grap .bar-comment:before {content: ""; width: 0; height: 0; border-bottom: 5px solid transparent; border-top: 5px solid #5793EA; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; left: 5px; bottom: -9px;}

/* detail page */
.detail-top-bar {padding-bottom:15px; margin-bottom:15px; border-bottom:1px dashed #cecece;}
.detail-top-bar button {width:130px; height:40px; font-size:15px; color:#fff; border:none; border-radius:7px;}
.detail-top-bar .box-style {border-radius:7px; background-color:#f2f2f2;}

.detail-inner-box {display:flex; justify-content:space-between;}
.detail-inner-box:first-of-type {padding:15px 20px; margin-bottom:10px;}
.detail-inner-box .detail-title {font-size:18px; font-weight:600;}
.detail-inner-box:nth-of-type(2) {margin-right:20px;}
.detail-inner-box:nth-of-type(2) > ul {display:flex;}
.detail-inner-box:nth-of-type(2) > ul li > div {padding:10px 20px; margin-right:10px; font-weight:600;}

.detail-content-wrap {display:flex; padding-right:20px;}
.detail-content-wrap.full {padding-right: 0px;}

.detail-content-wrap .detail-content {width:calc(100% - 130px); margin-right:25px;}
.detail-content-wrap.full .detail-content {width:100%; margin-right: 0px;}
.detail-inner-content.table {padding:18px 20px 8px; border-radius:7px; background-color:#f2f2f2;}
.detail-list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap:15px;}
.detail-list > li {display:flex; justify-content:space-between; padding:15px 20px; border-radius:7px; background-color:#f2f2f2;}
.detail-list > li > div:last-of-type {margin:auto 0;}
.detail-list .detail-title {font-size: 14.5px; font-weight: 500;}
.detail-list .detail-text {padding-top: 5px; font-size: 14.5px; color: #3b3b3b;}
.detail-link-btn {padding:10px 25px; font-size:14px; color:#fff; border:none; border-radius:7px; background-color:var(--sub-color); transition: opacity .3s;}
.detail-link-btn:hover {opacity:0.6; transition: opacity .3s;}

.detail-inner-content.labsituation {padding: 7px 25px; border-radius:25px; background-color:#fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); height: fit-content; margin-bottom: 25px;}
.detail-inner-content.labsituation .detail-tablelist {padding: 21px 15px;}
.detail-inner-content.labsituation .list-state {width: 100%; background: #F2F2F2; border-radius: 50px; display: flex; justify-content: space-between; padding: 10px 20px; align-items: center; opacity: 1; transition: .3s;}
.detail-inner-content.labsituation .list-state:not(:last-child) {margin-bottom: 40px;}
.detail-inner-content.labsituation .list-state:hover {opacity: .6;}
.detail-inner-content.labsituation .list-state div {font-weight: 700; font-size: 18px; color: #6b6b6b; padding-right: 10px;}
.detail-inner-content.labsituation .list-state .detail-icon {display: flex; align-items: center;}
.detail-inner-content.labsituation .list-state .detail-icon span {width: 50px; height: 50px; background: #fff; text-align: center; margin-right: 25px; border-radius: 50%; font-size: 24px; line-height: 50px; color: #6b6b6b;}
.detail-inner-content.labsituation .list-state div p {color:#282828; font-size: 18px;}
.detail-inner-content.labsituation .list-state div p:first-child{font-size: 14px;}
.detail-inner-content.labsituation .list-state.off {background: #ffecec; border: 1px solid #f70808;}
.detail-inner-content.labsituation .list-state.off .detail-icon span {color: #FFBFBF;}
.detail-inner-content.labsituation .list-state.off div {color:#f70808;}

.detail-inner-content.labsituation .list-state.on {background: #dde9fb; border: 1px solid #217cff;}
.detail-inner-content.labsituation .list-state.on .detail-icon span {color: #5793ea;}
.detail-inner-content.labsituation .list-state.on div {color:#217cff;}

.detail-inner-content .GHSlabelcontent {display: flex; justify-content: space-between; align-items: center;}
.detail-inner-content .GHSlabelcontent ul {display: flex; align-items: center;}
.detail-inner-content .GHSlabelcontent ul li:first-child {width: 50px; height: 50px; border: 1px solid #d4d4d4; border-radius: 7px; text-align: center; padding: 8px; box-sizing: border-box; font-size: 26px; background: #fff; overflow: hidden; margin-right: 15px;}
.detail-inner-content .GHSlabelcontent ul li h4 {font-size: 18px; font-weight: 700;}
.detail-inner-content .GHSlabelcontent ul li p {font-size: 13px; color: #aaa; margin-top: 5px;}
.detail-inner-content .GHSlabelcontent button {padding: 10px 25px; color:#fff; border: none; background-color: var(--sub-color); border-radius: 7px;}
.detail-inner-content .GHSlabelcontent button:hover {opacity:0.6; transition: opacity .3s;}

.grid-layout {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 15px;}
.grid-layout .single-item {grid-column: 1 / 3;}


.detail-table {display:table; table-layout:fixed; border-collapse:separate; border-spacing:8px;}
.detail-table tbody th {padding-right:25px; text-align:left; border-right:1px dashed #a1a1a1;}
.detail-table tbody td {padding:0 20px;}
.detail-table tbody td input {border:none; background-color:transparent;}


.single-item .detail-tablelist {display:flex; flex-wrap:wrap; column-gap: 50px;}
.detail-tablelist li {display:flex; margin-bottom:10px;}
.single-item .detail-tablelist li {width:calc(50% - 25px);}
.detail-tablelist li > div.tablelist-title {position:relative; width:18%; padding-right:25px;}
.detail-tablelist li > div.tablelist-title::before {content:""; position:absolute; top:0; right:0; width:1px; height:100%; border-right:1px dashed #a1a1a1;}
.detail-tablelist li > div.tablelist-title > * {font-weight:700;}
.detail-tablelist li > div.tablelist-text {position: relative; width:82%; padding-left:25px;}
.detail-tablelist li > div.tablelist-text input {border:none; background-color:transparent;}
.detail-tablelist li > div.tablelist-text > input:first-child {display:inline; position: relative;}
.detail-tablelist li > div.tablelist-text input:read-only {width:100%; outline:none; cursor:default;}

.table-img-wrap {display:flex; flex-wrap:wrap; height:auto;}
.table-img-wrap .inner-img {position:relative;}
.table-img-wrap .inner-img:not(:nth-child(-n+5)) {margin-top:9px;}
.table-img-wrap .inner-img:not(:nth-child(5n)) {margin-right:9px;}
.table-img-wrap .inner-img .img-box {width:113px; height:113px; border:1px solid #c3c3c8; border-radius:7px; background-color:#fff; overflow:hidden;}
.table-img-wrap .inner-img .img-box a {position:relative; display:block; width:100%; height:100%;}
.table-img-wrap .inner-img .img-box a::before {content:""; position:absolute; width:100%; height:100%; background-color:rgba(107, 107, 107, 0.7); opacity:0; transition: .3s;} 
.table-img-wrap .inner-img .img-box a:hover::before {opacity:1; transition: .3s;}
.table-img-wrap .inner-img .img-box a::after {content:"\f00e"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:20px; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-size:20px; font-weight: var(--fa-style, 900); color:#fff; opacity:0; transition: .3s;}
.table-img-wrap .inner-img .img-box a:hover::after {opacity:1; transition: .3s;}
.table-img-wrap .inner-img .img-box img {width:100%; height:100%; object-position:center; object-fit:contain;}


/* quick-menu */
.quick-menu-wrap {position:relative; width:130px; height:auto;}
.quick-menu {position: relative; width:130px; height:590px; padding:15px; text-align:center; border-radius:7px; background-color:rgba(68,216,212,0.1); transition:.3s;}
.quick-menu.fixed {position:sticky; top:15px; transition:.3s;}
.quick-menu ul li {height:70px;}
.quick-menu ul li:not(:last-of-type) {border-bottom:1px dashed #cecece;}
.quick-menu ul li a {display: flex; justify-content: center; flex-direction: column; width: 100%; height: 100%; transition: color .3s;}
.quick-menu ul li a:hover {color:var(--sub-color); transition: color .3s;}
.quick-menu ul li a p:first-of-type {padding-bottom:5px; font-size:18px;}
.quick-menu ul li a p:last-of-type {font-size:14px; font-weight:600;}


.tree-btns button.bar-btn {margin:0; background-color:var(--sub-color);}


/* keep-box */
.keep-box-wrap {position:relative; padding: 20px; margin-top:15px; border-radius: 7px; background-color: #f2f2f2; transition:background .3s; margin-right: 10px;}
/* .keep-box-wrap:hover {background-color: rgba(87, 147, 234, 0.2); transition:background .3s;} */
.keep-box-wrap.bgc-on {background-color: rgba(87, 147, 234, 0.4);}
.keep-box {display:flex; justify-content:space-between;}
.keep-box-inner {position:relative; width:100%;}
.keep-box-inner:not(:last-of-type) {padding-right:15px;}
.keep-box-inner:last-of-type {width:auto;}
.keep-box-inner:not(:first-of-type) ul:not(.keep-btns) {height:100%; padding:15px; border-radius:7px; background-color:#ddd; transition:background .3s;}
.keep-box-inner li {display: flex; overflow: hidden; align-items: center;}
.keep-box-inner li img {width: 45px; height: 45px; object-fit: cover; margin-right: 6px;}
/* .keep-box-wrap:hover .keep-box-inner:not(:first-of-type) ul:not(.keep-btns), */
/* .keep-box-wrap.on .keep-box-inner:not(:first-of-type) ul:not(.keep-btns) {background-color:#fff; transition:background .3s;} */
.keep-box-inner:first-of-type .keep-box-list {display:flex; flex-direction:column; justify-content:space-between; height:100%;}
.keep-box-list .keep-box-title {font-size:18.5px; font-weight:600;}
.keep-box-list .keep-box-subtitle {font-size:17px; font-weight:600; padding-bottom:10px;}
.keep-btns > li:not(:first-of-type) {margin-top:5px;}


/* deepfreezer-list */
.deepfreezer-list {display: grid; grid-template-columns: repeat(1, 1fr); column-gap: 3px; row-gap: 3px; height:365px; max-height:365px;}
.deepfreezer-list.x2 {grid-template-columns: repeat(2, 1fr);}
.deepfreezer-list.x3 {grid-template-columns: repeat(3, 1fr);}
.deepfreezer-list.x4 {grid-template-columns: repeat(4, 1fr);}
.deepfreezer-list.x5 {grid-template-columns: repeat(5, 1fr);}
.deepfreezer-list.x6 {grid-template-columns: repeat(6, 1fr);}
.deepfreezer-list.x7 {grid-template-columns: repeat(7, 1fr);}
.deepfreezer-list.x8 {grid-template-columns: repeat(8, 1fr);}
.deepfreezer-list.x9 {grid-template-columns: repeat(9, 1fr);}
.deepfreezer-list.x10 {grid-template-columns: repeat(10, 1fr);}
.deepfreezer-list.y2 {grid-template-rows: repeat(2, 1fr);}
.deepfreezer-list.y3 {grid-template-rows: repeat(3, 1fr);}
.deepfreezer-list.y4 {grid-template-rows: repeat(4, 1fr);}
.deepfreezer-list.y5 {grid-template-rows: repeat(5, 1fr);}
.deepfreezer-list.y6 {grid-template-rows: repeat(6, 1fr);}
.deepfreezer-list.y7 {grid-template-rows: repeat(7, 1fr);}
.deepfreezer-list.y8 {grid-template-rows: repeat(8, 1fr);}
.deepfreezer-list.y9 {grid-template-rows: repeat(9, 1fr);}
.deepfreezer-list.y10 {grid-template-rows: repeat(10, 1fr);}
.deepfreezer-list > li {display:flex; height:100%; text-align:center; font-size:13px; border-radius:7px; background-color:#e8e8e8; cursor:pointer; transition:background .3s;}
.deepfreezer-list > li:hover {background-color:rgba(87, 147, 234, 0.2); transition:background .3s;}
.deepfreezer-list > li > p {padding-bottom:3px; margin:auto;}
.shelf.on {background-color: rgba(87, 147, 234, 0.4);}

/*사용 신청서 팝업*/
.list-inner-box-wrap {display: grid; grid-template-columns: repeat(5, 1fr); gap:26px; width: 97%; margin: 12px auto 0;}
.list-inner-box {border: 1px solid #ddd; text-align: center; border-radius: 7px;}
.list-inner-box h5 {background: #F2F2F2; padding: 7px; font-weight: 700; width: 100%;}
.list-inner-box p {padding: 10px 15px 15px; font-size: 14px; line-height: 20px; }
.lc-table.article-use-table {width: 97%; margin: 0 auto;}
.inner-contents .article-use-table tr > th {padding: 0; height: auto;}
.inner-contents .article-use-table tr > td {height: auto; padding: 3px 10px; }
.inner-contents .article-use-table tr:last-of-type > td { padding-top: 4px;}
.inner-contents .article-use-table tr > td input {height: auto; padding: 5px;}
.article-use-table span.k-datepicker {width: 100%; border-radius: 7px;}
.article-use-table .k-input-button.k-button {height: auto;}
.text-only {text-align: center; margin-top:10px; line-height: 18px; font-size: 15px;}
.text-only .text-right {display: flex; flex-direction: column; text-align: right;}

/*물품 소분, 그룹 그룹원 결제자*/
.group-name {width: 274px; display:flex; justify-content: space-between; align-items: center;}
.group-name .bar-search {width: 165px;}

/*사원 조회 체크*/
.name-chk {width: 350px; height: auto; max-height: 50px; overflow-y: scroll;} /*width: 270px; 일시 긴 이름 2개, 짧은 이름 3개정도 됨*/
.name-chk ul {display:flex; flex-wrap: wrap;}
.name-chk ul > li {display:flex; align-items:center; padding: 3px 10px 3px 15px; text-align: center; background: #E8E8E8; border-radius: 15px; margin: 3px 4px 0 0; font-size: 14px; transition: .3s;}
.name-chk ul > li > p {margin-right: 9px;}
.name-chk ul > li:hover {opacity: 0.8; cursor: pointer;}

/*MSDS 텍스트*/
.msds-txt {margin-left: 60px; padding-top: 3px; display: flex;}
.msds-txt > div {margin-right: 15px; font-size: 14px; font-weight: 600; position: relative;}
.msds-txt > div:not(:last-of-type)::after {content: ""; width: 1px; height: 16px; background-color: #ccc; position: absolute; right: -7px; top:0;}
.all-txt {color: #217CFF;}
.main-txt {color: #44d8bb;}
.sub-txt {color: #6b6b6b;}

/*실험용품 구매 페이지*/
.top-btn {padding: 2px 10px;}
.order-detail .lc-table tr > th {border: none; border-bottom: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb; }
.order-detail .lc-table tr > td {text-align: center; border: none; border-bottom: 1px solid #dbdbdb; height: 80px; border-top: 1px solid #dbdbdb; }
.order-detail .lc-table tr td .chase {display: flex; align-items: center;}
.order-detail .lc-table tr td .chase .chase-img {width: 100px; height: 100px; border:1px solid #c3c3c8; border-radius:7px; background:#fff; overflow:hidden;}
.order-detail .lc-table tr td .chase .chase-img img {width: 100%; height: 100%; object-position:center; object-fit:contain;}
.order-detail .lc-table tr td .chase .chase-info-list {margin-left: 15px; text-align: left; line-height: 20px;}
.order-detail .lc-table tr td .chase .chase-info-list li:nth-child(2) {margin-bottom: 10px;}
.order-detail .lc-table tr td .chase .chase-info-list li span {font-weight: 700; font-size: 18px;}
.order-detail .lc-table tr td .chase .chase-info-list li:nth-child(3) {font-size: 12px; font-weight: 400;}
.order-detail .lc-table tr td .chase .chase-info-list .chase-info ul > li {position:relative; margin-right: 10px; font-size: 12px; font-weight: 400; height: 5px;}
.order-detail .lc-table tr td .chase .chase-info-list .chase-info ul > li:not(:last-of-type)::after {content: ""; width: 1px; height: 16px; background-color: #ccc; position: absolute; right: -5px; top: 2px;}

.order-detail.ordertxt .table-scroll-box::after {content: "현재 조회된 주문 목록이 존재하지 않습니다."; position: absolute; top: 50%; left: 50%; font-size: 16px; transform: translate(-50%, -50%); color: #6b6b6b;}

.order-detail .lc-table tr td .total-count-wrap {position: relative;}
.order-detail .lc-table tr td .total-count-wrap input.total-count {width: 130px; border-radius: 7px; padding: 10px 15px; background: #f2f2f2; border: none;}
.order-detail .lc-table tr td .total-count-wrap .count-btn-wrap {position: absolute; top: 18%; right: 15px;} 
.order-detail .lc-table tr td .total-count-wrap .count-btn-wrap button {font-size: 16px; font-weight: 700; border: none; border-radius: 3px; background: #fff; color: #6b6b6b; padding: 3px 6px;}

.order-detail .order-sale {color: #F70808;}
.order-detail .order-sale .sale-btn {background: #F70808; color: #fff; padding: 3px 6px; border-radius: 3px; font-size: 12px; font-weight: 700; width: 80px; margin: 0 auto;}
.order-detail .order-line li:nth-child(2) {font-size: 14px; color: #dbdbdb; text-decoration: line-through;}
.bar-btn.sub-btn {font-size: 14px;}

.order-detail .lc-table .order-total {display: flex; font-size: 16px; text-align: center; justify-content: center; align-items:center; padding: 10px;}
.order-detail .lc-table .order-total li {margin-right: 15px;}
.order-detail .lc-table .order-total li svg {margin-right: 10px; color: #bdbdbd;}
.order-detail .lc-table .order-total li:first-of-type, .order-detail .lc-table .order-total li:last-of-type {font-weight: 700;}
.order-detail .lc-table .order-total li:nth-child(5) {color: #f70808; font-weight: bold;}
.order-detail .lc-table .order-total li spna {margin-right: 10px;}

.order-process {padding: 8px 20px 8px; border-radius: 7px; background-color: #f2f2f2; margin-top: 15px;}
.order-process ul li .process-list {padding: 5px 30px; position: relative;}
.order-process ul li:not(:last-of-type) .process-list::after {content: "\f105"; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); font-size: 24px; position: absolute; top: 60px; right: -10px; color: #6b6b6b;}
.order-process ul li .process-list li:first-of-type {width: 120px; height: 120px; line-height: 120px; border-radius: 7px; background-color: #fff; font-size: 56px; text-align: center; color: #6b6b6b;}
.order-process ul li .process-list li:last-of-type {margin-top: 10px; font-size: 14px; color: #aaa; text-align: center;}
.process-detail {padding: 15px 30px;}
.process-detail li {line-height: 24px;}

/*등록물품 모달 테이블*/
.order-detail.inventory .lc-table tr td {font-size: 13.5px; white-space: nowrap; transition: .3s; cursor: pointer;}
.order-detail.inventory .lc-table tr:hover td {background: #f9f9f9;}
.order-detail.inventory .lc-table tr td:first-child {text-align: left; overflow: hidden; text-overflow: ellipsis;}
.order-detail.inventory .lc-table tr td h3 {font-weight: 700; overflow: hidden; text-overflow: ellipsis;}
.order-detail.inventory .lc-table tr td h3 span {color:#c3c3c3; font-weight: 700;}
.order-detail.inventory .lc-table tr td .small-txt {font-size: 12px; color:#bdbdbd; margin-top: 5px; overflow: hidden; text-overflow: ellipsis;}

.order-detail.inventory .lc-table tr .inventory-type {color:#217CFF; font-weight: 700; text-decoration: underline; position: relative;}
.order-detail.inventory .lc-table tr .inventory-type .inventory-typehover {position: absolute; left: 50px; bottom: -5px; background: rgba(0,0,0, 0.6); border-radius: 5px; padding: 5px 10px; text-align: center; color: #fff; text-decoration: none; opacity: 0; transition: .3s;}
.order-detail.inventory .lc-table tr .inventory-type:hover .inventory-typehover {opacity: 1;}

.order-detail.inventory .lc-table tr > td {height: 70px;}

.bottom-btn {display: flex; text-align: center; justify-content: center; padding: 10px 0; border-top: 1px solid #ccc; margin-top: 15px;}
.bottom-btn button {width: 160px; height: 50px; background-color: #CECECE; color: #6b6b6b; border-radius: 7px; border: none; margin-right: 10px; font-size: 18px;}

/*상품검색 모달*/
.search-list ul > li {margin-right: 20px; cursor: pointer;}
.search-list ul li.on {font-weight: 700; position: relative; margin-right: 28px; color: #217CFF;}
.search-list ul li.on::after {content: "\f00c"; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); font-size: 14px; position: absolute; right: -18px; top: 50%; transform: translateY(-50%);} 
.chase-2nd {display:flex; flex-direction:column; flex-direction: column; height: 100%; justify-content: space-between;}
.lc-table .chase-2nd .lc-button {border: none; height: 35px;}

/*상춤추가 모달*/
.addtion-list .order-line {display: flex;}
.addtion-list .order-line li {font-size: 18px;}
.addtion-list .product-name {font-size: 16px; font-weight: 600;}
.total-price {display: flex; justify-content: space-between; margin-top: 25px;}
.addtion-list .total-price li:last-of-type {font-size: 18px; font-weight: 700;}
.addtion-total .total-count-wrap {position: relative;}
.addtion-total .total-count-wrap input.total-count {width: 130px; border-radius: 7px; padding: 10px 15px; background: #f2f2f2; border: none;}
.addtion-total .total-count-wrap .count-btn-wrap {position: absolute; top: 18%; right: 10px;} 
.addtion-total .total-count-wrap .count-btn-wrap button {font-size: 16px; font-weight: 700; border: none; border-radius: 3px; background: #fff; color: #6b6b6b; padding: 3px 6px;}

/*배송지 정보 테이블*/
.delivery-table td .lc-input {margin: 3px 5px; height: 32px;}
.delivery-table td select {height: 32px; padding: 5px 8px; border: 1xp solid #c3c3c8; border-radius: 7px; margin-right: 5px;}
.delivery-table td button {border: none; background-color: #6B6B6B; color: #fff; padding: 5px 10px; margin-left: 5px;}
.delivery-table td button:hover {opacity: 0.8;}
.delivery-table tr td > .readonly {border: 1px solid #c2c2c8; background-color: #dbdbdb;}
.division-order > li {position: relative;}
.division-order > li::after {content: "\f192"; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); font-size: 14px; position: absolute; top: 50%; left: 43px; transform: translateY(-50%); color: #C3C3C3;}

/*주문완료 페이지*/
.ordcomplete-top {margin: 30px auto;}
.ordcomplete-top .top-icon {width: 120px; height: 120px; background: #5793EA; border-radius: 150px; font-size: 50px; text-align: center; line-height: 120px; color: #fff; margin: 0 auto;}
.ordcomplete-top .top-txt {font-size: 24px; margin-top: 25px; text-align: center; color: #217CFF; font-weight: 700;}
.ordcomplete-top .top-txt span {font-size: 20px; margin-top: 25px; text-align: center; color: #217CFF; font-weight: 500; opacity: 0.8;}
.ordcomplete-table {height: 395px;}
.ordcomplete-table .lc-table tr > td {padding: 16px;}

/*chat gpt*/
.chat-input {height: 45px; padding: 8px 15px; border: none; background: #e8e8e8; width: 100%; border-radius: 7px; margin-right: 10px; font-size: 16px;}
.chat-div {padding: 10px 15px; height: 650px; overflow-y: scroll; background-color: #f2f2f2; border-radius: 7px;}
.chat-div .chat-result p {font-weight: 700; width: 100%; border-radius: 7px; padding: 10px 15px; background-color: #dbdbdb; margin-top: 15px;}
.chat-div .chat-result pre {white-space: pre-wrap; line-height: 22px; padding: 0px 5px 30px 5px; border-bottom: 1px dashed #bcbcbc; font-family:'Pretendard';}
.chat-div .loding-img {display: flex; align-items: center; justify-content: center; padding-top: 25px;}
.chat-input-wrap {display: flex; width: 100%; margin-top: 15px;}

/*대시보드*/
.setting-more {width: 100%; margin: 15px 0px;}
.setting-more .setting-detail {width: 100%; padding:15px; background-color: #D9F7F1; border-radius:7px; margin-bottom: 8px; line-height: 22px;}
.setting-detail h2 {font-size: 14px; font-weight:600; width: 130px; margin-right: 13px;}
.setting-detail h2 svg {margin-right: 4px;}

.settingBtn {border: none; border-radius: 7px; padding: 8px 15px; opacity:1; transition: .3s;}
.settingBtn:hover {opacity: 0.8;}

.dashboard-list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 25px;}
.dashboard-list .left-board .board-container > li, .dashboard-list .right-board .board-container > li {padding:25px 20px; border-radius:7px; background-color:#fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); height: fit-content; margin-bottom: 25px;}
/* .dashboard-list div {width:100%; height: auto;} */
.dashboard-list div {width:100%;}
.dashboard-title-bar {display: flex; justify-content: space-between; align-items:center; width: 100%;}
.dashboard-title {font-weight: 700; font-size: 20px;}
.dashboard-title svg {color: #44d8bb; margin-right: 5px;}

.dashboard-btn {display: flex;}
.dashboard-btn li {padding: 3px 13px; border-radius: 15px; background-color: #f2f2f2; margin-left: 5px; cursor: pointer;}
.dashboard-btn li.on {background-color: #44d8bb; color:#fff;}
.dashborad-notice {background-color: #f70808; color: #fff; font-weight:600; font-size: 14.5px; border-radius: 20px; padding: 8px 15px;}
.dashborad-notice.blue {background-color: #5793ea;}
.dashborad-notice svg {margin-right: 8px;}

/*대시보드 토글버튼*/
.dashboard-list .dashborsToggle {width: 190px; padding: 6px 9px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; background: #f8f8f8; border: 1px solid #ddd; font-size: 14.5px;}
.dashborsToggle .k-switch {width: 50px; height: 25px;}
.dashborsToggle .k-switch.k-switch-on:focus, .dashborsToggle .k-switch.k-switch-off:focus {box-shadow: 0 0 0 rgba(0,0,0,0);}
.dashborsToggle .k-switch .k-switch-track {border-radius: 30px; background-color: #fff; border: 1px solid #44D8BB; font-size: 0; width:50px; height: 25px;}
.dashborsToggle .k-switch-on .k-switch-track {background: #44d8bb;}
.dashborsToggle .k-switch-off.k-state-hover .k-switch-track, .dashborsToggle .k-switch-on.k-state-hover .k-switch-track, .dashborsToggle .k-switch-off.k-state-focused .k-switch-track, .dashborsToggle .k-switch-on.k-state-focused .k-switch-track, .dashborsToggle .k-switch-on:focus .k-switch-track, .dashborsToggle .k-switch-off:focus .k-switch-track  {border: 1px solid #44d8bb;}
.dashborsToggle .k-switch:hover .k-switch-track {border: 1px solid #44d8bb;}
.dashborsToggle .k-switch-off .k-switch-thumb-wrap {left:15px;}
.dashborsToggle .k-switch-on .k-switch-thumb-wrap {left:calc(100% - 15px);}
.dashborsToggle .k-switch-off .k-switch-thumb {width: 19px; height: 19px; background: #44D8BB; border: none;}
.dashborsToggle .k-switch-on .k-switch-thumb {width: 19px; height: 19px; background: #fff; border: none;}

.dashboard-text {margin: 15px 0; font-size: 17px;}
.dashboard-text.line {border-top: 1px dashed #bcbcbc; padding-top: 15px;}
.dashboard-text.small {font-size: 14.5px; margin-top: 10px;}
.dashboard-detail-list {width:100%; margin-top: 15px; border-top: 1px dashed #bcbcbc; padding: 10px 0;}
.dashboard-detail-list.icon-list.border-none {border-top: none;}
.dashboard-detail-list.icon-list ul {display: grid; grid-template-columns: repeat(3, 1fr); column-gap:10px; row-gap:7px;}
.dashboard-detail-list ul {display: grid; grid-template-columns: repeat(2, 1fr); column-gap:10px; row-gap:8px;}
.dashboard-detail-list .single-item {grid-column: 1 / 3;}
.dashboard-detail-list ul li {display: flex; justify-content: space-between; padding: 10px 15px; border-radius: 18px; opacity: 1; transition: .3s; cursor: pointer;}
.dashboard-detail-list ul li:hover {opacity: 0.5;}
.dashboard-detail-list ul li p {text-overflow: ellipsis; white-space: nowrap;}
.dashboard-detail-list.right-list {border:none; display: flex; justify-content: space-between;}
.dashboard-detail-list.right-list ul {display: flex; flex-direction:column; width: 65%;}

.dashboard-detail-list .dashboard-icon {width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(-45deg, rgba(68,216,187,0.8) 0%, rgba(255,255,255,1) 80%); text-align: center; font-size: 24px; line-height: 60px; color: #44D8BB;}
.dashboard-detail-list.icon-list ul li div:nth-child(2) {width: 50%; text-align: end;}

.dashboard-detail-list ul li:first-child {background-color: #44d8bb;}
.dashboard-detail-list ul li:nth-child(2) {background-color: #D9F7F1;}
.dashboard-detail-list ul li:nth-child(3) {background-color: #5793ea; color:#fff;}
.dashboard-detail-list ul li:nth-child(4) {background-color: #dde9fb;}
.dashboard-detail-list ul li:nth-child(5) {background-color: #ffbfbf;}

.dashboard-detail-list.icon-list ul li:first-child {background-color: transparent;}
.dashboard-detail-list.icon-list ul li:nth-child(2) {background-color: transparent;}
.dashboard-detail-list.icon-list ul li:nth-child(3) {background-color: transparent; color: #282828;}
.dashboard-detail-list.icon-list ul li:nth-child(4) {background-color: transparent;}
.dashboard-detail-list.icon-list ul li:nth-child(5) {background-color: transparent;}

.dashboard-detail-list ul li:nth-child(4) .dashboard-icon, .dashboard-detail-list ul li:nth-child(3) .dashboard-icon {background: linear-gradient(-45deg, rgba(87,147, 234,0.8) 0%, rgba(255,255,255,1) 80%); color: #5793ea;}
.dashboard-detail-list ul li:nth-child(5) .dashboard-icon {background: linear-gradient(-45deg, rgba(255,148, 148, 0.8) 0%, rgba(255,255,255,1) 80%); color: #FF9494;}
.dashboard-detail-list ul li:nth-child(6) .dashboard-icon {background: linear-gradient(-45deg, rgba(117,117, 117, 0.5) 0%, rgba(255,255,255,1) 80%); color: #3a3a3a; font-size: 16px;}

.dashboard-detail-list.gray-color {border-top: 0px; margin-top: 0px; padding: 8px 0;}
.dashboard-detail-list.gray-color.border {border-top: 1px dashed #bcbcbc; padding: 10px 0;}
.dashboard-detail-list.gray-color ul li {background-color:#f2f2f2; color:#282828; height: 50px; line-height: 30px;}

.dashboard-detail-list.red-color ul li:first-child {background-color: #F55C5C; color: #fff;}
.dashboard-detail-list.red-color ul li:nth-child(2) {background-color: #ffbfbf;}
.dashboard-detail-list.red-color ul li:nth-child(3) {background-color: #ffecec; color: #282828;}

.dashboard-detail-list p span {font-size: 12px;}

.dashboard-contents {display:flex; justify-content:space-between; width: 100%; padding: 10px; border-radius: 7px; background-color: #dde9fb; margin: 10px 0;}
.dashboard-contents.green {background-color: transparent; font-size: 16px; font-weight: 00; border-bottom: 1px solid #44D8BB;  border-radius: 0px; margin: 10px 0 15px;}
.dashboard-contents.green span {align-items: center;}
.dashboard-contents.green span svg {color:#44d8bb; margin-right: 10px; font-size: 16px;}
.dashboard-contents.green p:nth-child(2) {font-weight: 700;}

.dashboard-list .graph-box {position: absolute; top:0; left: 0; width: auto; padding: 10px 15px; background-color: #D9F7F1; border-radius: 15px;}
.dashboard-list .graph-box p {font-size: 14px; margin-bottom: 5px;}
.dashboard-list .graph-box ul {display: grid; grid-template-columns: 1fr auto; gap: 5px;}
.dashboard-list .graph-box ul li:first-child, .dashboard-list .graph-box ul li:nth-child(3) {font-size: 18px; font-weight: 700; margin-right: 8px;}
.dashboard-list .graph-box ul li:nth-child(2n) {font-size:13px; color: #fff; background-color: #5793ea; border-radius: 15px; padding: 5px 10px;}

/*임시 kendo 스타일*/
.donut-chart .k-chart > svg {position: absolute; top: -10px !important; left: 45%;}
.dashboard-list .donut-txt {position: absolute; top: 170px; width: 154px; font-size: 14px; margin-left: 35px;}
.dashboard-list .donut-txt-num {position: absolute; top: 60px; font-size: 16px; text-align: center; font-weight: 600; width: 154px;}

/*스티커*/
.sticker-info h4 {font-weight: 700; margin-top: 10px; margin-bottom: 5px;}
.sticker-info p:last-child {margin-bottom: 15px;}
.sticker-btn {display: flex; justify-content: space-between; margin-top: 10px; padding: 15px; border-radius: 7px; background: #DDE9FB;}
.sticker-btn > li {padding: 15px 12px; width:175px; background: #fff; border-radius: 7px; text-align: center; cursor: pointer;}
.sticker-btn > li:hover {background: #5793EA; color:#fff; transition: .3s;}
.sticker-btn > li.on {background: #5793EA; color:#fff;}
.qr-info .lc-table tbody tr:first-child td {text-align: center; border-right:none; width: 240px; height: 115px;}
.qr-info .lc-table tbody tr:nth-child(2) td {text-align: center; width: 125px; height: 115px;}
.sticker-tip {padding: 10px; font-size: 13px; background: #DDE9FB; border-radius: 7px; margin-top:10px;}
.sticker-tip span {font-weight: 700;}
.QRsticker {width: 72px; height: 72px; background: #f1f1f1; margin: 0 auto;}
.GHSsticker {width: 99px; height: 67px; background: #f1f1f1; margin: 0 auto;}

/*라벨 생성*/
.GHSinfobtn {border-radius: 7px; padding: 5px 10px; background-color: var(--default-color); color:#fff; border: none; margin-right: 10px;}
.GHSinput {display: flex; justify-content: space-between;}
.GHSchek {width: 100%; max-height: 485px; overflow-y: auto; padding: 10px 25px 0 12px;}
.GHSchek .GHStag h5 {margin-top: 20px;}
.GHStag .tag-wrap {margin-top: 8px;}
.GHSchek .tag-list {display: flex; flex-wrap: wrap;}
.GHSchek .tag-list .tag-item {margin-bottom: 5px;}
.GHSchek .tag-list .tag-item:hover {border: 1px solid #5793EA; color: #5793EA;}
.GHSchek .tag-list .tag-item.on {color:#217CFF; border: 1px solid #217CFF; background: #DDE9FB;}
.GHSchecklist {margin-top: 15px;}
.GHSchecklist li {display: flex; justify-content: space-between; align-items: flex-start;}
.GHSchecklist > li {position: relative; margin-bottom: 10px;}
.GHSchecklist li .chkbox-style {transform: translateY(0%);}
.GHSchecklist > li h6 {font-weight: 700; font-size: 14.5px;}
.GHSchecklist > li p {width: 80%; font-size: 14.5px;}
.sticker-info p a {font-weight: 600; color:#217CFF; text-decoration: underline;}
.sticker-info .lc-table tr > td {padding: 5px 0 0 0;}
/*GHS라벨 미리보기*/
.GHSlabel-wrap {width: 793px; transform: scale(0.9);}
.GHSlabel-continer {background: #f1f1f1; border-radius: 7px; padding: 25px 35px; font-size: 8px; width: 600px;}
.GHSlabel-continer .GHSlabel-contents {border: 1px solid #282828; border-radius: 7px; background: #fff;}
.GHSlabel-continer .GHSlabel-contents > div {padding: 8px; border-bottom: 1px solid #282828; height: 100%; min-height: 72px;}
.GHSlabel-continer .GHSlabel-contents h1 {font-weight: 800; margin-bottom: 10px;}
.GHSlabel-continer .GHSlabel-contents p:first-child {margin-bottom: 5px;}
.GHSlabel-continer .GHSlabel-contents ul li {margin-right: 15px; position: relative; padding-bottom: 3px;}
.GHSlabel-continer .GHSlabel-contents img {width: 50px; height: 50px; overflow: hidden; object-fit:contain; margin-right: 5px;}
.GHSlabel-continer .GHSlabel-contents .list-label-contents > li:not(:last-child)::after {content: ""; width: 1px; height: 8px; background: #232323; position: absolute; top: 50%; right: -8px; transform: translateY(-50%);}
.GHSlabel-continer .GHSlabel-contents .QRcode {width: 17%; border-left: 1px solid #282828; padding: 5px; overflow: hidden;}

/*tab content*/
.pledge {padding: 20px;}
.pledge .title {font-size: 40px; font-weight: 600; text-align: center; position: relative;}
.pledge .title:after {content: ""; width: 375px; height: 2px; position: absolute; bottom: -6px; left:50%; transform : translateX(-51%); background: #6b6b6b;}
.pledge .vowarea {color: #2b2b2b; font-weight: 500; margin-top: 40px; line-height: 20px;}
.pledge .vowarea p {margin-bottom: 12px;}
.vowarea .numlist {margin-bottom: 18px;}
.vowarea .numlist > li {display: flex; margin-bottom: 3px;}
.vowarea .numlist > li .num {margin-right: 10px;}
.vowarea .sign {text-align: center; font-weight: 600; margin-top: 20px;}
.vowarea .name {font-weight: 700; text-align: right; margin-top: 20px;}