/*-----------------------------------------------------------------
== root
== Slider Area
== index
== breadcrumb 
== intro
== intro certificate 
== service
== CTA
== portfolio / info 
== news 
== contact 
== footer 
== cookie 
== SNS 
== RWD

-----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*-----------------------------------------------------------------
== root
-----------------------------------------------------------------*/
/* 交由 SmoothScroll 外掛處理滾動平滑，避免與 CSS scroll-behavior 衝突 */
html {
	scroll-behavior: auto;
}

:root {
	--cnvs-themecolor: #191970;
	--cnvs-themecolor-rgb: 25, 25, 112;

	--cnvs-box-border: #DCE0EA;
	--cnvs-box-border-rgb: 220, 224, 234;

	--cnvs-hover: #5656BE;
	--cnvs-hover-rgb: 86, 86, 190;

	--cnvs-secondary: #0A1F44;
	--cnvs-secondary-rgb: 10, 31, 68;

	--cnvs-success: #28A745;
	--cnvs-success-rgb: 40, 167, 69;

	--cnvs-danger: #DC3545;
	--cnvs-danger-rgb: 220, 53, 69;

	--cnvs-info: #17A2B8;
	--cnvs-info-rgb: 23, 162, 184;

	--cnvs-themesubcolor: #78AFB2;
	--cnvs-themesubcolor-rgb: 120, 175, 178;

	--cnvs-themehovercolor: #333333;
	--cnvs-themehovercolor-rgb: 51, 51, 51;

	--cnvs-themedarkcolor: #558a8d;
	--cnvs-themehovercolor-rgb: 85, 138, 141;

	--cnvs-primary-font: 'Poppins', 'Noto Sans TC', sans-serif;
	--cnvs-body-font: 'Poppins', 'Noto Sans TC', sans-serif;
	--cnvs-secondary-font: var(--cnvs-body-font);

	--cnvs-header-bg: var(--bs-white);
	--cnvs-section-bg: #F6F7FB;
	--cnvs-body-bg: #F6F7FB;

	--cnvs-header-height: 100px;
	--cnvs-header-height-lg: 100px;
	--cnvs-header-height-md: 75px;
	--cnvs-header-height-sm: 60px;

	--cnvs-font-size-title: 40px;
	--cnvs-font-size-body: 18px;
	--cnvs-letter-spacing: 1px;
}

@media screen and (min-width: 992px) {
	.header-wrap-clone {
		height: calc(var(--cnvs-header-height-lg) + 1px);
	}
}

@media screen and (max-width: 767px) {
	.header-wrap-clone {
		height: calc(var(--cnvs-header-height-md) + 1px);
	}
}

@media screen and (max-width: 767px) {
	.header-wrap-clone {
		height: calc(var(--cnvs-header-height-sm) + 1px);
	}
}

body {
	letter-spacing: var(--cnvs-letter-spacing);
}

#header {
	--cnvs-primary-menu-font-weight: 400;
	--cnvs-primary-menu-font-size: var(--cnvs-font-size-body);
	--cnvs-primary-menu-tt: none;
	--cnvs-primary-menu-ls: 1;
	--cnvs-primary-menu-submenu-font-size: var(--cnvs-font-size-body);
	--cnvs-primary-menu-submenu-font-weight: 400;
	--cnvs-primary-menu-submenu-hover-font-weight: 500;
	--cnvs-primary-menu-submenu-tt: none;

	--cnvs-primary-menu-hover-color: var(--cnvs-themehovercolor);
	--cnvs-top-search-placeholder: #f8f9fa;

	--cnvs-header-border-color: var(--cnvs-box-border);
}

.is-expanded-menu .mega-menu-style-2 .mega-menu-title>.menu-link {
	font-size: calc(var(--cnvs-primary-menu-submenu-font-size) * 0.9);
}

#logo a .logo-default {
	max-width: 200px;
}

.top-links-container {
	padding-left: 0;
}

.top-links-item a {
	color: #FFF;
}

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

.top-links-item:hover>a {
	color: var(--cnvs-themehovercolor);
}

.top-links-item>a>i.sub-menu-indicator {
	display: none;
}

.top-links-sub-menu {
	width: 110px;
	padding-left: 0;
	background: #FFF;
}

.top-links-sub-menu .top-links-item {
	padding: 8px 4px;
	transition: all .3s ease-out;
}

.top-links-sub-menu .top-links-item a {
	color: #000;
}

.top-links-sub-menu .top-links-item:hover {
	background-color: rgba(0, 0, 0, 0.024);
	padding-left: 8px;
}

.top-links-item:hover {
	background-color: unset;
}

#top-search a:hover {
	color: var(--cnvs-themehovercolor);
}

.top-search-form .form-control {
	font-size: calc(var(--cnvs-font-size-body) + 2px);
	font-weight: 400;
	letter-spacing: 1px;
}

.top-search-form .form-control::-moz-placeholder {
	color: var(--cnvs-top-search-placeholder);
	opacity: .75;
}

.top-search-form .form-control::placeholder {
	color: var(--cnvs-top-search-placeholder);
	opacity: .75;
}

.primary-menu-open #header-wrap {
	background-color: var(--cnvs-header-bg);
}

.button::before {
	display: inline-flex;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100px;
	background: linear-gradient(to right, var(--cnvs-secondary), var(--cnvs-themecolor));
	transition: opacity .3s ease-out;
}

.button {
	position: relative;
	display: inline-flex;
	gap: 16px;
	font-size: var(--cnvs-font-size-body);
	line-height: 1.75;
	padding: 12px 36px;
	color: var(--bs-white);
	border: 4px solid var(--cnvs-themecolor);
	border-radius: 100px;
	background: linear-gradient(to right, var(--cnvs-hover), var(--cnvs-themecolor));
	transition: all .3s ease-out;
	z-index: 1;
}

.button span {
	position: relative;
	z-index: 1;
}

.button i.fa-arrow-right {
	transform: rotate(-45deg);
	transition: transform .3s ease-out;
}

.button.white::before {
	background: linear-gradient(to right, #DEDEDE, #FFFFFF);
}

.button.white {
	border: 4px solid var(--bs-white);
}

.button.white span,
.button.white i {
	color: var(--cnvs-themecolor);
}

.button:hover::before {
	opacity: 0;
}

.button:hover {
	border: 4px solid var(--cnvs-hover);
	background: linear-gradient(to right, var(--cnvs-hover), var(--cnvs-themecolor));
}

.button:hover span,
.button:hover i {
	color: var(--bs-white);
	transform: rotate(0);
}

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

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

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

/*----------------------------------------------------------------- 
== Slider Area
-----------------------------------------------------------------*/
:root {
	--cnvs-slider-caption-width: 600px;
	--cnvs-slider-caption-font-weight: 400;
}

.not-animated,
[mob-animate]:not(.animated) {
	opacity: 0;
}

#slider.swiper_wrapper,
.banner {
	position: relative;
	background-color: #F6F7FB;
	aspect-ratio: 1920 / 900;
	z-index: 1;
}

.banner-img {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center;
}

#slider-mobile.swiper_wrapper,
.banner-mobile {
	position: relative;
	background-color: #F6F7FB;
	aspect-ratio: 768 / 900;
	/* min-height: 100vh; */
	z-index: 1;
}

/* .swiper-slide-bg::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
} */

.slider-tag {
	position: relative;
	display: inline-block;
	font-size: calc(var(--cnvs-font-size-body) + 2px);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.75;
	padding: 4px 16px 4px 36px;
	border-radius: 8px;
	border: 1px solid var(--cnvs-box-border);
	background-color: var(--bs-white);
	margin-bottom: 24px;
	color: #000;
}

.slider-tag .dot {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--cnvs-success);
}

