.contact{padding:68px 0; position:relative; background:rgb(240,240,240);}
.contact:before{position:absolute; top:0; right:0; left:0; content:''; height:50%;}
.contact>img{position:absolute; bottom:0; right:0; left:0; height:50%; width:100%; object-fit:cover;}
.contact>article{position:relative; z-index:8;}
.contact-content{padding:38px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.12);}
.contact-content>h1{padding-bottom:28px; border-bottom:2px solid #1258af; }
.contact-content>ul{margin:0 -28px;}
.contact-content>ul:after{display:block; content:''; clear:both;}
.contact-content>ul>li{float:left; width:50%;  padding:0 28px;}
.contact-content>ul>li>i{float:left; font-size:32px; margin:38px 0 0 8px; color:#1258af;}
.contact-content>ul>li>span{display:block; padding:28px 0 28px 58px; border-bottom:1px solid #e8e8e8;}
.contact-content>ul>li>span>h5{display:block; font-size:15px; color:#686868;}
.contact-content>ul>li>span>h3{display:block; font-weight:normal;}
@media(max-width:1200px){
.contact{padding:38px 0;}
.contact-content{padding:28px;}
.contact-content>h1{padding-bottom:18px;}
.contact-content>ul{margin:0 -18px;}
.contact-content>ul>li{padding:0 18px; width:100%;}
.contact-content>ul>li>span{padding:18px 0 18px 58px;}
}
@media(max-width:767px){
.contact{padding:18px 0;}
.contact-content{padding:18px;}
.contact-content>h1{font-size:20px; padding-bottom:8px;}
.contact-content>ul{margin:0;}
.contact-content>ul>li{padding:0;}
.contact-content>ul>li>span{padding:8px 0 8px 48px;}
.contact-content>ul>li>i{font-size:26px; margin:24px 0 0 8px;}
.contact-content>ul>li>span>h5{font-size:14px;}
.contact-content>ul>li>span>h3{font-size:16px;}
}