//頁面內容
#head
{
	#banner
	{
		width: 100%;
		position: absolute;
		top:0;
		left:0;
		ul
		{
			li
			{
				picture
				{
					display: block;
					width: 100%;
					height: 100%;
					overflow: hidden;
					img
					{
						display: block;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}
			}
		}
		
	}
	@media(min-width:768px)
	{
		height:56.25vw;
		#banner
		{
			ul
			{
				display: flex;
				li
				{
					width: 50%;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		height: 170vw;
		#banner
		{
			ul
			{
				li
				{
					width: 100%;
					height: 85vw;
				}
			}
		}
	}
}




#about
{
  
  color:$text-color;
  .l
  {
    display: flex;
    picture
    {
      flex:1;
      img
      {
        display: block;
        width: 100%;
      }
    }

    h3
    {
      writing-mode: vertical-lr;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 4px;
      width: 36.95%;
      display: flex;
      align-items:center;
    }
  }
  .r
  {
    display: flex;
    align-items:flex-end;
    img
    {
      display: block;
      width: 100%;
    }
  }

  @media(min-width:768px)
  {
    padding-top:160px;
    padding-bottom:160px;
    display: flex;
    .l
    {
      width: 35vw;
      h3
      {
        padding-top:170px;
      }
    }
    .content
    {
      flex:1;
      padding:170px 20px 0 20px;
      h2
      {
        font-size: 40px;
        line-height: 60px; /* 150% */
        letter-spacing: 1.6px;
      }
      p
      {
        padding:72px 0;
        font-size: 16px;
        line-height: 24px; /* 150% */
        letter-spacing: 0.64px;
      }
    }
    .r
    {
      width: 35.9375vw;
      padding-left:13.28%;
    }
  }
  @media(max-width:767px)
  {
    padding-top:72px;
    padding-bottom:72px;
    .l
    {
      h3
      {
        width: 30%;
      }
    }
    .content
    {
      padding:56px 24px;

      h2
      {
        font-size: 32px;
        font-weight: 400;
        line-height: 46px; /* 143.75% */
        letter-spacing: 1.28px;
      }
      p
      {
        padding:54px 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px; /* 146.667% */
        letter-spacing: 0.6px;
      }
    }
    .r
    {
      padding-left:30%;
    }
  }
}


#service
{
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:72px;
  padding-bottom:72px;
  color:$text-color;
  header
  {
    padding-bottom:72px;
    h2
    {
      font-size: 40px;
      font-weight: 400;
      line-height: 60px; 
      letter-spacing: 1.6px;
      margin-bottom:24px;
    }
    p
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; 
      letter-spacing: 0.64px;
      margin-bottom:40px;
    }
  }
  .article-list
  {
    article
    {
      h3
      {        
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 1.12px;
      }
      label
      {
        input
        {
          display: none;
        }
      }
    }
  }
  @media(min-width:768px)
  {
    padding-top:128px;
    padding-bottom:128px;
    header
    {
      padding-bottom:96px;
      display: flex;
      h2,>div
      {
        width: 50%;
      }
    }
    .article-list
    {
      display: flex;
      border:1px solid $text-color;
      article
      {
        position: relative;
        border-right: 1px solid $text-color;
        width: 80px;
        padding:50px 0;
        overflow: hidden;
        transition:flex 0.5s;
        &:last-child
        {
          border-right:0;
        }
        .title
        {
          display: flex;
          justify-content:flex-end;
          h3
          {

            writing-mode: vertical-lr;
            font-size: 32px;
            line-height: 80px;
            letter-spacing: 1.28px;
            position: relative;
            z-index: 1;
          }
        }
        
        label
        {
          position: absolute;
          top:0px;
          left:0px;
          width: 100%;
          height: 100%;
          cursor: pointer;
          z-index: 2;
        }
        .description
        {
          padding:40px;
          width: 100%;
          position: absolute;
          z-index: 1;
          bottom:0;
          left:0;
          padding:40px;
          width: 100%;
          p
          {
            margin-bottom:24px;
          }
          .more-btn
          {
            opacity: 0;
            transition:opacity 0.5s;
            display: none;
          }
        }
        picture
        {
          position: absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
          display: block;
          overflow: hidden;
          img
          {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right top;
            opacity: 0.2;
            transition:opacity 0.5s;
          }
        }
        &:hover
        {
          picture
          {
            img
            {
              opacity: 1;
            }
          }
        }
        &:has(input:checked)
        {
          width: auto;
          height:600px;
          flex:1;
          label
          {
            display: none;
          }
          picture
          {
            img
            {
              opacity: 1;
            }
          }
          .description
          {
            .more-btn
            {
              opacity: 1;
              display: block;
            }
          }
        }
      }
    }
  }


  @media(max-width:767px)
  {
    header
    {
      h2
      {
        font-size: 32px;
        line-height: 46px;
        letter-spacing: 1.28px;
      }
    }
    .article-list
    {
      display: flex;
      max-width: 100%;
      overflow-y: auto;
      article
      {
        position: relative;
        min-width: calc(100% - 40px);
        padding:56px 40px 96px 40px;
        overflow: hidden;
        label
        {
          display: none;
        }        
        picture
        {
          position: absolute;
          z-index:0;
          top:0;
          left: 0;
          width: 100%;
          display: block;
          img
          {
            display: block;
            width: 100%;
            height:100%;
            object-fit: cover;
            object-position:center;
          }
        }
        h3
        {
          position: relative;
          z-index: 1;
          font-size: 28px;
          line-height: 32px; 
          letter-spacing: 1.12px;
          color:$text-color;
          margin-bottom:80px;
        }
        .description
        {
          p
          {
            position: relative;
            z-index: 1;
            font-size: 15px;
            line-height: 22px; 
            letter-spacing: 0.6px;
            color:$text-color;
            margin-bottom:24px;
          }
          .more-btn
          {
            position: absolute;

            bottom:40px;
            left:40px;
          }
        }
      }
    }
  }
}


#feedback
{
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-top:72px;
  padding-bottom:72px;
  background-color: $wbg-color;
  color:$wtext-color;
  header
  {
    margin-bottom:56px;
    h2
    {
      font-size: 32px;
      line-height: 46px;
      letter-spacing: 1.28px;
      margin-bottom:24px;
    }

  }

  >div
  {
    display: flex;
    overflow-y: auto;
    dl
    {
      margin-right:48px;
      min-width: 200px;
      dt
      {
        font-weight: 900;
      }
      dd
      {
        padding-bottom:40px;
        &::before
        {
          font-family: "Font Awesome 6 Free";
          font-weight: 900;
          content:'\f005\f005\f005\f005\f005';
          display: block;
          padding:16px 0;
          color:rgb(249, 249, 124);
        }
      }
      &:last-child
      {
        margin-right:0;
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    header
    {
      width: 300px;
      padding-right:20px;
    }
    >div
    {
      flex:1;
    }
  }
}