@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
* {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans TC', Microsoft Jhenghei, '微軟正黑體', sans-serif;
	color: #554d56;
}

a {
	text-decoration: underline;
	color: inherit;
}

a:link {
	text-decoration: underline;
	color: inherit;
}

a:hover {
	text-decoration: underline;
	color: inherit;
}

a:visit {
	text-decoration: underline;
	color: inherit;
}

.navLink a {
	margin-left: 1.25rem;
	padding-top: 15px;
	display: inline-block;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
}

.navLink a.active {
	color: #1b4b9f;
}

body {
	background-repeat: no-repeat;
	background-position: top center;
}

.nav {
	width: 95%;
	margin: auto;
}

#pc_nav {
	display: block;
	float: right;
	margin-right: 1rem;
}

#mobile_nav {
	display: none;
	float: right;
	margin-right: 1rem;
	border: 0px;
	height: 40px;
}

.navall {
	padding: 10px 0px 0px 0px;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgb(108 108 108 / 20%);
	z-index: 999999;
	position: fixed;
	width: 100%;
}

.nav .logo {
	margin-left: 1rem;
}

.top {
	width: 100%;
	margin: auto;
	background-image: url(../images/topbg.png);
	background-position: right center;
	background-repeat: no-repeat;
	padding-top: 5rem;
}

.smalltopimg {
	display: none;
}

.banner {
	max-width: 1100px;
	margin: auto;
	height: 680px;
	background-repeat: no-repeat;
	background-position: right 50px;
	position: relative;
}

.bannertop {
	vertical-align: middle;
	text-align: left;
	/* display: table-cell; */
	height: 100%;
	position: relative;
	width: 600px;
}

.bannertop h1 {
	font-weight: 700;
	margin: auto;
	top: 23%;
	position: absolute;
	width: 100%;
}

.headline {
	font-family: Arial;
	font-size: 3.5rem;
	text-align: center;
}

.productName {
	color: #adadad;
	font-size: 1.5rem;
	margin-top: 0.5rem;
	letter-spacing: 20px;
	font-weight: 400;
	text-align: center;
	text-indent: 20px;
}

.eyebrow {
	text-align: center;
	font-size: 2rem;
	margin-top: 1rem;
	font-weight: 700;
}

.bannerBtn {
	width: 100%;
	margin: auto;
	position: absolute;
	text-align: center;
}

.bannerBtn a {
	margin-top: 2rem;
	letter-spacing: 3px;
}

.mark1 {
	position: absolute;
	top: -45px;
	left: -150px;
	display: inline-block;
}

.mark2 {
	position: absolute;
	top: 100px;
	right: 60px;
	display: inline-block;
}

.mark3 {
	position: absolute;
	top: 150px;
	right: 55px;
	display: inline-block;
}

.mark4 {
	position: absolute;
	top: 285px;
	right: 55px;
	display: inline-block;
}

.qa-title {
	line-height: 1.2;
	margin-bottom: 15px;
	width: 100%;
	margin: auto;
	font-weight: bold;
	padding-bottom: 4rem;
	display: table;
}

.qa-title .title {
	display: table-cell;
	width: 30%;
	text-align: left;
	vertical-align: middle;
	letter-spacing: 3px;
	font-size: 2.75rem;
	position: relative;
}

.qa-title .title span {
	position: relative;
	z-index: 300;
	background-position: right bottom;
	background-repeat: no-repeat;
}

.qa-title .title .t {
	position: absolute;
	left: 12rem;
	top: 2rem;
}

.qa-title .paragraph {
	display: table-cell;
	line-height: 1.2rem;
	vertical-align: top;
}

.qa-title .paragraph .part1 {
	font-size: 1.5rem;
	letter-spacing: 3px;
	float: left;
	border-bottom: 3px dotted #554d56;
	padding-bottom: 1rem;
}

.qa-title .paragraph .part2 {
	font-size: 1rem;
	float: left;
	padding-top: 0.5rem;
	width: 100%;
	font-weight: 500;
	letter-spacing: 1px;
	font-weight: 400;
	line-height: 1.75;
}

.okbutton {
	display: inline-block;
	width: 250px;
	height: 64px;
	font-size: 1.5rem;
	color: #ffffff;
	font-weight: 500;
	background-color: #1b4b9f;
	border: 1px #1b4b9f solid;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	line-height: 64px;
}

.morebutton {
	display: inline-block;
	width: 250px;
	height: 64px;
	font-size: 1.5rem;
	color: #1b4b9f;
	font-weight: 500;
	background-color: #ffffff;
	border: 1px #1b4b9f solid;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	line-height: 64px;
}

