@charset "utf-8";

@font-face {
    font-family: 'KOHIBaeum';
    src: url("../../fonts/KOHIBaeum.woff2") format("woff2");
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: url('../../fonts/Pretendard-Thin.woff2') format('woff2'),
    url('../../fonts/Pretendard-Thin.woff') format('woff'),
    url('../../fonts/Pretendard-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: url('../../fonts/Pretendard-ExtraLight.woff2') format('woff2'),
    url('../../fonts/Pretendard-ExtraLight.woff') format('woff'),
    url('../../fonts/Pretendard-ExtraLight.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    src: url('../../fonts/Pretendard-Light.woff2') format('woff2'),
    url('../../fonts/Pretendard-Light.woff') format('woff'),
    url('../../fonts/Pretendard-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/Pretendard-Regular.woff2') format('woff2'),
    url('../../fonts/Pretendard-Regular.woff') format('woff'),
    url('../../fonts/Pretendard-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url('../../fonts/Pretendard-Medium.woff2') format('woff2'),
    url('../../fonts/Pretendard-Medium.woff') format('woff'),
    url('../../fonts/Pretendard-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight: 600;
    src: url('../../fonts/Pretendard-SemiBold.woff2') format('woff2'),
    url('../../fonts/Pretendard-SemiBold.woff') format('woff'),
    url('../../fonts/Pretendard-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight: 700;
    src: url('../../fonts/Pretendard-Bold.woff2') format('woff2'),
    url('../../fonts/Pretendard-Bold.woff') format('woff'),
    url('../../fonts/Pretendard-Bold.otf') format('opentype');
}


@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight: 800;
    src: url('../../fonts/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../../fonts/Pretendard-ExtraBold.woff') format('woff'),
    url('../../fonts/Pretendard-ExtraBold.otf') format('opentype');
}


@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight: 900;
    src: url('../../fonts/Pretendard-Black.woff2') format('woff2'),
    url('../../fonts/Pretendard-Black.woff') format('woff'),
    url('../../fonts/Pretendard-Black.otf') format('opentype');
}


* {
    font-family: 'Pretendard';
}

/*img{
    background-size: cover;
    width: 100%;
    vertical-align:middle;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    backface-visibility: hidden;
}*/

ul,
ol,
li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}


a {
    color: #121212;
    text-decoration: none;
    outline: none;
    letter-spacing: -0.6px;
}

p {
    margin: 0 ;
    color: #111;
    font-size: 16px;
}

body,header,footer,nav,button {
    margin: 0;
    padding: 0;
    border: 0;
}
/*
html,*/
html {
    width: 100%;
   /* overflow-x: hidden;*/
 /*   height: auto;
    overflow-y: auto;*/
   /* overflow-y: auto;*/
}

html::-webkit-scrollbar {
    display: none;
}
body {
    width: 100%;
    overflow-x: hidden;
    font-family: 'Pretendard', sans-serif;
    overflow-y: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-use-select: none;
    user-select: none;
}


body {
    margin: 0;
    padding: 0;
}

button{
    outline:none;
    border: 0;
    background: none;
}
input[type=button]{
    cursor: pointer;
    outline: none;
    background-color: #fff;
}

body h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 100%;
    margin: 0;
}



.wrap {
    width: 100%;
    overflow-y: scroll;
    height: 100%;
}

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


/* 공통슬릭 & 슬릭헤더 */
.hidden {
    display: none;
}


.slick-slide
{
    display: none;
    float: left;
    height: auto;
    min-height: 1px;
}

.slid-header {
    position: relative;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    color: #111;
    padding: 20px;

}

.sd-header {
    display: flex;
    justify-content: center;
}

.sd-header>li {
    padding: 0 15px;
}

.sd-header>li>a {
    color: #ccc;
}

.content {
    font-size: 1.2rem;
    font-weight: 500;
    transition: font-size 0.3s ease;
}

/*.content.active {
    font-size: 1.2rem;
    font-weight: bold;
}*/

.content.active>a {
    color: #121212;
    font-size: 1.2rem;
    font-weight: bold;
}


.slider {
    width: 100%;
}

.sec01-sd {
    background-color: #f4f4f4;
}

.sec01-sd>.slick-next,
.sec01-sd>.slick-prev {
    display: none !important;
}

.button-box {
    display: flex;
    position: absolute;
    top: 10px;
    right: 50px;
    align-items: center;
}

button:hover {
    cursor: pointer;
}

/* 분버튼 추가 */
.time-select-box {
    width: 100px;
    height: 45px;
    margin-right: 20px;
}
.time-select {
    /* text-align: center; */
    width: 100px;
    font-size: 15px;
    padding: 0 10px;
    height: 45px;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../../images/common/select_down.webp) no-repeat 90% 50% #fff;
    border: 1px solid #999;
}

.time-select-box:hover {
    cursor: pointer;
}

.expansion {
    padding-right: 20px;
}

.toggle-slider {
    cursor: pointer;
    border: none;
}

.sec01-sd>.slick-dots {
    display: none !important;
}

/* 슬릭1내용 */
.sec01,
.sec02,
.sec03 {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
    padding: 96px 45px 13px 45px;
    margin: 0 auto;
    height: auto;
}



.left {
    width: 71.2%;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100%;/*일단 추가함*/
}

.left-title {
    padding: 27px 27px 15px 27px;
    display: flex;
    /*align-items: center;*/
}

.left-title h2,
.right-title h2,
.m-dust02-view-title h2 {
    font-weight: bold;
    font-size: 1.3rem;
}

.more-view {
    font-size: 1.1rem;
    padding: 3px 0 0 15px;
}

.map01 {
    height: 641px;
    background-image: url(../../images/common/sec01.webp);
    /*background-position: 50% 2.105%;*/
    background-position: 50% 3.105%;
    background-repeat: no-repeat;
}

.map02 {
    height: 641px;
   /* height: 637px;*/
    background-image: url(../../images/common/sec02.webp);
    background-position: -11px -10px;
    background-repeat: no-repeat;
}

.pm25-map {
    background-image: url(../../images/common/map02_pm25.webp);
    background-position: -1px 0px;
}

.map01,
.map02 {
    box-sizing: border-box;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    margin: 0 27px 20px 27px;
    background-color: #dcf7ff;
}


.alert {
    width: 120px;
    height: 168px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    visibility: hidden;
}

.alert .slick-dots {
    display: none;
}

.alert>span {
    font-size: 1.1rem;
    display: block;
    text-align: center;
    background-color: #f42c2c;
    padding: 8px;
    color: #fff;
    font-weight: bold;
}

.alert-slide01>img,
.alert-slide02>img,
.alert-slide03>img,
.alert-slide-page>img{
    width: 30px;
    padding: 18px;
    display: block !important;
    margin: 0 auto;

}

/* .alert-slide1 {
   width: 120px;
} */

.alert-img {
    margin: 0 auto;
    width: 30px;
   /* height: 42px;*/
    height: 35px;
   /* padding: 18px;*/
    padding: 18px 18px 14px 18px;
   background-image: url(../../images/common/sec01.webp);
    background-position: 84.7% 73.5%;
    background-repeat: no-repeat;
}

.alert-slide01>p,
.alert-slide02>p,
.alert-slide03>p,
.alert-slide-page>p {
    font-weight: 600;
    text-align: center;
}

/* 어디론가 날라간 next 이거 해주셈*/
.alert-slide>.slick-next {
    right: 0;
}

.alert-slide>.slick-next {
    width: 20px;
    /*height: 20px;*/
    height: 36px;
    background-image: url(../../images/common/sec01.webp);
 /*   background-position: 99.307% 66.638%;*/
    background-position: 99.307% 67.5%;
    background-repeat: no-repeat;
    margin-right: 10px;
}



