@charset "UTF-8";
/* ------------------------------------------ */
/* poppins-100 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Poppins Thin"), local("Poppins-Thin"), url("../libs/fonts/poppins/Poppins-Thin.ttf") format("truetype");
}
/* poppins-200 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local("Poppins ExtraLight"), local("Poppins-ExtraLight"), url("../libs/fonts/poppins/Poppins-ExtraLight.ttf") format("truetype");
}
/* poppins-300 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Poppins Light"), local("Poppins-Light"), url("../libs/fonts/poppins/Poppins-Light.ttf") format("truetype");
}
/* poppins-regular */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Poppins Regular"), local("Poppins-Regular"), url("../libs/fonts/poppins/Poppins-Regular.ttf") format("truetype");
}
/* poppins-500 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Poppins Medium"), local("Poppins-Medium"), url("../libs/fonts/poppins/Poppins-Medium.ttf") format("truetype");
}
/* poppins-600 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("../libs/fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
}
/* poppins-700 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Poppins Bold"), local("Poppins-Bold"), url("../libs/fonts/poppins/Poppins-Bold.ttf") format("truetype");
}
/* poppins-800 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"), url("../libs/fonts/poppins/Poppins-ExtraBold.ttf") format("truetype");
}
/* poppins-900 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Poppins Black"), local("Poppins-Black"), url("../libs/fonts/poppins/Poppins-Black.ttf") format("truetype");
}
/* //////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////// */
i.fa.fa-weixin {
  color: #06c152;
}

.skip-to-content-div {
  width: 100%;
  position: relative;
}

.skip-to-content {
  left: -50%;
  top: -20px;
  position: absolute;
  transform: translateX(-500%);
}
.skip-to-content:focus {
  left: 0;
  transform: translateX(0%);
}

.no-wrap {
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}


/*important note*/
.important-note-wrapper {
  background-color: #f5f5f5;
  border-bottom: 3px solid #517422;
  display: none;
}
.important-note-wrapper.active {
  display: block;
}

.important-note {
  position: relative;
}

.important-note .swiper-container {
  padding-bottom: 0px;
  width: 70%;
}

.important-note .swiper-button-prev {
  left: 0px;
}

.important-note .swiper-button-next {
  right: 0px;
}

.important-note .swiper-button-next:after, .important-note .swiper-button-prev:after {
  border-radius: 0;
  background-color: transparent;
  color: #517422;
}

.important-note .swiper-pagination {
  bottom: -5px;
}

.check-overflow {
  display: inline-block;
}

.important-note .close-btn {
  position: absolute;
  top: 20px;
  right: 0px;
  width: 19px;
  height: 19px;
  opacity: 0.7;
  cursor: pointer;
}

.important-note .swiper-slide .swiper-card {
  padding-top: 25px;
  background-color: #f5f5f5;
  border-radius: 12px;
  line-height: 1.1;
}
.important-note .swiper-slide .swiper-card p {
  margin: 0px 40px 20px 40px;
  position: relative;
}
.important-note .swiper-slide .swiper-card p::before {
  content: "！";
  background-color: #517422;
  border-radius: 5px;
  color: white;
  position: absolute;
  left: -35px;
  top: 0;
}

.important-note-btn-div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0;
}
.important-note-btn-div .important-note-btn-div-play {
  width: 30px;
  height: 30px;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
}
.important-note-btn-div .important-note-btn-div-play.is_pause::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #517422;
  background: transparent;
}
.important-note-btn-div .important-note-btn-div-play.is_playing::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.important-note-btn-div .important-note-btn-div-play.is_playing::after {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.important-note-btn-div .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  max-width: calc(100% - 60px);
  position: static;
}

/*end of important note*/
.swiper-button-next,
.swiper-button-prev {
  background-image: none;
  top: 50%;
  transform: translateY(-50%);
  margin-top: auto;
  width: 60px;
  height: 60px;
  text-align: center;
}
.swiper-button-next i,
.swiper-button-prev i {
  line-height: 60px;
  font-size: 50px;
  transition: color 0.3s ease;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 100%;
  background-color: #efefef;
  opacity: 0.6;
  z-index: -1;
  border-radius: 50%;
  transition: opacity 0.3s ease;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  opacity: 1;
}

@media only screen and (min-width: 1481px) {
  .swiper-button-next {
    right: -90px;
  }
}
.swiper-button-next i {
  transform: translateX(3px);
}

@media only screen and (min-width: 1481px) {
  .swiper-button-prev {
    left: -90px;
  }
}
.swiper-button-prev i {
  transform: translateX(-3px);
}

html {
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  vertical-align: top;
  -webkit-tap-highlight-color: transparent;
}

#web-top {
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans SC", "Calibri", sans-serif;
  margin: 0;
  padding-top: 0;
}

html:lang(zh-Hant) body {
  font-family: "Noto Sans TC", "Noto Sans SC", sans-serif;
  margin: 0;
  padding-top: 0;
}

span.zh-zant-font {
  font-family: "Noto Sans TC", "Noto Sans SC", sans-serif;
}

img {
  max-width: 100%;
  vertical-align: top;
}

a {
  color: #5d7a34;
  text-decoration: none;
  word-break: break-word;
}

.no-float-right {
  clear: right;
}

div.list-count-div {
  counter-reset: list-count;
}
div.list-count-div .ol-list-count:before {
  content: counter(list-count) ". ";
  /* Display counter value in default style (decimal) */
  counter-increment: list-count;
}

table.not-word-break-link a {
  word-break: initial;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  box-shadow: 0 1px 7px 0px #616161;
  transition: top 0.3s ease;
}

.site-nav {
  padding-top: 30px;
  padding-bottom: 25px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
}
.site-nav .site-wrapper {
  max-width: 1600px;
}

body.menu-active {
  overflow: hidden;
}
body.menu-active .site-nav {
  background-color: #fff;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  position: relative;
  flex-flow: wrap;
  font-size: 16px;
}
.header-bar .desktop {
  font-family: "Poppins";
}
.header-bar .mobile {
  display: none;
}

.header-bar-left {
  width: 440px;
  display: flex;
  align-items: flex-end;
  text-decoration: none !important;
}
.header-bar-left a {
  color: #000 !important;
}

.header-logo-had {
  text-align: center;
}
.header-logo-had .image {
  width: 90px;
  height: 49.0909090909px;
  margin-top: 5px;
}
.header-logo-had .text {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.header-logo_img {
  width: 99px;
}

.header-logo_text {
  width: calc(100% - 99px);
  padding-left: 10px;
  font-family: Arial, sans-serif;
}

.header-logo_text-title {
  font-size: 21px;
  font-size: 1.3125;
  font-weight: 700;
}

.header-logo_text-text {
  font-size: 13px;
  font-size: 0.8125;
  font-weight: 600;
}

.header-logo-gohk {
  width: 250px;
  margin-left: 20px;
  position: relative;
}
.header-logo-gohk a {
  position: absolute;
  bottom: 3px;
}
.header-logo-gohk a img {
  width: 333.3333333333px;
}
@media only screen and (max-width: 1025px) {
  .header-logo-gohk a {
    bottom: 1px;
  }
}

.header-bar-right {
  width: calc(100% - 440px);
  vertical-align: top;
}

.header-bar-right-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.header-tools {
  display: flex;
  justify-content: flex-end;
  width: 220px;
  right: 0;
  top: 0;
}

html:lang(zh-Hans) .header-tools_item.notice button {
  padding-left: 8px;
  padding-right: 3px;
}

.header-tools_item {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid #202020;
  font-size: 16px;
  font-size: 1;
  line-height: 1.2em;
  font-weight: 500;
}
.header-tools_item input {
  height: 100%;
}
.header-tools_item:nth-child(1) {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}
.header-tools_item.upper-part-nav {
  display: flex;
  width: 100%;
}
.header-tools_item.notice{
  margin-left: auto;
  margin-bottom: 15px;
  text-align: right;
}

.header-tools_item.notice, a.notice span{

  background-color: #517422;
  border-radius: 5px;
}

a.notice span{
  font-size: 17px;
    margin: auto;
    margin-left: 5px;
}

.header-tools_item.notice button, a.notice span {
  color: white;
}
.header-tools_item button {
  border: 0;
  background-color: transparent;
}
.header-tools_item.btn-search {
  border: 0;
  right: 0;
  margin-bottom: 15px;
  text-align: right;
}
.header-tools_item.btn-search img {
  height: 1em;
  vertical-align: middle;
  cursor: pointer;
}
.header-tools_item.text-size {
  font-weight: bold;
}
.header-tools_item.btn-print img {
  height: 1em;
  vertical-align: middle;
  cursor: pointer;
}
.header-tools_item.btn-share .fa {
  height: 1em;
  vertical-align: middle;
  cursor: pointer;
}

.header-nav {
  display: flex;
  justify-content: flex-end;
  width: calc(100% - 220px - 20px);
}

.header-nav_item {
  font-size: 19px;
  font-size: 1.1875;
  margin-left: 15px;
  text-align: center;
}
.header-nav_item .has-menu:hover .header-nav-menu {
  display: block;
}
.header-nav_item:nth-child(1) {
  margin-left: 0;
}
.header-nav_item .header-nav_sub {
  font-size: 20px;
  font-size: 1.25;
  text-align: left;
}
.header-nav_item .header-nav_sub .map svg .svg-map [data-district] {
  cursor: pointer;
}
.header-nav_item:hover .header-nav_item-link {
  color: #5d7a34;
  text-decoration: underline;
}
.header-nav_item:hover .header-nav_sub {
  opacity: 1;
  visibility: visible;
}
.header-nav_item.hover .header-nav_item-link {
  color: #5d7a34;
  text-decoration: underline;
}
.header-nav_item.hover .header-nav_sub {
  opacity: 1;
  visibility: visible;
}

.display-none {
  display: none;
}

.has-menu {
  position: relative;
}
.has-menu .header-nav_menu {
  text-align: left;
}
.has-menu:hover .header-nav_menu, .has-menu.active .header-nav_menu {
  opacity: 1;
  visibility: visible;
}
.has-menu.btn-share .header-nav_menu {
  display: flex;
  margin-top: 100%;
}

.header-nav_sub-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
}
.header-nav_sub-item .header-nav_sub-item_img {
  width: 80px;
  text-align: center;
}
.header-nav_sub-item .header-nav_sub-item_name {
  padding-left: 15px;
  font-size: 20px;
  transition: color 0.3s ease;
  color: #fff;
}
.header-nav_sub-item:hover .header-nav_sub-item_name {
  color: #c4e298;
}

