//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";

.m-func {
  position: relative;
  box-sizing: border-box;
  width: 710rpx;
  margin: 30rpx auto;
  padding: 10rpx 15rpx 40rpx;
  border-bottom: 1rpx solid #E7EEEE;
  background-color: #fff;
  border-radius: 10rpx;

  .swipe {
    swiper {
      height: 160rpx;
      overflow: hidden;
      border-radius: 10rpx;

      swiper-item {
        display: flex;
        justify-content: space-between;
        height: 160rpx;

        .link {
          position: relative;
          margin: 0 13rpx;

          image {
            width: 316rpx;
            height: 160rpx;
            border-radius: 10rpx;
          }
          text {
            position: absolute;
            top: 30rpx;
            left: 20rpx;
            color: #fff;
            font-size: 32rpx;
            font-family: Source Han Serif SC;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }
    }
  }

  .dots {
    position: absolute;
    bottom: 12rpx;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;

    .dot {
      margin: 0 5rpx;
      width: 24rpx;
      height: 6rpx;
      border-radius: 6rpx;
      background-color: #ddd;
      transition: all ease $ad1;

      &.z-on {
        background-color: $c1;
      }
    }
  }
}