.contact-page{ padding-bottom:50px;}
.contact-page .box-map{width:100%;  height:400px; float:left; position:relative; border-radius:10px; overflow:hidden; margin-bottom:35px;}
.contact-page .box-map iframe{width:100%!important; height:100%!important; position:relative;}
@media (max-width:677px){
    .contact-page .box-map .label-info{display:none;}
}

@media (min-width:678px) and (max-width:991px) {

    .contact-page .box-map .label-info{position:absolute; top:18px; left:20px; z-index:5; padding:0px; width:220px; background:#fff;}
    .contact-page .box-map .label-info b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:14px;}
    .contact-page .map-contact .label-info span{-webkit-line-clamp: 2;-webkit-box-orient: vertical; text-overflow: ellipsis; overflow:hidden; display: -webkit-box; line-height:18px; font-size:14px; }
}

@media (min-width:992px) {
    .contact-page .box-map .label-info{position:absolute; top:20px; left:20px; z-index:5; padding:0 0 10px 0; width:220px; background:#fff;}
    .contact-page .box-map .label-info b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:14px;}
    .contact-page .box-map .label-info span{-webkit-line-clamp: 2;-webkit-box-orient: vertical; text-overflow: ellipsis; overflow:hidden; display: -webkit-box; line-height:18px; font-size:14px; }
}




ul.contact{margin: 0 -15px; padding: 0; list-style:none; clear:both}
ul.contact li{padding: 0 15px; position:relative; text-align:center;}
ul.contact li i{font-size:32px; width:120px; height:120px; display:flex; margin: 0 auto; align-items:center; justify-content:center; background:#f3f3f6; border-radius:10px;}
ul.contact li label{font-weight:bold; text-transform:uppercase; letter-spacing:1px; display:block; margin-top:20px; font-size:15px; padding-bottom:5px;}
ul.contact li span{font-size:15px; padding: 0; max-width:300px; display:inline-block; }
ul.contact li b{color:#ec1f26; font-size:20px;}
ul.contact li a{font-size:15px; padding: 0; display:inline-block; text-decoration:none; color:#000 }
.wrap-map{width:100%; float:left; position:relative; height:400px; margin-bottom:40px; border-radius:7px; overflow:hidden; }
.wrap-map .label-address{position:absolute; width:215px; color:#000; top:20px; left:20px; background:#fff; z-index:2;}
.wrap-map .label-address b{font-weight:500;  font-size:14px;}
.wrap-map .label-address span{display:block; clear:both; font-size:12px;}
.wrap-map iframe{width:100%!important; height:100%!important; float:left; position:relative;}

.wrap-form{width:100%; float:left; position:relative; display:table; padding-top:70px; }
.wrap-form .title-form{width:100%; float:left; position:relative; background:#fff; margin-bottom:20px; background-image: linear-gradient(to right, #f3f3f6 50%, #fff);}
.wrap-form .title-form h4{ max-width:calc(100% - 15px); border-radius:7px 7px 0 0; white-space:nowrap; margin:0 0 0 -8px; width:auto; line-height:39px; height:38px; padding: 0 20px; float:left; position:relative; background:var(--color2); color:#fff; text-transform:uppercase; font-size:15px; font-weight:bold; position:relative; letter-spacing:1px;}
.wrap-form .title-form h4:after{content:''; border-left:15px solid var(--color2); border-top:33px solid transparent;position:absolute; bottom:0; left:100%;}
.wrap-form .title-form h4:before{content:''; border-top:8px solid #074a29; border-left:8px solid transparent; position:absolute; top:100%; left:0;}
.wrap-form .col-left{display:table-cell; text-align:left; vertical-align:top; position:relative; width:500px; padding-right:40px; font-size:15px; line-height:24px;}
.wrap-form .col-right{display:table-cell; text-align:left; vertical-align:top; position:relative;}

ul.form li.col-btn{padding-top:40px!important}
ul.form li.col-btn a{float:left;}
ul.form li.col-btn a:last-child{margin-left:20px;}

.col-captcha .wrap-input{width:100%; float:left; position:relative; padding-right:130px;}
.col-captcha .wrap-input input[type="text"]{}
.col-captcha .wrap-input .wrap-img{position:absolute; top:0; right:0px; height:38px; border:1px solid rgba(0,0,0,.1); border-radius:4px;padding: 0px 40px 0px 0px; overflow:hidden;}
.col-captcha .wrap-input .wrap-img img{float:left; margin-top:-2px;}
.col-captcha .wrap-input .wrap-img a{height:38px; width:38px; text-align:center; line-height:38px; font-size:16px; position:absolute; top:0; right:0; color:var(--color1); text-decoration:none;}



@media (max-width:767px) {
    .contact-page{padding-bottom:90px;}
    .wrap-map{width:calc(100% + 30px); margin:-15px 0 15px -15px; border-radius:0; height:350px;}
    .wrap-map .label-address{width:180px ; top:18px; left:22px;}
    .wrap-map .label-address span{display:none;}
    .wrap-form .col-left{width:100%; padding-right:0; display:block}
    .wrap-form .col-right{width:100%; padding-right:0; display:block; padding-top:40px;}

    ul.contact{}
    ul.contact li{text-align:left; position:relative; width:100%; display:block; min-height:70px; padding-left:100px; margin-top:20px; }
    ul.contact li i{margin:0 10px 0 0; float:left; width:70px; height:70px; position:absolute; top:0; left:15px; color:var(--color1)}
    ul.contact li label{margin:0 0 0px 0;}
    ul.form li.col-btn{padding-top:20px!important;}
    ul.form li.col-btn a{width:calc(50% - 5px);}
    ul.form li.col-btn a:last-child{float:right; margin-left:0;}
}

@media (min-width:768px) and (max-width:991px) {
    .contact-page{padding-bottom:0;}
    .wrap-form .col-left{width:100%; padding-right:0; display:block}
    .wrap-form .col-right{width:100%; padding-right:0; display:block; padding-top:40px;}
}