body {
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit
}

a:hover {
    text-decoration: none;
    color: inherit
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 0
}

.flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-align-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.hide-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 0
}

.pdt50 {
    padding-top: 50px
}

.pdt56 {
    padding-top: 56px
}

.pdt70 {
    padding-top: 70px
}

.pdb30 {
    padding-bottom: 30px
}

.pdb50 {
    padding-bottom: 50px
}

.footer-main-info {
    margin-top: 0;
    border-top: 47px solid #fff
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.nowrap2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.bg9 {
    background: #f9f9f9
}

.bgw {
    background: #fff
}

.logo-bar {
    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, .07);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, .07)
}

.container {
    width: 1200px;
    margin: 0 auto
}

.national-main {
    position: relative;
    background: #fff;
    overflow: hidden
}

.input-city-container .city-content .city-content-item a {
    font-family: 'PingFangSC-Regular', 'Microsoft YaHei', Helvetica, Arial, sans-serif
}

.national-header {
    position: relative;
    height: 416px;
    width: 100%;
    background: #f9f9f9
}

.national-header .container {
    position: relative;
    z-index: 2
}

.national-header .nh-l,
.national-header .nh-r {
    position: absolute;
    width: 50%;
    height: 100%;
    display: block;
    top: 0;
    z-index: 3
}

.national-header .nh-l {
    left: 0;
    margin-left: -600px
}

.national-header .nh-r {
    right: 0;
    margin-right: -600px
}

.national-area {
    position: relative;
    z-index: 2;
    width: 240px;
    height: 416px;
    background-color: #fff
}

.national-area .area-con {
    padding-top: 40px;
    text-align: center
}

.national-area .icon-info {
    width: 120px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    line-height: 36px;
    cursor: pointer;
    margin: 0 auto
}

.national-area .icon-info:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../image/area_icon.png) center center/100% auto no-repeat;
    margin-right: 10px
}

.national-area .icon-info:hover {
    text-decoration: underline
}

.national-area .enter-area {
    margin-top: 12px;
    margin-bottom: 36px;
    text-align: center
}

.national-area .enter-area .btn {
    background: var(--primary-color);
    margin: 0 46px;
    height: 42px;
    line-height: 42px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    border-radius: 30px;
    -webkit-transition: .4s;
    transition: .4s;
    font-weight: 700
}

.national-area .enter-area .btn:hover {
    text-decoration: none;
    opacity: .8
}

.national-area .enter-area .btn:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url(../image/area_arr.png) center center/100% auto no-repeat
}

.input-city-container {
    display: none;
    width: 450px;
    height: auto;
    padding-bottom: 20px;
    background-color: #fff;
    position: absolute;
    left: 100%;
    top: 20px;
    margin-top: -1px;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);
    border: 1px solid #dcdcdc;
    z-index: 59
}

.input-city-container.active {
    display: block
}

.input-city-container .city-title {
    height: 36px;
    line-height: 36px;
    background-color: #f7f7f7;
    padding-left: 10px;
    font-size: 14px;
    color: #858585
}

.input-city-container .city-title .now-city {
    color: #555
}

.input-city-container .city-title .close-city {
    width: 36px;
    height: 36px;
    cursor: pointer;
    float: right;
    display: block;
    background: transparent url(../image/icon-close.png) center no-repeat
}

.input-city-container .city-tab {
    height: 36px;
    padding: 0 15px;
    border-bottom: 1px solid #eee
}

.input-city-container .city-tab .city-tab-item {
    display: block;
    float: left;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    color: #858585;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s
}

.input-city-container .city-tab .city-tab-item.active {
    border-bottom-color: #6cac36;
    color: #6cac36
}

.input-city-container .city-content {
    display: block;
    padding: 0 15px
}

.input-city-container .city-content .city-content-item {
    display: none;
    width: 100%;
    height: 100%
}

.input-city-container .city-content .city-content-item:after {
    content: '.';
    display: block;
    visibility: hidden;
    clear: both;
    width: 100%;
    height: 0;
    font-size: 0;
    zoom: 1
}

.input-city-container .city-content .city-content-item .list-main {
    float: left;
    width: 360px
}

.input-city-container .city-content .city-content-item .list-main:after {
    content: '.';
    display: block;
    visibility: hidden;
    clear: both;
    width: 100%;
    height: 0;
    font-size: 0;
    zoom: 1
}

.input-city-container .city-content .city-content-item .list-main li {
    display: block
}

.input-city-container .city-content .city-content-item .list-main li:after {
    content: '.';
    display: block;
    visibility: hidden;
    clear: both;
    width: 100%;
    height: 0;
    font-size: 0;
    zoom: 1
}

.input-city-container .city-content .city-content-item .list-main li span {
    display: block;
    float: left;
    width: 20px;
    color: #666;
    margin-top: 10px;
    line-height: 20px;
    font-weight: 700;
    height: 20px;
    font-size: 12px
}

.input-city-container .city-content .city-content-item .list-main li p {
    display: block;
    width: 400px;
    float: left
}

.input-city-container .city-content .city-content-item a {
    font-size: 12px;
    display: block;
    margin-top: 10px;
    float: left;
    width: 58px;
    height: 20px;
    font-family: simsun;
    line-height: 20px;
    text-indent: 5px;
    color: #666;
    border-radius: 2px;
    -webkit-transition: all .25s;
    transition: all .25s;
    cursor: pointer;
    overflow: hidden
}

.input-city-container .city-content .city-content-item a a.active,
.input-city-container .city-content .city-content-item a:hover {
    background-color: #72b539;
    color: #fff
}

.input-city-container .city-content .city-content-item.hot-list .list-main {
    width: 100%
}

.input-city-container .city-content .city-content-item.active {
    display: block
}

.input-city-container.active {
    display: block
}

.side-main {
    padding: 24px 0;
    margin: 0 24px;
    position: relative;
    border-top: 1px solid #eee
}

.side-main .side-header {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #333;
    position: relative
}

.side-main .side-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -14px
}

