/*通用*/
/*#ea5703;*/
.space_top_1{ padding-top:1em;}
.space_top_2{ padding-top: 2em;}
.space_top_3{ padding-top: 3em;}
.space_top_4{ padding-top: 4vh;}
.space_memu{ padding-top:5em}

.lastboxspace{margin-bottom: 16rem;}

body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.mainpage{opacity: 1;}

.topscroll{background: var(--color-bg);width: 100%;height:3.5rem;font-size: 1.7rem;position: relative;z-index: 20;}
.topscroll *{line-height:3.5rem;}

.header{overflow: hidden;width: 100%;}
.logo{background: url("../Images/logo.svg") no-repeat left center;background-size: auto 7rem ;margin: 3.5rem 0;width: 25%;height: 7rem;float: left;position: relative;z-index: 20;cursor: pointer;}

.menu{width: 40%;float: right;height:14rem;padding: 4.7rem 0; }
.menu ul{font-size: 2.7rem;display: flex;justify-content: space-between;  /* 让列表项均匀分布 */ list-style-type: none;  /* 去掉列表项的默认样式 */}
.menu ul li{float: right;flex: 1; /* 让每个 li 平均分配可用空间 */display: flex;  justify-content: flex-end;text-align: right;position: relative; cursor: pointer}
.menu-item span {  position: absolute;  width: 100%; left: 0;transition: opacity 0s ease-in-out, transform 0s ease-in-out;}
.menu-item .cn { opacity: 1; transform: translateY(0); }
.menu-item .en { opacity: 0; transform: translateY(100%); }
.menu-item:hover .cn {  opacity: 0;transform: translateY(-100%);}
.menu-item:hover .en { opacity: 1;transform: translateY(0);}

.home_slide,.home_top_show{width: 100%;position: relative;margin-bottom: 9rem;}

.about_box{overflow: hidden;width: 100%}
.about_box>ul>li>h1{margin-bottom: 2rem}
.about_box ul li{width: 50%;float: left;padding-bottom: 8.7rem}
.about_box ul li:nth-child(1){font-size:6rem;padding-right: 10%;line-height: 1.2;}
.about_box ul li:nth-child(2) article{padding-left: 1.7rem;padding-top: 0.7rem}
.about_box ul li:nth-child(1) a{font-size: 2.4rem;padding-left: 3.5rem;background: url("../Images/icon/icon_link.svg") no-repeat left center;background-size: 2.7rem auto;text-decoration: underline;line-height:2.5 ;}

.topline>ul{margin-top: 3.4rem;}


