/* hlx-6976 lq 2022-05-07 */
.p16 { padding: .8rem; }

/* ask-helper-card */
.ask-helper-card { position: relative; box-shadow: 0rem .25rem .75rem rgba(0,0,0, .05); border-radius: .4rem; }
.ask-helper-card .tips { position: relative; font-size: .7rem; line-height: 1rem; }
.ask-helper-card .user { position: relative; display: flex; padding: .6rem .8rem; }
.ask-helper-card .user dl { flex: 1; }
.ask-helper-card .user .photo { float: left; width: 2rem; height: 2rem; margin-right: .4rem; }
.ask-helper-card .user .h22 { height: 1.1rem; }
.ask-helper-card .user .h16 { height: .8rem; line-height: .8rem; font-size: .6rem; color: #666; margin-top: .1rem; }
.ask-helper-card .user .h16 .dot-online {
    float: left; margin: .25rem .2rem 0 0;
    width: .3rem; height: .3rem; background: #13cc6e; border-radius: 50%;
}
.ask-helper-card .user .u-btn { position: relative; width: 4.4rem; padding: 0; margin-top: .2rem; overflow: hidden; }
.ask-helper-card .user .u-btn:after {
    position: absolute; left: 0; top: -0.05rem;
    content: ''; width: 3.25rem; height: 1.6rem;
    background-image: url('../images/btn.png'); background-size: cover;
    transform: translateX(-100%);
    animation: toRight 2s ease .5s infinite;
}
@keyframes toRight {
    form {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(10rem);
        transform: translateX(10rem)
    }
}
    /* helper1 */
.helper1 { background: linear-gradient(180deg, #d9efff 0%, #ffffff 100%); padding-bottom: .6rem; }
.helper1 .bg { position: absolute; left: 6.5rem; top: 0; width: 5.9rem; height: 3.2rem; }
.helper1 .tips { 
    padding: .6rem .6rem .8rem; margin-left: .6rem; 
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255, 0) 100%);
    border-radius: .4rem 0 0 .4rem;
}
.helper1 .tips:before {
    position: absolute; left: .85rem; top: -0.3rem; content: ''; 
    border: .35rem solid transparent; border-bottom-color: #fff; border-top: none;
}
.helper1 .tips dd { margin-top: .2rem; }
    /* helper2 */
.helper2 { padding-top: .6rem; background: linear-gradient(180deg, #e6f4ff 0%, #ffffff 100%); }
.helper2 .user { padding: .8rem; }
.helper2 .tips { 
    margin: 0 .6rem; padding: 1.7rem .6rem .7rem;
    background: #FFFFFF; box-shadow: 0rem .25rem .75rem #E6F4FF; border-radius: .4rem; 
}
.helper2 .tips:before {
    position: absolute; left: .85rem; bottom: -0.3rem; content: ''; 
    border: .35rem solid transparent; border-top-color: #fff; border-bottom: none;
}
.helper2 .tips dt {
    position: absolute; left: 0; top: 0;
    padding: .3rem 0 .2rem .6rem; line-height: .8rem;
    background: linear-gradient(90deg, #FEF0F0 0%, #FFFFFF 100%); border-radius: .4rem 0 0 0;
    font-size: .6rem; color: #EF5858; font-weight: 600;
}