@charset "utf-8";

/* Default UI */
html,body,div,span,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,blockquote,p,address,pre,cite,form,fieldset,input,textarea,select,table,caption,tbody,tfoot,thead,tr,th,td,abbr,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,b,i,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  letter-spacing: 0;
  outline: 0;
}
* {
  scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
  padding: 2px 0;
}
h1 {
  font-size: 13px;
}
h2 {
  font-size: 12px;
}
h3,h4,h5,h6 {
  font-size: 11px;
}

address,caption,em,cite {
  font-weight: normal;
  font-style: normal;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
hr {
  display: none;
}

/* html5 */
main,section,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav {
  display: block;
}
legend {
  overflow: hidden;
  position: absolute;
  top: -1000%;
  width: 0;
  height: 0;
  font-size: 0;
  text-indent: -9999%;
  line-height: 0;
}
caption {
  display: table-caption;
  width: fit-content;
  font-size: 11px;
  color: #fff;
  padding: 5px 8px;
  background: #BBB;
  border-radius: 4px;
}
caption.top{
  caption-side:top;
  margin-bottom: 10px;
}
caption.bottom{
  caption-side:bottom;
  margin-top: 10px;
}
body {
  color: #333;
  font-family: "SCDream-4", "돋움", Dotum, "굴림", Gulim, Verdana, Arial,
    sans-serif;
  font-size: 14px;
  line-height: 1.2;
}
.lang-en,
:lang(en) {
  font-family: Tahoma, Consolas, Verdana, "Helvetica Neue", Helvetica, Arial,
    Sans-Serief;
}
.lang-ch,
:lang(cn) {
  font-family: "Microsoft-YaHei";
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
a,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  overflow: visible;
  font-family: "SCDream-4", "돋움", Dotum, "굴림", Gulim, sans-serif;
  cursor: pointer;
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input[type="checkbox"] {
  padding: 0;
  box-sizing: border-box;
}

input[type="checkbox"]:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}
.checkbox-area {
  font-size: 11px;
  padding: 4px 10px;
}
.checkbox-area input[type="checkbox"],
input[type="radio"] {
  padding: 10px;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
}
input[type="search"] {
  border-radius: 0;
  -webkit-border-radius: 0;
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel- button,
input[type="search"]::-webkit-search-results- button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
a,
a:link,
a:visited,
a:hover,
a:active,
a:link {
  text-decoration: none;
  cursor: pointer;
  color: unset;
}
img {
  vertical-align: top;
  -ms-interpolation-mode: bicubic;
}
label,
select,
input,
textarea {
  color: #666;
  vertical-align: middle;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"] {
  border: 1px solid #2ecaba;
  box-sizing: border-box;
  padding: 7px;
  background: #fff;
  min-height: 28px;
  box-shadow: inset 1px 1px 5px -1px rgb(0 0 0 / 30%);
}
/* input[type="text"]:not(:only-child :wrap){
     border-right: unset;
}
*/
input[type="text"]:first-child,
input[type="password"]:first-child,
input[type="number"]:first-child,
input[type="email"]:first-child,
input[type="tel"]:first-child,
input[type="date"]:first-child{
  border-radius: 4px 0 0 4px;
}

input[type="text"]:last-child,
input[type="password"]:last-child,
input[type="number"]:last-child,
input[type="email"]:last-child,
input[type="tel"]:last-child,
input[type="date"]:last-child{
  border-radius: 0 4px 4px 0;
}

input[type="text"]:only-child,
input[type="password"]:only-child,
input[type="number"]:only-child,
input[type="email"]:only-child,
input[type="tel"]:only-child,
input[type="date"]:only-child {
  border-radius: 4px;
}

input[type="text"]:not(:only-child):not(:last-child),
input[type="password"]:not(:only-child):not(:last-child),
input[type="number"]:not(:only-child):not(:last-child),
input[type="email"]:not(:only-child):not(:last-child),
input[type="tel"]:not(:only-child):not(:last-child),
input[type="date"]:not(:only-child):not(:last-child) {
  border-right: unset;
}
select:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="date"]:disabled {
  opacity: 0.5;
  box-shadow: none;
}


/* label */
label[type="input"] {
  text-align: center;
  white-space: nowrap;
  border: 1px solid #2ecaba;
  background: transparent;
  box-sizing: border-box;
  padding: 7px;
  min-width: 80px;
  height: 28px;
  font-size: unset;
  font-weight: normal;
  background: #00dfc8;
  color: #fff;
}
label[type="input"]:only-child {
  border-radius: 4px;
}
label[type="input"]:first-child {
  border-radius: 4px 0 0 4px;
  border-right: unset;
}
label[type="input"]:last-child {
  border-radius: 0 4px 4px 0;
}
/* Checkbox */
label[type="checkbox"] {
  display: flex;
  color: #fff;
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid #2ecaba;
  text-align: center;
  cursor: pointer;
  background-color: #00dfc8;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label[type="checkbox"] > span.mark {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background: #fff;
  border: 1px solid #2ecaba;
}
label[type="checkbox"] input[type="checkbox"] {
  margin-right: 5px;
}
/* Switch */
label.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 21px;
  box-sizing: border-box;
}
label.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
label.switch > .slider {
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  border: 1px solid #bbb;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
label.switch > .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 1px;
  bottom: 0px;
  border-radius: 50%;
  border: 1px solid #bbb;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
label.switch > input:checked + .slider {
  background-color: #00dfc8;
  border: 1px solid #2ecaba;
}
label.switch > input:focus + .slider {
  box-shadow: 0 0 1px #00dfc8;
}
label.switch > input:checked + .slider:before {
  border: 1px solid #2ecaba;
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}
label.switch.orange > input:checked + .slider {
  background-color: #f28f43;
}
label.switch.orange > input:checked + .slider:before {
  border: 1px solid #b66b32;
}

select.small,
input[type="text"].small,
input[type="password"].small,
input[type="number"].small,
input[type="email"].small,
input[type="tel"].small,
input[type="date"].small,
label[type="input"].small{
  height:24px;
  min-height: 24px;
}
select.midium,
input[type="text"].midium,
input[type="password"].midium,
input[type="number"].midium,
input[type="email"].midium,
input[type="tel"].midium,
input[type="date"].midium,
label[type="input"].midium{
  height:26px;
  min-height: 26px;
}
select.large,
input[type="text"].large,
input[type="password"].large,
input[type="number"].large,
input[type="email"].large,
input[type="tel"].large,
input[type="date"].large,
label[type="input"].large{
  height:36px;
  min-height: 36px;
}
/* label[type="checkbox"] input[type="checkbox"]:checked:before{
     content: "\2713";
     font-size: 18px;
     color: #333;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
*/
/* Button */
button{
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #2ecaba;
  background-color: #00DFC8;
  color: white;
  box-shadow: inset 1px 1px 1px 0px rgb(255 255 255 / 30%);
  font-size: 11px;
  border-radius: 4px;
  height:28px;
  min-width: 80px;
  min-height: 26px;
  cursor: pointer;
  transition: filter 0.3s;
}
button:hover{
  /* background-color: #2ecaba; */
  filter: brightness(0.9);
  box-shadow:none;
}
button:first-child:not(:only-of-type){
  border-radius: 4px 0 0 4px;
}

button.small{
  height:24px;
  min-height: 24px;
}
button.midium{
  height:26px;
  min-height: 26px;
}
button.large{
  height:36px;
  min-height: 36px;
}


/* button:not(:first-child):not(:only-of-type){
  border-radius: 0;
  border-left: unset;
} */

input + button,
select + button,
label + button{
  border-radius: 0 4px 4px 0;
}

button:last-child:not(:only-of-type){
  /* border-width: 1px; */
  border-radius: 0 4px 4px 0;
}
button:only-child {
  /* border-width: 1px; */
  border-radius: 4px;
}
button:not(:only-child):not(:first-child):not(:last-child) {
  border-radius: unset;
}

button:disabled {
  filter: brightness(1.1);
  background: #CCC !important;
  border-color: #BBB !important;
  box-shadow:none;
  cursor: not-allowed;
}
th button:only-child,
td button:only-child{
  margin-left: auto;
  margin-right: auto;
}
select {
  color: #fff;
  /* font-weight: bold; */
  padding: 7px;
  padding-right: 25px;
  vertical-align: middle;
  border: 1px solid #2ecaba;
  background-color: #00dfc8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.593' height='7.004' viewBox='0 0 12.593 7.004'%3E%3Cpath id='패스_265' data-name='패스 265' d='M0,0,5.943,5.943,0,11.886' transform='translate(12.24 0.354) rotate(90)' fill='none' stroke='%23FFFFFF' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 5px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 60px;
  min-height: 28px;
  width: fit-content;
}
select.inline {
  color: #666;
  border: 1px solid #00dfc8;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.593' height='7.004' viewBox='0 0 12.593 7.004'%3E%3Cpath id='패스_265' data-name='패스 265' d='M0,0,5.943,5.943,0,11.886' transform='translate(12.24 0.354) rotate(90)' fill='none' stroke='%2300dfc8' stroke-width='1'/%3E%3C/svg%3E");
  box-shadow: inset 1px 1px 5px -1px rgb(0 0 0 / 30%);
}
select.select-color-red {
  border: 1px solid #f24343;
  background-color: #f24343;
}
select.select-color-red.inline {
  color: #666;
  border: 1px solid #f24343;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.593' height='7.004' viewBox='0 0 12.593 7.004'%3E%3Cpath id='패스_265' data-name='패스 265' d='M0,0,5.943,5.943,0,11.886' transform='translate(12.24 0.354) rotate(90)' fill='none' stroke='%23f24343' stroke-width='1'/%3E%3C/svg%3E");
}
select.select-color-red:last-child {
  border: 1px solid #f24343;
}
select.select-color-red:only-child {
  border: 1px solid #f24343 !important;
}
select.select-color-blue {
  border: 1px solid #3392e3;
  background-color: #00b9ff;
}
select.select-color-blue.inline {
  color: #666;
  border: 1px solid #00b9ff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.593' height='7.004' viewBox='0 0 12.593 7.004'%3E%3Cpath id='패스_265' data-name='패스 265' d='M0,0,5.943,5.943,0,11.886' transform='translate(12.24 0.354) rotate(90)' fill='none' stroke='%233392e3' stroke-width='1'/%3E%3C/svg%3E");
}
select.select-color-blue:last-child {
  border: 1px solid #00b9ff;
}
select.select-color-blue:only-child {
  border: 1px solid #00b9ff !important;
}
select:first-child {
  border-radius: 4px 0 0 4px;
  border-right: unset;
}
select:last-child {
  border: 1px solid #2ecaba;
  border-radius: 0 4px 4px 0;
}
select:not(:last-child):not(:only-child) {
  border-right: unset;
}
select:only-child {
  border: 1px solid #2ecaba;
  border-radius: 4px;
}
select option {
  padding: 12px;
  min-height: 2.5em;
  background-color: #fff;
  border-radius: 4px;
  color: #666;
  cursor: pointer;
}
textarea {
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  color: #666;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  font-family: "SCDream-4", "돋움", Dotum, "굴림", Gulim, Verdana, Arial,
    sans-serif;
}




/* input-set */
.input-set-box,
.input-box {
  display: flex;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
  align-items: flex-start;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  /*display: inline-table;
  position: relative;
  margin-bottom: 16px;*/
}
.input-set-box.fit-content,
.input-box.fit-content {
  width: fit-content;
}
/*.input-set-box > *{
  display: table-cell;
}*/
.input-required {position:absolute;right:0;top: -5px;font-size:6px;color:#F28F43;transform:scale(0.7);}

label.label-set{
  line-height: 28px;
  font-size: 11px;
  color: #00B9FF;
}

label.label-set:has(+ input),
label.label-set:has(+ select),
label.label-set:has(+ p){
  height: 14px;
  line-height: 15px;
  padding: 0 6px;
  margin-bottom: -6px;
  margin-left: 7px;
  font-size: 11px;
  color: #00B9FF;
  background: #fff;
  z-index: 1;
  align-self: flex-start;
}

label.label-set ~ p {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
  border: 1px solid #00B9FF;
  box-sizing: border-box;
  padding: 4px;
  min-height: 36px;
  border-radius: 4px;
  box-shadow: inset 1px 1px 5px -1px rgb(0 0 0 / 30%);
  margin-block-start: -4px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: unset;
}

.label-mint {
  width: 100%;
  height: 30px;
  line-height: 29px;
  font-size: 11px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  background: #00DFC8;
}
.label-orange {
  width: 100%;
  height: 30px;
  line-height: 29px;
  font-size: 11px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  background: #F28F43;
}
.label-inline-orange {
  width: 100%;
  height: 30px;
  line-height: 29px;
  font-size: 11px;
  border:solid 1px #F28F43;
  color:#F28F43;
  background:#FEF4EC;
  text-align: center;
  border-radius: 4px;
}
.label-inline-mint {
  width: 100%;
  height: 30px;
  line-height: 29px;
  font-size: 11px;
  border:solid 1px #00DFC8;
  color:#00DFC8;
  background:#EDF7F7;
  text-align: center;
  border-radius: 4px;
}

/*Alert*/
.alert {
  padding: 9px 10px;
  margin-bottom: 10px;
  width: 100%;
  font-size: 11px;
  border-radius: 4px;
  box-sizing: border-box;
}
.alert > .article-item-contents:only-child,
.alert > .article-item-contents:last-child
{
  margin-bottom: 0px;
}
.alert.alert-pop {
  color: #666666;
  border: 1px solid #EDEDED;
  background: #FEFEFE;
  box-shadow: 0px 0px 6px -3px rgba(0, 0, 0, 0.5);
  position:absolute;
  width:60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  z-index: 3;
}
.alert.alert-warning {
  color: #F24343;
  border: 1px solid #F24343;
  background: #FEECEC;
}
.alert.alert-info {
  color: #2ECABA;
  border: 1px solid #2ECABA;
  background: #EDF7F7;
}
.alert.alert-orange {
  color: #F28F43;
  border: 1px solid #F28F43;
  background: #FEF4EC;
}
.alert.alert-blue {
  color: #00B9FF;
  border: 1px solid #00B9FF;
  background: #E5F8FF;
}
.alert.alert-gray {
  color: #BBBBBB;
  border: 1px solid #BBBBBB;
  background: #F5F5F5;
}
.alert.alert-line-info {
  color: #00B9FF;
  border: 1px solid #00B9FF;
  background: #FFF;
}
.alert.alert-white-trans {
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
}
.alert > header {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* tooltip */
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 0.5em 1em -.25em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
/* Show tooltip if show="true" is set */
[tooltip][show="true"]::before,
[tooltip][show="true"]::after {
  display: block;
  opacity: 1; /* show 상태에서는 항상 보이도록 */
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}



input.balloon::after {
    content: attr(balloon); /* balloon 속성의 값을 툴팁으로 사용 */
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    top: 100%;
    left: 50%;
    white-space: nowrap;
    z-index: 10;
    font-size: 11px;
}