/* .tp_list {
    padding: 0 var(--all-pd) 10px;
    background: #fff;
    overflow-x: auto
} */

.tp_list a {
    flex-shrink: 0;
    position: relative
}

.tp_list a:first-child span {
    position: absolute;
      right: 10px;
    bottom: 7px;
    color: #fff
}

.com_sytle .t1 {
    font-family: Poppins;
    font-size: 60px;
    line-height: 1.3
}

.com_sytle .t2 {
    font-family: Poppins;
    font-size: 40px;
    line-height: 1.3
}

.com_sytle .t3 {
    font-size: 22px;
    color: #666666;
    line-height: 30px;
    margin-top: 17px
}

.success {
    margin-top: calc((100 / 19.2) * 1%);
    background: #e8f6fd;
    padding: calc((152 / 16.2) * 1%) 0 calc((190 / 16.2) * 1%)
}

.success .s_main {
    --l-w: calc((748 / 16) * 1%);
    --pd: calc((200 / 16) * 1%)
}

.success .s_main .t1 {
    color: var(--color-main)
}

.success .s_main .t2 {
    color: #333333;
    margin-top: 30px
}

.success .s_main .r2 {
    --pd: 20px;
    --mt: 20px
}

.success .s_main .it2 {
    padding: 57px 25px 43px 44px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    transition: all .3s ease
}

.success .s_main .it2:hover {
    background: var(--color-main)
}

.success .s_main .it2:hover .tt1,
.success .s_main .it2:hover .tt2,
.success .s_main .it2:hover .tt1 span {
    color: #fff
}

.success .s_main .it2:nth-child(even) {
    position: relative;
    top: 50px
}

.success .s_main .tt1 {
    font-family: Poppins;
    font-size: 55px;
    color: var(--color-main);
    line-height: 1
}

.success .s_main .tt1 span {
    font-family: Poppins;
    color: var(--color-main);
    font-size: 30px
}

.success .s_main .tt2 {
    font-size: 18px;
    color: #666666;
    line-height: 30px;
    margin-top: 20px
}

.design {
    padding: calc((183 / 19.2) * 1%) 0 calc((147 / 19.2) * 1%)
}

.design .des_main {
    --l-w: calc((767 / 16) * 1%);
    --pd: calc((116 / 16) * 1%)
}

.design .des_main .t2 {
    font-size: 22px;
    line-height: 30px;
    margin-top: 30px
}

.design .des_main .t3 {
    margin-top: 30px
}

.design .des_main .lists {
    margin-top: 30px;
    display: flex;
    justify-content: space-between
}

.design .des_main .lists .it1 {
    width: calc(50% - 10px)
}

.design .des_main .lists .tt1 {
    font-family: Poppins;
    font-size: 22px;
    line-height: 30px
}

.design .des_main .lists ul {
    margin-top: 15px
}

.design .des_main .lists ul::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0
}

.design .des_main .lists ul li {
    position: relative;
    line-height: 30px;
    color: #999999;
    padding-left: 20px
}

.design .des_main .lists ul li::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-main);
    position: absolute;
    top: 10px;
    left: 0
}

.design .des_main .img {
    height: auto;
    padding: 0
}

.design .des_main .detail {
    position: absolute;
    padding: 40px 23px 36px 57px;
    background: rgba(0, 0, 0, 0.43);
    border-radius: 0px 0px 0px 10px;
    left: 0;
    bottom: 0
}

.design .des_main .detail .item {
    margin-top: 20px
}

.design .des_main .detail .item .tt1 {
    font-family: Poppins;
    font-size: 22px;
    color: var(--color-main);
    line-height: 30px
}

.design .des_main .detail .item .tt2 {
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    line-height: 30px;
    margin-top: 10px
}

.pro_exe {
    padding: calc((188 / 19.2) * 1%) 0 calc((176 / 19.2) * 1%);
    background: var(--color-main)
}

.pro_exe .pro_exe_main {
    --l-w: calc((780 / 16) * 1%);
    --pd: calc((100 / 16) * 1%)
}

.pro_exe .pro_exe_main .t1 {
    color: #ffffff
}

