* {
    margin: 0 auto;
    padding: 0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}
:root {
    --boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --topboxshadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25);
}
.cesium-viewer-fullscreenContainer {
    display: none !important;
}

body p {
    margin-bottom: 0;
}

a {
    text-decoration: none;
}

ul li {
    list-style: none;
}

html body {
    height: 100vh;
    /* overflow: hidden; */
    background-color: #f0f0f2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: 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,
input::placeholder {
    font-family: "Noto Sans KR", sans-serif !important;
}

/* 나침반 */
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: 100vh;
    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;
}
.djseogulogo {
    width: 90%;
    padding-top: 20px;
}
.djseogutitle {
    width: 90%;
    box-sizing: border-box;
    margin-top: 2%;
}
div.djseogutitle > p {
    font-size: 6vw;
}

div.djseogutitle p b {
    color: #ffd12f;
}

div.djseogutitle span {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
.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;
}

input::placeholder {
    color: #fff;
}

.ol-rotate-reset {
    display: none;
}
.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);
} */

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

/* 도착지 팝업 */
.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: 100vh;
    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;
}

/*범례*/
.leftLegendList {
    max-width: 1480px;
    overflow: auto;
}

.rightLegendList {
    display: flex;
    width: 100%;
}

.rightLegendList > div {
    width: 40%;
    /* 범례 늘어났을 때 스크롤 */
    /* margin-right: 10px; */
    /* width: 100px; */
}

.LegendListbtn {
    display: flex;
}

.LegendListbtn p {
    font-size: 14px;
    margin-left: 0;
}

div.LegendListbtn button {
    font-size: 12px;
    background-color: #494949;
    border-radius: 25px;
    width: 40px;
    color: #fff;
}

.LegendList {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}

.LegendList .LegendListbtn {
    background-color: #d9d9d9;
    border-radius: 15px;
    padding: 5px 10px;
}

.LegendList .LegendListbtn p {
    font-size: 14px;
}

.LegendList .LegendListbtn button {
    margin-left: 10px;
}

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

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

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

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

.leftLegendNum p {
    width: 100%;
    height: 18px;
    font-size: 12px;
}

.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: 40px;
    height: 16px;
    margin: 0;
}

.LegendListcolor {
    margin-top: 5px;
}

.LegendListcolor div p {
    font-size: 12px;
    margin-left: 0;
    /* 범례 늘어났을 때 스크롤 */
    /* 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;
}

@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;
    }
}

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

.djjungguinfocontent {
    height: auto;
}
@media (max-width: 600px) {
    .djjungguinfocontent {
        /* height: 100vh; */
    }
    .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: 430px;
    }
    .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;
    }
}

/* 기능 선택 */
.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: 100vh;
    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: 100vh;
    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; */
    bottom: 10px;
    left: 0;
}

.arrivalslide > div {
    overflow: auto;
}

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

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

.arrivalbtn button b {
  font-size: 14px;
  margin-left: 5px;
}

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

.arrivalbtn button p span {
  font-size: 16px;
}

.arrivalbtn button p span:nth-child(1) {
  margin-left: 0;
  font-size: 12px;
  color: rgb(69, 87, 255);
} */
.arrivalbtn .arrivalbtnWrap {
    background-color: #fff;
    border-radius: 12px;
    width: 49%;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 2%;
    padding: 10px;
    white-space: nowrap !important;
    border: none;
    text-align: left;
}

.arrivalbtn button.arrivalbtnWrapClick {
    border: 2px solid #3bb9fa;
}
.arrivalbtn button.arrivalbtnWrapClick span {
    background-color: #3bb9fa;
    color: #fff;
}
.arrivalbtn button.arrivalbtnWrapClick h4 {
    color: #333;
}
.arrivalbtn .arrivalbtnWrap span {
    position: absolute;
    left: 5%;
    top: -14px;
    background-color: #e6e6e6;
    display: block;
    border-radius: 5px;
    font-size: 14px;
    padding: 3px 8px;
    font-weight: bold;
}
.arrivalbtn .arrivalbtnWrap h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #707276;
}
.arrivalbtn .arrivalbtnWrap p {
    font-size: 14px;
    font-weight: bold;

    /* display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; */
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
}
.arrivalbtn .arrivalbtnWrap b {
    display: block;
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid #bfc0c4;
    padding-top: 6px;
    margin-top: 6px;
    color: #333;
}

