@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');

/* body scroll x locked */
body{
    width: 100%;
    height: 100%;
    overflow-x: hidden; 
}
/* web ver */
/* header design */

/* header color */
.redheader {
    background-color: #EC3C2C;
    box-shadow: 0px 5px 15px 0px rgba(84, 28, 4, 0.38);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(84, 28, 4, 0.38);
    -moz-box-shadow: 0px 5px 15px 0px rgba(84, 28, 4, 0.38);

    max-width: 100vw;
}

/* nav_button and nav_logo margin */
#navButton {
    height: 117px;
    margin-right: 50px;

    font-family: "Rammetto One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}

#navLogo {
    margin-left: 40px;
}

/* 第一個按鈕邊緣為0 */
#navButton>:first-child {
    margin: 0;
}

/* nav_button */
#navButton button {
    color: white;
    background-color: rgba(0, 0, 0, 0);
    border: 0px;
    text-align: center;
    margin-inline-start: 60px;

}

/* nav_button hover*/
#navButton button:hover {
    box-shadow: 0 5px;
    padding-bottom: 0px;
}

/* web.ver1 navbar hidden */
/* rwd */
@media (max-width:780px) {
    .hide\@\<780 {
        display: hidden;
    }
}





/* mobile ver navbar */
/* header design */
/* hamburger bar button*/
.navbar-toggler {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid;
    border-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;

}

/* 漢堡菜單鼠標滑行方框效果 */
.navbar-toggler:hover {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7500%) hue-rotate(246deg) brightness(101%) contrast(103%);

    border-color: white;
    border: 5px solid;

}

/* 漢堡菜單裡的按鈕文字 */
.offcanvasbodybutton {
    font-family: "Rammetto One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;


}

/* 漢堡菜單裡的按紐樣式 */
.offcanvasbodybutton button {
    background-color: #EC3C2C;
    /* width: 380px; */
    height: 100px;
    color: white;
    padding: 30px;
    border: 0px;
}

/* 漢堡菜單按鈕鼠標滑行效果 */
.offcanvasbodybutton button:hover {
    background-color: white;

    color: #EC3C2C;
    padding: 30px;
}

/* section-1 卡片區 */
/* new menu新菜單卡片設計 */



#title {
    font-family: "Rammetto One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 6vmin;
    color: #EC3C2C;
    padding-top: 80px;


}

#container {
    height: 80vh;
    display: grid;
    place-items: center;

}

#slider-container {
    height: 400px;
    
    width: 90vw;
    max-width: 1400px;
    position: relative;
    overflow: hidden;
    padding: 20px;


}

/* newmenu slider button */
#slider-container .btn {
    width: 0;
    height: 0;
    /* border-top: 25px solid transparent; */
    /* border-right: 50px solid #555;
	border-bottom: 25px solid transparent; */
    position: absolute;
    top: calc(50% - 30px);
    border: 0px;
    transform: scale(0.5);

}

#slide_right {
    transform: rotate(180deg);
    color: #EC3C2C;
}

#slide_left {
    transform: rotate(360deg) translateX(-50px);
    color: #EC3C2C;

}

#slide_left:hover {
    color: #E9E9E9;
}

#slide_right:hover {
    color: #E9E9E9;
}

/* #slider-container .btn.inactive {
	border-color: #282828
} */
#slider-container .btn:first-of-type {
    /* transform: rotate(-45deg); */
    left: 10px
}

#slider-container .btn:last-of-type {
    /* transform: rotate(135deg); */
    right: 10px;
}

#slider-container #slider {
    display: flex;
    width: 980%;
    height: 100%;
    transition: all .5s;
}

/* 卡片設計 */
#slider-container #slider .slide {
    height: 90%;
    margin: auto 10px;
    /* background-color: #b5b5b5; */
    border-radius: 0px;
    box-shadow: 2px 2px 4px 2px white, -2px -2px 4px 2px white;
    display: grid;
    place-items: center;
    font-family: "Noto Sans TC", sans-serif; 
    border: 5px solid;
    border-color: #EC3C2C;
    box-shadow: 7px 7px #EC3C2C !important;
    margin-left: 0px !important;
    margin-right: 27px !important;
    padding-top: 50px !important;
    
    background-color: white;
    justify-content: center;
    align-items: center;
   
    
}
/* 甜甜圈圖片 */
.slide img{
width: 200px;
}
/* 卡片文字 */
#slider-container #slider .slide span {
    font-family: "Noto Sans TC", sans-serif; 
    font-weight: 700;
    color: #782C1C;
    letter-spacing: 0.3vmin;
    font-size: 20px;
    box-shadow: 0 3px #EC3C2C;
    padding-bottom: 0.5vmin;
    margin-bottom: 6vh;
    text-align: center;
}

/* @media only screen and (min-width: 1100px) {
	#slider-container #slider .slide {
		width: calc(2.5% - 20px);
	}
}
@media only screen and (max-width: 1100px) {
	#slider-container #slider .slide {
		width: calc(3.3333333% - 20px);
	}
}
@media only screen and (max-width: 900px) {
	#slider-container #slider .slide {
		width: calc(5% - 20px);
	}
 } */
