@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');

:root {
	--swiper-image-ratio: 100%;
	/* ratio 16:9 = 56.25% */

	--swiper-width: 20%;
	--swiper-inactive-scale: .85;
	/* makes the other slide smaller */

	/* responsive settings */
	--swiper-mobile-width: 90%;
	--swiper-mobile-inactive-scale: .95;
}


/* .catalog .swiper {
	position: relative;
	width: 100%;
	height: calc(var(--swiper-width) * var(--swiper-image-ratio) / 100%);
	overflow: hidden;
} */

.catalog .swiper-slide {
	/* position: relative; */
	/* width: var(--swiper-width); */
	opacity: .5;
	/* transform: scale(.84); */
	/* transition: all .3s ease-in-out; */
	/* overflow: hidden; */
	/* border-radius: 0.4285rem; */
}

/* .catalog .swiper-backface-hidden .swiper-slide {
	transform: scale(.84) translateZ(0);
} */

.catalog .swiper-slide.swiper-slide-active {
	/* transform: scale(1) !important; */
	opacity: 1 !important;
}

/* .catalog .swiper-backface-hidden .swiper-slide.swiper-slide-active {
	transform: scale(1) translateZ(0) !important;
}

.catalog .swiper-image {
	position: relative;
	width: 100%;
	padding-top: var(--swiper-image-ratio);
}

.catalog .swiper-image .image {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #929ec9;

	width: 10vw;
	height: 10vw;
}

.catalog .swiper-button-next,
.catalog .swiper-button-prev {
	padding: 8px;
	width: 12px;
	height: 12px;
	margin-top: 0;
	background-color: rgba(0, 0, 0, .4);
	border-radius: 50%;
}

.catalog .swiper-button-next::after,
.catalog .swiper-button-prev::after {
	color: #fff;
	font-size: 12px;
}

.catalog .swiper-button-next {
	transform: translate(50%, -50%);
	right: calc((100% - var(--swiper-width)) / 2);
}

.catalog .swiper-button-prev {
	transform: translate(-50%, -50%);
	left: calc((100% - var(--swiper-width)) / 2);
}

@media only screen and (max-width: 768px) {
	.catalog .swiper {
		height: calc(var(--swiper-mobile-width) * var(--swiper-image-ratio) / 100%);
	}

	.catalog .swiper-slide {
		width: var(--swiper-mobile-width);
		transform: scale(var(--swiper-mobile-inactive-scale));
	}

	.catalog .swiper-backface-hidden .swiper-slide.swiper-slide {
		transform: scale(var(--swiper-mobile-inactive-scale)) translateZ(0);
	}

	.catalog .swiper-button-next {
		right: calc((100% - var(--swiper-mobile-width)) / 2);
	}

	.catalog .swiper-button-prev {
		left: calc((100% - var(--swiper-mobile-width)) / 2);
	}
} */





/* ยกมาจาก event */
.catalog .swiper-container {
	height: 100%;
	width: 100%;
	padding-bottom: 0;
}


.catalog .swiper-wrapper {
	width: 90%;
	/*  04-07-24 */
	will-change: transform;
}

.catalog .swiper-slide {
	width: 100%;
	overflow: hidden;
}

.catalog .swiper-slide.swiper-slide-active .slide-image,
.swiper-slide.swiper-slide-duplicate-active .slide-image {
	transform: scale3d(1, 1, 1);
}

@media (min-width: 768px) {
	.catalog .swiper-slide.swiper-slide-next .slide-image,
	.swiper-slide.swiper-slide-prev .slide-image,
	.swiper-slide.swiper-slide-duplicate-next .slide-image,
	.swiper-slide.swiper-slide-duplicate-prev .slide-image {
		transform: scale3d(1, 1, 1);
	}
}

.catalog .swiper-pagination {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 85px;
}

.catalog .swiper-pagination.swiper-pagination {
	bottom: 0;
}

.catalog .swiper-pagination-bullet {
	background: #666;
	width: 22px;
	height: 4px;
	border-radius: 0;
	transition: opacity 1s ease;
}

.catalog .swiper-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet {
	margin: 0;
}

@media (min-width: 768px) {
	.catalog .swiper-pagination-bullet {
		width: 40px;
	}
}

