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

* {
  font-family: 'Roboto',  'Noto Sans TC', sans-serif;
}

* {
  padding: 0;
  box-sizing: border-box;

}

.main-view {
  flex: 1;
  padding-top: 123px;
}

@media (max-width: 1000px) {
  .main-view {
    padding-top: 68px;
  }
}

.search-view {
  width: 95%;
  max-width: 1620px;
  margin: 0 auto;
}

iframe {
  max-height: 1000px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  width: 21px;
  height: 21px;
  background: url('../images/Group 20758.png') no-repeat right center;
  background-size: cover;
}
.venuse-select {
  /*移除箭頭樣式*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  outline: none;
  /*改變右邊箭頭樣式*/
  background: url("../images/arrow-down-blue.png") no-repeat right center transparent;
  background-position-x: 95%;
  background-size: 18px 9px;
  padding-right: 44px;
}
@media (max-width: 1000px) {
  input[type="date"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    background: url('../images/Group 20758.png') no-repeat right center;
    background-size: cover;
  }
}


.auto-fill-view {
  max-width: 1620px;
  width: 95%;
  margin: 0 auto;
}

.page-header {
  background: #fff;
  height: auto;
  padding: 0;
  box-shadow: 0 0 20px #bdd8d1;
}

.header-top {
  background-color: #29C9D4;
  width: 100%;
}

.header-top-nav {
  display: flex;
  align-items: center;
  justify-content: right;
  height: 100%;
  height: 43px;
}
.header-top-nav a{
  text-decoration: none;
  height: 23px;
  padding: 0 13px;
}
.search-btn{
  height: 19px !important;
}

.header-top-nav div {
  /*height: 23px;*/
  color: #1A1A1A;
  cursor: pointer;
  /* padding: 0 11px; */
  font-size: 1.125em;
}

.header-top-nav div:hover {
  opacity: .9;
}

.header-top-nav div:active {
  opacity: .7;
}

#search-bar-lg {
  display: none;
}

#search-bar-sm {
  display: none;
}

.search-top-nav {
  height: 65px;
  background-color: #E9E9E9;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.125em;
}

.search-top-nav-sm {
  position: absolute;
  width: 100%;
  padding: 0 0 0 1rem;
  left: 0;
  top: 58px;
  height: 60px;
  justify-content: flex-start;
}

.search-top-nav div {
  color: #505050;
}

.search-top-nav .search-box {
  background-color: #FFFFFF;
  border-radius: 10px;
  height: 44px;
  margin: 10px 24px;
  position: relative;
}


.search-top-nav .search-box input {
  border: none;
  height: 44px;
  border-radius: 10px;
  width: 342px;
  padding-left: 20px;
  padding-right: 40px;
  font-size: 1.125em;
}

.search-top-nav-sm .search-box {
  margin: 10px 15px;
}

.search-top-nav-sm .search-box input {
  max-width: 342px;
  width: auto;
  flex: 1;
}

/* input:focus {
  outline: none !important;
} */

.search-top-nav .search-box a {
  position: absolute;
  right: 14px;
  width: 19px;
  top: 12.5px;
}

.search-top-nav .key-word a {
  margin-right: 24px;

  color: #505050;
  text-decoration: none;
}

@media (max-width: 1500px) {
  .search-top-nav {

    font-size: 0.85em;
  }

  .search-top-nav .key-word span {
    margin-right: 18px;
    font-size: 0.85em;
  }

  .search-top-nav .search-box {
    margin: 10px 18px;
  }
}

@media (max-width: 1220px) {
  .search-top-nav .key-word span {
    margin-right: 15px;
    font-size: 0.94em;
  }
}

@media (max-width: 700px) {
  .search-top-nav {
    font-size: 0.94em;
  }

  .search-top-nav .search-box {
    margin: 10px;
  }
}
@media (max-width: 390px) {
    .search-top-nav-sm .search-box input{
          max-width: 100%;
    width: 185px;  
    }  
}
.search-top-nav .close-search {
      width: 40px;
    height: 40px;
    padding: 10px;
}

.page-header .logo-img {
  width: 298px;
  position: relative;
  transition-duration: .3s;
  margin-left: 0;
  display: flex;
}

.page-header .header-lg {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  position: relative;
  max-width: 1620px;
  width: 98%;
  justify-content: space-between;
  z-index: 3;
}

@media (min-width: 1620px) {
  .page-header .header-lg {
    width: 1620px;
  }
}

@media (max-width: 1000px) {
  .header-top {
    display: none;
  }

  .page-header .header-lg {
    display: none;
  }

  .page-header {
    box-shadow: none;
    height: 65px; 
  }
}

.page-header .header-lg .fb-icon-lg {
  margin: calc(50px - 1.5rem) 0 0 0;
}

.page-header .header-lg .home-icon-img {
  width: 25px;
}

.page-header .header-lg .header-content {
  flex: 1 1 auto;
  height: 80px;
}

.page-header .header-lg nav {
  color: #000;
  line-height: 1;
  height: 100%;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  justify-content: right;
  -webkit-box-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-header .header-lg nav .nav-col {
  text-align: center;
  width: fit-content;
}

.page-header .header-lg nav .nav-col:hover .nav-link span {
  color: #29C9D4 !important;
  border-bottom: 3px solid #29C9D4;
}
.page-header .header-lg nav .nav-col .nav-link:focus span {
  color: #29C9D4 !important;
  border-bottom: 3px solid #29C9D4;
}

.page-header .header-lg a,
.page-header .header-lg a:link,
.page-header .header-lg a:visited {
  text-decoration: none;
}

.page-header .header-lg nav .nav-col:hover .header-lg-list {
  flex-direction: column;
  display: flex;
}
.page-header .header-lg nav .nav-col:not(:hover) .header-lg-list {
  
  display: none;
}

.page-header .header-lg nav .home-icon {
  display: flex;
  align-items: center;
  margin-left: 20px;
  min-width: 80px !important;
}

.page-header .header-lg nav .home-icon:hover {
  opacity: .8;
}

.page-header .header-lg nav .home-icon:active {
  opacity: .6;
}

.page-header .header-lg nav .nav-link {
  text-shadow: 0 0 0.6rem rgba(103, 151, 255, 0.2);
  position: relative;
  font-size: 1.5em;
  letter-spacing: 1px;
  color: #505050;
  padding: 20px 22px;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition-duration: .3s;
  height: 100%;
}

@media (max-width: 1650px) {
  .page-header .header-lg nav .nav-link {
    font-size: 1.125em;
  }
}

@media (max-width: 1500px) {
  .page-header .header-lg nav .nav-link {
    padding: 20px 15px;
  }

  .page-header .header-lg nav .nav-col {
    text-align: center;
    width: fit-content;
  }
}

@media (max-width: 1500px) {
  .page-header .header-lg nav .nav-link {
    padding: 20px 14px;
  }

  .header-top-nav div {
    height: 20px;
    font-size: 0.94em;
  }
}

@media (max-width: 1220px) {
  .page-header .header-lg nav .nav-link {
    font-size: 1em;
    padding: 20px 13px;
  }

  .page-header .logo-img {
    width: 240px;
  }

  .header-top-nav div {
    height: 20px;
    font-size: 0.87em;
    /* padding: 0 8px; */
  }
}

@media (max-width: 1070px) {
  .page-header .header-lg nav .nav-link {
    font-size: 0.97em;
    padding: 20px 9px;
  }

  .page-header .logo-img {
    width: 240px;
  }
}

/* .page-header .header-lg nav .nav-col:last-child .nav-link{
    padding-right: 0;
  } */
.page-header .header-lg nav .header-lg-list {
  background: #fff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  display: none;
  position: absolute;
  left: calc((1620px - 100vw) / 2);
  top: 80px;
  width: 100vw;
  box-shadow: 0 10px 10px #bdd8d17e;
  border-top: 1px solid #E9E9E9;
  z-index: 1;
}

.page-header .header-lg nav .header-lg-list .lg-list-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 30px 50px;
  max-width: 1620px;
  width: 98%;
  margin: 0 auto;
  padding: 35px 0 45px;
}

@media (max-width: 1620px) {
  .page-header .header-lg nav .header-lg-list {
    left: -1%;
  }
}


@media (max-width: 1000px) {
  .page-header .header-lg nav .header-lg-list {
    display: none;
  }

}

.page-header .header-lg nav .nav-list-item {
  text-align: left;
  color: #000;
  font-size: 1.25em;
}

.page-header .header-lg nav a{
  color: #000;
}

nav .nav-list-item .list-item-title {
  padding: 7px 0;
  border-bottom: 1px solid #E9E9E9;
  font-size: 1em;
  font-weight: 700;
  color: #222222;
}

nav .nav-list-item .list-item-sm {
  margin-top: 14px;
  font-size: 0.875em;
  cursor: pointer;
  color: #656565;
}
nav .nav-list-item .list-item-sm a{
   color: #656565; 
    line-height: 140%;
}
.page-header .header-lg nav .nav-list-item span {
  font-size: 1.125em;
}

.page-header .header-lg nav .list-item-sm a:hover {
  /*opacity: .8;*/
    text-decoration: underline;
    color: #0a80b3;
}

.page-header .header-lg nav .list-item-sm:active {
  opacity: .6;
}

@media (max-width: 1400px) {
  .page-header .header-lg nav .header-lg-list .lg-list-box {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px 40px;
  }

  nav .nav-list-item .list-item-title {
    font-size: 0.8em;
  }

  nav .nav-list-item .list-item-sm {
    font-size: 0.94em;
  }
}

.page-header .header-sm {
  /* width: calc(100% - 1rem); */
  width: 100%;
  height: 61px;
  display: none;
  padding: 0 0 0 1rem;
  background: rgba(255, 255, 255, .1);
  position: relative;
  z-index: 2;
  border-top: 7px solid #29C9D4;
}

@media (max-width: 1000px) {
  .page-header .header-sm {
    display: flex;
    text-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
  }
}

@media (max-width: 350px) {
  .page-header .header-sm {
    width: 100%;
    padding: 0 0 0 .5rem;
  }
}

.page-header .header-sm.active {
  background-color: #fff;
}

.page-header .header-sm nav {
  color: #000;
  line-height: 1;
  text-align: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.page-header .header-sm .logo-img-sm {
  flex: 1 1 auto;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
}

.page-header .header-sm .logo-img-sm .logo-sm-img {

  width: 213px;
  position: relative;
  transition-duration: .3s;
  margin-left: 0;
}

.page-header .header-sm .fb-icon-sm {
  position: relative;
  z-index: 2;
}

.page-header .header-sm .fb-sm-img {
  height: 1.7rem;
  margin-right: 1.5rem;
}

@media (max-width: 400px) {
  .page-header .header-sm .fb-sm-img {
    margin-right: 1rem;
  }
}

.page-header .header-sm .nav-mobile {
  height: 54px;
  width: 160px;
  position: relative;
  display: flex;
  justify-content: right;
  z-index: 2;
}

.nav-mobile-btn {
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 65px;
  margin: 0 17px;
}

.nav-mobile-search-button {
  height: 22px;
}

.page-header .header-sm .nav-mobile-open-button {
  text-shadow: 0 0 0.6rem rgba(103, 151, 255, 0.2);
  height: 13px;
  cursor: pointer;
}

.header-wave {
  height: 65px;
  max-height: 75px !important;
  position: absolute;
  right: 0;
  top: -7px;
  z-index: -1;
}

.page-header .nav-mobile-list {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  /* transition: .3s; */
  z-index: 1;
  max-height: 0;

  overflow: hidden;
}

@media (max-width: 1000px) {
  .page-header .nav-mobile-list {
    display: block;
  }
}

.page-header .nav-mobile-list.active {
  background: #29C9D4;
  min-height: 100vh;
  padding-bottom: 100px;
  z-index: 2;
  overflow: auto;
}

.page-header .nav-mobile-list .menu-header {
  width: 100%;
  padding: 10px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .33);
  height: 65px;
}

.page-header .nav-mobile-list .menu-header .logo {
  min-width: 200px;
  max-width: 200px;
  margin: 0;
}

.page-header .nav-mobile-list .menu-header .sm-menu-on-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 5px;
}

.page-header .nav-mobile-list .menu-header .sm-menu-on-btn a {
  height: 19px;
  width: 18%;
  margin-right: 0;
  margin-left: 20px;
}
.page-header .nav-mobile-list .menu-header .sm-menu-on-btn a{
  width: 100%;
}

.page-header .nav-mobile-list .nav-mobile-list-item {
  position: relative;
  color: #fff;

  font-weight: 500;
  transition: .2s;
  cursor: pointer;
  list-style-type: none;
  text-align: left;
}

.page-header .nav-mobile-list .nav-mobile-list-item a,
.page-header .nav-mobile-list .nav-mobile-list-item a:link,
.page-header .nav-mobile-list .nav-mobile-list-item a:visited {
  color: #fff;
}

.page-header .nav-mobile-list .nav-mobile-list-item .arrow-img-up {
  position: absolute;
  right: 20px;
  width: 21px;
  top: 18px;
  padding: 5px;
  display: none;
}

