.main {
  background-color: #fff;
}

.banner img, .banner video {
  display: block;
  width: 100%;
}

.banner .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: #4385FF;
}

.banner .swiper-pagination-bullet-active {
  width: 15px;
  height: 5px;
  border-radius: 8px;
}

.banner .swiper-slide {
  position: relative;
}
.banner .content-main{
  position: absolute;
  top: -3%;
  left:0;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 999;
}
.banner .content {
  width: 100%;
  color: #262626;
  padding: 0 0.32rem;
  text-align: center;
  display: table;
}

.banner .content .title {
  font-weight: bold;
  font-size: .22rem;
  line-height: .33rem;
  margin-bottom: .10rem;
}

.banner .content .info {
  font-size: .14rem;
  line-height: .21rem;
}
.banner .content .btn-info{
  display: inline-block;
  margin: .32rem auto 0;
  border-radius: 4px;
  background: #4385FF;
  color: #ffffff;
  padding: .04rem .195rem .05rem;
  font-size: .14rem;
  line-height: .21rem;
}
.main-floor {
  padding: .40rem 0;
}

.main-floor .title {
  text-align: center;
  margin-bottom: .24rem;
  padding: 0 .15rem;
}

.main-floor .title .h2 {
  font-size: .18rem;
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 2.52rem;
  margin: 0 auto 0.06rem;
}

.main-floor .title p {
  font-size: .11rem;
  line-height: .16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-floor.f1 {
  background-color: #F4F6FB;
}
.main-product-all{
  padding: .40rem 0 .24rem 0;
}
.main-floor.f1 .h2 {
  color: #262626;
}

.main-floor.f1 p {
  color: #474747;
  opacity: .66;
}

.main-floor.f1 .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 .28rem;
}

.main-floor.f1 .content .content-item {
  width: 1.52rem;
  padding: 0 .16rem;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: .16rem;
}

.main-floor.f1 .content .content-item .top {
  display: flex;
  align-items: center;
  font-size: .14rem;
  border-bottom: 1px solid #F0F1F1;
}
.main-floor.f1 .content .content-item .top a.img,
.main-floor.f1 .content .content-item .hot{
  display: inline-flex;
  align-items: center;
  height: .51rem;
  padding-top: .15rem;
  padding-bottom: .12rem;
}
.main-floor.f1 .content .content-item .top .icon {
  width: .24rem;
  height: .24rem;
  margin-right: .08rem;
  display: block;
}

.main-floor.f1 .content .content-item .top .hot {
  width: .22rem;
  height: .41rem;
}

.main-floor.f1 .content .content-item .h3 {
  font-size: .14rem;
  flex: 1;
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: .24rem;
  padding-top: .15rem;
  padding-bottom: .12rem;
  font-weight: 600;
}
.main-floor.f1 .content .content-item p {
  font-size: .10rem;
  color: #595959;
  opacity: 1;
}
.main-floor.f1 .content .content-item p a{
  padding-top: .12rem;
  padding-bottom: .19rem;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
  word-break: break-all;
  font-size: inherit;
}
.main-floor.f1 .content .content-item p a:after{
  content: '';
  width: 100%;
  height: .19rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  display: block;
}
.main-floor.f2 {
  height: 4.22rem;
}

.main-floor.f2 .title .h2 {
  color: #fff;
}

.main-floor.f2 .title p {
  color: rgba(255, 255, 255, .66);
}

.main-floor.f2 .swiper-pagination2 {
  width: 100%;
  margin-top: .30rem;
  font-size: 0;
}

.main-floor.f2 .swiper-pagination2 .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: #B7D0FF;
  opacity: .6;
  margin-right: .08rem;
}

.main-floor.f2 .swiper-pagination2 .swiper-pagination-bullet-active {
  width: 15px;
  height: 5px;
  border-radius: 8px;
  opacity: 1;
  background: #96BBFF;
}

.main-floor.f2 .f2-swiper {
  padding-left: .35rem;
}

.main-floor.f2 .f2-swiper .swiper2 .swiper-slide {
  width: 2.57rem;
}

.main-floor.f2 .f2-swiper .swiper2 .content {
  width: 2.57rem;
  height: 2.32rem;
  background-color: #fff;
}