.mobile_header-tools {
  text-align: right;
}

.mobile_header-tools_item {
  vertical-align: middle;
  display: inline-block;
  margin-left: 20px;
  width: 38px;
  cursor: pointer;
  position: relative;
}
.mobile_header-tools_item img {
  width: 100%;
  vertical-align: middle;
}
.mobile_header-tools_item:hover .lang_menu, .mobile_header-tools_item.active .lang_menu {
  display: block;
}

.lang_menu {
  display: none;
  z-index: 10;
  position: absolute;
  font-size: 16px;
  font-size: 1;
  right: 0;
  top: 100%;
  background-color: #fff;
  box-shadow: 1px 1px 5px #616161;
}

.lang_menu_item {
  display: block;
  margin: 10px 10px;
  white-space: nowrap;
}

.menu-active .mobile_header-tools_item:not(.menu-trigger) {
  display: none;
}

.hamburger.is-active:hover {
  opacity: 1;
}

.hamburger {
  width: 100%;
  padding: 0;
}
.hamburger:hover {
  opacity: 1;
}
.hamburger * {
  width: 100%;
  padding: 0;
}
.hamburger *:after {
  width: 100%;
  padding: 0;
}
.hamburger *:before {
  width: 100%;
  padding: 0;
}

.mobile_header-nav_wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: none;
}

.mobile_header-nav {
  max-height: 100%;
  background-color: #fff;
  padding: 0 0 20px;
  box-shadow: 0 4px 5px 0px #616161;
  overflow: auto;
  height: 100vh;
}

.mobile_header-nav_item {
  margin: 40px 0;
}

.mobile_header-nav-link {
  font-size: 32px;
  font-size: 2;
  color: #333333;
  font-weight: 700;
  display: block;
}

.mobile_header-nav_sub-title {
  font-size: 27px;
  font-size: 1.6875;
  color: #333333;
  margin: 20px 0;
  text-decoration: underline;
  font-weight: 500;
}

.mobile_header-nav_sub-item {
  display: block;
  font-size: 22px;
  font-size: 1.375;
  color: #333333;
  margin: 20px 0;
}
.mobile_header-nav_sub-item img {
  height: 1.2em;
  margin-right: 15px;
}

.mobile_header-media {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  padding: 10px 0;
}
.mobile_header-media .mobile_header-media_item {
  display: inline-block;
  width: 25px;
  margin: 5px;
  font-size: 25px;
}

.mobile_header-nav_item.has-sub .mobile_header-nav-link {
  padding-right: 50px;
  position: relative;
}
.mobile_header-nav_item.has-sub .mobile_header-nav-link:after {
  content: "\f105";
  font-family: "FontAwesome";
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 1.4em;
}

.mobile_header-nav_item.has-sub.open-sub .mobile_header-nav-link:after {
  transform: rotate(90deg);
}
.mobile_header-nav_item.has-sub.open-sub .mobile_header-nav_sub {
  display: block;
}

.mobile_header-nav_sub {
  display: none;
}

.header-nav_sub {
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  padding: 20px;
  z-index: 10;
  color: white;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.header-nav_sub::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  background-color: rgba(32, 32, 32, 0.8);
  width: 200%;
  height: 100%;
  z-index: -1;
}
.header-nav_sub .hk,
.header-nav_sub .kln,
.header-nav_sub .nt {
  width: 16.6666666667%;
}
.header-nav_sub .hk .title,
.header-nav_sub .kln .title,
.header-nav_sub .nt .title {
  width: calc(100% - 20px);
  padding: 10px 0;
  border-bottom: 1px solid white;
  margin: 10px;
}
.header-nav_sub .hk .title .force-line-break,
.header-nav_sub .kln .title .force-line-break,
.header-nav_sub .nt .title .force-line-break {
  display: block;
}
@media only screen and (min-width: 1481px) {
  .header-nav_sub .hk .title .force-line-break,
.header-nav_sub .kln .title .force-line-break,
.header-nav_sub .nt .title .force-line-break {
    display: none;
  }
}
.header-nav_sub .hk .item,
.header-nav_sub .kln .item,
.header-nav_sub .nt .item {
  margin: 10px;
}
.header-nav_sub .hk .item a,
.header-nav_sub .kln .item a,
.header-nav_sub .nt .item a {
  color: white;
}
.header-nav_sub .hk .item a:hover,
.header-nav_sub .kln .item a:hover,
.header-nav_sub .nt .item a:hover {
  color: #5d7a34;
}
.header-nav_sub .hk .item.map_hover a,
.header-nav_sub .kln .item.map_hover a,
.header-nav_sub .nt .item.map_hover a {
  color: #c4e298;
}
.header-nav_sub .map {
  width: 50%;
}
.header-nav_sub .map svg .map_hover {
  fill: #c4e298;
}

.header-nav_menu {
  position: absolute;
  top: 0;
  margin-top: 50px;
  left: 100%;
  transform: translateX(-100%);
  width: 340px;
  background-color: #fff;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  box-shadow: 1px 1px 5px #616161;
}
.header-nav_menu .pointer {
  border: solid 10px transparent;
  border-bottom-color: #eee;
  position: absolute;
  top: -20px;
  width: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
}
@media only screen and (min-width: 1481px) {
  .header-nav_menu {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 1480px) {
  .header-tools_item .header-nav_menu .pointer {
    left: 50%;
  }
}

.nav_link {
  position: relative;
}
.nav_link .copied {
  visibility: hidden;
  width: 140px;
  font-size: 0.5rem;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}
.nav_link .copied:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.nav_link:hover .copied {
  visibility: visible;
  opacity: 1;
}

.header-nav_menu-item {
  padding: 20px;
  margin: 0 10px;
}
.header-nav_menu-item img {
  height: 1.2em;
  margin-right: 15px;
  min-width: 33px;
}
.header-nav_menu-item a {
  vertical-align: middle;
}
.header-nav_menu-item:hover .header-nav_menu-item_name {
  color: #5d7a34;
}
.header-nav_menu-item + .header-nav_menu-item {
  border-top: 1px solid #605353;
}
.btn-share .header-nav_menu-item {
  padding: 10px 0;
  margin: 0 5px;
  border: 0;
  width: 40px;
}
.btn-share .header-nav_menu-item img {
  margin: 0;
}

.header-nav_item-link {
  position: relative;
  font-weight: 700;
  transition: color 0.3s ease;
  cursor: pointer;
  color: #605353;
}
.header-nav_item-link::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 42px;
}

.header-nav_item.active .header-nav_item-link {
  color: #5d7a34;
}

.header-nav_menu-item_img {
  width: 80px;
  text-align: center;
  display: none;
}

.header-nav_menu-item_name {
  font-size: 25px;
  font-size: 1.5625;
  transition: color 0.3s ease;
  line-height: normal;
}

.top-highlight {
  width: 100%;
  padding: 40px 0 0;
  background-color: rgba(255, 255, 255, 0.9);
}
.top-highlight .site-wrapper {
  position: relative;
}

.top-highlight-row {
  width: calc(50% - 4px);
  padding: 0 20px;
  display: inline-block;
  vertical-align: middle;
}
.top-highlight-row:nth-child(2n+2) {
  border-left: 1px solid #9f4404;
}

.top-highlight-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0;
}
.top-highlight-item:nth-child(1n+2) {
  border-top: 1px solid #ccc;
}

