.container-wrapper.index-solutions {
    background-position: top;
    background-size: 100%
}

.container-wrapper.index-solutions .container-box {
    max-width: none
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

/* html {
    font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 16px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: #fff;
    box-sizing: border-box
} */

/* *,
:after,
:before {
    box-sizing: border-box;
    margin: 0
} */

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

.solutions-wrapper .nav-wrapper {
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    color: #ffffffad
}

.solutions-wrapper .nav-box {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 80px
}

.solutions-wrapper .nav-box .nav-item {
    cursor: pointer;
    padding: 0 20px 22px;
    position: relative;
    text-align: center
}

.solutions-wrapper .nav-box .nav-item .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px
}

.solutions-wrapper .nav-box .nav-item:hover {
    color: var(--primary)
}

.solutions-wrapper .nav-box .nav-item.active {
    color: #fff
}

.solutions-wrapper .nav-box .nav-item.active:after {
    width: 100%
}

.solutions-wrapper .nav-box .nav-item.active:hover {
    color: #fff
}

.solutions-wrapper .nav-box .nav-item:after {
    background-color: #fff;
    border-radius: 2px;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transition: width .3s;
    width: 0
}

.solutions-wrapper .pane-wrapper {
    color: #ffffffd6;
        height: 600px;
    margin: 0 auto;
    max-width: 1400px;
    overflow: hidden;
    position: relative
}

.solutions-wrapper .pane-box {
    align-items: center;
    display: flex;
    height: 540px;
    justify-content: space-between;
    /*height: 640px;*/
    /*left: 0;*/
    /*position: absolute;*/
    /*top: 0;*/
    width: 100%
}

.solutions-wrapper .pane-box .video-wrapper {
    /*align-self: flex-end;*/
    flex: 0 0 auto;
    max-width: 420px
    /*max-width: 520px*/
}

.solutions-wrapper .pane-box .video-wrapper video {
    width: 100%
}

.solutions-wrapper .pane-box .sloutions-wrapper {
    flex: 0 0 auto;
    max-width: 400px;
    /*max-width: 445px;*/
    /*padding-bottom: 60px*/
}

.solutions-wrapper .pane-box .sloutions-wrapper .title {
    font-size: 32px;
    font-weight: 500;
    line-height: 45px;
    margin-bottom: 60px
}

.solutions-wrapper .pane-box .sloutions-wrapper .title span {
    font-weight: 400;
    opacity: .68
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info {
    color: #333;
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li {
    background-repeat: no-repeat;
    background-size: 66px 66px;
    margin-bottom: 40px;
    padding-left: 85px
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li.li1-1 {
    background-image: url(../icon/adv4.png)
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li.li1-2 {
    background-image: url(../icon/adv5.png)
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li.li1-3 {
    background-image: url(../icon/adv6.png)
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info.li3 {
    padding-left: 0;
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info.li3 li {
    background-repeat: no-repeat;
    background-size: 66px 66px;
    margin-bottom: 40px;
    background-position: right;
    padding-left: 0;
    padding-right: 85px
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info.li3 .li-title {
    text-align: right;
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li.li3-1 {
    background-image: url(../icon/adv1.png)
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li.li3-2 {
    background-image: url(../icon/adv2.png)
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info li.li3-3 {
    background-image: url(../icon/adv3.png)
}




.solutions-wrapper .pane-box .sloutions-wrapper .pane-info .li-title {
    color: #222;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
    position: relative
}

.solutions-wrapper .pane-box .sloutions-wrapper .pane-info .li-text {
    font-size: 14px;
    line-height: 21px;
    position: relative
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

.container-wrapper.index-solutions {
    background-position: top;
    background-size: 100%
}

.container-wrapper.index-solutions .container-box {
    max-width: none
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

@keyframes spin-4d402ea5 {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

.btn-gradient {
    background: linear-gradient(135deg, #00e0b6, #007dec);
    border: none;
    color: #fff
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

:root {
    --primary: #2c6bff;
    --primaryHover: #3985ff;
    --primaryActive: #0051cd
}

/* html {
    font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 16px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: #fff;
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: border-box;
    margin: 0
} */


/* ul {
    list-style: none;
} */

.btn {
    align-items: center;
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 128px;
}

a {
    text-decoration: none;
}

.btn {
    align-items: center;
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 128px;
}


.btn-gradient {
    background: linear-gradient(135deg, #00e0b6, #007dec);
    border: none;
    color: #fff;
}


*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

::after,
::before {
    --tw-content: ''
}


/* html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
} */

/* body {
    margin: 0;
    line-height: inherit
}

h1 {
    font-size: inherit;
    font-weight: inherit
} */

.m_width {
    max-width: 1200px;
    margin: 0 auto;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}


h1,
p {
    margin: 0
}


img {
    display: block;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

.mt-6 {
    margin-top: 1.5rem
}

.grid {
    display: grid
}

.w-full {
    width: 100%
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}

.pt-16 {
    padding-top: 4rem
}

.pb-16 {
    padding-bottom: 4rem
}

.text-center {
    text-align: center
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}

.font-bold {
    font-weight: 700
}

.leading---60px-l {
    line-height: 60px
}

.tracking-wider {
    letter-spacing: 0.05em
}

.text----009EFF {
    --tw-text-opacity: 1;
    color: rgb(0 158 255 / var(--tw-text-opacity, 1))
}

@media (min-width: 1024px) {

    .lg---mt-0 {
        margin-top: 0px
    }

    .lg---mt-16 {
        margin-top: 60px
    }

    .lg---flex {
        display: flex
    }

    .lg---flex-1 {
        flex: 1 1 0%;
        display: flex;
        align-items: center;
    }

    .lg---flex-col {
        flex-direction: column
    }

    .lg---justify-between {
        justify-content: space-between
    }

    .lg---gap---60px-l {
        gap: 40px
    }

    .lg---px-0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .lg---pb---190px-l {
        padding-bottom: 190px
    }

    .lg---pr-10 {
        padding-right: 40px;
        max-width: 35%;
    }

    .lg---text-left {
        text-align: left
    }

    .lg---text-4xl {
        /* font-size: 2.5rem;
        line-height: 2.5rem */
        margin-bottom: 10px;
        font-size: 36px;
    }

    .lg---text-base {
        /* font-size: 1.2rem;
        line-height: 2rem */
        margin-bottom: 10px;
        font-size: 20px;
    }

    .lg---text---60px-l {
        font-size: 30px
    }

    .lg---text-lg {
        font-size: 14px;
        line-height: 1.6
    }
}