/*===========================
        4.ABOUT css
===========================*/
.index-background{
    width: 100%;
    height: 808px;
    margin: 0 auto;
    background: url("../img/video/goshippro-index-warehouse.gif?123")no-repeat center center;
    background-size: cover;
}
.hero-section{
    width: 100%;
    height: 100%;
    text-align: center; /* 如果想让图片居中 */
    margin-bottom: 40px; /* 底部留白，可按需调整 */
    position: relative;
    padding-top: 13px;
}
.banner-title{
    font-family: Poppins, serif;
    font-weight: bold;
    color: #fEBD95;
    font-size: 60px;
    display: flex;
    justify-content: center;
    margin-top: 95px;
}
/* 副标题 */
.banner-subtitle {
    font-family: Poppins, serif;
    display: flex;
    justify-content: center;
    color: #ffE1cf;
    font-weight: bold;
    font-size: 25px;
    line-height: 50px;
}
.banner-title-list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin:0 auto;
}
.banner-title-item{
    width: 100%;
    justify-content: center;
}


.section-main{
    font-family: Poppins, serif;
    color: #ffE1cf;
    font-size: 18px;
    line-height: 36px;
}
.section-main:hover img {
    filter: brightness(0) saturate(100%) invert(49%) sepia(96%) saturate(1347%) hue-rotate(4deg);
}



.hero-gif{
    max-width: 100%;
    height: auto; /* 确保图片纵横比不变 */
    display: inline-block; /* 如果要居中，可以使用 text-align: center; */
    position: relative;
}

.section-buttons{
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    border: 2px solid #fff;
    justify-content: center;
    position: absolute;
    z-index: 98;
    left: 50%;
    bottom: 15%;
    transform: translate(-50%, -50%);
    gap: 2px;
    background: #FFFFFF;
    width: 360px;
}

.section-buttons .btn{
    padding: 12px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    flex: 1;
}
.section-buttons .dark{
    background: #000;
    color: #fff;
}
.section-buttons .dark:hover{
    background:#f08300 ;
    color: #fff;
}
.section-buttons .dark .inner {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}
.section-buttons .dark:hover .inner{
    transform: scale(1.05);
}


.btn-dark-icon{
    font-size: 8px;
    margin-right: 8px;
    vertical-align: middle;
}


.section-buttons .light{
    background: #f08300;
    color: #fff;
    font-size: 18px;
}

.section-buttons .light:hover{
    background: #000;
    color: #fff;
}

/* 首页手机端显示 */
.index-background-phone{
    width: 100%;
    margin: 0 auto;
    background: #140701;

}
.hero-section-phone{
    height: 393px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: url("../../static/img/home/background-map.png")no-repeat;
    background-position-y: 100%;
    background-size: cover;
}
.hero-img {
    position: absolute;        /* 使图片不参与文档流 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 保持比例铺满容器 */
    z-index: 9;               /* 确保图片位于容器内其他内容的下方 */
}


.data-phone{
    height: 427px;
    opacity: 1;
    background: rgba(20, 7, 1, 1);
}

.data-phone-box{
    position: relative;
    width: 343px;
    height: 371px;
    opacity: 1;
    border-radius: 35px;
    border: 1px solid #291d10;
    /*box-shadow: 0px 0px 10px  rgba(240, 131, 0, 0.8);*/
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 38px 22px 48px 21px;
    /* 新增间距代码 */
    gap: 38px 10px; /* 行间距38px | 列间距20px */
    box-shadow: 0 0 20px rgba(255, 180, 90, 0.1), inset 0 0 30px rgba(255, 120, 30, 0.05);
    background: rgba(0,0,0,0);
}



