@font-face {
    font-family: HelveticaNeueLTPro;
    src: local("HelveticaNeueLTPro"), url("../../font/HelveticaNeueLTPro-ThEx.otf") format("opentype");
}

.banner {
    position: relative;
}

.banner .banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-color: #ffffff;
    background-image: url("../../image/pc/index/banner_bg.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 560px;
}

.banner .content {
    position: relative;
    height: 560px;
}

.banner .banner-left {
    padding: 80px 0 0;
}

.banner .banner-left .title {
    font-size: 28px;
    line-height: 36px;
}

.banner .banner-left .title + .title {
    margin-top: 20px;
}

.banner .banner-left .title + .count {
    margin-top: 40px;
}

.banner .banner-left .count {
    margin-top: 30px;
    font-size: 36px;
    line-height: 48px;
    color: #00AFC3;
    /*font-family: HelveticaNeueLTPro;*/
}

.banner .banner-left .description {
    margin-top: 6px;
    font-size: 18px;
    color: #999999;
}

.banner .banner-right {
    position: absolute;
    top: 62px;
    right: 0;
    width: 875px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 35px 0px rgba(115, 115, 115, 0.2);
}

.banner .banner-right .btn {
    position: absolute;
    top: 252px;
    left: 44px;
}

.banner .banner-right .experience-button {
    width: 145px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    border-radius: 22px;
    background-color: #ffffff;
}

.banner .banner-right .swiper-box-01 .experience-button {
    color: #fbaf49;
}

.banner .banner-right .swiper-box-02 .experience-button {
    color: #18A4CA;
}

.banner .banner-right .swiper-box-03 .experience-button {
    color: #87c44c;
}

.banner .swiper-pagination {
    padding-left: 20px;
    text-align: left;
}

.container .title {
    font-size: 38px;
    text-align: center;
}

.container .subtitle {
    margin-top: 12px;
    font-size: 14px;
    color: #999999;
    text-align: center;
}

.container .matrix {
    padding-top: 60px;
}

.matrix .matrix-tabs {
    display: flex;
    margin: 40px auto;
    width: 720px;
}

.matrix .matrix-tabs .matrix-tabs-item {
    flex: 1;
    line-height: 40px;
    font-size: 20px;
    color: #999999;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
}

.matrix .matrix-tabs .matrix-tabs-item.active {
    color: #ffffff;
    background-color: #00AFC3;
}

.matrix .matrix-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
}

.matrix .matrix-list .list a {
    display: block;
}

.matrix .matrix-list .list a:not(:first-child) {
    margin-top: 20px;
}

.matrix .matrix-list .list .list-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.matrix .matrix-list .list .item {
    display: flex;
    align-items: center;
}

.matrix .matrix-list .list .item:not(:first-child) {
    margin-top: 20px;
}

.matrix .matrix-list .list .item img {
    width: 80px;
}

.matrix .matrix-list .list .item .list-right {
    margin-left: 10px;
}

.matrix .matrix-list .list .item .list-right .name {
    font-size: 18px;
}

.matrix .matrix-list .list .item .list-right .text {
    margin-top: 10px;
    width: 294px;
    font-size: 12px;
    color: #999999;
}

.matrix .matrix-list .list .card {
    padding: 40px;
    width: 394px;
    background-color: #ffffff;
    border-radius: 10px;
}

.matrix .matrix-list .list .card .card-top {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
}

.matrix .matrix-list .list .card .card-top img {
    width: 40px;
}

.matrix .matrix-list .list .card .card-top .card-title {
    margin-left: 24px;
    font-size: 24px;
}

.matrix .matrix-list .list .card .card-content {
    margin-top: 24px;
    font-size: 18px;
    line-height: 30px;
    color: #999999;
}

.matrix .matrix-list .list .card:nth-child(2) {
    margin-top: 30px;
}

.matrix .matrix-btn {
    margin-top: 60px;
    text-align: center;
}

.matrix .matrix-btn button {
    width: 140px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    border-radius: 22px;
    color: #ffffff;
    background-color: #00ADC3;
}

.container .advantage {
    position: relative;
    margin-top: 60px;
}

