
.optn-block {
	position: relative;
}

.optn-banner {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999999;
}

@media screen and (max-width:767px) {
	.optn-hide-mobile {
		display: none !important;
		height: 0 !important;
		width: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}

@media screen and (min-width:768px) and (max-width:1139px) {
	.optn-hide-tablet {
		display: none !important;
		height: 0 !important;
		width: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}

@media screen and (min-width:1140px) {
	.optn-hide-desktop {
		display: none !important;
		height: 0 !important;
		width: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}

.optn-block-form-input-wrapper-error input {
	border-color: transparent !important;
	outline: 2px solid #df1c41 !important;
}

.optn-form-error-msg {
	color: #df1c41 !important;
}

.optn-conversion-contents, .optn-inline-conversion, .optn-inline-slot {
	display: none;
}

.optn-inline-slot-active {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: unset;
	animation: inline_slot_reveal 1s ease 0s 1 normal forwards;
}

@keyframes inline_slot_reveal {
	from {
		opacity: 0;
		filter: blur(5px);
	}
	
	to {
		opacity: 1;
		filter: none;
	}
}

.optn-block-form[data-optn-block-version="1"] .optn-block-form-button {
	position: absolute;
}

button.optn-block-form-button:focus {
	outline: 1px solid #fff !important;
	box-shadow: 0 0 0 3px #000 !important;
}

.optn-hide-overflow {
	overflow: hidden !important;
}

.optn-conv, .optn-conv * {
	box-sizing: border-box;
}

.optn-block-columns {
	width: 100%;
	height: 100%;
}

.optn-bg-video {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.optn-bg-video-thirdparty {
	overflow: hidden;
	max-width: 100%;
	height: 100%;
	background-color: #fff;
}

.optn-bg-video-iframe-wrapper {
	position: relative;
	height: 100%;
	width: 100%;
}

.optn-bg-video-iframe-wrapper iframe {
	position: absolute;
	inset: 0;
}

.optn-block-columns-content {
	position: relative;
	width: 100%;
	height: 100%;
}

.optn-block-heading {
	height: auto !important;
}

.optn-block-heading p {
	padding: 0 !important;
	margin: 0 !important;
}

.optn-block-heading:has(.optn-text-shape) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.optn-block-heading .optn-text-shape {
	overflow: visible;
	display: block;
	max-width: 100%;
}

.optn-block-countdown .optn-block-countdown-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: fit-content;
}

.optn-block-countdown .optn-timepart-digit {
	display: flex;
	align-items: center;
	justify-content: center;
}

.optn-block-countdown-replace-text {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.optn-timepart-digit-num {
	display: flex;
	align-items: center;
	justify-content: center;
}

.optn-block-image-wrapper {
	width: 100%;
	height: 100%;
	text-decoration: none;
	appearance: none;
}

.optn-block-image img {
	width: 100%;
	height: 100%;
	display: block;
}

.optn-block-button-btn {
	width: 100%;
	height: 100%;
	appearance: none !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.optn-block-button-btn-text p {
	margin: 0 !important;
}

:is(.optn-block-button,.optn-block-button-btn,.optn-block-button-btn-text) a {
	text-decoration: none;
}

.optn-block-social-content {
	display: flex;
}

.optn-block-social-content * {
	transition: all .2s ease;
}

.optn-block-social-content-item {
	display: flex;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
}

.optn-block-coupon {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}

.optn-block-container {
	display: flex;
	align-items: center;
}

.optn-block-container .optn-block-container-content {
	display: flex;
	align-items: center;
}

.optn-block-form {
	min-height: min-content;
}

.optn-form-spacer {
	width: 100%;
	height: 100%;
}

button.optn-block-form-button {
	padding: 0;
	margin: 0;
	cursor: pointer;
	appearance: none;
	transition: background .3s, color .3s, border-color .3s;
	display: grid;
	place-items: center;
}

.optn-block-form .optn-block-form-input {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.optn-block-form-input input[type=checkbox] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin: 0;
	margin-right: 8px;
	transform: translateY(1px);
	cursor: pointer;
	outline: 0;
	position: relative;
	appearance: none;
	overflow: hidden;
}

.optn-block-form-input input[type=checkbox]:checked::after {
	content: "✔";
	font-size: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.optn-block-form-input input[type=checkbox]:checked::before {
	content: "";
}

.optn-block-form-input-checkbox {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.optn-block-form-input-checkbox label p {
	margin: 0 !important;
}

.optn-block-form .optn-block-form-input-input {
	min-height: unset;
	outline: 0;
}

.optn-block-form .optn-block-form-input-label {
	white-space: nowrap;
}

.optn-block-form .optn-block-button {
	align-items: flex-end;
}

.optn-block-form[data-optn-block-version="1"] .optn-block-form-input-wrapper {
	display: unset;
	width: 100%;
}

.optn-block-form-input-wrapper {
	display: flex;
	flex-direction: column;
}

.optn-block-form-input-wrapper :is(input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input[type=week]) {
	padding: 0 8px;
}

.optn-block-video video {
	width: 100%;
	height: 100%;
}

.optn-block-video-thirdparty {
	position: relative;
	width: 100%;
	height: 100%;
}

.optn-block-video-thumbnail {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	overflow: hidden;
	appearance: none;
	border: none;
	padding: 0;
}

.optn-block-video-thumbnail::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	transform: translate(-50%, -50%);
	--r: 0px;
	height: 30%;
	transition: height .1s ease;
	aspect-ratio: cos(30deg);
	--_g: calc(tan(60deg) * var(--r)) left var(--r), #000 98%, rgba(0, 0, 0, 0) 101%;
	mask: conic-gradient(from 60deg at calc(3 * var(--r) / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0) 0 0/calc(100% - 3 * var(--r) / 2) 100% no-repeat, radial-gradient(var(--r) at calc(100% - 2 * var(--r)) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
	clip-path: polygon(100% 50%, 0 100%, 0 0);
	background-color: #fff;
}

.optn-block-video-thumbnail:hover::after {
	height: 35%;
}

.optn-block-shortcode {
	overflow: hidden;
}

@keyframes optnFadeIn {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes optnFadeOut {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

@keyframes optnShrinkIn {
	0% {
		transform: scale(2);
		opacity: 0;
	}
	
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes optnShrinkOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@keyframes optnFlipIn {
	0% {
		transform: perspective(400px) rotateY(-90deg);
		opacity: 0;
	}
	
	100% {
		transform: perspective(400px) rotateY(0);
		opacity: 1;
	}
}

@keyframes optnFlipOut {
	0% {
		transform: perspective(400px) rotateY(0);
		opacity: 1;
	}
	
	80% {
		opacity: 0;
	}
	
	100% {
		transform: perspective(400px) rotateY(-90deg);
		opacity: 0;
	}
}

@keyframes optnSlideUpIn {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes optnSlideUpOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	
	100% {
		transform: translateY(-100%);
		opacity: 0;
	}
}

@keyframes optnSlideDownIn {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes optnSlideDownOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	
	100% {
		transform: translateY(100%);
		opacity: 0;
	}
}

@keyframes optnSlideLeftOut {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes optnSlideLeftIn {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes optnSlideRightIn {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes optnSlideRightOut {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes optnZoomIn {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes optnZoomOut {
	0% {
		transform: scale(1);
	}
	
	100% {
		transform: scale(0);
		opacity: 0;
	}
}

@keyframes optnUnfold {
	0% {
		transform: scaleY(.005) scaleX(0);
	}
	
	50% {
		transform: scaleY(.005) scaleX(1);
	}
	
	100% {
		transform: scaleY(1) scaleX(1);
	}
}

@keyframes optnFold {
	0% {
		transform: scaleY(1) scaleX(1);
	}
	
	50% {
		transform: scaleY(.005) scaleX(1);
	}
	
	100% {
		transform: scaleY(.005) scaleX(0);
	}
}

@keyframes optnRotation {
	0% {
		transform: rotate(0);
		opacity: 0;
	}
	
	100% {
		transform: rotate(360deg);
		opacity: 1;
	}
}

@keyframes optnRotationBack {
	0% {
		transform: rotate(0);
		opacity: 1;
	}
	
	100% {
		transform: rotate(-360deg);
		opacity: 0;
	}
}

@keyframes optn_blink {
	0%, 100%, 50% {
		opacity: 1;
	}
	
	25%, 75% {
		opacity: 0;
	}
}

@keyframes optn_bounce {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateY(-45px);
	}
	
	24% {
		opacity: 1;
	}
	
	40% {
		animation-timing-function: ease-in;
		transform: translateY(-24px);
	}
	
	65% {
		animation-timing-function: ease-in;
		transform: translateY(-12px);
	}
	
	82% {
		animation-timing-function: ease-in;
		transform: translateY(-6px);
	}
	
	93% {
		animation-timing-function: ease-in;
		transform: translateY(-4px);
	}
	
	25%, 55%, 75%, 87% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
	
	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes optn_jello {
	0% {
		transform: scale3d(1, 1, 1);
	}
	
	30% {
		transform: scale3d(1.25, .75, 1);
	}
	
	40% {
		transform: scale3d(.75, 1.25, 1);
	}
	
	50% {
		transform: scale3d(1.15, .85, 1);
	}
	
	65% {
		transform: scale3d(.95, 1.05, 1);
	}
	
	75% {
		transform: scale3d(1.05, .95, 1);
	}
	
	100% {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes optn_heartbeat {
	0% {
		animation-timing-function: ease-out;
		transform: scale(1);
		transform-origin: center center;
	}
	
	10% {
		animation-timing-function: ease-in;
		transform: scale(.91);
	}
	
	17% {
		animation-timing-function: ease-out;
		transform: scale(.98);
	}
	
	33% {
		animation-timing-function: ease-in;
		transform: scale(.87);
	}
	
	45% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}
}

@keyframes optn_shake {
	0%, 100% {
		transform: translateX(0);
	}
	
	10%, 30%, 50%, 70% {
		transform: translateX(-10px);
	}
	
	20%, 40%, 60% {
		transform: translateX(10px);
	}
	
	80% {
		transform: translateX(8px);
	}
	
	90% {
		transform: translateX(-8px);
	}
}

@keyframes optn_shake_rotate {
	0%, 100% {
		transform: rotate(0);
		transform-origin: 50% 50%;
	}
	
	10% {
		transform: rotate(8deg);
	}
	
	20%, 40%, 60% {
		transform: rotate(-10deg);
	}
	
	30%, 50%, 70% {
		transform: rotate(10deg);
	}
	
	80% {
		transform: rotate(-8deg);
	}
	
	90% {
		transform: rotate(8deg);
	}
}

@keyframes optn_vibrate {
	0% {
		transform: translate(0);
	}
	
	10% {
		transform: translate(-2px, -2px);
	}
	
	20% {
		transform: translate(2px, -2px);
	}
	
	30% {
		transform: translate(-2px, 2px);
	}
	
	40% {
		transform: translate(2px, 2px);
	}
	
	50% {
		transform: translate(-2px, -2px);
	}
	
	60% {
		transform: translate(2px, -2px);
	}
	
	70% {
		transform: translate(-2px, 2px);
	}
	
	80% {
		transform: translate(-2px, -2px);
	}
	
	90% {
		transform: translate(2px, -2px);
	}
	
	100% {
		transform: translate(0);
	}
}

@keyframes optn_wobble {
	0%, 100% {
		transform: translateX(0);
		transform-origin: 50% 50%;
	}
	
	15% {
		transform: translateX(-30px) rotate(6deg);
	}
	
	30% {
		transform: translateX(15px) rotate(-6deg);
	}
	
	45% {
		transform: translateX(-15px) rotate(3.6deg);
	}
	
	60% {
		transform: translateX(9px) rotate(-2.4deg);
	}
	
	75% {
		transform: translateX(-6px) rotate(1.2deg);
	}
}
