@charset "utf-8";

@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% { transform: translateY(0); opacity: 1; } 
    50% { transform: translateY(-3px); opacity: 0.7; } 
    100% { transform: translateY(0px); opacity: 1; } 
}

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

@keyframes blur_1 {  
    0% { transform: rotate(0deg) translate(1vw) rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) translate(1vw) rotate(-180deg) scale(1.1); }
    100% { transform: rotate(360deg) translate(1vw) rotate(-360deg) scale(1); }
}
@keyframes blur_2 {  
    0% { transform: rotate(0deg) translate(-1.5vw) rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) translate(-1.5vw) rotate(-180deg) scale(1.3); }
    100% { transform: rotate(360deg) translate(-1.5vw) rotate(-360deg) scale(1); }
}
@keyframes blur_3 {  
    0% { transform: rotate(0deg) translate(1.5vw) rotate(0deg) scale(1); }
    50% { transform: rotate(-180deg) translate(1.5vw) rotate(180deg) scale(1.1); }
    100% { transform: rotate(-360deg) translate(1.5vw) rotate(360deg) scale(1); }
}
/* @sec2@ */
section.sec2 .identity .box { opacity: 0; }
section.sec2.on .identity .box { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }
section.sec2 .identity .text_3 { opacity: 0; }
section.sec2.on .identity .text_3 { animation: fadeInRight 0.6s ease-in-out .1s 1 forwards running; }

section.sec2 .vision .box { opacity: 0; }
section.sec2.on .vision .box { animation: fadeInRight 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s; }
section.sec2 .vision .text_3 { opacity: 0; }
section.sec2.on .vision .text_3 { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s; }

/* @sec3@ */
/* section.sec3 .sec3_div { opacity: 0; }
section.sec3.on .sec3_div { animation: scale 3s infinite linear; } */

/* @sec4@ */
section.sec4 .title { opacity: 0; }
section.sec4.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }

section.sec4 .sec4_div { opacity: 0; }
section.sec4.on .sec4_div { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s; }

/* @sec5@ */
section.sec5 .title { opacity: 0; }
section.sec5.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }
section.sec5 .sec5_div .text_1 { opacity: 0; }
section.sec5.on .sec5_div .text_1 { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s; }
section.sec5 .sec5_div .text_2 { opacity: 0; }
section.sec5.on .sec5_div .text_2 { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.4s; }
section.sec5 .sec5_div .sec5_img1 { opacity: 0; }
section.sec5.on .sec5_div .sec5_img1 { animation: fadeInRight 0.6s ease-in-out .1s 1 forwards running; }

/* @sec6@ */
section.sec6 .title { opacity: 0; }
section.sec6.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }
section.sec6 .subTitle { opacity: 0; }
section.sec6.on .subTitle { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.2s; }
section.sec6 ul li { opacity: 0; }
section.sec6.on ul li:nth-child(1) { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }
section.sec6 ul li { opacity: 0; }
section.sec6.on ul li:nth-child(2) { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.1s; }



/* @sec7@ */
/* sec7_1 */
section .sec7_1 .title { opacity: 0; }
section .sec7_1.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }
section .sec7_1 .subTitle { opacity: 0; }
section .sec7_1.on .subTitle { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.2s; }
section .sec7_1 .sec7_div { opacity: 0; }
section .sec7_1.on .sec7_div { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s; }

/* sec7_2 */
article.arti_1 .title { opacity: 0; }
article.arti_1.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }
article.arti_1 ul li { opacity: 0; }
article.arti_1.on ul li:nth-child(1) { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }
article.arti_1 ul li { opacity: 0; }
article.arti_1.on ul li:nth-child(2) { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.2s; }

.bannerArti .title { opacity: 0; }
.bannerArti.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running;animation-delay: 0.2s;  }
.bannerArti .banner_swiper_div .banner_swiper { opacity: 0; }
.bannerArti.on .banner_swiper_div .banner_swiper:nth-child(1) { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running;animation-delay: 0.2s;  }
.bannerArti .banner_swiper_div .banner_swiper { opacity: 0; }
.bannerArti.on .banner_swiper_div .banner_swiper:nth-child(2) { animation: fadeInRight 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.2s; }

article.arti_2 .title { opacity: 0; }
article.arti_2.on .title { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; }
article.arti_2 .subTitle { opacity: 0; }
article.arti_2.on .subTitle { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.2s; }
article.arti_2 .form_box { opacity: 0; }
article.arti_2.on .form_box { animation: fadeInLeft 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s;}
article.arti_2 .blur_box { opacity: 0; }
article.arti_2.on .blur_box { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; animation-delay: 0.3s;}

article.arti_2 .blur_box .sec8_img1 { animation: showHide 3s infinite linear; }
article.arti_2 .blur_box .blur_img_1 { animation: blur_1 5s infinite linear; }
article.arti_2 .blur_box .blur_img_2 { animation: blur_2 5s infinite linear; }
article.arti_2 .blur_box .blur_img_3 { animation: blur_3 5s infinite linear; }