/*******************/
/**** 初始 Video ****/
/*******************/

.video-box {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.home_video {
    width: 100%;
}

.home_click_area {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

/*****************/
/**** 初始動畫 ****/
/*****************/

.start-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100111;
    background-color: #000;
}

.start-title {
    position: absolute;
    left: 36%;
    top: 12%;
}


/* 模擬雪動畫 */
.circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    filter: blur(4px);
}

/* 初始動畫 第一頁（按鈕） */
.windwos-go {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    background: url("../images/pic/0/bg.jpg");
    z-index: 1000;
    cursor: pointer;
}

.windwos-go .windwos-go-btn {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 30%;
    left: 42%;
    animation: float 3s ease-in-out infinite;
    transition: all 0.3s;
    opacity: 0.8;
    transform: rotate(0deg);
    cursor: pointer;
    /* 指定動畫時間為 1 秒 */
    z-index: 51111;
}

.windwos-go .windwos-go-btn:hover {
    opacity: 1;
    /* 滑鼠經過時旋轉 360 度 */
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.windows-go-c1 {
    position: absolute;
    bottom: -70px;
    right: 150px;
    transform: rotate(70deg);
    animation: swing3 5s ease-in-out infinite;
}

@keyframes swing3 {

    0%,
    100% {
        transform: rotate(70deg);
    }

    50% {
        transform: rotate(75deg);
    }
}

.windows-go-c2 {
    position: absolute;
    bottom: -80px;
    left: 160px;
    transform: rotate(145deg);
    animation: swing2 5s ease-in-out infinite;
}

@keyframes swing2 {

    0%,
    100% {
        transform: rotate(145deg);
    }

    50% {
        transform: rotate(140deg);
    }
}


/* 動畫開始 */

.index-show-1,
.index-show-2,
.index-show-3 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.active-show .index-show-1 {
    animation: box-fade-in 2.5s ease-in-out 0s forwards;
}

.active-show .index-show-2 {
    animation: box-fade-in 2.5s ease-in-out 2.5s forwards;
}

.active-show .index-show-3 {
    animation: box-fade-in2 2.5s ease-in-out 5s forwards;
}

@keyframes box-fade-in {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@keyframes box-fade-in2 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 第一個 */

.index-show-1 {
    width: 100%;
    height: 100%;
    background: url("../images/pic/0/1_bg.jpg") no-repeat center center;
}

/* "富" */

.index1_t_1 {
    position: absolute;
    top: 32%;
    left: 50%;
    opacity: 0;
}

.active-show .index1_t_1 {
    animation: fadein 0.6s ease-in-out 0.3s forwards;
}

/* "蒔境界" */

.index1_t_2 {
    position: absolute;
    top: 40%;
    left: 59%;
    opacity: 0;
}

.active-show .index1_t_2 {
    animation: fadein 1s ease-in-out 0.6s forwards;
}

/* "打造優質居家生活" */

.index1_t_3 {
    position: absolute;
    top: 53%;
    left: 65%;
    opacity: 0;
}

.active-show .index1_t_3 {
    animation: fadein-left 1s ease-in-out 0.9s forwards;
}

/* 金色線 */

.index1_line {
    position: absolute;
    top: 61%;
    left: 65%;
    opacity: 0;
}

.active-show .index1_line {
    animation: fadein 1s ease-in-out 0.9s forwards;
}

/* 圖片 葉子 */

.index1_i_1 {
    position: absolute;
    top: 0%;
    right: 0%;
    opacity: 0;
}

.active-show .index1_i_1 {
    animation: fadein 1s ease-in-out 1s forwards;
}

/* 圖片 家人照 */

.index1_i_2 {
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
}

.active-show .index1_i_2 {
    animation: fadein 1s ease-in-out 1.1s forwards;
}

/* 第二個 */

.index-show-2 {
    width: 100%;
    height: 100%;
    background: url("../images/pic/0/2_bg.jpg") no-repeat center center;
}

/* 嶼 */

.index2_t_1 {
    position: absolute;
    top: 32%;
    left: 20%;
    opacity: 0;
}

.active-show .index2_t_1 {
    animation: fadein 1s ease-in-out 2.8s forwards;
}

/* 中植感 */

.index2_t_2 {
    position: absolute;
    top: 40%;
    left: 33.5%;
    opacity: 0;
}

.active-show .index2_t_2 {
    animation: fadein 1s ease-in-out 3.1s forwards;
}

/* 享受自然綠意美景 */

.index2_t_3 {
    position: absolute;
    top: 54%;
    left: 15%;
    opacity: 0;
}

.active-show .index2_t_3 {
    animation: fadein-left 1s ease-in-out 3.4s forwards;
}

/* 金色線 */

.index2_line {
    position: absolute;
    top: 61%;
    left: 65%;
    opacity: 0;
}

.active-show .index2_line {
    animation: fadein 1s ease-in-out 3.5s forwards;
}

/* 圖 建築 */

.index2_i_1 {
    position: absolute;
    top: 0%;
    right: 0%;
    opacity: 0;
}

.active-show .index2_i_1 {
    animation: fadein 1s ease-in-out 3.6s forwards;
}

/* 圖 葉子 */

.index2_i_2 {
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
}

.active-show .index2_i_2 {
    animation: fadein 1s ease-in-out 3.7s forwards;
}

/* 第三個 */

.index-show-3 {
    width: 100%;
    height: 100%;
    background: url("../images/pic/0/3_bg.jpg") no-repeat center center;
}

/* Logo */

.index3_l_1 {
    position: absolute;
    top: 32%;
    left: 43%;
    opacity: 0;
}

.active-show .index3_l_1 {
    animation: fadein 1s ease-in-out 5.3s forwards;
}

.index3_l_1 img {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(8);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* 圖片 建築 */

.index3_i_1 {
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
}

.active-show .index3_i_1 {
    animation: fadein 1s ease-in-out 5.6s forwards;
}

/* 圖片 草 */

.index3_i_2 {
    position: absolute;
    top: 0%;
    right: 0%;
    opacity: 0;
}

.active-show .index3_i_2 {
    animation: fadein 1s ease-in-out 5.9s forwards;
}

.index3_i_3 {
    position: absolute;
    top: 0%;
    right: -10%;
    opacity: 0;
}

.active-show .index3_i_3 {
    animation: fadein 1s ease-in-out 6.2s forwards;
}

.index3_i_3 img {
    animation: swing 5s ease-in-out infinite;
}

/* 圖片 草 */

.index3_i_3_2 {
    position: absolute;
    top: 67%;
    right: -3%;
    opacity: 0;
    transform: rotate(67deg);
}

.active-show .index3_i_3_2 {
    animation: fadein 1s ease-in-out 6.5s forwards;
}

.index3_i_3_2 img {
    animation: swing 5s ease-in-out infinite;
}

@keyframes swing {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

/* 文字印章 */

/* 略過動畫 */

.skip {
    position: absolute;
    bottom: 2%;
    right: 1.5%;
    z-index: 999999;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    letter-spacing: 0.1em;
    padding: 15px;
    border-radius: 6px;
    font-size: 18px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    border: 1px #fff solid;
    transition: all 0.3s;
    cursor: pointer;
}

.skip:hover {
    bottom: 1.8%;
    right: 1.3%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

/* 選單 */

.start-menu {
    list-style: none;
    position: absolute;
    left: 60%;
    top: 39%;
}

.start-menu li {
    display: inline-block;
    cursor: pointer;
    padding: 20px 25px;
    opacity: 0;
    font-size: 24px;
    font-weight: 900;
    color: #333;
    transition: all 0.3s;
}

.start-menu li:hover {
    color: #e59100;
}

.start-menu li:nth-child(1) {
    animation: fadein 1s ease-in-out 6.6s forwards;
}

.start-menu li:nth-child(2) {
    animation: fadein 1s ease-in-out 6.7s forwards;
}

.start-menu li:nth-child(3) {
    animation: fadein 1s ease-in-out 6.8s forwards;
}

.start-menu li:nth-child(4) {
    animation: fadein 1s ease-in-out 6.9s forwards;
}

.start-menu li:nth-child(5) {
    animation: fadein 1s ease-in-out 7s forwards;
}