@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");

* {
  font-family: "Noto Sans TC", "Noto Serif TC", sans-serif;
  font-size: 13pt;
}

.noto_serif {
  font-family: "Noto Serif TC", sans-serif;
}

p,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
img {
  margin: 0px;
  padding: 0px;
}

p {
  font-weight: 300;
  text-align: justify;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: inherit;
}

.home {
  min-height: 100vh;
}

.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
}

.bg-cover.cover-rectangle {
  padding-bottom: 64%;
}

.bg-cover.cover-square {
  padding-bottom: 100%;
}

.text-row-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.text-row-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.text-row-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

::selection {
  color: #fff;
  background-color: #4caf50;
}

.x-bg {
  background-color: #607d8b !important;
}

.x-bg-light,
.x-bg-heavy {
  position: relative;
}

.x-bg-light > *,
.x-bg-heavy > * {
  position: relative;
  z-index: 3;
}

.x-bg-light::before,
.x-bg-heavy::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.x-bg-heavy::before {
  background-color: rgba(0, 0, 0, 0.2);
}

ul#Listing,
ol#Listing {
  list-style: none;
}

ul#Listing.bf_icon li,
ol#Listing.bf_icon li {
  position: relative;
}

ul#Listing.bf_icon li::before,
ol#Listing.bf_icon li::before {
  font: 14px / 1 FontAwesome;
  margin-right: 5px;
}

#Listing.circle {
  list-style: circle;
  padding-left: 20px;
}

.bf_icon.stars li::before {
  content: "\f005";
  color: rgb(255, 193, 7);
}

.bf_icon.check li::before {
  content: "\f046";
  color: rgb(157, 200, 21);
}

ul.footer-info {
  list-style: none;
  max-width: cacl(100% - 20px);
  text-align: center;
  margin-top: 20px;
}

ul.footer-info li {
  list-style: none;
  display: inline-block;
  color: #eee;
  font-size: 0.9em;
  margin-left: 10px;
}

ul.footer-info li span.title {
  font-weight: 600;
  margin-right: 10px;
}

.bread {
  margin: 10px 0;
}

.bread ol.site-page a {
  color: #ccc;
}

.bread ol.site-page a:hover {
  color: #999;
}

.bread ol.site-page {
  font-size: 0.8rem;
}

.bread ol.site-page li:nth-child(n + 2) {
  position: relative;
}

.bread ol.site-page li:nth-child(n + 2):before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f105";
  color: #9dc815;
  margin-right: 10px;
}

.bread ol.site-page li.active a {
  font-weight: 400;
  color: #999;
  padding-bottom: 2px;
  border-bottom: 1px dashed #ccc;
}

.bread ol.site-page li a span {
  font-size: 0.8rem;
}

@media (max-width: 991px) {
  .copyright {
    margin-bottom: 45px;
  }

  ul.footer-info li:first-child {
    display: block;
  }
}

.home a.more {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #999;
  margin: 30px auto;
  transition: all 0.3s;
}

.home a.more:hover {
  background-color: #003580;
  color: #fff;
  border: 1px solid transparent;
}

/*---------------------
--- Header
---------------------*/

nav.navbar .collapse ul.navbar-nav li.nav-item:not(:last-child) {
  padding-right: 50px;
}

nav.navbar ul.tool-navbar {
  list-style: none;
  display: flex;
}

nav.navbar a.nav-link {
  color: #fff !important;
}

nav.navbar ul.tool-navbar li.nav-item {
  list-style: none;
}

.hs-sub-menu {
  background-color: rgb(68 89 99) !important;
}

@media (min-width: 992px) {
  header.moment .collapse > ul > li > a.nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    color: rgb(255, 255, 255) !important;
  }

  header.moment ul.hs-sub-menu {
    background-color: rgb(238, 238, 238);
  }

  header.moment ul.has-sub-menu a.nav-link {
    color: rgb(85, 85, 85) !important;
  }

  nav.navbar {
    padding: 0px 15px;
  }

  .navbar-nav {
    margin-left: 50px;
  }

  a.navbar-brand {
    transition: all 0.3s ease 0s;
    display: flex;
    align-items: center;
    max-width: 160px;
    padding: 15px 0;
  }

  a.navbar-brand img {
    max-width: 100%;
    width: 100%;
  }

  header.moment .navbar-brand {
    padding: 10px 0;
  }
}

@media (min-width: 992px) {
  #Mmenu {
    display: none;
  }
}

@media (max-width: 991px) {
  .u-header__section {
    display: none;
  }

  .u-header {
    position: relative;
  }
}

#m-header-top {
  max-height: 40px;
  text-align: center;
}

#m-header-top a.brand {
  display: block;
  padding: 5px 0px;
}

#m-header-top a.brand img {
  height: 30px;
}

#m-header-bottom {
  position: fixed;
  z-index: 888;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#m-header-bottom ul.navbar-m {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0px;
}

#m-header-bottom ul.navbar-m li {
  display: flex;
  flex: 0 0 50px;
}

#m-header-bottom ul.navbar-m li:not(:first-child) {
  position: relative;
}

#m-header-bottom ul.navbar-m li:not(:first-child)::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  border-left: 1px solid rgba(255 255 255 / 0.5);
  top: 0px;
  left: 0px;
}

#m-header-bottom ul.navbar-m li.m-lg {
  flex: 1 1 100%;
}

#m-header-bottom ul.navbar-m li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 45px;
  color: rgb(255, 255, 255);
}

#m-header-bottom ul.navbar-m li.dropup {
  z-index: 99;
}

#m-header-bottom ul.navbar-m li.dropup button {
  width: 100%;
  color: rgb(255, 255, 255);
}

#m-header-bottom .dropup .dropdown-toggle::after {
  display: none;
}

#m-header-bottom ul.navbar-m li.dropup .dropdown-menu {
  width: 100%;
  display: block;
  transition: all 0.3s ease 0s;
  z-index: 999;
  min-width: inherit;
  top: 100vh !important;
}

#m-header-bottom ul.navbar-m li.dropup .dropdown-menu.show {
  left: 0px !important;
  top: 0px !important;
}

#m-header-bottom ul.navbar-m li.dropup .dropdown-menu a.dropdown-item {
  text-align: center;
  padding: 15px 5px;
}

#KV .kv-banner .js-slide {
  background-position: center center;
  height: 100vh !important;
}

/*---------------------
--- KV
---------------------*/

#KV .kv-banner h1 {
  margin: 0px;
  width: 100%;
  height: 100vh;
  position: absolute;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

#KV .kv-banner h1 img {
  display: block;
  z-index: 3;
  max-width: 100%;
}

#KV .scroll-down {
  position: absolute;
  bottom: calc(100px);
  left: 0px;
  right: 0px;
  text-align: center;
  z-index: 3;
}

#KV .scroll-down a {
  display: block;
  position: relative;
  width: 120px;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 1rem;
  margin-bottom: 30px;
}

#KV .scroll-down a::after {
  width: 15px;
  height: 15px;
  content: "";
  border-right: 1px solid rgb(255, 255, 255);
  border-bottom: 1px solid rgb(255, 255, 255);
  position: absolute;
  transform: rotate(45deg);
  bottom: -15px;
  left: 50%;
  margin-left: -8px;
  animation: 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite normal none
    running aro;
}

#KV .slick-list.draggable {
  animation: 60s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite normal none
    running zooming;
}

@keyframes aro {
  0% {
    bottom: -15px;
  }

  50% {
    bottom: -25px;
  }

  100% {
    bottom: -15px;
  }
}

