html,body {
    overflow-x: hidden;
    color: #1A1C34;
}
a:hover {
    color: #4858EC;
}
.any-scenarios .content .empty {
    color: #696969;
  }
.sheen {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease-in-out
}

.sheen:before {
    content: "";
    background-color: rgba(255,255,255,.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    transform: skewX(-45deg) translateX(0);
    transition: none
}

.sheen:hover:before {
    transform: skewX(-45deg) translateX(500px);
    transition: all 1s ease-in-out
}
.blob-btn {
    z-index: 1;
    position: relative;
    text-align: center;
    outline: none;
    border: none;
    transition: color 0.5s;
    cursor: pointer;
    overflow: hidden;
}
.blob-btn__inner {
    z-index: -1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}
.blob-btn__blobs {
    position: relative;
    display: block;
    height: 100%;
    filter: url("#goo");
}
.blob-btn__blob {
    position: absolute;
    top: 6px;
    width: 25%;
    height: 100%;
    background: #6D79F0;
    border-radius: 100%;
    transform: translate3d(0, 150%, 0) scale(1.7);
    transition: transform 0.45s;
}
@supports (filter: url("#goo")) {
    .blob-btn__blob {
        transform: translate3d(0, 150%, 0) scale(1.4);
    }
}
.blob-btn__blob:nth-child(1) {
    left: 0%;
    transition-delay: 0s;
}
.blob-btn__blob:nth-child(2) {
    left: 30%;
    transition-delay: 0.08s;
}
.blob-btn__blob:nth-child(3) {
    left: 60%;
    transition-delay: 0.16s;
}
.blob-btn__blob:nth-child(4) {
    left: 90%;
    transition-delay: 0.24s;
}
.blob-btn:hover .blob-btn__blob {
    transform: translateZ(0) scale(1.7);
}
@supports (filter: url("#goo")) {
    .blob-btn:hover .blob-btn__blob {
        transform: translateZ(0) scale(1.7);
    }
}
.container {
    padding: 0;
}
.logo-p {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}
.logo-p picture {
    display: inline-block;
    vertical-align: middle;
    max-width: 28px;
    margin-right: 10px;
}
.base-switching-button .banner-available-star .base-version-switching {
    margin-right: 0;
}
.base-switching-button .version-switching-icon:hover svg use,
.base-switching-button .version-switching-icon.active  svg use {
    color: #4276FF;
}
.base-switching-button .button {
    border-radius: 60px;
    width: 210px;
    height: 54px;
    font-weight: bold;
    margin: 0;
}
.base-switching-button .download-button .button {
    border:none;
    color: #ffffff;
    background: linear-gradient(90.21deg, #6876FB -4.06%, #4D5CEE 97.98%);
    border-radius: 10px;
    -webkit-filter: drop-shadow(0px 4px 4px rgba(54, 68, 207, 0.3));
    filter: drop-shadow(0px 4px 4px rgba(54, 68, 207, 0.3));
}
.base-switching-button .download-button .button span {
    display: block;
    line-height: 1.2;
}
.base-switching-button .download-button .button span:last-child {
    font-size: 14px;
    font-weight: normal;
}
.base-switching-button .download-button .button:hover {
    background: linear-gradient(90.21deg, #6876FB -4.06%, #4D5CEE 97.98%);
}
.base-switching-button .button svg {
    margin: 0 10px 0 0;
}

.base-switching-button .buy-button .button {
    background: linear-gradient(90.42deg, #FFA825 0.45%, #FF8E25 99.8%);
    border-radius: 10px;
    -webkit-filter: drop-shadow(0px 4px 4px rgba(199, 121, 45, 0.3));
    filter: drop-shadow(0px 4px 4px rgba(199, 121, 45, 0.3));
}
.product-button .buy-button .button .blob-btn__blob {
    background: #FFB975;
}
.base-switching-button .buy-button .button:hover {
    background: linear-gradient(90.42deg, #FFA825 0.45%, #FF8E25 99.8%);
}
.base-switching-button .product-button div {
    margin: 0;
}
.base-switching-button .product-button {
    display: flex;
}
.base-switching-button .version-switching-icon {
    margin-left: 22px;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.base-switching-button .version-switching-icon svg {
    width: 23px!important;
    height: 23px!important;
}
.base-switching-button .version-switching-icon:hover svg use,
.base-switching-button .version-switching-icon.active  svg use {
    color: #4276FF;
}
#star-reviews .msg {
    font-size: 14px;
    color: #4276FF;
    display: none;
}

.top-banner {
    position: relative;
    padding: 90px 0 130px;
}
.spanstext-swiper-box{
    display: flex;
}
#spanstext-swiper{
    display: inline-block;
    overflow: hidden;
    height:54px;
    width: auto;
    margin-bottom: 24px;
}
#spanstext-swiper .swiper-slide{
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
    color: #4858EC;
}
.top-banner .base-switching-button .download-button .button{
    border: none;
    color: #fff;
    background: #4858EC;
    border-radius: 10px;
}
.top-banner .base-switching-button .buy-button p,.top-banner .base-switching-button .download-button p{
    margin-top: 10px;
    color: #080B29;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}
.top-banner .base-switching-button .buy-button .button {
    border-radius: 12px;
    border: 2px solid #4276FF;
    background: #FFF;
    color: #4858EC
}

.top-banner .base-switching-button .buy-button .button svg use {
    color: #4858EC
}

.top-banner .base-switching-button .buy-button .button:hover {
    background: #EBEDFF
}
.top-banner .base-switching-button .download-button .button.none {

}
.top-banner:before,
.top-banner:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
}
.top-banner:before {
    left: 0;
    bottom: 0;
    width: 1467px;
    height: 886px;
    background: url("../png/top-banner-before.png") no-repeat;
}
.top-banner:after {
    top: 0;
    right: 0;
    width: 550px;
    height: 537px;
    background: url("../png/top-banner-after.png") no-repeat;
}
.top-banner .base-switching-button .product-button .download-button {
    margin-right: 24px;
}
.top-banner p.logo {
    margin-bottom: 16px;
}
.top-banner h1 {
    font-size: 40px;
    font-weight: bold;
}
.top-banner h1 span {
    background: linear-gradient(to right, #6674FA, #4E5DEF);
    -webkit-background-clip: text;
    color: transparent;
}
.top-banner .top {
    display: flex;
    align-items: center;
}
.top-banner ul {
    margin-bottom: 48px;
}
.top-banner ul li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 16px;
}
.top-banner ul li:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #4858EC;
    position: absolute;
    top: 10px;
    left: 0;
    border-radius: 100%;
}
.top-banner .more-video {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 37px;
}
.top-banner .more-video picture {
    margin-right: 16px;
}
.top-banner .more-video a {
    color: #4276FF;
}
.top-banner .right.small {
    display: none;
}
.top-banner .left,
.top-banner .right {
    width: 50%;
}
.top-banner .right {
    position: relative;
    flex: 1;
    right: -50px;
}
.top-banner .right:before,
.top-banner .right:after {
    position: absolute;
    content: '';
    display: inline-block;
    border-radius: 100%;
    /*bottom: 58px;*/
    /*left: 50%;*/
    width: 83px;
    height: 32px;
    /*transform: translate(-50%, -50%);*/
    z-index: 2;
}
.top-banner .right:before {
    left: -40px;
    bottom: 55px;
    background: url("../png/computer-surround-1.png") no-repeat;
    /*animation: computer-surround-1 10s linear infinite;*/
}
.top-banner .right:after {
    right: -30px;
    bottom: 30px;
    background: url("../png/computer-surround-2.png") no-repeat;
    /*animation: computer-surround-2 10s linear infinite;*/
}
.top-banner.run .right:before {
    -webkit-animation: opacity 1s ease-out 5.8s both, rotate-out-hor2 1.2s ease-in-out 0.2s infinite alternate-reverse both;
    animation: opacity 1s ease-out 5.8s both, rotate-out-hor2 1.2s ease-in-out 0.2s infinite alternate-reverse both;
}
.top-banner.run .right:after {
    -webkit-animation: opacity 1s ease-out 0.7s both, rotate-out-hor2 1.2s ease-in-out 0.2s infinite alternate-reverse both;
    animation: opacity 1s ease-out 0.7s both, rotate-out-hor2 1.2s ease-in-out 0.2s infinite alternate-reverse both;
}
@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes rotate-out-hor2 {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    30% {
        -webkit-transform: translateY(-3.5px);
        transform: translateY(-3.5px);
    }
    40% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    50% {
        -webkit-transform: translateY(-2.5px);
        transform: translateY(-2.5px);
    }
    65% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    75% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


.top-banner .right .computer {
    position: relative;
    z-index: 1;
    -webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@-webkit-keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;

    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;

    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.top-banner .right .computer:before {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 19px;
    height: 19px;
    background: linear-gradient(180deg, #FFC1F5 0%, #B062FF 100%);

    -webkit-filter: blur(1.5px);
    filter: blur(1.5px);
    border-radius: 100%;
    animation: computer-surround-1 10s linear 2s infinite;
    z-index: -1;
}
.top-banner .right .computer .base {
    position: absolute;
    bottom: -10px;
    left: 0;
    z-index: -1;
}

@keyframes computer-surround-1 {
    100% {
        transform: translate(285px, 0px);
    }
    97.5% {
        transform: translate(281.49117707px, -8.60389558px);
    }
    95% {
        transform: translate(271.05110714px, -16.99593469px);
    }
    92.5% {
        transform: translate(253.93685939px, -24.96947749px);
    }
    90% {
        transform: translate(230.5698434px, -32.32818888px);
    }
    87.5% {
        transform: translate(201.52543264px, -38.89087297px);
    }
    85% {
        transform: translate(167.5187969px, -44.49593469px);
    }
    82.5% {
        transform: translate(129.38729243px, -49.00535883px);
    }
    80% {
        transform: translate(88.0698434px, -52.3081084px);
    }
    77.5% {
        transform: translate(44.58382254px, -54.32285873px);
    }
    75% {
        transform: translate(0px, -55px);
    }
    72.5% {
        transform: translate(-44.58382254px, -54.32285873px);
    }
    70% {
        transform: translate(-88.0698434px, -52.3081084px);
    }
    67.5% {
        transform: translate(-129.38729243px, -49.00535883px);
    }
    65% {
        transform: translate(-167.5187969px, -44.49593469px);
    }
    62.5% {
        transform: translate(-201.52543264px, -38.89087297px);
    }
    60% {
        transform: translate(-230.5698434px, -32.32818888px);
    }
    57.5% {
        transform: translate(-253.93685939px, -24.96947749px);
    }
    55% {
        transform: translate(-271.05110714px, -16.99593469px);
    }
    52.5% {
        transform: translate(-281.49117707px, -8.60389558px);
    }
    50% {
        transform: translate(-285px, 0px);
    }
    47.5% {
        transform: translate(-281.49117707px, 8.60389558px);
    }
    45% {
        transform: translate(-271.05110714px, 16.99593469px);
    }
    42.5% {
        transform: translate(-253.93685939px, 24.96947749px);
    }
    40% {
        transform: translate(-230.5698434px, 32.32818888px);
    }
    37.5% {
        transform: translate(-201.52543264px, 38.89087297px);
    }
    35% {
        transform: translate(-167.5187969px, 44.49593469px);
    }
    32.5% {
        transform: translate(-129.38729243px, 49.00535883px);
    }
    30% {
        transform: translate(-88.0698434px, 52.3081084px);
    }
    27.5% {
        transform: translate(-44.58382254px, 54.32285873px);
    }
    25% {
        transform: translate(0px, 55px);
    }
    22.5% {
        transform: translate(44.58382254px, 54.32285873px);
    }
    20% {
        transform: translate(88.0698434px, 52.3081084px);
    }
    17.5% {
        transform: translate(129.38729243px, 49.00535883px);
    }
    15% {
        transform: translate(167.5187969px, 44.49593469px);
    }
    12.5% {
        transform: translate(201.52543264px, 38.89087297px);
    }
    10% {
        transform: translate(230.5698434px, 32.32818888px);
    }
    7.5% {
        transform: translate(253.93685939px, 24.96947749px);
    }
    5% {
        transform: translate(271.05110714px, 16.99593469px);
    }
    2.5% {
        transform: translate(281.49117707px, 8.60389558px);
    }
    0% {
        transform: translate(285px, 0px);
    }
}

@keyframes computer-surround-2 {
    100% {
        transform: translate(-285px, 0px);
    }
    97.5% {
        transform: translate(-281.49117707px, 8.60389558px);
    }
    95% {
        transform: translate(-271.05110714px, 16.99593469px);
    }
    92.5% {
        transform: translate(-253.93685939px, 24.96947749px);
    }
    90% {
        transform: translate(-230.5698434px, 32.32818888px);
    }
    87.5% {
        transform: translate(-201.52543264px, 38.89087297px);
    }
    85% {
        transform: translate(-167.5187969px, 44.49593469px);
    }
    82.5% {
        transform: translate(-129.38729243px, 49.00535883px);
    }
    80% {
        transform: translate(-88.0698434px, 52.3081084px);
    }
    77.5% {
        transform: translate(-44.58382254px, 54.32285873px);
    }
    75% {
        transform: translate(0px, 55px);
    }
    72.5% {
        transform: translate(44.58382254px, 54.32285873px);
    }
    70% {
        transform: translate(88.0698434px, 52.3081084px);
    }
    67.5% {
        transform: translate(129.38729243px, 49.00535883px);
    }
    65% {
        transform: translate(167.5187969px, 44.49593469px);
    }
    62.5% {
        transform: translate(201.52543264px, 38.89087297px);
    }
    60% {
        transform: translate(230.5698434px, 32.32818888px);
    }
    57.5% {
        transform: translate(253.93685939px, 24.96947749px);
    }
    55% {
        transform: translate(271.05110714px, 16.99593469px);
    }
    52.5% {
        transform: translate(281.49117707px, 8.60389558px);
    }
    50% {
        transform: translate(285px, 0px);
    }
    47.5% {
        transform: translate(281.49117707px, -8.60389558px);
    }
    45% {
        transform: translate(271.05110714px, -16.99593469px);
    }
    42.5% {
        transform: translate(253.93685939px, -24.96947749px);
    }
    40% {
        transform: translate(230.5698434px, -32.32818888px);
    }
    37.5% {
        transform: translate(201.52543264px, -38.89087297px);
    }
    35% {
        transform: translate(167.5187969px, -44.49593469px);
    }
    32.5% {
        transform: translate(129.38729243px, -49.00535883px);
    }
    30% {
        transform: translate(88.0698434px, -52.3081084px);
    }
    27.5% {
        transform: translate(44.58382254px, -54.32285873px);
    }
    25% {
        transform: translate(0px, -55px);
    }
    22.5% {
        transform: translate(-44.58382254px, -54.32285873px);
    }
    20% {
        transform: translate(-88.0698434px, -52.3081084px);
    }
    17.5% {
        transform: translate(-129.38729243px, -49.00535883px);
    }
    15% {
        transform: translate(-167.5187969px, -44.49593469px);
    }
    12.5% {
        transform: translate(-201.52543264px, -38.89087297px);
    }
    10% {
        transform: translate(-230.5698434px, -32.32818888px);
    }
    7.5% {
        transform: translate(-253.93685939px, -24.96947749px);
    }
    5% {
        transform: translate(-271.05110714px, -16.99593469px);
    }
    2.5% {
        transform: translate(-281.49117707px, -8.60389558px);
    }
    0% {
        transform: translate(-285px, 0px);
    }
}
@keyframes animate_left {
    0% {
        opacity: 0;
        transform: translate(-10rem, 0rem);
    }
    100% {
        opacity: 1;
        transform: translate(0rem,0rem);
    }
}
@keyframes animate_right  {
    0% {
        opacity: 0;
        transform: translate(10rem, 0rem);
    }
    100% {
        opacity: 1;
        transform: translate(0rem,0rem);
    }
}

.top-banner .right .computer-screen-box {
    position: absolute;
    display: inline-block;
    top: -20px;
    left: 122px;
    z-index: 1;
}
.top-banner .right .computer-screen {
    position: relative;
    width: 320px;
    height: 176px;
    background: url("../png/computer-screen.png") no-repeat;
    background-size: cover;
    /*-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.8s both;*/
    /*animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.8s both;*/
}
@-webkit-keyframes slit-out-horizontal {
    0% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
        opacity: 1;
    }
}
@keyframes slit-out-horizontal {
    0% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
    20% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
        opacity: 1;
    }
}
.top-banner.run .right .computer-screen {
    -webkit-animation: slit-out-horizontal 0.5s ease-in 0.5s both;
    animation: slit-out-horizontal 0.5s ease-in 0.5s both;
}
.top-banner .right .computer-screen picture {
    position: absolute;
}

.top-banner .right picture.icon-1 {
    top: -15px;
    left: 45px;
    max-width: 53px;
}
.top-banner.run .right picture.icon-1 {
    -webkit-animation: swirl-in-fwd 1s ease-out 0.7s both, icon-1 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.4s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 0.7s both, icon-1 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.4s infinite alternate-reverse both;
}
@keyframes icon-1 {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        top: -15px;
        left: 45px;
    }
}
.top-banner .right picture.icon-2 {
    top: -30px;
    left: 151px;
    max-width: 52px;
}
.top-banner.run .right picture.icon-2 {
    -webkit-animation: swirl-in-fwd 1s ease-out 1s both, icon-2 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.5s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 1s both, icon-2 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.5s infinite alternate-reverse both;
}
@keyframes icon-2 {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        top: -30px;
        left: 151px;
    }
}
.top-banner .right picture.icon-3 {
    top: 50px;
    left: 0;
    max-width: 36px;
}
.top-banner.run .right picture.icon-3 {
    -webkit-animation: swirl-in-fwd 1s ease-out 1.3s both, icon-3 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.6s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 1.3s both, icon-3 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.6s infinite alternate-reverse both;
}
@keyframes icon-3 {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        top: 50px;
        left: 0;
    }
}
.top-banner .right picture.icon-4 {
    top: 30px;
    right: 35px;
    max-width: 58px;
}
.top-banner.run .right picture.icon-4 {
    -webkit-animation: swirl-in-fwd 1s ease-out 1.6s both, icon-4 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.7s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 1.6s both, icon-4 1s ease-out 0.7s both, jello-horizontal 1.2s ease-in-out 1.7s infinite alternate-reverse both;
}
@keyframes icon-4 {
    0% {
        top: 50%;
        right: 50%;
    }
    100% {
        top: 30px;
        right: 35px;
    }
}
.top-banner .right picture.icon-5 {
    bottom: 20px;
    left: -30px;
    max-width: 65px;
}
.top-banner.run .right picture.icon-5 {
    -webkit-animation: swirl-in-fwd 1s ease-out 1.9s both, icon-5 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 1.8s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 1.9s both, icon-5 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 1.8s infinite alternate-reverse both;
}
@keyframes icon-5 {
    0% {
        bottom: 50%;
        left: 50%;
    }
    100% {
        bottom: 20px;
        left: -30px;
    }
}
.top-banner .right picture.icon-6 {
    bottom: 20px;
    left: 80px;
    max-width: 53px;
}
.top-banner.run .right picture.icon-6 {
    -webkit-animation: swirl-in-fwd 1s ease-out 2.2s both, icon-6 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 1.9s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 2.2s both, icon-6 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 1.9s infinite alternate-reverse both;
}
@keyframes icon-6 {
    0% {
        bottom: 50%;
        left: 50%;
    }
    100% {
        bottom: 20px;
        left: 80px;
    }
}
.top-banner .right picture.icon-7 {
    bottom: 30px;
    right: 110px;
    max-width: 25px;
}
.top-banner.run .right picture.icon-7 {
    -webkit-animation: swirl-in-fwd 1s ease-out 2.5s both, icon-7 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 2.5s both, icon-7 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2s infinite alternate-reverse both;
}
@keyframes icon-7 {
    0% {
        bottom: 50%;
        right: 50%;
    }
    100% {
        bottom: 30px;
        right: 110px;
    }
}
.top-banner .right picture.icon-8 {
    bottom: 30px;
    right: 30px;
    max-width: 53px;
}
.top-banner.run .right picture.icon-8 {
    -webkit-animation: swirl-in-fwd 1s ease-out 2.8s both, icon-8 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2.1s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 2.8s both, icon-8 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2.1s infinite alternate-reverse both;
}
@keyframes icon-8 {
    0% {
        bottom: 50%;
        right: 50%;
    }
    100% {
        bottom: 30px;
        right: 30px;
    }
}
.top-banner .right picture.icon-9 {
    bottom: -40px;
    right: 105px;
    max-width: 63px;
}
.top-banner.run .right picture.icon-9 {
    -webkit-animation: swirl-in-fwd 1s ease-out 3.1s both, icon-9 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2.2s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 3.1s both, icon-9 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2.2s infinite alternate-reverse both;
}
@keyframes icon-9 {
    0% {
        bottom: 50%;
        right: 50%;
    }
    100% {
        bottom: -40px;
        right: 105px;
    }
}
.top-banner .right picture.icon-10 {
    bottom: -60px;
    left: -37px;
    max-width: 80px;
}
.top-banner.run .right picture.icon-10 {
    -webkit-animation: swirl-in-fwd 1s ease-out 3.4s both, icon-10 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2.3s infinite alternate-reverse both;
    animation: swirl-in-fwd 1s ease-out 3.4s both, icon-10 1s ease-out 0.7s both, jello-horizontal-bottom 1.2s ease-in-out 2.3s infinite alternate-reverse both;
}
@keyframes icon-10 {
    0% {
        bottom: 50%;
        left: 50%;
    }
    100% {
        bottom: -60px;
        left: -37px;
    }
}

