@charset "UTF-8";
/* =========================================================================

==base
==header
==banner
==intro
==service
==news
==album
==contact
==recruit
==footer
==breadcrumb + pagination
==RWD

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

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

/* =========================================================================
==base
========================================================================= */
:root {
	--fs-BNTitle: 48px;
	--fs-BNTxt: 20px;
	--fs-sectionTitle: 36px;
	--fs-infoTitle: 28px;
	--fs-sidebarTitle: 22px;
	--fs-itemTitle: 20px;
	--fs-footerTitle: 22px;
	--fs-headerNav: 18px;
	--fs-normal: 16px;
	--fs-small: 14px;

	--section: 80px;

	--cnvs-themecolor: #1b5097;
	--cnvs-themecolor-rgb: 27, 80, 151;
	--cnvs-blue: #38B6FF;
	--cnvs-green: #7CBAC2;
}

/* ================= base ================= */
body,
.form-control {
	word-break: break-word;
	letter-spacing: 1px;
	line-height: 1.75;
	font-weight: 400;
	font-family: "Noto Sans TC", sans-serif;
	color: var(--cnvs-black);
	font-size: var(--fs-normal);
}

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

p:last-child,
ul:last-child,
ol:last-child,
li:last-child,
form:last-child,
.form-control:last-child {
	margin-bottom: 0;
}

a {
	color: var(--cnvs-black);
	transition: .3s ease;
}

a:hover {
	color: var(--cnvs-blue);
}

button {
	transition: .3s ease;
}

/* ================= 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;
}	

@media (min-width:768px) {
	.three-md-row {
		display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
	}
}

/* ==================== btn ==================== */
.btn-base {
	display: inline-block;
	color: var(--cnvs-white);
	background-color: var(--cnvs-green);
	font-weight: 500;
	padding: 8px 32px;
	border-radius: 4px;
	transition: .3s ease;
}

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

/* ==================== title ==================== */
.section-title {
	font-size: var(--fs-sectionTitle);
	color: var(--cnvs-black);
	line-height: 1.3;
}

.section-title:after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background-color: var(--cnvs-green);
	margin: 30px auto 0;
}

.section-title.text-white:after {
	background-color: var(--cnvs-white);
}

.item-title,
.item-title a {
	font-size: var(--fs-itemTitle);
	color: var(--cnvs-themecolor);
	line-height: 1.3;
	font-weight: 600;
}

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

.footer-title {
	font-size: var(--fs-footerTitle);
}

.sidebar-title {
	font-size: var(--fs-footerTitle);
	color: var(--cnvs-black);
}

.info-title {
	font-size: var(--fs-infoTitle);
	color: var(--cnvs-themecolor);
}

/* ==================== other ==================== */
.section {
	background-color: transparent;
	padding: var(--section) 0;
	margin: 0;
}

.color-blue,
.h-color-blue:hover,
.h-color-blue:active {
	color: var(--cnvs-blue) !important;
}

.color-green,
.h-color-green:hover,
.h-color-green:active {
	color: var(--cnvs-green) !important;
}

.bg-green {
	background-color: var(--cnvs-green) !important;
}

.h-bg-blue:hover,
.h-bg-blue:active {
	background-color: var(--cnvs-blue) !important;
}

.fs-18 {
	font-size: var(--fs-headerNav);
}

/* =========================================================================
==header
========================================================================= */
#header {
	--cnvs-header-height-md: 80px;
}

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

.is-expanded-menu .sub-menu-container .menu-item:hover > .menu-link,
.menu-item:hover > .menu-link {
	color: var(--cnvs-blue);
}

.menu-link,
.sub-menu-container .menu-item > .menu-link,
.is-expanded-menu .sub-menu-container .menu-item > .menu-link {
	font-size: var(--fs-headerNav);
	font-weight: 500;
	line-height: 1.3;
	color: var(--cnvs-black);
}

.menu-item.sub-menu .menu-link > div {
	display: flex;
	align-items: center;
}

#header-wrap #logo img {
	height: 60px;
}