.topbtnwrap {
    width: 95%;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 2%;
    z-index: 11;
}

#hospitalSearch {
    display: none;
}

.topsearch {
    background-color: #ffffff;
    border-radius: 5px;
    z-index: 9;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: var(--boxshadow);
}
.topsearch > i {
    display: none;
}

.topsearch input::placeholder {
    color: #bfc0c4;
}

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

.topsearch button {
    background-color: transparent;
    border: none;
    margin-right: 10px;
}
.topsearch button svg{
    width: 16px;
    vertical-align: initial;
}
div.topbtn {
    display: flex;
    /* justify-content: space-between; */
    /* overflow: auto; */
    padding: 0;
    padding-left: 0 !important;
    margin-left: 0;
    /* width: 100%; */
}

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

.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: 10px;
    /* padding-top: 5px;
    padding-bottom: 5px;
    height: 30px; */
    border: none;
}

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

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

.topbtn button svg {
    width: 22px;
}

.topbtn button img {
    height: 18px;
}

.topbtn button p {
    display: flex;
    margin-left: 3px;
    flex-direction: column;
    font-size: 13px;
    font-weight: bold;
}

.topbtn select {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 36px;
    font-weight: bold;
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid #bfc0c4;
    color: #333;
    border-radius: 23px;
    background-color: #fff;
    box-shadow: var(--boxshadow);
    outline: none;
    /* margin: 5px auto; */
}
.topbtnSelect {
    display: none;
    margin-left: 10px;
}
.topbtn select:first-child {
    margin-left: 0;
}
.topbtn select:last-child {
    margin-right: 0;
}
.topbtn select option {
    font-size: 12px;
    background-color: #fff;
    color: #333;
}

.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) {
    .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;
    flex-direction: column;
    bottom: 0;
    width: 100%;
    /* max-height: 80vh; */
    /* overflow: auto; */
    background-color: #fff;
    z-index: 999999999;
}
.bottomBar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}
.leftPanelwrap {
    width: 100%;
    height: 100%;
    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;
    }
}
#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;
    }
}
.maphomewrap {
    position: fixed;
    right: 0.5rem;
    bottom: 240px;
    z-index: 9;
}
/* 지도 정보 */
.maphomewrap > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin-right: 10px; */
    width: 36px;
    height: 36px;
    box-shadow: var(--boxshadow);
    background-color: #fff;
    z-index: 9;
    border-radius: 50%;
    margin-bottom: 10px;
}
.maphomewrap > div img {
    width: 20px;
}
.maphomewrap > div i {
    color: #000;
    font-size: 20px;
}
.maphomewrap div {
    /* width: 20px;
  height: 20px; */
    display: flex;
    align-items: center;
    cursor: pointer;
}
.maphomewrap div:last-child {
    margin-bottom: 0;
}
#home_button {
    background-color: #3bb9fa;
}

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

.changemapbtn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
div.changemapbtn button {
    width: auto;
}
.mapinfo .earth {
    margin-bottom: 5px;
    background-color: #fff;
    padding: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    margin-right: 0;
    align-items: center;
}

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

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

.marker_btn div.markerpopup {
    position: fixed;
    top: 100px;
    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;
}

.leftLegendList {
    border-radius: 8px;
    background-color: #bed8f1;
    padding: 5px;
}

.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;
    width: 100%;
    justify-content: center;
}

.markerclosebtn button {
    background-color: #d9d9d9;
    outline: none;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    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: #333;
}

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

.markerinfobtn button {
    border-radius: 5px;
    border: none;
    padding: 5px;
    padding-left: 0;
    font-size: 12px;
    margin-right: 0;
    cursor: pointer;
    color: #000;
    background-color: #f5f5f5;
    font-weight: 500;
    width: 100%;
    margin-top: 5px;
}
.openflag {
    display: flex;
    align-items: center;
}
.openflag b {
    border: 1px solid #ff6002;
    color: #ff6002;
    border-radius: 3px;
    font-size: 12px;
    padding: 3px 10px;
    margin-left: 0;
    white-space: nowrap;
    margin-right: 10px;
}
.openflag p {
    margin-left: 0;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.openflag span {
    border: 1px solid #bfc0c4;
    color: #bfc0c4;
    background-color: #f5f5f5;
    border-radius: 3px;
    font-size: 12px;
    padding: 3px 10px;
    margin-left: 0;
    white-space: nowrap;
    margin-right: 10px;
}

/* 마커 팝업 */

/* 마커 팝업 */
.marker_popup {
    /* display: none; */
    width: 100%;
    /* background-color: #00518E !important; */
    position: fixed;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99999;
    bottom: 0 !important;
}
.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%;
}

