/* 배경 이미지 */
main {
    background-color: transparent;
    background-image: url(../../images/target01/main.webp);
    background-size: 100% auto;
    background-color: #ffc4b2;
}
input:focus {outline: none;}
/* 배경 이미지 끝 */
.select-btn {
    width: 100%;
    background: #fff2cc;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
}

.datepicker-input {
    text-align: center;
}

.monthpicker {
    width: 7vw;
    text-align: center;
}

.ui-monthpicker-trigger,
.ui-datepicker-trigger {
    padding: 0.3vw;
}

textarea{
    resize:none;
}



/*dropdown */
.dropdown {
    float: left;
    overflow: hidden;
    position: static;
}

.dropdown-btn {
    border: none;
    background: white;
    font-size: 0.53333rem;
}

.dropdown-menu {
    min-width: auto;
    border-radius: 0px;
    border: 0px;
    /*transform: translate(-19px, 0);*/
    width: 110%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 3px 4px 5px 1px #525050;
}

.dropdown-text {
    font-family: KOHIBaeum;
}

.dropdown.show > .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    padding: 0;
}

#dropdownMenuButton1 {
    width: 6.7rem;
}

/*dropdown 끝*/

/* theme 클래스 끝 */

/* openlayers control */
.zoom-control {
    position: absolute;
    bottom: 0px;
    left: -36px;
    z-index: 1;
    font-size: 0.5rem;
    transition: .5s;
}

.zoom-control-in,
.zoom-control-out {
    border: none;
    background-color: white;
    flex: 1;
}

.zoom-control-in:hover,
.zoom-control-out:hover {
    background-color: lightgray;
}

.overviewmap-control {
    padding: 0;
    transition: .5s;
}

.overviewmap-control,
.overviewmap-control:not(.ol-collapsed) {
    background-color: white;
    bottom: 1.5em;
}

.overviewmap-control .ol-overviewmap-box {
    border: 3px solid red;
}

.overviewmap-control button,
.overviewmap-control button:focus {
    color: black;
    background-color: white;
    padding: 0;
    border: 1px solid lightgray;
}

.overviewmap-control button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overviewmap-control button > span {
    margin-bottom: 4px;
}

.overviewmap-control button:hover {
    background-color: lightgray;
}

.ol-overviewmap-map {
    height: 170px !important;
}

.ol-overviewmap-map .ol-viewport {
    height: calc(100% - 25px) !important;
}

.ol-overviewmap-map::before {
    content: "부산광역시 지도";
    font-size: 0.53333rem;
    width: 100%;
    text-align: center;
    color: #002060;
    font-weight: bold;
    background: white;
    border-bottom: 1px solid #7b98bc;
    display: block;
}

.overviewmap-control button {
    font-size: 0.7rem;
}
/* openlayers control 끝 */


/* dash-section */

.cctv-dash-page2 > div,
.satel-dash-page2 > div {
    flex: 1;
}

.cctv-dash-page1,
.cctv-dash-page2,
.cctv-dash-page3,
.satel-dash-page1,
.satel-dash-page2,
.dron-dash-page1,
.activity-dash-page1 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header-box {
    flex: 1 1 0%;
}

.content-box {
    flex: 16 1 0%;
    overflow-y: auto;
    overflow-x: hidden;
}

/*.content-box::-webkit-scrollbar {
    display: none;
}*/
/* dash-section 끝*/

/* date-section */
.date-section {
    display: flex;
    justify-content: space-around;
    font-size: 0.53333rem;
    flex: 1;
    align-items: center;
    z-index: 999999;
}

.datepicker-span {
    margin-right: 0.5vw;
}

.datepicker-input {
    cursor: pointer;
    text-align: center;
}

.datepicker-btn-section {
    flex: 0.6;
}

.datepicker-btn {
}

/* date-section 끝*/

/* info-section */
.info-section {
    flex: 0 0 0%;
}

.dash-title-section {
    margin-bottom: 4%;
}
.dron-dash-page1 .dash-title-section{
    margin-bottom: 0;
}

.dash-title-span{
    display: block;
}

.dash-title-span,
.info-content-span {
    font-size: 0.809rem;
}

.info-content-div1 {
    color: #ed2756;
}

.info-content-div2 {
    color: #002060;
}

.info-content-div3 {
    color: #002060;
}

.info-content-section {
    display: flex;
    flex-direction: row;
    gap: 1vh;
    text-align: center;
}

.info-content-section > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.info-content-h1 {
    font-weight: bold;
    display: inline-block;
    font-size: 1.6rem;
}

.activity-count,
.activity-volume {
    font-size: 1.3rem;
}

.info-content-title {
    font-size: 0.45rem;
}

.info-update-section {
    align-content: end;
}

.info-content-update {
    font-size: 1rem;
}

.info-content-div4 {
    color: #ed2756;
}

.cctv-img {
    position: absolute;
    right: 0;
    top: 6px;
    width: 20%;
}

.satel-img {
    position: absolute;
    right: 0;
    top: 6px;
    width: 15%;
}

/* info-section 끝*/

/* monit-section */

.monit-section {
    flex: 4.245 1 0%;
    margin-bottom: 1vh;
}

.monit-carousel-section {
    height: calc(100% - 1.5rem);
}

.monit-video,
.satel-image-path {
    height: 74%;
    margin-bottom: 2vh;
}

.monit-video > video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.monit-table-section {
    height: calc(26% - 2vh);
}

.wl-table-section {
    height: calc(30% - 1rem);
}

.wl-table,
.monit-table {
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 0.45rem;
}

.wl-table th,
.monit-table th {
    background: #deebf7;
}


/* monit-section 끝*/

/* dash-cover */

.dash-cover span {
    font-size: 1.5rem;
}

.dash-cover {
    background-position: bottom;
    background-size: 100% 92%;
    background-color: transparent;
}

.cctv-dash-cover {
    background-image: url(../../images/target01/img_cover_cctv.webp);
    color: white;
   /* padding: 8% 33% 0 0;*/
   /* padding: 8% 33% 0 0;*/
    padding: 15% 33% 0 0;

}
.cctv-live-dash-cover {
    background-image: url(../../images/target01/img_cover_cctv.webp);
    color: white;
    justify-content: flex-start;
    padding-top: 10%;
}

.wl-table-cover {
    background-image: url(../../images/target01/img_cover_wl.webp);
    padding: 0%;
    background-size: 100% 100%;
    background-color: white;
}

.satel-dash-cover {
    background-image: url(../../images/target01/img_cover_satel.webp);
}

.dron-dash-cover {
    background-image: url(../../images/target01/img_cover_dron.webp);

}

.dron-search-cover {
    background-image: url(../../images/target01/img_cover_dron_search.webp);
    border-bottom-left-radius: var(--side-section-radius);
    position: absolute;
    top: 8%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    justify-content: flex-start;
    padding: 20% 0;
}

.dron-search-cover.show {
    display: flex;
}

.dron-search-cover span {
    font-size: 1.5rem;
}

