@charset "utf-8";
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/Gilroy-SemiBold.woff') format('woff'), url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/Gilroy-Bold.woff') format('woff'), url('../fonts/Gilroy-Bold.ttf') format('truetype');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
}
.exchange {
		--font: Gilroy, -apple-system, "Open Sans", system-ui, "sans-serif";
		--white: #fff;
		--grey: rgba(255, 255, 255, 0.5);
		--dark: #010103;
		--grad: linear-gradient(247.63deg, #FF60F9 3.04%, #FFF27B 106.59%), linear-gradient(90deg, #FFC8AD 0%, #B174FF 100%);
}
.exchange, .exchange_body {
		height: 100%;
		box-sizing: border-box;
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased;
}
.exchange_body {
		margin: 0;
		padding: 0;
		background: var(--dark);
		font-weight: 600;
		line-height: 1.5;
		font-family: var(--font);
		color: var(--grey);
		-webkit-text-size-adjust: none;
		display: flex;
		flex-direction: column;
}
.exchange, .exchange *, .exchange *:before, .exchange *:after {
		box-sizing: border-box;
}
.exchange form, .exchange fieldset {
		margin: 0;
		padding: 0;
		border: 0;
}
.exchange_input {
		font: 600 18px/1.45 var(--font);
		color: var(--white);
		outline: none;
		text-align: left;
		-webkit-appearance: none;
		margin: 0;
		padding: 13px 6px 13px 19px;
		background: #0F1012;
		box-shadow: none;
		border: 1px solid transparent;
		border-radius: 15px;
		height: 55px;
}
.exchange_input::-webkit-input-placeholder {
		opacity: 1;
		color: var(--grey);
}
.exchange_input::-moz-placeholder {
		opacity: 1;
		color: var(--grey);
}
.exchange_input:-ms-input-placeholder {
		opacity: 1;
		color: var(--grey);
}
.exchange_input:focus::-webkit-input-placeholder {
		opacity: 0.5 !important;
}
.exchange_input:focus::-moz-placeholder {
		opacity: 0.5 !important;
}
.exchange_input:focus:-ms-input-placeholder {
		opacity: 0.5 !important;
}
.exchange input::-ms-clear {
		display: none;
}
.exchange button::-moz-focus-inner {
		border: 0;
}
.exchange textarea {
		resize: none;
}
.exchange_btn {
		-webkit-appearance: none;
		cursor: pointer;
		user-select: none;
		text-decoration: none;
		color: var(--white);
		font: bold 16px/1.45 var(--font);
		height: 55px;
		padding: 0 16px;
		border: 0;
		outline: none;
		background: var(--grad);
		position: relative;
		flex: 0 0 auto;
		max-width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15px;
}
.exchange_btn:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: inherit;
		background: var(--grad);
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.exchange_btn:hover:before {
				opacity: 0.8;
		}
}
.exchange_btn > * {
		flex: 0 0 auto;
		position: relative;
}
.exchange video {
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
}
.exchange header, .exchange nav, .exchange section, .exchange article, .exchange aside, .exchange footer, .exchange menu, .exchange time, .exchange figure, .exchange figcaption, .exchange main {
		display: block;
}
.exchange img, .exchange svg, .exchange picture {
		border: 0;
		vertical-align: top;
}
.exchange a {
		color: inherit;
		text-decoration: underline;
		outline: none;
		cursor: pointer;
}
.exchange_mainwrap {
		flex: 0 0 auto;
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
}
.exchange_container {
		flex: 1 0 auto;
		width: 100%;
		margin: 0 auto;
		max-width: 1440px;
		display: flex;
		flex-direction: column;
		padding: 53px 0;
		position: relative;
}
@media only screen and (max-width: 767px) {
		.exchange_container {
				padding-left: 20px;
				padding-right: 20px;
		}
}
@media only screen and (min-width: 768px) and (max-width: 1279px) {
		.exchange_container {
				padding-left: 40px;
				padding-right: 40px;
		}
}
@media only screen and (min-width: 1280px) {
		.exchange_container {
				padding-left: 80px;
				padding-right: 80px;
		}
}
.exchange_container-inner {
		flex: 1 0 auto;
		width: 50%;
		container-type: inline-size;
		container-name: exchange_container-inner;
		display: flex;
		flex-direction: column;
		gap: 30px;
}
.exchange_container-inner:after {
		content: '';
		flex: 0 0 auto;
		margin-top: auto;
		pointer-events: none;
}
.exchange_container-inner > * {
		flex: 0 0 auto;
		width: 100%;
}
.exchange_logo {
		margin-bottom: auto;
}
.exchange_logo img {
		width: auto;
		max-width: 100%;
		vertical-align: top;
		height: 30px;
}
.exchange_h1 {
		font-weight: bold;
		line-height: 1.1;
		color: var(--white);
		margin: 0;
		font-size: 36px;
		margin-bottom: -20px;
		max-width: 9.722em;
}
.exchange_top-text {
		font-size: 18px;
		max-width: 21.333333em;
}
.exchange_place {
		display: none;
}
.exchange_video {
		position: fixed;
		max-width: 120vh;
		max-height: 120vh;
		width: 1400px;
		height: 1400px;
		top: 50vh;
		left: 50%;
		transform: translate3d(calc(-22% + 120px), calc(-50% - 30px), 0);
}
.exchange_video-mobile {
		display: none;
}
.exchange_video > * {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		border: 0;
		outline: none;
		margin: 0;
		padding: 0;
		transform: translateZ(0);
		backface-visibility: hidden;
		object-fit: contain;
		object-position: center;
}
@media only screen and (orientation: portrait) {
		.exchange_container {
				text-align: center;
				padding-top: 0;
				padding-bottom: 58px;
		}
		.exchange_container-inner {
				width: 100%;
		}
		.exchange_container-inner:after {
				display: none;
		}
		.exchange_logo {
				margin-bottom: -30px;
				height: 105vw;
		}
		.exchange_logo img {
				position: absolute;
				top: 4vw;
				left: 50%;
				transform: translate3d(-50%, 0, 0);
		}
		.exchange_h1, .exchange_top-text, .exchange_form {
				margin-left: auto !important;
				margin-right: auto !important;
		}
		.exchange_form-sent {
				flex-direction: column;
		}
		.exchange_video {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate3d(-50%, 0, 0);
				width: 100vw;
				height: 122vw;
		}
		.exchange_video-mobile {
				display: block;
		}
		.exchange_video-desktop {
				display: none;
		}
}
@container exchange_container-inner (min-width: 500px) {
		.exchange_logo img {
				height: 35px;
		}
		.exchange_h1 {
				font-size: 64px;
				margin-bottom: -10px;
		}
		.exchange_top-text {
				font-size: 24px;
		}
}
@container exchange_container-inner (min-width: 635px) {
		.exchange_h1 {
				font-size: 80px;
				margin-bottom: -10px;
		}
		.exchange_top-text {
				font-size: 30px;
		}
}
.exchange_form {
		max-width: 525px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position: relative;
		gap: 10px 0;
		justify-content: space-between;
		container-type: inline-size;
		container-name: exchange_form;
}
@container exchange_form (min-width: 460px) {
		.exchange_form .exchange_input {
				width: calc(100% - 185px);
		}
		.exchange_form .exchange_btn {
				width: 175px;
		}
}
.exchange_form > * {
		flex: 0 0 auto;
		width: 100%;
}
.exchange_form-sent {
		display: flex;
		align-items: center;
		gap: 20px;
		font-size: 18px;
		margin: -2.5px 0;
}
.exchange_form-sent strong {
		font-weight: inherit;
		color: var(--white);
		white-space: nowrap;
}
.exchange_form-sent .exchange_pic {
		flex: 0 0 auto;
		background-image: url("../img/checkbox.svg"), var(--grad);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 20px auto, 100% 100%;
		border-radius: 50%;
		width: 60px;
		height: 60px;
}