/* ==================== search ==================== */
.header-misc-icon > a {
	font-size: calc(var(--fs-headerNav) + 1px);
}

.top-search-form input {
	font-size: var(--fs-headerNav);
}

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

.swiper-slide-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
}

.banner-title {
	font-size: var(--fs-BNTitle);
	font-weight: 600;
	line-height: 1.3;
	color: var(--cnvs-white);
	margin-bottom: 0;
}

.banner-txt,
.slider-caption p {
	font-size: var(--fs-BNTxt);
	font-weight: 400;
	color: var(--cnvs-white);
	margin-bottom: 0;
}

/* =========================================================================
==intro
========================================================================= */
.index-intro-wrap {
	text-align: center;
}

.intro-special-txt {
	font-size: calc(var(--fs-itemTitle) + 4px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--cnvs-black);
	color: var(--cnvs-themecolor);
}

.intro-icons-box {
	padding: 48px 112px;
	border-radius: 10px;
	border: 1px solid rgba(22, 64, 121, 0.50);
}

.intro-icons-box .row {
	row-gap: 30px;
}

.intro-icons-box h3 {
	color: var(--cnvs-themecolor);
	font-size: var(--fs-headerNav);
	font-weight: 700;
}

.intro-icons-box img {
	width: 64px;
}

/* ==================== info ==================== */
.intro-info-icons .item {
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
	height: 100%;
	border-radius: 10px;
}

.intro-info-icons .item img {
	width: 80px;
}

.intro-info-icons .item .item-title {
	font-size: var(--fs-headerNav);
}

.intro-wrap2 .img-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--cnvs-themecolor);
	opacity: 0.85;
	pointer-events: none ;
}

.intro-wrap2 .color-blue {
	color: #99d9ff !important;
}

.intro-wrap3 .section-title:after {
	margin: 30px 0 0;
}

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

.history_6__time-item:nth-child(even)::before {
  background: var(--cnvs-green);
}

.history_6__time-item .history_6__time-year {
  width: 20%;
  background: var(--cnvs-themecolor);
  height: fit-content;
}

.history_6__time-item:nth-child(even) .history_6__time-year {
  background: var(--cnvs-green);
}

.history_6__time-txt {
  position: relative;
  margin-left: 10%;
  width: 70%;
  padding: 10px 0px 10px 30px;
}

/* ==================== certificate ==================== */
.cer-item {
  display: block;
	background-color: rgb(124 186 194 / 50%);
  border-bottom: 4px solid var(--cnvs-themecolor);
}

/* =========================================================================
==service
========================================================================= */
.service-items-wrap {
	row-gap: 30px;
}

.service-item {
	border-radius: 10px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
}

.service-item .img-wrap {
	width: 40%;
}

.service-item .img-wrap img {
	transition: .3s ease;
	width: 100%;
	aspect-ratio: 1920 / 1280;
	object-fit: contain;
}

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

.service-item .txt-wrap {
	width: 56%;
	gap: 10px;
}

/* ==================== info ==================== */
[id^="service-"] {
	transform: translateY(-130px);
}

.service-item.info .txt-wrap.overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--cnvs-white);
	opacity: 0.85;
	z-index: -1;
}

/* =========================================================================
==news
========================================================================= */
.date {
	color: rgba(0, 0, 0, 0.5);
}

.news-item {
	border-bottom: 2px solid rgba(var(--cnvs-themecolor-rgb), 0.25);
	padding-bottom: 24px;
	margin-bottom: 24px;
}

.news-item p {
	color: #4E4E4E;
}

.news-item .img-wrap img {
	aspect-ratio: 960 / 640;
	object-fit: contain;
}

.tag {
	display: inline-block;
	color: var(--cnvs-white);
	padding: 2px 12px;
	background-color: var(--cnvs-green);
	border-radius: 100px;
}

.tag:hover,
.tag:active {
	color: var(--cnvs-white);
	background-color: var(--cnvs-blue);
}

.news-item .img-wrap img {
	transition: .3s ease;
	width: 100%;
	aspect-ratio: 960 / 640;
	object-fit: contain;
}

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

