@charset "UTF-8";
/*滑動效果*/
.hvr-underline-from-left,.hvr-underline-from-center {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; }
.hvr-underline-from-center:before,.hvr-underline-from-left:before {content: ""; position: absolute; z-index: -1;  background: var(--bs-yellow);  height: 0.125em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-underline-from-center:before {left: 51%; right: 51%; bottom: 0; -webkit-transition-property: left, right; transition-property: left, right; }
.hvr-underline-from-left:before {left: 0; right: 100%; bottom: 0; -webkit-transition-property: right; transition-property: right; }
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {left: 0; right: 0; }
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {right: 0; }

/*nav 上方導覽列*/
#topNavbar .navbar-brand.middle{display:flex;justify-content: center;align-items: center;padding: 0;}
a[title$="全國電話"] .rounded-circle,a[title$="Menu-Line"] .rounded-circle,a[title$="Menu-FB"] .rounded-circle{background: linear-gradient(-45deg,#ff4e50,#f9d423)!important;width: 1.5em;height: 1.5em;display: flex;justify-content: center;align-items: end;}
a[title$="Menu-FB"] .rounded-circle{background: linear-gradient(-45deg,#0062E0,#19AFFF)!important;}
a[title$="Menu-Line"] .rounded-circle{background: linear-gradient(-45deg,#087823,#3dff20)!important;}
a[title$="各班活動"] .rounded-circle{filter:drop-shadow(0 0 0.25em rgba(0, 255, 255,0.3));}
#topNavbar {animation-name: fadeInDown; animation-duration: 0.75s; animation-fill-mode: both; }

/*footer*/
@media screen and (max-width:991px){footer .container{max-width: calc(15em * 5);}footer .store_infor{min-height: 12em;}}
footer .store_infor{max-width: 17em;width: 13em; padding: 0.5em;}
footer .store_infor h5{font-size: 1.5em;font-weight: bolder;letter-spacing: 0.125em}
footer .btn{display: inline-block;padding: 0.25em 0.5em;margin: 0.25rem 0;line-height: 1.25;}
footer .btn[title^="前往官網"]{background:black;color:white;}
footer .btn[title^="LINE"]{background: linear-gradient(-45deg,#52b72f,#8ef92e)center/200% 200%;font-weight: bolder;color: white;}
footer #OTR_address .btn{margin: 0.25em;}
footer .btn[title^="電話"],footer .btn[title^="地址"]{
    display: list-item;
    color: inherit;
    text-align: left;
    margin: 0 0 0 1.25em;
}
footer .btn[title^="地址"]{font-size: 0.7em;margin-left: 1.5em;}
footer .btn[title^="電話"]::marker,footer .btn[title^="地址"]::marker {display: inline-block; font-family: "Font Awesome 6 Pro";font-weight: 900;content: "\f8d3";font-size: 12px;}
footer .btn[title^="地址"]::marker{content: "\f3c5";}


#goTop{position: fixed;bottom: 5em;right: 1em;width: 3em;height: 3em;padding: 0.5em;z-index: 10;}
#SocialLinks .btn{font-weight: 700; border: 0;filter:drop-shadow(0 0.4em 0.5em rgba(0,0,0,001));font-size: 1.75em;}
#SocialLinks a[title*="LINE"],a[title*="line預約"]{background: -webkit-linear-gradient(35deg, #8fcc35, #62aa00);background: -o-linear-gradient(35deg, #8fcc35, #62aa00);background: linear-gradient(125deg, #8fcc35, #62aa00);color: white;text-shadow: 0 0 0.1em #00000099;}
#SocialLinks .btn.blue{background: -webkit-linear-gradient(35deg, #5c80e1, #3b60c4);background: -o-linear-gradient(35deg, #5c80e1, #3b60c4);background: linear-gradient(125deg, #5c80e1, #3b60c4);}
/*底部NAV社群連結*/
#FixedToggle section .btn{margin: 0.5em;font-size: clamp(1em, 4vw, 1.25em);}
#FBMenu .btn{background:linear-gradient(-45deg,#0062E0,#19AFFF), var(--blue);color: white;}
#LineMenu .btn{background: linear-gradient(-45deg,#087823,#3dff20),var(--lime);color: white;}
#ActMenu .btn{background: var(--dark-red);color: white;}
#telMenu .btn{background:linear-gradient(-45deg,#ff4e50,#f9d423), var(--orange);}

/*滾輪卷軸設計*/
section.offcanvas.offcanvas-bottom .offcanvas-body{
    padding: 1.5em auto;
    box-shadow: inset 0 -1em 1em rgba(0,0,0,0.3),0 -1em 1em rgba(0,0,0,0.3);

}
section.offcanvas.offcanvas-bottom .offcanvas-body::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 100%;
    background-color: rgba(var(--bs-dark-rgb),0.5);
}

section.offcanvas.offcanvas-bottom .offcanvas-body::-webkit-scrollbar
{
    width: 0.5em;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important;
}

section.offcanvas.offcanvas-bottom .offcanvas-body::-webkit-scrollbar-thumb
{
    border-radius: 1em;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background: linear-gradient(transparent,var(--bs-gray-600),transparent),var(--bs-dark);
}