.contact_ul li, .innerPro_btn .submit_btn{
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.contact_box .web_th .title{position: relative; padding-bottom: 12px;}
.contact_box .web_th .title::before{position: absolute; bottom: 0; left: 50%; width: 76px; height: 6px; margin-left: -38px; background: var(--commonColor); content: '';}

/* contact_box */
.contact_ul{margin-top: 4%;}
.contact_ul li{width: calc(25% - 9px); margin-right: 12px; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 10px 10px; margin-bottom: 20px;}
.contact_ul li:last-child{margin-right: 0;}
.contact_icon{width: 64px; height: 64px; margin-right: 3%;}
.contact_icon .icon_pic{padding-bottom: 100%; background: var(--commonColor); border-radius: 6px;}
.contact_icon .icon_pic img{padding: 20%;}
.contact_right{width: calc(100% - 84px);}
.contact_right .name{font-size: 20px; line-height: 1.5; font-family: 'Chaparral Pro-Bold'; margin-bottom: 4px;}
.contact_right .brief{line-height: 24px; color: #666;}
.contact_right .brief a{color: inherit;}
.contact_right .brief a:hover{color: var(--commonColor);}

.contact_ul li:hover{box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);}
.contact_ul li:hover .icon_pic img{animation: swing 0.5s;}


.con_share{margin-top: 20px;}
.con_share .txt{font-size: 20px; color: var(--commonColor); margin-right: 10px;}
.con_share .share_img{height: 36px; margin-right: 10px; cursor: pointer;}
.con_share .share_img:last-child{margin-right: 0;}
.con_share .share_img:hover{animation: swing 0.5s;}

@media only screen and (max-width: 1200px) {
	.contact_ul li{padding: 24px 20px; width: calc((100% - 12px) / 2);}
	.contact_ul li:last-child{margin-right: 12px;}
	.contact_ul li:nth-child(2n){margin-right: 0;}
}
@media only screen and (max-width: 950px) {
	.left_info{width: 100%;}
	.contact_right{width: calc(100% - 75px);}
	.contact_ul{flex-wrap: wrap; margin-top: 20px;}
	.contact_ul li{width: 100%; margin-bottom: 20px; padding: 20px 15px; align-items: center; margin-right: 0;}
	
	.contact_icon{width: 60px; margin-right: 12px;}
}


/* contact_form */
.contact_form{width: 100%;}

.contact_map{width: 49%;}
.contact_map img{width: 100%; display: block; height: 100%;}
.contact_map iframe{width: 100% !important; height: 100% !important; display: block;}

.form_div{width: 51%; box-sizing: border-box; padding: 5% 4%; background: #000; border-radius: 12px 0 0 12px;}

.form_input{flex-wrap: wrap; justify-content: space-between;}
.form_input .input_item{width: 100%; margin-bottom: 28px;}
.form_input .input_item:nth-child(-n+2){width: 48%;}

.input_item input, .input_item textarea{width: 100%; font-size: 20px; line-height: 36px; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.48); color: #fff; background: none; font-family: 'DIN Alternate-Bold'; padding: 10px 0 8px;}
.input_item textarea{line-height: 28px; height: 280px; max-width: 100%; max-height: 280px; padding-left: 20px; display: block;}

.form_btn .submit_btn{background: #fff; color: var(--commonColor); height: auto; padding: 10px 40px; line-height: 28px; width: auto; border: none; margin: 5px 0 0; font-size: 20px; border-radius: 4px; border-radius: 8px; font-family: 'DIN Alternate-Bold';}
.form_btn .submit_btn:hover{background: var(--commonColor); color: #fff;}


.input_item input::-webkit-input-placeholder {color: #fff;}
.input_item input::-moz-placeholder {color: #fff; opacity: 1;}
.input_item input:-ms-input-placeholder {color: #fff;}
.input_item input:-moz-placeholder {color: #fff;}
.input_item textarea::-webkit-input-placeholder {color: #fff;}
.input_item textarea::-moz-placeholder {color: #fff; opacity: 1;}
.input_item textarea:-ms-input-placeholder {color: #fff;}
.input_item textarea:-moz-placeholder {color: #fff;}


@media only screen and (max-width: 1200px) {
	.input_item input{font-size: 18px;}
	.form_input .input_item{margin-bottom: 20px;}
	.form_btn .submit_btn{font-size: 18px;}
}

@media only screen and (max-width: 950px) {
	.contact_form .layout{flex-direction: column;}
	.form_div{width: 100%; padding: 20px 20px 30px; border-radius: 12px 12px 0 0;}
	.form_input .input_item{width: 100%; margin-bottom: 15px;}
	.form_input .input_item:nth-child(-n+2){width: 100%;}

	.contact_map{width: 100%;}
	.contact_map iframe{height: 300px !important;}
}