.top-highlight-item.large .top-highlight-item-img {
  width: 40%;
}
.top-highlight-item.large .top-highlight-item-title {
  font-size: 23px;
  font-size: 1.4375;
  width: 60%;
}

.top-highlight-item-title {
  padding-left: 20px;
  font-size: 18px;
  font-size: 1.125;
  position: relative;
  padding-right: 1em;
}
.top-highlight-item-title::after {
  content: "\f105";
  font-family: "FontAwesome";
  color: #c95100;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 1.5em;
  transition: transform 0.3s ease;
}

.top-highlight-item-img img {
  width: 100%;
}

.top-highlight-item.small .top-highlight-item-img {
  width: 60px;
}
.top-highlight-item.small .top-highlight-item-title {
  width: calc(100% - 60px);
}

.top-highlight_close {
  position: absolute;
  right: 20px;
  top: -25px;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/close.png);
  cursor: pointer;
}

.shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.shape svg {
  position: absolute;
  top: 0;
  left: 0;
}
.shape .container {
  transform: scaleX(-1);
}
.shape .container.reverse {
  transform: scaleX(-1) rotate(180deg);
}
.shape .border {
  fill: none;
  stroke: #37570D;
  stroke-width: 1;
}
.shape .outer,
.shape .inner {
  transition: fill 0.3s ease;
  fill: #fff;
}

.accordion {
  min-height: 57px;
}
.accordion.active .shape .outer,
.accordion.active .shape .inner {
  fill: #f9f6e5;
}

.bottom-menu {
  margin: 0 auto;
  text-align: center;
}

.bottom-menu_row {
  display: inline-block;
  margin: 0 60px;
}

.bottom-menu_row-title {
  color: #BDFF2E;
  font-size: 21px;
  font-size: 1.3125;
  font-weight: 700;
  padding-bottom: 10px;
}

.bottom-menu_row-item {
  color: #ffffff;
  font-size: 16px;
  font-size: 1;
  margin: 15px 0;
  overflow: hidden;
}
.bottom-menu_row-item a {
  color: #ffffff;
}
.bottom-menu_row-item img {
  float: left;
}
.bottom-menu_row-item span {
  float: left;
  margin-left: 10px;
}

.bottom-menu_row-item.large {
  font-size: 1.2em;
}

.bottom-menu-wrapper {
  padding: 40px 0;
}

footer {
  padding: 40px 0;
  color: #000;
  text-align: center;
  font-size: 12px;
  font-size: 0.75;
}
footer a {
  color: #000;
}

.bottom-logo {
  padding: 15px 0;
}

.bottom-logo_item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  width: 140px;
}
.bottom-logo_item:first-child {
  margin-left: 0;
}
.bottom-logo_item:last-child {
  margin-right: 0;
}
.bottom-logo_item img {
  width: 100%;
  max-width: 100%;
}

.bottom-date {
  margin-top: 25px;
}

.bottom-nav {
  margin-top: 10px;
}
.bottom-nav .bottom-nav_item {
  display: inline-block;
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid #000;
  vertical-align: middle;
}
.bottom-nav .bottom-nav_item:nth-child(1) {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}
.bottom-nav .bottom-nav_item .force-line-break {
  display: block;
}
@media only screen and (min-width: 521px) {
  .bottom-nav .bottom-nav_item .force-line-break {
    display: none;
  }
}
@media only screen and (max-width: 520px) {
  .bottom-nav:last-child .bottom-nav_item {
    display: block;
    border-left: 0;
  }
}

.scroll-top {
  position: fixed;
  bottom: 35px;
  right: 50px;
  color: #fff;
  width: 45px;
  height: 45px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}
.scroll-top i {
  line-height: 40px;
  font-size: 30px;
  transition: color 0.3s ease;
}
.scroll-top::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 100%;
  background-color: #517422;
  z-index: -1;
  border-radius: 50%;
  transition: opacity 0.3s ease, background-color 0.3s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.scroll-top:hover::after {
  background-color: #517422;
}

input[type=text] {
  border: 0;
  border-bottom: 1px solid black;
  font-size: 16px;
  background-color: transparent;
}

.btn {
  position: relative;
  display: inline-block;
  color: white;
  text-decoration: none !important;
  padding: 10px 20px;
  font-size: 21px;
  font-size: 1.3125;
  font-weight: 500;
  transition: color 0.3s ease;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  background: #517422;
  border-radius: 12px;
  box-shadow: 1px 1px 2px #616161;
}
.btn:hover {
  color: #517422;
  background: white;
}
.btn img {
  vertical-align: middle;
  position: relative;
}
.btn.light-green {
  /* background-color: #73c264; */
  background-color: #517422;
  border: none;
}
.btn.light-green:hover{
  color: #fff !important;
}
.btn span {
  vertical-align: middle;
  display: flex;
  align-items: center;
  text-align: left;
  position: relative;
  min-height: 27px;
}
.btn span img {
  margin-right: 10px;
}
.btn path {
  transition: fill 0.3s ease;
}
.btn:hover .outer,
.btn:hover .inner {
  fill: #37570D;
}
.btn:hover .border {
  stroke: #fff;
}

.btn.white {
  background-color: #fff;
  color: #9f4404;
  border: 1px solid #fff;
}
.btn.white:hover {
  background-color: #9f4404;
  color: #ddd;
  border: 1px solid #9f4404;
}

.site-outer {
  margin: 0 auto;
  max-width: 1920px;
}

.site-wrapper {
  max-width: 1380px;
  padding: 0 50px;
  margin: auto;
}

.empty-map-container {
  width: 100%;
}

.map-container.mobile-version {
  position: fixed;
  width: calc(100% - 100px);
  z-index: 1000;
}

.map-container.mobile-version.not-fixed, .map-container.mobile-version.not-fixed-not-over-container {
  position: static;
  z-index: 0;
  width: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background: #517422;
  border: 1px solid #517422;
  opacity: 1;
  margin: 0 5px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #fff;
}

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

.not-wrap {
  overflow: hidden;
}

.index-section {
  padding: 100px 0;
}

.section-black {
  background-color: #332e3a;
  color: #fff;
}

.section-light-green {
  background-color: #E9F4E3;
}

.section-light-grey {
  background-color: #e8e8e8;
}

.section-light-grey-green {
  background-color: #c4ebd8;
}

.section-white {
  background-color: #fff;
  color: #000;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.no-underline {
  text-decoration: none !important;
}

.display-desktop {
  display: block;
}

@media only screen and (max-width: 960px) {
  .desktop {
    display: none;
  }
}

.display-mobile {
  display: none;
}

@media only screen and (min-width: 961px) {
  .mobile {
    display: none;
  }
}

html:lang(en) .terms-page li {
  text-align: justify;
}

.index-font {
  font-family: "Poppins";
}

.index_slider {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}
.index_slider .index_slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(100% + 30px);
  left: 0;
  width: 100%;
  font-size: 0;
}
.index_slider .index_slider-play {
  width: 30px;
  height: 30px;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
}
.index_slider .index_slider-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  max-width: calc(100% - 60px);
}
.index_slider .index_slider-play.is_pause::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #517422;
  background: transparent;
}
.index_slider .index_slider-play.is_playing::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.index_slider .index_slider-play.is_playing::after {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.index_slider .swiper-container {
  width: 100%;
}
@media only screen and (min-width: 521px) {
  .index_slider .swiper-container {
    width: calc(100% - 80px);
  }
}
@media only screen and (min-width: 1025px) {
  .index_slider .swiper-container {
    width: calc(100% - 120px);
  }
}
.index_slider .index-grid-container {
  width: 100%;
  height: 0;
  padding-top: 41.6666666667%;
}
@media only screen and (min-width: 521px) and (max-width: 1024px) {
  .index_slider .index-grid-container {
    padding-top: 80%;
  }
}
@media only screen and (max-width: 520px) {
  .index_slider .index-grid-container {
    padding-top: 90%;
  }
}
.index_slider .index-grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.index_slider .swiper-slide img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}
.index_slider .swiper-slide img:hover {
  transform: scale(1.1);
}
.index_slider .swiper-slide .description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: left;
  padding: 10px 22px;
  font-size: 18px;
  font-size: 1.125;
  font-weight: bold;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7), 2px 2px 3px rgba(0, 0, 0, 0.5), 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.index_slider .swiper-slide .description a {
  color: white;
}
@media only screen and (min-width: 521px) {
  .index_slider .swiper-slide .description {
    font-size: 20px;
    font-size: 1.25;
  }
}
@media only screen and (min-width: 1025px) {
  .index_slider .swiper-slide .description {
    font-size: 22px;
    font-size: 1.375;
  }
}
.index_slider .index-grid-item {
  position: absolute;
  padding: 5px;
  overflow: hidden;
}

.index_slider .index-grid-item a:focus{
  outline: 3px solid #00a54a;
}

