/* 공통 */
:root {
    --color-rose-950: #510B24;
    --color-rose-900: #89123E;
    --color-rose-800: #A11043;
    --color-rose-700: #C01048;
    --color-rose-600: #E31B54;
    --color-rose-500: #F63D68;
    --color-rose-400: #FD6F8E;
    --color-rose-300: #FEA3B4;
    --color-rose-200: #FECDD6;
    --color-rose-100: #FFE4E8;
    --color-rose-50: #FFF1F3;
    --color-rose-25: #FFF5F6;

    --color-green-950: #053321;
    --color-green-900: #054F31;
    --color-green-800: #05603A;
    --color-green-700: #027A48;
    --color-green-600: #039855;
    --color-green-500: #12B76A;
    --color-green-400: #32D583;
    --color-green-300: #6CE9A6;
    --color-green-200: #A6F4C5;
    --color-green-50: #ECFDF3;
    --color-green-25: #ECFDF3;

    --color-gray-950: #0C111D;
    --color-gray-900: #101828;
    --color-gray-800: #1D2939;
    --color-gray-700: #344054;
    --color-gray-600: #475467;
    --color-gray-500: #667085;
    --color-gray-400: #98A2B3;
    --color-gray-300: #D0D5DD;
    --color-gray-200: #E4E7EC;
    --color-gray-100: #F2F4F7;
    --color-gray-50: #F9FAFB;
    --color-gray-25: #FCFCFD;

    --color-blue-950: #062C41;
    --color-blue-900: #0B4A6F;
    --color-blue-800: #065986;
    --color-blue-700: #026AA2;
    --color-blue-600: #0086C9;
    --color-blue-500: #0BA5EC;
    --color-blue-400: #36BFFA;
    --color-blue-300: #7CD4FD;
    --color-blue-200: #B9E6FE;
    --color-blue-100: #E0F2FE;
    --color-blue-50: #F0F9FF;
    --color-blue-25: #F5FBFF;

    --max-width: 144rem;
    --min-width: 102.4rem;
    --gutter: 2rem;
}

body:has(.dim.active) {
    position: fixed;
}

.wrapper {
    position: relative;
    background-color: #fff;
    min-width: 100%;
    width: 100%;
    height: 100%;
}

.wrapper:has(.main-stage) {
    background-image: url(/images/main/main-bg.svg);
    background-repeat: no-repeat;
    background-position: top -28.7rem center;
}

/* header */
.header-stage {
    top: 0;
    position: fixed;
    width: 100%;
    height: 10rem;
    box-sizing: border-box;
    transition: .15s ease-in;
    border-color: var(--color-gray-200);
    z-index: 999;
}

.header-stage.active,
.header-stage:hover {
    background-color: #fff;
    border-bottom: 1px solid var(--color-gray-200);
}