@-webkit-keyframes swirl-in-fwd {
    0% {
        -webkit-transform: rotate(-540deg) scale(0) translate(50%, 50%);
        transform: rotate(-540deg) scale(0) translate(50%, 50%);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0) scale(1) translate(0, 0);
        transform: rotate(0) scale(1) translate(0, 0);
        opacity: 1;
    }
}
@keyframes swirl-in-fwd {
    0% {
        -webkit-transform: rotate(-540deg) scale(0);
        transform: rotate(-540deg) scale(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes long-jello-horizontal {
    0% {
        margin-top: -15px;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes long-jello-horizontal {
    0% {
        margin-top: -15px;
    }
    100% {
        margin-top: 0;
    }
}
@-webkit-keyframes jello-horizontal {
    0% {
        margin-top: -5px;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes jello-horizontal {
    0% {
        margin-top: -5px;
    }
    100% {
        margin-top: 0;
    }
}
@-webkit-keyframes jello-horizontal-bottom {
    0% {
        margin-bottom: 5px;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes jello-horizontal-bottom {
    0% {
        margin-bottom: 5px;
    }
    100% {
        margin-top: 0;
    }
}


.top-banner .bottom  {
    padding: 3px;
    /*background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.27));*/
    overflow: hidden;
    border-radius: 20px;
    height: 289px;
    margin: 83px 30px 0;
}
.top-banner .bottom .box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*border: 3px solid transparent;*/
    /*border-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.27)) 1;*/
    width: 100%;
    height: 100%;
}
.top-banner .bottom .box:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.top-banner .bottom .box div.item {
    text-align: center;
    width: 24%;
    height: 169px;
    padding: 2px;
    background: linear-gradient(to bottom, #8893FC, #BCC3FF);

    border-radius: 22px;
}
.top-banner .bottom .box div.item:hover {
    box-shadow: 3px 5px 7px rgba(43, 61, 238, 0.16);
}
.top-banner .bottom .box div.item div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #ffffff;
    height: 100%;
    width: 100%;
    border-radius: 20px;
}
.top-banner .bottom .box div.item div picture {
    width: 30px;
}
.top-banner .bottom .box div.item div p.numbers {
    display: flex;
    flex-direction: column;
    font-size: 36px;
    margin: 10px 0 0px;
}
.top-banner .bottom .box div.item:nth-child(1) div p.numbers{color: #4858EC;}
.top-banner .bottom .box div.item:nth-child(2) div p.numbers{color: #2A7FFA;}
.top-banner .bottom .box div.item:nth-child(3) div p.numbers{color: #565CF5;}
.top-banner .bottom .box div.item:nth-child(4) div p.numbers{color: #7B5BF6;}
.top-banner .bottom .box div.item div p.numbers i {
    font-style: normal;
    display: inline-block;
    margin-bottom: 1px;
}
.top-banner .bottom .box div.item div b:last-child {
    transform: rotateX(180deg);
    background: linear-gradient(to bottom, #FFFFFF, #D6DAFF);
    -webkit-background-clip: text;
    color: transparent;
}

.any-scenarios {
    position: relative;
}
.any-scenarios:before,
.any-scenarios:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
}
.any-scenarios:before {
    top: 30px;
    left: 30px;
    width: 496px;
    height: 426px;
    background: url("../png/any-scenarios-after.png") no-repeat;
}
.any-scenarios:after {
    right: 50px;
    bottom: 65px;
    width: 478px;
    height: 590px;
    background: url("../png/any-scenarios-before.png") no-repeat;

}
.any-scenarios h2 {
    font-weight: bold;
    margin-bottom: 14px;
}
.any-scenarios h2+p {
    font-size: 18px;
    margin-bottom: 50px;
}
.any-scenarios .box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 945px;
    margin: 0 auto;
}
.any-scenarios .box .img:before,
.any-scenarios .box .img:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
}
.any-scenarios .box .img:before {
    bottom: 0px;
    left: 0px;
    width: 149px;
    height: 138px;
    background: url("../png/any-scenarios-center-before.png") no-repeat;
}
.any-scenarios .box .img:after {
    bottom: 0px;
    right: 0px;
    width: 157px;
    height: 171px;
    background: url("../png/any-scenarios-center-after.png") no-repeat;

}
.any-scenarios .box .img {
    padding-top: 23px;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 556px;
    background: url("../png/any-scenarios-img-bg.png") no-repeat;
    border-radius: 20px;
    overflow: hidden;
}

@-webkit-keyframes bounce-out-top {
    0% {
        -webkit-transform: translateY(-800px);
        transform: translateY(-800px);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    25% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    52% {
        -webkit-transform: translateY(-38px);
        transform: translateY(-38px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    85% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes bounce-out-top {
    0% {
        -webkit-transform: translateY(-800px);
        transform: translateY(-800px);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    25% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    52% {
        -webkit-transform: translateY(-38px);
        transform: translateY(-38px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    85% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
.any-scenarios .box .img .computer-img {
    width: 413px;
}
.any-scenarios.run .box .img .computer-img{
    -webkit-animation: bounce-out-top 1.5s both;
    animation: bounce-out-top 1.5s both;
}
.any-scenarios .box .img .computer {
    position: relative;
    display: inline-block;
    align-self: self-start;
}

.any-scenarios .box .img .computer .icon {
    position: absolute;
    opacity: 0;
}
.any-scenarios.run .box .img .computer .icon {
    opacity: 1;
}
.any-scenarios .box .img .computer .icon-1 {
    top: 145px;
    left: -95px;
    width: 175px;
}
.any-scenarios .box .img .computer .icon-1.txxdd {
    display: flex;
    padding: 12px;
    justify-content: space-between;
    align-items: center;
    content: '';
    position: absolute;
    width: 170px;
    height: 55px;
    top: 182px;
    left: -98px;
    background: #FFFFFF;
    box-shadow: 0px 4.31546px 7.55206px rgba(39, 48, 128, 0.1);
    -webkit-transform: translateY(-1000px) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
    transform: translateY(-1000px) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
    border-radius: 16.183px;
}
.any-scenarios .box .img .computer .icon-1.txxdd .progress {
    position: relative;
    width: 100px;
    height: 8px;
    background: #D9D9D9;
    border-radius: 10px;
    overflow: hidden;
}
.any-scenarios .box .img .computer .icon-1.txxdd picture.img1 {
    width: 37px;
}
.any-scenarios .box .img .computer .icon-1.txxdd picture.img2 {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 28px;
}
.any-scenarios .box .img .computer .icon-1.txxdd .progress:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #68C968;
    transition: width 2s linear 1.2s;
}
.any-scenarios.run .box .img .computer .icon-1.txxdd .progress:before {
    width: 100%;
}
@-webkit-keyframes slide-out-bottom-icon1 {
    0% {
        -webkit-transform: translateY(-1000px) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        transform: translateY(-1000px) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        transform: translateY(0) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        opacity: 1;
    }
}
@keyframes slide-out-bottom-icon1 {
    0% {
        -webkit-transform: translateY(-1000px) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        transform: translateY(-1000px) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        transform: translateY(0) matrix(0.87, -0.49, 0.28, 0.96, 0, 0);
        opacity: 1;
    }
}
.any-scenarios.run .box .img .computer .icon-1{
    -webkit-animation: slide-out-bottom-icon1 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
    animation: slide-out-bottom-icon1 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
}
.any-scenarios .box .img .computer .icon-2 {
    top: 112px;
    right: 147px;
    width: 57px;
}
.any-scenarios.run .box .img .computer .icon-2{
    -webkit-animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.3s both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
    animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.3s both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
}
.any-scenarios .box .img .computer .icon-3 {
    top: 60px;
    right: 15px;
    width: 66px;
}
.any-scenarios.run .box .img .computer .icon-3{
    -webkit-animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.6s both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
    animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.6s both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
}
.any-scenarios .box .img .computer .icon-4 {
    top: 160px;
    right: -115px;
    width: 130px;
}
.any-scenarios.run .box .img .computer .icon-4{
    -webkit-animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.9s both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
    animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.9s both, jello-horizontal 1.2s ease-in-out 1s infinite alternate-reverse both;
}
.any-scenarios .box .img .computer .icon-5 {
    left: -100px;
    bottom: -10px;
    width: 70px;
}
.any-scenarios .box .img .computer .icon-6 {
    left: 140px;
    bottom: -50px;
    width: 70px;
}
.any-scenarios .box .img .computer .icon-7 {
    right: -70px;
    bottom: 45px;
    width: 70px;
}
.any-scenarios .box .img .computer .icon-box.icon-5 picture:first-child{
    top: -30px;
    left: 78px;
    width: 70px;
}

@-webkit-keyframes rotate-out-ver {
    0% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
    }
}
@keyframes rotate-out-ver {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
        opacity: 1;
    }
}


.any-scenarios.run .box .img .computer .icon-box.icon-5 picture:first-child{
    -webkit-animation: rotate-out-ver 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.5s both, long-jello-horizontal 1.2s ease-in-out 0.5s infinite alternate-reverse both;
    animation: rotate-out-ver 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.5s both, long-jello-horizontal 1.2s ease-in-out 0.5s infinite alternate-reverse both;
}
.any-scenarios .box .img .computer .icon-box.icon-6 picture:first-child{
    top: -30px;
    left: 76px;
    width: 78px;
}
.any-scenarios.run .box .img .computer .icon-box.icon-6 picture:first-child{
    -webkit-animation: rotate-out-ver 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2.5s both, long-jello-horizontal 1.2s ease-in-out 0.5s infinite alternate-reverse both;
    animation: rotate-out-ver 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2.5s both, long-jello-horizontal 1.2s ease-in-out 0.5s infinite alternate-reverse both;
}
.any-scenarios .box .img .computer .icon-box.icon-7 picture:first-child{
    top: -12px;
    left: 12px;
    width: 33px;
}
.any-scenarios.run .box .img .computer .icon-box.icon-7 picture:first-child{
    -webkit-animation: rotate-out-ver 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both, long-jello-horizontal 1.2s ease-in-out 0.5s infinite alternate-reverse both;
    animation: rotate-out-ver 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both, long-jello-horizontal 1.2s ease-in-out 0.5s infinite alternate-reverse both;
}



@-webkit-keyframes any-scenarios-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes any-scenarios-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@-webkit-keyframes any-scenarios-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes any-scenarios-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@-webkit-keyframes any-scenarios-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes any-scenarios-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}


.any-scenarios .box .img .computer .icon-box.icon-5 picture:last-child{
    width: 162px;
}
.any-scenarios .box .img .computer .icon-box.icon-6 picture:last-child{
    width: 162px;
}
.any-scenarios .box .img .computer .icon-box.icon-7 picture:last-child{
    width: 117px;
}

.any-scenarios.run .box .img .computer .icon-box.icon-5 picture:last-child{
    width: 162px;
    -webkit-animation: any-scenarios-left 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: any-scenarios-left 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.any-scenarios.run .box .img .computer .icon-box.icon-6 picture:last-child{
    width: 162px;
    -webkit-animation: any-scenarios-bottom 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: any-scenarios-bottom 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.any-scenarios.run .box .img .computer .icon-box.icon-7 picture:last-child{
    width: 117px;
    -webkit-animation: any-scenarios-right 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: any-scenarios-right 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.any-scenarios .box .img .computer .icon-box div {
    position: relative;
    display: inline-block;
}
.any-scenarios .box .img .computer .icon-box picture:first-child{
    position: relative;
}
.any-scenarios .box .img .computer .icon-box picture:first-child{
    position: absolute;
    z-index: 1;
}

.any-scenarios .box .content {
    padding: 0 40px;
    margin-top: 55px;
}
.any-scenarios .box .content h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 14px;
}
.any-scenarios .box .content a.general-bt {
    margin-top: 30px;
}
a.general-bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    width: 210px;
    height: 54px;
    background: linear-gradient(90.21deg, #6876FB -4.06%, #4D5CEE 97.98%);
    border-radius: 10px;
}


.lr-box {
    background: #CBD9FF;
    border-radius: 20px;
    margin: 130px 30px 0;
}
.lr-box picture {
    max-width: 507px;
}
.lr-box .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 480px;
}
.lr-box.reverse picture {
    max-width: 536px;
}
.lr-box.reverse {
    margin: 50px 30px 0;
}
.lr-box.reverse .container {
    flex-direction: row-reverse;
}
.lr-box.run .container div {
    opacity: 0;
}
#lr-box-1.run .container div:first-child {
    -webkit-animation: animate_left 0.8s ease-out 0.2s both;
    animation: animate_left 0.8s ease-out 0.2s both;
}
#lr-box-1.run .container div:last-child {
    -webkit-animation: animate_right 0.8s ease-out 0.2s both;
    animation: animate_right 0.8s ease-out 0.2s both;
}
#lr-box-2.reverse.run .container div:first-child {
    -webkit-animation: animate_right 0.8s ease-out 0.2s both;
    animation: animate_right 0.8s ease-out 0.2s both;
}
#lr-box-2.reverse.run .container div:last-child {
    -webkit-animation: animate_left 0.8s ease-out 0.2s both;
    animation: animate_left 0.8s ease-out 0.2s both;
}
.lr-box h2 {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}
.lr-box h2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 69px;
    height: 4px;
    background: url("../png/lr-box-h2-line.png") no-repeat;
}

.lr-box .container div:last-child {
    position: relative;
}
.lr-box .container div:last-child:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: inline-block;
    background: #FFF6F0;
    opacity: 0.8;
    -webkit-filter: blur(100px);
    filter: blur(100px);
    width: 100%;
    height: 100%;
}
.lr-box ul{
    max-width: 540px;
}
.lr-box ul li {
    position: relative;
    padding-left: 12px;
}
.lr-box ul li:not(:last-child){
    margin-bottom: 8px;
}
.lr-box ul li:before {
    position: absolute;
    top: 8px;
    left: 0;
    content: '';
    width: 6px;
    height: 6px;
    background: linear-gradient(180deg, #6472F9 0%, rgba(100, 114, 249, 0) 100%);
    border-radius: 100%;
}
.lr-box a.general-bt {
    margin-top: 30px;
}
.lr-box .content picture {
    display: none;
}
.awesome-features {
    position: relative;
    padding: 143px 0 130px;
}
.awesome-features:before,
.awesome-features:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -2;
}
.awesome-features:before {
    top: 180px;
    left: 10px;
    width: 490px;
    height: 670px;
    background: url("../png/awesome-features-before.png") no-repeat;
}
.awesome-features:after {
    right: 0px;
    bottom: -40px;
    width: 520px;
    height: 676px;
    background: url("../png/awesome-features-after.png") no-repeat;

}
.awesome-features .container {
    max-width: 1365px;
}
.awesome-features h2 {
    margin-bottom: 75px;
}
.awesome-features .content-box {
    position: relative;
    border-radius: 20px;
    border: 3px solid #DDE0FF;
    padding: 90px 73px 70px;
    overflow: hidden;
}
.awesome-features .content-box:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.awesome-features .content-box h2 {
    font-weight: bold;
}
.awesome-features .box {
    display: flex;
    align-items: center;
}
.awesome-features .box #awesome-features {
    max-width: 517px;
    overflow: hidden;
    border-radius: 20px;
    flex-shrink: 0;
}
.awesome-features .box .swiper-pagination {
    position: unset;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 54px;
}
.awesome-features .box .swiper-pagination .item {
    padding: 13px 0 18px;
    width: 180px;
    height: 185px;
    background: #FFFFFF;
    box-shadow: 1px 1px 2px rgba(133, 169, 255, 0.1);
    border: 1px solid transparent;
    border-radius: 20px;
    margin: 17px 12px;
}
.awesome-features .box .swiper-pagination .item.active {
    border: 1px solid #BBC2FF;
}
.awesome-features .box .swiper-pagination .item p {
    font-size: 14px;
}
.awesome-features .box .swiper-pagination .item.active p {
    font-weight: bold;
    color: #4858EC;
}
.awesome-features .box .swiper-pagination .item picture {
    margin-bottom: 8px;
}

.awesome-features .box .swiper-slide picture {
    margin-bottom: 34px;
}
.awesome-features .box .swiper-slide .content {
    text-align: left;
    direction: ltr;
}
.awesome-features .box .swiper-slide .content .mb10 {
    margin-bottom: 10px;
}
.awesome-features .box .swiper-slide .content .mb16 {
    margin-bottom: 16px;
}
.awesome-features .box .swiper-slide .content p {
    padding-left: 14px;
}
.awesome-features .box .swiper-slide .content b {
    display: block;
    position: relative;
    font-size: 18px;
    padding-left: 14px;
}
.awesome-features .box .swiper-slide .content b:before {
    position: absolute;
    top: 9px;
    left: 0;
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: linear-gradient(180deg, #4858EC 0%, rgba(72, 88, 236, 0.45) 100%);
    border-radius: 100%;
}


.blogs-with {
    padding-bottom: 132px;
}
.blogs-with h2 {
    font-weight: bold;
    margin-bottom: 60px;
}
.blogs-with #blogs-with {
    padding-bottom: 60px;
}
.blogs-with #blogs-with .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:  0 12px;
    padding: 11px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.18) 100%);
    box-shadow: 0px 4px 7px rgba(174, 193, 247, 0.3);
    border-radius: 20px;
    border: 1px solid transparent;
}
/*.blogs-with #blogs-with .swiper-slide-active .item {*/
.blogs-with #blogs-with .item:hover {
    border: 1px solid #BBC2FF;
}
.blogs-with #blogs-with .item a.article {
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 100%;
    margin-top: 18px;
}
.blogs-with #blogs-with .item a.article:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background: url("../png/blogs-with-tip.png") no-repeat;
    background-size: 100%;
}
.blogs-with .swiper-button-prev,
.blogs-with .swiper-button-next {
    width: 40px;
    height: 40px;
    left: -77px;
    background: url("../png/blogs-with-right-hover.png") no-repeat;
    background-size: 100%;
}
.blogs-with .swiper-button-prev:hover {
    transform: rotate(180deg);
    background: url("../png/blogs-with-right.png") no-repeat;
    background-size: 100%;
}
.blogs-with .swiper-button-next {
    left: unset;
    right: -77px;
    transform: rotate(180deg);
}
.blogs-with .swiper-button-next:hover {
    transform: unset;
    background: url("../png/blogs-with-right.png") no-repeat;
    background-size: 100%;
}
.blogs-with p.more {
    display: flex;
    justify-content: center;
    align-items: center;
}
.blogs-with p.more a {
    color: #4858EC;
}
.blogs-with p.more:before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    background: url("../png/blogs-with-youtube.png") no-repeat;
    background-size: 100%;
}
.blogs-with p.more:after {
    content: '';
    display: inline-block;
    width: 23px;
    height: 14px;
    margin-left: 4px;
    background: url("../png/blogs-with-arrow.png") no-repeat;
    background-size: 100%;
}


.three-recovery {
    padding: 0 0 130px;
}
.three-recovery h2 {
    font-weight: bold;
    text-align: center;
    margin-bottom: 16px;
}
.three-recovery .p-title {
    text-align: center;
    margin: 0 auto 40px;
}
.three-recovery .box {
    display: flex;
    align-items: center;
    margin-top: 50px;
}
.three-recovery .swiper-container {
    border-radius: 10px;
    box-shadow: 0px 4px 7px #e7e5ff;
}
.three-recovery .swiper-container {
    max-width: 597px;
    text-align: center;
    flex: 1;
    /* border: 2px solid #EDEDED; */
}

.three-recovery .swiper-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.three-recovery .swiper-pagination {
    position: static;
    text-align: left;
    z-index: 0;
    width: 560px;
    margin: 0 60px 0 0;
}

.three-recovery .swiper-pagination .item {
    display: flex;
    cursor: pointer;
    align-items: center;
    height: 156px;
    margin-bottom: 16px;
    padding: 24px 40px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.3) 100%);

    box-shadow: 0px 4px 7px rgba(151, 177, 252, 0.3);
    border-radius: 20px;
    opacity: 0.5;
}

