/*匯入影片模組*/
@import url(../css/style_nav/style_video/style_video.css);

/* 匯入 各館開放狀態.css */
@import url("../css/style_nav/style_venue_open/style_venue_open.css");


/* =============================================== */
/* home CSS */
/* =============================================== */





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


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



	/*----- 首頁標題1 -----*/
	.index_title {
        color: var(--primary_color);
        font-size: clamp(1.4517rem, 2.3438vw, 2.8125rem); /* 23.23px , 2.3438vw , 45.00px */
        font-weight: 700;
        letter-spacing: clamp(0.2903rem, 0.4688vw, 0.5625rem); /* 4.65px , 0.4688vw , 9.00px */
        margin-bottom: clamp(1.4517rem, 2.3438vw, 2.8125rem); /* 23.23px , 2.3438vw , 45.00px */
 }	
		.index_title strong{
			font-size: inherit;
			line-height: initial;
			padding: 0;
			margin: 0;
			display: inline-block;
			font-weight: inherit;
			/* margin-bottom: calc(22px - 16px); */
		}	

        
			

	/*----- 首頁標題2 -----*/
	.index_title2 {
        color: var(--second_color);
        font-size: clamp(1.2500rem, 1.5625vw, 1.8750rem); /* 20.00px , 1.5625vw , 30.00px */
        font-weight: 600;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .3125rem;
        margin-bottom: .625rem;
 }	
		.index_title2 strong{
			font-size: inherit;
			line-height: initial;
			padding: 0;
			margin: 0;
			display: inline-block;
			font-weight: inherit;
			/* border-radius: 5px; */
			/* background-color: var(--second_color); */
			/* margin-bottom: calc(22px - 16px); */
		}	

        .index_title2  i{
            font-size: inherit;
            line-height: initial;
            padding: 0;
            margin: 0;
            display: inline-block;
            font-weight: inherit;
        }

	
@media (max-width: 990px){
	
	.mainContent{	
		/* padding: 25px 0px;	 */
	}	

   .mainContent .wrap {
        width: 90%;
    }

    
	/*----- 首頁標題1 -----*/
	.index_title {
        font-size: clamp(1.1875rem, 1.1979vw, 1.4375rem); /* 19.00px , 1.1979vw , 23.00px */
    }	

    .index_moreBtn{
		position: static;
		padding: 15px 0px 0px;
		/*width: 162px;*/
		margin: 0px auto;
	}
		.index_moreBtn a{
			color: #a7a7a7;
			/* background-color: #dfdfdf; */
			/* border-radius: 42px; */
			border: 1px solid #dcdcdc;
		}
		

}


@media (max-width: 640px){

    .index_itemBg {
        padding: 30px 0;
    }

}














/* =============================================== */
/* home 頁籤 */
/* =============================================== */



.tab_area_home .tabs li.active {
}
    .tab_area_home .tabs li.active span{
        color: var(--primary_color);
        font-size: clamp(1.0000rem, 1.0417vw, 1.2500rem); /* 16.00px , 1.0417vw , 20.00px */
    }
	



@media (max-width: 760px){

	/* .index_article_top_area .tab_area_home , */
	.tab_area_home {
        width: 100%;    
    }
	.tab_area_home .tabs_btn_now{
		/*  */
		display: block;
		/*font-size: clamp(1.4517rem, 2.3438vw, 2.8125rem);*/ /* 23.23px , 2.3438vw , 45.00px */
        font-size: clamp(1.1875rem, 1.1979vw, 1.4375rem); /* 19.00px , 1.1979vw , 23.00px */
        font-weight:700;
        letter-spacing: clamp(0.2903rem, 0.4688vw, 0.5625rem); /* 4.65px , 0.4688vw , 9.00px */
	}

	.tab_area_home .tabs_btn_now li{
		width: 100%; 
	}

   .tab_area_home  .img-scroll{
        display: none;
        height:auto;
        margin: 0;
        padding: 0;
        border:1px solid #dcdcdc;
    }

	.tab_area_home > .tab_area {
		width: 100%;
	}

	.tab_area_home .img-list > ul.tabs{
		border-radius: 0;
		/* background: #FFF; 
		box-shadow: 0px 0px 5.9px 0px rgba(0, 0, 0, 0.25);*/
		display: flex;
        flex-direction: column;
		padding: 0;
		gap: unset;
		/* display: none; */
	}
    .tab_area_home .img-list > ul.tabs li{
        width: 100%;
    }


       .tab_area_home  .tabs span {
            border: none;
            font-size: 1rem;
        }
        .tab_area_home .img-list li.active span {
			border-radius: 0px;
		}
		
}





/* =============================================== */
/* home 影片專區 */
/* =============================================== */