.main-floor.f2 .f2-swiper .swiper2 .content .slide-title {
  font-size: .14rem;
  color: #fff;
  height: .42rem;
  background-image: url(../img/titlebg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  line-height: .42rem;
}

.main-floor.f2 .f2-swiper .swiper2 .content .slide-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 .19rem;
  padding-top: .28rem;
}

.main-floor.f2 .f2-swiper .swiper2 .content .slide-box .box-item {
  width: 50%;
  text-align: center;
  color: rgba(38, 38, 38, .8);
  font-size: .11rem;
  margin-bottom: .19rem;
}

.main-floor.f2 .f2-swiper .swiper2 .content .slide-box .box-item p {
  font-size: .11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-floor.f2 .f2-swiper .swiper2 .content .slide-box .box-item img {
  width: .32rem;
  height: .32rem;
  margin-bottom: .08rem;
}

.main-floor.f3 {
  background: #F4F6FB;
}

.main-floor.f3 .title .h2 {
  color: #262626;
}

.main-floor.f3 .title p {
  color: #595959;
  opacity: .66;
}

.main-floor.f3 .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 .30rem;
}

.main-floor.f3 .content .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .14rem;
  width: 1.50rem;
  height: auto;
  background-color: #fff;
  padding: 0 .17rem;
  margin-bottom: .16rem;
  border-radius: 4px;
}

.main-floor.f3 .content .item a {
  color: #595959;
}
.main-floor.f3 .content .item .img{
  height: .59rem;
  display: flex;
  align-items: center;
}
.main-floor.f3 .content .item .t {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: .1rem;
  line-height: .59rem;
  font-size: inherit;
  font-weight: 600;
}
.main-floor.f3 .content .item .i1 {
  width: .24rem;
  height: .24rem;
  display: block;
}
.main-floor.f3 .content .item .icon{
  width: .0604rem;
  height: .59rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.main-floor.f3 .content .item .right {
  display: block;
  width: .0604rem;
  height: auto;
}

.main-floor.f4 {
  height: 5.16rem;
  overflow: hidden;
}

.main-floor.f4 .title .h2 {
  color: #fff;
}

.main-floor.f4 .swiper-container {
  width: 2.92rem;
  overflow: initial;
}

.main-floor.f4 .swiper-slide {
  height: 3.56rem;
  transition: 300ms;
  transform: scale(.96);
  opacity: .5;
}

.main-floor.f4 .swiper-slide.swiper-slide-active{
  transform: scale(1);
  opacity: 1;
}

.main-floor.f4 .swiper-slide .slide-box {
  width: 2.80rem;
  height: 100%;
  margin: 0 auto;
  background-color: rgba(105, 105, 105, .3);
  border-radius: 4px;
  overflow: hidden;
}
.main-floor.f4 .swiper-slide .slide-box .slide-item{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-floor.f4 .swiper-slide .slide-box .slide-item .slide-item-main{
  flex: 1;
  overflow: hidden;
}

.main-floor.f4 .swiper-slide .item-img {
  display: block;
  height: 1.56rem;
  padding: .24rem .24rem 0;
}

.main-floor.f4 .swiper-slide .item-img img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

/*.main-floor.f4 .swiper-slide .h2 {*/
/*  margin-bottom: .06rem;*/
/*}*/

.main-floor.f4 .swiper-slide .intro {
  height: 0.86rem;
  color: inherit;
  padding: .06rem .24rem 0;
  display: block;
  line-height: .16rem;
  overflow: hidden;
}
.main-floor.f4 .swiper-slide .intro *{
  color: #ffffff;
}
.main-floor.f4 .swiper-slide .h2 a {
  color: #fff;
  font-size: .14rem;
  line-height: .21rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: .16rem .24rem 0;
}

.main-floor.f4 .swiper-slide p a {
  font-size: .11rem;
  line-height: .16rem;
  color: rgba(255, 255, 255, .9);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-weight: 500;
}

.main-floor.f4 .swiper-slide .last {
  text-align: right;
  font-size: .11rem;
  line-height: .16rem;
  color: rgba(255, 255, 255, .9);
  padding: .16rem .24rem .24rem;
  display: block;
}

.main-floor.f4 .swiper-pagination-fraction,
.main-floor.f4 .swiper-pagination-custom,
.main-floor.f4 .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -.29rem;
}

.main-floor.f4 .swiper3 .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: #ffffff;
  opacity: .6;
  transition: 200ms transform, 200ms left;
}
.main-floor.f4 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 .04rem;
}
.main-floor.f4 .swiper3 .swiper-pagination-bullet-active {
  width: 15px;
  height: 5px;
  border-radius: 8px;
  opacity: 1;
}
/*.main-floor.f4 .swiper-pagination .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{*/
/*  transform: scale(1);*/
/*  position: relative;*/
/*}*/
/*.main-floor.f4 .swiper-pagination .swiper-pagination-bullet{*/
/*  width: 5px;*/
/*  height: 5px;*/
/*  background: #fff;*/
/*  opacity: .1;*/
/*}*/

