.l-wrap
{
	padding-left:24px;
	padding-right:24px;
	@media(min-width:1808px)
	{
		padding-left:calc(50% - 880px);
		padding-right:calc(50% - 880px);
	}
}
.wrap
{
	padding-left:24px;
	padding-right:24px;
	@media(min-width:1248px)
	{
		padding-left:calc(50% - 580px);
		padding-right:calc(50% - 580px);
	}
}

*[role=link]
{
	&:hover
	{
		cursor: pointer;
	}
}

button
{
	&:hover
	{
		cursor: pointer;
	}
}

.breadcrumb
{
	font-size: 14px;
	line-height: 18px; /* 128.571% */
	letter-spacing: 0.56px;
	display: flex;
	justify-content:center;
	margin-bottom:16px;
	ul
	{
		display: flex;
		flex-wrap:wrap;
		li
		{
			color:#A3A3A3;
			a
			{
				color:#A3A3A3;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
			&::after
			{
				padding-left:12px;
				padding-right:12px;
				content:'/';
			}
			&:last-child
			{
				&::after
				{
					display: none;
				}
			}
		}
	}
	
}

body
{
	font-weight: 500;
	font-family:'Noto Serif TC',sans-serif;
	font-style: normal;
	color:$text-color;
	line-height: 22px;
	font-size:15px;
	letter-spacing: 0.6px;
	button,input,select,textarea
	{
		font-weight: 500;
		font-family:'Noto Serif TC',sans-serif;
		font-style: normal;
		color:$text-color;
		line-height: 22px;
		font-size:15px;
		letter-spacing: 0.6px;
		color:$text-color;
	}
}

a{
	color:$text-color;
}


#head
{
	display: flex;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0.56px;
	padding-top:56px;
	padding-bottom:56px;
	.tool
	{
		display: flex;
		align-items:center;
		font-size: 22px;
		li
		{
			padding-left:40px;
			padding-top:20px;
			padding-bottom:20px;
		}
	}
	#logo
	{
		width: 300px;
		picture
		{
			display: block;
			width: 100%;
			img
			{
				display: block;
				width: 100%;
			}
		}
	}
	@media(min-width:980px)
	{
		a
		{
			transition-duration:.5s;
			&:hover
			{
				color:$main-color;
			}
		}

		#toggle-menu
		{
			display: none;
		}
		#left-menu
		{
			display: flex;
			align-items:center;
			width: calc(50% - 150px);
			>li
			{
				padding-right:40px;
				position: relative;
				padding-top:20px;
				padding-bottom:20px;
				&:last-child
				{
					padding-right:0;
				}
				>ul
				{
					display: none;
					position: absolute;
					top:100%;
					left:0;
					li
					{
						margin-bottom:20px;
					}
				}
				&:hover
				{
					ul
					{
						display: block;
					}
				}
			}

		}
		#right-menu
		{
			display: flex;
			justify-content:flex-end;
			align-items:center;

			flex:1;
			>li
			{
				padding-top:20px;
				padding-bottom:20px;
				margin-left:40px;
			}
		}
	}
	@media(max-width:979px)
	{
		padding-top:24px;
		padding-bottom:24px;
		flex-wrap:wrap;
		#toggle-menu
		{
			width: calc(50% - 30px);
			label
			{
				cursor: pointer;
			}
			input
			{
				display: none;
			}
			font-size:22px;
			.icon-close
			{
				display: none;
			}
		}
		#logo
		{
			width: 60px;
		}
		#left-menu
		{
			display: none;
		}
		#right-menu
		{
			display: none;
		}
		.tool
		{
			
			justify-content:flex-end;
			align-items:flex-start;
			flex:1;
			li
			{
				padding-top:0px;
				padding-bottom:0px;
			}
		}
		&:has(#toggle-main-menu:checked)
		{
			#toggle-menu
			{
				.icon-close
				{
					display: block;
				}
				.icon-menu
				{
					display: none;
				}
			}
			#left-menu,#right-menu
			{
				width: 100%;
				order:3;
				display: block;
				li
				{
					a
					{
						display: block;
						margin-bottom:12px;

					}
				}
			}

			

			
		}
	}
}
/*
#head
{
	display: flex;
	font-size: 14px;
	line-height: 18px; 
	letter-spacing: 0.56px;
	
	#search-form
	{
		padding-top:32px;
		padding-bottom:32px;
		border-top:1px solid #E8E8E8;
		border-bottom:1px solid #E8E8E8;
		display: flex;
		input
		{
			padding:0px;
			border:0px;
			margin:0px;
			flex:1;
			border-bottom:1px solid #261605;
		}
		button
		{
			padding:12px;
			margin:0px;
			border:0px;
			font-size:20px;
			border-bottom:1px solid #261605;
			background-color: rgba(255,255,255,0);
		}
		@media(min-width:1160px)
		{
			padding-left:calc(50% - 580px);
			padding-right:calc(50% - 580px);
		}
		
	}

	#right-main-menu
	{
		.tool
		{
			li
			{
				position: relative;
				vertical-align: middle;
				label
				{
					&:hover
					{
						cursor: pointer;
					}
					display: block;
					position: absolute;
					left:0px;
					top:0;
					width: 100%;
					height:100%;
					input
					{
						display: none;
					}
				}
				i
				{
					&::before
					{
						font-size:25px;
						letter-spacing: 0.6px;
					}
				}
				button
				{
					vertical-align: middle;
					border:0;
					background-color: rgba(255,255,255,0);
					padding:0;
				}
			}
		}
	}

	@media(min-width:980px)
	{
		
		position: relative;
		#toggle-main-menu
		{
			display: none;
		}
		#left-main-menu,#right-main-menu
		{
			width: 42%;
		}
		#logo
		{
			width: 16%;
			padding-top:30px;
			padding-bottom:30px;
			picture
			{
				width: 100%;
				display: block;
				img
				{
					display: block;
					width: 100%;
				}
			}
		}
		.menu
		{
			display: flex;
			align-items:center;
			flex:1;
			>li
			{
				padding-right:2vw;
				position: relative;
				overflow: hidden;
				a
				{
					transition-duration:.5s;
					&:hover
					{
						color:$main-color;
					}
				}
				ul
				{
					transition-duration:.5s;
					opacity:0;
					position: absolute;
					left:0px;
					top:100%;
					width: 100%;
					li
					{
						padding-top:10px;
					}
				}
				&:hover
				{
					opacity: 1;
					overflow: visible;
				}
			}
		}
		&:has(li:hover)
		{
			overflow:visible;
			li:hover
			{
				ul
				{
					opacity: 1;
					z-index:1;
				}
			}
			
		}

		#left-main-menu
		{
			display: flex;
			ul.menu
			{
				width: 100%;
			}
		}
		#right-main-menu
		{
			display: flex;
			justify-content:flex-end;
			.menu
			{

				justify-content:flex-end;
			}
			.tool
			{
				display: flex;
				align-items:center;
				li
				{
					padding-right:2vw;
					font-size:24px;
					&:last-child
					{
						padding-right:0;
					}
				}
			}
		}

		#search-form
		{
			position: absolute;
			top:100%;
			left:0px;
			width: 100%;
			opacity:0;
			transition-duration:.5s;
			padding-left:24px;
			padding-right:24px;
			z-index:-1;
			background-color: #fff;
			ul
			{
				display: none;
			}
		}
		&:has(#search-form input:focus)
		{
			#search-form
			{

				z-index:1;
				opacity:1;
			}
		}
	}

	@media(max-width:979px)
	{
		display: flex;
		flex-wrap:wrap;
		padding:24px;
		position: relative;
		overflow: hidden;
		#toggle-main-menu
		{
			order:0;
			width: calc(50% - 30px);
			label
			{
				width:30px;
				height:30px;
				position: relative;
				display: block;
				cursor: pointer;
				input
				{
					display: none;
				}
				i
				{
					position: absolute;
					width:100%;
					height:100%;
					text-align: center;
					line-height:30px;
					font-size:25px;
					transition-duration:.5s;
					&.open
					{
						opacity: 1;
					}					
					&.close
					{
						opacity: 0;
					}
				}
				&:has(input:checked)
				{
					i.open
					{
						opacity: 0;
					}
					i.close
					{
						opacity: 1;
					}
				}
			}
		}
		#logo
		{
			order:1;
			width: 60px;
		}
		#left-main-menu
		{
			display: none;
		}
		#right-main-menu
		{
			width: calc(50% - 30px);
			order:2;
			.menu
			{
				display: none;
			}
			.tool
			{
				display: flex;
				justify-content:flex-end;
				li
				{
					margin-left:24px;
					font-size:24px;
					&:has(label[for=search-input])
					{
						display: none;
					}
				}
			}
		}
		#search-form
		{
			transition-duration:.5s;
			opacity: 0;
			display: flex;
			width:100%;
			position: absolute;
			top:100%;
			left:0;
			order:4;
			border-top:0px;
			padding:0 24px 24px 24px;
			display: flex;
			align-items:flex-start;
			flex-wrap:wrap;
			input
			{
				height:45px;
				width:calc(100% - 45px);
			}
			button
			{
				padding:0;
				width:45px;
				height:45px;
			}
			>ul
			{
				padding:48px;
				width: 100%;
				padding-top:24px;
				li
				{
					margin-bottom:32px;
				}
				ul
				{
					padding:32px 0 0 0;
					display: flex;
					flex-wrap:wrap;
					li
					{
						width: 50%;
						text-align: center;
					}
				}
			}
		}
		&:has(#toggle-main-menu:checked)
		{
			overflow: visible;
			#search-form
			{
				opacity: 1;
			}
			#toggle-main-menu
			{
				display: none;
			}

		}
	}
}
*/
#body
{
	padding-top:40px;
	padding-bottom:40px;
}

#foot-contact
{
	padding:40px 24px;
	margin-left:24px;
	margin-right:24px;
	background-image: url('<?=getSystem("URLPrefix")?>webdata/tplimg/foot-contact-bg.jpg');
	
	>div
	{
		>div
		{
			&:last-child
			{
				a
				{
					display: inline-block;
					padding-bottom:6px;
					border-bottom: 1px solid $text-color;
				}
			}
		}
	}
	@media(min-width:768px)
	{
		>div
		{
			max-width: 1160px;
			display: flex;
			justify-content:space-between;
			align-items:center;
			margin-left:auto;
			margin-right:auto;
		}
	}
	@media(max-width:767px)
	{
		>div
		{
			>div
			{
				&:first-child
				{
					margin-bottom:24px;
				}
			}
		}
	}
}