* {
    padding: 0;
    margin: 0;
}

html {
    padding: 0;
    margin: 0;
    /* background: #f3f4f6; */
    color: #333333;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    font-size: 10px;
}

body {
    background: #fff;
    position: relative;
    /* padding: 0 5px !important; */
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
    color: #7793c3 !important;
}

.layui-form-select dl dd.layui-this {
    background-color: #2b57a2a4 !important;
    color: #fff;
}

ul,
li {
    list-style: none;
}


@media only screen and (max-width:309px){html{font-size:9.375px}}
@media only screen and (max-width:319px) and (min-width:310px){html{font-size:9.6875px}}
@media only screen and (max-width:349px) and (min-width:320px){html{font-size:10px}}
@media only screen and (max-width:359px) and (min-width:350px){html{font-size:10.9375px}}
@media only screen and (max-width:374px) and (min-width:360px){html{font-size:11.25px}}
@media only screen and (max-width:399px) and (min-width:375px){html{font-size:11.718px}}
@media only screen and (max-width:413px) and (min-width:400px){html{font-size:12.5px}}
@media only screen and (max-width:469px) and (min-width:414px){html{font-size:12.9375px}}
@media only screen and (max-width:479px) and (min-width:470px){html{font-size:14.6875px}}
@media only screen and (max-width:539px) and (min-width:480px){html{font-size:15px}}
@media only screen and (max-width:559px) and (min-width:540px){html{font-size:16.875px}}
@media only screen and (max-width:569px) and (min-width:560px){html{font-size:17.5px}}
@media only screen and (max-width:629px) and (min-width:570px){html{font-size:17.8125px}}
@media only screen and (max-width:639px) and (min-width:630px){html{font-size:19.6875px}}
@media only screen and (min-width:640px) and (min-width:750px){html{font-size:20px}}
@media only screen and (min-width:750px){html{font-size:20px}.viewport{max-width:750px}}
.viewport{width:32rem;margin:0 auto;overflow:hidden}



/* 应用容器 */
.head-app-container {
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 750px; /* 手机宽度 */
  margin: 0 auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

/* 头部导航样式 */
.head-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.head-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  height: 4rem;
}

.head-logo-container {
  display: flex;
  align-items: center;
}

.head-logo {
  width: 80%;
  height: auto;

}

.head-school-name {
  margin-left: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #c53030; /* 红色系 */
  white-space: nowrap;
}

.head-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.head-menu-button:hover {
  background-color: #f5f5f5;
}

.head-menu-button i {
  font-size: 20px;
}

/* 菜单覆盖层样式 */
.head-menu-overlay {
  position: fixed;
  top: 2.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 40;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.head-menu-overlay.head-menu-open {
  transform: translateX(0);
}

.head-menu-nav {
  padding: 16px;
}

.head-menu-list {
  list-style: none;
}

.head-menu-item {
  display: block;
  padding: 1rem 1rem;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s ease;
}

.head-menu-item:hover {
  color: #c53030;
}

.head-menu-item.head-active {
  color: #c53030;
  font-weight: bold;
}

/* 主内容区域样式 */
.head-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}



/* 页面内容样式 */
.head-page-content {
  padding: 24px 16px;
}

.head-page-content p {
  color: #666;
  line-height: 1.6;
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 390px) {
  .head-app-container {
    width: 100%;
  }
  
  .head-school-name {
    font-size: 16px;
  }
  
  .head-banner-title {
    font-size: 40px;
  }
  
  .head-banner-subtitle {
    font-size: 18px;
  }
}