.side-main .side-links .link {
    display: block;
    margin-top: 16px;
    margin-right: 12px;
    width: 38px;
    height: 14px;
    line-height: 14px;
    color: #666;
    cursor: pointer;
    overflow: hidden
}

.side-main .side-links .link:hover {
    color: var(--primary-color)
}

.side-main .side-links.address-link .link {
    width: 42px
}

.side-main .side-links.address-link .link:hover {
    color: var(--primary-color)
}

.side-main .more-btn {
    padding-right: 8px;
    margin-right: 0 !important
}

.side-right-card {
    position: absolute;
    z-index: 10;
    top: -10px;
    left: calc(100% + 45px);
    background: #fff;
    width: 320px;
    min-height: 130px;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .12);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .12);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .5s;
    transition: all .5s;
    padding: 24px 0 4px 24px;
    border-radius: 6px
}

.side-right-card.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px)
}

.side-right-card:before {
    content: '';
    border-right: 8px solid #fff;
    border-bottom: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid rgba(0, 0, 0, 0);
    position: absolute;
    top: 60px;
    left: -8px
}

.side-right-card .links-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.side-right-card .links {
    margin: 0 30px 20px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 14px;
    color: #333
}

.side-right-card .links:hover {
    color: #00997d !important
}

.national-banner {
    position: relative;
    width: 718px
}