/* ================= sidebar ================= */
.sidebar-wrap {
  top: 125px;
	position: sticky;
}

.sidebar-wrap button {
	transition: .3s ease;
}

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

.news_1__widget-item {
  border: 2px solid rgba(var(--cnvs-themecolor-rgb),.3);
	background-color: rgba(124, 186, 194, 0.15);
  margin-bottom: 36px;
}

.news_1__widget-categories li {
  border-bottom: 1px solid #DDD;
}

.news_1__widget-categories li:hover {
  border-color: var(--cnvs-green);
  background-color: var(--cnvs-green);
}

.news_1__widget-categories li:hover a {
	color: var(--cnvs-white);
}

.news_1__widget-categories li.active {
  border-color: var(--cnvs-themecolor);
  background-color: var(--cnvs-themecolor);
}

.news_1__widget-categories li.active a,
.news_1__widget-categories li.active span {
  color: var(--cnvs-white);
}

.news_1__widget-categories i {
  font-size: 12px;
	transform: translateY(4px);
}

.news_1__widget-categories li a {
	padding: 12px 16px;
}

/* ================= hot ================= */
.news_1__side-thumb {
  width: 120px;
}

.news_1__side-content {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  width: calc(100% - 136px);
  margin-top: -7px;
}

.news_1__side-content span {
  color: #888888;
  font-size: 14px;
  text-transform: uppercase;
}

.news_1__side-content h3 {
  font-size: 18px;
}

.news_1__side-content h3 a:hover {
  color: var(--cnvs-themecolor);
}

.hot-date {
	font-size: 15px;
	line-height: 1.3;
}

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

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

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

.page-link {
	width: 44px;
	height: 44px;
	border: 1px solid var(--cnvs-themecolor);
}

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

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

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

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

/* ================= news share ================= */
.news-share-wrap,
.news-share-wrap > * {
	border-color: #6C757D !important;
}

/* =========================================================================
==album
========================================================================= */
.php_album_wrap {
	margin-bottom: -32px;
}

.album-item {
	margin-bottom: 32px;
}

.album-item .main-wrap {
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
}

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

.album-item .main-wrap:hover .img-wrap:before {
  opacity: 1;
}

.album-item .img-wrap img {
	transition: .3s ease;
	width: 100%;
	aspect-ratio: 960 / 640;
	object-fit: contain;
}

.album-item .main-wrap:hover .img-wrap img {
	transform: scale(1.05);
}

.album-item .title {
	width: 77%;
	left: 3px;
	background-color: var(--cnvs-green);
	border-radius: 0 15px 0 0;
	transition: .3s ease;
	box-shadow: 2px -4px 2px 0px rgba(0, 0, 0, 0.1);
}

.album-item .main-wrap:hover .title {
	background-color: var(--cnvs-blue);
}

.album-item .tag {
	width: 110px;
	right: 3px;
	padding: 6px 12px;
	border-radius: 12px 0 0 0;
	box-shadow: -4px 0px 2px 0px rgba(0, 0, 0, 0.1);
}

/* ================= info ================= */
.gallery-item .img-wrap:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 0%;
	background-color: rgb(255, 255, 255, 0.3);
	z-index: 1;
	transition: .3s ease;
	opacity: 0;
}

.gallery-item:hover .img-wrap:before {
	height: 100%;
	opacity: 1;
}

.albumSlide-item img {
	aspect-ratio: 960 / 640;
	width: 100%;
	object-fit: cover;
}

/* ================= taiwan ================= */
.country {
	position: absolute;
	text-align: left;
}

/* === 分區 === */
.country.north-wrap {
	top: 50%;
	right: 50%;
	transform: translate(calc(50% + 320px), calc(-1 * (50% + 125px)));
}

.country.east-wrap {
	bottom: 0;
	right: 50%;
	transform: translateX(calc(50% + 320px));
}

.country.middle-wrap {
	top: 50%;
	left: 50%;
	transform: translate(calc(-1 * (50% + 325px)), calc(-1 * (50% + 125px)));
}

