/* text decoration */
.top-line { border-top: 1px solid #ddd }
.top-line-dashed { border-top: 1px dashed #ddd }
.top-line-thick { border-top: 2px solid black}
.under-line { border-bottom: 1px solid #ddd}
.under-line-not-last:not(:last-child) { border-bottom: 1px solid #ddd }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-under-line { border-bottom: 1px solid #ddd}

.size-px-8 { font-size: 8px !important;  line-height: 130%; font-weight: 400;}
.size-px-9 { font-size: 9px !important;  line-height: 130%; font-weight: 400;}
.size-px-10 { font-size: 10px !important; line-height: 130%; font-weight: 400;}
.size-px-11 { font-size: 11px !important; line-height: 130%; font-weight: 400;}
.size-px-12 { font-size: 12px !important; line-height: 130%; font-weight: 400;}
.size-px-13 { font-size: 13px !important; line-height: 130%; font-weight: 400;}
.size-px-14 { font-size: 14px !important; line-height: 130%; font-weight: 400;}
.size-px-15 { font-size: 15px !important; line-height: 130%; font-weight: 400;}
.size-px-16 { font-size: 16px !important; line-height: 130%; font-weight: 400;}
.size-px-17 { font-size: 17px !important; line-height: 130%; font-weight: 400;}
.size-px-18 { font-size: 18px !important; line-height: 130%; font-weight: 500;}
.size-px-19 { font-size: 19px !important; line-height: 130%; font-weight: 500;}
.size-px-20 { font-size: 20px !important; line-height: 140%; font-weight: 500;}
.size-px-22 { font-size: 22px !important; line-height: 140%; font-weight: 500;}
.size-px-24 { font-size: 24px !important; line-height: 140%; font-weight: 500;}
.size-px-28 { font-size: 28px !important; line-height: 140%; font-weight: 500;}
.size-px-32 { font-size: 32px !important; line-height: 140%; font-weight: 500;}
.size-px-36 { font-size: 36px !important; line-height: 140%; font-weight: 500;}
.size-px-40 { font-size: 40px !important; line-height: 140%; font-weight: 600;}
.size-px-48 { font-size: 48px !important; line-height: 140%; font-weight: 500;}
.size-px-50 { font-size: 50px !important; line-height: 140%; font-weight: 600;}
.size-px-62 { font-size: 62px !important; line-height: 140%; font-weight: 600;}

.size-em-05 { font-size: 0.5em;}
.size-em-06 { font-size: 0.6em;}
.size-em-07 { font-size: 0.7em;}
.size-em-08 { font-size: 0.8em;}
.size-em-09 { font-size: 0.9em;}
.size-em-10 { font-size: 1.0em;}
.size-em-11 { font-size: 1.1em;}
.size-em-12 { font-size: 1.2em;}
.size-em-13 { font-size: 1.3em;}
.size-em-14 { font-size: 1.4em;}
.size-em-15 { font-size: 1.5em;}
.size-em-16 { font-size: 1.6em;}
.size-em-17 { font-size: 1.7em;}
.size-em-18 { font-size: 1.8em;}
.size-em-19 { font-size: 1.9em;}
.size-em-20 { font-size: 2.0em;}

.line-height-1 { line-height: 1}
.line-height-2 { line-height: 2}
.line-height-3 { line-height: 3}

.line-height-100 { line-height: 100%}
.line-height-110 { line-height: 110%}
.line-height-120 { line-height: 120%}
.line-height-130 { line-height: 130%}
.line-height-140 { line-height: 140%}
.line-height-150 { line-height: 150%}
.line-height-160 { line-height: 160%}
.line-height-170 { line-height: 170%}
.line-height-180 { line-height: 180%}
.line-height-190 { line-height: 190%}
.line-height-200 { line-height: 200%}

.font-weight-bold { font-weight: bold}
.font-weight-300 { font-weight: 300}
.font-weight-400 { font-weight: 400}
.font-weight-500 { font-weight: 500}
.font-weight-600 { font-weight: 600}

.letter-space-1 { letter-spacing: -1px}
.letter-space-2 { letter-spacing: -2px}

/* text color */
.color-primary { color: var(--color-primary) !important;}
.color-secondary { color: var(--color-secondary) !important;}
.color-plus { color: #5fa8d3 !important;}
.color-minus { color: #f44336 !important;}
.color-success { color: #15ab94 !important;}
.color-error { color: #f44336 !important;}
.color-cancel { color: #FF5D46 !important;}
.color-white { color: white !important;}
.color-blue { color: #0f6ecd !important;}
.color-orange { color: darkorange !important;}
.color-green { color: var(--color-green) !important; }
.color-gray { color: gray !important;}
.color-gray-light { color: lightgray !important;}
.color-gray-dark { color: darkgray !important;}
.color-red { color: var(--color-red-light) !important;}
.color-red-light { color: #FF5D46 !important;}
.color-purple { color: var(--color-purple) !important;}

.color-333 { color: #333 !important;}
.color-eee { color: #eee !important;}
.color-bbb { color: #bbb !important;}
.color-ddd { color: #ddd !important;}


.color-purple-light { color: #6f7dff }

.color-black { color: black !important;}

.color-icon { color: #333 !important;}
.color-icon-dark { color: #bbb !important}
.color-yellow { color: var(--color-yellow) !important;}
.color-gold { color: var(--color-gold) !important;}

.color-sky { color: var(--color-sky) }

.vertical-middle { vertical-align: middle !important;}
.vertical-top { vertical-align: top !important;}
.vertical-bottom { vertical-align: bottom !important;}
.vertical-sub { vertical-align: sub !important;}
.vertical-text-bottom { vertical-align: text-bottom !important;}

/* padding & margin */

.pa-5 { padding: 5px !important;}
.pa-10 { padding: 10px !important;}
.pa-20 { padding: 20px !important;}
.pa-30 { padding: 30px !important;}
.pa-40 { padding: 40px !important;}
.pa-50 { padding: 50px !important;}

.pa-0-5 { padding: 0px 5px !important;}
.pa-3-10 { padding: 3px 10px !important;}
.pa-5-10 { padding: 5px 10px !important;}
.pa-10-5 { padding: 10px 5px !important;}
.pa-10-20 { padding: 10px 20px !important;}
.pa-13-10 { padding: 13px 10px !important;}
.pa-15-10 { padding: 15px 10px !important;}
.pa-20-10 { padding: 20px 10px !important;}
.pa-40-20 { padding: 40px 20px !important;}
.pa-50-20 { padding: 50px 20px !important;}

.pl-10 { padding-left: 10px}
.pl-20 { padding-left: 20px}
.pl-30 { padding-left: 30px}



.pt-10 { padding-top: 10px !important;}
.pt-20 { padding-top: 20px}
.pt-30 { padding-top: 30px}
.pt-40 { padding-top: 40px}
.pt-50 { padding-top: 50px !important;}

.pb-10 { padding-bottom: 10px !important;}
.pb-20 { padding-bottom: 20px}
.pb-30 { padding-bottom: 30px}
.pb-40 { padding-bottom: 40px}
.pb-50 { padding-bottom: 50px !important;}

.ptb-5 { padding: 5px 0 !important;}
.ptb-10 { padding: 10px 0 !important;}
.ptb-20 { padding: 20px 0 !important;}
.ptb-30 { padding: 30px 0 !important;}
.ptb-40 { padding: 40px 0 !important;}
.ptb-50 { padding: 50px 0 !important;}

.prl-5 { padding-right: 5px !important; padding-left: 5px !important;}
.prl-10 { padding-right: 10px !important; padding-left: 10px !important;}
.prl-20 { padding: 0 20px !important;}
.prl-30 { padding: 0 30px !important;}
.prl-40 { padding: 0 40px !important;}
.prl-50 { padding: 0 50px !important;}

.ma-auto { margin: 0 auto !important;}

.mt-5 { margin-top: 5px !important;}
.mt-10 { margin-top: 10px !important;}
.mt-20 { margin-top: 20px !important;}
.mt-30 { margin-top: 30px !important;}
.mt-40 { margin-top: 40px !important;}
.mt-50 { margin-top: 50px !important;}

.mt-auto { margin-top: auto !important;}

.mb-5 { margin-bottom: 5px !important;}
.mb-10 { margin-bottom: 10px !important;}
.mb-20 { margin-bottom: 20px !important;}
.mb-30 { margin-bottom: 30px !important;}
.mb-40 { margin-bottom: 40px !important;}
.mb-50 { margin-bottom: 50px !important;}

.mr-1 {margin-right: 1px}
.mr-5 { margin-right: 5px}
.mr-10 { margin-right: 10px}
.mr-15 { margin-right: 15px}
.mr-20 { margin-right: 20px}
.mr-30 { margin-right: 20px}

.ml-5 { margin-left: 5px}
.ml-10 { margin-left: 10px}
.ml-15 { margin-left: 15px}
.ml-20 { margin-left: 20px}
.ml-30 { margin-left: 30px}
.ml-40 { margin-left: 40px}
.ml-50 { margin-left: 50px}

.indent-10 { text-indent: 10px}

/* layout */
.bottom-main { margin-top: auto; position: relative; padding: 10px; background-color: black; opacity: 0.7}

.justify-center { display: flex; justify-content: center}
.justify-space-around { display: flex; justify-content: space-around}
.justify-space-between { display: flex !important; justify-content: space-between }
.justify-start { display: flex; justify-content: flex-start}
.justify-end { display: flex; justify-content: flex-end}

.items-center { align-items: center}

.flex-column { display: flex; flex-direction: column;}
.flex-column-wrap { display: flex; flex-direction: column; flex-wrap: wrap;}

.flex-row { display: flex; flex-direction: row}
.flex-row-wrap { display: flex; flex-direction: row; flex-wrap: wrap}

.gap-10 { gap: 10px }
.gap-15 { gap: 15px }
.gap-20 { gap: 20px }
.gap-30 { gap: 30px }
.gap-40 { gap: 40px }
.gap-50 { gap: 50px }

.flex-1 { flex: 1}
.flex-2 { flex: 2}
.flex-3 { flex: 3}
.flex-4 { flex: 4}
.flex-5 { flex: 5}

.float-right { float: right;}

.display-none{display:none;}
.display-block{display:block;}
.display-inline { display: inline-block;}

.overflow-y { overflow-y: scroll}
.overflow-y-auto { overflow: hidden; overflow-y: auto}
.overflow-hidden { overflow: hidden}

.full-height { height: 100%;}
.full-width { width: 100% !important;}
.height-auto { height: auto !important;}

/* background */

.bg-default { border: 1px solid #ddd !important; background-color: #ddd; color: #333 !important;}
.bg-primary { background-color: var(--bg-primary); color: white}
.bg-identify { border: 1px solid #0f6ecd; background-color: #0f6ecd !important; color: white; box-sizing: border-box;}
.bg-identify-outline { border: 1px solid #0f6ecd; color: #0f6ecd; box-sizing: content-box }
.bg-danger { border: 1px solid #bf360c; background-color: #bf360c !important; color: white}
.bg-gray { border: 1px solid gray; background-color: gray;  color: #eee}
.bg-gray-light { background-color: #eee; }
.bg-gray-dark { background-color: darkgray}
.bg-dark { background-color: #828282}
.bg-white { background-color: white !important;}
.bg-green { border: 1px solid #0f9d58 !important; background-color: #0f9d58; color: #eee;}
.bg-red { border: 1px solid #bf360c ; background-color: #bf360c !important; color: #eee;}
.bg-orange { border: 1px solid darkorange; background-color: darkorange !important; color: #eee;}
.bg-f5 { background-color: #f5f5f5}
.bg-eee { background-color: #eee !important}
.bg-bbb { background-color: #bbb !important}
.bg-ddd { background-color: #ddd !important}
.bg-select { background-color: black}
.bg-blue { background-color: #0D47A1; color: #eee}
.bg-333 { background-color: #333;}
.bg-success { background-color: #0f9d58 !important; color: #eee}
.bg-error { background-color: #bf360c !important; color: #eee}

.bg-blue-light { background-color: #0e6dcd; color:  #eee}
.bg-light-gray { background-color: darkgray;}
.bg-light-green { background-color: #81C784;}
.bg-light-blue { background-color: #eee;}
.bg-light-red { background-color: #ee6e73;}
.bg-black { background-color: black;}
.bg-light-orange { background-color: lightsalmon;}
.bg-base { background-color: #EBF0F8 !important;}
.bg-title {
    padding: 10px;
}

.bg-sky { background-color: var(--bg-sky) !important;}
.bg-purple { background-color: var(--bg-purple) !important;}

.opacity-01 { opacity: 0.1}
.opacity-02 { opacity: 0.2}
.opacity-03 { opacity: 0.3}
.opacity-04 { opacity: 0.4}
.opacity-05 { opacity: 0.5}
.opacity-06 { opacity: 0.6}
.opacity-07 { opacity: 0.7}
.opacity-08 { opacity: 0.8}
.opacity-09 { opacity: 0.9}
.opacity-10 { opacity: 1}


/* input */
.select-list-type { border: 1px solid #ddd; width: 100%; padding: 13px; color: black; height: auto;}

input {}
input:disabled,
input:read-only { background-color: #eee !important;}

.input-disabled { background-color: #eee}
.input-secret { -webkit-text-security: disc }

.input-underline { width: 100%; border-bottom: 1px solid #ddd; padding: 10px;}

.input-underline:focus,
.input-underline.input  { border-bottom: 1px solid #009BFA}

.box { border: 1px solid #bbb; background-color: white;}
.radius-5 { border-radius: 5px}
.radius-10 { border-radius: 10px}
.radius-20 { border-radius: 20px}
.input-box { width: 100%; padding: 5px 10px; border: 1px solid #bbb; color: #333 !important;}
.input-box-inline { padding: 5px 10px; border: 1px solid #bbb;}

.login-checkbox { width: 20px !important; vertical-align: middle; margin-right: 0px;}


.inline input,
.inline select {
    width: auto;
    disiplay: inline !important;
}

input:disabled,
select:disabled { cursor: no-drop}

/* button */
.btn { padding: 8px 15px; border-radius: 10px}
.btn-xs { padding: 5px 8px}
.btn-width {width: 100%; padding: 10px}
.btn-start-outline { border: 1px solid white; background: none;}
.btn-ai { background-color: var(--bg-primary); color: var(--bg-sky)}

.btn-primary { background-color: var(--btn-primary) !important; color: white; border: 1px solid var(--btn-primary)}
.btn-secondary { background-color: var(--btn-secondary) !important; color: white; border: 1px solid var(--btn-secondary)}

.btn-danger { background-color: #D50000; color: white; }
.btn-default { background-color: #bbb; color: #333 !important; border: 1px solid #bbb; }

.btn-success { background-color: #15ab94; color: white; border: 1px solid #15ab94}
.btn-cancel { background-color: #FF5D46; color: white;}
.btn-blue { border: 1px solid #0f6ecd; background-color: #0f6ecd; color: white;}
.btn-blue-outline { border: 1px solid #0f6ecd; color: #0f6ecd; }
.btn-orange { background-color: #faa05a; color: white}
.btn-green { border: 1px solid #15ab94; background-color: #15ab94; color: white; box-sizing: border-box}

.btn-group-red { background-color: #eee; color: black}
.btn-group-red.on { background-color: white; border: 1px solid #F14E37; color: #F14E37}


.btn:disabled { background: unset !important; background-color: #bbb !important; color: black !important; }

.btn-identify {

    border: none;
    background-color: #0f6ecd;
    color: white;
}

button:disabled { cursor: no-drop; opacity: 0.3}


.btn-gray { background-color: #ddd; color: #333}
.btn-confirm { background-color: #69be94; color: #333}

/* box */

.width-10 { width: 10% }
.width-15 { width: 15% }
.width-20 { width: 20% }
.width-25 { width: 25% }
.width-30 { width: 30% }
.width-35 { width: 35% }
.width-40 { width: 40% }
.width-45 { width: 45% }
.width-50 { width: 50% }
.width-55 { width: 55% }
.width-60 { width: 60% }
.width-65 { width: 65% }
.width-70 { width: 70% }
.width-75 { width: 75% }
.width-80 { width: 80% }
.width-85 { width: 85% }
.width-90 { width: 90% }
.width-95 { width: 95% }
.width-100 { width: 100% }


.width-320 { width: 320px }
.width-480 { width: 480px }
.width-720 { width: 720px }


.under-line-dashed:not(:last-child) { border-bottom: 1px dashed #ddd}
.under-shadow { box-shadow: 0px 1px 5px gray}

.ul-under-line {}
.ul-under-line li:not(:last-child) { border-bottom: 1px solid #ddd }

.ul-child-style-disc li { list-style: disc; list-style-position: inherit}

/* icon */
.icon-large { font-size: 48px !important;}
.icon-x-large { font-size: 60px  !important; }
.icon-xx-large { font-size: 72px  !important; }
.icon-xxx-large { font-size: 84px  !important; }
.icon-xxxx-large { font-size: 96px  !important; }

/* label */
.label {padding: 5px 15px; border-radius: 20px; font-size: 10px}
.label-default { background-color: #bbb; border-radius: 5px; color: white; padding: 0px 5px; font-size: 12px; letter-spacing: 1px }
.label-primary { background-color: var(--label-primary); color: #eee}
.label-secondary { background-color: var(--label-secondary); color: #eee}
.label-success { background-color: var(--label-success); color: #eee}
.label-danger { background-color: var(--label-danger); color: #eee}
.label-cancel { background-color: #f44336; border-radius: 5px; color: white; padding: 0px 5px; font-size: 12px; letter-spacing: 1px}

/* animation */
.rotate-180 {
    -webkit-transform: rotate(-180deg); /* Webkit */
    transform: rotate(-180deg);
}

.trans-x {
    -webkit-transform: scaleX(-1); /* Webkit */
    transform: scaleX(-1);
}

/* position */
.position-relative { position: relative }
.position-fixed { position: fixed;}
.position-fixed-full { position: fixed; width: 100% !important; height: 100% !important; left: 0; top: 0; background-color: white; display: block !important;}
.position-absolute { position: absolute !important;}
.position-absolute.icon-menu-down { right: 10px; top: 12px}




.box-shadow-top { box-shadow: 0px 3px 6px black}
.box-shadow-inset { box-shadow: 0px 0px 2px 1px #bbb inset}
.box-shadow { box-shadow: 1px 1px 3px 1px #bbb}

.border-tb { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.border-lr { border-left: 1px solid #ddd; border-right: 1px solid #ddd;}

.logo-position {

}
.header-box-menu {
    border-bottom: 1px solid #ddd;
}

.icon-box {
    padding: 5px;
    border: 1px solid #ddd;
}



.cursor-pointer { cursor: pointer;}



/* table */
.table { width: 100%; font-size: 12px; table-layout: fixed}

.table > tbody > tr > th
,.table > tbody > tr > td
,.table > thead > tr > th
,.table > thead > tr > td
,.table > tfoot > tr > th
,.table > tfoot > tr > td {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    word-break: break-all;
}

.table th { background-color: #EBF0F9 !important; }
.table.th-left > tbody > tr > th{ text-align: left ;}
.table.td-left > tbody > tr > td { text-align: left ;}
.table.td-right > tbody > tr > td { text-align: right ;}

.table tr{
    background-color: #fff;
}

.table-even thead tr { background-color: #0D47A1}
.table-even tbody tr:nth-child(even){
    background-color: #eee;
}

.table-odd thead tr { background-color: #fff}
.table-odd tbody tr:nth-child(odd){
    background-color: #0D47A1;
}

.th-white th { background-color: white}

.bg-primary-table th, .bg-primary-table td{
    background-color: #333 !important;
    border: 1px solid gray !important;;
    color: #eee
}

.hide { display: none}
.hidden { display: none}

.table .on { background-color: #eee}


.square-64 { width: 64px; height: 64px; overflow: hidden}
.square-80 { width: 80px; height: 80px; overflow: hidden}
.square-100 { width: 100px; height: 100px; overflow: hidden}
.square-120 { width: 120px; height: 120px; overflow: hidden}
.square-160 { width: 160px; height: 160px; overflow: hidden}

.word-break {
    word-break: break-word;
}

/** 모바일 */
@media (max-width: 720px) {
    .hide-m {
        display: none !important;
    }
    .justify-space-between-m { display: flex; justify-content: space-between }
}

/** PC */
@media (min-width: 720px) {
    .justify-space-between-pc {
        display: flex;
        justify-content: space-between
    }
    .hide-pc {
        display: none
    }
    .width-480-pc { width: 480px }
    .width-720-pc { width: 720px }
}

.title-35 {
    font-size: 35px;
    line-height: 140px;
    font-width: bold;
}

.title-24 {
    font-size: 24px;
    line-height: 140px;
    font-width: bold;
}

.title-20 {
    font-size: 20px;
    line-height: 140px;
    font-width: bold;
}

.t-c {
    text-align: center;
}

.pagination {

}
.pagination{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.pagination li {
    width: 15px;
    height: 15px;
    padding: 5px;
    border: 1px solid #ddd;
}
.pagination li.active{
    background-color: #eee;
}