* {
    margin: 0 auto;
    padding: 0;
}

:root {
    --boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --box-top-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25);
    --commontext: 16px;
}

@media (max-width:601px) and (min-width:390px) {
    :root {
        --commontext: 16px;
    }
}

@media (max-width:389px) and (min-width:300px) {
    :root {
        --commontext: 14px;
    }
}

.cesium-widget canvas {
    height: 100dvh !important;
}

.cesium-viewer-fullscreenContainer {
    display: none !important;
}

body p {
    margin-bottom: 0;
}

a {
    text-decoration: none;
}

ul li {
    list-style: none;
}

html body {
    height: 100dvh;
    overflow: hidden;
    background-color: #2A3037;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: var(--commontext);
}
body{
    position: relative;
}

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal {
    display: none;
}

/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    /* -webkit-text-fill-color: #fff !important; */
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    box-shadow: 0 0 0 1000px white inset;
}

p,
div,
span,
h1,
h2,
h3,
h4,
em,
button,
input {
    font-family: 'Noto Sans KR', sans-serif !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-use-select: none;
    user-select: none;
}

/* 나침반 */
div.ol-control {
    opacity: 1;
    visibility: inherit;
    display: block;
    top: 160px !important;
    right: 30px;
}

div.ol-control button .ol-compass {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='레이어_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 393 443' style='enable-background:new 0 0 393 443;' xml:space='preserve'%3E%3Cpath d='M224.2,33.2c-5-11.9-16.7-19.5-29.6-19.4s-24.5,7.8-29.4,19.7L19.9,384.9c-5.9,14.2-0.8,30.4,11.9,38.9s29.7,6.7,40.4-4.2 l123.9-125l125,123.9c10.9,10.8,27.8,12.3,40.5,3.8c12.7-8.5,17.5-24.9,11.5-39C373,383.3,224.2,33.2,224.2,33.2z'/%3E%3C/svg%3E%0A");
    background-size: cover;
    width: 15px;
    height: 15px;
}

div.ol-zoom {
    display: none !important;
}

/* .ol-rotate.ol-unselectable.ol-control.ol-hidden{
    display: none !important;
} */
#tipback {
    display: none;
    background-color: #3333338e;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 9999999999999999999999999999;
}

/* 헤더 */
header {
    /* background-color: #fff; */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
}

header svg {
    width: 80px;
}

.demo_click {
    margin-right: 40px;
}

header .logo {
    margin-left: 20px;
    cursor: pointer;
}

.demo_click button {
    font-size: 16px;
    border: none;
    background-color: transparent;
    color: #C4C4C4;
    margin-right: 20px;
    cursor: pointer;
}

.demo_click button:last-child {
    color: #4557FF;
}




#list {
    display: none;
    max-height: 190px;
    overflow: auto;
}

#list::-webkit-scrollbar {
    display: none;
}

#barTop {
    box-sizing: border-box;
    width: 100%;
    background-color: #242831;
    font-size: 17px;
    font-weight: bold;
    padding: 7px;
}

.selectBox2 * {
    box-sizing: border-box;
}

.selectBox2 {
    position: relative;

    border-radius: 4px;
    display: inline-block;

    background-size: 20px;
    cursor: pointer;
    margin: 30px;
    margin-right: 0;
}


.selectBox2 .label {
    display: flex;
    align-items: center;
    width: inherit;
    height: inherit;
    border: 0 none;
    outline: 0 none;
    background-color: transparent;
    cursor: pointer;
    color: #333;
    opacity: 0.8;
    font-size: 18px;
}

input::placeholder {
    color: #fff;
}

.ol-rotate-reset {
    display: none;
}


.optionList {
    overflow: auto;
    height: 200px;
    margin-top: 6px;

}

.optionItem>img {
    width: 30px;

}

.optionList .optionItem {

    text-align: left;
    height: 40px;
    line-height: 40px;
    padding-bottom: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}

.selectBox2 .optionList {
    position: absolute;
    width: 350px;
    top: 54px;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    list-style-type: none;
    overflow: auto;
    max-height: 0;
    transition: .3s ease-in;

}

.selectBox2 .optionList01 {
    left: -30px;
}

.optionList::-webkit-scrollbar {
    width: 2px;
}

.optionList::-webkit-scrollbar-thumb {
    background-color: rgb(206, 206, 206);
    border-radius: 50px;
}

.optionList::-webkit-scrollbar-track {
    background-color: transparent;
}

.selectBox2.active .optionList {
    max-height: 500px;
}

.addr_list {
    width: 40%;
    position: absolute;
    z-index: 999;
    /* display: flex; */
    align-items: center;


    top: 7%;
    left: 50%;
    transform: translateX(-50%);

}

.addr_list_inner {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
}

.addr_list input {
    outline: none;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
    width: 80%;
    height: 25px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 10px;
}

.addr_list span {
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.addr_list span img {
    width: 24px;
}

.marker_wrap {
    /* position: fixed; */
    z-index: 8;
    margin-top: 10px;
}

.marker_wrap02 {
    position: fixed;
    z-index: 8;
    margin-top: 10px;
}

.markerWrap {
    display: flex;
    margin-left: 0;
}

.marker_btn {
    margin-left: 0;
    margin-right: 0;
    position: relative;
    /* position: absolute;
    top: 20%;
    left: 50%;
    z-index: 1299; */
}

.marker_btn>#marker_btninner {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    /* align-items: flex-start; */
    padding: 5px 10px;
    cursor: pointer;
    height: 33px;
    box-sizing: border-box;
    margin-right: 10px;
}

.marker_btn button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
}

.marker_btn>div>p {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    margin-left: 5px;
    background-color: #242831;
}

.label_text {
    /* border: 1px solid #333; */
    display: flex;
    border-radius: 10px;
    align-items: center;
}

.addr_list input[type="button"]+span {
    display: block;
    width: 20px;
    height: 20px;
    /* padding-right: 10px; */
    /* background-image: url(../images/search.png);
    background-position: center;
    background-size: 20px; */
}

.addr_list input[type="text"]::placeholder {

    color: #333;
}

.label_btn span {
    padding-right: 10px;
}

.label_btn span img {
    width: 24px;

}

.label_btn input {
    display: none;
}

/* .info_list {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 60px;
    display: flex;
    align-items: center;
    z-index: 999999999;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
} */

.selectBox2 {
    grid-template-columns: 0 250px 50px;
    justify-content: space-between;
    align-items: center;
}

.guideBox {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: none;
}

.close_box .guideBox {
    display: none;
}

.popup_main {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, auto);
    background-color: rgb(255, 255, 255);
    padding: 20px 10px;
    box-sizing: border-box;
    height: 200px;
}

.popup_left {
    display: grid;
    grid-template-rows: repeat(3, auto);
}

.popup_left>div {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

.popup_left>div>span {
    display: block;
    width: 220px;
    font-size: 14px;
    font-weight: bold;
}

.popup_left>div>p {
    font-weight: 600;
    margin-left: 0;
    margin-right: 10px;
}

.popup_left>div b {
    font-weight: 400;
    font-size: 13px;
    margin-left: 20px;
}

.popup_right {
    display: flex;
    align-items: center;
    background-color: #383f53;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    padding: 5px 10px;
    height: 34px;
    box-sizing: border-box;
}

.popup_right p {
    color: #fff;
    margin-right: 0;
    font-size: 14px;
}

.popup_right a {
    color: #fff;
    margin-right: 0;
    font-size: 14px;
}

.popup_right img {
    width: 24px;
    height: 100%;
    margin-left: 0;
    margin-right: 5px;
}

.popup_wrap>p {
    padding-top: 30px;
    text-align: center;
    font-weight: 600;

}

.popup_wrap .popup_right p {
    padding-left: 8px;
    padding-top: 20px;

}

.popup_name {
    background-color: #383f53;
    border-radius: 8px;
    color: #fff;
    padding: 5px 10px;
    justify-content: center;
    height: 34px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
}

.popup_wrap1 {
    position: fixed;
    z-index: 99999;
    bottom: 18%;

    right: 10px;
}


.popup_wrap .popup_right01 {
    margin-bottom: 30px;
}


/* 팝업 */

.popup {
    display: none;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.popup_close {
    width: 100%;
    /* height: 24px; */
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #707070;
}

.popup_close>img {

    margin-left: 100px;
}

.popup_text {
    padding-top: 10px;
}

/* 아이콘 */

.inner_icon {
    position: absolute;
    top: 30%;
    left: 30%;
}


.ol-zoom {
    display: none;
}

.close_box {
    position: fixed;
    /* display: flex; */
    justify-content: center;
    /* align-items: center; */
    height: 25px;
    bottom: 0;
    /* left: 50%;
    transform: translateX(-50%); */
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.81); */

}

.close_box p span {
    display: flex;
    align-items: center;
    height: 25px;
    padding: 0px 7px;
    box-sizing: border-box;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgb(255, 255, 255);
    margin-top: -10px;
    cursor: pointer;
}

.close_box p span img {
    width: 20px;
}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
    /* position: absolute;
    bottom: 0; */


}

footer p {
    color: #8b8b8b;
    font-size: 10px;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
}

/* 검색 */
.addr_list {}

/* 도착지 팝업 */
.arrival {
    overflow: hidden;
    width: 350px;
    height: 65px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);

}

.arrival_inner {
    display: flex;
    align-items: center;

}

.arrival img {
    float: right;
    width: 24px;
}

.arrival_text {
    width: 55px;
    margin-left: 0;
    margin-right: 0;
}

.arrival_inner01 {
    display: grid;
    justify-content: center;
}