.pro_exe .pro_exe_main .t2 {
    font-size: 22px;
    color: #ffffff;
    line-height: 30px;
    margin-top: 30px
}

.pro_exe .pro_exe_main .t3 {
    color: #ffffff;
    margin-top: 30px
}

.pro_exe .pro_exe_main .lists>ul {
    margin-top: 15px
}

.pro_exe .pro_exe_main .lists>ul li {
    position: relative;
    line-height: 30px;
    padding-left: 20px;
    color: #fff;
    font-size: 18px
}

.pro_exe .pro_exe_main .lists>ul li::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 10px;
    left: 0
}

.pro_exe .pro_exe_main .rrr .rlist {
    --pd: 8px;
    --mt: 11px
}

.pro_exe .pro_exe_main .rrr .item {
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    padding: 43px 10px 33px
}

.pro_exe .pro_exe_main .rrr .item img {
    max-width: 55px
}

.pro_exe .pro_exe_main .rrr .item span {
    margin-top: 10px;
    font-size: 18px;
    color: #666
}

.training {
    padding: calc((209 / 19.2) * 1%) 0 calc((117 / 19.2) * 1%)
}

.training .tr_main {
    --l-w: calc((780 / 16) * 1%);
    --pd: calc((100 / 16) * 1%);
    align-items: center
}

.training .tr_main .t1 {
    color: var(--color-main)
}

.training .tr_main .t2 {
    font-size: 22px;
    color: #333;
    line-height: 30px;
    margin-top: 20px
}

.training .tr_main .t3 {
    margin-top: 30px
}

.training .tr_main .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px
}

.training .tr_main .lists .l_item {
    width: calc(50% - 10px)
}

.training .tr_main .lists .t2 {
    color: var(--color-main)
}

.training .tr_main .lists ul {
    margin-top: 15px
}

.training .tr_main .lists ul li {
    position: relative;
    line-height: 30px;
    padding-left: 20px;
    color: #999;
    font-size: 18px
}

.training .tr_main .lists ul li::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-main);
    position: absolute;
    top: 10px;
    left: 0;
    opacity: .66
}

.training .tr_main .rrr {
    display: flex;
    flex-wrap: wrap
}

.training .tr_main .rrr .item {
    width: 50%;
    padding: 33px 43px 28px 49px;
    padding: 100px 60px;
    border: 1px solid #e8f6fd;
    transition: all .3s ease
}

.training .tr_main .rrr .item:first-child {
    font-family: Poppins;
    font-size: 37px;
    color: #ffffff;
    line-height: 1.3;
    background: var(--color-main);
    padding: 50px 33px 46px
}

.training .tr_main .rrr .item:not(:first-child):hover {
    background: #e8f6fd
}

.training .tr_main .rrr img {
    max-width: 53px
}

.training .tr_main .rrr span {
    font-size: 18px;
    color: #666666;
    line-height: 30px;
    margin-top: 4px;
    display: block
}

.life_services {
    padding: calc((194 / 19.2) * 1%) 0 calc((180 / 19.2) * 1%);
    background: #e8f6fd
}

.life_services .lists {
    --pd: 15px;
    --mt: 50px;
    margin-top: calc((60 / 16) * 1%)
}

.life_services .lists .item {
    background: #ffffff;
    box-shadow: 0 0 24px 0 #ccc;
    border-radius: 20px 20px 20px 20px;
    padding: 40px 24px;
    transition: all .3s ease
}

.life_services .lists .item:hover {
    background: var(--color-main)
}

.life_services .lists .item:hover .num,
.life_services .lists .item:hover .title,
.life_services .lists .item:hover .desc {
    color: #fff
}

.life_services .lists .item .num {
    font-family: Poppins;
    font-size: 70px;
    color: var(--color-main);
    line-height: 1
}

.life_services .lists .item .title {
    font-family: Poppins;
    font-size: 22px;
    color: #333333;
    line-height: 30px
}

.life_services .lists .item .desc {
    font-size: 18px;
    color: #666666;
    line-height: 30px
}

.life_services .kpi {
    margin-top: calc((123 / 16) * 1%)
}

