website/assets/scss/partner.scss

@import 'variables';
@import 'mixin';

.section-1 {
  position: relative;
  padding-top: 138px;
  padding-bottom: 100px;

  .title-div {
    text-align: center;
  }

  p {
    margin: 12px auto 0;
    letter-spacing: -0.04px;
    color: #ffffff;
  }
}

.section-2 {
  position: relative;
  & > img {
    width: 152px;
    position: absolute;
    right: 50%;
    bottom: -40px;
    transform: translateX(-490px);

    @media only screen and (max-width: $mobile-max-width) {
      display: none;
    }
  }
  & > div {
    display: flex;
    position: relative;
    z-index: 2;
    top: -40px;
    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);

    @media only screen and (max-width: $mobile-max-width) {
      flex-direction: column;
    }

    .left-div {
      position: relative;
      width: 470px;
      height: 298px;
      border-radius: 10px 0 0 10px;
      background-color: #ffffff;

      @media only screen and (max-width: $mobile-max-width) {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 20px;
      }

      div {
        width: 351px;
        height: 48px;
        margin: 38px 80px 12px 40px;

        @media only screen and (max-width: $mobile-max-width) {
          width: 100%;
          margin: 0;
        }
      }
      p {
        width: 391px;
        height: 160px;
        margin-left: 40px;
        line-height: 2;

        @media only screen and (max-width: $mobile-max-width) {
          width: 100%;
          height: auto;
          margin: 0;
        }
      }
      .img-1 {
        position: absolute;
        top: 0;
        left: 0;
      }
      .img-2 {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    .right-div {
      position: relative;
      width: 690px;
      height: 298px;
      border-radius: 0 10px 10px 0;
      background-color: #3d3e49;

      @media only screen and (max-width: $mobile-max-width) {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin-top: 20px;
        border-radius: 10px;
      }

      & > img {
        margin-top: 107px;
        margin-left: 45px;

        @media only screen and (max-width: $mobile-max-width) {
          width: 100%;
          margin-left: 0px;
        }
      }

      .btn-div {
        position: absolute;
        width: 92px;
        height: 27px;
        font-size: 14px;
        line-height: 27px;
        text-align: center;
        color: #ffffff;
        border-radius: 100px;
        box-shadow: 0 2px 8px 0 rgba(250, 164, 66, 0.5);
        background-image: linear-gradient(107deg, #fdba39 20%, #f2635e 99%);
        cursor: pointer;

        @media only screen and (max-width: $mobile-max-width) {
          width: 70px;
          height: 20px;
          line-height: 20px;
        }

        &:hover {
          & > div {
            display: block;
          }
        }

        div {
          display: none;
          position: absolute;
          top: -60px;
          left: 50%;
          width: 140px;
          height: 50px;
          transform: translateX(-50%);
          border-radius: 10px;
          background: #ffffff;

          @media only screen and (max-width: $mobile-max-width) {
            width: 90px;
            height: 40px;
          }

          img {
            width: 95px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            @media only screen and (max-width: $mobile-max-width) {
              width: 70px;
            }
          }

          &::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            border: 4px solid transparent;
            border-top-color: #ffffff;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }

      .div-1 {
        top: 116px;
        left: 85px;
        background-image: linear-gradient(107deg, #f2635e 20%, #fdba39 99%);

        @media only screen and (max-width: $mobile-max-width) {
          left: 15%;
          transform: translateX(-50%);
        }
      }

      .div-2 {
        top: 89px;
        left: 294px;

        @media only screen and (max-width: $mobile-max-width) {
          left: 51.568%;
          transform: translateX(-50%);
        }
      }

      .div-3 {
        top: 92px;
        right: 97px;

        @media only screen and (max-width: $mobile-max-width) {
          right: 12.718%;
          transform: translateX(50%);
        }
      }
    }
  }
}

.section-iframe {
  iframe {
    @media only screen and (max-width: $mobile-max-width) {
      width: 100%;
    }
  }
}

.section-3 {
  padding-top: 54px;
  background-image: url('/images/partner/oval-4.svg');
  background-position: center top;
  background-repeat: no-repeat;

  & > div {
    h2 {
      text-align: center;
    }

    ul {
      margin-top: 20px;

      @media only screen and (max-width: $mobile-max-width) {
        justify-content: center;
      }

      li {
        display: flex;
        flex-direction: column;
        width: 570px;
        min-height: 309px;
        border-radius: 10px;
        margin-top: 20px;
        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
        background-color: #ffffff;

        @media only screen and (max-width: $mobile-max-width) {
          height: auto;
        }

        h3 {
          margin: 40px 40px 20px;
        }

        p {
          min-height: 128px;
          margin-left: 40px;
          margin-right: 40px;
          line-height: 2;
          flex: 1;

          @media only screen and (max-width: $mobile-max-width) {
            height: auto;
          }
        }

        div {
          margin-left: 40px;
          margin-top: 20px;
          margin-bottom: 20px;
          font-weight: 600;
          line-height: 1.5;

          &:last-of-type{
            justify-self: flex-end;
          }
        }
      }
    }
  }

  .apply{
    display: flex;
    margin: 0px auto;
    justify-content: center;
    margin-top: 20px;
    width: 130px;
    height: 48px;
    border-radius: 30px;
    align-items: center;
    color: #fff;
    cursor: pointer;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1) 97%),linear-gradient(to bottom,#55bc8a,#55bc8a);
  }
}

.section-4 {
  & > div {
    margin-top: 80px;
    h2 {
      text-align: center;
    }

    #partner-group {
      margin-top: 40px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 4px 16px 0 rgba(7, 42, 68, 0.1);
      background-color: #ffffff;
      gap: 10px 30px;

      @media only screen and (max-width: $mobile-max-width) {
        .li{
          margin: 0px;
        }
      }

      .li {
        padding: 8px 16px;
        border-radius: 20px;
        height: 24px;
        font-size: 16px;
        line-height: 1.5;
        color: #36435c;
        cursor: pointer;
        transition: all ease 0.2s;

        &:hover {
          box-shadow: 0 8px 16px 0 rgba(101, 193, 148, 0.2), 0 0 50px 0 rgba(101, 193, 148, 0.1);
          background-color: #55bc8a;
          color: #ffffff;
        }
      }

      .active {
        box-shadow: 0 8px 16px 0 rgba(101, 193, 148, 0.2), 0 0 50px 0 rgba(101, 193, 148, 0.1);
        background-color: #55bc8a;
        color: #ffffff;
      }
    }

    ul {
      margin-top: 20px;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      @media only screen and (max-width: $mobile-max-width) {
        justify-content: center;
      }

      li {
        display: inline-block;
        position: relative;
        width: 274px;
        height: 200px;
        border-radius: 4px;
        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
        background-color: #ffffff;

        @media only screen and (max-width: $mobile-max-width) {
          margin: 20px 10px 0;
        }

        &:hover {
          .content {
            display: block;
          }
        }

        img {
          width: 200px;
          height: 100px;
          margin: 50px 37px;
          object-fit: contain;
        }

        .type {
          position: absolute;
          top: 10px;
          right: 0;
          width: 106px;
          height: 32px;
          object-fit: contain;
          line-height: 32px;
          text-align: center;
          font-size: 12px;
          color: #ffffff;
          border-radius: 16px 0 0 16px;
          box-shadow: 0 2px 8px 0 rgba(250, 164, 66, 0.5);
          background-image: linear-gradient(108deg, #fdba39 20%, #f2635e 99%);
        }

        .content {
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 20px 30px;
          background-image: radial-gradient(circle at -23% -21%, #cdf6d5, #089566 75%);
          font-size: 14px;
          line-height: 1.71;
          color: #ffffff;
          overflow: auto;
        }
      }
    }
  }
}