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



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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@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');





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

h1,
h2 {
    color: #f1355f;
    font-size: 1.2rem;
    font-weight: 500;

}

h3 {
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 10px 0;
    padding: 0 0 0 0px;
    text-align: left;
    /*! border-bottom: 1px solid rgba(234, 234, 234, 0.31); */
}

h3 span{
    position: absolute;
    top: -27px;
    left: 0;
    color: var(--gray);
    background: #fff;


    font-size: 0.9rem;
    border-radius: 10px;
    padding: 0 10px;
    line-height: 1.5;
}

p {
    font-weight: 400;
}


h3 small {
    font-size: 0.9em;
}


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

h3 span{
    position: relative;
    top: -2px;
    color: #000;
    background: #fff;


    font-size: 0.9rem;
    border-radius: 10px;
    padding: 0 10px 0px;
    line-height: 1.7;
    height: 1.4rem;
    display: inline-block;
    margin: 0 5px;
}


h3 small {
    font-size: 1em;
}

}


/*-----------------------------------------------
    段落用
-----------------------------------------------*/
.too-much{
    display: inline;
}

br.none-br{
    display: block;
}


br.show-br{
    display: none;
}

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

.too-much{
    display: none;
}
}

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

br.none-br{
    display: none;
}
br.show-br{
    display: block;
}
}


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



.page-wrapper {
    margin: auto;
    max-width: initial;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    min-height: 600px;
}

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


    .page-wrapper {
        margin: auto;
        max-width: initial;
        width: 100vw;
        height: auto;
        overflow: hidden;
    }


}

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


main {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    margin: auto;
    /*scroll-behavior: smooth;*/
    /* 平滑滾動 */

}

main:before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background: url(../images/page/bg-pattern.png) 0 0 repeat;
    opacity: 0.1;
}


.page-joy main {
    background: rgb(18, 62, 140);
     animation: colorShift1 25s infinite alternate;
}

.page-food main {
    background: rgb(202, 111, 29); /* 起始顏色 */
    animation: colorShift2 30s infinite alternate;
}

.page-family main {
    background: rgb(34, 83, 65);
    animation: colorShift3 25s infinite alternate;
}

.page-room main {
    background: rgb(0, 19, 37);
     animation: colorShift4 25s infinite alternate;
}



@keyframes colorShift1 {
    0%,100% {
        background-color: rgb(18, 62, 140);/* 淺橘 */
    }
    35% {
        background-color: rgb(20, 86, 204); /* 中橘 */
    }
    75% {
        background-color: rgb(9, 21, 43); /* 深橘 */
    }
}

@keyframes colorShift2 {
    0%,100% {
        background-color: rgb(202, 111, 29); /* 淺橘 */
    }
    35% {
        background-color: rgb(180, 90, 20); /* 中橘 */
    }
    75% {
        background-color: rgb(55, 37, 27); /* 深橘 */
    }
}
@keyframes colorShift3 {
    0%,100% {
        background-color: rgb(34, 83, 65); /* 淺橘 */
    }
    35% {
        background-color: rgb(30, 170, 119); /* 中橘 */
    }
    75% {
        background-color: rgb(9, 45, 32); /* 深橘 */
    }
}
@keyframes colorShift4 {
    0%,100% {
        background-color: rgb(0, 19, 37); /* 淺橘 */
    }
    35% {
        background-color: rgb(17, 49, 79); /* 中橘 */
    }
    75% {
        background-color:rgb(0, 43, 85);/* 深橘 */
    }
}


section {
    width: 100vw;
    flex-shrink: 0;
    height: 100vh;
    color: #fff;
    font-size: 48px;
    font-weight: bold;
    display: flex;
    aspect-ratio: 1920/1000;
}




main::-webkit-scrollbar {
    display: none;
}

main {
    scrollbar-width: none;
}


@media screen and (max-width: 960px) {
    main {
        display: block;
        overflow-x: hidden !important;
        overflow-y: auto;
        height: auto;
    }

    /*    .panel {
        width: 100%;
        height: 80vh;
        flex-shrink: 1;
        margin: 0 0 16px;
    }*/

    section {
        /*! flex-shrink: 0; */
        color: #fff;
        font-size: 48px;
        font-weight: bold;
        display: block;
        /*! align-items: center; */
        /*! justify-content: center; */
        aspect-ratio: auto;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 0 0 10% 0;
    }


    section:last-child {
        padding: 0 0 20% 0;
    }


}

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


