@charset 'utf-8';

.customized_title{text-align: center; font-size: 36px; text-transform: uppercase;}
.customized_button{text-align: center; margin-top: 30px;}
.customized_button a{display: inline-block; padding: 0 22px; line-height: 30px; border: solid #353535 1px; border-radius: 16px; margin: 0 10px;}
.customized_button a.btn1{color: #353535;}
.customized_button a.btn2{background: #353535; color: #fff;}

.customized_process{}
.customized_process .process_title{text-align: center; padding: 0 50px; font-size: 16px; line-height: 24px; margin-top: 20px;}
.customized_process .process_swiper{position: relative; padding: 30px 1px 60px; overflow: hidden;}
.customized_process .process_swiper .list{border: solid #d6d6d6 1px; padding: 20px;}
.customized_process .process_swiper .list .picture{overflow: hidden;}
.customized_process .process_swiper .list .picture img{width: 100%; transition: all 0.5s;}
.customized_process .process_swiper .list .picture:hover img{transform: scale(1.1);}
.customized_process .process_swiper .list .title{font-size: 18px; margin-top: 20px;}
.customized_process .process_swiper .list .text{margin-top: 5px;}
.customized_process .process_swiper .list .text p{line-height: 20px; color: #666; padding: 5px 0;}
.customized_process .process_swiper .swiper-button{width: 120px; height: 40px; position: absolute; left: calc(50% - 60px); bottom: 0;}
.customized_process .process_swiper .swiper-button-prev,
.customized_process .process_swiper .swiper-button-next{width: 40px; height: 40px; margin: 0; top: 0; background: url("../images/swiper_arrow.png") center no-repeat #999; border-radius: 50%; transition: all 0.5s;}
.customized_process .process_swiper .swiper-button-prev{left: 0;}
.customized_process .process_swiper .swiper-button-next{right: 0; transform: rotate(180deg);}
.customized_process .process_swiper .swiper-button-prev:hover,
.customized_process .process_swiper .swiper-button-next:hover{background-color: #353535;}

.shape_customization{padding-top: 60px;}
.shape_customization .shape_list{margin-top: 20px;}
.shape_customization .shape_list .list{width: 23.5%; float: left; margin-right: 2%; overflow: hidden;}
.shape_customization .shape_list .list:nth-child(4){margin-right: 0;}
.shape_customization .shape_list .list img{width: 100%; transition: all 0.5s;}
.shape_customization .shape_list .list:hover img{transform: scale(1.1);}

.punching_customization{padding-top: 60px;}
.punching_customization .punching_list{margin-top: 20px;}
.punching_customization .punching_list .list{width: 23.5%; float: left; margin-right: 2%; overflow: hidden;}
.punching_customization .punching_list .list:nth-child(4){margin-right: 0;}
.punching_customization .punching_list .list img{width: 100%; transition: all 0.5s;}
.punching_customization .punching_list .list:hover img{transform: scale(1.1);}

.color_customization{padding-top: 60px;}
.color_customization .color_list{margin-top: 20px; background: #f7f7f7; padding: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.color_customization .color_list .list{width: 15%; margin: 20px 0;}
.color_customization .color_list .list img{width: 100%;}

.bottom_customization{padding-top: 60px;}
.bottom_customization .bottom_list{margin-top: 20px;}
.bottom_customization .bottom_list .list{width: 23.5%; float: left; margin-right: 2%; overflow: hidden;}
.bottom_customization .bottom_list .list:nth-child(4){margin-right: 0;}
.bottom_customization .bottom_list .list img{width: 100%; transition: all 0.5s;}
.bottom_customization .bottom_list .list:hover img{transform: scale(1.1);}

.logo_customization{padding-top: 60px;}
.logo_customization .logo_content{background: #f7f7f7; margin-top: 30px; padding: 30px;}
.logo_customization .logo_content .logo_title{font-size: 16px; text-align: center; margin-top: 20px;}
.logo_customization .logo_content .logo_list{margin-top: 50px;}
.logo_customization .logo_content .logo_list .list{width: 22%; float: left; margin: 0 1.5%;}
.logo_customization .logo_content .logo_list .list img{max-width: 100%;}

.pattern_customization{padding-top: 60px;}
.pattern_customization .pattern_content{margin-top: 30px; background: #f7f7f7; padding: 30px; display: flex; justify-content: space-between; align-items: center;}
.pattern_customization .pattern_content .grouping{width: 14%; display: inline-block; margin: 0 1%; max-width: 150px; text-align: center;}
.pattern_customization .pattern_content .grouping .picture img{max-width: 100%;}
.pattern_customization .pattern_content .grouping .picture:nth-child(2){position: relative; padding: 50px 0 60px;}
.pattern_customization .pattern_content .grouping .picture:nth-child(2):before{width: 100%; height: 50px; line-height: 50px; content: "+"; font-size: 30px; position: absolute; left: 0; top: 0;}
.pattern_customization .pattern_content .grouping .picture:nth-child(2)::after{width: 100%; height: 60px; text-align: center; line-height: 60px; content: "="; font-size: 30px; position: absolute; left: 0; bottom: 0; transform: rotate(90deg);}
.pattern_customization .pattern_content .grouping .list img{max-width: 100%;}
.pattern_customization .pattern_content .grouping .list:nth-child(2){padding: 30px 0;}

.accessory_customization{padding-top: 60px;}
.accessory_customization .accessory_swiper{position: relative; padding: 30px 0 40px; overflow: hidden;}
.accessory_customization .accessory_swiper .swiper-slide{overflow: hidden;}
.accessory_customization .accessory_swiper .swiper-slide img{width: 100%; transition: all 0.5s;}
.accessory_customization .accessory_swiper .swiper-slide:hover img{transform: scale(1.1);}
.accessory_customization .accessory_swiper .swiper-pagination{top: auto; bottom: 0; height: 2px; background: #d6d6d6;}
.accessory_customization .accessory_swiper .swiper-pagination-progressbar-fill{background: #353535;}

.production_process{padding-top: 60px;}
.production_process .production_swiper{position: relative; padding: 30px 0 40px; overflow: hidden;}
.production_process .production_swiper .picture{overflow: hidden;}
.production_process .production_swiper .picture img{width: 100%; transition: all 0.5s;}
.production_process .production_swiper .picture:hover img{transform: scale(1.1);}
.production_process .production_swiper .title{font-size: 16px; text-align: center; margin-top: 20px;}
.production_process .production_swiper .swiper-pagination{top: auto; bottom: 0; height: 2px; background: #d6d6d6;}
.production_process .production_swiper .swiper-pagination-progressbar-fill{background: #353535;}

.provide_services{padding-top: 60px;}
.provide_services .services_swiper{position: relative; padding: 30px 0 40px; overflow: hidden;}
.provide_services .services_swiper .picture{overflow: hidden;}
.provide_services .services_swiper .picture img{width: 100%; transition: all 0.5s;}
.provide_services .services_swiper .picture:hover img{transform: scale(1.1);}
.provide_services .services_swiper .title{font-size: 24px; text-align: center; margin-top: 20px;}
.provide_services .services_swiper .text{font-size: 16px; text-align: center; color: #666; margin-top: 20px;}
.provide_services .services_swiper .swiper-pagination{top: auto; bottom: 0; height: 2px; background: #d6d6d6;}
.provide_services .services_swiper .swiper-pagination-progressbar-fill{background: #353535;}

.quality_assurance{padding-top: 60px;}
.quality_assurance .quality_swiper{position: relative; padding: 30px 0 40px; overflow: hidden;}
.quality_assurance .quality_swiper .picture{width: 48%; float: left; overflow: hidden;}
.quality_assurance .quality_swiper .picture img{width: 100%; transition: all 0.5s;}
.quality_assurance .quality_swiper .picture:hover img{transform: scale(1.1);}
.quality_assurance .quality_swiper .content{width: 48%; float: right; padding-top: 20px;}
.quality_assurance .quality_swiper .title{font-size: 30px;}
.quality_assurance .quality_swiper .text{font-size: 16px; line-height: 24px; color: #666; margin-top: 20px;}
.quality_assurance .quality_swiper .swiper-pagination{top: auto; bottom: 0; height: 2px; background: #d6d6d6;}
.quality_assurance .quality_swiper .swiper-pagination-progressbar-fill{background: #353535;}

.quality_inspection{padding-top: 60px;}
.quality_inspection .inspection_swiper{position: relative; padding: 30px 0 40px; overflow: hidden;}
.quality_inspection .inspection_swiper .picture{overflow: hidden;}
.quality_inspection .inspection_swiper .picture img{width: 100%; transition: all 0.5s;}
.quality_inspection .inspection_swiper .picture:hover img{transform: scale(1.1);}
.quality_inspection .inspection_swiper .title{font-size: 18px; text-align: center; margin-top: 20px;}
.quality_inspection .inspection_swiper .swiper-pagination{top: auto; bottom: 0; height: 2px; background: #d6d6d6;}
.quality_inspection .inspection_swiper .swiper-pagination-progressbar-fill{background: #353535;}

.product_inspection{padding-top: 60px;}
.product_inspection .product_swiper{position: relative; padding: 30px 0 40px; overflow: hidden;}
.product_inspection .product_swiper .picture{overflow: hidden;}
.product_inspection .product_swiper .picture img{width: 100%; transition: all 0.5s;}
.product_inspection .product_swiper .picture:hover img{transform: scale(1.1);}
.product_inspection .product_swiper .title{font-size: 18px; text-align: center; margin-top: 20px;}
.product_inspection .product_swiper .swiper-pagination{top: auto; bottom: 0; height: 2px; background: #d6d6d6;}
.product_inspection .product_swiper .swiper-pagination-progressbar-fill{background: #353535;}

.contact_customization{max-width: 1400px; margin: 60px auto 0; position: relative;}
.contact_customization .picture img{width: 100%;}
.contact_customization .content{width: 100%; height: 100%; text-align: center; box-sizing: border-box; padding: 50px 20px; position: absolute; left: 0; top: 0;}
.contact_customization .content .title{display: inline-block; max-width: 1080px; font-size: 36px; line-height: 50px; color: #fff;}
.contact_customization .content .text{display: inline-block; max-width: 1000px; margin-top: 20px;}
.contact_customization .content .text p{font-size: 18px; line-height: 24px; color: #fff; padding: 5px 0;}
.contact_customization .content .button{margin-top: 35px;}
.contact_customization .content .button a{display: inline-block; font-size: 18px; line-height: 48px; background: #fff; color: #353535; padding: 6px 6px 6px 30px; border-radius: 30px;}
.contact_customization .content .button a i{width: 48px; height: 48px; float: right; background: url("../images/arrow_white.png") center no-repeat #353535; margin-left: 20px; border-radius: 50%;}

@media (max-width:960px) {
	.customized_title{font-size: 20px;}
	.customized_button{text-align: center; margin-top: 20px;}
	.customized_button a{padding: 0 22px; line-height: 30px; border: solid #353535 1px; border-radius: 16px; margin: 0 10px;}
	
	.customized_process{padding: 30px 10px 0;}
	.customized_process .process_title{text-align: left; padding: 0; margin-top: 10px;}
	.customized_process .process_swiper{position: relative; padding: 20px 0 60px; overflow: hidden;}
	.customized_process .process_swiper .list{border: solid #d6d6d6 1px; padding: 10px;}
	
	.shape_customization{padding: 50px 10px 0;}
	.shape_customization .shape_list{margin-top: 10px;}
	.shape_customization .shape_list .list{width: 49%; overflow: hidden; margin-top: 10px;}
	.shape_customization .shape_list .list:nth-child(2n){margin-right: 0;}
	.shape_customization .shape_list .list img{width: 100%; transition: all 0.5s;}
	.shape_customization .shape_list .list:hover img{transform: scale(1.1);}
	
	.punching_customization{padding: 50px 10px 0;}
	.punching_customization .punching_list{margin-top: 10px;}
	.punching_customization .punching_list .list{width: 49%; margin-top: 10px;}
	.punching_customization .punching_list .list:nth-child(2n){margin-right: 0;}
	
	.color_customization{padding: 50px 10px 0;}
	.color_customization .color_list{margin-top: 20px; padding: 20px;}
	.color_customization .color_list .list{width: 15%; margin: 10px 0;}
	.color_customization .color_list .list img{width: 100%;}
	
	.bottom_customization{padding: 50px 10px 0;}
	.bottom_customization .bottom_list{margin-top: 10px;}
	.bottom_customization .bottom_list .list{width: 49%; margin-top: 10px;}
	.bottom_customization .bottom_list .list:nth-child(2n){margin-right: 0;}
	
	.logo_customization{padding: 50px 10px 0;}
	.logo_customization .logo_content{margin-top: 20px; padding: 20px;}
	.logo_customization .logo_content .logo_title{margin-top: 0;}
	.logo_customization .logo_content .logo_list{margin-top: 20px;}
	
	.pattern_customization{padding: 50px 10px 0;}
	.pattern_customization .pattern_content{margin-top: 20px; padding: 20px;}
	.pattern_customization .pattern_content .grouping .list:nth-child(2){padding: 20px 0;}
	
	.accessory_customization{padding: 50px 10px 0;}
	.accessory_customization .accessory_swiper{padding: 20px 0;}
	
	.production_process{padding: 50px 10px 0;}
	.production_process .production_swiper{padding: 20px 0;}
	.production_process .production_swiper .title{font-size: 16px; margin-top: 10px;}
	
	.provide_services{padding: 50px 10px 0;}
	.provide_services .services_swiper{padding: 20px 0;}
	.provide_services .services_swiper .title{font-size: 16px; margin-top: 10px;}
	.provide_services .services_swiper .text{font-size: 14px; text-align: left; margin-top: 10px;}
	
	.quality_assurance{padding: 50px 10px 0;}
	.quality_assurance .quality_swiper{padding: 20px 0;}
	.quality_assurance .quality_swiper .picture{width: 100%; float: none;}
	.quality_assurance .quality_swiper .content{width: 100%; float: none; padding-top: 20px;}
	.quality_assurance .quality_swiper .title{font-size: 16px;}
	.quality_assurance .quality_swiper .text{font-size: 14px; line-height: 20px; margin-top: 10px;}
	
	.quality_inspection{padding: 50px 10px 0;}
	.quality_inspection .inspection_swiper{padding: 20px 0;}
	.quality_inspection .inspection_swiper .title{font-size: 16px; margin-top: 10px;}
	
	.product_inspection{padding: 50px 10px 0;}
	.product_inspection .product_swiper{padding: 20px 0;}
	.product_inspection .product_swiper .title{font-size: 16px; margin-top: 10px;}
	
	.contact_customization{max-width: 100%; margin: 50px auto 0;}
	.contact_customization .picture{overflow: hidden;}
	.contact_customization .picture img{width: 135%; position: relative; left: 50%; transform: translateX(-50%);}
	.contact_customization .content{width: 100%; height: auto; text-align: center; box-sizing: border-box; padding: 20px 10px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
	.contact_customization .content .title{max-width: 100%; font-size: 15px; line-height: 26px;}
	.contact_customization .content .text{display: none;}
	.contact_customization .content .button{margin-top: 20px;}
	.contact_customization .content .button a{font-size: 14px; line-height: 30px; padding: 5px 5px 5px 30px; border-radius: 20px;}
	.contact_customization .content .button a i{width: 30px; height: 30px; background-size: 14px;}
}