/*pixris 20241008 添加SEA 的section*/
.mapDiv {
    margin-top: 100px;
}

.caseDiv {
    margin-top: 50px;
}

.caseDivTitle {
    padding-left: 15px;
}

.mapLeftButtonList {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 均匀分布按钮 */
    width: 100%; /* 让按钮列表占满父容器 */
    margin-top: 10vh;
}

    .mapLeftButtonList div {
        flex: 1; /* 使每个按钮容器均匀分布 */
        margin: 5px 5px; /* 按钮间距 */
    }

    .mapLeftButtonList button {
        background-color: white; /* 默认背景颜色 */
        color: #3AB980; /* 默认文字颜色 */
        border: 2px solid #3AB980; /* 默认边框颜色 */
        border-radius: 100px; /* 圆角 */
        padding: 5px 5px; /* 内边距 */
        font-size: 14px; /* 字体大小 */
        cursor: pointer; /* 鼠标指针样式 */
        transition: background-color 0.3s, color 0.3s; /* 过渡动画 */
        width: 100%; /* 按钮占满其容器 */
    }

        .mapLeftButtonList button:hover {
            background-color: #3AB980; /* 鼠标移入时背景颜色 */
            color: white; /* 鼠标移入时文字颜色 */
        }

        .mapLeftButtonList button.selected {
            background-color: #3AB980; /* 常亮状态背景颜色 */
            color: white; /* 常亮状态文字颜色 */
        }


        .mapLeftButtonList button:focus {
            outline: none; /* 去掉焦点边框 */
        }


.mapImage {
    max-width: 600px; /* PC端最大宽度 */
    width: 100%; /* 移动端占满宽度 */
    height: auto; /* 保持高度比例 */
}


.overlayInMap {
    position: absolute; /* 设置为绝对定位 */
    background-color: rgba(0, 0, 0, .6); /* 半透明背景 */
    padding: 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    z-index: 1; /* 确保在图片上方 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.japanMapContentBox {
    width: 56%; /* 宽度占满父容器 */
    left: 20%;
    top: 80px;
}

.logoInMapTitle {
    padding-left: 5px;
    color: #ffffff !important;
}

.logoInMapText {
    padding-left: 20px; /* 列表缩进 */
    margin: 0; /* 去掉默认的外边距 */
}

    .logoInMapText li {
        margin-bottom: 5px; /* 列表项间距 */
        color: #ffffff;
    }


/*用于控制地图上的文本的图片Box*/
.logoInMapImgBox {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 均匀分布图像 */
    background-color: #ffffff;
    width: 98%;
    height: 40px;
    margin-left: 1%;
    margin-top: 10px; /* 图像与上方文本的间距 */
    margin-bottom: 5px;
    padding: 5px 5px;
    border-radius: 5px; /* 圆角 */
}

.inMapImage {
    margin-right: 8px; /* 图标间距 */
}

    .inMapImage:last-child {
        margin-right: 0; /* 最后一个图标不需要右边距 */
    }

/*标签隐藏*/
.tagHide {
    display: none !important;
}

.caseDivTitle p {
    color: gray;
}


.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 60% !important;
    color: #3AB980 !important;
}

.swiper-button-prev {
    left: 10% !important;
}

.swiper-button-next {
    right: 10% !important;
}

.pcSwiper {
    margin-top: 100px;
    width: 100%;
    height: 470px;
}

    .pcSwiper .swiper-slide {
        display: flex;
        flex-direction: column; /* 垂直排列子元素 */

        background-color: #f9f9f9; /* 背景颜色 */
        border-radius: 20px; /* 圆角 */
    }

/* 设置图片的样式 */
.insightImage img {
    width: 100%; /* 宽度铺满父容器 */
    max-height: 200px; /* 最大高度为200像素 */
    height: 200px;
    object-fit: cover; /* 保持比例并裁剪超出部分 */
    border-radius: 20px 20px 0px 0px; /* 圆角 */
}

.insightBody {
    width: 100%;
    height: 150px;
    background-color: #ffffff;
    border-left: 2px solid #CCCCCC;
    border-right: 2px solid #CCCCCC;
}

    .insightBody .bodyContent {
        color: #666666;
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
    }

.insightBodyImage {
    margin-top: 15px;
}

    .insightBodyImage img {
        max-height: 50px;
    }