.index_videoBg{
    padding: calc(45px + 1vw) 0 45px;
}

    .index_videoBg .wrap{        
        display: flex;                
        align-items: center;                
        justify-content: space-between;
    }

        .index_video_left{
           width: 40%;
            position: relative;
        }
        .index_video_left:before{
            position: absolute;
            content: "";
            width: 121%;
            bottom: -149%;
            left: -10%;
            background-image: url(../index/images/video_bg.webp);
            background-repeat: no-repeat;
            background-size: 99.9%;
            aspect-ratio: 1783 / 847;
            background-position: bottom left;
            pointer-events: none;
        }
            .index_video_left .index_title{
                width: 100%;
                text-align: center;
            }
            .index_video_left .index_moreBtn {
                position: unset;
                right: unset;
                top: unset;

                color: #777;
                font-size: clamp(1.1250rem, 1.0417vw, 1.2500rem); /* 18.00px , 1.0417vw , 20.00px */
                font-weight: 500;
                letter-spacing: 4px;
            }

        .index_video_right{       
            width: 58%;
        }


            .index_video_right .index_moreBtn{
                display: none;
            }

            .index_videoBg .video_area{   
                justify-content: center;
            }



            .index_videoBg  ul.video_area li{
                position: relative;
            }
            
            .index_videoBg  ul.video_area li::before{
                position: absolute;
                content: "";
                border-radius: 10px;
                background: rgba(18, 38, 170, 0.20);
                width: 100%;
                height: 100%;
                top: -1vw;
                right: -1vw;
                z-index: -1;
            }
            .index_videoBg  ul.video_area li:nth-of-type(2n):before{
                background: rgba(213, 0, 83, 0.20);
            }

            .index_videoBg  ul.video_area li:nth-of-type(2n) .video_list .date ,
            .index_videoBg  ul.video_area li:nth-of-type(2n) .video_bottom{
                background-color: var(--second_color);
            }


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

    .index_videoBg  ul.video_area{
        gap: 2.3958vw;
    }
    /* 友站連結_列表 */
    .index_videoBg  ul.video_area li{
        width: calc((100% / 2) - (1 * 2.3958vw / 2)); /* 4欄平均寬度，扣除間距 */
    }


}




	
@media (max-width: 990px){
	
.index_videoBg {
    padding: 45px 0 0;
}
    .index_videoBg .wrap{        
        /* display: flex;                
        align-items: center;  */
        justify-content: center;
        flex-direction: column;
        gap: 1.5625rem;
    }

        .index_video_left{
           width: 100%;
        }
        .index_video_left:before{
            display: none;
        }
            .index_video_left .index_title{
                /* width: 100%;
                text-align: center; */
            }
            .index_video_left .index_moreBtn {
                /*position: unset;
                right: unset;
                top: unset;

                color: #777;
                font-size: clamp(1.1250rem, 1.0417vw, 1.2500rem);*//* 18.00px , 1.0417vw , 20.00px */
                /* font-weight: 500;
                letter-spacing: 4px; */
            }

        .index_video_right{       
            width: 100%;
        }
            .index_videoBg ul.video_area {
                column-gap: 0.625rem;
                row-gap: 1.25rem;
            }
                .index_videoBg  ul.video_area li::before{
                    display: none;
                }

                .index_video_left .index_moreBtn{
                        display: none;
                    }
                .index_video_right .index_moreBtn{
                        display: block;
                    }
}




	
@media (max-width: 640px){
	
.index_videoBg {
    padding: 0px 0 0;
}

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


}











/* =============================================== */
/* home 最新消息 */
/* =============================================== */



.index_newsBg{

}

    .index_newsBg .index_title{
        
    }







.index_newsZoneBg{
    background-color: #F5F5F5;
    padding-bottom: 45px;
}





	
@media (max-width: 760px){

    .index_newsBg .index_title{
        display: none;
    }

    .index_newsBg  .index_moreBtn{
        position: unset;
        right: unset;
        top: unset;
    }


}


@media (max-width: 640px){

    .index_newsZoneBg{
        padding-bottom: 30px;
    }
  
}

















/* =============================================== */
/* home 各館開放狀態 */
/* =============================================== */

.index_venueOpenBg{
    padding: 45px 0;

}
    .index_venueOpenBg .wrap{

    }
        .index_venueOpenBg .index_title{
            text-align: center;
        }



        .index_venueOpen_area{

        }


        .index_venueOpenBg .index_moreBtn {
            position: unset;
            right: unset;
            top: unset;
            text-align: right;
            display: flex;
            justify-content: flex-end;
        }

        .index_venueOpenBg .venueOpen_list{
            justify-content: space-between;
        }
            .index_venueOpenBg .venueOpen_title{
                display: none;
            }


