/*  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');*/



/*-----------------------------------------------
    ad
-----------------------------------------------*/

.ad {
    display: none;
    position: absolute;
    width: 19%;
    max-width: 300px;
    height: 27%;
    right: -1%;
    top: 2%;
    z-index: 50;
    cursor: pointer;
    /*! background: rgb(250, 250, 250); */



    border-radius: 0 0 5% 5%;
}

.ad a {
    display: block;
    width: 100%;
    height: 100%;
}

.ad:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url(../images/ad-w.png) 50% /100% no-repeat;
    animation: ad 3s ease-out 0s infinite both;
    pointer-events: none;

    right: 0;
    margin: auto;
}

.ad:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    z-index: 1;
    background: url(../images/ad.png) 50% /100% no-repeat;
    pointer-events: none;

    margin: auto;
    right: 0;
}

.section.active .ad {
    -webkit-animation: blur .5s cubic-bezier(.250, .460, .450, .940) 2s both;
}


@keyframes ad {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    20%,
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}


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

        top: 0%;

    }
}

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

    .ad {

        width: 19%;

        top: -1%;
        height: 34%;
    }
}

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

    .ad {
        display: block;
        width: 49%;
        max-width: 250px;
        height: 30%;
        right: 1%;
        top: -7%;

    }
}

/*---------------------------------------------
    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;
}

.warning {
    color: #fff;
    bottom: 0%;
    right: 0;
    z-index: 11;
    font-size: 0.85rem;
    position: absolute;
    /*! width: 44%; */
    height: 26px;
    font-weight: 500;
    letter-spacing: 0.05rem;
    text-shadow:
        1px 1px 4px rgba(32, 33, 45, 0.4), -1px -1px 6px rgba(12, 27, 85, 0.3), 0 2px 12px rgba(19, 14, 74, 0.84);
}

br.show-br {
    display: none;
}

@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;
    }

    .warning {
        color: #fff;
        bottom: 1%;
        right: initial;
        z-index: 11;
        font-size: 0.75rem;
        position: absolute;
        /*! width: 44%; */
        /*! height: 65%; */
        /*! writing-mode: vertical-lr; */
        left: 4%;
        line-height: 1.2;
    }

    br.show-br {
        display: block;
    }

}



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

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


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

html,
body {
    background: #f6f7f2;
}

/*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;*/
    width: 12vw;
    height: 4vw;
    background: url(../images/logo-w.png) center 0 /100% no-repeat;
    right: -1483%;
    top: 6%;
    z-index: 10;
    position: absolute;
    max-width: 250px;
}

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

.logo-w-m {
    display: block;
    width: 19vw;
    height: 11vw;
    background: url(../images/logo-w.png) center 0 /100% no-repeat;
    left: 1%;
    top: -24%;
    z-index: 10;
    position: absolute;
    max-width: 360px;
    right: inherit;

}
.logo-new{ background: url(../images/logo-new.png) center 0 /100% no-repeat;}
.section.active .logo-w-m {
    -webkit-animation: blur 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.3s both;
}



@media screen and (max-width: 1600px) {
    .logo-w-m {
        width: 19vw;
        height: 11vw;
        left: 1%;
        top: -18%;
        max-width: 240px;

    }

}



@media screen and (max-width: 960px) {
    .logo-w-m {
        /*display: block;
    width: 32vw;
    height: 11vw;
    background: url(../images/logo-w.png) center 0 /100% no-repeat;
    left: 1%;
    top: -11%;
    z-index: 10;
    position: absolute;
    max-width: 160px;
    right: inherit;*/

        display: block;
        width: 32vw;
        height: 11vw;
        background: url(../images/logo-w.png) center 0 /100% no-repeat;
        left: -5%;
        top: -15%;
        z-index: 10;
        position: absolute;
        max-width: 160px;
        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;
    }
}

@media screen and (max-width: 480px) {
    .logo-w {
        width: 25vw;
        height: 14vw;
        right: -1056%;
        top: 4%;
    }
}

@media screen and (max-width: 376px) {
    .logo-w {
        width: 25vw;
        height: 14vw;
        right: -1023%;
        top: 4%;
    }
}

