/*  index
-------------------------------------------------
    - Import
    - text
    - df-width
    - layout
-------------------------------------------------*/





/*-----------------------------------------------
     Import
-----------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');




/*---------------------------------------------
    section-hover
-----------------------------------------------*/


.section.active {
    -webkit-animation: into .5s cubic-bezier(.250, .460, .450, .940) both;
    transform-origin: 50%;
    z-index: 99 !important;
}

.no-effect.active {
    -webkit-animation: into2 0.5s ease both;
}





/*-----------------------------------------------
     text
-----------------------------------------------*/




h1,
h2 {
    font-weight: 500;
    color: #000;

}

p {
    font-weight: 400;
}

span.sp {
    font-size: 0.9rem;
    color: var(--red);
    padding: 0 0 0 20px;
    font-weight: 500;
}


h4,
h4.sp {
    font-size: 1.4rem;
    color: #000;
    font-weight: 500;
    margin: 6% 0 0 0;
}

h4.sp {

    margin: 6% 0 0 0;
}

@media screen and (max-width: 1280px) {

    h4.sp {

        margin: 0 0 0 0;
    }


}

@media screen and (max-width: 960px) {



    span.sp {
        padding: 0 0 0 0px;
    }

}



/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    height: 100%;
    max-width: 1700px;
    overflow: hidden;
}


/*  layout
-------------------------------------------------
    - html,body
    - main
    - section
    - header
    - footer
-------------------------------------------------*/

html,
body {
    /*background:#fff;*/
}

/*prelod*/
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';

    background-image:
        url(../images/main-pic01.jpg),
        url(../images/main-pic02.jpg),
        url(../images/main-pic03.jpg),
        url(../images/main-pic04.jpg),
        url(../images/page/1-01.jpg),
        url(../images/page/2-02.jpg),
        url(../images/page/1-09.jpg);

}

/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    max-width: 1920px;
    margin: auto;
    animation: blur .8s ease-out 0s 1 both;
    background: url(../images/index_01.jpg) center 0 no-repeat;
}

section {
    width: 100%;
    text-align: justify;
    height: 100%;
    background: #fff;
}





/*-----------------------------------------------
    page-frame
-----------------------------------------------*/