.header-container {
    max-width: var(--max-width);
    min-width: calc(var(--min-width) - var(--gutter));
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo>img {
    max-width: 29rem;
    width: 100%;
}

.header__nav {}

.nav__lists {
    gap: 0 3rem;
}

.nav__list {
    position: relative;
}

.nav__list>a {
    font-size: 2.1rem;
    line-height: 2.5rem;
    font-weight: 500;
    transition: .15s ease-in;
}

.nav__lists:has(.nav__list>a.active),
.nav__lists:hover .nav__list>a {
    color: var(--color-gray-400);
}

.main .nav__list>a {
    color: #000;
}

.nav__list>a.active,
.main .nav__lists>a:hover,
.nav__lists:hover .nav__list>a:hover,
.nav__list:has(.nav__sub-lists.active)>a {
    color: #000;
    font-weight: 700;
}

.nav__sub-lists {
    width: 18rem;
    box-sizing: border-box;
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2.4rem;
    background-color: #fff;
    z-index: 1;
    padding: 1.4rem;
    border: 1px solid var(--color-gray-200);
    opacity: 0;
    transition: .15s ease-in;
    display: flex;
    visibility: hidden;
}

.nav__sub-lists.active {
    visibility: visible;
    opacity: 1;

}

.nav__sub-lists::before {
    content: '';
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    position: absolute;
    background-color: var(--color-blue-500);
    top: -.45rem;
}

.nav__sub-list {
    width: 100%;
}

.nav__sub-list>a {
    height: 5rem;
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius: 1.2rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #000;
    padding: 1.5rem 0;
    transition: .15s ease-in;
}

.family-site__list>a:hover,
.nav__sub-list>a:hover {
    background-color: var(--color-blue-100);
    color: var(--color-blue-600)
}

.nav__sub-list>a:hover {
    font-weight: 600;
}

@media screen and (max-width: 1439px) {
    .nav__list:last-child .nav__sub-lists {
        right: -2rem;
        left: initial;
        transform: initial;
    }
}

/* footer */
.footer-stage {
    width: 100%;
    min-width: calc(var(--min-width) - var(--gutter)*2);
    background-color: var(--color-gray-100);
}

.footer-container {
    max-width: var(--max-width);
    min-width: calc(var(--min-width) - var(--gutter)*2);
    width: 100%;
    margin: 0 auto;
    padding: 3rem var(--gutter) 4rem;
}

.footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer__lists {
    gap: 2rem;
}

.footer__list {}

.footer__list>a {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.8rem;
}

.footer__list>a:hover {
    text-decoration: underline;
}

.footer__list em {
    color: var(--color-blue-600);
}

.footer__family-site {
    position: relative;
}

.family-site-stage {
    position: absolute;
    box-sizing: border-box;
    width: 25rem;
    overflow: hidden;
    bottom: 5rem;
    z-index: 1;
    background-color: #fff;
    border: 1px solid var(--color-gray-200);
    padding: 1.4rem .7rem 1.4rem 1.4rem;
    border-radius: .5rem;
    border-color: var(--color-gray-200);
    transition: .15s ease-in;
    opacity: 0;
    visibility: hidden;
}

.family-site-stage.active {
    opacity: 1;
    visibility: visible;
}

.family-site-contaner {
    max-height: 25rem;
    overflow-y: auto;
}

.family-site-contaner::-webkit-scrollbar {
    width: .2rem;
}

.family-site-contaner::-webkit-scrollbar-thumb {
    background-color: #0086C9;
    border-radius: .2rem;
}

.family-site-contaner::-webkit-scrollbar-track {
    border-radius: .2rem;
}

.family-site__list {
    height: 3rem;
    width: 100%;
}

.family-site__list>a {
    height: 3rem;
    padding: 0 1.4rem;
    display: flex;
    align-items: center;
    width: calc(100% - .5rem);
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 500;
    border-radius: .5rem;
}

.footer-select__btn {
    width: 25rem;
    padding: 0 2.4rem;
    background-color: #fff;
    height: 4rem;
    border: 1px solid var(--color-gray-200);
    border-radius: .5rem;
    font-size: 1.5rem;
    font-weight: 500;
    position: relative;
    text-align: left;
}

.footer-select__btn::after {
    content: '';
    display: block;
    position: absolute;
    background-image: url(/images/common/icon-arrow-down.svg);
    width: 12px;
    min-width: 12px;
    height: 7px;
    top: 50%;
    right: 2.4rem;
    transform: translateY(-50%);
    transition: .2s ease-in;
}

.footer-select__btn.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.footer__top-btn {
    position: fixed;
    z-index: 1;
    width: 5.8rem;
    min-width: 5.8rem;
    height: 5.8rem;
    cursor: pointer;
    right: 10rem;
    bottom: 10rem;
}

.footer__bottom {
    padding-top: 3rem;
}

.footer__bottom>p {
    font-size: 1.5rem;
    line-height: 2.25rem;
    font-weight: 500;
}

/* inner */
.inner {
    padding: 9rem var(--gutter) 10rem;
    max-width: calc(var(--max-width) + var(--gutter)*2);
    min-width: calc(var(--min-width) - var(--gutter)*2);
    width: 100%;
    margin: 0 auto;
}

.inner__top {
    padding-top: 5rem;
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.inner__page {
    position: relative;
    padding-left: 1.5rem;
}

.inner__page:first-child svg {
    min-width: 1.6rem;
}

.inner__page:not(:last-child) {
    padding-right: 2.7rem;
}

.inner__page:not(:last-child)::after {
    content: '';
    display: block;
    background-image: url(/images/common/inner-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 11px;
    min-width: 11px;
    height: 7px;
    position: absolute;
    top: calc((2rem - 7px)/2);
    right: 0;
    transform: rotate(90deg);
}

.inner__page a {
    padding: 0 !important;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

.inner__page a:hover {
    text-decoration: underline;
}

.inner__print {
    /* 20241105 수정 */
    /* width: 4rem;
    min-width: 4rem;
    height: 4rem;
    background-image: url(/images/common/inner-print.svg);
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px #00000017;
    border-radius: 1.2rem; */
    display: none;
}

.inner__print>svg {
    min-width: 2rem;
}

/* 리스트 공통 */
.lists {
    display: flex;
    align-items: center;
}

.lists.column {
    flex-direction: column;
}

.list>a {
    padding: 1rem;
    cursor: pointer;
}

/* 버튼 공통 */
.btn-wrap {
    display: flex;
    gap: 0 1rem;
    justify-content: center;
}

.ctrols {
    display: flex;
    align-items: center;
    gap: 0 1rem;
}

.ctrols .paginations {
    display: flex;
    align-items: center;
    background-color: var(--color-gray-500);
    border-radius: 2.4rem;
    padding-left: 1.3rem;
    gap: 0 1rem;
    width: 75px;
    height: 35px;
}

.btn__ctrol {
    width: 3.3rem;
    min-width: 3.3rem;
    height: 3.3rem;
    border: 1px solid var(--color-gray-500);
    border-radius: 50%;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    transition: .2s ease-in;
    cursor: pointer;
}

.btn__ctrol.lg {
    width: 3.8rem;
    min-width: 3.8rem;
    height: 3.8rem;
}

.btn__ctrol:hover {
    box-shadow: 0 0 10px #062C4130;
}

.btn__ctrol.add {
    background-image: url(/images/common/add-btn.svg);
}

.btn__ctrol.prev {
    background-image: url(/images/common/prev-btn.svg);
}

.btn__ctrol.next {
    background-image: url(/images/common/prev-btn.svg);
    transform: rotate(180deg);
}

.stop {
    background-image: url(/images/common/stop-btn.svg);
}

.play {
    background-image: url(/images/common/play-btn.svg);
}

.autoplay__btn {
    transition: .15s ease-in;
    display: none;
}

.autoplay__btn.active {
    display: block;
}

.btn__list {
    width: 20rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 700;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-gray-50);
    border-radius: 1.2rem;
}

.btn__ex-down {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 0 1rem;
    width: 17rem;
    height: 5rem;
    border-radius: 1.2rem;
    border: 1px solid var(--color-gray-200);
    transition: .15s ease-in;
}

.btn__ex-down>p {
    font-size: 1.7rem;
    font-weight: 500;
}

.btn__ex-down:hover {
    box-shadow: 0 0 10px #00000020;
}

/* swiper */
.swiper-pagination-bullets {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.swiper-pagination-bullet {
    margin: 0 !important;
    min-width: 1.2rem;
    min-height: 1.2rem;
    background: var(--color-gray-200) !important;
    opacity: 1 !important;
    transition: .15s ease-in;
    border-radius: 1.2rem !important;
}

.swiper-pagination-bullet-active {
    background: var(--color-gray-500) !important;
    min-width: 3rem;
}

.swiper-slide a {
    display: block;
}

.pagination>span {
    color: #B3B8C2;
    font-size: 1.5rem;
    font-weight: 500;
}

.pagination>.curr {
    color: #fff;
}

.paginations .autoplay__btn {
    background-color: #fff;
}

/* pagination */
.pagination-stage {
    padding-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.pagination__btn {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    box-sizing: border-box;
    color: var(--color-gray-400);
    border: 1px solid var(--color-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 500;
    padding: 0 !important;
    transition: .15s ease-in;
}

.pagination__lists {
    gap: 1rem;
}

.pagination__ctrol:hover {
    border: 1px solid var(--color-gray-900);
}

.pagination__ctrol path {
    transition: .15s ease-in;
}

.pagination__ctrol:hover path {
    fill: var(--color-gray-900);
}

.pagination__page.active,
.pagination__page:hover {
    border: 1px solid var(--color-blue-600);
    color: var(--color-blue-600);
}

/* section */
.section {
    width: 100%;
    padding-top: 10rem;
}

/* section */
.section2 {
    width: 100%;
    margin-bottom: 5%;
}

.inner__top+.section {
    padding-top: 0;
}

/* 20241104 수정 */
/* section:last-child {
    padding-bottom: 10rem;
} */

.section__tit {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 3.7rem;
}

.section__tit.lg {
    text-align: center;
    font-size: 5rem;
    line-height: 6rem;
    padding-top: 3rem;
}

.section__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section__top>.section__left,
.section__top>.section__right {
    display: flex;
    gap: 0 2.4rem;
    align-items: center;
}

.section__bottom {
    padding-top: 4rem;
}

/* box */
.box {
    padding: 4rem;
    border-radius: 2.4rem;
    background-color: #fff
}

.box__gray {
    background-color: var(--color-gray-50);
}

.box__blue {
    background-color: var(--color-blue-50);
}

.box__green {
    background-color: var(--color-green-50);
}

.box__rose {
    background-color: var(--color-rose-50);
}

.box__search {
    margin-top: 11.3rem;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 0 2rem #10182808;
    padding: 0;
}

.box__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box__top button {
    min-width: 3.3rem;
    width: 3.3rem;
    min-height: 3.3rem;
    height: 3.3rem;
}

.box__bottom {
    padding-top: 4rem;
}

/* 이미지 공통 */
.img-stage {
    display: flex;
    align-items: center;
}

.img-wrap {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.img-wrap>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    object-fit: cover;
}

/* st 유튜브 20241104 수정 */
.iframe-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.iframe-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(57% / 2 - 1rem);
}

.iframe-wrap>iframe {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ed */

/* input */
.input {
    border: 1px solid var(--color-gray-300);
    height: 4.3rem;
    background-color: var(--color-gray-25);
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 500;
    border-radius: 2.4rem;
    padding: 0 2.4rem;
    color: #000;
}

textarea.input {
    height: auto;
    padding: 1rem 2.4rem;
}

.input::placeholder {
    color: var(--color-gray-400);
}

.input.square {
    border-radius: 1.2rem;
    background-color: #fff;
}

.input__long {
    width: 100%;
}

.select-wrap {
    position: relative;
}

*:has(.select-wrap + .select-wrap)>.select-wrap {
    width: 50%;
}

.select-wrap::after {
    content: '';
    display: block;
    background-image: url(/images/common/icon-arrow-down.svg);
    width: 12px;
    min-width: 12px;
    height: 7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2.4rem;
}

.select {
    width: 100%;
    padding-right: 4.6rem;
    min-width: 20.4rem;
}

input[type="radio"],
input[type="checkbox"]:not([name="mainPopChk"]) {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.input__btn {
    width: 14rem;
    height: 4.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    border-radius: 2.4rem;
    cursor: pointer;
    font-size: 1.9rem;
    font-weight: 500;
    box-sizing: border-box;
    transition: .15s ease-in;
    position: relative;
    z-index: 1;
    border-style: solid;
}

.input__btn.square {
    border-radius: 1.2rem;
    border-width: 1px !important;
    border-color: var(--color-gray-300);
    font-size: 1.7rem;
    line-height: 2rem;
    width: 100%;
}


.input__btn.blue,
.input__btn.green {
    color: #000;
}

.input__btn.sm {
    width: auto;
    padding: 0 2.5rem;
    border: 1px solid var(--color-gray-300);
}

input:checked+.input__btn.blue {
    border-color: var(--color-blue-600);
}

input:checked+.input__btn.green {
    border-color: var(--color-green-600);
}

.input__btn.gray {
    border-color: var(--color-gray-600);
}

input:checked+.input__btn {
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
}

input:checked+.input__btn.blue {
    color: var(--color-blue-600);
    background-color: var(--color-blue-50);
}

input:checked+.input__btn.green {
    color: var(--color-green-600);
    background-color: var(--color-green-50);
}

.input__btn.gray {
    color: var(--color-gray-600);
    background-color: var(--color-gray-300);
}

.input__search-wrap {
    position: relative;
}

.input__search {
    width: 29.6rem;
    padding: 0 5.6rem 0 2.4rem;
}

.input__search-btn {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-51%);
    padding: 1rem;
    /*transition: .15s ease-in;*/
    border-radius: 50%;
}

.input__search-btn:hover {
    background-color: #00000020;
}

.input__search-btn2 {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-51%) rotate(45deg);
    padding: 1rem;
    border-radius: 50%;
}

.input__search-btn2:hover { 
    background-color: #00000020;
}

.input__label {
    font-size: 1.8rem;
    font-weight: 500;
    cursor: pointer;
}

.checkbox__btn+.input__label {
    display: flex;
    align-items: center;
}

.checkbox__btn+.input__label::before {
    content: '';
    display: block;
    position: relative;
    margin: 0 .8rem 0 0;
    width: 1.8rem;
    height: 1.8rem;
    box-sizing: border-box;
    border-radius: 1.8rem;
    background-color: #fff;
    border: 1px solid var(--color-gray-300);
    background-image: url(/images/common/icon-check.svg);
    background-repeat: no-repeat;
    background-position: center;
    transition: .15s ease-in;
}

.checkbox__btn:checked+.input__label::before {
    background-color: var(--color-blue-600);
    background-image: url(/images/common/icon-check-active.svg);
    border: 1px solid var(--color-blue-600);
}

/* datepicker */
.input__datepicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.input__datepicker span {
    font-size: 1.7rem;
}

.input__date {
    position: relative;
}

.input__date::before {
    content: '';
    display: block;
    width: 16px;
    height: 17px;
    background-image: url(/images/common/icon-date.svg);
    position: absolute;
    left: 4rem;
    top: 50%;
    transform: translateY(-50%);
}

.input__date>input {
    padding: 0;
    /* 2024.10.11(임시)
    width: 20rem;
    min-width: 20rem;*/
    width: 25rem;
    min-width: 25rem;
    background-color: var(--color-gray-100);
    border: 0;
    text-align: center;
}

.ui-datepicker {
    font-size: 1.4rem;
}

.ui-datepicker .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: #fff;
    cursor: pointer;
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2.4rem;
    position: relative;
}

.ui-datepicker-prev::before,
.ui-datepicker-next::before {
    content: '';
    display: block;
    position: absolute;
    background-image: url('/images/common/icon-arrow-down.svg');
    width: 12px;
    height: 7px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.ui-datepicker-next::before {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    padding: 0 1rem;
}

.ui-datepicker-next {
    background-image: url('/images/icon/common/icon-arrow-down.svg');
}

/* table */
.table {
    width: 100%;
    border-bottom: 2px solid var(--color-blue-600);
}

.table th {
    background-color: var(--color-blue-600);
    color: #fff;
    height: 6.3rem;
    font-size: 1.9rem;
    font-weight: 600;
}

.table th:first-child {
    border-top-left-radius: 1.2rem;
}

.table th:last-child {
    border-top-right-radius: 1.2rem;
}

.table td {
    height: 6rem;
    font-size: 1.7rem;
    font-weight: 500;
}

.table:has(:not(.sm)) tbody tr:nth-child(even) td {
    background-color: var(--color-gray-50);
}

.table.sm thead tr:first-child th {
    height: 5.2rem;
    font-size: 1.9rem;
}

.table.sm thead tr:not(:first-child) th {
    border-top: 2px solid #fff;
    height: 3.2rem;
    font-size: 1.7rem;
    font-weight: 600;
}

.table.sm thead tr:not(:first-child) th {
    border-radius: 0;
    background-color: var(--color-blue-100);
    color: #000;
}

.table.sm thead th:not(:last-child) {
    border-right: 1px solid #fff;
}

.table.sm tbody tr td {
    height: 5.5rem;
}

.table.sm tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-300);
    box-sizing: border-box;
}

/* table(수급동향) */
.prdlcTable {
    width: 100%;
    border-bottom: 2px solid var(--color-blue-600);
}

.prdlcTable th {
    background-color: var(--color-blue-600);
    color: #fff;
    height: 6.3rem;
    font-size: 1.9rem;
    font-weight: 600;
    border: 1px solid #fff;
}
.prdlcCttmltTh2 {
	background-color: var(--color-blue-600);
	color: #fff;
    height: 6.3rem;
    font-size: 1.9rem;
    font-weight: 600;
}

.prdlcTable th:first-child {
    border-top-left-radius: 1.2rem;
}

.prdlcTable th:last-child {
    border-top-right-radius: 1.2rem;
}

.prdlcTable td {
    border: 1px solid #fff;
}

.prdlcTable tbody tr td {
    background-color: #fff;
    height: 6rem;
    font-size: 1.7rem;
    font-weight: 500;
    border: 1px solid var(--color-gray-300);
}


/* text-align */
.txt-c {
    text-align: center;
}

.txt-r {
    text-align: right;
}

.txt-l {
    text-align: left;
}

.txt__gray {
    color: var(--color-gray-500);
}

/* 색상 설정 */
.blue {
    color: var(--color-blue-600);
}

.blue__bg {
    background-color: var(--color-blue-600);
    color: #fff;
}

.green {
    color: var(--color-green-500);
}

.green__bg {
    background-color: var(--color-green-500);
    color: #fff;
}

.rose {
    color: var(--color-rose-500);
}

.rose__bg {
    background-color: var(--color-rose-500);
    color: #fff;
}

.red {
    color: #D92D20;
}

/* dim */
.dim {
    z-index: 7;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #0C111D70;
    opacity: 0;
    visibility: hidden;
    transition: .15s ease-in;
    position: fixed;
}

.dim.active {
    opacity: 1;
    visibility: visible;
}

.wrapper:has(.dim.active) .inner {
    filter: blur(15px);
}

/* popup */
.popup {
    max-width: 108rem;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: calc(50% + 5rem);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    padding: 8rem 2rem 8rem 8rem;
    border-radius: 2.4rem;
    box-shadow: 0 0 99px var(--color-gray-900);
    transition: .15s ease-in;
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
}

.popup_apply {
    max-width: 108rem;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: calc(50% + 5rem);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    padding: 8rem 2rem 8rem 8rem;
    border-radius: 2.4rem;
    box-shadow: 0 0 99px var(--color-gray-900);
    transition: .15s ease-in;
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
}

.popup__body {
    padding-right: 6rem;
    max-height: calc(100vh - 30rem);
    overflow: auto;
}

.popup__body::-webkit-scrollbar {
    width: .5rem;
}

.popup__body::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: .5rem;
}

.popup__body::-webkit-scrollbar-track {
    border-radius: .5rem;
    background-color: #eee;
}

.popup.active {
    position: fixed;
    opacity: 1;
    visibility: visible;
}

.popup_apply.active {
    position: fixed;
    opacity: 1;
    visibility: visible;
}

.popup__close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
}

.popup__close:hover {
    box-shadow: 0 0 10px #00000030;
}

/* st 20241104 추가 프린트 css*/
@page {
    size: A4;
    margin: 1cm 1cm 0;
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        /* Chrome, Safari, Edge */
        color-adjust: exact !important;
        /*Firefox*/
    }

    html,body {
        width: 210mm;
        height: 297mm;
    }

    header, footer, #inner__top,
    .ui-datepicker  {
        display: none;
        height: 0;
        width: 0;
    }

    .input__date::before {
        background-image: none;
    }

}