.main-pic {
    position: absolute;
    width: 78%;
    height: 67%;
    left: 50%;
    top: 18%;
    z-index: 5;
    overflow: hidden;
    max-width: 85%;
}

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

    aspect-ratio: 1800 /1200;
}


.page-joy .main-pic .main-pic-bg {
    background: url(../images/main-pic01.jpg) center 50% /cover no-repeat;
}

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

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

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


.zoom {
    animation: zoom 1.2s cubic-bezier(.250, .460, .450, .940) 0s 1 both;

}

.main-pic.zoom .main-pic-bg {
    width: 100%;
    height: 100%;
    right: initial;
    left: 0;
    top: 0;
    aspect-ratio: 1800 /1200;

}

@keyframes zoom {

    0%,
    10% {
        left: 30%;
        top: 18%;
        width: 78%;
        height: 67%;
        transform-origin: 100%;
    }

    60% {
        left: 0%;
        top: 18%;
        width: 80%;
        height: 67%;
        transform-origin: 100%;
    }

    100% {
        left: 0;
        top: 0%;
        width: 80%;
        height: 100%;
    }
}






@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: 960px) {

    .main-pic {
        width: 100%;
        height: initial;
        right: initial;
        top: 0;
        position: relative;
        min-width: 100%;
        aspect-ratio: 768/865;
        left: 0;
    }

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

    .main-pic.zoom .main-pic-bg {
        width: 100%;
        height: 100%;
        right: initial;
        left: 0;
        top: 0;
        aspect-ratio: initial;

        background: url(../images/main-pic04.jpg) 50% 0% /200% no-repeat;
    }

    .zoom {
        animation: none;

    }


    .page-joy .main-pic .main-pic-bg {
        background: url(../images/main-pic01.jpg) 65% 50% /cover no-repeat;
    }

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

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

    .page-room .main-pic .main-pic-bg {
        background: url(../images/main-pic04.jpg) 65% 50% /cover no-repeat;
    }




}



/*-----------------------------------------------
    page-sl
-----------------------------------------------*/
.sl-page {
    width: 1200px;
    height: 220px;
    position: absolute;
    left: 5%;
    bottom: 8%;

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


.sl-page-s {
    width: 1200px;
    height: 220px;
    position: absolute;
    left: 5%;
    bottom: -10%;

    font-size: 7rem;
    margin: 0;
    line-height: 1.3;
    font-weight: 900;
    z-index: 10;
}

.t3-s {
    font-size: 2.5rem;

    font-weight: 550;
    letter-spacing: 0.2rem;
    line-height: 2;
    position: absolute;
    bottom: 100%;
    left: 1%;
    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);
}

.t3-number {
    font-size: 0.8rem;

    font-weight: 400;
    letter-spacing: 1rem;
    line-height: 2;
    position: absolute;
    bottom: 106%;
    left: 1%;
    /*! 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); */
    color: rgb(255, 250, 250);
}

.t3 {
    color: #fff;
    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);
    margin: 0;
    padding: 0;
    line-height: 1;
}
.shadow-blue{text-shadow: 1px 1px 4px rgb(0, 145, 190), -1px -1px 6px rgb(0, 188, 230), 0 2px 12px rgb(1, 135, 196) }
.shadow-green{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); }
.shadow{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);}


@media screen and (max-width:1600px) {
    .sl-page {
        width: 1200px;
        height: 220px;
        position: absolute;
        left: 5%;
        bottom: 2%;

        font-size: 5.5rem;
        margin: 0;
        line-height: 1.3;
        font-weight: 900;
        z-index: 10;
    }


}

@media screen and (max-width:1280px) {
    .sl-page {
        width: 1200px;
        height: 220px;
        position: absolute;
        left: 5%;
        bottom: -3%;

        font-size: 5rem;
        margin: 0;
        line-height: 1.3;
        font-weight: 900;
        z-index: 10;
    }


}

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


    .sl-page {
        width: 82%;
        position: relative;
        left: 0%;
        bottom: initial;

        font-size: 2.9rem;
        margin: -5% auto 0;
        line-height: 1.5;
        font-weight: 900;
        z-index: 10;
        top: initial;
        right: 0;
        height: 130px;
    }

    .t3-s {
        font-size: 1.5rem;

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



    .t3 {
        color: #fff;
        text-shadow:none;
        margin: 0;
        padding: 0;
        line-height: 1;
    }
.t3-too-long{
     font-size: 2.05rem;
     letter-spacing: 0.01rem;
}



    .sl-page .t3.shadow-green,.sl-page .t3-s.shadow-green{
text-shadow:1px 1px 4px rgb(65, 142, 113), -1px -1px 6px rgb(41, 62, 54), 0 2px 12px rgb(48, 94, 77);
    }

}


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

    .sl-page {
        width: 82%;
        left: 0%;
        bottom: initial;

        font-size: 2.2rem;
        margin: -5% auto 0;
        line-height: 1.5;
        top: initial;
        right: 0;
        height: 120px;
    }
}

