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;
  @media(max-width:767px)
  {
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: 1.3px;
  }
}
*[role=link]
{
  &:hover
  {
    cursor: pointer;
  }
}
*,input,button
{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: never;
	font-family: "Noto Sans TC";
}

.wrap
{
  padding-left:calc(50% - 700px);
  padding-right:calc(50% - 700px);
  @media(max-width:1448px)
  {
    padding-left:24px;
    padding-right:24px;
  }
}

.wrap-l
{
  padding-right:calc(50% - 700px);
  @media(max-width:1448px)
  {
    padding-right:24px;
  }
}

.wrap-r
{
  padding-left:calc(50% - 700px);
  @media(max-width:1448px)
  {
    padding-left:24px;
  }
}
.more
{
  display: flex;
  a
  {
    background-color: $main-color;
    color:#fff;
    border:1px solid $main-color;
    transition-duration:.5s;
    padding:9px 21px;
    &:hover
    {
      color:$main-color;
      background-color: #fff;
    }
  }
  @media(max-width:767px)
  {
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    letter-spacing: 1.3px;
  }
}

.main-title
{
	color:$main-text-color;
	font-size: 30px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: 3px;
	a
	{
		transition-duration:.5s;
		color:$main-text-color;
		&:hover
		{
			color:$main-color;
		}
	}
	@media(max-width:767px)
	{
		font-size: 20px;
		font-weight: 500;
		line-height: 30px;
		letter-spacing: 2px;
		color:$main-text-color;
		
	}
}

.breadcrumb
{
  display: flex;
  flex-wrap:wrap;
  padding-top:50px;
  padding-bottom:50px;
  li
  {
    &::after
    {
      content:'::';
      padding:0 5px;
    }
    a
    {
      color:#8E8E93;
      transition-duration:.5s;
      &:hover
      {
        color:$main-color;
      }
    }
    &:last-child
    {
      &::after
      {
        display: none;
      }
      a
      {
        color:#000;
      }
    }
  }
  @media(max-width:767px)
  {
    padding-top:24px;
    padding-bottom:24px;
  }
}
#head
{
  display: flex;
  align-items:center;
  #logo
  {
    picture
    {
      display: block;
      img
      {
        width: 100%;
        display: none;
        &.main
        {
          display: block;
        }
      }

    }
  }
  @media(min-width:1080px)
  {
    padding-top:45px;
    padding-bottom:45px;
    
    label
    {
      display: none;
    }
    #logo
    {
      order:0;
    }
    #main-menu
    {
      flex:1;
      order:1;
      ul
      {
        
        display: flex;
        justify-content:flex-end;
        li
        {
          padding-left: 30px;
          &:first-child
          {
            padding-left:0;
          }
          a
          {
            color:$text-color;
            transition-duration:.5s;
            &:hover
            {
              color:$main-color;
            }
          }
        }
      }
    }
  }
  @media(max-width:1079px)
  {
    padding:0 24px 0 0;
    justify-content:space-between;
    >label
    {
      width: 74px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      cursor: pointer;
      input
      {
        display: none;
      }
    }

    #main-menu
    {
      z-index:1000;
      display: block;
      background-color: rgba(0,0,0,.5);
      position: absolute;
      top:0;
      left:-100%;
      width: 100%;
      height: 100vh;
      
      >label
      {
        position: relative;
        z-index:1;
        display: block;
        width: 74px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        cursor: pointer;
        color:#fff;
      }
      ul
      {
        transition-duration:.5s;
        position: absolute;
        overflow-y: auto;
        top:0;
        left:-100%;
        width: 100%;
        height: 100%;
        background-color: #000;
        padding:90px 24px 24px 24px;
      }
    }
    &:has(input[type=checkbox]:checked){
      position: relative;
      >label
      {
        i
        {
          display: none;
        }
      }
      #main-menu
      {
        left:0;
        
        ul
        {
          
          position: absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
          background-color: #000;
          padding:90px 24px 24px 24px;
          li
          {
            margin-bottom: 30px;
            &:last-child
            {
              margin-bottom: 0;
            }
            a
            {
              color:#fff;
              transition-duration:.5s;
              &:hover
              {
                color:$main-color;
              }
            }
          }
        }
      }
    }
  }
}


#foot-content
{
  padding-left:calc(50% - 490px);
  padding-right:calc(50% - 490px);
  padding-top:80px;
  padding-bottom:80px;
  background-color: #F6F6F6;

  .head
  {
    display: flex;
    align-items:center;
    padding:24px;
    text-align: center;
    background-color: #fff;
  }
  .info
  {
    display: flex;
    align-items:center;
    text-align: center;
    justify-content:center;
    padding:24px;
    text-align: center;
    background-color: #fff;
    .phone
    {
      color:#000;
      display: block;
      margin-bottom: 20px;
      font-size: 30px;
      font-weight: 700;
      line-height: 150%; /* 45px */
      letter-spacing: 3px;
      i
      {
        font-size:30px;
      }
      
    }
    .more
    {
      padding-top:20px;
      justify-content:center;
    }
  }
  @media(max-width:1028px){
    padding-left: 24px;
    padding-right:24px;
  }
  @media(min-width:768px)
  {
    display: flex;
    .head
    {
      
      width: 300px;
      height: 300px;
      
    }
    .info
    {
      margin-left:2px;
      flex:1;
      height: 300px;
    }
  }
  @media(max-width:767px)
  {
    padding:24px;
    .head
    {
      margin-bottom:10px;
    }
  }

}


#foot
{
  padding-top:80px;
  padding-bottom:80px;
  background-color: #000;
  .left
  {
    picture
    {
      display: block;
      margin-bottom: 24px;
      img
      {
        display: block;
        max-width: 100%;
      }
    }
    ul
    {
      li
      {
        margin-bottom: 24px;
        a
        {
          transition-duration:.5s;
          color:#8E8E93;
          &:hover
          {
            color:#fff;
          }
        }
      }
    }
  }
  .right
  {
    ul
    {
      display: flex;
      flex-wrap:wrap;
      li
      {
        width: 25%;
        padding-bottom:50px;
        margin-bottom:50px;
        border-bottom:1px solid #282828;
        
        a
        {
          color:#fff;
          transition-duration:.5s;
          &:hover
          {
            color:$main-color;
          }
        }
      }
    }
    #copyright
    {
      padding-top:25px;
      font-size:12px;
      color:#333;
      text-align: right;
      a
      {
        color:#333;
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    .left
    {
      width: 50%;
    }
    .right
    {
      width: 50%;
      
    }
  }
  @media(max-width:767px)
  {
    padding:24px;
    .left
    {
      margin-bottom: 24px;
      ul
      {
        li
        {
          margin-bottom: 12px;
        }
      }
    }
    .right
    {
      margin-bottom: 24px;
      ul
      {
        li
        {
          padding-bottom:24px;
          margin-bottom: 24px;
        }
      }
    }
  }
}