/**
 * splash-active: 스플래시 진행 중 상태
 */
/**
 * splash-active: 스플래시 진행 중 상태
 */
body.splash-active {
	overflow: hidden;
	pointer-events: none;
}

body.splash-active .loading_animation {
	pointer-events: all;
}

body.splash-active .header_root_container {
	visibility: hidden;
}

/**
 * loading
 */
.loading_animation {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 1100;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
}
/**
 * Section1 - desktop
 */
@media (min-width: 768px) {
	.desktop.loading_animation {
		display: flex;
	}
	.mobile.loading_animation {
		display: none;
	}
	.desktop.loading_animation .video_loading {
		width: 1440px;
		height: 810px;
	}
}

/**
 * Section1 - mobile
 */
@media (max-width: 767.98px) {
	.desktop.loading_animation {
		display: none;
	}
	.mobile.loading_animation {
		display: flex;
	}
	.mobile.loading_animation .video_loading {
		width: 360px;
		height: 480px;
	}
}

.section1 {
	width: 100vw;
	height: 92vh;
}

/**
 * Section1 - desktop
 */
@media (min-width: 768px) {
	.section1 .video_background {
		position: absolute;
		width: 100vw;
		height: 92vh;
		left: 0;
		top: 0;
		object-fit: cover;
	}
}

/**
 * Section1 - mobile
 */
@media (max-width: 767.98px) {
	.section1 .video_background {
		position: absolute;
		width: 100vw;
		height: 92vh;
		left: 0;
		top: 0;
		object-fit: cover;
	}
}

/**
 * Section2 - desktop
 */
@media (min-width: 768px) {
	.section2 {
		padding-top: calc(100vw / 1440 * 200);
		padding-left: calc(100vw / 1440 * 240);
	}

	.section2 .section_title {
		font-family: brandon-grotesque;
	}

	.section2 .section_content {
		position: relative;
		width: 100%;
		height: calc(100vw / 1440 * 500);
		margin-top: calc(100vw / 1440 * 80);
	}

	.section2 .section_button {
		position: absolute;
		z-index: 150;
		width: calc(100vw / 1440 * 154);
		height: calc(100vw / 1440 * 80);
		background-image: url(../images/main/index_desktop_section2_btn.svg);
		background-repeat: no-repeat;
		background-size: contain;
		transition: 0.3s;
	}

	.section2 .section_button:hover {
		background-image: url(../images/main/index_desktop_section2_hover_btn.svg);
		transition: 0.3s;
	}
	.section2 .section_button:hover::before {
		right: 0;
	}

	.section2 .section2_video {
		position: absolute;
		width: calc(100vw / 1440 * 1120);
		height: calc(100vw / 1440 * 500);
		right: 0;
		top: 0;
		object-fit: cover;
	}
}

/**
 * Section2 - mobile
 */
@media (max-width: 767.98px) {
	.section2 {
		padding-top: calc(100vw / 360 * 100);
	}

	.section2 .section_title_container {
		padding-left: calc(100vw / 360 * 24);
		margin-top: calc(100vw / 360 * 34);
	}

	.section2 .section_title {
		font-family: brandon-grotesque;
	}

	.section2 .section2_video {
		width: 100vw;
		height: auto;
		object-fit: cover;
	}

	.section2 .button_wrap {
		margin-top: calc(100vw / 360 * 34);
		text-align: right;
		padding-right: calc(100vw / 360 * 24);
	}

	.section2 .button_wrap a {
		display: inline-block;
	}

	.section2 .section_button {
		display: flex;
		align-items: center;
		width: calc(100vw / 360 * 205);
		height: calc(100vw / 360 * 56);
		border: 1.8px solid #f74902;
		padding-top: calc(100vw / 360 * 17);
		padding-bottom: calc(100vw / 360 * 17);
		padding-left: calc(100vw / 360 * 16);
		box-sizing: border-box;
	}

	.section_button .button_title {
		color: #f74902;
		font-weight: 700;
	}

	.section_button .button_arrow {
		margin-left: calc(100vw / 360 * 12);
		width: calc(100vw / 360 * 40);
		height: auto;
	}
}

/**
 * Section3 - desktop
 */