/*-----------------------------------------------
    top
-----------------------------------------------*/
.top-group {
    position: absolute;
    top: 0;
    /* 從 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;
}
*/

@keyframes topGroupEffect {
    0% {
        top: 0;
        height: 100vh;
    }

    100% {
        top: 53px;
    }
}

@keyframes topGroupEffect2 {
    0% {
        top: 0;
        height: 100vh;
    }

    100% {
        top: 45px;
    }
}


.top-group-effect {
    animation: topGroupEffect .3s ease-out 1.6s 1 both;
}




/* 左右兩欄 */
.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-s.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 (min-width: 1921px) {
    .top-right-bg {

        background: url(../images/main.jpg) right 100% /cover no-repeat;

    }
}

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

    }

    .top-group-effect {
        animation: topGroupEffect2 .3s ease-out 1.6s 1 both;
    }



}

@media screen and (max-width: 960px) {
    .top-group-effect {
        animation: none;
    }


    .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-m.jpg) 60% 100% /130% 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;

    z-index: 10;
    color: #fff;


    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-in {
    position: absolute;
    width: 50%;
    height: 65px;
    left: 10%;
    top: 30%;
    padding: 1% 0 0 12%;
    font-size: 1.2rem;
    line-height: 70px;
    cursor: pointer;
    margin: auto;
    /*text-align: center;*/



    z-index: 10;
}

.cursor {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 16%;
    bottom: 12%;
    z-index: 10;
}

.section.active .cursor {
    animation: cursor 1.3s ease-out 2.2s 1 both;

}

.cursor img {
    width: 100%;
    animation: cursorImg 1s ease infinite both;
}

@keyframes cursor {
    0% {
        opacity: 0;
        transform: translate(50%, 50%);

    }

    70% {
        opacity: 0;
        transform: translate(50%, 50%);

    }

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

@keyframes cursorImg {

    0%,
    100% {
        transform: translate(0%, 0%);

    }

    50% {
        transform: translate(0%, 20px);
    }
}

.section.active .btn-more-in {
    animation: btnmorein 1s ease-out 2.1s 1 both;
}


.section.active .btn-move {
    animation: btnMove .5s ease-out 2s 1 both;
}

.section.active .food .btn-move {
    animation: btnMove-orange .5s ease-out 2s 1 both;
}

.section.active .family .btn-move {
    animation: btnMove-green .5s ease-out 2s 1 both;
}

.section.active .room .btn-move {
    animation: btnMove-deepblue .5s ease-out 2s 1 both;
}



@keyframes btnMove {
    0% {
        height: 15%;
        background: rgba(0, 94, 204, 1);
    }

    100% {
        height: 100%;
        background: rgba(0, 94, 204, .5);
    }
}

@keyframes btnMoveM {
    0% {
        height: 11%;
        background: rgba(0, 94, 204, 1);
    }

    100% {
        height: 11%;
        border-radius: 0;
        background: rgba(0, 94, 204, 1);
    }
}


@keyframes btnMove-orange {
    0% {
        height: 15%;
        background: rgba(255, 133, 23);
    }

    100% {
        height: 100%;
        background: rgba(255, 133, 23, .5);
    }
}

@keyframes btnMoveM-orange {
    0% {
        height: 11%;
        background: rgba(255, 133, 23);
    }

    100% {
        height: 11%;
        border-radius: 0;
        background: rgba(255, 133, 23);
    }
}

@keyframes btnMove-green {
    0% {
        height: 15%;
        background: rgba(13, 100, 68);
    }

    100% {
        height: 100%;
        background: rgba(13, 100, 68, .5);
    }
}

@keyframes btnMoveM-green {
    0% {
        height: 11%;
        background: rgba(13, 100, 68);
    }

    100% {
        height: 11%;
        border-radius: 0;
        background: rgba(13, 100, 68);
    }
}

@keyframes btnMove-deepblue {
    0% {
        height: 15%;
        background: rgba(13, 47, 85);
    }

    100% {
        height: 100%;
        background: rgba(13, 47, 85, .5);
    }
}

@keyframes btnMoveM-deepblue {
    0% {
        height: 11%;
        background: rgba(13, 47, 85);
    }

    100% {
        height: 11%;
        border-radius: 0;
        background: rgba(13, 47, 85);
    }
}






@keyframes btnmorein {
    0% {
        top: 30%;
        left: 0%;
        border-radius: 0px;
        background: transparent;
        transform: translate3d(0, 0, 0);

    }

    50% {
        top: 70%;
        border-radius: 0px;
        background: transparent;
        color: #fff;
        transform: translate3d(0, 0, 0);
    }

    100% {
        top: 70%;
        left: 10%;
        width: 75%;
        border-radius: 40px;
        background: #fff;
        color: #000;

        transform: translate3d(0, 0%, 0);
        /*box-shadow: inset 1px 4px 14px #737373;*/

    }
}

@keyframes btnmoreinM {
    0% {
        top: 25%;
        left: 0%;
        border-radius: 0px;
        background: transparent;
        transform: translate3d(0, 0, 0);
        /*! box-shadow: inset 0px 0px 0px #737373; */

    }

    50% {
        top: 25%;
        border-radius: 0px;
        background: transparent;
        color: #fff;
        transform: translate3d(0, 0, 0);
        /*! box-shadow: inset 0px 0px 0px #737373; */
    }

    100% {
        top: 25%;
        left: 10%;
        width: 75%;
        border-radius: 40px;
        background: transparent;
        color: #000;

        transform: translate3d(0, 0%, 0);
        /*! box-shadow: inset 1px 4px 14px #737373; */

    }
}

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

    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    /*! right: 0; */
}


