@charset "UTF-8";

/* ===========================
   基础布局
=========================== */
body {
    background: #fff;
}

.header-wrap-index,
.friendout,
.footer-wrap {
    min-width: 1180px;
}

/* ===========================
   Banner 轮播图
=========================== */
#myCarousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}

.carousel-inner .item .ban-div {
    height: 360px;
    cursor: pointer;
}

.carousel-indicators li {
    display: inline-block;
    _zoom: 1;
    _display: inline;
    margin: 0;
    width: 14px;
    height: 10px;
    text-indent: -999px;
    cursor: pointer;
    border: none;
    background: #e6e6e6;
}

.sub-title {
    width: 961px;
    height: 27px;
    font-size: 20px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #FFFEFE;
    line-height: 30px;
    -webkit-background-clip: text;
}

/* 淡入淡出 */
.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/* 分页器动画 */
.carousel-indicators li {
    position: relative;
    width: 14px;
    height: 10px;
    margin: 0;
    margin-right: 15px;
    border: none;
    border-radius: 7px;
    transition: width 0.3s ease-in-out, background 0.5s ease-in-out;
}

.carousel-indicators .active {
    width: 36px;
    height: 10px;
    margin-right: 15px;
    background: #3D91FF;
    border-radius: 7px;
    opacity: 1;
}

.carousel-indicators li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 10px;
    border-radius: 7px;
}

.carousel-indicators li:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
}

.carousel-indicators li.active:after {
    animation: progress 3s linear;
    animation-fill-mode: forwards;
}

/* ===========================
   公共标题区域
=========================== */
.dynamic-head,
.solution-head {
    position: relative;
    text-align: center;
}

/* 模块大标题 */
.big-title {
    color: #2e2e2e;
    font-family: "Microsoft YaHei";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
}