.index_slider .index-grid-item.h-1 {
  height: 33.333%;
}
.index_slider .index-grid-item.h-2 {
  height: 66.666%;
}
.index_slider .index-grid-item.h-3 {
  height: 99.999%;
}
.index_slider .index-grid-item.w-20 {
  width: 20%;
}
.index_slider .index-grid-item.w-22 {
  width: 22%;
}
.index_slider .index-grid-item.w-26 {
  width: 26%;
}
.index_slider .index-grid-item.w-29 {
  width: 29%;
}
@media only screen and (min-width: 521px) and (max-width: 1024px) {
  .index_slider .index-grid-item.th-1 {
    height: 33.333%;
  }
  .index_slider .index-grid-item.th-2 {
    height: 66.666%;
  }
  .index_slider .index-grid-item.th-3 {
    height: 99.999%;
  }
  .index_slider .index-grid-item.tw-5 {
    width: 31.25%;
  }
  .index_slider .index-grid-item.tw-6 {
    width: 37.5%;
  }
  .index_slider .index-grid-item.tw-8 {
    width: 50%;
  }
  .index_slider .index-grid-item.tw-10 {
    width: 62.5%;
  }
}
@media only screen and (max-width: 520px) {
  .index_slider .index-grid-item.mh-1 {
    height: 50%;
  }
  .index_slider .index-grid-item.mh-2 {
    height: 100%;
  }
  .index_slider .index-grid-item.mw-1 {
    width: 50%;
  }
  .index_slider .index-grid-item.mw-2 {
    width: 100%;
  }
}
.index_slider .swiper-button-next, .index_slider .swiper-button-prev {
  color: white;
  background-color: rgba(64, 64, 64, 0.7);
}
.index_slider .swiper-button-next .fa, .index_slider .swiper-button-prev .fa {
  font-weight: bold;
}
.index_slider .swiper-button-next:after, .index_slider .swiper-button-prev:after {
  content: none;
}
.index_slider .swiper-button-next:hover, .index_slider .swiper-button-prev:hover {
  background-color: rgba(64, 64, 64, 0.9);
}
@media only screen and (max-width: 1024px) {
  .index_slider .swiper-button-next, .index_slider .swiper-button-prev {
    width: 40px;
    height: 40px;
  }
  .index_slider .swiper-button-next .fa, .index_slider .swiper-button-prev .fa {
    line-height: 40px;
    font-size: 33.3333333333px;
  }
}
.index_slider .swiper-button-next {
  right: 0;
}
.index_slider .swiper-button-prev {
  left: 0;
}
.index_slider .swiper-pagination {
  width: 100%;
  bottom: -40px;
}
@media only screen and (min-width: 521px) {
  .index_slider {
    margin-bottom: 100px;
  }
}
.index_slider .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background: #fff;
  position: relative;
}
.index_slider .swiper-pagination-bullets .swiper-pagination-bullet:after {
  content: "";
  background: #517422;
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  transition: 0s;
}
.index_slider .swiper-pagination-bullets .swiper-pagination-bullet.timer-active:after {
  width: 100%;
  transition: 7.5s width cubic-bezier(0, 0, 1, 1);
}
.index_slider .swiper-pagination-bullets .swiper-pagination-bullet.timer-disabled {
  background: #517422;
}
.index_slider .swiper-pagination-custom {
  bottom: 30px;
}
.index_slider .desktop {
  display: none;
}
@media only screen and (min-width: 1025px) {
  .index_slider .desktop {
    display: block;
  }
}
.index_slider .tablet {
  display: none;
}
@media only screen and (min-width: 521px) and (max-width: 1024px) {
  .index_slider .tablet {
    display: block;
  }
}
.index_slider .mobile {
  display: block;
}
@media only screen and (min-width: 521px) {
  .index_slider .mobile {
    display: none;
  }
}

.swiper-pagination-fraction {
  bottom: 30px;
}

.information {
  overflow: hidden;
}
.information .btn {
  width: 433px;
  max-width: 95%;
}

.information-inner-column {
  float: left;
  font-size: 22px;
  font-size: 1.375;
}
.information-inner-column:nth-child(1) {
  width: 414px;
  padding: 0 60px;
}
.information-inner-column:nth-child(2) {
  width: calc(100% - 414px);
}

.index-section-title {
  font-size: 54px;
  font-size: 3.375;
  font-weight: 700;
  text-align: center;
  color: #517422;
}

.section-black .index-section-title {
  color: #fff;
}
.section-black .section-news-item {
  background-color: #fff;
  border: 0;
  border-radius: 15px;
  padding: 30px 60px;
  margin-bottom: 40px;
}

.section-news-list {
  margin: 60px 0;
}

.section-news-item {
  background-color: #f9f9f9;
  padding: 40px 100px 20px;
  margin: 60px 0;
  box-shadow: 5px 5px 10px #aaaaaa;
}
.section-news-item:hover .section-news-item_title {
  color: #9a005d;
}
.section-news-item a {
  text-decoration: none;
}
.section-news-item:last-child {
  border-bottom: 1px solid #ccc;
}

.section-news-item_date {
  color: #37570D;
  font-size: 24px;
  font-size: 1.5;
  font-weight: 500;
  padding-bottom: 15px;
}

.section-news-item_title {
  position: relative;
  color: #5d7a34;
}

.section-news-btn {
  text-align: center;
}
.section-news-btn .btn span {
  transition: background-color 0.3s ease;
  background-color: #517422;
  color: #fff;
}
.section-news-btn .btn .outer,
.section-news-btn .btn .inner {
  fill: #517422;
}
.section-news-btn .btn .border {
  stroke: #fff;
}
.section-news-btn .btn:hover span {
  background-color: #fff;
  color: #517422;
}
.section-news-btn .btn:hover .outer,
.section-news-btn .btn:hover .inner {
  fill: #fff;
}
.section-news-btn .btn:hover .border {
  stroke: #517422;
}

#map_spot_details {
  width: 100%;
  height: 525px;
}

.spots-container {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: flex-end;
}
.spots-container .map {
  width: 100%;
  height: 356px;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1025px) {
  .spots-container .map {
    width: 100%;
    margin-right: 10%;
    position: absolute;
  }
}
.spots-container .spots-list {
  width: 100%;
  margin-top: 40px;
}
@media only screen and (min-width: 1025px) {
  .spots-container .spots-list {
    width: 35%;
    margin-top: 0;
  }
}
.spots-container .spots-list .content-group-text.content-style .content-group-text-group .content-group-text-space {
  font-size: 1.3rem;
}
@media only screen and (max-width: 768px) {
  .spots-container .spots-list .content-group-text.content-style .content-group-text-group .content-group-text-space {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 520px) {
  .spots-container .spots-list .content-group-text.content-style .content-group-text-group .content-group-text-space {
    font-size: 1rem;
  }
}

.map-container {
  width: 100%;
}
.map-container:focus {
  outline: none;
}
.map-container.mapfixed .map {
  width: 100% !important;
}
@media only screen and (min-width: 1025px) {
  .map-container.mapfixed .map {
    width: 45% !important;
  }
}
@media only screen and (min-width: 1025px) {
  .map-container {
    width: 60%;
    margin-right: 5%;
    height: 100%;
    position: relative;
    min-height: 356px;
  }
}

.mapfixed {
  position: static;
  left: 0%;
  max-width: unset;
  padding: 0px;
  margin: auto;
  transform: translateX(0%);
}
@media only screen and (min-width: 1025px) {
  .mapfixed {
    position: fixed;
    left: 50%;
    max-width: 1380px;
    padding: 0px 50px;
    margin: auto;
    width: 100%;
    transform: translateX(-50%);
  }
}

.spot-transport-div, .map-div, .disclaimer-div {
  clear: both;
}

.spot-transport-div table.content-table-white td, .intro-p-div table.content-table-white td {
  font-size: 1.18rem;
}
.spot-transport-div li, .intro-p-div li {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 200;
}

@media only screen and (min-width: 769px) {
  .intro-p-div table.set-table-width-desktop {
    width: 44%;
  }
}

.spot-map {
  width: 100%;
}
@media only screen and (min-width: 1025px) {
  .spot-map {
    width: 80%;
    margin: 40px 10%;
  }
}
.spot-map img {
  width: 100%;
}

/* Safari 7.1+ */
_::-webkit-full-page-media .gm-style .gm-style-iw-d, _:future .gm-style .gm-style-iw-d, :root .safari_only .gm-style .gm-style-iw-d {
  padding-bottom: 15px;
  padding-right: 15px;
}

/* Safari 10.1+ */
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
  .gm-style .gm-style-iw-d {
    padding-bottom: 15px;
    padding-right: 15px;
  }
}
.related-links {
  width: 100%;
  padding-bottom: 100px;
}
.related-links-title h2 {
  font-size: 21px;
  font-size: 1.3125;
  font-weight: bold;
  text-align: center;
  margin: 0;
  margin-bottom: 75px;
}
@media only screen and (min-width: 521px) {
  .related-links-title h2 {
    font-size: 24px;
    font-size: 1.5;
  }
}
@media only screen and (min-width: 1025px) {
  .related-links-title h2 {
    font-size: 36px;
    font-size: 2.25;
  }
}
.related-links-links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.related-links-links-link:not(:last-child) {
  margin-bottom: 50px;
}
.related-links-links.tc .related-links-links-link {
  width: 410px;
}
@media only screen and (min-width: 1025px) {
  .related-links-links.tc .related-links-links-link {
    flex-shrink: 2;
  }
}
@media only screen and (max-width: 410px) {
  .related-links-links.tc .related-links-links-link {
    width: 310px;
  }
}
@media only screen and (min-width: 1025px) {
  .related-links-links {
    flex-direction: row;
  }
  .related-links-links-link:not(:last-child) {
    margin: 0;
  }
}

