@charset "utf-8";
.bg{background-color:#e2e6ed}



/*頁面寬度*/
.content1{width:100%;overflow:hidden;padding:20px 0;}
.content2{width:80%;overflow:hidden;padding:20px 0;margin:auto}
.content3{width:100%;overflow:hidden;}



.banner1,.banner2{width:100%;padding:5% 0 3% 0;margin:10px 0 0 0;text-align:center;color:#FFFFFF;overflow:hidden;background-repeat:no-repeat;background-position:center top;text-shadow:3px 3px 5px #000000;background-size:100% auto}
.banner1{background-image: url("../img/banner/banner-s.webp");background-color:#2f4363}
.banner2{background-image: url("../img/banner/banner-p.webp");background-color:#142859}


.banner2-1,.banner2-2,.banner2-3,.banner2-4,.banner2-5,.banner2-6,.banner2-7,.banner2-8{width:90%;margin:1% auto 1% auto;min-height:200px;padding:7% 0 0 0;text-align:center;color:#FFFFFF;overflow:hidden;background-repeat:no-repeat;background-position:center top;text-shadow:3px 3px 5px #000000;border-radius:10px;background-size:100% auto}
.banner2-1{background-image: url("../products/products1.webp")}
.banner2-2{background-image: url("../products/products2.webp")}
.banner2-3{background-image: url("../products/products3.webp")}
.banner2-4{background-image: url("../products/products4.webp")}
.banner2-5{background-image: url("../products/products5.webp")}
.banner2-6{background-image: url("../products/products6.webp")}
.banner2-7{background-image: url("../products/products7.webp")}
.banner2-8{background-image: url("../products/products8.webp")}



.item-box{width:90%;margin:0 auto 10% auto; text-align:center;overflow:hidden;padding:20px 0;}
.item{width:330px;padding:30px 30px 40px 30px;margin:0.5%;text-align:left;background-color:#FFFFFF;border-radius:10px;box-shadow:0px 0px 3px 3px rgba(0,0,0,0.1);vertical-align:top;}
.item p{text-align:left;line-height:25px;font-weight:normal;}
.item img{width:80%;margin:0 10% 20px 10%;}
.item h2{font-size:16px;border-bottom:solid 1px #DCDCDC;border-top:solid 1px #DCDCDC;color:#B9B9B9;text-align:center;margin:10px 0 }
.item h3{text-align:center}

.item-ph1{height:150px}
.item-ph2{height:260px}
.item-ph2-2{height:160px}
.item-ph3{height:220px}
.item-ph4{height:160px}
.item-ph6{height:150px}
.item-ph7{height:200px}
.item-ph8{height:150px}






.s1{background-image:url("../services/services1.webp");background-position:left top;}
.s2{background-image:url("../services/services2.webp");background-position:right top;}
.s3{background-image:url("../services/services3.webp");background-position:left top;}
.s1,.s2,.s3{width:84%;height:658px;background-size:auto 100%;background-repeat:no-repeat;overflow:hidden;display:flex;align-items:center;justify-content:center;}

.s1{padding:0 0 0 16%;}
.s2{padding:0 16% 0 0;}
.s3{padding:0 0 0 16%;}



.s1-icon{background-image:url("../services/services-icon-1.webp");background-position:left center}
.s2-icon{background-image:url("../services/services-icon-2.webp");background-position:right center}
.s3-icon{background-image:url("../services/services-icon-3.webp");background-position:left center}
.s1-icon,.s2-icon,.s3-icon{width:40%;background-size:180px;height:auto;background-repeat:no-repeat;overflow:hidden;}

.s1-icon{padding:0 0 0 300px;margin:0 0 0 10%;float:left;}
.s2-icon{padding:0 300px 0 0;margin:0 10% 0 0;float:right;text-align:right;}
.s3-icon{padding:0 0 0 300px;margin:0 0 0 10%;float:left;}









@media screen and (max-width:1851px){
.item-box{width:100%;}	
	


.s1-icon,.s2-icon,.s3-icon{width:40%;background-size:180px;}
.s1-icon{padding:0 0 0 270px;margin:0 0 0 10%;float:left;}
.s2-icon{padding:0 270px 0 0;margin:0 10% 0 0;float:right;text-align:right;}
.s3-icon{padding:0 0 0 270px;margin:0 0 0 10%;float:left;}
	
	
}
@media screen and (max-width:1681px){
.item{margin:1%;}	
	
	
	
.s1,.s2,.s3{height:588px;}
	
.s1-icon{padding:0 0 0 270px;margin:0 0 0 15%;float:left;}
.s2-icon{padding:0 270px 0 0;margin:0 15% 0 0;float:right;text-align:right;}
.s3-icon{padding:0 0 0 270px;margin:0 0 0 15%;float:left;}	
}
@media screen and (max-width:1537px){
.banner2-1,.banner2-2,.banner2-3,.banner2-4,.banner2-5,.banner2-6,.banner2-7,.banner2-8{width:100%;padding:8% 0 0 0;border-radius:0;}	



.s1,.s2,.s3{height:558px;}


}
@media screen and (max-width:1441px){

.s1-icon,.s2-icon,.s3-icon{width:40%;background-size:160px;}	
.s1-icon{padding:0 0 0 200px;margin:0 0 0 15%;}
.s2-icon{padding:0 200px 0 0;margin:0 15% 0 0;}
.s3-icon{padding:0 0 0 200px;margin:0 0 0 15%;}		
	
	
}
@media screen and (max-width:1367px){

.s1,.s2,.s3{height:558px;}
.s1{background-image:url("../services/services1t.webp");}
.s2{background-image:url("../services/services2t.webp");}
.s3{background-image:url("../services/services3t.webp");}		
	
.s1-icon,.s2-icon,.s3-icon{width:50%;}	
.s1-icon{margin:0 0 0 8%;}
.s2-icon{margin:0 8% 0 0;}
.s3-icon{margin:0 0 0 8%;}		
}
@media screen and (max-width:1281px){
/*頁面寬度*/
.content1{width:100%;overflow:hidden;padding:20px 0;}
.content2{width:100%;overflow:hidden;padding:20px 0;margin:auto}
.content3{width:100%;overflow:hidden;}
	
.item-box{width:90%;}
		
.banner1,.banner2{width:100%;padding:7% 0 5% 0;}
.banner1{background-image: url("../img/banner/banner-s2.webp");}
.banner2{background-image: url("../img/banner/banner-p2.webp");}	
	

.s1-icon,.s2-icon,.s3-icon{width:50%;}	
.s1-icon{margin:0 0 0 15%;}
.s2-icon{margin:0 15% 0 0;}
.s3-icon{margin:0 0 0 15%;}		
	
}
@media screen and (max-width:1178px){	
.banner1,.banner2{margin:0;}
.s1,.s2,.s3{height:500px;}
	
}
@media screen and (max-width:1098px){	

.s1,.s2,.s3{height:450px;}	
.s1-icon,.s2-icon,.s3-icon{width:50%;background-size:150px;}	
.s1-icon{padding:0 0 0 180px;margin:0 0 0 15%;}
.s2-icon{padding:0 180px 0 0;margin:0 15% 0 0;}
.s3-icon{padding:0 0 0 180px;margin:0 0 0 15%;}			
	
	
}
@media screen and (max-width:1025px){
.banner2-1,.banner2-2,.banner2-3,.banner2-4,.banner2-5,.banner2-6,.banner2-7,.banner2-8{width:100%;min-height:150px;padding:10% 0 5% 0;background-size:100% auto}	
	
	
}
@media screen and (max-width:961px){
.item{width:310px;padding:20px 20px 30px 20px;}	

.s1,.s2,.s3{height:400px;}	
.s1-icon,.s2-icon,.s3-icon{width:50%;background-size:120px;}	
.s1-icon{padding:0 0 0 150px;margin:0 0 0 15%;}
.s2-icon{padding:0 150px 0 0;margin:0 15% 0 0;}
.s3-icon{padding:0 0 0 150px;margin:0 0 0 15%;}	
}
@media screen and (max-width:901px){

	
}
@media screen and (max-width:865px){
.item-box{width:90%;}	

	
}
@media screen and (max-width:819px){

}
@media screen and (max-width:769px){
.banner2-1,.banner2-2,.banner2-3,.banner2-4,.banner2-5,.banner2-6,.banner2-7,.banner2-8{width:100%;min-height:100px;padding:15% 0 5% 0;background-size:100% auto }
.banner2-1{background-image: url("../products/products1s.webp")}
.banner2-2{background-image: url("../products/products2s.webp")}
.banner2-3{background-image: url("../products/products3s.webp")}
.banner2-4{background-image: url("../products/products4s.webp")}
.banner2-5{background-image: url("../products/products5s.webp")}
.banner2-6{background-image: url("../products/products6s.webp")}
.banner2-7{background-image: url("../products/products7s.webp")}
.banner2-8{background-image: url("../products/products8s.webp")}

.item{width:280px;padding:20px 20px 30px 20px;}	
.item-ph1{height:180px}
.item-ph2{height:280px}
.item-ph2-2{height:180px}
.item-ph3{height:240px}
.item-ph4{height:160px}
.item-ph6{height:180px}
.item-ph7{height:220px}
.item-ph8{height:150px}
	
	
.s1,.s2,.s3{width:100%;height:auto;padding:70% 0 20% 0;background-size:100% auto ;}	
.s1{background-image:url("../services/services1s.webp");background-position:center top;}
.s2{background-image:url("../services/services2s.webp");background-position:center top;}
.s3{background-image:url("../services/services3s.webp");background-position:center top;}	
	

.s1-icon,.s2-icon,.s3-icon{width:90%;padding:180px 0 0 0;margin:auto;float:none;text-align:center;background-size:150px;height:auto;background-repeat:no-repeat;background-position:center top;}


}
@media screen and (max-width:757px){
.banner1,.banner2{width:100%;margin:36px 0 0 0 }
.banner1{background-image: url("../img/banner/banner-s3.webp");}
.banner2{background-image: url("../img/banner/banner-p3.webp");}		
	
.item{width:330px;padding:30px 30px 40px 30px;}	
.item-ph1,.item-ph2,.item-ph2-2,.item-ph3,.item-ph4,.item-ph6,.item-ph7,.item-ph8{height:auto}		
}
@media screen and (max-width:721px){
	
}
@media screen and (max-width:651px){
}
@media screen and (max-width:599px){
}
@media screen and (max-width:569px){

	
}
@media screen and (max-width:526px){
.item{width:80%;padding:8% 8% 12% 8%;margin:3% auto;}	
	
.banner1,.banner2{width:100%;padding:9% 0 7% 0;}
.banner1{background-image: url("../img/banner/banner-s4.webp");}
.banner2{background-image: url("../img/banner/banner-p4.webp");}	
	
.banner2-1,.banner2-2,.banner2-3,.banner2-4,.banner2-5,.banner2-6,.banner2-7,.banner2-8{width:100%;min-height:100px;padding:30% 0 5% 0;background-size:auto 100%;}	
.banner2-1 h3,.banner2-2 h3,.banner2-3 h3,.banner2-4 h3,.banner2-5 h3,.banner2-6 h3,.banner2-7 h3,.banner2-8 h3{line-height:30px}	
	
	
.s1,.s2,.s3{padding:65% 0 30% 0;}		
.s1-icon,.s2-icon,.s3-icon{padding:170px 0 0 0;background-size:130px;}	
}
@media screen and (max-width:481px){
	
}
@media screen and (max-width:460px){
	
}
@media screen and (max-width:415px){

}
@media screen and (max-width:391px){

}
@media screen and (max-width:385px){

}
@media screen and (max-width:376px){
	
	
}
@media screen and (max-width:361px){
	
	
}
@media screen and (max-width:321px){}