@import "reset.css";

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/**  =====================
      Theme-preloader css start
==========================  **/

.theme-loader {
    height: 100%;
    width: 100%;
    background: #000;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    opacity: 0.4;
    display:none;
}

.theme-loader .loader-track {
    left: 50%;
    top: 50%;
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
}

.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite;
}

/**  =====================
      Theme-preloader css start
==========================  **/

.report-loader {
    height: 100%;
    width: 100%;
    background: #fff;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    opacity: 0.5;
    display:none;
}

.report-loader .loader-track {
    left: 50%;
    top: 50%;
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
}

.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite;
}

/* 로딩 메시지 스타일 */
.loading-message {
    color: white;
    font-size: 18px;
    margin-top: 10px;
    display: none;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    white-space: nowrap; /* 글자가 넘치면 한 줄로 표시 */
    line-height: 1.2; /* 줄간격 */
}
@media screen and (max-width: 1100px) {
    .loading-message {
        font-size: 16px;
        width: 650px;
        white-space: normal;
    }
}
@media screen and (max-width: 620px) {
    .loading-message {
        font-size: 16px;
        width: 300px;
        white-space: normal;
    }
}
@-webkit-keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-color: #11c15b;
}

.spinner-layer.spinner-blue {
    border-color: #448aff;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.spinner-layer.spinner-red {
    border-color: #ff5252;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.spinner-layer.spinner-yellow {
    border-color: #ffe100;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.spinner-layer.spinner-green {
    border-color: #11c15b;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.spinner-layer,
.spinner-layer.spinner-blue-only,
.spinner-layer.spinner-red-only,
.spinner-layer.spinner-yellow-only,
.spinner-layer.spinner-green-only {
    opacity: 1;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.gap-patch .circle {
    width: 1000%;
    left: -450%;
}

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.circle-clipper.left {
    float: left;
}

.circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
    transform: rotate(129deg);
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.circle-clipper.right {
    float: right;
}

.circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
    transform: rotate(-129deg);
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

#spinnerContainer.cooldown {
    -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    25% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    37.5% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
    50% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
    62.5% {
        -webkit-transform: rotate(675deg);
        transform: rotate(675deg);
    }
    75% {
        -webkit-transform: rotate(810deg);
        transform: rotate(810deg);
    }
    87.5% {
        -webkit-transform: rotate(945deg);
        transform: rotate(945deg);
    }
    to {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
    }
}

@keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    25% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    37.5% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
    50% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
    62.5% {
        -webkit-transform: rotate(675deg);
        transform: rotate(675deg);
    }
    75% {
        -webkit-transform: rotate(810deg);
        transform: rotate(810deg);
    }
    87.5% {
        -webkit-transform: rotate(945deg);
        transform: rotate(945deg);
    }
    to {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
    }
}

@-webkit-keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes red-fade-in-out {
    from {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
}

@keyframes red-fade-in-out {
    from {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
}

@-webkit-keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
}

@keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
}

@-webkit-keyframes green-fade-in-out {
    from {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes green-fade-in-out {
    from {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
}

@keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
}

@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    to {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
}

@keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    to {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

select.form-control:not([size]):not([multiple]) {
    height: 43px;
}

.tabledit-input:disabled {
    display: none;
}

@-moz-document url-prefix() {
    select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background: #FFF url("/assets/images/select-arrow.png") no-repeat 95% center !important;
    }
}


html, body {
    font-family:'Pretendard-Regular' !important;
}

#m_wrap {
    position: relative;
    /*min-width: 1920px;*/
    width: 100%;
    /*height: 100vh;*/
    background-color: #f5f5f5;
    overflow: visible;
}

#s_wrap {
    position: relative;
    min-width: 1920px;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: #f5f5f5;
}

.mob_menu {display: none!important;}

@media (max-width: 1400px) {
    .mob_menu {display: block!important;}
    .pc_menu {display: none!important;}
}

#main_header {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    /*background-color: rgba(0, 0, 0, 0.1);*/
    border-bottom: 1px solid #a8a8a8;
    z-index: 1;
}

#main_header > h1 {
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    display: flex;
}


#main_header > h1 a{
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

#main_header > h1 a img {
    margin-right: 10px;
}

/*관리자 헤더 logo*/
/*.header-navbar .navbar-wrapper .navbar-logo {*/
/*    padding-left: 40px!important;*/
/*}*/

#main_header > #gnb {
    position: relative;
    margin-right: 10px;
}

#main_header > #gnb > ul {
    /* float: right; */
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-right: 10px;
}

#main_header > #gnb > ul > li {
    color: #fff;
    line-height: 60px;
    font-size: 20px;
    position: relative;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_header > #gnb > ul > .mb_profile_swh, #sub_header > #gnb > ul > .mb_profile_swh {
    display: none;
}

#main_header > #gnb .sub_menu {
    position: absolute;
    z-index: 200;
    gap: 20px;
    /* padding: 0 25px; */
    display: none;
    padding-right: 10px;
}

#main_header > #gnb:hover .sub_menu {
    display: flex;
}

#main_header > #gnb .sub_menu .sub_menu_back {
    position: absolute;
    border-radius: 6px;
    opacity: 0.7;
    background: rgb(255, 255, 255);
    z-index: 200;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#main_header > #gnb .sub_menu > ul {
    color: rgba(0, 0, 0, 0.5);
    position: relative;
    width: 150px;
    z-index: 201;
    color: #000000;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 14px */
    letter-spacing: -0.42px;
    display: flex;
    flex-direction: column;
}

#main_header > #gnb .sub_menu > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#main_header  > #gnb .sub_menu > ul > li > a {
    padding: 15px 5px;
    color: #3D3D3D;
    text-decoration: none;
}

#main_header > #gnb > ul li:hover {
    font-weight: bold;
    /*border-bottom: 2px solid #fff;*/
}

#main_header > #gnb > ul .logout_swh,
#sub_header > #gnb > ul .logout_swh
{
    width: 30px;
}

#main_header > #gnb > ul .logout_swh img,
#sub_header > #gnb > ul .logout_swh img
{
    margin: 0;
}


#main_header > #gnb > ul li a{
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

#main_header > #gnb > ul li a img {
    margin-right: 10px;
}

.gnb_select {
    font-weight: bold;
    box-sizing: border-box;
    position: relative;
}

.gnb_select::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 5px;
    width: 100%;
    background-color: #fff;
}

.gnb_sub_select {
    position: relative;
    font-weight: bold;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gnb_sub_select::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
}

.gnb_sub_child_select {
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rsp_li {
    display: none!important;
}

/*프로필 박스*/
.profile_swh,
.sub_profile_swh {
    position: relative;
    cursor: pointer;
}

.profile_swh.on .profile_box {
    display: flex!important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sub_profile_swh.on .profile_box {
    display: flex!important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}

.profile_swh.on .img_change img:first-child {
    display: none!important;
}

.profile_box {
    display: none!important;
    width: 100%;
    position: absolute;
    top: 70px;
    background: #fff;
}

.sub_profile_box {
    display: none!important;
    width: 100%;
    position: absolute;
    top: 70px;
    background: #fff;
}

.profile_box li {
    width: 100%;
    display: flex;
    justify-content: center!important;
    margin-right: 0!important;
    cursor: pointer;
    height: 50px;
    line-height: 50px!important;
    border-bottom: 1px solid #f0f0f0;
}

.profile_box li a {
    color: #000!important;
}

.profile_box li:last-child {
    border-bottom: none;
}

.profile_box li a:hover {
    color: #942092!important;
}

.img_change img:first-child {
    display: block;
}

.img_change img:nth-of-type(2) {
    display: none;
}

.gnb_sub_select.img_change img:first-child {
    display: none;
}

.gnb_sub_select.img_change img:nth-of-type(2) {
    display: block!important;
}

/*----------*/

.m_banner {
    position: absolute;
    width: 100%;
    height: 500px;
    /*background-color: #000;*/
    background: url(../../images/banner.png) no-repeat center / cover;
    overflow: hidden;
}

.banner_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,0.5);*/
    background: linear-gradient(75deg, #b749b5 30%, #0049dd 80%);
    opacity: 0.6;
    overflow: hidden;
}

.banner_poly {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../images/banner_poly2.png) no-repeat center/ cover;
    opacity: 0.5;
}

.banner_effect1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../images/banner_effect1.png) no-repeat top / cover;
    animation: op1 20s linear infinite;
}

@keyframes op1 {
    0% {
        top: 100%;
        opacity: 0;
    }
    33% {
        /*opacity: 50%;*/
    }

    66% {
        /*opacity: 50%;*/
    }
    100% {
        top: -100%;
        /*opacity: 0;*/
    }
}

.banner_effect2 {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    background: url(../../images/banner_effect2.png) no-repeat top / cover;
    animation: op2 11s linear infinite;
}

@keyframes op2 {
    0% {
        top: 50%;
        opacity: 0;
    }
    50% {
        /*opacity: 50%;*/
    }
    100% {
        top: -100%;
        /*    opacity: 0;*/
    }
}

.banner_text {
    color: #E7DFF4;
    /* width: 1000px; */
    display: flex;
    width: 100%;
}

.banner_text img {
    width: 1000px;
    margin-bottom: -20px;
}

.visit_wrap {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 10px;
    gap: 6px;
}

/*.banner_text h2 {*/
/*    position: relative;*/
/*    font-size: 90px;*/
/*    font-weight: bold;*/
/*    opacity: 80%;*/
/*}*/

/*.banner_text h2::after {*/
/*    content: 'ULSAN BIGDATA PLATFORM';*/
/*    position: absolute;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    !*box-reflect: below -25px;*!*/
/*    -webkit-box-reflect: below -20px;*/
/*    opacity: 0.07;*/
/*}*/

.banner_text p {
    font-size: 20px;
    font-weight: normal;
}

.main_con {
    position: relative;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 200px;
    padding-left: 25px;
    padding-right: 25px;
}

.main_con h3 {
    color: #111;
    font-family: Pretendard;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 40px */
    letter-spacing: -0.96px;
}

.main_con_L {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 30px;
    margin-bottom: 40px;
}

.main_con_L ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    gap: 10px;
}

.main_con_L ul li {
    box-sizing: border-box;
    padding: 2px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.main_con_L_inner {
    display: flex;
    margin-top: 30px;
}

.main_con_L_cont {
    padding: 0 15px;
}

.main_con_L_cont:last-child {
    flex: 1;
    border-left: 1px solid #D9D9D9;
}

.main_con_L_cont h3 {
    color: #222;
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -0.72px;
    margin-bottom: 10px;
}

.main_con_L .dash {
    width: 1px;
    height: 100%;
    background: #D9D9D9;
    flex: 1;
}

.main_con_L ul li a {
    position:relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: #000;
}

.main_con_L ul li a p {
    width: 100%;
    position: absolute;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 24px;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 0px);

    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 120%; /* 26.4px */
    letter-spacing: -0.66px;
}

.main_con_L ul li a img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.main_con_L ul li:hover a img {
    opacity: 1;
}

.main_con_R {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 40px;
    /* background-color: #fff; */
}

.main_con1 {
    width: 100%;
    height: 70%;
    min-height: 250px;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.datashare_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 30px 30px;
}

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

.datashare_title a p {
    margin-right: 10px;
    color: #222;
    text-align: right;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 18px */
}

.datashare_title a:hover p {
    font-weight: bold;
}

.m_share_category {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
    padding: 0px 30px 30px 30px;
}

.m_share_category .category_gubn {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
}

.m_share_category .category_gubn li {
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.m_share_category .category_gubn li img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.m_share_category .category_gubn li p {
    color: #222;
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 18px */
}

.m_carousel {
    display: flex;
    padding: 30px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    border-radius: 0 0 20px 20px;
    background: #E2E3EB;
}

.carousel_card {
    display: flex;
    height: 150px;
    padding: 2px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 15px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.carousel_card:hover {
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.card_con {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 15px;
}

.card_con a{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.card_con a h4 {
    color: #000;
}

.card_con:hover a h4{
    font-weight: bold;
}

.cate_tag {
    border-radius: 5px;
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    position: absolute;
    top: 0;
}

.card_title {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
}

.data_category {
    color: #828282;
    font-size: 14px;
    margin-bottom: 5px;
}

.card_title h4 {
    font-size: 18px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    word-break:keep-all;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


.main_con2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30%;
    margin-bottom: 40px;
    gap: 20px;
}

.con2_L {
    position: relative;
    width: 100%;
    min-height: 105px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /* margin-right: 20px; */
    height: 150px;
}

.con2_L > img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.con2_L a{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing:border-box;
    padding: 20px;
    border-radius: 10px;
}

.con2_L a h4 {
    color: #FFF;
    font-family: Pretendard;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 35px */
    letter-spacing: -0.84px;
}

.con2_L a .move {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    gap: 10px;
    text-align: right;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 18px */
}

/*.con2_R {
    width: 50%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
}*/

.con2_R {
    width: 50%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background: linear-gradient(91deg, #092D76 0%, #942092 50%, #092D76 100%);
    background-size: 200% auto;
    transition: 0.5s;
}

.con2_R:hover {
    background-position: right center;
}

.con2_R a{
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing:border-box;
    padding: 20px;
}

.con2_R a h4 {
    font-size: 24px;
    color: #fff;
}

.con2_R a:hover h4 {
    font-weight: bold;
}

#footer {
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    padding: 20px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_info {
    width: 55%;
}

.footer_info p {
    font-size: 16px;
    margin-bottom: 5px;
    color: #828282;
}

.footer_info p:last-child {
    margin-bottom: 0;
}

.footer_menu {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer_menu li {
    padding: 0 20px;
    border-right: 1px solid #828282;
    color: #828282;
    cursor: pointer;
}

.footer_menu li:last-child {
    border-right: none;
    padding-right: 0;
}

.footer_menu li:hover {
    color: #942092;
    font-weight: bold;
}

.footer_copy {
    text-align: right;
    color: #828282;
}


/*------------------------------------------------------------------------------------------------------ */

/*----------------------------------------------데이터 분석------------------------------------------------*/

#sub_header {
    /*position: absolute;*/
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    background-color: #fff;
    /*z-index: 1;*/
}

#sub_header > h1 {
    line-height: 60px;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
}

#sub_header > h1 a {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

#sub_header > h1 a img {
    margin-right: 10px;
}

#sub_header > #gnb {
    position: relative;
    margin-right: 10px;
}

#sub_header > #gnb > ul {
    /* float: right; */
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-right: 10px;
}

#sub_header > #gnb > ul > li {
    color: rgba(0, 0, 0, 0.5);
    line-height: 60px;
    font-size: 20px;
    position: relative;
    width: 150px;
}

#sub_header > #gnb .sub_menu {
    position: absolute;
    z-index: 200;
    gap: 20px;
    padding-right: 10px;
    display: none;
}

#sub_header > #gnb:hover .sub_menu {
    display: flex;
}

#sub_header > #gnb .sub_menu .sub_menu_back {
    position: absolute;
    border-radius: 6px;
    opacity: 0.7;
    background: rgb(255, 255, 255);
    z-index: 200;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#sub_header > #gnb .sub_menu > ul {
    color: rgba(0, 0, 0, 0.5);
    position: relative;
    width: 150px;
    z-index: 201;
    color: #000000;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 14px */
    letter-spacing: -0.42px;
    display: flex;
    flex-direction: column;
}

#sub_header > #gnb .sub_menu > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#sub_header > #gnb .sub_menu > ul > li > a {
    padding: 15px 5px;
    color: #3D3D3D;
    text-decoration: none;
}

#sub_header > #gnb > ul li a{
    color: #000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sub_header > #gnb > ul li a:hover{
    /* color: #000; */
    font-weight: bold;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#sub_header > #gnb > ul li a img {
    margin-right: 10px;
}

#sub_header > #gnb > ul li a img:nth-of-type(2) {
    display: none;
}

#sub_header > #gnb > ul li a:hover img:first-child {
    display: none;
}
#sub_header > #gnb > ul li a:hover img:nth-of-type(2) {
    display: block;
}

.map_wrap {
    display: flex;
    height: calc(100vh - 60px);
}

.map_component {
    position: relative;
    width: 100%;
    height: 100%;
    /*background: url(../../images/map.png);*/

    overflow: hidden;
}

.map_component.hide {
    display: none;
}

