/* RESET */
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
html,body, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd ,section,nav  {padding:0; border:0;}
ul, ol, li{margin:0; padding:0; list-style:none;}
label, input, button, select, img, a, i {vertical-align:bottom; border:none;}
input, textarea, button, select {font-family:inherit;}
button {padding:0; cursor:pointer;}
p {margin:0; padding:0;}
img {max-width:100%; max-height:100%; object-fit:contain; object-position:50% 50%;}
table {width:100%; margin:0; padding:0; border:none; border-collapse:collapse}
hr {display:none;}
a, a:link, a:visited, a:hover, a:focus, a:active {text-decoration:none;}
:focus {outline:none;}
p {margin: 0 0 0px 0; line-height: 1.5;}
h1, h2, h3, h4, h5, h6 {color: #000; line-height: 1.3; margin-top: 5px; margin-bottom: 10px;font-weight: 600;}
img.full-img {width:100%;}
*::-webkit-scrollbar {width: 5px;}
*::-webkit-scrollbar-thumb {background-color: #777;}
*::-webkit-scrollbar-track {background-color: #ccc;}

/* COMMON */
.al {text-align:left !important;} .ac {text-align:center !important;} .ar {text-align:right !important;}
.fr{float:right!important}.fl{float:left!important}.fn{float:none!important}
.pointer {cursor:pointer !important;} .nopointer {cursor:default !important; pointer-events: none;}
.pd4{padding:4px!important}.pd10{padding:10px!important}.pdlr10{padding-left:10px!important;padding-right:10px!important}.pdlr20{padding-left:20px!important;padding-right:20px!important}.mt0{margin-top:0!important}.mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.mt50{margin-top:50px!important}.mt60{margin-top:60px!important}.mt80{margin-top:80px!important}.mt90{margin-top:90px!important}.mt120{margin-top:120px!important}.mb10{margin-bottom:10px!important}.mb20{margin-bottom:20px!important}.ml5{margin-left:5px!important}.ml10{margin-left:10px!important}.ml20{margin-left:20px!important}.ml30{margin-left:30px!important}.ml50{margin-left:50px!important}.ml70{margin-left:70px!important}.ml90{margin-left:90px!important}.fs8{font-size:8px!important}.fs10{font-size:10px!important}.fs12{font-size:12px!important}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs18{font-size:18px!important}.fs20{font-size:20px!important}
.colpad10 {padding:0 10px !important;}
.row {margin:0 -5px;margin-bottom:10px;}
.row:before, .row:after {content: " ";clear:both;display:table;}
.row .col {width: 100%;position: relative;min-height: 1px;padding:0 5px;}
.row .col2 {width: 50%;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .col3 {width: 33.3333%;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .col4 {width: 25%;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row-content {margin:0 0;max-width:1150px !important;position:relative;}
.row .colf1 {width: 200px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf2 {width: 400px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf3 {width: 600px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf35 {width: 680px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf4 {width: 800px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf5 {width: 1000px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf6 {width: 1200px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf7 {width: 1400px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.row .colf8 {width: 1600px;float:left;position: relative;min-height: 1px;padding:0 5px;}
.bg-normal, .bg-good, .bg-blue, .bg-st10 {background-color:#2b80ff !important;}
.bg-caution, .bg-fair, .bg-green, .bg-opst10 {background-color:#009688 !important;}
.bg-warning, .bg-poor, .bg-yellow {background-color:#d5a150 !important;}
.bg-poor {background-color:#ffeb3b !important;color:#000 !important;}
.bg-danger, .bg-bad, .bg-red, .bg-st20 {background-color:#ca1625 !important;}
.bg-blank, .bg-gray {background-color:#b1b1b5 !important;}
.bg-orange, .bg-opst30 {background-color:rgb(255, 87, 34) !important;}
.bg-purple {background-color:rgb(156, 39, 176) !important;}
.bg-brown {background-color:#a52a2a !important;}
.bg-gray {background-color:#aaa !important;color:#000 !important;}
.c-normal, .c-good, .c-blue {color:#2b80ff !important;}
.c-caution, .c-fair, .c-green {color:#009688 !important;}
.c-warning, .c-poor, .c-yellow {color:#ffeb3b !important;}
.c-danger, .c-bad, .c-red {color:#ca1625 !important;}
.c-blank, .c-gray {color:#b1b1b5 !important;}
.c-orange {color:rgb(255, 87, 34) !important;}
.c-purple {color:rgb(156, 39, 176) !important;}
.c-cyan {color:#00ffff !important;}
.c-pink {color:#ffc0cb !important;}
.c-lgreen {color:#90ee90 !important;}
.c-lyellow {color:#ffffe0 !important;}
.c-lred {color:#f08080 !important;}
.c-white {color:#ffffff !important;}
.c-black {color:#000000 !important;}
.colf35 img {width:100%;}
.colf35 .cht-index {margin-top:-12px;text-align:center;overflow: hidden; padding-bottom: 5px;}
.colf35 .cht-index img {width:90%;}
.hf1 {height:160px;}
.hf2 {height:340px;}
.hf3 {height:500px;}
.fcred {color:#ca1625 !important;}
.fcgray {color:#999 !important;}
.fcblue {color:#00BCD4 !important;}
.fcdblue {color:#2b80ff !important;}
.ex_th1 { border-top: 1px solid black !important; border-bottom: 1px solid black !important; }
.ex_th2 { border-bottom: 1px solid black !important; }
.w900 {width:900px !important;}
.minh300 {min-height:300px;}
.fcmd {width:100%;height: 200px; z-index: 100;  position: fixed; left: 0; bottom: 0; background-color: #fff;}
.fwb {font-weight:600 !important;}
label.form, label.form input {height:24px !important;line-height:24px !important;}
.vat {vertical-align:top !important;}
.small {font-size:70% !important;line-height:1.2 !important;}
.span-form {vertical-align:bottom; font-size:14px; color:#b1b1b5;}
.message {font-size:14px;color:#888;padding:10px 0;}
.material-icons {vertical-align: bottom;    margin-bottom: 3px;}
select.form {height: 35px;  line-height: 35px;color: #000; font-weight: 600; border: 1px solid #ddd; background: #fff;  padding: 0 10px; -webkit-appearance: menulist;appearance:menulist;}
.limit-width-wrap {margin:0 auto;max-width:1600px;}

.sr-only { overflow: hidden; clip: rect(0 0 0 0); position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); }
.text-overflow { display:-webkit-box; overflow:hidden; line-height: 1.5; text-align: left; white-space: normal; word-break: keep-all; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.clearfix:before, .clearfix:after {content:" "; clear:both;display:table;}

/* BUTTON Manage */
a.btn {font-family:'Noto Sans KR';color: #000;display:inline-block;position: relative; padding: 12px 30px; margin: 2px 1px; font-size: 16px; font-weight: 400; line-height: 1; text-decoration: none; letter-spacing: 0; cursor: pointer; background-color: transparent; border: 0; border-radius:3px; outline: 0; transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);text-align:center;}
a.btn-block {display:block !important;}
a.btn-half {width:calc(50% - 20px) !important;}
a.btn-30p {width:calc(33% - 10px) !important;padding:12px 0;}
a.btn-tiny {padding: 10px 20px; font-size: 14px;}
a.btn-xtiny{flex-shrink:0;align-self:center;padding: 5px 10px;font-size: 13px;line-height:1.3}
a.btn-micro {padding: 4px 6px; margin: 1px 1px; font-size: 12px;}
a.btn-small {padding: 8px 12px; margin: 2px 1px; font-size: 14px;}
a.btn-form {padding: 6px 10px 7px;margin: 0 1px 1px; font-size: 14px;vertical-align:bottom;}
a.btn-default {color: #fff; background-color: #999; border-color: #999; box-shadow: 0 2px 2px 0 hsla(0,0%,60%,.14), 0 3px 1px -2px hsla(0,0%,60%,.2), 0 1px 5px 0 hsla(0,0%,60%,.12);}
a.btn-darkred {color: #fff; background-color: #ea2c6d; border-color: #b8124a;}
a.btn-red {color: #fff; background-color: #ca1625; border-color: #ca1625;}
a.btn-yellow {color: #fff; background-color: #d5a150; border-color: #d5a150;}
a.btn-orange {color: #fff; background-color: #f08f00; border-color: #c27400;}
a.btn-green {color: #fff; background-color: #4caf50; border-color: #4caf50;}
a.btn-blue {color: #fff; background-color: #00BCD4; border-color: #00BCD4;}
a.btn-purple {color: #fff; background-color: #9c27b0; border-color: #9c27b0; }
a.btn-gray {color: #fff; background-color: #bbb; border-color: #bbb; }
a.btn-black {color: #fff; background-color: #555; border-color: #555; }
a.btn-black.on {color: #555; background-color: #fff; border:1px solid #999; }
a.btn-white {color: #555; background-color: #fff; border:1px solid #999; }
a.btn-white.on {color: #fff; background-color: #555; }
.submenu{display: flex; flex-wrap:wrap; gap:15px;}
.submenu + .submenu{margin-top:10px;}
.submenu a.btn {padding: 10px 25px;margin:0px; color: #555; line-height:1.3; background-color: #fff; border:1px solid #999; }
.submenu a.btn.on {color:#fff;border-color: #00a6ee; background-color: #00a6ee; }
a.btn .material-icons {vertical-align: bottom; margin-right: -20px; margin-bottom: 0px;}
a.btn.btn-tiny .material-icons {margin-right: -10px; margin-bottom: -2px;}
a.btn.btn-micro .material-icons {margin:0;padding-right:3px;font-size:20px;}
a.btn:not(.disabled):hover {transition: none;box-shadow: 0 14px 26px -12px rgba(0,0,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2)}
a.btn2:not(.disabled):hover {transition: none;box-shadow: 0 14px 26px -12px rgba(0,0,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2)}
a.btn-simple {color: #9c27b0;display:inline-block;font-weight: 600; text-decoration: none; letter-spacing: 0; cursor: pointer; }
a.btn-simple:not(.disabled):hover {color:#2b80ff;}
a.btn-simple.on {color:#2b80ff;}
a.btn-simple.small {color: #555;font-weight: 400;font-size:13px; text-decoration: underline; }
a.btn-underline {color: #555;display:inline-block;font-weight: 400; text-decoration: underline; letter-spacing: 0; cursor: pointer;font-size: 12px; }
a.btn-chart-abs {position:absolute;top:10px;}
a.btn.disabled {cursor:default !important;}
a.btn:not(.on).disabled {background-color:#ddd;color:#999;}

/*───────────────────────────────────────────────────────────

	Common

───────────────────────────────────────────────────────────*/
html,body {margin:0 auto; position:relative;font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','sans-serif','dotum'; font-size:14px; line-height:180%; color:#000;font-weight:400;width:100%;}
#wrap {position:relative; margin:0 auto;}
.container {padding:90px 20px 50px 260px;min-height:calc(100vh - 46px);}

/*─────────── Header ───────────*/
#top {display:flex; flex-direction:column; gap:25px 0;position: fixed; left: 0; top: 0; width:230px; height:100%;padding:17px 20px; background-color: #27293d; z-index: 10; border-bottom: 2px solid #000000; }
/* .container, .common-width-wrap {margin:0 auto;width:1400px;position:relative;} */
.top__logo {display:block;}
.top__myinfo{display: flex;flex-wrap:wrap;align-items: center;gap:5px 10px;}
.top__myinfo-text {color:#b1b1b5;transition:color .3s;}
.top__myinfo-text .material-icons {font-size:21.5px;margin-bottom:0;}
.top__myinfo-text.myinfo {font-size:13.5px;cursor:pointer;}
.navbar-nav {display: flex;flex-direction: column;gap:2px 0;color: #b1b1b5;}
.navbar-nav__link {display:flex;color: #b1b1b5;font-size: 16px;padding:9px 0;transition:color .3s;}
.navbar-nav__link.on {position: relative;padding:7px 0 9px;color:#fff;}
.navbar-nav__link.on:after {content: '';width: 100%;left: 0;bottom: 0px;height: 2px;background: #00a6ee;position: absolute;}
@media (min-width:1025px){
	.top__myinfo-text:hover{color:#fff;}
	.navbar-nav__link:hover{color:#fff;}
}
#bottom {color: #555; font-size: 13px; border-top: 1px solid #ccc;background-color:#ddd; padding: 10px 10px; text-align: right;width:100%;min-width:1400px;}

.navbar-detail {position:fixed;width:100%;left:0;top:60px;background-color: #000; z-index: 0;visibility: hidden;opacity: 0;transition: visibility 0s, opacity 0.5s linear;padding:10px 20px 20px;}
.navbar-nav:hover .navbar-detail {visibility: visible;opacity: 1;z-index: 10;}
.navbar-detail-item {display:inline-block;padding-left:16px;vertical-align:top;width: 150px; }
.navbar-detail-item.on {padding-left:0;}
.navbar-detail-item a {display: block;font-size: 14px;color: #bdbdbd; line-height: 28px;letter-spacing:-1px;}
.navbar-detail-item a.on {color:#00a6ee;}

.main {padding:30px;}
.page-title {color:#b1b1b5;}
.page-title span.title {font-size:18px;}
.page-title span.desc {font-size:14px;margin-left:10px;}
.page-title.indicator {color:#b1b1b5;border-left:5px solid #FF9800;padding-left:5px;line-height:1;}
.page-title.indicator.on {border-left-color: #4caf50;}

.card {padding:15px 0;position: relative;}
.card.on { padding:20px;box-shadow: 0 0 6px 0 rgba(43, 128, 255, 0.7);background-color: #eee; }
.card.onwhite { padding:20px; }
.card .card-title {color:#555;font-size: 16px;margin-bottom:16px;}
.card-action {float:right;}
.card-action .material-icons {color:#555;}

.breadcomb{color: #00a6ee; font-size: 16px; vertical-align: bottom; display: inline-block; }
.breadcomb-slash{margin:0 5px;color: #00a6ee;}

/* TABLE */
.table {width:100%; border-spacing: 0; border-collapse: collapse;text-align:center; }
.table tr {border-top: 1px solid  #313452;}
.table tr td, .table tr th {text-align: center; font-size: 14px; padding:5px; color: #000;}
.table tr th {font-weight:400;color:#555;background-color:#eee;}
.table.tleft tr td, .table.tleft tr th {text-align: left; padding-left:20px;}
.table .tbody-scroll {height: 280px;overflow-y: auto;overflow-x:hidden; display: block;position:relative;}
.table .tbody-scroll tr{width:100%;display: table;}

.table-bottom-indicator {width: 1590px;border-spacing: 0; border-collapse: collapse;text-align:center;    table-layout: fixed;}
.table-bottom-indicator tr {}
.table-bottom-indicator tr td, .table-bottom-indicator tr th {text-align: center; font-size: 12px; padding: 2px 4px; color: #b1b1b5;border: 1px solid #313452; }
.table-bottom-indicator th {font-size: 14px;font-weight:700;background-color: #26293b;}
.table-bottom-indicator td {background-color:#1e1e2f;}
/* TABLE */
.table {width:100%; border-spacing: 0; border-collapse: collapse;text-align:center; }
.table tr {border-top: 1px solid  #313452;}
.table tr td, .table tr th {text-align: center; font-size: 14px; padding:5px; color: #000;}
.table tr th {font-weight:400;color:#555;background-color:#eee;}
.table.tleft tr td, .table.tleft tr th {text-align: left; padding-left:20px;}
.table .tbody-scroll {height: 280px;overflow-y: auto;overflow-x:hidden; display: block;position:relative;}
.table .tbody-scroll tr{width:100%;display: table;}

.table.border tr td, .table.border tr th {padding: 2px 20px; border: 1px solid #313452; }
.table.border th {font-size: 14px;font-weight:700;}
.table.border td {}
.table.border.matrix tr td {height:60px;}
.table.border.nopad tr td, .table.border.nopad tr th {padding:2px 0;}

.table.odd tr:nth-child(odd) {background-color:#efefef;}
.table.even tr:nth-child(even) {background-color:#efefef;}

.side-menu-wrapper {position:fixed;top:50px;right:-230px;z-index:20;background-color: #efefef;color: #fff; padding:0px ;width:230px;height:100vh;transition: transform .2s ease-out;}
body.right-on .side-menu-wrapper {transform: translate3d(-230px,0,0);transition: transform .2s ease-out;}
a.side-menu-btn { padding:0px 20px;height: 50px;line-height:50px;font-size:14px;color:#555; display:block;letter-spacing: 1px;border-bottom:1px solid #b1b1b5; }
a.side-menu-btn .material-icons{margin:0 10px 0 0;line-height:50px;}
a.side-menu-btn.on {color:#0136dc;}

.menu-tab {display:block;margin:0px 0;padding:10px 20px; color: #fff; }
.menu-tab-title {display:inline-block;font-size:20px;line-height:1;letter-spacing:0;vertical-align: bottom;}
.menu-tab-title .material-icons {margin-bottom:-1px;margin-right:5px;}

.desc {font-size: 12px;    color: #b1b1b5;;line-height:1.4;}

.panel	{position: relative; margin:10px 16px 24px;border:1px solid rgba(255,255,255,.25);box-shadow: 2px 2px 10px 0 rgba(255,255,255,.25)}
.panel.on {border: 2px solid #673AB7;}
.panel-title	{border-bottom: 1px solid rgba(255,255,255,.25); font-size: 16px; padding:10px 10px 10px 20px;}
.panel-body	{padding: 15px 22px;}
.ddata-line	{line-height:1.3;}
.dtitle	{font-size:12px;font-weight:bold;color:#999;margin-right:4px;}
.ddata	{color:#ddd;}
.ddata-line-big	{line-height:1.3;padding:5px 0 10px;}
.ddata-line-big .dtitle	{font-size:12px;font-weight:bold;color:#999;margin-right:4px;display:block;padding-bottom:5px;}
.ddata-line-big .ddata	{color:#ddd;}

/* HELP */
.help-list {display:block;margin:0px 0px 20px 10px;}
.help-list li {display:block;padding:2px 0;}
.help-list li.second {padding-left:20px;}
.help-list li.third {padding-left:40px;}
.help-list li a {display:block;width:100%;color: #ddd;font-size:14px;}
.help-list li.second a, .help-list li.third a {color: #b1b1b5;}
.help-list li a.on {color:#00a6ee;}
.help-list li a:hover {color:#fff;}

.help .section {width:1200px;margin:0 0 40px 60px;}
.help .section .title {margin-left:0px;padding:20px 0 10px;font-size:20px;font-weight:700;color:#00a6ee;}
.help .section .title.second {margin-left:20px;padding:10px 0;font-size:18px;font-weight:700;color:#b1b1b5;}
.help .section .title.third {margin-left:40px;padding:10px 0;font-size:18px;font-weight:700;color:#b1b1b5;}
.help .section .table {margin:10px 0;}
.help .section .table td, .help .section .table th {font-size:14px;color:#ccc;}
.help .section img {max-width:100%;border:1px solid #888;margin:10px 0 10px 20px;}
.help .section .desc {color:#aaa;margin:10px 0;font-size:14px;line-height:1.6;word-break: normal;}
.label {color:#fff; padding: 2px 4px;background-color: #313452;  line-height: 1; border-radius: 4px;font-weight:700;font-size: 70%; margin-right: 5px;}

.help .table tr td, .help .table tr th {padding:5px 10px;}



/* ETC */
.c-datepicker {z-index:999;}
.c-datepicker  * {box-sizing: content-box;}
.c-datepicker__calendar , .c-datepicker__clock,  .modal-btns {color:#555;}
.c-datepicker__header-date__day {line-height:1.5;}
.c-datepicker table {width:auto;}
.c-datepicker__clock .c-datepicker__clock__num {line-height:50px;}
input[type="text"].calendar { width: 90px !important; text-align: center !important; padding: 0;}

a.btn-icon, i.btn-icon {color:#555;cursor:pointer;}
a.btn-icon:not(.disabled):hover, i.btn-icon:not(.disabled):hover {color:#aaa;}
img.thumb {width:130px;padding:10px;}
img.hthumb {height:100px;padding:10px;}

/* LOGIN */
.sub-visual {background:url(/Images/library.jpg) center center no-repeat; background-size:cover; height:100vh; padding-top:50px;position: relative;	text-align: center;}
.sub-visual:after {position: absolute; z-index: 1; width: 100%; height: 100%; display: block; left: 0; top: 0; content: ""; background-color: rgba(0, 0, 0, 0.5);}
.login-wrap {position: absolute;top:50%;left: 50%;transform: translate(-50%,-90%);width:520px; padding:40px 64px 55px; background-color: #fff;border-radius:8px;z-index:10;}
.login-header {text-align: center;margin-bottom:30px;}
.btn-login {display:inline-block;width:100% !important;margin-bottom:5px;}
.btn-sub-login {display:inline-block;width:122px;font-size:12px; color:#323232; text-align: center; line-height: 26px;height: 26px;}
.login-footer {margin-top: 40px; border-top:1px solid #ddd;padding-top:18px; color:#555;}

/* INPUT & TAB & MSG*/

textarea {padding:10px;min-height:60px;border: 1px solid #ddd;}
input[type="number"],input[type="search"] { height: 35px;  line-height: 35px; padding-left:10px;color:#000;font-weight:400;border-bottom:1px solid #555;background-color: transparent;}
input[type="text"],input[type="search"] { height: 35px;  line-height: 35px; padding-left:10px;color:#000;font-weight:400;border-bottom:1px solid #555;background-color: transparent;}
input[type="password"] { height: 35px;  line-height: 35px; padding-left:10px;color:#000;font-weight:400;border-bottom:1px solid #555;background-color: transparent;}
input[type="text"].readonly {color:#999 !important;}
input[type="text"]:focus,input[type="search"]:focus, input[type="password"]:focus {border-bottom:1px solid #00a6ee;}
select {height: 35px;  line-height: 35px;padding: 0 10px;color:#000;font-weight:400;border-bottom:1px solid #555;background-color: transparent;}
select option {line-height: 35px;padding: 0 10px;color:#000;font-weight:400;}
select.list {background-image: inherit;height: auto !important; padding: 0 10px !important;}

label.check input[type="checkbox"]{margin:0;padding-right:5px;line-height: 35px; height: 35px;}
label.check input[type="checkbox"] + span {display: inline-block;line-height: 35px; height: 35px;cursor:pointer;font-size:15px;transition:all 0.3s;padding:0 10px 0 3px;}
label.check input[type="checkbox"] + span.large {font-size:20px;}

label input[type="radio"]{margin:0 5px 0 0;line-height: 35px; height: 35px;}
label input[type="radio"] + span {display: inline-block;line-height: 35px; height: 35px;cursor:pointer;transition:all 0.3s;  padding:0 10px 0 3px;}
label input[type="radio"] + span.large {font-size:15px; }


.toast {visibility: hidden; min-width: 250px;margin-left: -125px; background-color: #2b80ff;    color: #fff; text-align: center;  border-radius: 6px;padding: 16px;position: fixed;  z-index: 9999; left: 50%; bottom: 30px;}
.toast.show {visibility: visible;animation: fadein 0.5s, fadeout 0.5s 2.5s;}
@keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}}
@keyframes fadeout {from {bottom: 30px; opacity: 1;}to {bottom: 0; opacity: 0;}}

.tab_type {margin-bottom:36px;}
.tab_type li {float:left;}
.tab_type li a {display:block;width:170px;height:50px;text-align:center;font-size:15px;line-height:50px;color:#666;border:1px solid #dddddd;border-right-width:0;}
.tab_type li a:last-child {border-right-width:1px;}
.tab_type li a:not(.disabled):hover{color:#f0427d;z-index:1;transition:color 0.5s ease-in-out;}
.tab_type li a.on {font-weight: 600;border-color:#f0427d;border-right-width:1px;color:#f0427d;transition:color 0.5s ease-in-out;}
.tab_type:before, .tab_type:after {content:" "; clear:both;display:table;}

.wireframe {border:1px solid #555;line-height:200px;font-size:28px;padding:20px;margin:10px 0;text-align:center;color:#555;font-weight:700; box-shadow: inset 0px 0px 20px 0px rgba(0,0,0, 0.5);}
.wire {display:block;border:1px solid #555;padding:10px;margin:10px;color:#555;}

/* PAGINATION */
ul.pagination {text-align:center; margin:0 auto}
ul.pagination li {border:1px solid #313452; color:#000; text-align:center; display:inline-block;vertical-align: middle;margin:2px 2px;width:33px; height:33px;line-height:33px;background-repeat:no-repeat; background-position:center;background-size: cover;}
ul.pagination li.prev {background-image:url(/Images/Common/arrow_prev.png);}
ul.pagination li.next {background-image:url(/Images/Common/arrow_next.png);}
ul.pagination li.on {background-color:#313452;color:#fff;}
ul.pagination li a {vertical-align:top;width:100%; height:33px; line-height:33px;font-size:14px; color:#000; text-align:center;display:inline-block;}
ul.pagination li.disabled {opacity:0.5;border: 1px solid #31345280;}
ul.pagination li a:not(.disabled):hover {transition: none;box-shadow: 0 14px 26px -12px rgba(0,0,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2)}

/* FILE */
#ulFileList {text-align:left;}
#ulFileList li {line-height:18px; vertical-align:middle; font-size:14px; color:#666666; display:block; margin:10px; text-align:left;border-bottom:1px solid #666666; }
#ulFileList li span {padding-left:24px;padding-bottom:5px}
#ulFileList li button.delfile {width: 16px;height: 16px;border: 1px solid #888888;padding: 0;border-radius: 0;margin-left: 10px;margin-bottom:2px;float:right;}
#ulFileList li a{color:#666;}
.board-file-wrap {margin:20px 0;padding:10px 0 20px;border-top:2px solid #999;border-bottom:2px solid #999;}
span.span-board-file {font-family:'Noto Sans KR';display:inline-block;padding: 6px 10px; margin: 2px 1px; font-size: 13px; font-weight: 400; line-height: 1; text-decoration: none; letter-spacing: 0; border-radius:3px; outline: 0; text-align:center;color: #555; background-color: #fff; border:1px solid #999;}
/* TAB */
.tab-table {table-layout: fixed;width:100%; border-spacing: 0; border-collapse: collapse;}
.tab-table td {text-align:center;padding:0;border:1px solid #555;background-color:#fff;}
.tab-table td.on {background-color:#555;}
.tab-table td a {display:inline-block;width:100%;height:50px;line-height:50px;font-size:16px;text-align:center;color:#555;}
.tab-table td.on a {color:#fff;}
/* TABLE */
.table.grid th  {border-right:1px solid #777;}
.table.grid td {border-right:1px solid #777;}
.table.grid th:last-child, .table.grid td:last-child {border-right:0;}
.table.allleft td {text-align:left;padding-left:20px;}
.table.left td:not(:first-child) {text-align:left;padding-left:20px;}
.table.center td:not(:first-child)  {text-align:center;padding-left:0;}

.table input[type="text"], .table input[type="search"], .table input[type="password"], .table select {width:calc(100% - 10px);text-align:left;line-height:24px;height:24px}
.table span.line {font-size:14px;color:#555; display:inline-block; width:calc(100% - 10px);text-align:left;line-height:24px;height:24px;border-bottom:1px solid #ddd;}
.table label input[type="radio"], .table label input[type="checkbox"], label.inline input[type="radio"], label.inline input[type="checkbox"]  {line-height:24px;height:24px}
.table textarea {padding:10px;min-height:80px;border: 1px solid #ddd;width:calc(100% - 10px);float:left;margin-left:5px;}
.table.pop-form {border-spacing: 3px;border-collapse: separate;}
.table.pop-form tr {border-top:0;}
.table.pop-form td, .table.pop-form th {font-size:14px;padding:2px 4px;}
.table.pop-form th {font-size:12px;font-weight:700;letter-spacing:0}
.table.pop-form td.divider {padding:0px;margin:0px;height:14px;font-size:0}

	.backdrop-mask {position:fixed;left: 0;top: 0;width:100%;height:100vh;background-color:rgba(0,0,0,0.6);display:none;z-index: 100001;}
	.mask-message {margin:50vh auto 0;padding:20px 20px;background-color:#6bb8f9;border:1px solid #6bb8f9;border-radius:5px;width:80%;max-width:270px;font-size:1.1px;text-align:center;color:#fff;transform: translateY(-50%);}
	.progress-outer { padding: 5px;margin: 20px 0 0;}

	.progress {text-align:left; height: 20px;margin: 0px;overflow: hidden;background-color: #bebfbf;border-radius: 20px;-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);width:200px;}
	.progress .progress-bar {display:inline-block;height:20px; border-radius: 20px;background-color: #2196f3;box-shadow: none;animation: animate-positive 2s;
		background-image: -webkit-linear-gradient(
				45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
		background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
		background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
		-webkit-background-size: 40px 40px;background-size: 40px 40px;}

	.progress2 {text-align:left; height: 20px;margin: 0px;overflow: hidden;background-color: #bebfbf;border-radius: 20px;-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);width:200px;}
	.progress2 .progress-bar2 {display:inline-block;height:20px; border-radius: 20px;background-color: #2196f3;box-shadow: none;animation: animate-positive 2s;
		background-image: -webkit-linear-gradient(
				45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
		background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
		background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
		-webkit-background-size: 40px 40px;background-size: 40px 40px;}




	.progress-outer .progress-value {font-size: 12px;text-align:right;color: #fff;}

	label.switch_label input[type="checkbox"].input { display: none; }
	span.switch {position: relative;display: inline-block;height: 26px;border-radius: 13px;
		background-color: #999;color: #fff;cursor: pointer;
		transition: all .3s;
	}
	span.switch > * {transition: all .3s;font-size: 12px;line-height:26px;}
	span.switch .marble {position: absolute;top: 1px;left: 1px;display: block;width: 24px;height: 24px;background-color: #fff;border-radius: 50%;box-shadow: 0 0 10px rgba(0, 0, 0, .3);}
	span.switch .text {padding-left: 30px;padding-right: 10px;line-height: 25px;}
	label.switch_label .input:checked + span.switch {background-color: #d5a150;padding-right:20px;}
	label.switch_label .input:checked + span.switch .text {padding-left: 12px;}
	label.switch_label .input:checked + span.switch .marble {left:auto;right:1px;}

	span.label.is0 {background-color: #999;}
	span.label.is1 {background-color:#d5a150;}
	span.label.kakao {background-color:#f3e12a;color:#000;}
	span.label.naver {background-color:#06be34;}
	span.label.apple {background-color:#000;}
    span.label.playstore {background-color:#f39c12;}
    span.label.appstore {background-color:#95a5a6;}
	span.label.email {background-color:#eee;color:#000;}
	div.line {width:100%;height:1px;background-color:#ddd;margin:10px 0 10px;}

	span.thumb {display:inline-block;width:50px;height:50px;border-radius:50px;overflow:hidden;background:url(/Images/member.png) center center no-repeat;background-size:cover;    vertical-align: top;}
	span.thumb.big {width:70px;height:70px;border-radius:70px;}
	span.thumb.long { flex-shrink:0; width:88px; height:50px; background-color: #f2f2f2; border-radius: 0; }

																			/* region editor */
	.video_wrap{text-align:center;margin-top:20px;position:relative;line-height:0;}
	#video {width:480px;position:relative;}
	.video_info {position:absolute;left:0px;bottom:0px;padding:5px 20px;line-height:1; background-color:rgba(0,0,0,0.5);text-align:right;width:480px; margin-left: 50%;transform: translateX(-240px);}
	.video_progress {position:absolute;left:0px;bottom:-3px;background-color:#ddd;font-size:0;height:3px;width:480px; margin-left: 50%;transform: translateX(-240px);text-align:left;}
	.video_progress span{display:inline-block;height:100%;width:0%;background-color:#d5a150; }
	#current, #total_time {font-size:13px;color:#fff;}
	.audio_wrap {margin:0 20px;position:relative;}
	.wavesurfer_wrap {margin:20px auto 0;width:calc(100% - 60px);display:inline-block;}
	.waveform {position:relative}
	.waveform:before {content:" ";width:100%;height:1px;position:absolute;left:0;top:50%;background-color:#332c1d;}
	.audio_wrap .btn-icon {display:inline-block;width:50px;height:50px;overflow:hidden;padding:5px;color:#d5a150; border:2px solid #d5a150;border-radius:50%;margin:5px;cursor:pointer;line-height:1;}
	.audio_wrap .btn-icon .material-icons {line-height:1;font-size:36px;}
	.audio_wrap .btn-icon:not(.disabled):hover{color:#555;border-color:#555;}
	#time_dragging {display:none;position:absolute;left:100px;top:36px;font-size:12px;font-weight:700;border-radius:3px;text-align:center;padding:5px 0px;line-height:1;background-color:#555;color:#fff;z-index:100;width:60px;}
	.drag_wrap {margin-top:10px;position:relative;height:20px;}
	.drag_control {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; position:absolute; display:inline-block;height:20px;background-color:rgba(0,0,0,0.1);/*border-right:2px solid rgba(0,0,0,0.2);border-left:2px solid rgba(0,0,0,0.2);*/width:100px;font-size:12px;line-height:20px;text-align:center;color:#999;cursor:pointer;}
	.drag_control.on {background-color:rgba(213,161,80,0.5);border-color:#d5a150;width:100px;color:#000;font-weight:700;}
	.drag_control:after{content:'';position:absolute;right:0px;top:0;width:1px;background-color:#999;height:100%;}
	.drag_control .ui-resizable-e,.drag_control .ui-resizable-w {width:12px;}
	.pause_drag_wrap {margin-top:10px;position:relative;height:20px;cursor:pointer;}
	.pause_drag_control {position:absolute; display:inline-block;height:20px;background-color:rgba(233,30,99,0.2);width:100px;font-size:12px;line-height:20px;text-align:center;color:#999;border-radius:6px;}
	.pause_drag_control .text {white-space: nowrap;overflow-x: hidden;text-overflow: ellipsis;display:inline-block;width:100px;width:100px;color:#000;font-weight:700;padding:0 10px;}
	.pause_drag_control:after {  content: " ";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color:transparent transparent rgba(233,30,99,0.2) transparent;}
	.pause_drag_control.on {background-color:rgba(233,30,99,0.5);color:#fff;font-weight:700;}
	.pause_drag_control.on:after { border-color:transparent transparent rgba(233,30,99,0.5) transparent;}

	.data_wrap {margin-top:30px; display: flex;}
	.data_wrap textarea {display:block;width:100%;margin:5px auto;resize: vertical;padding:5px 10px;line-height:1.2;min-height:50px;}
	.data_wrap .script_wrap textarea {min-height:60px;line-height:1.6}
	.script_more_wrap {width:50%;padding:10px 20px;border-radius:6px;border:1px solid #d5a150;border-left-color:#fff;}
	.data_wrap .script_more_wrap textarea {min-height:77px;line-height:1.6;border:1px solid #d5a150;}
	.time_wrap {width:20%;}

	.script_wrap {width:40%;padding:10px 20px;border-radius:6px; border:1px solid #d5a150;border-right-color:#fff;background-color:#d5a150}
	.script_wrap input[type="text"] {width:70px;background-color:#fff;}
	.script_wrap input[type="text"]#timestamp {width:266px;background-color:#fff;height:24px; line-height:24px;color:#555;font-size:12px;background-color:#ddd;}
	.script_wrap select {background-color:#fff;}
	.card_wrap {width:40%;padding:10px 20px;border-radius:6px;border:1px solid #d5a150;border-left-color:#fff;}
	.card_item {margin:5px auto;padding:10px 10px;border:1px solid #aaa;border-radius:6px;}
	.video_no {height:22px;float:right;}
	/* endregion  */


	/* 👀 스크립트 연결돼있어서 수정 X -- edit.js --> collection:script, lesson:edit */
	.time_item {margin:5px 0;padding:5px 10px;cursor:pointer;background-color:#eee;}
	.time_item.on {position:relative; background-color:#d5a150;color:#fff; border:1px solid #d5a150;}
	.time_item.on:after {content: " ";position: absolute;right: -10px;top: 0%;display:inline-block;width:10px;height:100%;background-color:#d5a150}

	/* 👀 data_wrap, script_wrap 클래스 정리되면 important 지워도됨 */
	.pop-script__container{display: flex;gap:20px;}
	.pop-script__time-wrap{flex-shrink: 0;width:300px;}
	.pop-script__time-top{display: flex;flex-wrap:wrap;gap:5px;}
	.pop-script__time-top-sec{display:flex;align-items: center;}
	.pop-script__time-top-sec input{width:32px;height: 25px !important;line-height:25px !important;}
	.pop-script__time-list{overflow-y:scroll;overflow-x:hidden;height: calc(100vh - 300px);margin-top: 10px;}
	.pop-script__data-cont{display:flex;flex-wrap:wrap;align-self:flex-start;width:100%;}
	.pop-script__md-wrap{flex-grow:1;width:45%;min-width:400px;padding:10px 20px 48px;border-radius:6px; border:1px solid #d5a150;border-right-color:#fff;background-color:#d5a150}
	.pop-script__md-top{display: flex;justify-content: space-between;gap:10px;padding-bottom: 10px;border-bottom:1px solid #ddd}
	.pop-script__md-time{display: flex;flex-wrap:wrap;gap:10px;width:200px;}
	.pop-script__md-time-select{flex-shrink: 0;width:100%;}
	.pop-script__md-time-select select{width:100%;background-color: #fff;border:none;}
	.pop-script__md-time-btns{align-self:flex-end;}
	.pop-script__md-input{display: flex;align-items:center;gap:5px;width:100%;}
	.pop-script__md-input input{width:50% !important;background-color: #fff;border:none;}
	.pop-script__ai-wrap{flex-grow:1;width:55%;min-width:500px;border-radius:6px;border:1px solid #d5a150;padding:10px 20px 20px !important;margin-left:-1px;}
	.pop-script__ai-top{padding-bottom:7px;border-bottom:1px solid #ddd;}
	.pop-script__textarea-wrap{display: flex;flex-wrap:wrap;gap:10px;margin-top: 14px;}
	.pop-script__container textarea{min-height:90px !important;padding:10px !important;resize:vertical !important;margin:0 !important}
	.pop-script__add-file-table{border:none;margin-top:10px}
	.pop-script__add-file-table th,
	.pop-script__add-file-table td{padding:5px 10px;font-size:14px;font-weight:500;border-top:2px solid #fff;}
	.pop-script__add-file-table th{display:block; width:90px !important;background-color: #dcdcdc;}

/* region POP USER */
.pop-wrap {margin:0 auto; position:relative;width:960px;}
.pop-wrap-etc {margin:10px; position:relative;}
.btn-icon.btn-close {position:absolute;right:0px;top:-5px;font-size: 36px;}
.pop-content {margin-left:120px;padding:20px;}
.pop-menu {position:fixed;left:0;top:0;width:120px;height:100vh;padding:2px 4px;background: #ddd;border-right:1px solid #999;}
.pop-menu.worker {background: #d5f7fb;}
.pop-menu.tutor {background: #f9e2db;}
.pop-menu a.btn,.pop-menu input[type=search],.pop-menu input[type=text],.pop-menu img.pop-thumb {display:block;float:left;width:100%;}
.pop-menu a.btn {padding:8px 10px;font-weight:700;font-size:12px;color: #555;display:inline-block;text-align:center;border:1px solid #999;background-color:#fff;}
.pop-menu input[type=text], .pop-menu input[type=search] {height:28px;line-height:28px;}
.pop-menu a.btn.on {color:#fff;border-color: #00a6ee; background-color: #00a6ee; }
.pop-menu a.btn:not(.disabled):hover {transition: none;box-shadow: 0 14px 26px -12px rgba(0,0,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2)}
img.pop-thumb {display:block;margin:10px auto;border: 1px solid #ddd;background-color: #eee;}
.pop-name-titile {line-height:1;font-weight:700;}
.phone-line {margin:0 10px 0 5px;white-space: nowrap;}
.phone-line .memo {margin:0 10px 0 5px; color:#999;}
.phone-line i.btn-icon, pop-search i.btn-icon {margin:0 5px; font-size:21px;}
.pop-search input[type=text] {width:84px;}
.tt-menu {width:200px;padding: 8px 0;background-color: #fff;border:1px solid rgba(0, 0, 0, 0.2);margin:12px 0;box-shadow:0 5px 10px rgba(0,0,0,.2)}
.tt-dataset, .tt-suggestion {white-space:nowrap;padding: 5px 10px;text-align:left;}

.tt-suggestion.tt-cursor, .tt-suggestion:hover {background-color:#ddd;}

.content-view {min-height:200px; padding:10px; border:1px solid #eee;}
.comment-wrap {max-height:140px;overflow:auto;}
.comment {margin:0 10px 10px;border-bottom:1px solid #ddd;}
.comment-desc {font-size:12px;color:#999;}
.pop-top-menu {margin:10px 0;}
/* endregion */

/* region === tinymce === */
.qImgBlock {display:block;margin:10px auto;max-width:calc(100% - 20px);}
.qImgLeft {float:left;max-width:calc(100% - 20px);margin:0 10px 0px 0px;}
.qtable {   width: calc(100% - 20px);margin:20px auto;border-spacing: 0; border-collapse: collapse;border: 1px solid #ddd;}
.qtable td, .qtable th { background-color: #fff;padding: 0;border: 1px solid #ddd;
	padding: 8px; line-height:160%; vertical-align: top; border-top: 1px solid #ddd; text-align:center; }
.qtable > thead > tr > th, .qtable > thead > tr > td {vertical-align: bottom; border-bottom: 2px solid #ddd;background-color:#eee;}
/* endregion */

	/* region POP */
	.pop_wrap {display:none; position:fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 100;background-color:#000;opacity:0.9;}
	.pop_content {position:absolute;z-index:1000;top: 0px;left: 0px;width: 100%;height: 100%;}
	.pop_text {color:#fff;font-size:20px;text-align:center;line-height:1.6;}
	.pop_text.underline {text-decoration:underline;text-decoration-color:#2bacfd;text-decoration-thickness:1px;}
	.pop_btn_wrap {width:100%;text-align:center;height:100px;}
	a.btn_circle_blue {display:inline-block;width:100px;height:100px;border-radius:100px;background-color:#2bacfd;text-align:center;font-size:23px;color:#fff;line-height:100px;}
	.btn_pop_close {position:absolute;top:10px;right:10px;width:50px;height:50px;}
	.btn_pop_close  i.material-icons {font-size: 46px;color:#bbbbbb;}

	.toast {visibility: hidden; min-width: 250px;margin-left: -125px; background-color: #555;color: #fff; text-align: center;  border-radius: 6px;padding: 16px;position: fixed;  z-index: 9999; left: 50%; bottom: 30px;}
	.toast.show {visibility: visible;animation: fadein 0.5s, fadeout 0.5s 2.5s;}
	@keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}}
	@keyframes fadeout {from {bottom: 30px; opacity: 1;}to {bottom: 0; opacity: 0;}}
	/* endregion */
	.desc_table th {background-color: #009688 !important; }
	.question_table th {background-color: #b3d4fc !important; }
	.pop-form.answer_table th {background-color: #c09853 !important; }


/*───────────────────────────────────────────────────────────

	Sub Common

───────────────────────────────────────────────────────────*/
/*─────────── Common Style ───────────*/
.sub-top{display: flex;justify-content:space-between;gap:10px 20px;}
.sub-top__left{display: flex; flex-wrap:wrap;align-items:center;gap:10px;}
.sub-top__right{display: flex; flex-wrap:wrap;align-items:center;gap:10px;}
.sub-content{margin-top: 30px;}
.sub-small{font-size:10px;color:#7E7F7E;line-height:1.3;text-align: left;}
.sub-thumb{flex-shrink: 0; width:30px; height:30px; background-color: #f2f2f2; background-position:center; background-size:cover; border-radius:50%;}
.sub-thumb.medium{width:50px;height:50px;}
.sub-thumb.big{width:70px;height:70px;}
.sub-thumb.long{width:88px;height:50px;border-radius:0}
.sub-label .label{font-size:10px;font-weight: 400;margin-right:0;}
.sub-label .label + .label{margin-right:5px;}
.sub-select{width:120px;}

/*─────────── VideoList ───────────*/
.video-list__select-wrap { display: flex; gap:10px; }
.video-list__table{border-bottom:1px solid  #313452;}
.video-list__table th.number { width:60px; }
.video-list__table th.collection { width:250px; }
.video-list__table th.submit { width:120px; }
.video-list__table-collection { display: flex;gap:10px 15px; align-items:center; }
.video-list__table-collection .text-overflow{line-height:1.3;}
.video-list__table-title {display: flex;gap:5px; align-items:center; }
.video-list__table-title a.btn-simple { display:flex; }
.video-list__table_label { text-align: left; }

/*─────────── Popup ───────────*/
.pop-wrap-etc{margin:20px;}
.pop-wrap-etc h2{margin-bottom:20px;}
.pop-wrap-etc__top{display: flex;gap:10px;}

.pop-cont{display:flex;flex-wrap:wrap;margin-top: 15px;}
.pop-cont__item{display: flex;gap:0 20px;width:100%;}
.pop-cont__item + .pop-cont__item{margin-top:5px;}
.pop-cont__item--half{width:50%;}
.pop-cont__title{display:flex; align-items:center; justify-content:center; flex-shrink: 0;width:90px;font-size: 12px;color:#555;font-weight:700;letter-spacing: 0;padding:4px;background-color: #eee;}
label.pop-cont__title{cursor:pointer;}
.pop-cont__entry{display: flex;align-items: center;width:100%;gap:5px;;}
.pop-cont__entry--medium{width:300px;}
.pop-cont .pop-cont__input{width:100%;}
.pop-cont__message{width:100%;}
.pop-cont__img-wrap{width:100%;}
.pop-cont__file-wrap {width: 100%}
.pop-cont__file-area{display:flex;gap:0 5px;position: relative;}
.pop-cont__file-label{display: flex;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;}
.pop-cont__file-input {position: absolute;top: 0;left: 0;opacity: 0;clip: rect(0, 0, 0, 0);z-index: -1}
.pop-cont__textarea{width:100%;height:100%;border:1px solid #ddd;resize:none;}

/* Collection */
.pop-cate .pop-cont{max-width:500px;}
.pop-video select { width:120px; }
.pop-video .pop-cont__file-area{width:250px;}
.pop-thema select{width:120px;}
.pop-thema-video-add{display:flex;width:30px;height:30px;border-radius:20%;background: rgb(238, 238, 238);justify-content:center;align-items:center;cursor:pointer;}
.pop-thema-video-add p{font-size:20px;font-weight:bold;}
.pop-cont__thema_video{display:flex;margin-top:5px;gap:0 20px;width:100%;}
.thema_video_entry{width:90%;overflow:auto;max-height:120px;}
.pop-thema_video_cont{display:flex;gap:10px;margin:10px 0;}
#pop-thema_video{display:flex;width:100%;border-bottom:1px solid;}
.pop-cont__add_video{display:flex;margin-top:5px;gap:0 20px;width:100%;}
.add_video_entry{display:inline-block;width:90%;overflow:auto;align-items:center;gap:10px;}
#pop-thema__add_video{padding:5px 0;border-radius:5px;}
#pop-thema__add_video p{border:1px solid #F0F0F0;background-color: #F0F0F0;padding:5px 5px 5px 10px;border-radius:5px;cursor:pointer;}
.thema-video-delete img { padding-bottom: 7.5px; margin-left: 5px; }

/* MyCourse Course */
.pop-cont__desc{display: flex; width: 100%; margin-top: 15px; justify-content: space-between}
.pop-cont__video{width: 100%; margin-top: 10px;}
.course__cnt{margin-bottom: 7px;font-size: 12px;font-weight: 500;line-height: 17.38px;text-align: left;color: #000000}
.course__desc{font-size: 12px;font-weight: 500;line-height: 17.38px;text-align: left;color: #B1B1B5;}
.pop-course{display: flex; width: 100%; height: 5vh; justify-content: space-between;}
.pop-course-title{display: flex; align-items: center;}
.select_video{border: 1px solid #999999; border-radius: 3px; color:#7E7F7E; font-size:13px; font-weight: 500;}
.v_row.on {background-color:#FFDEAD;}

/* Loader */
#loading { display: flex; width: 100%; min-height: 85px; justify-content: center; align-items: center; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #b2bec3; border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; transform: translate(-50%, -50%); z-index: 20;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* upderline */
div.underline { border-bottom: 1px solid #DDDDDD; margin-top: 8px}

/* hashtag */
#video-hash-item { width: 60%; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
#category-hash-item { width: 100%; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
#course-hash-item { width: 100%; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
#hash-item-delete { display: inline-block; border: 1px solid #F0F0F0; border-radius: 50px; background-color: #F0F0F0; font-size: 12px; font-weight: 700; color: #5C5C5C; padding: 0 5px; cursor: pointer; margin-right: 10px; margin-top: 3px;}
#hash-item-delete img { padding-bottom: 7.5px; margin-left: 5px; }