/*-----------------------------------------------
    page-tip
-----------------------------------------------*/
.page-tit {
    position: absolute;
    width: 12vw;
    max-width: 250px;
    height: 200px;
    color: #fff;
    z-index: 10;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02rem;
    top: 55%;
    text-align: justify;
    /*animation: textShow 2.5s ease 0s  ;*/
    line-height: 2;
    opacity: 0;
}




.btn-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: rgb(255, 255, 255);
    cursor: pointer;
    margin: 10% auto 2%;
    width: fit-content;
    letter-spacing: 0.1rem;
    position: relative;
    width: 100%;
    height: 30px;
}

.btn-tip::before,
.btn-tip::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--silver);
    /* 左右的實線 */
    margin: 0 3% 0 0;
    /* 線與文字間距 */
    opacity: 0.8;
}


.btn-tip::after {
    content: "";
    margin: 0 0 0 3%;
    /* 線與文字間距 */
}


.tit-more {
    font-size: 0.8rem;
    margin: 0 auto;
    text-align: justify;
    line-height: 2;
    color: rgba(255, 255, 255,0.8);
    letter-spacing: 0.05rem;
    border-bottom: 1px solid rgba(234, 234, 234, 0.31);
    padding: 1% 0 7% 0%;
    font-weight: 500;
    letter-spacing: 0.08rem;
    /*! display: none; */
}
.black{/*! color:var(--gray); */}

.tit-more-fix{
    display: block!important;
}


@keyframes textShow {

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



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


.textShow {
    animation: textShow 1.3s ease 0s forwards;
    /* ⭐ forwards 保持最後狀態 */
}


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

.page-tit {
    width: 14vw;
    max-width: 250px;
    height: 200px;
    font-size: 0.8rem;
    letter-spacing: 0.02rem;
    top: 55%;
    /*! text-align: left; */
    line-height: 2;
}

}




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

    .page-tit {
        position: relative;
        width: 88%;
        max-width: 100%;
        height: auto;
        color: #fff;
        z-index: 10;
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0.02rem;
        top: initial;
        margin: auto;
        margin: auto;
        padding: 10% 0;
    }


    .tit-more {
        font-size: 0.95rem;

    }


/*
    .btn-tip {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        color: rgb(255, 255, 255);
        cursor: pointer;
        margin: 3% auto;
        width: fit-content;
        letter-spacing: 0.1rem;
        position: relative;
        width: 100%;
        height: 30px;
    }

    .btn-tip::before,
    .btn-tip::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--silver);
        margin: 0 0% 0 2%;
        opacity: 0.8;
        order: 2;
    }


    .btn-tip::after {
        content: "";
        margin: 0 0 0 3%;
        display: none;
    }*/

}

/*-----------------------------------------------
    page-pic
-----------------------------------------------*/

.page-pic {
    position: absolute;
    top: 0;
    left: 0;
    /*animation: picShow .5s ease 0s;*/

    z-index: 2;
}



.page-pic img {
    width: 100%;
    opacity: 0;

}




.picShow {
    animation: picShow 1s ease 0s forwards;
    /* ⭐ forwards 保持最後狀態 */
}






@keyframes picShow {

    0% {
        opacity: 0;
        filter: blur(2px);
        transform: translate(10%, 0%);
    }


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



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


    .page-pic {
        position: relative;
        top: initial;
        left: initial;

    }

}









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

.btn-scroll {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: -4%;
    left: 0;
    z-index: 10;
    color: #fff;

    font-size: 1.2rem;
    line-height: 70px;
    /*! opacity: 0.6; */
}

/*客製化*/
.page-joy .btn-scroll,
.page-family .btn-scroll {
    color: rgb(32, 30, 30);
}

