@charset 'utf-8';

/* layout */
section.layout {margin: 20px 0;}
section.layout:after {content: ''; display: block; clear: both;}
section.layout h3 {font-size: 16px; font-weight: 400; opacity: 0.7; margin-bottom: 15px;}
section.layout * + h3 {margin-top: 40px;}
section.layout h3 span {font-size: 13px; margin-left: 5px;}
section.layout > section.layout-box {position: relative; border: 1px solid #dfe8f1; background: #ffffff; border-radius: 3px; min-height: 100px; box-sizing: border-box; padding: 15px 20px;}
#popup-wrapper section.layout > section.layout-box {min-height: 0;}
section.layout > section.layout-box.no-padding {padding: 0;}
section.layout.col2 > section.layout-box {float: left; width: calc(50% - 10px);}
section.layout.col2 > section.layout-box + section.layout-box {margin-left: 20px;}
section.layout.col2-1 > section.layout-box {float: left;}
section.layout.col2-1 > section.layout-box:first-child {width: calc(66% - 10px);}
section.layout.col2-1 > section.layout-box + section.layout-box {margin-left: 20px; width: calc(34% - 10px);}
section.layout.col1-2 > section.layout-box {float: left;}
section.layout.col1-2 > section.layout-box:first-child {width: calc(34% - 10px);}
section.layout.col1-2 > section.layout-box + section.layout-box {margin-left: 20px; width: calc(66% - 10px);}
section.layout.col3 > section.layout-box {float: left; width: calc(34% - 10px);}
section.layout.col3 > section.layout-box:nth-child(2) {width: calc(32% - 20px);}
section.layout.col3 > section.layout-box + section.layout-box {margin-left: 20px;}
@media screen and (max-width: 1200px) {
    #main section.layout > section.layout-box {float: none; width: 100%; margin: 0;}
    #main section.layout > section.layout-box + section.layout-box {margin-top: 20px;}
}


/* button */
div.button-box {text-align: right; overflow: hidden; clear: both; margin-top: 10px;}
div.button-box.left {text-align: left;}
div.button-box.center {text-align: center;}
div.button-box.right {text-align: right;}

.btn {position: relative; display: inline-block; box-sizing: border-box; min-width: 120px; height: 28px; line-height: 26px; padding: 0 0.8em; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; overflow: hidden; text-align: center; vertical-align: middle; background: #999999; color: #ffffff; font-family: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.3s;}
.btn > span {position: relative; z-index: 10;}
.btn:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: background-color 0.3s, box-shadow 0.2s; z-index: 3;}
.btn:not(.disabled):hover {border-color: rgba(0, 0, 0, 0.4);}
.btn:not(.disabled):hover:before {background-color: rgba(255, 255, 255, 0.2);}
/* .btn:active:before {box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4) inset;} */

/* button size */
.btn.small {min-width: 70px; height: 24px; line-height: 22px; font-size: 11px;}
.btn.medium {min-width: 90px; height: 28px; line-height: 26px; font-size: 12px;}
.btn.large {min-width: 120px; height: 36px; line-height: 34px; font-size: 14px;}
.btn.x-large {min-width: 160px; height: 44px; line-height: 42px; font-size: 17px;}
.btn.small.icon {min-width: 24px; padding: 0;}
.btn.medium.icon {min-width: 28px; padding: 0;}
.btn.large.icon {min-width: 36px; padding: 0;}
.btn.x-large.icon {min-width: 44px; padding: 0;}
/* color */
.btn.default {background: #fefefe; color: #555a60;}
.btn.blue {background: #3498db; color: #ffffff;}
.btn.sky {background: #65a6ff; color: #ffffff;}
.btn.red {background: #e74c3c; color: #ffffff;}
.btn.orange {background: #e67e22; color: #ffffff;}
.btn.green {background: #00bca4; color: #ffffff;}
.btn.azure {background: #41e5c0; color: #ffffff;}
.btn.black {background: #2d2d2d; color: #ffffff;}
.btn.yellow {background: #ffcc00; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.btn.purple {background: #984dff; color: #ffffff;}
.btn.gray {background: #dfe8f1; color: #555a60;}
.btn.dark {background: #999999; color: #ffffff;}
.btn.main {background: #00bca4; color: #ffffff;}
.btn.sub1 {background: #65a6ff; color: #ffffff;}
.btn.sub2 {background: #ffcc00; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.btn.caution {background: #e74c3c; color: #ffffff;}
/* button options */
.btn.icon i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1em; z-index: 5;}
.btn.icon > span {position: absolute; left: -999px;}
.btn.full {width: 100%; min-width: inherit;}
.btn.round {border-radius: 100px;}
.btn.left {float: left; margin-right: 3px;}
.btn.disabled {cursor: no-drop; opacity: 0.5;}

/* icon left/right */
.btn.icon-left {padding-left: 3em;}
.btn.icon-left:after {content: ''; position: absolute; left: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; background: rgba(255, 255, 255, 0.4); z-index: 5;}
.btn.icon-left i {position: absolute; left: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; z-index: 5; border-right: 1px solid rgba(0, 0, 0, 0.05);}
.btn.icon-right {padding-right: 3em;}
.btn.icon-right:after {content: ''; position: absolute; right: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; background: rgba(255, 255, 255, 0.4); z-index: 5;}
.btn.icon-right i {position: absolute; right: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; z-index: 5; border-left: 1px solid rgba(0, 0, 0, 0.05);}
/* click 효과 */
.btn span.circle {position: absolute; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 200px; background: rgba(0, 0, 0, 0.2); animation: btn-circle-animation 0.6s ease-out 0s 1 normal forwards; z-index: 0;}
@keyframes btn-circle-animation {
    0% {opacity: 1; transform: translate(-50%, -50%) scale(0);}
    100% {opacity: 0; transform: translate(-50%, -50%) scale(1);}
}


/* form */
table.form-box {width: 100%; font-size: 13px; border-top: 1px dashed #dfe8f1;}
table.form-box > tbody > tr > td {border-bottom: 1px dashed #dfe8f1; box-sizing: border-box; padding: 5px 10px; line-height: 28px; vertical-align: middle; max-width: 1px;}
table.form-box > tbody > tr > td.th {color: #000000; text-align: right; width: 150px; font-weight: 700; max-width: none;}
table.form-box > tbody > tr > td.th.long {line-height: 1.5em;}
table.form-box > tbody > tr > td.th label > em {color: #e74c3c; margin-right: 6px;}
table.form-box > tbody > tr > td > div.long {line-height: 1.5em; margin: 5px 0;}
table.form-box > tbody > tr > td > div.line + div.line {margin-top: 5px;}
table.form-box img {max-width: 100%;}
table.form-box td p.history {margin-bottom: 5px;}
table.form-box td p.history + span.time {margin-right: 30px;}
table.form-box td span.label {display: inline-block; min-width: 80px; height: 28px; line-height: 26px; padding: 0 8px; border: 1px solid #d1d9dd; background: #f9f9f9; box-sizing: border-box; text-align: center; border-radius: 3px; margin-left: 30px; margin-right: 5px; vertical-align: middle;}
table.form-box td span.label:first-child {margin-left: 0;}
table.form-box span.desc {font-size: 11px; color: #e74c3c; margin-left: 20px;}
table.form-box p.desc {font-size: 11px; color: #e74c3c; line-height: 1.3em; margin-top: 5px; text-indent: -6px; padding-left: 10px;}
table.form-box p.desc.right {text-align: right;}
table.form-box p.desc + * {margin-top: 6px;}
table.form-box td > p {overflow: hidden;}
table.form-box td > p + p {margin-top: 5px;}
table.form-box div.editor {min-height: 200px;}

ul.youtube-list {overflow: hidden;}
ul.youtube-list > li {display: inline-block; vertical-align: top; width: 42%; margin-bottom: 10px; overflow: hidden;}
ul.youtube-list > li > iframe {width: 100%; vertical-align: top;}

table.cell-table {width: 100%; font-size: 13px; border: 2px solid #dfe8f1; font-size: 12px;}
table.cell-table.fixed {table-layout: fixed;}
table.cell-table > tbody {border-top: 2px solid #dfe8f1;}
table.cell-table > tfoot {border-top: 2px solid #dfe8f1;}
table.cell-table th,
table.cell-table td {border: 1px solid #dfe8f1; box-sizing: border-box; padding: 3px 5px; text-align: center; line-height: 28px; height: 33px;}
table.cell-table th {background: #fafcfe;}
table.cell-table thead th {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.cell-table tr td.left {text-align: left;}
table.cell-table td.th {background: #fafcfe; min-width: 80px; font-weight: 700; width: 120px;}
table.cell-table .multi-line {line-height: 1.6;}
table.cell-table td em.red {font-size: 14px; font-weight: 700; color: #e74c3c;}
table.cell-table td em.red input {font-size: 14px; font-weight: 700; color: #e74c3c;}
table.cell-table p.no-data {color: #8da0aa;}
table.cell-table p.no-data i {color: #ffcc00; margin-right: 5px;}
table.cell-table div.long {line-height: 1.5em;}
table.cell-table ul.input-list li {margin-right: 0;}
table.cell-table ul.input-list li + li {margin-left: 20px;}
table.cell-table + div.button-box {margin-top: 5px; line-height: 1px;}
table.cell-table td textarea {min-height: 60px;}

input.text,
select,
textarea {display: inline-block; box-sizing: border-box; background: #ffffff; border: 1px solid #dfe8f1; border-radius: 3px; vertical-align: middle; outline: none; font-family: inherit; font-size: inherit; transition: border-color ease-in-out 0.2s 0s, box-shadow ease-in-out 0.2s 0s; margin: 0; -webkit-appearance: none; appearance: none;}
input.text {width: 160px; height: 28px; padding: 0 8px;}
select {height: 28px; padding-left: 8px; padding-right: 25px; background: #ffffff url(../img/common/icon_select.png) right 5px center no-repeat; background-size: 12px auto;}
select::-ms-expand {display: none;}
textarea {width: 100%; min-height: 120px; padding: 8px;}
input.text:focus,
select:focus,
textarea:focus {border-color: #3da6ff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075) inset, 0 0 5px 0 rgba(102, 175, 233, 0.5);}
input[type=radio],
input[type=checkbox] {vertical-align: middle; margin: 0; display: inline-block;}
input[type=file] {display: block; font-family: inherit; font-size: 12px;}
input.full {width: 100%;}
input.half {width: calc(45% - 2px);}
input.half + input.half {margin-left: 4px;}
input.count {width: 50px; text-align: center;}
input.money {width: 90px; text-align: right;}
input.money-big {width: 120px; text-align: right;}
input.short {width: 100px;}
input.digit {width: 80px; text-align: right;}
input.year,
input.month,
input.date {width: 100px;}
input.datetime-hour,
input.datetime-min {width: 140px;}
textarea.editor {min-height: 500px;}
[data-type="int"], [data-type="int-plus"], [data-type="real"], [data-type="real-plus"] {text-align: right;}
#main [readonly] {background: #fcfcfc;}
#main [disabled] {background: #f9f9f9;}
::placeholder {color: #65a6ff; opacity: 0.5;}

ul.input-list {overflow: hidden; display: inline-block; vertical-align: middle;}
ul.input-list > li {float: left; margin-right: 30px; height: 28px; line-height: 28px;}
ul.input-list > li > input {vertical-align: middle; margin: 0;}
ul.input-list > li > label {display: inline-block; vertical-align: middle; padding-left: 5px;}

div.input-group {position: relative; display: inline-block; vertical-align: middle;}
div.input-group > * {float: left;}
div.input-group > i {position: relative; z-index: 5; width: 30px; height: 100%; line-height: 26px; box-sizing: border-box; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999;}
div.input-group > label {position: relative; z-index: 5; height: 100%; line-height: 26px; box-sizing: border-box; padding: 0 8px; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999; font-size: 12px;}
div.input-group.left > *:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}
div.input-group.left > *:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0;}
div.input-group.left > a.btn {border-right: 1px solid rgba(0, 0, 0, 0.2);}
div.input-group.right > *:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0;}
div.input-group.right > *:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none;}
div.input-group.right > a.btn {border-left: 1px solid rgba(0, 0, 0, 0.2);}
div.input-group.full {width: 100%;}
div.input-group.full > input,
div.input-group.full > select {width: calc(100% - 30px);}


/* file-list */
div.dino-file-list {font-size: 12px; text-align: left;}
div.dino-file-list > ul > li {position: relative; border: 1px solid #dfe8f1; border-radius: 3px; height: 28px; box-sizing: border-box; line-height: 26px; font-size: 12px; color: #8da0aa; transition: all 0.2s; overflow: hidden;}
div.dino-file-list > ul > li:hover {box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.05);}
div.dino-file-list > ul > li + li {margin-top: 3px;}
div.dino-file-list > ul > li > i {color: #ffcc00; margin: 0 12px;}
div.dino-file-list > ul > li > .filename {display: block; width: calc(100% - 160px); padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}
div.dino-file-list > ul > li > .filename > img {margin-right: 8px;}
div.dino-file-list > ul > li > a.filename {width: calc(100% - 120px); transition: color 0.3s;}
div.dino-file-list > ul > li > a.filename > i {position: absolute; right: 100px; top: -10px; font-size: 16px; color: #65a6ff; opacity: 0;}
div.dino-file-list > ul > li > a.filename:hover {color: #00bca4;}
div.dino-file-list > ul > li > a.filename:hover > i {animation: download-file 0.5s ease-out 0s infinite normal forwards;}
div.dino-file-list > ul > li span.size {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); font-size: 10px; padding: 4px 5px; background: #ffcc00; color: #ffffff; line-height: 1em; border-radius: 3px; margin-left: 20px;}
div.dino-file-list > ul > li p.function {position: absolute; right: 80px; top: 50%; transform: translate(0, -50%);}
div.dino-file-list > ul > li p.function a {position: relative; float: left; width: 22px; height: 22px; border-radius: 100px; box-sizing: border-box; color: #ffffff; background: #65a6ff; opacity: 0.9; transition: all 0.3s; transform: scale(0);}
div.dino-file-list > ul > li:hover p.function a {transform: scale(1);}
div.dino-file-list > ul > li p.function a:hover {opacity: 1;}
div.dino-file-list > ul > li p.function a + a {margin-left: 3px;}
div.dino-file-list > ul > li p.function a.del {background: #e74c3c;}
div.dino-file-list > ul > li p.function a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.dino-file-list p.down-all {margin-top: 5px;}
div.dino-file-list p.down-all a {display: inline-block; border: 1px solid #dfe8f1; border-radius: 3px; padding: 0 15px; line-height: 26px; transition: all 0.3s;}
div.dino-file-list p.down-all a:hover {border-color: #65a6ff; color: #65a6ff;}
div.dino-file-list p.down-all a i {color: #65a6ff; font-size: 16px; margin-right: 10px;}
div.dino-file-list input[type=file] {margin-top: 5px;}
@keyframes download-file {
    0% {opacity: 0; top: -10px;}
    100% {opacity: 1; top: 30px;}
}


/* image-list */
div.dino-image-list {font-size: 12px; line-height: 1.4em; margin: 5px 0; text-align: left;}
div.dino-image-list > ul {}
div.dino-image-list > ul > li {position: relative; display: inline-block; width: 180px; height: 170px; box-sizing: border-box; border-radius: 3px; padding: 5px; border: 1px solid #dfe8f1; vertical-align: top; margin-right: 3px; margin-bottom: 5px; overflow: hidden; background: #fafcfe; color: #8da0aa; transition: all 0.2s;}
div.dino-image-list > ul > li:hover {box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);}
div.dino-image-list > ul > li > * {display: block;}
div.dino-image-list > ul > li span.image {position: relative; display: block; height: 110px; background: #ffffff; overflow: hidden; text-align: center; line-height: 110px; border: 1px solid #dfe8f1; border-radius: 3px;}
div.dino-image-list > ul > li span.image > i {color: #ffcc00; font-size: 40px; opacity: 0.5;}
div.dino-image-list > ul > li span.image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}
div.dino-image-list > ul > li span.image span.dimension {position: absolute; left: 0; bottom: -22px; width: 100%; line-height: 22px; font-size: 12px; color: #ffffff; background: rgba(0, 0, 0, 0.6); transition: all 0.3s;}
div.dino-image-list > ul > li:hover span.image span.dimension {bottom: 0;}
div.dino-image-list > ul > li em.filename {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px 0;}
div.dino-image-list > ul > li em.filename i {margin-right: 8px; color: #ffcc00;}
div.dino-image-list > ul > li em.filename img {margin-right: 5px; vertical-align: top;}
div.dino-image-list > ul > li span.size {position: absolute; left: 5px; bottom: 5px; font-size: 10px; padding: 4px 5px; background: #ffcc00; color: #ffffff; line-height: 1em; border-radius: 3px;}
div.dino-image-list > ul > li p.function a {position: absolute; width: 22px; height: 22px; border-radius: 100px; border: 1px solid #e0e0e0; box-sizing: border-box; color: #999999; background: rgba(255, 255, 255, 0.8); transition: all 0.3s; transform: scale(0);}
div.dino-image-list > ul > li:hover p.function a {transform: scale(1);}
div.dino-image-list > ul > li p.function a:hover {background: #ffffff;}
div.dino-image-list > ul > li p.function a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.dino-image-list > ul > li p.function a.prev {left: 5px; top: 5px;}
div.dino-image-list > ul > li p.function a.next {right: 5px; top: 5px;}
div.dino-image-list > ul > li p.function a.rotate {right: 30px; bottom: 5px; background: #ffcc00; color: #ffffff;}
div.dino-image-list > ul > li p.function a.del {right: 5px; bottom: 5px; background: #e74c3c; color: #ffffff;}
div.dino-image-list > ul > li p.function a.enlarge {top: 40px; left: 50%; transform: translate(-50%, 0) scale(0); width: 40px; height: 40px; font-size: 20px;}
div.dino-image-list > ul > li:hover p.function a.enlarge {transform: translate(-50%, 0) scale(1);}

#popup-image {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10000;}
#popup-image a.close {position: absolute; right: 5%; top: 5%; z-index: 10; color: #ffffff; font-size: 50px;}
#popup-image p {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; max-height: 80%; overflow: auto; background: #ffffff;}



/* list page */
ul.search-list {position: relative;}
ul.search-list:after {content: ''; display: block; clear: both;}
ul.search-list > li {float: left; width: 33.3%; margin-bottom: 6px;}
ul.search-list > li.half {width: 50%;}
ul.search-list > li.two-thirds {width: 66.6%;}
ul.search-list > li.full {width: 100%;}
ul.search-list > li > * {display: inline-block; vertical-align: middle;}
ul.search-list > li > label,
ul.search-list > li > span.label {float: left; min-width: 80px; height: 28px; line-height: 26px; box-sizing: border-box; padding: 0 8px; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999; font-size: 12px; vertical-align: middle; margin-right: 10px;}
ul.search-list > li ul.input-list {display: block;}
ul.search-list + div.button-box {margin-top: 5px;}
ul.search-list + div.button-box a.column i {transition: transform 0.3s;}
ul.search-list + div.button-box a.column.reverse i {transform: rotate(180deg);}

section.select-column {overflow: hidden; transition: all 0.3s; margin-bottom: -20px; height: 0;}
section.select-column ul.input-list {overflow: visible;}
section.select-column ul.input-list input.fixed {opacity: 0.5;}
section.select-column ul.input-list input.fixed + label {color: #e74c3c;}
section.select-column ul.input-list br {content: '';}
section.select-column ul.input-list br:after {content: '\00a0';}
section.select-column ul.input-list li a.sort {position: relative; display: inline-block; width: 20px; height: 20px; vertical-align: middle; border: 1px solid #dfe8f1; border-radius: 3px; margin-left: 5px; color: #dfe8f1; line-height: 0; box-sizing: border-box;}
section.select-column ul.input-list li a.sort.asc,
section.select-column ul.input-list li a.sort.desc {border-color: #ffcc00;}
section.select-column ul.input-list li a.sort i {display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
section.select-column ul.input-list li a.sort.no i:nth-child(1) {display: inline-block;}
section.select-column ul.input-list li a.sort.asc i:nth-child(2) {display: inline-block; color: #ffcc00;}
section.select-column ul.input-list li a.sort.desc i:nth-child(3) {display: inline-block; color: #ffcc00;}
section.select-column ul.input-list li a.sort span.order {position: absolute; right: -8px; top: -8px; width: 14px; height: 14px; text-align: center; line-height: 14px; color: #ffffff; background: #e74c3c; font-size: 10px; border-radius: 40px;}
section.select-column ul.input-list li a.sort.no span.order {display: none;}
section.select-column ul.set-list {overflow: hidden; margin-top: 10px;}
section.select-column ul.set-list li {float: left;}
section.select-column ul.set-list li + li {margin-left: 30px;}
section.select-column div.button-box {position: absolute; right: 15px; bottom: 15px;}

div.list-info {position: relative; margin-bottom: 10px;}
div.list-info p.list {font-size: 12px;}
div.list-info p.list em {color: #e74c3c; font-weight: 700;}
div.list-info p.list span.page {margin-left: 10px;}
div.list-info p.page-type {position: absolute; right: 0; bottom: 0;}
div.list-info p.page-type > a {float: left; margin-left: 5px;}

div.table-scroll {border: 1px solid #dfe8f1; overflow: auto;}
div.table-scroll > div.box {position: relative; overflow: hidden;}
div.table-scroll > div.box div.fixed-left {position: absolute; left: 0; top: 0; width: 100%; border-right: 1px solid #dfe8f1; overflow: hidden; z-index: 10; box-sizing: border-box;}
div.table-scroll > div.box div.fixed-left-top {position: absolute; left: 0; top: 0; width: 100%; border-right: 1px solid #dfe8f1; overflow: hidden; z-index: 30; box-sizing: border-box;}
table.list {width: 100%; font-size: 12px; border: 1px solid #dfe8f1; box-sizing: border-box; background: #ffffff;}
table.list colgroup col.hidden {display: none;}
table.list th,
table.list td {text-align: center; border-top: 1px solid #dfe8f1; border-bottom: 1px solid #dfe8f1; line-height: 32px; padding: 5px 5px; max-width: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
table.list th.hidden,
table.list td.hidden {display: none;}
table.list thead {background: #f9fafe;}
table.list thead th {border: 1px solid #dfe8f1;}
table.list thead th[colspan],
table.list thead th[rowspan] {line-height: 18px;}
table.list thead tr + tr th {line-height: 18px;}
table.list tbody tr:nth-child(2n) {background: #f9f9f9;}
table.list tbody tr.sum {background: #ffffe0; font-weight: bold; font-size: 13px;}
table.list tbody td[rowspan] {border-right: 1px solid #dfe8f1;}
table.list tfoot {background: #ffffe0;}
table.list td.long {text-align: left; padding-left: 20px;}
table.list td.long > * {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
table.list td a.link {display: block; transition: all 0.3s;}
table.list td a.link:hover {color: #00ceb4; border-color: #00ceb4;}
table.list .image {position: relative; display: block; border: 1px solid #dfe8f1; overflow: hidden; box-sizing: border-box; background: #ffffff; height: 50px;}
table.list .image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%;}
table.list p.no-data {color: #8da0aa;}
table.list p.no-data i {color: #ffcc00; margin-right: 5px;}
table.list.fixed-header {position: absolute; left: 0; top: 0; z-index: 20;}
table.list.fixed-left tbody tr {background: #ffffe0;}

table.summary {width: 100%; font-size: 13px; border: 2px solid #dfe8f1; font-size: 13px; margin-bottom: 10px;}
table.summary > tbody {border-top: 2px solid #dfe8f1;}
table.summary > tbody tr.sum {background: #ffffe0;}
table.summary > tbody tr.sum th {background: #ffffe0;}
table.summary > tfoot {border-top: 2px solid #dfe8f1;}
table.summary th,
table.summary td {border: 1px solid #dfe8f1; box-sizing: border-box; padding: 3px 5px; text-align: center; line-height: 30px; max-width: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.summary th {background: #fafcfe;}
table.summary td.left {text-align: left;}
table.summary td em {font-size: 14px; font-weight: 700; color: #e74c3c;}
table.summary div.long {line-height: 1.5em;}
table.summary td.content {vertical-align: top; text-align: left;}
table.summary a {transition: color 0.3s;}
table.summary a:not(.btn):hover {color: #00bca4;}
table.summary td.title {text-align: left;}


div.pagination {text-align: center; margin-top: 15px;}
div.pagination > div.box {display: inline-block;}
div.pagination a {display: inline-block; min-width: 32px; height: 32px; padding: 0 5px; box-sizing: border-box; text-align: center; line-height: 30px; font-size: 13px; color: #8da0aa; vertical-align: middle; transition: all 0.2s; border: 1px solid #dfe8f1; border-right: none;}
div.pagination a:hover {background: rgba(0, 0, 0, 0.05); color: #000000;}
div.pagination a.disabled {color: #cccccc; cursor: default;}
div.pagination a.disabled:hover {background: inherit; color: #cccccc;}
div.pagination > div.box > a {float: left;}
div.pagination > div.box > a.first {border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
div.pagination > div.box > a.last {border-right: 1px solid #dfe8f1; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
div.pagination ol {float: left;}
div.pagination ol > li {float: left;}
div.pagination ol > li.on > a {background: #00ceb4; color: #ffffff; border-right: 1px solid rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); cursor: default;}


/* view page */
ul.tag-list {display: inline-block; vertical-align: middle; text-align: left; line-height: 30px;}
ul.tag-list li {display: inline-block; min-width: 90px; padding: 0 10px; height: 26px; line-height: 24px; border: 1px solid #dfe8f1; border-radius: 100px; box-sizing: border-box; margin-right: 10px; text-align: center; vertical-align: middle; background: #f9fafe; font-size: 12px;}
ul.tag-list li a.del {color: #e74c3c; vertical-align: middle; margin-left: 10px; font-size: 16px; position: relative; top: -2px;}










/* popup */
#popup-wrapper {height: 100vh; padding: 60px 0 30px 0; box-sizing: border-box; overflow: hidden; background: #fafcfe;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000; color: #ffffff;}
#popup-header h1 {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
#popup-header a.close {position: absolute; right: 30px; top: 50%; transform: translate(0, -50%); font-size: 30px;}
#popup-main {height: 100%; box-sizing: border-box; overflow: auto; padding: 20px 20px 50px 20px;}
#popup-main section.layout {margin: 10px 0;}
#popup-footer {position: fixed; left: 0; bottom: 0; width: 100%; height: 30px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000; color: #ffffff; font-size: 12px;}
#popup-footer p.copyright{line-height: 30px; margin-left: 30px;}
#popup-footer img.logo {height: 24px; position: absolute; right: 30px; top: 50%; transform: translate(0, -50%);}

/* input guide (입력안내) */
div.input-guide {border: 2px solid #dfe8f1; border-radius: 5px; padding: 10px 20px; font-size: 13px; line-height: 1.3em; margin-top: 10px; background-color: #fafafa;}
div.input-guide p.title {font-size: 14px; font-weight: 700; margin-bottom: 10px;}
div.input-guide ul.list > li {position: relative; padding-left: 15px;}
div.input-guide ul.list > li::before {content: ''; position: absolute; left: 0; top: 4px; width: 4px; height: 4px; border: 2px solid #dfe8f1; border-radius: 20px;}
div.input-guide ul.list > li + li {margin-top: 5px;}
div.input-guide ul.list > li em {color: #e74c3c;}
div.input-guide ul.list > li p.ref {font-size: 12px; margin-top: 2px; color: #00ceb4;}
div.input-guide p.ref {font-size: 13px; margin-top: 15px;}
div.input-guide table {width: 100%; font-size: 12px; margin-top: 5px; background-color: #ffffff;}
div.input-guide table th, div.input-guide table td {border: 1px solid #d1d9dd; padding: 5px 10px;}
div.input-guide table th {text-align: center; background-color: #fcfcfc;}


/* file attachment list */
div.dino-file-upload {position: relative;}
div.dino-file-upload > ul {font-size: 13px; line-height: 1.2em; margin-bottom: 5px;}
div.dino-file-upload > ul > li {border: 1px solid #dfe8f1; border-radius: 3px; line-height: 28px; height: 30px; box-sizing: border-box; padding: 0 180px 0 10px; position: relative; transition: box-shadow 0.3s; overflow: hidden;}
div.dino-file-upload > ul > li:hover {box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);}
div.dino-file-upload > ul > li + li {margin-top: 5px;}
div.dino-file-upload > ul > li > .filename {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;}
div.dino-file-upload > ul > li > a.filename:hover {color: #00bca4;}
div.dino-file-upload > ul > li > .filename i {vertical-align: middle;}
div.dino-file-upload > ul > li > .filename img {vertical-align: middle; margin-right: 8px;}
div.dino-file-upload > ul > li p.function {position: absolute; right: 10px; top: 0;}
div.dino-file-upload > ul > li p.function > * {margin-left: 5px; display: inline-block; vertical-align: middle;}
div.dino-file-upload > ul > li a.prev,
div.dino-file-upload > ul > li a.next {width: 22px; height: 22px; font-size: 16px; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.3); border-radius: 50%; text-align: center; line-height: 20px; opacity: 0; transition: all 0.3s;}
div.dino-file-upload > ul > li:hover a.prev,
div.dino-file-upload > ul > li:hover a.next {opacity: 1;}
div.dino-file-upload > ul > li:hover a.prev i,
div.dino-file-upload > ul > li:hover a.next i {font-size: 16px;}
div.dino-file-upload > ul > li a.prev:hover,
div.dino-file-upload > ul > li a.next:hover {color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.5); opacity: 1;}
div.dino-file-upload > ul > li a.delete {width: 22px; height: 22px; font-size: 16px; color: #e74c3c; border-radius: 50%; text-align: center; line-height: 20px; transition: all 0.3s;}
div.dino-file-upload > ul > li a.delete:hover {color: #ffffff; background: #e74c3c;}
div.dino-file-upload > ul > li span.size {font-size: 11px; line-height: 1em; padding: 5px 5px; background: #00bca4; color: #ffffff; border-radius: 3px;}
div.dino-file-upload > ul > li.uploading > span.filename i {color: #ffcc00; margin-right: 8px;}
div.dino-file-upload > ul > li.no-file > span.filename i {color: #ffcc00; margin-right: 8px;}
div.dino-file-upload input[type=file].hidden {display: none;}


/* image attachment list */
div.dino-image-upload {position: relative;}
div.dino-image-upload > ul {font-size: 13px; line-height: 1.2em; overflow: hidden;}
div.dino-image-upload > ul i {overflow: hidden; vertical-align: middle; display: inline-block; line-height: 1em;}
div.dino-image-upload > ul > li {width: 200px; height: 200px; box-sizing: border-box; border: 1px solid #dfe8f1; padding: 5px; float: left; position: relative; border-radius: 3px; background: #fafcfe; margin: 0 10px 10px 0; transition: box-shadow 0.3s;}
div.dino-image-upload > ul > li:hover {box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);}
div.dino-image-upload > ul > li > * {display: block;}
div.dino-image-upload > ul > li span.image {height: 130px; border: 1px solid #dfe8f1; overflow: hidden; background: #ffffff; text-align: center; border-radius: 3px; position: relative;}
div.dino-image-upload > ul > li span.image > i {font-size: 60px; line-height: 130px; color: #00bca4;}
div.dino-image-upload > ul > li span.image > i.red {color: #ff0000;}
div.dino-image-upload > ul > li span.image img {vertical-align: top; position: relative; max-width: 100%; max-height: 100%; top: 50%; transform: translateY(-50%);}
div.dino-image-upload > ul > li span.image span.dimension {position: absolute; left: 0; bottom: 0; width: 100%; line-height: 20px; background: rgba(0, 0, 0, 0.4); color: #ffffff; text-align: center; color: #ffffff; font-size: 12px; bottom: -20px; transition: all 0.3s;}
div.dino-image-upload > ul > li:hover span.image span.dimension {bottom: 0;}
div.dino-image-upload > ul > li span.image a.prev,
div.dino-image-upload > ul > li span.image a.next {position: absolute; width: 24px; height: 24px; top: 5px; font-size: 16px; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.3); border-radius: 50%; text-align: center; line-height: 24px; opacity: 0; transition: all 0.3s;}
div.dino-image-upload > ul > li span.image a.prev {left: 5px;}
div.dino-image-upload > ul > li span.image a.next {right: 5px;}
div.dino-image-upload > ul > li span.image a.prev i,
div.dino-image-upload > ul > li span.image a.next i {font-size: 18px;}
div.dino-image-upload > ul > li span.image a.origin {position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); font-size: 24px; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.3); border-radius: 50%; text-align: center; line-height: 50px; opacity: 0; transition: all 0.3s;}
div.dino-image-upload > ul > li:hover span.image a.prev,
div.dino-image-upload > ul > li:hover span.image a.next {opacity: 1;}
div.dino-image-upload > ul > li:hover span.image a.origin {opacity: 1; transform: translate(-50%, -50%) scale(1);}
div.dino-image-upload > ul > li span.image a.prev:hover,
div.dino-image-upload > ul > li span.image a.next:hover,
div.dino-image-upload > ul > li span.image a.origin:hover {color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.5); opacity: 1;}
div.dino-image-upload > ul > li span.fileinfo {margin: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.dino-image-upload > ul > li span.fileinfo img {vertical-align: middle; margin-right: 2px;}
div.dino-image-upload > ul > li span.size {position: absolute; left: 5px; bottom: 8px; font-size: 11px; padding: 2px 5px; background: #00bca4; color: #ffffff; border-radius: 3px;}
div.dino-image-upload > ul > li a.delete {position: absolute; width: 24px; height: 24px; line-height: 23px; right: 5px; bottom: 5px; font-size: 18px; color: #e74c3c; border-radius: 50%; text-align: center; transition: all 0.3s;}
div.dino-image-upload > ul > li a.delete:hover {color: #ffffff; background: #e74c3c;}
div.dino-image-upload > ul > li.uploading span.image i {font-size: 60px; line-height: 130px; color: #00bca4;}
div.dino-image-upload > ul > li.uploading span.fileinfo i {color: #ffcc00; margin-right: 5px;}
div.dino-image-upload > ul > li.no-image span.image i {font-size: 60px; line-height: 130px; color: #dfe8f1;}
div.dino-image-upload > ul > li.no-image span.fileinfo i {color: #ffcc00; margin-right: 5px;}
div.dino-image-upload input[type=file].hidden {display: none;}


#original-image-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000;}
#original-image-mask a.close {font-size: 50px; color: #ffffff; text-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6); position: absolute; right: 3%; top: 3%;}
#original-image {position: fixed; left: 50%; top: 50%; max-width: 80%; max-height: 80%; transform: translate(-50%, -50%); background: #ffffff; overflow: auto; z-index: 10001;}
#original-image img {max-width: none;}

#loading-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); z-index: 10000;}
#loading-mask span {position: absolute; left: 50%; top: 50%; width: 150px; line-height: 150px; font-size: 60px; transform: translate(-50%, -50%); color: #ffffff; background: rgba(0, 0, 0, 0.4); border-radius: 10px; text-align: center;}