/*-----------------------------------------------
    typing
-----------------------------------------------*/

/*主標位置+文字*/
.sl {
    width: 1200px;
    height: 600px;
    position: absolute;
    left: 0%;
    bottom: 4%;
    color: #000;

    font-size: 8.5rem;
    margin: 0;
    line-height: 1.3;
    font-weight: 900;
    z-index: 10;
    pointer-events: none;
}

.sub {
    z-index: 0;
}





/*主標*/
.sl-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;

    z-index: 1;
    margin: 0;
    padding: 0;
    line-height: 1;
}


/*top標題*/
.sl-top {
    position: absolute;

    display: none;

    font-size: 8.5rem;
    margin: 0;
    padding: 400px 0 0 0;
    font-weight: 900;
    z-index: 10;
    color: #fff;

    left: 34%;
    top: 15%;
    width: inherit;

    max-width: 590px;
    text-shadow:
        1px 1px 4px rgba(5, 6, 74, 0.4), -1px -1px 6px rgba(12, 21, 57, 0.3), 0 2px 12px rgba(19, 14, 74, 0.2);

    height: 400px;
    padding: 0;
    line-height: 1;
}



.sl-pre {
    position: absolute;
    top: 16%;
    left: 70%;
    width: 30%;
    height: 19%;
    color: #fff;
    text-shadow:
        1px 1px 4px rgba(3, 3, 21, 0.8), -1px -1px 6px rgba(7, 16, 49, 0.7), 0 2px 12px rgba(8, 5, 36, 0.9), 1px 1px 4px rgba(3, 3, 21, 0.8), -1px -1px 6px rgba(7, 16, 49, 0.7), 0 2px 12px rgba(8, 5, 36, 0.9);
}

.sl-decro {
    position: absolute;
    top: 40%;
    left: -8%;
    width: 30%;
    height: 31%;
    /*! font-size: 0.7rem; */
}

.sl-2 {
    padding: 0 0 0 10%;

}

.sl-sub {
    font-size: 2.5rem;

    font-weight: 550;
    letter-spacing: 0.2rem;
    line-height: 2;
    position: absolute;
    bottom: 25%;
    left: 1%;
}

.eng-m {

    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 450;
    letter-spacing: 0.1rem;
}

/*次頁前言*/
.pre-s {
    position: absolute;
    bottom: -3%;
    left: initial;
    width: 34%;
    height: 15%;
    color: #000;

    z-index: 10;
    font-weight: 500;
    letter-spacing: 0.05rem;
    /*! text-align: right; */
    font-size: 1.1rem;
    line-height: 1.8;
    right: -17%;
}

.pre-s-text {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 450;
    letter-spacing: 0.1rem;
}




.eng-s {
    font-size: 2rem;
    padding: 0 0 0 50%;
    max-width: 510px;
}

.eng-xs {

    font-size: 0.7rem;

    line-height: 1.7;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.05rem;
}


.eng-i {
    position: absolute;
    top: 26%;
    left: 25%;
    /*font-family: "Nothing You Could Do", cursive;*/
    font-family: "Allura", cursive;

    font-size: 2.8rem;
    color: rgb(242, 12, 6);
    text-shadow: none;
    letter-spacing: 0.1rem;
}


.top-ch {
    position: absolute;
    left: 4%;
    bottom: 13%;
    font-size: 3.2rem;
    color: #fff;
    z-index: 3;

    font-weight: lighter;
    letter-spacing: 0.1rem;
}

.top-eng {
    position: absolute;
    left: 2%;
    bottom: 0;
    font-size: 4rem;
    color: var(--blue);
    z-index: 3;

    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 0.7;
    /*! text-overflow: ellipsis; */
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    height: 40px;
}

.l-go-food .top-eng {
    color: var(--orange);
}

.l-go-family .top-eng {
    color: var(--green);
}

.l-go-room .top-eng {
    color: var(--apple);
}




.sl [class^="t"],
.sl .t,
.typing [class^="t"],
.typing .t {
    white-space: pre-line;
}


@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

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



/* 中文直立、英數側立（保留單字可讀性） */
.vtext {
    writing-mode: vertical-lr;
    text-orientation: mixed;
}



@media screen and (min-width: 1921px) {
    .sl {
        width: 1200px;
        height: 600px;
        left: -12%;
        bottom: 3%;


    }

    .pre-s {
        /*! bottom: -15%; */
        /*! left: inherit; */
        /*! width: 40%; */
        /*! height: 25%; */

        font-size: 1.2rem;
        line-height: 2;
        /*! letter-spacing: 0.1rem; */
    }

    .sl-decro {
        top: 40%;
        left: -29%;
        width: 30%;
        height: 31%;
    }
}



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

    .sl {
        /*! height: 600px; */
        left: -5%;
        bottom: 0%;
        font-size: 8rem;
        /*! padding: 300px 0 0 0; */
        /*! line-height: 150px; */
        /*! font-weight: 900; */
    }

    .sl-decro {

        left: -5%;

    }

    .pre-s {
        /*! bottom: 1%; */

        font-size: 1.4rem;
        /*! width: 55%; */
        right: -3%;
    }

}