.banner-label {
    position: absolute;
    top: 9px;
    left: 50%;
    margin-left: -361px;
    width: 114px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #6cac36;
    background-image: -webkit-gradient(linear, right top, left top, from(#6cac36), to(#a1c74e));
    background-image: linear-gradient(270deg, #6cac36 0%, #a1c74e 100%);
    border-radius: 0 15px 15px 0;
    -webkit-box-shadow: 0px 2px 6px 0px #416821;
    box-shadow: 0px 2px 6px 0px #416821
}

.banner-con {
    position: relative;
    height: 278px
}

.banner-con .banner_list {
    position: absolute;
    height: 416px;
    width: 1920px;
    left: -50%;
    margin-left: -240px;
    text-align: center
}

.banner-con .banner_list .bl {
    position: absolute;
    left: 0;
    right: 0
}

.banner-con .banner-tab {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    background: rgba(255, 255, 255, .7);
    color: #666;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.banner-con .banner-tab span {
    min-width: 89px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: .4s;
    transition: .4s
}

.banner-con .banner-tab span.active {
    color: #fff;
    background: #999;
    background: rgba(102, 102, 102, .7)
}

.law-five-wl {
    position: relative;
    background: #eee;
    height: 138px;
    z-index: 1
}

.law-five-list .item {
    float: left;
    position: relative;
    width: 178px;
    height: 138px;
    background: #fff;
    margin-left: 1px
}

.law-five-list .item:last-child {
    border-right: 1px solid #fff
}

.law-five-list .item.default {
    background: url(../image/none01.png) 0 0/100% auto no-repeat;
    text-align: center;
    font-size: 12px;
    color: #333;
    font-weight: 500;
    line-height: 1
}

.law-five-list .item.default .atl {
    font-size: 14px;
    padding-top: 46px;
    margin-bottom: 8px
}

.law-five-list .item.default .aphone {
    font-size: 16px
}

.law-five-list .law-img {
    position: relative;
    display: block;
    width: 100%;
    height: 138px
}

.law-five-list .law-img img {
    display: block;
    width: 100%;
    height: 138px
}

.law-five-list .info {
    display: block;
    line-height: 17px;
    position: absolute;
    top: 26px;
    left: 103px;
    color: #999;
    font-size: 12px
}

.law-five-list .info strong {
    display: block;
    width: 64px;
    line-height: 20px;
    color: #333;
    font-size: 14px;
    margin-bottom: 1px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.law-five-list .info em {
    line-height: 1.2
}

.law-five-list .pop-box {
    display: none;
    position: absolute;
    z-index: 10;
    width: 440px;
    padding-top: 2px
}

.law-five-list .pop-box.pop-box-left {
    left: 0
}

.law-five-list .pop-box.pop-box-right {
    right: 0
}

.law-five-list .pop-box .pop-inner {
    padding: 18px 20px 30px;
    background: #fff;
    -webkit-box-shadow: 0 0 16px -2px rgba(0, 0, 0, .2);
    box-shadow: 0 0 16px -2px rgba(0, 0, 0, .2)
}

.law-five-list .pop-box .img-box {
    display: block;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 18px;
    border: 2px solid #ddd;
    margin-left: 8px
}

.law-five-list .pop-box .img-box img {
    display: block;
    width: 82px;
    height: 82px;
    border-radius: 50%
}

.law-five-list .pop-box .p-rigint-cont {
    width: 270px;
    line-height: 26px;
    margin-top: 15px
}

.law-five-list .pop-box .law-box {
    font-size: 12px;
    color: #bfbfbf
}

.law-five-list .pop-box .law-box .law-name-p {
    font-size: 18px;
    color: #333;
    margin-right: 10px
}

.law-five-list .pop-box .law-box .law-name-p:hover {
    color: #ff7b2b
}

.law-five-list .pop-box .address {
    color: #999;
    font-size: 12px
}

.law-five-list .pop-box .good-for {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.law-five-list .pop-box .p-bottom {
    position: relative;
    margin-top: 20px;
    line-height: 30px
}

.law-five-list .pop-box .phone-p {
    font-size: 22px;
    color: #333
}

.law-five-list .pop-box .help-box {
    font-size: 14px;
    color: #666
}

.law-five-list .pop-box .help-box span {
    padding-right: 10px
}

.law-five-list .pop-box .green {
    color: #6cac36
}

.law-five-list .pop-box .red {
    color: #f94d4d
}

.law-five-list .pop-box .font {
    font-style: normal;
    font-weight: 600;
    font-size: 14px
}

.law-five-list .pop-box .zx-btn {
    display: inline-block;
    width: 86px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #ff7b2b;
    border-radius: 13px;
    color: #fff;
    font-size: 14px;
    margin-top: 2px;
    -webkit-transition: .4s;
    transition: .4s
}

.law-five-list .pop-box .zx-btn:hover {
    text-decoration: none;
    background: #ffa800
}

.national-hl {
    position: relative;
    z-index: 2;
    width: 242px
}

.national-hl .gg-nor {
    position: relative;
    width: 242px;
    height: 138px;
    overflow: hidden;
    border-bottom: 1px solid #eee
}

.national-hl .gg-nor .txt-link {
    position: absolute;
    display: block;
    left: 24px;
    top: 38px;
    color: #999;
    line-height: 1;
    -webkit-transition: .4s;
    transition: .4s
}

.national-hl .gg-nor .txt-link:hover {
    text-decoration: none
}

.national-hl .gg-nor .txt-link .tl {
    line-height: 1;
    font-size: 14px;
    color: #bfbfbf;
    margin-bottom: 8px
}

.national-hl .gg-nor .txt-link .name {
    color: #333;
    font-size: 18px
}

.national-hl .gg-nor .txt-link .mobile {
    margin-top: 24px;
    font-size: 14px;
    color: #999;
    -webkit-transition: .4s;
    transition: .4s
}

.national-hl .gg-nor .btn-link {
    position: absolute;
    display: block;
    left: 30px;
    bottom: -50px;
    width: 72px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #6cac36;
    border-radius: 11px;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.national-hl .gg-nor .btn-link:hover {
    text-decoration: none;
    background: #629c31
}

.national-hl .gg-nor.gg-right .txt-link {
    left: 112px
}

.national-hl .gg-nor.gg-right .btn-link {
    left: 110px
}

.national-hl .gg-nor:hover .txt-link {
    top: 20px
}

.national-hl .gg-nor:hover .mobile {
    margin-top: 10px
}

.national-hl .gg-nor:hover .btn-link {
    bottom: 20px;
    opacity: 1
}

.national-hl .gg-none {
    display: block;
    height: 138px;
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(#f2e8d9));
    background: linear-gradient(90deg, #fff 0%, #f2e8d9 100%);
    border-bottom: 1px solid #eee
}

.national-hl .gg-none:nth-child(2) {
    background: -webkit-gradient(linear, left top, right top, from(#f2e8d9), to(#fff));
    background: linear-gradient(90deg, #f2e8d9 0%, #fff 100%)
}

.national-hl .gg-none:nth-child(2) .gg-tl:before {
    background-position: center -128px
}

.national-hl .gg-none .gg-tl {
    padding-top: 28px;
    line-height: 16px;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 600
}

.national-hl .gg-none .gg-tl:before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 14px;
    background: url(../image/save_icon.png) center -96px/32px auto no-repeat
}

.national-hl .gg-none .gg-txt {
    text-align: center;
    line-height: 1;
    font-size: 12px;
    color: #666
}

.save_block {
    position: relative;
    height: 138px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ebeff2)), #fff;
    background: linear-gradient(180deg, #fff 0%, #ebeff2 100%), #fff
}

.save_block:hover .save_btn {
    bottom: 41px;
    opacity: 1
}

.save_block:hover .save_three {
    display: none
}

.save_block .save_tl {
    line-height: 23px;
    text-align: center;
    font-size: 16px;
    color: #303741;
    font-weight: 600;
    padding-top: 18px
}

.save_block .save_three {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 17px;
    color: #333;
    text-align: center;
    padding: 16px 10px 0
}

.save_block .save_three .sitem {
    margin: 0 9px
}

.save_block .save_three .sitem:before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    background: url(../image/save_icon.png) 0 0/32px auto no-repeat
}

.save_block .save_three .sitem.icon02:before {
    background-position: 0 -32px
}

.save_block .save_three .sitem.icon03:before {
    background-position: 0 -64px
}

.save_block .save_btn {
    position: absolute;
    left: 53px;
    right: 53px;
    bottom: 37px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%);
    border-radius: 20px;
    font-size: 16px;
    color: #fff;
    display: block;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.save_block .save_btn:hover {
    opacity: .7
}

.lawyer-list {
    width: 100%;
    padding-bottom: 20px
}

.lawyer-list .item {
    position: relative;
    margin-left: 21px;
    width: 386px;
    height: 144px;
    color: #fff;
    background: linear-gradient(234.79deg, #a6bfb9 0%, #83a69e 100%)
}

.lawyer-list .item:first-child {
    margin-left: 0
}

.lawyer-list .item:hover .btn {
    opacity: 1;
    bottom: 16px
}

.lawyer-list .item:hover .btn:hover {
    opacity: .8
}

.lawyer-list .item:nth-child(2) {
    background: linear-gradient(230.65deg, #9bb8cc 0%, #7197ab 100%)
}

.lawyer-list .item:nth-child(3) {
    background: linear-gradient(133.94deg, #ba9063 0%, #ccae91 100%)
}

.lawyer-list .item.default {
    text-align: center;
    background: url(../image/none02.png) left center/100% 100% no-repeat
}

.lawyer-list .item.default .dtl {
    padding-top: 28px;
    line-height: 24px;
    font-size: 20px;
    color: #666
}

.lawyer-list .item.default .ddesc {
    line-height: 1;
    font-size: 12px;
    color: #666;
    margin-top: 12px
}

.lawyer-list .item.default .dphone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 18px;
    font-size: 18px;
    color: #666;
    margin-top: 20px
}

.lawyer-list .item.default .dphone:before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background: url(../image/phone_icon02.png) center center/13px auto no-repeat;
    margin-right: 8px
}

.lawyer-list .item .img {
    position: absolute;
    display: block;
    width: 116px;
    right: 0;
    top: 0
}

.lawyer-list .item .law_box {
    padding-left: 30px;
    padding-top: 20px;
    padding-right: 100px
}

.lawyer-list .item .la_tlt {
    color: #fff;
    line-height: 1;
    font-size: 18px;
    font-weight: 700
}

.lawyer-list .item .la_tlt .l_txt {
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 400;
    margin-top: 6px;
    margin-left: 8px
}

.lawyer-list .item .adesc {
    line-height: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    margin-top: 8px
}

.lawyer-list .item .prof {
    margin-left: -4px
}

.lawyer-list .item .prof .ftag {
    margin-top: 8px;
    margin-left: 4px;
    background: rgba(0, 0, 0, .1);
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    font-size: 12px;
    color: #fff;
    border-radius: 2px
}

.lawyer-list .item .phone {
    height: 18px;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin-top: 16px
}

.lawyer-list .item .phone:before {
    content: '';
    display: block;
    width: 12px;
    height: 13px;
    margin-right: 6px;
    background: url(../image/phone_icon.png) center center/12px auto no-repeat
}

.lawyer-list .item .btn {
    position: absolute;
    left: 189px;
    bottom: 10px;
    display: block;
    width: 70px;
    height: 26px;
    line-height: 26px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    font-weight: 500;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%)
}

.lawyer-list .item1 {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 114px;
    background: url(../image/one_a.jpg) no-repeat
}

.lawyer-list .item1:hover {
    color: inherit
}

.lawyer-list .item1 .fimg {
    position: absolute;
    display: block;
    width: 116px;
    height: 114px;
    left: 112px;
    top: 0
}

.lawyer-list .item1 .namebox {
    position: absolute;
    left: 228px;
    top: 34px
}

.lawyer-list .item1 .namebox .name {
    line-height: 28px;
    color: #333;
    font-size: 20px;
    width: 130px;
    font-weight: 700;
    margin-bottom: 4px
}

.lawyer-list .item1 .namebox .area {
    line-height: 14px;
    font-size: 14px;
    color: #666;
    width: 130px
}

.lawyer-list .item1 .prof {
    position: absolute;
    left: 414px;
    top: 25px;
    width: 472px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: 500
}

.lawyer-list .item1 .desc {
    position: absolute;
    left: 400px;
    right: 285px;
    top: 71px;
    line-height: 16px;
    text-align: center;
    color: #333;
    font-size: 14px
}

.lawyer-list .item1 .phonebox {
    position: absolute;
    right: 110px;
    top: 30px;
    text-align: center
}

.lawyer-list .item1 .phonebox .phone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    height: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.lawyer-list .item1 .phonebox .phone:before {
    content: '';
    display: block;
    background-image: url(../image/phone_icon03.png);
    background-position: center center;
    background-size: 100% auto;
    width: 12px;
    height: 13px;
    margin-right: 6px
}

.lawyer-list .item1 .phonebox .abtn {
    position: relative;
    z-index: 2;
    display: block;
    width: 96px;
    height: 32px;
    margin: 12px auto 0;
    line-height: 32px;
    text-align: center;
    border-radius: 96px;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%);
    font-size: 16px;
    color: #fff;
    font-weight: 500
}

.lawyer-list .item1 .phonebox .abtn:hover {
    opacity: .7
}

.nor-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 28px;
    line-height: 1;
    margin-bottom: 30px
}

.nor-header .tl {
    color: #999;
    font-size: 14px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.nor-header .tl strong {
    color: #222;
    font-size: 28px;
    margin-right: 16px;
    font-weight: 600
}

.nor-header .h_tl .otherBtn {
    width: 88px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500
}

.nor-header .h_tl .otherBtn:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url(../image/refresh_icon.png) center center/100% auto no-repeat;
    margin-right: 4px;
    -webkit-transition: .4s;
    transition: .4s
}

.nor-header .h_tl .otherBtn:hover:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.nor-header .link {
    font-size: 14px;
    color: #666
}

.nor-header .link:hover {
    color: var(--primary-color)
}

.consult_mainlr .tl {
    line-height: 20px;
    font-size: 20px;
    color: #333;
    font-weight: 600
}

.consult_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 810px;
    margin-right: 30px
}

.swiper-pagination {
    position: absolute;
    bottom: auto;
    left: auto;
    width: auto;
    right: 24px;
    top: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.swiper-pagination .swiper-pagination-switch {
    cursor: pointer;
    margin: 0 4px;
    display: block;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    opacity: 1
}

.swiper-pagination .swiper-active-switch {
    background: var(--primary-color)
}

.swiper_box {
    position: relative;
    padding: 30px 30px 8px
}

.swiper_box .swiper-container {
    height: 331px
}

.swiper_box .swiper-pagination {
    right: 24px;
    top: 36px
}

.swiper-list {
    font-size: 12px;
    color: #999;
    line-height: 14px
}

.swiper-list .item {
    padding: 32px 0;
    border-bottom: 1px solid #eee
}

.swiper-list .item:last-child {
    border-bottom: none
}

.swiper-list .item .link {
    color: #333;
    font-size: 18px;
    line-height: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    margin-right: 20px
}

.swiper-list .item .link a:hover {
    color: var(--primary-color)
}

.mt20 {
    margin-top: 20px
}

.consult_bottom {
    position: relative;
    height: 156px;
    background: url(../image/consult_bottom.png) center center/100% auto no-repeat
}

.consult_bottom:before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 8px;
    background: url(../image/bottom_icon.png) center center/100% auto no-repeat
}

.consult_bottom .consult_lawyer {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.consult_bottom .consult_lawyer .ctl {
    line-height: 24px;
    color: #333;
    font-weight: 600;
    font-size: 23px;
    margin-bottom: 15px
}

.consult_bottom .consult_lawyer .green {
    color: #00997d
}

.consult_bottom .consult_lawyer .lclist .litem {
    position: relative;
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    color: #106152;
    font-weight: 500;
    padding-right: 56px
}

.consult_bottom .consult_lawyer .lclist .litem:last-child {
    padding-right: 0
}

.consult_bottom .consult_lawyer .lclist .litem:last-child:after {
    display: none
}

.consult_bottom .consult_lawyer .lclist .litem:after {
    content: '';
    display: block;
    position: absolute;
    right: 12px;
    top: 1px;
    width: 34px;
    height: 17px;
    background: url(../image/consult_arr.png) center center/100% auto no-repeat
}

.consult_bottom .ques_list {
    position: relative;
    width: 255px;
    margin-right: 36px;
    height: 40px;
    border: 2px solid #00b594;
    border-radius: 12px;
    background: #fff
}

.consult_bottom .ques_list .ques_txt {
    padding-left: 14px;
    font-size: 14px;
    line-height: 1;
    color: #999;
    line-height: 40px
}

.consult_bottom .ques_list .ques_btn {
    position: absolute;
    display: block;
    width: 100px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: #00b594;
    border-radius: 13px;
    color: #fff;
    top: -2px;
    right: -2px
}

.consult_right {
    width: 320px;
    padding: 32px 20px 0
}

.lates-list {
    position: relative;
    margin-top: 30px;
    height: 483px
}

.lates-list:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, transparent), color-stop(55%, #fff));
    background: linear-gradient(to bottom, transparent 15%, #fff 55%)
}

.lates-list .latest-ans-item {
    width: 320px;
    height: 109px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    padding: 6px 0 0 36px
}

.lates-list .latest-ans-item:before {
    content: '';
    width: 1px;
    height: calc(100% - 14px);
    background: #eee;
    position: absolute;
    left: 14px;
    bottom: 0
}

.lates-list .latest-ans-item .lawyer-img-box {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eee;
    top: 0;
    left: 0
}

.lates-list .latest-ans-item .lawyer-img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.lates-list .latest-ans-item .lawyer-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px
}

.lates-list .latest-ans-item .mr {
    font-weight: 400;
    margin-left: 20px;
    font-size: 12px;
    color: #999
}

.lates-list .latest-ans-item .lawyer-content {
    line-height: 1;
    font-size: 14px
}

.lates-list .latest-ans-item .title {
    color: #999
}

.lates-list .latest-ans-item .content {
    color: #333;
    line-height: 24px
}

.lates-list .latest-ans-item .content:hover {
    color: var(--primary-color)
}

.lates-list .latest-ans-item a:hover {
    color: var(--primary-color)
}

.hot_lawyer {
    margin-left: -20px
}

.hot_lawyer .hitem {
    position: relative;
    margin-left: 20px;
    width: 560px;
    height: 260px;
    background: url(../image/lawyer_bg.jpg) no-repeat;
    padding-left: 30px
}

.hot_lawyer .hitem:hover .btn {
    opacity: 1;
    bottom: 33px
}

.hot_lawyer .hitem:hover .btn:hover {
    opacity: .8
}

.hot_lawyer .hitem.default {
    padding-left: 0;
    width: 590px;
    text-align: center;
    background: url(../image/none03.png) no-repeat
}

.hot_lawyer .hitem.default .dtl {
    padding-top: 68px;
    line-height: 24px;
    font-size: 24px;
    color: #666
}

.hot_lawyer .hitem.default .ddesc {
    line-height: 1;
    font-size: 14px;
    color: #666;
    margin-top: 20px
}

.hot_lawyer .hitem.default .dphone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 18px;
    font-size: 16px;
    color: #666;
    margin-top: 41px
}

.hot_lawyer .hitem.default .dphone:before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background: url(../image/phone_icon02.png) center center/13px auto no-repeat;
    margin-right: 8px
}

.hot_lawyer .img_box {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 220px;
    height: 260px
}

.hot_lawyer .img_box .img {
    display: block;
    width: 100%
}

.hot_lawyer .tl {
    height: 24px;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    padding-top: 44px;
    width: 316px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.hot_lawyer .tl .name {
    color: #fff;
    font-size: 24px;
    margin-right: 12px;
    font-weight: 500
}

.hot_lawyer .desc {
    width: 316px;
    line-height: 20px;
    margin-top: 16px;
    font-size: 14px;
    color: #fff
}

.hot_lawyer .serinfo {
    line-height: 14px;
    font-size: 14px;
    color: #fff;
    margin-top: 16px
}

.hot_lawyer .serinfo .green {
    color: #22e39f;
    font-weight: 500
}

.hot_lawyer .phone {
    height: 18px;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin-top: 32px
}

.hot_lawyer .phone:before {
    content: '';
    display: block;
    width: 12px;
    height: 13px;
    margin-right: 6px;
    background: url(../image/phone_icon.png) center center/12px auto no-repeat;
    opacity: .6
}

.hot_lawyer .btn {
    position: absolute;
    left: 262px;
    bottom: 29px;
    display: block;
    width: 96px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%);
    border-radius: 30px;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0
}

.newsletter .list {
    margin-left: -21px;
    height: 158px;
    overflow: hidden
}

.newsletter .item {
    float: left;
    width: 386px;
    height: 158px;
    padding: 24px 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 21px;
    background: #f9f9f9;
    -webkit-transition: .4s;
    transition: .4s;
    display: none
}

.newsletter .title {
    line-height: 1;
    font-size: 18px;
    color: #333;
    font-weight: 500
}

.newsletter .title:hover {
    color: var(--primary-color)
}

.newsletter .title a:hover {
    color: var(--primary-color)
}

.newsletter .desc {
    margin-top: 16px;
    line-height: 22px;
    font-size: 14px;
    color: #666
}

.newsletter .bot {
    line-height: 1;
    font-size: 12px;
    margin-top: 20px
}

.pro_lawyer {
    margin-left: -21px
}

.pro_lawyer .item {
    position: relative;
    height: 312px;
    width: 386px;
    margin-left: 21px;
    background: url(../image/lawyer_bg02.jpg) no-repeat;
    -webkit-box-shadow: 0px 6px 20px rgba(0, 0, 0, .03);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, .03)
}

.pro_lawyer .item:hover .btn {
    bottom: 159px;
    opacity: 1
}

.pro_lawyer .item:hover .btn:hover {
    opacity: .8
}

.pro_lawyer .item:hover .phone {
    display: none
}

.pro_lawyer .item.default {
    text-align: center;
    background: url(../image/none04.png) no-repeat
}

.pro_lawyer .item.default .dtl {
    padding-top: 80px;
    line-height: 24px;
    font-size: 24px;
    color: #666
}

.pro_lawyer .item.default .ddesc {
    width: 200px;
    margin: 0 auto;
    line-height: 22px;
    font-size: 14px;
    color: #666;
    margin-top: 24px
}

.pro_lawyer .item.default .dphone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 18px;
    font-size: 16px;
    color: #666;
    margin-top: 36px
}

.pro_lawyer .item.default .dphone:before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background: url(../image/phone_icon02.png) center center/13px auto no-repeat;
    margin-right: 8px
}

