*, *:before, *:after {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  word-break: break-all;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
html {
  font-size: 62.5%;
	scroll-behavior: smooth;}
body {
  font-family: Arial, 'Noto Sans TC', "Microsoft JhengHei", 微軟正黑體, sans-serif;
  color: #333;
  background-color: hsla(0, 100%, 100%, 1);
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.5;
	overflow-x: hidden;}
a {
  color: #333;
  font-size: 1.8rem;
  -webkit-transition: .1s;
  transition: .1s;}
	a:hover, a:focus {
		outline: none !important;
		color: hsla(218, 56%, 44%, 1);
		color: var(--primary);
		text-decoration: none;}

ul, li { list-style: none; }

h1, .h1 { font-size: 40px;font-size: 4.0rem; }
h2, .h2 { font-size: 32px;font-size: 3.2rem; }
h3, .h3 { font-size: 28px;font-size: 2.8rem; }
h4, .h4 { font-size: 24px;font-size: 2.4rem; }
h5, .h5 { font-size: 20px;font-size: 2.0rem; }
h6, .h6 { font-size: 18px;font-size: 1.8rem; }
      p { font-size: 18px;font-size: 1.8rem; }

/*=================================================================
                              通用
=================================================================*/
@media (min-width: 1200px) {
 .container {
    max-width: 1280px;}}
@media (min-width: 1400px) {
	.container {
	  max-width: 1320px;}}

section[data-tag="section"] {
	margin: 3rem auto;}

/*==================================
                 文字
====================================*/
/*== 文字省略 ==*/
.txt-omit-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;}
.txt-omit-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}

/*== 標題 ==*/
.title.one {
	margin: 2rem auto;
	color: #FFF;
	font-weight: 700;
	text-align: center;}
.title.one .dec,
.title.two .dec {
	display: block;
	margin-top: 1rem;
	font-size: 1.6rem;
	text-transform: uppercase;}
.title.two {
	margin: 3rem auto;
	padding-bottom: 1rem;
	text-align: center;}
.title.two:after {
	margin: 2rem auto 1rem; 
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background: url(../images/bg/bar.png) no-repeat center center;}

/*==================================
                 圖片
====================================*/
/*== 16:9 ==*/
figure.img_16by9 {
  position: relative;
  margin-bottom: 0;  
  overflow: hidden;  
  width: 100%;
  height: 0;
  padding-top: 56.25%;/* 16:9 */}
figure.img_16by9 img {
  display: block;	
	margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
	-webkit-backface-visibility: hidden;}

/*==================================
                Button
====================================*/
@media (max-width: 480px) {
	.d-xs-block {
		margin-top: 1rem;
		display: block;
		width: 100%;}}

.btn_custom1 {
	margin: 2rem auto;
	padding: 1rem 2rem;
	background-color: #FFF;
  font-size: 2rem;
	border-radius: 3rem;}
.btn_custom1:hover,
.btn_custom1:focus {
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);}
.btn_custom1 i {
	-webkit-transition: .3s;
	transition: .3s;}
.btn_custom1:hover i {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);}

.btn_custom2 {
	position: relative;
	padding: .25rem .5rem;
	font-size: 1.6rem;
	line-height: 2;
	color: #FFF;
	background-color: hsla(218, 56%, 44%, 1);
	background-color: var(--primary);
	border-radius: .3rem;}
.btn_custom2:hover,
.btn_custom2:focus {
	color: #FFF;
	background-color: hsla(218, 56%, 35%, 1);}


/*==================================
                Input
====================================*/
.form-control {
	font-size: 1.8rem;}

/*==================================
               Pagination
====================================*/
.pagination {
	margin: 5rem auto;}
.pagination-lg .page-link {
  font-size: 1.6rem;}
@media (max-width: 480px) {
	.pagination-lg .page-link {
		padding: .75rem;}}
.page-link {
	margin: auto .5rem;	
	color: var(--primary);
	border: none;
	border-radius: .5rem;}