.pages {
    position: relative;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.wrap-box {
    position: absolute;
    top: 50%;
    right: initial;
    left: 50%;
    margin: 0;
    padding: 0;
    z-index: 6;
    width: 100%;
    height: 95%;
    max-width: 1500px;
    pointer-events: auto;
    /*! background: #c64444b0; */
    transform: scale(1) translate(-50%, -50%);
}

.no-touch {
    pointer-events: none;
}






@media screen and (min-width: 1921px) {
    .wrap-box {

        transform: scale(0.95) translate(-48%, -50%);
    }

    .eng-b {
        top: 2%;
        left: 23%;

    }

}

@media screen and (max-width: 1800px) {

    .wrap-box {
        transform: scale(0.85) translate(-56%, -65%);
    }

}

@media screen and (max-width: 1600px) {

    .wrap-box {
        transform: scale(0.8) translate(-62%, -62%);
    }

}

@media screen and (max-width: 1440px) {

    .wrap-box {
        transform: scale(0.7) translate(-70%, -75%);
    }

}

@media screen and (max-width: 960px) {

    .wrap-box {
        transform: scale(1) translate(-50%, -50%);
        width: 95%;
        /*! background: #a233335e; */
        height: 95%;
        top: 50%;
        left: 50%;
        right: initial;
    }

    .eng-i {
        top: 14%;
        left: 11%;

        /*! writing-mode: horizontal-tb; */
        /*! text-orientation: mixed; */
        font-size: 1.6rem;
    }

}

/*-----------------------------------------------
    css3
-----------------------------------------------*/

@keyframes blur {
    0% {
        opacity: 0;
        filter: blur(15px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}


/*-----------------------------------------------
    logo
-----------------------------------------------*/

.logo-w {
    width: 4vw;
    height: 4vw;
    background: url(../images/logo-w.png) center 0 /100% no-repeat;
    right: -773%;
    top: 10%;
    z-index: 10;

    position: absolute;
    max-width: 85px;
}

.logo-w a {
    display: block;
    width: 100%;
    height: 100%;
}

.logo-w-m {
    display: none;
}

@media screen and (max-width: 960px) {
    .logo-w-m {
        display: block;
        width: 11vw;
        height: 11vw;
        background: url(../images/logo-w.png) center 0 /100% no-repeat;
        left: 16%;
        top: -4%;
        z-index: 10;

        position: absolute;
        max-width: 85px;
        right: inherit;
    }

    .logo-w {
        width: 14vw;
        height: 14vw;
        right: -743%;
        top: 4%;

    }

    .sl-decro {

        left: -15%;

        top: 44%;
        z-index: 10;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}



/*-----------------------------------------------
    top
-----------------------------------------------*/
.top-group {
    position: absolute;
    top: 53px;
    /* 從 nav 下面開始 */
    left: 0;
    right: 0;
    bottom: 0;
    /* 扣到底部 */
    overflow: hidden;
    background: #ffffff4a;
    z-index: 5;
    transition: all .5s ease;
}

/* 當 nav 消失，要滿版時加上 .nav-hidden */
.top-group.nav-hidden {
    top: 0;
    height: 100vh;
    transition: all .3s ease;
    /* 或者直接寫 top:0; bottom:0; 也可 */
}

/* 左右兩欄 */
.top-group>ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    display: flex;
}

.top-group>ul>li {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* 左欄 */
.top-left {
    flex: 1;
    display: flex;
    background: #fff;
    transition: all .3s ease;
}

.top-left-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.top-left .top-left-nav>li {
    flex: 1;
    overflow: hidden;

    position: relative;
    transition: all .3s ease;
    cursor: pointer;
}

.top-left .top-left-nav>li:hover {
    transition: all .3s ease;
    flex: 1.5;

}

.l-go-joy:hover .multiply-top-01,
.l-go-food:hover .multiply-top-02,
.l-go-family:hover .multiply-top-03,
.l-go-room:hover .multiply-top-04 {
    transition: all .3s ease;
    opacity: 0;

}

.l-go-joy:hover .top-left-01,
.l-go-food:hover .top-left-02,
.l-go-family:hover .top-left-03,
.l-go-room:hover .top-left-04 {
    transition: all .3s ease;
    opacity: 1;

}



.l-go-joy {
    /*! background: var(--blue); */
}

.l-go-food {
    background: #3f973287;
}

.l-go-family {
    background: #3daeae87;
}

.l-go-room {
    background: #c8b96787;
}


.top-left-01,
.top-left-02,
.top-left-03,
.top-left-04 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    transition: all .3s ease;
    background: url(../images/main-pic01.jpg) 60% /cover no-repeat;
}


.top-left-02 {
    background: url(../images/main-pic02.jpg) 50% /cover no-repeat;
}

.top-left-03 {
    background: url(../images/main-pic03.jpg) 50% /cover no-repeat;
}

.top-left-04 {
    background: url(../images/main-pic04.jpg) 50% /cover no-repeat;
}



.multiply-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 2;

    opacity: 0.6;
}

.multiply-top-01 {
    background-color: var(--blue);
}

.multiply-top-02 {
    background-color: rgb(255, 163, 80);
}

.multiply-top-03 {
    background-color: var(--green);
}

.multiply-top-04 {
    background-color: var(--apple);
}

.top-bar-01,
.top-bar-02,
.top-bar-03,
.top-bar-04 {
    position: absolute;
    width: 3.1%;
    height: 100%;
    background: var(--blue);
    z-index: 5;
    min-width: 10px;
}

.top-bar-02 {
    background: var(--orange);
}

.top-bar-03 {
    background: var(--green);
}

.top-bar-04 {
    background: var(--apple);
}


.l-go-joy:before,
.l-go-food:before,
.l-go-family:before,
.l-go-room:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 10;
    transition: all .3s ease;
}

/*.l-go-joy:before { -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.2s both; }
.l-go-food:before { -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.3s both; }
.l-go-family:before { -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.4s both; }
.l-go-room:before { -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.5s both; }

*/
@keyframes opening01 {
    0% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}





.section.active .l-go-joy:before {
    -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.2s both;
}

.section.active .l-go-food:before {
    -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.3s both;
}


.section.active .l-go-family:before {
    -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.4s both;
}

.section.active .l-go-room:before {
    -webkit-animation: opening01 .5s cubic-bezier(.250, .460, .450, .940) 0.5s both;
}



/* 右欄 */
.top-right {
    flex: 2.17;
    height: 100%;

    background: #55555587;

    position: relative;
    overflow: hidden;
}

.top-right-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0%;
    left: 0;
    background: url(../images/main.jpg) right 100% /cover no-repeat;
    z-index: 10;
    /*-webkit-animation: top-right-bg 1.5s cubic-bezier(.250, .460, .450, .940) 0s both;*/

}