.btn_split {
    position: absolute;
    left: 500px;
    top: 30px;
    z-index: 5;
}

.filterGubn {
    position: absolute;
    top: 65px;
    left: 10px;
    z-index: 2;
    background: white;               /* 흰 배경 */
    padding: 12px 20px;              /* 내부 여백 */
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);  /* 약간의 그림자 */
    display: flex;
    justify-content: space-between;
}

.filter_gubn_img {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.filter_gubn_img img {
    width: 16px;
    height: 16px;
}

.filterGubn p{
    padding-right: 113px;
    padding-left: 15px;
}

.tooltip-box {
    position: absolute;
    width: 300px;
    height: 110px;
    max-width: 300px;
    opacity: 1;
    border-radius: 6px;
    padding: 10px 10px 10px 13px;
    background:
            linear-gradient(90deg, rgba(52,101,255,0.3) 0%, rgba(148,32,146,0.3) 100%),
            linear-gradient(0deg, #000000, #000000);
    display: none;
    z-index: 9999;
    box-sizing: border-box;
    color: #fff;
    font-family: Pretendard, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.spot_filter{
    pointer-events: none;
    cursor: default;
    font-size: 16px;
}

.filter {
    position: absolute;
    top: 50px;
    left: 10px;
    /* width: 40vh; */
    /* height: 30vh; */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 2;
}

.filter {
    display: none;
    visibility: hidden;
}

#map2 .filter {
    top: 10px;
}

.filter.open {
    display: block;
    visibility: visible;
}

.filter .filter_cont .sel_box .select_tab {
    display: none;
}

.filter .filter_cont .sel_box.open .select_tab{
    display: block;
}

.filter_cont .option_wrap {
    display: none;
}

.filter_cont .option_wrap.select {
    display: block;
}

.filter_menu {
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
    border-bottom: 1px dashed #828282;
    margin: 0px 20px 15px;
}

.filter_menu.hide {
    display: none;
    justify-content: center;
    padding-bottom: 15px;
    border-bottom: 1px dashed #828282;
    margin: 0px 20px 15px;
}

.filter_menu ul li.select span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.filter_menu ul li.select {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.filter_menu ul {
    margin-top: 20px;
    padding: 10px 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.filter_btn.type_btn {
    display: none;
}

.filter_menu ul li {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: center;
    padding: 10px 10px;
    color: rgb(121, 121, 121);
    margin-right: 10px;
}

.filter_menu ul li:last-child {
    margin-right: 0;
}

.filter_menu ul li:hover {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.filter_menu ul li:hover span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.filter_btn {
    margin: 15px 0;
    padding: 0px 20px;
    width: 100%;
}

.filter_btn.drag_btn_cont.hide {
    display: none;
}

.filter_btn ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.filter_btn ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 48%;
    height: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #828282;
    /*padding: 2px;*/
}

.filter_btn ul li img {
    margin-right: 10px;
}

.filter_btn ul li:hover {
    box-sizing: border-box;
    padding: 2px;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.filter_cont li.select{
    box-sizing: border-box;
    padding: 2px;
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #fff;
    font-weight: bold;
}

.filter_cont li.select:hover {
    background-image: linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #fff;
    font-weight: bold;
}

.filter_select {
    margin: 0px 20px;
    /* padding-bottom: 20px; */
    border-bottom: 1px solid #E6E6E6;
}

.sel_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sel_box h3 {
    width: 30%;
    font-size: 18px;
    font-weight: bold;
    color: #4b4b4b;
    margin-left: 15px;
    margin-right: 15px;
}

.sel_box.alarm h3 {
    width: 100%;
    font-size: 14px;
}

.sel_box.open .select_section {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.sel_box.open .select_section img:nth-child(even) {
    display: none;
}

.sel_box.open .select_section img:nth-child(odd) {
    display: block;
    rotate: 0deg;
}

.sel_box.open p {
    color: #000;
}

.sel_box.active p {
    color: #000;
    font-weight: bold;
}

.sel_box.location_sel.hide {
    display: none;
}

.sel_box.alarm.hide {
    display: none;
}

.sel_box.type_sel1.hide {
    display: none;
}

.sel_box.type_sel2.hide {
    display: none;
}

.sel_box.type_sel3.hide {
    display: none;
}

.align_section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.select_section {
    position:relative;
    width: 100%;
    padding: 2px;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select_section:hover {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.select_section p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #191919;
    font-weight: bold;
    overflow: hidden;
}

.select_section img {
    margin-right: 10px;
}

.select_section img:nth-child(odd) {
    display: none;
}

.select_section:hover img:nth-child(even) {
    display: none;
}

.select_section:hover img:nth-child(odd) {
    display: block;
    rotate: 180deg;
}

.select_section open img:nth-child(odd) {
    rotate: 0;
}

.select_section:hover p {
    color: #000;
}

.select_tab {
    position:absolute;
    left: 400px;
    min-width: 300px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    font-size: 14px;
}

.select_tab h4 {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.under_line {
    width: 100%;
    border-bottom: 1px dashed #d8d8d8;
    padding: 0 20px;
    margin: 15px 0;
}

.filter {
    transition: all 0.3s;
}

.filter .btn_hide {
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translate(-50%, 0);
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 20px;
    width: 60px;
    cursor: pointer;
}

.filter .btn_hide::after {
    content: "▲";
    color: #7a7a7a;
    font-size: 12px;
}

.filter.hide .btn_hide::after {
    content: "▼";
    color: #000000;
    font-size: 12px;
}

.filter.hide .btn_hide {
    border: 2px solid #942092;
}

.filter.hide {
    height: 110px;
}

#map2 .filter.hide {
    height: 40px;
}

.filter_header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-left: 5%;
}

.filter_header.hide {
    display: none;
}

.filter_title {
    font-size: 18px;
    font-weight: bold;
    color: #4b4b4b;
}

.filter.hide .cont_wrap {
    display: none;
}

.filter.hide .filter_menu {
    border: none;
}

.filter div.road_search {
    margin-bottom: 4px;
}
.filter div.road_search input{
    border: 2px solid #942092;
    border-radius: 10px;
    height: 30px;
    width: 100%;
    padding-left: 10px;
}

/* 히트맵 필터 */
.heatmap_filter {
    position: absolute;
    bottom: 10px;
    left: 10px;
    min-width: 500px;
    width: 50%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    /*padding: 20px 20px 40px 20px;*/
    padding: 20px 20px 10px 20px;
    z-index: 10;
}

.heatmap_filter > h3 {
}

.heatmap_filter .heatmap_year_filter {
}

.heatmap_filter .heatmap_month_ctl input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 50px;
    background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%);
    outline: none;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.heatmap_filter .heatmap_month_ctl input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 50px;
    background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%);
    outline: none;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.heatmap_filter2 {
    width: 300px;
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.heatmap_filter2 .month_select {
    margin-bottom: 20px;
}

#heatmapLegendContainer {
    position:absolute;
    width: 300px;
    bottom:0;
    right:0;
    z-index:1000;
}

/* 애니메이션 효과 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.heatmap_filter .heatmap_month_ctl input:focus {
    animation: pulse 0.5s ease-in-out;
}

.heatmap_filter .heatmap_month_ctl input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #ffffff 100%);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    border: 3px solid white;
    transition: all 0.2s ease;
}

.heatmap_filter .heatmap_month_ctl input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.heatmap_filter .heatmap_month_ctl input::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

.heatmap_filter .heatmap_month_ctl input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    border: 3px solid white;
    transition: all 0.2s ease;
}

.heatmap_filter .heatmap_month_ctl input::-moz-range-track {
    height: 8px;
    border-radius: 50px;
    background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%);
    border: none;
}

.heatmap_filter .heatmap_month_ctl > ul {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    gap: 5px;
    top: 10px;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    top: -40px;
}

.heatmap_filter .heatmap_month_ctl > ul > li {
    color: #666;
    font-weight: 800;
    text-align: center;
    min-width: 20px;
    transition: all 0.2s ease;
    position: absolute;
    transform: translateX(-50%); /* 중앙 정렬 */
}

.heatmap_filter .heatmap_month_ctl > ul li.active {
    color: #78238d;
    font-weight: 700;
    transform: translateY(-2px);
}

.heatmap_filter .search_btn {
    margin: 0;
}
.heatmap_filter .heatmap_month_button {
    margin: 10px 0;
}

/* 기본 (off 상태) → 시작 버튼 */
#heatmapPlayBtn::before {
    content: '▶';   /* 재생 아이콘 */
    font-size: 16px;
}

/* on 상태 → 정지 버튼 */
#heatmapPlayBtn.on::before {
    content: '⏸';   /* 일시정지 아이콘 */
    font-size: 16px;
}

.heatmap_filter .heatmap_month_button span{
    cursor: pointer;
    padding: 4px 20px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: #fff;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);
    background-size: 200% auto;
    text-align: center;
    transition: 0.5s;
}

.heatmap_filter .heatmap_month_button span:hover {
    background-position: right center;
}

#btnHeatmapOpen {
    cursor: pointer;
    padding: 4px 20px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: #fff;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);
    background-size: 200% auto;
    text-align: center;
    transition: 0.5s;
    border: none;
}

#btnHeatmapOpen:hover{
    background-position: right center;
}



/*column_tab*/

.column_tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.column_tab li {
    display: flex;
    justify-content:center;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 2px;
    margin: 5px;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #828282;
    cursor: pointer;
}

.column_tab li:hover {
    padding: 2px;
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
}

/*row_tab*/

.disable_month {
    opacity: 0.5;
    pointer-events: none;
}

.row_tab {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 200px;
    HEIGHT: 100%;
    width: 100%;
}

.row_tab li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    min-width: 70px;
    height:30px;
    padding: 2px;
    margin: 5px;
    background-color: #fff;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #828282;
    cursor: pointer;
}

.row_tab li:hover {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
}

.row_tab li span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.row_group_tab {
    display: flex;
}

.row_group_tab {
    display: flex;
    gap: 12px;
}

.row_group_tab .column_tab {
    flex: 1;
    justify-content: flex-start;
}

/*select style*/

.select_style {
    position:relative;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    border-radius: 30px;
    padding: 2px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
    /*margin: 5px;*/
}

.select_style select {
    border: none;
    width: 90%;
    height: 40PX;
    padding: 6PX;
    font-weight: bold;
    background: none;
}

.select_style select:focus {
    outline: none;
}

.select_style2 {
    position:relative;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    border-radius: 30px;
    padding: 2px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
    margin: 3px;
}

.select_style2 select {
    border: none;
    width: 100%;
    height: 30PX;
    padding: 6PX;
    font-weight: bold;
    background: none;
}

.select_style2 select:focus {
    outline: none;
}

/*------------*/

.mh_200 {
    max-height: 250px;
}

.search_btn {
    height: 40px;
    margin: 20px;
    border-radius: 20px;
    background: linear-gradient(to right, #142C78 0%,  #942092 50%, #142C78 100%);
    background-size: 200% auto;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: 0.5s;
}

.search_btn:hover {
    background-position: right center;
}

.float_chart {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 0 10px 10px 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: 400px;
    display: none;
    transition: all 0.3s;
}

.float_chart .btn_hide {
    position: absolute;
    left: -25px;
    top: 60%;
    transform: translate(0, -50%);
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    width: 20px;
    cursor: pointer;
}

.float_chart .btn_hide::after {
    content: "▶";
    color: #7a7a7a;
    font-size: 12px;
}

.float_chart.hide .btn_hide::after {
    content: "◀";
    color: #000000;
    font-size: 12px;
}

.float_chart.hide .btn_hide {
    border: 2px solid #942092;
}

.float_chart.hide {
    transform: translate(calc(100% + 10px), 0);
}

.float_chart.open {
    display: block;
}

.float_chart ul {
    position: absolute;
    left: -115px;
    /*     margin: 20px; */
    padding: 5px;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: #f5f5f5;
    border-radius: 10px 0 0 10px;
}

.float_chart ul li {
    width: 100px;
    text-align: center;
    margin: 5px;
    padding: 10px 0px;
}

.float_chart .tabList li {
    cursor: pointer;
}

.float_chart .tabList li:hover {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.float_chart .tabList li.select {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.float_chart .tabList li.select span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.float_chart .tabList li span {
    color: #828282;
}

.float_chart .tabList li:hover span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.float_chart .titleTab li {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.float_chart .titleTab li span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chart_bar {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: calc(100% - 20px);
    border-radius: 0 10px 10px 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: 400px;
    display: none;
    transition: all 0.3s;

    flex-direction: column;
}

.chart_bar .btn_hide {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translate(0, -50%);
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    width: 20px;
    cursor: pointer;
}

.chart_bar .btn_hide::after {
    content: "▶";
    color: #7a7a7a;
    font-size: 12px;
}

.chart_bar.hide .btn_hide::after {
    content: "◀";
    color: #000000;
    font-size: 12px;
}

.chart_bar.hide .btn_hide {
    border: 2px solid #942092;
}

.chart_bar.hide {
    transform: translate(calc(100% + 10px), 0);
}

.chart_bar.open {
    display: flex;
}

.chart_bar > ul {
    position: absolute;
    left: -115px;
    /*     margin: 20px; */
    padding: 5px;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: #f5f5f5;
    border-radius: 10px 0 0 10px;
}

.chart_bar > ul li {
    width: 100px;
    text-align: center;
    margin: 5px;
    padding: 10px 0px;
}

.chart_bar .tabList li {
    cursor: pointer;
}

.chart_bar .tabList li:hover {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chart_bar .tabList li.select {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chart_bar .tabList li.select span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chart_bar .tabList li span {
    color: #828282;
}

.chart_bar .tabList li:hover span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chart_bar .titleTab li {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chart_bar .titleTab li span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chart_scroll {
    display: flex;
    /* margin-right: 20px; */
    padding: 10px;
    padding-bottom: 0;
    /* height: calc(100vh - 200px); */
    height: 100%;
    /* overflow-y:scroll; */
    flex-wrap: wrap;
    align-content: flex-start;
}

.tab_chart .chart_scroll {
    display: none;
}

.tab_chart .chart_scroll.open {
    display: flex;
}

.chart_scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
    border-radius: 10px;
}

.chart_scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #092D76 0%, #942092 100%);
}

/*------스크롤 style-----*/

.scroll_style {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    padding-right: 10px;
    padding-bottom: 0;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}

.scroll_auto {
    overflow-y: auto!important;
    margin: 5px;
}

.side_header {
    /*box-shadow: rgb(198 201 205 / 36%) 0px 1px 20px 0px;*/
}


.scroll_style::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
    border-radius: 10px;
}

.scroll_style::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #092D76 0%, #942092 100%);
}

.scroll_style2 {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    margin-right: 10px;
    padding-right: 10px;
    padding-bottom: 0;
    height: calc(100% - 20px);
    flex-wrap: wrap;
    align-content: flex-start;
}

.scroll_style2::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
    border-radius: 10px;
}

.scroll_style2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #092D76 0%, #942092 100%);
}
/*----------------------*/

.chart_box {
    padding: 6px;
    border-radius: 10px;
    background-color: #fff;
}

.chart_content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    /*max-height: 250px;*/
    height: 193px;
    padding: 10px;
}

.chart_box.col6 {
    width: 50%
}
.chart_box.col12 {
    width: 100%;
    margin: 8px;
}

.weather_box .weather_table {
    color: #212529;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
    width: 100%;
}

.weather_box .weather_table.hide {
    display: none;
}

.weather_box .weather_table td img {
    width: 25px;
}
.weather_box .weather_table td, .weather_box .weather_table th {padding: 10px 0px; vertical-align: middle;}
.weather_box .weather_table tr {border-bottom: 1px solid #F2F2F2;}
.weather_box .weather_table tr:last-child {border-bottom: none;}

.weather_table thead th {
    color: #808080;
}

.weather_box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: left;
    margin: 0px 20px;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.chart_box.weather_box.col12 {}

.weather_box .weather_box_header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.weather_box_header .btn_weather_hide {
    margin-left: auto;
    border: none;
    background-image: url(../../images/up_arrow.svg);
    background-size: cover;
    width: 15px;
    height: 15px;
    background-color: transparent;
    cursor: pointer;
}

.weather_box_header .btn_weather_hide:focus {
    outline: none;
}

.weather_box_header .btn_weather_hide.on {
    background-image: url(../../images/down_arrow.svg);
}

.weather_box .weather_box_header > ul {
    display: flex;
    align-items: center;
    color: #808080;
    text-align: right;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
    gap: 5px;
}

.weather_box .weather_box_header > p {
    color: #212529;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 16px */
    letter-spacing: -0.48px;
    margin-right: 10px;
}

.chart_box h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: bold;
    /*height: 24px;*/
}

