/* ============================================================
   wangshigroup.cn - Homepage (dark high-tech)
   Sections: banner, legal(service), advisory, lawyer, case,
   tr_step, about_tr, surroundings. Layout preserved.
   ============================================================ */

/* Banner: keep photo, darken with layered gradient */
.flexslider .slides li{
  background:linear-gradient(120deg,rgba(7,11,24,.72),rgba(12,18,38,.55) 45%,rgba(7,11,24,.78)),
             url(/skin/images/20191231155142129.jpg) center/cover no-repeat!important;
  background-size:cover!important;
}

/* Shared section title */
.module-title{width:500px;height:77px;margin:0 auto;text-align:center;padding-top:45px;position:relative;}
.module-title h1{height:100%;border-bottom:1px solid var(--stroke-2);font-weight:normal;font-size:36px;color:var(--text);text-align:center;}
.module-title h1 strong{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.module-title span{color:var(--muted);font-size:18px;background-color:var(--bg-1);padding:0 10px;position:absolute;left:135px;bottom:-10px;border:1px solid var(--stroke);border-radius:20px;}

/* ---- Service areas (#legal) ---- */
#legal{width:100%;}
#legal .content{width:1200px;margin:0 auto;padding-bottom:46px;}
#legal .content .title{text-align:center;}
#legal .content .list{margin-top:28px;}
#legal .content .list ul li{width:190px;float:left;margin-left:8.6px;margin-top:20px;position:relative;
  border-radius:var(--radius);overflow:hidden;background:var(--glass);border:1px solid var(--stroke);
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s;}
#legal .content .list ul li:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 22px 50px rgba(79,70,229,.35);}
#legal .content .list ul .li1{margin-left:0;}
#legal .content .list ul li .legal_top{border:1px solid var(--stroke);width:188px;}
#legal .content .list ul li .legal_top img{width:100%;display:block;filter:saturate(1.05);}
#legal .content .list ul li .legal_bottom{border-left:1px solid var(--stroke);border-right:1px solid var(--stroke);border-bottom:1px solid var(--stroke);width:188px;height:146px;text-align:center;background:transparent;}
#legal .content .list ul li .legal_bottom h5{font-size:18px;color:#fff;font-family:var(--font);padding-top:16px;}
#legal .content .list ul li .legal_bottom h5 span{color:var(--accent-3);}
#legal .content .list ul li .legal_bottom p{font-size:12px;color:var(--muted);font-family:var(--font);line-height:20px;margin-top:8px;margin-bottom:8px;padding:0 8px;}
#legal .content .list ul li .legal_bottom h6{height:38px;width:138px;margin:0 auto;border:1px solid var(--accent);border-radius:6px;font-size:16px;color:#fff;font-family:var(--font);line-height:38px;font-weight:500;
  background:var(--grad-btn)!important;border-color:transparent!important;cursor:pointer;transition:filter .2s;}
#legal .content .list ul li:hover .legal_bottom h6{background:var(--grad-btn)!important;filter:brightness(1.12);}

/* ---- Advisory / free answers (#advisory) ---- */
#advisory{width:100%;height:560px;background:linear-gradient(180deg,var(--bg-1),var(--bg-0));}
#advisory .content{width:1200px;margin:0 auto;}
#advisory .content .advisory_left{width:800px;float:left;}
#advisory .content .advisory_left h5{font-size:34px;color:#fff;font-family:var(--font);margin-top:52px;}
#advisory .content .advisory_left h5 .span1{color:var(--accent-3);font-weight:500;}
#advisory .content .advisory_left h5 .span2{color:var(--muted);font-weight:500;font-size:18px;margin-left:40px;}
#advisory .content .advisory_left .list{height:346px;background:var(--glass);margin-top:20px;width:100%;padding:14px 0;border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;}
#advisory .content .advisory_left .list ul{width:760px;margin-left:20px;position:relative;}
#advisory .content .advisory_left .list ul li{float:left;width:360px;border-bottom:1px solid var(--stroke);padding-left:40px;padding-bottom:18px;padding-top:18px;transition:background .2s;}
#advisory .content .advisory_left .list ul .li1{padding-left:0;}
#advisory .content .advisory_left .list ul li:hover{background:rgba(225,29,42,.12);}
#advisory .content .advisory_left .list ul li .left{float:left;width:60px;}
#advisory .content .advisory_left .list ul li .left img{width:60px;height:60px;border-radius:50%;border:2px solid var(--accent);}
#advisory .content .advisory_left .list ul li .right{float:right;width:280px;}
#advisory .content .advisory_left .list ul li .right h6{font-size:18px;color:#fff;font-family:var(--font);font-weight:500;}
#advisory .content .advisory_left .list ul li .right h6 span{font-size:14px;color:var(--muted);float:right;line-height:30px;}
#advisory .content .advisory_left .list ul li .right p{font-size:14px;color:var(--muted);float:right;font-family:var(--font);margin-top:8px;}
#advisory .content .advisory_right{width:400px;float:left;margin-top:52px;}
#advisory .content .advisory_right .input_advisory{height:442px;text-align:center;border:1px solid var(--stroke-2);border-radius:var(--radius);background:var(--glass-2);padding:18px;box-shadow:var(--shadow);}
#advisory .content .advisory_right .input_advisory a{display:inline-block;}
#advisory .content .advisory_right .input_advisory img{max-width:100%;border-radius:var(--radius-sm);}

/* ---- Lawyer team (#lawyer) ---- */
#lawyer{width:100%;}
#lawyer .content{width:1200px;margin:0 auto;}
#lawyer .content h5{text-align:center;margin-top:45px;}
#lawyer .content .lawy_list{margin-top:38px;width:1200px;overflow:hidden;}
#lawyer .content ul{width:2600px;position:relative;}
#lawyer .content ul li{width:276px;margin-right:32px;float:left;}
#lawyer .content ul li .top img{width:276px;height:276px;display:block;border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--stroke);border-bottom:none;}
#lawyer .content ul li .buttom{width:274px;height:154px;background:var(--glass)!important;border:1px solid var(--stroke);border-top:none;border-radius:0 0 var(--radius) var(--radius);position:relative;}
#lawyer .content ul li .buttom h6{font-size:14px;color:#fff;font-family:var(--font);font-weight:500;padding-top:19px;width:250px;margin:0 auto;}
#lawyer .content ul li .buttom h6 .span1{font-size:21px;color:#fff;font-weight:700;margin-right:8px;}
#lawyer .content ul li .buttom h6 .span2{float:right;line-height:40px;color:var(--muted);font-size:13px;}
#lawyer .content ul li .buttom p{font-size:14px;color:var(--muted);font-family:var(--font);width:250px;margin:0 auto;padding-top:3px;height:38px;overflow:hidden;}
#lawyer .content ul li .buttom h4{font-size:14px;color:var(--accent-3);font-family:var(--font);font-weight:500;padding-top:16px;width:250px;margin:0 auto;}
#lawyer .content ul li .but{position:relative;margin-top:-36px;}
#lawyer .content ul li .but a{display:inline-block;width:138px;text-align:center;height:46px;line-height:46px;font-size:18px;color:#fff;font-family:var(--font);background:var(--grad-btn);float:left;border-radius:0 0 0 var(--radius);transition:filter .2s;}
#lawyer .content ul li .but .a1{background:linear-gradient(135deg,#ef4444,#b91c1c);border-radius:0 0 var(--radius) 0;}
#lawyer .content ul li .but a:hover{filter:brightness(1.12);}
#lawyer .content .list_circle{width:100%;margin-top:20px;text-align:center;}
#lawyer .content .list_circle span{display:inline-block;width:12px;height:12px;border:2px solid var(--accent);margin-right:5px;margin-left:5px;border-radius:50%;cursor:pointer;}
#lawyer .content .list_circle span.active{background-color:var(--accent-3);border-color:var(--accent-3);}

/* ---- Cases (#case) ---- */
#case{width:100%;height:734px;background:linear-gradient(180deg,var(--bg-0),var(--bg-2));margin-top:66px;padding-bottom:40px;}
#case .content{width:1200px;margin:0 auto;}
#case .content h5{font-size:36px;color:#fff;font-family:var(--font);text-align:center;padding-top:42px;}
#case .content h5 span{font-size:16px;color:var(--muted);font-family:var(--font);text-align:center;font-weight:500;line-height:44px;display:block;}
#case .content .list{margin-top:28px;}
#case .content .list ul li{border:1px solid var(--stroke);background:var(--glass);height:70px;margin-top:6px;float:left;margin-left:6px;padding:18px 0;border-top:3px solid var(--accent);border-radius:var(--radius-sm);transition:transform .2s,box-shadow .2s,border-color .2s;}
#case .content .list ul .li1{margin-left:0;}
#case .content .list ul li .left{width:124px;border-right:1px solid var(--stroke-2);height:70px;float:left;}
#case .content .list ul li .left p{width:100px;margin:0 auto;font-size:25px;color:var(--accent-3);font-family:var(--font);font-weight:700;}
#case .content .list ul li .right{width:430px;height:70px;float:left;margin-left:15px;}
#case .content .list ul li .right h6{font-size:18px;color:#fff;font-family:var(--font);font-weight:500;}
#case .content .list ul li .right p{font-size:14px;color:var(--muted);font-family:var(--font);margin-top:6px;height:38px;overflow:hidden;}
#case .content .list ul li:hover{transform:translateY(-4px);border-top:3px solid var(--accent-3);background:rgba(225,29,42,.08);box-shadow:0 16px 40px rgba(225,29,42,.18);}
#case .content .list ul li:hover .left p{color:var(--accent-3);}
#case .content .list ul li:hover .right h6{color:var(--accent-3);}
#case .content .more{margin-top:34px;text-align:center;}
#case .content .more img{filter:brightness(1.1);}

/* ---- Process steps (#tr_step) ---- */
#tr_step{width:100%;height:404px;background:linear-gradient(135deg,#1e0d0d,#0a0a0b);}
#tr_step .content{width:1200px;margin:0 auto;}
#tr_step .content h5{font-size:36px;color:#fff;font-family:var(--font);text-align:center;padding-top:34px;}
#tr_step .content .underline{width:70px;height:4px;background:var(--accent-3);margin:18px auto;box-shadow:0 0 12px var(--accent-3);}
#tr_step .content ul{margin-top:36px;}
#tr_step .content ul li{width:200px;margin:0 50px;text-align:center;float:left;}
#tr_step .content ul li img{filter:brightness(1.15) drop-shadow(0 6px 16px rgba(225,29,42,.3));}
#tr_step .content ul li .zx{width:130px;height:36px;line-height:36px;border:1px solid var(--accent-3);border-radius:60px;margin-top:26px;margin-left:22px;font-size:18px;color:#fff;font-family:var(--font);transition:all .2s;}
#tr_step .content ul li:hover .zx{border:1px solid var(--accent-3);background:var(--grad-btn);box-shadow:0 8px 24px rgba(79,70,229,.45);}

/* ---- About (#about_tr) ---- */
#about_tr{width:100%;background:linear-gradient(180deg,var(--bg-0),var(--bg-1));}
#about_tr .content{width:1200px;margin:0 auto;}
#about_tr .content h5{font-size:36px;color:#fff;font-family:var(--font);text-align:center;padding-top:42px;}
#about_tr .content h5 span{color:var(--accent-3);}
#about_tr .content .underline{width:70px;height:4px;background:var(--accent-3);margin:18px auto;box-shadow:0 0 12px var(--accent-3);}
#about_tr .content p{font-size:16px;color:var(--muted);font-family:var(--font);line-height:28px;text-indent:2em;}

/* ---- Surroundings gallery (#surroundings) ---- */
#surroundings{width:100%;padding-bottom:30px;background:linear-gradient(180deg,var(--bg-1),var(--bg-0));}
#surroundings .content{width:1200px;margin:0 auto;}
#surroundings .content .list{width:100%;height:200px;padding-top:40px;overflow:hidden;}
#surroundings .content .list ul{position:relative;}
#surroundings .content .list ul li{float:left;margin-right:6px;width:300px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--stroke);}
#surroundings .content .list ul li img{width:100%;display:block;filter:brightness(.95);transition:transform .3s;}
#surroundings .content .list ul li:hover img{transform:scale(1.06);}