/* 匯入共用最新消息文字模組 */
/* @import url(../css/style_nav/style_latest_news/style_latest_news.css); */



/* ================================================================= */


.indexmain{

}


.mainContent{
	/* background-color: var(--primary_color); */
	padding: clamp(2.2581rem, 3.6458vw, 4.3750rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* row-gap:clamp(2.2581rem, 3.6458vw, 4.3750rem); */ /* 36.13px , 3.6458vw , 70.00px */
}



.index_title{
    font-size: clamp(1.2500rem, 1.5625vw, 1.8750rem); /* 20.00px , 1.5625vw , 30.00px */
    text-align: center;
    position: relative;
    font-weight: bold;
    color: #727272;
	font-weight: 600;
    padding: 0px 0px clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
}
	.index_title strong{
		font-size: inherit;
		text-align: inherit;
		font-weight:inherit;
		color: inherit;
		line-height: inherit;
		padding: 0;
		margin: 0;
	}


.index_title2 h2{	
			font-size: 2.5rem;
			line-height: initial;
			padding: 0;
			margin: 0;
			/* display: inline-block; */
			font-weight: inherit;

			position: relative;
			z-index: 2;
		}	
	
		.index_title3{
			font-size: 2.5rem;
			line-height: 1.5;
			font-weight: 300;
			padding-bottom: 20px;
			color: #000;
			letter-spacing: 10px;
			text-align: center;
		}
		.index_title4{
			font-size: 2.5rem;
			line-height: 1.5;
			font-weight: 300;
			padding-bottom: 20px;
			color: #ffffff;
			letter-spacing: 10px;
			text-align: center;
		}
		.index_title3 h2,
		.index_title4 h2{
			padding: 0;
			margin: 0;
			font-size: inherit;
			line-height: inherit;
			display: inline-block;
		}


		.index_title3::before,
		.index_title4::before{
			z-index: -1;
		}
		
		.serviceBg_background .index_title2 {
		/* color: #fff; */
		overflow: hidden;
		}	









@media (max-width:990px){

	.indexmain{
		padding-top: 77.47px;
	}

}














/*/////////////////////////////////////////////////////////*/
/*-------首頁輪播區--------*/
/*/////////////////////////////////////////////////////////*/

.indexmain  .banner {
	background:#fff;
	position:relative;
	
	overflow: hidden;

	/* min-height: 100dvh; */
}

/* .banner::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 100%;
	background-color: rgba(39,39, 39, 15%);
	z-index: 99;
}
.banner::after{
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 200px;
	height: 100%;
	background-color: rgba(39,39, 39, 15%);
	z-index: 99;
} */
.indexmain  .swiper-wrapper{
	/* transition-timing-function:ease-in 
	transition-timing-function: linear; ; */
	transition-timing-function: ease;
}
.indexmain  .swiper-button-prev, 
.indexmain  .swiper-button-next {
	position: absolute;
	top: 50%;
	margin: 0px;
	/* z-index: 10;
	cursor: pointer; */
	aspect-ratio: 1;
	width: 2rem;
	/* width: 200px;
	height: 100%; */
	background-size: 99.9%;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.indexmain  .swiper-button-prev{
	/* background-image:url(../index/images/Rectangle.png); */
	left: 0;
	/* display: block !important; */
}
.indexmain .swiper-button-next{
	/* background-image:url(../index/images/Rectangle.png); */
	right: 0;
}
.indexmain  .swiper-button-prev:after, 
.indexmain  .swiper-button-next:after {
	/* content: 'prev'; */
	display: none;
}

.indexmain  .swiper-pagination-clickable .swiper-pagination-bullet {
	/* background-color: #000; */
	background-color: #fff;
	z-index: 5;
	display: inline-block;
	width: 10px;
	height: 10px;
	/* opacity: 1; */
	opacity: 0.6;
}
.indexmain .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active{
	/* background-color: #231815; */
	background: #aaa;
	opacity: 1;
}

	.indexmain  .banner .swiper-slide a {
		display: block;
		position: relative;
		/* padding-top: 28%; */
		aspect-ratio: 1280 / 451;
	}

	.indexmain  .banner .swiper-slide a img {
		/* width:100%; */
		/* height:auto; */
	}



	.banner_item{
		/* position: relative; */
	}

	.banner_item_fir{
		
	}
	.banner_item_fir a{
		position: relative;
	}
	.banner_item_fir a::before{
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-color: rgba(0 0 0 / 50%);
		z-index: 1;
	}
		.banner_title{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 3;
			
			z-index: 2;
			pointer-events: none;
			letter-spacing: .625rem;
			text-indent: 0.5625rem;
			width: 90%;
		}
		.banner_title_box{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: clamp(0.71rem, 0.001rem + 1.15vw, 1.375rem);
		}
			.banner_title_box > img{
				max-width: clamp(18.75rem, -1.251rem + 32.29vw, 37.5rem);
				width: 90%;
				height: auto;
			}
			.banner_title_box > .title{
				font-size: clamp(1.563rem, 0.982rem + 0.94vw, 2.106rem);
				color: #fff;
				text-align: center;


				/* background: linear-gradient(90deg, var(--third_color) 0%, var(--second_color) 100%); */
				background: linear-gradient(to right,
				#513319 0%,
				#8e7662 8%,
				#ac9884 16%,
				#e8d3bd 24%,
				#edd5bd 32%,
				#b7a38f 40%,
				#8c7561 50%,
				#ac937a 60%,
				#b69c81 70%,
				#edd5bd 82%,
				#624222 100%
				);
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
				-webkit-text-fill-color: transparent;
				-moz-background-clip: text;
				-moz-text-fill-color: transparent;
			}




				.indexmain .banner .pcBanner,
				.indexmain .banner .mobileBanner {
					width:100%;
					height:auto;
					transition: all 0.3s ease-out;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					float: none;
					width: 100% !important;
					height: 100% !important;
					object-fit: cover;
					transition: all 0.3s ease-out;
				}
				.indexmain .banner .mobileBanner {
					display:none;
				}







		/*banner影片模組*/
		.index_bannerVideo{
			min-height: inherit;
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			width: 100%;
		}
		.youtube-player{
			width: 100%;
		}
			.index_bannerVideo span{
				position: relative;
				display: block;
				overflow: hidden;
				/* height: auto !important; */
				width: 100%;
				aspect-ratio: 16 / 9;
			}
			
				.index_bannerVideo iframe{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}






@media (max-width:1440px){
	.indexmain .banner::before{
		display: none;
	}
	.indexmain .banner::after{
		display: none;
	}
}




/* 在螢幕寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px){

.indexmain  .banner {
	/* min-height: 100dvh; */
}


.indexmain  .banner .swiper-container_pc ,
.indexmain  .banner .swiper-wrapper ,
.indexmain  .banner .swiper-slide ,
.indexmain  .banner .swiper-slide a{
/* min-height: inherit; */
}
	.indexmain  .banner .swiper-slide a {
		/* display: block; */
		/* position: relative; */
		/* padding-top: 28%; */
		aspect-ratio: unset;
		min-height: 100dvh;
	}

}


