/* contact_info */
.top_desc{font-size: 20px; line-height: 30px; color: #666;}

.contact_ul{margin-top: 4%;}
.contact_ul li{width: 31.5%; border: 1px solid #F1F1F1; border-radius: 2px; padding: 1.8% 2.4%; transition: all 0.5s ease;}
.contact_icon{width: 62px; height: 62px; margin-right: 20px; background-repeat: no-repeat; background-position: center; background-size: 50% auto; border-radius: 50%; background-color: #000; transition: all 0.5s ease;}
.contace_icon_add{background-image: url(../img/address.png);}
.contace_icon_tel{background-image: url(../img/phone.png);}
.contace_icon_email{background-image: url(../img/email.png);}
.contact_right{width: 73%; flex: 1;}
.contact_right .name{font-size: 24px; line-height: 30px; margin-bottom: 6px; color: #000;}
.contact_right .brief{font-size: 18px; line-height: 1.5; color: #666;}
.contact_right .brief a{font-size: inherit; color: #666;}
.contact_right .brief a:hover{color: var(--commonColor); text-decoration: underline;}

.contact_ul li:hover{border-color: #EEE;}
.contact_ul li:hover .contact_icon{background-color: var(--commonColor); animation: swing 0.5s;}

.contact_share{margin-top: 4%;}
.contact_share span{font-size: 20px; color: #020C1E;}
.contact_share .share_div{flex: 1;}
.contact_share .share_div a{display: block; width: 34px; height: 34px; background: #000; border-radius: 50%; margin-left: 16px;}
.contact_share .share_div a img{display: block; height: 20px; margin: 7px auto;}
.contact_share .share_div a:hover{background: var(--commonColor); animation: swing 0.5s;}

@media only screen and (max-width: 1450px) {
	.contact_right .name{font-size: 22px;}
}
@media only screen and (max-width: 1300px) {
	.contact_info{zoom: 0.9;}
	.contact_info .web_th .brief{font-size: 22px;}
	.contact_ul li{flex-direction: column; justify-content: flex-start; width: 32%; padding: 20px;}
	.contact_icon{width: 52px; height: 52px;}
	.contact_right{width: 100%;}
	.contact_right .name{margin-top: 15px; font-size: 22px;}
}
@media only screen and (max-width: 980px) {
	.contact_info{zoom: 1;}
	.contact_ul{flex-wrap: wrap; margin-top: 16px;}
	.contact_ul li{width: 100%; flex-direction: row; padding: 16px;}
	.contact_ul li:nth-child(n+2){margin-top: 20px;}
	.contact_icon{margin-right: 10px; width: 48px; height: 48px;}
	.contact_right .name{margin: 0 0 5px; font-size: 18px; line-height: 24px;}
	.contact_right .brief{font-size: 16px;}
	.contact_share{margin-top: 20px;}
	.contact_share span{font-size: 18px;}
	.contact_share .share_div a{margin-left: 10px;}
}

/* contact_box */
.contact_box{position: relative;}
.contact_box .contact_map{position: absolute; left: 0; top: 50px; right: 0; bottom: 50px; background-position: center; background-repeat: no-repeat; background-size: cover; background: #F5F5F5;}
.contact_box .contact_map iframe{display: block; width: 100%; height: 100%;}

@media only screen and (max-width: 1300px) {
	.contact_box{zoom: 0.9;}
	.contact_box .contact_map{top: 40px; bottom: 40px;}
}
@media only screen and (max-width: 980px) {
	.contact_box{zoom: 1; display: flex; flex-direction: column-reverse;}
	.contact_box .contact_map{position: static; height: 400px;}
}
@media only screen and (max-width: 768px) {
	.contact_box .contact_map{height: 340px;}
}