.page-header .nav-mobile-list .nav-mobile-list-item .arrow-img-down {
  position: absolute;
  right: 20px;
  width: 21px;
  top: 18px;
  padding: 5px;
  display: none;
}

.page-header .nav-mobile-list .nav-mobile-list-item #sm-list-about-arrow-down {
  display: block;
}

.page-header .nav-mobile-list .nav-mobile-list-item #sm-list-active-arrow-down {
  display: block;
}

.page-header .nav-mobile-list .nav-mobile-list-item .second-arrow-img-up {
  position: absolute;
  right: 20px;
  width: 21px;
  top: 9px;
  opacity: .7;
  padding: 5px;
  display: none;
}

.page-header .nav-mobile-list .nav-mobile-list-item .second-arrow-img-down {
  position: absolute;
  right: 20px;
  width: 21px;
  top: 9px;
  opacity: .7;
  padding: 5px;
  display: none;
}

.page-header .nav-mobile-list .nav-mobile-list-item #sm-second-list-about-arrow-down {
  display: block;
}

.page-header .nav-mobile-list .nav-mobile-list-item #sm-second-list-active-arrow-down {
  display: block;
}

.page-header .nav-mobile-list .nav-mobile-list-item #sm-list-active-list {
  border-bottom: 1px solid rgba(255, 255, 255, .33);
  padding: 10px 0px 10px 20px;
  display: none;
}

.page-header .nav-mobile-list .nav-mobile-list-item .sm-menu-ch {
  letter-spacing: .5px;
  padding: 0rem 1rem .1rem 1rem;
  font-size: 1.55em;
  font-weight: 400;
  height: 56px;
  line-height: 56px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .33);
}

.page-header .nav-mobile-list .nav-mobile-list-item a,
.page-header .nav-mobile-list .nav-mobile-list-item a:link,
.page-header .nav-mobile-list .nav-mobile-list-item a:visited {
  text-decoration: none;
}

.page-header .nav-mobile-list .nav-mobile-list-item.active {
  color: #FFFFFF !important;
}

.page-header .nav-mobile-list .nav-mobile-list-item.active a {

  color: rgba(255, 255, 255, .85) !important;
}
.page-header .nav-mobile-list a{
  display: block;
}
.nav-mobile-list-sm-list .nav-list-item {
  line-height: 140%;
  text-align: left;
  padding: 0px 20px;
  font-size: 1em;
  font-weight: 400;
  position: relative;
  color: rgba(255, 255, 255, .8) !important;
}

.two-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-mobile-list-sm-list .nav-list-item span {
  color: #22202B;
  font-size: 1.125em;
}

.nav-mobile-list-sm-list .nav-list-item div {
  line-height: 23px;
}

.nav-mobile-list-sm-list .nav-list-item .nav-list-name {
  line-height: 40px;
}
.nav-list-name a{
    font-size: 1.3em;
}
.nav-second-list-item {
  padding:5px 0 !important;
  margin-left: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .33);
}

#sm-second-list-active-list {
  margin-bottom: 5px;
  display: none;
    font-size: 1.1em;
}

.nav-mobile-list .sm-header-top-nav {
  margin-bottom: 100px;
  /*margin-left: 1rem;*/
}

.nav-mobile-list .sm-header-top-nav .sm-nav-btn {
  height: 23px;
  color: #fff;
  cursor: pointer;
  
  font-size: 0.85em;
}

.nav-mobile-list .sm-header-top-nav .icon-group,
.nav-mobile-list .sm-header-top-nav .text-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.nav-mobile-list .sm-header-top-nav .icon-group a,
.nav-mobile-list .sm-header-top-nav .text-group a{
  color: #fff;
  text-decoration: none;
    margin-right: 0;
    text-align: center;
    width: calc( ( 100% - 10px ) / 4 );
}

.nav-mobile-list .sm-header-top-nav .sm-nav-btn:hover {
  opacity: .9;
}

.nav-mobile-list .sm-header-top-nav .sm-nav-btn:active {
  opacity: .7;
}

@media (max-width: 500px) {
  .text-group .sm-nav-btn {
    padding-right: 15px !important;
    font-size: 0.94em !important;
  }
}


/* footer */
.page-footer {
  position: relative;
  width: 100%;
  background: #29C9D4;
    font-size: 1.1em;
}

.footer-box {
  margin: 0 auto;
  width: 95%;
  max-width: 1620px;
  color: #fff;

  padding-bottom: 11px;
}

.footer-hr {
  border: 0;
  height: 1px;
  width: 100%;
  background-color: #57E2E8;
  margin: 0;
}

.footer-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 35px 0 0px 0;
}

.footer-top-left {
  padding-bottom: 7px;
}

.footer-logo {
  width: 324px;
  margin: 0;
}

.footer-btn {
  color: #fff;
  background-color: #F7AB00;
  border: 1px solid #fff;
 width: auto;
    max-width: 150px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 10px;
  margin-top: 16px;
  font-size: 1.125em;
  display: block;
  text-decoration: none;
    padding: 0 20px;
}


.footer-top-right {
  width: 320px;
}

.footer-icon-group {
  display: flex;
  align-items: center;
  justify-content: space-around;

}
.footer-icon-group a{
  display: block;
  
}

.footer-top-right img {
  margin-bottom: 5px;
}

.footer-icon-1,
.footer-icon-2 {
  height: 32px;
}

.footer-icon-3 {
  height: 34px;
}

.footer-icon-4 {
  height: 30px;
}

.footer-icon-5 {
  height: 38px;
}

.footer-top-right img:last-child {
  margin-right: 0;
}

.watch-num {
  letter-spacing: 0.3px;
  font-weight: 400;
  font-size: 0.87em;
  width: 100%;
  text-align: right;
  margin: 60px 0 8px 0;
}

.access-img-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.access-img-box img {
  height: 60px;
  /* margin: 0 16px 0 0; */
}

.access-img-box img:last-child {
  margin-right: 0;
}

.footer-info-box {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
}

.footer-info-box-l {
  margin-right: 70px;
}

.footer-info-box-l div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1em;
  margin-top: 5px;
  letter-spacing: 0.3px;
  font-weight: 400;
}

.footer-info-box-l img {
  margin: 0;
  height: 16px;
  width: 13px;
  object-fit: contain;
  margin-right: 5px;
}

.footer-info-box-r p {
  font-size: 0.87em;
  margin-top: 5px;
  letter-spacing: 0.3px;
  font-weight: 400;
}

.footer-bottom {
  margin: 0 auto;
  width: 95%;
  max-width: 1620px;
  color: #fff;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-ps {
  display: flex;
  color: rgba(255, 255, 255, .8);
  font-size: 0.8em;
  font-weight: 400;
}

.footer-ps p {
  margin-right: 15px;
}

.footer-link {
  display: flex;
  align-items: center;
}

.footer-link a {
  font-size: 0.87em;
  padding: 0 10px;
  color: #fff;
  text-decoration: none;
}

.footer-link .link-line {
  width: 1px;
  height: 10px;
  background-color: #fff;
  padding: 0;
}

.footer-link div:last-child {
  padding-right: 0;

}


@media (max-width: 1250px) {
  .footer-ps {
    flex-direction: column;
  }
}

@media (max-width: 1150px) {
  .footer-info-box {
    flex-direction: column;
  }

  .footer-info-box-r {
    margin-top: 10px;
  }
}

@media (max-width: 880px) {
  .footer-ps p {
    width: 100%;
    text-align: center;
  }

  .footer-bottom {
    width: 100%;
    margin: 20px auto 10px;
    flex-direction: column-reverse;
  }

  .footer-link {
    width: 100%;
    border-bottom: 1px solid #57E2E8;
    justify-content: center;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .footer-hr {
    display: none;
  }
}

@media (max-width: 730px) {
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-top-right {
        margin-top: 15px;
    }

    .footer-icon-group {
        margin: 15px 0 25px 0;
    }

    .watch-num {
        margin: 15px 0 8px 0;
        text-align: left;
    }

    .access-img-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .footer-top-right img {
        margin: 0 22px 0 0;
    }

    .footer-logo {
        width: 300px;
        margin: 0;
    }

    .footer-btn {
        width: 50%;
        height: 40px;
        line-height: 38px;
        max-width: 90%;
    }

    .footer-info-box-l {
        margin-right: 0;
    }

}
@media (max-width: 500px) {
    .footer-link{
        display: block;
    } 
    .footer-link .link-line{
        display: none;
    }
    .footer-link a{
        width: 100%;
        display: block;
        margin-bottom: 10px;
        font-size: 1em
    }
}
@media (max-width: 400px) {
  .footer-info-box-l div {
    /*font-size: 0.83em;*/
  }

  .footer-info-box-r p {
    font-size: 0.83em
  }

  .footer-link div {
    font-size: 0.83em;
    padding: 0 5px;
  }

  .footer-ps {
    display: flex;
    color: rgba(255, 255, 255, .6);
    font-size: 0.87em;
    font-weight: 300;
    margin-bottom: 10px;
  }
}


/* 導覽視窗 */
.tour-view {
  width: 100%;
  background-color: #fff;
        font-size: 1.1em;
}
.home-view .tour-view {
  width: 100%;
  background-color: #F2F7FB;
}

.tour-btn {
  background-color: #29C9D4;
  color: #fff;
  width: 200px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 1em;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
}

#tour-open-btn {
  display: block;
}

#tour-close-btn {
  display: none;
}

#tour-view {
  display: none;
}

.tour-list-box {
  width: 100%;
  background-color: #E4EAEF;
    border-top: 1px solid #29c9d4;
}

.tour-list {
  margin: 0 auto;
  width: 95%;
  max-width: 1620px;
  min-height: 352px;
  padding-top: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
        padding-bottom: 50px;
}
.tour-item-list {
  min-width: 170px;
  margin-bottom: 30px;
}
.tour-item-list-title {
  font-size: 1.125em;
  color: #000;
  border-left: 4px solid #29C9D4;
  padding-left: 10px;
  line-height: 150%;
  margin-bottom: 10px;
    font-weight: 500;
}

.tour-item-list-text {
  line-height: 140%;
  padding-left: 13px;
  font-size: 1em;
  color: #707070;
  cursor: pointer;
  display: block;
  text-decoration: none;
    margin-bottom: 5px;
}

.tour-item-list-text:hover {
  opacity: .8;
}

.tour-item-list-text:active {
  opacity: .6;
}

@media (max-width: 1450px) {
    .tour-list {
            padding-top: 30px;
    }

    .tour-item-list {
        width: 25%;
    }
}
@media (max-width: 1100px) {
    .tour-view{
      padding-top: 50px;  
    }
}
@media (max-width: 750px) {
  .tour-btn {
    background-color: #29C9D4;
    color: #fff;
    width: 153px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 1em;
    margin: 0 auto 0 30px;
    border-radius: 10px 10px 0 0;
  }
  .tour-list-box{
    width: 95%;
    margin: 0 auto;
  }
     
  /* .tour-item-list {
    width: 50%;
  } */
}
@media (max-width: 768px) {
     .tour-item-list {
        width: 33.333333%;
    }
}
@media (max-width: 550px) {
     .tour-item-list {
        width: 50%;
    }
}
@media (max-width: 450px) {
     .tour-item-list {
        width: 100%;
    }
}



html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /*vertical-align: baseline;*/
}

body {
  scroll-behavior: smooth;
}

body,
html {
  box-sizing: border-box;
  font-size: 1em;
  /* line-height: 1rem; */
  overflow-x: hidden;
  position: relative;
  width: 100%;
  scroll-behavior: smooth;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px FontAwesome;
/*  font-size: inherit;*/
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.click-cursor {
  cursor: pointer;
}

.click-cursor:hover {
  opacity: .8;
}

.click-cursor:active {
  opacity: .6;
}

header,
.header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 0rem;
}