.insightBodyFont {
    margin-top: 15px;
}

    .insightBodyFont p {
        position: absolute;
        background-color: #006A2D;
        color: #ffffff;
        padding: 0px 10px; /* 内边距 */
        font-size: 14px; /* 字体大小 */
        border-radius: 5px; /* 圆角 */
        border: none;
        right: 4px;
    }


.insightFooter {
    display: flex; /* 使用 Flexbox 布局 */
    /*align-items: center;*/ /* 垂直居中 */
    justify-content: space-between; /* 水平分散对齐 */
    border-left: 2px solid #CCCCCC;
    border-right: 2px solid #CCCCCC;
    border-bottom: 2px solid #CCCCCC;
    border-radius: 0 0 20px 20px; /* 圆角 */
}

.leftPanel, .rightPanel {
    margin-top: 20px;
    text-align: center; /* 文本居中 */
    flex: 1; /* 平均分配宽度 */
}

.rightPanel {
    margin-left: 0.5px;
}

.divider {
    width: 1px; /* 竖线的宽度 */
    height: 80px; /* 竖线的高度 */
    background-color: #CCCCCC; /* 竖线的颜色 */
    margin: 20px 0px; /* 竖线的左右间距 */
}

.insightFooter .upText {
    font-size: 32px;
    font-weight: bold;
    color: #3AB980;
}

.insightFooter .downText {
    font-size: 14px; /* 字体大小 */
    line-height: 14px;
    color: #626262; /* 字体颜色 */
}




/*移动端*/
.swiper-pagination {
    display: none !important;
}

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

.mobileSwiper {
    width: 100%;
    height: 470px;
    display: none !important;
}

    .mobileSwiper .swiper-slide {
        display: flex;
        flex-direction: column; /* 垂直排列子元素 */
        background-color: #f9f9f9; /* 背景颜色 */
        border-radius: 20px; /* 圆角 */
    }

.logoLoopCase {
    margin-top: 150px;
}

    .logoLoopCase h6 {
        font-size: 2.4rem;
    }

    .logoLoopCase .cta-btn {
        margin-top: 160px !important;
        font-family: "Open Sans Condensed", sans-serif !important;
    }

#section_sea_1 .container {
    margin-top: -80px !important;
}


/* 外部容器样式 */
.logoLoopCaseList {
    margin-top: 35px;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 水平分散对齐 */
    align-items: center; /* 垂直居中 */
    width: 100%; /* 容器宽度 */
    height: 100%; /* 容器高度 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 项目之间的间距 */
    box-sizing: border-box; /* 包括内边距和边框 */
}

/* 每个 logo 项的样式 */
.logoLoopItem {
    flex: 1 1 0; /* 自适应宽度，允许缩放 */
    max-width: 25%; /* 设置最大宽度为 25%（4个logo每行一个） */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden; /* 防止溢出 */
}

    /* 图片样式 */
    .logoLoopItem img {
        width: 100%; /* 图片宽度占满父容器 */
        height: auto; /* 高度自适应 */
        object-fit: contain; /* 保持图片比例，适应容器 */
    }



/* 图片样式 */
.logoLoopItemMobile img {
    width: 100%; /* 图片宽度占满父容器 */
    height: auto; /* 高度自适应 */
    object-fit: contain; /* 保持图片比例，适应容器 */
}


.logoLoopCaseMobile {
    display: none !important;
}

.logoFootText {
    text-align: right;
    color: gray;
    margin-top: 20px;
}

.logoFootTextMobile {
    text-align: left;
    color: gray;
    margin-top: 20px;
}

/*移动端的显示效果*/
@media (max-width: 768px), (max-width: 991px), (max-width: 1280px) {
    .omniChannelTopImage {
        max-width: 100%; /* 移动端最大宽度 */
    }

    /* 在移动设备上应用的样式 */
    .mapImage {
        margin-top: 250px;
        max-width: 100%; /* 移动端最大宽度 */
    }

    .overlayInMap {
        left: 5%;
        width: 90%; /* 宽度占满父容器 */
    }

    .japanMapContentBox {
        top: 5px;
    }

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

    .mobileSwiper {
        display: block !important;
    }

    .swiper-pagination {
        display: block !important;
    }

    .logoLoopCase {
        display: none !important;
    }

    .logoLoopCaseMobile {
        display: block !important;
    }
}