/* @import url(../css/style.css); */
/* @import url(../css/style_in/style_student/style_student.css); */




.titStyle1{
	margin-bottom: clamp(0.9678rem, 1.5625vw, 1.8750rem); /* 15.48px , 1.5625vw , 30.00px */
}

.titStyle1  strong {
	margin: 0;
	padding: 0;
	padding-right: clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 10.32px , 1.0417vw , 20.00px */

	display: inline-flex;
	align-items: flex-end;
	position: relative;
	gap:clamp(0.3226rem, 0.5208vw, 0.6250rem); /* 5.16px , 0.5208vw , 10.00px */
}
.titStyle1 strong::first-letter{
	color: var(--primary_color);
}
.titStyle1  strong::before {
}

.titStyle1  strong::before {
	content: "";
	height: auto;
	width: clamp(1.5625rem, 2.6042vw, 3.1250rem); /* 34.72px , 2.6042vw , 50.00px */
	display: block;
	background-image: url(../images/title_icon2.svg);
	background-size: 99.9%;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: 181.6 / 203.3;
}



.mainContent{
	display: flex;
	flex-direction: column;
	/*row-gap: clamp(2.2581rem, 3.6458vw, 4.3750rem) ;*/ /* 36.13px , 3.6458vw , 70.00px */
	row-gap: clamp(1.875rem, -0.125rem + 3.23vw, 3.75rem) ;
}





@media (max-width: 990px){

    .titStyle1 {
        padding: 0px 0;
    }

}


@media (max-width: 768px){
	
    .titStyle1 {
        padding: 0px 0;
    }

}










/* ================================ */
/* banner */
/* ================================ */
.indexmain .banner .swiper-container {
	height:auto;
}
	.indexmain .banner .swiper-wrapper {
	}
		.indexmain .banner .swiper-slide {
		}
			.indexmain .banner .swiper-slide a{
				position: relative;
				display: block;
				/* padding-top: 33.7%; */
				aspect-ratio: 1920 / 740;
			}
				.indexmain .banner .swiper-slide img {
					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 .swiper-button-prev,
		.indexmain .banner .swiper-button-next{
			/* top:70%; */
		}

		/* 手機banner---------------- */
		.mobileBanner{
			display: none;
		}


/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@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) { 
	.indexmain .banner .swiper-slide a{

		/* padding-top: 40.7%; */

	}
}


@media(max-width:1100px){
	.indexmain .banner .swiper-slide a{
		/* aspect-ratio: 12 / 17; */
	}
}

@media(max-width:480px){

	.pcBanner{
		display: none;
	}

	.mobileBanner{
		display: block;
	}

	.indexmain .banner .swiper-slide a{
		aspect-ratio: 3 / 2;
	}
}













/* ======================================== */
/* 生活新鮮事輪播區塊--------------------------------- */
/* ======================================== */

.news_card_area{
	padding: 4.0625rem 0px;
    position: relative;
    /* margin-bottom: 2.5rem; */
	/* display: flex;
    flex-wrap: wrap;
    gap: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem); */
}

.subtitle{
	width: 100%;
	font-size: 1.8rem;
	font-weight: bold;
	margin: .9375rem auto; /* 15 */
	margin-bottom: 2.8125rem; /* 45 */
	text-align: center;
	color: var(--primary_color);
}

/* 輪播---------- */

.card_area_content{
	position: relative;

	padding-bottom: 2.5rem;
}

.news_card_area .swiper {
	width: 100%;
    max-width: 1570px; /* 改成你卡片區的寬 */
    margin: 0 auto;   /* 置中 */
}

.news_card_area .swiper .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
}

.news_card{
    width: 100%;
	background-color: var(--white_color);
    /* border-radius: 1.25rem; */
    /* overflow: hidden; */
    /* width: calc((100% - clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem) * 2) / 3); */
}

/* 圖片------------ */
.cardimg_area{
    width: 100%;
	
	border-radius: 1.25rem;
	overflow: hidden;
}
.news_img{
	display: block;
    position: relative;
    padding-top: 55%;
	transition: transform 0.4s ease;
}
.news_img img {
    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;
}

.news_info {
    padding-top: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: .9375rem;
}

