* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }

  html,
  body {
    width: 100%;
    font-family: "Capriola", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, open sans, helvetica neue, sans-serif, serif;
  }

  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 172px;
    z-index: -1;
  }

  .cs-lazy {
    display: none;
  }

  .loading-img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    background-color: #e8e8e8;
  }

  .loading-inner {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: url("static/img/loading.html") no-repeat center center;
    background-size: 100% 100%;
  }

  a:active {
    transform: scale(0.99);
  }

  .lazy-box {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
  }

  .lazy-box img {
    object-fit: cover;
  }

  .test-upload-cropper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    display: none;
  }

  .test-upload-cropper .cropper_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .test-upload-cropper .cropper_wrapper .cropper-modal {
    background: rgba(255, 255, 255, 0.27) !important;
    backdrop-filter: blur(7.4499998093px);
    opacity: 1 !important;
  }

  .test-upload-cropper .cropper_wrapper .cropper-bg {
    background: #fff;
  }

  .test-upload-cropper .cropper_wrapper .cropper-line {
    background: transparent;
  }

  .test-upload-cropper .cropper_wrapper .cropper-view-box {
    outline: 0px;
    border: 3px solid #90EBEE;
  }

  .test-upload-cropper .cropper_wrapper .cropper-dashed {
    border: 1px dashed #90EBEE;
  }

  .test-upload-cropper .cropper_wrapper .cropper-face {
    background-image: url("static/img/common/cropper_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.27);
    backdrop-filter: blur(7.4499998093px);
    opacity: 0.3;
  }

  .test-upload-cropper .cropper_wrapper .point-n,
  .test-upload-cropper .cropper_wrapper .point-e,
  .test-upload-cropper .cropper_wrapper .point-s,
  .test-upload-cropper .cropper_wrapper .point-w {
    display: none;
  }

  .test-upload-cropper .cropper_wrapper .point-nw,
  .test-upload-cropper .cropper_wrapper .point-ne,
  .test-upload-cropper .cropper_wrapper .point-sw,
  .test-upload-cropper .cropper_wrapper .point-se {
    width: 20px;
    height: 20px;
    background: #90EBEE;
    opacity: 1;
  }

  .test-upload-cropper .cropper_wrapper .point-sw {
    bottom: -8px;
    left: -8px;
  }

  .test-upload-cropper .cropper_wrapper .point-nw {
    top: -8px;
    left: -8px;
  }

  .test-upload-cropper .cropper_wrapper .point-ne {
    top: -8px;
    right: -8px;
  }

  .test-upload-cropper .cropper_wrapper .point-se {
    bottom: -8px;
    right: -8px;
  }

  .test-upload-cropper .btns {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .test-upload-cropper .btns .btn-cancel,
  .test-upload-cropper .btns .btn-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 36px;
    border-radius: 6px;
    border: 1px solid #90EBEE;
    background: #00B5CB;
    cursor: pointer;
    color: #FFF;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
  }

  @keyframes progress-color-1 {
    0% {
      height: 5%;
      background: #FB1EFF;
    }

    100% {
      height: var(--target-height);
      background: #FB1EFF;
    }
  }

  @keyframes progress-color-2 {
    0% {
      height: 5%;
      background: #FB1EFF;
    }

    26% {
      background: #FB1EFF;
    }

    27% {
      background: #0F67FF;
    }

    100% {
      height: var(--target-height);
      background: #0F67FF;
    }
  }

  @keyframes progress-color-3 {
    0% {
      height: 0;
      background: #FB1EFF;
    }

    15% {
      background: #FB1EFF;
    }

    16% {
      background: #0F67FF;
    }

    56% {
      background: #0F67FF;
    }

    57% {
      background: #3EE800;
    }

    100% {
      height: var(--target-height);
      background: #3EE800;
    }
  }

  @keyframes progress-color-4 {
    0% {
      height: 0;
      background: #FB1EFF;
    }

    10% {
      background: #FB1EFF;
    }

    11% {
      background: #0F67FF;
    }

    39% {
      background: #0F67FF;
    }

    40% {
      background: #3EE800;
    }

    70% {
      background: #3EE800;
    }

    71% {
      background: #FFF702;
    }

    100% {
      height: var(--target-height);
      background: #FFF702;
    }
  }

  @keyframes progress-color-5 {
    0% {
      height: 0;
      background: #FB1EFF;
    }

    8% {
      background: #FB1EFF;
    }

    9% {
      background: #0F67FF;
    }

    29% {
      background: #0F67FF;
    }

    30% {
      background: #3EE800;
    }

    52% {
      background: #3EE800;
    }

    53% {
      background: #FFF702;
    }

    73% {
      background: #FFF702;
    }

    74% {
      background: #F00;
    }

    100% {
      height: var(--target-height);
      background: #F00;
    }
  }

  @keyframes circle-color-1 {

    0%,
    100% {
      background: #FB1EFF;
    }
  }

  @keyframes circle-color-2 {

    0%,
    26% {
      background: #FB1EFF;
    }

    27%,
    100% {
      background: #0F67FF;
    }
  }

  @keyframes circle-color-3 {

    0%,
    15% {
      background: #FB1EFF;
    }

    16%,
    56% {
      background: #0F67FF;
    }

    57%,
    100% {
      background: #3EE800;
    }
  }

  @keyframes circle-color-4 {

    0%,
    10% {
      background: #FB1EFF;
    }

    11%,
    39% {
      background: #0F67FF;
    }

    40%,
    70% {
      background: #3EE800;
    }

    71%,
    100% {
      background: #FFF702;
    }
  }

  @keyframes circle-color-5 {

    0%,
    8% {
      background: #FB1EFF;
    }

    9%,
    29% {
      background: #0F67FF;
    }

    30%,
    52% {
      background: #3EE800;
    }

    53%,
    73% {
      background: #FFF702;
    }

    74%,
    100% {
      background: #F00;
    }
  }

  @media (max-width: 1200px) {
    body::before {
      height: 154px;
    }

    body .test-upload-cropper .cropper_wrapper {
      height: calc(100% - 135px);
    }

    body .test-upload-cropper .btns {
      bottom: -70px;
    }
  }

  @media (max-width: 767px) {
    body::before {
      height: 126px;
    }

    .test-upload-cropper .cropper_wrapper {
      height: calc(100% - 125px);
    }

    .test-upload-cropper .cropper_wrapper .cropper-modal {
      background: rgba(255, 255, 255, 0.27) !important;
      backdrop-filter: blur(3px);
      opacity: 1 !important;
    }

    .test-upload-cropper .cropper_wrapper .cropper-face {
      background-image: url("static/img/common/cropper_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(255, 255, 255, 0.27);
      backdrop-filter: blur(2);
      opacity: 0.3;
    }

    .test-upload-cropper .cropper_wrapper .cropper-view-box {
      outline: 0px;
      border: 2px solid #90EBEE;
    }

    .test-upload-cropper .cropper_wrapper .point-nw,
    .test-upload-cropper .cropper_wrapper .point-ne,
    .test-upload-cropper .cropper_wrapper .point-sw,
    .test-upload-cropper .cropper_wrapper .point-se {
      width: 8px;
      height: 8px;
      background: #90EBEE;
      opacity: 1;
    }

    .test-upload-cropper .cropper_wrapper .point-sw {
      bottom: -4px;
      left: -4px;
    }

    .test-upload-cropper .cropper_wrapper .point-nw {
      top: -4px;
      left: -4px;
    }

    .test-upload-cropper .cropper_wrapper .point-ne {
      top: -4px;
      right: -4px;
    }

    .test-upload-cropper .cropper_wrapper .point-se {
      bottom: -4px;
      right: -4px;
    }

    .test-upload-cropper .btns {
      position: absolute;
      bottom: -64px;
      left: 0;
      width: 100%;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .test-upload-cropper .btns .btn-cancel,
    .test-upload-cropper .btns .btn-confirm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 36px;
      border-radius: 6px;
      border: 1px solid #90EBEE;
      background: #00B5CB;
      cursor: pointer;
      color: #FFF;
      font-family: Figtree;
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      text-transform: capitalize;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .container .container-content .container-content-section .container-content-title {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container .container-content,
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .container .container-content {
    width: 100%;
    background: white;
  }

  .container .container-content .container-content-section-host {
    background-image: url("static/img/index/hostBC.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    padding-bottom: 105px;
  }

  .container .container-content .container-content-section-host .container-content-title {
    margin: 16px 0;
  }

  .container .container-content .container-content-section {
    width: 100%;
  }

  .container .container-content .container-content-section .container-content-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    text-align: center;
  }

  .container .container-content .container-content-section .container-content-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    padding: 0 40px;
  }

  .container .container-content .container-content-section-new .container-content-title {
    margin: 30px 0 40px 0;
  }

  .container .container-content .container-content-section-new .container-content-title img {
    margin-right: 6px;
  }

  .container .container-content .container-content-section-top {
    margin-bottom: 90px;
  }

  .container .container-content .container-content-section-top .container-content-title {
    margin: 60px 0 40px 0;
  }

  .container .container-content .container-content-section-top .container-content-title img {
    margin-right: 6px;
  }

  @media (min-width: 1200px) {
    .container-content-list-1 {
      display: grid !important;
    }

    .container-content-list-2 {
      display: none !important;
    }

    .container-content-list-3 {
      display: none !important;
    }

    .container-content-section-most-popular {
      display: none !important;
    }
  }

  @media (max-width: 1200px) {
    .container .container-content .container-content-section-host {
      margin-bottom: 70px;
    }

    .container .container-content .container-content-list-1 {
      display: none !important;
    }

    .container .container-content .container-content-list-2 {
      display: grid !important;
    }

    .container .container-content .container-content-list-3 {
      display: none !important;
    }

    .container .container-content .container-content-section-most-popular {
      display: none !important;
    }

    .container .container-content .container-content-section .container-content-list {
      gap: 14px;
    }

    .container .container-content .container-content-section .container-content-title {
      font-size: 24px;
      margin: 20px 0;
    }

    .container .container-content .container-content-section .container-content-title img {
      width: 373px;
      height: 63.4px;
    }

    .container .container-content .container-content-section .container-content-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 0 16px;
    }

    .container .container-content .container-content-section-new .container-content-title {
      margin: 20px 0 20px 0;
    }

    .container .container-content .container-content-section-new .container-content-title img {
      width: 24px;
      height: 24px;
      margin-right: 6px;
    }

    .container .container-content .container-content-section-top {
      margin-bottom: 40px;
    }

    .container .container-content .container-content-section-top .container-content-title {
      margin: 40px 0 20px 0;
    }

    .container .container-content .container-content-section-top .container-content-title img {
      width: 24px;
      height: 24px;
      margin-right: 6px;
    }
  }

  @media (max-width: 767px) {
    .container .container-content .container-content-section-host {
      padding-bottom: 40px;
      margin-bottom: 20px;
    }

    .container .container-content .container-content-list-1 {
      display: none !important;
    }

    .container .container-content .container-content-list-2 {
      display: none !important;
    }

    .container .container-content .container-content-list-3 {
      display: grid !important;
    }

    .container .container-content .container-content-section-most-popular {
      display: grid !important;
    }

    .container .container-content .container-content-section .container-content-title {
      font-size: 20px;
      margin: 20px 0;
    }

    .container .container-content .container-content-section .container-content-title img {
      width: 261px;
      height: 44px;
    }

    .container .container-content .container-content-section .container-content-list {
      grid-template-columns: repeat(1, 1fr);
      padding: 0 14px;
      gap: 20px;
    }

    .container .container-content .container-content-section-new .container-content-title {
      margin: 40px 0 20px 0;
    }

    .container .container-content .container-content-section-new .container-content-title img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }

    .container .container-content .container-content-section-top {
      margin-bottom: 34px;
    }

    .container .container-content .container-content-section-top .container-content-title {
      margin: 40px 0 20px 0;
    }

    .container .container-content .container-content-section-top .container-content-title img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .card {
    width: 100%;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0px;
    transition: all 0.3s ease-in-out;
  }

  .card .card-cover {
    aspect-ratio: 352/198;
    overflow: hidden;
    background: #F5F9FB;
  }

  .card .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card .card-info {
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 12px 14px 14px;
    border-radius: 8px;
    background: #fff;
  }

  .card .card-info .card-info-inner {
    color: var(--323232, #323232);
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  @media (max-width: 1200px) {
    .card {
      padding: 0px;
    }

    .card:active {
      border: 2px solid #FF2052;
      transform: translateY(-6px);
      scale: 0.95;
    }

    .card .card-info {
      padding: 0px;
      border-radius: 6px;
      font-size: 14px;
      line-height: 20px;
    }

    .card .card-info .card-info-inner {
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  }

  @media (max-width: 767px) {
    .card {
      padding: 0px;
    }

    .card .card-info {
      padding: 0px;
      height: unset;
    }
  }

  @media (min-width: 1201px) {
    .card:hover {
      border: 2px solid #FF2052;
      transform: translateY(-8px);
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .cardtype {
    width: 100%;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    padding: 0px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    box-sizing: border-box;
  }

  .cardtype .card-cover {
    aspect-ratio: 352/198;
    overflow: hidden;
    background: #F5F9FB;
  }

  .cardtype .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cardtype .card-info {
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 20px 20px 16px 16px;
    border-radius: 8px;
    background: #fff;
    position: relative;
  }

  .cardtype .card-info .card-info-inner-type {
    position: absolute;
    top: -44px;
    left: -16px;
    height: 25.5px;
    background: #fff;
    border-radius: 12px 0 0 0;
    clip-path: polygon(0 47%, 0 0, 70% 0, 71% 0, 72% 0.5%, 73% 1%, 74% 2%, 75% 3.5%, 76% 5%, 77% 7%, 77.5% 10%, 78% 13%, 78.5% 16%, 79% 20%, 79.5% 24%, 80% 28%, 80.5% 33%, 81% 38%, 81.5% 44%, 82% 50%, 82.5% 56%, 83% 62%, 83.5% 68%, 84% 73%, 84.5% 78%, 85% 82%, 85.5% 86%, 86% 89%, 86.5% 92%, 87% 94%, 87.5% 96%, 88% 97.5%, 88.5% 98.5%, 89% 99.2%, 89.5% 99.6%, 90% 100%, 0 100%);
    color: var(--ff-2052, #FF2052);
    /* f-14-s-20 */
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
    display: flex;
    align-items: end;
    padding: 0px 48px 0px 16px;
  }

  .cardtype .card-info .card-info-inner-type img {
    width: 4px;
    height: 20px;
    display: block;
    margin-right: 4px;
  }

  .cardtype .card-info .card-info-inner {
    color: var(--323232, #323232);
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  @media (max-width: 1200px) {
    .cardtype {
      padding: 0px;
    }

    .cardtype:active {
      box-shadow: 0px 5px 12px 3px rgba(255, 32, 80, 0.219);
      transform: translateY(-6px);
      scale: 0.95;
    }

    .cardtype .card-info {
      padding: 0px;
      border-radius: 6px;
      font-size: 14px;
      line-height: 20px;
    }

    .cardtype .card-info .card-info-inner {
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  }

  @media (max-width: 767px) {
    .cardtype {
      padding: 0px;
    }

    .cardtype .card-info {
      padding: 0px;
      height: unset;
    }
  }

  @media (min-width: 1201px) {
    .cardtype:hover {
      box-shadow: 0px 5px 12px 3px rgba(255, 32, 80, 0.219);
      border: 2px solid #FF2052;
      transform: translateY(-8px);
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .detail-page-side .side-item {
    display: flex;
    align-items: center;
  }

  .detail-page-side {
    width: 330px;
    flex-shrink: 0;
  }

  .detail-page-side .side-title {
    color: var(--2-c-2-c-2-c, #2C2C2C);
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 120% */
    text-transform: capitalize;
    margin-bottom: 10px;
  }

  .detail-page-side .side-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .detail-page-side .side-item {
    padding: 12px 8px;
    border-radius: 12px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
  }

  .detail-page-side .side-item:last-child {
    border-bottom: none;
  }

  .detail-page-side .side-item:hover {
    border-color: #FFC5D4;
  }

  .detail-page-side .side-item .side-item-type {
    border-radius: 10px 0;
    background: linear-gradient(90deg, #FFC5D4 0%, #FFF9E3 100%);
    color: var(--ff-2052, #FF2052);
    font-family: Figtree;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 9px;
    z-index: 10;
  }

  .detail-page-side .side-item .site-item-cover {
    width: 139px;
    aspect-ratio: 1024/574;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(241, 241, 241, 0.9803921569);
  }

  .detail-page-side .side-item .site-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.2);
  }

  .detail-page-side .side-item .site-item-cover .lazy-loader {
    width: 50px;
    height: 50px;
  }

  .detail-page-side .side-item .site-item-cover .lazy-loader div {
    width: 24px;
    height: 24px;
  }

  .detail-page-side .side-item .site-item-cover .lazy-loader div:before {
    content: "";
    width: 24px;
    height: 5px;
    background: rgba(240, 128, 128, 0.3137254902);
    position: absolute;
    top: 36px;
    left: 0;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
  }

  .detail-page-side .side-item .site-item-tag {
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    background: #F7FFFE;
    color: #00B5CB;
    font-family: Figtree;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .detail-page-side .side-item .site-item-title {
    color: var(--2-c-2-c-2-c, #2C2C2C);
    /* f-16-s-24 */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 150% */
    text-overflow: ellipsis;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (max-width: 1200px) {
    .detail-page-side {
      display: none;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .detail-recommend .recommend-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
  }

  .detail-recommend .recommend-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 20px;
    margin-top: 20px;
  }

  .detail-recommend .recommend-list > .detail-recommend-ad-row {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .detail-recommend .recommend-list .recommend-item {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 2px 6px 0 rgba(19, 47, 61, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.08);
  }

  .detail-recommend .recommend-list .recommend-item .recommend-item-cover {
    aspect-ratio: 232/131;
    overflow: hidden;
  }

  .detail-recommend .recommend-list .recommend-item .recommend-item-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px;
    gap: 16px;
  }

  .detail-recommend .recommend-list .recommend-item .recommend-item-title {
    color: var(--2-c-2-c-2-c, #2C2C2C);
    /* f-14-s-20 */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  .detail-recommend .recommend-list .recommend-item .recommend-item-btn {
    border-radius: 5px;
    background: var(--ff-2052, #FF2052);
    min-width: 47px;
    height: 22px;
    color: #FFF;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 1200px) {
    .detail-recommend .recommend-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .detail-recommend .recommend-list .recommend-item .recommend-item-cover {
      height: unset;
      aspect-ratio: 338/194;
    }

    .detail-recommend .recommend-list .recommend-item .recommend-item-title {
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  @media (max-width: 767px) {
    .detail-recommend .recommend-list {
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
    }

    .detail-recommend .recommend-list .recommend-item .recommend-item-btn {
      width: 55px;
      height: 26px;
    }
  }

  @media (min-width: 1201px) {
    .detail-recommend .recommend-item:hover .recommend-item-title {
      color: #FF2052;
    }
  }

  #test-gif-file {
    display: none;
  }

  .test-gif-wrapper .page-main-title {
    margin-bottom: 8px !important;
  }

  .test-gif-wrapper .page-main-desc {
    margin-bottom: 5px !important;
  }

  .test-gif-reupload-wrap {
    display: none;
    justify-content: center;
    margin-top: 20px;
  }

  .test-gif-reupload-wrap .gif-loading-reupload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 17px 158px;
    border: none;
    border-radius: 26px;
    background: #F3F5F7;
    color: #96A0B6;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: capitalize;
    cursor: pointer;
    transition: background 0.2s;
  }

  .test-gif-reupload-wrap .gif-loading-reupload-btn:hover {
    background: #E9EBEE;
  }

  .test-gif-reupload-wrap .gif-loading-reupload-btn svg {
    flex-shrink: 0;
  }

  .reward-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3);
    -webkit-backdrop-filter: blur(3px);
  }

  .reward-modal-overlay .reward-modal {
    position: relative;
    width: 100%;
    max-width: 442px;
    height: 513px;
    border-radius: 24px;
  }

  .reward-modal-overlay .reward-modal-bg {
    position: absolute;
    inset: 0;
    background-image: url("static/img/common/modal_bg_new.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .reward-modal-overlay .reward-modal-content {
    position: relative;
    padding: 120px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .reward-modal-overlay .reward-modal-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 10px 0 35px;
  }

  .reward-modal-overlay .reward-modal-light {
    width: 313px;
    height: 313px;
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
  }

  .reward-modal-overlay .reward-modal-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    object-fit: contain;
    z-index: 1;
  }

  .reward-modal-overlay .reward-modal-icon-bottom {
    width: 65px;
    height: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7px;
  }

  .reward-modal-overlay .reward-modal-title {
    color: #FFA915;
    font-family: Figtree;
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
  }

  .reward-modal-overlay .reward-modal-subtitle {
    margin: 14px 0 40px;
    color: var(--7-e-7-e-7-e, #7E7E7E);
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
  }

  .reward-modal-overlay .reward-modal-btn-wrap {
    padding-bottom: 6px;
    border-radius: 10px;
    background: #2187F0;
    transition: transform 0.3s ease;
  }

  .reward-modal-overlay .reward-modal-btn-wrap:hover {
    background: #2C75C0;
  }

  .reward-modal-overlay .reward-modal-btn-wrap:hover .reward-modal-btn {
    background: #2F86DF;
  }

  .reward-modal-overlay .reward-modal-btn-wrap:active {
    transform: scale(0.95);
    padding-bottom: 0px;
  }

  .reward-modal-overlay .reward-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 40px;
    min-height: 69px;
    min-width: 342px;
    border: none;
    border-radius: 10px;
    background: #409EFE;
    color: #FFF;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: capitalize;
    cursor: pointer;
    transition: background 0.2s;
  }

  .reward-modal-overlay .reward-modal-btn:disabled {
    cursor: not-allowed;
  }

  .reward-modal-overlay .reward-modal-btn.is-loading .reward-modal-btn-icon {
    display: none;
  }

  .reward-modal-overlay .reward-modal-btn.is-loading .reward-modal-btn-spinner {
    display: inline-flex !important;
  }

  .reward-modal-overlay .reward-modal-btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .reward-modal-overlay .reward-modal-btn-spinner .spinner {
    animation: reward-modal-spin 0.8s linear infinite;
  }

  @keyframes reward-modal-spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .reward-modal-overlay .reward-modal-footer {
    margin: 20px 0 0;
    color: #A3A3A3;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
  }

  .reward-modal-overlay .reward-modal-close-btn {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }

  .reward-modal-overlay .reward-modal-close-btn.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .reward-modal-overlay .reward-modal-close-icon {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
  }

  .detail-page .detail-page-content .page-main .test-gif-area {
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 16px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-content {
    width: 100%;
    aspect-ratio: 720/410;
    position: relative;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn {
    border-radius: 25px;
    border: 2px solid #ADDBFF;
    background: #409EFE;
    padding: 13px 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn img:nth-child(1) {
    display: block;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn img:nth-child(2) {
    display: none;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn:hover {
    border-radius: 25px;
    border: 2px solid #ADDBFF;
    background: #197BDF;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn:hover img:nth-child(1) {
    display: none;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn:hover img:nth-child(2) {
    display: block;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn img {
    display: block;
    margin-right: 8px;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn span {
    color: #FFF;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: capitalize;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .page-main-security-title {
    margin-top: 10px;
    color: var(--7-e-7-e-7-e, #7E7E7E);
    text-align: center;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    left: 0%;
    transform: none;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #EFFEFF;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-loading .test-gif-loading-text {
    margin-bottom: 20px;
    color: #00B5CB;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-cover {
    aspect-ratio: 720/410;
    overflow: hidden;
  }

  .detail-page .detail-page-content .page-main .test-gif-area .test-gif-cover img {
    width: 100%;
    aspect-ratio: 720/410;
    object-fit: cover;
  }

  @media (max-width: 1200px) {
    .detail-page .detail-page-content .page-main .test-gif-area {
      padding: 24px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-content {
      margin-bottom: 20px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn {
      width: 438px;
      height: 50px;
      padding: 0;
      border-radius: 29px !important;
      border: 2px solid #ADDBFF !important;
      background: #409EFE !important;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn .test-match-gif-icon {
      width: 48px;
      height: 48px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn .test-match-gif-icon svg {
      width: 48px;
      height: 48px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn .test-match-gif-text {
      margin-top: 6px;
      font-size: 14px;
      line-height: 22px;
      width: 138px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .page-main-security-title {
      margin-top: 10px;
    }
  }

  @media (max-width: 767px) {
    .detail-page .detail-page-content .page-main .test-gif-area {
      padding: 14px 12px 12px;
      margin-bottom: 0px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-content {
      margin-bottom: 14px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn {
      max-width: 323px;
      height: 40px;
      padding: 0;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn span {
      font-size: 16px;
      font-weight: 600;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn svg {
      width: 20px;
      height: 20px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn .test-match-gif-icon {
      width: 48px;
      height: 48px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn .test-match-gif-icon svg {
      width: 48px;
      height: 48px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-btn .test-match-gif-text {
      margin-top: 6px;
      font-size: 14px;
      line-height: 22px;
      width: 138px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-loading .loader-container {
      transform: scale(0.6);
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-loading .test-gif-loading-text {
      margin: 0;
      font-size: 16px;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-loading .loader {
      scale: 0.4 !important;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .test-gif-cover {
      aspect-ratio: 327/188;
    }

    .detail-page .detail-page-content .page-main .test-gif-area .page-main-security-title {
      margin-top: 10px;
      color: #7E7E7E;
      text-align: center;
      font-family: Figtree;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
    }

    .detail-page .detail-page-content .page-main .gif-loading .wrapper-grid {
      --cube-width: 30px;
      --cube-height: 30px;
      --font-size: 1.2em;
    }

    .detail-page .detail-page-content .page-main .gif-loading .gif-loading-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .detail-page .detail-page-content .page-main .gif-loading .gif-loading-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 18px 0 0px;
    }

    .detail-page .detail-page-content .page-main .gif-loading .gif-loading-title svg {
      width: 18px;
      height: 18px;
    }

    .detail-page .detail-page-content .page-main .gif-loading .gif-loading-title span {
      color: #409EFE;
      font-family: Figtree;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      text-transform: capitalize;
    }

    .detail-page .detail-page-content .page-main .gif-loading .gif-loading-text {
      color: #8ABEFD;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      text-transform: capitalize;
    }

    .detail-page .detail-page-content .page-main .gif-loading .gif-loading-progress-wrap {
      margin-top: 18px;
    }

    .reward-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 14px;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(3);
      -webkit-backdrop-filter: blur(3px);
    }

    .reward-modal-overlay .reward-modal {
      position: relative;
      width: 100%;
      max-width: 347px;
      height: 467px;
      border-radius: 24px;
      position: relative;
      bottom: 60px;
    }

    .reward-modal-overlay .reward-modal-bg {
      position: absolute;
      inset: 0;
      background-image: url("static/img/common/modal_bg_mobile_new.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .reward-modal-overlay .reward-modal-content {
      position: relative;
      padding: 100px 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .reward-modal-overlay .reward-modal-icon-wrap {
      position: relative;
      width: 80px;
      height: 80px;
      margin: 10px 0 35px;
    }

    .reward-modal-overlay .reward-modal-light {
      width: 285px;
      height: 285px;
      position: absolute;
      top: 31%;
      left: 50%;
      transform: translate(-50%, -50%);
      object-fit: contain;
    }

    .reward-modal-overlay .reward-modal-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      object-fit: contain;
      z-index: 1;
    }

    .reward-modal-overlay .reward-modal-icon-bottom {
      width: 65px;
      height: 10px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 7px;
    }

    .reward-modal-overlay .reward-modal-title {
      color: #FFA915;
      font-family: Figtree;
      font-size: 32px;
      font-style: normal;
      font-weight: 900;
      line-height: normal;
      text-transform: uppercase;
    }

    .reward-modal-overlay .reward-modal-subtitle {
      margin: 12px 0 44px;
      color: var(--7-e-7-e-7-e, #7E7E7E);
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      text-transform: capitalize;
    }

    .reward-modal-overlay .reward-modal-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 35px;
      min-width: 287px;
      min-height: 56px;
      border: none;
      border-radius: 10px;
      background: #409EFE;
      color: #FFF;
      font-family: Figtree;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      text-transform: capitalize;
      cursor: pointer;
      transition: background 0.2s;
    }

    .reward-modal-overlay .reward-modal-btn:disabled {
      cursor: not-allowed;
    }

    .reward-modal-overlay .reward-modal-btn .reward-modal-btn-icon svg {
      width: 23px;
      height: 23px;
    }

    .reward-modal-overlay .reward-modal-btn.is-loading .reward-modal-btn-icon {
      display: none;
    }

    .reward-modal-overlay .reward-modal-btn.is-loading .reward-modal-btn-spinner {
      display: inline-flex !important;
    }

    .reward-modal-overlay .reward-modal-footer {
      margin: 16px 0 0;
      color: #A3A3A3;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      text-transform: capitalize;
    }

    .test-gif-reupload-wrap {
      display: none;
      justify-content: center;
      margin-top: 10px;
    }

    .test-gif-reupload-wrap .gif-loading-reupload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 52px;
      border: none;
      border-radius: 26px;
      background: #F3F5F7;
      color: #B7BDCA;
      font-family: Figtree;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      text-transform: capitalize;
      cursor: pointer;
      transition: background 0.2s;
    }

    .test-gif-reupload-wrap .gif-loading-reupload-btn:hover {
      background: #d8d8d8;
    }

    .test-gif-reupload-wrap .gif-loading-reupload-btn svg {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
    }
  }

  @media (min-width: 1201px) {
    .test-gif-btn:hover {
      border-radius: 25px !important;
    }
  }

  .test-picture-wrapper,
  .test-picture {
    margin-bottom: 55px;
    position: relative;
  }

  .test-picture-wrapper:last-child,
  .test-picture:last-child {
    margin-bottom: 0;
  }

  .test-picture-wrapper .test-picture-left-line,
  .test-picture .test-picture-left-line {
    position: absolute;
    left: 0;
    top: -13px;
    bottom: -1px;
    width: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .test-picture-wrapper .test-picture-left-line::after,
  .test-picture .test-picture-left-line::after {
    content: "";
    flex: 1;
    width: 1px;
    background-image: repeating-linear-gradient(to bottom, #FF070B 0, #FF070B 3px, transparent 3px, transparent 6px);
  }

  .test-picture-wrapper .test-picture-left-line .test-picture-line-dot,
  .test-picture .test-picture-left-line .test-picture-line-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #FF070B;
    flex-shrink: 0;
    z-index: 1;
  }

  .test-picture-wrapper .test-picture-content,
  .test-picture .test-picture-content {
    position: relative;
    margin-left: 10px;
  }

  .test-picture-wrapper .test-picture-question-banner,
  .test-picture .test-picture-question-banner {
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient(90deg, #FF070B 0%, #FFC68C 99.99%);
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
  }

  .test-picture-wrapper .test-picture-question-banner .test-question-number,
  .test-picture .test-picture-question-banner .test-question-number {
    margin-right: 18px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: flex-end;
    line-height: 1;
  }

  .test-picture-wrapper .test-picture-question-banner .test-question-number span,
  .test-picture .test-picture-question-banner .test-question-number span {
    color: #FFF;
    font-family: Figtree;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
  }

  .test-picture-wrapper .test-picture-question-banner .test-question-number span:nth-child(1),
  .test-picture .test-picture-question-banner .test-question-number span:nth-child(1) {
    font-size: 24px;
  }

  .test-picture-wrapper .test-picture-question-banner .test-question-number span:nth-child(2),
  .test-picture .test-picture-question-banner .test-question-number span:nth-child(2) {
    font-size: 16px;
    margin: 0 1px;
    color: #FFD5D5;
  }

  .test-picture-wrapper .test-picture-question-banner .test-question-number span:last-child,
  .test-picture .test-picture-question-banner .test-question-number span:last-child {
    font-size: 16px;
    color: #FFD5D5;
  }

  .test-picture-wrapper .test-picture-question-banner .test-question-text,
  .test-picture .test-picture-question-banner .test-question-text {
    color: #FFF;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    flex: 1;
  }

  .test-picture-wrapper .test-picture-options-grid,
  .test-picture .test-picture-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item,
  .test-picture .test-picture-options-grid .test-picture-option,
  .test-picture .test-picture-options-grid .test-picture-option-item {
    position: relative;
    cursor: pointer;
    border: 1px solid #EFEFEF;
    border-radius: 10.5px;
    background: #FFF;
    overflow: visible;
    padding: 10px 10px 7px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option:hover,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item:hover,
  .test-picture .test-picture-options-grid .test-picture-option:hover,
  .test-picture .test-picture-options-grid .test-picture-option-item:hover {
    border-color: #138DFF;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option:hover .test-picture-option-label span,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item:hover .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option:hover .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option-item:hover .test-picture-option-label span {
    background: #BEDEFF;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option.selected,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option.select-test-picture-item,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item.selected,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item.select-test-picture-item,
  .test-picture .test-picture-options-grid .test-picture-option.selected,
  .test-picture .test-picture-options-grid .test-picture-option.select-test-picture-item,
  .test-picture .test-picture-options-grid .test-picture-option-item.selected,
  .test-picture .test-picture-options-grid .test-picture-option-item.select-test-picture-item {
    border: 2px solid #138DFF;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option.selected .test-picture-option-label span,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option.select-test-picture-item .test-picture-option-label span,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item.selected .test-picture-option-label span,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item.select-test-picture-item .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option.selected .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option.select-test-picture-item .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option-item.selected .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option-item.select-test-picture-item .test-picture-option-label span {
    background: var(--6, linear-gradient(90deg, #0F80E9 0%, #86BDFF 100%));
    color: #FFF;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-image,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item .test-picture-option-image,
  .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-image,
  .test-picture .test-picture-options-grid .test-picture-option-item .test-picture-option-image {
    width: 100%;
    aspect-ratio: 359/189;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0);
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-image .lazy-box,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item .test-picture-option-image .lazy-box,
  .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-image .lazy-box,
  .test-picture .test-picture-options-grid .test-picture-option-item .test-picture-option-image .lazy-box {
    width: 100%;
    height: 100%;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-image img,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item .test-picture-option-image img,
  .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-image img,
  .test-picture .test-picture-options-grid .test-picture-option-item .test-picture-option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-label,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item .test-picture-option-label,
  .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-label,
  .test-picture .test-picture-options-grid .test-picture-option-item .test-picture-option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    width: 100%;
  }

  .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-label span,
  .test-picture-wrapper .test-picture-options-grid .test-picture-option-item .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-label span,
  .test-picture .test-picture-options-grid .test-picture-option-item .test-picture-option-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    width: 69px;
    height: 21px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 10.5px;
    background: #EBEBEB;
    border: none;
    color: #494949;
    text-align: center;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    /* 93.75% */
    text-transform: capitalize;
  }

  .test-picture-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    border: 2px solid #FFA4A5;
    background: linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%);
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset;
    color: #FFF;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    margin: 30px 0 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }

  .test-picture-btn img {
    margin-right: 6px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .test-picture-btn .submit-icon-white {
    display: block;
    width: 24px;
    height: 24px;
  }

  .test-picture-btn .submit-icon-pink {
    display: none;
    width: 24px;
    height: 24px;
  }

  @media (max-width: 767px) {

    .test-picture-wrapper,
    .test-picture {
      margin-bottom: 41px;
    }

    .test-picture-wrapper .test-picture-question-banner,
    .test-picture .test-picture-question-banner {
      padding: 6x;
      margin-bottom: 7px;
      align-items: flex-start;
    }

    .test-picture-wrapper .test-picture-question-banner .test-question-number,
    .test-picture .test-picture-question-banner .test-question-number {
      margin-right: 6px;
    }

    .test-picture-wrapper .test-picture-question-banner .test-question-number span:nth-child(1),
    .test-picture .test-picture-question-banner .test-question-number span:nth-child(1) {
      font-size: 20px;
    }

    .test-picture-wrapper .test-picture-question-banner .test-question-number span:nth-child(2),
    .test-picture-wrapper .test-picture-question-banner .test-question-number span:last-child,
    .test-picture .test-picture-question-banner .test-question-number span:nth-child(2),
    .test-picture .test-picture-question-banner .test-question-number span:last-child {
      font-size: 14px;
    }

    .test-picture-wrapper .test-picture-question-banner .test-question-text,
    .test-picture .test-picture-question-banner .test-question-text {
      font-size: 16px;
      line-height: 24px;
    }

    .test-picture-wrapper .test-picture-options-grid,
    .test-picture .test-picture-options-grid {
      gap: 7px;
    }

    .test-picture-wrapper .test-picture-options-grid .test-picture-option,
    .test-picture .test-picture-options-grid .test-picture-option {
      padding: 4px;
    }

    .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-label,
    .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-label {
      margin-top: 5px;
    }

    .test-picture-wrapper .test-picture-options-grid .test-picture-option .test-picture-option-label span,
    .test-picture .test-picture-options-grid .test-picture-option .test-picture-option-label span {
      width: 41px;
      height: 17px;
      font-size: 14px;
    }

    .test-picture-btn {
      height: 48px;
      font-size: 18px;
      margin: 25px 0 40px;
      color: #FFF;
    }

    .test-picture-btn span {
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #FFF;
      color: #FFF;
    }
  }

  @media (max-width: 1200px) {
    .test-picture-btn:active {
      opacity: 0.7;
    }
  }

  @media (min-width: 1024px) {
    .test-picture-btn {
      background: linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%);
      border: none;
      box-shadow: none;
      color: #FF134E;
      padding: 2px;
    }

    .test-picture-btn::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 25px;
      background: #FFF;
      z-index: 0;
    }

    .test-picture-btn>* {
      position: relative;
      z-index: 1;
    }

    .test-picture-btn img {
      object-fit: contain;
    }

    .test-picture-btn .submit-icon-white {
      display: none;
    }

    .test-picture-btn .submit-icon-pink {
      display: block;
    }

    .test-picture-btn:hover,
    .test-picture-btn:active {
      border: 2px solid #FFA4A5;
      background: linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%);
      box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset;
      color: #FFF;
    }

    .test-picture-btn:hover::before,
    .test-picture-btn:active::before {
      display: none;
    }

    .test-picture-btn:hover span,
    .test-picture-btn:active span {
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #FFF;
      color: #FFF;
    }

    .test-picture-btn:hover .submit-icon-white,
    .test-picture-btn:active .submit-icon-white {
      display: block;
    }

    .test-picture-btn:hover .submit-icon-pink,
    .test-picture-btn:active .submit-icon-pink {
      display: none;
    }

    .test-picture-btn:active {
      opacity: 0.7;
    }
  }

  @media (max-width: 1023px) {
    .test-text-btn span {
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #FFF;
      color: #FFF;
    }
  }

  .test-picture2-list {
    border-radius: 18px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    padding: 19px 24px 30px;
    position: relative;
  }

  .test-picture2-list .test-picture2 {
    position: relative;
  }

  .test-picture2-list .test-picture2 .test-picture2-content {
    position: relative;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress {
    display: flex;
    align-items: center;
    margin-bottom: 11px;
    gap: 14px;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-index-tag-text {
    color: #FFB9B9;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-index-tag-text span:nth-child(1) {
    color: var(--ff-2052, #FF2052);
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-bar-progress {
    flex: 1;
    height: 16px;
    border-radius: 10px;
    background: #F7F7F7;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-bar-progress .test-bar-content {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #FF070B 0%, #FFC68C 99.99%);
    border-radius: 10px;
    width: calc(100% * var(--step) / var(--total));
    animation: progressBar 1s ease-in-out;
    position: relative;
  }

  @keyframes progressBar {
    from {
      width: 0;
    }

    to {
      width: calc(100% * var(--step) / var(--total));
    }
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-bar-progress .test-bar-content .test-bar-image {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 17.991px;
    height: 20px;
    animation: iconRotate 5s linear infinite;
  }

  @keyframes iconRotate {
    from {
      transform: translate(50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(50%, -50%) rotate(360deg);
    }
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-content-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
    margin-bottom: 14px;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item {
    position: relative;
    cursor: pointer;
    border: 1px solid #EFEFEF;
    border-radius: 10px;
    background: #FFF;
    overflow: visible;
    padding: 10px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option:hover,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item:hover {
    border-color: #138DFF;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option.selected,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option.select-test-picture2-item,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item.selected,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item.select-test-picture2-item {
    border: 2px solid #138DFF;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option .test-picture2-option-image,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item .test-picture2-option-image {
    width: 100%;
    aspect-ratio: 359/189;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0);
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option .test-picture2-option-image .lazy-box,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item .test-picture2-option-image .lazy-box {
    width: 100%;
    height: 100%;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option .test-picture2-option-image img,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item .test-picture2-option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option .test-picture2-option-image .test-picture2-option-label,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item .test-picture2-option-image .test-picture2-option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    border-radius: 8px 0 16px 0;
    background: var(--6, linear-gradient(90deg, #0F80E9 0%, #86BDFF 100%));
    flex-shrink: 0;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option .test-picture2-option-image .test-picture2-option-label span,
  .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item .test-picture2-option-image .test-picture2-option-label span {
    color: #FFF;
    text-align: center;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    text-transform: capitalize;
    text-transform: capitalize;
  }

  .test-picture2-list .test-picture2-btn {
    border-radius: 50px;
    background: #f23276;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.15);
    width: 50%;
    max-width: 460px;
    height: 64px;
    padding: 14px;
    line-height: 36px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .test-picture2-list .test-picture2-btn span {
    color: #FFF;
    font-family: Figtree;
    font-size: 27.2px;
    font-style: normal;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.3px;
  }

  .test-picture2-list .test-picture2-btn .test-picture2-btn-icon i {
    position: relative;
    width: 16px;
    height: 16px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    transform: rotate(45deg);
    display: inline-block;
    animation: iconAnimation 1s infinite;
    user-select: none;
  }

  .test-picture2-list .test-picture2-btn .test-picture2-btn-icon i:nth-child(1) {
    animation-delay: 0;
    margin-left: 8px;
  }

  .test-picture2-list .test-picture2-btn .test-picture2-btn-icon i:nth-child(2) {
    animation-delay: 0.2s;
  }

  .test-picture2-list .test-picture2-btn .test-picture2-btn-icon i:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes iconAnimation {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0.3;
    }
  }

  .test-picture2-list .ads1Box,
  .test-picture2-list .ads2Box {
    display: block;
    margin-bottom: 14px;
  }

  .test-picture2-list .ads3Box {
    display: none;
    margin-top: 14px;
  }

  .test-picture2-list .positionScrollElePC,
  .test-picture2-list .positionScrollEleMobile {
    display: block;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  .test-picture2-list .positionScrollElePC {
    display: block;
  }

  .test-picture2-list .positionScrollEleMobile {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .detail-page .detail-page-content .page-main .test-picture2-list .test-picture2 .test-picture2-content .ads {
    margin: 0 !important;
  }

  @media (max-width: 1200px) {
    .test-picture2-list {
      border-radius: 16px;
      border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
      background: #FFF;
      padding: 20px;
    }
  }

  @media (max-width: 800px) {
    .test-picture2-list .ads2Box {
      display: none;
    }

    .test-picture2-list .ads1Box,
    .test-picture2-list .ads3Box {
      display: block !important;
    }

    .test-picture2-list .positionScrollElePC {
      display: none;
    }

    .test-picture2-list .positionScrollEleMobile {
      display: block;
    }
  }

  @media (max-width: 767px) {
    .test-picture2-list {
      border-radius: 0;
      border: none;
      background: #FFF;
      padding: 0;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress {
      margin-bottom: 6px;
      gap: 10px;
      display: none;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-index-tag-text {
      font-size: 14px;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-index-tag-text span:nth-child(1) {
      font-size: 20px;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-progress .test-bar-progress {
      flex: 1;
      height: 14px;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-content-title {
      color: var(--2-c-2-c-2-c, #2C2C2C);
      font-family: Figtree;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 28px;
      text-transform: capitalize;
      margin-bottom: 12px;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid {
      gap: 7px;
    }

    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option,
    .test-picture2-list .test-picture2 .test-picture2-content .test-picture2-options-grid .test-picture2-option-item {
      padding: 4px;
    }

    .test-picture2-list .test-picture2-btn {
      width: 100%;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .test-text {
    margin-bottom: 53px;
    position: relative;
    display: flex;
    padding: 0px 0 0 10px;
    border-left: 1px dashed rgb(255, 0, 0);
  }

  .test-text .test-text-index-circle {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgb(255, 0, 0);
    top: -14px;
    left: -7px;
  }

  .test-text .test-index-tag {
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .test-text .test-index-tag .test-index-tag-text span {
    color: #5C39F3;
    text-align: center;
    font-family: Figtree;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-text .test-index-tag .test-index-tag-text span:nth-child(2) {
    font-size: 20px;
    margin: 0 4px;
  }

  .test-text .test-index-tag .test-index-tag-text span:last-child {
    color: #6D6D6D;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-text:last-child {
    margin-bottom: 30px;
  }

  .test-text .test-text-content {
    border-radius: 16px;
    background: #FFF;
    width: 100%;
  }

  .test-text .test-text-content .test-text-content-title {
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(90deg, #FF070B 0%, #FFC68C 99.99%);
    padding: 11px 20px;
    color: #FFF;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    text-transform: capitalize;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .test-text .test-text-content .test-text-content-title .test-index-tag-text {
    margin-right: 18px;
    color: #FFD5D5;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-text .test-text-content .test-text-content-title .test-index-tag-text span:nth-child(1) {
    color: #FFF;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    /* 108.333% */
    text-transform: capitalize;
  }

  .test-text .test-text-content .test-text-content-cover {
    aspect-ratio: 395/207;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
  }

  .test-text .test-text-content .test-text-content-cover .lazy-box {
    width: 100%;
    height: 100%;
  }

  .test-text .test-text-content .test-text-content-cover img {
    width: 100%;
    height: 100%;
  }

  .test-text .test-text-content .test-text-option-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
  }

  .test-text .test-text-content .test-text-option-list .select-test-text-item {
    border-radius: 8px !important;
    border: 1px solid #86BDFF !important;
    background: var(--6, linear-gradient(90deg, #0F80E9 0%, #86BDFF 100%)) !important;
  }

  .test-text .test-text-content .test-text-option-list .select-test-text-item .test-tag-text span {
    color: rgb(255, 255, 255) !important;
  }

  .test-text .test-text-content .test-text-option-list .select-test-text-item .test-tag-icon {
    border-radius: 0 3px 3px 0;
    background: var(--86-bdff, #86BDFF) !important;
  }

  .test-text .test-text-content .test-text-option-list .select-test-text-item .test-text-option-item-text-title {
    color: rgb(255, 255, 255) !important;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item {
    padding: 12px 10px 12px 0px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #EFEFEF;
    background: #FFF;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item:hover {
    border-radius: 8px;
    border: 1px solid #138DFF;
    background: #FFF;
    color: rgb(19, 141, 255);
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item:hover .test-tag-icon {
    border-radius: 0 3px 3px 0;
    background: #138DFF;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item:hover .test-tag-text span {
    color: #138DFF;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item:hover .test-text-option-item-text .test-text-option-item-text-title {
    color: #138DFF;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item .test-tag-text {
    margin: 0 20px 0 10px;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item .test-tag-text span {
    color: #4B4B4B;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    display: block;
    height: 20px;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item .test-tag-icon {
    width: 4px;
    height: 34px;
    border-radius: 0 3px 3px 0;
    background: #E0E0E0;
  }

  .test-text .test-text-content .test-text-option-list .test-text-option-item .test-text-option-item-text .test-text-option-item-text-title {
    color: var(--4-b-4-b-4-b, #4B4B4B);
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 150% */
  }

  .test-text-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    border: 2px solid #FFA4A5;
    background: linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%);
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset;
    color: #FFF;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    margin: 30px 0 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }

  .test-text-btn img {
    margin-right: 6px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .test-text-btn .submit-icon-white {
    display: block;
    width: 24px;
    height: 24px;
  }

  .test-text-btn .submit-icon-pink {
    display: none;
    width: 24px;
    height: 24px;
  }

  @media (max-width: 1200px) {
    .test-text-btn:active {
      opacity: 0.7;
    }
  }

  @media (max-width: 767px) {
    .test-text {
      margin-bottom: 40px;
    }

    .test-text .test-index-tag {
      position: absolute;
      top: 0px;
      left: 0px;
    }

    .test-text .test-index-tag .test-index-tag-text span {
      color: #5C39F3;
      text-align: center;
      font-family: Figtree;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 26px;
      text-transform: capitalize;
    }

    .test-text .test-index-tag .test-index-tag-text span:nth-child(2) {
      color: #5C39F3;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      line-height: 26px;
      text-transform: capitalize;
      margin: 0 4px;
    }

    .test-text .test-index-tag .test-index-tag-text span:last-child {
      color: #6D6D6D;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 26px;
      text-transform: capitalize;
    }

    .test-text .test-text-content .test-text-content-title {
      padding: 10px 14px;
      font-size: 17px !important;
      line-height: 24px !important;
      align-items: flex-start;
    }

    .test-text .test-text-content .test-text-option-list {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    .test-text .test-text-content .test-tag-text {
      font-size: 22px !important;
    }

    .test-text .test-text-content .test-text-option-item-text .test-text-option-item-text-title {
      font-size: 14px !important;
    }

    .test-text-btn {
      height: 48px;
      font-size: 18px;
      margin: 25px 0 40px;
      color: #FFF;
    }

    .test-text-btn span {
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #FFF;
      color: #FFF;
    }
  }

  @media (min-width: 1024px) {
    .test-text-btn {
      background: linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%);
      border: none;
      box-shadow: none;
      color: #FF134E;
      padding: 2px;
    }

    .test-text-btn::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 25px;
      background: #FFF;
      z-index: 0;
    }

    .test-text-btn>* {
      position: relative;
      z-index: 1;
    }

    .test-text-btn img {
      object-fit: contain;
    }

    .test-text-btn .submit-icon-white {
      display: none;
    }

    .test-text-btn .submit-icon-pink {
      display: block;
    }

    .test-text-btn:hover,
    .test-text-btn:active {
      border: 2px solid #FFA4A5;
      background: linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%);
      box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset;
      color: #FFF;
    }

    .test-text-btn:hover::before,
    .test-text-btn:active::before {
      display: none;
    }

    .test-text-btn:hover span,
    .test-text-btn:active span {
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #FFF;
      color: #FFF;
    }

    .test-text-btn:hover .submit-icon-white,
    .test-text-btn:active .submit-icon-white {
      display: block;
    }

    .test-text-btn:hover .submit-icon-pink,
    .test-text-btn:active .submit-icon-pink {
      display: none;
    }

    .test-text-btn:active {
      opacity: 0.7;
    }
  }

  @media (max-width: 1023px) {
    .test-text-btn span {
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #FFF;
      color: #FFF;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .test-text2-list {
    border-radius: 18px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    padding: 19px 24px 30px;
    position: relative;
  }

  .test-text2-list .test-text2 {
    position: relative;
    display: flex;
  }

  .test-text2-list .test-text2 .test-text2-content {
    background: #FFF;
    width: 100%;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-progress {
    display: flex;
    align-items: center;
    margin-bottom: 11px;
    gap: 14px;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-index-tag-text {
    color: #FFB9B9;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-index-tag-text span:nth-child(1) {
    color: var(--ff-2052, #FF2052);
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-bar-progress {
    flex: 1;
    height: 16px;
    border-radius: 10px;
    background: #F7F7F7;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-bar-progress .test-bar-content {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #FF070B 0%, #FFC68C 99.99%);
    border-radius: 10px;
    width: calc(100% * var(--step) / var(--total));
    animation: progressBar 1s ease-in-out;
    position: relative;
  }

  @keyframes progressBar {
    from {
      width: 0;
    }

    to {
      width: calc(100% * var(--step) / var(--total));
    }
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-bar-progress .test-bar-content .test-bar-image {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 17.991px;
    height: 20px;
    animation: iconRotate 5s linear infinite;
  }

  @keyframes iconRotate {
    from {
      transform: translate(50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(50%, -50%) rotate(360deg);
    }
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-content-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
    margin-bottom: 16px;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-content-cover {
    aspect-ratio: 16/9;
    border-radius: 20px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-content-cover .lazy-box {
    width: 100%;
    height: 100%;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-content-cover img {
    width: 100%;
    height: 100%;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px 20px;
    margin-bottom: 16px;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .select-test-text2-item {
    border-radius: 8px !important;
    border: 1px solid #86BDFF !important;
    background: var(--6, linear-gradient(90deg, #0F80E9 0%, #86BDFF 100%)) !important;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .select-test-text2-item .test-tag-text span {
    color: rgb(255, 255, 255) !important;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .select-test-text2-item .test-tag-icon {
    border-radius: 0 3px 3px 0;
    background: var(--86-bdff, #86BDFF) !important;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .select-test-text2-item .test-text2-option-item-text-title {
    color: rgb(255, 255, 255) !important;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item {
    padding: 12px 10px 12px 0px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #EFEFEF;
    background: #FFF;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item:hover {
    border-radius: 8px;
    border: 1px solid #138DFF;
    background: #FFF;
    color: rgb(19, 141, 255);
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item:hover .test-tag-icon {
    border-radius: 0 3px 3px 0;
    background: #138DFF;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item:hover .test-tag-text span {
    color: #138DFF;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item:hover .test-text2-option-item-text .test-text2-option-item-text-title {
    color: #138DFF;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item .test-tag-text {
    margin: 0 20px 0 10px;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item .test-tag-text span {
    color: #4B4B4B;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    display: block;
    height: 20px;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item .test-tag-icon {
    width: 4px;
    height: 34px;
    border-radius: 0 3px 3px 0;
    background: #E0E0E0;
  }

  .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .test-text2-option-item .test-text2-option-item-text .test-text2-option-item-text-title {
    color: var(--4-b-4-b-4-b, #4B4B4B);
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 150% */
  }

  .test-text2-list .test-text2-btn {
    border-radius: 50px;
    background: #f23276;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.15);
    width: 50%;
    max-width: 460px;
    height: 64px;
    padding: 14px;
    line-height: 36px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .test-text2-list .test-text2-btn span {
    color: #FFF;
    font-family: Figtree;
    font-size: 27.2px;
    font-style: normal;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.3px;
  }

  .test-text2-list .test-text2-btn .test-text2-btn-icon i {
    position: relative;
    width: 16px;
    height: 16px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    transform: rotate(45deg);
    display: inline-block;
    animation: iconAnimation 1s infinite;
    user-select: none;
  }

  .test-text2-list .test-text2-btn .test-text2-btn-icon i:nth-child(1) {
    animation-delay: 0;
    margin-left: 8px;
  }

  .test-text2-list .test-text2-btn .test-text2-btn-icon i:nth-child(2) {
    animation-delay: 0.2s;
  }

  .test-text2-list .test-text2-btn .test-text2-btn-icon i:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes iconAnimation {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0.3;
    }
  }

  .test-text2-list .ads1Box,
  .test-text2-list .ads2Box {
    display: block;
    margin-bottom: 16px;
  }

  .test-text2-list .ads3Box {
    margin-top: 16px;
    display: none;
  }

  .test-text2-list .positionScrollElePC,
  .test-text2-list .positionScrollEleMobile {
    display: block;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  .test-text2-list .positionScrollElePC {
    display: block;
  }

  .test-text2-list .positionScrollEleMobile {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .detail-page .detail-page-content .page-main .test-text2-list .test-text2 .test-text2-content .ads {
    margin: 0 !important;
  }

  @media (max-width: 1200px) {
    .test-text2-list {
      border-radius: 16px;
      border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
      background: #FFF;
      padding: 20px;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-content-cover {
      aspect-ratio: 87/49;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-option-list {
      gap: 16px 20px;
    }
  }

  @media (max-width: 800px) {
    .test-text2-list .ads2Box {
      display: none;
    }

    .test-text2-list .ads1Box,
    .test-text2-list .ads3Box {
      display: block !important;
    }

    .test-text2-list .positionScrollElePC {
      display: none;
    }

    .test-text2-list .positionScrollEleMobile {
      display: block;
    }
  }

  @media (max-width: 767px) {
    .test-text2-list {
      border-radius: 0;
      border: none;
      background: #FFF;
      padding: 0;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-progress {
      margin-bottom: 6px;
      gap: 10px;
      display: none;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-index-tag-text {
      font-size: 14px;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-index-tag-text span:nth-child(1) {
      font-size: 20px;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-progress .test-bar-progress {
      flex: 1;
      height: 14px;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-content-title {
      color: var(--2-c-2-c-2-c, #2C2C2C);
      font-family: Figtree;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 28px;
      text-transform: capitalize;
      margin-bottom: 12px;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-content-cover {
      aspect-ratio: 351/197;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-option-list {
      grid-template-columns: repeat(1, 1fr) !important;
      gap: 8px;
    }

    .test-text2-list .test-text2 .test-text2-content .test-text2-option-list .select-test-text2-item {
      border-radius: 6px !important;
    }

    .test-text2-list .test-text2-btn {
      width: 100%;
    }
  }

  #test-upload-file {
    display: none;
  }

  .test-upload-area {
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 16px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .test-upload-area .test-upload-content {
    width: 100%;
    aspect-ratio: 720/410;
    position: relative;
    margin-bottom: 22px;
    border-radius: 12px;
    overflow: hidden;
  }

  .test-upload-area .test-upload-btn {
    border-radius: 12px;
    border: 1px solid var(--4, #FF8E78);
    background: #FFF;
    box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.08);
    padding: 14px 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .test-upload-area .test-upload-btn img:nth-child(1) {
    display: block;
  }

  .test-upload-area .test-upload-btn img:nth-child(2) {
    display: none;
  }

  .test-upload-area .test-upload-btn:hover {
    border-radius: 12px;
    background: radial-gradient(47.58% 92% at 48.29% 100%, #FFCFC5 0%, #FF4D75 100%);
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset, 0 2px 8px 1px rgba(0, 0, 0, 0.12);
  }

  .test-upload-area .test-upload-btn:hover img:nth-child(1) {
    display: none;
  }

  .test-upload-area .test-upload-btn:hover img:nth-child(2) {
    display: block;
  }

  .test-upload-area .test-upload-btn:hover span {
    color: #FFF;
    background-image: none;
    background-color: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #FFF;
  }

  .test-upload-area .test-upload-btn img {
    display: block;
    margin-right: 8px;
  }

  .test-upload-area .test-upload-btn span {
    /* f-20-m-24 */
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 120% */
    text-transform: capitalize;
    background: var(--4, linear-gradient(90deg, #FF8E78 0%, #FF134E 51.44%, #FF8E78 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .test-upload-area .page-main-security-title {
    color: var(--7-e-7-e-7-e, #7E7E7E);
    text-align: center;
    /* f-14-r-20 */
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
    margin-top: 9px;
    left: 0% !important;
    transform: none !important;
  }

  .test-upload-area .test-upload-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #EFFEFF;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .test-upload-area .test-upload-loading .test-upload-loading-text {
    margin-bottom: 20px;
    color: #00B5CB;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .test-upload-area .test-upload-cover {
    aspect-ratio: 720/410;
    overflow: hidden;
  }

  .test-upload-area .test-upload-cover img {
    width: 100%;
    aspect-ratio: 720/410;
    object-fit: cover;
  }

  @media (max-width: 1200px) {
    .test-upload-area {
      padding: 24px;
    }

    .test-upload-area .test-upload-content {
      margin-bottom: 27px;
    }

    .test-upload-area .test-upload-btn {
      width: 438px;
      height: 58px;
      padding: 0;
      border-radius: 29px !important;
      background: radial-gradient(47.58% 92% at 48.29% 100%, #FFCFC5 0%, #FF4D75 100%) !important;
      box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset, 0 2px 8px 1px rgba(0, 0, 0, 0.12) !important;
    }

    .test-upload-area .test-upload-btn img:nth-child(1) {
      display: none !important;
    }

    .test-upload-area .test-upload-btn img:nth-child(2) {
      display: block !important;
    }

    .test-upload-area .test-upload-btn span {
      color: #FFF !important;
      background-image: none !important;
      background-color: none !important;
      -webkit-background-clip: none !important;
      -webkit-text-fill-color: #FFF !important;
    }

    .test-upload-area .test-upload-btn .test-match-upload-icon {
      width: 48px;
      height: 48px;
    }

    .test-upload-area .test-upload-btn .test-match-upload-icon svg {
      width: 48px;
      height: 48px;
    }

    .test-upload-area .test-upload-btn .test-match-upload-text {
      margin-top: 6px;
      font-size: 14px;
      line-height: 22px;
      width: 138px;
    }
  }

  @media (max-width: 767px) {
    .test-upload-area {
      padding: 12px;
      margin-bottom: 28px;
    }

    .test-upload-area .test-upload-content {
      margin-bottom: 15px;
    }

    .test-upload-area .test-upload-btn {
      max-width: 323px;
      height: 42px;
      padding: 0;
      border-radius: 29px !important;
      background: radial-gradient(47.58% 92% at 48.29% 100%, #FFCFC5 0%, #FF4D75 100%) !important;
      box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.44) inset, 0 -2px 4px 0 rgba(189, 20, 20, 0.25) inset, 0 2px 8px 1px rgba(0, 0, 0, 0.12) !important;
    }

    .test-upload-area .test-upload-btn img:nth-child(1) {
      display: none !important;
    }

    .test-upload-area .test-upload-btn img:nth-child(2) {
      display: block !important;
    }

    .test-upload-area .test-upload-btn span {
      color: #FFF !important;
      background-image: none !important;
      background-color: none !important;
      -webkit-background-clip: none !important;
      -webkit-text-fill-color: #FFF !important;
      font-size: 16px;
      font-weight: 600;
    }

    .test-upload-area .test-upload-btn .test-match-upload-icon {
      width: 48px;
      height: 48px;
    }

    .test-upload-area .test-upload-btn .test-match-upload-icon svg {
      width: 48px;
      height: 48px;
    }

    .test-upload-area .test-upload-btn .test-match-upload-text {
      margin-top: 6px;
      font-size: 14px;
      line-height: 22px;
      width: 138px;
    }

    .test-upload-area .test-upload-loading .loader-container {
      transform: scale(0.6);
    }

    .test-upload-area .test-upload-loading .test-upload-loading-text {
      margin: 0;
      font-size: 16px;
    }

    .test-upload-area .test-upload-loading .loader {
      scale: 0.4 !important;
    }

    .test-upload-area .test-upload-cover {
      aspect-ratio: 327/188;
    }
  }

  @media (min-width: 1201px) {
    .test-upload-btn:hover {
      border-radius: 25px !important;
    }
  }

  #test-match-upload-file {
    display: none;
  }

  .test-match-area {
    border-radius: 18px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    padding: 24px 24px 12px;
  }

  .test-match-area-content {
    border-radius: 12px;
    background: #FFF9FA;
    padding: 40px 70px;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .test-match-area-content .test-match-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .test-match-area-content .test-match-upload {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    width: 240px;
    aspect-ratio: 240/270;
    border-radius: 8px;
    border: 1px dashed #FFF;
    background: var(--3, linear-gradient(180deg, #F36 0%, #FFB4A3 100%));
    overflow: hidden;
  }

  .test-match-area-content .test-match-upload .photo-scan-line {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(112, 236, 252, 0) 0%, #F36 50%, rgba(112, 236, 252, 0) 100%);
    box-shadow: 0px 3px 8px 0px #F36;
    animation: scan-move 4s linear infinite;
  }

  .test-match-area-content .test-match-upload #test-match-upload-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
  }

  .test-match-area-content .test-match-upload .test-match-upload-icon {
    width: 72px;
    height: 72px;
  }

  .test-match-area-content .test-match-upload .test-match-upload-icon path {
    transition: all 0.3s ease;
  }

  .test-match-area-content .test-match-upload .test-match-upload-text {
    margin-top: 32px;
    color: #FFF;
    /* f-20-m-24 */
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 120% */
    text-transform: capitalize;
  }

  .test-match-area-content .test-match-result {
    width: 240px;
    height: 240px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    border: 2px solid var(--2, #FF134E);
  }

  .test-match-area-content .test-match-result img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-match-area-content .test-match-result .match-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #EFFEFF;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
  }

  .test-match-area-content .test-match-result .match-loading .loader-container {
    transform: scale(0.7);
  }

  .test-match-area-content .test-match-result .match-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #212121;
    display: none;
    overflow: hidden;
  }

  .test-match-area-content .test-match-result .match-carousel .match-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
  }

  .test-match-area-content .test-match-result .match-carousel .match-carousel-item.active {
    opacity: 1;
  }

  .page-main-security-title {
    text-align: center;
    margin-top: 10px;
  }

  .page-main-security-title span {
    color: var(--7-e-7-e-7-e, #7E7E7E);
    text-align: center;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  @keyframes scan-move {
    0% {
      top: 0;
    }

    50% {
      top: calc(100% - 1px);
    }

    100% {
      top: 0;
    }
  }

  @media (max-width: 1200px) {
    .test-match-area-content {
      padding: 45px 52px;
    }

    .test-match-upload:active .test-match-upload-text {
      color: #FF425E !important;
    }

    .test-match-upload:active .test-match-upload-icon path {
      fill: #FF425E !important;
    }
  }

  @media (max-width: 767px) {
    .test-match-area-content {
      padding: 34px;
      flex-direction: column;
    }

    .test-match-area-content .test-match-content {
      flex-direction: column-reverse;
    }

    .test-match-area-content .test-match-result {
      margin-bottom: 30px;
      width: 199px;
      height: 199px;
      aspect-ratio: 1/1;
      border-radius: 8px;
    }

    .test-match-area-content .test-match-upload {
      width: 199px;
      height: 160px;
      border-radius: 8px;
    }

    .test-match-area-content .test-match-upload .test-match-upload-icon {
      width: 57px;
      height: 57px;
    }

    .test-match-area-content .test-match-upload .test-match-upload-icon img {
      width: 57px;
      height: 57px;
    }

    .test-match-area-content .test-match-upload .test-match-upload-text {
      margin-top: 6px;
      font-size: 16px;
      line-height: 22px;
      width: 138px;
    }
  }

  @media (min-width: 1201px) {
    .test-match-upload:hover {
      background: linear-gradient(180deg, #FF648B 0%, #FFBBAC 100%);
    }

    .test-match-upload:active {
      background: linear-gradient(180deg, #FF275D 0%, #FFAF9D 100%);
    }
  }

  .test-input-area {
    border-radius: 16px;
    border: 1px solid var(--e-0-e-0-e-0, #e0e0e0);
    background: #fff;
    box-shadow: 0 0 4px 0 #fff inset;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }

  .test-input-area .test-input-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 36px;
    width: 100%;
    position: relative;
  }

  .test-input-area .test-input-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: #fff;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .test-input-area .test-input-phone {
    position: relative;
    flex-shrink: 0;
    max-width: 338px;
    min-width: 230px;
    aspect-ratio: 169/157;
    border-radius: 8px;
    overflow: hidden;
    background: url(_path-to-image.html>) lightgray 0px -73.143px/100% 146.588% no-repeat, url(_path-to-image.html>) lightgray 50%/cover no-repeat;
  }

  .test-input-area .test-input-phone .lazy-box {
    width: 100%;
    height: 100%;
  }

  .test-input-area .test-input-phone .lazy-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-input-area .test-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .test-input-area .test-input-box .test-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 308px;
    min-height: 115px;
    border-radius: 11px;
    border: 1px solid #e5e5e5;
    background: #f3f3f3;
  }

  .test-input-area .test-input-box .test-input-wrapper textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    outline: none;
    border-radius: 12px;
    background: #f3f3f3;
    padding: 16px 70px 16px 16px;
    color: #666;
    font-size: 20px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    resize: none;
  }

  .test-input-area .test-input-box .test-input-wrapper textarea::placeholder {
    color: #8e8e8e;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 120% */
  }

  .test-input-area .test-input-box .test-input-wrapper textarea:focus {
    background: #f0f0f0;
  }

  .test-input-area .test-input-box .test-input-wrapper .test-input-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 68px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #ff425e;
    box-shadow: 0 0 4px 0 #fff inset;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    border: none;
    padding: 0;
  }

  .test-input-area .test-input-box .test-input-wrapper .test-input-btn .test-input-btn-icon {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
  }

  .test-input-area .test-input-box .test-input-wrapper .test-input-btn:hover {
    background: #ff425e;
    transform: scale(1.05);
  }

  .test-input-area .test-input-box .test-input-wrapper .test-input-btn:active {
    background: #ff425e;
    transform: scale(0.95);
  }

  .test-input-privacy {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin-top: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 767px) {
    .test-input-area {
      padding: 24px;
    }

    .test-input-area .test-input-content {
      flex-direction: column;
      gap: 32px;
    }

    .test-input-area .test-input-phone {
      width: 100%;
      display: flex;
      justify-content: center;
      width: 231px;
      height: 215px;
      aspect-ratio: 231/215;
    }

    .test-input-area .test-input-box {
      width: 100%;
    }

    .test-input-area .test-input-box .test-input-wrapper {
      max-width: 100%;
    }

    .test-input-area .test-input-box .test-input-wrapper textarea {
      min-height: 100px;
      font-size: 16px;
      padding: 12px 60px 12px 12px;
    }

    .test-input-area .test-input-box .test-input-wrapper .test-input-btn {
      width: 45px;
      height: 45px;
      bottom: 10px;
      right: 10px;
    }

    .test-input-area .test-input-box .test-input-wrapper .test-input-btn .test-input-btn-icon {
      width: 20px;
      height: 20px;
    }

    .test-input-privacy {
      font-size: 12px;
      margin-top: 16px;
    }

    .test-input-loading .loader-container {
      transform: scale(0.6);
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .test-love-area {
    width: 800px;
    height: 506px;
    flex-shrink: 0;
    position: relative;
  }

  .test-love-area .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

  .test-love-area .logo {
    width: 360px;
    height: 175px;
    flex-shrink: 0;
    aspect-ratio: 72/35;
    position: relative;
    top: 10px;
    left: 47%;
    transform: translateX(-47%);
  }

  .test-love-area .logo .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-love-area .question-txt {
    position: relative;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 296px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: #FFF;
    text-align: center;
    text-shadow: 0 2px 4px rgba(229, 0, 137, 0.6);
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    /* 166.667% */
  }

  .test-love-area .input-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 55px;
    margin-right: 55px;
    margin-top: 30px;
  }

  .test-love-area .input-box input {
    width: 312px;
    height: 48px;
    flex-shrink: 0;
    padding-left: 10px;
    border-radius: 12px;
    border: 1px solid #FF2052;
    background: #FFF;
    color: #FF2052;
    text-align: left;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    /* 166.667% */
    text-transform: capitalize;
  }

  .test-love-area .input-box input::placeholder {
    color: #FF2052;
  }

  .test-love-area .input-box input:hover {
    box-shadow: 0 2px 4px 0 rgba(255, 53, 66, 0.6);
  }

  .test-love-area .input-box input:focus {
    outline: none;
  }

  .test-love-area .input-box input:focus::placeholder {
    opacity: 0.2;
  }

  .test-love-area .input-box .plus {
    width: 26.624px;
    height: 26.624px;
    flex-shrink: 0;
  }

  .test-love-area a.test-love-btn {
    width: 201px;
    height: 57px;
    flex-shrink: 0;
    display: flex;
    position: relative;
    margin-top: 50px;
    left: 50%;
    transform: translateX(-50%);
    animation: breathe 2s ease-in-out infinite;
  }

  @media (min-width: 769px) {
    .test-love-area a.test-love-btn:hover {
      animation-play-state: paused;
    }
  }

  .test-love-area a.test-love-btn:active .test-love-btn-txt-box {
    transform: translateY(4px);
    transition: transform 0.1s ease-out;
  }

  .test-love-area a.test-love-btn .test-love-btn-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    scale: 1.3;
  }

  .test-love-area a.test-love-btn .test-love-btn-txt-box {
    position: absolute;
    top: -5px;
    left: 0;
    width: 201px;
    height: 49px;
    flex-shrink: 0;
    transition: transform 0.15s ease-out;
  }

  .test-love-area a.test-love-btn .test-love-btn-txt-box .test-love-btn-up-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .test-love-area a.test-love-btn .test-love-btn-txt-box .test-love-btn-txt {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFF;
    text-align: center;
    text-shadow: 1px -4px 10px #FF7EED, 0 2px 0 #D91EBA, 0 2.3px 0 rgba(255, 255, 255, 0.83), -2px 4px 1px rgba(123, 21, 82, 0.25);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #D91EBA;
    font-family: Kari;
    font-size: 34px;
    font-style: italic;
    font-weight: 400;
    line-height: 30px;
    /* 88.235% */
    text-transform: capitalize;
  }

  .test-love-area a.loading-box {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
  }

  .test-love-area a.loading-box .loading-img {
    width: 100%;
    height: 104%;
    object-fit: cover;
    position: absolute;
  }

  .test-love-area a.loading-box .loading-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .test-love-area a.loading-box .loading-info .loading-items {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .test-love-area a.loading-box .loading-info .loading-items .loading-item {
    width: 66px;
    height: 61px;
    flex-shrink: 0;
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0.2;
  }

  .test-love-area a.loading-box .loading-info .loading-items .loading-item .loading-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-love-area a.loading-box .loading-info .loading-txt {
    color: #FFF;
    text-align: center;
    text-shadow: 0 2px 4px rgba(133, 33, 183, 0.6);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #EC288A;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    /* 166.667% */
    letter-spacing: 0.9px;
    margin-top: 40px;
  }

  @media (max-width: 1200px) {
    .test-love-area {
      width: 736px;
      height: auto;
      aspect-ratio: 800/506;
      left: 50%;
      transform: translateX(-50%);
    }

    .test-love-area .input-box {
      margin-left: 23px;
      margin-right: 23px;
    }
  }

  @media (max-width: 767px) {
    .test-love-area {
      width: 357px;
      aspect-ratio: 347/414;
      border-radius: 20px;
      overflow: hidden;
    }

    .test-love-area .bg-img {
      width: 100%;
      height: 114%;
      top: -15px;
    }

    .test-love-area .logo {
      width: 278px;
      height: 135px;
      flex-shrink: 0;
      aspect-ratio: 278/135;
      top: 30px;
    }

    .test-love-area .question-txt {
      margin-top: 38px;
    }

    .test-love-area .input-box {
      margin-left: 14px;
      margin-right: 14px;
      justify-content: center;
    }

    .test-love-area .input-box input {
      width: 150px;
      height: 42px;
      font-size: 14px;
    }

    .test-love-area .input-box .plus {
      width: 20px;
      height: 20px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .test-love-area a.test-love-btn {
      margin-top: 40px;
      width: 151.632px;
      height: 43px;
      flex-shrink: 0;
    }

    .test-love-area a.test-love-btn .test-love-btn-txt-box {
      width: 151.632px;
      height: 36.965px;
      flex-shrink: 0;
    }

    .test-love-area a.test-love-btn .test-love-btn-txt-box .test-love-btn-txt {
      font-size: 24px;
      line-height: normal;
    }

    .test-love-area a.loading-box .loading-info .loading-items .loading-item {
      width: 54px;
      height: 51px;
      flex-shrink: 0;
      margin-left: 5px;
      margin-right: 5px;
    }

    .test-love-area a.loading-box .loading-info .loading-txt {
      margin-top: 30px;
    }
  }

  @keyframes breathe {
    0% {
      transform: translateX(-50%) scale(1);
    }

    50% {
      transform: translateX(-50%) scale(1.1);
    }

    100% {
      transform: translateX(-50%) scale(1);
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .test-friendship-area {
    width: 800px;
    height: 506px;
    flex-shrink: 0;
    position: relative;
  }

  .test-friendship-area .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

  .test-friendship-area .logo {
    width: 360px;
    height: 175px;
    flex-shrink: 0;
    aspect-ratio: 72/35;
    position: relative;
    top: 10px;
    left: 47%;
    transform: translateX(-47%);
  }

  .test-friendship-area .logo .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-friendship-area .question-txt {
    position: relative;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 296px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: #FFF;
    text-align: center;
    text-shadow: 0 2px 4px rgba(27, 145, 255, 0.6);
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    /* 166.667% */
  }

  .test-friendship-area .input-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 55px;
    margin-right: 55px;
    margin-top: 30px;
  }

  .test-friendship-area .input-box input {
    width: 312px;
    height: 48px;
    flex-shrink: 0;
    padding-left: 10px;
    border-radius: 12px;
    border: 1px solid #1B91FF;
    background: #FFF;
    color: #1B91FF;
    text-align: left;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    /* 166.667% */
    text-transform: capitalize;
  }

  .test-friendship-area .input-box input::placeholder {
    color: #1B91FF;
  }

  .test-friendship-area .input-box input:hover {
    box-shadow: 0 2px 4px 0 rgba(27, 145, 255, 0.6);
  }

  .test-friendship-area .input-box input:focus {
    outline: none;
  }

  .test-friendship-area .input-box input:focus::placeholder {
    opacity: 0.2;
  }

  .test-friendship-area .input-box .plus {
    width: 26.624px;
    height: 26.624px;
    flex-shrink: 0;
  }

  .test-friendship-area a.test-friendship-btn {
    width: 201px;
    height: 57px;
    flex-shrink: 0;
    display: flex;
    position: relative;
    margin-top: 50px;
    left: 50%;
    transform: translateX(-50%);
    animation: breathe 2s ease-in-out infinite;
  }

  @media (min-width: 769px) {
    .test-friendship-area a.test-friendship-btn:hover {
      animation-play-state: paused;
    }
  }

  .test-friendship-area a.test-friendship-btn:active .test-friendship-btn-txt-box {
    transform: translateY(4px);
    transition: transform 0.1s ease-out;
  }

  .test-friendship-area a.test-friendship-btn .test-friendship-btn-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    scale: 1.3;
  }

  .test-friendship-area a.test-friendship-btn .test-friendship-btn-txt-box {
    position: absolute;
    top: -5px;
    left: 0;
    width: 201px;
    height: 49px;
    flex-shrink: 0;
    transition: transform 0.15s ease-out;
  }

  .test-friendship-area a.test-friendship-btn .test-friendship-btn-txt-box .test-friendship-btn-up-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .test-friendship-area a.test-friendship-btn .test-friendship-btn-txt-box .test-friendship-btn-txt {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFF;
    text-align: center;
    text-shadow: 1px -4px 10px #FF7EED, 0 2px 0 #D91EBA, 0 2.3px 0 rgba(255, 255, 255, 0.83), -2px 4px 1px rgba(123, 21, 82, 0.25);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #D91EBA;
    font-family: Kari;
    font-size: 34px;
    font-style: italic;
    font-weight: 400;
    line-height: 30px;
    /* 88.235% */
    text-transform: capitalize;
  }

  .test-friendship-area a.loading-box {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
  }

  .test-friendship-area a.loading-box .loading-img {
    width: 100%;
    height: 104%;
    object-fit: cover;
    position: absolute;
  }

  .test-friendship-area a.loading-box .loading-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .test-friendship-area a.loading-box .loading-info .loading-items {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .test-friendship-area a.loading-box .loading-info .loading-items .loading-item {
    width: 66px;
    height: 61px;
    flex-shrink: 0;
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0.2;
  }

  .test-friendship-area a.loading-box .loading-info .loading-items .loading-item .loading-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-friendship-area a.loading-box .loading-info .loading-txt {
    color: #FFF;
    text-align: center;
    text-shadow: 0 2px 4px rgba(133, 33, 183, 0.6);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #EC288A;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    /* 166.667% */
    letter-spacing: 0.9px;
    margin-top: 40px;
  }

  @media (max-width: 1200px) {
    .test-friendship-area {
      width: 736px;
      height: auto;
      aspect-ratio: 800/506;
      left: 50%;
      transform: translateX(-50%);
    }

    .test-friendship-area .input-box {
      margin-left: 23px;
      margin-right: 23px;
    }
  }

  @media (max-width: 767px) {
    .test-friendship-area {
      width: 357px;
      aspect-ratio: 347/414;
      border-radius: 20px;
      overflow: hidden;
    }

    .test-friendship-area .bg-img {
      width: 100%;
      height: 114%;
      top: -15px;
    }

    .test-friendship-area .logo {
      width: 278px;
      height: 135px;
      flex-shrink: 0;
      aspect-ratio: 278/135;
      top: 30px;
    }

    .test-friendship-area .question-txt {
      margin-top: 38px;
    }

    .test-friendship-area .input-box {
      margin-left: 14px;
      margin-right: 14px;
      justify-content: center;
    }

    .test-friendship-area .input-box input {
      width: 150px;
      height: 42px;
      font-size: 14px;
    }

    .test-friendship-area .input-box .plus {
      width: 20px;
      height: 20px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .test-friendship-area a.test-friendship-btn {
      margin-top: 40px;
      width: 151.632px;
      height: 43px;
      flex-shrink: 0;
    }

    .test-friendship-area a.test-friendship-btn .test-friendship-btn-txt-box {
      width: 151.632px;
      height: 36.965px;
      flex-shrink: 0;
    }

    .test-friendship-area a.test-friendship-btn .test-friendship-btn-txt-box .test-friendship-btn-txt {
      font-size: 24px;
      line-height: normal;
    }

    .test-friendship-area a.loading-box .loading-info .loading-items .loading-item {
      width: 54px;
      height: 51px;
      flex-shrink: 0;
      margin-left: 5px;
      margin-right: 5px;
    }

    .test-friendship-area a.loading-box .loading-info .loading-txt {
      margin-top: 30px;
    }
  }

  @keyframes breathe {
    0% {
      transform: translateX(-50%) scale(1);
    }

    50% {
      transform: translateX(-50%) scale(1.1);
    }

    100% {
      transform: translateX(-50%) scale(1);
    }
  }

  #test-rarity-upload-file {
    display: none;
  }

  .test-rarity-area {
    border-radius: 18px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    padding: 24px;
  }

  .test-rarity-area-content {
    border-radius: 18px;
    padding: 36px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    background-color: #FFF9FA;
  }

  .test-rarity-area-content .test-rarity-upload {
    border-radius: 8px;
    border: 1px dashed #FFF;
    background: var(--3, linear-gradient(180deg, #F36 0%, #FFB4A3 100%));
    padding: 75px 29px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }

  .test-rarity-area-content .test-rarity-upload:hover {
    background: linear-gradient(180deg, #FF648B 0%, #FFBBAC 100%);
  }

  .test-rarity-area-content .test-rarity-upload:active {
    background: linear-gradient(180deg, #FF275D 0%, #FFAF9D 100%);
  }

  .test-rarity-area-content .test-rarity-upload .photo-scan-line {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(112, 236, 252, 0) 0%, #F36 50%, rgba(112, 236, 252, 0) 100%);
    box-shadow: 0px 3px 8px 0px #F36;
    animation: scan-move 4s linear infinite;
  }

  .test-rarity-area-content .test-rarity-upload #test-rarity-upload-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 8px;
    object-fit: cover;
  }

  .test-rarity-area-content .test-rarity-upload .test-rarity-upload-icon {
    width: 72px;
    height: 72px;
  }

  .test-rarity-area-content .test-rarity-upload .test-rarity-upload-icon path {
    transition: all 0.3s ease;
  }

  .test-rarity-area-content .test-rarity-upload .test-rarity-upload-text {
    margin-top: 32px;
    color: #FFF;
    /* f-20-m-24 */
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 120% */
    text-transform: capitalize;
    transition: all 0.3s ease;
    text-align: center;
  }

  .test-rarity-area-content .test-rarity-result {
    margin-left: 30px;
    flex: 1;
    width: 100%;
    height: 282px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: none;
  }

  .test-rarity-area-content .test-rarity-result .rarity-result-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper img {
    width: 48px;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container {
    position: relative;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list {
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    left: -59%;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item span {
    width: 110px;
    color: #FFF;
    text-align: right;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item .arrow {
    width: 37px;
    height: 5px;
    border-radius: 2.5px 0 0 2.5px;
    background: #FFF;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(1) .arrow {
    width: 30px;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(2),
  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(4) {
    flex-direction: row-reverse;
    left: 59%;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(2) span,
  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(4) span {
    text-align: left;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(2) .arrow,
  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(4) .arrow {
    border-radius: 0 2.5px 2.5px 0;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-value {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    border-radius: 10px;
    height: 0;
  }

  .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-value .rarity-result-progress-value-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }

  @keyframes scan-move {
    0% {
      top: 0;
    }

    50% {
      top: calc(100% - 1px);
    }

    100% {
      top: 0;
    }
  }

  @media (max-width: 1200px) {
    .test-rarity-area {
      border-radius: 16px;
    }

    .test-rarity-area-content {
      border-radius: 12px;
    }

    .test-rarity-area-content .test-rarity-upload:active .test-rarity-upload-text {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    .test-rarity-area-content .test-rarity-upload:active .test-rarity-upload-icon path {
      fill: rgba(255, 255, 255, 0.9) !important;
    }
  }

  @media (max-width: 767px) {
    .test-rarity-area {
      border-radius: 16px;
      padding: 0;
    }

    .test-rarity-area-content {
      border-radius: 16px;
      padding: 14px;
    }

    .test-rarity-area-content .test-rarity-upload {
      width: 118px;
      height: 190px;
      padding: 0;
    }

    .test-rarity-area-content .test-rarity-upload .test-rarity-upload-icon {
      width: 48px;
      height: 48px;
    }

    .test-rarity-area-content .test-rarity-upload .test-rarity-upload-icon svg {
      width: 48px;
      height: 48px;
    }

    .test-rarity-area-content .test-rarity-upload .test-rarity-upload-text {
      margin-top: 6px;
      font-size: 14px;
      line-height: 22px;
      width: 94px;
    }

    .test-rarity-area-content .test-rarity-result {
      margin-left: 6px;
      flex: 1;
      width: 100%;
      height: 190px;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      border: none;
    }

    .test-rarity-area-content .test-rarity-result .rarity-result-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      padding: 12px;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper img {
      width: 30px;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container {
      position: relative;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list {
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item {
      display: flex;
      align-items: center;
      gap: 4px;
      position: relative;
      left: -56%;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item span {
      width: 110px;
      color: #FFF;
      text-align: right;
      font-family: Figtree;
      font-size: 9px;
      font-style: normal;
      font-weight: 600;
      line-height: 15px;
      white-space: nowrap;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item .arrow {
      width: 16px;
      height: 3px;
      border-radius: 2.5px 0 0 2.5px;
      background: #FFF;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(1) .arrow {
      width: 10px;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(2),
    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(4) {
      flex-direction: row-reverse;
      left: 57%;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(2) span,
    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(4) span {
      text-align: left;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(2) .arrow,
    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-list .rarity-result-progress-item:nth-child(4) .arrow {
      border-radius: 0 2.5px 2.5px 0;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-value {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      border-radius: 10px;
      height: 0;
    }

    .test-rarity-area-content .test-rarity-result .test-rarity-result-wrapper .rarity-result-progress-container .rarity-result-progress-value .rarity-result-progress-value-circle {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
    }
  }

  @media (min-width: 1201px) {
    .test-rarity-upload:hover .test-rarity-upload-text {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    .test-rarity-upload:hover .test-rarity-upload-icon path {
      fill: rgba(255, 255, 255, 0.9) !important;
    }

    .test-rarity-upload:active .test-rarity-upload-text {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    .test-rarity-upload:active .test-rarity-upload-icon path {
      fill: rgba(255, 255, 255, 0.9) !important;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .detail-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .detail-page {
    background-color: #fff;
  }

  .detail-page .detail-page-content {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 1180px;
    margin: 30px 0 69px;
  }

  .detail-page .detail-page-content .page-main {
    width: 800px;
  }

  .detail-page .detail-page-content .page-main .ads {
    margin: 5px 0 14px !important;
  }

  .detail-page .detail-page-content .page-main .page-main-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
    margin-bottom: 20px;
  }

  .detail-page .detail-page-content .page-main .page-main-security-title {
    display: inline-block;
    color: #7E7E7E;
    font-family: Biryani;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin-top: 10px;
    word-break: break-word;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .detail-page .detail-page-content .page-main .safe-img {
    width: 21px;
    height: 17px;
    border-radius: 8.5px 8.5px 8.5px 0px;
    background: #FFF;
    box-shadow: 0px 1px 5px 0px rgba(8, 42, 43, 0.12);
    margin-left: 3px;
  }

  .detail-page .detail-page-content .page-main .page-main-desc {
    color: #7E7E7E;
    font-family: Biryani;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 14px;
  }

  .detail-page .detail-page-content .page-main .page-main-desc:last-child {
    margin-bottom: 0;
  }

  .detail-page .detail-page-content .page-main #palmistry-iframe {
    width: 100%;
    border: none;
    display: block;
    aspect-ratio: 4/3;
  }

  @media (max-width: 1200px) {
    .detail-page .detail-page-content {
      justify-content: center;
      width: unset;
    }

    .detail-page .detail-page-content .page-main {
      width: calc(100% - 32px);
    }
  }

  @media (max-width: 767px) {
    .detail-page .detail-page-content {
      padding: 0;
      margin: 20px 0 42px;
    }

    .detail-page .detail-page-content .page-main {
      width: calc(100% - 28px);
    }

    .detail-page .detail-page-content .page-main .page-main-title {
      font-size: 20px;
      line-height: 28px;
    }

    .detail-page .detail-page-content .page-main .page-main-desc {
      font-size: 16px !important;
      line-height: 30px !important;
    }

    .detail-page .detail-page-content .page-main .page-main-security-title {
      font-size: 12px;
      line-height: 21px;
    }

    .detail-page .detail-page-content .page-main #palmistry-iframe {
      width: 100%;
      border: none;
      display: block;
      aspect-ratio: 3/4;
    }
  }

  .loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* From Uiverse.io by BlackisPlay */
  .planets {
    position: relative;
    height: 100px;
    width: 100px;
    display: flex;
  }

  #planetTrail1,
  #planetTrail2,
  #planetTrail3 {
    outline: solid rgb(101, 101, 101) 1px;
    border-radius: 50%;
    position: absolute;
  }

  #planetTrail1::after,
  #planetTrail2::after,
  #planetTrail3::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
  }

  #planetTrail1::after {
    background-color: rgb(213, 213, 120);
  }

  #planetTrail2::after {
    background-color: rgb(115, 174, 231);
  }

  #planetTrail3::after {
    background-color: rgb(180, 73, 49);
  }

  #planetTrail1 {
    width: 120px;
    height: 120px;
    animation: trails1 4s infinite;
  }

  #planetTrail2 {
    width: 170px;
    height: 170px;
    animation: trails2 4s infinite;
  }

  #planetTrail3 {
    width: 220px;
    height: 220px;
    animation: trails3 4s infinite;
  }

  @keyframes trails1 {
    0% {
      transform: rotate(0deg);
    }

    40% {
      transform: rotate(360deg);
      width: 120px;
      height: 120px;
    }

    50% {
      width: 0px;
      height: 0px;
    }

    90% {
      width: 0px;
      height: 0px;
    }

    100% {
      width: 120px;
      height: 120px;
    }
  }

  @keyframes trails2 {
    0% {
      transform: rotate(0deg);
    }

    40% {
      transform: rotate(250deg);
      width: 170px;
      height: 170px;
    }

    50% {
      width: 0px;
      height: 0px;
    }

    90% {
      width: 0px;
      height: 0px;
    }

    100% {
      width: 170px;
      height: 170px;
    }
  }

  @keyframes trails3 {
    0% {
      transform: rotate(0deg);
    }

    40% {
      transform: rotate(170deg);
      width: 220px;
      height: 220px;
    }

    50% {
      width: 0px;
      height: 0px;
    }

    90% {
      width: 0px;
      height: 0px;
    }

    100% {
      width: 220px;
      height: 220px;
    }
  }

  #star {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #34D0E3;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bouncingStar 4s infinite;
  }

  #starShadow {
    position: absolute;
    width: 50px;
    height: 20px;
    background-color: #34D0E3;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    filter: blur(5px);
    opacity: 0.3;
    animation: shadowAnimation 4s infinite;
  }

  @keyframes bouncingStar {
    0% {
      transform: translate(-50%, -50%);
    }

    10% {
      transform: translate(-50%, -30%);
    }

    20% {
      transform: translate(-50%, -50%);
    }

    30% {
      transform: translate(-50%, -30%);
    }

    40% {
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
    }

    50% {
      width: 0px;
      height: 0px;
    }

    90% {
      width: 0px;
      height: 0px;
    }

    100% {
      width: 50px;
      height: 50px;
    }
  }

  @keyframes shadowAnimation {
    0% {
      opacity: 0.1;
    }

    10% {
      opacity: 0.4;
    }

    20% {
      opacity: 0.1;
    }

    30% {
      opacity: 0.4;
    }

    40% {
      opacity: 0.1;
    }

    50% {
      opacity: 0;
    }

    90% {
      opacity: 0;
    }

    100% {
      opacity: 0.1;
    }
  }

  #blackHole {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);
    outline: #34D0E3 solid 5px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bouncingBlackHole 4s infinite;
  }

  @keyframes bouncingBlackHole {
    0% {
      height: 0px;
      width: 0px;
    }

    40% {
      width: 0px;
      height: 0px;
    }

    50% {
      width: 50px;
      height: 50px;
    }

    90% {
      width: 50px;
      height: 50px;
    }

    100% {
      width: 0px;
      height: 0px;
    }
  }

  #blackHoleDisk1 {
    position: absolute;
    width: 68px;
    height: 68px;
    clip-path: inset(50% 0 0 0);
    border: black 10px solid;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
    animation: diskAn 4s infinite;
  }

  #blackHoleDisk2 {
    position: absolute;
    width: 70px;
    height: 70px;
    clip-path: inset(0 0 50% 0);
    border: rgb(245, 174, 8) 10px solid;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(55deg);
    animation: diskAn 4s infinite;
  }

  @keyframes diskAn {
    0% {
      height: 0px;
      width: 0px;
      border: #34D0E3 0px solid;
    }

    40% {
      width: 0px;
      height: 0px;
      border: #34D0E3 0px solid;
    }

    50% {
      width: 88px;
      height: 88px;
      border: #34D0E3 18px solid;
    }

    90% {
      width: 88px;
      height: 88px;
      border: #34D0E3 18px solid;
    }

    100% {
      width: 0px;
      height: 0px;
      border: orange 0px solid;
    }
  }

  #planet {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    animation: planetAn 4s infinite;
  }

  @keyframes planetAn {
    0% {
      opacity: 0;
      transform: translate(0px, 0px);
      z-index: 1;
    }

    50% {
      opacity: 0;
      transform: translate(0px, 0px);
      z-index: 1;
    }

    58% {
      opacity: 1;
    }

    70% {
      opacity: 1;
      transform: translate(100px, 40px);
      z-index: 1;
    }

    71% {
      z-index: 0;
    }

    90% {
      z-index: 0;
      opacity: 1;
      transform: translate(-10px, 70px);
    }

    100% {
      transform: translate(-10px, 70px);
      opacity: 0;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .result-love-test-wrapper .love-page-title-area {
    border-radius: 16px;
    border: 2px solid rgba(0, 181, 203, 0.1);
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 69, 77, 0.04);
    padding: 20px;
    margin-bottom: 20px;
  }

  .result-love-test-wrapper .love-page-title-area .love-page-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
  }

  .result-love-test-wrapper .test-love-area {
    width: 800px;
    height: 506px;
    flex-shrink: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2.3px 0 0 rgba(255, 255, 255, 0.39);
  }

  .result-love-test-wrapper .test-love-area .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

  .result-love-test-wrapper .test-love-area .logo {
    width: 452px;
    height: 396px;
    flex-shrink: 0;
    position: relative;
    top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .result-love-test-wrapper .test-love-area .logo .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

  .result-love-test-wrapper .test-love-area .logo .logo-img-highlight {
    width: 338.407px;
    height: 298px;
    flex-shrink: 0;
    object-fit: cover;
    position: absolute;
  }

  .result-love-test-wrapper .test-love-area .logo .wave-container {
    width: 308px;
    height: 269px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    mask: url("static/img/detail/test_love/heart_mask.png") no-repeat center center;
    mask-size: contain;
    -webkit-mask: url("static/img/detail/test_love/heart_mask.png") no-repeat center center;
    -webkit-mask-size: contain;
  }

  .result-love-test-wrapper .test-love-area .logo .logo-img-mask {
    display: none;
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 2s ease-out;
  }

  .result-love-test-wrapper .test-love-area .logo .logo-img-wave {
    width: 1364px;
    height: 397px;
    position: absolute;
    left: 0;
    object-fit: cover;
    transform: translateX(0);
    transition: transform 2s linear;
  }

  .result-love-test-wrapper .test-love-area .logo .logo-img-wave.wave-flowing {
    transform: translateX(-200px);
  }

  .result-love-test-wrapper .test-love-area .logo .logo-img-wave.wave-paused {
    transition: none;
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.animate {
    transform: translateY(0%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-0 {
    transform: translateY(100%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-10 {
    transform: translateY(90%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-20 {
    transform: translateY(80%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-30 {
    transform: translateY(70%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-40 {
    transform: translateY(60%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-50 {
    transform: translateY(50%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-60 {
    transform: translateY(40%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-70 {
    transform: translateY(30%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-80 {
    transform: translateY(20%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-90 {
    transform: translateY(10%);
  }

  .result-love-test-wrapper .test-love-area .logo .wave-fill.progress-100 {
    transform: translateY(0%);
  }

  .result-love-test-wrapper .test-love-area .logo .txt-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 7px;
  }

  .result-love-test-wrapper .test-love-area .logo .txt-info .name {
    color: #FFF;
    text-align: center;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    text-transform: capitalize;
  }

  .result-love-test-wrapper .test-love-area .logo .txt-info .and {
    color: #FFF;
    text-align: center;
    font-family: "Kari Pro";
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 23px;
    text-transform: capitalize;
    margin-bottom: 8px;
  }

  .result-love-test-wrapper .test-love-area .logo .txt-info .percent {
    color: #FFF;
    text-align: center;
    font-family: "Kari Pro";
    font-size: 44px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
  }

  .result-love-test-wrapper .test-love-area .result-txt-bg {
    width: 740px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #FFF;
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 20px;
    display: flex;
    align-items: center;
  }

  .result-love-test-wrapper .test-love-area .result-txt-bg .result-txt {
    color: #FF2052;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 1200px) {
    .result-love-test-wrapper .test-love-area {
      width: 736px;
      height: auto;
      aspect-ratio: 736/502;
      left: 50%;
      transform: translateX(-50%);
    }

    .result-love-test-wrapper .test-love-area .bg-img {
      width: 100%;
      height: 104%;
      object-fit: cover;
      position: absolute;
      top: -7px;
    }

    .result-love-test-wrapper .test-love-area .result-txt-bg {
      width: 696px;
      bottom: 32px;
    }
  }

  @media (max-width: 767px) {
    .result-love-test-wrapper .test-love-area {
      width: 357px;
      aspect-ratio: 347/414;
      border-radius: 20px;
      overflow: hidden;
    }

    .result-love-test-wrapper .test-love-area .bg-img {
      width: 100%;
      height: 114%;
      top: -15px;
    }

    .result-love-test-wrapper .test-love-area .logo {
      width: 328.727px;
      height: 288px;
      flex-shrink: 0;
      aspect-ratio: unset;
      top: 30px;
    }

    .result-love-test-wrapper .test-love-area .logo .wave-container {
      width: 224px;
      height: 195.636px;
    }

    .result-love-test-wrapper .test-love-area .logo .logo-img-highlight {
      width: 246.114px;
      height: 216.727px;
      flex-shrink: 0;
    }

    .result-love-test-wrapper .test-love-area .logo .logo-img-mask {
      width: 224px;
      height: 195.636px;
      flex-shrink: 0;
    }

    .result-love-test-wrapper .test-love-area .logo .logo-img-wave {
      width: 1091.2px;
      height: 317.6px;
    }

    .result-love-test-wrapper .test-love-area .logo .txt-info {
      top: 5px;
    }

    .result-love-test-wrapper .test-love-area .logo .txt-info .name {
      font-size: 16px;
      line-height: 17px;
    }

    .result-love-test-wrapper .test-love-area .logo .txt-info .and {
      font-size: 20px;
      margin-bottom: 6px;
    }

    .result-love-test-wrapper .test-love-area .logo .txt-info .percent {
      font-size: 34px;
    }

    .result-love-test-wrapper .test-love-area .result-txt-bg {
      width: 329px;
      height: 56px;
      flex-shrink: 0;
      bottom: 30px;
      padding: 7px 12px;
    }

    .result-love-test-wrapper .test-love-area .result-txt-bg .result-txt {
      font-size: 15px;
      line-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .result-friendship-test-wrapper .friendship-page-title-area {
    border-radius: 16px;
    border: 2px solid rgba(0, 181, 203, 0.1);
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 69, 77, 0.04);
    padding: 20px;
    margin-bottom: 20px;
  }

  .result-friendship-test-wrapper .friendship-page-title-area .friendship-page-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
  }

  .result-friendship-test-wrapper .test-friendship-area {
    width: 800px;
    height: 506px;
    flex-shrink: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2.3px 0 0 rgba(255, 255, 255, 0.39);
  }

  .result-friendship-test-wrapper .test-friendship-area .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo {
    width: 452px;
    height: 396px;
    flex-shrink: 0;
    position: relative;
    top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-highlight {
    width: 338.407px;
    height: 298px;
    flex-shrink: 0;
    object-fit: cover;
    position: absolute;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-container {
    width: 308px;
    height: 269px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    mask: url("static/img/detail/test_friendship/heart_mask.png") no-repeat center center;
    mask-size: contain;
    -webkit-mask: url("static/img/detail/test_friendship/heart_mask.png") no-repeat center center;
    -webkit-mask-size: contain;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-mask {
    display: none;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 2s ease-out;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-wave {
    width: 1364px;
    height: 397px;
    position: absolute;
    left: 0;
    object-fit: cover;
    transform: translateX(0);
    transition: transform 2s linear;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-wave.wave-flowing {
    transform: translateX(-200px);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-wave.wave-paused {
    transition: none;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.animate {
    transform: translateY(0%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-0 {
    transform: translateY(100%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-10 {
    transform: translateY(90%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-20 {
    transform: translateY(80%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-30 {
    transform: translateY(70%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-40 {
    transform: translateY(60%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-50 {
    transform: translateY(50%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-60 {
    transform: translateY(40%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-70 {
    transform: translateY(30%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-80 {
    transform: translateY(20%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-90 {
    transform: translateY(10%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .wave-fill.progress-100 {
    transform: translateY(0%);
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .txt-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 7px;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .txt-info .name {
    color: #FFF;
    text-align: center;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    text-transform: capitalize;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .txt-info .and {
    color: #FFF;
    text-align: center;
    font-family: "Kari Pro";
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 23px;
    text-transform: capitalize;
    margin-bottom: 8px;
  }

  .result-friendship-test-wrapper .test-friendship-area .logo .txt-info .percent {
    color: #FFF;
    text-align: center;
    font-family: "Kari Pro";
    font-size: 44px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
  }

  .result-friendship-test-wrapper .test-friendship-area .result-txt-bg {
    width: 740px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #FFF;
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 20px;
    display: flex;
    align-items: center;
  }

  .result-friendship-test-wrapper .test-friendship-area .result-txt-bg .result-txt {
    color: #255BFF;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 1200px) {
    .result-friendship-test-wrapper .test-friendship-area {
      width: 736px;
      height: auto;
      aspect-ratio: 736/502;
      left: 50%;
      transform: translateX(-50%);
    }

    .result-friendship-test-wrapper .test-friendship-area .bg-img {
      width: 100%;
      height: 104%;
      object-fit: cover;
      position: absolute;
      top: -7px;
    }

    .result-friendship-test-wrapper .test-friendship-area .result-txt-bg {
      width: 696px;
      bottom: 32px;
    }
  }

  @media (max-width: 767px) {
    .result-friendship-test-wrapper .test-friendship-area {
      width: 357px;
      aspect-ratio: 347/414;
      border-radius: 20px;
      overflow: hidden;
    }

    .result-friendship-test-wrapper .test-friendship-area .bg-img {
      width: 100%;
      height: 114%;
      top: -15px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo {
      width: 328.727px;
      height: 288px;
      flex-shrink: 0;
      aspect-ratio: unset;
      top: 30px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .wave-container {
      width: 224px;
      height: 195.636px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-highlight {
      width: 246.114px;
      height: 216.727px;
      flex-shrink: 0;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-mask {
      width: 224px;
      height: 195.636px;
      flex-shrink: 0;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .logo-img-wave {
      width: 1091.2px;
      height: 317.6px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .txt-info {
      top: 5px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .txt-info .name {
      font-size: 16px;
      line-height: 17px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .txt-info .and {
      font-size: 20px;
      margin-bottom: 6px;
    }

    .result-friendship-test-wrapper .test-friendship-area .logo .txt-info .percent {
      font-size: 34px;
    }

    .result-friendship-test-wrapper .test-friendship-area .result-txt-bg {
      width: 329px;
      height: 56px;
      flex-shrink: 0;
      bottom: 30px;
      padding: 7px 12px;
    }

    .result-friendship-test-wrapper .test-friendship-area .result-txt-bg .result-txt {
      font-size: 15px;
      line-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .result-rarity-test-wrapper .rarity-page-title-area {
    border-radius: 16px;
    border: 2px solid rgba(0, 181, 203, 0.1);
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 69, 77, 0.04);
    margin-bottom: 20px;
  }

  .result-rarity-test-wrapper .rarity-page-title-area .rarity-page-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
  }

  .result-rarity-test-wrapper .result-test-rarity-result {
    flex: 1;
    width: 100%;
    height: 507px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: none;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-rarity-result-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper img {
    width: 80px;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container {
    position: relative;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list {
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    left: -61%;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item span {
    width: 148px;
    text-align: right;
    color: #FFF;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    white-space: nowrap;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item.active span {
    font-weight: 800;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item .result-arrow {
    width: 62px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 4.25px 0 0 4.25px;
    background: #FFF;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(1) .result-arrow {
    width: 48px;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(2),
  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(4) {
    flex-direction: row-reverse;
    left: 61%;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(2) span,
  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(4) span {
    text-align: left;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(2) .result-arrow,
  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(4) .result-arrow {
    border-radius: 0 4.25px 4.25px 0;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-value {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    border-radius: 10px;
    height: 0;
    transition: height 1s ease;
  }

  .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-value .result-rarity-result-progress-value-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }

  @media (max-width: 767px) {
    .result-rarity-test-wrapper .result-test-rarity-result {
      flex: 1;
      width: 100%;
      height: 240px;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      border: none;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-rarity-result-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      padding: 12px;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper img {
      width: 40px;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container {
      position: relative;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list {
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item {
      display: flex;
      align-items: center;
      gap: 4px;
      position: relative;
      left: -58%;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item span {
      width: 110px;
      color: #FFF;
      font-family: Figtree;
      font-size: 12px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
      white-space: nowrap;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item .result-arrow {
      width: 30px;
      height: 4px;
      flex-shrink: 0;
      border-radius: 2px 0 0 2px;
      background: #FFF;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(1) .result-arrow {
      width: 22px;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(2),
    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(4) {
      flex-direction: row-reverse;
      left: 58%;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(2) span,
    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(4) span {
      text-align: left;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(2) .result-arrow,
    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-list .result-rarity-result-progress-item:nth-child(4) .result-arrow {
      border-radius: 0 2px 2px 0;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-value {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      border-radius: 10px;
      height: 0;
      transition: height 1s ease;
    }

    .result-rarity-test-wrapper .result-test-rarity-result .result-test-rarity-result-wrapper .result-rarity-result-progress-container .result-rarity-result-progress-value .result-rarity-result-progress-value-circle {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
    }
  }

  .result-normal-wrapper .page-title-area {
    border-radius: 16px;
    border-radius: 16px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    padding: 20px;
    margin-bottom: 20px;
  }

  .result-normal-wrapper .page-title-area .page-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
  }

  .result-normal-wrapper .page-title-area .page-cover {
    margin: 20px 0 0;
    border-radius: 8px;
    border: 1px solid #F6F6F6;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 363/190;
  }

  .result-normal-wrapper .page-title-area .page-cover img {
    object-fit: contain;
  }

  .result-normal-wrapper .page-title-area .page-subtitle {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
  }

  .result-normal-wrapper .page-title-area .page-subtitle img {
    margin-right: 7px;
    padding-top: 2px;
  }

  .result-normal-wrapper .page-title-area .page-subtitle span {
    color: #000;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
  }

  .result-normal-wrapper .page-title-area .page-desc {
    margin-top: 20px;
    color: #7E7E7E;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }

  @media (max-width: 767px) {
    .result-normal-wrapper .page-title-area {
      border: none;
      box-shadow: none;
      padding: 0;
      margin-bottom: 16px;
    }

    .result-normal-wrapper .page-title-area .page-title {
      font-size: 20px;
      line-height: 28px;
    }

    .result-normal-wrapper .page-title-area .page-cover {
      margin-top: 14px;
    }

    .result-normal-wrapper .page-title-area .page-subtitle {
      margin-top: 14px;
    }

    .result-normal-wrapper .page-title-area .page-subtitle span {
      font-size: 18px;
      line-height: 24px;
    }

    .result-normal-wrapper .page-title-area .page-desc {
      margin-top: 14px;
      font-size: 16px;
      line-height: 30px;
    }
  }

  .result-gif-wrapper .page-title-area {
    border-radius: 16px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    padding: 20px;
    margin-bottom: 20px;
  }

  .result-gif-wrapper .page-title-area .page-title {
    color: #2C2C2C;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
  }

  .result-gif-wrapper .page-title-area .page-cover {
    margin: 20px 0 0;
    border-radius: 8px;
    border: 1px solid #F6F6F6;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 363/190;
  }

  .result-gif-wrapper .page-title-area .page-cover img {
    object-fit: contain;
  }

  @media (max-width: 767px) {
    .result-gif-wrapper .page-title-area {
      border: none;
      box-shadow: none;
      padding: 0;
      margin-bottom: 16px;
    }

    .result-gif-wrapper .page-title-area .page-title {
      font-size: 20px;
      line-height: 28px;
    }

    .result-gif-wrapper .page-title-area .page-cover {
      margin-top: 14px;
    }
  }

  @-webkit-keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    10% {
      -webkit-transform: scale(0.81);
      transform: scale(0.81);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    17% {
      -webkit-transform: scale(0.98);
      transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    33% {
      -webkit-transform: scale(0.77);
      transform: scale(0.77);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    45% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }

  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    10% {
      -webkit-transform: scale(0.91);
      transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    17% {
      -webkit-transform: scale(0.98);
      transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    33% {
      -webkit-transform: scale(0.87);
      transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    45% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }

  .result-area {
    border-radius: 14px;
    border: 1px solid var(--e-0-e-0-e-0, #E0E0E0);
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .result-area .result-title {
    color: #000;
    text-align: center;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
    margin-top: 30px;
  }

  .result-area .result-title-desc {
    color: var(--b-3-b-3-b-3, #B3B3B3);
    text-align: center;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin-top: 8px;
  }

  .result-area .result-desc-list {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 51px;
    border-radius: 51.5px;
    background: #FFF;
    box-shadow: 0 2px 8px 0.5px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 40px;
  }

  .result-area .result-desc-list .result-desc-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 50%;
    color: var(--7-e-7-e-7-e, #7E7E7E);
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-transform: capitalize;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #FFF0F0;
    position: relative;
  }

  .result-area .result-desc-list .result-desc-item::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    padding: 4px 12px;
    white-space: nowrap;
    color: #2C2C2C;
    text-align: center;
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    border-radius: 12.5px;
    background: #EEE;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .result-area .result-desc-list .result-desc-item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 8px solid #EEE;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .result-area .result-desc-list .result-desc-item:hover {
    transform: translateY(-20px);
  }

  .result-area .result-desc-list .result-desc-item:hover::before {
    opacity: 1;
    visibility: visible;
  }

  .result-area .result-desc-list .special-desc-item {
    background: var(--00-b-5-cb, #FFF0F0) !important;
    color: #FFF !important;
  }

  .result-area .result-desc-list .special-desc-item::before {
    opacity: 1;
    visibility: visible;
  }

  .result-area .result-desc-list .special-desc-item::after {
    opacity: 1;
    visibility: visible;
  }

  .result-area .result-desc-list .display-none {
    display: none;
  }

  .result-area .result-btn-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
  }

  .result-area .result-btn-list .result-btn-item {
    border-radius: 25px;
    background: #F9367D;
    width: 400px;
    height: 50px;
    color: #FFF;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .result-area .result-btn-list .result-btn-item:last-child {
    margin-bottom: 0;
  }

  .result-area .result-btn-list .result-btn-item img,
  .result-area .result-btn-list .result-btn-item svg {
    position: absolute;
    right: 14px;
  }

  .result-area .result-btn-list .result-btn-item-next {
    -webkit-animation: heartbeat 2.3s ease-in-out infinite both;
    animation: heartbeat 2.3s ease-in-out infinite both;
  }

  @media (max-width: 1200px) {
    .result-btn-item-download:active {
      background: #08B7A0 !important;
    }

    .result-btn-item-next:active {
      background: #FF9500 !important;
    }

    .result-btn-item-love:active {
      background: #DC005F !important;
    }

    .result-btn-item-horoscope:active {
      background: #B044F4 !important;
    }

    .result-btn-item-personality:active {
      background: #2F8AFF !important;
    }

    .result-btn-item-again:active {
      background: #FFCEE0 !important;
    }

    .result-btn-item-share:active {
      background: #2A8FC4 !important;
    }

    .result-desc-item:active {
      background: #E1F9FF !important;
    }
  }

  @media (max-width: 767px) {
    .result-area {
      padding: 0 13px;
    }

    .result-area .result-title {
      font-size: 20px;
      line-height: 28px;
    }

    .result-area .result-desc-list {
      padding: 7px;
      width: 100%;
      gap: 0px;
      justify-content: space-between;
    }

    .result-area .result-desc-list:has(.special-desc-item) {
      width: fit-content;
      max-width: 100%;
    }

    .result-area .result-desc-list .result-desc-item {
      font-size: 12px;
      line-height: 20px;
      padding: 10px;
    }

    .result-area .result-desc-list .result-desc-item:hover {
      transform: none;
    }

    .result-area .result-desc-list .result-desc-item img {
      width: 30px;
      height: 30px;
    }

    .result-area .result-btn-list {
      width: 100%;
    }

    .result-area .result-btn-list .result-btn-item {
      font-size: 18px;
      line-height: 24px;
      width: 100%;
    }
  }

  @media (min-width: 1201px) {
    .result-btn-item-download:hover {
      background: #07a08c !important;
    }

    .result-btn-item-download:active {
      background: #08B7A0 !important;
    }

    .result-btn-item-next:hover {
      background: #FFBD59 !important;
    }

    .result-btn-item-next:active {
      background: #FF9500 !important;
    }

    .result-btn-item-love:hover {
      background: #DC005F !important;
    }

    .result-btn-item-love:active {
      background: #FA4292 !important;
    }

    .result-btn-item-horoscope:hover {
      background: #8F00E7 !important;
    }

    .result-btn-item-horoscope:active {
      background: #B044F4 !important;
    }

    .result-btn-item-personality:hover {
      background: #005CD2 !important;
    }

    .result-btn-item-personality:active {
      background: #2F8AFF !important;
    }

    .result-btn-item-again:hover {
      background: #FFCEE0 !important;
      color: #FF3975 !important;
    }

    .result-btn-item-again:active {
      background: #FFCEE0 !important;
      color: #FF3975 !important;
    }
  }
</style><!-- Google Tag Manager (noscript) --><noscript><iframe
    src="https://www.googletagmanager.com/ns.html?id=G-QWERRT" height="0" width="0"
    style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->
<style>
  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .header-not-home,
  .header .header-content .header-content-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header .header-content {
    height: 60px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 1px 5px 0px rgba(8, 42, 43, 0.12);
    padding: 0 42px;
  }

  .header .header-content .header-content-mobile-home,
  .header .header-content .header-content-right-mobile {
    display: none;
  }

  .header .header-content .header-content-logo {
    width: 175px;
    height: 60px;
    cursor: pointer;
  }

  .header .header-content .header-content-right {
    height: 100%;
  }

  .header .header-content .header-content-right .header-content-right-item {
    display: flex;
    border-radius: 50%;
    margin-right: 50px;
    cursor: pointer;
    position: relative;
    height: 100%;
    align-items: center;
  }

  .header .header-content .header-content-right .header-content-right-item .header-content-right-item-link {
    display: flex;
    align-items: center;
  }

  .header .header-content .header-content-right .header-content-right-item .header-content-right-item-link.active .header-content-right-item-text {
    background: var(--2, linear-gradient(180deg, #FF134E 0%, #FFA18C 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .header .header-content .header-content-right .header-content-right-item:hover .header-content-right-item-text {
    color: #424242;
  }

  .header .header-content .header-content-right .header-content-right-item:last-child {
    margin-right: 0;
  }

  .header .header-content .header-content-right .header-content-right-item img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .header .header-content .header-content-right .header-content-right-item .header-content-right-item-text {
    color: var(--656565, #656565);
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
  }

  .header .header-content .header-content-right .header-content-right-item .header-content-right-item-arrow {
    width: 12px !important;
    height: 6px !important;
    margin-left: 4px !important;
    position: relative;
    top: 0px;
    transition: all 0.3s ease;
  }

  .header .header-content .header-content-right .header-content-right-item .header-right-dropdown {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 60px;
    left: 0;
    background: #FFF;
    box-shadow: 0px 1px 5px 0px rgba(8, 42, 43, 0.12);
    padding: 20px 24px;
    display: none;
    flex-direction: column;
  }

  .header .header-content .header-content-right .header-content-right-item .header-right-dropdown .header-right-dropdown-item {
    color: #A4A4A4;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
    margin-bottom: 16px;
    transition: all 0.3s ease;
  }

  .header .header-content .header-content-right .header-content-right-item .header-right-dropdown .header-right-dropdown-item:hover {
    color: #656565;
  }

  .header .header-content .header-content-right .header-content-right-item .header-right-dropdown .header-right-dropdown-item:last-child {
    margin-bottom: 0;
  }

  .header .header-content .header-content-right .header-normal-content-right-item .header-content-right-item-arrow {
    top: -1px !important;
  }

  .header .header-content .header-content-right .header-normal-content-right-item .header-right-dropdown {
    top: 54px !important;
  }

  .header .header-content .header-content-right .header-normal-content-right-item .header-right-dropdown .header-right-dropdown-item {
    font-size: 14px !important;
  }

  .header-not-home {
    position: relative;
    padding: 0px !important;
    background: #fff;
    box-shadow: 0px 1px 5px 0px rgba(8, 42, 43, 0.12) !important;
  }

  .header-not-home .header-content {
    width: 1180px;
    box-shadow: none;
    height: 54px;
    padding: 0px;
  }

  .header-not-home .header-content .header-content-logo {
    height: 30px;
  }

  .header-not-home .header-content .header-content-right-item img {
    width: 20px !important;
    height: 20px !important;
  }

  .header-not-home .header-content .header-content-right-item .header-content-right-item-text {
    font-size: 14px !important;
  }

  .header-not-home .header-content-lp {
    width: calc(100% - 360px);
  }

  @media (max-width: 1200px) {
    .header .header-content {
      padding: 0 16px;
      height: 54px;
    }

    .header .header-content .header-content-right {
      display: none;
    }

    .header .header-content .header-content-logo {
      width: 134px;
      height: 46px;
    }

    .header .header-content .header-content-mobile-home,
    .header .header-content .header-content-right-mobile {
      display: flex;
      height: 24px;
      width: 24px;
      cursor: pointer;
      position: relative;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown {
      display: none;
      position: fixed;
      top: 66px;
      right: 16px;
      z-index: -1;
      background: #FFF;
      padding: 24px 14px;
      box-shadow: 0px 1px 5px 0px rgba(8, 42, 43, 0.12);
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-mobile-dropdown-item,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-mobile-dropdown-item {
      display: flex;
      margin-bottom: 20px;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-mobile-dropdown-item:last-child,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-mobile-dropdown-item:last-child {
      margin-bottom: 0;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-mobile-dropdown-item img,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-mobile-dropdown-item img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-mobile-dropdown-item .header-mobile-dropdown-item-text,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-mobile-dropdown-item .header-mobile-dropdown-item-text {
      color: #656565;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      text-transform: capitalize;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-mobile-dropdown-item .header-mobile-dropdown-item-arrow,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-mobile-dropdown-item .header-mobile-dropdown-item-arrow {
      width: 8px;
      height: 4px;
      margin-left: 9px;
      position: relative;
      top: 8px;
      transition: all 0.3s ease;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-two-dropdown,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-two-dropdown {
      display: none;
      flex-direction: column;
      position: relative;
      left: 24px;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-two-dropdown .header-two-dropdown-item,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-two-dropdown .header-two-dropdown-item {
      color: #A4A4A4;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      text-transform: capitalize;
      margin-bottom: 8px;
    }

    .header .header-content .header-content-mobile-home .header-mobile-dropdown .header-two-dropdown .header-two-dropdown-item:last-child,
    .header .header-content .header-content-right-mobile .header-mobile-dropdown .header-two-dropdown .header-two-dropdown-item:last-child {
      margin-bottom: 20px;
    }

    .header .header-content-lp {
      width: 100%;
    }

    .header-not-home .header-mobile-dropdown {
      top: 54px !important;
      right: 0px !important;
    }
  }

  @media (max-width: 767px) {
    .header .header-content {
      height: 50px;
    }

    .header .header-content .header-content-logo {
      width: 134px;
      height: 46px;
    }

    .header .header-content .header-content-mobile-home,
    .header .header-content .header-content-right-mobile {
      display: flex;
      width: 20px;
      height: 20px;
    }

    .header .header-mobile-dropdown {
      top: 62px !important;
      right: 12px !important;
    }

    .header-not-home .header-mobile-dropdown {
      top: 50px !important;
      right: 0px !important;
    }
  }

  @font-face {
    font-family: "Kari Pro";
    src: url("static/font/KariProItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Kari";
    src: url("static/font/Kari-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  .footer .footer-line3 .footer-line3-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer .footer-line3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer .footer-line1 {
    padding: 115px 80px 75px;
    width: 100%;
    background-image: url("static/img/footer/footerBC.svg");
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .footer .footer-line1 .footer-logo {
    margin-bottom: 22px;
  }

  .footer .footer-line1 .footer-line1-item {
    color: #717171;
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 40px;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-title {
    display: flex;
    color: #FFF;
    /* f-24-s-32 */
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    /* 133.333% */
    text-transform: capitalize;
    margin-bottom: 16px;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-title img {
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 6px;
    margin-top: 5px;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-title span {
    display: block;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-desc {
    color: var(--b-3-b-3-b-3, #B3B3B3);
    /* b-16-r-30 */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 187.5% */
    margin: 14px 0;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-cotent {
    color: #FFF;
    /* b-16-r-30 */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 187.5% */
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-list-title {
    margin-top: 30px;
    margin-bottom: 16px;
    color: #FFF;
    /* f-20-m-24 */
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 120% */
    text-transform: capitalize;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-list-item {
    display: flex;
    margin-bottom: 16px;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-list-item img {
    width: 6px;
    height: 12px;
    display: block;
    margin-right: 8px;
    margin-top: 7px;
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-list-item .footer-line1-item-list-item-title {
    white-space: nowrap;
    color: #FFF;
    /* b-16-r-30 */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 187.5% */
  }

  .footer .footer-line1 .footer-line1-item .footer-line1-item-list-item .footer-line1-item-list-item-desc {
    color: var(--b-3-b-3-b-3, #B3B3B3);
    /* b-16-r-30 */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 187.5% */
  }

  .footer .footer-line1 .footer-line1-item:last-child {
    margin-bottom: 0px;
  }

  .footer .footer-line3 {
    background: #F00;
    padding: 5px 70px;
  }

  .footer .footer-line3 .footer-line3-logo {
    width: 175px;
    height: 60px;
  }

  .footer .footer-line3 .footer-line3-right .footer-line3-text-item {
    margin-right: 84px;
    color: #FFF;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }

  .footer .footer-line3 .footer-line3-right .footer-line3-text-item::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFF 49.52%, rgba(255, 255, 255, 0) 100%);
    transition: all 0.3s ease;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
  }

  .footer .footer-line3 .footer-line3-right .footer-line3-text-item:last-child {
    margin-right: 0;
  }

  .footer .footer-line3 .footer-line3-right .footer-line3-text-item:last-child::after {
    display: none;
  }

  @media (max-width: 1200px) {
    .footer .footer-line1 {
      padding: 85px 16px 54px;
      background-image: url("static/img/footer/hostmobeilBC2.svg");
      background-position: top;
      background-repeat: no-repeat;
    }

    .footer .footer-line1 .footer-logo {
      margin-bottom: 16px;
    }

    .footer .footer-line1 .footer-logo img {
      height: 39px;
    }

    .footer .footer-line1 .footer-line1-text-item {
      font-size: 14px;
      line-height: 22px;
    }

    .footer .footer-line2 {
      padding: 30px 16px;
    }

    .footer .footer-line2 .footer-category-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin: 30px 0;
      position: relative;
    }

    .footer .footer-line2 .footer-category-container .footer-category-item {
      margin: 0;
      transform: perspective(0px) rotateY(0deg) scale(1);
      background: #047D8C;
    }

    .footer .footer-line2 .footer-category-container .footer-category-item .footer-category-item-content {
      margin: 0;
      transform: perspective(0px) rotateY(0deg) scale(1);
      padding: 30px 40px;
      max-width: unset;
    }

    .footer .footer-line3 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 5px 16px 5px 0;
      position: relative;
    }

    .footer .footer-line3 .footer-line3-right .footer-line3-text-item {
      margin-right: 30px;
      font-size: 14px;
    }

    .footer .footer-line3 .footer-line3-right .footer-line3-text-item:last-child {
      margin-right: 0;
    }

    .footer .footer-line3 .footer-line3-right .footer_facebook {
      position: absolute;
      right: 16px;
      bottom: 24px;
    }
  }

  @media (max-width: 767px) {
    .footer .footer-line1 {
      padding: 40px 14px;
      background-image: url("static/img/footer/hostmobeilBC2.svg");
      background-position: center;
      background-repeat: no-repeat;
    }

    .footer .footer-line1 .footer-line1-item {
      line-height: 20px;
    }

    .footer .footer-line1 .footer-line1-item .footer-line1-item-title {
      color: #FFF;
      /* f-20-s-28 */
      font-family: Figtree;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 28px;
      /* 140% */
      text-transform: capitalize;
    }

    .footer .footer-line1 .footer-line1-item:nth-child(3) {
      margin: 5px 0;
    }

    .footer .footer-line2 {
      padding: 30px 12px;
    }

    .footer .footer-line2 .footer-line2-text-item {
      font-size: 16px !important;
    }

    .footer .footer-line2 .footer-category-container {
      grid-template-columns: repeat(1, 1fr);
      margin: 20px 0;
    }

    .footer .footer-line2 .footer-category-container .footer-category-item .footer-category-item-content {
      padding: 30px 20px;
    }

    .footer .footer-line3 {
      padding: 21px 16px 33px;
      position: relative;
      flex-direction: column;
      align-items: flex-start;
    }

    .footer .footer-line3 .footer-line3-logo {
      display: block;
      width: 162.227px;
      height: 36px;
    }

    .footer .footer-line3 .footer-line3-right {
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .footer .footer-line3 .footer-line3-right .footer-line3-text-item {
      margin-right: 0;
      margin-top: 16px;
    }

    .footer .footer-line3 .footer-line3-right .footer-line3-text-item:first-child {
      margin-top: 0;
    }

    .footer .footer-line3 .footer-line3-right .footer_facebook {
      position: absolute;
      right: 20px;
      bottom: 27px;
    }
  }

  @media (min-width: 1201px) {
    .footer .footer-line3-text-item:hover::after {
      transform: scaleX(1) !important;
      opacity: 1 !important;
    }
  }

  /* ---- detail: extracted inline (AdSense, upload loading, lazy placeholder) ---- */
  .adsHeight {
    width: 100%;
  }

  .ads_placeholder {
    color: #d7d7d7;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .adsbygoogle {
    display: block;
    width: 100%;
  }

  .adsbygoogle[data-ad-status=unfilled] {
    display: none !important;
  }

  .ads {
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    align-items: center;
    margin: 5px 0 14px;
  }

  .upload-loading-new {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: #FFF9F9;
  }

  .upload-loading-new .upload-loading-new-container {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .upload-loading-new .upload-loading-new-text {
    color: var(--2-c-2-c-2-c, #2C2C2C);
    font-family: Figtree, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    text-transform: capitalize;
  }

  .upload-loading-new .upload-loading-new-bar {
    width: 100%;
    background: #fff;
    border: 2px solid rgba(255, 32, 82, 0.15);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 28.5px;
    box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.08);
  }

  .upload-loading-new .upload-loading-new-bar .upload-loading-new-progress {
    height: 37px;
    background: repeating-linear-gradient(45deg, #FF2052 0, #FF2052 15px, #FF7B9A 15px, #FF7B9A 30px);
    border-radius: 100px;
    width: 100%;
    position: relative;
    animation: loadingStripes 1.2s linear infinite;
  }

  .upload-loading-new .upload-loading-new-bar .upload-loading-new-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.08) 100%);
    border-radius: 100px;
  }

  @keyframes loadingStripes {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 42.43px 0;
    }
  }

  @media (max-width: 767px) {
    .upload-loading-new .upload-loading-new-text {
      font-size: 16px;
      line-height: 22px;
    }

    .upload-loading-new .upload-loading-new-bar {
      height: 33px;
      padding: 5px;
    }

    .upload-loading-new .upload-loading-new-bar .upload-loading-new-progress {
      height: 21px;
    }
  }

  .virtual-card,
  .physical-card,
  .tokenized-card {
    position: relative;
  }

  .virtual-card {
    background: #FFF9FA;
    position: relative;
    width: 100%;
    height: 100%;
  }

  #lazy-placeholder {
    display: none;
  }

  .lazy-loader {
    width: 80px;
    height: 80px;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .lazy-loader div {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
  }

  .lazy-loader div:before {
    content: "";
    width: 48px;
    height: 5px;
    background: #f0808050;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
  }

  .lazy-loader div:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #f08080;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
  }

  @keyframes jump7456 {
    15% {
      border-bottom-right-radius: 3px;
    }

    25% {
      transform: translateY(9px) rotate(22.5deg);
    }

    50% {
      transform: translateY(18px) scale(1, .9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }

    75% {
      transform: translateY(9px) rotate(67.5deg);
    }

    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes shadow324 {

    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.2, 1);
    }
  }