.section.active .top-right-bg {
    -webkit-animation: top-right-bg 1.5s cubic-bezier(.250, .460, .450, .940) 0s both;
}




@keyframes top-right-bg {
    0% {
        opacity: 1;

        transform: scale(1.2) translate3d(0, 0%, 0);
    }


    100% {
        opacity: 1;

        transform: scale(1) translate3d(0, 0, 0);
    }
}

@-webkit-keyframes top-right-bg {
    0% {
        opacity: 1;

        transform: scale(1.2) translate3d(0, 0%, 0);
    }


    100% {
        opacity: 1;

        transform: scale(1) translate3d(0, 0, 0);
    }
}


@media screen and (max-width: 1600px) {
    .top-group {
        top: 65px;

    }


}

@media screen and (max-width: 960px) {

    .top-group {
        top: 0px;
        bottom: 65px;

    }

    .top-left-01,
    .top-left-02,
    .top-left-03,
    .top-left-04 {
        background: url(../images/main-pic01.jpg) 60% /cover no-repeat;
    }

    .top-left-02 {
        background: url(../images/main-pic02.jpg) 53% /cover no-repeat;
    }

    .top-left-03 {
        background: url(../images/main-pic03.jpg) 25% /cover no-repeat;
    }

    .top-left-04 {
        background: url(../images/main-pic04.jpg) 50% /cover no-repeat;
    }


    /* 右欄 */
    .top-right {
        flex: 2.8;

    }

    .top-right-bg {

        background: #000 url(../images/main.jpg) 10% 100% /290% no-repeat;

    }
}

/*-----------------------------------------------
    left-bar
-----------------------------------------------*/

.left-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 1%;

    height: 100%;
    max-width: 20px;
    z-index: 10;
    min-width: 10px;
}

.left-bar ul {
    display: flex;
    flex-direction: column;

}

.left-bar ul li {
    flex: 1;
    transition: all .3s ease;

}

.left-bar ul li.blue-bar {
    background: var(--blue);
}

.left-bar ul li.orange-bar {
    background: var(--orange);
}

.left-bar ul li.green-bar {
    background: var(--green);
}

.left-bar ul li.pink-bar {
    background: var(--pink);
}



.section.active .left-bar ul li {
    flex: 1;
}

.section.active .joy .blue-bar {
    flex: 5;
}

.section.active .food .orange-bar {
    flex: 5;

}

.section.active .family .green-bar {
    flex: 5;

}

.section.active .room .pink-bar {
    flex: 5;

}



/*-----------------------------------------------
    left-img
-----------------------------------------------*/
/*01*/
.left-img {
    position: absolute;
    width: 32%;
    height: 120%;
    top: -20%;
    left: 0;
    z-index: 0;
}


.left-img-01 {
    background: var(--blue);
}

.left-img-02 {
    background: var(--orange);
}

.left-img-03 {
    background: var(--green);
}

.left-img-04 {
    background: var(--apple);
}


/*02*/
.multiply {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 2;
}

.multiply-01 {
    background-color: var(--blue);
    opacity: 0.4;
}

.multiply-02 {
    background-color: var(--orange);
    opacity: 0.4;
}

.multiply-03 {
    background-color: var(--green);
    opacity: 0.4;
}

