/** BBB-321 LQ 2021-11-16 */
/* icon */
.ico-vip { 
    display: inline-block; vertical-align: middle; width: 24px; height: 24px; 
    background: url('../images/ico-vip.png') no-repeat; background-size: 100% 100%; 
}
.ico-like {
    display: inline-block; vertical-align: middle; width: 16px; height: 16px; 
    background: url('../images/like_16.png') no-repeat; background-size: 100% 100%; 
}
.ico-tel {
    display: inline-block; vertical-align: middle; width: 16px; height: 16px; 
    background: url('../images/tel_16.png') no-repeat; background-size: 100% 100%; 
}

/* u-btn */
.u-btn.btn-warn, .u-btn.btn-warn:hover { border-color: #ec3b3b; background-color: #ec3b3b; color: #fff; }
.u-btn.btn-warn:hover { opacity: .8; }

/* atr-820x168 */
.atr-820x168 { position: relative; }
.atr-820x168 > * { box-sizing: border-box; }
.atr-820x168.mt16 { margin-top: 16px; }
.atr-820x168 .chain-left,
.atr-820x168 .chain-right {
    position: absolute; top: -36px; z-index: 10;
    width: 28px; height: 56px; background: url('../images/chain.png') no-repeat;
}
.atr-820x168 .chain-left { left: 212px; }
.atr-820x168 .chain-right { right: 212px; }
.atr-820x168 .lawyer {
    display: block; padding: 24px 220px 24px 150px; box-sizing: border-box;
    height: 168px; background: url('../images/bg_820x168.png') no-repeat;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}
.atr-820x168 .photo {
    position: absolute; top: 24px; left: 32px; 
    width: 86px; height: 86px;
}
.atr-820x168 .photo img { border-radius: 50%; }
.atr-820x168 .photo .ico-vip { position: absolute; right: 0; bottom: 0; }
.atr-820x168 .photo .online { 
    position: absolute; left: 0; right: 0; top: 86px; padding-top: 15px; 
    font-size: 12px; color: #333; text-align: center; line-height: 16px; 
}
.atr-820x168 .photo .online .dot { 
    display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; 
    width: 8px; height: 8px; background-color: #11bb65; border-radius: 50%; 
}
.atr-820x168 .u-badge { 
    position: absolute; top: 0; right: 0; z-index: 2; 
    height: 26px; line-height: 26px; font-size: 14px; color: #fff;
    padding: 0 12px; border-radius: 0 0 0 16px;
    background: linear-gradient(to right, #ff9900, #ec3b3b);
}
.atr-820x168 .u-badge .ico-like { margin: -2px 8px 0 0; }
.atr-820x168 .tit { height: 28px; line-height: 28px; color: #333; }
.atr-820x168 .tit .name { position: relative; float: left; font-size: 20px; padding-right: 8px; }
.atr-820x168 .tit .name:after {
    position: absolute; right: 0; top: 7px; content: '';
    width: 1px; height: 14px; background-color: #bbb;
}
.atr-820x168 .tit span { float: left; font-size: 14px; padding: 0 8px; }
.atr-820x168 .info { font-size: 14px; line-height: 20px; color: #666; margin-top: 8px; }
.atr-820x168 .tag { height: 26px; margin-top: 8px; }
.atr-820x168 .tag span { float: left; border: 1px solid #eee; background-color: #fffcf8; border-radius: 2px; padding: 0 8px; margin-right: 8px; font-size: 13px; color: #666; }
.atr-820x168 .help { height: 22px; line-height: 22px; font-size: 13px; color: #999; margin-top: 8px; }
.atr-820x168 .help span { float: left; margin-right: 16px; }
.atr-820x168 .help span em { font-size: 13px; color: #333; margin: 0 2px; font-family: '\5FAE\8F6F\96C5\9ED1'; }
.atr-820x168 .right { position: absolute; top: 52px; right: 32px; text-align: right; }
.atr-820x168 .right .tel { height: 24px; overflow: hidden; }
.atr-820x168 .right .tel .ico-tel { float: left; margin: 3px 6px 0 0; }
.atr-820x168 .right .tel .f-num { float: left; font-size: 20px; color: #333; }
.atr-820x168 .right .time { font-size: 12px; line-height: 16px; color: #bbb; margin-top: 8px; }
.atr-820x168 .u-btn { 
    position: absolute; right: 32px; bottom: 26px; 
    width: 102px; height: 32px; line-height: 32px; border: none; border-radius: 32px;
    padding: 0; font-size: 14px; text-align: center;
}