.three-recovery .swiper-pagination .item:last-child{
    margin-bottom: 0;
}

.three-recovery .swiper-pagination .item.active {
    border: 1px solid #BBC2FF;
}

.three-recovery .swiper-pagination .item p.title {
    font-size: 24px;
    font-weight: bold;
    margin: 24px 0px 6px;
}

.three-recovery .swiper-pagination .item p.desc {
    font-size: 16px
}

.three-recovery .swiper-pagination .item p.desc,
.three-recovery .swiper-pagination .item p.title {
    color: #999999;
}

.three-recovery .swiper-pagination .item.active {
    opacity: 1;
}
.three-recovery .swiper-pagination .item.active p.title {
    color: #2E2E2E;
}

.three-recovery .swiper-pagination .item.active p.title span {
    color: #207cfb;
}

.three-recovery .swiper-pagination .item.active p.desc {
    color: #666666;
}

.three-recovery .swiper-pagination svg {
    fill: #999999;
    margin-right: 20px;
    vertical-align: middle;
}

.three-recovery .swiper-pagination .active svg {
    fill: #4858EC;
}

.three-recovery .swiper-pagination .active b {
    color: #4858EC;
}
.three-recovery .swiper-pagination .active b span:after {
    background: #4858EC;
}
.three-recovery .swiper-pagination b {
    display: flex;
    align-items: center;
    color: #999999;
    margin-bottom: 10px;
}

