/* 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 */
}

.header.w {
	background-color: #ffffff;
}

.swiper-container {
	overflow:hidden;
}

.swiper-slide {
	position:relative;
	overflow:hidden;
	height: calc(var(--vh));
	min-height:720px;
	background-size: cover !important;
}

.swiper-slide .bg_wrap {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	z-index: 2;
}

.swiper-slide .bg_wrap,
.swiper-slide .bg {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	z-index: 3;
}

.section_01 {
	position: relative;
}
.section_01 .hero-swiper,
.section_01 .hero-swiper .swiper-wrapper,
.section_01 .hero-swiper .swiper-slide {
	width: 100%;
	height: 100vh;
	min-height: 720px;
}
.section_01_wrap {
	/*background-image: url('../img/main/sec01_bg.png?new');
	background-size: cover;
	background-position: center;*/
	position: relative;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;

}


.section_01 .section_01_wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.section_01 .slide--1 .section_01_wrap {
	background-image: url('../img/main/main_bg01_n2.png?new');
	background-size: cover;
	background-position: center;
}
.section_01 .slide--2 .section_01_wrap {
	background-image: url('../img/main/main_bg02_n.png');
	background-size: cover;
	background-position: center;
}
.section_01 .hero-swiper .swiper-slide {
	position: relative;
	overflow: hidden;
}

.section_01.active .slide--1.swiper-slide-active .section_01_wrap, .section_01.active .slide--2.swiper-slide-active .section_01_wrap {
	animation: section_01_wrap 3s .4s ease both;
}
@keyframes section_01_wrap {
	from {
		background-position-y: top;
	}

	to {
		background-position-y: bottom;
	}
}

.section_01_wrap > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.section_01.active .slide--1 .sec01_a_01 {
	top: calc(50% - 170px);
	left: calc(50% - 200px);
	opacity: 0;
	transform: translate(calc(-50% + 120px), -50%);
}
.section_01.active .slide--1.swiper-slide-active .sec01_a_01 {
	animation: sec01_a_01 ease-in-out 1.6s 1s forwards;
}
@keyframes sec01_a_01 {
	0% {
		opacity: 0;
		transform: translate(calc(-50% + 120px), -50%);
	}
	100% {
		opacity: 1;
		transform: translate(calc(-50%), -50%);
	}
}

.section_01.active .slide--1 .sec01_a_02 {
	top: calc(50% - 140px);
	left: calc(50% + 510px);
	opacity: 0;
	transform: translate(calc(-50% - 120px), -50%);
}
.section_01.active .slide--1.swiper-slide-active .sec01_a_02 {
	animation: sec01_a_02 ease-in-out 1.6s 1s forwards;
}
@keyframes sec01_a_02 {
	0% {
		opacity: 0;
		transform: translate(calc(-50% - 120px), -50%);
	}
	100% {
		opacity: 1;
		transform: translate(calc(-50%), -50%);
	}
}

.section_01.active .slide--2 .sec01_a_01 {
	top: calc(50% - 100px);
	left: calc(50% - 430px);
	opacity: 0;
	transform: translate(calc(-50% + 120px), -50%);
}
.section_01.active .slide--2.swiper-slide-active .sec01_a_01 {
	animation: sec01_a_01 ease-in-out 1.6s 1s forwards;
}

.section_01.active .slide--2 .sec01_a_02 {
	top: calc(50% - 100px);
	left: calc(50% + 400px);
	opacity: 0;
	transform: translate(calc(-50% - 120px), -50%);
}
.section_01.active .slide--2.swiper-slide-active .sec01_a_02 {
	animation: sec01_a_02 ease-in-out 1.6s 1s forwards;
}


.section_01.active .slide--1.swiper-slide-active .sec01_item01 {
	position: absolute;
	top: unset;
	bottom: 0;
	left: -65px;
	opacity: 1;
	transform: translateX(0);
	animation: sec01_item01 ease-in-out 3s .5s forwards;
}
@keyframes sec01_item01 {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100px);
	}
}
.section_01.active .slide--1.swiper-slide-active .sec01_item02 {
	position: absolute;
	top: unset;
	bottom: 0;
	right: 0;
	opacity: 1;
	transform: translateX(0);
	animation: sec01_item02 ease-in-out 3s .5s forwards;
}
@keyframes sec01_item02 {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100px);
	}
}