/* 大标题下蓝色短线 */
.line {
    width: 40px;
    height: 2px;
    margin: 0 auto;
    background: #3d91ff;
}
.solution-head .line { margin-bottom: 42px; }
.dynamic-tab { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.dynamic-tab a{
	width: 87px;
    height: 30px;
    border-radius: 5px;
    border: 0.5px solid #84B8FF;
    background: #FFF;
	color: #186cf5;
	text-align: center;
	font-family: "Microsoft YaHei";
	font-size: 14px;
    line-height: 30px;
	font-weight: 400;
	cursor: pointer;
}
.dynamic-tab a:hover {
    background: #EEF2FE;
}
.dynamic-tab a.active {
    background: #186cf5;
    color: #fff;
    border-color: #186cf5;
}
.dynamic-div{
	margin-top:22px;
}



/* ===========================
   了解更多按钮
=========================== */
.seemore {
    margin: 30px 0 0px;
    text-align: center;
}

.seemore .knowmore {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    width: 125.8px;
    height: 33.3px;
    overflow: hidden;
    border: 1px solid #186CF5;
    border-radius: 5px;
    line-height: 32px;
    color: #186CF5;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition: all .8s linear;
    -moz-transition: all .8s linear;
    -ms-transition: all .8s linear;
    -o-transition: all .8s linear;
    transition: all .8s linear;
}

.seemore .knowmore:hover {
    color: #fff;
    background: #186CF5;
}

.seemore .knowmore span { letter-spacing: -.3em; }
.solution .seemore     { margin-top: 32px; margin-bottom: 0; }

/* ===========================
   新闻动态
=========================== */
.dynamic {
    width: 1200px;
    margin: 0 auto 0;
    padding: 50px 0;
}

/* .dynamic-body { display: flex; justify-content: space-between; } */

.dynamic-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dynamic-list a {
    display: inline-block;
    width: 575px;
}

.dynamic-col .news {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 15px 0 10px;
    line-height: 28px;
	color: #2e2e2e;
	font-family: "Microsoft YaHei";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
}

.dynamic-col .news .icon {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 2px;
    background: #3D91FF;
    opacity: 1;
}

.dynamic-col .news .text {
    display: flex;
    align-items: center;
}

.dynamic-col .news:hover {
    color: #186CF5;
}

.dynamic-col .news .date {
    position: absolute;
    right: 0;
    width: 90px;
    height: 19px;
    line-height: 20px;
}

.dynamic-col .news-top {
    position: relative;
    padding: 10px;
	width: 300px;
	border-radius: 5px;
}

.dynamic-col .new-left { margin-top: 17px; }

.dynamic-col .news-more {
    position: absolute;
    right: 21px;
    bottom: 14px;
    width: 70px;
    height: 18px;
    background: url("../images/xinwen-more.png");
    background-size: contain;
}

.dynamic-col .news-image {
    position: relative;
    width: 100%;
    height: 155px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
}

.dynamic-col .news-bigTitle-div {
    position: absolute;
    bottom: 0;
    z-index: 2;
    background-image: linear-gradient(-180deg, transparent, rgba(0, 0, 0, .65) 97%);
    padding-bottom: 15px;
}

.dynamic-col .news-bigTitle {
	font-family: "Microsoft YaHei";
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    padding: 30px 20px 0;
    font-size: 16px;
    color: #fff;
    text-align: justify;
    text-overflow: ellipsis;
    letter-spacing: 1px;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dynamic-col .news-littleTitle-div {
    background: #edf1f4;
    padding: 1px;
    border-radius: 0 0 5px 5px; /* 圆角 */
}

.dynamic-col .news-littleTitle {
	font-family: "Microsoft YaHei";
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 20px;
    background: #edf1f4;
    font-size: 14px;
    color: #787878;
    text-align: justify;
    text-overflow: ellipsis;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dynamic-col .new-hover:hover               { box-shadow: 0 0 12px 1px #dae4f38c;; }
.dynamic-col .new-hover:hover img            { transform: scale(1.05); }
.dynamic-col .new-hover:hover .news-bigTitle { color: #fff; }
.news-card-date{
	font-family: "Microsoft YaHei";
	text-align: right;
	line-height: 22px;
	background: #edf1f4;
    font-size: 14px;
    color: #787878;
    padding: 0 20px 13px;
}

.news-item {
    float: left;
    width: 580px;
    height: 129px;
    margin-left: 20px;
    padding: 26px 21px 16px 28px;
    -webkit-transition: all .45s ease;
    -moz-transition: all .45s ease;
    -ms-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

.news-item:hover {
    /* background-color: #f5f5f5; */
    box-shadow: 0 3px 15px rgba(71, 119, 183, 0.16);
    cursor: pointer;
    transform: translateY(-4px);
}

.news-item .news-title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
    line-height: 21px;
}

.news-item .news-title .tit {
    display: inline-block;
    overflow: hidden;
    width: auto;
    height: 21px;
    padding-left: 10px;
    background: url('../images/index-news-rect-default.png') no-repeat;
    background-position-y: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: all .45s ease;
    -moz-transition: all .45s ease;
    -ms-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

.news-item .news-time {
    float: right;
    display: inline-block;
    width: 85px;
    font-size: 14px;
    color: #999;
    line-height: 20px;
}

.news-item .news-info {
    height: 50px;
    font-size: 14px;
    color: #999;
    line-height: 20px;
}

.news-item:hover .news-title .tit {
    padding-left: 10px;
    background: url('../images/index-news-rect.png') no-repeat;
    background-position-y: 3px;
    color: #3D91FF;
}

/* ===========================
   产品中心
=========================== */
.product{
    background: #F7F8F9;
}
.product-center {
    width: 1200px;
    margin: 0 auto 0;
    padding: 50px 0;
}

.product-center-head {
    position: relative;
    text-align: center;
}

.product-center-head .line { margin-bottom: 42px; }

.product-center-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-card {
    width: 300px;
    height: 173px;
    background: #fff;
	border: 1px solid #EEF2FE;
    transition: all 0.3s ease;
	cursor: pointer;
}

.product-card:hover {
    box-shadow: 4px 4px 12px 1px #dae4f38c;
    z-index: 2;
}
.product-card:hover .product-card-title{
    color: #186cf5;
}
.product-card:hover .product-card-btn{
	background: #186cf5;
	color: #fff;
}

.product-card-title {
	color: #2e2e2e;
	font-family: "Microsoft YaHei";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
    margin-top: 40px;
	text-align: center;
}

.product-card-title sup {
    font-size: 12px;
    margin-left: 2px;
}

.product-card-desc {
	color: #4b5b76;
	font-family: "Microsoft YaHei";
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 40px;
	text-align: center;
}

.product-card-btn {
    width: 40px;
    height: 20px;
    line-height: 19px;
    text-align: center;
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 12px;
    color: #6D7A90;
    background: #F1F2F4;
    border-radius: 3px;
	margin: auto;
	margin-top: 15px;
    transition: all 0.3s ease;
}
/* ===========================
   解决方案
=========================== */
.solution {
    margin: 0 auto 0;
    padding: 50px 0;
}

.solution-body { position: relative; }

.swiper-wrapper a {
    padding-right: 16px;
    cursor: auto;
}

.swiper-slide {
    width: 288px;
    height: 242px;
    cursor: pointer;
}

.jjfa-swiper {
    width: 1300px;
    height: 750px;
}

.jjfa-swiper .swiper-slide img { border-radius: 4px; }

.jjfa-swiper .slide-bottom {
    position: absolute;
    bottom: -35px;
    width: 100%;
    height: 24px;
    border-radius: 0 0 4px 4px;
	color: #2e2e2e;
	font-family: "Microsoft YaHei";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
    text-align: center;
    line-height: 30px;
}

.jjfa-swiper .desc {
	color: #4b5b76;
	font-family: "Microsoft YaHei";
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
    position: absolute;
    top: 36%;
    z-index: 3;
    width: 100%;
    padding: 0 27px;
    text-align: center;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity .45s ease-in-out;
}

.jjfa-swiper .slide-titleBack {
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: 3;
    width: 100%;
    padding: 0 27px;
    text-align: center;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: opacity .45s ease-in-out 0.1s !important;
}

.jjfa-swiper .swiper-slide:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 0;
    background: linear-gradient(to top, #0183D9, #33B5E5);
    border-radius: 4px;
    opacity: 0.8;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

.jjfa-swiper .desc h4 {
    margin-bottom: 13px;
    font-size: 18px;
    color: #333;
    line-height: 24px;
}

.jjfa-swiper .desc p {
    font-size: 14px;
    color: #ffffff;
    text-align: left;
    text-indent: 2em;
    line-height: 24px;
}

.jjfa-swiper .slide-titleBack p {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
}

.slide-small {
    position: absolute;
    bottom: -68px;
    width: 288px;
    height: 20px;
    color: #4b5b76;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    text-align: center;
}

.jjfa-swiper .swiper-slide:hover .desc {
    opacity: 1;
    filter: alpha(opacity=100);
}

.jjfa-swiper .swiper-slide:hover .slide-titleBack {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all .45s ease;
    -moz-transition: all .45s ease;
    -ms-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

.jjfa-swiper .swiper-slide:hover:after {
    height: 100%;
    -webkit-transition: all .45s ease;
    -moz-transition: all .45s ease;
    -ms-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

/* ===========================
   Swiper 翻页按鈕
   注：SVG 图标在 IE 中不显示
=========================== */
.swiper-button-next,
.swiper-button-next1 {
    right: 10px;
    width: 30px;
    height: 30px;
    background: url('../images/swiperToRightDefault.svg');
    outline: none;
    -webkit-transition: all .45s ease;
    -moz-transition: all .45s ease;
    -ms-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

.swiper-button-prev,
.swiper-button-prev1 {
    left: 10px;
    width: 30px;
    height: 30px;
    background: url('../images/swiperToLeftDefault.png');
    outline: none;
    -webkit-transition: all .45s ease;
    -moz-transition: all .45s ease;
    -ms-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

.swiper-button-next:hover,
.swiper-button-next1:hover  { background: url('../images/swiperToRightHover.svg'); }

.swiper-button-prev:hover,
.swiper-button-prev1:hover  { background: url('../images/swiperToLeftHover.svg'); }

.swiper-button-next:active,
.swiper-button-next1:active { background: url('../images/swiperToRightActive.svg'); }

.swiper-button-prev:active,
.swiper-button-prev1:active { background: url('../images/swiperToLeftActive.svg'); }

.swiper-button-next  { margin-top: -9px; }
.swiper-button-prev  { margin-top: -9px; }

.swiper-button-next1 {
    position: absolute;
    top: 50%;
    left: auto;
    margin-top: -15px;
    cursor: pointer;
}

.swiper-button-prev1 {
    position: absolute;
    top: 50%;
    right: auto;
    margin-top: -15px;
    cursor: pointer;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-next1.swiper-button-disabled {
    background: url('../images/swiperToRightDisabled.svg');
    opacity: 1;
    cursor: auto;
    pointer-events: none;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-prev1.swiper-button-disabled {
    background: url('../images/swiperToLeftDisabled.svg');
    opacity: 1;
    cursor: auto;
    pointer-events: none;
}

/* ===========================
   搜索框
=========================== */
.banner4-search-box {
    display: flex;
    align-items: center;
    width: 282px;
    height: 44px;
}

.search-icon {
    position: relative;
    display: block;
    width: 46px;
    height: 100%;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 4px 0 0 4px;
}

.search-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.search-txt {
    display: block;
    width: calc(100% - 46px);
    height: 100%;
    border: 2px solid #fff;
    border-radius: 0 4px 4px 0;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: all .45s ease;
}

.search-txt:hover {
    background: #3d91ff;
    border-color: #3d91ff;
}

/* ===========================
   分页器进度条动画
=========================== */
@keyframes progress {
    0%   { width: 0; }
    100% { width: 100%; }
}