@charset "utf-8";
/* CSS Document */
.ind_banner{ position: relative}
.ind_banner .item{ position: relative}
.ind_banner .info{ color: #fff; position: absolute; width: 100%; text-align: center; top:43%; z-index:5; opacity:0; transition: 0.5s;transition-delay:0.2s;}
.ind_banner .pic,
.ind_banner .txt{ max-width: 800px; width: 80%; margin: auto;}
.ind_banner .pic{ padding-bottom:30px; transform:translateX(-40px);transition-delay:0.2s;}
.ind_banner .txt{transform:translateX(-20px);transition-delay:0.3s;}
.ind_banner .slick-current .info{ opacity:1;}
.ind_banner .slick-current .txt{ opacity:1;}
@media(max-width:768px){
.ind_banner .txt{ display: none}
}

.ind_title{ font-weight: bold}

.ind_more{ width: 160px; line-height:48px; display: inline-block; text-indent: 32px; border: solid 1px #004289; background: #004289 url("../images/ind_more.png") no-repeat 80%; color: #fff; border-radius: 30px; transition: 0.5s}
.ind_more:hover{ color: #fff; border-color: #000; background-color: #000; background-position:85%}
@media(max-width:1200px){
.ind_more{ width: 140px; line-height:42px;}
}
@media(max-width:768px){
.ind_more{text-indent:20px; width: 120px; line-height:38px;}
}

.ind_service{ padding-top: 5%; padding-bottom:8%; overflow: hidden;}
/* .ind_service .auto{max-width: 1600px;} */
.ind_service .slickjs_nav{}
.ind_service .slickjs_nav .slick-list{ padding-top: 50px; padding-bottom: 50px;}
.ind_service .slickjs_nav .item{position: relative; text-align: center; white-space: nowrap; display: inline-block; transition: all .3s ease-in-out;}
.ind_service .slickjs_nav .item a{ cursor: pointer; transition: all .3s ease-in-out;}
/* .ind_service .slickjs_nav .item.on{background-color: #004289;}
.ind_service .slickjs_nav .item.on a{color: #fff;} */
.ind_service .slickjs_nav .slick-current a{ font-weight: bold; color: #004289}
.ind_service .slickjs_nav .slick-current:after{ content: ''; position: absolute; display: block; left: 0; right: 0; width: 1px; height: 50px; margin: auto; background: #c2c2c2}
.ind_service .slickjs_info {width: 86.97%; background: #f9fafc;}
.ind_service .slickjs_info .slick-list{ overflow: inherit}
.ind_service .slickjs_info .box{ position: relative}
.ind_service .slickjs_info .pic{ position: absolute; width:57.9715%; height: 100%}
.ind_service .slickjs_info .ispic{ height: 100%}
.ind_service .slickjs_info .info{ padding:10% 5% 18.032% 62.9715%}
.ind_service .slickjs_info .txt{ max-width: 290px; margin: auto}
.ind_service .slickjs_info h3 { padding: 5% 0; position: relative}
.ind_service .slickjs_info h3:before{ content:''; width: 10%; height: 2px; top: 0; position: absolute; background: #004289}
.ind_service .slickjs_info h3 a{ color: #004289}
.ind_service .slickjs_info p{ line-height: 30px; height: 90px; margin-bottom: 12%}
.ind_service .slickjs_info .more{ color: #182437}
.ind_service .slickjs_info .more:after{ content: ''; display: inline-block; margin-left: 6px; transform: rotate(-45deg); width: 6px; height: 6px; border-right: solid 2px #182437; border-bottom: solid 2px #182437}
.ind_service .slickjs_info .slick-arrow{ top: 80%; background: #ffffff; border-radius: 0; width: 90px; height: 70px;}
.ind_service .slickjs_info .slick-prev{ left: 70%;margin-left: -90px; }
.ind_service .slickjs_info .slick-next{ left: 70%; right:auto;background-color: #004289}
.ind_service .slickjs_info .slick-prev:before{ background-image: url("../js/slick/slick-prev2.png")}
.ind_service .slickjs_info .slick-next:before{ background-image: url("../js/slick/slick-next2.png"); background-position: left;}
.ind_service .slickjs_info .slick-arrow:hover{ background-color: #004289}
@media(max-width:1400px){
.ind_service{padding-bottom:11%}
.ind_service .slickjs_info .slick-arrow{width:80px; height:60px;}
.ind_service .slickjs_info .slick-prev{margin-left: -80px; }
}
@media(max-width:1200px){
.ind_service{padding-bottom:13%}
.ind_service .slickjs_info .slick-arrow{width:60px; height:40px;}
.ind_service .slickjs_info .slick-prev{margin-left: -60px; }
}
@media(max-width:960px){
.ind_service{padding-bottom:5%}
.ind_service .slickjs_info .slick-arrow{width:40px; height:40px; top: 100%; left: 57.9715%; margin-top: -20px;}
.ind_service .slickjs_info .slick-prev{margin-left: -40px; }
}

.ind_about{ position: relative; padding-top: 4%; padding-bottom: 4%}
.ind_about .ind_title{ position: absolute; top: -10rem}
.ind_about:before{ content: ''; width: 50%; height: 100%; position: absolute; right: 0; top: 0; background: #004289 url("../images/ind_aboutbg.png") no-repeat bottom; background-size: contain}
.ind_about .info{ float: right; width: 37%; padding-top:4%; padding-bottom:4%; color: #fff}
.ind_about .txt{ padding-top: 4%; padding-bottom:12%;}
.ind_about .roll{ padding-top:12%}
.ind_about .roll li{ display: inline-block; width:29%; font-size: 18px;}
.ind_about .roll li:nth-child(1){ width: 39%}
.ind_about .roll li span{ line-height: 1; display: block; color: #d4251c; font-size: 16px; white-space: nowrap;}
.ind_about .roll li b{ font-size:2.3vw; font-weight: bold}
.ind_about .pic{ float: left; width:59.5%}
.ind_about .ind_more{ border-color: #fff}
.ind_about .ind_more:hover{ border-color: #000}
@media(max-width:1200px){
.ind_about .roll li{ font-size: 16px;}
}
@media(max-width:960px){
.ind_about .info,
.ind_about .pic{ float: none; width: 100%}
.ind_about:before{ width: 100%}
.ind_about .ind_title{ position: relative; top: 0; color: #fff}
.ind_about .txt{ padding-top: 0; padding-bottom: 4%}
.ind_about .roll{ padding-top: 4%}
}

.ind_news { padding: 5% 0}
.ind_news .hide{ height: 0; overflow: auto}
.ind_news .tabs_nav{ text-align: right; padding-bottom: 4%}
.ind_news .tabs_nav li{ display: inline-block; margin-left: 20px;}
.ind_news .tabs_nav li a{ display: inline-block; cursor: pointer;}
.ind_news .tabs_nav li.show a{ color: #004289; border-bottom: solid 2px #004289}
.ind_news .fl_box{ float: left; width: 50%}
.ind_news .list_hot.two{ margin-left: -1%; margin-right: -1%;}
.ind_news .list_hot.two .item{ float: left; width: 50%; padding: 0 1%}
.ind_news .list_hot .ispic{ height: 420px}
.ind_news .list_hot .info{padding: 30px 30px 30px 25%; line-height: 28px; background: #f8f8f8; position: relative}
.ind_news .list_hot .info p{ height: 56px; margin-top: 6px;}
.ind_news .list_hot time{ font-size: 18px; position: absolute; width:19.72%; height: 100%; text-align: center; background: #004289; color: #fff; left: 0 ; top: 0;} 
.ind_news .list_hot time b{ display: block; font-size: 48px; line-height:1.2; padding-top:20%}
.ind_news .list_hot a:hover{ color: #004289}
.ind_news .fr_box{ float: right; width: 45.77%}
.ind_news .list_top .item{ float: left; width:48.468%}
.ind_news .list_top .item:nth-child(2){ margin-left: 3.064%}
.ind_news .list_top .ispic{ height: 187px}
.ind_news .list_top .info{ padding-top: 10px; padding-bottom:33px;}
.ind_news .list li{ line-height: 68px;  border-bottom: solid 1px #eeeeee}
.ind_news .list li time{ float: right}
@media(max-width:1200px){
.ind_news .list_hot time b{ font-size:32px;}
}
@media(max-width:768px){
.ind_news .fl_box,
.ind_news .fr_box{ float: none; width:100%}
.ind_news .fl_box{ padding-bottom: 4%}
.ind_news .list_hot.two .item{ float:none; width:100%;}
.ind_news .list_hot.two .item:nth-child(1){ margin-bottom:4%}
.ind_news .list_hot .ispic{ height: auto; padding-bottom: 60%;}
.ind_news .list_hot time{ font-size: 12px; width: 16%;}
.ind_news .list_hot time b{ font-size:26px;}
.ind_news .list_hot .info{padding:10px 10px 10px 18%}
.ind_news .list_top .ispic{ height: auto; padding-bottom: 60%;}
.ind_news .list li{ line-height: 40px;}
}

.ind_global{ padding: 5% 6% 5% 0; background: #f9fafc; color: #fff;}
.ind_global .fl_box{ float: left; width: 41%}
.ind_global .fl_box .info{ padding-top: 10%}
.ind_global .fl_box .txt{ line-height: 36px; padding-bottom:8%}
.ind_global .fl_box .link{ padding-top:12%}
.ind_global .fl_box .link li{ float: left; width: 33%; position: relative}
.ind_global .fl_box .link a{ padding-top:55px; color: #fff; display: inline-block; background: no-repeat center top}
.ind_global .fl_box .link a:hover{ color: #004289}
.ind_global .fl_box .link li:nth-child(1) a{background-image: url("../images/c1.png")}
.ind_global .fl_box .link li:nth-child(2) a{background-image: url("../images/c2.png")}
.ind_global .fl_box .link li:nth-child(3) a{background-image: url("../images/c3.png")}
.ind_global .fl_box .link li:nth-child(2):before,
.ind_global .fl_box .link li:nth-child(2):after{ content: ''; position: absolute; width: 1px; height: 50%; top:30%; background: #fff}
.ind_global .fl_box .link li:nth-child(2):before{ left: -20%}
.ind_global .fl_box .link li:nth-child(2):after{ right:20%}
.ind_global .fr_box{ float: right; width:60.846%; margin-right: -10%; position: relative}
.ind_global .fr_box .map-box{ position: absolute; margin: auto; width:91.899%; top: -6.5%; left: 0; right: 0;height: 100%;}
.ind_global .fr_box .map-box .map{width: 100%;height: 100%;}
.ind_global .fr_box .map-box .item .city{ opacity: 1}
.ind_global .fr_box .map-box .item .icon i{ width: 2200%; height: 2200%}
.ind_global .fr_box .map-box .item.Headoffice .icon i{ width:5000%; height: 5000%}
.ind_global .fr_box .map-box .item.Headoffice .city{ opacity: 0; background: #fff; color: #ff0000; width: auto; white-space: nowrap; padding:10px 20px; top: 1000%}
@media(max-width:1024px){
.ind_global{ padding-right: 0}
.ind_global .fl_box,
.ind_global .fr_box{ float: none; width:100%}
.ind_global .fl_box .info{ padding-top: 4%}
.ind_global .fl_box .txt{ padding-bottom: 4%}
.ind_global .fl_box .link{ padding: 4% 0}
.ind_global .fr_box{ margin-right: 0; max-width: 864px; margin: auto}
}
@media(max-width:640px){
.ind_global .fr_box .map-box{ position: relative; top: auto}
.ind_global .fr_box .diqiu{ position: absolute}
}

/* 20210119 */
.ind_global,.footer {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* 20220311 */
.ind_service .slickjs_info p {
    height: 270px;
    -webkit-line-clamp: 9;
}
.infobox.topic .fl_box {
    width: 48%;
}

.infobox.topic .fl_box:nth-child(2) {
    float: right;
}

.infobox.topic  .list_hot.two .fl_box .item {
    float: none;
    width: 100%;
}
@media(max-width:768px){
    .infobox.topic .fl_box,.infobox.topic .fl_box:nth-child(2) {
        width: auto;
        float: none;
    }
}