.slider-caption h3 {
	text-transform: none;
	font-size: 60px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.3;
	margin-bottom: 0;
	color: var(--cnvs-themecolor);
	/* text-align: center; */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.slider-caption p {
	font-size: calc(var(--cnvs-font-size-body) + 2px);
	letter-spacing: 1px;
	line-height: 1.75;
	margin-top: 24px;
	margin-bottom: 0;
	/* text-align: center; */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.slider-button {
	margin: 24px 0 0;
}

.swiper-pagination span:hover,
.swiper-pagination span.swiper-pagination-bullet-active {
	background-color: var(--cnvs-themecolor) !important;
}

.swiper-pagination span {
	border: 1px solid var(--cnvs-themecolor);
}

@media screen and (min-width: 992px) {
	.swiper-pagination {
		display: none;
	}
}

@media screen and (max-width: 1399px) {
	.slider-caption h3 {
		font-size: 52px;
	}
}

@media screen and (max-width: 1399px) {
	.slider-caption h3 {
		font-size: 40px;
	}

	.slider-caption p {
		font-size: 18px;
	}
}

@media screen and (max-width: 991px) {
	.slider-tag {
		font-size: calc(var(--cnvs-font-size-body) - 2px);
		padding: 2px 8px 2px 24px;
		margin-bottom: 8px;
	}

	.slider-tag .dot {
		top: 10px;
		left: 10px;
		width: 10px;
		height: 10px;
	}

	.slider-caption h3 {
		font-size: 36px;
	}

	.slider-caption p {
		font-size: calc(var(--cnvs-font-size-body) - 2px);
		margin-top: 16px;
	}

	.slider-button {
		font-size: calc(var(--cnvs-font-size-body) - 2px);
		padding: 8px 32px;
		margin: 16px 0 0;
	}

	#slider [class*="slider-arrow"] {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.slider-tag {
		margin-bottom: 16px;
	}

	.slider-caption {
		padding-top: 24px;
		justify-content: start;
	}

	.slider-caption>div {
		padding: 16px;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 8px;
	}

	.slider-caption h3 {
		font-size: var(--cnvs-font-size-title);
		-webkit-line-clamp: 2;
	}

	.slider-caption p,
	.slider-button {
		/* -webkit-line-clamp: 2; */
		font-size: var(--cnvs-font-size-body);
		margin-top: 16px;
	}
}

/* Feaured Carousel
-----------------------------------------------------------------*/
#oc-features .owl-item:not(.active) {
	opacity: .4;
}

#oc-features .owl-item p {
	font-size: 16px;
	font-weight: 300;
	color: #666;
}

/* Button-link
-----------------------------------------------------------------*/
.button-link {
	display: inline-block;
	position: relative;
	color: #333;
	font-weight: 600;
	margin-top: 10px;
	padding: 5px 0;
	transition: color .3s ease;
}

.dark .button-link {
	color: #FFF;
}

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

/* .button-link::after {
	content: '';
	background : url('images/border.svg') no-repeat;
	position: absolute;
	bottom: 0px;
	left: 0;
	margin-bottom: 0;
	width: 100%;
	height: 4px;
	transition: bottom .3s ease;
} */

.button-link.border-0::after {
	content: none;
}

.button-link:hover::after {
	bottom: 3px;
}


/* Owl Carousel - Controls - Arrows
-----------------------------------------------------------------*/
.owl-carousel-full .owl-nav [class*=owl-] {
	left: 150px !important;
	height: 60px;
	line-height: 60px;
	border: none;
	color: #333;
	background-color: transparent;
	font-size: 28px;
	border-radius: 0;
}

.owl-carousel .owl-nav .owl-next {
	left: auto;
	right: -155px;
}

.owl-carousel-full .owl-nav .owl-next {
	left: auto !important;
	right: 155px !important;
	border-radius: 0;
}

.owl-carousel-full .owl-nav [class*=owl-]:hover {
	color: #333 !important;
}

/* Owl Carousel - Responsive
-----------------------------------------------------------------*/
.device-lg .owl-carousel .owl-nav .owl-prev,
.device-md .owl-carousel .owl-nav .owl-prev,
.device-sm .owl-carousel .owl-nav .owl-prev,
.device-xs .owl-carousel .owl-nav .owl-prev {
	left: 2px !important;
}

.device-lg .owl-carousel-full .owl-nav .owl-next,
.device-md .owl-carousel-full .owl-nav .owl-next,
.device-sm .owl-carousel-full .owl-nav .owl-next,
.device-xs .owl-carousel .owl-nav .owl-next {
	right: 2px !important;
}

/* Grid Filter
-----------------------------------------------------------------*/
.grid-filter li.activeFilter a {
	font-weight: normal;
}

.grid-overlay {
	background-color: rgba(0, 0, 0, 0.75);
}


/* Testimonial
-----------------------------------------------------------------*/
.testimonials-rating {
	margin-top: 15px;
	color: #FFD700;
	font-size: 18px;
	line-height: 1;
}

.testi-content p {
	font-size: 16px;
	color: #666;
	font-style: normal;
}

.testi-content p::before,
.testi-content p::after {
	display: none;
}

.testi-meta::before {
	display: none;
}

.testi-meta span {
	padding-left: 0;
}

.testimonial .flex-control-nav {
	bottom: 8px;
	right: 0px;
}

.testimonial .flex-control-nav li a {
	background-color: #333;
}

/* Misc
-----------------------------------------------------------------*/
#header,
#header-wrap,
#logo img {
	transition: all .4s ease;
}

/* #logo img {
	aspect-ratio: 200 / 80;
} */

/* #header-wrap {
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
} */

.feature-box h3 span.subtitle {
	font-size: 14px;
}

.feature-box.fbox-plain .fbox-icon img {
	height: 50px;
}

.col-padding {
	padding: 60px 48px !important;
}

.heading-block::before {
	content: attr(data-heading);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--cnvs-contrast-200);
	z-index: -1;
	font-family: var(--cnvs-primary-font);
	font-weight: bold;
	font-size: 90px;
	line-height: .3;
}

.heading-block.center::before {
	right: 0;
	left: 0;
	margin: auto;
}

.text-rotater {
	display: inline-block;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.7;
	color: var(--cnvs-contrast-600);
}

/*-----------------------------------------------------------------
 == index
-----------------------------------------------------------------*/
.data-section {
	padding: 40px 0;
	background: linear-gradient(to right, var(--cnvs-secondary), var(--cnvs-themecolor));
}

.data-item {
	color: var(--bs-white);
}

.data-item .counter,
.data-item .plus {
	font-size: 60px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.5px;
}

.data-item .counter-unit {
	font-size: calc(var(--cnvs-font-size-body) + 4px);
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: 1px;
}

.data-item .data-item-title {
	font-size: calc(var(--cnvs-font-size-body) + 2px);
	line-height: 1.75;
	letter-spacing: 1px;
}

.section-title {
	position: relative;
	display: inline-block;
	font-size: calc(var(--cnvs-font-size-body) - 2px);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.75;
	padding: 4px 16px 4px 36px;
	border-radius: 8px;
	border: 1px solid var(--cnvs-box-border);
	background-color: var(--bs-white);
	margin-bottom: 24px;
	color: #000;
}

.section-title .dot {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--cnvs-success);
}

.section-title .dot.intro {
	background-color: var(--cnvs-themecolor);
}

.section-title .dot.info {
	background-color: var(--cnvs-info);
}


/*-----------------------------------------------------------------
 == breadcrumb 
-----------------------------------------------------------------*/
.breadcrumb::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
}

.breadcrumb_title {
	font-size: calc(var(--cnvs-font-size-title) * 0.9);
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
	color: #FFF;
	margin-bottom: 16px;
}

.breadcrumb_list li {
	color: #FFF;
}

.breadcrumb_list li a {
	color: #FFF;
	transition: all .3s ease-out;
}

.breadcrumb_list li a:hover {
	color: #a0a0ff
}

/*-----------------------------------------------------------------
== intro 
-----------------------------------------------------------------*/
.intro-section {
	background: url('../images/introBg_3000x2000.png') no-repeat right top;
	background-size: 100%;
	background-color: #f7f8fb;
}

.intro-title {
	font-size: var(--cnvs-font-size-title);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
}

.intro-title span {
	color: var(--cnvs-themecolor) !important;
}

.intro-brand-box-shadow {
	filter: drop-shadow(0px 4px 20px #D9D9F6);
}

.intro-brand-box {
	position: relative;
	display: flex;
	align-items: end;
	justify-content: center;
	background-color: var(--cnvs-themecolor);
	clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
	min-height: 650px;
	padding: 35% 15%;
}

.intro-brand-box .title p {
	font-size: calc(var(--cnvs-font-size-title) * 0.7);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 2px;
	text-align: center;
	color: var(--bs-white);
	margin-bottom: 36px;
}

.intro-brand-box .title p+p {
	font-weight: 400;
	margin-bottom: 0;
}

.intro-brand-box .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.intro-brand-box .image::before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(var(--cnvs-themecolor-rgb), 1) 0%, rgba(var(--cnvs-themecolor-rgb), 0) 50%);
	z-index: 0;
}

.intro-brand-box .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.intro-manage-wrap {
	display: grid;
	grid: repeat(3, 1fr) / repeat(3, 1fr);
	max-width: 900px;
	gap: 24px;
	margin: 48px auto;
	aspect-ratio: 1.2;
	position: relative;
}

