@charset "UTF-8";

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}


@keyframes AFadeUpInOut {
	from {transform: translateY(100%);}
	/* 30% {transform: translateY(0rem);} */
	50% {transform: translateY(0rem);}
	70% {transform: translateY(0rem);}
	to {transform: translateY(0rem);}
}

.AFadeUpInOut { animation-name: AFadeUpInOut; animation-duration: 4s;}
/* .mTLine:nth-child(1) p {animation-delay:0.3s;} */
/* .mTLine:nth-child(2) p {animation-delay:0.5s;} */
/* .mTLine:nth-child(3) p {animation-delay:0.7s;} */


@keyframes FadeInUp {
	0% {opacity:0; transform: translateY(-3.5rem);}
	/* 70% {opacity:0; transform: translateY(-3.5rem);} */
	100% {opacity:1; transform: translateY(0rem);}
}
.FadeInUp { animation-name: FadeInUp; animation-duration: 5s;}



@keyframes FadeInDown {
	0% {opacity:0; transform: translateY(3.5rem);}
	/* 70% {opacity:0; transform: translateY(3.5rem);} */
	100% {opacity:1; transform: translateY(0rem);}
}

/* .FadeInDown { animation-name: FadeInDown; animation-duration: 5s;} */
/* == // animation == */

@keyframes textflip {
	0% {
		opacity: 0;
		transform: rotateX(90deg);
	}
	100% {
		opacity: 1;
		transform: rotateX(0deg);
	}
}




#mainV .mainslide01.swiper-slide-active .textflip {animation:textflip 2s ease forwards; animation-delay:0.2s;}

#mainV .mainslide02.swiper-slide-active .FadeInUp {animation:FadeInUp 2s ease forwards; animation-delay:0;}
#mainV .mainslide02.swiper-slide-active .FadeInDown {animation:FadeInDown 2s ease forwards; animation-delay:00s;}