.page-joy .btn-scroll .line,
.page-joy .btn-scroll .line::before,
.page-family .btn-scroll .line,
.page-family .btn-scroll .line::before {
    background: rgb(36, 34, 34);
}


.btn-scroll span {
    position: absolute;
    right: -9%;
    bottom: -30%;

    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    font-style: italic;
    animation: btnScroll 2.7s ease 0s;
}


/* 水平線：從左端長出 */
.btn-scroll .line {
    position: absolute;
    left: 0%;
    bottom: 0;
    height: 1px;
    width: 98%;
    /* 最終寬度先給好 */
    background: #fff;
    transform-origin: left center;
    transform: scaleX(0);
    /* 由 0 → 1 */
    will-change: transform;
    /*animation: lineGrow 5.6s infinite 2s;*/
    animation: lineGrow 5.6s ease 1.5s 2 forwards;
}

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

/* 時序：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);
    }
}

@keyframes btnScroll {

    0%,
    70% {
        opacity: 0;
        transform: translate(-10%, 0);
    }



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

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

        /*! padding: 1.6% 1.5%; */

    }
}

@media screen and (max-width: 1600px) {
    .btn-scroll {
        width: 67%;
        height: 100px;
        bottom: 14%;
        left: 0;

        font-size: 1.2rem;
        line-height: 70px;
    }

    .btn-scroll span {
        right: -13%;
        bottom: -30%;

        font-size: 1.4rem;
    }
}

@media screen and (max-width: 1280px) {
    .btn-scroll {
        width: 73%;
        height: 100px;
        bottom: 0%;
        left: 0;

        font-size: 1.2rem;
        line-height: 70px;
    }

    .btn-scroll span {
        right: -13%;
        bottom: -30%;

        font-size: 1.4rem;
    }
}





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

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

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

    }

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

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


/*-----------------------------------------------
    typing 只對page
-----------------------------------------------*/

.typing [class^="t"],
.typing .t {
    visibility: hidden;
    /* 預設隱藏 */
}


/*-----------------------------------------------
    bg變色
-----------------------------------------------*/
.bg-01-1 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -56%;
    background: url(../images/page/bg-01-1.jpg) center 100% /cover no-repeat;
    position: absolute;
    /*! opacity: 0.5; */
}

.bg-01-2 {
    background: rgb(6, 14, 28);
}

.bg-01-3 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -47%;
    background: url(../images/page/bg-01-3.jpg) center 100% /cover no-repeat;
    position: absolute;
    /*! opacity: 0.5; */
}

.bg-01-4 {
    background: rgb(18, 20, 26);
}

.bg-01-10 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -36%;
    background: url(../images/page/bg-01-10.jpg) center 100% /cover no-repeat;
    position: absolute;
    /*! opacity: 0.5; */
}

.bg-2-1 {
    background: rgb(6, 14, 28);
}

.bg-2-2 {
    background: rgb(43, 20, 0);
}

.bg-2-3 {
    background: rgb(99, 57, 20);
}

.bg-2-g1 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -27%;
    background: url(../images/page/bg-2-g1.jpg) center 100% /cover no-repeat;
    position: absolute;
    opacity: 0.6;
}

.bg-2-g2 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -56%;
    background: url(../images/page/bg-2-g2.jpg) center 100% /cover no-repeat;
    position: absolute;
    /*! opacity: 0.6; */
}




.bg-04-1 {
    background: rgb(2, 44, 87);
}

.bg-04-2 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -27%;
    background: url(../images/page/bg-04.jpg) center 100% /cover no-repeat;
    position: absolute;
}

.bg-04-3 {
    background: rgb(2, 44, 87);
}

.bg-04-4 {
    background: rgb(5, 27, 49);
}



.bg-03 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -18%;
    background: url(../images/page/bg-03.jpg) center 100% /cover no-repeat;
    position: absolute;
}


.bg-03-1 {
    background: #1e241f;
}

.bg-03-2 {
    background: #071703;
}

.bg-03-3 {
    background: #151a16;
}

.bg-03-4 {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -128%;
    background: url(../images/page/bg-03-4.jpg) center 100% /cover no-repeat;
    position: absolute;
}

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


.multiply-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    /*! background: #043d73; */
}

.multiply-01 {
    background-color: rgb(0, 80, 172);
    opacity: 0.7;
}

.multiply-02 {
    background-color: rgb(255, 121, 0);
    opacity: 0.8;
}

