@charset "utf-8";

/*--CSS Document --*/

/*--google字型 --*/

@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+TC:wght@500;600;800&display=swap");
@font-face {
    /*--處理中文難字問題 --*/
    font-family: 'tcav';
    src: url('fonts/mingliu.ttf') format('truetype');
}

* {
    font-family: 'Noto Sans TC';
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: 0.8s;
    color: #535353;
    outline: none;
    font-size: 16px;
}


/*-----------------*/
/*-- 隱藏input數字預設輸入上下箭頭調整功能 --*/
/*-----------------*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

img {
    border: 0;
}

a:link,
a:checked,
a:visited {
    color: #bb8104;
    text-decoration: none;
}


/*-----------------*/
/*-- 預載Loading --*/
/*-----------------*/

.loader {
    position: fixed;
    display: inline-block;
    height: 100vh;
    width: 100%;
    background: rgba(255, 255, 255, 0.8) url(../images/loading.svg) center no-repeat;
    background-size: 25%;
    z-index: 2;
    top: 0;
    left: 0;
}


/*-----------------*/
/*---- header -----*/
/*-----------------*/

header {
    width: 100%;
    height: 70px;
    background: #007c7c;
    position: sticky;
    top: 0;
    z-index: 99;
}

.header-wrap {
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 15px 2%;
    max-width: 1200px;
}

.logo-wrap {
    display: inline-block;
    position: relative;
    width: auto;
    text-align: left;
    height: 70px;
    line-height: 4px;
    z-index: 1;
    color: #fff;
    font-size: 22px;
}

.logo-wrap img {
    height: 80%;
    vertical-align: middle;
    margin: 4% 0;
}

body {
    background: #faede1;
}


/*-- 選單 --*/

.menu-wrap {
    display: flex;
    position: absolute;
    width: 100%;
    max-width: 500px;
    align-items: center;
    justify-content: space-evenly;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    padding: 8px;
    font-size: 1rem;

    li {
        display: inline-block;
        flex: 1;
        max-width: 150px;
        font-size: clamp(0.8rem, 1.1em, 1.3em);
        padding: 8px;
        color: #fff;
        cursor: pointer;
        border-top: 0px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 0px solid transparent;
        border-left: 0px solid transparent;
    }

    li:hover,
    li:active {
        color: #ffff00;
        animation: border-ani 1s ease infinite;
    }
}

.menu-wrap > li > span.w-break {
    display: none;
}

@keyframes border-ani {
    0% {
        border: 0px solid transparent;
    }
    15% {
        border-top: 2px solid #ffff00;
    }
    30% {
        border-right: 2px solid #ffff00;
    }
    45% {
        border-bottom: 2px solid #ffff00;
    }
    60% {
        border-left: 2px solid #ffff00;
    }
    100% {
        border-top: 0px solid transparent;
    }
}


/*-----------------*/
/*--- 主內容區 -----*/
/*-----------------*/
/*======START======*/

.container {
    display: inline-block;
    width: 100%;
    background-size: auto;
    font-size: 1rem;
    overflow: hidden;}