.multiply-04 {
    background-color: rgb(219, 236, 255);
    opacity: 0.9;
}

/*03*/
.left-01,
.left-02,
.left-03,
.left-04 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 120%;
    z-index: 1;

    background: url(../images/left-01.jpg) center 50% /cover no-repeat;
    opacity: 0.2;
}

.left-02 {
    background: url(../images/left-02.jpg) center 50% /cover no-repeat;
}

.left-03 {
    background: url(../images/left-03.jpg) center 50% /cover no-repeat;
}

.left-04 {
    background: url(../images/left-04.jpg) center 50% /cover no-repeat;
}



.section.active .left-img {
    -webkit-animation: leftImg 0.5s cubic-bezier(.250, .460, .450, .940) both;

}

.section.active .left-01 {
    -webkit-animation: leftImg2 0.5s cubic-bezier(.250, .460, .450, .940) both;

}

.section.active .left-02 {
    -webkit-animation: leftImg2 0.5s cubic-bezier(.250, .460, .450, .940) both;

}

.section.active .left-03 {
    -webkit-animation: leftImg2 0.5s cubic-bezier(.250, .460, .450, .940) both;

}

.section.active .left-04 {
    -webkit-animation: leftImg2 0.5s cubic-bezier(.250, .460, .450, .940) both;

}