.page-index {
  background: #fff;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
.img {
  display: block;
  border-style: none;
  object-fit: cover;
  margin: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

button {
  border: none;
}










/* 共用banner */
.banner-view {
  width: 100%;
  height: 250px;
  background-image: url('../images/banner-img.png');
  background-size: cover;

}

.banner-view .banner-content {
  max-width: 1620px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
}


.banner-view .view-name {
  margin-right: 75px;
  width: 295px;
  height: 124px;
  text-align: center;
  line-height: 124px;
  background-color: #29C9D4;
  color: #fff;
  font-size: 2.2em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
  border-radius: 0 0 15px 0;
    font-weight: 500;
}

.banner-view .view-title {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.banner-view .view-title-text {
  font-size: 3.438em;
  line-height: 110%;
    font-weight: 500;
    margin-bottom: 10px;
}

.banner-view .view-path {
  color: #949494;
  display: flex;
  font-size: 1em;
  letter-spacing: .5px;
  align-items: center;
  padding-bottom: 10px;

  flex-wrap: wrap;
}

.banner-view .view-path img {
  object-fit: contain;
  margin: 0 14px;
  height: 12.5px;
}
.banner-view .view-path a{
  color: rgba(0,0,0,.4);
  text-decoration: none;
}
.banner-view .view-path a:hover{
  opacity: .8;
}
.banner-view .view-path a:first-child{
  font-weight: 700;
}
.banner-btn-group {
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.banner-btn-group img {
  width: 50px;
  height: 50px;
  margin: 0;
}

@media (max-width: 1100px) {
  .banner-view .banner-content {
    max-width: 1620px;
    width: 92%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
  }
}
@media (max-width: 960px) {
  .banner-view .view-title-text {
    font-size: 2.8em;
    margin-top: 6px;
  }

  .banner-view .view-name {
    margin-right: 20px;
    width: 200px;
    min-height: 124px;
    text-align: center;
    line-height: 124px;
    background-color: #29C9D4;
    color: #fff;
    font-size: 2em;
    box-shadow: 0 1px 6px rgb(222, 222, 222);
    border-radius: 0 0 15px 0;
  }

  .banner-view .view-path {
    color: #949494;
    display: flex;
    font-size: 0.87em;
    letter-spacing: .5px;
    align-items: center;
    padding-bottom: 10px;
  }

  .banner-view .view-path img {
    margin: 0 9px;
  }

  .banner-btn-group img {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 800px) {
  .banner-view .view-name {
    display: none;
  }

  .banner-btn-group {
    display: none;
  }

  .banner-view {
    background-image: none;
    height: auto;
  }
}

.main-content {
  width: 95%;
  max-width: 1620px;
  margin: 0 auto;
  min-height: 45vh;
  display: flex;
  align-items: flex-start;
}

.main-sidebar {
  box-shadow: 0 3px 14px rgba(0, 0, 0, .1);
  width: 295px;
  max-width: 295px;
  padding: 10px 16px 16px 9.5px;
  border-radius: 0 15px 15px 0;
  position: relative;
  bottom: 24px;
  background-color: #fff;
  flex-grow: 1;
}
.main-sidebar a{
  text-decoration: none;
  border-bottom: 1px solid #E9E9E9;
  display: block;
}

.main-sidebar .sidebar-item {
  color: #000000;
  font-size: 1.375em;
  margin-top: 9.5px;
  padding: 10px 0 10px 14px;
    font-weight: 500;
}

.main-sidebar a.active .sidebar-item {
  color: #009FAA !important;
}
.main-sidebar a.active{
  border-color: #29C9D4;
}
.main-sidebar a:first-child {
  border-bottom: none;
  width: fit-content;
}
.main-sidebar a:last-child {
  border-bottom: none;
}

.main-content-view {
  width: 75%;
  height: 100%;
  flex: 1;
  margin: 48px 0 150px 80px
}

@media (max-width: 1100px) {
  .main-content {
    flex-direction: column;
    min-height: 0;
  }

  .main-sidebar {
    margin: 20px auto 44px;
    width: calc(97%);
    bottom: 0px;
    padding: 1px 14px 8px 14px;
    max-width: 100%;
    flex-grow: 0;
  }

  .main-sidebar .sidebar-item {
    font-size: 1.125em;
      padding: 8px 0 8px 14px;
      margin-top: 0;
  }

  .main-content-view {
    margin: 0 auto 20px;
    width: 97%;
  }
}

/* search-1.html */
.section-group {
  margin: 85px 7px 94px;
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(300, 1fr));
  grid-gap: 20px;
}

.section-item {
  text-align: justify;
  border-bottom: 1px solid #E9E9E9;
}


.section-title {
  font-size: 1.9em;
  /* margin: 0px 22px 0; */
  font-weight: 700;
  display: flex;
  align-items: center;
}


.section-title p {
  flex: 1;
}

.section-title img {
  height: 18px;
  width: 18px;
  margin: 0 10px 0 0;
}

.section-content {
  font-size: 1.125em;
  letter-spacing: .2px;
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  /*行數*/
  -webkit-box-orient: vertical;
  white-space: normal;
  margin: 10px 30px 20px;
}

.title_large_size{
  font-size: 2.1em !important;
}
.title_small_size{
  font-size: 1.75em !important;
}
.content_large_size{
  font-size: 1.37em !important;
}
.content_small_size{
  font-size: 1em !important;
}
.a_large_size{
  font-size: 1.25em !important;
}
.a_small_size{
  font-size: 0.87em !important;
}

@media (max-width: 800px) {
  .section-group {
    margin: 20px 7px 94px;
    padding-top: 50px;
    border-top: 1px solid #E9E9E9;
  }
  .section-title {
    font-size: 1.6em;
    align-items: flex-start;
  }
  .section-title img {
    height: 28px;
    width: 18px;
    margin: 0 10px 0 0;
    padding-top: 10px;
  }

  .section-content {
    font-size: 1em;
    letter-spacing: .2px;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 9;
    /*行數*/
    -webkit-box-orient: vertical;
    white-space: normal;
    margin: 8px 10px 20px 30px;
  }
}

.section-guide {
  font-size: 1.125em;
  letter-spacing: 1px;
  margin-left: 30px;
  color: #949494;
  margin-top: 10px;
}

.breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: flex-start; */
}

.breadcrumb a {
  color: #949494;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fa0;
}

.breadcrumb li {
  padding: 0 10px;
  list-style: none;
}

.breadcrumb li {
  padding-left: 0;
}

.breadcrumb li+li:before {
  content: '>';
  font-size: 1.3em;
  margin-right: 5px;
}

.section-date {
  color: #949494;
  margin-left: 30px;
  font-weight: 400;
  font-size: 1.125em;
  letter-spacing: .4px;
  margin-top: 3px;
}

.section-more {
  margin: 20px 30px 20px;
}

.more-link{
  text-decoration: underline;
  color: #FF2838;
  font-size: 1em;
}

.section-more a:hover {
  color: #00f;
}

/* news.html */
.newsSearch-box {
  width: 100%;
  /*min-height: 118px;*/
  background-color: #F2F7FB;
  margin-bottom: 30px;
  padding: 20px 40px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}




.date-group,.key-group {
  display: flex;
  justify-content: flex-start;
  position: relative;align-items: center;
}
.key-group{
  margin-left: 45px;
}
.key-group .search-box {
  background-color: #FFFFFF;
  border-radius: 10px;
  height: 44px;
  /*margin: 10px 0px 10px 24px;*/
  position: relative;
}

.key-group .search-box input {
  border: none;
  height: 44px;
  border-radius: 10px;
  width: 342px;
  padding-left: 20px;
  padding-right: 40px;
  font-size: 1.125em;
}


/* input:focus {
  outline: none !important;
} */

.key-group .search-box img {
  position: absolute;
  right: 22px;
  width: 19px;
  top: 12.5px;
}

.date-item {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
}
.date-title,.key-title{
  color: #505050;
  font-size: 1.125em;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
}
.date-input {
  width: 233px;
  height: 44px;
  background-size: 21px;
  padding-right: 20px;
  border-radius: 10px;
  padding-left: 10px;
}


@media (max-width: 1550px) {
  .newsSearch-box {
    flex-direction: column;
    align-items: flex-start;
    justify-items: flex-start;
  }
  .key-group{
    margin-left: 0px;
  }
  .key-group p {
    margin-right: 20px;
  }
  .key-group .search-box{
    margin-top: 10px;
  }
  .key-group .search-box input {
    border: none;
    height: 44px;
    border-radius: 10px;
    width: 518px;
    padding-left: 20px;
    padding-right: 40px;
    font-size: 1.125em;
  }


}
@media (max-width: 750px) {
  .key-group p {
    margin-right: 0;
  }
  .newsSearch-box {
    padding: 20px 15px;
  }
  .key-group .search-box input {
    width: 100%;
  }
  .date-group,.key-group {
    width: 100%;
  }
  .key-group .search-box{
    flex: 1;
  }
  .date-group .date-title{
    margin-right: 0 !important;
  }
  .date-title,.key-title{
    font-size: 1em;
    width: 100px;
    max-width: 100px;

  }
  .date-input{
    width: auto;
    padding-right: 10px;
    margin-left: 0px;
    flex: 15;
  }
  .date-group .date-wave{
    margin: 0 10px !important;
  }

}
@media (max-width: 600px) {
  .date-title,.key-title{
    font-size: 1em;
    width: 72px;
    min-width: 70px;
    max-width: 72px;
  }
  .date-group .date-title{
    flex-grow: 0;
  }
}


.newsSearch-box input {
  border-radius: 10px;
  background-color: #fff;
  border: none;

}

.message-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 30px 25px;
  margin-bottom: 60px;
}
@media (max-width: 1600px) {
  .message-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 30px 25px;
    margin-bottom: 50px;
  }
}
@media (max-width: 1200px) {
  .message-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px 25px;
    margin-bottom: 50px;
  }
}


.message-item {
  display: block;
  background-color: #F6F6F6;
  padding: 15px 15px 25px;
  border-radius: 10px;
  /*max-width: 305px;*/
  margin: 0 auto;
  text-decoration: none;

}

.message-item p {
  color: #777777;
  font-size: 1em;
  font-weight: 400;
  margin: 10px 6px 10px;
}

.message-item img {
  width: 100%;
  border-radius: 5px;
}


.newsMessage-content {
  font-size: 1.44em;
  letter-spacing: .2px;
  font-weight: 700;
  margin: 0 6px 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #000000;
        line-height: 125%;
}

.message-annotation {
  color: #777777;
  font-size: 1.125em;
  letter-spacing: .1px;
  font-weight: 400;
  text-align: left;
  margin: 0 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.message-date {
  color: #777777;
  font-size: 1.125em;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 6px 25px 6px;
}

/* newsin_1.html */

hr {
  border: 1px solid #F6F6F6;
  color: #777;
}

.news-info-group {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* margin-top: 36px; */
}

.newsInfo-date {
  color: #4A4A4A;
  margin-top: 14px;
  font-size: 1em;
  font-weight: 350;
  margin-bottom: 36px;
}

.newsin-title {
  font-size: 2.188em;
  font-weight: 500;
  color: #00A4AF;
  padding-bottom: 11px;
  border-bottom: 1px solid #CBCBCB;
}

.newsin-text {
  font-weight: 400;
  line-height: 150%;
  color: #333333;
  margin: 20px 0;
}

.newsinText-indent {
  text-indent: 2em;
}
.newsinText-indent p{
  margin-bottom: 3px;
}

.news-info-group {
  display: flex;
  justify-content: flex-start;
}

.info-icon {
  width: 11px;
  line-height: 91px;
  margin: 10px 24px 10px 0px;
}

.newsinfo-text {
  font-size: 2.2em;
  font-weight: 700;
}

.download-text {
    font-size: 1.125em;
    margin: 24px 0;
    font-weight: 400;
    color: #067981;
}

.downloadFile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: #F6F6F6;
  border-radius: 15px;
  padding: 37px 24px;
  gap: 15px 20px;
}

.downloadFile-group img {
  width: 302px;
  height: 89px;
  margin: 0 20px 0;
}
.newsin-album{
  margin-top: 50px;
}
.newsin-album-group {
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: space-between;
  margin: 24px 0 ;
  gap: 59px;
}
.newsin-album-group a{
  display: block;
}

.newsin-album-group img {
  max-width: 415px;
  min-width: 300px;
}


.downloadFile-bg {
  width: auto;
  height: auto;
    /*min-height: 89px;*/
  border-radius: 15px;
  background: linear-gradient(to bottom, #36E0EC, #29C9D4);
  padding: 20px;
}

.file-download{
  margin-top: 50px;
}

.file-pos {
  text-align: left;
  font-size: 1.25em;
  color: #fff;
    margin-right: 10px;
}

.downloadFile-bg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.downloadFile-bg img {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}
.newsin-album-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 25px;
  justify-content: space-between;
  /*border: 1px solid #F6F6F6;*/
  /*border-radius: 10px;*/
  /*padding: 43px 14px;*/
  margin: 20px 0 103px;
}

.albumList-item {
  max-width: 305px;
  margin: 0 auto;
  width: 100%;
  background-color: #F6F6F6;
  border-radius: 20px;
  padding: 14px 12px 22px;
  display: block;
  color: #000;
  text-decoration: none;
}

.albumList-item img {
  width: 100%;
}

.albumList-item {
  font-size: 1em;
  font-weight: 700;
}

.albumList-item p {
  padding: 16px 6px 0px 6px;
  font-size: 1.44em;
}

/* Exhibition.html */
.exhibition-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  margin-top: 10px;
  margin-bottom: 137px;
}
@media (max-width: 800px) {
  .exhibition-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 0px;
    margin-bottom: 43.5px;
  }
}
@media (max-width: 1700px) {
  .newsin-album-group {
    gap: 9px;
  }
  .newsin-album-group a {
    width: calc(33% - 6px);
  }
}

@media (max-width: 800px) {
  .newsinfo-text {
    font-size: 2.05em;
    font-weight: 500;
  }
  .newsInfo-date {
    margin-top: 23px;
    margin-bottom: 5px;
  }
  .newsin-content img{
    border-radius: 30px;
  }
  .newsin-text {
    margin: 29px 0 0 0;
  }
  .newsin-album{
    margin-top: 40px;
  }
  .file-download{
    margin-top: 52px;
  }
  .downloadFile-group{
    /* flex-direction: column; */
    gap: 24px;

  }
  .downloadFile-bg{
    margin: 0;
  }
  .newsin-album-list{
    margin: 10px 0 33px;
    padding: 13px 20px;
    gap: 20px;
  }
}
@media (max-width: 500px) {
  .downloadFile-group{
    align-items: center;
  }
}