/* 메인 팝업 */
.mainPopup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; z-index: 999;}
.mainPopup.active {display: block;}
.mainPopup.window {position: static; transform: translate(0, 0); display: block; width: block;}

#layerSurveyGuide {width: 500px; font-family: 'ONE Mobile';}
#layerSurveyGuide .pop-cont .btn-close {position: absolute; width: 30px; height: 30px; text-indent: -9999px; background: url('../../../images/front/kmisys/btn_close.png') no-repeat center; background-size: 100%; border: 0; right: 20px; top: 20px;}
#layerSurveyGuide .headline p {text-indent: -9999px; height: 213px; background: url('../../../images/front/kmisys/popup_guide_headline.png') no-repeat center top; background-size: 100%;}
#layerSurveyGuide .cont {padding: 0 24px 0; background-color: #deebff; position: relative;}
#layerSurveyGuide .cont::after {position: absolute; content: ""; width: 100%; height: 174px; background: url('../../../images/front/kmisys/popup_deco_letter.png') no-repeat center bottom; background-size: 100%; bottom: 0; left: 0;}
#layerSurveyGuide .cont .popInner {padding: 30px 20px 110px; position: relative; background-color: #ffffff; border-radius: 15px;}
#layerSurveyGuide .cont .popInner p {text-align: center; font-size: 16px; line-height: 1.5;}
#layerSurveyGuide .cont .popInner p + p {margin-top: 6px;}
#layerSurveyGuide .cont .popInner p strong {font-weight: 700;}
#layerSurveyGuide .period {margin-top: 25px;}
#layerSurveyGuide .period dl {overflow: hidden;}
#layerSurveyGuide .period dl > * {float: left; line-height: 1.556; font-size: 18px;}
#layerSurveyGuide .period dl dt {font-weight: 700; color: #186aea; width: 130px; padding-left: 10px;}
#layerSurveyGuide .btn-submit {width: 200px; line-height: 50px; height: 50px; border-radius: 25px; text-align: center; color: #ffffff; font-weight: 700; font-size: 18px; margin: 30px auto 0; border: 0; background-color: #186aea; display: block; position: relative; z-index: 1;}

