/*通用*/
/*#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}


.mainpage{opacity: 1;position: relative;padding-top:calc(8vh + 4rem); font-size:1.6rem;height: 100vh;padding-bottom: 8vh;}




.header{opacity: 1;position: absolute;top:8vh;width: 100%;font-size:1.6rem;z-index: 10;}
.header .menu{text-align: center;  /* 让li在ul内部居中 */
  list-style: none;    /* 去掉前面的点 */
  padding: 0;          /* 去掉默认内边距 */
  margin: 0;           /* 去掉默认外边距 */}
.header .menu li{display: inline-block;margin: 0 10px;line-height:2rem;}
.header .menu li:nth-child(4){display: none}
.header .menu li a:hover,.header .menu li a.active{color: var(--color-main);font-size: 120%;}
.header .menu .logo{display:none}

@media (max-width:768px){
	.header{top:4vh;}
	.mainpage{padding-top:calc(2vh + 4rem);}
	.header .menu .logo{display:block;cursor:pointer;background: url("../Images/logo.svg") no-repeat left bottom;background-size:auto 100% ;width: 25%;height: 40px;position: absolute;margin-top: -10px;}
	.header .menu{text-align: left;margin-left: 0;text-align: right;font-size: 1.5rem}
	.header .menu li{margin: 0 0 0 10px; text-align: right}
	
}


/*bottom*/

.bottom{position: absolute;bottom: 8vh;clear: both;overflow: hidden}

.bottom .logo{width:125px;height: 60px; cursor:pointer;background: url("../Images/logo.svg") no-repeat left bottom;background-size:100% auto;margin-bottom: 1rem;}
ul.sns{width: 100%;opacity: 0.5}
ul.sns li a{width:3.5rem;height:3.5rem;display:inline-block;float: left;margin-right:1.3rem;-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;}
ul.sns li a:hover{transform: scale(1.1);}
ul.sns li:nth-child(1) a{ background: url("../Images/icon/icon_ins.svg") no-repeat center center; background-size: 100% auto;}
ul.sns li:nth-child(2) a{ background: url("../Images/icon/icon_xiaohongshu.svg") no-repeat center center; background-size: 100% auto;}
ul.sns li:nth-child(3) a{ background: url("../Images/icon/icon_WeiXin.svg") no-repeat center center; background-size: 100% auto;}
ul.sns li:nth-child(4) a{ background: url("../Images/icon/icon_Pinterest.svg") no-repeat center center; background-size: 100% auto;}

.contact{clear: both;padding-top: 1rem;opacity: 0.5}



@media (max-width:768px){
	.bottom{position: absolute;bottom: 2vh;width: 100%;left: 0;line-height: 1.2;font-size: 1.3rem}
	ul.sns {display: flex;justify-content: center;  /* 水平居中 */}
	ul.sns li a{width:2.5rem;height:2.5rem;}
	.contact{text-align: center}
	.bottom .logo{display: none}
}

/*home*/

.page_home .header{width: 100%;}
.page_home .header .menu{text-align: left;margin-left: 50%;}
.page_home .header .menu li{margin: 0 20px 0 0; }
.page_home .header .menu li:nth-last-child(1){display: block}
.page_home .bottom .sns,.page_home .bottom .contact{opacity: 1}
.page_home .bottom .logo{display: none}

.home_left{width: 40%;float: left;height:calc( 83vh - 4rem);display: flex;justify-content: center; /* 水平居中 */ align-items: center;     /* 垂直居中 */}
.home_left .info img{width:35%;margin-bottom: 2rem;}
.home_right{width: 50%;float: right;height:calc( 83vh - 4rem);}
.home_slide{width: 100%;height:calc( 83vh - 3.5rem);}
.page_home .header .menu li:nth-last-child(1){float: right;margin-right: 0;}

@media (max-width:768px){
	.page_home .header .menu .logo{display: none}
	.page_home .header .menu{text-align: left;margin-left: 10%;text-align: right}
	.page_home .header .menu li{margin: 0 0 0 10px; text-align: right}
	.home_left,.home_right{width: 100%;height:auto;float: left;margin-top: 2rem;}
	.home_slide{height:auto;aspect-ratio: 19 / 16;}
	
}



/*project*/
ul.project,ul.products{width: 100%;}
.img_top{width: 100%;height: 40vh;}
ul.project li:nth-child(1){}
ul.project li:nth-child(2),ul.products li:nth-child(2){float: right;width: 25%;margin-left: 1rem;margin-top: -1.5rem;}
ul.project li:nth-child(3),ul.products li:nth-child(3){float: right;width: 25%;margin-top: -1.5rem;}