/* 电脑端菜单样式调整 */
@media (min-width: 768px) {
  /* 保留菜单按钮 */
  .head-menu-button {
    display: flex;
  }
  
  /* 修改菜单弹出方式，不再从右侧滑出 */
  .head-menu-overlay {
    transform: translateY(-100%);
    top: 0;
    left: 0;
    right: 0;
    max-width: 750px;
    height: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  
  
  .head-menu-overlay.head-menu-open {
    transform: translateY(4rem); /* 从顶部滑出到头部下方 */
  }
  
  .head-menu-nav {
    padding: 16px;
  }
  
  .head-menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  
   .head-menu-item {
     border-bottom: 2px solid transparent;
     padding: 8px;
     border-radius: 6px;
     position: relative;
   }

 /* 电脑端悬停效果 */
   .head-menu-item:hover {
     color: #f97316; /* 橙色 */
   }
   
    .head-menu-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 3px;
      background-color: transparent;
      transform: translateX(-50%);
      transition: width 0.3s ease, background-color 0.3s ease;
    }
    
    .head-menu-item:hover::after {
      width: 80%;
      background-color: #f97316; /* 橙色 */
      font-weight: 600;
    }
    
    /* 活动状态的链接样式 */
    .head-menu-item.head-active {
      color: #f97316; /* 橙色 */
    }
    
    .head-menu-item.head-active::after {
      width: 80%;
      height: 3px;
      background-color: #f97316; /* 橙色 */
    }
  
  
  /* 调整布局以适应大屏幕 */
  .head-app-container {
    max-width: 100%;
  }
  
  .head-main-content {
    max-width: 750px;
    margin: 0 auto;
  }
  
  /* 头部内容宽度调整 */
  .head-header-content {
    max-width: 750px;
    margin: 0 auto;
  }
}
/* index.css */
.index-box {background: url(/template/default/images/index/index_bg_c1.jpg); height:auto; }
.index-box-s1 {height: auto; width:100%; display: flex; text-align: center;display: block;float: left;}
.index-box-s3 {line-height: 2rem; height: auto; text-indent: 3rem; padding: 1.5rem 2rem; display: block;float: left;}
.index-box-s5 {width: 100%; height: 36rem;}
.index-box-s4 { width: 50%; height:auto; float: left; padding-bottom: 1rem;}
.index-box-s41 {width:92%; height:4rem; color: #0066CC; text-align: center; line-height: 4rem; font-size: 3.2rem;font-weight: bold; padding-left: 8%;}  
.index-box-s42 {width:92%;height:auto; text-align: center;  font-size: 1.3rem; padding-left: 8%; }
.index-box-s43 {width:92%; height:4rem; color: #0066CC; text-align: center; line-height: 4rem; font-size: 3.2rem;font-weight: bold; padding-right: 8%;}  
.index-box-s44 {width:92%;height:auto; text-align: center;  font-size: 1.3rem; padding-right: 8%; }
.margin {margin-left: auto; margin-right: auto; width:100%; padding-top: 3rem;}
.index-box2{height:auto; }
.index-box2-s1 {background: url(/template/default/images/index/zyszs1.jpg);}
.ljgd {width: 12rem; height: 1rem;  text-align: center; color: #fff; border-radius: 1px;}

/* 容器样式 */
.index-box3 {
  margin-top: 2rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}

.index-box3-s1 {
  margin-bottom: 8px;
  text-align: center;
}

.index-fs-22 {
  font-size: 22px;
}

.index-fs-18 {
  font-size: 18px;
}

.index-col6 {
  color: #666;
}

.index-box5 {
  margin-left: auto;
  margin-right: auto;
  width: 94%;  
  max-width: 37.5rem; 
  padding: 3%;
}

/* B站视频自适应容器 - 适配1rem=20px规范 */
.bilibili-video-wrap {
    width: 100%;        /* 宽度100%自适应父容器 */
    max-width: 37.5rem; /* 最大宽度750px → 换算为37.5rem（核心适配） */
    margin: 0 auto;     /* 水平居中（兼容性最优写法） */
    position: relative; /* 作为子元素绝对定位的容器 */
    padding-top: 56.25%;/* 固定16:9比例，视频永不拉伸变形 */
    box-sizing: border-box;
    
}
/* 视频播放器样式 */
.bilibili-video-wrap .bilibili-player {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);  /* 宽度扣除左右各1rem边距 */
    height: calc(100% - 2rem); /* 高度扣除上下各1rem边距 */
    border-radius: 0.4rem; /* 8px → 0.4rem，适配1rem=20px */
  overflow: hidden; /* 裁剪圆角溢出，更美观 */
}

/* 标签容器样式 */
#index-tabs-container {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.4rem 0 1.6rem;
}

.index-tabs-wrapper {
  border-radius: 0.7rem;
  overflow: hidden;
}

/* 标签导航样式 */
.index-tabs-navigation {
  display: flex;
  margin-bottom: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 1rem;
  padding: 1rem;
}


.index-tabs-navigation::-webkit-scrollbar {
  display: none;
}

.index-tab-button {
  white-space: nowrap;
  padding:0.75rem 1.5rem;
  margin-right: 4px;
  background: white;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 300ms ease;
  flex-shrink: 0;
  font-weight: 500;
}



.index-tab-button:hover {
  background: #f97316;
  color: white;
}

.index-tab-button.active {
  background: #f97316;
  color: white;
}



/* 标签内容样式 */
.index-tabs-content {
  min-height: 17rem;
}

.index-tab-panel {
  display: none;
  min-height: 17rem;
  padding: 0.8rem;
  color: white;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.index-tab-panel.active {
  display: block;
}

.index-tab-panel-content {
  padding: 1rem;
  border-radius: 8px;
  max-width: 70%;
}

.index-tab-panel-content p {
  font-size: 0.85rem;
  line-height: 1.5rem;
  margin-bottom: 8px;
  margin-top: 0;
}

.index-tab-panel-content .index-招生人群 {
  font-weight: 600;
}

/* 了解更多按钮样式 */
.index-ljgd {
margin-left: 0.8rem;
}



/* 了解更多按钮特定样式 */
.index-learn-more-btn {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border: 1px solid white;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.index-learn-more-btn:hover {
  background: #f97316;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .index-tab-panel-content {
    max-width: 80%;
    font-size: 1rem;
  }
  
}



.container{width:100%;padding-right:1.5rem;padding-left:1.5rem;margin-right:auto;margin-left:auto}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}
.container-fluid,.container-lg,.container-md,.container-sm,
.container-xl{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:576px){.container,.container-sm{max-width:540px}}
@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}
@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}
@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}
.text-center{text-align:center!important}
.col6 {color: #666666;}

.about-box {height: auto; background: url(/template/default/images/about/about_bg2.jpg);}
.about-hot {height: 47rem; background: url(/template/default/images/about/about_bg.jpg);}

.flex-center-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}
.category-campus {
  white-space: nowrap;
  padding:0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  transition: all 300ms ease;
  background-color: #ff7c43;
  color: white;
  border: 1px solid #ff7c43;
}
.category-student {
  white-space: nowrap;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  transition: all 300ms ease;
  background-color: white;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.category-student:hover {
  border-color: #fdba74;
}

.category-student:active {
  background: #f97316;
  color: white;
}


.campus-images-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  white-space: nowrap;
}