@keyframes zooming {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

.welcome {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(3, 169, 244);
}

.welcome .item {
  max-width: 300px;
}

/*---------------------
--- Home ind
---------------------*/

#About {
  background: url("../../images/banner/mv_03.jpg") center center / cover
    no-repeat fixed;
  position: relative;
  z-index: -2;
  display: flex;
  justify-content: center;
  align-items: center;
}

#About::after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.about-wrap {
  position: fixed;
  min-height: 100vh;
  z-index: 2;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#About .about-text {
  color: rgb(255, 255, 255);
  z-index: 5;
  text-align: center;
}

#About .about-text h4 {
  font-weight: 600;
  margin-bottom: 20px;
}

#About .about-text p {
  margin-bottom: 30px;
  text-align: center;
}

@media (min-width: 1200px) {
  #About .about-text h4 {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  #About .about-text p {
    font-size: 1.2rem;
    margin-bottom: 50px;
    text-align: center;
  }
}

#Page_header {
  color: rgb(255, 255, 255);
}

#Page_header .title {
  padding-top: 50px;
  padding-bottom: 50px;
}

#Page_header .title h2 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
}

#Page_header .title p {
}

@media (min-width: 992px) {
  .offset-header {
    margin-top: 70px;
  }

  #Page_header .title h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
}

/*---------------------
--- RowSlider
---------------------*/

#RowSlider .js-slide article.slider {
  display: flex;
}

#RowSlider .js-slide article.slider .item {
  height: 60vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#RowSlider .js-slide article.slider .item.img {
  flex: 0 0 60%;
}

#RowSlider .js-slide article.slider .item.img .bg-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
  transition: all 4s linear 0s;
  transform: scale(1.1);
}

#RowSlider .js-slide article.slider .item.content {
  flex: 1 0 40%;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  color: rgb(255, 255, 255);
}

#RowSlider .js-slide article.slider .item.content .time span.date {
  font-size: 8rem;
  line-height: 6rem;
}

#RowSlider .js-slide article.slider .item.content .time span.my {
  font-size: 1.8rem;
}

#RowSlider .js-slide article.slider .item.content .text {
  margin-top: 10px;
}

#RowSlider .js-slide article.slider .item.content h1 a {
  font-weight: 600;
  font-size: 2rem;
  text-align: justify;
  max-width: 400px;
  display: block;
}

#RowSlider .js-pagination {
  list-style: none;
  width: inherit;
  top: inherit;
  bottom: 10px;
  left: inherit;
  right: calc(40% + 30px);
}

#RowSlider .js-pagination li {
  list-style: none;
  display: inline-block;
  margin: inherit;
}

#RowSlider .js-pagination li:not(:first-child) {
  margin-left: 5px;
}

#RowSlider .js-pagination li span {
  width: 20px;
  height: 20px;
  border-radius: 0px;
  border: 2px solid rgb(255, 255, 255);
  background-color: transparent;
  opacity: 1;
}

#RowSlider .js-pagination li.slick-active span {
  background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
  #RowSlider .js-slide article.slider .item {
    height: 36vw;
  }
}

@media (max-width: 767px) {
  #RowSlider {
    padding: 30px;
    background-color: #003580;
    position: relative;
    z-index: 5;
  }

  #RowSlider .js-slide article.slider {
    flex-wrap: wrap;
  }

  #RowSlider .js-slide article.slider .item {
    flex: 1 1 100% !important;
    height: 64vw;
  }

  #RowSlider .js-slide article.slider .item.content {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 20px;
    height: 120px;
    overflow: hidden;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  #RowSlider .js-slide article.slider .item.content .time {
    flex: 1 1 100%;
  }

  #RowSlider .js-slide article.slider .item.content .time span.date {
    font-size: 3rem;
    line-height: 2rem;
  }

  #RowSlider .js-slide article.slider .item.content .time span.my {
    font-size: 1rem;
  }

  #RowSlider .js-slide article.slider .item.content .time .subject {
    font-size: 16px;
    background-color: #fe541e;
    margin-top: 0px;
    padding: 2px;
    min-width: inherit;
    display: inline-block;
    padding: 0 15px;
  }

  #RowSlider .js-slide article.slider .item.content h1 a {
    flex: 1 1 100%;
    font-size: 1.6rem;
    max-height: 62px;
    text-align: center;
  }

  #RowSlider .js-slide article.slider .item.content .text {
    margin-top: 0px;
    text-align: center;
  }

  #RowSlider .js-pagination {
    bottom: 120px;
    right: inherit;
    left: 20px;
  }

  #RowSlider .slick-active article.slider .item.content p {
    display: none;
    color: #2196f3;
  }
}

@media (max-width: 576px) {
  #RowSlider .js-slide article.slider .item.content h1 a {
    font-size: 1.2rem;
    max-height: 70px;
  }
}

.slick-active article.slider .item.content .time span.date {
  animation: 0.5s linear 0s 1 normal backwards running fadeInUp;
}

#RowSlider .slick-active article.slider .item.content .time span.my {
  animation: 0.5s linear 0.2s 1 normal backwards running fadeInUp;
}

#RowSlider .slick-active article.slider .item.content .time .subject {
  animation: 0.5s linear 0.4s 1 normal backwards running fadeInUp;
}

#RowSlider .slick-active article.slider .item.content h1 {
  animation: 0.5s linear 0.6s 1 normal backwards running fadeInUp;
}

#RowSlider .slick-active article.slider .item.content p {
  animation: 0.5s linear 0.8s 1 normal backwards running fadeInUp;
  text-align: justify;
  font-size: 1rem;
}

#RowSlider .slick-active article.slider .item.content .user-tag {
  animation: 0.5s linear 1s 1 normal backwards running fadeInUp;
}

#RowSlider .slick-active article.slider .item.img .bg-cover {
  transform: scale(1);
}

#RowSlider .user-tag {
  margin-top: 10px;
}

#RowSlider .user-tag {
  margin-top: 0px;
}

.user-tag {
  display: flex;
  align-items: center;
}

.user-tag .headphoto {
  flex: 0 0 30px;
  border-radius: 100%;
  overflow: hidden;
}

.user-tag .headphoto img {
  display: block;
}

.user-tag .user-name {
  padding-left: 5px;
}

@media (max-width: 767px) {
  .user-tag .headphoto {
    flex: 0 0 22px;
  }

  .user-tag .user-name {
    font-size: 0.9rem;
  }
}

.time {
  text-align: center;
}

.time span {
  display: block;
  font-family: Signika, sans-serif;
}

.time span.date {
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 2.3rem;
  color: #999;
}

.time span.my {
  font-size: 0.8rem;
}

.time .subject {
  background-color: rgb(0, 84, 152);
  color: rgb(255, 255, 255);
  padding: 5px;
  min-width: 100px;
  text-align: center;
  margin-top: 5px;
}

.sidebar_block #RowSlider .js-slide article.slider {
  flex-wrap: wrap;
}

.sidebar_block #RowSlider .js-slide article.slider .item {
  flex: 1 1 100% !important;
  height: 220px;
}

.sidebar_block #RowSlider .js-slide article.slider .item.content {
  flex-direction: row;
  padding: 10px 20px;
  align-items: center;
  height: 120px;
  overflow: hidden;
  max-width: 540px;
  margin: 0px auto;
}

.sidebar_block #RowSlider .js-slide article.slider .item.content .time {
  flex: 0 0 90px;
}

.sidebar_block
  #RowSlider
  .js-slide
  article.slider
  .item.content
  .time
  span.date {
  font-size: 3rem;
  line-height: 2rem;
}

.sidebar_block #RowSlider .js-slide article.slider .item.content .time span.my {
  font-size: 1rem;
}

