.mainpage{width:100%;margin-top: 6rem;opacity: 0}

.header{width: 100%;height:6rem;background: rgba(255,255,255,0);position: fixed;top: 0;line-height: 6rem;z-index: 25;pointer-events:none}

.logo{width: 50%;font-size: 1.4rem;float: left;pointer-events:auto;}
nav{width: 50%;float: right;pointer-events:auto}
nav li{float: right;margin-left: 2rem;font-size: 0.8rem;}
nav li:before,.mobile-inner-nav a.active:before{content: '■ ' ;font-size: 0.8rem; font-family: "黑体";color: rgba(0,0,0,0.01)} 
nav li.active:before,nav li:hover:before,.mobile-inner-nav a.active:before{color: rgba(0,0,0,1)}

.home_top{}
.home_top .right_box{width: 18%;height: 51.55vh;float: right;background: url("../upload/01.jpg") no-repeat center right;background-size: auto 100%;}
.home_top .left_top{width: calc(82% - 2%);height:25vh;float:left;background: url("../upload/02.jpg") no-repeat center right;background-size: auto 100%;}
.home_top .left_bottom{width: calc(82% - 2%);height:16.55vh;float:left;background: rgba(0,0,0,0.01) url("../upload/03.jpg") no-repeat center right;background-size: auto 100%;margin-top: 10vh;}
.home_top .left_bottom:hover{background: rgba(0,0,0,0.15) url("../upload/03.jpg") no-repeat center right;background-size: auto 100%;}
.home_top .left_bottom article{padding: 1.5rem;font-size: 1.2rem;font-style: italic;}