/* 화살표 사라지는거방지 focus hover*/
.alert-slide>.slick-next:focus,
.alert-slide>.slick-next:hover {
    width: 20px;
    /*height: 20px;*/
    height: 36px;
   background-image: url(../../images/common/sec01.webp);
  /*  background-position: 99.307% 66.638%;*/
    background-position: 99.307% 67.5%;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.alert-slide>.slick-prev {
    width: 20px;
    /*height: 20px;*/
    height: 36px;
    background-image: url(../../images/common/sec01.webp);
    /* background-position: 99.307% 63.481%;*/
    background-position: 99.307% 64.3%;
    background-repeat: no-repeat;
    left: 0;
    z-index: 9999;
}

.alert-slide>.slick-prev:focus,
.alert-slide>.slick-prev:hover {
   background-image: url(../../images/common/sec01.webp);
    /* background-position: 99.307% 63.481%;*/
    background-position: 99.307% 64.3%;
    background-repeat: no-repeat;
}

/*alert new css*/
.alert-date {
    font-size: 11px;
    margin-top: 3px;
    color: gray;
}

.alert.nonVisible {  /*데이터 없을때 영역 잡으면서 숨기기*/
    visibility: hidden
}

.slick-next:before {
    conetnt:' ' !important;
}
.slick-prev:before {
    conetnt:' ' !important;
}


.cctv-satellite {}

.cctv-satellite>li {
    width: 355px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.cctv-satellite>li:nth-child(2) {
    margin: 3% 0;
}

.cctv-satellite>li>p {
    font-size: 1.13rem;
    font-weight: bold;
    padding-bottom: 19px;
    text-align: start;
}

.cctv img {
    height: 123px;
    object-fit: cover;
    width: 100%;
}

.satellite img {
    height: 123px;
    object-fit: cover;
}


.cctv,
.satellite {
    background-color: #fff;
    width: 62%;
    height: 115px;
    overflow: hidden;
    position: relative;
}

.in-debris>p,
.out-debris>p,
.disaster-debris>p {
    z-index: 99;
    padding: 10px 0 0 10px;
    position: absolute;
    color: black;
    text-shadow: -1px -1px 0 #FFF,
    2px 0px 0 #FFF, -1px 1px 0 #FFF,
    0px -1px 0 #FFF, 0px 1px 0 #FFF,
    1px -1px 0 #FFF, 1px 0px 0 #FFF,
    1px 1px 0 #FFF;
}

/* .cctv>div>img,
.satellite>div>img {
   object-fit: cover;
} */

.in-debris,
.out-debris,
.disaster-debris {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.cctv>.slick-prev,
.cctv>.slick-next,
.satellite>.slick-prev,
.satellite>.slick-next {
    display: none !important;
}

.cctv>.slick-dots,
.satellite>.slick-dots {
/*    bottom: 2px;*/
    bottom: 8px;
    transform: translateX(110%);
  /*  left: 46%;*/
    left: -77%;
}

.cctv>.slick-dots li.slick-active,
.satellite>.slick-dots li.slick-active {
    background-color: #0052F4;
    display: none;/*일단추가*/
}

.cctv>.slick-dots li,
.satellite>.slick-dots li {
    margin: 0 2px;
}


.in-debris-slider .slick-dots,
.out-debris-slider .slick-dots {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.in-debris-slider .slick-dots li,
.out-debris-slider .slick-dots li {
    border: none;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin: 0 2px;

}
.in-debris-slider .slick-dots li button,
.out-debris-slider .slick-dots li button {
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0; /* 텍스트 숨기기 */
}

.in-debris-slider .slick-dots li.slick-active,
.out-debris-slider .slick-dots li.slick-active {
    display: inline-block;
    background-color: #333;
    width: 12px; /* 활성화 시 더 큰 크기 */
    height: 6px;
    border-radius: 3px;
}

.in-debris-cctv-name,
.out-debris-cctv-name {
    z-index: 99;
    padding: 30px 0 0 10px !important;
    position: absolute;
    color: black;
    font-size: 11px;
    text-shadow: -1px -1px 0 #FFF,
    2px 0px 0 #FFF, -1px 1px 0 #FFF,
    0px -1px 0 #FFF, 0px 1px 0 #FFF,
    1px -1px 0 #FFF, 1px 0px 0 #FFF,
    1px 1px 0 #FFF;
}

.cctv-information,
.satellite-information {
    width: 35%;

}

.cctv-information-top,
.satellite-information-top {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efefef;
    border-radius: 5px;
    margin-bottom: 4%;
}

.cctv-information-bottom {
    background-color: #fdeded;
    border-radius: 5px;
}

.cctv-information-bottom>p,
.satellite-information-bottom>p {
    text-align: center;
}

.satellite-information-bottom {
    background-color: #e6f0fd;
    border-radius: 5px;
}

.cctv-information-top>p {
    color: #666;
    font-size: 1.13rem;
    padding-right: 10px;
}

.satellite-information-top>p {
    padding-right: 8px;
}

.cctv-information-top,
.satellite-information-top,
.cctv-information-bottom,
.satellite-information-bottom {
    padding: 8px;
}

.cctv-information-top>div,
.satellite-information-top>div,
.cctv-information-bottom>div,
.satellite-information-bottom>div {
    font-size: 25px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cctv-information-top>div>p {
    font-size: 16px;
}

.right {
    width: 27.9%;
}

.right01-view,
.right02-view,
.right03-view {
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.right02-view {
    margin: 3% 0;
}

.right03-view {
    box-sizing: border-box;
}

.right-title,
.m-dust02-view-title {
    /*padding: 25px 25px 15px 25px;*/
    padding: 25px 25px 25px 25px;
    display: flex;
    justify-content: space-between;
}

/*.dust-right-title {
    padding: 20px 25px 15px 25px;
}*/


.day {
/*    padding-top: 10px;*/
}

.day a {
    font-size: 15px;
    color: #777;
    font-weight: 400;
}

.current {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.current li {
    width: 33%;
}

.activity,
.area,
.collection {
    display: flex;
    justify-content: center;
}

.activity>div {
    color: #e52c2c;
    display: flex;
    font-size: 35px;
    font-weight: 900;
    align-items: center;
}

.area>div {
    color: #e52c2c;
    display: flex;
    font-size: 35px;
    font-weight: 900;
    align-items: center;
}

.collection>div {
    color: #2c3b7e;
    display: flex;
    font-size: 35px;
    font-weight: 900;
    align-items: center;
}

.current li:nth-child(2) {
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

.current>li>p {
    font-weight: 600;
    padding-top: 5px;
    text-align: center;
}

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

.statistics>div {
    width: 44%;
}

.accumulated-project {
    position: relative;
}

.accumulated-project::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 182px;
    background-color: #e2e2e2;
    left: -13.5%;

}

.statistics>div>div {
  /*  height: 152px;*/
    height: 144px;
    width: 100%;
}

/*그래프*/
.lp-graph {
    width: 100%;
    height: 200px;
}


.cumulative-membership>p,
.accumulated-project>p {
    font-weight: 600;
    padding-top: 15px;
    text-align: center;
}


.lpj-criterion {
    width: 100%;
/*    display: flex;
    justify-content: space-between;*/
    padding: 0 27px 20px 27px;
    box-sizing: border-box;
    text-align: start;
}

/*.lpj-criterion>div {
    width: 47%;
}*/
.lpj-criterion>.slick-next,
.lpj-criterion>.slick-prev {
    display: none !important;
}

.lpj-criterion .slick-dots {
    bottom: 5px;
}

.lpj-criterion .slick-dots li.slick-active {
    background-color: #333;
}

.lpj-criterion>div {
    width: 100%;
}

.purification-criteria-title,
.collection-criteria-title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.purification-criteria-title>p,
.collection-criteria-title>p {
    font-weight: 700;
}

.lpj-more {
   background-image: url(../../images/common/sec01.webp);
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    margin-top: 3px;
    background-position: 82.847% 78.638%;
}

.lpj-more>a {
    display: block;
    width: 13px;
    height: 13px;
}

.lpj-list {
    border-top: 1px solid #555;
}

.lpj-list>li {
    display: flex;
    justify-content: space-between;
    padding: 15px 7px;
    border-top: 1px solid #ccc;
}

.lpj-list>li:first-child {
    border-top: 0;
}

.lpj-list>li:last-child {
    border-bottom: 1px solid #ccc;
}

.lpj-list>li>span {
    color: #444;
}

.lpj-list>li>p {
  /*  width: 80%;*/
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* 슬릭2내용 */
.dust-box {
    display: flex;
    justify-content: space-between;
    /*padding-bottom: 20px;*/
}

.left-top {
    display: flex;
    justify-content: space-between;
}

.dust02-btn {
    display: flex;
  /*  padding: 12px 27px 15px 27px;*/
    padding: 11.5px 27px 11.5px 27px;
}

.dust-button {
    margin-left: 12px;
    padding: 0 20px;
    border: 1px solid #ccc;
    cursor: pointer;
    color: #fff;
    border-radius: 25px;
    font-family: 'Pretendard'
}

.blue-btn {
    background-color: #2c3b7e;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    line-height: 43px;
    font-family: 'Pretendard'
}

.gray-btn {
    background-color: #f0f0f0;
    color: #9e9e9e;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    line-height: 43px;
}

/* 지도2 area */
/* 공통area zone */
.area-title {
    font-weight: 700;
    text-align: center;
    padding: 3px;
}

.area-content {
    display: flex;
    justify-content: space-between;
    padding: 0 5px 5px 5px;
}

.area-content>li {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

.area-content-name {
    text-align: center;
    font-weight: 500;
}

.area-content>li>div {
    margin-top: 5px;
    text-align: center;
    border-radius: 5px;
    padding: 3px;
    font-weight: 500;
}

.area-content>li {
    width: 42px;
    margin-right: 5px;
}

.area-content>li:last-child {
    margin-right: 0;
}

.circle {
    width: 15px;
    height: 15px;
    border-radius: 15px;
}



/* zone */

/* 지역 포지션 */
.map02 {
    position: relative;
}

.area1 {
    position: absolute;
   /* left: 530px;*/
    left: 628px;
    top: 29px;
}

.area2 {
    position: absolute;
    left: 390px;
    top: 50px;
}

.area3 {
    position: absolute;
    left: 250px;
  /*  left: 313px;*/
    top: 92px;
}

.area4 {
    position: absolute;
    left: 293px;
    top: 200px;
}

.area5 {
    position: absolute;
    left: 90px;
    top: 269px;
}

.area6 {
    position: absolute;
    left: 17px;
    top: 376px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area7 {
    position: absolute;
    left: 189px;
    top: 500px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area8 {
    position: absolute;
    left: 333px;
    top: 483px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area9 {
    position: absolute;
    left: 428px;
    top: 520px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area10 {
    position: absolute;
    left: 509px;
    top: 492px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area11 {
    position: absolute;
    left: 650px;
    top: 513px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area12 {
    position: absolute;
    left: 681px;
    top: 403px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area13 {
    position: absolute;
    /*left: 600px;*/
    left: 826px;
    top: 344px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area14 {
    position: absolute;
/*    left: 681px;
    top: 294px;*/
    left: 529px;
    top: 50px;
}

.area15 {
    position: absolute;
    left: 763px;
    top: 239px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

.area16 {
    position: absolute;
    left: 763px;
    top: 134px;
    border: 4px solid #2343ed;
    border-radius: 12px;
}

/* 지역 포지션 */

/* 동그라미 포지션, 선::before / ::after */
.circle1 {
    position: absolute;
/*    top: 170px;
    left: 30px;*/
    top: 177px;
    left: -89px;
}

.circle1::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    width: 1px;
/*    left: 7px;
    top: -38px;
    height: 77px;*/
    left: 145px;
    top: -39px;
    height: 89px;
    background: #000;
}
.circle1::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    transform: translateY(-50%);
    width: 131px;
    height: 1px;
    background: #000;
}

.circle2 {
    position: absolute;
    top: 223px;
    right: -17px;
}

.circle2::after {
    content: '';
    position: absolute;
    left: 7px;
    top: -74px;
    transform: translateY(-50%);
    width: 1px;
    height: 147px;
    background: #000;
}

.circle2::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -147px;
    transform: translateY(-50%);
    width: 10px;
    height: 1px;
    background: #000;
}

.circle3 {
    position: absolute;
    right: -100px;
    top: 150px;
}

.circle3::after {
    content: '';
    position: absolute;
    left: 6px;
    top: -36px;
    transform: translateY(-50%);
    width: 1px;
    height: 74px;
    background: #000;
}

.circle3::before {
    content: '';
    position: absolute;
    right: 8px;
    top: -73px;
    transform: translateY(-50%);
    width: 92px;
    height: 1px;
    background: #000;
}

.circle4 {
    position: absolute;
    top: 120px;
    right: -80px;
}

.circle4::after {
    content: '';
    position: absolute;
    left: 7px;
    top: -19px;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: #000;
}

.circle4::before {
    content: '';
    position: absolute;
    right: 8px;
    top: -38px;
    transform: translateY(-50%);
    width: 72px;
    height: 1px;
    background: #000;
}

.circle5 {
    position: absolute;
    top: 57px;
    right: -170px;
}

.circle5::before {
    content: '';
    position: absolute;
    right: 15px;
    top: 7px;
    transform: translateY(-50%);
    width: 155px;
    height: 1px;
    background: #000;
}

.circle6 {
    position: absolute;
    top: 0px;
    right: -100px;
}

.circle6::before {
    content: '';
    position: absolute;
    right: 15px;
    top: 7px;
    transform: translateY(-50%);
    width: 85px;
    height: 1px;
    background: #000;
}

.circle7 {
    position: absolute;
    top: -33px;
    right: -110px;
}

.circle7::after {
    content: '';
    position: absolute;
    left: -106px;
    top: 20px;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: #000;
}

.circle7::before {
    content: '';
    position: absolute;
    right: 14px;
    top: 6px;
    transform: translateY(-50%);
    width: 107px;
    height: 1px;
    background: #000;
}

.circle8 {
    position: absolute;
    right: -76px;
    top: 0; /*일단추가함*/
}

.circle8::before {
    content: '';
    position: absolute;
    right: 14px;
    top: 6px;
    transform: translateY(-50%);
    width: 62px;
    height: 1px;
    background: #000;
}

.circle9 {
    position: absolute;
    top: -97px;
    right: 0px;
}

.circle9::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 56px;
    transform: translateY(-50%);
    width: 1px;
    height: 83px;
    background: rgb(0, 0, 0);
}

.circle10 {
    position: absolute;
    left: -20px;
    top: -85px;
}

.circle10::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 56px;
    transform: translateY(-50%);
    width: 1px;
    height: 83px;
    background: rgb(0, 0, 0);
}

.circle10::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 97px;
    transform: translateY(-50%);
    width: 14px;
    height: 1px;
    background: #000;
}

.circle11 {
    position: absolute;
    top: -45px;
    left: -126px;
}

.circle11::after {
    content: "";
    position: absolute;
    left: 143px;
    top: 26px;
    transform: translateY(-50%);
    width: 1px;
    height: 38px;
    background: rgb(0, 0, 0);
}

.circle11::before {
    content: '';
    position: absolute;
    right: -128px;
    top: 8px;
    transform: translateY(-50%);
    width: 128px;
    height: 1px;
    background: #000;
}

.circle12 {
    position: absolute;
    top: 12px;
    left: -121px;
}

.circle12::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 30px;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: rgb(0, 0, 0);
}

.circle12::before {
    content: '';
    position: absolute;
    right: -107px;
    top: 44px;
    transform: translateY(-50%);
    width: 114px;
    height: 1px;
    background: #000;
}

.circle13 {
    position: absolute;
   /* left: -35px;*/
    left: -263px;
    top: 20px;
}

.circle13::before {
    content: '';
    position: absolute;
    top: 7px;
    transform: translateY(-50%);
/*    right: -22px;
    width: 22px;*/
    right: -248px;
    width: 249px;
    height: 1px;
    background: #000;
}

.circle14 {
    position: absolute;
   /* left: -141px;
    top: 39px;*/
    left: 9px;
    top: 284px;
}

.circle14::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 7px;
    transform: translateY(-50%);
/*    width: 127px;*/
    width: 11px;
    height: 1px;
    background: #000;
}

.circle14::after{
    content: "";
    position: absolute;
    left: 24px;
    top: -92px;
    transform: translateY(-50%);
    width: 1px;
    height: 199px;
    background: rgb(0, 0, 0);
}

.circle15 {
    position: absolute;
    top: 28px;
    left: -154px;
}

.circle15::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 7px;
    transform: translateY(-50%);
    width: 140px;
    height: 1px;
    background: #000;
}

.circle16 {
    position: absolute;
    top: 46px;
    left: -66px;
}

.circle16::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 7px;
    transform: translateY(-50%);
    width: 53px;
    height: 1px;
    background: #000;
}

/* 동그라미 포지션 */


/* 맑음정도 */
.area-good {
    background-color: #2fa4f6;
}

.area-ordinary {
    background-color: #69d72f;
}

.area-bad {
    background-color: #ffda00;
}

.area-verybad {
    background-color: #fc6759;
}

.area-correction {
    background-color: #7f7f7f;
    color: #fff;
}

/* 맑음정도 */

/* 보통 경보1, 경보2 */
.warning01 {
    background-color: rgba(255, 222, 199, 0.5);
    border: 1px solid #ff6700;
    border-radius: 7px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.warning02 {
    background-color: rgba(255, 210, 210, 0.5);
    border: 1px solid #ff0000;
    border-radius: 7px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.normal {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #afafaf;
    border-radius: 7px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 보통 경보1, 경보2 */

/* 지역동그라미 */
.c-good {
    background-color: #2fa4f6;
}

.c-ordinary {
    background-color: #69d72f;
}

.c-bad {
    background-color: #ffda00;
}

.c-verybad {
    background-color: #fc6759;
}

.c-correction {
    background-color: #7f7f7f;
}

/* 지역동그라미 */

/* 항만위치, 항만수치 */
.port-location {
    position: absolute;
}

.port-location>div>img {
    width: 30px;
}

.busan-port {
    position: absolute;
    top: 415px;
    left: 193px;
    background-image: url(../../images/common/sec02.webp);
    background-position: -992px -730px;
    background-repeat: no-repeat;
    width: 50px;
    height: 80px;
}

.busansin-port {
    position: absolute;
    top: 417px;
    left: 240px;
    background-image: url(../../images/common/sec02.webp);
    background-position: -932px -730px;
    background-repeat: no-repeat;
    width: 50px;
    height: 80px;
}

.busanbook-port {
    position: absolute;
    top: 352px;
    left: 481px;
    background-image: url(../../images/common/sec02.webp);
    background-position: -1051px -729px;
    background-repeat: no-repeat;
    width: 50px;
    height: 80px;
}

.busangamman-port {
    position: absolute;
    top: 376px;
    left: 513px;
    background-image: url(../../images/common/sec02.webp);
    background-position: -813px -730px;
    background-repeat: no-repeat;
    width: 50px;
    height: 80px;
}

.port-box {
    position: absolute;
    bottom: 18px;
    right: 18px;
    display: flex;
    flex-wrap: wrap;
    width: 259px;
}

.port-box>li {
    width: 115px;
    display: flex;
    justify-content: space-between;
    margin-right: 5px;
    padding: 5px;
}

.port-box>li:nth-child(2),
.port-box>li:nth-child(4) {
    margin-right: 0;
}

.port-box>li:nth-child(1),
.port-box>li:nth-child(2) {
    margin-bottom: 5px;
}

.port {
    width: 31px;
    padding: 5px;
    margin-right: 5px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.port-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 3px;
}

.port-ordinary {
    background-image: url(../../images/common/sec02.webp);
    background-position: -992.7px -730px;
    background-repeat: no-repeat;
    width: 30px;
    height: 39px;
}

.port-good {
    background-image: url(../../images/common/sec02.webp);
    background-position: -1052px -729px;
    background-repeat: no-repeat;
    width: 30px;
    height: 39px;
}

.port-bad {
    background-image: url(../../images/common/sec02.webp);
    background-position: -932.8px -730px;
    background-repeat: no-repeat;
    width: 30px;
    height: 39px;
}

.port-verybad {
    background-image: url(../../images/common/sec02.webp);
    background-position: -813.9px -730px;
    background-repeat: no-repeat;
    width: 30px;
    height: 39px;
}

/* 교정중 */
.port-correction {
    background-image: url(../../images/common/sec02.webp);
    background-position: -874px -730px;
    background-repeat: no-repeat;
    width: 30px;
    height: 39px;
}

.port>div>img {
    width: 28px;
}

.port-area {
    width: 56px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

.port-area>div {
    margin: 0 auto;
    border-radius: 5px;
    padding: 7px;
    font-weight: 500;
    text-align: center;
}

.port-area-name {
    font-weight: 500;
    text-align: center;
    margin-bottom: 5px;
}

/* 항만 */

.map-day {
    position: absolute;
    right: 20px;
    color: #666;
}

.fine-dust {
    width: 62%;
    padding: 0 25px 0 25px;
}

.forecast {
    position: relative;
    width: 29%;
    padding: 0 25px 0 25px;
}

.forecast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background-color: #e8e8e8
}

.fine-dust>p,
.forecast>p {
    font-weight: 700;
    padding-bottom: 10px;
}

.fine-dust>div,
.forecast>div {
    box-sizing: border-box;
    width: 100%;
}

.fine-dust-box {
    display: flex;
    /* justify-content: space-between; */
}

.fine-dust-box>div:nth-child(1) {
    margin-right: 10px;
}

/* 미먼고침 시작 여기!*/
.weather-bad-short,
.weather-ordinary-short,
.weather-good-short,
.weather-very-bad-short,
.weather-correction-short {
    width: 42%;
}

.very-bad {
    width: 100%;
}


.weather-good {
    background-color: #ebf6ff;
    border: 1px solid #004bb7;
    border-radius: 5px;
    padding: 7px;
}

.weather-bad {
    background-color: #fffef3;
    border: 1px solid #f7aa00;
    border-radius: 5px;
    padding: 7px;
}

.weather-ordinary {
    background-color: #f6fff0;
    border: 1px solid #46b200;
    border-radius: 5px;
    padding: 7px;
}

.weather-very-bad {
    background-color: #fff3f3;
    border: 1px solid #ff3127;
    border-radius: 5px;
    padding: 7px;
}

.weather-correction {
    background-color: #ededed;
    border: 1px solid #515151;
    border-radius: 5px;
    padding: 7px;
}

.transverse {
    display: flex;
    align-items: center;
    justify-content: center;
}

.transverse img {
    width: 25%;
    padding-right: 5%;
}


.fine-dust-good {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-size: 49.3vw 30vw;
    background-position: 59.52% 93.214%;
    width: 1.7vw;
    height: 1.6vw;
    margin-right: 5px;
}

.fine-dust-bad {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-size: 49.3vw 30vw;
    background-position: 43.2% 93.214%;
    width: 1.7vw;
    height: 1.6vw;
    margin-right: 5px;
}

.fine-dust-ordinary {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-size: 49.3vw 30vw;
    background-position: 54.08% 93.214%;
    width: 1.7vw;
    height: 1.6vw;
    margin-right: 5px;
}

.fine-dust-verybad {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-size: 49.3vw 30vw;
    background-position: 48.64% 93.214%;
    width: 1.7vw;
    height: 1.6vw;
    margin-right: 5px;
}

.fine-dust-correction {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-size: 49.3vw 30vw;
    background-position: 37.76% 93.214%;
    width: 1.7vw;
    height: 1.6vw;
    margin-right: 5px;
}

.good-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #004bb7;
}

.bad-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f7aa00;
}

.ordinary-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #46b200;
}

.very-bad-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ff3127;
}

.correction-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #515151;
}

/* 미먼고침 끝*/

.dust-day {
    color: #555;
    text-align: center;
    font-size: 14px;
    padding-top: 5px;
}


/* 갈맷길미세먼지현황 롤링 */
.notice-rolling {
    padding: 0 25px 20px 25px;
}

.notice-container {
    position: relative;
    height: 65px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.notices {
    position: absolute;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
}



.notices li {
    padding: 0 15px;
    line-height: 65px;
    height: 50px;
    white-space: nowrap;
}

.controls {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 5px
}

.pause-play-btn {
    padding: 4px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;


}

.down-btn,
.up-btn {
    padding: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    font-size: 14px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.down-btn {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-position: -371px -656px;
}

.up-btn {
    background-image: url(../../images/common/sec02.webp);
    background-repeat: no-repeat;
    background-position: -340px -657px;
}

.controls button:hover {
    background-color: #e0e0e0;
}

.pause-play-btn>img {
    width: 9px;
}

.down-btn>img,
.up-btn>img {
    width: 11px;
}

.dust-map-right03-view {
   /* padding-bottom: 23px;*/
   /* padding-bottom: 18px;*/
}

.dust-map-height {
    box-sizing: border-box;
    height: 266px;
    margin: 0 25px 0 25px;
    background-color: #bdf3ff;
    overflow: hidden;
    border-radius: 9px;
}

.dust-map {
    position: relative;
    background-color: #bdf3ff;
    height: 0;
    padding-bottom: 58.5%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 9px;
}

.dust-map-legend {
    position: absolute;
    padding: 10px;
    z-index: 5;
    right: 0;
    bottom: 0;
}

.dust-info {
    font-size: 11px;
    padding: 10px;
}

.dust-tip-off-title {
    padding: 14px 25px 5px 25px;
}





/*미세/초미세구분*/
.dust-hide {
    display: none;
}


/* 미세먼지 - 지역, 시민제보 */
.gijang-area,
.geumjeong-area,
.haeundae-area,
.bukgu-area,
.dongnae-area,
.yeonje-area,
.suyoung-area,
.jingu-area,
.namgu-area,
.donggu-area,
.junggu-area,
.sasang-area,
.seogu-area,
.saha-area,
.gangseo-area,
.youngdo-area {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
}

/* 미세먼지 - 지역, 시민제보 */
.gijang-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/gijang_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.geumjeong-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/geumjeong_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.haeundae-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/haeundae_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.bukgu-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/bukgu_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.dongnae-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/dongnae_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.yeonje-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/yeonje_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.suyoung-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/suyoung_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.jingu-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/jingu_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.namgu-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/namgu_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.donggu-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/donggu_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.junggu-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/junggu_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.sasang-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/sasang_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.seogu-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/seogu_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.saha-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/saha_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.gangseo-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/gangseo_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}

.youngdo-area-good {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/youngdo_area_good.webp) 50% 50% no-repeat;
    z-index: 1
}




.gijang-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/gijang_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.geumjeong-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/geumjeong_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.haeundae-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/haeundae_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.bukgu-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/bukgu_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.dongnae-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/dongnae_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.yeonje-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/yeonje_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.suyoung-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/suyoung_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.jingu-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/jingu_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.namgu-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/namgu_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.donggu-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/donggu_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.junggu-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/junggu_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.sasang-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/sasang_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.seogu-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/seogu_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.saha-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/saha_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.gangseo-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/gangseo_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}

.youngdo-area-normal {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/youngdo_area_normal.webp) 50% 50% no-repeat;
    z-index: 1
}




.gijang-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/gijang_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.geumjeong-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/geumjeong_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.haeundae-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/haeundae_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.bukgu-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/bukgu_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.dongnae-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/dongnae_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.yeonje-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/yeonje_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.suyoung-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/suyoung_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.jingu-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/jingu_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.namgu-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/namgu_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.donggu-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/donggu_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.junggu-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/junggu_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.sasang-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/sasang_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.seogu-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/seogu_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.saha-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/saha_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.gangseo-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/gangseo_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}

.youngdo-area-bad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/youngdo_area_bad.webp) 50% 50% no-repeat;
    z-index: 1
}



.gijang-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/gijang_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.geumjeong-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/geumjeong_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.haeundae-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/haeundae_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.bukgu-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/bukgu_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.dongnae-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/dongnae_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.yeonje-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/yeonje_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.suyoung-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/suyoung_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.jingu-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/jingu_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.namgu-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/namgu_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.donggu-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/donggu_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.junggu-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/junggu_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.sasang-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/sasang_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.seogu-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/seogu_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.saha-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/saha_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.gangseo-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/gangseo_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}