.space_box{margin-top: 3rem;overflow: hidden;width: 100%;padding-top:1.4rem;clear: both;}
.space_box>ul>li{width: 50%;float: left;}
.space_box>ul>li:nth-child(1){font-size:6rem;/*padding-right: 10%;*/line-height: 1.4;}
.space_box>ul>li:nth-child(2){font-size:2.2rem;line-height: 1.4;padding-left: 1.7rem}
.space_box>ul>li:nth-child(1)>a{font-size: 2.4rem;padding-left: 2.4rem;background: url("../Images/icon/icon_link.svg") no-repeat left center;background-size: 2rem auto;text-decoration: underline;line-height: 3;}
.space_box>ul>li>h4{color: #969696}
.space_box ul li:nth-child(2) article{overflow: hidden;line-height: 1.4}

.content ul li{font-size: 2.2rem;overflow: hidden;}
.content ul li p{margin-bottom: 3rem;}
.content li article{padding-bottom: 8rem;padding-left: 1.7rem;}
.space_box>.content>li:nth-child(1){float: right}
.space_box>.content>li:nth-child(2){float: left}


.space_box ul li a{color: #b5b5b5}
.space_box ul li a:hover{color:var(--color-text)}

.about_client{padding-top:1.4rem;margin-top: 16rem;}
.about_client ul{clear: both;padding-bottom: 8rem;overflow: hidden;}
.about_client ul li{width: calc(16.66% - 1.66rem);margin-right: 2rem;float: left}
.about_client ul li{width: calc(12.5% - 1rem);margin-right: 1rem;float: left} 
.about_client ul li:nth-child(8n){margin-right: 0}
.about_client>.title>h2{}

.about_awards{padding-top:1.4rem;clear: both;}
.about_awards>ul{clear: both;padding-bottom: 13rem;overflow: hidden;}
.about_awards>ul>li{width: 50%;float: left;}
.about_awards>ul>li:nth-child(2){padding-left: 1.7rem;}
.about_awards>ul>li>ul{display: flex; flex-wrap: wrap; /* 允许换行 */gap: 2rem; }
.about_awards>ul>li>ul>li{flex: 0 0 calc((100% - 4rem) / 3);}
/*.about_awards>ul>li>ul>li:nth-child(2n+1){clear: both}*/
/*.about_awards>ul>li>ul>li img{height: 8rem;width: auto;}*/


.vjs-play-control .vjs-icon-placeholder:before {
    content: ''; /* 清空默认内容 */
    background: url('../Images/iconi/icon_PlayNew.svg') no-repeat center center;
    background-size: contain;
    display: block;
    width: 40px;   /* 根据你的图标大小调整 */
    height: 40px;
}


@media (min-width: 768px) and (max-width:1460px){
	
	.logo{width: 40%;}
	.menu{width: 55%;}
	
	
	.about_box ul li:nth-child(1){width: 32%;padding-right: 0;}
	.about_box ul li:nth-child(2){width: 68%;padding-left:1rem;}
	
	.space_box>ul>li:nth-child(1){width: 32%;padding-right: 0;}
	.space_box>ul>li:nth-child(2){width: 68%;padding-left: 3.4rem;}
	
	.about_awards>ul>li:nth-child(1){width: 32%;padding-right: 0;}
	.about_awards>ul>li:nth-child(2){width: 68%;padding-left: 3.4rem;}
	
	.space_box>.content>li:nth-child(1){width: 68%;}
	.space_box>.content>li:nth-child(2){width: 32%;padding-left: 0;}
	
	.about_box h1{font-size: 5rem;}	
	.content li article{padding-left: 3.4rem;}
}

@media (min-width: 768px) and (max-width:960px){
	.about_box h1{font-size: 4rem;}	

}


@media (max-width:768px){
	.header .wrapper{height:75px}
	.logo{width: 60%;position: absolute;}
	
	.home_slide_mobile{margin-bottom: 6rem;}
	.about_box ul li{width: 100%;padding-bottom: 4rem}
	.about_box li:nth-child(2){padding-bottom: 11rem;}
	
	.space_box>ul>li:nth-child(1){width: 50%;padding-right: 0;padding-left:0}
	.space_box>ul>li:nth-child(2){width: 50%;padding-left: 0;/* margin: 0 0 11rem*/}
	
	
	.about_client ul li:nth-child(8n){margin-right: 2rem}
	.about_client ul li{width: calc(33.33% - 1.33rem);margin-right: 2rem;}
	.about_client ul li:nth-child(3n){margin-right: 0}
	
	.about_awards>ul>li:nth-child(1),.about_awards>ul>li:nth-child(2){padding-left:0;width: 100%;}
	.about_awards>ul>li>ul{margin-top: 5rem;}
	.joinus_box ul li{width: 100% !important;padding-left: 0!important;}
	
	.space_box>ul>li:nth-child(3){width: 50% !important;;padding-left: 0!important;;/* margin: 0 0 11rem*/ position: absolute;right: 0;}
	.joinus_box ul li:nth-child(1){font-size: 1rem;}
	
	.about_box ul li:nth-child(2) article{padding-left: 0;}
	
	.space_box>ul.content>li{width: 100%}
	.content ul li{width: 50%;}
	.content ul li:nth-child(1){float: left}
	.content ul li:nth-child(2){float: right}
	.content li article{padding-left:0;}
}


.worktextbutton{position: relative;width: 4rem;height: 4rem;display: block;float: left}
.worktextbutton img{width: 3.5rem;position: absolute;top:0.57rem}
.worktext .space_box{margin-top:0!important}

.worktext .space_box ul li h3{color: #808080}


.topline{border-top: 1px solid #b5b5b5;}
.topgreyline{border-top: 1px solid #BBB;}
.title{width:100%;line-height: 1.2;padding-bottom:4rem;}
.title h2 sup{font-size: 2rem; position: relative;top: -1rem;}
.title h2 sup::before{content: ' ('}
.title h2 sup::after{content: ')'}
.title dl{width: 50%;float: right;padding-left: 1.7rem;margin-top: -4.7rem;}

.worklist{clear: both;width: 100%;overflow: hidden;padding-top:1.4rem;padding-bottom: 6rem;}
.worklist ul{}
.worklist li{width: calc(25% - 2.55rem);margin-right: 3.4rem;float: left;margin-bottom:4.5rem;font-size: 2.4rem;cursor: pointer;overflow: hidden}

/*.worklist li{padding-right: 3.4rem;}
.worklist li:nth-child(4n){padding-right: 0;}*/

.worklist li:nth-child(4n){margin-right: 0;}
.worklist li a{line-height: 2.5;white-space:nowrap;text-overflow: ellipsis;}

.worklist li img,.worklist li video{aspect-ratio: 3/2;object-fit: cover;}

.workpage{margin-bottom: 6rem}
.workpage>h2,.newspage1>h2{margin-bottom: 9rem;font-size: 6rem;margin-top: 5.4rem;}
.workpage .space_box .title{padding-bottom: 3rem;}
.workpage .space_box .title>h2{width: calc(50% - 3.7rem);}
.workpage .worklist{ margin-bottom: 2rem;}
.newspage{margin-top: 5.4rem}
.newspage>h2{margin-bottom: 9rem;font-size: 6rem;line-height: 1.2;}

.workpage .footer{ margin-top: 4.5rem}
.workpage .title dl{margin-left: 0;padding-left: 1.7rem;top: 0;position: absolute;margin-top: 0;right:0;}
.worktext{padding-bottom: 3rem}
.worktext .space_box>ul>li{padding-left: 0;}

.about_publication ul{padding-bottom: 17rem;overflow: hidden}
.about_publication>ul>li:nth-child(1){padding-left: 0;}

.otherwork .title dl{padding-left: 1.7rem}

.workpage .title{position: relative}

@media (min-width: 768px) and (max-width:1460px){
	
	.title dl{width: 68%;padding-left: 2.7rem;}
	/*.title .desktop h2{display: none}*/
	.worklist li:nth-child(4n){margin-right: 3.4rem;}
	.worklist li{width: calc(33.3% - 2.26rem);margin-right: 3.4rem;}
	.worklist li:nth-child(3n){margin-right: 0;}
	.about_publication>ul>li{width:100% !important;}
	.otherwork .title dl{padding-left: 3.4rem}
	.otherwork .worklist li:nth-child(4){display: none}
	
	.workpage .space_box .title>h2{width: calc(32% - 3.7rem);}
	.workpage .title dl{padding-left: 3.4rem;}
}


@media (max-width:768px){
	
	.worklist li:nth-child(3n){margin-right:2.6rem}
	.worklist li{width: calc(50% - 1.3rem);margin-right:2.6rem;padding-bottom:0;}
	.worklist li:nth-child(2n){margin-right: 0;}
	.about_publication>ul>li{width:100% !important;}
	.worktextbutton img{top:0.5rem}
	.workpage .title dl{padding-left: 1.7rem}
	.workpage .space_box .title>h2{width: calc(50% - 3.7rem);}
}



.more{width: 100%; text-align: center;font-size: 2.4rem;height: 4rem;line-height: 4rem; position: relative;clear: both;padding-top: 3rem;padding-bottom: 7rem}
.more a{text-align: center;color: #b2b2b2;display: inline-block;text-decoration: none; position: relative;}
.more a:hover{color: #000;}

.workpage .more{margin-top: 2.5rem;}

.gotop{width: 100%;position: fixed;bottom: -34rem;left: 0;pointer-events:auto;z-index: 10;opacity: 0;}
.gotop a{width: 10rem; height: 10rem;background: url("../Images/icon/icon_gotop.svg") no-repeat center center;background-size: 100% auto;cursor: pointer;display: block;float: right}

.newslist{clear: both;/*margin-top: 5.4rem;*/margin-bottom: 6rem}
.newslist ul{}
.newslist .more{margin-top: 2rem;}

.sorttitle {font-size: 2rem;color: #808080;}
.newdetail_top .sorttitle {font-size: 3rem;color: #000;}
.sorttitle span{padding:0;}
.sorttitle span:nth-child(1){float: left;letter-spacing:0.5px;}
.sorttitle span:nth-child(2){float: right;}
.sorttitle .type_caogaoxiang{background: #d9b7fa;}/*草稿箱*/
.sorttitle .type_shejirichang{background: #d3fd95;}/*设计日常*/
.sorttitle .type_meiti{background: #caf6fd;}/*媒体*/
.sorttitle .type_huodong{background: #edfc75;}/*活动*/
.sorttitle i{width: 2.3rem;height:3.2rem;line-height: 3.2rem;border-radius: 1.3rem;display: block;float: right;margin-left: 0.6rem;font-size: 1.8rem;cursor:pointer;font-style:normal}
.sorttitle i:nth-child(2){width: auto;padding-right: 3px}


.sorttitle i.share{background: url("../Images/icon/icon_shareN_B.svg") no-repeat center center;background-size: 100% auto;}
.sorttitle i.like{background: url("../Images/icon/icon_likeN_B.svg") no-repeat center center;background-size: 100% auto;}
.sorttitle i.like:hover{background: url("../Images/icon/icon_likeNed_B.svg") no-repeat center center;background-size: 100% auto;}
.sorttitle i.liked{background: url("../Images/icon/icon_likeNed_B.svg") no-repeat center center;background-size: 100% auto;}
.sorttitle i.liked:hover{background: url("../Images/icon/icon_likeN_B.svg") no-repeat center center;background-size: 100% auto;}




.newspage{width: calc(50% - 1.7rem);float: right;margin-top: 8.4rem;margin-bottom: 6rem;}
.newspage_top .sorttitle{ color: #000;padding-bottom: 6rem; overflow: hidden}
.newspage_top .sorttitle h2{border-bottom:1px solid #b5b5b5;padding-bottom: 1rem;margin-bottom: 1rem;}
.newspage_top .sorttitle span{font-size: 2.2rem;}
.newspage_top .sorttitle span:nth-child(4){float: right;}
.newspage_top .sorttitle .right{padding-top: 1rem;}
.newspage_top .sorttitle i{width: 4.3rem;height:4.2rem; margin-left: 2rem}
.newspage_top .sorttitle i:nth-child(1){width:3.3rem;padding-right: 3px}

.news_page_info li{margin-bottom: 3rem; overflow: hidden}
.news_page_info li.text h3{ font-size:3.2rem;margin-bottom: 2rem;}
@media (min-width: 768px) and (max-width:1460px){
	.newspage{width: 66%;}
}

@media (max-width:768px){
	.newspage{width:100%;}
}






.work_photo{}
.work_photo{width: 100%;overflow: hidden;padding-bottom: 15rem;}

.work_photo li.single{width: 100%;margin-bottom: 3.4rem;clear: both;float: left}
.work_photo li.doubleA>dd,.work_photo li.doubleB>dd{width: calc(50% - 1.7rem);margin-bottom: 3.4rem;margin-right: 3.4rem;float: left}
.work_photo li.doubleA>dd:nth-child(2n),.work_photo li.doubleB>dd:nth-child(2n){margin-right: 0;}
.work_photo li.doubleA,.work_photo li.doubleB{display: flex;float: left;width: 100%;}
.work_photo li.doubleA>dd{flex:1}
.work_photo li.single video{display: block}

.double_updown{display: grid;row-gap:2.4rem;grid-template-rows: 1fr 1fr;}

.download{clear: both;overflow: hidden;opacity: 0}
.download a{background: url("../Images/icon/icon_download.svg") no-repeat left center;background-size: auto 4rem; padding-left: 5rem;font-size: 2.4rem}
.download span{padding:3rem 3.4rem;background: #FFF;display: inline-block;margin-left: 3.4rem;}

@media (max-width:768px){ 

.work_photo li.doubleA>dd,.work_photo li.doubleB>dd{width: calc(50% - 1.3rem);margin-bottom: 2.6rem;margin-right: 2.6rem;float: left}
	.work_photo li.single{margin-bottom: 2.6rem;}
}



.newdetail_top{padding: 3.5rem 0 0.5rem 0;border-bottom: 1px solid;overflow: hidden;}

.newdetail{padding: 0 3.4rem; overflow: hidden;margin-bottom: 3.4rem;}
.newdetail>h2{padding-top: 2rem;}
.newdetail>article{padding: 4rem 0 0 0;overflow: hidden}



.sub_menu{font-size:2.2rem;clear: both;margin: 5rem 0 3rem 0;overflow: hidden;display: block}
.sub_menu a{margin-right: 2rem;color: #b3b3b3}
.sub_menu a:hover,.sub_menu a.active{color: #1e1e1e}


.footer{clear: both;overflow: hidden;}
.footer ul{margin: 6rem 0 12rem 0;overflow: hidden;}
.footer li:nth-child(1) img{width: auto;height: 7rem;}
.footer li{width: calc(25% - 2.55rem);margin-right: 3.4rem;float: left;font-size: 2.4rem;}
.footer li:nth-child(4n){margin-right: 0;}
.footer li a{text-decoration: underline;}

@media (min-width: 768px) and (max-width:1460px){
	.footer li{width: calc(33% - 2.26rem);margin-right: 3.4rem;float: left;font-size: 2.4rem;margin-bottom: 5rem;}
	.footer li:nth-child(3n){margin-right: 0;}
	.footer li:nth-child(4n){margin-left: calc(33% - 2.26rem + 3.4rem);margin-bottom:0}

}


@media (max-width:768px){ 
	.work_photo li.doubleB{display: block}
	.work_photo li.doubleB>dd{width:100%;margin-right: 0;}	
	.doubleB .double_updown>dl{ aspect-ratio: 3 / 2;}
	
	
	.newdetail{padding: 0 3.7%;}
	.footer li{width: 47.5%;margin-right: 5%;margin-bottom: 5rem;}
	.footer li:nth-child(1){float: left} 
	.footer li:nth-child(2n){margin-right: 0;}
	.footer li:nth-child(3),.footer li:nth-child(4){margin-left: 52.5%;}
	.footer li:nth-last-child(1){margin-bottom: 0}
	.download{margin-left: 50%;margin-bottom: 3rem;}
	.double_updown{row-gap:3.4rem;}
}



@media (max-width:768px){
	.top_banner{display: none}
	.download span{opacity: 0}
}

 /* 通用 Tooltip 样式 */
.tooltip-box {
	position: absolute;
	background-color: #FFFFFF;
	color: #1e1e1e;
	padding:3rem 3.4rem;
	max-width: 70rem;
	 word-wrap: break-word;
	font-size: 2.2rem;
	display: none;
	pointer-events: none; /* 避免 tooltip 影响鼠标交互 */
	display: n1one;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影美观 */
}
.tooltip-box img{max-width: 200px;}
/* 需要 tooltip 的元素 */
.tooltip-target {
	/*cursor: help;*/
}




 .filter-buttons {margin-bottom: 4.8rem;width: 100%;overflow: hidden;padding-top: 1rem}

 .filter-buttons button {margin-right: 2rem;font-size: 2.2rem;border: none;cursor: pointer;background: none;color: #b3b3b3;padding-left: 0;}
.filter-buttons button.active,.filter-buttons button:hover {color:#000;}
.filter-buttons button:nth-last-child(1){margin-right: 0;}
 .grid {
      display: flex;
      flex-wrap: wrap;
		margin-left: -1.7rem;
		margin-right: -1.7rem;
	 margin-top: 2rem;margin-bottom: 6rem;
		 
    }
.workpage .grid{margin-bottom: 0;}
    .grid-item {
      padding: 1.7rem; /* 控制列间距 */
      box-sizing: border-box;overflow: hidden;
		margin-bottom: -2.5rem;
		
    }
.workpage .grid-item{margin-bottom: 1.5rem;}
    .grid-item-inner {
      transition: all 0.4s ease;
		overflow: hidden;
      height: 100%;/*aspect-ratio: 3/2*/
    }
	.grid-item-inner>a{line-height: 2.5;font-size: 2.4rem;white-space:nowrap;text-overflow: ellipsis;}

    .grid-item video {
      width: 100%;
      height: auto;
		overflow: hidden;
		background: none;
    }

    .grid-sizer,
    .grid-item {
      width: 100%;
    }

    @media (min-width: 1460px) {
      .grid-sizer,
      .grid-item {
        width: 25%;
      }
    }

    @media (min-width: 769px) and (max-width: 1459px) {
      .grid-sizer,
      .grid-item {
        width: 33.3333%;
      }
    }

    @media (max-width: 768px) {
      .grid-sizer,
      .grid-item {padding: 1.3rem; 
        width: 50%;
      }
		.grid {margin-left: -1.3rem;
			margin-right: -1.3rem;}
		
		
		
/*		.filter-buttons button{width: 17%;margin-right: 0;text-align: left;float: left}
		.filter-buttons button:nth-child(1){width: 12%;}
	 .filter-buttons button:nth-child(7), .filter-buttons button:nth-child(12), .filter-buttons button:nth-child(17){margin-left: 12%;}*/
		
		.newslist .filter-buttons button{width: auto}
		.newslist .filter-buttons button:nth-child(5), .newslist .filter-buttons button:nth-child(8), .newslist .filter-buttons button:nth-child(11){margin-left: 0;}
    }

    .hide {
      display: none !important;
    }

    .fade-in {
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .fade-in.show {
      opacity: 1;
    }

.video_box{aspect-ratio: 3/2}
.video_box video{width: 100%;height:100%; aspect-ratio: 3/2;object-fit: cover;}



.card{
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease-in-out;
position: relative;
}
.card .symbol{position: absolute;top:1.5rem;left: 1.5rem;font-size: 2.1rem;border-radius: 1.6rem;padding: 0.1rem 1.5rem;background: #FFF;}
.card h3{margin: 1rem 0 1.5rem 0;}
.card__picture{
  display: block;
  width: 100%;
  height: auto;
}
.card-infos{
  padding: 1rem 0 4rem 0;
}
.card-infos .preview{margin:1rem 0 0 0;font-size: 2rem;color: #808080;text-align: justify;display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制为 3 行 */
  /*-webkit-box-orient: vertical;*/
  overflow: hidden;
  text-overflow: ellipsis;margin-bottom: 1rem; /* 给最后一行留点余地 */
	
  }
.card-infos h3{line-height: 1.2}
.sortable__nav{
  display: flex;
  margin-bottom: 20px;
}
.sortable__nav li{width: auto;}
.sortable__nav li a{color: #b3b3b3;margin-right:2.4rem;font-size: 2.4rem}
.sortable__nav li a.is-active{
	
	color: #000
}
/*.nav__link,.sort__link{
  padding: 0 20px 4px;
  font-size: 1.4rem;
  font-weight: 300;
  display: block;
  border-bottom: 2px solid transparent;
}
.nav__link.is-active,.sort__link.is-active{
  border-color: var(--main-bg-color);
}*/

.sjs-default {
	position: relative;
	padding: 0;
	margin: 0;
	opacity: 0;
	transition: height .2s ease-out, opacity .2s ease-out .2s
}
[data-sjsel] {
opacity:0;
position:absolute;
top:0;
left:0;
transition:-webkit-transform .2s ease-out;
transition:transform .2s ease-out;
transition:transform .2s ease-out, -webkit-transform .2s ease-out
}

@media (max-width:768px){
	.sortable__nav{display: block;width: 100%;overflow: hidden}
	.sortable__nav li{width: 20%;float: left}
	.sortable__nav li:nth-child(5n+1){margin-left: 20%;}
	.sortable__nav li:nth-child(1){margin-left: 0}
	.sortable__nav li a{margin-right:0.8rem;}
	
	
}






.underline-anim::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  height: 3px;
  width: 0;
  background: #2ecc71;
  transform: translateX(-50%);
  animation: underline-center 2s ease-in-out infinite;
  border-radius: 2px;
}

/* 动画关键帧 */
@keyframes underline-center {
  0% {
    width: 0;
    opacity: 0.6;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0.6;
  }
}

/* ===== 悬停触发动画（保留对比） ===== */
.underline-hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  height: 3px;
  width: 0;
  background: #27ae60;
  transform: translateX(-50%);
  transition: width 0.4s ease;
  border-radius: 2px;
}

.underline-hover:hover::after {
  width: 100%;
}








/* 遮罩层 */
	.overlay {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(51, 51, 51, 0.75);
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	/* 弹出框 */
	.layer {
		position: relative;
		width: 80rem;
		max-width: 100%;
		height: 90vh;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		transform: translateY(-20px);
		transition: transform 0.3s ease;
	}
	
	

	/* 关闭按钮 */
	.close_btn {
		position: absolute;
		top: -1rem;
		right: -7rem;
		width: 6rem;
		height:  6rem;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: url("../Images/icon/icon_Close.svg") center center no-repeat;
		background-size: 3rem auto;
	}
	/* 分享按钮 */
	.share_btn {
		position: absolute;
		top: 11rem;
		right: -7rem;
		width: 6rem;
		height:  6rem;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: url("../Images/icon/icon_shareN.svg") center center no-repeat;
		background-size: 3rem auto;
		
	}
	/* like按钮 */
	.like_btn {
		position: absolute;
		top: 11rem;
		right: -7rem;
		
		top: 5rem;
		right: -7rem;
		
		width: 6rem;
		height:  6rem;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: url("../Images/icon/icon_likeN.svg") center center no-repeat;
		background-size: auto 3rem ;
	}
	.like_btned {
		position: absolute;
		top: 5rem;
		right: -7rem;
		width: 6rem;
		height:  6rem;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: url("../Images/icon/icon_likeNed.svg") center center no-repeat;
		background-size: auto 3rem ;
	}
	

@media (min-width: 768px) and (max-width:1460px){
		.layer {width: 75%;}
		
	}
@media (max-width:768px){
		.layer {width: 100%;top:5vh;margin: 0 3.7%;height: 85vh;}
		.close_btn{position: absolute;top: -7rem;right: -1rem;}
		.share_btn{position: absolute;top: -7rem;right: 11.5rem;}
		.like_btn {position: absolute;top: -7rem;right:5rem;}
		.like_btned {position: absolute;top: -7rem;right: 5rem;}
	}

	/* iframe 内容区域 */
	.content {
		width: 100%;
		height: 100%;
		border: none;
	}
.content li{}
@media (max-width:768px){
	.content li{padding-left:0;}
}
	/* 当 overlay 显示时的状态 */
	.overlay.show {
		opacity: 1;
		visibility: visible;
	}

	.overlay.show .layer {
		transform: translateY(0);
	}



.scroll-to-top {
      position: fixed;
      right: calc((100% - 1710px)/2);
      bottom: 20px;
      width: 10rem;
      height: 10rem;
      /*background: black;
      color: white;
      text-align: center;
      line-height: 48px;
      border-radius: 50%;
      font-size: 24px;*/
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 99;
		background: url("../Images/icon/icon_UP.svg") no-repeat center center;
    }

    .scroll-to-top.visible {
      opacity: 1;
      pointer-events: auto;
    }

@media (min-width: 1360px) and (max-width:1800px){
	.scroll-to-top{right:3.7%}
	}

@media (min-width: 768px) and (max-width:1360px){
	.scroll-to-top{right:3.7%}
	}
@media (max-width:768px){
	.scroll-to-top{right:4%}
}




.scroll-container {
      
      overflow: hidden;
      white-space: nowrap;
      position: relative;

    }

    .scroll-text {
      display: inline-block;
      animation: none;
      transition: transform 0.3s;
      transform: translateX(0); /* 初始左对齐 */
    }

    @keyframes scrollText {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
#background_video { 
			  position: absolute; 

			  top: 100%; left: 0; 
			  object-fit: cover; 
			  height: 100%; width: 100%; 
			} 

.container {display: flex;}
.container .left{width: 5.5rem;white-space:nowrap;padding: 3px 0}
.container .right {flex: 1; /* 或使用不同宽度比例 */ max-width: 1000px}

@media (max-width:768px){
	.container .left{padding: 0.1rem 0}
}



.imgcover {
  position: relative;
  display: inline-block;
  overflow: hidden;cursor:pointer;
}

.imgcover::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 黑色透明背景 */
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.imgcover:hover::before {
  opacity: 1;
}

.imgcover img {
  display: block;
  transition: filter 0.4s ease;
}

.imgcover:hover img {
  filter: brightness(80%);
}

.imgcover .overlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	z-index:2;
  height: 100%;
  background-color: rgba(0,0,0,0); /* 默认透明 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-size: 3rem;
}

.imgcover:hover .overlayer {cursor:pointer;
  background-color: rgba(0, 0, 0, 0.5); /* 鼠标移上时变暗 */
  opacity: 1;
}


/*.image {image-rendering: pixelated;}*/
.image-container {overflow: hidden;aspect-ratio: 1000/1360;}
.image-container .image {width: 100%;height: 100%;/*transition: opacity 0.3s ease-in-out;*/}


.image-container { position: relative; /* 保持容器 16:9 比例 */overflow: hidden;cursor:pointer;}
.image-container img {  width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;transition: opacity 0.3s ease;}
.image-container img.hidden { opacity: 0; }




.hover-box {
    width: 100%;
	  margin: 0 auto;
    aspect-ratio: 1920 / 1080;
    position: relative;
    overflow: hidden;
    cursor: pointer;
	  
  }

  .hover-box img,
  .hover-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;text-align: center;
    /*transition: opacity 0.3s ease;*/
    opacity: 0;
	  position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    /*transition: opacity 0.3s ease;*/
    opacity: 0;
    object-fit: contain; /* 保持比例，不裁剪 */
	  
  }

  .hover-box img.active,
  .hover-box video.active {
    opacity: 1;
  }

@media (max-width:768px){
	.hover-box {
    aspect-ratio: 2000 / 2720;

	  
}


/* 黑白效果
html {
        filter: grayscale(100%); 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        -webkit-filter: grayscale(1);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}*/