@media screen and (max-width: 1440px) {
    .eng-i {
        top: 22%;
        left: 25%;

    }


    .sl-top {

        font-size: 7.5rem;

        top: 10%;
        left: 27%;
    }

    .sl {
        height: 500px;
        left: -10%;
        bottom: -7%;
        /*! font-size: 7.5rem; */
        /*! padding: 300px 0 0 0; */
        /*! line-height: 150px; */
        /*! font-weight: 900; */
    }

    .sl-pre {
        top: 6%;
        left: 62%;

    }


    .eng-m {

        font-size: 1.3rem;
    }

    .top-eng {

        font-size: 4rem;

    }



    .top-ch {
        font-size: 1.7rem;
        bottom: 27%;

    }
        .pre-s {
        /*! bottom: 1%; */

        font-size: 1.3rem;
        width: 55%;
        right: -31%;
    }

}


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


    .sl {
        height: 400px;
        left: -10%;
        width: 925px;
        font-size: 6rem;
        /*! padding: 300px 0 0 0; */
        /*! line-height: 150px; */
        /*! font-weight: 900; */
    }

    .sl-top {

        font-size: 6.5rem;

        top: 10%;
        left: 27%;
    }

    .sl-decro {

        left: -10%;

    }

    .sl-pre {
        top: 22%;
        left: 70%;

    }

    .eng-m {

        font-size: 1.2rem;
    }

}


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


    /*主標*/
    .sl-main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25%;

        z-index: 1;
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    .top-eng {

        font-size: 3.8rem;

        height: 100%;
        /*! transform: rotate(90deg); */
        top: 0;
        bottom: inherit;
        width: 36px;
        left: 3%;
        writing-mode: vertical-lr;
        text-orientation: mixed;
    }

    .top-ch {
        font-size: 2.5rem;
        bottom: initial;

        writing-mode: vertical-lr;
        text-orientation: mixed;
        left: 13%;
        top: 3%;
        font-weight: lighter;
        z-index: 5;
    }

    .sl-top {

        font-size: 4rem;

        top: 6%;
        left: 36%;
        writing-mode: vertical-lr;
        text-orientation: mixed;
    }

    .sl-pre {
        top: 18%;
        left: 66%;

        writing-mode: vertical-lr;
        text-orientation: mixed;
        height: 60%;
        width: 11%;
        /*! font-size: 0.91rem; */
        text-shadow: 1px 1px 4px rgb(8, 72, 124), -1px -1px 6px rgb(15, 41, 101), 0 2px 12px rgba(8, 5, 36, 0.9), 1px 1px 4px rgb(7, 51, 105), -1px -1px 6px rgba(7, 16, 49, 0.7), 0 2px 12px rgb(10, 56, 112)
    }

    .eng-m {

        font-size: 0.8rem;
    }

    .sl-2 {
        padding: 10% 0 0 1%;

    }

    .sl {
        height: 100px;
        left: 33%;
        width: 925px;
        font-size: 2.3rem;
        bottom: initial;
        width: 54%;
        top: 9%;
        font-weight: 700;
        /*! background: #5555552e; */
    }

    .sl-sub {
        font-size: 1.3rem;

        font-weight: 500;
        letter-spacing: 0.2rem;
        line-height: 2;
        position: absolute;
        bottom: 98%;
        left: 1%;
    }

    .pre-s {
        /*! bottom: initial; */

        font-size: 0.85rem;
        width: 100%;
        /*! top: 420%; */
        /*! line-height: 0.9; */
        left: 36%;
    }


    .eng-xs {

        font-size: 0.45rem;

        line-height: 1.7;
        color: #fff;
        font-weight: 500;
        letter-spacing: 0.05rem;
        text-align: right;
    }

}


@media screen and (max-width: 768px) {
    .top-eng {

        font-size: 2.2rem;

        height: 100%;
        top: 0;
        width: 27px;
        left: 10%;
    }
       .sl-top {

        font-size: 3.5rem;

        top: 6%;
        left: 36%;
    }

        .sl-pre {
        top: 18%;
        left: 68%;

        height: 60%;
        width: 11%;

    }
}

@media screen and (max-width: 420px) {
    .pre-s {

        font-size: 0.8rem;
        width: 65%;
        left: 35%;
        /*! text-shadow: 1px 1px 2px #ff4c4c,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff; */
    }


}



/*-----------------------------------------------
    sl-xl
-----------------------------------------------*/

.sl-xl-up,
.sl-xl-down {
    height: 100%;
    position: absolute;

    left: 0%;
    bottom: -25%;

    /*! font-size: 8.5rem; */
    margin: 0;
    padding: 0;
    /*! line-height: 1; */
    /*! font-weight: 900; */
    z-index: 0;
    width: 100%;
}


.joy .sl-xl-up,
.joy .sl-xl-down {
    color: var(--blue);
}

