@charset "utf-8";

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

.main .brandSection .halfDiv .titleBox{ opacity: 0; }
.main .brandSection.on .halfDiv .titleBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .brandSection .halfDiv .contentBox{ opacity: 0; }
.main .brandSection.on .halfDiv .contentBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .brandSection .slideDiv{ opacity: 0; }
.main .brandSection.on .slideDiv{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }

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

.main .interiorSection .content{ opacity: 0; }
.main .interiorSection.on .content{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .interiorSection .logo{ opacity: 0; }
.main .interiorSection.on .logo{ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .interiorSection .imgList > li{ opacity: 0; }
.main .interiorSection.on .imgList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.4s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.5s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(4){ animation: fadeIn 0.7s ease-in-out 0.6s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(5){ animation: fadeIn 0.7s ease-in-out 0.7s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(6){ animation: fadeIn 0.7s ease-in-out 0.8s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(7){ animation: fadeIn 0.7s ease-in-out 0.9s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(8){ animation: fadeIn 0.7s ease-in-out 1.0s 1 forwards running; }
.main .interiorSection.on .imgList > li:nth-child(9){ animation: fadeIn 0.7s ease-in-out 1.1s 1 forwards running; }


.main .storeSection .mainTitleDiv{ opacity: 0; }
.main .storeSection.on .mainTitleDiv{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .storeSection .content{ opacity: 0; }
.main .storeSection.on .content{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }

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

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

.main .priceSection .title1{ opacity: 0; }
.main .priceSection.on .title1{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .priceSection .content{ opacity: 0; }
.main .priceSection.on .content{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .priceSection .halfBox .circleWrap .circle:nth-child(1){ opacity: 0; }
.main .priceSection.on .halfBox .circleWrap .circle:nth-child(1){ animation: scale 0.8s ease-in-out 0.1s 1 forwards running; }
.main .priceSection .bigCircle{ opacity: 0; }
.main .priceSection.on .bigCircle{ animation: scale 0.8s ease-in-out 0.4s 1 forwards running; }

.main .priceTableSection .bigTitle{ opacity: 0; }
.main .priceTableSection.on .bigTitle{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .priceTableSection .tableInfo{ opacity: 0; }
.main .priceTableSection.on .tableInfo{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .priceTableSection .tableWrap{ opacity: 0; }
.main .priceTableSection.on .tableWrap{ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .priceTableSection .centerText{ opacity: 0; }
.main .priceTableSection.on .centerText{ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }

.main .priceTableSection .tableWrap .yelloLabel{ opacity: 0; }
.main .priceTableSection.on .tableWrap .yelloLabel{ animation: tableLabelAni 0.7s ease-in-out .5s 1 forwards running; }

@keyframes tableLabelAni {
    0% { opacity: 0; transform: scale(2) rotate(90deg); }
    100% { opacity: 1; transform: scale(1) rotate(-12deg); }
}


.main .choseSection .mainTitleDiv{ opacity: 0; }
.main .choseSection.on .mainTitleDiv{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .choseSection .content{ opacity: 0; }
.main .choseSection.on .content{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }

.main .choseSection .graphDiv .graph1{ opacity: 0; }
.main .choseSection.on .graphDiv .graph1{ animation: fadeIn 0.8s ease-in-out 0.1s 1 forwards running; }
.main .choseSection .graphDiv .graph2{ opacity: 0; }
.main .choseSection.on .graphDiv .graph2{ animation: fadeIn 0.8s ease-in-out 0.2s 1 forwards running; }
.main .choseSection .graphDiv .textBox{ opacity: 0; }
.main .choseSection.on .graphDiv .textBox{ animation: fadeIn 0.8s ease-in-out 0.4s 1 forwards running; }

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

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

.main .menuSection .mainTitleDiv{ opacity: 0; }
.main .menuSection.on .mainTitleDiv{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .menuSection .slideBox{ opacity: 0; }
.main .menuSection.on .slideBox{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }

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

.main .applySection .mainText{ opacity: 0; }
.main .applySection.on .mainText{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .applySection .halfBox .mapBox{ opacity: 0; }
.main .applySection.on .halfBox .mapBox{ animation: fadeInRight 0.7s ease-in-out 0.1s 1 forwards running; }
.main .applySection .halfBox .whiteBox{ opacity: 0; }
.main .applySection.on .halfBox .whiteBox{ animation: fadeInLeft 0.7s ease-in-out 0.1s 1 forwards running; }

.main .priceTableSection .tableWrap .tableList .box2 span.arrow .arrowBox{ opacity: 0; width: 0; }
.main .priceTableSection.on .tableWrap .tableList .box2 span.arrow .arrowBox{ animation: arrow_bar 0.7s ease-in-out 0.5s 1 forwards running; }

@keyframes arrow_bar {
    0%{ opacity: 0; width: 0; }
    100% { opacity: 1; width: 120%; }
}






@keyframes scale {
    0%{ opacity: 0; transform: scale(0.5); }
    100% { opacity:1; transform: scale(1); }
}
@keyframes fadeIn {
    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 fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes scale {
    0% { opacity: 0; transform: scale(.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes showHide {
    0%, 100% { opacity: 0; } 
    50% { opacity: 1; } 
}
@keyframes bigtosmall {
    0% { opacity: 0; transform: scale(2) rotate(30deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}