@keyframes word_first {
	0 {transform: translateX(-30%); opacity:0;}
	20% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%);opacity:1;}
}
@keyframes word_sec {
	0% {transform: translateX(-30%); opacity:0;}
	20% {transform: translateX(-30%); opacity:0;}
	50% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word_third {
	0% {transform: translateX(-30%); opacity:0;}
	40% {transform: translateX(-30%); opacity:0;}
	70% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word_forth {
	0% {transform: translateX(-30%); opacity:0;}
	70% {transform: translateX(-30%); opacity:0;}
	100% {transform: translateX(0%); opacity:1;}
}


.wordlineUp {
	animation-name: wordlineUp;
	animation-delay: 0.2s;
    animation-duration: 0.5s;
	animation-fill-mode: forwards;
    animation-timing-function: ease;
}

@keyframes wordlineUp {
	0% {transform: translateY(100%); opacity:0;}
	100% {transform: translateY(0%); opacity:1;}
}





.word {
	animation-delay: 0.3s;
    animation-duration: 0.8s;
	animation-fill-mode: forwards;
    animation-timing-function: ease;
}

.mTLine:nth-child(2) .word {animation-delay: 1.5s; opacity:0;}
.mTLine:nth-child(3) .word {animation-delay: 1.8s; opacity:0;}

.swiper-slide-active .word_first {animation-name: word_first;}
.swiper-slide-active .word_sec {animation-name: word_sec;}
.swiper-slide-active .word_third {animation-name: word_third;}
.swiper-slide-active .word_forth {animation-name: word_forth;}
.swiper-slide-active .word_five {animation-name: word_five;}

/* .word {opacity:1; transform: translateX(-100%);} */

.mTLine .word01 {z-index:4; opacity:0;}
.mTLine .word1_02 {z-index:3;}
.mTLine .word03 {z-index:2;}
.mTLine .word04 {z-index:1;}



@keyframes word_first {
	0% {transform: translateX(-30%); opacity:0;}
	30% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%);opacity:1;}
}
@keyframes word_sec {
	0% {transform: translateX(-30%); opacity:0;}
	20% {transform: translateX(-30%); opacity:0;}
	60% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word_third {
	0% {transform: translateX(-30%); opacity:0;}
	40% {transform: translateX(-30%); opacity:0;}
	80% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word_forth {
	0% {transform: translateX(-30%); opacity:0;}
	62% {transform: translateX(-30%); opacity:0;}
	100% {transform: translateX(0%); opacity:1;}
}



.word02 {
	opacity:0;
	animation-delay: 1s;
    animation-duration: 1s;
	animation-fill-mode: forwards;
    animation-timing-function: ease;
}


@keyframes word02_first {
	0% {transform: translateX(-30px); opacity:0;}
	12% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%);opacity:1;}
}
@keyframes word02_sec {
	0% {transform: translateX(-30px); opacity:0;}
	10% {transform: translateX(-30px); opacity:0;}
	24% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_third {
	0% {transform: translateX(-30px); opacity:0;}
	22% {transform: translateX(-30px); opacity:0;}
	36% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_forth {
	0% {transform: translateX(-30px); opacity:0;}
	32% {transform: translateX(-30px); opacity:0;}
	48% {transform: translateX(0%); opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_five {
	0% {transform: translateX(-30px); opacity:0;}
	46% {transform:translateX(-30px); opacity:0;}
	60% {transform: translateX(0%); opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_six {
	0% {transform:translateX(-30px);opacity:0;}
	58% {transform:translateX(-30px); opacity:0;}
	72% {transform: translateX(0%); opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_sev {
	0% {transform:translateX(-30px);opacity:0;}
	70% {transform:translateX(-30px);opacity:0;}
	84% {transform: translateX(0%); opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_eigh {
	0% {transform:translateX(-30px);opacity:0;}
	82% {transform: translateX(-30px); opacity:0;}
	96% {transform: translateX(0%); opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}


.mTLine .word2_01 {z-index:8;}
.mTLine .word2_02 {z-index:7;}
.mTLine .word2_03 {z-index:6;}
.mTLine .word2_04 {z-index:5;}
.mTLine .word2_05 {z-index:4;}
.mTLine .word2_06 {z-index:3;}
.mTLine .word2_07 {z-index:2;}
.mTLine .word2_08 {z-index:1;}

.swiper-slide-active .word02_first {animation-name: word02_first;}
.swiper-slide-active .word02_sec {animation-name: word02_sec;}
.swiper-slide-active .word02_third {animation-name: word02_third;}
.swiper-slide-active .word02_forth {animation-name: word02_forth;}
.swiper-slide-active .word02_five {animation-name: word02_five;}

.swiper-slide-active .word02_six {animation-name: word02_six;}
.swiper-slide-active .word02_sev {animation-name: word02_sev;}
.swiper-slide-active .word02_eigh {animation-name: word02_eigh;}


/* .mTLinetwolinewidth {animation:mTLinetwolinewidth } */


/* @keyframes mlinewidth { */
	/* 0% {opacity:0; width:0;} */
	/* 100% {opacity: 1; width: 28%;} */
/* } */
/* .swiper-slide-active .mlinewidth {animation:mlinewidth 1.5s ease forwards; animation-delay: 6.5s;} */

/* @media (max-width:1400px) { */
	/* @keyframes mlinewidth { */
		/* 0% {opacity:0; width:0;} */
		/* 100% {opacity: 1; width: 25%;} */
	/* } */
/* } */

/* @media (max-width:991px) { */
	/* @keyframes mlinewidth { */
		/* 0% {opacity:0; width:0;} */
		/* 100% {opacity: 1; width: 18.5%;} */
	/* } */
/* } */

/* @media (max-width:767px) { */
	/* @keyframes mlinewidth { */
		/* 0% {opacity:0; width:0;} */
		/* 100% {opacity: 1; width: 43%;} */
	/* } */
/* } */


/* @media (max-width:767px) { */
	/* @keyframes mlinewidth { */
		/* 0% {opacity:0; width:0;} */
		/* 100% {opacity: 1; width: 43%;} */
	/* } */
/* } */


/* minnewwidhttest */
@keyframes mlinewidth {
	0% {opacity:0; width:0;}
	100% {opacity: 1; width: 28%;}
}
.swiper-slide-active .mlinewidth {animation:mlinewidth 1.5s ease forwards; animation-delay: 6.5s;}

@media (max-width:1400px) {
	@keyframes mlinewidth {
		0% {opacity:0; width:0;}
		100% {opacity: 1; width: 25%;}
	}
}

@media (max-width:991px) {
	@keyframes mlinewidth {
		0% {opacity:0; width:2px; height:0;}
		100% {opacity: 1; width: 2px; height:70p;}
	}
	
	.swiper-slide-active .mlinewidth {animation:mlinewidth 1s ease forwards; animation-delay: 3s;}
}

@media (max-width:767px) {
		@keyframes mlinewidth {
		0% {opacity:0; width:2px; height:0;}
		100% {opacity: 1; width: 2px; height:70px;}
	}
}


@media (max-width:767px) {
	@keyframes mlinewidth {
		0% {opacity:0; width:2px; height:0;}
		100% {opacity: 1; width: 2px; height:70px;}
	}
}



/* nxt */
@keyframes word02_first {
	0% {transform: translateX(-100%); opacity:0;}
	12% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%);opacity:1;}
}
@keyframes word02_sec {
	0% {transform: translateX(-30px); opacity:0;}
	12% {transform: translateX(-30px); opacity:0;}
	24% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}
@keyframes word02_third {
	0% {transform: translateX(-30px); opacity:0;}
	24% {transform: translateX(-30px); opacity:0;}
	36% {transform: translateX(0%);opacity:1;}
	100% {transform: translateX(0%); opacity:1;}
}

.swiper-slide-active .mlinewidth {animation:mlinewidth 1s ease forwards; animation-delay: 2.5s;}
@media (max-width:767px) {
	.swiper-slide-active .mlinewidth {animation:mlinewidth 1.8s ease forwards; animation-delay: 2.5s;}
}

@keyframes nxt_opacity {
	0% {opacity:0;}
	100% {opacity:1;}
}

.swiper-slide-active .nxt_opacity {animation:nxt_opacity 1.2s ease forwards;}

/* .nxt_n.nxt_opacity {animation-delay: 2.8s;} */
/* .nxt_x.nxt_opacity {animation-delay: 3s;} */
/* .nxt_t.nxt_opacity {animation-delay: 3.2s;} */

.nxt_n.nxt_opacity {animation-delay: 4s;}
.nxt_x.nxt_opacity {animation-delay: 4.2s;}
.nxt_t.nxt_opacity {animation-delay: 4.4s;}

/* main02 */
.swiper-slide-active .main02TitleUp {animation:main02TitleUp 1.5s ease forwards; }
@keyframes main02TitleUp {
	0% {opacity:0; transform: translateY(3.5rem);}
	100% {opacity:1; transform: translateY(0rem);}
}


.swiper-slide-active .main02BoxUp {animation:main02BoxUp 1.2s ease forwards; }

@keyframes main02BoxUp {
	0% {opacity:0; transform: translateY(3.5rem);}
	100% {opacity:1; transform: translateY(0rem);}
}

.del_first.main02BoxUp {animation-delay:0.2s;}
.del_second.main02BoxUp {animation-delay:0.5s;}
.del_third.main02BoxUp {animation-delay:0.8s;}

.del_fourth.main02TitleUp {animation-delay:1s;}

.del_five.main02BoxUp {animation-delay:1.2s;}
.del_six.main02BoxUp {animation-delay:1.4s;}
.del_sev.main02BoxUp {animation-delay:1.6s;}

/* 메인 슬라이드01 수정 - 230626 */


.swiper-slide-active .word_firstline {
    animation-duration: 0.8s;
    animation-timing-function: ease;
	animation-name:word_firstline;
	animation-delay:0.4s;
	animation-fill-mode:both;
	opacity:0;
}

@keyframes word_firstline {
	0% {transform: translateY(100%); opacity:0;}
	100% {transform: translateY(0%);opacity:1;}
}

.swiper-slide-active .word02_firstline {
    animation-duration: 0.8s;
    animation-timing-function: ease;
	animation-name:word02_firstline;
	animation-delay:0.6s;
	animation-fill-mode:both;
	opacity:0;
}

@keyframes word02_firstline {
	0% {transform: translateY(100%); opacity:0;}
	100% {transform: translateY(0%);opacity:1;}
}

.swiper-slide-active .word02_firstline {
    animation-duration: 0.8s;
    animation-timing-function: ease;
	animation-name:word02_firstline;
	animation-delay:0.6s;
	animation-fill-mode:both;
	opacity:0;
}

.mTLine:nth-child(3) .word {
    animation-delay: 0.8s;
    opacity: 0;
}

/* 블로그 메인 슬라이드 */
.ms02blogTitleUp {opacity:0;}
.swiper-slide-active  .ms02blogTitle .ms02blogTitleUp {
    animation-duration: 1.2s;
    /* animation-timing-function: ease; */
	animation-name:ms02blogTitleUp;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	transition:none;
	opacity:0;
}

.swiper-slide-active  .ms02blogstxt .ms02blogTitleUp {
    animation-duration: 1s;
    animation-timing-function: ease;
	animation-name:ms02blogTitleUp;
	animation-delay:0.4s;
	animation-fill-mode:both;
	opacity:0;
}

.swiper-slide-active  .ms02blogtxt .ms02blogTitleUp {
    animation-duration: 0.8s;
    animation-timing-function: ease;
	animation-name:ms02blogTitleUp;
	animation-delay:0.6s;
	animation-fill-mode:both;
	opacity:0;
}

.swiper-slide-active .blogviewmore.ms02blogTitleUp {
	animation-duration: 0.8s;
    animation-timing-function: ease;
	animation-name:ms02blogTitleUp;
	animation-delay:0.6s;
	animation-fill-mode:both;
	opacity:0;
}

@keyframes ms02blogTitleUp {
	0% {opacity:0; transform: translateY(100%);}
	100% {opacity:1; transform: translateY(0rem);}
}

.swiper-slide-active .textImgUp {
	animation-name:textImgUp;
	animation-fill-mode:both;
	animation-duration: 1.2s;
	animation-timing-function: ease;
}
.swiper-slide-active .text01.textImgUp {animation-delay:0.9s;}
.swiper-slide-active .text02.textImgUp {animation-delay:1.1s;}
.swiper-slide-active .text03.textImgUp {animation-delay:1.3s;}
.swiper-slide-active .text04.textImgUp {animation-delay:1.5s;}
.swiper-slide-active .text05.textImgUp {animation-delay:1.7s;}

@keyframes textImgUp {
	0% {opacity:0; transform: translateY(3rem);}
	100% {opacity:1; transform: translateY(0rem);}
}

.swiper-slide-active .BlogImgUp {
	animation-name:BlogImgUp;
	animation-fill-mode:both;
	animation-delay:0.6s;
	animation-duration: 0.8s;
	animation-timing-function: ease;
}
@keyframes BlogImgUp {
	0% {opacity:0; transform: translateY(3rem);}
	100% {opacity:1; transform: translateY(0rem);}
}


.swiper-slide-active  .ms03blogTitle .ms02blogTitleUp {
    animation-duration: 1.2s;
    /* animation-timing-function: ease; */
	animation-name:ms02blogTitleUp;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	transition:none;
	/* opacity:0; */
}

.swiper-slide-active  .ms03blogstxt .ms02blogTitleUp {
    animation-duration: 1s;
    animation-timing-function: ease;
	animation-name:ms02blogTitleUp;
	animation-delay:0.4s;
	animation-fill-mode:both;
	/* opacity:0; */
}

.swiper-slide-active  .ms03blogtxt .ms02blogTitleUp {
    animation-duration: 0.8s;
    animation-timing-function: ease;
	animation-name:ms02blogTitleUp;
	animation-delay:0.6s;
	animation-fill-mode:both;
	/* opacity:0; */
}


/* ChatGPT를 활용한 SEO 블로그 자동 라이팅 animation */

@keyframes gFadeInUp {
	0% {opacity:0; transform: translateY(3rem);}
	100% {opacity:1; transform: translateY(0rem);}
}

.gFadeInUp {
	animation-name:gFadeInUp;
	animation-fill-mode:both;
	animation-duration: 0.9s;
	animation-timing-function: ease-in-out;
}

@keyframes gFadeInDown {
	0% {opacity:0; transform: translateY(-3rem);}
	100% {opacity:1; transform: translateY(0rem);}
}


@keyframes gFadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

.gFadeIn {
	animation-name:gFadeIn;
	animation-fill-mode:both;
	animation-duration: 0.9s;
	animation-timing-function: ease-in-out;
}

.delay01 {animation-delay:0.1s;}
.delay02 {animation-delay:0.2s;}
.delay03 {animation-delay:0.3s;}
.delay04 {animation-delay:0.4s;}
.delay05 {animation-delay:0.5s;}
.delay06 {animation-delay:0.6s;}
.delay07 {animation-delay:0.7s;}
.delay08 {animation-delay:0.8s;}
.delay09 {animation-delay:0.9s;}
.delay10 {animation-delay:1s;}
.delay12 {animation-delay:1.2s;}
.delay14 {animation-delay:1.4s;}
.delay16 {animation-delay:1.6s;}


/* flow */



@keyframes flowMove {
	0% {opacity:1; transform: translateY(0rem);}
	50% {opacity:1; transform: translateY(1rem);}
	100% {opacity:1; transform: translateY(0rem);}
}

.flowMove {
    animation-name: flowMove;
    animation-fill-mode: both;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}