body { background-color: #fff; }
.inner { line-height: 1; }
.top__inner { position: relative; width: 100%; height: 300px; background: url(../image/422e50c6005fd8388b7ea97dffcfb6bf.png) no-repeat top center #04213e; }
.top__inner-txt { margin-top: 90px; text-align: center; font-size: 26px; color: #fff; font-weight: bold; }
.search__box { position: relative; margin: 24px auto 0; width: 560px; height: 48px; background: #fff; overflow: hidden; box-shadow: 0px 4px 16px 0px rgb(0 0 0 / 20%); border-radius: 24px; }
.search__box .search__btn { cursor: pointer; padding-top: 16px; padding-left: 24px; position: absolute; right: 0; top: 0; width: 64px; height: 48px; background: #fff; box-shadow: 0px 2px 1px 0px rgba(255, 255, 255, 0.5); border-radius: 0px 24px 24px 0px; box-sizing: border-box; }
.search__btn i { font-size: 16px; color: #1476F9; }
.search__btn:hover { background: #E3ECF7; }
.search__box input { width: 496px; margin-top: 12px; margin-left: 24px; font-size: 16px; color: #333; }
.top__guide { padding: 20px 0; position: relative; background: #FFFFFF; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; justify-content: center;flex-wrap: wrap; }
.guide__li { margin-right: 36px; float: left; line-height: 32px; }
.guide__li .guide__icon { display: inline-block; width: 32px; height: 32px; }
.guide__txt { color: #999; font-size: 14px; margin-left: 16px; }
.top__guide-tips { line-height: 32px; font-size: 16px; color: #666; margin-left: 10px; }
.main { width: 1176px; margin: 78px auto 0; }
.common__title { color: #333; font-size: 18px; font-weight: bold; }
.inner__quality { margin-bottom: 48px; }
.quality__ul { margin-top: 24px; display: flex; flex-wrap: wrap; }
.quality__li { position: relative; padding: 16px 16px 22px; width: 276px; background: #F4F4F4; border-radius: 4px; box-sizing: border-box; }
.quality__li:last-child { margin-right: 0; }
.quality__avatar { width: 96px; height: 96px; }
.quality__good { margin-top: 16px; }
.quality__good span { float: left; margin-right: 8px; color: #999; font-size: 12px; width: 60px; text-align: center; line-height: 18px; border-radius: 4px; border: 1px solid #D9D9D9; }
.quality__good .other { width: auto; border: none; }
.quality__con { margin-left: 16px; }
.quality__line { margin-bottom: 4px; margin-top: 30px; width: 16px; height: 3px; background: #1476F9; border-radius: 2px; }
.quality__name { font-size: 16px; font-weight: bold; color: #333; }
.quality__txt { margin-top: 26px; color: #666; font-size: 14px; }
.quality__txt i { color: #BDC4C8; margin-right: 4px; font-size: 16px; }
.quality__txt span { color: #1476F9; margin: 0 2px; }
.quality__code { cursor: pointer; position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; }
.quality__code i { color: #BDC4C8; }
.quality__code:hover .code__box { visibility: visible; transform: translateY(20px); }
.code__box { visibility: hidden; padding: 16px 24px; position: absolute; top: -220px; right: 0; width: 240px; height: 196px; background: #F8F8F8; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.2); border-radius: 8px; box-sizing: border-box; transition: all .15s linear; }
.code__tips { margin-top: 10px; text-align: center; width: 100%; color: #999; font-size: 12px; }
.code__con { margin-top: 16px; }
.code__con-left { width: 110px; height: 110px; line-height: 110px; margin-right: 22px; background-color: #fff; }
.code__con-left img { vertical-align: middle; width: auto; height: auto; max-width: 110px; }
.code__txt { text-align: center; width: 100%; color: #666; font-size: 14px; font-weight: bold; }
.code__con-right { width: 60px; height: 110px; background: url(../image/f897abea_icon-phone.png) no-repeat; }
.find__guide { width: 376px; }
.guide__con {
  margin-top: 24px;
  padding: 24px 32px;      /* 增加上下内边距，确保文字不贴边 */
  min-height: 320px;       /* 将 height 改为 min-height，让内容多时自动向下撑开 */
  height: auto;            /* 强制覆盖掉之前可能存在的固定高度 */
  background: url(../image/b49dd32353e0756fbbba165e59cdccf2.png) no-repeat center;
  background-size: 100% 100%; /* 核心修改：让背景图强制拉伸铺满整个容器 */
  box-sizing: border-box;  /* 确保 padding 不会撑大容器总宽 */
  border-radius: 8px;      /* 建议：配合背景图增加一点圆角美观度 */
}
.guide__con h4 { margin-top: 24px; color: #fff; font-size: 16px; }
.guide__con p { margin-top: 16px; color: #98A3B2; font-size: 14px; line-height: 24px; }
.guide__con p span { color: #FFC300; font-weight: bold; }
.choose__ul { margin-top: 24px; }
.choose__li { padding: 28px 17px 32px; width: 376px; height: 320px; margin-right: 24px; background: #F4F4F4; border-radius: 4px; box-sizing: border-box; }
.choose__li:last-child { margin-right: 0; }
.choose__title { text-align: center; }
.choose__title span { display: inline-block; }
.choose__title .span__tx1 { position: relative; font-size: 18px; color: #666; font-weight: bold; margin-right: 12px; }
.choose__title .span__tx1::before { content: ""; position: absolute; width: 16px; height: 16px; opacity: 0.3; border: 3px solid #1476F9; top: -8px; left: -20px; border-radius: 50%; box-sizing: border-box; }
.choose__title .span__tx2 { position: relative; color: #666; font-size: 14px; }
.choose__title .span__tx2::after { position: absolute; bottom: -16px; right: -20px; content: ""; width: 24px; height: 10px; background: url("../image/09a2c694_choose-line.png") no-repeat; }
.pro__ul { margin-top: 22px;display: flex; }
.pro__li { width: 88px; margin: 0 13px; }
.pro__li img { width: 88px; height: 88px; }
.pro__title { margin-top: -4px; text-align: center; font-size: 14px; color: #666; font-weight: bold; }
.pro__tips { text-align: center; font-size: 14px; color: #999; line-height: 20px; margin-top: 11px; }
.choose__btn { display: block; margin: 30px auto 0; width: 188px; color: #fff; font-size: 16px; text-align: center; line-height: 40px; background: #1476F9; border-radius: 20px; }
.choose__btn:hover { color: #fff; background: rgba(20, 118, 249, 0.7); }
.lawyer__recommend { margin: 48px 0 24px; padding-top: 20px; border-top: #CEBDA3 solid 4px; }
.recommend__title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 25px; }
.recommend__li { margin-right: 24px; margin-bottom: 24px; position: relative; width: 176px; height: 282px; overflow: hidden; border-radius: 4px; }
.recommend__avatar { display: block; width: 176px; height: 176px; }
.recommend__avatar img { width: 100%; height: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.recommend__bottom { position: absolute; bottom: 0; width: 100%; height: 106px; padding: 14px 14px 0 14px; background-color: #F4F4F4; box-sizing: border-box; transition: all .1s ease-in; }
.recommend__bottom .quality__txt { margin-top: 13px; }
.recommend__name { display: inline-block; font-size: 16px; color: #111; }
.recommend__state { text-align: center; color: #fff; font-size: 12px; width: 30px; line-height: 18px; border-radius: 4px; }
.recommend__state.state__1 { background: #27B14A; }
.recommend__state.state__2 { background: #FF9709; }
.recommend__txt { margin-top: 12px; font-size: 14px; color: #666; }
.recommend__other { margin-top: 12px; }
.recommend__btn { position: absolute; bottom: -24px; left: 48px; display: block; visibility: hidden; margin: 12px auto 0; width: 80px; }
.recommend__btn a { text-align: center; color: #fff; font-size: 14px; display: block; background: #1476F9; line-height: 24px; border-radius: 12px; }
.recommend__list { margin-top: 24px;display: flex; flex-wrap: wrap;}
.recommend__li:hover .recommend__bottom { background-color: #EAEAEA; height: 166px; }
.recommend__li:hover .recommend__btn { visibility: visible; bottom: 24px; transition: all .1s ease-in .1s; }
.recommend__btn a:hover { color: #fff; background: rgba(20, 118, 249, 0.7); }
.recommend__li:hover .recommend__good { -webkit-line-clamp: inherit; }
.new__answer { margin-right: 32px; width: 780px; padding-top: 20px; border-top: #333 solid 4px; }
.answers__item { float: left; padding: 16px 0; width: 100%; border-bottom: #EFEFEF solid 1px; }
.answers__item:last-child { border-color: #fff; }
.answers__top { margin-top: 24px; display: block; width: 100%; }
.answers__item-img { width: 36px; height: 36px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); border: 2px solid #FFFFFF; border-radius: 50%; box-sizing: border-box; }
.answers__con { position: relative; padding: 16px; width: 732px; height: 80px; background: #F4F4F4; box-sizing: border-box; }
.answers__con::before { position: absolute; top: 20px; left: -3px; content: ""; width: 10px; height: 10px; background-color: #F4F4F4; transform: rotate(45deg); }
.answers__q { font-size: 16px; color: #333; margin-bottom: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.answers__name { color: #666; font-size: 14px; }
.answers__date { color: #BFBFBF; font-size: 12px; }
.answers__icon { display: inline-block; color: #fff; font-size: 12px; margin-right: 8px; width: 16px; text-align: center; border-radius: 4px; }
.answers__center { display: block; margin-top: 8px; color: #666; font-size: 16px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.answers__center a {}
.answers__center .answers__icon { background-color: #BDC4C8; }
.suggested__legal { margin-top: 50px; }
.law__article { width: 364px; }
.legal__list { margin-top: 20px; }
.legal__item { float: left; width: 364px; margin: 12px 0; }
.legal__item a { display: block; width: 364px; }
.legal__image { float: left; width: 160px; height: 90px; }
.legal__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; }
.legal__con { position: relative; width: 188px; height: 90px; float: right; }
.legal__title { font-size: 16px; color: #333; line-height: 24px; }
.legal__bottom { width: 188px; line-height: 28px; position: absolute; left: 0; bottom: 4px; }
.legal__item .legal__title:hover { color: #1476F9; }
.article__author { color: #999; font-size: 14px; }
.article__author span { float: left; color: #333; margin-right: 6px; text-overflow: ellipsis; max-width: 70px; overflow: hidden; height: 28px; white-space: nowrap; }
.article__author img { float: left; margin-right: 6px; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); padding: 2px; box-sizing: border-box; }
.article__date { color: #999; font-size: 14px; }
.evaluate__list { margin-top: 48px; }
.evaluate__ul { margin-top: 24px; }
.evaluate__li { margin-right: 22px; position: relative; width: 376px; height: 264px; }
.evaluate__li:last-child { margin-right: 0; }
.evaluate__box { position: absolute; top: 0; left: 0; width: 376px; height: 264px; border: 1px solid #EFEFEF; background: #fff; padding: 16px; z-index: 6; box-sizing: border-box; }
.evaluate__li::before { position: absolute; top: 4px; left: 4px; content: ""; width: 376px; height: 264px; background: #EFEFEF; z-index: 5; }
.evaluate__title { line-height: 16px; color: #666; font-size: 14px; }
.evaluate__title .icon { float: left; margin-right: 8px; width: 16px; height: 16px; background: #72ADFB; text-align: center; border-radius: 4px; }
.evaluate__title .icon i { color: #fff; font-size: 12px; }
.evaluate__con { position: relative; padding-left: 26px; font-size: 16px; color: #333; height: 48px; margin-top: 26px; line-height: 24px; }
.evaluate__con::before { position: absolute; top: 0; left: 0; content: "\e7a7"; color: #D9D9D9; font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; }
.evaluate__con::after { position: absolute; bottom: -16px; right: 0; content: "\e7a7"; color: #D9D9D9; font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; transform: rotate(180deg); }
.evaluate__score { margin-top: 22px; }
.evaluate__score .score { margin-left: 10px; margin-right: 24px; }
.evaluate__score .iconfont { font-size: 14px; color: #D9D9D9; }
.evaluate__score .current { color: #FEA03D; }
.evaluate__score .score__txt { font-size: 14px; color: #666; margin-right: 24px; }
.evaluate__score .score__txt:last-child { margin-right: 0; }
.evaluate__lawyer { padding: 16px; margin-top: 24px; width: 344px; height: 80px; background: #F4F4F4; border-radius: 4px; box-sizing: border-box; }
.evaluate__left { width: 48px; height: 48px; border-radius: 50%; }
.evaluate__right { width: 254px; margin-left: 10px; }
.evaluate__name { color: #999; font-size: 16px; }
.evaluate__name span { color: #333; margin-right: 4px; }
.evaluate__good { margin-top: 14px; }
.evaluate__good span { float: left; margin-right: 8px; width: 56px; text-align: center; color: #1476F9; font-size: 12px; line-height: 18px; background: rgba(20, 118, 249, 0.1); border-radius: 2px; }
.evaluate__good span.other { color: #999; font-size: 14px; width: auto; background-color: #F4F4F4; }
.hot__con { margin-top: 48px; padding-top: 20px; border-top: #333 solid 4px; display: flex; flex-wrap: wrap; }
.common__hot { margin-right: 24px; }
.common__hot:last-child { margin-right: 0; }
.hot__list { width: 376px; padding: 8px 0 14px; margin-top: 24px; height: 742px; background: #F4F4F4; box-sizing: border-box; }
.hot__li { position: relative; padding: 16px 20px; width: 376px; height: 72px; box-sizing: border-box; display: flex; }
.hot__number { line-height: 40px; color: #999; font-size: 14px; margin-right: 20px; }
.hot__number.hot__top { color: #1476F9; }
.hot__avatar { display: block; margin-right: 22px; width: 40px; height: 40px; }
.hot__avatar img { width: 100%; height: 100%; border-radius: 4px; }
.hot__right { width: 224px; }
.hot__name { margin-top: 12px; color: #111; font-size: 16px; transition: all .1s ease; white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.hot__state { margin-top: 10px; display: none; color: #999; font-size: 14px; }
.hot__state i { font-size: 16px; margin-right: 4px; color: #BDC4C8; }
.hot__right-r { line-height: 40px; width: 90px; margin-left: 32px; color: #999; font-size: 14px; text-align: right; white-space: nowrap; }
.hot__right-r span { color: #ED6F21; }
.hot__btn { display: none; position: absolute; bottom: 24px; right: 36px; width: 80px; text-align: center; font-size: 14px; color: #fff; line-height: 24px; background: #1476F9; border-radius: 12px; }
.hot__btn:hover { color: #fff; background: rgba(20, 118, 249, 0.7); }
.hot__li:hover { background: #EAEAEA; }
.hot__li:hover .hot__btn { display: block; }
.hot__li:hover .hot__right-r { display: none; }
.hot__li:hover .hot__name { margin-top: 0; }
.hot__li:hover .hot__state { display: block; }
.month__hot .hot__top { color: #ED6F21; }
.all__hot .hot__name { margin-top: 0; }
.all__hot .hot__state { display: block; }
.all__hot .hot__btn { display: block; }
.bottom__label { border-top: #EFEFEF solid 1px; padding-top: 36px; margin-top: 54px; display: flex; justify-content: space-evenly; flex-wrap: wrap; }
.bottom__label li { line-height: 54px; }
.bottom__label li:nth-child(2) { text-align: center; }
/* .bottom__label li:last-child { text-align: right; } */
.bottom__label li span { color: #666; font-size: 18px; font-weight: bold; }
.bottom__label li img { display: inline-block; margin-right: 16px; width: 54px; height: 54px; }
.judge_search { width: 560px; box-sizing: border-box; z-index: 10000; }
.judge_search dl.dl3 { width: 280px; }
.judge_search dl.dl4 { width: 210px; }
.judge_search dl dd { cursor: pointer; }
input::-webkit-input-placeholder { color: #c1c1c1; font-size: 16px; }