.circle_text {
	position: fixed;
	width: 126px;
	height: 126px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999;
	top: unset;
	left: unset;
	bottom: 40px;
	right: 70px;
	opacity: 1;
	transform: unset;
}
.circle_text::before {
	display:block;
	content:'';
	width: 100%;
	height: 100%;
	background-image:url('../img/circle_text.png');
	background-repeat: no-repeat;
	background-position:center;
	position:absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	animation:circleRotate 7s linear infinite;
}

@keyframes circleRotate {
	0% {
		transform:rotate(0deg);
	}

	100% {
		transform:rotate(360deg);
	}
}



















@keyframes fadeInUp {
	from {
		margin-top: 60px;
		opacity: 0;
		visibility:hidden;
	}

	to {
		margin-top: 0;
		opacity: 1;
		visibility:visible;
	}
}

@keyframes fadeInLeftA {
	from {
		margin-left: -30px;
		opacity: 0;
		visibility:hidden;
	}

	to {
		margin-top: 0;
		opacity: 1;
		visibility:visible;
	}
}

.swiper_main_slider .second.swiper-slide-active .text__box {
	animation: s1__slider02__t__ani 1.2s 1s ease-in-out both;
}

@keyframes s1__slider02__t__ani {
	from {
		clip:rect(0,0,214px,0);
		opacity: 0;
		visibility:hidden;
	}

	to {
		clip:rect(0,900px,214px,0);
		opacity: 1;
		visibility:visible;
	}
}

.section_02 {
	min-height:720px;
	background-color: #f5f7f4;
}

.sec02_wrap {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding-top: 100px;
}


