#body
{
  color:$text-color;

  padding-top:72px;
  padding-bottom:72px;
  border-bottom:1px solid rgba(255,255,255,.2);
  #content
  {
    margin-bottom:32px;
  }

  #contact-list
  {
    background-color: $wbg-color;
    padding:24px;
    text-align: center;
    dl
    {
      margin-bottom:24px;
      dt
      {
        font-weight: 700;
        color:$main-color;
        font-size: 18px;
        line-height: 28px; /* 155.556% */
        letter-spacing: 0.72px;
        a
        {
          color:$main-color;
        }
      }
      dd
      {
        color:$wtext-color;
      }
      &:last-child
      {
        margin-bottom: 0;
      }
    }
    
  }
  @media(min-width:768px)
  {
    #contact-list
    {
      display: flex;
      flex-wrap:wrap;
      
      dl
      {
        padding:24px 0;
        width: 50%;
        margin-bottom:0;
      }
    }
  }


  #contact-form
  {
    padding-top:32px;
    padding-bottom:32px;
    .form-group
    {
      padding-top:32px;
      padding-bottom:32px;
      border-bottom:1px solid rgba(255,255,255,.2);

      >label
      {
        margin-bottom:24px;
        display: block;
      }
      input,select,textarea
      {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.56px;
        color:$wtext-color;
        box-sizing: border-box;
        border:1px solid $text-color;
      }

      input[type=text],input[type=number],input[type=email],input[type=date],input[type=datetime-local]
      {
        display: block;
        width: 100%;
        padding:18px 24px;
        margin:0;
        border-radius: 5px;       
        &::placeholder
        {
          line-height: 20px;
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 0.56px;
          opacity: 0.8;
        }
      }

      .input-group
      {
        label
        {
          display: block;
          margin-bottom:8px;
        }
      }
      input[type=radio]
      {
        border:1px solid #fff;
      }
      select
      {
        display: block;
        width: 100%;
        padding:18px 24px;
        margin:0;
        border-radius: 5px;
      }
      textarea
      {
        display: block;
        width: 100%;
        padding:18px 24px;
        margin:0;
        border-radius: 5px;
        height:300px;
      }
      &.has-error
      {
        >label
        {
          code
          {
            padding-left:10px;
            color:#a00;
          }
        }
        input,select,textarea
        {
          border-color:#a00;
          box-shadow: 0 0 5px #a00;
        }
        
      }
    }
    .form-btn
    {
      display: flex;
      justify-content:center;
      padding-top:50px;
      padding-bottom:50px;
      button
      {
        border:1px solid $text-color;
        background-color: $bg-color;
        color:$text-color;
        padding:12px 40px;
        margin:0;
        cursor: pointer;
        transition:0.5s;
        &:hover
        {
          background-color: $text-color;
          color:$bg-color;
        }
      }
    }
    @media(min-width:768px)
    {
      .form-group
      {
        display: flex;
        align-items:flex-start;
        >label
        {
          padding-top:16px;
          width: 25%;
          padding-right:20px;

        }
        >input,>select,>textarea,>.input-group
        {
          flex:1;
        }
      }
    }
  }
  
}