.three-recovery .swiper-pagination b em{
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.three-recovery .swiper-pagination b span {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 14px;
}
.three-recovery .swiper-pagination b span:after {
    content: "";
    display: inline-block;
    background: #A8A8A8;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.three-recovery .mob-pagination{
    display: none;
}

.three-recovery .guide-link{
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 30px auto 0;
    color: #4858EC;
}
.three-recovery .swiper-container {
    margin: 0 0 0 auto;
}


.compatibility {
    position: relative;
    padding: 0 0 130px;
}
.compatibility:before {
    content: '';
    position: absolute;
    top: -225px;
    left: 0;
    display: inline-block;
    width: 413px;
    height: 521px;
    background: url("../png/compatibility-before.png") no-repeat;
    z-index: -1;
}
.compatibility h2 {
    font-weight: bold;
    margin-bottom: 60px;
    text-align: center;
}
.compatibility .box {
    display: flex;
    justify-content: space-between;
}
.compatibility .box .item {
    position: relative;
    padding: 20px 24px 28px;
    width: calc(100% / 3 - 40px);
    height: 350px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.18) 100%);
    box-shadow: 0px 4px 7px rgba(174, 193, 247, 0.3);
    border-radius: 20px;
    border: 1px solid #EBEBEB;
    overflow: hidden;
}
.compatibility .box .item:hover {
    border: 1px solid #BBC2FF;
}
.compatibility .box .item:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 12px;
    background: linear-gradient(90.02deg, #91F8FF 1.26%, #C99EFF 97.78%);
}
.compatibility .box .item p.title {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
}
.compatibility .box .item p.title:before {
    content: '';
    display: inline-block;
    width: 29px;
    height: 29px;
    margin-right: 6px;
}
.compatibility .box .item:nth-child(1) p.title:before {
    background: url("../png/compatibility-title-icon-1.png") no-repeat;
    background-size: 100%;
}
.compatibility .box .item:nth-child(2) p.title:before {
    background: url("../png/compatibility-title-icon-2.png") no-repeat;
    background-size: 100%;
}
.compatibility .box .item:nth-child(3) p.title:before {
    background: url("../png/compatibility-title-icon-3.png") no-repeat;
    background-size: 100%;
}
.compatibility .box .item ul li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 16px;
}
.compatibility .box .item ul li:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: linear-gradient(180deg, #4858EC 0%, rgba(72, 88, 236, 0.45) 100%);
    position: absolute;
    top: 8px;
    left: 0;
}
.compatibility .box .item ul li b {
    padding-bottom: 4px;
}