.activity-dash-cover {
    background-image: url(../../images/target01/img_cover_activity.webp);
}

/* chart */
.chart {
}

#cctv-wl-chart,
#satel-wl-chart {
    width: 100%;
    height: 100%;
    margin: auto;
    align-content: center;
    display: none;
}

.cctv-wl-chart-section,
.satel-wl-chart-section {
    height: calc(70% - 1rem);
    width: 100%;
    position: relative;
}

#cctv-cost-chart,
#satel-cost-chart {
    width: 100%;
    height: 100%;
    margin: auto;
    align-content: center;
    display: none;
}

.cost-chart-section {
    height: calc(100% - 1.5rem);
    justify-items: center;
}
/* chart 끝 */

/* dron */
.category-info-section {
    display: flex;
    flex-direction: row;
}
.category-info-section ,
.dron-occur-chart-section {
    position: absolute;
    width: 100%;
    top: 30px;
    bottom: 0;
    left: 0;
    padding: 10px;
}
.dron-debris-info-section {
    flex: 1 0 0;
}
.dron-debris-chart-section{
    flex: 1;
}
#dron-debris-chart{
    width: 100%;
    height: 100%;
}
.dron-debris-table {
    flex: 0.6;
    font-size: 16px;
    margin-bottom: 24px;
}
.dron-debris-table thead {
    background-color: #deebf7;
}
.dron-debris-table td {
    color: #979797;
}
.dron-year-section {
    flex: 1.4 0 0%
}
#dron-occur-chart{
    width: 100%;
    height: 100%;
}
/* dron 끝*/


/*지역분포 범례*/
.theme-menu-legend {
    position: absolute;
    background: white;
    top: 60px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    height: 4rem;
    display: none;
}

.theme-menu-legend.close {
    width: 23%;
}


/*new 범례*/
.debris-index-img-section {
    position: absolute;
    top: 9px;
    background-color: white;
    border-radius: 8px;
    display: none;
}

.debris-index-img-section.on{ /*보이고 안보이고*/
    display: flex;
}

.debris-index-img-section.show{ /*접기펴고*/ /*@media all and (orientation: portrait) 부분 변경 필요*/
    width: 100%;
}

.legend-toggle{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 97px;
    height: 3rem; /*높이 있어야 토글 닫았을때 유지됨*/

}

.legend-title{
    /*flex: 2;*/
    font-size: 0.63333rem;
    margin-bottom: 0.25rem;
}

.legend-right-wrap {
    display: flex;
    align-items: center;
}

.legend-img {
    display: none;
    /*width: 100%;*/
    width: 96%;
}

.debris-index-img-01.on{
    display: block;
}

.debris-index-img-02.on{
    display: block;
}

.legend-margin {
    margin-top: 4px;
}

/* cctv location */
.debris-cctv-location-section {
    width: 45%;
    font-size: 0.6rem;
    position: absolute;
    top: 9px;
    background-color: white;
    border-radius: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    border: 1px solid #ccc;
    cursor: pointer;
    display: none;
}

/* 드롭다운 라벨 */
.debris-cctv-location-section .debris-cctv-location-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    min-width: 160px;
    max-width: 100%;
    position: relative;
}
.debris-cctv-location-section .label-text{
    flex-grow: 1;
    color: #b8b8b8;
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 드롭다운 리스트 */
.debris-cctv-location-section .debris-cctv-location-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /*width: 100%;*/
    background-color: white;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #ccc;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 100%;
}

.debris-cctv-location-section .debris-cctv-location-options li {
    padding: 8px 10px;
    border-top: 1px solid #eee;
}

.debris-cctv-location-section .debris-cctv-location-options li:hover {
    background-color: #f0f0f0;
}

.cctv-location-toggle{
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.cctv-location-toggle.collapsed{
    transition: transform 0.3s ease;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}


/*new css*/
.side-section {
    min-width: auto;
}



.side-theme-section.on {
    transform: translate(calc(var(--side-section-width) * -1), 0);
}


/* side-section 끝 */

/* 공통 */


.dash-cover.show,
.cctv-dash-page1.show,
.cctv-dash-page2.show,
.cctv-dash-page3.show,
.satel-dash-page1.show,
.satel-dash-page2.show,
.dron-dash-page1.show,
.side-content-section.show,
.activity-dash-page1.show {
    display: flex;
}

.cctv-dash-page1.hide,
.cctv-dash-page2.hide,
.cctv-dash-page3.hide,
.satel-dash-page1.hide,
.satel-dash-page2.hide,
.dron-dash-page1.hide,
.activity-dash-page1.hide,
.dash-cover.hide {
    display: none;
}

.side-section-btn,
.zoom-control-in,
.zoom-control-out {
    cursor: pointer;
}

/* 공통 끝 */


/*250519*/
.side-content-section {
    min-height: unset;
    height: 92%;
}


/* carousel style */
.carousel {
    height: 100%;
}

.carousel-indicators-round {
    background-color: #7f7f7f !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 100%;
}

.carousel-indicators {
    position: relative !important;
    margin: 0 !important;
}

.carousel-inner {
    height: calc(100% - 28px);
}

.carousel-item {
    height: 100%;
}

.img-nodata {
    width: 95%;
    height: 100%;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-44%);
    object-fit: cover;
}

#cctv-cost-nodata, #cctv-wl-nodata{
    width: 520px;
    height: 290px;
}

.chart-nodata{
    width: 100%;
    height: 100%;
    object-fit: contain;

}
#satel-cost-nodata {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* carousel style 끝 */

.cctv-tooltip-btn {
    background-color: white;
    border: none;
    font-size: 0.5rem;
    position: absolute;
    height: auto;
    width: 110px;
    z-index: 10;
    color: #353535;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(-50%);

}


/*해양정화활동 시작-윤경*/
.side-theme-section {
    z-index: 1;
}
.activity-page {
    z-index: 99999;
}
.activity-content-section {
    top: -10px;
}

.activity-section {
    margin-bottom: 2%;
}

.lp-icon-img {
    height: 2.37rem;
    top: -8px;
}

.activity-create-btn-container {
    display: flex;
    justify-content: center;
    gap: 1vh;
    height: 5vh;
    align-items: center;
}

.common-btn-css {
    background: #fff2cc;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.activity-dash-btn {
    display: flex;
    flex-direction: row;
}

.activity-dash-btn:hover {
    cursor: pointer;
}

.activity-dash-btn span {
    left: 6px;
}

.create-activity-btn.on {
    background: #2196f3;
    color: #FFF;
}

.create-debris-tip-off-btn.on {
    background: #2196f3;
    color: #FFF;
}

/*.create-activity-btn {
    font-size: 0.63333rem;
    padding: 1px 8px;
    height: 31.55px;
}

.create-activity-btn.hide {
    display: none;
}*/


.activity-btn {
    /* height: 1.5vw;*/
    height: 29px;
    font-size: 0.55rem;
    padding: 1px 8px;
}

.activity-close-btn {
    background: #ededed;
}