.sidebar_block
  #RowSlider
  .js-slide
  article.slider
  .item.content
  .time
  .subject {
  font-size: 0.8rem;
  margin-top: 0px;
  padding: 2px;
  min-width: 80px;
}

.sidebar_block #RowSlider .js-slide article.slider .item.content h1 a {
  flex: 1 1 100%;
  font-size: 1.6rem;
  max-height: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar_block #RowSlider .js-slide article.slider .item.content .text {
  padding-left: 10px;
  margin-top: 0px;
}

.sidebar_block #RowSlider .js-pagination {
  bottom: 120px;
  right: inherit;
  left: 20px;
}

.sidebar_block #RowSlider .slick-active article.slider .item.content p {
  display: none;
}

.sidebar_block #RowSlider .js-slide article.slider .item.content h1 a {
  font-size: 1.2rem;
  max-height: 70px;
}

/*---------------------
--- Block listing
---------------------*/

.frame-group {
  display: flex;
}

.frame-group .room-filter {
  flex: 0 0 20%;
  padding: 15px 30px 0px 0px;
}

.frame-group .room-filter .filtershowup {
  display: none;
}

.frame-group .room-filter .filter-wrap {
}

.frame-group .room-filter .filter-wrap a {
  text-align: center;
  background-color: rgb(33, 150, 243);
  color: rgb(255, 255, 255);
  padding: 10px;
  margin-top: 30px;
  display: block;
}

.frame-group .room-filter .filter-wrap .filter {
  margin-bottom: 30px;
}

.frame-group .room-filter .filter-wrap .filter:not(:first-child) {
  padding-top: 30px;
  border-top: 1px solid rgb(170, 170, 170);
}

.frame-group .room-filter .filter-wrap .filter p.title {
  font-size: 1.3rem;
  margin-bottom: 15px;
  display: block;
  position: relative;
  padding-left: 20px;
}

.frame-group .room-filter .filter-wrap .filter p.title span {
  position: absolute;
  top: 0px;
  left: 0px;
}

.frame-group .room-filter .filter-wrap .filter p.title span i {
  font-size: 1rem;
}

.frame-group .room-filter .filter-wrap .filter ul {
  list-style: none;
  margin-left: 10px;
  display: block;
}

.frame-group .room-filter .filter-wrap .filter ul li {
  list-style: none;
}

#Product.listing {
  flex: 0 1 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#Product.listing .item {
  flex: 0 0 25%;
}

#Product.listing .item .room_wrap {
  padding: 0px 10px 10px;
  margin-bottom: 30px;
}

#Product.listing .item .room_wrap a.cover {
  display: block;
  padding-bottom: 100%;
  margin-bottom: 8px;
}

#Product.listing .item .room_wrap .content {
}

#Product.listing .item .room_wrap .content h4.title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 0px;
}

#Product.listing .item .room_wrap .content h4.title a {
  color: rgb(0, 113, 194);
}

#Product.listing .item .room_wrap .content .cate {
  margin-bottom: 8px;
  margin-top: 2px;
}

#Product.listing .item .room_wrap .content .cate span,
.img_wrap .cate span {
  display: inline-block;
  line-height: 16px;
}

#Product.listing .item .room_wrap .content .cate span a,
.img_wrap .cate span a {
  font-size: 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 5px;
}

#Product.listing .item .room_wrap .content .cate span.tag,
.img_wrap .cate span.tag {
  color: rgb(255, 255, 255);
  border-radius: 4px;
}

span.tag.hotel-01 {
  background-color: rgb(255, 152, 0);
}

span.tag.hotel-02 {
  background-color: rgb(76, 175, 80);
}

span.tag.hotel-03 {
  background-color: rgb(33, 150, 243);
}

span.tag.hotel-04 {
  background-color: rgb(0, 188, 212);
}

span.tag.hotel-05 {
  background-color: rgb(0, 150, 136);
}

#Product.listing .item .room_wrap .content .cate span.hotel {
}

#Product.listing .item .room_wrap .content .price {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgb(0, 0, 0);
}

#Product.listing .item .room_wrap .content .detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#Product.listing .item .room_wrap .content .type,
li.dir .type {
  background-image: url("../../images/icon/people.png");
  display: inline-block;
  height: 20px;
  position: relative;
}

#Product.listing .item .room_wrap .content .type.type-01,
li.dir .type.type-01 {
  width: 10px;
}

#Product.listing .item .room_wrap .content .type.type-02,
li.dir .type.type-02 {
  width: 20px;
}

#Product.listing .item .room_wrap .content .type.type-03,
li.dir .type.type-03 {
  width: 30px;
}

#Product.listing .item .room_wrap .content .type.type-04,
li.dir .type.type-04 {
  width: 40px;
}

#Product.listing .item .room_wrap .content .type.type-04::after {
  content: "+";
  position: absolute;
  display: block;
  top: -3px;
  right: -10px;
  font-weight: 600;
  color: rgb(204, 204, 204);
}

@media (max-width: 991px) {
  #Product.listing .item {
    flex: 0 1 33%;
  }
}

@media (max-width: 767px) {
  #Product.listing {
    flex: 0 0 100%;
  }

  #Product.listing .item {
    flex: 0 1 50%;
  }

  .frame-group .room-filter {
    position: fixed;
    z-index: 999;
    left: -230px;
    bottom: 20px;
    background-color: rgb(255, 255, 255);
    padding: 10px 10px 10px 30px;
    border-radius: 0px 8px 8px 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
    border: 1px solid rgb(238, 238, 238);
    transition: all 0.3s ease 0s;
    min-width: 175px;
  }

  .frame-group .room-filter.show {
    left: -10px;
  }

  .frame-group .room-filter + #Product.listing::before {
    content: "";
    display: block;
    position: fixed;
    top: 0px;
    right: -100vw;
    background-color: rgba(255, 255, 255, 0.7);
    width: 100vw;
    height: 100vh;
    z-index: 998;
    transition: all 0.3s ease 0s;
  }

  .frame-group .room-filter.show + #Product.listing::before {
    right: 0vw;
  }

  .frame-group .room-filter .filtershowup {
    display: block;
    position: absolute;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
    border: 1px solid rgb(238, 238, 238);
    right: -85px;
    top: 0px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    transition: all 0.3s ease 0s;
  }

  .frame-group.events .room-filter .filtershowup {
    right: -110px;
    top: -20px;
  }

  .frame-group .room-filter.show .filtershowup {
    bottom: inherit;
    top: -25px;
    right: -25px;
  }

  .frame-group .room-filter .filtershowup a {
    width: 100px;
    height: 50px;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease 0s;
  }

  .frame-group .room-filter.show .filtershowup a {
    left: inherit;
    margin-left: -50px;
  }

  .frame-group .room-filter .filtershowup a i {
    font-size: 1.6rem;
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(33, 150, 243);
  }

  .frame-group .room-filter .filter-wrap {
    position: relative;
  }

  .frame-group .room-filter .filter-wrap .filter {
    margin-bottom: 10px;
  }

  .frame-group .room-filter .filter-wrap .filter:not(:first-child) {
    padding-top: 10px;
  }

  .frame-group .room-filter .filter-wrap .filter p.title {
    font-size: 1rem;
  }

  .frame-group .room-filter .filter-wrap .filter p.title span {
    top: 1px;
  }
}

@media (max-width: 500px) {
  #Product.listing .item {
    flex: 0 0 100%;
  }

  #Product.listing .item .room_wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid rgb(238, 238, 238);
    margin-bottom: 10px;
  }

  #Product.listing .item .room_wrap a.cover {
    flex: 0 0 30%;
    padding-bottom: inherit;
    height: 80px;
  }

  #Product.listing .item .room_wrap .content {
    flex: 0 0 70%;
    padding-left: 20px;
  }
}