.page-item.active .page-link {
	background-color: #1d2023;}
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
	background-color: #EEE;
	color: #666;}
.pagination .page-item.disabled {
	cursor: not-allowed;}
.pagination .page-item.disabled .page-link {
	color: #BBB;
	pointer-events: none;}
.pagination .page-item:not(.active) .page-link:hover {
	color: var(--primary);}

/*==================================
                Slick
====================================*/
/*------------------------
           shown
--------------------------*/
/*== 去閃退 ==*/
.slick_banner {
	margin-top: 9.5rem;
  /*opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;*/}
/*.slick_banner.slick-initialized {
  visibility: visible;
  opacity: 1;}*/
@media (max-width: 992px) {
	.slick_banner {
		margin-top: 8.3rem;}}

/*==================================
              Headroom.js
====================================*/
.headroom {
  will-change: transform;
  transition: transform 200ms;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;}
.headroom--pinned {
  transform: translateY(0%);}
.headroom--unpinned {
  transform: translateY(-100%);}

/*==================================
                Modal
====================================*/
.modal .btn {
	font-size: 1.6rem;}


/*=================================================================
                              Header
=================================================================*/
header {
	position: relative;
	box-shadow: 0 0 10px 0 hsla(0, 0%, 0%, 0.1);}

#mainNav {
	position: fixed;
	z-index: 10;
	/*right: 0;*/
	left: 0;
	top: 0;
	width: 100vw;
	width: 100vw;
	background-color: #FFF;
	box-shadow: 0 0 10px 0 hsla(0, 0%, 0%, 0.1);}
#mainNav > div {
	position: relative;}

/*==================================
                Logo
====================================*/
.header_logo {
	margin: 0;}
.header_logo img {
	width: 36rem;}
@media (max-width: 992px) {
	.header_logo img {
		width: 27rem;}}


/*==================================
              Top Link
====================================*/
.top_link {
	position: absolute;
	right: 2%;
	top: 15%;}
@media (max-width: 992px) {
	.top_link {
		display: none;}}
.top_link ul li {
	float: left;
	padding: 0 1rem;
	color: #666;}
	.top_link ul li:not(:last-child) {
		border-right: 1px solid #333;}
.top_link ul li a {
	font-size: 1.6rem;}

.top_link-m {
	display: none;}
@media (max-width: 992px) {
	.top_link-m {
		display: block;
		margin-top: 1rem;}
	.top_link-m ul li {
		display: inline-block;
    padding: .5rem 0;		
		background-color: #DDD;
    text-align: center;
    width: calc( 100% / 3 - .25rem);}}

/*==================================
                Menu
====================================*/
/*------------------------
           第一層
--------------------------*/
.navbar-collapse {
	align-self: flex-end;}
.dropdown .dropdown-toggle {
	position: relative;
	padding-bottom: 0;}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
	margin: auto 1.5rem;	
	padding-right: .5rem;
	padding-left: .5rem;
 -webkit-transition: .1s;
 transition: .1s;}
.nav-item:hover,
.nav-item:hover .nav-link {
	color: #FFF;
	background-color: hsla(218, 56%, 44%, 1);
	background-color: var(--primary);}
.dropdown:hover>.dropdown-menu {
  display: block;}
.navbar-nav ul li:last-child .dropdown-menu {
	left: auto;
	right: 0;}}

/*------------------------
           第二層
--------------------------*/
.dropdown .dropdown-menu a {
	padding: 1rem 2.5rem;}
.dropdown .dropdown-menu a:hover,
.dropdown .dropdown-menu a:focus {
	color: #FFF;
	background-color: hsla(218, 56%, 44%, 1);
	background-color: var(--primary);}
#mainNav .navbar-nav .dropdown:last-child .dropdown-menu {
	left: auto;
	right: 0;}