.section-useful-item {
  display: inline-block;
  width: 100%;
  padding: 20px;
}

.section-useful-icon {
  max-width: 220px;
  margin: auto;
}

.section-useful-text {
  padding-top: 25px;
  text-align: center;
  font-size: 20px;
  font-size: 1.25;
}

.section-useful-licence {
  padding-top: 100px;
  text-align: center;
}

.section-useful-licence-text {
  font-size: 20px;
  font-size: 1.25;
  padding-top: 15px;
}

.content-img-projector {
  width: 100%;
  height: 400px;
  text-align: center;
}
.content-img-projector .projector-img-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.content-img-projector .projector-img-wrapper .projector-img {
  height: 400px;
  display: block;
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-img-projector .projector-img-wrapper .projector-img.full-width {
  width: 100%;
}
.content-img-projector .projector-img-wrapper .projector-caption {
  display: none;
}

@media only screen and (max-width: 960px) {
  .content-img-projector {
    height: 250px;
  }
  .content-img-projector .projector-img-wrapper .projector-img {
    max-height: 250px;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .content-img-projector {
    position: relative;
    overflow: hidden;
  }
  .content-img-projector .projector-img-wrapper {
    position: static;
  }
  .content-img-projector .projector-img-wrapper .projector-img.full-width {
    max-height: none;
  }

  .ie-map-infowin-size {
    min-height: 18px;
    min-width: 100px;
    text-align: center;
  }
}
@media only screen and (-ms-high-contrast: none) and (max-width: 960px), only screen and (-ms-high-contrast: active) and (max-width: 960px) {
  .content-img-projector .projector-img-wrapper .projector-img.full-width {
    width: 450px;
    max-width: none;
  }
}
.spot-details-swiper {
  position: relative;
  margin: 0 auto;
}
.spot-details-swiper.content-img_single_item {
  width: 90%;
}
@media only screen and (max-width: 768px) {
  .spot-details-swiper.content-img_single_item {
    width: 100%;
  }
}
.spot-details-swiper .swiper-container-wrapper {
  position: relative;
}
.spot-details-swiper .swiper-button-next:after, .spot-details-swiper .swiper-button-prev:after {
  content: none;
}
.spot-details-swiper .swiper-button-next {
  right: -40px;
}
.spot-details-swiper .swiper-button-prev {
  left: -40px;
}
.spot-details-swiper .spot_details-swiper-btn {
  display: flex;
  justify-content: center;
}
.spot-details-swiper .spot_details-swiper-btn .spot-details-play {
  width: 30px;
  height: 18px;
  cursor: pointer;
  text-align: center;
  padding: 2px 0;
}
.spot-details-swiper .spot_details-swiper-btn .is_playing::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.spot-details-swiper .spot_details-swiper-btn .is_playing::after {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.spot-details-swiper .spot_details-swiper-btn .is_pause::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #517422;
  background: transparent;
}
.spot-details-swiper .spot_details-swiper-btn .swiper-pagination {
  position: static;
  margin-top: 10px;
}
.spot-details-swiper .swiper-slide.hide {
  display: none;
}
@media only screen and (min-width: 769px) {
  .spot-details-swiper .swiper-slide .content-img_caption.spot_caption.non-projector-caption {
    display: none;
  }
}
.spot-details-swiper img {
  width: 100%;
  height: 94px;
  -o-object-fit: cover;
     object-fit: cover;
}
.spot-details-swiper img.horizontal_img {
  width: 100%;
}
@media only screen and (min-width: 769px) {
  .spot-details-swiper img.active-spot-slide {
    border: 5px solid #517422;
  }
}

@media only screen and (max-width: 1024px) {
  .spot-details-swiper .spot_details-swiper-btn .spot-details-play {
    width: 25px;
    height: 15px;
    cursor: pointer;
    text-align: center;
    padding: 6px 0;
  }
  .spot-details-swiper .spot_details-swiper-btn .is_playing::before {
    content: "";
    display: inline-block;
    height: 15px;
    width: 4px;
    background: #517422;
    margin: 0 3px;
  }
  .spot-details-swiper .spot_details-swiper-btn .is_playing::after {
    content: "";
    display: inline-block;
    height: 15px;
    width: 4px;
    background: #517422;
    margin: 0 3px;
  }
  .spot-details-swiper .spot_details-swiper-btn .is_pause::after {
    content: "";
    display: inline-block;
    width: auto;
    height: auto;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #517422;
    background: transparent;
  }
}
@media only screen and (max-width: 768px) {
  .spot-details-swiper .spot_details-swiper-btn .spot-details-play {
    width: 20px;
    height: 10px;
    cursor: pointer;
    text-align: center;
    padding: 1px 0;
  }
  .spot-details-swiper .spot_details-swiper-btn .is_playing::before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 4px;
    background: #517422;
    margin: 0 1px;
  }
  .spot-details-swiper .spot_details-swiper-btn .is_playing::after {
    content: "";
    display: inline-block;
    height: 10px;
    width: 4px;
    background: #517422;
    margin: 0 1px;
  }
  .spot-details-swiper .spot_details-swiper-btn .is_pause::after {
    content: "";
    display: inline-block;
    width: auto;
    height: auto;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #517422;
    background: transparent;
  }

  .content-img-projector {
    display: none;
  }

  .spot-details-swiper .swiper-slide {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .spot-details-swiper .swiper-pagination {
    display: block;
  }
  .spot-details-swiper img {
    height: 300px;
    width: auto;
  }
}
.flex-photo-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  clear: both;
}
@media only screen and (max-width: 520px) {
  .flex-photo-center {
    display: block;
  }
}
.flex-photo-center.first-photo {
  display: flex;
}
@media only screen and (min-width: 1025px) {
  .flex-photo-center.first-photo {
    display: block;
  }
}

/*district*/
html:lang(en) .districts-page p:not(.district-photo-caption) {
  text-align: justify;
}

.d1-container,
.d2-container,
.d3-container {
  /* display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center; */
  text-align: justify;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1025px) {
  .d1-container,
.d2-container,
.d3-container {
    display: block;
  }
}
.d1-container p.district-photo-caption,
.d2-container p.district-photo-caption,
.d3-container p.district-photo-caption {
  margin: 0px 10px 0px 10px;
  text-align: center;
}
@media only screen and (max-width: 460px) {
  .d1-container p.district-photo-caption,
.d2-container p.district-photo-caption,
.d3-container p.district-photo-caption {
    width: 100%;
    margin: 0px;
  }
}
.d1-container .image-container,
.d2-container .image-container,
.d3-container .image-container {
  position: relative;
  /* margin: 20px auto; */
  margin: 0px 10px 0px 10px;
}
@media only screen and (min-width: 1025px) {
  .d1-container .image-container,
.d2-container .image-container,
.d3-container .image-container {
    height: 100%;
    margin: 0px 10px 0px 10px;
  }
}
@media only screen and (max-width: 470px) {
  .d1-container .image-container,
.d2-container .image-container,
.d3-container .image-container {
    height: auto;
    width: auto;
    margin: 0px;
  }
}

.d2-container,
.d3-container {
  width: 50%;
}
@media only screen and (max-width: 520px) {
  .d2-container,
.d3-container {
    width: 100%;
  }
}
.d2-container .image-container img,
.d3-container .image-container img {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 470px) {
  .d2-container .image-container,
.d3-container .image-container {
    height: auto;
    width: auto;
  }
}

.d4-container .district-photo-caption {
  width: 100%;
  text-align: center;
}
@media only screen and (max-width: 460px) {
  .d4-container .district-photo-caption {
    width: 100%;
    margin: 0px;
  }
}

@media only screen and (min-width: 1025px) {
  .d1-container {
    float: right;
    width: 50%;
  }

  .d3-container .image-container {
    float: right;
  }

  .d2-container .image-container {
    float: left;
  }
}
.svg-map {
  height: 25em;
  width: 35em;
}

.gm-style-iw button {
  display: none !important;
}

.hide-blocker {
  position: relative;
}

.default-hide {
  position: relative;
  overflow: hidden;
}

.default-hide-blocker {
  position: absolute;
  height: 100%;
  /* top: 0; */
  left: 0;
  bottom: 0;
  right: 0;
  /* z-index: 100; */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.7) 75%, white 90%);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  font-size: 21px;
  font-weight: bold;
  transition: 0.6s height ease;
}

