html,body,input,button
{
	
	font-family: "Noto Sans TC";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.64px;
	color:$text-color;
}
*[role=link]
{
  cursor: pointer;
}
body
{
	background-image: url('/webdata/tplimg/bg.png'),url('/webdata/tplimg/bg.png');
	background-repeat: no-repeat,no-repeat;
	background-position:-500px 0px,150% 1000px;
}

*,input,button
{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: never;
	font-family: "Noto Sans TC";
}

.second-title
{
	display: flex;
	align-items:center;
	&::before
	{
		margin-right:10px;
		content:' ';
		width: 70px;
		height: 1px;
		background-color: $main-color;
	}
	margin-bottom:8px;
	color: $main-color;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0.48px;
}
.banner-header
{
  position: relative;
  padding-top:88px;
  padding-bottom:88px;
  overflow: hidden;
  h1
  {
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 1.28px;
    color:#fff;
    position: relative;
    z-index: 1;
  }
  picture
  {
    overflow: hidden;
    border-radius: 8px 0 0 8px;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0px;
    left:24px;
    img
    {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position:left center;
    }
  }
  @media(min-width:1448px)
  {
    h1
    {
      padding-left:calc(50% - 700px);
    }
  }
  @media(max-width:1447px)
  {
    h1
    {
      padding-left:48px;
    }
  }
}
.wrap
{
	padding-left:calc(50% - 700px);
	padding-right:calc(50% - 700px);
	@media(max-width:1448px){
		padding-left:24px;
		padding-right:24px;
	}
}
.wrap-r
{
	padding-right:calc(50% - 700px);
	@media(max-width:1448px){
		padding-right:24px;
	}
}
.breadcrumb
{
  display: flex;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:16px;
  li
  {
//    padding-right:10px;
    color:#A9A9A9;
    a
    {
      color:#A9A9A9;
    }
    &::after
    {
      content:'::';
      padding:0 5px;
    }
    &:last-child
    {
      padding-right:0;
      a
      {
        color:$text-color;
      }
      &::after
      {
        display: none;
      }
    }
    
  }
}
#head
{
	position: relative;
	display: flex;
	justify-content:flex-end;
	#logo
	{
		z-index: 100;
		position: absolute;
		display: block;
		width: 100px;
		height:100px;
		img
		{
			display: block;
			width: 100%;
			object-fit: contain;
			object-position: center;
		}
	}
	.menu-card
	{
		.main
		{
			li
			{
				a
				{
					transition-duration:.5s;
					font-size: 16px;
					line-height: 24px;
					letter-spacing: 0.64px;
				}
			}
		}
	}
	@media(min-width:1200px)
	{
		padding-left:64px;
		padding-right:64px;
		
		#logo
		{
			top:32px;
			left:7.4vw;
			
		}
		.tools
		{
			display: none;
		}
		.menu-card
		{
			padding-top:32px;
			padding-bottom:32px;
			display: flex;
			align-items:center;
			
			.main
			{
				display: flex;
				align-items:center;
				li
				{
					padding-right:2vw;
					&:last-child
					{
						padding-right:64px;
					}
					a
					{
						color:$text-color;
						
						&:hover
						{
							color:$main-color;
						}
					}
				}
			}
			.social
			{
				display: flex;
				li
				{
					padding-right:2vw;
					font-size:32px;
					&:last-child
					{
						padding-right:0;
					}
					a
					{
						transition-duration:.5s;
						color:$main-color;
						&:hover
						{
							color:$text-color;
						}
					}
				}
				
			}
		}
	}
	@media(max-width:1199px)
	{
		#logo
		{
			width: 80px;
			height: 80px;
			top:18px;
			left:24px;
		}
		.tools
		{
			cursor: pointer;
			color:$main-color;
			width: 48px;
			height: 48px;
			font-size:22px;
			
			text-align: center;
			i
			{
				line-height: 48px;
			}
			.open
			{
				display: none;
			}
			input
			{
				display: none;
			}
		}
		.menu-card
		{
			display: none;
		}
		&:has(input[type=checkbox]:checked)
		{
			.tools
			{
				position: relative;
				z-index: 201;
				color:#fff;
				.open
				{
					display: block;
				}
				.close
				{
					display: none;
				}
			}
			.menu-card
			{
				display: block;
				z-index: 200;
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: $main-color;
				padding:85px 48px 24px 48px;
				min-height:100%;
				overflow-y: auto;
				.main
				{
					li
					{
						margin-bottom: 24px;
						a
						{
							color:#fff;

						}
					}
				}
				.social
				{
					display: flex;
					li
					{
						margin-right:32px;
						a
						{
							color:#fff;
							font-size:32px;
						}
					}
				}
			}
		}
	}
}