@media only screen and (max-width: 500px) {
    #slider-container #slider .slide {
        width: calc(10% - 120px);
    }
}



/* sec1-background 漸變點點*/
.sec1container {
    width: 100%;
    height: 96vh;
    position: relative;
    background-color: #fff;
    filter: contrast(7);
    --mask: linear-gradient(to top, red, rgba(0, 0, 0, 0.5));

}



.sec1container::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(#EC3C2C, transparent) 0/0.5em 0.5em space;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    content: "";

}

/* 圖片恢復正常濾鏡 */

#container>div {
    filter: contrast(15%);
}


/* section2-sticker */
/* animation bar1 */

#st1 {
    visibility: hidden;
    transform: translateY(-1200px)translateX(10px) rotate(10deg);
    scale: 1.05;

}

.sticker1 {
    scale: 1.05;
    animation-name: st1;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
    /* animation-iteration-count:infinite; */
    animation-delay: 0s;
    animation-fill-mode: forwards;

}

@keyframes st1 {
    0% {
        transform: translateY(-1200px)translateX(10px)rotate(10deg);
    }

    90% {
        transform: translateY(10px)translateX(5px)rotate(8deg);
    }

    95% {
        transform: translateY(16px)translateX(0px)rotate(3deg);
    }

    100% {
        transform: translateY(18px)translateX(6px)rotate(8deg);
    }

}

/* animation bar1 */
#st2 {
    visibility: hidden;
    transform: translateY(-1600px) rotate(-5deg)translateX(3px);
    scale: 1.05;
}

.sticker2 {
    scale: 1.05;
    animation-name: st2;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    /* animation-iteration-count:infinite; */
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes st2 {
    0% {
        transform: translateY(-1600px) rotate(-10deg)translateX(3px);
    }

    90% {
        transform: translateY(-60px) rotate(3deg)translateX(5px);
    }

    95% {
        transform: translateY(-56px) rotate(5deg)translateX(3px);
    }

    100% {
        transform: translateY(-80px) rotate(-3deg)translateX(3px);
    }

}

/* section2-Best menu */
/* section-2 卡片區 */
/* Best menu卡片設計 */





#slider-container2 #slider2 .slide {
    height: 90%;
    margin: auto 10px;
    /* background-color: #b5b5b5; */
    border-radius: 0px;
    box-shadow: 2px 2px 4px 2px white, -2px -2px 4px 2px white;
    display: grid;
    place-items: center;
    font-family: "Noto Sans TC", sans-serif; 
    border: 5px solid;
    border-color: #EC3C2C;
    box-shadow: 7px 7px #EC3C2C !important;
    margin-left: 0px !important;
    margin-right: 27px !important;
    padding-top: 50px !important;
    
    background-color: white;
    justify-content: center;
    align-items: center;
   
    
}

#title2 {
    font-family: "Rammetto One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 6vmin;
    color: #EC3C2C;
    padding-top: 80px;


}

#container2 {
    height: 80vh;
    display: grid;
    place-items: center;

}

#slider-container2 {
    height: 400px;
    width: 90vw;
    max-width: 1400px;
    position: relative;
    overflow: hidden;
    padding: 20px;


}

/*  slider2 button */
#slider-container2 .btn {
    width: 0;
    height: 0;
    /* border-top: 25px solid transparent; */
    /* border-right: 50px solid #555;
	border-bottom: 25px solid transparent; */
    position: absolute;
    top: calc(50% - 30px);
    border: 0px;
    transform: scale(0.5);

}

#slide_right2 {
    transform: rotate(180deg);
    color: #EC3C2C;
}

#slide_left2 {
    transform: rotate(360deg) translateX(-50px);
    color: #EC3C2C;

}

#slide_left2:hover {
    color: #E9E9E9;
}

#slide_right2:hover {
    color: #E9E9E9;
}

/* #slider-container .btn.inactive {
	border-color: #282828
} */
#slider-container2 .btn:first-of-type {
    /* transform: rotate(-45deg); */
    left: 10px
}

#slider-container2 .btn:last-of-type {
    /* transform: rotate(135deg); */
    right: 10px;
}

#slider-container2 #slider2 {
    display: flex;
    width: 980%;
    height: 100%;
    transition: all .5s;
}

/* #slider-container2 #slider2 .slide {
    height: 90%;
    margin: auto 10px;
    background-color: #b5b5b5;
    border-radius: 0px;
    box-shadow: 2px 2px 4px 2px white, -2px -2px 4px 2px white;
    display: grid;
    place-items: center;
} */


#slider-container2 #slider2 .slide span {
    font-family: "Noto Sans TC", sans-serif; 
    font-weight: 700;
    color: #782C1C;
    letter-spacing: 0.3vmin;
    font-size: 20px;
    box-shadow: 0 3px #EC3C2C;
    padding-bottom: 0.5vmin;
    margin-bottom: 6vh;
    text-align: center;
}