.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 (min-width: 600px) {
    div.tab-content > .tabInner div p {
        max-width: 60%;
    }
}
@media (max-width: 600px) {
    .markercontant > p {
        font-size: 14px;
    }
    article.markerinfoWrap {
        width: 60%;
    }
    .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: flex;
    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%;
}
body {
    background-color: #f0f0f2;
}

.djjungguStart {
    width: 100%;
    height: 100%;
    margin: 0 auto;

    position: relative;
    z-index: 99;
}
.djjungguStart > div.djjungguinfoicon {
    margin-bottom: 0;
}

.djjungguStart {
    height: 100%;
}
.maintextwrap {
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    width: 90%;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;
}
.maintextwrap p {
    font-size: 12px;
    font-weight: 500;
}
.djjunggutitle {
    margin-top: 10px;
    width: 90%;
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
}

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

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

.djjunggutitle p span {
    font-size: 16px;
}

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

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

.djjungguicon {
    margin-top: 5%;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.djjungguicon > div {
    display: grid;
    grid-gap: 20px;
    width: 90%;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding-bottom: 30px;
}
.djjungguicon > div div {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    box-shadow: var(--boxshadow);
}

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

.djjungguicon div svg {
    width: 80%;
}

.djjungguicon div img {
    height: 70px;
    margin-bottom: 5px;
}

.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: #000;
    font-size: 16px;
    font-weight: 500;
    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; */
}

.youtubeWrap {
    padding-bottom: 60px;
}

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

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

.djjungguyoutubetitle p {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
}

.djjungguinfoicon {
    width: 90%;
    display: flex;
    align-items: center;
    padding: 5px 0;
    margin-top: 5px;
    box-sizing: border-box;
}

.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) {
    .djjungguinfocontent {
        height: auto;
    }
}

/* 파동 애니메이션 */

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

@keyframes first-wave {
    0% {
        background-color: #0075a3a2;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        background-color: #0075a3a2;
        -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: #0075a3a2;
        -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 {
    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;
    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 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
}

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

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

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

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

    50% {
        opacity: 0.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%;
}

.tempArea {
    position: fixed;
    right: 10px;
    top: 30px;
    z-index: 9;
    font-size: 10px;
    color: #333333;
    display: block;
    text-align: center;
    top: 95px;
}
.tempArea p {
    margin-bottom: 5px;
}

/* 앱설치버튼 */
.installAppwrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000cc;
}

.installAppwrap button {
    color: #fff;
    background-color: transparent;
    border: none;
    font-size: 18px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    font-weight: normal;
}
.installAppwrap > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.installAppwrap img {
    position: absolute;
    right: 10px;
    padding: 10px;
    top: 50%;
    transform: translatey(-50%);
}

/* 지도 변경 */
.mapChange {
    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;
    justify-content: center;
    align-items: center;
}

.mapChange div p {
    font-size: 12px;
    margin-left: 0;
    font-weight: bold;
}

.mapChange div svg {
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
    /* margin-right: 8px; */
    margin-bottom: 10px;
}

/* 지도 설정 */

.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;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.changewrap {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    margin-bottom: 30px;
    grid-row-gap: 15px;
    position: relative;
}

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

.changemaptitle {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #bfc0c4;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.changemaptitle i {
    position: absolute;
    font-size: 16px;
    right: 10px;
    color: #bfc0c4;
}
div.changemaptitle p {
    font-size: 20px;
    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 {
    border: 1px solid #acacac;
    border-radius: 5px;
    width: 100%;
}

.changemapbtn p {
    font-size: 16px;
    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%);
}

/* 길찾기 정보 */

.arrivalWrap {
    width: 100%;
    background-color: #fff;
    overflow: auto;
}

.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: #f5f5f5;
    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::-webkit-scrollbar {
    background-color: #eeeeee;
    width: 3px;
    border-radius: 8px;
}

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

.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;
}
.shelterPersonnel {
    display: flex;
    align-items: center;
    margin-left: 0;
}
.shelterPersonnel p {
    margin-right: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ededef;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 16px;
    margin-left: 0;
}

