/* main css */
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
#fp-nav {
	display: none;
}
#fp-nav.fp-right {
	left: 40px;
}

.fp-sr-only {
	display:none !important;
}

#fp-nav ul li, .fp-slidesNav ul li {
	margin: 0;
	margin-bottom: -8px;
	width: 20px;
	height: auto;
}

#fp-nav ul li a {
	margin-bottom: -8px;
}

#fp-nav ul li:hover a,
#fp-nav ul li a.active {
	margin-bottom: -8px;
}

#fp-nav ul li a, .fp-slidesNav ul li a {
	display:inline-block;
	width: 20px;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
	display:inline-block;
	border-radius:50%;
	background-color:#5c525b;
	width: 7px;
	height: 7px;
	position:static;
	font-size:0px;
	margin-left: 9px;
}

#fp-nav ul li a.active span, #fp-nav ul li:hover a span,  .fp-slidesNav ul li:hover a span,
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
	display:inline-block;
	width: 19px;
	height: 7px;
	border-radius:20px;
	background-color:#e73137;
	margin: 0;
	position:static;
	font-size:0px;
}

#fp-nav ul li:last-child {
	display:none !important;
}

.open_banner {
	position: fixed;
	top: calc(100vh - 70px);
	width: 100vw;
	height: 70px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #0d2144;
	z-index: 999;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		visibility:hidden;
	}

	to {
		opacity: 1;
		visibility:visible;
	}
}

.section_01 .open_banner.blog {
	top: 280px;
	right: 128px;
}

.section_01 .swiper-container {
	overflow: hidden;
	position: relative;
}

.section_01 .swiper-slide {
	position: relative;
	overflow: hidden;
	height: calc(var(--vh));
	/*min-height: 960px;*/
}

.section_01 .swiper-slide .bg_wrap {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	z-index: 2;
}

.section_01 .swiper-slide .bg_wrap,
.section_01 .swiper-slide .bg {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	z-index: 3;
}

.section_01 .swiper_main_slider .swiper-slide.swiper-slide-active .bg {
	animation: zoomOut 4.8s .2s ease both;
}

@keyframes zoomOut {
	from {
		transform:scale3d(1.08, 1.08, 1.08);
	}

	to {
		transform:scale3d(1, 1, 1);
	}
}

.section_01 .swiper_main_slider .swiper-slide.first .bg {
	background-image: url('../img/main/section01_bg01_n1.jpg?new');
	background-size: cover;
}
.section_01 .swiper_main_slider .swiper-slide.second .bg {
	background-image: url('../img/main/bg_ex.jpg?new');
	background-size: cover;
}


.section_01 .swiper_main_slider .first .text__box {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	/*margin-left: 250px;*/
	margin-top: -150px;
	transform: translate(-50%, -50%);
	text-align: center;
	display: flex
;
	justify-content: center;
	align-items: center;
}
.section01_slider01_text01 {
	opacity: 0;
	transform: translateX(-40px);
	position: relative;
}
.main01_text01 {
	width: 490px;
	/* height: 201px; */
	display: flex;
	justify-content: center;
	align-items: center;
}
.section_01 .swiper_main_slider .first.swiper-slide-active .main01_text01 {
	animation: section01_slider01_text01 2s .2s ease-in-out both;
}
@keyframes section01_slider01_text01 {
	0% {
		/*transform: translateX(-50px);*/
		opacity: 0;
		visibility:hidden;
	}

	100% {
		/*transform: translateX(0px);*/
		opacity: 1;
		visibility:visible;
	}
}
.main01_text02 {
	position: absolute;
	top: 50px;
	right: -480px;
	width: 538px;
}
.section_01 .swiper_main_slider .first.swiper-slide-active .main01_text02 {
	animation: main01_text02 1.7s 1.4s ease-in-out both;
}
@keyframes main01_text02 {
	from {
		clip:rect(0,0,179px,0);
		opacity: 0;
		visibility:hidden;
	}

	to {
		clip:rect(0,538px,179px,0);
		opacity: 1;
		visibility:visible;
	}
}

