$main-color:#e7000b;
$second-color:#fb2c36;
$link-color:#d1d5dc;
$text-color:#fff;
$menu-bg-color:#06070b;
$bg-color:#111827;
$description-color:#99a1af;
html{
  scroll-behavior: smooth;
}
html,body{
	padding:0;
	background-color: #0D1117;
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	font-size:1em;
	line-height:1.5;
}

.wrap
{
	padding-right: calc(50% - 736px);
	padding-left:calc(50% - 736px);
	@media(max-width:1535px)
	{
		padding-right: calc(50% - 608px);
		padding-left:calc(50% - 608px);
	}
	@media(max-width:1279px)
	{
		padding-right: calc(50% - 480px);
		padding-left:calc(50% - 480px);
	}
	@media(max-width:1023px)
	{
		padding-right: calc(50% - 360px);
		padding-left:calc(50% - 360px);
	}
	@media(max-width:767px)
	{
		padding-right: calc(50% - 296px);
		padding-left:calc(50% - 296px);
	}
	@media(max-width:639px)
	{
		padding-right:16px;
		padding-left:16px;
	}
}


#head
{
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items:center;
	z-index:100;
	&.show
  {
    background-color: $bg-color;
  }
	#logo
	{
		a
		{
			display: block;
			img
			{
				height: 40px;
			}
		}
	}
	input[type=checkbox]
	{
		display: none;
	}
	#main-menu
	{
		ul
		{
			li
			{
				a
				{
					transition-duration:0.5s;
					color:#d1d5dc;
					font-size:0.875rem;
					&:hover
					{
						color:$text-color;
					}
				}
			}
		}
	}
	#socil-menu
	{
		ul
		{
			li
			{
				a
				{
					display: flex;
					align-items:center;
					justify-content:center;
					padding:0 20px;
					height: 40px;
					transition-duration:0.5s;
					color:#d1d5dc;
					font-size:0.875rem;
					border-radius: 5px;
					i
					{
						font-size:1rem;
						padding-right:5px;
						color:$main-color;
					}
					&:hover
					{
						color:$text-color;
					}
				}
				&:last-child
				{
					a
					{
						background-color: $main-color;
						
						i
						{
							color:$link-color;
						}
						&:hover
						{
							background-color: $second-color;
						}
					}
				}
			}
		}
	}

	@media(min-width:1024px)
	{
		padding-top:20px;
		padding-bottom:20px;
		#main-menu
		{
			width: 600px;
			padding-right:36px;
			padding-left:36px;
			ul
			{
				display: flex;
				justify-content: space-between;
				li
				{
					a
					{
						position: relative;
						display: block;
						padding-top:5px;
						padding-bottom:5px;
						overflow: hidden;
						&::after
						{
							transition-duration:0.3s;
							content:' ';
							width: 100%;
							height:2px;
							background:$main-color;
							position: absolute;
							bottom:0;
							left:-100%;
						}
						&:hover
						{
							&::after
							{
								left:0;
							}
						}
					}
				}
			}
		}
		#socil-menu
		{
			ul
			{
				display: flex;
				justify-content: space-between;
			}
		}
		label
		{
			display: none;
		}
	}


	@media(max-width:1023px)
	{
		padding-top:12px;
		padding-bottom:12px;
		#main-menu
		{
			display: none;
			border-top:1px solid rgba(255,255,255,10%);
			border-bottom:1px solid rgba(255,255,255,10%);
			width: 100%;
			position: absolute;
			top:100%;
			left:0;
			padding-right: calc(50% - 360px);
			padding-left:calc(50% - 360px);
			padding-top:36px;
			padding-bottom:36px;
			background-color: #111827;
			ul
			{
				li
				{
					margin-bottom:5px;
					&:last-child
					{
						margin-bottom:0;
					}
					a
					{
						height:44px;
						display: flex;
						align-items:center;
						padding:0 25px;
						border-radius: 10px;
						&:hover
						{
							background-color: rgba(255,255,255,10%);
						}
					}
				}
			}
		}

		#socil-menu
		{
			position: fixed;
			bottom:50px;
			right:16px;
      display: none;
			ul
			{
				li
				{
					margin-bottom:20px;
					a
					{
						background-color: oklch(0.13 0.01 264 );
						height: 50px;
						border:1px solid rgba(255,255,255,10%);
						box-shadow: 0 0 5px rgba(0,0,0,.5);
						border-radius:50px;
						color:#fff;
						&:hover
						{
							background-color: oklch(0.18 0.01 264);;
						}
					}
					&:last-child
					{
						margin-bottom:0px;
					}
				}
			}
		}
		label
		{
			color:#fff;
			background-color: rgba(255,255,255,0);
			padding:0;
			margin:0;
			border:0;
			width: 40px;
			height: 40px;
			display: flex;
			cursor: pointer;
			justify-content:center;
			align-items:center;
		}
    &.show
    {
      #socil-menu
      {
        display: block;
      }
    }
		&:has(input[type=checkbox]:checked)
		{
			#main-menu
			{
				display: block;
			}
		}

	}

	@media(max-width:767px)
	{
		&:has(input[type=checkbox]:checked)
		{
			#main-menu
			{
				padding-right: calc(50% - 296px);
				padding-left:calc(50% - 296px);
			}
		}
	}

	@media(max-width:639px)
	{
		&:has(input[type=checkbox]:checked)
		{
			#main-menu
			{
				padding-right:16px;
				padding-left:16px;
			}
		}
	}

	label
	{
		svg
		{
			&:last-child
			{
				display: none;
			}
		}
	}
	&:has(input[type=checkbox]:checked)
	{
		label
		{
			svg
			{
				&:first-child
				{
					display: none;
				}
				&:last-child
				{
					display: block;
				}
			}
		}
		
	}
	
}

