@charset "utf-8";
/* CSS Document */

.swiper-card .swiper-button-prev:after {
    content: 'prev';
    color: rgba(255,255,255,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.swiper-card .swiper-button-next:after {
    content: 'next';
    color: rgba(255,255,255,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

.swiper-card .swiper-button-prev,.swiper-card .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}

.swiper-card .swiper-parentDiv .swiper-pagination { display: flex; justify-content: flex-start; margin:20px auto; }
.swiper-card .swiper-pagination-bullet { border-radius: 0px; width: 30px; height: 2px; background: var(--base-color); margin: 10px 1px; }

@media screen and (max-width: 599px) {
	.swiper-wrapper-card { margin-bottom: 40px; }
	.swiper-card .swiper-button-prev,.swiper-card .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.swiper-card .swiper-button-prev:after,.swiper-card .swiper-button-next:after { font-size: 0.7rem; }
	
	.swiper-card .swiper-button-prev { left: 10px;}
	.swiper-card .swiper-button-next { right: 10px;}
	
	.swiper-card .swiper-slide-card div { margin-bottom: 10px; }
	.swiper-card .swiper-slide-card h4 { text-align: center; margin-bottom: 10px; font-size: 0.9rem; font-weight: bold; color: var(--base-color); }
	.swiper-card .swiper-slide-card p { font-size: 0.8rem; }
}
@media screen and (min-width: 600px) {
	.swiper-card .swiper-wrapper-card { margin-bottom: 40px; }
	.swiper-card .swiper-slide-card div { margin-bottom: 10px; }
	.swiper-card .swiper-slide-card h4 { text-align: center; margin-bottom: 10px; font-weight: bold; color: var(--base-color); }
	.swiper-card .swiper-slide-card p { font-size: 0.9rem; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.swiper-card .swiper-button-prev,.swiper-card .swiper-button-next { width: 40px; height: 40px; border-radius: 20px; }
	.swiper-card .swiper-button-prev { left: 10px;}
	.swiper-card .swiper-button-next { right: 10px;}
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
	.swiper-card .swiper-button-prev,.swiper-card .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.swiper-card .swiper-button-prev { left: 10px;}
	.swiper-card .swiper-button-next { right: 10px;}
}
@media screen and (min-width: 1080px) {
	.swiper-card .swiper-button-prev { left: 10px;}
	.swiper-card .swiper-button-next { right: 10px;}
}

.swiper-card li h4 a         { resize: none; position: relative;}
.swiper-card li h4 a:link    { color:#000; text-decoration: none; }
.swiper-card li h4 a:visited { color:#000; text-decoration: none; }
.swiper-card li h4 a:hover   { color:var(--base-color); text-decoration: none; }
.swiper-card li h4 a:active  { color:#000; text-decoration: none; }
.swiper-card li h4 a::after {
	position: absolute;
	bottom: -10px;
	left: 0%;
	content: '';
	width: 90%;
	height: 1px;
	background: var(--base-color);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: 1;
}
.swiper-card li h4 a:hover::after {
	transform: scale(1, 1);
}

.swiper-card li p .roboto a         { resize: none; position: relative;}
.swiper-card li p .roboto a:link    { color:#000; text-decoration: none; }
.swiper-card li p .roboto a:visited { color:#000; text-decoration: none; }
.swiper-card li p .roboto a:hover   { color:var(--base-color); text-decoration: none; }
.swiper-card li p .roboto a:active  { color:#000; text-decoration: none; }