@charset "UTF-8";
/* ----------------------------------- */
/* ------ Item Switching ------ */
/* ----------------------------------- */
.item-area {
  display: none; }

.item-area.show {
  display: block;
  -webkit-animation: itemShow 1s both !important;
  animation: itemShow 1s both !important; }

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

@keyframes itemShow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* ----------------------------------- */
/* ------ Taiwan Map ------ */
/* ----------------------------------- */
.taiwanMap-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .taiwanMap-wrapper .btn-map-area.mobile {
    display: none;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -0.1rem; }
    .taiwanMap-wrapper .btn-map-area.mobile .btn-data {
      margin-left: 0.1rem;
      margin-bottom: 0.1rem; }
      .taiwanMap-wrapper .btn-map-area.mobile .btn-data:hover a, .taiwanMap-wrapper .btn-map-area.mobile .btn-data.active a {
        background-color: #fff;
        color: #044791; }
    .taiwanMap-wrapper .btn-map-area.mobile a {
      display: block;
      padding: 0.05rem 0.2rem;
      border: 1px solid #044791;
      background-color: #044791;
      color: #fff;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
  .taiwanMap-wrapper svg.btn-map-area {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 50%;
    min-width: 420px;
    max-height: 800px;
    padding: 0.4rem 2vw;
    background-color: rgba(4, 71, 145, 0.1); }
    .taiwanMap-wrapper svg.btn-map-area text {
      pointer-events: none;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
    .taiwanMap-wrapper svg.btn-map-area .btn-data {
      cursor: pointer; }
      .taiwanMap-wrapper svg.btn-map-area .btn-data .city {
        -webkit-transition: 0.5s !important;
        -o-transition: 0.5s !important;
        transition: 0.5s !important; }
      .taiwanMap-wrapper svg.btn-map-area .btn-data:hover .city, .taiwanMap-wrapper svg.btn-map-area .btn-data.active .city {
        fill: #CDE3BB; }
      .taiwanMap-wrapper svg.btn-map-area .btn-data:hover text, .taiwanMap-wrapper svg.btn-map-area .btn-data.active text {
        fill: #b75e5e; }
  .taiwanMap-wrapper .item-wrapper {
    width: 50%;
    max-height: 800px;
    min-height: 800px;
    padding: 0.4rem 2vw;
    background-color: #f5f5f5;
    overflow: auto; }

@media (max-width: 800px) {
  .taiwanMap-wrapper {
    display: block; }
    .taiwanMap-wrapper .btn-map-area.mobile {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 0.4rem; }
    .taiwanMap-wrapper svg.btn-map-area {
      display: none; }
    .taiwanMap-wrapper .item-wrapper {
      width: 100%;
      padding: 0.4rem 4vw; } }

@media (max-width: 575px) {
  .taiwanMap-wrapper .btn-map-area.mobile {
    margin-bottom: 6vw;
    margin-left: -2vw; }
    .taiwanMap-wrapper .btn-map-area.mobile .btn-data {
      margin-left: 2vw;
      margin-bottom: 2vw; }
    .taiwanMap-wrapper .btn-map-area.mobile a {
      display: block;
      padding: 0.03rem 0.12rem; }
  .taiwanMap-wrapper .item-wrapper {
    width: 100%;
    max-height: 80vh;
    min-height: inherit;
    padding: 8vw 4vw; } }

/* ----------------------------------- */
/* ------ Text Editor ------ */
/* ----------------------------------- */
.text-editor {
  padding: 0.4rem 0.06rem 0; }
  .text-editor * {
    word-break: break-all; }
  .text-editor table {
    width: 100%;
    max-width: 100%; }
    .text-editor table th, .text-editor table td {
      padding: 0.04rem 0.1rem;
      border: 1px solid #464646; }
    .text-editor table p {
      text-align: inherit; }
  .text-editor ul {
    list-style: initial;
    padding-left: 20px; }
  .text-editor img {
    max-width: 100%; }

@media (max-width: 767px) {
  .text-editor table {
    display: block;
    overflow: scroll; 
    z-index: 99;
    width: 100% !important; }
    .text-editor table tbody {
      white-space: nowrap; } }

@media (max-width: 575px) {
  .text-editor {
    padding: 8vw 1vw 0; } }

/* ----------------------------------- */
/* ------ Select ------ */
/* ----------------------------------- */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.04rem 0.55rem 0.04rem 0.15rem;
  border: 1px solid #044791;
  border-radius: 4px;
  background-color: #fff;
  background-image: -webkit-linear-gradient(45deg, transparent 50%, #fff 50%), -webkit-linear-gradient(315deg, #fff 50%, transparent 50%), -webkit-linear-gradient(left, #044791, #044791);
  background-image: -o-linear-gradient(45deg, transparent 50%, #fff 50%), -o-linear-gradient(315deg, #fff 50%, transparent 50%), -o-linear-gradient(left, #044791, #044791);
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, #044791, #044791);
  background-position: calc(100% - 0.19rem) calc(50% + 0.01rem), calc(100% - 0.15rem) calc(50% + 0.01rem), 100% 0;
  background-size: 0.04rem 0.04rem, 0.04rem 0.04rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  cursor: pointer;
  font-family: '微軟正黑體', sans-serif; }
  select:focus {
    outline: none; }

/* ----------------------------------- */
/* ------ Pagination ------ */
/* ----------------------------------- */
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 0.7rem; }
.pagination li {
  margin-right: 0.1rem;
}
.pagination li:not(.dot) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #044791;
  background-color: #fff;
  cursor: pointer;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }
.pagination li:not(.dot):last-child {
  margin-right: 0;
}
.pagination li:not(.dot):hover, .pagination li:not(.dot).active {
  background-color: #044791;
}
.pagination li:not(.dot):hover a, .pagination li:not(.dot).active a,
.pagination li:not(.dot):hover span, .pagination li:not(.dot).active span {
  color: #fff;
}
.pagination li:not(.dot).disabled {
  display: none;
}
.pagination li a, .pagination li span {
  padding: 0.02rem 0.08rem;
  font-size: 0.15rem;
  letter-spacing: normal;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

@media (max-width: 575px) {
  .pagination {
    margin-top: 14vw; } }

/* ----------------------------------- */
/* ------ Breadcrumb ------ */
/* ----------------------------------- */
nav ol.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0 0.3rem;
  margin-bottom: 0;
  border-radius: 0;
  background-color: transparent; }
  nav ol.breadcrumb * {
    font-size: 0.15rem;
    letter-spacing: 0.014rem;
    line-height: 1.8; }
  nav ol.breadcrumb .breadcrumb-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  nav ol.breadcrumb li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  nav ol.breadcrumb li, nav ol.breadcrumb a {
    margin: 0 !important; }
    nav ol.breadcrumb li *, nav ol.breadcrumb a * {
      cursor: pointer;
      -webkit-transition: 0.5s 0s;
      -o-transition: 0.5s 0s;
      transition: 0.5s 0s; }
    nav ol.breadcrumb li:hover *, nav ol.breadcrumb a:hover * {
      color: #044791; }
  nav ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding-left: 0.05rem;
    padding-right: 0.05rem; }
  nav ol.breadcrumb .breadcrumb-item.active * {
    color: #044791; }

/* ----------------------------------- */
/* ------ Img Switching ------ */
/* ----------------------------------- */
@-webkit-keyframes imgSwitching {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes imgSwitching {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

#img-switching {
  z-index: 10; }
  #img-switching .img-mask.show {
    -webkit-animation: imgSwitching 0.5s both;
    animation: imgSwitching 0.5s both; }
  #img-switching .img-mask {
    width: 100%;
    height: 0;
    padding-bottom: 66%;
    overflow: hidden; }
    #img-switching .img-mask img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
}
  #img-switching ul.thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.1rem;
    background-color: #f5f5f5;
    overflow-y: auto; }
  #img-switching li {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 18%;
    padding-bottom: 12%;
    cursor: pointer;
    overflow: hidden; }
    #img-switching li img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
    }
    #img-switching li .active-border {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 60;
      pointer-events: none; }
  #img-switching li.active .active-border {
    border: 3px solid rgba(4, 72, 145, 0.8); }