.multiply-03 {
    background-color: rgb(21, 70, 40);
    opacity: 0.9;
}

.multiply-04 {
    background-color: rgb(19, 49, 96);
    opacity: 0.9;
}



/*-----------------------------------------------
    img-s
-----------------------------------------------*/
.img-s {
    position: absolute;
    right: -3%;
    top: 60%;
    z-index: 10;
    width: 22%;



}
.img-s-1 {
    position: absolute;
    right: -19%;
    bottom: -8%;
    z-index: 10;
    width: 59%;

    /*! border: 1px solid #000; */
}
.img-s-3 {
    position: absolute;
    right: -15%;
    top: 15%;
    z-index: 10;
    width: 24%;

}
.img-s-4 {
    position: absolute;
    right: -16%;
    bottom: 0%;
    z-index: 10;
    width: 15%;

    /*! border: 1px solid #000; */
}
/*-----------------------------------------------
    定位用
-----------------------------------------------*/
/*sl*/
.sl-page-s {
    left: 5%;
    bottom: -6%;
    font-size: 7rem;

}

.sl-page-s-pos1 {
    left: -20%;
    bottom: -12%;

}

.sl-page-s-pos2 {
    left: -2%;
    bottom: -4%;

}
.sl-page-s-pos3 {
    left: -2%;
    bottom: -17%;

}
.sl-page-s-pos4 {
    left: -9%;
    bottom: -5%;

}

.sl-page-s-pos5 {
    /*全畫面用*/
    left: -10%;
    bottom: 10%;

}



/*tip*/

.tip-0 {
    top: 0%;
    right: initial;
    left: -20%;
}

.tip-10 {
    top: 10%;
    right: initial;
    left: -20%;
}

.tip-20 {
    top: 20%;
    right: initial;
    left: -20%;
}

.tip-30 {
    top: 30%;
    right: initial;
    left: -20%;
}

.tip-50 {
    top: 50%;
    right: initial;
    left: -20%;
}

.tip-80 {
    top: 80%;
    right: initial;
    left: -20%;
}


.tip-left-15 {
    right: initial;
    left: -16%;
}

.tip-left-20 {
    right: initial;
    left: -20%;
}

.tip-left-25 {
    right: initial;
    left: -27%;
}

.tip-left-30 {
    right: initial;
    left: -32%;
}

.tip-left-45 {
    right: initial;
    left: -45%;
}


.tip-right {
    right: 6%;
    left: initial;
}

.tip-right-20 {
    right: -22%;
    left: initial;
}

.tip-right-25 {
    right: -26%;
    left: initial;
}

.tip-right-30 {
    right: -30%;
    left: initial;
}

.tip-right-45 {
    right: -45%;
    left: initial;
}

/*pic*/


.pic-left-5 {
    left: 5%;
}

.pic-left-15 {
    left: 15%;
}

.pic-left-20 {
    left: 20%;
}

.pic-left-30 {
    left: 30%;
}

.pic-left-40 {
    left: 40%;
}

.pic-left-50 {
    left: 50%;
}

.pic-top-5 {
    top: 5%;
}

.pic-top-10 {
    top: 10%;
}

.pic-top-20 {
    top: 20%;
}

.pic-top-30 {
    top: 30%;
}

.width-25,
.page-pic img.width-25 {
    width: 25vw;
}

.width-30,
.page-pic img.width-30 {
    width: 30vw;
}

.width-45,
.page-pic img.width-45 {
    width: 45vw;
}

.width-50,
.page-pic img.width-50 {
    width: 50vw;
}

.width-55,
.page-pic img.width-55 {
    width: 55vw;
}

.width-60,
.page-pic img.width-60 {
    width: 60vw;
}

.width-65,
.page-pic img.width-65 {
    width: 65vw;
}

.width-70,
.page-pic img.width-70 {
    width: 70vw;
}

.width-75,
.page-pic img.width-75 {
    width: 75vw;
}

.width-80,
.page-pic img.width-80 {
    width: 80vw;
}

.width-85,
.page-pic img.width-85 {
    width: 85vw;
}

.width-90,
.page-pic img.width-90 {
    width: 90vw;
}

.width-95,
.page-pic img.width-95 {
    width: 95vw;
}

.width-100,
.page-pic img.width-95 {
    width: 100vw;
}

.width-110,
.page-pic img.width-95 {
    width: 110vw;
}