.section_01 .swiper_main_slider .second .text__box {
	position:absolute;
	z-index: 10;
	top: 43%;
	left: 23%;
	transform:translate(-50%, -50%);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main02_text01 {
	opacity: 0;
	transform: translate(-50%, -40px);
	position: relative;
	top: -50px;
}
.section_01 .swiper_main_slider .second.swiper-slide-active .main02_text01 {
	animation: main02_text01 1s .2s ease-in-out both;
}
@keyframes main02_text01 {
	0% {
		transform: translate(-50%, -40px);
		opacity: 0;
		visibility:hidden;
	}

	100% {
		transform: translate(-50%, 0px);
		opacity: 1;
		visibility:visible;
	}
}
.main02_text02 {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 471px;
}
.section_01 .swiper_main_slider .second.swiper-slide-active .main02_text02 {
	animation: main02_text02 1.7s 0.8s ease-in-out both;
}
@keyframes main02_text02 {
	from {
		clip:rect(0,0,337px,0);
		opacity: 0;
		visibility:hidden;
	}

	to {
		clip:rect(0,471px,337px,0);
		opacity: 1;
		visibility:visible;
	}
}
.main02_text03 {
	position: relative;
	top: 180px;
	transform: translateY(-40px);
}
.section_01 .swiper_main_slider .second.swiper-slide-active .main02_text03 {
	animation: main02_text03 1.7s 1.8s ease-in-out both;
}
@keyframes main02_text03 {
	0% {
		transform: translateY(-40px);
		opacity: 0;
		visibility:hidden;
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
		visibility:visible;
	}
}
.main02_cloud {
	position: absolute;
	bottom: -220px;
	left: -500px;
	transform: translateX(-200px);
	z-index: 5;
}
.section_01 .swiper_main_slider .second.swiper-slide-active .main02_cloud {
	animation: main02_cloud 4s ease-in-out both;
}
@keyframes main02_cloud {
	from {
		transform: translateX(-200px);
	}
	to {
		transform: translateX(0px);
	}
}


.main_circle {
	position: absolute;
	top: 720px;
	left: 100px;
	width: 144px;
	height: 144px;
	line-height: 144px;
	text-align: center;
	transition: all 400ms;
	z-index: 999;
}

.main_circle .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('../img/main/main_circle_text_open.png?new');
	top: 2px;
	left: 0;
	animation: main_circle 7s linear infinite;
}

.main_circle .arrow {
	position: absolute;
	bottom: 55px;
	left: 50%;
	width: 26px;
	height: 32px;
	background-image: url('../img/main/main_circle_arrow.png?new');
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%);
	animation: arrow_move 1.5s ease-in-out infinite;
	pointer-events: none;
}


.main_circle img {
	transition: all 400ms;
}

