.can-i-run-it-container {
  width: 100%;
  background-color: #1e1e23;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .cr-header-container {
    width: 100%;
    background: url(../images/can-i-run-it/header-bg.webp) no-repeat center
      center;
    background-size: cover;
    padding-top: 126px;
    padding-bottom: 37px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .cr-header-content {
      width: 100%;
      max-width: 1306px;
      padding-left: 53px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      gap: 33px;
      .cr-header-content-left {
        max-width: 579px;
        padding-top: 20px;
        flex: 1;
        h1 {
          font: normal normal 600 34px/52px Open Sans;
          color: #ffffff;
          max-width: 579px;
          margin-bottom: 28px;
          margin-top: 0;
        }
        .cr-header-content-left-desc {
          max-width: 500px;
          font: normal normal normal 18px/34px Open Sans;
          color: #f3f3f3;
          margin-bottom: 40px;
        }
      }
      .cr-header-content-right {
        flex: 1;
        max-width: 721px;
        min-width: 361px;
        img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
    .cr-header-list {
      margin-top: 43px;
      width: fit-content;
      display: flex;
      gap: 60px;
      flex-wrap: wrap;
      .cr-header-item {
        width: 227px;
        min-height: 134px;
        background: url(../images/can-i-run-it/header-item-bg.webp) no-repeat
          center center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 17px;
        box-sizing: border-box;
        .cr-header-item-title {
          font: normal normal 600 35px/47px Open Sans;
          color: #f9f8fb;
        }
        .cr-header-item-desc {
          font: normal normal normal 14px/19px Open Sans;
          color: #f9f8fb;
        }
        .cr-header-item-desc-sub {
          margin-top: 14px;
          font: normal normal normal 12px/17px Open Sans;
          color: #f9f8fb91;
        }
      }
    }
  }
  .btn-free-download {
    width: 262px;
    height: 60px;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    position: relative;
    z-index: 1;
    a {
      background: transparent linear-gradient(180deg, #00fe82 0%, #00cb69 100%) 0%
        0% no-repeat padding-box;
      border: 1px solid #7aff83;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font: normal normal 600 14px/19px Open Sans;
      color: #000000;
      &:hover {
        background: #00f67e 0% 0% no-repeat padding-box;
        border: 1px solid #7aff83;
      }
    }
    img {
      width: 17px;
      height: 17px;
    }
  }
  .cr-seo-1 {
    width: 100%;
    min-height: 799px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 108px;
    box-sizing: border-box;
    h2 {
      font: normal normal 600 34px/46px Open Sans;
      color: #fefefe;
      margin-bottom: 44px;
      margin-top: 0;
    }
    .cr-seo-1-content {
      display: flex;
      gap: 63px;
      flex-wrap: wrap;
      .cr-seo-1-content-left {
        max-width: 512px;
        flex: 1;
        padding-left: 54px;
        margin-top: 56px;
        .cr-seo-1-content-left-text {
          font: normal normal 500 16px/32px Open Sans;
          letter-spacing: 0.48px;
          color: #e6e6e6;
          margin-bottom: 43px;
          a {
            color: #00f07b;
            text-decoration: none;
          }
        }
      }
      .cr-seo-1-content-right {
        flex: 1;
        max-width: 685px;
        min-width: 338px;
        img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .cr-seo-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #050014;
    padding-top: 90px;
    padding-bottom: 112px;
    h2 {
      width: 100%;
      font: normal normal 600 34px/58px Open Sans;
      color: #ffffff;
      text-align: center;
      margin-top: 0;
    }
    .cr-seo-2-desc {
      margin-top: 17px;
      font: normal normal normal 16px/22px Open Sans;
      color: #dedede;
      text-align: center;
      margin-bottom: 32px;
    }
    .cr-seo-2-content {
      max-width: 1200px;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 77px;
      width: 100%;
      .cr-seo-2-content-left {
        flex: 1;
        min-width: 400px;
        display: flex;
        justify-content: center;
        gap: 27px;
        .cr-seo-2-content-left-number-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          .cr-seo-2-content-left-number-item-number {
            width: 47px;
            height: 47px;
            background: #24222a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font: normal normal 600 18px/24px Open Sans;
            color: #6a6a6a;
            &.active {
              background: #c50000;
              color: #ffffff;
            }
          }
          .cr-seo-2-content-left-number-item-divider {
            width: 0px;
            height: 124px;
            border: 1px dashed #707070;
          }
        }
        .cr-seo-2-content-left-text {
          .cr-seo-2-content-left-text-item {
            &.step-2 {
              margin-top: 24px;
            }
            &.step-3 {
              margin-top: 25px;
            }
            &.active {
              .cr-seo-2-content-left-text-item-title {
                color: #ffffff;
              }
              .cr-seo-2-content-left-text-item-desc {
                color: #e2e2e2;
              }
            }
            .cr-seo-2-content-left-text-item-title {
              max-width: 380px;
              font: normal normal 600 18px/24px Open Sans;
              margin-bottom: 10px;
              color: #aaa8a8;
              cursor: pointer;
            }
            .cr-seo-2-content-left-text-item-desc {
              max-width: 292px;
              font: normal normal normal 14px/26px Open Sans;
              color: #aaa8a8;
            }
          }
        }
      }
      .cr-seo-2-content-right {
        min-width: 361px;
        max-width: 677px;
        img {
          width: 100%;
          object-fit: cover;
        }
      }
      .cr-seo-2-content-right-m {
        display: none;
      }
    }
  }
  .cr-seo-3 {
    width: 100%;
    min-height: 577px;
    background: url(../images/can-i-run-it/cr-seo-3-bg.webp) no-repeat center
      center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 90px;
    padding-top: 26px;
    box-sizing: border-box;
    .cr-seo-3-left {
      flex: 1;
      max-width: 683px;
      min-width: 420px;
      img {
        width: 100%;
        object-fit: cover;
      }
    }
    .cr-seo-3-right {
      flex: 1;
      max-width: 535px;
      min-width: 342px;
      padding-right: 87px;
      padding-top: 76px;
      h2 {
        margin-top: 0;
        max-width: 535px;
        width: 100%;
        font: normal normal 600 34px/48px Open Sans;
        color: #ffffff;
        margin-bottom: 16px;
      }
      .cr-seo-3-right-desc {
        max-width: 409px;
        font: normal normal 500 16px/24px Open Sans;
        color: #cfcfcf;
        margin-bottom: 40px;
      }
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 40px;
        li {
          font: normal normal 500 14px/28px Open Sans;
          color: #c6c6c8;
          display: flex;
          gap: 8px;
          align-items: center;
          &::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ffffff;
          }
        }
      }
    }
  }
  .cr-seo-4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 77px;
    background-color: #050014;
    h2 {
      font: normal normal 600 34px/46px Open Sans;
      color: #ffffff;
      margin-bottom: 17px;
      text-align: center;
      margin-top: 0;
    }
    .cr-seo-4-desc {
      font: normal normal normal 16px/22px Open Sans;
      color: #dedede;
      margin-bottom: 54px;
      text-align: center;
    }
    .cr-seo-4-content-1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1200px;
      width: 100%;
      min-height: 591px;
      margin-top: 51px;
      padding: 0 25px;
      box-sizing: border-box;
      border-radius: 8px;
      background: #181a1a8c 0% 0% no-repeat padding-box;
      box-shadow: inset 14px 5px 58px rgba(216, 98, 181, 0.1);
      .cr-seo-4-content-1-title {
        margin-top: 35px;
        font: normal normal 600 22px/30px Open Sans;
        color: #ffffff;
      }
      .cr-seo-4-content-1-box-list {
        margin-top: 34px;
        width: 100%;
        display: flex;
        gap: 40px;
        .cr-seo-4-content-1-box {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 100%;
            max-width: 502px;
            margin-bottom: 30px;
          }
          .cr-seo-4-content-1-box-title {
            font: normal normal 500 20px/27px Open Sans;
            color: #ffffff;
          }
          .cr-seo-4-content-1-box-desc {
            font: normal normal normal 14px/26px Open Sans;
            color: #eeeeee;
            margin-top: 16px;
            text-align: center;
          }
        }
      }
    }
    .cr-seo-4-content-2 {
      margin-top: 36px;
      width: 100%;
      max-width: 1195px;
      display: flex;
      gap: 43px;
      .cr-seo-4-content-2-box {
        flex: 1;
        max-width: 576px;
        min-height: 527px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 28px 28px 28px;
        box-sizing: border-box;
        border-radius: 8px;
        background: #181a1a8c 0% 0% no-repeat padding-box;
        box-shadow: inset 14px 5px 58px rgba(216, 98, 181, 0.1);
        .cr-seo-4-content-2-box-title {
          font: normal normal 600 22px/30px Open Sans;
          color: #ffffff;
          margin-bottom: 10px;
        }
        img {
          width: 100%;
          max-width: 502px;
          margin-bottom: 3px;
        }
        .cr-seo-4-content-2-box-desc {
          text-align: center;
          font: normal normal normal 14px/26px Open Sans;
          color: #eeeeee;
        }
      }
    }
  }
  .cr-seo-5 {
    width: 100%;
    padding-top: 104px;
    padding-bottom: 136px;
    background-color: #050014;
    display: flex;
    flex-direction: column;
    align-items: center;
    h2 {
      max-width: 816px;
      text-align: center;
      font: normal normal 600 34px/54px Open Sans;
      color: #ffffff;
      margin-top: 0;
      margin-bottom: 0px;
    }
    .cr-seo-5-desc {
      margin-top: 23px;
      font: normal normal normal 16px/22px Open Sans;
      color: #dedede;
      margin-bottom: 26px;
    }
    .cr-seo-5-content {
      margin-top: 60px;
      width: 100%;
      max-width: 1920px;
      overflow: hidden;
      .cr-seo-5-content-list {
        display: flex;
        gap: 27px;
        width: max-content;
        will-change: transform;
        cursor: grab;
        user-select: none;
        .cr-seo-5-content-item {
          border-radius: 7px;
          overflow: hidden;
          min-width: 230px;
          width: 230px;
          height: 340px;
          position: relative;
          cursor: pointer;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            -webkit-user-drag: none;
          }
          .cr-seo-5-content-item-title {
            width: 100%;
            height: 36px;
            background: rgba(0, 0, 0, 0.72) 0% 0% no-repeat padding-box;
            backdrop-filter: blur(21px);
            -webkit-backdrop-filter: blur(21px);
            display: flex;
            align-items: center;
            justify-content: center;
            font: normal normal 600 14px/16px Spartan;
            color: #e5e5e5;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
    .cr-seo-5-content-m {
      display: none;
    }
  }
  .cr-seo-6 {
    width: 100%;
    padding-top: 72px;
    padding-bottom: 88px;
    background-color: #1e1e23;
    display: flex;
    flex-direction: column;
    align-items: center;
    h2 {
      font: normal normal 600 34px/46px Open Sans;
      color: #ffffff;
      text-align: center;
      margin-top: 0;
      margin-bottom: 0px;
    }
    .cr-seo-6-desc {
      margin-top: 15px;
      font: normal normal 500 16px/22px Open Sans;
      color: #e2e2e2;
      text-align: center;
    }
    .cr-seo-6-content-1 {
      width: 100%;
      max-width: 1200px;
      display: flex;
      gap: 28px;
      margin-top: 51px;
      flex-wrap: wrap;
      .cr-seo-6-content-1-left {
        flex: 1;
        min-height: 372px;
        padding: 0 32px;
        box-sizing: border-box;
        background: transparent
          linear-gradient(
            136deg,
            rgba(85, 80, 113, 0.22) 0%,
            rgba(42, 37, 42, 0.26) 100%
          )
          0% 0% no-repeat padding-box;
        border: 1px solid #ffffff4f;

        border-radius: 12px;

        img {
          width: 374px;
          height: 214px;
          object-fit: cover;
          margin-left: 98px;
        }
        .cr-seo-6-content-1-left-title {
          font: normal normal 600 20px/24px Open Sans;
          color: #ffffff;
          margin-bottom: 13px;
        }
        .cr-seo-6-content-1-left-desc {
          font: normal normal 500 14px/24px Open Sans;
          color: #ffffff;
        }
      }
      .cr-seo-6-content-1-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 22px;
        min-width: 372px;
        .cr-seo-6-content-1-right-item {
          display: flex;
          gap: 5px;
          min-height: 176px;
          align-items: center;
          padding-left: 4px;
          padding-right: 18px;
          box-sizing: border-box;
          background: transparent
            linear-gradient(
              136deg,
              rgba(85, 80, 113, 0.22) 0%,
              rgba(42, 37, 42, 0.26) 100%
            )
            0% 0% no-repeat padding-box;
          border: 1px solid #ffffff4f;
          border-radius: 12px;
          img {
            width: 94px;
            height: 94px;
            object-fit: cover;
          }
          .cr-seo-6-content-1-right-item-text {
            flex: 1;
            .cr-seo-6-content-1-right-item-text-title {
              font: normal normal 600 20px/27px Open Sans;
              color: #ffffff;
            }
            .cr-seo-6-content-1-right-item-text-desc {
              font: normal normal 500 14px/24px Open Sans;
              color: #eeeeee;
              margin-top: 14px;
            }
          }
        }
      }
    }
    .cr-seo-6-content-2 {
      width: 100%;
      max-width: 1200px;
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
      margin-top: 26px;
      .cr-seo-6-content-2-box {
        flex: 1;
        min-width: 300px;
        max-width: 380px;
        min-height: 287px;
        background: transparent
          linear-gradient(
            136deg,
            rgba(85, 80, 113, 0.22) 0%,
            rgba(42, 37, 42, 0.26) 100%
          )
          0% 0% no-repeat padding-box;
        border: 1px solid #ffffff4f;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 27px 23px 27px;
        box-sizing: border-box;
        & > img {
          width: 94px;
          height: 94px;
          margin-bottom: 11px;
        }
        .cr-seo-6-content-2-box-title {
          font: normal normal 600 20px/27px Open Sans;
          color: #ffffff;
          margin-bottom: 13px;
          text-align: center;
        }
        .cr-seo-6-content-2-box-desc {
          font: normal normal 500 14px/24px Open Sans;
          color: #eeeeee;
          text-align: center;
        }
        &.btn-box {
          justify-content: center;
          align-items: flex-start;
          padding-left: 36px;
          gap: 16px;
          .btn-box-title {
            font: normal normal 500 14px/24px Open Sans;
            color: #eeeeee;
            max-width: 282px;
          }
        }
      }
    }
  }
  .cr-seo-7 {
    width: 100%;
    min-height: 1626px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 122px;
    padding-bottom: 107px;
    box-sizing: border-box;
    background-color: #000000;
    position: relative;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    .bg-m {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;
      display: none;
    }
    .h2_1 {
      width: 100%;
      max-width: 786px;
      text-align: center;
      font: normal normal 600 34px/54px Open Sans;
      color: #ffffff;
      margin-bottom: 21px;
      position: relative;
      z-index: 1;
      margin-top: 0;
    }
    .cr-seo-7-desc {
      font: normal normal normal 16px/22px Open Sans;
      color: #dedede;
      text-align: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
    }
    .cr-seo-7-content-1 {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1622px;
      margin-top: 49px;
      display: flex;
      align-items: center;
      position: relative;
      .move-btn {
        display: none;
      }
      .cr-seo-7-content-move-box {
        width: 100%;
        .cr-seo-7-content-1-item-box {
          display: flex;
          gap: 30px;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
        }
      }
      .cr-seo-7-content-1-item {
        flex: 1;
        min-width: 300px;
        max-width: 383px;
        min-height: 279px;
        background: transparent
          linear-gradient(
            130deg,
            rgba(85, 80, 113, 0.4) 0%,
            rgba(42, 37, 42, 0.28) 100%
          )
          0% 0% no-repeat padding-box;
        border: 2px solid rgba(255, 255, 255, 0.31);
        border-radius: 12px;
        padding: 29px 0;
        box-sizing: border-box;
        .cr-seo-7-content-1-item-top {
          display: flex;
          align-items: center;
          padding-left: 9px;
          box-sizing: border-box;
          img {
            width: 118px;
            height: 112px;
          }
          .cr-seo-7-content-1-item-top-title {
            font: normal normal 600 20px/28px Open Sans;
            color: #ffffff;
          }
        }
        .cr-seo-7-content-1-item-bottom {
          margin-top: 12px;
          font: normal normal 300 16px/28px Open Sans;
          color: #eeeeee;
          padding: 0 34px;
          width: 100%;
          box-sizing: border-box;
        }
      }
    }
    .h2_2 {
      text-align: center;
      font: normal normal 600 34px/60px Open Sans;
      color: #ffffff;
      margin-top: 163px;
      margin-bottom: 44px;
      position: relative;
      z-index: 1;
    }
    .cr-seo-7-content-list {
      width: 100%;
      max-width: 1000px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      z-index: 1;
      .cr-seo-7-content-item {
        width: 100%;
        background: rgba(23, 16, 36, 1) 0% 0% no-repeat padding-box;
        border: 1px solid rgba(255, 255, 255, 0.31);
        border-radius: 8px;
        transition: all 0.3s ease;
        box-sizing: border-box;
        overflow: hidden;
        &.open {
          background: transparent
            linear-gradient(
              101deg,
              rgba(85, 80, 113, 0.46) 0%,
              rgba(42, 37, 42, 0.46) 100%
            )
            0% 0% no-repeat padding-box;
          border: 1px solid rgba(47, 40, 58, 0.71);
          .cr-seo-7-content-item-bottom {
            padding: 0 51px 37px 18px;
          }
          .cr-seo-7-content-item-top {
            &:hover {
              background-color: transparent;
              color: #fcfcfc;
              .add-icon {
                svg {
                  path {
                    fill: #fff;
                  }
                }
              }
            }
            .subtract-icon {
              display: block;
            }
            .add-icon {
              display: none;
            }
          }
        }
        .cr-seo-7-content-item-top {
          display: flex;
          width: 100%;
          min-height: 78px;
          align-items: flex-start;
          padding: 28px 34px 28px 21px;
          box-sizing: border-box;
          justify-content: space-between;
          font: normal normal 600 18px/24px Open Sans;
          color: #fcfcfc;
          cursor: pointer;
          .add-icon,
          .subtract-icon {
            width: 17px;
            height: 17px;
            svg {
              width: 100%;
              height: 100%;
            }
          }
          .subtract-icon {
            display: none;
          }
          &:hover {
            background-color: rgba(255, 255, 255, 1);
            color: #000000;
            .add-icon {
              svg {
                path {
                  fill: #000000;
                }
              }
            }
          }
        }
        .cr-seo-7-content-item-bottom {
          width: 100%;
          height: 0;
          padding: 0 51px 0 18px;
          overflow: hidden;
          box-sizing: border-box;
          font: normal normal 300 16px/25px Open Sans;
          color: #eeeeee;
          transition:
            height 0.3s ease,
            padding 0.3s ease;
        }
      }
    }
  }
  .cr-seo-8 {
    width: 100%;
    min-height: 389px;
    background: url(../images/can-i-run-it/cr-seo-8-bg.webp) no-repeat center
      center;
    background-size: cover;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 94px;
    box-sizing: border-box;
    h2 {
      width: 100%;
      max-width: 728px;
      text-align: center;
      font: normal normal 600 36px/50px Open Sans;
      color: #ffffff;
      margin-bottom: 34px;
      margin-top: 0;
    }
  }
  .mob-show {
    display: none;
  }
}

.top-bar {
  width: 100%;
  background: #0d0d0d 0% 0% no-repeat padding-box;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  height: 73px;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;

  &.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .top-bar-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .top-bar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      font: normal normal normal 16px/39px Open Sans;
      color: #ebebeb;
      .logo-img {
        width: 48px;
        height: 48px;
      }
    }
    .btn-free-download {
      min-width: 177px;
      width: 177px;
      height: 35px;
    }
  }
}
@media screen and (max-width: 768px) {
  .top-bar {
    display: none;
  }
  .pc-show {
    display: none !important;
  }
  .can-i-run-it-container {
    padding-top: 54px;
    .mob-show {
      display: flex;
    }
    .cr-header-container {
      min-height: 680px;
      background-image: url(../images/can-i-run-it/header-bg-m.webp);
      padding-top: 35px;
      .cr-header-content {
        padding-left: 0px;
        gap: 0;
        .cr-header-content-right {
          display: none;
        }
        .cr-header-content-left {
          width: 100%;
          max-width: 100%;
          padding-top: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          h1 {
            margin-top: 0;
            width: 90%;
            text-align: center;
            font-size: 26px;
            line-height: 35px;
            margin-bottom: 20px;
          }
          .cr-header-content-left-desc {
            width: 90%;
            text-align: center;
            font-size: 26px;
            line-height: 35px;
            margin-bottom: 20px;
          }
        }
      }
      .cr-header-list {
        margin-top: 50px;
        row-gap: 25px;
        column-gap: 18px;
        width: 90%;
        justify-content: center;
        .cr-header-item {
          width: 45%;
          min-height: 96px;
          padding-top: 12px;
          .cr-header-item-title {
            font-size: 24px;
            line-height: 32px;
          }
          .cr-header-item-desc {
            font-size: 12px;
            line-height: 18px;
          }
          .cr-header-item-desc-sub {
            font-size: 12px;
            line-height: 16px;
            margin-top: 6px;
          }
        }
      }
    }
    .btn-free-download {
      width: 75%;
      height: 55px;
      gap: 20px;
      font-size: 26px;
      line-height: 22px;
      border-radius: 2px;
      border-width: 1px;
      img {
        width: 21px;
        height: 20px;
      }
    }
    .cr-seo-1 {
      padding-top: 33px;
      padding-bottom: 66px;
      min-height: auto;
      h2 {

        text-align: center;
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 20px;
        margin-top: 0;
      }
      .cr-seo-1-content {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        .cr-seo-1-content-left {
          max-width: 90%;
          padding-left: 0;
          margin-top: 0;
          .btn-free-download {
            display: none;
          }
          .cr-seo-1-content-left-text {
            font-size: 16px;
            line-height: 32px;
            text-align: center;
            margin-bottom: 0;
          }
        }
        .cr-seo-1-content-right {
          width: 90%;
        }
      }
      & > .btn-free-download {
        margin-top: 35px;
      }
    }
    .cr-seo-2 {
      padding-top: 56px;
      padding-bottom: 42px;
      h2 {
        max-width: 90%;
        color: #f8f8f8;
        font-size: 26px;
        line-height: 42px;
        margin-top: 0;
        margin-bottom: 0;
      }
      .cr-seo-2-desc {
        width: 80%;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        margin-top: 27px;
        margin-bottom: 20px;
      }
      .cr-seo-2-content {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 38px;
        margin-top: 50px;
        .cr-seo-2-content-left {
          width: 100%;
          padding: 0 36px;
          box-sizing: border-box;
          gap: 12px;
          .cr-seo-2-content-left-number-list {
            .cr-seo-2-content-left-number-item-number {
              width: 36px;
              height: 36px;
              font-size: 14px;
            }
            .cr-seo-2-content-left-number-item-divider {
              height: 75px;
              border-width: 1;
            }
          }
          .cr-seo-2-content-left-text {
            .cr-seo-2-content-left-text-item {
              &.step-2 {
                margin-top: 36px;
              }
              &.step-3 {
                margin-top: 36px;
              }
              .cr-seo-2-content-left-text-item-title {
                font-size: 16px;
                line-height: 20px;
                margin-bottom: 8px;
              }
              .cr-seo-2-content-left-text-item-desc {
                width: 80%;
                font-size: 12px;
                line-height: 18px;
              }
            }
          }
        }
        .cr-seo-2-content-right {
          display: none;
        }
        .cr-seo-2-content-right-m {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 90%;
          height: auto;
          overflow: hidden;
          .cr-seo-2-content-right-m-img-list {
            display: flex;
            gap: 20px;
            width: 100%;
            align-self: flex-start;
            img {
              width: 100%;
              height: auto;
              flex-shrink: 0;
            }
          }
          .cr-seo-2-content-right-m-list-pointer {
            margin-top: 26px;
            gap: 6px;
            display: flex;
            .cr-seo-2-content-right-m-list-pointer-item {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #504d4d;
              cursor: pointer;
              &.active {
                background: #ff4040;
              }
            }
          }
        }
      }
    }
    .cr-seo-3 {
      width: 100%;
      min-height: 901px;
      background-image: url(../images/can-i-run-it/cr-seo-3-bg-m.webp);
      background-size: cover;
      flex-direction: column-reverse;
      padding-top: 55px;
      align-items: center;
      gap: 26px;
      .cr-seo-3-left {
        width: 90%;
        min-width: auto;
        max-width: 90%;
      }
      .cr-seo-3-right {
        width: 100%;
        max-width: 100%;
        padding: 0;
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        h2 {
          width: 90%;
          text-align: center;
          font-size: 26px;
          line-height: 39px;
          margin-bottom: 20px;
          margin-top: 0;
        }
        .cr-seo-3-right-desc {
          width: 90%;
          text-align: center;
          font-size: 16px;
          line-height: 29px;
          margin-bottom: 36px;
        }
        ul {
          margin-bottom: 36px;
          li {
            font-size: 14px;
            line-height: 28px;
            gap: 6px;
            &::before {
              width: 8px;
              height: 8px;
            }
          }
        }
      }
    }
    .cr-seo-4 {
      padding-top: 33px;
      padding-bottom: 26px;
      h2 {
        width: 90%;
        text-align: center;
        font-size: 26px;
        line-height: 42px;
        margin-bottom: 22px;
        margin-top: 0;
      }
      .cr-seo-4-desc {
        width: 90%;
        text-align: center;
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 20px;
      }
      .cr-seo-4-content-1 {
        width: 90%;
        min-height: auto;
        box-shadow: inset 8px 3px 34px #a14f8954;
        border-radius: 4px;
        margin-top: 36px;
        padding: 0 20px;
        padding-bottom: 56px;
        .cr-seo-4-content-1-title {
          margin-top: 38px;
          margin-bottom: 0;
          font-size: 18px;
          line-height: 24px;
          text-align: center;
        }
        .cr-seo-4-content-1-box-list {
          margin-top: 10px;
          margin-bottom: 0;
          width: 100%;
          flex-direction: column;
          gap: 36px;
          .cr-seo-4-content-1-box {
            width: 100%;
            img {
              margin-bottom: 0px;
            }
            .cr-seo-4-content-1-box-title {
              font-size: 16px;
              line-height: 22px;
              text-align: center;
            }
            .cr-seo-4-content-1-box-desc {
              margin-top: 10px;
              margin-bottom: 0px;
              font-size: 14px;
              line-height: 26px;
              text-align: center;
            }
          }
        }
      }
      .cr-seo-4-content-2 {
        margin-top: 28px;
        flex-direction: column;
        width: 90%;
        gap: 24px;
        .cr-seo-4-content-2-box {
          width: 100%;
          min-height: auto;
          padding: 38px 20px;
          .cr-seo-4-content-2-box-title {
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            margin-bottom: 8px;
          }
          img {
            width: 90%;
            margin-bottom: 10px;
          }
          .cr-seo-4-content-2-box-desc {
            font-size: 14px;
            line-height: 26px;
            text-align: center;
            margin-bottom: 0rem;
          }
        }
      }
    }
    .cr-seo-5 {
      padding-top: 0;
      padding-bottom: 64px;
      h2 {
        width: 90%;
        text-align: center;
        font-size: 26px;
        line-height: 42px;
        margin-bottom: 16px;
        margin-top: 0;
      }
      .cr-seo-5-desc {
        width: 90%;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 26px;
      }
      .cr-seo-5-content {
        display: none;
        .cr-seo-5-content-list {
          cursor: default;
          will-change: auto;
          transform: none !important;
        }
      }
      .cr-seo-5-content-m {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
        width: 100%;
        overflow: hidden;
        .cr-seo-5-content-m-list {
          width: 100%;
          display: flex;
          gap: 12px;
          img {
            width: 82px;
            height: auto;
            flex-shrink: 0;
          }
          &.list-2 {
            transform: translateX(-30px);
          }
          &.list-1 {
            transform: translateX(9px);
          }
        }
      }
    }
    .cr-seo-6 {
      padding-top: 48px;
      padding-bottom: 78px;
      h2 {
        width: 90%;
        text-align: center;
        font-size: 26px;
        line-height: 42px;
        margin-bottom:22px;
        margin-top: 0;
      }
      .cr-seo-6-desc {
        width: 90%;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 20px;
      }
      .cr-seo-6-content-1 {
        width: 90%;
        flex-direction: column;
        gap: 29px;
        margin-top: 6px;
        .cr-seo-6-content-1-left {
          width: 100%;
          max-width: 100%;
          padding: 29px 16px 26px 16px;
          border-radius: 8px;
          border-width: 1px;
          img {
            width: 100%;
            height: auto;
            margin: 0;
          }
          .cr-seo-6-content-1-left-title {
            margin-top: 24px;
            font-size: 18px;
            line-height: 26px;
            text-align: center;
            margin-bottom: 12px;
          }
          .cr-seo-6-content-1-left-desc {
            font-size: 16px;
            line-height: 26px;
            text-align: center;
            margin-bottom: 0rem;
          }
        }
        .cr-seo-6-content-1-right {
          width: 100%;
          gap: 30px;
          flex-direction: column;
          min-width: 90%;
          .cr-seo-6-content-1-right-item {
            width: 100%;
            min-height: auto;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            padding: 24px 10px 32px 10px;
            box-sizing: border-box;
            border-radius: 8px;
            border-width: 1px;
            img {
              width: 88px;
              height: 88px;
            }
            .cr-seo-6-content-1-right-item-text {
              width: 100%;
              .cr-seo-6-content-1-right-item-text-title {
                font-size: 18px;
                line-height: 26px;
                text-align: center;
                margin-bottom: 12px;
                margin-top: 0;
              }
              .cr-seo-6-content-1-right-item-text-desc {
                font-size: 16px;
                line-height: 26px;
                text-align: center;
                margin-bottom: 0rem;
              }
            }
          }
        }
      }
      .cr-seo-6-content-2 {
        margin-top: 30px;
        width: 90%;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        .cr-seo-6-content-2-box {
          width: 100%;
          min-height: auto;
          flex-direction: column;
          align-items: center;
          padding: 24px 10px 32px 10px;
          box-sizing: border-box;
          border-radius: 8px;
          border-width: 1px;
          & > img {
            width: 80px;
            height: 80px;
            margin-bottom: 18px;
          }
          .cr-seo-6-content-2-box-title {
            margin-top: 0;
            font-size: 18px;
            line-height: 26px;
            text-align: center;
            margin-bottom: 12px;
          }
          .cr-seo-6-content-2-box-desc {
            font-size: 16px;
            line-height: 26px;
            text-align: center;
            margin-bottom: 0rem;
          }
          &.btn-box {
            padding: 40px 34px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            border-radius: 8px;
            border-width: 1px;
            .btn-box-title {
              width: 100%;
              font-size: 26px;
              line-height: 32px;
              text-align: center;
            }
          }
        }
      }
    }
    .cr-seo-7 {
      padding-top: 32px;
      padding-bottom: 85px;
      min-height: auto;
      .bg {
        display: none;
      }
      .bg-m {
        display: block;
      }
      .h2_1 {
        width: 90%;
        text-align: center;
        font-size: 26px;
        line-height: 42px;
        margin-bottom: 22px;
        margin-top: 0;
      }
      .cr-seo-7-desc {
        width: 90%;
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 20px;
      }
      .cr-seo-7-content-1 {
        margin-top: 60px;
        width: 90%;
        .move-btn {
          display: flex;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: #5e5c5c 0% 0% no-repeat padding-box;
          position: absolute;
          z-index: 1;
          align-items: center;
          justify-content: center;
          img {
            width: 8px;
            height: 15px;
          }
          &.active {
            background: #ff2a1c 0% 0% no-repeat padding-box;
          }
          &.left {
            left: -18px;
            img {
              transform: rotate(180deg);
            }
          }
          &.right {
            right: -18px;
          }
        }
        .cr-seo-7-content-move-box {
          overflow: hidden;
          .cr-seo-7-content-1-item-box {
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 36px;
            .cr-seo-7-content-1-item {
              width: 90%;
              min-height: auto;
              max-width: 90%;
              flex: none;
              border-width: 1px;
              padding-top: 12px;
              padding-bottom: 24px;
              .cr-seo-7-content-1-item-top {
                padding-left: 20px;
                gap: 5px;
                img {
                  width: 75px;
                  height: 72px;
                }
                .cr-seo-7-content-1-item-top-title {
                  font-size: 18px;
                }
              }
              .cr-seo-7-content-1-item-bottom {
                margin-top: 10px;
                padding-left: 30px;
                padding-right: 35px;
                font-size: 16px;
                line-height: 26px;
              }
            }
          }
        }
      }
      .h2_2 {
        width: 90%;
        text-align: center;
        font-size: 26px;
        line-height: 42px;
        margin-bottom: 26px;
        margin-top: 84px;
      }
      .cr-seo-7-content-list {
        width: 90%;
        gap: 9px;
        .cr-seo-7-content-item {
          border-radius: 8px;
          border-width: 2px;
          &.open {
            .cr-seo-7-content-item-bottom {
              padding: 0 62px 36px 20px;
            }
          }
          .cr-seo-7-content-item-top {
            min-height: 80px;
            padding-left: 20px;
            padding-right: 26px;
            padding-top: 18px;
            padding-bottom: 12px;
            font-size: 16px;
            line-height: 22px;
            &:hover {
              background-color: transparent;
              color: #ffffff;
              .add-icon {
                svg {
                  path {
                    fill: #ffffff;
                  }
                }
              }
            }
            .add-icon {
              width: 15px;
              height: 15px;
            }
            .subtract-icon {
              width: 15px;
              height: 15px;
            }
          }
          .cr-seo-7-content-item-bottom {
            padding: 0 1.06rem 0 20px;
            font-size: 12px;
            line-height: 24px;
          }
        }
      }
    }
    .cr-seo-8 {
      min-height: 380px;
      padding-top: 95px;
      background-image: url(../images/can-i-run-it/cr-seo-8-bg-m.webp);
      h2 {
        width: 90%;
        text-align: center;
        font-size: 26px;
        line-height: 42px;
        margin-bottom: 45px;
        margin-top: 0;
      }
    }
  }
}
.scroll-show-wrapper > .scroll-show-up {
  opacity: 0;
  transform: translate3d(0, 50%, 0);
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.scroll-show-wrapper.is-in > .scroll-show-up {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.scroll-show-self.scroll-show-up {
  opacity: 0;
  transform: translate3d(0, 200px, 0);
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.scroll-show-self.scroll-show-up.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.scroll-show-delay1 {
  transition-delay: 0.1s;
}
.scroll-show-delay2 {
  transition-delay: 0.2s;
}
.scroll-show-delay3 {
  transition-delay: 0.3s;
}
.scroll-show-delay4 {
  transition-delay: 0.4s;
}
.scroll-show-delay5 {
  transition-delay: 0.5s;
}
.scroll-show-delay6 {
  transition-delay: 0.6s;
}
.scroll-show-delay7 {
  transition-delay: 0.7s;
}
.scroll-show-delay8 {
  transition-delay: 0.8s;
}
.scroll-show-delay9 {
  transition-delay: 0.9s;
}
.scroll-show-delay10 {
  transition-delay: 1s;
}