/* header */
.fullon.nav-top {
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: stretch;
    /* margin: 0 auto; */
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-gray-300);
    padding-left: 12px;
    height: 46px;
}

.fullon .nav-left-wrapper {
    display: flex;
}

    .fullon .nav-left-wrapper .logo {
        width: 110px;
        padding: 4px 12px 4px 0;
    }

/*分館、語言選單*/
.fullon .store-wrapper,
.fullon .language-wrapper {
    justify-content: center;
    padding: 0;
    min-width: 100px;
    color: var(--color-gray-700);
}

.fullon .store-wrapper {
    display: flex;
    border-left: 1px solid var(--color-gray-300);
}

.fullon .language-wrapper {
    display: none;
    border-left: 1px solid var(--color-gray-300);
}

    .fullon .store-wrapper .droplist,
    .fullon .language-wrapper .droplist {
        position: relative;
        gap: 6px;
    }

        .fullon .store-wrapper .droplist:hover,
        .fullon .store-wrapper .droplist:active {
            background-color: var(--color-gray-200);
        }

    .fullon .store-wrapper .nav-item,
    .fullon .language-wrapper .nav-item {
        padding: 0 12px;
        width: 100%;
    }

        .fullon .store-wrapper .nav-item .caption {
            display: block;
            text-align: center;
        }

    .fullon .store-wrapper .droplist .icon,
    .fullon .language-wrapper .droplist .icon,
    .fullon .iconcard-wrapper .droplist .icon-arrow {
        width: 12px;
        transition: transform .25s ease-in-out;
    }

    .fullon .store-wrapper .droplist:hover > .icon,
    .fullon .language-wrapper .droplist:hover > .icon,
    .fullon .iconcard-wrapper .droplist:hover > .icon-arrow {
        transform: rotate(-180deg);
    }


    .fullon .store-wrapper .droplist .list,
    .fullon .language-wrapper .droplist .list {
        top: 45px;
        min-width: 150px;
    }

    .fullon .store-wrapper .droplist .list-item a,
    .fullon .language-wrapper .droplist .list-item a,
    .fullon .iconcard-wrapper .member-login .list-item a {
        color: var(--color-gray-700);
    }

    .fullon .store-wrapper .droplist .list-item.active a,
    .fullon .language-wrapper .droplist .list-item.active a {
        color: var(--color-primary);
    }

/*右邊選單*/
.fullon .nav-right-wrapper {
    display: flex;
}

.fullon .menu-wrapper {
    display: none;
    list-style-type: none;
    padding: 0;
}

    .fullon .menu-wrapper .menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 80px;
        max-width: 150px;
        padding: 0 12px;
        height: 100%;
        border-left: 1px solid var(--color-gray-300);
        color: var(--color-gray-700);
        letter-spacing: 0.08rem;
        text-align: center;
    }

        .fullon .menu-wrapper .menu-item:hover {
            color: var(--color-primary);
        }