/*.index_venueOpenBg .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .index_venueOpenBg .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .index_venueOpenBg .mySwiper2 {
      height: auto;
      width: 100%;
    }

    .index_venueOpenBg .mySwiper {
      height: auto;
      box-sizing: border-box;
      padding: 0;
    }

    .index_venueOpenBg .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 1;
    }

    .index_venueOpenBg .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

    .index_venueOpenBg .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }*/




/* .main .index_venueOpenBg .swiper-button-prev,
.main .index_venueOpenBg .swiper-button-next {
	position: absolute;
	top: 50%;
	margin: 0px;
	width: 2.25rem;
    aspect-ratio: 1;
    height: auto;
	background-size: 99.9%;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.main .index_venueOpenBg .swiper-button-prev {
	background-image: url(../index/images/left_arrow2.svg);
	left: 0;
}
.main .index_venueOpenBg .swiper-button-next {
	background-image: url(../index/images/right_arrow2.svg);
	right: 0;
} */







    /* .index_venueOpenBtn{

    }
        .index_venueOpenBtn span{
            border-radius: 25px;
            border: var(--primary_color) 1px solid;
            color: var(--primary_color);
            font-size: clamp(1.0000rem, 1.0417vw, 1.2500rem); 16.00px , 1.0417vw , 20.00px 
            display: flex;
            text-align: center;
            justify-content: center;
            line-height: 40px;
            cursor: pointer;
        }
        .index_venueOpenBg .mySwiper .swiper-slide-thumb-active .index_venueOpenBtn span{     
            background: var(--primary_color);
            color: #fff;
            position: relative;
        }
        

        .index_venueOpen_small_area{
             max-width: calc(46.25rem + (3.125rem * 2));
             margin: 0 auto;
             position: relative;
        }
        
        .index_venueOpen_area .small {
            max-width: 46.25rem;
        }
        .index_venueOpenBtn span:hover{
            background: var(--second_color);
            border-color: var(--second_color);
            color: #fff;
        } */



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

    .index_venueOpenBg .index_venueOpen_area .venueOpen_area{
        display: grid;
        grid-template-columns: repeat(4 , 1fr);

    }

}

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

    .index_venueOpenBg .index_venueOpen_area .venueOpen_area{
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
    }

}


@media (max-width: 990px) {

    .index_venueOpenBg .index_moreBtn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
        .index_venueOpenBg .index_moreBtn a{
            width: 100%;
        }
}




/*===================================*/
/*-------場館預約篩選--------*/
/*===================================*/

.equipment_location{
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(0.4839rem, 0.7813vw, 0.9375rem); /* 7.74px , 0.7813vw , 15.00px */
	margin-top: 12px;
}
    .equipment_location .form_list {
        display: flex;
        align-items: center;
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    .equipment_location .form_list .title{
    white-space: nowrap;
    }

        .equipment_location .content {
            /* width: 30%; */
            width: 100%;
            max-width: 12.5rem;
        }
        .equipment_location .content select{
            width: 100%;
        }
            .equipment_info {
                display: flex;
                justify-content: flex-end;
                margin-top: clamp(0.4839rem, 0.7813vw, 0.9375rem); /* 7.74px , 0.7813vw , 15.00px */
            }

            .equipment_icon {
                display: flex;
                align-items: center;
                margin-left: 5px;
            }


.equipment_location .form_list.rentClassroom{
	/* display: none; */
}


    .equipment_location .filter {
        border: none;
        width: auto;
        max-width: clamp(5.2260rem, 8.4375vw, 10.1250rem); /* 83.62px , 8.4375vw , 162.00px */
        display: block;
        text-decoration: none;
        transition: 0.3s ease all;
        margin: 0;
        text-align: center;
        height: auto;
        background: var(--primary_color);
        color: #fff;
        border-radius:3px;
        line-height: normal; 
        padding-top: 9px;
        padding-bottom: 10px;
        transition: 0.2s ease all;
        letter-spacing: 1px;
        font-weight: normal;  
        cursor: pointer;  
    }
    .equipment_location .filter:hover{
        opacity: 0.7;
    }




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







@media (max-width: 640px) {


/*-------場館預約--------*/

.equipment_location{	
	flex-direction: column;
	gap:5px 0px;
}

	.equipment_location .form_list {
		width: 100%;
		/* width: auto; */
		/* flex-wrap: wrap; */
		flex-direction: column;
		gap: 7px;
	}
		.equipment_location .form_list .title{
			white-space: unset;
		}
		.equipment_location .content {
			width:auto;
			width: 100%;
			max-width: unset;
		}

		
	.equipment_location .form_list.rentClassroom{
		/* display: inline-block; */
		width: 100%;
	}

    .equipment_location .filter {
        width: 100%;
        max-width: unset;
    }
}