/*-- 主視覺 --*/
.theme-wrap {
        position: relative;
        width: 100%;
        height: 100vh; /* 強制滿版高度 */
        background: #faede1 url(../images/theme-bg.png) top -50px center no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-top: 40px;

        .theme{
            display: inline-block;
            width: 100%;
            max-width: 1200px;
            padding: 20px 2%;

            > img{
                display: inline-block;
                width: 100%;}

            span{
                display: inline-block;
                position: absolute;
                width: 100%;
                max-width: 900px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                img{
                    display: inline-block;
                    width:100%;}
            }
            
            span.theme-woman{
                width: 55%;
                max-width: 532px;
                top: 60%;
                left: 82%;
            }

            span.theme-Medal{
                width: 40%;
                max-width: 532px;
                left: 52%;
                top: 12%;
                transform: translate(-50%, -50%);

                h1{
                    position: absolute;
                    font-size: 2em;
                    color: transparent;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }  

            span.theme-gift{
                top: 8%;
                left: 40%;

                img{
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                img:nth-of-type(2){
                    animation: gift-floating 2s ease-in-out infinite;
                }
                
                img:nth-of-type(3){
                    animation: gift-floating 2s ease-in-out infinite;
                    animation-delay: 0.2s;
                }

                img:nth-of-type(4){
                    animation: gift-floating 2s ease-in-out infinite;
                    animation-delay: 0.4s;
                }
            }
        }

        .theme-shine{
            position: absolute;
            width: 100%;
            height: 100vh;
            display: inline-block;
            right: 0;
            top: 0;
            pointer-events: none;

            img{
                display: inline-block;
                position: absolute;
                height: 120%;
                right: 0;
                top: -10px;
                animation: shine-ani 3s ease-in-out infinite;}

            img:nth-of-type(2){ right: 10%;}
            img:nth-of-type(3){
                left: 10%;
                right: initial;
                animation: shine-ani2 3.2s ease-in-out infinite;               
            }           
            
            img:nth-of-type(4){
                left: 0;
                right: initial;
                animation: shine-ani2 3.2s ease-in-out infinite;
            }
        }
    }

    @keyframes gift-floating {
        0%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-15px);
        }
        100%{
            transform: translateY(0);
        }
    }

    @keyframes shine-ani {
        0%{
            transform: rotate(20deg);
            transform-origin: top right;
        }
        50%{
            transform: rotate(0deg);
            transform-origin: top right;
        }
        100%{
            transform: rotate(20deg);
            transform-origin: top right;
        }
    }

    @keyframes shine-ani2 {
        0%{
            transform: rotate(-20deg);
            transform-origin: top left;
            
        }
        50%{
            transform: rotate(0deg);
            transform-origin: top left;
        }
        100%{
            transform: rotate(-20deg);
            transform-origin: top left;
        }
    }

.theme-date{
    display: inline-block;
    position: absolute;
    width:25% ;
    max-width: 150px;
    left: 15%;
    top: -10%;}

.theme-murmur{
    display: inline-block;
    position: absolute;
    width:37.65% !important ;
    max-width: 212px;
    right: 10%;
    top: -16%;}


/*-- 向下滾動提示按鈕 --*/
.scroll-btn {
  position: fixed;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6em;
  background: linear-gradient(135deg, rgba(255, 217, 2, 0.5) 0%, rgba(165, 114, 4, 0.8) 50%);
  color: #fff;
  border: none;
  border-radius: 40px;
  width: auto;
  padding: 10px 25px;
  cursor: pointer;
  animation: bounce 1.5s ease-in-out infinite;
  transition: opacity 200ms ease, visibility 200ms ease;
  z-index: 9999;
}

/* 隱藏狀態（淡出 + 不占點擊） */
.scroll-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}


    
/*-- 共用區塊設定 --*/
.card-wrap{
    display: inline-block;
    width: 100%;
    padding: 0 2%;

    .card{
        display: inline-block;
        width: 100%;
        max-width: 1200px;
        padding: 32px 0px;

        h2{
            display: inline-block;
            width: 100%;
            color: #faede1;
            margin: 40px 0 0px;
            z-index: 1;
            
            .title{
                position: absolute;
                display: inline-block;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
    
                img{
                    display: inline-block;
                    width: 100%;
                    max-width: 470px;
                }
            }
        }
    }
}


/*-- 獎品內容區 --*/
.gifts-wrap{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 32px 0 8px;
    padding: 20px;
    background: #fff;

    div{
        display: inline-block;
        width: 100%;
        flex: 1;

        span{
            display: inline-block;
            width: 100%;
            max-width: 490px;
            overflow: hidden;

            img{
                display: inline-block;
                width: 100%;}

            > span{
                display: inline-block;
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
    
                > img{
                    display: inline-block;
                    width: 100%;
                }
            }
        }        

        > span:hover,
        > span:active{
            transform: translateY(-20px);
        }
    }

    div:nth-of-type(2){
        span{
            span:nth-of-type(1){
                img{
                    animation-delay: 0.2s;
                }
            }
        }  
    }

}

.gift-cho{
    animation: cho-ani 1s ease infinite;}
    @keyframes cho-ani {
        0%{ transform: translateX(-50%) scale(1);}
        50%{ transform: translateX(-50%) scale(1.05);}
        100%{ transform: translateX(-50%) scale(1);}
    }