.okbutton:hover {
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.morebutton:hover {
	color: #1b4b9f;
	font-weight: 500;
	background-color: #ffffff;
	border: 1px #1b4b9f solid;
	text-decoration: none;
	cursor: pointer;
}

.fill img {
	width: 100%;
	display: block;
}

.bannerline {
	border: 0;
	border-bottom: 2px #1b4b9f solid;
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	margin-top: 1rem;
	animation: separator-width1 1s ease-out forwards;
}

@keyframes separator-width1 {
	0% {
		width: 0;
	}
	100% {
		width: 100px;
	}
}

.qa-title .title .qa-line {
	border: 0;
	display: inline-block;
	border-bottom: 2px #1b4b9f solid;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	animation: separator-width2 1s ease-out forwards;
	margin: auto;
}

@keyframes separator-width2 {
	0% {
		width: 0;
	}
	100% {
		width: 2rem;
	}
}

.qa-title .title .qa-mark {
	border: 0;
	display: inline-block;
	border-left: 10px #1b4b9f solid;
	margin-left: auto;
	margin-right: auto;
	animation: separator-width3 1s ease-out forwards;
	height: 2.5rem;
	bottom: -5px;
}

@keyframes separator-width3 {
	0% {
		width: 0;
	}
	100% {
		width: 1rem;
	}
}

.serviceWrapper {
	padding-top: 0rem;
	width: 100%;
	margin: auto;
	margin-bottom: 5rem;
}

.serviceWrapper>div {
	max-width: 1200px;
	margin: auto;
}

.serviceContent {
	display: flex;
	margin: auto;
	max-width: 1200px;
	justify-content: space-around;
}

.serviceItem {
	width: 200px;
}

.serviceIcon {
	border: 1px #2a457f solid;
	padding: 0.875rem;
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	border-radius: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3rem;
}

.serviceIcon .fill {
	width: 100%;
	max-width: 48px;
}

.serviceText .title {
	font-size: 1.5rem;
	font-weight: 600;
	padding-bottom: 1.5rem;
	text-align: center;
	letter-spacing: 3px;
	text-indent: -1px;
}

.serviceText .text {
	font-size: 1rem;
	line-height: 1.875rem;
	text-align: justify;
}

.logoWrapper {
	width: 100%;
	margin: 0 auto;
	height: auto;
}

.logo-title {
	color: #333333;
	font-size: 1.75rem;
	font-weight: 600;
	height: 4rem;
	max-width: 1200px;
	width: 90%;
	margin: auto;
	text-align: center;
}

.logoWrapper>div {
	max-width: 1200px;
	margin: auto;
}

.single-item .slick-slide {}

.highlightsWrapper {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 4rem;
}

.highlightsWrapper>div {
	padding-top: 0rem;
	max-width: 1200px;
	margin: auto;
}

.highlightsContent {
	margin: auto;
}

.highlightsList {
	display: table;
	width: 100%;
}

.highlightsList+.highlightsList {
	margin-top: 4rem;
}

.list2 .item2 {
	float: left;
	margin-top: 3rem;
}

.list2 .item1 {
	float: right;
}

.highlightsItem {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
}

.highlightsText {
	margin: auto;
	margin-left: 2rem;
	display: inline-block;
}

.highlightsText .title {
	font-size: 1.5rem;
	font-weight: 600;
	padding-bottom: 1rem;
}

.highlightsText .text {
	font-size: 1rem;
	line-height: 1.875rem;
	margin-top: 1rem;
	display: inline-block;
}

.highlightsImg {
	text-align: center;
}

.highlightsImg .fill {
	width: 100%;
	max-width: 550px;
	display: inline-block;
}

.highlightsText .text .logo {
	display: flex;
	margin: auto;
}

.highlightsText .text .logo ul {
	margin-left: 20px;
	margin-right: 1rem;
}

.highlightsText .text .logo ul:last-child {
	margin-right: 0px;
}

.highlightsText .text ul li {
	list-style-type: decimal;
	list-style-type: disc;
	line-height: 2;
	text-align: left;
}

.highlightsText .text ul.x3 li {
	list-style-position: inside;
	padding-left: 5px;
}

.highlightsText .text .sub {
	display: flex;
	margin: auto;
}

.highlightsText .text .sub ul {
	margin-right: 20px;
}

.highlightsText .text .sub ul:last-child {
	margin-right: 0px;
}

.contactWrapper {
	max-width: 500px;
	margin: 0 auto;
	display: block;
	text-align: center;
	padding-bottom: 3rem;
	font-family: Arial;
}

.contactWrapper>div {
	padding-top: 0rem;
	margin: auto;
}

.contactWrapper .contact-title {
	font-size: 1.75rem;
	color: #333333;
	font-weight: 600;
	text-align: center;
	letter-spacing: 3px;
}

.contactWrapper .contact .title {
	font-size: 1rem;
	font-weight: 600;
	padding-bottom: 0.5rem;
	letter-spacing: 3px;
}

.contactWrapper .contact ul li {
	line-height: 1.6;
	font-family: Arail;
	padding-bottom: 0.5rem;
}

.contactWrapper .fbline .fb {
	width: 40px;
	display: inline-block;
	cursor: pointer;
	padding-bottom: 0.3rem;
}

.contactWrapper .contactline {
	border: 0;
	border-bottom: 1px #1b4b9f solid;
	margin-left: auto;
	margin-right: auto;
	animation: separator-width4 2s ease-out forwards;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

@keyframes separator-width4 {
	0% {
		width: 0;
	}
	100% {
		width: 120px;
	}
}

.contactWrapper .fbline .line {
	width: 40px;
	display: inline-block;
	cursor: pointer;
	padding-bottom: 0.3rem;
}

.contactWrapper .fbline img {
	display: block;
	width: 100%;
}

.copyright {
	font-size: 1rem;
	color: #666666;
	text-align: center;
	width: 100%;
	min-height: 100px;
	padding-top: 2rem;
}

.copyright br {
	display: none;
}

.recommendBg {
	padding-top: 3rem;
	background-color: #eceded;
}