@media (max-width: 990px){

.indexmain  .swiper-button-prev, 
.indexmain .swiper-button-next {
	display: none;
}

	.indexmain  .banner .swiper-slide a {
		aspect-ratio: 64 / 83 ;
	}
	.indexmain .banner .pcBanner{
		display: none;
	}
	.indexmain .banner .mobileBanner {
		display: block;
		width: 100%;
		height: auto;
	}


	.banner_title{
		letter-spacing: normal;
		text-indent: unset;
	}
	.banner_title_box > .title{
		font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	}


	.index_bannerVideo span{
		height: auto !important;
	}



}
				













/*/////////////////////////////////////////////////////////*/
/*-------共用區塊--------*/
/*/////////////////////////////////////////////////////////*/


/*首頁內容區塊*/	
.mainContent{
	/* padding: 50px 0px; */
	
}



	/*----- 首頁標題1 -----*/
	.index_title {
		font-size: 30px;
		font-weight: bold;
		color: #777;
		line-height: 1.3;
		text-align: center;
		margin-bottom: 20px;
	}	
		.index_title h2{	
			font-size: inherit;
			line-height: initial;
			padding: 0;
			margin: 0;
			display: inline-block;
			font-weight: inherit;
		}	
	
		/*----- 首頁標題1 -----*/
	.index_title2 {
		padding: 0;
		font-size: clamp(1.563rem, 0.982rem + 0.94vw, 2.106rem);
		font-weight: bold;
		color: var(--dark_color);
		line-height: 1.3;
		text-align: center;
		margin-bottom: clamp(0.774rem, calc(-0.001rem + 1.25vw), 1.50rem);
		position: relative;
		/* background-color: #fff; */
		/* box-shadow: 0 0 20px #ecddcd; */
		text-shadow: 0 0  2px #fff;
		display: inline-block;
	}	
	.index_title2::before {
		/* position: absolute;
		content: '';
		background-image: url(../index/images/title_icon.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		width: 123px;
		height: 37px;
		top: 51%;
		left: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		/* z-index: -1; */
		/* background-color: #fff;
		box-shadow: 0 0 5px var(--fifth_color); */ 
	}
		.index_title2 h2{	
			font-size: inherit;
			line-height: initial;
			padding: 0;
			margin: 0;
			/* display: inline-block; */
			font-weight: inherit;

			position: relative;
			z-index: 2;
		}	
	

		.index_title3::before,
		.index_title4::before{
			z-index: -1;
		}
		
		.serviceBg_background .index_title2 {
		/* color: #fff; */
		overflow: hidden;
		}	

		.main.index_main {
			
		}
	



