@charset "utf-8";
/*
 * Name     : main.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-12-01
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Hero
    02. Common
    03. Header
    04.
---------------------------------------------------
*/

/* ------------------------------
 * Hero
------------------------------ */
.hero {background-color: #333}
.hero .hero-swiper {height: 100%}
.hero .hero-swiper .swiper-wrapper {height: 100%}
.hero .video-container {position: relative; height: 100%; overflow: hidden; z-index: 10}
.hero .video-container::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.2); z-index: 1}
.hero .video-container > video {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; z-index: -1}
.hero .caption-outer {position: absolute; display: flex; top: 0; left: 0; bottom: 0; right: 0; align-items: center; z-index: 20}
.hero .caption-inner {width: 100%}
.hero .caption-inner h2, .hero .caption-inner .button-container {opacity: 0; transition: opacity .5s}
.hero .caption-inner h2 {font-size: 65px; font-weight: 700; color: #fff; line-height: 1.38}
.hero .caption-inner .button-container {margin-top: 48px; font-size: 0}
.hero .caption-inner .button-container .button-control, .hero .caption-inner .button-container .button-exp {display: inline-flex; height: 51px; border-radius: 30px; align-items: center; justify-content: center; vertical-align: middle}
.hero .caption-inner .button-container .button-control {width: 51px; border: 1px solid #fff; background-color: rgba(255,255,255,.2); background-image: url(../images/main/pause_icon.svg); background-size: 11.5px 13.42px; background-position: center; background-repeat: no-repeat; cursor: pointer; outline: 0}
.hero .caption-inner .button-container .button-control.state--pause {background-image: url(../images/main/play_icon.svg); background-size: 10.54px 13.42px}
.hero .caption-inner .button-container .button-exp {font-size: 16px; font-weight: 700; color: #010f15; margin-left: 8px; padding: 0 30px; background-color: #fff}
.hero .swiper-slide-active .caption-inner h2, .hero .swiper-slide-active .caption-inner .button-container {opacity: 1; transition-delay: 1s}
.hero .info-indicator {position: absolute; bottom: 70px; left: 0; right: 0; z-index: 20; align-items: center}
.hero .info-indicator .inner-content {display: flex; align-items: center}
.hero .info-indicator .inner-content .caption p {font-weight: 500; color: #fff}
.hero .info-indicator .inner-content .count {margin-left: 70px; font-size: 0}
.hero .info-indicator .inner-content .count > span, .hero .info-indicator .inner-content .count > .button-control {display: inline-block; vertical-align: middle}
.hero .info-indicator .inner-content .count > .button-control {width: 14px; height: 20px; padding: 0; background-size: 6px 12px; background-position: center; background-repeat: no-repeat; border: 0; background-color: transparent; cursor: pointer; outline: 0}
.hero .info-indicator .inner-content .count > .button-control.prev {background-image: url(../images/main/pagination_prev.svg)}
.hero .info-indicator .inner-content .count > .button-control.next {background-image: url(../images/main/pagination_next.svg)}
.hero .info-indicator .inner-content .count > .swiper-pagination-custom {width: auto; padding: 0 6px}
.hero .info-indicator .inner-content .count > .swiper-pagination-custom > span {position: relative; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5)}
.hero .info-indicator .inner-content .count > .swiper-pagination-custom > span.current {color: #fff}
.hero .info-indicator .inner-content .count > .swiper-pagination-custom > span.total {padding-left: 21px}
.hero .info-indicator .inner-content .count > .swiper-pagination-custom > span.total::before {content: ''; position: absolute; top: 50%; left: 10px; width: 1px; height: 12px; background-color: rgba(255,255,255,.5); transform: translateY(-50%) rotate(20deg)}
.hero .info-indicator .inner-content .circle-indicator {margin-left: 16px; font-size: 0}
.hero .info-indicator .inner-content .circle-indicator .circle-progrss {transform: rotate(-90deg)}
.hero .info-indicator .inner-content .circle-indicator .hero-progress-meter, .hero .info-indicator .inner-content .circle-indicator .hero-progress-ing {fill: none}
.hero .info-indicator .inner-content .circle-indicator .hero-progress-meter {stroke: rgba(255,255,255,.5)}
.hero .info-indicator .inner-content .circle-indicator .hero-progress-ing {stroke: #fff; stroke-linecap: round}
.hero .scroll-indicator {position: absolute; bottom: 70px; right: 47px; text-align: center; z-index: 10}
.hero .scroll-indicator p {font-size: 12px; font-weight: 600; color: #fff; line-height: 1.16; margin-bottom: 26px; transform: rotate(90deg)}

/* ------------------------------
 * Common
------------------------------ */
.section-container {max-width: 1406px; margin-left: auto; margin-right: auto; padding-left: 36px; padding-right: 36px}
.section .main-heading {font-size: 50px; font-weight: 700; color: #191f28; line-height: 1.3}
#fp-nav ul li, .fp-slidesNav ul li {width: 22px; height: 22px; margin: 16px 0}
#fp-nav ul li a span, .fp-slidesNav ul li a span {width: 6px; height: 6px; background-color: #808080; margin: -3px 0 0 -3px; transition: .3s}
#fp-nav ul li a {z-index: 10}
#fp-nav ul li a::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background-color: rgba(128,128,128,.2); transform: scale(0); transition: background-color .3s, transform .3s; z-index: -1}
#fp-nav ul li a.active::before {transform: scale(1)}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {width: 6px; height: 6px; margin: -3px 0 0 -3px}
#fp-nav.reverse ul li a span {background-color: rgba(255,255,255,.5)}
#fp-nav.reverse ul li a.active span {background-color: #fff}
#fp-nav.reverse ul li a.active::before {background-color: rgba(255,255,255,.2)}

/* ------------------------------
 * Header
------------------------------ */
body.main #header {height: 140px}
body.main #header.scroll {height: 82px}

/* ------------------------------
 * Service
------------------------------ */
.service .service-content-outer {max-width: 1372px; height: 100%; margin: auto; padding-left: 20px; padding-right: 20px}
.service .service-content-inner {display: flex; width: 100%; height: 100%; justify-content: flex-end; align-items: center}
.service .service-content-inner .caption-area .controller-buttons {margin-bottom: 26px; font-size: 0}
.service .service-content-inner .caption-area .controller-buttons .swiper-pagination-bullet {width: auto; height: auto; font-size: 28px; font-weight: 700; color: #acafb3; line-height: 1.6; border-radius: 0; background-color: transparent; opacity: 1; outline: 0}
.service .service-content-inner .caption-area .controller-buttons .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 20px}
.service .service-content-inner .caption-area .controller-buttons .swiper-pagination-bullet-active {color: #ffb42b}
.service .service-content-inner .swiper-area {position: absolute; top: 0; left: 0; bottom: 0; right: 40.8%; max-width: 1194px; z-index: 5}
.service .service-content-inner .swiper-area::after {
    content: ''; position: absolute; display: block; top: 50%; right: -2.4%; width: 31.6145833333vw; max-width: 407px; font-size: 407px; padding-bottom: 1.5568em; background-image: url(../images/main/service_phone_mockup.png); background-size: 100%; background-position: center; background-repeat: no-repeat; z-index: 10; pointer-events: none; transform: translateY(-49.6%)
    
}
.service .service-content-inner .appscreen-swiper {height: 100%}
.service .service-content-inner .appscreen-swiper .swiper-wrapper {align-items: center}
.service .service-content-inner .swiper-area .swiper-slide {height: auto}
.service .service-content-inner .swiper-area .swiper-slide figure {position: relative; margin: 0; padding: 0; opacity: .6; transform: scale(0.7734); transition: opacity .3s, transform .3s}
.service .service-content-inner .swiper-area .swiper-slide figure::after {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; opacity: .05; transition: opacity .3s}
.service .service-content-inner .swiper-area .swiper-slide figure img {display: block; width: 100%}
.service .service-content-inner .swiper-area .swiper-slide-active figure {opacity: 1; transform: scale(1)}
.service .service-content-inner .swiper-area .swiper-slide-active figure::after {opacity: 0}

/* ------------------------------
 * Achievement
------------------------------ */
.achievement {text-align: center; background-image: radial-gradient(57.13% 57.13% at 50% 85.74%, #2B3A4E 0%, #2F3338 100%)}
.achievement h3 {font-size: 50px; font-weight: 700; color: #6b7684}
.achievement .count-text {font-family: 'Ramabhadra', 'Pretendard', sans-serif; font-size: 424px; color: #292c31; line-height: 1; margin-top: 64px; margin-bottom: 64px; pointer-events: none; user-select: none}
.achievement .wallet-container {position: absolute; top: 50%; left: 0; right: 0; z-index: 10; transform: translateY(-50%)}
.achievement .wallet-container img {width: 480px; user-select: none; pointer-events: none}
.achievement .particles-container {position: absolute; top: 50%; left: 0; right: 0; max-width: 1920px; height: 50%; margin: auto; transform: translateY(-62%); z-index: 20}
.achievement h2 {font-size: 60px; font-weight: 700; color: #fff}
.achievement h2 span {display: inline-block; background-image: linear-gradient(91.38deg, #ffaf00 68.03%, #fde101 83.84%); -webkit-background-clip: text; -webkit-text-fill-color: transparent}

/* ------------------------------
 * Features
------------------------------ */
.features .features-grid-wrapper {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between}
.features .features-grid-wrapper .grid-left {width: 26.98%}
.features .features-grid-wrapper .grid-left .main-heading {margin-bottom: 40px}
.features .features-grid-wrapper .grid-left .pagination-buttons {font-size: 0; margin-bottom: 38px}
.features .features-grid-wrapper .grid-left .pagination-buttons .swiper-pagination-bullet {display: inline-flex; width: 38px; height: 38px; font-size: 20px; font-weight: 700; color: #6b7684; line-height: 2.25; padding: 0; border: 1px solid #6b7684; border-radius: 50%; background-color: #fff; align-items: center; justify-content: center; opacity: .4; outline: 0}
.features .features-grid-wrapper .grid-left .pagination-buttons .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 20px}
.features .features-grid-wrapper .grid-left .pagination-buttons .swiper-pagination-bullet-active {color: #fff; border-color: #ffb42b; background-color: #ffb42b; opacity: 1}
.features .features-grid-wrapper .grid-left .text-swiper .swiper-slide p {font-size: 20px; font-weight: 700; color: #e7e9eb; line-height: 1.2}
.features .features-grid-wrapper .grid-right {width: 49.77%}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-wrapper {align-items: center}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide .video-container {position: relative; padding-bottom: 100%; overflow: hidden}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide .video-container video {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container {max-width: 426px; margin: auto}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item {position: relative; display: flex; height: 120px; padding: 0 38px; flex-wrap: wrap; align-items: center; border-radius: 12px; background-color: #fff; box-shadow: 0 0 33px rgba(0,0,0,.13); z-index: 5; overflow: hidden}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(289.49deg, #ffc644 36.93%, #ffb62e 79.63%); opacity: 0; z-index: -1; transform: rotate(-180deg); transition: opacity .3s}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item + .card-item {margin-top: 20px}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item .icon {width: 90px; margin: 0}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item h4 {font-size: 26px; font-weight: 700; color: #191f28; line-height: 1.19; flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 25px; transition: color .3s}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item.active::before {opacity: 1}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item.active h4 {color: #fff}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container {position: relative; max-width: 578px; margin: auto}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .mockup {position: relative; width: 372px; margin: auto; background-image: url(../images/main/features_slide04_outline.svg); background-size: 100%; background-position: center; background-repeat: no-repeat}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .mockup::before {content: ''; display: block; padding-bottom: 145.1612903226%}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .mockup p {position: absolute; top: 13.5185185185%; left: 17.4731182796%; font-size: 26px; font-weight: 600; color: #191f28; line-height: 1.19; z-index: 5}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row {position: absolute; bottom: 17.037037037%; left: 0; right: 0; display: flex; margin-left: -7px; margin-right: -7px; flex-wrap: wrap; z-index: 10}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-item {padding-left: 8px; padding-right: 8px; flex-basis: 0; flex-grow: 1; max-width: 100%}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner {padding: 41px 24px; text-align: center; border-radius: 20px; background-color: #ffbc36; box-shadow: 0 0 20px rgba(0,0,0,.13)}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner .icon {display: flex; width: 90px; height: 90px; margin: auto; align-items: center; justify-content: center}
.features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner p {font-size: 26px; font-weight: 700; color: #fff; line-height: 1.19; margin-top: 17px}

/* ------------------------------
 * Investiment
------------------------------ */
.investiment .main-heading {margin-bottom: 28px}
.investiment .pagination-buttons {margin-bottom: 60px; font-size: 0}
.investiment .pagination-buttons .swiper-pagination-bullet {display: inline-flex; width: auto; height: 60px; font-size: 20px; font-weight: 700; color: #6b7684; line-height: 1.2; margin-right: 8px; padding: 0 36px; border-radius: 43px; background-color: #efefef; align-items: center; opacity: 1; outline: 0}
.investiment .pagination-buttons .swiper-pagination-bullet-active {color: #fff; background-color: #191f28}
.investiment .investiment-swiper {overflow: visible}
.investiment .investiment-swiper .swiper-slide .round-box {position: relative; display: flex; height: 510px; padding: 0 200px; border-radius: 22px; justify-content: space-between; align-items: center; overflow: hidden; z-index: 5}
.investiment .investiment-swiper .swiper-slide .round-box::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; transform: rotate(-180deg); z-index: -1}
.investiment .investiment-swiper .swiper-slide.slide-01 .round-box::before {background-image: radial-gradient(100.1% 553.05% at 0% -13.5%, #2c3a4d 0%, #303439 52.69%)}
.investiment .investiment-swiper .swiper-slide.slide-02 .round-box::before {background-image: linear-gradient(101.39deg, #85bbff 15.04%, #b0d3ff 85.18%)}
.investiment .investiment-swiper .swiper-slide .round-box .box-img {margin: 0; padding: 0; width: 50%}
.investiment .investiment-swiper .swiper-slide .round-box .box-text h3 {font-size: 46px; font-weight: 700; color: #fff; line-height: 1.28; margin-top: 44px; margin-bottom: 12px}
.investiment .investiment-swiper .swiper-slide .round-box .box-text p {font-size: 23px; font-weight: 600; color: rgba(255,255,255,.6); line-height: 1.47}

/* ------------------------------
 * Experience
------------------------------ */
.experience {text-align: center}
.experience h2 {font-size: 60px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 45px; background-image: linear-gradient(91.19deg, #ff8a00 30.71%, #fdd501 87.42%); -webkit-background-clip: text; -webkit-text-fill-color: transparent}
.experience .button-exp {display: inline-flex; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; padding: 0 38px; height: 60px; border-radius: 30px; background-color: #191f28; align-items: center}

@media (max-width: 1200px) {
    .service .service-content-inner .swiper-area::after {
        max-width: 607px;
    }
}

@media (min-width: 768px) {
    .achievement .wallet-container img {transform: translateX(-43px)}
    .investiment .investiment-swiper .swiper-button-next, .investiment .investiment-swiper .swiper-button-prev {display: none}
}

@media (max-width: 2014px) {
    .service .service-content-inner .swiper-area::after {width: 29.6vw}
}

@media (max-width: 1466px) {
    .service .service-content-inner .swiper-area::after {width: 28.8vw}
}

@media (max-width: 1199px) {    
    .hero .caption-inner h2 {font-size: 56px}

    body.main #header {height: 110px}

    .section .main-heading {font-size: 42px}

    .service .service-content-inner .caption-area .controller-buttons .swiper-pagination-bullet {font-size: 24px}
    .service .service-content-inner .swiper-area::after {right: -2%; transform: translateY(-49.4%)}

    .achievement h3 {font-size: 42px}
    .achievement .count-text {font-size: 400px}
    .achievement h2 {font-size: 50px}

    .features .sticky-content-wrap .content-header .en-heading {font-size: 24px}

    .investiment .investiment-swiper .swiper-slide .round-box {padding: 0 140px}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text h3 {font-size: 40px}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text p {font-size: 21px}

    .experience h2 {font-size: 50px}
}

@media (max-width: 991px) {
    body.main #header {height: 80px}
    body.main #header.scroll {height: 67px}

    .section:not(.hero) {height: auto !important}
    .section .main-heading {font-size: 32px}
    .fp-tableCell {height: inherit !important}
    
    .service {padding-top: 100px; padding-bottom: 105px}
    .service .service-content-inner {display: block; text-align: center}
    .service .service-content-inner .caption-area {display: flex; flex-direction: column; margin-bottom: 90px}
    .service .service-content-inner .caption-area .main-heading {margin-bottom: 16px; order: 1}
    .service .service-content-inner .caption-area .controller-buttons {margin-bottom: 0; order: 2}
    .service .service-content-inner .swiper-area {position: relative; top: auto; left: auto; bottom: auto; right: auto; margin: auto; width: 360px; max-width: 100%}
    .service .service-content-inner .swiper-area::after {top: -73px; left: 50%; right: auto; width: 590px; font-size: 590px; transform: translate(calc(-50% - 88px),0)}
    .service .service-content-inner .swiper-area .swiper-slide figure {transform: scale(1)}
    .service .service-content-inner .swiper-area .swiper-slide figure::after {opacity: 0}

    .features {padding-top: 160px; padding-bottom: 160px}
    .features .features-grid-wrapper .grid-right .visual-swiper {overflow: visible}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide {padding: 16px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item {height: 90px; padding: 0 28px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item .icon {width: 55px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item h4 {font-size: 22px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row {margin-left: -3.5px; margin-right: -3.5px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row {margin-left: -3.5px; margin-right: -3.5px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-item {padding-left: 3.5px; padding-right: 3.5px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner {padding: 28px 20px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner .icon {width: 50px; height: 50px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner p {font-size: 22px}

    .investiment .pagination-buttons .swiper-pagination-bullet {font-size: 18px}
    .investiment .investiment-swiper .swiper-slide .round-box {height: 400px; padding: 0 80px}
    .investiment .investiment-swiper .swiper-slide .round-box .box-img {width: 40%}
    .investiment .investiment-swiper .swiper-slide.slide-01 .round-box .box-text img {width: 33px}
    .investiment .investiment-swiper .swiper-slide.slide-02 .round-box .box-text img {width: 21px}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text h3 {font-size: 32px; margin-top: 32px}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text p {font-size: 19px}

    .experience {padding-top: 160px; padding-bottom: 160px}
}

@media (max-width: 767px) {
    .hero .caption-outer {align-items: flex-end}
    .hero .caption-inner {padding-bottom: 21.25vh}
    .hero .caption-inner h2 {font-size: 30px; line-height: 1.2}
    .hero .caption-inner .button-container {margin-top: 25px}
    .hero .caption-inner .button-container .button-control {display: none}
    .hero .caption-inner .button-container .button-exp {margin-left: 0}
    .hero .info-indicator {display: none}
    .hero .scroll-indicator {bottom: 16px; left: 0; right: 0}
    .hero .scroll-indicator p {margin-bottom: 9px; transform: none}

    .section .main-heading {font-size: 24px; line-height: 1.25}

    .service .service-content-outer {height: auto}
    .service .service-content-inner .caption-area {margin-bottom: 64px}
    .service .service-content-inner .caption-area .controller-buttons .swiper-pagination-bullet {font-size: 16px; line-height: 1.1875}
    .service .service-content-inner .caption-area .controller-buttons .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 10px}
    .service .service-content-inner .swiper-area {width: 211px}
    .service .service-content-inner .swiper-area::after {top: -43px; bottom: auto; width: 352px; font-size: 352px; transform: translate(calc(-50% - 52px),0)}

    .achievement {padding-top: 100px; padding-bottom: 75px}
    .achievement .container {position: relative}
    .achievement h3 {font-size: 24px}
    .achievement .count-text {font-size: 166px; margin-top: 110px}
    .achievement .wallet-container {top: 102px; transform: translateY(0)}
    .achievement .wallet-container img {width: 220px}
    .achievement .particles-container {transform: translateY(-76%)}
    .achievement h2 {font-size: 28px; line-height: 1.428}

    .features {padding-top: 100px; padding-bottom: 74px}
    .features .features-grid-wrapper > div {width: 100% !important}
    .features .features-grid-wrapper .grid-left {text-align: center; margin-bottom: 17px}
    .features .features-grid-wrapper .grid-left .main-heading {margin-bottom: 26px}
    .features .features-grid-wrapper .grid-left .pagination-buttons {margin-bottom: 17px}
    .features .features-grid-wrapper .grid-left .pagination-buttons .swiper-pagination-bullet {width: 32px; height: 32px; font-size: 20px}
    .features .features-grid-wrapper .grid-left .text-swiper .swiper-slide p {font-size: 15px; letter-spacing: -0.025em; line-height: 1.4}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-wrapper {align-items: flex-start}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide {padding: 0}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item {height: 73px; padding: 0 23px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item h4 {font-size: 16px; line-height: 1.1875; padding-left: 16px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-02 .card-item-container .card-item + .card-item {margin-top: 11px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .mockup {width: 197px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .mockup p {top: 13.34613371%; left: 17.72158313%; font-size: 16px; line-height: 1.1875}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row {bottom: 17.48978568%}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner {padding: 22px 16px 27px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner .icon {width: 48px; height: 48px}
    .features .features-grid-wrapper .grid-right .visual-swiper .swiper-slide.slide-04 .slide-container .card-row .card-inner p {font-size: 14px; line-height: 1.21; margin-top: 8px}

    .investiment .pagination-buttons {position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; margin-bottom: 0; z-index: 10}
    .investiment .pagination-buttons .swiper-pagination-bullet {font-size: 0; width: 6px; height: 6px; margin: 0 4px; padding: 0; border-radius: 50%; background-color: rgba(255,255,255,.5)}
    .investiment .pagination-buttons .swiper-pagination-bullet-active {background-color: #fff}
    .investiment .main-heading {text-align: center; margin-bottom: 34px}
    .investiment .investiment-swiper .swiper-slide .round-box {height: 100%; padding: 17px 36px 64px; flex-direction: column; justify-items: center}
    .investiment .investiment-swiper .swiper-slide .round-box .box-img {display: flex; width: 100%; height: 230px; margin-bottom: 19px; justify-content: center; align-items: center}
    .investiment .investiment-swiper .swiper-slide .round-box .box-img img {max-width: 216px}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text {text-align: center}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text h3 {font-size: 24px; line-height: 1.375; margin-top: 34px; margin-bottom: 0}
    .investiment .investiment-swiper .swiper-slide .round-box .box-text p {display: none}
    .investiment .investiment-swiper .swiper-button-next, .investiment .investiment-swiper .swiper-button-prev {width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255,255,255,.2); background-size: 8px auto; background-position: center; background-repeat: no-repeat; outline: 0; transition: opacity .15s}
    .investiment .investiment-swiper .swiper-button-next {right: 12px; background-image: url(../images/main/investiment_arrow_next.svg)}
    .investiment .investiment-swiper .swiper-button-prev {left: 12px; background-image: url(../images/main/investiment_arrow_prev.svg)}
    .investiment .investiment-swiper .swiper-button-next::after, .investiment .investiment-swiper .swiper-button-prev::after {display: none}
    .investiment .investiment-swiper .swiper-button-next.swiper-button-disabled, .investiment .investiment-swiper .swiper-button-prev.swiper-button-disabled {opacity: 0}

    .experience {padding-top: 80px; padding-bottom: 145px}
    .experience h2 {font-size: 34px; line-height: 1.32; margin-bottom: 38px}
}