.lp-search-popup-btn {
    font-size: 0.63333rem;
    font-weight: 500;
    text-align: center;
    width: 112px;
    /*  height: 25px;*/
    justify-content: center;
}


.activity-btn:hover {
    cursor: pointer;
}


.activity-board-wrap,
.activity-create-table-wrap,
.debris-tip-off-create-table-wrap,
.debris-tip-off-board-wrap,
debris-tip-off-board-wrap
{
    height: 100%;
}

.activity-board-wrap {
    /*    height: calc(100% - 1.5rem);*/
    font-size: 0.54444rem;
    /* padding: 6px;*/
    /* height: 545px;
     overflow-y: scroll;
     overflow-x: hidden;*/
}

.activity-board-wrap::-webkit-scrollbar {
    display: none;
}

.activity-title-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.activity-board-container {
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    height: 575px;
    font-size: 0.54444rem;
    padding: 6px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.activity-board-container::-webkit-scrollbar {
    display: none;
}

.create-activity-form {
    height: 100%;
}

.activity-create-table {
    font-size: 0.54444rem;
    height: calc(100% - 1.5rem);
}

.activity-create-table table {
    width: 100%;
    height: calc(100% - 1.5rem);
}

.activity-create-table table th:nth-child(1) {
    background-color: #ededed;
    text-align: center;
}

.activity-create-table input, textarea, select {
    width: 98%;
    border: none;
}


.activity-create-table textarea {
    height: 94%;
}

textarea:focus {
    outline: none;
}

.activity-content {
    height: 95%
}

.activity-content textarea {
    height: 95%
}

.activity-create-table input:focus {
    outline: none;
}

.activity-create-table textarea {
    resize: none;
}

.lp-name-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 3px 0 3px;
    align-items: center;
}


.lp-search-popup-btn:hover {
    cursor: pointer;
}


.living-search-wrap {
    width: 465px;
    height: 513px;
    position: fixed;
    border: none;
    background: white;
    display: none;
    border-radius: 14px;
    box-shadow: 2px 2px 2px 2px #647f93;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.living-search-wrap.show {
    display: block;
 /*   display: flex;
    align-items: center;
    justify-content: center;*/
    z-index: 999999;
    padding: 12px;
}


.living-search-wrap::-webkit-scrollbar {
    display: none;
}


.living-search-scroll {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    height: 368px;
    top: 8px;
    padding: 2px;
}


.living-search-scroll::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
}

.living-search-scroll::-webkit-scrollbar-thumb {
    background: rgb(161, 161, 161); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

.living-search-scroll::-webkit-scrollbar-track{
    background: rgb(221, 221, 221); /* 스크롤바 색상 */
}



.living-search-title {
    text-align: center;
    margin-bottom: 11px;
}

.lp-title {
    font-size: 12px;
}


/*.living-search-container {
    display: flex;
    margin-bottom: 6px;
    font-size: 14px;
}*/
.living-search-container {
    margin-bottom: 6px;
}

.living-search {
    border: 1px solid #d2d2d2;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.living-search input {
/*    width: 350px;
    height: 37px;
    border: none;
    background: #f2f2f2;
    padding: 8px;*/
    width: 90%;
    border: none;
    font-size: 0.7rem;
    border-radius: 20px;
}

.living-search-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.living-search-btn button {
    width: 79px;
    height: 37px;
    border: none;
    background: #7f7f7f;
    color: white;
}*/

.living-search-btn {
    background: #eaeaea;
    border-radius: 23px;
    width: 33px;
    height: 33px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.living-search-btn:hover {
    cursor: pointer;
}

.living-detail-search-container {
    position: absolute;
    background: #FFFFFF;
    z-index: 999;
    width: 100%;
    height: 0;
    overflow: hidden;
    border: 1px solid #d2d2d2;
    border-radius: 20px;
    padding: 9px 13px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 1s ease, visibility 0s 0.5s;
}

.living-detail-search-container.on {
    height: 318px;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 1s ease, visibility 0s;
}

.living-detail-search {
    border: none;
  /*  background: #f2f2f2;*/
   /* height: 0;*/
   /* padding: 6px;*/
    overflow: hidden;
    transition: height 0.5s ease;
    width: 430px;
}

.living-detail-search.on {
    height: 300px;
}

.living-detail-search-title {
    font-size: 11.8px;
   /* margin-bottom: 3px;*/
}

/*.living-detail-search-table {
    background: #FFFFFF;
    display: flex;
    justify-content: center;

}*/

.living-detail-search-table table {
/*    border: none;
    border-collapse: separate;
    border-spacing: 0 7px;
    text-align: unset;
    width: 97%;
    font-size: 14px;*/
    width: 96%;
    border: none;
    border-collapse: separate;
    border-spacing: 0 6px
}

.living-detail-search-table table th:nth-child(1) {
/*    background-color: #ededed;
    text-align: center;
    width: 90px;*/
    font-size: 15px;
    background: #eaeaea;
}

.living-detail-search-table table th:nth-child(2) {
    /* font-size: 13px;*/
    /*font-size: 0.5rem;
    font-weight: 500;*/
    padding: 7px;
}

.living-detail-search-drop-down-btn {
    margin-right: 5px;
}

.living-detail-search-drop-down-btn img {
    width: 17px;
}

.search-btn img {
    width: 17px;
    height: 17px;
}


.sgg-radio-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
}

.living-checkbox label {
    left: 5px;
    font-size: 13px;
}

.living-input-list {
    display: flex;
    align-items: center;
}

.living-input-list label {
    margin-right: 7px;
}

.living-input-list input {
    margin-right: 3px;

}

.living-list.show {
    display: block;
}

.living-list {
    display: none;
}


.all-lp-container, .search-result-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 430px;
}

.lp-slide-content-img {
    width: 100%;
    height: 89px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}


.all-lp-content,
.search-content {
    border-radius: 18px;
    box-shadow: 1px 1px 1px 2px #d1cfcf;
    margin: 0px 6px 12px;
    height: 145px;
    font-size: 14px;
}

.lp-info-wrap {
    padding-left: 6px;
    top: 2px;
}

.living-detail-search-keyword {
    width: 100%;
    border: none;
    font-size: 16px;
}

.living-detail-search-keyword-th {
    display: flex;
}

/*.arrow_down {
    display: none;
    width: 10px;
}*/

.arrow_down.on {
 /*   display: block;
    width: 10px;*/
}

/*
.arrow_up {
    display: none;
    width: 10px;
}

.arrow_up.on {
    display: block;
}
*/

.lp-search-result-wrap {
    display: none;
}

.lp-search-result-wrap.show {
    display: block;
}

.search-list-header {
    background: #ededed;
    padding: 4px 15px;
    margin-bottom: 10px;
    color: #595959;
    font-size: 19px;
    display: none;
}
.search-list-header.show {
    display: block;
}
.search-list-header hr {
    margin: 0;
}

/*.search-result-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 430px;
}*/

/*.search-content img{
    width: 100%;
    height: 89px;
    border-top-left-radius: 18px;
}*/