.news_info_text {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.info_text_top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info_text_top .news_date{
	font-weight: 600;
	color: var(--dark_grey);
}

/* 標題----------------------------- */
.news_info_tit {
    font-size: .9375rem;
    font-weight: bold;
	line-height: 1.5;
    color: var(--black_color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
	height: calc(
		clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem)
		* 1.5
		* 1
	);
    overflow: hidden;
	transition: color 0.3s ease;
}

.news_info_brief {
    font-size: var(--card-font);
    font-weight: 200;
    color: var(--black_color);
    line-height: 1.5;
	height: calc(
		clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem)
		* 1.5
		* 3
	);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 動畫----------- */
.news_card:hover .news_img {
	transform: scale(1.1);
}
.news_card:hover .news_info_tit {
	color: var(--second_color);
}




/* 箭頭 */
.news_card_area  .swiper-button-prev {
    transform: translateX(70px);
	background-image: url(../images/left_arrow.svg);
}

.news_card_area  .swiper-button-next {
    transform: translateX(-70px);
	background-image: url(../images/right_arrow.svg);
}



.cardimg_area{
    position: relative;
    overflow: hidden;
}


/* 查看更多按鈕 */
.more_btn_area{
	padding-top: 1.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.more_btn_area .more_btn{
	width: 140px;
	padding: .625rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--third_color);
	border-radius: .625rem;
	color: var(--third_color);
	
}

/* RWD------------------------------------- */

@media(max-width:1570px){
	.news_card_area .swiper {
		width: 95%;
	}
}
@media(max-width:640px){
	.news_card_area .swiper {
		width: 90%;
	}
}



/* ========================================= */
/* 校園連結區塊------------------------------ */
/* ========================================= */

.school_link_area{
	background-image: url(../index/images/demo.webp);
	background-size: cover;
	background-position: 50% 30%;
	background-repeat: no-repeat;

	position: relative;
	padding: clamp(3.125rem, -0.209rem + 5.38vw, 6.25rem) 0;
}

.school_link_area::before{
	content: "";
	position: absolute;
	inset: 0;

	background: rgba(0,0,0,.3);
	backdrop-filter: blur(5px);

	/* -webkit-backdrop-filter: blur(10px); */
}


/* 區塊標題 ------------------------------ */
.school_link_area>.subtitle.subtitle2{
	position: relative;
	color: var(--white_color);
}


/* icon區塊 ------------------------------ */

.link_icon_area{
	width: 100%;
	max-width: 1570px;
	margin: 0 auto;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 20px;

	position: relative;
}

.link_icon_area>.link_icon{
	width: calc( 100% / 7 );
}
.link_icon_area>.link_icon a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .625rem; /* 10 */

	text-decoration: none;
}


/* 圖片區塊---------------------- */
.icon_img_area{
	background-color: var(--white_color);
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 6.25rem;
	height: 6.25rem;
}
.icon_img_area .icon_img{
	width: 3.125rem; /* 50 */
	display: block;
	position: relative;
	aspect-ratio: 1/1;
}
.icon_img_area .icon_img img{
	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;
}


/* 標題/名稱--------------------- */
.icon_tit{
	color: var(--white_color);
	font-size: clamp(0.875rem, 0.742rem + 0.22vw, 1rem);
	font-weight: 500;
	transition: transform 0.4s ease;
}

.link_icon_area>.link_icon:hover .icon_tit{
	color: var(--grey_color);
	transition: color 0.3s ease;
}

.link_icon_area>.link_icon:hover .icon_img_area{
	background-color: var(--light_grey);
}


@media(max-width:1250px){
	.link_icon_area>.link_icon{
		width: calc( 100% / 4 );
	}
}

@media(max-width:640px){
	.link_icon_area>.link_icon{
		width: calc( 100% / 3 );
	}
}

@media(max-width:540px){
	.link_icon_area>.link_icon{
		width: calc( 100% / 2 );
	}
}

@media(max-width:450px){
	.link_icon_area>.link_icon{
		width: 100%;
	}
}



/* ========================================= */
/* 快速連結區塊------------------------------ */
/* ========================================= */

.link_item_area {
	padding-bottom: 6.875rem;
}

.link_item_area{
	width: 90%;
	max-width: 1570px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.link_item {
	width: calc( (100% - 1.25rem*4) / 5 );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .625rem;
}

.item_img_area {
	width: 100%;
	max-width: 18.75rem;
	overflow: hidden;
	border-radius: .625rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.item_img {
	display: block;
	position: relative;
	aspect-ratio: 30 / 11;
}

.item_img img {
	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;
}

.link_item_tit {
	font-size: .9375rem;
	font-weight: 600;
}

@media(max-width:1250px){
	.link_item {
		width: calc( (100% - 1.25rem*3) / 4 );
	}
}

@media(max-width:990px){
	.link_item {
		width: calc( (100% - 1.25rem*2) / 3 );
	}
}

@media(max-width:640px){
	.link_item {
		width: calc( (100% - 1.25rem*1) / 2 );
	}
}

@media(max-width:450px){
	.link_item {
		width: 100%;
	}
}