.default-hide-blocker.opened {
  height: 0;
}

.default-hide-btn {
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #9e9e9e;
  margin: auto;
}

.default-hide-btn i {
  font-size: 20px;
  line-height: 30px;
  color: #FFF;
}

.default-hide-text {
  margin: 10px 0 0;
  text-align: center;
}

mark {
  background-color: transparent;
  color: #517422;
  text-decoration: underline;
}

@media only screen and (max-width: 1024px) {
  .d1-container,
.d2-container,
.d3-container {
    flex-wrap: wrap;
  }
}
/*end of district*/
.other_site_slider {
  margin: auto;
  position: relative;
  border-top: 1px solid #ececec;
  padding: 100px 0;
  max-width: 1150px;
}
.other_site_slider .swiper-container {
  max-width: 1050px;
}
.other_site_slider .swiper-slide {
  width: 85px;
  align-self: stretch;
}
.other_site_slider .swiper-slide img {
  width: 100%;
  height: 100%;
}
.other_site_slider .swiper-button-next, .other_site_slider .swiper-button-prev {
  width: auto;
  height: auto;
  color: #333333;
}
.other_site_slider .swiper-button-next i, .other_site_slider .swiper-button-prev i {
  font-weight: bold;
}
.other_site_slider .swiper-button-next:after, .other_site_slider .swiper-button-prev:after {
  content: none;
}
.other_site_slider .swiper-button-next {
  right: 0;
}
.other_site_slider .swiper-button-prev {
  left: 0;
}
.other_site_slider .other_site_slider-swiper {
  position: relative;
  height: 100%;
}

.other_site_slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  font-size: 0;
}
.other_site_slider-nav .other_site_slider-play {
  width: 30px;
  height: 30px;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
}
.other_site_slider-nav .other_site_slider-play.is_pause::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #517422;
  background: transparent;
}
.other_site_slider-nav .other_site_slider-play.is_playing::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.other_site_slider-nav .other_site_slider-play.is_playing::after {
  content: "";
  display: inline-block;
  height: 18px;
  width: 4px;
  background: #517422;
  margin: 0 3px;
}
.other_site_slider-nav .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  max-width: calc(100% - 60px);
  position: static;
}

.useful_search_lightbox_wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.useful_search_lightbox_wrapper.active {
  opacity: 1;
  visibility: visible;
}

.useful_search_lightbox_close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/close_w.png);
  cursor: pointer;
}

.useful_search_lightbox_overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-color: #000;
}

.useful_search_lightbox {
  width: calc(100% - 40px);
  max-width: 1200px;
  height: 100%;
  max-height: calc(100% - 40px);
  background-color: #332e3a;
  position: relative;
  z-index: 1;
  padding: 50px 40px;
  border-radius: 20px;
}

.useful_search_full_list {
  overflow: auto;
  height: 100%;
  display: flex;
  flex-flow: wrap;
  margin: 0 -20px;
}

.useful_search_full-item {
  width: 33.3%;
  padding: 20px;
  color: #fff;
}

