section.recipe_mobile {
	display: none;
	background-image: url(../img/COOKBOOK/bg-cook.webp);
    background-position: center;
    background-size: cover;
	padding: 10em 1em 1em 1em;
}

/* for ver. ipad 20-12-24 */
@media (max-width: 844px) {
	section.recipe_mobile {display: block;}

	section.cookbook {display: none;}

	section.recipe_mobile .o-title {
		width: 100%;
		margin-bottom: 5rem;
	}
	
	.recipe_mobile .o-title_line span {
		width: 100%;
		text-align: center;
		font-size: 4rem !important;
	}

	.recipe_mobile .video video {
		width: 100%;
		border-radius: 1em;
		background: #000;
	}

	.recipe_mobile .carousel-frame {
		flex-direction: column;
		align-items: center;
	}

	.recipe_mobile .carousel-hidden {width: var(--50vw-herb);}

	.recipe_mobile .carousel-slide img {
		width: var(--50vw-herb);
		max-width: 800px;
		object-fit: cover;
	}

	:root {
		--50vw-herb: 50vw;
	}

	.recipe_mobile .np_mobile {top: 45%;}

	.recipe_mobile .carousel-dots li span {
		font-family: "Coinage Caps Kruger Gray";
		text-transform: uppercase;
	}

	.recipe_mobile .carousel-dots li p {
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1rem;
		text-transform: none;
	}
	
	/* a11y */
	.recipe_mobile .container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	  }

	.recipe_mobile .swiper-slide {
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		width: 250px;
		height: fit-content;
		transform: scale(.84);
		display: flex;
		flex-direction: column;
		-webkit-transition: -webkit-transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
		-moz-transition: -moz-transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
		-o-transition: -o-transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
		transition: transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
	}

	.recipe_mobile .swiper_recipe_mobile {width: 100%;}

	.bg_vdo,
	.recipe_mobile .video {
		box-shadow: 0px 25px 40px -30px #000;
	}

	.recipe_mobile .name-profession,
	.recipe_mobile .vdo-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 2em 0;
		opacity: 0;
		-webkit-transition: -webkit-opacity .4s ease-in-out;
		-moz-transition: -moz-opacity .4s ease-in-out;
		-o-transition: -o-opacity .4s ease-in-out;
		transition: opacity .4s ease-in-out;
		transition-delay: 200ms;
	}

	.recipe_mobile .name {
		color: #D2B16A;
		text-transform: uppercase;
		font-weight: normal;
	}

	.recipe_mobile .surName {
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		margin-top: 1em;
		line-height: inherit;
	}

	.recipe_mobile .swiper-slide-active {transform: scale(1);}

	.recipe_mobile .swiper-slide-active .name-profession,
	.recipe_mobile .swiper-slide-active .vdo-button {
		opacity: 1;
	}

	section.recipe_mobile .tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		left: 0;
		transform: none;
		max-width: none;
		min-width: none;
		width: 100%;
		margin-top: 3em;
		margin-bottom: 3em;
	}

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

	section.recipe_mobile .swiper {
		position: relative;
		width: 100%;
		overflow: visible;
		height: 100%;
	}
}


/* mobile */
@media (max-width: 430px) {
	section.recipe_mobile {display: block;}

	section.cookbook {display: none;}
	
	.recipe_mobile .o-title_line span {
		width: 100%;
		text-align: center;
		font-size: 4rem !important;
	}

	.recipe_mobile .video video {
		width: 100%;
		border-radius: 1em;
		background: #000;
	}

	.recipe_mobile .carousel-frame {
		flex-direction: column;
		align-items: center;
	}

	.recipe_mobile .carousel-hidden {
		width: var(--50vw-herb);
	}

	.recipe_mobile .carousel-slide img {
		width: var(--50vw-herb);
		max-width: 800px;
		object-fit: cover;
	}

	:root {
		--50vw-herb: 50vw;
	}

	.recipe_mobile .np_mobile {top: 45%;}

	.recipe_mobile .carousel-dots li span {
		font-family: "Coinage Caps Kruger Gray";
		text-transform: uppercase;
	}

	.recipe_mobile .carousel-dots li p {
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1rem;
		text-transform: none;
	}

	/* a11y */
	.recipe_mobile .container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	  }

	.recipe_mobile .swiper-slide {
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		width: 250px;
		height: fit-content;
		transform: scale(.84);
		display: flex;
		flex-direction: column;
		-webkit-transition: -webkit-transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
		-moz-transition: -moz-transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
		-o-transition: -o-transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
		transition: transform .6s cubic-bezier(0, 0.46, 0.22, 1.67);
	}

	.recipe_mobile .swiper_recipe_mobile {width: 100%;}

	.bg_vdo,
	.recipe_mobile .video {
		box-shadow: 0px 25px 40px -30px #000;
	}

	.recipe_mobile .name-profession,
	.recipe_mobile .vdo-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 2em 0;
		opacity: 0;
		-webkit-transition: -webkit-opacity .4s ease-in-out;
		-moz-transition: -moz-opacity .4s ease-in-out;
		-o-transition: -o-opacity .4s ease-in-out;
		transition: opacity .4s ease-in-out;
		transition-delay: 200ms;
	}

	.recipe_mobile .name {
		color: #D2B16A;
		text-transform: uppercase;
	}

	.recipe_mobile .surName {
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		margin-top: 1em;
		line-height: inherit;
	}

	.recipe_mobile .swiper-slide-active {
		transform: scale(1);
	}

	.recipe_mobile .swiper-slide-active .name-profession,
	.recipe_mobile .swiper-slide-active .vdo-button {
		opacity: 1;
	}

	section.recipe_mobile .tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		left: 0;
		transform: none;
		max-width: none;
		min-width: none;
		width: 100%;
		margin-top: 3em;
		margin-bottom: 3em;
	}

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

	section.recipe_mobile .swiper {
		position: relative;
		width: 100%;
		overflow: visible;
		height: 100%;
	}
}

section.recipe_mobile .video {
	border-radius: 30px;
	width: 100%;
}

section.recipe_mobile .video video {
	transition: 0.3s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

section.recipe_mobile .video:hover video {
	transform: scale(1);
	transform-origin: center;
}

section.recipe_mobile .video::before {
	content: "";
	position: absolute;
	height: 35vw;
	max-height: 45vh;
	width: 85%;
	background-position: center;
	background-size: cover;
	border-radius: 30px;
	transition: 300ms;
}

.video:hover:before {opacity: 0;}

section.recipe_mobile .video {
	border-radius: 30px;
	background-color: #000000;
	background-position: center;
	background-size: cover;
}

section.recipe_mobile .video video {
	transition: all 0.3s ease-in-out;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
	opacity: 0;
}
 
section.recipe_mobile .video:hover video {opacity: 1;}