@media (max-width: 990px){
	
	.main.index_main {
		
	}
	.mainContent{
		padding: 0;
	}	



		/*----- 首頁標題1 -----*/
		.index_title{
			/* font-size: 25px; */
			/* line-height: 1.2; */
		}
		

}
@media (max-width: 540px){
	
	.index_title2 {
		/* font-size: 24px; */
	}
}



/* -----------首頁企業理念區塊------------------ */
.index_aboutBg{
	padding: clamp(1.936rem, calc(-0.001rem + 3.13vw), 3.75rem) 0;
	padding-top: clamp(3.875rem, 0.008rem + 6.24vw, 7.5rem);
	padding-bottom: clamp(1.936rem, 3.12vw, 3.75rem);
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: cover;
	background-color: var(--second_color);
}


.index_aboutBg::before{
	content: "";
	position: absolute;
	width: 100%;
	height: clamp(6.129rem, 9.9vw, 11.875rem);
	background-color: #fff;
	/* top: calc(100% - 11.875rem); */
	/* bottom: calc(clamp(1.936rem, 3.12vw, 3.75rem) * -1); */
	bottom: 0;
	z-index: -1;
}



.index_aboutBg .wrap{
	position: relative;
	/* width: 55%; */
	z-index: 2;
}
.index_aboutBg_in {
    display: flex;
    margin: 0 auto;
    gap: clamp(1.9355rem, 3.1250vw, 3.7500rem);
    align-items: center;
    justify-content: space-between;
}

.index_aboutLeft{
	width: 63%;
	max-width: 67.1875rem;
	/* aspect-ratio: 215 / 146; */
	position: relative;
	transition: var(--transition);
}
.index_aboutLeft a ,
.index_aboutLeft span{
	/* width: 63%;
	max-width: 67.1875rem; */
	aspect-ratio: 215 / 146;
	overflow: hidden;
	display: block;
	position: relative;
	transition: var(--transition);
}
.index_aboutLeft a:hover img,
.index_aboutLeft span:hover img{
	transform: scale(1.1);
}
.index_aboutLeft img {
    width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	float: none;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: var(--transition);
}

.index_aboutRight {
    width: 30%;
	transition: var(--transition);
}

.index_aboutRight_in {
    display: flex;
	flex-direction: column;
}

.index_about_area{
	color: var(--dark_color);
	overflow: hidden;
}
.index_about_area .text_area ul{
	list-style: none;
	padding: 0;
}
.index_about_area .text_area{
	color: inherit;
	font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem);
	line-height: 1.8;
}

.index_about_area .text_area .tit{
	line-height: 1.5;
	margin: 0;
	padding: 0;
	font-size: clamp(0.938rem, calc(-0.001rem + 62.31vw), 1.31rem);
}









.btn_area{
	margin-top: 30px;
	text-align: center;
}
.index_aboutBg_in .btn_area{
	text-align: center;
	
}

.index_aboutBg_in .index_title2 {
	text-align: left;
	/* margin-bottom: 20px; */
}
.index_aboutBg_in .index_title2 {
    display: inline-block;
}


@media(max-width:1140px){


.index_aboutLeft{
	width: 50%;
}
.index_aboutRight {
    width: 45%;
}


}



@media(max-width:990px){
	.index_aboutBg{
		/* padding: 30px 0; */
	}
	.index_aboutBg_in {
		display: flex;
		flex-direction: column-reverse;
	}
	.index_aboutLeft {
		width:100%;
	}
	.index_aboutRight {
		width:100%;
		/* margin-top: 20px; */
	}
	.index_aboutBg_in .index_title2 {
		text-align: center;
		/* display: block; */
	}
	.index_title2::before {
		/* left: 54%; */
	}
	.index_aboutBg_in .btn_area {
		text-align: center;
	}
}

@media(max-width:540px){
	/* .index_aboutBg_in .index_title2 {
		font-size: 24px;
	} */
	.index_title2::before {
		left: 60%;
	}
}


/* -----------首頁專業優勢區塊------------------ */
.index_advantagesBg{
	padding: 60px 0;
}
.index_advantagesBg .wrap{
	width: 90%;
}
.advantagesBg_background{
	/* background-image: url(../index/images/background.webp); */
	/* background-color: var(--primary_color); */
	/* background-repeat: no-repeat; */
	/* background-position: center center; */
	/* background-size: cover; */
	position: relative;
	padding: 30px 0;
}
/* .serviceBg_background::before{
	content: '/我們堅持使用最新穎的技術/';
	font-size: 18px;
	width: auto;
    height: auto;
    letter-spacing: 1.3em;
    position: absolute;
    top: -54px;
    left: 140px;
	font-weight: 600;
} */
.index_advantagesBg_in {
    
}

.index_advantagesLeft{
	width: 40%;
}
.index_advantages_area{
	display: -webkit-box;
	/* -webkit-line-clamp: 4; */
	-webkit-box-orient: vertical;
	overflow : hidden;
}