.intro-manage-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding: 24px;
	gap: 16px;
	background: linear-gradient(to bottom, var(--cnvs-hover), var(--cnvs-themecolor));
	border: 1px solid #DCE0EA;
	border-radius: 8px;
	box-shadow: 0 4px 20px #D9D9F6;
}

.intro-manage-box::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(var(--cnvs-themecolor-rgb), 0.5), rgba(var(--cnvs-themecolor-rgb), 1));
	z-index: 1;
	transition: opacity .3s ease-in-out;
}

.intro-manage-box:hover::before {
	opacity: 0;
}

.intro-manage-box-transparent {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.intro-manage-box img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 0;
}

.intro-manage-box span {
	font-size: calc(var(--cnvs-font-size-body) + 6px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--bs-white);
	text-align: center;
	z-index: 1;
	transition: color .3s ease-in-out;
}

.intro-manage-box span+span {
	font-size: var(--cnvs-font-size-body);
}

.intro-manage-box:hover span {
	color: transparent;
}

.intro-logo-animation {
	width: 100%;
	height: 100%;
}

.intro-box.dotBG::before {
	content: '';
	position: absolute;
	bottom: -100px;
	left: -100px;
	width: 200px;
	height: 200px;
	background: url('../images/dotBG_200x200.png') no-repeat center center;
	background-size: contain;
	z-index: -1;
}

.intro-box {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 24px;
	padding: 24px;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	border-radius: 8px;
	box-shadow: 0 4px 20px #D9D9F6;
}

.intro-box .icon {
	width: 60px;
	height: 60px;
	padding: 8px;
	border-radius: 8px;
	background-color: #F7F8FB;
}

.intro-box .title h3 {
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	margin-bottom: 8px;
}

.intro-box .title span {
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--bs-black);
	margin-bottom: 0;
}

.content p:last-child {
	margin-bottom: 0;
}

.intro-margin-top {
	margin-top: 60px;
}

.intro-box-2 {
	height: 100%;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	border-radius: 8px;
	box-shadow: 0 4px 20px #D9D9F6;
}

.intro-box-2 .image {
	position: relative;
	width: 100%;
	/* height: 100%; */
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.intro-box-2 .image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	z-index: 1;
}

.intro-box-2 .content {
	padding: 24px;
}

.intro-box-2 .content h3 {
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	margin-bottom: 16px;
}

.timeline-box_wrap {
	padding: 40px 0 0;
	position: relative;
}

.timeline-box {
	position: relative;
	justify-content: end;
	padding: 50px 0;
	display: flex;
	align-items: baseline;
	border-right: 2px solid #D9D9F6;
	width: 50%;
}

.timeline-box:first-child {
	padding-top: 0;
}

.timeline-box:nth-child(even) {
	flex-direction: row-reverse;
	margin-left: calc(50% - 1px);
	border-left: 2px solid #D9D9F6;
	border-right: none;
}

.timeline-card__wrap {
	margin-right: 10px;
}

.timeline-box:nth-child(even) .timeline-card__wrap {
	margin-right: 0px;
	margin-left: 10px;
}

.timeline-year {
	font-size: calc(var(--cnvs-font-size-title) * 1.1);
	color: var(--cnvs-themecolor);
	margin: 0px;
	-webkit-text-stroke: 1px var(--cnvs-themecolor);
	color: transparent;
	font-weight: 700;
	line-height: 1;
	text-align: right;
	position: relative;
}

.timeline-box:nth-child(even) .timeline-year {
	text-align: left;
}

.timeline-card__txt {
	position: relative;
}

.timeline-card__txt::before {
	content: "";
	border-radius: 8px;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -20px;
	left: -20px;
	background: rgba(var(--cnvs-themecolor-rgb), 0.3)
}

.timeline-box:nth-child(even) .timeline-card__txt::before {
	left: initial;
	right: -20px;
}

.timeline-card__inner {
	position: relative;
	padding: 24px;
	background: #fff;
	border: 1px solid #DCE0EA;
	border-radius: 8px;
}

.timeline-card__wrap .timeline-title {
	font-size: calc(var(--cnvs-font-size-title) * 0.6);
	font-weight: 400;
	color: var(--cnvs-themecolor);
	letter-spacing: 1px;
	margin: 0px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 2px solid var(--cnvs-hover);
	position: relative;
}

/*編輯器*/

.timeline-card__wrap .timeline-txt p {
	font-size: var(--cnvs-font-size-body);
	line-height: 1.75;
	letter-spacing: 1px;
	color: var(--bs-black);
	position: relative;
	margin-bottom: 0px;
}

.timeline-txt ul {
	padding-left: 24px;
	margin-bottom: 0px;
}

.timeline-txt ol {
	padding-left: 20px;
	margin-bottom: 0px;
}

.timeline-txt ul li {
	list-style: disc;
}

.timeline-card__wrap .timeline-txt .timeline-txt-color {
	color: var(--cnvs-themecolor);
	display: block;
}

.timeline-decor {
	display: flex;
	align-items: center;
	margin-right: -8px;
	position: relative;
	top: 60px;
}

.timeline-box:nth-child(even) .timeline-decor {
	margin-left: -10px;
	margin-right: 0;
}

.timeline-decor .d-circle {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background-color: var(--cnvs-themecolor);
}

.timeline-decor .d-line {
	display: inline-block;
	width: 50px;
	height: 2px;
	background-color: var(--cnvs-themecolor);
	margin: 0 10px;
}

/*-----------------------------------------------------------------
== intro certificate 
-----------------------------------------------------------------*/

.cer-img img {
	object-fit: contain;
}

.cer-img {
	transition: all .3s ease-out;
}

.cer-img::before,
.cer-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 75%;
	height: 100%;
	border: 2px solid var(--cnvs-themecolor);
	z-index: -1;
	transition: .3s ease-in-out;
}

.cer-img::before {
	opacity: 0;
	background: var(--cnvs-themecolor);
	transition: .3s ease-in-out;
}

.cer-item:hover .cer-img::after {
	width: 100%;
}

.cer-item:hover .cer-img::before {
	width: 100%;
	opacity: 1;
}

/*-----------------------------------------------------------------
== service 
-----------------------------------------------------------------*/
.service-section {
	background: url('../images/serviceBg_2000x1385.jpg') no-repeat right top;
	background-size: cover;
	background-color: #f7f8fb;
	padding-bottom: 200px;
}

.service-description {
	font-size: calc(var(--cnvs-font-size-body) + 6px);
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
}

/* .pain {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--cnvs-danger);
	padding: 8px 16px;
	border-radius: 8px;
	background-color: #FCEBED;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 1;
} */

.pain {
	position: absolute;
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-radius: 10px;
	background-color: var(--bs-white);
	box-shadow: 0 4px 10px #D9D9F6;
	font-size: var(--cnvs-font-size-body);
	line-height: 1.75;
	z-index: 1;
	width: 300px;
}

.pain::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 12px;
	height: 12px;
	background-color: #9696E8;
	border-radius: 100px;
	box-shadow: 0 0 0 5px #F6F7FB;
	transition: transform 0.3s ease-in-out;
}

.pain.is-inview:nth-child(1):before {
	animation: appear 0.5s 0.5s ease-in-out forwards;
}

.pain.is-inview:nth-child(2):before {
	animation: appear 0.5s 1.25s ease-in-out forwards;
}

.pain.is-inview:nth-child(3):before {
	animation: appear 0.5s 1s ease-in-out forwards;
}

.pain.is-inview:nth-child(4):before {
	animation: appear 0.5s 0.75s ease-in-out forwards;
}

.pain .icon {
	width: 50px;
	height: 50px;
	border-radius: 100px;
	background-color: #FCEBED;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}

@keyframes appear {
	0% {
		transform: translateY(-50%) scale(0);
	}

	50% {
		transform: translateY(-50%) scale(1.5);
	}
	
	100% {
		transform: translateY(-50%) scale(1);
	}
}

@keyframes float {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(10px);
	}
}

.pain:nth-child(1) {
	top: 50px;
	left: 0px;
	/* animation: float 2s ease-in-out infinite alternate; */
}

.pain:nth-child(2) {
	top: 250px;
	left: 0px;
	/* animation: float 2.5s ease-in-out infinite alternate; */
}

.pain:nth-child(3) {
	top: 50px;
	right: 0px;
	/* animation: float 3s ease-in-out infinite alternate; */
}

