.spbox{ width:100%; float:left; }
.spnav{ width:100%; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:50px; padding:75px 0px 60px; }
.spnav a{ width:235px; height:42px; display:flex; justify-content:center; align-items: center; flex-direction:row; text-align: center; font-size:1.05rem; letter-spacing: 1px; background-color:#c8c8c8; color:#FFF; border-radius:60px; padding:0px 20px;-webkit-transition:all 0.6s;-moz-transition:all 0.6s; transition:all 0.6s; }
.spnav a:hover{ background-color:#ffcd33; color:#000; }

/* 标题样式 */
.sp-one{ width:100%; float: left; padding:25px 0px;}
.page-title { width: 100%; display: flex; justify-content: center; text-align: center; flex-direction:column;margin-bottom: 30px;}
.page-title h1 { font-size: 2.4rem;font-weight: bold;color:#000;margin-bottom: 10px;}
.line {display: flex;align-items: center;justify-content: center;margin: 20px 0;}
.line span {width: 10px;height: 10px;background-color: #000000;margin: 0 15px;}
.line::before,
.line::after {content: '';flex: 1;height: 2px;background-color: #000;max-width:80px;}
.sp-one-show{ width:100%; display:flex; flex-direction:column; font-size: 1rem; color: #040002; line-height:1.7;}
.sp-one-img{ width:100%; display:flex; flex-direction:row; padding: 45px 0px; gap:15px;}
.sp-one-img i{ flex:auto; }
.sp-one-img i img{ width:100%; height:100%; object-fit:cover; }

.sp-two{ width:100%; display:flex; flex-direction:row; }
.sp-two-l{ width:53%; display:flex; padding:4% 0px 0px 5%; position:relative; z-index:1;  }
.sp-two-l::before{ content:''; width:calc(100% - 100px); height:calc(100% - 60px); position:absolute; left:0; top:0; background-color:#ffcd33; }
.video-container{ width:100%; display:flex; justify-content:center; align-items:center; position:relative; background-color: #595b5b; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }
.video-container video{ width:calc(100% + 1px); object-fit:cover;}
.play{ left:calc(50% - 48px); top:calc(50% - 48px); width:95px; height:95px; position:absolute; cursor:pointer;}
.play img{ width:100%; }
.sp-two-r{ width:630px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; padding:15px 15px 15px 0px; }
.sp-two-r h1{ width:100%; font-size:3.9rem; text-align: right; color:#000000; line-height:1.5; position:relative; font-weight: bolder; font-family:"宋体"; padding:50px 0px 0px 20px; background-image:url(../../uploads/page/name.png); background-repeat:no-repeat; background-position:right top 20%;}
.sp-two-r h2{ font-size:2rem; color:#ffcd33; line-height:1.5; padding:25px 0px 25px 20px; letter-spacing:2px; }
.sp-two-r h3{ font-size:1.7rem; color:#040002; line-height:1.5;  }
.sp-two-r p{ font-size:1rem; color:#000; line-height:1.5; width:75%; padding-top:45px; }

.sp-three{ width:100%; display:flex; margin:80px 0px; background-color:#263b4c; background-repeat:no-repeat; background-size: cover; background-position:center; background-image:url(../../uploads/page/zbg.jpg); }
.mainbox{ width:100%; display:flex; flex-direction:column; min-height:900px; overflow:hidden; padding:80px 0px;}
.mainbox .page-title h1{ font-weight: normal; color:#FFF; }
.line span { background-color:#ffcd33;}
.line::before,.line::after {background-color:#ffcd33;}
.ac-show{ width:100%; }

.swiperAa .swiper-slide {width:52%; opacity: 0.7;transition: opacity 0.3s;}
.swiperAa .swiper-slide-active {opacity: 1;}
.acone{ width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#FFF; padding:25px; transition: all 0.3s ease;}
.acone h1{ font-size:1.8rem; color:#000; line-height:1.5; padding-bottom:20px; }
.acone div{ display:flex; width:100%; height:350px; overflow:hidden; justify-content:space-between;  flex-direction:row; cursor:pointer; }
.acone div i{ width:100%; height:100%; position: relative; display: block; overflow: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.acone div i img{ width:auto; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); max-width: 100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.acone div p{ width:100%; opacity:0; padding: 15px 0px 15px 25px; visibility:hidden; font-size:1.05rem; line-height:1.5; color:#000; display:none; }
.acone:hover div i{ width:50%; }
.acone:hover div p{ width:50%; opacity:1; visibility:visible; display:block;}

.swiperAb {
  --timeline-color: rgba(255,255,255,0.9);
  --timeline-height: 2px;
  --dot-size: 12px;
  position: relative;
  padding: 45px 0px 0px;
  height: 80px;
  width: 80%;
  margin-top: 50px;
  position: relative;
  display: flex;
}
.swiperAb::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--dot-size) / 2 + 23px);
  width: calc(100% - 100px); 
  height: var(--timeline-height);
  background: var(--timeline-color);
  transform: translateX(-50%);
}
.swiperAb .swiper-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  transition-timing-function: linear !important;
}
.swiperAb .swiper-slide {
  position: relative;
  text-align: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--dot-size) - 8px);
    width: 8px;
    height: 8px;
    background: var(--timeline-color);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
  }
}
.swiperAb .swiper-slide-thumb-active{
  color: #ffcd33 !important;
  font-size: 1.6rem !important;
  font-weight:600;
  &::before {
    width: var(--dot-size);
    height: var(--dot-size);
    background: #ffcd33;
    box-shadow: 0 0 12px rgba(255,255,255,0.4);
  }
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--dot-size) - 6px - 6px);
    width: calc(var(--dot-size) + 8px);
    height: calc(var(--dot-size) + 8px);
    border: 2px solid #ffcd33;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: ripple 1.5s infinite;
  }
}
@keyframes ripple {
  0% { opacity: 1; transform: translateX(-50%) scale(0.8) }
  100% { opacity: 0; transform: translateX(-50%) scale(2) }
}
.swiperAb .ac-swiper-button-prev{ position: absolute; left: 0; top:13px; width:40px; height:35px; border: 1px solid #FFF; background:url(../../uploads/svg-loaders/sing-left.svg) center center no-repeat; background-size:55%; z-index: 10; border-radius:5px; }
.swiperAb .ac-swiper-button-next{ position: absolute; right: 0; top:13px; width:40px; height:35px; border: 1px solid #FFF;  background:url(../../uploads/svg-loaders/sing-right.svg) center center no-repeat; background-size:55%; z-index: 10; border-radius:5px; }
.swiperAb .ac-swiper-button-prev:hover,.swiperAb .ac-swiper-button-next:hover{ background-color:#ffcd33!important; border: 1px solid #ffcd33!important;}
.sp-four{ width:100%; display:flex; flex-direction:column; }
.sp-four-show{ width:100%; display:flex; padding:20px 0px 130px; flex-direction:row; justify-content:flex-end; }
.sp-four-l{ width:670px; display:flex; justify-content:space-between; flex-direction:column; padding-right:30px; gap:18px; }
.sp-fone{ width:100%; height:150px; background-color:#f0f0f0; border-radius:90px 0px 0px 90px; padding:15px; display:flex; justify-content:center; align-items:center; flex-direction:row; }
.sp-fone i{ width:65px; height:65px; border-radius:360px; background-color:#ffcd33; font-size:2rem; font-weight:600; color:#000; line-height:1.5; display:flex; flex-shrink:0; font-style:normal; justify-content:center; align-items:center; }
.sp-fone div{ width:100%; display:flex; justify-content:flex-start; flex-direction:column; padding-left:20px; }
.sp-fone div h1{ font-size:1.125rem; color:#000; line-height:1.5; }
.sp-fone div p{ font-size:1rem; color:#474747; line-height:1.5; padding-top:15px; }
.sp-four-r{ width:50%; display:flex; position:relative;  }
.sp-four-r i{ width:100%; height: 100%; padding-top:90%; position: relative; display: block; overflow: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.sp-four-r i img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); max-width: 100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}

/*ipad*/
@media (max-width: 1230px) {
.sp-four-l{ width:500px; padding-right:20px; gap:15px; }
.sp-fone i{ width:60px; height:60px; }
.sp-fone div{ padding-left:15px; }
.sp-fone div h1{ font-size:1.1rem; }
.sp-fone div p{ font-size:0.95rem;}

}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.sp-two-l{ width:56%; }
.play{ left:calc(50% - 38px); top:calc(50% - 38px); width:75px; height:75px; }

.sp-two-r{ width:500px; }
.sp-two-r h1{ font-size:3.2rem; padding-top: 30px; background-size: 90%;}
.sp-two-r h2{ font-size:1.7rem; padding:20px 0px; letter-spacing:0px; }
.sp-two-r h3{ font-size:1.5rem;  }
.sp-two-r p{ width:85%; padding-top:35px; }

.swiperAa .swiper-slide {width:80%; }
.acone{ padding:20px;}
.acone h1{ font-size:1.6rem; }
.acone div{ height:300px; }
.swiperAb { width:90%;}

.sp-four-show{ padding:10px 15px 80px; flex-direction:column; }
.sp-four-l{ width:100%; padding-right:0px; gap:15px; }
.sp-fone{ height:auto; padding:15px; }
.sp-fone i{ width:45px; height:45px; font-size:1.8rem; }
.sp-fone div{ padding-left:15px; }
.sp-fone div p{ padding-top:10px; }
.sp-four-r{ width:100%; padding:15px 0px; }

}
/* xs */
@media (max-width: 767px) {
.spnav{ flex-direction:row; gap:10px; padding:25px 10px; }
.spnav a{ width:200px; height:45px; line-height: 1.2; font-size:1rem; letter-spacing:0px; padding:0px 10px;}
.sp-one{ padding:20px 0px;}
.page-title { margin-bottom:20px;}
.page-title h1 {font-size:1.45rem; margin-bottom:0px;}
.line { margin:15px 0;}
.line span {width:6px;height:6px;margin: 0 15px;}
.line::before,.line::after {max-width:50px;}
.sp-one-img{ flex-direction:column; padding:30px 0px;}
.sp-one-img i{ flex:1; }
.sp-one-img i img{ height:auto; }
.sp-two{ flex-direction:column-reverse; }
.sp-two-l{ padding:6% 0px 0px 8%; width:100%; }
.play{ left:calc(50% - 23px); top:calc(50% - 23px); width:55px; height:55px; }
.sp-two-r{ width:100%; padding:15px 15px 30px; }
.sp-two-r h1{ width:100%; font-size:2rem; padding:30px 0px 0px 10px; background-size:85%; }
.sp-two-r h2{ font-size:1.45rem; line-height:1.5; padding:15px 0px; letter-spacing:1px; }
.sp-two-r h3{ font-size:1.2rem; color:#040002; line-height:1.5;  }
.sp-two-r p{ width:100%; padding-top:30px; }
.sp-three{ margin:60px 0px; }
.mainbox{  min-height:300px; padding:60px 0px 40px;}
.swiperAa .swiper-slide {width:92%; }
.acone{ padding:15px; }
.acone h1{ font-size:1.2rem; padding-bottom:20px; }
.acone div{ height:200px; }
.acone div p{ padding:10px; font-size:1rem; line-height:1.3; }
.swiperAb {width:90%; margin-top:20px;}
.swiperAb .swiper-slide-thumb-active{font-size: 1.2rem !important;}
.swiperAb .ac-swiper-button-prev{width:30px;}
.swiperAb .ac-swiper-button-next{width:30px;}
.sp-four-show{ padding:10px 15px 80px; flex-direction:column; }
.sp-four-l{ width:100%; padding-right:0px; gap:15px; }
.sp-fone{ height:auto; padding:15px; }
.sp-fone i{ width:45px; height:45px; font-size:1.5rem; }
.sp-fone div{ padding-left:15px; }
.sp-fone div p{ padding-top:10px; }
.sp-four-r{ width:100%; padding:15px 0px; }

}
@media (max-width: 480px) {


}