#layerSurvey {font-family: 'ONE Mobile';}
#layerSurvey .pop-cont {display: flex; flex-direction: column;}
#layerSurvey .headline {flex: none;}
#layerSurvey .headline p {text-indent: -9999px; height: 345px; background: url('../../../images/front/kmisys/popup_survey_headline.png') no-repeat center top; background-size: auto 345px;}
#layerSurvey .cont {padding: 0 35px 177px; position: relative; background: #deebff url('../../../images/front/kmisys/bg_letter.png') no-repeat center bottom; background-size: 100%;}
#layerSurvey .cont .inner {position: relative; border-radius: 15px; overflow: auto; box-sizing: border-box; position: relative; padding: 70px 45px 0}
#layerSurvey .cont .inner::before {content: ""; width: calc(100% - 70px); height: calc(100% - 641px); background-color: #ffffff; border-top-left-radius: 15px; border-top-right-radius: 15px; position: fixed; top: 345px; left: 50%; transform: translateX(-50%);}
#layerSurvey .survey {position: relative; z-index: 1;}
#layerSurvey .survey + .survey {margin-top: 70px;}
#layerSurvey .survey .txt-questions {font-weight: 700; font-size: 18px; font-weight: 700;}
#layerSurvey .survey .answer {display: flex; flex-wrap: wrap; gap: 20px 0; margin-top: 25px; padding: 0 25px;}
#layerSurvey .survey .answer .item {width: 20%; flex: none;}
#layerSurvey .survey .answer .item input[type='radio'] {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
#layerSurvey .survey .answer .item input[type='radio'] + label {position: relative; min-width: 16px; min-height: 16px; width: 100%; padding-left: 0 !important; background: none; height: auto; display: flex; align-items: center;}
#layerSurvey .survey .answer .item input[type='radio'] + label::before {content: ""; width: 16px; height: 16px; background: url('../../../images/front/kmisys/ico_radio_off.png') no-repeat center; background-size: 100%; left: 0; top: 0; position: absolute;}
#layerSurvey .survey .answer .item input[type='radio']:checked + label::before {background: url('../../../images/front/kmisys/ico_radio_on.png') no-repeat center; background-size: 100%;}
#layerSurvey .survey .answer .item input[type='radio'] + label p {font-size: 14px; line-height: 16px; padding-left: 24px;}
#layerSurvey .survey .answer .item input[type='radio'] + label input[type="text"] {flex: 1 0; height: 14px; border: 0; padding: 0 5px; line-height: 16px; font-size: 14px;}
#layerSurvey .btn-submit {width: 255px; line-height: 62px; height: 62px; border-radius: 31px; text-align: center; color: #ffffff; font-weight: 700; font-size: 24px; margin: 100px auto 0; border: 0; background-color: #186aea; display: block; position: relative; z-index: 1;}
/* ed */