.pro_lawyer .img_box {
    position: absolute;
    right: 14px;
    top: 0;
    display: block;
    width: 166px;
    height: 190px;
    overflow: hidden
}

.pro_lawyer .img_box .img {
    display: block;
    width: 100%
}

.pro_lawyer .tl {
    padding-top: 50px;
    padding-left: 30px;
    line-height: 24px;
    font-size: 24px;
    font-weight: 500;
    color: #fff
}

.pro_lawyer .label {
    padding-left: 30px;
    line-height: 1;
    margin-top: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .6)
}

.pro_lawyer .phone {
    height: 18px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    margin-top: 28px;
    padding-left: 30px
}

.pro_lawyer .phone:before {
    content: '';
    display: block;
    width: 12px;
    height: 13px;
    margin-right: 6px;
    background: url(../image/phone_icon.png) center center/12px auto no-repeat;
    opacity: .6
}

.pro_lawyer .bot {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: #fff;
    padding: 20px 18px;
    height: 124px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.pro_lawyer .bot:before {
    content: '';
    display: block;
    position: absolute;
    right: 3px;
    top: -6px;
    width: 66px;
    height: 8px;
    background: -webkit-gradient(linear, right top, left top, from(#ffd154), to(rgba(255, 209, 84, 0)));
    background: linear-gradient(270deg, #ffd154 0%, rgba(255, 209, 84, 0) 100%)
}

.pro_lawyer .prof_flex {
    margin-left: -4px
}

.pro_lawyer .prof_flex .tag {
    margin-left: 4px;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    background: rgba(153, 71, 0, .1);
    font-size: 12px;
    color: #612f03
}

.pro_lawyer .desc {
    line-height: 22px;
    font-size: 14px;
    color: #333;
    margin-top: 16px
}

.pro_lawyer .btn {
    position: absolute;
    left: 30px;
    bottom: 150px;
    display: block;
    width: 96px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%);
    border-radius: 30px;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0
}

.newlaw-list {
    line-height: 1;
    font-size: 18px;
    color: #333
}

.newlaw-list .item {
    margin-left: 30px;
    cursor: pointer
}

.newlaw-list .item.active {
    font-weight: 600;
    color: var(--primary-color)
}

.newlawy {
    margin-left: -21px
}

.newlawy .item {
    position: relative;
    margin-left: 21px;
    padding: 20px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 386px;
    height: 420px
}

.newlawy .item.label_main {
    padding-top: 0
}

.newlawy .item.label_main .label_item {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px
}

.newlawy .item.label_main .label_item.active .ltl {
    font-weight: 500
}

.newlawy .item.label_main .label_item.active .ltl:before {
    background: #26b0ff
}

.newlawy .item.label_main .label_item.active .ldesc {
    display: block
}

.newlawy .item.label_main .label_item:last-child {
    padding-bottom: 0;
    border-bottom: none
}

.newlawy .item.label_main .ltl {
    line-height: 28px;
    position: relative;
    font-size: 16px;
    color: #333;
    padding-left: 18px;
    margin-bottom: 8px
}

.newlawy .item.label_main .ltl a:hover {
    color: var(--primary-color)
}

.newlawy .item.label_main .ltl:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    margin-top: -4px
}

.newlawy .item.label_main .ldesc {
    display: none;
    line-height: 22px;
    color: #666;
    height: 44px;
    margin-bottom: 16px
}

.newlawy .item.label_main .lbot {
    line-height: 1;
    font-size: 12px;
    color: #999
}

.newlawy .item.label_main .lbot .ml17 {
    margin-left: 17px
}

.newlawy .img_box {
    display: block;
    width: 346px;
    height: 230px;
    overflow: hidden
}

.newlawy .img_box .img {
    width: 100%;
    display: block
}

.newlawy .tl {
    line-height: 1;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    margin-top: 28px
}

.newlawy .tl a:hover {
    color: var(--primary-color)
}

.newlawy .desc {
    line-height: 22px;
    color: #666;
    font-size: 14px;
    margin-top: 16px
}

.newlawy .bot {
    line-height: 1;
    font-size: 12px;
    margin-top: 20px;
    color: #999
}

.newlaw-con .newlaw-box {
    display: none
}

.newlaw-con .newlaw-box:first-child {
    display: block
}

.new_btn {
    padding-top: 32px;
    text-align: center
}

.new_btn .btn {
    display: inline-block;
    width: 164px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    background: #fff;
    border-radius: 30px
}

.new_btn .btn:hover {
    color: var(--primary-color)
}

.prof_list {
    margin-left: -24px
}

.prof_list .pitem {
    position: relative;
    height: 360px;
    width: 282px;
    background-color: #f9f9f9;
    overflow: hidden;
    margin-left: 24px
}

.prof_list .pitem:hover .prof_bot {
    padding-bottom: 74px
}

.prof_list .pitem:hover .prof {
    opacity: 0
}

.prof_list .pitem:hover .pdesc {
    opacity: 1
}

.prof_list .pitem:hover .p_btn {
    bottom: 17px;
    opacity: 1
}

.prof_list .pitem:hover .p_btn:hover {
    opacity: .8
}

.prof_list .pitem.default {
    text-align: center;
    background: url(../image/none05.png) no-repeat
}

.prof_list .pitem.default .dtl {
    padding-top: 104px;
    line-height: 24px;
    font-size: 24px;
    color: #666
}

.prof_list .pitem.default .ddesc {
    width: 200px;
    margin: 0 auto;
    line-height: 22px;
    font-size: 14px;
    color: #666;
    margin-top: 24px
}

.prof_list .pitem.default .dphone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 18px;
    font-size: 16px;
    color: #666;
    margin-top: 36px
}

.prof_list .pitem.default .dphone:before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background: url(../image/phone_icon02.png) center center/13px auto no-repeat;
    margin-right: 8px
}