.life_services .kpi .lists2 {
    display: flex;
    flex-wrap: wrap
}

.life_services .kpi .lists2 .item {
    display: flex;
    align-items: center;
    margin-top: 50px;
    width: calc(100% / 3)
}

.life_services .kpi .lists2 .item:nth-child(-n + 3) {
    margin-top: 83px
}

.life_services .kpi .lists2 .img {
    width: 72px;
    height: 72px;
    background: var(--color-main);
    margin-right: 35px;
    border-radius: 50%;
    flex-shrink: 0
}

.life_services .kpi .lists2 .t3 {
    margin-top: 0
}

.indus {
    padding-top: calc((159 / 19.2) * 1%)
}

.indus .in_main {
    background: var(--color-main);
    border-radius: 20px 20px 20px 20px;
    margin-top: calc((50 / 16) * 1%);
    padding: 67px 70px;
    --l-w: 50%
}

.indus .in_main .item1 .t2 {
    color: #fff;
    margin: 0
}

.indus .in_main .item1 ul {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.indus .in_main .item1 ul li {
    width: calc(50% - 40px);
    padding: 15px;
    text-align: center;
    text-transform: capitalize;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    margin-top: 28px;
    font-family: Poppins;
    font-size: 18px;
    color: var(--color-main);
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center
}

.indus .in_main .item1 ul li:nth-child(-n + 2) {
    margin-top: 0
}

.indus .in_main .lll ul {
    padding-right: 113px;
    border-right: 1px solid #aae3ff
}

.indus .in_main .rrr {
    padding-left: 113px
}

.just_sys {
    padding: calc((42 / 19.2) * 1%) 0;
    background: url(../images/other/sys1.jpg) no-repeat center / cover
}

.system {
    background: #e8f6fd;
    padding: calc((68 / 19.2) * 1%) 0
}

.system .t1 {
    color: var(--color-main)
}

.system .t2_style {
    margin-top: 28px
}

.system .lists {
    --pd: 25px;
    --mt: 20px;
    margin-top: 16px
}

.system .lists .item {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px 20px
}

.system .lists .item .tit {
    font-size: 20px;
    color: var(--color-main);
    font-family: Poppins
}

.system .lists .item .t3 {
    color: #999;
    margin-top: 5px;
    font-size: 16px;
    padding-left: 18px;
    position: relative
}

.system .lists .item .t3::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-main);
    position: absolute;
    left: 0;
    top: 10px
}

.c_faq {
    margin: calc((154 / 19.2) * 1%) 0 calc((157 / 19.2) * 1%)
}

.sub_box {
    padding: calc((160 / 19.2) * 1%) 0 calc((142 / 19.2) * 1%);
    background: var(--color-main)
}

.sub_box .t1,
.sub_box .t3 {
    color: #fff
}

.sub_box>.layout_ {
    width: 90%;
    margin: 0 auto
}

.sub_box .ch_form .names,
.sub_box .ch_form .email {
    width: calc(50% - 42px)
}

.sub_box .ch_form .names,
.sub_box .ch_form .email,
.sub_box .ch_form .phone,
.sub_box .ch_form .message {
    margin-top: 20px
}

.sub_box .ch_form ul {
    margin-bottom: 20px
}

.sub_box .ch_form input[type="submit"] {
    background: #fff;
    color: #333;
    text-transform: capitalize;
    padding: 14px 74px;
    margin: 0 15px 0 0
}

.sub_box .ch_form .innerPro_btn {
    margin-top: 30px;
    flex-wrap: wrap
}

.sub_box .ch_form .form2_doanload_btn {
    width: auto;
    line-height: unset;
    height: auto;
    padding: 14px 46px;
    border-radius: 27px 27px 27px 27px;
    border: 1px solid #ffffff;
    background: transparent;
    color: #fff;
    margin: 0
}

.sub_box .ch_form textarea {
    height: 116px
}

.resources {
    background: url(../images/other/res1.jpg) no-repeat center / cover;
    padding: calc((100 / 19.2) * 1%) 0
}

.resources .t1 {
    color: #fff
}

.resources .t3 {
    color: #fff
}

.resources .t2_ {
    color: #fff;
    margin-top: 50px;
    font-size: 30px
}