.side-menu {
  position: fixed;
  top: 50%;
  right: -460px;
  width: 580px;
  height: 366px;
  max-height: 100%;
  transform: translateY(-50%);
  transition: right 0.3s, height 0.3s;
  z-index: 10;
  display: none;
}
.side-menu:hover:not(.active) {
  right: -420px;
}
.side-menu.active {
  right: 0;
}
.side-menu.active .menu {
  height: auto;
}
.side-menu .menu {
  position: absolute;
  width: 460px;
  height: 120px;
  right: 0;
  margin: 3px 0;
}
.side-menu .menu:nth-child(1) {
  top: 0;
}
.side-menu .menu:nth-child(2) {
  top: 123px;
}
.side-menu .menu:nth-child(3) {
  top: 246px;
}
.side-menu .menu.sightseeing .icon,
.side-menu .menu.sightseeing .text {
  background-color: #f6aa5f;
}
.side-menu .menu.sightseeing.active .text {
  top: 0;
}
.side-menu .menu.diningEntertainment .icon,
.side-menu .menu.diningEntertainment .text {
  background-color: #46b6cf;
}
.side-menu .menu.diningEntertainment.active .text {
  top: -123px;
}
.side-menu .menu.shopping .icon,
.side-menu .menu.shopping .text {
  background-color: #d5cb58;
}
.side-menu .menu.shopping.active .text {
  top: -246px;
}
.side-menu .menu.active {
  z-index: 1;
}
.side-menu .menu.active .text {
  height: auto;
  min-height: 489px;
  border-radius: 0 0 15px 15px;
}
.side-menu .menu.active .text div {
  display: block;
}
.side-menu .menu .icon {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 0;
  left: -120px;
  padding: 30px;
  border-radius: 15px 0 0 15px;
  cursor: pointer;
}
.side-menu .menu .text {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
  width: 460px;
  min-height: 120px;
  background-color: inherit;
}
.side-menu .menu .text div {
  display: none;
}
.side-menu .menu .text .title {
  font-size: 36px;
  font-size: 2.25;
  padding: 45px 45px 15px;
}
.side-menu .menu .text .contents {
  padding-bottom: 35px;
}
.side-menu .menu .text .contents .page {
  display: none;
}
.side-menu .menu .text .contents .page.active {
  display: block;
}
.side-menu .menu .text .contents .pages {
  text-align: center;
}
.side-menu .menu .text .contents .pages span {
  margin: 0 10px;
  font-size: 22px;
  font-size: 1.375;
  cursor: pointer;
}
.side-menu .menu .text .contents .pages span.active {
  color: white;
  text-decoration: underline;
}
.side-menu .menu .text .content {
  font-size: 22px;
  font-size: 1.375;
  padding: 15px 45px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-menu .menu .text .content a {
  color: inherit;
}
@media only screen and (min-width: 768px) {
  .side-menu {
    display: block;
  }
}

@media only screen and (max-width: 1550px) {
  .header-nav_item {
    font-size: 17.6px;
    font-size: 1.1;
  }

  .header-tools_item {
    font-size: 14px;
    font-size: 0.875;
  }
}
@media only screen and (max-width: 1480px) {
  .header-bar-left {
    width: 400px;
  }

  .header-logo-had .text {
    font-size: 10px;
  }

  .header-logo-gohk {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 1280px) {
  .header-bar-right {
    width: 100%;
  }

  .header-bar-right-top {
    padding-top: 10px;
  }

  .header-tools_item.upper-part-nav {
    margin-top: -40px;
  }
}
@media only screen and (max-width: 1024px) {
  .header-bar {
    align-items: center;
  }
  .header-bar .desktop {
    display: none;
  }
  .header-bar .mobile {
    display: block;
  }

  .header-logo-had .text {
    margin-top: 10px;
    font-size: 9px;
  }

  .header-logo-gohk {
    width: 300px;
    margin-left: 10px;
  }

  .header-logo-had .image {
    width: 78.8333333333px;
    height: 43px;
  }
  .header-logo-had .text {
    font-size: 6px;
    line-height: 1;
    margin-top: 1px;
  }

  .header-logo-gohk {
    width: 208.3333333333px;
    height: 50px;
    margin-top: 3px;
  }

  .site-nav {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .header-nav {
    display: none;
  }

  .header-bar-left {
    width: calc(100% - 160px);
  }

  .header-bar-right {
    width: 160px;
  }

  .mobile_header-tools_item {
    width: 30px;
  }

  .top-highlight-row {
    width: 100%;
    padding: 0;
  }
  .top-highlight-row:nth-child(2n+2) {
    border-left: 0;
    border-top: 1px solid #ccc;
  }

  .top-highlight-item.large .top-highlight-item-img {
    width: 60px;
  }
  .top-highlight-item.large .top-highlight-item-title {
    font-size: 16px;
    font-size: 1;
    width: calc(100% - 60px);
  }

  .top-highlight-item.small .top-highlight-item-title {
    font-size: 16px;
    font-size: 1;
  }

  .top-highlight {
    padding: 20px 0 0;
  }

  .top-highlight_close {
    position: absolute;
    right: 10px;
    top: -10px;
    width: 15px;
    height: 15px;
  }

  .bottom-menu_row {
    width: 100%;
    padding-right: 0;
    margin: 0;
    margin-top: 30px;
  }
  .bottom-menu_row:nth-child(1) {
    margin-top: 0;
  }

  .display-mobile {
    display: block;
  }

  .display-desktop {
    display: none;
  }

  .index-section {
    padding: 60px 0;
  }

  .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    margin: 0 3px;
  }

  .information-inner-column {
    font-size: 18px;
    font-size: 1.125;
  }
  .information-inner-column:nth-child(1) {
    width: 100%;
    padding: 0 0px;
  }
  .information-inner-column img.icon {
    display: block;
    margin: 0 auto;
    padding: 5px;
  }
  .information-inner-column:nth-child(2) {
    width: 100%;
  }

  .information .btn {
    display: block;
    margin: 0 auto 8px;
  }

  .section-news-item {
    padding: 40px 30px 20px 10px;
  }

  .section-news-item_title:after {
    top: -1.3em;
    right: -30px;
    font-size: 2em;
  }

  .section-news-btn {
    text-align: center;
  }

  .useful_slider {
    padding: 60px 0;
  }

  .other_site_slider {
    padding: 20px 0;
  }
  .other_site_slider .swiper-pagination {
    bottom: -20px;
  }

  .section-useful-item {
    width: calc(50% - 4px);
  }

  .section-black .section-news-item {
    border: 0;
    border-radius: 15px;
    padding: 30px 40px;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .header-logo_img {
    width: 50px;
  }

  .header-logo_text {
    width: calc(100% - 50px);
  }

  .mobile_header-nav {
    padding: 0 0 50px;
  }

  .mobile_header-nav_item {
    margin: 20px 0;
  }

  .mobile_header-nav-link {
    font-size: 22px;
    font-size: 1.375;
  }

  .mobile_header-nav_sub-title {
    font-size: 20px;
    font-size: 1.25;
    margin: 15px 0;
  }

  .mobile_header-nav_sub-item {
    font-size: 18px;
    font-size: 1.125;
    margin: 15px 0;
  }

  .mobile_header-nav_item.has-sub .mobile_header-nav-link:after {
    font-size: 1.2em;
  }

  .bottom-menu-wrapper {
    padding: 40px 0;
  }

  .bottom-menu_row-item {
    margin: 10px 0;
  }

  .bottom-menu_row {
    margin-top: 15px;
  }

  .bottom-logo_item {
    margin: 0 8px;
    width: 75px;
  }

  .bottom-date {
    margin-top: 15px;
  }

  footer {
    padding: 30px 0;
  }

  .site-wrapper {
    padding: 0 20px;
  }

  .map-container.mobile-version {
    width: calc(100% - 40px);
  }

  .map-container.mobile-version.not-fixed, .map-container.mobile-version.not-fixed-not-over-container {
    width: 100%;
  }

  .index-section {
    padding: 40px 0;
  }

  .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
  }

  .index-section-title {
    font-size: 28px;
    font-size: 1.75;
  }

  .section-news-list {
    margin: 40px 0;
  }

  .section-news-item_date {
    font-size: 20px;
    font-size: 1.25;
    padding-bottom: 10px;
  }

  .section-news-item {
    padding: 20px 30px 10px 10px;
    margin: 30px 0;
  }

  .section-black .section-news-item {
    border: 0;
    border-radius: 15px;
    padding: 20px 30px;
    margin-bottom: 20px;
  }

  .useful_slider {
    padding: 20px 0;
  }
  .useful_slider .swiper-pagination-bullet {
    margin: 0 8px;
  }

  .section-useful-licence {
    padding-top: 40px;
  }

  .section-useful-text {
    padding-top: 15px;
    font-size: 14px;
    font-size: 0.875;
  }

  .other_site_slider .swiper-button-next i {
    font-size: 50px;
  }
  .other_site_slider .swiper-button-prev i {
    font-size: 50px;
  }

  .scroll-top {
    right: 20px;
    width: 30px;
    height: 30px;
  }
  .scroll-top i {
    line-height: 30px;
    font-size: 20px;
  }

  .useful_search_full-item {
    width: 50%;
  }

  .btn,
.accordion {
    min-height: 29px;
  }

  .shape {
    width: 150%;
    height: 150%;
    transform: scale(0.66);
    transform: scale(0.6666666667);
    transform-origin: top left;
  }
}
@media only screen and (max-width: 520px) {
  .site-nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header-logo-had .image {
    width: 51.3333333333px;
    height: 28px;
  }

  .header-logo-gohk {
    width: 116.6666666667px;
    height: 28px;
  }

  .header-bar-left {
    width: calc(100% - 85px);
  }

  .header-bar-right {
    width: 85px;
  }

  .mobile_header-tools_item {
    margin-left: 5px;
    width: 16px;
    margin-left: 5px;
    width: 20px;
  }

  .hamburger-box {
    height: 20px;
    margin-top: 4px;
  }

  .hamburger-inner {
    height: 3px;
  }
  .hamburger-inner:after {
    bottom: -7px;
    height: 3px;
  }
  .hamburger-inner:before {
    top: -7px;
    height: 3px;
  }
}
.side-menu-spot {
  position: fixed;
  right: -520px;
  bottom: 0;
  width: 520px;
  background: rgba(77, 156, 105, 0.8);
  transition: 0.2s right ease;
  z-index: 15;
}
.side-menu-spot.active {
  right: 0;
}
.side-menu-spot .side-menu-spot-tag {
  position: absolute;
  right: 100%;
  width: 80px;
  padding: 10px;
  top: 0;
  color: #fff;
  background-color: rgba(77, 156, 105, 0.8);
  cursor: pointer;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 20px;
  font-size: 1.25;
}
.side-menu-spot .side-menu-spot-body {
  padding: 40px 10px 10px;
}
.side-menu-spot .side-menu-spot-body .side-menu-spot-close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 22px;
  padding: 10px;
  z-index: 1;
  color: #f2f2f2;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion {
  border-top: 1px solid #ccc;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-title {
  color: #000;
  padding: 15px 10px;
  font-weight: 700;
  background: #f2f2f2;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
  font-size: 20px;
  font-size: 1.25;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-title:after {
  content: "\f107";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body {
  background: #fff;
  overflow: hidden;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .swiper-wrapper {
  height: 70%;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-grid {
  display: flex;
  flex-flow: wrap;
  height: 400px;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-grid .side-menu-accordion-grid-item {
  width: 50%;
  height: 50%;
  padding: 10px;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-grid .side-menu-accordion-grid-item .side-menu-accordion-grid-img {
  height: 70%;
  width: 100%;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-grid .side-menu-accordion-grid-item .side-menu-accordion-grid-img img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  display: block;
  margin: auto;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-grid .side-menu-accordion-grid-title {
  font-size: 20px;
  font-size: 1.25;
  text-align: left;
  padding-left: 10px;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-nav {
  padding: 10px 30px;
  position: relative;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-nav .side-menu-accordion-button-prev {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 10px;
  transform: translate(0, -50%);
  cursor: pointer;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-nav .side-menu-accordion-button-next {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 0 10px;
  transform: translate(0, -50%);
  cursor: pointer;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-nav .side-menu-accordion-pagination {
  text-align: center;
  line-height: 5px;
}
.side-menu-spot .side-menu-spot-body .side-menu-accordion .side-menu-accordion-body .side-menu-accordion-nav .side-menu-accordion-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
}

@media only screen and (max-width: 767px) {
  .side-menu-spot {
    width: 100%;
    bottom: 0;
    height: 100%;
    right: -100%;
  }

  .side-menu-spot.active {
    right: 0;
    z-index: 100;
  }

  .side-menu-spot .side-menu-spot-tag {
    bottom: 10%;
    top: auto;
  }

  .side-menu-spot .side-menu-spot-body {
    padding-top: 40px;
    height: 100%;
    overflow: auto;
  }
}
#district-selecter {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(206, 228, 192);
  padding: 20px 20px 50px;
  overflow-y: auto;
  display: none;
}
#district-selecter.active {
  display: block;
}
#district-selecter .district-selecter-sub-title {
  display: flex;
}
#district-selecter .district-selecter-sub-btn {
  width: 30px;
}
#district-selecter .district-selecter-map-title {
  width: calc(100% - 30px);
  text-align: center;
  margin-bottom: 10px;
  color: #000;
  min-height: 20px;
  font-size: 20px;
  font-size: 1.25;
}
#district-selecter .district-selecter-box-back {
  display: none;
  cursor: pointer;
  color: #000;
}
#district-selecter .district-selecter-box-back i {
  font-size: 30px;
  line-height: 20px;
}
#district-selecter .district-selecter-map-tag-back {
  display: none;
  cursor: pointer;
  color: #000;
}
#district-selecter .district-selecter-map-tag-back i {
  font-size: 30px;
  line-height: 20px;
}
#district-selecter .district-selecter-back {
  z-index: 1;
  padding: 10px;
  position: fixed;
  top: 0;
  right: 0;
  cursor: pointer;
  color: #000;
}
#district-selecter .district-selecter-back i {
  font-size: 30px;
  font-weight: 15px;
}
#district-selecter .district-selecter-title {
  font-size: 25px;
  font-size: 1.5625;
  text-align: center;
  color: #000;
  font-weight: 700;
  margin-bottom: 20px;
}
#district-selecter .district-selecter-nav {
  text-align: center;
  padding: 10px 0;
  background: rgb(206, 228, 192);
  z-index: 1;
}
#district-selecter .district-selecter-nav .district-selecter-nav-item {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  color: #fff;
}
#district-selecter .district-selecter-nav .district-selecter-nav-item.active {
  border-bottom: 2px solid #517422;
}
#district-selecter #district-list-block {
  position: relative;
  padding-top: 0;
}
#district-selecter #district-list-block .district-selecter-box-catitem {
  cursor: pointer;
  width: 100%;
  padding: 20px 10px;
  border: 4px solid #fff;
  margin: 10px 0;
  text-align: center;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#district-selecter #district-list-block .district-selecter-box-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