.shelterPersonnel p:last-child {
    margin-right: auto;
}
.roadWrap {
    max-height: 50vh;
    overflow: auto;
}
.arrivalInnerInfoWrap {
    width: 90%;
    margin-top: 20px;
}
.arrivalInnerInfoWrap > div:not(:last-child) {
    margin-bottom: 5px;
}
.arrivalInnerInfotitle {
    display: flex;
    align-items: center;
}
.arrivalInnerInfotitle p {
    font-size: 18px;
    font-weight: 600;
    margin-left: 0;
    margin-right: 0;
}
.arrivalInnerInfocontent p {
    margin-left: 0;
    font-size: 16px;
}
.arrivalInnerInfotitle span {
    padding: 3px 10px;
    color: #3bb9fa;
    border: 1px solid #3bb9fa;
    margin-left: 10px;
    border-radius: 3px;
}
/* 연관검색/검색어 리스트 */
.searchInfo {
    background-color: #fff;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
}
.searchInfo > div {
    width: 95%;
}
.searchInfoInner {
    display: flex;
    flex-direction: column;
    margin-top: 70px;
    align-items: center;
    justify-content: center;
}
.searchInfoInnertitle {
    margin-left: 0;
    margin-bottom: 12px;
}
.searchInfoInnertitle p {
    font-size: 16px;
    font-weight: 500;
}
.searchInfoInnermain {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 100%;
    grid-gap: 10px;
}
.searchInfoInnermain:not(:last-of-type) {
    margin-bottom: 10px;
}

.searchInfoInnermain p {
    padding: 5px 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #bfc0c4;
    background-color: #f5f5f5;
    text-align: center;
    border-radius: 3px;
}

/* 검색 결과 */
.searchInfoText {
    width: 100%;
    border-bottom: 1px solid #bfc0c4;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.searchInfoText p {
    font-weight: bold;
    font-size: 16px;
}
.searchInfoText span {
    font-size: 13px;
}

/* 새로운 마커 팝업 */
.markerpopupmain {
    width: 100%;
    position: fixed;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99999;
    bottom: 0 !important;
    padding-top: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: var(--topboxshadow);
    display: none;
}
.markerpopupmain > div {
    width: 95%;
    margin-bottom: 45px;
}
.markerpopupmaincommon {
    display: flex;
    align-items: center;
}
.markerpopupmaincommon:not(:last-of-type) {
    margin-bottom: 10px;
}
.markerpopupmaincommon span {
    margin-left: 0;
    display: block;
    margin-right: 5px;
    font-size: 16px;
    font-weight: 600;
    /* white-space: nowrap; */
    width: 25%;
}
.markerpopupmainhospital {
    display: flex;
    align-items: flex-start;
}
.markerpopupmainhospital p {
    text-align: right;
}
.markerpopupmaincommon p {
    margin-right: 0;
    font-size: 16px;
    font-weight: 500;
    width: 70%;
    text-align: right;
}

.markerpopupmainmanagertel {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 16px;
    background-color: #f5f5f5;
    margin-top: 10px;
}
.markerpopupmainmanagertel > div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.markerpopupmainmanagertel > div img {
    margin-bottom: 10px;
}
.markerpopupmainmanagertel > div p {
    font-size: 14px;
    font-weight: 500;
}
.markerpopupmainmanagertel > div:first-child {
    border-right: 1px solid #bfc0c4;
}

.markerpopupmain div .openflag {
    display: flex;
    margin-bottom: 6px;
    align-items: center;
}
.markerpopupmain div .openflag b {
    border: 1px solid #ff6002;
    color: #ff6002;
    border-radius: 3px;
    font-size: 16px;
    padding: 3px 12px;
    margin-left: 0;
    white-space: nowrap;
    margin-right: 10px;
}
.markerpopupmain div .openflag p {
    margin-left: 0;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-weight: 600;
}
.markerpopupmain div .openflag span {
    border: 1px solid #bfc0c4;
    color: #bfc0c4;
    background-color: #f5f5f5;
    border-radius: 3px;
    font-size: 12px;
    padding: 3px 10px;
    margin-left: 0;
    white-space: nowrap;
    margin-right: 10px;
}

.markerpopupmain div .markerpopupmainbuildplace p {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}
.markerpopupmainorg {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #bfc0c4;
}