@-webkit-keyframes leftImg {

    0% {
        opacity: 0;
        -webkit-transform: scaleY(1) translate3d(0%, 20%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: scaleY(1) translate3d(0%, 0%, 0);
    }
}

@-webkit-keyframes leftImg2 {

    0% {
        -webkit-transform: scaleY(1.005) translate3d(0%, -20%, 0);
    }

    100% {
        -webkit-transform: scaleY(1) translate3d(0%, 0%, 0);
    }
}

@keyframes leftImg {
    0% {
        opacity: 0;
        transform: scaleY(1) translate3d(0, 20%, 0);
    }

    100% {
        opacity: 1;
        transform: scaleY(1) translate3d(0, 0, 0);
    }
}

@keyframes leftImg2 {
    0% {
        transform: scaleY(1.005) translate3d(0, -20%, 0);
    }

    100% {
        transform: scaleY(1) translate3d(0, 0, 0);
    }
}




/*-----------------------------------------------
    main-pic
-----------------------------------------------*/


.main-pic {
    position: absolute;
    width: 100%;
    height: 70%;
    right: -14%;
    top: 16%;
    z-index: 5;
    overflow: hidden;
    /*! max-width: 1600px; */
}

.main-pic a {
    display: block;
    width: 100%;
    height: 100%;
}

.main-pic-bg {
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0;
    z-index: 5;
    /*opacity: 0;*/


    background: url(../images/main-pic01.jpg) center 20% /100% no-repeat;
    aspect-ratio: 1600 /700;
    /*! height: 100%; */
}

.food .main-pic-bg {
    background: url(../images/main-pic02.jpg) center 50% /100% no-repeat;
}

.family .main-pic-bg {
    background: url(../images/main-pic03.jpg) center 58% /100% no-repeat;
}


.room .main-pic-bg {
    background: url(../images/main-pic04.jpg) center 80% /100% no-repeat;
}


.section.active .main-pic-bg {
    -webkit-animation: main-pic-bg 0.5s cubic-bezier(.250, .460, .450, .940) 0s both;
}

@keyframes main-pic-bg {
    0% {
        opacity: 1;

        transform: scaleY(1.02) translate3d(0, 10%, 0);
    }


    100% {
        opacity: 1;

        transform: scaleY(1) translate3d(0, 0, 0);
    }
}


@media screen and (min-width: 1921px) {

    .main-pic {
        width: 130%;
        height: 130%;
        right: -36%;
        top: 16%;
        /*! z-index: 5; */
        max-width: 2000px;
    }
}


@media screen and (max-width: 1440px) {

    .main-pic {
        width: 110%;
        height: 75%;
        right: -20%;
        top: 10%;
    }


}

@media screen and (max-width: 960px) {

    .main-pic {
        width: 89%;
        height: 65%;
        right: -5%;
        top: 21%;
    }

    .main-pic-bg {
        width: 100%;
        top: 0%;
        left: initial;
        background: url(../images/main-pic01.jpg) 50% 50% /240% no-repeat;
        aspect-ratio: 600 /800;
        /*! height: 150%; */
        right: 0;
    }

    .food .main-pic-bg {
        background: url(../images/main-pic02-m.jpg) 80% 50% /cover no-repeat;
    }

    .family .main-pic-bg {
        background: url(../images/main-pic03-m.jpg) 50% 50% /cover no-repeat;
    }


    .room .main-pic-bg {
        background: url(../images/main-pic04.jpg) 57% 16% /240% no-repeat;
    }


}


/*-----------------------------------------------
    main-pic effect
-----------------------------------------------*/

.main-pic-effect {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    aspect-ratio: 1600 /700;
    top: 0;
    left: 0;
    z-index: 2;
    /*opacity: 0.5;*/
}

.main-pic-effect ul {
    display: flex;
    /* li 並排 */
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-pic-effect ul li {
    flex: 1;
    /* 平均分成 4 等份 */
    background: url("../images/main-pic01.jpg") no-repeat;
    background-size: 400% 100%;
    /* 圖片水平分成4份，每個li顯示1/4 */
}

.food .main-pic-effect ul li {
    background: url("../images/main-pic02.jpg") no-repeat;
}

/* 每個 li 顯示不同位置 */
.main-pic-effect ul li:nth-child(1) {
    background-position: 0% 50%;
}

.main-pic-effect ul li:nth-child(2) {
    background-position: 33.333% 50%;
}

.main-pic-effect ul li:nth-child(3) {
    background-position: 66.666% 50%;
}

.main-pic-effect ul li:nth-child(4) {
    background-position: 100% 50%;
}


.section.active .main-pic-effect ul li:nth-child(1) {
    -webkit-animation: main-pic 1.5s cubic-bezier(.250, .460, .450, .940) 0s both;
}

.section.active .main-pic-effect ul li:nth-child(2) {
    -webkit-animation: main-pic 1.5s cubic-bezier(.250, .460, .450, .940) 0.25s both;
}

.section.active .main-pic-effect ul li:nth-child(3) {
    -webkit-animation: main-pic 1.5s cubic-bezier(.250, .460, .450, .940) 0.5s both;
}

.section.active .main-pic-effect ul li:nth-child(4) {
    -webkit-animation: main-pic 1.5s cubic-bezier(.250, .460, .450, .940) 0.75s both;
}

@keyframes main-pic {
    0% {
        opacity: 1;

        transform: translate3d(0, -50%, 0);
    }


    100% {
        opacity: 0;

        transform: translate3d(0, 0, 0);
    }
}



/*-----------------------------------------------
    btn
-----------------------------------------------*/

.btn-more {
    width: 25%;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    background: rgb(0, 94, 204);
    z-index: 10;
    color: #fff;

    padding: 2% 2.5%;
    font-size: 1.2rem;
    /*! line-height: 1.7; */
    line-height: 70px;
    cursor: pointer;
    max-width: 300px;
}

.food .btn-more {
    background: rgb(255, 133, 23);
}

.family .btn-more {
    background: rgb(13, 100, 68);
}

.room .btn-more {
    background: rgb(39, 67, 85);
}





.btn-more span {
    position: absolute;
    left: 13%;
    top: 8%;

    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}


/* 水平線：從左端長出 */
.btn-more .line {
    position: absolute;
    left: 46%;
    top: 68%;
    height: 1px;
    width: 30%;
    /* 最終寬度先給好 */
    background: #fff;
    transform-origin: left center;
    transform: scaleX(0);
    /* 由 0 → 1 */
    will-change: transform;
    animation: lineGrow 2.5s infinite;
}

/* 斜線尖端：從右端往左長出（不會跑位） */
.btn-more .line::before {
    content: "";
    position: absolute;
    left: 63%;
    top: 0px;
    /* 以「尖端」附近當定位基準 */
    height: 1px;
    width: 36%;
    /* 最終寬度先給好 */
    background: #fff;
    transform: rotate(43deg) scaleX(0);
    transform-origin: right center;
    /* 右端固定，往左伸展 */
    will-change: transform;
    animation: slashGrow 2.5s infinite;
}

/* 時序：0.6s 畫水平線 → 0.4s 畫斜線 → 停到 3.6s 再循環 */
@keyframes lineGrow {
    0% {
        transform: scaleX(0);
    }

    17% {
        transform: scaleX(1);
    }

    /* 0.6s / 3.6s ≈ 17% */
    100% {
        transform: scaleX(1);
    }
}

@keyframes slashGrow {

    0%,
    16% {
        transform: rotate(43deg) scaleX(0);
    }

    /* 等水平線 */
    28% {
        transform: rotate(43deg) scaleX(1);
    }

    /* 0.4s 內長完 */
    100% {
        transform: rotate(43deg) scaleX(1);
    }
}



@media screen and (min-width: 1921px) {
    .btn-more {

        padding: 1.6% 1.5%;

    }
}


@media screen and (max-width: 1440px) {

    .btn-more span {
        left: 10%;
        top: 5%;

        font-size: 0.8rem;
        letter-spacing: 0.1rem;
    }
}




@media screen and (max-width: 960px) {
    .btn-more {
        width: 45%;
        height: 60px;
        top: 0;
        right: 0;

        padding: 2% 4%;
        font-size: 1.1rem;
        line-height: 60px;
    }

    .btn-more .line {
        left: 54%;

    }

    .btn-more span {
        position: absolute;
        left: 9%;
        top: -15%;

        font-size: 0.7rem;
        letter-spacing: 0.1rem;
    }
}


/*-----------------------------------------------
    btn- start
-----------------------------------------------*/


.btn-start {
    width: 130px;
    height: 130px;
    position: absolute;
    bottom: -11%;
    left: 30%;
    /*! background: rgba(151, 66, 146, 0.17); */
    z-index: 10;
    color: var(--blue);

    font-size: 1.3rem;
    line-height: 1.1;
    cursor: pointer;
    font-weight: 700;
    font-style: italic;
}

.btn-start a {
    color: var(--blue);
}

/* 垂直線：上→下 */
.btn-start .line {
    position: absolute;
    left: 67%;
    top: -39%;
    width: 1px;
    height: 76%;
    background: var(--blue);
    transform-origin: top center;
    transform: scaleY(0);
    animation: vLineGrow 3.6s infinite;
}

/* 斜線：從右下 → 右上（反向長） */
.btn-start .line::before {
    content: "";
    position: absolute;

    /* 讓斜線的「右端」貼在直線的底端 */
    right: 0;
    /* ★ 右端對齊父元素（直線） */
    top: 100%;
    /* ★ 放在直線底部 */
    /*transform: translateY(-1px) rotate(-45deg) scaleX(0);*/
    transform-origin: right center;
    /* ★ 從右端往左伸展 */

    width: 34px;
    height: 1px;
    background: var(--blue);
    animation: vSlashGrow 3.6s infinite;
}

/* 垂直線動畫（保持） */
@keyframes vLineGrow {
    0% {
        transform: scaleY(0);
    }

    17% {
        transform: scaleY(1);
    }

    /* ≈0.6s 完成 */
    100% {
        transform: scaleY(1);
    }
}

/* 斜線動畫（反向） */
@keyframes vSlashGrow {

    0%,
    17% {
        transform: translateY(-1px) rotate(-45deg) scaleX(0);
    }

    /* 等垂直線 */
    28% {
        transform: translateY(-1px) rotate(-45deg) scaleX(-1);
    }

    /* ≈0.4s 完成 */
    100% {
        transform: translateY(-1px) rotate(-45deg) scaleX(-1);
    }
}

.food .btn-start a {
    color: var(--orange);
}

.food .btn-start .line {
    background: var(--orange);
}

.food .btn-start .line::before {
    content: '';
    background: var(--orange);
}


.family .btn-start a {
    color: var(--green);
}

.family .btn-start .line {
    background: var(--green);
}

.family .btn-start .line::before {
    content: '';
    background: var(--green);
}

.room .btn-start a {
    color: var(--apple);
}

.room .btn-start .line {
    background: var(--apple);
    left: 55%;
}

.room .btn-start .line::before {
    content: '';
    background: var(--apple);
}


@media screen and (min-width: 1921px) {
    .btn-start {
        /*! width: 130px; */
        /*! height: 130px; */
        bottom: -7%;
        left: 17%;

    }
}


@media screen and (max-width: 1600px) {

    .btn-start {
        width: 81px;
        height: 100px;
        bottom: -15%;
        left: 64%;

        font-size: 1.3rem;
        line-height: 1.1;
    }

    .btn-start .line {
        left: 112%;
        top: -27%;
        width: 1px;
        height: 76%;
        transform: scaleY(0);
        animation: vLineGrow 3.6s infinite;
    }



}

@media screen and (max-width:1400px) {
    .btn-start {
        bottom: 19%;
        left: -10%;


    }

    .joy .btn-start a,
    .food .btn-start a,
    .family .btn-start a,
    .room .btn-start a {
        color: #fff;
    }

    .joy .btn-start .line,
    .food .btn-start .line,
    .family .btn-start .line,
    .room .btn-start .line {
        background: #fff;
    }


    .joy .btn-start .line::before,
    .food .btn-start .line::before,
    .family .btn-start .line::before,
    .room .btn-start .line::before {
        background: #fff;
    }



}

@media screen and (max-width: 960px) {

    .btn-start {
        bottom: -2%;
        left: 3%;


        width: 16%;
        font-size: 1.1rem;
        height: 80px;
    }

    .room .btn-start .line {
        background: rgb(255, 255, 255);
        left: 96%;
    }
}



/*-----------------------------------------------
    page-plan
-----------------------------------------------*/


.page-plan .l-go-joy:before,
.page-plan .l-go-food:before,
.page-plan .l-go-family:before,
.page-plan .l-go-room:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 10;
    transition: all .3s ease;
    display: none;
}


.page-plan .section.active .top-right-bg {
    -webkit-animation: top-right-bg 0s cubic-bezier(.250, .460, .450, .940) 0s both;
}


.df-close a {
    display: block;
    width: 100%;
    height: 100%;
}



/*-----------------------------------------------
    run - 跑光效果
-----------------------------------------------*/

@keyframes run {
    0% {
        right: -300%;
        filter: brightness(1);
    }

    50% {
        right: 400%;
        filter: brightness(1.5);
    }

    100% {
        right: -300%;
        filter: brightness(1);
    }
}

.run {
    animation: btn-open 2.5s ease-out 0s 1 both;
}


/*usage: add "run-effect" to class in Html */
.run-effect {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.run-effect:after {
    position: absolute;
    top: -10%;
    right: -200%;
    z-index: 0;
    opacity: .2;
    width: 180%;
    height: 220%;
    color: #fff;
    content: '';
    transition: all 300ms;
    transform: skewX(40deg);
    animation: run 3.5s ease 0s infinite both;
    background: #fff;
    filter: brightness(.5);
}




/*-----------------------------------------------
    btn-back
-----------------------------------------------*/
.btn-contact {

    position: fixed;
    right: 2%;
    bottom: 5%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    /*! border: 1px solid #c53838; */

    text-align: center;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    cursor: pointer;
    font-weight: 400;
    z-index: 101;
    line-height: 1.2;
    background: #c53838;
}


.btn-contact:hover span {
    /*transform: scale(1.1);*/
    font-size: 1.2rem;
    transition: all .3s ease;
}

@media screen and (max-width: 960px) {

    .btn-contact {

        right: 5%;
        bottom: 5%;
        width: 55px;
        height: 54px;
        /*! border: 1px solid #fff; */

        color: #fff;
        display: flex;
        font-size: 0.9em;
        letter-spacing: 0.2rem;
    }
}







/* ================================
     Play Button（純 CSS 動態描邊）
     ================================ */
.play-btn {
    position: absolute;
    z-index: 99;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 可調參數 */
    --stroke: 10px;
    /* 線寬 */
    --progress: #1f6ff4;
    /* 顏色 */
    --dur: 0.8s;
    /* 畫圈總時間 */
    border-radius: 50%;
    box-sizing: border-box;
    opacity: 0.7;
     transition:all .3s ease;
}



/* 1) 用 conic-gradient 逐步把扇形「畫出來」 */
.play-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* 扇形填色，透明代表未畫的區段 */
    background: conic-gradient(var(--progress) calc(var(--p)*1turn), transparent 0);
    /* 用 mask 做成中空圓框（非填滿圓） */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke)), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke)), #000 0);
    animation: sweep var(--dur) linear forwards;
}