.advantage .advantage-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 589px;
    background-color: #ffffff;
    background-image: url("../../image/pc/index/advantage_bg.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 589px;
}

.advantage .content {
    position: relative;
    padding-top: 100px;
    height: 589px;
}

.advantage .advantage-list {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.advantage .advantage-list .list {
    position: relative;
    width: 284px;
    border-radius: 10px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06);
}

.advantage .advantage-list .list-content .title {
    position: absolute;
    top: 24px;
    left: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
}

.advantage .advantage-list .list-content .icon {
    position: absolute;
    top: 18px;
    right: 16px;
}

.advantage .advantage-list .list-content .icon.icon-01 {
    width: 50px;
}

.advantage .advantage-list .list-content .icon.icon-02 {
    width: 42px;
}

.advantage .advantage-list .list-content .icon.icon-03 {
    width: 55px;
}

.advantage .advantage-list .list-content .icon.icon-04 {
    width: 48px;
}

.advantage .advantage-list .list-content .text-list {
    position: absolute;
    top: 108px;
    left: 36px;
    right: 6px;
}

.advantage .advantage-list .list-content .text-list .text {
    position: relative;
    font-size: 14px;
}

.advantage .advantage-list .list-content .text-list .text + .text {
    margin-top: 24px;
}

.advantage .advantage-list .list-content .text-list .text::before {
    display: inline-block;
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 3px;
}

.advantage .advantage-list .list-content .text-list .text.blue::before {
    background-color: #00AFC3;
}

.advantage .advantage-list .list-content .text-list .text.green::before {
    background-color: #8DC556;
}

.advantage .advantage-list .list-content .text-list .text.yellow::before {
    background-color: #F7B52C;
}

.advantage .advantage-list .list-content .text-list .text.purple::before {
    background-color: #B72CF7;
}

.container .ability {
    position: relative;
}

.ability .content {
    position: relative;
    padding-top: 100px;
}

.ability .tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.ability .tabs .tab-item {
    position: relative;
    padding-bottom: 10px;
    font-size: 20px;
    color: #555555;
    cursor: pointer;
}

.ability .tabs .tab-item:not(:first-child) {
    margin-left: 60px;
}

.ability .tabs .tab-item:hover, .ability .tabs .tab-item.active {
    color: #00AFC3;
}

.ability .tabs .tab-item.active::after {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: "";
    width: 70px;
    height: 2px;
    background-color: #00AFC3;
    border-radius: 1px;
}

.ability .ability-content {
    position: relative;
    margin-top: 80px;
    cursor: pointer;
}

.ability .ability-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 0 644px;
    width: 600px;
}

.ability .ability-list .list {
    width: 278px;
    height: 256px;
}

.ability .ability-list .list.color1 {
    color: #886BD5;
}

.ability .ability-list .list.color2 {
    color: #00AFC3;
}

.ability .ability-list .list.color3 {
    color: #F8B62C;
}

.ability .ability-list .list.color4 {
    color: #8DC556;
}

.ability .ability-list .list .list-title {
    font-size: 18px;
}

.ability .ability-list .list .list-message {
    margin-top: 24px;
}

.ability .ability-list .list .list-message .message {
    display: flex;
    justify-content: space-between;
}

.ability .ability-list .list .list-message .message + .message {
    margin-top: 8px;
}

.ability .ability-list .list .list-message .message div {
    width: 86px;
    height: 32px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
}

.ability .ability-list .list.color1 .list-message .message div {
    background-color: rgba(136, 107, 213, 0.05);
    border: 1px solid rgba(136, 107, 213, 0.3);
}

.ability .ability-list .list.color2 .list-message .message div {
    background-color: rgba(0, 175, 195, 0.05);
    border: 1px solid rgba(0, 175, 195, 0.3);
}

.ability .ability-list .list.color3 .list-message .message div {
    background-color: rgba(248, 182, 44, 0.05);
    border: 1px solid rgba(248, 182, 44, 0.3);
}

.ability .ability-list .list.color4 .list-message .message div {
    background-color: rgba(141, 197, 86, 0.05);
    border: 1px solid rgba(141, 197, 86, 0.3);
}