.markerpopupmainorg p {
    padding-left: -100px;
}

.maplegend {
    position: fixed;
    bottom: 240px;
    z-index: 9;
    left: 0.5rem;
}
.maplegend button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--boxshadow);
    padding: 7px 17px;
    background-color: #fff;
    z-index: 9;
    border: none;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}
.maplegend button img {
    margin-right: 5px;
}
.maplegend > div:not(:first-of-type) {
    margin-top: 10px;
}
.detourWrap {
    position: fixed;
    display: none;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
    padding: 20px 0;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: var(--topboxshadow);
}
.detourInfo {
    width: 90%;
    margin-top: 10px;
}
.detourInfo p {
    font-size: 12px;
    color: #c0c0c0;
}
.detourMainBtn {
    width: 90%;
    display: flex;
    align-items: center;
}
.detourMainBtn button:first-child {
    width: 80%;
    margin-left: 0;
}
.detourMainBtn button:last-child {
    width: 15%;
    margin-right: 0;
    margin-left: auto;
}
.detourMainBtn button {
    /* width: 100%; */
    border-radius: 5px;
    background-color: #3bb9fa;
    border: none;
    height: 48px;
    color: #fff;
    outline: none;
}
.detourContent {
    margin-top: 10px;
    width: 90%;
    max-height: 40vh;
    overflow: auto;
    padding-bottom: 30px;
}

.detourContent > div > div,
.detourContent > div {
    display: flex;
    align-items: center;
    margin-left: 0;
}
.detourContent > div {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dfdee3;
}
.detourContent > div i {
    margin-right: 0;
    font-size: 20px;
    padding: 10px;
}
.detourContent > div p {
    margin: 0;
    font-size: 18px;
}
.detourContent > div p:first-child {
    white-space: nowrap;
}
.detourContent > div b {
    margin: 0 5px;
}
.mapLegendMain {
    width: 95%;
    border-bottom: 1px solid #dfdee3;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.mapLegendMainbor {
    border-bottom: none;
}
.mapLegendtitle {
    display: flex;
    align-items: center;
}
.mapLegendtitle:not(:first-of-type) {
    margin-top: 20px;
}
.mapLegendtitle .mapLegendtitleinner {
    display: flex;
    align-items: center;
    margin-left: 0;
}
.mapLegendtitle .mapLegendtitleinner > div {
    padding: 5px 30px;
    background-color: #00518e;
}
.mapLegendtitle .mapLegendtitleinner p {
    margin-left: 10px;
}
.mapLegendinfo {
    display: flex;
    align-items: center;
    margin-left: 0;
}
.mapLegendinfo > div {
    position: relative;
}
.mapLegendinfo img {
    margin-left: 0;
    padding: 5px 10px;
}
.mapLegendtitle p {
    font-size: 16px;
    margin-left: 0;
}
.mapLegendtitle .toggle {
    margin-right: 0;
}
.mapLegendColorsWrap {
    display: none;
    /* display: flex; */
    align-items: center;
    flex-direction: column;
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #bfc0c4;
    border-radius: 5px;
    padding: 8px;
    z-index: 9;
    box-shadow: var(--boxshadow);
    max-width: 80%;
    overflow: auto;
}

.mapLegendMainInner {
    /* margin-bottom: 20px; */
}
.mapLegendColorsWrap > div {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
}
.mapLegendColorsWrap > div:nth-child(even) p {
    background-color: #de6c5f;
}
div.mapLegendColorsWrap > div > p {
    height: 20px;
    margin-left: 0 !important;
    width: 30px;
    max-width: none !important;
    background-color: #00518e;
}
.mapLegendColorsWrap > div > span {
    height: 100%;
    width: 83%;
    font-size: 12px;
    /* height: 20px; */
    margin-left: 10px;
    display: block;
    white-space: nowrap;
}
/* 토글버튼 */
.toggleSwitch {
    width: 45px;
    height: 27px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 30px;
    background-color: #dfdee3;
    border: 2px solid #f2f2f3;
    /* box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%); */
    cursor: pointer;
    /* margin: 30px; */
}

.toggleSwitch .toggleButton {
    width: 22px;
    height: 22px;
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}

