/* #region home - start */

 .index-banner {
     position: relative;
     display: flex
 }

 .index-banner .swiper {
     width: 100%;
 }

 .index-banner-content {
     position: relative;
     width: 100%;
     min-height: 900px;
     display: flex
 }

 /* .index-banner-content::before {
   content: '';
   position: absolute;
   inset: 0; 
   background: url('../../images/hero-bg.png') center/cover no-repeat
 } */
 .index-banner-infos {
     position: relative;
     height: 100%;
 }

 .index-banner-infos .container {
     position: relative;
 }

 .index-banner-bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
 }

 .index-banner-bg video,
 .index-banner-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .index-banner-bg::after {
     content: '';
     position: absolute;
     inset: 0;

     background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, #000000 100%);
 }

 .index-banner-infos {
     position: relative;
     z-index: 2;
     display: flex;
     width: 100%
 }

 .index-banner-infos .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 .index-banner .index-banner-text,
 .index-banner .title {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 50px;
     line-height: 1.27;
 }

 .index-banner .index-banner-text {
     font-size: 36px;
 }


 .index-banner .text {
     font-size: 30px;
     font-weight: 300;
     line-height: 38px;
     max-width: 1336px;
     margin-top: 10px
 }

 .index-banner .btns {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     margin-top: 35px;
     width: 202px;
     height: 54px;
     justify-content: center;
     background: var(--white);
     color: #000;
     border-radius: 10px;
     font-family: 'Segoe UI', var(--font-body);
     font-weight: 600;
     font-size: 20px;
     transition: transform .3s, box-shadow .3s
 }

 .index-banner .btns:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(0, 238, 255, .25)
 }

 .index-banner .btns svg {
     width: 20px;
     height: 13px
 }

 /* ===== Advantage 对比区（组2267/2268 双斜切面板）===== */
 .home-advantage {
     padding: 110px 0 0
 }

 .home-know-bg .section-title,
 .home-advantage .section-title {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 48px;
     text-align: center
 }

 .home-know-bg .section-title {
     margin-bottom: 40px;
 }

 .advantage-panels {
     display: flex;
     justify-content: space-between;
     margin-top: 20px;
     margin-bottom: 80px;
 }

 .panel {
     position: relative;
     /*width: 690px;*/

     width: calc(50% - 10px);

     max-width: 100%;
     min-height: 583px;
     display: flex;
     flex-direction: column;
     flex-shrink: 0
 }

 /* 红色面板：CSS 重建（切图烘焙辉光失真）——路径48 渐变主形 + 路径47 错位描边 + 路径179 V辉光 */

 .panel-red {
     background: url(../../images/home-advantage-v2.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
 }

 .panel-cyan {
     background: url(../../images/home-advantage-s2.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
 }

 .panel-red .layer-main,
 .panel-red .layer-frame {
     position: absolute;
     height: 560px;
     transform: skewX(-8.5deg);
     transform-origin: top left;
     pointer-events: none
 }

 .panel-red .layer-main {
     left: 112px;
     top: 0;
     width: 716px;
     background: linear-gradient(180deg, rgba(121, 20, 20, .18) 0%, rgba(121, 20, 20, .24) 100%);
     border: 2px solid rgba(255, 0, 0, .4)
 }

 .panel-red .layer-main::after {
     content: '';
     position: absolute;
     left: 2%;
     top: -2%;
     width: 60%;
     height: 80%;
     background: radial-gradient(ellipse at 40% 25%, rgba(255, 49, 49, .06), transparent 65%)
 }

 .panel-red .layer-frame {
     left: 84px;
     top: 23px;
     width: 716px;
     border: 2px solid rgba(255, 0, 0, .4)
 }

 .panel-red .panel-body {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     padding: 100px 50px 0 0;
     --panel-padding: 10px;
 }

 /*.panel-red .panel-body>div:nth-child(2) {*/
 /*  padding-right: calc(var(--panel-padding) * 1);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(3) {*/
 /*  padding-right: calc(var(--panel-padding) * 2);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(4) {*/
 /*  padding-right: calc(var(--panel-padding) * 3);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(5) {*/
 /*  padding-right: calc(var(--panel-padding) * 4);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(6) {*/
 /*  padding-right: calc(var(--panel-padding) * 5);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(7) {*/
 /*  padding-right: calc(var(--panel-padding) * 6);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(8) {*/
 /*  padding-right: calc(var(--panel-padding) * 7);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(9) {*/
 /*  padding-right: calc(var(--panel-padding) * 8);*/
 /*}*/

 /*.panel-red .panel-body>div:nth-child(10) {*/
 /*  padding-right: calc(var(--panel-padding) * 9);*/
 /*}*/



 /* 青色面板：路径44 渐变底 + 路径45 描边 + S 装饰，负 margin 与红板交叠（993>910） */
 /*.panel-cyan {*/
 /*  margin-left: -83px;*/
 /*  margin-top: 28px*/
 /*}*/

 .panel-cyan .layer-bg,
 .panel-cyan .layer-border {
     position: absolute;
     width: 800px;
     max-width: 96%;
     height: 560px;
     opacity: .42;
     pointer-events: none
 }

 /* 同红面板，补回 op:0.4 */
 .panel-cyan .layer-bg {
     left: 0;
     top: 26px
 }

 .panel-cyan .layer-border {
     left: 30px;
     top: 0
 }

 .panel-cyan .deco-s {
     position: absolute;
     right: 117px;
     top: 130px;
     width: 304px;
     opacity: .3;
     mix-blend-mode: multiply;
     filter: saturate(.5);
     pointer-events: none
 }

 .panel-cyan .panel-body {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 104px 0 0 50px;
     --panel-padding: 10px;
 }

 /*.panel-cyan .panel-body>div:nth-last-child(2) {*/
 /*  padding-left: calc(var(--panel-padding) * 1);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(3) {*/
 /*  padding-left: calc(var(--panel-padding) * 2);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(4) {*/
 /*  padding-left: calc(var(--panel-padding) * 3);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(5) {*/
 /*  padding-left: calc(var(--panel-padding) * 4);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(6) {*/
 /*  padding-left: calc(var(--panel-padding) * 5);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(7) {*/
 /*  padding-left: calc(var(--panel-padding) * 6);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(8) {*/
 /*  padding-left: calc(var(--panel-padding) * 7);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(9) {*/
 /*  padding-left: calc(var(--panel-padding) * 8);*/
 /*}*/

 /*.panel-cyan .panel-body>div:nth-last-child(10) {*/
 /*  padding-left: calc(var(--panel-padding) * 9);*/
 /*}*/



 /* 面板角标（斜切 label） */
 .panel-label {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 274px;
     height: 52px;
     font-family: var(--font-alt);
     font-weight: 600;
     font-size: 34px;
     line-height: 1
 }

 .panel-red .panel-label {
     /*left: 4px;*/
     /*    bottom: 63px;*/

     left: 0;
     bottom: 25px;

     background: linear-gradient(90deg, #7B1515, #360404);
     /*transform: skewX(-14deg)*/
 }

 /*.panel-red .panel-label span {*/
 /*  transform: skewX(14deg)*/
 /*}*/

 .panel-cyan .panel-label {

     /*       right: 4px;
    top: 47px;*/

     right: 0px;
     top: 25px;

     background: linear-gradient(90deg, #0E5C69, #04295B);
     /*transform: skewX(-14deg)*/
 }

 /*.panel-cyan .panel-label span {*/
 /*  transform: skewX(14deg)*/
 /*}*/

 /* 面板内条目 */
 .panel-head {
     display: flex;
     align-items: center;
     gap: 14px;
     font-family: var(--font-body);
     font-weight: 500;
     font-size: 24px;
     color: var(--red);
     margin: 24px 0 16px
 }

 .panel-head:first-child {
     margin-top: 0
 }

 .panel-head img {
     width: 33px;
     height: 22px
 }

 .panel-cyan .panel-head {
     margin: 18px 0 12px
 }

 .panel-cyan .panel-head:first-child {
     margin-top: 0
 }

 .panel-item {
     display: flex;
     align-items: center;
     gap: 16px;
     font-size: 16px;
     font-weight: 300;
     line-height: 21px;
     min-height: 38px
 }

 .panel-item img {
     width: 20px;
     height: 20px;
     flex-shrink: 0
 }

 .panel-red .panel-item {
     flex-direction: row
 }

 /* ===== Solutions（.home-solution，3 组全出血轮播）===== */
 .home-solution {
     padding: 100px 0 0
 }

 .solution-row {
     margin-top: 50px
 }

 .solution-row:first-of-type {
     margin-top: 95px
 }

 .solution-row-head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px
 }

 .solution-row-info {
     display: flex;
     flex-direction: column;
     gap: 0
 }

 .solution-row-info h3 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 30px;
     text-transform: capitalize;
 }

 .solution-row-info h3::first-letter {
     text-transform: uppercase;
 }

 .solution-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 16px
 }

 .solution-tags .tag {
     display: inline-flex;
     align-items: center;
     height: 30px;
     padding: 0 22px;
     border-radius: 26px;
     background: var(--pill-bg);
     border: 1px solid var(--cyan-deep);
     color: var(--cyan);
     font-size: 15px;
     font-weight: 500;
     letter-spacing: .5px;
     /*text-transform: uppercase*/
 }

 .solution-row-info .desc {
     margin-top: 15px;
     font-size: 18px;
     font-weight: 300;
     text-transform: lowercase;
 }

 .solution-row-info .desc::first-letter {
     text-transform: uppercase;
 }

 .read-more {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 11px;
     width: 173px;
     height: 40px;
     flex-shrink: 0;
     border-radius: 26px;
     background: var(--pill-bg);
     border: 1px solid var(--cyan-deep);
     color: var(--cyan);
     font-size: 16px;
     font-weight: 500;
     text-transform: uppercase;
     transition: background .3s
 }

 .read-more:hover {
     background: rgba(0, 216, 255, .3)
 }

 .read-more svg {
     width: 20px;
     height: 13px
 }

 /* 轮播区：从版心左缘向右出血到视口边（负 margin + overflow:hidden），右侧渐隐 */
 .solution-slider {
     position: relative;
     margin-top: 45px;
     overflow: hidden;
     /*margin-right: calc((100vw - min(var(--max), 92vw)) / -2)*/
 }

 .solution-slider .swiper {
     overflow: visible
 }

 /*.solution-slider::after {*/
 /*  content: '';*/
 /*  position: absolute;*/
 /*  top: 0;*/
 /*  bottom: 0;*/
 /*  right: 0;*/
 /*  width: calc((100vw - min(var(--max), 92vw))/2 + 110px);*/
 /*  background: linear-gradient(90deg, rgba(2, 9, 10, 0) 0%, rgba(2, 9, 10, .85) 55%, var(--bg) 100%);*/
 /*  pointer-events: none;*/
 /*  z-index: 5*/
 /*}*/

 .solution-slider .swiper-slide {
     width: 338px;
     height: 596px;
     border-radius: var(--card-r);
     position: relative;
     overflow: hidden
 }

 .solution-slider.landscape .swiper-slide {
     width: 630px;
     height: 344px
 }

 .solution-slide-img {
     position: absolute;
     inset: 0
 }

 .solution-slide-img img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .solution-slide-mask {
     position: absolute;
     inset: 0;
     border-radius: var(--card-r);
     background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .45) 48.5%, #000 100%)
 }

 .solution-slide-play {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 60px;
     height: 60px;
     transform: translate(-50%, -50%);
     z-index: 3;
     transition: opacity .3s
 }

 /* 视频层通用样式在 site-common.css；此处仅本页卡片的 cover 裁切与遮罩 */
 .solution-slider:not(.landscape) .video-embed {
     width: 316%;
     left: -108%
 }

 /* 竖版卡 338x596：放大至覆盖 */
 .solution-slider.landscape .video-embed {
     height: 106%;
     top: -3%
 }

 /* 横版卡 630x344 ≈ 16:9，微裁 */
 .swiper-slide.playing .solution-slide-play {
     opacity: 0
 }

 .swiper-slide.playing .solution-slide-mask {
     z-index: 3;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .85) 100%)
 }

 .solution-slide-cap {
     position: absolute;
     left: 30px;
     bottom: 37px;
     z-index: 3;
     display: flex;
     flex-direction: column;
     gap: 4px
 }

 .solution-slide-cap .cat {
     color: var(--cyan);
     font-size: 14px;
     font-weight: 400;
     letter-spacing: .5px;
     text-transform: uppercase
 }

 .solution-slide-cap .tit {
     font-size: 18px;
     font-weight: 600
 }

 /* 轮播箭头（组1983：暗圆+青色箭头），左右压在卡片上 */
 .mod-arrow .mod-prev,
 .mod-arrow .mod-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 60px;
     height: 60px;
     cursor: pointer;
     z-index: 6;
     transition: opacity .3s
 }

 .mod-arrow .mod-prev {
     left: -2px
 }

 .mod-arrow .mod-next {
     right: -2px;
     /*right: calc((100vw - min(var(--max), 92vw))/2)*/
 }

 .mod-arrow .mod-next img {
     transform: scaleX(-1)
 }

 .mod-arrow .swiper-button-disabled {
     opacity: .35
 }

 /* ===== 3 Key Commitments（矩形2458 渐变容器 + 蒙版组22 纹理）===== */
 .home-commit {
     padding: 111px 0 0
 }

 .commit-wrap {
     position: relative;
     border-radius: 20px;
     padding: 64px 50px 88px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     /* background: linear-gradient(180deg, rgba(5, 76, 107, .96), rgba(1, 8, 12, .96)); */
     box-shadow: 0 0 30px rgba(0, 0, 0, .23)
 }

 .home-commit .container {
     background-size: cover;
     background-position: center;
 }

 .commit-wrap::before {
     content: '';
     position: absolute;
     left: -0;
     top: 0;
     bottom: 0;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     width: 100%;
     height: 100%;
 }

 .commit-wrap h2 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 50px;
     text-transform: lowercase;
     text-align: center;
     position: relative
 }

 .commit-wrap h2::first-letter {
     text-transform: uppercase;
 }

 .commit-wrap .sub {
     margin-top: 18px;
     font-size: 24px;
     font-weight: 400;
     line-height: 34.5px;
     text-align: center;
     position: relative
 }

 .commit-cards {
     display: flex;
     justify-content: center;
     gap: 29px;
     margin-top: 56px;
     width: 100%;
     position: relative
 }

 .commit-card {
     display: flex;
     flex-direction: column;
     width: 500px;
     max-width: 100%;
     min-height: 165px;
     padding: 29px 26px;
     background: #122D34;
     border: 1px solid #707070;
     border-radius: 31px
 }

 .commit-card img {
     width: 55px;
     height: 55px
 }

 .commit-card p {
     margin-top: 20px;
     font-size: 18px;
     font-weight: 500;
     line-height: 30px;
     max-width: 438px;
     text-transform: capitalize
 }

 /* Footer 公共样式在 site-common.css，首页仅有上边距差异 */
 /* .site-footer {
   margin-top: 110px
 } */

 /* ===== Responsive ===== */
 @media (max-width:1680px) {
     .index-banner .title {
         font-size: clamp(44px, 3.65vw, 70px)
     }

     .index-banner .index-banner-text {
         font-size: clamp(28px, 3.65vw, 50px)
     }

     .index-banner .text {
         font-size: clamp(20px, 1.56vw, 30px);
         line-height: 1.27
     }

     .home-know-bg .section-title,
     .home-advantage .section-title {
         font-size: clamp(30px, 2.5vw, 48px)
     }
 }

 @media (max-width:1500px) {
     .commit-wrap {
         padding: 64px 20px 88px;
     }
 }

 @media (max-width:1200px) {
     .index-banner-content {
         min-height: 720px
     }

     .index-banner-infos .container {
         padding-bottom: 70px
     }

     .home-advantage {
         padding-top: 80px
     }

     /*.home-solution {*/
     /*  padding-top: 130px*/
     /*}*/

     /*.solution-row {*/
     /*  margin-top: 70px*/
     /*}*/

     .commit-wrap h2 {
         font-size: 38px
     }

     .commit-wrap .sub {
         font-size: 19px
     }

     .commit-cards {
         gap: 18px
     }

     /*.commit-card p {*/
     /*  font-size: 19px*/
     /*}*/
 }

 @media (max-width:992px) {

     /* 对比区：按手机端画稿上下堆叠（Frustrations 上 / AI VCS 下） */
     .advantage-panels {
         flex-direction: column;
         align-items: center;
         gap: 10px
     }

     .panel {
         width: min(700px, 100%);
         min-height: 0;
         padding-bottom: 64px
     }

     .panel-red .layer-main {
         left: 13%;
         width: 84%;
         height: calc(100% - 23px)
     }

     .panel-red .layer-frame {
         left: 9%;
         top: 23px;
         width: 84%;
         height: calc(100% - 23px)
     }

     .panel-red .panel-body {
         padding: 75px 24px 0 48px
     }

     .panel-item {
         min-height: 40px;
     }

     .panel-red .panel-label {
         bottom: auto;
         top: 0;
         left: 0;
     }

     .panel-cyan .panel-label {
         right: auto;
         left: 40px;
         top: 0;
     }

     .panel-cyan {
         margin: 0
     }

     .panel-cyan .layer-bg,
     .panel-cyan .layer-border {
         height: 100%;
         width: 96%
     }

     .panel-cyan .panel-body {
         padding: 88px 0 0 48px
     }

     .panel-cyan .deco-s {
         right: 30px;
         top: 110px;
         width: 220px
     }

     .panel-label {
         width: 220px;
         height: 46px;
         font-size: 26px
     }

     .solution-row-head {
         flex-direction: column;
         align-items: flex-start
     }

     .commit-cards {
         flex-direction: column;
         align-items: center
     }
 }

 @media (max-width:768px) {

     .advantage-panels {
         margin-top: 30px;
     }

     .panel-cyan .panel-body,
     .panel-red .panel-body {
         --panel-padding: 0;
     }

     .panel-cyan,
     .panel-red {
         background-size: cover;
     }

     .index-banner-content {
         min-height: 560px
     }

     .index-banner-infos .container {
         padding-bottom: 56px
     }

     .index-banner .btns {
         margin-top: 34px;
         width: 176px;
         height: 48px;
         font-size: 17px
     }

     .home-advantage {
         padding-top: 60px
     }

     /*.advantage-panels {*/
     /*  margin-top: 48px*/
     /*}*/

     .panel-red .panel-body {
         padding: 64px 0 0 30px
     }

     .panel-cyan .panel-body {
         padding: 64px 30px 0 30px
     }

     .panel-head {
         font-size: 19px
     }

     .panel-item {
         font-size: 15px;
         gap: 10px;
         min-height: 42px
     }

     .home-solution {
         padding-top: 90px
     }

     /*.solution-row {*/
     /*  margin-top: 56px*/
     /*}*/

     .mod-overview .texts {
         font-size: 17px;
     }

     .solution-row-info h3 {
         font-size: 24px
     }

     .solution-row-info .desc {
         font-size: 15px
     }

     .solution-slider .swiper-slide {
         width: 250px;
         height: 441px
     }

     .solution-slider.landscape .swiper-slide {
         width: 440px;
         height: 240px
     }

     .solution-slide-cap {
         left: 20px;
         bottom: 22px
     }

     .solution-slide-play {
         width: 46px;
         height: 46px
     }

     .mod-arrow .mod-prev,
     .mod-arrow .mod-next {
         width: 46px;
         height: 46px
     }

     /*.mod-arrow .mod-next {*/
     /*  right: 6px*/
     /*}*/

     .home-commit {
         padding-top: 70px
     }

     .commit-wrap {
         padding: 44px 16px 56px;
         border-radius: 14px
     }

     .commit-wrap h2 {
         font-size: 28px
     }

     .commit-wrap .sub {
         font-size: 15px;
         line-height: 1.5
     }

     .commit-card {
         padding: 22px;
         border-radius: 20px;
         min-height: 0
     }

     /*.commit-card img {*/
     /*  width: 54px;*/
     /*  height: 54px*/
     /*}*/

     .commit-card p {
         font-size: 16px;
         line-height: 1.5;
         margin-top: 16px
     }

     /* .site-footer {
     margin-top: 70px
   } */
 }

 @media (max-width:560px) {
     .solution-slider.landscape .swiper-slide {
         width: 320px;
         height: 175px
     }

     .solution-tags .tag {
         height: 26px;
         padding: 0 14px;
         font-size: 12px
     }

     .read-more {
         width: 150px;
         height: 36px;
         font-size: 14px
     }
 }


 /* #endregion home - end  */


 /* #region about - start */
 .about-story {
     padding: 108px 0 0;
     background-repeat: no-repeat;
     background-image: url(../../images/about/story-deco.png);
     background-size: 50% contain;
     background-position: left bottom;
 }

 .about-story .flexs {
     display: flex;
     gap: 60px
 }

 .story-left {
     width: 430px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column
 }

 .story-left h2 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 48px;
     text-transform: lowercase;
 }

 .story-left h2::first-letter {
     text-transform: uppercase;
 }

 .story-left .sub {
     margin-top: 22px;
     font-family: var(--font-display);
     font-size: 30px;
     line-height: 1.35;
 }

 .story-left .deco {
     margin-top: 30px;
     margin-left: calc((100vw - min(var(--max), 92vw)) / -2);
     width: 620px;
     max-width: 100%;
     opacity: .9
 }

 .story-right {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 8px;
     font-size: 18px;
     font-weight: 400;
     line-height: 26px;
     padding-top: 4px
 }
 
  .story-right h2{
      margin-bottom: 6px;
      margin-top: 25px;
  }
  
  .story-right h2:first-child{
      margin-top: 0;
  }

 .story-right .quote {
     font-style: italic;
     font-weight: 700;
     padding: 8px 0 8px 12px
 }

 .story-right strong {
     font-weight: 700
 }

 /* ===== Team（左文案 / 右斜切照片条）===== */
 .about-team {
     padding: 130px 0 0;
     position: relative;
 }

 .about-team::before {
     content: 'TEAM';
     position: absolute;
     left: -30px;
     bottom: -40px;
     font-family: var(--font-display);
     font-size: 230px;
     font-weight: 500;
     color: rgba(255, 255, 255, .04);
     pointer-events: none;
     letter-spacing: 10px
 }

 .about-team .flexs {
     display: flex;
     gap: 40px
 }

 .team-left {
     width: 470px;
     flex-shrink: 0;
 }

 .team-left h2 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 48px;
     text-transform: lowercase;
 }

 .team-left h2::first-letter {
     text-transform: uppercase;
 }

 .team-left .sub {
     margin-top: 15px;
     font-family: var(--font-display);
     font-size: 20px;
     line-height: 1.6;
     max-width: 460px
 }

 /* .team-left::after {
   content: '';
   display: block;
   margin-top: 48px;
   width: 88%;
   height: 14px;
   background: var(--cyan);
   transform: skewX(-30deg)
 } */

 .team-right {
     flex: 1;
     min-width: 0
 }

 .team-right img {
     height: auto
 }

 /* ===== Service Procedure（整体合成图 + 隐藏标题）===== */
 .about-procedure {
     padding: 100px 0;
 }

 .about-procedure img {
     width: 100%;
     height: auto;
     display: block
 }

 /* ===== Responsive ===== */
 @media (max-width:1200px) {
     .about-story {
         padding-top: 80px
     }

     .story-left {
         width: 340px
     }

     .story-left .sub {
         font-size: 24px
     }

     .about-team {
         padding-top: 90px
     }

     .team-left {
         width: 340px
     }

     .about-procedure {
         padding: 80px 0;
     }
 }

 @media (max-width:992px) {

     .about-story .flexs,
     .about-team .flexs {
         flex-direction: column
     }

     .story-left,
     .team-left {
         width: 100%
     }

     .story-left .deco {
         margin-left: 0;
         width: min(480px, 90%)
     }

     .team-left .sub {
         margin-top: 24px
     }

     .team-left::after {
         margin-top: 24px;
         width: 60%
     }

     .about-team::before {
         font-size: 120px
     }
 }

 @media (max-width:768px) {
     .about-story {
         padding-top: 56px
     }

     .story-left h2,
     .team-left h2 {
         font-size: 30px
     }

     .story-left .sub {
         font-size: 19px
     }

     .story-right {
         font-size: 15px;
         line-height: 1.55; 
     }

     .about-team {
         padding-top: 60px
     }

     .about-procedure {
         padding: 50px 0;
     }
 }

 /* #endregion about - end  */


 /* #region blog - start */
 .blog-main {
     padding: 110px 0;
 }

 /* 头条卡：左大图 + 右内容面板 */
 .blog-feat {
     display: flex;
     align-items: stretch
 }

 .blog-feat .pic {
     width: 770px;
     max-width: 52%;
     flex-shrink: 0;
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     z-index: 2
 }

 .blog-feat .pic img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .blog-feat .body {
     flex: 1;
     background: var(--panel);
     border-radius: 10px;
     margin-left: -18px;
     padding: 96px 40px 40px 66px;
     display: flex;
     flex-direction: column;
     align-items: flex-start
 }

 .blog-date {
     font-family: var(--font-alt);
     font-size: 18px;
     color: #B2B2B2
 }

 .blog-feat h2 {
     margin-top: 14px;
     font-size: 24px;
     font-weight: 500;
     line-height: 33px;
     max-width: 770px;
     transition: .2s;
 }

 .blog-feat h2:hover {
     color: var(--cyan);
 }

 .blog-feat .txt {
     margin-top: 26px;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     color: rgba(255, 255, 255, .92);
     max-width: 770px
 }

 .learn-more {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 40px;
     color: var(--cyan);
     font-size: 20px;
     font-weight: 600;
     transition: gap .3s
 }

 .learn-more:hover {
     gap: 16px
 }

 .learn-more svg {
     width: 20px;
     height: 13px
 }

 /* 3x2 网格卡 */
 .blog-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 32px 24px;
     margin-top: 70px
 }

 .blog-card {
     width: calc((100% - 48px)/3);
     min-width: 300px;
     background: var(--panel);
     border: 1px solid #707070;
     border-radius: 10px;
     overflow: hidden;
     display: flex;
     flex-direction: column
 }

 .blog-card .pic {
     height: 290px;
     overflow: hidden
 }

 .blog-card .pic img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s
 }

 .blog-card:hover .pic img {
     transform: scale(1.05)
 }

 .blog-card .body {
     padding: 28px 33px 34px;
     display: flex;
     flex-direction: column;
     align-items: flex-start
 }

 .blog-card h3 {
     margin-top: 14px;
     font-size: 20px;
     font-weight: 500;
     line-height: 28px
 }

 .blog-card .learn-more {
     margin-top: 28px
 }

 @media (max-width:1400px) {
     .blog-grid {
         justify-content: center
     }
 }

 @media (max-width:1200px) {
     .blog-main {
         padding: 80px 0
     }
 }

 @media (max-width:992px) {
     .blog-feat {
         flex-direction: column
     }

     .blog-feat .pic {
         width: 100%;
         max-width: 100%
     }

     .blog-feat .body {
         margin-left: 0;
         margin-top: -14px;
         padding: 44px 28px 32px
     }
 }

 @media (max-width:768px) {
     .blog-main {
         padding: 56px 0
     }

     .blog-feat h2 {
         font-size: 19px;
         line-height: 1.45
     }

     .blog-grid {
         margin-top: 44px;
         gap: 20px
     }

     .blog-card .pic {
         height: auto
     }

     .blog-card .body {
         padding: 20px 22px 26px
     }

     .learn-more {
         font-size: 17px;
         margin-top: 24px
     }
 }

 .blogd-main {
     padding: 110px 0
 }

 .blogd-list {
     display: flex;
     flex-direction: column;
     gap: 30px
 }

 .blogd-row {
     position: relative;
     display: flex;
     gap: 47px;
     background: var(--panel);
     border: 1px solid #707070;
     border-radius: 10px;
     padding: 34px 60px 33px 26px;
     min-height: 447px
 }

 .blogd-row .pic {
     width: 739px;
     max-width: 48%;
     flex-shrink: 0;
     border-radius: 10px;
     overflow: hidden
 }

 .blogd-row .pic img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s
 }

 .blogd-row:hover .pic img {
     transform: scale(1.04)
 }

 .blogd-row .body {
     flex: 1;
     padding-top: 27px;
     display: flex;
     flex-direction: column;
     align-items: flex-start
 }

 .blogd-row h2 {
     font-size: 24px;
     font-weight: 500;
     line-height: 33px;
     max-width: 597px
 }

 .blogd-row .txt {
     margin-top: 26px;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     color: rgba(255, 255, 255, .92);
     max-width: 737px
 }

 .blogd-row .date {
     position: absolute;
     right: 60px;
     top: 33px;
     display: flex;
     flex-direction: column;
     align-items: flex-end
 }

 .blogd-row .date .ym {
     font-family: var(--font-alt);
     font-size: 16px;
     color: #B2B2B2
 }

 .blogd-row .date .d {
     font-family: var(--font-display);
     font-size: 48px;
     line-height: 1.1
 }

 .learn-more {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 36px;
     color: var(--cyan);
     font-size: 20px;
     font-weight: 600;
     transition: gap .3s
 }

 .learn-more:hover {
     gap: 16px
 }

 .learn-more svg {
     width: 20px;
     height: 13px
 }

 @media (max-width:1200px) {
     .blogd-main {
         padding: 80px 0
     }

     .blogd-row {
         padding: 24px 30px 24px 20px;
         gap: 28px
     }

     .blogd-row .date {
         right: 30px;
         top: 24px
     }
 }

 @media (max-width:992px) {
     .blogd-row {
         flex-direction: column;
         min-height: 0
     }

     .blogd-row .pic {
         width: 100%;
         max-width: 100%
     }

     .blogd-row .body {
         padding-top: 0
     }

     .blogd-row .date {
         position: static;
         flex-direction: row;
         align-items: baseline;
         gap: 10px;
         order: -1;
         margin-bottom: 12px
     }

     .blogd-row .date .d {
         font-size: 30px
     }
 }

 @media (max-width:768px) {
     .blogd-main {
         padding: 56px 0
     }

     .blogd-row h2 {
         font-size: 19px;
         line-height: 1.45
     }

     .blogd-row .txt {
         font-size: 14px
     }

     .learn-more {
         font-size: 17px;
         margin-top: 22px
     }
 }


 /* #endregion blog - end  */


 /* #region  contact - start */
 .contact-main {
     position: relative;
     padding: 106px 0 120px;
     overflow: hidden
 }

 /* 左右两团青色辉光（减去1/减去2，#00D8FF op .2 → 双层叠加） */
 .contact-main::before {
     content: '';
     position: absolute;
     left: -140px;
     top: 0;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 216, 255, .14), transparent 70%);
     pointer-events: none
 }

 .contact-main::after {
     content: '';
     position: absolute;
     right: -160px;
     bottom: -140px;
     width: 480px;
     height: 480px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 216, 255, .14), transparent 70%);
     pointer-events: none
 }

 .contact-flex {
     display: flex;
     gap: 60px;
     align-items: flex-start;
     justify-content: space-between
 }

 .contact-left {
     flex: 1;
     max-width: 750px;
     display: flex;
     flex-direction: column
 }

 .contact-left h2 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 42px;
     line-height: 1.35;
     /*text-transform: lowercase;*/
     max-width: 600px
 }

 /*.contact-left h2::first-letter {*/
 /*    text-transform: uppercase;*/
 /*}*/

 .contact-info {
     display: flex;
     flex-wrap: wrap;
     margin-top: 65px;
     gap: 40px 0
 }

 .contact-info .item {
     width: 50%;
     min-width: 280px;
     display: flex;
     gap: 16px
 }

 .contact-info .item img {
     width: 22px;
     height: 22px;
     margin-top: 4px;
     flex-shrink: 0
 }

 .contact-info .item h5 {
     font-size: 24px;
     font-weight: 600
 }

 .contact-info .item p {
     margin-top: 14px;
     font-size: 20px;
     font-weight: 300;
     transition: .2s;
 }

 .contact-info .item p:hover {
     color: var(--cyan);
 }

 .contact-left hr {
     margin-top: 56px;
     border: 0;
     border-top: 1px solid rgba(255, 255, 255, .25)
 }

 .contact-left .follow {
     margin-top: 44px;
     font-size: 30px;
     font-weight: 600;
     text-transform: capitalize
 }

 .contact-left .socials {
     display: flex;
     gap: 8px;
     margin-top: 26px
 }

 .contact-left .socials a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 39px;
     height: 39px;
     border-radius: 4px;
     background: #1A525D;
     transition: background .3s
 }

 .contact-left .socials a:hover {
     background: #00A8BD
 }

 .contact-left .socials img {
     width: 18px;
     height: 16px;
     object-fit: contain
 }

 /* 右侧表单面板（矩形2585 768x567 #1C1C1C r10） */
 .contact-form {
     width: 768px;
     max-width: 100%;
     flex-shrink: 0;
     background: var(--panel);
     border-radius: 10px;
     padding: 44px 48px 48px;
     display: flex;
     flex-direction: column;
     align-items: center
 }

 .contact-form .logo {
     width: 180px
 }

 .contact-form .tip {
     margin-top: 22px;
     font-size: 18px;
     font-weight: 400;
     text-align: center;
     line-height: 26px;
     max-width: 540px
 }

 .contact-form form {
     width: 100%;
     margin-top: 30px;
     display: flex;
     flex-wrap: wrap;
     gap: 19px 16px
 }

 .contact-form input {
     width: calc(50% - 8px);
     height: 42px;
     background: var(--white);
     border: 1px solid #707070;
     border-radius: 2px;
     padding: 0 14px;
     font-size: 14px;
     color: #333;
     outline: none
 }

 .contact-form input.full {
     width: 100%
 }

 .contact-form input:focus {
     border-color: var(--cyan-deep)
 }

 .contact-form .submit {
     width: 100%;
     height: 48px;
     margin-top: 14px;
     border: 0;
     border-radius: 2px;
     background: var(--cyan);
     color: #000;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     transition: transform .3s
 }

 .contact-form .submit:hover {
     transform: translateY(-2px)
 }

 .contact-form .submit svg {
     width: 18px;
     height: 12px
 }

 @media (max-width:1400px) {
     .contact-form {
         width: 620px
     }
 }

 @media (max-width:1200px) {
     .contact-main {
         padding: 80px 0 90px
     }

     .contact-flex {
         flex-direction: column
     }

     .contact-form {
         width: 100%
     }
 }

 @media (max-width:768px) {
     .contact-main {
         padding: 56px 0 64px
     }

     .contact-left h2 {
         font-size: 30px
     }

     .contact-info {
         margin-top: 40px;
         gap: 24px 0
     }

     .contact-info .item {
         width: 100%
     }

     .contact-info .item h5 {
         font-size: 20px
     }

     .contact-info .item p {
         font-size: 16px;
         margin-top: 8px
     }

     .contact-left hr {
         margin-top: 36px
     }

     .contact-left .follow {
         margin-top: 26px;
         font-size: 24px
     }

     .contact-form {
         padding: 28px 20px 32px
     }

     .contact-form input {
         width: 100%
     }
 }

 /* #endregion  contact - end  */


 /* #region  contact - start */
 /* ===== 工具行（搜索）===== */
 .case-main {
     padding: 108px 0
 }

 .case-toolbar {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 15px;
     /*margin-top: 15px;*/
 }

 .case-search {
     display: flex;
     align-items: center;
     width: 220px;
     height: 38px;
     /*background: #0E1415;*/
     background: #262829;
     border: 2px solid #3a4143;
     border-radius: 2px;
     padding: 0 6px
 }

 .case-search input {
     flex: 1;
     min-width: 0;
     background: none;
     border: 0;
     outline: none;
     color: var(--white);
     font-size: 13px
 }

 .case-search button {
     background: rgba(0, 216, 255, 0.38);
     border: none;
     padding: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border-radius: 2px;
     transition: .3s;
 }

 .case-search button:hover {
     opacity: .8;
 }

 .case-search svg {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
     opacity: .8
 }

 .case-filter-card {
     background: #262829;
     padding-bottom: 15px;
     margin-top: 13px;
     border-radius: 2px;
     overflow: hidden;
 }

 /* ===== 布局：侧栏 + 网格 ===== */
 .case-layout {
     display: flex;
     gap: 40px;
     align-items: flex-start
 }


 .case-filter {
     width: 276px;
     flex-shrink: 0;
     overflow: hidden;
 }

 .case-filter .head {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 22px;
     background: linear-gradient(90deg, #0E5C69, #123B44 70%, #262829);
     font-family: var(--font-display);
     font-size: 28px;
     text-transform: capitalize
 }

 .case-filter .head svg {
     width: 22px;
     height: 22px
 }

 .case-filter .group-tit {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 13px 22px;
     font-size: 18px;
     font-weight: 700;
     cursor: pointer;
     transition: .3s;
 }

 .case-filter .group-tit:hover,
 .case-filter .group-tit.on {
     background: #313334;
     color: var(--cyan)
 }

 .case-filter ul {
     padding: 4px 0 12px
 }

 .case-filter li {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 7px 34px;
     font-size: 16px;
     font-weight: 300
 }

 .case-filter li::before {
     content: '';
     width: 13px;
     height: 13px;
     background: #3c4243;
     border: 1px solid #5a6163;
     flex-shrink: 0
 }

 .case-filter li a {
     transition: .2s;
 }

 .case-filter li a:hover {
     color: var(--cyan);
 }

 .case-grid-wrap {
     flex: 1;
     min-width: 0
 }

 .case-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 26px 20px
 }

 .case-card {
     position: relative;
     width: 281px;
     height: 430px;
     border-radius: 10px;
     overflow: hidden;
     flex-shrink: 0
 }

 .case-card>img.photo {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .case-card .tag {
     position: absolute;
     left: 20px;
     top: 20px;
     z-index: 3;
     padding: 5px 18px;
     border-radius: 16px;
     background: rgba(255, 255, 255, .5);
     border: 1px solid #fff;
     color: #02090A;
     font-size: 15px;
     font-weight: 400;
     letter-spacing: .5px
 }

 .case-card .play {
     position: absolute;
     left: 50%;
     top: 38%;
     width: 60px;
     height: 60px;
     transform: translate(-50%, -50%);
     z-index: 3
 }

 .case-card .bars {
     position: absolute;
     left: 10px;
     bottom: 12px;
     width: calc(100% - 20px);
     z-index: 3;
     display: flex;
     flex-direction: column;
     border-radius: 10px;
     padding: 0 18px;

     background: rgba(45, 45, 45, 0.38);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     /* 兼容 Safari */

 }

 .case-card .bar1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 14px;
     padding: 12px 0;
     /* background: rgba(43, 32, 22, .82); */
     font-size: 16px;
     font-weight: 500
 }

 /* Keep Portfolio titles on one line whenever possible. Long titles are
    truncated instead of pushing the price or card overlay onto a second row. */
 .case-card .bar1 > span:first-child {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap
 }

 .case-card .bar1 .price {
     flex: 0 0 auto;
     white-space: nowrap;
     font-size: 22px;
     color: var(--cyan)
 }

 .case-card .bar2 {
     display: flex;
     gap: 0;
     padding: 12px 0 16px 0;
     /* background: rgba(30, 22, 15, .88); */
     font-size: 14px;
     font-weight: 300;
     white-space: nowrap;
     border-top: 1px solid rgba(255, 255, 255, .38);
 }

 .case-card .bar2 span+span::before {
     content: '|';
     margin: 0 8px;
     opacity: .5
 }

 /* 视频层裁切（卡片 306x472 竖版） */
 .case-card .video-embed {
     width: 316%;
     left: -108%
 }

 .case-card.playing .play {
     opacity: 0
 }

 /* On desktop the Portfolio result area is three equal columns. The old
    fixed 281px card width left a large unused strip on the right. */
 @media (min-width:993px) {
     .case-grid {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 26px 20px;
         width: 100%
     }

     .case-card {
         width: 100%;
         height: auto;
         aspect-ratio: 281 / 430;
         min-width: 0
     }
 }

 /* ===== Responsive ===== */
 @media (max-width:1400px) {
     .case-grid {
         justify-content: center
     }
 }

 @media (max-width:1200px) {
     .case-main {
         padding: 80px 0
     }

     .case-layout {
         gap: 24px
     }
 }

 @media (max-width:992px) {
     .case-layout {
         flex-direction: column
     }

     .case-filter {
         width: 100%
     }

     .case-grid {
         justify-content: center
     }
 }

 @media (max-width:768px) {
     .case-main {
         padding: 56px 0
     }

     .case-card {
         width: min(306px, 86vw)
     }

     .case-toolbar {
         display: flex;
         justify-content: center;
     }
 }

 /* #endregion  contact - end  */


 /* #region  service - start */

 .spd-main {
     padding: 108px 0
 }

 .spd-card {
     display: flex;
     background: url(../../images/spd-card-bg.png) var(--panel) no-repeat;
     background-size: 50% contain;
     background-position: left bottom;
     border: 1px solid #707070;
     border-radius: 4px;
     min-height: 610px
 }

 .spd-left {
     width: 50%;
     padding: 78px 60px 60px 62px;
     display: flex;
     flex-direction: column;
     position: relative
 }

 .spd-left::after {
     content: '';
     position: absolute;
     right: 0;
     top: 64px;
     bottom: 64px;
     width: 1px;
     background: rgba(112, 112, 112, .45)
 }

 .spd-left .icon {
     width: 86px;
     height: 86px;
     border-radius: 10px
 }

 .spd-left h2 {
     margin-top: 24px;
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 40px;
     text-transform: lowercase;
 }

 .spd-left h2::first-letter {
     text-transform: uppercase;
 }

 .spd-left .desc {
     margin-top: 24px;
     font-size: 26px;
     font-weight: 300;
     line-height: 36px;
     max-width: 560px
 }

 .spd-price-row {
     /*display: flex;*/
     align-items: flex-end;
     gap: 50px;
     margin-top: auto;
     padding-top: 20px;
 }

 /*.spd-price {*/
 /*    display: flex;*/
 /*    align-items: flex-start;*/
 /*    gap: 12px*/
 /*}*/

 .spd-price .cur {
     font-size: 90px;
     font-weight: 500;
     line-height: 1
 }

 .spd-price .num {
     font-family: var(--font-display);
     font-size: 50px;
     color: var(--cyan);
     line-height: 1.1;
     padding-top: 8px;
     font-weight: 500;
     display: flex;
    align-items: end;
 }

