/* ------------------------------2025-新 --------------------------------------*/
body{ overflow-y: clip;}

.introduction{  font-size: 0.16rem; color: #fff;}
.introduction .introduction_con{padding-top:1rem;}
.introduction .theme{padding-top: 0.4rem; height: 4.14rem; display: flex; justify-content: space-between; align-items: center; width:80%; margin: 0 auto;}
.introduction .theme dt{ width: 5.2rem;}
.introduction .theme dd{ width: 9.6rem; line-height: 0.3rem; word-spacing: 0.06rem; margin-top: 0.3rem; text-align: justify;}
.introduction .theme dt .num{margin-top: 0.56rem; display: flex; align-items: center;}
.introduction .theme dt .num li{width: 2rem; text-align: center; position: relative;}
.introduction .theme dt .num li::after{ width: 1px; height: 0.16rem; content: ''; position: absolute; top:50%; right: 0; display: block; background-color: #808080; transform: translateY(-50%);}
.introduction .theme dt .num li:last-child::after{opacity: 0;}
.introduction .theme dt .num li span{font-size: 0.35rem; margin-right: 0.1rem;}
.introduction .title{ font-size: 0.45rem; line-height: 0.44rem; color: #ecd097; border-bottom: #4d4d4d 1px solid; padding-bottom: 0.3rem;}
.introduction .title span{width: 3.12rem; display: inline-block; text-transform: uppercase;}
.introduction .theme dd .bo{ font-weight: bold;}
.introduction .v_con_box{width: 80%; height: 8.74rem;margin: 0 auto;}
.introduction .v_con{width: 100%; height: 8.74rem; overflow: hidden;  position: relative; margin: 0 auto;}
.introduction .v_con video{width: 100%; height: 100%; object-fit: cover;  position: absolute; top: 0; left: 0;}
.introduction .v_con img{width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;opacity: 1; transition: all 0.5s;}
.introduction .v_con:hover img{opacity: 0; transition: all 0.5s;}
.introduction .models{width: 80%; margin: 0 auto; margin-top: 1.14rem;}
.introduction .models .content{display: flex; justify-content: space-between;}
.introduction .models .content li{width: 4.86rem; margin-top: 0.58rem;overflow: hidden;}
.introduction .models .content li .pic{width: 100%; height: 2.74rem; overflow: hidden;}
.introduction .models .content li .pic img{width: 100%; transform: scale(1); transition: all 0.5s;}
.introduction .models .content li .pic:hover img{ transform: scale(1.1); transition: all 0.5s}
.introduction .models .content li .w {margin-top: 0.18rem;}
.introduction .models .content li .w .t{font-size: 0.26rem; line-height: 0.46rem;font-weight: bold;text-align: left;}
.introduction .models .content li .w .more{font-size: 0.18rem; line-height: 0.22rem; display: flex; align-items: center; justify-content: space-between; width: 1.24rem; cursor: pointer;}
.introduction .models .content li .w .more span{font-size: 0.16rem; color: #ea0a1f;  }
.introduction .deployment{width: 80%; margin: 0 auto; margin-top: 1.14rem;}
.introduction .deployment .content{width: 100%; /* background: url(../images/introduction/map.jpg) no-repeat top left; background-size: 100% auto; */ height: 9.01rem; position: relative; overflow-y: clip; }
.introduction .deployment .content .bg{width: 100%; height: 100%;}
.introduction .deployment .content .line{width: 7.8rem; position: absolute; top:3.44rem; left:2.58rem;}
.introduction .deployment .content .mapPoint li{position: absolute; font-size: 0.18rem; color: #909090; }
.introduction .deployment .content .mapPoint li.point0{top: 3.86rem; left: 2.86rem;}
.introduction .deployment .content .mapPoint li.point1{top:3.44rem; left: 6.84rem;}
.introduction .deployment .content .mapPoint li.point2{top:4.1rem; left:10.62rem;}
.introduction .deployment .content .mapPoint li.point3{top:4.5rem; left:10.38rem;}
.introduction .deployment .content .mapPoint li a{ display:block; position: absolute; width: 0.16rem; height: 0.16rem; top: 0; left: -0.3rem;background-color: #909090;  content: ''; display: block; border-radius: 50%; cursor:pointer; cursor: pointer;}
/* .deployment .content li a::before{width:100%; height:100%; background-color: #909090; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); content: ''; display: block; border-radius: 50%;}
.deployment .content li a span{width: 0.1rem; height: 0.1rem; border: 1px solid #909090; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%;} */
.introduction .deployment .content .mapPoint li a::after{width:100%; height:100%; content: '';  border-radius: 50%; position: absolute; top:0; left:0;  border: 1px solid #909090;  animation:rippleEffect 4s linear 400ms infinite;}
.introduction .deployment .content .mapPoint li a::before{opacity: 0;width:100%; height:100%; content: '';  border-radius: 50%; position: absolute; top: 0; left:0;  border: 1px solid #909090; animation:rippleEffect 4s linear 200ms infinite; animation-delay: 2s;}
@keyframes rippleEffect {
  0% {
    transform: scale(0); /* 开始时无大小 */
    opacity: 0; /* 完全不透明 */
  }
  50% {
    transform: scale(2); /* 开始时无大小 */
    opacity: 1; /* 完全不透明 */
  }
  100% {
    transform: scale(4); /* 放大到4倍大小 */
    opacity: 0; /* 完全透明 */
  }
}
.introduction .columnpPicCon{ display: flex; justify-content: space-between; width: 80%; height: 3.46rem; /* overflow: hidden; */ margin: 0 auto; padding: 1rem;}
.introduction .columnpPicCon li{/* width: 50%; */ width: 47%; height: 100%; position: relative;}
.introduction .columnpPicCon li .pic{width: 100%; height: 100%; object-fit: cover;}
.introduction .columnpPicCon li .pic img{width: 100%; height: 100%; object-fit: cover;}
.introduction .columnpPicCon li .cover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(43, 42,43, 0.85); opacity: 1; transition: all 0.5s;}
.introduction .columnpPicCon li .con{position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%);}
.introduction .columnpPicCon li .con .t{font-size: 0.4rem; line-height: 0.58rem; text-align: center;  opacity: 1; transition: all 0.5s;}
.introduction .columnpPicCon li .con .c{line-height: 0.24rem;}
.introduction .columnpPicCon li:hover .cover{opacity: 0; transition: all 0.5s;}
.introduction .columnpPicCon li:hover .con .c{ opacity: 0; transition: all 0.5s;}
.introduction .pointContainer{position: absolute; right: -110%; top: 0; width: 14.22rem; height: 8.92rem; background-color: #242424; transition: all 0.5s; z-index: 10;}
.introduction .pointContainer.on{right: -1.9rem; transition: all 0.5s;}
.introduction .pointContainer .close{ width: 0.54rem; height: 0.54rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 5; left: -0.27rem; cursor: pointer;}
.introduction .pointContainer .close img{width: 100%;}
.introduction .pointContainer .t{margin-top: 1.12rem; padding-left: 1rem; margin-bottom: 0.46rem; word-spacing: 0.06rem;}
.introduction .pointContainer .t .subtitle{line-height: 0.26rem; text-align: left;}
.introduction .pointContainer .t .tC{line-height: 0.48rem; font-size: 0.26rem; color: #fff;  text-align: left;}
.introduction .pointContainer .v{margin-left: 1rem; width: 11.56rem; height: 5.78rem; background-color: #000; position: relative;}
.introduction .pointContainer .v video{width: 100%; height: 100%; object-fit: cover;}
.introduction .pointContainer .v a{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.introduction .pointContainer .v a img{width:0.7rem; height: 0.7rem;}
.introduction .team{  width: 80%; margin: 0 auto;margin-top: 0.86rem;}
.introduction .team .title{display: flex; justify-content: space-between; align-items: flex-end;}
.introduction .team .icon{width: 1.34rem;}
.introduction .content{ display: flex; justify-content: end; margin-top: 0.36rem; text-align: right;  word-spacing: 0.06rem;}
.introduction .content .t{font-size: 0.22rem;line-height: 0.46rem; margin-bottom: 0;}
.introduction .content p{ line-height: 0.3rem; margin-bottom: 0.14rem;}
.introduction .desian{ background: url(../images/introduction/desian.png) no-repeat bottom center; background-size: 100% auto;height: 7.56rem; width: 100%;}
.introduction .desian .title{border-bottom:0; width: 80%; margin: 0 auto; padding-top: 0.54rem;}
.introduction .studios{width: 100%; height: auto; background: url(../images/introduction/studios_bg.jpg) no-repeat bottom center; background-size: 100% auto; margin-bottom: 1.14rem;}
.introduction .studios .title{width: 80%; margin: 0 auto; padding-top: 1.12rem; border-bottom: none;}
.introduction .studios .studios_con{width: 17.36rem; height: 7.32rem; margin-top: 0.12rem;}
.introduction .studios .studios_con img{height: 100%;}
.introduction .studios .studios_con .swiper-slide{ width: 11.3rem; color: #fff; padding-left: 0.3rem; height: 7.36rem; position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; padding-right: 0.4rem;}
.introduction .studios .studios_con .swiper-slide::after{ position: absolute; width: 0.2rem; height: 0.2rem; background-color: #fff; border-radius: 50%; content: ''; transform: translateY(-50%); top: 50%; left:0.18rem;}
.introduction .studios .studios_con .swiper-slide::before{position: absolute;width: 100%; height: 1px; background-color: #fff;content: ''; transform: translateY(-50%); top: 50%; left:0;}
.introduction .studios .studios_con .swiper-slide .subtitle{font-size:0.28rem; line-height: 0.34rem;  width: 100%; margin-top: 1.82rem;}
.introduction .studios .studios_con .swiper-slide .time{font-size: 0.4rem; color: #ecd097; margin-top: 0.26rem; margin-bottom: 1.08rem; width: 100%;}
.introduction .studios .studios_con .swiper-slide .pic{width: 100%; height: 3.06rem; display: flex; justify-content: space-between; align-items: center;}
.introduction .studios .studios_con .swiper-slide .pic a{width: 5.44rem; height: 100%; display: block;}
.introduction .studios .studios_con .swiper-slide .pic a img{width: 100%; height: 100%; object-fit: cover;}
.introduction .studios .studios_con .swiper-slide:nth-child(2n){flex-wrap: wrap-reverse; align-items:flex-start; }
.introduction .studios .studios_con .swiper-slide:nth-child(2n) .subtitle{margin-bottom: 1.82rem; margin-top:0}
.introduction .studios .studios_con .swiper-slide:nth-child(2n) .time{margin-bottom: 0.26rem; margin-top: 1.08rem; }
.introduction .studios .studios_con .swiper-slide:last-child::before{width: 0.2rem;}

.introduction .news{padding-top: 1.2rem; width:80%; margin: 0 auto; word-spacing: 0.06rem;}
.introduction .news .theme{width: 100%; padding-top: 0.8rem; align-items: initial; height:auto; margin-bottom: 1.04rem;}
.introduction .news .theme dd{width: 10.2rem; height: 5.74rem; margin-top: 0;}
.introduction .news .theme dd img{width: 100%; height: 100%; object-fit: cover; margin-top:0;}
.introduction .news .theme .t{font-size: 0.3rem; line-height: 0.64rem;}
.introduction .news .theme .con{width: 4.6rem; line-height: 0.3rem; }
.introduction .news .theme .more{color: rgba(255, 255, 255, 0.6); margin-top: 0.36rem; display: flex; width: 1.1rem; height: 0.24rem; align-items: center; justify-content: space-between;}
.introduction .news .theme .more span{color: #ea0a1f; font-weight: bolder;}
.introduction .news .newsList{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.introduction .news .newsList a{ display: block; width: 4.92rem; height: 4.3rem; margin-bottom: 1.08rem; position: relative;}
.introduction .news .newsList a span{display: block;}
.introduction .news .newsList a .pic{ width: 100%; height: 2.78rem; overflow: hidden;}
.introduction .news .newsList a .pic img{scale:1;width:100%; height: 100%; object-fit: cover; transition: all 0.5s;}
.introduction .news .newsList a .pic img:hover{scale:1.1;  transition: all 0.5s;}
.introduction .news .newsList a .time{ margin-top: 0.18rem; line-height: 0.24rem; margin-bottom: 0.08rem;} 
.introduction .news .newsList a .t{ height: 0.72rem; width: 100%; line-height: 0.34rem; display: flex; align-items: center; font-size:0.24rem;}
.introduction .news .newsList a .more{ display: flex; align-items: center; width: 1.12rem; justify-content: space-between; position: absolute; bottom: 0; left: 0; color: rgba(255, 255, 255, 0.6);}
.introduction .news .newsList a .more span{color: #ea0a1f; font-weight: bolder;}
.introduction .news .page{display: flex; justify-content: center; align-items: center; margin-bottom: 1.64rem;}
.introduction .news .page a{color: rgba(255, 255, 255, 0.6); font-size: 0.14rem; margin: 0 0.2rem; cursor: pointer;}
.introduction .news .page a.arrow{font-size: 0.18rem;}
.introduction .news .page a.on{color: #fff;}

.introduction .hire{padding-top: 1.2rem; word-spacing: 0.06rem; /* font-size: 0.16rem; */ font-size: 0.2rem;}
.introduction .hire .banner{width: 100%; height: 3.62rem; overflow: hidden; position: relative;}
.introduction .hire .banner img{width: 100%;transform: translateX(-50%); position: absolute; top: 0; left: 50%;}
.introduction .hire .hireCon{width: 80%;  margin: 0 auto; margin-top: 0.76rem; padding-bottom:1.3rem;}
.introduction .hire .hireCon .tab{margin-top: 0.68rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.86rem;}
.introduction .hire .hireCon .tab a{width: 2.56rem; height: 0.46rem; line-height: 0.46rem; text-align: center; display: block; border: #fff solid 1px; border-radius: 0.04rem; margin: 0 0.1rem;background-color:rgba(255, 255, 255, 0); transition: all 0.5s; cursor: pointer;}
.introduction .hire .hireCon .tab a:hover,.introduction .hire .hireCon .tab a.on{background-color: #fff; color: #000; /* */ font-weight: bold; transition: all 0.5s;}
.introduction .hire .hireCon .chooseCon{ width: 80%; margin: 0 auto; }
.introduction .hire .hireCon .chooseCon .conList ul li{/* min-height: 1.02rem; */ position: relative;}
.introduction .hire .hireCon .chooseCon .conList .t{/* font-size: 0.18rem; */ font-size: 0.2rem;  border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 0.32rem;}
.introduction .hire .hireCon .chooseCon .conList .subhead{ height: 0.4rem; padding-top: 0.24rem; display: flex; /* align-items: center; */ padding-bottom: 0.2rem;padding-left: 0.26rem; line-height: 0.4rem; cursor: pointer;}
.introduction .hire .hireCon .chooseCon .conList .subhead span{ /* width: 0.36rem; height: 0.18rem; */width: 0.46rem; height: 0.24rem; background-color: #83261e; border-radius: 0.02rem; /* line-height: 0.18rem; */line-height: 0.24rem; text-align: center; margin-left: 0.1rem; position: relative;}
.introduction .hire .hireCon .chooseCon .conList .subhead span::after{ width: 0;  height: 0;width: 0; height: 0; border-left: 0 solid transparent; border-right: 0.06rem solid transparent; border-top: 0.10rem solid #83261e; display: inline-block; position: absolute; bottom:-0.06rem; left:0; content: '';}
.introduction .hire .hireCon .chooseCon .conList .columnContent{line-height: 0.3rem; }
.introduction .hire .hireCon .chooseCon .conList .columnContent .columnT{}
.introduction .hire .hireCon .chooseCon .conList .columnContent td{border-spacing:0; vertical-align:initial; /* font-size: 0.16rem; */ font-size: 0.2rem;}
.introduction .hire .hireCon .chooseCon .conList .columnContent td:first-child{width:2rem; padding-left: 0.26rem;}  
.introduction .hire .hireCon .chooseCon .conList .columnContent td:last-child{padding-bottom: 0.32rem;}
.introduction .hire .hireCon .chooseCon .conList .columnContent .emailAddress{margin-bottom: 0.2rem; display: flex; justify-content: space-between;width: 80%;}
.introduction .hire .hireCon .chooseCon .conList .columnContent .emailAddress span{ display: block; min-width:4rem;}
.introduction .hire .hireCon .chooseCon .conList .columnContent .emailAddress p{white-space: n;}
.introduction .hire .hireCon .chooseCon .conList .columnContent .emailAddress:last-child{margin-bottom: 0;}
.introduction .hire .hireCon .chooseCon .conList .columnContent .submitBtn{padding:0 0.38rem; line-height: 0.36rem; background-color:rgba(255, 255, 255, 0); height: 0.36rem; display: block; border: #fff 1px solid; color: #fff; margin-left: 0.1rem; transition: all 0.5s; cursor: pointer; }
.introduction .hire .hireCon .chooseCon .conList .columnContent .submitBtn:hover{background-color: #ecd097;  color: #000;  transition: all 0.5s; border: #ecd097 1px solid; }
.introduction .hire .hireCon .chooseCon .conList ul li{background-color: rgba(255, 255, 255, 0);/* transition: all 0.5s; */ border-bottom: #8f8f8f 1px solid;/* min-height: 1.06rem; */ overflow-y: hidden;}
.introduction .hire .hireCon .chooseCon .conList ul li:hover{background-color: rgba(255, 255, 255, 0.12); /* transition: all 0.5s; */}
.introduction .hire .hireCon .chooseCon .arrow{position: absolute; transform: rotate(-90deg); right: 0.34rem; top: 0.24rem; height: 0.4rem;line-height: 0.4rem; cursor: pointer; width: 0.4rem; text-align: center; transition: all 0.5s;}
.introduction .hire .hireCon .chooseCon .conList ul li.on .arrow{transform: rotate(90deg); transition: all 0.5s;}

@media (max-width: 1100px) {
  .introduction{ font-size: 0.24rem; }
  .introduction .hire{ font-size: 0.24rem; }
  .introduction .hire .hireCon{width: 95%;}
  .introduction .hire .hireCon .tab a{ line-height:0.3rem;height: 0.7rem;align-content: center;font-size: 0.22rem; margin: 0 0.05rem; display: table-cell;}
  .introduction .hire .hireCon .chooseCon .conList{min-height: 39vh;;}
  .introduction .hire .hireCon .chooseCon .conList .t{font-size: 0.3rem;}
  .introduction .hire .hireCon .chooseCon{width: 100%;}
  .introduction .hire .hireCon .chooseCon .conList ul li{overflow: hidden;}
  .introduction .hire .hireCon .chooseCon .conList .columnContent td{display: block;    padding:0 0.26rem; font-size: 0.24rem; line-height: 0.36rem; width:calc(100% - 0.26rem);}
  .introduction .hire .hireCon .chooseCon .conList .columnContent td:first-child{margin-bottom: 0.2rem;width: 100%;font-size: 0.26rem;}

  .introduction .hire .hireCon .chooseCon .conList .subhead span{ width: 0.8rem; height: 0.3rem; line-height: 0.3rem; font-size: 0.22rem;}
  .introduction .hire .hireCon .chooseCon .conList .subhead span::after{border-right:0.16rem solid transparent}

  .introduction .v_con_box{width: 90%; height: 4.74rem;}
  .introduction .v_con{height: 4.74rem;}
  .introduction .theme{flex-flow: column; width: 90%; height: auto;}
  .introduction .theme dt{width: 90%;}
  .introduction .theme dd{width: 90%; margin-top: 0.3rem; line-height:0.48rem}
  .introduction .models .content{flex-flow: column;}
  .introduction .models .content li{width: 100%;}
  .introduction .models .content li .w .t{font-size: 0.32rem; line-height: 0.58rem;}
  .introduction .models .content li .w .more{font-size: 0.24rem;     line-height: 0.5rem;}

  .introduction .deployment{width: 95%; height: 40vh;}
  .introduction .deployment .content{height:auto;}
  .introduction .deployment .content .line{width: 51%;
    left: 17%;
    top: 38%;}
  .introduction .deployment .content .mapPoint li{font-size: 0.16rem;}
  .introduction .deployment .content .mapPoint li.point0{top: 41%;
    left: 21%;}
  .introduction .deployment .content .mapPoint li.point1{
    top: 35%;
    left: 46%;}
  .introduction .deployment .content .mapPoint li.point2{        top: 43%;
    left: 71%;}
  .introduction .deployment .content .mapPoint li.point3{        top: 49%;
    left: 69%;}
  .introduction .pointContainer{width: 100%; right: -120%; height: auto;}
  .introduction .pointContainer.on{right: 0;}
  .introduction .pointContainer .t{margin-top: 0.6rem; padding-left: 0.6rem;}
  .introduction .pointContainer .v{margin-left: 0.6rem; width: calc(100% - 1.2rem); height: 3.8rem;}

  .introduction .desian{height: 4.56rem;}

  /* Typography and titles */
  .introduction .title{font-size: 0.34rem; line-height: 0.4rem;}
  .introduction .title span{width: auto;}

  /* Theme numbers layout */
  .introduction .theme dt .num{justify-content: space-between;}
  .introduction .theme dt .num li{width: auto; padding-right: 0.2rem;}
  .introduction .theme dt .num li::after{height: 0.14rem;}
  .introduction .theme dt .num li span{font-size: 0.42rem;}

  /* Models spacing */
  .introduction .models{width: 90%;}
  .introduction .models .content li{margin-top: 0.4rem;}
  .introduction .models .content li .pic{height: auto;}

  /* Team section */
  .introduction .team{width: 90%;}
  .introduction .team .title{align-items: center;}
  .introduction .team .icon{width: 1rem;}
  .introduction .content{justify-content: center; text-align: center;}

  /* Column picture section stacks */
  .introduction .columnpPicCon{width: 90%; height: auto; padding: 0.6rem 0; flex-direction: column;}
  .introduction .columnpPicCon li{width: 100%; height: 3.2rem; margin-bottom: 0.4rem;}
  .introduction .columnpPicCon li:last-child{margin-bottom: 0;}

  /* Studios slider */
  .introduction .studios .title{width: 90%;}
  .introduction .studios .studios_con{width:100%; height: 6rem;}
  .introduction .studios{background-size:auto 100% ;}
  .introduction .studios .studios_con .swiper-slide{width: 80%; height: 7rem;}
  .introduction .studios .studios_con .swiper-slide .pic{height: 2.5rem;}
  .introduction .studios .studios_con .swiper-slide .pic a img{height: auto;}
  
  /* News section - mobile layout */
  .introduction .news{width: 92%; }
  .introduction .news .theme{display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem;}
  .introduction .news .theme dd{width: 100%; height: auto; order: -1;}
  .introduction .news .theme dd img{height: auto;}
  .introduction .news .theme .t{font-size: 0.28rem; line-height: 0.5rem;}
  .introduction .news .theme .con{width: 100%; line-height: 0.36rem;}
  .introduction .news .theme .more{margin-top: 0.24rem;width: 100%;}
  
  .introduction .news .newsList{gap: 0.3rem;}
  .introduction .news .newsList a{width: 100%; height: auto; margin-bottom: 0.4rem;}
  .introduction .news .newsList a .pic{height: 50vw;}
  .introduction .news .newsList a .t{height: auto; line-height: 0.4rem; font-size: 0.28rem;}
  .introduction .news .newsList a .more{position: static; margin-top: 0.12rem;width: 100%;}
  
  .introduction .news .page{margin: 0.8rem 0 1.2rem;}
  .introduction .news .page a{font-size: 0.2rem; padding: 0.08rem 0.14rem;}
  .introduction .hire .hireCon .chooseCon .conList .columnContent .emailAddress{width: 100%;}
}