/* service_box */
.service_box{overflow: hidden;}
.service_list .service_item:nth-child(n+2){margin-top: 32px;}
.service_item .left_item{width: 43%; order: 1;}
.service_item .left_item .pic{padding-bottom: 68%;}
.service_item .info_item{width: 52%; padding: 0 0; order: 2;}
.service_item .info_item .brief{color: #777; line-height: 28px;}
.service_item .info_item .title{font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.service_item:nth-child(2n) .left_item{order: 3;}

@media only screen and (max-width: 980px) {
	.service_list .service_item{flex-direction: column;}
	.service_item .left_item{order: 1 !important; width: 100%;}
	.service_item .info_item{width: 100%; margin-top: 16px;}
	.service_list .service_item:nth-child(n+2){margin-top: 24px;}
}

/* service_faq */
.service_faq{background: #FAFAFA;}
.faq_list{margin-top: 2.2%;}
.faq_list li{position: relative; border-top: 1px solid #333;}
.faq_list li:last-child{margin-bottom: 0; border-bottom: 1px solid #333;}
.faq_list li .th{padding: 20px 46px 20px 0; border-radius: 0; border: none; background: url(../img/icon_faq.png) no-repeat left center; background-size: 30px auto; position: relative; cursor: pointer;}
.faq_list li .th .title{font-size: 18px; font-weight: bold;}

.faq_list li .right_icon{position: absolute; right: 0; top: 50%; width: 36px; height: 36px; cursor: pointer; margin-top: -18px; transition: all 0.3s ease; border-radius: 50%; font-size: 28px;}
.faq_list li .right_icon::before{position: absolute; right: 0; top: 0; font-family: fontawesome; line-height: 32px; height: 100%; width: 100%; line-height: 36px; font-size: 32px; content: '\f067'; content: '+'; text-align: center;} 
.faq_list li .faq_con{padding: 0 0 20px; display: none;}
.faq_list li .faq_con .brief{line-height: 28px; color: #666;}
.faq_list li.sel_item .right_icon{ transform: rotate(180deg);}
.faq_list li.sel_item .right_icon::before{content: '\f068'; width: 100%; height: auto; background: none; font-size: 20px; top: 0; left: 0; margin: 0; transform: scale(1, 0.5);}
.faq_list li.sel_item .faq_con{display: block;}

@media only screen and (max-width: 980px) {
	.faq_list li .th{padding: 15px 40px 15px 0;}
}

/* service_connect */
.service_connect .web_th .brief{margin-top: 20px;}
.connect_inner{margin-top: 2.4%;}
.connect_inner .connect_icon .icon{width: 80px; height: 80px; background: var(--commonColor); border-radius: 12px;}
.connect_inner .connect_icon .icon:nth-child(n+2){margin-left: 3%;}
.connect_inner .connect_icon .icon img{display: block; margin: 17px auto 0; height: 46px; width: auto;}
.connect_inner .connect_icon .icon:hover img{animation: swing 0.5s;}
.connect_inner .brief{margin-top: 2.4%; line-height: 28px; text-align: center; color: #666;}
@media only screen and (max-width: 980px) {
	.service_connect .web_th .brief{margin-top: 12px;}
	.connect_inner{margin-top: 20px;}
	.connect_inner .brief{margin-top: 20px;}
	.connect_inner .connect_icon .icon{width: 72px; height: 72px;}
	.connect_inner .connect_icon .icon:nth-child(n+2){margin-left: 20px;}
	.connect_inner .connect_icon .icon img{height: 42px; margin: 15px auto;}
}

/* service_design */
.service_design{padding: 5% 0; background: url(../img/bg_design.webp) no-repeat center; background-size: cover;}
.service_design .web_th{width: 35%;}
.service_design .web_th .brief{margin-top: 6%;}
.service_design .right_item{width: 38%; margin-right: 13%;}
.service_design .right_item .pic{padding-bottom: 0; height: auto;}
.service_design .right_item .pic img{position: static; display: block;}

@media only screen and (max-width: 1450px) {
	.service_design .web_th{width: 38%;}
}
@media only screen and (max-width: 980px) {
	.service_design{padding: 30px 0;}
	.service_design .layout{flex-direction: column;}
	.service_design .web_th{width: 100%;}
	.service_design .web_th .brief{margin-top: 12px;}
	.service_design .right_item{width: 100%; margin: 20px 0 0;}
}


/* service_bottom */
.service_bottom .service_div:nth-child(n+2){margin-top: 4%;}
.service_bottom .service_div .left_item{width: 40%; order: 1;}
.service_bottom .service_div .left_item .pic{padding-bottom: 68%;}
.service_bottom .service_div .web_th{width: 60%; padding: 0 6%; order: 2;}
.service_bottom .service_div:nth-child(n+2) .left_item{order: 3;}
@media only screen and (max-width: 980px) {
	.service_bottom .service_div{flex-direction: column;}
	.service_bottom .service_div .left_item{order: 1 !important; width: 100%;}
	.service_bottom .service_div .web_th{width: 100%; margin-top: 16px; padding: 0;}
	.service_bottom .service_div:nth-child(n+2){margin-top: 24px;}
}