/* #ffd500 */
:root{
    --bulma-warning-h: 50deg;
    --bulma-warning-l: 50%;
    --bulma-link-h: 230deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 65%;
    --bulma-black-h: 0deg;
    --bulma-black-s: 0%;
    --bulma-black-l: 10%;
    --bulma-danger-l: 60%;
}
.title {
    --bulma-title-weight: 700;
}
.title:not(.is-spaced):has(+.subtitle) {
    margin-bottom: 6px;
}
.footer{
    --bulma-footer-padding: 2rem 1.5rem 2rem;
}
.tabs{
    --bulma-tabs-toggle-link-active-background-color: var(--bulma-warning);
    --bulma-tabs-toggle-link-active-border-color: var(--bulma-warning);
    --bulma-tabs-toggle-link-active-color: var(--bulma-warning-invert);
}
.has-bg-img{
    background: url('/img/home/banner.jpg') center center;
    background-size: cover;
}
.line-btn{
    background-color: #06c755;
    color: white;
    padding: 0px 8px;
    border-radius: 10px;
}
.line-btn:hover{
    background-color: white;
    color: #06c755;
}
.menu-link{
    color: white;
    margin-left: 28px;
    font-weight: 300;
}
.menu-link:hover,
.menu-link.active{
    color: #f0d078;
}
.sidemenu-link{
    display: block;
    color: white;
    padding: 0.6rem 1.2rem;
}
.sidemenu-link + .sidemenu-link{
    border-top: 1px solid var(--bulma-grey);
}
.sidemenu-link:hover,
.sidemenu-link.active{
    color: #f0d078;
}
#hamburger {
    width: 20px;
    height: 16px;
    position: relative;
    float: right;
    margin-top: 3px;
    margin-left: 16px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#hamburger span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#hamburger span:nth-child(2) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#hamburger span:nth-child(3) {
    top: 16px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#hamburger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 2px;
    left: 3px;
}

#hamburger.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 16px;
    left: 3px;
}
.line-color{
    color: #06c755;
}
.has-border-dark{
    border: 1px solid hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l));
}
.has-border-grey-lighter{
    border: 1px solid var(--bulma-grey-lighter);
}
.has-border-light{
    border: 1px solid hsl(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l));
}
.has-border-warning{
    border: 1px solid hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
}
.divider{
    border-bottom: 1px solid var(--bulma-grey-lighter);
    margin: 24px 0;
}
.underline{
    padding: 0 4px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 213, 0, 0.6) 70%,
        rgba(255, 213, 0, 0.6) 100%
    );
}
.swiper_section{
    display: flex;
    align-items: center;
}
.swiper-btn-prev, .swiper-btn-next{
    font-size: 32px;
    cursor: pointer;
    padding: 0 8px;
}
.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}
.swiper{
    width: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
video {
    clip-path: inset(2px 2px);
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
}

.pricing {
    border-radius: 20px !important;
    padding: 24px 36px;
}
.pricing > div > i{
    margin-right: 12px;
}
.accordions{
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

.accordions > div:nth-child(1){
    cursor: pointer;
    padding: 12px 0px;
    user-select: none;
    font-size: 18px;
}

.accordions > div:nth-child(1).active{
    font-weight: bold;
}

.accordions > div:nth-child(1):hover{
    font-weight: bold;
}

.accordions i{
    float: right;
    margin-top: 5px;
}

/*.accordions:nth-child(n+1){
    border-bottom: 1px solid #a5acbb;
}*/

.accordions > div:nth-child(2){
    padding: 0px 0px 12px 0px;
    display: none;
    color: #757575;
}

.loaderbar {
    width: 70px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(#ffd500 0 0);
    margin-left: auto;
    margin-right: auto;
    background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
    animation: l7 1s infinite linear;
}
@keyframes l7 {
    0%  {background-size: 20% 50% ,20% 50% ,20% 50% }
    20% {background-size: 20% 20% ,20% 50% ,20% 50% }
    40% {background-size: 20% 100%,20% 20% ,20% 50% }
    60% {background-size: 20% 50% ,20% 100%,20% 20% }
    80% {background-size: 20% 50% ,20% 50% ,20% 100%}
    100%{background-size: 20% 50% ,20% 50% ,20% 50% }
}

/* CTA - Instagram 漸層按鈕 */
.btn-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white !important;
    border: none;
}
.btn-instagram:hover {
    opacity: 0.9;
}

/* 文章導覽 - sticky 定位 */
.article-toc {
    position: sticky;
    top: 1.5rem;
}
.article-toc .menu-label {
    letter-spacing: 0.5px;
}
.article-toc .menu-list a.is-active {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 96%);
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
}