.index_advantages_area .text_area{
	font-size: clamp(1rem, 0.734rem + 0.43vw, 1.25rem);
}

.index_advantages_area .text_area ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.index_advantages_area .text_area li{
	padding: .625rem 0;
	display: flex;
    flex-direction: column;
}

.index_advantages_area .text_area li span{
	font-weight: 600;
	margin-bottom: .3125rem;
}



.index_advantagesRight{
	width: 1000px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.index_advantagesRight img {
    width: 100%;
    height: auto;
    /* object-fit: cover; */
}

/* .index_serviceRight {
    width: calc( 100% - 40% - 100px );
} */

.index_advantagesBg_in .btn_area{
	text-align: left;
}

.index_advantagesBg_in .index_title2 {
	
	text-align: left;
	margin-bottom: 20px;
}
.index_advantagesBg_in .index_title2 {
    display: inline-block;
}
.index_advantagesBg_in .index_title2::before{
	display: none;
}

@media(max-width:1700px){
	.advantagesBg_background::before{
		letter-spacing: 1.2em;
		left: 140px;
	}
	.index_advantagesRight{
		width: 700px;
		bottom: -234px;
	}
	.index_advantagesRight {
		right: 7%;
	}
}
@media(max-width:1520px){
	.index_advantagesBg{
		padding: 225px 0 60px 0;
		
	}
	.advantagesBg_background::before{
		letter-spacing: 1em;
		left: 113px;
	}
}
@media(max-width:1440px){
	.index_advantagesBg .wrap {
		width: 93%;
	}
	.advantagesBg_background::before {
		left: 60px;
	}
	.index_advantagesRight {
		width: 600px;
		bottom: -200px;
	}
	.index_advantagesRight {
		right: 6%;
	}
	
}
@media(max-width:1280px){
	
	.advantagesBg_background::before {
		font-size: 16px;
	}
	.index_advantagesRight {
		right: 3%;
	}
}
@media (max-width: 1100px){
	.index_advantagesBg {
		padding: 60px 0;
	}
	.advantagesBg_background::before {
		display: none;
	}
	.index_advantagesLeft {
		width: 100%;
	}
	.index_advantagesBg_in .index_title2 {
		display: block;
	}
	.index_advantagesBg_in .index_title2 {
		text-align: center;
		
	}
	.index_advantagesBg_in .btn_area {
		text-align: center;
	}
	.index_advantagesRight {
		display: none;
	}

	
}

@media (max-width: 990px) {
	.index_advantagesBg .btn_area {
		text-align: center;
	}
}
@media(max-width:540px){
	.index_advantagesBg {
		padding: 30px 0;
	}
}



/* -----------首頁服務項目區塊------------------ */


.serviceBg_background{
	background-image: url();
}

.index_serviceLeft{
	margin: 0 auto;

}

.index_service_area{
	padding: 1.25rem 0;
}
.index_service_area .text_area{
	font-size: clamp(1rem, 0.734rem + 0.43vw, 1.25rem);
}

.index_service_area .text_area ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.index_service_area .text_area li{
	padding: .625rem;
	
}



/*========================================================*/
/*-------首頁_服務項目區塊--------*/
/*========================================================*/

.index_serveBg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.index_serveBg .wrap {
	max-width: 1000px;
}

/*----- 首頁標題1 -----*/
.index_serveBg .index_title {
	color: #fff;
}


.index_serve_area {
	padding-top: 30px;
}

.index_serve_top {
	margin-bottom: 30px;
}

.index_serve_area .text_area {
	color: inherit;
	line-height: 2;
}

.index_serve_bottom {}

.index_serve_bottom ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: -60px;
}

.index_serve_bottom li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: block;
	width: 25%;
	padding: 0 10px 60px;
	opacity: 0;
}