/*.main-floor.f4 .swiper-slide-active,*/
/*.main-floor.f4 .swiper-slide-duplicate-active {*/
/*  transform: scale(1);*/
/*}*/

/*.main-floor.f4 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {*/
/*  background: #FFFFFF;*/
/*  width: 15px;*/
/*  height: 5px;*/
/*  border-radius: 8px;*/
/*  opacity: 1;*/
/*}*/

/*.main-floor.f4 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {*/
/*  width: 5px;*/
/*  height: 5px;*/
/*  background: #FFFFFF;*/
/*  opacity: .6;*/
/*  transform: scale(1);*/
/*}*/

/*.main-floor.f4 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {*/
/*  width: 5px;*/
/*  height: 5px;*/
/*  background: #FFFFFF;*/
/*  opacity: .4;*/
/*  transform: scale(1);*/
/*}*/

/*.main-floor.f4 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {*/
/*  width: 5px;*/
/*  height: 5px;*/
/*  background: #FFFFFF;*/
/*  opacity: .6;*/
/*  transform: scale(1);*/
/*}*/

/*.main-floor.f4 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {*/
/*  width: 5px;*/
/*  height: 5px;*/
/*  background: #FFFFFF;*/
/*  opacity: .4;*/
/*  transform: scale(1);*/
/*}*/

.main-floor.f5 {
  background-color: #F4F6FB;
}

.main-floor.f5 .swiper4 {
  padding-bottom: .28rem;
}

.main-floor.f5 .swiper4 .swiper-pagination {
  bottom: 0;
}

.main-floor.f5 .slide-img {
  padding: 0 .16rem;
  overflow: hidden;
}

.main-floor.f5 .slide-img a, .main-floor.f5 .slide-img img {
  display: block;
}

.main-floor.f5 .slide-img img {
  width: 100%;
}
.main-floor.f5 .f5-swiper .swiper-container{
  padding-bottom: .29rem;
}

.main-floor.f5 .f5-swiper .swiper-pagination-fraction,
.main-floor.f5 .f5-swiper .swiper-pagination-custom,
.main-floor.f5 .f5-swiper .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 0;
}

.main-floor.f5 .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: #4385FF;
  opacity: .2;
  transition: 200ms transform, 200ms left;
}

.main-floor.f5 .swiper-pagination-bullet-active {
  width: 15px;
  height: 5px;
  background: #4385FF;
  border-radius: 8px;
  opacity: 1;
}

.main-floor.f6 .content {
  padding: 0 .20rem;
}

.main-floor.f6 .content .item {
  display: flex;
  padding: .16rem 0;
  border-bottom: 1px solid #eee;
}

.main-floor.f6 .content .item:first-child {
  padding-top: 0;
}

.main-floor.f6 .content .item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.main-floor.f6 .content .item .item-link {
  width: 1.28rem;
  height: .81rem;
  flex-shrink: 0;
  padding-right: .07rem;
}

.main-floor.f6 .content .item .item-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-floor.f6 .content .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-floor.f6 .content .info p a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .14rem;
  line-height: .21rem;
  color: #262626;
}

.main-floor.f6 .content .info .last {
  font-size: .12rem;
  line-height: .17rem;
  color: #777777;
  flex: 1;
  display: flex;
  flex-flow: column-reverse;
}

.main-floor.f6 .more {
  text-align: center;
  padding-top: .24rem;
}

.main-floor.f6 .more a {
  font-size: .14rem;
  line-height: .20rem;
  color: #4385FF;
  display: block;
}