.spd-price .num i{
    font-size: 22px;
    color: #fff;
        font-style: normal;
            position: relative;
    top: -7px;
    margin-left: 5px;
}

 .spd-price .cap-top{
     margin-bottom: 2px;
     font-size: 22px;
     font-weight: 500;
 }
 .spd-price .cap {
     font-size: 18px;
     font-weight: 300;
     margin-top: 6px;
     display: flex;
     flex-wrap: wrap;
     border-top: 1px solid  rgba(112, 112, 112, .6);
     padding-top: 2px;
     
 }
  .spd-price .cap li{
      margin-top: 6px;
      padding-right: 10px;
      margin-right: 10px;
      position: relative;
  }
  
    .spd-price .cap li:last-child{
        margin-right: 0;
        padding-right: 0;
    }

.spd-price .cap li::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: rgba(112, 112, 112, .6);
}
.spd-price .cap li:last-child::after{
    display: none;
}

 .spd-price .col {
     display: flex;
     flex-direction: column
 }

 .spd-deposit {
     display: flex;
     flex-direction: column;
     gap: 2px;
     position: relative;
     padding-left: 50px
 }

 .spd-deposit::before {
     content: '';
     position: absolute;
     left: 0;
     top: -10px;
     bottom: -6px;
     width: 2px;
     background-image: linear-gradient(180deg, var(--cyan-deep) 40%, transparent 40%);
     background-size: 2px 12px
 }

 .spd-deposit .lab {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 18px;
     font-weight: 500
 }

 .spd-deposit .lab img {
     width: 33px;
     height: 22px
 }

 .spd-deposit .val {
     font-size: 70px;
     font-weight: 700;
     font-style: italic;
     line-height: 1.15
 }

 .spd-deposit .val small {
     font-size: 34px;
     font-weight: 500;
     font-style: normal;
     margin-left: 8px
 }

 .spd-right {
     width: 50%;
     padding: 66px 60px 50px;
     display: flex;
     flex-direction: column;
     gap: 15px
 }

 .spd-right h3 {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: 28px;
     text-transform: lowercase;
 }

 .spd-right h3::first-letter {
     text-transform: uppercase;
 }

 .spd-right ul {
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .spd-right li {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 22px;
     font-weight: 500
 }

 .spd-right li::before {
     content: '';
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: var(--cyan-deep);
     flex-shrink: 0
 }

 .spd-right p {
     font-size: 16px;
     font-weight: 300;
     line-height: 26px
 }

 @media (max-width:1200px) {
     .spd-main {
         padding: 80px 0
     }

     .spd-left,
     .spd-right {
         padding: 48px 36px
     }

     .spd-price-row {
         gap: 40px;
         /*margin-top: 56px*/
     }
 }

 @media (max-width:992px) {
     .spd-card {
         flex-direction: column
     }

     .spd-left,
     .spd-right {
         width: 100%
     }

     .spd-left::after {
         display: none
     }

     .spd-left {
         border-bottom: 1px solid rgba(112, 112, 112, .45)
     }
 }

 @media (max-width:768px) {
     .spd-main {
         padding: 56px 0
     }

     .spd-left h2 {
         font-size: 28px
     }

     .spd-left .desc {
         font-size: 18px;
         line-height: 1.5
     }

     .spd-price .cur {
         font-size: 56px
     }

     .spd-price .num {
         font-size: 36px
     }

     .spd-deposit {
         padding-left: 0
     }

     .spd-deposit::before {
         display: none
     }

     .spd-deposit .val {
         font-size: 44px
     }

     .spd-right li {
         font-size: 17px
     }

     .spd-right p {
         font-size: 15px
     }
 }

 /* #endregion  service - end  */


 /* #region service-price - start */
 .sp-main {
     padding: 108px 0
 }

 .sp-main .sec-tit {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 48px;
     /*text-transform: lowercase;*/
     text-align: center
 }

 /*.sp-main .sec-tit::first-letter {*/
 /*    text-transform: uppercase;*/
 /*}*/

 .sp-cols {
     display: flex;
     justify-content: center;
     gap: 26px;
     margin-top: 90px
 }

 .sp-col {
     width: 516px;
     max-width: 100%;
     background: #1A1C1D;
     border: 1px solid #707070;
     border-radius: 4px;
     padding: 24px;
     display: flex;
     flex-direction: column;
     gap: 20px
 }

 /* 卡头（渐变色取样自画板） */
 .sp-head {
     border-radius: 10px;
     padding: 20px 22px 24px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     border: 1px solid rgba(112, 112, 112, .26)
 }

 .sp-col:nth-child(1) .sp-head {
     background: linear-gradient(135deg, #234154, #21282F)
 }

 .sp-col:nth-child(2) .sp-head {
     background: linear-gradient(135deg, #536946, #1D211F)
 }

 .sp-col:nth-child(3) .sp-head {
     background: linear-gradient(135deg, #115F65, #1D2324)
 }

 .sp-head .row {
     display: flex;
     align-items: center;
     gap: 24px
 }

 .sp-head .row img {
     width: 60px;
     height: 60px;
     border-radius: 8px
 }

 .sp-head .row h3 {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: 26px;
     text-transform: capitalize;
     line-height: 1.2
 }



 .sp-head .desc {
     font-size: 16px;
     font-weight: 400;
     line-height: 22px;
     text-transform: capitalize
 }

 .sp-head .refer {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 40px;
     border-radius: 10px;
     background: var(--white);
     color: #000;
     font-size: 16px;
     font-weight: 500;
     text-transform: lowercase;
     transition: transform .3s
 }

 .sp-head .refer::first-letter {
     text-transform: uppercase;
 }

 .sp-head .refer:hover {
     transform: translateY(-2px)
 }

 /* 筛选组 */
 .sp-box {
     background: #262829;
     border: 1px solid rgba(112, 112, 112, .26);
     border-radius: 10px;
     padding: 18px 20px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     min-height: 163.6px;
 }

 .sp-box:nth-child(3) {
     flex: 1;
 }

 .sp-box h4 {
     font-size: 22px;
     font-weight: 500;
     color: var(--cyan)
 }

 .sp-box ul {
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .sp-box .cols2 {
     display: flex;
     flex-wrap: wrap;
     gap: 10px 26px
 }

 .sp-box li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 300
 }

 .sp-box li label {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
 }

 .sp-box li i {
     width: 13px;
     height: 13px;
     flex-shrink: 0;
     background: #3c4243;
     border: 1px solid #5a6163;
     transition: .2s;

 }

 .sp-box li.radio i {
     border-radius: 50%
 }

 .sp-box li input[type="checkbox"],
 .sp-box li input[type="radio"] {
     display: none;
 }

 .sp-box li label:has(input[type="checkbox"]:checked) i,
 .sp-box li label:has(input[type="radio"]:checked) i,
 .sp-box li.on i {
     background: var(--cyan);
     border-color: var(--cyan)
 }




 /* 询价表单 */
 .sp-form {
     background: #262829;
     border: 1px solid rgba(112, 112, 112, .26);
     border-radius: 10px;
     padding: 22px 20px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: auto;
 }

 .sp-form label {
     display: flex;
     flex-direction: column;
     gap: 8px;
     font-size: 18px;
     font-weight: 500
 }

 .sp-form input {
     height: 40px;
     background: #313334;
     border: 1px solid rgba(112, 112, 112, .4);
     border-radius: 4px;
     padding: 0 12px;
     color: var(--white);
     font-size: 15px;
     outline: none
 }

 .sp-form input:focus {
     border-color: var(--cyan-deep)
 }

 .sp-form .note {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 400;
     opacity: .85
 }

 .sp-form .note::before {
     content: '';
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--cyan)
 }

 .sp-form .submit {
     margin-top: 6px;
     height: 50px;
     border: 0;
     border-radius: 4px;
     background: var(--cyan);
     color: #000;
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
     transition: transform .3s
 }

 .sp-form .submit:hover {
     transform: translateY(-2px)
 }



 /* 左上方纯图标按钮 */
 .audio-btn {
     position: absolute;
     top: 16px;
     right: 16px;
     z-index: 20;
     width: 40px;
     height: 40px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.5);
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     /* 圆形按钮 */
     cursor: pointer;
     backdrop-filter: blur(4px);
     transition: all 0.2s ease;
     outline: none;
 }

 .audio-btn:hover {
     background: rgba(0, 0, 0, 0.8);
     border-color: rgba(255, 255, 255, 0.6);
     transform: scale(1.08);
 }

 /* 图标样式及隐藏类 */
 .audio-btn .icon {
     width: 22px;
     height: 22px;
 }

 .audio-btn .hidden {
     display: none !important;
 }


 @media (max-width:1680px) {
     .sp-cols {
         margin-top: 80px
     }
 }

 @media (max-width:1200px) {
     .sp-main {
         padding: 80px 0
     }

     .sp-cols {
         flex-wrap: wrap
     }

     .sp-col {
         width: min(516px, 100%)
     }

     .sp-main .sec-tit {
         font-size: 40px;
     }
 }

 @media (max-width:768px) {
     .sp-main {
         padding: 56px 0
     }

     .sp-cols {
         margin-top: 48px;
         gap: 18px
     }

     .sp-head .row h3 {
         font-size: 21px
     }

     .sp-main .sec-tit {
         font-size: 30px;
     }

     .panel-cyan .panel-item {
         flex-direction: row-reverse;
     }

     .panel-red .panel-item {
         width: 100%;
     }

     .panel-head {
         width: 100%;
     }

 }

 /* #endregion  - end  */


 /* #region xiugai - start */
 .team-row {
     display: flex;
 }

 .team-li {
     flex: 1;
     position: relative;
     max-width: 446px;
 }

 .team-li-img {
     width: 100%;
 }

 .team-li-img img {
     width: 100%;
     height: auto;
 }

 .team-li-img img:nth-child(2) {
     display: none;
 }

 .team-li-tit {
     position: absolute;
     right: 12.5%;
     top: 10px;
 }

 .team-li-tit div {
     font-size: 14px;
     color: #00D8FF;
 }

 .team-li-tit h3 {
     font-weight: 600;
     font-size: 18px;
     color: #FFFFFF;
 }

 .team-li:nth-child(1) {
     transform: translateX(44.8%);
 }

 .team-li:nth-child(2) {
     margin-top: 32px;
 }

 .team-li:nth-child(3) {
     transform: translateX(-31%);
 }
 
  .team-li:nth-child(2) .team-li-tit div{
     max-width: 120px;
 }
  .team-li:nth-child(2) .team-li-tit{
          right: 8.5%;
  }


 .team-right {
     position: relative;
 }

 .team-li-line1 {
     position: absolute;
     left: -43%;
     bottom:9.6%;
     width: 83%;
 }

 .team-li-line2 {
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 12.45%;
     z-index: 1;
 }

 .team-li-line3 {
     position: absolute;
     left: 63%;
     top: -7px;
     width: 11.41%;
     z-index: 1;
 }

 .team-li-line4 {
     position: absolute;
     left: 60%;
     bottom: 12%;
     width: 51.69%;
 }

 /*@media (max-width:1700px) {*/
 /*  .team-li:nth-child(3) {*/
 /*    transform: translateX(-33.5%);*/
 /*  }*/
 /*}*/

 /*@media (max-width:1600px) {*/
 /*  .team-li:nth-child(1) {*/
 /*    transform: translateX(46.8%);*/
 /*  }*/

 /*  .team-li:nth-child(3) {*/
 /*    transform: translateX(-32.8%);*/
 /*  }*/
 /*}*/

 /*@media (max-width:1500px) {*/
 /*  .team-li:nth-child(3) {*/
 /*    transform: translateX(-31.5%);*/
 /*  }*/
 /*}*/

 @media (max-width:1400px) {
     .team-li-tit h3 {
         font-size: 18px;
     }

     .team-li-tit {
         right: 13%;
     }

     /*.team-li:nth-child(1) {*/
     /*  transform: translateX(48%);*/
     /*}*/

     /*.team-li:nth-child(3) {*/
     /*  transform: translateX(-30.5%);*/
     /*}*/


     .team-li-line1 {
         left: -43%;
         bottom: 11%;
     }

     .team-li-line2 {
         position: absolute;
         left: 43%;
         bottom: 0;
         width: 12.45%;
         z-index: 1;
     }

     .team-li-line3 {
         position: absolute;
         left: 63%;
         top: -15px;
         width: 11.41%;
         z-index: 1;
     }

     .team-li-line4 {
         position: absolute;
         left: 60%;
         bottom: 10%;
         width: 51.69%;
     }


 }

 /*@media (max-width:1350px) {*/
 /*  .team-li:nth-child(3) {*/
 /*    transform: translateX(-30%);*/
 /*  }*/
 /*}*/

 @media (max-width:1300px) {
   /*.team-li:nth-child(3) {*/
   /*  transform: translateX(-29.5%);*/
   /*}*/
    .team-li:nth-child(1) {
     transform: translateX(47.8%);
     }
    
     .team-li:nth-child(2) {
         margin-top: 32px;
     }
    
     .team-li:nth-child(3) {
         transform: translateX(-30%);
     }
      .team-li-line4 { 
         bottom: 13%; 
     }
      .team-li-line2 { 
             left: 43%; 
         }
          .team-li-line1 { 
     bottom: 12.6%; 
 }
 }

 @media (max-width:1260px) {
     .team-li:nth-child(1) {
         transform: translateX(49%);
     }

     .team-li:nth-child(3) {
         transform: translateX(-28.5%);
     }
 }

 @media (max-width:1200px) {
     
     
           .team-li:nth-child(2) .team-li-tit div{
                 max-width: none;
             }
              .team-li:nth-child(2) .team-li-tit{
                      right: 13%;
              }

     .team-li-line1,
     .team-li-line2,
     .team-li-line3,
     .team-li-line4 {
         display: none;
     }

     .team-row {
         column-gap: 8px;
     }

     .team-li {
         transform: translate(0, 0) !important;
         margin-top: 0 !important;
     }

     .team-li-img {
         position: relative;
     }

     .team-li-img::before {
         content: '';
         position: absolute;
         left: 3px;
         top: 3px;
         width: 100%;
         height: 100%;
         background: #00EEFF;
     }

     .team-li-img img:nth-child(1) {
         display: none;
     }

     .team-li-img img:nth-child(2) {
         display: block;
         position: relative;
     }

 }

 @media (max-width:991px) {

     .team-li-tit {
         position: relative;
         right: 0;
         top: 0;
         text-align: center;
     }

     .team-li-tit div {
         margin-top: 10px;
     }

     .team-li-tit h3 {
         font-size: 18px;
         margin-top: 0;
     }
 }



 .about-procedure {
     background: url(images/common/about-procedure-bg.png);
     background-size: cover;
     background-position: center;
 }

 .about-procedure-bg {
     width: 100%;
     height: auto;
 }

 .about-procedure-flow {
     position: relative;
     width: 100%;
     aspect-ratio: 1920/640;
     container-type: inline-size;
     top: 50px;
 }

 .about-procedure-flow>svg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     overflow: visible
 }

 .about-procedure-node {
     position: absolute;
     left: var(--l);
     top: var(--t);
     width: var(--w);
     transform: translate(-50%, -50%);
 }

 .about-procedure-pill {
     background: #202024;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 50px;
     color: #f3f3f5;
     font-weight: 700;
     text-align: center;
     line-height: 1.3;
     padding: .7em .7em;
     font-size: clamp(9px, 1.13cqw, 22px);
     box-shadow: 0 5px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
     cursor: pointer;
     transition: color .22s, border-color .22s, box-shadow .22s;
 }

 .about-procedure-sub {
     position: absolute;
     top: calc(100% + .35em);
     left: 50%;
     transform: translateX(-50%);
     color: var(--cyan);
     font-weight: 700;
     white-space: nowrap;
     font-size: clamp(8px, .9cqw, 17px);
 }

 .about-procedure-n5 .about-procedure-pill,
 .about-procedure-n10 .about-procedure-pill {
     padding: 1.5em 1.1em
 }

 .about-procedure-node:hover .about-procedure-pill {
     color: var(--cyan);
     border-color: rgba(38, 211, 255, .55);
     box-shadow: 0 0 0 1px rgba(38, 211, 255, .35), 0 0 24px rgba(38, 211, 255, .28);
 }

 .about-procedure-revise {
     position: absolute;
     left: 61%;
     top: 85.5%;
     transform: translate(-50%, -50%);
     color: var(--cyan);
     font-weight: 700;
     font-size: clamp(8px, .9cqw, 17px);
 }


 .about-procedure-n1 {
     --l: 19%;
     --t: 1.8%;
     --w: 15%
 }

 .about-procedure-n2 {
     --l: 42.5%;
     --t: 1.8%;
     --w: 19%;
 }

 .about-procedure-n3 {
     --l: 67.5%;
     --t: 1.8%;
     --w: 16%;
 }

 .about-procedure-n4 {
     --l: 87.5%;
     --t: 1.2%;
     --w: 13%;
 }

 .about-procedure-n5 {
     --l: 87%;
     --t: 30.4%;
     --w: 17.5%
 }

 .about-procedure-n6 {
     --l: 85.4%;
     --t: 60.1%;
     --w: 14.5%
 }

 .about-procedure-n7 {
     --l: 59%;
     --t: 60.1%;
     --w: 14.5%;
 }

 .about-procedure-n8 {

     --l: 41%;
     --t: 60.1%;
     --w: 9.5%;
 }

 .about-procedure-n8d {
     --l: 39.5%;
     --t: 73.9%;
     --w: 11%
 }

 .about-procedure-n9 {
     --l: 18%;
     --t: 60.1%;
     --w: 18%;
 }

 .about-procedure-n10 {
     --l: 13.3%;
     --t: 29.3%;
     --w: 21%
 }

 .about-procedure-down {
     display: none
 }

 .about-procedure h2 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 48px;
     /*text-transform: lowercase;*/
     text-align: center;
     margin-bottom: 15px;
 }

 /*.about-procedure h2::first-letter {*/
 /*    text-transform: uppercase;*/
 /*}*/

 @media (max-width:992px) {
     .about-procedure img {
         display: none;
     }

     .about-procedure-flow {
         top: 0;
         margin-top: 20px !important;
     }

     .about-procedure::before {
         opacity: .04;
         -webkit-mask-image: none;
         mask-image: none
     }

     .about-procedure-flow {
         aspect-ratio: auto;
         container-type: normal;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 0;
         max-width: 360px;
         margin: 0 auto;
     }

     .about-procedure-flow>svg,
     .about-procedure-revise {
         display: none
     }

     .about-procedure-node {
         position: static;
         transform: none;
         width: 100% !important
     }

     .about-procedure-pill {
         font-size: 15px;
         padding: 15px 18px;
         border-radius: 50px;
         background: linear-gradient(180deg, #26262b, #191920);
         box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
     }

     .about-procedure-node:active .about-procedure-pill {
         color: var(--cyan);
         border-color: rgba(38, 211, 255, .55);
         box-shadow: 0 0 0 1px rgba(38, 211, 255, .3), 0 0 20px rgba(38, 211, 255, .25);
     }

     .about-procedure-n10 .about-procedure-pill {
         padding: 18px;
         border-color: rgba(38, 211, 255, .4)
     }

     .about-procedure-sub {
         position: static;
         transform: none;
         margin-top: 7px;
         display: block;
         text-align: center;
         white-space: normal;
         font-size: 12px;
     }

     .about-procedure-n7d {
         width: 84% !important
     }

     .about-procedure-n7d .about-procedure-pill {
         background: transparent;
         border-style: dashed;
         opacity: .85;
         color: #cfd2d6;
     }

     .about-procedure-down {
         display: block;
         width: 2px;
         height: 26px;
         margin: 3px auto;
         position: relative;
         background: linear-gradient(180deg, rgba(38, 211, 255, .75), rgba(38, 211, 255, .2));
     }

     .about-procedure-down::after {
         content: "";
         position: absolute;
         left: 50%;
         bottom: -1px;
         transform: translateX(-50%);
         border: 5px solid transparent;
         border-top-color: var(--cyan);
     }
 }

 @media (max-width:768px) {
     .about-procedure h2 {
         font-size: 30px
     }

     .about-procedure h2 {
         margin-bottom: 25px;
     }
 }

 /* #endregion xiugai - end  */


 /* #region details - start */

 .details-section {
     padding: 100px 0;
 }

 .details-title {
     text-align: center;
     font-size: 30px;
     font-family: var(--font-display);
 }

 .details-time {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 30px;
     font-size: 18px;
     margin-top: 16px;
 }

 .details-time div {
     display: flex;
     align-items: center;
 }

 .details-time span {
     margin-left: 10px;
 }

 .details-text {
     font-size: 18px;
     line-height: 1.6;
     margin-top: 30px;
 }

 .details-share {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     align-items: center;
     margin-top: 30px;
 }

 .details-share .footer-social {
     margin-top: 0;
 }

 .details-share span {
     font-size: 30px;
     font-weight: 600;
     margin-right: 16px;
 }

 .details-page {
     margin-top: 40px;
     border-top: 1px solid rgba(255, 255, 255, 0.3);

     display: flex;
     justify-content: space-between;
     padding-top: 20px;
 }

 .details-page div {
     width: 49%;
     max-width: 510px;
     font-size: 16px;

     margin-top: 10px;

     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: normal;

 }

 .details-page a {
     transition: .2s;
 }

 .details-page a:hover {
     color: var(--cyan);
 }

 .details-page span {
     font-size: 22px;
     color: var(--cyan);
     font-weight: 600;
 }

 .details-related {
     margin-top: 85px;
 }


 .details-related-ul {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     column-gap: 15px;
     row-gap: 25px;
     margin-top: 50px;
 }

 .details-related-li div {
     overflow: hidden;
 }

 .details-related-li img {
     width: 100%;
     height: auto;
     transition: .5s;
 }

 .details-related-li h3 {
     font-size: 16px;
     line-height: 1.5;
     color: #FFFFFF;
     margin-top: 14px;
     padding: 0 10px;
     transition: .2s;
 }

 .details-related-li:hover img {
     transform: scale(1.05);
 }

 .details-related-li:hover h3 {
     color: var(--cyan);
 }


 .details-related h2 {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: 48px;
     text-transform: uppercase;
     text-align: center;
 }

 .home-solution-row {
     display: flex;
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
 }

 .home-solution-left {
     flex: 1;
     overflow: hidden;
 }

 .solutions-btn {
     background: #fff;
     border: 1px solid #fff;
     border-radius: 8px;
     padding: 10px 25px;
     color: #000;
     font-size: 16px;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
 }

 .solutions-btn svg {
     width: 16px;
     height: auto;
 }

 .solutions-btn:hover {
     background: var(--pill-bg);
     border: 1px solid var(--cyan-deep);
     color: var(--cyan);
 }


 .payment-process {
     margin-top: 80px;
 }

 .payment-title {
     font-weight: 500;
     font-size: 32px;
     text-align: center;

 }

 .payment-list {
     display: flex;
     flex-wrap: wrap;
     margin-top: 30px;
     border: 1px solid #707070;
     background: #262829;
 }


 .payment-item {
     width: 33.33%;
     padding: 30px 30px 25px 30px;
     border-right: 1px solid #707070;
 }

 .payment-item:last-child {
     border-right: none;
 }

 .payment-item .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #00EEFF;
     border-radius: 50%;
     box-shadow: 0 0 4px 3px #00EEFF;
     margin-left: 4px;
 }

 .payment-item h3 {
     margin-top: 16px;
     color: #00EEFF;
     font-size: 16px;
 }

 .payment-item p {
     margin-top: 12px;
 }

 .home-know-bg img {
     width: 100%;
     height: auto;
     border-radius: 10px;
 }

 .index-banner-btns {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     column-gap: 26px;
 }

 .index-banner-btns .btns:nth-child(odd) {
     background: #00D8FF;
 }

 @media (max-width:1200px) {

     .panel-red,
     .panel-cyan {
         background-size: 100% 85%;
     }
 }

 @media (max-width:992px) {

     .home-solution-row {
         flex-direction: column;
         align-items: start;
     }

     .home-solution-right {
         margin-left: auto;
     }

     .details-related-ul {
         grid-template-columns: repeat(2, 1fr);
     }

     .details-section {
         padding: 80px 0;
     }

     .details-share span {
         font-size: 26px;
     }

     .details-related h2 {
         font-size: 42px;
     }

     .details-related {
         margin-top: 70px;
     }
 }

 @media (max-width:768px) {

     .payment-item {
         width: 100%;
         border-right: none;
         border-bottom: 1px solid #707070;
     }

     .details-section {
         padding: 60px 0;
     }

     .details-related-ul {
         grid-template-columns: repeat(1, 1fr);
     }

     .details-related h2 {
         font-size: 30px
     }

     .details-title {
         font-size: 22px;
     }

     .details-time {
         font-size: 14px;
     }

     .details-time svg {
         width: 24px;
         height: 24px;
     }

     .details-text {
         font-size: 14px;
         margin-top: 20px;
     }

     .page-banner-text {
         font-size: 16px;
     }

     .details-share span {
         font-size: 16px;
     }

     .details-page div {
         width: 100%;
         max-width: 100%;
     }

     .details-page {
         display: block;
     }

     .details-page span {
         font-size: 18px;
     }

     .details-page div {
         font-size: 14px;
     }

     .details-page div {
         margin-top: 8px;
     }

     .details-related {
         margin-top: 60px;
     }

     .details-related-li h3 {
         font-size: 14px;
     }

     .footer-col h4 {
         font-size: 22px;
     }

     .footer-col ul a {
         font-size: 14px;
         line-height: 1.8;
     }

     .home-know-bg .section-title {
         margin-bottom: 30px;
     }


 }

 /* #endregion details - end  */


 /* #region  - start */
 .home-section-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-family: var(--font-display);
 }

 .home-section-title h2 {
     font-size: 46px;
     line-height: 1.25;
     font-weight: 600;
     color: #fff;
 }

 .home-section-title a {
     padding: 20px 45px;
     background: #fff;
     border-radius: 10px;
     font-size: 20px;
     color: #000000;
     font-weight: 500;
     transition: .3s;
     margin-left: 25px;
 }

 .home-section-title a:hover {
     background: var(--cyan);
 }

 .home-section-one {
     padding-top: 110px;
 }

 .home-brandstories {
     margin-bottom: 90px;
 }

 .home-brandstories-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 26px;
     margin-top: 65px;

 }

 .home-brandstories-li .home-brandstories-text {
     background: #1DC7DF;
 }

 .home-brandstories-li {
     transition: .36s;
     border-radius: 10px;
     overflow: hidden;
 }


 .home-brandstories-img {
     overflow: hidden;
 }

 .home-brandstories-img img {
     width: 100%;
     transition: .5s;
 }

 .home-brandstories-text {
     padding: 22px 30px 22px 30px;
     color: #02090A;
     text-align: center;
     transition: .36s;
 }

 .home-brandstories-text h3 {
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 7px;
 }

 .home-brandstories-text div {
     font-size: 18px;
     font-weight: 300;


     max-height: 0;
     opacity: 0;
     overflow: hidden;
     /* transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); */
     transition: .72s;
 }

 .home-brandstories-li:nth-child(2) .home-brandstories-text {
     background: #0C5D6B;
 }

 .home-brandstories-li:nth-child(2) .home-brandstories-text {
     color: #1CD4EE;
 }

 .home-brandstories-li:nth-child(3) .home-brandstories-text {
     background: #D5ECF1;
 }

 .home-brandstories-li:nth-child(3) .home-brandstories-text {
     color: #0C5D6B;
 }

 /* .home-brandstories-li:hover .home-brandstories-img img {
     transform: scale(1.05);
 } */


 .home-brandstories-li {
     padding-bottom: 88px;
     position: relative;
 }

 .home-brandstories-li .home-brandstories-text {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     min-height: 88px;
 }

 .home-brandstories-li:hover {
     transform: translateY(-15px);
 }

 .home-brandstories-li:hover .home-brandstories-text {
     padding-bottom: 32px;
 }

 .home-brandstories-li:hover .home-brandstories-text div {
     max-height: 80px;
     opacity: 1;
 }


 .home-works {
     margin-bottom: 110px;
 }

 .home-works-row {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     row-gap: 25px;
     column-gap: 18px;
     margin-top: 65px;
     justify-content: center;
 }

 .home-works-img {
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0px 3px 6px rgba(223, 223, 223, 0.16);
 }

 .home-works-img img {
     width: 100%;
     display: block;
     transition: .5s;
 }

 .home-works-title {
     font-size: 20px;
     margin-top: 16px;
     transition: .2s;
 }

 .home-works-text {
     font-size: 16px;
     margin-top: 6px;
     line-height: 1.625;
 }

 .home-works-li {
     transition: .36s;
 }

 .home-works-li:hover .home-works-img img {
     transform: scale(1.05);
 }

 .home-works-li:hover .home-works-title {
     color: var(--cyan);
 }

 .home-section-two {
     background: #001D29;
     padding-top: 80px;
     border-radius: 120px 120px 0 0;
 }

 .home-section-title2 {
     display: flex;
     align-items: center;
     font-size: 36px;
     font-family: var(--font-display);
     margin-top: 60px;
 }

 .home-section-title2 div {
     font-weight: 500;
 }

 .home-section-title2 span {
     flex: 1;
     overflow: hidden;
     border-bottom: 1px dashed #545454;
     margin-left: 66px;
 }

 .home-shorts {
     display: flex;
     row-gap: 25px;
     column-gap: 20px;
 }

 .home-shorts-li {
     flex: 1;
     transition: .36s;
 }

 .home-shorts-li.active {
     flex: 2;
 }

 .home-shorts-img {
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     height: 334px;
     transition: .36s;
 }



 .home-shorts-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .home-shorts-img div {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .10);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: .36s;
 }

 .home-shorts-img div img {
     width: 36px;
     height: auto;
 }

 .home-shorts-img span {
     font-size: 18px;
     margin-top: 9px;
 }

 .home-shorts-title {
     font-size: 22px;
     margin-top: 16px;
     font-weight: 500;
 }

 .home-shorts-text {
     font-size: 16px;
     margin-top: 5px;
     color: #00EEFF;
 }

 .home-shorts-img:hover div {
     opacity: 1;
 }

 .home-shorts {
     margin-top: 36px;
 }


 .home-explore {
     margin-bottom: 60px;
 }


 .home-eliminates-left {
     width: 100%;
     display: flex;
     align-items: center;
 }

 .home-eliminates-icon {
     width: 70px;
     height: 70px;
     background: #024C58;
     border-radius: 10px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 30px;
 }

 .home-eliminates-icon img {
     width: 71.5%;
     height: auto;
 }

 .home-eliminates-text div {
     font-size: 20px;
     font-weight: 500;
 }

 .home-eliminates-text P {
     font-size: 16px;
     margin-top: 4px;
 }

 .home-eliminates-one {
     width: 37%;
 }

 .home-eliminates-text {
     flex: 1;
     overflow: hidden;
 }

 .home-eliminates-one {
     padding: 25px 35px;
 }

 .home-eliminates {
     margin-top: 50px;
 }

 .home-eliminates td>img {
     margin: auto;
     display: block;
     width: 28px;
     height: auto;
 }

 .home-eliminates tbody td,
 .home-eliminates tbody tr {
     position: relative;
     border: none;
     transition: .36s;
 }

 .home-eliminates tbody tr::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 1px;
     background: #4E4E4E;
     transition: .36s;
 }

 .home-eliminates tbody tr:first-child::after,
 .home-eliminates tbody tr:last-child::after {
     display: none;
 }


 .home-eliminates table {
     border-collapse: collapse;
     border-spacing: 0;
 }

 .home-eliminates tbody tr:first-child td {
     background-color: #1DC7DF;
 }

 .home-eliminates tbody tr td:first-child {
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
 }

 .home-eliminates tbody tr td:last-child {
     border-top-right-radius: 15px;
     border-bottom-right-radius: 15px;
 }

 .home-eliminates tbody tr:first-child .home-eliminates-text {
     color: #07151A;
 }

 .home-eliminates tbody tr:first-child td>img {
     filter: brightness(0);
 }

 .home-eliminates th {
     padding-bottom: 30px;
 }

 .home-eliminates tbody tr:hover {
     background-color: rgba(29, 199, 223, .1);
 }

 .home-eliminates tbody tr:hover::after {
     opacity: 0;
 }

 .home-eliminates th:nth-child(n+2) {
     width: 11.5%;
 }

 .home-section-two {
     padding-bottom: 180px;
 }

 .home-section-three {
     border-radius: 120px 120px 0 0;
     margin-top: -120px;
     background: #000;
     padding-top: 80px;
     padding-bottom: 210px;
 }

 .home-section-four {
     background: #0B2026;
     border-radius: 120px 120px 0 0;
     margin-top: -120px;
     padding-top: 60px;
     padding-bottom: 210px;
 }

 .home-section-title-three {
     font-size: 26px;
     margin-top: 16px;
     max-width: 950px;
 }

 .home-partner {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     column-gap: 15px;
     row-gap: 25px;
     margin-top: 60px;
 }

 .home-partner-li {
     border-radius: 10px;
     overflow: hidden;
     position: relative;
 }

 .home-partner-li img {
     width: 100%;
     height: auto;
     transition: .5s;
 }

 .home-partner-li div {
     position: absolute;
     left: 20px;
     bottom: 20px;
     width: calc(100% - 40px);
     padding: 16px;
     font-size: 25px;
     text-align: center;
     background: rgba(0, 139, 168, .86);
     border-radius: 10px;
     transition: .36s;
     font-weight: 500;
 }

 .home-partner-li:hover img {
     transform: scale(1.05);
 }

 .home-partner-li:hover div {
     bottom: 30px;
 }

 .home-section-five {
     background: var(--bg);
     border-radius: 120px 120px 0 0;
     margin-top: -120px;
     padding: 145px 0 145px 0;
     border-bottom: 1px solid #707070;
 }

 .home-commitments {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .home-commitments-left {
     width: 40%;
     display: flex;
     align-items: start;
     justify-content: space-between;
     position: relative;
 }

 .home-commitments-left::before {
     content: '';
     position: absolute;
     left: 30%;
     bottom: -3%;
     width: 155px;
     height: 155px;
     border-radius: 50%;
     background-color: #00c2ff;
     opacity: 0.24;
     filter: blur(30px);
 }

 .home-commitments-left img {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     width: calc(50% - 5px);
 }

 .home-commitments-left img:nth-child(1) {

     top: -25px;
 }

 .home-commitments-left img:nth-child(2) {

     top: 25px;
 }

 .home-commitments-right {
     width: 55.5%;
 }

 .home-commitments-right h2 {
     font-size: 40px;
     font-weight: 600;
 }

 .home-commitments-text {
     font-size: 28px;
     margin-top: 16px;
 }

 .home-commitments-ul {
     margin-top: 50px;
 }

 .home-commitments-li {
     display: flex;
     align-items: start;
     margin-bottom: 5px;
 }

 .home-commitments-li:last-child {
     margin-bottom: 0;
 }

 .home-commitments-li span {
     font-size: 20px;
     position: relative;
     margin-top: 19px;
     color: #00D8FF;
     margin-right: 20px;
     font-weight: 500;
 }

 .home-commitments-li div {
     flex: 1;
     overflow: hidden;
     font-size: 26px;
     line-height: 1.5;
     padding: 12px 0;
     color: #fff;
     border-bottom: 1px solid #989898;
     font-weight: 500;
 }
 
 
 
.spd-price-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid  rgba(112, 112, 112, .6);
    border-radius: 10px;
    padding: 15px 30px 18px 30px; 
    margin-bottom: 33px;
    column-gap: 15px;
}
.spd-price-line .spd-price .cap-top{
    font-size: 18px;
    margin-bottom: 0;
}