/*산지위판장정보*/
#SUB .contents_area { min-width: 950px; height:660px; padding: 30px 25px 70px 25px; background-color:var(--color-gray-100); border-radius: 10px; box-sizing: border-box;}
#SUB .contents_area h3 { margin-bottom: 25px; height: 32px; color: #000; font-weight: 500; font-size: 32px; line-height: 32px; }
#SUB .contents_area h4 { margin-bottom: 10px; padding-left: 20px; height: 26px; background: url('../../../images/front/prdlcCttmlt/bullet_section_title.png') 0 center no-repeat; font-size: 18px; line-height: 26px; color:#222;}
#SUB .contents_area div.section { margin-bottom: 15px; padding: 12px; background-color: #fff; line-height: 16px; }
#SUB .contents_area div.section h5 { margin-bottom: 10px; padding-left: 10px; background: url('../../../images/front/prdlcCttmlt/blue/bullet_h5.png') 0 center no-repeat; font-size: 13px; }
#SUB .contents_area div.section .small_title { padding: 0 20px 0 10px; color: #666; font-weight: 800; font-size: 12px; }
#SUB .contents_area .row { clear:both; overflow: hidden; margin: 0 -8px; }
#SUB .contents_area .row:before, #SUB .contents_area .row:after { display: block; content: ''; clear: both; }
#SUB .contents_area .row div.col_2 { float: left; width: 50%; }
#SUB .contents_area .row div.col_2 .section { margin: 0 8px 15px 8px; }
#SUB .contents_area .row div.col_3 { float: left; width: 33.3333%; }
#SUB .contents_area .row div.col_3 .section { margin: 0 8px 15px 8px; }
#SUB .contents_area .row div.col_4 { float: left; width: 25%; }
#SUB .contents_area .row div.col_4 .section { margin: 0 8px 15px 8px; }

