.page-template-salepage-template #masthead.site-header:not(.header-fixed) {
	background: transparent;
}

.page-template-salepage-template .header-cap {
	display: none;
}

.page-template-salepage-template .boxed-container {
	max-width: none;
}

.page-template-salepage-template .main-banner {
	position: relative;
	padding-block-start: 110px;
	padding-block-end: 0;
}

.page-template-salepage-template .main-banner .background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.page-template-salepage-template .main-banner .image {
	position: relative;
}

.page-template-salepage-template .footer-banner {
	position: relative;
}

.page-template-salepage-template .footer-banner .background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.page-template-salepage-template .footer-banner a {
	display: inline-block;
	background-color: var(--color--primary);
	border-radius: var(--border-radius);
	padding: 10px 25px;
	font-size: var(--text--xl);
	color: var(--color--white);
	font-weight: bold;
}

.page-template-salepage-template .footer-banner a:hover {
	background-color: var(--color--secondary);
}

.animate {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes slideInUp {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInUp {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.-slideInUp {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
.animate-fadeIn {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.salepage-section {
	--color--primary: #0FB0CD;
	--color--secondary: #09697A;
	--color--white: #FFFFFF;
	--color--black: #333;
	--color--gray: #CCC;

	--space--hbase: 18px;
	--space--base: 36px;
	--space--dbase: 72px;
	--border-radius: 12px;

	--text--xs: 0.75rem;
	--text--sm: 0.875rem;
	--text--md: 1rem;
	--text--lg: 1.125rem;
	--text--xl: 1.25rem;
	--text--2xl: 1.5rem;
	--text--3xl: 1.875rem;
	--text--4xl: 2.25rem;
	--text--5xl: 3rem;

	--line-height--1: 1;
	--line-height--2: 1.1;
	--line-height--3: 1.2;
	--line-height--4: 1.3;
	--line-height--5: 1.4;
	--line-height--6: 1.5;

	font-family: Kanit, sans-serif;
	padding-block: var(--space--base);
	position: relative;
	color: var(--color--black);
	font-size: var(--text--md);
	line-height: var(--line-height--6);
}

@media ( min-width: 768px ) {
	.salepage-section {
		padding-block: var(--space--dbase);
		font-size: var(--text--xl);
		line-height: var(--line-height--6);
	}
}

.salepage-section .button {
	background-color: var(--color--primary);
	border-radius: var(--border-radius);
	padding: 10px 25px;
	font-size: 1rem;
}

.salepage-section .button:hover {
	background-color: var(--color--secondary);
}

.salepage-section .button:active {
	background-color: var(--color--gray);
}

.salepage-section .container h1,
.salepage-section .container h2,
.salepage-section .container h3,
.salepage-section .container h4,
.salepage-section .container h5,
.salepage-section .container h6 {
	margin-block-start: 0;
	margin-block-end: 1em;
	letter-spacing: 0;
}

.salepage-section h1 {
	font-size: var(--text--5xl);
	line-height: var(--line-height--6);
}

.salepage-section h2 {
	font-size: var(--text--4xl);
	line-height: var(--line-height--6);
}

.salepage-section h3 {
	font-size: var(--text--3xl);
	line-height: var(--line-height--6);
}

.salepage-section h4 {
	font-size: var(--text--2xl);
	line-height: var(--line-height--6);
}

.salepage-section h5 {
	font-size: var(--text--xl);
	line-height: var(--line-height--6);
}

.salepage-section h6 {
	font-size: var(--text--lg);
	line-height: var(--line-height--6);
}

.salepage-section ul li,
.salepage-section ol li {
	list-style-position: outside;
	margin-inline-start: 1.2em;
}

.salepage-section .background-section {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.salepage-section .headline,
.salepage-section .title {
	color: var(--color--primary);
}

.salepage-section .headline span,
.salepage-section .title span {
	color: var(--color--black);
}

.salepage-section .container {
	width: min( 100% - 40px, 1024px );
	margin-inline: auto;
	position: relative;
}

.salepage-section .content-container {
	margin-inline: auto;
	margin-block-end: var(--space--base);
}

.salepage-section .content-container > .headline {
	text-align: center;
	font-size: var(--text--4xl);
    line-height: var(--line-height--6);
}

.salepage-section .content > *:first-child {
	margin-block-start: 0;
}

.salepage-section .content > *:last-child {
	margin-block-end: 0;
}

.salepage-section .detail > *:first-child {
	margin-block-start: 0;
}

.salepage-section .detail > *:last-child {
	margin-block-end: 0;
}

.salepage-section .content-box {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	margin-block-end: var(--space--base);
}

.salepage-section .content-box .image {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.salepage-section .content-box .image img {
	width: 100%;
	display: block;
}

.salepage-section .content-box .content {
	padding-block: var(--space--base);
}

@media ( min-width: 768px ) {
	.salepage-section .content-box {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "image content";
	}

	.salepage-section .content-box.-right {
		grid-template-areas: "content image";
	}

	.salepage-section .content-box .image {
		grid-area: image;
	}

	.salepage-section .content-box .content {
		grid-area: content;
		padding-inline: var(--space--base);
	}
}

.salepage-section .image-box {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	margin-block-end: var(--space--base);
	background-color: #FFF;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.salepage-section .image-box .image {
	width: 100%;
	height: 100%;
}

.salepage-section .image-box .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.salepage-section .image-box .content {
	padding: var(--space--base);
}

@media ( min-width: 768px ) {
	.salepage-section .image-box {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "image content";
	}

	.salepage-section .image-box.-right {
		grid-template-areas: "content image";
	}

	.salepage-section .image-box .image {
		grid-area: image;
	}

	.salepage-section .image-box .content {
		grid-area: content;
	}
}

.salepage-section .logo-box {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space--base);
	margin-block-end: var(--space--base);
}

.salepage-section .logo-box .item {
	display: flex;
	flex-direction: column;
	gap: var(--space--hbase);
	text-align: center;
	padding: var(--space--base);
	background-color: #FFF;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.salepage-section .logo-box .item .logo {
	display: flex;
	width: 200px;
	height: 100px;
	margin-inline: auto;
	align-items: center;
}

.salepage-section .logo-box .item .logo img {
	width: 100%;
	height: auto;
}

.salepage-section .logo-box .item .title {
	margin-block-end: 0.5em;
}

@media ( min-width: 768px ) {
	.salepage-section .logo-box {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space--base);
	}
}

.salepage-section .gallery-box {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space--base);
	margin-block-end: var(--space--base);
}

.salepage-section .gallery-box .item {
	overflow: hidden;
	border-radius: var(--border-radius);
}

.salepage-section .gallery-box .item img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media ( min-width: 768px ) {
	.salepage-section .gallery-box.-gallery2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.salepage-section .gallery-box.-gallery3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.salepage-section .gallery-box.-gallery4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.salepage-section .video-box {
	margin-block-end: var(--space--base);
}

.salepage-section .video-box iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}