html,body
{
	background-color: $bg-color;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
	letter-spacing: 0.64px;
	font-family:'Noto Sans TC',sans-serif;
	@media(max-width:767px)
	{
		font-size: 15px;
		line-height: 22px; /* 146.667% */
		letter-spacing: 0.6px;
	}
}

img
{
	pointer-events: none;
}

.wrap
{
	padding-left:240px;
	padding-right:240px;
	@media(max-width:1200px)
	{
		padding-left:24px;
		padding-right:24px;
	}
}
.l-wrap
{
	padding-left:48px;
	padding-right:48px;
	@media(max-width:1296px)
	{
		padding-left:24px;
		padding-right:24px;
	}
}

.more-btn
{
	display: flex;
	a
	{
		border:1px solid $text-color;
		padding:12px 40px;
		color:$text-color;
		transition:0.5s;
		font-size: 14px;
		line-height: 20px; /* 142.857% */
		letter-spacing: 0.56px;
		&:hover
		{
			color:$bg-color;
			background-color: $text-color;
		}
		&::after
		{
			margin-left:16px;
			font-family: 'Font Awesome 6 Free';
			content:'\f061';
			font-weight: 900;
		}
	}
}
 

//頁頭
#head
{
	position: relative;
	//logo 控制選項
	#head-control
	{
		position: relative;
		z-index: 1;
		display: flex;
		#logo
		{
			flex:1;
			a
			{
				picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: top left;
					}
				}
			}
		}
		#head-tool
		{
			display: flex;
			li
			{
				margin-left:16px;
				color:$text-color;
				a,label
				{
					display: block;
					border:1px solid $text-color;
					color:$text-color;
					transition:color 0.5s;
					transition:background-color 0.5s;
					&:hover
					{
						background-color: $text-color;
						color:$bg-color;
					}
				}
				label[for=switch-main-menu]
				{
					cursor: pointer;
					&::before
					{
						content:'MENU';
					}
					&::after
					{
						padding-left:10px;
						content:"\f0c9";
						font-weight: 900;
						font-family: 'Font Awesome 6 Free';
					}
					input
					{
						display: none;
					}
					&:has(input:checked)
					{
						&::before
						{
							content:'CLOSE';
						}
						&::after
						{
							content:"\f00d";
						}
					}
				}
				&:first-child
				{
					margin-left: 0;
				}
			}
		}
	}
	//頁首選單
	#head-menu
	{
		position: relative;
		z-index: 1;
		ul
		{
			li
			{
				a
				{
					transition:0.5s;
					color:$text-color;
					&:hover
					{
						color:$hover-color;
					}
				}
			}
		}
		.social-menu
		{
			li
			{
				a
				{
					border-bottom: 1px solid $text-color;
					&:hover
					{
						border-bottom-color:$hover-color;
					}
				}
			}
		}
	}

	//電腦版顯示
	@media(min-width:1200px)
	{
		#head-control
		{
			padding:40px;
			#logo
			{
				a
				{
					picture
					{
						width: 95px;
						height:110px;
					}
				}
			}
			#head-tool
			{
				li
				{
					font-size: 14px;
					line-height: 20px;
					letter-spacing: 0.56px;
					a,label
					{
						padding:12px 40px;
					}
					
					&:has(label[for=switch-main-menu])
					{
						display: none;
					}
				}
			}
		}
		#head-menu
		{
			padding:40px;
			.main-menu
			{
				li
				{
					margin-bottom:16px;
					font-size: 14px;
					line-height: 20px;
					letter-spacing: 0.56px;
					&:last-child
					{
						margin-bottom: 0;  
					}
				}
			}
			.social-menu
			{
				display: none;
			}
		}
	}

	//手機版顯示
	@media(max-width:1199px)
	{
		#head-control
		{
			padding:16px;
			z-index: 30001;
			#logo
			{
				a
				{
					picture
					{
						width: 60px;
						height: 70px;
					}
				}
			}
			#head-tool
			{
				li
				{
					font-size: 11.507px;
					line-height: 16.438px; /* 142.857% */
					letter-spacing: 0.46px;
					a
					{
						padding:10px 32px;
					}
					label
					{
						padding:10px 14px;
					}
				}
			}
		}
		#head-menu
		{
			padding:24px;
			position: absolute;
			top:0px;
			left:0px;
			width: 100%;
			padding-top:150px;
			background-color: $bg-color;
			height: 100vh;
			transform: translateX(-100%);
			transition:transform 0.5s;
			overflow-y: auto;
			
			.main-menu
			{
				font-size: 18px;
				line-height: 28px; /* 155.556% */
				letter-spacing: 0.72px;
				margin-bottom:48px;
				li
				{
					margin-bottom:16px;
					&:last-child
					{
						margin-bottom: 0;
					}
				}
			}
			.social-menu
			{
				li
				{
					margin-bottom: 8px;
					&:last-child
					{
						margin-bottom: 0;
					}
				}
			}
		}
	}
	&:has(#switch-main-menu:checked)
	{
		#head-menu
		{
			z-index:30000;
			transform: translateX(0);
		}
	}
}
body
{
	&:has(#switch-main-menu:checked)
	{
		overflow-y: hidden;
	}
}

#head
{

  header
  {
    picture
    {
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      display: block;
      img
      {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center left;
      }
    }
    color:$text-color;
    h1
    {
      position: relative;
      z-index:1;
      font-size: 40px;
      line-height: 60px;
      letter-spacing: 1.6px;
      margin-bottom:16px;
    }
    .breadcrumb
    {
      position: relative;
      z-index:1;
      display: flex;
      flex-wrap:wrap;
      color:$text-color;
      li
      {
        a
        {
          font-size: 14px;
          line-height: 20px; /* 142.857% */
          letter-spacing: 0.56px;
          color:$text-color;
        }
        &::after
        {
          content:'－ ';
        }
        &:last-child
        {
          &::after
          {
            display: none;
          }
        }
      }
    }
  }
  @media(min-width:1200px)
  {
    display: flex;
    flex-wrap:wrap;
    #head-control
    {
      width: 100%;
    }
    #head-menu
    {
      width: 240px;
    }
    header
    {
      flex:1;
      padding-top:px;
    }
  }
  @media(max-width:1199px)
  {
    header
    {
      padding:40px 24px;
    }
  }
}

#foot-contact
{
	padding-top:72px;
	padding-bottom:72px;
	color:$text-color;
	h4
	{
		font-size: 32px;
		line-height: 46px;
		letter-spacing: 1.28px;
		margin-bottom: 24px;
	}
	p
	{
		font-size: 15px;
		line-height: 22px;
		letter-spacing: 0.6px;
		margin-bottom:40px;
	}
	.btn
	{
		display: flex;
		a
		{
			padding:38px 75px;
			border:1px solid $text-color;
			color:$text-color;
			transition:0.5s;
			&:hover
			{
				background-color: $text-color;
				color:$bg-color;
			}
		}
	}
	@media(min-width:768px)
	{
		padding-top:128px;
		padding-bottom:128px;
		display: flex;
		align-items:center;
		
		>div
		{
			width: 50%;
		}
		.btn
		{
			justify-content:flex-end;
			width: 50%;
		}
	}

}

#foot
{
	padding-top:64px;
	padding-bottom:64px;
	@media(max-width:767px)
	{
		
		padding-bottom:20px;
	}
	#foot-list
	{
		margin-bottom:40px;
		color:$text-color;
		li
		{
			margin-bottom:6px;
			a
			{
				color:$text-color;
				transition:0.5s;
				&:hover
				{
					color:$hover-color;
				}
			}
		}
	}
	#foot-logo
	{
		picture
		{
			width: 70px;
			height: 80px;
			display: block;
			margin-bottom:24px;
			img
			{
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: left center;
			}
		}
		ul
		{
			li
			{
				a
				{
					color:$text-color;
					transition:0.5s;
					&:hover
					{
						color:$hover-color;
					}
				}
			}
		}
		@media(min-width:768px)
		{
			display: flex;

			ul
			{
				flex:1;
				display: flex;
				justify-content:flex-end;
				li
				{
					margin-left:32px;
				}
			}
		}
	}

	#foot-copyright
	{
		p
		{
			color:rgba(255,255,255,.4);
			
			a
			{
				transition:0.5s;
				color:rgba(255,255,255,.4);
				&:hover
				{
					color:#fff;
				}
			}
		}
		ul
		{
			display: flex;
			justify-content:space-between;
			padding:16px 0;
			li
			{
				a
				{
					color:$text-color;
					transition:0.5s;
					
					&:hover
					{
						color:$hover-color;
					}
				}
			}
		}
		@media(min-width:768px)
		{
			display: flex;
			align-items:center;
			p
			{
				order:0;
			}
			ul
			{
				order:1;
				flex:1;
				justify-content:flex-end;
				li
				{
					margin-left: 32px;
				}
			}
		}
	}
}


#social-menu
{
	position: fixed;
	bottom:40px;
	right:40px;
	li
	{
		margin-top:32px;
		&:first-child
		{
			margin-top:0;
		}
		a
		{
			color:#fff;
			writing-mode: vertical-lr;
			transition:0.5s;
			font-size: 14px;
			line-height: 20px;
			letter-spacing: 0.56px;
			text-shadow: 0 0 5px #333;
			&:hover
			{
				color:$hover-color;
			}
		}
	}
}