#SUB .contents_area .menu_admin_layout { clear:both; overflow: hidden; margin: 0 -8px; }
#SUB .contents_area .menu_admin_layout:before, #SUB .contents_area .menu_admin_layout:after { display: block; content: ''; clear: both; }
#SUB .contents_area .menu_admin_layout div.m_list { float: left; width: 34%; }
#SUB .contents_area .menu_admin_layout div.m_list > h4 {margin-left: 8px;}
#SUB .contents_area .menu_admin_layout div.m_table > h4 {margin-left: 8px;}
#SUB .contents_area .menu_admin_layout div.m_table { float: left; width: 66%; }
#SUB .contents_area .menu_admin_layout div .list_box,
#SUB .contents_area .menu_admin_layout div .table_wrap { margin: 0 8px 10px 8px; }
#SUB .contents_area .menu_admin_layout div .tb_bottom_area { margin: 0 8px; }

#SUB .contents_area .menu_admin_layout div .list_box { padding: 5px 10px; border: 1px solid #ddd; background-color: #fff; height: 400px; overflow: auto; border-radius: 5px;}
#SUB .contents_area .menu_admin_layout div .list_box ul li { line-height: 20px; }
#SUB .contents_area .menu_admin_layout div .list_box ul li a { display:block; color: #666; }
#SUB .contents_area .menu_admin_layout div .list_box ul ul { margin-left: 3px; }
#SUB .contents_area .menu_admin_layout div .list_box ul li.on > a { color: #337ec4; font-weight: 800; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li { background: url('../../../images/front/prdlcCttmlt/m_list_home.png') 0 8px no-repeat; padding-left: 9px; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li { background: url('../../../images/front/prdlcCttmlt/m_list_1d_off.png') 0 7px no-repeat; padding-left: 10px; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li.on { background: url('../../../images/front/prdlcCttmlt/m_list_1d_on.png') 0 7px no-repeat; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li > ul > li { background: url('../../../images/front/prdlcCttmlt/m_list_2d_off.png') 0 5px no-repeat; padding-left: 13px; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li > ul > li.on { background: url('../../../images/front/prdlcCttmlt/m_list_2d_on.png') 0 5px no-repeat; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li > ul > li > ul > li { background: url('../../../images/front/prdlcCttmlt/m_list_3d_off.png') 0 7px no-repeat; padding-left: 10px; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li > ul > li > ul > li.on { background: url('../../../images/front/prdlcCttmlt/m_list_3d_on.png') 0 7px no-repeat; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li > ul > li > ul > li > ul > li { background: url('../../../images/front/prdlcCttmlt/m_list_4d_off.png') 0 9px no-repeat; padding-left: 9px; }
#SUB .contents_area .menu_admin_layout div .list_box ul > li > ul > li > ul > li > ul > li > ul > li.on { background: url('../../../images/front/prdlcCttmlt/m_list_4d_on.png') 0 9px no-repeat; }

#SUB .contents_area .menu_admin_layout div .table_wrap table tr td label.depth2 { background: url('../../../images/front/prdlcCttmlt/m_list_2d_off.png') 0 1px no-repeat; padding-left: 13px; margin-left: 10px; }
#SUB .contents_area .menu_admin_layout div .table_wrap table tr td label.depth3 { background: url('../../../images/front/prdlcCttmlt/m_list_3d_off.png') 0 4px no-repeat; padding-left: 10px; margin-left: 20px; }
#SUB .contents_area .menu_admin_layout div .table_wrap table tr td label.depth4 { background: url('../../../images/front/prdlcCttmlt/m_list_4d_off.png') 0 6px no-repeat; padding-left: 10px; margin-left: 30px; }