.home_work{padding: 6rem 0;overflow: hidden;width: 100%;clear: both;margin-bottom: 4rem;}
ul.worklist{padding: 6rem 0 2rem 0; display: flex;flex-wrap: wrap;}
ul.worklist li{width:22%;float: left;margin-right: 4%;margin-bottom: 4%;}
ul.worklist li:nth-child(4n){margin-right: 0}
ul.worklist li a{position: absolute;text-align: center;bottom:1rem;font-size: 0.8rem;border: 1px solid rgba(0,0,0,0.5);background:rgba(255,255,255,0.5); color: #000;right: 1rem;padding: 0 0.8rem;}
ul.worklist li a::after{content: '>>';font-size: 10px;padding-left: 4px}
ul.worklist li a:hover{border: 1px solid rgba(255,255,255,0.5);background:rgba(0,0,0,0.5); color: #FFF;}
.more{width: 100%;font-size: 1rem;text-align: center}
.more a{ border: 1px solid #000; padding: 0.3rem 2rem;}
.more a:hover{background: #000;color: #FFF;}


.image-container { position: relative; aspect-ratio: 8/5; /* 保持容器 16:9 比例 */overflow: hidden;}
.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; }

.home_server{position: relative;margin-bottom: 6rem;}
.home_server .swiper{padding: 6rem 0 0 0}
.home_server .swiper-slide{-webkit-filter: brightness(50%);filter: brightness(50%);}
.home_server ul{ position: absolute;bottom: -35px;width: 75%;margin-left: 25%;z-index: 2;}
.home_server ul li{float: left;width: 60px;margin-right: calc(20% - 60px); position: relative}
.home_server ul li i{width:60px;height: 60px;display:inline-block;border-radius: 30px;}
.home_server ul li:nth-child(1) i{background:#FFF url("../Images/icon/icon_communication.png") no-repeat center center; background-size: 60% auto;}
.home_server ul li:nth-child(2) i{background:#FFF url("../Images/icon/icon_design.png") no-repeat center center; background-size: 60% auto;}
.home_server ul li:nth-child(3) i{background:#FFF url("../Images/icon/icon_Confirmation.png") no-repeat center center; background-size: 60% auto;}
.home_server ul li:nth-child(4) i{background:#FFF url("../Images/icon/icon_Production.png") no-repeat center center; background-size: 60% auto;}
.home_server ul li:nth-child(5) i{background:#FFF url("../Images/icon/icon_Completion.png") no-repeat center center; background-size: 60% auto;}
.home_server ul li dd{position: absolute;text-align: right;bottom: 110px;color: #FFF;font-size: 1.6rem;right: 50px;transform:rotate(30deg);white-space:nowrap;width: 15rem;}


.home_contact{width: 60%;margin: 5rem auto;overflow: hidden;}
.home_contact .sns{ text-align:center;margin: 2rem auto}
.home_contact form{margin-top: 5rem;}
.home_contact form li{width: 48%;float: left;margin-bottom: 3rem;}
.home_contact form li:nth-child(2){padding-left: 0}
.home_contact form li:nth-child(2){padding-left: 4%;}
.home_contact form li input[type="text"]{width: 100%;border: 0;border-bottom: 1px solid #000;margin-top: 0.5rem;line-height: 1.6;border-radius: 0;}
.home_contact form li:nth-child(3),.home_contact form li:nth-child(4){width: 100%}
.home_contact form li:nth-child(3) textarea{width: 100%;border:1px solid rgba(0,0,0,0);border-bottom: 1px solid #000;margin-top: 1.5rem;border-radius: 0;height: 6rem;}
.home_contact form li:nth-child(4){ text-align:center;}
.home_contact form li:nth-child(4) input{background: #FFF;border: 1px solid #000; padding: 0.5rem 2rem;color: #000;}
.home_contact form li:nth-child(4) input:hover{background: #000;color: #FFF;cursor:pointer;}



.work_detail{margin-top: 10rem;margin-bottom: 10rem;overflow: hidden}
.work_detail .left{width:52%;float: left;}
.work_detail .right{width: 40%;float: left; margin-left: 8%;}
.work_detail .right ul{}
.work_detail .right ul li{margin: 3rem 0;}
.work_detail .right ul li.size{font-size: 1rem;}
.work_detail .right ul li.size span{width: 5.5rem;display: block;float: left}

.preview{margin: 1.2rem 0}
.preview li{width:calc(20% - 0.75rem);margin-bottom: 1rem; margin-right:1rem;float: left;overflow: hidden;}
.preview li:nth-child(5n){margin-right: 0}

.preview li.active{box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* 添加阴影 */}
.preview li:hover {cursor: pointer; /* 鼠标移上去显示手型 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* 添加阴影 */}
.preview li img{display: block;}

.Related{clear: both; margin: 10rem 0;width: 100%;}


.page_about{ margin: 0 auto; width: 50%;text-align: center;padding-bottom: 6rem;}
.page_about>img{width: 50%;text-align: center;margin: 6vh auto;}


.title{text-align: center;clear: both;overflow: hidden}
.title p{font-size: 1rem;}


.sns li{width:24px;height: 24px;display:inline-block;margin: 0 0.4rem;overflow: hidden}
.sns li img{width: 24px;}
.sns li:hover{transform: scale(1.2);cursor:pointer;}
.sns li:nth-child(1){ background: url("../Images/icon/messenger.svg") no-repeat center center; background-size: 100% auto;}
.sns li:nth-child(2){ background: url("../Images/icon/whatsapp.svg") no-repeat center center; background-size: 100% auto;}
.sns li:nth-child(3){ background: url("../Images/icon/weiChat.svg") no-repeat center center; background-size: 100% auto;}

.location{}
.location span{font-size: 10px;padding: 0 0.5rem;}

.popup{ display: none; text-align: center; padding: 3rem 2rem; overflow: hidden;font-size: 1rem;}
.popup img{ width:100%;margin-bottom:1rem;}

@media screen and (max-width:760px){
	
	.header{height:3rem;line-height: 3rem;}
	.header nav{display: none}
	.logo{width: 50%;font-size: 1rem;float: left;}
	.mainpage{margin-top: 3rem}
	
	
	.title{margin: 0 20px;}
	.title p{font-size: 0.8rem;}
	
	
	.home_top .right_box{width: 25%;}
	.home_top .left_top{width: calc(75% - 2%);}
	.home_top .left_bottom{width: calc(75% - 2%);overflow: hidden}
	.home_top .left_bottom article{padding: 0.7rem 1.5rem;font-size: 1rem;font-style: italic;color:#FFF;background: rgba(0,0,0,0.5);box-sizing:border-box;height: 100%;}
		
	ul.worklist {padding: 3rem 0}
	/*ul.worklist li{width:calc(50% - 10px);float: left;margin-right: 20px;margin-bottom:20px;}*/
	ul.worklist li{width:calc(100%);float: left;margin-bottom:20px;margin-right: 0;}
	ul.worklist li:nth-child(2n){margin-right: 0}
	
	ul.worklist li a{font-size: 0.6rem;border: 1px solid rgba(0,0,0,0.5);width:auto;right: 0.5rem;padding: 0 0.5rem;bottom:0.5rem;}
	
	
	.home_work{padding:6rem 0  3rem 0}
	
	
	.home_server{}
	.home_server .swiper{padding: 3rem 0;}
	.home_server .swiper .swiper-slide{border: 1px solid;}
	.home_server .swiper .swiper-slide img{object-fit: cover; width: 100%;height: 50vh;}
	
	.home_server ul {width: 100%;margin: 0;}
	.home_server ul li{float: none;width: 100%;line-height: 8vh;}
	.home_server ul li i {display: none}
	.home_server ul li dd{position: relative;transform:rotate(0);text-align: center;width: 100%;font-size: 1.2rem;display: block;left: 0;margin: 0}
	
	
	.home_contact{width: 100%;}
	
	.home_contact form li{width:calc(50% - 10px);}
	.home_contact form li:nth-child(2){padding-left:20px;}
	
	.work_detail{margin-top: 4rem;}
	.work_detail .left{width:100%;float: left;}
	.work_detail .right{width:100%;float: right;}
	.work_detail .right h3{text-align: center;padding-top: 3rem;}
	
	.page_about{ margin: 0 20px; width: auto;text-align: center;}
	.page_about>img{width: 50%;text-align: center;margin: 6vh auto;}
	
}


/* 黑白效果
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;}*/