@font-face {
    font-family: YouSheBiaoTiHei;
    src: url('../font/YouSheBiaoTiHei.ttf');
}

.header {
    background: transparent;
    transition: 0.3s;
}

.header.bg {
    background: linear-gradient(90deg, #def1fe, #f1f1f8);
}

.header+.bodyer {
    padding-top: 0;
}

.home-banner {
    position: relative;
}

.banner-item {
    font-size: 0;
}

.banner-pic {
    width: 100%;
    height: 412px;
    object-fit: cover;
}

.service-nav-wrap {
    background: linear-gradient(#fff 70%, #ecf1fa);
}

.service-nav {
    display: flex;
    padding: 20px 0;
    justify-content: space-between;
    align-items: center;
}

.service-nav-item {
    font-size: 16px;
    color: #333;
    padding: 10px 35px;
    border-radius: 100px;
    cursor: pointer;
}

.service-nav-item.on {
    background: #61a5ff;
    color: #fff;
}

.section {
    background: #fff;
}

.section1 {
    border-bottom: 1px solid #cfdbf1;
}

.section3,
.section4 {
    padding: 80px 0;
}

.section-bg1 {
    background-color: #f8f9fd;
}

.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-left {
    flex: 1;

    margin-right: 100px;
}

.flex-right {
    width: 340px;
}

.section1-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section1-nav-item {
    padding: 40px 0;
    text-align: center;
    position: relative;
}

.section1-nav-item.on::after {
    display: block;
    content: '';
    width: 15px;
    height: 8px;
    background: url('../images/service1-arrow.png');
    background-color: #fff;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translate(-50%, 0);
}

.section1-nav-item div {
    margin-bottom: 10px;
}

.section1-nav-icon img {
    width: 130px;
    height: 96px;
    object-fit: contain;
}

.section1-nav-title {
    font-size: 16px;
    color: #666;
}

.section1-nav-price {
    font-size: 16px;
    color: #ff4889;
}

.section1-nav-btn {
    display: inline-block;
    padding: 8px 56px;
    background: #ff9804;
    border-radius: 100px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}

.section1-title {
    margin-bottom: 30px;
    font-size: 36px;
    color: #333;
    font-weight: 800;
}

.section1-subtitle {
    font-size: 16px;
    color: #333;
    line-height: 2;
}

.color-blue {
    color: #0066ff;
    font-size: 18px;
}

.section1-content {
    padding: 40px 0;
}

.section1-content-title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.section1-content-subtitle {
    margin-bottom: 60px;
    font-size: 16px;
    color: #333;
    line-height: 2;
}

.swiper-wrap {
    position: relative;
}

.swiper-container {
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
}

.swiper-item .swiper-pic {
    width: 146px;
    height: 260px;
}

.swiper-prev,
.swiper-next {
    width: 12px;
    height: 22px;
    background: url('../images/service-arrow.png');
    position: absolute;
    top: 50%;
    cursor: pointer;
}

.swiper-prev.disabled,
.swiper-next.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.swiper-prev {
    left: 0;
    transform: translate(0, -50%);
}

.swiper-next {
    right: 0;
    transform: translate(0, -50%) rotate(180deg);
}

.section2 .flex-box {
    padding: 40px 0;
}

.section2 .flex-left {
    flex: inherit;
    width: 425px;
}

.section2 .flex-right {
    flex: 1;
    width: auto;
}

.section2 .section1-nav-item {
    padding: 20px 0;
    padding-left: 40px;
    text-align: left;
}

.section2 .section1-nav-item.on {
    background: #6493ff;
    clip-path: polygon(0 0, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}

.section2 .section1-nav-btn {
    border-radius: 100px;
}

.section2 .section1-nav-item.on::after,
.section3 .section1-nav-item.on::after {
    display: none;
}

.section2 .section1-nav-item.on {
    padding-left: 20px;
}

.section2 .section1-nav-item.on .section1-nav-title {
    color: #fff;
}

.section2 .section1-nav-item.on .section1-nav-price {
    color: #ffeb62;
}

.section2 .section1-nav-item.on .section1-nav-btn {
    background: #FFF;
    color: #6493ff;
}

.section2-content-title {
    margin-bottom: 40px;
    font-size: 24px;
    color: #333;
    text-align: center;
}

.section2-content-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 2;
}

.section2-content-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.section2-list-item {
    width: 50%;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
}

.section2-list-icon {
    margin-right: 10px;
}

.section2-list-icon img {
    width: 56px;
    height: 56px;
    background-size: cover;
}

.section2-list-name {
    margin-bottom: 10px;
    font-size: 18px;
    color: #6493ff;
}

.section2-list-desc {
    font-size: 16px;
    color: #4f4f4f;
}

.section3 .section1-nav {
    display: block;
}

.section3 .section1-nav-item {
    display: flex;
    align-items: center;
    padding: 30px 0;
    margin-bottom: 40px;
    background: #fff;
    border: 1px solid #e5e8f3;
    border-radius: 8px;
    text-align: left;
}

.section3 .news-list {
    margin-left: 40px;
}

.section3 .news-item {
    margin-bottom: 20px;
    padding-left: 12px;
    color: #333;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.section3 .news-item::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.section3 .flex-right {
    width: auto;
}

.section4 .flex-left {
    flex: inherit;
    width: 310px;
    margin-right: 40px;
}

.section4 .flex-right {
    flex: 1;
    width: auto;
}
.section4-content-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section4-list-item{
    border-radius: 12px;
    background: #e2e9ff;
    text-align: center;
    font-size: 16px;
    border: 1px solid #c7d6ea;
    box-shadow: 8px 8px 12px #c7d4f1;
}
.price-list{
    padding: 20px 40px;
    border-top: 1px solid #adc0ec;
}
.price-item{
    margin-bottom: 20px;
}
.price-name{
    margin-bottom: 10px;
}
.price-money{
    color: #ff4889;
}
.section4-list-icon{
    padding: 20px 0;
}
.section4-list-icon img{
    width: 128px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 10px 10px #9fb4e4);
}
.section4-list-btn{
    display: inline-block;
    margin: 20px 0;
    padding: 8px 35px;
    background: #ff9804;
    border-radius: 100px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}