.bottom-banner {
    background: url("../png/bottom-banner-bg.png") no-repeat;
    background-size: cover;
    height: 432px;
    text-align: center;
    color: #ffffff;
    padding: 108px 0 60px;
}
.bottom-banner h2 {
    font-size: 34px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 24px;
}
.bottom-banner p.p-title {
    color: #ffffff;
    margin-bottom: 34px;
}
.bottom-banner .base-switching-button .button {
    margin-bottom: 8px;
}
.bottom-banner .base-switching-button .product-button {
    justify-content: center;
}
.bottom-banner .base-switching-button .download-button {
    margin-right: 24px;
}
.bottom-banner .base-switching-button .download-button .button {
    border: 1px solid;
}
.bottom-banner .base-switching-button .buy-button .button {
    color: #ffffff;
    background: linear-gradient(90.49deg, #FFA726 2.26%, #FF8F26 104.39%);
}
.bottom-banner .base-switching-button .download-button .button:hover {
    /* color: #4276FF;
    background: #FFFFFF; */
}
.bottom-banner .base-switching-button .buy-button .button:hover {
    background: linear-gradient(90.49deg, #FFA726 2.26%, #FF8F26 104.39%);
}


.faqs {
    padding: 130px 0;
}
.faqs .box {
    display: flex;
    justify-content: center;
}
.faqs .lt {
    max-width: 250px;
    flex-shrink: 0;
    margin-right: 75px;
}
.faqs .lt h2 {
    font-weight: bold;
    position: relative;
    margin-bottom: 8px;
    padding-top: 25px;
}
.faqs .lt h2:before {
    content: '';
    display: inline-block;
    width: 55px;
    height: 8px;
    background: linear-gradient(90deg, #6573FA 6.36%, #5A69F5 107.27%);
    border-radius: 24px;
    position: absolute;
    top: 0;
    left: 0;
}
.faqs .lt p {
    margin-bottom: 40px;
}

.faqs .rt {
    flex: auto;
}
.faqs .rt .faqs-list {
    border-top: 1px solid #D8DAE6;
    border-bottom: 1px solid #D8DAE6;
}
.faqs .rt .faqs-list .faqs-item {

}
.faqs .rt .faqs-list .faqs-item:not(:last-child) {
    border-bottom: 1px solid #D8DAE6;
}
.faqs .rt .faqs-list .faqs-item .faqs-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}
.faqs .rt .faqs-list .faqs-item h4 {
    font-size: 18px;
    font-weight: bold;
}
.faqs .rt .faqs-list .faqs-item.active h4,
.faqs .rt .faqs-list .faqs-item:hover h4 {
    color: #4858EC;
}
.faqs .rt .faqs-list .faqs-item svg {
    fill: #979797;
    transition: all linear .2s;
}
.faqs .rt .faqs-list .faqs-item.active svg {
    fill: #4858EC;
    transform: rotate(45deg);
}
.faqs .rt .faqs-list .faqs-item:hover svg {
    fill: #4858EC;
}
.faqs .rt .faqs-list .faqs-item .faqs-answer {
    color: #575868;
}
.faqs .rt .faqs-list .faqs-item .faqs-answer p {
    margin-bottom: 12px;
}
.faqs .rt .faqs-list .faqs-item .faqs-answer p b {
    color: #1A1C34;
}

.join-our {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../png/join-our-bg.png") no-repeat;
    background-size: cover;
    height: 193px;
    text-align: center;
}
.join-our h2 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 40px;
}
.join-our p {
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-our p a {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0 17px;
}
.join-our p a.youtube {
    background: url("../png/youtube.png") no-repeat;
    background-size: 100%;
}
.join-our p a.discord {
    background: url("../png/discord.png") no-repeat;
    background-size: 100%;
}


.reviews-of {
    padding: 0px 0 130px
}

.reviews-of .swiper-pagination-wrapper {
    overflow: hidden;
    padding: 71px 172px 10px 171px;
}

.reviews-of .swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
}

.reviews-of .container {
    max-width: 1230px
}

.reviews-of .title {
    color: #1A1C34;
    text-align: center;
    font-family: Open Sans;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.reviews-of .box {
    margin-top: 60px;
    max-width: 1180px;
}

.reviews-of .swiper-area {
    height: 257px;
    border-radius: 20px;
    border: 1px solid #EBEBEB;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.18) 100%);
    box-shadow: 0px 4px 7px 0px rgba(174, 193, 247, 0.30);
}

.reviews-of .item {
    width: 203px;
    height: 60px;
    opacity: 0.5;
    cursor: pointer;
}

.reviews-of .item.active {
    opacity: 1;
}

/* .item:nth-child(2) picture {
    width: 176px;
    height: 60px;
}
.item:nth-child(3) picture {
    width: 148px;
    height: 60px;
}
.item:nth-child(4) picture {
    width: 148px;
    height: 60px;
} */

.reviews-of .swiper1 {
    /* border-radius: 24px;
    background: #FFF;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .12);
    height: 257px;
    overflow: hidden; */
    /* margin: 0 10px 20px */
    width: 100%;
    overflow: hidden;
    height: 257px;
}

.reviews-of h4 {
    color: #080B29;
    font-size: 20px;
    font-weight: 700;
    margin: 32px 0 0
}

.reviews-of .swiper1 .swiper-wrapper {
    height: auto
}

.reviews-of .swiper1 .swiper-pagination {
    position: unset;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 79px auto 45px;
    cursor: pointer;
    max-width: 837px
}

.reviews-of .swiper1 .swiper-pagination .item {
    opacity: .5
}

.reviews-of .swiper1 .swiper-pagination .item picture {
    height: 60px
}

.reviews-of .swiper1 .swiper-pagination .item picture img {
    height: 100%
}

.reviews-of .swiper1 .swiper-pagination .item.active {
    opacity: 1
}

.reviews-of .swiper1 .swiper-pagination .swiper-slide {
    position: relative
}

.reviews-of .swiper1 .swiper-slide:before,
.reviews-of .swiper1 .swiper-slide:after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: url(../png/quotation-icon-1.png) no-repeat 0 0 / 100%;
    position: absolute;
    top: 26px;
}

.reviews-of .swiper1 .swiper-slide {
    padding: 35px;
}

.reviews-of .swiper1 .swiper-slide:before {
    left: 60px;
    transform: translateY(-100%)
}

.reviews-of .swiper1 .swiper-slide:after {
    top: unset;
    right: 60px;
    bottom: -24px;
    transform: translateY(-100%);
    background: url(../png/quotation-icon-2.png) no-repeat 0 0 / 100%
}

.reviews-of .box+p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 42px 0 0;
    text-decoration: underline
}

