* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.content {
    max-width: 1600px;
    margin: 0 auto;
    position: relative
}

.largecontent {
    max-width: 100%;
    padding: 0 4rem
}

html {
    scroll-behavior: smooth
}

.flex {
    display: flex
}

.wrap {
    flex-wrap: wrap
}

.flex1 {
    flex: 1
}

.flex2 {
    flex: 2
}

.flex3 {
    flex: 3
}

.between {
    justify-content: space-between
}

.center {
    text-align: center
}

.boxshadow {
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    background: #fff
}

.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center
}


ul {
    list-style: none
}

a {
    color: var(--title_color);
    text-decoration: none;
    font-size: 1rem
}

i {
    font-style: normal
}

.swiper_box {
    position: relative
}

.swiper_content {
    max-width: 1620px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
    overflow: hidden
}

button,input,textarea {
    outline: none;
    border: none;
    font-family: unset
}

input[type="submit"],button {
    cursor: pointer
}

textarea {
    resize: none
}

input[type="number"] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-family: unset
}

.center {
    text-align: center
}

.flex_start {
    justify-content: flex-start
}

.flex_center {
    justify-content: center
}

.flex_end {
    justify-content: flex-end
}

.flex_top {
    align-items: flex-start
}

.flex_middle {
    align-items: center
}

.flex_bottom {
    align-items: flex-end
}

body {
    color: var(--title_color);
    font-family: 'Plus Jakarta Sans',sans-serif
}

body.fixed {
    overflow: hidden;
    padding-right: 17px
}

.only_mobile {
    display: none
}

.content .content {
    padding: 0
}

.gap {
    gap: 1.25rem
}

.head h2 {
    font-size: 55px;
    font-weight: 700;
    line-height: 62px
}

.head h2 span {
    color: var(--subtheme_color)
}

.button_more {
    display: inline-block;
    border-radius: 100px;
    background-color: #eff3f7;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    position: relative;
    padding: 18px 82px 21px 32px;
    transition: all 0.4s;
    overflow: hidden
}

.button_more:hover {
    color: #fff;
    padding: 18px 57px 21px;
    background-color: var(--theme_color)
}

