.section-box .section:nth-child(even) { background-color: #f6f8fb; } .section-box .section:nth-child(odd) { background-color: #fff; } .sec-foot { margin-top: 40px; } .platform-list .item { width: 416px; height: 416px; background-position: bottom center; background-repeat: no-repeat; } .platform-list .item .item-wrap { width: 300px; color: #ffffff; margin: 0 auto; padding-top: 60px; } .platform-list .item .item-wrap .item-head { padding-bottom: 14px; } .platform-list .item .item-wrap .item-head .head-icon { width: 55px; height: 55px; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-size: contain; } .platform-list .item .item-wrap .item-head .head-info .head-name { font-size: 32px; line-height: 36px; } .platform-list .item .item-wrap .item-head .head-info .head-ename { opacity: .5; font-size: 12px; text-transform: uppercase; } .platform-list .item .item-wrap .item-bd { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 12px; } .platform-list .item .item-wrap .item-bd p { font-size: 18px; line-height: 32px; } .platform-list .item:nth-child(1) { background-color: #448cdd; } .platform-list .item:nth-child(2) { background-color: #13b5b1; } .platform-list .item:nth-child(3) { background-color: #ff6600; } .platform-list .item:nth-child(1) { background-image: url("../Image/dianpu/platform-1-bg.png"); } .platform-list .item:nth-child(1) .item-wrap .item-head .head-icon { background-image: url("../Image/dianpu/platform-1-icon.png"); } .platform-list .item:nth-child(2) { background-image: url("../Image/dianpu/platform-2-bg.png"); } .platform-list .item:nth-child(2) .item-wrap .item-head .head-icon { background-image: url("../Image/dianpu/platform-2-icon.png"); } .platform-list .item:nth-child(3) { background-image: url("../Image/dianpu/platform-3-bg.png"); } .platform-list .item:nth-child(3) .item-wrap .item-head .head-icon { background-image: url("../Image/dianpu/platform-3-icon.png"); } .dianpu-tips { color: #999999; font-size: 16px; } .dp-process-box { margin-top: 70px; margin-bottom: 60px; } .dp-process-box .item .item-icon { width: 100px; height: 100px; border-radius: 50%; background-color: #f6f6f6; position: relative; text-align: center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .dp-process-box .item .item-icon img { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } .dp-process-box .item .item-name { color: #333333; text-align: center; line-height: 42px; } .dp-process-box .item:hover .item-icon { background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); box-shadow: 0px 10px 20px 0px rgba(221, 56, 51, 0.26); } .dp-process-box .item:hover .item-icon img { animation: swing 1s 1 linear; filter: grayscale(100%) brightness(100); } .dp-process-box .step-icon { height: 100px; line-height: 100px; width: 20px; text-align: center; font-size: 22px; } .dianpuSwiper { width: 100%; height: 100%; padding: 30px; } .dianpuSwiper .swiper-slide { width: 415px; background-color: #fff; transition: 300ms; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .dianpuSwiper .swiper-slide .item-img { display: block; height: 500px; object-fit: cover; width: 100%; } .dianpuSwiper .swiper-slide .item-caption { height: 110px; padding: 20px; } .dianpuSwiper .swiper-slide .item-caption .item-name { color: #333333; font-size: 18px; line-height: 2; margin-bottom: 6px; position: relative; } .dianpuSwiper .swiper-slide .item-caption .item-name .item-more { position: absolute; margin: auto; top: 0; bottom: 0; right: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } .dianpuSwiper .swiper-slide-active, .dianpuSwiper .swiper-slide-duplicate-active { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.23); } .dianpuSwiper .swiper-slide-active .item-caption .item-name, .dianpuSwiper .swiper-slide-duplicate-active .item-caption .item-name { color: #ea4540; } .dianpuSwiper .swiper-slide-active .item-caption .item-name .item-more, .dianpuSwiper .swiper-slide-duplicate-active .item-caption .item-name .item-more { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .question-box .item { padding: 22px 35px; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); margin-bottom: 34px; width: 630px; height: 175px; } .question-box .item .item-title { font-size: 18px; line-height: 32px; background: url("../Image/dianpu/icon-q.png") 4px 6px no-repeat; padding-left: 30px; margin-bottom: 10px; } .question-box .item .item-desc { font-size: 14px; color: #999999; line-height: 22px; background: url("../Image/dianpu/icon-a.png") 4px 6px no-repeat; padding-left: 30px; } .question-box .item .item-more { margin-top: 24px; color: #dd3833; font-size: 12px; display: inline-block; margin-left: 32px; }