@keyframes hover-opacity {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (min-width: 768px) {
	.section3 {
		padding-top: calc(100vw / 1440 * 284);
		padding-left: calc(100vw / 1440 * 240);
	}

	.section3 .section_title {
		font-family: brandon-grotesque;
		color: #111111;
	}

	.section3 .section_description {
		margin-top: calc(100vw / 1440 * 16);
		color: #555555;
	}

	.section3 .section_content {
		width: 100%;
		margin-top: calc(100vw / 1440 * 40);
	}

	.section3 .brand_container {
		display: flex;
	}

	.section3 .brand {
		cursor: pointer;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: cover;
		border-radius: 4px;
		width: calc(100vw / 1440 * 300);
		height: calc(100vw / 1440 * 560);
	}

	.section3 .brand1 {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/main/2-brands.jpg);
	}

	.section3 .brand2 {
		margin-left: calc(100vw / 1440 * 30);
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/main/3-brands.jpg);
	}

	.section3 .brand3 {
		margin-left: calc(100vw / 1440 * 30);
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/main/4-brands.jpg);
	}

	.section3 .brand .brand_content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section3 .brand1 .brand_logo {
		width: calc(100vw / 1440 * 181);
		height: calc(100vw / 1440 * 72);
	}

	.section3 .brand2 .brand_logo {
		width: calc(100vw / 1440 * 127);
		height: calc(100vw / 1440 * 35);
	}

	.section3 .brand3 .brand_logo {
		width: calc(100vw / 1440 * 85.14);
		height: calc(100vw / 1440 * 44);
	}

	.section3 .brand3 .text {
		color: #12327f;
	}

	.section3 .brand:hover .brand_hover {
		display: flex;
		justify-content: center;
		align-items: center;
		animation: hover-opacity 0.5s;
	}

	.section3 .brand_hover {
		display: none;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(6px);
		box-sizing: border-box;
		border-radius: 4px;
	}

	.section3 .brand_hover .hover_content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section3 .brand_hover .hover_sub_title {
		display: flex;
		align-items: center;
	}

	.section3 .brand_hover .hover_sub_title .next_icon {
		width: calc(100vw / 1440 * 32);
		height: auto;
	}

	.section3 .brand_hover .hover_sub_title .text {
		margin-right: calc(100vw / 1440 * 8);
	}

	.section3 .section_button {
		display: block;
		margin-top: calc(100vw / 1440 * 60);
		width: calc(100vw / 1440 * 187);
		height: calc(100vw / 1440 * 80);
		background-image: url(../images/main/index_desktop_section3_btn.svg);
		background-repeat: no-repeat;
		background-size: contain;
		transition: 0.3s;
	}
	.section3 .section_button:hover {
		background-image: url(../images/main/index_desktop_section3_hover_btn.svg);
		transition: 0.3s;
	}
	.section3 .section_button:hover::before {
		right: 0;
	}
}

/**
 * Section3 - mobile
 */
@media (max-width: 767.98px) {
	.section3 {
		padding-top: calc(100vw / 360 * 120);
	}

	.section3 .section_title_container {
		padding-left: calc(100vw / 360 * 24);
		margin-top: calc(100vw / 360 * 34);
	}

	.section3 .section_title {
		font-family: brandon-grotesque;
	}

	.section3 .section_content {
		width: 100%;
		margin-top: 0;
	}

	.section3 .swiper-wrapper {
		margin: 0px;
		padding: 0px;
	}

	.section3 .swiper-slide {
		list-style: none;
		width: 100vw;
		height: calc(100vw / 360 * 280);
	}

	.section3 .brand {
		cursor: pointer;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.section3 .brand_img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.section3 .brand_description {
		display: flex;
		align-items: center;
	}

	.section3 .brand_description_arrow {
		margin-left: calc(100vw / 360 * 12);
		width: calc(100vw / 360 * 36);
		height: auto;
	}

	.section3 .brand_text {
		margin-top: calc(100vw / 360 * 6);
		font-weight: 700;
		color: white;
	}

	.section3 .slide_bottom_bar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(14, 14, 14, 0.5);
		box-sizing: border-box;
		padding: calc(100vw / 360 * 14) calc(100vw / 360 * 24);
	}

	.section3 .slide_text {
		display: flex;
		flex-direction: column;
	}

	.section3 .brand_logo {
		position: absolute;
		left: calc(100vw / 360 * 24);
		top: calc(100vw / 360 * 28);
		z-index: 1;
	}

	.section3 .brand1 .brand_logo {
		width: calc(100vw / 360 * 116);
		height: calc(100vw / 360 * 34);
	}

	.section3 .brand2 .brand_logo {
		width: calc(100vw / 360 * 97.3);
		height: calc(100vw / 360 * 26.6);
	}

	.section3 .brand3 .brand_logo {
		width: calc(100vw / 360 * 54);
		height: calc(100vw / 360 * 18);
	}

	.section3 .swiper-pagination {
		right: calc(100vw / 360 * 24) !important;
		left: auto !important;
		bottom: calc(100vw / 360 * 38) !important;
		width: auto !important;
	}

	.section3 .swiper-pagination .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: #555555;
		border: none;
		opacity: 1;
	}

	.section3 .swiper-pagination .swiper-pagination-bullet-active {
		background: #bbbbbb !important;
	}
	.section3_guide_text {
		margin: 0;
		margin-top: calc(100vw / 360 * 8);
		font-size: calc(100vw / 360 * 13);
		line-height: 1.5;
		color: #555555;
		font-weight: 400;
		font-family: "Noto Sans KR";
		text-align: center;
	}

	.section3 .button_wrap {
		margin-top: calc(100vw / 360 * 34);
		text-align: right;
		padding-right: calc(100vw / 360 * 24);
	}
	.section3 .button_wrap a {
		display: inline-block;
	}
	.section3 .section_button {
		display: flex;
		align-items: center;
		width: calc(100vw / 360 * 205);
		height: calc(100vw / 360 * 56);
		border: 1.8px solid #f74902;
		padding-top: calc(100vw / 360 * 17);
		padding-bottom: calc(100vw / 360 * 17);
		padding-left: calc(100vw / 360 * 16);
		box-sizing: border-box;
	}

	.section3 .section_button .button_title {
		color: #f74902;
		font-weight: 700;
	}

	.section3 .section_button .button_arrow {
		margin-left: calc(100vw / 360 * 12);
		width: calc(100vw / 360 * 40);
		height: auto;
	}
}

