@charset "utf-8";
/* CSS Document */
*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body{ margin:0px; padding:0px; font-size:12px;font-family:Arial; color:#303030;line-height:1; background:#f8f8f8; min-width: 1234px; margin: 0 auto;}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0px; padding:0px;}

ul,li{ list-style:none}

a{ color:#5c5c5c; text-decoration:none}

.clear{ zoom: 1; }
.clear:after { content: ''; display: block; clear: both; }
.fl { float:left}
.fr { float:right}
.hidden{display:none; background: url() no-repeat center;}

.headerbox{ width: 100%; background: #fff; height: 100px; display: flex; justify-content: space-between;}
.header{width: 1188px; margin: 0 auto; overflow: hidden;display: flex; justify-content: space-between; align-items: center;}
.header .logo{ float: left; width: 473px; height: 63px;}
.header .phone{ float: right; overflow: hidden; display: flex; align-items: center;}
.header .phone>img{ float: left;width: 47px; height: 47px;}
.pdiv{ float: left; margin-left: 20px;}
.pdiv span{ display: block; font-size: 24px; color: #0657B3; margin-top: 6px;}
.pdiv p{ color: #000000; font-size: 14px;}

.navbox{ width: 100%; height: 50px; line-height: 50px; background: #0657b3}
.navbox ul{ width: 1134px; margin: 0 auto; }
.navbox li{float: left; width: 128px; text-align: center; position: relative;}
.navbox h3 a{display: block;  color: #fff; text-align: center; line-height: 50px; padding: 0 15px;font-size: 16px; }
.navbox .on h3 a{background: #0572ee;color: #fff;}
.navbox a:hover{background: #0572ee;color: #fff;}
.sub{position: absolute; background: rgba(0,0,0,.6);width: 100%; left: 0; top: 50px;z-index: 100;display: none;}
.sub a{display: block; text-align: center; color: #fff; line-height: 40px;border-bottom: 1px solid rgba(255,255,255,0.1);}

.banner img{width: 100%;}

.titbox{ width: 100%; margin: 0 auto; padding-top: 48px;}
.titbox .tit{ font-size: 28px; color: #0657b3; text-align: center; font-weight: bold; }
.titbox .tibt{ font-size: 14px; color: #080808; text-align: center; margin-top: 30px;}

.itemAbox{ width: 1234px; margin: 0 auto; }

.title { font-size: 20px; line-height:50px; font-weight: 600; color: #0657b3; font-family: Arial, Helvetica, sans-serif; }

.itemA{ overflow: hidden; margin-top: 64px; }
.itemA .item{ float: left; width: 275px; height: 349px; background: #fff; border-radius: 10px; padding: 39px 40px 48px; transition: all 0.6s; margin: 0 16px; }
.itemA .item:hover{ background: #DDEDFE }
.itemA .item>img{ width: 73px; margin: 0 auto; }
.itemA .item>h3{  font-size: 18px; font-weight: bold; text-align: center; color: #000; margin-top: 30px;}
.itemA .item>p{  font-size: 14px; text-align: left; color: #444;line-height: 30px; margin-top: 18px;}

.btnbox{ width: 131px; height: 38px; line-height: 38px; margin: 0 auto; margin-top: 38px; }
.btnbox a{ display: block; width: 100%; height: 100%; color: #fff; background: #0657b3; font-size: 14px; text-align: center; transition: all 0.6s;  cursor: pointer; }
.btnbox:hover a{ background: #d72729 }

.itemBbox{ width: 1234px; margin: 0 auto; margin-top: 10px; }
.bgline{ width: 1188px; height: 49px; margin: 0 auto; background: #0657b3; margin-top: 19px; }
.itemB{ overflow: hidden; width: 1188px;  margin: 0 auto; background: #f8f8f8; box-shadow: 0px 5px 5px 0px rgba(13, 5, 10, 0.15); padding: 30px 19px 30px; }
.itemB .item{ float: left; width: 260px; margin: 0 13.6px; margin-bottom: 18px; transition: all 0.6s; cursor: pointer;  }
.itemB .item>img{ width: 260px; height: 192px; border: 1px solid #E6E6E6; }
.itemB .item>h3{font-size: 14px; text-align: center; color: #000; padding: 12px 10px 12px; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;transition: all 0.6s;  }
.itemB .item:hover{ transform: translateY(-15px); }
.itemB .item:hover h3{ background: #0657b3; color: #fff; }

.itemCbox{ width: 100%; height: 312px; background: url(../images/img03.png) no-repeat; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; margin-top: 50px;}
.itemC{ display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.itemC .lefont{ float: left; width: 569px; height: 31px; }
.itemC .rifont{ float: right; border-left:4px solid #fff; padding-left: 15px; margin-left: 116px; }
.itemC .rifont .p1{ color: #fff; font-size: 24px; font-weight: normal; }
.itemC .rifont .p2{ color: #fff; font-size: 40px; font-weight: normal; margin-top: 20px; }

.itemBbox.itemDbox{ margin-top: 10px; }
.itemB.itemD{ overflow: hidden; width: 1188px;  margin: 0 auto; background: #f8f8f8; box-shadow: inherit; padding: 0; margin-top: 45px; }
.itemB.itemD .item{ float: left; width: 380px; margin: 0 8px; margin-bottom: 18px; transition: all 0.6s; cursor: pointer;  }
.itemB.itemD .item>img{ width: 380px; height: 260px; border: none; }

.aboutbox{width: 100%;height: 392px;background: #0657b3;margin-top: 76px;/* display: flex; *//* justify-content: center; *//* align-items: center; */padding-top: 40px;}
.about{width: 1188px; margin: 0 auto;  overflow: hidden; display: flex; justify-content: space-between; align-items: center; }
.about .able{  float: left;}
.about .able>h2{ color: #fff; font-weight: bold; font-size: 28px; }
.about .able>h3{ color: #fff; font-weight: normal; font-size: 22px; margin-top: 24px; }
.about .able>p{ color: #fff; font-weight: normal; font-size: 14px; margin-top: 18px; width: 472px; line-height: 24px;}
.debtn{ display: block; border: 1px solid #fff; width: 94px; height: 28px; line-height: 28px; color: #fff; font-weight: normal; font-size: 14px; text-align: center; margin-top: 44px; cursor: pointer; transition: all 0.6s; margin-left: 320px; }
.debtn:hover{ background: #fff; color: #0657b3; }
.about .able{  float: right;}

.newsbox{width: 100%;padding: 70px 0;background: #fff;/* display: flex; *//* justify-content: center; *//* align-items: center; */}
.news{ width: 1188px; margin: 0 auto;  overflow: hidden; display: flex; justify-content: space-between; align-items: center;}
.newle{  float: left; width: 448px; height: 283px; background: url(../images/img11.png) no-repeat; background-size: cover; background-position: center; position: relative;}
.newle .bfont{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #fff; width: 146px; height: 133px; text-align: center; display: flex; justify-content: center; align-items: center; }
.newle .bfont p{ font-size: 40px;color: #0657B3; opacity: 0.3; font-weight: bold;}
.newle .bfont span{ display: block; font-size: 24px;color: #1E50AF; margin-top: 16px;}
.newri{ float: right; margin-left: 40px; width: calc(100% - 40px - 448px); }
.newri ul{}
.newri ul li{ margin-bottom: 24px; border-bottom: 2px dotted #ccc; padding-bottom: 15px; position: relative; }
.newri ul li .ltwo{ width: 0%; height: 2px; background: #0657b3; position: absolute; left: 0; bottom: -2px; transition: all 0.6s; }
.newri ul li:hover .ltwo{  width: 100%;}
.newri ul li:hover a b{ color: #0657b3}
.newri ul li:last-child{ margin-bottom: 0; }
.newri ul li a{ display: block; }
.newri ul li a b{ display: block; color: #000; font-size: 14px; font-weight: bold;}
.newri ul li a b span{color: #0657B3; margin-right: 6px;}
.newri ul li a i{ font-style: normal; display: block; margin-top: 15px;word-break: break-all; text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden; line-height: 16px;  }

.footerbox{ width: 100%; height: 300px; background: #0657B3; /* display: flex; justify-content: center; align-items: center; */padding-top: 68px;}
.footer{width: 1188px; margin: 0 auto;  overflow: hidden; display: flex; justify-content: space-between; align-items: center;}
.footer .foole{ float: left; overflow: hidden; }
.footer .foole dl{ float: left; width: 130px; margin-right: 64px; }
.footer .foole dl:last-child{margin-right: 0; }
.footer .foole dl dd{ color: #fff; font-size: 16px; margin-bottom: 15px; }
.footer .foole dl dt{ line-height: 28px; width: 100%;}
.footer .foole dl dt a{ display: block; color: #fff; font-size: 14px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.footer .foole dl dt a:hover{ color: yellow; text-decoration: underline; }
.footer .foomi{ float: left; margin-left: -60px; }
.footer .foomi>img{ width: 128px; height: 64px; margin: 0 auto; }
.footer .foomi>p{ width:294px; margin: 0 auto; text-align: center; font-size: 14px; color: #fff; line-height: 24px; }
.footer .foori{ float: right; }
.footer .foori dl{width: 260px;}
.footer .foori dl dd{ color: #fff; font-size: 16px; margin-bottom: 15px;}
.footer .foori dl dt{ line-height: 28px;width: 100%; }
.footer .foori dl dt a{display: block; color: #fff; font-size: 14px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.fbt{ width: 100%; height: 28px; background: #012b5d; line-height: 28px; display: flex; justify-content: center; align-items: center; }
.fbt p{  color: #fff; font-size: 12px; margin-right: 40px;}
.fbt img{  width: 20px; height: 20px; margin-right: 10px;}

.banner .swiper-pagination-bullet {
    width: 50px;
    height: 3px;
    border-radius: 0;
    opacity: 1;
    background: #0657B3;
    position: relative;
    transition: background-color .3s ease;
}

.banner .swiper-pagination-bullet-active {
    background: #0657B3;
}

.banner .swiper-pagination-bullet::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: 0 0;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    animation: sliderPagination 3s linear forwards;
}

.wrapper .swiper-container .swiper-pagination-bullet:hover {
    background-color: #fff;
}

@keyframes sliderPagination {
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}