/* =========================================================================

==base
==header
==banner
==service
==intro
==footer
==breadcrumb
==privacy
==contact
==news
==pagination + nodata
==cookies
==toast + ckediter
==RWD

========================================================================= */

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

/* wow animation載入預設透明度校正，配合custom.js */
.wow {
	opacity: 0;
}

.cke_editable .wow {
	opacity: 1;
}

/* =========================================================================
==base
========================================================================= */
:root {
	--fs-BNTitle: 52px; 
	--fs-sectionTitle: 42px; 
	--fs-infoTitle: 32px; 
	--fs-itemTitle: 24px; 
	--fs-footerTitle: 22px; 
	--fs-BNTxt: 20px; 
	--fs-headerNav: 20px;
	--fs-sectionSubTitle: 20px;
	--fs-btn: 18px; 
	--fs-normal: 18px; 
}

.my-36 {
	margin: 36px 0;
}

/* ================= ellipsis ================= */
.one-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

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

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

/* ================= btn ================= */
.btn-base {
	display: inline-block;
	padding: 12px 40px;
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
	font-size: var(--fs-btn);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 1px;
	border: 0;
	border-radius: 3px;
  transition: .3s ease-in-out;
}

.btn-base:hover, .btn-base:active {
	background-color: var(--cnvs-orange);
	color: var(--cnvs-white);
}

/* ================= section title ================= */
.section-title {
	text-align: center;
	max-width: 740px;
	margin: 0 auto 48px;
}

.section-title.left {
	text-align: left;
	margin: 0 0 24px;
}

.section-title .txt {
	margin-bottom: 0;
	margin-top: 12px;
	font-size: var(--fs-sectionSubTitle);
	line-height: 2;
	font-weight: 400;
	position: relative;
}

.section-title .title.txt,
.section-title .title {
	color: var(--cnvs-white);
	font-size: var(--fs-sectionTitle);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0;
}

.section-title .txt::after {
	content: '';
	display: block;
	width: 60px;
	height: 2px;
	background-color: var(--cnvs-orange);
	margin: 36px auto 0;
}

.section-title.left .txt::after {
	margin: 24px 0 0;
}

/* ================= item title ================= */
.item-title {
	font-size: var(--fs-itemTitle);
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: 0;
}

/* ================= sidebar title ================= */
.sidebar-title {
	font-size: var(--fs-itemTitle);
	color: var(--cnvs-themecolor);
	line-height: 1.5;
	font-weight: 700;
}

/* ================= info title ================= */
.info-title {
	font-size: var(--fs-infoTitle);
	line-height: 1.5;
	font-weight: 500;
}


/* =========================================================================
==header
========================================================================= */
.top-links::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 24px;
	background-color: var(--cnvs-orange);
}


/* =========================================================================
==banner
========================================================================= */
#slider {
	aspect-ratio: 2000 / 725;
}

.slider-caption h3 {
	font-size: var(--fs-BNTitle);
	text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.07), 0px 4px 4px rgba(0, 0, 0, 0.20);
	line-height: 1.3;
}

.bn-txt {
	font-size: var(--fs-BNTxt);
	line-height: 1.75;
	letter-spacing: 1.5px;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60), 0px 7px 7px rgba(0, 0, 0, 0.10);
}

.swiper-slide-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
}


/* =========================================================================
==service
========================================================================= */
/* ================= index ================= */
.service-section {
	padding-bottom: 155px;
}

.negetive-margin { 
	margin-top: -155px; 
}

.negetive-margin .card {
	background-color: var(--cnvs-themecolor);
	border-radius: 12px;
	transition: .3s ease-in-out;
}

.negetive-margin .card:hover {
	background-color: var(--cnvs-orange);
}

.negetive-margin img {
	aspect-ratio: 1000 / 625;
	transition: .3s ease-in-out;
}

.negetive-margin .card:hover img {
	transform: scale(1.05);
}

.negetive-margin .owl-carousel .owl-stage,
.negetive-margin .owl-carousel .owl-item {
	display: flex;
}


/* =========================================================================
==intro
========================================================================= */
/* ================= index ================= */
.index-intro-section .txt-wrap + .txt-wrap {
	margin-top: 36px;
}

/* ================= sidebar ================= */
.intro-sidebar {
	top: 110px;
}

