body {
    background: #F9F9F9;
}

/* 스크롤 */
/*전체 영역에 대한 설정*/
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/*뒷 배경에 대한 설정*/
*::-webkit-scrollbar-track {
    background-color: #ECEDF5;
}

/*막대에 대한 설정*/
*::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border: 1px solid transparent;
    background-color: #D3D5E5;
    border-radius: 2px;
}

select {
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url('/static/img/selectArrow.svg') no-repeat center right 16px;
    background-size: 16px;
}

.sltFrame select::-ms-expand {
    display: none;
}

.btn_pri,
.btn_sec,
.btn_sld {
    width: auto;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    font-size: 16px;
    padding: 0 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.btn_pri {
    background: #4164E3;
    color: #fff;
}

.btn_sec {
    background: #aaa;
    color: #222;
}

.btn_sld {
    background: #fff;
    color: #222;
    border: 1px solid #DFDFDF;
}

.btn_small {
    width: auto;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    border-radius: 3px;
    box-shadow: none;
    padding: 0 20px;
    background: #e0e0e0;
    color: #222;
}

.btn_bl {
    width: 440px;
    height: 48px;
    border-radius: 3px;
    background: #4164E3;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.btn_bl:hover {
    background: #00308A;
}

.btn_bl:disabled {
    background: #DFDFDF;
}

.btn_del {
    width: 24px;
    height: 24px;
    background: url(/static/img/ico_delete.svg) no-repeat center;
}

/* 로그인 */
.loginPage {
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

.login_lf {
    background: #4164E3;
    width: 60vw;
    height: 100vh;
    position: relative;
}

.login_lf img {
    width: 60%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login_rt {
    background: #fff;
    width: 40vw;
    height: 100vh;
    padding-bottom: 50px;
    overflow: auto;
    position: relative;
}

.login_rt .wrap {
    width: 440px;
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0);
    /* padding: 100px 0; */
    padding-bottom: 100px;
}

.login_rt h1 {
    text-align: center;
    margin-bottom: 60px;
}

.login_rt h1 img {
    height: 56px;
}

.login_rt h5 {
    font-size: 14px;
    font-weight: 400;
    color: #7B7B7B;
    padding-bottom: 6px;
    border-bottom: 3px solid #DFDFDF;
    margin-bottom: 80px;
    position: relative;
}

.login_rt h5::after {
    content: '';
    height: 3px;
    background: #4164E3;
    position: absolute;
    bottom: -3px;
    left: 0;
    animation-duration: 6s;
    animation-name: slidein;
    animation-iteration-count: infinite;
}

@keyframes slidein {
    0% {
        width: 0%;
    }

    50% {
        width:

            100%;
    }

    100% {
        width:

            0%;
    }
}

.login_rt input {
    outline: none;
    border: 1px solid #DFDFDF;
    background: #fff;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    padding: 0 16px;
    width: 100%;
    height: 52px;
}

.login_rt input.sht {
    width: calc(100% - 110px);
}

.login_rt input.sht + button {
    width: 100px;
    height: 52px;
    margin-left: 6px;
    border: 1px solid #DFDFDF;
    background: #eee;
}

.login_rt input[type="checkbox"] {
    display: none;
}

.login_rt input[type="checkbox"]+label {
    padding-left: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #7B7B7B;
    background: url(/static/img/ico_loginCheckbox.svg) no-repeat center left;
}

.login_rt input[type="checkbox"]:checked+label {
    color: #222;
    background-image: url(/static/img/ico_loginCheckbox_checked.svg);
}

.login_rt input[type="checkbox"]+label a {
    display: inline-block;
    text-decoration: underline;
    font-weight: 600;
}

.login_rt .errorMent {
    margin-top: 2px;
    color: #EB5757;
    font-size: 14px;
    font-weight: 600;
    display: none;
}

.login_rt .searchResult h6 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.login_rt .resultFrame span {
    font-size: 12px;
}

.login_rt .resultFrame p {
    font-size: 16px;
    font-weight: 600;
}

.login_rt .btn_login {
    background: #4164E3;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 60px 0 20px 0;
}

.login_rt .btn_login:hover {
    background: #00308A;
}

.login_rt .btn_login:disabled {
    background: #DFDFDF;
}

.txt {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    text-align: center;
    width: 400px;
}

.txt h4 {
    margin-top: 15px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.txt h5 {
    margin-top: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.txt h6 {
    margin-top: 38px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.login_rt .txt h6 {
    color: #7B7B7B;
}

.login_rt .shortCut a {
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    word-break: keep-all;
    text-align: center;
    position: relative;
}

.login_rt .shortCut a:hover {
    text-decoration: underline;
}

.login_rt .shortCut a::before {
    content: '';
    width: 1px;
    height: 10px;
    background: #222;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.login_rt .shortCut a:first-child {
    color: #4164E3;
}

.login_rt .shortCut a:first-child::before {
    display: none;
}

/* LNB */
.lnb {
    background: #fff;
    width: 280px;
    height: 100vh;
    color: #7B7B7B;
    position: fixed;
    left: 0;
    top: 0;
    border-right: 1px solid #DFDFDF;
    transition: all 0.3s;
    z-index: 99;
}

.lnb__logo-area {
    padding: 22px 25px 40px 25px;
}

.lnb__logo {
    height: 40px;
}

.lnb__logo a {
    width: 100%;
    height: 100%;
}

.lnb__logo a img.folded {
    display: none;
}

.lnb .btn_foldCtr {
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: url('/static/img/btn_foldCtr.svg') no-repeat center;
    transition: all 0.5s;
    z-index: 9;
}

.lnb .btn_foldCtr.folded {
    transform: rotate(180deg);
}

.lnb__menu {
    margin: 30px 0;
    overflow-y: auto;
    text-align: left;
}

.lnb__menu .lnb__menuItem {
    min-height: 40px;
    margin-bottom: 6px;
    overflow: hidden;
}

.lnb__menu .lnb__menuItem:last-child {
    margin-bottom: 0;
}

.lnb__menu .lnb__menuItem a,
.lnb__menu .lnb__menuItem>div {
    padding: 0 32px;
    width: 100%;
    height: 100%;
}

.lnb__menu>.lnb__menuItem:hover>a,
.lnb__menu>.lnb__menuItem:hover>div {
    background: #F4F8FF;
}

.lnb__menu .lnb__menuItem a>img,
.lnb__menu .lnb__menuItem>div>img {
    width: 24px;
    height: 24px;
    filter: grayscale(100%);
    opacity: 0.7;
    margin-top: 8px;
}

.lnb__menu .lnb__menuItem a>span,
.lnb__menu .lnb__menuItem>div>span {
    margin-left: 12px;
    font-size: 16px;
    line-height: 40px;
    color: #7B7B7B;
}

.lnb__menu .lnb__menuItem.active {
    position: relative;
    background: #F4F8FF;
}

.lnb__menu .lnb__menuItem.active::after {
    content: '';
    width: 4px;
    height: 40px;
    background: #0D56C9;
    position: absolute;
    right: 0;
    top: 0;
}

.lnb__menu .lnb__menuItem.active>a>img,
.lnb__menu .lnb__menuItem.active>div>img {
    filter: none;
    opacity: 1;
}

.lnb__menu .lnb__menuItem.active>div>img.lnbArrow {
    transform: rotate(180deg);
}

.lnb__menu .lnb__menuItem.active>a>span,
.lnb__menu .lnb__menuItem.active>div>span {
    color: #222;
    font-weight: 600;
}

.lnb__subMenu {
    display: none;
    background: #F6F6F6;
}

.lnb__menu .lnb__menuItem.active .lnb__subMenu {
    display: block;
}

.lnb__subMenu .lnb__subMenuItem {
    height: 32px;
    margin-bottom: 0;
    overflow: hidden;
}

.lnb__subMenu .lnb__subMenuItem a {
    line-height: 32px;
}

.lnb__subMenu .lnb__subMenuItem a span {
    margin-left: 48px;
    font-size: 14px;
    color: #7B7B7B;
    font-weight: 500;
    line-height: 32px;
}

.lnb__subMenu .lnb__subMenuItem.active a span {
    color: #0D56C9;
}

/* LNB 접힌 상태일 경우 */
.lnb.folded {
    width: 70px;
}

.lnb.folded .lnb__logo-area {
    padding: 20px 15px 44px 15px;
}

.lnb.folded .lnb__logo a img {
    display: none;
}

.lnb.folded .lnb__logo a img.folded {
    display: block;
}

.lnb.folded .lnb__menu li a {
    padding: 0 20px;
}

.lnb.folded .lnb__menu li a>span {
    display: none;
}

/* 푸터 */
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 32px 18px;
}

.lnb.folded .footer {
    display: none;
}

.footer h5 {
    font-size: 12px;
    color: #7B7B7B;
    font-weight: 400;
    margin-bottom: 15px;
}

.footer h5 strong {
    font-weight: 700;
    color: #222;
}

.footer div a {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #313131;
}

.footer div a:nth-child(1) {
    margin-right: 32px;
    position: relative;
}

.footer div a:nth-child(1):after {
    content: '';
    width: 1px;
    height: 8px;
    background: #313131;
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
}

.footer p {
    margin-top: 20px;
    background: #F9F9F9;
    color: #A1A1A1;
    border-radius: 2px;
    height: 24px;
    padding: 5px 12px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: -0.6px;
}

/* 우측 컨텐츠 영역 */
.content-area {
    max-width: calc(100vw - 280px);
    min-height: 100vh;
    margin-left: 280px;
    overflow-y: auto;
    background: #F9F9F9;
    transition: all 0.3s;
}

.content-area.wided {
    max-width: calc(100vw - 68px);
    margin-left: 68px;
}

/* 우측 컨텐츠 영역 - 헤더 */
.content-area header {
    width: calc(100vw - 280px);
    height: 68px;
    background: #fff;
    padding: 22px 40px;
    position: fixed;
    left: 280px;
    top: 0;
    z-index: 98;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.content-area.wided header {
    width: calc(100vw - 70px);
    left: 70px;
}

.content-area header .pageTit img {
    filter: grayscale(100%);
    margin-right: 12px;
    width: 25px;
}

.content-area header .pageTit h2 {
    font-size: 18px;
    font-weight: 700;
}

.pageSubTit {
    margin-left: 16px;
    color: #00308A;
    font-weight: 700;
    font-size: 14px;
}

.pageSubTit span {
    display: inline-block;
    font-size: 14px;
    color: #00308A;
    font-weight: 500;
    margin-left: 24px;
    position: relative;
}

.pageSubTit span::before {
    content: '';
    width: 1px;
    height: 10px;
    background: #00308A;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.content-area header .btnList>* {
    margin-left: 28px;
}

/* 우측 컨텐츠 영역 - 컨텐츠 */
.content {
    padding-top: 68px;
    min-height: 100vh;
    /* box-shadow: inset 5px 5px 10px 5px red; */
    position: relative;
}

.content.normal .wrap {
    width: calc(100% - 160px);
    margin: 30px 80px;
}

.content.map .wrap {
    width: 100%;
    height: calc(100vh - 68px);
    max-height: calc(100vh - 68px);
    position: relative;
}

/* 컨텐츠 -  메인타이틀 */
.titleMain strong {
    font-size: 32px;
    font-weight: 700;
}

.titleMain p {
    font-size: 14px;
    font-weight: 400;
}

/* 컨텐츠 -  서브타이틀 */
.titlSub {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
}

.titlSub::after {
    content: '';
    width: calc(100% - 140px);
    height: 1px;
    background: #DFDFDF;
    position: absolute;
    right: 0;
    top: 15px;
}

.titlSub strong {
    font-size: 20px;
    font-weight: 700;
}

.titlSub span {
    font-size: 14px;
    font-weight: 400;
    margin-left: 4px;
}

/* 컨텐츠 -  타이틀 */
.title {
    font-size: 18px;
    color: #313131;
    font-weight: 400;
}

/* 컨텐츠 - 박스 */
.box {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
}

.box.big {
    padding: 40px;
}

.box.gray {
    background: #EFEFEF;
}

.box.sub {
    padding: 10px 20px;
}

.box.big .f-lf {
    padding-right: 30px;
    width: 40%;
}

.box.big .f-rt {
    padding-left: 30px;
    width: 60%;
    border-left: 1px dashed #bbb;
}

/* 컨텐츠 - 대시보드 요약 */
.dashboard .summaryFrame {
    display: grid;
    gap: 19px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 180px;
    margin-bottom: 40px;
}

.dashboard .summaryFrame .box {
    padding: 17px 28px;
}

.dashboard .summaryFrame .box .row .badgeFrame {
    padding-right: 7px;
    z-index: 2;
    background: #fff;
}

.dashboard .summaryFrame .box .row .badgeFrame .badge {
    display: inline-block;
    padding: 0 12px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
}

.dashboard .summaryFrame .box .row .badgeFrame .badge.blue {
    background: #EFF3FF;
    color: #5472EA;
}

.dashboard .summaryFrame .box .row .badgeFrame .badge.green {
    background: #E9F9F3;
    color: #16AB76;
}

.dashboard .summaryFrame .box .row .badgeFrame .badge.pink {
    background: #FFEEF2;
    color: #FE6A8A;
}

.dashboard .summaryFrame .box .row:nth-child(1) {
    margin-bottom: 16px;
}

.dashboard .summaryFrame .box .row:nth-child(1) h4 {
    font-size: 16px;
    font-weight: 500;
}

.dashboard .summaryFrame .box .row:nth-child(1) h4 strong {
    font-size: 46px;
    margin-right: 8px;
    font-weight: 500;
}

.dashboard .summaryFrame .box .row:nth-child(2) {
    position: relative;
    margin-bottom: 10px;
    height: 22px;
}

.dashboard .summaryFrame .box .row:nth-child(2)::before {
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px dashed #DFDFDF;
    position: absolute;
    left: 0;
    top: 12px;
}

.dashboard .summaryFrame .box .row:nth-child(3) h3 {
    font-size: 16px;
    font-weight: 700;
}

.dashboard .summaryFrame .box .row:nth-child(3) .date {
    font-size: 12px;
    font-weight: 400;
    color: #7B7B7B;
    padding-left: 16px;
    background: url(/static/img/ico_clock.svg) no-repeat center left;
    background-size: 16px;
}

/* 컨텐츠 - 대시보드 그래프 */
.graphFrame {
    display: grid;
    row-gap: 20px;
    column-gap: 18px;
    grid-template-columns: repeat(2, calc(50% - 9px));
    grid-template-rows: repeat(2, 276px);
}

.graphFrame.full {
    display: block;
}

.graphFrame .box {
    padding: 17px 30px;
}

.graphFrame .box h3 {
    min-height: 26px;
    line-height: 26px;
}

.graphFrame .box h3 strong {
    font-size: 18px;
    font-weight: 700;
}

.graphFrame .box h3 span {
    font-size: 14px;
    font-weight: 400;
    margin-left: 4px;
}

.graphFrame .box .legendFrame {
    text-align: right;
}

.graphFrame .box .legend {
    width: auto;
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
    color: #7B7B7B;
    padding-left: 12px;
    position: relative;
    margin-left: 12px;
}

.graphFrame .box .legend::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.graphFrame .box .legend.bl::before {
    background: #5557F7;
}

.graphFrame .box .legend.pink::before {
    background: #FE6A8A;
}

.graphFrame .box .legend.mt::before {
    background: #00B6C7;
}

.graphFrame .box .legend.sky::before {
    background: #A8D6FF;
}

.graphFrame .box .legend span {
    font-size: 10px;
    margin-left: 3px;
    color: #7B7B7B;
}

.graphFrame .box .graph {
    text-align: center;
    padding: 10px 30px;
    background: #FBFBFC;
    border-radius: 4px;
    height: calc(100% - 35px);
}

.graphFrame .box .graph img {
    width: 95%;
}

.graphFrame .box .txtFrame {
    padding: 10px 30px;
    border-radius: 4px;
}

.graphFrame .box .txtFrame h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}

.graphFrame .box .txtFrame dt {
    color: #4A4DE0;
    margin-right: 24px;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}

.graphFrame .box .txtFrame dt::after {
    content: '';
    width: 1px;
    height: 10px;
    background: #5472EA;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.graphFrame .box .txtFrame dd {
    font-size: 14px;
    font-weight: 600;
}

/* 맵 페이지 */
.content.map .mapContainer {
    width: 100%;
    height: 100%;
}

/* 설명팝업 버튼리스트 */
.content.map .popViewList {
    background: #fff;
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #222;
}

.content.map .popViewItem {
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 6px;
    border-right: 1px solid #222;
    color: #222;
    word-break: keep-all;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    position: relative;
}

.content.map .popViewItem.active {
    background: #7B7B7B;
    color: #fff;
}

.content.map .popViewItem:last-child {
    border-right: none;
}

.content.map .popViewItem img {
    padding: 0 16px;
}

.content.map .popViewItem .popup {
    display: none;
    position: absolute;
    left: 0;
    top: 72px;
    background: #fff;
    min-width: 300px;
    max-width: 50vw;
    text-align: left;
    border-radius: 2px;
    border: 1px solid #222;
    word-break: keep-all;
    z-index: 9;
}

.content.map .popViewItem.active .popup {
    display: block;
}

.content.map .popViewItem .popup .tit {
    padding: 9px 12px;
    border-bottom: 1px solid #222;
}

.content.map .popViewItem .popup .tit .popViewClose {
    width: 24px;
    height: 24px;
    background: url(/static/img/ico_x.svg) no-repeat center;
}

.content.map .popViewItem .popup .cont {
    padding: 10px 12px;
    word-break: keep-all;
    overflow: auto;
    max-height: 60vh;
    max-width: 45vw;
}

.content.map .popViewItem:nth-child(2) table th,
.content.map .popViewItem:nth-child(2) table th span {
    font-weight: 700;
    color: #0D56C9;
}

.content.map .popViewItem:nth-child(2) table th {
    padding-right: 16px;
}

.content.map .popViewItem:nth-child(3) .table-title {
    color: #0D56C9;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}

.content.map .popViewItem:nth-child(3) table {
    margin-bottom: 20px;
    border-top: 2px solid rgba(34, 34, 34, 0.5);
}

.content.map .popViewItem:nth-child(3) table th,
.content.map .popViewItem:nth-child(3) table td {
    text-align: center;
    padding: 8px 15px;
    min-height: 32px;
    border-bottom: 1px solid rgba(34, 34, 34, 0.2);
}

/* 핀 상세내용 */
.fin__cont {
    background: #fff;
    min-width: 300px;
    border-radius: 2px;
    border: 1px solid #222;
    word-break: keep-all;
    z-index: 9;
}

.fin__cont .tit {
    padding: 9px 12px;
    border-bottom: 1px solid #222;
    font-size: 14px;
    font-weight: 600;
}

.fin__cont .tit .popViewClose {
    width: 24px;
    height: 24px;
    background: url(/static/img/ico_x.svg) no-repeat center;
}

.fin__cont .cont {
    padding: 10px 12px;
    word-break: keep-all;
    overflow: auto;
    max-height: 60vh;
    max-width: 300px;
}

.fin__cont .cont h3 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.fin__cont .cont h4 {
    font-size: 13px;
    font-weight: 400;
}

/* 지도 탭 */
.tabList {
    background: #EFEFEF;
    width: 100%;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.content.map.verTab .tabList {
    position: absolute;
    top: 0;
    left: 0;
}

.tabList li {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: #7B7B7B;
    width: 160px;
    text-align: center;
}

.tabList li.active {
    color: #00308A;
    font-weight: 700;
    border-bottom: 3px solid #00308A;
}

/* 사이드 컨텐츠 */
.content.map .sideCont {
    position: absolute;
    top: 20px;
    right: 20px;
}

.content.map.verTab .sideCont {
    position: absolute;
    top: 68px;
    right: 20px;
}

.dateFrame {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

.dateFrame .todayDate {
    font-size: 18px;
    margin-bottom: 8px;
    color: #313131;
}

/* 검색필터 */
.filter-frame {
    margin-bottom: 8px;
}

.filter__list *:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.filter__list *:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.filter__list select,
.filter__list input[type="text"] {
    outline: none;
    border: 1px solid #222;
    padding: 0 20px;
    height: 40px;
    border-right: none;
}

.filter__list select {
    width: 280px;
}

.filter__list input.inp_date {
    background: #fff url(/static/img/ico_calendar.svg) no-repeat center right 20px;
    background-size: 24px;
}

.filter__list input.inp_address {
    width: 540px;
}

.filter__list .btn_fltSrch {
    width: 40px;
    height: 40px;
    border: 1px solid #222;
    background: #DFDFDF url(/static/img/ico_search.svg) no-repeat center;
    background-size: 24px;
}

.content.map .sideCont .graph-slide {
    margin-bottom: 12px;
    border-radius: 2px;
    background: #fff;
    padding: 0 20px;
    border: 1px solid #222;
}

.content.map .sideCont .graph-slide:last-child {
    margin-bottom: 0;
}

.content.map .sideCont .graph-slide .slide__title {
    padding: 14px 0;
    font-size: 14px;
    font-weight: 500;
}

.content.map .sideCont .graph-slide .slide__title.on {
    border-bottom: 1px solid #222;
}

.content.map .sideCont .graph-slide .slide__title .slide__btn {
    width: 24px;
    height: 24px;
    background: url(/static/img/ico_slideTitArrow.svg) no-repeat center;
}

.content.map .sideCont .graph-slide .slide__title.on .slide__btn {
    transform: rotate(180deg);
}

.content.map .sideCont .graph-slide .slide__cont {
    margin: 20px 0;
    max-height: calc(50vh - 180px);
    max-width: 100%;
    overflow: auto;
}

.content.map .sideCont .graph-slide .slide__cont .graph-box__cont {
    max-height: calc(50vh - 180px);
}

/* 중앙위치 컨텐츠 */
.centerCont {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.centerCont img {
    width: 52px;
    height: 52px;
    margin-bottom: 28px;
}

.centerCont h3 {
    margin-bottom: 36px;
    font-size: 32px;
    font-weight: 700;
}

.centerCont h5 {
    font-size: 16px;
    font-weight: 400;
}

.centerCont form {
    margin: 0 auto;
    margin-top: 48px;
    width: 440px;
}

.centerCont input {
    outline: none;
    border: 1px solid #DFDFDF;
    background: #fff;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    padding: 0 16px;
    width: 100%;
    height: 52px;
}

.centerCont .helpMent {
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: #7B7B7B;
    margin-top: 10px;
}

/* 테이블 */
.tableFrame {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.tableFrame .tableTit {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 8px;
}

.table {
    width: 100%;
    border-top: 2px solid rgba(34, 34, 34, 0.5);
    border-bottom: 2px solid rgba(34, 34, 34, 0.5);
}

.table tr th,
.table tr td {
    border-bottom: 1px solid rgba(34, 34, 34, 0.2);
    text-align: center;
    height: 40px;
    padding: 4px 12px;
}

.table tr th {
    font-size: 13px;
    font-weight: 600;
    color: #222222;
}

.table tr td {
    font-size: 13px;
    font-weight: 400;
    color: #222222;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
    border-bottom: none;
}

.table.type-02 tr th {
    text-align: left;
    background: #FBFBFC;
}

.table.type-02 tr td {
    text-align: left;
}

.table.type-03 tr th {
    text-align: center;
    background: #FBFBFC;
}

.table.type-03 tr td {
    text-align: center;
}

.table input[type="text"],
.table input[type="password"],
.table select {
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    outline: none;
    min-width: 288px;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
}

/* 보고서 미리보기 */
.view-area {
    background: #EFEFEF;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    position: relative;
    min-height: 750px;
    height: calc(100% - 50px);
    max-height: 870px;
    overflow: auto;
}

.view-area p.viewInfo {
    text-align: center;
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.view-area .report {
    width:100%;
    margin: 0 auto;
    background: none;
    border:none;
    box-shadow: none;
}

.view-area .report .sizeA4 {
	width: 21.0cm;
    max-width: 21.0cm;
    /* 21.cm = 793.69px */
    /* width:100%; */
}

.inp-frame {
    min-height: 40px;
    line-height: 40px;
    font-size: 14px;
}

.inp-frame input[type="text"] {
    width: 240px;
    outline: none;
    border: 1px solid #222;
    padding: 0 20px;
    height: 40px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inp-frame input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

.inp-frame input[type="file"]+label {
    display: inline-block;
    margin-left: 10px;
}

.inp-frame .inp-tit {
    width: 120px;
    min-height: 40px;
    line-height: 40px;
}

.inp-frame .inp-tit h5 {
    font-size: 16px;
    font-weight: 600;
}

.inp-frame .inp-tit h6 {
    font-size: 14px;
    font-weight: 400;
}

.inp-frame select {
    min-width: 240px;
    outline: none;
    border: 1px solid #222;
    padding: 0 20px;
    height: 40px;
    border-radius: 4px;
}

.info-bubble {
    position: relative;
    background: rgba(65, 100, 227, 0.15);
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    margin-top: 11px;
    margin-left: 10px;
    display: inline-block;
    font-size: 12px;
    color: #00308A;
    font-weight: 500;
}

.info-bubble span {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    display: none;
    padding: 6px 12px;
    background: #FBFBFC;
    border: 1px solid #EFF3FF;
    border-radius: 4px;
    font-size: 12px;
}

.info-bubble:hover span {
    display: block;
    width: max-content;
    z-index: 9;
}

.inp-frame .chips-frame {
    width: 240px;
    border: 1px solid #222;
    height: 88px;
    padding: 0 8px;
    overflow: auto;
    border-radius: 4px;
    background: #fff;
}

.inp-frame .chips-frame .chips {
    width: auto;
    display: inline-block;
    padding: 2px 12px;
    line-height: 20px;
    height: 24px;
    font-size: 14px;
    margin-right: 6px;
    margin-bottom: 2px;
    background: #EFF3FF;
    border-radius: 20px;
}

.inp-frame .chips-frame .chips button {
    margin-left: 4px;
}

.optBtn {
    position: absolute;
    bottom: 0;
    right: 0;
}

.inp-frame .br_rsp,
.inp-frame .br_rsp2 {
    display: none;
}

/* 페이지네이션 */
.pagination {
    text-align: center;
    margin-top: 40px;
}

.pagination ul li {
    line-height: 40px;
}

.pagination ul li a {
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 40px;
    height: 40px;
    font-size: 14px;
    color: #4f4f4f;
    margin: 0 2px;
}

.pagination ul li.active a {
    color: #fff;
    font-weight: bold;
    background: #0D56C9;
    border-radius: 50%;
}

.pagination ul li:hover a {
    text-decoration: underline;
}

.pagination a {
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}

.pagination .start,
.pagination .end,
.pagination .prev,
.pagination .next {
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-indent: -9999px;
    text-align: center;
    vertical-align: middle;
}

.pagination .start {
    background: url("/static/img/ico_paging_front.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .start:hover {
    background: url("/static/img/ico_paging_front_hover.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .end {
    background: url("/static/img/ico_paging_end.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .prev {
    background: url("/static/img/ico_paging_prev.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .end:hover {
    background: url("/static/img/ico_paging_end_hover.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .prev:hover {
    background: url("/static/img/ico_paging_prev_hover.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .next:hover {
    background: url("/static/img/ico_paging_next_hover.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .next {
    background: url("/static/img/ico_paging_next.svg") 0 0 no-repeat;
    background-size: contain;
}

.pagination .prev {
    margin-right: 12px;
}

.pagination .next {
    margin-left: 15px;
}

.pagination .start {
    margin-right: 8px;
}

.pagination .end {
    margin-left: 8px;
}

/* 모달팝업 */
.popup {
    display: none;
}

.modalPopup {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 900;
    display: none;
}

.modalPopup .popupClose {
    background: url(/static/img/ico_x.svg) no-repeat center;
    background-size: 30px;
    width: 30px;
    height: 30px;
}

.modalPopup__inner {
    background: #fff;
    padding: 50px;
    border-radius: 5px;
    width: 50vw;
    height: auto;
    max-height: calc(100vh - 300px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modalPopup__inner.small {
    width: 500px;
}

.modalPopup__title {
    margin-bottom: 40px;
}

.modalPopup__inner.small .modalPopup__title {
    margin-bottom: 20px;
}

.modalPopup__title h3 span {
    font-size: 20px;
    font-weight: 700;
    color: #4164E3;
}

.modalPopup__inner.small .modalPopup__title h3 span {
    font-size: 30px;
    font-weight: 600;
    color: #4164E3;
}

.modalPopup__title .btn_more {
    filter: invert(100%);
}

.modalPopup__cont {
    width: 100%;
    max-height: calc(100vh - 500px);
    overflow: auto;
}
.modalPopup__cont .txt-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.modalPopup__cont .txt-frame p {
    margin-bottom: 10px;
    word-break: keep-all;
    font-size: 14px;
}

.modalPopup__cont .txt-frame p:last-child {
    margin-bottom: 0;
}

.modalPopup__inner.small .modalPopup__cont ul li {
    margin-bottom: 6px;
    display: flex;
}

.modalPopup__inner.small .modalPopup__cont ul li strong {
    width: 80px;
    margin-right: 10px;
}

.modalPopup__inner.small .modalPopup__cont ul li span {
    width: calc(100% - 90px);
    word-break: keep-all;
}

.modalPopup__cont .tableFrame {
    height: calc(100% -80px);
}

.modalReport .modalPopup__cont {
	max-height: calc(100vh - 580px);
	border-top: 2px solid rgba(34, 34, 34, 0.5);
    border-bottom: 2px solid rgba(34, 34, 34, 0.5);
}

.modalReport .table {
	border-top: 0;
	border-bottom: 0;
}

/* 결제 플랜 안내 페이지 */
.planFrame {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.planFrame>div {
    padding: 38px 30px 50px 30px;
    margin: 0 20px;
    text-align: center;
    width: 360px;
    height: 478px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.18);
}

.planFrame h3 {
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 500;
    color: #6A6A6A;
}

.planFrame .plan_prm h3 {
    color: #4164E3;
}

.planFrame .plan_ent h3 {
    color: #0F3F8C;
}

.planFrame h4 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 400;
    color: #6A6A6A;
}

.planFrame h4 strong {
    font-size: 40px;
    font-weight: 600;
    color: #222;
    margin-right: 6px;
}

.planFrame .btn_plan {
    width: 300px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: #9E9E9E;
    margin: 0 auto 40px auto;
}

.planFrame .plan_prm .btn_plan {
    background: #4164E3;
}

.planFrame .plan_ent .btn_plan {
    background: #0F3F8C;
}

.planFrame ul {
    text-align: left;
    padding: 0 28px;
}

.planFrame ul li {
    padding-left: 26px;
    line-height: 34px;
    font-size: 16px;
    font-weight: 500;
    color: #A4A4A4;
}

.planFrame ul li.checked {
    font-weight: 600;
    color: #000000;
    position: relative;
}

.planFrame ul li.checked::before {
    content: url(/static/img/ico_check01.svg);
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
}

.planFrame .plan_prm ul li.checked::before {
    content: url(/static/img/ico_check02.svg);
}

.planFrame .plan_ent ul li.checked::before {
    content: url(/static/img/ico_check02.svg);
}
/* 인풋 효과 */
input:disabled {
    background: #F9F9F9;
}

input:disabled:hover {
    border-color: #e0e0e0;
}

input:hover,
input:focus {
    border-color: #4F95FF;
}

input:invalid {
    border-color: #FF3333;
    color: #FF3333;
}


/* 모바일 화면 */
@media screen and (min-width: 1031px) {
    .onlyMob {
        display: none !important;
    }
}

@media screen and (max-width: 1870px) {

    /* 보고서 미리보기 */
    .inp-frame .br_rsp {
        display: block;
    }
}

@media screen and (max-width: 1680px) {

    /* 컨텐츠 - 대시보드 요약 */
    .dashboard .summaryFrame {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 180px);
    }

    .dashboard .summaryFrame .box .row:nth-child(3) h3 {
        font-size: 16px;
    }

    /* 컨텐츠 - 대시보드 그래프 */
    .graphFrame {
        gap: 12px;
        grid-template-columns: 100%;
        grid-template-rows: repeat(4, 276px);
    }


    .dateFrame .filter__list input {
        width: calc((100% - 40px)/3);
    }


    /* 보고서 미리보기 */
    .box.big.flex-stretch {
        display: block;
    }

    .box.big .f-lf,
    .box.big .f-rt {
        width: 100%;
    }

    .box.big .f-lf {
        padding-right: 0;
        padding-bottom: 20px;
    }

    .box.big .f-rt {
        border-left: none;
        padding-left: 0;
        padding-top: 20px;
        border-top: 1px dashed #bbb;
    }
    
    /* 결제 플랜 안내 페이지 */
    .planFrame>div {
        margin: 0 6px;
        padding: 38px 20px 50px 20px;
    }

    .planFrame .btn_plan {
        width: 250px;
    }

    .planFrame ul {
        padding: 0 20px;
    }
}

@media screen and (max-width: 1450px) {
    .imgFrame .plan_free {
        padding-right: 50px;
    }

    .imgFrame .plan_prm {
        padding-left: 50px;
        border-left: 1px dashed #B8B8B8;
    }

    .imgFrame img {
        width: 300px;
    }
    
    /* 결제 플랜 안내 페이지 */
    .planFrame {
        display: block;
    }

    .planFrame>div {
        width: auto;
        height: 100%;
        padding: 30px 50px;
        display: flex;
        margin-bottom: 20px;
    }

    .planFrame>div:last-child {
        margin-bottom: 0;
    }

    .planFrame .btn_plan {
        margin-bottom: 0;
    }

    .planFrame ul {
        margin-left: 20px;
    }
}

@media screen and (max-width: 1180px) {
    .login_lf img {
        width: 70%;
    }

    .login_rt .wrap {
        width: calc(100% - 40px);
    }

    .login_rt h1 img {
        height: 40px;
    }

    .imgFrame .plan_free {
        padding-right: 30px;
    }

    .imgFrame .plan_prm {
        padding-left: 30px;
        border-left: 1px dashed #B8B8B8;
    }

    .imgFrame img {
        width: 250px;
    }
    
    /* 결제 플랜 안내 페이지 */
    .planFrame {
        display: block;
    }

    .planFrame>div {
        display: block;

    }

    .planFrame .btn_plan {
        width: 100%;
    }

    .planFrame ul {
        margin-left: 0;
        margin-top: 20px;
    }
}

@media screen and (max-width: 1030px) {
    .onlyPc {
        display: none !important;
    }

    /* 로그인 */
    .login_lf {
        display: none;
    }

    .login_rt {
        width: 100vw;
    }

    /* 컨텐츠 영역 */
    .content-area {
        min-width: 100vw;
        max-width: 100vw;
        margin-left: 0;
    }

    .content-area.wided {
        max-width: 100vw;
        margin-left: 0;
    }

    /* 컨텐츠 영역 - 헤더 */
    .content-area header {
        width: 100%;
        height: 56px;
        left: 0;
        box-shadow: none;
        border: 1px solid #DFDFDF;
        padding: 16px 20px;
    }

    .content-area.wided header {
        width: 100vw;
        left: 0;
    }

    .content-area header .btn_hamburger {
        background: url(/static/img/hamburger.svg) no-repeat center;
        width: 24px;
        height: 24px;
    }

    .content-area header .mainTopTit {
        font-size: 16px;
        font-weight: 700;
        line-height: 23px;
        margin-left: 12px;
    }

    .popNav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.2);
        display: none;
    }

    .popNav__inner {
        background: #fff;
        width: 78%;
        height: 100%;
        position: relative;
    }

    .popNav__inner .top {
        width: 100%;
        height: 56px;
        padding: 16px 20px;
        border-bottom: 1px solid #DFDFDF;
    }

    .popNav__inner .popupClose {
        background: url(/static/img/close_small.svg) no-repeat center;
        background-size: 24px;
        width: 24px;
        height: 24px;
    }

    .popNav__inner .btnList {
        background: #EFEFEF;
        border-bottom: 1px solid #DFDFDF;
        height: 40px;
    }

    .popNav__inner .btnList button {
        padding: 0 12px;
        position: relative;
        margin: 0;
        height: 40px;
        font-size: 14px;
        font-weight: 500;
    }

    .popNav__inner .btnList button::after {
        content: '';
        width: 1px;
        height: 10px;
        background: #222;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .popNav__inner .btnList button:last-child:after {
        display: none;
    }

    .popNav__inner .btnList button:hover {
        text-decoration: underline;
    }

    .popNav__inner .scrollArea {
        max-height: calc(100vh - 96px);
        overflow: auto;
    }

    .popNav__inner .scrollArea .footer {
        position: static;
    }

    .popNav__inner .menuList li {
        width: 100%;
        min-height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #DFDFDF;
        font-size: 16px;
        font-weight: 500;
    }

    .popNav__inner .menuList li>a,
    .popNav__inner .menuList li>span {
        padding-left: 32px;
        display: block;
    }

    .popNav__inner .menuList li:hover>a,
    .popNav__inner .menuList li:hover>span {
        background: #F4F8FF;
        font-weight: 700;
    }

    .popNav__inner .menuList li .subMenuList a {
        color: #7B7B7B;
        padding-left: 50px;
    }

    .popNav__inner .menuList li .subMenuList a:hover {
        color: #0D56C9;
    }

    .popNav__inner .lnb__subMenu {
        display: block;
    }

    .popNav__inner .lnb__subMenu .lnb__subMenuItem:last-child {
        border-bottom: none;
    }

    .popNav__inner .lnb__subMenu .lnb__subMenuItem a span {
        margin-left: 18px;
    }

    /* 컨텐츠 영역 - 컨텐츠 */
    .content {
        padding-top: 56px;
    }

    .content.normal .wrap {
        width: calc(100% - 40px);
        margin: 20px;
    }

    /* 컨텐츠 -  서브타이틀 */
    .titlSub::after {
        display: none;
    }

    .box.big {
        padding: 20px;
    }

    /* 컨텐츠 - 대시보드 요약 */
    .dashboard .summaryFrame {
        gap: 12px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 160px);
        margin-bottom: 20px;
    }

    .dashboard .summaryFrame .box {
        padding: 22px 28px;
    }

    .dashboard .summaryFrame .box .row:nth-child(1) {
        margin-bottom: 8px;
    }

    .dashboard .summaryFrame .box .row:nth-child(1) h4 strong {
        font-size: 38px;
        margin-right: 8px;
    }

    .dashboard .summaryFrame .box .row:nth-child(3) h3 {
        font-size: 16px;
    }

    /* 컨텐츠 - 대시보드 그래프 */
    .graphFrame {
        gap: 12px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 276px);
    }

    .graphFrame .box {
        padding: 20px;
    }

    .graphFrame .box h3 {
        min-height: 23px;
        line-height: 1;
        width: 70%;
    }

    .graphFrame .box h3 strong {
        font-size: 16px;
        display: block;
    }

    .graphFrame .box h3 span {
        font-size: 11px;
        margin-left: 0;
    }

    .graphFrame .box .legendFrame {
        width: 30%;
    }

    .graphFrame .box .legendFrame.flex-end {
        display: block;
    }

    .graphFrame .box .graph {
        height: calc(100% - 55px);
    }

    .graphFrame .box .graph img {
        height: 100%;
    }

    .pageSubTit {
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 40px;
        margin-left: 0;
        padding: 10px 28px;
        border-bottom: 1px solid #DFDFDF;
    }

    /* 설명팝업 버튼리스트 */
    .content.map .popViewList {
        top: 52px;
    }

    .content.map .popViewItem .popup {
        top: 60px;
        left: -0.5px;
        max-width: calc(100vw - 160px);
        min-width: 0;
    }

    .content.map .popViewItem .popup .cont {
        max-height: 80vh;
        max-width: none;
    }

    /* 지도 탭 */
    .tabList {
        padding: 0;
    }

    .tabList li {
        width: 50%;
    }

    /* 사이드 컨텐츠 */
    .content.map .sideCont {
        top: 124px;
        left: 20px;
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    /* 검색필터 */
    .filter__list input[type="text"] {
        width: calc((100% - 40px)/3);
    }

    .filter__list.selectSch {
        display: block;
    }

    .filter__list.selectSch select {
        width: 100%;
        border-right: 1px solid #222;
        margin-bottom: 4px;
    }

    .filter__list.selectSch input.inp_address {
        width: calc(100% - 40px);
    }

    .filter__list.selectSch .btn_fltSrch {
        float: right;
    }

    .content.map .sideCont .graph-slide .slide__cont {
        height: calc(50vh - 240px);
    }

    /* 중앙위치 컨텐츠 */
    .centerCont {
        position: absolute;
        left: 50%;
        top: 176px;
        transform: translate(-50%, 0);
    }

    .centerCont h3 {
        font-size: 20px;
    }

    .centerCont h5 {
        font-size: 14px;
    }

    .btn_bl {
        width: calc(100vw - 40px);
    }

    /* 모달팝업 */
    .modalPopup__inner {
        width: 90vw;
        padding: 30px 20px;
    }
    
    /* 결제 플랜 안내 페이지 */
    .planFrame {
        display: flex;
    }

    .planFrame>div {
        width: calc(100% / 3);
        height: 450px;
        padding: 30px 20px;
        margin-bottom: 0;
    }

    .planFrame h3 {
        font-size: 24px;
    }

    .planFrame h4 strong {
        font-size: 30px;
    }

    .planFrame .btn_plan {
        font-size: 16px;
    }

    .planFrame ul {
        padding: 0;
    }

    .planFrame ul li {
        font-size: 14px;
    }
}

@media screen and (max-width: 770px) {

    /* 결제 플랜 안내 페이지 */
    .planFrame {
        display: block;
    }

    .planFrame>div {
        width: 360px;
        height: auto;
        margin: 0 auto 20px auto;
    }

    .planFrame .btn_plan {
        width: 300px;
    }

    .planFrame ul {
        padding: 0 28px;
    }
}

@media screen and (max-width: 650px) {
    .imgFrame {
        display: block;
    }

    .imgFrame .plan_free {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .imgFrame .plan_prm {
        padding-left: 0;
        border-left: none;
    }

    .imgFrame img {
        width: 250px;
    }

    .pagination .start,
    .pagination .end {
        display: none;
    }

    /* 보고서 미리보기 */
    .box .f-lf .inp-frame {
        display: block;
    }

    .box .f-lf .gray {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .box .f-lf .btn_pri {
        width: 100%;
    }

    .inp-frame input[type="text"],
    .inp-frame select,
    .inp-frame .chips-frame {
        max-width: 100%;
        width: 100%;
    }

    .inp-frame .btn_sec {
        width: 80px;
        font-size: 14px;
    }

    .info-bubble span {
        max-width: 150px;
    }

    .inp-frame .br_rsp2 {
        display: block;
    }

    .view-area p {
        font-size: 14px;
    }
}


@media screen and (max-width: 450px) {

    /* 결제 플랜 안내 페이지 */
    .planFrame {
        display: block;
    }

    .planFrame>div {
        width: auto;
        height: auto;
        padding: 20px 14px;
    }

    .planFrame .btn_plan {
        width: 100%;
    }

    .planFrame ul {
        padding: 0 15px;
    }
}


/* 토양수분 수분통계 표 영역 20251217 */
.moist-table{
  width:100%;
  overflow-x:auto;                 /* 280에서도 최후방어 */
  -webkit-overflow-scrolling: touch;
}

.moist-table__table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  border-bottom:2px solid #ccc;
}

.moist-table__table thead th{
  color:#4a4ee3;                   /* 이미지의 파란 헤더 */
  font-weight:700;
  text-align:center;
  padding: clamp(8px, 1.6vw, 14px) clamp(8px, 1.8vw, 16px);
  font-size: clamp(12px, 1.2vw, 18px);
  border-bottom:2px solid #ccc; /* 헤더 아래 굵은 라인 */
}

.moist-table__table tbody th,
.moist-table__table tbody td{
  padding: clamp(10px, 1.9vw, 16px) clamp(8px, 1.8vw, 16px);
  font-size: clamp(12px, 1.25vw, 18px);
  border-bottom:1px solid #ddd; /* 행 사이 얇은 라인 */
  white-space:nowrap;
}

.moist-table__table tbody tr:last-child th,
.moist-table__table tbody tr:last-child td{
  border-bottom:none;
}

.moist-table__depth{
  text-align:left;
  font-weight:400;                 /* 이미지처럼 굵지 않게 */
  width: clamp(70px, 14vw, 110px); /* 좌측 폭 */
}

.moist-table__table tbody td{
  text-align:center;
  font-variant-numeric: tabular-nums;
}

/* 280px 극소폭 보정 */
@media (max-width:280px){
  .moist-table__table thead th,
  .moist-table__table tbody th,
  .moist-table__table tbody td{
    padding: 8px 6px;
  }
}

/* 상단 영역 20251217 */
:root{
  --line:#dfe3e8;
  --soft:#f6f7f9;
  --on:#1287d9;
  --text:#111;
  --muted:#555;
}
/* 
.filterbar{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding: clamp(8px, 1.2vw, 12px);
  box-sizing:border-box;
} */

.filterbar__inner{
  display:flex;
  align-items:center;
  gap: clamp(8px, 1.1vw, 12px);
  flex-wrap:wrap;                 /* ✅ 280에서 자연스럽게 줄바꿈 */
}

/* 공통 블록 */
.fb{
  display:flex;
  align-items:center;
  gap: clamp(8px, 0.9vw, 10px);
  min-width:0;
}

/* 세로 구분선: 측정시간/기간/심도 앞 */
.fb--sep{
  position:relative;
  padding-left: clamp(10px, 1.2vw, 14px);
  margin-left: clamp(2px, .4vw, 4px);
}
.fb--sep::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height: clamp(22px, 2.2vw, 30px);
  background:#cfd6dd;
  opacity:.9;
}

/* 라벨 */
.fb__label{
  font-size: clamp(12px, 1.0vw, 14px);
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

/* ===== select ===== */
.fb__select{
  position:relative;
  min-width: clamp(170px, 18vw, 240px);
}
.fb__select select{
  width:100%;
  height: clamp(30px, 2.4vw, 34px);
  border:1px solid var(--line);
  border-radius:3px;
  padding: 0 34px 0 10px;
  font-size: clamp(12px, 1.0vw, 13px);
  background:#fff;
  color:#222;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
  box-sizing:border-box;
}
.fb__select::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  background:url("/static/img/icon03.png") no-repeat center/contain;
  pointer-events:none;
  opacity:.95;
}

/* ===== buttons ===== */
.fb__btns{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
}
.fb__btn{
  height: clamp(30px, 2.4vw, 34px);
  padding: 0 clamp(10px, 1.1vw, 14px);
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
  font-size: clamp(12px, 1.0vw, 13px);
  font-weight:700;
  color:#555;
  cursor:pointer;
  white-space:nowrap;
}
.fb__btn.is-on{
  background:var(--on);
  border-color:var(--on);
  color:#fff;
}

/* 기간 쪽 day 버튼은 조금 타이트 */
.fb__btns--days .fb__btn{
  padding: 0 clamp(9px, 1.0vw, 12px);
}

/* ===== date ===== */
.fb__date{
  position:relative;
  display:flex;
  align-items:center;
}
.fb__date input[type="date"]{
  height: clamp(30px, 2.4vw, 34px);
  border:1px solid var(--line);
  border-radius:3px;
  padding: 0 25px 0 10px;   /* 오른쪽 아이콘 공간 */
  font-size: clamp(12px, 1.0vw, 13px);
  color:#444;
  background:#fff;
  outline:none;
  box-sizing:border-box;
  width: clamp(128px, 12vw, 150px);
}

/* 크롬 기본 달력 아이콘 숨김(우리 아이콘 사용) */
.fb__date input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  width:34px;
  height:100%;
  cursor:pointer;
}

/* 달력 버튼(아이콘) */
.fb__calbtn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border:0;
  background:url("/static/img/icon02.png") no-repeat center/contain;
  cursor:pointer;
  padding:0;
}

.fb__tilde{
  color:#999;
  font-weight:800;
  margin:0 2px;
  white-space:nowrap;
}

/* ===== depth button ===== */
.fb__btn--depth{
  padding: 0 clamp(12px, 1.1vw, 16px);
}

/* ===== submit ===== */
.fb--submit{ margin-left:auto; } /* 오른쪽 끝으로 */
.fb__submit{
  height: clamp(30px, 2.4vw, 34px);
  padding: 0 clamp(12px, 1.2vw, 16px);
  border:1px solid #0f6fb3;
  background:#1287d9;
  color:#fff;
  border-radius:3px;
  font-size: clamp(12px, 1.0vw, 13px);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap;
}
.fb__submit-ico{
  width:16px;
  height:16px;
  background:url("/static/img/icon01.png") no-repeat center/contain;
}

/* ===== 반응형 ===== */
@media (max-width:1280px){
  .dateFrame {flex-wrap: wrap-reverse;}
}

@media (max-width: 900px){
  .fb--submit{ margin-left:0; }          /* 줄바꿈 시 자연스럽게 */
}
/* ✅ 680 이하: 밖으로 튀어나가는 것 방지 */
@media (max-width: 680px){
  .filterbar__inner{
    align-items:stretch;
  }


  /* flex 아이템들이 줄어들 수 있게 */
  .fb{ 
    min-width: 0;
    flex: 1 1 auto;          /* ✅ 폭 부족하면 줄바꿈/줄어듦 */
  }

  /* 각 블록이 너무 작아지지 않게(적당한 최소폭) */
  .fb--spot{ flex: 1 1 240px; }
  .fb--unit{ flex: 1 1 220px; }
  .fb--range{ flex: 1 1 100%; }     /* ✅ 기간은 아래로 내려와도 OK */
  .fb--depth{ flex: 0 1 auto; }
  .fb--submit{ flex: 0 0 auto; margin-left:0; }

  /* select/date가 부모 폭 안에서 줄어들게 */
  .fb__select{ min-width:0; width:100%; }
  .fb__date{ min-width:0; }
  .fb__date input[type="date"]{ width:100%; min-width:0; }


  /* “~”은 줄바꿈되면 보기 안 좋아서 숨기고 간격만 */
  .fb__tilde{
    display:none;
  }

  /* 기간 영역: 날짜 2개를 그리드로 (반응형 안정) */
  .fb--range{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label label"
      "from to"
      "days days";
    gap: 8px 10px;
    align-items:center;
  }
  .fb--range .fb__label{ grid-area:label; }
  .fb--range .fb__date:nth-of-type(1){ grid-area:from; }
  .fb--range .fb__date:nth-of-type(2){ grid-area:to; }
  .fb--range .fb__btns--days{ grid-area:days; }
  .fb--sep::before {
    top: 43%;
}
}




@media (max-width: 480px){
  .fb__select{ min-width: 160px; }
  .fb__date input[type="date"]{ width: 140px; }
}

@media (max-width: 320px){
  .filterbar__inner{ gap:8px; }
  .fb__select{ min-width: 150px; }
  .fb__date input[type="date"]{ width: 132px; }
}

@media (max-width: 280px){
  .filterbar{ padding:10px; }
  .fb__select{ min-width: 140px; }
  .fb__date input[type="date"]{ width: 124px; }
  .fb__btn{ padding:0 10px; }
}
.filterbar{ overflow:hidden; }        /* 테두리 밖으로 삐져나오는 것 방지 */
.filterbar__inner{ min-width:0; }     /* flex 계산 안정 */

/* 상한선, 하한선 영역 20251217 */
/* graphFrame/box가 기존에 있으면 이 부분만 추가/덮어쓰기 */
.graphFrame.full.m_b_20 .box{
  position: relative;
}

/* ✅ 오른쪽 정렬(요청: float:right) */
.limitBox{
  float: right;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);

  padding: clamp(8px, 1.2vw, 10px) clamp(10px, 1.6vw, 14px);
  border: 1px solid #e6e9ef;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

/* float 정리(부모 높이 유지) */
.graphFrame.full.m_b_20 .box::after{
  content:"";
  display:block;
  clear:both;
}

.limitBox__item{
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
  margin: 0;
}

.limitBox__label{
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

.limitBox__input{
  width: clamp(44px, 5.2vw, 56px);
  height: clamp(26px, 2.4vw, 30px);
  padding: 0 10px;
  border: 1px solid #e6e9ef;
  border-radius: 3px;
  background: #fff;
  font-size: clamp(12px, 1.1vw, 14px);
  color: #111;
  outline: none;
  box-sizing: border-box;
}

.limitBox__input:focus{
  border-color: #bcd7ff;
  box-shadow: 0 0 0 3px rgba(18,135,217,.12);
}

/* 280에서도 너무 답답하면 간격만 살짝 줄임 */
@media (max-width: 280px){
  .limitBox{
    gap: 10px;
    padding: 8px 10px;
  }
  .limitBox__input{
    padding: 0 8px;
  }
}

/* 그래프 영역 20251217 */
 /* 차트가 들어갈 박스: 폭이 줄어들면 같이 줄어듦 */
    .chart-wrap {
    width: 100%;
    max-width: 1400px;
    min-width: 280px;
    height: 390px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 8px 4px 8px;
    box-sizing: border-box;
    margin: 50px auto 50px;
    }
    canvas { width: 100% !important; height: 100% !important; }
    .chart-wrap > a {text-align:center; font-size: 18px; font-weight: 700;}

    /* 심도 선택 팝업 영역 20251217 */
     /* ====== 버튼 영역(사용자 제공 클래스 유지) ====== */
    .fb { display: flex; gap: 8px; }
    .fb__btn2 {
      border: 0;
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      background: #0b63ce;
      color: #fff;
    }

    /* ====== 오버레이(배경 검은색 투명) ====== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      display: none;              /* 기본 숨김 */
      align-items: center;
      justify-content: center;
      padding: 16px;              /* 작은 화면에서 가장자리 여백 */
      z-index: 9999;
    }
    .modal-overlay.is-open { display: flex; }

    /* ====== 모달 카드 ====== */
    .modal {
      width: min(920px, 100%);
      min-width: 280px;           /* 요청: 280까지 자연스럽게 */
      max-height: min(720px, 92vh);
      border-radius: 18px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
    }

    /* 헤더 */
    .modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      background: linear-gradient(90deg, #0b3b91, #0b63ce);
      color: #fff;
      font-weight: 800;
    }
    .modal__title { font-size: 14px; }

    .modal__close {
      width: 28px;
      height: 28px;
      border: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 999px;
      display: grid;
      place-items: center;
    }
    .modal__close img {
      width: 30px;
      height: 30px;
      display: block;
    }

    /* 본문 */
    .modal__body {
      padding: 14px;
      overflow: auto;
      max-height: calc(92vh - 120px);
    }

    /* 테이블(모바일에서도 자연스럽게) */
    .depth-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #e5e7eb;
      border-radius: 0px;
      overflow: hidden;
    }
    .depth-table th,
    .depth-table td {
      border-bottom: 1px solid #e5e7eb;
      padding: 8px;
      font-size: 13px;
    }
    .depth-table tr:last-child th,
    .depth-table tr:last-child td { border-bottom: 0; }

    .depth-table th {
      width: 92px;
      background: #8b8b8b;
      color: #fff;
      text-align: center;
      font-weight: 800;
      white-space: nowrap;
    }

    .depth-input {
      width: 100%;
      height: 34px;
      border: 1px solid #e5e7eb;
      border-radius: 5px;
      padding: 0 10px;
      outline: none;
      font-size: 13px;
      box-sizing: border-box;
    }
    .depth-input::placeholder {color: rgb(177, 177, 177);}

    .depth-input:focus {
      border-color: #0b63ce;
      box-shadow: 0 0 0 3px rgba(11,99,206,.15);
    }
    .soil-from{
      width: 100%;
      height: 34px;
      border: 1px solid #e5e7eb;
      border-radius: 5px;
      padding: 0 10px;
      outline: none;
      font-size: 13px;
      box-sizing: border-box;
    }
    .soil-from::placeholder {color: rgb(177, 177, 177);}

    .soil-from:focus {
      border-color: #0b63ce;
      box-shadow: 0 0 0 3px rgba(11,99,206,.15);
    }
    
    
    .depth-unit {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }
    .depth-unit span {
      white-space: nowrap;
      color: #6b7280;
      font-size: 12px;
    }

    /* 하단 버튼 */
    .modal__footer {
      padding: 12px 14px 14px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: #fff;
    }
    .btn {
      border: 0;
      height: 36px;
      padding: 0 16px;
      font-weight: 800;
      cursor: pointer;
    }
    .btn--ghost { background: #cfcfcf; color: #fff; }
    .btn--primary { background: #0b63ce; color: #fff; }

    /* ====== 280px 근처 최적화 ====== */
    @media (max-width: 340px) {
      .modal__header { padding: 10px 12px; }
      .modal__body { padding: 10px; }
      .depth-table th { width: 74px; font-size: 12px; padding: 6px; }
      .depth-table td { padding: 6px; }
      .depth-input { height: 32px; font-size: 12px; padding: 0 8px; }
      .btn { height: 34px; padding: 0 12px; font-size: 12px; }
    }

    /* 심도, 토질 영역 20251217 */
    .depthbar{
   float: right;
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    padding: clamp(8px, 1.2vw, 10px) clamp(10px, 1.6vw, 14px);
    border: 1px solid #e6e9ef;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .depthbar::after{
  content:"";
  display:block;
  clear:both;
}


  .depthbar__label{
    font-size:13px;
    font-weight:700;
    color:#111;
    white-space:nowrap;
  }

  .depthbar__sep{
    font-size:12px;
    color:#666;
    white-space:nowrap;
  }

  .depthbar__input,
  .depthbar__select{
    height:28px;
    border:1px solid #dcdcdc;
    border-radius:4px;
    background:#fff;
    font-size:12px;
    padding:0 10px;
    box-sizing:border-box;
    outline:none;
  }

  .depthbar__input{
    width:84px;               /* 이미지 느낌 */
    text-align:left;
  }

  .depthbar__select{
    width:92px;
    appearance:auto;
  }

  .depthbar__btn{
    height:28px;
    padding:0 16px;
    border:0;
    border-radius:4px;
    background:#1287d9;
    color:#fff;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
  }

  /* ✅ 280px까지 자연스럽게: 작아지면 줄바꿈 */
  @media (max-width: 340px){
    .depthbar{
      width: 100%;
      flex-wrap: wrap;        /* 줄바꿈 */
      gap:6px;
      padding:8px;
    }
    .depthbar__input{ width:72px; }
    .depthbar__select{ flex:1; min-width: 110px; }
    .depthbar__btn{ margin-left:auto; } /* 버튼은 우측으로 */
  }

  /* ✅ 진짜 280 근처: 더 촘촘하게 */
  @media (max-width: 300px){
    .depthbar__label{ font-size:12px; }
    .depthbar__input,
    .depthbar__select,
    .depthbar__btn{ height:26px; font-size:11px; }
    .depthbar__input{ width:64px; padding:0 8px; }
    .depthbar__btn{ padding:0 12px; }
  }

  /* 토양수분 프로파일, 변동 계수 영역 20251217 */
  /* ===== 전체 레이아웃 ===== */
  .soil-layout {
    width: 100%;
    min-width: 280px;            /* 요청: 280까지 */
    box-sizing: border-box;
  }

  /* 상단: 좌(큰) + 우(작은) */
  .soil-top {
    display: grid;
    /*grid-template-columns: 1.45fr 1fr;*/
    grid-template-columns:1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 14px;
  }

  /* 하단: 좌 테이블 + 우 테이블 */
  .soil-bottom {
    display: grid;
    /*grid-template-columns: 1.45fr 1fr;*/
    grid-template-columns:1fr;
    gap: 18px;
    align-items: start;
  }

  /* ===== 패널(박스) ===== */
  .panel {
    border: 1px solid #d7d7d7;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
  }

  .panel__title {
    margin: 0 0 8px 0;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.2px;
  }

  .panel__body {
    width: 100%;
    box-sizing: border-box;
  }

  /* 프로파일 패널 내부: 그래프 2개 좌우 배치 */
  .panel__body--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }

  /* ===== 그래프 박스 ===== */
.chartbox{
  min-width: 0;        /* ⭐️ 이게 핵심 */
  width: 100%;
  height: 580px;       /* 필요하면 580으로 */
  border: 1px solid #d7d7d7;
  background: #fff;
  position: relative;  /* Chart.js에서 maintainAspectRatio:false일 때 안정 */
  overflow: hidden;
  display: block;      /* grid+place-items보다 단순하게 */
}

  .chartbox__img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* 그래프 왜곡 없이 */
    display: block;
  }

  /* placeholder용 (필요하면 사용)
  .chartbox__ph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #666;
    font-weight: 700;
  }
  */

  /* ===== 하단 테이블 ===== */
  .info-wrap { width: 100%; }

  .info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #d9d9d9;
    background: #fff;
  }

  .info-table th,
  .info-table td {
    border: 1px solid #d9d9d9;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.25;
    word-break: keep-all;
  }

  .info-table th {
    width: 34%;
    background: #8b8b8b;
    color: #fff;
    font-weight: 800;
    text-align: center;
  }

  .info-table td {
    text-align: center;
    color: #111;
  }

  .link {
    color: #1448cd;
    font-weight: 800;
    text-decoration: none;
  }

  /* ===== 반응형: 768 이하에서 조금 촘촘하게 ===== */
  @media (max-width: 768px) {
    .soil-top, .soil-bottom { gap: 12px; }
    .panel__title { font-size: 16px; }
    .chartbox { height: 300px; }
    .info-table th, .info-table td { font-size: 13px; padding: 10px 8px; }
  }

  /* ===== 반응형: 480 이하에서 스택(세로 배치) ===== */
  @media (max-width: 480px) {
    .soil-top { grid-template-columns: 1fr; }
    .soil-bottom { grid-template-columns: 1fr; }
    .panel__body--two { grid-template-columns: 1fr; }
    .chartbox { height: 260px; }
  }

  /* ===== 280 근처 최적화 ===== */
  @media (max-width: 320px) {
    .panel { padding: 8px; }
    .panel__title { font-size: 14px; }
    .chartbox { height: 220px; }
    .info-table th { width: 40%; }
    .info-table th, .info-table td { font-size: 12px; padding: 8px 6px; }
  }


  @media (max-width: 680px) {
    .fb--range {
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .fb--sep::before {
        top: 23%;
    }
}

@media (max-width: 480px) {
    .fb--range::before {
        top: 20%;
    }
    .fb--unit::before {
        top: 43%;
    }
    .fb__date input[type="date"] {
    padding: 0 10px 0 10px;}
}

.dateFrame{
  width: 100%;
  box-sizing: border-box;
  display: flow-root;   /* ✅ float 포함해도 깨끗하게 감쌈 */
}

/* 현재 wrap이 좌우 여백(20px) 가지고 있으니 그걸 상쇄 */
@media (max-width: 1024px){
  .dateFrame{
    width: 100%;
    max-width: 100vw;          /* ✅ 화면 밖으로 못 나가게 */
    margin-left: auto;         /* ✅ 좌우 균형 */
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    display: flow-root;
  }
}
.dateFrame{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
}

/* 1024 이하: 줄바꿈 허용만 */
@media (max-width: 1024px){
  .dateFrame{
    flex-wrap: wrap;          /* 🔥 wrap-reverse ❌ */
  }
}

/* 680 이하: 두 줄 구조를 명확히 */
@media (max-width: 680px){
  .dateFrame{
    align-items: stretch;
    gap: 8px;
  }
  .dateFrame .todayDate{
    flex: 1 1 100%;
    margin-bottom: 0;
  }
  .dateFrame .depthbar{
    flex: 0 0 auto;
    margin-left: auto;        /* 우측 유지 */
  }
}

/* 480 이하: 완전 세로 스택 */
@media (max-width: 480px){
  .dateFrame{
    flex-direction: column;
    align-items: stretch;
  }
  .dateFrame .depthbar{
    width: 100%;
    margin-left: 0;
  }
}

.depthbar{
  flex-wrap: wrap;     /* ✅ 폭 부족하면 내부 줄바꿈 */
  min-width: 0;        /* ✅ flex 아이템 폭 축소 허용 */
  max-width: 100%;     /* ✅ 부모 밖으로 못 나가게 */
}

.depthbar > *{
  min-width: 0;        /* ✅ 자식도 같이 줄어들 수 있게 */
}

.depthbar__input{
  max-width: 100%;
}

@media (max-width: 340px){
  .depthbar{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2칸 */
    gap: 6px;
    float: none;                     /* 모바일에선 float 끄는게 안정 */
  }

  /* 라벨/구분자/버튼은 전체폭 */
  .depthbar__label,
  .depthbar__sep{
    grid-column: 1 / -1;
  }

  .depthbar__btn{
    grid-column: 1 / -1;
    justify-self: end;
  }

  .depthbar__input{
    width: 100%;
  }
}

/* 20251218 css 수정 */
.fb__radio{
  position:absolute;
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
}
/* 라디오용 label 버튼 세로 가운데 정렬 */
.fb__radios .fb__btn{
  display: inline-flex;      /* ✅ inline이라 height 안먹는 문제 해결 */
  align-items: center;       /* ✅ 세로 가운데 */
  justify-content: center;   /* ✅ 가로 가운데 */
  line-height: 1;            /* (선택) 폰트 baseline 흔들림 방지 */
}
/* 날짜 영역 전체 클릭 가능 */
.fb__date{
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;           /* ✅ 어디를 눌러도 클릭 느낌 */
}

/* input은 커서만 포인터로 */
.fb__date input[type="date"]{
  cursor: pointer;
  padding-right: 34px;       /* 아이콘 공간 */
}

/* 달력 아이콘(기존 이미지 재사용) */
.fb__calico{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background:url("/static/img/icon02.png") no-repeat center/contain;
  pointer-events:none;       /* ✅ 아이콘 위 클릭도 부모 클릭으로 */
}
/* ✅ 날짜 input이 flex/grid에서 제대로 줄어들도록 */
.fb--range .fb__date{ min-width:0; }

/* ✅ 기본: 폭은 부모에 맞추고, 숫자폭 고정(덜 흔들림) */
.fb--range .fb__date input[type="date"]{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
  padding-right: 30px;                 /* ✅ 아이콘 공간(기존 34px보다 살짝 줄임) */
  font-size: clamp(11px, 2.8vw, 13px); /* ✅ 작은 화면에서 폰트 자동 축소 */
}

/* ✅ 아이콘도 조금 작게(글씨 공간 확보) */
.fb--range .fb__calico{
  width: 16px;
  height: 16px;
  right: 8px;
}

/* ✅ 480 이하: 날짜 2칸 그리드에서 더 여유 있게 */
@media (max-width: 480px){
  .fb--range .fb__date input[type="date"]{
    padding-left: 8px;
    padding-right: 26px;
    font-size: 12px;
  }
  .fb--range .fb__calico{ width: 15px; height: 15px; right: 7px; }
}

/* ✅ 320 이하: 더 촘촘하게 */
@media (max-width: 320px){
  .fb--range .fb__date input[type="date"]{
    padding-left: 7px;
    padding-right: 24px;
    font-size: 11px;
  }
  .fb--range .fb__calico{ width: 14px; height: 14px; right: 6px; }
}

/* ✅ 280 이하: 최후 방어(안 잘리게) */
@media (max-width: 280px){
  .fb--range{
    gap: 6px 8px; /* 네가 grid로 잡아둔 gap이 크면 글씨 공간이 줄어듦 */
  }
  .fb--range .fb__date input[type="date"]{
    padding-left: 6px;
    padding-right: 22px;
    font-size: 11px;
  }
  .fb--range .fb__calico{ width: 13px; height: 13px; right: 5px; }
}

/* 20251219 심도 left */
.left_style01 {display: inline-block; margin-left: -11px;}

/* 20251222 토양수분 프로파일 그래프 css 추가 */
#profileAvgChart,
#profileAreaRangeChart{
  width: 100%;
  height: 100%;
  min-width: 0;
}
/* Highcharts 내부 컨테이너를 부모(=chartbox) 100%로 강제 */
#profileAvgChart .highcharts-container,
#profileAreaRangeChart .highcharts-container{
  width: 100% !important;
  height: 100% !important;
}

/* SVG도 같이 100% */
#profileAvgChart svg,
#profileAreaRangeChart svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#profileAvgChart,
#profileAreaRangeChart{
  width: 100% !important;
  height: 100% !important;
}

#profileAvgChart .highcharts-root,
#profileAreaRangeChart .highcharts-root{
  width: 100% !important;
  height: 100% !important;
}

/* 구조변경 추가 css 영역 20251222 */
/* 섹션 내부를 위(차트) + 아래(테이블)로 자연스럽게 */
.panel.panel--profile,
.panel.panel--cv{
  display: flex;
  flex-direction: column;
}

/* 제목 간격(원래 스타일이 있으면 이 정도만 보정) */
.panel.panel--profile .panel__title,
.panel.panel--cv .panel__title{
  margin: 0 0 12px 0;
}

/* 본문 폭 안정 */
.panel.panel--profile .panel__body,
.panel.panel--cv .panel__body{
  width: 100%;
  min-width: 0;
}

/* 프로파일: 차트 2개 좌우 배치(폭 줄어들어도 깨지지 않게 minmax) */
.panel.panel--profile .panel__body--two{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* 공통 chartbox: grid에서 가로폭 줄어들 때 필수 */
.panel.panel--profile .chartbox,
.panel.panel--cv .chartbox{
  min-width: 0;
  width: 100%;
  border: 1px solid #d7d7d7;
  background: #fff;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* 데스크톱 높이(원하는 값으로 조절 가능) */
.panel.panel--profile .chartbox{ height: 720px;}
.panel.panel--cv .chartbox{ height: 720px; }

/* 차트 div 자체가 chartbox를 100% 채우게 */
#profileAvgChart,
#profileAreaRangeChart,
#3DChart{
  width: 100%;
  height: 100%;
  min-width: 0;
}

/* Highcharts 내부 컨테이너/SVG도 100% 강제 */
#profileAvgChart .highcharts-container,
#profileAreaRangeChart .highcharts-container{
  width: 100% !important;
  height: 100% !important;
}
#profileAvgChart svg,
#profileAreaRangeChart svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ===== 패널 내부 하단 테이블 영역(soil-bottom) ===== */
.panel.panel--profile .soil-bottom,
.panel.panel--cv .soil-bottom{
  margin-top: 12px;
  width: 100%;
  min-width: 0;
}

/* 280px 최후방어: 테이블이 길면 가로 스크롤 허용 */
.panel.panel--profile .soil-bottom .info-wrap,
.panel.panel--cv .soil-bottom .info-wrap{
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 테이블은 이 패널 안에서만 스타일 적용(기존 table 스타일 충돌 방지) */
.panel.panel--profile .info-table,
.panel.panel--cv .info-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #d9d9d9;
  background: #fff;
}

.panel.panel--profile .info-table th,
.panel.panel--profile .info-table td,
.panel.panel--cv .info-table th,
.panel.panel--cv .info-table td{
  border: 1px solid #d9d9d9;
  padding: 12px 10px;
  font-size: 14px;
  line-height: 1.25;
  word-break: break-word; /* 280에서도 줄바꿈 */
  box-sizing: border-box;
}

.panel.panel--profile .info-table th,
.panel.panel--cv .info-table th{
  width: 36%;
  background: #8b8b8b;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.panel.panel--profile .info-table td,
.panel.panel--cv .info-table td{
  text-align: center;
  color: #111;
}

.panel.panel--profile .link,
.panel.panel--cv .link{
  color: #1448cd;
  font-weight: 800;
}

/* ===== 반응형 ===== */
@media (max-width: 768px){
  .panel.panel--profile .chartbox{ height: 420px; }
  .panel.panel--cv .chartbox{ height: 420px; }
  .panel.panel--profile .panel__body--two{ gap: 12px; }

  .panel.panel--profile .info-table th,
  .panel.panel--profile .info-table td,
  .panel.panel--cv .info-table th,
  .panel.panel--cv .info-table td{
    padding: 10px 8px;
    font-size: 13px;
  }
}

@media (max-width: 480px){
  /* 모바일에서 프로파일 2개는 위아래로 */
  .panel.panel--profile .panel__body--two{
    grid-template-columns: 1fr;
  }
  .panel.panel--profile .chartbox{ height: 360px; }
  .panel.panel--cv .chartbox{ height: 360px; }
}

@media (max-width: 320px){
  .panel.panel--profile .chartbox{ height: 300px; }
  .panel.panel--cv .chartbox{ height: 300px; }

  .panel.panel--profile .info-table th,
  .panel.panel--profile .info-table td,
  .panel.panel--cv .info-table th,
  .panel.panel--cv .info-table td{
    padding: 8px 6px;
    font-size: 12px;
  }
}

@media (max-width: 280px){
  .panel.panel--profile .chartbox{ height: 260px; }
  .panel.panel--cv .chartbox{ height: 260px; }
}
/* 로그인 20260130 */
/* ---------------------------------------
   Login Panel (PC)
--------------------------------------- */

.form-password > input:invalid {border-color:#E3E3E3;}
.form-row> input:invalid {border-color:#E3E3E3;}
.login{
  /* 기존 padding은 아래에서 덮어쓸 거라 제거하지 않고, 최종값으로 통일 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
}

.login__panel{
  display:flex;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
  background:#fff;
  width:100%;
}

.login__card{
  flex: 0 0 46%;
  /* 최종값(clamp)로 통일 */
  padding: clamp(16px, 5vw, 40px);
  background:#fff;
  box-sizing: border-box;
}

.login__visual{
  flex: 1 1 auto;
  min-height: 460px;
  background-image: url("/img/login_content_bg.png"); /* ✅ 오른쪽 이미지 교체 */
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}

/* 타이틀 */
.login__title{
  /* 최종값(clamp)로 통일 */
  font-size: clamp(28px, 8vw, 55px);
  font-weight: 700;
  margin-bottom: clamp(16px, 4vw, 37px);
  letter-spacing:-1px;
}

.login__title > img {display:block; margin:0 auto;}

.login__title > span:nth-child(1) {color:#00438F;}

/* 탭(직원/개인) */
.login-tabs{
  display:flex;
  background:#f0f1f3;
  border-radius: 34px;
  margin-bottom: 20px;
}

.login-tabs__tab{
  flex: 1 1 50%;
  border:0;
  background:transparent;
  padding: 10px 12px;
  border-radius: 34px;
  font-size: 20px;
  color:#666;
}

.login-tabs__tab.is-active{
  background:#063C6E;
  color:#fff;
  font-weight: 600;
}

/* 라디오(로그인 방식) */
.login-method{
  border:0;
  padding:0;
  margin:0;
}

.login-method.is-hidden{ display:none; }

.login-method__radios{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.login-method__item{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 18px;
  color:#333;
  cursor:pointer;
}

.login-method__item input{
  width: 14px;
  height: 14px;
}

/* 폼 */
.login-form{ margin-top: 6px; }

.form-row{ margin-bottom: 16px; }

.form-label{
  display:block;
  font-size: 18px;
  color:#333;
  margin-bottom: 6px;
  font-weight: 600;
}

.form-input{
  width:100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  font-size: 14px;
  background:#fff;
}

.form-input:focus{
  outline: 2px solid #0b57d0;
  outline-offset: 2px;
}

/* 비밀번호 + 아이콘 버튼 */
.form-password{
  position: relative;
}

.pw-toggle{
  position:absolute;
  top:50%;
  right: 10px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border:0;
  background:transparent;
}

.pw-toggle__ico{
  display:block;
  width: 100%;
  height: 100%;
  background: url("/img/password_icon.png") no-repeat center; /* ✅ 아이콘 교체 */
  background-size: 23px auto;
}

/* 하단 옵션 */
.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 6px 0 22px;
}

.form-check{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 16px;
  color:#444;
}

.form-link{
  font-size: 16px;
  color:#666;
}

.form-link:focus,
.form-link:hover{
  color:#0b3b8f;
  text-decoration: underline;
}

/* 로그인 버튼 */
.login-btn{
  display:block;
  width: 100%;
  height: 67px;
  border:0;
  border-radius: 50px;
  background:#0b3b8f;
  color:#fff;
  font-size: 16px;
  font-weight: 700;
  transition:all 0.4s;
  max-width:306px;
  margin:0 auto;
}

.login-btn:hover {
 background:#063C6E;
}

.login-btn:focus{
  outline: 2px solid #0b57d0;
  outline-offset: 2px;
}

/* 안내문 */
.login-help{
  margin-top: 16px;
  font-size: 16px;
  color:#555;
  text-align:left;
}

.form-error{
  margin-top: 12px;
  font-size: 13px;
  color:#c62828;
}

/* 하단 안내 박스 */
.login-info__inner{
  width:100%;
  margin:0 auto;      /* ✅ 가운데 */
}

.login-info{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;   /* ✅ 컨테이너와 동일 */
  padding-right: 40px;  /* ✅ 컨테이너와 동일 */
  margin-top: 20px;
  background:#fbfbfb;                  /* ✅ 스샷은 흰 박스 */
  border-radius: 12px;
  padding: 26px 30px;           /* ✅ 여백 조금 더 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* ✅ 은은한 그림자 */
  margin-bottom:100px;
}

.login-info__list{
  font-size: 16px;                /* ✅ 스샷처럼 조금 작게 */
  color:#666;
  line-height: 1.9;
}

.login-info__list > li{
  position: relative;
  padding-left: 26px;             /* ✅ '※' 공간 확보 */
}

.login-info__list > li + li{
  margin-top:0px;
}

.login-info__list > li::before{
  content:"※";
  position:absolute;
  left: 0;
  top: 1px;
  color:#666;
}

/* 파란 강조(기존 사이트 회원) */
.login-info__em{
  color:#00438F;
  font-weight: 500;
}

/* ✅ 탭 패널 숨김/표시용 */
.login-panel.is-hidden { display: none; }

.form-check > input {border-color:#E3E3E3;}

/* ✅✅✅ 여기부터 “아이디저장 옆 회색선” */
.form-options{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  margin: 6px 0 22px;
}

.form-divider{
  width: 1px;
  height: 14px;
  background:#D9D9D9;
  display:inline-block;
}
/* ✅✅✅ 여기까지 */

/* 라디오/체크박스 체크 색상 */
input[type="radio"],
input[type="checkbox"]{
  accent-color: #00438F;
}

/* (구형 브라우저 보강) 체크된 라디오/체크박스 테두리 색 */
input[type="radio"]:checked,
input[type="checkbox"]:checked{
  border-color:#00438F;
}

/* ✅ 라디오/체크박스 + 텍스트 세로 가운데 정렬 보정 */
.login-method__item,
.form-check{
  display: inline-flex;      /* 이미 있으면 덮어씀 */
  align-items: center;
}

/* input 자체가 살짝 위로 떠 보이는 브라우저 보정 */
.login-method__item input,
.form-check input{
  vertical-align: middle;
  margin: 0;
  position: relative;
  top: 1px;               /* 필요하면 0~2px 사이로 조절 */
}

/* 체크박스가 너무 작거나 커 보이면(선택) */
.form-check input[type="checkbox"]{
  width: 20px;
  height: 20px;
}

/* 라디오도 크기 통일(선택) */
.login-method__item input[type="radio"]{
  width: 18px;
  height: 18px;
}

/* placeholder 색상 */
.form-input::placeholder { color:#A4A4A4; opacity:1; }        /* 표준 */
.form-input::-webkit-input-placeholder { color:#A4A4A4; }     /* Chrome/Safari */
.form-input::-moz-placeholder { color:#A4A4A4; opacity:1; }   /* Firefox */
.form-input:-ms-input-placeholder { color:#A4A4A4; }          /* IE/구 Edge */
.form-input::-ms-input-placeholder { color:#A4A4A4; }         /* 구 Edge */

/* ✅ 전체 배경: login_main 뒤에 login_bg.png 깔기 */
html, body {
  height: 100%;
}

body {
  margin: 0;
}

#login_main{
  position: relative;
  width: 100%;
  min-height: 100vh;                 /* 화면 높이 전체 */
  background: url("/img/login_bg.png") no-repeat center center;
  background-size: cover;            /* 꽉 채우기 */
  overflow: auto;                    /* 작은 화면에서 잘림 방지(스크롤 허용) */
}

/* container 최종값으로 통일 */
.container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ✅ 900px 이하: 패널 폭 안정화 */
@media (max-width: 900px){
  .login__panel{
    flex-direction: column;   /* ✅ 세로 스택 */
  }

  .login__card{
    flex: 1 1 auto;
  }

  .login__visual{
    min-height: 220px;
  }
}

/* ✅ 480px 이하: 좌우 여백/폼 요소 크기 축소 */
@media (max-width: 480px){
  .container{
    padding: 0 16px;
  }

  .login{
    padding: 20px 0;
  }

  .form-label{
    font-size: 16px;
  }

  .form-input{
    height: 42px;
    font-size: 14px;
  }

  .login-btn{
    height: 56px;
    max-width: 100%;
  }

  .login__visual{
    min-height: 180px;
  }

  /* 체크/라디오 크기 과하게 커 보이면 살짝 줄임 */
  .form-check input[type="checkbox"]{
    width: 18px;
    height: 18px;
  }
  .login-method__item input[type="radio"]{
    width: 16px;
    height: 16px;
  }
}

/* ✅ 360px 이하: 카드 내부 여백 더 줄임 */
@media (max-width: 360px){
  .login__card{
    padding: 14px;
  }

  .form-options{
    margin: 6px 0 16px;
  }

  .login__visual{
    min-height: 150px;
  }
}

/* ✅ 320px 이하: 아주 작은 화면 최적화 */
@media (max-width: 320px){
  .container{
    padding: 0 12px;
  }

  .login__visual{
    min-height: 130px;
  }

  .pw-toggle{
    right: 6px;
  }
}

/* ✅ 280px 이하: 최저폭 안정화 */
@media (max-width: 280px){
  .container{
    padding: 0 10px;
  }

  .form-label{
    font-size: 15px;
  }

  .form-input{
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  .login-btn{
    height: 52px;
    font-size: 15px;
  }

  .login__visual{
    min-height: 110px;
  }
}

/* 3d chart*/
.js-plotly-plot {margin-top: 157px;}