a {
  box-sizing: border-box;
  color: #2ad9c2;
}
.system-button-group {
  display: none;
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.single-button {
  font-size: 16px;
  border-radius: 6px;
  color: #fff;
  background-color: #6f3fc5;
  font-weight: 600;
  padding: 10px 20px;
  transition: all 0.3s;
  font-weight: 500;
  border-radius: 30px;
}
.single-button:hover {
  background-color: #5c2cb3;
}
.single-button.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.single-button.has-icon .iconfont {
  font-size: 20px;
}
.single-button.has-icon:hover {
  transform: translateY(-8px);
}
.wrap-h2 {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.common-sticky-nav {
  background: #ffffff;
  padding: 14px 0;
  box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.13);
}
.common-sticky-nav.fixed {
  position: fixed;
  left: 0;
  top: 0px;
  width: 100%;
  z-index: 9;
}
.common-sticky-nav .flex-wrapper {
  justify-content: space-between;
}
.common-sticky-nav .sticky-nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 60%;
}
.common-sticky-nav .sticky-nav-item.active .sticky-nav-link {
  color: #6f3fc5;
}
.common-sticky-nav .sticky-nav-link {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.common-sticky-nav .sticky-nav-link:hover {
  color: #6f3fc5;
}
.common-sticky-nav .single-button {
  font-size: 18px;
  border-radius: 6px;
  color: #fff;
  background-color: #6f3fc5;
  font-weight: 600;
  padding: 12px 20px;
  transition: all 0.3s;
}
.common-sticky-nav .single-button:hover {
  background-color: #5c2cb3;
}
.common-sticky-nav .single-button.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.common-sticky-nav .single-button.has-icon .iconfont {
  font-size: 20px;
}
.common-sticky-nav .single-button.has-icon:hover {
  transform: translateY(-8px);
}
.common-sticky-nav .system-button-group {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
@media screen and (max-width: 1140px) {
  .common-sticky-nav .flex-wrapper {
    justify-content: center;
    gap: 30px;
  }
  .common-sticky-nav {
    padding: 20px 0;
  }
  .common-sticky-nav .pc-style {
    display: none;
  }
  .common-sticky-nav .mobile-style {
    display: block;
  }
  .common-sticky-nav .system-button-group {
    display: none;
  }
  .common-sticky-nav .mobile-sticky-wrapper {
    text-align: right;
  }
  .common-sticky-nav .mobile-sticky-wrapper .iconfont {
    font-size: 24px;
  }
  .common-sticky-nav .sticky-nav-list {
    margin-top: 5px;
    flex-direction: column;
    flex: unset;
    display: none;
  }
  .common-sticky-nav .sticky-nav-item {
    text-align: center;
    padding: 10px 0;
  }
  .common-sticky-nav .sticky-nav-item:hover,
  .common-sticky-nav .sticky-nav-item.active {
    background-color: #55595c;
  }
  .common-sticky-nav .sticky-nav-item:hover .sticky-nav-link,
  .common-sticky-nav .sticky-nav-item.active .sticky-nav-link {
    color: #fff;
  }
  .common-sticky-nav .sticky-nav-link {
    color: #494c4f;
  }
  .common-sticky-nav .sticky-nav-link:hover {
    color: unset;
  }
}
.switchover_button {
  width: 155px;
  height: 30px;
  border-radius: 30px;
  background-color: #6f727d;
  justify-content: center;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin-left: 57px;
  margin-bottom: 0px;
  margin-top: 20px;
}
.switchover_button_2 {
  margin-left: 228px;
}
.switchover_button_box {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  z-index: 2;
}
.switchover_button_win,
.switchover_button_mac,
.switchover_button_win_mobile,
.switchover_button_mac_mobile {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex: 1;
}
.switchover_button_win_text,
.switchover_button_mac_text {
  font-size: 13px;
  color: black;
  margin-bottom: 2px;
}
.shade {
  position: absolute;
  width: 50%;
  height: 78%;
  top: 3px;
  left: 3px;
  border-radius: 30px;
  background-color: white;
  z-index: 1;
}
.shade_mobile {
  position: absolute;
  width: 50%;
  height: 95%;
  top: 1px;
  left: 1px;
  border-radius: 30px;
  background-color: white;
  z-index: 1;
}
.download_box {
  cursor: pointer;
}
.post-tags .tag-links {
  display: none;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: none;
}
#nav {
  display: none;
}
.part-1 {
  background-color: #060030;
  background-image: url(../../img/screen-recorder/part-1-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  padding: 100px 0;
  position: relative;
}
.part-1::before {
  content: '';
  height: 100%;
  width: 100%;
  top: 18%;
  left: 0;
  position: absolute;
  background-image: url(../../img/screen-recorder/part-1-bgs.png);
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .part-1 {
    padding: 80px 0;
  }
}
.part-h1 {
  font-size: 47px;
  font-weight: bold;
  color: #FFAD5C;
  line-height: 1.2;
  text-align: center;
}
.part-h2 {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}
.part-h2.mg-t {
  margin: 50px auto 0;
}
.part-ul {
  margin: 40px auto 0;
  padding-left: 13vw;
}
.part-li {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 2;
  position: relative;
  padding: 2px 0 2px 30px;
  text-align: center;
  display: inline-block;
}
.part-li::before {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #8f6ee4;
  top: 13px;
}
.part-review {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 30px 0 20px;
  justify-content: center;
}
.part-review-info {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}
.part-review-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.part-review-stars .iconfont {
  font-size: 16px;
  color: #ced6ed;
  position: relative;
}
.part-review-stars .iconfont::after {
  content: '\e63e';
  display: block;
  font-size: inherit;
  font-family: inherit;
  position: absolute;
  overflow: hidden;
  color: #f0ad4e;
  top: 0;
  left: 0;
  width: 100%;
}
.part-review-stars .iconfont.per::after {
  width: 70%;
}
@media screen and (max-width: 768px) {
  .part-h2 {
    margin: 20px auto 0;
  }
  .part-h2.mg-t {
    margin: 50px auto 0;
  }
  .part-ul {
    margin: 40px auto 0;
    padding-left: 0;
  }
  .part-li {
    text-align: left;
  }
  .part-review {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 30px 0 20px;
    justify-content: center;
  }
  .part-review-info {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
  }
  .part-review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .part-review-stars .iconfont {
    font-size: 16px;
    color: #ced6ed;
    position: relative;
  }
  .part-review-stars .iconfont::after {
    content: '\e63e';
    display: block;
    font-size: inherit;
    font-family: inherit;
    position: absolute;
    overflow: hidden;
    color: #f0ad4e;
    top: 0;
    left: 0;
    width: 100%;
  }
  .part-review-stars .iconfont.per::after {
    width: 70%;
  }
}
.gif-box {
  display: flex;
  justify-content: space-evenly;
  gap: 60px;
  flex-wrap: wrap;
  margin: 70px 0 100px;
}
.gif-box-item {
  padding: 16px;
  background-color: transparent;
  background-image: linear-gradient(180deg, #9b90e3 0%, #443b7d 100%);
  border-radius: 15px;
  max-width: 284px;
}
.gif-box-item-title {
  font-size: 25px;
  font-weight: bold;
  color: #FFFFFF;
  margin: 20px 0;
  text-align: center;
}
.gif-box-item-info {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.5;
  min-height: 105px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .gif-box {
    margin: 70px 0 80px;
  }
}
.wrapper-1 {
  position: relative;
  z-index: 2;
}
.wrapper-1 .button {
  margin-bottom: 37px;
}
.wrapper-1 .button .item {
  display: flex;
  justify-content: center;
}
.wrapper-1 .button .item .btn {
  background: #ffffff;
  border-radius: 64px;
  transition: transform 0.3s;
}
.wrapper-1 .button .item .btn:hover {
  transform: scale(1.1);
}
.wrapper-1 .button .item .btn a {
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 21px 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.wrapper-1 .button .item .dow span i{
  font-style: normal;
}
.wrapper-1 .button .item .btn a img {
  margin-right: 13px;
}
.wrapper-1 .button .item .dow {
  background: #7935f4;
}
.wrapper-1 .button .item .dow span {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
}
.wrapper-1 .button .item .dow span i {
  color: #ffffff;
}
.wrapper-1 .button .item .dow span i:last-child {
  font-weight: 400;
  font-size: 12px;
  line-height: 11px;
  color: #ffffff;
  transform: translateX(-3px) scale(0.95);
}
.wrapper-1 .button .item .buy {
  margin-left: 50px;
}
.wrapper-1 .button .item .buy span {
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: #7935f4;
}
.wrapper-1 .switch {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.wrapper-1 .switch .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 166%;
  color: #efefef;
  margin-right: 18px;
}
.wrapper-1 .switch .icon {
  display: flex;
  align-items: center;
}
.wrapper-1 .switch .icon .win-box {
  width: 24px;
  height: 26px;
  background: url('/uploads/48/d/win.png') no-repeat 100%/100%;
  margin-right: 24px;
  cursor: pointer;
}
.wrapper-1 .switch .icon .win-box.active {
  background: url('/uploads/48/d/win-hover.png') no-repeat 100%/100%;
}
.wrapper-1 .switch .icon .mac-box {
  width: 23px;
  height: 28px;
  background: url('/uploads/48/d/mac.png') no-repeat 100%/100%;
  cursor: pointer;
}
.wrapper-1 .switch .icon .mac-box.active {
  background: url('/uploads/48/d/mac-hover.png') no-repeat 100%/100%;
}
.wrapper-1 .video {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper-1 .video .text {
  display: flex;
  align-items: center;
}
.wrapper-1 .video .text a {
  color: #efefef;
  font-weight: 400;
  font-size: 16px;
  line-height: 166%;
  display: flex;
  align-items: center;
}
.wrapper-1 .video .text a::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url('/uploads/48/d/play.png') no-repeat 100%/100%;
  cursor: pointer;
}
.wrapper-1 .swiper-1 {
  min-height: 750px;
  padding: 100px 0 0;
}
.wrapper-1 .swiper-1 .swiper-wrapper {
  align-items: center;
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide {
  transform: scale(0.9);
  transition: all 300ms;
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: auto;
  margin-bottom: 17px;
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide .slide-text {
  display: none;
  position: relative;
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide .slide-text .title {
  font-weight: 700;
  font-size: 23px;
  line-height: 23px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 7px;
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide .slide-text .subheading {
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  text-align: center;
  color: #ebebeb;
  width: 130%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide-active,
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide-duplicate-active {
  transform: scale(1.5) translateY(80px);
  z-index: 2;
  overflow: inherit;
}
.wrapper-1 .swiper-1 .swiper-wrapper .swiper-slide-active .slide-text {
  display: block;
}
.wrapper-1 .swiper-1 .swiper-button-prev {
  left: 15%;
  top: 32%;
  width: 59px;
  height: 59px;
}
.wrapper-1 .swiper-1 .swiper-button-prev:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('/uploads/48/d/left-arrows.png') no-repeat 100%/100%;
}
.wrapper-1 .swiper-1 .swiper-button-next {
  right: 15%;
  top: 32%;
  width: 59px;
  height: 59px;
}
.wrapper-1 .swiper-1 .swiper-button-next:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('/uploads/48/d/right-arrows.png') no-repeat 100%/100%;
}
.wrapper-2 {
  position: relative;
  z-index: 1;
}
.wrapper-2 .title {
  font-weight: 700;
  font-size: 36px;
  line-height: 49px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 58px;
}
.wrapper-2 .icon {
  width: 64.08px;
  height: 64.08px;
  background: linear-gradient(108.47deg, #6555ff 0.68%, #f0a36b 175.05%), linear-gradient(138.33deg, #7835f4 7.81%, #ff6711 159.07%), linear-gradient(43.1deg, #7d6cff 3.05%, #b6acff 95.96%);
  border-radius: 16px;
  box-shadow: 0px 9px 21px rgba(89, 43, 189, 0.77);
}
.wrapper-2 .table-box .option {
  display: flex;
  justify-content: space-around;
  margin-bottom: 69px;
}
.wrapper-2 .table-box .option .item {
  width: 134px;
  height: 165px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
  padding-bottom: 27px;
}
.wrapper-2 .table-box .option .item .item-icon {
  width: 64px;
  height: 64px;
  background: #6e5af6;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 23px;
  transition: all 0.5s;
}
.wrapper-2 .table-box .option .item .text {
  font-weight: 400;
  font-size: 15px;
  line-height: 197%;
  text-align: center;
  color: #ffffff;
}
.wrapper-2 .table-box .option .item.active {
  border-bottom: 8px solid #645aff;
}
.wrapper-2 .table-box .option .item.active .item-icon {
  background: linear-gradient(108.47deg, #6555ff 0.68%, #f0a36b 175.05%), linear-gradient(138.33deg, #7835f4 7.81%, #ff6711 159.07%), linear-gradient(43.1deg, #7d6cff 3.05%, #b6acff 95.96%);
  box-shadow: 0px 9px 21px rgba(89, 43, 189, 0.77);
  transform: translateY(-10px);
}
.wrapper-2 .table-box .exhibition {
  width: 868px;
  padding: 18px 9px;
  background: linear-gradient(108.47deg, #6555ff 0.68%, #f0a36b 175.05%);
  border-radius: 29px;
  text-align: center;
  margin: 0 auto;
}
.wrapper-2 .table-box .exhibition .table-img {
  margin: 0 auto;
}
.wrapper-2 .table-box .exhibition .text .title {
  font-weight: 700;
  font-size: 22px;
  line-height: 120%;
  color: #ffffff;
  margin-bottom: 10px;
}
.wrapper-2 .table-box .exhibition .text .subheading {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: #ffffff;
  width: 90%;
  margin: 0 auto;
}
.wrapper-3 {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background-color: #1f1b43;
}
.wrapper-3 .container {
  width: 1300px;
}
.wrapper-3 .title {
  font-weight: 700;
  font-size: 34px;
  line-height: 47px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
}
.wrapper-3 .swiper-5 .swiper-wrapper {
  padding-top: 50px;
}
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide {
  transform: scale(0.8);
  transition: all 300ms;
  padding-bottom: 40px;
}
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide video {
  width: 100%;
}
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide .swiper-slide-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 197%;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide .swiper-slide-title img {
  margin-right: 12px;
}
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide .swiper-slide-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 197%;
  color: #ffffff;
}
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide-active,
.wrapper-3 .swiper-5 .swiper-wrapper .swiper-slide-duplicate-active {
  transform: scale(1.2) translateY(0px);
  z-index: 2;
}
.wrapper-3 .swiper-5 .swiper-button-prev {
  left: 25%;
  top: 25%;
  width: 55px;
  height: 55px;
}
.wrapper-3 .swiper-5 .swiper-button-prev:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('/uploads/48/d/arrows-left.png') no-repeat 100%/100%;
}
.wrapper-3 .swiper-5 .swiper-button-next {
  right: 26%;
  top: 25%;
  width: 55px;
  height: 55px;
}
.wrapper-3 .swiper-5 .swiper-button-next:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('/uploads/48/d/arrows-right.png') no-repeat 100%/100%;
}
/* .wrapper-3 .swiper-6 {
  height: 340px;
} */
.wrapper-3 .swiper-6 .swiper-wrapper .swiper-slide {
  width: 100%;
}
.wrapper-3 .swiper-6 .swiper-wrapper .swiper-slide video {
  width: 100%;
  margin-bottom: 30px;
}
.wrapper-3 .swiper-6 .swiper-wrapper .swiper-slide .swiper-slide-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 197%;
  color: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.wrapper-3 .swiper-6 .swiper-wrapper .swiper-slide .swiper-slide-title img {
  margin-right: 12px;
}
.wrapper-3 .swiper-6 .swiper-wrapper .swiper-slide .swiper-slide-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 197%;
  color: #ffffff;
}
.wrapper-3 .swiper-6 .swiper-scrollbar {
  width: 50%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: rgba(176, 168, 255, 0.22);
}
.wrapper-3 .swiper-6 .swiper-scrollbar .swiper-scrollbar-drag {
  background: #796eeb;
}
.first-main .flex-wrapper {
  justify-content: space-between;
  margin-top: 50px;
}
.first-main-header {
  background-color: #8668f6;
  border-radius: 8px 8px 0 0;
  text-align: center;
  width: 100%;
  height: 70px;
}
.first-main-header img {
  display: inline-block;
  transform: translateY(22px);
}
.first-main-item {
  flex: 0 0 23%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.first-main-item.at {
  border: 1px solid #8668f6;
}
.first-main-item.at .first-main-header {
  background-color: #8668f6;
}
.first-main-item.rc {
  border: 1px solid #f2ab4e;
}
.first-main-item.rc .first-main-header {
  background-color: #f2ab4e;
}
.first-main-item.vm {
  border: 1px solid #eb8f8c;
}
.first-main-item.vm .first-main-header {
  background-color: #eb8f8c;
}
.first-main-item.vc {
  border: 1px solid #78abd0;
}
.first-main-item.vc .first-main-header {
  background-color: #78abd0;
}
.first-main-h3 {
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  margin-top: 80px;
  text-align: center;
}
.first-main-info {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.5;
  margin-top: 20px;
  text-align: center;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .first-main .flex-wrapper {
    gap: 30px;
    flex-direction: column;
  }
  .first-main-item {
    flex: unset;
    width: 100%;
  }
}
.wrapper-4 {
  background-color: #090336;
  padding: 100px 0;
}
.wrapper-4 .mid-main {
  margin-top: 100px;
  background: #201b46;
  border-radius: 36px;
  padding: 52px 0 80px;
}
.wrapper-4 .title {
  font-weight: 700;
  font-size: 36px;
  line-height: 49px;
  color: #ffffff;
  margin-bottom: 52px;
  text-align: center;
}
.wrapper-4 .conetnt {
  display: flex;
  justify-content: space-around;
}
.wrapper-4 .conetnt .item {
  width: 500px;
}
.wrapper-4 .conetnt .item .item-top {
  width: 100%;
  height: 222px;
  background: #ffffff;
  border-radius: 10px;
  padding: 27px;
}
.wrapper-4 .conetnt .item .item-top .title {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.wrapper-4 .conetnt .item .item-top .title span {
  margin-left: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 197%;
  color: #494949;
}
.wrapper-4 .conetnt .item .item-top .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 197%;
  color: #494949;
}
.wrapper-4 .conetnt .item .button-dw {
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
}
.wrapper-4 .conetnt .item .button-dw .item-button {
  padding: 15px 17px;
  background: #7935f4;
  border-radius: 14px;
  margin-right: 29px;
}
.wrapper-4 .conetnt .item .button-dw .item-button .text {
  line-height: 0;
  display: flex;
  align-items: center;
}
.wrapper-4 .conetnt .item .button-dw .item-button .text::before {
  content: '';
  display: inline-block;
  width: 23px;
  height: 25px;
  background: url('/uploads/48/d/win-white.png') no-repeat 100%/100%;
  margin-right: 8px;
}
.wrapper-4 .conetnt .item .button-dw .item-button .text a {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
}
.wrapper-4 .conetnt .item .button-dw .item-button .text a i {
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  font-style: normal;
}
.wrapper-4 .conetnt .item .button-dw .item-button .text a i:last-child {
  font-weight: 400;
  font-size: 12px;
  line-height: 11px;
  transform: translateX(-3px) scale(0.95);
}
.wrapper-4 .conetnt .item .button-dw .item-button:last-child {
  margin-right: 0;
}
.wrapper-4 .conetnt .item .button-dw .item-button:last-child .text::before {
  content: '';
  display: inline-block;
  width: 23px;
  height: 27px;
  background: url('/uploads/48/d/mac-white.png') no-repeat 100%/100%;
  margin-right: 6px;
}
.wrapper-4 .conetnt .item .button-user {
  display: flex;
  justify-content: space-between;
  margin-top: 23px;
}
.wrapper-4 .conetnt .item .button-user .item-user {
  padding: 12px 30px;
  background: #7935f4;
  border-radius: 14px;
}
.wrapper-4 .conetnt .item .button-user .item-user a {
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  line-height: 197%;
}
.wrapper-5 {
  background: url('../../img/screen-recorder/wrapper-5.png') no-repeat 100%/100%;
  background-size: cover;
  padding: 124px 0 0;
  min-height: 593px;
}
.wrapper-5 .title {
  font-weight: 600;
  font-size: 40px;
  line-height: 143%;
  text-align: center;
  color: #ffffff;
  margin-bottom: 50px;
}
.wrapper-5 .tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 70px;
}
.wrapper-5 .tab .item {
  list-style: none;
  height: 100px;
  line-height: 100px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.wrapper-5 .tab .item img.init {
  display: none;
}
.wrapper-5 .tab .item img.hover {
  display: block;
}
.wrapper-5 .tab .item:first-child img.init {
  display: block;
}
.wrapper-5 .tab .item:first-child img.hover {
  display: none;
}
.wrapper-5 .tab .item.active::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 4px;
  background: #8981ff;
  bottom: 0;
}
.wrapper-5 .text .item {
  font-weight: 400;
  font-size: 18px;
  line-height: 197%;
  text-align: center;
  list-style: none;
  color: #ffffff;
  display: none;
}
.wrapper-5 .text .item.active {
  display: block;
}
.wrapper-5 .swiper-4 .swiper-slide {
  font-weight: 400;
  font-size: 14px;
  line-height: 197%;
  text-align: center;
  color: #ffffff;
  padding-bottom: 20px;
}
.wrapper-5 .swiper-4 .swiper-slide .slide-icon {
  height: 83px;
  line-height: 83px;
  display: inline-block;
  border-bottom: 4px solid #8981ff;
  margin-bottom: 36px;
}
.wrapper-5 .swiper-4 .swiper-slide .slide-icon img {
  vertical-align: middle;
}
.wrapper-5 .swiper-4 .swiper-pagination {
  bottom: 0;
}
.wrapper-5 .swiper-4 .swiper-pagination .swiper-pagination-bullet {
  background: #b688db;
}
@media (max-width: 1140px) {
  .wrapper-2 .table-box .exhibition {
    width: 100%;
  }
  .wrapper-4 .conetnt {
    flex-wrap: wrap;
    gap: 30px;
  }
  .footer-box .achieved {
    justify-content: center;
    gap: 20px;
  }
  .wrapper-1 .swiper-2 {
    height: auto;
    margin-top: 45px;
  }
  .wrapper-1 .swiper-2 .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  .wrapper-1 .swiper-2 .swiper-wrapper .swiper-slide .slide-text .title {
    font-weight: 700;
    font-size: 30px;
    line-height: 41px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 14px;
  }
  .wrapper-1 .swiper-2 .swiper-wrapper .swiper-slide .slide-text .subheading {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: #ebebeb;
  }
  .wrapper-1 .swiper-2 {
    width: 90% !important;
    margin-bottom: 40px;
  }
  .wrapper-3 {
    padding: 39px 0 80px 0;
  }
  .wrapper-3 .container {
    width: 90%;
  }
  .wrapper-3 .title {
    font-size: 30px;
  }
  .wrapper-3::after {
    display: none;
  }
  .wrapper-3::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .pc-style {
    display: none;
  }
  .mobile-style {
    display: block;
  }
  .wrapper-1 {
    overflow: hidden;
  }
  .wrapper-1 .button {
    margin-bottom: 28px;
    text-align: center;
  }
  .wrapper-1 .button .item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .wrapper-1 .button .item .dow span {
    font-size: 14px;
  }
  .wrapper-1 .button .item .dow span i {
    color: #ffffff;
  }
  .wrapper-1 .button .item .dow span i:last-child {
    font-size: 6px;
  }
  .wrapper-1 .button .item .buy {
    font-size: 14px;
    margin-top: 14px;
    margin-left: 0;
  }
  .wrapper-1 .switch {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }
  .wrapper-1 .switch .text {
    font-weight: 400;
    font-size: 16px;
    line-height: 166%;
    color: #efefef;
    margin-right: 18px;
  }
  .wrapper-1 .switch .icon {
    display: flex;
    align-items: center;
  }
  .wrapper-1 .switch .icon .win-box {
    width: 24px;
    height: 26px;
    background: url('/uploads/48/d/win.png') no-repeat 100%/100%;
    margin-right: 24px;
    cursor: pointer;
  }
  .wrapper-1 .switch .icon .win-box.active {
    background: url('/uploads/48/d/win-hover.png') no-repeat 100%/100%;
  }
  .wrapper-1 .switch .icon .mac-box {
    width: 23px;
    height: 28px;
    background: url('/uploads/48/d/mac.png') no-repeat 100%/100%;
    cursor: pointer;
  }
  .wrapper-1 .switch .icon .mac-box.active {
    background: url('/uploads/48/d/mac-hover.png') no-repeat 100%/100%;
  }
  .wrapper-1 .video {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper-1 .video .text {
    display: flex;
    align-items: center;
  }
  .wrapper-1 .video .text a {
    color: #efefef;
    font-weight: 400;
    font-size: 16px;
    line-height: 166%;
  }
  .wrapper-2 {
    padding-bottom: 0;
  }
  .wrapper-2 .table-box .option {
    flex-wrap: wrap;
    margin-bottom: 19px;
  }
  .wrapper-2 .table-box .option .item {
    flex: 0 0 33%;
  }
  .wrapper-2 .table-box .option .item .text {
    font-size: 12px;
  }
  .wrapper-2 .table-box .option .item.active {
    border-bottom: none;
  }
  .wrapper-2 .table-box .swiper-3 {
    height: auto;
    padding-bottom: 20px;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-wrapper .swiper-slide {
    width: 100%;
    height: auto;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-wrapper .swiper-slide .table-img-mb {
    width: 100%;
    height: auto;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-wrapper .exhibition {
    width: 100%;
    padding: 18px 9px;
    border-radius: 11px;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-wrapper .exhibition .text .title {
    font-size: 12px;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-wrapper .exhibition .text .subheading {
    font-weight: 400;
    font-size: 10px;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-scrollbar {
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(176, 168, 255, 0.22);
    bottom: 0;
  }
  .wrapper-2 .table-box .swiper-3 .swiper-scrollbar .swiper-scrollbar-drag {
    background: #796eeb;
  }
  .wrapper-4 {
    padding: 80px 0;
  }
  .wrapper-4 .container {
    height: auto;
  }
  .wrapper-4 .title {
    font-size: 30px;
  }
  .wrapper-4 .conetnt .item {
    width: 100%;
    margin-bottom: 41px;
    text-align: center;
  }
  .wrapper-4 .conetnt .item .item-top {
    height: auto;
  }
  .wrapper-4 .conetnt .item .item-top .title {
    align-items: center;
  }
  .wrapper-4 .conetnt .item .item-top .title span {
    font-size: 17px;
  }
  .wrapper-4 .conetnt .item .item-top .text {
    font-size: 14px;
  }
  .wrapper-4 .conetnt .item .button-dw {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .wrapper-4 .conetnt .item .button-dw .item-button {
    margin-right: 0;
  }
  .wrapper-4 .conetnt .item .button-dw .item-button:last-child {
    margin-bottom: 0;
  }
  .wrapper-4 .conetnt .item .button-user {
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    display: inline-flex;
  }
  .wrapper-4 .conetnt .item .button-user .item-user {
    margin-right: 0;
    margin-bottom: 18px;
  }
  .wrapper-4 .mid-main {
    margin-top: 80px;
    padding: 52px 0 0;
  }
  .wrapper-5 {
    padding: 80px 0 44px;
    height: auto;
  }
  .wrapper-5 .title {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
.wrapper-6 {
  background-color: #090336;
  padding-top: 100px;
}
.wrapper-6 .faqs-box {
  background-color: #090336;
  background-image: url('../../img/screen-recorder/wrapper-6-bg.png');
  background-position: -800px -265px;
  background-repeat: no-repeat;
  padding-bottom: 100px;
}
.wrapper-6 .faqs-collapse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 50px;
}
.wrapper-6 .faqs-collapse a {
  color: #28DAC2;
}
.wrapper-6 .faqs-collapse a:hover {
  color: #020202;
}
.wrapper-6 .faqs-collapse-item {
  width: 100%;
}
.wrapper-6 .faqs-collapse-item.active .faqs-collapse-title p {
  color: #fff;
}
.wrapper-6 .faqs-collapse-item.active .faqs-collapse-title .iconfont {
  color: #fff;
  transform: rotate(-180deg);
}
.wrapper-6 .faqs-collapse-title {
  display: flex;
  align-items: center;
  padding: 32px 32px 32px 48px;
  cursor: pointer;
  gap: 10px;
  background-color: #322c62;
}
.wrapper-6 .faqs-collapse-title p {
  font-size: 22px;
  font-weight: bold;
  color: #96c0ff;
  line-height: 1.5;
}
.wrapper-6 .faqs-collapse-title .iconfont {
  font-size: 20px;
  font-weight: bold;
  color: #96c0ff;
  transform: rotate(-90deg);
}
.wrapper-6 .faqs-collapse-content {
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  padding: 16px 16px 32px;
  background-color: #605a90d9;
}
.wrapper-6 .faqs-collapse-content p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  line-height: 2;
}
@media (max-width: 768px) {
  .wrapper-6 {
    padding-top: 80px;
  }
  .wrapper-6 .faqs-box {
    padding-bottom: 80px;
  }
  .wrapper-6 .faqs-collapse-title {
    padding: 20px 20px 20px 30px;
  }
  .wrapper-6 .faqs-collapse-title p {
    flex: unset;
    font-size: 18px;
  }
  .wrapper-6 .faqs-collapse-content p {
    font-size: 14px;
  }
}
.footer-box {
  padding-bottom: 100px;
  background-color: #090336;
  background-image: url(../../img/screen-recorder/wrapper-6-bg.png);
  background-position: 100% 80%;
  background-repeat: no-repeat;
  background-size: 30% auto;
}
@media (max-width: 768px) {
  .footer-box {
    padding-bottom: 80rem;
  }
}
.achieved {
  justify-content: space-between;
  flex-wrap: wrap;
}
.achieved-item {
  flex: 0 0 208px;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  min-height: 211px;
  border-radius: 20px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.achieved-item img {
  margin-bottom: 25px;
}
.achieved-item-h3 {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
}
.achieved-item-info {
  font-size: 16px;
  font-weight: 300;
  color: #595959;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .achieved {
    justify-content: center;
    flex-direction: column;
  }
  .achieved-item {
    flex: unset;
    width: 80%;
  }
}
.product-info {
  gap: 20px;
  align-items: flex-end;
  margin-top: 100px;
  flex-wrap: wrap;
}
.product-info-left {
  background-color: #201b46;
  border-radius: 18px;
  padding: 30px;
  flex: 0 0 402px;
}
.product-info-left-h2 {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 15px;
}
.product-info-left-h3 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 15px;
}
.product-info-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.product-info-right-h2 {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.product-info-right-desc {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.product-info-right-desc:last-child {
  margin-top: 30px;
}
.product-info-right-link {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  text-decoration: underline;
  margin-top: 10px;
}
.product-info-switch {
  width: 160px;
  height: 30px;
  border-radius: 30px;
  background-color: #6f727d;
  justify-content: center;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 20px 0 10px;
}
.product-info-switch .iconfont {
  font-size: 20px;
  vertical-align: center;
}
.product-info-switch-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  line-height: 1.5;
}
.product-info-switch-item.active {
  background-color: #fff;
  border-radius: 30px;
}
@media (max-width: 768px) {
  .product-info {
    margin-top: 80px;
  }
}