/*-- CTA按紐 --*/
.btn-cta{
    display: inline-block;
    position: absolute;
    width: 55%;
    max-width: 225px;
    top: 102%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;

    img{
        display: inline-block;
        width: 100%;}
}

.product-wrap .btn-cta{
    max-width: 155px;
    top: 95%;
    left: 50%;
    transform: translate(-50%,-50%);
}
    
.product-wrap .btn-cta:hover{
    transform: translate(-50%,-70%);}
    
.product-wrap{
    .swiper-pagination{
        display: none;
    }
}

/* Modal */
.modal {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background: rgba(0,0,0,.4);
    z-index: 9999;}

.modal[hidden] { display: none; } /* 用 hidden 控制顯示 */
.modal__dialog {
    width: min(520px, 90vw);
    background: #d9ff80; border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    padding: 20px 18px;}

.modal__dialog h3 { 
    color: #ff0943;
    margin: 0 0 12px; 
    font-size: 2rem;}
    
.modal__code {
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px;
    margin: 10px 0 16px; 
    padding: 10px;
    background: #fff;
    border-radius: 8px;}

.modal__code > div {
    display: inline-block;
    font-size: 1.4em;

    > strong{
        color: #ff0943;
        font-size: 1.4em;
    }
}

.modal__copy-again {
    border: none; 
    background: #ffedd0; 
    color: #c76e00;
    padding: 6px 10px; 
    border-radius: 6px; 
    cursor: pointer;
    display: none;}

.modal__actions { display: flex; 
    gap: 10px; 
    justify-content: center; }

.btn-primary {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: initial;
    top: initial;
    left: initial;}

.btn-secondary {
    background: #eef2f7; 
    color: #333; 
    border: 1px solid #d8dde5;
    padding: 10px 16px; 
    border-radius: 8px; 
    cursor: pointer;}


/*-- 人氣商品 --*/
.product-wrap{
    display: inline-block;
    width: 100%;
    max-width: 1200px;
    padding: 2% 0;
    margin-top: 16px;

    div{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        > div {
            display: inline-block;
            width: auto;
            max-width: 305px;
            margin: 2%;
            box-sizing: border-box;

            img{
                display: block;
                width: 100%;
                height: auto;
            }
        }
    
        > div:hover > img,
        > div:active > img{
            animation: product-ani 1s ease-in-out infinite;}
    
        > div::after{
            content: '';
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50% , -50%);
            background: url(../images/deco-product-stars.png) center no-repeat;
            background-size: contain;
            width: 120%;
            max-width: 370px;
            height: 117px;
            pointer-events: none;}
    
        > div:nth-of-type(odd)::after{
            top: 20%;}
    }
}

@keyframes product-ani{
    0%{
        box-shadow:  0px 30px 40px -10px rgba(255, 255, 255, 0.4);
        transform: translateY(-8px);
    }
    50%{
        box-shadow:  0px 30px 40px -10px rgba(255, 255, 255, 0.8);
        transform: translateY(0px);
    }
    100%{
        box-shadow:  0px 30px 40px -10px rgba(255, 255, 255, 0.4);
        transform: translateY(-8px);
    }
}

.product-bg{
    display: inline-block;
    position: absolute;
    width: 200%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ffddbe;}


.card-wrap.product{
    overflow: hidden;
    .card{
        h2{
            color: #ffddbe;
        }
    }
}

.product-wrap.product2{
    max-width: 1300px;

    div{
        > div{
            max-width: 355px;}
    
        > div::after{
                content: none;
        }
    }
}


.card-wrap.product {
    .card:nth-of-type(1){
        padding: 32px 0 0;
    }
    .card:nth-of-type(2){
        padding: 8px 0;
    }
}


/* 手機版提示窗*/
.remider{
    display: inline-block;
    position: relative;
    width: auto;
    margin: 5px 0;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    top: 36px;
    animation: remider-ani 1s ease infinite;
    display:none;}
    @keyframes remider-ani{
        0%{ transform: translateX(5px);}
        50%{ transform: translateX(-5px);}
        100%{ transform: translateX(5px);}
    }



/*-- 活動辦法 --*/

.card-wrap.rules{
    .card{
        padding: 0 0 48px;

        h2{
            margin-bottom: 40px;
        }
    }
}


