/*---xxxxxxxxxxxxxx css for bannerstyle start xxxxxxxxxxxxxxxxx---*/

#banner {position: relative;
         width: 100%;               /* 改成百分比，跟随屏幕宽度 */
         /*max-width: 1200px;          最大宽度限制在 1200px */
         height: auto;              /*高度自适应 */
         aspect-ratio: 12 / 5;      /* 保持宽高比 1200:500 */
         margin: 0;
         overflow: hidden;          /*隐藏溢出的图片*/
         background-color: #222222;
         }

/* 每张图片容器 */
.banner_item {
              position: relative;        /* 让文字可以绝对定位在图片上 */
              flex: 0 0 100%;            /* 每张图占满容器宽度 */
             }

.banner_item img {
                  width: 100%;               /* 图片宽度自适应容器 */
                  height: auto;              /* 高度按比例缩放 */
                  display: block;
                 }

                                         /* 文字容器：覆盖在图片上 */
.banner_text {
              position: absolute;        /* 文字覆盖在图片上 */
              bottom: 10%;               /* 文字在图片底部 10% */
              left: 50%;
              transform: translateX(-50%);
              text-align: center;
              color: #ffffff;
              font-size: 1.6vw;          /* 用 vw 单位，随屏幕缩放 */
              opacity: 0.6;              /* 透明度调高，避免文字消失 */
              text-shadow: 2px 2px 6px rgba(0,0,0,0.6); /* 文字阴影，保证在浅色图片上也清晰 */
              max-width: 95%;            /* 容器宽度不超过图片的 95%，避免太窄 */
              }

#banner_photo {                      /*---设置总的图片宽度--通过位移来达到轮播效果----*/
               position: relative;
               width: 100%;         /* 6 张图，每张占 100% */
               animation: img 35s ease-out infinite;
               }
.banner_play {
              display: flex;
              width: 600%;
              animation: img 35s ease-out infinite;/*35秒播放完7张照片*/
              float: left;
              }

.banner_play img {
                  flex: 0 0 100%;  /* 每张图占满容器宽度 */
                 }
@keyframes img {                              /*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
	       0%,8% { transform: translateX(0%); }      /*-- 第一张：0% ~ 8% --*/
	       17%,25% { transform: translateX(-100%); }  /*-- 第二张：17% ~ 25% --*/
	       34%,42% { transform: translateX(-200%); }  /*-- 第三张：34% ~ 42% --*/
	       51%,59% { transform: translateX(-300%); }  /*-- 第四张：51% ~ 59% --*/
	       68%,76% { transform: translateX(-400%); }  /*-- 第五张：68% ~ 76% --*/
	       85%,100% { transform: translateX(-500%); } /*-- 第六张：85% ~ 100% --*/
               } /*--6张照片，keframes需要遵守from 0% to 100%，即第一张从0%到16%，依次类推--*/

/*---xxxxxxxxxxxxxx css for bannerstyle end xxxxxxxxxxxxxxxxx---*/