#SUB .contents_area .tab {margin-bottom :20px;}
#SUB .contents_area .tab ul {height: 35px; border-radius: 5px; background-color: #fff; border: 1px solid #dddddd;}
#SUB .contents_area .tab ul.tab10 li {width: 10%;}
#SUB .contents_area .tab ul.tab09 li {width: 11.1111%;}
#SUB .contents_area .tab ul.tab08 li {width: 12.5%;}
#SUB .contents_area .tab ul.tab07 li {width: 14.2857%;}
#SUB .contents_area .tab ul.tab06 li {width: 16.6666%;}
#SUB .contents_area .tab ul.tab05 li {width: 20%;}
#SUB .contents_area .tab ul.tab04 li {width: 25%;}
#SUB .contents_area .tab ul.tab03 li {width: 33.3333%;}
#SUB .contents_area .tab ul.tab02 li {width: 50%;}
#SUB .contents_area .tab ul.tab01 li {width: 100%;}
#SUB .contents_area .tab ul li {float: left; box-sizing: border-box;}
#SUB .contents_area .tab ul li + li {border-left: 1px solid #ddd;}
#SUB .contents_area .tab ul li a {display: block; height: 35px; padding: 0 1px; color: #999; font-weight: 500; font-size: 1.8rem; text-align: center; line-height: 35px; transition: all .15s ease-in;}
#SUB .contents_area .tab ul li.on a {position: relative; background-color: #003651; color: #fff; font-weight: 700; }
#SUB .contents_area .tab ul li.on a::before {content: ''; position: absolute; left: 50%; bottom: -16px; width: 0; height: 0; margin-left: -4px; border: 8px solid transparent; border-top-color: #003651;}
#SUB .contents_area .tab ul li:hover a {background-color: #003651; color: #fff; }

#SUB .contents_area .tab.v2 ul {height: 40px; border-radius: 0px; background-color: transparent; border-bottom: 2px solid #d0d0d0 !important; border: 0px;}
#SUB .contents_area .tab.v2 ul li {position: relative;}
#SUB .contents_area .tab.v2 ul li + li {border-left: 0px}
#SUB .contents_area .tab.v2 ul li a {display: block; height: 40px; color: #999; font-weight: bold; font-size: 15px; text-align: center; line-height: 40px;}
#SUB .contents_area .tab.v2 ul li.on a {color: #1eb599 !important; background-color: transparent;}
#SUB .contents_area .tab.v2 ul li.on a::before {display: inline-block; position: absolute; content: ""; width: 100%; height: 2px; bottom: -2px; left: 0px; margin: 0px; border: 0px; background-color: #00af8f;}
#SUB .contents_area .tab.v2 ul li:hover a {color: #1eb599; background-color: transparent;}
#SUB .contents_area .tab.v2 ul li:hover a::before {display: inline-block; position: absolute; content: ""; width: 100%; height: 2px; bottom: -2px; left: 0px; margin: 0px; border: 0px; background-color: #00af8f;}

#SUB .contents_area div.guide_box { margin-bottom: 15px; padding: 20px 23px; border: 1px solid #dddddd; background-color: #fff; border-radius: 5px;}
#SUB .contents_area div.guide_box p { font-size: 14px; line-height: 16px; }
#SUB .contents_area div.guide_box p.alert_icon { padding-left: 18px; background: url('../../../images/front/prdlcCttmlt/ico_alert.png') 0 1px no-repeat; }
#SUB .contents_area div.guide_box p span.red { color: #ff0000; }

#SUB .contents_area div.tb_top_area { clear: both; overflow: hidden; height: 30px; margin-bottom: 10px; }
#SUB .contents_area div.tb_top_area:before, #SUB .contents_area div.tb_top_area:after { display: block; content: ''; clear: both; }
#SUB .contents_area div.tb_top_area h4 { float: left; }
#SUB .contents_area div.tb_top_area .btn_left { float: left; }
#SUB .contents_area div.tb_top_area .btn_right { float: right; }
#SUB .contents_area div.tb_top_area .btn_left .btn { margin-right: 5px; }
#SUB .contents_area div.tb_top_area .btn_right .btn { margin-left: 5px; }

#SUB .contents_area div.tb_bottom_area { clear: both; overflow: hidden; /*margin-top: -5px;*/ margin-bottom: 15px; }
#SUB .contents_area div.tb_bottom_area:before, #SUB .contents_area div.tb_bottom_area:after { display: block; content: ''; clear: both; }
#SUB .contents_area div.tb_bottom_area .btn_left { float: left; }
#SUB .contents_area div.tb_bottom_area .btn_right { float: right; }
#SUB .contents_area div.tb_bottom_area .btn_left .btn { margin-right: 5px; }
#SUB .contents_area div.tb_bottom_area .btn_right .btn { margin-left: 5px; }

#SUB .contents_area div.table_wrap {margin-bottom: 15px; /*border-bottom: 1px solid #d0d8dd;*/  /*background-color: #fff;*/}
#SUB .contents_area div.table_wrap .bbs_title { padding: 0 20px; height: 40px; clear: both; line-height: 40px; }
#SUB .contents_area div.table_wrap .bbs_title:before, #SUB .contents_area div.table_wrap .bbs_title:after { display: block; content: ''; clear: both; }
#SUB .contents_area div.table_wrap .bbs_title h5 { float: left; color: #fff; font-size: 14px; }
#SUB .contents_area div.table_wrap .bbs_title .bbs_total { float: right; color: #fff; font-weight: 700; font-size: 12px; }
#SUB .contents_area div.table_wrap .bbs_title .bbs_total strong { color: #fff607; }

#SUB .contents_area div.table_wrap .bbs_list thead tr th { padding: 5px 8px; height: 22px; font-size: 12px; }
#SUB .contents_area div.table_wrap .bbs_list thead tr th:first-child { border-left: 0; }
#SUB .contents_area div.table_wrap .bbs_list tbody tr td { padding: 5px 8px; height: 22px; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; color: #333; font-weight: normal; font-size: 12px; text-align: center; }
#SUB .contents_area div.table_wrap .bbs_list tbody tr td:first-child { border-left: 0; }
#SUB .contents_area div.table_wrap tbody tr.notice td { background-color: #fafafa; }
#SUB .contents_area div.table_wrap tbody tr.notice td span.ico_notice { display: inline-block; padding: 3px 5px; border: 0; border-radius: 0.3em; background-color: #999; color:#fff; text-align: center; vertical-align: middle; font-size: 11px; line-height: 13px; font-weight: normal; }