.intro-sidebar ul {
	background-color: var(--cnvs-bgdeco);
}

.intro-sidebar li:not(:last-child) a {
	border-bottom: 1px solid var(--cnvs-bgcolor);
}

.intro-sidebar a i {
	font-size: 12px;
	transform: translateY(1px);
}

/* ================= history ================= */
.history_6__timeline-wrapper ul {
  margin-bottom: 0;
}

.history_6__time-item:last-child {
  margin-bottom: 0;
}

.history_6__time-item {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 32px;
}

.history_6__time-item::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 30%;
  height: 1px;
  background: var(--cnvs-themecolor);
}

.history_6__time-year {
  width: 20%;
  position: relative;
  padding: 10px;
  text-align: center;
  background-color: var(--cnvs-themecolor);
  color: var(--cnvs-white);
  height: fit-content;
	border-radius: 3px;
}

.history_6__time-txt {
  position: relative;
  margin-left: 10%;
  width: 70%;
  padding: 16px 24px;
	background: var(--cnvs-bgdeco);
	border-radius: 3px;
}

/* ================= certificate ================= */
.cer-wrap > div:nth-child(even) {
	animation-delay: .1s;
}


/* =========================================================================
==footer
========================================================================= */
.footer-txt {
	font-size: var(--fs-normal);
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--cnvs-txtcolor);
	line-height: 2;
}

.footer-title {
	font-size: var(--fs-footerTitle);
	line-height: 1.5;
	font-weight: 700;
	color: var(--cnvs-themecolor);
	letter-spacing: 1px;
	margin-bottom: 0;
}

.footer-title::after {
	content: '';
	display: block;
	margin: 16px 0;
	width: 38px;
	height: 1px;
	background-color: var(--cnvs-orange);
}

.widget a {
	display: block;
	max-width: 285px;
	line-height: 1.5;
}

.php_mail {
	word-break: break-all;
}


/* =========================================================================
==breadcrumb
========================================================================= */
.breadcrumb-title {
	color: var(--cnvs-white);
	font-size: var(--fs-sectionTitle);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 12px;
}

.breadcrumb-wrap li a:after {
	content: '/';
	display: inline-block;
	margin: 0 16px;
}


/* =========================================================================
==privacy
========================================================================= */
.feature-box {
	--cnvs-featured-box-icon: 3.3rem;
	--cnvs-featured-box-icon-size: 1.5rem;
}


/* =========================================================================
==contact
========================================================================= */
.contact-link {
	text-decoration: underline;
	color: var(--cnvs-white);
}

.contact-link:hover,
.contact-link:active {
	color: var(--cnvs-color-line);
}

.contact-txt-wrap {
	background-color: var(--cnvs-bgdeco);
}

.form-check-input {
	transform: translateY(5px);
}

.privacy-line {
	color: var(--cnvs-themecolor);
}

.privacy-line:hover {
	color: var(--cnvs-orange);
}

.contact-form-wrap {
	background-color: var(--cnvs-bgdeeper);
}

.form-control::placeholder {
	color: var(--cnvs-contrast-600);
}

.contact-map iframe {
	height: 400px;
}

.sending {
	display: flex;
}


/* =========================================================================
==sidebar
========================================================================= */
/* ================= category ================= */
.sidebar-wrap {
	top: 110px;
}

.sidebar-wrap .search-wrap,
.sidebar-wrap .cate-wrap,
.sidebar-wrap .hot-wrap {
	background-color: var(--cnvs-bgdeco);
	border-top: 4px solid var(--cnvs-bgdeeper);
}

.sidebar-wrap .cate-wrap li a {
	border-radius: 3px;
}

.sidebar-wrap li a:hover {
	background-color: var(--cnvs-bgcolor);
	color: var(--cnvs-txtcolor);
}