#foot-content
{
	padding-top:60px;
	padding-bottom:60px;
	background-color: $bg-color;
	>div
	{
		background-color: $main-color;
		color:$text-color;
		padding:32px;
		border-radius: 20px;
		.header
		{
			h2
			{
				font-size:2rem;
				line-height:2.5rem;
				font-weight: 700;
			}
			p
			{
				padding:20px 0;
				color:$link-color;
			}
			ul
			{
				li
				{
					a
					{
						padding:16px 24px;
						border:1px solid rgba(255,255,255,10%);
						background-color: rgba(255,255,255,15%);
						display: block;
						color:#fff;
						border-radius: 10px;
						margin-bottom:20px;
						font-weight: 700;
					}
					&:first-child
					{
						a
						{
							background-color: $text-color;
							color:$main-color;
						}
					}
				}
			}
		}
	}
  .contact-form
  {
    background-color: rgba(255,255,255,.1);
    border-radius: 20px;
    padding:32px;
    h3
    {
      font-size:1.2rem;
			font-weight: 700;
			margin-bottom:20px;
    }
    .form-group
    {
      margin-bottom:20px;
      label
      {
        display: block;
        margin-bottom:10px;
      }
      &.has-error
      {
        label
        {
          code
          {

            margin-left:15px;
          }
        }
      }
      input{
        width:100%;
        padding:2px 8px;
        border:0;
        border-radius: 10px;
        height:3rem;
        font-size:1rem;
        line-height:1.5rem;
        &::placeholder
        {
          font-size:1rem;
          color:$second-color;
        }
      }
      textarea
      {
        width:100%;
        padding:2px 8px;
        border:0;
        border-radius: 10px;
        height:9rem;
        font-size:1rem;
        line-height:1.5rem;
        &::placeholder
        {
          font-size:1rem;
          color:$second-color;
          line-height:2rem;
          
        }
      }      
    }
    button
    {
      cursor: pointer;
      background-color: #fff;
      border:0;
      font-size:1.1rem;
      font-weight: 500;
      width: 100%;
      padding:10px;
      border-radius: 10px;
      color:$second-color;
    }
  }
	.data-list
	{
		background-color: rgba(255,255,255,.1);
		padding:32px;
		border-radius: 20px;
		h3
		{
			font-size:1.2rem;
			font-weight: 700;
			margin-bottom:20px;
		}
		>div
		{
			display: flex;
			margin-bottom:20px;		
			dl
			{
				margin-left:10px;
				dt
				{
					font-size:0.7rem;
					color:rgba(255,255,255,.5);
					line-height:0.7rem;
				}
				dd
				{
					a
					{
						color:$text-color;
					}
				}
			}
		}
	}
	@media(min-width:980px)
	{
		>div
		{
			display: flex;
			.header
			{
				width: 400px;
				margin-right:32px;
			}
      .contact-form{
        width: calc((100% - 464px) / 2);
        margin-right:32px;
      }
			.data-list
			{
				flex:1;

			}
		}
	}
	@media(min-width:768px)
	{
		>div
		{
			.header
			{
				h2
				{
					font-size:2rem;
				}
				ul
				{
					display: flex;
					li
					{
						padding-right:16px;
						&:last-child
						{
							padding-right:0;
						}
					}
				}
			}
      .contact-form{
        margin-bottom:20px;
      }
		}
	}
	@media(max-width:767px)
	{
		>div
		{
			padding:16px;
			.header
			{
				margin-bottom:50px;
        h2
        {
          font-size:1.8rem;
        }
				ul
				{
					text-align: center;
				}
			}
      .contact-form{
        margin-bottom:20px;
        padding:16px;
      }
			.data-list
			{
				padding:16px;
			}
		}
	}
}

#foot
{
	padding-top:80px;
	padding-bottom:80px;
	.logo
	{
		a
		{
			margin-bottom:20px;
			img
			{
				display: block;
				height: 40px;
			}
		}
		p
		{
			padding:20px 0;
			color:$description-color;
			font-size:0.875rem;
		}
	}
	.data-list
	{
		h4
		{
			color:$text-color;
			font-weight: 700;
			margin-bottom: 10px;
		}
		ul
		{
			li
			{
				margin-bottom: 10px;
				a
				{
					color:$description-color;
					font-size:0.875rem;
					i
					{
						color:$main-color;
						margin-right:5px;
					}
				}
			}
		}
	}

	@media(min-width:980px)
	{
		display: flex;
		.logo
		{
			width: 50%;
		}
		.data-list
		{
			width: 50%;
			display: flex;
			>div
			{
				width: 50%;
			}
		}
	}
	@media(max-width:979px)
	{
		.data-list
		{
			ul
			{
				margin-bottom:20px;
			}
		}
	}
}

#foot-contact-form
{
  padding-top:80px;
  padding-bottom:80px;
}

#copyright
{
	border-top:1px solid rgba(255,255,255,.1);
	padding:10px ;
	text-align: center;;
	font-size:0.7rem;
	color:$description-color;
	a{
		color:$description-color;
	}

}