img {
    max-width: 100%;
}

body {

    background: url(../images/bg-contact.jpg);

}


textarea{
    font-family: Arial, Helvetica, sans-serif;
}
.com-nav-tips {

    /* position: absolute; */

    /* top:120px; */

    /* left: 50%; */

    width: 100%;
    
    max-width: 1400px;

    margin: 0 auto;
    
    /* transform: translateX(-50%); */



}

.con-wt72 {

    max-width: 1400px;

    margin: 0 auto;

    color: #ffffff;

    display: flex;
    
    padding: 20px 0;

}

.banner-txt-title {

    font-size: 52px;

    font-weight: 600;

    color: #ffffff;

}

.con-wt80 {

    max-width: 1400px;

    margin: 0 auto;

    color: #686a78;

    font-size: 16px;

}

.banner-txt-p {

    margin-top: 1%;

    color: #ffffff;

    line-height: 2;

}

.con-wt72 a {

    color: #ffffff;
}

.banner {



    width: 100%;
    background: url(../images/conbander.png) no-repeat;
    min-height: 310px;


}



.banner img {



    width: 100%;



    max-width: 100%;



}



.contact1 {

    border-radius: 2vw;

    max-width: 1400px;

    margin: 0 auto 150px;

    padding: 3% 0;

    position: relative;



}

.contact-containers {
    border-radius: 2vw;
    background: #ffffff;
    box-shadow: 0 0 5px #999;
    padding: 3% 5% 130px 5%;
    margin-top: -16%;
    position: relative;
}


.contact-title {



    color: #333333;

    font-size: 1vw;

    text-align: left;



}

.contact-tit {

    color: #333333;

    font-size: 2vw;

    margin-bottom: 26px;

    text-align: left;

}

.contact-tit p{
    font-size: 20px;
    font-weight: bold;
}

.contact-input {



    flex-wrap: wrap;



    /* margin-top: 5%; */

    position: relative;



}

.contact-input .button {

    position: absolute;

    right: 45px;

    bottom: -25px;

}

.contact-input .button-line {

    position: absolute;

    bottom: -72px;

    right: 100px;

}

.contact-input input {



    /* width: 30%; */



    border: 1px solid #04cdae;



    border-radius: 1vw;



    padding: 15px 45px;



    /* font-size: 1vw; */



}

.con-input {

    width: 30%;

    /* display: inline;

     */

    display: flex;

    flex-direction: column;

}

.con-input p {

    margin-bottom: 15px;

    font-size: 1vw;

}

.con-input p span {



    position: relative;

    padding-left: 10px;

}

.con-input span::after,
.contact-input .textarea p span::after {

    content: "";

    background: url(../images/red.png);

    width: 9px;

    height: 8px;

    display: flex;

    position: absolute;

    top: 0;

    left: 0;

}




.contact-input input[name="name"] {

    padding-left: 13%;
   width: 100%;
    

}
.con-input>div{
    position: relative;
}
.con-input:nth-child(1)>div:before{
    content: "";
    background: url(../images/ca1.png) no-repeat;
    width: 22px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);

}
.contact-input input[name="mycall"] {

    padding-left: 15%;

    width: 100%;

}
.con-input:nth-child(2)>div:before{
    content: "";
    background: url(../images/ca2.png) no-repeat;
    width: 27px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);

}
.contact-input input[name="email"] {

    padding-left: 17%;

    width: 100%;

}
.con-input:nth-child(3)>div:before{
    content: "";
    background: url(../images/ca3.png) no-repeat;
    width: 34px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);

}



.contact-input input:nth-child(3) {



    background: url(../images/ca3.png) no-repeat;

    background-size: auto 40%;

    background-position: 4% center;



    margin-top: 3%;



}



.contact-input input:nth-child(4) {



    background: url(../images/ca4.png) #eeeeee no-repeat;



    background-size: auto 40%;



    background-position: 4% center;



    margin-top: 3%;



}



.contact-input .textarea {





    margin-top: 30px;

    display: flex;

    flex-direction: column;









}

.contact-input .textarea p {

    margin-bottom: 15px;

    font-size: 1vw;

}

