.sub-banner{width: 100%;height:500px;margin-top: 100px;background-size: cover;background-position: center;background-color: #222;position: relative;}
.sub-banner:after{content: '';width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);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 h4{width: 100%;font-size:50px;font-weight: 550;line-height:60px;margin-bottom:10px;color: var(--color-4);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 h4{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 h4{font-size:2.5rem;line-height: 3rem;letter-spacing: 0}
    .sub-banner .container p{font-size: 1.6rem;line-height: 2.5rem;}
    .pro-banner .text{display: none}
}

/*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:var(--color-3);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 var(--color-3);
}
@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;line-height:45px;}
    .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 var(--color-3);
    }

}
.about{background-color:#f1f3f5;border-bottom-right-radius: 300px;}
.page-nav .loc{width:35%;}
.page-nav .page-nav-ul{width:65%;}
.page-nav .page-nav-ul li{width:25%;}
@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) {
    .about{border-bottom-right-radius: 100px;}
    .page-nav .loc{display: none}
    .page-nav .page-nav-ul{width: 100%;}
    .page-nav .page-nav-ul li{width:100%;}
}
.container{flex-wrap:wrap;}
.title{width: 100%;}
.title h4{font-size:30px;color:var(--color-3);padding: 0;text-transform: uppercase;position: relative;font-weight:550;margin-bottom:40px;}
.title h4:after{content: '';width:40px;height:2px;background-color:var(--color-3);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 var(--color-3)}
.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:var(--color-3)}
.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:var(--color-3)}
.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-gradient(linear,0% 100%,0% 100%, from(var(--color-3)), to(var(--color-4)));
    background-image:-webkit-linear-gradient(45deg, var(--color-3), var(--color-4));
    background-image:-o-linear-gradient(45deg, var(--color-3), var(--color-4));
    background-image:linear-gradient(45deg, var(--color-3), var(--color-4));
    box-shadow:0 10px 20px rgba(3,110,184,0.3);
    -webkit-box-shadow:0 10px 20px rgba(3,110,184,0.3);
    -moz-box-shadow:0 10px 20px rgba(3,110,184,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;}
}

/*search*/
.search{width: 100%;padding: 50px 0}
.search-title{padding:150px 0 0 0;}
.search-title a{width: 15%;display: inline-block;background-color:#f1f3f5;font-size: 18px;font-weight:550;text-align: center;height:53px;line-height: 53px;margin-right:5%;border-radius: 50px;}
.search-title form{width:80%;padding: 0;margin: 0;}
.search-title form label{border: 1px solid #ddd;width: 100%;border-radius: 30px;overflow: hidden;}
.search-title form label input{border:none;height: 50px;width: 90%;text-indent:30px;font-size: 16px;color: #868e96;font-weight: 400}
.search-title form label button{border:none;height: 50px;background-color: transparent;width: 10%;text-align: right;padding-right:30px;}
.search-title form label button i{font-size: 2.5rem;color:#ced4da;font-weight: 400}
.search .tips{padding:40px 0;}
.search .tips p{font-size: 18px;line-height: 30px;color: #868e96;font-weight: 400;}
.search .tips p span{color: var(--color-4);font-weight: 550;}
.search-info{width: 100%;flex-wrap: wrap;align-items: flex-start;}
.search-left{width: 15%;margin-right:5%;}
.search-dl{width: 100%;background-color:#f8f9fa;padding:40px;border-bottom-right-radius: 50px;border-top-left-radius: 50px;}
.search-dl dt{display: block;width: 100%;font-size:18px;font-weight: 500;margin-bottom: 10px;color: #495057}
.search-dl dd{display: block;padding:5px 0 5px 20px;position: relative;}
.search-dl dd:after{content: '';width: 8px;height: 8px;background-color:#dee2e6;position: absolute;left: 0;top:50%;margin-top: -4px;border-radius: 50%}
.search-dl dd a{display: block;font-size: 14px;line-height: 22px;font-weight: 400;color: #495057}
.search-dl dd a:hover{color: var(--color-4);}
.search-right{width:80%;padding-left:5%;border-left: 1px solid #eee;}
.search-list{width: 100%;padding:0 0 20px 0}
.search-list li{display: block;width: 100%;padding: 20px 0;border-bottom: 1px dashed #ddd;}
.search-list li a{display: block;position: relative;}
.search-list li a h6{font-size: 18px;font-weight: 500;color: #495057;margin-bottom: 5px;}
.search-list li a p{font-size: 14px;line-height: 22px;color: #868e96;font-weight: 400;}
.search-list li a span{position: absolute;right: 0;font-size: 2.5rem;color: #adb5bd}
@media (max-width: 992px) {
    .search{padding:20px;}
    .search-title{padding:100px 0 0 0;}
    .search-title a{width: 32%;font-size:1.2rem;height:45px;line-height:43px}
    .search-title form{width:66%;padding: 0;margin: 0;}
    .search-title form label input{border:none;height:45px;width:78%;text-indent:20px;font-size:1.4rem}
    .search-title form label button{height:45px;width:22%;text-align:center;padding-right:0;}
    .search-title form label button i{font-size:2.5rem;}
    .search .tips{padding:20px 0;width: 100%;}
    .search .tips p{font-size: 1.6rem;line-height:2.2rem}
    .search-left{width: 100%;margin-right:0;order:2;}
    .search-dl{padding:40px;border-bottom-right-radius: 30px;border-top-left-radius: 30px;margin-bottom: 30px;background-color:#f1f3f5}
    .search-dl dt{font-size:1.8rem;}
    .search-dl dd{padding:8px 0 8px 20px;}
    .search-dl dd a{font-size:1.5rem;line-height: 2.5rem}
    .search-dl dd a:hover{color: var(--color-4);}
    .search-right{width:100%;padding-left:0;border-left:none;order:1;}
    .search-list{width: 100%;padding:0 0 20px 0;background-color: #fff;}
    .search-list li{border-bottom: 1px dashed #aaa;}
    .search-list li a h6{font-size: 1.4rem;}
    .search-list li a p{font-size: 1.2rem;line-height:1.8rem;}
    .search-list li a span{font-size:2rem;}
}