.pain:nth-child(4) {
	top: 250px;
	right: 0px;
	/* animation: float 3.5s ease-in-out infinite alternate; */
}

.pain:nth-child(1)::before,
.pain:nth-child(2)::before {
	right: -12px;
}

.pain:nth-child(3)::before,
.pain:nth-child(4)::before {
	left: -12px;
}

.service-screen {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 650px;
	height: 450px;
	background-color: #F4F5FE;
	border: 1px solid #9696E8;
	border-radius: 8px;
	z-index: 0;
}

.service-screen .line-draw {
	position: absolute;
}

.service-screen .line-draw svg {
	width: 150px;
}

.service-screen .line-draw:nth-child(1) {
	top: 110px;
	left: -50px;
}

.service-screen .line-draw:nth-child(2) {
	top: 260px;
	left: -50px;
}

.service-screen .line-draw:nth-child(3) {
	top: 110px;
	right: -60px;
}

.service-screen .line-draw:nth-child(4) {
	top: 260px;
	right: -60px;
}

.service-screen .line-draw svg path {
	stroke: #9696E8;
	stroke-width: 3;
	fill: none;
	stroke-dasharray: 10, 10;
}

.dashed {
	stroke: #191970;
	stroke-width: 3;
	stroke-dasharray: 10 10;
	fill: none;
}

.line-draw.right .reveal {
	stroke-dasharray: 1;
	stroke-dashoffset: -1;
}

.line-draw.left .reveal,
.line-draw.left:nth-child(2) .reveal {
	stroke-dasharray: 1;
	stroke-dashoffset: -1;
}

.line-draw.right.is-inview .reveal {
	animation: draw-from-right 0.5s 0.25s ease-out forwards;
}

.line-draw.right:nth-child(2).is-inview .reveal {
	animation: draw-from-right 0.5s 1s ease-out forwards;
}

.line-draw.left.is-inview .reveal {
	animation: draw-from-left 0.5s 0.75s ease-out forwards;
}

.line-draw:nth-child(4).left.is-inview .reveal {
	animation: draw-from-left 0.5s 0.5s ease-out forwards;
}

@keyframes draw-from-right {
	from {
		stroke-dashoffset: -1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes draw-from-left {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.forward {
	position: relative;
	width: 77px;
	height: 155px;
}

.forward svg {
	position: absolute;
	left: 0;
}

.forward svg:nth-child(1) {
	top: 0;
}

.forward svg:nth-child(2) {
	top: 48px;
}

.forward svg:nth-child(3) {
	top: 96px;
}

.forward svg path {
	fill: #D9D9F6;
}

.forward svg:nth-child(1) path {
	fill: #D9D9F6;
	animation: forward-light 3s ease-in-out infinite;
}

.forward svg:nth-child(2) path {
	fill: #D9D9F6;
	animation: forward-light 3s ease-in-out 1s infinite;
}

.forward svg:nth-child(3) path {
	fill: #D9D9F6;
	animation: forward-light 3s ease-in-out 2s infinite;
}

@keyframes forward-light {
	0% {
		fill: #D9D9F6;
	}

	25% {
		fill: #191970;
	}

	50% {
		fill: #D9D9F6;
	}

	100% {
		fill: #D9D9F6;
	}
}

.forward.service {
	position: relative;
	width: 77px;
	height: 105px;
	opacity: 0.5;
	z-index: 0;
}

.forward.service svg:nth-child(1) path {
	fill: #D9D9F6;
	animation: forward-gradient 3s ease-in-out infinite;
}

.forward.service svg:nth-child(2) path {
	fill: #D9D9F6;
	animation: forward-gradient 3s ease-in-out 1.5s infinite;
}

@keyframes forward-gradient {
	0% {
		fill: #D9D9F6;
	}

	50% {
		fill: var(--cnvs-hover);
	}

	100% {
		fill: #D9D9F6;
	}
}

.service-box {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 24px;
	padding: 24px;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	border-radius: 8px;
	box-shadow: 0 4px 20px #D9D9F6;
}

.service-box .icon {
	width: 60px;
	height: 60px;
	padding: 8px;
	border-radius: 8px;
	background-color: #F7F8FB;
}

.service-box .num {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 120px;
	font-weight: 700;
	line-height: 1;
	color: rgba(var(--cnvs-themecolor-rgb), 0.1);
}

.service-box .title h3 {
	font-size: calc(var(--cnvs-font-size-body) + 6px);
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	margin-bottom: 8px;
}

#service-info .service-item {
	position: relative;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	border-radius: 20px;
	box-shadow: 0 4px 20px #D9D9F6;
	padding: 36px 48px;
	overflow: hidden;
	z-index: 1;
}

#service-info .step {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--cnvs-font-size-title) * 0.6);
	line-height: 1.3;
	font-weight: 400;
	padding: 4px;
	border: 2px solid var(--cnvs-themecolor);
	border-radius: 100px;
	/* background-color: var(--bs-white); */
	color: var(--cnvs-themecolor);
}

#service-info .tool {
	font-size: calc(var(--cnvs-font-size-body) + 4px);
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-hover);
}

#service-info .service-title {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

#service-info .service-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

#service-info .service-margin-top {
	margin-top: 80px;
}

/*----------------------------------------------------------------- 
== CTA 
-----------------------------------------------------------------*/
.cta-section {
	padding: 0 0 25px 0;
	background: linear-gradient(to right, var(--cnvs-secondary), var(--cnvs-themecolor));
}

.cta-content {
	transform: translateY(-15px);
}

.cta-title {
	position: relative;
	/* top: -55px; */
	font-size: 48px;
	line-height: 1.3;
	/* color: var(--bs-white); */
	letter-spacing: 1px;
	background: linear-gradient(to bottom, var(--bs-white) 55%, #A7E9F4 60%);
	/* text-shadow: 2px 2px 0 var(--cnvs-info); */
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-o-text-fill-color: transparent;
	margin-bottom: 0px;
}

.cta-title::before {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	text-shadow: 2px 2px 0 var(--cnvs-info), -1px -1px 0 var(--cnvs-info), 0px 1px 0 var(--cnvs-info), 1px 0px 0 var(--cnvs-info), -1px 1px 0 var(--cnvs-info), 1px -1px 0 var(--cnvs-info), 4px 3px 0 var(--cnvs-info);
}

.cta-img-item {
	position: absolute;
	bottom: -50px;
	right: 0;
	width: 100%;
	display: flex;
	justify-content: end;
}

.computer-img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
}

.cta-img {
	max-width: 500px;
	width: 100%;
	aspect-ratio: 1;
}

.elements-img {
	width: 100%;
	aspect-ratio: 1;
}

.cta-item {
	position: relative;
	padding: 48px;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	box-shadow: 0 4px 20px #D9D9F6;
}

.cta-item .cta-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	filter: brightness(0.8);
}