.ability .ability-list .list .list-message .message div.msg-width-1 {
    width: 132px;
}

.ability .ability-list .list .list-message .message div.msg-width-2 {
    width: 120px;
}

.ability .ability-list .list .list-message .message div.msg-width-3 {
    width: 148px;
}

.ability .ability-list .list .list-message .message div.msg-width-4 {
    width: 168px;
}

.ability .ability-list .list .list-message .message div.msg-width-5 {
    width: 100px;
}

.ability .ability-list .card-list {
    flex: 1;
    height: 512px;
}

.ability .ability-list .card-list .card {
    display: flex;
    align-items: center;
}

.ability .ability-list .card-list .card:not(:first-child) {
    margin-top: 20px;
}

.ability .ability-list .card-list .card .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    height: 95px;
    text-align: center;
    border-radius: 10px;
}

.ability .ability-list .card-list .card .item:not(:first-child) {
    margin-left: 20px;
}

.ability .ability-list .card-list .card .item .item-name {
    font-size: 18px;
    font-weight: 700;
}

.ability .ability-list .card-list .card .item .item-text {
    margin-top: 10px;
    font-size: 14px;
}

.ability .ability-list .card-list .card .item.color1 {
    color: #00AFC3;
    background-color: rgba(0, 173, 195, 0.05);
    border: 1px solid rgba(0, 173, 195, 0.5);
}

.ability .ability-list .card-list .card .item.color2 {
    color: #8CC456;
    background-color: rgba(140, 196, 86, 0.05);
    border: 1px solid rgba(140, 196, 86, 0.5);
}

.ability .ability-list .card-list .card .item.color3 {
    color: #F7B52C;
    background-color: rgba(247, 181, 44, 0.05);
    border: 1px solid rgba(247, 181, 44, 0.5);
}

.ability .ability-list .card-list .card .item.color4 {
    color: #C7AB7E;
    background: transparent url("../../image/pc/index/card.png") no-repeat;
    background-size: 100% 100%;
}

.ability .ability-img {
    position: absolute;
    top: 0;
    left: 20px;
}

.ability .ability-btn {
    margin-top: 32px;
    text-align: center;
}

.ability .ability-btn button {
    width: 140px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    border-radius: 22px;
    color: #ffffff;
    background-color: #00ADC3;
}

.customer {
    position: relative;
    margin-top: 60px;
}

.customer .customer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 743px;
    background-color: #ffffff;
    background-image: url("../../image/pc/index/customer_bg.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 743px;
}

.customer .content {
    position: relative;
    padding-top: 60px;
    height: 743px;
}

.customer .customer-list {
    margin-top: 40px;
}

.customer .customer-list .customer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer .customer-list .customer-item:not(:first-child) {
    margin-top: 20px;
}

.customer .customer-list .customer-item img {
    width: 120px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06);
}

.customer .customer-btn {
    margin-top: 60px;
    text-align: center;
}

.customer .customer-btn button {
    width: 140px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    border-radius: 22px;
    color: #ffffff;
    background-color: #00ADC3;
}

.swiper-button-prev, .swiper-button-next {
    display: none;
}

.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background-color: #DCDCDC;
    opacity: 1;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 16px;
    border-radius: 3px;
}

.container .news {
    position: relative;
    padding: 60px 0;
}

.news .news-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.news .news-list a:nth-child(n+3) {
    margin-top: 30px;
}

.news .news-list .list {
    display: flex;
    align-items: center;
    padding: 30px;
    width: 592px;
    height: 160px;
    background-color: #ffffff;
    border-radius: 10px;
}

.news .news-list .list .news-img {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
}

.news .news-list .list .news-img img {
    height: 100%;
    object-fit: cover;
}

.news .news-list .list .news-title {
    margin-left: 30px;
    font-size: 18px;
    color: #555555;
}

.news .news-list .list:hover .news-title {
    color: #00ADC3;
}

.news .news-btn {
    margin-top: 60px;
    text-align: center;
}

.news .news-btn button {
    width: 140px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    border-radius: 22px;
    color: #ffffff;
    background-color: #00ADC3;
}