.country.south-wrap {
	bottom: 0;
	left: 50%;
	transform: translateX(calc(-1 * (50% + 325px)));
}

/* === 標號 === */
.country-list {
	list-style: none;
	padding-left: 0;
}

.country-list li {
	display: flex;
	align-items: start;
}

.country-list li:before {
	content: '';
	display: inline-block;
	margin-right: 8px;
	width: 8px;
	height: 14px;
	background-color: var(--cnvs-green);
	border-radius: 0 25px 25px 0;
	transform: translateY(7px);
	flex-shrink: 0;
}

/* === 線條 === */
.country-line {
	height: 1px;
}

.country-line:before {
	content: '';
	position: absolute;
	top: 50%;
	right: -4px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--cnvs-themecolor);
	background-color: var(--cnvs-white);
	border-radius: 50%;
	transform: translateY(-50%);
}

.country-line:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translateY(-50%);
}

.country-line + div {
	min-height: 215px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.country-line + div .item-title,
.country-line + div .country-list {
	z-index: 1;
}

.north-wrap .country-line {
	background-color: #529aa3;
	position: absolute;
	top: calc(50% - 20px);
	left: -80px;
	width: 60px;
}

.north-wrap .country-line:before {
	border-color: #529aa3;
}

.north-wrap .country-line:after {
	background-color: #529aa3;
}

.east-wrap .country-line {
	background-color: #2c7468;
	position: absolute;
	top: calc(50% - 50px);
	left: -140px;
	width: 60px;
}

.east-wrap .country-line:before {
	border-color: #2c7468;
}

.east-wrap .country-line:after {
	background-color: #2c7468;
}

.middle-wrap .country-line {
	background-color: #228ac6;
	position: absolute;
	top: calc(50% + 20px);
	right: -140px;
	width: 60px;
}

.middle-wrap .country-line:before {
	border-color: #228ac6;
}

.middle-wrap .country-line:after {
	background-color: #228ac6;
}

.south-wrap .country-line {
	background-color: #0c2d5b;
	position: absolute;
	top: 50%;
	right: -95px;
	width: 60px;
}

.south-wrap .country-line:before {
	border-color: #0c2d5b;
}

.south-wrap .country-line:after {
	background-color: #0c2d5b;
}

.middle-wrap .country-line:before,
.south-wrap .country-line:before {
	left: -4px;
}

.middle-wrap .country-line:after,
.south-wrap .country-line:after {
	left: 0;
}

/* =========================================================================
==contact
========================================================================= */
.index-contact {
	background: linear-gradient(180deg, #164079 0%, #83B6FA 50%, #FFF 50%, #FFF 100%);
}

.index-contact::before {
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/contactbg_1920x445.png) no-repeat;
}

.index-contact .box-wrap {
	border-radius: 10px;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
}

/* ================= info ================= */
.contact-wrap h2 {
	margin-bottom: 32px;
}

.contact-wrap h2:after {
  content: "";
  background: var(--cnvs-themecolor);
  position: absolute;
  left: 0;
  bottom: -1.5px;
  height: 1px;
  width: 150px;
}

.contact-wrap .contact-info {
	padding-right: 50px;
}

.contact-info a {
	color: var(--cnvs-text);
}

.contact-info a:hover,
.contact-info a:active {
	color: var(--cnvs-themecolor);
}

.contact-form .form-control {
	padding: 12px 16px;
}

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

.contact-form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	transform: translateY(7px);
}

.contact-form input[type="checkbox"]:checked {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
}

.contact-ok-title {
	font-size: var(--fs-sectionTitle);
}

.data-send {
	display: flex;
}

/* =========================================================================
==recruit
========================================================================= */
.recruit-sec2 {
	background-color: rgb(124 186 194 / 10%);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cccccc' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.recruit-sec2 .item {
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
	border: 1px solid var(--cnvs-themecolor);
	transition: .3s ease;
}

.recruit-sec2 .item img {
	width: 80px;
}

.recruit-sec3 .item::after {
	content: '';
	position: absolute;
	top: 16px;
	left: 16px;
	width: 100%;
	height: 100%;
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.05);
	z-index: -1;
}

