@charset "UTF-8";
.banner_transportation {
    background-color: #eff8ff;
    width: 100%;
    height: 500px;
    padding-bottom: 10px;
    position: relative;
}

.banner_transportation .tu {
    position: absolute;
    bottom: 0px;
    height: 500px;
    right: 0px;
    left: 50%;
    transform: translateX(-100px);
}

.banner_content {
    position: relative;
    z-index: 2;
}

.banner_transportation .title {
    font-size: 40px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
    color: #0099ff;
    padding-top: 200px;
    text-align: unset;
    margin-bottom: 0px;
}

.banner_transportation .introduce {
    font-size: 14px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    /* opacity: 0.8; */
    width: 400px;
    margin: 30px 0px;
}

.banner_transportation .consult {
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    color: #0099ff;
    font-size: 16px;
    margin-top: 60px;
    width: fit-content;
    font-family: "Source Han Sans CN";
    display: flex;
    box-shadow: 1px 1px 2px 1px rgb(190, 221, 237, 0.75);
    cursor: pointer;
    align-items: center;
}

.banner_transportation .consult .icon {
    width: 20px;
    height: 22px;
}
.transportation_section1, .transportation_section8, .transportation_section10 {
    padding: 40px 0 60px;
    background: linear-gradient(180deg, #fff, #eff8ff);
}
.company_introduce_vertical::-webkit-scrollbar {
    width: 4px;
}
.company_introduce_vertical::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.company_introduce_vertical::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

.transportation_section1 .title, .transportation_section2 .title, .transportation_section3 .title,
.transportation_section4 .title, .transportation_section5 .title, .transportation_section6 .title,
.transportation_section7 .title, .transportation_section8 .title, .transportation_section11 .title,
.transportation_section12 .title, .transportation_section13 .title {
    font-size: 30px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
    color: #0099ff;
    margin-bottom: 30px;
    text-align: center;
    padding: 0;
}

.transportation_section2 .small_title, .transportation_section3 .small_title, .transportation_section4 .small_title,
.transportation_section5 .small_title, .transportation_section7 .small_title, .transportation_section8 .small_title,
.transportation_section12 .small_title, .transportation_section13 .small_title {
    font-size: 14px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: rgb(81, 83, 98, .75);
    opacity: 0.7;
    /*width: 1200px;*/
    text-align: center;
    margin-bottom: 20px;
    line-height: 30px;
}

.transportation_section1 img {
    width: 100%;
}

.transportation_section2 {
    background-color: #f8fbff;
    padding: 40px 0;
    /*background: url(../img/bg.png);*/
    /*background: url(../img/bg_color.png);*/
    background: linear-gradient(180deg, #fff, #eff8ff);
}

.transportation_section12 {
    background-color: #eff8ff;
    padding: 40px 0 60px;
}

.transportation_section2 .tu {
    width: 100%;
}

.transportation_section2 .solve {
    background: linear-gradient(to right, #3D97E4, #3C7BE3);
    border: none;
    color: #fff;
    display: flex;
    margin: 10px auto 0;
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 15px;
    opacity: 0;
    transition: ease all 0.3s;
    cursor: pointer;
}

.transportation_section2:hover .solve {
    transition: ease all 0.3s;
    opacity: 1;
}

.transportation_section2 .solve img {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 2px;
}

.transportation_section3, .transportation_section13 {
    background-color: #fff;
    padding: 40px 0 60px;
    background: linear-gradient(180deg, #fff, #eff8ff);
    /*background: url(../img/bg.png);*/
}

.transportation_section3 .tu {
    width: 100%;
}

.transportation_section3 .user {
    display: grid;
    grid-template-columns: repeat(4, 22.5%);
    row-gap: 40px;
    column-gap: 40px;
}

.transportation_section3 .user .block {
    padding: 20px;
    box-shadow: 1px 1px 5px 1px rgb(43, 124, 217, 0.2);
    border-radius: 20px;
}

.transportation_section3 .user .block .icon {
    width: 35px;
    height: 35px;
    margin-right: 20px;
}

.transportation_section3 .user .block .name {
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
}

.transportation_section3 .user .block .content {
    font-size: 14px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    line-height: 25px;
    background-color: unset;
    border-radius: 0px;
    box-shadow: none;
    transition: all 0.3s;
    width: auto;
}

.transportation_section4 {
    background: #fff;
    padding: 40px 0 0px;
    /*background: url(../img/bg.png);*/
    background: linear-gradient(180deg, #fff, #eff8ff);
}

.transportation_section4 .package .num {
    background-image: linear-gradient(90deg, #3D97E4, #3C7BE3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 80px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
}

.transportation_section4 .package .down {
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
}

.transportation_section4 .package .tu {
    width: 20px;
    height: 20px;
}

.transportation_section4 .package .percent {
    background-image: linear-gradient(90deg, #3D97E4, #3C7BE3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
}

.transportation_section4 .package .Stash {
    position: relative;
    top: 26%;
}

.transportation_section4 .member_Entrance {
    font-size: 16px;
    color: #333;
    padding: 20px 40px;
    font-family: "Source Han Sans CN";
    margin-bottom: 30px;
    cursor: pointer;
    width: 25%;
    text-align: center;
}

.transportation_section4 .action {
    color: #fff;
    background-color: #0099ff;
}

.transportation_section5 {
    /*background: url(../img/bg.png);*/
    background: linear-gradient(180deg, #fff, #eff8ff);
}

.transportation_section5 .inquire {
    background-color: #EFF8FF;
    padding: 40px 0 60px;
}

.transportation_section5 .Centre_title {
    font-size: 20px;
    font-weight: bold;
    color: #0099ff;
    margin-bottom: 30px;
}

.transportation_section5 .Centre {
    margin-bottom: 25px;
}

.transportation_section5 .Centre img {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    /* position: relative;
    top: 50%; */
    transform: translateY(100%);
}

.transportation_section5 .Centre .member {
    font-size: 20px;
    color: #333;
}

.transportation_section5 .Centre .member.action {
    color: #0099ff;
}

.transportation_section5 .Centre .number {
    font-size: 14px;
    color: #505668;
    line-height: 30px;
    font-style: normal;
    font-weight: 400;
}

.transportation_section5 .consult {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 15px;
    color: #0099ff;
    font-size: 16px;
    width: 130px;
    font-family: "Source Han Sans CN";
    display: flex;
    box-shadow: 1px 1px 2px 1px rgb(190, 221, 237, 0.75);
    cursor: pointer;
    transition: ease all 2s;
    max-height: 50px;
    align-items: center;
}

.transportation_section5 .consult .icon_tu {
    line-height: 20px;
    font-size: 18px;
    color: #0099ff;
    transition: ease all 2s;
}

.transportation_section5 .consult:hover {
    background: linear-gradient(to right, #3D97E4, #3C7BE3);
    color: #fff;
    transition: ease all 2s;

}

.transportation_section5 .consult:hover .icon_tu {
    color: #fff;
    transition: ease all 0.3s;
}

.transportation_section5 .consult .icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.transportation_section5 .tu {
    width: 50%;
    object-fit: contain;
}

.transportation_section5 .cargo {
    background-color: #f8fbff;
    padding: 40px 0 60px;
}

.transportation_section5 .Centre_title_R {
    font-size: 20px;
    font-weight: bold;
    color: #0099ff;
    margin-bottom: 30px;
    position: relative;
    left: 60%;
    width: 40%;
}

/* .transportation_section5 .cargo .consult{
    background: linear-gradient(to right, #3D97E4 , #3C7BE3);
    padding: 15px 20px;
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    width: 130px;
    font-family: "Source Han Sans CN";
    display: flex;
    cursor: pointer;
} */
.transportation_section6 {
    background: linear-gradient(to bottom, #f8fbff, #fff);
    padding: 40px 0 60px;
    /*background: url(../img/bg.png);*/
    background: linear-gradient(180deg, #fff, #eff8ff);
    /*background: url(../img/bg_color.png);*/
}

.transportation_section6 .title {
    margin-bottom: 40px;
}

.transportation_section6 .tool {
    width: 15%;
}

/* .transportation_section6 .tool .icon{
    height: 100px;
    width: 100%;
    margin-bottom: 20px;
} */
.transportation_section6 .tool img {
    width: 80px;
    height: auto;
    margin: 0 auto;
    display: flex;
}

.transportation_section6 .tool .New_user {
    font-size: 24px;
    color: #515362;
    text-align: center;
    margin-bottom: 10px;
}

.transportation_section6 .tool:hover .New_user {
    color: #0099ff;
}

.transportation_section6 .tool .integral {
    font-size: 14px;
    text-align: center;
    color: #515362;
}

.transportation_section6 .bg {
    margin-top: 100px;
    width: 100%;
}

.transportation_section7 {
    background-color: #f8fbff;
    padding: 40px 60px;
    /*background: url(../img/bg.png);*/
    background: linear-gradient(180deg, #fff, #eff8ff);
}

.transportation_section7 .client_tu {
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    animation: client_tu .5s ease-out both;
}

@keyframes client_tu {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0px, -50%);
        opacity: 1;
    }
}

.transportation_section7 .client_tu.disappear {
    display: none !important;
}

.transportation_section7 .client .client_detail {
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

.transportation_section7 .client .client_detail.action {
    background: linear-gradient(to right, #0099ff, #3C7BE3);
    animation: client_detail .5s ease-out both;
}

@keyframes client_detail {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.transportation_section7 .client .client_detail.action .client_detail_Partner,
.transportation_section7 .client .client_detail.action .client_detail_Gold,
.transportation_section7 .client .client_detail.action .client_detail_Friend {
    color: #fff;
}

.transportation_section7 .client .client_detail .client_detail_Partner {
    font-size: 18px;
    font-family: "Source Han Sans CN";
    font-weight: 300;
    color: #0099ff;
    margin-bottom: 10px;
}

.transportation_section7 .client .client_detail .client_detail_Gold {
    font-size: 22px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    color: #0099ff;
    margin-bottom: 10px;
}

.transportation_section7 .client .client_detail .client_detail_Friend {
    font-size: 12px;
    font-family: "Source Han Sans CN";
    font-weight: 300;
    color: #515362;
    line-height: 25px;
}

.transportation_section8 .tu {
    width: 100%;
}

.transportation_section9 {
    background-color: #f8fbff;
    padding: 40px 0 60px;
}

.transportation_section9 .portrait {
    position: relative;
}

.transportation_section9 .portrait .tu {
    width: 500px;
    display: flex;
    margin: 0 auto;
    padding-top: 40px;
}

.transportation_section9 .L_title {
    font-size: 30px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
    color: #0099ff;
    margin-bottom: 40px;
}

.transportation_section9 .portrait .manage1 {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    line-height: 40px;
    width: 475px;
    display: flex;
}

.transportation_section9 .portrait .icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    margin-top: 8px;
}

.transportation_section9 .portrait .manage2 {
    position: absolute;
    left: 0px;
    bottom: 60px;
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    line-height: 40px;
    width: 475px;
    display: flex;
}

.transportation_section9 .portrait .manage3 {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    line-height: 40px;
    width: 300px;
    display: flex;
}

.transportation_section10 .API {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.transportation_section10 .API .title {
    font-size: 30px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
    color: #0099ff;
    margin-bottom: 40px;
    text-align: center;
}

.transportation_section10 .API p {
    font-size: 22px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    text-align: center;
    line-height: 30px;
}

.transportation_section11 {
    background: linear-gradient(to top, #f8fbff, #fff);
    padding: 40px 0 60px;
    /*background: url(../img/bg_color.png);*/
    /*background:linear-gradient(180deg, #fff, #eff8ff);*/
    background: linear-gradient(180deg, #fff, #eff8ff);

}

.transportation_section11 .solution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    column-gap: 40px;
    margin-bottom: 40px;
}

.transportation_section11 .solution .solve {
    padding: 40px;
    box-shadow: 1px 1px 5px 1px rgb(207, 215, 226, 0.75);
    border-radius: 20px;
    display: flex;
    background-color: #fff;
}

.transportation_section11 .solution .solve:hover {
    /* transform: translateY(-10px); */
    /* transition: ease all 0.3s; */
    background: linear-gradient(to right, #fff, rgb(161, 196, 253), #fff);
    background-size: 400% 400%;
    /* rgb(161, 196, 253 , 0.2) */
    /* animation: solve_hover .5s ease-out both; */
    animation: gradient 0.5s ease both;
}

@keyframes gradient {
    0% {
        background-position: 100% 50%;
    }

    /* 50% {
        background-position: 100% 50%;
    } */

    100% {
        background-position: 0% 50%;
    }
}

.transportation_section11 .solution .solve img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.transportation_section11 .solution .solve .solve_headline {
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    color: #515362;
    margin-bottom: 20px;
}

.transportation_section11 .solution .solve .solve_introduce {
    font-size: 14px;
    font-family: "Source Han Sans CN";
    font-weight: 300;
    color: #6F6F6F;
    line-height: 30px;
}

.transportation_section11 .understand {
    border: 1px solid #3C7BE3;
    background-color: #fff;
    border-radius: 15px;
    padding: 0px 20px;
    color: #3C7BE3;
    font-size: 14px;
    line-height: 45px;
    display: flex;
    margin: 0 auto;
    cursor: pointer;
    opacity: 0;
    transition: ease all 0.3s;
}

.transportation_section11:hover .understand {
    transition: ease all 0.3s;
    opacity: 1;
}

.transportation_section11 .understand img {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    position: relative;
    top: 50%;
    transform: translateY(85%);
}

.transportation_section12 .tu {
    width: 100%;
}

.transportation_section12 .icon {
    width: 25px;
    height: 25px;
    margin-right: 20px;
}

.transportation_section12 p {
    font-size: 24px;
    font-family: "Source Han Sans CN";
    color: #333;
    line-height: 35px;
}

.transportation_section13 .agency {
    background-image: linear-gradient(90deg, #3D97E4, #3C7BE3);
    padding: 40px;
    border-radius: 30px;
    width: 23%;
}

.transportation_section13 .agency .bg {
    width: 150px;
    height: 160px;
    margin: 0 auto 20px;
    display: flex;
}

.transportation_section13 .agency p {
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #FFFFFF;
    line-height: 25px;
}

.transportation_section14 {
    background-color: #5c90e3;
    width: 100%;
    background-image: url("../img/OverseasPosition/bg4.png");
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0px 0px 60px;
    background-size: 100% 100%;
}

.transportation_section14 .title {
    font-size: 30px;
    font-family: "Source Han Sans CN";
    font-weight: bold;
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
}

.transportation_section14 .swiper {
    width: 100%;
    height: auto;
}

.transportation_section14 .swiper .company {
    background-color: #fff;
    padding: 60px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    border-radius: 20px;
}

.transportation_section14 .swiper .company .logo {
    padding: 30px;
    border-radius: 50%;
    box-shadow: 1px 1px 5px 2px rgb(190, 199, 211, 0.75);
}

.transportation_section14 .swiper .company .logo img {
    width: 100px;
    height: 100px;
    object-fit: scale-down;
}

.transportation_section14 .swiper .company .company_introduce {
    width: 500px;
    position: relative;
}

.transportation_section14 .swiper .company .company_introduce h1 {
    font-size: 24px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    margin-bottom: 10px;
}

.transportation_section14 .swiper .company .company_introduce p {
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #515362;
    white-space: pre-wrap;
}

.transportation_section14 .swiper .company .company_introduce .company_introduce_vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 20px;
    height: 164px;
    overflow: auto;
}

.transportation_section14 .swiper .company .company_introduce .marks1 {
    position: absolute;
    top: 0px;
    left: -50px;
    width: 50px;
}

.transportation_section14 .swiper .company .company_introduce .marks2 {
    position: absolute;
    right: -50px;
    bottom: 0px;
    width: 50px;
}

.transportation_section14 .swiper .swiper-button-next, .transportation_section14 .swiper .swiper-button-prev {
    color: #fff !important;
}

:root {
    --theme-c: #0099ff;
}

.transportation-box {
    width: 100%;
    height: 522px;
    position: relative;
    overflow: visible;
    margin-top: 60px;
}

.transportation-box .step-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.transportation-box .step-box a {
    box-sizing: border-box;
    width: 120px;
    min-height: 50px;
    text-align: center;
    border-radius: 18px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--theme-c);
    padding: 8px 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    cursor: default;
    position: absolute;
}

.transportation-box .step-box a span {
    font-size: 18px;
    color: #787878;
    line-height: 140%;
}

.transportation-box .step-box a .iconfont {
    font-size: 24px;
    margin-right: 4px;
    color: #787878;
}

.transportation-box .step-box a.active {
    background-color: var(--theme-c);
    border-color: #fff;
}

.transportation-box .step-box a.active span {
    color: #fff;
}

.transportation-box .step-box a.active .iconfont {
    color: #fff;
}

.transportation-box .step-box a:after {
    font-size: 14px;
    color: var(--theme-c);
    position: absolute;
    bottom: -28px;
    left: 70px;
    width: auto;
    min-width: 6em;
    text-align: left;
}

.transportation-box .step-box .step-1 {
    left: 0;
    top: 200px;
}

.transportation-box .step-box .step-2 {
    left: 178px;
    top: 38px;
}

.transportation-box .step-box .step-3 {
    left: 178px;
    top: 353px;
}

.transportation-box .step-box .step-4 {
    left: 356px;
    top: 160px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
}

.transportation-box .step-box .step-4 span {
    font-size: 30px;
}

.transportation-box .step-box .step-5 {
    left: 490px;
    top: 330px;
    width: 146px;
}

.transportation-box .step-box .step-6 {
    left: 722px;
    top: 195px;
}

.transportation-box .step-box .step-6:after {
    content: "安排航班";
}

.transportation-box .step-box .step-7 {
    left: 722px;
    top: 278px;
}

.transportation-box .step-box .step-7:after {
    content: "运输";
}

.transportation-box .step-box .step-8 {
    left: 722px;
    top: 361px;
}

.transportation-box .step-box .step-8:after {
    content: "派送上门";
}

.transportation-box .step-box .step-9 {
    left: 722px;
    top: 444px;
}

.transportation-box .step-box .step-10 {
    right: 0;
    top: 235px;
}

.transportation-box .step-box .step-11 {
    right: 0;
    top: 361px;
}

.transportation-box .step-box .step-11:after {
    content: "自提";
}

.transportation-box .step-box .step-12 {
    right: 0;
    top: 444px;
}

.transportation-box .opera-list {
    position: absolute;
    padding: 12px;
}

.transportation-box .opera-list svg {
    left: 0;
    top: 0;
}

.transportation-box .opera-list a {
    cursor: default;
    display: flex;
    align-items: center;
}

.transportation-box .opera-list a:nth-of-type(n + 2) {
    margin-top: 8px;
}

.transportation-box .opera-list a span {
    font-size: 18px;
    color: #787878;
    line-height: 130%;
}

.transportation-box .opera-list a .iconfont {
    font-size: 20px;
    margin-right: 4px;
    color: var(--theme-c);
}

.transportation-box .opera-list.list-1 {
    left: 178px;
    top: 128px;
}

.transportation-box .opera-list.list-2 {
    left: 495px;
    top: 0;
}

.transportation-box .opera-list.list-3 {
    left: 885px;
    top: 18px;
}

.transportation-box .svg-1 {
    left: 60px;
    top: 62px;
}

.transportation-box .svg-2 {
    left: 562px;
    bottom: 50px;
}

.transportation-box .svg-3 {
    left: 781px;
    bottom: 50px;
}

.transportation-box .svg-4 {
    left: 781px;
    bottom: 220px;
}

.transportation-box .svg-5 {
    left: 781px;
    top: 98px;
}

.transportation-box .svg-6 {
    left: 427px;
    top: 66px;
}

.border-svg {
    pointer-events: none;
    position: absolute;
}

.border-svg rect {
    width: 100%;
    height: 100%;
}

.border-svg rect,
.border-svg path {
    stroke-dasharray: 4 4; /* 定义虚线的长度和间隔 */
    stroke: var(--theme-c);
    stroke-width: 2px;
    fill: none;
    stroke-dashoffset: 0; /* 初始虚线偏移量 */
    transition: all 10s linear;
    animation-name: ring;
    animation-duration: 100s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes ring {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 5000;
    }
}

@keyframes backring {
    from {
        stroke-dashoffset: 5000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.operationCenter-box {
    width: 100%;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.operationCenter-box .box-item {
    background-color: #fff;
    border-radius: 20px;
    padding: 22px 25px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    position: relative;
}

.operationCenter-box .box-item.item-1, .operationCenter-box .box-item.item-3 {
    width: 245px;
}

.operationCenter-box .box-item.item-1 a:nth-of-type(even), .operationCenter-box .box-item.item-3 a:nth-of-type(even) {
    text-align: right;
}

.operationCenter-box .box-item.item-2 {
    width: 543px;
    padding-left: 40px;
    padding-right: 40px;
}

.operationCenter-box .box-item.item-4 {
    margin-top: 35px;
    width: 100%;
}

.operationCenter-box .box-item a {
    font-size: 16px;
    color: #333;
}

.operationCenter-box .box-item .list {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 0px;
}

.operationCenter-box .box-item.item-2 .list {
    grid-template-columns: repeat(3, 1fr);
}

.operationCenter-box .box-item.item-2 .list a:nth-of-type(3n + 2) {
    text-align: center;
}

.operationCenter-box .box-item.item-2 .list a:nth-of-type(3n + 3) {
    text-align: right;
}

.operationCenter-box .item-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
}

.operationCenter-box .item-inner .list2 {
    padding-top: 20px;
}

.operationCenter-box .item-inner .list2 a {
    display: block;
    margin-top: 12px;
}

.operationCenter-box h4 {
    font-size: 30px;
    text-align: center;
    color: var(--theme-c);
    line-height: 1.1;
}

.operationCenter-box h5 {
    font-size: 22px;
    text-align: center;
    color: var(--theme-c);
    line-height: 1.1;
    padding-bottom: 8px;
}

.operationCenter-box .arrow-box {
    width: 110px;
    height: 50px;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(91px, -50%);
    z-index: 11;
    pointer-events: none;
}

.operationCenter-box .arrow-box .arrow-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    fill: var(--theme-c);
    overflow: visible;
}

.operationCenter-box .arrow-box span {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: var(--theme-c);
    position: absolute;
    left: 0;
}

.operationCenter-box .arrow-box .text-t {
    top: 0;
    transform: translateY(-100%);
}

.operationCenter-box .arrow-box .text-b {
    bottom: 0;
    transform: translateY(100%);
}

.btn-operationCenter {
    width: 236px;
    height: 48px;
    border-radius: 10px;
    display: block;
    margin: 30px auto 0;
    background: linear-gradient(to right, #0099ff, #0077cc) !important;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 48px;
    transition: 0.3s ease-in-out;
}

.btn-operationCenter:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.btn-operationCenter:after {
    content: ">";
    font-size: 18px;
    margin-left: 8px;
    font-family: "宋体";
    font-weight: bold;
}

.forwardCenter-box {
    width: 600px;
    height: 418px;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

.forwardCenter-box svg {
    width: 439px;
    height: 380px;
    position: absolute;
    left: 76px;
    bottom: 0;
    overflow: visible;
}

.forwardCenter-box svg .line {
    fill: none;
    stroke: var(--theme-c);
    stroke-width: 1px;
}

.forwardCenter-box svg circle {
    fill: var(--theme-c);
}

.forwardCenter-box h1 {
    font-size: 40px;
    line-height: 110%;
    color: var(--theme-c);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -30%);
}

.forwardCenter-box > p {
    font-size: 16px;
    color: var(--theme-c);
    position: absolute;
}

.forwardCenter-box .p-1 {
    top: 0;
    left: 94px;
}

.forwardCenter-box .p-2 {
    top: 29px;
    left: 460px;
}

.forwardCenter-box .p-3 {
    top: 178px;
    right: 0;
}

.forwardCenter-box .p-4 {
    top: 339px;
    left: 505px;
}

.forwardCenter-box .p-5 {
    top: 340px;
    left: 35px;
}

.forwardCenter-box .p-6 {
    top: 131px;
    left: 0;
}

.transportation_section5 .tab-con .member_details {
    display: none;
}

.transportation_section5 .tab-con .member_details.active {
    display: block;
    animation: scaleIn 0.5s ease-in-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.toker-channel-box {
    margin-top: 20px;
    width: 100%;
    height: 436px;
    position: relative;
}

.toker-channel-box .list-box {
    position: absolute;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.toker-channel-box .list-box.list-1 {
    left: 5px;
    top: 3px;
    width: 444px;
}

.toker-channel-box .list-box.list-2 {
    right: 5px;
    top: 3px;
    width: 628px;
}

.toker-channel-box .list-box.list-3 {
    left: 5px;
    bottom: 3px;
    width: 444px;
}

.toker-channel-box .list-box.list-4 {
    right: 5px;
    bottom: 3px;
    width: 452px;
}

.toker-channel-box .list-box a {
    font-size: 12px;
    line-height: 105%;
    color: #666;
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid var(--theme-c);
    text-align: center;
    padding: 0 15px;
    min-width: 82px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(65, 151, 255, 0.5);
    position: relative;
}

.toker-channel-box .list-box a:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    transform: rotate(45deg);
}

.toker-channel-box .list-box.list-1 a:after, .toker-channel-box .list-box.list-2 a:after {
    border-left: 1px solid var(--theme-c);
    border-top: 1px solid var(--theme-c);
    bottom: -53px;
    animation: arrowToTop 1.5s linear infinite;
}

.toker-channel-box .list-box.list-3 a:after, .toker-channel-box .list-box.list-4 a:after {
    border-right: 1px solid var(--theme-c);
    border-bottom: 1px solid var(--theme-c);
    top: -55px;
    animation: arrowToBottom 1.5s linear infinite;
}

.toker-channel-box .border-svg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.toker-channel-box .border-svg path {
    animation-name: backring;
}

.toker-channel-box .svg-1,
.toker-channel-box .svg-4 {
    width: 122px;
    height: 50px;
}

.toker-channel-box .svg-2,
.toker-channel-box .svg-3 {
    width: 61px;
    height: 50px;
}

.toker-channel-box .svg-1 {
    left: 45px;
    top: 38px;
}

.toker-channel-box .svg-2 {
    width: 61px;
    left: 166px;
    top: 38px;
}

.toker-channel-box .svg-3 {
    width: 61px;
    left: 226px;
    top: 38px;
}

.toker-channel-box .svg-4 {
    left: 286px;
    top: 38px;
}

.toker-channel-box .svg-5,
.toker-channel-box .svg-6,
.toker-channel-box .svg-8,
.toker-channel-box .svg-9 {
    width: 90px;
    height: 50px;
    top: 345px;
}

.toker-channel-box .svg-5 {
    left: 45px;
}

.toker-channel-box .svg-6 {
    left: 136px;
}

.toker-channel-box .svg-7 {
    width: 2px;
    height: 50px;
    top: 345px;
    left: 226px;
}

.toker-channel-box .svg-8 {
    left: 228px;
}

.toker-channel-box .svg-9 {
    left: 318px;
}

.toker-channel-box .svg-10,
.toker-channel-box .svg-11,
.toker-channel-box .svg-12,
.toker-channel-box .svg-13,
.toker-channel-box .svg-15,
.toker-channel-box .svg-16 {
    width: 90px;
    height: 50px;
    top: 38px;
}

.toker-channel-box .svg-10 {
    left: 607px;
}

.toker-channel-box .svg-11 {
    left: 698px;
}

.toker-channel-box .svg-12 {
    left: 789px;
}

.toker-channel-box .svg-13 {
    left: 880px;
}

.toker-channel-box .svg-14 {
    left: 971px;
    width: 1px;
    height: 50px;
    top: 38px;
}

.toker-channel-box .svg-15 {
    left: 973px;
}

.toker-channel-box .svg-16 {
    left: 1064px;
}

.toker-channel-box .svg-17,
.toker-channel-box .svg-18 {
    width: 176px;
    height: 176px;
    top: 345px;
}

.toker-channel-box .svg-17 {
    left: 801px;
}

.toker-channel-box .svg-18 {
    left: 972px;
}

.toker-channel-box .svg-19,
.toker-channel-box .svg-20 {
    width: 378px;
    height: 1px;
    top: 217px;
}

.toker-channel-box .svg-19 {
    left: 225px;
}

.toker-channel-box .svg-20 {
    left: auto;
    right: 225px;
}

.toker-channel-box .arrow {
    width: 29px;
    height: 50px;
    fill-rule: evenodd;
    fill: var(--theme-c);
    position: absolute;
    overflow: visible;
}

.toker-channel-box .arrow-1 {
    left: 210px;
    top: 96px;
}

.toker-channel-box .arrow-2 {
    left: 210px;
    top: 288px;
}

.toker-channel-box .arrow-3 {
    left: 955px;
    top: 96px;
}

.toker-channel-box .arrow-4 {
    left: 957px;
    top: 288px;
}

.toker-channel-box .main-list-box {
    width: 877px;
    height: 180px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toker-channel-box .main-list-box > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(65, 151, 255, 0.5);
    text-align: center;
    position: relative;
}

.toker-channel-box .main-list-box > a span {
    position: relative;
    z-index: 3;
    line-height: 112%;
}

.toker-channel-box .main-list-box .item-2,
.toker-channel-box .main-list-box .item-4 {
    box-sizing: border-box;
    width: 112px;
    height: 48px;
    background-color: var(--theme-c);
    border-radius: 30px;
    border: 3px solid #fff;
    font-size: 14px;
    color: #fff;
}

.toker-channel-box .main-list-box .item-2:before, .toker-channel-box .main-list-box .item-2:after,
.toker-channel-box .main-list-box .item-4:before,
.toker-channel-box .main-list-box .item-4:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
}

.toker-channel-box .main-list-box .item-2:before,
.toker-channel-box .main-list-box .item-4:before {
    border-left: 1px solid var(--theme-c);
    border-top: 1px solid var(--theme-c);
    left: 0;
    transform: translateX(-8px) rotate(-45deg);
    animation: arrowToLeft 1.2s linear infinite;
}

.toker-channel-box .main-list-box .item-2:after,
.toker-channel-box .main-list-box .item-4:after {
    border-right: 1px solid var(--theme-c);
    border-bottom: 1px solid var(--theme-c);
    right: 0;
    transform: translateX(8px) rotate(-45deg);
    animation: arrowToRight 1.2s linear infinite;
}

.toker-channel-box .main-list-box .item-1,
.toker-channel-box .main-list-box .item-5 {
    width: 132px;
    height: 132px;
    box-shadow: none;
    font-size: 22px;
    font-weight: bold;
    color: var(--theme-c);
}

.toker-channel-box .main-list-box .item-1:before,
.toker-channel-box .main-list-box .item-5:before {
    content: "";
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 3px solid var(--theme-c);
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(65, 151, 255, 0.5);
}

.toker-channel-box .main-list-box .item-3 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: var(--theme-c);
    border: 3px solid #fff;
    font-size: 22px;
    line-height: 110%;
    color: #fff;
    display: block;
    padding-top: 14px;
}

.toker-channel-box .main-list-box .item-3 svg {
    display: block;
    margin: 0 auto;
    fill: #fff;
}

@keyframes arrowToTop {
    0% {
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    100% {
        transform: translate3d(0, -40px, 0) rotate(45deg);
    }
}

@keyframes arrowToBottom {
    0% {
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    100% {
        transform: translate3d(0, 40px, 0) rotate(45deg);
    }
}

@keyframes arrowToLeft {
    0% {
        transform: translate3d(-8px, 0, 0) rotate(-45deg);
    }
    100% {
        transform: translate3d(-50px, 0, 0) rotate(-45deg);
    }
}

@keyframes arrowToRight {
    0% {
        transform: translate3d(8px, 0, 0) rotate(-45deg);
    }
    100% {
        transform: translate3d(50px, 0, 0) rotate(-45deg);
    }
}

.manager-user-box {
    width: 100%;
    height: 490px;
    position: relative;
}

.manager-user-box .circle-box {
    width: 380px;
    height: 490px;
    position: absolute;
    left: 0;
    top: 0;
}

.manager-user-box .circle-box .item {
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--theme-c);
    position: absolute;
    color: var(--theme-c);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 120%;
}

.manager-user-box .circle-box .item-1 {
    font-size: 14px;
    width: 70px;
    height: 70px;
    left: 160px;
    top: 0;
}

.manager-user-box .circle-box .item-2 {
    font-size: 16px;
    width: 80px;
    height: 80px;
    left: 64px;
    top: 50px;
}

.manager-user-box .circle-box .item-3 {
    font-size: 20px;
    width: 100px;
    height: 100px;
    left: 0;
    top: 140px;
}

.manager-user-box .circle-box .item-4 {
    font-size: 24px;
    width: 126px;
    height: 126px;
    left: 128px;
    top: 154px;
}

.manager-user-box .circle-box .item-5 {
    font-size: 32px;
    width: 160px;
    height: 160px;
    left: 10px;
    top: 254px;
}

.manager-user-box .circle-box .item-6 {
    font-size: 42px;
    width: 200px;
    height: 200px;
    left: 180px;
    top: 288px;
}

.manager-user-box .list-box {
    display: flex;
    position: absolute;
    right: 0;
    top: 150px;
}

.manager-user-box .list-box .iconfont {
    font-size: 80px;
    color: var(--theme-c);
}

.manager-user-box .list-box .item {
    text-align: center;
    position: relative;
}

.manager-user-box .list-box .item:nth-of-type(n + 2) {
    margin-left: 170px;
}

.manager-user-box .list-box .item span {
    font-size: 14px;
    color: #999;
    position: absolute;
    white-space: nowrap;
    left: 176px;
    line-height: 120%;
}

.manager-user-box .list-box .item span.text-1 {
    top: 0;
    transform: translate(-50%, 0);
}

.manager-user-box .list-box .item span.text-2 {
    bottom: 0;
    transform: translate(-50%, 0);
}

.manager-user-box .list-box .item svg {
    position: absolute;
    top: 50%;
    left: -150px;
    transform: translateY(-50%);
    fill: var(--theme-c);
    fill-rule: evenodd;
    width: 137px;
    height: 48px;
    pointer-events: none;
}

.manager-user-box .list-box .item p {
    display: table;
    margin: 0 auto;
    font-size: 16px;
    color: var(--theme-c);
    line-height: 30px;
    border: 1px solid var(--theme-c);
    border-radius: 30px;
    min-width: 76px;
    background-color: #fff;
    padding: 0 10px;
    box-shadow: 0 0 10px rgba(65, 151, 255, 0.5);
}

.manager-user-box .text-list {
    padding: 15px 32px;
    position: absolute;
    overflow: hidden;
}

.manager-user-box .text-list svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.manager-user-box .text-list rect {
    fill: none;
    width: 100%;
    height: 100%;
    stroke: var(--theme-c);
    stroke-width: 2px;
    stroke-dasharray: 4px 4px;
    rx: 8px;
    ry: 8px;
}

.manager-user-box .text-list a {
    font-size: 16px;
    color: var(--theme-c);
    line-height: 160%;
}

.manager-user-box .text-list.list-1 {
    left: 454px;
    top: 45px;
}

.manager-user-box .text-list.list-2 {
    left: 710px;
    top: 45px;
}

.manager-user-box .text-list.list-3 {
    left: 930px;
    top: 45px;
}

.manager-user-box .text-list.list-4 {
    left: 454px;
    top: 286px;
}

.manager-user-box .text-list.list-5 {
    left: 970px;
    top: 286px;
}

.miniProgram-service-box {
  padding: 50px 0;
}
.miniProgram-service-box .tit-box {
  text-align: center;
  padding-bottom: 30px;
}
.miniProgram-service-box .tit-box h2 {
  margin: 0;
  font-size: 30px;
  color: #0099ff;
  line-height: 50px;
  font-weight: bold;
}
.miniProgram-service-box .tit-box > p {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  display: block;
  padding-top: 20px;
  color: #333;
}
.miniProgram-service-box .inner {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.miniProgram-service-box .inner .img-box {
  flex: none;
}
.miniProgram-service-box .inner .img-box img {
  width: 300px;
  display: block;
}
.miniProgram-service-box .inner .text-box {
  flex: none;
  width: 850px;
}
.miniProgram-service-box .inner .text-box .tit-1 {
  font-size: 20px;
  display: block;
  font-weight: bold;
  color: #0099ff;
  margin: 0;
}
.miniProgram-service-box .inner .text-box .tit-2 {
  font-size: 14px;
  display: block;
  color: #333;
  margin: 5px 0 0;
  line-height: 1.5;
}
.miniProgram-service-box .inner .service-list-box {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}
.miniProgram-service-box .inner .service-list-box .service-item {
  width: 50%;
  flex: none;
  padding-right: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: start;
  margin-bottom: 30px;
}
.miniProgram-service-box .inner .service-list-box .service-item img {
  width: 40px;
  height: 40px;
  flex: none;
  margin-right: 10px;
}/*# sourceMappingURL=test.css.map */

/*# sourceMappingURL=transportation_add.css.map */