.cta-item .cta-block {
	position: relative;
	z-index: 1;
	padding: 48px;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/*-----------------------------------------------------------------
== portfolio / info 
-----------------------------------------------------------------*/
.portfolio-section {
	background: url('../images/portfolioBg_2000x1541.jpg') no-repeat right top;
	background-size: cover;
	background-color: #f7f8fb;
}

.portfolio-title {
	font-size: var(--cnvs-font-size-title);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
}

.portfolio-title span {
	color: var(--cnvs-info) !important;
}

.portfolio-item {
	position: relative;
}

.portfolio-item .image {
	display: block;
	position: relative;
	aspect-ratio: 800 / 450;
	border-radius: 8px;
	overflow: hidden;
}

/* 列表卡片：分類徽章（獨立連結，壓在圖片上、可點擊） */
.portfolio-item .cate-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.5px;
	color: var(--bs-white, #fff) !important;
	background: var(--cnvs-themecolor);
	border-radius: 4px;
	transition: background-color .3s ease-out;
}

.portfolio-item a.cate-badge:hover {
	background: var(--cnvs-hover, #5656be);
	color: var(--bs-white, #fff) !important;
}

.portfolio-item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .3s ease-out;
}

.portfolio-item .image:hover img {
	transform: scale(1.1);
}

.portfolio-item .box {
	padding: 0 8px;
	transform: translateY(-8px);
}

.portfolio-item .box .content {
	padding: 24px;
	background-color: var(--bs-white);
	border: 1px solid #DCE0EA;
	border-radius: 8px;
	box-shadow: 0 4px 20px #D9D9F6;
}

.portfolio-item .box .content .title {
	font-size: calc(var(--cnvs-font-size-body) + 6px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	margin-bottom: 16px;
	transition: all .3s ease-out;
}

.portfolio-item .box .content .title:hover {
	color: var(--cnvs-hover);
}

/* 列表卡片：日期列（標題上方） */
.portfolio-item .box .content .post-date {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--cnvs-contrast-500, #8a8a99);
}

.portfolio-item .box .content .post-date i {
	font-size: 12px;
}

/* 列表上方：篩選結果列 */
.filter-result {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-bottom: 28px;
	padding: 13px 18px;
	background: var(--cnvs-contrast-100, #f4f5f8);
	border: 1px solid var(--cnvs-box-border);
	border-radius: 10px;
	font-size: 15px;
}

.filter-result .filter-keyword {
	font-weight: 600;
	color: var(--cnvs-themecolor);
}

.filter-result .filter-text {
	color: var(--cnvs-contrast-700, #555);
}

.filter-result .filter-count {
	margin: 0 2px;
	font-weight: 700;
	color: var(--cnvs-themecolor);
}

.filter-result .filter-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bs-white, #fff);
	background: var(--cnvs-themecolor);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .3s ease-out;
}

.filter-result .filter-clear:hover {
	background: var(--cnvs-hover, #5656be);
}

.filter-result .filter-clear i {
	font-size: 12px;
}

/*----- portfolio info -----*/

.portfolio_info_img {
	/* box-shadow: 0 4px 20px #D9D9F6; */
	border-radius: 8px;
	overflow: hidden;
}

.portfolio_info_content {
	border: 1px solid var(--cnvs-box-border);
	border-radius: 14px;
	box-shadow: 0 4px 20px #D9D9F6;
	padding: 36px;
	background-color: var(--bs-white);
}

.portfolio_info_content h1 {
	font-size: calc(var(--cnvs-font-size-title) * 0.8);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	margin-bottom: 16px;
}

.portfolio_info_content .sub-title {
	font-size: calc(var(--cnvs-font-size-body) + 6px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	margin: 16px 0 24px;
}

.portfolio_info_content ul.service-list li:not(:last-child) {
	border-bottom: 1px solid var(--cnvs-box-border);
	padding-bottom: 16px;
	margin-bottom: 24px;
}

.portfolio_info_content .service-item .title {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 8px;
	align-items: first baseline;
	margin-bottom: 16px;
}

.portfolio_info_content .service-item .title .name {
	font-size: calc(var(--cnvs-font-size-body) + 2px);
	line-height: 1.5;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.portfolio_info_content .service-item .icon {
	width: 50px;
	height: 50px;
	padding: 8px;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid var(--cnvs-box-border);
}

.portfolio_info_content .service-item .content {
	width: 100%;
}

.portfolio_info_item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 50%;
}

.portfolio_info_item.prev {
	padding-right: 16px;
}

.portfolio_info_item.next {
	padding-left: 16px;
}

.portfolio_info_item .item {
	display: flex;
	gap: 16px;
}

.portfolio_info_item.prev .item {
	justify-content: start;
}

.portfolio_info_item.next .item {
	justify-content: end;
}

.portfolio_info_item .item .img {
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 960 / 540;
	width: 100px;
	height: 57px;
}

.portfolio_info_item .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease-out;
}

.portfolio_info_item:hover .item .img img {
	transform: scale(1.3);
}

.portfolio_info_item .content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--cnvs-themecolor);
	transition: color .3s ease-out;
	width: calc(100% - 100px - 16px);
}

.portfolio_info_item:hover .content {
	color: var(--cnvs-hover);
}

.seperate-line {
	width: 1px;
	height: 100%;
	background-color: var(--cnvs-box-border);
}

.seperate-line-h {
	width: 100%;
	height: 1px;
	background-color: var(--cnvs-box-border);
}

/* 文章內頁（news_info）— 沿用 portfolio_info 卡片，補文章專屬元素 */
.news-article-content .article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--cnvs-contrast-500, #8a8a99);
}

.news-article-content .article-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.news-article-content .article-meta i {
	font-size: 12px;
}

.news-article-content .cate-badge-inline {
	font-weight: 600;
	color: var(--cnvs-themecolor) !important;
	transition: color .3s ease-out;
}

.news-article-content .cate-badge-inline:hover {
	color: var(--cnvs-hover, #5656be) !important;
}

.news-article-content .article-cover {
	margin: 20px 0 24px;
}

.news-article-content .php_editer_wrap p {
	margin-bottom: 16px;
	line-height: 1.9;
}

.news-article-content .php_editer_wrap ul {
	margin: 0 0 16px;
	padding-left: 1.25rem;
	list-style: disc;
}

.news-article-content .php_editer_wrap li {
	margin-bottom: 8px;
	line-height: 1.8;
}

.news-article-content .php_editer_wrap blockquote {
	margin: 20px 0;
	padding: 14px 20px;
	border-left: 3px solid var(--cnvs-themecolor);
	border-radius: 0 8px 8px 0;
	background: var(--cnvs-contrast-100, #f4f5f8);
	color: var(--cnvs-contrast-700, #555);
	font-size: 15px;
}

.news-article-content .article-tags {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 16px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--cnvs-box-border);
}

/* 左欄：「標籤：」固定在左、標籤在右方成區塊折行（吊掛縮排，頂端對齊第一列） */
.news-article-content .article-tags .tags-main {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.news-article-content .article-tags .tags-label {
	flex-shrink: 0;
	font-weight: 600;
	color: var(--cnvs-heading-color, #1e1e2d);
	line-height: 28px;
}

/* 右欄：標籤雲佔滿剩餘寬度、標籤在此折行（不會跑到「標籤：」下方） */
.news-article-content .article-tags .tagcloud {
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	gap: 6px;
	margin-bottom: 0;
}

.news-article-content .article-tags .tagcloud a {
	margin: 0;
}

/* 文章分享（複製連結 / Facebook / LINE） */
.news-article-content .article-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* 窄螢幕：兩欄改為上下堆疊，分享靠左 */
@media (max-width: 575px) {
	.news-article-content .article-tags {
		flex-wrap: wrap;
	}

	.news-article-content .article-tags .tags-main {
		flex-basis: 100%;
	}
}

.news-article-content .share-label {
	font-size: 14px;
	color: var(--cnvs-contrast-500, #8a8a99);
}

.news-article-content .share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cnvs-contrast-100);
	color: var(--cnvs-themecolor) !important;
	font-size: 14px;
	transition: all .25s ease-out;
}

.news-article-content .share-btn:hover,
.news-article-content .share-btn.copied {
	background: var(--cnvs-themecolor);
	color: var(--bs-white, #fff) !important;
}

.news-article-content .article-back {
	margin-top: 24px;
}

/* 系列專欄導覽（分類 + 本篇第幾篇 + 上下一篇） */
.news-article .series-nav {
	margin-top: 28px;
	padding: 18px 22px;
	background: var(--cnvs-contrast-100, #f4f5f8);
	border: 1px solid var(--cnvs-box-border);
	border-radius: 12px;
}

.news-article .series-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cnvs-box-border);
}

.news-article .series-head > i {
	color: var(--cnvs-themecolor);
	font-size: 13px;
}

.news-article .series-name {
	font-weight: 700;
	color: var(--cnvs-themecolor) !important;
	transition: color .25s ease;
}

.news-article .series-name:hover {
	color: var(--cnvs-hover, #5656be) !important;
}

.news-article .series-sep {
	color: var(--cnvs-box-border);
}

.news-article .series-count {
	font-size: 14px;
	color: var(--cnvs-contrast-500, #8a8a99);
}

.news-article .series-item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 4px;
	line-height: 1.7;
}

.news-article .series-item + .series-item {
	margin-top: 6px;
}

.news-article .series-label {
	color: var(--cnvs-contrast-500, #8a8a99);
	white-space: nowrap;
}

.news-article .series-item > a {
	color: var(--cnvs-themecolor) !important;
	font-weight: 500;
	transition: color .25s ease;
}

.news-article .series-item > a:hover {
	color: var(--cnvs-hover, #5656be) !important;
}

.news-article .series-item > i {
	margin-left: 2px;
	color: var(--cnvs-themecolor);
	font-size: 12px;
}

/* 停用狀態：無上一篇／下一篇時，灰字不可點 */
.news-article .series-item.is-disabled {
	cursor: default;
}

.news-article .series-item.is-disabled .series-label,
.news-article .series-none {
	color: var(--cnvs-contrast-400, #b4b4c0);
}

.news-article .series-none {
	cursor: default;
}


/*----------------------------------------------------------------- 
== news 
-----------------------------------------------------------------*/
/* search */
.search_bar {
	padding: 16px 0;
	background-color: #E2E6F7;
	border-bottom: 1px solid var(--cnvs-box-border);
}

.search_bar ul.search_list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 8px;
	padding: 32px 0;
	margin: 0;
}

.search_bar ul.search_list a {
	color: var(--cnvs-themecolor);
	font-size: var(--cnvs-font-size-body);
	padding: 12px 16px;
	border-radius: 100px;
	line-height: 1.5;
	font-weight: 400;
	transition: all .3s ease-out;
}

.search_bar ul.search_list .active a {
	color: var(--bs-white);
	background-color: var(--cnvs-themecolor);
}

.search_bar ul.search_list a:hover {
	color: var(--bs-white);
	background-color: var(--cnvs-hover);
}

.search_form {
	position: relative;
	margin-bottom: 0;
}

.search_form input[type="search"] {
	padding: 14px 145px 14px 20px;
	width: 100%;
	border: 1px solid var(--cnvs-box-border);
	background-color: #FBFBFC;
	border-radius: 100px;
	font-size: var(--cnvs-font-size-body);
	font-weight: 400;
	line-height: 1.75;
}

.search_form input[type="search"]:focus {
	border: 1px solid var(--cnvs-themecolor);
	background-color: #FFF;
	outline: none;
	box-shadow: 0 0 0 4px rgba(var(--cnvs-hover-rgb), 0.2);
}

.search_form .search_btn {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	padding: 4px 12px;
	margin: 0;
}

/* pagination */
.pagination_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination_wrap .pagination_list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0;
}

.pagination_wrap .pagination_list li a {
	background-color: #F6F7FB;
	border: 1px solid var(--cnvs-box-border);
	color: var(--bs-black);
	display: inline-block;
	font-size: var(--cnvs-font-size-body);
	font-weight: 400;
	padding: 0;
	text-align: center;
	vertical-align: top;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
	box-shadow: 0 4px 20px #D9D9F6;
}

.pagination_wrap .pagination_list li.active a {
	color: var(--bs-white);
	background-color: var(--cnvs-themecolor);
}

.pagination_wrap .pagination_list li a:hover {
	color: var(--bs-white);
	background-color: var(--cnvs-themecolor);
}

.pagination_wrap .pagination_list li.disabled a {
	color: var(--bs-black);
	background-color: var(--bs-gray-500);
	opacity: 0.25;
	cursor: default;
}

.pagination_wrap .pagination_list li i {
	font-size: 15px;
	font-weight: 700;
}

.pagination_wrap .pagination_list li:last-child {
	margin-right: 5px;
}

/* no data */
.nodata {
	background-color: var(--bs-white);
	border: 1px solid var(--cnvs-themecolor);
	border-radius: 10px;
	padding: 24px;
	text-align: center;
}

/*-----------------------------------------------------------------
== contact 
-----------------------------------------------------------------*/

.contact-title {
	font-size: var(--cnvs-font-size-title);
	font-weight: 500;
	color: var(--bs-black);
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 24px;
}

.contact-title span {
	color: #7575E0 !important;
}

.contact-form-title {
	font-size: calc(var(--cnvs-font-size-title) * 0.8);
	font-weight: 400;
	color: var(--cnvs-themecolor);
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 24px;
}

.contact-link {
	font-size: var(--cnvs-font-size-body);
	font-weight: 400;
	margin-bottom: 0;
	color: var(--cnvs-themecolor);
	transition: all .3s ease-out;
}

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

.contact-info-block {
	position: relative;
	display: flex;
	justify-content: end;
	padding: 20px 0 0 20px;
}

.contact-info-block .icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	background: linear-gradient(to right, var(--cnvs-hover), var(--cnvs-themecolor));
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--cnvs-font-size-body) + 8px);
	border-radius: 50%;
	box-shadow: 0 4px 20px #D9D9F6;
}

.contact-info-block .info {
	width: 100%;
	padding: 32px 24px 24px 32px;
	background-color: var(--bs-white);
	border: 1px solid var(--cnvs-box-border);
	border-radius: 10px;
	box-shadow: 0 4px 20px #D9D9F6;
}

.contact-info-block .info .title {
	font-size: calc(var(--cnvs-font-size-body) + 2px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

.contact-info-block .info .list li:not(:last-child) {
	margin-bottom: 4px;
}

.contact-info-block .info .list a {
	color: var(--cnvs-themecolor);
	transition: all .3s ease-out;
}

.contact-info-block .info .list.mail a {
	word-break: break-all;
}

.contact-info-block .info .list a:hover {
	color: var(--cnvs-hover);
}

/* contact form */
.contact-form .form-group {
	position: relative;
}

.contact-form .form-group i {
	position: absolute;
	left: 16px;
	top: 17px;
	color: #666;
}

.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
	font-size: calc(var(--cnvs-font-size-body));
	font-weight: 400;
	letter-spacing: 1px;
	-webkit-transition: border 0.5s;
	transition: border 0.5s;
	border: 1px solid var(--cnvs-box-border);
	background-color: #FBFBFC;
	padding: 0 24px 0 42px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 10px;
	border-radius: 4px;
	outline: none;
	width: 100%;
	height: 60px;
	line-height: 1.75;
}

.contact-form .form-group textarea {
	padding: 15px 24px 15px 42px;
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
	border-color: var(--cnvs-themecolor);
	background-color: #FFF;
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder,
.contact-form .form-group select::placeholder {
	color: #666;
}

.contact-form .form-group textarea.message {
	height: 200px;
	margin-bottom: -6px;
}

.contact-form .form-group textarea.tips {
	height: 60px;
	margin-bottom: -6px;
}

.contact-form .form-group select.classic {
	margin: 0;
	min-height: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: white;
	display: inline-block;
	font: inherit;
	background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #E9E9E9, #E9E9E9);
	background-position: calc(100% - 29px) calc(1em + 12px), calc(100% - 21px) calc(1em + 12px), 100% 0;
	background-size: 8px 8px, 8px 8px, 60px 60px;
	background-repeat: no-repeat;
}

.contact-form .form-group .form-check-input {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid #AAA;
}

.contact-form .form-group .form-check-input:focus {
	outline: none;
	box-shadow: 0 0 4px 4px rgba(var(--cnvs-subcolor-rgb), 1);
}

.contact-form .form-group .form-check-input:checked {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
}

.captcha-area__inner {
	display: inline-block;
}

.captcha-area__inner img {
	border: 1px solid #DDD;
	height: 40px;
	margin: 10px 0;
}

.check-area {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 16px;
}

/* ----------------------------------------------------------------
	==privacy
-----------------------------------------------------------------*/
.fbox-border.fbox-light .fbox-icon a {
	border-color: var(--cnvs-themecolor);
}

.fbox-border.fbox-light .fbox-icon i {
	color: var(--cnvs-themecolor);
}

.fbox-content p {
	font-weight: 400;
	line-height: 1.75;
}

.fbox-content .content-title {
	font-size: calc(var(--cnvs-font-size-body) + 4px);
	font-weight: 400;
	line-height: 1.3;
	margin: 4px 0 16px;
	color: #000;
}

/*-----------------------------------------------------------------
== footer 
-----------------------------------------------------------------*/
#footer {
	background: var(--bs-white);
	border-top: 1px solid var(--cnvs-box-border);
}

.footer-logo {
	max-width: 150px;
	max-height: 27px;
	margin-bottom: 0;
}

.h1-txt {
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 1px;
	font-weight: 400;
	margin: 24px 0;
}

.footer-title {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 1px;
	font-weight: 500;
	margin-bottom: 24px;
	color: var(--cnvs-themecolor);
}

.footer-list {
	list-style: none;
	padding-left: 0;
}

/* .footer-list li:not(:first-child) {
	margin-top: 8px;
} */

.footer-list li {
	position: relative;
	padding-left: 24px;
}

.footer-list li i {
	position: absolute;
	left: 0;
	margin-right: 8px;
}

.footer-list li a {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 1px;
	transition: all .3s ease-out;
}

.footer-list li a:hover {
	color: var(--cnvs-hover);
}

.footer-list-flex {
	display: flex;
	flex-wrap: wrap;
}

.footer-list-flex li {
	width: 160px;
}

.social-icons-wrap {
	display: flex;
	gap: 24px;
}

.social-icons-wrap a {
	font-size: 24px;
	color: var(--cnvs-themecolor);
	transition: all .3s ease-out;
}

.social-icons-wrap a:hover {
	color: var(--cnvs-hover);
}

.copyright-wrap {
	display: flex;
	padding: 24px 0;
	align-items: center;
	justify-content: space-between;
}

#copyright {
	background: var(--bs-white);
}

.copyright-txt {
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 0;
	color: var(--bs-black);
	letter-spacing: 1px;
}

.copyright-link {
	color: var(--bs-black);
}

.copyright-link:hover {
	color: var(--cnvs-hover);
}

/*-----------------------------------------------------------------
== cookie 
-----------------------------------------------------------------*/
.cookie_cse {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.4);
}

.cookie_cse .cookie-info {
	position: absolute;
	width: 100%;
	bottom: 0;
	background-color: var(--cnvs-themedarkcolor);
}

.cookie_cse .cookie-info .container-fluid {
	margin: 0 auto;
	padding: 32px 24px;
	width: 80%;
}

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

.cookie_cse .cookie-info .tx {
	padding-right: 30px;
}

.cookie_cse .cookie-info .tx p {
	color: #FFF;
	line-height: 1.5;
	margin-bottom: 0;
}

.cookie_cse .cookie-info .tx p a {
	color: #FFF;
}

.cookie_cse .cookie-info .tx p a:hover {
	color: var(--cnvs-themehovercolor);
}

.cookie_cse .btn-cookie {
	margin-left: 0;
	margin-top: 10px;
	min-width: fit-content;
}

.cookie_cse .btn-cookie .btn-all {
	background-color: var(--cnvs-themesubcolor);
	color: #FFF;
	padding: 16px 32px;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: 16px;
	border-radius: 4px;
}

.cookie_cse .btn-cookie .btn-all:hover {
	background-color: var(--cnvs-themecolor);
	color: #FFF;
}

@media(max-width: 1024px) {
	.grid.info .col-4 {
		float: none;
		display: block;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		margin-bottom: 6%;
		min-width: 200px;
	}
}

@media(max-width: 1299px) {
	.cookie_cse .cookie-info .container-fluid {
		margin: 0 auto;
		padding: 20px;
		width: 100%;
	}

	.cookie_cse .cookie-info .tx p {
		font-size: 18px;
	}
}

@media(max-width: 991px) {
	.cookie_cse .cookie-info .align-center {
		display: block;
	}

	.cookie_cse .cookie-info .tx {
		padding-right: 0px;
	}

	.cookie_cse .cookie-info .tx p {
		line-height: 30px;
	}

	.cookie_cse .btn-cookie {
		display: flex;
		justify-content: flex-end;
	}

	.cookie_cse .btn-cookie .btn-all {
		background-color: var(--cnvs-themecolor);
		color: #FFF;
		padding: 12px 24px;
		letter-spacing: 0.12em;
		font-weight: 700;
		font-size: 16px;
	}
}

@media(max-width: 375px) {

	.cookie_cse .cookie-info .tx p {
		font-size: 16px;
	}

	.cookie_cse .btn-cookie .btn-all {
		font-size: 16px;
	}
}

/*----------------------------------------------------------------- 
== SNS 
-----------------------------------------------------------------*/
[id*="sns"] {
	--cnvs-sns-size: 3rem;
	--cnvs-sns-bg: var(--cnvs-themedarkcolor);
	--cnvs-sns-icon-size: 1.5rem;
	--cnvs-sns-icon-color: #fff;
	--cnvs-sns-position-boxed-right: 30px;
	--cnvs-sns-position-boxed-botom: 30px;
	--cnvs-sns-border-radius: 100px;
	--cnvs-sns-hover-color: var(--cnvs-themecolor);
	z-index: 100;
	position: fixed;
	width: var(--cnvs-sns-size);
	line-height: var(--cnvs-sns-size);
	font-size: var(--cnvs-sns-icon-size);
	text-align: center;
	color: var(--cnvs-sns-icon-color);
	top: auto;
	left: auto;
	right: var(--cnvs-sns-position-boxed-right);
	bottom: var(--cnvs-sns-position-boxed-bottom);
	cursor: pointer;
	background-color: var(--cnvs-sns-bg);
	border-radius: var(--cnvs-sns-border-radius);
	opacity: 1;
	transition: background-color 0.2s linear, opacity 0.4s ease;
}

[id*="sns"]:hover {
	background-color: var(--cnvs-sns-hover-color);
}

.sns_wrap .sns_item {
	position: relative;
	z-index: 9999;
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.sns_wrap .sns_item.is-hidden {
	opacity: 0;
}

.sns_wrap .sns_item {
	--cnvs-sns-position-boxed-bottom: calc(155px + (var(--i) - 1) * 55px);
}


/*-----------------------------------------------------------------
== RWD 
-----------------------------------------------------------------*/
@media screen and (min-width: 768px) {

	/*----- slider -----*/
	#slider-mobile,
	.banner-mobile {
		display: none;
	}
}


@media screen and (max-width: 1399px) {

	/*---- service -----*/
	.service-screen {
		width: 500px;
	}

	/*---- cta -----*/
	.cta-title {
		font-size: 44px;
	}
}

@media screen and (max-width: 1199px) {

	/*---- slider -----*/
	:root {
		--cnvs-slider-caption-width: 500px;
	}

	/*---- intro -----*/
	.intro-brand-box {
		min-height: 500px;
	}

	.intro-brand-box .title p {
		font-size: calc(var(--cnvs-font-size-title) * 0.6);
	}

	/*---- service -----*/
	.service-screen {
		width: 400px;
	}

	.service-screen .line-draw:nth-child(1) {
		top: 125px;
		left: -50px;
	}

	.service-screen .line-draw:nth-child(2) {
		top: 275px;
		left: -50px;
	}

	.service-screen .line-draw:nth-child(3) {
		top: 125px;
		right: -60px;
	}

	.service-screen .line-draw:nth-child(4) {
		top: 275px;
		right: -60px;
	}

	.pain {
		width: 250px;
	}

	/*---- cta -----*/
	.cta-title {
		font-size: 43px;
	}

	/*---- footer ----*/
	.footer-list-flex li {
		width: 145px;
	}
}

@media screen and (max-width: 991px) {

	/*---- root ----*/
	.button {
		padding: 8px 24px;
	}

	#logo a .logo-default {
		max-height: 75px;
	}

	/*---- slider -----*/
	:root {
		--cnvs-slider-caption-width: 375px;
	}

	/*---- breadcrumb ----*/
	.breadcrumb_title {
		font-size: 28px;
	}

	.heading-block {
		--cnvs-heading-block-font-size-h2: 28px;
	}

	/*---- intro -----*/
	.intro-brand-box {
		padding: 20% 10%;
		min-height: 400px;
	}

	.intro-brand-box .title p {
		margin-bottom: 24px;
	}

	.intro-logo-animation {
		max-width: 150px;
	}

	.timeline-box {
		position: relative;
		padding: 50px 0;
		display: flex;
		align-items: baseline;
		justify-content: start;
		border-right: none;
		border-left: 2px solid #D9D9F6;
		width: 100%;
		flex-direction: row-reverse;
	}

	.timeline-box:nth-child(even) {
		margin-left: 0;
	}

	.timeline-box .timeline-year {
		text-align: left;
	}

	.timeline-card__txt::before {
		left: initial;
		right: -20px;
	}

	.timeline-card__wrap {
		margin-left: 10px;
	}

	.timeline-box:nth-child(even) .timeline-card__wrap {
		margin-right: 10px;
	}

	.timeline-decor {
		margin-right: 0px;
		margin-left: -10px;
	}

	/*---- service -----*/
	.service-section {
		padding-bottom: 100px;
	}

	#service-info .service-title {
		font-size: 28px;
	}

	.pain {
		position: relative;
		margin-bottom: 24px;
	}

	.pain::before {
		display: none;
	}

	.pain:nth-child(1),
	.pain:nth-child(2),
	.pain:nth-child(3),
	.pain:nth-child(4) {
		top: 0;
		left: 0;
		width: 100%;
		animation: none;
	}

	.service-screen {
		width: 100%;
		height: auto;
		aspect-ratio: unset;
	}

	.service-screen svg {
		display: none;
	}

	/*---- news -----*/
	.search_bar ul.search_list {
		padding-top: 12px;
		justify-content: center;
	}

	/*---- SNS -----*/
	[id*="sns"] {
		--cnvs-sns-position-boxed-right: 15px;
	}
}

@media screen and (max-width: 767px) {

	/*---- root ----*/
	:root {
		--cnvs-font-size-title: 32px;
		--cnvs-font-size-body: 16px;

		--cnvs-slider-caption-width: 100%;
	}

	#logo a .logo-default {
		max-height: 60px;
	}

	/*----- slider -----*/
	#slider,
	.banner,
	#slider-mobile [class*="slider-arrow"] {
		display: none !important;
	}

	/*---- index ----*/
	.section-title .dot {
		top: 10px;
	}

	.data-item .counter,
	.data-item .plus {
		font-size: 50px;
	}

	.data-item .data-item-title {
		font-size: calc(var(--cnvs-font-size-body));
	}

	/*---- intro -----*/
	.intro-brand-box {
		min-height: 350px;
	}

	.intro-brand-box .title p {
		margin-bottom: 16px;
	}

	.intro-box {
		gap: 16px;
	}

	.intro-manage-wrap {
		aspect-ratio: 1;
		gap: 8px;
	}

	.intro-manage-box {
		padding: 24px 8px;
	}

	/*---- service -----*/
	.service-box {
		gap: 16px;
	}

	#service-info .service-item {
		padding: 24px 36px;
	}

	/*----- CTA -----*/
	.cta-title {
		font-size: 32px;
	}

	.cta-item,
	.cta-item .cta-block {
		padding: 36px;
	}

	/*---- news -----*/
	.news-title {
		font-size: 24px;
	}

	/*---- portfolio -----*/
	.portfolio-item .box .content {
		padding: 16px;
	}

	.portfolio-item .box .content .title {
		margin-bottom: 8px;
	}

	.portfolio_info_item .item .img {
		display: none;
	}

	.portfolio_info_item .content {
		width: 100%;
	}

	/*---- footer ----*/
	.copyright-wrap {
		flex-direction: column;
		align-items: start;
		justify-content: start;
		gap: 16px;
	}
}