.prof_list .plink {
    display: block;
    width: 282px;
    height: 212px;
    overflow: hidden
}

.prof_list .plink .img {
    display: block;
    width: 100%
}

.prof_list .prof_bot {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 20px 62px;
    width: 242px;
    height: 86px;
    background-color: #f9f9f9;
    -webkit-transition: .4s;
    transition: .4s
}

.prof_list .prof_bot .prof_name {
    padding-top: 20px;
    line-height: 14px;
    font-size: 14px;
    color: #999
}

.prof_list .prof_bot .ptl {
    margin-right: 8px;
    font-size: 20px;
    line-height: 28px;
    color: #333;
    font-weight: 500
}

.prof_list .prof_bot .label {
    margin-top: 9px
}

.prof_list .prof_bot .prof {
    margin-left: -4px
}

.prof_list .prof_bot .pfi {
    margin-left: 4px;
    margin-top: 12px;
    height: 26px;
    line-height: 26px;
    background-color: #fff;
    padding: 0 6px;
    font-size: 14px;
    color: #666;
    border-radius: 2px
}

.prof_list .prof_bot .pdesc {
    position: absolute;
    left: 20px;
    top: 60px;
    right: 20px;
    line-height: 20px;
    color: #666;
    font-size: 14px;
    padding-left: 10px;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.prof_list .prof_bot .pdesc:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background-color: #00b594
}

