#franchMain { }
#franchMain #bottomFixed { position:fixed; right:20px; bottom:60px; z-index:10; }
#franchMain #bottomFixed .newOpenbtn { margin-bottom:20px; }
#franchMain #bottomFixed .newOpenbtn img { width:auto; height:40px; }
#franchMain #bottomFixed .homeLink { margin-bottom:20px; }
#franchMain #bottomFixed .homeLink img { width:auto; height:40px; }
#franchMain #bottomFixed .franchTop img { display:inline-block; width:auto; height:50px; }
#franchMain #fmBanner { align-items:center; background:url("/main/img/franch/franch_banner01.webp") center left; width:100%; }
#franchMain #fmBanner .text { padding:0px clamp(20px, 4vw, 40px); }
#franchMain #fmBanner .text .txt1 { font-size:clamp(20px, 5vw, 40px); }
#franchMain #fmBanner .text .txt2 { font-size:clamp(40px, 8vw, 90px); font-weight:bold; }
#franchMain #fmBanner .text .info { margin-top:40px; flex-wrap:wrap; font-size:clamp(16px, 4vw, 28px); }

#franchMain #fmSuccess { background-color:#1f1f1f; padding:240px 0px; }
#franchMain #fmSuccess .tt { font-size:clamp(20px, 5vw, 40px); font-weight:bold; color:#f4ecee; margin-bottom:80px; }
#franchMain #fmSuccess .txt { font-size:clamp(12px, 3vw, 28px); line-height:40px; font-weight:bold; color:#f4ecee; }

#franchMain #fmFranchIssue { background-color:#1f1f1f; position:relative; }
#franchMain #fmFranchIssue .fixText { z-index:1; position:absolute; top:0px; left:0px; width:100%; }
#franchMain #fmFranchIssue .fixText .inner { padding:160px; box-sizing:border-box; }
#franchMain #fmFranchIssue .fixText .t1 { color:#fff; font-size:clamp(16px, 4vw, 36px); margin-bottom:20px; }
#franchMain #fmFranchIssue .fixText .t2 { color:#fff; font-size:clamp(22px, 6vw, 46px); font-weight:bold; }
#franchMain #fmFranchIssue .fixText .t2 .point { color:#bb2649; margin-left:12px; }

#franchMain #fmFranchIssue .issueSwiper .ssBox { height:800px; width:100%; }
#franchMain #fmFranchIssue .issueSwiper .ssBox1 { background:url("/main/img/franch/franchIssueImg01.webp"); }
#franchMain #fmFranchIssue .issueSwiper .ssBox2 { background:url("/main/img/franch/franchIssueImg02.webp"); }
#franchMain #fmFranchIssue .issueSwiper .ssBox3 { background:url("/main/img/franch/franchIssueImg03.webp"); }
#franchMain #fmFranchIssue .issueSwiper .ssBox4 { background:url("/main/img/franch/franchIssueImg04.webp"); }

#franchMain #fmFranchIssue .issueSwiperBottom { position:absolute; bottom:120px; left:0px; width:100%;  }
#franchMain #fmFranchIssue .issueSwiper2.swiper { width: 80%; height: 100%; }
#franchMain #fmFranchIssue .issueSwiper2 .swiper-wrapper {  }
#franchMain #fmFranchIssue .issueSwiper2 .swiper-slide { text-align: center;
    font-size: 18px;
    background: #1f1f1f;
    color:#898989;
    padding-top:60px;
    padding-bottom:60px;
    border-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center; }
#franchMain #fmFranchIssue .issueSwiper2 .swiper-slide.active { background-color:#bb2649; color:#fff; }


#franchMain #fmSuccessHistory { background-color:#f4ecee; padding:240px 0px 140px; }
#franchMain #fmSuccessHistory .title { font-size:clamp(22px, 6vw, 46px); font-weight:bold; margin-bottom:140px; }
#franchMain #fmSuccessHistory .boxArea { flex-wrap:wrap; padding:0px 120px; box-sizing:border-box; }
#franchMain #fmSuccessHistory .boxArea .item { width:48%; border-radius:16px; padding:40px; margin-bottom:60px; box-sizing:border-box; }
#franchMain #fmSuccessHistory .boxArea .item .ii { align-items:center; margin-bottom:28px; }
#franchMain #fmSuccessHistory .boxArea .item .ii .tt { margin-left:32px; font-size:clamp(16px, 4vw, 30px);; }
#franchMain #fmSuccessHistory .boxArea .item .txt { font-size:clamp(12px, 3vw, 28px); color:#555555; line-height:40px; }