.data-phone-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 171px;
    height: 159px;
    background: rgba(240, 131, 0, 0.65);
    filter: blur(88px);
    transform: translate(-50%, -50%);
    z-index: 0;
    border-radius: 50%;
    pointer-events: none; /* 防止遮挡点击 */
}
.data-phone-item{
    width: 140px;
    height: 68px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: rgba(0,0,0,0);
}
.data-phone-num{
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 45px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
    font-family: Poppins-SemiBold, serif;
    margin-bottom: 5px;
}
.data-phone-title{
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 17px;
    color: rgba(229, 229, 229, 1);
    text-align: center;
    vertical-align: top;
    font-family: Poppins-Regular, serif;
}

.bg-earth-phone{
    background: url("../../static/img/home/bg-phone-earth.gif?v=1.0") no-repeat center -40px;
    background-size: cover;
    width: 100%;
    height: 615px;
    position: relative;
}
.world-warehouse{
    width: 90%;
    position: absolute;
    top: 39%;
    left: 10%;
}
.warehouse-item{
    width: 90%;
    position: relative;
}
.warehouse-item-top {
    position: absolute;
    top: 10px; /* 根据图片在容器中的实际位置进行调整 */
    left: 40px;
}
.warehouse-item-bottom {
    position: absolute;
    top: 34px; /* 根据图片在容器中的实际位置进行调整 */
    left: 40px;
}

.warehouse-item p{
    font-family: Poppins;
    color: #f5f5f5;
    font-size: 13px;
}
.warehouse-item img{
    width: 90%;
    height: 54px;
    object-fit: cover;
}

.section-title-phone{
    font-family: Poppins;
    font-weight: bold;
    color: #fEBD95;
    font-size: 28px;
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.hero-divider{
    width: 50px;             /* 横线宽度，可根据设计需求调整 */
    border: 0;               /* 移除默认边框 */
    height: 2px;             /* 横线高度 */
    background-color: #F2C79F; /* 横线颜色 */
    margin: 10px auto 10px;  /* 上下、左右外边距，自动居中 */
}


.section-p-phone{
    font-family: Poppins;
    display: flex;
    justify-content: center;
    color: #ffE1cf;
    font-weight: bold;
}
.section-main-phone{
    font-family: Poppins-Regular, serif;
    color: #ffE1cf;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 21px;
}

.section-buttons-phone{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    border: 3px solid #fee1cf;
    gap: 3px;
    background: #fee1cf;
    width: 245px;
}
.section-buttons-phone .section-button{
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins-SemiBold, serif;
    flex: 1;
    /* 新增：禁止换行 */
    white-space: nowrap;

}



.section-buttons-phone .dark{
    background: #000;
    color: #ffffff;
}

.section-buttons-phone .light{
    background: #f08300;
    color: #ffffff;
    font-size: 17px;
}





/*===========================
    5.SERVICES css
===========================*/
.services{
    width: 100%;
    height: 150px;
    opacity: 1;
    background: rgba(20, 7, 1, 1);
    position: relative;

}


.data-box{
    width: 1492px;
    height: 107px;
    opacity: 1;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 219, 184, 0.04) 36.8%, rgba(255, 187, 120, 0.08) 51.63%, rgba(255, 219, 184, 0.04) 63.89%, rgba(255, 141, 26, 0) 85.42%);
    box-shadow: 0px 0px 15px  rgba(0, 0, 0, 0.09);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto 27px auto;

}

.date-title__font{
    /** 文本1 */
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 53.2px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
    margin-bottom: 2px;


}
.data-item{
    /* 基础边框设置 */
    border-right: 2px solid transparent; /* 必须设置透明底色 */

    /* 渐变边框 */
    border-image: linear-gradient(180deg,
    rgba(255, 141, 26, 0) 0%,
    rgba(255, 160, 43, 0.6) 52.08%,
    rgba(255, 141, 26, 0) 100%
    ) 1; /* 末尾的 1 表示 border-image-slice */
    /* 明确声明 */
    font-family: Poppins-Medium, serif;
    /* 其他样式 */
    opacity: 1;
    margin-top: 13.5px;
    margin-bottom: 13.5px;
}

.data-item:last-child {
    border-right: none !important;
}