/**
 * Section4 - desktop
 */
@media (min-width: 768px) {
	.section4 {
		padding-top: calc(100vw / 1440 * 360);
		width: 100%;
	}

	.section4 .section_title_container {
		width: 100%;
		padding-left: calc(100vw / 1440 * 240);
		box-sizing: border-box;
		text-align: left;
	}

	.section4 .section_title {
		font-family: brandon-grotesque;
		color: #111111;
	}

	.section4 .section_description {
		margin-top: calc(100vw / 1440 * 16);
		color: #555555;
	}

	.section4 .section_content {
		position: relative;
		width: 100%;
		height: calc(100vw / 1440 * 720);
		margin-top: calc(100vw / 1440 * 80);
	}

	.section4 .labs_img {
		width: 100vw;
		height: auto;
	}

	.section4 .section_button {
		position: absolute;
		top: calc(100vw / 1440 * 60);
		left: calc(100vw / 1440 * 240);
		z-index: 150;
		display: flex;
		z-index: 150;
		width: calc(100vw / 1440 * 171);
		height: calc(100vw / 1440 * 80);
		background-image: url(../images/main/index_desktop_section4_btn.svg);
		background-repeat: no-repeat;
		background-size: contain;
		transition: 0.3s;
	}

	.section4 .section_button:hover {
		background-image: url(../images/main/index_desktop_section4_hover_btn.svg);
		transition: 0.3s;
	}
	.section4 .section_button:hover::before {
		right: 0;
	}
}

/**
 * Section4 - mobile
 */
@media (max-width: 767.98px) {
	.section4 {
		padding-top: calc(100vw / 360 * 180);
	}

	.section4 .section_title_container {
		padding-left: calc(100vw / 360 * 24);
	}

	.section4 .section_title {
		font-family: brandon-grotesque;
	}

	.section4 .section_content {
		position: relative;
		width: 100%;
		margin-top: calc(100vw / 360 * 40);
		height: calc(100vw / 360 * 392);
	}

	.section4 .labs_img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.section4 .section_button {
		position: absolute;
		top: calc(100vw / 360 * 32);
		right: calc(100vw / 360 * 24);
		z-index: 150;
		display: flex;
		align-items: center;
		width: calc(100vw / 360 * 205);
		height: calc(100vw / 360 * 56);
		border: 1.8px solid white;
		padding-top: calc(100vw / 360 * 17);
		padding-bottom: calc(100vw / 360 * 17);
		padding-left: calc(100vw / 360 * 16);
		box-sizing: border-box;
	}

	.section4 .section_button .button_title {
		color: white;
		font-weight: 700;
	}

	.section4 .section_button .button_arrow {
		margin-left: calc(100vw / 360 * 12);
		width: calc(100vw / 360 * 40);
		height: auto;
	}
}