.campus-images-container::-webkit-scrollbar {
  display: none;
}



.inline-block {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-snap-align: start;
  width: calc(40% - 16px);
}



.rounded-lgs {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  width: 100%;
  height: 180px;
  transition-property: transform;
  transition-duration: 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
}

.rounded-lgs:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.25rem);
}

.full-size-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.centered-link-paragraph {
    margin-top: 0.5rem;
    color: #334155;
    font-weight: 500;
    text-align: center;
  }
  
.centered-link-paragraph a {
    color: #334155;
  }
  
.centered-link-paragraph a:hover {
    color: #ff7c43;
  }
.index-space {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
.index-gradient {
       background: linear-gradient(to right, #dc2626, #ef4444);
       border-radius: 0.75rem;
       overflow: hidden;
       margin-bottom: 0.75rem;
     }

     /* 相对定位容器样式 */
.index-relative {
       position: relative;
     }
.index-xwtbox {
        width: 100%;
        height: 12rem;
        object-fit: cover;
      }

.index-xwtbox-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to right, rgba(220, 38, 38, 0.9), rgba(239, 68, 68, 0.8));
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1rem;
      }
      
      /* 招生宣传标题样式 */
.index-xwtbox-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 0.5rem;
      }

      /* 招生宣传文本样式 */
.index-xwtbox-text {
        color: #ffffff;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
      }
      
      /* 招生状态文本样式 */
.index-xwtbox-status {
        color: #ffffff;
        font-size: 1rem;
        font-weight: 500;
      }
      
      /* 英文招生状态文本样式 */
.index-xwtbox-status-en {
        color: #ffffff;
        font-size: 0.85rem;
      }

.index-news-item {
        padding-bottom: 1rem;
        border-bottom: 1px solid #f3f4f6;
      }
      
/* 新闻内容布局样式 */
.index-news-content {
        display: flex;
        flex-direction: row;
        gap: 1rem;
      }
      
      /* 新闻图片容器样式 */
.index-news-image {
        width: 25%;
        flex-shrink: 0;
        float: left;
      }
      
      /* 新闻文本内容样式 */
.index-news-text {
        width: 70%;
        float: right;
      }

.index-news-img {
         width: 100%;
         height: 6rem;
         object-fit: cover;
         border-radius: 0.5rem;
       }

.index-space {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }
      
.index-hidden {
        display: none;
      }

.index-news-title {
         font-size: 1rem;
         font-weight: 700;
         color: #1f2937;
         margin-bottom: 0.5rem;
       }
       
.index-news-content {
         color: #4b5563;
         font-size: 0.875rem;
         margin-bottom: 0.5rem;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
         line-height: 1.625;
       }

 .tab-content-container {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          background-size: cover;
          background-position: center;
          border-radius: 0.75rem;
          color: #ffffff;
          height: 17rem;
          padding: 1rem;
          float: left;
          width: 100%;
        }
.containers {
    position: relative;
    width: 100%;
    height: 560px;

}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/images/about/about_bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.news-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/images/xwlm/xwlm-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.prop-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/images/xwlm/prop-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.product-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/images/product/product-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.teacher-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/images/teacher/teacher-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.zyszbackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/wap/images/zysz/zysz_bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.contact-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-image: url('/template/default/images/about/contact_bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}


.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 2;
}

/* 动画类 */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 各个文本的延迟动画 */
.text-about {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    animation-delay: 0.2s;
}

.tab-button {
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  transition: all 300ms ease;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  background-color: white;
  color: #1f2937;
  border: 1px solid #666666;
  font-size: 1rem;
}

.tab-button.active {
  background-color: #ff7c43;
  color: white;
  border-color: #ff7c43;
}

.tab-button:hover {
  background-color: #ff7c43;
  color: white;
}

.zyszlist-img-wrap {
    width: 400px;
    height: 240px;
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0;
}

.zyszlist-title {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 1rem 0.8rem 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
   flex-wrap: wrap;
   gap: 0.25rem;
}

.text-zysz {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    animation-delay: 0.2s;
}

.text-overview {
    font-size: 2rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    animation-delay: 0.6s;
}

.text-i {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    animation-delay: 1.0s;
}

.text-intro {
    font-size: 1.2rem;
    text-align: center;
    padding: 0 1rem;
    animation-delay: 1.4s;
}

/* 滚动内容模块样式 */
.scrollable-content {
    background-image: url('/template/default/images/about/about_bg2.jpg');
    padding: 2rem 0;
    width: 100%;
}

