@charset "utf-8";

/*------------load用------------*/
@keyframes alpha_m {
    0% {

        -webkit-mask-size: 100% 0%;
        /*遮罩*/
    }

    10% {

        -webkit-mask-size: 100% 10%;
        /*遮罩*/
    }


    40% {

        -webkit-mask-size: 100% 30%;
        /*遮罩*/
    }

    60% {

        -webkit-mask-size: 100% 60%;
        /*遮罩*/
    }

    100% {
        -webkit-mask-size: 100% 300%;
        /*遮罩*/
    }
}

/*換別的圖須調整數值*/
@keyframes noi-anim-2 {
    0% {
        clip: rect(77px, 9999px, 359px, 0);
    }

    5% {
        clip: rect(65px, 9999px, 350px, 0);
    }

    10% {
        clip: rect(82px, 9999px, 359px, 0);
    }

    15% {
        clip: rect(32px, 9999px, 35px, 0);
    }

    20% {
        clip: rect(31px, 9999px, 49px, 0);
    }

    25% {
        clip: rect(18px, 9999px, 359px, 0);
    }

    30% {
        clip: rect(94px, 9999px, 64px, 0);
    }

    35% {
        clip: rect(69px, 9999px, 359px, 0);
    }

    40% {
        clip: rect(6px, 9999px, 72px, 0);
    }

    45% {
        clip: rect(25px, 9999px, 35px, 0);
    }

    50% {
        clip: rect(82px, 9999px, 359px, 0);
    }

    55% {
        clip: rect(7px, 9999px, 92px, 0);
    }

    60% {
        clip: rect(54px, 9999px, 30px, 0);
    }

    65% {
        clip: rect(86px, 9999px, 90px, 0);
    }

    70% {
        clip: rect(38px, 9999px, 359px, 0);
    }

    75% {
        clip: rect(41px, 9999px, 66px, 0);
    }

    80% {
        clip: rect(31px, 9999px, 37px, 0);
    }

    85% {
        clip: rect(8px, 9999px, 359px, 0);
    }

    90% {
        clip: rect(50px, 9999px, 69px, 0);
    }

    95% {
        clip: rect(7px, 9999px, 359px, 0);
    }

    100% {
        clip: rect(14px, 9999px, 340px, 0);
    }
}

/*換別的圖須調整數值*/
@keyframes noi-anim {
    0% {
        clip: rect(77px, 9999px, 359px, 0);
    }

    5% {
        clip: rect(65px, 9999px, 350px, 0);
    }

    10% {
        clip: rect(82px, 9999px, 359px, 0);
    }

    15% {
        clip: rect(32px, 9999px, 35px, 0);
    }

    20% {
        clip: rect(31px, 9999px, 49px, 0);
    }

    25% {
        clip: rect(18px, 9999px, 359px, 0);
    }

    30% {
        clip: rect(94px, 9999px, 64px, 0);
    }

    35% {
        clip: rect(69px, 9999px, 359px, 0);
    }

    40% {
        clip: rect(6px, 9999px, 72px, 0);
    }

    45% {
        clip: rect(25px, 9999px, 35px, 0);
    }

    50% {
        clip: rect(82px, 9999px, 359px, 0);
    }

    55% {
        clip: rect(7px, 9999px, 92px, 0);
    }

    60% {
        clip: rect(54px, 9999px, 30px, 0);
    }

    65% {
        clip: rect(86px, 9999px, 90px, 0);
    }

    70% {
        clip: rect(38px, 9999px, 359px, 0);
    }

    75% {
        clip: rect(41px, 9999px, 66px, 0);
    }

    80% {
        clip: rect(31px, 9999px, 37px, 0);
    }

    85% {
        clip: rect(8px, 9999px, 359px, 0);
    }

    90% {
        clip: rect(50px, 9999px, 69px, 0);
    }

    95% {
        clip: rect(7px, 9999px, 359px, 0);
    }

    100% {
        clip: rect(14px, 9999px, 340px, 0);
    }
}


/*------------跑馬燈------------*/
@keyframes scrolltext01 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


@keyframes scale_light {
    0% {
        transform: translate(-50%, -50%) scale(10);
    }

    100% {
        transform: translate(-50%, -50%) scale(.1);
    }
}


/*------------跑馬燈反向------------*/
@keyframes scrolltext02 {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}


/*------------YT_btn------------*/
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*------------花紋圈------------*/
@keyframes rotate_2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*------------蓮花------------*/
@keyframes rotate_3 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


/*------------綠光------------*/
@keyframes blink {

    0%,
    2% {
        opacity: 1;
    }

    2%,
    2.5% {
        opacity: 0;
    }

    3%,
    3.5% {
        opacity: 1;
    }

    4.5%,
    5% {
        opacity: 0.5;
    }

    6% {
        opacity: 1;
    }

    6.5%,
    7% {
        opacity: 0;
    }

    7.5%,
    8% {
        opacity: 1;
    }

    8.5%,
    9% {
        opacity: 0.5;
    }

    9.5% {
        opacity: 1;
    }


    100% {
        opacity: 1;
    }
}


/*------------動雲------------*/
@keyframes move-clouds-back {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 10000px 0;
    }
}


/*------------動四角------------*/
@keyframes move-diamond {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }


    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
        transform: scale(1);
    }


    100% {
        opacity: 0;
        transform: scale(1);
    }
}


/*------------p3_雜訊------------*/
@keyframes glitch00 {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }

    2% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }

    4% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }

    6% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }

    8% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }

    10% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }

    12% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }

    14% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }

    16% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }

    18% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }

    20% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }

    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}

/*------------通用淡入------------*/
@keyframes fadeIn_c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeInRight_c {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}


@keyframes p4_zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}


@keyframes flash {
    0%, 100%, 50% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}


/*------------花瓣------------*/
@keyframes right_ {
    0% {
		opacity: 0;
		bottom: -10%;
		left: -20%;
		filter: blur(1px);
    }

    30% {

		opacity: 1;
    }

    60% {
		opacity: 0;
    }

    100% {
		opacity: 0;
		bottom: 90%;
		left: 80%;
		filter: blur(0px);
    }
}

@keyframes right_2 {
    0% {
		opacity: 0;
		bottom: -10%;
		left: -20%;
		filter: blur(1px);
    }

    30% {
		opacity: 1;
    }


    60% {
		opacity: 0;
    }

    100% {
		opacity: 0;
		bottom: 90%;
		left: 85%;
		filter: blur(0px);
    }
}

@keyframes right_3 {
    0% {
		opacity: 0;
		bottom: -10%;
		left: 40%;
		filter: blur(1px);
    }

    30% {
		opacity: 1;
    }

    60% {
		opacity: 0;
    }


    100% {
		opacity: 0;
		bottom: 130%;
		left: 150%;
		filter: blur(0px);
    }
}

@keyframes right_4 {
    0% {
		opacity: 0;
        bottom: -10%;
        left: 20%;
		filter: blur(1px);
    }

    30% {
		opacity: 1;
    }

    60% {
		opacity: 0;
    }


    100% {
		opacity: 0;
		bottom: 130%;
		left: 180%;
		filter: blur(0px);
    }
}