/* USER VARIABLES SECTION */
@import "kit-form.css";

:root {
	--accent: #98FFC6;
	--text: #1D1D1B;
	--regular-text: 22px;
	--lineheight: 26px;
	--userfont: "Gotham", sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	--desktop: 100 / 1920;
	--mobile: 100 / 375;

}



/* FONTS LOAD SECTION */


@font-face { src: url("../fonts/Gotham-Bold.woff2") format("woff2"); font-family: "Gotham"; font-weight: 700; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/Gotham-Medium-Regular.woff2") format("woff2"); font-family: "Gotham"; font-weight: 400; font-style: normal; font-display: swap; }
/* @font-face { src: url("../fonts/PTSans-Bold.woff2") format("woff2"); font-family: "PTSans"; font-weight: 700; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/PTSans-BoldItalic.woff2") format("woff2"); font-family: "PTSans"; font-weight: 700; font-style: italic; font-display: swap; }
@font-face { src: url("../fonts/Sarabun-Regular.woff2") format("woff2"); font-family: "Sarabun"; font-weight: 400; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/Sarabun-Bold.woff2") format("woff2"); font-family: "Sarabun"; font-weight: 700; font-style: normal; font-display: swap; } */




/* GENERAL CSS SETTINGS */

::placeholder { color: #C5D1FF; }
::selection { background-color: #E5FFE9; color: #000000; }
input, textarea { outline: none; }

body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: normal;
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	background: #fff;
	font-weight: 400;
	color: var(--text);
	font-optical-sizing: auto;
  font-style: normal;
}


ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}

/* USER STYLES */

a {
	transition: .3s ease-in-out;
	text-decoration: none;
	color: var(--text);
}

a:hover {
	color: var(--accent-text);
}

body {
	/* max-width: 1920px; */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100vh;
}



.page-main {
	height: 100%;
	width: 100%;
}

.header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.header-logo {
	position: absolute;
	width: 100%;
	/* max-width: 87.34px; */
	/* left: 23.4677083%; */
	transform: translateX(-50%);
	z-index: 1;
	/* top: 71.5px; */
	max-width: calc(87.34vw * var(--desktop));
	top: calc(71.5vw * var(--desktop));
	left: calc(450.58vw * var(--desktop));
}

.header-logo img {
	width: 100%;

}

.header-red-text {
	position: absolute;
	/* left: 26.4677083%; */
	/* max-width: 302px; */
	width: 100%;
	/* top: 153px;	 */
	color: #FC0077;
	/* font-size: 40px;
	line-height: 35px; */
	text-align: left;
	text-transform: uppercase;
	font-weight: bold;
	left: calc(501vw * var(--desktop));
	max-width: calc(302vw * var(--desktop));
	top: calc(153vw * var(--desktop));
	font-size: calc(40vw * var(--desktop));
	line-height: calc(35vw * var(--desktop));
}
.container-main {
	width: 100%;
	height: 100%;
	display: grid;
	/* grid-template-columns: 23.4677083% 53.125% 23.3854167% ; */
	grid-template-columns: calc(450.58vw * var(--desktop)) calc(1020.42vw * var(--desktop)) calc(449vw * var(--desktop));
}

/* .container-main > * {
	height: 100vh;
} */

.page-middle {
	border-left: 1px solid #1D1D1B;
	border-right: 1px solid #1D1D1B;
}

.page-left {
	width: 100%;
	height: 100%;
	position: relative;
}

.left-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.left-bg img {
	width: 100%;
	/* height: 100vh; */
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.say-hello__box {
	position: absolute;
	bottom: 90px;
	width: 100%;
	/* bottom: calc(90vw * var(--desktop)); */
	/* top: calc(989vw * var(--desktop)); */
}

.email-bottom {
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 2;
}

.email-bottom a {
	display: flex;
	border: 3px solid #1D1D1B;
	/* padding: 10px 18px;	 */
	font-weight: bold;
	color:var(--text);
	background: #fff;
	/* font-size: 21px;
	line-height: 21px; */
	padding: calc(10vw * var(--desktop)) calc(18vw * var(--desktop));
	border-radius: calc(10vw * var(--desktop));
	font-size: calc(21vw * var(--desktop));
	line-height: calc(21vw * var(--desktop));
}

.red-words span {
	display: block;
	color: #FC0077;
	/* font-size: 122px;
	line-height: 147px; */
	mix-blend-mode: multiply;
	font-weight: bold;
	font-size: calc(122vw * var(--desktop));
	line-height: calc(147vw * var(--desktop));
}

.red-words span.say {
	transform: matrix(0.99, -0.11, 0.11, 0.99, 0, 0);
	position: absolute;
	/* bottom: 95px;
	left: 37.5px; */
	bottom: calc(95vw * var(--desktop));
	left: calc(37.5vw * var(--desktop))
}

.red-words span.hello {
	transform: matrix(0.99, -0.11, 0.11, 0.99, 0, 0);
	position: absolute;
	bottom: 0;
	left: 104px;
	left: calc(104vw * var(--desktop));
}

.header-basic-text {
	/* font-size: 22px;
	line-height: 26px; */
	color: var(--text);
	font-weight: 400;
	/* padding: 24px 28px;
	border-radius: 10px; */
	border: 3px solid #1D1D1B;
	background: #fff;
	position: absolute;
	/* right: 8.8%;
	top: 135px;
	max-width: 607px; */
	z-index: 1;

	font-size: calc(22vw * var(--desktop));
	line-height: calc(32vw * var(--desktop));
	max-width: calc(508vw * var(--desktop));
	right: calc(170vw * var(--desktop));
	padding: calc(28vw * var(--desktop)) calc(28vw * var(--desktop));
	border-radius: calc(10vw * var(--desktop));
	top: calc(135vw * var(--desktop));
}

.header-second-logo {
	/* max-width: 111px;
	width: 100%;
	height: 158px; */
	position: absolute;
	/* right: 2.13541667%;
	top: 135px; */
	border: 3px solid #1D1D1B;
	display: flex;
	align-items: center;
	justify-content: center;
	/* border-radius: 10px; */
	background: #fff;
	z-index: 1;
	width: 100%;

	max-width: calc(111vw * var(--desktop));
	height: calc(158vw * var(--desktop));
	right: calc(40vw * var(--desktop));
	top: calc(135vw * var(--desktop));
	border-radius: calc(10vw * var(--desktop))
}

.header-second-logo img {
	/* width: 76px; */
	height: auto;
	width: calc(76vw * var(--desktop));
}

.animation {
	/* margin-top: 395px; */
	margin-top: calc(395vw * var(--desktop));
	width: 100%;
}

.animation img {
	width: 100%;
	height: auto;
}

.page-right {
	height: 100%;
	background: var(--accent);
	width: 100%;
}

.site-footer {
	position: absolute;
	bottom: 0;
	right: 0;
	/* padding-top: 108px; */
	border-top: 1px solid #1D1D1B;
	/* width: 100%; */
	/* left: 23.4677083%; */
	overflow: hidden;
	/* width: calc(100% - 23.4677083%); */
	/* top: calc(971vw * var(--desktop)); */


	padding-top: calc(108vw * var(--desktop));
	left: 23.4677083%;
	left: calc(450vw * var(--desktop));
	width: calc(100% - calc(450vw * var(--desktop)));
}

.footer-logo {
	position: absolute;
	right: 0;
	/* max-width: 23.3854167%; */
	width: 100%;
	/* bottom: 29px; */
	display: flex;
	align-items: center;
	justify-content: center;

	max-width: calc(449vw * var(--desktop));
	bottom: calc(29vw * var(--desktop));
}

.footer-logo img {
	width: 100%;
	/* max-width: 281px; */
	max-width: calc(281vw * var(--desktop));
}

.header-line {
	position: absolute;
	/* max-width: 76.5104167%; */
	right: 0;
	/* top: 277px; */
	border-top: 1px solid #1D1D1B;
	width: 100%;

	max-width: calc(1470vw * var(--desktop));
	top: calc(277vw * var(--desktop));
}

@media (max-width: 800px) {
	body {
		height: auto;
		padding-left: calc(55vw * var(--mobile));
		position: relative;
	}

	body:before {
		height: 100%;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: var(--accent);
		border-right: 1px solid var(--text);
		width: calc(55vw * var(--mobile));
	}

	.container-main {
		display: block;
	}

	.animation {
		margin-top: 0;
	}

	.header {
		position: static;
		padding-top: calc(55vw * var(--mobile));
		padding-left: calc(53vw * var(--mobile));
		padding-right: calc(20vw * var(--mobile));
		width: 100%;
	}

	.header-logo {
		left: calc(55vw * var(--mobile));
		max-width: calc(71.15vw * var(--mobile));
		transform: translateX(-50%);
	}

	.header-red-text {
		position: static;
		max-width: 100%;
		width: 100%;
		font-size: calc(33vw * var(--mobile));
		line-height: calc(30vw * var(--mobile));
		margin-bottom: calc(19vw * var(--mobile));
	}

	.header-basic-text {
		position: static;
		max-width: 100%;
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: calc(18vw * var(--mobile));
		line-height: calc(23vw * var(--mobile));
		margin-bottom: calc(34vw * var(--mobile));
	}

	.container-main{
		display: flex;
		flex-direction: column-reverse;
	}

	.page-middle {
		border: 0;
		width: calc(100% + calc(55vw * var(--mobile)));
		transform: translateX(calc(-55vw * var(--mobile)));
		border-top: 1px solid var(--text);
		border-bottom: 1px solid var(--text);
		padding-top: calc(22vw * var(--mobile));
		padding-bottom: calc(22vw * var(--mobile));
		background: #fff;
	}

	.header-line {
		display: none;
	}
	
	.page-left {
		max-width: 100%;
		width: 100%;
		min-height: calc(345vw * var(--mobile));
	}

	.say-hello__box {
		top: calc(185vw * var(--mobile));
		bottom: unset;
	}

	.red-words span{
		font-size: calc(88vw * var(--mobile));
		line-height: calc(106vw * var(--mobile));
	}

	.red-words span.say {
		bottom: calc(71vw * var(--mobile));
		left: calc(20.6vw * var(--mobile));
	}

	.red-words span.hello {
		bottom: 0;
		left: calc(69vw * var(--mobile));
	}

	.email-bottom a {
		font-size: calc(15vw * var(--mobile));
		line-height: calc(15vw * var(--mobile));
		padding: calc(8vw * var(--mobile)) calc(15vw * var(--mobile)) calc(6vw * var(--mobile)) calc(15vw * var(--mobile));
		border-radius: calc(10vw * var(--mobile));
	}

	.site-footer {
		position: static;
		height: calc(148vw * var(--mobile));
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		background: var(--accent);
		padding: 0;
		border: 0;
		/* margin: 0; */
	}

	.header-second-logo {
		max-width: calc(57vw * var(--mobile));
		width: 100%;
		right: unset;
		top: unset;
		bottom: calc(41vw * var(--mobile));
		left: calc(55vw * var(--mobile));
		transform: translateX(-50%);
		padding: calc(12vw * var(--mobile)) calc(8.8vw * var(--mobile));
		border-radius: calc(10vw * var(--mobile));
		height: auto;

	}

	.header-second-logo img {
		width: 100%;
		height: auto;
	}

	.footer-logo {
		position: static;
		width: 100%;
		height: 100%;
		max-width: 100%;
		padding-bottom: calc(15vw * var(--mobile));
	}

	.footer-logo img {
		max-width: calc(206vw * var(--mobile));
		width: 100%;
	}
}