#franchMain #fmProcess { background-color:#fff; padding:160px 0px 260px; }
#franchMain #fmProcess .process .t1 { font-size:clamp(16px, 4vw, 36px); color:#bb2649; margin-bottom:24px; }
#franchMain #fmProcess .process .t2 { font-size:clamp(22px, 6vw, 46px); color:#000; font-weight:bold; padding-bottom:40px; }
#franchMain #fmProcess .newOpen { padding-top:102px; border-top:1px solid #dedede; }
#franchMain #fmProcess .newOpen .left { width:400px; flex-direction:column; height:400px; z-index:9; margin-left:-140px; padding-left:140px; }
#franchMain #fmProcess .newOpen .left .tt { font-size:46px; font-weight:bold; color:#000; margin-bottom:12px; }
#franchMain #fmProcess .newOpen .left .txt { font-size:30px; color:#555; }
#franchMain #fmProcess .newOpen .right { width:calc(100% - 400px); overflow-x:hidden; }
#franchMain #fmProcess .newOpen .right .swiper { overflow:visible; z-index:2 !important;}
#franchMain #fmProcess .newOpen .right .swiper-slide {  box-sizing:border-box; }
#franchMain #fmProcess .newOpen .right .ssBox { background-color:#f9f5f6;  padding:40px; border-radius:16px; margin-bottom:40px; }
#franchMain #fmProcess .newOpen .right .ssBox .img { width:90px; }
#franchMain #fmProcess .newOpen .right .ssBox .t1 { margin-top:48px; color:#000; font-size:30px; font-weight:bold; }
#franchMain #fmProcess .newOpen .right .ssBox .t2 { margin-top:36px; font-size:26px;  color:#555; }
#franchMain #fmProcess .newOpen .right .swiper-pagination-horizontal { top:auto !important; bottom:0 !important; width:90%; }

#franchMain #fmProcess .process2 { margin-top:400px; }
#franchMain #fmProcess .process2 .boxList { margin-top:20px;  }
#franchMain #fmProcess .process2 .boxList .item { background-color:#fbf7f8; padding:60px 50px; border-radius:16px; margin-bottom:56px; }
#franchMain #fmProcess .process2 .boxList .item:nth-child(2n) { background-color:#f6f0f1;}
#franchMain #fmProcess .process2 .boxList .item .title { font-size:clamp(14px, 4vw, 32px); font-weight:bold; }
#franchMain #fmProcess .process2 .boxList .item .txt { font-size:clamp(12px, 3vw, 28px); color:#555; margin-top:52px; line-height:40px; }
#franchMain #fmProcess .process2 .boxList .item .right { margin-left:auto; }

#franchMain #fmOpenList { padding:240px 240px; background-color:#f4ecee; }
#franchMain #fmOpenList .openTitle { font-size:clamp(22px, 6vw, 46px); font-weight:bold; margin-bottom:36px; }
#franchMain #fmOpenList .openInfo { font-size:clamp(12px, 3vw, 28px); line-height:42px; margin-bottom:120px; color:#555; }
#franchMain #fmOpenList .lists {  box-sizing:border-box; flex-wrap: wrap; }
#franchMain #fmOpenList .lists .item { width:32%; border-radius:12px; padding:30px; box-sizing:border-box; margin-bottom:1.5%; }
#franchMain #fmOpenList .lists .item.center { margin-left:1.5%; margin-right:1.5%; }
#franchMain #fmOpenList .lists .item.doing { opacity:0.5; }
#franchMain #fmOpenList .lists .info { margin-bottom:60px; }
#franchMain #fmOpenList .lists .info .star { margin-right:20px; }
#franchMain #fmOpenList .lists .info .franchName { font-size:clamp(12px, 3vw, 26px); color:#555; }
#franchMain #fmOpenList .lists .number { color:#a8a8a8; }