@media (max-width: 991px) {
  #img-switching li {
    width: 20%;
    padding-bottom: 14%;
  }
}
@media (max-width: 767px) {
    #img-switching li {
      width: 16%;
      padding-bottom: 10%; }
}
@media (max-width: 575px) {
    #img-switching li {
      width: 22%;
      padding-bottom: 14%; }
}

/* ----------------------------------- */
/* ------ Hotline ------ */
/* ----------------------------------- */
a.hotline {
  display: block;
  margin-bottom: 0.4rem;
  -webkit-filter: brightness(1);
  filter: brightness(1);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }
  a.hotline:hover {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8); }

a.hotline {
  font-size: 0.18rem;
  letter-spacing: 0.018rem;
  color: #b75e5e;
  cursor: pointer; }

@media (max-width: 575px) {
  a.hotline {
    margin-bottom: 6vw; } }

/* ----------------------------------- */
/* ------ Burger ------ */
/* ----------------------------------- */
#burger {
  position: fixed;
  right: 0.05rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: auto;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  z-index: 99999;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s; }
  #burger .span-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
    #burger .span-area .span {
      width: 0.32rem;
      height: 2px;
      margin-top: 0.08rem;
      background-color: #464646;
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
    #burger .span-area .span:first-child {
      margin-top: 0; }
  #burger:not(.isOpened):hover .span-area .span {
    background-color: #044791; }
    #burger:not(.isOpened):hover .span-area .span:nth-child(1) {
      width: 0.28rem; }
    #burger:not(.isOpened):hover .span-area .span:nth-child(2) {
      width: 0.38rem; }
    #burger:not(.isOpened):hover .span-area .span:nth-child(3) {
      width: 0.28rem; }
  #burger:not(.isOpened):hover .span-area.isOpened {
    -webkit-transform: rotate(90deg) !important;
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important; }
    #burger:not(.isOpened):hover .span-area.isOpened .span {
      background-color: #044791; }