.scroll-container {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1.5rem;
    max-height: 800px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.contact-content {
    padding: 2rem;
    width: 100%;
    background: #F4F4F4;
    max-width: 750px;
}

.contact-container {
    width: 100%;
    margin: 0 auto;
    max-height: auto;
}

.scroll-container::-webkit-scrollbar {
    width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.school-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.school-logo img {
    width: 165px;
    height: 165px;
    margin-bottom: 1rem;
    border-radius: 50%;
}

.school-logo h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.school-logo h3 {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 1rem;
}

.profile-content {
    color: #333;
    line-height: 1.8;
    text-shadow: 1px 1px 0px white, 
                 -1px -1px 0px white, 
                 1px -1px 0px white, 
                 -1px 1px 0px white;
}

.profile-content p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

.profile-content h4 {
    font-size: 1.3rem;
    color: #333;
    margin: 1.5rem 0 1rem;
    font-weight: bold;
}

/* 图片滚动模块样式 */
.image-scroll-section {
    padding: 2rem;
    margin: 0 1.5rem;
    width: 92%;
    overflow: hidden;
}

.image-scroll-container {
    width: 100%;
    position: relative;
}

.image-scroll-track {
    display: flex;
    width: fit-content;
    animation: scrollLeft 30s linear infinite;
}

.image-item {
    margin-right: 1.5rem;
    width: 200px;
    flex-shrink: 0;
}

.image-item img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px 8px 8px 8px;
}

.image-caption {

    text-align: center;
    padding: 1rem;
    border-radius: 0 0 8px 8px;
    text-shadow: 1px 1px 0px white, 
                 -1px -1px 0px white, 
                 1px -1px 0px white, 
                 -1px 1px 0px white;
    font-weight: bold;
}

.image-caption h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.image-caption p {
    font-size: 1rem;
    line-height: 1.4;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* 适配小屏幕 */
@media (max-width: 480px) {
    .text-about {
        font-size: 2.5rem;
    }
    
    .text-overview {
        font-size: 2rem;
    }
    
    .text-i {
        font-size: 3.5rem;
    }
    
    .text-intro {
        font-size: 1.5rem;
    }
    
    .school-logo img {
        width: 100px;
        height: 100px;
    }
    
    .school-logo h2 {
        font-size: 1.5rem;
    }
    
    .school-logo h3 {
        font-size: 1.5rem;
    }
    
    .profile-content p {
        font-size: 0.95rem;
    }
    
    .image-item {
        width: 200px;
        margin-right: 1rem;
    }
    
    .image-item img {
        height: 150px;
    }
    
    .image-caption h3 {
        font-size: 1.1rem;
    }
    
    .image-caption p {
        font-size: 1rem;
    }
}

/* 适配中等屏幕 */
@media (max-width: 768px) {
    .image-item {
        width: 200px;
    }
    
     .image-item img {
         height: 150px;
     }
 }

/* 校史沿革模块样式 */
.history-section {
    background-image: url('/template/default/images/about/about_bg3.jpg');
    padding: 3rem 0;
    width: 100%;
}

.history-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.history-header {
    text-align: center;
    margin-bottom: 2.5rem;
    color: white;
}

.history-header h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.history-header h3 {
    font-size: 1.8rem;
    font-weight: normal;
    font-weight: bold;
}

.history-slider {
    overflow: hidden;
    position: relative;
}

.history-track {
    display: flex;
    width: fit-content;
    cursor: grab;
    user-select: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* 隐藏Firefox滚动条 */
}

.history-track:active {
    cursor: grabbing;
}

.history-item {
    min-width: 100%;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.history-time {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
    text-align: center;
}

.history-list {
    list-style-type: none;
    color: white;
    line-height: 1.8;
    margin-bottom: 2rem;

    margin-left: auto;
    margin-right: auto;
}



.history-list li {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
}

.history-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}






.history-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    text-align: center;
}

.history-image img {
    display: block;
    margin: 0 auto; /* 强制水平居中 */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
}


.history-image p {
    color: white;
    margin-top: 0.8rem;
    font-size: 1.1rem;
}

.history-scroll-hint {
    text-align: center;
    margin-top: 2rem;
    color: white;
    font-size: 1rem;
}



/* 校史沿革模块响应式设计 */
@media (max-width: 768px) {
    .history-header h2 {
        font-size: 1.8rem;
    }
    
    .history-header h3 {
        font-size: 1.5rem;
    }
    
    .history-time {
        font-size: 1.6rem;
    }
    
    .history-list li {
        font-size: 0.95rem;
    }
    
    .history-scroll-hint {
        font-size: 0.9rem;
    }
    
    .history-item {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .history-section {
        padding: 2rem 0;
    }
    
    .history-header h2 {
        font-size: 1.6rem;
    }
    
    .history-header h3 {
        font-size: 1.8rem;
    }
    
    .history-time {
        font-size: 1.4rem;
    }
    
    .history-item {
        padding: 0 ;
    }
}

.about-ls {width: 18rem; height: 100%; float: left; overflow: hidden;}
.about-ls-a { height: 22px; background-image: url('/template/default/images/about/lsxt.png') ;background-position: center;}
.about-ls-b { height: 9rem; margin-top: 1rem; padding-right: 0.5rem; }

/* 当代荣誉页面样式 */
/* 当代荣誉页面标题 */
.honors-page-header {
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}

.honors-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 0;
}

.honors-page-header .container {
  position: relative;
  z-index: 1;
}

.honors-page-title {
  font-size: 1.6rem; /* 36px → 36/20=1.8rem */
  font-weight: bold;
  color: #1f2937;
  position: relative;
  display: inline-block;
  margin-top: 1rem; /* 30px → 30/20=1.5rem */
}

.honors-page-subtitle {
  font-size: 1.8rem; /* 16px → 16/20=0.8rem */
  color: #6b7280;
}

/* 当代荣誉主要内容 */
.honors-main-content {
  padding-bottom: 2rem; /* 40px → 40/20=2rem */
  background-color: #fff;
  position: relative;
}

.honors-main-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0.5rem; /* 10px → 10/20=0.5rem */
  background-repeat: repeat-y;
  background-size: contain;
  opacity: 0.1;
}

.honors-main-content .container {
  display: flex;
  width: 37.5rem; /* 750px → 750/20=37.5rem */
  /* 补充：移动端可加 max-width: 100%; 适配 */
  max-width: 100%;
  box-sizing: border-box;
}


