﻿.carousel1 {
}

.carousel1-item {
    text-align: center;
    margin: 0 5px 0 5px;
}

    .carousel1-item img {
        width: 100%;
        height: auto;
    }

.text-container {
    background-color: #FFD7A6;
    color: #9B5810;
    padding: 5px;
}

    .text-container p:first-child {
        font-size: 14px;
    }

    .text-container p:last-child {
        font-size: 12px;
    }

.new-layer2 {
    display: flex;
    margin: 0 20px;
    display: flex; /* 使用flex布局实现左右分块 */
    justify-content: space-between; /* 左右两块间隔排列 */
    /*padding: 10px 10px 0 10px;*/
    color: #FFD699;
    font-size: 10px;
    background-color: #131313;
    /*border-radius: 4px 4px 4px 4px;*/
    margin-top: 10px;
}

.left-block2 {
    width: 60%; /* 左边块占60% */
    padding: 10px;
}

    .left-block2 p:first-of-type {
        margin-top: 0; /* 控制第一段文字上边距 */
        font-size: 12px;
    }

    .left-block2 p:last-of-type {
        text-align: right; /* 靠右对齐详情文字 */
    }

        .left-block2 p:last-of-type a {
            color: #FFD699;
            font-size: 8px;
        }

.right-block2 {
    width: 40%; /* 右边块占40% */
    padding: 10px;
    position: relative; /* 相对定位，便于内部元素基于此进行定位调整 */
}

    .right-block2 img {
        width: 100%; /* 图片宽度占满右边块 */
        height: auto; /* 保持图片比例 */
        /*position: absolute;*/ /* 绝对定位，使其脱离文档流，可以进行位置调整 */
        /*top: -30%;*/ /* 将图片向上移动，使其有20%的高度在外层上面 */
        right: 10px; /* 靠右对齐 */
        /*border-radius: 4px 4px 4px 4px;*/
    }

.right-block3 {
    width: 60%; /* 左边块占60% */
    padding: 10px;
    text-align: right;
}

    .right-block3 p:first-of-type {
        margin-top: 0; /* 控制第一段文字上边距 */
        font-size: 12px;
        text-align: left;
    }

    .right-block3 p:last-of-type {
        text-align: left; /* 靠右对齐详情文字 */
    }

        .right-block3 p:last-of-type a {
            color: #FFD699;
            font-size: 8px;
        }

.left-block3 {
    width: 40%; /* 右边块占40% */
    padding: 10px;
    position: relative; /* 相对定位，便于内部元素基于此进行定位调整 */
}

    .left-block3 img {
        width: 100%; /* 图片宽度占满右边块 */
        height: auto; /* 保持图片比例 */
        /*position: absolute;*/ /* 绝对定位，使其脱离文档流，可以进行位置调整 */
        /*top: -30%;*/ /* 将图片向上移动，使其有20%的高度在外层上面 */
        left: 10px; /* 靠右对齐 */
    }

/* 整体容器样式 */
.margin-lr-s {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin: 0 20px 0 20px;
}

/* 左层样式 */
.left-layer {
    width: 30%;
    background-color: #FFD699;
    position: relative;
    margin-right: 5px;
}

.left-layer-content {
    margin: 10px;
    color: #9B5810;
}

.left-layer-image {
    width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* 中层样式 */
.middle-layer {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-right: 5px;
}

/* 中上层样式 */
.middle-upper-layer {
    position: relative;
    margin-bottom: 5px;
    background-color: #131313;
}

.middle-upper-layer-content {
    margin: 10px;
    color: #FFFFFF;
}

.middle-upper-layer-image {
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* 中下层样式 */
.middle-lower-layer {
    display: flex;
    justify-content: space-between;
}

.middle-lower-left-layer {
    width: 50%;
    margin-right: 5px;
    background-color: #131313;
}

.middle-lower-left-layer-content {
    margin: 10px;
    color: #FFFFFF;
}

.middle-lower-right-layer {
    width: 50%;
    background-color: #FFD699;
}

.middle-lower-right-layer-content {
    margin: 10px;
    color: #9B5810;
}

/* 右层样式 */
.right-layer {
    width: 20%;
    display: flex;
    flex-direction: column;
}

.right-upper-layer {
    background-color: #FFD699;
    margin-bottom: 5px;
}

.right-upper-layer-content {
    margin: 10px;
    color: #9B5810;
}

.right-lower-layer {
    /*margin-bottom: 5px;*/
    background-color: #131313;
}

.right-lower-layer-content {
    margin: 10px;
    color: #FFFFFF;
}

/* 下层样式 */
.bottom-layer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.bottom-left-layer {
    width: 50%;
    margin-right: 5px;
    background-color: #131313;
    position: relative;
}

.bottom-left-layer-content {
    margin: 10px;
    color: #FFFFFF;
}

.bottom-left-layer-image {
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.bottom-right-layer {
    width: 50%;
    background-color: #FFD699;
    position: relative;
}

.bottom-right-layer-content {
    margin: 10px;
    color: #9B5810;
}

.bottom-right-layer-image {
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Font Awesome图标样式，确保引入库后能正常显示 */
.fas {
    margin-left: 0;
}