.delay0 {
  transition-delay: 0s; }

.delay1 {
  transition-delay: 0.1s; }

.delay2 {
  transition-delay: 0.2s; }

.delay3 {
  transition-delay: 0.3s; }

.delay4 {
  transition-delay: 0.4s; }

.delay5 {
  transition-delay: 0.5s; }

.delay6 {
  transition-delay: 0.6s; }

.delay7 {
  transition-delay: 0.7s; }

.delay8 {
  transition-delay: 0.8s; }

.delay9 {
  transition-delay: 0.9s; }

.delay10 {
  transition-delay: 1s; }

.delay11 {
  transition-delay: 1.1s; }

.delay12 {
  transition-delay: 1.2s; }

.delay13 {
  transition-delay: 1.3s; }

.delay14 {
  transition-delay: 1.4s; }

.delay15 {
  transition-delay: 1.5s; }

.delay16 {
  transition-delay: 1.6s; }

.delay17 {
  transition-delay: 1.7s; }

.delay18 {
  transition-delay: 1.8s; }

.delay19 {
  transition-delay: 1.9s; }

.delay20 {
  transition-delay: 2s; }

.delay21 {
  transition-delay: 2.1s; }

.delay22 {
  transition-delay: 2.2s; }

.delay23 {
  transition-delay: 2.3s; }

.delay24 {
  transition-delay: 2.4s; }

.delay25 {
  transition-delay: 2.5s; }

.delay26 {
  transition-delay: 2.6s; }

.delay27 {
  transition-delay: 2.7s; }

.delay28 {
  transition-delay: 2.8s; }

.delay29 {
  transition-delay: 2.9s; }

.delay30 {
  transition-delay: 3s; }

.delay31 {
  transition-delay: 3.1s; }

.delay32 {
  transition-delay: 3.2s; }

.delay33 {
  transition-delay: 3.3s; }

.delay34 {
  transition-delay: 3.4s; }

.delay35 {
  transition-delay: 3.5s; }

.delay36 {
  transition-delay: 3.6s; }

.delay37 {
  transition-delay: 3.7s; }

.delay38 {
  transition-delay: 3.8s; }

.adelay0 {
  animation-delay: 0s; }

.adelay1 {
  animation-delay: 0.1s; }

.adelay2 {
  animation-delay: 0.2s; }

.adelay3 {
  animation-delay: 0.3s; }

.adelay4 {
  animation-delay: 0.4s; }

.adelay5 {
  animation-delay: 0.5s; }

.adelay6 {
  animation-delay: 0.6s; }

.adelay7 {
  animation-delay: 0.7s; }

.adelay8 {
  animation-delay: 0.8s; }

.adelay9 {
  animation-delay: 0.9s; }

.adelay10 {
  animation-delay: 1s; }

.adelay11 {
  animation-delay: 1.1s; }

.adelay12 {
  animation-delay: 1.2s; }

.adelay13 {
  animation-delay: 1.3s; }

.adelay14 {
  animation-delay: 1.4s; }

.adelay15 {
  animation-delay: 1.5s; }

.adelay16 {
  animation-delay: 1.6s; }

.adelay17 {
  animation-delay: 1.7s; }

.adelay18 {
  animation-delay: 1.8s; }

.adelay19 {
  animation-delay: 1.9s; }

.adelay20 {
  animation-delay: 2s; }

.adelay21 {
  animation-delay: 2.1s; }

.adelay22 {
  animation-delay: 2.2s; }

.adelay23 {
  animation-delay: 2.3s; }

.adelay24 {
  animation-delay: 2.4s; }

.adelay25 {
  animation-delay: 2.5s; }

.adelay26 {
  animation-delay: 2.6s; }

.adelay27 {
  animation-delay: 2.7s; }

.adelay28 {
  animation-delay: 2.8s; }

.adelay29 {
  animation-delay: 2.9s; }

.adelay30 {
  animation-delay: 3s; }

.adelay31 {
  animation-delay: 3.1s; }

.adelay32 {
  animation-delay: 3.2s; }

.adelay33 {
  animation-delay: 3.3s; }

.adelay34 {
  animation-delay: 3.4s; }

.adelay35 {
  animation-delay: 3.5s; }

.adelay36 {
  animation-delay: 3.6s; }

.adelay37 {
  animation-delay: 3.7s; }

.adelay38 {
  animation-delay: 3.8s; }

.showup {
  transition-duration: 0.6s;
  transition-property: all;
  opacity: 0;
  transform: translate3d(0, 50%, 0); }
  .showup.on {
    opacity: 1;
    transform: translate3d(0, 0, 0); }

.scroll-animation.on .showup {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

@keyframes point {
  from {
    opacity: 0;
    transform: scale(0); }
  to {
    opacity: 1;
    transform: scale(1); } }
@keyframes _check_point_home {
  from {
    left: 5px; }
  to {
    left: 41px; } }
@keyframes roundImg {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }
@keyframes spinClockwise {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
@keyframes spinCounterclockwise {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-360deg); } }
@keyframes showCountry {
  from {
    opacity: 0;
    transform: scale(0); }
  to {
    opacity: 1;
    transform: scale(1); } }
@keyframes showLabelImg {
  from {
    width: 0;
    display: none; }
  to {
    display: block;
    width: 120px; } }
