*{margin:0;padding:0;list-style:none;}
body{background:#fff;font:normal 12px/22px 宋体;width:100%;}
img{border:0;}
a{text-decoration:none;color:#333;}

/* fullSlide */
.fullSlide{width:100%;position:relative;height:850px;background:#000; float:left}
.fullSlide .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;}
.fullSlide .bd ul{width:100% !important;}
.fullSlide .bd li{width:100% !important;height:850px;overflow:hidden;text-align:center;}
.fullSlide .bd li a{display:block;height:850px;}
.fullSlide .hd{width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px; display:none}
.fullSlide .hd ul{text-align:center;}
.fullSlide .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}
.fullSlide .hd ul .on{background:#f00;}
.fullSlide .prev,.fullSlide .next{display:block;position:absolute;z-index:1;top:50%;margin-top:-30px;left:15%;z-index:1;width:40px;height:60px;background:url(../images/arrow.png) -126px -137px #000 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}
.fullSlide .next{left:auto;right:15%;background-position:-6px -137px;}

/* 横向滑动裁切只加在 #mySwipe，避免父级 overflow:hidden + 毛玻璃导致箭头整块看不见 */
.banner{ width:100%; height:100vh; float:left; overflow:visible; position:relative !important; display:block; z-index:2;}
.banner a{ width:100%; height:100%; float:left; display:block;}
.banner img{ width:100%; height:100%; object-fit:cover;}
/* 仅作用于 #mySwipe 内层，勿用 .banner div 全选，否则 .banner-arrows 会被拉成 100%×100% + 圆角成「整屏白椭圆」 */
.banner #mySwipe > div{ width:100%; height:100%; overflow:hidden; position:relative;}
.banner #mySwipe div p{ width:100%; height:100%; overflow:hidden; float:left; position:relative;}
#mySwipe{
  position:relative;
  z-index:1;
  overflow:hidden;
  width:100%;
  height:100%;
}

/*
  轮播切换按钮：参考设计 — 平行四边形并排无间距；左半透明浅灰+深色箭头，右橄榄绿+亮蓝箭头；图标反向 skew 保持竖直
*/
.banner__overlay{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:10050;
  pointer-events:none;
}
.banner__overlay .banner-arrows{
  pointer-events:auto;
}

.banner-arrows{
  position:absolute;
  right:20px;
  bottom:24px;
  left:auto !important;
  top:auto !important;
  width:fit-content !important;
  max-width:calc(100% - 40px);
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
  z-index:10051;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  visibility:visible !important;
  opacity:1 !important;
}
#bannerPrev, #bannerNext {
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:54px !important;
  height:48px !important;
  min-width:54px !important;
  min-height:48px !important;
  padding:0 !important;
  border-radius:0 !important;
  border:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  -webkit-appearance:none !important;
  transition:background .2s ease, opacity .2s ease, transform .15s ease !important;
}
#bannerPrev{
  background:rgba(255,255,255,.48) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:skewX(-18deg) translate(-6px, 8px) !important;
}
#bannerNext{
  background:#8a9d4a !important;
  margin-left:-2px !important;
  transform:skewX(-18deg) translate(6px, -8px) !important;
}
#bannerPrev svg, #bannerNext svg{
  display:block;
  transform:skewX(18deg) !important;
  stroke-width:1.75 !important;
}
#bannerPrev svg{
  stroke:#0f172a !important;
  color:#0f172a !important;
}
#bannerNext svg{
  stroke:#2563eb !important;
  color:#2563eb !important;
}
#bannerPrev:hover{
  background:rgba(255,255,255,.62) !important;
  transform:skewX(-18deg) translate(-6px, 7px) !important;
}
#bannerPrev:hover svg{
  transform:skewX(18deg) !important;
}
#bannerNext:hover{
  background:#75863f !important;
  transform:skewX(-18deg) translate(6px, -9px) !important;
}
#bannerNext:hover svg{
  transform:skewX(18deg) !important;
}
#bannerPrev:active{
  transform:skewX(-18deg) translate(-6px, 8px) !important;
}
#bannerNext:active{
  transform:skewX(-18deg) translate(6px, -8px) !important;
}
#bannerPrev:active svg, #bannerNext:active svg{
  transform:skewX(18deg) !important;
}
#bannerPrev:focus-visible, #bannerNext:focus-visible{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:2px;
  z-index:1;
}
#bannerPrev:focus:not(:focus-visible), #bannerNext:focus:not(:focus-visible){ outline:none !important;}


@media screen and (max-width: 1023px)
{
  .fullSlide,.fullSlide .bd li,.fullSlide .bd li a{height:320px}
  .hd,.fullSlide .prev,.fullSlide .next{ display:none}
  .banner{ margin-top:71px; display:block; width:100%; float:left; overflow:visible; height:auto !important;}
  .banner img{ width:100% !important; height:auto !important; object-fit:contain !important; display:block;}
  .banner #mySwipe{ height:auto !important;}
  .banner #mySwipe > div{ width:100%; height:auto !important;}
  .banner #mySwipe div p{ width:100%; height:auto !important; overflow:visible;}
  .banner-arrows{
    right:12px !important;
    bottom:16px !important;
    gap:0 !important;
  }
  #bannerPrev, #bannerNext{
    width:48px !important;
    height:44px !important;
    min-width:48px !important;
    min-height:44px !important;
  }
  #bannerPrev{
    transform:skewX(-18deg) translate(-5px, 6px) !important;
  }
  #bannerNext{
    transform:skewX(-18deg) translate(5px, -6px) !important;
  }
  #bannerPrev:hover{
    transform:skewX(-18deg) translate(-5px, 5px) !important;
  }
  #bannerNext:hover{
    transform:skewX(-18deg) translate(5px, -7px) !important;
  }
  #bannerPrev:active{
    transform:skewX(-18deg) translate(-5px, 6px) !important;
  }
  #bannerNext:active{
    transform:skewX(-18deg) translate(5px, -6px) !important;
  }
}

@media screen and (max-width: 768px)
{
  .banner-slide-text__inner {
    padding: 0 20px;
  }
}

/* 轮播图文字覆盖层 */
.banner-slide-item {
  position: relative;
}

.banner-slide-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.banner-slide-text__inner {
  padding: 0;
}

.banner-slide-text__title {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.3;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: slideInLeft 0.8s ease-out forwards;
  opacity: 0;
}

.banner-slide-text__desc {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 600px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@media screen and (max-width: 1023px) {
  .banner-slide-text__title {
    font-size: 32px;
  }
  
  .banner-slide-text__desc {
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
  .banner-slide-text__title {
    font-size: 24px;
  }
  
  .banner-slide-text__desc {
    font-size: 14px;
  }
  
  .banner-slide-text {
    align-items: flex-end;
    padding-bottom: 80px;
  }
}