.lp-activity-count-wrap {
    display: flex;
    /* position: absolute;
     top: 61px;
     background: #FFFFFF;
     border-radius: 4px;
     padding: 2px 8px 2px 8px;
     left: 7px;*/
    color: #2c3b7e;
    align-items: center;
}

.lp-activity-count-wrap img {
    width: 18px;
    height: 18px;
}

.lp-join-count {
    margin-right: 5px;
}


.more-btn-container {
    display: flex;
    justify-content: center;
    right: 11px;
}

.more-btn {
    display: none;
    border: none;
    background: none;
    color: #4b4b4b;
    font-size: 19px;
}

.more-btn.show {
    display: block;
}


.activity-sgg-name {
    font-size: 0.54444rem;
    color: #FFFFFF;
    margin-left: 4px;
}

.activity-board-title-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.activity-board-div1 {
    display: flex;
    align-items: center;
}

.activity-board-div3 {
    display: flex;
    align-items: center;
}

.activity-board-div4 {
    display: flex;
    flex-direction: column;
/*    justify-content: end;*/
    justify-content: center;
}

.grade-img {
    width: 20px;
    height: 20px;
}

.content-img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

/*.activity-map-img {
    position: relative;
    top: -4px;
    left: 16px;
}

.activity-map-img img {
    position: absolute;
}*/

.activity-map-btn,
.activity-gps-btn{
    width: 24px;
    height: 18px;
}

.activity-map-btn:hover,
.activity-gps-btn:hover{
    cursor: pointer;
}

.activity-map-btn-off,
.activity-gps-btn-off{
    display: none;
}

.activity-map-btn-off.show,
.activity-gps-btn-off.show {
    display: inline;
}

.activity-map-btn-on,
.activity-gps-btn-on{
    display: none;
}

.activity-map-btn-on.show,
.activity-gps-btn-on.show{
    display: inline;
}

.activity-gps-img {
    margin-left: 4px;
}

.select-activity-position-div {
    display: flex;
    align-items: center;
}

.select-activity-position {
    font-weight: 200;
    color: #797979;
    left: 5px;
    /* width: 227px;*/
    width: 70%;
    text-align: justify;
}

.select-activity-position.select,
.debris-tip-off-position.select {
    color: black;
}

.activity-position-overlay,
.debris-tip-off-position-overlay {
    background: navy;
    color: white;
    border-radius: 22px;
    width: 316px;
    text-align: center;
    display: none;
    top: 7px;
    font-size: 0.53333rem;
}

.activity-position-overlay.show,
.debris-tip-off-position-overlay.show {
    display: block;
}

.activity-list-overlay {
    padding: 10px 10px 0 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
   /* overflow-y: scroll;*/
    max-height: 475px;
    overflow-x: hidden;
    user-select: none;
    cursor: default;
    min-width: 200px;
}

.activity-list-overlay.show {
    display: block;
}

.activity-list-wrap {
    border: solid #F0F0F0;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 10px;
    margin: 0 0 10px 0;
}

.activity-list-flex {
    display: flex;
    align-items: center;
}

.activity-list-flex img {
    width: 20px;
    height: 20px;
}

.activity-list-title {
    font-size: 17px;
}

.activity-list-nickname {
    font-size: 14px;
    margin-left: 5px;
}

.activity-date {
    text-align: end;
    margin-top: 3px;
}

.activity-img-div {
    display: flex;
    justify-content: space-between;
}

.activity-img-div img {
    width: 40px;
    height: 40px;
}

.activity-img-div img:hover {
    cursor: pointer;
}

.activity-like-img {
    position: relative;
}

