@charset "utf-8";

/* animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; */

.main .mainBanner .title1{ opacity: 0; }
.main .mainBanner.on .title1{ animation: opacity 0.7s ease-in-out 0s 1 forwards running; }
.main .mainBanner .title2{ opacity: 0; }
.main .mainBanner.on .title2{ animation: smallToBig 1.2s ease-in-out 0s 1 forwards running;  }
.main .mainBanner .btnWrap{ opacity: 0; }
.main .mainBanner.on .btnWrap{ animation: opacity 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .mainBanner .pizza{ opacity: 0; }
.main .mainBanner.on .pizza1{ animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }
.main .mainBanner.on .pizza2{ animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }

.main .brandStoryArti .q_text{ opacity: 0; }
.main .brandStoryArti .halfList{ opacity: 0; }
.main .brandStoryArti.on .q_text:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .brandStoryArti.on .halfList.pc:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .brandStoryArti.on .q_text.gold:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .brandStoryArti.on .halfList.pc:nth-child(4){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .brandStoryArti.on .halfList.mo:nth-child(5){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .brandStoryArti.on .halfList.mo:nth-child(6){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; animation-delay: 0.1s; }
.main .brandStoryArti.on .halfList.mo:nth-child(7){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; animation-delay: 0.2s; }
.main .brandStoryArti.on .halfList.mo:nth-child(8){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; animation-delay: 0.3s; }
.main .brandStoryArti .title{ opacity: 0; }
.main .brandStoryArti.on .title{ animation: scale 1.2s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }


.main .knowhowArti .logo{ opacity: 0; }
.main .knowhowArti.on .logo{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .knowhowArti .title{ opacity: 0; }
.main .knowhowArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .knowhowArti .content{ opacity: 0; }
.main .knowhowArti.on .content{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .knowhowArti .imgBox{ opacity: 0; }
.main .knowhowArti.on .imgBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }

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

.main .menuArti .title{ opacity: 0; }
.main .menuArti.on .title{ animation: scale 1.2s ease-in-out 0s 1 forwards running; }

.main .elasticityArti .title{ opacity: 0; }
.main .elasticityArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .elasticityArti .itemList > li{ opacity: 0; }
.main .elasticityArti.on .itemList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .elasticityArti.on .itemList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .elasticityArti.on .itemList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .elasticityArti.on .itemList > li:nth-child(4){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }

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

.main .openArti .graphBg .halfBox .graphBox .labelBox{ opacity: 0; transform-origin: 50% 100%; }
.main .openArti.on .graphBg .halfBox .graphBox .labelBox{ animation: graphHeignt 1s ease-in-out 0s 1 forwards running; }
.main .openArti .graphBg .halfBox .graphBox .labelBox .icon{ opacity: 0; }
.main .openArti.on .graphBg .halfBox .graphBox .labelBox .icon{ animation: graphIconHeignt 1s ease-in-out 0s 1 forwards running; }
.main .openArti .graphBg .halfBox .graphBox .priceBox{ opacity: 0; }
.main .openArti.on .graphBg .halfBox .graphBox .priceBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .openArti .graphBg .halfBox .arrow{ opacity: 0; }
.main .openArti.on .graphBg .halfBox .arrow{ animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; animation-delay: .5s; }

@keyframes graphHeignt {
    0% { opacity: 1; transform: scaleY(0); }
    100%{ opacity:1; transform: scaleY(1); }
}
@keyframes graphIconHeignt {
    0% { opacity: 0; transform: scaleY(2); }
    100%{ opacity:1; transform: scaleY(1); }
}

.main .receptArti .title{ opacity: 0; }
.main .receptArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .receptArti .halfBox .item{ opacity: 0; }
.main .receptArti.on .halfBox .graph{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .receptArti.on .halfBox .paper{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.main .whyArti .cateogy{ opacity:0; }
.main .whyArti.on .cateogy{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .whyArti .title{ opacity: 0; }
.main .whyArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

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

.main .appArti .title{ opacity: 0; }
.main .appArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .appArti .halfBox .leftBox img{ opacity: 0; }
.main .appArti.on .halfBox .leftBox img{ opacity: 0; }
.main .appArti.on .halfBox .leftBox img:nth-child(1){ animation: rightShow 0.7s ease-in-out 0s 1 forwards running; }
.main .appArti.on .halfBox .leftBox img:nth-child(2){ animation: rightShow 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .appArti.on .halfBox .leftBox img:nth-child(3){ animation: rightShow 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .appArti .halfBox .icon{ opacity: 0; }
.main .appArti.on .halfBox .icon{ animation: fadeInRight 1s ease-in-out 0s 1 forwards running; }

.main .howArti .logo{ opacity: 0; }
.main .howArti.on .logo{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .howArti .inner > .title{ opacity: 0; }
.main .howArti.on .inner > .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .howArti .itemList{ opacity: 0; }
.main .howArti.on .itemList{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

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

.main .tableArti .title{ opacity: 0; }
.main .tableArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .tableArti .tabelWrap .tableBody .arrow .bar{ width: 0; }
.main .tableArti.on .tabelWrap .tableBody .arrow .bar{ animation: arrowBar 1s ease-in-out 0s 1 forwards running; }
@media screen and (max-width: 1250px) { 
    .main .tableArti.on .tabelWrap .tableBody .arrow .bar{ animation: arrowBar2 1s ease-in-out 0s 1 forwards running; }
    .main .tableArti.on .tabelWrap .tableBody .row:nth-child(2) .arrow .bar{ animation: arrowBar3 1s ease-in-out 0s 1 forwards running; }
}
@media screen and (max-width: 950px) { 
    .main .tableArti.on .tabelWrap .tableBody .arrow .bar{ animation: arrowBar3 1s ease-in-out 0s 1 forwards running; }
    .main .tableArti.on .tabelWrap .tableBody .row:nth-child(2) .arrow .bar{ animation: arrowBar4 1s ease-in-out 0s 1 forwards running; }
}
@keyframes arrowBar {
    0% { width: 0; }
    100% { width: 70px; }
}
@keyframes arrowBar2 {
    0% { width: 0; }
    100% { width: 5vw; }
}
@keyframes arrowBar3 {
    0% { width: 0; }
    100% { width: 4vw; }
}
@keyframes arrowBar4 {
    0% { width: 0; }
    100% { width: 3vw; }
}
.main .tableArti .tabelWrap .box4 .label{ opacity: 0; }
.main .tableArti.on .tabelWrap .box4 .label{ animation: labelAnimation 1s ease-in-out 0s 1 forwards running; }
@keyframes labelAnimation {
    0% { opacity: 0; transform: scale(2) rotate(20deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.main .applyArti .title{ opacity: 0; }
.main .applyArti.on .title{  animation: fadeIn 1s ease-in-out 0s 1 forwards running; }
.main .applyArti .halfBox{ opacity: 0; }
.main .applyArti.on .halfBox{  animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

.main .youtubeArti .title{ opacity: 0; }
.main .youtubeArti.on .title{ animation: scale 1.2s ease-in-out 0s 1 forwards running }
.main .youtubeArti .youtubeList{ opacity: 0; }
.main .youtubeArti.on .youtubeList{ animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

@keyframes opacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes smallToBig {
    0% { opacity: 0; transform: scale(.8); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes scale {
    0% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInTop {
    0% { opacity: 0; transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(20%, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-20%, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}

@keyframes leftShow {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes rightShow {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}