/* simple template */
.container {
    width: 100%
}
@media (min-width: 576px) {
    .container {
        max-width: 576px
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px
    }
}
@media (min-width: 1920px) {
    .container {
        max-width: 1920px
    }
}
/* ====== footer start ====== */
.twm-footer {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
    --padding-x: 20px
}
@media (min-width: 1024px) {
  .twm-footer {
      --padding-x: 28px
  }
    }
.twm-footer .img-box img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain
}
.twm-footer .certification-box {
      padding: var(--padding-x);
      display: grid;
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      border-bottom-width: 1px;
      --tw-border-opacity: 1;
      border-color: rgb(150 152 155 / var(--tw-border-opacity, 1));
    }
@media (min-width: 768px) {
    .twm-footer .certification-box {
        display: flex;
        justify-content: center;
        gap: 4rem
    }
}
@media (min-width: 1280px) {
    .twm-footer .certification-box {
        gap: 7rem
    }
}
.twm-footer .certification-box .certification {
    display: flex;
    align-items: center;
    gap: 0.5rem
}
@media (min-width: 1024px) {
    .twm-footer .certification-box .certification {
        gap: 1.25rem
    }
}
.twm-footer .certification-box .certification .img-box {
    height: 1.75rem;
    width: 1.75rem
}
@media (min-width: 1024px) {

        .twm-footer .certification-box .certification .img-box {
            width: 65px;
            height: 65px
        }
          }
.twm-footer .certification-box .certification h4 {
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0.6
}
@media (min-width: 1024px) {
    .twm-footer .certification-box .certification h4 {
        text-align: center;
            transform: translateY(4px)
    }
}
.twm-footer .footer-gradient {
    width: 100%;
    overflow: hidden
}
.twm-footer .footer-gradient .gradient {
        background: linear-gradient(
          90deg,
          #ffb500 0%,
          #ff6700 6.25%,
          #00ac7a 12.5%,
          #624bee 18.75%,
          #ffb500 25%,
          #ff6700 31.25%,
          #00ac7a 37.5%,
          #624bee 43.75%,
          #ffb500 50%,
          #ff6700 56.25%,
          #00ac7a 62.5%,
          #624bee 68.75%,
          #ffb500 75%,
          #ff6700 81.25%,
          #00ac7a 87.5%,
          #624bee 93.75%,
          #ffb500 100%
        );
        height: 5px;
        width: 200vw;
        animation: move 40s linear infinite;
      }
@keyframes move {
          0% {
            transform: translateX(-50%);
          }
          100% {
            transform: translateX(0%);
          }
        }
.twm-footer .footer-content {
      padding: var(--padding-x);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
@media (min-width: 768px) {
    .twm-footer .footer-content {
        flex-direction: row;
        align-items: flex-end;
        justify-content: center
    }
}
@media (min-width: 1024px) {
    .twm-footer .footer-content {
        gap: 2.25rem
    }
}
.twm-footer .footer-content .content-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem
}
@media (min-width: 1024px) {
    .twm-footer .footer-content .content-left {
        flex-direction: row;
        align-items: center;
        gap: 2.25rem
    }
}
.twm-footer .footer-content .content-left .img-box {
    height: 1.25rem;
    width: auto
}
@media (min-width: 1024px) {

        .twm-footer .footer-content .content-left .img-box {
            width: 150px;
            height: 35px
        }

        .twm-footer .footer-content .content-left .text {
            transform: translateY(4px)
        }
          }
.twm-footer .footer-content .content-left .text h5 {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem
}
.twm-footer .footer-content .content-left .text p {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0.6
}
@media (min-width: 768px) {
    .twm-footer .footer-content .content-left .text p {
        flex-direction: row;
        gap: 1rem
    }
}
.twm-footer .footer-content .content-right {
    display: flex;
    gap: 0.75rem
}
.twm-footer .footer-content .content-right a:hover {
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity, 1))
}
.twm-footer .footer-content .content-right a svg {
            width: 30px;
            height: 30px;
            pointer-events: none;
          }
.twm-footer .footer-link {
      padding: var(--padding-x);
      --tw-bg-opacity: 1;
      background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    }
@media (min-width: 768px) {
    .twm-footer .footer-link {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}
.twm-footer .footer-link .link-box {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem
}
.twm-footer .footer-link .link-box a {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    line-height: 1
}
.twm-footer .footer-link .link-box a:hover {
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity, 1))
}
.twm-footer .footer-link p {
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
    --tw-text-opacity: 1;
    color: rgb(234 234 235 / var(--tw-text-opacity, 1))
}
/* ====== footer end ====== */
main {
  padding: 3.75rem 0;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 57.01%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    url('../../images/portals/client/bg.jpg');
}
@media (min-width: 1024px) {
    .page-heading {
        position: relative;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: center
    }
}
.page-heading p.copyright {
    position: absolute;
    bottom: 0px;
    display: none
}
@media (min-width: 1024px) {
    .page-heading p.copyright {
        display: block
    }
}
footer.copyright {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    width: 100%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@media (min-width: 1024px) {
    footer.copyright {
        display: none
    }
}
.portal-header.scroll-header {
    position: absolute
}
@media (min-width: 1024px) {
    .portal-header.scroll-header {
        display: none
    }
}
.logo-group {
    margin-bottom: 1rem;
    display: none;
    gap: 1.5rem;
    padding-top: 10px;
    padding-bottom: 10px
}
@media (min-width: 1024px) {
    .logo-group {
        display: flex
    }
}
.login-pannel {
    max-height: 70vh;
    overflow: hidden
}
@media (min-width: 1024px) {
    .login-pannel {
        max-height: 100%
    }
}
.site-link {
    position: relative;
    padding-right: 1.5rem
}
.portal-remind {
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem
}
.remind-list {
    margin-top: 0.5rem;
    list-style-type: decimal;
    padding-left: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(213 214 215 / var(--tw-text-opacity, 1))
}

/*# sourceMappingURL=portal-client-service.css.map */