@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css);
.btn-close {
  outline: none;
  line-height: 0;
  text-align: center;
  vertical-align: middle;
  background: rgba(247, 244, 244, 0.9);
  top: 35%;
  cursor: pointer;
  padding: 1%;
  float: right;
  border-radius: 99em !important;
  border: none;
  z-index: 99;
  color: #949494; }
  .btn-close:hover {
    color: #444; }
  .btn-close:active {
    color: #6aaaff; }
  .btn-close i {
    font-size: 22px; }

/*工具列*/
.legend {
  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;
  top: 12%;
  width: 250px;
  right: 18%;
  padding: 0.5%;
  background: #f7f5f5;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px rgba(71, 70, 70, 0.411);
  box-shadow: 1px 1px 1px rgba(71, 70, 70, 0.411); }
  .legend ul {
    list-style-type: none;
    width: 80%; }
    .legend ul li {
      padding: 0 1% 0 55px;
      list-style-type: none; }
      .legend ul li.highway {
        color: #f0730c; }
        .legend ul li.highway p {
          background: #f0730c; }
        .legend ul li.highway:after {
          content: "公路"; }
      .legend ul li.bike {
        color: #42ace9; }
        .legend ul li.bike P {
          background: #42ace9; }
        .legend ul li.bike:after {
          content: "自行車道"; }
      .legend ul li.mountain {
        color: #76be32; }
        .legend ul li.mountain p {
          background: #76be32; }
        .legend ul li.mountain:after {
          content: "山徑"; }
  .legend p {
    width: 35px;
    height: 5px;
    position: absolute;
    margin: 5px 0 5px -40px; }

.mapcklist {
  font-size: 12px;
  margin: 10px 0 0 120px;
  position: absolute;
  z-index: 100 !important; }

.mapcklist dt {
  border-radius: 2px;
  padding: 6.5px;
  text-align: center;
  background: #fff;
  border: 1px #fff solid; }

.mapcklist dd {
  border: 1px #9e9e9e solid;
  background: #fff;
  margin: 0px;
  padding: 0px; }
  .mapcklist dd input {
    display: inline; }

.POI_tool {
  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;
  padding: 0.5%;
  top: 1%;
  width: 500px;
  right: 18%;
  background: #f7f5f5;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px rgba(71, 70, 70, 0.411);
  box-shadow: 1px 1px 1px rgba(71, 70, 70, 0.411); }
  .POI_tool 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;
    width: 90%;
    font-size: 14px; }
    .POI_tool ul li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
      flex-flow: column wrap;
      width: 70px;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
  .POI_tool [type=checkbox] {
    position: absolute;
    font-size: 12px;
    visibility: hidden; }
    .POI_tool [type=checkbox]:checked ~ label {
      border: 1px solid rgba(58, 150, 255, 0.452);
      background: rgba(153, 210, 218, 0.4); }
      .POI_tool [type=checkbox]:checked ~ label:hover {
        background: rgba(109, 191, 230, 0.6); }
  .POI_tool label {
    width: 40px;
    height: 40px;
    padding: 3%;
    border-radius: 99em;
    background: #fff;
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 0; }
    .POI_tool label:hover {
      background: rgba(243, 239, 234, 0.7); }
    .POI_tool label img {
      width: 35px; }

/**GOOGLE**/
input[type=range] {
  -webkit-appearance: none;
  width: 80%; }

input[type=range]:focus {
  outline: none; }

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #b1d4dd;
  border-radius: 1.3px; }

input[type=range]::-webkit-slider-thumb {
  height: 12px;
  width: 20px;
  border-radius: 99px;
  background: #444;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2px; }

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #8fabc5; }

input[type="range"]:active::-webkit-slider-thumb {
  height: 15px;
  width: 26px;
  margin-top: -4px; }

/**IEFIREFOX**/
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #dddddd;
  border-radius: 1.3px; }

input[type=range]::-moz-range-thumb {
  height: 12px;
  width: 25px;
  border-radius: 3px;
  background: #444;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2px; }

input[type="range"]:active::-moz-range-thumb {
  height: 15px;
  width: 26px;
  margin-top: -4px; }

/**IE**/
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent; }

input[type=range]::-ms-fill-lower {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #ddd;
  border-radius: 1.3px; }

input[type=range]::-ms-fill-upper {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #ddd;
  border-radius: 1.3px; }

input[type=range]::-ms-thumb {
  height: 12px;
  width: 25px;
  border-radius: 3px;
  background: #444;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2px; }

input[type=range]:focus::-ms-fill-lower {
  background: #ddd; }

input[type=range]:focus::-ms-fill-upper {
  background: #ccc; }

.tabbox {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  height: 50vh; }

.tabbox input[name=tabs] {
  display: none; }

.tabbox input:checked + .tp i {
  background: #eaf1f0;
  color: #fff; }

.tabbox input:checked + .tp p {
  color: #489fe6; }

.tp {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  margin: 2% 0; }
  .tp i {
    border: solid 2px #1cc9c0;
    margin: 1px;
    padding: 5px;
    border-radius: 99em; }
    .tp i:hover {
      color: #fff;
      background: rgba(68, 68, 68, 0.1); }
    .tp i img {
      width: 30px; }
  .tp p {
    margin: 0; }

.edit-content > div {
  padding: 1%;
  display: none;
  padding: 5%; }

#edit-tab1:checked ~ .edit-content #edit-content1 {
  display: block; }

#edit-tab2:checked ~ .edit-content #edit-content2 {
  display: block; }

#edit-tab3:checked ~ .edit-content #edit-content3 {
  display: block; }

#edit-tab4:checked ~ .edit-content #edit-content4 {
  display: block; }

#edit-tab5:checked ~ .edit-content #edit-content5 {
  display: block; }

#edit-tab6:checked ~ .edit-content #edit-content6 {
  display: block; }

#edit-tab7:checked ~ .edit-content #edit-content7 {
  display: block; }

#edit-tab8:checked ~ .edit-content #edit-content8 {
  display: block; }

#edit-tab9:checked ~ .edit-content #edit-content9 {
  display: block; }

#edit-tab10:checked ~ .edit-content #edit-content10 {
  display: block; }

.icon-content > div {
  padding: 1%;
  display: none;
  padding: 5%; }

#icon-tab1:checked ~ .icon-content #icon-content1 {
  display: block; }

#icon-tab2:checked ~ .icon-content #icon-content2 {
  display: block; }

#icon-tab3:checked ~ .icon-content #icon-content3 {
  display: block; }