.sec02_left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 45px;
}
.sec02_title {
	position: relative;
	opacity: 0;
	transform: translateX(80px);
	z-index: 10;
}
.section_02.active .sec02_title {
	animation: sec02_title ease-in-out .7s 1s forwards;
}
@keyframes sec02_title {
	from {
		opacity: 0;
		transform: translateX(80px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}
.sec02_btn {
	position: relative;
	margin-top: 20px;
}


.sec02_text {
	position: relative;
	opacity: 0;
	transform: translateY(-50px);
}
.section_02.active .sec02_text {
	animation: sec02_text ease-in-out 1s 1.3s forwards;
}
@keyframes sec02_text {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}
.sec02_btn {
	position: relative;
	margin-top: 20px;
	opacity: 0;
}
.section_02.active .sec02_btn {
	animation: sec02_btn ease-in-out 1s 1.6s forwards;
}
@keyframes sec02_btn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.sec02_con {
	position: relative;
	opacity: 0;
	clip-path: inset(0 0 0 100%);
}

.section_02.active .sec02_con {
	animation: reveal ease-in-out 1.3s .2s forwards;
}

@keyframes reveal {
	from {
		clip-path: inset(0 0 0 100%);
		opacity: 0;
	}
	to {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
 


.section_02 .swiper-img-container .swiper-slide {
	width: 100%;
	height: 508px;
}
.section_02 .swiper-wrapper {
	opacity: 0;
	transform: translateY(-50%);
}
.section_02.active .swiper-wrapper {
	animation: sec02_slide ease-in-out 1s forwards;
}
@keyframes sec02_slide {
	from {
		opacity: 0;
		transform: translateY(-50%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*image slide*/
.section_02 .swiper-img-container .swiper-slide.first {
	background-image:url('../img/main/section02_slider_img01.png?new');
}

.section_02 .swiper-img-container .swiper-slide.second {
	background-image:url('../img/main/section02_slider_img02.png?new');
}

.section_02 .swiper-img-container .swiper-slide.third {
	background-image:url('../img/main/section02_slider_img03.png?new');
}

.section_02 .swiper-img-container .swiper-slide.forth {
	background-image:url('../img/main/section02_slider_img04.png?new');
}

.sec02_slider_text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -125px;
}
.sec02_slider_text > img {
	position: relative;
	top: 24px;
	border-left: 10px solid #fff;
}
.sec02_slider_text::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: -1245px;
	width: 1610px;
	height: 1px;
	background-color: #d4d4d4;
	opacity: 0;
	transform: translateX(100px);
}
.section_02.active .sec02_slider_text::before {
	animation: sec02_page ease-in-out .8s .5s forwards;
}
.swiper-pagination {
	width: 935px !important;
	display: flex;
	justify-content: space-between;
	left: -1160px !important;
	bottom: -125px !important;
	opacity: 0;
	transform: translateX(100px);
}
.section_02.active .swiper-pagination {
	animation: sec02_page ease-in-out .8s .5s forwards;
}
@keyframes sec02_page {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.swiper-pagination-clickable .swiper-pagination-bullet {
	width: 94px;
	height: 94px;
	border-radius: 10px;
	background-size: inherit;
	background-position: center;
	position: relative;
	opacity: 1 !important;
	transition: .3s;
}
.swiper-pagination-clickable .swiper-pagination-bullet:hover {
	transform: translateY(-10px);
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.swiper-pagination-clickable .swiper-pagination-bullet:hover::after {
	transform: translateY(10px);
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(1) {
	background-image: url("../img/main/sec02_page01.png");
	background-color: #624a3d;
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(2) {
	background-image: url("../img/main/sec02_page02.png");
	background-color: #616178;
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(3) {
	background-image: url("../img/main/sec02_page03.png");
	background-color: #624a3d;
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(4) {
	background-image: url("../img/main/sec02_page04.png");
	background-color: #616178;
}

.swiper-pagination-clickable .swiper-pagination-bullet::after {
	position: absolute;
	bottom: -190px;
	left: 0;
	display: inline-block;
	transition: .3s;
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(1)::after {
	content: url("../img/main/sec02_text01.png");
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(2)::after {
	content: url("../img/main/sec02_text02_n.png");
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(3)::after {
	content: url("../img/main/sec02_text03.png");
}
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(4)::after {
	content: url("../img/main/sec02_text04.png");
}



/*.section_02 .ect {*/
/*	position:absolute;*/
/*	left: 40vw;*/
/*	top: calc(50% - 200px);*/
/*	width: 182px;*/
/*	height: 182px;*/
/*	background-image:url('../img/main/section02_slider_ect.png?new');*/
/*	background-position: 100% center;*/
/*	font-size:0px;*/
/*	transform:translateX(-50%);*/
/*	z-index: 6;*/
/*	opacity: 0;*/
/*	visibility:hidden;*/
/*}*/

/*.section_02.active .ect {*/
/*	animation: s2__act__ani 1s 2s ease-out both;*/
/*}*/

/*@keyframes s2__act__ani {*/
/*	from {*/
/*		opacity: 0;*/
/*		visibility:hidden;*/
/*		clip:rect(0,182px,0,0);*/
/*	}*/

/*	to {*/
/*		opacity: 1;*/
/*		visibility:visible;*/
/*		clip:rect(0,182px,182px,0);*/
/*	}*/
/*}*/




.section_03 {
	background-color: #000000;
}
.section_03_wrap {
	height: 100vh;
	padding-top: 100px;
}
.section_03 .swiper-slide {
	background-position-y: bottom;
	transform:scale3d(1.08, 1.08, 1.08);
}

.sec03_s01 {
	background-image: url("../img/main/sec03_s01_bg.png");
}
.sec03_s02 {
	background-image: url("../img/main/sec03_s02_bg.png");
}
.sec03_s03 {
	background-image: url("../img/main/sec03_s03_bg.png");
}
.sec03_s04 {
	background-image: url("../img/main/sec03_s04_bg.png");
}
.sec03_s05 {
	background-image: url("../img/main/sec03_s05_bg.png");
}
.sec03_s06 {
	background-image: url("../img/main/sec03_s06_bg.png");
}
.sec03_s07 {
	background-image: url("../img/main/sec03_s07_bg.png");
}

.sec03_line {
	position: absolute;
	bottom: 300px;
	width: 100vw;
	height: 1px;
}
.sec03_line > span {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 100vw;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
}


.sec03_title {
	position: absolute;
	top: calc(50% - 150px);
	left: 200px;
	transform: translateY(-50%) scale(0.95);
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}
.section_03.active .swiper-slide-active .sec03_title {
	animation: sec03_title ease-in-out .7s forwards;
}
@keyframes sec03_title {
	from {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
	to {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
.sec03_title_btn01, .sec03_title_btn02,.sec03_title_btn03,.sec03_title_btn04,.sec03_title_btn05,.sec03_title_btn06,.sec03_title_btn07 {
	cursor: pointer;
}

.circle_text {
	animation: FadeInUp 0.7s 2s both;
}
.circle_text img {
	position:relative;
	z-index: 5;
	top: 5px;
}



.sec03_text {
	position: absolute;
	top: -17px;
	opacity: 0;
	transform: translateX(-30px);
}
.sec03_text01 {
	left: 200px;
}
.sec03_text02 {
	left: 420px;
}
.sec03_text03 {
	left: 660px;
}
.sec03_text04 {
	left: 860px;
}
.sec03_text05 {
	left: 1100px;
}
.sec03_text06 {
	left: 900px;
}
.sec03_text07 {
	left: 1150px;
}
.section_03.active .swiper-slide-active .sec03_text {
	animation: sec03_text ease-in-out .6s .5s forwards;
}
@keyframes sec03_text {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}











.section_04_wrap {
	background-image: url("../img/main/sec04_bg.png");
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 80px;
	padding-top: 100px;
	background-size: cover !important;
}
.section_04.active .section_04_wrap {
	animation: section_04_wrap 2s .2s ease both;
}
@keyframes section_04_wrap {
	from {
		background-position-y: top;
	}

	to {
		background-position-y: bottom;
	}
}

.sec04_title {
	position: relative;
	opacity: 0;
}
.section_04.active .sec04_title {
	animation: sec04_title ease-in-out .8s .5s forwards ;
}
@keyframes sec04_title {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
.sec04_con01 {
	position: relative;
	opacity: 0;
	transform: translateX(40px);
}
.section_04.active .sec04_con01 {
	animation: sec04_con01 ease-in-out 1s .8s forwards ;
}
@keyframes sec04_con01 {
	from {
		opacity: 0;
		transform: translateX(40px);
	}

	to {
		opacity: 1;
		transform: translateX(0px);
	}
}
.sec04_con02 {
	position: relative;
	opacity: 0;
	transform: translateX(-40px);
}
.section_04.active .sec04_con02 {
	animation: sec04_con02 ease-in-out 1s .8s forwards ;
}
@keyframes sec04_con02 {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}

	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

.sec04_bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 60px;
}


@media screen and (max-width:1920px) and (min-width:1740px) {


	.section_02 .ect {
		left: 33vw;
	}
}

@media screen and (max-width: 1800px) {
	.sec03_text02 {
		left: 220px;
	}
	.sec03_text03 {
		left: 300px;
	}
	.sec03_text04 {
		left: 400px;
	}
	.sec03_text05 {
		left: 500px;
	}
	.sec03_text06 {
		left: 600px;
	}
	.sec03_text07 {
		left: 700px;
	}
	.sec04_title {
		transform: scale(0.7);
	}
	.sec04_bottom {
		/*margin-top: -170px;*/
		transform: scale(0.8);
	}
	.section_04_wrap {
		gap: 0;
	}
}
@media screen and (max-width:1739px) {


	.section_02 .ect {
		left: 30vw;
	}

	.section_02 .swiper-container {
		width: 790px;
	}

	.section_02 .swiper_premium_slider .swiper-slide {
		width: 250px !important;
		height: 220px !important;
	}
}