.spd-price-line-num{
    font-size: 50px;
    font-weight: 500;
    display: flex;
    align-items: end;
}
.spd-price-line-num i {
    font-size: 18px;
    font-style: normal;
    margin-left: 5px;
    font-weight: 400;
    position: relative;
    top: -8px;
}

 @media (max-width:1200px) {

     .home-works-row {
         grid-template-columns: repeat(3, 1fr);
     }

     .home-shorts-img {
         height: 260px;
     }

     .home-brandstories-text h3 {
         font-size: 22px;
     }

     .home-brandstories-li {
         padding-bottom: 80px;
     }

     .home-brandstories-li .home-brandstories-text {
         min-height: 80px;
     }


 }

 @media (max-width:992px) {
     
          .spd-price-line{
         margin-top: 20px;
         margin-bottom: 20px;
     }


     .home-works-row,
     .home-brandstories-row {
         grid-template-columns: repeat(2, 1fr);
     }

     .home-shorts-img {
         height: 200px;
     }

     .home-section-two,
     .home-section-three,
     .home-section-five,
     .home-section-four {
         border-radius: 60px 60px 0 0;
     }

 }

 @media (max-width:768px) {
     
          .spd-price-line-num{
         font-size: 32px;
     }
     .spd-price-line{
         display: block;
         padding: 15px 18px;
     }
.spd-price-line-num{
    margin-top: 8px;
}

     .home-brandstories-li .home-brandstories-text {
         min-height: 64px;
     }

     .home-brandstories-li {
         padding-bottom: 64px;
     }

     .home-section-title {
         flex-direction: column;
         justify-content: center;
         gap: 15px;
     }

     .home-section-title a {
         margin-left: 0;
     }

     .home-works-row,
     .home-brandstories-row {
         grid-template-columns: repeat(1, 1fr);
     }

     .home-section-title2 span {
         display: none;
     }


     .home-section-one {
         padding-top: 60px;
     }

     .home-section-title h2 {
         font-size: 32px;
     }

     .home-brandstories-row {
         margin-top: 40px;
     }

     .home-brandstories-text {
         padding: 15px 15px 15px 15px;
     }

     .home-brandstories-text h3 {
         font-size: 20px;
     }

     .home-brandstories-text div {
         font-size: 16px;
     }

     .home-works-row {
         margin-top: 50px;
     }

     .home-works {
         margin-bottom: 60px;
     }

     .home-section-two {
         padding-top: 60px;
     }

     .home-section-title a {
         padding: 15px 25px;
     }

     .home-section-title2 {
         font-size: 28px;
         margin-top: 40px;
     }

     .home-shorts {
         flex-direction: column;
     }

     .home-shorts-title {
         font-size: 20px;
         margin-top: 12px;
     }

     .home-section-two {
         padding-bottom: 120px;
     }

     .home-section-three {
         padding-top: 60px;
     }

     .home-eliminates {
         overflow: auto;
     }

     .home-eliminates table {
         width: 800px;
     }

     .home-eliminates-one {
         padding: 20px 15px;
     }

     .home-eliminates-icon {
         width: 60px;
         height: 60px;
         margin-right: 15px;
     }

     .home-section-three {
         padding-bottom: 180px;
     }

     .home-section-title-three {
         font-size: 18px;
     }

     .home-partner {
         margin-top: 40px;
         grid-template-columns: repeat(1, 1fr);
     }

     .home-partner-li div {
         padding: 12px;
         font-size: 20px;
     }

     .home-section-four {
         padding-bottom: 200px;
     }

     .home-section-five {
         padding: 100px 0 80px 0;
     }

     .home-commitments {
         display: block;
     }

     .home-commitments-left,
     .home-commitments-right {
         width: 100%;
     }

     .home-commitments-right h2 {
         font-size: 28px;
         margin-top: 60px;
     }

     .home-commitments-text {
         font-size: 20px;
     }

     .home-commitments-ul {
         margin-top: 20px;
     }

     .home-commitments-li div {
         font-size: 18px;
     }

     .home-commitments-li span {
         font-size: 18px;
         margin-top: 13px;
     }
 }
 
 
     .side-tools {
        position: fixed;
        top: 50%;
        right: 18px;
        z-index: 90;
        display: flex;
        flex-direction: column;
        overflow: visible;
        border-radius: 7px;
        background: transparent;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
        transform: translateY(-50%);
    }

    .side-tools a,
    .side-tools div {
        position: relative;
        display: grid;
        width: 50px;
        height: 50px;
        color: #fff;
        background: #0B2026;
        border-bottom: 1px solid #515151;
        font-size: 18px;
        place-items: center;
        cursor: pointer;
    }

    .side-tools a:hover,
    .side-tools div:hover {
        color: #fff;
        background: #111;
    }

    .side-tools> :first-child {
        border-radius: 7px 7px 0 0;
    }

    .side-tools> :last-child {
        border-bottom: 0;
        border-radius: 0 0 7px 7px;
    }

    .side-tools a::before,
    .side-tools div::before {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        right: calc(100% + 12px);
        padding: 8px 13px;
        color: #fff;
        border-radius: 4px;
        background: #0B2026;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transform: translate(8px, -50%);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
        pointer-events: none;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
    }

    .side-tools a:hover::before,
    .side-tools div:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }

    @media (max-width: 767px) {
        .side-tools {
            display: none;
        }
    }

 /* #endregion  - end  */

 :root {
     --max: 1420px;
 }