#banner
{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius:0 0 50% 0;
	overflow: hidden;
	.slider
	{
		display: flex;
		overflow: hidden;
		article
		{
			min-width:100%;
			.article
			{
				color:#fff;
				h2
				{
					span
					{
						display: block;
					}
				}
			}
			picture
			{        
				img
				{
					display: block;
					width: 100%;
				}
			}
		}
	}

	@media(min-width:1200px)
	{
		background-image:url('<?=userimg($banner->bg->data)?>');
		padding-top:200px;
		margin-bottom:100px;
		.slider
		{
			article
			{
				display: flex;
				align-items:center;
				.article
				{
					flex:1;
					padding-right:pxvw(100);
					h2
					{
						font-size:48px;
						line-height:72px;
						letter-spacing: 4.32px;
						font-weight: 700;
						span
						{
							font-size:20px;
							padding:26px 0;
							letter-spacing: 1.8px;
							line-height:30px;
							font-weight: 500;
						}
					}
					p
					{
						font-size:16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 1.44px;
					}
					.more
					{
						display: flex;
						padding:26px 0;
						a
						{

							color:#002D5E;
							padding:15px 66px;
							background-color: #fff;
							border-radius: 54px;
							font-size:20px;
							line-height: 30px;
							letter-spacing: 1.8px;
							font-weight: 400;
							&:hover
							{
								transition-duration:0.5s;
								background-color: #002D5E;
								color:#fff;
							}
						}
					}
				}
				picture
				{
					width: 66.85%;
				}
			}
		}
	}
	@media(min-width:1400px)
	{
		.slider
		{
			article
			{
				.article
				{
					padding-right:100px;
				}
			}
		}
	}
	@media(max-width:1199px)
	{
		margin-bottom:100px;
		padding-top:90px;
		background-image:url('<?=userimg($banner->mobileBg->data)?>');
		article
		{
			h2
			{
				font-size: pxvw(24,390);
				font-weight: 700;
				line-height: pxvw(36,390); /* 150% */
				letter-spacing: pxvw(2.16,390);
				
				span
				{
					padding:pxvw(17,390) 0;
					font-size: pxvw(16,390);
					font-weight: 400;
					line-height: pxvw(24,390); /* 150% */
					letter-spacing: pxvw(1.44,390);
				}
			}
			p
			{
				font-size: pxvw(16,390);
				font-weight: 400;
				line-height: pxvw(24,390);
				letter-spacing: pxvw(1.44,390);
				margin-bottom:pxvw(28,390);
			}
			.more
			{
				display: flex;
				margin-bottom:pxvw(50,390);
				a
				{
					color:#002D5E;
					padding:pxvw(7.25,390) pxvw(38.35,390);
					border-radius: pxvw(54,390);
					background-color: #fff;
					font-size: pxvw(20,390);
					font-weight: 500;
					line-height: pxvw(30,390); /* 150% */
					letter-spacing: pxvw(1.8,390);
				}
			}
		}
	}
}

