@charset "UTF-8";

/* Fly to Happiness_掃光效果 */
    @keyframes shinye {
        0% {
            transform: translateX(-150%) skewX(-205deg);
            opacity: 1;
        }
        80% {
            transform: translateX(200%) skewX(-205deg);
            opacity: 1;
        }
        100% {
            transform: translateX(200%) skewX(-205deg);
            opacity: 0;
        }
    }

/* title */
    .title_text{
        position: absolute;
        z-index: 5;
        width: 100%;
        left: 0;
        text-align: center;
    }
    .title_text.title618{
        top: 67.5%;
    }
    .title_text.title618 h1{
        margin: 0 0 5px 0;
    }
    .title_text.title618 h1,
    .title_text.title618 h2{
        position: relative;
        z-index: 2;
        line-height: 1.2;
        font-size: 121px;
        font-weight: 600;
        font-family: 'Century Gothic', 'Noto Sans TC', sans-serif;
        letter-spacing: 1px;
        color: #e0648c;
        margin: 0;
    }
    .title_text.title618 h1{
        font-size: 62px;
        color: #464646;
    }
    @media (max-width:1000px) {
        .title_text.title618 h2{
            font-size: 12.1vw;
        }
        .title_text.title618 h1{
            font-size: 6.2vw;
        }
    }
    /* 漸層 */
        /* .title618 h2:before{
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
        } */
        .title618 h2{
            background: -webkit-linear-gradient(left, #e0648c 0%, #c12d70 50%, #e0648c 70%, #e0648c 100%);
            background-size: 200%;
            -webkit-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            -webkit-animation: shineText 10s infinite;
            animation: shineText 10s infinite;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        @-webkit-keyframes shineText {
            0% {
                background-position: 0 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0 50%;
            }
        }
        @keyframes shineText {
            0% {
                background-position: 0 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0 50%;
            }
        }
   
    /* slogn */
        .title_text.slogn{
            overflow: hidden;

            animation: motion 2.8s ease-in-out infinite;
            -webkit-animation: motion 2.8s ease-in-out infinite;
        }
        .title_text.slogn:before {
            content: '';
            background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
            background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
            background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
            position: absolute;
            top: -50%;
            left: 0;
            width: 100%;
            height: 300%;
            -webkit-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            -webkit-animation: shinye 5s ease infinite;
            animation: shinye 5s ease infinite;
        }
        /* 上下漂浮 */
            @-webkit-keyframes motion {
                50% {
                transform: translate(-50%, -32%);
                -webkit-transform: translate(-50%, -32%);
                -moz-transform: translate(-50%, -32%);
                -ms-transform: translate(-50%, -32%);
                -o-transform: translate(-50%, -32%);
                }
            }
            @keyframes motion {
                50% {
                transform: translate(-50%, -32%);
                -webkit-transform: translate(-50%, -32%);
                -moz-transform: translate(-50%, -32%);
                -ms-transform: translate(-50%, -32%);
                -o-transform: translate(-50%, -32%);
                }
            }