#Product.listing.Event {
  flex-wrap: wrap;
}

#Product.listing.Event .item {
  flex: 0 0 100%;
  margin-bottom: 10px;
}

#Product.listing.Event .item .event_wrap {
  display: flex;
  border-top: 1px solid rgb(238, 238, 238);
  border-right: 1px solid rgb(238, 238, 238);
  border-left: 1px solid rgb(238, 238, 238);
  border-image: initial;
  border-bottom: none;
}

#Product.listing.Event .item .more_info {
}

#Product.listing.Event .item .more_info .card {
  border-radius: 0px;
}

#Product.listing.Event .item .more_info .card h5 {
  margin: 0px;
}

#Product.listing.Event .item .more_info .card h5 a {
  display: block;
  text-align: center;
  padding: 5px;
  background-color: rgb(238, 238, 238);
}

#Product.listing.Event .item .more_info .card .content {
  padding: 10px;
  border-top: 1px solid rgb(238, 238, 238);
}

#Product.listing.Event .item .more_info .card .content > p {
  padding: 15px 20px;
  background-color: rgb(235, 243, 255);
  text-align: justify;
  margin-bottom: 10px;
}

#Product.listing.Event .item .event_wrap .cover {
  flex: 0 0 380px;
}

#Product.listing.Event .item .event_wrap .cover a.bg-cover {
  padding-bottom: 50%;
}

#Product.listing.Event .item .event_wrap > .content {
  display: flex;
  flex: 1 1 100%;
  padding: 20px 30px;
  flex-direction: column;
  justify-content: center;
}

#Product.listing.Event .item .event_wrap .content > .title {
  margin-bottom: 20px;
}

#Product.listing.Event .item .event_wrap .content .title .subject {
  display: inline-block;
  padding: 2px 10px;
  background-color: rgb(255, 152, 0);
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

#Product.listing.Event .item .event_wrap .content .title h2.title {
  margin-bottom: 0px;
  font-size: 17px;
  line-height: 24px;
  text-align: justify;
}

#Product.listing.Event .item .event_wrap .content .title h2.title a {
  font-size: 17px;
}

#Product.listing.Event .item .event_wrap .content .action {
  text-align: right;
}

#Product.listing.Event .item .event_wrap .content .action a.btn {
  padding: 2px 15px;
  background: rgb(33, 150, 243);
  border-radius: 4px;
  color: rgb(255, 255, 255);
  flex: 0 0 120px;
  display: inline-block;
}

#Stars.listing {
  padding-left: 30px;
  list-style: circle;
}

#Stars.listing li {
  font-size: 1rem;
}

@media (max-width: 576px) {
  #Product.listing.Event .item .event_wrap {
    flex-wrap: wrap;
  }

  #Product.listing.Event .item .event_wrap .cover {
    flex: 0 0 100%;
  }

  #Product.listing.Event .item .event_wrap .content .action a.btn {
    display: block;
  }
}

.img_wrap {
  display: flex;
  position: relative;
}

.img_wrap .title {
  position: absolute;
  z-index: 5;
  top: 0px;
  left: 0px;
  width: 60%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}

.img_wrap .title h1 {
  font-weight: 600;
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 5px;
}

.img_wrap > .cover {
  flex: 0 0 60%;
}

.img_wrap > .cover a.bg-cover {
  height: 100%;
  width: 100%;
  display: block;
}

.img_wrap .img_more {
  flex: 0 0 40%;
  display: flex;
  flex-wrap: wrap;
}

.img_wrap .img_more .more {
  flex: 0 0 50%;
}

@media (min-width: 992px) {
  #Room_img {
    padding-top: 70px;
  }
}

@media (max-width: 991px) {
  .img_wrap .img_more .more a {
    padding-bottom: 100% !important;
  }
}

@media (max-width: 767px) {
  .img_wrap > .cover {
    flex: 0 0 40%;
  }

  .img_wrap .img_more {
    flex: 0 0 60%;
  }
}

@media (max-width: 576px) {
  #Info .container-lg {
    padding-left: 0px;
    padding-right: 0px;
  }

  .img_wrap .title {
    width: 100%;
  }

  .img_wrap {
    flex-wrap: wrap;
  }

  .img_wrap > .cover {
    flex: 0 0 100%;
  }

  .img_wrap > .cover a.bg-cover {
    padding-bottom: 64%;
  }

  .img_wrap .img_more {
    flex: 0 0 100%;
  }

  .img_wrap .img_more .more {
    flex: 0 0 25%;
    border-top: 2px solid #fff;
  }

  .img_wrap .img_more .more:not(:last-child) {
    border-left: 2px solid #fff;
  }
}

#Info {
  background-color: rgb(242, 242, 242);
  padding-top: 50px;
  padding-bottom: 50px;
}

#Info.event_body {
  background-color: rgb(255, 255, 255);
}

.main {
  display: flex;
  background-color: rgb(255, 255, 255);
  padding-left: 20px;
  padding-right: 20px;
}

.main .main_content {
  flex: 0 0 70%;
}

.main .main_sidebar {
  flex: 0 0 30%;
}

.main_sidebar .sidebar_block .title {
  margin-bottom: 20px;
}

.main_sidebar .sidebar_block:not(:first-child) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 3px double #eee;
}

.main_sidebar .sidebar_block .title h4 {
  font-size: 1.2rem;
}

.main .main_content .main_block {
  margin-bottom: 50px;
}

.main .main_content .main_block:not(:last-of-type) {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(221, 221, 221);
}

.main .main_content .main_block > .title > h2,
.main .main_content .main_block > .title h3 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  color: rgb(96, 125, 139);
  margin-bottom: 20px;
  line-height: 1.1em;
}

.main .main_content .main_block > .title {
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}

.main .main_content .main_block > .title > h2 {
  margin: 0;
}

.main .main_content .main_block > .title > h2 + span.title {
  color: #9e9e9e;
  font-size: 0.8em;
}

#Hotel_info.main_block > .content {
  display: flex;
  align-items: center;
}

#Hotel_info.main_block > .content .cover {
  flex: 0 0 120px;
}

#Hotel_info.main_block > .content .cover a {
  border-radius: 100%;
  overflow: hidden;
}

#Hotel_info.main_block > .content .desc {
  text-align: justify;
}

#Hotel_info.main_block > .content .desc .hotel-title {
  margin-bottom: 10px;
}

#Hotel_info.main_block > .content .desc .hotel-title h4 {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  margin-bottom: 15px;
}

#Hotel_add.listing li {
  font-size: 1rem;
  color: rgb(170, 170, 170);
}

#Hotel_add.listing li:not(:last-child) {
  margin-right: 15px;
}

#Hotel_add.listing li i {
  margin-right: 5px;
}

#Hotel_photo.listing {
  display: flex;
  margin: 30px 0px;
}

#Hotel_photo.listing .photo {
  flex: 0 0 25%;
}

.main_content .quote {
  background-color: rgb(250, 250, 250);
  padding: 10px;
}

.main_content .quote p {
  font-size: 1rem;
  margin: 0px;
}

@media (min-width: 992px) {
  #Hotel_info.main_block > .content .desc {
    padding-left: 50px;
  }

  .main {
    padding-left: 50px;
    padding-right: 50px;
  }

  #Hotel_photo.listing .photo:not(:last-of-type) {
    border-right: 2px solid rgb(255, 255, 255);
  }
}