#franchMain #fmTonesSuccessHistory { padding:240px 240px; }
#franchMain #fmTonesSuccessHistory .stitle { font-size:clamp(22px, 6vw, 46px); color:#000; font-weight:bold; margin-bottom:36px; }
#franchMain #fmTonesSuccessHistory .stxt { font-size:clamp(12px, 3vw, 26px); color:#555; margin-bottom:120px; line-height:40px; }
#franchMain #fmTonesSuccessHistory .boxArea { box-sizing:border-box; flex-wrap: wrap; }
#franchMain #fmTonesSuccessHistory .boxArea .item { width:32%; background-color:#f9f5f6; border-radius:12px; padding:112px 32px; box-sizing:border-box; margin-bottom:1.5%; }
#franchMain #fmTonesSuccessHistory .boxArea .item.center { margin-left:1.5%; margin-right:1.5%; }
#franchMain #fmTonesSuccessHistory .boxArea .item .nn { color:rgb(187,38,73,0.5); font-size:26px; margin-bottom:44px; }
#franchMain #fmTonesSuccessHistory .boxArea .item .tt { font-size:clamp(12px, 3vw, 26px); font-weight:bold; line-height:40px; margin-bottom:60px; }
#franchMain #fmTonesSuccessHistory .boxArea .item .hei1px { box-sizing:border-box; width:80%; margin:0 auto;  background-color:#aeabac; }
#franchMain #fmTonesSuccessHistory .boxArea .item .txt { font-size:clamp(12px, 3vw, 26px); color:#555; margin-top:60px; }
#franchMain #fmTonesSuccessHistory .boxArea .item.link { background-color:#bb2649; text-align:center; line-height:40px; }
#franchMain #fmTonesSuccessHistory .boxArea .item.link .linkText { color:#fff; font-size:clamp(12px, 3vw, 26px); font-weight:bold; margin-top:80px; }
#franchMain #fmTonesSuccessHistory .boxArea .item.link .aaa {  margin-top:40px; }
#franchMain #fmTonesSuccessHistory .boxArea .item.link .aaa img { width:52px; display:inline-block;}

#franchMain #fmFooterBanner { background:url("/main/img/franch/fmFooterBanner.webp") center left; width:100%; padding:320px 0px; }
#franchMain #fmFooterBanner .subTitle { color:#fff; font-size:clamp(22px, 5vw, 40px); }
#franchMain #fmFooterBanner .title { color:#fff; font-size:clamp(40px, 8vw, 90px);; font-weight:bold; }