/* 右侧荣誉列表（已改为宽度100%，上下布局） */
.honors-list-section {
  width: 100%;
  height: 40rem; /* 600px → 600/20=30rem */
  overflow: hidden; /* 隐藏溢出内容 */
}

.honors-list {
  max-height: 100%; /* 最大高度为父容器高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 15px → 15/20=0.75rem */
  padding-right: 0.5rem; /* 10px → 10/20=0.5rem */
}

/* 自定义滚动条样式 */
.honors-list::-webkit-scrollbar {
  width: 0.4rem; /* 8px → 8/20=0.4rem */
}

.honors-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0.2rem; /* 4px → 4/20=0.2rem */
}

.honors-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.2rem; /* 4px → 4/20=0.2rem */
}

.honors-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.honor-item {
  background-color: #f8f9fa;
  border-radius: 0.4rem; /* 8px → 8/20=0.4rem */
  padding: 1rem; /* 20px → 20/20=1rem */
  position: relative;
  transition: all 0.3s ease;
  border-left: 0.15rem solid transparent; /* 3px → 3/20=0.15rem */
}

.honor-item:hover {
  transform: translateX(0.25rem); /* 5px → 5/20=0.25rem */
  border-left-color: #94070A;
  box-shadow: 0 0.2rem 0.75rem rgba(0, 0, 0, 0.05); /* 4px 15px → 0.2rem 0.75rem */
}

.honor-year {
  display: inline-block;
  background-color: #94070A;
  color: #fff;
  padding: 0.25rem 0.6rem; /* 5px 12px → 0.25rem 0.6rem */
  border-radius: 0.2rem; /* 4px → 4/20=0.2rem */
  font-size: 1rem; /* 14px → 14/20=0.7rem */
  font-weight: bold;
  margin-bottom: 0.5rem; /* 10px → 10/20=0.5rem */
}

.honor-description {
  font-size: 0.9rem; /* 14px → 14/20=0.7rem */
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}


/* 专业部介绍模块样式 */
.departments-section {
    background-color: #f8f9fa;
    padding: 3rem 0;
    width: 100%;
}

.departments-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.departments-header {
    text-align: center;
    margin-bottom: 3rem;
}

.departments-header h2 {
    font-size: 1.6rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.departments-header h3 {
    font-size: 1.8rem;
    color: #555;
    font-weight: normal;
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    justify-content: center;
}

.department-card {
    background-color: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 20rem;
}

.department-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.department-icon {
    width: 120px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.department-img {
    width: 120px;
    height: 100px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* 橙色滤镜效果 */
.department-img.orange-filter {
    filter: hue-rotate(-45deg) saturate(1.5);
}

.department-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

.department-names {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}

.department-desc {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* 在线报名模块样式 */
.registration-section {
    background-color: #1e88e5;
    padding: 3rem 0;
    width: 100%;
}

.registration-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.registration-form {
    background-color: #1e88e5;
    padding: 2rem;
    border-radius: 12px;
}

.registration-form h2 {
    color: white;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    font-weight: bold;
}

.registration-form form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.registration-form input,
.registration-form select {
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.registration-form input:focus,
.registration-form select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
}

.registration-form button {
    background-color: #ff9800;
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.registration-form button:hover {
    background-color: #f57c00;
    transform: translateY(-2px);
}

.contact-info {
    margin-top: 2rem;
    text-align: center;
    color: white;
    font-size: 0.9rem;
    line-height: 1.6;
}

.contact-info p {
    margin-bottom: 0.5rem;
}

/* 在线报名模块响应式设计 */
@media (max-width: 768px) {
    .registration-form h2 {
        font-size: 1.5rem;
    }
    
    .registration-form button {
        font-size: 1rem;
    }
    
    .contact-info {
        font-size: 0.85rem;
    }
    .departments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    justify-content: center;
    }
    .department-card {
    height: 22rem;
    }

}

@media (max-width: 480px) {
    .registration-section {
        padding: 2rem 0;
    }
    
    .registration-container {
        padding: 0 1rem;
    }
    
    .registration-form {
        padding: 1.5rem;
    }
    
    .registration-form h2 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    
    .registration-form input,
    .registration-form select {
        padding: 0.8rem;
        font-size: 0.95rem;
    }
    
    .registration-form button {
        padding: 0.8rem;
        font-size: 0.95rem;
    }
    
    .contact-info {
        font-size: 0.8rem;
        margin-top: 1.5rem;
    }
}

.ZY-container {
    max-width: 750px;
    margin: 0 auto;
}

/* 导航按钮样式 */
.ZY-nav-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin: 2rem 0;

}

.ZY-nav-button {
    font-size: 1.25rem;
    font-weight: 500;
    padding-bottom: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #000;
    position: relative;
    text-decoration: none;
}

.ZY-nav-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: all 0.3s ease;
}

.ZY-nav-button:hover {
    color: #f97316; /* 橙色 */
}

.ZY-nav-button:hover::after {
    background-color: #f97316; /* 橙色下划线 */
}

.ZY-nav-button.active {
    color: #0066CC; /* 蓝色 */
}

.ZY-nav-button.active::after {
    background-color: #0066CC; /* 蓝色下划线 */
}

/* 主要内容区域样式 */
.ZY-content-section { 
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    margin:1rem;

}

.gsb{
    border: 2px solid #0066CC;
    background-color: #0066CC;
}

.xgb {
    border: 2px solid #66CCFF;
    background-color: #66CCFF;
}

.smb {
    border: 2px solid #6600FF;
    background-color: #6600FF;
}

.whysb {
    border: 2px solid #CC0000;
    background-color: #CC0000;
}

.ZY-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
}

.ZY-section-description {
    color: #fff;
    line-height: 1.7;
}

.ZY-target-audience {
    color: #fff;
    font-weight: 800;
    line-height: 1.7;
    font-size: 1.1rem;
}

/* 课程信息区域样式 */
.ZY-program-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
    padding: 1rem;
    
}