/* @media only screen and (min-width: 1100px) {
	#slider-container #slider .slide {
		width: calc(2.5% - 20px);
	}
}
@media only screen and (max-width: 1100px) {
	#slider-container #slider .slide {
		width: calc(3.3333333% - 20px);
	}
}
@media only screen and (max-width: 900px) {
	#slider-container #slider .slide {
		width: calc(5% - 20px);
	}
 } */
@media only screen and (max-width: 500px) {
    #slider-container2 #slider2 .slide {
        width: calc(10% - 120px);
    }
}

/* section3bar 動態 */

#st3 {
    animation-name: st3move;
    animation-duration: 13s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-delay: 0.2s; */
    /* animation-fill-mode: backwards; */
}

@keyframes st3move{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
    
}
#st4 {
    animation-name: st4move;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-delay: 0.2s; */
    /* animation-fill-mode: backwards; */
}

@keyframes st4move{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
    
}
/* section3 event */
.eventcard{
    border: 5px solid;
    border-color: #EC3C2C;
    box-shadow: 7px 7px #EC3C2C ;
    width: 50vmin;
    height: 35vmin;
    margin: 15px;
    overflow: hidden;
    transition: 0.1s ease-in-out;
}
.eventcard:hover{
    transform: translate(-5px ,-5px);
    box-shadow: 12px 12px #EC3C2C ;
}
/* #eventcard>img:hover{
    opacity: 0.5;
} */
.pic1:hover::before{
    content:"波提獅限量盲盒開賣";
    background-color:rgba(236, 60, 44, 0.5);;
    z-index: 1;
    position: absolute;
    transform: translate(-50% ,-50%);
    top:50%;
    left: 50%;
    width: 100%;
    height: 100%;
    align-content: center;
    font-family: "Noto Sans TC", sans-serif; 
    color: #fff;
    font-size: 2.5vmin;
}
.pic2:hover::before{
    content:"寶可夢甜甜圈甜蜜上市";
    background-color:rgba(236, 60, 44, 0.5);;
    z-index: 1;
    position: absolute;
    transform: translate(-50% ,-50%);
    top:50%;
    left: 50%;
    width: 100%;
    height: 100%;
    align-content: center;
    font-family: "Noto Sans TC", sans-serif; 
    color: #fff;
    font-size: 2.5vmin;
}
.pic3:hover::before{
    content:"來店消費滿500就送寶可夢甜甜圈";
    background-color:rgba(236, 60, 44, 0.5);;
    z-index: 1;
    position: absolute;
    transform: translate(-50% ,-50%);
    top:50%;
    left: 50%;
    width: 100%;
    height: 100%;
    align-content: center;
    font-family: "Noto Sans TC", sans-serif; 
    color: #fff;
    font-size: 2.5vmin;
}



    

/* footer */
#fcontainer{
  line-height: 1.5;
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
  background-color: #EC3C2C;
}
.footercontent{
    color: white;
    margin-top: 3vmin;
    height: 15vh;
    
}
.footericon{
    margin-right: 10px;
    margin-left: 10px;
    scale:1.6 ;
}
.footercontent p{
    font-family: "Noto Sans TC", sans-serif;
    font-size: 13px;
    
}
.footercontent h5{
    margin-bottom:2vmin ;
    
}

.footercontent svg:hover{
 opacity:0.8 ;
}
/* 圖片 */

/* new menu 獅子 */
#lion{
    position: absolute;
    width: 30vmin;
    transform: rotate(15deg) translateX(0);
    margin-left: -47vmin;
    margin-top: -12vmin;
   
    
}

/* lion move */
.lion {
    
    animation-name: lionmove;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    
   
    animation-fill-mode: forwards;
}

@keyframes lionmove {
    0% {
        transform: rotate(15deg) translateX(0px);
    }
    100% {
        transform: rotate(-13deg) translateX(-10px);
    }

}


#lionconta{
    position: relative;
    
   
}


/* best menu 大象*/
#elephant{
    position: absolute;
    width: 35vmin;
    margin-left: 21vmin;
    margin-top: -10vmin;
    transform: rotate(-40deg) translateX(0px);
   
    
}
/* elephant move */
.elephant{
    
    animation-name: elephantmove;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    
   
    animation-fill-mode: forwards;
}

@keyframes elephantmove {
    0% {
        transform: rotate(-40deg) translateX(0px);
    }
    100% {
        transform: rotate(10deg) translateX(-5px);
    }

}



#elephantcon{
    position: relative;
    
}
/* event 松鼠*/
#squirrel{
    position: absolute;
    width: 32vmin;
    margin-left: 25vmin;
    margin-top: -13vmin;
    transform: rotate(8deg);
   
    
}
/* elephant move */
.squirrel{
    
    animation-name: squirrelmove;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    
   
    animation-fill-mode: forwards;
}

@keyframes squirrelmove {
    0% {
        transform: rotate(8deg) translateX(0px);
    }
    100% {
        transform: rotate(-15deg) translateX(-6px);
    }

}

#squirrelcon{
    position: relative;
    
}