.data-title__des{
    /*margin-top: 10px;*/
    /*color: #595757;*/
    /*font-size: 15px;*/
    /*font-family: Open Sans,sans-serif;*/
    /*left: 78px;*/
    /*top: 54px;*/
    /*width: 44px;*/
    /*height: 24px;*/
    /*opacity: 1;*/
    /*display: flex;*/

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 30px;
    color: rgba(229, 229, 229, 1);
    text-align: center;
    vertical-align: top;
    font-family: Poppins-Regular, serif;

}

.data-circle-1{
    position: absolute;
    top:9px;
    left: 18px;
    width: 70px;
    height: 70px;
    opacity: 1;
    transform: rotate(-174.28deg);
    background: rgba(20, 7, 1, 1);
    filter: blur(15px);
    border-radius: 50%;
}


.data-circle-2{
    position: absolute;
    top:63px;
    left: 18px;
    width: 67px;
    height: 67px;
    opacity: 1;
    transform: rotate(-174.28deg);
    background: rgba(20, 7, 1, 1);
    filter: blur(15px);
    border-radius: 50%;
}

.data-circle-3{
    position: absolute;
    top:9px;
    right: 18px;
    width: 67px;
    height: 67px;
    opacity: 1;
    background: rgba(20, 7, 1, 1);
    filter: blur(15px);
    border-radius: 50%;
}

.data-circle-4{
    position: absolute;
    top:63px;
    right: 18px;
    width: 70px;
    height: 66px;
    opacity: 1;
    background: rgba(20, 7, 1, 1);
    filter: blur(15px);
    border-radius: 50%;
}


.data-title__des-phone{
    margin-top: 10px;
    color: #595757;
    font-size: 10px;
    margin-bottom: 15px;
    font-family: Poppins, serif;
}

/* 包裹 */
.feature-box__container {
    position: relative;
    width: 100%; /* 根据需要调整 */
    height: 1000px; /* 根据需要调整 */
    display: flex;
    justify-content: center;
    align-items: center;
}
/*手机端显示*/
.feature-box__phone{
    flex: 1 1 calc(33.333% - 20px);
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform-origin: center center;
    margin: 5px; /* 增加上下间距 */
    transition: transform 0.3s ease-in-out;
}
.feature-box__phone:hover{
    cursor: pointer;
}

.feature-box__phone h3 {
    margin-top: 0;
    font-size: 16px;
    font-family: Nunito,'sans-serif';
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;

}