.recruit-sec4 .feature-box-border-vertical {
	background-color: rgb(124 186 194 / 10%);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cccccc' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.feature-box-border-vertical .feature-box:not(.noborder)::before,
.feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after {
	content: "";
	position: absolute;
	top: calc(64px + 13px);
	left: 59px;
	width: 2px;
	height: calc(100% - 90px);
	background-color: var(--cnvs-contrast-300);
	z-index: 0;
}

.feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after {
	background-color: var(--cnvs-themecolor);
	height: 0;
	transition: height .3s ease-in-out;
}

.feature-box-border-vertical.border-hover-animate .feature-box:hover:not(.noborder)::after {
	height: calc(100% - 90px);
}

.feature-box-border-vertical .fbox-icon i,
.feature-box-border-vertical .fbox-border.fbox-light .fbox-icon i {
	line-height: 60px;
	font-size: 24px;
	z-index: 1;
	text-align: center;
}

.fbox-content p {
	color: var(--cnvs-black);
	margin-bottom: 16px;
}

.fbox-border .fbox-icon a {
	background-color: var(--cnvs-white);
}

.fbox-border.fbox-light .fbox-icon a {
	border-color: var(--cnvs-contrast-300);
}

.recruit-sec4 .color-blue {
	color: #99d9ff !important;
}

.recruit-sec4 .img-wrap {
	position: sticky;
	width: 36%;
	top: 82px;
	height: calc(100vh - 82px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recruit-sec4 .img-wrap::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.7);
	width: 100%;
	height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23cccccc' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
	z-index: 1;
	pointer-events: none;
}

.recruit-sec4 .feature-box-border-vertical {
	width: 64%;
	min-height: calc(100vh - 82px);
}
	

/* =========================================================================
==footer
========================================================================= */
#footer {
	border-top: 1px solid rgba(22, 64, 121, 0.10);
	background: #F6F8FF;
	font-size: var(--fs-headerNav);
}

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

.footer-logo {
	width: 250px;
}

.widget-link {
	width: 125px;
}

.footer-sns-wrap {
	gap: 10px;
}

.sns-icon {
	width: 30px;
	height: 30px;
}

/* ==================== float sns ==================== */
.float-sns {
	z-index: 99;
	right: 22px;
	bottom: 80px;
}

.float-sns .social-icon {
	width: 60px;
	height: 60px;
	line-height: 58px !important;
}

.social-icon:hover i:first-child {
	margin-top: -60px;
}

.float-sns .bg-facebook i {
	transform: translateY(2px);
}

/* ==================== go to top ==================== */
#gotoTop {
	width: 42px;
	height: 42px;
}

#gotoTop:hover {
	background-color: var(--cnvs-blue);
}

/* =========================================================================
==breadcrumb + pagination
========================================================================= */
.breadcrumb-title {
	font-size: var(--fs-sectionTitle);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 1px;
	flex-shrink: 0;
	/* margin-right: 48px; */
}

.php_breadcrumb li:not(:last-child)::after {
	content: '/';
	display: inline-block;
	margin: 0 12px;
}

/* ==================== pagination ==================== */
.page-link.arrow {
	border: 1px solid transparent;
}

.page-link.arrow:hover {
	border-color: var(--cnvs-themecolor);
}

/* =========================================================================
==RWD
========================================================================= */
@media (max-width: 1399px) {
	.is-expanded-menu .menu-link {
		--cnvs-primary-menu-padding-x: 12px;
	}

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

	/* ==================== album ==================== */
	.album-item .title {
		width: 73.5%;
	}

	.album-item .tag {
		width: 105px;
	}
}