.sidebar-wrap li.active a,
.sidebar-wrap li.active a:hover {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.sidebar-wrap a i {
	font-size: 12px;
	transform: translateY(1px);
}

/* ================= search ================= */
.sidebar-wrap .search-wrap input {
	border: 0;
	border-radius: 3px;
	padding: 8px 50px 8px 16px;
}

.sidebar-wrap .search-wrap input::placeholder {
	color: var(--cnvs-contrast-600);
}

.sidebar-wrap .search-wrap button:hover {
	color: var(--cnvs-orange) !important;
}

/* ================= 兩層 ================= */
.service-sidebar li {
	border-radius: 3px;
}

.service-sidebar > li:not(:last-child) {
	border-bottom: 1px solid var(--cnvs-bgcolor);
}

.service-sidebar .cate-active,
.service-sidebar .cate-active .toggle-title:hover {
	background-color: var(--cnvs-themecolor);
}

.service-sidebar .cate-active .toggle-title,
.service-sidebar .cate-active .toggle-closed {
	color: var(--cnvs-white);
}

.toggle-header {
	width: 60px;
	justify-content: center;
}

.service-sidebar .cate-active ul {
	background-color: var(--cnvs-bgdeco);
}

.service-sidebar .toggle-content i {
	transform: translateY(8px);
}

.service-sidebar .toggle-content .color-orange {
	background-color: var(--cnvs-bgdeco);
}


/* =========================================================================
==news
========================================================================= */
/* ================= hot ================= */
.hot-wrap .hit {
	font-size: 15px;
}

.hot-wrap .hot-title {
	font-size: var(--fs-normal);
	color: var(--cnvs-white);
	line-height: 1.5;
	margin-bottom: 0;
	font-weight: 700;
}

.hot-wrap .hot-title a {
	color: var(--cnvs-white);
	transition: .3s ease-in-out;
}

.hot-wrap .hot-title:hover,
.hot-wrap .hot-title:active,
.hot-wrap .hot-title a:hover,
.hot-wrap .hot-title a:active {
	color: var(--cnvs-orange);
	background-color: transparent;
}

/* ================= list ================= */
.news-item:nth-child(even) {
	animation-delay: .1s;
}

.news-item .item-title,
.news-item .item-title a {
	color: var(--cnvs-white);
	transition: .3s ease-in-out;
	height: 72px;
}

.news-item .item-title:hover,
.news-item .item-title:active,
.news-item .item-title a:hover,
.news-item .item-title a:active {
	color: var(--cnvs-orange);
}

.news-item .news-img-wrap {
	border-radius: 6px 6px 0 0;
}

.news-img-wrap {
	aspect-ratio: 1000 / 625;
}

.news-img-wrap::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.3);
	z-index: 1;
	opacity: 0;
	transition: .3s ease-in-out;
}

.news-img-wrap:hover::before {
	opacity: 1;
}

.news-img-wrap img {
	transition: .3s ease-in-out;
}

.news-img-wrap:hover img {
	transform: scale(1.05);
}

.news-item .txt-wrap {
	border-radius: 0 0 6px 6px;
	background-color: var(--cnvs-bgdeco);
}

.news-date::after {
	content: "";
	border-right: 2px dotted var(--cnvs-themecolor);
	width: 1px;
	height: 18px;
	display: inline-block;
	margin: 0 12px;
	transform: translateY(2px);
}

.news-tag {
	color: var(--cnvs-themecolor);
}

.news-tag:hover,
.news-tag:active {
	color: var(--cnvs-orange);
}

.news-tag i {
	font-size: 24px;
	transform: translateY(2px);
}

.news-item .content {
	height: 72px;
}

/* ================= share ================= */
.share-wrap a {
	color: var(--cnvs-white);
}

.share-wrap a:hover, .share-wrap a:active {
	color: var(--cnvs-orange);
}


/* =========================================================================
==pagination + nodata
========================================================================= */
.page-item {
	margin: 0 4px;
}

.page-link {
	width: 44px;
	height: 44px;
}

.page-link.arrow {
	background-color: transparent;
	color: var(--cnvs-txtcolor);
}