.youngdo-area-verybad {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/youngdo_area_verybad.webp) 50% 50% no-repeat;
    z-index: 1
}



.gijang-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/gijang_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.geumjeong-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/geumjeong_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.haeundae-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/haeundae_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.bukgu-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/bukgu_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.dongnae-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/dongnae_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.yeonje-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/yeonje_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.suyoung-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/suyoung_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.jingu-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/jingu_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.namgu-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/namgu_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.donggu-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/donggu_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.junggu-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/junggu_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.sasang-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/sasang_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.seogu-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/seogu_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.saha-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/saha_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.gangseo-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/gangseo_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}

.youngdo-area-correct {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/youngdo_area_correct.webp) 50% 50% no-repeat;
    z-index: 1
}



.report-gijang.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-geumjeong.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-haeundae.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-bukgu.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-dongnae.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-suyoung.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-yeonje.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-jingu.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-namgu.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-junggu.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-donggu.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-sasang.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-seogu.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-saha.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gangseo.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-youngdo.good {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/cic_good.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gijang.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-geumjeong.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-haeundae.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-bukgu.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-dongnae.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-suyoung.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-yeonje.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-jingu.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-namgu.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-junggu.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-donggu.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-sasang.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-seogu.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-saha.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gangseo.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-youngdo.normal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/cic_normal.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gijang.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-geumjeong.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-haeundae.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-bukgu.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-dongnae.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-suyoung.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-yeonje.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-jingu.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-namgu.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-junggu.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-donggu.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-sasang.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-seogu.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-saha.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gangseo.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-youngdo.bad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/cic_bad.webp) 50% 50% no-repeat;
    z-index: 4
}


