@charset "UTF-8";

/*************** 메인비주얼 ***************/

.main-visual{
	padding-top: var(--space-165);
}
.main-visual .title-show .layout {
	display: flex;
	align-items: center;
	justify-content: center;
}
.main-visual .title-show span {
	font-size: 8.3333vw;
}

/* round 텍스트 애니메이션 */
.main-visual.round .title-show span {
	letter-spacing: -0.4rem;

	-webkit-animation: titleShow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: titleShow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.main-visual.round .title-show .first span:nth-child(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.main-visual.round .title-show .first span:nth-child(2) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.main-visual.round .title-show .first span:nth-child(3) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.main-visual.round .title-show .first span:nth-child(4) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.main-visual.round .title-show .first span:nth-child(5) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.main-visual.round .title-show .second span:nth-child(1) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.main-visual.round .title-show .second span:nth-child(2) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.main-visual.round .title-show .second span:nth-child(3) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.main-visual.round .title-show .third span:nth-child(1) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.main-visual.round .title-show .third span:nth-child(2) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.main-visual.round .title-show .third span:nth-child(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.main-visual.round .title-show .third span:nth-child(4) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.main-visual.round .title-show .third span:nth-child(5) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
.main-visual.round .title-show .third span:nth-child(6) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.main-visual.round .title-show .third span:nth-child(7) {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

@-webkit-keyframes titleShow {
	0% {
		opacity: 0;
	}
	33%, 66% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

@keyframes titleShow {
	0% {
		opacity: 0;
	}
	33%, 66% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

/* friend 텍스트 애니메이션 */
.main-visual.friend .title-show span {
	letter-spacing: -0.4rem;

	-webkit-animation: title-show 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: titleShow2 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.main-visual.friend .title-show .first span:nth-child(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.main-visual.friend .title-show .first span:nth-child(2) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.main-visual.friend .title-show .first span:nth-child(3) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.main-visual.friend .title-show .first span:nth-child(4) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.main-visual.friend .title-show .first span:nth-child(5) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.main-visual.friend .title-show .first span:nth-child(6) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.main-visual.friend .title-show .second span:nth-child(1) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.main-visual.friend .title-show .second span:nth-child(2) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.main-visual.friend .title-show .second span:nth-child(3) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.main-visual.friend .title-show .second span:nth-child(4) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.main-visual.friend .title-show .second span:nth-child(5) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.main-visual.friend .title-show .third span:nth-child(1) {
	-webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.main-visual.friend .title-show .third span:nth-child(2) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
.main-visual.friend .title-show .third span:nth-child(3) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.main-visual.friend .title-show .third span:nth-child(4) {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}
.main-visual.friend .title-show .third span:nth-child(5) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes titleShow2 {
	0% {
		opacity: 0;
	}
	33%, 66% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

@keyframes titleShow2 {
	0% {
		opacity: 0;
	}
	33%, 66% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

/* 비주얼 스와이퍼 */
.main-visual .swiper-area .layout{
	width: 100%;
	max-width: 1920px;
	padding: 0 var(--space-40);
}
.main-visual .swiper-area .swiper {
	width: 100%;
	height: 512px;
	border-radius: 20px;
	overflow: hidden;
}
.main-visual .swiper-area .swiper .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}
.main-visual .swiper-area .swiper .swiper-slide.slide1{
	background: url('/img/main-visual1.jpg') no-repeat center top 38% /cover;
}
.main-visual .swiper-area .swiper .swiper-slide.slide2{
	background: url('/img/main-visual2.jpg') no-repeat center top 15% /cover;
}


/*************** 메인서포트 ***************/
.main-support{
	padding: var(--space-170) 0 var(--space-85);
}
.main-support .tltle-area{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.main-support .title-box .text{
	margin-top: var(--space-25);
}
.main-support .swiper-area{
	margin-top: var(--space-65);
}
.main-support .swiper-area .swiper{
	overflow: visible;
}
.main-support .swiper-area .swiper-slide{
	background: var(--gray04);
	border-radius: 20px;
	transition: var(--transition);

	/*스와이퍼 깜박임 제어*/
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}
.main-support .swiper-area .swiper-slide a{
	display: block;
	padding: var(--space-40);
}
.main-support .swiper-area .swiper-slide .top-contants{
	display: flex;
	justify-content: space-between;
}
.main-support .swiper-area .swiper-slide .top-contants figure{
	width: 230px;
    height: 0;
	padding-bottom: 230px;
	overflow: hidden;
	position: relative;
	border-radius: 20px;
}
.main-support .swiper-area .swiper-slide .top-contants figure img{
	width: auto;
	max-width: 10000%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.main-support .swiper-area .swiper-slide .bottom-contants{
	margin-top: var(--space-75);
}
.main-support .swiper-area .swiper-slide .bottom-contants .text{
	margin-top: var(--space-15);
}

/* 슬라이드 호버 효과 */
.main-support .swiper-area .swiper-slide:hover{
	background: var(--gray03);
}

/* 슬라이드 액티브 효과 */
.main-support .swiper-area .swiper-slide.swiper-slide-active{
	background: linear-gradient(0deg, rgba(82,35,137,1) 0%, rgba(218,157,237,1) 100%);
}
.main-support .swiper-area .swiper-slide.swiper-slide-active .top-contants .deco{
	color: var(--white);
}
.main-support .swiper-area .swiper-slide.swiper-slide-active .bottom-contants .small-title{
	color: var(--white);
}
.main-support .swiper-area .swiper-slide.swiper-slide-active .bottom-contants .text{
	color: rgba(255, 255, 255, 0.8);
}

/* 슬라이드 버튼 */
.main-support .swiper-button-next,
.main-support .swiper-button-prev{
	position: static;
}
.main-support .swiper-button-prev:after,
.main-support .swiper-button-next:after{
	display: none;
}
.main-support .swiper-navigation-box{
	display: flex;
	align-items: center;
	gap: 12px;
	--swiper-navigation-size: auto;
}
.main-support .swiper-navigation-box .pager{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: var(--gray04);
	border-radius: 50%;
	transition: var(--transition);
}

.main-support .swiper-navigation-box .pager i{
	color: var(--gray02);
	font-size: 1.25rem;
	transition: var(--transition);
}

/* 슬라이드 버튼 호버 효과 */
.main-support .swiper-navigation-box .pager:hover{
	background: var(--gray03);
}



/*************** 메인커뮤니티 ***************/
.main-community{
	padding: var(--space-85) 0;
}
.main-community .list-box{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 25px;
	margin-top: var(--space-65);
}
.main-community .list-box li{
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}
.main-community .list-box li a{
	display: block;
	width: 100%;
	height: 100%;
}
.main-community .list-box li a:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.4);
	transition: var(--transition);
	opacity: 0;
}
.main-community .list-box li a:hover:after{
	opacity: 1;
}


/*************** 메인지원하기 ***************/
.main-apply{
	padding: var(--space-170) 0 var(--space-360);
	position: relative;
}
.main-apply .contents .title-box{
	display: flex;
	flex-direction: column;
}
.main-apply .contents .title-box span{
	display: block;
}
.main-apply .contents .title-box .second{
	text-align: right;
}
.main-apply .contents .title-box.pc{
	gap: 15px;
	padding: 0 var(--space-50);
}
.main-apply .contents .title-box.pc span{
	/*font-size: 5.0201vw;*/
	font-size: 6.25rem;
}
.main-apply .contents .title-box.pc .first{}
.main-apply .contents .title-box.pc .second{}
.main-apply .contents .title-box.mobile{
	gap: 5px;
	display: none;
}
.main-apply .contents .title-box.mobile span{
	font-size: 8.7805vw;
}
.main-apply .contents .title-box.mobile .first{
	padding-left: var(--space-30);
}
.main-apply .contents .title-box.mobile .second{
	padding-right: var(--space-60);
}
.main-apply .contents .title-box.mobile .third{
	padding-left: var(--space-80);
}
.main-apply .contents .button-box{
	display: flex;
	justify-content: center;
	margin-top: var(--space-65);
}
.main-apply .contents .button-box .apply-button{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: var(--space-20) var(--space-40);
	background: var(--white);
	box-shadow: 0 0 10px #fbf0fe;
	border-radius: 1000px;
	transition: var(--transition);
}
.main-apply .contents .button-box .apply-button strong{
	transition: var(--transition);
}
.main-apply .contents .button-box .apply-button i {
    color: var(--black);
    font-size: 1.25rem;
    transition: var(--transition);
}

/* 지원하기 버튼 호버 효과 */
.main-apply .contents .button-box .apply-button:hover{
	background: var(--purple02);
}

.main-apply .contents .button-box .apply-button:hover strong,
.main-apply .contents .button-box .apply-button:hover i{
	color: var(--white);
}

/* 지원하기 배경 이미지 */
.main-apply  figure{
	height: 0;
	overflow: hidden;
	border-radius: 20px;
	position: absolute;
	z-index: -1;
}
.main-apply figure.background1{
	width: 20%;	
	padding-bottom: 20%;
	top: -11%;
    right: 22%;
}
.main-apply figure.background2{
	width: 22%;
	padding-bottom: 27%;
	bottom: -55%;
	left: 0;
}
.main-apply figure.background3{
	width: 34%;
	padding-bottom: 22%;
	bottom: -60%;
	right: 0;
}
.main-apply figure img{
	width: 100%;
	max-width: 10000%;
	height: auto;
	position: absolute;
	left: 50%;
}
.main-apply figure.background1 img{
	bottom: 0;
	transform: translateX(-50%) scale(1.1);
}
.main-apply figure.background2 img{
	bottom: 50%;
	transform: translate(-50%, 50%) scale(1.3);
}
.main-apply figure.background3 img{
	bottom: 0;
	transform: translateX(-50%) scale(1.2);
}

/* 지원하기 배경 애니메이션 */
.main-apply .move-box{
	position: relative;
	animation-name: movingBall;
    animation-duration: 15000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	-webkit-animation-name: movingBall;
    -webkit-animation-duration: 15000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.main-apply .move-box{
	width: 650px;
    height: 650px;
    position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
.main-apply .moving{
    width: 70%;
	height: 70%;
	border-radius: 50%;
	filter: blur(50px);
	position: absolute;
}
.main-apply .moving1{
	background: #fde6f5;
	top: 0;
    right: 0;
}
.main-apply .moving2{
	background: #eec8fe;
	bottom: 0;
    right: 0;
}
.main-apply .moving3{
	background: #fef4da;
	top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/*@keyframes movingBall{
    0% { 
        transform: rotate(0deg);
		top: 0;
        left: 0;
	}
    10% { 
		top: 20%;
        left: 10%;        
    }
    20% {
		top: 40%;
		left: 30%;        
    }
    30% {
		top: 60%;
        left: 50%;
    }
    40% {
		top: 30%;
        left: 60%;
    }
    50% { 
        transform: rotate(360deg);
		top: 0;
        left: 70%;
    60% {
		top: 70%;
        left: 60%;
    }
    70% {
		top: 60%;
        left: 50%;
    }
    80% {
		top: 50%;
        left: 40%;
    }
    90% {
		top: 20%;
        left: 20%;
    }
    100%{
        transform: rotate(-360deg);
		top:0;
        left:0;  
    }
}*/

@keyframes movingBall{
    0% { 
        transform: rotate(0deg);
		top: 0;
        left: 0;
	}
    25% { 
		top: 25%;
        left: 20%;       
    }
    50% { 
        transform: rotate(360deg);
		top: 0;
        left: 50%;
	}
    75% {
		top: 30%;
        left: 20%;
    }
    100%{
        transform: rotate(-360deg);
		top:0;
        left:0;  
    }
}


/*************** @메인 미디어쿼리 ***************/
@media all and (max-width: 1400px){
	/* 메인비주얼 */
	.main-visual .title-show span{
		font-size: 9.7143vw;
	}
	/* 메인서포트 */
	.main-support .swiper-area .swiper-slide .top-contants{
		flex-direction: column;
		gap: 15px;
	}
	.main-support .swiper-area .swiper-slide .top-contants figure {
		width: 100%;
		padding-bottom: 50%;
	}
	.main-support .swiper-area .swiper-slide .top-contants figure img{
		width: 100%;
		height: auto;
	}
	.main-support .swiper-area .swiper-slide .bottom-contants {
		margin-top: var(--space-60);
	}
	/* 메인지원하기 */
	.main-apply .contents .title-box.pc{
		gap: 10px;
	}
	.main-apply .contents .title-box.pc span {
		font-size: 6.5120vw;
	}
}

@media all and (max-width: 1300px){
	/* 메인비주얼 */
	.main-visual {
		padding-top: var(--space-135);
	}
	.main-visual .swiper-area .layout{
		padding: 0 var(--space-20);
	}

	/* 메인서포트 */
	.main-support {
		padding: var(--space-130) 0 var(--space-65);
	}
	.main-support .swiper-area .swiper-slide .top-contants{
		flex-direction: column;
		gap: 12px;
	}
	/* 메인커뮤니티 */
	.main-community {
		padding: var(--space-65) 0;
	}
	.main-community .list-box{
		gap: 20px;
	}
	/* 메인지원하기 */
	.main-apply{
		padding: var(--space-155) 0 var(--space-300);
	}
	.main-apply .move-box {
		width: 450px;
		height: 450px;
	}
	/*.main-apply figure.background1 {
		top: -70px;
		right: 263px;
	}
	.main-apply figure.background2{
		bottom: -180px;
	}
	.main-apply figure.background3{
		bottom: -150px;
	}*/
}

@media all and (max-width: 1100px){
	/* 메인비주얼 */
	.main-visual .swiper-area .swiper{
		height: 365px;
	}
	/* 메인커뮤니티 */
	.main-community .list-box{
		margin-top: var(--space-45);
	}
	/* 메인지원하기 */
	.main-apply{
		padding: var(--space-145) 0 var(--space-280);
	}
	.main-apply .contents .button-box{
		margin-top: var(--space-45);
	}
	.main-apply figure.background1 {
		width: 18%;
		padding-bottom: 18%;
		top: -12%;
	}
	.main-apply figure.background2 {
		width: 20%;
		padding-bottom: 23%;
        bottom: -37%;
    }
	.main-apply figure.background3 {
		width: 26%;
		padding-bottom: 17%;
        bottom: -25%;
    }
}

@media all and (max-width: 1000px){
	/*메인서포트*/
	.main-support .tltle-area{
		gap: 60px;
	}
	.main-support .title-box .text br{
		display: none;
	}
	/* 메인커뮤니티 */
	.main-community .list-box{
		grid-template-columns: repeat(2, 1fr);
	}
	.main-community .list-box {
        gap: 15px;
    }
	/* 메인지원하기 */
	.main-apply {
        padding: var(--space-125) 0 var(--space-180);
    }
	.main-apply .move-box {
        width: 320px;
        height: 320px;
    }
	.main-apply .contents .title-box.pc{
		display: none;
	}
	.main-apply .contents .title-box.mobile{
		display: block;
	}
	.main-apply .contents .button-box .apply-button{
		gap: 20px;
		padding: var(--space-15) var(--space-30);
	}
	.main-apply figure.background1 {
		top: -2%;
		right: 15%;
	}
	.main-apply figure.background2{
		bottom: -14%;
	}
	.main-apply figure.background3{
		bottom: 7%;
	}
}

@media all and (max-width: 640px){
	/* 메인비주얼 */
	.main-visual {
        padding-top: var(--space-100);
	}
	.main-visual .title-show span{
		letter-spacing: -0.3rem;
	}
	.main-visual .swiper-area .layout{
		padding: 0;
	}
	.main-visual .swiper-area .swiper{
		height: 400px;
		border-radius: 0;
	}
	/* 메인서포트 */
	.main-support {
        padding: var(--space-90) 0 var(--space-50);
    }
	.main-support .tltle-area{
		flex-direction: column;
		align-items: stretch;
		gap: 35px;
	}
	.main-support .title-box .text {
		margin-top: var(--space-20);
	}
	.main-support .swiper-navigation-box{
		gap: 10px;
	}
	.main-support .swiper-navigation-box .pager{
		width: 40px;
		height: 40px;
	}
	.main-support .swiper-navigation-box .pager i {
		font-size: 1rem;
	}
	.main-support .swiper-area {
		margin-top: var(--space-25);
	}
	.main-support .swiper-area .swiper-slide a{
		padding: var(--space-20);
	}
	.main-support .swiper-area .swiper-slide .bottom-contants {
		height: 100px;
        margin-top: var(--space-40);
    }
	.main-support .swiper-area .swiper-slide .bottom-contants .text {
		margin-top: var(--space-10);
	}
	.main-support .swiper-area .swiper-slide .bottom-contants .text br{
		display: none;
	}
	/* 메인커뮤니티 */
	.main-community {
        padding: var(--space-50) 0;
    }
	.main-community .list-box {
        gap: 10px;
		margin-top: var(--space-30);
    }
	/* 메인지원하기 */
	.main-apply {
        padding: var(--space-65) 0 var(--space-150);
    }
	.main-apply .move-box {
        width: 200px;
        height: 200px;
    }
	.main-apply .contents .title-box.mobile{
		padding: var(--space-20);
	}
	.main-apply .contents .title-box.mobile .first,
	.main-apply .contents .title-box.mobile .second,
	.main-apply .contents .title-box.mobile .third{
		padding: 0;
	}
	.main-apply .contents .button-box {
        margin-top: var(--space-20);
    }
	.main-apply .contents .button-box .apply-button{
		gap: 10px;
		padding: var(--space-8) var(--space-18);
	}
	.main-apply .contents .button-box .apply-button i{
		font-size: 1rem;
	}
	.main-apply figure{
		border-radius: 10px;
	}
	.main-apply figure.background1 {
		width: 22%;
        padding-bottom: 22%;
        top: 2%;
		right: 10%;
    }
	.main-apply figure.background2 {
		width: 22%;
        padding-bottom: 28%;
        bottom: -19%;
    }
	.main-apply figure.background3 {
		width: 30%;
        padding-bottom: 20%;
        bottom: 15%;
    }


}