.tabInnerWrap .toggle {
    margin-left: 10px;
}
.mapLegendColorsWrapbtn {
    margin-left: 10px;
    position: relative;
}
.toggle input:checked ~ .toggleSwitch {
    background: #4dc2ff;
    border: 2px solid #3bb9fa;
}

.toggle input:checked ~ .toggleSwitch .toggleButton {
    left: auto;
    right: 0;
    background: #fff;
}

.toggleSwitch,
.toggleButton {
    transition: all 0.2s ease-in;
}

/* 시범적용 */
.showBtn {
    display: flex;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}
div.showBtn button {
    border: 1px solid #bfc0c4;
    background-color: #f5f5f5;
    font-size: 14px;
    padding: 7px 10px;
    font-weight: 500;
    width: auto;
    margin: auto;
    color: #333;
}
.showBtn button:first-child {
    margin-left: 0;
}
.showBtn button:last-child {
    margin-right: 0;
}

/* #route_area {
  overflow: auto;
  max-height: 250px;
} */

/* 기능선택 탭메뉴 */
.tabcontainer {
    width: 100%;
    height: 81px;
    position: relative;
}
ul.tabs {
    padding-left: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
    list-style: none;
    display: flex;
    background-color: #fff;
    box-shadow: var(--topboxshadow);
    align-items: center;
    /* display: none; */
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

ul.tabs li {
    display: flex;
    align-items: center;
    flex-direction: column;
    /* background: #898989; */
    color: white;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li p {
    color: #8a8a8a;
    font-size: 12px;
    margin-top: 5px;
}
ul.tabs li.current {
    background: #e0e0e0;
    color: #222;
}

.tab-content {
    display: none;
    background: #fff;
    box-shadow: var(--topboxshadow);
    position: fixed;
    width: 100%;
    bottom: 85px;
    z-index: 9;

    padding: 12px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.tabInner {
    max-height: 30vh;
    overflow: auto;
}
.tab-content > .tabInner > div {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #bfc0c4;
    width: 96%;
    margin-bottom: 15px;
    padding-bottom: 15px;
}
.tabInnerWrap > div {
    margin-right: 0;
}
.tab-content > .tabInner div p {
    font-size: 15px;
    margin-left: 10px;
    font-weight: 500;
    /* max-width: 40%; */
}
.tab-content > .tabInner div .shptext{
    max-width: 40%;
}
.tab-content > .tabInner div img {
    margin-left: 0;
    margin-right: 0;
}
.tab-content.current {
    display: inherit;
}

.tabtoggle {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 90%;
}

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

.tabtoggle .toggle {
    margin-right: 0;
}

.tabtoggle .toggle input:checked ~ .toggleSwitch {
    background: #4fbc87;
    border: 2px solid #7ce2c4;
}
/* 커스텀 */
.goMainSelectBox * {
    box-sizing: border-box;
}
.goMainSelectBox {
    position: relative;
    width: 150px;
    height: 36px;
    margin-left: 0;
    border-radius: 22px;
    border: 1px solid #bfc0c4;
    background: url(../images/selectarrow.svg) calc(100% - 7px) center no-repeat;
    background-color: red;
    background-position: right 10px center;
    cursor: pointer;
    display: flex;
    box-shadow: var(--boxshadow);
    align-items: center;
}

.goMainSelectBox .label {
    display: flex;
    align-items: center;
    width: inherit;
    height: inherit;
    border: 0 none;
    outline: 0 none;
    padding-left: 5px;
    background: transparent;
    cursor: pointer;
}
.goMainSelectBox .label > div img {
    width: 30px;
}
.goMainSelectBox .label > div p {
    color: #fff;
}
.goMainSelectBox .optionList {
    position: absolute;
    top: 38px;
    left: 0;
    width: 100%;
    background: #fff;
    color: #fff;
    border: 1px solid #bfc0c4;
    list-style-type: none;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    max-height: 300px;
    transition: 0.3s ease-in;
    box-shadow: var(--boxshadow);
    display: none;
}

.goMainSelectBox.active .optionList {
    display: block;
}

.goMainSelectBox .optionItem {
    border-bottom: 1px solid #f5f5f5;
    padding: 5px 0;
    transition: 0.1s;
    display: flex;
    align-items: center;
}

.goMainSelectBox .optionItem:last-child {
    border-bottom: 0 none;
}

.optionItem .labelWrap {
    margin-left: auto;
    width: 95%;
}
.labelWrap {
    display: flex;
    align-items: center;
    margin-left: 0;
}
.optionItem .labelWrap img {
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    background-color: red;
    border-radius: 50%;
}
.labelWrap p {
    color: #333;
    font-size: 14px;
    margin-left: 5px;
    font-weight: bold;
}

/* 기능선택 토스트메세지 */
.toastWrap {
    position: absolute;
    bottom: 35vh;
    z-index: 9;
    width: 100%;
    display: flex;
    left: 0;
    justify-content: center;
}
.toastWrap div {
    display: flex;
    align-items: center;
    background-color: #000000cc;
    padding: 15px 10px;
    border-radius: 7px;
}
.toastWrap div p {
    color: #fff;
    font-size: 14px;
    /* font-weight: 500; */
    margin-left: 0;
}
.toastWrap div img {
    margin-right: 10px;
}
/* 스크롤 커스텀 */
.selectBox2 .optionList::-webkit-scrollbar {
    width: 6px;
}
.selectBox2 .optionList::-webkit-scrollbar-track {
    background: transparent;
}
.selectBox2 .optionList::-webkit-scrollbar-thumb {
    background: #303030;
    border-radius: 45px;
}
.selectBox2 .optionList::-webkit-scrollbar-thumb:hover {
    background: #303030;
}

.arrivalInnerInfoWrap .markerpopupmainorg {
    border-top: none;
}

.loading-bar {
    color: #333;
    border-radius: 5px;
    background-color: #fff;
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px 0px; */
    border: 1px solid #00000042;
}

.fileHeaFdield {
    display: flex;
    align-items: center;
}
.fileHeaFdield p {
    margin-left: 0;
    font-size: 16px;
    font-weight: 600;
    width: 25%;
}
.fileHeaFdield span {
    margin-right: 0;
    display: block;
    text-align: right;
    width: 70%;
}

/* 푸터 날씨 */

.weatherseogu {
    /* margin-top: 20px; */
    margin-bottom: 20px;
    border-radius: 3px;
    border-radius: 10px;
    background: #fff;
    width: 90%;
    padding: 15px;
    /* height: 30px; */
    display: flex;
    align-items: center;
}

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

.weatherseoguImg {
    margin-left: 0;
    margin-right: 5px;
}

.weatherseoguImg span {
    font-size: 44px;
    color: #333;
}

.weatherseoguImg img {
    width: 80px;
}

.weatherseogutext {
    margin-left: 0;
    display: flex;
    flex-direction: column;
}

.weatherseogutext div {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.weatherseogutext div p {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    margin-right: 5px;
}

.weatherseogutext b {
    color: #787878;
    margin: 0 5px;
    font-size: 16px;
}

.weatherseogutext div span {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

#appendStateTap {
    background-color: skyblue;
}

/* 하단 마커 글자색 변경 */

.tabInnerinner {
    color: #3bb9fa;
}

/* shp 우회여부 */
div.byPassWrap {
    margin-left: 10px;
}
.byPassWrap label {
    display: flex;
    align-items: center;
}
.byPassWrap input[type="checkbox"] {
    display: none;
}
.byPassWrap input[type="checkbox"]:checked + span:before {
    background: url(../images/check.png) no-repeat center;
    border: 2px solid #2b914f;
}
.byPassWrap input[type="checkbox"] + span {
    font-size: 12px;
}
.byPassWrap input[type="checkbox"] + span:before {
    content: " ";
    display: inline-block;
    /* margin-right: 10px; */
    width: 16px;
    height: 16px;
    text-align: center;
    vertical-align: middle;
    /* background: #707070; */
    border: 2px solid #707070;
    border-radius: 2px;
    margin-right: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

.showFindLocationBtn button {
    width: 100%;
    border-radius: 5px;
    background-color: #3bb9fa;
    border: none;
    height: 48px;
    color: #fff;
    outline: none;
}

.tab-content > .tabInner > .showFindLocationBtn {
    border-bottom: none;
    margin-bottom: 0;
}

/* gs인증 */
.djjungguinfocontent{
    padding-bottom: 20px;
}
.GsText{
    font-size: 11px;
    /* position: absolute; */
    /* left: 50%;
    transform: translateX(-50%); */
    bottom: 1%;
    background-color: #00000077;
    padding: 8px;
    color: #fff;
    width: 90%;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .GsText p{
    margin-left: 10px;
  }