.auto_1440 {
    max-width: 1440px;
    margin: auto;
}

.tit1{ text-align: center; font-size: 48px;font-family: "Source Han Sans CN";color: rgb(51, 51, 51); line-height: 1; padding-top: 6.94%; margin-top: 0; margin-bottom: 1.38%;}
.tit1_blue{color: #1a6fd6;}
.tit2{text-align: center; width: 77.78%; margin: 0 auto; font-size: 16px;font-family: "SourceHanSansCN";color: rgb(51, 51, 51);line-height: 1.875;}

.index_banner{position: relative;}
.index_banner .face{position: absolute; width: 100%; left: 0; top: 0; height: 100%;}
.index_banner .auto_1440{position: relative ;width: 100%; height: 100%; }
.index_banner .logo{position: absolute;width: 9.72%; top: 2.78%; left: 0;}
.index_banner .txt{position: absolute; left: 0; top: 37%;   margin: auto; width: 36.2%; }
/* .index_banner .txt img{display: table-cell; vertical-align: middle;} */
.index_banner .pic{position: absolute; top: 0%; bottom: 0; margin: auto; right: 0;  ;width: 59.72%; }

.index_part2 .advantage ul{ text-align: center; padding-top: 4.17%; cursor: pointer;}
.index_part2 .advantage li{display: inline-block; margin: 0 3.47%;}
.index_part2 .advantage .icon{width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgb(26, 111, 214);background-color:#fafafa;position: relative;}
.index_part2 .advantage .icon img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 80%; max-height: 80%;}
.index_part2 .advantage .des{font-size: 16px;font-family: "SourceHanSansCN"; color: rgb(26, 111, 214);font-weight: bold;text-align: center; display: block; margin-top: 15px;}
.index_part2 .con{position: relative;}
.index_part2 .pic_box{padding-top: 150px; width: 62.5%; margin: 0 auto;}
.index_part2 .pic_box img{display: block; margin: 0 auto; width: 100%;}
.index_part2 .item{ position: absolute; min-width: 230px;}
.index_part2 .d_tit1{font-size: 20px;font-family: "SourceHanSansCN";color: rgb(51, 51, 51);font-weight: bold;line-height: 1.8;text-align: left; display: block;}
.index_part2 .d_tit2{font-size: 18px;font-family: "SourceHanSansCN";color: rgb(51, 51, 51); line-height: 1.8; display: block;}
.index_part2 .spot{ width: 20px; height: 20px; border-radius: 50%; position: absolute; }
.index_part2 .spot i{width: 20%; height: 20%; border-radius: 50%; background-color: rgb(58, 100, 203);; position: absolute;left: 40%; top: 40%;overflow: hidden;}
.index_part2 .spot::before,.index_part2 .spot::after{content: ''; position: absolute; transform-origin: 50% 50%; overflow: hidden ; border-radius: 50%;}
  
.index_part2 .spot::before{width: 100%; height: 100%; left: 0; top: 0; background-color:  rgba(58, 100, 203,.3); animation: spot1 1s infinite linear;}
.index_part2 .spot::after{width: 60%; height: 60%; left: 20%; top: 20%;background-color:  rgba(58, 100, 203,.5); animation: spot2 1s infinite linear;}
.index_part2 .d_bot .spot{bottom: -50%; left: 30%; }
.index_part2 .d_left .spot{top: 8%; left: -30%; }
.index_part2 .d_right .d_tit1{text-align: right;}
.index_part2 .d_right .d_tit2{text-align: right;}
.index_part2 .d_right .spot{top: 8%; right: -30%; }

.index_part2 .t_video{top: 12.2%; left: 44%;}
.index_part2 .t_serve{top: 32.2%; left: 74.5%;}
.index_part2 .t_luck{top: 54.2%; left: 82.7%;}
.index_part2 .t_shop{top: 78.2%; left: 85.2%;}
.index_part2 .t_community{top: 32.2%; right: 74.6%;}
.index_part2 .t_intell{top: 54.2%; right: 81.6%;}
.index_part2 .t_create{top: 78.2%; right: 84.4%;}

@keyframes spot1{
    0%{width: 50%; height: 50%; left: 25%; top: 25%;};
    100%{width: 100%; height: 100%; left: 0; top: 0;}
}
@keyframes spot2{
    0%{width: 0%; height: 0%; left: 50%; top: 50%;};
    100%{ width: 60%; height: 60%; left: 20%; top: 20%;}
}

.index_part3 .auto_1440{position: relative;}
.index_part3 .tit1{color: #fff; position: absolute; top: 0; left: 0;width: 100%; margin: 0;}
.index_part3 .tit1_yellow{color: #ffcc00;}
.index_part3 .con{position: relative;font-family: "Source Han Sans CN"; text-align: center;}
.index_part3 .con .item{background-color: #fff; display: inline-block; position: absolute;}

.f18{font-size: 18px;}
.f22{font-size: 22px;}
.f24{font-size: 24px;}
.f30{font-size: 30px;}

.c153{color:rgb(153, 153, 153);}
.cfff{color: #fff;}
.c000{color: #000;}

.l40{line-height: 40px; border-radius: 18px; background-color: #fff; font-size: 14px; color: rgb(153, 153, 153); padding: 0 18px;}
.l45{line-height: 45px; border-radius: 20px; background-color: #fff; font-size: 16px;color: rgb(153, 153, 153)}
.l60{line-height: 60px; border-radius: 25px;}
.l65{line-height: 65px; border-radius: 28px; background-color: #577cef !important; color: #fff; font-size: 30px;}

.bor-b-r{ border-bottom-right-radius: 0;}
.bor-t-r{border-top-right-radius: 0;}
.bor-t-l{border-top-left-radius: 0;}
.bor-b-l{border-bottom-left-radius: 0;}

.p30{padding: 0 30px;}
.p36{padding: 0 36px;}
.p40{padding: 0 40px;}
.p46{padding: 0 46px;}

.index_part3 .i1{top: 29.72%; left: 45.21%;}
.index_part3 .i2{top: 42.45%; right: 49.31%;}
.index_part3 .i3{top: 47.64%; right: 68.75%;}
.index_part3 .i4{top: 54.72%; left: 56.46%;}
.index_part3 .i5{top:70.28%; left: 47.22%;}
.index_part3 .i6{top: 35.57%; right: 57.5%;}
.index_part3 .i7{top:47.17%; left: 69.44%;}
.index_part3 .i8{top: 66.51%; right: 59.31%;}
.index_part3 .i9{top:62.75%; left: 60.76%;}
.index_part3 .i10{top:36.42%; left: 57.01%;}
.index_part3 .i11{top: 55.66%; right: 61.25%;}
.index_part3 .i12{top: 77.36%; left: 47.5%;}


.index_part4 .reason{padding-top: 5.21%;}
.index_part4 .reason li{float: left ; width: 47.22%; margin-right: 5.56%; border-radius: 10px; background-color: #fff; overflow: hidden;}
.index_part4 .reason li:last-of-type{margin-right: 0;}
.index_part4 li:last-of-type .des_list{padding-left: 14.71%; padding-top: 8.09%; padding-bottom: 7.35%;}
.index_part4 .reason li:first-of-type .des_item img{width: 60px; height: 60px; display: block; margin: 0 auto;}
.index_part4 .reason li:first-of-type .des_list{text-align: center; padding-top: 8.09%; padding-bottom: 7.35%;}

.index_part4 .reason .des_item h3{ font-size: 20px;font-family: "Adobe Heiti Std";color: rgb(51, 51, 51); line-height: 1; margin-top: 15px; margin-bottom: 20px;}
.index_part4 .reason .des_item p{font-size: 16px;font-family: "Adobe Heiti Std";color: rgb(51, 51, 51); margin-top: 0; margin-bottom: 20px;} 

.index_part4 .reason .pic{position: relative;transition: all .5s; padding-top: 44.2%;}
.index_part4 .reason .pic>img{position: absolute; top: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%;}
.index_part4 .reason .mask{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:  rgba(26, 111, 214,.7); opacity: 0;  transition: all .5s;}
.index_part4 .reason .mask img{position: absolute; top: 0;bottom: 0; left: 0; right: 0; margin: auto; max-width: 90%; max-height: 90%;} 
.index_part4 .reason .pic:hover .mask{display: block; opacity: 1;}

.index_part4 .reason li:last-of-type .des_item{width: 50%; float: left;}

.index_part4 .reason3 .top{padding-top: 7.86%; text-align: center; padding-bottom: 6.46%;}
.index_part4 .reason3 li{text-align: center; width: 19.79%; margin-right: 5.21%;    }
.index_part4 .reason3-item{position: relative; width: 100%; background-color: #5e94ff; border-radius: 10px;min-height: 200px;padding:  0 7.04%; box-shadow: 15px -15px 0 0 rgba(255, 255, 255,.1);}
.index_part4 .reason3 .icon{width: 80px; height: 80px; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; transform: translate(-50%,-50%); }
.index_part4 .reason3 .icon img{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 80%; max-height: 80%;}

.tit3{font-size: 22px;font-family: "SourceHanSansCN"; color: rgb(255, 255, 255);text-align: center; display: inline-block;padding-top: 21.05%; margin-top: 0; margin-bottom: 10px; position: relative;} 
.sup{font-size: 12px;font-family: "Source Han Sans CN"; line-height: 20px;color: rgb(34, 85, 168);  background-color: #fdd51a; border-radius: 8px; border-bottom-left-radius: 0; padding: 0 7px;position: absolute; right: -80%; top: 50%; width: auto;}
.des3{font-size: 16px;font-family: "Adobe Heiti Std";color: rgb(255, 255, 255);line-height: 1.875;text-align: left; margin: 0;}

.index_part4 .spot{ width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 0; left: 48%; transform: translateY(-50%);}
.index_part4 .spot i{width: 20%; height: 20%; border-radius: 50%; background-color: rgb(255, 255, 255);; position: absolute;left: 40%; top: 40%;overflow: hidden;}
.index_part4 .spot::before,.index_part4 .spot::after{content: ''; position: absolute; transform-origin: 50% 50%; overflow: hidden ; border-radius: 50%;}
  
.index_part4 .spot::before{width: 100%; height: 100%; left: 0; top: 0; background-color:  rgba(255, 255, 255,.3); animation: spot3 1s infinite linear;}
.index_part4 .spot::after{width: 60%; height: 60%; left: 20%; top: 20%;background-color:  rgba(255, 255, 255,.5); animation: spot4 1s infinite linear;}
@keyframes spot3{
    0%{width: 50%; height: 50%; left: 25%; top: 25%;};
    100%{width: 100%; height: 100%; left: 0; top: 0;}
}
@keyframes spot4{
    0%{width: 0%; height: 0%; left: 50%; top: 50%;};
    100%{ width: 60%; height: 60%; left: 20%; top: 20%;}
}

.index_part4 .auto_1440{padding-bottom: 6.94%;}
.index_part4 .reason3 .ul-fl{ padding-bottom: 7.64%; border-top: 1px solid  rgba(255, 255, 255,.5);border-right: 1px solid  rgba(255, 255, 255,.5);border-bottom: 1px solid  rgba(255, 255, 255,.5); border-top-right-radius: 95px;border-bottom-right-radius: 95px; }
.index_part4 .reason3 .ul-fl li{float: left;padding-top: 4.86%; position: relative;}
.index_part4 .reason3 .ul-fl li:last-of-type .sup{right: -105%;}

.index_part4 .reason3 .ul li::after{content: ''; width: 0; height: 0;border: 7px solid rgba(255, 255, 255,.5); border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; right: -10%;  transform: translateY(-50%);}
.index_part4 .reason3 .ul-fl li:last-of-type::after{top:75%; right: -29%; border-left-color: transparent; border-top-color: rgba(255, 255, 255,.5);}


.index_part4 .reason3 .ul-fr li{float: right;padding-top: 4.86%; position: relative;}
.index_part4 .reason3 .ul-fr li::after{border-left-color: transparent; border-right-color: rgba(255, 255, 255,.5); right: auto; left: -18%;}
.index_part4 .reason3 .ul-fr li:last-of-type::after{border-right-color:transparent ;}
.index_part4 .reason3 .ul-fr li:nth-of-type(3) .des3,.index_part4 .reason3 .ul-fr li:nth-of-type(4) .des3{text-align: center;}
.index_part4 .reason3 .ul-fr .sup{right: -190%;}