.btn { margin: 30px auto; display: block; width: 287px; height: 50px; background: #536BF5; box-shadow: 0 3px 13px 0 rgba(0, 82, 255, .5); border-radius: 25px; color: #fff; font-size: 18px; cursor: pointer; } .white-btn { background: #fff; color: #000; } .swiper { height: 700px; color: #fff; } .swiper .slide-item { background-repeat: no-repeat; background-size: cover; background-position: center; height: 700px; margin: 0 auto; overflow: hidden; text-align: center; } .swiper .slide-item-act { background-image: url('../img/index/banner-yuandan.png'); } .btn-act { width: 334px; margin-top: 520px; } .swiper .slide-item-1 { background-image: url('../img/index/banner-1.png'); } .swiper .slide-item-2 { background-image: url('../img/index/banner-2.png'); } .swiper .slide-item-3 { background-image: url('../img/index/banner-3.png'); } .swiper .slide-item-4 { background-image: url('../img/index/banner-4.png'); } .swiper .slide-item-5 { background-image: url('../img/index/banner-5.png'); } .swiper .slide-item .banner-wrap { width: 1200px; margin: 0 auto; text-align: left; } .swiper .slide-item p.title { font-size: 64px; font-weight: bolder; margin: 220px 0 20px; } .swiper .slide-item p { font-size: 16px; margin-bottom: 20px; } .swiper .slide-item .feature { margin-bottom: 48px; } .swiper .slide-item .feature .item { line-height: 34px; height: 34px; position: relative; padding-left: 40px; margin-right: 28px; } .swiper .slide-item .feature .item svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .swiper .slide-item .btn-orange { float: left; display: block; color: #fff; background: linear-gradient(93.76deg, #31FCFF -10.35%, #0AA5FF 85.34%); margin: 0px auto 70px; cursor: pointer; width: 280px; height: 50px; border-radius: 8px; font-family: Source Han Sans SC; font-weight: 700; font-size: 20px; line-height: 24px; text-shadow: 0px 2px 4px rgba(16, 61, 139, 0.49); } .swiper .swiper-pagination { overflow: hidden; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .swiper .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #ccc; margin: 0 4px; border-radius: 4px; } .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; } .icons { width: 1290px; max-width: 100vw; min-width: 1200px; margin: -60px auto 0px; z-index: 1; position: relative; } .icons ul { display: flex; justify-content: center; margin-bottom: 30px; } .icons ul.icon-list { margin: 0 auto 30px; box-shadow: 0px 4px 20px 0px rgba(142, 142, 142, 0.12); background: rgba(255, 255, 255, 1); width: 1290px; max-width: 100vw; min-width: 1200px; height: 140px; border-radius: 12px; align-items: center; } .icons ul.icon-list li { cursor: pointer; position: relative; padding: 11px 48px 0 131px; height: 70px; /* width: 305px; */ } .icons ul.icon-list a { border-right: 1px solid rgba(227, 234, 245, 1); } .icons ul.icon-list a:last-child { border-right: unset; } .icons ul.icon-list li img { width: 60px; /* box-shadow: 0 0 5px 5px rgba(234, 234, 234, .6); */ position: absolute; left: 47px; top: 5px; } .icons ul.icon-list li .p1 { color: rgba(21, 21, 21, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 18px; line-height: 22px; } .icons ul.icon-list li .p2 { color: rgba(118, 144, 181, 1); font-family: Source Han Sans SC; font-weight: 400; font-size: 14px; line-height: 14px; } .icons ul.icon-text { padding: 30px 0; font-size: 15px; box-shadow: 0 0 5px 5px rgba(234, 234, 234, .6); } .icons ul.icon-text li { display: none; width: 1200px; text-align: center; } .icons p { text-align: center; } .sign { width: 1200px; margin: 120px auto 80px; background-color: #ffffff; } .sign .title { display: block; width: 449px; height: 60px; margin: 0 auto 70px; } .sign ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; } .sign ul li { width: 280px; height: 260px; border-radius: 12px; background-color: rgba(247, 249, 251, 1); /* background-color: rgb(203 229 255); */ box-sizing: border-box; padding-left: 32px; padding-top: 30px; } .sign ul li img { display: block; width: 96px; height: 96px; margin-left: -16px; } .sign ul li .sign-info { padding-top: 12px; } .sign ul li .sign-info>div { margin-top: 14px; color: rgba(118, 144, 181, 1); font-family: Source Han Sans SC; font-weight: 500; font-size: 14px; line-height: 22px; } .sign ul li p { font-size: 24px; font-weight: bolder; color: rgba(21, 21, 21, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 20px; line-height: 22px; } .sign-buttom { background: url(../img/index/sign-buttom.png) no-repeat center; background-size: cover; width: 1200px; height: 160px; padding: 46px 0 0 122px; position: relative; } .sign-buttom .p1 { text-shadow: 0px 4px 4px rgba(0, 81, 119, 0.16); color: rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 22px; line-height: 34px; } .sign-buttom a { position: absolute; width: 144px; height: 40px; border-radius: 4px; border-width: 1px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 500; font-size: 16px; line-height: 38px; text-align: center; vertical-align: middle; color: rgba(255, 255, 255, 1); top: 50%; transform: translateY(-50%); right: 122px; } .step-area { background-color: rgb(247, 249, 251); padding: 70px 0 110px; } .step-area .step { width: 1200px; margin: 0 auto; } .step-area .contain { width: 1109px; height: 272px; background: url(../img/index/step.png) no-repeat center; background-size: cover; margin: 0 auto; } .step-area .step .title { display: block; width: 200px; height: 64px; margin: 0 auto 90px; } .web-area { overflow: hidden; background: url(../img/index/web-bg.png) no-repeat center; background-size: cover; height: 742px; } .web { width: 1200px; margin: 0 auto; } .web .title { display: block; width: 331px; height: 63px; margin: 70px auto 50px; } .web ul { color: #fff; margin-left: 58%; margin-top: 110px; } .web ul li p { margin-bottom: 12px; position: relative; color: rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 24px; line-height: 34px; } .web ul li p::after { position: absolute; content: ''; background: rgba(255, 255, 255, 1); width: 6px; height: 19px; top: 9px; left: -18px; } .web ul li>div { margin-bottom: 40px; color: rgba(255, 255, 255, 0.7); font-family: Source Han Sans SC; font-weight: 400; font-size: 16px; line-height: 20px; } .platform-advantage { background-color: rgb(254, 254, 254); padding: 120px 0 140px; } .platform-advantage .title { display: block; width: 314px; height: 64px; margin: 0 auto 90px; } .platform-advantage ul { display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; } .platform-advantage ul li { text-align: center; } .platform-advantage ul li img { width: 70px; height: 70px; margin-bottom: 10px; } .platform-advantage ul li p { color: rgba(21, 21, 21, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 18px; line-height: 22px; margin-bottom: 10px; } .platform-advantage ul li>div { color: rgba(118, 144, 181, 1); font-family: Source Han Sans SC; font-weight: 500; font-size: 15px; line-height: 20px; } .dispatch { margin-bottom: 100px; } .dispatch .title { display: block; width: 315px; height: 64px; margin: 100px auto 50px; } .dispatch ul { display: flex; justify-content: space-around; width: 1350px; margin: 0 auto; } .dispatch ul li { width: 415px; height: 497px; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center; } .dispatch ul li.dispatch-1 { background-image: url(../img/index/dispatch-1.png); } .dispatch ul li.dispatch-2 { background-image: url(../img/index/dispatch-2.png); } .dispatch ul li.dispatch-3 { background-image: url(../img/index/dispatch-3.png); } .dispatch ul li p { font-size: 24px; color: #000; font-weight: bold; margin: 60px 0 10px; } .dispatch ul li>div { color: #999; } .shelf-area { overflow: hidden; background: url(../img/index/shelf-bg.png) no-repeat center; background-size: cover; height: 750px; } .shelf { width: 1200px; margin: 0 auto; } .shelf .title { display: block; width: 726px; height: 92px; margin: 90px auto 30px; } .shelf .shelf-note { font-size: 24px; font-weight: bolder; color: #000; margin-top: 80px; line-height: 3; } .gain { overflow: hidden; height: 300px; background: linear-gradient(180deg, #4687FF 0%, #2267E8 100%); color: #fff; text-align: center; } .gain>p { margin: 50px 0 60px; color: rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 36px; line-height: 40px; } .gain ul { display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; } .gain ul li h3 { color: rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 36px; line-height: 52px; margin-bottom: 8px; } .gain ul li p { color: rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 400; font-size: 16px; line-height: 20px; } .contact-us { background-color: #fff; background: url(../img/index/contact-bg.png) no-repeat center; background-size: cover; padding: 78px 0 78px; } .contact-us .title { color: rgba(255, 255, 255, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 30px; line-height: 40px; text-align: center; margin-bottom: 56px; } .contact-us .contact-info .item { margin: 0 auto 18px; display: flex; width: 691px; height: 73px; border-radius: 3px; background-color: rgba(255, 255, 255, 1); padding-left: 20px; align-items: center; line-height: 29px; color: rgba(21, 21, 21, 1); } .contact-us .contact-info .item img { width: 50px; height: 50px; margin-right: 12px; } .contact-us .contact-info .item p { color: rgba(21, 21, 21, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 20px; width: 402px; } .contact-us .contact-info .item a { display: block; width: 200px; height: 62px; line-height: 60px; color: #ffffff; text-align: center; border-radius: 3px; background: rgba(58, 195, 76, 1); font-family: Source Han Sans SC; font-weight: 700; font-size: 18px; } .cooperate { padding-bottom: 100px; } .cooperate .title { display: block; width: 632px; height: 92px; margin: 100px auto 30px; } .cooperate ul { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .cooperate ul li { margin: 50px 20px; } .cooperate ul li img { width: 197px; height: 197px; }