@import "../../node_modules/ol-ext/dist/ol-ext.min.css";


/* 배경 이미지 */
main {
    background-color: transparent;
    background-image: url('../../images/target02/main.webp');
    background-size: 100% auto;
    background-color: #fbde99;
}
/* 배경 이미지 끝 */
 :root {
     --side-theme-width : 200px;
     --side-layer-width : 150px;
 }

.content-container.show{
     display: flex;
 }

/* side-section */

/* side-theme-section */
/*
.side-theme-section {
    right: 8px;
    top: var(--header-section-height);
    font-size: 0.53333rem;
    position: fixed;
    z-index: 999;
    transform: translate(0, 0);
    transition: .5s;
}

.side-theme-section.on {
    transform: translate(calc(var(--side-section-width) * -1), 0);
}
/*
.side-theme {
    position: absolute;
    left: calc(var(--side-theme-width) * -1);
    top: 10px;
    display: none;
}
*/

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

.side-theme-location {
    position: absolute;
    left: calc(var(--side-theme-width) * -1.15);
    top: 10px;
    display: none;
}

.side-theme.show {
    display: block;
}

.side-theme-item {
 /*   width: var(--side-theme-width);*/
    width: 200px;
    aspect-ratio: 5.5555 / 1;
    border-radius: 20px;
    margin-bottom: 8px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.side-theme-item > img {
    width: 35px;
    aspect-ratio: 1 / 1;
    position: absolute;
    left: 0;
    margin-left: 8px;
}

.side-theme-item > span {
    margin-left: 12px;
}

.side-theme-item:hover {
    cursor: pointer;
    background: #2f5597;
    color: white;
}

.side-theme-item.on {
    background: #2f5597;
    color: white;
}

.port-side-theme-item{
    position: relative;
/*    margin-bottom: 0;*/
}

.port-search{
    position: absolute;
   /* top: 100%;*/
    top: 0;
   /* right: 14px;*/
    right: 223px;
    background: #FFFFFF;
}

.port-search-toggle{
    /*width: calc(var(--side-theme-width) - 29px);*/
    height: 15px;
    background-image: url(../../images/common/btn_arrow_down.png);
    background-repeat: no-repeat;
    background-position: center;
    padding: 0 !important;
}

.port-search-exmark{
    position: absolute;
    right: 10px;
}

.port-search-exmark>img{
    width: 17px;
}

.port-search.show{
    width: calc(var(--side-theme-width) + 80px);
    border-radius: 10px;
    display: block;
}

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

.port-search li{
    color : #212529 !important;
    padding: 0.3rem 0.3rem 0 0.3rem;
}

.port-search .form-select{
    font-size: 0.53333rem;
    padding: 0.375rem;
    background-position: right 0.43em center;
    background-image: url(../../images/common/btn_arrow_down.png);
    cursor: pointer;
}

.warning{
    border: 1px solid #ff0000;
}

.port-search .form-select option{
    cursor: pointer;
}

.port-search-button{
    padding: 0.6rem 0.3rem 0.3rem 0.3rem !important;
}

.port-search .btn{
    font-size: 0.533333rem;
    background-color: #2F5597;
    color: #FFFFFF;
    line-height: 1.0;
    width: 100%;
}
/*선박탄소배출 토글 new css*/
.port-search-title {
    font-size: 17px;
    font-weight: bold;
}

/* side-theme-section 끝 */

/* side-layer */
/*.side-layer{
    left: calc(var(--side-layer-width)* -1);
}*/
/*
.side-layer.show {
    display: block;
}

.side-layer-group {
    flex-direction: column;
    width: var(--side-layer-width);
    aspect-ratio: 5.5555 / 1;
    border-radius: 20px;
    margin-bottom: 8px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.side-layer-group-title{
    margin-left: 12px;
    display:block;
    cursor: pointer;
}

.side-layer-group-title.on{
    margin: 0 0 8px 12px;
}

.toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.collapsed {
    transform: rotate(180deg);
}

.side-layer-items {
    display: none;
    width: 100%;
    padding-left: 0;
}
.side-layer-items.show {
    display: block;
}

.side-layer-item {
    width: var(--side-layer-width);
    aspect-ratio: 5.5555 / 1;
    border-radius: 20px;
    margin-bottom: 15px;
    background-color: #ffffff;side-layer
}

.side-layer-item > img {
    width: 35px;
    aspect-ratio: 1 / 1;
    position: absolute;
    left: 0;
    margin-left: 8px;
}

.side-layer-item > span {
    margin-left: 30px;
}

.side-layer-item > .switch{
    margin-left : 10px;
}

 */


/*타겟2 오른쪽 토글 css*/
.side-layer-group {
    width: 200px;

}

.side-layer-group-title {
    height: 37px;
    width: 101%;
}

.side-layer-item {
    width: 200px;
}

.side-layer-item > .switch {
    right: 11px;
}

/*타겟2 대시보드 높이 문제..*/
/*.side-section {
    top: 84px;
}*/


/* side-layer 끝*/

/* help guidance */
.help-guide-section{
    /*width: 300px;*/
    width: 287px;
    display: none;
    /*right: 8px;*/
    right: 250px;
  /*  top: calc(var(--header-section-height) + 65px);*/
    top: calc(var(--header-section-height) + 18px);
    position: fixed;
    z-index: 999;
    height: 315px;
    transition: transform 0.3s ease; /* 부드러운 애니메이션 */
    background-color: white;
    border-radius: 20px;
}

.help-guide-close{
    position: absolute;
    right: 15px;
    top: 5px;
    font-size: 0.6rem;
    cursor: pointer;
}

.ship-help-guide-section{
 /*   top: calc(var(--header-section-height) + 335px);*/
    top: calc(var(--header-section-height) + 319px);
    height: 220px;
}

.help-guide-section.show{
    display: block;
}
.help-guide-section.hide{
    display: none;
}
.help-guide-section p{
    text-align: center;
    font-size: 0.86666rem;
    background: #002060;
    color: white;
    border-radius: 20px 20px 0 0;
}

/* 슬라이드 이미지 */

.help-guide-carousel-item img {
    width: 90%;
    height: auto;
    left : 6%;
}
.help-guide-carousel-indicators{
    bottom: -30px; /* 인디케이터가 이미지 아래로 이동하도록 설정 */
    margin-bottom: 0 !important;
}
.carousel-indicators li{
    border-radius: 50%;
    background-color: #7f7f7f !important;
    width: 8px !important;
    height: 8px !important;

}

/* help guidance */

/* 대시보드 */
.header-box {
    flex: 1 1 0%;
}

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

/*page 클래스*/
.port-dash-page1,
.port-dash-page2,
.area-dash-page1,
.galmaet-dash-page1{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.side-section-port,
.side-section-area,
.side-section-galmaet {
    display: none;
    overflow-y: hidden;
    overflow-x: hidden;
    max-height: 100%;
    height: 100%;
}

.side-section-port.show,
.side-section-area.show,
.side-section-galmaet.show {
    display: block;
}
/* 대시보드 커버 */
.port-cover {
    background-image: url(../../images/target02/img_cover_port.webp);
}
.area-cover {
    background-image: url(../../images/target02/img_cover_area.webp);
}
.chart-cover {
    background-image: url(../../images/target02/img_cover_chart.webp);
}
.galmaet-cover {
    background-image: url(../../images/target02/img_cover_galmaetgil.webp);
}
/* 대시보드 커버 끝 */

/* 대시보드 끝 */

/* 공통 */
.dash-title-section {
    /*margin-bottom: 4%;*/
}

.dash-title-section span {
   /* font-size: 0.809rem;*/
    font-size: 0.80rem;

}

.dash-title-section.column {
    display: flex;
}

.dash-title-section.column span {
    font-size: 0.509rem;
}
/* 공통 끝 */

/* 바다좋은 부산 */
.side-section-page.show {
    display: flex;
}

.msrstn-section {
    flex: 2 1 0%;
}

.msrstn-table-section {
    height: calc(96% - 1.5rem);
}

.msrstn-table {
    font-size: 0.53333rem;
    height: 100%;
    width: 100%;
    text-align: center;
    border: 1px solid black;
}

.msrstn-table th,
.dust-chart-table th{
    background: #f1e9e3;
}

.forecast-section {
    display: flex;
    flex-direction: row;
    flex: 1.5 1 0%;
    height: 100%;
}
.forecast-section .dash-section:first-child {
    flex: 2;
    margin-right: 0.5%;
}

.forecast-section .dash-section:last-child {
    flex: 1;
    margin-left: 0.5%;
}

.forecast-index-section {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.forecast-index-section > div {
    width: calc(50% - 2px);
    padding: 2%;
}

.dust-index-section {
    font-size: 0.53333rem;
    border-radius: 8px;
    border: 2px solid black;
    padding: 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dust-index-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 2;
}

.dust-index-img {
    width: 2.6vw;
    flex: 1;
}

.dust-index-date {
    font-size: 0.4rem;
    letter-spacing: -1px;
}

.aod-index {
    top: -11px;
}

.dust-chart-section {
    /*flex: 4 1 0%;*/
    height: 48%;
    margin-bottom: 1vh;
}

.dust-chart-legend{
    position: absolute;
    height: 0.7rem;
    right: 0px;
    bottom: 6px;
}

.dust-content-section {
    height: calc(100% - 1.5rem);
    width: 100%;
}

.dust-chart-content {
    width: 100%;
    height: 78%;
    /*aspect-ratio: 2.08 / 1;*/
}

.dust-chart-table {
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 0.53333rem;
}

.dust-table-content {
    height: 22%;
    width: 100%;
    /*aspect-ratio: 6.3 / 1;*/
}

#dust-chart,
#total-chart,
#ship-chart,
#transport-chart,
#area-chart{
    width: 100%;
    height: 100%;
    margin: auto;
    align-content: center;
}

.turn {
    width: 100%;
    height: 100%;
}

.total-chart-section {
    flex: 4 1 0%;
}

.total-content-section {
    height: calc(100% - 1.5rem);
    width: 100%;
}

.ship-chart-section {
    flex: 6 1 0%;
}

.ship-content-section {
    height: calc((100% - 1.5rem) / 2);
}
.transport-content-section{
    height: calc((100% - 1.5rem) / 2);
    display: flex;
}

.transport-chart-section {
    flex: 1.5 1 0%;
}

.transport-table {
    flex: 1;
    text-align: center;
    margin-top: 24px;
    font-size: 0.53333rem;
}



.dust-chart{
    height: 15vh;
    width: 84.5vw
}

.transport-table tr:nth-child(2) td:nth-child(1){
    background: #5672c6;
    color: white;
}
.transport-table tr:nth-child(3) td:nth-child(1){
    background: #90c675;
    color: white;
}
.transport-table tr:nth-child(4) td:nth-child(1){
    background: #fac85a;
    color: white;
}
.transport-table tr:nth-child(5) td:nth-child(1){
    background: #ee6767;
    color: white;
}
.popup-lidar-date{
    background-color: rgba(0,0,0, 0.7);
    font-size: 16px;
    padding: 4px;
    color: #FFFFFF;
    border-radius: 10px;
}
/* 바다좋은 부산 끝 */

/* 살기좋은 부산 */

.lpi-section{
    /*flex: 3.5 1 0%;*/
    height: 48%;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.forecast-section.column {
    flex-direction: column;
    /*flex: 1 1 0%;*/
}

.forecast-section.column .dash-section {
    margin: 0.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.area-popup {
    font-size: 0.53333rem;
    border-radius: 8px;
    display: none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(188,183,205, 0.8);
    box-shadow: 7px 7px 20px -8px;
    border: 1px solid #83838D;
}

.area-popup.coastline{
    border: 4px solid #0c00ff;
    border-radius: 7px;
}

.area-popup-title {
    text-align: center;
    font-weight: bold;
}

.area-popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px 7px 5px;
}

.area-popup-box {
    display: flex;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    padding: 5px;
    margin: 0 5px;
    flex-direction: column;
    cursor: pointer;
    box-sizing: border-box;
    transition: border 0.3s ease;
}

.area-popup-box.on{
    box-sizing: border-box;
}

.area-popup-box-upper {
    padding: 5px;
}

.area-popup-box-lower {
    padding: 3px;
    background-color: #48ACE4;
    color: #FFFFFF;
    border-radius: 8px;
    text-shadow: -1px 0 #494949, 0 1px #494949, 1px 0 #494949, 0 -1px #494949;
}

.area-popup-box-upper-name {
    margin-bottom: 5px;
}


/* 살기좋은 부산 끝 */

/* 걷기좋은 부산 */
.galmaet-info-section{
    height: calc(100% - 1.5rem);
    width: 100%;
}

.galmaet-lk-img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 4px;
    border: 1px solid black;
    border-radius: 8px;
}

.galmaet-lk-name {
    margin-bottom: 6px;
    font-size: 0.75rem;
}

.galmaet-lk-content {
    font-size: 0.53333rem;
    height: calc(100% - 26px);
    overflow-y: scroll;
    display: inline-block;
}

.galmaet-content-section {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.galmaet-info-content {
    font-size: 0.53333rem;
    border: 1px solid black;
    height: 20%;
    border-radius: 8px;
    align-content: center;
    padding: 0 5%;
    background: #f3fbf3;
}

.galmaet-info-content a{
    font-size: 0.43333rem;
}

.galmaet-info-content .galmaet-lk-link {
    margin-right: 10px;
}

.galmaet-lk-section {
    padding: 4px;
    height: calc(35% - 8px);
    display: flex;
    flex-direction: column;
    text-align: left;
}

.galmaet-lk-popup {
    z-index: 9999;
    width: 70vw;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 28px;
    border: 1px solid lightgray;
    padding: 18px;
    display: none;
}

.galmaet-lk-popup.show {
    display: block;
}

.galmaet-lk-close-btn {
    width: 100%;
    background: lightgray;
    border: 1px solid lightgray;
    border-radius: 8px;
    margin-top: 4px;
    color: black;
}

.galmaet-carousel-inner{
    height: 100%;
    width: 96%;
    left: 12px;
}


/* 걷기좋은 부산 끝 */
/* side-section 끝 */


/* carousel */
.carousel-item {
    transition: transform 0.6s ease-in-out;
    text-align: center;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}
/* carousel 끝 */

/*----------------------------- 주임님 코드 -------------------------------*/
.target-board {
    position: absolute;
    top: 0;
    right: 0;
    width: 632px;
    height: 975px;
    z-index: 1;
    background-color: #fff;
    /*padding: 10px;*/
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateX(calc(100% - 762px)) scaleX(0);
    transform-origin: top right;
    opacity: 0;
}

.target-board.active {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateX(0) scaleX(1);
    opacity: 1;
}


.target-board-text {
    font-size: 26px;
    font-weight: bold;
    background: #f2f2f2;
    height: 27px;
    padding: 17px;
}

.target-board-text span {
    font-size: 20px;
    color: #595959;
}

.target-board-date {
    position: absolute;
    right: 20px;
    top: 9px;
}


.dust-btn-div {
    position: absolute;
    top: 0;
    right: 4px;
    z-index: 1;
    padding: 10px;
    transition: transform 0.5s ease;
    transform: translateX(1px);
}

.dust-btn-div.active {
    transition: transform 0.5s ease;
    transform: translateX(-775px);
    right: -148px;
}


.dust-btn {
    position: relative;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 20px;
    width: 197px;
    height: 37px;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    display: none;
    color: #969696;
}

.dust-btn span {
    position: absolute;
    margin-left: 14px;
    font-size: 17px;
}


.dust-btn img {
    position: absolute;
    left: 0;
    margin-left: 8px;
}

.dust-btn:hover {
    cursor: pointer;
    background: #2f5597;
    color: white;
}

.dust-btn.on {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dust-btn:focus {
    background: #2f5597;
    color: white;
}

.dust-board {
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    padding: 8px 10px 8px 10px;
    width: 90%;
    margin: 8px 16px 4px 32px
}
.side-section-area .dust-board,
.side-section-galmaet .dust-board{
    margin: 1vh 16px 0.5vh 32px;
}

.dust-board tr:first-child {
    background: #f1e9e3;
}

.dust-board-content { /*내용*/
    margin: 4px auto 0;
    width: 546px;
    text-align: center;
}

.dust-board-content th {
    border: 1px solid #bfbfbf;
}

.vessel-list {
    border: 1px solid transparent;
    background: white;
    width: 150px;
    margin: -8px 0 5px 21px;
    border-radius: 4px;
    overflow: hidden;
    height: 0px;
    visibility: hidden;
    transition: height 0.3s, visibility 0.3s;

    /* transition: transform 0.3s ease, opacity 0.3s ease;
     transform: translateY(calc(100% - 100px)) scaleY(0);
     transform-origin: top right;
     opacity: 0;*/
}

.vessel-list.on {
    height: 100px;
    visibility: visible;
    /*transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(0) scaleY(1);
    opacity: 1;*/
}

.vessel-list ul {
    text-align: center;
}

.vessel-list select {
    width: 100px;
    margin-bottom: 2px;
}

.vessel-list input {
    width: 100px;
    margin-bottom: 2px;
}

/*미세먼지 변화 버튼*/
.monit-item {
    margin: 0 0 0 10px;
}

.monit-item li {
    display: inline-block;
    height: 26px;
    width: 120px;
    background: #2f5597;
    border: 3px solid #ffffff;
    text-align: center;
    border-radius: 20px;
    vertical-align: middle;
    color: #ffffff;
}

.monit-dust.on {
    background: #ffffff;
    color: #2f5597;
}

.monit-dust:hover {
    cursor: pointer;
    background: #ffffff;
    color: #2f5597;
}


/*
.monit-item {
    display: none;
}

.monit-item.on{
    display: block;
}
.monit-item li {
    width: 150px;
    height: 30px;
    border-radius: 20px;
    margin-bottom: 8px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.monit-dust.on {
    background: #2f5597;
    color: white;
}

.monit-pm10:hover {
    cursor: pointer;
    background: #2f5597;
    color: white;
}

.monit-pm25:hover {
    cursor: pointer;
    background: #2f5597;
    color: white;
}
*/

/*미세먼지 슬라이더*/
.dust-slider-section {
    font-size: 0.53333rem;
    position: absolute;
    width: 36.719vw;
    height: 11.637vh;
    border: 3px solid #2f5597;
    border-radius: 15px;
    background: #2f5597;
    color: white;
    left: 52%;
    bottom: 0;
    transform: translate(-50%, -50%);
    z-index: 9999;
    flex-direction: column;
    display: none;
}
.dust-slider-section.on{
    display: block;
}

.slider-dust-index-img-section {
    position: absolute;
    z-index: 9999;
    bottom: 80px;
    right: 0px;
    margin-right: 16px;
    display: none;
    flex-direction: column;
    align-items: flex-end;
}

.dust-slider-btn-container {
    display: flex;
    align-items: center;
    margin: 7px 0px 8px 10px;
}

.slider-dust-index-img-section img {

    width: 564px;
    margin-bottom: 14px;
}

.slider-dust-index-img {
    display: none;
}

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

.slider-dust-index-img-02.on{
    display: block;
}
.dust-slider-btn {
/*    color: white;
    background: #8faadc;
    border-radius: 14px;
    border: none;*/
}

.dust-slider-btn:hover {
/*    background: #8898b7;*/
}

.next-date-btn.off{
 /*   background: #b5b5b5;
    color: #dfdfdf;*/
}

.next-date-btn.off:hover {
    cursor: not-allowed;
}


.dust-date {
    margin: 0px 7px 0px 7px;
}

.play-container {
    display: flex;
    align-items: center;
    margin-top: 11px;
}
.slider-btn {
    display: flex;
    margin: 0px 13px 0 10px;

}
.slider-bar {
    flex-grow: 1;
    margin-right: 20px;
}

.play-btn {
    border-radius: 6px;
    color: white;
    background: black;
    border: 2px solid white;
    width: 1rem;
    aspect-ratio: 1 / 1;
    display: block;
}

.paused {
    display: none;
    line-height: 1;
}

.slider-time {
    display: flex;
    width: 94%;
    justify-content: space-between;
    margin: 0 28px 0 32px;
}

.legend-img {
    display: none;
   /* width: 500px;*/
}

.prev-date-btn {
    transform: rotate(90deg);
}

.next-date-btn {
    transform: rotate(270deg);

}


/*미세먼지 범례표*/
.dust-index-img-section {
    position: absolute;
   /* top: 18px;*/
    top: 9px;
   /* left: 10px;*/
  /*  width: 200px;*/
    background-color: white;
    border-radius: 8px;
    display: none;
}

/**
ul 태그가 show이면
display는 block / width는 200px

legend-toggle이 on이면
ul 태그의 width 460px
 */

.dust-index-img-section.on{
  /*  display: block;*/
    display: flex;
}

.dust-index-img-section.show{
   /* width: 470px;*/
    width: 100%;
}

.dust-index-img-section li{
  /*  display: flex;
    align-items: center;*/
/*    width: 100%;*/
    /*padding: 5px;*/
}

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

}

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

.legend-toggle-icon{
  /*  width: auto;
    height: auto;
    margin: 0 5px 0 0;*/
}

.legend-img {
    width: 100%;
}

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

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

.dust-index-img-03.on{
    display: block;
}

.dust-index-img-05.on{
    display: block;
    width: 4.2rem;
    top: 2px;
}

.dust-index-img-06.on{
    display: block;
    width: 4.2rem;
    top: 2px;
}

.dust-index-img-07.on{
    display: block;
}

.aod-dust-index-img.on {
    /*display: inline-block;*/
    display: block;
}

.dust-info-img {
    top: 3px;
}

.dust-info-img-01.on {
    display: block;
}

.dust-info-img-02.on {
    display: block;
}

.dust-info-img-03.on {
    display: block;
}

.dust-info-img-07.on {
    display: block;
    top: 1px;
}



.aod-legend{
    font-size: 0.53333rem;
    display: none;
    /*width: 15%;*/
    width: 9%;
    text-align: center;
}

.aod-legend.on{
    display: block;
}

.aod-legend-min{

}
.aod-legend-max{
    padding: 0;
}
.aod-dust-index-img{
    /*width: 70% !important;*/
}

.aod-date {
    width: 100%;
    text-align: left;
    font-size: 0.45rem;
}


/*
.dust-index-img-section {
position: absolute;
right: 0;
bottom: 0;
}

.dust-index-img-section img {
width: 500px;
}

.dust-legend-img {
}

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

.dust-index-img-02.on{
display: block;
}
*/

/* aod 범례 */
/*
.aod-dust-index-img-section {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.aod-dust-index-img.on {
    display: inline-block;
}
*/

/*시민제보 미세먼지 범례*/
.tipoff-dust-index-img-section {
    position: absolute;
    z-index: 9999;
    width: 30%;
    top:100px;
}
.tipoff-dust-index-img{
    display: none;
}

.tipoff-dust-index-img.on {
    display: block;
    width: 100%;
    padding: 10px;
}

/*
.tipoff-dust-index-img-section {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.tipoff-dust-index-img {
    display: none;
    width: 500px;
}

.tipoff-dust-index-img.on {
    display: inline-block;
}
*/


/* util-section */
.util-section {
    width: 100%;
    position: absolute;
    right: 8px;
    bottom: 4px;
    z-index: 999;
    transform: translate(0, 0);
    transition: .5s;
}

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

.util-issue-section {
    display: flex;
    justify-content: end;
    font-size: 0.53333rem;
    position: absolute;
    bottom: 40px;
    right: 0;
    z-index: 9999;
}

/*new 범례 css*/
.legend-right-wrap {
    display: flex;
    align-items: center;
}

.legend-margin {
    margin: 0.25rem 0;
}

.aod-legend-wrap {
    display: flex;
    justify-content: flex-end;
}
 .aod-dust-index-img-widtn {
     width: 14.6rem;
 }
/* util-section 끝 */

/*미세먼지 경보*/
.dust-issue {
    width: 100px;
    border: 1px solid #c4707d;
    border-radius: 6px;
    background: #c4707d;
    display: none;
     position: absolute;
     bottom: 0px;
}

.dust-issue.show {
display: block;
}

.dust-issue img {
width: 64px;
height: 69px;
bottom: 8px;
}

.dust-issue-text {
text-align: center;
color: white;
}

.issue-dust-type {
top: 3px;
}

.issue-admdst-name {
bottom: 8px;
}

/*미세먼지 지수 예보 구별 css*/
.dust-board-table {
    display: flex;
}

.dust-now-table {
    width: 340px;
}
.dust-forecast-table {
    width: 169.5px;
}

.dot-line {
    height: 153px;
    border-left : thick dotted #595959;
    margin: 0 15px 0 15px;
}
/*대시보드 메뉴 커버*/

/*예보 팝업*/
.forecast-container {
    display: flex;
}

.forecast-info {
    margin: 3px 0 0 44px;
}

.forecast-content {
    position: absolute;
    width: 200px;
    height: 100px;
    top: -112px;
    right: -11px;
    z-index: 9999;
    background: #FFFFFF;
    border-radius: 7px;
    box-shadow: 5px 5px 10px;
    padding: 12px;
    font-size: 14px;
    display: none;
}

.forecast-content:after {
    position: absolute;
    right: 10px;
    top: 100px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 16px solid #FFFFFF;
    content:"";
}

.forecast-content.on {
    display: block;
}
/* 주임님 코드 끝 */

/* 시민제보 팝업 */
.tipoff-popup {
    font-size: 0.53333rem;
    padding : 4px 12px;
    border-radius: 8px;
    display: none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

.tipoff-popup-microdust{
    background: #2c3b7e;
}

.tipoff-popup-tipoff{
    background-image: url(../../images/target02/img_tipoff_popup.webp);
    width: 234px;
    height: 335px;
}

.tipoff-popup-title {
    text-align :left;
    font-size:16px;
    color:#FFFFFF;
}

.tipoff-popup-content {
    display:flex;
    flex-direction: column;
    background: #ffffff;
    margin: 4px 0;
    padding : 8px 12px;
    border-radius: 4px;
}

.tipoff-popup-date {
    color: #59595B;
}

.tipoff-popup-microdust-good{
    color: #004bb7;
}

.tipoff-popup-microdust-moderate{
    color: #46b200;
}

.tipoff-popup-microdust-unhealthy{
    color: #f7aa00;
}

.tipoff-popup-microdust-veryunhealthy{
    color: #ff3127;
}

.tipoff-popup-index{
    right: 21%;
    position: fixed;
    font-size: 17px;
    font-weight: bold;
}

.tipoff-popup-index-good{
    top:15%;
}

.tipoff-popup-index-moderate{
    top:34%;
}

.tipoff-popup-index-unhealthy{
    top:53%;
}

.tipoff-popup-index-veryunhealthy{
    top:72%;
}

.tipoff-popup-text{
    color: #fff;
    font-size: 12px;
}






/* 시민제보 팝업 끝 */

/* 갈맷길 팝업 */
#gm-popup{
    background: #4573c4;
    padding : 4px 12px;
    border-radius: 8px;
    display: none;
    position: absolute;
    left: 15px;
    width: 120px;
    font-size: 0.53333rem;
}

.gm-popup-title {
    color: #ffffff;
}

.gm-popup-content {
    color: white;
}
/* 갈맷길 팝업 끝 */

.dust-chart-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 20px;
}

.dust-chart-header > img {
    height: 20px;
    width: 219px;
    margin-right: 5px;
    margin-bottom: 7px;
}

.galmaetgil-overlay {
    height: auto;
    width: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    display: none;
    pointer-events: none;
}

.input-slider-date{
    background: #2f5597;
    border: 0px;
    color: white;
    margin-left: 5px;
    caret-color: transparent;
    outline: none;
}

.port-dash-page1.show,
.port-dash-page2.show,
.area-dash-page1.show,
.galmaet-dash-page1.show,
.dash-cover.show{
    display: flex;
}

.port-dash-page1.hide,
.port-dash-page2.hide,
.area-dash-page1.hide,
.galmaet-dash-page1.hide,
.dash-cover.hide{
    display: none;
}


.lpi-img-slider{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.lpi-img-item{
    position: absolute;
/*    width: 95%;
    height: 95%;*/
    width: 90%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border-radius: 25px;
    /*left: 9px;*/
    left: 4px;
    top: 15px;
}
.lpi-img-item:nth-child(3) {
    left: 12px;
    top: 5px;

}
.lpi-img-item:nth-child(2) {
    left: 19px;
    top: 0px;
}
.lpi-img-item:nth-child(1) {

    left: 24px;
    top: -5px;
}
/*.lpi-img-item:nth-child(3) {
    left: 4px;
    top: 15px;
}
.lpi-img-item:nth-child(2) {
    left: 12px;
    top: 5px;
}
.lpi-img-item:nth-child(1) {
    left: 24px;
    top: -5px;
}*/

.pm-warning{
    background-color: rgba(255, 108, 108, 0.8);
    border : 1px solid #ff0000;
}

.pm-advisory{
    background-color: rgba(255, 172, 110, 0.8);
    border : 1px solid #ff3000;
}

/*큐레이션*/

.curation-wrap {
    border: 1px solid lightgray;
    border-radius: 8px;
}

.curation-btn-div {
    display: flex;
    align-items: center;
    font-size: 0.509rem;
    margin-bottom: 7px;
    justify-content: space-evenly;
}

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

.curation-click-button {
    width: 100px;
    height: 60px;
    background-color: blueviolet;
}

.curation-btn {
    border: 1px solid #2f5597;
    background: #2f5597;
    color: #FFFFFF;
    border-radius: 14px;
    width: 72px;
    height: 25px;
}

/* curation-popupWrap */
.curation-popupWrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.curation-popupWrap .curation-popup {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px 30px;
    box-sizing: border-box;
    width: 500px;
    /* height: 677px; */
    border-radius: 15px;
}

/* 스크롤 스타일 */
.scrollStyle::-webkit-scrollbar {
    width: 6px;
    border-radius: 4px;
}

.scrollStyle::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 4px;
}

.scroll-box {
    height: 320px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 8px;
}

.curation-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}
.curation-top>p {
    font-size: 23px;
    font-weight: bold;
}
.curation-pop2-close>a {
    display: block
}
.curation-pop2-close>a>img {
    width: 20px;
}
.curation-content>p {
    font-size: 16px;
    padding: 12px 0;
}
.curation-table {
    margin-bottom: 10px;
}
.curation-table>table {
    width: 100%;

}
.curation-table>table tr th,
.curation-table>table tr td {
    /*   border: 1px solid #ccc;*/
    height: 50px;
}
.curation-table>table tr th {
    width: 20%;
    background-color: #F7F7F7;
    font-weight: 500;
}
.curation-table>table tr td {
    /* width: 80%;*/
    background-color: #fff;
    padding: 0 10px;
}
.curation-select-type {
    width: 100%;
    border: none;
    font-size: 15px;
    color: #777;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../../images/target02/curation/curation_down_btn.webp) no-repeat 98% 50% #fff;
    padding: 0 10px;
}


curation-table table,
curation-table tr,
curation-table th,
curation-table td {
    border-collapse: collapse;
}
.scroll-box>p {
    padding: 19px 0 12px 0;
    font-size: 17px;
    font-weight: bold;
}

.scroll-left {
    right: 6px;
}

.scroll-left,
.scroll-right {
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-left>img,
.scroll-right>img {
    width: 7px;
}
.scroll-right>img {
    transform: rotate(180deg);
}
.age-choice-wrap::-webkit-scrollbar {
    display: none;
}
.age-choice-wrap>li {
    width: 31%;
    height: 100%;
    text-align: center;
    margin-right: 15px;
    flex-shrink: 0;
    text-align: center;
}
.age-choice-wrap>li:nth-last-child(1){
    margin-right: 0;
}
.age-choice-wrap>li>a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.age-choice-wrap>li>p {
    font-weight: bold;
    font-size: 15px;
    padding-top: 15px;
}

.scroll-box>p {
    padding: 19px 0 12px 0;
    font-size: 17px;
    font-weight: bold;
}



.curation-choice-img>ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.curation-choice-img>ul>li {
    width: 31%;
    text-align: center;
}
.curation-choice-img>ul>li>p {
    font-weight: bold;
    padding: 10px 0;
    font-size: 15px;
}
.curation-choice-img>ul>li>a {
    text-align: center;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.curation-btn-box {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.curation-btn-cancel,
.curation-btn-ok {
    width: 48%;
    line-height: 50px;
}
.curation-btn-cancel>a,
.curation-btn-ok>a {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}
.curation-btn-cancel>a {
    color: #2F5597;
}
.curation-btn-ok>a {
    color: #fff;
}
.curation-btn-cancel {
    border-radius: 5px;
    border: 1px solid #2F5597;
}
.curation-btn-ok {
    border-radius: 5px;
    background-color: #2F5597;
}
.type-padding-none {
    padding: 0 !important;
    display: flex;
    align-items: center;
    border: none;
}

.curation-choice-img img {
    background-size: cover;
    width: 100%;
    vertical-align:middle;
}

/*.curation-theme {
    text-align: left;
}*/

.curation-select-type:focus {
    outline: none;
}

.curation-choice-img li {
    display: inline-block;
    cursor: pointer;
    /*    transition: border 0.3s ease-in-out;*/
}

.age-choice-wrap li.select-age,
.curation-choice-img li.select-companion,
.curation-choice-img li.select-interest01,
.curation-choice-img li.select-interest02
{
    border: 3px solid #2196f3;
    border-radius: 8px;
}


/*큐레이션 연령*/
.curation-content-text-box {
    margin: 7px 0 5px 0;
    width: 100%;
    box-sizing: border-box;
}
.curation-content-text {
    display: flex;
    justify-content: space-between;
}

.curation-content-text>p:nth-child(1) {
    font-weight: bold;
    font-size: 17px;
    color: #222;
}
.curation-content-text>p:nth-child(2) {
    font-size: 14px;
    color: #999;
}
.age-choice-wrap {
    width: 100%;
    margin-top: 12px;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    cursor: pointer;
}
.age-choice-wrap li a img.on,
.curation-choice-img1 ul li a img.on,
.curation-choice-img2 ul li a img.on  {
    overflow: hidden;
    box-sizing: border-box;
    border: 3px solid #2196F3;
    border-radius: 7px;
}

.scroll-btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}


.age-choice-wrap img {
    background-size: cover;
    width: 100%;
    vertical-align: middle;
}

/*큐레이션 끝*/

/* 알림 팝업 시작 */
.alert-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;
}

.alert-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;
}

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

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

.hidden {
    display: none;
}

.hide {
    display: none;
}
/* 알림 팝업 끝 */


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

@media all and (min-width: 1135px) and (max-width: 1400px) {
    .side-theme-section.on {
        top: 210px;
    }
}


/* 1300px 이하는 대시보드 크기제한 해제 */
@media all  and (max-width: 1300px) {

    :root {
        --side-theme-width: 150px;
 /*       --side-layer-width : 120px;*/
    }

    .side-section {
        min-width: auto;
    }

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

    .dust-slider-section {
        width: 80vw;
        height: 10vh;
    }

/*    !*
    .legend-img,
    .dust-index-img-section img{
        width: 37vw;
    }
    *!*/

/*    .dust-index-img-section.show{
        !*width: 37vw;*!
       !* width: 53vw;*!
    }*/

    .legend-toggle-icon{
        width: 2vw;
    }
/*!*
    .legend-img{
        width: 37vw;
    }
*!
    !*
    .dust-index-img-section img{
        width: 37vw;
    }
     *!*/

    .play-btn {
        width: 1.28rem;
    }

    .play-container {
        margin-top: 0px;
    }


  /*  !*new css*!*/
    .theme-menu {
       /* background: red;*/
    }

    .side-theme-section {
        top: 120px;
        right: 40px;
    }

}



/*!*모바일 세로*!*/
@media all and (orientation: portrait),all and (max-width: 1135px){
    .theme-menu {
        /*background-color: #ffff7b;*/
    }

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

        --side-section-height : 44dvh;

        --side-theme-width: 150px;

    }

    .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-btn {
        transform: rotate(90deg);
        top: -38px;
        right: 47.5%;
        z-index: -1;
    }

    .side-theme-section {
        top: 69px;
    }

    .side-theme-section.on {
        transform: translate(0, 0);
        transform: none;
      /*  right: 43px;
        top: 134px;*/
        top: 69px;
    }

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

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

    .port-cover {
        background-image: url(../../images/target02/img_cover_port_mobile.webp);
    }
    .area-cover {
        background-image: url(../../images/target02/img_cover_area_mobile.webp);
    }
    .galmaet-cover {
        background-image: url(../../images/target02/img_cover_galmaetgil_mobile.webp);
    }

    .header-box {
        flex: 1 1 5%;
    }
    .hide {
        display: none;
    }
    .page-btn{
        position : fixed;
    }
    .page-btn.prev {

        left: -1%;
        top: 45%;
    }

    .page-btn.next {

        right: -1%;
        top: 45%;
    }

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

    .info-content-title {
        font-size: 0.4rem;
    }
    .info-section{
        flex: 0 1 auto;
    }

    .dash-cover {
        border-bottom-left-radius: 0px;
        padding: 5% 0;
    }
    .dust-issue {
        width: 80px;
    }
    .dust-slider-section {
        transform: translate(-50%, -16%);
    }

    .dust-index-img-section.show{

      /*  width: 48vw;*/
    }

/*    !* 미세먼지 변화에만 적용되도록 *!*/
    .dust-index-img-section.silder {
        bottom: 108px;
    }

    .util-issue-section.silder{
        bottom: 148px;
    }
    .tipoff-dust-index-img.on{
        padding: 0;
    }

    .lpi-img-item{
        width: 91%;
    }

    /*new css*/

}

