.image-cont {  
    text-align: center; /* 用来居中内部的块级元素 */  
  }  
    
  .image-wrapper {  
    display: inline-block; /* 使得元素可以响应 text-align: center 并设置宽度 */  
    width: 100%; /* 图片包裹器的宽度设为95% */  
    position: relative; /* 使得内部的绝对定位元素可以相对于这个元素定位 */  
  }  
    
  .image-wrapper img {  
    width: 100%; /* 图片宽度设为100%，相对于父元素 */  
    height: auto; /* 图片高度自适应，保持原始宽高比 */  
  }  
    
  .arrow {  
    position: absolute;  
    top: 50%; /* 垂直居中，需要配合transform来精确定位 */  
    width: 50px; /* 箭头宽度 */  
    height: 50px; /* 箭头高度 */  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    cursor: pointer; /* 鼠标悬停时变为手形 */  
    transform: translateY(-50%); /* 垂直居中 */  
  }  
    
  .arrow.left {  
    left: 10px; /* 距离图片左侧的间距 */  
  }  
    
  .arrow.right {  
    right: 10px; /* 距离图片右侧的间距 */  
  }  
    
  .text-top-right {  
    position: absolute; /* 绝对定位文字 */  
    top: 3%; /* 距离图片顶部的间距 */  
    right: 5%; /* 距离图片右边的间距 */  
    color: white; /* 文字颜色 */  
    background-color: rgba(0, 0, 0, 0.5); /* 文字背景色 */  
    padding: 5px; /* 文字内边距 */  
    border-radius: 5px; /* 文字背景圆角 */  
    display: flex; /* 使用flex布局来水平居中子元素 */  
    align-items: center; /* 垂直居中子元素 */  
    flex-direction: column; /* 设置flex方向为列 */  
  }  
    
  .text-top-right .vertical-text {  
    writing-mode: vertical-rl; /* 设置文字为竖排 */  
    text-align: right; /* 竖排文字右对齐 */  
    margin-top: 5%; /* 与横排文字保持间距 */  
    color: inherit; /* 继承父元素的文字颜色 */  
    background-color: transparent; /* 不需要背景色 */  
    padding: 0; /* 不需要内边距 */  
    border-radius: 0; /* 不需要圆角 */  
  }

:root {  
  /* 设置根元素的字体大小，这里假设为16px */  
  font-size: 20px;  
}  
  
.text-top-right {  
  /* 其他样式... */  
  font-size: 1.15rem; /* 这里的字体大小是根元素字体大小的1.25倍，即20px */  
}  
  
.vertical-text {  
  /* 其他样式... */  
  font-size: 0.95rem; /* 这里的字体大小是根元素字体大小的0.875倍，即14px */  
}  
  
/* 响应式设计，当视口宽度变化时，调整根元素的字体大小 */  
@media (max-width: 768px) {  
  :root {  
    font-size: 14px; /* 当视口宽度小于等于768px时，调整字体大小 */  
  }
   .arrow {
    width: 40px; /* 箭头宽度 */  
    height: 40px; /* 箭头高度 */    
  } 
}  
  
@media (max-width: 480px) {  
  :root {  
    font-size: 12px; /* 当视口宽度小于等于480px时，进一步调整字体大小 */  
  }
  .arrow {
    width: 30px; /* 箭头宽度 */  
    height: 30px; /* 箭头高度 */    
  }