/*.contenter{ max-width: 64rem; margin: 0 auto; position: relative; overflow: hidden}*/
/*logo-search*/
.home-top{ width: 100%; height:auto;padding:10px 0; background:url(../images/topbg_xia.jpg) repeat-x #f5f5f5;background-size:contain; position:relative;}
/*.home-top{ width: 100%; height:auto;padding:10px 0; background:url(../images/topbg.jpg) repeat-x #f5f5f5;background-size:contain; position:relative;}*/
/*.home-top{ width: 100%; height:auto;padding:10px 0; background:url(../images/topbg_xia.jpg);background-size:100% 100%; position:relative;}*/
.home-top .logo{ text-align:center;}
.home-top .logo img{width:60%;max-width:234px;height:auto!important;}
.search{ margin:10px auto 0 auto; width:92%; padding:5px; background:#FFF;border:1px solid #d0d0d0;border-radius:10px;}
.search .sear-1{ float: left;width: 80%; height:auto;}
.search .sear-1 input{ padding: 7px 0 2px 0;width:100%;text-indent: 10px; font-size:1.4rem;border:none;border-right: none;color: #666;}
.search .sear-2{ float: right;width:auto;height:auto; padding:0 5px; text-align:right;border-left:1px solid #ddd;}
.search .sear-2 input{ width:30px;height:30px;background:url(../pict/search.png) no-repeat #fff;border:none;border-left: none;cursor: pointer;}
/*banner*/
.slideBox{ position:relative; overflow:hidden; background:#990;}
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative;  }
.slideBox .bd li img{ width:100%; height:auto;display:block;}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
.slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:0.5rem; height:2.5rem; line-height:230%; background:rgba(0,0,0,.5); color:#fff; font-size: 1.2rem;}
.slideBox .hd{ position:absolute; height:1.8rem; line-height:1.8rem; bottom:0; right:0.3rem; z-index:1; }
.slideBox .hd li{ display:inline-block; width:0.5rem; height:0.5rem; -webkit-border-radius:0.5rem; -moz-border-radius:0.5rem; border-radius:0.5rem; background:rgba(255,255,255,.2); text-indent:-9999px; overflow:hidden; margin:0.3rem  0.3rem 0 0.3rem;}
.slideBox .hd li.on{ background:#fff;}
/*menu*/
.home-menu{ width:100%; height:auto; padding:10px 0; background:#FFF;}
.home-menu ul li{ float:left; width:25%; height:auto;}
.home-menu ul li .menubg{ margin:0 auto;width:4.5rem;height:4.5rem;line-height:4.5rem;background:#e85a5d;border-radius:4.5rem;text-align:center; font-size:2.8rem; color:#FFF;}
.home-menu ul li .menubg i{ margin-top:1rem;}
.home-menu ul li .menuname{width:auto; padding:0.7rem 0;text-align:center; font-size:1.4rem;}
/*禁用该段内容后，导航栏不再翻转
.route1,.route2,.route3,.route4,.route5,.route6,.route7,.route8{
	-webkit-transform:rotateY(90deg);
	-moz-transform:rotateY(90deg);
	-o-transform:rotateY(90deg);
	-ms-transform:rotateY(90deg);
	transform:rotateY(90deg);}
.route1,.route2,.route3,.route4{
	-webkit-transition:-webkit-transform .3s ease-out 0s;
	-moz-transition:-moz-transform .3s ease-out 0s;
	-o-transition:-o-transform .3s ease-out 0s;
	-ms-transition:-ms-transform .3s ease-out 0s;
	transition:transform .3s ease-out 0s;}
.route5,.route6,.route7,.route8{
	-webkit-transition:-webkit-transform .3s ease-out .2s;
	-moz-transition:-moz-transform .3s ease-out .2s;
	-o-transition:-o-transform .3s ease-out .2s;
	-ms-transition:-ms-transform .3s ease-out .2s;
	transition:transform .3s ease-out .2s;}	
*/
/*
.route2{
	-webkit-transition:-webkit-transform .3s ease-out .2s;
	-moz-transition:-moz-transform .3s ease-out .2s;
	-o-transition:-o-transform .3s ease-out .2s;
	-ms-transition:-ms-transform .3s ease-out .2s;
	transition:transform .3s ease-out .2s;}
.route3{
	-webkit-transition:-webkit-transform .3s ease-out .4s;
	-moz-transition:-moz-transform .3s ease-out .4s;
	-o-transition:-o-transform .3s ease-out .4s;
	-ms-transition:-ms-transform .3s ease-out .4s;
	transition:transform .3s ease-out .4s;}
.route4{
	-webkit-transition:-webkit-transform .3s ease-out .6s;
	-moz-transition:-moz-transform .3s ease-out .6s;
	-o-transition:-o-transform .3s ease-out .6s;
	-ms-transition:-ms-transform .3s ease-out .6s;
	transition:transform .3s ease-out .6s;}
.route5{
	-webkit-transition:-webkit-transform .3s ease-out .8s;
	-moz-transition:-moz-transform .3s ease-out .8s;
	-o-transition:-o-transform .3s ease-out .8s;
	-ms-transition:-ms-transform .3s ease-out .8s;
	transition:transform .3s ease-out .8s;}
.route6{
	-webkit-transition:-webkit-transform .3s ease-out 1s;
	-moz-transition:-moz-transform .3s ease-out 1s;
	-o-transition:-o-transform .3s ease-out 1s;
	-ms-transition:-ms-transform .3s ease-out 1s;
	transition:transform .3s ease-out 1s;}
.route7{
	-webkit-transition:-webkit-transform .3s ease-out 1.2s;
	-moz-transition:-moz-transform .3s ease-out 1.2s;
	-o-transition:-o-transform .3s ease-out 1.2s;
	-ms-transition:-ms-transform .3s ease-out 1.2s;
	transition:transform .3s ease-out 1.2s;}
.route8{
	-webkit-transition:-webkit-transform .3s ease-out 1.4s;
	-moz-transition:-moz-transform .3s ease-out 1.4s;
	-o-transition:-o-transform .3s ease-out 1.4s;
	-ms-transition:-ms-transform .3s ease-out 1.4s;
	transition:transform .3s ease-out 1.4s;}
*/			
.route{
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	transform:rotateY(0deg);}
/*about*/
.about{ width:auto; height:auto; padding:10px 2%; margin-top:10px; background:#FFF;}
.about .about-tit{ padding-bottom:7px; font-size:1.4rem; color:#666;}	
.about .about-list{ margin-top:7px;}
.about .about-list dl{ float:left;margin-bottom:10px; width:50%; height:auto;overflow: hidden;}
.about .about-list dl dt{ float:left; margin-right:10px;}
.about .about-list dl dt img{ width:5rem; height:5rem;}
.about .about-list dl dd b{ font-size:1.4rem; color:#666; font-weight:normal;}
.about .about-list dl dd em{font-size:1.2rem; color:#999; font-style:normal;}
.about .about-tongji{display:table;width:100%;font-size:1.2rem; padding:10px 0; background:#eee;}
.about .about-tongji-l{display:table-cell; vertical-align:middle; width:auto; height:auto; padding:0 7px; text-align:right;}
.about .about-tongji-l span{ color:#f60;}
.about .about-tongji-r{display:table-cell; vertical-align:middle; width:150px; height:auto; text-align:center;}
.usertable{ width:100%;border-collapse:collapse; background:#fff; font-size:1.4rem;}  
.usertable td{ padding:5px;word-break: break-all;border:2px solid #ffffff;text-align:center;background:url(../images/bj046.jpg) #eeeeee; color:#fff;}
.usertable a{ display:block; width:100%; height:auto;}
/*maimai*/
.maimai{ width:auto; height:auto; margin-top:10px;}
.maimai .maimai-l{ float:left; width:50%; height:auto;}
.maimai .maimai-l-box{ margin:0 auto; width:90%; height:auto; min-height:100px;}
.maimai .maimai-r{ float:left; width:50%; height:auto;}
.maimai .maimai-r-box{ margin:0 auto; width:90%; height:auto; min-height:100px;}
.maimai h3{ padding:5px 0;text-align:center; color:#FFF; font-size:1.4rem; border-bottom:1px solid #fff;}
.maimai p{ padding:5px; color:#f6f6f6; font-size:1.2rem;}
.maimai-bgxiao{background:#FE6A00;}
.maimai-bggou{background:#00AEEF;}
/*作品三列推荐*/
.gd-zllist{ margin-top:10px; width:auto;height:auto;background:#fff;position: relative;}
.gd-zllist-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;color: #000;border-bottom: 1px solid #ddd;}
.gd-zllist-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.gd-zllist .bd ul { width:96%; margin:0 auto; padding-top: 10px;}
.gd-zllist .bd ul li{float:left;width: 33.3%; height:auto;position:relative;_display:inline;}
.gd-zllist .bd ul li .img-box{ width:100%; text-align:center;}
.gd-zllist .bd ul li .img-box img{ width:90%; height:auto;}
.gd-zllist .bd ul li .title-box{ padding:5px 5%;text-align:center;}
.gd-zllist .bd ul li .title-box .zllinkys{ font-size:1.2rem;color:#333;}
.gd-zllist .bd ul li .title-box .zllinkys-zp{ font-size:1.2rem;color:#F05033;}
.gd-zllist .hd{ margin:0 auto; width:100px; overflow:hidden; height: 15px; padding-bottom:10px;}
.gd-zllist .hd ul{ text-align: center;}	
.gd-zllist .hd li{ display: inline-block; width:8px; height:8px; background:#a3a3a3; margin:0 3px; overflow:hidden;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; color: #a3a3a3;}
.gd-zllist .hd .on{ background:#2c8fcd; color: #2c8fcd; }
/*资料三列图文推荐*/
.nr-zllist{ margin-top:10px; width:auto;height:auto;background:#fff;position: relative; padding-bottom:10px;}
.nr-zllist-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;color: #000;border-bottom: 1px solid #ddd;}
.nr-zllist-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.nr-twlist ul { width:96%; margin:0 auto; padding-top: 10px;}
.nr-twlist ul li{float:left;width: 33.3%; height:auto;position:relative;_display:inline;}
.nr-twlist ul li .img-box{ width:100%; text-align:center;}
.nr-twlist ul li .img-box img{ width:90%; height:auto;}
.nr-twlist ul li .title-box{ padding:3px 5% 5px 5%;height:40px; text-align:center;}
.nr-twlist ul li .title-box .zllinkys{ /*line-height:15px;*/ font-size:1.2rem;color:#333;}
.nr-twlist ul li .title-box .zllinkys-zp{ /*line-height:15px;*/ font-size:1.2rem;color:#F05033;}
/*两列文字*/
.nr-wzlist{display:table;width:100%;}
.nr-wzlist .nr-wzlist-l{display:table-cell; vertical-align:top; width:50%; height:auto; padding:0 7px;}
.nr-wzlist .nr-wzlist-r{display:table-cell; vertical-align:top; width:50%; height:auto; padding:0 7px;}
.nr-wzlist h3{ width:100%; height:30px; line-height:30px; text-align:center; font-size:1.4rem; background-color:#f2ecde; font-weight:normal; color:#ae7000;}
.nr-wzlist ul{ width:100%; background-color:#fffbf0; margin-bottom:3px;}
.nr-wzlist ul li{ padding:0 10px; line-height:30px; height:30px;overflow: hidden; font-size:1.2rem; border-bottom:2px solid #f2ecde;}
.nr-wzlist ul li a{ display:block;}
/*人才列表*/
.rc-wzlist{display:table;width:100%; margin-top:10px;}
.rc-wzlist .rc-wzlist-l{display:table-cell; vertical-align:top; width:50%; height:auto; padding:0 7px;}
.rc-wzlist .rc-wzlist-r{display:table-cell; vertical-align:top; width:50%; height:auto; padding:0 7px;}
.rc-wzlist h3{ width:100%; height:30px; line-height:30px; text-align:center; font-size:1.4rem; background-color:#D8D8EB; font-weight:normal; color:#484891;}
.rc-wzlist ul{ width:100%; background-color:#F3F3FA; margin-bottom:3px;}
.rc-wzlist ul li{ padding:0 10px; line-height:30px; height:30px;overflow: hidden; font-size:1.2rem; border-bottom:2px solid #D8D8EB;}
.rc-wzlist ul li a{ display:block;}
/*关键词信息*/
.nr-keylist{ margin-top:10px;height:auto;background:#ffffff;position: relative;}
.nr-keylist-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;color: #000;border-bottom: 1px solid #ddd;}
.nr-keylist-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.nr-keylist .linkkeylist{ padding:0 10px; margin-top:10px;}
.nr-keylist .linkkeylist .hot-tags-link { display: inline-block; font-size: 1.4rem; -webkit-border-radius: 5px; border-radius: 5px; margin: 0 10px 10px 0; padding:5px 12px 3px 12px; color: #fff; background: #02C874; }
.nr-keylist .linkkeylist .hot-tags-link:nth-child(2n) { background: #fc6c88; }
.nr-keylist .linkkeylist .hot-tags-link:nth-child(3n) { background: #4dd0c8; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(2) { background: #fc6c88; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(3) { background: #4dd0c8; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(4), .nr-keylist .linkkeylist .hot-tags-link:nth-of-type(8) { background: #dea8e7; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(6), .nr-keylist .linkkeylist .hot-tags-link:nth-of-type(11) { background: #73cfff; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(7) { background: #feac49; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(9), .nr-keylist .linkkeylist .hot-tags-link:nth-of-type(5) { background: #f87d63; }
.nr-keylist .linkkeylist .hot-tags-link:nth-of-type(10) { background: #FF77FF; }
/*宣传*/
.banner-ad{margin-top:10px;height:auto;background:#ffffff;position: relative;}
.banner-ad img{ width:100%; height:auto;}
/*讨论问答*/
.nr-tllist{ margin-top:10px;height:auto;background:#ffffff;position: relative;}
.nr-tllist-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;color: #000;border-bottom: 1px solid #ddd; margin-bottom:10px;}
.nr-tllist-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.nr-tllist .bd ul{ width:100%; height:auto;}	
.nr-tllist .bd ul li{ width:96%; margin:0 auto;margin-bottom:10px;padding:5px 0;overflow:hidden; background:#DFE8E7;}
.nr-tllist .bd ul li .tit{ padding:0 5px 5px 5px; color:#36C;font-size:1.2rem;}
.nr-tllist .bd ul li .tit strong{ color:#000;}
.nr-tllist .bd ul li .tit span{ color:#f30;}
.nr-tllist .bd ul li .zhaiyao{ padding:0 5px; font-size:1.4rem; color:#666;}
.nr-tllist .hd{ margin:0 auto; width:100px; overflow:hidden; height: 15px; padding-bottom:10px;}
.nr-tllist .hd ul{ text-align: center;}	
.nr-tllist .hd li{ display: inline-block; width:8px; height:8px; background:#a3a3a3; margin:0 3px; overflow:hidden;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; color: #a3a3a3;}
.nr-tllist .hd .on{ background:#2c8fcd; color: #2c8fcd; }
/*问答*/
.nr-wdlist{ margin-top:10px;height:auto;background:#ffffff;position: relative;}
.nr-wdlist-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;color: #000;border-bottom: 1px solid #ddd; margin-bottom:10px;}
.nr-wdlist-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.nr-wdlist .bd ul{ width:100%; height:auto;}	
.nr-wdlist .bd ul li{ width:96%; margin:0 auto;margin-bottom:10px;padding:5px 0;overflow:hidden; background:#F4F1E2;}
.nr-wdlist .bd ul li .tit{ padding:0 5px 5px 5px; color:#36C;font-size:1.2rem;}
.nr-wdlist .bd ul li .tit strong{ color:#000;}
.nr-wdlist .bd ul li .tit span{ color:#f30;}
.nr-wdlist .bd ul li .zhaiyao{ padding:0 5px; font-size:1.4rem; color:#666;}
.nr-wdlist .hd{ margin:0 auto; width:100px; overflow:hidden; height: 15px; padding-bottom:10px;}
.nr-wdlist .hd ul{ text-align: center;}	
.nr-wdlist .hd li{ display: inline-block; width:8px; height:8px; background:#a3a3a3; margin:0 3px; overflow:hidden;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; color: #a3a3a3;}
.nr-wdlist .hd .on{ background:#2c8fcd; color: #2c8fcd; }
/*文章*/
.newsbox{ margin-top:10px;height:auto;background:#ffffff;position: relative;}
.newsbox .color1{ color:#42a0e4;}
.newsbox .color1-q{ background:#E6F2FB;}
.newsbox .color1-s{ background:#8DC6EF;}
.newsbox .color2{ color:#2ec9af;}
.newsbox .color2-q{ background:#E6F9F5;}
.newsbox .color2-s{ background:#5ED9C0;}
.newsbox .color3{ color:#f96b3e;}
.newsbox .color3-q{ background:#FEEDE7;}
.newsbox .color3-s{ background:#FBB199;}
.newsbox .color4{ color:#c33c8b;}
.newsbox .color4-q{ background:#F8E7F0;}
.newsbox .color4-s{ background:#ECBDD6;}
.newsbox-top { padding:10px 0 3px 10px;font-size:1.4rem; font-weight:bold;color: #000;}
.newsbox-top a{display:inline-block;float:right; font-size:1.2rem; color:#888; padding:0 1rem;}
.newsbox-fl{ padding:7px 5px; font-size:1.2rem;}
.newsbox-fl a {display: inline-block; margin-left:8px;padding:2px 5px; background: #f8f8f8; color:#fff;}
.newsbox-tw{ padding:10px;}
.newsbox-tw .tw-img{float:left;	width:30%;height:auto;margin-right:3%;position: relative;}
.newsbox-tw .tw-img img{width:100%;}
.newsbox-tw .tw-wz{ float:left;width:67%;}
.newsbox-tw .tw-wz .name{ margin-bottom:5px;font-size:1.4rem; font-weight:bold; color:#333;}
.newsbox-tw .tw-wz .zhaiyao{font-size:1.2rem; color:#999;}
.newsbox ul{padding:5px 3%;}
.newsbox ul li{width:auto; padding:5px 0;color:#7d7d7d;overflow: hidden; font-size:1.4rem;}
.newsbox ul li a{ display:block;}

/*首页信息块*/
.zpcolor{ color:#5CADAD;}
.qzcolor{ color:#8080C0;}
.zpcolor-bg{background:#E6F2F2;}
.qzcolor-bg{background:#F3F3FA;}
.rcxxbox{ margin-top:10px;height:auto;background:#ffffff;position: relative;}
.rcxxbox-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;border-bottom: 1px solid #ddd;}
.rcxxbox-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.rcxxbox-box{width:auto;height:auto;padding: 0 2%; background: #fff;}
.rcxxbox-box ul{margin-top:10px;}
.rcxxbox-box ul li{float:left;width:50%; height:auto;margin-bottom:10px;overflow:hidden;}
.rcxxbox-box .rcxxbox-k{ width:auto; margin-right:5px;}
.rcxxbox-box .rcxxbox-kt{ padding:0 5px; height:35px; line-height:35px; text-align:center; font-size:1.4rem; font-weight:bold; border-bottom:2px solid #FFF;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
.rcxxbox-box .rcxxbox-km{ padding:5px; font-size:1.2rem; color:#999; border-bottom:2px solid #FFF;}
.rcxxbox-box .rcxxbox-km p{ height:20px; line-height:20px; overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
/*新闻列表*/
.nrlist-box{margin-top:10px;width:auto;	height:auto; background: #fff;}
.nrlist-box ul{padding: 0 3%;}
.nrlist-box ul li{width:auto;padding-bottom:10px;margin:10px 0;	border-bottom:1px dashed #dedede;overflow:hidden;}
.nrlist-box ul li:last-child{border:none;}
.nrlist-box .nrlist-img{float:left;	width:37%;height:auto;margin-right:3%;position: relative;}
.nrlist-box .nrlist-img img{width:100%;}
.nrlist-box .nrlist-wz{float:left;}
.nrlist-box .okpic{width:60%;}
.nrlist-box .nopic{ width:100%;}
.nrlist-box .nrlist-wz .name{ margin-bottom:5px;font-size:1.6rem;color:#666; font-weight:bold;}
.nrlist-box .nrlist-wz .namezp{ margin-bottom:5px;font-size:1.6rem; color:#d00000;}
.nrlist-box .nrlist-wz .name span{ background:#eaecef; color:#666; padding:2px 8px; margin-left:10px;}
.nrlist-box .nrlist-wz .zhaiyao{font-size:1.2rem; color:#999; margin-bottom:3px;}
.nrlist-box .nrlist-wz .addtime{ margin-top:5px;margin-bottom:5px; color:#999; font-size:1.2rem; text-align:right;}
.nrlist-box-top { padding:10px 0 3px 10px;font-size:1.6rem; font-weight:bold;color: #000;border-bottom: 1px solid #ddd;}
.nrlist-box-top a{display:inline-block;float:right; font-size:1.4rem; color:#888; padding:0 1rem;}
.list-more{ padding:5px 0;background:#eee; text-align:center; font-size:1.8rem; font-weight:bold;}
.list-more a{ display:block;width:100%;color:#d00000;  padding:5px 0;font-size:1.8rem;}
.list-more a:hover{ display:block; background:#C60; color:#FFF; transition:all .3s ease-in-out;}
/*会员登录按钮下面的提示文字*/
.login-hint {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffeb3b;
  color: #d32f2f;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  animation: hintPulse 1.8s infinite;
}

.login-hint::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffeb3b;
}
@keyframes hintPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); opacity: 0.9; }
}
/*首页图片展示*/
        /* 2x2 矩阵容器 */
        .promo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 两列等宽 */
            gap: 2px; /* 图片之间的间距 */
        }
        /* 单个卡片样式 */
        .promo-item {
            position: relative;
            width: 100%;
			height:100%;
            /*border-radius: 16px; /* 圆角设计*/
            overflow: hidden;
            background-color: #fff; /* 图片加载前的占位色 */
            /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 轻微的悬浮阴影 */
            /* 初始状态：用于入场动画 */
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease-out forwards;
        }
 .promo-item img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover; /* 保证图片填满且不变形 */
        transition: transform 0.3s ease; /* 图片悬停/点击时的平滑过渡 */
    }
   .promo-item:active img {
            transform: scale(1.2);
            opacity: 0.85;
        }
        /* --- 入场动画定义 --- */
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* --- 给四个图片设置不同的动画延迟，制造错落感 --- */
        .promo-item:nth-child(1) { animation-delay: 0.1s; }
        .promo-item:nth-child(2) { animation-delay: 0.2s; }
        .promo-item:nth-child(3) { animation-delay: 0.3s; }
        .promo-item:nth-child(4) { animation-delay: 0.4s; }