.reviews-of .box+p svg {
    width: 24px;
    height: 24px;
    margin-right: 10px
}

.reviews-of .box+p a {
    color: #000
}

.reviews-of .bottom {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 20px;
}

.reviews-of .bottom .lt,
.reviews-of .bottom .rt {
    max-width: 580px;
    width: 100%;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .12);
    /* margin: 0 10px */
}

.reviews-of .bottom .lt:not(:last-child) {
    margin-right: 20px;
}

.reviews-of .bottom .lt {
    padding: 32px 60px 28px
}

.reviews-of .bottom .lt .swiper2 {
    /* min-height: 358px; */
    min-height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.reviews-of .bottom .lt .swiper2 h4 {
    margin: 0 auto 28px
}

.reviews-of .bottom .lt .swiper2 .swiper-wrapper {
    flex: 1
}

.reviews-of .bottom .lt .swiper2 .swiper-slide {
    height: auto;
    overflow: hidden;
    border-radius: 5px;
}

.reviews-of .bottom .lt .swiper2 .control {
    display: flex;
    flex-direction: column
}

.reviews-of .bottom .lt .swiper2 .control .bt {
    display: flex;
    justify-content: flex-end
}

.reviews-of .bottom .lt .swiper2 .control .bt svg {
    margin: 0 8px
}

.reviews-of .bottom .lt .swiper2 .swiper-pagination {
    font-size: 0;
    margin: 12px 0 0
}

.reviews-of .bottom .lt .swiper2 .swiper-pagination-bullet {
    background: #0003;
    opacity: 1;
    margin: 0 8px
}

.reviews-of .bottom .lt .swiper2 .swiper-pagination-bullet-active {
    background: #4858EC
}

.reviews-of .bottom .lt .swiper2 .swiper-pagination,
.reviews-of .bottom .lt .swiper2 .swiper-button-next,
.reviews-of .bottom .lt .swiper2 .swiper-button-prev {
    position: unset
}

.reviews-of .bottom .lt .swiper2 .swiper-button-next,
.reviews-of .bottom .lt .swiper2 .swiper-button-prev {
    background: none;
    width: 24px;
    height: 24px
}

.reviews-of .bottom .lt .swiper2 svg:hover circle {
    fill: #4858EC
}

.reviews-of .bottom .lt .swiper2 svg:hover path {
    stroke: #fff;
    stroke-opacity: 1
}

.reviews-of .bottom .lt .swiper2 .swiper-button-next {
    transform: rotate(180deg)
}

.reviews-of .bottom .lt iframe {
    border-radius: 5px;
    width: 100%;
    height: 100%
}

.reviews-of .bottom .rt {
    padding: 32px 40px 28px 68px
}

.reviews-of .bottom .rt h4 {
    margin: 0 0 32px
}

.reviews-of .bottom .rt .reviews-box .reviews {
    position: relative;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #FAFAFF;
    padding: 20px 24px 20px 38px;
    text-align: left
}

.reviews-of .bottom .rt .reviews-box .reviews:first-child {
    margin: 0 0 20px
}

.reviews-of .bottom .rt .reviews-box .reviews .msg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.reviews .msg {
    font-size: 14px;
}

.reviews-of .bottom .rt .reviews-box .reviews .msg .stars {
    margin: 0 0 12px
}

.reviews-of .bottom .rt .reviews-box .reviews .msg .stars svg {
    width: 20px;
    height: 20px
}

.reviews-of .bottom .rt .reviews-box .reviews .msg+p {
    font-size: 13px
}

.reviews-of .bottom .rt .reviews-box .reviews picture {
    position: absolute;
    max-width: 54px;
    top: 50%;
    transform: translateY(-50%);
    left: -28px
}

 .reviews-box .reviews picture {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.play-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-size: 70px;
    background: url(https://images.anyrecover.com/anyrecoveren/assets/activity/christmas_sales_2023/video.svg) no-repeat center center;
}

@media (max-width: 1024px) {
    .play-button {
        background: url(https://images.anyrecover.com/anyrecoveren/assets/activity/christmas_sales_2023/video.svg) no-repeat center center / 12%;
    }
    .reviews-of .swiper-area {
        border-radius: 24px;
        background: #FFF;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .12);
        height: unset;
        overflow: hidden;
        padding: 30px 0 0px 20px;
    }

    .reviews-of .swiper-pagination-wrapper {
        width: 100%;
        overflow-x: scroll;
        padding: unset;
        /* 隐藏滚动条在Firefox浏览器中 */
        scrollbar-width: none;
    }

    .reviews-of .swiper-pagination-wrapper::-webkit-scrollbar {
        display: none;
        height: 0 !important;
        -webkit-appearance: none;
    }

    .reviews-of .swiper-pagination {
        position: static;
        display: flex;
        justify-content: flex-start;
    }

    .reviews-of .item {
        flex-shrink: 0;
        opacity: 0.5;
        /* width: 203px; */
        /* height: 60px; */
        width: auto;
    }

    .reviews-of .bottom .lt:not(:last-child) {
        margin-right: 0;
    }

    .reviews-of .item.active {
        opacity: 1;
    }

    .reviews-of .item img {
        height: 44px;
    }

    .reviews-of {
        padding: 0px 0 60px;
    }

    .reviews-of .title {
        font-size: 24px;
        color: #333;
        line-height: 1.2;
        margin-bottom: 23px;
    }

    .reviews-of .box {
        margin-top: 0;
    }

    .reviews-of .swiper1 {
        /* margin: 0 0 17px; */
        height: auto;
        padding: 52px 0 82px
    }

    .reviews-of .swiper1 .swiper-slide,
    .reviews-of .swiper1 .swiper-pagination {
        display: block;
        padding: 0 20px;
        margin: 0;
    }

    .reviews-of h4 {
        margin: 0
    }

    .reviews-of .swiper1 .swiper-slide:before {
        left: 20px;
        top: -24px;
        transform: translateY(-100%);
    }

    .reviews-of .swiper1 .swiper-slide:after {
        top: unset;
        right: 20px;
        bottom: -24px;
        transform: translateY(100%);
    }

    .reviews-of .bottom .lt {
        padding: 30px 20px;
        margin: 0 0 17px
    }

    .reviews-of .bottom .lt .swiper2 .swiper-pagination {
        display: none
    }

    .reviews-of .bottom .lt .swiper2 .control .bt {
        justify-content: center;
        margin: 24px 0 0
    }

    .reviews-of .bottom .rt {
        margin: 0;
        padding: 30px 16px 30px 44px
    }

    .reviews-of .bottom .rt .reviews-box .reviews .msg .stars {
        margin: 0
    }

    .reviews-of .bottom .rt .reviews-box .reviews .msg+p {
        margin: 10px 0 0
    }

    .reviews-of .box+p {
        margin: 26px 0 0
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .awesome-features .box {
        align-items: unset;
        flex-direction: column;
        justify-content: center;
    }
    .top-banner .right {
        right: -15px;
        transform: scale(0.85);
    }
    .banner-available-star #star-reviews {
        white-space: nowrap;
    }
    .base-switching-button .base-flex {
        flex-wrap: nowrap;
    }
    .sheen-box .base-switching-button .base-version-switching p {
        white-space: nowrap;
    }
    #spanstext-swiper .swiper-slide {
        white-space: nowrap;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .reviews-of .swiper-pagination {
        justify-content: center;
    }
}

@media (max-width: 1380px) {
    .container {
        padding: 0 15px;
    }
}
@media (max-width: 992px) {
    .top-banner .right {display: none}
    .top-banner .right.small {
        display: block;
    }
    .top-banner {
        padding: 30px 0;
    }
    .top-banner .top {
        flex-direction: column;
    }
    .top-banner .left, .top-banner .right.small {
        width: 100%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .top-banner .right.small {
        transform: scale(.7) translateY(-35px);
        right: 0;
    }
    .top-banner h1,
    #spanstext-swiper .swiper-slide {
        font-size: 24px;
        text-align: center;
    }

    .top-banner ul {
        margin: 0 0 20px;
    }
    .top-banner ul li {
        font-size: 14px;
    }
    .top-banner .bottom {
        margin: 36px auto 26px;
        height: auto;
        background: url(../png/top-banner-before.png) no-repeat;
        background-size: 100%;
    }
    .top-banner .bottom .box {
        flex-wrap: wrap;
        justify-content: center;
    }
    .top-banner .bottom .box div.item {
        width: calc(100% / 2 - 30px);
        height: 115px;
        margin: 7.5px;
    }
    .top-banner:before, .top-banner:after {
        display: none;
    }
    .top-banner .bottom .box div.item div p.numbers {
        line-height: 0.6;
        margin: 5px 0 0;
    }
    .top-banner .bottom .box div.item div p.numbers b {
        font-size: 20px;
    }
    .top-banner .bottom .box div.item div p.numbers+p {
        line-height: 1.2;
        font-size: 12px;
    }
    .top-banner .bottom .box div.item div picture {
        width: 20px;
    }

    .any-scenarios:before, .any-scenarios:after {
        display: none;
    }
    .any-scenarios h2 {
        font-size: 24px;
        line-height: 1.2;
    }
    .any-scenarios h2+p {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .any-scenarios .box .img {
        height: auto;
        padding-top: 0;
    }
    .any-scenarios .box .img .computer {
        transform: scale(.6)!important;
    }
    .any-scenarios .box .content {
        margin-top: 40px;
    }
    .any-scenarios .box .content h3 {
        font-size: 16px;
    }
    .any-scenarios .box .content p {
        margin-bottom: 4px;
    }
    .any-scenarios .box .content a.general-bt {
        margin-top: 20px;
    }
    .lr-box {
        margin: 45px 15px 0;
        padding: 40px 0 58px;
    }
    .lr-box.reverse {
        margin: 35px 15px 0;
    }
    .lr-box picture {
        display: none;
    }
    .lr-box .content picture {
        display: block;
    }
    .lr-box .container {
        height: auto;
        justify-content: center;
    }
    .lr-box h2 {
        padding-top: 20px;
        text-align: center;
        line-height: 1.2;
    }
    .lr-box h2:before {
        left: 50%;
        transform: translateX(-50%);
    }
    .lr-box ul {
        margin-bottom: 20px;
    }
    .lr-box ul li {
        margin-bottom: 0;
        font-size: 14px;
    }
    .lr-box a.general-bt {
        display: flex;
        margin: 50px auto 0;
    }

    .awesome-features {
        padding: 0;
        margin-top: 60px;
    }
    .awesome-features:before {
        top: unset;
        left: -175px;
        bottom: -215px;
        transform: scale(.5);
    }
    .awesome-features:after {
        bottom: unset;
        top: -190px;
        right: -131px;
        transform: scale(.5);
    }
    .awesome-features .content-box h2 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 40px;
    }
    .awesome-features .content-box {
        padding: 60px 12px;
    }

    .awesome-features .box {
        align-items: unset;
        flex-direction: column;
        justify-content: center;
    }
    .awesome-features .box #awesome-features {
        max-width: 100%;
    }
    .awesome-features .box .swiper-slide .content p {
        font-size: 14px;
    }
    .awesome-features .box .swiper-slide .content b {
        font-size: 16px;
    }
    .awesome-features .box .swiper-pagination {
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0px;
    }
    .awesome-features .box .swiper-pagination .item {
        width: calc(100% / 2 - 20px);
        height: auto;
        margin: 10px;
    }
    .awesome-features .box .swiper-pagination .item p{
        font-size: 13px;
    }
    .awesome-features .box .swiper-pagination .item picture {
        margin: 0;
    }
    .blogs-with {
        padding: 100px 0 110px;
    }
    .blogs-with h2 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 47px;
    }
    .blogs-with .swiper-wrapper {
        flex-direction: column;
    }
    .blogs-with #blogs-with .item {
        margin-bottom: 30px;
    }
    .blogs-with #blogs-with {
        padding-bottom: 12px;
    }

    .three-recovery {
        padding: 0 0 68px;
    }
    .three-recovery h2 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 23px;
    }
    .three-recovery .p-title {
        margin: 0;
    }
    .three-recovery .swiper-pagination{
        width: 100%;
        margin: 0 auto;
    }
    .three-recovery .box {
        display: block;
        margin-top: 23px;
    }
    .three-recovery .swiper-container {
        max-width: unset;
        margin: 40px auto 0;
    }
    .three-recovery .swiper-container .swiper-slide {height:1px}
    .three-recovery .swiper-container .swiper-slide-active { height:auto}
    .three-recovery .swiper-wrapper img{
        width: 100%;
        height: auto;
    }
    .three-recovery .swiper-pagination .item {
        height: auto;
        margin-bottom: 10px;
    }
    .three-recovery .guide-link {
        margin: 40px auto 0;
    }
    .three-recovery .swiper-pagination .item {
        margin-bottom: 30px;
    }

    .compatibility {
        height: auto;
        padding:  0 0 70px;
    }
    .compatibility h2 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 30px;
    }
    .compatibility:before {
        display: none;
    }
    .compatibility .box {
        flex-direction: column;
        align-items: center;
    }
    .compatibility .box .item {
        width: 100%;
    }
    .compatibility .box .item:not(:last-child) {
        margin-bottom: 30px;
    }
    .bottom-banner {
        height: auto;
        background: url(../png/bottom-banner-bg-m.png) no-repeat;
        background-size: 100%;
        min-height: 484px;
        padding: 52px 0 0px;
    }
    .bottom-banner h2 {
        font-size: 24px;
        line-height: 1.2;
    }
    .bottom-banner .base-switching-button .product-button {
        flex-direction: column;
        align-items: center;
    }
    .bottom-banner h2,
    .bottom-banner p.p-title,
    .bottom-banner .base-switching-button .download-button {
        margin: 0 0 18px 0;
    }
    .faqs {
        padding: 40px 0;
    }
    .faqs .box {
        flex-direction: column;
        justify-content: center;
    }
    .faqs .lt {
        text-align: center;
        margin: 0;
        max-width: unset;
    }
    .faqs .lt h2 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 10px;
        padding-top: 18px;
    }
    .faqs .lt h2:before {
        left: 50%;
        transform: translateX(-50%);
    }
    .faqs .lt p {
        margin-bottom: 27px;
    }
    .faqs .rt {
        margin-top: 15px;
    }
    .faqs .rt .faqs-list .faqs-item .faqs-answer p,
    .faqs .rt .faqs-list .faqs-item h4 {
        font-size: 14px;
    }
    .join-our {
        background: #F8F7FE;
    }
    .join-our h2 {
        line-height: 1.2;
        margin-bottom: 30px;
    }
    .lr-box .container div:last-child:before {
        display: none;
    }
    .lr-box.run .container div {opacity: 1}
    #lr-box-1.run .container div:first-child {
        -webkit-animation: none;
        animation: none;
    }
    #lr-box-1.run .container div:last-child {
        -webkit-animation: none;
        animation: none;
    }
    #lr-box-2.reverse.run .container div:first-child {
        -webkit-animation: none;
        animation: none;
    }
    #lr-box-2.reverse.run .container div:last-child {
        -webkit-animation: none;
        animation: none;
    }
}

@media (max-width: 470px) {
    .top-banner .right.small {
        /*transform: scale(.5);*/
    }
    .top-banner .right.small .computer-screen-box {
        top: -45px;
        left: 14px;
    }
    .top-banner .right.small .computer-screen {
        transform: scale(0.7)!important;
    }

}