@media (max-width: 991px) {
  #Hotel_info.main_block > .content {
    flex-wrap: wrap;
    justify-content: center;
  }

  #Hotel_info.main_block > .content .cover {
    margin-bottom: 20px;
  }

  #Hotel_info.main_block > .content .desc {
  }

  #Hotel_info.main_block > .content .desc .hotel-title h4 {
    text-align: center;
  }

  #Hotel_add.listing {
    flex-wrap: wrap;
    max-width: 300px;
    margin: 0px auto;
    justify-content: center;
  }

  #Hotel_add.listing li:first-child {
    flex: 0 0 100%;
    margin-right: 0px;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .main .main_content {
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  .main {
    flex-wrap: wrap;
    padding-top: 30px !important;
  }

  .main .main_content,
  .main .main_sidebar {
    flex: 0 0 100%;
  }

  .main .main_content {
  }
}

@media (max-width: 576px) {
  #Hotel_photo.listing {
    flex-wrap: wrap;
  }

  #Hotel_photo.listing .photo {
    flex: 0 0 50%;
  }
}

ul.listing {
  display: flex;
  flex-wrap: wrap;
}

#Direction.listing {
  flex-wrap: wrap;
}

#Direction.listing li.dir {
  flex: 0 0 50%;
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

#Direction.listing li.dir h5 {
  margin-right: 10px;
  font-weight: 400;
  font-size: 15px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

#Direction.listing li.dir .content,
#Direction.listing li.dir .content span {
  font-size: 1em;
  line-height: 1em;
}

.room_items {
}

.room_items h4 {
  font-size: 1.1rem;
  font-weight: 600;
  position: relative;
  padding-left: 25px;
  color: #607d8b;
  margin-bottom: 10px;
}

.room_items h4:before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 1px;
  background-color: #ccc;
  top: 50%;
  left: 0px;
  position: absolute;
  display: block;
}

#Item.listing {
  flex-wrap: wrap;
  margin-bottom: 20px;
}

#Item.listing li {
  padding: 5px;
  font-size: 1rem;
  color: rgb(170, 170, 170);
}
#Item.listing li:not(:last-of-type) {
  margin-right: 5px;
}
#Item.listing li i {
  margin-right: 5px;
}

@media (max-width: 576px) {
  #Direction.listing li.dir {
    display: block;
  }

  #Direction.listing li.dir .content {
    display: inline-block;
  }
}

.reservation_wrap {
  display: flex;
  flex-wrap: wrap;
}

.reservation_wrap .res {
  flex: 0 0 100%;
}

.reservation_wrap .res a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 15px;
  background-color: rgb(76, 175, 80);
  position: relative;
}

.reservation_wrap .res a span {
  position: relative;
  z-index: 5;
}

.reservation_wrap .res a span.lead {
  font-size: 1.6rem;
  line-height: 1.6rem;
  font-weight: 600;
  color: rgb(255, 255, 255);
  margin-bottom: 5px;
}

.reservation_wrap .res a span.small {
  color: rgb(255, 255, 255);
}

.reservation_wrap .res a::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0%;
  background-color: rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease 0s;
  left: 0px;
  bottom: 0px;
}

.reservation_wrap .res:hover a::after {
  height: 100%;
}

@media (min-width: 992px) {
  .reservation_wrap .res:first-child {
    margin-bottom: 10px;
  }
}

#Price.listing {
  margin-bottom: 20px;
}

#Price.listing .price_wrap {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

#Price.listing .price_wrap:not(:last-of-type) {
  border-bottom: 1px solid rgb(238, 238, 238);
}

#Price.listing .price_wrap .item > span {
  font-size: 15px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 300;
}

#Price.listing .price_wrap .item > span + button i {
  font-size: 0.8rem;
}

#Price.listing .price_wrap .value span {
  font-size: 1.2rem;
}

#Price.listing .price_wrap .value span.dollar::before {
  margin-right: 5px;
  font-size: 0.8rem;
}

#Price.listing .price_wrap .value span.dollar.dollar-ntd::before {
  content: "NTD";
}

#Notice.listing {
  list-style: circle;
  padding-left: 20px;
  margin-bottom: 20px;
}
#Notice.listing li:not(:last-of-type) {
  margin-bottom: 5px;
  font-size: 0.9em;
}
.event_head .cover_wrap {
  max-width: 1110px;
  margin: 0px auto;
  position: relative;
  background-color: #f2f2f2;
  text-align: center;
}

.event_head .cover_wrap .cover {
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  position: relative;
}

.event_head .cover_wrap .cover img {
  width: 100%;
  max-width: 100%;
}

.event_head .cover_wrap a.more_photo {
  display: block;
  position: absolute;
  background-color: rgb(255, 255, 255);
  padding: 2px 10px;
  color: rgb(85, 85, 85);
  bottom: 10px;
  left: 10px;
  border-radius: 4px;
  font-size: 1rem;
}

.event_body .title_bar.main_block {
}

.event_body .title_bar.main_block ul.listing li {
  padding: 2px 10px;
  border-radius: 10px;
  color: rgb(255, 255, 255);
  font-size: 0.8rem;
}

.event_body .title_bar.main_block ul.listing li:not(:first-child) {
  margin-left: 10px;
}

.event_body .title_bar.main_block ul.listing li.trip_line {
  background-color: rgb(139, 195, 74);
}

.event_body .title_bar.main_block ul.listing li.trip_type {
  background-color: rgb(0, 53, 128);
}

.event_body .title_bar.main_block h1 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;
}

.event_body .title_bar.main_block p {
  padding: 15px 20px;
  background-color: rgb(235, 243, 255);
  text-align: justify;
}

ul.photo_wrap li {
  margin-bottom: 20px;
}

ul.photo_wrap li a {
  display: block;
  position: relative;
}

ul.photo_wrap li a figure {
  margin-bottom: 25px;
}

ul.photo_wrap li a figure img {
  width: 100%;
  transition: all 0.3s ease 0s;
}

ul.photo_wrap li:hover img {
  opacity: 1;
}

ul.photo_wrap li a figcaption {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 10px;
}

ul.photo_wrap li a figcaption p {
  margin: 0px;
  color: #fff;
}

@media (max-width: 768px) {
  ul.photo_wrap li {
    font-size: 1rem;
  }

  ul.photo_wrap li a figcaption {
    padding: 4px;
    position: relative;
    background-color: transparent;
  }

  ul.photo_wrap li a figcaption p {
    font-size: 1rem;
    color: rgb(51, 51, 51);
    margin-bottom: 30px;
  }

  #Page_header.events {
    display: none;
  }

  .bread {
    display: none;
  }

  #Info {
    padding-top: 0;
  }
}

ul.content-nav {
  list-style: none;
  margin-bottom: 30px;
}

ul.content-nav li a.js-go-to {
  font-size: 1.3rem;
  padding: 5px 0px 5px 15px;
  font-weight: normal;
  font-family: "Noto Sans TC", sans-serif;
  position: relative;
  letter-spacing: 2px;
}

ul.content-nav li.active a::before {
  content: "";
  width: 3px;
  height: 20px;
  background-color: rgb(0, 0, 0);
  display: block;
  position: absolute;
  left: 0px;
  top: calc(50% - 10px);
}

ul.content-nav li.active a {
  font-weight: 600;
}

ul.content-nav li a:hover {
  opacity: 0.5;
}

@media (max-width: 767px) {
  ul.content-nav {
    display: none;
  }
}

#qa_cate {
  margin-bottom: 50px;
}

#qa_cate h2.title {
  padding: 30px 0px;
  position: relative;
  margin-bottom: 0px;
  font-size: 21px;
  font-weight: 300;
}

#qa_cate h2.title::after {
  width: 50px;
  height: 2px;
  background-color: rgb(51 93 153);
  left: 0px;
  bottom: 13px;
  content: "";
  position: absolute;
}