/* ===========專業優勢區塊============= */
.index_excellent_bg{
	padding:  0  0 clamp(2.7420rem, 4.4271vw, 5.3125rem);
	background-color: #fff;
}


	.index_excellent_bg .index_title2{
		/* color: var(--dark_color); */
	}
		.index_excellent_bg .index_title2 strong{
			line-height: 1.5;
			margin: 0;
			padding: 0;
			font-weight: 600;
			color: var(--primary_color);
			font-size: clamp(0.938rem, calc(-0.001rem + 62.31vw), 1.31rem);
		}








	.index_excellent_bg .wrap{
		width: 90%;
		max-width: 61.875rem;
		display: flex;
		flex-direction: column;
		row-gap: clamp(1.290rem, calc(-0.001rem + 2.08vw), 2.50rem);
	}

	.index_excellent_bg .excellentArea{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* margin: 40px -15px -30px; */

		column-gap: 1.0417vw;
		row-gap: clamp(0.645rem, calc(-0.001rem + 1.04vw), 1.25rem);
	}

		.excellentArea .excellent_list{
			width: calc((100% / 2) - (1 * 1.0417vw / 2)); /*2欄平均寬度，扣除間距*/
			box-sizing: border-box;
			/* padding: 0 17px 35px; */
		}

			.excellent_list .excellent_listin{
				display: flex;
				align-items: center;
			}

			.excellent_list .excellent_listin{
				/* padding: 0px 30px; */
			}

				.excellent_listin img{
					width: 4.6875rem;
					height: auto;
				}

				.excellent_listin .excellent_img{
					padding-right: clamp(1.290rem, calc(-0.001rem + 2.08vw), 2.50rem);
					padding-right: clamp(1.129rem, calc(-0.001rem + 1.82vw), 2.19rem);
				}

				.excellent_listin .excellent_textArea{
					box-sizing: border-box;
					border-left: 3px solid var(--primary_color);
					/* padding: 0px 0px 0px 32px; */
					width: 100%;
					padding-left: clamp(1.129rem, calc(-0.001rem + 1.82vw), 2.19rem);
				}

				.excellent_listin .excellent_textArea .title{
					/* font-family: 'Noto Sans TC'; */
					font-weight: 400;
					font-size: clamp(1.125rem, calc(-0.001rem + 72.00vw), 1.52rem);
					font-size: clamp(1.125rem, 0.725rem + 0.65vw, 1.5rem);
					line-height: 1.5;
					margin-bottom: clamp(0.323rem, calc(-0.001rem + 0.52vw), 0.63rem);
					/* padding: 0px 0px 20px 0px; */
					color: var(--primary_color);
				}

				.excellent_listin .excellent_textArea .text{
					/* font-family: 'Noto Sans CJK TC'; */
					font-weight: 400;
					font-size: 1rem;
					font-size: clamp(0.875rem, 0.742rem + 0.22vw, 1rem);
					line-height: 1.5;
				}

	

@media (max-width: 1080px){	

	.index_excellent_bg .wrap{
		width: 950px;
	}

}

@media (max-width: 990px){

	.index_excellent_bg .wrap {
		/* width: 90%; */
		width: calc(100% - (2.1875rem * 2));
		max-width: unset;
	}
	.index_excellent_bg {
		/* padding: 30px 0; */
		padding-top: 0;
	}

}
@media (max-width: 860px){

.index_excellent_bg .excellentArea{
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: 1.56rem;
}

	.excellentArea .excellent_list{
		width: 100%;
		/* box-sizing: border-box; */
		/* padding: 0 0px 20px; */
	}
}
@media (max-width: 640px){

	.excellent_listin .excellent_img{
		padding-right: 0.63rem;
	}
		.excellent_listin img{
			width: 3.13rem;
		}

	.excellent_listin .excellent_textArea {
		border-left-width: 2px;
		/* padding: 0px 0px 0px 20px; */
		padding-left: 0.63rem;
	}
		.excellent_listin .excellent_textArea .title {
			/* font-size: 20px; */
			padding: 0;
		}

}

