@keyframes main_circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes arrow_move {
	0% {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateX(-50%) translateY(5px);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}





.section02_circle {
	position: absolute;
	top: 270px;
	margin-left: 400px;
	left: 50%;
	width: 144px;
	height: 144px;
	line-height: 144px;
	text-align: center;
	transition: all 400ms;
	z-index: 999;
}

.section02_circle .bg {
	position: absolute;
	width: 138px;
	height: 136px;
	background-image: url(https://sd-thehue.com/css/../img/main/premium_circle_text_open.png?new);
	top: 7px;
	left: 2px;
	animation: section02_circle 7s linear infinite;
}

.section02_circle img {
	transition: all 400ms;
}

@keyframes section02_circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.main_circle .arrow {
	position: absolute;
	bottom: 55px;
	left: 50%;
	width: 26px;
	height: 32px;
	background-image: url('../img/main/main_circle_arrow.png?new');
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%);
	animation: arrow_move 1.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes arrow_move {
	0% {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateX(-50%) translateY(5px);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}













.main_item {
	position: absolute;
	bottom: 180px;
	left: calc(50% - 23px);
	transform: translateX(-50%);
	z-index: 999;
	width: 110%;
	display: flex;
	justify-content: center;
}
.section_01.active .main_item {
	animation: main_item_bg 3.15s 1.8s ease-in-out both;
}
@keyframes main_item_bg {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(-60px);
	}
}
.main_section01_item01 {
	position: absolute;
	bottom: 0px;
	z-index: -1;
	opacity: 0;
}
.section_01.active .main_section01_item01 {
	animation: main_section01_item01 ease-in-out .7s 3.9s forwards;
}
@keyframes main_section01_item01 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes scrollMagic {
	0%{opacity:0;  transform:translate(-50%, -30px) scale(1);}
	10%{opacity:1; transform:translate(-50%, -30px) scale( 1 );}
	50%{transform:translate(-50%, 15px) scale( 1 );}
	55%{opacity:1; transform:translate(-50%, 15px) scale(1);}
	60%{opacity:.4;}
	80%{opacity:0;transform:translate(-50%, 15px) scale(5);}
	100%{opacity:0;transform:translate(-50%, 15px) scale(5);}
}



.section.section_02 {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

/* 바닥 이미지 */
.section_02 .section02_item01 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}



/* 슬라이드 이미지 플로팅 */
.slide-wrapper {
	position: absolute;
	bottom: 155px;
	left: 0;
	width: 100%;
	overflow: hidden;
	z-index: 2;
}

.slide-wrapper img {
	-webkit-user-drag: none; /* Safari, Chrome */
	user-drag: none;
	user-select: none;       /* 텍스트 선택 방지 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	pointer-events: auto;    /* 필요한 경우만. none이면 클릭 자체도 막힘 */
}

.slide-track {
	display: flex;
	width: max-content;
	animation: scrollSlide 1800s linear infinite paused;
	align-items: center;
}

.slide-track.active {
	animation-play-state: running;
}

@keyframes scrollSlide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}




.slide-item {
	flex: none;
	padding: 0 70px;
}

.slide-item img {
	display: block;
}

.divider {
	width: 1px;
	height: 290px;
	background-color: #b4b4b4;
	margin-bottom: 119px;
}


@keyframes scrollSlide {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}
.section02_title01 {
	top: -225px;
	z-index: 3;
	width: auto;
	max-width: 80%;
	opacity: 0;
	transform: translateX(-50%) translateY(30px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	will-change: opacity, transform;
	position: relative;
	left: 50%;
}


.section02_title01.active {
	opacity: 1;
	transform: translateX(-50%) translateY(0) !important;
	display: flex;
;
}


.section02_item01 {
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	opacity: 0;
	transition:
			opacity 1.7s ease,
			transform 1.7s cubic-bezier(0.4, 0, 0.2, 1),
			-webkit-mask-position 1.5s ease;

	/* 왼쪽에서부터 선명하게, 오른쪽은 흐릿하게 */
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%);
	mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: right;
	mask-position: right;
}

.section02_item01.active {
	opacity: 1;
	transform: translateX(0);
	-webkit-mask-position: left;
	mask-position: left;
}

.section_02 .row {
	position:relative;
	height: calc(var(--vh));
	padding: 0;
	/*min-width: 1660px;*/
}

.section_02 .title {
	position:absolute;
	left: 50%;
	top: 18%;
	transform:translateX(-50%);
	z-index: 6;
	font-size: 22px;
	font-family: 'Noto Sans KR', sans-serif;
	color: #f6f6f6;
	text-align: center;
}

.section_02 .title b {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	color: #fff;
	letter-spacing: -0.5px;
}

.section_02 .title span {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 55px;
	color: #fff;
	line-height: 100%;
}

.section_02 .title span b {
	font-family:'Montserrat-Bold';
	font-size: 55px;
	color: #fff;
}

.section_02.active .title {
	animation: s3_title 1s .5s ease-in-out both;
}

@keyframes s3_title {
	0% {
		clip:rect(0,0px,214px,0);
		opacity: 0;
		visibility:hidden;
	}

	100% {
		clip:rect(0,594px,214px,0);
		opacity: 1;
		visibility:visible;
	}
}
.section_02 .img_zone {
	display: flex;
}
.section_02.active .img_zone {
	opacity: 0;
	animation: fadeIn 1.5s .2s ease both;
}

.section_02 .img_zone .bg_img {
	position:relative;
	width: 33.33%;
	height: 100vh;
	z-index: 2;
	transition: .5s;
}
.section_02 .img_zone .bg_img:hover {
	width: 47%;
}

.section_02 .img_zone .bg_img .bg {
	position:absolute;
	width: 100%;
	height: 100%;
	transition: .5s;
}

.section_02 .img_zone .bg_img.first .bg {
	background-image: url('../img/main/section03_img01_on.png?new');
	background-size :cover;
	background-position: center;
	filter: brightness(0.4);
}
.section_02 .img_zone .bg_img.second .bg {
	background-image: url('../img/main/section03_img02_on.png?new');
	background-size :cover;
	background-position: center;
	filter: brightness(0.4);
}
.section_02 .img_zone .bg_img.third .bg {
	background-image: url('../img/main/section03_img03_on.png?new');
	background-size :cover;
	background-position: center;
	filter: brightness(0.4);
}
.section_02 .img_zone .bg_img .bg::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(13, 33, 68, 0);
	transition: .5s;
}
.section_02 .img_zone .bg_img:hover .bg::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(13, 33, 68, 0.9);
}
.section_02 .img_zone .bg_img:hover .bg {
	filter: brightness(1);
}