.width-130,
.page-pic img.width-95 {
    width: 130vw;
}


@media screen and (min-width: 1921px) {
    .tip-right {
        right: 10%;
        left: initial;
    }


.tip-left-15 {
    right: initial;
    left: -14%;
}

.tip-left-20 {
    right: initial;
    left: -18%;
}

.tip-left-25 {
    right: initial;
    left: -22%;
}

.tip-left-30 {
    right: initial;
    left: -26%;
}

.tip-left-45 {
    right: initial;
    left: -40%;
}


.tip-right {
    right: 10%;
    left: initial;
}

.tip-right-20 {
    right: -22%;
    left: initial;
}

.tip-right-25 {
    right: -26%;
    left: initial;
}

.tip-right-30 {
    right: -26%;
    left: initial;
}

.tip-right-45 {
    right: -42%;
    left: initial;
}
}



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

    .sl-page-s {
        left: 1%;
        bottom: -1%;
        font-size: 5.5rem;

    }

    .sl-page-s-pos1 {
        left: -1%;
        bottom: -20%;

    }

    .sl-page-s-pos4,.sl-page-s-pos3 {
        left: 3%;
        bottom: -19%;

    }

    .tip-30,
    .tip-50,
    .tip-80 {
        top: 20%;

    }

    .pic-top-20,
    .pic-top-30 {
        top: 15%;
    }



}


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

    .tip-20,
    .tip-30,
    .tip-50,
    .tip-80 {
        top: 15%;

    }


.tip-left-15 {
    right: initial;
    left: -18%;
}

.tip-left-20 {
    right: initial;
    left: -23%;
}

.tip-left-25 {
    right: initial;
    left: -31%;
}

.tip-left-30 {
    right: initial;
    left: -33%;
}

.tip-left-45 {
    right: initial;
    left: -45%;
}


.tip-right {
    right: 5%;
    left: initial;
}

.tip-right-20 {
    right: -22%;
    left: initial;
}

.tip-right-25 {
    right: -26%;
    left: initial;
}

.tip-right-30 {
    right: -33%;
    left: initial;
}

.tip-right-45 {
    right: -45%;
    left: initial;
}

}

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

    .sl-page-s {
        left: 5%;
        bottom: -35%;
        font-size: 5rem;

    }

    .sl-page-s-pos1 {
        left: 2%;
        bottom: -36%;

    }

    .sl-page-s-pos4 {
        left: -9%;
        bottom: -5%;

    }
}


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


    .tip-0,
    .tip-10,
    .tip-20,
    .tip-30,
    .tip-50,
    .tip-80 {

        right: 0;
        left: 0;

        top: initial;
        padding: 5% 5%;
    }

    .pic-top-5,
    .pic-top-10,
    .pic-top-20,
    .pic-top-30 {
        top: initial;
    }




    .pic-left-5,
    .pic-left-15,
    .pic-left-20,
    .pic-left-30,
    .pic-left-40,
    .pic-left-50 {
        left: 0;
    }


    .width-25,
    .page-pic img.width-25,
    .width-30,
    .page-pic img.width-30,
    .width-45,
    .page-pic img.width-45,
    .width-50,
    .page-pic img.width-50,
    .width-55,
    .page-pic img.width-55,
    .width-60,
    .page-pic img.width-60,
    .width-65,
    .page-pic img.width-65,
    .width-70,
    .page-pic img.width-70,
    .width-75,
    .page-pic img.width-75,
    .width-80,
    .page-pic img.width-80,
    .width-85,
    .page-pic img.width-85,
    .width-90,
    .page-pic img.width-90,
    .width-95,
    .page-pic img.width-95,
    .width-100,
    .page-pic img.width-95,
    .width-110,
    .page-pic img.width-95,
    .width-130,
    .page-pic img.width-95 {
        width: 100%;
    }


    .sl-page-s {
        width: 80%;
        height: 10%;
        position: relative;
        left: 0%;
        bottom: initial;

        font-size: 2.2rem;
        margin: 8% auto 0;
        line-height: 1.5;
        font-weight: 900;
        z-index: 10;
        top: initial;
        right: initial;
    }
}


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

    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid #fff;

    text-align: center;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
    cursor: pointer;
    font-weight: 400;
    z-index: 50;
    transition: all .3s ease;
    transform: scale(1);
}


.btn-back:hover {
    transform: scale(1.1);
    transition: all .3s ease;
}

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

    .btn-back {

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

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