@charset "utf-8";
/*---------------- swiper circle pagination ----------------*/
.oc-pagination-circle {
	width: 100%;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	bottom: 34px;
	z-index: 500;
}

.oc-swiper-circle {
	width: 14px;
	height: 14px;
	margin: 0 12.5px;
	position: relative;
}

.oc-swiper-circle::before {
	content: " ";
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
	left: 2px;
	top: 2px;
	background: #ffffff;
	border-radius: 50%;
}

.oc-swiper-circle-active::before {
	left: 0;
	top: 0;
	background: none;
	border: 2px solid rgba(0, 0, 0, 0.2);
}

.oc-swiper-circle svg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	fill: none;
	stroke: #C8152D;
	stroke-width: 2px;
	stroke-dasharray: 38;
	stroke-dashoffset: 38;
}

.oc-swiper-circle-active svg {
	stroke-dashoffset: 0;
	animation: oc-stroke-circle 5.1s linear;
	-webkit-animation: oc-stroke-circle 5.1s linear;
	-ms-animation: oc-stroke-circle 5.1s linear;
	-moz-animation: oc-stroke-circle 5.1s linear;
}

@-webkit-keyframes oc-stroke-circle {
	0% {
		stroke-dashoffset: 38;
	}
	100% {
		stroke-dashoffset: 0;
	}
  }
  
@keyframes oc-stroke-circle {
	0% {
		stroke-dashoffset: 38;
	}
	100% {
		stroke-dashoffset: 0;
	}
}


@media (min-width: 1px) and (max-width: 768px) {
	.oc-pagination-circle {
		height: 10px;
		bottom: 5.3333vw;
	}
	
	.oc-swiper-circle {
		width: 10px;
		height: 10px;
		margin: 0 8px;
	}
	
	.oc-swiper-circle::before {
		width: 6px;
		height: 6px;
		left: 2px;
		top: 2px;
	}
}

/*---------------- tab base css ----------------*/
.oc-tab-content {
	display: none;
	opacity: 0;
	transition: all .35s linear;
	-webkit-transition: all .35s linear;
	-moz-transition: all .35s linear;
	-ms-transition: all .35s linear;
}

.oc-tab-content.on {
	display: block;
	opacity: 1;
}