.resources .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.resources .lists .item {
    background: transparent;
    box-shadow: 0 0 24px 0 #000000;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #ffffff;
    padding: 40px 30px;
    width: calc(50% - 15px);
    margin-top: 30px
}

.resources .lists .item .tit {
    font-size: 18px;
    font-family: Poppins;
    color: #ffffff
}

.resources .lists .item .des {
    color: #ffffff;
    margin-top: 10px
}

@media screen and (max-width:1660px) {
    .com_sytle .t1 {
        font-size: 40px
    }

    .com_sytle .t2 {
        font-size: 30px
    }

    .com_sytle .t3 {
        font-size: 16px
    }

    .success .s_main .tt1 {
        font-size: 40px
    }

    .success .s_main .tt1 span {
        font-size: 24px
    }

    .training .tr_main .rrr .item:first-child {
        font-size: 27px
    }

    .life_services .lists .item .num {
        font-size: 50px
    }

    .life_services .lists .item .title {
        font-size: 18px
    }

    .life_services .lists .item .desc {
        font-size: 16px
    }
}

@media screen and (max-width:1366px) {
    .success .s_main {
        --pd: 30px
    }

    .indus .in_main .item1 ul li {
        width: calc(50% - 5px)
    }

    .indus .in_main .lll ul {
        padding-right: 20px
    }

    .indus .in_main .rrr {
        padding-left: 20px
    }

    .training .tr_main .lll,
    .pro_exe .lll,
    .training .tr_main .rrr,
    .pro_exe .rrr {
        width: 100%
    }

    .training .tr_main .rrr,
    .pro_exe .rrr {
        margin-top: 30px
    }
}

@media screen and (max-width:950px) {
    .com_sytle .t1 {
        font-size: 30px
    }

    .com_sytle .t2 {
        font-size: 24px
    }

    .success .s_main .it2 {
        position: unset !important;
        padding: 30px
    }

    .success .s_main .tt1 {
        font-size: 30px
    }

    .design .des_main .lll {
        order: 2;
        margin-top: 30px
    }

    .design .des_main .img {
        margin: 0;
        position: relative
    }

    .design .des_main .img .detail {
        padding: 10px;
        z-index: 99;
        position: relative;
        width: 100%;
        height: 100%
    }

    .design .des_main .img .detail .item:first-child {
        margin: 0
    }

    .design .des_main .lists .tt1 {
        font-size: 20px
    }

    .training .tr_main .lists .l_item {
        width: calc(50% - 10px)
    }

    .training .tr_main .lists .l_item .t2 {
        font-size: 20px
    }

    .training .tr_main .lists ul li {
        font-size: 16px
    }

    .training .tr_main .rrr .item {
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .training .tr_main .rrr .item span {
        text-align: center
    }

    .life_services .lists {
        --mt: 30px;
        margin-top: var(--mt)
    }

    .life_services .kpi {
        margin-top: 50px
    }

    .life_services .kpi .lists2 .item {
        width: 100%;
        margin-top: 30px !important
    }

    .indus .in_main {
        padding: 30px 15px
    }

    .indus .in_main .lll,
    .indus .in_main .rrr {
        width: 100%
    }

    .indus .in_main .rrr {
        padding: 0
    }

    .indus .in_main .lll ul {
        padding: 0;
        border: 0
    }

    .indus .in_main .item1 ul li {
        font-size: 16px
    }

    .sub_box>.layout_ {
        width: 100%
    }

    .sub_box .ch_form .names,
    .sub_box .ch_form .email {
        width: 100%
    }

    .sub_box .ch_form input[type="submit"] {
        margin: 0;
        width: 100% !important
    }

    .sub_box .ch_form .form2_doanload_btn {
        margin-top: 20px;
        width: 100%
    }

    .resources {
        padding: calc((180 / 19.2) * 1%) 0
    }

    .resources .lists .item {
        width: 100%
    }

    .just_sys,
    .system {
        padding: 30px 0
    }
}
.active-highlight:hover{ color: #fff !important;}
.active-highlight{     background: var(--color-main) !important; color: #fff !important;}