@charset "utf-8";

/* main-video */ 
.main-visual {position:relative;}
.main-video-area {position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column;  justify-content:center; align-items:center; text-align:center; transition:0.8s all 0.5s ease; pointer-events:none;}
.main-video-area .video-wrap {width:100%; max-width:445px; margin-bottom:var(--size60-20); border:5px solid #fff; border-radius:10px; box-shadow:3px 3px 16px rgba(0,0,0,0.4);}
.main-video-area .video-container {border-radius:10px;}
.main-video-area .tit img {display:block;}
.main-video-area .txt {margin-top:0.59em; font-size:var(--font58-30); font-weight:700; line-height:1.2; letter-spacing:-0.03em; color:#242424;}
.swiper-slide { display:flex !important; align-items:center; justify-content:center; background:#fff;}
.mySwiper {overflow:hidden;}
.main-sec .wrap {position:relative; width:100vw; height:100vh; max-width:1920px; transition:0.2s all ease;}
.main-sec .wrap .group {position:absolute; margin:20px 0; transition:1s 1s all ease;}
.swiper-slide-active {}
.swiper-slide-active .group {transition:1s 1s all ease; z-index:1; margin:0 !important;}

.main-sec .wrap .icon {position:absolute;}
.main-sec .wrap .btn {position:absolute; border:2px solid transparent; border-radius: 100vh; background-image:linear-gradient(#fff, #fff), linear-gradient(-125deg, #607fff,  #3d69e2); background-origin:border-box; background-clip: content-box, border-box;}
.main-sec .wrap .btn a {display:inline-flex; align-items:center; padding:0.89em 1.6em; border-radius: 100vh; color:#fff; font-size:var(--font18-14); font-weight:500; line-height:1; letter-spacing:-0.03em; border:none; background-size:300% 100%; background-image:linear-gradient(125deg , #607fff,  #3d69e2); white-space:nowrap;}
.main-sec .wrap .btn .arrow {display:block; margin-left:15px; position:relative; width:20px; height:12px; transition:0.5s; overflow:hidden; animation:move-arw 4s infinite linear;}
.main-sec .wrap .btn .arrow:after {content:"";  position:absolute; display:block; color:white; width:12px; height:8px; top:-1px; border-bottom:solid 2px; transform:translatex(4px);}
.main-sec .wrap .btn .arrow:before {content:""; position:absolute; display:block; color:white; width:8px; height:8px; border-top:solid 2px; border-left:solid 2px; top:50%; left:2px; transform-origin:0% 0%; transform:rotatez(-45deg);}

.main-sec .wrap .btn a:hover { background-position:100% 0;}
.main-sec .wrap .btn a:hover .arrow:before {animation: aniArrow01 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;}
.main-sec .wrap .btn a:hover .arrow:after {animation: aniArrow02 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;}

@keyframes aniArrow01 {
  0% {
    transform:rotatez(-45deg) translateY(30px) translateX(30px);
  }
  100% {
    transform: rotatez(-45deg) translateY(-35px) translateX(-35px);
  }
}


@keyframes aniArrow02 {
  0% {
    transform:translateX(45px);
  }
  100% {
    transform:translateX(-44px);
  }
}

@keyframes move-arw {
	0%,100% {transform:translateX(0) scale(-1);}
	50% {transform:translateX(10px) scale(-1);}
}

.main-sec .group1 {top:100px; left:-250px;}
.main-sec .group1 .btn {bottom:0; right:-30px;}
.main-sec .group1 .icon {right:0; bottom:80px;}

.main-sec .group2 {top:100px; right:130px;}
.main-sec .group2 .btn {bottom:80px; left:120px;}
.main-sec .group2 .icon {left:0; bottom:0;}

.main-sec .group3 {bottom:70px; left:-40px;}
.main-sec .group3 .btn {right:-80px; bottom:110px;}
.main-sec .group3 .icon {right:25px; bottom:0;}

.main-sec .group4 {bottom:50px; right:30px;}
.main-sec .group4 .btn {left:-70px; bottom:80px;}
.main-sec .group4 .icon {left:0; bottom:150px;}

.main-sec .group5 {top:140px; left:40px;}
.main-sec .group5 .btn {right:130px; bottom:-50px;}
.main-sec .group5 .icon {right:50px; bottom:0;}

.main-sec .group6 {top:140px; right:-250px;}
.main-sec .group6 .btn {left:70px; bottom:20px;}
.main-sec .group6 .icon {right:50px; bottom:0;}

.main-sec .group7 {bottom:30px; left:-90px;}
.main-sec .group7 .btn {right:-90px; top:90px;}
.main-sec .group7 .icon {right:-10px; bottom:60px;}

.main-sec .group8 {bottom:20px; right:-90px;}
.main-sec .group8 .btn {left:130px; top:0;}
.main-sec .group8 .icon {left:0; top:0;}

.main-sec .group9 {bottom:210px; left:100px;}
.main-sec .group9 .btn {right:-30px; bottom:0;}
.main-sec .group9 .icon {left:0; top:0;}

.main-sec .group10 {top:130px; right:-90px;}
.main-sec .group10 .btn {left:60px; bottom:60px;}
.main-sec .group10 .icon {left:-60px; bottom:-15px;}

.main-sec .group11 {bottom:60px; right:85px;}
.main-sec .group11 .btn {left:-90px; bottom:130px;}
.main-sec .group11 .icon {left:-30px; bottom:15px;}

.main-sec .wrap .group:nth-child(1) .icon {
	animation:1s -0.2s infinite wiggle1 ease;
	animation-direction: alternate;
	transform-origin: 50% 50%;
}
.main-sec .wrap .group:nth-child(2) .icon {
	animation:0.8s -0.3s infinite wiggle2 ease;
	animation-direction: alternate;
	transform-origin: 50% 10%;
}
.main-sec .wrap .group:nth-child(3) .icon {
	animation:0.7s -0.2s infinite wiggle3 ease-in-out;
	animation-direction: alternate;
	transform-origin: 100% 0;
}
.main-sec .wrap .group:nth-child(4) .icon {
	animation:1s -0.3s infinite wiggle4 ease-in-out;
	animation-direction: alternate;
}

@keyframes wiggle1 {
	0% {transform:scale(1);}
	50% {transform:scale(1.03);}
}
@keyframes wiggle2 {
	0% {transform:scale(1);}
	50% {transform:scale(1.02);}
}
@keyframes wiggle3 {
	0% {transform:scale(1);}
	50% {transform:scale(1.01);}
}
@keyframes wiggle4 {
	0% {transform:scale(1);}
	50% {transform:scale(1.02);}
}