@keyframes _way_open_img1 {
  from {
    opacity: 0;
    transform: scale(0); }
  to {
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_open_img2 {
  from {
    left: 312px;
    bottom: 257px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: -8px;
    bottom: 22px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_open_img3 {
  from {
    right: 312px;
    top: 257px;
    opacity: 0;
    transform: scale(0); }
  to {
    right: -38px;
    top: 60px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_open_img4 {
  from {
    left: 200px;
    top: 106px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: -257px;
    top: 104px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_open_img7 {
  from {
    right: 200px;
    top: 106px;
    opacity: 0;
    transform: scale(0); }
  to {
    right: -257px;
    top: 104px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_open_img5 {
  from {
    width: 0; }
  to {
    width: 243px; } }
@keyframes _way_open_img8 {
  from {
    opacity: 0;
    transform: scale(0); }
  to {
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img0 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: 256px;
    top: 122px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img1 {
  from {
    opacity: 0;
    transform: scale(0); }
  to {
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img2 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: -24px;
    top: 119px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img3 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: 215px;
    top: 236px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img4 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: -54px;
    top: 222px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img5 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    top: 72px;
    left: 601px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img6 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    top: 176px;
    left: 669px;
    opacity: 1;
    transform: scale(1); } }
@keyframes _way_close_img7 {
  from {
    left: 306px;
    top: 212px;
    opacity: 0;
    transform: scale(0); }
  to {
    left: -290px;
    top: 255px;
    opacity: 1;
    transform: scale(1); } }
@keyframes showImg {
  from {
    opacity: 0;
    transform: scale(0); }
  to {
    opacity: 1;
    transform: scale(1); } }
@keyframes _check_point {
  from {
    left: 35px; }
  to {
    left: 70px; } }
@keyframes bgRemove {
  0% {
    background-position-x: 0; }
  50% {
    background-position-x: -5500px; }
  100% {
    background-position-x: 0; } }
@keyframes showPoint {
  from {
    opacity: 0;
    transform: scale(0);
    transform-origin: center 80%; }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: center 80%; } }
@keyframes showPoint2 {
  from {
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%; }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: 50% 50%; } }
@keyframes loading {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(90deg); }
  50% {
    transform: rotate(180deg); }
  75% {
    transform: rotate(270deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes bg-circle {
  0% {
    opacity: 0;
    transform: scale(0); }
  30% {
    opacity: 1;
    transform: scale(1); }
  50% {
    opacity: 1;
    transform: scale(1); }
  90% {
    opacity: 1;
    transform: scale(1); }
  to {
    opacity: 1;
    transform: scale(1); } }
/* showios */
@keyframes showiosone {
  0% {
    bottom: 84px;
    left: -110px; }
  100% {
    left: -70px;
    bottom: 120px; } }
@keyframes showiosone_1 {
  0% {
    left: -70px;
    bottom: 120px; }
  100% {
    left: -34px;
    bottom: 86px; } }
@keyframes showiosone_test {
  0% {
    transform: translate(0px, 0px); }
  60% {
    transform: translate(40px, -44px); }
  100% {
    transform: translate(72px, -6px); } }
@keyframes showiostwo {
  0% {
    bottom: 136px;
    right: -76px; }
  100% {
    right: -54px;
    bottom: 60px; } }
@keyframes showiostwo_1 {
  0% {
    right: -54px;
    bottom: 60px; }
  100% {
    right: -36px;
    bottom: 102px; } }
@keyframes showiostwo_test {
  0% {
    transform: translate(0px, 0px); }
  60% {
    transform: translate(-22px, 76px); }
  100% {
    transform: translate(-30px, 14px); } }
@keyframes showiosthree {
  0% {
    top: -36px;
    left: 136px; }
  100% {
    top: -64px;
    left: 168px; } }
@keyframes showiosthree_1 {
  0% {
    top: -64px;
    left: 168px; }
  100% {
    top: -32px;
    left: 128px; } }
@keyframes showiosthree_test {
  0% {
    transform: translate(0px, 0px); }
  60% {
    transform: translate(32px, -28px); }
  100% {
    transform: translate(-8px, 4px); } }
/* circleprogress */
.circleprogress {
  position: absolute;
  top: 124px;
  left: 298px;
  z-index: 4;
  margin: 0 auto;
  width: 154px;
  height: 154px; }
  .circleprogress ._circlebox {
    width: 77px;
    height: 154px;
    position: absolute;
    top: 0;
    overflow: hidden; }
  .circleprogress ._cright {
    right: 0; }
  .circleprogress ._cleft {
    left: 0; }
  .circleprogress ._cinner {
    width: 154px;
    height: 154px;
    border: 10px solid #393b55;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg); }
    .circleprogress ._cinner.rightcircle {
      border-top: 10px solid #0054ff;
      border-right: 10px solid #0054ff;
      right: 0;
      animation: circleProgressLoad_right 1s linear forwards;
      animation-delay: 3s; }
    .circleprogress ._cinner.leftcircle {
      border-bottom: 10px solid #0054ff;
      border-left: 10px solid #0054ff;
      left: 0;
      animation: circleProgressLoad_left 1s linear forwards;
      animation-delay: 3s; }

@keyframes circleProgressLoad_right {
  0% {
    transform: rotate(-135deg); }
  50%,
  100% {
    transform: rotate(45deg); } }
@keyframes circleProgressLoad_left {
  0%,
  50% {
    transform: rotate(-135deg); }
  100% {
    transform: rotate(45deg); } }
@keyframes eyestop {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-96px); } }
@keyframes eyesopacity {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@keyframes eyescircleleft {
  0% {
    transform: translateX(0px); }
  100% {
    transform: translateX(24px); } }
@keyframes lightopacity {
  0% {
    opacity: 0.28; }
  100% {
    opacity: 1; } }
@keyframes lighton {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes rotate {
  0% {
    transform: scale(0); }
  10% {
    transform: scale(1);
    transform: rotate(0deg);
    transform-origin: center; }
  30% {
    transform: rotate(360deg);
    transform-origin: center; }
  50% {
    transform: rotate(0deg);
    transform-origin: center; }
  70% {
    transform: rotate(360deg);
    transform-origin: center; }
  90% {
    transform: rotate(0deg);
    transform-origin: center; }
  100% {
    transform: rotate(0deg);
    transform-origin: center; } }
body {
  margin: 0;
  padding: 0; }
  body p {
    margin: 0;
    padding: 0; }
  body .wrapper {
    width: 1368px;
    margin: 0 auto 0;
    position: relative; }

.section {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto 0;
  box-sizing: border-box;
  position: relative; }

.btn_down {
  width: 238px;
  height: 56px;
  background: #4FF06F 0% 0% no-repeat padding-box;
  border-radius: 10px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  font: normal normal 600 16px/19px Roboto;
  color: #171145;
  cursor: pointer; }
  .btn_down:hover {
    background: #37DE58 0% 0% no-repeat padding-box;
    text-decoration: none; }

h2.tit {
  font: normal normal bold 40px/61px Titillium Web;
  color: #000000;
  text-align: center; }

.banner_new {
  height: 841px;
  padding-top: 70px;
  background: url(../images/2026featurenew/banne_bg.jpg) no-repeat center top; }
  .banner_new h1 {
    display: flex;
    margin: 0 auto 0;
    align-items: baseline;
    justify-content: center;
    gap: 16px; }
    .banner_new h1 p {
      font: normal normal bold 64px/72px Titillium Web;
      color: #000000; }
    .banner_new h1 b {
      font-weight: bold;
      font-family: Titillium Web;
      font-size: 64px;
      background-image: linear-gradient(90deg, #00529D 0%, #006FFF 28%, #00BBFF 45%, #006FFF 76%, #0062E1 100%);
      -webkit-background-clip: text;
      color: transparent; }
  .banner_new .ban_p {
    max-width: 830px;
    text-align: center;
    font: normal normal normal 18px/26px Roboto;
    color: #000000;
    margin: 16px auto 0; }
  .banner_new .btn_down {
    margin-top: 30px; }
  .banner_new .img_wrap {
    width: 846px;
    height: 519px;
    margin: 30px auto 0; }
    .banner_new .img_wrap img {
      width: 100%; }

.fea_list {
  padding-top: 100px; }
  .fea_list ._list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 170px; }
    .fea_list ._list li {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .fea_list ._list li:nth-of-type(even) {
        flex-direction: row-reverse; }
      .fea_list ._list li .img_wrap {
        width: 720px;
        text-align: left; }
        .fea_list ._list li .img_wrap img {
          width: auto; }
      .fea_list ._list li .txt_wrap {
        flex: 1;
        max-width: 50%;
        box-sizing: border-box;
        padding: 0 120px 0 90px;
        text-align: left; }
        .fea_list ._list li .txt_wrap h2 {
          font: normal normal bold 38px/58px Titillium Web;
          color: #000000; }
        .fea_list ._list li .txt_wrap p {
          font: normal normal normal 18px/30px Roboto;
          color: #545454;
          margin-top: 26px; }
          .fea_list ._list li .txt_wrap p a {
            color: #006BF5;
            text-decoration: none; }
        .fea_list ._list li .txt_wrap .btn_down {
          margin-left: 0;
          margin-top: 36px; }

.perform {
  padding-top: 110px; }
  .perform .wrapper {
    width: 1684px; }
  .perform .per_cont {
    width: 100%;
    height: 545px;
    position: relative;
    margin-top: 54px;
    margin-bottom: 87px; }
    .perform .per_cont .bg_cont {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 20px;
      position: absolute;
      z-index: 1; }
      .perform .per_cont .bg_cont img {
        width: 48%; }
  .perform .sli_delay1 {
    transition-delay: 0.1s !important;
    animation-delay: 0.1s !important; }
  .perform .sli_delay2 {
    transition-delay: 0.4s !important;
    animation-delay: 0.4s !important; }
  .perform .sli_delay3 {
    transition-delay: 0.7s !important;
    animation-delay: 0.7s !important; }
  .perform .sli_delay4 {
    transition-delay: 1.0s !important;
    animation-delay: 1.0s !important; }
  .perform .sli_delay5 {
    transition-delay: 1.3s !important;
    animation-delay: 1.3s !important; }
  .perform .sli_delay6 {
    transition-delay: 1.6s !important;
    animation-delay: 1.6s !important; }
  .perform .sli_delay7 {
    transition-delay: 1.9s !important;
    animation-delay: 1.9s !important; }
  .perform .sli_delay8 {
    transition-delay: 2.2s !important;
    animation-delay: 2.2s !important; }
  .perform .per_swi {
    position: relative;
    width: 1450px;
    margin: 0 auto;
    z-index: 5;
    height: 545px; }
    .perform .per_swi .swiper-slide {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 44px 0 0;
      position: relative; }
      .perform .per_swi .swiper-slide:before {
        content: '';
        display: block;
        position: absolute;
        top: 38%;
        left: 48%;
        transform: translate(-50%, -20%);
        opacity: 0;
        width: 248px;
        height: 281px;
        z-index: 1;
        transition: all .8s ease;
        background: url(../images/2026featurenew/per_compare.png) no-repeat center/cover; }
      .perform .per_swi .swiper-slide > div {
        width: 45%;
        position: relative; }
        .perform .per_swi .swiper-slide > div img {
          width: 100%;
          opacity: 0;
          transform: translateY(30%);
          transition: all 1s ease; }
      .perform .per_swi .swiper-slide .rocket {
        position: absolute;
        width: 227px;
        height: 227px;
        bottom: 50px;
        right: 84px;
        z-index: 3;
        opacity: 0; }
@keyframes rocket {
  0% {
    opacity: 0;
    transform: translate(-20%, 20%); }
  100% {
    opacity: 1;
    transform: translate(0%, 0%); } }
      .perform .per_swi .swiper-slide .rocket_bg {
        position: absolute;
        width: 333px;
        height: 333px;
        bottom: 0px;
        right: 20px;
        z-index: 2;
        opacity: 0; }
@keyframes rocket_bg {
  0% {
    transform: scale(1);
    opacity: 1; }
  50% {
    transform: scale(0.7);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
      .perform .per_swi .swiper-slide .load1 {
        position: absolute;
        width: 129px;
        width: 129px;
        top: 26%;
        left: 38%;
        opacity: 0; }
@keyframes load1 {
  0% {
    transform: rotate(0);
    opacity: 1; }
  100% {
    transform: rotate(360deg);
    opacity: 1; } }
      .perform .per_swi .swiper-slide .load2 {
        position: absolute;
        width: 53px;
        height: 54px;
        bottom: 14%;
        left: 15%;
        opacity: 0; }
      .perform .per_swi .swiper-slide .load_percent {
        width: 0px;
        position: absolute;
        height: 10px;
        top: 52%;
        left: 19%;
        background-image: linear-gradient(90deg, #00D797 0%, #17F5B3 100%);
        transition: all 1s ease;
        opacity: 0; }
@keyframes load_percent {
  0% {
    width: 0;
    opacity: 1; }
  100% {
    width: 380px;
    opacity: 1; } }
      .perform .per_swi .swiper-slide .load3 {
        position: absolute;
        width: 74px;
        height: 71px;
        top: 30%;
        left: 43%;
        opacity: 0; }
      .perform .per_swi .swiper-slide .load4 {
        position: absolute;
        width: 74px;
        height: 71px;
        bottom: 12%;
        left: 13%;
        opacity: 0; }
@keyframes load_scale {
  0% {
    transform: scale(1);
    opacity: 1; }
  30% {
    transform: scale(1.25);
    opacity: 1; }
  50% {
    transform: scale(0.95);
    opacity: 1; }
  70% {
    transform: scale(1.05);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
      .perform .per_swi .swiper-slide .white {
        position: absolute;
        width: 286px;
        height: 156px;
        left: -4%;
        bottom: 7%; }
      .perform .per_swi .swiper-slide .per_arr {
        position: absolute;
        width: 244px;
        height: 75px;
        top: 40px;
        right: 70px; }
      .perform .per_swi .swiper-slide .check_load2 {
        position: absolute;
        width: 95px;
        height: 92px;
        bottom: 32%;
        right: 40%; }
      .perform .per_swi .swiper-slide .check_arrow2 {
        position: absolute;
        width: 100px;
        height: 78px;
        top: 40%;
        right: -36%; }
      .perform .per_swi .swiper-slide .ani_txt {
        width: 173px;
        height: 118px;
        position: absolute;
        bottom: 8%;
        left: -4%; }
        .perform .per_swi .swiper-slide .ani_txt p {
          line-height: .9;
          opacity: 0;
          transform: translateY(30%);
          transition: all 1s linear; }
        .perform .per_swi .swiper-slide .ani_txt p.p1 {
          font-family: Roboto;
          font-weight: 500;
          font-size: 40px;
          color: #00D797; }
        .perform .per_swi .swiper-slide .ani_txt p.p2 {
          font-family: Roboto;
          font-weight: 500;
          font-size: 40px;
          color: #1264FC; }
        .perform .per_swi .swiper-slide .ani_txt p.p3 {
          font-family: Roboto;
          font-weight: 500;
          font-size: 40px;
          color: #1264FC; }
@keyframes p_show1 {
  0% {
    transform: translateY(30%);
    opacity: 1; }
  100% {
    transform: translateY(0%);
    opacity: 1; } }
@keyframes p_show2 {
  0% {
    transform: translateY(30%);
    opacity: .4; }
  100% {
    transform: translateY(0%);
    opacity: .4; } }
@keyframes p_show3 {
  0% {
    transform: translateY(30%);
    opacity: .2; }
  100% {
    transform: translateY(0%);
    opacity: .2; } }
      .perform .per_swi .swiper-slide-active .rocket {
        animation: rocket .4s ease-in-out forwards; }
      .perform .per_swi .swiper-slide-active .rocket_bg {
        animation: rocket_bg 1.8s linear infinite; }
      .perform .per_swi .swiper-slide-active .load1 {
        animation: load1 0.4s linear infinite; }
      .perform .per_swi .swiper-slide-active .load2 {
        animation: load1 0.7s linear infinite; }
      .perform .per_swi .swiper-slide-active .load3 {
        animation: load_scale .8s linear forwards; }
      .perform .per_swi .swiper-slide-active .load4 {
        animation: load_scale .8s linear forwards; }
      .perform .per_swi .swiper-slide-active .load_percent {
        opacity: 1;
        animation: load_percent .3s ease forwards; }
      .perform .per_swi .swiper-slide-active .ani_txt p {
        transform: translateY(30%); }
      .perform .per_swi .swiper-slide-active .ani_txt p.p1 {
        animation: p_show1 .6s linear infinite; }
      .perform .per_swi .swiper-slide-active .ani_txt p.p2 {
        animation: p_show2 .6s linear infinite; }
      .perform .per_swi .swiper-slide-active .ani_txt p.p3 {
        animation: p_show3 .6s linear infinite; }
      .perform .per_swi .swiper-slide-active .ani_txt .check_arrow2 {
        animation: load_scale .6s ease infinite; }
      .perform .per_swi .swiper-slide-active:before {
        transform: translate(-50%, -50%);
        opacity: 1;
        transition-delay: 0.4s !important; }
      .perform .per_swi .swiper-slide-active.spec_before:before {
        transform: translate(-50%, -40%);
        transition-delay: 1.0s !important; }
      .perform .per_swi .swiper-slide-active > div img {
        opacity: 1;
        transform: translateY(0%); }
      .perform .per_swi .swiper-slide .right_part {
        position: relative; }
  .perform .swiper-button-prev {
    width: 52px;
    height: 52px; }
    .perform .swiper-button-prev:after {
      content: '';
      width: 52px;
      height: 52px;
      transform: rotate(180deg);
      background: url(../images/2026featurenew/per_arrow.png) no-repeat center/cover; }
  .perform .swiper-button-next {
    width: 52px;
    height: 52px; }
    .perform .swiper-button-next:after {
      content: '';
      width: 52px;
      height: 52px;
      background: url(../images/2026featurenew/per_arrow.png) no-repeat center/cover; }
  .perform .swiper-pagination {
    bottom: -35px !important; }
    .perform .swiper-pagination-bullet {
      background: #4D5581 0% 0% no-repeat padding-box;
      border-radius: 1px;
      width: 16px;
      height: 4px; }
      .perform .swiper-pagination-bullet-active {
        background: #1264FC 0% 0% no-repeat padding-box;
        width: 80px; }

.online {
  padding-top: 80px;
  overflow: hidden; }
  .online .wrapper {
    width: 1280px; }
  .online .btn_down {
    margin-top: 48px; }
  .online .online_cont {
    width: 100%;
    position: relative;
    height: 600px;
    display: flex;
    gap: 10px;
    margin: 48px auto 0; }
    .online .online_cont .online_item {
      width: 100px;
      height: 600px;
      transition: all .3s ease;
      position: relative;
      border-radius: 24px;
      min-width: 100px; }
      .online .online_cont .online_item.item1 {
        background: #E6FAF9 0% 0% no-repeat padding-box;
        border: 1px solid #B9CDDA; }
      .online .online_cont .online_item.item2 {
        background: #FDF6E3 0% 0% no-repeat padding-box;
        border: 1px solid #B9CDDA; }
      .online .online_cont .online_item.item3 {
        background: #D4F6FB 0% 0% no-repeat padding-box;
        border: 1px solid #B9CDDA; }
      .online .online_cont .online_item.item4 {
        background: #F0FDED 0% 0% no-repeat padding-box;
        border: 1px solid #B9CDDA; }
      .online .online_cont .online_item.item5 {
        background: #E9F4FF 0% 0% no-repeat padding-box;
        border: 1px solid #B9CDDA; }
      .online .online_cont .online_item .big {
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
        opacity: 0;
        flex-direction: column;
        padding: 48px 40px 0;
        align-items: center;
        box-sizing: border-box; }
        .online .online_cont .online_item .big .img_wrap {
          width: 240px;
          height: 206px; }
          .online .online_cont .online_item .big .img_wrap img {
            width: 100%; }
        .online .online_cont .online_item .big .txt_wrap {
          margin-top: 46px;
          text-align: center;
          box-sizing: border-box;
          padding: 36px 50px 0;
          border-top: 1px solid #B9CDDA;
          width: 100%;
          opacity: 0; }
          .online .online_cont .online_item .big .txt_wrap h3 {
            text-align: center;
            font: normal normal bold 32px/36px Titillium Web;
            color: #000000; }
          .online .online_cont .online_item .big .txt_wrap p {
            margin-top: 16px;
            text-align: center;
            font: normal normal normal 16px/26px Roboto;
            color: #1E1C2C;
            width: 650px; }
      .online .online_cont .online_item .small {
        min-width: 100px;
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; }
        .online .online_cont .online_item .small .img_wrap {
          width: 100px;
          height: 128px; }
          .online .online_cont .online_item .small .img_wrap img {
            width: 100%; }
        .online .online_cont .online_item .small p {
          font: normal normal bold 16px/22px Titillium Web;
          color: #000000; }
@keyframes showlist {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
      .online .online_cont .online_item.on {
        flex: 1; }
        .online .online_cont .online_item.on .big {
          display: flex;
          animation: showlist .2s ease forwards; }
          .online .online_cont .online_item.on .big .txt_wrap {
            animation: showlist 1.2s ease forwards; }
        .online .online_cont .online_item.on .small {
          display: none; }

.features-page .section-tools {
  max-width: 1768px;
  margin: 100px auto 0;
  padding: 58px 106px 90px;
  border-radius: 32px;
  background: #eff5f9 0% 0% no-repeat padding-box;
  box-sizing: border-box;
  padding-right: 0; }
.features-page .section-tools-title {
  text-align: center;
  font: normal normal bold 40px/61px Titillium Web;
  color: #000; }
.features-page .section-tools .section-tools-content {
  display: flex;
  align-items: center;
  gap: 64px; }
.features-page .section-tools .section-tools-nav {
  flex-shrink: 0;
  display: flex;
  gap: 10px; }
.features-page .section-tools .section-tools-prev,
.features-page .section-tools .section-tools-next {
  width: 52px;
  height: 68px;
  border-radius: 26px;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center; }
@media (hover: hover) {
  .features-page .section-tools .section-tools-prev:hover,
  .features-page .section-tools .section-tools-next:hover {
    background: #1264fc 0% 0% no-repeat padding-box; }
  .features-page .section-tools .section-tools-prev:hover .icon-right,
  .features-page .section-tools .section-tools-next:hover .icon-right {
    background: url("/tpl/tools/img/rate-my-pc/seo_right_hover.png") no-repeat center/cover; }
  .features-page .section-tools .section-tools-prev:hover .icon-left,
  .features-page .section-tools .section-tools-next:hover .icon-left {
    background: url("/tpl/tools/img/rate-my-pc/seo_right_hover.png") no-repeat center/cover;
    transform: scale(-1); } }
.features-page .section-tools .section-tools-prev .icon-left,
.features-page .section-tools .section-tools-next .icon-left {
  display: inline-block;
  background: url("/tpl/tools/img/rate-my-pc/seo_left.png") no-repeat center/cover;
  min-width: 19px;
  height: 36px; }
.features-page .section-tools .section-tools-prev .icon-right,
.features-page .section-tools .section-tools-next .icon-right {
  display: inline-block;
  background: url("/tpl/tools/img/rate-my-pc/seo_right.png") no-repeat center/cover;
  min-width: 19px;
  height: 36px; }
.features-page .section-tools .section-tools-swiper {
  flex: 1;
  overflow: hidden;
  margin-top: 52px; }
.features-page .section-tools-swiper {
  position: relative;
  overflow: hidden; }
.features-page .section-tools .swiper-wrapper {
  display: flex;
  align-items: center; }
.features-page .section-tools-item {
  width: 307px;
  height: 289px;
  flex-shrink: 0;
  border-radius: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer; }
@media (hover: hover) {
  .features-page .section-tools-item:hover {
    background: #fff 0% 0% no-repeat padding-box !important;
    border: 2px solid #1264fc; } }
.features-page .section-tools-item img {
  width: 108px;
  height: 89px;
  object-fit: contain;
  margin-bottom: 36px; }
.features-page .section-tools-item .section-tools-item-desc {
  font: normal normal bold 18px/22px Roboto;
  color: #1e1c2c;
  text-align: center; }
.features-page .section-tools-item:nth-child(1) {
  background: #d0deff 0% 0% no-repeat padding-box; }
.features-page .section-tools-item:nth-child(2) {
  background: #B6F5FF 0% 0% no-repeat padding-box; }
.features-page .section-tools-item:nth-child(2) img {
  width: 102px;
  height: 126px;
  margin-bottom: 0px;
  transform: translateY(-18px); }
.features-page .section-tools-item:nth-child(3) {
  background: #C9EDFF 0% 0% no-repeat padding-box; }
.features-page .section-tools-item:nth-child(3) img {
  width: 108px;
  height: 108px;
  margin-bottom: 27px; }
.features-page .section-tools-item:nth-child(4) {
  background: #B9E0FF 0% 0% no-repeat padding-box; }
.features-page .section-tools-item:nth-child(4) img {
  width: 108px;
  height: 108px;
  margin-bottom: 27px; }
.features-page .section-tools-item:nth-child(5) {
  background: #B6F5FF 0% 0% no-repeat padding-box; }
.features-page .section-tools-item:nth-child(6) {
  background: #C9EDFF 0% 0% no-repeat padding-box; }

.bottom {
  padding-top: 110px;
  padding-bottom: 100px; }
  .bottom .tit {
    max-width: 700px;
    margin: 0 auto;
    font: normal normal bold 36px/48px Titillium Web;
    color: #000000; }
  .bottom .btn_down {
    margin-top: 48px; }

._pc {
  display: block; }

._mob {
  display: none; }

._pc_flex {
  display: flex; }

._mob_flex {
  display: none; }

@media (min-width: 769px) {
  .advantage-img,
  .advantage-text {
    visibility: hidden;
    opacity: 0; }

  .advantage-img1,
  .advantage-img3 {
    transform: translateX(-200px);
    transition: transform 0.8s, opacity 0.8s ease; }

  .advantage-text1,
  .advantage-text3 {
    transform: translate(200px, 0);
    transition: transform 0.8s, opacity 0.8s ease; }

  .advantage-img2,
  .advantage-img4 {
    transform: translateX(200px);
    transition: transform 0.8s, opacity 0.8s ease; }

  .advantage-text2,
  .advantage-text4 {
    transform: translate(-200px, 0);
    transition: transform 0.8s, opacity 0.8s ease; }

  .on .advantage-img {
    transform: translateX(0);
    visibility: visible;
    opacity: 1; }

  .on .advantage-text {
    transform: translate(0, 0);
    visibility: visible;
    opacity: 1; } }
@media (min-width: 769px) and (max-width: 1500px) {
  .perform .wrapper {
    width: 1200px; }

  .perform .per_swi {
    width: 100%; }

  body .wrapper {
    width: 1200px; }

  .online .wrapper {
    width: 1200px; } }
@media (max-width: 768px) {
  ._pc {
    display: none; }

  ._mob {
    display: block; }

  ._pc_flex {
    display: none; }

  ._mob_flex {
    display: flex; }

  .advantage-img,
  .advantage-text {
    visibility: hidden;
    opacity: 0; }

  .advantage-img1,
  .advantage-img3 {
    transform: translate3d(0, 50%, 0);
    transition: transform 0.8s, opacity 0.8s ease; }

  .advantage-text1,
  .advantage-text3 {
    transform: translate3d(0, 50%, 0);
    transition: transform 0.8s, opacity 0.8s ease; }

  .advantage-img2,
  .advantage-img4 {
    transform: translate3d(0, 50%, 0);
    transition: transform 0.8s, opacity 0.8s ease; }

  .advantage-text2,
  .advantage-text4 {
    transform: translate3d(0, 50%, 0);
    transition: transform 0.8s, opacity 0.8s ease; }

  .on .advantage-img {
    transform: translateX(0);
    visibility: visible;
    opacity: 1; }

  .on .advantage-text {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1; }

  body .wrapper {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box; }
  body .perform .wrapper {
    width: 100%;
    padding: 0 16px; }
  body .btn_down {
    width: 243px;
    height: 44px;
    font-size: 15px; }
  body h2.tit {
    font-size: 25px;
    line-height: 1.2; }

  .banner_new {
    background: url(../images/2026featurenew/banner_bg_mob.png) no-repeat top/cover;
    height: auto;
    padding: 28px 0 43px; }
    .banner_new h1 {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0; }
      .banner_new h1 p {
        font-size: 37px;
        line-height: 1; }
      .banner_new h1 b {
        font-size: 37px; }
    .banner_new .ban_p {
      font-size: 15px;
      text-align: center;
      padding: 0 8px;
      margin-top: 9px; }
    .banner_new .btn_down {
      margin-top: 25px; }
    .banner_new .img_wrap {
      width: 100%;
      height: auto; }

  .fea_list {
    padding-top: 21px; }
    .fea_list ._list {
      gap: 40px; }
      .fea_list ._list li .txt_wrap {
        max-width: 100%;
        padding: 0;
        text-align: center; }
        .fea_list ._list li .txt_wrap h2 {
          font-size: 24px;
          line-height: 1.2;
          margin-bottom: 14px; }
        .fea_list ._list li .txt_wrap p {
          color: #545454;
          font-size: 14px;
          line-height: 1.5; }
        .fea_list ._list li .txt_wrap .btn_down {
          margin-left: auto;
          margin-top: 14px; }

  .perform {
    padding-top: 50px; }
    .perform .per_cont {
      height: auto;
      margin-top: 24px;
      box-sizing: border-box;
      padding-top: 26px;
      margin-bottom: 60px; }
      .perform .per_cont .bg_cont {
        flex-direction: column;
        gap: 24px;
        top: 0; }
        .perform .per_cont .bg_cont img {
          width: 100%; }
    .perform .swiper-button-prev,
    .perform .swiper-button-next {
      display: none; }
    .perform .per_swi {
      width: 100%;
      height: auto; }
      .perform .per_swi .swiper-slide {
        flex-direction: column;
        justify-content: center;
        gap: 50px;
        padding: 0 0; }
        .perform .per_swi .swiper-slide::before {
          width: 174px;
          height: 186px;
          background: url(../images/2026featurenew/per_compare_mob.png) no-repeat center/cover;
          top: 45%; }
        .perform .per_swi .swiper-slide > div {
          width: 85%; }
        .perform .per_swi .swiper-slide .rocket {
          width: 114px;
          height: 114px;
          bottom: 6%;
          right: 12%; }
        .perform .per_swi .swiper-slide .rocket_bg {
          width: 160px;
          height: 160px;
          bottom: 0px;
          right: 0%; }
        .perform .per_swi .swiper-slide .load1 {
          height: auto;
          width: 18%; }
        .perform .per_swi .swiper-slide .load2 {
          height: auto;
          width: 10%; }
        .perform .per_swi .swiper-slide .load3 {
          width: 12%;
          height: auto; }
        .perform .per_swi .swiper-slide .load_percent {
          height: 6px; }
        .perform .per_swi .swiper-slide .load4 {
          width: 12%;
          height: auto; }
  @keyframes load_percent {
    0% {
      width: 0;
      opacity: 1; }
    100% {
      width: 58%;
      opacity: 1; } }
        .perform .per_swi .swiper-slide .white {
          width: 45%;
          height: auto; }
        .perform .per_swi .swiper-slide .per_arr {
          width: 33%;
          height: auto;
          top: 8%;
          right: 13%; }
        .perform .per_swi .swiper-slide .ani_txt {
          width: 90px;
          height: auto; }
          .perform .per_swi .swiper-slide .ani_txt p.p1 {
            font-size: 16px; }
          .perform .per_swi .swiper-slide .ani_txt p.p2 {
            font-size: 16px; }
          .perform .per_swi .swiper-slide .ani_txt p.p3 {
            font-size: 16px; }
          .perform .per_swi .swiper-slide .ani_txt .check_arrow2 {
            width: 41%;
            height: auto; }
        .perform .per_swi .swiper-slide .check_load2 {
          width: 14%;
          height: auto; }

  .online .wrapper {
    width: 100%; }
  .online h2.tit {
    font-size: 25px;
    line-height: 1.2; }
  .online .online_swi {
    width: 100%;
    margin-top: 24px; }
  .online .online_cont {
    width: 100%;
    height: 405px;
    gap: 0;
    margin-top: 0; }
    .online .online_cont .online_item {
      height: 405px;
      width: 100%;
      box-sizing: border-box;
      padding: 2px; }
      .online .online_cont .online_item.on {
        width: 100%;
        flex: none; }
        .online .online_cont .online_item.on .big {
          animation: none; }
      .online .online_cont .online_item .small {
        display: none; }
      .online .online_cont .online_item .big {
        display: flex;
        opacity: 1;
        padding: 18px 18px 0; }
        .online .online_cont .online_item .big .img_wrap {
          width: 132px;
          height: auto; }
        .online .online_cont .online_item .big .txt_wrap {
          padding: 0;
          padding-top: 16px;
          margin-top: 16px;
          opacity: 1; }
          .online .online_cont .online_item .big .txt_wrap h3 {
            font-size: 21px;
            line-height: 1; }
          .online .online_cont .online_item .big .txt_wrap p {
            font-size: 14px;
            line-height: 1.4;
            width: 100%; }
  .online .swiper-pagination {
    bottom: 75px !important; }
    .online .swiper-pagination-bullet {
      background: #4D5581 0% 0% no-repeat padding-box;
      border-radius: 1px;
      width: 16px;
      height: 4px; }
      .online .swiper-pagination-bullet-active {
        background: #1264FC 0% 0% no-repeat padding-box;
        width: 80px; }
  .online .btn_down {
    margin-top: 80px; }

  .features-page .section-tools {
    margin: 0;
    padding: 40px 0 32px;
    margin-top: 45px;
    border-radius: 0; }
  .features-page .section-tools-title {
    font: normal normal bold 25px/28px Titillium Web;
    padding-left: 70px;
    padding-right: 70px; }
  .features-page .section-tools .section-tools-content {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
    padding-left: 20px; }
  .features-page .section-tools .section-tools-swiper {
    width: 100%;
    margin-top: 24px;
    overflow: hidden; }
  .features-page .section-tools .swiper-wrapper {
    display: flex;
    align-items: center; }
  .features-page .section-tools-item {
    width: 247px;
    height: 232.5px;
    border-radius: 39px;
    flex-shrink: 0; }
  .features-page .section-tools-item img {
    width: 87px;
    height: 72px;
    margin-bottom: 20px; }
  .features-page .section-tools-item .section-tools-item-desc {
    font: normal normal bold 16px/22px Roboto;
    padding-left: 12px;
    padding-right: 12px; }
  .features-page .section-tools-item:nth-child(2) img {
    width: 87px;
    height: 72px;
    margin-bottom: 20px;
    transform: translateY(0px); }
  .features-page .section-tools-item:nth-child(3) img {
    width: 87px;
    height: 72px;
    margin-bottom: 20px; }
  .features-page .section-tools-item:nth-child(4) img {
    width: 87px;
    height: 72px;
    margin-bottom: 20px; }
  .features-page .section-tools .section-tools-nav {
    width: 100%;
    justify-content: center;
    gap: 12px;
    margin-top: 8px; }
  .features-page .section-tools .section-tools-prev,
  .features-page .section-tools .section-tools-next {
    width: 32px;
    height: 42px;
    border-radius: 16px; }
  .features-page .section-tools .section-tools-prev .icon-left,
  .features-page .section-tools .section-tools-prev .icon-right,
  .features-page .section-tools .section-tools-next .icon-left,
  .features-page .section-tools .section-tools-next .icon-right {
    min-width: 12px;
    width: 12px;
    height: 22px; }

  .bottom {
    padding: 74px 0; }
    .bottom h2.tit {
      font-size: 25px;
      line-height: 1.2; }
    .bottom .btn_down {
      margin-top: 29px; } }

/*# sourceMappingURL=feature_new.css.map */