#home {
  font-family: 'mitr';
  &:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 140vh;
    top: 0;
    background-image: url('../../imgs/banner_pc.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
  }
  .banner{
    padding: 100px 11%;
    padding-bottom: 12vh;
    &__text{
      width: 50%;
    }
    &__btn{
      padding: 12px 30px;
      display: inline-block;
      background: #0053c3;
      color: #fff;
      border-radius: 30px 30px 3px;
      box-shadow: 1px 1px 5px #848282;
      margin-top: 30px;
      img{
        width: 25px;
      }
    }
    &__btnsecondly{
      padding: 12px 30px;
      display: inline-block;
      color: #0053c3;
      border: 1px solid #0053c3;
      border-radius: 30px 30px 30px 3px;
      margin-top: 30px;
      margin-left: 10px;
    }
    .product_banner{
      position: absolute;
      top: 3vh;
      right: 0;
      width: 40%;
      max-width: 650px;
      img{
        width: 100%;
      }
    }
  }
  .title{
    color: #0053c3;
    font-weight: 500;
    font-size: 28px;
    sup{
      font-weight: lighter;
      font-size: 0.6em;
      opacity: 0.8;
      margin-left: 0.2em;
    }
  }
  .why{
    padding: 40px 11%;
    &__items{
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }
    &__item{
      width: 32%;
      color: #fff;
      background: #0053c3;
      padding: 5%;
      border-radius: 3px;
      text-align: center;
      &--icon{
        height: 60px;
      }
      &--title{
        font-weight: 500;
        font-size: 24px;
        margin-top: 20px;
      }
      &--detail{
        font-family: 'mitr-light';
        font-weight: lighter;
        font-size: 15px;
        margin-top: 0.8em;
      }
    }
  }
  .features{
    padding: 40px 11%;
    max-width: 1420px;
    margin: 0 auto;
    &__title{
      font-weight: 500;
      font-size: 38px;
      text-align: center;
    }
    &__subtitle{
      font-family: 'mitr-light';
      font-size: 15px;
    }
    .title{
      text-align: center;
      margin-top: 60px;
      margin-bottom: 20px;
    }
    &__items{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    &__item{
      width: 49%;
      border-radius: 3px;
      background-color: #fff;
      box-shadow: 1px 1px 5px #b8b5b5;
      margin-bottom: 2%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &--detail{
        width: 55%;
      }
      &--title{
        font-size: 20px;
      }
      &--data{
        font-family: 'mitr-light';
        font-size: 15px;
      }
      &--img{
        height: 180px;
      }
      &:nth-child(odd){
        padding-left: 40px;
      }
      &:nth-child(even){
        padding-right: 40px;
      }
    }
  }

  .allFeatures{
    padding: 40px 11% 40px 0;
    display: flex;
    max-width: 1420px;
    margin: 0 auto;

    &__img{
      width: 55%;
    }
    &__data{
      width: 45%;
      display: flex;
      flex-wrap: wrap;
      &--item{
        width: 50%;
        padding-left: 15px;
        &:last-child .allFeatures__data--title::after{
          display: none ;
        }
      }
      &--title{
        color: #0053c3;
        font-size: 20px;
        font-weight: 500;
        padding-bottom: 15px;
        position: relative;

        &::after{
          content: '';
          background-color: #00d647;
          width: 35px;
          height: 5px;
          display: block;
          position: absolute;
          bottom: 0;
        }
      }
      &--detail{
        font-family: 'mitr-light';
        font-size: 15px;
        padding: 20px 0;
      }
    }
  }

  .package {
    background: #0053c3;
    padding: 4%;

    &__card {
      background-color: #fff;
      padding: 4%;

      table {
        width: 100%;
        th {
          text-align: center;
          font-size: 22px;
          font-weight: 500;
          &.title {
            text-align: left;
            color: #0053c3;
            font-weight: 500;
            font-size: 38px;
          }
          &.free {
            color: #0053c3;
          }
        }
        td {
          padding: 15px 0;
          text-align: center;
          font-family: 'mitr-light';
          font-weight: 100;

          .button {
            display: inline-block;
            font-weight: 400;
            padding: 8px 30px;
            border-radius: 30px;
            background: #0053c3;
            color: #fff;
            text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
            border: none;
          }
          .price_title {
            font-weight: 400;
            font-size: 18px;
          }
          .price_subtitle {
            font-size: 14px;
            color: #999;
          }
          &.title {
            text-align: left;
            font-family: 'mitr';
            // font-weight: 500;
            font-size: 20px;
            color: #000;

            .special {
              background-color: #e01c0e;
              color: #fff;
              padding: 5px 8px;
              margin-right: 10px;
              font-size: 11px;
            }
          }
          &.title_course {
            padding-top: 35px;
          }
          &.border {
            border-bottom: 1px solid #ddd;
          }
          &.course {
            padding: 5px 0;
          }

          img.correct {
            width: 15px;
          }
          img.wrong {
            width: 10px;
          }
        }
      }
    }

    .p_switch {
      position: relative;
      height: 40px;
      width: 200px;
      width: fit-content;
      background: rgb(231, 230, 230);
      border-radius: 20px;
      display: flex;
      align-items: center;

      &__input {
        display: none;
      }

      &__input:checked + .p_switch__label {
        color: #004f9c;
        text-shadow: 0 1px rgba(255, 255, 255, 0.25);
        margin: 0;
      }

      &__input:checked + .p_switch__yearly ~ .p_switch__selection {
        left: 100px;
        /* Note: left: 50%; doesn't transition in WebKit */
      }

      &__label {
        position: relative;
        z-index: 2;
        width: 100px;
        color: rgb(87, 84, 82);
        text-align: center;
        cursor: pointer;
        margin-bottom: 0;
        font-weight: 300;
      }
      &__label:hover {
        color: #004f9c;
      }

      &__selection {
        position: absolute;
        z-index: 1;
        display: block;
        width: 100px;
        height: 100%;
        border-radius: 20px;
        background-color: #fff;
        transition: left 0.15s ease-out;
        box-shadow: rgba(15, 12, 9, 0.2) 0px 0px 4px 0px,
          rgba(15, 12, 9, 0.15) 0px 3px 6px 0px;
      }
    }
  }

  .recomment{
    padding: 40px 11% 20px;
    position: relative;
    &::after{
      content: '';
      width: 100%;
      height: 50%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      background-color: #0053c3;
      z-index: -1;
    }
    .card{
      max-width: 1420px;
      margin: 0 auto;
      padding: 30px;
      border-radius: 3px;
      background: #fff;
      box-shadow: 1px 1px 5px #b8b5b5;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    &__text{
      &--title{
        font-size: 38px;
        font-weight: 500;
        color: #0053c3;
      }
      &--subtitle{
        font-family: 'mitr-light';
        font-size: 15px;
      }
    }
    &__btn{
      padding: 12px 30px;
      display: inline-block;
      background: #0053c3;
      color: #fff;
      border-radius: 30px 30px 3px;
      box-shadow: 1px 1px 5px #848282;
      img{
        width: 25px;
      }
    }
  }


  @media only screen and (max-width: 992px) {
    &:before{
      background-image: url('../../imgs/banner_mobile.jpg');
      background-position: bottom;
      height: 110vh;
    }
    .banner{
      padding: 20px 5%;
      text-align: center;
      &__text{
        margin: 0 auto;
        width: 85%;
      }
      &__btn{
        margin-top: 48vh;
      }
      &__btnsecondly{
        margin-top: 20px;
        border-width: 2px;
        background: #fff;
      }
      .product_banner{
        max-width: 70%;
        top: 29vh;
        z-index: -1;
        width: 70%;
      }
    }
    .title{
      text-align: center;
    }
    .why{
      padding: 20px 5%;
      &__items{
        flex-flow: column;
      }
      &__item{
        width: 100%;
        margin-bottom: 15px;
      }
    }
    .features{
      padding: 20px 0;
      &__title{
        font-size: 32px;
      }
      &__subtitle{
        margin-top: 1em;
      }
      &__item{
        width: 100%;
        border-radius: 0;
        margin-bottom: 15px;

        &--title{
          font-size: 15px;
        }
        &:nth-child(odd){
          padding-left: 5%;
        }
        &:nth-child(even){
          padding-right: 5%;
        }
      }
    }
    .allFeatures{
      padding: 20px 0;
      flex-flow: column;
      &__img{
        order: 2;
        width: 100%;
      }
      &__data{
        width: 100%;
        &--item{
          width: 100%;
          padding: 0 5%;
          &:nth-last-child(2) .allFeatures__data--detail{
            padding-bottom: 0;
          }
          &:last-child .allFeatures__data--detail{
            padding-top: 0;
          }
        }
        &--detail{
          display: flex;
          flex-wrap: wrap;
        }
        &--list{
          width: 100%;
          padding-left: 10px;
        }
      }
    }
    .package {
      padding: 3% 0 3% 3%;
      overflow-x: scroll;

      &__card {
        width: fit-content;
        padding: 9% 5%;
        form {
          overflow-x: scroll;
        }

        table {
          font-size: 13px;

          th {
            padding-right: 15px;
            line-height: 1em;
            font-size: 20px;
          }
          th.title {
            font-size: 25px;
          }
          td {
            padding-right: 15px;
            min-width: 50vw;
            word-break: break-all;

            .price_title {
              font-size: 16px;
            }
            .price_subtitle {
              font-size: 11px;
            }
            &.course {
              font-size: 11.5px;
              padding: 3px 0;
            }
            &.title {
              .special {
                display: inline-block;
                font-size: 11px;
                margin-bottom: 5px;
              }
            }
            &.title_course {
              line-height: 1em;
            }
          }
          thead tr th:first-child,
          tbody tr td:first-child {
            width: 45vw;
            min-width: 45vw;
            max-width: 45vw;
            word-break: break-all;
          }
        }
      }

      .p_switch {
        &__label {
          width: 70px;
        }
        &__selection {
          width: 70px;
        }
        &__input:checked + .p_switch__yearly ~ .p_switch__selection {
          left: 70px;
        }
      }
    }
    .recomment{
      padding: 20px 5%;
      .card{
        flex-flow: column;
        text-align: center;
        padding: 30px 20px;
      }
      &__text{
        &--title{
          font-size: 32px;
        }
      }
      &__btn{
        margin-top: 30px;
      }
    }
    
  }

  /* ----------- iPad Pro Portrait ----------- */
  @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    
  }
}