.arrival_inner01 p {
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.arrival_inner01 p:first-child {
    font-weight: 600;
    letter-spacing: 1px;
}

.arrival_text div {
    background-color: #242831;
    font-size: 15px;
    border-radius: 20px;
    color: #fff;
    padding: 10px;
    width: 47px;
    border: none;
    outline: none;
    font-weight: bold;
}

/* 사이드바 */
.sidebar {
    /* display: flex; */
    z-index: 1229;
    position: fixed;
    left: -411130px;
    width: 20%;
    z-index: 999;
    height: 100dvh;
    top: 0;
}

.sidebar_left {
    width: 100%;
    margin: 0;
    background-color: #fff;
}

.sidebar_right {
    display: none;
}

.sidebar_close .sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar>.addr_list {
    /* display: none; */
    background-color: #242831;
    width: 290px;
    top: 30px;
}

.sidebar_main {
    margin-bottom: 10px;



}

.arrivalContent {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.arrivalContent button {
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #999;
    border-radius: 12px;
    padding: 5px 7px;
    margin-left: 20px;
    margin-right: 0;

}

.arrivalContent select {
    border: 1px solid #999;
    border-radius: 8px;
    padding: 5px 7px;
    width: 90%;
    margin-left: 20px;
    box-sizing: border-box;
    outline: none;
    font-weight: bold;

}

.arrivalContent select option {
    font-weight: bold;
}

.route_area {
    max-height: 300px;
    overflow: auto;
}

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

.sidebar_text {

    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBEBEB;
}

.sidebar_text p {
    margin-left: 10px;
    padding: 8px;
    font-size: 14px;
}

.sidebar_text svg {
    width: 36px;
    margin-left: 10px;
    margin-right: 10px;
}

.sidebar_text img {
    margin-left: 10px;
    margin-right: 10px;
}

.sidebar .arrival1 {

    /* height: 70px; */

    margin-left: 0;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

.arrival_inner1 {
    background-color: #242831;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebebeb;

}

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

.arrival_inner1:last-child {
    border-bottom: none;
}

.sidebar .arrival1 img {
    width: 30px;
}

.sidebar .arrival1 .arrival_text1 {
    margin-left: 10px;
    margin-right: 0;

}

.arrival_inner011 {
    margin-left: 10px;
}

.arrival_inner01 p:first-child {
    margin-right: -10px;
}

.arrival_inner011 p:first-child {
    font-size: 14px;
    font-weight: 600;
}

.arrival_inner011 p:last-child {
    font-size: 12px;

}

#pc_bdNmText {
    font-size: 14px;
}

.arrival_inner011 p {
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
    /* text-align: right; */
    color: #fff;
}

.arrival_text1 div {
    background-color: rgb(255, 255, 255);
    font-size: 14px;
    border-radius: 12px;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    border: none;
    outline: none;
    margin-left: 10px;
}

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



@media(max-width:351px) {
    .LegendList350px {
        display: block;
    }

    .LegendList350px>:last-child {
        margin-top: 10px;
    }

    div.LegendListbtn button {
        width: 35px;
    }
}

.legend_wrap {
    background-color: #fff;
}

.map_title h2 {
    font-weight: 600;
    font-size: 10px;
    /* text-align: center; */
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 0;
    margin-bottom: 0;

}

.map_title02 h2 {
    font-weight: 600;
    font-size: 10px;
    /* text-align: center; */
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 0;
    margin-bottom: 0;

}

.map_inner .map_title {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    padding: 5px;
    box-sizing: border-box;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 33px;
    border: 1px solid #999;

}

.map_inner .map_title02 {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 33px;
    border: 1px solid #999;
}

.map_titlebtn svg {
    width: 10px;
    cursor: pointer;
    transform: rotate(180deg);

}

.map_titlebtn02 svg {
    width: 10px;
    cursor: pointer;
    transform: rotate(180deg);

}

.titlebtnsvg {
    transform: rotate(0deg);
}

.route_btn {
    width: 100%;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #E0E3FF;
    /* border-top: 1px solid #ebebeb; */
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
}

.route_btn button {
    background-color: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #999999;
}

.map {
    /* position: absolute; */

}


.map02 {
    /* background-color: rgb(255, 255, 255); */
    border-radius: 5px;
    width: 100px;
    max-height: 200px;
    margin: 5px;

}

.map02 .map_inner ul {
    border: 1px solid #999;
    max-height: 120px;
    overflow: hidden;
    overflow-y: auto;
    padding-top: 5px;
    background-color: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding-bottom: 5px;
    padding-left: 0;
}

.map02 .map_inner ul::-webkit-scrollbar {
    display: none;
}

.map_inner {

    /* margin-top: 5px; */
    /* margin-bottom: 10px; */


}

.map_inner ul li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;


}

.map_inner ul li span {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 5px;
    box-sizing: border-box;
}

.map_inner>div {}

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

.map_inner ul li p {
    color: #333;
    /* text-align: center; */
    font-size: 10px;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 5px;
    font-weight: 600;
    margin-right: 0;

}

/* .map02:hover .map_inner ul li p{
    width: 100%;
} */


.nav_show {
    width: 60px;
    display: block;
    cursor: pointer;
    font-size: 10px;
    color: #333;
    /* padding: 7px; */
    text-align: center;
    padding-bottom: 5px;
    box-sizing: border-box;


}




/* 침수심선 컬러 */
.LegendListcolor div span {
    display: block;
    width: 16px;
    height: 10px;
    margin: 0;
}

.LegendListcolor {
    margin-top: 5px;
}

.LegendListcolor div p {
    font-size: 10px;
    margin-left: 0;
    font-weight: bold;
    /* 범례 늘어났을 때 스크롤 */
    /* margin-right: 10px; */
}

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

.LegendListcolor .map_box1 {
    /* background-color: #f5ef2f; */
    background-color: rgb(255, 255, 127);
    text-align: start;
}

.LegendListcolor .map_box2 {
    /* background-color: #32da5c; */
    background-color: rgb(201, 237, 95);
}

.LegendListcolor .map_box3 {
    /* background-color: #3bd8f7; */
    background-color: rgb(127, 255, 191);
}

.LegendListcolor .map_box4 {
    /* background-color: #306fe5; */
    background-color: rgb(127, 200, 200);
}

.LegendListcolor .map_box5 {
    /* background-color: #333fed; */
    background-color: rgb(127, 200, 255);
}

.LegendListcolor .map_box6 {
    /* background-color: #7f7fff; */
    background-color: rgb(127, 127, 255);
}



/* 시나리오 컬러 */
.LegendListcolor .senario_box1 {
    background-color: #de6c5f;
    text-align: start;
}

.LegendListcolor .senario_box2 {
    background-color: #b6645c;
}

.LegendListcolor .senario_box3 {
    background-color: #6b2d2a;
}

.LegendListcolor .senario_box4 {
    background-color: #4e2018;
}

.LegendListcolor .senario_box5 {
    background-color: #3d1818;
}

.LegendListcolor .senario_box6 {
    background-color: #342121;
}

/* 현위치 */
.current_wrap {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 30px;
}

.current_wrap span {
    display: flex;
    align-items: center;
}

.current_wrap span img {
    width: 24px;
}

/*로딩*/
.ajax-loader {
    position: absolute;
    top: 0%;
    z-index: 9999999999;
    display: flex;
    background-color: rgba(255, 255, 255, 0.7);
    height: 100%;
    width: 100%;
    display: none;
}

.ajax-loader img {
    padding-top: 75%;
    padding-left: 38%;
    width: 100px;
}

/* 우회 경로*/

.change_popup {
    display: none;
    position: absolute;
    z-index: 9;
    background-color: rgb(255, 255, 255);
    border-radius: 12px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ebebeb;

}

.change_popup .changepopup_title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.changepopup_title p {
    padding: 10px;
    /* margin-left: 5px; */
    font-size: 16px;
    font-weight: bold;
    color: #333;
    width: 100%;
}


.change_popup .changepopup_title .x_close {
    width: 24px;
    margin-right: 0;
    cursor: pointer;
    fill: #999;
    padding: 5px;

}

.changepopup_text {
    /* padding: 5px; */
    box-sizing: border-box;
    margin-bottom: 10px;
}

.changepopup_text>p {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    padding: 10px;
}

.ExceptPath_List {
    display: flex;
    align-items: center;
    padding: 5px;
    padding-left: 10px;
    border-bottom: 1px solid #ebebeb;

}

.ExceptPath_List p {
    font-size: 14px;
    font-weight: 500;
    margin-left: 0;
    color: #333;
}

.ExceptPath_List svg {
    width: 24px;
    fill: #999;
    margin-right: 0;
    cursor: pointer;
    padding: 5px;
}

.ExceptPath_List span {
    margin-left: 0;
    margin-right: 10px;

}

.ExceptPath_List span i {
    font-size: 24px;
}

.change_popup input[type=button] {
    float: right;
    background-color: transparent;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    padding: 3px 7px;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 12px;
    color: #5e5e5e;
}

/* 사이드바 탭메뉴 */
.side_tab {
    display: flex;
    padding-top: 10px;
    /* padding-bottom: 10px; */
}

.side_tab button {
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    padding: 5px;
    width: 20%;
    background-color: transparent;
    border: 1px solid #ebebeb;
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #333;
    margin-left: 10px;
    margin-right: 5px;
    height: 34px;
    box-sizing: border-box;

}

.side_tabButton {
    background-color: #242831 !important;
    border: none !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    color: #fff !important;

}

.arrivalWrap {
    position: relative;
    width: 80%;
    background-color: #Fff;
}

.arrivaltitle {
    margin-top: 0;
    /* background-color: #DCEDFF; */
}

.arrivalInner>div>div,
.arrivaltitle {
    display: flex;
    align-items: center;
}

.arrivalInner>div>div {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #DFDEE3;
}

.arrivalmain {
    padding-top: 5px;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #DFDEE3;
    padding-bottom: 10px;
    /* flex-direction: column;
    display: flex; */
}

.arrivalNav {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #DFDEE3;
}

.arrivalmain p {
    background-color: #EEEFF4;
    border-radius: 5px;
    padding: 10px 0;
    padding-left: 25px;
    width: 90%;
    margin-top: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* margin-left: 10px; */
}

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

.arrivalmain input {
    background-color: #fff;
    border-radius: 15px;
    border: none;
    outline: none;
    padding: 5px 10px;
    width: 90%;
    margin: 5px auto;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;


}

.arrivalmain input::placeholder {
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

.arrivaldistance {
    width: 30%;
    margin: 0;

}

div.arrivaldistance p {
    text-align: center;
    color: #333;
    font-size: 18px;
}

.arrivalInner {
    max-height: 30%;
    overflow: auto;
    width: 95%;
}

.arrivalInner::-webkit-scrollbar {
    background-color: #eeeeee;
    width: 3px;
    border-radius: 8px;
}

.arrivalInner::-webkit-scrollbar-thumb {
    background-color: rgb(36, 150, 255);
}

.arrivalInner>div {}

.arrivaltitle p {
    font-weight: 500;
    font-size: 18px;

}

.arrivalInner div p {
    font-size: 14px;
    font-weight: 500;
}

.arrivalInner div span {
    display: flex;
    margin-left: 0;
    margin-right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #333;
}

.arrivalInner div p {
    margin-left: 0;
}

.arrivaltitle svg {
    margin: 0;
}

.arrivalInner svg,
.arrivalInner img {
    height: 32px;
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
}


@media (min-width:601px) and (max-width:1536px) {

    div.safety_btn p,
    div.safety_btn01 p,
    .popup_right a {
        font-size: 12px;
    }

    .safety_btn,
    .popup_right {
        height: 29px;
        box-sizing: border-box;
    }

    .change_popup {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
    }

    header {
        display: none;
    }

    .info_list .logo {
        width: 2%;
    }

    .info_list {
        display: flex;
        align-items: center;
        top: 2% !important;
    }

    .info_list_wrap {
        width: 100%;
    }

    .search_list {
        width: 100% !important;
    }

    .info_list>.logo {
        margin-left: 0;
        margin-right: 10px;
    }

    .info_list>.logo svg {
        width: 100%;

    }

    .info_list {
        width: 80% !important;
    }

    .sidebar_close {
        top: 10%;
        z-index: 11;
        left: 440px;
    }

    .sidebar_main {
        max-height: 550px;
    }

    .guideBox {
        display: inherit;
    }

    .close_box {
        display: flex;
    }

    .addr_list {
        /* width: 700px; */
        top: 80px;
        justify-content: center;

    }

    .selectBox2 .optionList {
        width: 700px;
        left: -214px;


    }

    .selectBox2 .optionList li {
        width: 300px;
        padding-left: 100px;
    }


}

@media (min-width:1900px) {}

/* 

@media (max-width:769px) {
    .addr_list {
        width: 600px;
        justify-content: center;

    }

    .selectBox2 .optionList {
        width: 600px;
        left: -164px;

    }

    .selectBox2 .optionList li {
        width: 300px;
        padding-left: 100px;
    }
} */

@media (max-width:600px) {
    .change_popup {
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    .ol-hidden {
        display: none !important;
    }

    div.ol-control {
        position: fixed;
        top: 75px !important;
        opacity: 1;
        visibility: inherit;
        display: block;
        right: 30px;
    }



    .changepopup_title p {
        font-size: 14px;
    }

    .changepopup_text>p,
    .ExceptPath_List p {
        font-size: 12px;
    }

    .arrival_inner011 p {
        width: 200px;
    }

    .current_wrap {
        margin-bottom: 10px;
    }

    header {
        display: none;
    }

    .info_list .logo {}

    .info_list_wrap {
        width: 100%;
    }

    .info_list>.logo {
        margin-left: 0;
        margin-right: 10px;
    }

    .info_list>.logo svg {
        width: 100px;

    }

    .sidebar_text p {
        font-size: 12px;
    }

    .info_list {
        top: 25px !important;
        width: 90% !important;
    }

    .sidebar_close {
        top: 12%;
        z-index: 11;
        right: 0;
        left: inherit;
    }

    .arrival_inner1 {
        /* width: 310px; */
    }

    .sidebar {
        width: 90%;
        top: 0;
        background-color: #fff;
        left: -600px;
    }

    .sidebar_left {
        width: 80%;
    }

    .sidebar_right {
        width: 20%;
        background-color: transparent;
    }

    .guideBox {
        display: inherit;
    }

    .close_box {
        bottom: 190px;
        display: flex;
    }

    .addr_list {
        top: 9%;
        width: 350px;
        justify-content: center;

    }

    article.scalebarpopup {
        display: block;
        bottom: 70px;
    }

    .selectBox2 .optionList {
        width: 350px;
        left: -40px;

    }

    .selectBox2 .optionList li {
        width: 200px;
        padding: 20px;
        margin-right: 40px;

    }

    .side_tab button {
        font-size: 12px;
    }
}

@media (max-width:350px) {
    .guideBox {
        display: inherit;
    }

    .popup_left>p {
        width: 250px;
        box-sizing: border-box;
        padding-bottom: 10px;
    }

    .addr_list {
        width: 270px;
        justify-content: center;

    }

    .selectBox2 .optionList {
        width: 270px;
        left: -40px;

    }

    .selectBox2 .optionList01 {}

    .selectBox2 .optionList li {
        width: 200px;
        padding: 20px;
        margin-right: 15px;

    }

    .selectBox2 {
        grid-template-columns: 0 160px 60px;


    }
}




/* 기능 선택 */
.info_list {
    width: 40%;
    z-index: 999999;
    position: fixed;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.logo i {
    cursor: pointer;
    padding: 5px;
}

.search_box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-left: 0;
    width: 100%;
}

.search_wrap {
    display: flex;
}

.goAddrRoute_box {
    width: 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #383f53;
    border-radius: 6px;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
    box-sizing: border-box;
}

.goAddrRoute_box img {
    width: 24px
}

.goAddrRoute_box p {
    color: #fff;
    font-size: 14px;
}

.search_content {
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 0;
    width: 100%;
    /* border: 1px solid #EBEBEB; */
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}

.search_box .searchBtn {
    margin-left: 5px;
    margin-right: 5px;
    width: 16px;
    fill: #999999;
    cursor: pointer;
}

.search_box input {
    margin-left: 0;
    background-color: transparent;
    border: none;
    outline: none;
    color: #999999;
    width: 90%;
    font-size: 12px;
}

.search_box input::placeholder {
    color: #999;
}

.search_box .arrow_bottom {
    margin-right: 5px;
    width: 16px;
    fill: #999999;
    cursor: pointer;

}

.css-2xbrrz {
    /* display: block; */
    margin: 8px 0;
}

.kakaoButton {
    position: relative;
    background: #f7e317;
    color: #3c1e1e;
    font-size: 16px;
    font-weight: 700;
    -webkit-letter-spacing: -0.28px;
    -moz-letter-spacing: -0.28px;
    -ms-letter-spacing: -0.28px;
    letter-spacing: -0.28px;
    text-align: center;
    width: 203.5px;
    padding: 10px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.naverButton {
    position: relative;
    background: #03C75A;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    -webkit-letter-spacing: -0.28px;
    -moz-letter-spacing: -0.28px;
    -ms-letter-spacing: -0.28px;
    letter-spacing: -0.28px;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


button,
html [type="button"] {
    appearance: initial;
}

.css-rwni4d {
    width: 20px;
    position: absolute;
    top: 2px;
    left: 16px;
}

.login {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 999999999;
    background-color: rgba(51, 51, 51, 0.5);
}

.login_inner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 8px;
    width: 350px;
    padding: 10px;
    box-sizing: border-box;
}

.login_inner ul div,
.login_inner ul li {
    display: flex;
    align-items: center;
}

.login_title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.login_title h2 {
    font-size: 16px;
    margin-left: 0;
}

.login_title i {
    font-size: 22px;
    margin-right: 0;
    cursor: pointer;
    padding: 5px;
    padding-bottom: 0;
}

/* 헤더 반응형 */
/* 태블릿 */
@media (max-width:1536px) and (min-width:601px) {
    .search_box {
        /* display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 20px; */
        padding: 5px;
    }

    .goAddrRoute_box {
        width: 90px;
        padding: 3px;
    }

    .selectedAreaList {
        top: 62px !important;
    }

    .search_content {
        width: 100%;
    }

    .selectedAreaWrap {
        width: 100% !important;
    }
}

/* 모바일 */
@media (max-width:600px) {
    .login_inner {
        width: 100%;
        top: auto;
        bottom: 0;
        border-radius: 0;
        left: 0;
        transform: translate(0, 0);
    }

    .login_title h2 {
        font-size: 14px;
    }

    .goAddrRoute_box p {
        font-size: 10px;
        text-align: center;
    }

    .goAddrRoute_box img {
        width: 16px;
    }
}

/* 지역선택 */
.selectedAreaWrap {
    width: 18%;
    position: relative;
}

.selectedAreaInner {

    border: 1px solid #EBEBEB;
    border-radius: 8px;

}

.selectedArea {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
}

.selectedArea button {
    background-color: transparent;
    border: none;
    outline: none;
    margin-left: 0;
    font-size: 14px;
    color: #999;
}

.selectedAreaList {
    display: none;
    position: absolute;
    width: 100%;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 8px;
    /* display: flex; */

}

.selectedAreaList ul li {
    font-size: 14px;
    color: #999;
    padding: 5px;
    cursor: pointer;
}

.selectedArea_inner {
    padding-top: 10px;
    width: 33%;
    text-align: center;
    border-right: 1px solid #EBEBEB;
}

.selectedArea_inner:last-child {
    border: none;
}

.selectedArea_inner ul {}

/* 기능 검색어 출력  */

.search_list {
    position: absolute;
    z-index: 999;
    width: 100%;
    display: none;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(153, 153, 153, 0.205);

}

.search_list div {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    padding-top: 10px;
    padding-bottom: 10px;

}

.search_list div p {
    color: #5e5e5e;
    margin-left: 10px;

}

.searchlistcontent {
    cursor: pointer;
}


.searchListClose {
    width: 5%;
    /* margin-right: 0; */
    text-align: center;
}

.searchListClose_btn {
    width: 16px;
    fill: #999999;
    cursor: pointer;
    margin-top: 10px;
}




.listColor {
    color: #4557FF !important;
    background-color: #F1F3FF;
    font-weight: bold;
}


/* 안전대피요령 버튼 */
.safetywrap {
    position: fixed;
    bottom: 70px;
    left: 10px;
    z-index: 1;
}

.safety_btn {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 10px;
}



.safety_btn svg {
    height: 16px;
    margin-left: 0;
    margin-right: 5px;

}

/* .btn-light{
    background-color: #F1F3FF !important;
} */

div.safety_btn01 p {
    color: #333;
}

.safetywrap .safety_btn01 p {
    color: #333;
}

.safety_btn01 svg .st0 {
    stroke: #333;
    fill: transparent;
}

.safety_btn p {
    color: #4557FF;
    font-size: 10px;
}

/* 안전대피요령 팝업 */
/* .safetypopup{
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0%;
    z-index: 999999999;
    background-color: rgba(0, 0, 0, 0.301);
} */
.safetypopup_wrap {
    /* display: none; */
    /* padding: 10px; */
    /* width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box; */
}

.safetypopup_inner {
    display: flex;
    align-items: center;
    background-color: #242831;
    padding: 10px;
}

.safetypopup_inner p {
    color: #fff;
    font-weight: 600;
    margin-left: 0;


}

.safetypopup_inner svg {
    margin-top: 0;
    fill: #999;
    margin-right: 0;
}

.safety_contWrap {
    overflow: auto;
}

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

.safety_title {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
}

.safety_title .safetypanelClose img {
    width: 40px;
    padding: 5px;
    margin-right: 10px;
}

.safetypanelClose {
    margin-right: 0;
}

.safetytitle_inner span {
    color: #fff;
    font-size: 16px;



}

.safetytitle_inner {
    margin-left: 0;
    margin-right: 10px;
}

.safetytitle_backg {
    background-color: #E2372B;
    border-radius: 8px;
    padding: 10px;

}

.safetytitle_inner span em {
    font-size: 12px;
    display: block;
    color: rgb(180, 180, 180);
    font-style: normal;
}

.safetytitle_inner p {
    color: #333;
    font-weight: bold;
}


.safety_content {}

.safety_content p {
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;
    padding-top: 5px;
    padding-bottom: 5px;
}

.safety_content span {
    display: block;
    color: #585858;
    font-size: 14px;
    padding-left: 5px;
    padding-left: 5px;
    border-bottom: 1px solid #ebebeb;
    padding-top: 5px;
    padding-bottom: 5px;
}

.popup_info p {
    color: red;
}

/* 위험정보 */
.marker_set {
    display: none;
    width: 30%;
    border: 1px solid rgb(189, 189, 189);
    position: fixed;
    top: 30%;
    left: 35%;
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 12px;
    z-index: 99999999;
}

.markerSet_back img {
    width: 100%;
    display: none;
}

.markerSet_scroll {
    max-height: 600px;
    overflow: auto;
}

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

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

.markerSet_title #markerList_Btn {
    display: none;
}

.markerSet_title p {
    margin-left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.markerSet_title svg {
    width: 16px;
    fill: #999;
    margin-right: 0;
    margin-left: 20px;
    cursor: pointer;
    padding: 5px;
    padding-top: 0;
}

.login_statsWrap {
    margin-right: 0;
}

.login_statsWrap .login_stats {
    position: relative;
}

.login_hover {
    display: none;
    position: absolute;
    width: 120px;
    bottom: -90px;
    z-index: 999;
    left: -47px;
    background-color: #f9f5ec;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.login_hover div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.login_hover div svg {
    margin-left: 5px;
    margin-right: 0;
    padding: 0;
    fill: transparent;
}

.login_hover div p {
    margin-left: 5px;
    font-size: 14px;
}

.login_statsWrap .login_stats i {
    background-color: #f9f5ec;
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 7px;
    cursor: pointer;
}

.markerSet_select {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: transparent;

}

.markerSet_select p {
    margin-left: 0;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.markerSet_select select {
    width: 80%;
    font-size: 14px;
    border-radius: 10px;
    padding: 5px;
    margin-right: 0;
    outline: none;
    cursor: pointer;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #999;
    font-size: 12px;

}

.markerSet_content {
    margin-bottom: 10px;
}

.markerSet_content p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.markerSet_content textarea {
    width: 100% !important;
    /* height: 117px; */
    outline: none;
    color: #333;
    font-size: 14px;
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
}

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

.markerSetContent p {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-left: 0;
}

.markerSetContent input[type=datetime-local] {
    width: 40%;
    font-size: 14px;
    border-radius: 10px;
    padding: 5px;
    margin-left: inherit;
    margin-right: 0 !important;
    outline: none;
    cursor: pointer;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #999;
    font-size: 12px;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.markerSet_img {
    margin-top: 20px;
    display: flex;
}

.markerSet_img button {
    margin-right: 0;
    font-size: 14px;
    background-color: rgb(77, 77, 255);
    border-radius: 8px;
    border: none;
    color: #fff;
    padding: 3px 10px;
    cursor: pointer;
}

.markerSet_img button:last-child {
    margin-left: 10px;
}

.markerSet_img i {
    margin-right: 0;
    color: #333;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.marker_search {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

}

.marker_search p {
    margin-left: 0;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.marker_search span {
    margin-left: 0;
    font-size: 12px;
    color: rgb(117, 117, 117);
    font-weight: 500;
}

.marker_search .search_content {
    border: 1px solid #999;
    width: 80%;
    margin-left: inherit;
    margin-right: 0;
    position: relative;
}

.marker_search svg {
    width: 16px;
    margin-right: 0;
    fill: #999;
    cursor: pointer;
}

.marker_search svg:nth-child(1) {
    width: 12px;
    margin-left: 0;
    margin-right: 10px;
}

.marker_search .search_content input[type=text] {
    border: none;
    outline: none;
    width: 88%;
    margin-left: 0;
    font-size: 12px;
}

.marker_search .search_content input[type=text]::placeholder {
    color: #999;
}

.marker_searchBox {
    display: none;
    position: absolute;
    top: 110%;
    background-color: #fff;
    width: 100%;
    left: 0;
    border: 1px solid #999;
    border-radius: 10px;
}

.marker_searchText {
    margin-left: 0;
}

.marker_searchBox>div {
    display: flex;
    align-items: flex-start;
    padding-top: 5px;
    cursor: pointer;

}

.marker_searchBox div img {
    width: 16px;
    margin-left: 3px;
    margin-right: 5px;
}

.markerBtn button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
}

.markerBtn>p {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    margin-left: 5px;
    background-color: #242831;
}

.markerBtn img {
    width: 16px;
    margin-left: 5px;
}

.marker_btn>div>svg,
.marker_btn>div>img {
    width: 16px;
    margin-left: 5px;
}

/* 이미지 업로드 팝업 */
.imgupload_popup {
    display: none;
    width: 100%;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.726);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;

}

.imgupload_popup form>div {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgb(189, 189, 189);
}

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

.imgupload_title p {
    color: #333;
    margin-left: 0;
    font-weight: bold;
}

.imgupload_title svg {
    width: 16px;
    fill: #999;
    margin-right: 0;
    cursor: pointer;
    padding: 5px;
    padding-top: 0;
}

.imgupload_content p {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.imgupload_content01 {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    height: 500px;
    border: 3px dashed #999;
    position: relative;
}

.imgupload_content01>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

}

.imgupload_content01 div p {
    color: #333;
    font-size: 18px;
    font-weight: bold;

}

.imgupload_content01 div button {
    margin-left: 0;
    font-size: 14px;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: rgb(77, 77, 255);
    border: none;
    color: #fff;
    /* margin-top: 20px; */

}

.imgupload_content02 {
    margin-top: 20px;
}

.imgupload_content02 button {
    margin-left: 0;
    font-size: 14px;
    border-radius: 8px;
    color: #333;
    padding: 3px 10px;
    cursor: pointer;
}

.imgupload_content02 button:first-child {
    background-color: rgb(77, 77, 255);
    border: none;
    color: #fff;
}

.imgupload_content02 button:last-child {
    background-color: transparent;
    border: 1px solid #999;
}

.fillebox_wrap {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.filebox {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.filebox h2 {
    font-size: 16px;
}

.filebox .upload-name {
    display: inline-block;
    padding: 5px 7px;
    vertical-align: middle;
    border: 1px solid #dddddd;
    width: 50%;
    color: #999999;
    margin-right: 0;
    margin-left: 0;
    outline: none;
    border-radius: 8px;
}

.filebox label {
    display: inline-block;
    padding: 5px 7px;
    color: #fff;
    vertical-align: middle;
    background-color: rgb(77, 77, 255);
    cursor: pointer;
    margin-left: 10px;
    width: 60px;
    border-radius: 8px;
    font-size: 14px;
}

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

.fileboxBtn {
    display: inline-block;
    padding: 5px 7px;
    color: #fff;
    vertical-align: middle;
    background-color: rgb(77, 77, 255);
    cursor: pointer;
    margin-left: 10px;
    width: 60px;
    border-radius: 8px;
    font-size: 14px;

}

.fileName {
    font-size: 14px;
}

.imgupload_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;

}

.imgupload_grid img {
    width: 100%;
}

.markerSet_main>div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.markerSet_main>div p {
    font-size: 14px;
    font-weight: bold;
    width: 20%;
    margin-left: 0;
    margin-right: 0;
    word-break: break-all;
}

.markerSet_main .detail_text {
    height: 150px;
}

.markerSet_main>div span {
    width: 75%;
    margin-right: 0;
    border-radius: 8px;
    display: block;
    border: 1px solid rgb(189, 189, 189);
    padding: 5px;
    font-size: 14px;
    word-break: break-all;
}

.markerSet_btn {
    display: flex;
    align-items: center;
    margin-right: 0;
}

.markerSet_btn button {
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 8px;

    color: #333;
    margin-right: 0px;
    cursor: pointer;
}

.markerSet_btn button:first-child {
    background-color: transparent;
    border: 1px solid rgb(189, 189, 189);
}

.markerSet_btn button:last-child {
    margin-left: 10px;
    border: none;
    color: #fff;
    background-color: rgb(77, 77, 255);
}

/* 위험제보리스트 */
.marker_list,
.markerSet_list {
    width: 30%;
    border: 1px solid rgb(189, 189, 189);
    position: fixed;
    top: 25%;
    left: 35%;
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 12px;
    z-index: 99999999;
}

.marker_main {
    /* max-height: 300px;
    overflow: auto; */
}

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

.markerMain_title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgb(189, 189, 189);
}

.marker_main .markerMain_title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgb(189, 189, 189);
}

.marker_main .markerMainTitle {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgb(189, 189, 189);
}

.markerMain_title p:nth-child(2) {
    width: 55%;

}

.markerMain_title p:nth-child(2) {
    width: 55%;

}

.markerMain_title p:nth-child(4) {
    width: 55%;
    text-align: center;
}

.markerMain_title p {
    text-align: center;
    font-size: 14px;
    width: 100%;
    margin-left: 0;
    margin-right: 5px;
}

.marker_main div p:nth-child(2) {
    width: 55%;

}

.marker_main div p:nth-child(4) {
    width: 55%;
    text-align: center;
}

.marker_main div p {
    text-align: center;
    font-size: 14px;
    width: 100%;
    margin-left: 0;
    margin-right: 5px;
}

.marker_main div.markerMain_title {
    cursor: auto;
}

.markerMain_title p {
    font-weight: bold;

}

.Pagination {
    display: flex;
    justify-content: center;
    /* margin: 0 auto; */
    margin-top: 10px;
}

.Pagination>li {
    display: flex;
    align-items: center;
    margin: 5px;
}

.Pagination>li a {

    padding: 5px 10px;
    cursor: pointer;
    color: #333;
    font-size: 12px;
}

.Paginationtext {
    background-color: #dee1ef;
    border-radius: 12px;
}

.distater_btn {
    display: flex;
}

.distater_btn button {
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 8px;
    color: #fff;
    border: none;
    margin-right: 0px;
    cursor: pointer;
    background-color: rgb(77, 77, 255);
}

/* 대피소 버튼 */
.arrivalslide {
    position: fixed;
    z-index: 9;
    bottom: 40px;
    left: 0;
    display: none;

}

.shelterinfowrap {
    position: absolute;
    bottom: 0;
    z-index: 9;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    padding: 15px 0 calc(env(safe-area-inset-bottom) + 15px);
    background-color: #fff;
}

.shelterinfowrap button {
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #2496FF;
    color: #fff;
    width: 90%;
    height: 60px;
}

.shelterinfowrap button img {
    margin-right: 0;
}

.shelterinfowrap button p {
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
}

.arrivalslide>div {
    overflow: auto;
    height: 130px;
}

.arrivalbtn {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 1000px;
}

.arrivalslide>div::-webkit-scrollbar {
    display: none;
}

.arrivalbtn button {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: end;
    margin-right: 10px;
    border-radius: 10px;
    padding: 15px;
    background-color: #fff !important;
    box-shadow: var(--boxshadow);
}

.arrivalbtn button em {
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 0;
}

.arrivalbtn button b {
    font-size: 18px;
    margin-left: 0;
    font-weight: 500;
    color: #333;
}

.arrivalbtn button p {
    display: flex;
    flex-direction: column;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #fff !important;
}

.arrivalbtn button p span {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    /* display: flex; */
    max-width: 167px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.arrivalbtn button p span:nth-child(1) {
    /* font-size: 12px; */
    color: #707276;
    width: 100%;
    margin-left: 0;
    font-weight: 500;
    text-align: left;
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #707276;
}

.topbtnwContentwrap {
    width: 100%;
    z-index: 10;
    top: 0;
    position: fixed;

}

.topbtnwsearchwrap {
    display: none;
    /* display: flex; */
    align-items: center;
    /* justify-content: center; */
    box-shadow: var(--boxshadow);
    ;
    /* margin-top: 10px; */
}

.topbtnwsearchwrap>div {
    width: 90%;
    background-color: #EEEFF4;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}

.topbtnwConteninner>div {
    background-color: #fff;
}

.topbtnwsearchwrap input {
    background-color: transparent;
    border: none;
    outline: none;
    width: 90%;

}

.searchwrap {
    /* background-color: #fff; */
    height: 100dvh;
    margin-top: 10px;
    display: none;
}

.searchwrap>div {
    width: 90%;
    border-bottom: 1px solid #DFDEE3;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.searchwrap>div span {
    font-size: 18px;
    font-weight: 500;
}

.searchwrap>div p {
    font-size: 18;
    color: #606067;
    font-weight: 500;
}

.topbtnwsearchwrap i {
    margin-right: 10px;
}

.topbtnwContenttitle {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    background-color: #fff;
    height: 5.5vh;
    /* display: flex;
    align-items: center; */
    box-shadow: var(--boxshadow);
    position: relative;
}

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

.topbtnwContenttitle div svg {
    margin-left: 5px;
    cursor: pointer;
}

.topbtnwContenttitle img {
    width: 20px;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    box-sizing: content-box;
    padding: 10px;
}

.topbtnwContenttitle i {
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    padding: 10px;
}

.topbtnwContenttitle p {
    font-size: 1.2em;
    font-weight: 500;
}

.topbtnwContentinfopopup {
    width: 93%;
    padding: 5px;
    box-sizing: border-box;
    flex-direction: column;
    margin-top: 10px;
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: var(--boxshadow);
    display: none;

}

  
.topbtnwContentinfopopup p {
    font-size: 14px;
    color: #333;
}

.topbtnwContentinfopopup span {
    color: #747473;
    font-size: 12px;
}

.topbtnwrap {
    width: 95%;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 7.5%;
    z-index: 9;
}

.weather-wrapper {
    width: 100%;
}

.weather-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 4px;
    
    padding-left: 0;
    padding: 0 14px;

    width: 100%;
}

.weather-item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    text-align: start;
    margin: 0;
    letter-spacing: -1px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 4px;
    background-color: #fff;
    width: 100%;
}


.weather-item div {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.weather-item p {
    margin: 0;
    width: fit-content;
    font-weight: 600;
}

.weather-item span {
     font-weight: 400;
}

.weather-item p::after {
    content: '|';
    color: #ccc;
    margin: 0 4px;
}

.weather-item p:last-child::after {
    display: none;
}

.topsearch {
    position: fixed;
    top: 10px;
    background-color: #ffffffcb;
    border-radius: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    align-items: center;
    width: 95%;
    justify-content: space-between;
    padding: 5px 0;
}

.topsearch input::placeholder {
    color: #333;

}

.topsearch input {
    background-color: transparent;
    border: none;
    font-size: 12px;
    margin-left: 10px;
    outline: none;
    width: 85%;
}

.topsearch button {
    background-color: transparent;
    border: none;
    margin-right: 10px;
}

div.topbtn {
    display: flex;
    /* justify-content: space-between; */
    overflow: auto;
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 16px;
    margin-right: 0;
    width: 96%;
    height: 51px;
}

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

.topbtn>button {
    display: flex;
    align-items: center;
    height: 38px;
    margin-left: 4px;
    border-radius: 19px;
    /* padding: 12px; */
    background-color: #fff;
    border: 1px solid #ededef;
    box-shadow: var(--boxshadow);
    ;

}

.topbtnAED {
    display: none;
    margin-top: 10px;
    margin-left: 0;
    padding-right: 0.5rem !important;
    padding-left: 0;
}

.topbtnAED button svg {
    width: 22px;
}

.topbtnAED>button {
    display: flex;
    margin-left: 0;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
    border: none;
}

.topbtn>button:first-child {
    margin-left: 0;
}

.topbtn>button:last-child {
    margin-right: 0;
}

.topbtn button svg {
    /* width: 22px; */
    margin-left: 12px;

}

.topbtn button img {
    height: 18px;
    margin-left: 9px;
    margin-right: 2px;
}


.topbtn button p {
    display: flex;
    margin-left: 0;
    flex-direction: column;
    font-size: 16px;
    font-weight: 500;
    padding-right: 5px;
    color: #333;
}

.topbtn select {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
    font-weight: bold;
    margin-left: 10px;
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    border: none;
    color: #fff;
    border-radius: 0.2rem;
    background-color: rgb(218, 83, 25);
    outline: none;
}

.djjungguChangebtn01 svg path {
    fill: #DA5319;
}

.djjungguChangebtn01 p {
    color: #DA5319;
}

.djjungguChangebtn1 svg path {
    fill: #DA5319;
}

.djjungguChangebtn1 p {
    color: #DA5319;
}

.djjungguChangebtn02 svg path {
    fill: #E9B500;
}

.djjungguChangebtn02 p {
    color: #E9B500;
}

.djjungguChangebtn03 svg path {
    fill: #26C60C;
}

.djjungguChangebtn03 p {
    color: #26C60C;
}

.djjungguChangebtn04 svg path {
    fill: #4A9DFF;
}

.djjungguChangebtn04 p {
    color: #4A9DFF;
}

.shelterbtnwrap {
    position: relative;
    margin-left: 10px;
}

.shelterbtnwrap>button {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    height: 30px;
    width: 100%;
}

.shelterbtninner {
    position: absolute;
    top: 30px;
    width: 100%;
    display: none;
}

.djjungguChangebtn03 img {
    width: 18px;
}

div.shelterbtninner img {
    width: 18px;
    margin-left: 0;
    margin-right: 0;
}

div.safeBtncolor p {
    color: rgb(233, 181, 0);

}

div.safeBtncolor svg path {
    fill: rgb(233, 181, 0);

}

div.shelterBtncolor p {
    color: rgb(38, 198, 12);
}

div.shelterBtncolor svg path {
    fill: rgb(38, 198, 12);

}

div.shelterbtninner button {
    margin-right: 0;
    margin-top: 3px;
    margin-left: inherit;
    font-size: 12px;
    width: 100%;
    background-color: #fff;
    padding: 5px 8px;
    border: none;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    font-weight: bold;
}

/* 안전팝업 반응형 */
/* 태블릿 */

@media (max-width:1536px) and (min-width:601px) {
    .arrivalbtn {
        display: flex;
    }

    .marker_list,
    .markerSet_list {
        width: 60%;
        left: 22%;
    }

    .popup_left>div>p {
        font-size: 14px;
    }

    /* 위험정보 */

    .marker_set {
        width: 50%;
        left: 30%;
        top: 25%;
        z-index: 999999;
    }

    .imgupload_popup form>div {

        width: 80%;
    }

    .search_list div p {
        font-size: 14px;
    }
}

/* 모바일 */
@media (max-width:600px) {
    div.maininfo img {
        /* width: 80%; */
        height: 70vh;
    }

    .arrivalbtn {
        display: flex;
    }

    .distater_btn,
    #markerList_close {
        display: none;
    }

    .markerSet_title #markerList_Btn {
        display: block;
        transform: rotate(180deg);
        width: 24px;
    }

    .imgupload_popup form>div {
        width: 100%;
        top: auto;
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
    }

    .filebox h2 {
        font-size: 14px;
    }

    .marker_main {
        /* max-height: 550px;
        overflow: auto; */
    }

    .markerSet_title p {
        font-size: 14px;
    }

    .distater_btn button,
    .marker_search p,
    .markerSet_select p,
    .markerSet_content p,
    .markerSetContent p,
    .marker_search p,
    .markerMain_title p,
    .marker_main div p,
    .login_hover div p,
    .markerSet_btn button,
    .markerSet_main>div span,
    .markerSet_main>div p {
        font-size: 12px;
    }

    .goAddrRoute_box {
        width: 85px;
    }

    .login_hover {
        bottom: -85px;
    }

    .marker_list,
    .markerSet_list {
        width: 90%;
        top: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        border: none;

    }


    .markerSet_content textarea {
        height: 80px;
    }

    .markerSetContent input[type=datetime-local] {
        width: 55%;
        font-size: 12px;
    }

    .markerSet_content textarea,
    .markerSet_select select,
    .marker_search .search_content input[type=text] {
        font-size: 12px;
    }

    .marker_wrap02 .markerBtn {
        width: 100%;

    }

    .marker_wrap {
        width: 100%;
        overflow: auto;

    }

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

    .safety_contWrap {
        padding: 10px;
    }

    .search_list div p {
        font-size: 12px;
    }

    .safetytitle_inner p {
        font-size: 14px;
    }

    .safetytitle_inner span {
        font-size: 14px;
    }

    .safetytitle_inner span em {
        font-size: 10px;
    }

    .safetypopup_inner p {
        font-size: 14px;
    }

    .safety_content p {
        font-size: 12px;
    }

    .safety_content span {
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 20px;
    }

    .safetytitle_inner p b {
        display: block;
    }

    .popup_right p {
        font-size: 12px;
    }

    .popup_name {
        height: 30px;
    }

    .popup_right img {
        width: 20px;
    }




    .popup_left>div>span {
        font-size: 12px;
        width: 175px;
    }

    .popup_left>div>p {
        font-size: 12px;
    }

    .popup_right {
        height: 30px;
    }

    .popup_right a {
        color: #fff;
        font-size: 12px;
    }

    .popup_wrap>p {
        font-size: 12px;
    }

    .popup_info p {
        font-size: 12px;
    }

    .popup_wrap1 {
        bottom: 27% !important;
    }

    .map_inner .map_title02 {
        height: 30px;
    }

    .map_inner .map_title {
        height: 30px;
    }



    .sidebar_main {
        max-height: 450px;
    }

    /* 위험정보 */


    .marker_btn div.markerpopup {
        top: 100px;
        width: 100%;
        display: none;
        left: 0;
        /* background-color: #fff; */
        padding: 5px;
        box-sizing: border-box;

    }

    .markerpopup_main div p {
        font-size: 12px;
    }

    .marker_contant p {
        font-size: 12px;
    }

    .markerpopup_contantscroll {
        max-height: 300px;
        overflow: auto;
    }


    .marker_set {
        width: 90%;
        top: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        border: none;
    }

    .markerSet_img button {
        font-size: 12px;
    }

    .imgupload_title svg {
        width: 14px;
    }

    .imgupload_popup>div {

        width: 80%;
    }

    .imgupload_title p {
        font-size: 12px;
    }

    .imgupload_content01 {
        height: 300px;
    }

    .imgupload_content01 div p {
        font-size: 14px;
    }

    .imgupload_content01 div button {
        font-size: 10px;
    }

    .imgupload_content02 button {
        font-size: 10px;
    }
}


/*acordion*/
.collapsible {
    color: white;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.content {
    max-height: 0;
    overflow: auto;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    margin-left: 5%;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

/* .active:after {
    content: "\2212";
} */


/* 왼쪽 패널 */
.leftPanel {
    position: fixed;
    display: none;
    /* left: -2000px; */
    top: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(51, 51, 51, 0.5); */
    z-index: 99999999999999999999999999999;
}

.leftPanelwrap {
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin-left: 0;
    margin-right: 0;
    position: relative;
}

.leftPanelPcClose {
    z-index: 999;
    position: absolute;
    padding: 15px 10px;
    right: 0;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    transform: translatey(-50%);
    cursor: pointer;
}

.leftPanelPcClose i {
    transform: rotate(180deg);
}

.leftPanelwrap p a {
    color: #4557FF;
    font-size: 14px;
}

.leftpanellast select {
    width: 50%;
    border: 1px solid #999;
    border-radius: 8px;
    padding: 5px 7px;
    outline: none;
}

.leftpanellast {
    width: 100%;
    position: absolute;
    bottom: 50px;
    display: flex;
    /* align-items: center; */
}

.toplogo img {
    cursor: pointer;
}

/* 왼쪽패널 모바일 */
@media (max-width:600px) {
    .leftPanel {
        width: 100%;
    }

    .leftPanelwrap {
        width: 80%;
    }

    #leftpanelClose {
        display: inherit;
        /* background-color: #33333380; */
    }
}


@media (max-width:1536px) and (min-width:667px) {}


/* 하단 토픽 */
.topik {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    z-index: 9;
}

.topikwrapsearch {
    border: 1px solid #999;
    width: 50%;
    border-radius: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* #bottomtopikwrap {
    display: none;
} */

.topikwrap .searchBtn {
    margin-left: 5px;
    margin-right: 10px;
    width: 16px;
    fill: #999999;
    cursor: pointer;
}

.bottomtopik {
    width: 50%;
}



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

.bottomtopikbtn button {
    border: 1px solid #999;
    border-radius: 8px;
    background-color: transparent;
    padding: 5px 7px;
    cursor: pointer;
}

.bottomtopikbtn button:first-child {
    margin-left: 0;
}

.bottomtopikbtn button:last-child {
    margin-right: 0;
}

button.bottomtopikbtnclick {
    background-color: #383f53;
    color: #fff;
}

.topikwrap input {
    margin-left: 10px;
    background-color: transparent;
    border: none;
    outline: none;
    color: #999999;
    width: 90%;
}

.topikwrap input::placeholder {
    color: #999;
}


/* 탭메뉴 */
.tab {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    border-top: 1px solid #999;
}

.tab li {
    width: 100%;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}

.containerwrap {
    /* margin-top: 20px; */
}

.tabcont {
    display: none;
    width: 50%;
    color: black;
}

ul.tab li.on {
    background-color: #383f53;
    color: #fff;
}

.tabcont.on {
    display: block;
}

.newspage {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}

.newspage p {
    margin-left: 0;
    font-size: 16px;
    font-weight: 600;
}

.newspagecontent {
    margin-top: 5px;
    margin-left: 0;
    width: 70%;
    margin-right: 0;
}

.newslink {
    width: 25%;
}

.newspagecontent span {
    font-size: 14px;
    color: #999;
}

.newspage img {
    width: 100%;
    border-radius: 8px;
}

.pagewrap {
    overflow: auto;
    max-height: 600px;
}

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

.newslink {
    display: flex;
    flex-direction: column;
}

.newslink p {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-align: center;
}

.tabcont h2 {
    margin-bottom: 10px;
}

/* 법령 */
.tabcontinner p {
    font-size: 16px;
    font-weight: bold;
}

.tabcontinner span {
    font-size: 14px;
    color: #999;
}

/* 대피소 리스트 */
.shelter {}

.shelter .shelterinner {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}

.shelter .shelterinner p {
    font-size: 16px;
    font-weight: bold;
    margin-left: 0;
}

.shelter .shelterinner p b {
    font-weight: 600;
    font-size: 14px;
}

.shelter .shelterinner span {
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.shelter .shelterinner span.telephone {
    margin-right: 0;
}

/* 하단 토픽 모바일 */
@media (max-width:600px) {
    .tabcont h2 {
        font-size: 16px;
    }

    .shelter .shelterinner span.telephone {
        width: 90px;
        margin-right: 0;
    }

    .shelter .shelterinner span {
        width: 33%;
    }

    .shelter .shelterinner p b {
        display: block;
    }

    .shelter .shelterinner p b,
    .shelter .shelterinner span {
        font-size: 12px;
    }

    .shelter .shelterinner p {
        font-size: 14px;
        width: 30%;
    }

    .shelter .shelterinner {
        align-items: flex-start;
    }

    .newspage {
        margin-bottom: 10px;
    }

    .pagewrap {
        max-height: 300px;
    }

    .newspage p {
        font-size: 14px;
    }

    .newspagecontent span {
        font-size: 12px;
    }

    .tabcont {
        width: 90%;
    }

    .bottomtopikbtnwrap {
        width: 100%;
        border-top: 1px solid #999;
    }

    .bottomtopik,
    .topikwrapsearch {
        width: 90%;
    }

    .bottomtopikbtn {
        width: 100%;
    }

    .bottomtopikbtn button {
        border: none;
        width: 100%;
        border-radius: 0;
    }

    .bottomtopikbtn button:first-child {
        margin-left: 0;
    }

    .bottomtopikbtn button:last-child {
        margin-right: 0;
    }

    ul.tab li {
        font-size: 12px;
    }

}

/* 하단 토픽 태블릿 */
@media (max-width:1536px) and (min-width:601px) {
    .tabcont h2 {
        font-size: 16px;
    }

    .pagewrap {
        max-height: 400px;
    }
}


/* 지도 정보 */

.mapinfo {
    position: fixed;
    right: 15px;
    z-index: 9;
}

.positionCommon {
    bottom: 130px;
}

.mapinfo .mylocation {
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin-right: 0;
    cursor: pointer;

}

.earthwrap {
    /* position: relative; */
}

.changemapwrap {
    width: 100%;
    height: 100%;
    background-color: #00000033;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    display: none;


}

.changemap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-shadow: var(--boxshadow);
    ;
    /* display: none; */

    background-color: #fff;
    padding: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.changewrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.changemap button {
    cursor: pointer;
    border: none;
    outline: none;
}

.changemaptitle {
    width: 90%;
    margin-top: 10px;
    margin-bottom: 15px;
}

div.changemaptitle p {
    font-size: 18px;
    font-weight: 500;
}

.changemapclearbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 20px 0 calc(env(safe-area-inset-bottom) + 35px);
}

.changemapclearbtn button {
    outline: none;
    border: none;
    border-radius: 10px;
    background-color: #2496FF;
    color: #fff;
    width: 90%;
    height: 60px;

}

.changemapbtn img {
    width: 100%;
}

.changemapbtn p {
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
}

.changeborder {
    position: absolute;
    border-right: 1px solid #DFDEE3;
    height: 70px;
    margin: 0;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.changemapbtn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mapinfo>div {
    cursor: pointer;
    margin-bottom: 10px;
    background-color: #fff;
    padding: 3px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    margin-right: 0;
    align-items: center;

}

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

.boxShadow {
    box-shadow: var(--boxshadow);
    ;
}

.mapinfo div i {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    color: #6e6e6e;
}

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


.marker_btn div.markerpopup {
    position: fixed;
    top: 80px;
    width: 100%;
    display: none;
    background-color: #fff;
    padding: 10px;
    height: auto;
    margin: 0;
    border-radius: 8px;
    z-index: 9999999;
}

.markersetLegend p {
    color: rgb(69, 87, 255);
    font-weight: bold;
}

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

.markerclosebtn button {
    outline: none;
    border-radius: 6px;
    display: flex;
    padding: 5px 10px;
    cursor: pointer;
    box-sizing: border-box;
    color: #fff;
}

.markersetLegend p {
    color: rgb(69, 87, 255);
    font-weight: bold;
    margin-left: 0;
}

.markerclosebtn {
    display: flex;
    /* width: 100%; */
    justify-content: center;
    margin-right: 0;
}

.leftLegendList {
    border-radius: 8px;
    background-color: #fff;
    padding: 4px;
}

.shelterpopup {
    /* background-color: #fff; */
    border-bottom: 1px solid #A1A1A1;
    /* display: flex; */
    padding: 5px;
    cursor: pointer;
    box-sizing: border-box;
    /* margin-right: 0; */
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    width: 100%;
}

.shelterpopupmap {
    width: 95%;

}

.sheltertitle {
    padding: 10px;
    background-color: #BED8F1;
    border-radius: 8px;
}

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

.shelterpopuptitle h2 {
    width: 100%;
    font-size: 16px;
    margin-left: 0;
    margin: 0;
}

.shelterpopupmap>div select {
    /* border: 1px solid #999; */
    border: none;
    background-color: #fff;
    width: 80%;
    border-radius: 10px;
    padding: 5px;
    outline: none;
    font-weight: 600;
    font-size: 12px;
}

.shelterpopupmap>div select option {
    color: #333;
}

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

.shelterflex p {
    margin-left: 0;
    width: 20%;
    font-size: 14px;
    font-weight: 500;
}

.shelterlist>p {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.shelterlist>div {
    border: none;
    background-color: #fff;
    border-radius: 5px;
    /* padding: 5px; */
    max-height: 120px;
    overflow: auto;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sheltercheckbox {
    display: flex;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
    width: 80%;
}

.sheltercheckbox>input[type="checkbox"] {
    display: none;

}

.sheltercheckbox>input[type="checkbox"]+label {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-left: 0;
    text-align: left;
    width: 100%;

}

.sheltercheckbox>input[type="checkbox"]+label span {
    margin-left: 5px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #D9D9D9;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 10px;

}

.sheltercheckbox:after {
    display: block;
    clear: both;
    content: "";
}

.sheltercheckbox>input[type="checkbox"]:checked+label span {
    background-color: transparent;

}

.sheltercheckbox>input[type="checkbox"]:checked+label span::after {
    content: "\f078";
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: FontAwesome;
    font-weight: 600;
    color: #276EA3;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #276EA3;
}

.sheltercheckbox label>p {
    font-size: 14px;
    font-weight: bold;
    margin-left: 0;
    width: 80%;
}

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

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

.shelterlist>div>div>p {
    margin-right: 10px;
    font-size: 12px;
    font-weight: 500;
}

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

.shelterBtn button {
    width: 100%;
    background-color: #D4ECFE;
    padding: 3px 5px;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: bold;
    color: #5F5F5F;

}

.markerclosebtn {
    display: flex;
    justify-content: center;
}

.markerclosebtn button {
    background-color: #494949;
    outline: none;
    border-radius: 6px;
    display: flex;
    padding: 5px 10px;
    cursor: pointer;
    box-sizing: border-box;
}

.leftPanelContent {
    width: 95%;
    padding: 10px;
}

.leftPanelContent div p {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 10px;
    padding-left: 0;
}

.toplogo {
    width: 95%;
    margin-top: 10px;


}

.toplogo a {
    display: flex;
    align-items: center;
    background-color: #CADAE5;
    margin-left: 0px;
    border-radius: 30px;
    padding: 5px;
    text-decoration: none;
    color: #333 !important;
    width: 54%;
    font-size: 14px;
    font-weight: 450;


}

.toplogo a p {
    margin-left: 0;
}

.toplogo a svg {
    width: 30px;
    margin: 0;
}

/* 지도 정보 모바일 */
@media (max-width:600px) {}

/* 지도 정보 태블릿 */
@media (max-width:1536px) and (min-width:601px) {}

.topikbar {
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
}

.topikbar svg {
    width: 100px;
    height: 10px;
    fill: rgb(190, 190, 190);
    cursor: pointer;

}





.tab02 {
    list-style: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.tab02 li {
    float: left;
}

.tab02 li a {
    display: inline;
    color: black;
    text-align: center;
    text-decoration: none;
    padding: 10px;
}

.tabcont02 {
    display: none;
    background-color: yellow;
    padding: 6px 12px;
    color: black;
}

ul.tab02 li.on {
    background-color: yellow;
}

.tabcont02.on {
    display: block;
}

/* 마커팝업 */
.markerinfoWrap {
    position: fixed;
    background-color: #fff;
    width: 40%;
    top: 40%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: var(--boxshadow);
    /* display: none; */
}

.markerinfoWrap:after {
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translatex(-50%);
}

.markercontant>p {
    font-size: 16px;
    font-weight: bold;
    color: rgb(112, 112, 112)
        /* margin-bottom: 10px; */
}

.markercontant>div p {
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
    color: rgb(112, 112, 112);
}

.markerinfobtn {
    display: flex;
    /* margin-top: 5px; */
}

.markerinfobtn button {
    background-color: transparent;
    border-radius: 8px;
    border: none;
    padding: 5px;
    padding-left: 0;
    font-size: 14px;
    margin-right: 0;
    cursor: pointer;
    color: rgb(103 118 255);
    font-weight: 500;
}

/* 마커 팝업 */

/* 마커 팝업 */
.marker_popup {
    /* display: none; */
    width: 100%;
    position: fixed;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99999;
}

.markerpopup_title>svg {
    width: 14px;
    fill: #999;
}

.markerpopup_wrap {
    padding: 8px;
    padding-bottom: 10px;

}

.markerpopup_title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.markerpopup_title h2 {
    margin-left: 0;
    font-size: 14px;
    color: #333;
}

.markerpopup_title svg {
    margin-right: 0;
    cursor: pointer;
    padding: 5px;
    box-sizing: initial;
}

.markerpopup_main {
    border: 1px solid #EBEBEB;
    background-color: #FAFAFA;
    border-radius: 8px;
    padding: 5px;
}

.markerpopup_main div p {
    font-size: 14px;
    margin-left: 0;
    margin-right: 0;
}

.markerpopup_main div p:first-child {
    color: #333;
    width: 25%;
    font-weight: 500;
}

.markerpopup_main div p:last-child {
    color: #999;
    width: 70%;
}

.markerpopup_main>div {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEBEB;
    padding: 5px;

}

.markerpopup_main>div:last-child {
    border: none;
}

.markerpopup_contant {
    margin-top: 20px;
}

.marker_title {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.marker_title p {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-left: 0;
}

.marker_contantWrap {}

.marker_contant {
    margin-top: 10px;
    display: flex;
    align-items: center;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    padding: 3px;
    cursor: pointer;
}

.marker_contant p {
    color: #999;
    margin-left: 0;
    font-weight: 500;
    font-size: 14px;
}

.marker_contant svg {
    width: 30px;
    margin-left: 0;
    margin-right: 20px;
}

.marker_contant img {
    width: 30px;
    margin-left: 0;
    margin-right: 20px;
}

.marker_contant svg>g>path {
    stroke: #999;
}

.marker_contant i {
    margin-right: 0;
    color: #999;
}

.markertabmenu {
    display: none;
    border: 1px solid #EBEBEB;
    border-top: none;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;

}

.markertabmenu div {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.markertabmenu div p {
    font-size: 12px;
}

.markertabmenu div p:first-child {
    color: #999;
    margin-left: 0;

}

.markertabmenu div p:last-child {
    color: #333;
    text-align: right;
    margin-right: 0;

}

.markerpopup_contantscroll {
    max-height: 200px;
    overflow: auto;
}

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

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

/* 마커팝업 모바일 */
@media (max-width:600px) {

    article.Guidepopupwrap>div {
        width: 80%;
    }

    .markercontant>p {
        font-size: 14px;
    }

    .markerinfobtn button,
    .markercontant>div p {
        font-size: 12px;
    }

    .marker_popup {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        width: 100vw;
        left: 0;
        bottom: 0;
        z-index: 99;
    }

    .marker_contant p,
    .markerpopup_main div p {
        font-size: 12px;
    }
}

/* 마커팝업 태블릿 */
@media (max-width:1536px) and (min-width:601px) {
    .marker_popup {
        width: 300px;
    }

    .markerpopup_main>div {
        padding: 5px;
    }

    .markerpopup_contantscroll {
        max-height: 200px;
    }

    .markerpopup_main div p:first-child {
        width: 50px;
    }

    .markercontant>div p,
    .markercontant>p {
        font-size: 12px;
    }

    .markerinfobtn button {
        font-weight: 700;
    }

    .markerinfobtn button,
    .marker_contant p,
    .markerpopup_main div p {
        font-size: 12px;
    }
}

/* 축적 */
.scalebarpopup {
    position: fixed;
    bottom: 80px;
    right: 1%;
    background-color: rgba(153, 153, 153, 0.4);
    padding: 5px;
    display: none !important;
    align-items: center;
    z-index: 9;


}

.scalebarpopup>p {
    font-size: 10px;
    color: #fff;
    margin-right: 5px;
}

.scalebarinner {

    display: flex;
    align-items: center;
}

.scalebarinner p {
    text-align: center;
    color: #fff;
    font-size: 10px;
}

.scalebarinner>div {
    height: 3px;
    width: 1cm;
    margin-right: 3px;
    /* margin-top: 10px; */
    background: #fff;
}

/* 대피요령 */
.safetypanel {
    position: fixed;
    top: 0;
    left: -1500px;
    background-color: #EFEFEF;
    width: 100%;
    height: 100%;
    z-index: 999999;
}



/* 인트로 페이지 */

* {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
}

html {
    height: 100%;
}

.djjungguStart {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #2A3037;
    position: relative;
    z-index: 99;
}

.djjungguStart>div {
    background-color: #2A3037;
    /* margin-bottom: 50px; */

}

.djjungguinfocontent {
    height: 100dvh;
}

.djjungguStart>div.djjungguinfoicon {
    margin-bottom: 0;
}

.djjungguStart {
    height: 100%;
}


.djjunggutitle {
    background-color: #ffffff73;
    width: 90%;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 2%;
    position: relative;
}

.titletopimg {
    position: absolute;
    top: 12px;
    z-index: 999;
    left: -20%;
    /* transform: translateX(-50%); */
}

.titletopimg img {
    height: 40px;
}

.djjunggutitle>p {
    font-weight: bold;
    font-size: 6vw;
    text-align: left;
    margin-top: -20px;
}

.djjunggutitle p b {
    color: #27F523;
}

.djjunggutitle span {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.djjunggulogowrap {
    display: flex;
    align-items: flex-start;
}

.djjunggutitlelogo {
    width: 40%;
    margin-left: 0;
}

.djjunggutitle .djjunggulogo {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    border-radius: 50%;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
    margin-right: 6%;
    position: relative;
    box-sizing: border-box;
}

.djjungguinfoicon div p,
.djjungguinfoicon a p,
.djjungguicon div p,
.djjunggutitle p {
    color: #fff;
}

.djjunggutitle div svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.djjungguicon {
    margin-top: 5%;
    width: 90%;
}

.djjungguicon div {
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.djjungguicon div p {
    font-size: 5vw;
    font-weight: bold;
}

.djjungguicon div svg {
    width: 80%;
}

.djjungguicon div img {
    width: 60%;
}

.djjungguicon {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, auto);
    align-items: center;
}

.djjungguyoutube {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    margin-top: 5%;
    width: 90%;
}

.djjungguyoutube div img {
    width: 100%;
    border-radius: 10px;
}

.djjungguyoutube div p {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

.djjungguyoutube div {
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* padding: 10px; */
}

.djjungguyoutubetitle {
    display: flex;
    align-items: center;
    width: 90%;
    margin-top: 5%;
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
}

.djjungguyoutubetitle img {
    margin-left: 0;
    margin-right: 0;
}

.djjungguyoutubetitle p {
    color: #fff;
    font-size: 14px;
    margin-left: 5px;
}

.djjungguinfoicon {
    background-color: #ffffff2E;
    width: 90%;
    display: flex;
    align-items: center;
    padding: 5px 0;
    margin-top: 5px;
    box-sizing: border-box;
    /* bottom: 0; */
}

.djjungguinfoicon>div {
    display: flex;
    width: 100%;
}

.djjungguinfoicon>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}

.djjungguinfoicon>div>div.djjungguinfoSns {
    /* width: 60%; */
    margin-left: inherit;
    margin-right: 0;
    position: relative;
}

.djjungguinfoicon div svg {
    width: 28px;
    margin-left: 0;
    margin-right: 0;
}

.djjungguinfoicon div p {
    margin-right: 0;
    margin-left: 10px;
    font-size: 15px;
    font-weight: bold;
}

.djjungguinfoicon a {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 0;
    margin-left: 5px;
    padding: 5px;
}

.djjungguinfoicon a:first-child {
    margin-left: inherit;
}

.djjungguinfoicon a img {
    margin-right: 3px;
    width: 20px;
}

.djjungguinfoicon a p {
    margin-left: 0;
    font-size: 10px;
    font-weight: bold;
}


@media (max-height:673px) {
    footer {
        position: inherit;
        bottom: inherit;
    }

    .djjungguinfocontent {
        height: auto;
        margin-bottom: 20px;
    }
}


/* 파동 애니메이션 */

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

@keyframes first-wave {
    0% {
        background-color: rgba(36, 150, 255, 0.30);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        background-color: rgba(36, 150, 255, 0.30);
        -webkit-transform: scale(1.8);
        -moz-transform: scale(1.8);
        -ms-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes second-wave {
    0% {
        background-color: rgba(36, 150, 255, 0.30);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        background-color: #0075a3a2;
        -webkit-transform: scale(1.6);
        -moz-transform: scale(1.6);
        -ms-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0;
    }
}

.pulse-circle {
    color: #71bf44;
    display: flex;
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.pulse-circle::after,
.pulse-circle::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translate(-50%, -50%); */
    width: 100%;
    height: 100%;

    border-radius: 50%;

    transform-origin: 50%;
    opacity: 0.3;
}

.pulse-circle::after {
    -webkit-animation: first-wave 1.8s linear 0.5s;
    -moz-animation: first-wave 1.8s linear 0.5s;
    animation: first-wave 1.8s linear 0.5s;
    animation-iteration-count: 3;
}

.pulse-circle::before {
    -webkit-animation: second-wave 1.8s linear 0.5s;
    -moz-animation: second-wave 1.8s linear 0.5s;
    animation: second-wave 1.8s linear 0.5s;
    animation-iteration-count: 3;
}

/* 애니메이션 HTML */
.watch_box {
    position: fixed;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;

}

.watch_box div img {
    display: block;
    width: 100px;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}


.s1_arrow {
    height: 100px;
    padding-top: 0 !important;
    display: none;
    position: relative;
    text-align: center;
    animation: arrow_down 2s infinite;
}

.scroll-arrow {
    width: 8px;
    height: 8px;
    padding: 0 !important;
    border-right: 3px solid #333;
    border-bottom: 3px solid #333;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    animation: arrow-wave 1s infinite;
    animation-direction: alternate;
}

.scroll-arrow:nth-child(1) {
    animation-delay: 0.2s;
}

.mapChange {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    border-top: 1px solid #bfc0c4;
    align-items: center;
    background-color: #f5f5f5;
}

.mapChange > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}
    

@keyframes arrow-wave {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes arrow_down {
    0% {
        top: 28px;
    }

    50% {
        top: 40px;
    }

    100% {
        top: 28px;
    }
}

/* 움직이는 텍스트 */
.flow-text {

    display: flex;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.3s;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;

}

.flow-container {
    position: fixed;
    display: none;
    top: 0;
    z-index: 99999;
    background-color: #333333bb;
    width: 100%;
}


.flow-wrap {
    font-size: 12px;
    font-weight: bold;
    animation: textLoop 20s linear infinite;
    padding-right: 1.4881vw;
}

@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

/* 0시축제 */
.djjungguicon div .festival {
    justify-content: space-between;
}

.festival {
    position: relative;
}

/* .djjungguicon div img.festivalimg{
    width: 140px;
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
} */
.djjungguicon div img.festivalimg {
    width: 80px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.djjungguicon .festival img {
    width: 42%;
}

.djjungguicon .festival .festivalimg01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.djjungguicon .festival p {
    position: absolute;
    bottom: 7px;
    left: 0;
    text-align: center;
    width: 100%;
}

/* 유성구청 수정 */
.topbtn .yuseonghoem svg {
    width: 70px;
}

/* 유성구청 범례 */
.maplist {
    position: fixed;
    top: 50px;
    z-index: 99;
    right: 10px;
    width: 85px;
    border-radius: 8px;
    /* background-color: #fff; */
}

.LegendListbtn {
    display: flex;
    align-items: center;

}

.LegendListbtn p {
    font-size: 10px;
    margin-left: 0;
    font-weight: bold;
}

.LegendListbtn button {
    font-size: 10px;
    margin-right: 0;
    background-color: #494949;
    font-weight: bold;
    border-radius: 25px;
    color: #fff;
    border: none;
    outline: none;
    width: 30px;
    padding: 2px 0;

}

.LegendList {
    width: 100%;
    margin: 5px 0;
    border-radius: 8px;
    background-color: #fff;
    padding: 4px;
}

.LegendList:last-child {
    margin-bottom: 0;
}

.LegendListbtn {
    width: 100%;
    display: flex;
    align-items: center;
}

/* 방사선 기준 버튼 */
.criteriabtn {
    position: fixed;
    z-index: 9;
}

.criteriabtn button {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 15px;
    margin-left: 10px;
    background-color: #fff !important;
    border-radius: 25px;
    border: 1px solid #ededef;
    box-shadow: var(--boxshadow);
    ;
}

.criteriabtn button img {
    height: 18px;
}

.criteriabtn button p {
    display: flex;
    margin-left: 3px;
    flex-direction: column;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

/* 대피소 버튼 클릭 시 정보 */

.shelterinfopopup {
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-shadow: var(--box-top-shadow);
    background-color: #fff;
    /* padding: 25px; */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#alarminfopopupContainer>div {
    width: 90%;
}

.radiationbtn {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 90%;
}

.radiationbtn>button {
    width: 100%;
}

.nuclearpopup {
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}

.nuclearpopuptitle {
    width: 90%;
    padding: 10px 0;
}

.nuclearpopuptitle h2 {
    font-size: 22px;
    color: #606067;
}

.nuclearpopup .radiationbtn {
    margin-top: 20px;
    margin-bottom: 15px;

}

.nuclearpopup .radiationbtn button {
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
}

.nuclearpopupwrap {
    max-height: 260px;
    overflow: auto;
    width: 90%;
}

.nuclearpopupwrap::-webkit-scrollbar{
    width: 4px;
    background-color: #d6d6d6;
}
.nuclearpopupwrap::-webkit-scrollbar-thumb{
    width: 4px;
    background-color: #2496FF;
}
.radiationpopup {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-shadow: var(--box-top-shadow);
    ;
    display: none;
    background-color: #fff;
    /* padding: 25px; */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.radiationclose {
    display: flex;
    justify-content: flex-end;
    width: 90%;
    margin-top: 10px;
}

.radiationclose i {
    margin-right: 0;
    padding: 10px;
    font-size: 18px;
}

div.shelterinfotitle {
    display: flex;
    width: 90%;
    flex-direction: column;
    border-bottom: 1px solid #DFDEE3;
    padding: 20px 0 calc(env(safe-area-inset-bottom) + 35px);
    padding-top: 0;


}

#end_point_detail div.shelterinfotitle {
    border-bottom: none;
}

#shelterinfopopupContainer div.shelterinfotitle {
    border-bottom: none;
}

div.shelterinfotitle>div {
    width: 100%;
}

.shelterinfotitle p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 0;
}

.shelterinfotitle b {
    font-size: 1.7em;
    margin: 5px 0;
    margin-left: 0;
    width: 100%;
}

.shelterinfotitle span {
    font-size: 1.2em;
    font-weight: 500;
    color: #606067;
    margin-left: 0;
}

.shelterinfotitle .shelterPersonnel {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.shelterPersonnel span {
    border-radius: 3px;
    background-color: #00A040;
    color: #fff;
    font-size: 16px;
    padding: 2px 10px;
}

.shelterinfotitle .shelterPersonnel p {
    margin-right: 10px;
    background-color: #F5F6F8;
    border: 1px solid #EDEDEF;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 16px;
}

.shelterinfotitle .shelterPersonnel p:last-child {
    margin-right: auto;
}

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

.shelterinfopopupbtn button {
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #2496FF;
    color: #fff;
    width: 100%;
    height: 60px;

}

.shelterinfopopupbtn button img {
    margin-right: 0;
}

.shelterinfopopupbtn button p {
    margin-left: 10px;
}

.arrivalInnerinfo {
    /* background-color: #DCEDFFB3; */
    /* border-radius: 10px; */
    margin-top: 10px;
    margin-bottom: 10px;
    width: 95%;
}

.arrivalInnerinfo>div {
    display: block;
    padding: 5px;
}

.arrivalInnerinfo>div>div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.arrivalInnerinfo>div>div:last-child {
    margin-bottom: 0;
    align-items: flex-start;
}

.arrivalInnerinfo>div>div p {
    font-weight: 600;
    font-size: 14px;
}

.arrivalInnerinfo>div>div p:first-child {
    width: 30%;
}

.arrivalInnerinfo>div>div p:last-child {
    width: 70%;
}

.endpointdetailinfo {
    width: 100%;
    margin-top: 10px;
    border-bottom: 9px solid #F5F6F8;
}



.endpointdetailinfo div {
    /* margin-left: 0; */
    display: flex;
    align-items: center;
    /* width: 100%; */
}

.endpointdetailinfo div i {
    margin-right: 0;
    cursor: pointer;
    padding: 10px;
}

/* 방사선 기준 */
.alarmtitle {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.alarmtitle p {
    font-size: 18px;
    font-weight: bold;
    margin-left: 0;
}

.alarminfoinner {
    margin-bottom: 10px;
}

.alarminfoinner div,
.alarminfoinner {
    display: flex;
    align-items: center;
}

.alarminfoinner div {
    margin-left: 0;
    border-right: 1px solid #DFDEE3;
    /* width: 23%; */
    margin-right: 0;
}

.alarminfoinner div p {
    font-size: 18px;
    margin-left: 0;
    color: #606067;
    margin-right: 20px;
}

.alarminfoinner div img {
    margin-left: 0;
    margin-right: 10px;
    width: 12px;
}

.alarminfoinner>p {
    margin-left: 20px;
    font-size: 18px;
    color: #606067;
}

/* 풍향 */
.windinfopopup {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: 10;
    display: none;
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
}

.windinfopopup img {
    width: 15px;
}

.windinfopopup p {
    font-size: 14px;
}

/* 안내 팝업 */
.Guidepopupwrap {
    width: 100%;
    height: 100%;
    background-color: #00000033;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
    justify-content: center;
    align-items: center;
    /* display: none; */

}

.Guidepopupwrapmain {
    display: flex;
}

.Guidepopupwrap>div {
    background-color: #fff;
    width: 20%;


}

.Guidepopupbtn {
    display: flex;
    align-items: center;
    border-top: 1px solid #E3E3E5;
}

.Guide01 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    height: 100px;
    padding-bottom: 10px;
}

.Guide01 p {
    font-size: 1.2em;
    font-weight: 500;
}

.Guidepopupbtn button {
    width: 50%;
    border: none;
    background-color: transparent;
    font-size: 18px;
    padding: 10px;
    color: #000;
}

.Guidepopupbtn button:first-child {
    border-right: 1px solid #E3E3E5;
}

/* 원자력발전소 마커 정보 */
.nuclearpopupmain {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.nuclearpopupmain p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 0;
}

.nuclearpopupmain b {
    font-size: 14px;
    color: #606067;
    margin-right: 0;
}

.nuclearpopupinner .shelterPersonnel {
    display: flex;
    align-items: center;
    margin-top: 5px;

}

.nuclearpopupinner .shelterPersonnel p {
    margin-left: 0;
    background-color: #F5F6F8;
    border: 1px solid #EDEDEF;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 16px;
    font-weight: 500;
}

.nuclearpopupinner .shelterPersonnel span {
    margin-right: 0;
}

.nuclearpopupinner {
    border-bottom: 1px solid #DFDEE3;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.nuclearpopupinner:last-child {
    margin-bottom: 0;
}


/* 사용 설명서 */
.maininfo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    background-color: #333333e1;
}

.mainInfoBtn{
    position: absolute;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
.maininfo .mainInfoBtn .checkbox {
    margin-left: 0;
}
.maininfo .mainInfoBtn button{
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
}
.maininfo .checkbox label{
    color: #fff;
    font-size: 16px;
}
.maininfo img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80vh;
    border-radius: 10px;
    border: 1px solid #999;
    /* height: 80%; */
}

.maininfo i {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99999;
    color: #fff;
    padding: 10px;
    font-size: 30px;
}

/* 공공측정소 팝업 */
.measuringpopup {
    position: fixed;
    top: 30%;
    left: 30%;
    z-index: 9;
    display: flex;
    align-items: center;
}

.measuringpopup>div {
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 16px;
    background-color: rgba(204, 188, 37, 0.7);
    position: relative;
}

.measuringpopup>div svg {
    margin-left: 10px;
    margin-right: 4px;
    width: 18px;
}

.measuringpopup>div p {
    padding-right: 10px;
    color: #fff;
    font-size: 16px;
}

.measuringpopup>div:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 10px solid rgba(204, 188, 37, 0.7);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.measuringnum {
    position: absolute;
    right: -5px;
    top: -5px;
    background-color: #fff;
    border: 1px solid #CCBC25;
    border-radius: 7.5px;
    width: 20px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.measuringnum p {
    color: #333;
    padding: 0;
    font-weight: 500;
    font-size: 10px;
}

.toggleMark {
    border: 1px solid #2496FF !important;
    background: #F3F9FF !important;
}

.toggleMark p {
    color: #2496FF !important;
}

/* 방사선감지기 연결중 */
.portable_msinfo {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 5px 10px;
    transform: translate(-50%, -50%);
    z-index: 99999999;
    width: 70%;
    border-radius: 5px;
    background-color: #555555dc;
}

.portable_msinfo div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.clicked {
    border: 1px solid #2496ff;

}

/* 로그인, 회원가입 */
.dreamsjoin,
.dreamslogin {
    /* display: none; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 999;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.dreamsjoin {
    display: none;
    z-index: 9999;
    /* display: flex; */
    flex-direction: column;
    justify-content: space-between;

}

.dreamsloginWrap {
    width: 90%;
    margin-top: -100px;
}

.dreamsloginWrap .dreamsloginWraptitle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 65px;

}

.dreamsloginWrap .dreamsloginWraptitle p {
    color: #333;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
}

.logininput {
    margin-bottom: 12px;
}

.logininput input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E3E3E5;
    width: 100%;
}

.logininput input::placeholder {
    color: #606067;

}

.logininputtext {
    display: none;
    margin-bottom: 12px;
}

.logininputtext p {
    color: #D92F35;
    font-size: 14px;
    font-weight: 500;
}

.dreamsjoinTitle {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 16px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: relative;
}

.dreamsjoinTitle svg {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    padding: 10px;
    box-sizing: content-box;
}

.dreamsjoinTitle p {
    color: #333;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

.dreamsjoincontent {
    margin: 0;
    width: 100%;
}

.dreamsjoinmain {
    width: 90%;
    margin-top: 40px;
}

.dreamsjointext {
    /* display: flex;
    align-items: center; */
    margin: 10px 0;
}

#dreamsTel span,
.dreamsjointext b,
.dreamsjointext span,
.dreamsjointext p {
    font-size: 14px;
    font-weight: 500;
    display: none;
}

div.dreamsjointext p {
    display: flex;
}

.dreamsjoinid {
    margin-bottom: 20px;
}

.dreamsjointext p {
    /* display: none; */
    color: #878787;
}

.dreamsjointext em,
.dreamsjointext b {
    display: none;
    color: #2496FF;
}

#dreamsTel span,
.dreamsjointext span {
    display: none;
    color: #D92F35;
}

.dreamsjoinmainBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    border-radius: 10px;
    background: #2496FF;
    margin-bottom: 30px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
}

.dreamsjoinmainBtn button {
    background-color: transparent;
    border: none;
    color: #fff;
    padding: 16px;
    font-size: 20px;

}

/* 로그인 버튼 */
.loginbtn {
    margin-top: 35px;
 
}

.loginbtn button {
    width: 100%;
    /* background-color: transparent; */
    border: none;
    color: #fff;
    padding: 16px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #2496FF;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.15);

}

.loginjoin {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px;
}

.loginjoin button {
    background-color: transparent;
    border: none;
    color: #606067;
    font-size: 16px;
    text-decoration-line: underline;
}

/* 감지기 체크박스 */
.checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

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

.checkbox>input[type="checkbox"]+label {
    display: flex;
    align-items: center;
    margin-left: 0;
    font-size: 13px;
}

.checkbox>input[type="checkbox"]:checked+label span {
    background: url(../images/check.svg) no-repeat center;
    background-color: #2496FF;
}

.checkbox>input[type="checkbox"]+label span {
    margin-left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid #E3E3E5;
    cursor: pointer;
    margin-right: 10px;
}

@media  (min-width:1280px){
    div.topbtnwContentinfopopup{
        width: 30%;
    }
    div.dreamsloginWrap {
        width: 30%;
    }
    article.arrivalslide {
        left: 50%;
        transform: translateX(-50%);
    }
    div.arrivalbtn button{
        width: 100%;
        display: block;
    }
    div.arrivalbtn button p span{
        max-width: none;
        width: 100%;
    }
    div.arrivalWrap {
        width: 40%;
        margin-left: 0;
    }
    div#leftpanelClose{
        width: 60% !important;
    }
    .topbtnwrap > div.topbtn {
        padding: 0;
        margin-left: auto;
        margin-right: auto;
        width: auto;
    }
    div.nuclearpopupwrap{
        padding: 5px;
    }
}

@media  (max-width:1580px) and (min-width:768px){
    article.Guidepopupwrap>div {
        width: 50%;
    }
}