section.herb_mobile {
	display: none;
	height: fit-content;
}

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

	section.herb_mobile {
		display: block;
		background-image: url('../img/DO YOU KNOW HERB/MOBILE--REAL-doyou1.jpg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.herb_mobile .con-herb {padding-bottom: 5em;}

	.herb_mobile h1.o-title {
		width: 100%;
		text-align: center;
	}

	.herb_mobile h1.name-head-herb span {
		font-size: 7rem;
		letter-spacing: 6px;
	}

	h1.name-head-herb span.f-herb {
		font-size: 6rem;
		transform: translateY(1vw);
	}

	.herb_mobile .name-head-herb span.span-herb {line-height: 0;}

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

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

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

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

	.herb_mobile .np_mobile {top: 45%;}

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

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

	
	/* a11y */
	.herb_mobile .swiper-slide {
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		width: 350px;
		height: fit-content;
		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);
	}

	.herb_mobile .swiper-slide-active {opacity: 1;}

	.herb_mobile .swiper-slide-active .wrapper {
		transform: rotate(-30deg) scale(0.7);
		filter: blur(0);
	}

	section.herb_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.herb_mobile .container {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}

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

	section.herb_mobile .swiper-image .image {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: #929ec9;
	}

	.herb_mobile .flip_img {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.herb_mobile .wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		/*transition effects */
		-webkit-transition: -webkit-transform 0.6s ease-in-out;
		-moz-transition: -moz-transform 0.6s ease-in-out;
		-o-transition: -o-transform 0.6s ease-in-out;
		transition: transform 0.6s ease-in-out;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		transition-delay: 400ms;
		transform: scale(0.9);
	}

	.herb_mobile .wrapper img{
		/* effects filter bur */
		filter: blur(5px);
		opacity: 0;
		transition: all 0.1s ease-in-out;
	}

	.herb_mobile .swiper-slide-active .wrapper img {
		filter: blur(0);
		opacity: 1;
	}
	
	.herb_mobile .txt_title {
		text-align: center;
		opacity: 0;
		padding: 0 .5em;
		transition: opacity 600ms ease-in;
		transition-delay: 300ms;
	}

	.herb_mobile .swiper-slide.swiper-slide-active .txt_title {opacity: 1;}

	.herb_mobile .txt_title span {
		font-size: 2rem;
		color: #D2B16A;
	}

	.herb_mobile .txt_title p {font-family: Arial, Helvetica, sans-serif;}
}

@media (max-width: 430px) {
	section.herb {display: none;}

	section.herb_mobile {
		display: block;
		background-image: url('../img/DO YOU KNOW HERB/MOBILE--REAL-doyou1.jpg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.herb_mobile .con-herb {padding-bottom: 5em;}

	.herb_mobile h1.o-title {
		width: 100%;
		text-align: center;
	}

	.herb_mobile h1.name-head-herb span {font-size: 7rem;}

	.herb_mobile .name-head-herb span.span-herb {line-height: 0;}

	.herb_mobile .name-head-herb span.f-herb {
		font-size: 4rem;
		transform: translateY(-1.5rem);
	}

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

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

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

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

	.herb_mobile .np_mobile {top: 45%;}

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

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

	/* a11y */
	.herb_mobile .swiper-slide {
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		width: 350px;
		height: fit-content;
		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);
	}

	.herb_mobile .swiper-slide-active {opacity: 1;}

	.herb_mobile .swiper-slide-active .wrapper {
		transform: rotate(-30deg) scale(0.7);
		filter: blur(0);
	}

	section.herb_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.herb_mobile .container {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}

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

	section.herb_mobile .swiper-image .image {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: #929ec9;
	}

	.herb_mobile .flip_img {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.herb_mobile .wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		/*transition effects */
		-webkit-transition: -webkit-transform 0.6s ease-in-out;
		-moz-transition: -moz-transform 0.6s ease-in-out;
		-o-transition: -o-transform 0.6s ease-in-out;
		transition: transform 0.6s ease-in-out;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		transition-delay: 400ms;
		transform: scale(0.9);
	}

	.herb_mobile .wrapper img{
		/* effects filter bur */
		filter: blur(5px);
		transition: all 0.1s ease-in-out;
	}

	.herb_mobile .swiper-slide-active .wrapper img {filter: blur(0);}
	
	.herb_mobile .txt_title {
		text-align: center;
		opacity: 0;
		padding: 0 .5em;
		transition: opacity 600ms ease-in;
		transition-delay: 300ms;
	}

	.herb_mobile .swiper-slide.swiper-slide-active .txt_title {opacity: 1;}

	.herb_mobile .txt_title span {
		font-size: 2rem;
		color: #D2B16A;
	}

	.herb_mobile .txt_title p {font-family: Arial, Helvetica, sans-serif;}
}