.page-link.arrow:hover,
.page-link.arrow:active {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.page-link.arrow i {
	font-size: 14px;
}

.no-data {
	border: 1px solid var(--cnvs-txtcolor);
}


/* =========================================================================
==cookies
========================================================================= */
.alert {
	background-color: var(--cnvs-bgdeco);
	box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
}

.cookies-link {
	color: var(--cnvs-themecolor);
}


/* =========================================================================
==toast + ckediter
========================================================================= */
.bl_sweetnew {
	color: var(--cnvs-black);
}

body.cke_editable:not(.stretched) {
	background-color: var(--cnvs-bgcolor);
}

/* =========================================================================
==RWD
========================================================================= */
@media (min-width:768px) {
	.w-md-50 {
		width: 50% !important;
	}
}

@media (min-width:1600px) {
	.ps-xxxl-6 {
		padding-left: 5rem !important;
	}

	.row-cols-xxxl-2 > * {
		flex: 0 0 auto;
    width: 50%;
	}

	.mb-xxxl-n3 {
		margin-bottom: -1rem !important;
	}

	.d-xxxl-flex {
		display: flex !important;
	}

	.flex-xxxl-row-reverse {
		flex-direction: row-reverse !important;
	}

	.float-xxxl-none {
		float: none !important;
	}

	.w-xxxl-50 {
		width: 50% !important;
	}
}

@media (max-width:1599px) {
	/* ================= header ================= */
	:root {
		--cnvs-header-height: 80px;
	}

	.header-wrap-clone {
		height: 123px;
	}

	.is-expanded-menu .menu-link {
		--cnvs-primary-menu-padding-x: 12px;
	}

	.is-expanded-menu .style-3 .menu-container > .menu-item > .menu-link {
		--cnvs-primary-menu-padding-y: 8px;
	}

	.top-links-item > a {
		padding: 8px 12px;
	}
}

@media (max-width:1399px) {
	/* ================= base ================= */
	:root {
		--fs-BNTitle: 46px; 
		--fs-sectionTitle: 36px; 
		--fs-itemTitle: 22px; 
		--fs-footerTitle: 20px; 
		--fs-BNTxt: 18px; 
		--fs-headerNav: 18px;
		--fs-sectionSubTitle: 18px;
		--fs-btn: 17px; 
		--fs-normal: 17px; 
		
		--cnvs-header-height: 70px;
		--cnvs-section-margin: 60px;
	}
	
	/* ================= header ================= */
	.is-expanded-menu .menu-container > .menu-item:not(:first-child) {
		margin-left: 0;
	}

	.is-expanded-menu .style-3 .menu-container > .menu-item > .menu-link {
		margin: 28px 0;
	}

	.is-expanded-menu .menu-link {
		--cnvs-primary-menu-padding-x: 8px;
	}

	.top-links-item > a {
		margin: 28px 0;
	}

	.header-misc {
		margin-left: 8px;
	}

	.header-misc-icon {
		margin: 0 4px;
	}

	.header-wrap-clone {
		height: 100px;
	}

	/* ================= footer ================= */
	.widget a {
		max-width: 200px;
	}

	/* ================= breadcrumb ================= */
	.breadcrumb-title {
		margin-bottom: 8px;
	}

	/* ================= news ================= */
	.news-item .item-title, .news-item .item-title a {
		height: 66px;
	}
}

@media (max-width:1199px) {
	/* ================= base ================= */
	:root {
		--fs-infoTitle: 30px;

		--cnvs-header-height: 60px;
	}

	/* ================= header ================= */
	.header-wrap-clone {
		height: 77px;
	}

	#header-wrap {
		padding: 8px 0;
	}

	.primary-menu-trigger {
		background-color: var(--cnvs-themecolor);
		border-radius: 3px;
		padding: 8px 12px;
	}

	.header-misc {
		margin: 0;
	}

	.header-misc-icon {
		margin: 0 8px;
	}

	.header-misc-icon > a {
		padding: 8px 12px;
		background-color: transparent !important;
		color: var(--cnvs-txtcolor);
	}

	.header-misc-icon > a:hover {
		color: var(--cnvs-orange);
	}

	.top-links-item > a {
		margin: 0;
	}

	.top-links::before {
		right: 0;
	}
	
	/* ================= footer ================= */
	#footer .footer-widgets-wrap {
		padding: 64px 0;
	}

	/* ================= intro ================= */
	.intro-sidebar {
		top: 36px;
	}

	/* ================= sidebar ================= */
	.sidebar-wrap {
		top: 36px;
	}
}