ul.project a,ul.products a{}

.pagesort{width: 100%;height:calc( 83vh - 3rem);}

.othersort{color: var(--color-main);bottom: 8vh;float: right;padding-left: 1.5rem;background: url("../Images/icon/icon_Next.svg") no-repeat left center;background-size: auto 2rem;margin-top: -2rem;}
.pagesort{min-height: 650px}

@media (max-width:768px){
	.pagesort{padding-top: 4rem;}
	ul.project,ul.products{margin-top: 3rem}
	ul.project li:nth-child(1),ul.products li:nth-child(1){margin-bottom: 10px}
	ul.project li:nth-child(2),ul.products li:nth-child(2){width: calc(50% - 5px);margin-top:0;margin-left:0;}
	ul.project li:nth-child(3),ul.products li:nth-child(3){width: calc(50% - 5px);margin-left:0;margin-right: 10px;margin-top: 0;}
	
	.othersort{position: relative;float: right;bottom: 3vh;}

	.pagesort .swiper-container { width: 100%;height:calc( 74vh - 4rem); /* 高度足以容纳两个 slide */}
	
	.pagehonor .pagesort .swiper-container { width: 100%;height:510px; /* 高度足以容纳两个 slide */}
	.pagehonor .text{display: none}
}


/*productsview*/

.productsview,.projectview{height: calc(83vh - 3.5rem);}
.productsview .info,.projectview .info{width: 20%;height: auto;float: left; }
.productsview .photo,.projectview .photo{width: 55%;height:80vh;float: right;margin-right: 20%;}
.productsview .photo .content,.projectview .photo .content{height:calc( 83vh - 3.5rem);}
.productsview .photo img,.projectview .photo img{margin-bottom: 10px;}

@media (max-width:768px){
	.productsview,.projectview{margin-top: 2rem;}
	.productsview .info{width: 100%;height: 26vh;float: left;margin-top: 2rem;}
	.productsview .photo{width: 100%;height: 46vh;float: left;margin-right:0;}
	.productsview .photo img,.projectview .photo img{margin-bottom: 10px}
	.productsview .photo .content{height:calc( 50vh - 3.5rem);}
	
	.projectview .info{width: 100%;height: 20vh;float: left}
	.projectview .photo{width: 100%;height: 65vh;float: left;margin-right:0;}
	.projectview .photo .content{height:calc( 65vh - 3.5rem);}
	
	
	.mCSB_inside > .mCSB_container{margin-right: 0}
}

.pagesort .swiper-button-next:after,.pagesort .swiper-rtl .swiper-button-prev:after,.pagesort .swiper-button-prev:after,.pagesort .swiper-rtl .swiper-button-next:after{content:''; }
.pagesort .swiper-button-prev,.pagesort .swiper-rtl .swiper-button-next{top:calc( 50% - 3rem); background: url("../Images/icon/icon_prev.svg") no-repeat center center;width: 30px;height: 30px;left:auto; margin-left: -30px;}
.pagesort .swiper-button-next,.pagesort .swiper-rtl .swiper-button-prev{top:calc( 50% - 3rem);background: url("../Images/icon/icon_Next.svg") no-repeat center center;width: 30px;height: 30px;right:auto;right: -30px;}
.pagesort .swiper-slide {display: flex;flex-direction: column; /* 纵向排列：图片在上，文字在下 */text-align: left;}
.pagesort .swiper-slide img {height: auto;}
.pagesort .swiper-slide .text{text-align: left;width: 100%;margin-top: 1rem;text-transform: uppercase;}
				

@media (max-width:768px){
	.pagesort .swiper-button-prev, .pagesort .swiper-rtl .swiper-button-next{right:-22px; transform: rotate(90deg);top:calc( 50% - 0.7rem); width: 20px;height: 20px;background: url("../Images/icon/icon_prevB.svg") no-repeat center center;}
	.pagesort .swiper-button-next,.pagesort .swiper-rtl .swiper-button-prev{top:calc( 55% - 0.7rem);transform: rotate(-270deg);width: 20px;right:-22px;height: 20px;background: url("../Images/icon/icon_NextB.svg") no-repeat center center;}
	.pagesort .swiper-slide .text{line-height: 1.2}
	.pagesort .swiper-slide {display: block;flex-direction:row;}
}



.popup{ display: none; text-align: center; padding: 3rem 4rem 5rem 4rem; overflow: hidden;font-size: 1.4rem;}
.popup img{ width:100%;margin-bottom:1rem;}



/* 黑白效果
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;}*/