.activity-content-scroll-wrap {
   /* background: aquamarine;*/
   /* height: 154px;*/
    height: 145px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.activity-content-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.activity-reply-open-btn-img {
    left: 44px;
}

.activity-like-img img {
    position: absolute;
}

.like-off {
    display: none;
}

.like-on {
    display: none;
}

.like-off.show {
    display: block;
}

.like-on.show {
    display: block;
}


/*.activity-img-container {
    display: flex;
    left: 51px;
    justify-content: space-between;
    width: 90%;
}*/

.activity-reply-input-wrap {
    display: none;
    position: absolute;
    /* font-size: 0.7rem;*/
    font-size: 17px;
    border-top: 1px solid lightgray;
    /*border-bottom: none;*/
    border-radius: 6px;
    background: #FFF;
    height: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    padding: 2px;
}

.activity-reply-input-wrap.show {
    display: flex;

}

.activity-reply-btn-wrap {
    position: absolute;
    right: 0;
}

.activity-reply-btn {
    border-radius: 4px;
    font-size: 14px;
    background: #fff2cc;
    border: 1px solid lightgray;
    /*border: none;
    border-left: 1px solid lightgray;*/
    color: #757575;
    width: 50px;
    height: 41px;
}

.reply-form {
    display: flex;
    align-items: center;
}


.activity-reply-input input {
    width: 510px;
    height: 36px;
    border: none;
    outline: none;
    /* background: aquamarine;*/
}

/*.activity-reply-content {
    display: flex;
}*/
.activity-reply-inner-div {
    display: flex;
}

.reply-profile img {
    width: 45px;
    height: 50px;
}

.activity-reply-content {
    display: flex;
}

.activity-reply-content-level1 {
    left: 30px;
}

.activity-reply-content-level2 {
    left: 50px;
}

.activity-reply-content-wrap {
    display: none;
}

.activity-reply-content-wrap.show {
    display: block;
}

.activity-reply-count {
    display: none;
    color: #595959;
}

.activity-reply-count.show {
    display: block;
    width: 150px;
}

.activity-reply-count:hover {
    cursor: pointer;
    color: #666666;
}

.reply-level-up-btn {
    width: 70px;
    font-size: 0.43rem;
    left: 1px;
    color: #777070;
}

.reply-level-up-btn:hover {
    cursor: pointer;
    color: #666666;
}

.activity-pure-content {
    font-size: 0.6rem;
}

.activity-read-more-btn {
    color: #5d5555;
    text-decoration: underline;
    font-size: 0.5rem;
}

.lp-join-img {
    position: absolute;
}

.lp-join-img img {
    width: 56px;
    height: 26px;
    top: -98px;
    border-top-left-radius: 0;
    left: 4px;
}

.living-join-pop-wrap {
    width: 200px;
    height: 250px;
    position: absolute;
    background: white;
    padding: 10px;
    text-align: center;
    display: none;
    font-size: 12px;
    border-radius: 8px;
    box-shadow: 2px 2px 5px 2px #7d7e7f;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.living-join-pop-wrap.show {
    display: block;
    z-index: 999999;
}

.living-join-pop-wrap img {
    width: 100px;
    height: 100px;
}

.join-pop-btn-wrap {
    display: flex;
    justify-content: center;
    top: 20px;
}

.search-content.show {
    display: block;
}

.search-content.hide {
    display: none;
}

.no-search-wrap {
    display: none;
    text-align: center;
    font-size: 0.8rem;
    left: -7px;
}

.no-search-wrap.show {
    display: block;
}

.no-search-content {
    margin-bottom: 18px;
}

.lp-create-btn {
    background: #fff2cc;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    font-size: 0.63333rem;
    padding: 1px 8px;
}

.activity-reply-bottom {
    height: 0;
}

.activity-reply-bottom.on {
    height: 18px;
}

.activity-reply-div {
    margin-bottom: 10px;
    top: 7px;
}

.activity-margin-bottom {
    margin-bottom: 4px;
}

.like-count {
    color: #595959;
}

.activity-board-div2 {
    left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.activity-title {
    font-size: 0.8rem;
}

.activity-cover,
.activity-content-cover {
    background-image: url(../../images/target01/img_cover_activity.webp);
}

.activity-content-cover {
    display: none;
    border-radius : 8px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10% 0;
}

.activity-content-cover.show {
    display: flex;
}


.activity-nick-name {
    margin-right: 6px;
}

.lp-name-th {
    height: 34px;
}

.living-checkbox input {
    top: 2px;
}


.join-pop-btn {
    background: #fff2cc;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    /*font-size: 0.5rem;*/
    font-size: 12px;
    padding: 1px 8px;
    height: 23.55px;
    margin: 4px;
}

join-pop-btn:hover {
    cursor: pointer;
}

.join-pop-close-btn {
    background: #ededed;
}

.join-pop-content {
    top: 9px;
}

.reply-nick-name {
    margin-right: 9px;
    font-size: 0.5rem;
}

.reply-date {
    font-size: 0.4rem;
    top: 4px;
    color: #595959;
}

.reply-profile {
    margin-right: 7px;
}

.register-date-th {
    border: none;
    display: flex;
    width: 31%;
    height: 100%;
    align-items: center;
}

.register-date-th:hover {
    cursor: pointer;
}

.classification {
    color: #797979;
    background: transparent;
}

.classification option {
    color: black;
}

.activity-img-div img {
    width: 28px;
    height: 28px;
}

.activity-reply-open-btn-img {
    left: 35px;
}

.activity-profile img {
    width: 45px;
    height: 50px;
}

/*.lp-text {
    padding: 0.4vw;
    display: flex;
    height: 50px;
    align-items: center;
}*/

.url-pop {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    width: 214px;
    height: 36px;
    position: fixed;
    bottom: 19px;
    left: 50%;
    text-align: center;
    border-radius: 17px;
    transform: translateX(-50%);
    z-index: 99999;
}
.url-text {
    color: #FFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}


.activity-reply-level1 {
    width: 443px;
}

.activity-reply-level2 {
    width: 400px;
}

.living-search-close-btn {
    position: absolute;
    right: 8px;
    top: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #cccccc;
    z-index: 99999;
}

.living-search-close-btn:hover {
    cursor: pointer;
}

.living-search-close-btn img {
    width: 15px;
    height: 15px;
}

.living-datepicker-icon,
.debris-tip-off-datepicker-icon {
    width: 20px;
    height: 20px;
}
/*
.side-theme-location.mobile{
    top: -40px;
}
*/



/*내 활동 모아보기*/
.my-activity-wrap {
    display: flex;
    justify-content: end;
    margin-bottom: 4px
}

.my-activity {
    border: 1px solid;
    font-size: 12px;
    padding: 7px;
    background: #2f5597;
    color: #FFFFFF;
    border-radius: 20px;
    width: 114px;
}

.debris-tip-off-position-overlay {
    background: navy;
    color: white;
    border-radius: 22px;
    width: 316px;
    text-align: center;
    display: none;
    top: 7px;
    font-size: 0.53333rem;
}

.debris-tip-off-position-overlay.show {
    display: block;
}


/*해양쓰레기 공유*/
.debris-tip-off-create-table table {
    margin: 10px 0;
    width: 100%;
}

.debris-tip-off-create-table {
    font-size: 0.54444rem;

}

.debris-tip-off-create-table table th:nth-child(1) {
    background-color: #ededed;
    text-align: center;
}

.debris-tip-off-create-table input {
   /* width: 98%;*/
    border: none;
}
.debris-tip-off-create-table input:focus {
    outline: none;
}



.debris-tip-off-file-upload-btn {
    width: 98%;
}

.debris-tip-off-img {
    width: 100%;
/*    object-fit: cover;*/
    height: 286px;

}

.debris-tip-off-date-th {
    display: flex;
    align-items: center;
    border: none;
    width: 31%;
}

.debris-tip-off-position-div {
    display: flex;
    align-items: center;

}

.debris-tip-off-position {
    font-weight: 200;
    color: #797979;
   /* left: 5px;*/
    flex: 1;
    text-align: justify;
}

.debris-tip-off-map-img {
    display: flex;
    align-items: center;
}

.debris-tip-off-gps-img {
    margin-left: 4px;
}

.debris-tip-off-map {
    /* position: absolute;*/
}

.debris-tip-off-map-btn-off,
.debris-tip-off-gps-btn-off {
    display: none
}


.debris-tip-off-map-btn-on,
.debris-tip-off-gps-btn-on {
    display: none
}

.debris-tip-off-map-btn-off.show,
.debris-tip-off-gps-btn-off.show {
    display: block;
}

.debris-tip-off-map-btn-on.show,
.debris-tip-off-gps-btn-on.show {
    display: block;
}

.debris-tip-off-gps-img.hide {
    display: none;
}

.debris-tip-off-content {
    height: 48px;
}

.debris-tip-off-content::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
}

.debris-tip-off-content::-webkit-scrollbar-thumb {
    background: rgb(161, 161, 161); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

.debris-tip-off-content::-webkit-scrollbar-track{
    background: rgb(221, 221, 221); /* 스크롤바 색상 */
}

.dtf-create-btn-container {
    display: flex;
    justify-content: center;
    gap: 1vh;
    align-items: center;
}

.dtf-dash-title-section {
    margin-bottom: 0;
}

    /*해양쓰레기 공유하기- 목록표출*/
.debris-tip-off-board-wrap {
    font-size: 0.54444rem;
}

.debris-tip-off-board-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dtf-title {
    font-size: 0.8rem;
}

.dtf-nick-name {
    margin-right: 6px;
}

.dtf-content-wrap table {
    width: 100%;
   /* min-height: 131px;*/
    height: 137px;
}

.dtf-content-wrap table th:nth-child(1) {
    background-color: #ededed;
    text-align: center;
   /* min-width: 85px;*/
    width: 85px;
}

.dtf-content-wrap table th:nth-child(2) {
    text-align: left;
    padding-left: 5px;
}


.dtf-board-div1 {
    left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.dtf-profile-img img {
    width: 45px;
    height: 50px;
}

.dtf-share {
    width: 28px;
    height: 28px;
}

.dtf-profile-container {
    display: flex;
    align-items: center;
}

.dtf-name-container {
    display: flex;
    align-items: center;
}

.dtf-img {
/*    width: 100%;
    max-height: 309px;
    object-fit: cover;*/
    width: 96%;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    object-fit: contain;
    max-height: 293px;
}

.dtf-content-wrap {
    margin: 15px 0;
}

.dtf-share-div {
    display: flex;
    align-items: center;
}

.dtf-board-div2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dtf-footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dtf-choice-wrap {
    display: flex;
    align-items: center;

}

.dtf-choice-img-wrap {

}

.dtf-choice-wrap img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.dtf-create-activity-btn {
    background: #eee;
    border: 1px solid #bfbfbf;
    border-radius: 16px;
    width: 223px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    cursor: not-allowed !important;
}

.dtf-create-activity-btn.on {
    background: #fff2cc;
    cursor: pointer !important;
    color: black;
}

.dtf-choice-btn:hover {
    cursor: pointer;
}


/*공유하기 국민신문고 이동 팝업*/
.dtf-popup-wrap {
    position: fixed;
    top: 55%;
    right: 123px;
    transform: translateY(-50%);
    background-color: white;
    padding: 15px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-align: center;
    width: 350px;
    height: 213px;
}

.dtf-popup-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.dtf-popup-title {
    font-size: 25px;
    font-weight: bold;
}

.dtf-popup-content {
    font-size: 15px;
    color: #898888;
    margin: 5px 0 8px 0;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtf-popup-btn {
    border: 2px solid #315698;
    border-radius: 7px;
    width: 99px;
    font-size: 19px;
    height: 40px;
}

.dtf-popup-close-btn {
    background: #315698;
    color: #FFFFFF;
}

.dtf-popup-duplication-btn {
    background: #FFFFFF;
    color: #315698!important;
}

.dtf-popup-duplication-btn a {
    text-decoration: none;
    color: #315698!important;
    font-size: 15px;
    line-height: 1;
}

/*해양쓰레기 공유 - 클러스터 팝업 오버레이*/
.debris-tip-off-list-overlay {
    padding: 10px 10px 0 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    /* overflow-y: scroll;*/
    max-height: 475px;
    overflow-x: hidden;
    user-select: none;
    cursor: default;
    min-width: 200px;

}

.debris-tip-off-list-overlay.show {
    display: block;
}

.dtf-list-wrap {
    border: solid #F0F0F0;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 10px;
    margin: 0 0 10px 0;
}

.dtf-list-flex {
    display: flex;
    align-items: center;
}

.dtf-list-flex img {
    width: 20px;
    height: 20px;
}

.dtf-list-date {
    font-size: 17px;
}

.dtf-list-nickname {
    font-size: 14px;
    margin-left: 5px;
}

.my-dtf-wrap {
    display: flex;
    justify-content: end;
    margin-bottom: 4px
}

.my-dtf {
    border: 1px solid;
    font-size: 12px;
    padding: 7px;
    background: #2f5597;
    color: #FFFFFF;
    border-radius: 20px;
}

.non-data-text {
    font-size: 15px;
    text-align: center;
}


/*지도 아이콘 클릭 안됨 팝업*/
.non-click-popup-wrap {
    position: fixed;
    top: 50%;
    left: 43%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 15px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-align: center;
    width: 350px;
    height: 213px;
    z-index: 9999;
}

.non-click-popup-close-btn {
    border: 2px solid #315698;
    border-radius: 7px;
    width: 99px;
    font-size: 19px;
    height: 40px;
    background: #315698;
    color: #FFFFFF;
    top: 49px;
}

.non-click-popup-content {
    top: 31px;
}


/*해양정화활동 끝-윤경*/

/*해양정화활동추가 시작-현진*/
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start; /* 내부 아이템들을 좌측으로 정렬 */
    width: 90%;
    margin-left:10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.checkbox-item label {
    white-space: nowrap;
}

.other-trash-input-style {
    box-sizing: border-box;
    width: 100%;
    min-width: 250px;

    /*padding: 3px;*/
    padding: 6px 10px;
    border: 1px solid #bfbfbf;

    border-radius: 4px;
    flex-grow: 1;
    background-color: #fff;
    color: #333;
}

.other-trash-input-style:focus {
    outline: none;
    border-color: #7a7a7a; /* 기존 #bfbfbf보다 더 진한 회색 */
    box-shadow: 0 0 6px rgba(122, 122, 122, 0.8); /* 좀 더 선명한 그림자 */
}

.other-trash-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 4px;
}

.other-trash-option label {
    white-space: nowrap;
}

.other-trash-input-hidden {
    display:none;
}

.trash-classification-th {
    text-align: left !important;
    display: flex;
    align-items: flex-start;
}

.image-preview-wrap {
  display: flex;
  gap: 2px;
  align-items: center;
}

.image-preview {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  flex-grow: 1;
  min-width: 0;
  margin-left: 10px;

}

.image-upload-btn {
/*  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 98px;
  height: 73px;
  margin: 10px 1px 5px 5px;
  border: 3px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  background-color: #fff;*/
}

.preview-img-container {
  position: relative;
  width: 100px;
  height: 70px;
}

.preview-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border:3px solid #ccc;
}

.preview-img-container .remove-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #9e9e9e;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  font-size: 14px;
}

.custom-file-btn {
/*  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 100px;
  height: 70px;*/
}

.custom-file-btn img {
/*  width: 35px;
  height: 35px;
  margin-top: 4px;
  margin-bottom: 4px;*/
}

.image-item {
  position: relative;
  width: 100px;
  height: 70px;

}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 3px solid #ccc;
}

.image-item .delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #9e9e9e;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  font-size: 14px;
}