@media (max-width: 992px) {
	.navbar {
		padding-bottom: 1rem;}
	.navbar-nav ul {
		width: 100%;}
	.nav-item .nav-link,
	.dropdown .dropdown-toggle {
		margin: 1rem auto .5rem;	
		position: relative;
		font-weight: 600;
		letter-spacing: .2rem;
		border-bottom: 1px solid #DDD;}
	.dropdown .dropdown-toggle[aria-expanded="true"] {
		background-color: #F8F8F8;}
	.dropdown .dropdown-toggle::after {
		position: absolute;
		right: 2%;
		top: 50%;}
	.dropdown-menu {
		display: block;
    float: none;
    position: static;
    padding: 0;
    border: none;}
  .navbar-nav ul li:last-child .dropdown-menu {
  	border: none;}
  .dropdown-menu.show{
    max-height: 50rem;}
  .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .3s;
    transition: max-height .3s;}
  .dropdown .dropdown-menu a {
  	padding: 1rem;
  	padding-left: 1.5rem;}}

/*=================================================================
                              跑馬燈
=================================================================*/
.seciton_marquee {
	margin: 2rem auto;
	position: relative;}
.simple-marquee-container {
	position: relative;	
	display: inline-block;
	width: 100%;
	height: 7rem;
  line-height: 7rem;
  background-color: #FFF;
  -webkit-box-shadow: 0 .5rem 1rem hsla(0, 0%, 0%, 0.15);
  box-shadow: 0 .5rem 1rem hsla(0, 0%, 0%, 0.15);
  overflow: hidden;}
.seciton_marquee:before {
  z-index: 2;
  content: '\f0a1';
  position: absolute;  
  top: 0;
  left: -0.5rem;
  width: 7rem;
  height: 7rem;
  font: 700 3rem/2.5 "Font Awesome 5 Free"; 
  text-align: center;
	color: #FFF;
	background-color: hsla(14, 100%, 66%, 1);}

@media (max-width: 480px) {
	.seciton_marquee:before {
	  left: 1rem;
	  width: 7rem;
	  height: 7rem;
	  line-height: 2.5;
		border-radius: 0;
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);}}
.simple-marquee-container .marquee, 
.simple-marquee-container *[class^="marquee"] {
	position:absolute;	
	display: inline-block;
	white-space: nowrap;}
.simple-marquee-container .marquee-content-items {
  display: inline-block;
  margin: 0;  
  padding: 5px;
  font-size: 1.8rem;
  height: 7rem;
  line-height: 7rem;
  position: relative;}
.simple-marquee-container .marquee-content-items li {
  display: inline-block;
	font-weight: normal;}
.marquee-content-items li:after {
  content: "|";
  margin: 0 3rem;}


/*=================================================================
                             如何申請
=================================================================*/
.section_apply a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	margin: auto;	
	margin-bottom: 2rem;
	width: 15rem;
	height: 15rem;
	border-radius: 50%;}
.section_apply .column {
	padding: 1rem;}
.section_apply .column:hover,
.section_apply .column:focus {
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);
	-webkit-box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.15);
	box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.15);}
.section_apply a img {
	margin: auto;
	width: 10rem;}