#franchModal { min-width:780px; box-sizing:border-box; }
#franchModal .header { border-bottom:0px; }
#franchModal .ntitle { font-size:clamp(16px, 4vw, 36px); font-weight:bold;  }
#franchModal .fmInfo { background-color:#f9f5f6; border-radius:12px; padding:34px 0px; font-size:20px; margin-bottom:40px; }
#franchModal .fmInfo span { color:#bb2649; }
#franchModal #franchModalForm .inputGroup { width:48%; }
#franchModal .franchModalFormArea .ii { margin-left:12px; }
#franchModal .franchModalFormArea .iiInfo { margin-bottom:12px; }
#franchModal .franchModalFormArea .inputGroup { margin-bottom:24px; }
#franchModal .franchModalFormArea .license { padding-top:12px; }
#franchModal .franchModalFormArea #tfiContent_div { box-sizing: border-box; }
#franchModal .franchModalFormArea #tfiContent_div textarea { box-sizing: border-box; }
#franchModal .franchModalFormArea input[type=submit] { box-sizing: border-box; width:100%; }
#franchModal .franchModalFormArea .formSubmit {
    width:360px;
    padding:20px;
    font-size:20px;
    border-radius:12px;
    font-weight:bold;
    background: linear-gradient(to bottom,  #bb2649 0%,#971e3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#franchMain #fmRecom { text-align:center; background-color:#f4ecee; padding:160px 0px 120px;}
#franchMain #fmRecom .tt { font-size:clamp(22px, 6vw, 46px); font-weight:bold; margin-bottom:100px; }
#franchMain #fmRecom .ssBox { border-radius: 16px; padding:36px; }
#franchMain #fmRecom .ssBox .t1 { text-align:left; font-size:clamp(12px, 3vw, 26px); color:#595959; margin-bottom:44px; }
#franchMain #fmRecom .ssBox .t2 { font-size:clamp(14px, 4vw, 32px); color:#555555; text-align:center; margin-bottom:60px; }
#franchMain #fmRecom .ssBox .btn { width:100%; border-radius:8px; font-size:clamp(12px, 3vw, 26px); color:#fff; background-color:#bb2649; font-weight:bold; }
#franchMain #fmRecom .recomSwiper { padding-bottom:80px; }
#franchMain #fmRecom .recomSwiper .swiper-pagination { margin-top:80px; display:inline-block; position:static; background-color:#fff; padding:0px 20px 16px; border-radius:20px; width:auto; }
#franchMain #fmRecom .swiper-pagination-bullet { font-size:0px;}
#franchMain #fmRecom .swiper-slide.swiper-slide-prev { transform:scale(0.9); opacity:0.8; }
#franchMain #fmRecom .swiper-slide.swiper-slide-next { transform:scale(0.9); opacity:0.8; }
#franchMain #quickOpenBanner {
    position:fixed; bottom:0px; width:100%; box-sizing: border-box; padding:20px; font-weight:bold;
    z-index:9; background: linear-gradient(to bottom,  #bb2649 0%,#971e3a 100%); }
#franchMain #quickOpenBanner .icon { margin-right:12px; width:16px; }
#franchMain #quickOpenBanner .txt { font-size:12px; }

#franchMain .secFranchFrom {padding-bottom: 80px;}
#franchMain .secFranchFrom .ntitle {padding:50px 0 30px;}

@media screen and (max-width: 700px) {
    #franchMain #fmBanner { align-items:flex-end;  }
    #franchMain #fmBanner .inner { padding-bottom:60px;}
    #franchMain #fmBanner .text .info { margin-top:20px; margin-bottom:20px; }

    #franchMain #fnSuccess { background-color:#1f1f1f; padding:140px 0px; }
    #franchMain #fnSuccess .tt { margin-bottom:40px; }
    #franchMain #fnSuccess .txt { font-weight:normal; line-height:24px; }

    #franchMain #fmSuccessHistory { padding:80px 0px 120px; }
    #franchMain #fmSuccessHistory .title { margin-bottom:70px; }
    #franchMain #fmSuccessHistory .boxArea { flex-wrap:wrap; padding:0px 2vw; box-sizing:border-box; }
    #franchMain #fmSuccessHistory .boxArea .item { width:100%; }
    #franchMain #fmSuccessHistory .boxArea .item .ii .img { width:40px; height:40px; }
    #franchMain #fmSuccessHistory .boxArea .item .ii .tt { margin-left:12px; }
    #franchMain #fmSuccessHistory .boxArea .item .txt { line-height:20px; }

    #franchMain #fmProcess { background-color:#fff; padding:80px 0px 130px; }
    #franchMain #fmProcess .process .t1 { font-size:clamp(16px, 4vw, 36px); color:#bb2649; margin-bottom:14px; }
    #franchMain #fmProcess .newOpen { margin-top:40px; }
    #franchMain #fmProcess .newOpen .sliderUi { margin-top:40px; overflow-x:hidden; }
    #franchMain #fmProcess .newOpen .sliderUi .swiper { overflow:visible; z-index:2 !important;}
    #franchMain #fmProcess .newOpen .sliderUi .swiper-slide {  box-sizing:border-box; }
    #franchMain #fmProcess .newOpen .sliderUi .ssBox { background-color:#f9f5f6;  padding:4vw; border-radius:16px; margin-bottom:40px; }
    #franchMain #fmProcess .newOpen .sliderUi .ssBox .img { width:40px; }
    #franchMain #fmProcess .newOpen .sliderUi .ssBox .t1 { margin-top:24px; color:#000; font-size:clamp(14px, 3.5vw, 32px); font-weight:bold; }
    #franchMain #fmProcess .newOpen .sliderUi .ssBox .t2 { margin-top:18px; font-size:clamp(12px, 3vw, 28px);  color:#555; }
    #franchMain #fmProcess .newOpen .sliderUi .swiper-pagination-horizontal { top:auto !important; bottom:0 !important; width:100%; }

    #franchMain #fmProcess .process2 .inner { width:100%; }
    #franchMain #fmProcess .process2 .boxList .item { display:block; padding:26px 16px; }
    #franchMain #fmProcess .process2 .boxList .item .title { text-align:center; }
    #franchMain #fmProcess .process2 .boxList .item .txt { text-align:center; margin-top:32px; margin-bottom:32px; letter-spacing:-1px; line-height:24px; }
    #franchMain #fmProcess .process2 .boxList .item .right { text-align:center; }
    #franchMain #fmProcess .process2 .boxList .item .right img { width:40vw; display:inline-block; }

    #franchMain #fmOpenList { padding:40px 2vw; }
    #franchMain #fmOpenList .openTitle { margin-bottom:12px; text-align:center; }
    #franchMain #fmOpenList .openInfo { line-height:20px; margin-bottom:40px; text-align:center; }
    #franchMain #fmOpenList .lists .item { width:47%; border-radius:12px; padding:16px; box-sizing:border-box; margin-bottom:3%; }
    #franchMain #fmOpenList .lists .item.center { margin-left:0px; margin-right:0px; }
    #franchMain #fmOpenList .lists .item:nth-child(old) { margin-right:3%; }
    #franchMain #fmOpenList .lists .item:nth-child(even) { margin-left:3%; }
    #franchMain #fmOpenList .lists .info { margin-bottom:30px; }
    #franchMain #fmOpenList .lists .info .star { width:10vw; margin-right:12px; }

    #franchMain #fmTonesSuccessHistory .stxt { line-height:20px; margin-bottom:60px; }
    #franchMain #fmTonesSuccessHistory { padding:40px 2vw; }
    #franchMain #fmTonesSuccessHistory .boxArea .item { width:47%; background-color:#f9f5f6; border-radius:12px; padding:26px 12px; box-sizing:border-box; margin-bottom:3%; }
    #franchMain #fmTonesSuccessHistory .boxArea .item.center { margin-left:0%; margin-right:0%; }
    #franchMain #fmTonesSuccessHistory .boxArea .item:nth-child(old) { margin-right:3%; }
    #franchMain #fmTonesSuccessHistory .boxArea .item:nth-child(even) { margin-left:3%; }
    #franchMain #fmTonesSuccessHistory .boxArea .item .nn { margin-bottom:24px; }
    #franchMain #fmTonesSuccessHistory .boxArea .item .tt { line-height:24px; margin-bottom:30px; }
    #franchMain #fmTonesSuccessHistory .boxArea .item .txt { margin-top:30px; line-height:24px;}
    #franchMain #fmTonesSuccessHistory .boxArea .item.link .aaa { margin-top:20px; }
    #franchMain #fmTonesSuccessHistory .boxArea .item.link .aaa img { width:30px; }
    #franchMain #fmFooterBanner { background:url("/main/img/franch/fmFooterBanner.webp") -1252px 50%;  padding:320px 0px; }

    #franchModal { min-width:90%; box-sizing:border-box; }
    #franchModal .fmInfo {font-size: 14px;}
    #franchModal #franchModalForm .inputGroup { width:100%; }
    #franchModal #franchModalForm .inputBox { flex-direction:column !important; }


    #franchMain #fmRecom { padding:120px 0px 60px;}
    #franchMain #fmRecom .tt { margin-bottom:50px; }
    #franchMain #fmRecom .ssBox { border-radius: 16px; padding:18px; }
    #franchMain #fmRecom .ssBox .t1 { margin-bottom:22px; }
    #franchMain #fmRecom .ssBox .t2 { margin-bottom:30px; }
    #franchMain #fmRecom .recomSwiper { padding-bottom:40px; }
    #franchMain #fmRecom .recomSwiper .swiper-pagination { margin-top:40px; }

    #franchMain #fmFranchIssue .fixText .inner { padding:10% 5%; box-sizing:border-box; }
    #franchMain #fmFranchIssue .issueSwiper .ssBox { height:400px; width:100%; }
    #franchMain #fmFranchIssue .issueSwiperBottom { position:absolute; bottom:10%; left:0px; width:100%;  }
    #franchMain #fmFranchIssue .issueSwiper2.swiper { width: 90%; height: 100%; }

    #franchMain #fmFranchIssue .issueSwiper .ssBox1 { background:url("/main/img/franch/franchIssueImg01.jpg"); background-size:auto 400px; }
    #franchMain #fmFranchIssue .issueSwiper .ssBox2 { background:url("/main/img/franch/franchIssueImg02.jpg"); background-size:auto 400px; }
    #franchMain #fmFranchIssue .issueSwiper .ssBox3 { background:url("/main/img/franch/franchIssueImg03.jpg"); background-size:auto 400px; }
    #franchMain #fmFranchIssue .issueSwiper .ssBox4 { background:url("/main/img/franch/franchIssueImg04.jpg"); background-size:auto 400px; }

    #franchMain .secFranchFrom .ntitle {padding:20px 0 30px;}
}



.ani[class*="fade"] { --opacity: 0; }
.ani[class*="show"] { --opacity: 1; }
/* s : spped / d : delay / t : translate */
/* spped */
.ani[class*="-s0"] { --s-level: 0; }
.ani[class*="-s05"] { --s-level: 0.5; }
.ani[class*="-s1"] { --s-level: 1; }
.ani[class*="-s2"] { --s-level: 2; }
.ani[class*="-s3"] { --s-level: 3; }
.ani[class*="-s4"] { --s-level: 4; }
.ani[class*="-s5"] { --s-level: 5; }
/* delay */
.ani[class*="-d0"] { --d-level: 0; }
.ani[class*="-d05"] { --d-level: 0.5; }
.ani[class*="-d1"] { --d-level: 1; }
.ani[class*="-d2"] { --d-level: 1.25; }
.ani[class*="-d3"] { --d-level: 1.5; }
.ani[class*="-d4"] { --d-level: 1.75; }
.ani[class*="-d5"] { --d-level: 2; }
.ani[class*="-d6"] { --d-level: 2.25; }
.ani[class*="-d7"] { --d-level: 2.5; }
.ani[class*="-d8"] { --d-level: 2.75; }
.ani[class*="-d9"] { --d-level: 3; /* translate */}
.ani[class*="-d12"] { --d-level: 3.75; }
.ani[class*="-d24"] { --d-level: 4.75; }
.ani[class*="-d34"] { --d-level: 5.75; }
.ani[class*="-d44"] { --d-level: 6.75; }
.ani[class*="-t0"] { --t-level: 0; }
.ani[class*="-t05"] { --t-level: 0.5; }
.ani[class*="-t1"] { --t-level: 1; }
.ani[class*="-t2"] { --t-level: 2; }
.ani[class*="-t3"] { --t-level: 3; }
.ani[class*="-t4"] { --t-level: 4; }
.ani[class*="-t5"] { --t-level: 5; }
.ani[class*="-tx2"] { --t-level: 20; }
.ani[class*="-tx3"] { --t-level: 30; }
/* timing-function */
.ani[class*="-ease"] { --timing-function: ease; }
.ani[class*="-ease-in"] { --timing-function: ease-in; }
.ani[class*="-ease-out"] { --timing-function: ease-out; }
.ani[class*="-ease-in-out"] { --timing-function: ease-in-out; }
.ani[class*="-linear"] { --timing-function: linear; }
/* extension */
/* 아래 -> 위 */
.ani[class*="-upper"] { --translateX: 0; --translateY: var(--translate); }
/* 위 -> 아래 */
.ani[class*="-under"] { --translateX: 0; --translateY: calc(var(--translate) * -1); }
/* 좌측 -> 우측 */
.ani[class*="-left"] { --translateX: calc(var(--translate) * -1); --translateY: 0; }
/* 우측 -> 좌측 */
.ani[class*="-right"] { --translateX: var(--translate); --translateY: 0; }
/* 크기 */
/* 증가 */
.ani[class*="-scale"][class*="-up"] { --scale: 0.5; }
/* 감소 */
.ani[class*="-scale"][class*="-down"] { --scale: 1.5; }
/* animation */
.ani.custom { --opacity-0: 0; --opacity-100: 1; --transform-0: translate(0, 0); --transform-100: translate(0, 0); --opacity: 0; animation: ani-custom var(--duration) var(--timing-function) var(--delay) forwards; /* active */}
.ani.active { opacity: 1; }
.ani.active[class*="fade"] { --translate: 0; --scale: 1; --opacity: 1; filter: blur(0px); }
.ani.active[class*="show"] { --translate: 0; --scale: 1; }

/* 애니메이션 */
.ani { --opacity: 0; /* 등급 (해당 숫자만큼 곱함) */
    --s-level: 4; --d-level: 0; --t-level: 4; /* 위치값 */
    --value: 25px; /* 트랜지션 기본 속도 */
    --duration-second: 0.25s; --delay-second: 0.25s; /* 트랜지션 계산 */
    --duration: calc(var(--duration-second) * var(--s-level)); --delay: 0; /* 트랜지션 프로퍼티 */
    --property: opacity, transform, scale, translate, filter; /* 트랜지션 효과 */
    --timing-function: ease; /* transform */
    --translate: calc(var(--value) * var(--t-level)); --scale: 1; /* default */
    opacity: var(--opacity); transition-duration: var(--duration); transition-delay: var(--delay); transition-property: var(--property); transition-timing-function: var(--timing-function); translate: var(--translateX) var(--translateY); scale: var(--scale); }
.ani.active { --delay: calc(var(--delay-second) * var(--d-level)); }