.report-gijang.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-geumjeong.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-haeundae.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-bukgu.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-dongnae.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-suyoung.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-yeonje.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-jingu.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-namgu.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-junggu.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-donggu.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-sasang.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-seogu.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-saha.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gangseo.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-youngdo.verybad {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/cic_verybad.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gijang.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gijang_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-geumjeong.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/geumjeong_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-haeundae.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/haeundae_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-bukgu.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/bukgu_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-dongnae.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/dongnae_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-suyoung.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/suyoung_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-yeonje.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/yeonje_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-jingu.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/jingu_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-namgu.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/namgu_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-junggu.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/junggu_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-donggu.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/donggu_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-sasang.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/sasang_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-seogu.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/seogu_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-saha.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/saha_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-gangseo.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/gangseo_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

.report-youngdo.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background: url(../../images/main/main-map/youngdo_area/cic_correct.webp) 50% 50% no-repeat;
    z-index: 4
}

/*해양 산업 이슈 분석*/
.map3 {
    box-sizing: border-box;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    /* padding: 15px; */
    margin: 0 27px 20px 27px;
    background-color: #dcf7ff;
}

.map3 {
    height: 641px;
    background-repeat: no-repeat;
}
.businesses-map .slick-prev,
.businesses-map .slick-next {
    display: none;
}
.businesses-map-right {
    border-radius: 15px;
}
.businesses-map .slick-dots {
    bottom: 5px;
}
.businesses-map .slick-dots li.slick-active {
    background-color: #333;
}
.businesses-map .slick-dots li {
    margin: 0 2px;
}

.businesses-map6 {
    position: relative;
    height: 641px !important;
    background-image: url(../../images/main/real-main/status_of_industries6.webp);
    background-repeat: no-repeat;
}


.businesses-map1 {
    position: relative;
    height: 641px !important;
    background-image: url(../../images/main/real-main/status_of_industries1.webp);
    background-repeat: no-repeat;
}
.businesses-map2 {
    position: relative;
    height: 641px !important;
    background-image: url(../../images/main/real-main/status_of_industries2.webp);
    background-repeat: no-repeat;
}
.businesses-map3 {
    position: relative;
    height: 641px !important;
    background-image: url(../../images/main/real-main/status_of_industries3.webp);
    background-repeat: no-repeat;
}
.businesses-map4 {
    position: relative;
    height: 641px !important;
    background-image: url(../../images/main/real-main/status_of_industries4.webp);
    background-repeat: no-repeat;
}
.businesses-map5 {
    position: relative;
    height: 641px !important;
    background-image: url(../../images/main/real-main/status_of_industries5.webp);
    background-repeat: no-repeat;
}

.businesses-map-right>a>img:nth-child(1) {
    width: 330px;
    position: absolute;
    top: 15px;
    left: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.businesses-map-right>a>img:nth-child(2) {
    width: 500px;
    position: absolute;
    top: 15px;
    /* top: 48px; */
    right: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.businesses-map-right>a>img:nth-child(3) {
    width: 501px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.percentage-businesses {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.daily-life-importance-survey {
    height: 118px;
}

.marine-sustainability {
    height: 138px;
}

.daily-life-importance-survey,
.marine-sustainability,
.percentage-marine-industries-m-content {
    padding: 0 25px 20px 25px;
}
.percentage-marine-industries-m-content-slide .slick-prev,
.percentage-marine-industries-m-content-slide .slick-next {
    display: none;
}
.percentage-marine-industries-m-content-slide .slick-dots {
    bottom: -9px;
}
.percentage-marine-industries-m-content-slide .slick-dots li.slick-active {
    background-color: #333;
}
.percentage-marine-industries-m-content-slide .slick-dots li {
    margin: 0 2px;
}







.story-map-img {
 /*   height: 185px;*/
    height: 166px;
    width: 100%;
}

.story-map-img>li {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #333;
}

.story-map-img li a {
    display: block;
   /* height: 100%;*/
    height: auto !important;
    width: 100%;
}

.story-map-img li a img {
    height: 185px;
    width: 100%;
/*    object-fit: cover;*/
    /* object-position: center top; */
}

.story-map-img > .slick-dots {
    bottom: 13px;
}

.story-map-img-box {
   /* padding: 0 25px 20px 25px;*/
 /*   padding: 11px 25px 18px 25px;*/
    padding: 0 25px 18px 25px;
    box-sizing: border-box;
    width: 100%;
}

.story-map-img {
    border-radius: 9px;
    overflow: hidden;
}

.story-map-img>.slick-prev,
.story-map-img>.slick-next {
    display: none !important;
}



.story-map-img>.slick-dots li.slick-active {
    background-color: #333;
}

.story-map-img>.slick-dots li {
    margin: 0 2px;
}

.sec03-right img {
    background-size: cover;
    width: 100%;
    vertical-align: middle;
    /*border-radius: 14px;*/
}


/* 팝업 문구 오버레이 */
.notice-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.message-box {
    background-color: rgba(255, 255, 255, 0.95); /* 좀 더 밝게 */
    padding: 50px 60px; /* 패딩 확대 */
    border-radius: 24px;
    max-width: 700px; /* 더 큰 박스 너비 */
    width: 25%;
    color: #333;
    font-size: 1.3rem; /* 글자 크기 증가 */
    line-height: 1.8; /* 줄 간 간격 */
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
}

.message-box p {
    margin-bottom: 20px; /* 문단 간 간격 */
}

.message-title {
    font-size : 35px;
}

.message-content{
    font-size: 24px;
}

.dismiss-area {
    position: absolute;
    bottom: 20px;
    right: 25px;
    font-size: 1rem;
    color: #555;
}

.dismiss-area input[type="checkbox"] {
    margin-right: 8px;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #222;
}

/*마세먼지 범례*/
/*
.dust-legend {

    margin: 5px 0 0 8px;
}
*/





@keyframes topBtn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.3);
    }
}


@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

#header-wrap {
    display: none;
}


/*f11*/
.wrap.full {
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


.sec01-sd.full,
.slid-header-bottom.full{
  /*  top: 3vh;*/
    top: 1vh;
}

/*뉴스 롤링*/
.news-right-title {
 /*   padding: 25px 25px 0px 25px;*/
    padding: 25px 25px 25px 25px;
}

.news-rolling {
    padding: 0 25px 20px 25px;
}

.news-container {
/*    position: relative;
    height: 106px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;*/
    position: relative;
    height: 118px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.news-date {
    display: flex;
    justify-content: end;
 /*   padding: 0 20px 10px;*/
/*    padding: 0 20px 15px;*/
    font-size: 15px;
    color: #777;
    font-weight: 400;
}

.news-list {
    width: 100%;
    position: absolute;
    top: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
}

/*
.news-list li {
    padding: 0 15px;
    line-height: 40px;
    height: 35px;
    white-space: nowrap;
    font-size: 14.5px;
}
*/

/*.news-list li {
    box-sizing: border-box;
    line-height: 39px;
    width: 100%;
    height: 35px; !*이거 35px로 해야지 롤링 부드럽게됨*!
    white-space: nowrap;
    font-size: 14.5px;
    margin-left: 2px;
}*/

.news-list li {
    box-sizing: border-box;
    line-height: 39px;
    width: 100%;
    height: 35px;
    white-space: nowrap;
    font-size: 14.5px;
    padding: 0 15px;
}

.news-list li p {
/*    padding: 0 7px;
    width: 88%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
    width: 88%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list li  a {
   /* margin-left: 12px;*/
    width: 88%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}



.news-controls {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    gap: 5px;
    margin-right: 5px;
}

.news-scroll-btn img {
    border-radius: unset;

}

.pause-play-btn>img {
    width: 9px;
    display: none;
}

.news-up-btn {
    margin-bottom: 11px;
}

/* 이벤트 팝업*/
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px 25px 45px 25px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1002;
}

.popup-content {
    width: auto;
    display: inline-block;
}

.popup-content-box {
    position: relative;
    display: block;
}

.firecracker1 {
    position: absolute;
    left: -218px;
    bottom: 414px;
}

.firecracker1>img {
    width: 350px;
}

.firecracker2 {
    position: absolute;
    right: -188px;
    bottom: -77px;
}

.firecracker2>img {
    width: 300px;
}

.firecracker1,
.firecracker2 {
    opacity: 0;
}

.main-popup-close-btn {
    position: absolute;
    top: -8px;
    right: -7px;
}

.main-popup-close-btn>button>img {
    width: 40px;
    height: 40px;
}

.main-popup-close-btn>button {
    background-color: transparent;
    border: none;
}

/* 팝업 체크박스 스타일 */
.main-popup-nonview {
    position: absolute;
    bottom: -30px;
    left: 0;
    z-index: 1003;
}

.popup-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    color: #333;
    user-select: none;
}

.popup-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-custom {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.popup-checkbox:checked + .checkbox-custom {
    background-color: #007bff;
    border-color: #007bff;
}

.popup-checkbox:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-weight: 400;
    white-space: nowrap;
}

.slide-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px;
    max-height: 500px;
}

.slide-item img {
    width: 100% !important;
    height: auto;
    border-radius: 15px;
    display: block;
    min-width: 100% !important;
    object-fit: cover;
}

.popup .slider_popup .slide-item img {
    width: 500px !important;
    height: auto !important;
    max-width: 500px !important;
    min-width: 500px !important;
    object-fit: cover !important;
}


.slider_popup {
    max-width: 500px;
    width: 500px !important;  /* 고정 너비 */
    margin: 0 auto;
    min-height: 300px;
    visibility: hidden;
}


.slider_popup .slick-list {
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
}

.slider_popup .slick-track {
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
}

.slider_popup.slick-initialized {
    visibility: visible; /* 초기화 완료 후 표시 */
}

.popup-content1 a,
.popup-content2 a{
    text-decoration: unset;
    outline: unset;
    letter-spacing: unset;
    color: unset;
}

.popup-content .slick-dots {
    bottom: -25px !important;
   /* display: none !important; */
}




/*푸터*/
/* 로고롱링 & 푸터 & 탑버튼 */
footer {
    position: relative;
    width: 100%;
}

.list > li:nth-child(1) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 107px;
    height: 8px;
    background-position: 5.474% 95.76%;
}

.list > li:nth-child(2) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 147px;
    height: 8px;
    background-position: 80.09% 75.439%;
}

.list > li:nth-child(3) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 124px;
    height: 13px;
    margin-left: 45px;
    background-position: 5.042% 76.491%;
}

.list > li:nth-child(4) {
    /*  background-image: url(../../images/common/data_busan_logo.webp);*/
    /*    background-repeat: no-repeat;
        width: 124px;
        height: 20px;
        margin-left: 35px;
        background-position: 4.622% 58.065%;*/
    /*
        width: 98px;
        background-size: 95px 24px;
        background-repeat: no-repeat;*/
    /*   background-image: url(../../images/common/data_busan_logo.webp);
       background-repeat: no-repeat;
       width: 124px;
       height: 20px;
       margin-left: 35px;
       background-position: 4.622% 58.065%;*/
    background-image: url(../../images/common/data_busan_logo.webp);
    background-repeat: no-repeat;
    width: 124px;
    height: 20px;
    margin-left: 35px;
    background-position: 4.622% 58.065%;
}

.list > li:nth-child(5) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 124px;
    height: 15px;
    margin-top: 10px;
    background-position: 95.833% 3.623%;
}

/*.list > li:nth-child(6) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 160px;
    height: 15px;
    margin: 21px 0 0 50px;
    background-position: -6.048% 4.226%;
    background-size: 321px 304px;
}

.list > li:nth-child(7) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 160px;
    height: 15px;
    margin: 16px 0 0 40px;
    background-position: 5.66% 23.404%;
}

.list > li:nth-child(8) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 78px;
    height: 15px;
    margin-top: 5px;
    background-position: 85.926% 43.369%;
}

.list > li:nth-child(9) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 160px;
    height: 15px;
    margin: 8px 0 0 50px;
    background-position: 6.218% 40.83%;
    background-size: 346px 304px;
}*/

.list > li:nth-child(6) {
    background-image: url(../../images/common/logo_koem.webp);
    background-repeat: no-repeat;
    width: 160px;
    height: 15px;
    margin: 5px 47px 0 50px;
    background-position: 4.622% 58.065%;
}

.list > li:nth-child(7) {
    background-image: url(../../images/common/logo_meis.webp);
    background-repeat: no-repeat;
    width: 135px;
    height: 15px;
    margin: 8px 6px 0 0;
    background-position: 85.926% 43.369%;
}

