/* 设置一个名为.lay-step 的类选择器 */
.lay-step {
    /* 将字体大小设置为 0，去除元素内的默认字体大小影响 */
    font-size: 0;
    /* 设置宽度为 400px，或者在容器允许的情况下最大宽度为 100% */
    width: 400px;
    margin: 0 auto;
    max-width: 100%;
    /* 设置左内边距为 200px */
    padding-left: 200px;
}

/* 设置一个名为.step-item 的类选择器 */
.step-item {
    /* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */
    display: inline-block;
    /* 设置行高为 26px */
    line-height: 26px;
    /* 设置元素为相对定位，为子元素的绝对定位提供参考 */
    position: relative;
    /* 设置字体大小为 14px */
    font-size: 14px;
}

/* 设置一个名为.step-item-tail 的类选择器 */
.step-item-tail {
    /* 设置宽度为 100%，即占满父元素宽度 */
    width: 100%;
    /* 设置左右内边距为 10px */
    padding: 0 10px;
    /* 设置元素为绝对定位，相对于父元素定位 */
    position: absolute;
    /* 设置左偏移为 0，即与父元素左边对齐 */
    left: 0;
    /* 设置上偏移为 13px */
    top: 13px;
}

/* 设置一个名为.step-item-tail i 的类选择器 */
.step-item-tail i {
    /* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */
    display: inline-block;
    /* 设置宽度为 100%，即占满父元素宽度 */
    width: 100%;
    /* 设置高度为 1px */
    height: 1px;
    /* 垂直对齐方式为顶部对齐 */
    vertical-align: top;
    /* 设置背景颜色为 #c2c2c2 */
    background: #c2c2c2;
    /* 设置元素为相对定位，为可能的子元素绝对定位提供参考 */
    position: relative;
}

/* 设置一个名为.step-item-tail.step-item-tail-done 的类选择器 */
.step-item-tail.step-item-tail-done {
    /* 设置背景颜色为 #009688 */
    background: #009688;
}

/* 设置一个名为.step-item-head 的类选择器 */
.step-item-head {
    /* 设置元素为相对定位，为子元素的绝对定位提供参考 */
    position: relative;
    /* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */
    display: inline-block;
    /* 设置高度为 26px */
    height: 26px;
    /* 设置宽度为 26px */
    width: 26px;
    /* 设置文本居中对齐 */
    text-align: center;
    /* 垂直对齐方式为顶部对齐 */
    vertical-align: top;
    /* 设置文本颜色为 #009688 */
    color: #009688;
    /* 设置边框为 1px 宽的实线，颜色为 #009688 */
    border: 1px solid #009688;
    /* 设置边框圆角为 50%，使元素呈现圆形 */
    border-radius: 50%;
    /* 设置背景颜色为白色 */
    background: #ffffff;
}

/* 设置一个名为.step-item-head.step-item-head-active 的类选择器 */
.step-item-head.step-item-head-active {
    /* 设置背景颜色为 #009688 */
    background: #009688;
    /* 设置文本颜色为白色 */
    color: #ffffff;
}

/* 设置一个名为.step-item-main 的类选择器 */
.step-item-main {
    /* 将元素设置为块级元素，独占一行 */
    display: block;
    /* 设置元素为相对定位，为子元素的绝对定位提供参考 */
    position: relative;
    /* 设置左外边距为 -50%，用于调整元素位置 */
    margin-left: -50%;
    /* 设置右外边距为 50%，用于调整元素位置 */
    margin-right: 50%;
    /* 设置左内边距为 26px */
    padding-left: 26px;
    /* 设置文本居中对齐 */
    text-align: center;
}

/* 设置一个名为.step-item-main-title 的类选择器 */
.step-item-main-title {
    /* 设置字体加粗 */
    font-weight: bolder;
    /* 设置文本颜色为 #555555 */
    color: #555555;
}

/* 设置一个名为.step-item-main-desc 的类选择器 */
.step-item-main-desc {
    /* 设置文本颜色为 #aaaaaa */
    color: #aaaaaa;
}

/* 设置一个选择器组合，当.lay-step 后面紧跟着 [carousel-item] 元素时 */
.lay-step + [carousel-item]:before {
    /* 不显示任何内容 */
    display: none;
}

/* 设置一个选择器组合，当.lay-step 后面紧跟着 [carousel-item] 元素时，选择 [carousel-item] 的子元素 */
.lay-step + [carousel-item] > * {
    /* 设置背景颜色为透明 */
    background-color: transparent;
}