/* 水平線：從左端長出 */
.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: 14%;
        top: -34%;

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

    .btn-more-in {
        width: 50%;
        height: 40px;
        left: 0%;
        top: 20%;
        padding: 1% 0 0 7%;
        font-size: 0.9rem;
        line-height: 40px;

    }

    .section.active .btn-more-in {
        animation: none;
        /*animation: btnmoreinM 1s ease-out 2.1s 1 both;*/
    }

    .section.active .btn-move {
        animation: none;
        animation: btnMoveM .5s ease-out 2s 1 both;
    }

    .section.active .food .btn-move {
        animation: none;
        animation: btnMoveM-orange .5s ease-out 2s 1 both;
    }

    .section.active .family .btn-move {
        animation: none;
        animation: btnMoveM-green .5s ease-out 2s 1 both;
    }

    .section.active .room .btn-move {
        animation: none;
        animation: btnMoveM-deepblue .5s ease-out 2s 1 both;
    }

    .cursor {
        width: 20px;
        height: 20px;
        right: 14%;
    }
}


/*-----------------------------------------------
    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;


    }
}





/*-----------------------------------------------
    footer
-----------------------------------------------*/
.footer-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 5% 4%;
    max-height: 70vh;
    overflow: hidden;
    /*! gap: 40px; */
    box-sizing: border-box;
}

/* 左右區塊 */
.li-left {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    /*! gap: 20px; */
}

.li-right {
    flex: 3;

}

/* Logo */
.footer-logo img {
    width: 160px;
    height: auto;
}

/* 公司資訊 */
.footer-info p {
    margin: 0 0 6px;
    font-size: 14px;
    color: #333;
}

.footer-info .links {
    margin-top: 8px;
}

.footer-info .links a {
    display: inline-block;
    margin-right: 12px;
    font-size: 13px;
    color: #666;
    text-decoration: underline;
}

/* 社群 */
.footer-social-link a {
    display: inline-block;
    margin-right: 12px;
}

.footer-social-link img {
    width: 32px;
    height: 32px;
}

/* 城市區 */
.footer-city-list {
    display: flex;
    flex-wrap: wrap;
}


.city {
    flex: 1 1 25%;
    min-width: 210px;
    max-width: 25%;
    box-sizing: border-box;
    /*! display: flex; */
    /*! justify-content: flex-start; */
    height: 4vw;
    /* ✅ 統一高度，可依實際內容微調 */
    line-height: 1.3;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    min-height: 75px;
}

.city .name {
    font-weight: 500;
    /*! margin-bottom: 0px; */
    font-size: 1.2rem;
}

