@charset "utf-8";
/*============================================================================*/

section.tt-gallery.s1 { position: relative; }

section.tt-gallery.s1 .main {  }


section.tt-gallery.s1 .main .tgrid {
	--_jgrid-two-width: calc(100% / 3);
	--_jgrid-max-height: 300px; /* js 定義的 cellHeight */
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .65);
}

@media screen and (min-width: 1px) and (max-width: 1023px) {
	section.tt-gallery.s1 .main .tgrid { border-radius: 0; }
}

section.tt-gallery.s1 .main .tgrid .cell {
	display: flex; align-items: center;
	/*background-color: rgba(255, 255, 255, .65);*/
}


section.tt-gallery.s1 .main .tgrid { position: relative; min-height: 200px; }
section.tt-gallery.s1 .main .tgrid .cell {
	position: absolute; padding: 10px; /*width: 100%; height: 100%; max-width: 100%; max-height: 100%; /*vertical-align: center;*/
	overflow: hidden;
}

section.tt-gallery.s1 .main .tgrid .cell > figure { display: flex; }

section.tt-gallery.s1 .main .tgrid.transitions .cell {
	-webkit-transform: scale(1); transform: scale(1);
	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;
}
section.tt-gallery.s1 .main .tgrid .cell.hidden { z-index: -1; opacity: 0; filter: alpha(opacity=0); }
section.tt-gallery.s1 .main .tgrid.transitions .cell.hidden { -webkit-transform: scale(0); transform: scale(0); }

/*
section.tt-gallery.s1 .main .tgrid .cell[data-width="2"] img { width: calc(var(--_jgrid-two-width) * 2) !important; object-fit: cover !important; }
*/
section.tt-gallery.s1 .main .tgrid .cell[data-height="2"] img { height: calc(var(--_jgrid-max-height) * 2) !important; object-fit: cover !important; }

/*----------------------------------------------------------------------------*/


section.tt-gallery.s1 .main .tgrid .cell .swiper-container { display: inline-block; padding: 0; width: 100%; height: 100%; }

section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-wrapper { width: 100%; will-change: transform; }
/*
@media screen and (min-width: 1px) and (max-width: 679px) {
	section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-wrapper { width: 73.8%; }
}
*/
section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-wrapper .swiper-slide {
	width: 100%;
	background-color: transparent;
	overflow: hidden;
}
section.tt-gallery.s1 .main .tgrid .cell .swiper-slide.swiper-slide-active .slide-image { transform: scale3d(1, 1, 1); }

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide.swiper-slide-next .slide-image { transform: scale3d(1.1, 1, 1.1); }
section.tt-gallery.s1 .main .tgrid .cell .swiper-slide.swiper-slide-prev .slide-image { transform: scale3d(1.1, 1, 1.1); }


section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image {
	width: 100%; height: 100%;
	backface-visibility: hidden;
	will-change: transform;
	transform: scale3d(1.3, 1.3, 1);
	transition: transform 1400ms ease;
}

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image { position: relative; }

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; background-position: center center; background-size: cover; }


/*
@media screen and (min-width: 1px) and (max-width: 1679px) {
	section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-wrapper .swiper-slide { width: 50%; }
}
@media screen and (min-width: 1px) and (max-width: 679px) {
	section.tt-gallery.s1 .main .tgrid .cell .swiper-container { height: 300px; }
	section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-wrapper .swiper-slide { width: 73.8%; }
}
*/
/*----------------------------------------------------------------------------*/

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image a article { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; }

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image a article:after {
	position: absolute; top: 8px; right: 8px;
	content: '\f08e';
	color: rgba(255, 255, 255, .85); font-family: 'Font Awesome 6 Pro'; font-style: normal; font-weight: 500; font-size: 16px;
}

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image a article .tit {  background-color: rgba(0, 0, 0, .35); }

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image a article .tit strong {
	display: inline-block; padding: 10px 20px 10px 10px; width: 100%;
	color: rgba(255, 255, 255, .95); font-size: 14px;
	text-shadow: -1px -1px rgba(0, 0, 0, .65), -1px 1px rgba(0, 0, 0, .65), 1px -1px rgba(0, 0, 0, .65), 1px 1px rgba(0, 0, 0, .65), 1px 1px rgba(0, 0, 0, .65);
	
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
	opacity: 0;
	-webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;
	
	
}

section.tt-gallery.s1 .main .tgrid .cell .swiper-slide.swiper-slide-active .slide-image a article .tit strong { opacity: 1; }



/*
@media screen and (min-width: 480px) and (max-width: 1919px) {
	section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image a article .tit strong { width: 300px; }
}

@media screen and (min-width: 1px) and (max-width: 479px) {
	section.tt-gallery.s1 .main .tgrid .cell .swiper-slide .slide-image a article .tit strong { width: 240px; }
}
*/


/*----------------------------------------------------------------------------*/

section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-pagination { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; margin: 0; height: 30px; }

section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-pagination-bullet {
	margin: 0 5px; width: 15px; height: 2px;
	border-radius: 0;
	background-color: rgba(255, 0, 0, .65);
	transition: opacity 300ms linear, width 300ms ease;
	-webkit-transition: opacity 300ms ease, width 300ms ease;
}
section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-pagination-bullet:before {  }

section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 30px; }
section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active:before {  }

section.tt-gallery.s1 .main .tgrid .cell .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet { margin: 0; }




/*----------------------------------------------------------------------------*/