#new-activity-img-btn {
  display: none !important; /* input 완전 숨김 */
}

#new-debris-tip-off-img-btn {
  display: none !important; /* input 완전 숨김 */
}

.custom-file-btn div {
  color: #bfbfbf;
  font-size: 14px;
}

/*해양정화활동추가 끝-현진*/

/*라이트박스(사진확대)*/
.lightbox-overlay {
/*  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 내부 이미지 영역 */
.lightbox-content {
  position: relative;
    display: flex;
}

/* 확대된 이미지 */
.lightbox-img {
  width: auto;
  height: auto;
  max-width: 70vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
}

/* 닫기 버튼 */
.lightbox-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    z-index: 1001;
}


/*슬라이드 관련*/

.slick-dots {
    bottom: 9px;
}

.slick-dots li {
    background: #d0cece;
}

.slick-dots li.slick-active {
    background: #002060;
}

.slide-btn img {
    width: 15px;
    height: 15px;
}

.slide-btn {
    position: absolute;
    top: 112px;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.7);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.slide-btn:hover {
    cursor: pointer;
}

.prev-btn {
    left: 4px;
}

.next-btn {
    right: 4px;
}




/* 조회 팝업 */
.popup-section {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.popup-section-background {
    position: absolute;
    border-radius: 4px;
    background: white;
    box-shadow: 2px 2px 5px 2px #7d7e7f;
    z-index: 99;
    padding: 20px 10px;
}

.cctv-live-popup {
    width: 300px;
    /*height: 315px;*/
    bottom: 10%;
    left: 45%;
    padding: 0;
    padding-bottom: 4px;
    font-size: 0.53333rem;
}

.date-check-popup,
.end-date-popup,
.coast-popup {
    font-size: 0.64444rem;
    width: 250px;
    height: 244px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}

.coast-pop-info {
    font-size: 16px;
}

.date-check-div {
    text-align: center;
}

.date-check-img {
    width: 100px;
}

.date-check-btn {
    border: 1px solid gray;
    color: white;
    background: gray;
    border-radius: 6px;
}
/*해안선 팝업*/
.coast-popup-section-background {
    width: 100%;
}
/* 조회 초과 팝업 끝 */
/* CCTV 라이브 팝업 */
.cctv-live-header {
    background: #f2f2f2;
    padding: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.cctv-live-btn {
    background: none;
    border: none;
    position: absolute;
    right: 8px;
}

.cctv-live-div {
    display: flex;
    flex-direction: column;
    padding: 4px 10px;
}

/* CCTV 라이브 팝업 끝 */
/* dron 이미지 슬라이드 팝업 */
.dron-popup{
    bottom: .5%;
    width: 300px;
    left: -57%;
    height: auto;
    padding: 0;
}

.dron-popup-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #deebf7;
}
.dron-popup-header h4{
    font-size: 16px;
}
.dron-popup-header a{
    font-size: 20px;
    height: 12px;
    display: block;
    color: #000000;
    text-decoration: none;
    line-height: 0.3;
}
.dron-popup .dron-popup-content{
    padding: 0 10px;
}
.dron-popup .carousel-item span{
    display: block;
    font-size: 10px;
}

/* dron 이미지 슬라이드 팝업 끝 */
/* 인공위성 이미지 정보 시작 */

.satel-image {
    width: 100%;
    height: 35vh;
}

/* 인공위성 이미지 정보 끝 */

/* 수위정보 테이블 시작 */
.downpour-etc {
    width: 20%;
}

/* 수위정보 테이블 끝 */

/* 실시간 CCTV 안내 팝업 */
.cctv-modal {
    width: 330px;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    background: white;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-align: center;
    border-radius: 10px;
}

.cctv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* 제목 */
.modal-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* 운영시간 */
.modal-time {
    font-size: 16px;
    margin: 10px 0;
    color: #666;
}

/* 설명 텍스트 */
.modal-description {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}
.modal-close {
    width: 100%;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: #2b3a7d;
    color: white;
}

.modal-close:hover {
    background: #3c4e99;
}

.cctv-modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.cctv-overlay.active {
    opacity: 1;
}

.hidden {
    display: none;
}

.hide {
    display: none;
}

/* 실시간 CCTV 안내 팝업 끝 */

/* !기본 해상도 코드는 브레이크 포인트 위에다가 작성해주세요! */


/*cctv 클러스터 팝업 오버레이*/
.cctv-list-overlay {
    padding: 10px 10px 0 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    /* overflow-y: scroll;*/
    max-height: 475px;
    overflow-x: hidden;
    user-select: none;
    cursor: default;
    min-width: 200px;

}

.cctv-list-overlay.show {
    display: block;
}

.cctv-list-wrap {
    border: solid #F0F0F0;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 10px;
    margin: 0 0 10px 0;
}


@media all and (max-width: 1300px) {

   .side-theme-section.on {
        /*transform: translate(calc(var(--side-section-width) * -1), calc(2rem + 1vh));*/

       top: 207px;
    }


    .side-theme-section.on.activity {
        /*transform: translate(calc(var(--side-section-width) * -1), calc(2rem + 1vh));*/

       top: 140px;
    }


}




/* 1300px 이하는 대시보드 크기제한 해제 */
@media screen and (min-width: 600px) and (max-width: 1400px) {
    .side-header-section {
       /* background: red;*/
    }

    .side-section {
        min-width: 42vw;
    }

    /*대시보트 new css*/
    .side-layer {
        left: calc(var(--side-layer-width)* -1.3);
    }

    .dtf-content-wrap table {
        height: 154px;
    }

/*    .dron-side-theme-location {
        left: calc(var(--side-layer-width)* -4.3);
    }*/


    .side-theme-section.on {

        transform: translate(calc(var(--side-section-width) * -0.95), 0);
    }

}

/*모바일 가로*/
/*추가 수정 필요할듯...*/
@media all and (max-width: 1000px) and (max-height: 600px) {
    .side-header-section {
       /* background: blue;*/
    }

    :root {
        --side-section-width: 400px;
    }

    .side-content-section {
        display: block;
        height: auto;
        aspect-ratio: 1/1.6;
    }

    .header-box {
        flex: 1 1 5%;
    }

    .hide {
        display: none;
    }

    .page-btn {
        position: fixed;
    }

    .page-btn.prev {
        /*left: -3%;*/
        top: 45%;
    }

    .page-btn.next {
        /*right: -3%;*/
        top: 45%;
    }

    .wl-table, .monit-table {
        font-size: 0.74444rem;
    }

    .info-content-title {
        font-size: 0.4rem;
    }

    .info-section {
        flex: 0 1 auto;
    }
    .dron-popup {
        display: none;
    }
    .dron-debris-table{
        font-size: 8px;
    }
}

/*모바일 세로*/
@media all and (orientation: portrait) {

    :root {
        --header-section-height: 60px;

        --side-section-height: 44dvh;
        --side-section-height2: 70dvh;

        /*new css*/
        --side-layer-width: 171px;
    }


    .side-section {
        width: 100%;
        height: var(--side-section-height);
        border-bottom-left-radius: 0;
        border-top-right-radius: var(--side-section-radius);
        transform: translate(0, calc(100dvh - var(--header-section-height)));
    }

    .side-section.on {
        transform: translate(0, calc(100dvh - var(--header-section-height) - var(--side-section-height)));
    }


    .side-section.on.portrait {
        height: var(--side-section-height2);
        transform: translate(0, calc(100dvh - var(--header-section-height) - var(--side-section-height2)));
    }


    .side-section-btn {
        transform: rotate(90deg);
        top: -38px;
        right: 47.5%;
        z-index: -1;
    }

    .side-content-section {
        display: block;
/*        height: auto;
        min-height: auto;*/
        aspect-ratio: 1 / 1.33;
    }

    #dron-page .side-content-section {
        display: block;
        height: auto;
        min-height: auto;
        aspect-ratio: 1 / 1.66;
    }
    #dron-page .side-content-section.hide {
        display: none;
    }

    .header-box {
        flex: 1 1 5%;
    }

    .header-box.portrait {
        flex: 1 1 0%;
    }

    .hide {
        display: none;
    }

    .page-btn {
        position: fixed;
    }

    .page-btn.prev {
        top: 50%;
    }

    .page-btn.next {
        top: 50%;
    }

    .wl-table, .monit-table {
        font-size: 0.54444rem;
    }

    .info-content-title {
        font-size: 0.4rem;
    }

    .info-section {
        flex: 0 1 auto;
    }

    .monthpicker {
        width: 20vw;
    }

    .overviewmap-control.on {
        transform: translate(0, calc(var(--side-section-height) * -1));
    }

    .overviewmap-control button {
        font-size: 1rem !important;
    }

    .cctv-dash-cover {
        background-image: url(../../images/target01/img_cover_cctv_mobile.webp);
        color: white;
        padding: 5% 33% 0 0;
    }
    .cctv-live-dash-cover {
        background-image: url(../../images/target01/img_cover_cctv.webp);
        color: white;
        justify-content: flex-start;
        padding-top: 10%;
    }

    .satel-dash-cover {
        background-image: url(../../images/target01/img_cover_satel_mobile.webp);
    }

    .dron-dash-cover {
        background-image: url(../../images/target01/img_cover_dron_mobile.webp);
    }

    .activity-dash-cover {
        background-image: url(../../images/target01/img_cover_activity_mobile.webp);
    }

    .dash-cover {
        border-bottom-left-radius: 0px;
        padding: 5% 0;
    }

    .activity-content-cover {
        border-bottom-left-radius: 0px;
        padding: 5% 0;
    }

    /*정화활동*/
    .living-search-wrap.mobile {
        /* width: 85%;*/
        /*right: 7vw;*/
        max-width: 335px;
    }

    .living-detail-search-drop-down-btn.mobile {
        /* width: 79.5vw;*/ /*모바일에는 이게 맞음*/
      /*  width: 317px;*/
    }

    .living-search.mobile input {
        width: 238px;
    }

    .living-detail-search.mobile {
        width: 317px;
    }

    .living-checkbox.mobile label {
        /* font-size: 0.58rem;*/
        font-size: 10px;
    }

    .living-status-list.mobile label {
        margin-right: 5px;
    }

    .living-detail-search-table.mobile table th:nth-child(1) {
        /*   width: 12vw;
          font-size: 0.56rem;*/
        font-size: 9px;
        width: 47px;
    }

    .lp-slide-content-img.mobile {
        /*width: 36vw;*/
        width: 100%;
        height: 85px;
    }

    .living-detail-search-title.mobile {
        /* font-size: 0.6rem;*/
        font-size: 10px;
    }

    /* .lp-text.mobile {
         padding: 8px;
         height: 39px;
     }*/
    .lp-activity-count-wrap.mobile-true {
        /* top: 57px;*/
    }

    .all-lp-content.mobile, search-content.mobile {
        height: 133px;
    }

    .all-lp-container.mobile, .search-result-list.mobile {
        /*  width: 80vw;*/
        width: 317px;
    }

    .living-search-wrap {
        /*  height: 392px;
          top: 130px;
          right: 5vw;
          width: 456px;*/
    }

    .living-search-wrap.mobile {
        /*width: 85%;
        right: 7vw;*/
    }

  /*  .create-activity-btn {
        height: 20px;
    }*/

    .living-join-pop-wrap.mobile {
        top: 240px;
        right: 25vw;
        /*  font-size: 0.68rem;*/
        font-size: 12px;
    }

    .lp-search-popup-btn.mobile {
        font-size: 0.6rem;
        width: 19vw;
    }

    .activity-create-btn-container {
        /*margin-top: 0.5vh;*/
        height: 3.5vh;
    }

    .activity-btn {
        height: 3vw;
    }


    .activity-btn.mobile {
        height: 4vw;
    }

    .activity-board-wrap {
        height: 100%;
    }


    .living-search input {
        height: 30px;
    }

    .living-search-btn button {
        height: 30px;
    }

    .activity-position-overlay {
        width: 215px;
    }

    .debris-tip-off-position-overlay {
        width: 215px;
    }

    .activity-profile img {
        width: 55px;
        height: 60px;
    }

    .dtf-profile-img img {
        width: 55px;
        height: 60px;
    }

    .activity-title {
        font-size: 0.9rem;
    }

    .activity-nick-name {
        font-size: 0.6rem;
    }

    .activity-date {
        font-size: 0.6rem;
    }

    .grade-img {
        width: 18px;
        height: 18px;
    }

    .activity-content-scroll-wrap {
        /*background: aquamarine;*/
        height: calc(100% - 43dvh);
        /*  display: none;*/
    }

    .living-datepicker-icon,
    .debris-tip-off-datepicker-icon {
        width: 15px;
        height: 15px;
    }

    .dron-popup {
        display: none;
    }
    .dron-debris-table{
        font-size: 8px;
    }

    /*대시보드 new css  @media all and (orientation: portrait)*/
    .side-header-section {
      /*  background: #7ade23;*/
    }

    .side-theme-section,
    .side-theme-section.on,
    .side-theme-section.on.activity {
        /*    right: 8px;
            top: 60px;*/
       top: 62px;
        position: fixed;
        z-index: 999;
        transform: translate(0, 0);
    }


    .side-layer-group {
        width: var(--side-layer-width);
    }

    .side-layer {
        left: calc(var(--side-layer-width)* -0.98);
    }


    /*250519*/
    .dash-cover {
        background-size: 100% 88%;
    }

    .cctv-dash-cover {
        padding: 14% 44% 0 0;
    }
    .overviewmap-control, .overviewmap-control:not(.ol-collapsed) {
        bottom: 2.5em;
    }



}




    @media screen and (min-width: 780px) and (max-width: 800px) and (orientation: portrait) {

    .debris-theme-menu {
        width: calc(var(--theme-menu-width) - 380px);
    }

    .theme-menu-legend {
        top: 53px;
    }

}


