﻿
.contact-page:after{ display:none}

.wrap-map{height:550px; width:100%; position:relative;  overflow:hidden;}
.wrap-map .label-info{position:absolute; top:20px; left:20px; z-index:5; padding:0 0 10px 0; width:220px; background:#fff; display:none;}
.wrap-map .label-info b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:14px;}
.wrap-map iframe{width:100%!important; height:100%!important; position:relative;}
@media (max-width:767px){
}

@media (min-width:768px) and (max-width:991px) {
}
@media (min-width:992px) and (max-width:1199px) {
}

@media (min-width:1200px) and (max-width:1439px) {
}

@media (min-width:1440px) {
}

.wrap-eleContact{width:100%; float:left; position:relative; background:var(--colorBg); padding-bottom:70px;}
.wrap-eleContact:before{content:''; opacity:.5; width:100%; height:150px; position:absolute; left:0; bottom:0; background:url(../Default/bgBottom-page.png) repeat-x 0 bottom; background-size: auto 100%; display:block;}

ul.contact{width:calc(100% + 30px); margin: -40px 0 0 -15px; padding: 0; list-style:none; clear:both; float:left; z-index:5;}
ul.contact li{padding: 30px 40px; position:relative; text-align:left; width:calc(33.3333333333333% - 30px); margin: 0 15px; float:left;}
ul.contact li:before{content:''; width:calc(100% - 2px); height:calc(100% - 2px); background:#fff url(bg-itemProduct.png) no-repeat 80px bottom; background-size: auto 130px; z-index:2; position:absolute; top:1px; left:1px;  --border-radius: 16px; --size-corner: 56px;  --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat; border-radius:12px ; transition: all .5s ease; mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);}
ul.contact li i{font-size:20px; font-weight:300; color:#fff; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color1);position:absolute; right:0; bottom:0; z-index:5; }
ul.contact li label{font-family: "Signika", sans-serif; font-weight:500; display:block; line-height:50px; padding-left:0px;margin-top:0px; font-size:22px;color:var(--color1); border-bottom:1px solid rgba(0,0,0,.1); position:relative; transition:.3s; white-space:nowrap; z-index:5;}
ul.contact li label:before{content:''; width:0; height:1px; background:var(--color1); position:absolute; bottom:-1px; left:0; transition:.3s;}
ul.contact li span{font-size:16px; padding: 0 50px 0 0; display:inline-block; padding-top:15px;  line-height:24px; position:relative; z-index:5;}
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 }

@media (max-width:767px){
    .wrap-eleContact{padding-bottom:40px;}
    ul.contact{}
    ul.contact li{width:calc(100% - 30px); margin-top:15px;}
    ul.contact li i{width:50px; height:50px; font-size:24px;}
}

@media (min-width:767px) and (max-width:991px){
    ul.contact li:first-child{width:calc(100% - 30px);}
    ul.contact li:not(:first-child){width:calc(50% - 30px); margin-top:30px;}
}

.wrap-form{width:100%; float:left; position:relative; display:table; padding-top:50px; }
.wrap-form .title-form{width:100%; float:left; position:relative; }
.wrap-form .title-form h4{font-family: "Signika", sans-serif; line-height: 50px; font-size:25px; font-weight: 600; white-space:nowrap; float:left; position:relative;position:relative; color:#000 }
.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:135px;}
.col-captcha .wrap-input input[type="text"]{font-weight:bold}
.col-captcha .wrap-input .wrap-img{position:absolute; top:0; right:0px; height:42px;padding: 1px 40px 0 0px; overflow:hidden; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1) }
.col-captcha .wrap-input .wrap-img img{margin-top:-2px; float:left;}
.col-captcha .wrap-input .wrap-img a{height:42px; width:42px; text-align:center; line-height:42px; font-size:16px; position:absolute; top:0; right:0; color:rgba(0,0,0,.7); text-decoration:none; font-weight:400;}



@media (max-width:767px) {
    .contact-page{padding-bottom:10px;}
    .wrap-form{padding-top:40px;}
    .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.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) {
    .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;}
}