/* Spexial.html */

.date-group {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
}
.date-group .date-title{
  flex-grow: 1;
  margin-right: 20px;
}
.date-group .date-wave{
  font-size: 1.125em;
  color: #505050;
  margin: 0 20px;
}

.date-item {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: 21px;
  height: 21px;
}
.special-banner{
  margin-bottom: 20px;
}


.special-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-gap: 29px 47px;
  margin-bottom: 100px;
}
@media (max-width: 1200px) {
  .special-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-bottom: 100px;
  }
}
@media (max-width: 800px) {
  .special-banner {
    width: 100%;
    max-width: 200%;
    position: relative;
    margin-bottom: 20px;
  }
}





.specialList-item {
  background-color: #F6F6F6;
  padding: 10px 10px 17px;
  border-radius: 10px;
  display: grid;
  max-width: 302px;
  margin: 0 auto;
}


.specialList-item p {
  color: #777777;
  font-size: 1em;
  font-weight: 400;
  margin: 10px 4px 0px;
}

.specialContent-title {
  font-size: 1.44em;
  letter-spacing: .2px;
  font-weight: 700;
  margin: 10px 4px 0px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.specialContent-illustrate {
  color: #777777;
  font-size: 1.125em;
  letter-spacing: .2px;
  font-weight: 400;
  /* text-align: justify; */
  margin: 44px 0px 0px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* newsletter.html */
.newsletter-content{
  margin-top: 38px;
  margin-left: 17px;
}
.input-group {
  /*display: flex;*/
  flex-wrap: wrap;
  align-items: center;
  gap: 23px 30px;
}

.letterInput-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
    margin-bottom: 20px;
}

.import-dot {
  color: #f00;
  vertical-align:super;
}
.letterInput-item p{
  width: 100px;
  font-size: 1.125em;
}

.letterInput-item input {
  height: 44px;
  border-radius: 10px;
  width: 100%;
  font-size: 1.125em;
  border: 1px solid #999;
  margin-left: 10px;
    width: calc(50% - 15px);
}

@media (max-width: 1400px) {
    .letterInput-item input{
      width: calc(60% - 15px);  
    }
}
@media (max-width: 1100px) {
    .letterInput-item input{
      width: 80%;  
    }
}
@media (max-width: 800px) {
    .letterInput-item input{
      width: 100%;  
    }
}
.newsletter-illustrate img {
  margin-top: 15px;
  margin-left: 100px;
}

.news-btn {
  display: flex;
  justify-content: flex-start;
  margin: 50px 0 130px 110px;
  line-height: 75px;
  text-align: center;
  color: #fff;
  gap: 26px;  
}
.news-btn input[type=button]{
    font-size: 1.25em;
}
.news-btn a{
  color: #fff;
  text-decoration: none;
}

.btn-item1 {
  width: 284px;
  height: 60px;
  background: linear-gradient(to bottom, #ECA842, #E84040);
  border-radius: 10px;
}

.btn-item2 {
  width: 284px;
  height: 60px;
  background: linear-gradient(to bottom, #CBCBCB, #949494);
  border-radius: 10px;
}


@media (max-width: 1100px) {
  .newsletter-content{
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 100px;
  }
}
@media (max-width: 800px) {
  .input-group{
    flex-direction: column;
    align-items: flex-start;
  }
  .letterInput-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
      position: relative;
      margin-bottom: 35px;
  }
    .letterInput-item span.tg_tb_error{
        display: block;
        position: absolute;
        text-align: right;
    width: 98%;
        top: 45px;
    }
}
@media (max-width: 700px) {
  .news-btn {
    gap: 14px;
    margin: 28px 0 0px 0px;
  }
 .btn-item1,.btn-item2{
    width: 50%;
 }
}


/* newsletterok.html */
.newsletterok-group {
  display: flex;
  align-items: center;
  background-color: #F6F6F6;
  border-radius: 30px;
  height: 215px;
  margin-bottom: 93px;
}

.newsletter-title {
  font-size: 1.9em;
  color: #009FAB;
}
.newsletter-ok{
  margin-right: 25px;
}
.newsletter-ok p {
  font-size: 1.25em;
}

.newsletterok-group img {
  width: 184px;
  height: 191px;
  margin: auto 24px 0 58px ;
}

@media (max-width: 700px) {
  .newsletterok-group {
    height: 158px;
  }
  .newsletterok-group img{
    width: 130px;
    height: 137px;
    margin: auto 9px 0 11px ;
  }
  .newsletter-title {
    font-size: 1.6em;
    color: #009FAB;
  }
  
  .newsletter-ok p {
    font-size: 1.125em;
  }
}

.rentspaceok-group {
  display: flex;
  justify-content: flex-start;
}

/* rentspaceok.html */
.rentspaceok-area{
  width: 93%;
  max-width: 1620px;
  margin: 60px auto 100px;
}
.rentspaceok-title {

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}
.rentspaceok-btns{
  flex-grow: 1;
  justify-content: flex-end;
  margin-top: 11px !important;
}
.rentspaceok-title img.dot{
  margin: 0 16px 0 0;
  width: 20px;
}
.rentspaceok-title p{
  font-weight: 400;
  font-size: 3.5em;
  line-height: 66px;
}


.rentspaceok-illustrate {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #F6F6F6;
  border-radius: 40px;
  min-height: 308px;
  padding: 35px 56px 47px;
}

.illurtrate-img {
  width: 200px;
  margin-right: 24px;
}


.rentspaceok-illustrate hr {
  border: 1px solid #707070;
  color: #000;
}

.rentspaceok-title2 {
  font-size: 1.9em;
  font-weight: 500;
  color: #f00;
  border-bottom: 1px solid #707070;
  padding-bottom: 13.5px;
  margin-bottom: 15px;
}

.rentspaceok-text {
  width: 100%;
}

.rentspaceok-text p {
  font-size: 1.25em;
  line-height: 35px;
  font-weight: 400;
}

.rentspaceok-text-grey {
  color: #949494;
  font-weight: 400;
}
@media (max-width: 700px) {
  .rentspaceok-area{
    margin: 30px auto 100px;
  }
  .rentspaceok-illustrate{
    flex-direction: column;
    padding: 35px 15px 47px;
  }
  .illurtrate-img{
    margin-right: 0;
    margin-bottom: 10px;
  }
  .rentspaceok-title p{
    font-size: 2.8em;
  }
  .rentspaceok-title2 {
    font-size: 1.6em;
    text-align: center;
  }
  .rentspaceok-text p {
    font-size: 0.85em;
  }
}

/* rent.html */

.rentin-textGroup-distinguish h1,
.rentin-textGroup-remark h1,
.rentin-termsOfUse h1 {
  font-size: 2em;
  font-weight: 900;
  color: #009FAB;
}

.rentin-regulations-1 h2,
.rentin-regulations-2 h2 {
  font-size: 1.6em;
  font-weight: 500;
  margin-bottom: 13px;
    color: #000000;
}
.rent-content-area{
  margin-left: 4px;
  margin-top: 9px;
  margin-bottom: 49px;
}
.rent-content-area p {
  font-size: 1.125em;
  font-weight: 400;
  color: #949494;
  margin-top: 17px;
}
.rent-OpeningHours{
  margin-top: 50px;
}

.openin-text {
  font-size: 1.125em;
  line-height: 140%;
  font-weight: 400;
  color: #060606;
  /* margin-left: 10px; */

}
.openin-textGroup{
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.openin-offset {
  font-size: 1.125em !important;
  font-weight: 700 !important;
  margin-bottom: 5px;
}

.openin-Ex {
  background-color: #F6F6F6;
  border-radius: 10px;
  padding: 26px 32px;
  margin: 20px 0 0;
}

.offset-mt {
  margin: 20px 0 0 0;
}

.openin-Ex div {
  font-size: 1.125em;
  font-weight: 400;
  color: #4A4A4A;
  line-height: 160%;
}
.rentin-h1{
  color: #009FAA;
  font-size: 1.9em;
  line-height: 36px;
}

.rentin-textGroup-distinguish,
.rentin-textGroup-remark,
.rentin-termsOfUse{
  margin-top: 42px;
}

.openin-text img,
.rentin-textGroup-distinguish img,
.rentin-textGroup-remark img,
.rentin-termsOfUse img,
.rentin-regulations-1 img,
.rentin-regulations-2 img {
  width: 30px;
  height: 30px;
  display: inline;
  margin: 0 10px 0 0;
}

.openin-text p,
.rentin-textGroup-distinguish p,
.rentin-textGroup-remark p,
.rentin-termsOfUse p,
.rentin-regulations-1 p,
.rentin-regulations-2 p {
  
  line-height: 140%;
    color: #000000;
}

.rentBtn-group {
  background-color: #F6F6F6;
  margin: 25px 0 44px;
  border-radius: 10px;
  padding: 33px 37px;
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

.rentBtn-group button{
  height: 89px;
  padding: 0 20px;
  border-radius: 10px;
}
.rent-application button {
  border-radius: 10px;
  height: 75px;
}
.rentBtn-group button img{
  height: 30px;
  margin-left: 14px;
}
.rentBtn-group button p{
  text-align: left;
}

.btn1,
.btn2,
.btn3 {
  background: linear-gradient(to bottom, #05CAD8, #00A0AB);
  color: #fff;
  font-size: 1.25em;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.btn4 {
  width: 284px;
  font-size: 1.25em;
  font-weight: 500;
  background-color: #F36F3E;
  margin-bottom: 49px;
  background: linear-gradient(to bottom, #ECA842, #E84040);
}



.rent-application a {
  text-decoration: none;
  color: #fff;
}
.bd-1{
  border-bottom: 1px solid #707070;
  padding-bottom: 11px;
  margin-bottom: 19px;
    font-weight: 500;
}
.rentin-fileDownload{
  margin-top: 69px;
}

.rentin-regulations-2{
  margin-top: 40px;
}

.openin-ServeGroup, .openin-textGroup, .rentin-regulations-1 div, .rentin-regulations-2 div, .rentin-fileDownload p {

  line-height: 140%;
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-weight: 400;
}
@media (max-width: 1000px) {
  .openin-ServeGroup, .openin-textGroup, .rentin-regulations-1 div, .rentin-regulations-2 div, .rentin-fileDownload p {
    align-items: flex-start;
  }
  .rentBtn-group {
    background-color: #F6F6F6;
    margin: 18px 0;
    border-radius: 10px;
    padding: 20px;
    min-height: 168px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
  }
}
@media (max-width: 800px) {
  .rent-content-area{
    margin: 0;
  }
}

@media (max-width: 600px) {
  .btn4 {
    width: 100%;
    margin-bottom: 113px;
  }
}



/* rentlist.html */
.rentlist-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 40px 25px;
  margin-bottom: 50px;
}
@media (max-width: 1200px) {
  .rentlist-area {
    grid-gap: 30px 25px;
  }
}
.rentlist-area a {
  text-decoration: none;
  color: #000;
}


.rentlist-item {
  min-width: 295px;
  margin: 0 auto;
  padding: 10px 10px 72px 10px;
  border-radius: 15px;
  box-shadow: 0 0 11px #ccc;
    position: relative;
}
.rentlist-VenueName img {
    width: 100%;
}
.rentlist-VenueName p {
  font-size: 1.44em;
  line-height: 140%;
  margin: 13px 0 11px;
  font-weight: 700;
  padding: 0 8px 0;
}

.venue-info,
.venue-description,
.venue-period,
.venue-fees {
  margin-bottom: 17px;
  padding: 0 5.5px;
  line-height: 23px;
  font-weight: 400;
}
.venue-info,
.venue-description{
  border-bottom: 1px solid #E9E9E9;
  padding: 0 5.5px 8px;
  margin-bottom: 8.5px;
}

.venue-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.venue-info p,
.venue-description p,
.venue-period p,
.venue-fees p {
  font-size: 1.125em;
  margin: 0 2px;
}
.venue-fees span{
  font-weight: 500;
}

.venue-btn {
  width: calc(100%  - 60px);
  height: 50px;
  margin: 0 20px;
  background: linear-gradient(to bottom, #36E0EC, #29C9D4);
  border-radius: 30px;
  font-size: 1em;
  color: #fff;
        position: absolute;
    bottom: 18px;
}

/* inquire.html */
.inquire-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 2px 4px;
}
.inquire-content .input-area{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.inquire-content p {
  font-size: 1.125em;
  margin-right: 13px;
}

.inquire-content input {
  width: 382px;
  height: 39px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-right: 17;
  padding-left: 10px;
  font-size: 1.125em;
}

.inquire-content button {
  width: 143px;
  height: 44px;
  color: #fff;
  font-size: 1.25em;
  border-radius: 10px;
  background: linear-gradient(to bottom, #36E0EC, #29C9D4);
}

@media (max-width: 1100px) {
  .inquire-content{
    margin-bottom: 64px;
  }
}
@media (max-width: 800px) {
  .inquire-content{
    margin: 0;
    flex-direction: column;
    align-items:flex-start;
  }
  .inquire-content .input-area{
    width: 98%;
    margin: 0 auto;
  }
  .inquire-content button{
    margin-top: 30px;
    margin-bottom: 64px;
  }
  .inquire-content input{
    flex: 1;
  }
}
@media (max-width: 500px) {
  .inquire-content button{
    width: 97%;
  }
}

/* Email.html */
.email-procedureAndResults {
  background-color: #F6F6F6;
  margin-bottom: 20px;
  border-radius: 15px;
  padding: 19px 21px 21px
}

.email-step-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.email-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 233px;
  height: 119px;
  background-color: #fa0;
  color: #fff;
  border-radius: 10px;
  padding: 0 19px;
}

.step-text{
  padding-bottom: 5.5px;
  border-bottom: 1px solid #fff;
  font-size: 1.6em;
}
.step-arrow{
  height: 28px;
  margin: 0 16px;
  object-fit: cover;
}

.email-item p {
  font-size: 1.125em;
  line-height: 22px;
  margin-top: 5px;
  font-weight: 400;

}

.email-inquire-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 39px;
}

.search-text{
  display: flex;
  align-items: center;
  font-size: 1.125em;
  color: #505050;
}

.email-inquire-group input {
  width: 318px;
  height: 44px;
  border: none;
  padding-left: 20px;
  font-size: 1.125em;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 16px;
}

.email-inquire-group button {
  width: 143px;
  height: 44px;
  color: #fff;
  font-size: 1.25em;
  border-radius: 10px;
  background: linear-gradient(to bottom, #36E0EC, #29C9D4);
}
.search-gruop{
  /* width: 100%; */
  display: flex;
  align-items: center;
}
<!---
.email-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  padding: 22px 17px 28px;
}

.email-search-result .result-text {
  font-size: 1.6em;
  color: #f00;
  font-weight: 500;
  text-decoration: underline;
  padding-bottom: 8px;
}
--->
<!---以下為新增--->//* email-search-result 基礎樣式 */
.email-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  padding: 22px 17px 28px; /* 保留第一組 padding */
  font-size: 1em; /* 作為基準，具體文字大小由子元素控制 */
  line-height: 160%;
  color: #4A4A4A;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 標題樣式 */
.email-search-result .result-text {
  font-size: 1.9em; /* 預設值，與 .section-title 一致，適用於 >1100px */
  color: #f00;
  font-weight: 500;
  text-decoration: underline;
  padding-bottom: 8px;
}

/* 內容文字樣式（假設使用 <p>） */
.email-search-result p {
  font-size: 1.125em; /* 預設值，與 .section-content 一致，適用於 >1100px */
  color: #505050;
  margin: 8px 0;
}

/* 連結樣式 */
.email-search-result a {
  font-size: 0.8em; /* 預設值，與 p 一致 */
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: #007BFF; /* 與 p 一致，避免未定義顏色 */
}

/* 星星樣式 */
.email-star {
  color: #f00;
}

/* 800px - 1100px 範圍：縮減字體大小 */
@media (min-width: 800px) and (max-width: 1100px) {
  .email-search-result {
    padding: 15px; /* 中型螢幕縮減 padding */
  }

  .email-search-result .result-text {
    font-size: 1.5em; /* 從 1.9em 縮至 1.5em，避免過大 */
  }

  .email-search-result p,
  .email-search-result a {
    font-size: 1em; /* 從 1.125em 縮至 1em */
  }
}

/* >1100px 範圍：適度放大字體 */
@media (min-width: 1100px) {
  .email-search-result .result-text {
    font-size: 2.1em; /* 從 1.9em 增至 2.1em，提升可讀性 */
  }

  .email-search-result p,
  .email-search-result a {
    font-size: 1.25em; /* 從 1.125em 增至 1.25em */
  }
}

/* 平板（<=960px） */
@media (max-width: 960px) {
  .email-search-result {
    padding: 10px;
    line-height: 150%;
  }

  .email-search-result .result-text {
    font-size: 1.6em; /* 略大於中型螢幕，但小於預設 */
  }

  .email-search-result p,
  .email-search-result a {
    font-size: 1em; /* 保持一致 */
  }
}

/* 手機（<=800px） */
@media (max-width: 800px) {
  .email-search-result {
    padding: 10px 5px;
    line-height: 140%;
  }

  .email-search-result .result-text {
    font-size: 1.3em; /* 從 1.6em 縮減約 20%，避免過大 */
  }

  .email-search-result p,
  .email-search-result a {
    font-size: 0.94em; /* 從 1em 略減，適合小螢幕 */
  }

  .email-search-result p {
    margin: 8px 0;
  }
}

/* 小型手機（<=600px） */
@media (max-width: 600px) {
  .email-search-result {
    padding: 8px 5px;
    line-height: 130%;
  }

  .email-search-result .result-text {
    font-size: 1.2em; /* 進一步縮減 */
  }

  .email-search-result p,
  .email-search-result a {
    font-size: 0.87em; /* 更適合小型螢幕 */
  }

  .email-search-result p {
    margin: 5px 0;
  }
}
<!--以上為新增-->

<!---
.email-search-result p {
  font-size: 1.125em;
  color: #505050;
}
--->
.email-star {
  color: #f00;
}
.email-query-bar{
  margin-top: 43px;
}
.queryBar1,
.queryBar2 {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-start;
  gap: 0 50px;
}

.queryBar-item {
  display: flex;
  justify-content: flex-start;
  font-size: 1.125em;
  margin-bottom: 23px;
  width: calc((100% / 3) - 34px);
}



.queryBar-item p {
  width: 110px;
  line-height: 39px;
  min-width: 120px;

}

.queryBar-item input {
  width: 100%;
  height: 39px;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid #000;
  padding: 0 20px;
  font-size: 1.125em;
}
.queryBar-item_1{
  margin-bottom: 5px !important;
}
.queryBar-item_2{
  width: 239px;
  margin-left: 120px;
}


.email-notes {
  font-size: 1em;
  margin: 47px 0 0 0;
  border-top: 1px  solid #E9E9E9;
  padding-top: 20px;
  color: #4a4a4a;
  font-weight: 400;
  line-height: 140%;
}
.email-notes p{
    margin-bottom: 5px;
}
.link-text{
  color: #29C9D4;
  text-decoration: underline;
}

.send-btn {
  width: 284px;
  height: 75px;
  background: linear-gradient(to bottom, #ECA842, #E84040);
  border-radius: 10px;
  font-size: 1.5em;
  line-height: 22px;
  color: #fff;
  margin: 24px 0 118px 10px;
}
.roww{
  flex: 1;
}
.roww input{
  width: 100%;
}
.arr-right{
  display: block;
}
.arr-down{
  display: none;
}
@media (max-width: 1700px) {
  .queryBar-item{
    width: calc((100% / 2) - 25px);
  }
}
@media (max-width: 1380px) {
.email-item p {
  font-size: 1em;
}
}
@media (max-width: 1270px) {
  .email-item p {
    font-size: 0.94em;
  }
  .step-arrow{
    height: 28px;
    margin: 0 8px;
    object-fit: cover;
  }
}
@media (max-width: 800px) {
  .queryBar-item{
    width: 100%;
  }
  .email-notes p{
    margin-bottom: 10px;
  }
  .email-step-group{
    flex-direction: column;
    gap: 15px;
  }
  .email-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:100%;
    height: 119px;
    background-color: #fa0;
    color: #fff;
    border-radius: 10px;
    padding: 0 19px;
  }
  .search-text{
    flex-direction: column;
    align-items: flex-end;
  }

  .arr-right{
    display: none;
  }
  .arr-down{
    display: block;
    height: 12px;

  }
  .email-search-result {
    padding: 14px 17px 25px;
  }
}
@media (max-width: 690px) {
  .email-search-result p {
    font-size: 1em;
  }
  .email-search-result .result-text {
    font-size: 1.44em;
  }
  .send-btn{
    width: 100%;
    margin: 33px auto 70px;
  }
  .email-inquire-group{
    flex-direction: column;
    align-items: flex-start;
  }
  .email-inquire-group button {
    width: 100%;
    margin-top: 16px;
    height: 44px;
  }
  .email-inquire-group input{
    flex: 1;
    margin: 0 0 0 16px;
  }
}



/* howtous.html */
.howtous-out {
  width: 93%;
  max-width: 1620px;
  margin: 150px auto 100px;
}

.howtous-title {

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}
.howtous-btns{
  flex-grow: 1;
  justify-content: flex-end;
  margin-top: 11px !important;
}
.howtous-title img.dot{
  margin: 0 16px 0 0;
  width: 20px;
}
.howtous-title p{
  font-weight: 400;
  font-size: 3.5em;
  line-height: 66px;
}

.howtous-content {
  background-color: #F6F6F6;
  padding: 37px  45px;
  border-radius: 10px;
  min-height: 442px;
  margin: 16px auto 51px;
}

.howtous-content .smtitle {
  font-size: 1.6em;
  color: #00C6D4;
  margin-top: 50px;
  font-weight: 500;
}

.howtous-content p {
  font-size: 1.125em;
  margin-bottom: 10px;
}

.website-item p {
  font-size: 1.25em;
  font-weight: 300;
  padding-left: 12px;
  margin-bottom: 2px;
  color: #000;
  text-decoration: none;
}
.website-item a {
  color: #000;
  text-decoration: none;
}
.website-item a:focus p{
  outline: 2px dashed #0f9ea8;
}
.website-item .item-title {
  font-size: 1.44em;
  margin-bottom: 10px;
  border-left: 4px solid #29C9D4;
  padding-left: 8px;
  line-height: 13px;
  margin-bottom: 20px;
  font-weight: 400;
}


.website-item{
  width: 100%;
}
.item-group{
  display: flex;
  align-items: flex-start;
}
.howtous-websiteListing {
  margin: 0 auto;
  width: 100%;
  max-width: 1620px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 95px 0;
}
@media (max-width: 1000px) {
  .howtous-websiteListing {
    margin: 0 auto;
    width: 100%;
    max-width: 1620px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 63px 0;
  }
}
@media (max-width: 700px) {
  .howtous-out{
    margin: 100px auto 100px;
  }
  .howtous-title p{
    font-size: 2.8em;
  }
  .website-item p {
    font-size: 1.125em;
  
  }
  .howtous-content {
    padding: 28px 20px 57px;
  }
  .howtous-content p{
    margin-bottom: 12px;
  }
  
  .website-item .item-title {
    font-size: 1.25em;
  }
    .howtous-websiteListing {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
}


/* monthly.html */
.venue-selection {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 118px;
  background-color: #F2F7FB;
  padding: 0 47px;
}
.venue-selection{
  width: 100%;
  margin: 0 2% 0 0;
}
@media (max-width: 1100px) {

  .venue-selection{
    width: 93%;
    margin: 0 auto;
    padding: 0 20px;
  }
  .venue-content{
  width: 99% !important;
  }
}

.venue-selection p {
  font-size: 1.125em;
}

.venue-selection .venuse-select {
  width: 347px;
  height: 44px;
  list-style-type: none;
  background-color: #fff;
  border-radius: 10px;
  margin-left: 20px;
  border: none;
  padding-left: 25px;
  color: #505050;
  font-size: 1.25em;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 800px) {
  .venue-selection p {
    font-size: 1em;
    min-width: 64px;
  }
  .venue-selection .venuse-select{
    margin-left: 11px;
    width: calc(100% - 75px);
  }
  .venue-selection{
    width: 93%;
    margin: 0 auto;
    padding: 0 10px;
  }
}

.monthlyDate-input input {
  width: 100%;
  height: 43px;
  background-color: #00C9D5;
  border-radius: 10px;
  border: none;
  margin: 10px 0;
}

.monthlyDate-input input::placeholder {
  font-size: 1.25em;
  color: fff;
  text-align: center;

}

.monthlyDate-group {
  width: 100%;
  margin: auto;
}

.week-info {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 20px repeat(autofit, minmax(120px, 1fr));
  justify-items: center;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.week-name {
  width: 100%;
  height: 20px;
  color: #fff;
  text-align: center;
  background-color: #00C9D5;
}

.week-bgColor1 {
  width: 100%;
  height: 20px;
  color: #fff;
  background-color: #17BAC3 !important;
  border-radius: 10px 0 0 0;
}

.week-bgColor2 {
  width: 100%;
  height: 20px;
  color: #fff;
  background-color: #17BAC3 !important;
  border-radius: 0 10px 0 0;
}

.monthly-btn {
  display: flex;
  flex-direction: column;
  border: 1px solid #00C9D5;
  padding: 10px 10px 106px;
  width: 160px;
  height: 46px;
  text-align: center;
}

.monthly-btn button {
  border-radius: 10px;
  margin: 5px;
}

.button-group button {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "one"
    "two"
    "three";
  width: 120px;
  height: 22px;
  line-height: 22px;
}

.one {
  grid-column: 1/2;
  grid-row: 1/2;
  text-align: center;
}

.two {
  grid-column: 1/2;
  grid-row: 2/3;

}

.three {
  grid-column: 1/2;
  grid-row: 3/4;

}

.date-active {
  color: #17BAC3;
  font-size: 0.94em;
  text-decoration: underline;
  font-weight: 700;
}

/* rentspace.html */

.rentspace-content{
  background-color: #F2F7FB;
  padding: 37px 0 7px;
  position: relative;
}
.prev,.next{
  color: #707070;
  position: absolute;
}

.rentspace-content .control{
  position: relative;
  width: 80px;
  height: 45px;
  margin: 10px auto;
}
.swiper-slide {       
   width: 30%;
}
.more-img{
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  max-width: 419px;
}
.more-img img{
  height: 100%;
}
.swiper-wrapper{
  align-items: center;
}
@media (max-width: 1900px) {
  .swiper-slide {       
    width: 33%;
 }
}

@media (max-width: 1400px) {
  .swiper-slide {       
    width: 50%;
 }
}
@media (max-width: 800px) {
  .swiper-slide {       
    width: 100%;
 }
}
.swiper-button-next, .swiper-button-prev{

}
.swiper-button-next{
  right: 10px;
}
.swiper-button-prev{
  left: 10px;
}
.swiper-button-prev:after, .swiper-button-next:after{
  font-size: 1.25em;
  
}
.rentspace-content img {
  width: 343px;
  height: 229px;
  object-fit: cover;
}
.venueInfo-title {
  margin: 26px 0 36px 0;
}

.venueInfo-title img {
  display: inline;
  width: 11px;
  height: 41px;
  vertical-align: middle;
  margin-right: 24px;
}

.venueInfo-title h1 {
  display: inline;
  font-size: 2.2em;
  line-height: 41px;
  font-weight: 500;
  vertical-align: middle;
  
}

.rentspace-VenueInfo{
  width: 100%;
}

.venueInfo-group .info-p {
  font-size: 1.125em;
  padding-bottom: 6.5px;
  padding-left: 12px;
  font-weight: 400;
  margin-bottom: 10px;
  border-bottom: 1px solid #E9E9E9;
  display: flex;
  align-items: center;
}

.venue-content{
  width: 95%;
  max-width: 1620px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.rentspace-content,.rentspace-VenueInfo,.rent-form{
  width: 98%;
  margin: 0 2% 0 0;
}
.venue-calender-out{
  padding: 0 2% 0 0;
}
.rent-form .form-group{
  display: flex;
  align-items: flex-start;
  margin-bottom: 27px;
}
.rent-form .form-group .form-title{
  font-size: 1.125em;
  width: 146px;
  line-height: 39px;
}
.rent-form .form-group input {
    width: 258px;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 1.125em;
}
.rent-form .form-group select {
    width: 258px;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 1.125em;
}

@media (max-width: 1100px) {
  .venue-sidebar{
    width: 93%;
  }
  .venue-content-view{
    width: 100%;
  }
  .rentspace-content,.rentspace-VenueInfo,.rent-form{
    width: 93%;
    margin: 0 auto;
  }
  .venue-calender-out{
    padding: 0 2.5%;
  }
}
@media (max-width: 700px) {
  .rent-form .form-group{
    display: flex;
    align-items: flex-start;
    margin-bottom: 27px;
    width: 100%;
  }
  .rent-form .form-group .form-title{
    font-size: 1em;
    width: 90px;
    line-height: 23px;
    margin-right: 10px;
  }
  .rent-form .form-group input {
    width: auto;
    flex: 1;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 0 10px;
  }
}

.monthly-content .activeDate-table td{
  height: 228px !important;
  margin-bottom: 90px;
}
.activeDate-table td:hover{
  background-color: #C0F4FF !important;
}
.monthly-content .click-btns{
  margin: 13px 11px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
  gap: 10px;
}
.monthly-content .click-btns div{
  height: 43px;
}
.monthly-content .venue-time{
  background: linear-gradient(to bottom, #FCFCFC, #D5D5D5);
  border: 2px solid #EEEEEE;

  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 43px;
  box-shadow: 0 5px 5px rgba(0,0,0,.15);
  cursor: pointer;
}
.monthly-content .venue-time.active{
  background: #29C9D4;
  color: #fff;
}
.monthly-content .venue-time:hover{
  background: #29C9D4;
  color: #fff;
}
.venue-calender{
  min-width: 1200px;
  margin-top: 22.5px;
  margin-bottom: 52.4px;
}
.venue-calender-out{
  width: 100%;
  overflow: auto;
}

.venueInfo-group .info-w{
  min-width: 130px;
}

.rentDate-active {
  background-color: #00CDD7;
  color: #fff;
}
.usage-time p{
  width: 100% !important;
  line-height: 23px;
  font-size: 1.25em;
  margin-top: 7px;
  margin-bottom: 9px;
}



.rentForm-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0 50px;
}
.rentForm-group .form-group ,.rent-feeHandling .form-group{
  margin-bottom: 23px !important;
}

.rentForm-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 10px;
  padding-right: 10px;
  align-items: center;
}

.rentForm-item input {
  width: 220px;
  height: 39px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.rentService-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin:18px 0 20px;
}

.menu-option{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.menu-title{
  margin-right: 20px;
}

.serviceMenu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.serviceMenu-item input[type=checkbox]{
    width: 30px;
    height: 30px;
}
.serviceMenu-item label {
  margin-left: 10px;
}

.rent-feeHandling {
  display: flex;
  flex-wrap: wrap;
  gap: 0 50px;
  margin-top: 35px;
}


.verification-area {
  display: flex;
  gap: 0 50px;
  margin-top: 40px;
  flex-direction: column;
}
.rent-verificpic{
  margin: 0;
  width: 239px;
  margin-left: 155px;
}
.verification-area .form-group{
  margin-bottom: 5px !important;
}
.rent-precautions {
  background-color: #F6F6F6;
  padding: 33px 27px;
  margin-top: 81px;
  border-radius: 10px;
  font-size: 1.125em;
  line-height: 160%;
  color: #4A4A4A;
  font-weight: 400;
}

.rent-precautions-text {
  letter-spacing: 0px;
  /*font-size: 0.94em;*/
  margin: 2px 0;
    margin-left : 1em; 
text-indent : -1em ;
}

.rent-segment {
  margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: 500;
}


.rent-segment1 {
  font-size: 0.94em;
}
.rentspace-bntbox{
  width: 284px;
  margin: 43px auto 148px;
  display: block;
}
.rentspace-bnt {
  background: linear-gradient(to bottom, #ECA842, #E84040);
}

.rentspace-bnt {
  width: 284px;
  height: 75px;
  background-color: #fa0;
  border-radius: 10px;
  margin: 20px 0;
  color: #fff;
  font-size: 1.5em;
}
@media (max-width: 800px) {
  .rentService-menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-option{
    margin-top: 20px;
    gap: 10px 20px;
  }
  .verification-area {
    display: flex;
    gap: 0 50px;
    margin-top: 0px;
    flex-direction: column;
  }
  .rent-verificpic{
    margin: 0;
    width: 239px;
    margin-left: 99px;
  }
  .rent-precautions {
    margin-top: 34px;
  }
  .rentspace-bntbox{
    margin: 47px auto 65px;
  }
}
@media (max-width: 600px) {
  .rentspace-bntbox{
    width: 100%;
  }
  .rentspace-bnt{
    width: 100%;
  }
  
}
/* calendar-1.html */
.activitives-area {
  display: flex;
  align-items: flex-start;
}

.activitives-area .activiteDate {
  max-width: 882px;
}

.activiteside {
  flex: 1;
}

.calender-activeDate-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.activeDate-top{
  background-color: #29C9D4;
  height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17.5px;
  border-radius: 15px;
}
.activeDate-top p{
  line-height: 62px;
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 1.9em;
}
.activeDate-top img{
  margin: 0;
  height: 28px;
  padding: 0 22.6px;
}
.activeDate-table{
  border-collapse: collapse;
  /* border: 1px solid #29C9D4; */
}
.activeDate-table td{
  border: 1px solid #29C9D4;
  font-size: 1.25em;
  text-align: center;
  padding-top: 13px;
}
.activeDate-table td a{
  text-decoration: none;
}
.activeDate-table th{
  height: 53px;
  line-height: 53px;
  color: #fff;
  background-color: #29C9D4;
}
.row1,.row7{
  background-color: #3CBAC2 !important;
}
.row1{
  border-radius: 10px 0 0 0;
}
.row7{
  border-radius: 0 10px 0 0;
}
.activeDate-table td{
  height: 140px;
  width: 14%;
}
.activeDate-table .rest{
  width: 90%;
  max-width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(255,53,29,.36);
  color: #FF0909;
  text-align: center;
  margin: 5px auto 0;
  border-radius: 25px;
}
.activeDate-table .today{
  width: 90%;
  max-width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #29C9D4;
  color: #fff;
  text-align: center;
  margin: 5px auto 0;
  border-radius: 25px;
}

.activiteside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 47px;
}

.side-banner {
  margin: 0;
  width: 412px;
  padding: 0 0 22px;
  border-bottom: 1px solid #E1E1E1;
}
.calender-Activities {
  width: 100%;
  height: 513px;
  overflow: auto;
}

.Activities-item {
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cccccc;
}
.calender-project{
  padding: 12px 0 20px;
  flex: 1;
  text-decoration: none;

}

.calender-project .title{
  color: #000000;
  font-size: 1.5em;
  text-decoration: underline;
  font-weight: 600;
  margin-bottom: 11px;
  /*max-width: 241px;*/
}
.calender-project .txt{
  color: #777777;
  font-size: 1em;
}
.Activities-item img{
  width: 31px;
  margin: 0 18px 0 10px;
}
.Activities-item .type{
  margin-right: 18px;
}


@media (max-width: 1200px) {
  .side-banner{
    width: 300px;
  }

}
@media (max-width: 850px) {
  .activitives-area {
    flex-direction: column;
  }
  .side-banner{
    width: 100%;
  }
  .activiteside {
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
  }
  .Activities-item img{
    width: 31px;
    margin: 0 10px 0 10px;
  }
}


/* map.html */
.map-top-box {
  width: 100%;
  margin: 0px auto;
  background-color: #F6F6F6;
  display: flex;
}
.map-top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 95%;
  max-width: 1620px;
  margin: 0 auto;
  padding-top: 56px;
}
.map-title {
  display: flex;
  align-items: center;
}
.map-btns{
  flex-grow: 1;
  justify-content: flex-end;
  margin-top: 11px !important;
}
.map-title img.dot{
  margin: 0 16px 0 0;
  width: 20px;
}
.por{
  position: relative;
  width: 905px;
}
.map-title p{
  font-weight: 500;
  font-size: 3.5em;
  line-height: 66px;
}
.map-view .view-path {
  color: #4A4A4A;
  display: flex;
  font-size: 1em;
  letter-spacing: .5px;
  align-items: center;
  padding-bottom: 10px;
  margin: 9px 0 20px 5px;
  flex-wrap: wrap;
  
}


.map-view  .view-path a{
  color: #4A4A4A;
  text-decoration: none;
}
.map-view  .view-path a:hover{
  opacity: .8;
}
.map-view .view-path img {
  object-fit: contain;
  margin: 0 16px;
  height: 12.5px;
}
.level-tab-box{
  height: 60px;
  width: 100%;
  position: relative;
}
.level-tab-ab{
  height: 72px;
  width: 100%;
  position: absolute;
  overflow: auto;
}
.level-tab-ab::-webkit-scrollbar {
  display: none;
}
.map-view .level-tab{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  position: absolute;
  left: 0;
  top: 0px;
}
.map-view .level-tab .tab-item{
  border: 1px solid #CBCBCB;
  border-radius: 12px;
  color: #9d9d9d;
  width: 95px;
  height: 52px;
  line-height: 52px;
  font-size: 1.375em;
  text-align: center;
  cursor: pointer;
  display: block;
  text-decoration: none;
    font-weight: 500;
}
.map-view .level-tab .tab-item.active{
  color: #fff !important;
  background: #29C9D4 !important;
  border-color: #29C9D4;
  height: 72px !important;
  border-radius: 12px 12px 30px 12px !important;
    font-size: 1.875em;
}
.map-view .level-tab .tab-item:hover{
  color: #fff !important;
  background: #29C9D4 !important;
  border-color: #29C9D4;
}
.map-view .kids-img{
  width: 407px;
  margin-left: 20px;
}

.map-btns{
  flex-grow: 1;
  justify-content: flex-end;
  margin-bottom: 16px;
  margin-left: 20px;
  width: 207px;
}
.map-main{
  display: flex;
  width: 95%;
  max-width: 1620px;
  margin: 43px auto 0;
}
.map-area{

}
.map-list-area{
  min-width: 378px;
  margin-left: 144px;
  display: flex;
    flex-direction: column;
}
.map-area .map-sm-title{
  color: #009FAA;
  font-size: 2.2em;
    font-weight: 500;
}
.map-area .map-sm-title span{
  font-size: 1.4em;
  color: #009FAA;
}

.map-img{
  max-width: 1071px;
  margin-top: 43px;
}
.map-icons{
  width: 578px;
  margin: 0 auto 83px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 21px;
}
.map-icon-item{
  display: flex;
  align-items: center;
  width: calc(25% - 16px);
  font-size: 1.44em;
}
.map-icon-item img{
  width: 27px;
  margin: 0 4px 0 0;
}

.type-explain{
  width: 100%;
  border-radius: 10px;
   border: 1px solid #eeeeee;
  padding: 10px;
  /*box-shadow: 0 0 10px #ccc;*/
}
.explain-title{
  /*border-bottom: 2px solid  #E9E9E9;*/
  padding: 0 14px;
  font-size: 1em;
    color: #777777;
}
.type-items{
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding: 0 14px;
    font-size: 0.8em;
}

.map-list-area .type{
  color: #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.125em;
}
.map-list-area .calender-Activities{
  height: 750px;
  margin-top: 30px;
}
.map-list-area .type-blue{
  background-color: #418DFF;
}
.map-list-area .type-pink{
  background-color: #FB6BD9;
}
.map-list-area .type-green{
  background-color: #00BFCC;
}
.map-list-area .type-orange{
  background-color: #FF9123;
}
.map-list-area .type-items .type {
    width: 44px;
    height: 44px;
}
@media (max-width: 1200px) {
  .map-main{
    flex-direction: column;
  }
  /* .map-list-area{
    display: none;
  } */
  .kids-img{
    display: none;
  }
  .map-list-area{
    width: 100%;
    max-width: 500px;
    margin: 0 auto 40px;
  }
}

@media (max-width: 960px) {
  .map-view .view-path {
    color: #949494;
    display: flex;
    font-size: 0.87em;
    letter-spacing: .5px;
    align-items: center;
    padding-bottom: 10px;
  }
  .map-view .view-path img {
    margin: 0 9px;
  }
}

@media (max-width: 700px) {
  .map-title p{
    font-size: 2.8em;
  }
  .map-icons{
    width: 100%;
    margin: 0 auto 83px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 16px;
    max-width: 360px;
  }
  .map-icon-item{
    display: flex;
    align-items: center;
    width: calc(25% - 13px);
    font-size: 0.83em;
  }
  .map-icon-item img{
    width: 16px;
    margin: 0 4px 0 0;
  }
    .map-list-area{
        width: 90%;
        max-width: 100%;
        min-width: 90%;
    }
}
.swiper-pagination{
  bottom: 20px !important;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{
  opacity: 1;
}
.swiper-pagination-bullet{
  border: 1px solid #fff;
  background-color: #fff;
  width: 13px;
  opacity: 1;
  height: 14px;
  margin: 0 10px !important;
}
.swiper-pagination-bullet-active{
  background-color: #29C9D4;
  border: 1px solid #29C9D4;
}


.home-banner-area{
  padding-top: 50px;
  background-color: #fff;
  max-width: 1620px;
  width: 90%;
  margin: 0 auto;
}
.home-banner-box{
  width: 100%;
  display: flex;
  align-items: center;
}
.home-banner{
  max-width: 1207px;
  width: 75%;
}
.home-news-area{
  width: calc(25% - 46px);
  margin-left: 46px;
}


.home-news-list-title{
  font-size: 2.8em;
  line-height: 54px;
  font-weight: 500;
  color: #393939;
}
.home-news-list-title img{
  height: 15px;
  margin: 0 0 8px 0;
}
.home-news-item{
  border-bottom: 1px solid #E1E1E1;
  padding: 20px 0 16px;
  display: block;
  text-decoration: none;
}
.news-item-date{
  font-size: 1em;
  color: #777777;
  margin-bottom: 0px;
}
.news-item-title{
  font-size: 1.375em;
  font-weight: 700;
  color: #009FAA;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* border-bottom: 2px solid #009FAA; */
  text-decoration: underline;
}
.news-item-text{
  font-size: 1.125em;
  color: #777777;
  margin-top: 7px;

  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /*行數*/
  -webkit-box-orient: vertical;
  white-space: normal;
}
@media (max-width: 1600px) {
  .home-news-item{
    padding: 10px 0 8px;
  }
  .news-item-date{
    margin-bottom: 8px;
  }
  .news-item-title{
    font-size: 1.25em;
  }
  .news-item-text{
    margin-top: 8px;
    font-size: 1em;
  }
  .home-banner{
    max-width: 2000px;
    width: 77%;
  }
  .home-news-area{
    width: calc(23% - 20px);
    margin-left: 20px;
  }
}

@media (max-width: 1460px) {
  .home-banner-box{
    flex-direction: column;
  }
  .news-item-text{
    margin-top: 4px;
    font-size: 1em;
  }
  .home-banner{
    width: 100%;
  }
  .home-news-area{
    margin-top: 23px;
    width: 100%;
    margin-left: 0px;
  }
  .home-news-item{
    padding: 20px 0 16px;
  }
  .news-item-date{
    margin-bottom: 13px;
  }
  .news-item-title{
    font-size: 1.35em;
  }
  .news-item-text{
    font-size: 1.125em;
  }
}
/* @media (max-width: 1400px) {

  .home-banner{
    width: 76%;
  }
  .home-news-area{
    width: calc(24% - 30px);
    margin-left: 30px;
  }
} */
@media (max-width: 600px) {
  .home-news-list-title{
    font-size: 2.5em;
  }
  .news-item-title{
    font-size: 1.25em;
  }
  .news-item-text{
    font-size: 1em;
  }
}
.quick-btns-box{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 46px;
}

.news-more-btn{
  width: 100%;
  background-color:#29C9D4 ;
  border-radius: 40px;
  color: #1A1A1A;
  font-size: 1em;
  text-align: center;
  height: 40px;
  line-height: 40px;
  max-width: 350px;
  margin: 20px auto 0;
}

.home-quick-btn-group{
  display: flex;
  align-items: center;
  gap: 46px;
  margin-top: 50px;
  margin-bottom: 59px;
  width: 100%;
  font-weight: 500 ;
}
.home-quick-btn-title{
  font-size: 2.813em;
  line-height: 54px;
  font-weight: 500;
  flex: 0 0 180px;
    color: #393939;
}
.home-quick-btn-title img{
  height: 15px;
  margin: 0 0 8px 0;
}
.onactiive{
  display: none;
}
.offactiive{
  display: block;
}
.home-quick-btn{
  background-color: #EFEFEF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #393939;
  font-size: 1.25em;
  height: 90px;
  flex: 1;
  font-weight: 500;
  max-width: 233px;
  border-radius: 50px;
  text-decoration: none;
}
.home-quick-btn:hover,.home-quick-btn:focus{
  background-color: #F7AB00;
  box-shadow: 0 0 24px #f7ab00;
  color: #fff;
}
.home-quick-btn:hover .onactiive
{
  display: block;
}
.home-quick-btn:hover .offactiive{
  display: none;
}
.home-quick-btn img{
  margin: 0 8px 0 0;
}
.home-quick-btn .icon-1{
  width: 40px;
}
.home-quick-btn .icon-2{
   width: 34px;
}
.home-quick-btn .icon-3{
  width: 42px;
}
.home-quick-btn .icon-4{
  width: 45px;
}
.home-quick-btn .icon-5{
  width: 30px;
}
@media (max-width: 1600px) {
  .home-quick-btn-group{
    gap: 20px;
  }
  .quick-btns-box{
    gap: 20px;
  }
}
@media (max-width: 1400px) {
  .home-quick-btn-title{
    flex: 1;
  }
  .home-quick-btn-group{
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }
  .quick-btns-box{
    width: 100%;
  }
  .home-quick-btn{
    /*font-size: 1.125em;*/
  }
  
}
@media (max-width: 1200px) {
  .quick-btns-box{
    flex-wrap: wrap;
  } 
  .home-quick-btn{
    min-width: 300px;
    max-width: 1000px;
  }
}
@media (max-width: 690px) {

  .home-quick-btn{
    min-width: 250px;
    /*font-size: 0.87em;*/
  }
  
}
@media (max-width: 600px) {
    .home-quick-btn-title{
      font-size: 2.5em; 
    }
}
@media (max-width: 580px) {
    .quick-btns-box{
           gap: 12px; 
    }

  .home-quick-btn{
    justify-content: left;
      padding-left: 40px;
  }
  
}
@media (max-width: 500px) {
  .home-quick-btn{
    height: 65px;
      /*font-size: 0.87em;*/
  }

  .home-quick-btn img{
    margin: 0 15px 0 0;
  }
  .home-quick-btn .icon-1{
    width: 28px;
  }
  .home-quick-btn .icon-2{
     width: 24px;
  }
  .home-quick-btn .icon-3{
    width: 31px;
  }
  .home-quick-btn .icon-4{
    width: 32px;
  }
  .home-quick-btn .icon-5{
    width: 21px;
  }
  
}

.special-area{
  padding: 47px  0 0 0;
  background-color: #F2F7FB;
  position: relative;
}
.events-area{
  padding: 47px  0 0 0;
  background-color: #fff;
  position: relative;
}
.classes-area{
  background-color: #F2F7FB;
  position: relative;
  padding: 47px  0 0 0;
}
.last-area{
  background-color: #F2F7FB;
  padding:76px 0 91px;
}
.last-anim{
  display: flex;
  width: 90%;
  max-width: 1620px;
  margin: 0 auto;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}
.last-anim-box{
  width: 100%;
  position: relative;
}
.last-imgs{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1%
}
.last-imgs a {
  max-width: 308px;
  width: 19%;
  display: block;

}
.last-imgs a{
  width: 100%;
}
.img-group-1{
  position: absolute;
  left: 0;
  top: 0;
}
.img-group-2{
  position: absolute;
  left: 100%;
  top: 0;
}
.img-group-3{
  position: absolute;
  left: 200%;
  top: 0;
}
.img-group-4{
  position: absolute;
  left: 300%;
  top: 0;
}
.last-imgs img{
  margin: 0;
  width: 100%;
  /* min-width: 252px; */
  /* height: 85px; */
  object-fit: cover;
}
.permanent-area{
  padding: 47px  0 0 0;
}

.home-auto-fill{
  width: 90%;
  max-width: 1620px;
  margin: 0 auto;
  min-height: 400px;
  position: relative;
  padding-bottom: 70px;
}
.home-special-list-title{
  font-size: 2.8em;
  line-height: 54px;
  font-weight: 500;
  color: #393939;

  /* margin: 0 40px; */
}
.home-special-list-title img{
  height: 15px;
  margin: 0 0 8px 0;
}

.special-swiper{
  max-width: 1620px;
  /* padding: 0 40px; */
}

.home-auto-fill .swiper-button-prev{
  left: -40px;
}
.home-auto-fill .swiper-button-prev:after{
  content: none;
}
.home-auto-fill .swiper-button-next{
  right: -40px;
}
.home-auto-fill .swiper-button-next:after{
  content: none;
}
.home-auto-fill .swiper-pagination{
  bottom: 40px !important;
}
.home-auto-fill .swiper-pagination-bullet{
  border: 1px solid #DFDFDF;
  background-color: #DFDFDF;
  width: 11px;
  opacity: 1;
  height: 11px;
  margin: 0 3.5px !important;
}
.home-auto-fill .swiper-pagination-bullet-active{
  background-color: #29C9D4;
  border: 1px solid #29C9D4;
}
.swipe-sm{
  display: none;
}
.special-swiper,
.classes-swiper{
  margin-top: 20px;
}
.special-pagination{
  max-width: 1620px;
  width: calc(100% - 2.6%) !important;
}
.home-specialList-item {
  background-color: #fff;
  padding: 7px 7px 17px;
  border-radius: 15px;
  max-width: 419px;
  margin: 0 auto;
  display: block;
  text-decoration: none;
        min-height: 463px;
}
.home-specialList-item img {
    width: 100%;
    border-radius: 5px;
}
.home-specialList-item .level{
  color: #000;
  font-size: 1.25em;
  font-weight: 400;
  margin: 12px 20px 0px;
  display: flex;
  align-items: center;
}
.home-specialList-item .level p {
  color: #fff;
  background-color: #29C9D4;
  border-radius: 22px;
  font-weight: 400;
  margin: 0px 5px 0px 0;
  height: 26px;
  line-height: 26px;
  text-align: center;
    padding: 0 10px;
}

.home-specialContent-title {
  font-size: 1.375em;
  letter-spacing: .2px;
  font-weight: 700;
  margin: 18px 16px 0px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  flex: 1;
  color: #000;
}

.home-specialContent-illustrate {
  color: #777777;
  font-size: 1.125em;
  letter-spacing: .2px;
  font-weight: 400;
  /* text-align: justify; */
  margin: 10px 16px 10px 16px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.home-specialContent-date-num{
  color: #3EA5FF;
  font-size: 1.125em;
  margin: 10px 16px 0px;
  font-weight: 400;
}
.event-box{
  display: flex;
  align-items: center;
  position: relative;
}
.first-item{
  width: 373px;
  height: 400px;
  background-color: blue;
}
.events-swiper-box{
  position: relative;
}
.permanent-area{
  max-width: 1620px;
  width: 90%;
  margin: 0 auto;
  padding: 45px 0 57px;
}
.permanent-info{
  width: 100%;
  /* height:960px; */
  background-color: #D6EDFF;
  margin-top: 10px;
  padding: 28px 30px 18px 30px;
  position: relative;
}

.permanent-info-list{
  
}
.show-area{
  position: absolute;
  width: calc(60% - 76px); /*1131129調整原為calc(60% - 76px)*/
  background-color: #fff;
  height:calc(100% - 57px); /*1131129調整原為calc(100% - 57px)*/
  right: 29px;
  top: 28px;
  border-radius: 20px;
  padding: 49px 33px 33px;
  display: none;
  align-items: center;
  justify-content: center;
}
.show-area img{
  width: 100%;
  height: 100%;
  object-fit:contain;/*1131129調整原為fill*/
}
.permanent-info-list-item{
  background-color: #fff;
  border-radius: 20px;
  width: 40%;
  padding:15px 20px 15px 20px;
  box-shadow: 0 7px 10px -5px rgba(30, 132, 191,.3);
  margin-bottom: 11px;
  transition-duration: .3s;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.info-item-active{
  width: calc(40% + 80px);
  padding-right: 87px;
  box-shadow: none;
}
.info-item-active .show-area{
  display: flex;
}
.list-item-title{
  display: flex;
  align-items: center;
  
}
.list-item-title-level {
  display: inline-block;
  position: relative;
  z-index: 0;
  font-size: 1.563em;
  margin-right: 15px;
  color: #fff;
  padding: 4px 12px 3px;
    font-weight: 700;
}
.list-item-title-level::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: #fff;
  border-radius: 4px;
  transform: skewX(-10deg);
  z-index: -1;    
}
.info-orange{
  color: #B85C00;
}
.info-orange span::before{
  background-color:#B85C00;
}
.info-deep-orange{
  color: #F75C00;
}
.info-deep-orange span::before{
  background-color:#F75C00;
}
.info-green{
  color: #7B9900;
}
.info-green span::before{
  background-color:#7B9900;
}
.info-blue{
  color: #007A8A;
}
.info-blue span::before{
  background-color:#007A8A;
}
.info-purple{
  color: #826AFF;
}
.info-purple span::before{
  background-color:#826AFF;
}
.info-deep-blue{
  color: #004B97;
}
.info-deep-blue span::before{
  background-color:#004B97;
}
.list-item-title-text{
  font-size: 1.6em;
  font-weight: 700;
        line-height: 130%;
}
.list-item-txt{
  margin-top: 12px;
  font-size: 1.125em;
  color: #272727;
    line-height: 130%;
}

.visitor-area{
  max-width: 1620px;
  width: 90%;
  margin: 0 auto 44px;
}
.visitor-out{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 12px;
}
.visitor-info{
  border-top: 4px solid #FFE7B2;
  flex: 1;
  margin-right: 70px;
        font-size: 1.125em;
}
.about-time{
  display: flex;
  align-items: flex-start;
}
.visitor-info-area{
  width: 50%;
  margin-top: 23px;
}
.visitor-title{
  color: #393939;
  font-size: 1.125em;
  font-weight: 700;
}
.visitor-title span{
  color: #F7AB00;

}
.visitor-sm-title{
  color: #393939;
  font-size: 1em;
  margin-top: 11px;
  padding-left: 3px;
  margin-bottom: 4px;
}
.visitor-sm-title:nth-child(odd){
  margin-top: 19px;
}
.visitor-ps{
  font-size: .875em;
  margin-top: 14px;
    color: #666666;
}
.visitor-ps-sm{
  display: none;
}
.visitor-sm-txt{
  color: #3EA5FF;
  font-size: 1.125em;
  padding-left: 3px;
    font-weight: 700;
}
.about-price{
  display: flex;
  flex-direction: column;
}

.price-title{
  font-size: 1.125em;
  margin-top: 29px;
  color: #393939;
  font-weight: 700;
}
.price-box{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 7px;
}
.price-item{
  background-color: #F2F7FB;
  color: #393939;
  font-size: 1.125em;
  width: 50%;
  min-width: 200px;
  height: 60px;
  text-align: center;
  border-radius: 10px;
  line-height: 60px;
  max-width: 246px;
    font-weight: 500;
}
.price-item span{
  font-size: 1.375em;
  font-weight: 700;
}
.price-txt-1{
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1em;
  color: #393939;
}
.price-txt{
  color: #393939;
    font-weight: 500;
    margin-bottom: 5px;
}
.visitor-map{
  width: 711px;
  height: 450px;
}
.visitor-map iframe{
  width: 100%;
  height: 100%;
}


.not-fill{
  padding-bottom: 0 !important;;
}
.event-all{
  width: 373px;
  background-color: #CEF6F8;
  border-radius: 20px;
  color: #009FAA;
  font-size: 1.375em;
  text-align: center;
  line-height: 64px;
  display: block;
  text-decoration: none;
    font-weight: 700;
}
.event-all img{
  margin: 0;
}
.bg-gr{
  background-color: #F6F6F6;
  min-height: 446px;
  display: flex;
  flex-direction: column;
}
.events-box{
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  justify-content: space-between;
}
.events-swiper-box{
  position: relative;
  padding-bottom: 70px;
  width: calc(100% - 450px);
}

.events-title{
  -webkit-line-clamp: 2;
}
.top-button{
  position: fixed;
  right: 50px;
  bottom: 100px;
  display: block ;
  opacity: 0;
  transition-duration: .3s;
  z-index: 200;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  border-radius: 50%;
}

.people-num-view{
  position: fixed;
  right: 50px;
  top: 150px;
  z-index: 200;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, .3);
  background-color: #1e84bf;
  border-radius: 10px;
  /*width: 274px;*/
  /*height: 111px;*/
  padding: 13px 48px 18px 20px;
}

@media (max-width: 450px) {
    #FooterJs_divPeopleNum {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .people-num-view {
        right: auto;
        bottom: 15%;
        width: 85%;
    }
}
.people-num-view p{
  margin-bottom: 9px;
  font-size: 1.25em;
  color: #F6F6F6;
  font-weight: 300;
}
.close-num{
  position: absolute;
  right: 5px;
  top:5px;
  cursor: pointer;
        padding: 15px;
}
.people-num-view p:last-child{
  margin: 0;
}


@media (max-width: 1520px){
  .about-time{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .visitor-ps{
    display: none;
  }
  .visitor-ps-sm{
    display: block;
    font-size: 1em;
    margin-top: 14px;
  }
  .visitor-info-area{
    width: 100%;
  }
  .visitor-info-area:nth-child(2){
    margin-top: 31px;
  }
  .visitor-info{
    margin-right: 30px;
  }

  .price-box{
    gap: 15px;
  }
  .permanent-info-list-item{
    width: 100%;
  }
  .show-area{
    position: relative;
    background-color: #fff;
    
    width: 100%;
    right: 0;
    top: 0;
    border-radius: 0px;
    padding: 22px 0;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 新增：防止圖片超出可視範圍 */
  }
  .info-item-active{
    padding-right: 21px;
  }
  .show-area img{
   max-width: 100%;
 width:100%; /* 新增：確保圖片寬度自動調整 */
        object-fit: scale-down;
  }
  .home-specialContent-date-num{
    font-size: 1em;
  }
}
@media (max-width: 1100px){
  .last-area{
    display: none;
  }
  .visitor-out{
    flex-direction: column;
  }
  .about-time{
    width: 100%;
  }
  .visitor-map{
    margin-top: 19px;
    width: 100%;
    max-width: 600px;
  }
  .visitor-info{
    width: 100%;
  }

  .home-specialContent-title{
    font-size: 1.17em;
    margin: 18px 5px 0px;
  }
  .home-specialContent-illustrate{
    font-size: 1em;
    margin: 15px 5px 0px;
  }
  .home-specialContent-date-num{
    margin: 10px 5px 0px;
  }
  .home-specialList-item .level{
    color: #000;
    font-size: 1.125em;
    font-weight: 400;
    margin: 12px 5px 0px;
    display: flex;
    align-items: center;
  }
  
}
@media (max-width: 950px) {
.event-all{
  width: 44%;
  background-color: #CEF6F8;
  border-radius: 20px;
  color: #009FAA;
  font-size: 1.35em;
  text-align: center;
  line-height: 64px;
}
.events-swiper-box{
  position: relative;
  padding-bottom: 70px;
  width: calc(100% - 55%);
}
}
@media (max-width: 800px) {

  .permanent-info{
    width: 100%;
    /* height:960px; */
    background-color: #D6EDFF;
    margin-top: 10px;
    padding: 9px 9px 22px;
    position: relative;
  }
  .list-item-txt{
    margin-top: 12px;
    font-size: 1em;
  }
  .list-item-title-text{
    /*font-size: 1.25em;*/
    /*font-weight: 500;*/
  }
  .permanent-info-list-item{
    padding: 20px 18px 23px ;
  }
  .home-auto-fill .swiper-button-prev{
    display: none;
  }
  .home-auto-fill .swiper-button-next{
    display: none;
  }
  .events-box{
    flex-direction: column;
  }
  .event-all{
    width: auto;
    margin: 0 auto;
  }
  .events-swiper-box{
    margin-top: 20px;
    width: 100%;
  }
  .price-box{
    gap: 10px;
    margin-top: 1;
  }
  .price-item{
    width: calc(50% - 5px);
    min-width: 5px;
  }
  .visitor-map{
    margin-top: 19px;
    /* width: 100%; */
    max-width: 100%;
    /* max-height: 400px; */
    overflow: hidden;
  }
  .about-price{
    display: flex;
    flex-direction: column-reverse;
  }
  .price-title{
    margin-top: 36px;
  }

  .top-button{
    width: 50px;
    height: 50px;
      right: 10px;
  }
  

}

@media (max-width: 768px) {
  .show-area {
    width: calc(100% - 40px); /* 修改：調整寬度以適應小螢幕 */
    height: auto; /* 修改：自動調整高度 */
    right: 20px; /* 修改：調整位置 */
    top: 20px; /* 修改：調整位置 */
    padding: 20px; /* 修改：調整內邊距 */
  }
}


@media (max-width: 600px) {
  .price-item{
    font-size: 1em;
  }
  .price-item span{
    font-size: 1.4em;
    font-weight: 500;
  }
  .visitor-map{
    margin-top: 19px;
    max-height: 300px;
    max-width: 100%;
    overflow: hidden;
  }
    .list-item-title-level{
         margin-right: 10px;   
    }
}
@media (max-width: 350px) {
  .price-item{
    font-size: .85em;
  }
}
a:focus{
  outline: 2px dashed #0f9ea8;
}

.page-pagination{
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
    margin-top: 30px;
}
.page-pagination .page_num{
  display: flex;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid transparent;
  align-items:center;
  justify-content: center;
  margin: 0 3.5px;
  
}
.page-pagination .page_num a{
  text-decoration: none;
  color: #4A4A4A;
  font-size: 1.25em;
  font-weight: 300;
}

.page-pagination .page_num.active{
  border: 2px solid #4A4A4A !important;
}
.page-pagination .dots{
  width: 33px;
  color: #E9E9E9;
  margin: 0 3.5px;
}
.page-pagination .dots img{
  width: 100%;
}
.page_prev{
  margin: 0 30px;
}
.page_next{
  margin: 0 30px;
}
   
.page-pagination div a{
  display: block;
}
.page-pagination img{
  margin: 0;
  width: 9.77px;
}


@keyframes slideRight {
  from {
    left: 0;
  }
  25% {
    left: 0%;
  }
  26% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  51% {
    left: -200%;
  }
  75% {
    left: -200%;
  }
  76% {
    left: -300%;
  }
  to {
    left: -300%;
  }
}


.slideRight {
  -webkit-animation-name: slideRight;
  animation-name: slideRight;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
.access-menu{
  display: block;
  color: #0f9ea8 !important;
  text-decoration: none;
  margin-right: 10px;
  width: fit-content;
}

.access-menu:focus{
  outline: 2px dashed #0f9ea8;
}
.access-menu-head{
  color: #fff !important;
}


<!!!!------------->


@media (max-width: 1100px) {
  .email-query-bar {
    padding: 20px;
  }

  .queryBar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
  }

  .queryBar-item p {
    flex: 0 0 120px;
    margin-right: 10px;
    font-size: 1em;
  }

  .queryBar-item input,
  .queryBar-item .asp:TextBox {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 1em;
  }

  .email-star {
    flex: 0 0 20px;
    margin-right: 5px;
  }

  .inquire-btn.ver-btn {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    height: 39px;
    line-height: 39px;
    font-size: 1em;
    margin-left: 130px;
    border-radius: 10px;
    background-color: #ff69b4;
    color: #fff;
    text-align: center;
  }

  .tg-user-code-div {
    display: flex;
    align-items: center;
    margin-left: 130px;
    margin-top: 10px;
  }

  .rent-verificpic {
    width: 200px;
    margin-left: 0;
    height: auto;
    max-width: 100%;
  }

  .btn-codeimg {
    margin-left: 10px;
    display: flex;
    align-items: center;
    height: 39px;
    padding: 0 10px;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    font-size: 1em;
  }

  .btn-codeimg svg {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }

  .recode-text {
    font-size: 1em;
  }

  .main-content-view {
    margin: 0 auto 50px;
    width: 90%;
    max-width: 800px;
  }

  .queryBar3 {
    margin-top: 20px;
  }

  #emailCodeVerifyDiv .queryBar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
  }

  #emailCodeVerifyDiv .queryBar-item p {
    flex: 0 0 120px;
    margin-right: 10px;
    font-size: 1em;
  }

  #emailCodeVerifyDiv .queryBar-item input {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 1em;
  }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}