* { margin:0; padding:0;}

body{ padding:0px; margin:0px auto; font-family:Tahoma, Verdana, Arial; height:100%; background:url(body_bg.jpg) no-repeat center top #fff;}

div,p,li,em{font-family:Verdana,宋体;font-size:14px; }

form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

input,select{font-size:12px;line-height:16px;}

img{border:0; max-width:750px}

ul,li{list-style-type:none;}

table{ border-collapse:collapse;}


a:link,a:visited,a:active{ color:#555; text-decoration:none;}
a:hover{ color:#d78e10; text-decoration:none;}

/* Declaring HTML5 elements */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
display: block;
}
.cb{clear:both;}
.about_table td { line-height:32px;}
/*---------------------------index start----------------------------------------------*/
.wrap_1002{position:relative; width:1002px;margin:0 auto;background:url(top_bg.jpg) no-repeat center top;}
.header{height:400px;width:1002px; }
.music {
	position: absolute;
	z-index: 100;
	right: -50px;
	top: 20px;
	display: block;
}
.music2 {
	position: absolute;
	z-index: 100;
	right: 810px;
	top: 140px;
	display: block;
}
.logo{position:absolute;z-index:99; left:40px;top:100px;display:block;width:470px;height:120px; font-size:30px; font-weight:bold; line-height:80px; color:#083f54}
.nav{
	width: 1002px;
	height: 64px;
	position: absolute;
	top: 333px;
	left: 0px;
	z-index: 101;
	background: url(nav.png) no-repeat;
}
.nav li{float:left;width:100px;height:42px;margin-right:28px;margin-top:4px;}
.nav li a{display:block;width:100px;height:42px;text-indent:-999em;}
.nav li.lyb{margin-right:0;}
.nav .index a:hover{background:url(nav_hover.png) no-repeat left -4px;}
.nav .jyhd a:hover{background:url(nav_hover.png) no-repeat -128px -4px;}
.nav .ysjs a:hover{background:url(nav_hover.png) no-repeat -256px -4px;}
.nav .yebj a:hover{background:url(nav_hover.png) no-repeat -384px -4px;}
.nav .jxjy a:hover{background:url(nav_hover.png) no-repeat -512px -4px;}
.nav .tszx a:hover{background:url(nav_hover.png) no-repeat -640px -4px;}
.nav .zszl a:hover{background:url(nav_hover.png) no-repeat -768px -4px;}
.nav .lyb a:hover{background:url(nav_hover.png) no-repeat -896px -4px;}
.nav .index a.on{background:url(nav_hover.png) no-repeat left -4px;}
.nav .jyhd a.on{background:url(nav_hover.png) no-repeat -128px -4px;}
.nav .ysjs a.on{background:url(nav_hover.png) no-repeat -256px -4px;}
.nav .yebj a.on{background:url(nav_hover.png) no-repeat -384px -4px;}
.nav .jxjy a.on{background:url(nav_hover.png) no-repeat -512px -4px;}
.nav .tszx a.on{background:url(nav_hover.png) no-repeat -640px -4px;}
.nav .zszl a.on{background:url(nav_hover.png) no-repeat -768px -4px;}
.nav .lyb a.on{background:url(nav_hover.png) no-repeat -896px -4px;}


#cont{width:1002px;margin:0 auto;}
#cont .main_left{float:left;width:285px;}
.login{width:285px;height:160px;overflow:hidden;position:relative;background:url(login.jpg) no-repeat;}
.login2{padding:40px 0 0 36px;width:225px;}
.login span{font:14px/20px 'Arial';line-height:26px;color:#784b50;}
.tips{width:241px;height:230px;padding:69px 0 0 36px;overflow:hidden;*float:left;text-align:justify;text-justify:inter-ideograph;background:url(tips.jpg) no-repeat;}
.tips span{font:14px/20px 'Arial';line-height:26px;color:#784b50;}
.cont_yezp{width:285px;height:616px;overflow:hidden;background:url(yezp.jpg) no-repeat;position:relative;}
.cont_yezp .bd{width:233px;height:500px;margin-left:18px;margin-top:80px;position:relative;overflow:hidden;}


.cont_yezp .bd .img_ul{font:14px/20px 'Arial';margin-left:36px;color:#784b50;}


.cont_yezp .bd li.mt0{margin-top:0;}
.cont_yezp .bdMore{position:absolute;top:35px;right:38px;z-index:99;color:#784b50;}

#cont .main_center{float:left;width:420px;}
.uls{width:346px;height:166px;margin:65px auto 0;position:relative;}
.uls .more{position:absolute;right:40px;top:-30px;z-index:99;color:#417959;}
.uls li{width:346px;height:32px;overflow:hidden;background:url(icon.png) no-repeat 20px center;}
.uls li a{display:block;width:346px;height:32px;font:14px/32px 'Arial';text-indent:3em;*text-indent:4em;}
.main_tzgg{width:420px;height:245px;overflow:hidden;background:url(tzgg.jpg) no-repeat;}
.main_tzgg .uls .more{top:-40px;color:#9c7c44;}

.main_xwdt{width:420px;height:260px;overflow:hidden;background:url(xwdt.jpg) no-repeat;}
.main_xwdt .uls{margin:67px auto 0;}
.main_xwdt .uls .more{top:-40px;color:#9c7c44;}

.main_bjlb{width:420px;height:353px;overflow:hidden;background:url(bjlb.jpg) no-repeat;}
.main_bjlb .uls{margin:75px auto 0;width:368px;*margin:81px auto 0;}
.main_bjlb .uls .more{top:-52px;*top:-45px;right:37px;color:#486f97;}
.uls .banji{width:368px;height:32px;margin-top:11px;overflow:hidden;}
.uls .banji h3,.uls .banji p{float:left;}
.uls .banji h3{width:75px;height:32px;overflow:hidden;font:bold 14px/32px '宋体';color:#476b92;text-align:right;}
.uls .banji p{width:293px;height:32px;overflow:hidden;text-indent:1em;}
.uls .banji p a{font:14px/32px '宋体';margin-right:5px;}
fcont_yezp
#cont .main_right{float:left;width:297px;}
.happyTime{width:297px;height:250px;overflow:hidden;position:relative;background:url(happy_time.jpg) no-repeat;}
.happyTime .more{position:absolute;right:42px;top:28px;color: #486F97;}
.flash{width:290px;height:260px;overflow:hidden;margin-top:22px;margin-left:16px;_margin-left:0px;_margin-top:20px;}


.button{width:297px;height:477px;overflow:hidden;}
.button a{display:block;width:297px;height:89px;text-indent:-99999em;margin-top:4px;background:url(button.jpg) no-repeat;}
.button a:hover{background:url(button_hover.jpg) no-repeat;}

.button .sidebar01{background-position:0 0px;}
.button .sidebar02{background-position:0 -89px;}
.button .sidebar03{background-position:0 -178px;}
.button .sidebar04{background-position:0 -267px;}
.button .sidebar05{background-position:0 -356px;}


.button .sidebar01:hover{background-position:0 0px;}
.button .sidebar02:hover{background-position:0 -89px;}
.button .sidebar03:hover{background-position:0 -178px;}
.button .sidebar04:hover{background-position:0 -267px;}
.button .sidebar05:hover{background-position:0 -356px;}
.link{width:297px;height:117px;overflow:hidden;background:url(link.jpg) no-repeat;}
.link select{width:160px;height:20px;margin-left: 34px; margin-top: 56px;}

.goodTitle{float:left;width:383px;height:292px;overflow:hidden;background:url(jcwz.jpg) no-repeat;}
.goodTitle .uls{width:283px;margin:70px 0 0 10px;}
.goodTitle .uls li{width:330px;overflow:hidden;}
.goodTitle .uls .more{top:-39px;right:0px;color:#486f97;}



.teachers{float:left;width:311px;height:327px;overflow:hidden;margin-top:-38px;background:url(mxls.jpg) no-repeat;}
.teachers .uls{width:283px;margin:65px auto 0;}
.teachers .uls li{width:283px;overflow:hidden;}
.teachers .uls .more{left:200px;top:-39px;right:8px;color:#486f97;}

.uls_img{width:215px;height:230px;margin:73px auto 0;position:relative;padding-left:15px}
.uls_img .more{position:absolute;right:7px;top:-42px;z-index:99;color:#bd7401;}
.uls_img li{width:84px;height:115px;overflow:hidden;float:left; margin:0px 10px; display:inline;text-align:center;}
.uls_img li.mr0{margin-right:0;}
.uls_img li a{display:block;width:84px;height:110px;}
.uls_img li a .img{display:block;width:74px;height:74px;border:1px solid #C6C19A;background:#fff;padding:4px;}
.uls_img li a .name{font:14px/32px '宋体';color:#333;}
.uls_img li a:hover .name{text-decoration:none;color:#d78e10;}

.children{float:left;width:308px;height:327px;overflow:hidden;margin-top:-38px;background:url(mxye.jpg) no-repeat;}
.children .uls{width:283px;margin:65px auto 0;}
.children .uls li{width:283px;overflow:hidden;}
.children .uls .more{left:200px;top:-39px;right:8px;color:#486f97;}
  

.footer{width:1002px;line-height:30px;height:159px;padding-top:40px;background:url(foot_bg.jpg) no-repeat;}
.footer div{text-align:center;color:#5980a2; font-size:12px}
.footer .phone a{display:inline-block;width:30px;height:30px;background:url(footer_num.png) no-repeat;margin-right:5px;}

/*---------------------------index end----------------------------------------------*/


/*--------------------------- ysjs start---------------------------------------------*/
.sidebar_title{float:left;width:133px;height:327px;margin-left:13px;margin-top:46px;background:url(bird.jpg) no-repeat;}
.sidebar_title .list{width:97px;height:90px;margin-left:17px;margin-top:85px;}
.sidebar_title .list li{width:97px;height:30px;overflow:hidden;}
.sidebar_title .list li a{display:block;width:97px;height:30px;text-indent:-9999em;background:url(ysjs.jpg) no-repeat;}
.sidebar_title .list li.y1 a{background-position:0 0;}
.sidebar_title .list li.y2 a{background-position:0 -30px;}
.sidebar_title .list li.y3 a{background-position:0 -60px;}
.sidebar_title .list li.y4 a{background-position:0 -90px;}
.sidebar_title .list li.y5 a{background-position:0 -120px;}
.sidebar_title .list li.y1 a:hover{background-position:-97px 0;}
.sidebar_title .list li.y2 a:hover{background-position:-97px -30px;}
.sidebar_title .list li.y3 a:hover{background-position:-97px -60px;}
.sidebar_title .list li.y4 a:hover{background-position:-97px -90px;}
.sidebar_title .list li.y5 a:hover{background-position:-97px -120px;}
.sidebar_title .list li.y1 a.on{background-position:-97px 0;}
.sidebar_title .list li.y2 a.on{background-position:-97px -30px;}
.sidebar_title .list li.y3 a.on{background-position:-97px -60px;}
.sidebar_title .list li.y4 a.on{background-position:-97px -90px;}
.sidebar_title .list li.y5 a.on{background-position:-97px -120px;}


.article{float:left;width:830px;min-height:800px;height:auto!important;height:800px;padding-bottom:100px;margin-left:10px;margin-top:16px;}
.article .h30{width:830px;height:40px;border-bottom:1px solid #D7D7D7;background:url(ysjs_title.jpg) no-repeat 20px 0;}
.article .ysjj{background-position:20px 0;}
.article .ydfc{background-position:20px -36px;}
.article .yjym{background-position:20px -72px;}
.attext {margin:0 auto; width:830px; float:none; margin-top:46px;}

/*--------------------------- ysjs end---------------------------------------------*/


/*--------------------------- sun start---------------------------------------------*/
.sunTitle, .sunTitle02{width:972px;height:46px;margin:35px 15px 20px;float:left;border-bottom:1px solid #D7D7D7;background:url(sunTitle.jpg) no-repeat 20px 0;}
.sunTitle02{background:url(sunTitle02.jpg) no-repeat 20px 0;}
.sunMxye{background-position:20px 0;}
.sunMxls{background-position:20px -46px;}
.sunBjlb{background-position:20px -92px;}
.sunJcwz{background-position:20px -138px;}
.sunXwdt{background-position:20px -184px;}
.sunTzgg{background-position:20px -230px;}
.sunLyb{background-position:20px -276px;}
.sunZszl{background-position:20px -322px;}
.sunTszx{background-position:20px -368px;}
.sunJxjy{background-position:20px -414px;}
.sunYebj{background-position:20px bottom;}
.sunZxbm{background-position:20px 0;}
.sunMzsp{background-position:20px -46px;}
.sunYzxx{background-position:20px -92px;}
.sunJcsp{background-position:20px -138px;}
.sunWjdc{background-position:20px -184px;}


.sunContent{margin-left:84px;width:830px; margin-bottom:40px;}

.newstit{margin:2px 0 0 110px; font-size:18px;}

.newstit2{margin:2px 0 0 30px; font-size:18px;}
a.newstit2{color:#0067b0;} 
.newstit3{margin:2px 0 0 30px; font-size:16px;}

.newstit4{padding:10px 0 0 70px; font-size:18px;}

.bigTitle{width:972px;height:61px;_height:59px;margin:35px 15px 20px;float:left;border-bottom:1px solid #D7D7D7;font:bold 18px/65px '宋体';color:#04410e;text-align:center;background:url(bigTitle.jpg) no-repeat 62px 0;_background-position:62px 4px;}

.bigContent{margin-left:84px;width:825px; margin-bottom:40px;float:left;}


/*--------------------------- sun end---------------------------------------------*/


	/*list*/
	.about_list{ margin:0 auto; padding-top:38px;  width:830px; background:url(list_title.png) no-repeat #fff9e4;}
	.about_list ul { border-left:1px solid #e1d6ad;border-right:1px solid #e1d6ad; width:828px; background:url(xh.png) no-repeat 20px 0px;}
	.about_list li{ line-height:36px; height:36px; border-bottom:1px solid #e1d6ad; padding-left:100px; vertical-align: bottom}
	.about_list a { float:left; width:550px;line-height:36px; height:36px;display:block; font-size:14px}
	.about_list a:link,.about_list a:visited,.about_list a:active{ color:#6c3c14; text-decoration:none;}
	.about_list a:hover{ color:#cf5d00; text-decoration:none;}
	.about_list .time { float:right; width:140px;line-height:36px; height:36px;  text-align:center; display:block; color:#848484}


				
	.MXLS_img ul { width:110px; height:110px; text-align:center; padding:10px;}
	
	.WJDC_Box { width:828px; border:1px solid #dbdbdb;}
	.WJDC_Box .mx_title { background:#dff5ff; color:#2c6b87; font-size:14px;  padding-left:15px;padding-top:7px; padding-bottom:5px; #height:20px; line-height:20px;}
	.WJDC_Box h2 {background:#dff5ff; color:#2c6b87; padding-left:10px; border-bottom:1px solid #dbdbdb; font-size:14px; line-height:36px; }
	.WJDC_Box li { padding-left:20px; line-height:30px;}
	.WJDC_Box input { padding:5px;}
	.WJDC_Box textarea { padding:5px; margin:5px;}
	.WJDC_Box span { display:block; float:left; padding-right:20px;}
	
	.teacher_box { width:828px;  margin:0 auto; border:1px solid #dbdbdb; background:#FFF}
	.teacher_box li { float:left; width:80px; text-align:center;margin-left:28px; margin-top:10px; display:inline}
	.teacher_box a { padding:3px; border:1px solid #d7d7d7; display:block; width:74px;height:100px; line-height:30px; background:#fff; }
	.teacher_title { color:#2c6b87; font-size:14px; padding:7px 0px 5px 15px; line-height:20px; background:#dff5ff; }
	/*bjlb star*/
	.bjlb_Abox { width:850px;  margin:0 auto; border:1px solid #dbdbdb; background:#FFF}
	.bjlb_Atitle { color:#2c6b87; font-size:14px; padding:7px 0px 5px 15px; line-height:20px; background:#dff5ff; }
	
	.bjlb_Ttext,.bjlb_Ttitle { border-bottom:1px solid #dbdbdb}
	.bjlb_Ttitle { font-weight:bold; text-align:right; width:70px; padding-top:10px;}
	.bjlb_Ttext a {  border:1px solid #d7d7d7; display:inline-block; height:30px; width:95px; overflow:hidden; text-align:left; padding-left:10px; line-height:30px; background:#fff; margin:10px; }
	.bjlb_Ttext a:hover { background:#f2f2f2}
	/* about-message board Restore */
	.orange{ color:#ff3c00; }
	
	.restore{ margin:0 auto; width:828px; height:auto; border:1px solid #dbdbdb; background:#fff;}
	.restore .title{ float:left; width:100%; height:26px; color:#2c6b87; line-height:26px; background:#dff5ff; border-bottom:1px solid #dbdbdb; }
	.restore .title h2{ margin-top:0px;#margin-top:0px;_margin-top:6px; font-size:14px; }
	.restore .title img{ margin:0 10px; }
	.restore table{ margin:10px auto; width:100%; border-collapse:collapse; }
	.restore table td{ padding:6px; }
	.restore table th{ padding-right:10px; color:#6d6d6d; line-height:26px; text-align:right; width:90px; }
	.restore table textarea{ margin-left:16px; width:700px; height:150px;}
	.short{ padding:0 2px; width:500px; height:21px; line-height:20px; color:#67543f;  background:#ffffef; border:1px solid #c5c5c5; }
	.short1{ padding:0 2px; width:100px; height:21px; line-height:20px; color:#67543f;  background:#ffffef; border:1px solid #c5c5c5; }
	
	/* about-文章 */
	.tableText{ margin:0 auto; border-collapse:collapse; width:88%; font-size:14px; line-height:30px; color:#383838;}
	.tableText img{ margin:0 auto;}
				
	/* about-message board */	
	.subjuct{ margin:0 auto; margin-top:20px; width:828px; height:auto; }
	.subjuct{ border:1px solid #f0d8c0; background:#fff; }
	.subjuct .titleBox{ border-bottom:1px solid #f0d8c0; background:#fee8a4; color:#c4af6c; float:left; width:828px; padding:2px 0px; line-height:28px;}
	.subjuct .titleBox img{ margin-top:5px;}
	.subjuct img{ margin:0 10px; }
	.subjuct h4 { font-size:14px; color:#b43300; font-weight:bold; text-decoration:none;}
	.subjuct .titleBox p{ margin:0 10px;}
	.subjuct em{ color:#866e23; }
	.subjuct .hfct { background:url(hfct.gif) no-repeat; width:77px; height:28px; margin-left:10px;text-align:center; float:left; line-height:28px;}
	.subjuct .hfct a { color:#0099ff;}
	.subjuct .left1 { float:left}
				
	.subjuct .text{ clear:both; margin:0 auto; padding:5px 10px 5px; width:828px; height:auto; line-height:24px; text-align:left;  }
	.subjuct .text p{ text-indent:24px; }
	.subjuct .text p a{ color:#494949; text-decoration:none; }
	.subjuct .text p a:hover{ color:#e14c7d; text-decoration:none; }
	
	
	.subjuct .time{width:828px; height:22px; color:#aca8a2; line-height:22px; text-align:right; background:#f5f1ec;}
	.subjuct .time span{ margin:0 8px; font-size:12px}
	.subjuct .time em{ color:#937147; font-size:12px }
	.subjuct .time p{ margin:0 12px; font-size:12px}
	.subjuct .time p a{ color:#c6948d; font-size:12px}
	.subjuct .time p a:hover{ color:#ff0066; text-decoration:underline; }
	
	/* about-message board Scott */
	.scott{ margin:0 auto; padding:10px 0;  width:828px; height:30px; line-height:30px; color:#004399; text-align:center;}
	.scott a{ margin:0 10px; color:#006fff; text-decoration:none;}
	.scott a:hover{ color:#a6006d; text-decoration:none;}
	
	/* about-message board Restore */
	.orange{ color:#ff3c00; }
	.zxbm_table { margin:0 auto; width:828px;}
	.restore{ margin:0 auto; width:828px; height:auto; border:1px solid #dbdbdb; background:#fff;}
	.restore .titleBox{ float:left; width:828px; height:26px; color:#2c6b87; line-height:26px; background:#dff5ff; border-bottom:1px solid #dbdbdb; }
	.restore .titleBox h2{ margin-top:0px;#margin-top:0px;_margin-top:6px; font-size:14px; }
	.restore .titleBox img{ margin:0 10px; }
	.restore table{ }
	.restore table td{ padding:6px; color:#d75600; }
	.restore table th{ padding-right:4px; width:100px; color:#6d6d6d; line-height:26px; text-align:right; border:none; }
	.restore table textarea{ width:500px; height:150px; background:#ffffef; border:1px solid #c5c5c5;}
	.short{ padding:0 2px; width:500px; height:21px; line-height:20px; color:#67543f;  background:#ffffef; border:1px solid #c5c5c5; }
	.short1{ padding:0 2px; width:100px; height:21px; line-height:20px; color:#67543f;  background:#ffffef; border:1px solid #c5c5c5; }
	
	
	
	
     .focus-slider {
        position: relative;
        width: 260px;
        height: 215px;
        overflow: hidden;
        background: #fff;
  border-radius: 12px; 
  overflow: hidden;
      }

      .focus-slider-track {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .focus-slide {
        position: absolute;
        inset: 0;
        display: block;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity .55s ease, transform 4.8s ease;
        pointer-events: none;
        z-index: 1;
      }

      .focus-slide.active {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        z-index: 2;
      }

      .focus-slide img {
        display: block;
        width: 260px;
        height: 215px;
        object-fit: cover;
      }

      .focus-slide-overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 54px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .64) 100%);
      }

.focus-slide-title {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

      

      .focus-slider-arrow {
        position: absolute;
        top: 50%;
        z-index: 3;
        width: 28px;
        height: 44px;
        margin-top: -22px;
        border: 0;
        padding: 0;
        background: rgba(0, 0, 0, .24);
        cursor: pointer;
        transition: background .25s ease, opacity .25s ease;
      }

      .focus-slider:hover .focus-slider-arrow {
        background: rgba(0, 0, 0, .38);
      }

      .focus-slider-arrow:hover {
        background: rgba(127, 191, 0, .82);
      }

      .focus-slider-arrow-prev {
        left: 0;
      }

      .focus-slider-arrow-next {
        right: 0;
      }

      .focus-slider-arrow span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
      }

      .focus-slider-arrow-prev span {
        margin-left: -3px;
        transform: rotate(-135deg);
      }

      .focus-slider-arrow-next span {
        margin-left: -7px;
        transform: rotate(45deg);
      }
   
      
/* 图片上下滚动 */
  
/* 外层容器：设定高度并隐藏溢出部分 */
.scroll-container {
  width: 250px; /* 根据你的图片宽度（233px）稍微留点边距 */
  height: 500px; /* 【重要】你需要根据实际页面排版修改这个高度 */
  overflow: hidden;
  position: relative;
  background-color: #fff; 
}

/* 滚动内容器：应用向上滚动的动画 */
.scroll-content {
  display: flex;
  flex-direction: column;
  /* 控制滚动速度，越小越快。linear 保证匀速滚动 */
  animation: scrollUp 30s linear infinite; 
}

/* 核心优化：鼠标悬停时自动暂停滚动，方便用户点击查看 */
.scroll-container:hover .scroll-content {
  animation-play-state: paused;
}

/* 列表和单独项的排版 */
.scroll-list {
  display: flex;
  flex-direction: column;
}

.scroll-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px; /* 每个图文之间的间距 */
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.scroll-item:hover {
  color: #007BFF; /* 鼠标悬停时文字变色 */
}

.scroll-item img {
  width: 233px;
  height: auto;
  margin-bottom: 8px;
  border-radius: 8px; /* 加一点圆角更好看，可选 */
}

.item-title {
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  display: block;   
  width: 95%;       
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 定义从下往上的无缝滚动关键帧 */
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 向上移动自身高度的 50%（因为刚好有两组一样的列表，移动 50% 也就是完全移动完第一组），实现完美无缝衔接 */
    transform: translateY(-50%);
  }
}
     /* ========================================
   分页
   ======================================== */
.pagination {
  clear: both !important;   /* 核心：清除浮动 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;           /* 增加上下间距，撑开空间 */
  gap: 4px;

margin:0 auto; margin-top:20px; width:828px; border:1px solid #e1d6ad; height:30px; font-size:14px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 400;
  color: #374151;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination-btn:link,
.pagination-btn:visited {
  color: #374151;
}

.pagination-btn svg {
  stroke: currentColor;
}

.pagination-btn:hover:not(:disabled) {
  background: #374151;
  color: #ffffff;
}

.pagination-btn.active {
  background: #4b5563;
  color: #ffffff;
  font-weight: 500;
}

.pagination-ellipsis {
  padding: 0 8px;
  color: #d1d5db;
}
/* 图片展示容器 */
/* 1. 照片墙外层容器 (完全保留你的 Flex 网格布局) */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
    justify-content: space-between;
}

/* 2. 每个图片项容器 */
.image-item {
    width: calc(25% - 22.5px); /* 保持 4 列布局 */
    height: auto !important;   /* 【核心修复】强制高度自适应，绝不能写死高度，否则吃掉标题 */
    overflow: hidden;
    text-align: center;        /* 标题居中 */
}

/* 3. 图片的包裹链接 (用来和文字强行隔开，并统一图片高度) */
.item-img-link {
    display: block;
    width: 100%;
    margin-bottom: 10px;       /* 图片和下面标题的间距 */
    overflow: hidden;
    
    /* 【强烈推荐】统一图片比例为 4:3 (或者 1/1 正方形)，防止上传的图片尺寸不一导致列表高低不齐 */
    aspect-ratio: 3 / 4; 
}

/* 4. 图片本身 (完美继承你的 object-fit 不变形) */
.item-img-link img {
    width: 100%;
    height: 100%;              /* 完全填满上面的 4:3 容器 */
    object-fit: cover;         /* 填满且绝对不会被拉伸变形 */
    display: block;
    transition: transform 0.3s ease; /* 加点平滑的动画过渡 */
}

/* 可选：鼠标悬停时图片微微放大，非常适合照片墙 */
.image-item:hover .item-img-link img {
    transform: scale(1.05);
}

/* 5. 标题文字样式 */
.item-title {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    padding: 0 5px;
    
    /* 超出单行自动打省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}