.city .address {
    /*! font-size: 14px; */
    /*! margin-bottom: 2px; */
    text-align: left;
}

.address span.pc {
    display: inline-block;
}

.city .map a {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7rem;
    color: #fff;
    border-radius: 3px;
    padding: 1px 2px;
    background: #c8c8c8;
    transition: all .3s ease;
}

.city .map a:hover {
    transition: all .3s ease;

    background: #f68733;
}


.city .phone {}





.footer-info figure {
    width: 77%;
    max-width: 180px;
    margin-bottom: 10px;
}

.footer-info figure a {
    border: 0
}

.footer-info figure img {
    max-width: 100%
}


.footer-info {
    display: flex;
    flex-direction: column;
}

.footer-info .ent_text {
    font-size: 0.8rem;
    /*! padding-right: 16px; */
    text-align: left;
    /*! margin-top: 44px; */
    line-height: 1.5;
    margin: 5% 0 0 0;
}

.footer-info .ent_text>div:nth-child(1) {
    font-size: 1rem;
    font-weight: 500;
}

.footer-info .ent_text>div:nth-child(2) {
    /*! font-size: 13px; */
}

.footer-info .ent_text .mail {
    /*! font-size: 13px; */
    color: black;
    text-decoration: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.footer-info .ent_text .mail:hover {
    color: #f68733;
    background: transparent;
}

.footer-info .ent_text a {
    /*! font-size: 12px; */
    padding: 1px 4px;
    /*! border: #888 1px solid; */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
    /*! margin-bottom: 10px; */
    background: #c8c8c8;
    border-radius: 2px;
}

.footer-info .ent_text a:hover {
    background-color: #f68733;
    color: white;
    border-color: #f68733;
}

.follow-us {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 33px;
    width: 100%;
    max-width: 140px;
    /*! background: #555; */
    /*! height: 90px; */
}

.follow-us .follow-us-list {
    list-style: none;
    /*! margin-top: 12px; */
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;
}

.follow-us .follow-us-item {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
    flex: 1;
    height: 60px;
    margin: 2% 5% 0 0;
}

.follow-us .follow-us-item a {
    line-height: 0;
    font-size: 0;
    color: transparent;
    width: 100%;
    height: 100%;
    display: block;
}


/* RWD：1280px → 3 欄 */
@media screen and (max-width: 1440px) {


    .city {
        min-width: 32%;
        /*transform: scale(0.9);*/
        min-height: 61px;
    }

    .footer-wrap {
        max-width: 1600px;
        padding: 5% 4%;
        max-height: 100vh;
    }
}


/* RWD：768px → 上下排列 + 2 欄 */

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


    .footer-wrap {
        flex-direction: column;
        flex-wrap: nowrap;
        max-height: 95vh;
        gap: 0;
        padding: 3px;
        transform: scale(0.9) translate(0%, 5%);
    }

    .li-left,
    .li-right {
        order: initial;
        flex: 1;
    }



    .city {
        flex: 1;
        min-width: 50%;
        font-size: 0.65rem;
        min-height: 56px;
        line-height: 1.1;
    }

    .footer-info {
        display: flex;
        flex-direction: initial;
        justify-content: center;
        align-items: center;
    }


    .footer-info figure {
        width: 30%;

        /*! margin: 0 2% 0 0; */
    }

    .follow-us {
        margin-top: 5px;
        max-width: 120px;
        display: flex;
        max-width: 48%;
        font-size: 0.9rem;
        line-height: 2.5;
    }

    .follow-us span {
        flex: 1;
        text-align: right;
        padding: 0 5px;
    }

    .footer-info .ent_text {

        margin: 0 0 0 5%;
        font-size: 0.85rem;
    }

    .city .name {
        font-size: 1rem;
        display: inline-block;
    }

    .city .address {
        font-size: 0.7rem;
        margin-top: 6px;
        line-height: 0.7;
    }

    .city .phone {
        font-size: 0.8rem;
    }

    .city .map a {
        margin-left: 3px;
        font-size: 0.6rem;
        border-radius: 3px;
        padding: 1px 1px;
    }

    .city .map {
        display: inline-block;
    }

    .footer-city-list {
        width: 96%;
        margin: auto;
    }
}