@media (max-width:991px) {
	/* ================= base ================= */
	:root {
		--fs-BNTitle: 38px; 
		--fs-sectionTitle: 32px; 
		--fs-infoTitle: 28px;
		--fs-itemTitle: 20px;
	}

	.my-36 {
		margin: 24px 0;
	}

	.btn-base {
		padding: 8px 32px;
	}

	.section-title {
		margin: 0 auto 36px;
	}

	.section-title .txt::after {
		margin: 24px auto 0;
	}

	/* ================= header ================= */
	.menu-link {
		--cnvs-primary-menu-padding-y: 12px;
		--cnvs-primary-menu-padding-x: 4px;
	}

	/* ================= intro ================= */
	.index-intro-section .txt-wrap + .txt-wrap {
		margin-top: 24px;
	}

	/* ================= footer ================= */
	.php_footer_logo {
		width: 250px;
	}

	/* ================= contact ================= */
	.contact-section .contact-txt-wrap,
	.contact-section .contact-form-wrap {
		width: calc(100% - 24px);
		margin-left: 12px;
	}

	.contact-map iframe {
		height: 350px;
	}

	/* ================= news ================= */
	.news-item .item-title, .news-item .item-title a {
		height: 60px;
	}

	/* ================= pagination + nodata ================= */
	.page-link {
		width: 40px;
		height: 40px;
	}
}

@media (max-width:767px) {
	/* ================= base ================= */
	:root {
		--fs-BNTitle: 32px; 
		--fs-sectionTitle: 32px; 
		--fs-headerNav: 17px;
		--fs-sectionSubTitle: 17px;

		--cnvs-section-margin: 40px;
		--cnvs-header-height: 50px;
		--cnvs-swiper-dots-position-bottom: 10px;
	}

	.section-title {
		margin: 0 auto 24px;
	}

	.section-title.left {
		margin: 0 0 16px;
	}

	.section-title .txt {
		margin-top: 8px;
	}

	.section-title .txt::after {
		margin: 16px auto 0;
	}

	.section-title.left .txt::after {
		margin: 16px 0 0;
	}

	/* ================= header ================= */
	.header-wrap-clone {
		height: 67px;
	}

	/* ================= banner ================= */
	.slider-caption {
		bottom: 8px;
	}

	/* ================= footer ================= */
	.col-padding {
		padding: 40px;
	}

	#footer .footer-widgets-wrap {
		padding: 40px 0;
	}

	#footer .footer-widgets-wrap > div {
		padding-right: 28px;
		padding-left: 28px;
	}

	/* ================= breadcrumb ================= */
	.breadcrumb-title {
		text-align: center;
	}

	.breadcrumb-wrap ul {
		text-align: center;
	}

	/* ================= intro ================= */
	.history_6__time-year {
    width: 25%;
  }

  .history_6__time-txt {
    width: 65%;
    padding: 10px 0px 10px 20px;
  }

  .history_6__time-item::before {
    top: 23px;
    width: 35%;
  }
}

@media (max-width:575px) {
	:root {
		--fs-infoTitle: 26px;
		--fs-BNTitle: 20px;

		--cnvs-header-height: 48px;
	}

	/* ================= header ================= */
	.header-wrap-clone {
		height: 65px;
	}

	.primary-menu-trigger {
		padding: 6px 10px;
	}

	.top-links-item > a {
		padding: 4px 8px;
		font-size: 16px;
	}

	.top-links-item > a > i.sub-menu-indicator {
		margin: 0 !important;
		font-size: 12px;
	}

	.header-misc-icon > a {
		font-size: 16px;
	}

	/* ================= banner ================= */
	.slider-caption {
		bottom: 10px;
	}

	.slider-caption .btn-base {
		padding: 6px 24px;
		font-size: 14px;
	}

	/* ================= footer ================= */
	.col-padding {
		padding: 40px 24px;
	}

	#footer .footer-widgets-wrap > div {
		padding-right: 12px;
		padding-left: 12px;
	}

	.php_footer_logo {
		width: 200px;
	}

	.widget a {
		max-width: 100%;
	}

	/* ================= breadcrumb ================= */
	.breadcrumb-title {
		margin-bottom: 4px;
	}

	/* ================= privacy ================= */
	.feature-box {
		--cnvs-featured-box-icon: 3rem;
	}

	.fbox-content {
		padding: 0 12px 0 6px;
	}

	/* ================= intro ================= */
		.history_6__time-year {
    width: 100%;
    padding: 5px;
		border-radius: 3px 3px 0 0;
  }

  .history_6__time-item::before {
    top: 17px;
    width: 33%;
  }

  .history_6__time-txt {
    width: 100%;
    padding: 24px;
    margin-left: 0;
		border-radius: 0 0 3px 3px;
  }
}