/* 메인 */
.main .visualArti .txtBox{ letter-spacing: -0.2em; opacity: 0; transition: letter-spacing 2s, opacity 3s; }
.main .visualArti.on .txtBox{ letter-spacing: -0.04em; opacity: 1; }

.main .frustratedArti .mainTitleBox .circle.circle01{ opacity: 0; transition: opacity 1s; }
.main .frustratedArti.on .mainTitleBox .circle.circle01{ opacity: 1; }
.main .frustratedArti .mainTitleBox .circle.circle02{ opacity: 0; transition: opacity 1s; transition-delay:.5s; }
.main .frustratedArti.on .mainTitleBox .circle.circle02{ opacity: 1; }

.main .frustratedArti .mainTitleBox .line.leftLine::after{ transform: translateX(-600%) rotate(45deg); transition: transform 1s; }
.main .frustratedArti.on .mainTitleBox .line.leftLine::after{ transform: translateX(0) rotate(45deg); }
.main .frustratedArti .mainTitleBox .line.rightLine::after{ transform: translateX(600%) rotate(-135deg); transition: transform 1s; }
.main .frustratedArti.on .mainTitleBox .line.rightLine::after{  transform: translateX(0) rotate(-135deg);  }

.main .frustratedArti .mainTitleBox .textBox .spark.spark01{ animation:smallBig  1s infinite; }
.main .frustratedArti .mainTitleBox .textBox .spark.spark02{ animation:smallBig  1s infinite; animation-delay: .5s; }
.main .frustratedArti .mainTitleBox .textBox .spark.spark03{ animation:smallBig  1s infinite; animation-delay: 2s }

.main .mainContentBox{ opacity: 0; transform:translateY(100%); transition: opacity 1s, transform 1s; transition-delay: .5s; }
.main .on .mainContentBox{ transform: translateY(0); opacity: 1; }

.main .mainTitleBox{ letter-spacing: -0.2em; opacity: 0; transition: letter-spacing 1s, opacity 1s; }
.main .frustratedArti .mainTitleBox{ letter-spacing: -0.04em; opacity: 1; }  
.main .on .mainTitleBox{ letter-spacing: -0.04em; opacity: 1; }

.main .mainCircleTitle{ opacity: 0; transform:translateY(100%); transition: opacity 1s, transform 1s; }
.main .on .mainCircleTitle{ opacity: 1; transform:translateY(0); }

.main .marketingArti .stepList > li{ opacity: 0; transform: translateY(50px); transition: opacity 1s, transform 1s; }
.main .marketingArti .stepList > li:nth-child(2){ transition-delay: 0.1s; }
.main .marketingArti .stepList > li:nth-child(3){ transition-delay: 0.2s; }
.main .marketingArti .stepList > li:nth-child(4){ transition-delay: 0.3s; }
.main .marketingArti .stepList > li:nth-child(5){ transition-delay: 0.3s; }
.main .marketingArti .stepList.on > li{ opacity: 1; transform: translateY(0); }


.main .sponserArti .logoList{ opacity: 0; transform: translateY(50px); transition: opacity 1.5s, transform 1.5s; transition-delay: 1s; }
.main .sponserArti.on .logoList{ opacity: 1; transform: translateY(0); }

.formList{ opacity: 0; transform: translateY(50px); transition: opacity 1.5s, transform 1.5s; transition-delay: .5s; }
.on .formList{ opacity: 1; transform: translateY(0); }

/* 서브페이지 */
.sub .subTitle{ opacity: 0; transform: translateY(50px); transition: transform 1s, opacity 1s; }
.sub .on .subTitle{ opacity: 1; transform: translateY(0); }

.sub .subContent{ opacity: 0; transform: translateY(50px); transition: transform 1s, opacity 1s; transition-delay: 0.2s; }
.sub .on .subContent{ opacity: 1; transform: translateY(0); }

/* sub01_1 : [N사 서비스] */
.sub.sub01_1 .arti02{ opacity: 0; transform: translateY(10%); transition: transform 1s, opacity 1s; }
.sub.sub01_1 .arti02.on{ opacity: 1; transform: translateY(0); }

.sub01_1 .arti03 .halfBox{ opacity: 0; transform: translateY(50px); transition: transform 1s, opacity 1s; }
.sub01_1 .arti03 .halfBox.on{ opacity: 1; transform: translateY(0); }

/* sub01_2 : [가맹광고] */
.sub01_2 .arti02 .contentBox{ opacity: 0; transform: translateY(50px); transition: transform 1s, opacity 1s; }
.sub01_2 .arti02 .contentBox.on{ opacity: 1; transform: translateY(0); }

/* sub01_3 : [인스타그램] */
.sub.sub01_3 .arti02{ opacity: 0; transform: translateY(50px); transition: transform 1s, opacity 1s; }
.sub.sub01_3 .arti02.on{ opacity: 1; transform: translateY(0); }

/* sub01_4 : [전문촬영본] */
.sub.sub01_4 .arti02{ opacity: 0; transform: translateY(50px); transition: transform 1s, opacity 1s; }
.sub.sub01_4 .arti02.on{ opacity: 1; transform: translateY(0); }
.sub01_4 .arti02 .listWrap .halfBox > li:nth-child(2){ transform: translateX(-50%); opacity: 0; transition: opacity 1.5s, transform 1.5s; }
.sub01_4 .arti02 .listWrap .halfBox.on > li:nth-child(2){ transform: translateX(0); opacity: 1; }

/* sub02 공통 */
.sub .subTitleNumber{ opacity: 0; transform: translateY(10%); transition: transform 1s, opacity 1s; }
.sub .on .subTitleNumber{ opacity: 1; transform: translateY(0); }
.sub .subTitle2{ opacity: 0; transform: translateY(10%); transition: transform 1s, opacity 1s; }
.sub .on .subTitle2{ opacity: 1; transform: translateY(0); }
.sub .subContent2{ opacity: 0; transform: translateY(10%); transition: transform 1s, opacity 1s; }
.sub .on .subContent2{ opacity: 1; transform: translateY(0); }

/* .phoneSlide : [핸드폰 슬라이드] */
/* .sub .phoneSlide{ opacity: 0; transform: translateY(10%); transition: transform 1s, opacity 1s; }
.sub .phoneSlide.on{ opacity: 1; transform: translateY(0); } */

.sub .subBtnWrap{ opacity: 0; transform: translateY(10%); transition: transform 1s, opacity 1s; }
.sub .on .subBtnWrap{ opacity: 1; transform: translateY(0); }

@keyframes fadeInOut {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes smallBig {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { transform: scale(0); }
}