/*iconcard*/
.fullon .iconcard-wrapper {
    display: none;
    list-style-type: none;
    padding: 0;
}

    .fullon .iconcard-wrapper .iconcard-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1px;
        height: 100%;
        padding: 0 12px;
        min-width: 50px;
        border-left: 1px solid var(--color-gray-300);
        text-align: center;
    }

    /*福容家登入icon_start*/
    .fullon .iconcard-wrapper .member-login {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }

        .fullon .iconcard-wrapper .member-login .icon-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
        }

        .fullon .iconcard-wrapper .member-login .member-info-wrapper {
            text-align: start;
            background-color: var(--color-primary-light);
            background-image: url(https://cdn.gobooking.com.tw/Hotel/img/img_member-droplist_bg.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: contain;
        }

            .fullon .iconcard-wrapper .member-login .member-info-wrapper .name {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 8px;
            }

            .fullon .iconcard-wrapper .member-login .member-info-wrapper .badge,
            .fullon-mobile-menu .mobile-menu-item .mobile-member-login-wrapper .badge {
                background-color: var(--color-primary);
                color: var(--color-white);
                border-radius: 4px;
            }

            .fullon .iconcard-wrapper .member-login .member-info-wrapper .badge {
                display: inline;
                padding: 4px 6px;
                font-size: 0.75rem;
            }

.fullon-mobile-menu .mobile-menu-item .mobile-member-login-wrapper .badge {
    padding: 4px 6px;
    margin-left: 6px;
    font-size: 0.75rem;
    line-height: 1;
}

/*福容家登入icon_end*/

/*購物車 icon_start*/
.fullon .iconcard-wrapper.cart {
    display: flex;
}

    .fullon .iconcard-wrapper.cart .iconcard-item {
        min-width: initial;
    }

    .fullon .iconcard-wrapper.cart .des {
        display: none;
    }

/*購物車 icon_end*/

.fullon .iconcard-wrapper .iconcard-item.primary:hover {
    background-color: var(--color-gray-200);
}

.fullon .iconcard-wrapper .iconcard-item.secondary:hover {
    background-color: var(--color-primary);
}

    .fullon .iconcard-wrapper .iconcard-item.secondary:hover > .des {
        color: var(--color-white);
    }

.fullon .iconcard-wrapper .iconcard-item.cart {
    position: relative;
}

    .fullon .iconcard-wrapper .iconcard-item.cart .cart-badge {
        top: 4px;
        right: 8%;
        font-weight: 600;
    }

.fullon .iconcard-wrapper .iconcard-item.secondary:hover > .cart-badge {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.fullon .iconcard-wrapper .iconcard-item .icon {
    width: 24px;
}

.fullon .iconcard-wrapper .iconcard-item .des {
    font-size: 0.75rem;
    line-height: 1;
    word-break: word-break;
    color: var(--color-gray-700);
}



/*手機版選單 icon*/
.fullon .mobile-menu-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    padding: 0 12px;
}

    .fullon .mobile-menu-icon .icon {
        width: 30px;
    }

/* 手機版選單 */
.fullon-mobile-menu {
    position: absolute;
    top: 47px;
    z-index: 1000;
    height: calc(100vh - 45px);
    left: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
    overflow-y: auto;
    display: none;
}

    .fullon-mobile-menu.active {
        transform: translateY(0%);
        transition: transform .3s;
        display: block;
    }

    .fullon-mobile-menu .menu-item-wrapper {
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    /*選單*/
    .fullon-mobile-menu .mobile-menu-item {
        border: none;
        padding: 0;
    }

        .fullon-mobile-menu .mobile-menu-item .collapse {
            gap: 0;
        }

        .fullon-mobile-menu .mobile-menu-item .collapse-btn {
            display: flex;
            justify-content: space-between;
            font-size: 1rem;
            font-weight: 600;
            padding: 20px 0;
            border-bottom: 1px solid var(--color-gray-300);
        }

            .fullon-mobile-menu .mobile-menu-item .collapse-btn.active {
                border-bottom: 2px solid var(--color-primary);
            }

        /*會員登入選單_start*/

        .fullon-mobile-menu .mobile-menu-item .mobile-member-login-wrapper {
            display: flex;
            align-items: center;
            flex-direction: row;
        }

            .fullon-mobile-menu .mobile-menu-item .mobile-member-login-wrapper .icon {
                width: 30px;
                margin: 0 2px 2px 0;
            }

        /*會員登入選單_end*/


        .fullon-mobile-menu .mobile-menu-item .collapse-item {
            padding: 12px 0 12px 0;
            border-bottom: 1px solid var(--color-gray-300);
        }

        .fullon-mobile-menu .mobile-menu-item a {
            font-size: 0.875rem;
            font-weight: 400;
            color: var(--color-gray-700);
        }

    /*mobile-iconcard*/
    .fullon-mobile-menu .mobile-iconcard-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 0;
        justify-content: space-around;
        list-style-type: none;
        padding: 0;
    }

        .fullon-mobile-menu .mobile-iconcard-wrapper .iconcard-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0 8px;
        }

    .fullon-mobile-menu .iconcard-item .icon {
        width: 30px;
    }

    .fullon-mobile-menu .iconcard-item .des {
        font-size: 0.75rem;
        word-break: keep-all;
        text-align: center;
        color: var(--color-gray-700);
    }

    /* soical media*/
    .fullon-mobile-menu .socialmedia-wrapper {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

        .fullon-mobile-menu .socialmedia-wrapper .icon {
            width: 32px;
        }

    /* mobile language*/
    .fullon-mobile-menu .mobile-language-wrapper {
        display: flex;
        justify-content: center;
    }

        .fullon-mobile-menu .mobile-language-wrapper .collapse {
            box-shadow: none;
            border: 1px solid var(--color-gray-300);
            padding: 0;
            min-width: 200px;
        }

        /*mobile language*/

        .fullon-mobile-menu .mobile-language-wrapper .collapse-btn {
            display: flex;
            justify-content: center;
            font-size: 1rem;
            font-weight: 600;
            padding: 16px 20px;
        }

        .fullon-mobile-menu .mobile-language-wrapper .collapse-btn-name {
            font-size: 0.875rem;
            font-weight: 400;
            color: var(--color-gray-700);
        }

        .fullon-mobile-menu .mobile-language-wrapper .collapse-item {
            text-align: center;
            padding: 8px 20px;
            border-bottom: 1px solid var(--color-gray-300);
        }

            .fullon-mobile-menu .mobile-language-wrapper .collapse-item:first-child {
                border-top: 1px solid var(--color-gray-300);
            }

            .fullon-mobile-menu .mobile-language-wrapper .collapse-item:last-child {
                border-bottom: none;
            }

            .fullon-mobile-menu .mobile-language-wrapper .collapse-item > a {
                color: var(--color-gray-700);
            }

            .fullon-mobile-menu .mobile-language-wrapper .collapse-item.active > a {
                color: var(--color-primary);
            }

    /* mobile-content-wrapper */
    .fullon-mobile-menu .mobile-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .fullon-mobile-menu .mobile-content-item {
        color: var(--color-gray-700);
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .fullon-mobile-menu .mobile-content-item.title {
            font-size: 1rem;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .fullon-mobile-menu .mobile-content-item .des {
            display: block;
            color: var(--color-gray-700);
        }

            .fullon-mobile-menu .mobile-content-item .des > a {
                color: var(--color-gray-700);
            }

@media(min-width:768px) {
    .fullon .store-wrapper,
    .fullon .language-wrapper {
        min-width: 150px;
        max-width: 180px;
    }

    .fullon .store-wrapper {
        background-color: var(--color-gray-200);
        border-left: none;
    }

    .fullon .language-wrapper {
        display: flex;
    }

    .fullon-mobile-menu .mobile-iconcard-wrapper .iconcard-item {
        gap: 4px;
    }

    .fullon-mobile-menu .iconcard-item .icon {
        width: 40px;
    }

    .fullon-mobile-menu .iconcard-item .des {
        font-size: 0.875rem;
    }

    .fullon .iconcard-wrapper.cart .des {
        display: flex;
    }

    .fullon .iconcard-wrapper .iconcard-item.cart .cart-badge {
        top: 4px;
        right: 16px;
    }
}

@media(min-width:1024px) {
    .fullon.nav-top {
        padding: 0 0 0 32px;
        height: 60px;
    }

    .fullon .nav-left-wrapper .logo {
        width: 150px;
        padding: 4px 32px 4px 0;
    }

    .fullon .iconcard-wrapper {
        display: flex;
    }

        .fullon .iconcard-wrapper .iconcard-item .icon {
            width: 30px;
        }

        .fullon .store-wrapper .droplist .list,
        .fullon .language-wrapper .droplist .list,
        .fullon .iconcard-wrapper .iconcard-item.member-login .list {
            top: 60px;
            min-width: 150px;
        }

    .fullon-mobile-menu {
        top: 59px;
    }

    .mobile-menu-2 {
        display: none;
    }
}

@media(min-width:1400px) {
    .fullon .menu-wrapper {
        display: flex;
    }

    .fullon .mobile-menu-icon {
        display: none;
    }
}

/* fullon-join_start */
.fullon-join-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fullon-join-desc {
    color: var(--color-gray-700);
    font-size: 1rem;
    padding-top: 6px;
}

.fullon-join-qr-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    height: auto;
}

.fullon-join-qr-item {
    max-width: 160px;
    height: auto;
}


.fullon.action-wrapper .secondary-option {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    gap: 16px;
}

@media (min-width: 992px) {
    .fullon-join.frame-wrapper {
        max-width: 600px;
    }
}

@media (max-width: 375px) {
    .fullon-join-intro .title {
        font-size: 1rem
    }

    .fullon-join-desc {
        font-size: 0.875rem;
    }
}

/* fullon-join_end */