@charset "utf-8";

/*===========================================*/
/* 반응형                               */
/*===========================================*/
.pc {display: block;}
.mo {display: none;}

@media (min-width: 1920px) { }
@media (max-width: 1600px) { }
@media (max-width: 1440px) { }
@media (max-width: 1200px) { }
@media (max-width: 1024px) {
  .control_list {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .pc {display: none;}
  .mo {display: block;}

  .map_wrap {
    height: 85vh;
  }

  /* 지도컨트롤버튼 */
  .searchbar {position:fixed;top: 0;right: 0;width: 100%;height: 45px;padding: 0 0.5rem;border-radius: 0;background-color: #fff;display:flex;border: none;align-items: center;}
  .searchbar > .logo {line-height: 30px;}
  .searchbar > input {width: calc(100% - 40px);}
  .searchbar > .btn_search {float: left;width: 45px;height: 35px;margin: 5px 0;border: 0 none;font-size: 0;line-height: 0;background:var(--bg);background-position: -300px -96px;background-color: #fff;text-indent: -9999px;cursor: pointer;}


  /*.control_map {top: unset;bottom: 140px;left: 3%;right:unset; width: 70px; overflow: hidden;}
  .control_map > ul {display:block; width:65px; height:65px;}
  .control_map > ul > li {margin-bottom: 5px;}
  .control_map > ul > li > a {display: block;line-height: 2;letter-spacing: 0.5px;}

  button.road_view_btn {top: unset;bottom: 95px;left: 3%;right: unset;}*/

  .map_zoom {top: unset;bottom: 95px;}

  .sidebar {height: 80px;bottom: 0;width: 100%;}
  .sidebar a { }
  .sidebar h1 { }
  .sidebar h1 > a > span { }

  .sidebar { }
  .sidebar a { }
  .sidebar h1 { }
  .sidebar h1 > a > span { }

  .sidebar > .navbar {display: flex;}
  .sidebar > .navbar > li {flex: 1;height: 80px;}
  .sidebar > .navbar > li > a {font-size: 14px;flex-direction: column; justify-content: center;color: #fff;height: 100%;}
  .sidebar > .navbar > li > a > span{background-position: -15px -50px; width: 30px;height: 30px;}
  .sidebar > .navbar > li:nth-child(1) > a > span{background-position: -25px -58px;}
  .sidebar > .navbar > li:nth-child(2) > a > span{background-position: -26px -118px;}
  .sidebar > .navbar > li:nth-child(3) > a > span{background-position: -26px -170px;}
  .sidebar > .navbar > li:nth-child(4) > a > span{background-position: -25px -227px;}
  .sidebar > .navbar > li:nth-child(5) > a > span{width: 75px;height: 25px;line-height: 22px;font-size: 13px;font-weight: 700;color: #474645;background-color: #9c9c9c;border: 1px solid #9c9c9c;border-radius: 50px;text-align: center;background-image: none;}

  .sidebar > .navbar > li.on:nth-child(1) > a > span{background-position: -25px -58px; filter: brightness(0) invert(1);}
  .sidebar > .navbar > li.on:nth-child(2) > a > span{background-position: -26px -118px; filter: brightness(0) invert(1);}
  .sidebar > .navbar > li.on:nth-child(3) > a > span{background-position: -26px -170px; filter: brightness(0) invert(1);}
  .sidebar > .navbar > li.on:nth-child(4) > a > span{background-position: -25px -227px; filter: brightness(0) invert(1);}
  .sidebar > .navbar > li.on:nth-child(5) > a > span{color: #980ee6;background-color: #fff;border: 1px solid #fff;}

  .sidebar > .admin_menu { }
  .sidebar > .admin_menu > ul{ }
  .sidebar > .admin_menu > ul > li { }
  .sidebar > .admin_menu > ul > li > a { }
  .sidebar > .admin_menu > ul > li:nth-child(1) > a > span { }

  .sidebar > .navbar > li.on:nth-child(1) {background-color: #ff9233; }
  .sidebar > .navbar > li.on:nth-child(2) {background-color: #33c08b; }
  .sidebar > .navbar > li.on:nth-child(3) {background-color: #ffb300; }
  .sidebar > .navbar > li.on:nth-child(4) {background-color: #3392ff; }
  .sidebar > .navbar > li.on:nth-child(5) {background-color: #980ee6; }

  .sidebar > .navbar > li.on:before,
  .sidebar > .navbar > li.on:after {display: none;}
  .sidebar > .admin_menu > ul > li.on  { }
  .sidebar > .admin_menu > ul > li.on:before,
  .sidebar > .admin_menu > ul > li.on:after{display: none;}

  .card_wrap {width: 100%;height: calc(100% - 26px);padding-left: 0;border-radius: 0;margin-top: 45px;}
  .outcome_list > ul > li > .info > p.title {margin: 0;}



  .thema_view > .title {background: #ff9233;margin: 0;}
  .thema_view > .title > h1:after {box-shadow: 0 -25px 0 0 #ff9233;}
  .l_safety_view > .title {background: #33c08b;margin: 0;}
  .l_safety_view > .title > h1:after {box-shadow: 0 -25px 0 0 #33c08b;}
  .d_safety_view > .title {background: #ffb300;margin: 0;}
  .d_safety_view > .title > h1:after {box-shadow: 0 -25px 0 0 #ffb300;}
  .sky_view > .title {background: #3392ff;margin: 0;}
  .sky_view > .title > h1:after {box-shadow: 0 -25px 0 0 #3392ff;}
  .hot_place > .title {background: #980ee6;margin: 0;}
  .hot_place > .title > h1:after {box-shadow: 0 -25px 0 0 #980ee6;}
  .search_result > .title {background: #777;margin: 0;}
  .search_result > .title > h1:after {box-shadow: 0 -25px 0 0 #777;}

  .card_wrap .card{ }
  .card_wrap .title{}
  .card_wrap .title > h1{color: #fff;padding: 0.8rem;font-size: 18px;border: none;}
  .card_wrap .title > h1:after {content: "";position: absolute;background-color: transparent;bottom: -50px;right: 0;height: 50px;width: 25px;border-top-right-radius: 25px;}
  .card_wrap .title > h1 > span { }
  .card_wrap .title button.close_btn {background-position: -419px -99px;}


  .group_wrap {height: auto;}
  .group_wrap.list_type1 > ul {width: 500px;padding: 0 1em;}
  .group_wrap.list_type1 > ul > li > i {display:none}
  .group_wrap.list_type1 > ul > li > p {font-size:0.8rem;background: #ddd;padding: 2px 8px;border-radius: 50px;height: auto;}

  .group_wrap.list_type2,
  .group_wrap.list_type3,
  .group_wrap.list_type4 {height: calc(100% - 246px);}

  .outcome_list {padding: 10px 30px;background-color: #f3f6fb;height: calc(100% - 282px);overflow-y: auto;}
  .array_wrap {padding: 1rem;}

  .admin_card_wrap {display: none;}

  button.kakaoRoadView > i {
    display: none;
  }
  button.localview0000 > i {
    display: none;
  }
  .control_list {
    display: none !important;
  }
  .roadview_area {
    position: absolute;
    z-index: 10;
    top: 130px;
    right: 2.5%;
    border-radius: 8px;
    padding: 0.3rem 0.1rem;
    filter: drop-shadow(0.707px 0.707px 1.5px rgba(92,100,116,0.78));
  }
  button.localview0000 {
    width: 70px;
    height: 34px;
    border-radius: 8px;
    background-color: #111320;
    font-size: 15px;
    color: #fff;
    filter: drop-shadow(0.707px 0.707px 1.5px rgba(92, 100, 116, 0.78));
  }
  button.kakaoRoadView {
    width: 70px;
    height: 34px;
    border-radius: 8px;
    background-color: #111320;
    font-size: 15px;
    color: #fff;
    filter: drop-shadow(0.707px 0.707px 1.5px rgba(92, 100, 116, 0.78));
  }
  button.localview0000 label, button.kakaoRoadView label {display:none;}

  .control_map {
    position: absolute;
    z-index: 10;
    top: 75px;
    right: 3%;
    width: 150px;
    background-color: rgb(98 99 107 / 50%);
    border: 1px solid #555555;
    border-radius: 8px;
    padding: 0.3rem 0.1rem;
    filter: drop-shadow(0.707px 0.707px 1.5px rgba(92,100,116,0.78));
  }
  .control_map > ul {
    display: flex;
    height: 35px;
  }
  .control_map > ul > li > a > span {
    border: 1px solid #fff;
    display: block;
    width: 100%;
    height: 35px;
    background: var(--bg);
    border-radius: 5px;
  }
  .control_map > ul > li > a > label {display:none;}

  .zoomSlider {
    position: absolute;
    z-index: 10;
    top: 185px;
    right: 3%;
    border-radius: 45px;
    background-color: #fff;
    filter: drop-shadow(0.707px 0.707px 1.5px rgba(92, 100, 116, 0.78));
    justify-content: center;
  }

}
@media (max-width: 640px) {
  .map_wrap {
    height: 88vh;
  }
  .group_wrap.list_type2 {
    padding: 0 15px;
  }
}
@media (max-width: 576px) { }
@media (max-width: 440px) { }

/* list_type4 */
.group_wrap.list_type4 ul > li > a > .info > p.title {white-space: pre-wrap;max-width: 140px;}