@charset "UTF-8";
body,
html {
  width: 100vw;
  height: 100vh;
  overflow: hidden; }

header {
  position: fixed;
  z-index: 150;
  right: 1vw;
  -webkit-box-shadow: -3px 3px 3px rgba(4, 47, 68, 0.3);
  box-shadow: -3px 3px 3px rgba(4, 47, 68, 0.3); }
  @media only screen and (max-width: 575px) {
    header {
      width: 15vw; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    header {
      width: 10vw; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    header {
      width: 10vw; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    header {
      width: 5vw; } }
  @media only screen and (min-width: 1200px) {
    header {
      width: 5vw; } }
  header nav img {
    height: 70%; }
  header nav button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    margin: 1%;
    padding: 1% 0;
    background: #fff; }
    @media only screen and (max-width: 575px) {
      header nav button {
        height: 5vh; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      header nav button {
        height: 8vw; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      header nav button {
        height: 15vh; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      header nav button {
        height: 5vh; } }
    @media only screen and (min-width: 1200px) {
      header nav button {
        height: 10vh; } }
    header nav button:hover {
      background: #f7f5f5; }
  header h1 {
    color: #fff;
    letter-spacing: 3px;
    margin: 0;
    text-align: right;
    margin-right: 50px; }
    @media only screen and (max-width: 575px) {
      header h1 {
        font-size: 20px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      header h1 {
        font-size: 20px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      header h1 {
        font-size: 20px; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      header h1 {
        font-size: 20px; } }
    @media only screen and (min-width: 1200px) {
      header h1 {
        font-size: 28px; } }
  header .logo {
    position: absolute;
    right: 0;
    z-index: 100;
    position: fixed;
    padding: 2vh 3vw;
    background: #0ac9c9;
    cursor: pointer; }
    @media only screen and (max-width: 575px) {
      header .logo {
        width: 100vw; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      header .logo {
        width: 100vw; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      header .logo {
        width: 100vw; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      header .logo {
        width: 100vw; } }
    @media only screen and (min-width: 1200px) {
      header .logo {
        width: 17vw; } }
    header .logo #dehaze {
      float: left;
      margin-left: 5%;
      background: #fff;
      color: #0ac9c9;
      border-radius: 99em;
      padding: 1%; }
      header .logo #dehaze span {
        position: absolute;
        -webkit-transform: translate(-30%, 5px);
        -ms-transform: translate(-30%, 5px);
        transform: translate(-30%, 5px);
        color: #000;
        font-size: 14px; }
        @media only screen and (max-width: 575px) {
          header .logo #dehaze span {
            display: none; } }
        @media only screen and (min-width: 576px) and (max-width: 767px) {
          header .logo #dehaze span {
            display: none; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          header .logo #dehaze span {
            display: none; } }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          header .logo #dehaze span {
            display: none; } }
        @media only screen and (min-width: 1200px) {
          header .logo #dehaze span {
            display: block; } }
    header .logo img {
      position: absolute;
      width: 50px; }
      @media only screen and (max-width: 575px) {
        header .logo img {
          width: 25px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        header .logo img {
          width: 25px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        header .logo img {
          width: 25px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        header .logo img {
          width: 25px; } }
      @media only screen and (min-width: 1200px) {
        header .logo img {
          width: 50px; } }
      @media only screen and (max-width: 575px) {
        header .logo img {
          right: 15px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        header .logo img {
          right: 15px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        header .logo img {
          right: 15px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        header .logo img {
          right: 15px; } }
      @media only screen and (min-width: 1200px) {
        header .logo img {
          right: 30px; } }
      @media only screen and (max-width: 575px) {
        header .logo img {
          top: 10px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        header .logo img {
          top: 5px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        header .logo img {
          top: 5px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        header .logo img {
          top: 5px; } }
      @media only screen and (min-width: 1200px) {
        header .logo img {
          top: 20%; } }

main {
  background: #ccc;
  width: 100vw;
  height: 100vh; }
  main iframe {
    overflow: auto;
    width: 100vw;
    height: 100vh; }
  main .bg {
    overflow: auto;
    width: 100vw;
    height: 100vh; }
  main .map_box {
    position: absolute;
    bottom: 5vh;
    left: 5vw;
    width: 95vw; }
    main .map_box ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
      main .map_box ul li {
        background: #fff;
        width: 18%;
        height: 200px;
        margin: 1%; }
  main .status_nav {
    position: absolute;
    top: 5vh;
    right: 5vw; }
    main .status_nav li {
      background: #fff;
      width: 100px;
      height: 100px;
      margin: 3%; }
  main #attr-div {
    height: 350px;
    -webkit-box-shadow: rgba(68, 68, 68, 0.466) 3px 3px 10px;
    box-shadow: rgba(68, 68, 68, 0.466) 3px 3px 10px;
    overflow-y: scroll;
    position: absolute;
    top: 5vh;
    right: 25vw;
    background: #fff;
    padding: 2%;
    border-radius: 10px; }
  main h5 {
    margin: 10px 10px 0 10px;
    color: #3c82df; }

.inf_box {
  position: absolute;
  background: #fff;
  top: 0;
  overflow: auto;
  z-index: 20;
  right: 0;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  -webkit-box-shadow: 0px 0px 25px rgba(102, 99, 99, 0.5);
  box-shadow: 0px 0px 25px rgba(102, 99, 99, 0.5); }
  @media only screen and (max-width: 575px) {
    .inf_box {
      width: 90vw; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box {
      width: 90vw; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box {
      width: 90vw; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box {
      width: 90vw; } }
  @media only screen and (min-width: 1200px) {
    .inf_box {
      width: 21vw; } }
  @media only screen and (max-width: 575px) {
    .inf_box {
      height: 80vh; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box {
      height: 80vh; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box {
      height: 80vh; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box {
      height: 80vh; } }
  @media only screen and (min-width: 1200px) {
    .inf_box {
      height: 85vh; } }
  @media only screen and (max-width: 575px) {
    .inf_box {
      padding: 10vh 5vw; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box {
      padding: 10vh 5vw 10vh 5vw; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box {
      padding: 10vh 5vw; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box {
      padding: 10vh 1vw; } }
  @media only screen and (min-width: 1200px) {
    .inf_box {
      padding: 15vh 1vw 3vh 1vw; } }
  @media only screen and (max-width: 575px) {
    .inf_box {
      font-size: 14px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box {
      font-size: 14px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box {
      font-size: 14px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box {
      font-size: 14px; } }
  @media only screen and (min-width: 1200px) {
    .inf_box {
      font-size: 16px; } }
  .inf_box h3 {
    color: #76727e;
    margin: 0.2em 0 1em 0; }
  .inf_box .button {
    width: 90%;
    border-radius: 99em;
    padding: 3% 5%;
    background: #32a0e9;
    color: #fff;
    margin: 10% 5%;
    font-size: 18px; }
    .inf_box .button i {
      font-size: 20px;
      position: absolute;
      -webkit-transform: translateX(-120%);
      -ms-transform: translateX(-120%);
      transform: translateX(-120%); }
  .inf_box h5 {
    margin: 20px 10px 0 10px;
    color: #3c82df;
    font-size: 18px; }

.inf_box2 {
  position: absolute;
  background: #fff;
  bottom: 0;
  z-index: 10;
  right: 0;
  border-radius: 15px 15px 0 0;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  -webkit-box-shadow: -5px 0px 5px rgba(102, 99, 99, 0.8);
  box-shadow: -5px 0px 5px rgba(102, 99, 99, 0.8); }
  @media only screen and (max-width: 575px) {
    .inf_box2 {
      width: 100vw; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box2 {
      width: 90vw; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box2 {
      width: 90vw; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box2 {
      width: 21vw; } }
  @media only screen and (min-width: 1200px) {
    .inf_box2 {
      width: 21vw; } }
  @media only screen and (max-width: 575px) {
    .inf_box2 {
      height: auto; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box2 {
      height: auto; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box2 {
      height: auto; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box2 {
      height: auto; } }
  @media only screen and (min-width: 1200px) {
    .inf_box2 {
      height: 85vh; } }
  @media only screen and (max-width: 575px) {
    .inf_box2 {
      padding: 0; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box2 {
      padding: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box2 {
      padding: 0; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box2 {
      padding: 0; } }
  @media only screen and (min-width: 1200px) {
    .inf_box2 {
      padding: 15vh 1vw 3vh 1vw; } }
  @media only screen and (max-width: 575px) {
    .inf_box2 {
      font-size: 14px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .inf_box2 {
      font-size: 14px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .inf_box2 {
      font-size: 14px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inf_box2 {
      font-size: 14px; } }
  @media only screen and (min-width: 1200px) {
    .inf_box2 {
      font-size: 16px; } }

.icon-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap; }
  .icon-item [type=checkbox] {
    position: absolute;
    font-size: 12px;
    visibility: hidden; }
    .icon-item [type=checkbox]:checked + label {
      border: 1px solid rgba(58, 176, 255, 0.452);
      background: rgba(175, 226, 255, 0.4); }
      .icon-item [type=checkbox]:checked + label:hover {
        background: rgba(152, 234, 255, 0.6); }
  .icon-item label {
    border: 1px solid #cecece;
    cursor: pointer;
    border-radius: 3px;
    min-width: 50px;
    margin: 5px;
    padding: 10px 2% 10px 10px; }
    .icon-item label:hover {
      background: rgba(243, 239, 234, 0.7); }
    .icon-item label img {
      position: absolute;
      width: 25px;
      -webkit-transform: translate(-35px, -5px);
      -ms-transform: translate(-35px, -5px);
      transform: translate(-35px, -5px); }

.icon-category [type=checkbox] {
  visibility: hidden; }
  .icon-category [type=checkbox]:checked + label:before {
    content: "取消全選"; }

.icon-category label {
  cursor: pointer;
  float: right;
  background: rgba(206, 211, 214, 0.432);
  color: dimgray;
  font-weight: 400;
  padding: 3px 8px;
  text-align: center;
  border-radius: 2px; }
  .icon-category label:before {
    content: "全選"; }

footer {
  text-align: center; }
  footer h2 {
    position: fixed;
    right: 0;
    bottom: 0%;
    width: 300px;
    font-size: 18px;
    border-radius: 10px;
    margin: 20px 10px;
    background: rgba(255, 255, 255, 0.5); }
  footer p {
    position: fixed;
    right: 0;
    width: 100vw;
    bottom: 0%;
    width: 100vw;
    background: #1b1b1b;
    z-index: 1;
    font-size: 14px;
    margin: 0;
    color: #fff; }

.type_bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3%;
  margin: 1%;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff; }
  .type_bar [type=text] {
    padding: 1%;
    border: none;
    outline: none;
    background: rgba(0, 0, 0, 0); }
  .type_bar textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none; }
  .type_bar img {
    width: 30px;
    margin: 0 1%; }
  .type_bar select {
    padding: 1% 0;
    width: 95%;
    border: none;
    outline: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("../img/arrow.png") no-repeat scroll right center transparent; }
  .type_bar select::-ms-expand {
    display: none; }

.type_listbox li {
  border: 1px solid #f07109;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 3% 1%;
  padding: 3%;
  opacity: 0.8;
  background: #ffe6a1;
  border-radius: 5px; }
  .type_listbox li:hover {
    opacity: 1; }
  .type_listbox li:active {
    background: #f8f8f8; }
  .type_listbox li i {
    float: right;
    color: #e71414; }
    .type_listbox li i:hover {
      color: #a5a2a2; }
  .type_listbox li h3 {
    color: #e77f1d;
    width: 100%;
    margin: 0; }
  .type_listbox li p {
    width: 100%;
    margin: 0; }
  .type_listbox li button {
    border-radius: 5px 0 0 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30%;
    color: #fff;
    height: 100%; }
    .type_listbox li button img {
      width: 35px;
      margin-right: 5%; }

.map_div {
  position: absolute;
  bottom: 20vh;
  left: 3vw;
  z-index: 1;
  width: 60px; }
  @media only screen and (max-width: 575px) {
    .map_div {
      display: block; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .map_div {
      display: block; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .map_div {
      display: block; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .map_div {
      display: block; } }
  @media only screen and (min-width: 1200px) {
    .map_div {
      display: none; } }
  .map_div .Positioning,
  .map_div .add-icon {
    width: 40px;
    height: 40px;
    margin: 10% 0;
    font-size: 12px;
    border-radius: 5px;
    -webkit-box-shadow: 3px 3px 3px #444;
    box-shadow: 3px 3px 3px #444;
    background: #fff; }

.add-icon {
  position: absolute;
  z-index: 1;
  width: 45px;
  height: 45px;
  border-radius: 5px;
  padding: 2px;
  font-size: 12px;
  -webkit-box-shadow: 3px 3px 3px #444;
  box-shadow: 3px 3px 3px #444;
  color: #fff;
  background: #1ae1f0; }
  @media only screen and (max-width: 575px) {
    .add-icon {
      top: 10vh; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon {
      top: 10vh; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon {
      top: 10vh; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon {
      top: 10vh; } }
  @media only screen and (min-width: 1200px) {
    .add-icon {
      top: 5vh; } }
  @media only screen and (max-width: 575px) {
    .add-icon {
      right: 3vw; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon {
      right: 3vw; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon {
      right: 3vw; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon {
      right: 3vw; } }
  @media only screen and (min-width: 1200px) {
    .add-icon {
      right: 25vw; } }
  .add-icon i {
    width: 100%;
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px); }

.add-icon-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  position: absolute;
  overflow: auto;
  margin: 0 5%;
  padding: 3% 1%;
  border-radius: 15px;
  background: #fff;
  z-index: 10; }
  @media only screen and (max-width: 575px) {
    .add-icon-div {
      top: 10vh; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon-div {
      top: 10vh; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon-div {
      top: 10vh; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon-div {
      top: 10vh; } }
  @media only screen and (min-width: 1200px) {
    .add-icon-div {
      top: 1vh; } }
  @media only screen and (max-width: 575px) {
    .add-icon-div {
      width: 90%; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon-div {
      width: 90%; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon-div {
      width: 90%; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon-div {
      width: 90%; } }
  @media only screen and (min-width: 1200px) {
    .add-icon-div {
      width: 50vw; } }
  @media only screen and (max-width: 575px) {
    .add-icon-div {
      height: 40vh; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon-div {
      height: 40vh; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon-div {
      height: 40vh; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon-div {
      height: 40vh; } }
  @media only screen and (min-width: 1200px) {
    .add-icon-div {
      height: auto; } }
  @media only screen and (max-width: 575px) {
    .add-icon-div {
      padding: 5% 0%; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon-div {
      padding: 5% 0%; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon-div {
      padding: 5% 0%; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon-div {
      padding: 5% 0%; } }
  @media only screen and (min-width: 1200px) {
    .add-icon-div {
      padding: 0; } }
  @media only screen and (max-width: 575px) {
    .add-icon-div {
      right: 0; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .add-icon-div {
      right: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .add-icon-div {
      right: 0; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .add-icon-div {
      right: 0; } }
  @media only screen and (min-width: 1200px) {
    .add-icon-div {
      right: 20vw; } }
  .add-icon-div p {
    margin: 0; }
  .add-icon-div button {
    font-size: 14px;
    margin: 2% 0;
    background: rgba(255, 255, 255, 0); }
    @media only screen and (max-width: 575px) {
      .add-icon-div button {
        width: 33%; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .add-icon-div button {
        width: 33%; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .add-icon-div button {
        width: 33%; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .add-icon-div button {
        width: 33%; } }
    @media only screen and (min-width: 1200px) {
      .add-icon-div button {
        width: 10%; } }
  .add-icon-div h3 {
    width: 100%;
    color: #76727e;
    margin: 1%;
    line-height: 40px; }
    .add-icon-div h3 button {
      margin: 0;
      background: rgba(247, 244, 244, 0.9);
      width: 40px;
      height: 40px;
      margin-right: 20px; }

#map {
  position: absolute;
  bottom: 6vh;
  left: 3vw;
  background: #fff;
  -webkit-box-shadow: 3px 3px 3px #444;
  box-shadow: 3px 3px 3px #444; }
  @media only screen and (max-width: 575px) {
    #map {
      width: 80px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    #map {
      width: 100px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    #map {
      width: 100px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    #map {
      width: 300px; } }
  @media only screen and (min-width: 1200px) {
    #map {
      width: 300px; } }
  @media only screen and (max-width: 575px) {
    #map {
      height: 80px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    #map {
      height: 100px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    #map {
      height: 100px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    #map {
      height: 200px; } }
  @media only screen and (min-width: 1200px) {
    #map {
      height: 200px; } }

@media only screen and (max-width: 575px) {
  .custom-map-tool {
    display: none; } }

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .custom-map-tool {
    display: none; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .custom-map-tool {
    display: none; } }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .custom-map-tool {
    display: none; } }

@media only screen and (min-width: 1200px) {
  .custom-map-tool {
    display: block; } }

.list_ul {
  overflow: auto;
  height: 30vh;
  padding: 0 5%; }
  @media only screen and (max-width: 575px) {
    .list_ul {
      height: 30vh; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .list_ul {
      height: 30vh; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .list_ul {
      height: 30vh; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .list_ul {
      height: 30vh; } }
  @media only screen and (min-width: 1200px) {
    .list_ul {
      height: 70vh; } }
  .list_ul li {
    margin: 1% 0;
    padding: 2%;
    border-bottom: solid 1px #e0e0e0; }
    .list_ul li:last-child {
      border: none; }
  .list_ul p {
    margin: 0;
    color: #aaa; }

.sub-analysis-div {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: solid 1px rgba(224, 224, 224, 0.5);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1vh 0; }
  .sub-analysis-div .analysis-div-img {
    width: 10%;
    height: 100%;
    margin: 0 2.5%; }
    .sub-analysis-div .analysis-div-img img {
      width: 100%; }
  @media only screen and (max-width: 575px) {
    .sub-analysis-div .btn-close {
      display: none; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .sub-analysis-div .btn-close {
      display: none; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .sub-analysis-div .btn-close {
      display: none; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sub-analysis-div .btn-close {
      display: none; } }
  @media only screen and (min-width: 1200px) {
    .sub-analysis-div .btn-close {
      display: block; } }
  .sub-analysis-div h3 {
    width: 60%;
    padding: 0 2%;
    color: #24a39d; }
  .sub-analysis-div p {
    color: #6e6e6e;
    margin: 0;
    font-size: 14px;
    font-weight: 500; }
  .sub-analysis-div .keyboard_arrow_up {
    width: 20%;
    color: #187ed1;
    float: right;
    cursor: pointer;
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    text-align: center; }
    .sub-analysis-div .keyboard_arrow_up:after {
      display: block;
      font-size: 14px;
      content: "詳細資料"; }
    .sub-analysis-div .keyboard_arrow_up:hover {
      opacity: 0.5; }
    @media only screen and (min-width: 1200px) {
      .sub-analysis-div .keyboard_arrow_up {
        display: none; } }
  .sub-analysis-div .keyboard_arrow_down {
    width: 20%;
    color: #ccc;
    float: right;
    cursor: pointer;
    text-align: center; }
    .sub-analysis-div .keyboard_arrow_down:hover {
      opacity: 0.5; }
    @media only screen and (min-width: 1200px) {
      .sub-analysis-div .keyboard_arrow_down {
        display: none; } }

.analysis-div-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.content_btn {
  width: 50%;
  padding: 1% 0;
  border: solid 1px rgba(168, 171, 173, 0.5);
  padding: 3% 0 3% 20px;
  background: #f7f7f7;
  color: #444;
  font-size: 16px; }
  .content_btn i {
    font-size: 18px;
    position: absolute;
    -webkit-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    transform: translateX(-110%); }
  .content_btn span {
    width: 100%; }