.feature-box__phone h3 img:first-child {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.feature-box__phone h3 img:last-child {
    width: 25px;
    height: 25px;
    margin-left: auto; /* 右对齐 */
}

.feature-box__phone p {
    font-size: 15px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
}

.central-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.central-image img {
    width: 800px; /* 根据需要调整 */
    height: auto;
}

.feature-box {
    flex: 1 1 calc(33.333% - 20px);
    position: absolute;
    background-color: white;
    padding:10px 10px 0px 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform-origin: center center;
    margin: 20px; /* 增加上下间距 */
    transition: transform 0.3s ease-in-out;
}
.feature-box:hover > h3{
    cursor: pointer;
    color: #f08300;
}
.feature-box:hover{
    box-shadow: 1px 5px 10px 0px rgba(41, 41, 41, 0.2);
}

.feature-box h3 {
    margin-top: 5px;
    font-size: 18px;
    font-family: Roboto,'sans-serif';
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    position: relative;
}

.feature-box h3 img:first-child {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.feature-box h3 img:last-child {
    width: 25px;
    height: 25px;
    margin-left: auto; /* 右对齐 */
    position: absolute;
    right: 10px;
}

.feature-box p {
    font-size: 15px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

/* 定位功能框 */
.extensive-sourcing {
    top: 26%;
    left: 10%;
    width: 330px;
    height: 129px;
}
.niche-searching {
    top: 12%; /* 调整以定位到所需位置 */
    left: 35%;
    width: 466px;
    height: 105px;
}
.centralized-purchasing {
    top: 43%;
    left: 6%;
    width: 345px;
    height: 129px;
}
.free-warehousing {
    top: 26%;
    left: 67%;
    width: 410px;
    height: 129px;
}
.automated-fulfillment {
    top: 60%;
    left: 10%;
    width: 420px;
    height: 150px;
}
.double-check {
    top: 43%;
    left: 69%;
    width: 430px;
    height: 129px;
}
.pod-packaging {
    top: 60%;
    left: 65%;
    width: 390px;
    height: 129px;
}
.after-sales-support {
    top: 77%;
    left: 37%;
    width: 390px;
    height: 105px;
}
/*时间戳导航 */
.guide-container{
    background: #FFFFFF;
}

.guide-title{
    color: #f08300;
    font-family: Nunito,'sans-serif';
    font-size: 20px;
}
.guide-title-phone{
    color: #f08300;
    font-family: Nunito,'sans-serif';
    font-size: 14px;
}


.guide-header{
    color: #000000;
    font-family: Roboto,'sans-serif';
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 50px;
    line-height: 52px;
    position: relative;
}

.guide-header-phone{
    color: #f08300;
    font-family: Roboto,'sans-serif';
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 52px;
    position: relative;
}

.step-image{
    margin-left: 30px;
    margin-right: 30px;
}
.step-image img{
    width: 100%;
    object-fit: cover;
}
.image-step1{
    width: 120px;
    height: 104px;
}
.image-step2{
    width: 120px;
    height: 104px;
}
.image-step3{
    width: 120px;
    height: 104px;
}
.image-step4{
    width: 120px;
    height: 104px;
}
.image-step5{
    width: 120px;
    height: 104px;
}
.image-step6{
    width: 120px;
    height: 104px;
}







.step-image__phone{
    width: 120px;
    height: 100px;
    /*margin-left: 8px;*/
    /*margin-right: 8px;*/
}
.step-image__phone img{
    width: 100%;
    object-fit: cover;
}


.header {
    text-align: center;
    margin-bottom: 70px;
}
.header-phone{
    text-align: center;
    width: 100%;
}

.icon-bar {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-bar .image-icon {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    transition: filter 0.5s ease;
}
.icon-skype{
    width: 27px !important;
    height: 27px !important;
}

.icon-bar .image-icon:hover{
    cursor: pointer;
    filter: brightness(0) saturate(100%);
}
.guide-item__wx {
    position: relative;
    display: inline-block;
    margin-left: 15px;
}
.guide-item {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.guide-item .step-image__phone {
    float: right;
}

.wxqrcode {
    display: none;
    position: absolute;
    top: 100%; /* Position it below the icon */
    left: 50%;
    transform: translateX(-50%);
    width: 150px; /* Adjust size as needed */
    height: auto;
    z-index: 10;
    background-color: #fff; /* Optional: Add a background color */
    border: 1px solid #ccc; /* Optional: Add a border */
    padding: 5px; /* Optional: Add padding */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
}

.guide-item__wx:hover .wxqrcode {
    display: block;
}





.columns {
    display: flex;
}
.column-right .step{
    line-height: 65px;
}
.column-left {
    flex: 1;
    margin: 0 10px;
}
.column-right{
    flex: 1;
    margin: 0 10px;
}

.step-1{
    height: 70px;
    justify-content: right;
}
.step-2{
    height: 90px;
}
.step-3{
    height: 80px;
    justify-content: right;
}
.step-4{
    height: 80px;
}
.step-5{
    height: 90px;
    justify-content: right;
}
.step-6{
    height: 70px;
}
.step-1 .step-title{
    width: 145px;
    display: inline-block;
}
.step-1 .step-text{
    width: 325px;
}
.step-3 .step-text{
    width: 325px;
}
.step-3 .step-title{
    width: 145px;
    display: inline-block;
}
.step-5 .step-text{
    width: 350px;
}

.step-5 .step-title{
    width: 145px;
    display: inline-block;
}

.step {
    display: flex;
    align-items: center;
    width: 100%;
}

.step-number {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

.step-title{
    font-weight: bold;
    color: #000000;
    --min-size: 15;
    --max-size: 18;
    --font-size: calc(
            (var(--min-size) * 1px) +
            (var(--max-size) - var(--min-size)) *
            ((100cqw - 320px) / (1920 - 320))
    );
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.step-left{
    justify-content: end;
}

.column-right .step .step-title{
    width: 140px;
}
.column-right .step .step-text{
    width: 340px;
}

.step-text {
    margin: 0;
    font-size: 16px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

.step-text-phone {
    margin: 0;
    font-size: 11px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
}

.timeline {
    text-align: center;
}
.timeline img {
    width: 100%;
}
/*合作伙伴 */
.connect-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: Arial, sans-serif;
    background: linear-gradient(1turn, #f8f8fa, #fff);
}

.connect-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    margin: 25px auto 26px;
    padding-bottom: 15px;
    position: relative;
    padding-right:10px;
}

.connect-row {
    display: flex;
    align-items: center;
    margin-top: 4px;
    /*vertical-align: top;*/
}

.connect {
    font-size: 36px;
    line-height: 36px;
    font-weight: bold;
    color: #FF8C00; /* Adjusted color to match the design */
    margin-right: 34px;
}
.connect__phone{
    font-size: 25px;
    font-weight: bold;
    color: #FF8C00; /* Adjusted color to match the design */
}


.now {
    font-size: 20px; /* Adjusted for the smaller size */
    line-height: 20px;
    color: black; /* Black color for "now" */
    margin-top: 10px;
    font-weight: bold;
    text-align: left;
}

.your {
    font-size: 20px; /* Adjusted for the smaller size */
    line-height: 36px;
    color: black; /* Black color for "your" */
    margin-left: 67px;
    font-weight: bold;
    padding-bottom: 8px;
}

.store {
    font-size: 36px;
    line-height: 36px;
    font-weight: bold;
    color: #FF8C00; /* Adjusted color to match the design */
    padding-left: 20px;
}

.integration {
    font-size: 18px;
    color: black;
    position: absolute;
    right: 107px;
    bottom:9px;

}
.integration__phone{
    font-size: 20px;
    color: black;
    margin-left: 5px;
    margin-right: 5px;
}

.mouse-icon {
    width: 30px; /* Adjust width as needed */
    margin-right: 190px;
}
.mouse-icon__phone{
    width: 30px; /* Adjust width as needed */
}
.settings-icon__phone{
    width: 35px; /* Adjust width as needed */
}

.settings-icon {
    width: 35px; /* Adjust width as needed */
    margin-left: 20px;
}
/**/
.freight-left__container{


}
.freight-title{
    color: #000000;
    font-family: Roboto, 'sans-serif';
    font-weight: bold;
    font-size: 34px;
    line-height: 52px;
    vertical-align: center;
    width: 662px;
    text-indent: 2.4em;

}
.freight-title__phone{
    color: #000000;
    font-family: Roboto, 'sans-serif';
    font-weight: bold;
    font-size: 20px;
    line-height: 52px;
    vertical-align: center;
}

.freight-title__bottom{
    color: #f08300;
    font-family: Roboto, 'sans-serif';
    font-weight: bold;
    font-size: 34px;
    line-height: 48px;
    vertical-align: center;
    width: 662px;
}
.freight-title__bottom-phone{
    color: #f08300;
    font-family: Roboto, 'sans-serif';
    font-weight: bold;
    font-size: 20px;
    line-height: 48px;
    vertical-align: center;
}

.freight-map{
    background: url("../../static/img/home/Goshippro-global-map.png") no-repeat left 80px top 0;
    background-size: contain;
    width: 662px;
    height: 295px;
    overflow: hidden;
    margin-top: 35px;
}
.freight-map__phone{
    background: url("../../static/img/home/Goshippro-global-map.png")no-repeat;
    width: 100%;
    height: 210px;
    background-size: contain;
}

.logistics-item{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 60%;
    line-height: 50px;
    padding: 15px;
    margin: 0  auto;
    overflow: hidden;
}
.logistics-item__phone{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    line-height: 50px;
    overflow: hidden;
    margin: 0  auto;
}
.logistics-item__box-phone img{
    width: 90px;
    height: 60px;
    object-fit: contain;
}



.logistics-item__box img{
    max-width: 180px; /* 根据需要调整最大宽度 */
    max-height: 120px; /* 根据需要调整最大高度 */
    object-fit: contain;
}
.freight-warehouse{
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    display: flex;
    margin-left: 67px;
}
.freight-warehouse__phone{
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    display: flex;
}

.freight-warehouse__right{
    display: flex;
    flex-wrap: wrap;
}
.freight-warehouse__right div{
    display: inline-block;
    height: 25px;
}
.freight-warehouse__country{
    width: 70px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-align: right;
}
.freight-warehouse__country-usa{

    width: 75px;
    padding-right: 10px;
}
.freight-warehouse__day{
    width: 73px;
    padding-right: 10px;
}

.freight-warehouse__usa{
    display: flex;
    flex-wrap: wrap;
}
.freight-warehouse__usa div{
    display: inline-block;
    height: 25px;
}
/**/
.why-choose {
    text-align: center;
    background:  #f8f8fa;
}
.feature:hover{
    color: #f08300;
}

.why-choose__title{
    font-size: 40px;
    font-weight: bolder;
    color: #000000;
    font-family: Roboto, 'sans-serif';
    margin-bottom: 35px;
}
.why-choose__title-phone{
    font-size: 20px;
    font-weight: bolder;
    color: #000000;
    font-family: Roboto, 'sans-serif';
    margin-bottom: 10px;
}

.logistice-container{
}

.subtitle {
    color: #f90;
    animation: typing 2s steps(15, end), blink-caret .75s step-end infinite;
    overflow: hidden;
    width: 220px;
    height: 25px;
    margin: 0 auto 50px;
    word-break: break-all;
}
.subtitle__phone {
    color: #f90;
    margin-bottom: 10px;
}

/* 打印效果 */
@keyframes typing {
    from { width: 0; }
    to { width: 220px; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}


.features-grid {
    display: flex;
    flex-wrap: wrap;       /* 允许元素换行 */
    justify-content: center; /* 居中对齐 */
    gap: 20px 56px;
}

.feature {
    display: flex;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    align-items: center;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: box-shadow 0.3s;
    width: 420px;
    color: #0b0b0b;
    /*flex: 0 1 calc(33.33% - 56px); !* 每行3个，减去间隔 *!*/
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.feature__phone {
    display: flex;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: box-shadow 0.3s;
    width: 100%;
    font-size: 12px;
    margin-bottom: 10px;
}
.feature img {
    max-width: 30px;
    margin-left: 10px;
    margin-right: 20px;
}

.feature__phone img {
    max-width: 30px;
    margin-right: 10px;
}

.feature:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.feature__phone:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}


/**/
.testimonials-section{
    padding-bottom: 120px;
}

.mySwiper-box{
    overflow: hidden;
    margin-top: 30px;
    height: 460px;
    position: relative;
    padding-top: 40px;
}

.mySwiper-container {
    position: relative;
    width: 100%;
    height: 284px;
}
.swiper-slide__container{
    width: 100%;
    display: flex;
}
.swiper-container-phone{
    width: 100%;
    overflow: hidden;
    height: 350px;
    position: relative;
}
.swiper-wrapper-phone{
    display: flex;
    flex-direction: row;
    width: 85%;
    margin: 0 auto;
}

.swiper-slide__left{
    width: 400px;

}
.swiper-slide__right {
    width: 320px;
    margin-left: 12px;
    position: relative;
    padding-left: 10px;
}

.mySwiper-container .swiper-slide-pc {
    font-size: 18px;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8)!important;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.08);
    /*border: 1px solid #ebeef5;*/
    padding: 10px 20px;
}
.swiper-slide-phone{
    justify-content: center;
    align-items: center;
    transition: 300ms;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 5px 10px;
    margin-top: 10px;
    height: 95% !important;
}
.swiper-slide-phone .swiper-slide__right-main{
    font-size: 12px;
}


.swiper-slide-phone .swiper-slide__left{

}

.swiper-slide-phone .video-title{
    font-size: 13px;
    color: #595757;
    text-align: left;
    font-family: Roboto, 'sans-serif';
    width: 100%;
    margin-bottom: 15px;
}

.mySwiper-container .swiper-slide-pc .video-title{
    font-size: 16px;
    color: #595757;
    text-align: left;
    font-family: Roboto, 'sans-serif';
    width: 100%;
    margin-bottom: 12px;
}
.up-name{
    position: absolute;  /* 使用绝对定位 */
    bottom: 0;           /* 距离父元素底部0 */
    right: 9px;            /* 距离父元素右边0 */
    font-size: 19px;     /* 可选：调整字体大小 */
    font-family:Open Sans, 'sans-serif';

}


.swiper-slide-pc img{
    /*width: 100%;*/
    height: 200px;
    border-radius: 8px;
}


.mySwiper-container .swiper-slide-active,.swiper-slide-duplicate-active{
    transform: scale(1) !important;
}
.mySwiper-container .swiper-slide-prev{
    position: relative;
}
.mySwiper-container .swiper-slide-next{
    position: relative;
}
.mySwiper-container .swiper-slide-prev::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
    z-index: 1;
}
.mySwiper-container .swiper-slide-next::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
    z-index: 1;
}

.swiper-slide__right-main{
    color: #000000;
    font-family: Open Sans, 'sans-serif';
    font-size: 19px;
    line-height: 40px;

}

/*去掉默认样式*/
.swiper-button-prev:after{
    display: none;
}
.swiper-button-next:after{
    display: none;
}
.swiper-button-next{
    width: 54px !important;
    height: 54px !important;
}
.swiper-button-prev{
    width: 54px !important;
    height: 54px !important;
}

.swiper-pagination-bullet-active {
    background-color: #ff9900 !important;
}

.swiper-slide__footer{
    display: flex;
    align-items: center;
    margin-top: 4px;
}
.swiper-slide__footer-phone{
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.swiper-slide__footer-item{
    width: 100px;
}

.swiper-slide__footer-item-phone{
    width: 70px;
}

.swiper-slide__footer-item span{
    color: #595757;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    margin-left: 5px;
}
.swiper-slide__footer-item-phone span{
    color: #595757;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    margin-left: 3px;
}


.swiper-slide__footer-item img{
    width: 17px;
    height: 17px;
}
.swiper-slide__footer-item-phone img{
    width: 15px;
    height: 15px;
}


.review-container {
    width: 88%;
    margin-top: 120px;
    margin-bottom: 30px;
    position: relative;
}
.stars {
    color: orange;
    font-size: 24px;
    margin-bottom: 20px;
    position: absolute;
    left: 361px;
    top: 50px;
}
.stars__phone {
    color: orange;
    font-size: 24px;
}

.stars img{
    width: 136px;
    height: 136px;
}


.stars__phone img{
    width: 50px !important;
    height: 50px !important;
    margin-right: 15px;
}


.question {
    font-size: 40px;
    font-weight: bold;
    font-family: Roboto, 'sans-serif';
    padding-bottom: 5px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.question__phone {
    font-size: 20px;
    font-weight: bold;
    font-family: Roboto, 'sans-serif';
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}



.question-about__phone{
    font-size: 20px;
    font-weight: bold;
    font-family: Roboto, 'sans-serif';
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.question img{
    width: 38px;
    height: 35px;
    position: absolute;
    top: 15px;
    right: 155px;
}

.question__phone img{
    width: 20px;
    height: 20px;
    margin-left: 15px;
}


.question-about{
    text-indent: 9.1em;
}
.quote {
    font-size: 16px;
    color: orange;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    text-indent: 44em;
    padding-bottom: 20px;
}
.quote__phone {
    font-size: 14px;
    color: orange;
    margin-top: 20px;
    text-align: center;
}
/**/
.calculator-container{
    border: 1px solid white;
    border-radius: 33px;
    padding: 40px 20px;
    text-align: center;
    width: 72%;
    margin: 100px auto 0;
}
.calculator-container-phone{
    border: 1px solid white;
    border-radius: 33px;
    padding: 40px 20px;
    text-align: center;
    margin: 100px auto 0;
    width: 100%
}

.calculator-container__title{
    color: #FFFFFF;
    width: 100%;
    margin-bottom: 40px;
    font-family:Open Sans, 'sans-serif';
    font-size: 29px;
}
.calculator-container__title-phone{
    color: #FFFFFF;
    width: 100%;
    margin-bottom: 40px;
    font-family:Open Sans, 'sans-serif';
    font-size: 18px
}

.calculator-start__button{
    color: #FFFFFF;
    background: #f08300;
    font-size: 23px;
    font-family: Roboto, 'sans-serif';
    padding: 6px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
}
.calculator-start__button img:last-of-type {
    display: none;
}


.calculator-start__button:hover{
    color: #f08300;
    background: #FFFFFF;
}
.calculator-start__button:hover img:first-of-type{
    display: none;
}
.calculator-start__button:hover img:last-of-type{
    display: block;
}



.image-line{
    width: 100%;
    text-align: center;
}
.image-line img{
    max-width: 1025px;
}

.calculator-header {
    color: #ffffff;
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: Roboto, 'sans-serif';
    font-weight: bold;
}
.calculator-title{
    color: #ffffff;
    font-size: 24px;
    margin-top: 20px;
    font-family: Roboto, 'sans-serif';
    margin-bottom: 20px;
}
.label-header{
    color: #ffffff;
    font-size: 15px;
}

.calculator-box {
    width: 85%;
    border: 1px solid #ffffff;
    background: #ffffff;
    min-height: 354px;
    border-radius: 12px;
    text-align: center;
    padding: 30px 18px 18px 18px;
}

.calculator-num {
    line-height: 70px;
    font-size: 36px;
    font-weight: bolder;
}



/*.logistics-swiper-first{*/
/*    margin-left: 180px;*/
/*}*/

/*.logistics-swiper-second{*/
/*    padding-bottom: 30px;*/
/*    padding-top: 30px;*/
/*    margin: 0 auto;*/
/*}*/

/*.logistics-swiper-third{*/
/*    margin-left: 180px;*/
/*}*/
.a-discord{
    color: #000000;
    text-decoration: underline;
}
.a-discord:hover{
    color: #5865f2;
    text-decoration: none;
}


.logistics-swiper-first>.swiper-wrapper {
    -webkit-transition-timing-function: linear !important;    /*之前是ease-out*/
    -moz-transition-timing-function: linear !important;
    -ms-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}
.logistics-swiper-second>.swiper-wrapper {
    -webkit-transition-timing-function: linear !important;    /*之前是ease-out*/
    -moz-transition-timing-function: linear !important;
    -ms-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}
.logistics-swiper-third>.swiper-wrapper {
    -webkit-transition-timing-function: linear !important;    /*之前是ease-out*/
    -moz-transition-timing-function: linear !important;
    -ms-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}
.step:hover> .step-title{
    color: #f08300;
}

.logo-phone {
    width: 100px;
    object-fit: cover;
}
.calculator-box-pone{
    width: 100%;
    border: 1px solid #ffffff;
    background: #ffffff;
    min-height: 354px;
    border-radius: 12px;
    text-align: center;
    padding: 30px 18px 18px 18px;
}
.p-size-phone{
    width: 90%;
    text-indent: 1em;
    margin-bottom: 8px;
}

.slider-item-phone{
    width: 95%;
    line-height: 30px;
    height: 30px;
    background: rgb(226, 144, 88);
    border-radius: 20px;
    position: relative;
}