.chart_box .chart_source {
    font-size: 10px;
    color: #808080;
    margin-left: auto;
    height: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
}

.chart_box .download {
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

.chart_box .information {
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

.chart_graph {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: calc(100% - 30px);
    /*background-color: #f5f5f5;*/
    border-radius: 10px;
}
.chart_graph_modal {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 600px;

     height: 160px;
    /*background-color: #f5f5f5;*/
    border-radius: 10px;
}

.chart_remark {
    display: none;
    justify-content: left;
    align-items: start;
    width: 100%;
    height: calc(100% - 30px);
    /*background-color: #f5f5f5;*/
    border-radius: 10px;
    background-color: #f2f2f2;
    padding: 10px;
}

.filt2_lay {
    width: 100%;
    padding: 0 10px;
}

.filt2_box {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.filt2_box h4 {
    font-weight: bold;
    color: #000;
    margin-top: 2.5px;
    margin-left: 5px;
    text-align: center;
}

.filt2_box p {
    /*display: flex;*/
    /*justify-content: flex-end;*/
    align-items: center;
    font-size: 24px;
    color: #828282;
    margin-top: -2px;
    text-align: center;
    /*margin-right: 5px;*/
}

.filt2_l {
    width: 40% !important;
    height: 100%;
    padding: 10px;
    margin: 5px;
}

.filt2_r {
    width: 60% !important;
    height: 100%;
    padding: 10px;
    margin: 5px;
}

.filt2_title {
    display: none;
    visibility: hidden;
    width: 175px;
    font-weight: bold;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.filt2_title.open {
    display: flex;
    visibility: visible;
    width: 100%;
    font-weight: bold;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #092D76 0%, #942092 40%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-items: center;
}

.filt2_table {
    display: none;
    visibility: hidden;
    margin: auto;
    width: 100%;
    text-align: center;
}

.filt2_table.open {
    display: table;
    visibility: visible;
    margin: auto;
    width: 100%;
    text-align: center;
}

.filt2_table thead {
    font-weight: bold;
}

.filt2_table th {
    width: 33%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #828282;
}

.m_blue {
    color: #06306B;
}

.f_red {
    color: #941B85;
}

.filt2_table thead  tr:first-child > th:first-child {
    line-height: normal;
    border-left: none;
    text-align: center;
    vertical-align: middle;
}

.filt2_table th:last-child {
    border-right: none;
}

.filt2_table tbody tr {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdcdc;
    color: #8d8d8d;
    font-size: 14px;
}

.filt2_table tbody tr td {
    border-right: 1px dashed #dcdcdc;
}

.filt2_table tbody tr td:first-child {
    font-weight: bold;
}

.filt2_table tbody tr td:last-child {
    border-right: none;
}


.move_data_source {
    display: none;
    width: 200px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    color: #828282;
    font-size: 12px;
    text-align: left;
    z-index: 1;
}
.move_data_source.open {
    display: block;
}


.data_source {
    width: 230px;
    position: absolute;
    bottom: 0px;
    right: 405px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    color: #828282;
    font-size: 12px;
    text-align: left;
}

.chart_legend {
    display: none;
}

.chart_legend.open {
    display: block;
}

.legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 3;
    /*width: 200px;*/
    padding: 10px;
    /*font-family: Arial, sans-serif;*/
    /*color: #333;*/
    /*margin-top: 20px;*/
}

.legend-title {
    display: flex;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.legend-sub-title {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 12px;
}

.legend-color-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 150px;
}

.color-bar {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 50px;
    height: 150px;
    margin: 10px;
    /*border: 1px solid #333;*/
}

.color-bar div {
    flex: 1;  /* 모든 색상 블록이 같은 크기 */
}

.color-step-1 { background-color: rgb(156, 0, 0, 0.7); }
.color-step-2 { background-color: rgb(198, 0, 0, 0.7); }
.color-step-3 { background-color: rgb(227, 0, 0, 0.7); }
.color-step-4 { background-color: rgb(255, 0, 0, 0.7); }
.color-step-5 { background-color: rgb(255, 54, 54, 0.7); }
.color-step-6 { background-color: rgb(255, 107, 107, 0.7); }
.color-step-7 { background-color: rgb(255, 161, 161, 0.7); }
.color-step-8 { background-color: rgb(255, 183, 183, 0.7); }
.color-step-9 { background-color: rgb(255, 206, 206, 0.7); }
.color-step-10 { background-color: rgb(255, 228, 228, 0.7); }

.color-step-1-road { background-color: rgb(235, 119, 108, 0.7); }
.color-step-2-road { background-color: rgb(248, 141, 112, 0.7); }
.color-step-3-road { background-color: rgb(240, 159, 110, 0.7); }
.color-step-4-road { background-color: rgb(243, 182, 115, 0.7); }
.color-step-5-road { background-color: rgb(240, 204, 117, 0.7); }
.color-step-6-road { background-color: rgb(239, 218, 120, 0.7); }
.color-step-7-road { background-color: rgb(225, 221, 129, 0.7); }
.color-step-8-road { background-color: rgb(195, 204, 121, 0.7); }
.color-step-9-road { background-color: rgb(157, 188, 112, 0.7); }
.color-step-10-road { background-color: rgb(118, 166, 101, 0.7); }

.legend-values {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    /*width: 140px;*/
    height: 150px;
    margin: 10px;
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*flex-direction: column;*/
    /*text-align: center;*/
    /*width: 150px;*/
    /*height: 150px;*/
    font-size: 12px;
    /*margin: 10px;*/
}

.legend-values div {
    flex: 1;
}


.legend-title.spot {
    justify-content: flex-start;
}


.legend-color-container.spot {
    display: flex;
    flex-direction: column-reverse; /* 세로 방향 반전 */
    height: 29px;
}

.color-bar.spot {
    display: flex;
    width: 260px;
    flex-direction: row-reverse; /* 가로 방향 반전 */
    margin: 10px 0 0 0;
}

.legend-values.spot {
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    height: 0;
    margin: 2px 0;
    font-size: 12px;
}

.legend-values.spot .max_cnt{
    justify-content: flex-end;
}

.legendContainer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 두 블록 사이 간격 */
}

.categoryLegend, .dataTypeLegend {
    background: rgba(255,255,255,1);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.dataTypeLegend {
    width: 120px;
}

.categoryLegend p, .dataTypeLegend p {
    margin: 0 0 7px 0;
    font-weight: bold;
    font-size: 14px;
}

.dataTypeLegend label {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.categoryLegend .legendItems {
    display: flex;
    align-items: center;
    gap: 16px;
}

.categoryLegend label {
    display: flex;
    align-items: center;
    cursor: default;
    font-size: 14px;
}

.legend-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 6px;
}

.legendItems img{
    width:24px;
    height:24px;
    vertical-align:middle;
    margin-right:4px;
}

.dataTypeLegend input {
    margin-right: 3px;
}

.dataTypeLegend label img {
    width: 24px;
    height: 24px;
}

.legendContainer .btn_hide {
    position: absolute;
    right: -8%;
    top: 85%;
    transform: translateY(-50%);
    height: 60px;
    width: 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.legendContainer .btn_hide::after {
    content: "◀";
    color: #7a7a7a;
    font-size: 12px;
}

.categoryLegend.hide + .btn_hide::after {
    content: "▶";
    font-size: 10px;
}

.categoryLegend.hide .legendItems {
    display: none;
}

.categoryLegend.hide p {
    margin: 0;
}

.legendContainer .categoryLegend.hide + .btn_hide {
    width: 16px;
    height: 32px;
    right: -17%;
    top: 91%;
}

.categoryLegend.open {
    display: block;
}

.calendar_popup {
    position: absolute;
    top: 55%;
    left: calc(100% + 10px);
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
    min-width: 300px;
}

.calendar_popup.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.calendar_info {
    background: #f1f1f1;             /* 바깥 회색 */
    border-radius: 20px 20px 0 0;
    padding: 8px 8px;
    display: flex;
    justify-content: flex-end;       /* 안쪽 영역 오른쪽 정렬 */
    align-items: center;
}

.info_area {
    background: #fff;                /* 안쪽 흰색 */
    border-radius: 14px;             /* 바깥보다 더 둥글게 */
    padding: 6px 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background 0.2s, transform 0.2s;
}

.info_area:hover {
    background: #f9f9ff;             /* hover 시 은은하게 */
}

.info_title {
    color: black;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.festival_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.festival_popup {
    position: absolute;
    min-width: 300px;
    height: 370px;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    background: white;
}

/* 상단 회색 영역 */
.festival_popup .festival_header {
    background-color: #f1f1f1;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 제목 */
.festival_popup .festival_title {
    font-weight: bold;
}

/* 둥근 닫기 버튼 */
.festival_popup .close_btn {
    background: white;
    border-radius: 14px;
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.festival_popup .close_btn:hover {
    background: #f9f9f9;
}

/* 내용 영역 */
.festival_popup .festival_body {
    padding: 20px 20px;
    background: #fff;
    max-height: 310px;
    overflow-y: auto;
}

.festival_popup .festival_body::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
    border-radius: 10px;
}

.festival_popup .festival_body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #092D76 0%, #942092 100%);
}

.festival_popup .festival_body .festival_item_h3{
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 3px;
}

.festival_popup .festival_body .festival_item_h4{
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 3px;
}

.festival_item {
    margin-bottom: 12px;
}

.festival_name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.festival_icon {
    width: 10px;
    height: 10px;
}

.festival_detail {
    padding: 8px 15px 10px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 3px;
}

.festival_label {
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.8;
}

/*.festival_value {
    display: inline;
    word-break: break-word;
    white-space: normal;
}*/
.festival_value {
    display: inline-block;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.5;
}

.calendar_header {
    padding: 10px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left_section {
    display: flex;
    align-items: center;
}

.year_nav, .month_nav_controls {
    display: flex;
    align-items: center;
}

.year_month_display {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.year_month_arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.year_nav, .month_nav_controls {
    position: relative; /* dropdown 기준 잡기 */
}

.dropdown_menu {
    position: absolute;
    top: 100%;  /* 토글 버튼 바로 아래 */
    left: 0;
    margin-top: 5px;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 1000; /* 겹침 방지 */
    width: 100%;   /* 토글 영역 너비에 맞춤 */
    display: none; /* 기본 숨김 */
    max-height: 170px;
    overflow: auto;
}

.dropdown_item {
    padding: 6px 8px;
    cursor: pointer;
    text-align: center;
}

.dropdown_item:hover {
    background: #f0f0f0;
}

.nav_btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.2s;
    font-size: 12px;
    width: 20px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav_btn:hover {
    background: #e9ecef;
    color: #495057;
}

.month_nav_btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month_nav_btn:hover {
    background: #e9ecef;
    color: #495057;
}

.current_year, .current_month_only {
    font-weight: 600;
    font-size: 16px;
    color: black;
    text-align: left;
    min-width: 45px;
}

.right_section {
    display: flex;
    align-items: center;
    transform: translateX(10px);
}

.dropdown_arrow {
    margin-left: 5px;
    cursor: pointer;
    display: flex;
}

.calendar_body {
    padding: 6px 16px;
}

.calendar_grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.day_header {
    text-align: center;
    padding: 8px 4px;
    font-size: 16px;
    font-weight: 600;
    color: black;
}

.day_header.sunday { color: #dc3545; }
.day_header.saturday { color: #007bff; }

.day_cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    background: white;
    margin: 0;
}

.day_cell:hover {
    background: #5A268633;
}

.day_cell.other_month {
    color: #dee2e6;
}

.day_cell.today {
    background: #092D76;
    color: white;
    font-weight: 600;
}

.day_cell.selected {
    background: #092D76;
    color: white;
    font-weight: 600;
}

.day_cell.in_range {
    background: #5A268633;
    color: #092D76;
}

.day_cell.range_start {
    background: #092D76;
    color: white;
    font-weight: 600;
}

.day_cell.range_end {
    background: #092D76;
    color: white;
    font-weight: 600;
}

/* 주말 날짜 색깔 */
.day_cell.sunday {
    color: #dc3545;
}

.day_cell.saturday {
    color: #007bff;
}

.day_cell.holiday {
    color: #dc3545;
}

/* 선택된 날짜나 범위 내 날짜는 기본 색깔 유지 */
.day_cell.selected,
.day_cell.range_start,
.day_cell.range_end {
    color: white !important;
}

.calendar_footer {
    padding: 10px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected_range {
    font-size: 14px;
    color: #6c757d;
}

.confirm_btn {
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.confirm_btn:hover {
    filter: brightness(1.1);
}

.confirm_btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}
/*------------------ 분할지도 ------------------*/

.sub_btn_split {
    position: absolute;
    left: 500px;
    top: 30px;
    z-index: 5;
}

.sub_filter {
    position: absolute;
    top: 10px;
    left: 10px;
    /* width: 40vh; */
    /* height: 30vh; */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 2;
}

.sub_filter {
    display: none;
    visibility: hidden;
}

.sub_filter.open {
    display: block;
    visibility: visible;
}

.sub_filter .sub_filter_cont .sub_sel_box .sub_select_tab {
    display: none;
}

.sub_filter .sub_filter_cont .sub_sel_box.open .sub_select_tab{
    display: block;
}

.sub_filter_cont .sub_option_wrap {
    display: none;
}

.sub_filter_cont .sub_option_wrap.select {
    display: block;
}

.sub_filter_menu {
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
    border-bottom: 1px dashed #828282;
    margin: 0px 20px 15px;
}

.sub_filter_menu ul li.select span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_filter_menu ul li.select {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sub_filter_menu ul {
    margin-top: 20px;
    padding: 10px 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.sub_filter_btn.type_btn {
    display: none;
}

.sub_filter_menu ul li {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: center;
    padding: 10px 10px;
    color: rgb(121, 121, 121);
    margin-right: 10px;
}

.sub_filter_menu ul li:last-child {
    margin-right: 0;
}

.sub_filter_menu ul li:hover {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sub_filter_menu ul li:hover span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_filter_btn {
    margin: 15px 0;
    padding: 0px 20px;
    width: 100%;
}

.sub_filter_btn ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.sub_filter_btn ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 48%;
    height: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #828282;
    /*padding: 2px;*/
}

.sub_filter_btn ul li img {
    margin-right: 10px;
}

.sub_filter_btn ul li:hover {
    box-sizing: border-box;
    padding: 2px;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.sub_filter_cont li.select{
    box-sizing: border-box;
    padding: 2px;
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #fff;
    font-weight: bold;
}

.sub_filter_cont li.select:hover {
    background-image: linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #fff;
    font-weight: bold;
}

.sub_filter_select {
    margin: 0px 20px;
    /* padding-bottom: 20px; */
    border-bottom: 1px solid #E6E6E6;
}

.sub_sel_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sub_sel_box h3 {
    width: 30%;
    font-size: 18px;
    font-weight: bold;
    color: #4b4b4b;
    margin-left: 15px;
    margin-right: 15px;
}

.sub_sel_box.open .sub_select_section {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.sub_sel_box.open .sub_select_section img:nth-child(even) {
    display: none;
}

.sub_sel_box.open .sub_select_section img:nth-child(odd) {
    display: block;
    rotate: 0deg;
}

.sub_sel_box.open p {
    color: #000;
}

sel_box.active {
    color: #000;
}

.sub_align_section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.sub_select_section {
    position:relative;
    width: 100%;
    padding: 2px;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub_select_section:hover {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.sub_select_section p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #828282;
}

.sub_select_section img {
    margin-right: 10px;
}

.sub_select_section img:nth-child(odd) {
    display: none;
}

.sub_select_section:hover img:nth-child(even) {
    display: none;
}

.sub_select_section:hover img:nth-child(odd) {
    display: block;
    rotate: 180deg;
}

.sub_select_section open img:nth-child(odd) {
    rotate: 0;
}

.sub_select_section:hover p {
    color: #000;
}

.sub_select_tab {
    position:absolute;
    left: 400px;
    min-width: 300px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    font-size: 14px;
}

.sub_select_tab h4 {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.sub_under_line {
    width: 100%;
    border-bottom: 1px dashed #d8d8d8;
    padding: 0 20px;
    margin: 15px 0;
}

.sub_filter {
    transition: all 0.3s;
}

.sub_filter .sub_btn_hide {
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translate(-50%, 0);
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 20px;
    width: 60px;
    cursor: pointer;
}

.sub_filter .sub_btn_hide::after {
    content: "▲";
    color: #7a7a7a;
    font-size: 12px;
}

.sub_filter.hide .sub_btn_hide::after {
    content: "▼";
    color: #000000;
    font-size: 12px;
}

.sub_filter.hide .sub_btn_hide {
    border: 2px solid #942092;
}

.sub_filter.hide {
    height: 110px;
}

.sub_filter.hide .sub_cont_wrap {
    display: none;
}

.sub_filter.hide .sub_filter_menu {
    border: none;
}

.sub_filter div.sub_road_search {
    margin-bottom: 4px;
}
.sub_filter div.sub_road_search input{
    border: 2px solid #942092;
    border-radius: 10px;
    height: 30px;
    width: 100%;
    padding-left: 10px;
}

/*column_tab*/

.sub_column_tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sub_column_tab li {
    display: flex;
    justify-content:center;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 2px;
    margin: 5px;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #828282;
    cursor: pointer;
}

.sub_column_tab li:hover {
    padding: 2px;
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
}

/*row_tab*/

.sub_disable_month {
    opacity: 0.5;
    pointer-events: none;
}

.sub_row_tab {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 200px;
    HEIGHT: 100%;
    width: 100%;
}

.sub_row_tab li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    min-width: 70px;
    height:30px;
    padding: 2px;
    margin: 5px;
    background-color: #fff;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #828282;
    cursor: pointer;
}

.sub_row_tab li:hover {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
}

.sub_row_tab li span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.sub_row_group_tab {
    display: flex;
}

.sub_row_group_tab {
    display: flex;
    gap: 12px;
}

.sub_row_group_tab .sub_column_tab {
    flex: 1;
    justify-content: flex-start;
}

/*select style*/

.sub_select_style {
    position:relative;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    border-radius: 30px;
    padding: 2px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
    /*margin: 5px;*/
}

.sub_select_style select {
    border: none;
    width: 90%;
    height: 40PX;
    padding: 6PX;
    font-weight: bold;
    background: none;
}

.sub_select_style select:focus {
    outline: none;
}

/*------------*/

.sub_mh_200 {
    max-height: 250px;
}

.sub_search_btn {
    height: 40px;
    margin: 20px;
    border-radius: 20px;
    background: linear-gradient(to right, #142C78 0%,  #942092 50%, #142C78 100%);
    background-size: 200% auto;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: 0.5s;
}

.sub_search_btn:hover {
    background-position: right center;
}

.sub_chart_bar {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: calc(100% - 20px);
    border-radius: 0 10px 10px 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: 400px;

    display: none;
    transition: all 0.3s;
}

.sub_chart_bar .sub_btn_hide {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translate(0, -50%);
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    width: 20px;
    cursor: pointer;
}

.sub_chart_bar .sub_btn_hide::after {
    content: "▶";
    color: #7a7a7a;
    font-size: 12px;
}

.sub_chart_bar.hide .sub_btn_hide::after {
    content: "◀";
    color: #000000;
    font-size: 12px;
}

.sub_chart_bar.hide .sub_btn_hide {
    border: 2px solid #942092;
}

.sub_chart_bar.hide {
    transform: translate(calc(100% + 10px), 0);
}

.sub_chart_bar.open {
    display: block;
}

.sub_chart_bar ul {
    position: absolute;
    left: -115px;
    /*     margin: 20px; */
    padding: 5px;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: #f5f5f5;
    border-radius: 10px 0 0 10px;
}

.sub_chart_bar ul li {
    width: 100px;
    text-align: center;
    margin: 5px;
    padding: 10px 0px;
}

.sub_chart_bar .sub_tabList li {
    cursor: pointer;
}

.sub_chart_bar .sub_tabList li:hover {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sub_chart_bar .sub_tabList li.select {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sub_chart_bar .sub_tabList li.select span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_chart_bar .sub_tabList li span {
    color: #828282;
}

.sub_chart_bar .sub_tabList li:hover span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_chart_bar .sub_titleTab li {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sub_chart_bar .sub_titleTab li span {
    font-weight: 900;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_chart_scroll {
    display: flex;
    /* margin-right: 20px; */
    padding: 10px;
    padding-bottom: 0;
    /* height: calc(100vh - 200px); */
    height: 100%;
    /* overflow-y:scroll; */
    flex-wrap: wrap;
    align-content: flex-start;
}

.sub_tab_chart .sub_chart_scroll {
    display: none;
}

.sub_tab_chart .sub_chart_scroll.open {
    display: flex;
}

.sub_chart_scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
    border-radius: 10px;
}

.sub_chart_scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #092D76 0%, #942092 100%);
}

/*------스크롤 style-----*/

.sub_scroll_style {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    padding-right: 10px;
    padding-bottom: 0;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}

.sub_scroll_style::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
    border-radius: 10px;
}

.sub_scroll_style::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #092D76 0%, #942092 100%);
}
/*----------------------*/

.sub_chart_box {
    padding: 6px;
    border-radius: 10px;
    background-color: #fff;
}

.sub_chart_content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    max-height: 193px;
    height: 193px;
    padding: 10px;
}

.sub_chart_box.col6 {
    width: 50%
}
.sub_chart_box.col12 {
    width: 100%
}

.sub_chart_box h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 16px;
    font-weight: bold;
    /*height: 24px;*/
}

.sub_chart_box .sub_chart_source {
    font-size: 10px;
    color: #808080;
    margin-left: auto;
    height: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
}

.sub_chart_box .download {
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

.sub_chart_graph {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: calc(100% - 30px);
    /*background-color: #f5f5f5;*/
    border-radius: 10px;
}

.spot_row {
    display: flex;
    gap: 10px; /* 좌우 박스 간격 */
    margin-bottom: 10px;
    padding: 10px 20px 0px;
}

.spot_box {
    border-radius: 10px;
    text-align: center;
    font-family: Pretendard;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.spot_inner {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: 100%;
    text-align: left;
    font-family: Pretendard;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 비율 적용 */
.spot_left {
    /* flex: 7; */ /* 70% */
}

.spot_right {
    /* flex: 3; */ /* 30% */
    color: #808080;
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
}

.report_row {
    display: flex;
    gap: 10px; /* 좌우 박스 간격 */
    justify-content: flex-end;
    padding: 10px 20px 0px;
}

.report_box {
    /* 표준 */
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    cursor: pointer;
    /* 흰색 박스 */
    /* 살짝 그림자 */
    padding: 10px 20px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Pretendard;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.date_row {
    display: flex;
    padding: 0px 20px;
    /*margin-bottom: -15px;*/
    /*padding-bottom: 10px;*/
    justify-content: flex-end;
}

.date_row {}

.date_box {
    /* 흰색 박스 */

    /* 살짝 그림자 */





    /* 12px */
    color: #777;
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    padding: 0 10px;
}

.sub_filt2_lay {
    width: 100%;
    padding: 0 10px;
}

.sub_filt2_box {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.sub_filt2_box h4 {
    font-weight: bold;
    color: #000;
    margin-top: 2.5px;
    margin-left: 5px;
    text-align: center;
}

.sub_filt2_box p {
    /*display: flex;*/
    /*justify-content: flex-end;*/
    align-items: center;
    font-size: 24px;
    color: #828282;
    margin-top: -2px;
    text-align: center;
    /*margin-right: 5px;*/
}

.sub_filt2_l {
    width: 40% !important;
    height: 100%;
    padding: 10px;
    margin: 5px;
}

.sub_filt2_r {
    width: 60% !important;
    height: 100%;
    padding: 10px;
    margin: 5px;
}

.sub_filt2_title {
    display: none;
    visibility: hidden;
    width: 175px;
    font-weight: bold;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_filt2_title.open {
    display: block;
    visibility: visible;
    width: 175px;
    font-weight: bold;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub_filt2_table {
    display: none;
    visibility: hidden;
    margin: auto;
    width: 100%;
    text-align: center;
}

.sub_filt2_table.open {
    display: block;
    visibility: visible;
    margin: auto;
    width: 100%;
    text-align: center;
}

.sub_filt2_table thead {
    font-weight: bold;
}

.sub_filt2_table th {
    width: 33%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #828282;
}

.sub_m_blue {
    color: #06306B;
}

.sub_f_red {
    color: #941B85;
}

.sub_filt2_table thead  tr:first-child > th:first-child {
    line-height: normal;
    border-left: none;
    text-align: center;
    vertical-align: middle;
}

.sub_filt2_table th:last-child {
    border-right: none;
}

.sub_filt2_table tbody tr {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdcdc;
    color: #8d8d8d;
    font-size: 14px;
}

.sub_filt2_table tbody tr td {
    border-right: 1px dashed #dcdcdc;
}

.sub_filt2_table tbody tr td:first-child {
    font-weight: bold;
}

.sub_filt2_table tbody tr td:last-child {
    border-right: none;
}


.sub_data_source {
    width: 200px;
    position: absolute;
    bottom: 0px;
    right: 405px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    color: #828282;
}

.sub_legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 3;
    width: 200px;
    padding: 10px;
    /*font-family: Arial, sans-serif;*/
    /*color: #333;*/
    /*margin-top: 20px;*/
}

.sub_legend-title {
    display: flex;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.sub_legend-color-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 150px;
}

.sub_color-bar {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 50px;
    height: 150px;
    margin: 10px;
    /*border: 1px solid #333;*/
}

.sub_color-bar div {
    flex: 1;  /* 모든 색상 블록이 같은 크기 */
}

.sub_color-step-1 { background-color: rgb(235, 119, 108, 0.7); }
.sub_color-step-2 { background-color: rgb(248, 141, 112, 0.7); }
.sub_color-step-3 { background-color: rgb(240, 159, 110, 0.7); }
.sub_color-step-4 { background-color: rgb(243, 182, 115, 0.7); }
.sub_color-step-5 { background-color: rgb(240, 204, 117, 0.7); }
.sub_color-step-6 { background-color: rgb(239, 218, 120, 0.7); }
.sub_color-step-7 { background-color: rgb(225, 221, 129, 0.7); }
.sub_color-step-8 { background-color: rgb(195, 204, 121, 0.7); }
.sub_color-step-9 { background-color: rgb(157, 188, 112, 0.7); }
.sub_color-step-10 { background-color: rgb(118, 166, 101, 0.7); }

.sub_legend-values {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 150px;
    height: 150px;
    margin: 10px;
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*flex-direction: column;*/
    /*text-align: center;*/
    /*width: 150px;*/
    /*height: 150px;*/
    font-size: 12px;
    /*margin: 10px;*/
}

.sub_legend-values div {
    flex: 1;
}

.sub_box_style {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    width: 100%;
}

/* 달력 위 회색 바 전체 영역 */
.calendar-info-bar {
    position: absolute;
    top: -42px; /* 달력 위쪽으로 위치 */
    left: 0;
    right: 0;
    background: #f2f2f2;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    z-index: 9999;
}

/* 흰색 박스 + 그림자 + 아이콘과 텍스트 영역 */
.calendar-info-bar_img {
    background: #fff;
    display: flex;
    align-items: center;
    width: 40%;
    justify-content: center;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 2px 2px;
    font-weight: bold;
}

/* 아이콘 스타일 */
.calendar-info-bar_img img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.calendar-extra-info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 105%;
    background: white;
    padding: 8px 12px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/*----------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------데이터 공유---------------------------------------------------*/


.box_style {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    width: 100%;
}

.box_hover {
    padding: 2px;
}

.box_hover:hover {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.sub_layout {
    position:absolute;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px;
    display: flex;
    justify-content: space-between;

}

.sub_sidebar {
    width: 15%;
    height: 100%;
    margin-right: 20px;
    display: flex;
    justify-content: center;
}

.sub_sidebar ul {
    width: 100%;
    margin: 30px 20px;
}

.sub_sidebar ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 2px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    cursor: pointer;
    color: #828282;
}

.sub_sidebar ul li:hover {
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.sub_sidebar ul li:active {
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
}

.sub_sidebar ul li:active a {
    color: #fff!important;
}

.side_open {
    box-sizing: border-box;
    background-image: linear-gradient(to right, #142C78 0%,  #942092 100%);
    font-weight: bold;
}

.side_open:hover {
    background: linear-gradient(to right, #142C78 0%,  #942092 100%) !important;
}

.side_open a {
    color: #fff !important;
}

.sub_sidebar ul li a {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    text-decoration: none;
    color: #828282;
}

.sub_sidebar ul li a:hover {
    color: #000;
    font-weight: bold;
}

.sub_right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sub_title {
    width: 100%;
    height: 100px;
    min-height: 100px;
    margin-bottom: 20px;
    padding: 30px;

    /**/
    display: flex;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    align-items: center;
}

.sub_title h3 {
    /*width: 20%;*/
    height: 40px;
    font-size: 28px;
    font-weight: bold;
    margin-right: 30px;
    /*margin-bottom: 15px;*/
}

.sub_title p {
    height: 40px;
    line-height: 20px;
    color: #828282;
}

.sub_contents {
    width: 100%;
    height: 85%;
    padding: 30px;
    overflow: hidden;
}

.sub_con_bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
}

.bottom_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 30px;
}

.bottom_info h4 {
    /*font-size: 20px;*/
    margin-right: 10px;
    font-weight: bold;
}

.bottom_info h4::after {
    content: '|';
    margin-left: 10px;
    color: #d0d0d0;
}

.bottom_info p span {
    color: #787878;
}

.flex_column {
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: column;
}

.flex_column2 {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    flex-direction: column;
}

/* 영역분석 토클 버튼 */
.drag_btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 15px;
}

.drag_btn h3 {
    font-weight: bold;
    margin-right: 10px;
}

.drag_btn .toggle.drag_toggle {
    border-radius: 20px;
}
.drag_btn .toggle.drag_toggle .toggle-handle {
    height:30px;
    border-radius: 30px;
}

.drag_btn .toggle.drag_toggle .btn-default {
    color: #333;
    background-color: rgb(255, 255, 255);
    border-color: #ccc;
}

.drag_btn .toggle.drag_toggle .toggle-on {
    color: #333;
    background-color: rgba(131, 44, 210, 0.76);
    border-color: #ccc;
}

.drag_btn .toggle.drag_toggle .toggle-off {
    color: #333;
    background-color: rgb(126, 126, 126);
    border-color: #ccc;
    height: calc(85% - 20px);
    padding: 30px;
}

.sub_drag_btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 15px;
}

.sub_drag_btn h3 {
    font-weight: bold;
    margin-right: 10px;
}

.sub_drag_btn .toggle.drag_toggle {
    border-radius: 20px;
}
.sub_drag_btn .toggle.drag_toggle .toggle-handle {
    height:30px;
    border-radius: 30px;
}

.sub_drag_btn .toggle.drag_toggle .btn-default {
    color: #333;
    background-color: rgb(255, 255, 255);
    border-color: #ccc;
}

.sub_drag_btn .toggle.drag_toggle .toggle-on {
    color: #333;
    background-color: rgba(131, 44, 210, 0.76);
    border-color: #ccc;
}

.sub_drag_btn .toggle.drag_toggle .toggle-off {
    color: #333;
    background-color: rgb(126, 126, 126);
    border-color: #ccc;
    height: calc(85% - 20px);
    padding: 30px;
}

/*분석사례*/

/* 분석사례 상세 화면 전환- 2 ▶ 1 변경 */
.analysis_2 {
    display: none!important;
}
/*------------------------------*/

.card_align {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.card_style {
    width: 23%;
    min-width: 235px;
    height: 235px;
    background-color: #fff;
    margin: 10px 14px;
    cursor: pointer;
}

.card_style img {
    width: 100%;
    height: 67%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.card_text {
    width: 100%;
    height: 33%;
    padding: 15px;
}

.text_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 8px;
    color: #a9a9a9;
}

.card_text h3 {
    font-size: 20px;
    font-weight: bold;
}

.page_btn {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

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

.page_btn ul li {
    font-family: 'pretendard';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #828282;
    margin: 0 5px;
    cursor: pointer;
}

.page_btn ul li:hover {
    color: #fff;
    background-color: #942092;
}

.analysis_layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.analysis_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 20px 20px;
}

.analysis_title h3 {
    font-size: 24px;
    font-weight: bold;
}

.analysis_title p {
    color: #828282;
    font-size: 14px;
}

.analysis_part {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.a_part_left {
    width: 30%;
}

.a_part_left img {
    width: 100%;
    height: 310px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.analysis_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.analysis_info h4 {
    width: 20%;
    font-size: 20px;
    font-weight: bold;
}

.analysis_info p {
    width: 70%;
    height: 40px;
    border-radius: 20px;
    padding: 2px;
    /*background-image: linear-gradient(#fff, #fff),*/
    /*linear-gradient(to right, #142C78 0%,  #942092 100%);*/
    /*background-origin: border-box;*/
    /*background-clip: content-box, border-box;*/
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.a_part_right {
    width: 65%;
}

.a_part_right h4 {
    font-size: 20px;
    font-weight: bold;
}

.a_part_right table {
    margin-bottom: 20px;
}

.a_part_right table tbody {
    max-height: 120px;
    overflow-y: scroll;

}

.a_part_right table tbody tr {
    cursor: auto;
}

.a_part_right table tbody tr:hover {
    background-color: transparent;
    font-weight: normal;
}

.a_part_right table tbody tr:hover td {
    color: #000;
    font-weight: normal;
}

.analysis_method, .analysis_manager {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding-left: 20px;
    display: flex;
    align-items: center;
}

.analysis_method {
    position:relative;
    height: 80px;
    margin: 10px 0 30px 0;
}

.analysis_method p {
    position: absolute;
    right: 0;
    bottom: -20px;
    font-size: 14px;
    color: #828282;
}

.analysis_manager {
    height: 50px;
    margin: 10px 0 20px 0;
}

.ACD_thead {
    margin-right: 16px;
}

.ACD_tbody {
    height: 160px;
    max-height: 160px;
}

/*데이터 공유 게시판*/

/*상세 화면 교체 1 ◀▶ 2*/
.shareboard_2 {
    display: none!important;
}

.search_align {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

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

.search_select {
    width: 150px;
    height: 50px;
    border-radius: 30px;
}

.search_bar {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
}

.search_bar input {
    display: block;
    width: 400px;
    height: 50px;
    margin-right: 10px;
    padding: 2px;
    border-radius: 25px;
    outline: none;
    border: none;
    box-sizing: border-box;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    text-indent: 25px;
}

.search_bar input::placeholder {
    color: #828282;
}

.search_bar button {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);
    background-size: 200% auto;
    transition: 0.5s;
    outline: none;
    border: none;
    cursor: pointer;
}

.search_bar button:hover {
    background-position: right center;
}

.cate_parti {
    position:relative;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    min-height: 167px;
    max-height: 167px;
}

.cate_parti .under_line {
    margin: 10px 0;
}

.parti_btn {
    width: 150px;
    height: 50px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 25px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #142C78 0%,  #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    font-weight: bold;
}

.parti_btn:hover {
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
    color: #fff;
}

.parti_btn_active {
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
    color: #fff;
}


.category_section {
    width: 100%;
    /* 	padding: 10px; */
    display: flex;
    justify-content: space-between;
}

.category_section h3 {
    width: 15%;
    margin: 10px;
    font-size: 20px;
    font-weight: bold;

}

.category_style {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.category_style ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 84px;
    max-height: 84px;
}

.category_style ul li {
    min-width: 89px;
    height: 36px;
    padding: 2px;
    margin: 3px 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    cursor: pointer;
    color: #828282;
}

.category_style ul li:hover {
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.category_style ul li.active {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
    color: #fff;
    font-weight: bold;
}

.cate_select {
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.category_style ul li span {
    display: block;
    padding: 0 10px;
}

.table_box {
    width: 100%;
    height: 293px;
}

.ur_table_box {
    width: 100%;
    height: 470px;
}

.table_style {
    width: 100%;
    text-align: center;
    line-height: 40px;
    margin-top: 20px;
}

.table_style thead {
    height: 40px;
    background: linear-gradient(to right, #142C78 0%,  #942092 100%);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
}

.table_style thead th {
    border-right: 1px solid #E6E6E6;
}

.table_style thead th:first-child {
    border-radius: 20px 0 0 20px;
}

.table_style thead th:last-child {
    border-radius: 0 20px 20px 0;
    border-right: none;
}

.table_style tbody tr {
    border-bottom: 1px solid #e6e6e6;
    cursor: pointer;
}


.table_style tbody tr:hover {
    background: #f0f0f0;
}

.table_style tbody tr:hover td {
    color: #932091;
    font-weight: bold;
}

.table_style td {
    height: 40px;
    border-right: 1px solid #e6e6e6;
}

.table_style td:nth-child(1) {
    width: calc(20% - 2px);
}

.table_style td:last-child {
    border-right: none;
}

/*btn setting*/

.btn_lay {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pr_20 {
    padding-right: 20px;
}

.btn_lay_center {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_style {
    height: 40px;
    width: 180px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 20px;
    background: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: pointer;
    color: #828282!important;
    border: none;
}

.btn_style:hover {
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000!important;
    font-weight: bold;
    text-decoration: none;
}

.btn_style:active {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
    color: #fff!important;
    font-weight: bold;
    text-decoration: none;
}

.btn_style:focus {
    outline: none;
    border: none;
}

/*----------------------------*/

/*btn_style 2*/

.btn_style2 {
    height: 40px;
    width: 180px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 20px;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);
    background-size: 200% 100%;
    transition: 0.5s;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: pointer;
    color: #fff!important;
    border: none;
}

.btn_style2:hover {
    background-position: right center;
    font-weight: bold;
    text-decoration: none;
}

.btn_style2:active {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
    color: #fff!important;
    font-weight: bold;
    text-decoration: none;
}

.btn_style2:focus {
    outline: none;
    border: none;
}


/*------------*/

/*데이터 공유 게시판 상세 화면*/

.shareboard_title {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.st_left p {
    font-size: 14px;
    color: #828282;
    margin-bottom: 10px;
}

.st_left h4 {
    font-size: 24px;
    font-weight: bold;
}

.st_right p {
    color: #828282;
    font-size: 14px;
    text-align: right;
    margin-bottom: 5px;
}

.st_right span {
    margin-left: 5px;
    color: #000;
    font-weight: bold;
}

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

.st_flex p {
    margin-left: 10px;
}

.shareboard_layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.shareboard_lay1 {
    width: 30%;
}

.shareboard_lay1 h4 {
    text-align: right;
}

.shareboard_lay2 {
    width: 70%;
    display: flex;
    justify-content: space-between;
}

.shareboard_lay2 h4 {
    width: 15%;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    line-height: 40px;
}

.shareboard_lay2 div {
    width: 80%;
    height: 160px;
    padding: 2px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    /*background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);*/
    /*background-origin: border-box;*/
    /*background-clip: content-box, border-box;*/
}

.shareboard_lay2 div p {
    width: 100%;
    height: 100%;
    padding: 15px;
    overflow: auto;
}

.shareboard_lay3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

.shareboard_lay3 h4 {
    width: 6%;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    line-height: 40px;
}

.shareboard_lay3 div {
    width: 91%;
    height: 160px;
    padding: 2px;
    border-radius: 10px;
    /*background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);*/
    /*background-origin: border-box;*/
    /*background-clip: content-box, border-box;*/
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.shareboard_lay3 div p {
    width: 100%;
    height: 100%;
    padding: 15px;
}

.sb_caution {
    color: #828282;
    font-size: 14px;
    margin-left: 150px;
}

.sb_caution p {
    margin: 2px 0px;
    word-break: keep-all;
}

/*.sb_btn {*/
/*	padding-right: 20px;*/
/*}*/

/*.sb_btn button:nth-child(2) {*/
/*	background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);*/
/*    background-size: 200% 100%;*/
/*	transition: 0.5s;*/
/*    color: #fff;*/
/*}*/

/*.sb_btn button:nth-child(2):hover {*/
/*    background-position: right center;*/
/*}*/

/*---------------------*/

/*민간데이터 활용 신청 - 신청 · 상세 페이지 */
.request_2 .user_info {
    margin-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0px 10px;
}

.request_2 .user_section,
.request_2 .info_section {
    padding: 20px 0 0 0;
}

.request_3 .user_section .section_align,
.request_3 .info_section .section_align {
    padding: 0;
}

.request_2 .user_section .section_align h4::after,
.request_3 .user_section .section_align h4::after {
    display: none;
}

.request_2 .info_section .section_align h4::after,
.request_3 .info_section .section_align h4::after {
    display: none;
}

.request_2 .info_section .section_align:nth-child(4) ,
.request_2 .info_section .section_align:nth-child(5) {
    align-items: flex-start;
    line-height: 40px;
}

.request_3 .info_section .section_align:nth-child(4) ,
.request_3 .info_section .section_align:nth-child(5) {
    align-items: flex-start;
    line-height: 40px;
}

.request_2 .info_section .section_align textarea {
    width: 70%;
    height: 85px;
}

.request_3 .info_section .section_align textarea {
    width: 70%;
    height: 130px;
}

.request_3 .info_section .section_align textarea:focus {
    font-weight: bold;
}

.info_section .section_align textarea {
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px 30px;
    resize: none;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    outline-color: #142C78;
    line-height: normal;
}

.info_section .section_align textarea::placeholder {
    color: #d2d2d2;
}

.request_answer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.request_answer h4 {
    width: 9.5%;
    font-size: 18px;
    text-align: right;
    font-weight: bold;
}

.request_answer div {
    width: 85%;
    display: flex;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 20px 30px;
    margin-right: 35px;
    box-sizing: border-box;
    border-radius: 10px;
}

.filtered {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
    /*background-size: 200% 100%;*/
    /*transition: 0.5s;*/
    color: #fff!important;
    font-weight: bold;
}

.filtered:hover {
    color: #fff!important;
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
    /*background-size: 200% 100%;*/
    /*transition: 0.5s;*/
    /*background-position: right center;*/
}

/*---------------------------------*/


/*데이터 분석 신청*/

.dp_none {
    display: none!important;
}

.app_intro {
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 30px;
}

.app_banner {
    position: relative;
    width: 100%;
    /*height: 350px;*/
    margin-bottom: 20px;
}

.app_banner img {
    width: 100%;
    height: 100%;
    background-size: cover;
}

.app_bannertext h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 30px;
}

.app_info {
    width: 100%;
    height: 100%;
    padding: 30px;
    /*margin-bottom: 30px;*/
}

.app_info ul {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 15px;
}

.app_info ul li {
    width: 100%;
    border-radius: 0 15px 15px 15px;
    border: 2px solid #eee;
    padding: 15px 50px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.app_info ul li::after {
    content: '▶';
    position: absolute;
    right: -25px;
    color: #d0d0d0;
}

.app_info ul li img {
    width: 40px;
}

.app_info ul li:last-child:after {
    content: '';
}

.app_info h4 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.app_info h4 img {
    width: 15px;
    margin-right: 5px;
}

.note_bottom {
    padding: 20px;
    border-radius: 10px;
    background: #f5f5f5;
}

.note_bottom p {
    margin-bottom: 10px;
    color: #000;
}

.note_bottom p:last-child {
    margin-bottom: 0;
}

.note_bottom p::before {
    content: '·';
    margin-right: 5px;
    font-size: 18px;
    color: #942092;
}

.app_bannertext p {
    opacity: 0.7;
}

.app_cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.app_cont_1{
    width: 49%;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: #fff;
    cursor: pointer;
}

.app_cont_1:hover {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
}

.app_cont_1 a {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    text-decoration: none;

}

.app_cont_1 h4 {
    color: #000;
    font-weight: bold;
    font-size: 24px;
}

.app_cont_1:hover h4 {
    color: #fff;
}

.app_cont_1 img {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.app_cont_1 img:last-child {
    display: none;
}

.app_cont_1:hover img:first-child {
    display: none;
}

.app_cont_1:hover img:last-child {
    display: block;
}

/*--------------------------*/

.user_info {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
}

.user_section h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.user_info h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.user_section {
    padding: 20px;
    width: 40%;
    height: 100%;
}

.info_section {
    padding: 20px;
    width: 60%;
    height: 100%;
}

.section_align {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 30px;
    margin-bottom: 20px;
}

.section_align h4 {
    text-align:right;
    position: relative;
    width: 20%;
    font-size: 18px;
}

.section_align h4::after {
    content: '*';
    font-weight: bold;
    color: #942092;
    position: absolute;
    top: -5px;
}

.section_align input {
    position: relative;
    width: 70%;
    height: 50px;
    padding: 2px;
    border-radius: 25px;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-indent: 30px;
    outline: none;
}

.section_align input:focus {
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
}

.section_align input::placeholder {
    font-weight: 100;
    color: #d2d2d2;
}

.radio_style input {
    width: 20px;
    height:20px;
    border-radius: 20px;
    margin-right: 10px;
    background-color: #f0f0f0;
}


.radio_align {
    width: 70%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.radio_align p {
    color: #a6a6a6;
    margin-right: 30px;
}

.after_none::after{
    display: none;
}

.section_align label {
    width: 70%;
    height: 50px;
    padding: 2px;
    border-radius: 25px;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    outline: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

.section_align label:hover,
.section_align label:active {
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.file_style {
    color: #828282;
    margin-left: 10px;
    padding: 10px 15px;
    border-radius: 30px;
    background: #f6f6f6;
    position: relative;
}
.file_text {
    position: relative;
    margin-bottom: 15px;
}

.file_text::after {
    content: '여러 데이터 파일을 첨부하실 경우, Zip 확장자로 업로드 바랍니다.';
    position: absolute;
    color: #7e7e7e;
    font-size: 14px;
    bottom: -30px;
    right: 0;
}

.section_align label:hover .file_style {
    color: #000;
    font-weight: bold;
}

/*.file_style:hover {*/
/*    background: linear-gradient(to right, #142C78 0%, #942092 100%);*/
/*    color: #fff!important;*/
/*}*/

#file {
    display: none;
}

.file_name {
    width: 80%;
    padding: 0 10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    word-break:keep-all;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
}

/*.data_btn {*/
/*	margin-top: 40px;*/
/*	height: 50px;*/
/*	padding-right: 30px;*/
/*}*/

/*.data_btn button {*/
/*	height: 50px;*/
/*	border-radius: 25px;*/
/*	margin: 0;*/
/*	margin-left: 20px;*/
/*}*/

/*.data_btn button:nth-child(2) {*/
/*	border-radius: 25px;*/
/*	box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
/*	padding: 2px;*/
/*	display: flex;*/
/*	justify-content: center;*/
/*	align-items: center;*/
/*	cursor: pointer;*/
/*	background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);*/
/*    background-size: 200% auto;*/
/*    transition: 0.5s;*/
/*	color: #fff;*/
/*}*/

/*.data_btn button:nth-child(2):hover {*/
/*    background-position: right center;*/
/*}*/

.analysis_blank {
    margin-top: 90px;
}

/*접수번호 확인 화면*/

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bs_success h3 {
    font-weight: bold;
    font-size: 40px;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 50px;
}

.bs_success p {
    text-align: center;
    font-size: 18px;
}

.js_layout {
    width: 40%;
    margin: 100px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.js_num {
    width: 70%;
    height: 50px;
    border-radius: 25px;
    margin-right: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.step_js_num {
    width: 30%;
    height: 50px;
    border-radius: 25px;
    margin: 30px auto 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.copy_js {
    width: 30%;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);
    background-size: 200% auto;
    transition: 0.5s ease;
    color: #fff;
}

.copy_js:hover {
    font-weight: bold;
    background-position: right center;
}

.copy_js:hover {
    font-weight: bold;
}

.js_btn {
    width: 200px;
    height: 40px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);
    background-size: 200% auto;
    transition: 0.5s ease;
    color: #fff;
}

.js_btn:hover {
    font-weight: bold;
    background-position: right center;
}


/*신청현황 확인*/

.request_box {
    width: 90%;
    margin: 30px auto 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.request_style {
    width: 50%;
}

/*.application_btn {*/
/*	width: 200px;*/
/*	height: 50px;*/
/*	border-radius: 25px;*/
/*	box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
/*	padding: 2px;*/
/*	margin: 0 auto;*/
/*	margin-bottom: 30px;*/
/*	display: flex;*/
/*	justify-content: center;*/
/*	align-items: center;*/
/*	cursor: pointer;*/
/*	background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%);*/
/*    background-size: 200% auto;*/
/*    transition: 0.5s ease;*/
/*	color: #fff;*/
/*}*/

/*.application_btn a {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    text-decoration: none;*/
/*    color: #fff;*/
/*}*/

/*.application_btn:hover {*/
/*    background-position: right center;*/
/*	font-weight: bold;*/
/*}*/

.application_info {
    width: 100%;
    padding-top: 20px;
    padding-left: 20px;
    /*margin-bottom: 30px;*/
}

.application_info h4 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.application_info p {
    color: #828282;
}

.application_step {
    width: 100%;
    /*margin-top: 30px;*/
    padding: 0 20px;

}

.application_step h4 {
    font-size: 24px;
    font-weight: bold;
    /*margin-bottom: 30px;*/
}

.application_step ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 50px;
}

.application_step li {
    position:relative;
    width: 25%;
    height: 150px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #828282;
}

.application_step li::after {
    position: absolute;
    right: -20px;
    content: '▶';
}

.application_step li:last-child:after {
    content: none;
}

/*
.application_step li:nth-child(1) {
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	color: #000;
	font-weight: bold;
	padding: 2px;
}
*/

.application_step li.active {
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #142C78 0%, #942092 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #000;
    font-weight: bold;
    padding: 2px;
}

.under_line2 {
    width: 95%;
    border-bottom: 1px dashed #d8d8d8;
    padding: 0 30px;
    margin: 30px auto;
}

/*로그인*/

.login_boxshadow {
    box-shadow: 0 0 10px rgba(0,0,0,0.1)!important;
}

.logo img {
    width: 30%;
    height: 30%;
}

.login_title {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(91deg, #092D76 0%, #942092 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login_box label {
    font-size: 14px;
    color: #828282;
    margin-left: 5px;
    margin-bottom: 5px;
}

.login_box input {
    height: 50px;
    border-radius: 25px;
}

.login_box input::placeholder {
    color: #828282;
    font-size: 14px;
}

/*.gradi_btn button {*/
/*	border-radius: 25px!important;*/
/*	background: linear-gradient(to right, #142C78 0%, #942092 100%)!important;*/
/*    background-size: 200% auto;*/
/*    transition: 0.5s ease;*/
/*    color: #fff;*/
/*}*/

/*.gradi_btn:hover {*/
/*    font-weight: bold;*/
/*    background-position: right center;*/
/*}*/

/*ID·PW 찾기*/

.find_cont .tab {
    border-bottom: none!important;
}

.find_cont .tab li {
    border-radius: 25px!important;
    margin: 5px!important;
    border: 1px solid #828282;
}

.find_cont .tab li a {
    color: #828282;
}

.find_cont .tab li:last-child {
    border-right: 1px solid #828282;
}

.find_cont .tab li.on, .find_cont .tab li:hover {
    background: linear-gradient(to right, #142C78 0%, #942092 100%)!important;
}

.list li input {
    border-radius: 25px!important;
    padding-left: 25px!important;
}

.find_cont .list {
    margin-bottom: 40px;
}

/*.member_btn {*/
/*	justify-content: center;*/
/*}*/

.bg_gradi {
    border-radius: 25px!important;
    background: linear-gradient(to right, #142C78 0%, #942092 50%, #142C78 100%)!important;
    background-size: 200% auto!important;
    transition: 0.5s;
    color: #fff!important;
}

.bg_gradi:hover {
    background-position: right center!important;
}

/*회원가입*/

.step_box ul li.on {
    background: linear-gradient(to right, #142C78 0%, #942092 100%)!important;
    border:1px solid transparent!important;
    background-image: linear-gradient(to right, #142C78 0%, #942092 100%)!important;
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-right: 1px solid #942092!important;
}

.step_box ul li.on::before {
    border-left-color: #942092!important;
}

.step_box ul li.on::after {
    border-left-color: #942092!important;
}

.find_cont .list li > div .join_btn {
    border-radius: 25px;
    background: #f0f0f0;
    color: #828282
}

.find_cont .list li > div .join_btn:hover {
    font-weight: bold;
    color: #000!important;
}

.complete_info {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
}

.complete_info span {
    color: #942092;
    font-weight: bold;
}


/*관리자 페이지*/

.header_logo {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    font-size: 24px;
    color: #000!important;
}

.header_logo img {
    margin-right: 10px;
}

/* .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"][item-border-style="none"] li>a {
	border-bottom: 1px solid #d2d2d2!important;
}
 */

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li>a {
    color: #828282!important;
}

.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li:hover>a {
    background: linear-gradient(to right, #142C78 0%, #942092 100%)!important;
    color: #fff;
}

.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li:hover>a {
    background-color: #942092;
}

.pcoded-main-container {
    background: #fff;
}

.header-navbar .navbar-wrapper .navbar-logo {

}


/*토글 스위치*/

.filter_cont .toggle_wrap {
    display: flex;
    justify-content: flex-end;
}

.toggle_wrap .frag_btn {
    width: auto;
}

.divideToggleSwitch {
    width: 50px;
    height: 25px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #d2d2d2;
    box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
    cursor: pointer;
}

#divide_map {
    padding: 0px 20px;
}

.divideToggleSwitch .toggleButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}

.toggle_input:checked ~ .divideToggleSwitch {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
}

.toggle_input:checked ~ .divideToggleSwitch .toggleButton {
    left: calc(100% - 24px);
    background: #fff;
}

.divideToggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
}

.moveToggleSwitch {
    width: 50px;
    height: 25px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #d2d2d2;
    box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
    cursor: pointer;
}

.moveToggleSwitch .toggleButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}



.moveToggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
}

.max_cnt {
    display: flex;
    align-items: flex-start;
}

.min_cnt {
    display: flex;
    align-items: flex-end;
}

/*---------------------------------------------*/


/*유동인구 사이드 토글버튼*/
.mapMovepopToggleSwitch {
    width: 50px;
    height: 25px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #d2d2d2;
    box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
    cursor: pointer;
}

.mapMovepopToggleSwitch .toggleButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}

#mapToggle2:checked ~ .mapMovepopToggleSwitch {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
}

#mapToggle2:checked ~ .mapMovepopToggleSwitch .toggleButton {
    left: calc(100% - 24px);
    background: #fff;
}

.mapMovepopToggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
}


/* 분할지도 유동인구 사이드 토글버튼 */
.map2MovepopToggleSwitch {
    width: 50px;
    height: 25px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #d2d2d2;
    box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
    cursor: pointer;
}

.map2MovepopToggleSwitch .toggleButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}

#map2Toggle2:checked ~ .map2MovepopToggleSwitch {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
}

#map2Toggle2:checked ~ .map2MovepopToggleSwitch .toggleButton {
    left: calc(100% - 24px);
    background: #fff;
}

.map2MovepopToggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
}

/*---------------------------------------------*/

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

.flex_fe {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
}

.flex_fe.hide {
    display: none;
}

.sub_flex_fe {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    /*padding-right: 20px;*/
}

.flex_fe h3 {
    margin-right: 10px;
}

ul#menu_wrapper > li.top-menu > a.top-menu-link.selected > span {
    background: linear-gradient(to right, #142C78 0%, #942092 100%) !important;
}

.request_3 .info_section .section_align textarea:focus {
    font-weight: bold;
}

.find_cont .list li label {
    display: flex;
    align-items: center;
    padding-top: 0;
}

.signup_select {
    width: 100%;
    height: 48px;
    color: #828282;
    border: none;
}

.find_cont .list li > div select {
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

.signup_select:focus {
    color: #000;
}

.su_selectbox {
    width: 40%;
    border-radius: 25px;
    padding: 0 20px;
    cursor: pointer;
    border: 1px solid #d2d2d2;
}

.find_cont {
    margin-bottom: 100px;
}

.section_align .su_selectbox {
    width: 30%;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.section_align .su_selectbox select:focus {
    outline: none;
    border: none;
}

.mp_layout {
    position: relative;
    width: 70%;
}

.mp_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 25px;
    background: #fff;
    outline: none;
    border: none;
    cursor: pointer;
    color: #000;
}

.mp_btn:hover {
    background: linear-gradient(to right, #142C78 0%, #942092 100%);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.mp_btn:focus {
    border: none;
    outline: none;
}

/*.btn_bg button {*/
/*    color: #fff;*/
/*    background: linear-gradient(91deg, #092D76 0%, #942092 50%, #092D76 100%);*/
/*    background-size: 200% auto;*/
/*    transition: 0.5s;*/
/*}*/



/*.btn_bg button:hover {*/
/*    background-position: right center;*/
/*}*/

/*개인정보 · 이용약관*/
#mqHeader img {
    width:50%;
}

/*2024-10-28 반응형 css */
.sub_contents {overflow:auto;}
#m_wrap, #s_wrap {min-width: 360px; min-height: 730px;}
.btn_nav, .btn_close, .mask { display: none; }
.btn_bar button>span { position: relative; display: block; margin: 0 auto; width: 20px; height: 2px; background: #fff; text-indent: -9999px; transition: background 0.2s ease; }
.btn_bar button>span:after, .btn_bar button>span:before { position: absolute; display: block; right: 0; width: 20px; height: 2px; background: #fff; }
.btn_bar button>span:after { content: ''; top: -7px; transition: all 0.2s ease; }
.btn_bar button>span:before { content: ''; top: 7px; transition: all 0.3s ease; }
.btn_bar button:hover>span:after,
.btn_bar button:hover>span:before { width: 26px}
.blind {position: absolute; top: -1000px; left: -10000px; overflow: hidden; font-size: 1px; text-indent: -9999px; line-height: 0;}
.con2_L {overflow:hidden;}
#sub_header .btn_bar button>span {background:#333;}
#sub_header .btn_bar button>span:after, #sub_header .btn_bar button>span:before {background:#333;}
.analysis_method {flex-wrap: wrap; height: auto; padding-left: 0; background:none;}
.analysis_method > div {display: flex;align-items: center; width:100%; height: 80px; padding: 20px; border-radius: 10px; background-color: #f0f0f0;}
.analysis_method p {position:relative; bottom: 0; margin-top:15px;}
.m_view {display:none;}
.card_text h3 {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/*반응형 css*/
@media screen and (max-width:1800px) {
    .cate_parti, .category_style ul {min-height: 100%; max-height: 100%;}
    .category_section h3 {font-size:16px;}
    .category_style ul li {height: 28px; font-size:14px;}

    .request_box {width:100%; margin:0;}
    .section_align h4 {font-size:16px; word-break: keep-all;}
    .sub_con_bottom {flex-direction: column; gap: 8px;}
}

@media screen and (max-width:1600px) {
    /*#main_header > #gnb > ul > li, #sub_header > #gnb > ul > li {width: 140px; font-size: 18px;}*/
    /*#main_header > #gnb > .sub_menu > ul, #sub_header > #gnb .sub_menu > ul {width: 140px;font-size: 16px;}*/
    #sub_header > h1 a img, #main_header > h1 a img {
        height: 18px;
    }
    #sub_header > h1 a:nth-child(1), #main_header > h1 a:nth-child(1) {
        display: none;
    }

    #main_header > #gnb .name_text, #sub_header #gnb .name_text {display: none;}

    #footer {position:relative; gap: 10px;}

    /* 서브 반응형 */
    .sub_sidebar {width:18%;}
    .sub_contents {position:relative; padding:15px; overflow: auto;}
    .sub_contents .card_align {display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:20px;}
    .sub_contents .card_style {width:100%; min-width: 100%; margin:0;}
    .table_box.expanded {height:400px !important;}

    .st_left h4 {font-size:22px;}
    .analysis_info h4, .shareboard_lay2 h4, .shareboard_lay3 h4 {font-size:16px;}
    .analysis_title h3 {font-size:20px;}
    .a_part_right h4 {font-size:18px;}

    .app_bannertext h3 {font-size: 24px; margin-bottom: 20px;}
    .app_info ul li {padding: 15px 30px;}
    .app_info ul li img {width: 30px;}
}

@media screen and (max-width:1400px) {
    .banner_text h2 {font-size:40px;}

    .main_con h3 {/* font-size:20px; */}
    .main_con_L ul li a p {/* font-size:18px; */}

    #footer > img {height:30px;}
    .footer_info p {font-size:14px;}
    .footer_copy {font-size:13px;}

    /* 서브 반응형 */
    .sub_layout {width: 100%; height: 100%; margin: 0; padding:20px;}
    .sub_title h3 {width: 20%; font-size:20px;}
    .sub_sidebar ul {margin:20px;}
    .sub_sidebar ul li a {font-size:14px;}
    .parti_btn {font-size:15px;}
    .select_style select {font-size:15px;}
    .search_bar input {font-size:15px;}

    .ur_table_box {height: 430px;}

    .user_info h3 {font-size:18px;}
    .section_align h4 {font-size:16px;}
    .section_align input, .section_align select, .info_section .section_align textarea {font-size:15px;}

    /*.app_banner {height:290px;}*/
    .app_bannertext h3 {font-size:22px;}
    .app_cont_1 h4 {font-size:20px;}
    .application_info h4 {font-size:18px;}

    .user_section, .info_section {width:100%;}

    .section_align .su_selectbox {width:100%;}

    .bs_success h3 {font-size:26px;}
    .bs_success p {font-size: 15px; line-height: 21px;}

    .app_info ul li {padding:15px 30px;}

    /* 데이터 분석 반응형 css(지도) */
    .sel_box h3 {font-size:14px;}
    .sel_box.alarm h3 {font-size:11px;}
}

/* 메뉴 반응형 */
@media screen and (max-width:1400px) {
    .main_con {
        padding-top: 130px;
    }

    /*관리자페이지 반응에 따른 이미지 호출*/
    .gnb_sub_select.img_change img:nth-of-type(2) {
        display: none!important;
    }

    .gnb_sub_select.img_change img:first-child {
        display: block;
    }

    .gnb_sub_select.img_change:hover img:first-child {
        display: none;
    }

    .gnb_sub_select.img_change:hover img:nth-of-type(2) {
        display: block!important;
    }

    #main_header > #gnb > ul > .mb_profile_swh, #sub_header > #gnb > ul > .mb_profile_swh{display: block;}
    #main_header > #gnb > ul > .pc_profile_swh, #sub_header > #gnb > ul > .pc_profile_swh{display: none;}

    #main_header #gnb .sub_menu, #sub_header #gnb .sub_menu {display: none;}
    #main_header #gnb:hover .sub_menu, #sub_header #gnb:hover .sub_menu {display: none;}
    #main_header > #gnb, #sub_header > #gnb {margin: 0;}
    .gnb_sub_select, .gnb_select {-webkit-background-clip: inherit; -webkit-text-fill-color: inherit; color:#fff !important; background: linear-gradient(91deg, #092D76 0%, #942092 100%);}
    #main_header #gnb, #sub_header #gnb {width: 290px; padding: 0; position:fixed;display:block;height:100%;top:0;right:-290px;padding-top:55px;padding-right:0;height:100%;background:#fff;z-index:110;transition: right 0.3s ease;}
    #main_header #gnb > ul, #sub_header #gnb > ul {padding: 0;; flex-direction: column; margin-top: 20px; text-align:left; border-top: 1px solid #eee;}
    #main_header #gnb > ul > li, #sub_header #gnb > ul > li {display:block; width:100%; margin-right:0; padding: 0; text-align: left;}
    #main_header #gnb > ul > li:after, #sub_header #gnb > ul > li:after { display:none }
    #main_header #gnb > ul > li > a, #sub_header #gnb > ul > li > a {justify-content: flex-start; padding:0 18px; height:60px; line-height:60px; font-size:14px; color:#000; text-decoration:none; border-bottom: 1px solid #eee; transition:background 0.2s ease; }
    #main_header #gnb>ul>li:hover a, #sub_header #gnb>ul>li:hover a {color: #333;}
    #main_header #gnb > ul > li > a:hover:before, #sub_header #gnb > ul > li > a:hover:before { display:none }
    #main_header #gnb > ul > li > ul, #sub_header #gnb > ul > li > ul { position:static; padding:0; height:auto; max-height:0; min-height:auto; border:0; display:block !important; overflow:hidden; transition:max-height 0.8s; background:#f1f1f1 }
    #main_header #gnb > ul > li:first-child > ul, #sub_header #gnb > ul > li:first-child > ul { border:0 none }
    #main_header #gnb > ul > li > ul > li > a, #sub_header #gnb > ul > li > ul > li > a { position:relative; display:block; padding:0 26px 0 31px; height:46px; line-height:46px; color:#666; font-size:14px; text-align:left; }
    #main_header #gnb > ul > li > ul > li:last-child > a, #sub_header #gnb > ul > li > ul > li:last-child > a { border-bottom:0 none }
    #main_header #gnb > ul > li > ul > li.on > a, #sub_header #gnb > ul > li > ul > li.on > a { font-weight:bold; text-decoration:underline; }
    #main_header #gnb > ul > li.on > ul, #sub_header #gnb > ul > li.on > ul { max-height:2000px; background: #f8f8f8;}
    #main_header #gnb > ul > li > a:after, #sub_header #gnb > ul > li > a:after, #gnb.open span.bg { display:none; }

    #main_header.open .mask, #sub_header.open .mask {display: block; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; }
    #main_header.open #gnb, #sub_header.open #gnb { right: 0; padding-left: 0; overflow-y: auto; height:100%;}
    #main_header .btn_close, #sub_header .btn_close { z-index: 105; position: absolute; top: 8px; right: -280px; transition: right 0.3s ease-out; }
    #main_header .btn_close>button, #sub_header .btn_close>button { position: relative; width: 40px; height: 40px; background: none; border: 0;}
    #main_header .btn_close>button:before, #sub_header .btn_close>button:before,
    #main_header .btn_close>button:after, #sub_header .btn_close>button:after { content: ''; display: block; margin: 0 auto; width: 22px; height: 2px; background: #333; }
    #main_header .btn_close>button:before, #sub_header .btn_close>button:before { transform: translateY(2px) rotate(45deg); }
    #main_header .btn_close>button:after, #sub_header .btn_close>button:after { transform: translateY(0px) rotate(135deg); }
    #main_header.open .btn_close, #sub_header.open .btn_close { right: 10px; z-index: 200; }
    #main_header.open .btn_close, #sub_header.open .btn_close {display:block;}
    .btn_nav { display: block; }
    .btn_nav { position: absolute; top: 0; right: 0; }
    .btn_nav button { width: 60px; height: 60px; padding: 0; border: none; background: transparent;}
    .hide .btn_nav button > span, .hide .btn_bar button>span:after, .hide .btn_bar button>span:before {background-color: #fff;}
}


@media screen and (max-width:1300px) {
    .banner_text img{
        width: 70%;
        min-width: 300px;
    }

    /* 서브 반응형 */
    .sub_layout {flex-direction: column; height: calc(100% - 60px);}
    .sub_sidebar {width:100%; height: auto; margin-right:0; background: none; box-shadow: none;}
    .sub_sidebar ul {display:flex; gap: 15px; margin:0;}
}

@media screen and (max-width:1200px) {
    .main_con_L ul {/* flex-wrap: wrap; *//* justify-content: center; */}
    .main_con_L ul li {/* width: 45%; *//* height: 45%; */}
    .main_con_L, .main_con1 {/* padding:25px 20px; */}
    .main_con_L ul li a p {/* font-size:16px; *//* padding: 13px 13px 0; */}
    .datashare_title a {font-size:14px;}

    .main_con_L_cont ul {
        flex-wrap: wrap;
        width: auto;
        gap: 10px;
    }
    .main_con_L_cont ul li {
        width: calc(50% - 5px);
        height: 120px;
    }
    .main_con_L_cont.main_con_L_cont1 {
        flex: 0.4;
    }
    .main_con_L_cont.main_con_L_cont2 {
        flex: 0.6;
        border: none;
    }
    .main_con_L_cont.main_con_L_cont1 ul li {
        width: 100%;
        height: 250px;
    }
    .main_con_L ul li a img {
        width: 100%;
        height: 100%;
    }
    .carousel_card:nth-child(5) {display: none;}

    /* 서브 반응형 */
    .sub_title {padding:20px;}
    .sub_title h3 {font-size:18px;}
    .sub_title p {font-size:15px;}
    .table_style thead th, .table_style tbody td {font-size:14px;}

    .shareboard_lay1 {width:40%;}
    .shareboard_lay2 {width:60%;}

    .section_align h4 {font-size:14px; line-height: 19px;}
    .application_info {padding:0;}
    .application_info p {font-size:14px;}
    .application_text {margin-top:20px; line-height: 20px;}

    /*--------------------------------*/
}

@media screen and (max-width:1100px) {
    .main_con {width: auto;/* padding: 20px; */}
    .main_con_L ul {gap:10px;}
    .main_con_L ul li {margin:0;}

    /* 서브 반응형 */
    .sub_contents .card_align {grid-template-columns: 1fr 1fr; gap: 15px;}

    .sub_title {flex-direction: column; align-items: flex-start; gap: 10px; min-height: 110px;}
    .sub_title h3 {width:100%; height: auto; margin-right:0;}

    .shareboard_layout {flex-direction: column;}
    .shareboard_lay1, .shareboard_lay2 {width:100%;}
    .analysis_info, .shareboard_lay2, .shareboard_lay3 {gap:20px;}
    .analysis_info p, .shareboard_lay3 div {width:80%; font-size: 15px;}
    .shareboard_lay2 h4, .shareboard_lay3 h4 {width:20%;}
    .shareboard_lay2 div p {font-size:15px;}
    .table_box.expanded {height: 380px !important;}

    .analysis_part {flex-direction: column; gap: 20px;}
    .a_part_left, .a_part_right {width:100%;}

    .ur_table_box {height: 370px;}

    .app_info ul li {font-size: 14px; padding: 15px;}
    .app_info ul li img {width: 20px;}
}

@media  screen and (max-width: 992px) {
    #mobile_menu_wrapper ul.level3-wrapper {height: 300px; overflow: scroll;}
}

@media screen and (max-width:920px) {
    .main_con2 {
        display: none;
    }

    #main_header > h1 a, #sub_header > h1 a {font-size:16px;}

    .carousel_card:nth-child(4) {display: none;}

    .spot_row, .date_row {
        display: none;
    }

    .report_row {
        padding: 10px 20px;
        position: absolute;
        top: -70px;
        right: 0;
    }

    #popup {padding: 0;}

    #footer {flex-wrap:wrap; justify-content: flex-start; padding: 20px;}
    .footer_copy {margin-top:10px;}
    .footer_info p {font-size:13px;}

    /* 서브 반응형 */
    .sub_contents {min-height:512px; padding-bottom: 100px;}
    .card_text h3 {font-size:16px;}
    .search_flex {position: absolute; left: 10px; right: 10px; top: 10px;}
    .search_align {/*justify-content: flex-end;*/ padding-top:60px; margin-bottom: 10px;}
    .search_bar {width:100%;}
    .search_bar input {width:100%;}
    .search_flex .search_select, .search_bar input {height:44px;}
    .search_bar button {width:44px; height:44px;}
    .parti_btn {height: 34px; border-radius: 6px; font-size: 13px; width: 100px;}
    .table_style thead th, .table_style tbody td {font-size:13px;}
    .table_style thead th:first-child {border-radius: 6px 0 0 6px;}
    .table_style thead th:last-child {border-radius: 0 6px 6px 0;}
    .table_style tbody td {height:40px; line-height: 16px; padding: 3px; vertical-align: middle;}

    .shareboard_title {padding:15px;}
    .st_left h4 {font-size:18px;}
    .sub_contents .btn_lay {justify-content: center; margin-top: 20px !important;}
    .sub_contents .btn_lay.mt-0 {margin-top:0 !important;}
    .sub_title p {overflow-y: auto; font-size: 14px; word-break: keep-all;}
    .sub_title p br {display:none;}

    .request_2 .user_info {padding:0;}
    .request_2 .user_section {padding-top:0;}
    .request_answer div {margin-right:0; padding: 20px; font-size: 14px;}
    .section_align {padding:0;}
    .user_info {flex-direction: column;}
    .user_info > div {width:100%; padding: 0;}

    /*.app_banner {height:260px; padding:20px;}*/
    .app_bannertext h3 {font-size:18px;}
    .app_cont_1 {height:120px;}
    .app_cont_1 a {padding:20px;}
    .app_cont_1 h4 {font-size:16px;}
    .bottom_info {font-size:14px;}
    .sub_con_bottom {align-items: flex-start;}

    .analysis_blank {margin-top:20px;}
    .radio_align {height:30px; font-size: 14px;}
    .request_box {flex-direction: column;}
    .request_style {width:100%;}

    .m_view {display:block; font-size: 13px; margin: 10px 0 5px; text-align: right; color: #999;}
    .m_view span {font-size:10px;}
    .scrollBar_x {overflow-y: auto;}
    .m_cont_table {min-width:800px;}
    .m_cont_table2 {min-width:800px;}

    .js_layout {width:80%;}

    .app_info ul {flex-direction: column;}
    .app_info ul li::after {
        content: '▼';
        right: 50%;
        bottom: -30px;
    }

    /* 데이터 분석 반응형 css(지도) */
    .move_split_btn, .card_split_btn {display:none;}
    .move_switch_btn {font-size:14px;}
    .filter_menu ul li {padding: 6px; font-size:14px;}
    .filter_btn ul li {height: 38px; font-size:14px;}
    .select_section p {font-size:14px;}
    .legend-title {font-size:14px;}
    .legend-sub-title {font-size:11px;}
    .legend-values {font-size:11px;}
    .color-bar {width: 30px;}
    .chart_bar {left: 0; right: 0; bottom: 0; width: 100%; height: 300px; padding-top: 55px; z-index: 9;}
    .chart_bar > ul {flex-direction: row; left: 10px; right: 10px; top: 10px; border-radius: 10px;}
    .chart_bar > ul li {width:100%; margin: 0 5px; font-size: 14px;}
    .float_chart {left: 0; right: 0; top: calc(100% - 300px); width: 100%; height: 300px; padding-top: 55px; z-index: 9;}
    .float_chart ul {flex-direction: row; left: 10px; right: 10px; top: 10px; border-radius: 10px;}
    .float_chart ul li {width:100%; margin: 0 5px; font-size: 14px;}
    .search_btn {margin: 10px; font-size:14px;}

    .chart_box h3 {font-size:15px;}
    .data_source {display:none; right: 0; margin-bottom: 335px;}
    .move_data_source {display:none; margin-bottom: 25px;}
    .chart_bar .btn_hide {transform: rotate(90deg); left: 50%; top: -50px;}
    .chart_bar.hide {-webkit-transform: translateY(300px); transform: translateY(300px);}
    .float_chart .btn_hide {transform: rotate(90deg); left: 50%; top: -50px;}
    .float_chart.hide {-webkit-transform: translateY(300px); transform: translateY(300px);}
    .tab_chart .chart_scroll.open, .chart_scroll {overflow:auto;}
    .sel_box {position:relative;}
    .filter .filter_cont .sel_box.open .select_tab {top:40px; left: 50%; transform: translateX(-50%); z-index: 1; box-shadow: 0 0 10px rgb(0 0 0 / 26%);}
    .filter .filter_cont .sel_box.open .m_select_tab {left: 50% !important; top: 223px;}
    .select_section img {transform: rotate(90deg);}
    .mh_200 {max-height: 122px;}
    .drag_btn {padding-top:5px; padding-right:10px; font-size:13px;}

    .filterGubn {width: 332px; font-size: 14px;}
    .filterGubn p {padding-right: 0 !important;}
    .spot_filter {font-size: 14px;}
    .spot_information {width: 14px;}
    .filter_gubn_img { font-size: 13px; }
    .filter_gubn_img img {width: 14px; height: 14px;}
    .dataTypeLegend {width: 110px;}
    .dataTypeLegend p {font-size: 13px;}
    .dataTypeLegend label {font-size: 12px;}
    .dataTypeLegend label input {width: 12px; height: 12px;}
    .dataTypeLegend label img {width: 22px; height: 22px;}
    .legendItems img {width: 22px; height: 22px; margin-right: 2px;}
    .categoryLegend label {font-size: 12px;}

    .calendar_popup {top: 100%; left: calc(100% - 260px); min-width: 270px; max-width: 300px;}
    .calendar_info {padding: 6px 8px;}
    .info_area {padding: 6px 8px;}
    .info_title {font-size: 12px; gap: 3px;}
    .info_title img {width: 14px; height: 15px;}
    .day_header {font-size: 15px;}
    .day_cell {font-size: 15px;}
    .current_year, .current_month_only {font-size: 15px;}
    .selected_range {font-size: 13px;}
    .confirm_btn {font-size: 13px;}

    .festival_popup {min-width: 260px; width: 260px; height: 270px;}
    .festival_popup .festival_body {max-height: 225px;}
    .festival_detail {padding: 8px 0 10px;}
    .festival_item {margin-bottom: 4px;}
    .festival_item_h3 {font-size: 14px!important;}
    .festival_item_h4 {font-size: 16px!important;}
    .festival_name {font-size: 14px;}
    .festival_label {font-size: 12px;}
    .festival_value {font-size: 14px;}
    .festival_popup .festival_title {font-size: 14px;}
    .festival_popup .close_btn {font-size: 12px;}
}

@media screen and (max-width:720px) {

    .m_share_category .category_gubn {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 5px;
        padding: 0;
    }

    .m_share_category .category_gubn li p {
        font-size: 16px;
        height: 32px;
    }

    .banner_text img {
        margin-bottom: -10px;
    }
    .main_con_L_inner {
        flex-direction: column;
    }
    .m_carousel {
        flex-direction: column;
    }

    .carousel_card {
        flex:none;
        width: 100%;
        height: 100px;
    }

    .card_con a h4 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 95%;
    }

    .main_con_L_cont.main_con_L_cont1 ul li {
        height: 150px;
    }

    .main_con_L_cont.main_con_L_cont1 {
        margin-bottom: 20px;
    }

    .category_section h3 {display: block; width: 100%; margin: 0; margin-bottom: 10px; font-size: 14px;}
    .category_section {flex-direction: column;}
    .category_style ul li {height: 26px; font-size:13px;}
    .category_style ul {height: 65px; overflow: auto;}

    .user_info h3 {margin-bottom: 20px; font-size:16px;}
    .section_align h4 {font-size:15px;}
    .section_align input, .section_align select, .info_section .section_align textarea {font-size:14px; text-indent: 20px;}
    .section_align select {padding-left: 0 !important;}
    .request_2 .info_section .section_align textarea, .request_3 .info_section .section_align textarea {text-indent: 0; padding-left: 20px !important;}
    .section_align input {height:40px;}
    .request_answer h4 {font-size:16px;}
    .request_answer div {flex-direction: column; gap: 10px;}
    .request_answer div p:last-child {font-size:13px;}
    .section_align .su_selectbox {padding:0; padding-right:10px; overflow: hidden;}

    .radio_align input {width: 17px !important; height:17px !important;}
    .radio_align p {width:100%; margin-right:0}

    .section_align label {height:40px;}
    .file_style {padding: 6px 20px; font-size:14px;}
    .application_info h4 {font-size:16px;}

    .mp_btn {height:40px; width: 100%; font-size: 14px;}

    .bs_success h3 {margin-bottom: 30px; font-size:20px;}
    .bs_success p {word-break:keep-all;}
    .bs_success p br {display:none;}
    .js_layout {width:100%;}
    .copy_js {font-size:16px;}
    .step_js_num {width:100%;}
}

@media screen and (max-width:620px) {
    .report_row {
        flex-direction: column;
        top: -120px;
        padding: 10px 10px;
    }

    .report_box {padding: 10px 10px; font-size: 12px;}

    .datashare_title a {
        display: none;
    }

    .footer_info {display:flex; gap:15px; width:100%;}
    .footer_info p {position:relative;}
    .footer_info p:after {content:''; display:block; position: absolute; right: -9px; top: 2px; width: 1px; height: 12px; background: #ddd;}
    .footer_info p:last-child:after {display:none;}

    /* 서브 반응형 */
    .sub_contents {height:520px !important;}
    .sub_title h3 {font-size:16px;}
    .sub_sidebar ul {gap:5px;}
    .sub_sidebar ul li a {font-size:12px;}
    .sub_contents .card_style {height:165px;}
    .card_text {padding:10px;}
    .table_style thead th {height: 40px; padding: 3px; line-height: normal; vertical-align: middle; font-size:12px;}
    .table_style tbody td {font-size:13px;}

    .text_flex {margin-bottom: 4px;}
    .text_flex p {font-size:13px;}
    .card_text h3 {font-size:14px;}

    .shareboard_title {flex-direction: column; align-items: flex-start; padding: 15px 0;}
    .shareboard_title .st_left {width:100%; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
    .shareboard_title .st_right {display: flex; gap: 10px;}
    .shareboard_layout, .shareboard_lay3 {padding:0;}
    .analysis_info, .shareboard_lay2, .shareboard_lay3 {flex-direction: column; align-items: flex-start; gap: 5px; padding: 5px 0;}
    .analysis_info h4, .shareboard_lay2 h4, .shareboard_lay3 h4 {width:100%; text-align:left; line-height: normal; height: auto;}
    .analysis_info p, .shareboard_lay3 div, .shareboard_lay2 div {width:100%;}
    .sb_caution {margin-left:0;}

    .analysis_title {padding-left: 0; padding-right: 0;}
    .analysis_part {padding:0;}
    .a_part_right {padding-bottom:20px;}
    .a_part_right h4 {font-size:16px;}
    .table_style {margin-top:10px;}
    .analysis_method, .analysis_manager {font-size:14px;}

    .btn_style {font-size:15px;}

    /*.app_banner {padding:20px 15px;}*/
    .app_bannertext h3 {font-size:16px;}
    .sub_con_bottom {padding: 10px; border-radius: 6px;}
    .bottom_info {margin-right: 0px; font-size:13px;}
    .bottom_info p {margin-right:0; line-height: 18px;}
    .bottom_info h4::after {display:none;}

    .user_info {gap:20px;}
    .m_user_info {height: 574px !important;}
    .user_info > div {height:auto !important;}
    .mp_layout {width:100%;}
    .request_2 .user_section, .user_section {border-bottom: 1px solid #f0f0f0; padding-bottom: 10px !important;}
    .section_align {flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 15px;}
    .section_align h4 {width:100%; text-align:left; line-height: normal;}
    .section_align input, .request_2 .info_section .section_align textarea, .request_3 .info_section .section_align textarea {width:100%;}
    .section_align select {width:100% !important; height: 40px; background:#fff;}
    .section_align label {width:100%;}
    .sub_contents .btn_lay {padding-right:0;}

    .shareboard_lay3 div p {font-size:14px;}
    .sb_caution p {font-size: 13px; line-height: 17px;}

    .file_style {width: 40%; text-align: center;}

    .js_layout {flex-direction: column; gap:10px;}
    .js_layout > div {width:100%; margin-right:0;}
    .application_step li {height:70px; font-size: 15px;}
    .application_text {word-break: keep-all; font-size: 14px;}
    .application_step {padding:0;}

    /* 데이터 분석 반응형 css(지도) */
    .filter_menu {margin:0 10px;}
    .filter_menu ul {margin-top:10px;}
    .filter_menu ul li {font-size:13px;}
    .move_switch_btn {font-size:13px; padding-top:10px; padding-right: 10px;}
    .filter_select {margin:0 10px;}
    .select_tab h4 {font-size:14px;}
    .select_style select {font-size:13px;}
    .legend-title {font-size:13px;}
    .legend-sub-title {font-size:10px;}
    .legend-values {font-size:10px;}
    .color-bar {width: 15px;}

    .chart_box h3 {font-size:13px; line-height: 16px;}

    .filter {border-radius: 5px;}
    .filter.hide {height:80px; border-radius: 5px;}
    .filter .filter_cont .sel_box.open .select_tab {max-height:265px; overflow:auto;}
    .filter .filter_cont .sel_box.open .m_select_tab .type_select2 {flex-direction: row; gap: 5px;}
    .filter .filter_cont .sel_box.open .m_select_tab .type_select2 li {height: 40px; border-radius: 8px; margin:0; text-align: center; font-size: 12px; word-break: keep-all;}
    /* .m_filter {display:none;}
    .filter.hide .filter_menu {display: none;}
    .filter {top:90px;}
    .m_filter_menu.btn_hide {display:block; position: absolute; left: 40px; height: 70px; text-align: center; padding: 10px; width: 80px; top: -80px; border-radius: 5px; background:#fff;}
    .m_filter_menu.btn_hide > img {width: 23px; margin-bottom: 5px;}
    .m_filter_menu p {font-size:13px;}
    .m_filter_menu.btn_hide:after {display:none;}*/

    .filterGubn {width: 298px; font-size: 13px;}
    .filterGubn p {padding-right: 0 !important;}
    .filter_gubn_img { font-size: 11px; }
    .filter_gubn_img img {width: 12px; height: 12px;}
    .spot_filter {font-size: 13px;}
    .spot_information {width: 13px;}
    .dataTypeLegend {width: 100px;}
}

@media screen and (max-width:500px) {
    .visit_wrap {
        display: none;
    }
}

@media screen and (max-width:450px) {
    .m_share_category .category_gubn {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    .m_share_category {
        padding: 20px;
    }

    .footer_info {flex-direction: column; gap: 0;}
    .footer_info p:after {display:none;}

    /* 서브 반응형 */
    .search_flex {flex-direction: column;}
    .search_flex .search_select {width:100%; margin-bottom: 5px;}
    .search_align {padding-top:120px;}
    .search_bar {margin-left:0;}
    .search_bar input {margin-right:5px;}
}

@media screen and (max-width:420px) {
    .card_con a h4 {
        font-size: 16px;
    }
    .main_con {
        padding-top: 100px;
    }
    .main_con_L ul li {height:120px;}
    .main_con_L ul li a p {font-size:14px;}
    .m_carousel {flex-direction:column;}
    .main_con2 > div {height:80px;}
    .con2_L a, .con2_R a {padding:13px;}
    .con2_L a > img, .con2_R a > img {width:23px;}

    .bottom_info {flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 10px;}
    .sub_con_bottom .bottom_info:last-child {margin-bottom:0;}
    .bottom_info h4 {line-height:normal; font-size: 14px;}
    .text_flex p:last-child {display: none;}
}


.chart_indicator {
    margin-right: 4px;
}

@media screen and (max-width:420px) {
    .chart_indicator {
        margin-right: 1px;
    }
}

/* =========================
   보고서 모달
   ========================= */
.report_modal {
    position: relative;
}

.report_modal .modal-wrap {
    background: white;
    border-radius: .3rem;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.report_modal .modal-header {
    /* background: #4a90e2; */
    /* color: white; */
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report_modal .modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    color: #000;
    text-align: right;
    font-family: Pretendard;
    /* font-size: 14px; */
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */
    letter-spacing: -0.42px;
}

.report_modal .modal-buttons {
    display: flex;
    gap: 10px;
}

.report_modal .modal-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
    color: #212529;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 16px */
    letter-spacing: -0.48px;
}

.report_modal .pdfDownload {
    background: white;
    /* color: #4a90e2; */
    font-weight: 600;
}

/* .report_modal .pdfDownload:hover {
    background: #f0f8ff;
} */

.report_modal .btnModalClose {
    background: #4d505e;
    /* color: white; */
    border: 1px solid rgba(255,255,255,0.5);
}

.report_modal .btnModalClose:hover {
    background: rgba(255,255,255,0.1);
}

.report_modal .modal-inner {
    display: flex;
}

.report_modal .modal-main {
    max-height: calc(90vh - 100px);
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    background: #ececec;
    width: 905px;
}

/* 스크롤바 */
.report_modal .scrollBar::-webkit-scrollbar {
    width: 8px;
}

.report_modal .scrollBar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.report_modal .scrollBar::-webkit-scrollbar-thumb {
    background: #4a90e2;
    border-radius: 4px;
}

/* =========================
   PDF 호환 스타일
   ========================= */

#reportMainArea {
    width: 100%;
    margin: 0px;
}

.report_modal .report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #E6E6E6;
    padding: 0px 0px 10px 10px;
    box-sizing: border-box;
}

.report_modal .report-comment {
    display: flex;
    padding: 5px 10px;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    color: #555;
    border-radius: 4px;
    background: #DFDFDF;
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
}
.report_modal .report-comment .require {
    color: #333;
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
}

.report_modal .report-search {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
    flex-shrink: 0;
}

.report_modal .filter-main {
    color: #111;
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
}

.report_modal .filter-sub {
    color: #777;
    text-align: right;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
}

.report_modal .report-range {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    color: #333;
    text-align: right;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 14px */
}

.report_modal .report-range::before {
    content: '조회일자';
    color: #FFF;
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    display: flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #333;
}

.report-item h4 {
     padding-left: 18px;
     position: relative;
     color: #111;
     font-family: Pretendard;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: 1.5; /* 기호와 텍스트 높이 일치 */
     letter-spacing: -0.42px;
     display: flex; /*수직정렬*/
     align-items: center; /* 상하 중앙정렬 */
 }
 .report-item h4::before {
      content: ' ';
      position: absolute;        /* 레이아웃 영향 제거 핵심! */
      left: -1px;                   /* padding-left 영역 내 위치 */
      top: 54%;
      transform: translateY(-42%); /* 세로 가운데 정렬 */
      width: 17px;
      height: 17px;
      background: url('../../images/icon/icon_title_mark.svg') center/contain no-repeat;
      }

.weather_list {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7열로 고정 */
    gap: 8px;
    list-style: none;
}

.weather_list > .weather_item {
    padding: 10px;
    text-align: center;
    transition: all 0.3s ease;

    border-radius: 10px;
    border: 1px solid #F2F2F2;
    background: #FFF;
}

.report-map {
}

.report-map > div {
    width: 100%;
}

/*.weather_list .weather_item:hover {*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);*/
/*}*/

.weather_icon {
    margin-bottom: 12px;
}

.weather_icon img {
    width: 50px;
}

.weather_date {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}

.weather_temp {
    font-size: 10px;
    font-weight: 600;
    color: rgba(136,136,136,0.8);
    line-height: 1.3;
}
.weather_label_box {
    margin-right: 2px;
}

.weather_rain {
    font-size: 12px;
    color: #444;
    font-weight: 500;
}

.report_modal .report-main {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding: 20px;
}

.report_modal .print-group {
    overflow: hidden;
    display: flex;
    width: 850px;
    height: 1200px;
    padding: 15px 20px 5px 20px;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
}

.report_modal .print-group .report-item + .report-item {
    margin-top: 10px;
}

.report_modal .print-group .page-numbering {
    margin-top: auto;     /* 남은 공간 모두 밀어서 아래로 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    color: #111;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
}

.report_modal .print-link {
    top: 0;
    position: sticky;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #2b2b2c;
    padding: 12px;
    gap: 12px;
    width: 200px;
}

.report_modal .print-link .page-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #667eea;
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.report_modal .print-link .page-item {
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    position: relative;
}

.report_modal .print-link .page-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-right: 16px;
    flex-shrink: 0;
}

.report_modal .print-link .page-item:not(.active) .page-number {
    background: #f0f2f5;
    color: #666;
}

.report_modal .print-link .page-item.active .page-number {
    background: rgb(43 43 44);
    color: white;
}

.report_modal .print-link .page-info {
    flex: 1;
    min-width: 0;
}

.report_modal .print-link .page-title {
    color: #111;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.48px;
    word-break: keep-all;
}


.report_modal .report-main .report-item {
    /* margin: 20px 0px; */
    page-break-inside: avoid; /* PDF에서 페이지 나누기 방지 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    border-radius: 0px;
}

.report_modal .report-main .report-item .prev_none {
    color: rgba(255, 0, 0, 0.62);
    font-weight: 800;
}

.report_modal .report-main .report-item:first-child {
    margin: 0;
}

.report_modal .report-main h4 {
    color: #111;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 14px */
    letter-spacing: -0.42px;
}

.report_modal .chart_graph {
    height: 250px;
}

.report_modal .summary-content {
    color: #000;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: -0.42px;
    white-space: pre-line; /* \n 줄바꿈 허용 */
}

.report_modal .summary-content > span {
    display: block;
    word-break: keep-all;
}

.report_modal .summary-content > span .plus {
    color: #d46161;
}
.report_modal .summary-content > span .minus {
    color: #5454de;
}

.report_modal .summary-content > span:last-child {
    margin-bottom: 0;
}

.report_modal strong {
    font-weight: 800;
}

.report_modal .modal-dialog {
    max-width: fit-content;
}

.report_map_image {
    max-width: 100%;
    /* height: 100%; */
    /* object-fit: contain; */
    /* object-position: left top; */
    max-height: 250px;
}


/* =========================
   반응형
   ========================= */

@media (max-width: 1040px) {
    .report_modal .modal-dialog {
        margin: 10px;
    }
}

@media (max-width: 768px) {
    .report_modal .modal-wrap {
        width: 100%;
        margin: 0px;
    }

    .report_modal .print-link {
        display: none;
    }
}
@media (max-width: 650px) {
    .report_modal .modal-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .report_modal .modal-buttons {
        width: 100%;
        justify-content: center;
    }
}


/*!* 반응형 *!*/
/*@media (max-width: 768px) {*/
/*    .modal-wrap {*/
/*        width: 95%;*/
/*        margin: 10px;*/
/*    }*/


/*.modal-buttons {*/
/*    width: 100%;*/
/*    justify-content: center;*/
/*}*/
/*}*/

.chart_table_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chart_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}
.chart_table .category-header {
    height: 30px;
    justify-content: center;
    align-items: center;
    background: #555;

    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */
}

.chart_table .row-header {
    font-weight: 600;
    text-align: center;
    padding: 16px 20px;
    color: white;
    min-width: 80px;
}

.male-row {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.female-row {
    background: linear-gradient(135deg, #8e44ad 0%, #c0392b 100%);
}

.chart_table  td {
    padding: 4px 12px;
    text-align: center;
    border-bottom: 1px solid #c7c7c7;
    color: #495057;
}

.chart_table th,
.chart_table td {
    white-space: pre-line;
    vertical-align: middle;
    line-height: 18px;
}

.chart_table .data-cell {
    font-weight: 500;
    line-height: 1.4;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
}

.chart_table .main-number {
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-weight: 600;
    color: #222222;
    white-space: pre-line; /* \n 줄바꿈 허용 */
}
/* 줄바꿈 금지 전용 클래스 */
.nowrap {
    white-space: nowrap !important;
}
.chart_table th {
    white-space: nowrap; /* 줄바꿈 방지 */
}

.chart_table .percentage {
    font-size: 13px;
    color: #6c757d;
    margin-top: 2px;
}

.chart_table tr:hover td:not(.row-header) {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.report_modal .print-link .page-item.active .page-title {
    font-weight: 800 !important;
    color: #000 !important;
}

/* 기본 상태 */
.report_modal .print-link .page-title {
    font-weight: 500 !important;
    color: #777 !important;
}

#inqAlarmList{
    display:none;
    position:absolute;
    background:white;
    border:1px solid #ddd;
    padding:5px 8px;
    right:85px;
    top:75px;
    z-index:9999;
}

#inqAlarmList li:hover {
    background-color: #f0f0f0;
}

@media screen and (max-width: 1100px) {
    #inqAlarmList {
        top: 130px;
    }
}
@media screen and (min-width:1401px) and (max-width:1600px) {
    #main_header.gnb_many > #gnb > ul, #sub_header.gnb_many > #gnb > ul {gap: 12px;}
    #main_header.gnb_many > #gnb > ul > li, #sub_header.gnb_many > #gnb > ul > li {width: 130px; font-size: 16px; white-space: nowrap;}
    #main_header.gnb_many > #gnb .sub_menu, #sub_header.gnb_many > #gnb .sub_menu {gap: 12px;}
    #main_header.gnb_many > #gnb .sub_menu > ul, #sub_header.gnb_many > #gnb .sub_menu > ul {width: 130px; word-break: keep-all;}
}

#main_header.gnb_many > #gnb > ul > li.pc_profile_swh, #sub_header.gnb_many > #gnb > ul > li.pc_profile_swh {width: 30px;}
#main_header > #gnb > ul > li.pc_profile_swh img, #sub_header > #gnb > ul > li.pc_profile_swh img {margin: 0;}
@media screen and (min-width:1401px) and (max-width:1500px) {
    #main_header.gnb_many > #gnb > ul, #sub_header.gnb_many > #gnb > ul {gap: 5px;}
    #main_header.gnb_many > #gnb .sub_menu, #sub_header.gnb_many > #gnb .sub_menu {gap: 5px;}
}