.w240{ width: 240px!important;}
.w320{ width: 320px!important;}
.w400{ width: 400px!important;}
.w796{ width: 796px!important;}
.min-h-500{min-height: 500px!important;}
.min-h-490{min-height: 490px!important;}

.title-bg-bar,.title-bg-bl-bar{ height: 72px; line-height: 72px; font-size: 18px; font-weight: 600; background: url(../images/title_bg.png) no-repeat 20px center; position: relative;}
.title-bg-bl-bar:after{ width: 2px; height: 18px; content: ""; background-color: #577EFF; position: absolute; left: 0px; top: 27px;}

.banner{ height: 503px; background: url(../images/home_banner_bg.jpg) no-repeat center top;}
.banner .avatar-box{ width: 178px; height: 178px; border: 2px solid #577eff; border-radius: 50%; overflow: hidden;}
.banner .avatar-box img{ width: 178px; min-height: 178px;}
.banner .rz_box{ width: 100%; height: 112px; bottom: 0px; background-color: rgba(255,255,255,0.5);}
.banner .rz_box li{ height: 55px; line-height: 55px; float: left; margin: 28px 30px 0px 30px; }
.banner .rz_box li .icon{ display: block; width: 54px; height: 55px; margin-right: 20px; background: url(../images/icon_home_rz_bg.png) no-repeat; float: left;}
.banner .rz_box li span{ display: inline-block; height: 55px; line-height: 55px; font-size: 14px; color: #fff; float: left;}
.banner .rz_box li .qyrz_icon{background-position: -54px 0;}
.banner .rz_box li .zyrz_icon{background-position: -108px 0;}
.banner .rz_box .btn{ width: 146px; height: 44px; line-height: 44px; border-radius: 22px; background-color: #577EFF; font-size: 18px; font-weight: 600; bottom: -5px; right: 50px;}

.home_menu{ height: 112px;}
.home_menu_nav { padding: 35px 0 0 0; background: none; border-radius: 0;}
.home_menu_nav .layui-nav-item { line-height: 42px;}
.home_menu_nav .layui-nav-item a { padding: 0 20px; color: #333; font-size: 18px;}
.home_menu_nav .layui-nav-item a:hover, .home_menu_nav .layui-this a{ font-weight: 600; color: #577eff;}
.home_menu_nav .layui-this:after{ width: 20px; height: 2px; background-color:#577eff; left: 50%; margin-left: -10px;}

.lawyer_info{ width: 294px; height: 500px; padding: 25px 40px;}
.lawyer_info .avatar-box{ width: 228px; height: 228px; border: 2px solid #577EFF; border-radius: 50%; overflow: hidden;}
.lawyer_info .avatar-box img{ width: 228px; min-height: 228px;}
.lawyer_info p{ line-height: 34px; font-size: 16px; font-weight: 600;}
.lawyer_info p span{ font-size: 18px; font-weight: 400;}

.lawyer_content{ width: 736px; height: 540px; padding: 5px 30px;}
.lawyer_content .speciality{ margin-left: -10px;}
.lawyer_content .speciality li{ height: 26px; line-height: 26px; margin: 5px 0 5px 15px; padding: 0px 12px; background-color: #eaeaea; border-radius: 5px; float: left;}
.lawyer_content .content{ line-height: 24px; font-size: 14px; color: #666; -webkit-line-clamp: 8;}
.lawyer_content .data_statistics{display: flex; flex-direction: row; align-items: flex-end;}
.lawyer_content .data_statistics li{ flex: 1; position: relative;}
.lawyer_content .data_statistics li:after{ position: absolute; top: 15%; right: 0px; content: " "; height: 70%; border-right: 1px solid #c4c4c4;}
.lawyer_content .data_statistics li:last-child:after{ border-right: 0;}

.law_service{ margin-left: -30px;}
.law_service .item{ width: 280px; height: 236px; padding: 30px 50px 0px; margin-left: 30px; color: #999; border-radius: 5px; -webkit-transition: all .2s linear; transition: all .2s linear; float: left; position: relative;}
.law_service .item:hover{ height: 246px; padding-top: 20px;}
.law_service .item h3{ height: 48px; line-height: 48px; font-size: 22px; font-weight: 600; color: #333;}
.law_service .item .jg{ line-height: 38px; margin-bottom: 10px;}
.law_service .item .jg span{ font-size: 16px; font-weight: 600; color: #f38933; margin-right: 3px;}
.law_service .item .btn{ position: absolute; left: 50px; bottom: 20px; width: auto; height: 40px; line-height: 40px; border-radius: 20px; padding: 0px 35px; background-color: #577EFF; opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear;}
.law_service .item:hover .btn{opacity: 1; bottom: 30px;}
.law_service .item .horn{ width: 110px; height: 110px; background-color: #fdf3d8; border-radius: 0px 0px 0px 110px; position: absolute; top: 0px; right: 0px;}
.law_service .item .horn i{ width: 45px; height: 45px; display: block; background: url(../images/icon_home_bg.png) no-repeat; margin-top: 22px; margin-left: 42px;}
.law_service .item:nth-child(2) .horn{ background-color: #fde7d8;}
.law_service .item:nth-child(2) .horn i{ background-position: -45px 0px;}
.law_service .item:nth-child(3) .horn{ background-color: #fdd8e1;}
.law_service .item:nth-child(3) .horn i{ background-position: -90px 0px;}
.law_service .item .horn.close i{ background-position: 0px -45px;}
.law_service .item:nth-child(2) .horn.close i{ background-position: -45px -45px;}
.law_service .item:nth-child(3) .horn.close i{ background-position: -90px -45px;}
.law_service .item .btn.close{ background-color: #999;}

.ask_answer_statistics{ width: 907px; height: 345px;}

.ask-list-bar .layui-timeline .layui-timeline-content p{ height: 34px; line-height: 34px;}
.ask-list-bar .layui-timeline .layui-timeline-content .q{ background:url(../images/icon_question.png) no-repeat center left;}
.ask-list-bar .layui-timeline .layui-timeline-content .a i{ width: 28px; height: 28px; background-repeat: no-repeat; background-position: top center; background-size: cover; border-radius: 50%; position: absolute; left: 0px; top: 3px;}
.ask-list-bar .layui-timeline-item:before{background-color: #d4d4d4;}
.ask-list-bar .btn{ width: 154px; height: 50px; line-height: 50px; border-radius: 25px; background-color: #f4f4f4; border: 1px solid #577EFF; font-size: 20px; color: #577EFF; display: block;}

.ask-list-bar2 li{ margin: 10px 0px;}
.ask-list-bar2 li p{ line-height: 34px; margin-bottom: 10;}
.ask-list-bar2 li .q{ background:url(../images/icon_question.png) no-repeat center left;}
.ask-list-bar2 li .a i{ width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; position: absolute; left: 0px; top: 3px;}

.video-list-bar{ margin-left: -20px;}
.video-list-bar ul li{ width: 285px; margin-left: 20px; margin-bottom: 20px;}
.video-list-bar ul li .video-box{width: 285px; height: 160px; display: block; position: relative; overflow: hidden; border-radius: 10px;}
.video-list-bar ul li .video-box img{ width: 285px; min-height: 160px;}
.video-list-bar ul li .video-box .bg{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10;}
.video-list-bar ul li .video-box .iconfont{position: absolute;left: 50%;top: 50%;margin: -20px 0 0 -20px;font-size: 40px;color: #fff;line-height: 40px;z-index: 20; transition: all .3s ease-in-out;}
.video-list-bar ul li .video-box:hover .iconfont {transform: scale(1.3);opacity: 0;}
.video-list-bar ul li .tit{ height: 34px; line-height: 34px; font-size: 16px; color: #414141;}

.rec_video{ width: 1200px; height: 256px; position: relative; overflow: hidden;}
.rec_video .video_img{ display: block; width: 640px; height: 256px; position: relative; overflow: hidden;}
.rec_video .video_img img{ width: 640px; min-height: 256px; display: block;}
.rec_video .video_img .time { position: absolute; right: 20px; bottom: 10px; display: inline-block; padding: 0 10px; height: 24px; line-height: 24px; color: #fff; background-color: #000; background-color: rgba(0, 0, 0, .3); *background-color: #000; border-radius: 12px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; transition: all .2s; }
.rec_video .video_img .pop { width: 640px; height: 256px; position: absolute; top: 256px; right: 0; left: 0; background-color: #000; background-color: rgba(0,0,0,.3); *background-color: #000; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; transition: all .2s; }
.rec_video .video_img .pop .layui-icon{ width:50px; height: 50px; line-height: 50px; margin: 0px auto; margin-top: 103px; font-size: 50px; color: #fff; display: block;}
.rec_video .video_img:hover .pop { top: 0; }
.rec_video .video_img:hover .time { bottom: -40px; }
.rec_video h3 { line-height: 34px; font-size: 18px; font-weight: bold; margin: 10px 0px; overflow: hidden;}
.rec_video a:hover{ color: #577EFF!important;}
.rec_video .desc{ line-height: 28px; -webkit-line-clamp: 4;}
.rec_video .metas{ position: absolute; left: 660px; bottom: 15px;}
.rec_video .metas span{ position: relative; padding-left: 20px;}
.rec_video .date i{ display: block; width: 13px; height: 13px; background: url(../images/icon_av_bg.png) no-repeat -13px 0px; position: absolute; top: 1px; left: 0px;}

.form_box{ width: 736px;}
.form_box .layui-form-item{ margin-bottom: 20px;}
.form_box .layui-form .layui-form-label{ width: 120px; font-size: 14px;}
.form_box .layui-form .layui-input-block{ margin-left: 150px;}
.form_box .layui-form .layui-form-select dl dd.layui-this, .form_box .layui-form .layui-form-checked span,.form_box .layui-form .layui-form-checked:hover span{ background-color: #577EFF;}
.form_box .layui-btn-container .layui-btn{ color: #333;}
.form_box .layui-btn-container .layui-btn.layui-btn-normal{ color: #fff; background-color: #577eff;}
.form_box .layui-btn-container .layui-btn:hover{border: 1px solid #577EFF;}
.form_box .layui-btn-container .layui-btn em{ font-weight: 700;}
.form_box .layui-textarea{ min-height: 140px;}
.getcode{height: 38px; line-height: 38px; border: none;}
.form_box .zx_cat_list li{ width: 117px; height: 28px; line-height: 28px; cursor: pointer;}
.form_box .zx_cat_list li.cur{ color: #577EFF;}

.suc_con{}
.suc_con .suc_tip{ height: 44px; line-height: 44px;}
.suc_con .lawyer_phone_info{ width: 520px; height: 48px; line-height: 48px;}
.suc_con .lawyer_phone_info img{ width: 44px; height: 44px; border: 1px solid #577EFF; border-radius: 50%;}
.suc_con .lawyer_phone_info .btn,.suc_con .operate .btn{ width: 194px; height: 40px; line-height: 40px; border-radius: 20px; background-color: #577EFF; margin-top: 4px;}
.suc_con .qrcode-box{ width: 166px;}
.suc_con .qrcode-box img{ width: 162px; height: 162px; border: 1px solid #577EFF; border-radius: 5px;}

.public_ask_form{ width: 660px;}
.public_ask_form .layui-form .layui-form-label{ width: 100px;}
.public_ask_form .layui-form .layui-input-block{ margin-left: 130px;}
.public_ask_form .zx_cat_list li{ width: 90px; height: 28px; line-height: 28px; cursor: pointer;}
.hot-ask-list{ width: 450px;}
.hot-ask-list li{ height: 64px; line-height: 64px; border-bottom: 1px solid #eee;}

.main-l{ width: 740px;}
.suc_con .operate .btn{ width: 164px;}
.operate .btn2{ width: 164px; height: 38px; line-height: 38px; border-radius: 20px; border: 1px solid #577EFF; background: none; margin-top: 4px;}

.main-r{ width: 430px;}

.local-lawyer-bar{}
.local-lawyer-bar .lawyer_items{}
.local-lawyer-bar .lawyer_items .item{ width: 210px; height: 270px; margin-right: 10px; margin-bottom: 20px; border-radius: 5px; position: relative;}
.local-lawyer-bar .lawyer_items .item:nth-child(even){ margin-right: 0;}
.local-lawyer-bar .lawyer_items .item img{ width: 210px; min-height: 180px;}
.local-lawyer-bar .lawyer_items .item .bg{ position: absolute; bottom: 0px;}
.local-lawyer-bar .lawyer_items .item .bg .tit{ height: 80px; padding: 2px 5px; background: #fff;}
.local-lawyer-bar .lawyer_items .item .bg .tit .name{ height: 24px; line-height: 24px; font-size: 16px;}
.local-lawyer-bar .lawyer_items .item .bg .tit .unit{ height: 18px; line-height: 18px; font-size: 13px; color: #414141;}
.local-lawyer-bar .lawyer_items .item .bg .tit .skill{ line-height: 19px; font-size: 12px; color: #999;}

.page_title{ height: 72px; line-height: 72px; background: url(../images/title_bg.png) no-repeat center center;}
.wxappbox{ width: 600px;}
.wxappbox .qrcode-box{ width: 250px; height: 270px;}
.wxappbox .qrcode-box .qrcode{ width: 166px; height: 166px;}
.wxappbox .qrcode-box .qrcode img{ width: 162px; height: 162px; padding: 2px; border: 1px solid #577EFF; border-radius: 5px;}
.wxappbox .info{ padding-top: 80px; line-height: 48px;}