#service
{
	margin-bottom:100px;
	.header
	{
		h2
		{
			margin-bottom:25px;
			a
			{
				color:$main-color;
				font-size: 24px;
				font-weight: 700;
				line-height: 36px;
				letter-spacing: 2.16px;
			}
		}
		p
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 24px; /* 150% */
			letter-spacing: 1.44px;
			margin-bottom:25px;
			color:$text-color;
		}
		.more
		{
			display: flex;
			a
			{
				border:1px solid $main-color;
				background-color: $main-color;
				padding:11px 48px;
				border-radius: 54px;
				color:#fff;
				display: flex;
				align-items:center;

				font-size: 20px;
				font-weight: 500;
				line-height: 30px; /* 150% */
				letter-spacing: 1.8px;
				transition-duration:0.5s;
				i
				{
					margin-left: 9px;
					width: 22px;
					height: 22px;
					text-align: center;
					line-height: 22px;
					border-radius: 100%;
					background-color: #fff;
					color:$main-color;
					font-size:11px;
				}
				&:hover
				{
					background-color: #fff;
					color:$main-color;
					i
					{
						background-color: $main-color;
						color:#fff;
					}
				}
			}
		}
	}


	.service-list
	{
		article
		{
			margin-bottom:30px;
			border:1px solid $main-color;
			border-radius: 35px;
			.card-head
			{
				position: relative;
				padding:15px 50px;
				input
				{
					padding:0px;
					margin:0px;
					position: absolute;
					top:0px;
					left:0px;
					width: 100%;
					height:100%;
					opacity: 0;
					cursor: pointer;
					z-index:1;
				}
				h3
				{
					color:$main-color;
					display: flex;
					justify-content:space-between;
					align-items:center;
					span
					{
						transition-duration:0.5s;
						font-size: 20px;
						font-weight: 700;
						line-height: 30px; /* 150% */
						letter-spacing: 1.8px;
					}
					i
					{
						font-size:20px;
						transition-duration:0.5s;
					}
				}
			}
			.card-body
			{
				display: grid;
				grid-template-rows: 0fr;
				transition-duration:0.5s;
				.card-content
				{
					overflow: hidden;
					.card-text
					{
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 1.44px;
						color:#fff;
						p
						{
							margin-bottom:25px;
						}
						.text-list
						{
							padding-left: 10px;
							list-style-position:inside;
							list-style-type:disc;
							margin-bottom:30px;
						}
						.icon-list
						{
							display: flex;
							flex-wrap: wrap;
							width: 300px;
							li
							{
								width: 140px;
								margin-bottom:30px;
								&:nth-child(2n)
								{
									margin-left: 10px;
								}
								&:nth-child(2n + 1)
								{
									margin-right: 10px;
								}
								i
								{
									display: block;
									width: 100%;
									text-align: center;
									margin-bottom:15px;
									font-size: 55px;
									height: 60px;
									line-height: 60px;
								}
								span
								{
									display: block;
									text-align: center;
								}
							}
						}
					}
					picture
					{
						img
						{
							display: block;
							max-width: 100%;
							overflow: hidden;
							border-radius: 15px;
						}
					}
				}
			}
			&:has(input[type=checkbox]:checked)
			{
				background-color: $main-color;
				.card-head
				{
					h3
					{
						color:#fff;
						i
						{
							transform: rotate(180deg);
						}
					}
				}
				.card-body
				{
					grid-template-rows: 1fr;
				}
			}
		}
	}
	@media(min-width:1200px)
	{
		display: flex;
		.header
		{
			width: 34%;
			p
			{
				max-width: 355px;
			}
		}
		.service-list
		{
			flex:1;
			article
			{
				.card-body
				{
					.card-content
					{
						display: flex;
						.card-text
						{
							padding:15px 20px 15px 50px; 
							width:51.5%;
							padding-right: 20px;
							p
							{
								max-width: 365px;
							}
						}
						picture
						{
							padding:15px 15px 15px 0px;
							flex:1;
						}
					}
				}
			}
		}
	}
	@media(max-width:1199px)
	{
		.header
		{
			margin-bottom:pxvw(50,390);
			h3
			{
				margin-bottom:pxvw(10,390);
				a
				{
					font-size: pxvw(16,390);
					font-weight: 700;
					line-height: pxvw(24,390); /* 150% */
					letter-spacing: pxvw(1.44,390);
				}
			}
			p
			{
				margin-bottom:pxvw(20,390);
				font-size: pxvw(16,390);
				font-weight: 400;
				line-height: pxvw(24,390); /* 150% */
				letter-spacing: pxvw(1.44,390);
			}
			.more
			{
				a
				{
					padding:pxvw(11,390) pxvw(50,390);
					font-size: pxvw(20,390);
					font-weight: 500;
					line-height: pxvw(30,390); /* 150% */
					letter-spacing: pxvw(1.8,390);
				}
			}
		}
		.service-list
		{
			article
			{
				.card-head
				{
					padding:pxvw(20,390) pxvw(30,390);
					h3
					{
						span
						{
							font-size: pxvw(16,390);
							font-weight: 700;
							line-height: normal;
							letter-spacing: pxvw(1.44,390);
						}
					}
				}
				.card-body
				{
					.card-content
					{
						.card-text
						{
							padding:pxvw(20,390) pxvw(20,390);

						}
					}
					picture
					{
						padding:pxvw(20,390) pxvw(30,390);
						img
						{
							margin: 0 auto;
						}
					}
				}
			}
		}
	}
}