@media (max-width: 768px) {
/*    !*큐레이션*!*/
    .curation-popup {
        width: 90% !important;
        padding: 20px 15px !important;
    }
    .curation-top {
        padding-bottom: 15px;
    }

}


@media all and (max-width: 800px) {
    .side-theme-section {
        left: 189px;
        top: 190px;
    }
    .side-theme-section.on {
        left: 189px;
        top: 190px;
    }
    .side-layer-group-title {
        font-size: 12px;
    }
}




@media all and (orientation: portrait) and (max-width: 540px) {

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

    .theme-menu li {
        margin: 0;
    }

    .theme-menu-section {
        right: 10px;
    }

    .side-theme-item > img {
        width: 30px;
    }

    .side-layer-item > img {
        width: 30px;
    }

    .lpi-section {
        height: calc(var(--side-section-height) - 50px);
    }



    .monit-item li {
        width: 60px;
        height: 20px;
    }

    .datepicker-container input[type="text"] {
        width: 100px;
    }

    .slider-time{
        width: 84%;
    }

   /* !*큐레이션*!*/
    .curation-top>p {
        font-size: 19px;
    }
    .curation-choice-img>ul>li {
        width: 47%;
    }
    .scroll-box {
        height: 30vh;
    }
    .curation-content-text-box>p {
        font-size: 17px;

    }
}

@media (max-width: 600px) {
     .side-theme-section {
         top: 167px;
     }

    .side-theme-section.on {
        top: 167px;
    }

}



@media (max-width: 480px) {
    /*큐레이션*/
    .scroll-btn-box {
        display: none !important;
    }
    .curation-content-text-box {
        position: relative;
    }
    .curation-content-text-box::before {
        position: absolute;
        content: '';
        width: 50px;
        height: 160px;
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, transparent 100%);
        right: 0;
        bottom: 0;
        z-index: 99;
    }



}