.sys-os a {
  display: flex;
}

.sys-os a:hover,
.sys-os a:hover,
.sys-os a.active,
.sys-os a.active {
  color: #11B1FF;
}

main .swiper-pagination {
  width: max-content !important;
  padding: 8px 16px;
  border-radius: 36px;
  margin: 24px auto 0;
  background: #878B8D66;
}

main .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  opacity: 0.5;
}

main .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 17px;
  opacity: 1;
}

.btn .arrow {
  width: 28px;
  height: 130px;
  overflow: hidden;
  background: url(https://4ddig.tenorshare.com/images/v2/product/windows-data-recovery-v2/download-arrow.png) 0 0px no-repeat;
  margin-right: 14px;
  transform: translate(0, -52px);
  background-size: 100%;
  transition: transform linear 400ms;
}

.btn.btn-white .arrow {
  background: url(https://4ddig.tenorshare.com/images/v2/product/windows-data-recovery-v2/download-arrow2.png) 0 0px no-repeat;
  height: 134px;
  background-size: 100%;
}

.btn .arrow.arrow-rgt {
  margin-right: 0;
  margin-left: 14px;
}

.btn .arrow.download-arrow {
  width: 28px;
  height: 134px;
  background: url(https://4ddig.tenorshare.com/images/v2/download-arrow2.png) 0 0px no-repeat;
  background-size: 100%;
}

.btn .arrow.win-arrow {
  width: 28px;
  height: 134px;
  background: url(https://4ddig.tenorshare.com/images/v2/win-arrow.png) 0 0px no-repeat;
  background-size: 100%;
}

.btn .arrow.mac-arrow {
  width: 28px;
  height: 134px;
  background: url(https://4ddig.tenorshare.com/images/v2/mac-arrow.png) 0 0px no-repeat;
  background-size: 100%;
}

.btn:hover .arrow {
  transform: translate(0, 50px);
}

.section-1 {
  padding: 182px 0;
  overflow: hidden;
  background: linear-gradient(283.27deg, #93C7FF -0.22%, #E8F3FF 103.84%);
}

.section-1 .lft {
  max-width: 638px;
}

.section-1 .rgt {
  width: 904px;
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translate(0, -50%);
}

.section-1 .rgt .move-icon {
  position: absolute;
  offset-path: path("M 800 260 Q 450 -20 222 220");
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  animation: fly 12s linear infinite;
  left: 0;
}

.section-1 .rgt .move-icon.i1 {
  animation-delay: 0s;
}

.section-1 .rgt .move-icon.i2 {
  animation-delay: .8s;
}

.section-1 .rgt .move-icon.i3 {
  animation-delay: 1.6s;
}

.section-1 .rgt .move-icon.i4 {
  animation-delay: 2.4s;
}

.section-1 .rgt .move-icon.i5 {
  animation-delay: 3.2s;
}

.section-1 .rgt .move-icon.i6 {
  animation-delay: 4.0s;
}

.section-1 .rgt .move-icon.i7 {
  animation-delay: 4.8s;
}

.section-1 .rgt .move-icon.i8 {
  animation-delay: 5.6s;
}

@keyframes fly {
  0% {
    offset-distance: 0%;
    opacity: 0;
    transform: scale(1);
  }

  10% {
    opacity: 1;
  }

  40% {
    offset-distance: 100%;
    opacity: 1;
  }

  41% {
    opacity: 0;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.section-1 .popup-video-group {
  width: max-content;
  z-index: 2;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}

.modal-content {
  border: 0 !important;
}

.section-1 .popup-video-group .more {
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}

.section-1 .popup-video-group .more span {
  display: inline-block;
  transition: transform linear .25s;
}

.section-1 .popup-video-group .more:hover {
  border-bottom: 1px solid #0462F0;
}

.section-1 .popup-video-group .more:hover span {
  transform: translate(5px);
}

@media (min-width :992px) {
  .section-1 a.btn {
    min-width: 250px;
    justify-content: center;
  }
}

@media (max-width :1599.98px) {
  .section-1 {
    padding: 140px 0;
  }

  .section-1 .rgt {
    width: 700px;
    right: -50px;
  }

  .section-1 .rgt .move-icon {
    width: 48px;
    offset-path: path("M 600 200 Q 350 -20 182 170");
  }

  .section-1 .rgt .move-icon.i4 {
    width: 80px;
  }

  .section-1 .rgt .move-icon.i8 {
    width: 40px;
  }
}

@media (max-width :1279.98px) {
  .section-1 {
    padding: 100px 0;
  }

  .section-1 .rgt {
    position: relative;
    top: auto;
    right: auto;
    transform: unset;
  }
}

@media (max-width :991.98px) {
  .section-1 {
    padding: 98px 0 60px;
  }
}

@media (max-width :767.98px) {
  .section-1 .container {
    padding: 0;
  }

  .section-1 .lft {
    padding: 0 16px;
  }

  .section-1 .rgt {
    width: 375px;
  }

  .section-1 .rgt .move-icon {
    width: 26px;
    offset-path: path("M 340 130 Q 200 -20 100 90");
  }

  .section-1 .rgt .move-icon.i4 {
    width: 45px;
  }

  .section-1 .rgt .move-icon.i8 {
    width: 21px;
  }

  .section-1 .popup-video-group .more {
    font-size: 14px;
  }
}

.section-2 {
  padding: 96px 0;
}

.section-2 .cell {
  gap: 96px;
}

.section-2 .cell:not(:last-child) {
  margin-bottom: 96px;
}

.section-2 .cell>img {
  border-radius: 24px;
}

.section-2 .cell .txt {
  max-width: 589px;
  padding-left: 56px;
}

.section-2 .cell .txt h4 {
  font-size: 36px;
  position: relative;
}

.section-2 .cell .txt h4::before {
  content: '';
  position: absolute;
  left: -56px;
  top: 0;
  width: 40px;
  height: 40px;
}

.section-2 .cell .txt h4.correct::before {
  background: url(https://4ddig.tenorshare.com/images/thematic-page/recover-deleted-files/sec2-icon-corect.png) no-repeat center center;
  background-size: 100% 100%;
}

.section-2 .cell .txt h4.warn::before {
  background: url(https://4ddig.tenorshare.com/images/thematic-page/recover-deleted-files/sec2-icon-warn.png) no-repeat center center;
  background-size: 100% 100%;
}

.section-2 .cell .txt h4.wron::before {
  background: url(https://4ddig.tenorshare.com/images/thematic-page/recover-deleted-files/sec2-icon-wron.png) no-repeat center center;
  background-size: 100% 100%;
}

.section-2 .cell .txt h4.correct span {
  color: #07B542;
}

.section-2 .cell .txt h4.warn span {
  color: #FF781F;
}

.section-2 .cell .txt h4.wron span {
  color: #FF1100;
}

.section-2 .cell .txt p {
  font-size: 18px;
  color: #2D2D2D;
}

@media (max-width: 1599.98px) {
  .section-2 .cell {
    gap: 44px
  }

  .section-2 .cell>img {
    width: 600px;
  }

  .section-2 .cell .txt {
    max-width: 556px;
  }

  .section-2 .cell:not(:last-child) {
    margin-bottom: 80px;
  }
}

@media (max-width: 1279.98px) {
  .section-2 .cell {
    gap: 24px;
  }

  .section-2 .cell .txt {
    max-width: 100%;
    padding-left: 0;
  }

  .section-2 .cell .txt h4 {
    padding-left: 48px;
  }

  .section-2 .cell .txt h4::before {
    left: 0;
  }

  .section-2 .cell .txt p {
    text-align: center;
  }

  .section-2 .cell>img {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .section-2 {
    padding: 48px 0 64px;
  }

  .section-2 .cell:not(:last-child) {
    margin-bottom: 32px;
  }

  .section-2 .cell .txt h4 {
    font-size: 24px;
  }

  .section-2 .cell .txt h4::before {
    width: 32px;
    height: 32px;
  }

  .section-2 .cell .txt p {
    font-size: 16px;
  }

  .section-2 .cell>img {
    border-radius: 16px;
  }
}

.section-3 {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(4, 98, 240, 0.07) 0%, rgba(4, 98, 240, 0.035) 103.41%);
}

.section-3 .swiper-wrapper {
  gap: 32px 0;
}

.section-3 .swiper-slide {
  height: auto;
  width: calc(33.3% - 20px);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}

.section-3 .swiper-slide .cont {
  padding: 32px 28px;
}

@media (max-width: 1279.98px) {
  .section-3 .swiper-slide {
    width: calc(33.3% - 16px);
  }

  .section-3 .swiper-slide .cont {
    padding: 28px 24px;
  }

  .section-3 .swiper-slide .cont p {
    font-size: 14px;
  }
}

@media (max-width: 991.98px) {
  .section-3 {
    padding: 40px 0;
  }

  .section-3 .swiper-slide {
    width: 100%;
  }

  .section-3 .swiper-slide .cont {
    text-align: center;
  }
}

.section-4 {
  padding: 96px 0;
}

.section-4 .title-text {
  max-width: 982px;
  margin: 0 auto 40px;
}

.section-4 .swiper-slide {
  width: 340px;
  height: auto;
  border-radius: 13px;
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(4, 98, 240, 0.07), rgba(4, 98, 240, 0.07)),
    linear-gradient(0deg, #FFFFFF, #FFFFFF);
  display: flex;
  flex-direction: column;
}

.section-4 .img-box .met {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 10px;
  border-radius: 32px;
  background: #001D6C99;
  backdrop-filter: blur(6px);
  color: #fff;
}

.section-4 .cont {
  height: 100%;
  padding: 28px;
}

.section-4 .cont .tit {
  min-height: 52px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.section-4 .cont .desc {
  font-size: 14px;
  color: #2D2D2D;
}

.section-4 .cont ul.pros {
  min-height: 113px;
}

.section-4 .cont ul.cons {
  min-height: 69px;
}

.section-4 .cont ul li {
  padding-left: 24px;
  font-size: 14px;
  position: relative;
  color: #2D2D2D;
}

.section-4 .cont ul li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 50%;
}

.section-4 .swiper-button {
  width: max-content;
  gap: 24px;
  margin: 40px auto 0;
}

.section-4 .swiper-button-prev,
.section-4 .swiper-button-next {
  position: static;
  width: 64px;
  height: 64px;
  background: #D9D9D9;
  color: #2D2D2D;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-top: 0;
}

.section-4 .swiper-button-prev:not(.swiper-button-disabled):hover,
.section-4 .swiper-button-next:not(.swiper-button-disabled):hover {
  background: #0462F0;
  color: #FFFFFF;
}

.section-4 .swiper-button-prev:after,
.section-4 .swiper-button-next:after {
  display: none;
}

@media (max-width: 991.98px) {
  .section-4 {
    padding: 64px 0;
  }

  .section-4 .title-text {
    margin: 0 auto 32px;
  }

  .section-4 .img-box .met {
    font-size: 12px;
  }
}

.section-5 {
  padding: 80px 0;
  background: #0462F012;
}

.section-5 .title-text {
  max-width: 1060px;
  margin-bottom: 64px;
}

.section-5 .guide-list {
  max-width: 552px;
}

.section-5 .guide-list .swiper-slide {
  position: relative;
  opacity: 0.4;
  cursor: pointer;
  padding-left: 32px;
}

.section-5 .guide-list .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

.section-5 .guide-list .swiper-slide:not(:last-child) {
  margin-bottom: 64px;
}

.section-5 .guide-list .swiper-slide .progress-bar {
  position: absolute;
  width: 6px;
  height: 100%;
  left: 0;
  top: 0;
  background: #D9D9D9;
}

.section-5 .guide-list .swiper-slide .progress-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: transparent;
}

.section-5 .guide-list .swiper-slide.swiper-slide-thumb-active .progress-bar::before {
  transition: height 3s ease;
  background: linear-gradient(180deg, #0462F0 0%, #00F497 100%);
  height: 100%;
}

.section-5 .guide-list .swiper-slide .text .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.section-5 .guide-list .swiper-slide .text .p-text {
  margin-top: 16px;
  color: #2D2D2D;
}

.section-5 .guide-pic {
  max-width: 810px;
  position: relative;
}

.section-5 .guide-pic .swiper-slide {
  border: 4px solid #0462F0;
  border-radius: 22px;
  overflow: hidden;
}

@media (max-width: 1599.98px) {
  .section-5 .guide-pic {
    max-width: 600px;
  }

  .section-5 .title-text {
    margin-bottom: 48px;
  }

  .section-5 .guide-list .swiper-slide:not(:last-child) {
    margin-bottom: 32px;
  }
}

@media (max-width: 1279.98px) {
  .section-5 .title-text {
    margin-bottom: 24px;
  }

  .section-5 .guide-pic {
    max-width: 100%;
  }

  .section-5 .guide-list {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
  }

  .section-5 .guide-list .swiper-slide {
    padding-left: 24px;
  }

  .section-5 .guide-list .swiper-slide .progress-bar {
    width: 5px;
  }

  .section-5 .guide-list .swiper-slide .text .p-text {
    display: none;
  }

  .section-5 .guide-list .swiper-slide.swiper-slide-thumb-active .p-text {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .section-5 {
    padding: 40px 0;
  }

  .section-5 .title-text p {
    font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  .section-5 .title-text p span {
    font-size: 16px;
  }

  .section-5 .guide-pic {
    max-width: 100%;
  }

  .section-5 .guide-pic .swiper-slide {
    border: 2px solid #0462F0;
    border-radius: 16px;
  }

  .section-5 .guide-list .swiper-slide .text .title {
    font-size: 20px;
  }

  .section-5 .guide-list .swiper-slide .text .p-text {
    font-size: 14px;
  }
}

.section-6 {
  padding: 96px 0 120px;
}

.section-6 .conts {
  max-height: 500px;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(4, 98, 240, 0.1) 0%, rgba(17, 177, 255, 0.1) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  gap: 32px 48px;
}

.section-6 .conts .cont {
  width: calc(50% - 24px);
}

.section-6 .cont .tit {
  font-size: 18px;
  font-weight: 700;
  display: block;
}

.section-6 .cont .desc {
  color: #2D2D2D;
  min-height: 78px;
}

@media (max-width: 1599.98px) {
  .section-6 {
    padding: 80px 0;
  }
}

@media (max-width: 1279.98px) {
  .section-6 .conts {
    max-height: 600px;
  }
}

@media (max-width: 991.98px) {
  .section-6 {
    padding: 64px 0;
  }

  .section-6 .conts {
    max-height: unset;
    padding: 24px 20px;
    background: linear-gradient(75deg, rgba(4, 98, 240, 0.1) 0%, rgba(17, 177, 255, 0.1) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
  }

  .section-6 .conts .cont {
    width: 100%;
  }

  .section-6 .cont .tit {
    font-size: 16px;
  }

  .section-6 .cont .desc {
    min-height: unset;
  }
}

.section-7 {
  padding: 0 0 120px;
}

.section-7 .accordion-item {
  padding: 24px;
  border-radius: 14px !important;
  background: transparent;
}

.section-7 .accordion-item .accordion-button {
  background-color: transparent;
  color: rgba(0, 0, 0, 1);
  font-size: 20px !important;
  padding: 0 !important;
}

.section-7 .accordion-item .accordion-button::after {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.00029 14.0003L15.2929 22.2929C15.6834 22.6834 16.3166 22.6834 16.7071 22.2929L24.9997 14.0003" stroke="%232D2D2D" stroke-opacity="1" stroke-width="2.66667" stroke-linecap="round"/></svg>') !important;
  background-size: 100% !important;
}

.section-7 .accordion-item .accordion-button:not(.collapsed) {
  color: #0462F0 !important;
}

.section-7 .accordion-item .accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.00029 14.0003L15.2929 22.2929C15.6834 22.6834 16.3166 22.6834 16.7071 22.2929L24.9997 14.0003" stroke="%230462F0" stroke-opacity="1" stroke-width="2.66667" stroke-linecap="round"/></svg>') !important;
  -webkit-transform: rotate(-180deg) !important;
  transform: rotate(-180deg) !important;
}

.section-7 .accordion-item .accordion-body {
  max-width: 1071px;
}

.section-7 .accordion-item .accordion-body p {
  color: #2D2D2D;
}

@media (min-width: 1280px) {
  .section-7 .container {
    max-width: 1200px;
    padding: 0;
  }

  .section-7 .accordion-item {
    padding: 32px;
  }

  .section-7 .accordion-item .accordion-button::after {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 1599.98px) {
  .section-7 {
    padding: 0 0 100px;
  }
}

@media (max-width: 991.98px) {
  .section-7 {
    padding: 0 0 64px;
  }

  .section-7 .accordion-item .accordion-body p {
    font-size: 14px;
  }
}

.section-8 {
  padding: 0 0 132px;
}

.section-8 .item {
  padding: 60px 0;
  background: url(https://4ddig.tenorshare.com/images/thematic-page/hard-drive/bottom-banner-bg.png) no-repeat center center;
  background-size: cover;
  border-radius: 48px;
}

.section-8 .item .cont {
  color: #fff;
}

.section-8 .item .cont h2 {
  font-size: 36px;
}

.section-8 .item .labels {
  gap: 32px;
  margin-top: 45px;
}

.section-8 .item .label {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (min-width: 992px) {
  .section-8 .item a.btn {
    min-width: 250px;
    justify-content: center;
  }
}

@media (max-width: 1599.98px) {
  .section-8 {
    padding: 0 0 100px;
  }

  .section-8 .item {
    background: url(https://4ddig.tenorshare.com/images/thematic-page/hard-drive/bottom-banner-bg-1366.png) no-repeat center center;
    background-size: cover;
  }
}

@media (max-width: 991.98px) {
  .section-8 {
    padding: 0 0 60px;
  }

  .section-8 .item {
    padding: 32px 16px;
    background: url(https://4ddig.tenorshare.com/images/thematic-page/hard-drive/bottom-banner-bg-mobile.png) no-repeat center center;
    background-size: cover;
    border-radius: 24px;
  }

  .section-8 .item .cont .logo {
    width: 64px;
  }

  .section-8 .item .cont h2 {
    font-size: 26px;
  }

  .section-8 .item .labels {
    margin-top: 17px;
    gap: 8px;
    padding-left: 18px;
  }

  .section-8 .item .label {
    font-size: 14px;
  }
}