@charset "utf-8";


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


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

.main .mainBanner .bottomArrow .arrow{ animation: sdb 1.5s infinite; }

.main .focusArti .t1{ opacity: 0; }
.main .focusArti.on .t1{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .focusArti .t2{ opacity: 0; }
.main .focusArti.on .t2{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .focusArti .arrow{ opacity: 0; }
.main .focusArti.on .arrow{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .focusArti .t3{ opacity: 0; }
.main .focusArti.on .t3{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .focusArti .t4{ opacity: 0; }
.main .focusArti.on .t4{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }


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

.main .ceoArti .profileBox .item1{ opacity: 0; }
.main .ceoArti.on .profileBox .item1{ animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }
.main .ceoArti .profileBox .item2_wrap{ opacity: 0; }
.main .ceoArti.on .profileBox .item2_wrap{ animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }

.main .ceoArti .halfBox{ opacity: 0; }
.main .ceoArti.on .halfBox{ animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }

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

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

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


@keyframes fadeIn {
    0% { opacity: 0; transform: translate3d(0px, 30px, 0px); }
    /* 50% { opacity: .6; } */
    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 fadeInLeftNonOpacity {
    0% { transform: translate3d(-30px, 0, 0px); }
    100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes scale {
    0% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes showHide {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes smallToBig {
    0% { transform: scale(0); opacity: 1; }
    90% { transform: scale(2); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}
@-webkit-keyframes sdb {
    0% { -webkit-transform: rotate(0) translate(0, 0); }
    20% { -webkit-transform: rotate(0) translate(0, 10px); }
    40% { -webkit-transform: rotate(0) translate(0, 0); }
}