.section_apply .circle01 { background-color: #fed86d; }
.section_apply .circle02 { background-color: #e9817f; }
.section_apply .circle03 { background-color: #7ddda1; }
.section_apply .circle04 { background-color: #77b1dd; }
.section_apply .circle05 { background-color: #b8a2cf; }
.section_apply .apple_title {
	font-size: 1.8rem;
	text-align: center;}


/*=================================================================
                       		計畫公告/活動快訊
=================================================================*/
.section_news {
	background: url(../images/bg/bg-03.jpg) no-repeat scroll 50% 50% / cover;}
.section_news .block {
	padding: 5rem 5.2%;}
.section_news .block.one { background-color: hsla(8, 100%, 65%, 0.8); }
.section_news .block.two { background-color: hsla(42, 100%, 50%, 0.8); }
.section_news ul {
	padding: 2rem;
	background-color: #FFF;}
.section_news ul li {
	padding: 0 1rem;
	border-bottom: 1px dashed #DDD;
  -webkit-transition: .3s;
  transition: .3s;}
  .section_news ul li:hover {
  	background-color: #EEE;}
.section_news ul li h3 {
	position: relative;
	margin-bottom: 0;
	padding: 1rem 0;
	font-size: 1.8rem;
	overflow: hidden;}
.section_news ul li h3:after {
	content: '\f105';
	font-family:"Font Awesome 5 Free";
	font-weight: 700;
	position: absolute;
	right: -5%;
	-webkit-transition: .3s;
  transition: .3s;}
	.section_news ul li h3:hover:after {
		right: 1rem;}
	@media (max-width: 992px) {
	.section_news ul li h3:after {
		right: 0;}}
.section_news ul li h3 a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}
.section_news ul li time {
	display: inline-block;
	min-width: 10rem;
	color: #777;}
.section_news ul li p {
	display: inline-block;
	margin-bottom: 0;
	max-width: calc( 100% - 15rem);
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	vertical-align: text-top;
	-webkit-transition: .3s;
  transition: .3s;}
  @media (min-width: 992px) {
	.section_news ul li:hover p {
		padding-left: 1rem;
		color: hsla(218, 56%, 44%, 1);
		color: var(--primary);}}
	@media (max-width: 480px) {
		.section_news ul li p {
			max-width: calc( 100% - 5rem);}}


/*=================================================================
                       				下載專區
=================================================================*/
.section_download {
	background: url(../images/bg/bg-04.jpg) no-repeat scroll 50% 50% / cover;}
.section_download .block {
	padding: 5rem 5.2%;}
.section_download ul {
	margin: auto;
	margin-top: 2rem;
	width: 40vw;
	max-width: 130rem;}
@media (max-width: 992px) {
	.section_download ul {
		width: 60vw;}}

@media (max-width: 480px) {
	.section_download ul {
		width: 90vw;}}

.section_download ul li {
	position: relative;
	margin-bottom: 1rem;
	padding: 1rem;
	background-color: #FFF;
	border-left: .5rem solid hsla(43, 100%, 59%, 1);
	border-bottom: .3rem solid #CCC;
	overflow: hidden;}
.section_download ul li:after {
  position: absolute;
  top: 50%;
  right: -7%;
  content: '\f054';
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  color: #FFF;
  background-color: #666;
  border-radius: 50%;
	-webkit-transition: .3s;
	transition: .3s;
	-webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);}
.section_download ul li:hover:after {
	right: 2%;}
@media (max-width: 992px) {
	.section_download ul li:after {
		right: 2%;}}
.section_download ul li a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-content: center;}
.section_download ul li a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}

.section_download ul li p {
	display: inline-block;
	margin-bottom: 0;
	max-width: calc( 100% - 15rem);
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	vertical-align: text-top;
	-webkit-transition: .3s;
	transition: .3s;
	overflow: hidden;}
.section_download ul li a:hover p {
	padding-left: 1rem;}


/*=================================================================
                               數字
=================================================================*/
.section_count {
	padding: 3rem 1rem;
	background: url(../images/bg/bg-01.jpg) no-repeat center center;
  background-size: cover;}
.section_count .count {
  display: block;
  font-family: "Oswald";
  color: hsla(218, 56%, 44%, 1);
  color: var(--primary);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;}
.section_count p {
	font-size: 2rem;}
.section_count .unit {
	display: block;
	color: #666;
	font-size: 1.8rem;}

@media (max-width: 992px) {
	.section_count .count {
		font-size: 4.6rem;}}

@media (max-width: 480px) {
	.section_count .count {
		font-size: 3.2rem;}
	.section_count p {
		font-size: 1.8rem;}}


/*=================================================================
                             服務區塊
=================================================================*/
.section_service {
	position: relative;}

@media (min-width: 1200px){
	.section_service:after {
		z-index: -1;
		content: '';
		position: absolute;
	  top: 10%;
    left: 8%;
    width: 100vw;
    height: 30rem;
    background-color: #EEE;}}

.slick_service .card-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;}
.slick_service .card-body h3 {
	margin-bottom: 1rem;}


/*=================================================================
                              友好連結
=================================================================*/
/*== Img Aspect Ratio ==*/
.section_link figure {
  position: relative;  
  overflow: hidden;  
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding-top: 24%;}
.section_link figure img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
  width: 100%;
  height: 100%;}


/*=================================================================
                             Sitemap
=================================================================*/
.section_sitemap {
	margin-bottom: 0;
	background: url(../images/bg/foot_bg.png) repeat;}
@media (max-width: 992px) {
	.section_sitemap {
		padding: 3rem 0;}}

.section_sitemap .sitemap_header {
	position: relative;
  /*margin-top: -1rem;
  margin-bottom: 0;
  width: 100%;
  height: 6.5rem;
  background-color: transparent;
  text-align: center;
  border: none;
  padding: 0;
  margin: 0;*/}
@media (max-width: 992px) {
	.section_sitemap .sitemap_header {
		display: none;}}
.section_sitemap .sitemap_header h3 {
	color: hsla(55, 99%, 50%, 1);}
.section_sitemap .btn-link {
  z-index: 1;	
	position: absolute;
	top: -2rem;
	left: 50%;
  width: 40px;
  height: 40px;
  background-color: #666;
  color: #FFF;
  line-height: 40px;
  border: 1px solid #666;
  border-radius: 50%;
  padding: 0;
  /*margin: 0;
  margin-top: -10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;*/
  overflow: hidden;
  -webkit-transform: rotateZ(540deg);
  transform: rotateZ(540deg);
  -webkit-transition: .3s;
  transition: .3s;}
.section_sitemap .btn-link + div {
	padding: 3rem 0 2rem;}

.section_sitemap .btn-link.collapsed {
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  -webkit-transition: .3s;
  transition: .3s;}

.section_sitemap #sitemap_list h3 {
	padding-bottom: 1rem;}
@media (min-width: 992px) {
	.section_sitemap #sitemap_list h3 {
		display: none;}}
#sitemap_list .column {
	margin-bottom: 1.5rem;}
.section_sitemap h3 {
	color: #fef501;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  margin-bottom: 0;}
.section_sitemap .list-group {
	padding-top: 1rem;
	 border-top: 1px solid #CCC;}
.section_sitemap .list-group-item {
  background-color: transparent;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 30px;
  color: #FFF;
  text-align: center;
  border: none;
  padding: 0;
	-webkit-transition: .3s;
  transition: .3s;}
.section_sitemap .list-group-item:hover,
.section_sitemap .list-group-item:focus {
	padding-left: 1rem;}


/*=================================================================
                               Footer
=================================================================*/
.section_footer { 
  position: relative;
	margin: 0;
	padding: 2rem 0;}
@media (max-width: 992px) {
  .section_footer {
    padding-top: 1rem;
    margin-bottom: 4.5rem;}}
.section_footer a {
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);}

/*==================================
                  左
====================================*/
.section_footer .footer_copyright {
	margin-bottom: 1rem;
	font-size: 1.8rem;}

.footer_info i {
  display: inline-block;
  margin-right: 1rem;
  width: 2rem;
  text-align: center;
  color: hsla(218, 56%, 44%, 1);
	color: var(--primary);}
.footer_info img.map_icon {
  display: inline-block;
  margin: 0 0 5px 5px;
  width: 20px;
  height: 20px;}

.footer_link {
	margin-bottom: 0;}
.footer_link li {
	float: left;}
	.footer_link li:not(:last-child) {
		border-right: 1px solid #333;}
.footer_link li a {
	margin: auto 1rem;
	margin-bottom: 0;
	font-size: 1.6rem;}
	.footer_link li:first-child a {
		margin-left: 0;}
@media (max-width: 480px) {
	.footer_link li a {
		margin: auto .75rem;}}
@media (max-width: 375px) {
	.footer_link li a {
		margin: auto .25rem;}}

/*==================================
                  右
====================================*/
.footer_img a {
	margin: 0 1rem;}
.footer_img .social {
	width: 6rem;}
.footer_img .seal02 {
	width: 6rem;}
.footer_img ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;	
	align-items: center;}
.footer_img ul li {
	margin-top: 3rem;
	float: left;}
.footer_img .brand {
	width: 18rem;}
@media (max-width: 480px) {
	.footer_img ul {
		flex-direction: column;}}

/*=================================================================
                              智能客服
=================================================================*/
/*.chatbot {
	display: inline-block;
	width: 10rem;
	height: 10rem;
	position: fixed;
	right: 2rem;
	bottom: 8rem;}
@media (max-width: 480px) {
	.chatbot {
		right: 3rem;}}
@media (max-width: 375px) {
	.chatbot {
		right: 5rem;}}*/


/*=================================================================
                              TO TOP
=================================================================*/
.scrolltotop {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	-webkit-transform: translateY(2rem);
	transform: translateY(2rem);
	z-index: 992;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: .14s;
	transition: .14s;}
@media (max-width: 480px) {
	.scrolltotop {
		-webkit-transform: translateY(3rem);
		transform: translateY(1rem);
		right: 3rem;
		bottom: 1rem;}}
/*@media (max-width: 375px) {
	.scrolltotop {
		-webkit-transform: translateY(5rem);
		right: 5rem;}}*/
.scrolltotop.scrolltotop-show {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  opacity: 1;}
.scrolltotop .button-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;  
  border: 0;
  color: #FFF;
  background-color: #1d2023;
  text-align: center;
  -webkit-transition: .16s;
  transition: .16s;}
.scrolltotop .button-circle:hover {
	line-height: 30px; }