/* ================================================== */
/* ===========服務項目區塊============= */
/* ================================================== */

	.index_service_bg{
		position: relative;
		/* background: var(--primary_color); */
		padding:clamp(2.742rem, 4.43vw, 5.313rem) 0;
		overflow: hidden;
		background-color: #fff;
	}	
	.index_service_bg::before{
		/* position: absolute;
		content: "";
		background-image: url(../index/images/service_bg.webp);
		background-position: bottom right;
		background-repeat: no-repeat;
		background-size: 99.9%;
		aspect-ratio:3 / 2;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0.4;
		z-index: 0; */
	}
		.index_service_bg .wrap{
			max-width: 62.5rem;
			position: relative;
			z-index: 2;
		}
			/* .index_service_bg .text_area{
				text-align: center;
				color: #6c6c6c;
			} */

			.index_service_bg .word{
				width: 56%;
				position: absolute;
				bottom: 11%;
				left: 2%;
				z-index: 0;
			}
				.index_service_bg .word img{
					width: 100%;
					height: auto;
				}



	
	.index_service_bg ul.serviceArea{
		padding: 0;
		margin: 0;
		display: block;
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	
		display: grid;
		/* grid-template-columns: 1.57fr repeat(2,1fr);
		gap: clamp(0.903rem, 1.46vw, 1.75rem); */

			grid-template-areas:
			"txt txt txt a a b b"
			"txt txt txt a a b b"
			"txt txt txt a a b b"
			"txt txt txt a a b b"
			"txt txt txt d d b b"
			"c c c d d b b"
			"c c c d d e e"
			"c c c d d e e"
			"f f g g g e e"
			"f f g g g e e"
			"f f g g g e e"
			"f f g g g e e";
		grid-gap: 1.875rem;
		/* max-height: 1000px; */
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}
		
		.index_service_bg ul.serviceArea li{
			padding: 0;
			margin: 0;
			display: block;
			list-style-type: none;
			box-sizing: border-box;
		}

		.index_service_bg ul.serviceArea li.description{
			grid-area: txt;
			display: flex;
			flex-direction: column;
			/* align-items: center; */
			justify-content: center;
			text-align: left;
		}

			.index_service_bg .index_title2{
				text-align: left;
			}
			.index_service_bg .description_text{
				font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem);
				line-height: 1.8;

				display: -webkit-box;
				-webkit-box-orient: vertical;	
				-webkit-line-clamp: 10;	
				overflow: hidden;
			}

		.index_service_bg ul.serviceArea li.list{
			transition: var(--transition);
		}
			.index_service_bg .serviceList{
				position: relative;
				border-radius: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem);
			}

				.index_service_bg li.list .serviceList{
					box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px, rgba(255, 255, 255, 0.12) 0px -12px 30px,
					 rgba(255, 255, 255, 0.12) 0px 4px 6px, 
					 rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
				}



			
				.index_service_bg .service_img{
					display: block;
					text-decoration: none;
					position: relative;
					aspect-ratio: 267 / 276;
					border-radius: inherit;
					overflow: hidden;
				}
					.index_service_bg .service_img img{
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						float: none;
						width: 100% !important;
						height: 100% !important;
						object-fit: cover;
						transition: var(--transition);
					}


					    
					.index_service_bg .list1{
						grid-area: a;
					}
						.index_service_bg .list1 .service_img{
							/* aspect-ratio: 268 / 441; */
						}
					.index_service_bg .list2{
						    grid-area: b;
					}
					.index_service_bg .list2 .service_img{
						/* aspect-ratio: 268 / 563; */
					}
					.index_service_bg .list3{
						grid-area: c;
					}	
						.index_service_bg .list3 .service_img{
							/* aspect-ratio: 268 / 563; */
							/* aspect-ratio: 441 / 265; */
						}
					.index_service_bg .list4{
						    grid-area: d;
					}	
						.index_service_bg .list4 .service_img{
							
						}
					.index_service_bg .list5{
						    grid-area: e;
					}	
						.index_service_bg .list5 .service_img{

						}



					.index_service_bg .service_img:before{
						position: absolute;
						content: "";
						width: 100%;
						height: 75%;
						background-image: linear-gradient(to top, #ffffff 0%, #ffffff 20%, #ffffff73 70% ,#fff0 95%, #fff0 100%);
						bottom: 0;
						z-index: 1;
						/* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
					}

					

				.index_service_bg .serviceBottom{
					padding: clamp(0.644rem, -0.003rem + 1.04vw, 1.25rem);
					padding-top: 0;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;

					text-shadow:0px 0px 16px #ffffff , 0px 0px 16px #ffffff , 0px 0px 16px #ffffff;
				}
					.index_service_bg .serviceBottom h3{
						padding: 0;
						margin: 0;
						display: block;
						font-weight: normal;
						font-size: clamp(1.125rem, 0.725rem + 0.65vw, 1.5rem);
						line-height: 1.2;
						text-align: center;
						margin-bottom: calc(1.25rem * 0.5);
						font-weight: 700;
					}
						.index_service_bg .serviceBottom h3 a{
							display: inline-block;
							text-decoration: none;
							color: var(--dark_color);
						}
						.index_service_bg .serviceBottom h3 a:hover{
							/* color: #11a575; */
							transition:var(--transition);
						}
					.index_service_bg .serviceBottom .service_remark{
						font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem);
						/* line-height: 1.8; */
						line-height: 1.2;
						color: var(--dark_color);
						text-align: center;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}


@media (max-width: 1650px){

	
	.index_service_bg ul.serviceArea{
		/* margin: 40px -10px -20px; */
	}
		
		.index_service_bg ul.serviceArea li{
			/* padding: 0; */
		}
		.index_service_bg .serviceBottom {
			/* padding: 0 10px 10px; */
		}

}

/* 在螢幕寬度大於861時，套用這裡的特定樣式 */
@media screen and (min-width: 860.1px) {
					 
	.index_service_bg .service_img{
		aspect-ratio: 267 / 276;
	}

	.index_service_bg .list1{
	/* grid-area: a; */
	}
		.index_service_bg .list1 .service_img{
		aspect-ratio: 268 / 441;
		}
	.index_service_bg .list2{
	/* grid-area: b; */
	}
		.index_service_bg .list2 .service_img{
		aspect-ratio: 268 / 563;
		}
	.index_service_bg .list3{
	/* grid-area: c; */
	}	
		.index_service_bg .list3 .service_img{
		/* aspect-ratio: 268 / 563; */
		aspect-ratio: 441 / 265;
		}
	.index_service_bg .list4{
	/* grid-area: d; */
	}	
		.index_service_bg .list4 .service_img{

		}
	.index_service_bg .list5{
	/* grid-area: e; */
	}	
		.index_service_bg .list5 .service_img{

		}
}