@media screen and (min-width: 600px) and (max-width: 780px) and (orientation: portrait) {

    .debris-theme-menu {
        width: calc(var(--theme-menu-width) - 380px);
        font-size: 2.9vw;
        width: auto;
        height: auto;
    }
    .legend-title {
        font-size: 16px;
    }
    .theme-menu-legend {
        top: 48px;
    }
}

@media screen and (max-width: 600px) and (orientation: portrait) {

    .theme-menu-legend {
        top: 48px;
    }
}


@media screen and (min-width: 500px) and (max-width: 600px){
    .side-theme-section {
        /*top: 20px;*/
    }

    /*new css*/
    .side-header-section {
       /* background: #ffebeb;*/
    }

/*    .dron-side-theme-location {
       left: -481px;
        top: 71px;
    }*/
}


@media  (max-width: 540px) {

    .side-theme-section,
    .side-theme-section.on {
        left: 177px;
        top: 170px;
    }

    .side-theme-section.on.activity,
    .side-theme-section.activity{
        left: 177px;
        top: 109px;
    }


}




/* 작은 모바일 화면 */
@media (max-width: 499px) {
    /*new css*/
    .side-header-section {
        /*background: yellow;*/
    }

    :root {
        --side-layer-width: 165px;
    }

    .side-theme-section {



        /*top: 110px;*/
    }

    .dron-side-theme-location {
   /*  left: -481px;
        top: 71px;*/

    }

}