.mainPage{
  background: #fff;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  .banner{
    width: 100%;
    height: 0;
    padding-bottom: 65%;
    background: #eee;
    position: relative;
    overflow: hidden;
    >div{
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      >div{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .items{
    width: 3.33rem;
  }
  p{
    width: 100%;
    box-sizing: border-box;
    border-left: .2rem solid transparent;
    border-right: .2rem solid transparent;
    line-height: .25rem;
    font-size: .16rem;
    color: #555;
    margin: .22rem auto 0;
  }
  .list{
    margin: .34rem auto 0;
    overflow: visible;
    .cutLine{
      box-sizing: border-box;
      height: .7rem;
      border-left: .01rem dashed #b57f4e;
      margin: 0 auto;
      &::after{
        display: none;
      }
    }
    &>div.flex-item{
      margin: 0 .2rem;
      overflow: visible;
      &>div{
        width: 100%;
        position: relative;
        overflow: visible;
        padding-bottom: .4rem;
        &::after{
          content: '';
          width: .01rem;
          height: 100%;
          background: #b57f4e;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
        }
        &>span{
          display: inline-block;
          line-height: .3rem;
          color: #fff;
          padding: 0 .2rem;
          background: #b57f4e;
          font-size: .15rem;
          border-top-right-radius: .3rem;
          border-bottom-right-radius: .3rem;
        }
        &>ul{
          box-sizing: border-box;
          border-left: .2rem solid transparent;
          &>li{
            margin: .2rem auto 0;
            position: relative;
            overflow: visible;
            box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);
            border-radius: .06rem;
            padding: .1rem 0;
            &::after{
              content: '';
              width: .15rem;
              height: .15rem;
              border: .01rem solid #b57f4e;
              position: absolute;
              left: -.28rem;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              background: #fff;
              z-index: 2;
              border-radius: 100%;
            }
            &::before{
              content: '';
              width: .09rem;
              height: .09rem;
              position: absolute;
              left: -.24rem;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              background: #b57f4e;
              z-index: 3;
              border-radius: 100%;
            }
            &>div{
              margin: 0 .1rem;
              &.bottom{
                &>div{
                  &>div{
                    margin-right: .2rem;
                    span{
                      width: 100%;
                      text-align: center;
                      border-right: .01rem dashed #ccc;
                      line-height: .2rem;
                      font-size: .11rem;
                    }
                  }
                }
              }
            }
            .qrCode{
              width: .7rem;
              position: relative;
              overflow: hidden;
              a{
                width: 100%;
                display: block;
                padding-bottom: 100%;
                background: #eee;
                position: relative;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
}