@charset "UTF-8";

* {
	margin: 0;
	/* padding: 0; */
}

body {
	/* font-family: '黑体', Arial, sans-serif; */
	margin: 0;
	padding: 0;
	background-color: #fff;
	/* user-select: none; */
}

/* 渐入动画样式 */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px); /* 初始位置向下偏移一点 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* 优化动画性能 */
}

/* 当元素进入视口时添加此类 */
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.main-area {
	width: 100%;
	/* height: 100vh; */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
}

.img-container {
	
	height: 100vh;
	width: 100%;
	/* background-image: url('../focus_train/img/ft.png');
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat;  */
	background-color: #FFF; 

	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
    position: relative;
	
}

.img-bg{
    position: absolute;
    bottom: 10%;
    right: 0;
    /* width: 40%; */
    height: 75%;
    max-width: 50%;
    z-index: -10;
    object-fit: contain; 
}



.img-text{
    width: 40%;
    height: 50vh;
    margin-left: 10%;
    /* background: #000; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.t1{
    font-size: clamp(36px, 4vw, 70px);
    font-weight: 700;
    letter-spacing: 0px;
    line-height: clamp(60px, 5vw, 100px);
    color: #000;
    text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);


}
.t2 {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 40.54px;
    color: rgba(56, 56, 56, 1);
    margin: 2% 0;

}


 /* 区域一 市场背景 */
.area-one {
    width: 100%;
    min-height: 80vh;
    padding: 10vh 0 5vh 0;
    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.title {
    width: 80%;
    font-size: clamp(24px, 3.5vw, 45px);
    font-weight: 700;
    line-height: 54px;
    color: rgba(72, 174, 137, 1);
    text-align: left;
    text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
}

.card {
    width: 80%;
    height: 45vh;
	margin: 5vh 0;
    /* background: #000; */
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 20px;
	background: rgba(255, 255, 255, 1);
	border: 2px solid rgba(229, 229, 229, 1);
	overflow: hidden;
}
.l-crad {
    width: 40%;
    height: 100%;
    /* background: #000; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.r-card {
    width: 50%;
    height: 100%;
	margin:0 5%;
    /* background: #000; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	justify-content: center;
}

.card-title {
    font-size: clamp(18px, 2.2vw, 25px);
    font-weight: 700;
    line-height: 36.2px;
    color: rgba(212, 48, 48, 1);
}
.card-content {
    margin: 2% 0;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 400;
    line-height: 30px;
    color: rgba(56, 56, 56, 1);
}


.list {
	width: 80%;
	height: 60vh;

	display: flex;
	justify-content: space-between;
	align-items: center;
    /* gap: 2%; */

}
.mock {
	width: 25%;
	height: 60vh;
	/* background: blueviolet; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}
.item {
	width: 90%;
	height: 35vh;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	transition: all 0.3s ease;
}

/* 鼠标悬停动画效果 */
.item:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

.mock3 {
	width: 30%;
	height: 60vh;
	/* background: blueviolet; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}
.item3 {
	width: 90%;
	/* height: 45vh; */
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	transition: all 0.3s ease;
}

/* 鼠标悬停动画效果 */
.item3:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}
.img {
	width: 100%;
	/* border-radius: 30px; */

}
.text {
	height: 15vh;
	width: 75%;
    /* background: #000; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.t-title {
    font-size: clamp(16px, 1.3vw, 23px);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 33.3px;
    color: rgba(112, 112, 112, 1);

}
.t-content {
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: clamp(16px, 1.4vw, 20px);
    color: rgba(112, 112, 112, 1);
}
.card-img {
    height: 120%;
    object-fit: contain;
}

.title-content {
    width: 90%;
    padding: 2% 5%;
    border-radius: 20px;
    border: 1px solid rgba(229, 229, 229, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 43.44px;
    color: rgba(72, 174, 137, 1);
    transition: all 0.3s ease;
}



.c-area {
	width: 80%;
	margin-top: 5%;
	height: 60vh;
	/* background: #000; */
	display: flex;
	justify-content: space-between;
	align-items: center;
    /* gap: 2%; */
    img {
        max-width: 40%;
        height: 70%;
        object-fit: contain;
    }
}
.img5 {
    height: 100% !important;
    max-width: 100% !important;
    margin-left: -30%;
}
.l-card {
    width: 50%;
	padding: 0 5%;
    height: 100%;

	border-radius: 20px;
	/* border: 2px solid #48AE89; */
	background: linear-gradient(90deg, rgba(193, 235, 235, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    border: 2px solid rgba(229, 229, 229, 1);

    font-size: clamp(16px, 1.3vw, 25px);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: clamp(24px, 2vw, 30px);
    color: rgba(56, 56, 56, 1);

    display: flex;
	flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	gap: 2%;
	transition: all 0.3s ease;
	transform-style: preserve-3d;
}




.list2 {
	width: 80%;
	margin-top: 5%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    /* gap: 2%; */
}
.mock2 {
	width: 45%;
	height: 30vh;
	/* background: blueviolet; */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5%;
	transition: all 0.3s ease;
	border-radius: 15px;
	padding: 2%;
	box-sizing: border-box;
}

.mock2:hover {
    /* color:  rgb(221, 244, 244) ; */
	transform: translateY(-5px) scale(1.02);
	background-color: rgba(221, 244, 244, 0.8);  
	box-shadow: 0px 10px 20px rgba(72, 174, 137, 0.15);
}

.mock2:hover img {
	transform: scale(1.05);
	transition: transform 0.3s ease;
}

.mock2:hover .text-info {
	transform: translateX(5px);
	transition: transform 0.3s ease;
}

.mock2 img {
	transition: transform 0.3s ease;
}

.mock2 .text-info {
	transition: transform 0.3s ease;
}
.text-info {
	width: 60%;
	height: 100%;
    /* background: #000; */
	display: flex;
	flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	gap: 5%;
}

.i-title {
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 40.54px;
    color: rgba(72, 174, 137, 1);

	/* 将背景渐变改为下划线 */
	background: linear-gradient(111.73deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0.55) 54.2%, rgba(255, 235, 59, 0) 100%);
	background-size: 100% 20%; /* 设置下划线高度 */
	background-position: 0 100%; /* 将下划线定位到底部 */
	background-repeat: no-repeat; /* 防止重复 */
}
.i-content {
    font-size: clamp(14px, 1.3vw, 20px);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 28.96px;
    color: rgba(56, 56, 56, 1);
}


.l-card2 {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.img2 {
    width: 80%;
    height: auto;
    margin-top: 5%;
}

.title2 {

	font-size: clamp(20px, 2vw, 25px);
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 36.2px;
    color: rgba(128, 128, 128, 1);
}

.text-info2 {
    height: 70%; 
    /* background: #ffe0e0; */
    margin-left: -20%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-around; 
}

.text2 {
    height: 70%;  
    width: 100%;
    display: flex; 
    flex-direction: column; 
    align-items: self-start; 
    justify-content: space-between; 
}



 /* 公司 备案信息 */

.btm-area {
    width: 100%;
    height: 5vh;
    /* background: #103365; */
    font-weight: 500;
    font-size: clamp(12px, 1.2vw, 14px); 
    line-height: 24px; 
    /* color: #fff; */
    
    display: flex;
    align-items: center;
    justify-content: center;
    a {
        text-decoration: none;
    }
}



/* 适用于桌面设备 */
@media (min-width: 1025px) {

}

/* 适用于平板设备 */
@media  (max-width: 1024px) {
    

    .img-container {
        
        height: 100vh;
        width: 100%;
        background-color: #ffffff; 

        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        
    }

    .img-bg{
        position: absolute;
        bottom: 10%;
        right: auto;
        height: auto;
        max-width: 80%;
        z-index: -10;
        object-fit: contain; 
    }


    .img-text{
        width: 90%;
        height: 50vh;
        margin-left: 0%;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        align-items: flex-start;
    }
    .t1{
        font-size: clamp(36px, 6vw, 70px);
        font-weight: 700;
        letter-spacing: 0px;
        line-height: clamp(60px, 4vw, 100px);
        color: #000;
        text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);


    }
    .t2 {
        font-size: clamp(18px, 4vw, 28px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(30px, 4vw, 40px);
        color: rgba(56, 56, 56, 1);
        margin: 2% 0;

    }
    
    /* 区域一 市场背景 */
    .area-one {
        width: 100%;
        padding: 10vh 0 5vh 0;
        min-height: 80vh;
        background: #fff;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .title {
        width: 80%;
        font-size: clamp(24px, 3.5vw, 45px);
        font-weight: 700;
        line-height: 54px;
        color: rgba(72, 174, 137, 1);
        text-align: left;
        text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
    }

    .card {
        width: 50%;
        height: 40vh;
        margin: 2vh 0;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 20px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(229, 229, 229, 1);
        overflow: hidden;
    }
    .l-crad {
        width: 100%;
        height: 50%;
        /* background: #000; */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .r-card {
        width: 70%;
        height: 40%;
        margin:5% 0;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .card-title {
        font-size: clamp(18px, 3vw, 25px);
        font-weight: 700;
        line-height: clamp(30px, 4vw, 40px);
        color: rgba(212, 48, 48, 1);
    }
    .card-content {
        margin: 2% 0;
        font-size: clamp(14px, 2vw, 20px);
        font-weight: 400;
        line-height: clamp(20px, 3vw, 30px);
        color: rgba(56, 56, 56, 1);

        span{
            color: red;
        }

    }


    .list {
        width: 90%;
        height: auto;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        /* gap: 2%; */

    }
    .mock {
        width: 60%;
        height: auto;
        /* background: blueviolet; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .item {
        width: 90%;
        height: auto;
        border: 1px solid #E5E7EB;
        border-radius: 20px;
        margin: 2vh 0;
        /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
    }

    /* 鼠标悬停动画效果 */
    .item:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }
    .mock3 {
        width: 60%;
        height: 40vh;
        /* background: blueviolet; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .item3 {
        width: 90%;
        height: auto;
        border: 1px solid #E5E7EB;
        border-radius: 20px;
        /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
    }

    /* 鼠标悬停动画效果 */
    .item3:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }
    .img {
        width: 100%;
        /* border-radius: 30px; */

    }
    .text {
        height: 8vh;
        width: 80%;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .t-title {
        font-size: clamp(16px, 3vw, 23px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(24px, 4vw, 33.3px);
        color: rgba(112, 112, 112, 1);

    }
    .t-content {
        font-size: clamp(14px, 2vw, 18px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(18px, 2vw, 24px);
        color: rgba(112, 112, 112, 1);
    }

    .card-img {
        width: 120%;
        height: auto;
        object-fit: contain;
    }

    .title-content {
        width: 90%;
        padding: 2% 5%;
        border-radius: 20px;
        border: 1px solid rgba(229, 229, 229, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(20px, 2vw, 30px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(30px, 2vw, 40px);
        color: rgba(72, 174, 137, 1);
        transition: all 0.3s ease;
    }



    .c-area {
        width: 80%;
        margin-top: 5%;
        height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        /* gap: 2%; */
        img {
            width: 80%;
            max-width: 80% !important;
            height: auto !important;
            object-fit: contain;
        }
    }
    .l-card {
        width: 80%;
        padding: 5% ;
        height: 50%;

        border-radius: 20px;
        /* border: 2px solid #48AE89; */
        background: linear-gradient(90deg, rgba(193, 235, 235, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
        border: 2px solid rgba(229, 229, 229, 1);

        font-size: clamp(16px, 2vw, 25px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(24px, 3vw, 30px);
        color: rgba(56, 56, 56, 1);

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2%;
        transition: all 0.3s ease;
        transform-style: preserve-3d;
    }




    .list2 {
        width: 100%;
        margin-top: 5%;

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        /* gap: 2%; */
    }
    .mock2 {
        width: 90%;
        height: 25vh;
        /* background: blueviolet; */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5%;
        transition: all 0.3s ease;
        border-radius: 15px;
        padding: 2%;
        box-sizing: border-box;

        img {
            width: 30%;
            height: auto !important;
            object-fit: contain;
        }
    }

    .mock2:hover {
        /* color:  rgb(221, 244, 244) ; */
        transform: translateY(-5px) scale(1.02);
        background-color: rgba(221, 244, 244, 0.8);  
        box-shadow: 0px 10px 20px rgba(72, 174, 137, 0.15);
    }

    .mock2:hover img {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }

    .mock2:hover .text-info {
        transform: translateX(5px);
        transition: transform 0.3s ease;
    }

    .mock2 img {
        transition: transform 0.3s ease;
    }

    .mock2 .text-info {
        transition: transform 0.3s ease;
    }
    .text-info {
        width: 60%;
        height: 100%;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 5%;
    }

    .i-title {
        font-size: clamp(20px, 3vw, 30px);
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(72, 174, 137, 1);

        /* 将背景渐变改为下划线 */
        background: linear-gradient(111.73deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0.55) 54.2%, rgba(255, 235, 59, 0) 100%);
        background-size: 100% 20%; /* 设置下划线高度 */
        background-position: 0 100%; /* 将下划线定位到底部 */
        background-repeat: no-repeat; /* 防止重复 */
    }
    .i-content {
        font-size: clamp(14px, 2vw, 24px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(24px, 3vw, 30px);
        color: rgba(56, 56, 56, 1);
    }


    .l-card2 {

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

    }

    .img2 {
        width: 80%;
        height: auto;
        margin-top: 5%;
    }

    .r-img{
        width: 80%;
        height: 45%;
        /* background: #000; */
    }





    .title2 {

        font-size: clamp(20px, 2vw, 25px);
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 36.2px;
        color: rgba(128, 128, 128, 1);
    }

     /* 公司 备案信息 */

    .btm-area {
        width: 100%;
        height: 8vh;
        /* background: #103365; */
        font-weight: 500;
        font-size: clamp(12px, 2vw, 24px); 
        line-height: 24px; 
        /* color: #fff; */
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        a {
            text-decoration: none;
        }
    }


}
/* 适用于手机设备 */
@media (max-width: 767px) {

    
    .img-container {
        
        height: 100vh;
        width: 100%;
        background-color: #ffffff; 

        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        
    }

    .img-bg{
        position: absolute;
        bottom: 10%;
        right: auto;
        height: auto;
        max-width: 80%;
        z-index: -10;
        object-fit: contain; 
    }



    .img-text{
        width: 90%;
        height: 50vh;
        margin-left: 0%;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        align-items: flex-start;
    }
    .t1{
        font-size: clamp(36px, 6vw, 70px);
        font-weight: 700;
        letter-spacing: 0px;
        line-height: clamp(60px, 4vw, 100px);
        color: #000;
        text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);


    }
    .t2 {
        font-size: clamp(18px, 4vw, 28px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(30px, 4vw, 40px);
        color: rgba(56, 56, 56, 1);
        margin: 2% 0;

    }
    
    /* 区域一 市场背景 */
    .area-one {
        width: 100%;
        padding: 10vh 0 5vh 0;
        min-height: 80vh;
        background: #fff;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .title {
        width: 80%;
        font-size: clamp(24px, 3.5vw, 45px);
        font-weight: 700;
        line-height: 54px;
        color: rgba(72, 174, 137, 1);
        text-align: left;
        text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
    }

    .card {
        width: 70%;
        height: 45vh;
        margin: 2vh 0;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 20px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(229, 229, 229, 1);
        overflow: hidden;
    }
    .l-crad {
        width: 100%;
        height: 50%;
        /* background: #000; */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .r-card {
        width: 90%;
        height: 48%;
        margin:1% 0;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .card-title {
        font-size: clamp(18px, 3vw, 25px);
        font-weight: 700;
        line-height: clamp(28px, 4vw, 40px);
        color: rgba(212, 48, 48, 1);
    }
    .card-content {
        margin: 2% 0;
        font-size: clamp(12px, 2vw, 20px);
        font-weight: 400;
        line-height: clamp(18px, 3vw, 30px);
        color: rgba(56, 56, 56, 1);

        span{
            color: red;
        }

    }


    .list {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        /* gap: 2%; */

    }
    .mock {
        width: 70%;
        height: auto;
        /* background: blueviolet; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .item {
        width: 90%;
        height: auto;
        border: 1px solid #E5E7EB;
        border-radius: 20px;
        margin: 2vh 0;
        /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
    }

    /* 鼠标悬停动画效果 */
    .item:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }
    .mock3 {
        width: 70%;
        height: 50vh;
        /* background: blueviolet; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .item3 {
        width: 90%;
        height: auto;
        border: 1px solid #E5E7EB;
        border-radius: 20px;
        /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
    }

    /* 鼠标悬停动画效果 */
    .item3:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }
    .img {
        width: 100%;
        /* border-radius: 30px; */

    }
    .text {
        height: 15vh;
        width: 80%;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .t-title {
        font-size: clamp(16px, 3vw, 23px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(24px, 4vw, 33.3px);
        color: rgba(112, 112, 112, 1);

    }
    .t-content {
        font-size: clamp(14px, 2vw, 18px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(18px, 2vw, 26px);
        color: rgba(112, 112, 112, 1);
    }

    .card-img {
        width: 120%;
        height: auto;
        object-fit: contain;
    }

    .title-content {
        width: 90%;
        padding: 2% 5%;
        border-radius: 20px;
        border: 1px solid rgba(229, 229, 229, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(20px, 2vw, 30px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(30px, 2vw, 40px);
        color: rgba(72, 174, 137, 1);
        transition: all 0.3s ease;
    }



    .c-area {
        width: 100%;
        margin-top: 5%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        /* gap: 2%; */
        img {
            width: 80%;
            max-width: 80% !important;
            height: auto;
            object-fit: contain;
        }
    }
    .l-card {
        width: 80%;
        padding: 5% ;
        height: auto;

        border-radius: 20px;
        /* border: 2px solid #48AE89; */
        background: linear-gradient(90deg, rgba(193, 235, 235, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
        border: 2px solid rgba(229, 229, 229, 1);

        font-size: clamp(14px, 2vw, 25px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(20px, 3vw, 30px);
        color: rgba(56, 56, 56, 1);

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2%;
        transition: all 0.3s ease;
        transform-style: preserve-3d;
    }




    .list2 {
        width: 100%;
        margin-top: 5%;

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        /* gap: 2%; */
    }
    .mock2 {
        width: 90%;
        height: 25vh;
        /* background: blueviolet; */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5%;
        transition: all 0.3s ease;
        border-radius: 15px;
        padding: 2%;
        box-sizing: border-box;

        img {
            width: 40%;
            height: auto !important;
            object-fit: contain;
        }
    }

    .mock2:hover {
        /* color:  rgb(221, 244, 244) ; */
        transform: translateY(-5px) scale(1.02);
        background-color: rgba(221, 244, 244, 0.8);  
        box-shadow: 0px 10px 20px rgba(72, 174, 137, 0.15);
    }

    .mock2:hover img {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }

    .mock2:hover .text-info {
        transform: translateX(5px);
        transition: transform 0.3s ease;
    }

    .mock2 img {
        transition: transform 0.3s ease;
    }

    .mock2 .text-info {
        transition: transform 0.3s ease;
    }
    .text-info {
        width: 60%;
        height: 100%;
        /* background: #000; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 5%;
    }

    .i-title {
        font-size: clamp(18px, 2vw, 28px);
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(72, 174, 137, 1);

        /* 将背景渐变改为下划线 */
        background: linear-gradient(111.73deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0.55) 54.2%, rgba(255, 235, 59, 0) 100%);
        background-size: 100% 20%; /* 设置下划线高度 */
        background-position: 0 100%; /* 将下划线定位到底部 */
        background-repeat: no-repeat; /* 防止重复 */
    }
    .i-content {
        font-size: clamp(14px, 1.6vw, 20px);
        font-weight: 400;
        letter-spacing: 0px;
        line-height: clamp(20px, 2vw, 30px);
        color: rgba(56, 56, 56, 1);
    }


    .l-card2 {
        height: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

    }

    .img2 {
        width: 80%;
        height: auto;
        margin-top: 5%;
    }

    .r-img{
        width: 80%;
        height: 40%;
        /* background: #000; */
    }




    .title2 {

        font-size: clamp(20px, 2vw, 25px);
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 36.2px;
        color: rgba(128, 128, 128, 1);
    }


}