@charset "utf-8";
/*---------------- swiper circle pagination ----------------*/
.oc-pagination-circle {
	width: 300px;
	height: 14px;
	margin-left: -150px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	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: 0px;
		top: 0px;
	}
}

/*---------------- 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;
}



/*---------------- message ----------------*/
#oc-message-box{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    display: none;
}

#oc-message{
    width: auto;
    max-width: 440px;
    height: auto;
    padding: 12px 30px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .75);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    line-height: 150%;
}