/* html { font-size: 10px;  text-size-adjust: 100%;-webkit-text-size-adjust: 100%;} */
body{font-size: .18rem; overflow-x: hidden; --top:.67rem ; background: #000; color: #fff;} 
.inner{ width:86vw;   margin: 0 auto;  }
.pl-inner{ padding-left: 7vw;}
.pr-inner{ padding-right: 7vw;}
.ml-inner{ margin-left:7vw;}
.mr-inner{ margin-right: 7vw;} 
/* 
.idxInner{ width:96%;   margin: 0 auto;  }
.pl-idxInner{ padding-left: 2vw;}
.pr-idxInner{ padding-right:2vw;}
.ml-idxInner{ margin-left:2vw;}
.mr-idxInner{ margin-right:2vw;}
*/

.zwHeader{ height: var(--top);}
.zw{ margin-top: - var(--top); padding-top: var(--top);}

 
header{ position: fixed; left: 0; top: 0; width: 100%; background:#050505; z-index: 100;}
header .con{ width: 17.15rem; margin: 0 auto;}

 

.logoImg{ height: .35rem;}
.oneNav{ line-height:var(--top); white-space: nowrap; position: relative;  display: block; padding: 0  .5rem;     color: #B9B9B9; }
.oneNav span { }
.oneNav::after{ width: 1em;; height: 2px; display: block; content: ''; background:#D9D9D9; transition: all .36s; transform:scale(0,1) ; position: absolute; left: 50%; margin-left: -.5em; bottom: 0; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(0,1) ; -moz-transform:scale(0,1) ; -ms-transform:scale(0,1) ; -o-transform:scale(0,1) ; }
nav li{ position: relative;}
nav li.on .oneNav span ,nav li:hover .oneNav span { color: #fff;}
nav li.on .oneNav::after,nav li:hover .oneNav::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); }
nav:hover > li:not(:hover) .oneNav{ color: #B9B9B9; }
nav:hover > li:not(:hover) .oneNav  span::after{ transform:scale(0,1) ;  }

nav li .tede{ position: absolute; top: calc(100% - .17rem); left: 50%; margin-left: -.77rem; }
.tede{  width: 1.54rem;  
  height: .34rem;
  background: radial-gradient( 50% 50% at 50% 50%, #D9D9D9 0%, rgba(115,115,115,0) 74.04%);
  border-radius: 0px 0px 0px 0px;
  opacity: 0;

/* 创建一个从上到下，由透明到黑色的线性渐变遮罩 */
  /* 黑色表示显示，透明表示隐藏 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
  mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
}

nav li.on .tede{ opacity: 0.35;}
header .con .btutton{ width: 1rem; height: .34rem;}


.h_nav{ height: 60px; width: 60px;  padding: 18px  15px   ;    align-items: flex-end; display: flex;}
.h_nav .burger{ width: 100%;  height: 2px ; background: #fff;  transition: .8s; display:inline-block;       }
header.scroll .h_nav .burger,header:hover .h_nav .burger{ background: #fff;}
.h_nav .burger:nth-of-type(2){  width:66%;}
  /* .h_nav .burger:first-child{ animation: long 2s linear infinite; -webkit-animation: long 2s linear infinite; }

.h_nav .burger:nth-of-type(3){ animation: long 3s linear infinite; -webkit-animation: long 3s linear infinite; }   */
.h_nav.close .burger:first-child{ display: none;}
.h_nav.close .burger:nth-of-type(3){ display: none;}
.h_nav.close .burger:nth-of-type(2) {    position: relative;    z-index: 1; width: 80%;}
.h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after {      content: '';   position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      background: #fff;      opacity: 0;      z-index: 1;}
.h_nav.close .burger:nth-of-type(2) {    background: transparent;    transform: rotate(-180deg); }
.h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after {      opacity: 1;      transition: all .3s; }
.h_nav.close .burger:nth-of-type(2):before {     transform: rotate(45deg); }   .h_nav .burger:nth-of-type(2):after {     transform: rotate(-45deg); }
.nav{ padding-bottom: 60px; width: 100vw; display: none; height:  130vh ; animation: leftFloat .8s; transition:all .6s ; background: #000; position: fixed; top: 60px; right: 0; flex-direction: column; -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; -webkit-animation: leftFloat .8s; }
.nav.show{  display: block; }
.nav li.go-child{ border-top: 1px solid rgba(255, 255, 255, 0.15); position: relative;}
.nav li.go-child>a{ line-height: 60px; padding: 0 20px; font-size: 16px;}
.h_nav.close{align-items: center; justify-content: center;}
.erji{ width: 60px; height: 60px; position: absolute; right: 0 ; top: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 10;
 background: url(../images/jia.png) no-repeat center center; background-size: 40% auto;}
 .nav li.go-child.on .erji{ background: url(../images/jian.png) no-repeat center center; background-size: 40% auto;}
.nav-down li a{ line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.15); display: block; padding-left: 25px; font-size: 14px; opacity: 0.8; }
.nav{   overflow-y: scroll;   }
.nav::-webkit-scrollbar {/*滚动条整体样式*/    /*高宽分别对应横竖滚动条的尺寸*/  width: 1px;}
.nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #fff; width: 1px; }
.nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: #efefef; width: 1px; }

 


.line-height1-3{ line-height: 1.3;}
.idxBanImg{ width: 100%; height:100vh; object-fit: cover; min-height: 360px; object-fit: cover;}
 
.idxBan .text{ position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.idxBan .text .engTit .subTit{ position: absolute; top: 50%; left:16em; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.idxBan .text .more{  letter-spacing: .27em; 
  box-shadow: inset 1px -4px 9px 2px rgba(255, 255, 255, 0.2);
 border: 1px solid rgba(255, 255, 255, 0.23);
/*  background: url(../images/buttonBg.png) no-repeat center center / 100% 100%; */
}


.w24{ width: 24%;}
.idxNumUl li:first-child{   padding-left: 0; border-left: none;} 

.pt-idx{padding-top: 1.5rem;}
.pb-idx{padding-bottom: 1.5rem;}
.idxAbout{ }
.idxAboutUl li .num{ aspect-ratio: 17 / 15; width: 11%;}
.idxWork .color-jian{background-image: linear-gradient(0deg, #E4FF8C 0%, #C3FF00 28%, #FFCF4B 100%);}

.idxAboutUl li:hover{ background: rgba(255, 255, 255, 0.08);}
/* 
.idxWorkLeft{ width: 10%;}
.idxWorkRight{ width: 84%;}

.idxMore{  letter-spacing: .2em;  background: url(../images/buttonBg.png) no-repeat center center / 100% 100%;  }

.rightSwiper .swiper-slide .img{ aspect-ratio: 2 / 1; box-shadow: 4px 9 21px -3px rgba(255,255,255,0.15);}
.rightSwiper .swiper-slide .text .item{display: grid; grid-gap: .25rem .3rem; grid-template-columns: repeat(4,1fr);}


.rightSwiper .img{ aspect-ratio: 2 / 1; box-shadow: 4px 9 21px -3px rgba(255,255,255,0.15);}
.leftSwiper{ height: 4rem;}
.leftSwiper  .swiper-slide{ height: calc(100% / 5); opacity: .2;}
.leftSwiper  .swiper-slide.swiper-slide-next,.leftSwiper  .swiper-slide.swiper-slide-prev{ opacity: .5;}
.leftSwiper  .swiper-slide.swiper-slide-thumb-active{ font-size: 1.28em; opacity: 1;}

.idxWorkLeft::after{ display: block; content: ''; width: 1px; height: 100%; position: absolute; right: 0; top: 0;background:linear-gradient(to bottom,transparent,#fff,transparent); } */
.works-layout {display: flex;align-items: flex-start;}

/* ========== 左侧导航 ========== */
.left-nav {width: 1.4rem;flex-shrink: 0;position: sticky;top: 0;height: 6rem;display: flex;align-items: center;z-index: 10; }
.nav-viewport { width: 100%;overflow: hidden;position: relative;}
.nav-viewport::after{ display: block; content: ''; width: 1px; height: 100%; position: absolute; right: 0; top: 0;background:linear-gradient(to bottom,transparent,#fff,transparent); } 
.nav-list {list-style: none;display: flex;flex-direction: column;gap: 40px;transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.nav-item {position: relative; cursor: pointer;transition: all 0.4s ease;}
.nav-item .nav-text { color: rgba(255, 255, 255, 0.3);font-weight: 400;letter-spacing: 2px;transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);position: relative;display: inline-block;}
.nav-item::after {content: "";position: absolute;right: -1px;top: 50%;transform: translateY(-50%) scaleY(0);width: 4px;height: 2em;background: #fff;transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);transform-origin: center;}
/* 三级亮度 */
.nav-item.active .nav-text {color: rgba(255, 255, 255, 1);font-size: 1.28em;font-weight: 700;text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);}
.nav-item.active::after {transform: translateY(-50%) scaleY(1);box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);}
.nav-item.nearby .nav-text {color: rgba(255, 255, 255, 0.6);font-size: 14.5px;font-weight: 500;}
.nav-item:hover .nav-text {color: rgba(255, 255, 255, 0.85) !important;}
.nav-item.active:hover .nav-text {color: #fff !important;}
/* ========== 多屏内容区 ========== */
.fullpage {flex: 1;width: 100%; padding-left: .8rem;}
.section-block {min-height: 6rem;display: flex; justify-content: space-between;align-items: center;}
/* ========== 中间图片区 ========== */
.image-section { max-width: 7.6rem; aspect-ratio: 1 /  .5;}
.image-wrapper { box-shadow: 0 .3rem .8rem rgba(0, 0, 0, 0.6); }
.image-wrapper::before {content: "";position: absolute;inset: 0;border-radius: 16px;border: 1px solid rgba(255, 255, 255, 0.08);pointer-events: none;z-index: 2;}
.image-wrapper img { transition: transform 0.8s ease, opacity 0.5s ease;}
.image-wrapper:hover img {transform: scale(1.03);}
/* ========== 右侧内容区 ========== */
.content-section {flex-shrink: 0;}
.idxMore{ letter-spacing: .2em; transition: all .36s; box-shadow: inset 1px -4px 9px 2px rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.23); /*background: url(../images/buttonBg.png) no-repeat center center / 100% 100%; */:; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s;
}
.idxMore:hover{ box-shadow: inset 1px -4px 9px 2px rgba(255, 255, 255, 0.5);}
.idxWorkRight .content-section  .item{display: grid; grid-gap: .25rem .3rem; grid-template-columns: repeat(4,1fr);}


.idxProcess .color-jian{background-image: linear-gradient(130deg, #a473dd 0%, #bb6cfb 50%, #5c7cff 100%);}
.idxProcessUl::after{ display: block; content: ''; width: 100%; height:1px; position: absolute; left: 0; top: 1rem; background:#F3F8FF ; opacity: .15;}
.idxProcessUl li .round{ width: 1em;}
.idxProcessUl li .round i{ width: .5em; height: .5em;  border-color: #2C2D2E;}
.idxProcessUl li .round i::after{ display: block; content: ''; width: 40%; height: 40%;   border-radius: 50%; background: #A1A1A1; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }

.idxProcessUl li:hover .num{ color: #fff;}
.idxProcessUl li:hover .text .font28{-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image:  linear-gradient(130deg, #a473dd 0%, #bb6cfb 50%, #5c7cff 100%);}

.idxPartner .color-jian{ background-image:linear-gradient(90deg, #FF0000 0%, #FF7B59 100%);;}
.idxPartner .yin{ height: .4em; font-size: 1.4rem; color: #1F1F1F;} 
.idxPartner .item .line{ background: #535353; height: 1px; width: 100%;}

.idxDesign .color-jian{ background-image: linear-gradient(90deg, #FF8E6C 0%, #FFE555 100%);}
.idxDesignUl{ display: grid; grid-gap: 1rem; grid-template-columns: repeat(3,1fr); }

.idxDesignUl li{   perspective: 1200px; }

.idxDesignUl li:hover .tit{font-weight: bold; display: inline-block; -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image:  linear-gradient(90deg, #FF8E6C 0%, #FFE555 100%);}


.card-body{  transform-style: preserve-3d;  transition: transform 0.1s ease-out;
  position: relative;
  background:linear-gradient(to bottom,#171717,#0e0e0e);
}

.layer-item{
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  -webkit-transition: transform 0.1s ease-out;
  -moz-transition: transform 0.1s ease-out;
  -ms-transition: transform 0.1s ease-out;
  -o-transition: transform 0.1s ease-out;
}

.idxDesignUl li .line{ background: #535353; height: 1px;}
.idxDesignUl li:hover .layer-item{ filter: drop-shadow(0 5px 5px rgba(255,255,255,.1)); -webkit-filter: drop-shadow(0 5px 5px rgba(255,255,255,.1)); }

.idxInfo .color-jian{ background-image: linear-gradient(90deg, #62FFDA 0%, #616EFF 100%);}

.w38{ width: 38%;}
/* .idxInfo .idxMore{ background: url(../images/buttonBg2) no-repeat center center / 100% 100%;} */
.idxInfoUl li{ width: calc(100% / 3);}
.idxInfoUl li:first-child{ border: none;} 
.idxInfoUl li .line{ width: 3em; height: 1px; background: #8E8E8E;}
.idxInfoUl li .desc{ height: 7em;}


.idxInfoUl li:hover .tit{font-weight: bold; display: inline-block; -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image:linear-gradient(90deg, #62FFDA 0%, #616EFF 100%);}
.idxInfoUl li:hover .line{ width: 100%;}

.idxBgBox{ width: 100%; height: 30vh;
  filter: blur(300px);
  background: radial-gradient( 283.49% 82.62% at 17.96% 18.74%, #FF7C35 0%, #FF6A00 50.48%, #7D0000 100%);
}


.idxBg{
  
  
  z-index: -1;
  width: 3222px;
  transform: rotate(165deg);
  height: 1452px;
  background: radial-gradient( 283.49% 82.62% at 17.96% 18.74%, #FF7C35 0%, #FF6A00 50.48%, #7D0000 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #000000;
  filter: blur(300px);
  -webkit-transform: rotate(165deg);
  -moz-transform: rotate(165deg);
  -ms-transform: rotate(165deg);
  -o-transform: rotate(165deg);
}

.footer-panel {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  /* border-radius: 24px 24px 0 0; */
  transform: translateY(100%);
  transition: transform .5s ease-out;
  will-change: transform;
}
.footer-panel.is-open { transform: translateY(0); }

.idxContact{ height: 100vh;   }
/* .idxContact .title{font-size: 1.86rem;} */
.idxContact .color-jian{  background-image: linear-gradient(90deg, #00A6CC 0%, #7800F8 100%);;}
.w58{ width: 58%;}

.footer-panel { will-change: transform; }
.footer-panel.is-open { transform: translateY(0); }

.picker{ background: url(../images/pickerBg.png) no-repeat center right .3rem / auto 38%;}

#dateInput:focus {
  border-color: #764ba2;
}

/* 日期面板 */
.datepicker {position: absolute;bottom: calc(100% + 6px);left: 0;width: 280px;background: #fff;border-radius: 12px;box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);padding: 14px;display: none;z-index: 100;user-select: none;animation: dpFadeIn 0.18s ease;}
@keyframes dpFadeIn {from { opacity: 0; transform: translateY(-6px); }to   { opacity: 1; transform: translateY(0); }}
.datepicker.show {display: block;}
/* 头部导航 */
.dp-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;}
.dp-nav {background: none;border: none;font-size: 22px;color: #764ba2;cursor: pointer;width: 30px;height: 30px;border-radius: 6px;line-height: 1;transition: background 0.15s;}
.dp-nav:hover {background: #f0ecfa;}
.dp-title {font-size: 15px;font-weight: 600;color: #333;}
/* 星期表头 */
.dp-weekdays {display: grid;grid-template-columns: repeat(7, 1fr);margin-bottom: 6px;}
.dp-weekdays span {text-align: center;font-size: 12px;color: #999;padding: 4px 0;}
/* 日期网格 */
.dp-days {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;}
.dp-day {aspect-ratio: 1;display: flex;align-items: center;justify-content: center;font-size: 13px;border-radius: 6px;cursor: pointer;transition: background 0.12s, color 0.12s;color: #333;}
.dp-day:hover {background: #f0ecfa;}
.dp-day.other-month {color: #ccc;}
.dp-day.today {font-weight: 700;color: #764ba2;border: 1px solid #764ba2;}
.dp-day.selected {background: #764ba2;color: #fff;font-weight: 600;}
.dp-day.selected.today {border-color: #fff;}
.dp-day.disabled {color: #eee;cursor: not-allowed;}
.dp-day.disabled:hover {background: none;}
/* 底部按钮 */
.dp-footer {display: flex;justify-content: space-between;margin-top: 10px;padding-top: 10px;border-top: 1px solid #f0f0f0;}
.dp-footer button {background: none;border: none;font-size: 13px;cursor: pointer;padding: 4px 10px;border-radius: 6px;transition: background 0.15s;}
.dp-today {color: #764ba2;font-weight: 600;}
.dp-today:hover {background: #f0ecfa;}
.dp-clear {color: #999;}
.dp-clear:hover {background: #f7f7f7;}


.idxContact button.submit{ 
  /* background: radial-gradient( 110.77% 110% at 50.93% 90%, #74CAFF 0%, rgba(89,179,255,0) 100%), #3B72FF;
  box-shadow: 0px 3 11px 0px rgba(77,179,255,0.4), 0px 2 7px 0px rgba(255,255,255,0.94);
  border-radius: 9px 9px 9px 9px;
  border: 1px solid rgba(0,0,0,0.1); */
  background: url(../images/inputBg.jpg) no-repeat center center / 100% 100%;


}
.idxContactBtn{ position: absolute; left: 0; bottom: 0;}

.neiBan{ background: url(../images/neiBanBg.jpg) no-repeat center bottom / 100% auto;}
.neiBan .title strong{ font-size: 2.3rem; color: rgba(255,255,255,0.05);}
.neiBan .title span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }

/* .neiBan::after{
  display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0;
  background: radial-gradient( 283.49% 82.62% at 17.96% 18.74%, #C635FF 0%, #0900FF 50.48%, transparent 100%);
} */

 
.listInner{ width:12.5rem;   margin: 0 auto;  }
/* .sunNav{height: .8rem;} */
.sunNav li{ line-height: .8rem; opacity: .3;}
.sunNav li.on,.sunNav li:hover{ opacity: 1;}
.sunNav li a::after{ width: 1em;; height: 2px; display: block; content: ''; background:#D9D9D9; transition: all .36s; transform:scale(0,1) ; position: absolute; left: 50%; margin-left: -.5em; bottom: 0; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(0,1) ; -moz-transform:scale(0,1) ; -ms-transform:scale(0,1) ; -o-transform:scale(0,1) ; }
.sunNav li.on a::after,.sunNav li:hover a::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); }
.sunNav li a::before{  display: block; content: ''; position: absolute; top: calc(100% - .17rem); left: 50%; margin-left: -.77rem;
  width: 1.54rem;  
  height: .34rem;
  background: radial-gradient( 50% 50% at 50% 50%, #D9D9D9 0%, rgba(115,115,115,0) 74.04%);
  border-radius: 0px 0px 0px 0px;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
  mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
 }

 .sunNav li.on a::before{  opacity: 0.35;}
 

 .caselist{ display: grid; grid-gap: .7rem .6rem; grid-template-columns: repeat(2,1fr);}
 .caselist li{   perspective: 1200px; }
.caselist li .img{ aspect-ratio: 110 / 53;} 
.caselist li:hover .bg-222{ background: var(--color);}
@property --percentage {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false
}

@keyframes wrap-border {
  0% {
    --percentage: 0%
  }

  to {
    --percentage: 100%
  }
}

@media(hover:hover) {
  .animated-border {
    --duration: 700ms;
    --easing: cubic-bezier(0.4, 0.14, 0.3, 1);
    --percentage: 0%;
    position: relative
  }
}

@media(hover:hover)and (prefers-reduced-motion:reduce) {
  .animated-border {
    --percentage: 100%;
    --duration: 0s
  }
}

@media(hover:hover) {
  .animated-border:after {
    background: linear-gradient(135deg, var(--cds-border-interactive, #4698FF), var(--cds-border-interactive, #947FFF) var(--percentage), transparent var(--percentage), transparent) border-box;
    /*background: linear-gradient(135deg, var(--cds-border-interactive, red), var(--cds-border-interactive, blue) var(--percentage), transparent var(--percentage), transparent) border-box;
    */border:1px solid transparent;
    border-radius: .2rem;
    content: "";
    inset: 0;
    -webkit-mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000, #000) padding-box exclude, linear-gradient(#000, #000);
    position: absolute  ;
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    -ms-border-radius: .2rem;
    -o-border-radius: .2rem;
}

  .animated-border:hover:after {
    animation: wrap-border var(--duration) var(--easing) forwards
  }
}

@media(hover:hover)and (prefers-reduced-motion:reduce) {
  .animated-border:after {
    opacity: 0;
    transition: opacity .24s cubic-bezier(.2, 0, .38, .9)
  }

  .animated-border:hover:after {
    opacity: 1
  }
}

.location .icon-arrow-right2-copy{ transform: scale(.8); -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); }
.location a:hover{ color: #fff;}
.border-jian{ 
   /* 设置边框宽度，这里用 padding 模拟或者保留 border 空间 */
   border: 1px solid transparent; 
   /* 关键：背景裁剪 */
   background-image: linear-gradient(#000, #000), linear-gradient(120deg, #947FFF,rgba(255,255,255,.5), #4698FF);
   background-origin: border-box;
   background-clip: padding-box, border-box;

}
.responsibilitiesUl{ display: grid; grid-gap: .2rem; grid-template-columns: repeat(3,1fr); }
.responsibilitiesUl li{ box-shadow: inset 0 0 .1rem rgba(255, 255, 255, 0.5);}
.footNav a:hover,.footNav a.on{ color: #fff;}


:root {
  --bg-darkest: #0A0A0A; --bg-dark: #0F0F0F; --bg-surface: #161616; --bg-elevated: #1E1E1E;
  --text-primary: #FFFFFF; --text-secondary: #A0A0A0; --text-tertiary: #555555;
  --accent: #C9A96E; --border-subtle: rgba(255,255,255,0.06); --border-accent: rgba(201,169,110,0.35);
  --item-height: .8rem; --ease: cubic-bezier(0.22,0.61,0.36,1);
}


/* Effect Section */
.be-effect {   }
.be-effect-box { display: flex; height: calc(var(--item-height) * 5);    overflow: hidden; }

/* Left Nav */
.be-side-nav { flex: 0 0 1.4rem; position: relative; height: 100%; overflow: hidden;  }
.be-side-nav::after{ display: block; content: ''; width: 1px; height: 100%; position: absolute; right: 0; top: 0;background:linear-gradient(to bottom,transparent,#fff,transparent); } 
.be-nav-list { list-style: none; position: absolute; top: 0; left: 0; right: 0; }
.be-nav-item { height: var(--item-height); display: flex; align-items: center;  justify-content: center; position: relative; cursor: pointer;  letter-spacing: 2px; color: #fff; transition: opacity 0.3s ease, color 0.3s ease; white-space: nowrap; }
.be-nav-item::before { content: ''; position: absolute;  right: -1px;  top: 50%; width: 0; height: 2em; background:#fff; transform: translateY(-50%); transition: width 0.3s ease; }
.be-nav-item.be-active { color: #fff; font-size: 1.1em; }
.be-nav-item.be-active::before { width: 4px; }
.be-nav-item:hover { color: var(--text-secondary); }
 
.be-content-area { flex: 1; display: flex; justify-content: space-between;  height: 100%;padding-left: 0.8rem; }
.be-image-area { position: relative; overflow: hidden; background: #161616; border-radius: .2rem; -webkit-border-radius: .2rem; -moz-border-radius: .2rem; -ms-border-radius: .2rem; -o-border-radius: .2rem; }
.be-image-area .be-img-layer { border-radius: .2rem; position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 0.35s ease; }
.be-image-area .be-img-layer.be-hidden { opacity: 0; }
.be-image-area::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.15) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.25) 100%); pointer-events: none; z-index: 1; }

.be-text-area {  width: 35%; position: relative; overflow: hidden;  }
.be-panel { position: absolute; inset: 0;   transition: opacity 0.35s ease, transform 0.35s ease; }
.be-panel.be-hidden { opacity: 0; transform: translateX(30px); pointer-events: none; }
.be-panel .item{display: grid; grid-gap: .25rem .3rem; grid-template-columns: repeat(4,1fr);}

 

@media screen and (max-width:767px) {
  :root { --nav-width: 120px; --item-height: 56px; }
  .be-effect-box{ height: auto;}
  .be-content-area{ padding-left: 0;}
  .be-image-area{ height: 3.5rem;}
  .be-image-area .be-img-layer{ height: 3.5rem;}
  .be-panel{ position: relative;}
}