#icon-tab4:checked ~ .icon-content #icon-content4 {
  display: block; }

#icon-tab5:checked ~ .icon-content #icon-content5 {
  display: block; }

#icon-tab6:checked ~ .icon-content #icon-content6 {
  display: block; }

#icon-tab7:checked ~ .icon-content #icon-content7 {
  display: block; }

#icon-tab8:checked ~ .icon-content #icon-content8 {
  display: block; }

#icon-tab9:checked ~ .icon-content #icon-content9 {
  display: block; }

#icon-tab10:checked ~ .icon-content #icon-content10 {
  display: block; }

/* Document
   ========================================================================== */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
  height: 100%;
  margin: 0;
  padding: 0; }

/* Sections
   ========================================================================== */
body {
  margin: 0;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
  height: 100%;
  margin: 0;
  padding: 0; }

article,
aside,
footer,
header,
nav,
section {
  display: block; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
figcaption,
figure,
main {
  display: block; }

figure {
  margin: 1em 40px; }

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Text-level semantics
   ========================================================================== */
a {
  background-color: transparent;
  font-family: monospace, "Noto Sans TC" !important;
  -webkit-text-decoration-skip: objects;
  text-decoration: none; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; }

b,
strong {
  font-weight: inherit; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
audio,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
button,
input,
optgroup,
select,
textarea {
  font-family: "Noto Sans TC" !important;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  border: none;
  outline: none;
  cursor: pointer; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  padding: 0.35em 0.75em 0.625em; }

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

/* Interactive
   ========================================================================== */
details,
menu {
  display: block; }

summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
canvas {
  display: inline-block; }

template {
  display: none; }

iframe {
  border: none; }

/* Hidden
   ========================================================================== */
[hidden] {
  display: none; }

ul {
  padding: 0;
  margin: 0;
  outline: none;
  list-style-type: none; }

li {
  padding: 0;
  margin: 0;
  outline: none;
  list-style-type: none; }

/*CSS*/
.show {
  display: block !important; }

.hide {
  display: none; }

.w3-animate-fading {
  -webkit-animation: fading 8s infinite;
  animation: fading 8s infinite; }

@-webkit-keyframes fading {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fading {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }