@charset "utf-8";

/* = = = 固定設定 = = = = = = = = = == = = = = = = = = = = = = = = == = = = = = = = = = = === = = */
/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { 
position:static; 
height:auto;
}







.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}



/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*內頁BANNER 設定*/
.banner {background: url(https://pic03.eapple.com.tw/stephycyllawyer/subbanner.jpg) no-repeat;height: 21vw;
	background-size: cover !important;padding: 140px 0 0 0;position: relative;}
.banner h5 {font-size: 42px;color: #fff;text-shadow: 1px 1px 5px rgba(0,0,0,0.3);font-weight: 500;
	text-align: right;max-width: 400px;margin-left: 60%;position: absolute;top: 50%;transform: translateY(-50%);}
.banner h5:after{content: "為客戶掌握各方面優勢，是您最堅強的法律後盾";border-bottom: 2px dotted #fff;margin-top: 10px;
    font-size: 18px;max-width: 380px;display: block;padding-bottom: 8px;font-weight: 400;}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banF {}
.banner.banblog {}

.swiper-slide {
  /* 這是最關鍵的一步，讓裡面的絕對定位元素 (遮罩和文字) 有所依據 */
  position: relative; 
}

/* 2. 建立黑色遮罩偽元素 */
.swiper-slide::before {
  content: ''; /* 偽元素必須要有 content 屬性 */
  position: absolute; /* 設定為絕對定位，才能覆蓋在圖片上 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  
  /* 設定堆疊順序：遮罩在中間層 (比圖片高，比文字低) */
  z-index: 1; 
}

/* 3. 提升文字層級，確保它在遮罩之上 */
.slide-caption {
  /* 設定為相對定位，才能啟用 z-index */
  position: relative; 
  
  /* 設定堆疊順序：文字在最上層 */
  z-index: 2; 

  /* 您原有的文字樣式可以繼續保留，例如置中等等 */
  /* color: white; (建議文字使用淺色系，在深色遮罩上才看得清楚) */
}

/* (可選，但建議) 確保圖片填滿整個 slide */
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 讓圖片等比例縮放填滿容器，裁切多餘部分 */
}




/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
@media screen and (max-width: 1140px){
	.nav-menu > li > a {padding: 40px 15px 30px 15px;font-size: 18px;}
	.nav-header{padding: 15px;}
	.nav-brand {width: 230px;}
}

@media screen and (max-width: 768px) {
	/*預設banner= = = = = = = = */
	.bannerindex { padding:0; margin:0px 0px 0px 0px;position: relative; }
	
	.swiper-banner { position:static; margin:0; height:90vh;} 
	

	/* 開啟手機板下方按鈕所需設定= = = = = = = = */
	#bottom_menu {display: block; }
	.footer.with_shopping_mode { padding:30px 0 0; }
	#to_top { bottom:60px;}

	/*以下其他設定= = = = = = = = */
	/*header*/
	.pageIndex .header_area {position: relative;}
	.nav-menu > li > a:before{display: none;}
	/*banner*/
	.banner {height: 35vw;}
	.banner h5 {font-size: 30px;margin-left: 10%;}
	.banner h5:after {margin-top: 5px;font-size: 16px;}
	/*購物車*/
	.products-list .item {width: 48%;}
	/*聯絡我們*/
	.list_before.info {width: 100%;max-width: initial;}
}

@media screen and (max-width: 600px) { 
	/*banner*/
	.banner{height: 250px;}
	.banner h5{max-width: 250px;margin-left: 20%;}
	.banner h5:after{border-bottom: none;}    
	/*footer*/
	.footer_info ul {padding-left: 10px;}
	/*文章*/
	.blog_list_le{width: 100%;}
	.blog_list_ri{width: 100%;}
	h4.blog_category_title {font-size: 24px;}
	/*購物車*/
	.products-list .more{margin-top: 30px;}

}