@media screen and (max-width: 575px) {

	/*---- root ----*/
	:root {
		--cnvs-content-padding: 40px;
	}

	#logo a .logo-default {
		transform: scale(0.75);
		transform-origin: left center;
	}

	/*---- index -----*/
	.data-section {
		padding: 24px 0;
	}

	.data-item .counter,
	.data-item .plus {
		font-size: 40px;
	}

	/*---- intro -----*/
	.intro-brand-box {
		padding: 10%;
		min-height: 250px;
	}

	.intro-manage-wrap {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.timeline-box_wrap {
		position: relative;
		padding: 20px 0px;
	}

	.timeline-decor .d-line {
		width: 20px;
		margin: 0px 5px;
	}

	/*---- service ----*/
	.services-grid .feature-box {
		padding: 1rem;
		aspect-ratio: unset;
	}

	#service-info .service-title {
		gap: 8px;
	}

	#service-info .step {
		width: 40px;
		height: 40px;
	}

	#service-info .service-item {
		padding: 24px;
	}

	/*---- CTA -----*/
	.cta-title {
		background: var(--bs-white);
		-webkit-background-clip: text;
		-moz-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
	}

	.cta-item,
	.cta-item .cta-block {
		padding: 24px;
	}

	/*---- profolio -----*/
	.search_bar ul.search_list a {
		padding: 8px 12px;
	}

	/*---- contact ----*/
	.check-area {
		flex-direction: column;
		align-items: end;
	}
}

