@font-face {
  font-family:'o-r';
  src:url('../fonts/o-r.woff') format('woff');
}

@font-face {
  font-family:'s-r';
  src:url('../fonts/s-r.woff') format('woff');
}


html,body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,div,img,button{margin:0;padding:0;font-family:o-r;letter-spacing:0.8px}

video{margin:0 auto;padding:0;border:none;outline:none}
video:focus{outline:none}
li{list-style:none}

.text-gray{color:#ccc}
.font-size-13px{font-size:13px}
.font-size-11px{font-size:11px}

.clean-float{clear:both;float:none;width:100%;height:0;font-size:0;line-height:0;content:""}



.banner-top{width:100%;position:relative;z-index:1;/*margin-bottom:10vw;*/}

.bannerTop-overlay{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;/*background:linear-gradient(108deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 255) 99%)*/}

.bannerTop-text{position:absolute;left:10%;top:23%;z-index:3;color:#222;width:50%;text-align:left}
.bannerTop-text h1{font-size:clamp(39px, 4vw, 93px);margin-bottom:1vw}
.bannerTop-text h2{font-weight:normal;font-size:clamp(17px, 1.7vw, 23px);margin-bottom:0.1vw}

.bannerTop-cards{position:absolute;left:90px;bottom:53px;z-index:3;color:#fff;display:none}
.bannerTop-card{float:left;width:230px;height:55px;margin-right:25px;border-radius:6px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.13);background:rgba(0, 0, 0, 0.39);backdrop-filter:blur(12px)}
.bannerTop-card:hover{background:rgba(255, 255, 255, 0.13)}


.video-container100perc{position:relative;width:100%;height:100vh;overflow:hidden}
.video-container100perc video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;object-fit:cover}


.bannerTop-Green{width:100%;overflow:hidden;position:absolute;left:0;bottom:12%}
.bannerTop-Green .green1{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:BannerGreenRevealLeftToRight1 1.5s ease-out 1.7s forwards}
.bannerTop-Green .green2{/*visibility:hidden;*/margin-bottom:56px/*26px*/;width:100%/*90%*/;height:100%;object-fit:cover;opacity:0;animation:BannerGreenRevealLeftToRight2 1.3s ease-out 2.5s forwards;transform:scaleX(-1);/*transform:scaleY(-1)*/}
@keyframes BannerGreenRevealLeftToRight1{0%{clip-path:inset(0 100% 0 0);opacity:0}100%{clip-path:inset(0 0% 0 0);opacity:0.8/*0.5*/}}
@keyframes BannerGreenRevealLeftToRight2{0%{clip-path:inset(0 100% 0 0);opacity:0}100%{clip-path:inset(0 0% 0 0);opacity:0.06/*0.93*/}}


.SqueezeAddReduceBox2-10{position:relative;width:100%;margin-bottom:39px;/*height:1112px*/}
.SqueezeAddReduceBox2-10-title{position:absolute;left:10%;top:13%;z-index:2}
.SqueezeAddReduceBox2-10-title h2{font-size:clamp(33px, 2vw, 50px);color:#fff}
.SqueezeAddReduceBox2-10-title h3{font-size:clamp(23px, 1.3vw, 20px);color:#555;font-weight:normal}
.SqueezeAddReduceBox2-10-gr{width:100%;margin-top:203px;position:relative;z-index:1}
.SqueezeAddReduceBox2-10 ul{text-align:center}
.SqueezeAddReduceBox2-10 ul img{width:100%}
.SqueezeAddReduceBox2-10-list ul{position:relative}
.SqueezeAddReduceBox2-10-list h5{position:absolute;left:10%;top:15%;font-size:1.5vw}
.SqueezeAddReduceBox2-10-list h5 sup{font-size:0.7vw}
.SqueezeAddReduceBox2-10-list h6{position:absolute;left:10%;top:30%;font-size:0.8vw;font-weight:normal;color:#5fb116}
.SqueezeAddReduceBox2-10-list p{width:90%;position:absolute;left:10%;top:63%;text-align:left;font-size:0.7vw}
.SqueezeAddReduceBox2-10-list, .SqueezeAddReduceBox2-10-list a{color:#222}

.AutoPlayTitle{position:absolute;top:50%;left:50%;z-index:3;transform:translate(-50%,-50%);padding:40px 30px;box-sizing:border-box;text-align:center}
.AutoPlayTitle-top-text,.AutoPlayTitle-bottom-text-container{color:#666;font-size:14px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:8px}
.AutoPlayTitle-top-text{font-weight:600;margin-bottom:10px}
.AutoPlayTitle-bottom-text-container{font-weight:700;margin-top:15px}
.AutoPlayTitle-main-title-container{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;max-width:0}
.AutoPlayTitle-main-title{font-size:72px;font-weight:900;letter-spacing:1px;color:#ffffff;margin:0;padding:0 10px;text-shadow:0 2px 10px rgba(0,0,0,0.03);background:linear-gradient(135deg,#77d227,#b3f17c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;/*background:#77d227*/}
.AutoPlayTitle::before{content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(to bottom,#77d227 50%,#77d227 50%);transform:scaleY(0);transform-origin:top center}
.AutoPlayTitle::after{content:'';position:absolute;top:0;right:0;width:6px;height:100%;background:linear-gradient(to bottom,#b3f17c 50%,#b3f17c 50%);transform:scaleY(0);transform-origin:bottom center}
@keyframes borderExpandVertical{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes textExpand{0%{max-width:0;opacity:0}40%{max-width:400px;opacity:0.6}100%{max-width:900px;opacity:1}}
.AutoPlayTitle.active .AutoPlayTitle-main-title-container{animation:textExpand 2.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.6s forwards}
.AutoPlayTitle.active::before{animation:borderExpandVertical 0.6s cubic-bezier(0.25,0.46,0.45,0.94) 0s forwards}
.AutoPlayTitle.active::after{animation:borderExpandVertical 0.6s cubic-bezier(0.25,0.46,0.45,0.94) 0s forwards}
.AutoPlayTitle-top-text,.AutoPlayTitle-bottom-text-container{opacity:0;transform:translateY(10px);transition:opacity 0.3s ease,transform 0.3s ease}
.AutoPlayTitle.active .AutoPlayTitle-top-text,.AutoPlayTitle.active .AutoPlayTitle-bottom-text-container{opacity:1;transform:translateY(0)}
.AutoPlayTitle.active .AutoPlayTitle-top-text{transition-delay:0.3s}
.AutoPlayTitle.active .AutoPlayTitle-bottom-text-container{transition-delay:0.5s}


.vg-pic{height:85%;position:absolute;right:3.3%;top:10%;z-index:2;/*mix-blend-mode:overlay*/}
.vg-pic{clip-path:inset(0 100% 0 0);animation:shutterOpen 0.5s ease-out forwards;filter:brightness(0.6) saturate(0.7)}
@keyframes shutterOpen{0%{clip-path:inset(0 100% 0 0);filter:brightness(0.6) saturate(0.7)}100%{clip-path:inset(0 0% 0 0);filter:brightness(1) saturate(1)}}


.CircularClickPresenter-Left-card{max-width:80%;margin:auto;background:#ffffff;border-radius:40px;padding:28px 32px;transition:box-shadow 0.2s}
.CircularClickPresenter-Left-container{display:flex;flex-direction:row;align-items:stretch;gap:28px;flex-wrap:wrap}
.CircularClickPresenter-Left-navWrapper{flex:0 0 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:12px 0;order:0}
.CircularClickPresenter-Left-navWrapper::before{content:'';position:absolute;top:18px;bottom:18px;left:50%;transform:translateX(-50%);width:0;border-left:2.5px dashed #b8c9e0;opacity:0.7;pointer-events:none;z-index:0}
.CircularClickPresenter-Left-circleGroup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:23px;position:relative;z-index:1;width:100%}
.CircularClickPresenter-Left-circleBtn{color:#333;width:68px;height:68px;border-radius:50%;border:none;background:#eef2f9;box-shadow:0 6px 12px rgba(0,20,30,0.06),0 0 0 2px transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.1rem;background-size:cover;background-position:center;background-color:#eef2f9;position:relative;border:2px solid transparent;overflow:hidden;flex-shrink:0}
.CircularClickPresenter-Left-circleBtn span{background:rgba(255,255,255,0.5);backdrop-filter:blur(2px);padding:4px 10px;border-radius:40px;font-size:0.9rem;font-weight:600;color:#0b1e33;box-shadow:0 2px 4px rgba(0,0,0,0.02);transition:0.15s;pointer-events:none}
.CircularClickPresenter-Left-circleBtn.active{border-color:#77d227;box-shadow:0 8px 18px #77d227 0 0 3px rgba(26,92,255,0.15);transform:scale(1.02);background-color:#d9e4ff}
.CircularClickPresenter-Left-circleBtn:hover{transform:translateY(-2px) scale(1.02);background-color:#e3eaff;box-shadow:0 10px 20px rgba(0,20,30,0.08)}
.CircularClickPresenter-Left-circleBtn:active{transform:scale(0.96)}
.CircularClickPresenter-Left-circleBtn.active span{color:#333;background:rgba(255,255,255,0.7)}
.CircularClickPresenter-Left-circleBtn[data-index="0"]{background:#fff}
.CircularClickPresenter-Left-circleBtn[data-index="1"]{background:#fff}
.CircularClickPresenter-Left-circleBtn[data-index="2"]{background:#fff}
.CircularClickPresenter-Left-circleBtn[data-index="3"]{background:#fff}
.CircularClickPresenter-Left-textWrapper{flex:1.4;min-width:200px;display:flex;flex-direction:column;justify-content:center;padding:8px 8px 8px 4px;order:1}
.CircularClickPresenter-Left-textContent{padding:53px;border-radius:28px;transition:background 0.2s;height:100%;display:flex;flex-direction:column;justify-content:center}
.CircularClickPresenter-Left-textContent h2{font-size:2rem;font-weight:600;letter-spacing:-0.02em;color:#0b1e33;margin-bottom:14px;line-height:1.2}
.CircularClickPresenter-Left-textContent p{font-size:1.05rem;line-height:1.7;color:#2c3e50;opacity:0.85;max-width:36ch}
.CircularClickPresenter-Left-textContent .CircularClickPresenter-Left-sub{margin-top:18px;font-size:0.9rem;color:#5b6f87;border-top:1px dashed #d0dcee;padding-top:16px;letter-spacing:0.2px}
.CircularClickPresenter-Left-imageWrapper{flex:2.2;min-width:280px;background:#eef2f9;border-radius:28px;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,0.02);display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:4/3;order:2}
.CircularClickPresenter-Left-imageWrapper img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 0.25s ease;border-radius:28px}
@media (max-width:860px){.CircularClickPresenter-Left-container{flex-direction:column;align-items:stretch}
.CircularClickPresenter-Left-navWrapper{flex:0 0 auto;flex-direction:row;justify-content:center;padding:16px 0 6px;width:100%;order:0}
.CircularClickPresenter-Left-navWrapper::before{top:50%;bottom:auto;left:18px;right:18px;width:auto;height:0;border-left:none;border-top:2.5px dashed #b8c9e0;transform:translateY(-50%);opacity:0.7}
.CircularClickPresenter-Left-circleGroup{flex-direction:row;gap:18px;flex-wrap:wrap;justify-content:center;width:auto}
.CircularClickPresenter-Left-circleBtn{width:60px;height:60px}
.CircularClickPresenter-Left-imageWrapper{aspect-ratio:4/3;min-height:200px;order:2}
.CircularClickPresenter-Left-textWrapper{padding:4px 0;order:1}
.CircularClickPresenter-Left-textContent{padding:20px 18px}
.CircularClickPresenter-Left-textContent h2{font-size:1.8rem}}
@media (max-width:480px){.CircularClickPresenter-Left-card{padding:16px}
.CircularClickPresenter-Left-circleBtn{width:55px;height:55px;font-size:0.9rem}
.CircularClickPresenter-Left-textContent h2{font-size:1.5rem}
.CircularClickPresenter-Left-navWrapper::before{left:12px;right:12px}}


.AutoRollingToLeft-wrapper{width:85%;margin:auto;opacity:0.8;/*filter:grayscale(100%)*/}
.AutoRollingToLeft-wrapper .AutoRollingToLeft-header{color:#1a2634;font-weight:500;font-size:1rem;letter-spacing:0.3px;margin-bottom:20px;padding-left:6px;opacity:0.7;text-align:center}
.AutoRollingToLeft-container{overflow:hidden;position:relative;width:100%;border-radius:16px;padding:12px 0;}
.AutoRollingToLeft-track{display:flex;flex-wrap:nowrap;width:max-content;animation:scrollLeft 60s linear infinite;will-change:transform;backface-visibility:hidden}
.AutoRollingToLeft-item{flex:0 0 auto;margin:0 12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.04);transition:transform 0.2s;/*border-radius:13px*/}
.AutoRollingToLeft-item img{display:block;width:180px;height:120px;object-fit:cover;border-radius:14px;transition:transform 0.3s ease}
/*.AutoRollingToLeft-container:hover .AutoRollingToLeft-track{animation-play-state:paused}*/
.AutoRollingToLeft-item:hover img{transform:scale(1.09)}
@keyframes scrollLeft{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@media (max-width:640px){.AutoRollingToLeft-wrapper{padding:24px 16px}
.AutoRollingToLeft-item img{width:140px;height:100px}
.AutoRollingToLeft-item{margin:0 8px}}

.BigPicArea{position:relative;width:100%;margin:6vw 0}
.BigPicArea h2{font-size:3vw;margin:1vw 0}
.BigPicArea h3{font-size:1.3vw;font-weight:normal}
.slogan-pic{margin-top:5vw;opacity:0.8}
#BigPicArea-video{width:100%}
.BigPicArea-text{position:absolute;top:39%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;padding:20px;width:96%;text-shadow:0 1px 5px rgba(0,0,0,0.9)}



  .accordion-wrapper {
      width:95%;
	margin:auto;
      background: transparent;
      position: relative;
      /* 确保点击空白区域能被捕获 */
      min-height: 100px;
    }

    .accordion-4 {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      border-radius: 0;
      overflow: hidden;
      gap: 0;
    }

    .accordion-4-box {
      flex: 1 1 25%;
      height: 380px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      cursor: pointer;
      transition: flex 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
                  height 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                  background-image 0.3s ease,
                  background-color 0.3s ease;
      overflow: hidden;
      min-width: 0;
    }
    .accordion-4-box:last-child {
      border-right: none;
    }

    /* 展开状态——由JS添加 class "active" */
    .accordion-4-box.active {
      flex: 7 1 70% !important;
      background-image: none !important;
    }

    /* 背景图 */
    .box-1 {background:#eee}
    .box-2 {background:#f3f3f3}
    .box-3 {background:#f6f6f6}
    .box-4 {background:#fafafa}

    /* ul 默认隐藏 */
    .accordion-4-box ul {
      list-style: none;
      margin: 0;
      padding: 1.8rem 2rem;
      backdrop-filter: blur(4px);
      color: #000;
      line-height: 1.8;
      border-radius: 0;
      box-shadow: 0 10px 20px rgba(0,0,0,0.3);
      width: 88%;
      max-height: 80%;
      overflow-y: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.92);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s;
      pointer-events: none;
      border-left: 3px solid #333;
    }

    /* 展开时显示 ul */
    .accordion-4-box.active ul {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0s;
      pointer-events: auto;
    }

    .accordion-4-box ul li {
      padding: 0.45rem 0;
      border-bottom: 1px solid #ccc;
      font-size: 0.98rem;
    }
    .accordion-4-box ul li:last-child {
      border-bottom: none;
    }
    .accordion-4-box ul li::before {
      content: "▹ ";
      color: #333;
      font-weight: 700;
    }

    /* ========== 竖屏手机响应式 ========== */
    @media (max-width: 768px) and (orientation: portrait) {
      .accordion-wrapper {
        padding: 12px;
      }

      .accordion-4 {
        flex-direction: column;
        border-radius: 0;
        overflow: hidden;
      }

      .accordion-4-box {
        flex: none !important;
        width: 100% !important;
        height: 120px;
        border-right: none;
        border-bottom: 2px solid rgba(255,255,255,0.15);
        transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                    background-image 0.3s ease,
                    background-color 0.3s ease;
      }
      .accordion-4-box:last-child {
        border-bottom: none;
      }

      .accordion-4-box.active {
        flex: none !important;
        width: 100% !important;
        height: 340px !important;
        background-image: none !important;
      }

      .accordion-4-box ul {
        width: 92%;
        padding: 1.2rem 1.5rem;
        max-height: 75%;
      }
    }

    @media (max-width: 768px) and (orientation: landscape) {
      .accordion-4-box {
        height: 260px;
      }
      .accordion-4-box ul {
        padding: 1rem 1.2rem;
        width: 90%;
      }
    }

    @media (max-width: 480px) and (orientation: portrait) {
      .accordion-4-box {
        height: 180px;
      }
      .accordion-4-box.active {
        height: 395px !important;
      }
      .accordion-4-box ul {
        padding: 1rem 1.2rem;
        font-size: 0.9rem;
        width: 94%;
      }
      .accordion-4-box ul li {
        padding: 0.3rem 0;
      }
    }



#mv1{display:block}
#mv1-2{display:none;margin-top:39px}







@media (max-width:1600px) {
	.slogan-pic{width:55%;margin-top:9vw}
	/*.BigPicArea-text h3{display:none}*/
}

@media (max-width:1279px) {
	.bannerTop-text{top:13%;width:70%}
	.slogan-pic{width:53%;margin-top:9vw}
	/*.BigPicArea-text h3{display:none}*/
}




@media (width <= 1024px) {
/*<= 这种写法涵盖所有手机和全部平板的竖屏模式*/
	#mv1{display:none}
	#mv1-2{display:block}
	.AutoPlayTitle{zoom: 0.63}
	.slogan-pic{width:60%;margin-top:15vw}
	.BigPicArea h2{font-size:3.9vw}
	.BigPicArea h3{font-size:2.3vw}
.SqueezeAddReduceBox2-10-list h5{font-size:13px}
.SqueezeAddReduceBox2-10-list h5 sup{font-size:8px}
.SqueezeAddReduceBox2-10-list h6{font-size:10px}
.SqueezeAddReduceBox2-10-list p{font-size:5px}
.SqueezeAddReduceBox2-10-title h2{font-size:19px;margin-bottom:6px}
}

@media (width <= 767px) {
/*<= 这种写法涵盖所有手机和部分小型平板的竖屏模式*/
	#mv2{height:39%}
	.AutoPlayTitle{zoom: 0.3}
}