@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

html {font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;}
.body {margin: 0;}
/*a:focus {border-style: dashed;}*/
.nav__item:focus-within .dropdown-content  {display: block;}
/* logo */
.mobile-menu__logo, .logo-text {background-image: url("../img/logo.png"); background-position: 10% 50%; background-repeat: no-repeat; background-size: contain;}

/* hero */
.hero {margin-top: 38px; background-image: url("../img/Yl-5.png"); background-repeat: no-repeat; background-position-x: left; background-position-y: bottom;}
.hero-left {float: left; padding: 0 0 0 55px;}
.hero-left p {font-weight: 700; font-size: 3rem; color: #753255; letter-spacing: 0.1em;}
.hero-right {float: right; padding: 0 54px 34px 0;}

.header-back {font-size: 0.1rem; color: transparent; background-color: #F6CACD; height: 11px;}
#headerNav {margin-top: -50px;}
.nav--menu-block-homepage .nav__link {color: #383838; font-size: 0.93rem; padding: 5px 8px 5px;}
.logo {display: block; float: left; margin-left: 0; padding: 12px 0 14px 35px;}
/*.mainlogo {padding-left: 55px;}*/

.U, .C, .S, .B {color: transparent !important;}
.fast a{color: transparent !important;}

.nav-bar {padding-right: 55px; float: right; margin-top: -5px;}
.nav-bar li {font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 0.1em;}
.nav__img {padding-top: 6px;}
.nav__search :hover{background-color: none !important;}
.nav_search {margin: 10px 0 10px 10px; width: 230px;}
.content-search {left: -190px; background-color: #fff;}
.content-main {color: #6A003E; font-weight: 400; font-size: 1.25rem; text-align: justify; line-height: 150%; margin: 0;}
.dropdown-search {width: 75%}
.dropdown-enter {background-color: #fff; height: 20px; margin-top: 5px;}

.goTop {position: fixed; right: 30px; bottom: 20px; z-index: 1; font-size: 15px;}
.goTopBtn {background-color: transparent; border: none; cursor: pointer; display: flex; justify-content: center; flex-wrap: wrap; color: #753255; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);}
.goTop i {width: 45px; flex-basis: 100%; text-align: center;}
.goTop span {clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
.goTop a:hover, abbr {font-variant: none; text-transform: none;}
.hide {display: none}

/* menubar */
.menubar {text-align: center;}
.menubar a {font-family: 'Noto Serif TC'; font-style: normal; font-weight: 900; font-size: 1.5rem; line-height: 194%; letter-spacing: 0.1em; color: #753255;}
.menubar--1 {background-color: #FFD3E7; float: left; width: 25%; padding: 28px 0px;}
.menubar--1 img {padding-right: 5px;}
.menubar--2 {background-color: #F6DDEA; float: left; width: 25%; padding: 26px 0px;}
.menubar--2 img {padding-right: 5px;}
.menubar--3 {background-color: #F6E5F0; float: left; width: 25%; padding: 26px 0px;}
.menubar--3 img {padding-right: 5px; padding-top: 5px;}
.menubar--4 {background-color: #F3DFF0; float: left; width: 25%; padding: 26px 0px;}
.menubar--4 img {padding-right: 5px; padding-top: 6px;}

/* content */
h2.title {background: #F6CACD; color: #753255; font-size: 1.25rem; padding: 13px 0; text-align: center; margin-top: 0; margin-bottom: 0; font-weight: 700; letter-spacing: 0.1em;}

#content {padding: 32px 55px 10px;}
.grid-title {margin: 0; padding: 13px 0; color: #000; font-weight: 400; font-size: 1.25rem; text-align: center; background-color: rgba(255, 255, 255, 0.92);}
.grid-image--top {filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));}
.grid-item {float:left; padding-bottom: 35px; padding-right:10px; position: unset !important;}
.grid-title2 {font-weight: 400; font-size: 1.25rem; line-height: 29px; background: #753255; padding: 8px 0; color: #fff; text-align: center; margin-top: 0}
.grid-back {background-color: #F6DDEA; height: 207px; width: 49%;}
h2.grid-title:hover {background-color: #753255; color: #fff;}

/* news */
.news {padding: 30px 55px 15px;}
.text {padding-bottom: 32px; width: 100%;}
.text-num {background: #fff; border-radius: 8px; border-width: 3px; border-style: solid; border-color: #753255; color: #753255; display: inline-block; text-align: center; padding: 3px 15px; font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; margin-top: 0; width: 15%;}
.text time:hover{background-color: #753255; color: #fff;}
.text h3 {display: inline-block; background-color: #F6DDEA; padding: 5px 32px; margin-top: 1px; border-radius: 8px; box-sizing: border-box; margin-left: 9px; width: calc(85% - 20px); font-weight: 400; font-size: 1rem; letter-spacing: 0.1em; /*max-width: calc(100% - 18px);*/ vertical-align: top;}
.text h3:hover {background-color: #753255; color: #fff;}
.text-article {font-weight: 400; font-size: 1rem; line-height: 23px; letter-spacing: 0.1em; color: #000000; padding: 0 0 0 203px; margin-top: -8px; width: 90%; margin-bottom: 0;}
.more {text-align: center; width: 10%; float: right; margin-top: -55px;}
.more a {color: #753255; padding: 2px 12px; letter-spacing: 0.1em;}
.more a:hover {border-radius: 8px; background: #753255; color: #fff;}

.newspage {padding: 12px 55px 22px;}
.main_title {font-weight: 500; font-size: 1.25rem; letter-spacing: 0.1em; color: #6A003E; white-space:nowrap; float: left; margin: 0; margin-right: 30px;}
.info {color: #6A003E;}
.news_title {border-bottom: 2.5px solid #6A003E;}
.text-size {float: right; margin-top:-40px;}
.text-size img {float: left; padding-left: 10px; cursor: pointer;}
.content {font-family: 'Noto Sans TC'; font-style: normal; font-weight: 400; font-size: 1rem; line-height: 180%; text-align: justify; letter-spacing: 0.1em; color: #000000; margin-top: 6px; /*border-top: 1px solid #6A003E;*/}
.content p {/*border-bottom: 1px solid #6A003E;*/ padding-bottom: 20px; padding: 0;}
.back {border-top: 2.5px solid #6A003E; margin-top: -6px;}
.back a {float: right; background-color: #6A003E; border-radius: 9px; color: #fff; text-align: center; padding: 6px 20px; margin-bottom: 30px; margin-top: 25px;}

/* service */
.service_title {padding: 20px 0;}
.service_main {text-align: center; padding: 10px 0; border-bottom: 1px solid #6A003E;}

/* topimg */
.topimg {height: 15.4vw; background-color: #F6CACD; background-repeat: no-repeat; background-size: 100%;}
.topimg h2 {font-weight: 500; font-size: 3.8vw; line-height: 70px; text-align: center;letter-spacing: 0.1em; color: #FFFFFF; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); margin: 0 auto; padding-top: 48px;}
.topimg p {margin: 0; font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: 0.1em; text-align: center;}

.albumphoto {background-image: url("../img/header-3.png");}
.newsphoto {background-image: url("../img/header-2.png");}
.trafficphoto {background-image: url("../img/header-4.png");}

/* bread */
.bread {color: #812938; margin: 10px 54px 10px; font-size: 0.93rem; letter-spacing: 0.1em;}
.bread-first {color: #812938; font-weight: 700;}
.bread-second {color: #812938; font-weight: 300;}

/* album  */
.area {padding: 0 10px 55px 55px;}
.album {float: left; width: 25%; padding-right: 45px; padding-bottom: 35px;} 
.album__image {height: 251px; object-fit: cover; width: 100%}
.album time {font-weight: 100; font-size: 0.75rem; line-height: 17px; letter-spacing: 0.1em; float: left; margin: 0;}
.album h3 {font-family: 'Noto serif tc'; font-style: normal; font-weight: 800; font-size: 0.93rem; line-height: 18px; letter-spacing: 0.1em; color: #000; float: left; width: 100%; margin: 0;}
.album-more {font-weight: 100; font-size: 0.75rem; line-height: 17px; letter-spacing: 0.1em; float: right; color: #000; }
.album h4{font-family: 'Noto serif tc'; font-style: normal; font-weight: 800; font-size: 0.93rem; line-height: 18px; letter-spacing: 0.1em; color: #000;}

.album_area {padding: 0 80px 55px 80px;}
.album_content {float: left; width: 25%; padding-right: 10px; padding-bottom: 35px;}
.album__img {height: 200px; object-fit: cover; width: 100%;}
.album_content div {font-weight: 500; font-size: 1rem; line-height: 18px; letter-spacing: 0.1em; color: #000000; margin: 0; margin-top: 5px; text-align: center;}
.album_photo {margin-top: 6px; border-top: 1px solid #6A003E; padding-top: 25px; border-bottom: 1px solid #6A003E; padding-bottom: 20px;}
.album_back {border-top: 2.5px solid #6A003E; margin-top: 6px;}
.album_back a {float: right; background-color: #6A003E; border-radius: 9px; color: #fff; text-align: center; padding: 6px 20px; margin-bottom: 30px; margin-top: 25px;}

.index-area {padding: 35px 10px 0px 55px;}

/* traffic*/
.traffic {padding: 22px 55px 33px;}
.traffic-content {float: left; width: 55%;}
.traffic-content h3,h4 {font-weight: 700; font-size: 1.25rem; line-height: 29px; letter-spacing: 0.1em; color: #000000;}
.traffic-explain {}
.traffic-explain img {float: left; padding-right: 25px; padding-top: 10px;}
.traffic-explain p {font-weight: 400; font-size: 1rem; line-height: 23px; text-align: justify; letter-spacing: 0.1em;}
.traffic-map {float: right;}

@media print 
{
  a[href]:after { content: none !important; }
  img[src]:after { content: none !important; }
	
	.footer-upper {display: none  !important;}
	.text-article {padding-left: 0;}
	.text h3 {padding-left: 0;}
	.topimg p {display: none !important;}
	.page {display: block;}
	.slider {display: none;}
	.header-back {display: none;}
}

/* */
.page__btn li {
  box-sizing: border-box;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 20px;

  overflow-y: scroll;
  font-family: 'Noto Sans TC';
  font-style: normal;
  -webkit-user-select: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

 .page span {
    background: #ffffff;
    box-shadow: 0 0.8rem 2rem rgba(#5a6181, 0.05);
    border-radius: 0.6rem;
    font-size: 3rem;
    transition: all 0.3s ease;
  }

  .page span :hover {
      transform: scale(1.2);
      color: var(--primary);
    }

#app .page {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.6rem;
  margin: 0;}

  .page__numbers,
  .page__btn,
  .page__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.8rem;
    font-size: 1.4rem;
    cursor: pointer;
  }

  .page__dots {
    cursor: initial;
    border: 1px solid #FAC3DF;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.875rem;
  }
  
  .page__numbers {
    border: 1px solid #FAC3DF;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.875rem;}
    
   .page__numbers :hover {
      color: #AA045A;
      border: 2px solid #AA045A;
    }


  .page__btn {
    pointer-events: none;
    background-color:#F2BDD9;
    border-radius: 4px;
    color:#fff;
	padding: 18px 17px;}

/* Sitemap */
.sitemap-title img {float: left; margin: 0 17px 0 54px;}
.sitemap-title h1 {font-weight: 900; line-height: 52px; letter-spacing: 0.1em; color: #812938;}
.sitemap-content {font-weight: 500; font-size: 1.25rem; letter-spacing: 0.1em; margin-right: 25px; padding-bottom: 38px;}
.sitemap-up {line-height: 29px; padding: 8px 0 0 54px;}
.sitemap-about {line-height: 29px; margin: -20px 0 -30px 45px;}
.sitemap-middle {line-height: 28px; padding: 35px 0 0 54px;}
.sitemap-main {line-height: 29px; margin: 50px 0 0 50px;}
.sitemap-main a {color: #000}
ol.sitemap-main>p {margin: 0; font-size: 1.125rem;}
ol.sitemap-main>li {margin-top: 15px;}

/* footer */
.footer 
.footer-left img {width: 70%; padding-bottom: 40px;}
.footer-title {margin-bottom: 20px;}
.footer-title a {font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; line-height: 30px; letter-spacing: 0.1em; color: #502F3C;}
.footer-title span {padding: 0 14px; color: #502F3C;}
.footer-text {font-family: 'Noto Sans TC'; font-style: normal; font-weight: 300; font-size: 0.812rem; line-height: 22px; letter-spacing: 0.1em; color: #000000;}
.footer-text a {color: #000000;}
.footer-right {font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; font-size: 16px; line-height: 30px; letter-spacing: 0.1em; color: #502F3C;}
.footer-mark {float: right; padding-top: 158px; width: 30%;}
.footer-mark img {width: 32%}
.footer-nav ul {list-style: none;}
.footer-upper {border-top: 3px solid #F6CACD; padding: 0px 55px 20px; font-size: 0.75rem;}
.footer-down {background-color: #F3E1E2; padding: 70px 55px 48px;}
.footer-nav {margin-top: 35px; width: 20%; float: left;}
.footer-nav h2 {color: #000000; font-weight: 600; font-size: 1.126rem; line-height: 26px; letter-spacing: 0.1em; margin-top: 0;}
.footer-nav-bar {padding-left: 0;}
.footer-nav-bar a {color: #000000; font-weight: 300; line-height: 20px; font-size: 0.875rem; letter-spacing: 0.1em;}
.footer-nav li {padding-bottom: 4px;}

/* 變數 */
:root {--main-summer-color: #307E0B; --main-fall-color: #754A32; --main-winter-color: #325175;}

/* summer */
.summer .header-back {background-color: #B5E1A0;}
.summer .menubar--1 {background-color: #B0DF99;}
.summer .menubar--1 img {content: url("../img/yl-38.png");}
.summer .menubar--2 {background-color: #C6E9B5;}
.summer .menubar--2 img {content: url("../img/yl-39.png");}
.summer .menubar--3 {background-color: #D3EEC6;}
.summer .menubar--3 img {content: url("../img/yl-40.png");}
.summer .menubar--4 {background-color: #E1F0D9;}
.summer .menubar--4 img {content: url("../img/yl-41.png");}
.summer .hero {background-image: url(../img/Yl-50.png);}
.summer .hero-left p {color: var(--main-summer-color);}
.summer .nav__link:hover {background-color: var(--main-summer-color);}
.summer .dropdown-content a:hover {background-color: var(--main-summer-color);}
.summer .hero-left img {content: url("../img/yl-51.png");}
.summer .latest h2 {background: #B5E1A0;}
.summer h2.grid-title:hover {background-color: var(--main-summer-color);}
.summer .menubar a {color: #000;}
.summer .title a {color: #000;}
.summer .text-num {border-color: var(--main-summer-color); color: var(--main-summer-color);}
.summer .text time:hover {background-color: var(--main-summer-color); color: #fff;}
.summer .text h3 {background-color: #DDF4D2;}
.summer .text h3:hover {background-color: var(--main-summer-color); color: #fff;}
.summer .more a {color: var(--main-summer-color);}
.summer .more a:hover {background-color: var(--main-summer-color); color: #fff;}
.summer .footer-upper {border-top: 3px solid #DDF4D2;}
.summer .footer-down {background-color: #DDF4D2;}
.summer .topimg {background-color: #DDF4D2;}
.summer .footer-title a {color: #225908;}
.summer .footer-right {color: #225908;}


/* fall */
.fall .header-back {background-color: #F6E2CA;}
.fall .menubar--1 {background-color: #FFE8D3;}
.fall .menubar--1 img {content: url("../img/yl-42.png");}
.fall .menubar--2 {background-color: #F6F2DD;}
.fall .menubar--2 img {content: url("../img/yl-43.png");}
.fall .menubar--3 {background-color: #F6F3E5;}
.fall .menubar--3 img {content: url("../img/yl-44.png");}
.fall .menubar--4 {background-color: #F3EDDF;}
.fall .menubar--4 img {content: url("../img/yl-45.png");}
.fall .hero {background-image: url(../img/Yl-29.png);}
.fall .hero-left p {color: var(--main-fall-color);}
.fall .nav__link:hover {background-color: var(--main-fall-color);}
.fall .dropdown-content a:hover {background-color: var(--main-fall-color);}
.fall .hero-left img {content: url("../img/yl-36.png");}
.fall .latest h2 {background: #F6E2CA;}
.fall h2.grid-title:hover {background-color: var(--main-fall-color);}
.fall .menubar a {color: var(--main-fall-color);}
.fall .title a {color: var(--main-fall-color);}
.fall .text-num {border-color: var(--main-fall-color); color: var(--main-fall-color);}
.fall .text time:hover {background-color: var(--main-fall-color); color: #fff;}
.fall .text h3 {background-color: #F6F2DD;}
.fall .text h3:hover {background-color: var(--main-fall-color); color: #fff;}
.fall .more a {color: var(--main-fall-color);}
.fall .more a:hover {background-color: var(--main-fall-color); color: #fff;}
.fall .footer-upper {border-top: 3px solid #F6E2CA;}
.fall .footer-down {background-color: #F3EEE1;}
.fall .topimg {background-color: #F6E2CA;}
.fall .footer-title a {color: #502F2F;}
.fall .footer-right {color: #502F2F;}

/* winter */
.winter .header-back {background-color: #CAF6F6;}
.winter .menubar--1 {background-color: #D3E7FF;}
.winter .menubar--1 img {content: url("../img/yl-46.png")}
.winter .menubar--2 {background-color: #DDF6F1;}
.winter .menubar--2 img {content: url("../img/yl-47.png")}
.winter .menubar--3 {background-color: #E5ECF6;}
.winter .menubar--3 img {content: url("../img/yl-48.png")}
.winter .menubar--4 {background-color: #DFEFF3;}
.winter .menubar--4 img {content: url("../img/yl-49.png")}
.winter .hero {background-image: url(../img/Yl-30.png);}
.winter .hero-left p {color: var(--main-winter-color);}
.winter .nav__link:hover {background-color: var(--main-winter-color);}
.winter .dropdown-content a:hover {background-color: var(--main-winter-color);}
.winter .hero-left img {content: url("../img/yl-37.png");}
.winter .latest h2 {background: #CAF6F6;}
.winter h2.grid-title:hover {background-color: var(--main-winter-color);}
.winter .menubar a {color: var(--main-winter-color);}
.winter .title a {color: var(--main-winter-color);}
.winter .text-num {border-color: var(--main-winter-color); color: var(--main-winter-color);}
.winter .text time:hover {background-color: var(--main-winter-color); color: #fff;}
.winter .text h3 {background-color: #DDF6F1;}
.winter .text h3:hover {background-color: var(--main-winter-color); color: #fff;}
.winter .more a {color: var(--main-winter-color);}
.winter .more a:hover {background-color: var(--main-winter-color); color: #fff;}
.winter .footer-upper {border-top: 3px solid #CAF6F6;}
.winter .footer-down {background-color: #E1EDF3;}
.winter .topimg {background-color: #CAF6F6;}
.fall .footer-title a {color: #2F504E;}
.fall .footer-right {color: #2F504E;}