.demo[data-v-2afbb03b]{display:flex;width:100vw;height:100vh;align-items:center;justify-content:center;background-color:#264056;font-size:.37333rem}.demo .content[data-v-2afbb03b]{position:relative;width:8rem;height:8rem;background-color:#fff;transition:all .4s ease-in-out;overflow:hidden;z-index:2}.demo .content header[data-v-2afbb03b]{position:relative;line-height:1.33333rem;background-color:#6199cb;color:#fff;text-align:center}.demo .content header .icon-search[data-v-2afbb03b],.demo .content header .icon-show[data-v-2afbb03b]{position:absolute;top:50%;left:.26667rem;line-height:1;transform:translateY(-50%)}.demo .content header .icon-search[data-v-2afbb03b]{left:auto;right:.26667rem}.demo .content header input[data-v-2afbb03b]{position:absolute;display:block;padding:.26667rem;top:50%;left:.26667rem;width:70%;height:70%;border:none;border-radius:.53333rem;transform:translate3d(15%,-50%,0);opacity:0;transition:transform .3s linear}.demo .content header input.active[data-v-2afbb03b]{transform:translate3d(0,-50%,0);opacity:1;transition:transform .3s linear}.demo .timeline[data-v-2afbb03b]{position:relative;height:6.66667rem;padding:.4rem .8rem;overflow:hidden}.demo .timeline[data-v-2afbb03b]:before{position:absolute;display:block;content:"";width:.05333rem;height:100%;background-color:#ebebeb;left:.53333rem;top:0;z-index:3}.demo .timeline .line[data-v-2afbb03b]{position:relative;margin-bottom:.8rem;opacity:0;transform:translateY(100%);transition:all .5s linear;z-index:4}.demo .timeline .line small[data-v-2afbb03b]{display:block}.demo .timeline .line strong[data-v-2afbb03b]{font-weight:700}.demo .timeline .line[data-v-2afbb03b]:before{position:absolute;display:block;content:"";width:.26667rem;height:.26667rem;border-radius:50%;background-color:#43627c;top:0;left:-.37333rem;z-index:4}.demo .timeline .line.line2[data-v-2afbb03b]{transition-delay:.5s}.demo .timeline .line.line3[data-v-2afbb03b]{transition-delay:1s}.demo .sub-content[data-v-2afbb03b]{display:flex;position:absolute;background-color:#43627c;top:50%;left:50%;height:6.66667rem;flex-direction:column;border-radius:.26667rem 0 0 .26667rem;transform:translate3d(-35%,-50%,0);transition:all .4s ease-in-out;color:#fff;z-index:1}.demo .sub-content-item[data-v-2afbb03b]{display:flex;flex:1;padding:0 .4rem;align-items:center}.demo.active .content[data-v-2afbb03b]{transition:all .4s ease-in-out;transform:translateX(30%)}.demo.active .sub-content[data-v-2afbb03b]{transition:all .4s ease-in-out;transform:translate3d(-135%,-50%,0)}.demo.loaded .timeline .line[data-v-2afbb03b]{opacity:1;transform:none}