.list > li:nth-child(8) {
    background-image: url(../../images/common/logo_galmaetgil.webp);
    background-repeat: no-repeat;
    width: 76px;
    height: 15px;
    margin: 4px 50px 0 40px;
    background-position: 85.926% 43.369%;
}

.list > li:nth-child(9) {
    background-image: url(../../images/common/footer_logos.webp);
    background-repeat: no-repeat;
    width: 160px;
    height: 15px;
    margin: 8px 0 0 0;
    background-position: 6.218% 40.83%;
    background-size: 346px 304px;
}


.list > li:nth-child(10) {
    /*  background-image: url(../../images/common/statPortal_logo.webp);*/
    /*    background-repeat: no-repeat;
        width: 86px;
        height: 15px;
        margin: 13px 46px 0 42px;
        background-position: 91.373% 23.843%;*/

    /*    width: 98px;
        background-size: 83px 24px;
        margin: 6px 46px 0 15px;
        background-repeat: no-repeat;*/
    background-image: url(../../images/common/statPortal_logo.webp);
    background-repeat: no-repeat;
    width: 86px;
    height: 15px;
    margin: 12px 46px 0 15px;
    background-position: 91.373% 23.843%;
}

/* 탑버튼 */
.top-box {
    display: block !important;
    position: absolute;
    right: 50px;
    /*top: 110px;*/
    top: 65px;
    width: 65px;
    height: 65px;
    background-color: #3d3d3d;
    border-radius: 5px;
    z-index: 99;
}

.top-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(68, 69, 71, 0.2);
}

.top-box::before {
    animation: topBtn 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.top-box:hover {
    cursor: pointer;
}

.top {
    display: inline-block;
    color: #fff;
    padding: 23px 15px;
    text-align: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

@keyframes topBtn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* footer */
.footer_inner {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 0;
}

.flow-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    margin: 15px auto;
    /* background: #000; */
}

.flow-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, transparent 100%);
    z-index: 5;
}

.flow-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, transparent 100%);
    z-index: 5;
}

.flow-banner .list {
    display: flex;
    /*   margin-top: 50px;*/
}

.flow-banner .list > li {
    white-space: nowrap;
    padding: 20px;
}

.flow-banner .list > li a {
    font-size: 18px;
    color: #fff;
    display: block;
    height: 50px;
}

.flow-banner .list > li a img {
    width: 120px;
}

.copyright {
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: #1f2024;
}

/*.copyright p {
    text-align: start;
    font-size: 14px;
    color: #fff;
}*/

.copyright-inner-container {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
}

.policy-container {
    margin-bottom: 16px;
}

.policy-link {
    color: white;
    font-size: 20px;
    margin-right: 10px;
}

.footer-info > span::after {
    content: '';
    display: inline-block;
    background-color: #fff;
    width: 1px;
    height: 10px;
    margin: 0 14px;
}

.footer-info > span:last-child::after {
    display: none;
}


/* 푸터 텍스트 시작 */
.footer-text-wrap {
    background-color: #1f2024;
}

.footer-inner {
    width: 90%;
    margin: 0 auto;
}

.footer-text-top {
    padding: 30px 0;
    display: flex;
    gap: 15px 40px;
    align-items: center;
}

.footer-text-top>li:nth-last-child(1) {
    margin-right: 0;
}

.footer-text-top>li>a {
    display: block;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
}

/*
.footer-text-top>li:nth-child(1) {
    position: absolute;
}
.footer-text-top>li:nth-child(2){
    position: relative;
}

.footer-text-top>li:nth-child(1)::before{
    position: absolute;
    display: inline-block;
    content: '';
    width: 1px;
    height: 18px;
    background-color: #fff;
    right: -21px;
    top: 2px;
}

.footer-text-top>li:nth-child(2)::before{
    position: absolute;
    display: inline-block;
    content: '';
    width: 1px;
    height: 18px;
    background-color: #fff;
    right: -23px;
    bottom: 2px;
}
*/


.footer-text-top>li:nth-child(1),
.footer-text-top>li:nth-child(2){
    position: relative;
}

.footer-text-top>li:nth-child(1)::before,
.footer-text-top>li:nth-child(2)::before {
    position: absolute;
    display: inline-block;
    content: '';
    width: 1px;
    height: 14px;
    background-color: #fff;
    right: -21px;
    top: 3px;
}


.footer-text-top>li:nth-child(2)>a{
    /*    margin-left: 100px;*/
    font-weight: 600;
}

.footer-text-top>li:nth-child(3)>a{
    /* margin-left: 50px;*/
    font-weight: 600;
}

.footer-text-middle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 30px 0;
}

.footer-text-middle>ul>li {
    display: flex;
    padding-bottom: 15px;
    color: #fff;
}

.footer-text-middle>ul>li:nth-last-child(1) {
    padding-bottom: 0;
}

.footer-text-middle>ul>li>span {
    width: 7vw;
    padding-right: 10px;
    color: #fff;
    word-break: keep-all;
}

.footer-text-middle>ul>li>p {
    color: rgba(255, 255, 255, .5);
    word-break: keep-all;
    font-size: 15px;
}

.footer-sov-logo {
    margin-top: 33px;
}
.footer-sov-logo>img {
    width : 200px;
}

.tel-color,
.fax-color,
.bin-no {
    color: rgba(255, 255, 255, .5) !important;
}

.busan-box {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    padding-top: 25px;
    justify-content: center;
}
.busan-box>img {
    width: 120px;
    margin-right: 10px;
}

.busan-text {
    color: #555;
}

.footer-text-bottom {
    /*    text-align: center;
        padding: 25px 0;
        color: #555;
        border-top: 1px solid rgba(255, 255, 255, 0.11);*/
    text-align: center;
    color: #555;
    padding: 5px 0 25px 0;
}

.border-line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

/* 푸터 텍스트 끝 */

/*영문버전*/
.footer-text-top-eng>li:nth-child(2)>a {
    margin-left: 145px;
    font-weight: 600;
}




/* 반응형*/
@media (max-width: 1919px) {
   /* .expansion {
        display: none;
    }*/
    .hidden {
     /*   display: block;*/
    }
    .pc-header {
        display: flex;
        justify-content: space-between;
    }

    .dust-info {
        display: none;
    }

    .dust-box{
        padding-bottom: 20px;
    }

    .dust-map-right03-view {
        padding-bottom: 23px;
    }


    .dust-tip-off-title {
        padding: 25px 25px 15px 25px;
    }

    .news-list li {
        font-size: 13px;
    }

}
@media (max-width: 1695px) {

    .sec01,
    .sec02,
    .sec03 {
        flex-direction: column;
    }

    .left,
    .right {
        width: 100%;
    }

    .right {
        margin-top: 1%;
        display: flex;
        justify-content: space-between;
    }

    .right>li {
        width: 32.5%;
        height: 300px;
    }

    .right02-view {
        margin: 0;
    }

    /* sec01 */
    .purification-criteria-title,
    .collection-criteria-title {
     /*   padding-bottom: 20px;*/
        padding-bottom: 13px;
        padding-top: 8px;
    }

    .right-title {
        padding: 25px 25px 33px 25px;
    }

    .cumulative-membership>p,
    .accumulated-project>p {
        padding-top: 20px;
    }

    .current {
        flex-wrap: wrap;
        padding: 0 25px 25px 25px;
    }

    .accumulated-project::before {
        height: 188px;
    }

    .activity-left,
    .area-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 48% !important;
    }

    .collection-bottom {
        margin-top: 13px;
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .activity>div,
    .area>div,
    .collection>div {
        font-size: 2.7vw;
    }

    .activity>div>p,
    .area>div>p,
    .collection>div>p {
        font-size: 1.3vw;
    }

    .current>li {
        border: 1px solid #c2c2c2;
        border-radius: 10px;
        padding-bottom: 10px;
        height: 75px;

        padding-top: 7px;
    }

    .current>li>p {
        padding-top: 0;
    }

    .lpj-criterion .slick-dots {
        bottom: 1px;
    }

    /* sec02 */
    /* 미먼고침 시작 */
    .correction-text,
    .very-bad-text,
    .ordinary-text,
    .bad-text,
    .good-text {
        font-size: 1.1rem;
    }
    /* 미먼고침 끝 */

    .dust-map-height {
       /* height: 191px;*/
        height: 198px;
    }

    .gijang-area,
    .geumjeong-area,
    .haeundae-area,
    .bukgu-area,
    .dongnae-area,
    .yeonje-area,
    .suyoung-area,
    .jingu-area,
    .namgu-area,
    .donggu-area,
    .junggu-area,
    .sasang-area,
    .seogu-area,
    .saha-area,
    .gangseo-area,
    .youngdo-area {
        position: absolute;
        /*top: -29px;*/
        top: -37px;
        left: -1px;
        width: 100%;
        height: 100%;
    }

    /* .dust-map {
      padding-bottom: 40%;
   } */

    /* 슬라이드 3번째 */
  .story-map-img {
        height: 195px;
    }

    .story-map-img li a img {
        height: 195px;
    }

    .story-map-img-box {
       /* padding: 0 25px 25px 25px;*/
        padding: 0 25px 20px 25px;
    }


    .daily-life-importance-survey-img1,
    .marine-sustainability-img1 {
        margin-top: 23px;
    }

    .dust-map-legend {
        top: 152px;
    }

  /*  .news-date {
        padding: 0 20px 28px;
    }
*/
    .news-container {
      /*  height: 187px;*/
       /* height: 140px;*/
        height: 111px;
    }

    .news-list li {
       /* height: 46px;
        line-height: 46px;*/
        line-height: 32px;
    }

    .news-date {
        padding: 0 0 10px 0;
    }
}