#gallery
{
	margin-bottom: 100px;
	h2
	{
		text-align: center;
		position: relative;
		margin-bottom: 50px;
		&::after
		{
			content:' ';
			width: 100%;
			height: 1px;
			left: 0px;
			top:50%;
			background-color: $main-color;
			position: absolute;
		}
		a
		{
			display: inline-block;
			position: relative;
			z-index:1;
			font-size: 24px;
			font-weight: 700;
			line-height: 36px; /* 150% */
			letter-spacing: 2.16px;
			color:$main-color;
			background-color: #fff;
			padding:0 50px;
		}
	}
	p
	{
		text-align: center;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px; /* 150% */
		letter-spacing: 1.44px;
		margin-bottom: 50px;
		color:#002D5E;
	}
	ul
	{
		li
		{
			a
			{
				display: block;
				picture
				{
					display: block;
					img
					{
						display: block;
						
						border-radius: 20px;
						opacity: .5;
						transition-duration:0.5s;
					}
				}
				span
				{
					display: block;
					text-align: center;
					color:$text-color;
					transition-duration:0.5s;
					font-size: 20px;
					font-weight: 500;
					line-height: 30px; /* 150% */
					letter-spacing: 1.8px;
				}
				&:hover
				{
					picture
					{
						img
						{
							opacity: 1;
						}
					}
					span
					{
						color:$main-color;
					}
				}
			}
		}
	}
	.more
	{
		display: flex;
		justify-content:flex-end;
		a
		{
			padding:11px 48px;
			background-color: $main-color;
			border:1px solid $main-color;
			color:#fff;
			font-size: 20px;
			font-weight: 500;
			line-height: 30px;
			letter-spacing: 1.8px;
			border-radius: 54px;
			display: flex;
			align-items:center;
			transition-duration:0.5s;
			i
			{
				margin-left:10px;
				font-size:11px;
				width:22px;
				height:22px;
				text-align: center;
				line-height: 22px;
				color:$main-color;
				background-color: #fff;
				border-radius: 100%;
				padding:0px;
				transition-duration:0.5s;
			}
			&:hover
			{
				background-color: #fff;
				color:$main-color;				
				i
				{						
					background-color: $main-color;
					color:#fff;
				}
			}
		}
	}
	
	@media(min-width:1400px)
	{
		ul
		{
			li
			{
				margin:0 40px 40px 40px;
				width: calc((100% - 160px) / 3);
				picture
				{
					margin-bottom:56px;
					
				}
			}
		}
	}
	@media(max-width:1399px)
	{
		ul
		{
			li
			{
				margin:0 2.85% 40px 2.85%;
				picture
				{
					margin-bottom:40px;
				}
				flex:1;
			}
		}
	}
	@media(min-width:768px)
	{
		ul
		{
			display: flex;
			li
			{
				&:nth-child(3n)
				{
					margin-right:0px;
				}      
				&:nth-child(3n + 1)
				{
					margin-left:0px;
				}
				img
				{
					width: 100%;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		ul
		{
			li
			{
				margin-bottom:40px;
				picture
				{
					margin-bottom:20px;
					img
					{
						max-width:100%;
						margin:0 auto;
					}
				}
			}
		}
	}
}

#about
{
	margin-bottom:100px;
	article
	{
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		color:#fff;
		background-image: url('<?=userimg($about->bg->data)?>');
		border-radius: 20px;
		h2
		{
			span
			{
				display: block;
			}
			a
			{
				color:#fff;
			}
		}
		.about-content
		{
			.more
			{
				display: flex;
				justify-content:center;
				align-items:center;
				
				a
				{
					width: 70px;
					height: 70px;
					text-align: center;
					border-radius: 100%;
					background-color: #fff;
					color:$main-color;
					line-height: 68px;
					border:1px solid #fff;
					transition-duration:0.5s;
					&:hover
					{
						background-color: $main-color;
						color:#fff;
					}
				}
			}
		}
		@media(min-width:768px)
		{
			
			padding:pxvw(120) pxvw(100);
			display: flex;
			align-items:center;
			h2
			{
				width: 33%;
				font-size: 48px;
				font-weight: 700;
				line-height: 72px; /* 150% */
				letter-spacing: 4.32px;
				span
				{
					font-size: 24px;
					font-weight: 700;
					line-height: 36px; /* 150% */
					letter-spacing: 2.16px;
				}
			}
			.about-content
			{
				flex:1;
				display: flex;
				align-items:center;
				p
				{
					border-left: 1px solid #fff;
					flex:1;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
					padding-left:pxvw(60);
				}
				.more
				{
					width: 40%;
				}
			}
		}
		@media(max-width:767px)
		{
			padding:pxvw(41,390) pxvw(50,390);
			h2
			{
				font-size: 24px;
				font-weight: 700;
				line-height: 36px; /* 150% */
				letter-spacing: 2.16px;
				margin-bottom:27px;
				span
				{
					font-size: 16px;
					font-weight: 700;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
				}
			}
			.about-content
			{
				p
				{
					padding-left:18px;
					border-left:1px solid #fff;
					padding-bottom:20px;
					font-family: "Noto Sans TC";
					font-size: 16px;
					font-weight: 400;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
					margin-bottom:30px;
				}
			}
		}
	}
	
}

#news
{
	margin-bottom:120px;
	h2
	{
		margin-bottom:30px;
		a
		{
			color:$main-color;
			font-size: 24px;
			font-weight: 700;
			line-height: 36px; /* 150% */
			letter-spacing: 2.16px;
		}
	}
	section
	{
		article
		{
			picture
			{
        margin-bottom:10px;
				display: block;
				img
				{
					display: block;
					width: 100%;
					border-radius: 20px;
				}
			}
			h3
			{
				font-size: 24px;
				font-weight: 700;
				line-height: 36px; /* 150% */
				letter-spacing: 2.16px;
				color:$main-color;
				margin-bottom:10px;
			}
			time
			{
				display: block;
				color: #48484A;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px; /* 150% */
				letter-spacing: 1.44px;
				margin-bottom:10px;
			}
			p
			{
				color:#48484A;
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				line-height: 24px; /* 150% */
				letter-spacing: 1.44px;
				margin-bottom:10px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.more
			{
				display: flex;
				justify-content:flex-start;
				a
				{
					padding:11px 48px;
					background-color: $main-color;
					border:1px solid $main-color;
					color:#fff;
					font-size: 20px;
					font-weight: 500;
					line-height: 30px;
					letter-spacing: 1.8px;
					border-radius: 54px;
					display: flex;
					align-items:center;
					transition-duration:0.5s;
					i
					{
						margin-left:10px;
						font-size:11px;
						width:22px;
						height:22px;
						text-align: center;
						line-height: 22px;
						color:$main-color;
						background-color: #fff;
						border-radius: 100%;
						padding:0px;
						transition-duration:0.5s;
					}
					&:hover
					{
						background-color: #fff;
						color:$main-color;				
						i
						{						
							background-color: $main-color;
							color:#fff;
						}
					}
				}
			}
		}

		
	}
	@media(min-width:1401px)
	{
		section
		{
			article
			{
				width: calc((100% - 110px) / 3);
				margin:0 27.5px;
			}
		}
	}
	@media(max-width:1400px)
	{
		section
		{
			
			article
			{
				margin:0 2%;
				width:calc(92% / 3) ;
			}
		}
	}

	@media(min-width:768px)
	{
		section
		{
			display: flex;
			article
			{
				&:nth-child(3n)
				{
					margin-right:0px;
				}
				&:nth-child(3n + 1)
				{
					margin-left:0px;
				}
				
			}
		}
	}
	@media(max-width:767px)
	{
		section
		{
			article
			{
				width: 100%;
				margin:0 0 30px 0;
			}
		}
	}
}


#knowledge
{
	margin-bottom:100px;
	&::before
	{
		background-image: url('<?=userimg($knowledge->photo->data)?>');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		content:' ';
	}
	>div
	{
		background-color: #DBEDF0;
		h2
		{
			a
			{
				color:$main-color;
				font-size: 24px;
				font-weight: 700;
				line-height: 36px; /* 150% */
				letter-spacing: 2.16px;
			}
		}
		>p
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 24px; /* 150% */
			letter-spacing: 1.44px;
		}
		.article
		{
			ul
			{
				li
				{
					label
					{
						cursor: pointer;
						color:#929399;
						font-size: 20px;
						font-weight: 700;
						line-height: 30px; /* 150% */
						letter-spacing: 1.8px;
					}
					&.active
					{
						label
						{
							color:#002D5E;
							font-size: 20px;
							font-weight: 700;
							line-height: 30px; /* 150% */
							letter-spacing: 1.8px;
						}
					}
				}
			}
			.article-list
			{
				section
				{
					display: none;
					position: relative;
					input
					{
						opacity: 0;
						top:0px;
						left:0px;
						position: absolute;
						z-index:-99;
					}
					h3
					{
						margin-bottom:25px;
						a
						{
							color:$main-color;
							font-size: 24px;
							font-weight: 700;
							line-height: 36px; /* 150% */
							letter-spacing: 2.16px;
						}
					}
					article
					{
						padding-bottom:10px;
						margin-bottom:10px;
						border-bottom: 1px solid $main-color;
						cursor: pointer;
						h4
						{
							a
							{
								color:#002D5E;
								font-size: 20px;
								font-weight: 700;
								line-height: 30px; /* 150% */
								letter-spacing: 1.8px;
								
							}
						}
						time
						{
							display: block;
							color: #8E8E93;
							font-size: 13px;
							font-weight: 400;
							line-height: 24px; /* 150% */
							letter-spacing: 1.44px;
							margin-bottom:10px;
						}
						.description
						{
							display: flex;
							align-items:flex-end;
							p
							{
								flex:1;
								display: block;
								color: #8E8E93;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px; /* 150% */
								letter-spacing: 1.44px;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}
							&::after
							{
								margin-left:20px;
								font-family: "Font Awesome 6 Free";
								content:'\f105';
								font-weight: 900;
								min-width:36px;
								height:36px;
								background-color: $main-color;
								border-radius:100%;
								color:#fff;
								text-align:center;
								line-height:36px;
							}
						}
						
					}
					.more
					{
						padding-top:20px;
						display: flex;
						justify-content:flex-end;
						a
						{
							background-color: $main-color;
							color:#fff;
							padding:8px 18px;
							border-radius: 54px;
							font-size: 20px;
							font-weight: 500;
							line-height: 30px; /* 150% */
							letter-spacing: 1.8px;
						}
					}
					&:has(input[type=radio]:checked){
						display: block;
					}
				}
			}
			
		}
	}

	@media(min-width:1400px)
	{
		&::before
		{
			width:555px;
		}
		>div
		{
			padding:50px 60px 100px 75px;
			
		}
	}
	@media(max-width:1399px)
	{
		&::before
		{
			width: pxvw(555,1400);
		}
		>div
		{
			padding:pxvw(50,1400) pxvw(60,1400) pxvw(100,1400) pxvw(75,1400);
		}
	}

	@media(min-width:980px)
	{
		display: flex;
		&::before
		{
			border-radius: 15px 0 0 15px;
		}
		>div
		{
			flex:1;

			h2
			{
				margin-bottom:25px;
			}
			>p
			{
				margin-bottom:60px;
			}
			.article
			{
				display: flex;
				ul
				{
					width: 170px;
					padding-right: 10px;
					li
					{
						margin-bottom: 60px;
					}
				}
				.article-list
				{
					flex:1;
				}
			}
		}
	}
	@media(max-width:979px)
	{
		&::before
		{
			padding-top:100%;
			display: block;
			width: 100%;
		}
		>div
		{
			h2
			{
				margin-bottom:10px;
				a
				{
					font-size: 16px;
					font-weight: 700;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
				}
			}
			>p
			{
				font-size: 16px;
				font-weight: 400;
				line-height: 24px; /* 150% */
				letter-spacing: 1.44px;
				margin-bottom:35px;
			}
			.article
			{
				ul
				{
					display: flex;
					flex-wrap:nowrap;
					overflow: auto;
					li
					{
						label
						{
							font-size: 16px;
							font-style: normal;
							font-weight: 700;
							line-height: 24px; /* 150% */
							letter-spacing: 1.44px;
							padding:10px;
							display: block;
							white-space:nowrap;
						}
						
						&.active
						{
							label
							{
								font-size: 16px;
								font-style: normal;
								font-weight: 700;
								line-height: 24px; /* 150% */
								letter-spacing: 1.44px;
								
							}
						}
					}
				}
				.article-list
				{
					section
					{
						.more
						{
							justify-content:center;
						}
					}
				}
				
			}
		}
	}
}