#burger.isOpened {
  right: 0.15rem;
  top: 0.2rem;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0); }
  #burger.isOpened .span-area .span {
    background-color: #044791; }
    #burger.isOpened .span-area .span:nth-child(1) {
      -webkit-transform: translateY(0.1rem) rotate(-135deg);
      -ms-transform: translateY(0.1rem) rotate(-135deg);
      transform: translateY(0.1rem) rotate(-135deg); }
    #burger.isOpened .span-area .span:nth-child(2) {
      width: 0; }
    #burger.isOpened .span-area .span:nth-child(3) {
      -webkit-transform: translateY(-0.1rem) rotate(135deg);
      -ms-transform: translateY(-0.1rem) rotate(135deg);
      transform: translateY(-0.1rem) rotate(135deg); }
  #burger.isOpened:hover .span-area {
    -webkit-transform: rotate(90deg) !important;
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important; }
    #burger.isOpened:hover .span-area .span {
      background-color: #044791; }

#burger.isShow {
  opacity: 1;
  visibility: visible; }

@media (max-width: 991px) {
  #burger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0.3rem;
    top: 0.7rem;
    opacity: 1;
    visibility: visible; }
  #burger.isOpened {
    right: 0.3rem;
    top: 0.6rem; } }

@media (max-width: 575px) {
  #burger {
    right: 6vw;
    top: 0.5rem; }
    #burger .span-area .span {
      width: 0.28rem;
      margin-top: 0.07rem; }
    #burger:not(.isOpened):hover .span-area .span:nth-child(1) {
      width: 0.24rem; }
    #burger:not(.isOpened):hover .span-area .span:nth-child(2) {
      width: 0.34rem; }
    #burger:not(.isOpened):hover .span-area .span:nth-child(3) {
      width: 0.24rem; }
  #burger.isOpened {
    right: 6vw;
    top: 0.4rem; }
    #burger.isOpened .span-area .span:nth-child(1) {
      -webkit-transform: translateY(0.09rem) rotate(-135deg);
      -ms-transform: translateY(0.09rem) rotate(-135deg);
      transform: translateY(0.09rem) rotate(-135deg); }
    #burger.isOpened .span-area .span:nth-child(2) {
      width: 0; }
    #burger.isOpened .span-area .span:nth-child(3) {
      -webkit-transform: translateY(-0.09rem) rotate(135deg);
      -ms-transform: translateY(-0.09rem) rotate(135deg);
      transform: translateY(-0.09rem) rotate(135deg); } }

/* ----------------------------------- */
/* ------ Form ------ */
/* ----------------------------------- */
.form-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }
  .form-wrapper .form-group {
    width: 50%; }
  .form-wrapper .form-group:nth-child(1) {
    margin-right: 0.17rem; }
  .form-wrapper .form-group:nth-child(2) {
    margin-left: 0.17rem; }

.form-group.last {
  margin-bottom: 0 !important; }