#qa_cate .card {
  border: none;
}

#qa_cate .card-header {
  background-color: unset;
  transition: all 0.3s ease 0s;
}

#qa_cate .card-header:hover {
  background-color: rgb(243, 243, 243);
}

#qa_cate .card-header a {
  color: rgb(45, 56, 90);
  position: relative;
  padding-left: 20px;
  visibility: visible;
  display: block !important;
}

#qa_cate .card-header a::after,
#qa_cate .card-header a::before {
  display: block;
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: rgb(221, 221, 221);
  left: 0px;
  transition: all 0.5s ease 0s;
}

#qa_cate .card-header a::before {
  top: 10px;
  transform: rotate(270deg);
}

#qa_cate .card-header a::after {
  top: 10px;
  transform: rotate(180deg);
}

#qa_cate .card-header a[aria-expanded="true"]::before {
  transform: rotate(0deg);
}

#qa_cate .card-header a[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}

#qa_cate .card-block {
  padding: 10px 10px 10px 35px;
}

#qa_cate .card-block ol {
  padding-left: 0px;
  list-style: none;
  margin-bottom: 25px;
}

#qa_cate .card-block ol li {
  padding-left: 25px;
}

#qa_cate .card-block ol li a {
  color: rgb(153, 153, 153);
  font-size: 1rem;
  line-height: 25px;
}

#qa_cate .card-block img {
  max-width: 100%;
}

@media (max-width: 578px) {
  #qa_cate h2.title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0px;
  }

  #qa_cate .card p {
    font-size: 1rem;
  }
}

/*---------------------
------- Article Listing
---------------------*/

#Articles.listing article {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: calc(40% + 20px);
  margin-top: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(221, 221, 221);
  z-index: 3;
}

#Articles.listing article:last-child {
  border-bottom: none;
}

#Articles.listing article header {
  position: static;
  z-index: 10;
}

#Articles.listing article header a.cover {
  position: absolute;
  width: 40%;
  left: 0px;
  top: 0px;
  max-height: calc(100% - 20px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Articles.listing article header .meta time {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#Articles.listing article header .meta time span.date {
  order: 2;
  font-size: 2rem;
  line-height: 1.6rem;
}

#Articles.listing article header .meta time span.date::after {
  content: "/";
  font-weight: 100;
}

#Articles.listing article header .meta time span.my {
  font-size: 1rem;
  order: 2;
  color: #999;
}

#Articles.listing article header .meta time .subject {
  margin: 0px 10px 0px 0px;
  order: 1;
  font-size: 0.8rem;
  min-width: inherit;
  padding: 2px 7px;
}

#Articles.listing article header .title h4 {
  text-align: justify;
  margin-bottom: 10px;
}

#Articles.listing article header .title h4 a {
  font-weight: 600;
  font-size: 1.4rem;
}

#Articles.listing article header .title h4 a:hover {
  color: #999;
}

#Articles.listing article .ar_dec {
  margin-bottom: 10px;
}

#Articles.listing article .ar_dec p {
  color: #999;
  max-height: 60px;
  overflow: hidden;
  font-size: 13px;
}

#Articles.listing article.first {
  display: block;
  padding: 0px 0px 20px;
  margin-bottom: 10px;
  margin-top: 0px;
}

#Articles.listing article.first header a.cover {
  position: relative;
  max-height: inherit;
  width: inherit;
  left: inherit;
  top: inherit;
  display: block;
  align-items: inherit;
  justify-content: inherit;
  margin-bottom: 5px;
}

#Articles.listing article.first header .title h4 {
  margin-bottom: 5px;
}

.btn_act {
  text-align: right;
}

.btn_act a {
  display: inline-block;
  background-color: rgb(89, 91, 98);
  color: rgb(255, 255, 255);
  padding: 2px 14px;
  font-size: 0.8rem;
  transition: all 0.3s ease 0s;
}

.btn_act a:hover {
  background-color: rgb(0, 0, 0);
}

.ar_list article {
  display: flex;
  align-items: flex-start;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.ar_list article:last-child {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: none;
}

.ar_list article .time {
  flex: 0 0 55px;
}

.ar_list article .time .subject {
  display: none;
}

.ar_list article .content {
  flex: 1 1 80%;
  padding-left: 10px;
}

.ar_list article .content .ar_title h5 {
  text-align: justify;
  line-height: 1.2rem;
  overflow: hidden;
  margin-bottom: 6px;
}

.ar_list article .content .ar_title h5 a {
  font-size: 1rem;
  color: #999;
}

.ar_list article .content .ar_title h5 a:hover {
  color: #666;
}

.ar_list article .content .user-tag .headphoto {
  flex: 0 0 20px;
  height: 20px;
}

.ar_list article > .content .user-tag .user-name {
  font-size: 0.8rem;
}

@media (max-width: 767px) {
  #Articles.listing article {
    padding-left: calc(20% + 20px);
  }

  #Articles.listing article header a.cover {
    width: 20%;
  }

  #Articles.listing article header .title h4 {
    font-size: 1.1rem;
    font-weight: 300;
  }

  #Articles.listing article header .meta time .subject {
    min-width: inherit;
    font-size: 0.8rem;
    padding: 2px 10px;
    white-space: nowrap;
  }
}

/*Article_wrap*/

#Article_wrap {
}

#Article_wrap > header {
}

#Article_wrap > header h1 {
  font-size: 21px;
  font-weight: 600;
  text-align: justify;
  margin-bottom: 10px;
}

#Article_wrap > header figure {
  position: relative;
}

#Article_wrap > header figure img {
  width: 100%;
  max-width: 100%;
}

#Article_wrap > header .btn_act {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
}

#Article_wrap > header time {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#Article_wrap > header time span.date {
  order: 2;
  font-size: 2rem;
  line-height: 1.6rem;
}

#Article_wrap > header time span.date::after {
  content: "/";
  font-weight: 100;
}

#Article_wrap > header time span.my {
  font-size: 1rem;
  order: 2;
}

#Article_wrap > header time .subject {
  margin: 0px 10px 0px 0px;
  order: 1;
  font-size: 0.8rem;
  min-width: inherit;
  padding: 2px 7px;
}

#Article_wrap .introl {
  padding: 20px;
  background-color: #f3f3f3;
  margin-bottom: 20px;
}

#Article_wrap .article-content p {
  text-align: justify;
  font-size: 16px;
  margin-bottom: 20px;
}

#Article_wrap .article-content p strong {
  font-weight: 600;
}

#Article_wrap .article-content h3 {
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 21px;
}

#Article_wrap .article-content h3 > .title {
  display: block;
  font-weight: 100;
  font-size: 12px;
  color: #999;
}

#Article_wrap .article-content h4 {
  font-size: 20px;
  font-weight: 800;
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

#Article_wrap .article-content h5 {
  font-weight: 600;
  margin-bottom: 10px;
}

#Article_wrap .article-content h4:before,
#Article_wrap .article-content h4:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0px;
  border-top: 1px solid #000;
}

#Article_wrap .article-content h4:before {
  bottom: 4px;
}

#Article_wrap .article-content h4:after {
  bottom: 0px;
  border-top: 2px solid #000;
}

#Article_wrap .article-content img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

#Article_wrap .article-content a {
  position: relative;
  margin-left: 4px;
  margin-right: 4px;
  color: rgb(0, 113, 194);
}

#Article_wrap .article-content a:after {
  content: "\f08e";
  margin-left: 5px;
  margin-right: 4px;
  font: normal normal normal 14px/1 FontAwesome;
}

#Article_wrap .article-content table.table thead tr {
  color: #fff;
}