/* ============================================================
   最新資訊 側欄（news_list）— 卡片式樣式
   強調色沿用 Centrix 深藍 var(--cnvs-themecolor)
   ============================================================ */
/* 側欄 widget 一律一格一排（覆蓋主題平板 media query 的 50% 兩欄設定） */
.news-sidebar .sidebar-widgets-wrap {
	display: block;
	margin: 0;
}

.news-sidebar .sidebar-widgets-wrap .widget,
.news-sidebar .widget {
	flex: none;
	width: 100%;
	max-width: 100%;
	margin-top: 24px;
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--cnvs-box-border);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(var(--cnvs-themecolor-rgb), 0.05);
}

.news-sidebar .sidebar-widgets-wrap .widget:first-child,
.news-sidebar .widget:first-child {
	margin-top: 0;
	padding-top: 24px;
	border-top: 1px solid var(--cnvs-box-border);
}

/* 區塊標題 + 深藍強調底線 */
.news-sidebar .widget > h4 {
	position: relative;
	margin-bottom: 24px;
	padding-bottom: 14px;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: none;
	color: var(--cnvs-heading-color, #1e1e2d);
	border-bottom: 1px solid var(--cnvs-box-border);
}

.news-sidebar .widget > h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44px;
	height: 3px;
	background: var(--cnvs-themecolor);
	border-radius: 3px;
}