.ZY-department-program {
    border: 1px solid #E0E0E0;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ZY-department-program:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.ZY-BGXT {border-bottom: #ccc 1px solid; margin: 0px 1rem;}


    .ZY-program-container {
        flex-direction: row;
    }
    
    .ZY-program-image {
        flex: 0 0 35%;
        overflow: hidden;
    }
    
    .ZY-program-details {
        flex: 1;
    }


.ZY-program-image img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    object-fit: cover;
    max-height: 376px;
}




 .ZY-program-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ZY-program-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    float: left;
}

.ZY-program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ZY-program-tag {
    padding: 0.2rem 0.8rem;
    font-size: 0.8rem;
    color: #FFFFFF;
    background-color: #0066CC;
    border-radius: 9999px;
    white-space: nowrap;
    float: left;
}


.ZY-program-description {
    color: #333;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.ZY-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-left: 1rem;
}

.ZY-action-button-GSB {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #0066CC;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-GSB:hover {
    background-color: #f97316; /* 橙色 */
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-XGB {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #66CCFF;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-XGB:hover {
    background-color: #f97316; /* 橙色 */
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-SMB {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #6600FF;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-SMB:hover {
    background-color: #f97316; /* 橙色 */
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-WHYSB {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #CC0000;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ZY-action-button-WHYSB:hover {
    background-color: #f97316; /* 橙色 */
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 新闻列表 */
.news-list {
  background-color: #ffffff;
  margin-top: 12px;
}

.news-item {
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid #f2f2f2;
}

.news-content {
  flex: 1;
  margin-right: 12px;
}

.news-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-date {
  font-size: 1.1rem;
  color: #999;
}

.news-image {
  width: 100px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-box {width: 100%;height: auto; padding: 1rem;}
.news-box-s1 {width:100%;height: 3rem; text-align: right; line-height: 3rem; color: #999; font-size: 0.9rem;}
.news-box-s2 {width:100%;min-height: 3rem; line-height: 2.5rem; text-align: center; font-size: 1.6rem; font-weight: bold;}
.news-box-s3 {width:100%; height: 2rem; line-height: 2rem; font-size: 0.8rem; text-align: center; color: #999; padding-bottom: 3rem; border-bottom:1px solid #ccc;}
.news-box-s4 {width: 100%;height: auto; overflow: hidden; line-height: 1.5rem; padding-top: 1rem; font-size: 1.1rem; color: 333; padding-bottom: 1rem;}
.news-box-s4 img{width: 100%;}
.news-box-s5 {width: 100%; height: auto; line-height: 2rem; font-size: 1rem;}

.productlist-box {width: 100%; height:auto;overflow: hidden; padding-bottom:1rem;}
.productlist-box-s1 {width: 100%; height: auto; padding-bottom:2rem;}
.productlist-box-s1-tp {width:43%; height: auto;  float: left;  margin: 1rem;}
.productlist-box-img { height: 10rem; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center;}
.productlist-box-img img {width:100%; height: 100%;  border-radius: 0.375rem; object-fit: cover;display: block;}
.productlist-box-title {height: 1.5rem; line-height: 1.5rem; padding-top: 1rem; text-align: center; font-size: 1rem; font-weight: bold;}
.productlist-box-s1-xp {width:100%; height: 3rem;;}
.productlist-box2 {width: 100%;height:4rem;}
.productlist-box3 {width:100%; height: 2rem;}
.productlist-sortnav {padding-left:1rem;}
.teacherlist-box-img {width:100%; height: 20rem; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center;}
.teacherlist-box-img img {width:100%; height: 100%;  border-radius: 0.375rem; object-fit: cover;display: block;}
/* 主图片容器 */
.teacher-main-container {
  position: relative;
  max-width: 94%;
  max-height: 90vh;
  margin: 0 20px;
}

/* 图片显示区域 */
.teacher-image-container {
  width: 100%;
  height: 70vh;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3f4f6;
}

.teacher-image-viewer {
  position: fixed;
  inset: 0;
  background-color: #7f1d1d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1000;
}

/* 主容器 */
.product-image-viewer {
  position: fixed;
  inset: 0;
  background-color: #7f1d1d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1000;
}

.teacher-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* 主图片容器 */
.product-main-container {
  position: relative;
  max-width: 94%;
  max-height: 90vh;
  margin: 0 20px;
}

/* 图片显示区域 */
.product-image-container {
  width: 100%;
  height: 70vh;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3f4f6;
}



/* 图片显示区域 */
.teacher-image-container {
  width: 100%;
  height: 70vh;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3f4f6;
}
.product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* 图片信息覆盖层 */
.product-school-name {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
}

.product-image-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

.teacher-image-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right:16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

/* 缩略图导航 */
.product-thumbnail-nav {
  margin-top: 16px;
  background-color: white;
  padding: 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.product-thumbnail-btn {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-thumbnail-btn.active {
  border-color: #b91c1c;
}

.product-thumbnail-btn:hover {
  border-color: #d1d5db;
}

.product-thumbnail-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片类型导航 */
.product-category-nav {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
  color: #d1d5db;
}

.product-category-btn {
  padding: 8px 12px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: inherit;
  cursor: pointer;
}

.product-category-btn.active {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 翻页按钮 */
.product-nav-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 64px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 20px;
}

.product-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.product-prev-btn {
  left: 20px;
}

.product-next-btn {
  right: 20px;
}

/* 关闭按钮 */
.product-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.product-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 快捷操作 */
.product-quick-actions {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: 6px;
}

.product-action-btn {
  width: 40px;
  height: 40px;
  background-color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  transition: all 0.3s ease;
}

.product-action-btn:hover {
  background-color: #e5e7eb;
}

/* 用户头像 */
.product-user-avatar {
  position: absolute;
  right: 16px;
  bottom: 96px;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  overflow: hidden;
}

.product-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 首页样式 */
.product-home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  padding: 16px;
}

.product-home-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 32px;
}

.product-home-card {
  width: 100%;
  max-width: 800px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.product-home-card-content {
  padding: 24px;
}

.product-home-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
}

.product-home-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.product-home-image-container {
  aspect-ratio: 16/9;
  background-color: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.product-home-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-home-text-content h3 {
  font-size: 1.125rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.product-home-text-content p {
  color: #6b7280;
  margin-bottom: 16px;
}

.product-view-details-btn {
  display: inline-block;
  background-color: #7f1d1d;
  color: white;
  padding: 8px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.product-view-details-btn:hover {
  background-color: #b91c1c;
}

.product-home-footer {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.product-home-footer p {
  color: #6b7280;
  font-size: 0.875rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .product-home-content-grid {
    grid-template-columns: 1fr;
  }
  .product-image-container {
  width: 100%;
  height: 30vh;
}
.product-category-btn {
  font-size: 0.9rem;
}
.product-category-nav {

  gap: 10px;
}
.product-prev-btn {
  left: 5px;
}

.product-next-btn {
  right: 5px;
}
.teacher-image-container {
  width: 100%;
  height: 20vh;
}
/* 主图片容器 */
.teacher-main-container {
  max-width: 94%;
  max-height: 70vh;
  margin: 80px 20px 0px 20px;
}

/* 图片显示区域 */
.teacher-image-container {
  width: 100%;
  height: 70vh;
  justify-content: center;
  align-items: flex-start;
}
.teacher-image-viewer {
  align-items: flex-start;

}
.teacher-image-title {
    font-size: 1.3rem;
}
}

/* 预览模式指示器 */
.product-preview-indicator {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  color: #7f1d1d;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.head-container-s1 {width: 85%; height: auto; float: left; }
.head-container-s2 {width: 15%; height: auto; float: left;}

/* 按钮样式 */
.GJL-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.GJL-btn-blue {
  background-color: #3b82f6;
  color: white;
}

.GJL-btn-blue:hover {
  background-color: #2563eb;
}

.GJL-btn-green {
  background-color: #22c55e;
  color: white;
}

.GJL-btn-green:hover {
  background-color: #16a34a;
}

.GJL-btn-gray {
  background-color: #f3f4f6;
  color: #1f2937;
}

.GJL-btn-gray:hover {
  background-color: #e5e7eb;
}

/* 联系工具栏样式 */
.GJL-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.GJL-contact-item:hover {
  transform: scale(1.1);
}

.GJL-contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.GJL-contact-label {
  font-size: 14px;
  color: #6b7280;
}

/* 二维码容器样式 */
.GJL-qr-code-container {
  position: fixed;
  right: 100px;
  top: 50%;
  z-index: 50;
  opacity: 0;
  transform: translateY(-50%) translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.GJL-qr-code-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 24px;
  width: 256px;
  height: 320px;
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.GJL-qr-code-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
}

.GJL-qr-code-image-container {
  width: 192px;
  height: 192px;
  margin-bottom: 16px;
  background-color: white;
  padding: 8px;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
}

.GJL-qr-code-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.GJL-qr-code-description {
  color: #6b7280;
  text-align: center;
}

/* 二维码小三角形 */
.GJL-qr-code-triangle {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
}

/* 显示二维码 */
.GJL-qr-code-container.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* 电话号码弹窗样式 */
.GJL-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn 0.3s ease-out;
}

.GJL-modal-content {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 32px;
  max-width: 400px;
  width: 100%;
  margin: 0 16px;
  border: 1px solid #f3f4f6;
  animation: slideUp 0.3s ease-out;
}

.GJL-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 24px;
  text-align: center;
}

.GJL-phone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.GJL-phone-item-blue {
  background-color: #eff6ff;
  border: 1px solid #dbeafe;
}

.GJL-phone-item-green {
  background-color: #dcfce7;
  border: 1px solid #bbf7d0;
}

.GJL-phone-name {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
}

.GJL-phone-number-blue {
  color: #3b82f6;
}

.GJL-phone-number-green {
  color: #22c55e;
}

/* 移动端工具栏样式 */
.GJL-mobile-toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.GJL-mobile-toolbar-label {
  font-size: 12px;
  color: #6b7280;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 1023px) {
  .GJL-pc-toolbar {
    display: none;
  }
  
  .GJL-mobile-toolbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 50;
    padding: 12px 0;
    justify-content: space-around;
  }
}

@media (min-width: 1024px) {
  .GJL-pc-toolbar {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    gap: 24px;
  }
  
  .GJL-mobile-toolbar {
    display: none;
  }
}

/* 首页样式 */
.GJL-home-container {
  min-height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.GJL-home-content {
  text-align: center;
}

.GJL-home-subtitle {
  font-size: 1.25rem;
  color: #6b7280;
  margin-bottom: 32px;
}

/* 简单的网格布局类 */
.GJL-grid {
  display: grid;
}

.GJL-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.GJL-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.GJL-gap-0\.5 {
  gap: 2px;
}

 /* 新闻主容器 */
    .zyszlist-main-container {
        width: 100%;
        max-width: 37.5rem;
        margin: 0 auto;
        background: #F2F2F2;
    }

    /* 横幅样式 */
    .zyszlist-banner {
        position: relative;
        width: 100%;
        height: 8rem; /* 160px → 8rem */
        overflow: hidden;
    }
    .zyszlist-banner-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }
    .zyszlist-banner-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }
    .zyszlist-banner-title h1 {
        font-size: 1.2rem; /* 24px → 1.2rem */
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0.3);
    }

    /* 导航栏样式 */
    .zyszlist-main-nav {
        background-color: #fff;
        box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0.1);
    }
    .zyszlist-nav-container {
        width: 100%;
        padding: 0 0.5rem; /* 10px → 0.5rem */
    }
    .zyszlist-nav-content {
        display: flex;
        flex-direction: column; /* 移动端导航纵向排列 */
        gap: 0.5rem; /* 10px → 0.5rem */
    }
    .zyszlist-nav-links {
        width: 100%;
        overflow-x: auto; /* 导航链接横向滚动 */
        padding-bottom: 0.25rem; /* 5px → 0.25rem */
    }
    .zyszlist-breadcrumb {
        font-size: 0.7rem; /* 14px → 0.7rem */
        color: #666;
        padding: 0 0.25rem; /* 5px → 0.25rem */
    }

    /* 新闻列表容器 */
    .zyszlist-box {
        padding: 1rem; /* 10px → 0.5rem */
        background-color: #F2F2F2;
    }
    .zyszlist-container {
        display: flex;
        flex-direction: column;
        gap: 2rem; /* 15px → 0.75rem */
    }

    /* 列表项样式 */
    .zyszlist-item {
        background-color: #fff;
        border-radius: 0.25rem; /* 5px → 0.25rem */
        padding: 0.75rem; /* 15px → 0.75rem */
        box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* 10px → 0.5rem */
          background-image: url("/template/default/images/index/col1rbg.png"); /* 替换为实际图片路径 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: right bottom; /* 固定在右下角 */
    background-size: auto 100%; /* 图片高度为元素60%，宽度自适应（可自定义） */
    background-origin: content-box; /* 背景图片从内边距区域开始显示，不被padding遮挡 */
    }
    .zyszlist-img-wrap {
        width: 100%;
        height: 15rem; /* 200px → 10rem */
        border-radius: 0.2rem; /* 4px → 0.2rem */
        overflow: hidden;
    }
    .zyszlist-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 列表内容样式 */
    .zyszlist-content {
        width: 100%;
    }

    .zyszlist-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 1.4rem;
        gap: 0.75rem; /* 5px → 0.25rem */
        margin-top: 1rem;
    }
    .zyszlist-left a {
        flex: 1;
        color: #333;
        text-decoration: none;
        line-height: 1.4;
    }
    .badge {
        padding: 0.1rem 0.25rem; /* 2px 5px → 0.1rem 0.25rem */
        font-size: 0.6rem; /* 12px → 0.6rem */
        border-radius: 0.1rem; /* 2px → 0.1rem */
    }
    .badge-danger {
        background-color: #dc3545;
        color: #fff;
    }
    .badge-warning {
        background-color: #ffc107;
        color: #333;
    }
    .badge-info {
        background-color: #17a2b8;
        color: #fff;
    }

    /* 描述文本 */
    .zyszlist-desc {
        font-size: 0.9rem; /* 15px → 0.75rem */
        color: #666;
        line-height: 1.6;
        margin-bottom: 0.75rem; /* 10px → 0.5rem */
    }

    /* 按钮组 */
    .zyszlist-btns {
        display: flex;
        gap: 0.6rem !important; /* 12px → 0.6rem */
        margin-top: 0.8rem !important; /* 16px → 0.8rem */
        flex-wrap: wrap;
    }
    .zyszlist-btn {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0.8rem !important; /* 8px 16px → 0.4rem 0.8rem */
        font-size: 1rem !important; /* 14px → 0.7rem */
        border-radius: 0.4rem !important; /* 4px → 0.2rem */
        background-color: #1e88e5;
        color: white;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }


.zyszlist-btn:last-child {
    background-color: #ff9800;
}
.zyszlist-btn:hover {
    opacity: 0.9;
    color: white;
}



    /* 分页样式适配 */
    .page {
        margin-top: 1rem; /* 20px → 1rem */
        padding: 0 0.5rem; /* 10px → 0.5rem */
        text-align: center;
    }
    .page a, .page span {
        display: inline-block;
        padding: 0.3rem 0.6rem; /* 6px 12px → 0.3rem 0.6rem */
        margin: 0 0.1rem; /* 2px → 0.1rem */
        font-size: 0.7rem; /* 14px → 0.7rem */
    }