#Article_wrap .article-content table.table thead tr th {
  text-align: center;
}

#Article_wrap .article-content table.table tbody td {
  vertical-align: middle;
}

#Article_wrap .article-content table.table tbody td:first-child {
  color: #fff;
}

#Article_wrap .article-content table.table td {
  text-align: center;
}

#Article_wrap .article-content ol {
  list-style: decimal;
  padding-left: 20px;
  margin: 20px 0;
}

#Article_wrap .article-content ol li {
}

@media (max-width: 577px) {
  #Article_wrap > header h1 {
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }
}

/*---------------------
--- popup
---------------------*/

#Popup {
  width: calc(100% - 40px);
  max-width: 760px;
  max-height: inherit;
  border-radius: 8px;
  overflow: hidden;
}

#Popup > button {
  padding-right: 10px;
  padding-top: 10px;
}

#Popup > button i {
  color: #fff;
}

#Popup .Popup_wrap {
}

#Popup .Popup_wrap .title {
  background-color: #3398dc;
  padding: 20px;
}

#Popup .Popup_wrap .title h5 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  max-width: calc(100% - 50px);
}

#Editwrap {
  background-color: #fff;
}

#Editwrap .form-section {
  padding: 15px;
  position: relative;
}

#Editwrap .form-section:not(:first-child) {
  border-top: 1px solid #ccc;
  padding-top: 30px;
  position: relative;
}

#Editwrap .form-section > h3 {
  font-size: 15px;
  margin-bottom: 10px;
  position: relative;
  font-weight: 600;
}

#Editwrap .form-group {
  position: relative;
  margin-bottom: 12px;
}

#Editwrap .form-group .lockdown {
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 42px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  position: relative;
}

#Editwrap .form-group .lockdown p {
  font-weight: 100;
}

#Editwrap .form-group .lockdown p span {
  font-weight: 600;
  letter-spacing: 0px;
  color: #6c757d;
}

#Editwrap .form-group .lockdown:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.02);
}

#Editwrap .form-group.has-button a.edit {
  position: absolute;
  top: calc(50% - 15px);
  right: 10px;
  width: 30px;
  background-color: #00bcd4;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 4px;
}

.form-group label {
  font-size: 0.8rem;
  margin-bottom: 0px;
}

#Editwrap .form-group small {
}

#Editwrap .form-group small a {
  display: inline-block;
  margin: 0 4px;
  color: #00bcd4;
  font-weight: 300;
  text-decoration: underline;
}

#Editwrap .form-rows {
  display: flex;
  justify-content: space-between;
}

#Editwrap .form-rows .form-group {
  flex: 0 0 calc(50% - 10px);
}

#Editwrap .form-rows .form-group input.form-control {
  padding: 5px;
  border-radius: 0;
}

@media (max-width: 767px) {
  #EditContainer .dashboard .user-nav {
    display: none;
  }

  #EditContainer {
    padding-top: 62px;
  }

  #EditContainer .dashboard {
    flex-direction: column;
    padding-top: 0;
  }

  #EditContainer .dashboard .user-nav .user-cover {
    display: flex;
    align-items: center;
    margin: 15px 0;
  }

  #EditContainer .dashboard .user-nav .user-cover .user-head-photo {
    flex: 0 0 50px;
    margin: 0;
  }

  #EditContainer .dashboard .user-nav .user-cover h4.name {
    padding-left: 20px;
  }

  #EditContainer .dashboard .user-nav .navbar-user {
    position: fixed;
  }
}

.form-group .form-selection {
  width: 100%;
  padding: 5px;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none;
  position: relative;
  border-radius: 0;
}

#Editwrap .form-rows .form-group .form-selection:focus {
}

#Editwrap .edit-action {
  padding: 0 20px 20px 20px;
}

#Editwrap .edit-action button {
}

#Editwrap .edit-action small {
  display: block;
}

#Editwrap .edit-action small a {
  display: inline-block;
}

#Insurance.listing {
}

#Insurance.listing .form-group {
  margin: 0;
}

#Insurance.listing .form-group label,
.form-group.hide-label label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#Insurance.listing table {
  min-width: 460px;
}

#Insurance.listing .form-group input {
  padding: 2px 2px 2px 10px;
  border-radius: 0;
}

#Insurance.listing td {
  vertical-align: middle;
  text-align: center;
}

#Insurance.listing tbody td:first-child {
  font-size: 0.8rem;
}

#Insurance.listing tbody tr:not(:first-child) {
  border-top: 1px solid #eee;
}

#Insurance.listing tbody tr:not(:first-child) td {
}

#Insurance.listing .add_insurance a.btn {
  width: 100%;
  text-align: center;
  background-color: #335d99;
  padding: 10px;
  color: #fff;
}

#Insurance.listing a.btn i {
  font-size: 19px;
  position: relative;
}

#Insurance.listing i.icon-user.minus:after {
  content: "\e615";
  font-size: 10px;
  position: absolute;
  top: 0px;
  right: -10px;
}

#Insurance.listing i.icon-user.add:after {
  content: "\e095";
  font-size: 10px;
  position: absolute;
  top: 0px;
  right: -10px;
}

@media (min-width: 1200px) {
  #Editwrap .form-section {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  #Editwrap .form-rows .form-group input.form-control {
    height: 28px;
  }

  #Editwrap .form-rows .form-group {
    flex: 0 0 calc(50% - 5px);
    max-height: 52px;
  }

  #Insurance.listing table {
    display: flex;
  }

  #Insurance.listing table thead {
    flex: 0 0 80px;
  }

  #Insurance.listing table thead > tr {
    display: flex;
    flex-wrap: wrap;
  }

  #Insurance.listing table thead > tr > th {
    font-size: 0.8rem;
    flex: 0 0 100%;
  }

  #Insurance.listing table tbody {
    flex: 1 1 100%;
    display: flex;
  }

  #Insurance.listing table tbody > tr {
    display: flex;
    flex-wrap: wrap;
    min-width: 120px;
  }

  #Insurance.listing table tbody > tr > td {
    flex: 0 0 100%;
  }

  #Insurance.listing table tbody > tr > td span {
    font-size: 12px;
    width: 100%;
    text-align: center;
    color: #999;
  }

  #Insurance.listing table tbody > tr > td span.ppl:before {
    content: "第";
  }

  #Insurance.listing table tbody > tr > td span.ppl:after {
    content: "位";
  }

  #Insurance.listing table thead > tr > th,
  #Insurance.listing table tbody > tr > td {
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
  }

  #Insurance.listing tbody tr:not(:first-child) {
    border-top: none;
    border-left: 1px solid #eee;
  }

  #Insurance.listing table tbody > tr > td a {
    display: block;
    width: 100%;
  }

  #Insurance.listing .add_insurance {
    position: absolute;
    top: 25px;
    right: 5px;
  }

  #Insurance.listing .add_insurance a.btn {
    padding: 2px 10px;
  }

  #Insurance.listing .add_insurance a.btn i {
    display: none;
  }

  #Insurance.listing .add_insurance a i,
  #Insurance.listing .add_insurance a span {
    font-size: 0.8rem;
  }

  #Insurance.listing .add_insurance a span {
    margin-left: 0px !important;
  }

  #Insurance.listing i.icon-user.add:after,
  #Insurance.listing i.icon-user.minus:after {
    top: -5px;
  }

  #Insurance.listing a.btn i {
    font-size: 1rem;
  }

  #Popup .Popup_wrap .title {
    padding: 10px;
  }

  #Popup .Popup_wrap .title h5 {
    max-width: calc(100% - 20px);
    font-size: 15px;
  }

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

  #Editwrap .form-section {
    padding: 5px 10px;
  }
}