.play-blue   { --progress: #1f6ff4; } /* 藍 */
.play-orange { --progress: #ff8517; } /* 橘 */
.play-green  { --progress: #0d6444; } /* 綠 */
.play-deepblue   { --progress: #30405a; } /* 粉/桃紅 */

/* 註冊可動畫的自訂屬性（角度比例 0→1） */
@property --p {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@keyframes sweep {
    to {
        --p: 1;
    }
}

/* 2) 畫滿那一刻，用 <span> 蓋上「單一無縫圓」並常駐（避免 1turn 與 0turn 等價造成邊緣抖動） */
.play-btn>span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--progress);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke)), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke)), #000 0);
    opacity: 0;
    z-index: 1;
    animation: showFull 1ms linear var(--dur) forwards;
}

@keyframes showFull {
    to {
        opacity: 1;
    }
}
/* 三角形：在畫圈完成之後才淡入（用 ::before，不改 HTML） */
.play-btn::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:75%;
  height:75%;
  transform: translate(-48%,-50%) scale(.8); /* 視覺置中，略向右 */
  background: var(--progress);
  clip-path: polygon(30% 22%, 78% 50%, 30% 78%);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
  opacity:0;
  z-index:2; /* 蓋在圓圈上層 */
animation: triIn 0.35s cubic-bezier(.2,.7,.3,1) 1.36s forwards;
  /* 延遲 0.86s = 0.8s(畫圈) + 0.06s(gap) */
}