/* 搜尋：輸入框 + 圓角矩形 icon 鈕 */
.news-sidebar .search_form input[type="search"] {
	padding: 13px 66px 13px 18px;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.news-sidebar .search_form .search-btn__text {
	display: none;
}

.news-sidebar .search_form .search_btn {
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 46px;
	height: 36px;
	padding: 0;
	border: 0;
	background: var(--cnvs-themecolor);
	line-height: 1;
}

/* 移除 .button 的漸層疊層，避免小圓鈕外觀怪異 */
.news-sidebar .search_form .search_btn::before {
	display: none;
}

.news-sidebar .search_form .search_btn:hover {
	border: 0;
	background: var(--cnvs-hover, #5656be);
}

.news-sidebar .search_form .search-btn__icon {
	margin: 0;
	font-size: 0.875rem;
	color: var(--bs-white, #fff);
}

/* 文章分類：名稱靠左 + 數量靠右 + 逐列分隔線 */
.news-sidebar .widget_links ul {
	margin-top: 0 !important;
}

.news-sidebar .widget_links li {
	display: flex;
	align-items: center;
	padding: 12px 0 8px;
	font-size: 1rem;
	/* border-top: 1px solid rgba(var(--cnvs-box-border-rgb), 0.75); */
}

.news-sidebar .widget_links li:first-child {
	padding-top: 0;
	border-top: 0 !important;
}

.news-sidebar .widget_links li a {
	padding: 0;
	flex-grow: 1;
}

.news-sidebar .widget_links li a:hover {
	color: var(--cnvs-themecolor) !important;
}

.news-sidebar .widget_links li .count {
	margin-left: auto;
	padding-left: 12px;
	font-size: 0.9375rem;
	color: var(--cnvs-contrast-500, #8a8a99);
}

/* 熱門點閱：固定橫式縮圖尺寸（避免行動版被放大擠壓右側內容） */
.news-sidebar .posts-sm .entry-image,
.news-sidebar .posts-sm .entry-image > a,
.news-sidebar .posts-sm .entry-image img {
	width: 84px;
}

.news-sidebar .posts-sm .entry-image img {
	height: 60px;
	object-fit: cover;
	border-radius: 8px;
}

/* 縮圖固定在左、內容在右：版面變窄時不摺行 */
.news-sidebar .posts-sm .grid-inner {
	flex-wrap: nowrap;
}

.news-sidebar .posts-sm .grid-inner > .col {
	min-width: 0;
}

/* meta：閱讀數 + 日期同一行、小號灰字、移除主題預設「⁞」分隔符 */
.news-sidebar .posts-sm .entry-meta {
	margin-top: 0;
	margin-bottom: 5px;
	overflow: visible;
	font-size: 12px;
}

.news-sidebar .posts-sm .entry-meta ul {
	margin: 0;
	padding: 0;
	gap: 2px 12px;
	flex-wrap: wrap;
}

.news-sidebar .posts-sm .entry-meta li {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

.news-sidebar .posts-sm .entry-meta li::before {
	display: none;
}

.news-sidebar .posts-sm .entry-meta i {
	padding-left: 0;
	margin-right: 5px;
	font-size: 12px;
}

.news-sidebar .posts-sm .entry-title h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.5;
}

.news-sidebar .posts-sm .entry-title h4 a {
	color: var(--cnvs-heading-color, #1e1e2d);
	transition: color 0.25s ease;
}

.news-sidebar .posts-sm .entry-title h4 a:hover {
	color: var(--cnvs-themecolor);
}

.news-sidebar .posts-sm .entry::after {
	background-color: rgba(var(--cnvs-box-border-rgb), 0.75);
}

.news-sidebar .posts-sm .entry:last-child::after {
	display: none;
}

/* 熱門關鍵字：淡底藥丸、hover 深藍 */
.news-sidebar .tagcloud a {
	background: var(--cnvs-contrast-100, #f4f5f8);
	border-color: transparent;
	color: var(--cnvs-contrast-700, #555);
}

.news-sidebar .tagcloud a:hover {
	background: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor) !important;
	color: #fff !important;
}