@charset "utf-8";
/* CSS Main */

.banner { position: relative; width: 100%; height: 620px; display: flex; align-items: center; justify-content: center;}
.banner .banner-title h2 { color: #ffffff; font-size: 44px; line-height: 1; margin-bottom: 40px; font-weight: bold;}
.banner .banner-title p { color: #ffffff; font-size: 24px; line-height: 1;}

.ele { width: 1200px; margin: 0 auto;}
.ele .ele-title { padding: 80px 0 40px;}
.ele .ele-title h2 { font-size: 30px; color: #333333; line-height: 1;}
.ele .ele-title p { color: #666666; font-size: 15px; line-height: 1; margin-top: 24px;}

.ele-1 .ele-inner { display: flex; align-items: flex-start; justify-content: space-between; text-align: left; padding: 165px 0 0; overflow: hidden;}
.ele-1 .ele-inner .ele-inner-box { width: 591px; height: 300px; padding: 35px; box-sizing: border-box; border-radius: 10px; background: #eceeff; position: relative;}
.ele-1 .ele-inner .ele-inner-box .top { margin-bottom: 20px; font-size: 24px;}
.ele-1 .ele-inner .ele-inner-box .image { display: flex; align-items: center; justify-content: flex-start;}
.ele-1 .ele-inner .ele-inner-box .image>div { width: 160px; height: 118px; margin-right: 12px; border-radius: 10px;}
.ele-1 .ele-inner .ele-inner-box:last-child .image>div { width: 160px; height: 88px;}
.ele-1 .ele-inner .ele-inner-box ul { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 70%; margin-top: 15px; position: relative; z-index: 1;}
.ele-1 .ele-inner .ele-inner-box ul li { flex: 0 0 50px; height: 50px; border-radius: 10px; background: #cfd6ff; margin: 0 14px 8px 0; text-align: center; display: flex; align-items: center; justify-content: center; color: #2f74e7; box-shadow: 2px 11px 10px rgba(58, 69, 216, 0.19); box-sizing: border-box;}
.ele-1 .ele-inner .ele-inner-box .people { position: absolute; bottom: 0; right: 5px; z-index: 0; transition: 0.4s;}
.ele-1 .ele-inner .ele-inner-box:hover .people { transform: scale(1.03);}

.ele-2 .ele-inner { margin: 0 40px; box-sizing: border-box; overflow: hidden;}
.ele-2 .swiper { width: 100%; height: 294px; padding: 0 0 30px 0;}
.ele-2 .swiper-wrapper .swiper-slide { width: 453px; transition: 300ms;}
.ele-2 .swiper-wrapper .swiper-slide-next,.ele-2 .swiper-wrapper .swiper-slide-prev { box-shadow: 2px 11px 10px rgba(136, 136, 136, 0.49);}
.ele-2 .swiper-wrapper .swiper-slide-active { box-shadow: 2px 11px 10px rgba(136, 136, 136, 0.49);}

.ele-3 .tabs ul { display: flex; align-items: center; justify-content: center;}
.ele-3 .tabs ul li { height: 44px; line-height: 44px; border-radius: 6px; margin: 0 7px; background: #e7e9ed; font-size: 18px; padding: 0 30px; cursor: pointer; overflow: hidden; position: relative; z-index: 0;}
.ele-3 .tabs ul li.active { color: #ffffff;}
.ele-3 .tabs ul li::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: -100%; top: 0; border-radius: 6px; z-index: -1; background: #346cdf; transition: 0.3s;}
.ele-3 .tabs ul li.active::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 6px; z-index: -1; background: #346cdf;}
.ele-3 .ele-inner ul { margin: 35px 0 85px; min-height: 492px;}
.ele-3 .ele-inner ul li { opacity: 0; transition: 0.4s; position: absolute; display: flex; align-items: center; justify-content: center;}
.ele-3 .ele-inner ul li.active { opacity: 1;}
.ele-3 .ele-inner ul li img { max-width: 1200px;}