@media (max-width: 860px){

	.index_service_bg {
		/* padding: 30px 0; */
	}

	.index_service_bg ul.serviceArea{
		display: flex;
		flex-wrap: wrap;
		gap: 0.9375rem;
	}
		
	.index_service_bg ul.serviceArea li.description {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.index_service_bg ul.serviceArea li:not(.list) ,
	.index_service_bg ul.serviceArea li.list1{
		width: 100%;
	}
	.index_service_bg ul.serviceArea li.list:not(.list1){
		width: calc((100% / 2) - (1 * 0.9375rem / 2)); /* 2欄平均寬度，扣除間距*/
	}
	.index_service_bg ul.serviceArea li.list{
		/* aspect-ratio: 1; */
	}

		.index_service_bg  .service_img{
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			aspect-ratio: 1;
		}
		.index_service_bg .service_img:before {
			display: none;
		}

		.index_service_bg .serviceBottom{
			position: relative;
			top: unset;
			left: unset;
			background-color: #fff;
			border-radius: inherit;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			padding: .625rem;
		}
		.index_service_bg .serviceBottom h3{
			margin-bottom: .3125rem;
		}

		.index_service_bg .word {
			width: 95%;
			position: absolute;
			bottom: 10px;
			left: 50%;
			z-index: 0;
			transform: translateX(-50%);
		}

}

@media (max-width: 550px){

	
	.index_service_bg ul.serviceArea{
		/* margin: 20px 0px -20px; */
	}
	
	.index_service_bg ul.serviceArea li{
		width: 100% !important;
	}

}












/* ============================================================= */
/* 贏向未來 */
/* ============================================================= */


.index_winfutureBg{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-size: cover;
	/* padding: clamp(3.248rem, 0.045rem + 5.17vw, 6.25rem) 0; */
	background-color: #fff;
	position: relative;
}


	.index_winfutureBg .wrap{
		position: relative;
		/* min-height: 100dvh;*/
		/* width: 100%; */
		/* display: flex; */
		/* align-items: center; */
		/* max-width: 99.75rem; */
		/* display: grid; */
		/* grid-template-columns: 746px auto; */
		/* gap: clamp(1.806rem, -0.001rem + 2.92vw, 3.5rem); */
	}

		.index_winfuture_text_area{
			/* max-width: 21.875rem; */
			/* max-width: clamp(16.875rem, 11.541rem + 8.61vw, 21.875rem); */
			margin: 0 auto;
			/* padding-left: calc(10dvw * 0.5); */
			display: flex;
			flex-direction: column;
			gap: clamp(0.806rem, 1.3vw, 1.563rem);
			/* padding-top: clamp(1.613rem, -0.001rem + 2.6vw, 3.125rem); */
		}


			.index_winfuture_text_area  .headline_title{
				/* font-size: clamp(1.25rem, 0.917rem + 0.54vw, 1.563rem); */
				/* font-weight: 900; */
				text-align: left;
				/* margin-bottom: clamp(2.256rem, -0.004rem + 3.65vw, 4.375rem); */
			}

			.index_winfuture_text_right{
				display: flex;
				flex-direction: column;
				row-gap: clamp(1.677rem, 2.71vw, 3.25rem);
			}

			.index_winfuture_text{
				display: flex;
				flex-direction: column;
				color: #404040;
				font-weight: 400;
				height: auto;
				letter-spacing: 0.06em;
				line-height: 2;
				text-align: left;
				width: auto;
				max-width: 100%;
				/* justify-content: flex-start; */
				gap: clamp(0.3226rem, 0.5208vw, 0.6250rem); /* 5.16px , 0.5208vw , 10.00px */
			}

			.index_winfuture_text .title{
				font-size: clamp(1rem, 0.733rem + 0.43vw, 1.25rem);
			}
			.index_winfuture_text .description{
				font-size: clamp(0.813rem, 0.612rem + 0.32vw, 1rem);				
			}


			.index_winfuture_img{
				/* max-width: 746px; */
				width: 100%;
				box-sizing: border-box;
			}
				.index_winfuture_img span{
					position: relative;
					/* padding-top: 100%; */
					/* border-radius: 10px; */
					aspect-ratio: 746 / 564;
					display: block;
					overflow: hidden;
				}
					.index_winfuture_img span img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						float: none;
						width: 100% !important;
						height: 100% !important;
						object-fit: cover;
						transition: 0.3s ease all;
					}

			.index_winfuture_text_area1{
				background-color: #e3e3e3;
				/* padding-left: clamp(1.806rem, -0.001rem + 2.92vw, 3.5rem); */
			}
				.index_winfuture_text_area1 .wrap{
					/* display: grid;
					grid-template-columns: 746px auto;
					gap: clamp(1.806rem, -0.001rem + 2.92vw, 3.5rem); */
				}
				.index_winfuture_text_area1 .index_winfuture_text_right{
				}


			.index_winfuture_text_area2{
				

			}
				.index_winfuture_text_area2 .wrap{
					/* min-height: 100dvh; */
					z-index: 3;
				}



			.index_winfutureBg .word{
				/* width: 56%; */
				width: 80%;
				position: absolute;
				bottom: 11%;
				left: 2%;
				z-index: 1;
			}
				.index_winfutureBg .word img{
					width: 100%;
					height: auto;
				}


			.index_winfutureBg .background_image{
				position: absolute;
				bottom: 0%;
				left: 0%;
				min-height: calc(100% + 15%);
				width: 100%;
				overflow: hidden;
				pointer-events: none;
			}
			.index_winfutureBg .background_image_pic{
				position: absolute;
				bottom: 0%;
				left: 0%;
				z-index: 0;
				min-height: inherit;
				width: 100%;
			}
			.index_winfutureBg .background_image .pic{
				aspect-ratio: 20 / 11;
				width: 100%;
				background-repeat: no-repeat;
				background-position: bottom right;
				background-size: contain;
				pointer-events: none;
				z-index: 0;
				opacity: 0.5;
				position: absolute;
				bottom: 0;
			}