.prof_list .prof_bot .p_phone {
    position: absolute;
    left: 20px;
    bottom: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 18px;
    color: #333;
    font-weight: 700;
    font-size: 16px
}

.prof_list .prof_bot .p_phone:before {
    content: '';
    display: block;
    background: url(../image/phone_icon02.png) center center/13px auto no-repeat;
    width: 12px;
    height: 13px;
    margin-right: 6px
}

.prof_list .p_btn {
    position: absolute;
    right: 20px;
    bottom: -14px;
    display: block;
    width: 96px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.work-swiper {
    height: 396px
}

.work-swiper .swiper-pagination {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.work-list {
    margin-top: -20px;
    margin-left: -20px
}

.work-list .item {
    margin-left: 20px;
    margin-top: 20px;
    height: 170px;
    width: 590px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 24px 30px
}

.work-list .tl {
    line-height: 1;
    font-size: 18px;
    color: #333
}

.work-list .tl a:hover {
    color: var(--primary-color)
}

.work-list .desc {
    line-height: 22px;
    font-size: 14px;
    color: #666;
    margin-top: 16px
}

.work-list .bot {
    margin-top: 20px;
    font-size: 12px;
    color: #999;
    height: 24px;
    line-height: 24px
}

.work-list .temp {
    height: 24px;
    font-size: 14px;
    color: #333
}

.work-list .box {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eee;
    margin-right: 8px
}

.work-list .img {
    display: block;
    width: 100%
}

.work-list .date {
    text-align: right
}

.revert_swiper {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 794px
}

.revert_swiper .swiper-container {
    height: 348px
}

.revert_swiper .swiper-pagination {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.revert_consult {
    width: 386px;
    margin-left: 20px
}

.revert_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -21px
}

.revert_list .item {
    width: 348px;
    height: 92px;
    border-radius: 10px;
    background: #f8f8f8;
    padding: 20px;
    margin: 0 18px 18px 0
}

.revert_list .item:hover .gaine-ask {
    opacity: 1;
    bottom: 0
}

.revert_list .revert_footer {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative
}

.revert_list .revert_footer .gaine-ask {
    width: 70px;
    height: 24px;
    opacity: 1;
    border-radius: 217px;
    border: 1px solid var(--primary-color);
    line-height: 22px;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: -4px;
    right: 0;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.revert_list .revert_footer .gaine-ask:hover {
    background: var(--primary-color);
    color: #fff
}

.lawyer-gaine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.lawyer-gaine .flex-center:hover .gaine-name {
    color: #00997d
}

.lawyer-gaine .gaine-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px
}

.lawyer-gaine .gaine-name {
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #666
}

.lawyer-gaine .gaine-time {
    margin-left: 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #999
}

.answer_tlt {
    color: #333;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    display: block
}

.answer_tlt:hover {
    color: var(--primary-color)
}

.answer_tlt:before {
    position: absolute;
    content: '问';
    background: #26b0ff;
    width: 20px;
    height: 20px;
    color: #fff;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px 5px 5px 0
}

.question_tlt {
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 20px;
    position: relative;
    padding-left: 28px
}

.question_tlt:before {
    position: absolute;
    content: '答';
    background: #2ad1b5;
    width: 20px;
    height: 20px;
    color: #fff;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px 5px 5px 0
}

.consult-content {
    display: block;
    width: 326px;
    height: 222px;
    opacity: 1;
    border-radius: 10px;
    padding: 30px;
    background-image: url(../image/consult_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.consult-content .consult-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 12px
}

.consult-content .consult-header .consult-img {
    width: 72px;
    height: 72px;
    background-image: url(../image/consult_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 4px
}

.consult-content .consult-header .consult-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 18px;
    color: #00705c;
    margin-bottom: 10px
}

.consult-content .consult-header .consult-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #106152
}

.consult-content .consult-header .consult-text span {
    font-weight: 600
}

.consult-content .counsel-tags {
    font-size: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 24px
}

.consult-content .counsel-tags .tag {
    display: block;
    text-align: center;
    width: 78px;
    height: 28px;
    border-radius: 5px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 28px;
    color: #333;
    position: relative
}

.consult-content .counsel-tags .tag:not(:last-child) {
    margin-right: 28px
}

.consult-content .counsel-tags .tag:not(:last-child):after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    right: -20px;
    top: 8px;
    background-image: url(../image/consult_right.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.consult-content .counsel-input {
    border-radius: 102px;
    background: #fff;
    border: 2px solid #00b594;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
    cursor: pointer
}

.consult-content .counsel-input .txt {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 40px;
    color: #999;
    padding-left: 18px
}

.consult-content .counsel-input .btn {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    width: 108px;
    height: 40px;
    margin: -1px;
    border-radius: 102px;
    background: #00b594;
    border: 1px solid #00b594
}

.consult-content .counsel-swiper {
    margin: 22px 0 0;
    height: 30px;
    overflow: hidden
}

.consult-content .counsel-swiper .swiper-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.consult-content .counsel-swiper .swiper-text .stxt {
    font-size: 12px;
    font-weight: 400;
    line-height: 30px;
    color: #666;
    max-width: 276px;
    position: relative;
    padding-left: 33px
}

.consult-content .counsel-swiper .swiper-text .stxt:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-image: url(../image/consult_user.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.sf_list {
    margin-left: -18px
}

.sf_list .item {
    margin-left: 18px;
    width: 388px;
    height: 284px;
    background: linear-gradient(133.94deg, #ba9063 0%, #ccae91 100%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 12px;
    line-height: 1;
    color: #999
}

.sf_list .item:hover .btn {
    opacity: 1
}

.sf_list .tl {
    line-height: 24px;
    padding-top: 14px;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    padding-left: 10px
}

.sf_list .sf_bg {
    margin-top: 26px;
    height: 200px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background: url(../image/sf_bg.png) no-repeat
}

.sf_list .lawyer_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee
}

.sf_list .img_box {
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid #eee;
    border-radius: 50%;
    overflow: hidden
}

.sf_list .img_box .img {
    display: block;
    width: 100%
}

.sf_list .info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    margin: 0 12px
}

.sf_list .name {
    line-height: 14px;
    font-size: 14px;
    color: #111
}

.sf_list .name a:hover {
    color: var(--primary-color)
}

.sf_list .room {
    margin-top: 6px;
    line-height: 1;
    font-size: 12px;
    color: #999
}

.sf_list .btn {
    width: 70px;
    height: 24px;
    border-radius: 217px;
    border: 1px solid var(--primary-color);
    line-height: 22px;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .4s;
    transition: .4s;
    opacity: 0
}

.sf_list .btn:hover {
    background: var(--primary-color);
    color: #fff
}

.sf_list .desc {
    margin-top: 20px;
    line-height: 22px;
    color: #666;
    font-size: 14px;
    margin-bottom: 20px
}

.ranking-content {
    width: 340px;
    height: 418px;
    background: -webkit-gradient(linear, left top, right top, from(#dcf5f1), to(#bdf2ed));
    background: linear-gradient(90deg, #dcf5f1 0%, #bdf2ed 100%);
    background-image: url(../image/rank_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 24px 23px 23px
}

.ranking-content:not(:last-child) {
    margin-right: 21px
}

.ranking-content .ranking-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 20px;
    color: #333;
    margin-bottom: 24px
}

.ranking-content .ranking-title .rmore {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: right;
    font-size: 14px;
    color: #333;
    font-weight: 400
}

.ranking-content .ranking-title .rmore a {
    color: #333
}

.ranking-content .ranking-title .rmore a:hover {
    color: var(--primary-color)
}

.ranking-main {
    width: 300px;
    height: 308px;
    opacity: 1;
    border-radius: 2px;
    background: #fff;
    padding: 38px 20px 28px
}

.ranking-main .ranking-item {
    cursor: pointer
}

.ranking-main .ranking-item:not(:last-child) {
    margin-bottom: 24px
}

.ranking-main .ranking-item.active .rank-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ranking-main .ranking-item.active .rank-item {
    display: none
}

.ranking-main .ranking-item:first-child .rank-item .rank_num {
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    background: #ff4117;
    border-color: #ff4117
}

.ranking-main .ranking-item:nth-child(2) .rank-item .rank_num {
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    background: #ff8d1a;
    border-color: #ff8d1a
}

.ranking-main .ranking-item:nth-child(3) .rank-item .rank_num {
    font-weight: 700;
    color: #fff;
    background: #ffc300;
    border-color: #ffc300
}

.ranking-main .rank-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ranking-main .rank-item .rank_num {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #999;
    margin-right: 10px
}

.ranking-main .rank-item .rank_name {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #333;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    margin-right: 10px
}

.ranking-main .rank-item .rank_name:hover {
    color: var(--primary-color)
}

.ranking-main .rank-item .rank_desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: #999
}

.ranking-main .rank-item .rank_desc span {
    color: #333;
    font-weight: 600;
    margin-right: 5px
}

.ranking-main .rank-main {
    display: none
}

.ranking-main .rank-main .rank-lawyer {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    display: contents
}

.ranking-main .rank-main .rank-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    margin-right: 12px;
    display: block
}

.ranking-main .rank-main .rank-img .img {
    width: 100%;
    height: 100%;
    border-radius: 6px
}

.ranking-main .rank-main .rank-name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.ranking-main .rank-main .rank-name .rank-tlt {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 16px;
    color: #333
}

.ranking-main .rank-main .rank-name .rank-tlt:hover {
    color: var(--primary-color)
}

.ranking-main .rank-main .rank-name .rank-txt {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 12px;
    color: #999;
    margin-top: 8px
}

.ranking-main .rank-main .rank-btn {
    display: block;
    width: 62px;
    height: 22px;
    border-radius: 72px;
    background: -webkit-gradient(linear, left top, right top, from(#fa8900), to(#fa1e1e));
    background: linear-gradient(90deg, #fa8900 0%, #fa1e1e 100%);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    line-height: 22px;
    color: #fff
}

.ranking-main .rank-main .rank-btn:hover {
    opacity: .7
}

.hot_list {
    background: #fff;
    padding: 0 20px 18px;
    border-radius: 2px
}

.hot_list .item {
    position: relative
}

.hot_list .title {
    position: relative;
    line-height: 22px;
    color: #333;
    padding-left: 14px;
    font-size: 14px;
    padding: 20px 0 4px 14px
}

.hot_list .title:before {
    position: absolute;
    left: 0;
    top: 28px;
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 50%;
    margin-right: 8px
}

.hot_list .title:hover {
    color: var(--primary-color);
    font-weight: 500
}

.hot_list .title:hover:before {
    background: var(--primary-color)
}

.hot_list .info {
    line-height: 1;
    font-size: 12px;
    margin-top: 8px;
    padding-left: 14px
}

.hot_list .info .green {
    color: #00997d;
    font-weight: 500
}