.img-fill{width:100%;display:block}
.banner{margin-top:5.3rem}
.step_box {
    display: flex;
    justify-content: center;
    line-height: 3rem;
    font-size: 1.5rem;
    margin:10rem 0 5rem
}
.step_box .step{margin:0 1.5rem;width:7rem;text-align:center;font-family: 'SourceHanSerifCN-Heavy';}
.step_box .step.active{color:#6e8d4a;border-bottom:3px solid #6e8d4a;font-size:1.75rem}
.wrapper{display:flex;flex-direction:column;align-items:center;margin-bottom:10rem}
.item{position:relative;display:none;overflow:hidden}
.item.active{display:block}
.item p {
    text-align: left;
    background: #6e8d4a;
    color: #fff;
    padding:2rem 3rem;
    font-size: 1rem;
    bottom: 0;
    width: 100%;
    position: absolute;
    left: 0;
    transform: translateY(101%);
    transition: transform .6s cubic-bezier(0.31, 0.66, 0.46, 0.95) 0s;
}
.item:hover p {
    transform: translateY(0);
}
.detail{width:60%;}

@media screen and (max-width:700px) {
    body{background:#f3f3f3}
    .wrapper{padding: 0 8%;}
    .item p{position:unset;transform:translateY(0)}
    .detail{width:100%}
    .step_box{flex-wrap:wrap;justify-content:space-between;margin:5rem 0}
    .step_box .step{margin:1rem 1.5rem}
    .detail {width:100%}
    .img_box{height:28rem;display:flex;justify-content:center;overflow:hidden}
    .img_box .img-fill{height:100%;width:auto}
}