.catalog .slide-image {
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: scale3d(1.3, 1.3, 1);
	backface-visibility: hidden;
	will-change: transform;
	transition: transform 1400ms ease;
}

@media (max-width: 820px) {
	.panel-group .desktop {
		display: none;
	}

	.head-name-mobile {
		display: block;
	}

	.con-book {
		flex-direction: column;
	}

	.head-name-mobile span {
		text-align: center;
	}

	.catalog .panel-group {
		width: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.catalog .panel {
		margin: 0;
		border-right: 1px solid #404040;
		border-radius: 0;
	}

	.catalog .panel:last-child {
		border: none;
	}

	.catalog .panel-heading {
		margin: 0 .5em;
	}

	.catalog_pagination {
		position: relative;
		transform: none !important;
	}

	/* btn download */
	.btn_load_catalog.desktop {
		display: none;
	}

	.btn_load_catalog.mobile {
		display: flex !important;
		justify-content: center;
		position: relative;
		margin: 1em 0;
	}

	.btn_load_catalog.mobile .bg_btn_load {
		width: 15em;
		height: 6em;
	}
}


.catalog .slide-content {
	padding: 0 2.2rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.catalog .slide-content h4 {
	font-size: 25px;
	font-weight: 400;
	margin: 0 0 1rem;
	padding-top: 2.8rem;
	flex-grow: 0;
}

.catalog .slide-content p {
	display: flex;
	line-height: 1.8;
	margin-top: 0;
	font-size: 14px;
	flex-grow: 1;
}

.catalog .slide-content footer {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 2.8rem;
	font-size: 14px;
	color: #c2c0e0;
}

.catalog .slide-content a {
	color: tomato;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 3px solid currentColor;
	padding-bottom: 3px;
}




.catalog .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	width: 100%;
	display: flex;
	padding: 1rem 14%;
}

.catalog .swiper-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet {
	width: 100%;
}



/* btn download */
.btn_load_catalog.desktop {
	position: relative;
	width: fit-content;
	margin-top: 4vh;
}

.btn_load_catalog.mobile {
	display: none;
}



.bg_btn_load {
	background-image: url('img/catalog/btn_load.webp');
	background-position: center;
	background-size: cover;
	width: 10rem;
	height: 4rem;
	transition: all 0.5s ease;
}

.bg_btn_load:hover {
	background-image: url('img/catalog/btn_load_hover.webp');
}




/* catalog_pagination bar for nav bar brand */
.catalog_pagination {
	width: 100%;
	height: 3px;
	background-color: #cacaca;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	transform: translateY(5vh);
}

.catalog_pagination ul {
	width: 100%;
	height: 100%;
}

.catalog_pagination a {
	width: 100%;
	height: 100%;
	transition: all 0.5s ease;
	display: flex;
	justify-content: space-between;
	align-items: center;
	opacity: 0;
}

.catalog_pagination a:hover {
	opacity: 0.5;
	background-color: #a7a7a7;
	color: #cacaca;
}

.catalog_pagination a.active {
	opacity: 1;
	background-color: #a7a7a7;
}

.catalog_pagination p {
	position: relative;
	bottom: 1.5em;
	font-size: 1em;
	text-transform: uppercase;
}



/* btn left/right */
.catalog .btn_catalog,
.catalog .swiper-button-prev,
.catalog .swiper-button-next {
	position: absolute;
	top: 0;
	width: 2rem;
	height: 100%;
	background-position: center;
	background-size: cover;
	margin: 0;
	opacity: 1;
}

.catalog .swiper-button-prev {
    background: linear-gradient(to right, #e6e6e6 50%, transparent);
	left: 0;
}

.catalog .swiper-button-next {
    background: linear-gradient(to left, #e6e6e6 50%, transparent);
	right: 0;
}

.catalog .swiper-button-next:after,
.catalog .swiper-button-prev:after {
	width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position: absolute;
	content: "";
	background-position: center;
    background-size: cover;
}
.catalog .swiper-button-prev:after {
	background-image: url('img/catalog/L.png');
	left: 0;
}
.catalog .swiper-button-next:after {
	background-image: url('img/catalog/R.png');
	right: 0;
}