.contact{padding:50px 0;}

/** tips **/
.contact-tips{text-align:center;margin-bottom:110px;}
.contact-tips li{float:left;width:33.33%;}
.contact-tips h2{font-size:35px;margin:0 150px 80px 150px;}
.contact-tips h3{font-size:20px;margin:0 0 15px 0;font-weight:500;}
.contact-tips p{color:#777;font-weight:300;}
.contact-tips .b{margin:0 15px;}
.contact-tips .i-icon{margin-bottom:35px;}
.contact-tips .icon{font-size:50px;color:#00a0e9;}

/** form **/
.contact-box h2{margin-bottom:40px;}
.contact-form{float:left;width:48%;}
.contact-form .input-wrapper .inp textarea{height:220px;}
.contact-form .btn-submit{width:100%;padding-left:0;padding-right:0;}

/** more **/
.contact-faq{float:right;width:42%;}
.contact-faq li{margin-bottom:15px;}
.contact-faq .h{position:relative;color:#777;height:55px;line-height:55px;padding:0 15px;background-color:#F5F5F5;cursor:pointer;}
.contact-faq .h .arrow{position:absolute;top:0;right:15px;line-height:55px;}
.contact-faq li:hover .h{color:#000;}
.contact-faq li.on .h{background-color:#00a0e9;color:#FFF;}
.contact-faq li.on p{background-color:#4cbbee;color:#FFF;}
.contact-faq p{display:none;margin:0;padding:15px;}

/** ---------------- media ------------------ **/
@media screen and (max-width:1230px){
.contact{padding:40px 0;}
}

@media screen and (max-width:960px) {
.contact-tips h2{margin:0 50px 70px 50px;}
.contact-form, .contact-faq{width:100%;}
.contact-faq{margin-top:80px;}
}

@media screen and (max-width:760px) {
.contact-tips li{width:100%;margin-bottom:50px;}
}

@media screen and (max-width:640px) {
.contact{padding:0;}

.contact-tips{margin-bottom:60px;}
.contact-tips h2{margin:40px 0 60px 0;font-size:28px;}
.contact-tips li{margin-bottom:40px;}

.contact-box{margin-bottom:30px;}
}