@charset "utf-8";



/*----螢幕寬度小於1162px時----*/
/*---------------------------*/
@media screen and (max-width: 1162px){
    .theme-murmur {right: 18%;}

}

/*----螢幕寬度小於1560px時----*/
/*---------------------------*/
@media screen and (max-width: 1560px){
    .btnTop-Wrap{
        right: 75px;
    }
}

/*----螢幕寬度小於於960px時----*/
/*---------------------------*/
@media screen and (max-width: 960px){
    .theme-wrap {
        & .theme {
            span.theme-gift {
                top: 16%;
                left: 50%;
            }
        }
    }

    .theme-wrap {
        & .theme {
            span.theme-Medal {
                width: 48%;
                left: 52%;
                top: 0%;}
            }
        }

    .theme-date {
        left: 8%;
    }        
}


/*----螢幕寬度小於於855px時----*/
/*---------------------------*/
@media screen and (max-width: 855px){
    footer{text-align: left;}
    footer .announce{text-align: left;}
}

/*----螢幕寬度小於於750px時----*/
/*---------------------------*/
@media screen and (max-width: 750px){
    .theme-wrap {
        .theme {
            span.theme-Medal {
                width: 50%;
                left: 50%;
                top: -6%;
            }
        }
    }

    .theme-date {
        left: 4%;
        top: -40%;}

    .theme-wrap {
        .theme {
            span.theme-woman {
                top: 45%;
                left: 75%;
            }
        }
    }
}


/*----螢幕寬度小於於720px時----*/
/*---------------------------*/
@media screen and (max-width: 720px){
    .product-wrap{
        overflow: scroll;
        div{
            display: flex;
            justify-content: left;
            align-items: center;
            flex-wrap: nowrap;
            padding: 8px 0 40px;

            div{
                width: 100%;
                max-width: initial;
                margin: initial;}

        }
    }

    .product-wrap.product2{
            div{
                width: 100%;
                div{
                    max-width: initial;}
        }       
    }

    .remider{ display: inline-block;}
    .product-wrap{
        .swiper-pagination{
            display:block;
            margin: 0 auto;
            padding: 10px 0 0;
            bottom: 0px;

            .swiper-pagination-bullet{
                width: 12px;
                height: 12px;
                margin: 0 10px;}
        }
    }

    :root {
        --swiper-theme-color: #dab40a; 
    }        

}


/*----螢幕寬度小於於700px時----*/
/*---------------------------*/
@media screen and (max-width: 700px){
    .gifts-wrap {
        flex-direction: column;
    }
}


/*----螢幕寬度小於於630px時----*/
/*---------------------------*/
@media screen and (max-width: 630px){

    .menu-wrap{
        position: fixed;
        transform: initial;
        right: initial;
        top: initial;
        bottom:  0;
        left: 0;
        width: 100%;
        justify-content: space-evenly;
        max-width: initial;
        background: linear-gradient(180deg, rgba(255, 217, 2, 0.9) 0%, rgba(165, 114, 4, 1) 100%);
        will-change: transform;
        margin: 0;
        height: 80px;

        > li{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            line-height: 1.2em;
            background: linear-gradient(-180deg, rgba(255, 230, 175, 0.1) 5%, rgba(255, 217, 2, 0.2) 100%);
            height: 100%;
            margin: 1px;
        }
        > li:nth-of-type(4){
            background: linear-gradient(-180deg, rgb(224, 166, 5) 10%, rgba(255, 226, 164, 0) 100%);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        > li::after{
            content: '';
            position: absolute;
            display: inline-block;
            width: 8px;
            height: 18px;
            background: #fff;
            left: 50%;
            top: calc(-5% - 1px);
            transform: translate(-50%, -50%);
            border-radius: 20px;
        }
    }
    
    .menu-wrap::after{
        content: '';
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: -40px;
        width: 100%;
        background: inherit;
        height: 40px;
}

    footer{margin-bottom: 80px;}
    .section-btnTop{bottom: 21%;}

    .scroll-btn {
        position: fixed;
        bottom: 12%;
        font-size: 1.4em;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){

    .theme-shine{
        img{
            display: inline-block;
            position: absolute;
            width: 120%;
            height: 100%;}
        
        img:nth-of-type(2),
        img:nth-of-type(3){
            display: none;
        }
      }    

    /*footer*/
    footer {text-align: left;}
    footer .announce{text-align: left;} 

    .rightBN{width: 120px;}
    .btnTop-Wrap {right: 55px;}

}


/*----螢幕寬度小於於590px時----*/
/*---------------------------*/
@media screen and (max-width: 590px){
    .theme-wrap {
        .theme {
            span.theme-Medal {
                width: 55%;
                left: 50%;
                top: -25%;
            }
        }
    }

    .theme-date {
        max-width: 120px;
        top: -60%;
    }

    .theme-murmur {
        right: 18%;
    }

}


/*----螢幕寬度小於於500px時----*/
/*---------------------------*/
@media screen and (max-width: 500px){
    .theme-wrap {
        .theme {
            span.theme-Medal {
                width: 65%;
                left: 50%;
                top: -50%;
            }
        }
    }

    .theme-wrap {
        .theme {
        span.theme-woman {
            width: 60%;
            top: 30%;
            left: 60%;}
        }
    }

    .theme-murmur {
        right: -7%;
        top: 12%;
    }

    .theme-date {
        max-width: 120px;
        top: -6%;
        left: 10%;;}


    .theme-wrap {
        .theme {
            span.theme-gift {
                    top: 20%;
                    left: 50%;}
            }
        }        
}




/*----螢幕寬度小於於470px時----*/
/*---------------------------*/
@media screen and (max-width: 470px){
    .scroll-btn {         
        font-size: 1.1em;}

}


/*----螢幕寬度小於於432px時----*/
/*---------------------------*/
@media screen and (max-width: 440px){

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

    .modal__code {
        flex-direction: column;
    }    
}


/*----螢幕寬度小於於429px時----*/
/*---------------------------*/
@media screen and (max-width: 429px){
    .menu-wrap {
        > li::after {
            top: calc(-12% - 1px);
        }
    }
}


/*----螢幕寬度小於於400px時----*/
/*---------------------------*/
@media screen and (max-width: 400px){
    .theme-date {
        max-width: 90px;
        top: -6%;}

    .theme-wrap {
        .theme {
            span.theme-gift {
                top: 15%;
                left: 50%;
            }
        }
    }

    .theme-wrap {
        .theme {
            span.theme-Medal {
                width: 70%;
                left: 50%;
                top: -70%;
            }
        }
    }

    .theme-wrap {
        .theme {
            span.theme-woman {
                width: 60%;
                top: 20%;
                left: 62%;
            }
        }
    }    
}

/*----螢幕寬度小於於380px時----*/
/*---------------------------*/
@media screen and (max-width: 380px){
    footer{margin-bottom: 80px;}
    .section-btnTop{bottom: 22%;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .rightBN-wrap {top: -50px;}
    .rightBN-wrap a{width: 80px;}
}