.form-group {
  margin-bottom: 0.38rem; }
  .form-group label {
    width: 100%; }
  .form-group span.red-dot {
    color: red !important;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8); }
  .form-group .enter-block {
    -webkit-appearance: none;
    padding: 0.12rem 0.15rem;
    border: none;
    border-radius: 0;
    border: 1px solid rgba(70, 70, 70, 0.3);
    background-color: #fff;
    font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
    font-size: 0.17rem;
    letter-spacing: 0.02rem;
    color: #464646 !important;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  .form-group input.enter-block {
    width: 100%;
    height: 0.46rem; }
  .form-group textarea.enter-block {
    width: 100%;
    height: 1.8rem;
    resize: none; }
  .form-group input:focus, .form-group textarea:focus {
    outline: none;
    border: 1px solid #044791; }
    .form-group input:focus::-webkit-input-placeholder, .form-group input:focus::-webkit-input-placeholder, .form-group textarea:focus::-webkit-input-placeholder, .form-group textarea:focus::-webkit-input-placeholder {
      color: transparent; }
    .form-group input:focus:-ms-input-placeholder, .form-group input:focus:-ms-input-placeholder, .form-group textarea:focus:-ms-input-placeholder, .form-group textarea:focus:-ms-input-placeholder {
      color: transparent; }
    .form-group input:focus::-ms-input-placeholder, .form-group input:focus::-ms-input-placeholder, .form-group textarea:focus::-ms-input-placeholder, .form-group textarea:focus::-ms-input-placeholder {
      color: transparent; }
    .form-group input:focus::placeholder, .form-group input:focus::placeholder, .form-group textarea:focus::placeholder, .form-group textarea:focus::placeholder {
      color: transparent; }
  .form-group input::-webkit-input-placeholder, .form-group textarea::-webkit-input-placeholder {
    font-size: 0.16rem;
    color: #9b9b9b;
    opacity: 0.7;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  .form-group input:-ms-input-placeholder, .form-group textarea:-ms-input-placeholder {
    font-size: 0.16rem;
    color: #9b9b9b;
    opacity: 0.7;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  .form-group input::-ms-input-placeholder, .form-group textarea::-ms-input-placeholder {
    font-size: 0.16rem;
    color: #9b9b9b;
    opacity: 0.7;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  .form-group input::placeholder, .form-group textarea::placeholder {
    font-size: 0.16rem;
    color: #9b9b9b;
    opacity: 0.7;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  .form-group p.label {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 0.1rem;
    font-size: 0.16rem;
    line-height: 1.5;
    color: rgba(102, 102, 102, 0.5);
    overflow: hidden;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    z-index: 10; }
  .form-group p.label.msg {
    top: 0.1rem;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  .form-group p.label.focus {
    top: 0;
    margin: 0;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateY(-120%) scale(0.9);
    -ms-transform: translateY(-120%) scale(0.9);
    transform: translateY(-120%) scale(0.9);
    color: #044791; }

label {
  margin: 0; }

.send-block button.btn-more {
  margin-top: 0.4rem;
  border: none;
  background-color: transparent;
  cursor: pointer; }

@media (max-width: 575px) {
  .form-wrapper .form-group:nth-child(1) {
    margin-right: 0.1rem; }
  .form-wrapper .form-group:nth-child(2) {
    margin-left: 0.1rem; }
  .form-group {
    margin-bottom: 0.38rem; }
    .form-group textarea.enter-block {
      height: 1.45rem; }
  .send-block button.btn-more {
    margin-top: 10vw; } }

@media (max-width: 375px) {
  .form-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .form-wrapper .form-group {
      width: 100%; }
    .form-wrapper .form-group:nth-child(1) {
      margin-right: 0; }
    .form-wrapper .form-group:nth-child(2) {
      margin-left: 0; } }

/* ----------------------------------- */
/* ------ Map ------ */
/* ----------------------------------- */
#map iframe {
  width: 100%;
  height: 4rem; }

@media (max-width: 575px) and (orientation: portrait) {
  #map iframe {
    height: 45vw; } }

/* ----------------------------------- */
/* ------ Copyright ------ */
/* ----------------------------------- */
#copyright {
  font-size: 0.13rem; }
  #copyright span.p-copyright {
    margin-right: 0.1rem; }
  #copyright .p-copyright {
    font-size: 0.13rem;
    letter-spacing: 0.017rem;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  #copyright a.p-copyright:hover {
    color: #044791; }