/*----------------------------
    video background
----------------------------*/

.video-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  z-index: 10;
}

.video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 101vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home-header {
  min-height: 100vh;
  max-width: 100vw;
  position: relative;
}

.home-header:before,
.home-header:after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20vh;
  background: linear-gradient(180deg, black, transparent);
  z-index: 11;
}

.home-header:after {
  top: inherit;
  bottom: 0px;
  height: 50vh;
  background: linear-gradient(0deg, black, transparent);
}

@media (min-aspect-ratio: 16/9) {
  .video-container iframe {
    height: 56.25vw;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-container iframe {
    width: 177.78vh;
  }
}

.video-container + #Kv.banner .container-lg {
  max-width: inherit !important;
}

.video-container + #Kv.banner {
  height: 95vh;
  margin: 0;
  position: relative;
}

.video-container + #Kv.banner #Bar {
  margin-bottom: 50px;
}

.video-container + #Kv.banner .content {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .video-container + #Kv.banner .content {
    margin-bottom: inherit;
    margin-top: auto;
  }

  .video-container + #Kv.banner #Bar {
    margin-bottom: 0px;
  }
}

/*--------------------
    Kv.stage
--------------------*/
.kv-stage {
  position: absolute;
  z-index: 12;
  left: 50px;
  bottom: 64px;
  right: 50px;
}

.kv-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.kv-logo {
  max-width: 100%;
  position: absolute;
  bottom: 210px;
  left: 50px;
  z-index: 12;
  margin-left: -5px;
}

.kv-logo h1 {
  max-width: 240px;
}

.kv-title {
  display: flex;
  flex-direction: column;
}

.kv-title span {
  color: #fff;
  font-size: 4vh;
  font-weight: 600;
  line-height: 100%;
}

.kv-title span:not(:last-of-type) {
  margin-bottom: 10px;
}

.kv-footer {
  color: rgba(255 255 255 / 0.8);
}

@media (max-width: 767px) {
  .kv-logo {
    margin-left: 0;
    top: 80px;
    bottom: inherit;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    max-width: inherit;
    display: flex;
    justify-content: center;
  }

  .kv-stage {
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 10vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: 7vh;
    z-index: 12;
  }

  .kv-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
  }

  .kv-title {
  }

  .kv-title span {
    font-size: 6vw;
    text-align: center;
  }

  .kv-footer {
    margin-top: 20px;
  }

  .kv-footer > p {
    text-align: center;
  }
}
/*-----------------------------
    facility page
-----------------------------*/

#Photos.listing {
}

#Photos.listing .photo {
  display: flex;
  position: relative;
  margin-bottom: 100px;
}

#Photos.listing .photo:nth-child(even) {
  flex-direction: row-reverse;
}

#Photos.listing .photo:last-of-type {
  margin-bottom: 0;
}

#Photos.listing .photo:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 60%;
  background-color: rgb(227 224 196 / 34%);
  left: 30%;
  top: 20%;
  z-index: 2;
}

#Photos.listing .photo:nth-child(even):after {
  left: -30%;
}

#Photos.listing .photo .cover {
  flex: 1 1 70%;
  z-index: 3;
  display: flex;
}

#Photos.listing .photo .cover .co {
  flex: 1 0 80%;
}

#Photos.listing .photo .cover .co.only {
  min-height: 485px;
}

#Photos.listing .photo .cover .co a {
  height: 100%;
}

#Photos.listing .photo .cover .ver {
  flex: 0 0 20%;
  flex-direction: column;
}

#Photos.listing .photo .cover .ver > a {
  padding-bottom: 100%;
  border-left: 1px solid #fff;
}

#Photos.listing .photo .cover .ver > a:not(:first-child) {
  border-top: 1px solid #fff;
}

#Photos.listing .photo .cover .ver > a:last-child {
  position: relative;
}

#Photos.listing .photo .cover .ver > a:last-child > span {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0 0 0 / 0.5);
  z-index: 4;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 32px;
}

#Photos.listing .photo .content {
  flex: 0 1 50%;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
}

#Photos.listing .photo:nth-child(even) .content {
  padding-left: inherit;
  padding-right: 50px;
}

#Photos.listing .photo .content h2 > span {
  margin: 0 4px;
}

#Photos.listing .photo .content h2 {
  font-size: 2.4rem;
  line-height: 1.3em;
  margin-bottom: 10px;
}

@media (max-width: 991px) {
  #Photos.listing .photo .content h2 {
    font-size: 24px;
    font-weight: 600;
  }

  #Photos.listing .photo .content p {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  #Photos.listing .photo {
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #ccc;
  }

  #Photos.listing .photo .cover {
    flex: 0 0 100%;
    margin-bottom: 10px;
  }

  #Photos.listing .photo:nth-child(even) .content,
  #Photos.listing .photo .content {
    flex: 0 0 100%;
    padding: 0;
  }

  #Photos.listing .photo .content h2 {
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
  }

  #Photos.listing .photo .content p {
    text-align: center;
  }

  #Photos.listing .photo:after {
    display: none;
  }

  #Photos.listing .photo .cover .co.only {
    min-height: 300px;
  }
}
/*--------------------
  NEWS
--------------------*/
.cateList {
  display: flex;
  margin-bottom: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.cateList .cateItem:not(:last-of-type) {
  margin-right: 15px;
}
.cateList .cateItem {
  margin-bottom: 10px;
}
.cateList .cateItem .cateLink {
  display: block;
  padding: 15px 30px;
  border: 1px solid #ccc;
  border-radius: 30px;
}
.cateList .cateItem .cateLink:hover,
.cateList .cateItem .cateLink.active {
  background-color: var(--dark);
  color: #fff;
  border-color: transparent;
}
@media (max-width: 767px) {
  .cateList .cateItem .cateLink {
    padding: 8px 16px;
    font-size: 9pt;
  }
  .cateList .cateItem:not(:last-of-type) {
    margin-right: 5px;
  }
  .cateList {
    margin: 10px 0;
  }
}
.newsListing {
  display: flex;
  flex-direction: column;
}
.newsItem {
  border-bottom: 1px solid #ccc;
}
.newsItem:first-of-type {
  border-top: 1px solid #ccc;
}
.newsWrap {
  display: flex;
  align-items: center;
  padding: 40px 0;
  transition: all 0.3s ease;
}
.newsWrap .news-head {
  display: flex;
  align-items: center;
}
.newsWrap .news-head time {
  font-size: 0.9em;
  min-width: 120px;
  text-align: center;
}
.newsWrap .news-head .newsTag {
  padding: 4px 10px;
  background-color: var(--dark);
  color: #fff;
  border-radius: 18px;
  font-size: 0.8em;
  min-width: 110px;
  text-align: center;
  margin-left: 10px;
}
.newsWrap .news-title {
  padding-left: 40px;
}
.newsWrap .news-icon {
  margin-left: auto;
  margin-right: 40px;
  text-align: center;
}
@media (min-width: 768px) {
  a.newsItem:hover .newsWrap {
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 767px) {
  .newsWrap {
    flex-wrap: wrap;
    padding: 10px;
  }
  .newsWrap .news-head {
    flex: 0 0 100%;
    margin-bottom: 10px;
  }
  .newsWrap .news-head time {
    min-width: inherit;
  }
  .newsWrap .news-title {
    padding-left: 0px;
    flex: 0 0 calc(100% - 40px);
  }
  .newsWrap .news-title h3 {
    font-size: 1em;
  }
  .newsWrap .news-icon {
    flex: 0 0 40px;
    margin-right: 0;
  }
  .newsWrap .news-head .newsTag {
    font-size: 9pt;
    min-width: 90px;
  }
}