.contact-input .textarea p span {

    position: relative;

    padding-left: 10px;

}

.contact-input .textarea textarea {



    width: 100%;



    border: 1px solid #d6d6d6;



    border-radius: 1vw;

    padding: 15px 45px;


}
.contact-input .textarea div{
    position: relative;
}
.contact-input .textarea div:before{
    content: "";
    background: url(../images/ca4.png) no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 10px;
    top: 5px;
}

.contact-input>input::-webkit-input-placeholder {



    color: #aeaeae !important;





}



.contact-input>input:-moz-placeholder {



    color: #aeaeae !important;



}



.contact-input>input:-ms-input-placeholder {



    color: #aeaeae !important;



}



.contact-input>textarea::-webkit-input-placeholder {



    color: #aeaeae !important;

}



.contact-input>textarea:-moz-placeholder {



    color: #aeaeae !important;



}



.contact-input>textarea:-ms-input-placeholder {



    color: #aeaeae !important;



}



.contact-tips-con {
    font-size: 14px;
    color: #333333;
    position: absolute;
    left: 30px;
    bottom: 40px;

}



.contact-tips>span:first-child {



    color: #ff0000;



}



.contact-btn {



    display: flex;

    border: 0;

    cursor: pointer;



    color: #000;



    background: #f51f1f !important;



    width: 172px!important;

    height: 42px;



    /* font-size: 1vw!important; */



    font-weight: 700;



    text-align: center;



    padding: 5%;



    border-radius: 0.5vw;

    justify-content: space-around;

    align-items: center;





}

.contact-btn::before {

    content: "";

    background: url(../images/a5.png) no-repeat;

    background-size: 100%;

    display: flex;

    width: 2vw;

    height: 2vw;



}











.add-txt {



    /* margin-top: 10% !important; */



    position: absolute;



    top: 53%;



    left: 17%;



}



.add-txt-left {



    color: #ffffff;



    font-size: 0.9vw;



}



.add-txt-left>div {



    margin-top: 1vw;



}



.add-txt-left>div>div:first-child {



    /* font-size: 0.9vw; */



    font-weight: 700;



}



.add-txt-left span {



    color: #04cdae;



    font-weight: 700;



    font-size: 0.9vw;



}



/* .add-txt-right{



    width: 60%;



}



.add-txt-right img{



    width: 100%;



    max-width: 100%;



} */



.input-container {

    display: flex;

    justify-content: space-between;

}



.contact-container {

    display: flex;

    justify-content: space-between;

    /*align-items: center;*/

    margin-top: 70px;

}

.contact-container .all-container {

    display: flex;

    flex-direction: column;

    /* justify-content: space-between; */

    align-items: center;

    width: 32%;

    text-align: center;

    border-right: 1px solid #ccc;

}

.contact-container .all-container:last-child {
    border-right: none;
}

.contact-container .all-container .contact-text {

    font-size: 18px;

    margin: 20px 0;

}

.contact-container .all-container .contact-content {

    /* font-size: 1vw; */

    font-weight: bold;

    color: #cd0000;

}



.contact-container .all-container .contact-content p {

    color: #333333;

    /* font-size: 0.8vw; */

    font-weight: initial;

    text-align: center;

    line-height: 2;

}

.contact-container .all-container .contact-img img {
    width: 43px;
    height: 43px;
}

.footer {
    padding-top: 0 !important;
}

@media (max-width:1400px){
    .banner,.contact{
        padding-left: .31rem;
        padding-right: .31rem;
    }
}
@media (max-width:1080px){
    .contact{
        margin-bottom: 50px;
    }
    .contact-input .button-line{
        display: none;
    }
    .banner-txt-title{
        font-size: 40px;
    }
}

@media (max-width:768px){
  
    .input-container{
        flex-wrap: wrap;
        gap: 30px;
    }
    .con-input{
        width: 100%;
    }
    .banner-txt-title{
        font-size: 30px;
    }
}
@media (max-width:500px){
    .contact-container{
        flex-wrap: wrap;
        gap: 30px;
    }
    .contact-container .all-container{
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding-bottom: 30px;
    }
  
}