/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
		:root {
			--cnvs-themecolor: #eee;
			--cnvs-themecolor-rgb: 253, 93, 61;
			--cnvs-primary-font: 'paralucent-text', sans-serif;
			--cnvs-body-font: 'paralucent', sans-serif;
			--bs-bg-opacity: 1;
			--cnvs-body-bg: #fff;
			--text-size-md-2: 1.14rem; 
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body, html {
			width: 100%;
		}


		/* Header */
		.header {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 95px;
		  background: #fff;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
		  z-index: 1000;
		}

		#header-wrap {
			position: fixed;
			height: auto;
			z-index: 299;
			width: 100%;
			background-color: var(--cnvs-header-bg);
			border-bottom: 0px solid var(--cnvs-header-border-color) !important;/*nav 改0*/
			transition: height 0.2s ease 0s, background-color 0.3s ease 0s;
			backface-visibility: hidden;
		}

		/*選單三角形*/
		.banner-triangle {
			position: absolute;
			top: 94px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;
		}

		/* Logo */
		.logo img {
		  height: 59px;
		}

		/*藍*/
		.color {
			color: #0d5273!important;
		}

		/*灰*/
		.color2 {
			color: #5e5e5e!important;
		}	

		.bg2{
			background-color: #0d5273;
		}

		.text-size-md-2 {
			font-size: 1.5rem !important;
		}


		.text-size-sm-2 {
			font-size: 1.1rem;
		}


		.text-5 {
			border-bottom:2px #0d5273 solid; 
			padding-bottom:5px!important;
			display: inline-block;
		}

		.button-blue {
			color: #FFFFFF!important;
			border-color: #FFFFFF!important;
		}

		.button-blue.button-border:hover {
			--cnvs-btn-color: #0d5273 !important;
		}

		/* index Banner */
		.banner {
		  position: relative;
		  width: 100%;
		  min-height: 800px;
		  margin-top: 95px;
		  overflow: hidden;
		}

		.banner-triangle {
			position: absolute;
			top: 90px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;

		}

		.banner-image-wrapper {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}

		.banner img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		  display: block;
		}

		.overlay {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0,0,0,0.25);
		  z-index: 1;
		}

		.banner-text {
		  position: absolute;
		  top: 50%;
		  left: 28%;
		  transform: translate(-50%, -50%);
		  z-index: 2;
		}

		.banner-text h5 {
		  font-size: 24px;
		  margin-bottom: 10px;
		}


		  #tel {
			position: fixed;
			bottom: 182px;         /* 距離下方 */
			right: 22px;          /* 距離右邊 */
			width: 40px;
			height: 40px;
			border-radius: 10%;
			background-color: #212C40;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;      /* icon 大小 */
			box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 18px;
			text-decoration: none;
			z-index: 9999;        /* 保持在最上層 */
			transition: transform 0.2s ease;
		  }

		  #line {
			position: fixed;
			bottom: 127px;         /* 距離下方 */
			right: 22px;          /* 距離右邊 */
			width: 40px;
			height: 40px;
			border-radius: 10%;
			background-color: #212C40;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;      /* icon 大小 */
			box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 18px;
			text-decoration: none;
			z-index: 9999;        /* 保持在最上層 */
			transition: transform 0.2s ease;
		  }

		  #fb {
			position: fixed;
			bottom: 72px;         /* 距離下方 */
			right: 22px;          /* 距離右邊 */
			width: 40px;
			height: 40px;
			border-radius: 10%;
			background-color: #212C40;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;      /* icon 大小 */
			box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 18px;
			text-decoration: none;
			z-index: 9999;        /* 保持在最上層 */
			transition: transform 0.2s ease;
		  }

		  .stretched #gotoTop {
			position: fixed;
			bottom: 17px;         /* 距離下方 */
			right: 22px;          /* 距離右邊 */
			width: 40px;
			height: 40px;
			border-radius: 10%;
			background-color: #212C40;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;      /* icon 大小 */
			box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 18px;
			text-decoration: none;
			z-index: 9999;        /* 保持在最上層 */
			transition: transform 0.2s ease;
		  }

		/*律師*/
		.lawyer {
			display: flex;
			align-items: center;
			justify-content: center;
		}	


		.lawyer-pic {
			width: 272px;
			height: 272px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}	

		
		
		/* 照片 */
		.masonry-thumbs {
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  gap: 5px;
		}

		.grid-item {
		  position: relative;
		  overflow: hidden; /* 防止放大溢出 */
		  display: block;
		}

		.grid-item img {
		  width: 100%;
		  height: auto;
		  transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
		  cursor: pointer;
		  transform-origin: center center;
		}

		/* 滑鼠移上去時放大 */
		.grid-item:hover img {
		  transform: scale(1.15);
		  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
		}

		#contact-us .button-blue {
			color: #0d5273!important;
			border-color: #0d5273!important;
		}

		#contact-us .button-blue:hover {
			color: #FFFFFF !important;
			background-color: #0d5273;
		}

		#contact-us a {
			color: #0d5273!important;
		}

		#footer a {
			color: #0d5273!important;
		}

		#footer .fa-color{
			color: #1877f2!important;
		}

		#footer .banner-triangle {
			position: absolute;
			top: -24px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;
		}
		
		#copyrights {
			padding: calc(var(--cnvs-content-padding) * 0.5) 0;
			background-color: #eee !important;
			font-size: 1.2rem !important;
			line-height: 0.5 !important;
		}

		/*圖順序*/
		@media (max-width: 992px) {
			.banner-text {
				position: absolute;
				top: 50%;
				left: 35%;
				transform: translate(-50%, -50%);
				z-index: 2;
			}

			.banner-text h5 {
				font-size: 22px;
				margin-bottom: 10px;
			}
			
			.button.button-xlarge {
				--cnvs-btn-padding-x: 2.25rem;
				--cnvs-btn-padding-y: 0.625rem;
				--cnvs-btn-fontsize: 1.0rem;
			}
			
			.mb-b {
				margin-bottom: 22px;
			}
			
			.float-end {
				float: none !important;
			}
			
			.float-start {
				float: none !important;
			}
			
			.text-size-sm-2 {
				font-size: 16px;
			}
			
			.ps-3 {
				padding-left: 0rem !important;
			}
			
			.order1{
				order: 1;
			}
			
			.order2{
				order: 2;
			}
			
			.order3{
				order: 3;
			}
			
			.order4{
				order: 4;
			}
			
			.order5{
				order: 5;
			}
			
			.order6{
				order: 6;
			}
			
			.order7{
				order: 7;
			}
			
			.order8{
				order: 8;
			}
			
		}
		
        
	    @media (max-width: 767px) {
			.mbv {
				text-align: center;
			}
			
			.banner-text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 300px; /* 需要設定一個明確的寬度，或者使用 max-width */
				text-align: center; /* 使文字在容器內居中 */		
			}

			.banner-text h5 {
				font-size: 19px;
				margin-bottom: 10px;
			}
			
			.banner-text h5 span {
				overflow-wrap: break-word;
			}
			
			.button.button-xlarge {
				--cnvs-btn-padding-x: 2.25rem;
				--cnvs-btn-padding-y: 0.625rem;
				--cnvs-btn-fontsize: 0.9rem;
			}
			
			
			.pb-6 {
				padding-bottom: 3rem !important;
			}
			
        }	

		/* 手機版（螢幕寬度小於 576px 時） */
		@media (max-width: 576px) {
			.mobile-break::before {
			content: "\A"; /* 插入換行符號 */
			white-space: pre; /* 保留換行 */
			}
			
			.text-size-md-2 {
				font-size: 1.25rem !important;
				white-space:nowrap;
			}
			
			.h20{
				line-height: normal;
			}
			
		}