.food .sl-xl-up,
.food .sl-xl-down {
    color: var(--orange);
}

.family .sl-xl-up,
.family .sl-xl-down {
    color: var(--green);
}

.room .sl-xl-up,
.room .sl-xl-down {
    color: var(--apple);
}

.sl-xl-up ul,
.sl-xl-down ul {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sl-xl-up ul li,
.sl-xl-down ul li {
    flex: 1;
    /*! height: 25%; */
    margin: 0;
    padding: 0;
    line-height: 1;
}

.section.active .sl-xl-up {
    -webkit-animation: sl-xl-up 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.1s both;
}

.section.active .sl-xl-down {
    -webkit-animation: sl-xl-down 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.1s both;
}

@keyframes sl-xl-up {
    0% {
        opacity: 0.7;

        transform: translateY(10%);
    }

    30% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.25;

        transform: translateY(0);
    }
}

@keyframes sl-xl-down {
    0% {
        opacity: 0.6;

        transform: translateY(-10%);
        /*! z-index: 20; */
    }

    30% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.15;

        transform: translateY(0);
    }
}


.eng-b {
    position: absolute;
    width: 90%;
    top: -2%;
    left: 26%;
    font-size: 9rem;

    font-weight: 900;
    /*! height: 200px; */
}



.sl-blue,
.sl-orange,
.sl-green,
.sl-pink {
    position: absolute;
    width: 13%;
    height: 45%;
    background: url(../images/sl-blue.png) center 0 /100% no-repeat;
    top: 25%;
    left: 20%;
    max-width: 200px;
}

.sl-orange {
    background: url(../images/sl-orange.png) center 0 /100% no-repeat;
}

.sl-green {
    background: url(../images/sl-green.png) center 0 /100% no-repeat;
}

.sl-pink {
    background: url(../images/sl-pink.png) center 0 /100% no-repeat;
}


.section.active .sl-blue,
.section.active .sl-orange,
.section.active .sl-green,
.section.active .sl-pink {
    -webkit-animation: bounceInUp .5s ease 0.1s both;
}



.joy .pattern-text {
    background: url(../images/dot-blue.png) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
}
.box-tit-contact .pattern-text {
    background: url(../images/dot-blue.png) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
    /*! height: 200px; */
}


.food .pattern-text {
    background: url(../images/dot-orange.png) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.family .pattern-text {
    background: url(../images/dot-green.png) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.room .pattern-text {
    background: url(../images/dot-pink.png) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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




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

    .eng-b {
        width: 100%;
        top: -15%;
        left: 23%;
        font-size: 9rem;

        font-weight: 900;
        overflow: hidden;
        max-width: 100%;
    }

    .sl-xl-up,
    .sl-xl-down {
        /*! height: 600px; */

        left: 0%;
        /*! bottom: -39%; */

        /*! font-size: 7.5rem; */
        /*! line-height: 150px; */
        /*! font-weight: 900; */
    }


    .sl-blue,
    .sl-orange,
    .sl-green,
    .sl-pink {
        width: 18%;
        height: 40%;
        top: 16%;
        left: 33%;
        max-width: 200px;
    }
}


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



    .sl-xl-up,
    .sl-xl-down {
        /*! height: 600px; */

        left: 0;
        bottom: -26%;

        font-size: 6rem;
        /*! line-height: 150px; */
        /*! font-weight: 900; */
    }


}

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


@keyframes sl-xl-down {
    0% {
        opacity: 0.6;

        transform: translateY(-10%);
    }

    30% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.05;

        transform: translateY(0);
    }
}

    .sl-xl-up,
    .sl-xl-down {
        /*! height: 600px; */

        left: 0;
        bottom: inherit;

        font-size: 2.3rem;
        /*! line-height: 1; */
        /*! letter-spacing: 0.2rem; */
        width: 100%;
        height: 100%;
        top: -143%;
        text-align: left;
    }

    .sl-xl-up ul li,
    .sl-xl-down ul li {
        flex: 1;
        /*! height: 25%; */
        margin: 5% 0;
        padding: 0;
        line-height: 1;
    }


    .eng-b {
        width: 31%;
        top: 65%;
        left: 0%;
        font-size: 6rem;

        font-weight: 900;
        overflow: initial;
        height: 100%;
        writing-mode: vertical-lr;
        text-orientation: mixed;
    }


    .sl-blue,
    .sl-orange,
    .sl-green,
    .sl-pink {
        width: 65%;
        height: 45%;
        top: -55%;
        left: 22%;
        max-width: 200px;
        z-index: 81;
    }

    .sl-blue {

        background: url(../images/sl-w.png) center 0 /100% no-repeat;

    }

    .sl-orange {
        background: url(../images/sl-w.png) center 0 /100% no-repeat;
    }

    .sl-green {
        background: url(../images/sl-w.png) center 0 /100% no-repeat;
    }

    .sl-pink {
        background: url(../images/sl-w.png) center 0 /100% no-repeat;
    }
}