#district-selecter #district-list-block .district-selecter-box-group .district-selecter-box-item {
  cursor: pointer;
  width: calc(50% - 20px);
  padding: 20px 10px;
  border: 4px solid #fff;
  margin: 10px;
  text-align: center;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 1.3rem;
}
@media only screen and (max-width: 600px) {
  #district-selecter #district-list-block .district-selecter-box-group .district-selecter-box-item {
    font-size: 1rem;
  }
}
#district-selecter .district-selecter-map {
  position: relative;
  max-width: 550px;
  margin: auto;
  overflow: hidden;
}
#district-selecter .district-selecter-map svg {
  transition: 0.5s transform ease-in-out;
  margin: 0 -20px;
}
#district-selecter .district-selecter-map .district-selecter-map-tag-group {
  transition: 0.5s opacity ease-in-out, 0.5s visibility ease-in-out;
}
#district-selecter .district-selecter-map .district-selecter-map-tag-group.map-tag-group-hk {
  opacity: 1;
  visibility: visible;
}
#district-selecter .district-selecter-map .district-selecter-map-tag-group.map-tag-group-Kowloon {
  opacity: 0;
  visibility: hidden;
}
#district-selecter .district-selecter-map .district-selecter-map-tag-group.map-tag-group-nt {
  opacity: 0;
  visibility: hidden;
}
#district-selecter .district-selecter-map .district-selecter-map-tag-group.map-tag-group-hkisland {
  opacity: 0;
  visibility: hidden;
}
#district-selecter .district-selecter-map.selected-area .district-selecter-map-tag-group.map-tag-group-hk {
  opacity: 0;
  visibility: hidden;
}
#district-selecter .district-selecter-map.selected-area.area-hkisland.area-zoomed .district-selecter-map-tag-group.map-tag-group-hkisland {
  opacity: 1;
  visibility: visible;
}
#district-selecter .district-selecter-map.selected-area.area-hkisland svg {
  transform: scale(3) translate(-10%, -25%);
}
#district-selecter .district-selecter-map.selected-area.area-kt.area-zoomed .district-selecter-map-tag-group.map-tag-group-Kowloon {
  opacity: 1;
  visibility: visible;
}
#district-selecter .district-selecter-map.selected-area.area-kt svg {
  transform: scale(3) translate(-10%, -6%);
}
#district-selecter .district-selecter-map.selected-area.area-nt.area-zoomed .district-selecter-map-tag-group.map-tag-group-nt {
  opacity: 1;
  visibility: visible;
}
#district-selecter .district-selecter-map .district-selecter-map-tag {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  font-size: 12px;
  font-size: 0.75;
}
#district-selecter .district-selecter-map .district-selecter-map-tag:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../images/spot_sightseeing.png);
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Hong Kong Island"] {
  top: 70%;
  left: 60%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district=Kowloon] {
  top: 55%;
  left: 60%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="New Territories"] {
  top: 30%;
  left: 35%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Wan Chai"] {
  top: 35%;
  left: 50%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district=Southern] {
  top: 50%;
  left: 60%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district=Eastern] {
  top: 30%;
  left: 70%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Central and Western"] {
  top: 25%;
  left: 30%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Kowloon City"] {
  top: 53%;
  left: 52%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Kwun Tong"] {
  top: 60%;
  left: 75%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Sham Shui Po"] {
  top: 43%;
  left: 39%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Wong Tai Sin"] {
  top: 38%;
  left: 62%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Yau Tsim Mong"] {
  top: 63%;
  left: 45%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district=Islands] {
  top: 70%;
  left: 22%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Kwai Tsing"] {
  top: 48%;
  left: 52%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district=Northern] {
  top: 10%;
  left: 60%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Sai Kung"] {
  top: 54%;
  left: 71%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Sha Tin"] {
  top: 36%;
  left: 65%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Tai Po"] {
  top: 27%;
  left: 56%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Tsuen Wan"] {
  top: 41%;
  left: 49%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Tuen Mun"] {
  top: 40%;
  left: 26%;
}
#district-selecter .district-selecter-map .district-selecter-map-tag[data-district="Yuen Long"] {
  top: 28%;
  left: 35%;
}

@media only screen and (orientation: landscape) and (max-height: 1024px) and (min-width: 1025px) {
  body.in-mobile-version .header-bar .desktop {
    display: none;
  }

  body.in-mobile-version .header-bar-left {
    width: calc(100% - 160px);
  }

  body.in-mobile-version .header-bar-right {
    width: 160px;
  }

  body.in-mobile-version .header-bar .mobile {
    display: block;
  }

  body.in-mobile-version .mobile_header-tools_item {
    width: 30px;
  }

  body.in-mobile-version .header-bar {
    align-items: center;
  }
}

/* used as popup msg */

.black_overlay {
 /*  display: none; */
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 450%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.white_content {
  /* display: none; */
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 64%;
  padding: 16px;
/*   border: 16px solid #ffa500; */
  /* background-color: white; */
  z-index: 1002;
  overflow: auto;
  align: centre;
}

@media (max-width: 1024px) {
  .white_content {
      top: 4%;
      left: 4%;
      width: 92%;
      height: 92%;
  }
}

.notactive {
  pointer-events: none;
  cursor: default;
}

.DisabledLink {
  pointer-events: none;
  cursor: default;
}

.display_detail {
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: "Arial";
  font-size: 1.3em;
  color: black;
}

.display_cover {
  align: middle;
  background-color: #fdd835;
  width: 200px;
  height: 200px;
  border: 1px
}

.display_cover_text {
  mages-valign: center;
  images-align: center;
  text-valign: center;
  text-align: center;
  background-color: #fdd835;
  font-weight: bold;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  font-family: "Arial";
  font-size: 0.9em;
  color: white;
  width: 210px;
}

.divelement {
  vertical-align: text-top;
}

td img {
  vertical-align: center;
}

.details_header {
  images-valign: center;
  images-align: center;
  text-valign: center;
  text-align: center;
  font-family: "Arial";
  font-size: 1.31em;
  color: #fdd835;
  align: center;
  font-weight: bold;
}

.clsbtn {
  border: 0;
  width: 2rem;
  height: auto;
  position: absolute;
  right: 1rem;
}

@media (max-width: 1024px) {
  .clsbtn {
    width: 1.2rem;
  }

}


/* used as popup msg */


.animated #static, .static #animated {
  display: none;
}
.animated #animated, .static #static {
  display: inline;
}

#img_wrap #static, #img_wrap:hover #animated {
  display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
  display: none;
}

#faux-gif {
	position: static;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	background-image: url("/images/sightseeing_icon_slow.gif");
	background-repeat: no-repeat;
	/* background-attachment: fixed; */
	background-position: center;
	width: 120px;
	height: 90px;
	/* animation: giffy 0.5s infinite steps(1);
  -webkit-animation: giffy 0.5s infinite steps(1); */
  border-radius: 0%;
  display: inline-block;
  /* animation-play-state: running; */
}

#faux-gif:hover {
	animation-play-state:paused;
  -webkit-animation-play-state:paused !important;
}

/* @keyframes giffy {
	0%   { background-image: url('/images/frame_0_delay-0.1s.gif'); } 
	15%  { background-image: url('/images/frame_0_delay-0.1s.gif'); }
	30%  { background-image: url('/images/frame_0_delay-0.1s.gif'); }
	45%  { background-image: url('/images/frame_0_delay-0.1s.gif'); }
	60%  { background-image: url('/images/sightseeing.gif'); }
	75%  { background-image: url('/images/sightseeing.gif'); }
	90%  { background-image: url('/images/sightseeing.gif'); }
	100% { background-image: url('/images/sightseeing.gif'); }
}
@-webkit-keyframes giffy {
  0%   { background-image: url('/images/frame_0_delay-0.1s.gif'); } 
	15%  { background-image: url('/images/frame_0_delay-0.1s.gif'); }
	30%  { background-image: url('/images/frame_0_delay-0.1s.gif'); }
	45%  { background-image: url('/images/frame_0_delay-0.1s.gif'); }
	60%  { background-image: url('/images/sightseeing.gif'); }
	75%  { background-image: url('/images/sightseeing.gif'); }
	90%  { background-image: url('/images/sightseeing.gif'); }
	100% { background-image: url('/images/sightseeing.gif'); }
} */

.checkin_title{
  vertical-align: bottom;
}

.tab-title h2 .tab-title-text.checkin_title {
  margin-right: 0;
}

#fake-faux-gif {
	position: static;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	background: transparent;
	background-repeat: no-repeat;
	background-position: center;
	width: 120px;
	height: 90px;
  border-radius: 0%;
  display: inline-block;
}