@media (max-width: 1280px){


}


/* 在螢幕放大125%且寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 990.1px) {

	.index_winfutureBg .wrap{
		position: relative;
		max-width: 99.75rem;
		display: grid;
		grid-template-columns: clamp(24.063rem, -0.006rem + 38.86vw, 46.625rem) auto;
		gap: clamp(1.806rem, -0.001rem + 2.92vw, 3.5rem);
	}


	.index_winfuture_text_area  .headline_title{
		margin-bottom: clamp(0.838rem, -0.003rem + 1.36vw, 1.625rem);
	}


	.index_winfuture_text_area1{
		min-height: 100dvh;		
		padding: 1.5625rem 0;
		/*padding-bottom: clamp(7.188rem, -0.08rem + 11.73vw, 14rem);*/
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
		.index_winfuture_text_area1 .wrap{
			/* padding-top: clamp(9.313rem, -0.088rem + 15.18vw, 18.125rem); */
			
		}
			.index_winfuture_text_area1 .index_winfuture_text_right{
				padding-right: 16.6667dvw; /*320*/
			}



	.index_winfutureBg2{
		position: relative;
	}
		.index_winfuture_text_area2{
			overflow: hidden;
			/* padding-top: clamp(1.774rem, 2.86vw, 3.438rem); */
			/* padding-bottom: clamp(19.625rem, -0.11rem + 31.86vw, 38.125rem); */
		}
			.index_winfuture_text_area2 .wrap{
				min-height: 100dvh;
				z-index: 3;
			}
			
				.index_winfuture_text_area2	.index_winfuture_text_right{
					padding-top:clamp(1.563rem, -0.104rem + 2.69vw, 3.125rem);
					gap: clamp(3.094rem, -0.006rem + 5.01vw, 6rem);
				}
			
				.index_winfuture_text_area2 .index_winfuture_img{
					opacity: 0;
				}


}





@media (max-width: 990px){


	.index_winfutureBg{
		padding-bottom: 0;
	}
		.index_winfutureBg .wrap{
			display: flex;
			flex-direction: column-reverse;
			row-gap: 1.875rem;
		}

			.index_winfuture_text_area{
				overflow: hidden;
				padding: clamp(2.737rem, -0.009rem + 4.43vw, 5.313rem) 0;
			}
				.index_winfuture_text_area  .headline_title{
					/* font-size:1.5rem; */
				}



			.index_winfuture_text_area2{
				padding-bottom:calc(clamp(2.737rem, -0.009rem + 4.43vw, 5.313rem) * 2);
			}


	.index_winfutureBg .img{
		/* position: relative;
		top: unset;
		left: unset;
		right: unset;
		bottom: unset;
		width: 100%;
		max-width: unset; */
	}
	.index_winfutureBg .img span{
		/* aspect-ratio: 1; */
	}




	.index_winfutureBg .background_image{
		/* position: absolute;
		bottom: 0%;
		left: 0%;*/
		min-height: calc(100% + 0%);
		/* width: 100%;
		overflow: hidden;
		pointer-events: none;  */
	}
		.index_winfutureBg .background_image_pic{
			/* position: absolute;
			bottom: 0%;
			left: 0%;
			z-index: 0;			
			width: 100%; */
			min-height: 100%;
		}
			.index_winfutureBg .background_image .pic{
				width: 300%;
				opacity: 0.2;
				height: 100%;
				background-size: cover;
			}


		

	.index_winfutureBg .word {
        width: 95%;
        position: absolute;
        bottom: 10px;
        left: 50%;
        z-index: 0;
        transform: translateX(-50%);
    }

	.index_winfutureBg2 .index_winfuture_img{
		display: none;
	}

}




@media (max-width: 640px){

	.index_winfuture_text_area2{
		padding-bottom:calc(clamp(2.737rem, -0.009rem + 4.43vw, 5.313rem) * 1.5);
	}

}