.section_02 .icon {
	position: relative;
	width: 90px;
	height: 90px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 20px;
	transition: .5s;
}
.section_02 .img_zone .bg_img:hover .icon {
	transform: translateY(-15px);
}
.section_02 .icon img {
	transition: .5s;
}
.section_02 .first .icon img {
	width: 45px;
}
.section_02 .second .icon img {
	width: 28px;
}
.section_02 .third .icon img {
	width: 40px;
}
.section_02 .icon::before {
	content: '';
	display: inline-block;
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #0085d0;
	top: 50%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%);
	transition: .5s;
}
.section_02 .img_zone .bg_img:hover .icon::before {
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}
.section_02 .img_zone .bg_img.first:hover .icon img {
	width: 52px;
}
.section_02 .img_zone .bg_img.second:hover .icon img {
	width: 36px;
}
.section_02 .img_zone .bg_img.third:hover .icon img {
	width: 51px;
}
.section02_text {
	transition: .5s;
	margin-bottom: 45px;
}
.section02_text > div:nth-child(1) {
	font-family: 'Montserrat-Medium';
	font-size: 25px;
	color: #fff;
	display: block;
	position: relative;
	top: 10px;
	transition: .5s;
}
.section02_text > div:nth-child(1) > em {
	color: #31b5ff;
	font-style: normal;
	display: inline;
}
.section02_text > div:nth-child(2) {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 30px;
	color: #fff;
	display: block;
	white-space: nowrap;
	transition: .5s;
}
.section02_text > div:nth-child(2) > em {
	color: #fff;
	font-style: normal;
	display: inline;
}
.section_02 .img_zone .bg_img:hover .section02_text > div:nth-child(1) {
	transform: translateY(-10px);
}
.section_02 .img_zone .bg_img:hover .section02_text > div:nth-child(2) {
	transform: scale(1.3);
	font-family: 'Noto Sans KR', sans-serif;
}
.section_02 .img_zone .bg_img:hover .section02_text > div:nth-child(2) > em {
	transform: scale(1.3);
	color: #31b5ff;
}


.section_02 .section02_sub_text {
	opacity: 0;
	transition: .5s;
	transform: translateY(20px);
}
.section_02 .img_zone .bg_img:hover .section02_sub_text {
	opacity: 1;
	transform: translateY(0);
}



.section_02 .img_zone .bg_img .text_zone {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	text-align: center;
	width: 500px;
	height: 500px;
}

.section_02 .img_zone .bg_img:hover .text_zone {
	transform: translate(-50%, -15px);
}


.section_02 .img_zone .bg_img .text_zone span b {
	font-family:'NotoSansKR-Light';
	font-size: 13px;
	color: #ebecec;
}

.section_02 .img_zone .bg_img .cut {
	position: absolute;
	bottom: 90px;
	right: 20px;
	font-family: 'NotoSansKR-Light';
	font-weight: 400;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: -0.5px;
	opacity: 1;
	transition: .5s;
}

.section_02 .img_zone .bg_img.first:hover .cut,
.section_02 .img_zone .bg_img:hover .cut {
	opacity: 0;
}


@media screen and (max-width: 1700px) {
	.section_01 .swiper_main_slider .text__box {
		top: 35%;
	}
}
@media screen and (max-width: 1400px) {
	.section_01 .swiper_main_slider .text__box {
		top: 40%;
	}
	@keyframes zoomOut {
		from {
			background-position: 50% 0;
		}

		to {
			background-position: 50% 80%;
		}
	}
}




.section_03 {
	position: relative;
	overflow: hidden;
}

.section03_bg {
	background-image: url('../img/main/section03_bg01.jpg');
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.section03_title01 {
	position: absolute;
	top: 190px;
	left: 50%;
	transform: translateX(-50%) translateY(40px);
	z-index: 3;
	opacity: 1;
	max-width: 80%;
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section03_title01.active {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.section03_images {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 300px;
	z-index: 2;
	position: relative;
}

.section03_image01 {
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	transform: translateX(-50%);
}
.section03_image01.active {
	opacity: 1;
	transform: translateX(0) translateY(0);
}

.section03_image02 {
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	transform: translateX(50%);
}
.section03_image02.active {
	opacity: 1;
	transform: translateX(0) translateY(0);
}