@keyframes triIn{
  from{ opacity:0; transform: translate(-50%,-50%) scale(.7); }
  to  { opacity:1; transform: translate(-48%,-50%) scale(1); }
}

/* 預設先停住，避免一載入就播 */
.play-btn::after{ animation:none; --p:0; transform:rotate(-90deg); }
.play-btn>span{ animation:none; opacity:0; }
.play-btn::before{ animation:none; opacity:0; }

/* 當 .section.active 時才播放動畫 */
.section.active .play-btn::after{
  animation: sweep var(--dur) linear 1.2s forwards;
}
.section.active .play-btn>span{
  animation: showFull 1ms linear var(--dur) 1.2s forwards;
}
.section.active .play-btn::before{
   animation: triIn 0.35s cubic-bezier(.2,.7,.3,1) 1.36s forwards;
}



/*滑過放大*/

/* 讓三角形有平滑的 transform 過渡，預設就是 scale(1) */
.play-btn::before{
     opacity: 0;                                  /* 關鍵：預設隱藏 */
  transform: translate(-48%,-50%) scale(1);
  transition: transform .3s ease;
}

/* 覆寫：在 .section.active 時，不再用 triIn（含 transform），改成純淡入 */
.section.active .play-btn::before{
  animation: triFade var(--tri-time, .35s) ease
             calc(1.2s + var(--dur) + var(--gap, .06s)) forwards;
}

/* 只做透明度的關鍵影格（避免與 hover 搶 transform） */
@keyframes triFade{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 滑鼠滑過：三角形微放大就會生效 */
.play-btn:hover::before{
  transform: translate(-48%,-50%) scale(1.3);
  transition: transform .3s ease;
}

/* 可選：按下時整顆按鈕微縮，手感更好 */
.play-btn:active{
  transform: translate(-50%,-50%) scale(.98);
  transition: transform .3s ease;
}


@media screen and (max-width: 960px) {

.play-btn {

    width: 30vw;
    height: 30vw;


}
}