@charset "utf-8";

/*
    애니메이션 효과를 작성하는 css 파일입니다.
    exampel : animation: fadeIn 0.5s ease-in-out 0s 1 forwards running;
*/

.main .mainBanner .titleBox .title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .catchArti .halfBox .dishDiv{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv{ opacity: 1; animation: dishShow 2s ease-in-out 0s 1 forwards running; }
.main .catchArti .halfBox .dishDiv .dish{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv .dish{ 
    /* animation: flatingPC 3s ease-in-out 1.5s infinite, rotateDish 1.5s ease-in-out 0s 1 forwards running;   */
    animation: rotateDish 1.5s ease-in-out 0s 1 forwards running;
}

.main .catchArti .halfBox .dishDiv .icon1{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv.dish1 .icon1{ animation: fadeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1s; }
.main .catchArti .halfBox .dishDiv .icon2{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv.dish1 .icon2{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .5s; }

.main .catchArti .halfBox .dishDiv.dish2{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv.dish2{ animation: dishShow2 2s ease-in-out 1.5s 1 forwards running; }
.main .catchArti.on .halfBox .dishDiv.dish2 .dish{  animation: rotateDish 1.5s ease-in-out 1.5s 1 forwards running; }
.main .catchArti .halfBox .dishDiv.dish2 .icon1{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv.dish2 .icon1{ animation: fadeShow 0.5s ease-in-out 2s 1 forwards running; animation-delay: 1.5s; }
.main .catchArti .halfBox .dishDiv.dish2 .icon2{ opacity: 0; }
.main .catchArti.on .halfBox .dishDiv.dish2 .icon2{ animation: fadeIn 0.5s ease-in-out 2s 1 forwards running; }



@media screen and (max-width: 900px) {
    .main .catchArti.on .halfBox .dishDiv{ animation: fadeShow 1s ease-in-out 0s 1 forwards running; }
    .main .catchArti.on .halfBox .dishDiv.dish2{ animation: fadeShow 1s ease-in-out 3s 1 forwards running; }
    .main .catchArti.on .halfBox .dishDiv.dish2 .dish{ animation: rotateDish 1.5s ease-in-out 3s 1 forwards running }
    /* .main .catchArti.on .halfBox .dishDiv.dish2{ animation: unset; } */
    .main .catchArti.on .halfBox .dishDiv.dish2 .icon1{ animation: fadeShow 0.5s ease-in-out 4s 1 forwards running; }
    .main .catchArti.on .halfBox .dishDiv.dish2 .icon2{ animation: fadeIn 0.5s ease-in-out 3s 1 forwards running; }
}

@keyframes dishShow {
    0% { opacity: 1; transform: translateX(111%); }
    50% { opacity: 1; transform: translateX(111%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes dishShow2 {
    0% { opacity: 0; transform: translateX(-111%); }
    10% { opacity: 1; transform: translateX(-111%); }
    50% { opacity: 1; transform: translateX(-111%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes rotateDish {
    0% { opacity: 0; transform: rotate(180deg) scale(0); }
    100% { opacity: 1; transform: rotate(0) scale(1) }
}

.main .catchArti .halfBox .textBox{ opacity: 0; }
.main .catchArti.on .halfBox .textBox.leftBox{ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running;  animation-delay: 2s;}
.main .catchArti.on .halfBox .textBox.rightBox{ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running;  animation-delay: 2s;}

.main .successRateArti .contentBox .titleWrap{ opacity: 0; }
.main .successRateArti.on .contentBox .titleWrap{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .successRateArti.on .contentBox .graphBox .graphWrap > li .percent{ animation: textColor .5s ease-in-out infinite; }
.main .successRateArti .contentBox .graphBox .graphWrap > li{ opacity: 0; }
.main .successRateArti .contentBox .graphBox.on .graphWrap > li:nth-child(1){ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running; }
.main .successRateArti .contentBox .graphBox.on .graphWrap > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .successRateArti .contentBox .graphBox.on .graphWrap > li:nth-child(2){ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }

.main .successRateArti.on .leftBottom{ animation: LeftInShow 0.5s ease-in-out 0s 1 forwards running; }
.main .successRateArti.on .rightBottom{ animation: RightInShow 0.5s ease-in-out 0s 1 forwards running; }

@media screen and (max-width: 650px) {
    .main .successRateArti.on .leftBottom{ animation: unset; }
    .main .successRateArti.on .rightBottom{ animation: unset; }
    .main .successRateArti .leftBottom.on{ animation: LeftInShow 1s ease-in-out 0s 1 forwards running; }
    .main .successRateArti .rightBottom.on{ animation: RightInShow 1s ease-in-out 0s 1 forwards running; }
}

@keyframes textColor {
    0% { color: #9A1C19; }
    50% { color: #FFAC00; }
    100% { color: #9A1C19; }
}

.main .rateInfoArti .halfBox .graphBox .title{ opacity: 0; }
.main .rateInfoArti .halfBox .graphBox.on .title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .rateInfoArti .halfBox .graphBox .imgBox .txt .price{ animation: rateTextColor 1s ease-in-out infinite; }
.main .rateInfoArti .halfBox .receipt{ opacity: 0; }
.main .rateInfoArti .halfBox.on .receipt{ animation: receiptUp 1s ease-in-out .5s 1 forwards running; }
.main .rateInfoArti .halfBox .graphBox .imgBox{ opacity: 0; }
.main .rateInfoArti .halfBox.on .graphBox .imgBox{ animation: fadeInHand 1s ease-in-out 0s 1 forwards running; }

@keyframes rateTextColor {
    0% { color: #fff; }
    50% { color: #E50012; }
    100% { color: #fff; }
}
@keyframes receiptUp {
    0% { opacity: 1; transform: translate3d(0px, 100%, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInHand {
    0% { opacity: 0; transform: translate3d(0px, 100%, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}

.main .noodleArti.on .bgTitle{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .noodleArti .title{ opacity: 0; }
.main .noodleArti.on .title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .noodleArti .stickerList .img{ opacity: 0; }
.main .noodleArti .stickerList .on .img{ animation: tapeEffect 0.5s ease-in-out 0s 1 forwards running; }
.main .noodleArti .stickerList .tape{ opacity: 0; }
.main .noodleArti .stickerList .on .tape{ animation: tapeEffect 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

@keyframes scaleSmall {
    0% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes tapeEffect {
    0% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.main .whyArti .titleBox .t2 .why{ display: inline-block; opacity: 0;  }
.main .whyArti .titleBox.on .t2 .why{ animation: whyLeftEffect 0.5s ease-in-out 0s 1 forwards running; }

.main .whyArti .titleBox .t2 .rightText{ opacity: 0; display: inline-block; }
.main .whyArti .titleBox.on .t2 .rightText{ animation: whyRightEffect 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }

.main .whyArti .itemList > li .item .numberBox{ opacity: 0; }
.main .whyArti .itemList.on > li:nth-child(1) .item .numberBox{ animation: fadeShow 0.5s ease-in-out 0s 1 forwards running; }
.main .whyArti .itemList.on > li:nth-child(3) .item .numberBox{ animation: fadeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .whyArti .itemList.on > li:nth-child(5) .item .numberBox{ animation: fadeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .whyArti .itemList.on > li:nth-child(7) .item .numberBox{ animation: fadeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }
.main .whyArti .itemList.on > li:nth-child(9) .item .numberBox{ animation: fadeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.8s; }

@keyframes whyLeftEffect {
    0% { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes whyRightEffect {
    0% { opacity: 0; transform: translateX(10%); }
    100% { opacity: 1; transform: translateX(0); }
}

.main .applyArti .halfBox .rightBox .calBox .telBox .icon{  animation: ring 1s infinite; }
@keyframes ring {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(2deg); }
    20% { transform: rotate(-2deg); }
    30% { transform: rotate(2deg); }
    40% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(0); }
    80% { transform: rotate(0); }
    90% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

.main .mainBanner .ScrollBox{ animation: fadeShow 1s infinite alternate; }


.main .successOfficialArti .itemList > li{ opacity: 0; }
.main .successOfficialArti .itemList > li .item{ transition: transform 0.5s; }
.main .successOfficialArti .itemList > li:hover .item{ transform: scale(1.1); }
.main .successOfficialArti .itemList.on > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .successOfficialArti .itemList.on > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .1s; }
.main .successOfficialArti .itemList.on > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .2s; }
.main .successOfficialArti .itemList.on > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .3s; }
.main .successOfficialArti .itemList.on > li:nth-child(5){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .4s;}


.main .systemArti .itemList > li{ opacity: 0; }
.main .systemArti .itemList.on > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .systemArti .itemList.on > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .2s; }
.main .systemArti .itemList.on > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .4s; }
.main .systemArti .itemList.on > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .6s; }
.main .systemArti .itemList.on > li:nth-child(5){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: .8s; }

.main .systemArti .dish{ opacity: 0; }
.main .systemArti.on .dish.dish1{ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }
.main .systemArti.on .dish.dish2{ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running; }

.main .freeArti .leftScrollEffect img{ animation: marquee4 infinite 30s linear; }
.main .freeArti .rightScrollEffect img{ animation:marquee4 infinite 30s linear reverse }
.main .freeArti .itemList .item .label{ opacity: 0; }
.main .freeArti .itemList > li .item .itemImg{ opacity: 0; }
.main .freeArti .itemList.on > li:nth-child(1) .item{ animation: freeShow 0.5s ease-in-out 0s 1 forwards running; }
.main .freeArti .itemList.on > li:nth-child(1) .item .itemImg{ animation: freeRotateShow 0.5s ease-in-out 0s 1 forwards running; }

.main .freeArti .itemList.on > li:nth-child(2) .item{ animation: freeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .freeArti .itemList.on > li:nth-child(2) .item .itemImg{ animation: freeRotateShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

.main .freeArti .itemList.on > li:nth-child(3) .item{ animation: freeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .freeArti .itemList.on > li:nth-child(3) .item .itemImg{ animation: freeRotateShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }

.main .freeArti .itemList.on > li:nth-child(4) .item{ animation: freeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .freeArti .itemList.on > li:nth-child(4) .item .itemImg{ animation: freeRotateShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }

.main .freeArti .itemList.on > li:nth-child(5) .item{ animation: freeShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }
.main .freeArti .itemList.on > li:nth-child(5) .item .itemImg{ animation: freeRotateShow 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.8s; }

.main .freeArti .itemList.on > li .item .label{ opacity: 0; }
.main .freeArti .itemList.on > li:nth-child(1) .item .label{ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .freeArti .itemList.on > li:nth-child(2) .item .label{ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.7s; }
.main .freeArti .itemList.on > li:nth-child(3) .item .label{ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.9s; }
.main .freeArti .itemList.on > li:nth-child(4) .item .label{ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.1s; }
.main .freeArti .itemList.on > li:nth-child(5) .item .label{ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.2s; }


@keyframes marquee4{
    0% { transform: translateX(0); }
    100% { transform: translateY(-100%); }
}
@keyframes freeShow{ 
    from{ transform: translateX(-50%); }
    to{ transform: translateX(0); opacity: 1; }
 }
@keyframes freeRotateShow{
    from { opacity: 0; transform: rotate(-90deg); }
    to { opacity:1; transform: rotate(0); }
}
@keyframes bigToSmall{
    from { transform: scale(2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.main .supportArti .titleBox{ opacity: 0; }
.main .supportArti.on .titleBox{ animation: bigToSmall .5s ease-in-out 0s 1 forwards running; }
.main .supportArti .titleBox .t2 .red{ animation: yellowBlackColor .5s infinite alternate; }
.main .supportArti .titleBox .t2 .blue{ animation: yellowBlackColor .5s infinite alternate; }

.main .supportArti .snsList > li .item{ transition: transform 0.5s; }
.main .supportArti .snsList > li .item:hover{ transform: scale(1.08); }

@keyframes yellowBlackColor{
    from { color: #FFD600;  }
    to { color: #fff; }
}
@keyframes redBlackColor{
    from { color: #222;  }
    to { color: #9A1C19; }
}
@keyframes blueBlackColor{
    from { color: #222;  }
    to { color: #19577E; }
}

.main .supportArti .snsList > li{ opacity: 0; }
.main .supportArti .snsList.on > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .supportArti .snsList.on > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .supportArti .snsList.on > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .supportArti .snsList.on > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .supportArti .snsList.on > li:nth-child(5){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }

.main .grandOpenFlow .itemList > li{ opacity: 0; }
.main .grandOpenFlow .itemList.on > li:nth-child(1){ animation: freeShow 1s ease-in-out 0s 1 forwards running; }
.main .grandOpenFlow .itemList.on > li:nth-child(2){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .grandOpenFlow .itemList.on > li:nth-child(3){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .grandOpenFlow .itemList.on > li:nth-child(4){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .grandOpenFlow .itemList.on > li:nth-child(5){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .grandOpenFlow .itemList.on > li:nth-child(6){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .grandOpenFlow .itemList.on > li:nth-child(7){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }
.main .grandOpenFlow .itemList.on > li:nth-child(8){ animation: freeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.7s; }

.main .storePriceArti .tableWrap .icon2{ opacity: 0; }
.main .storePriceArti .tableWrap.on .ani1{ animation: tableLabel 1s ease-in-out 0s 1 forwards , tableLabelInfinite 1s ease-in-out 2s infinite alternate; }
.main .storePriceArti .tableWrap.on .ani2{ animation: tableLabel 1s ease-in-out 0s 1 forwards , tableLabelInfinite 1s ease-in-out 2s infinite alternate; }
.main .storePriceArti .tableWrap.on .ani3{ animation: tableLabel 1s ease-in-out 0s 1 forwards , tableLabelInfinite 1s ease-in-out 2s infinite alternate; }



@keyframes tableLabel{
    0% { opacity: 1; transform: scale(2);  }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes tableLabelInfinite{
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}


.main .fiveMinuteArti .itemList > li{ opacity: 0; }
.main .fiveMinuteArti .itemList.on > li:nth-child(1){ animation: fadeIn .5s ease-in-out 0s 1 forwards running; }
.main .fiveMinuteArti .itemList.on > li:nth-child(2){ animation: fadeIn .5s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .fiveMinuteArti .itemList.on > li:nth-child(3){ animation: fadeIn .5s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }

.main .fiveMinuteArti .growBox .dish.on{ animation: fadeInLeftDish .5s ease-in-out 0s 1 forwards running; }

@keyframes fadeInLeftDish {
    0% { opacity: 1; transform: translate3d(-4%, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}

.main .agreeArti .titleBox .t1{ opacity: 0; }
.main .agreeArti.on .titleBox .t1{ animation: fadeIn .5s ease-in-out 0s 1 forwards running; }
.main .agreeArti .titleBox .t2{ opacity: 0; }
.main .agreeArti.on .titleBox .t2{ animation:bigToSmall 0.5s ease-in-out 0s 1 forwards running; }


.main .agreeArti .imgBox .showImg{ animation: phoneScroll 35s linear infinite; }
.main .agreeArti .leftBox{ opacity: 0; }
.main .agreeArti .leftBox.on{ animation:fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }
.main .agreeArti .rightBox{ opacity: 0; }
.main .agreeArti .rightBox.on{ animation:fadeInRight 0.5s ease-in-out 0s 1 forwards running; }

.main .agreeArti .titleBox .red{ animation: yellowBlackColor .5s infinite alternate; }
.main .agreeArti .titleBox .blue{ animation: yellowBlackColor .5s infinite alternate; }

@keyframes phoneScroll {
    0% { transform: translateY(0); }
    50% { transform: translateY(-75%); }
    100% { transform: translateY(0); }
}


.main .interiorArti .halfBox .leftBox .imgWrap .bubble{ opacity: 0; }
.main .interiorArti .halfBox .leftBox.on .imgWrap .bubble.img2{ animation: fadeIn 1s ease-in-out 0s 1 forwards running; }
.main .interiorArti .halfBox .leftBox.on .imgWrap .bubble.img3{ animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .interiorArti .halfBox .leftBox.on .imgWrap .bubble.img4{ animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .interiorArti .halfBox .leftBox.on .imgWrap .bubble.img5{ animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }

.main .interiorArti .halfBox .leftBox .txt{ opacity: 0; }
.main .interiorArti .halfBox .leftBox.on .txt{  animation: fadeIn 1s ease-in-out 0s 1 forwards running; }

.main .interiorArti .halfBox .leftBox .imgWrap .icon1{ animation: interiorHand ease-in-out 2s infinite alternate; }

@keyframes interiorHand {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

.main .brandStoryArti .halfBox .textBox .textWrap .titleWrap{ opacity: 0; }
.main .brandStoryArti .halfBox .textBox.on .textWrap .titleWrap{ animation: fadeInLeft 1s ease-in-out 0s 1 forwards running; }
.main .brandStoryArti .halfBox .textBox .contentWrap{ opacity: 0; }
.main .brandStoryArti .halfBox .textBox.on .contentWrap{ animation: fadeShow 1s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .brandStoryArti.on .halfBox .textBox .icon{ animation: fadeInRight 1s ease-in-out 0s 1 forwards running;  }

.main .threePointArti .titleBox .title{ opacity: 0; }
.main .threePointArti.on .titleBox .title{ opacity: 1; animation: bigToSmall 1s ease-in-out 0s 1 forwards running;  }
.main .threePointArti .dishList > li{ opacity: 0; }
.main .threePointArti .dishList.on > li:nth-child(1){ animation: fadeIn 1s ease-in-out 0s 1 forwards running; }
.main .threePointArti .dishList.on > li:nth-child(2){ animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .threePointArti .dishList.on > li:nth-child(3){ animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }

.main .fiveMinuteArti .titleBox .title{ opacity: 0; }
.main .fiveMinuteArti.on .titleBox .title{ animation: fadeInLeft 1s ease-in-out 0s 1 forwards running; }
.main .fiveMinuteArti .textWrap{ opacity: 0; }
.main .fiveMinuteArti.on .textWrap{ animation: fadeInRight 1s ease-in-out 0s 1 forwards running; }

.main .specialtyStoreArti .dish{ opacity: 0; }
.main .specialtyStoreArti.on .dish.dish1{ opacity: 1; animation: fadeInLeft 1s ease-in-out 0s 1 forwards running; }
.main .specialtyStoreArti.on .dish.dish2{ opacity: 1; animation: fadeInRight 1s ease-in-out 0s 1 forwards running; }

.main .specialtyStoreArti .textBox .t1 .stroke{ animation: translateBlueColor 0.5s infinite alternate; }
.main .specialtyStoreArti .textBox .t1.big .stroke{ animation: translateRedColor 0.5s infinite alternate; }

.main .specialtyStoreArti .textBox .t1{ opacity: 0; }
.main .specialtyStoreArti .textBox.on .t1{ animation:fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: .5s; }
.main .specialtyStoreArti .textBox.on .t1.big{ animation:fadeDown 1s ease-in-out 0s 1 forwards running; animation-delay: 1s; }
/* .main .specialtyStoreArti .textBox{ opacity: 0; } */
/* .main .specialtyStoreArti.on .textBox{ animation:bigToSmall 1s ease-in-out 0s 1 forwards running; } */

.main .specialtyStoreArti .textBox .bar{ opacity: 0; }
.main .specialtyStoreArti .textBox.on .bar{ animation:fadeShow 1s ease-in-out 0s 1 forwards running; animation-delay: .7s; }

@keyframes translateBlueColor {
    0% { color: #fff;  }
    100% { color: #19577E; }
}
@keyframes translateRedColor {
    0% { color: #fff;  }
    100% { color: #9A1C19; }
}

.main .kindArti .threeBox .centerBox .circle1{ animation: smallToBig 2s infinite; }
.main .kindArti .threeBox .centerBox .circle2{ animation: smallToBig2 4s infinite; }

.main .kindArti .threeBox .centerBox .circle3 .text2{ opacity: 0; }
.main .kindArti .threeBox.on .centerBox .circle3 .text2{ animation: smallToBigText 1s ease-in-out 0s 1 forwards running ; }
@keyframes smallToBig {
    0% { opacity: 1; transform: scale(1);  }
    100% { opacity:0; transform: scale(1.4); }
}
@keyframes smallToBig2 {
    0% { opacity: 1; transform: scale(1);  }
    100% { opacity:0; transform: scale(2); }
}
@keyframes smallToBigText {
    0% { opacity: 0; transform: scale(0.2);  }
    100% { opacity:1; transform: scale(1); }
}

.main .kindArti .threeBox .lineBox .bar{ width: 0; transition: width 2s; }
.main .kindArti .threeBox.on .lineBox .bar{ width: 100%; }

.main .kindArti .threeBox .lineBox .t1{ opacity: 0; }
.main .kindArti .threeBox.on .lineBox .t1{ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.2s; }
.main .kindArti .threeBox .lineBox .t2{ opacity: 0; }
.main .kindArti .threeBox.on .lineBox .t2{ animation: fadeDown 0.5s ease-in-out forwards; animation-delay: 0.2s; }

.main .kindArti .titleBox{ opacity: 0; }
.main .kindArti.on .titleBox{ animation: fadeIn 0.5s ease-in-out forwards;  }

.main .kindArti .bottomBox .t1{ opacity: 0; }
.main .kindArti .bottomBox.on .t1{ animation: fadeIn 0.5s ease-in-out forwards; }
.main .kindArti .bottomBox .txt{ opacity: 0; }
.main .kindArti .bottomBox.on .txt{ animation: fadeDown 0.5s ease-in-out forwards; }

.main .successOfficialArti .titleBox .t1{ opacity: 0; }
.main .successOfficialArti.on .titleBox .t1{ animation: fadeIn 0.5s ease-in-out forwards; }
.main .successOfficialArti .titleBox .t2{ opacity: 0; }
.main .successOfficialArti.on .titleBox .t2{ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.2s; }

.main .systemArti .titleBox .logo{ opacity: 0; }
.main .systemArti.on .titleBox .logo{ animation: fadeIn 0.5s ease-in-out forwards; }
.main .systemArti .titleBox .t1{ opacity: 0; }
.main .systemArti .titleBox .t2{ opacity: 0; }
.main .systemArti.on .titleBox .t1{ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.2s; }
.main .systemArti.on .titleBox .t2{ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.4s; }

.main .freeArti .titleBox{ opacity: 0; }
.main .freeArti.on .titleBox{ animation: fadeIn 0.5s ease-in-out forwards; }
.main .freeArti .titleBox .redBg{ animation: redLabel 0.5s infinite alternate; }

@keyframes redLabel {
    0% { color: #FFD600; }
    100% { color: #fff; }
}
.main .successOfficialArti.on .titleBox .t1 .yello span{ display: inline-block; }
.main .successOfficialArti.on .titleBox .t1 .yello span:nth-child(1){ animation:textBounce .3s ease infinite alternate; }
.main .successOfficialArti.on .titleBox .t1 .yello span:nth-child(2){ animation:textBounce .3s ease infinite alternate; animation-delay: .1s; }
.main .successOfficialArti.on .titleBox .t1 .yello span:nth-child(3){ animation:textBounce .3s ease infinite alternate; animation-delay: .2s; }
.main .successOfficialArti.on .titleBox .t1 .yello span:nth-child(4){ animation:textBounce .3s ease infinite alternate; animation-delay: .3s; }
@keyframes textBounce {
    100% { transform: translateY(-6px); }
}

.main .grandOpenFlow .titleBox{ opacity: 0; }
.main .grandOpenFlow.on .titleBox{ animation: bigToSmall 0.5s ease-in-out forwards; }

.main .storePriceArti .tableWrap .people{ opacity: 0; }
.main .storePriceArti.on .tableWrap .people{ animation: fadeIn 0.8s ease-in-out forwards;  }
.main .storePriceArti .titleBox{ opacity: 0; }
.main .storePriceArti.on .titleBox{ animation: bigToSmall 0.8s ease-in-out forwards; }

.main .applyArti .titleBox .t1{ opacity: 0; }
.main .applyArti.on .titleBox .t1{ animation: fadeInLeft 0.8s ease-in-out forwards; }
.main .applyArti .titleBox .t2{ opacity: 0; }
.main .applyArti.on .titleBox .t2{ animation: fadeInRight 0.8s ease-in-out forwards; }

.floatingPc .titleBox .t1 span{ animation: whiteRed 0.4s infinite alternate; }
.main .applyArti .titleBox .t2 .yello{ animation: whiteYello 0.4s infinite alternate; }
.moBottomFloatingSec .titleBox span{ animation: whiteYello 0.4s infinite alternate; }

@keyframes whiteRed {
    0% { color: #9A1C19; }
    100% {
         /* color: rgb(246, 221, 171); */
         color: #FFD600
    
    }
}

@keyframes whiteYello {
    0% { color: #fff; }
    100% { color: #FFAC00; }
}

.main .grandOpenFlow .titleBox .t2{ animation: colorRedToBlue 0.6s infinite alternate; }

@keyframes colorRedToBlue {
    0% { color: #9A1C19; }
    100% { color: #19577E; }
}


/*쉬운 춘장집, 돈되는 춘장집, 안망하는 춘장집 */
.main .catchArti.type2 .halfBox .textBox .icon svg path{ opacity: 0; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(1){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 3.5s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(2){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 3.6s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(3){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 3.7s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(4){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 3.8s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(5){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 3.9s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(6){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(7){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.1s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(8){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.2s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(9){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.3s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(10){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.4s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(11){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.5s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(12){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.6s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(13){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.7s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(14){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.8s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(15){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 4.9s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(16){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 5s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(17){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 5.1s; }
.main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(18){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 5.2s; }

@media screen and (max-width: 900px) {
    .main .catchArti.type2 .halfBox .textBox .icon svg path{ opacity: 0; }
    .main .catchArti.on .halfBox .textBox.rightBox{ animation: unset; opacity: 1; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(1){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(2){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.1s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(3){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.2s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(4){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.3s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(5){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.4s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(6){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.5s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(7){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.6s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(8){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.7s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(9){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.8s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(10){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 1.9s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(11){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(12){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.1s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(13){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.2s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(14){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.3s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(15){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.4s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(16){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.5s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(17){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.6s; }
    .main .catchArti.type2.on .halfBox .textBox .icon svg path:nth-last-child(18){ animation: bigToSmall 0.5s ease-in-out 0s 1 forwards running; animation-delay: 2.7s; }
}

.main .professorArti .title{ opacity: 0; }
.main .professorArti.on .title{ animation: bigToSmall 1s ease-in-out 0s 1 forwards running; }
.main .professorArti .memberList > li{ opacity: 0; }
.main .professorArti .memberList.on > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out forwards; }
.main .professorArti .memberList.on > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.1s; }
.main .professorArti .memberList.on > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.2s; }
.main .professorArti .memberList.on > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.3s; }
.main .professorArti .memberList.on > li:nth-child(5){ animation: fadeIn 0.5s ease-in-out forwards; animation-delay: 0.4s; }



/* 📢 공통 css */
@keyframes fadeIn {
    0% { opacity: 0; transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeDown {
    0% { opacity: 0; transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes RightInShow {
    0% { transform: translate3d(100px, 0, 0px); }
    100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes LeftInShow {
    0% { transform: translate3d(-100px, 0, 0px); }
    100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeShow {
    0% { opacity: 0;  }
    100% { opacity: 1; }
}
@keyframes bigToSmall{
    from { opacity: 0; transform: scale(1.2); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes flatingPC{
    0%{transform:translate(0,0);}
    50%{transform:translate(0,5px);}
    100%{transform:translate(0,0);}
}  
@keyframes flatingMobile{
    0%{transform:translate(0,0);}
    50%{transform:translate(0,2px);}
    100%{transform:translate(0,0);}
}