@media (max-width: 1199px) {
	:root {
		--fs-headerNav: 17px;
	}

	/* ==================== header ==================== */
	#header-wrap #logo img {
		height: 50px;
	}

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

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

	/* ==================== intro ==================== */
	.index-intro-wrap .deco-img {
		width: 450px;
	}

	/* ==================== album ==================== */
	.album-item .title {
    left: -4px;
	}

	.album-item .tag {
		right: -3px;
	}

	/* === editor === */
	/* .country.north-wrap {
		transform: translate(calc(50% + 305px), calc(-1 * (50% + 135px)));
	}

	.north-wrap .country-line {
		left: -110px;
		width: 80px;
	}

	.country.east-wrap {
		transform: translateX(calc(50% + 265px));
	}

	.east-wrap .country-line {
		left: -100px;
    width: 70px;
	}

	.country.middle-wrap {
		transform: translate(calc(-1 * (50% + 275px)), calc(-1 * (50% + 135px)));
	}

	.middle-wrap .country-line {
		right: -105px;
    width: 75px;
	}

	.country.south-wrap {
		transform: translateX(calc(-1 * (50% + 315px)));
	}

	.south-wrap .country-line {
		right: -110px;
    width: 80px;
	} */
}

@media (max-width: 991px) {
	.wow {
		animation-name: none !important;
		visibility: visible !important;
		opacity: 1;
	}

	:root {
		--fs-BNTitle: 40px;
		--fs-BNTxt: 18px;
		--fs-sectionTitle: 32px;
		--fs-infoTitle: 26px;
		--fs-sidebarTitle: 20px;
		--fs-footerTitle: 20px;

		--section: 60px;
	}

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

	/* ==================== header ==================== */
	#header-wrap #logo img {
    margin: 8px 0;
	}

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

	/* ==================== intro ==================== */
	.index-intro-wrap .deco-img {
		width: 335px;
	}

	.intro-icons-box {
		padding: 36px 48px;
	}

	.intro-info-icons .item img {
    width: 65px;
	}

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

	/* ==================== album ==================== */
	.album-item .title {
		width: 77%;
	}

	/* === editor === */
	.country-list li {
		font-size: 15px;
	}

	.country-list .fs-18 {
		font-size: 16px;
	}

	.country-line + div {
		min-height: auto !important;
	}

	.country.north-wrap {
		transform: translate(calc(50% + 235px), calc(-1 * (50% + 95px)));
	}

	.country.east-wrap {
		bottom: -15px;
		transform: translateX(calc(50% + 235px));
	}

	.country.south-wrap {
		bottom: -15px;
		transform: translateX(calc(-1 * (50% + 235px)));
	}

	.country.middle-wrap {
		transform: translate(calc(-1 * (50% + 235px)), calc(-1 * (50% + 95px)));
	}

	.country-line:before {
		width: 12px;
    height: 12px;
	}

	.country-line:after {
		width: 4px;
    height: 4px;
	}

	.north-wrap .country-line {
		left: -42px;
    width: 30px;
	}

	.east-wrap .country-line {
		left: -75px;
    width: 30px;
	}

	.middle-wrap .country-line {
		right: -76px;
    width: 30px;
	}

	.south-wrap .country-line {
		right: -46px;
    width: 30px;
	}

	/* .north-wrap .country-line {
		left: -70px;
		width: 55px;
	}

	.country.north-wrap {
		top: -65px;
		transform: translateX(calc(50% + 230px));
		width: 240px;
	}

	.country.east-wrap {
		bottom: -15px;
		transform: translateX(calc(50% + 205px));
		width: 266px;
	}

	.east-wrap .country-line {
		width: 55px;
		left: -75px;
		top: 15%;
	}

	.country.middle-wrap {
		transform: translate(calc(-1 * (50% + 210px)), calc(-1 * (50% + 115px)));
		width: 240px;
	}

	.middle-wrap .country-line {
		top: 72%;
		right: -70px;
		width: 55px;
	}

	.country.south-wrap {
		bottom: -110px;
		transform: translateX(calc(-1 * (50% + 235px)));
		width: 240px;
	}

	.south-wrap .country-line {
		top: 24%;
		right: -65px;
		width: 50px;
	} */

	/* ==================== contact ==================== */
	.contact-wrap .contact-info {
		padding-right: 0;
	}

	/* ==================== recruit ==================== */
	.recruit-sec2 .item img {
		width: 65px;
	}

	.recruit-sec4 .img-wrap {
		top: 67px;
		height: calc(100vh - 67px);
	}

	/* ==================== footer ==================== */
	.float-sns {
		right: 16px;
	}

	.float-sns .social-icon {
    width: 54px;
    height: 54px;
    line-height: 52px !important;
	}

	.social-icon:hover i:first-child {
		margin-top: -54px;
	}

	#gotoTop {
		--cnvs-gotoTop-position-boxed-right: 22px;
	}

	.footer-logo {
		width: 230px;
	}

	/* ==================== breadcrumb + pagination ==================== */
	.breadcrumb-title {
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	/* ==================== banner ==================== */
	.banner-txt {
		display: none;
	}

	/* ==================== banner ==================== */
	.index-intro-wrap .deco-img {
		width: 250px;
	}

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

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

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

	/* ==================== album ==================== */
	.album-item .title {
		width: 83%;
	}

	.album-item .tag {
		width: 115px;
	}

	/* === editor === */
	.taiwan-map {
		display: none;
	}

	.country-mobile {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.country {
		transform: none !important;
		position: static;
		width: calc(50% - 12px) !important;
	}

	/* ==================== recruit ==================== */
	.recruit-sec4 .img-wrap {
		position: relative;
		top: 0;
		width: 100%;
		height: 150px;
	}

	.recruit-sec4 .feature-box-border-vertical {
		margin-bottom: -50px;
		width: 100%;
		min-height: auto;
	}
	
	/* ==================== footer ==================== */
	.social-icon i {
		font-size: 28px !important;
	}
}

@media (max-width: 575px) {
	:root {
		--fs-BNTitle: 24px;
		--fs-infoTitle: 24px;
		--fs-sectionTitle: 28px;

		--section: 40px;

		--cnvs-canvas-slider-dots-size: 8px;
	}

	/* ==================== header ==================== */
	#header-wrap #logo img {
		height: 45px;
	}
	.header-wrap-clone {
		height: 62px;
	}

	/* ==================== banner ==================== */
	#slider {
		--cnvs-swiper-dots-position-bottom: 10px;
	}

	#slider .btn-base {
		padding: 6px 24px;
	}

	/* ==================== intro ==================== */
	.history_6__time-item .history_6__time-year {
    width: 100%;
    padding: 5px;
  }

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

  .history_6__time-item .history_6__time-txt {
    width: 100%;
    padding: 4px 0 0;
    margin-left: 0;
  }

	/* ==================== service ==================== */
	.service-item .img-wrap,
	.service-item .txt-wrap {
		width: 100%;
	}

	/* ==================== news ==================== */
	.news-share-wrap [class*=border-] {
		border: 0 !important;
	}

	.news-share-wrap a {
		display: inline-block;
		font-size: 24px;
		margin: 0 8px;
	}

	.news-share-wrap a[title="Facebook"] {
		font-size: 26px;
		transform: translateY(-1px);
	}

	/* ==================== album ==================== */
	.album-item .title {
		width: 75%;
	}
	
	.album-item .tag {
		width: 27%;
		min-width: 105px;
	}

	/* === editor === */
	.country {
		width: 100% !important;;
	}

	/* ==================== recruit ==================== */
	.recruit-sec3 .item > div {
		padding: 32px !important;
	}

	.feature-box {
		--cnvs-featured-box-icon: 3.5rem;
	}

	.feature-box-border-vertical .fbox-icon i,
	.feature-box-border-vertical .fbox-border.fbox-light .fbox-icon i {
		line-height: 54px;
	}

	.fbox-content {
		padding-left: 6px;
	}

	/* ==================== footer ==================== */
	.footer-logo {
		width: 200px;
	}

	.float-sns .social-icon {
    width: 50px;
    height: 50px;
    line-height: 48px !important;
	}

	.social-icon:hover i:first-child {
		margin-top: -50px;
	}
	
	.float-sns {
		right: 12px;
	}

	.stretched #gotoTop {
		right: 18px;
	}

	/* ==================== breadcrumb + pagintaion ==================== */
	.page-link {
		width: 38px;
		height: 38px;
	}
}