@media (max-width: 1439px) {

    /* 슬라이드1번째 */
    .left-title {
        display: none;
    }

    .left {
        background-color: #f4f4f4;
        box-shadow: none;
        overflow: visible;
    }

    .map01 {
        margin: 0;
        height: 100%;
        background-image: none;
        background-color: #f4f4f4;
        flex-direction: column;
        padding: 0;
    }

    .m-sec01-title01 {
        display: block !important;
        font-size: 25px;
        font-weight: 700;
        color: #222;
        padding: 30px 0 20px 0;
    }

    .m-sec01-title02 {
        display: block !important;
        font-size: 25px;
        font-weight: 700;
        color: #222;
        padding: 50px 0 20px 0;
    }

    .cctv-satellite>li:nth-child(2) {
        margin: 0;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(2),
    .cctv-satellite>li:nth-child(3) {
        padding: 25px 25px 25px 25px;
    }

    .cctv-satellite>li>p {
        padding-bottom: 16px;
        font-size: 1.3rem;
    }

    .alert {
        display: none;
    }

    .cctv-satellite {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .cctv-satellite>li {
        width: 49%;
        height: 260px;
        box-sizing: border-box;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(2) {
        margin-bottom: 2%;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(3) {
        margin-right: 2%;
    }

    .right-title {
        padding: 25px 25px 15px 25px;
    }

    .alert-img {
        margin: 40px auto;
    }

    .alert-img.normal-alert {
  /*      margin: 40px auto;*/
        background-image: none;
     /*   padding: 18px 37px 14px 18px;*/
        padding: 3px 37px 0px 18px;
    }

    .m-alert {
        display: block !important;
        padding: 0 !important;
    }

    .m-alert .slick-dots {
        display: none !important;
    }

    .m-alert>span {
        font-size: 1.1rem;
        display: block;
        text-align: center;
        background-color: #f42c2c;
        color: #fff;
        font-weight: bold;
        padding: 20px;
      /*  border-radius: 10px 10px 0 0;*/
        border-radius: 15px 15px 0 0;
    }

    .cctv-information-top,
    .satellite-information-top,
    .cctv-information-bottom,
    .satellite-information-bottom {
        padding: 21px;
    }

    .cctv img,
    .satellite img {
        width: 100%;
        height: 171px;
        object-fit: cover;
    }

    .cctv,
    .satellite {
        height: 171px;
    }

    .cctv-satellite>li {
        position: relative;
    }

    .cctv .slick-dots,
    .satellite .slick-dots {
        position: absolute;
        right: 73px;
        left: -71%;
    }

    .sec01-right {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 100px;
        margin-top: 0;
    }
    .sce02-right {
        margin-bottom: 100px;
    }

    .sec01-right>li:nth-child(1) {
        width: 100%;
        margin-bottom: 2%;
    }

    .sec01-right>li:nth-child(2),
    .sec01-right>li:nth-child(3) {
        width: 49%;
    }

    .sec01-right>.right02-view,
    .sec01-right>.right03-view {
        height: 283px;
    }

    .sec01-right>.right02-view>.right-title,
    .sec01-right>.right03-view>.right-title {
        padding: 25px 25px 21px 25px;
    }

    .right>li {
/*        height: 270px;*/
        height: 276px;
    }

    .current>li {
        padding-bottom: 0;
    }

    .living-project-services-more {
        width: 100% !important;
        display: block !important;
        margin-top: 40px;
        height: 60px !important;
        text-align: center;
        line-height: 60px;
    }

    .living-project-services-more>button {
        display: flex;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 60px;
    }

    .living-project-services-more>button>a {
        display: block;
        width: 100%;
        height: 60px;
        font-family: 'Pretendard';
        font-size: 1.1rem;
        line-height: 60px;

    }

    .activity-left,
    .area-right,
    .collection-bottom {
        width: 33.1% !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .current>li:nth-child(2) {
        border-right: 1px solid #ccc !important;
        border-left: 1px solid #ccc !important;
    }

    .collection-bottom {
        margin-top: 0;
    }

    .activity>div,
    .area>div,
    .collection>div {
        font-size: 3.7vw;
    }

    .activity>div>p,
    .area>div>p,
    .collection>div>p {
        font-size: 2.1vw;
    }

    /* 슬라이드2번째 */
    .sec02-left {
        display: none;
    }

    /* 미세먼지 버튼 시작 여기~~*/
    .m-sec02-title1-dust2-btn {
        display: flex;
        justify-content: space-between;
    }

    .m-sec02-title1-dust2-btn-wrap,
    .right01-view,
    .port_dust_services_more {
        display: block !important;
    }

    .dust2-btn {
        padding: 25px 0 0 0;
    }
    .blue-btn {
        font-size: 15px;
        line-height: 39px;
        height: 38px;
    }
    .gray-btn {
        background-color: #fff;
        border: 1px solid #ccc;
        color: #666;
        font-size: 15px;
        line-height: 39px;
        height: 38px;
    }
    .dust-button {
        padding: 0 12px;
    }

    .m-sec02-title1 {
        font-size: 25px;
        font-weight: 700;
        color: #222;
        padding: 30px 0 20px 0;
    }

    /* 미세먼지 버튼 끝*/



    .m-sec02-title01,
    .right01-view,
    .port-dust-services-more {
        display: block !important;
    }

    .m-sec02-title01 {
        display: block !important;
        font-size: 25px;
        font-weight: 700;
        color: #222;
        padding: 30px 0 20px 0;
    }

    .sce02-right {
        margin-top: 0;
        flex-wrap: wrap;
    }

    .sce02-right>li {
        width: 49%;
    }

    .sce02-right>li:nth-child(1),
    .sce02-right>li:nth-child(2) {
        /* height: 100%; */
        height: 0;
        padding-bottom: 62%;
    }

    .sce02-right>li:nth-child(1),
    .sce02-right>li:nth-child(3) {
        margin-right: 2%;
    }

    .sce02-right>li:nth-child(3),
    .sce02-right>li:nth-child(4) {
        margin-top: 2%;
    }

    .m-port-dust {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 27px 20px 27px;
    }

    .m-port-dust>li {
        width: 48%;
        height: 0;
        padding-bottom: 48%;
        position: relative;
        border-radius: 15px;
    }

    /*모바일 항구 숨기기*/
    .dust-hide {
        display: none;
    }
    /* 모바일 항구 시작 */
    .m-port-bad {
        background-color: #fff5e6;
    }

    .m-port-good {
        background-color: #e6f7ff;
    }

    .m-port-ordinary {
        background-color: #eaf9f3;
    }
    .m-port-verybad {
        background-color: #ffebeb;
    }
    .m-port-correction {
        background-color: #ededed;
    }

    .m-port-dust>li:nth-child(3),
    .m-port-dust>li:nth-child(4) {
        margin-top: 4%;
    }

    .m-port-dust>li>p {
        position: absolute;
        top: 20px;
        left: 20px;
        font-weight: 600;
        color: #777;
    }


/*
    .m-dust-port-good>img,
    .m-dust-port-ordinary>img,
    .m-dust-port-bad>img,
    .m-dust-port-verybad>img,
    .m-dust-port-correction>img
    {
        width: 7.5vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
    }*/


    .m-dust-port-good {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
    /*    background-image: url(../../images/common/sec02.webp);*/
        background-repeat: no-repeat;
        background-size: 130.3vw 80.5vw;
        background-position: 31.082% 98.25%;
        width: 7vw;
        height: 8vw;
    }

    .m-dust-port-ordinary {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
      /*  background-image: url(../../images/common/sec02.webp);*/
        background-repeat: no-repeat;
        background-size: 130.3vw 80.5vw;
        background-position: 23.596% 98.25%;
        width: 7vw;
        height: 8vw;
    }

    .m-dust-port-bad {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
     /*   background-image: url(../../images/common/sec02.webp);*/
        background-repeat: no-repeat;
        background-size: 130.3vw 80.5vw;
        background-position: 8.596% 98.25%;
        width: 7vw;
        height: 8vw;
    }

    .m-dust-port-verybad {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
       /* background-image: url(../../images/common/sec02.webp);*/
        background-repeat: no-repeat;
        background-size: 130.3vw 80.5vw;
        background-position: 15.9% 98.25%;
        width: 7vw;
        height: 8vw;
    }

    .m-dust-port-correction {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
      /*  background-image: url(../../images/common/sec02.webp);*/
        background-repeat: no-repeat;
        background-size: 130.3vw 80.5vw;
        background-position: 0.9% 98.25%;
        width: 7vw;
        height: 8vw;
    }



    .m-port-name {
        width: 141px;
        position: absolute;
        left: 50%;
        top: 76%;
        transform: translate(-50%, 0%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .m-port-name>span {
        margin-left: 10px;
        width: 70px;
        height: 40px;
        display: block;
        text-align: center;
        line-height: 40px;
        border-radius: 7px;
        font-weight: 700;
        font-size: 1.2rem;
    }

    .m-level-port-good {
        background-color: #2fa4f6;
    }

    .m-level-port-ordinary {
        background-color: #69d72f;
    }

    .m-level-port-bad {
        background-color: #ffc200;
    }
    .m-level-port-verybad {
        background-color: #fc4949;
    }
    .m-level-port-correction {
        background-color: #5b5b5b;
        color: #fff;
    }
    /* 모바일 항구 끝*/


    .port-dust-services-more {
        height: 60px;
        line-height: 60px;
        margin: 0 27px 25px 27px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    .port-dust-services-more>button {
        width: 100%;
    }

    .port-dust-services-more>button>a {
        display: block;
        font-family: 'Pretendard';
        font-size: 1.1rem;
        line-height: 60px;
    }

    .dust-box {
        padding: 0;
        border-radius: 10px;
        margin: 0 27px 20px 27px;
        flex-wrap: wrap;
    }

    .fine-dust,
    .forecast {
        border: 1px solid #ccc;
        padding-bottom: 25px;
        border-radius: 10px;
    }

    .forecast {
        width: 100%;
        margin: 15px 0 5px 0;
    }

    .fine-dust>p,
    .forecast>p {
        padding-top: 20px;
    }

    .forecast::before {
        display: none;
    }

    .fine-dust {
        width: 100%;
    }


    /* 미먼고침시작 여기!*/
    .weather-bad,
    .weather-ordinary,
    .weather-very-bad,
    .weather-good,
    .weather-correction {
        height: 0;
        padding-bottom: 42.5%;
    }

    .weather-good-short,
    .weather-bad-short,
    .weather-ordinary-short,
    .weather-very-bad-short,
    .weather-correction-short {
        width: 50%;
    }

    .transverse {
        flex-direction: column;
    }


    .fine-dust-good {
        width: 5.8vw;
        height: 4.6vw;
        margin-top: 18%;
        background-size: 118.3vw 74vw;
        background-position: 59.52% 94%;
    }

    .fine-dust-bad {
        width: 5.8vw;
        height: 4.6vw;
        margin-top: 18%;
        background-size: 118.3vw 74vw;
        background-position: 43% 93.8%;
    }

    /* 중심 */
    .fine-dust-ordinary {
        width: 5.8vw;
        height: 4.6vw;
        margin-top: 18%;
        background-size: 118.3vw 74vw;
        background-position: 53.99% 93.8%;
    }

    /* 중심 */
    .fine-dust-verybad {
        width: 5.8vw;
        height: 5.6vw;
        margin-top: 6%;
        background-size: 118.3vw 74vw;
        background-position: 48.5% 93.8%;

    }

    .fine-dust-correction {
        width: 5.8vw;
        height: 5.6vw;
        margin-top: 12%;
        background-size: 118.3vw 74vw;
        background-position: 37.4% 93.8%;

    }

    .weather-very-bad-short>.transverse>.fine-dust-verybad {
        margin-top: 12%;
    }

    .weather-correction-long>.transverse>.fine-dust-correction {
        margin-top: 7%;
    }

    .weather-good-long>.transverse>.fine-dust-good,
    .weather-bad-long>.transverse>.fine-dust-bad,
    .weather-ordinary-long>.transverse>.fine-dust-ordinary {
        margin-top: 10%;
    }

    /* 미먼고침 끝 */
    .sce02-right>li:nth-child(3),
    .sce02-right>li:nth-child(4) {
        height: 400px;
    }

    .dust-map-height {
        /*height: 308px;*/
        height: 316px;
    }

    .dust-map {
        height: 311px;
        padding-bottom: 0;
    }

    .gijang-area,
    .geumjeong-area,
    .haeundae-area,
    .bukgu-area,
    .dongnae-area,
    .yeonje-area,
    .suyoung-area,
    .jingu-area,
    .namgu-area,
    .donggu-area,
    .junggu-area,
    .sasang-area,
    .seogu-area,
    .saha-area,
    .gangseo-area,
    .youngdo-area {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
    }

    /* 슬라이드 3번째 */
   .sec03-left {
        display: none;
    }

    .percentage-marine-industries-m {
        display: block !important;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .m-sec03-title01 {
        display: block !important;
        font-size: 25px;
        font-weight: 700;
        color: #222;
        padding: 30px 0 20px 0;
    }

    .sec03-right {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 0;
    }

    .sec03-right>li {
        width: 49%;
    }

    .sec03-right>li:nth-child(3),
    .sec03-right>li:nth-child(4) {
        margin-top: 2%;
    }

    .sec03-right {
        margin-bottom: 100px;
    }

    .percentage-marine-industries-m-content,
    .daily-life-importance-survey,
    .marine-sustainability,
    .story-map-img,
    .story-map-img li a img {
       /* height: 100%;*/
        height: auto;
    }

    .sec03-right>li:nth-child(1),
    .sec03-right>li:nth-child(2),
    .sec03-right>li:nth-child(3),
    .sec03-right>li:nth-child(4) {
        height: 100%;
    }

    .marine-sustainability-img2,
    .daily-life-importance-survey-img2,
    .percentage-marine-industries-m-content {
        display: block !important;
    /*    height: 100%;*/
        height: auto;
    }

/*    .marine-sustainability-img2 img,*/
    .daily-life-importance-survey-img2 img,
    .percentage-marine-industries-m-content {
      /*  height: 100%;*/
        height: 100%;
    }

    .marine-sustainability-img1,
    .daily-life-importance-survey-img1 {
        display: none !important;
    }

    .m-dust-port-good>img,
    .m-dust-port-ordinary>img,
    .m-dust-port-bad>img,
    .m-dust-port-verybad>img,
    .m-dust-port-correction>img {
        width: 7.5vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
    }


    .dust-map-legend {
        top: auto;
    }



    .news-list li {
        font-size: 15px;
    }
    .news-date {
        padding: 0;
    }
    .news-container {
        height: 0;
        padding-bottom: 41%;

    }

    /*푸터*/
    .footer-text-middle {
        flex-wrap: wrap;
    }
    .footer-sov-logo {
        display: none;
    }

}


@media (max-width: 1080px) {
    .news-list li {
        font-size: 13px;
    }
}


@media (max-width: 1024px) {

    .sec01,
    .sec02,
    .sec03 {
        padding: 96px 20px 13px 20px;
    }

    .cctv-satellite {
        flex-direction: column;
    }

    .cctv-satellite>li {
        width: 100%;
        height: 358px;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(3) {
        margin-right: 0;
    }

    .cctv-satellite>li:nth-child(3) {
        margin-bottom: 2%;
    }

    .cctv-information-top,
    .satellite-information-top,
    .cctv-information-bottom,
    .satellite-information-bottom {
        padding: 45px;
    }

    .cctv,
    .satellite,
    .cctv img,
    .satellite img {
        height: 270px;
    }

    .right>li:nth-child(2),
    .right>li:nth-child(3) {
        width: 100%;
    }
    .purification-criteria-title,
    .collection-criteria-title {
        padding-top: 0;
    }
/*    .right>li:nth-child(2) {
        margin-bottom: 2%;
        height: 440px;
    }*/

    .sec01-right>li:nth-child(2) {
        margin-bottom: 2%;
        /*height: 440px;*/
      /*  height: 300px;*/
        height: 100%;
    }

    .sec02-right01-view {
        margin-bottom: 2%;
        height: 440px;
    }

    .statistics>div>div {
        height: 300px;
    }

    .alert-img {
        margin: 82px auto;

    }

    .cctv>.slick-dots,
    .satellite>.slick-dots {
        right: 85px;
    }

    .accumulated-project::before {
        height: 334px;
    }

    .lpj-criterion .slick-dots {
        bottom: -1%;
    }


    .sce02-right>li:nth-child(1),
    .sce02-right>li:nth-child(3) {
        margin-right: 0;
    }

    .sce02-right>li:nth-child(1),
    .sce02-right>li:nth-child(3) {
        width: 100%;
        height: 100%;
    }

    .sce02-right>li:nth-child(1) {
        padding-bottom: 0;
        margin-bottom: 2%;
    }

    .sce02-right>li:nth-child(2) {
        padding-bottom: 0;
        height: 100%;
    }

    /*그래프*/
    .lp-graph {
        width: 100%;
        height: 300px;

    }

    .notice-rolling,
    .story-map-img-box {
        padding: 0 25px 25px 25px;
    }


    /* 모바일 항구 시작 여기~*/
   /* .m-dust-port-good {
        width: 13vw;
        height: 16vw;
        background-size: 256.3vw 159.5vw;
        background-position: 31.082% 98.25%;
    }

    .m-dust-port-ordinary {
        width: 13vw;
        height: 16vw;
        background-size: 256.3vw 159.5vw;
        background-position: 23.596% 98.25%;
    }

    .m-dust-port-bad {
        width: 13vw;
        height: 16vw;
        background-size: 256.3vw 159.5vw;
        background-position: 8.7% 98.25%;
    }

    .m-dust-port-verybad {
        width: 13vw;
        height: 16vw;
        background-size: 256.3vw 159.5vw;
        background-position: 16.1% 98.25%;
    }
    .m-dust-port-correction {
        width: 13vw;
        height: 16vw;
        background-size: 256.3vw 159.5vw;
        background-position: 1.1% 98.25%;
    }*/


    .m-dust-port-good>img,
    .m-dust-port-ordinary>img,
    .m-dust-port-bad>img,
    .m-dust-port-verybad>img,
    .m-dust-port-correction>img
    {
        width: 13.5vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
    }



    /* 모바일 항구 끝*/

    /* 미먼고침 시작 */
    .weather-bad-short,
    .weather-ordinary-short,
    .weather-good-short,
    .weather-very-bad-short,
    .weather-correction-short {
        padding-bottom: 0;
        height: 60px;
    }

    .weather-correction-long,
    .weather-very-bad-long,
    .weather-good-long,
    .weather-ordinary-long,
    .weather-bad-long {
        padding-bottom: 0;
        height: 87px !important;
    }

    .fine-dust-bad,
    .fine-dust-good,
    .fine-dust-ordinary,
    .fine-dust-verybad,
    .fine-dust-correction {
        margin-top: 0;
        width: 34px;
        height: 49px;
        background-size: 979px 629px;
    }

    .weather-good-short,
    .weather-bad-short,
    .weather-ordinary-short,
    .weather-very_bad-short,
    .weather-correction-short {
        padding-bottom: 0;
       /* height: 87px;*/
        height: 78px;
    }

    .very-bad {
        height: 88px;
    }

    .fine-dust-bad {
        background-position: 43.2% 94.214%;
    }

    .fine-dust-ordinary {
        background-position: 54.08% 94.214%;
    }

    .fine-dust-verybad {
        background-position: 48.64% 94.214%;

    }

    .fine-dust-correction {
        background-position: 37.7% 94.214%;

    }

    .weather-very-bad-short>.transverse>.fine-dust-verybad {
        margin-top: 0;
    }


    .weather-good-long>.transverse>.fine-dust-good,
    .weather-bad-long>.transverse>.fine-dust-bad,
    .weather-ordinary-long>.transverse>.fine-dust-ordinary,
    .weather-correction-long>.transverse>.fine-dust-correction {
        margin-top: 0;
    }

 /*   .m-dust-port-good,
    .m-dust-port-ordinary,
    .m-dust-port-bad,
    .m-dust-port-verybad,
    .m-dust-port-correction {
        width: 13.5vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
    }*/

    /* 미먼고침 끝 */


    .dust-day {
        padding-top: 0;
    }

    .transverse {
        flex-direction: row;
    }

    .sce02-right>li:nth-child(4) {
        width: 100%;
    }

    .sce02-right>li:nth-child(3),
    .sce02-right>li:nth-child(4) {
        margin-top: 0;
    }

    .sce02-right>li:nth-child(3) {
        margin-bottom: 2%;
    }

    /* 시간버튼 */

    /* 슬라이드 3번째  */
    .sec03-right>li {
        width: 100%;
        height: 100%;
    }

    .sec03-right>li:nth-child(1) {
        margin-bottom: 2%;
    }

    .news-list li {
        font-size: 15px;
    }

    .news-rolling {
        height: 100%;
        padding-bottom: 25px;
    }


    /*하단 타겟, 툴팁 명시된 bar 조절*/
    .inner-header-group {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .button-wrapper {
        flex: 0 0 160px; /* 고정 너비, 필요에 따라 조절 */
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .sd-header {
        flex: 1 1 auto; /* 남은 공간 차지 */
        display: flex;
        margin-right:10px;
        gap: 10px;
        min-width: 0; /* 텍스트 오버플로우 방지 */
    }


    /*푸터*/

    .footer-text-middle {
        flex-wrap: wrap;
    }

    .footer-text-middle>ul>li>span {
        width: 115px;
    }

    .footer-text-middle>ul {
        width: 100%;
    }

    .footer-text-middle>ul:nth-child(1) {
        padding-bottom: 20px;
    }

    .footer-text-middle>ul:nth-child(1) {
        border-bottom: 1px dotted rgba(255, 255, 255, 0.11);
    }

    .footer-text-middle>ul:nth-child(2) {
        margin-top: 20px;
    }

    .top-box {
        right: 5vw;
        top: auto;
        bottom: 72px;
    }
}

@media (max-width: 920px) {
    .inner-header-group {
        display: flex;
        align-items: center;
        justify-content: space-between; /* 양 끝 배치 + 중간 여백 확보 */
        padding: 0 10px; /* 좌우 여백 약간 */
        max-width: 100%;
    }

    .sd-header {
        display: flex;
        gap: 0px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        margin-right: 53px;
        flex-wrap: nowrap;
    }

    .button-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0; /* 줄어들지 않고 최소 크기 유지 */
        min-width: 120px; /* 버튼 영역 최소 너비 */
        transform-origin: right;
    }
}

@media (max-width: 768px) {

    .cctv-information-top,
    .satellite-information-top,
    .cctv-information-bottom,
    .satellite-information-bottom {
        padding: 30px;
    }

    .cctv,
    .satellite,
    .cctv img,
    .satellite img {
        height: 207px;
    }

    .cctv-satellite>li {
        height: 297px;
    }

    .activity>div,
    .area>div,
    .collection>div {
        font-size: 5.8vw;
    }

    .activity>div>p,
    .area>div>p,
    .collection>div>p {
        font-size: 3vw;
    }

    .sec01-right>li:nth-child(1),
    .sec01-right>li:nth-child(2) {
        margin-bottom: 3%;
    }

    .current {
        padding: 0 0 25px 0;
    }

    .cumulative-membership>p,
    .accumulated-project>p {
        padding-top: 24px;
    }

    .living-project-services-more {
        margin: 40px 25px 0 25px;
    }

/*    .right>li:nth-child(2) {
        height: 341px;
    }*/

    .sce01-right>li:nth-child(2),
    .sce02-right>li:nth-child(2) {
        height: 341px;
    }

    .statistics>div>div {
        height: 200px;
    }

    .alert-img {
        margin: 55px auto;
    }

    .sce02-right>li:nth-child(2) {
        height: 100%;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(2),
    .cctv-satellite>li:nth-child(3) {
        margin-bottom: 3%;
    }

    .accumulated-project::before {
        height: 240px;
    }

    .sce02-right>li:nth-child(1),
    .sce02-right>li:nth-child(2),
    .sce02-right>li:nth-child(3) {
        margin-bottom: 3%;
    }

    .inner-header-group {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        width: 100%;
    }

    .sd-header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 150%;
        max-width: 100%;
        margin: 0 auto;
    }

    .sd-header > li {
        white-space: nowrap;
        margin: 0 6px;
    }

    .button-wrapper {
        display: none !important;
    }

    .button-box {
        display: none;
    }

    .lp-graph {
        width: 100%;
        height: 260px;

    }
    /* 슬라이드 3번째  */

    .sec03-right>li:nth-child(1) {
        margin-bottom: 3%;
    }

    .sec03-right>li:nth-child(3),
    .sec03-right>li:nth-child(4) {
        margin-top: 3%;
    }

    .message-box {
        width: 391px;
    }


    /*폭죽 반응형 768px*/
    .popup {
        width: 70%;
    }

    .slider_popup {
        width: 100%;
        display: block;
    }

    .popup-content {
        width: 100%;
    }

    .popup-content1,
    .popup-content2 {
        width: 100%;
    }

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

    .slide-item>img {
        max-width: 100% !important;
        height: auto;
        display: block;
    }

    .main-popup-close-btn>button>img {
        width: 40px;
        height: 40px;
    }

    .firecracker1 {
        left: -28%;
        bottom: 78%;
    }

    .firecracker1>img {
        width: 37vw;
    }

    .firecracker2 {
        right: -15%;
        bottom: -13%;
    }

    .firecracker2>img {
        width: 28vw;
    }


}


/*푸터*/
@media (max-width: 765px) {
    .flow-banner .list > li {
        font-size: 14px;
        padding: 5px;
    }

    .list > li:nth-child(1) {
        height: 18px;
        background-size: 287px 259px;
    }

    .list > li:nth-child(2) {
        width: 126px;
        margin-top: 5px;
        background-size: 287px 259px;
    }

    .list > li:nth-child(3) {
        width: 105px;
        margin-top: 5px;
        background-size: 287px 259px;
    }

    .list > li:nth-child(4) {
        /* background-size: 287px 259px;*/
        width: 98px;
        background-size: 95px 24px;
    }

    .list > li:nth-child(5) {
        height: 23px;
        background-position: 101.833% 4.623%;
        background-size: 287px 259px;
        /*margin-top: 0;*/
        margin: 0 10px;
    }

    /* .list > li:nth-child(6) {
         background-size: 287px 259px;
         margin: 2px 0 0 -1px;
         background-position: -27.048% 3.226%;
         width: 162px;
     }

     .list > li:nth-child(7) {
         margin: 6px 33px 0 0px;
         background-size: 287px 259px;
         background-position: -30.34% 23.404%;
     }

     .list > li:nth-child(8) {
         width: 111px;
         height: 26px;
         margin-top: 0;
     }*/

    .list > li:nth-child(6) {
        background-size: 144px 25px;
        margin: 5px 20px 0 20px;
        background-position: 0;
        width: 145px;
    }

    .list > li:nth-child(7) {
        background-size: 138px 26px;
        margin: 5px 3px 0 3px;
        background-position: 0;
    }

    .list > li:nth-child(8) {
        width: 111px;
        height: 26px;
        margin: 0 0 0 23px;
    }

    .list > li:nth-child(9) {
        background-position: -6.782% 40.83%;
        background-size: 287px 259px;
        margin: 7px 0 0 27px;
    }

    .list > li:nth-child(10) {
        /*     margin: 5px 40px 0 36px;
             background-size: 287px 259px;*/
        width: 98px;
        background-size: 83px 24px;
        /*    margin: 6px 46px 0 15px;*/
        margin: 6px 35px 0 5px;
    }

    /*  .top-box {
          top: 16px;
      }
  */

    .footer-text-top>li>a {
        font-size: 15px;
        word-break: keep-all;
    }

    .footer-text-top>li:nth-child(2)>a {
        /*margin-left: 90px;*/
    }

    .footer-text-top>li:nth-child(1)::before {
        height: 14px;
    }

    .footer-text-middle {
        padding: 15px 0;
    }

    .footer-text-top {
        padding: 17px 0;
    }

    .footer-text-middle>ul {
        width: 100%;
        padding-bottom: 15px;
    }

    /*   .footer-text-middle>ul:nth-child(2) {
           padding-top: 15px;
           border-top: 1px dotted rgba(255, 255, 255, 0.11);
           border-bottom: 1px dotted rgba(255, 255, 255, 0.11);
       }*/

    .footer-text-middle>ul:nth-child(3) {
        padding-top: 15px;
    }

    .footer-text-middle>ul>li>span,
    .footer-text-middle>ul>li>p {
        font-size: 15px;
    }

    .footer-text-middle>ul>li {
        padding-bottom: 10px;
    }

    .footer-text-bottom {
        font-size: 14px;
    }


}



@media (max-width: 550px)  {
    /*   .news-list li {
           font-size: 13px;
       }*/
    .news-list li {
        font-size: 14px;
    }

    .news-list li a {
        font-size: 14px;
    }
}

@media (max-width: 510px) {

    .m-sec01-title01,
    .m-sec01-title02,
    .m-sec02-title01,
    .m-sec03-title01{
       /* font-size: 4.8vw;*/
        font-size: 4.5vw;
    }

    .m-sec02-title1 {
        font-size: 4.5vw;
    }

    .cctv-satellite>li>p {
        font-size: 16px;
    }

    .cctv-information-top,
    .satellite-information-top,
    .cctv-information-bottom,
    .satellite-information-bottom {
        padding: 15px;
    }

    .cctv,
    .satellite,
    .cctv img,
    .satellite img {
        height: 145px;
    }

    .cctv-satellite>li {
        height: 228px;
    }

    .left-title h2,
    .right-title h2,
    .m-dust02-view-title h2 {
        font-size: 16px;
    }

    .day>a {
        font-size: 14px;
    }

    .cctv>.slick-dots,
    .satellite>.slick-dots {
        width: 34%;
        left: 5px;
    }

    .alert-img {
        margin: 23px auto;
    }

    .sec01-right>li:nth-child(1),
    .sec01-right>li:nth-child(2) {
        margin-bottom: 5%;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(2),
    .cctv-satellite>li:nth-child(3) {
        margin-bottom: 5%;
    }

    .sce02-right>li:nth-child(1),
    .sce02-right>li:nth-child(2),
    .sce02-right>li:nth-child(3) {
        margin-bottom: 5%;
    }

    .current>li {
        border-radius: 5px;
        height: 55px;
    }

    .living-project-services-more {
        height: 45px !important;
        margin: 30px 25px 0 25px;
    }

    .living-project-services-more>button>a {
        font-size: 15px;
        line-height: 45px;
    }

    .sec01-right>li:nth-child(1) {
       /* height: 218px;*/
        height: 227px;
    }

 /*   .right>li:nth-child(2) {
        height: 300px;
    }*/

    .sce01-right>li:nth-child(2),
    .sce02-right>li:nth-child(2) {
        height: 300px;
    }


    .statistics>div>div {
        height: 177px;
    }

    .day {
        padding-top: 2px;
    }

    .accumulated-project::before {
        height: 213px;
    }

    .sce02-right>li:nth-child(2) {
        height: 100%;
    }

    .port-dust-services-more {
        height: 45px;
        border-radius: 5px;
        line-height: 45px;

    }

    .port-dust-services-more>button>a {
        font-size: 15px;
        line-height: 45px;
    }

    .cumulative-membership>p,
    .accumulated-project>p {
        padding-top: 18px;
    }
    .dust-map-height {
        height: 308px;
    }
    .sce02-right>li:nth-child(4) {
        height: 392px;
    }


    .lp-graph {
        width: 100%;
        height: 240px;
        top: -10px;
    }
    /* 슬라이드 3번째  */

    .sec03-right>li:nth-child(1) {
        margin-bottom: 5%;
    }

    .sec03-right>li:nth-child(3),
    .sec03-right>li:nth-child(4) {
        margin-top: 5%;
    }

    .message-box {
        width: 55%;
    }

    .more-view {
        font-size: 0.9rem;
        padding: 0 0 0 15px;
    }

    .news-list li p {
        width: 84%;
        font-size: 14px;
    }

    .content {
        font-size: 17px;
    }
    /*
        .content.active {
            font-size: 17px;
        }*/

    .content.active>a {
        font-size: 15px;
    }

    .news-container {
        padding-bottom: 0;
        height: 138px
    }

    /*폭죽 반응형 510px*/
    .popup {
        width: 80%;
        padding: 10px;
    }
    .firecracker1 {
        left: -19%;
    }

    .main-popup-close-btn {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .main-popup-close-btn>button>img {
        width: 8vw;
        height: 8vw;
    }


    /*푸터*/
    .footer-text-middle>ul>li>span {
        width: 28%;
    }
    .busan-box {
        flex-direction: column;
    }
    .busan-box>img {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .top-box {
        bottom: 111px;
    }

}





@media (max-width: 480px) {

    .sd-header>li>a {
        font-size: 13px !important;
    }


    .activity>div,
    .area>div,
    .collection>div {
        font-size: 7vw;
    }

    .cctv-information-top>div,
    .satellite-information-top>div,
    .cctv-information-bottom>div,
    .satellite-information-bottom>div {
        font-size: 5vw;
        line-height: 17px;
    }

    .cctv-information-bottom>p,
    .satellite-information-bottom>p {
        word-break: keep-all;
        line-height: 26px;
    }

    .cctv-information-top,
    .satellite-information-top,
    .cctv-information-bottom,
    .satellite-information-bottom {
        padding: 16px 0;
    }

    .cctv-information-top>p,
    .satellite-information-top>p,
    .cctv-information-bottom>p,
    .satellite-information-bottom>p {
        font-size: 15px;
    }

    .cctv-information-top>div>p,
    .in-debris>p {
        font-size: 14px;
    }

    .cctv-information-top,
    .satellite-information-top {
        height: 30px;
    }

    .cctv-information-bottom,
    .satellite-information-bottom {
        height: 47px;
    }

    .cctv-satellite>li {
        height: 213px;
    }

    .cctv-satellite>li:nth-child(1),
    .cctv-satellite>li:nth-child(2),
    .cctv-satellite>li:nth-child(3) {
        padding: 20px 15px 22px 15px !important;
    }

    .sec01-right>.right01-view>.right-title,
    .sec01-right>.right02-view>.right-title,
    .sec01-right>.right03-view>.right-title {
        padding: 20px 15px 22px 15px;
    }

    .right-title,
    .m-dust02-view-title {
        padding: 25px 15px 15px 15px;
    }

    .m-port-dust {
        margin: 0 15px 30px 15px;
    }

    .port-dust-services-more,
    .dust-box {
        margin: 0 15px 15px 15px;
    }

    .forecast {
        margin: 15px 0 0 0;
    }

    .notice-rolling {
        padding: 0 15px 15px 15px;
    }

    .dust-map-height {
        margin: 0 15px 0 15px;
    }

    .current>li>p,
    .cumulative-membership>p,
    .accumulated-project>p,
    .purification-criteria-title>p,
    .collection-criteria-title>p,
    .lpj-list>li>p,
    .lpj-list>li>span {
        font-size: 14px;
    }

    .lpj-list>li>span {
        color: #999;
        font-weight: 600;
    }

    .statistics,
    .lpj-criterion {
        flex-direction: column;
    }

    .statistics>div,
    .lpj-criterion>div {
        width: 100%;
    }

    .right>li:nth-child(2) {
        height: 100%;
    }

    .cumulative-membership>p,
    .accumulated-project>p {
        padding-bottom: 15px;
    }

    .sec01-right>li:nth-child(1) {
      /*  height: 209px;*/
        height: 219px;
    }

    .living-project-services-more {
        margin: 30px 4% 0 4%;
    }

    .statistics>div>div {
        border-radius: 10px;
        border: 1px solid #ccc;
        background-color: #f0f0f0;
    }

    .cumulative-membership>p,
    .accumulated-project>p {
        display: none;
    }

    .cumulative-membership-sm-title,
    .accumulated-project-sm-title {
        display: block !important;
        font-weight: 600;
        font-size: 14px;
        padding: 12px 0 0 12px;
    }

    .cumulative-membership {
        margin-bottom: 4%;
    }

    .statistics,
    .lpj-criterion {
        padding: 0 4% 4% 4%;
    }

    .right>li:nth-child(3) {
        /*height: 100%;*/
        height: auto;
    }

    .collection-criteria {
       /* margin-top: 7%;*/
        margin-top: 4%;
    }

    .purification-criteria,
    .collection-criteria {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 23px 15px 0 15px;
        box-sizing: border-box;
    }

    .lpj-list>li:last-child {
        border-bottom: 0;
    }

    .m-port-dust>li {
        border-radius: 10px;
    }

    .m-port-dust>li>p {
        top: 10px;
        left: 10px;
        font-size: 14px;
    }

    .m-port-name {
        font-size: 15px;
        top: 72%;
    }

    .m-port-name>span {
        font-size: 15px;
        width: 53px;
        height: 32px;
        line-height: 32px;
    }

    .fine-dust,
    .forecast {
        padding: 0 15px 15px 15px;
    }

    .notices {
        width: 69%;
    }

    .notices li {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content {
        font-size: 15px !important;
    }

    .wrap {
        position: relative;
    }

    .slid-header {
        position: absolute !important;
        top: 59px;
        right: 0;
        width: 100%;
    }

    /* .slid_header_top {
      margin-top: 60px;
      display: block !important;
   }
   .slid-header-bottom {
      display: none !important;
   } */
    .slid-header {
        padding: 20px 5px;
    }

    .sec01,
    .sec02.
   .sec03 {
        padding: 120px 20px 0px 20px;
    }

    .accumulated-project::before {
        display: none;
    }

    .sce02-right>li:nth-child(4) {
        /*height: 384px;*/
        height: 380px;
    }
    .lp-graph {
        width: 100%;
        height: 185px;
    }
    /* 미세먼지 버튼 시작 */
    #m-dust-pm {  /*여기 수정*/
        margin: 0;
    }
    .blue-btn,
    .gray-btn
    {
        line-height: 36px;
        height: 35px;
    }
    /* 미세먼지 버튼 끝 */


    /* 슬라이드 3번째  */
    .percentage-marine-industries-m-content,
    .daily-life-importance-survey,
    .marine-sustainability,
    .story-map-img-box {
        padding: 0 15px 15px 15px;
    }

    .marine-sustainability>img,
    .story-map-img-a>img{
        width: 100% !important;
    }


    /*추가*/
    .m-sec01-title01,
    .m-sec02-title1,
    .m-sec03-title01  {
        padding: 53px 0 20px 0;
    }
    .dust2-btn {
        padding: 45px 0 0 0;
    }
    .dust-button {
        margin-left: 5px;
    }
    .dust-button {
        padding: 0 9px;
    }

/*    .news-list li {
        font-size: 9px;
    }*/

    .news-rolling {
        padding: 0 15px 15px 15px;
    }


    /*푸터*/
    .top-box {
        /*  bottom: 42px;*/
        border-radius: 115px;
        width: 50px;
        height: 50px;
    }

    .top {
        padding: 16px 10px;
        font-size: 15px;
    }

    .flow-banner .list {
        margin-top: 0;
    }

    .footer-text-middle>ul>li>span {
        width: 28%;
    }
    .footer-text-middle>ul>li>p {
        width: 72%;
    }
    /*    .inline-block {
            display: inline-block;
            content: " ";
        }*/

    .footer-text-top {
        flex-wrap: wrap;
    }


}

/* 메인페이지 하단 툴팁 아이콘 관련 속성 */
.footer-description-tooltip-wrapper {
    position: relative;
}

.footer-description-tooltip-icon {
    width: 25px;
    height: 25px;

    margin-right: 15px;
    cursor: pointer;
    display: inline-block;
}

.footer-description-tooltip-box {
    background-color: #2A3D6E;
    color: #FFFFFF;
    padding: 20px 18px;
    border-radius: 4px;
    font-size: 13px;
    width: 320px;
    word-break: keep-all;
    white-space: normal;
    z-index: 9999;
    line-height: 1.2;
}

.footer-description-tooltip-box::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 20px solid #2A3D6E;
}

.footer-description-tooltip-box.left-align::after {
    left: 12px;
    right: auto;
}

.footer-description-tooltip-box.right-align::after {
    right: 12px;
    left: auto;
}


.button-wrapper {
    display: flex;
    align-items: center;
    gap: 6px; /* 간격 조정 */
}

/* 메인페이지 하단 툴팁 아이콘 관련 속성 end*/