/*==========================================================*/
/*-------首頁內容--------*/
/*==========================================================*/


.index_tit{
	font-size: min(max(1.6667vw, 20px), 32px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
	/* modify by peggy 20241023  */
	font-size: min(max(1.6667vw, 20px), 27px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/

	/* font-size: 25px; */
	margin-bottom: 25px;
	font-weight: 700;
}
	.index_tit strong{
		font-size: inherit;
		line-height: inherit;
		font-weight: inherit;
		padding: 0;
		margin: 0;
	}
	.index_tit span{
		margin-left: 10px;
	}




/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
/* @media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 150/100){ */
@media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 1000px) and 
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
only screen and (min-resolution: 150dpi) and (max-resolution: 174dpi) {
	
	.index_tit{
		/* modify by peggy 20241023  */
		font-size: min(max(1.6667vw, 14px), 18px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
		margin-bottom: 10px;
	}

}



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

.indexBannerBg{
	/* background-color: var(--primary_color); */
	background-color: var(--third_color);
}

	.indexBannerBg .wrap{
		width:100%;
	}








    .indexBannerBg  .swiper_button_area{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 32px;
        max-width: calc(100% / 3 * 2);
        width: 100%;

		bottom: calc(32px - 15px);
    }
    

        .indexBannerBg .swiper_button{
            display: flex;
            justify-content: center;
            align-items: center;
            
           
            /* left: 50%; */
           
            
            /* max-width: 80%; */
            /* -webkit-transform: translateX(-50%); */
            /* transform: translateX(-50%); */
            z-index: 1;
        }


		.indexBannerBg .swiper-button-prev , 
		.indexBannerBg .swiper-button-next {
            /* opacity: 0;
            bottom:10px;
            top:unset;
            position:absolute; */
			width: 25px;
			height:25px;
			background-size: 25px;
			opacity: 1;
			position: unset;
			left: unset;
			right: unset;
			top: unset;
			bottom: unset;
			margin: 0;
			background-position: center;
		}
		.indexBannerBg .swiper-button-prev{
			/* left:35%;			 */
			background-image: url(../images/left_arrow3.svg);
            /* background-position: center left; */
		}
		.indexBannerBg .swiper-button-next {
			/* right:35%; */
			background-image: url(../images/right_arrow3.svg);
            /* background-position: center right; */
		}
		.indexBannerBg:hover  .swiper-button-prev , 
		.indexBannerBg:hover  .swiper-button-next {
			opacity: 1;
			transition:0.5s ease all;
		}
		







    

/*首頁banner區*/
.indexBannerArea{
	/* display: flex; */
	/* flex-direction: row; */
	/* flex-wrap: wrap;	 */
	display: grid;
	/* grid-template-columns: 25% 75%; */
	grid-template-columns: 19.2% 80.8%;
}


/* 首頁banner左側區 */
.indexBannerLeft{
	/* width: 25%; */
	width: 100%;
	box-sizing: border-box;
	background-color: var(--primary_color);
	/* background-color: #859386; */
	display: flex;
	flex-direction: column;
}

.indexBannerLeftIn{
	padding: 30px 20px;
	height: calc(100% - 60px);
	box-sizing: border-box;
	/* display: flex; */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}


.indexBannerLeftIn .index_tit{
	color: #fff;
}
	.indexBannerLeftIn .time{
		font-size: 12px;
		color: #fff;
		display: inline-block;
		margin: 0 0 15px;
	}
	.indexBannerLeftIn .indexBannerLeft_tit{
		color: #fff;
		display: block;
		font-size: 21px;
		font-size: min(max(1.0938vw, 18px), 21px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
		line-height: 1.5;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bolder;
		margin: 0 0 15px;
		/* width: 100%; */
	}
	/* 修改a連結的css modify by peggy 20240926 start */
	.indexBannerLeftIn .indexBannerLeft_tit a{
		color: #fff;
		display: block;
		font-size: 21px;
		font-size: min(max(1.0938vw, 18px), 21px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
		line-height: 1.5;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bolder;
		/* margin: 0 0 15px; */
		/* width: 100%; */
	}
	/* 修改a連結的css modify by peggy 20240926 end */
	.indexBannerLeftIn .indexBannerLeftText{
		flex-grow: 1;
	}
		.indexBannerLeftIn .text{
			font-size: 15px;
			line-height: 1.5;
			color: #fff;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			/* width: 100%; */
		}

	/* 首頁banner左側More */
	.indexBanner_More{
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		border: 2px solid #ffffff;
		padding: 2px 8px 2px 6px;
		color: #ffffff;
		width: 110px;
		text-align: center;
		border-radius: 3px;
		font-family: var(--foreign_font);
		margin: 30px 0 0;
	}		
		.indexBanner_More a{
			color: #ffffff;
			text-decoration: none;
		}
		.indexBanner_More i{
			color: #fff;
			font-size: 20px;
			line-height: 19px;
			vertical-align: middle;
			font-weight: bolder;
		}

		.indexBanner_More:hover{
			background-color: #ffffff;
			transition: all 0.3s ease-out;
		}
		.indexBanner_More:hover a{
			transition: all 0.3s ease-out;
			color: var(--primary_color);
		}	
		.indexBanner_More:hover i{
			transition: all 0.3s ease-out;
			color: var(--primary_color);
		}																


.indexBannerContent{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-columns: 2fr 1.2fr;

	grid-template-columns: 3fr 1fr;  /* 0.75fr 0.25fr*/
}
	.indexBannerRightImg{

	}
		.indexBannerRightImg a{
			display: block;
		}



/* 首頁banner右側區 */
.indexBannerRight{
	/* width: 25%; */
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	/* height: 100%; */
}
	.indexBannerRight ul{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		list-style-type: none;
		position: relative;
		height: 100%;
		display: grid;
		grid-template-rows: repeat(3 , 1fr);
	}
		.indexBannerRight li:first-of-type{
			/* background-color: #fff; */
		}
		.indexBannerRight li{
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			list-style-type: none;
			/* background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 0;
			padding-bottom: 100%; 
			height: 300px;*/
			width: 100%;
			/* position: absolute; */
			/* height: 100%; */
			/* border-top: 1px #c51d1d solid; */
		}
		.indexBannerRight li.pic{
			margin: 0;
			padding: 0;
			list-style-type : none;
			position: relative;
			display: block;
			overflow: hidden;
			cursor: pointer;


			display: flex;
			flex-direction: column;
		}
			.indexBannerRight li.pic a{
				display: block;
				flex-grow: 1;
			}
				.indexBannerRight li.pic 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;
				}
				.indexBannerRight li.pic:hover{
					opacity: 0.5;
				}
				.indexBannerRight li.pic:hover img{
					transform: scale(1.1);
					transition: 0.3s ease all;
				}


				.pcBanner_m{
				}
				.mobileBanner_m{
					display: none;
				}

		.indexBannerRight ul li.pic2{
			/* background-position: center;
			background-repeat: no-repeat;
			background-size: cover; */
			/* height: 50%; */
			/* bottom: 0; */
		}
			/* .indexBannerRight li img{	
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				float: none;
				border-radius: 50%;
				width: 100% !important;
				height: 100% !important;
				object-fit: cover;
				transition: 0.3s ease all;
			} */

		/* .indexBannerRight li{
			height: 50%;
			box-sizing: border-box;
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			list-style-type: none;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 0;
			padding-bottom: 100%;
		} */





.indexBannerArea .banner{
	/* width: 65%; */
	/* width: 50%; */
	width: 100%;
	box-sizing: border-box;
	/* height: 600px; */
}




/* 在螢幕放大125%且寬度大於991時，套用這裡的特定樣式 */ 
/* @media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), 
only screen and (-o-min-device-pixel-ratio: 125/100){ */

@media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 1000px) and 
(-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
only screen and (min-resolution: 125dpi) and (max-resolution: 149dpi) {


    .indexBannerBg  .swiper_button_area{
        bottom: calc((32px / 1.25) - 14px);
    }	
		.indexBannerBg .swiper-button-prev , 
		.indexBannerBg .swiper-button-next {
			width: calc(25px / 1.25);
			height:calc(25px / 1.25);
			background-size: calc(25px / 1.25);
		}	
		.indexBannerBg .swiper-pagination-bullet {
			margin: 0 calc(5px / 1.25);
			width: calc(16px / 1.25);
			height: calc(16px / 1.25);
		}				
}

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
/* @media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 150/100){ */
@media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 1000px) and 
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
only screen and (min-resolution: 150dpi) and (max-resolution: 174dpi) {
	
    .indexBannerBg  .swiper_button_area{
        bottom: calc((32px / 1.5) - 12px);
    }		
		.indexBannerBg .swiper-button-prev , 
		.indexBannerBg .swiper-button-next {
			width: calc(25px / 1.5);
			height:calc(25px / 1.5);
			background-size: calc(25px / 1.5);
		}	
		.indexBannerBg .swiper-pagination-bullet {
			margin: 0 calc(5px / 1.5);
			width: calc(16px / 1.5);
			height: calc(16px / 1.5);
		}		
		
		

				
		.indexBannerLeftIn{
			padding: 15px 15px;
			height: calc(100% - 30px);
		}


		.indexBannerLeftIn .time{
			margin: 0 0 10px;
		}
		.indexBannerLeftIn .indexBannerLeft_tit{
			margin: 0 0 10px;
		}

		/* 首頁banner左側More */
		.indexBanner_More{
			margin: 15px 0 0;
		}	


		/* .indexBannerBg .pcBanner {
			padding-top: 52%;
		} */

}

@media (max-width: 990px){

	.indexBannerBg .wrap {
		width: auto;
	}

	.banner .swiper-pagination-bullet {
		margin: 0 3px;
		width: 8px;
		height: 8px;
	}
	.banner .swiper-button-prev, 
	.banner .swiper-button-next {
		width: 16px;
		height: 16px;
		background-size:16px;
	}



		/*首頁banner區*/
		.indexBannerArea{
			/* display:block; */
			flex-direction: column;
			display: flex;
		}

			/* 首頁banner左側區 */
			.indexBannerLeft{
				width: 100%;
    			order: 1;
			}
				.indexBannerLeftIn{
					padding: 20px;
					height: calc(100% - 40px);
				}



	
		.indexBannerContent{
			/*display: grid;*/
			/* grid-template-columns: 7fr 3fr; */

			display: flex;
			flex-direction: column; /*20241017*/
		}
			.indexBannerArea .banner {
				/*width: 70%;*/
				order: 0;			
			}
				.pcBanner{
					display: none;
				}
				.mobileBanner {
					display: block !important;
				}




	
			/* 首頁banner右側區 */
			.indexBannerRight{
				/*width: 30%;*/
				/* order: -1; */
			}
				.pcBanner_m{
					display: none;
				}
				.mobileBanner_m{
					display: block;
				}

				.indexBannerRight ul { /*20241017*/
					height: auto;
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: auto;
				}
				.indexBannerRight li.pic a{
					padding: calc(50% / 2) 0; /*20241017*/
				}

            .indexBannerBg  .swiper_button_area{
                bottom: 5px;
                max-width: 100%;
            }
}