﻿
/*
* title:fuke;
* Author:luochou
* Date:2024.9.9
*/
body{background-color: #f9f9f9;}

.container{min-width: 320px;width: 100%;max-width: 750px;margin: 0 auto; background-color: #fff;}
.container img{max-width: 100%; display: block;}
.container .tit{position: relative; height: .72rem;color: #000; font-size: .5rem; line-height: .72rem;text-align: center;}
.container .tit span{color: #4282d9;}
.item{padding: 0 .3rem;}
.bgColor{background-color: #e3f0fa;}
.bannerSwiper{position: relative;}
.bannerSwiper .swiper-slide,.bannerSwiper .swiper-slide img{width:100%;}
.bannerSwiper .pagination{width:100%;text-align:center;line-height:0;position:absolute;left:0;bottom:.1rem;z-index:1;}
.bannerSwiper .pagination span{width:.16rem;height:.16rem;font-size:0;background-color:#cac9cb;border-radius:50%;opacity:1;margin:0 .12rem;display:inline-block;vertical-align:top;}
.bannerSwiper .pagination .swiper-pagination-bullet-active{background-color:#f7bf24;}
/*f1Box*/
.f1Box{padding: .42rem 0 .6rem;}
.f1Box ul{padding:.46rem .4rem .6rem; display: flex; display: -webkit-flex;justify-content: space-between;flex-wrap: wrap; gap:.62rem 0;}
.f1Box li{position: relative; width: 2.52rem;}
.f1Box li span{position: absolute; top:0; left: 50%; margin-left: -1.25rem; width: 2.5rem; height: .64rem; background-color: #4282d9; border-radius: .32rem; color: #fff; font-size: .32rem;display: flex; display: -webkit-flex;justify-content: center;align-items: center;}
.f1Box .btn{position: relative; width:4.39rem; margin:0 auto; display: block; line-height:3em;color: #fff; font-size:0;}
.f1Box .btn i{position: absolute; top:.14rem; right:-.22rem; width: .99rem; height: 1rem; background: url(../image/icon_hand.png) no-repeat; background-size: 100% 100%;animation: slideDown 2s ease-in-out infinite;}
/*f2Box*/
.f2Bg{height: 9.16rem; background:#deebf9 url(../image/f2Bg.jpg) no-repeat; background-size: 100% 100%;}
.f2Box{padding-top: .72rem;}
.f2List{position: relative; height: 5.64rem;}
.f2List span{position: absolute; width: 2.36rem; height:.85rem; display: block; background: url(../image/icon_bubble.png) no-repeat; background-size: 100% 100%; color: #333; font-size: .32rem; line-height: .68rem; text-align: center;animation: pulse 1s .2s ease infinite;-webkit-animation: pulse 1s .2s ease infinite;}
.f2List .s1{left: .7rem; top:.68rem;animation-duration:2s;}
.f2List .s2{right: .7rem; top:1.36rem;animation-duration:1.5s;}
.f2List .s3{left: .7rem; top:2.9rem;animation-duration:2s;}
.f2List .s4{right: .64rem; top:3.6rem;}
.f2List .s5{left:1.2rem; top:4.95rem;animation-duration:3s;}
/*f3Box*/
.f3Box{padding:.64rem .2rem .42rem;}
.f3Con{padding-top: .3rem;}
.f3Con p{color: #333; font-size: .28rem; line-height: 1.6; text-align: justify;}
.f3Con img{width: 5.3rem; margin:.2rem auto 0;}
/*f4Box*/
.f4Box{padding:.68rem .4rem;}
.f4Con{padding: .46rem 0 .52rem; display: flex; display: -webkit-flex;flex-wrap: wrap;justify-content: space-between;gap:.4rem 0;}
.f4Con dl{width: 2.86rem;}
.f4Con dt{position: relative;border-radius: .1rem; overflow: hidden;}
.f4Con dt span{position: absolute; left: 0; bottom: 0; width: 100%; height: .55rem; background-color: #4282d9; color: #fff; font-size: .32rem;display: flex; display: -webkit-flex;justify-content: center;align-items: center;}
.f4Con dd{padding-top: .08rem; color: #333; font-size: .24rem; line-height: 1.6;}
.f4Box .btn{position: relative; width:4.39rem; margin:0 auto; display: block; line-height:3em;color:#e3f0fa; font-size:0;}
.f4Box .btn i{position: absolute; top:.14rem; right:-.22rem; width: .99rem; height: 1rem; background: url(../image/icon_hand.png) no-repeat; background-size: 100% 100%;animation: slideDown 2s ease-in-out infinite;}
/*f5Box*/
.f5Box{padding:.68rem 0;}
.f5Con{padding: .26rem 0 .78rem;}
.f5Con p{padding: 0 .2rem; color: #333; font-size: .28rem; line-height: 1.6; text-align: justify;}
.f5Con img{width: 6.5rem; margin:.58rem auto 0;}
.f5Box .btn{position: relative; width:4.39rem; margin:0 auto; display: block;line-height:3em;color:#fff; font-size:0;}
.f5Box .btn i{position: absolute; top:.14rem; right:-.22rem; width: .99rem; height: 1rem; background: url(../image/icon_hand.png) no-repeat; background-size: 100% 100%;animation: slideDown 2s ease-in-out infinite;}
/*f6Box*/
.f6Box{padding:.6rem 0 .92rem;}
.f6Tab{height: .64rem; padding: .62rem 0 .42rem;display: flex; display: -webkit-flex;justify-content: space-between;}
.f6Tab span{width:1.64rem; height: .64rem; background-color: #b3b3b3; border-radius: .08rem; color: #fff; font-size:.28rem;display: flex; display: -webkit-flex;justify-content: center;align-items: center;}
.f6Tab span.active{background-color: #4282d9; cursor: pointer;}
.f6Swiper{position: relative; padding-bottom: .72rem;}
.f6Swiper dl{display: flex; display: -webkit-flex;justify-content: space-between;}
.f6Swiper dt{position: relative; width: 3.08rem; }
.f6Swiper dt i{position: absolute; width: .19rem; height: .16rem;}
.f6Swiper dt .tl{left: 0; top:0; border-top: .04rem solid #ffc32c; border-left: .04rem solid #ffc32c;}
.f6Swiper dt .tr{right: 0; top:0;border-top: .04rem solid #ffc32c; border-right: .04rem solid #ffc32c;}
.f6Swiper dt .bl{left: 0; bottom: 0;border-bottom: .04rem solid #ffc32c; border-left: .04rem solid #ffc32c;}
.f6Swiper dt .br{right: 0; bottom: 0;border-bottom: .04rem solid #ffc32c; border-right: .04rem solid #ffc32c;}
.f6Swiper dd{flex:1; padding-left: .2rem;}
.f6Swiper dd h3{color: #4282d9; font-size: .32rem; text-align: center; line-height: .52rem;}
.f6Swiper dd p{color: #333; font-size: .24rem; line-height: 1.6; text-align: justify;}
.f6Box .btn{position: relative; width:4.87rem; margin:0 auto; display: block;line-height:3em;color:#e3f0fa; font-size:0;}
.f6Box .btn i{position: absolute; top:.14rem; right:-.22rem; width: .99rem; height: 1rem; background: url(../image/icon_hand.png) no-repeat; background-size: 100% 100%;animation: slideDown 2s ease-in-out infinite;}
/*f7Box*/
.f7Box{padding:.56rem 0 .96rem;}
.f7Box ul{padding-top: 1.1rem; display: flex; display: -webkit-flex;flex-wrap: wrap;justify-content: space-between; gap:1.18rem 0;}
.f7Box li{position: relative; width: 1.5rem;}
.f7Box li img{position: absolute; top:-.6rem; left: 50%; margin-left: -.62rem; width: 1.23rem; height: 1.08rem;}
.f7Box li h3{width: 100%; height: 1.3rem; padding-top: .35rem; background-color: #4282d9; border-radius: .08rem; color: #fff; font-size: .28rem; font-weight: normal; line-height: .36rem; text-align: center; display: flex; display: -webkit-flex;justify-content: center;align-items: center;box-sizing: border-box;}
/*f8Box*/
.f8Box{padding:.5rem .19rem;}
.f8Swiper {position: relative; padding-top: .32rem;}
.f8Swiper .swiper-slide{position: relative; width: 100%;}
.f8Swiper .swiper-slide .img{width:100%;border-radius: .08rem;}
.f8Swiper .swiper-slide .btn{position: absolute; bottom:.38rem; right:1.34rem; width: 1.65rem;line-height:3em;color:#407ed3; font-size:0;}
.f8Swiper .swiper-slide .btn i{position: absolute; top:.07rem; right:-.24rem; width: .75rem; height: .75rem; background: url(../image/icon_hand.png) no-repeat; background-size: 100% 100%;animation: slideDown2 2s ease-in-out infinite;}
.f8Swiper .pagination{width:100%;text-align:center;line-height:0;position:absolute;left:0;bottom:.1rem;z-index:1;}
.f8Swiper .pagination span{width:.16rem;height:.16rem;font-size:0;background-color:#cac9cb;border-radius:50%;opacity:1;margin:0 .12rem;display:inline-block;vertical-align:top;}
.f8Swiper .pagination .swiper-pagination-bullet-active{background-color:#f7bf24;}
.f8From{margin-top: .45rem; padding: .32rem .32rem .1rem; background-color: #4282d9; border-radius: .08rem;}
.f8From h3{color: #fff; font-size: .37rem; font-weight: normal; text-align: center; line-height: .62rem;}
.f8From h3 i{padding: 0 .1rem; font-weight: bold;}
.f8From ul{padding-top: .14rem;}
.f8From li{margin-bottom: .28rem;}
.f8From li .t{width: 100%; height: .62rem; border: none; background-color: #e3f0fa; border-radius: .1rem; color: #4c4c4c; font-size: .28rem; text-align: center;display: flex; display: -webkit-flex;justify-content: center;align-items: center;}
.f8From li select{width: 100%; height: .62rem; border: none; background-color: #e3f0fa; border-radius: .1rem; color: #4c4c4c; font-size: .28rem;text-align: center;}
.f8From li .submit{position: relative; width: 1.87rem; margin:.14rem auto 0; display: block;border: none;background: transparent;}
.f8From li .submit i{position: absolute; top:.12rem; right:0; width: .52rem; height: .54rem; background: url(../image/icon_hand.png) no-repeat; background-size: 100% 100%;animation: slideDown2 2s ease-in-out infinite;}

@keyframes slideDown {
    0% {
        top: 0;
    }
    50% {
        top: .34rem;
    }
    100% {
        top: 0;
    }
}
@keyframes slideDown2 {
    0% {
        top: 0;
    }
    50% {
        top: .16rem;
    }
    100% {
        top: 0;
    }
}


@keyframes pulse{
	0%{transform:scale(0.9)}
	50%{transform:scale(1)}
	100%{transform:scale(0.9)}
}
@-webkit-keyframes pulse{
	0%{-webkit-transform:scale(0.9)}
	50%{-webkit-transform:scale(1)}
	100%{-webkit-transform:scale(0.9)}
}