.software-p-button-20 a:before{
    padding: 1.5vw 0;
    border-radius:10px;
    transform:perspective(0.3em) rotateX(181deg);
}

.software-p-button-20{
    display: flex; /* 使用flex布局 */
    justify-content: right; /* 水平居中 */
    align-items: flex-end; /* 垂直底部对齐 */
}

.software-p-button-20 a{
    margin: auto;   
}

.image-container{
    width: 100%;
    border-radius: 2vw;
    overflow: hidden;
    z-index: 1;
    position: relative;
    display: inline-block; /* 或者其他适合的布局方式 */
}  

.image-container img {
  display: block; /* 避免默认的图片底部边距 */
  width: 100%; /* 或者其他指定的宽度 */
} 

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0; /* 默认情况下遮罩不可见 */
    transition: opacity 0.5s ease; /* 平滑的过渡效果 */
    background: url("/static/image/mt.png") rgba(0, 0, 0, 0.8);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 90% auto;
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: flex-end; /* 垂直底部对齐 */
}
.overlay-95{
    background-size: 95% auto;
}
.overlay-75{
    background-size: 75% auto;
}
.overlay-45{
    background-size: 45% auto;
}
.overlay-b{
    background-size: 35% auto;
}
.overlay-a .overlay-font h5,
.overlay-b .overlay-font h5{
    font-size: 30cqh;
    max-font-size: 24px; /* 设置最大字体大小 */
    resize: horizontal; /* 可选，如果希望能够调整元素的大小 */
}
.overlay-font {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 15%;
    width: 100%;
    text-align: center;
    container-type: size;
    resize: both; 
}
.overlay-font h6{
    width: 70%;
    margin-top:1vw;
    max-height: 2em; /* 最大高度 */
    line-height: 1; /* 行高 */
    font-size: 20cqh;
    word-wrap:break-word;
    overflow-wrap:break-word;
}
.overlay-font h5{
    width: 70%;
    margin-top:1vw;
    max-height: 2em; /* 最大高度 */
    line-height: 1; /* 行高 */
    font-size: 30cqh;
    word-wrap:break-word;
    overflow-wrap:break-word;
}
@supports not (max-font-size: 24px) {
  .h5 {
    font-size: clamp(8px, 1vw, 24px); /* 使用clamp函数自动缩放字体大小 */
  }
}
.image-container:hover .overlay {
    opacity: 1; /* 鼠标经过时遮罩可见 */
}

.hero-section{
    background: url('/static/image/banner4.jpg');
    background-repeat: no-repeat;
    background-size: 100vw auto;
    background-position: top center;
    padding: 15vw 0 5vw;
}
.dashboard-section{
    height: 20vw;
}
.mid-d{
    margin-top: 28vw;
    width: 50%;
}
.mid-d p{
    position: relative;
    z-index: 3;
    background-color: transparent;
    text-align:center;
    font-size: 1.2vw;
    line-height: normal;
    padding: 0 2vw;
}
.mid-d p:before{
	position: absolute; /* 绝对定位 */
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 4vw 0;
    z-index: -1;
    background-color: #FBDD40;
    border-radius: 1vw;
/*    box-shadow: 0 0 0 5px #2C2A29;*/
    box-sizing: border-box;
    transform: perspective(1.2em) rotateX(179deg);
    transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.shape-content{
    position:absolute;
    background-color: transparent;
    z-index: 3;
    left: 0;
    top: 39vw;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
}

/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1600px) {
}
/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1199px) {
    
}
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px){
    
}
/* Large Mobile :600px. */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    
}
/* small mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 599px) {

}
/* small mobile :320px. */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .hero-section{
/*        padding: 151px 0 87px;*/
    }
}