#P4OV {
  .P4OV_header_title {
    --dynamic-font-size: 3vw;
    --max-font-size: 60px;  
    font-size: var(--max-font-size);
    font-size: clamp(28px, var(--dynamic-font-size), var(--max-font-size));

    background: linear-gradient(88deg, #1A4B9A 13.83%, #9EB2D7 36.82%, #1486FF 94.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }


  /* PC grid */
  .P4OV__pc {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    /* grid-template-rows: minmax(240px, auto) minmax(413px, auto) minmax(400px, auto) minmax(455px, auto) minmax(512px, auto) minmax(620px, auto) minmax(520px, auto); */
    gap: 40px;
    
    .P4OV__pc-item-1, .P4OV__pc-item-15 {
      grid-column: span 24;
    }
    .P4OV__pc-item-2, .P4OV__pc-item-3, .P4OV__pc-item-13, .P4OV__pc-item-14 {
      grid-column: span 12;
    }
    .P4OV__pc-item-4, .P4OV__pc-item-5, .P4OV__pc-item-6 {
      grid-column: span 8;
    }
    .P4OV__pc-item-7, .P4OV__pc-item-10, .P4OV__pc-item-11 {
      grid-column: span 13;
    }
    .P4OV__pc-item-8, .P4OV__pc-item-9, .P4OV__pc-item-12 {
      grid-column: span 11;
    }
    
    /* --- */
    .P4OV__pc-item {
      display: grid;
      grid-template-columns: 1fr;
      --transition: all 0.4s ease;
      --transition-delay: 0.1s;
      overflow: hidden;
      border-radius: 8px;
      * {
        transition: var(--transition);
        /* transition-delay: var(--transition-delay); */
      }
      .P4OV__pc-img {
        grid-column: 1;
        grid-row: 1;
        order: 3;
      }
      .P4OV__pc-item-text {
        color: #fff;
        grid-column: 1;
        grid-row: 1;
        order: 5;
        position: relative; 
        z-index: 5;
        padding: var(--spacing-7) var(--spacing-8);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;

        .P4OV__pc-item-text__header {
          
          .P4OV__pc-item-text__title {
            --dynamic-font-size: 3vw;
            --max-font-size: 32px;  
            font-size: var(--max-font-size);
            font-size: clamp(28px, var(--dynamic-font-size), var(--max-font-size));
            font-weight: 600;
          }
          .P4OV__pc-item-text__desc {
            font-size: var(--font-16-12);
            max-height: 0;
            overflow: hidden;
            transition: var(--transition);
          }
        }
        .P4OV__pc-item-text__footer {
          display: none;
          transition: var(--transition);
        }
      }

      /* 特殊文字样式 */
      &.P4OV__pc-item-1 .P4OV__pc-item-text {
        display: flex;
        justify-content: center;
        align-items: center;
        
        .P4OV__pc-item-text__title {
          --max-font-size: 80px;  
          font-weight: 600;
        }
      }
      &.P4OV__pc-item-4, &.P4OV__pc-item-5, &.P4OV__pc-item-6 {
        .P4OV__pc-item-text .P4OV__pc-item-text__title {
          --max-font-size: 28px;
        }
      }
      &.P4OV__pc-item-8 {
        .P4OV__pc-item-text .P4OV__pc-item-text__title span {
          background: linear-gradient(180deg, #007BFF 0%, #FFF 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      &.P4OV__pc-item-10 {
        .P4OV__pc-item-text {
          .P4OV__pc-item-text__title {
            background: linear-gradient(285deg, #FFE9AB -1.25%, #E48C00 85.25%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
      &.P4OV__pc-item-11 {
        .P4OV__pc-item-text{
          .P4OV__pc-item-text__title {
            color: #000;
          }
          .P4OV__pc-item-text__desc {
            color: #333;
          }
        } 
      }
      &.P4OV__pc-item-13 {
        .P4OV__pc-item-text .P4OV__pc-item-text__title {
          background: linear-gradient(100deg, #007BFF 34.85%, #FFF 84.16%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      &.P4OV__pc-item-14 {
        .P4OV__pc-item-text .P4OV__pc-item-text__title {
          background: linear-gradient(265deg, #28E3BB 3.86%, #3C8DFF 36.06%, #FFD86E 75.84%, #FF1313 99.88%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      &.P4OV__pc-item-15 {
        .P4OV__pc-item-text {
          text-align: center;
          .P4OV__pc-item-text__desc {
            max-height: 300px;
          }
        }
      }

      /* 特殊文案位置 */
      &.P4OV__pc-item-4, &.P4OV__pc-item-5, &.P4OV__pc-item-6 {
        .P4OV__pc-item-text {
          justify-content: flex-end;
        }
      }


      /* 交互动效 */
      &.P4OV__pc-item-2, &.P4OV__pc-item-3,
      &.P4OV__pc-item-4, &.P4OV__pc-item-5, &.P4OV__pc-item-6,
      &.P4OV__pc-item-7,
      &.P4OV__pc-item-9, &.P4OV__pc-item-10,
      &.P4OV__pc-item-11, &.P4OV__pc-item-12,
      &.P4OV__pc-item-13, &.P4OV__pc-item-14 {
       .P4OV__pc-img {
          transform: scale(1.2);
          transform-origin: center bottom;
        }
        &:hover {
          .P4OV__pc-img {
            transform: scale(1);
          }
          .P4OV__pc-item-text__desc, .P4OV__pc-item-text__footer {
            max-height: 300px;
            transition: max-height 0.6s ease;
          }
        }
      }
      &.P4OV__pc-item-10 {
        &:hover {
          .P4OV__pc-item-text__desc {
            color: #333333;
          }
        }
      }
    }
  }
  .P4OV__m {
    display: none;
  }
  .P4OV__m-list {
    /* 轮播 */
    .P4OV__m-item__modes-swiper {
      .swiper {
        padding-bottom: 40px;
      }
      .swiper-pagination {
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 50px;
        background: #232325;
        width: fit-content;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        .swiper-pagination-bullet {
          background: #cbcbce;
          opacity: 1;
          &.swiper-pagination-bullet-active {
            background: #fff;
            width: 28px;
            border-radius: 50px;
          }
        }
      }

      /* 文字 */
      .P4OV__m-item__mode-content {
        display: grid;
        &> img, &> .P4OV__m-item__mode-text {
          grid-column: 1;
          grid-row: 1;
        }
        .P4OV__m-item__mode-text {
          padding: 20px;
          
          .P4OV__m-item__mode-text__title {
            font-size: 20px;
            font-weight: 600;
          }
          .P4OV__m-item__mode-text__desc {
            font-size: 14px;
          }
        }
      }
    }
  }
  /* 平埔 */
  .P4OV__m-item__rest-list {
    .P4OV__m-list-swiper-wrapper {
      position: relative;
      z-index: 1;
    }
    .P4OV__m-item__rest {
      .P4OV__m-item__rest-text {

        .P4OV__m-item__rest-text__title {
          padding-top: 32px;
          font-size: 20px;
          font-weight: 600;
        }
        .P4OV__m-item__rest-text__desc {
          font-size: 12px;
        }
        .P4OV__m-item__rest-text__tip {}
      }
      .P4OV__m-item__rest-img {
        margin-top: 20px; 
      }
      /* 特殊样式 */
      &.P4OV__m-item-8 .P4OV__m-item__rest-text__title {
        font-size: 12px;
         & > span {
          font-size: 20px;
          font-weight: 600;
          background: linear-gradient(180deg, #007BFF 0%, #FFF 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      &.P4OV__m-item-10 .P4OV__m-item__rest-text__title {
        background: linear-gradient(285deg, #FFE9AB -1.25%, #E48C00 85.25%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      &.P4OV__m-item-13 .P4OV__m-item__rest-text__title {
        background: linear-gradient(90deg, #007BFF 0%, #FFF 54.08%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      &.P4OV__m-item-14 .P4OV__m-item__rest-text__title {
        background: linear-gradient(265deg, #28E3BB 3.86%, #3C8DFF 36.06%, #FFD86E 75.84%, #FF1313 99.88%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .P4OV__btn {
    .P4OV__btn--more {
      background: #007BFF;
      /* --button-background */
      width: min(320px, 80%);
    }
  }
}

@media screen and (max-width: 768px) {
  #P4OV {
    .P4OV__pc {
      display: none;
    }
    .P4OV__m {
      display: block;
    }
  }
}


/* pop4 softwares product */
.pop4-softwares-product {
  .P4SP__header__title {
    font-size: var(--font-48-24);
    padding-bottom: 60px;
  }
  .P4SP__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    .P4SP__item {
      border-radius: 8px;
      padding: 12px 20px;
      background-color: #fafafa;
      .P4SP__RD__name {
        font-size: var(--font-32-24);
      }
      &> img {
        max-height: 60px;
        width: auto;
      }
    }
  }
}