﻿/* ========================================
   蝝?CSS ???詨 (?蹂誨 meanmenu)
   ???assets_V9/css/mobile-menu-pure.css
   ======================================== */

/* RWD 憿舐內/?梯??摩 */
/* ????(< 992px): ?梯?獢?詨,憿舐內瞍Ｗ?? */
@media (max-width: 991px) {
    .karx-main-menu {
        display: none !important;
    }
   .side-info .mobile-menu li.has-submenu > a::after {
        content: '+' !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.25rem !important;
        font-weight: bold !important;
        display: flex !important;
        /* ... ?嗡?璅???賢? !important */
    }
    .side-info .mobile-menu li.has-submenu.open > a::after {
        content: '?? !important; /* 雿輻 HTML 撖阡?????瘥?- ?湔?憿?*/
    }
}

/* ????桀?祆見撘?*/
.mobile-menu {
    display: none;
}

/* ?湧??詨???＊蝷?*/
.side-info.info-open .mobile-menu {
    display: block;
}

/* ????株?鋆?#main-menu ?摰?*/
.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    background-color: #ff630e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.684);
    border-top: none !important;
}

/* ?嗅??詨撅????梯?銝駁?桃?銝?獢?*/
.mobile-menu li.has-submenu.open {
    border-bottom: none !important;
}

/* 摮?桅???*/
.mobile-menu li .submenu li {
    background-color: #ff630e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.684);
}

.mobile-menu li .submenu {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    background: rgba(110, 207, 226, 0.1) !important;
    border-top: none !important;
}

.mobile-menu li.open .submenu {
    max-height: 500px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.684) !important; /* 撅????? */
}

.mobile-menu ul li a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-menu ul li a:hover {
    background: #6ecde1;
    color: white;
    padding-left: 30px;
}

/* 摮?格見撘?*/
.mobile-menu ul li.has-submenu > a {
    position: relative;
}

.mobile-menu ul li.has-submenu > a::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
}

.mobile-menu ul li.has-submenu.open > a::after {
    transform: rotate(180deg);
}

.mobile-menu ul li .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(110, 207, 226, 0.1);
}

.mobile-menu ul li.open .submenu {
    max-height: 500px;
}

.mobile-menu ul li .submenu li a {
    padding-left: 40px;
    font-size: 0.9rem;
}

/* Intersection Observer ??舀 */
.wow,
.odometer {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.wow.is-visible,
.odometer.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ?蹂誨 WOW.js ???急???*/
.fadeInUp {
    opacity: 0;
    transform: translateY(30px);
}

.fadeInUp.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fadeInLeft {
    opacity: 0;
    transform: translateX(-30px);
}

.fadeInLeft.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fadeInRight {
    opacity: 0;
    transform: translateX(30px);
}

.fadeInRight.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fadeIn {
    opacity: 0;
}

.fadeIn.is-visible {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.zoomIn {
    opacity: 0;
    transform: scale(0.8);
}

.zoomIn.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 撱園?? */
.delay-1.is-visible {
    transition-delay: 0.1s;
}

.delay-2.is-visible {
    transition-delay: 0.2s;
}

.delay-3.is-visible {
    transition-delay: 0.3s;
}

.delay-4.is-visible {
    transition-delay: 0.4s;
}

.delay-5.is-visible {
    transition-delay: 0.5s;
}
