@charset "utf-8";

#contact{margin: 0 auto; }
#contact .info{padding: 100px 0;margin: 0 auto;}
#contact .info>.item{display: block;float: left;width: 31.33%; height: 200px; margin-right: 3%; margin-bottom: 3%; background: #fff; box-sizing: border-box;padding: 50px 80px;text-align: left; transition: all .35s;}
#contact .info>.item:nth-child(3n){margin-right: 0;}
#contact .info>.item>.ico{width: 30%;text-align: left;}
#contact .info>.item>.ico>i{font-size: 10rem; color: #154a9a; background: linear-gradient(to top right, #00a687 0%, #154a9a 25%, #00a687 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
#contact .info>.item>.box{width: 65%;text-align: left; padding-top: 20px;}
#contact .info>.item>.box>.tit{font-size: 1.4rem; color: #999;}
#contact .info>.item>.box>.txt{ padding: 5px 0; font-size: 1.7rem; color: #333;}
#contact .info>.item:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}

#map{width: 100%; margin: 0 auto;}
#map>iframe{width: 100%;height: 600px;}


#consultation{background: #fff;margin: 0 auto;padding: 100px 0;}
#consultation .title{ font-size: 3.6rem; color: #333;}
#consultation .intro{font-size: 1.6rem; color: #999; line-height: 2.4rem;}
#consultation .form{padding: 30px 0; margin: 0 auto;}
#consultation .form>.title{ position: relative;font-size: 5rem; text-align: center; font-weight: 700; color: #333;}
#consultation .form>.title:after{position: absolute;z-index: 3;left: 50%; bottom: 0; width: 50px;height: 3px;background: #e60012; transform: translateX(-50%); content: '';}
#consultation .form>.intro{ padding: 30px 0; text-align: center;font-size: 1.6rem; color: #999;line-height: 2.4rem;}
#consultation .form>.intro>a{display: inline-block;text-decoration: underline;transition: all .35s;}
#consultation .form .row{ position: relative; display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0;}
#consultation .form .row>[class*="col-"] {padding-right: 20px;}
#consultation .form .row>.group{display: block; margin-bottom: 20px;}
#consultation .form .row>.group input{ display:inline-block; box-sizing:border-box; width:100%; height: 60px; line-height: 60px; padding:0 20px;-webkit-appearance:none; font-size: 1.4rem;font-family: 'sourcehansans', sans-serif; border:1px solid #ddd; color:#666;text-align:left; transition: all .35s;}
#consultation .form .row>.group input::-webkit-input-placeholder{ color:#999;}
#consultation .form .row>.group textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:13px 20px;-webkit-appearance:none; font-family: 'sourcehansans', sans-serif; font-size: 1.4rem; line-height:3.2rem; border:1px solid #ddd; color:#666;text-align:left;transition: all .35s;}
#consultation .form .row>.group textarea::-webkit-input-placeholder{ color:#999;}
#consultation .form .row>.group input:hover, #consultation .form .row>.group textarea:hover{border-color: #ccc;}
#consultation .form .row>.col-3{width: 33.33%; flex: 0 0 33.33%;}
#consultation .form .row>.col-5{width: 50%; flex: 0 0 50%;}
#consultation .form .row>.col-10{width: 100%; flex: 0 0 100%;}
#consultation .form #checkimg{display:inline-block;  margin-top: 16px; cursor:pointer;}
#consultation .form .row>.button{text-align: right;}
#consultation .form .row>.button .form_button{display:inline-block!important; box-sizing:border-box; border: 0!important; text-align: center; font-weight: bold;height: 60px; line-height: 60px; background: #154a9a;padding:0 100px; font-size: 1.6rem; color:#fff;  cursor:pointer; transition: all .35s;}
#consultation .form .row>.button .form_button:hover{background: #00a687;}
.layui-layer-btn .layui-layer-btn0 { border-color: #00a687!important; background-color: #00a687!important; color: #fff!important;}



@media only screen and (max-width: 1680px){

    #contact .info>.item{padding: 50px 60px;}

}


@media only screen and (max-width: 1600px){




}
@media only screen and (max-width: 1560px){



    #contact .info>.item>.box>.txt{font-size: 1.6rem;}

}
@media only screen and (max-width: 1460px){


    #contact .info>.item>.ico{width: 25%;}
    #contact .info>.item>.ico>i{font-size: 9rem;}
    #contact .info>.item>.box{width: 70%;padding-top: 16px;}

}
@media only screen and (max-width: 1380px){

    #contact .info>.item{padding: 40px;height: 160px;}
}

@media only screen and (max-width: 1320px){

    #contact .info>.item{padding: 30px;}

}

@media only screen and (max-width: 1280px){

    #contact .info>.item{display: block;float: left;width: 48.5%;  margin-right: 0;}
    #contact .info>.item:nth-child(even){float: right;}

}
@media only screen and (max-width: 1080px) {
    #map > iframe {height: 650px;}
}

@media only screen and (max-width: 860px){


    #contact .info>.item{float: none;width: 100%; height: auto; margin-right: 0;}
    #contact .info>.item:nth-child(even){float: none;}
    #contact .info>.item>.ico{width: 20%;}
    #contact .info>.item>.box{width: 80%;}



    #consultation .title{ font-size: 3rem; }
    #consultation .intro{font-size: 1.4rem; line-height: 2rem;}
    #consultation .form .row>[class*="col-"] {padding-right: 0;}
    #consultation .form .row>.col-3{width: 100%; flex: 0 0 100%;}
    #consultation .form .row>.col-5{width: 100%; flex: 0 0 100%;}
    #consultation .form #checkimg{position: absolute; right: 20px; top: 20px; margin-top: 0;}
    #consultation .form .row>.button .form_button{display:block!important; width: 100%;}










    }

@media only screen and (max-width: 640px){


    #contact .info{padding: 50px 0;}

    #consultation{padding: 50px 0;}
    #consultation .title{text-align: center;}
    #consultation .intro{text-align: center; font-size: 1.3rem;}
    #consultation .form .row>.group input{ height: 40px; line-height: 40px;}
    #consultation .form #checkimg{top: 10px;}



    }


@media only screen and (max-width: 520px){

    #contact .info>.item>.ico{width: 100%; float: none; text-align: center;}
    #contact .info>.item>.box{width: 100%; float:none; text-align: center;}


}