/* 1) 隱藏原生 marker */
summary{ list-style: none; }
summary::marker { content: ""; }
summary::-webkit-details-marker { display: none; }

/* 2) 用 Flex 讓文字與自訂圖示垂直置中 */
summary{
  display: flex;
  width: 100%;
  align-items: center;   /* 垂直置中 */
  gap: 8px;              /* 圖示與文字間距 */
  cursor: pointer;
}

/* 3) 自訂「箭頭」圖示，位置在左側 */
summary::before {
  content: "▲";
  display: inline-block; /* 可設定寬高 */
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;      /* 讓符號在盒子中垂直置中 */
  text-align: center;    /* 讓符號水平置中 */
  font-size: 30px;
  color: #333;
  bottom: -30%;
  transform: translateY(-50%);
  transition: linear 0.5s;
  z-index: 1;}

/* 展開時切換成下箭頭 */
details[open] summary::before {
  transform: translateY(-60%) rotate(180deg);
  transition: linear 0.5s;
}


.box-content{
    display: inline-block;
    width: 100%;
    padding: 20px 4%;
    background: #Ffff;
    border-radius: 20px;

    > h2{
        color: initial !important;
        text-align: left;
        font-size: 1.2em;}

    > h3{ text-align: left;
        font-size: 1.1em;}

    ul, ol {
        padding: 10px 10px 10px 40px;

        li{
            text-align: left;
            word-break: break-all;

            > span{
                display: inline-block;
                color: #ff0943;
                text-align: left;
            }
        }

        > span{
            display: inline-block;
            width: 100%;
            text-align: left;
            color: #ff0943;
        }
    }
}

/*-- 裝飾 --*/
.deco-ribbon1{
    position: absolute;
    display: inline-block;
    width: 21.6%;
    max-width: 130px;
    height: 90px;
    background: url(../images/deco-ribbon1.png) top center no-repeat;
    background-size: contain;
    top: -3px;
    right: -15px;
    z-index: 1;
    pointer-events: none;}

.deco-ribbon2{
    position: absolute;
    display: inline-block;
    width: 28%;
    max-width: 168px;
    height: 74px;
    background: url(../images/deco-ribbon2.png) bottom center no-repeat;
    background-size: contain;
    bottom: -10px;
    left: -15px;
    z-index: 1;
    pointer-events: none;}


.deco-ribbon2.style2{
    left: initial;
    right: -15px;}

.deco-ribbon1.style2{
    top: initial;
    right: initial;
    bottom: -3px;
    left: -15px;}



/*-----------------*/
/*---右側浮動BN-----*/
/*-----------------*/

.rightBN-wrap {
    display: inline-block;
    position: absolute;
    width: 121px;
    height: 164px;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
}

.rightBN {
    display: inline-block;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 121px;
    height: 64px;
    cursor: pointer;
    animation: rightBNShake-ani 1s ease-in-out infinite;
}


/* rightBNShake-ani */
@keyframes rightBNShake-ani {
    0% {
        transform: translateX(-50%)scale(1);
    }
    50% {
        transform: translateX(-50%) scale(0.9);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

.rightBN>img {
    width: 100%;
}


/*-----------------*/
/*----TO TOP ------*/
/*-----------------*/

.section-btnTop {
    display: inline-block;
    position: fixed;
    width: 100%;
    max-width: 1200px;
    height: 1px;
    margin: 0 auto;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: right;
    z-index: 999;
}

.btnTop-Wrap {
    display: inline-block;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    width: 0px;
}

.btnTop {
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 30px;
    font-weight: 600;
    padding: 5px;
    background: #ff0000;
    line-height: 50px;
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0.8);
}

.btnTop:active,
.btnTop:hover {
    color: #ff0000;
    background: #ffee00;
    box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);
}

.cno {
    text-align: right;
    width: 100%;
    background: #007c7c;
    color: #fff;
    padding: 5px 2%;
    z-index: -1;
}

footer {
    width: 100%;
    padding: 10px 2%;
    background: #fff;
    font-size: 15px;
    z-index: 1;
}

footer a {
    color: #ff0943 !important;
}


/*錨點--*/

#section1,
#section2,
#section3,
#section4 {
    top: -55px;
}