.button_more:hover::after {
    transform: translate(calc(100% + 6px)) scale(.8)
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/page_banner3/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    background-color: transparent
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/page_banner3/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.view_more:hover::after {
    transform: scale(1.1)
}

.learn_more {
    display: inline-block;
    border-radius: 100px;
    background-color: var(--subtheme_color);
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 18px 71px 21px 28px;
    transition: all 0.4s;
    overflow: hidden
}

.learn_more:hover {
    padding: 18px 49.5px 21px;
    box-shadow: 0 0 8px var(--subtheme_color)
}

.learn_more:hover::after {
    transform: translate(calc(100% + 6px)) scale(.8)
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/page_banner3/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.page_banner {
    background: no-repeat top center / cover
}

.page_banner .flex {
    min-height: 948px;
    padding: 5rem 0
}

.page_banner .head {
    color: #fff;
    max-width: 1054px
}

.page_banner .head h1 {
    font-size: 4rem;
    line-height: 74px;
    font-weight: 800
}

.page_banner .head p {
    font-size: 23px;
    line-height: 39px;
    font-weight: 200;
    max-width: 884px;
    margin-top: 30px
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .swiper_content {
        padding: 10px 1.2rem
    }

    .obly_mobile {
        display: block
    }

    .head .subtitle {
        font-size: 14px
    }

    .head h1 {
        font-size: 25px;
        line-height: 1.5
    }

    .head h2 {
        font-size: 22px;
        line-height: 1.5
    }

    .head p {
        font-size: .9rem;
        line-height: 1.5rem
    }

    .video_pop {
        padding: 0
    }

    .video_pop .pop_content {
        max-width: 100%;
        width: calc(100% - 2.4rem)
    }

    .video_pop .pop_content iframe {
        width: 100%;
        min-height: unset
    }

    .button_more,.learn_more {
        font-size: 14px!important;
        padding: 10px 3rem 12px 1rem!important
    }

    .button_more::after,.learn_more::after {
        width: 2rem!important;
        height: 2rem!important;
        top: 4px!important;
        right: 4px!important
    }

    .button_more:hover,.learn_more:hover {
        padding: 10px 2rem 12px!important
    }

    .view_more {
        font-size: 14px;
        gap: 8px
    }

    .view_more::after {
        width: 2.5rem;
        height: 2.5rem
    }

    .page_banner {
        padding-top: 4rem
    }

    .page_banner .flex {
        min-height: 200px;
        padding: 2rem 0
    }

    .page_banner .head h1 {
        font-size: 25px;
        line-height: 1.5
    }

    .page_banner .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: 1rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }

    .swiper_content {
        padding: 10px 1.2rem;
        max-width: 1460px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }

    .swiper_content {
        max-width: 1240px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }

    .swiper_content {
        max-width: 1020px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .swiper_content {
        max-width: 806px
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.tools_part_vendor .tools_part_box {
    padding: 4rem 0;
    text-align: center
}

.tools_part_vendor .tools_part_box input {
    padding: .8rem 1rem;
    border-radius: 5px;
    min-width: 300px;
    border: 1px #ddd solid
}

.tools_part_vendor .tools_part_box button {
    background: #fff;
    border: 1px solid #f8f8f8;
    color: #4c4c4c;
    padding: .8rem 1.5rem;
    display: inline-block;
    font-weight: 500;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #33bde9;
    border: 1px solid #33bde9;
    color: #fff;
    padding: .8rem 1.5rem
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }
}

@media screen and (min-width: 786px) and (max-width:1400px) {
    .content {
        padding:0 1.2rem
    }
}

@media screen and (min-width: 786px) and (max-width:1200px) {
    .content {
        max-width:1000px
    }

    .solution_strength .head p {
        width: 70%
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .solution_strength .head p {
        width: 90%
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_global/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_global/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_global/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.procure_global {
    padding: 56px 0 82px
}

.procure_global .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap
}

.procure_global .head h2 {
    flex: 1;
    max-width: 680px;
    margin-top: 4px
}

.procure_global .head div {
    flex: 1;
    max-width: 807px
}

.procure_global .head p {
    color: #545454;
    font-size: 20px;
    line-height: 36px;
    padding-bottom: 36px
}

.procure_global .head .button_more {
    margin-top: 10px;
    padding: 18px 82px 21px 54px
}

.procure_global .head .button_more:hover {
    padding: 18px 68px 21px
}

.procure_global img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 100px auto 0
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .procure_global {
        padding: 0 0 4rem
    }

    .procure_global .head {
        display: block
    }

    .procure_global .head h2 {
        margin-top: 0
    }

    .procure_global .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem;
        padding-bottom: 0
    }

    .procure_global .head .button_more {
        margin-top: 1.25rem
    }

    .procure_global img {
        margin-top: 2rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_channel/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_channel/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_channel/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.procure_channel {
    overflow: hidden;
    position: relative
}

.procure_channel::after {
    content: '';
    display: block;
    width: 100vw;
    height: calc(100% - 78px);
    background-color: var(--theme_color);
    position: absolute;
    bottom: 0;
    left: 44.125%;
    z-index: 2;
    border-radius: 12px
}

.procure_channel .img {
    min-width: 64.875%;
    height: calc(100% - 78px);
    overflow: hidden;
    border-radius: 12px;
    margin-right: -5%;
    transition: all 1s;
    flex-shrink: 0
}

.procure_channel .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.procure_channel .head {
    min-width: 50.25%;
    color: #fff;
    padding: 197px 0 132px;
    position: relative;
    z-index: 3
}

.procure_channel .head h2 {
    font-size: 46px;
    font-weight: 700;
    line-height: 62px
}

.procure_channel .head p {
    margin-top: 28px;
    opacity: .85;
    font-size: 20px;
    line-height: 36px;
    font-weight: 300
}

.procure_channel .head ul {
    margin-top: 50px
}

.procure_channel .head ul li {
    margin-bottom: 44px;
    font-size: 24px;
    font-weight: 500;
    line-height: 2rem;
    padding-left: 8.4577%;
    position: relative
}

.procure_channel .head ul li::before {
    content: '';
    display: block;
    width: 4.975%;
    aspect-ratio: 1/1;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_channel/assets/img/gou-yuan.svg) no-repeat center / contain;
    position: absolute;
    left: 0;
    top: -3px
}

.procure_channel .head ul li:last-child {
    margin-bottom: 0
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .procure_channel {
        background-color: var(--theme_color);
        padding: 1.2rem 0 4rem
    }

    .procure_channel::after {
        display: none
    }

    .procure_channel .flex {
        display: block
    }

    .procure_channel .img {
        transform: translate(0)!important;
        margin-right: 0
    }

    .procure_channel .head {
        padding: 2rem 0 0
    }

    .procure_channel .head h2 {
        font-size: 22px;
        line-height: 1.5
    }

    .procure_channel .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .procure_channel .head ul {
        margin-top: 2rem
    }

    .procure_channel .head ul li {
        margin-bottom: .7rem;
        font-size: .9rem;
        line-height: 1.5rem
    }

    .procure_channel .head ul li::before {
        top: 4px
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_system/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_system/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_system/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.procure_system {
    padding: 204px 0 185px
}

.procure_system .head {
    max-width: 914px;
    margin: 0 auto
}

.procure_system .head p {
    color: var(--content_color);
    font-size: 20px;
    line-height: 36px;
    margin-top: 30px
}

.procure_system .main {
    margin-top: 62px;
    position: relative
}

.procure_system .main .line {
    border-top: 2px dashed rgba(36,36,36,.15);
    width: calc((100% - 2rem)*4/5);
    position: absolute;
    left: 50%;
    top: 238px;
    transform: translateX(-50%)
}

.procure_system .main .line i {
    display: block;
    height: 2px;
    background-color: var(--subtheme_color);
    width: 0;
    transition: all 0.3s;
    position: absolute;
    left: 0;
    top: -2px
}

.procure_system .main ul {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1rem
}

.procure_system .main ul li {
    text-align: center
}

.procure_system .main ul li.active span {
    background-color: var(--subtheme_color)
}

.procure_system .main ul li.active span::after {
    opacity: 1;
    transform: translate(-50%,-50%)
}

.procure_system .main ul li .img {
    max-width: 168px;
    aspect-ratio: 1/1;
    transition: all 0.3s;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0 auto
}

.procure_system .main ul li .img img {
    width: 44%;
    height: 44%;
    object-fit: contain
}

.procure_system .main ul li span {
    background-color: var(--theme_color);
    border-radius: 50%;
    transition: all 0.3s;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 46px;
    min-width: 46px;
    margin: 3rem auto 0;
    display: block;
    max-width: max-content;
    position: relative
}

.procure_system .main ul li span::after {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 12px solid rgba(132,192,44,.25);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.5);
    box-sizing: border-box;
    transition: all 0.3s;
    opacity: 0
}

.procure_system .main ul li p {
    font-size: 22px;
    font-weight: 700;
    margin-top: 42px
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .procure_system {
        padding: 4rem 0 3rem
    }

    .procure_system .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .procure_system .main {
        margin-top: 2rem
    }

    .procure_system .main .line {
        display: none
    }

    .procure_system .main ul {
        display: block
    }

    .procure_system .main ul li {
        margin-bottom: 1.2rem;
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: 1rem
    }

    .procure_system .main ul li .img {
        width: 4rem;
        order: 2
    }

    .procure_system .main ul li span {
        font-size: 14px;
        min-width: 2rem;
        height: 2rem;
        line-height: 2rem;
        margin: .5rem 0 0
    }

    .procure_system .main ul li span::after {
        width: 3rem;
        height: 3rem
    }

    .procure_system .main ul li p {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 1rem;
        flex: 1;
        order: 3;
        margin-top: .5rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .procure_system .main ul li .img {
        max-width: 120px
    }

    .procure_system .main .line {
        top: 190px
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(wp-content/plugins/sytech-fronteditor/sytpl/procure_management/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(wp-content/plugins/sytech-fronteditor/sytpl/procure_management/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(wp-content/plugins/sytech-fronteditor/sytpl/procure_management/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.procure_management {
    background: url(wp-content/plugins/sytech-fronteditor/sytpl/procure_management/assets/img/procure-management-bg.svg) no-repeat center / cover
}

.procure_management .content {
    height: 1337px;
    padding: 122px 0 0
}

.procure_management .head {
    max-width: 1214px;
    margin: 0 auto
}

.procure_management .head p {
    font-size: 20px;
    line-height: 36px;
    color: var(--content_color);
    margin-top: 30px
}

.procure_management .middle {
    font-size: 2rem;
    line-height: 45px;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--theme_color);
    border-radius: 50%;
    width: 22%;
    aspect-ratio: 1/1;
    font-weight: 700
}

.procure_management .bottom {
    text-align: center;
    font-size: 20px;
    line-height: 36px;
    color: var(--content_color);
    max-width: 1214px;
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 8.227%;
    transform: translateX(-50%)
}

.procure_management ul li {
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    transition: all 0.3s;
    position: absolute;
    max-width: 372px
}

.procure_management ul li.active {
    color: var(--subtheme_color)
}

.procure_management ul li:nth-child(1) {
    left: 11.5%;
    top: 31%;
    text-align: right
}

.procure_management ul li:nth-child(2) {
    left: 65%;
    top: 31%
}

.procure_management ul li:nth-child(3) {
    left: 13%;
    top: 55.5%;
    text-align: right
}

.procure_management ul li:nth-child(4) {
    left: 70%;
    top: 55.5%
}

.procure_management ul li:nth-child(5) {
    left: 50%;
    transform: translateX(-50%);
    top: 75%;
    text-align: center
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .procure_management {
        padding: 3rem 0;
        background: none
    }

    .procure_management .content {
        padding: 0 1.2rem;
        height: auto
    }

    .procure_management .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .procure_management .middle {
        position: static;
        transform: translate(0);
        width: 200px;
        font-size: 18px;
        line-height: 1.5;
        margin: 2rem auto 0
    }

    .procure_management ul {
        margin-top: 1rem
    }

    .procure_management ul li {
        margin-bottom: .7rem;
        position: static;
        text-align: left!important;
        font-size: 1rem;
        line-height: 1.5;
        transform: translate(0)!important
    }

    .procure_management ul li br {
        display: none
    }

    .procure_management .bottom {
        position: static;
        transform: translate(0);
        margin-top: 2rem;
        font-size: 1rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }

    .procure_management ul li:nth-child(1) {
        left: 8.5%
    }

    .procure_management ul li:nth-child(3) {
        left: 9%
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }

    .procure_management .content {
        height: 1000px;
        padding-top: 4rem
    }

    .procure_management ul li:nth-child(1) {
        left: 3.5%
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }

    .procure_management ul li {
        font-size: 1rem;
        line-height: 1.5
    }

    .procure_management ul li:nth-child(2) {
        left: 68%
    }

    .procure_management ul li:nth-child(4) {
        left: 73%
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .procure_management .middle {
        font-size: 2rem;
        line-height: 1.5;
        width: 32%
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/Public/Index/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/Public/Index/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/Public/Index/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.service_box2 {
    padding: 103px 0 135px
}

.service_box2 .head h2 {
    font-size: 46px;
    line-height: 62px
}

.service_box2 .service_swiper {
    margin-top: 76px
}

.service_swiper {
    overflow: hidden
}

.service_swiper .swiper-slide {
    border-radius: 6px
}

.service_swiper .swiper-slide.active a {
    background-color: var(--subtheme_color);
    padding: 0 7.614% 0
}

.service_swiper .swiper-slide.active a i {
    margin-top: -70px;
    opacity: 0
}

.service_swiper .swiper-slide.active a>span {
    margin: 20px auto 0
}

.service_swiper .swiper-slide.active a>span::after {
    background-image: url(/Public/Index/img/arrow-green.svg)
}

.service_swiper .swiper-slide.active a span span {
    padding-right: 12px;
    width: 97px;
    opacity: 1
}

.service_swiper .swiper-slide.active a p {
    height: 306px
}

.service_swiper .swiper-slide a {
    display: block;
    height: 525px;
    background-image: none!important;
    background-color: var(--theme_color);
    transition: all 0.3s;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    position: relative;
    color: #fff;
    padding: 128px 7.614% 0
}

.service_swiper .swiper-slide a:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/Public/Index/img/service-item-bg.svg) no-repeat center / cover
}

.service_swiper .swiper-slide a>span {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 80px auto 0;
    transition: all 0.3s
}

.service_swiper .swiper-slide a>span::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: url(/Public/Index/img/arrow-blue.svg) no-repeat center / cover;
    transition: all 0.3s
}

.service_swiper .swiper-slide a span span {
    white-space: nowrap;
    font-weight: 500;
    padding-right: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.3s;
    opacity: 0
}

.service_swiper .swiper-slide i {
    display: inline-block;
    width: 75px;
    height: 86px;
    background: no-repeat center / contain;
    transition: margin 0.6s cubic-bezier(.34,1.56,.64,1),opacity 0.2s
}

.service_swiper .swiper-slide strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    height: 68px;
    transform: translateY(4px);
    margin-top: 22px
}

.service_swiper .swiper-slide p {
    font-size: 18px;
    line-height: 34px;
    font-weight: 200;
    height: 0;
    transition: all 0.4s;
    -webkit-line-clamp: 9;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .service_swiper .swiper-slide a,.service_swiper .swiper-slide.active a {
        height: auto;
        padding: 2rem 1.2rem 1.6rem
    }

    .service_swiper .swiper-slide a i,.service_swiper .swiper-slide.active a i {
        opacity: 1;
        margin-top: 0;
        width: 3rem;
        height: 3rem
    }

    .service_swiper .swiper-slide a strong,.service_swiper .swiper-slide.active a strong {
        font-size: 18px;
        line-height: 1.5;
        margin-top: 1rem;
        height: auto;
        min-height: 54px
    }

    .service_swiper .swiper-slide a p,.service_swiper .swiper-slide.active a p {
        height: auto;
        font-size: .85rem;
        line-height: 1.3rem;
        margin-top: .5rem
    }

    .service_swiper .swiper-slide a>span,.service_swiper .swiper-slide.active a>span {
        margin: 20px auto 0
    }

    .service_swiper .swiper-slide a>span::after,.service_swiper .swiper-slide.active a>span::after {
        width: 2rem;
        height: 2rem
    }

    .service_swiper .swiper-slide a span span,.service_swiper .swiper-slide.active a span span {
        width: max-content;
        font-size: 14px;
        opacity: 1;
        padding-right: 15px
    }

    .service_box2 .head h2 {
        font-size: 22px;
        line-height: 1.5
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_intro/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_intro/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/procure_intro/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.procure_intro {
    padding: 30px 0 180px
}

.procure_intro .head {
    flex: 1;
    max-width: 660px;
    padding-top: 10px
}

.procure_intro .head p {
    font-size: 20px;
    line-height: 36px;
    color: var(--content_color);
    max-width: 634px;
    margin-top: 2rem
}

.procure_intro .head .button_more {
    margin-top: 62px
}

.procure_intro .img {
    width: 55.75%;
    aspect-ratio: 892/638;
    overflow: hidden;
    border-radius: 18px
}

.procure_intro .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .procure_intro {
        padding: 2rem 0 4rem
    }

    .procure_intro .flex {
        flex-direction: column-reverse
    }

    .procure_intro .img {
        width: 100%;
        border-radius: 12px
    }

    .procure_intro .head {
        padding: 0
    }

    .procure_intro .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .procure_intro .head .button_more {
        margin-top: 1.25rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.content {
    max-width: 1600px;
    margin: 0 auto;
    position: relative
}

.largecontent {
    max-width: 100%;
    padding: 0 4rem
}

html {
    scroll-behavior: smooth
}

.flex {
    display: flex
}

.wrap {
    flex-wrap: wrap
}

.flex1 {
    flex: 1
}

.flex2 {
    flex: 2
}

.flex3 {
    flex: 3
}

.between {
    justify-content: space-between
}

.center {
    text-align: center
}

.boxshadow {
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    background: #fff
}

.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center
}

:root {
    --theme_color: #005692;
    --subtheme_color: #84c02c;
    --title_color: #242424;
    --content_color: #666666
}

ul {
    list-style: none
}

a {
    color: var(--title_color);
    text-decoration: none;
    font-size: 1rem
}

i {
    font-style: normal
}

.swiper_box {
    position: relative
}

.swiper_content {
    max-width: 1620px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
    overflow: hidden
}

button,input,textarea {
    outline: none;
    border: none;
    font-family: unset
}

input[type="submit"],button {
    cursor: pointer
}

textarea {
    resize: none
}

input[type="number"] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-family: unset
}

.center {
    text-align: center
}

.flex_start {
    justify-content: flex-start
}

.flex_center {
    justify-content: center
}

.flex_end {
    justify-content: flex-end
}

.flex_top {
    align-items: flex-start
}

.flex_middle {
    align-items: center
}

.flex_bottom {
    align-items: flex-end
}

body {
    color: var(--title_color);
    font-family: 'Plus Jakarta Sans',sans-serif
}

body.fixed {
    overflow: hidden;
    padding-right: 17px
}

.only_mobile {
    display: none
}

.content .content {
    padding: 0
}

.gap {
    gap: 1.25rem
}

.head h2 {
    font-size: 55px;
    font-weight: 700;
    line-height: 62px
}

.head h2 span {
    color: var(--subtheme_color)
}

.button_more {
    display: inline-block;
    border-radius: 100px;
    background-color: #eff3f7;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    position: relative;
    padding: 18px 82px 21px 32px;
    transition: all 0.4s;
    overflow: hidden
}

.button_more:hover {
    color: #fff;
    padding: 18px 57px 21px;
    background-color: var(--theme_color)
}

.button_more:hover::after {
    transform: translate(calc(100% + 6px)) scale(.8)
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/page_banner/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    background-color: transparent
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/page_banner/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.view_more:hover::after {
    transform: scale(1.1)
}

.learn_more {
    display: inline-block;
    border-radius: 100px;
    background-color: var(--subtheme_color);
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 18px 71px 21px 28px;
    transition: all 0.4s;
    overflow: hidden
}

.learn_more:hover {
    padding: 18px 49.5px 21px;
    box-shadow: 0 0 8px var(--subtheme_color)
}

.learn_more:hover::after {
    transform: translate(calc(100% + 6px)) scale(.8)
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/page_banner/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.page_banner {
    background: no-repeat top center / cover
}

.page_banner .flex {
    min-height: 948px;
    padding: 5rem 0
}

.page_banner .head {
    color: #fff;
    max-width: 1054px
}

.page_banner .head h1 {
    font-size: 4rem;
    line-height: 74px;
    font-weight: 800
}

.page_banner .head p {
    font-size: 23px;
    line-height: 39px;
    font-weight: 200;
    max-width: 884px;
    margin-top: 30px
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .swiper_content {
        padding: 10px 1.2rem
    }

    .obly_mobile {
        display: block
    }

    .head .subtitle {
        font-size: 14px
    }

    .head h1 {
        font-size: 25px;
        line-height: 1.5
    }

    .head h2 {
        font-size: 22px;
        line-height: 1.5
    }

    .head p {
        font-size: .9rem;
        line-height: 1.5rem
    }

    .video_pop {
        padding: 0
    }

    .video_pop .pop_content {
        max-width: 100%;
        width: calc(100% - 2.4rem)
    }

    .video_pop .pop_content iframe {
        width: 100%;
        min-height: unset
    }

    .button_more,.learn_more {
        font-size: 14px!important;
        padding: 10px 3rem 12px 1rem!important
    }

    .button_more::after,.learn_more::after {
        width: 2rem!important;
        height: 2rem!important;
        top: 4px!important;
        right: 4px!important
    }

    .button_more:hover,.learn_more:hover {
        padding: 10px 2rem 12px!important
    }

    .view_more {
        font-size: 14px;
        gap: 8px
    }

    .view_more::after {
        width: 2.5rem;
        height: 2.5rem
    }

    .page_banner {
        padding-top: 4rem
    }

    .page_banner .flex {
        min-height: 200px;
        padding: 2rem 0
    }

    .page_banner .head h1 {
        font-size: 25px;
        line-height: 1.5
    }

    .page_banner .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: 1rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }

    .swiper_content {
        padding: 10px 1.2rem;
        max-width: 1460px
    }
}

@media screen and (min-width: 786px) and (max-width:1400px) {
    .content {
        max-width:1220px
    }

    .swiper_content {
        max-width: 1240px
    }
}

@media screen and (min-width: 786px) and (max-width:1200px) {
    .content {
        max-width:1000px
    }

    .swiper_content {
        max-width: 1020px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .swiper_content {
        max-width: 806px
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/Public/Index/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/Public/Index/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/Public/Index/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.about_intro {
    padding: 188px 0 212px;
    background: url(/Public/Index/img/about-intro-bg.jpg) no-repeat center / cover
}

.about_intro .head p {
    color: var(--content_color);
    font-size: 20px;
    line-height: 36px;
    margin: 46px auto 0;
    max-width: 1078px
}

.about_intro .nums {
    margin-top: 74px;
    display: flex
}

.about_intro .nums li {
    flex: 1;
    text-align: center;
    position: relative
}

.about_intro .nums li::after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    max-height: 134px;
    background-color: #e0e0e0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.about_intro .nums li:last-child::after {
    display: none
}

.about_intro .nums li i {
    display: inline-block;
    width: 85px;
    height: 78px;
    background: no-repeat center / contain;
    margin-bottom: 40px
}

.about_intro .nums li span {
    font-size: 51px;
    font-weight: 800;
    line-height: 1;
    color: var(--theme_color)
}

.about_intro .nums li p {
    color: rgba(36,36,36,.75);
    font-size: 22px;
    line-height: 28px
}

.about_intro .nums li p:last-child {
    margin-top: 26px
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .about_intro {
        padding: 4rem 0
    }

    .about_intro .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .about_intro .nums {
        margin-top: 2rem;
        flex-wrap: wrap
    }

    .about_intro .nums li {
        width: 50%;
        min-width: 50%;
        margin-bottom: 2rem
    }

    .about_intro .nums li:nth-child(even)::after {
        display: none
    }

    .about_intro .nums li i {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: .5rem
    }

    .about_intro .nums li span {
        font-size: 1.6rem
    }

    .about_intro .nums li p {
        font-size: 13px;
        line-height: 1.5
    }

    .about_intro .nums li p:last-child {
        margin-top: .5rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1400px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1200px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .about_intro .nums li i,.home_about .nums li i {
        width: 4rem;
        height: 4rem
    }

    .about_intro .nums li span,.home_about .nums li span {
        font-size: 2rem
    }

    .about_intro .nums li p,.home_about .nums li p {
        font-size: 1rem
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_overview/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_overview/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_overview/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.about_overview {
    padding: 172px 0 110px
}

.about_overview .head {
    flex: 1;
    max-width: 660px;
    padding-bottom: 24px
}

.about_overview .head h2 {
    margin-bottom: 20px
}

.about_overview .head p {
    color: #6b6b6b;
    font-size: 20px;
    line-height: 36px;
    padding-top: 36px
}

.about_overview .img {
    width: 55.75%;
    aspect-ratio: 892/638;
    overflow: hidden;
    border-radius: 18px
}

.about_overview .img img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover
}

@media screen and (max-width: 786px) {
    .about_overview .img {
        width: 100%;
    
    }
    .content {
        padding:0 1.2rem
    }

    .about_overview {
        padding: 4rem 0
    }

    .about_overview .flex {
        display: block
    }

    .about_overview .head h2 {
        margin-bottom: 0
    }

    .about_overview .head p {
        font-size: .9rem;
        line-height: 1.5rem;
        padding-top: .5rem
    }

    .about_overview .img {
        width: 100%;
        border-radius: 12px
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1400px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1200px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }

    .about_overview .content>.flex {
        flex-direction: column
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_history/assets/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_history/assets/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_history/assets/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.about_history {
    background-color: #f0f5f7;
    padding: 126px 0 276px
}

.about_history .main {
    margin-top: 46px;
    position: relative;
    z-index: 2
}

.about_history .main::after {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 425px;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_history/assets/img/about-his-bg.svg) no-repeat center / contain
}

.about_history .main ul {
    display: grid;
    gap: 5%
}

.about_history .main ul li {
    position: relative;
    padding-left: 40px
}

.about_history .main ul li::before {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background: url(/wp-content/plugins/sytech-fronteditor/sytpl/about_history/assets/img/about-his-line.svg) no-repeat bottom center / cover;
    position: absolute;
    left: 0;
    top: 0
}

.about_history .main ul li strong {
    color: var(--subtheme_color);
    font-size: 55px;
    font-weight: 800;
    line-height: 1
}

.about_history .main ul li p {
    color: #6b6b6b;
    font-size: 20px;
    line-height: 36px;
    margin-top: 20px
}

.about_history .main .grid-4 {
    grid-template-columns: repeat(4,1fr)
}

.about_history .main .grid-3 {
    margin-top: 304px;
    grid-template-columns: repeat(3,1fr)
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .about_history {
        padding: 4rem 0
    }

    .about_history .main {
        margin-top: 2rem
    }

    .about_history .main::after {
        height: 100px;
        top: 35%
    }

    .about_history .main ul {
        overflow: auto;
        display: flex;
        gap: 1rem
    }

    .about_history .main ul li {
        padding-left: 1rem;
        top: 0!important;
        min-width: 60%
    }

    .about_history .main ul li strong {
        font-size: 18px;
        line-height: 1.5
    }

    .about_history .main ul li p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .about_history .main .grid-3 {
        margin-top: 4rem
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }

    .about_history .main::after {
        top: 28%
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }

    .about_history .main ul li {
        padding-left: 1.6rem
    }

    .about_history .main ul li strong {
        font-size: 2rem
    }

    .about_history .main ul li p {
        font-size: 1rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }
}

.button_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/Public/Index/img/arrow-blue-full-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.view_more::after {
    content: '';
    display: block;
    width: 76px;
    height: 76px;
    background: url(/Public/Index/img/arrow-btn.svg) no-repeat center / contain;
    transition: all 0.3s
}

.learn_more::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s;
    background: url(/Public/Index/img/arrow-green-r.svg) no-repeat center / contain;
    border-radius: 50%;
    position: absolute;
    right: 6px;
    top: .5rem
}

.service_box2 {
    padding: 103px 0 135px
}

.service_box2 .head h2 {
    font-size: 46px;
    line-height: 62px
}

.service_box2 .service_swiper {
    margin-top: 76px
}

.service_swiper {
    overflow: hidden
}

.service_swiper .swiper-slide {
    border-radius: 6px
}

.service_swiper .swiper-slide.active a {
    background-color: var(--subtheme_color);
    padding: 0 7.614% 0
}

.service_swiper .swiper-slide.active a i {
    margin-top: -70px;
    opacity: 0
}

.service_swiper .swiper-slide.active a>span {
    margin: 20px auto 0
}

.service_swiper .swiper-slide.active a>span::after {
    background-image: url(/Public/Index/img/arrow-green.svg)
}

.service_swiper .swiper-slide.active a span span {
    padding-right: 12px;
    width: 97px;
    opacity: 1
}

.service_swiper .swiper-slide.active a p {
    height: 306px
}

.service_swiper .swiper-slide a {
    display: block;
    height: 525px;
    background-image: none!important;
    background-color: var(--theme_color);
    transition: all 0.3s;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    position: relative;
    color: #fff;
    padding: 128px 7.614% 0
}

.service_swiper .swiper-slide a:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/Public/Index/img/service-item-bg.svg) no-repeat center / cover
}

.service_swiper .swiper-slide a>span {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 80px auto 0;
    transition: all 0.3s
}

.service_swiper .swiper-slide a>span::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: url(/Public/Index/img/arrow-blue.svg) no-repeat center / cover;
    transition: all 0.3s
}

.service_swiper .swiper-slide a span span {
    white-space: nowrap;
    font-weight: 500;
    padding-right: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.3s;
    opacity: 0
}

.service_swiper .swiper-slide i {
    display: inline-block;
    width: 75px;
    height: 86px;
    background: no-repeat center / contain;
    transition: margin 0.6s cubic-bezier(.34,1.56,.64,1),opacity 0.2s
}

.service_swiper .swiper-slide strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    height: 68px;
    transform: translateY(4px);
    margin-top: 22px
}

.service_swiper .swiper-slide p {
    font-size: 18px;
    line-height: 34px;
    font-weight: 200;
    height: 0;
    transition: all 0.4s;
    -webkit-line-clamp: 9;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (max-width: 786px) {
    .content {
        padding:0 1.2rem
    }

    .service_swiper .swiper-slide a,.service_swiper .swiper-slide.active a {
        height: auto;
        padding: 2rem 1.2rem 1.6rem
    }

    .service_swiper .swiper-slide a i,.service_swiper .swiper-slide.active a i {
        opacity: 1;
        margin-top: 0;
        width: 3rem;
        height: 3rem
    }

    .service_swiper .swiper-slide a strong,.service_swiper .swiper-slide.active a strong {
        font-size: 18px;
        line-height: 1.5;
        margin-top: 1rem;
        height: auto;
        min-height: 54px
    }

    .service_swiper .swiper-slide a p,.service_swiper .swiper-slide.active a p {
        height: auto;
        font-size: .85rem;
        line-height: 1.3rem;
        margin-top: .5rem
    }

    .service_swiper .swiper-slide a>span,.service_swiper .swiper-slide.active a>span {
        margin: 20px auto 0
    }

    .service_swiper .swiper-slide a>span::after,.service_swiper .swiper-slide.active a>span::after {
        width: 2rem;
        height: 2rem
    }

    .service_swiper .swiper-slide a span span,.service_swiper .swiper-slide.active a span span {
        width: max-content;
        font-size: 14px;
        opacity: 1;
        padding-right: 15px
    }

    .service_box2 .head h2 {
        font-size: 22px;
        line-height: 1.5
    }
}

@media screen and (min-width: 786px) and (max-width:1600px) {
    .content {
        padding:0 1.2rem;
        max-width: 1440px
    }
}

@media screen and (min-width: 786px) and (max-width:1440px) {
    .content {
        max-width:1220px
    }
}

@media screen and (min-width: 786px) and (max-width:1220px) {
    .content {
        max-width:1000px
    }
}

@media screen and (min-width: 786px) and (max-width:1000px) {
    .content {
        max-width:786px
    }
}