.sub-banner{width: 100%;height:500px;background-size: cover;background-position: center;background-color: #222;position: relative;margin-top: 100px;}
.sub-banner:after{content: '';width: 100%;height: 100%;background-color: rgba(0,0,0,0.35);position: absolute;left: 0;top:0;z-index: 1;}
.sub-banner .container{position: relative;z-index: 2;}
.sub-banner .container .text{padding: 12% 0 0 0}
.sub-banner .container h2{width: 100%;font-size:50px;font-weight: 550;letter-spacing: 5px;line-height:60px;margin-bottom:10px;color: #fff;text-transform: uppercase;}
.sub-banner .container p{width: 100%;font-size: 25px;font-weight: 450;line-height:50px;;color: #fff;text-transform: uppercase;}
@media (max-width: 1536px) {
    .sub-banner{height:400px;margin-top:70px;}
}
@media screen and (max-width: 1440px){
    .sub-banner{height:350px;}
    .sub-banner .container h2{font-size:40px;line-height: 50px;}
    .sub-banner .container p{font-size: 20px;line-height: 40px;}
}
@media screen and (max-width: 991px){
    .sub-banner{height:200px;margin-top:60px;}
    .sub-banner:after{background-color: rgba(0,0,0,0.3);}
    .sub-banner .container .text{padding:20% 0 0 0}
    .sub-banner .container h2{font-size:2.5rem;line-height: 3rem;letter-spacing: 0}
    .sub-banner .container p{font-size: 1.6rem;line-height: 2.5rem;}
}

/*page-nav*/
.main{padding: 0!important;margin: 0!important;}
.main .page-nav{background-color:#fff;width: 100%;}
.main .page-nav .loc {line-height: 80px;color:#495057}
.main .page-nav .loc a{font-size: 18px;color:#495057;line-height: 80px;}
.main .page-nav .loc i{font-size: 1.6rem;margin-right: 10px;}
.main .page-nav .loc .icon-jiating-{font-size:2rem;}
.main .page-nav ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.main .page-nav ul li{line-height: 80px;font-size:18px;border-left: 1px solid #eee;}
.main .page-nav ul li a{color:#495057;font-weight:400;display: block;position: relative;text-align: center;line-height: 80px;}
.main .page-nav li a:hover,.main .page-nav li a.cur{color:#fff;font-weight: 500;background-color:#188952;height: 82px}
.main .page-nav li a:hover:after,.main .page-nav ul li a.cur:after{
    content: '';left: 50%;margin-left: -10px;bottom: -12px;position: absolute;z-index: 9;
    width:0;
    height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:12px solid #188952;
}
@media (max-width: 1536px) {
    .main .page-nav .loc{line-height: 60px;}
    .main .page-nav .loc a{font-size: 16px;line-height:60px;}
    .main .page-nav ul li{font-size:16px;line-height:60px;}
    .main .page-nav ul li a{line-height: 60px;}
    .main .page-nav li a:hover,.main .page-nav li a.cur{height: 62px}
}
@media (max-width: 1440px) {
    .main .page-nav .loc a{font-size: 14px;}
    .main .page-nav ul li{font-size:14px;}
}

@media (max-width: 991px) {
    .main .page-nav{margin-bottom: 0;}
    .main .page-nav .container{flex-wrap: wrap;padding: 0;}
    .main .page-nav .loc{display: none}
    .main .page-nav .page-nav-ul{width:100%;order: 1;}
    .main .page-nav ul li{font-size:1.5rem;font-weight:500;padding: 0!important;}
    .main .page-nav ul li:first-child{border-left: none;}
    .main .page-nav li a:hover:after,.main .page-nav ul li a.cur:after{
        margin-left: -6px;bottom: -6px;
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        border-top:6px solid #188952;
    }

}
.about{background-color:#f1f3f5;}
.page-nav .loc{width:35%;}
.page-nav .page-nav-ul{width:65%;}
.page-nav .page-nav-ul li{width:20%;}
@media (max-width: 1440px) {
    .page-nav .loc{width:30%;}
    .page-nav .page-nav-ul{width: 70%;}
    .page-nav .page-nav-ul li{width: 20%;}
}
@media (max-width: 992px) {
    .page-nav .loc{display: none}
    .page-nav .page-nav-ul{width: 100%;}
    .page-nav .page-nav-ul li{width:25%;}
}
.container{flex-wrap:wrap;}
.title{width: 100%;}
.title h4{font-size:30px;color:#188952;padding: 0;text-transform: uppercase;position: relative;font-weight:550;margin-bottom:40px;}
.title h4:after{content: '';width:40px;height:2px;background-color:#188952;position: absolute;bottom:-15px;left:2px;}
@media (max-width: 1440px) {
    .title h4{font-size:25px;margin-bottom:30px;}
}
@media (max-width: 992px) {
    .title h4{font-size:2.2rem;margin-bottom:5px;}
}


/*contact-form*/
.contact-form{width: 100%;position: relative;padding:50px 0;background-color: #fff;border-top-right-radius:200px;}
.contact-form form{
    width: 45%;position: relative;z-index: 3;margin-right: 5%;
    background-image: url(../images/bg-img.png);
    background-repeat: no-repeat;background-position: right bottom;
}
.contact-form form label input:focus,.contact-form form label select:focus,.contact-form form label textarea:focus{border: 1px solid #188952}
.contact-form .info{width: 50%;padding:0 50px;position: relative;z-index: 3;}
.contact-form .info .img{width: 100%;padding:10px 0}
.contact-form .info h4{font-size: 30px;font-weight:550;color:#495057;margin-bottom:20px;}
.contact-form .info h4 i{font-size:3.2rem;font-weight: 400;color:#188952}
.contact-form .info p{font-size: 18px;color:#495057;font-weight:400;line-height: 36px;}
.contact-form form h4{font-size: 30px;font-weight:550;color:#495057;margin-bottom:20px;}
.contact-form form h4 i{font-size:3.2rem;font-weight: 400;margin-right:10px;color:#188952}
.contact-form form label{display: block;width:100%;margin:15px 0;}
.contact-form form label input{width: 100%!important;font-weight: 400;font-size: 16px;color: #868e96;border: 1px solid #ddd;text-indent: 20px;line-height:50px;height:50px;background-color:#fff;}
.contact-form form label.i2 input{width:49%!important;margin-right:2%;}
.contact-form form label.i2 input:last-child{margin-right: 0;}
.contact-form form label textarea{background-color: transparent;font-weight:400;width: 100%;border: 1px solid #ddd;height:150px;outline: none;color:#212529;font-size: 16px;}
.contact-form form label textarea{padding: 20px;}
.contact-form form label span{font-size: 16px;font-weight: 400;display: inline-block;margin-left: 10px;}
.contact-form form button{
    border: none;text-transform: uppercase;
    width: 200px;height:50px;line-height: 45px;color: #fff;font-size:18px;
    font-weight: 500;outline: none;border-radius: 25px;
    background-image:-webkit-linear-gradient(45deg, #188952,#20c997);
    background-image:-o-linear-gradient(45deg, #188952,#20c997);
    background-image:linear-gradient(45deg, #188952,#20c997);
    box-shadow:0 15px 20px rgba(24,137,82,0.3);
    -webkit-box-shadow:0 15px 20px rgba(24,137,82,0.3);
    -moz-box-shadow:0 15px 20px rgba(24,137,82,0.3);
}
.contact-form form button i{font-size: 2.2rem;margin-left: 10px;}
@media (max-width: 1440px) {
    .contact-form form h4{font-size: 25px;}
    .contact-form form label{margin:15px 0;}
    .contact-form form label input{line-height:40px;height:40px;font-size: 15px;}
    .contact-form form label textarea{height:120px;font-size: 15px;}
    .contact-form form label textarea{padding: 20px;}
    .contact-form form label span{font-size: 15px;font-weight: 400;display: inline-block;margin-left: 10px;}
    .contact-form form button{width: 150px;height:45px;line-height: 45px;font-size:16px;}
    .contact-form form button i{font-size:2rem;margin-left: 5px;}
    .contact-form .info{}
    .contact-form .info h4{font-size: 25px;margin-bottom:20px;}
    .contact-form .info h4 i{font-size: 3rem;}
    .contact-form .info p{font-size: 15px;line-height: 30px;}
}
@media (max-width: 991px) {
    .contact-form{padding:20px 25px;background-color: #f1f3f5;border-top-right-radius:0}
    .contact-form .container{flex-wrap: wrap;padding: 0}
    .contact-form .flex-sb{flex-wrap: wrap!important;}
    .contact-form form{order: 2;padding: 20px!important;margin-right:0;border-radius: 12px;width: 100%!important;background-color: #fff;box-shadow:none;-webkit-box-shadow:none;}
    .contact-form form h4{font-size: 2.2rem!important;margin-bottom:20px;}
    .contact-form form h4 i{font-size: 2.5rem!important;}
    .contact-form form label button{width: 150px;margin:20px auto}
    .contact-form form label button i{color: #fff;}
    .contact-form form .form{width: 100%;padding: 20px;}
    .contact-form form label{margin:0!important;flex-wrap: wrap;}
    .contact-form form .form label input{line-height:40px;height:40px;width:100%;margin-right:2%;font-weight:400;font-size: 1.4rem;border: 1px solid #eee;}
    .contact-form form .form label input:last-child{margin-right: 0;}
    .contact-form form .form label textarea{height:100px;font-size: 1.4rem;border: 1px solid #eee;padding:10px;}
    .contact-form form .form button{width: 50%;height: 40px;line-height: 40px;font-size:1.4rem;}
    .contact-form form .form button i{font-size:1.8rem;}
    .contact-form form .form label input::-webkit-input-placeholder{font-size:1.2rem;font-family: arial, sans-serif;}
    .contact-form form .form label input::-moz-placeholder{font-size:1.2rem;font-family: arial, sans-serif;}
    .contact-form form .form label input:-ms-input-placeholder{font-size: 1.2rem;font-family: arial, sans-serif;}
    .contact-form form label.i2 input{margin-bottom: 2%!important;}
    .contact-form .info{width: 100%;padding:20px 0;order: 1;}
    .contact-form .info .img{width:50%;margin: 0 auto;text-align: center}
    .contact-form .info .img img{width: auto;max-width: 100%}
    .contact-form .info h4{font-size: 2.2rem;margin-bottom:20px;}
    .contact-form .info h4 i{font-size: 2.5rem;margin-right:5px;}
    .contact-form .info p{font-size: 1.5rem;line-height: 2.5rem;}
}