html,body
{
  font-family: "Noto Sans TC",'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px; 
	letter-spacing: 0.8px;
  .price
  {
    font-family: 'Roboto';
    font-weight: 500 !important;
  }
}

#top-bg
{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height:43.5vw;
	z-index:0;
}
*[role=link]
{
  cursor: pointer;
}
#head
{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	background-color: rgba(68, 68, 68, 0.80);
	backdrop-filter: blur(12.5px);
	color:$main-color;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px; 
	letter-spacing: 0.8px;
	color:$main-color;
  z-index:500;
	#top-head
	{
    
		border-bottom:1px solid #fff;
		.menu
		{
			li
			{
				a
				{
					color:$main-color;
					transition-duration:.5s;
					&:hover
					{
						color:#fff;
					}
				}
			}
		}
		.socil
		{
			li
			{
				a
				{
					color:#fff;
					transition-duration:.5s;
					&:hover
					{
						color:$main-color;
					}
				}
			}
		}
	}
	#foot-head
	{
		#logo
		{
			a
			{
				display: block;
				height: 100%;
				picture
				{
					height: 100%;
					display: block;
					img
					{
						display: block;
						height: 100%;
					}
				}
			}
		}
		.main-menu
		{
			li
			{
				a
				{
					color:$main-color;
					transition-duration:.5s;
					&:hover
					{
						color:#fff;
					}
				}
			}
		}
		.tool-menu
		{
			li
			{
				a,button
				{
          background-color: rgba(255,255,255,0);
          border:0px;
          padding:0px;
					display: block;
          cursor: pointer;
				}
				label
				{
					position: relative;
					display: block;
					input[type=checkbox]
					{
						position: absolute;
						top:0px;
						left:0px;
						width: 100%;
						height:100%;
						margin:0px;
						padding:0px;
						cursor: pointer;
						opacity: 0;
					}
				}
			}
		}
	}
	@media(min-width:1500px)
	{
		#top-head,#foot-head
		{
			padding-left:calc(50% - 745px);
			padding-right:calc(50% - 745px);
		}
	}
	@media(max-width:1499px)
	{
		#top-head,#foot-head
		{
			padding-left:10px;
			padding-right:10px;
		}
	}
	@media(min-width:1200px)
	{
		#top-head,#foot-head
		{
			display: flex;
		}

		#top-head
		{
			padding-top:12px;
			padding-bottom:12px;
			h4
			{
				min-width:220px;
			}
			.menu
			{
				flex:1;
				display: flex;
				align-items:center;
				li
				{
					a
					{
						display: block;
						padding:0 16px;
						border-left:1px solid $main-color;
						line-height: 100%;
					}
					&:first-child
					{
						a
						{
							padding-left:0px;
							border-left:0px;
						}
					}
				}
			}
			.socil
			{
				display: flex;
				li
				{
					padding:0 8px;
					&:last-child
					{
						padding-right: 0px;
					}
					a
					{
						i
						{
							margin-right: 8px;
						}
					}
				}
			}
			
		}
		#foot-head
		{
			display: flex;
			align-items:center;
			padding-top:16px;
			padding-bottom:16px;
			label
			{
				&:has(input[name=main-menu])
				{
					display: none;
				}
			}
			#logo
			{
				min-width: 220px;
				height:60px;
			}
			.main-menu
			{
				flex:1;
				display: flex;
				li
				{
					padding:0 20px;
					&:first-child
					{
						padding-left:0px;
					}
					a
					{
						color:$main-color;
						&:hover
						{
							color:#fff;
						}
					}
				}
			}
			.tool-menu
			{
				display: flex;
				align-items:center;
				svg
				{
					width: 28px;
					height:28px;
					fill:#fff;
					transition-duration:.5s;
					path
					{
						transition-duration:.5s;
						fill:#fff;
					}

					&:hover
					{
						fill:$main-color;
						path
						{
							fill:$main-color;
						}
					}
				}
				li
				{
					padding-left:60px;
					&:first-child
					{
						padding-left:0px;
					}
					label
					{
						input
						{
							height:28px;
						}
					}
					form
					{
						display: none;
					}
					&:has(input[name=search-box])
					{
						.close
						{
							display: none;
						}
					}
					&:has(input[name=search-box]:checked)
					{
						.close
						{
							display: block;
						}
						.open
						{
							display: none;
						}
						position: relative;
						form
						{
							display: flex;
							position: absolute;
							right:0px;
							top:calc(100% + 10px);
							border:1px solid #ccc;
							background-color: #444;
							border-radius: 5px;
							box-shadow: 0 0 3px #000;
							input
							{
								border:0px;
								padding:8px 8px;
								background-color: rgba(0,0,0,0);
								color:#fff;
								min-width:100px;
							}
							button
							{
								
								background-color: rgba(0,0,0,0);
								color:#fff;
								border:0px;
								border-left:1px solid #fff;
								padding:0px;
								width:60px;
							}
						}
					}
					
				}
			}
		}
	}
	@media(max-width:1199px)
	{
		background-color: #444;
		position: fixed;
		top:0px;
		left:0px;
		width: 100%;
		
		#top-head
		{
			display: none;
		}
		#foot-head
		{
			label
			{
				&:has(input[name=main-menu])
				{
					position: fixed;
					top:0px;
					left:0px;
					padding:10px 10px 10px 15px;
					width:45px;
					height:50px;
					span
					{
						display: block;
						padding:5px 0;
						svg
						{
							fill:$main-color;
							width:25px;
							height:20px;
							&.close
							{
								display: none;
							}
						}
					}
					input
					{
						position: fixed;
						top:0px;
						left:0px;
						width:45px;
						height:50px;
						margin:0px;
						padding:0px;
						border:0px;
						opacity:0;
						cursor: pointer;
					}
				}
				&:has(input[name=main-menu]:checked)
				{
					span
					{
						svg
						{
							&.close
							{
								display: block;
							}
							&.open
							{
								display: none;
							}
						}
					}
				}
				
			}

			#logo
			{
				padding:10px 0;
				display: flex;
				justify-content:center;
				width:100%;
				a
				{
					picture
					{
						height:30px;
					}
				}
			}
			.tool-menu
      {
        display: none;
      }
      .main-menu
      {
        display: none;
      }
			
		}
		&:has(input[name=main-menu]:checked)
		{
			height:100vh;
			overflow-y:auto;
			display: flex;
			flex-direction:column;
			#top-head
			{
				order:1;
				display: block;
				h4
				{
					display: none;
				}
				.menu
				{
					li
					{
						border-bottom: 1px solid #fff;
						a
						{
							padding:24px 0;
							display: block;
						}
					}
				}
				.socil
				{
					li
					{
						border-bottom: 1px solid #fff;
						a
						{
							padding:24px 0;
							display: block;
							color:$main-color;
							i
							{
								margin-right: 10px;
							}
							&:hover
							{
								color:#fff;
							}
						}
						&:last-child
						{
							padding-bottom:10px;
							border-bottom: 0px;
						}
					}
				}
			}
			#foot-head
			{
				order:0;
				display: flex;
				flex-direction:column;
				#logo
				{
					order:0;
				}
				.main-menu
				{
					order:2;
					display: block;
					li
					{
						border-bottom: 1px solid #fff;
						a
						{
							padding:24px 0;
							display: block;
						}
					}
				}
				.tool-menu
				{
					display: flex;
					flex-wrap:wrap;
					padding-bottom:10px;
					order:1;
					li
					{
						width: calc(100% / 3);
						display: flex;
						justify-content:center;
						svg
						{
							width:30px;
							height:30px;
							fill:$main-color;
						}
						&:last-child
						{
							order:-1;
							width: 100%;
							label
							{
								display: none;
							}
							form
							{
								width: 100%;
								margin-bottom:10px;
								display: flex;
								input
								{
									flex:1;
									border:0px;
									padding:10px 16px;
									margin:0px;
									border-radius: 50px 0 0 50px;
								}
								button
								{
									width:60px;
									border:0px;
									padding:0 10px;
									margin:0px;
									background-color: #fff;
									border-radius:0 50px 50px 0;
									font-size:16px;
								}
							}
						}
					}
				}
			}
			
		}
	}
}