#footer-contact
{
	.head
	{
		overflow: hidden;
		position: relative;
		h3
		{
			position: relative;
			z-index: 1;
			font-size: 32px;
			color:#fff;
			line-height: 46px; /* 143.75% */
			letter-spacing: 1.28px;
			margin-bottom:58px;
			span
			{
				display: flex;
				align-items:center;
				&::before
				{
					margin-right:10px;
					content:' ';
					width: 70px;
					height: 1px;
					background-color: $main-color;
				}
				margin-bottom:8px;
				color: $main-color;
				font-size: 12px;
				font-weight: 400;
				line-height: 17px;
				letter-spacing: 0.48px;
			}
		}
		ul
		{
			position: relative;
			z-index: 1;
			li
			{
				a
				{
					color:#fff;
				}
			}
		}
		picture
		{
			display: block;
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			img
			{
        width: 100%;
				display: block;
				object-fit: cover;
				object-position: center;
        height: 100%;
			}
		}
	}
	.body
	{
		background-color: $main-color;
		color:#fff;
		text-align: center;
		p
		{
			padding-bottom:30px;
		}
		ul
		{
			
			li
			{
				display: flex;
				margin:0 20px;
				a
				{
					padding:24px 88px;
					border: 1px solid #fff;
					color:#fff;
					border-radius: 100px;
					font-size: 24px;
					line-height: 36px; /* 150% */
					letter-spacing: 0.96px;
				}
			}
		}
	}
	@media(min-width:768px)
	{
		display: flex;
		.head
		{
			width: 30%;
			padding:48px;
      
		}
		.body
		{
			align-items:center;
			width: 70%;
			padding:48px;
			ul
			{
				display: flex;
				justify-content:space-around;
			}
		}
	}
	@media(max-width:767px)
	{
		.head,.body
		{
			padding:24px;
		}
		.body
		{
			ul
			{
				li
				{
					margin-bottom: 24px;
				}
			}
		}
	}
}

#footer
{
	padding:64px;
	h3
	{
		font-size: 24px;
		line-height: 36px;
		letter-spacing: 0.96px;
	}
	>div
	{
		.main
		{
			display: flex;
			flex-wrap:wrap;
			margin-bottom:24px;
			li
			{
				a
				{
					color:$text-color;
				}
			}
		}
		.social
		{
			display: flex;
			li
			{
				a
				{
					color:$main-color;
				}
			}
		}
	}
	@media(min-width:768px)
	{
		display: flex;
		justify-content:space-between;
		>div
		{
			ul
			{
				justify-content:flex-end;
				li
				{
					padding-right:24px;
					&:last-child
					{
						padding-right: 0;
					}
				}

			}
		}
	}
	@media(max-width:767px)
	{
		padding-bottom:24px;
		h3
		{
			margin-bottom:24px;
		}
		>div
		{
			.main
			{
				li
				{
					width: calc(100% / 3);
					margin-bottom:10px;
				}
			}
			.social
			{
				justify-content:space-between;
			}
		}
	}
}

#copyright
{
	text-align: center;
	color:#ccc;
	padding:6px 24px;
	font-size:12px;
	a
	{
		color:#ccc;
	}
}