#SUB .contents_area div.table_wrap .bbs_tb tbody tr th { padding: 5px 8px; height: 22px; font-size: 12px; }
#SUB .contents_area div.table_wrap .bbs_tb tbody tr th span.star { color: #ff0000; }
#SUB .contents_area div.table_wrap .bbs_tb tbody tr td { padding: 5px 8px; border-bottom: 1px solid #ddd; font-weight: normal; font-size: 12px; text-align: left; }
#SUB .contents_area div.table_wrap .bbs_tb tbody tr td:first-child { border-left: 0; }
#SUB .contents_area div.table_wrap .bbs_tb tbody tr td.view_contetns { height: 150px; vertical-align: top; }

#SUB .bbs_control { margin: 15px 0; padding: 0 15px; min-height: 26px; position: relative; }
#SUB .bbs_control .btn_group { clear: both; overflow: hidden; }
#SUB .bbs_control .btn_group:before, #SUB .bbs_control .btn_group:after { display: block; content: ''; clear: both; }
#SUB .bbs_control .btn_group .btn { position: relative; z-index: 10; }
#SUB .bbs_control .btn_group .btn_left { float: left; }
#SUB .bbs_control .btn_group .btn_left .btn { margin-right: 5px; }
#SUB .bbs_control .btn_group .btn_right { float: right; }
#SUB .bbs_control .btn_group .btn_right .btn { margin-left: 5px; }

#SUB .bbs_control .paging_wrap {  text-align: center; position: absolute; width: 100%; z-index: 1; }
#SUB .bbs_control .paging { display: table; margin: 0 auto; }
#SUB .bbs_control .paging a {display: block; float: left; width: 30px; height: 30px; margin-left: 5px; font-size: 12px; line-height: 30px; text-align: center; color: #7a7d96; vertical-align: middle; border: 1px solid #e7e7e7; background-color: #fff; box-sizing: border-box; border-radius: 5px;}
#SUB .bbs_control .paging a:first-child { margin-left: 0; }
#SUB .bbs_control .paging a.arrow { font-weight: 400; font-size: 11px; letter-spacing: -3px; }
#SUB .bbs_control .paging a.arrow.off { color: #999; }
#SUB .bbs_control .paging a.on { color: #fff; background-color: #323b46 !important; }
#SUB .bbs_control .paging a:hover { color: #fff; background-color: #323b46; }
#SUB .bbs_control .paging a.first_btn {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-first.png') no-repeat center center #fff;}
#SUB .bbs_control .paging a.first_btn:hover {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-first_hover.png') no-repeat center center #323b46;}
#SUB .bbs_control .paging a.prev_btn {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-prev.png') no-repeat center center #fff;}
#SUB .bbs_control .paging a.prev_btn:hover {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-prev_hover.png') no-repeat center center #323b46;}
#SUB .bbs_control .paging a.next_btn {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-next.png') no-repeat center center #fff;}
#SUB .bbs_control .paging a.next_btn:hover {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-next_hover.png') no-repeat center center #323b46;}
#SUB .bbs_control .paging a.last_btn {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-end.png') no-repeat center center #fff;}
#SUB .bbs_control .paging a.last_btn:hover {font-size: 0px; background: url('../../../images/front/prdlcCttmlt/icon-seek-end_hover.png') no-repeat center center #323b46;}

div.table_wrap .row_type tbody tr th { padding: 5px 10px; height: 50px; color: #fff; font-size: 16px; white-space: nowrap; text-align: center; border-top: 1px solid #ddd; background-color: var(--color-blue-600); box-sizing: border-box;}
div.table_wrap .row_type tbody tr th span.star,
div.table_wrap .col_type thead tr th span.star { color: #f5eb6b; }
div.table_wrap .row_type tbody tr:first-child th { border-top: 0 !important; }
div.table_wrap .row_type tbody tr td { padding: 5px 8px; border-top: 1px solid #ddd; background-color: #fff; font-size: 14px; text-align: left; }
div.table_wrap .row_type tbody tr:first-child td { border-top: 0 !important; }
div.table_wrap .row_type.center tbody tr td { text-align: center; }

div.table_wrap table tr.on td { background-color: #e2f0fc; }
div.table_wrap table tr td.left { text-align: left !important; }
div.table_wrap table tr td.center { text-align: center !important; }
div.table_wrap table tr td.right { text-align: right !important; }

div.table_wrap table tr td.empty { text-align: center; color: #aaa; }
div.table_wrap table td a { color: #0074e0; }
div.table_wrap table td a:hover { border-bottom: 1px solid #0074e0; }

div.table_wrap table td a.btn { color: #fff; }
div.table_wrap table td a.btn:hover { color: #fff; border-bottom: 0; }
div.table_wrap .row_type tr td .btn,
div.table_wrap .col_type tbody tr td.left .btn { margin: 0 5px 0 0; }

.backLayer { display:none; background-color:black; position:absolute; left:0px; top:0px; z-index: 9999;}

#photoPage {
    display: inline-block; 
    padding: 2px 6px;
    color: #fff; 
    background-color: var(--color-blue-600); 
    border-radius: 5px;
    font-weight: bold; 
    text-align: center; 
	margin: 1px;
	margin-top: 8px;
}

#photoPag { background-color: var(--color-blue-800); }

.sideTable {overflow-y: auto;}
.sideTable::-webkit-scrollbar {
    width: 0.5rem;
}

.sideTable::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);
    border-radius: 0.5rem;
}

.sideTable::-webkit-scrollbar-track {
    background-color: rgb(204, 204, 204);
    border-radius: 0.5rem;
}