#body
{
	position:sticky;
	z-index:1;
}


#ads
{
  position: fixed;
  top:0px;
  left:0px;
  width: 100%;
  height:100%;
  z-index:9999;
  display: flex;
  align-items:center;
  justify-content:center;
  label
  {
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height:100%;
    z-index:9000;
  }
  >div
  {
    position: relative;
    z-index:10000;
    padding:20px;
    picture
    {
      img
      {
        display: block;
        max-width: 100%;
      }
    }
    input
    {
      position: absolute;
      top:10px;
      right:10px;
      border:0px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      margin:0px;
      padding:0px;
      opacity: 0;
    }
    i
    {
      border-radius: 100%;
      background-color: #fff;
      text-align: center;
      line-height:24px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      width: 24px;
      height:24px;
      position: absolute;
      top:10px;
      right:10px;
      border:0px;
    }
  }
  &:has(input:checked)
  {
    display: none;
  }
}

#foot
{
  background-color: $main-color;
  padding-top:50px;
  padding-bottom:50px;
  ul
  {
    a
    {
      color:#fff;
      font-size: 16px;
      font-weight: 400;
      line-height: 26px; /* 162.5% */
      letter-spacing: 0.8px;
    }
  }
  
  @media(min-width:1328px)
  {
    padding-left:calc(50% - 640px);
    padding-right:calc(50% - 640px);
  }
  @media(max-width:1327px)
  {
    padding-left:24px;
    padding-right:24px;
  }
  #foot-menu
  {
    ul
    {
      li
      {
        margin-bottom: 16px;
      }
    }
  }
  #foot-socil
  {
    ul
    {
      display: flex;
      li
      {
        padding-right:40px;
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    #foot-menu
    {
      width: 75%;
      >ul
      {
        display: flex;
        li
        {
          flex:1;
        }
      }
    }
    #foot-socil
    {
      width: 25%;
      ul
      {
        li
        {
          padding-right:40px;
        }
      }
    }
  }
  @media(max-width:767px)
  {
    #foot-menu
    {
      >ul
      {
        
        >li
        {
          ul
          {
            display: flex;
            flex-wrap:wrap;
            li
            {
              width: 50%;
            }
          }
        }
      }
    }
  }
}


#back-to-top
{
  position: fixed;
  right:10px;
  bottom:10px;
  width: 32px;
  height:32px;
  background-color: $main-color;
  display: flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  border:1px solid #fff;
  border-radius: 3px;
  display: none;
  z-index:1000;
  &.active
  {
    display: flex;
  }
}

#dh-member-modal
{
  .member-menu
  {
    .grid-menu
    {
      ul
      {
        li
        {
          a
          {
            color:#333;
          }
        }
      }
    }
  }
  #join-content
  {
    p
    {
      margin-bottom:20px;      
    }
    strong
    {
      font-weight: 900;
    }
  }
}