body {
        padding: 0;
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    img {
        width: 100%;
        max-width: 1096px !important;
        height: auto;
        /* vertical-align: middle; */
        display: block;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .container {
        width: 100%;
        max-width: 1096px;
        margin: 0 auto;
    }

    .content {
        width: 100% !important;
        max-width: 1096px !important;
        margin: 0 auto;
        position: relative;
    }

    .wrap {
        max-width: 1920px;
        margin: 0 auto;
        overflow: hidden;
    }

    /* Loading */

    .loading {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background-color: #FFD429;
    }

    .loading>img {
        position: absolute;
        width: 30%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    @media (max-width:568px) {
        .loading>img {
            width: 50%;
        }
    }

    /* header */

    .header {
        position: sticky;
        left: 0%;
        top: 0%;
        margin: 0 auto;
        /* 依據開版寬度 */
        max-width: 1920px;
        /* 自行修改 */
        background-color: #D43A46;
        z-index: 999;
        overflow: hidden;
    }

    .w-100 {
        width: 100%;
    }

    .navControl {
        display: flex;
        margin: 0 auto;
        padding: 1.5% 0;
        /* 可自行修改寬度  用於調整導覽列內的文字間距*/
        max-width: 1100px;
    }

    .navControl a {
        display: block;
        text-align: center;
        width: 100%;
        /* 自行修改文字大小 */
        font-size: 2rem;
        color: #fff;
        font-weight: bold;
    }

    .navControl li:nth-child(1) {
        border-right: 3px solid #fff;
    }

    .navControl li:nth-child(3) {
        border-left: 3px solid #fff;
    }

    @media (max-width:568px) {
        .navControl a {
            font-size: 1.12rem;
        }

        .navControl li:nth-child(1) {
            margin-right: 5%;
        }

        .navControl li:nth-child(3) {
            margin-left: 5%;
        }
    }

    /* countdown */
    #cdClose {
        position: sticky;
        top: 0;
        background: #D43A46;
        border-top: 3px solid #FFF0BD;
        border-bottom: 3px solid #FFF0BD;
        padding: 10px 0;
        letter-spacing: 1px;
        z-index: 50;
    }

    .timer {
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @media screen and (max-width: 450px) {
        .timer {
            font-size: 1rem;
            letter-spacing: 0.5px;
        }
    }

    /* countdown */

    /* bg */

    .bg {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .bg1 {
        background-image: url(img/b1.jpg);
    }

    .bg2 {
        background-image: url(img/b2.jpg);
    }

    .bg3 {
        background-image: url(img/b3.jpg);
    }

    .bg4 {
        background-image: url(img/b4.jpg);
    }

    .bg5-1 {
        background-image: url(img/b5-1.jpg);
    }

    .bg5-1 .openBtn {
        top: 65%;
        left: 35%;
    }

    .bg5-2 {
        background-image: url(img/b5-2.jpg);
    }

    .bg6-1 {
        background-image: url(img/b6-1.jpg);
    }

    .bg6-1 .openBtn {
        top: 67%;
        left: 15%;
    }

    .bg6-2 {
        background-image: url(img/b6-2.jpg);
    }

    .bg7-1 {
        background-image: url(img/b7-1.jpg);
    }

    .bg7-1 .openBtn {
        top: 65%;
        left: 41%;
    }

    .bg7-2 {
        background-image: url(img/b7-2.jpg);
    }

    .bg8-1 {
        background-image: url(img/b8-1.jpg);
    }

    .bg8-1 .openBtn {
        top: 69%;
        left: 21%;
    }

    .bg8-2 {
        background-image: url(img/b8-2.jpg);
    }

    .bg9-1 {
        background-image: url(img/b9-1.jpg);
    }

    .bg9-1 .openBtn {
        top: 75%;
        left: 35%;
    }

    .bg9-2 {
        background-image: url(img/b9-2.jpg);
    }


    .bg10 {
        background-image: url(img/b10.jpg);
    }

    .bg10 .control {
        position: absolute;
        width: 5%;
        top: 53% !important;
        cursor: pointer;
    }

    .previous {
        left: 8%;
    }

    .next {
        right: 8%;
    }

    .silde-img {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
        width: 68%;
        display: none;
    }

    .act {
        display: block;
    }

    .bg11 {
        background-image: url(img/b11.jpg);
    }

    .bg12 {
        background-image: url(img/b12.jpg);
    }

    .off01 {
        background-image: url(img/off01.jpg);
    }

    .off02 {
        background-image: url(img/off02.jpg);
    }

    .off03 {
        background-image: url(img/off03.jpg);
    }

    .off04 {
        background-image: url(img/off04.jpg);
    }

    .off05 {
        background-image: url(img/off05.jpg);
    }

    .info {
        background-image: url(img/info.jpg);
    }





    /* footer */

    .footer,
    .footer a {
        text-align: center;
        font-size: 25px;
        line-height: 40px;
        color: #645f49;
    }

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

        .footer,
        .footer a {
            text-align: center;
            font-size: 25px;
            line-height: 30px;
            color: #FFFFFF;
        }
    }

    /* 功能 */

    .close_img {
        display: none;
    }

    .show {
        max-height: 5000px;
    }

    /* 動畫 */

    .jump {
        animation: jump 2s infinite ease-in-out;
    }

    @keyframes jump {
        0% {
            transform: translateY(0px);
        }

        40% {
            transform: translateY(20px);
        }

        80% {
            transform: translateY(0px);
        }

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

    .jump2 {
        animation: jump2 5s infinite ease-in-out;
    }

    @keyframes jump2 {
        0% {
            transform: translateY(0px);
        }

        25% {
            transform: translateY(-10px);
        }

        50% {
            transform: translateY(0px);
        }

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

    .jump3 {
        animation: jump3 2s infinite ease-in-out;
    }

    @keyframes jump3 {
        0% {
            transform: translateY(0px);
        }

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

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

    .scale {
        animation: scale 1s infinite ease-in-out;
    }

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

        50% {
            transform: scale(1.1, 1.1);
        }

        100% {
            transform: scale(1, 1);
        }
    }

    /* 按鈕動畫 */

    @keyframes hoverAnim {
        0% {
            -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
        }

        30% {
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }

        100% {
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }
    }

    .Link {
        transition: 0.8s;
    }

    /* .Link:hover {
    transform: translateY(5px);
    opacity: 0.5;
} */

    .openBtn {
        position: relative;
        display: block;
        overflow: hidden;
        width: 30%;
    }

    .openBtn:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(124deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0.75) 50%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        pointer-events: none;
        animation-name: hoverAnim;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @media screen and (max-width: 640px) {
        .openBtn:after {
            animation-duration: 4s;
        }
    }

    /* 定位地域 */

    .thing01 {
        top: 51%;
        left: 5%;
        width: 38%;
        animation-delay: 1.2s;
    }

    .thing02 {
        top: 56%;
        left: 33%;
        width: 38%;
        z-index: 2;
    }

    .thing03 {
        top: 50%;
        left: 56%;
        width: 38%;
        animation-delay: 0.6s;
    }

    .shoadow {
        top: 0%;
        width: 100%;
        height: 100%;
        filter: drop-shadow(20px 20px 1px rgb(45, 128, 251));
    }

    @media (max-width:568px) {
        .thing01 {
            top: 49%;
        }

        .thing02 {
            top: 52%;
        }

        .thing03 {
            top: 49%;
        }

        .shoadow {
            filter: drop-shadow(8px 8px 1px rgb(45, 128, 251));
        }
    }

    .thing04 {
        top: 47%;
        left: 13%;
        width: 75%;
    }


    .b4-1 {
        width: 85.5%;
        top: 19%;
        left: 6%;
    }

    .b4-2 {
        width: 83.6%;
        top: 33%;
        left: 9%;
    }

    .b4-3 {
        width: 84.5%;
        top: 48%;
        left: 6%;
    }

    .b4-4 {
        width: 85.1%;
        top: 64.5%;
        left: 6%;
    }

    .b4-5 {
        width: 70.8%;
        top: 77.5%;
        left: 20.5%;
    }

    .b4-6 {
        width: 77.3%;
        top: 19.8%;
        left: 9.5%;
        pointer-events: none;
    }

    @media (max-width:568px) {
        .b4-obj {
            filter: drop-shadow(8px 8px 1px rgb(254, 104, 104, 0.6));
        }
    }

    /* 收合按鈕 */

    .openBtn {
        cursor: pointer;
        position: absolute;
    }

    .openBtn:hover {
        opacity: 0.9;
        transform: translateY(10px);
    }


    .thing09 {
        bottom: 0%;
        left: 8%;
        width: 78%;
    }

    .thing10 {
        bottom: -5%;
        left: 14.5%;
        width: 82%;
    }

    .thing11 {
        width: 27%;
        bottom: 4%;
        left: 12%;
        filter: drop-shadow(10px 15px 1px rgba(254, 103, 103))
    }

    .thing12 {
        width: 25%;
        bottom: 4%;
        left: 42%;
        filter: drop-shadow(10px 15px 1px rgba(254, 103, 103));
        animation-delay: 1.25s;
    }

    .thing13 {
        width: 26%;
        bottom: 4%;
        left: 69%;
        filter: drop-shadow(10px 15px 1px rgba(254, 103, 103));
        animation-delay: 2.5s;
    }

    @media (max-width:568px) {
        .thing11 {
            filter: drop-shadow(6px 6px 1px rgba(254, 103, 103))
        }

        .thing12 {
            filter: drop-shadow(6px 6px 1px rgba(254, 103, 103));
        }

        .thing13 {
            filter: drop-shadow(6px 6px 1px rgba(254, 103, 103));
        }
    }

    .thing14 {
        bottom: 3%;
        left: 4%;
        width: 30%;
        z-index: 1;
    }

    .thing15 {
        bottom: 3%;
        left: 4%;
        width: 30%;
        z-index: 1;
    }

    .thing16 {
        bottom: 4%;
        left: 17.5%;
        width: 23%;
    }

    .thing17 {
        bottom: 4%;
        right: 17%;
        width: 41%;
    }

    /* offer */

    .btn01 {
        width: 74%;
        left: 13%;
        bottom: 5%;
    }

    .btn02 {
        width: 74%;
        left: 15%;
        bottom: 7%;
    }

    .btn03 {
        width: 74%;
        left: 15%;
        bottom: 5%;
    }

    .btn04 {
        width: 74%;
        left: 15%;
        bottom: 10%;
    }

    .btn05 {
        width: 74%;
        left: 15%;
        bottom: 13%;
    }

    /* KOL輪播 */

    .KOLmove {
        animation: KOLmove 20s infinite linear;
    }

    @keyframes KOLmove {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .d-flex {
        display: flex;
    }

    .two {
        position: absolute;
        top: 0;
        right: 0%;
        transform: translateX(100%);
        animation-delay: 10s;
    }

    .absolute.control {
        position: absolute;
        width: 100% !important;
        max-width: 1920px;
        top: 36% !important;
        left: 0;
        transform: translateY(-50%);
    }

    .sliderControl {
        display: flex;
        flex-direction: row;
        width: 800% !important;
        /* 扩展宽度以包含所有图片 */
        max-width: 9000px;
        animation: slide 50s linear infinite;
        /* 20秒内完成一次循环，线性运动，无限次 */
    }


    .sliderControl li {
        width: 25% !important;
        /* 根据图片数量调整宽度，10张图片则设置为10% */
    }

    .sliderControl li img {
        width: 100% !important;
        /* 让图片占满li容器 */
        height: auto;
        /* 维持图片的纵横比 */
    }

    @keyframes slide {
        0% {
            transform: translateX(0%);
        }

        100% {
            transform: translateX(-50%);
            /* 移动50%宽度，即滑动到原始图片列表的末尾 */
        }
    }

    .fb {
        position: absolute;
        width: 5%;
        top: 10%;
        left: 46.5%;
        transform: translateX(-50%);
    }

    .bounce {
        animation: bounce 2s infinite ease-in-out;
    }

    @keyframes bounce {
        0% {
            transform: scale(1, 1) translate3d(0, 0, 0);
        }

        10% {
            transform: scale(1.05, .95) translate3d(0, 0, 0);
        }

        30% {
            transform: scale(.95, 1.05) translate3d(0, -8%, 0);
        }

        50% {
            transform: scale(1.02, .97) translate3d(0, 0, 0);
        }

        57% {
            transform: scale(1, 1) translate3d(0, -2%, 0);
        }

        64% {
            transform: scale(1, 1) translate3d(0, 0, 0);
        }

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