@charset "utf-8";

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n)

*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Noto Sans", sans-serif;
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*反白顏色*/
::-moz-selection {
    background-color: #2b5553;
    color: #fff;
}

::selection {
    background-color: #2b5553;
    color: #fff;
}

body {
    overflow-x: hidden;
}

/* 捲軸寬度及高度 */
&::-webkit-scrollbar {
    background: #000;
    width: 5px;

}

/* 捲軸兩側頂端的按鈕 */
&::-webkit-scrollbar-button {
    display: none;
}

/* 滑桿顏色 */
&::-webkit-scrollbar-thumb {
    background-color: #2b5553;
    border-radius: 2px;
    transition: all 0.3s;
}

&::-webkit-scrollbar-thumb:hover {
    background-color: #64a19e;
    transition: all 0.3s;
}

/* 軌道背景底色 */
&::-webkit-scrollbar-track {
    background-color: #000;
}




#content_main {
    background: #000;
    min-height: 140vh;
    margin: 0;
    overflow: visible;
    overflow-x: hidden;
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* 轉場 */
/* body::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #182e2d;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 20000000000000000000;
    animation: turn-bg 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);

}
@keyframes turn-bg {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1,0);
    }
} */




/* 頁面的麵包屑 首頁/頁面名稱/ */
.path {
    display: none;
}

#page {
    background: #000;
}


/* 首頁大圖 */
.bannerindex {
    position: relative;
    height: auto;
}

.bannerindex .swiper-banner {
    position: static;
    margin: 0;
    height: auto;
}

.bannerindex .swiper-slide {
    background: #000;
}

.bannerindex .swiper-slide img {
    height: auto;
}

/* 開場 */


@keyframes act-line {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    5% {
        opacity: 0.5;
    }

    10% {
        opacity: 0.1;

    }

    15% {
        opacity: 0.5;
    }

    20% {
        opacity: 0.1;
    }

    25% {
        opacity: 0.5;
    }

    30% {
        opacity: 1;
        transform: scale(0.7);

    }

    40% {
        opacity: 1;
        transform: scale(0.7);

    }

    100% {
        transform: scale(1);

    }
}

.bannerindex .swiper-slide img {
    transform: scale(0.5, 0);
    opacity: 0;
    position: relative;
    animation: img-transform 4.3s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 0s;
}



@keyframes img-transform {
    0% {
        top: -20px;
        opacity: 0;
        transform: scale(0.5, 0);
    }

    5% {
        top: -20px;
        opacity: 1;
        transform: scale(0.5, 0);
    }

    30% {
        top: -20px;
        opacity: 1;
        transform: scale(0.5, 0.5);
    }

    40% {
        top: -20px;
        opacity: 1;
        transform: scale(0.5, 0.5);
    }

    100% {
        top: 0px;
        opacity: 1;
        transform: scale(1);
    }
}

/* .bannerindex .swiper-wrapper::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 30px;
    background-image: url(https://pic03.eapple.com.tw/theedge3063/bg-07.png);
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-bottom: 2%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
    opacity: 0;
    animation: banner-code 3s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 1.5s;
}

@keyframes banner-code {
    0%{
        opacity: 0;
        background-position: 0 100%;
    }
    10%{
        opacity: 0;
        background-position: 50px 100%;

    }
    50%{
        opacity: 1;
        background-position: -1200px 100%;
    }
    100%{
        opacity: 1;
        background-position: center 100%;
    }
    
} */
.pageIndex .nav-header {
    opacity: 0;
    animation: act-logo 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 4.4s;
}

.nav-header {
    opacity: 0;
    animation: act-logo 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 1s;
}

.pageIndex .header_area .stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile {
    opacity: 0;
    animation: act-logo 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 4.4s;
}

.header_area .stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile {
    opacity: 0;
    animation: act-logo 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 1s;
}

@keyframes act-logo {
    0% {
        opacity: 0;
        transform: scale(1, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }

}

/* 大圖 */
.bannerindex .swiper-wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    clip-path: polygon(0% 0%, 0% 100%, 4% 100%, 4% 5%, 95.8% 5%, 95.8% 89.5%, 4% 89.5%, 4% 100%, 100% 100%, 100% 0%);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2000;
    pointer-events: none;
    animation: act-blur 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 4.4s;
}

@keyframes act-blur {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

.bannerindex .swiper-wrapper .swiper-slide:nth-child(1):after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-image: url(https://pic03.eapple.com.tw/zhuspace/banner-01.png);
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1, 0);
    transform-origin: 50% 80%;
    z-index: 10000;
    animation: act-word 2s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 3.8s;
}

.bannerindex .swiper-wrapper .swiper-slide:nth-child(2):after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-image: url(https://pic03.eapple.com.tw/zhuspace/banner-02.png);
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1, 0);
    transform-origin: 50% 80%;
    z-index: 10000;
    animation: act-word 1.5s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 3.0s;}

@keyframes act-word {
    0% {
        opacity: 0;
        transform: scale(1, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}



@media screen and (max-width: 1440px) {
    .bannerindex {
        height: 100vh;
    }

    .bannerindex::before {
        background-size: 100% 100%;
    }

    .bannerindex .swiper-banner {
        height: 100%;
    }

    .bannerindex .swiper-banner .swiper-wrapper {
        height: 100%;
    }

    .bannerindex .swiper-wrapper .swiper-slide::after {
        background-size: 100% auto;
        background-position: center 90%;
    }

    .bannerindex .swiper-wrapper .swiper-slide {
        display: flex;
        justify-content: center;
    }

    .bannerindex .swiper-slide img {
        width: auto;
        height: 100%;
    }


    /* 線框變化 */

}

@media screen and (max-width: 768px) {
    .bannerindex::before {
        background-image: url(https://pic03.eapple.com.tw/theedge3063/bg-20.png);
    }

    .bannerindex .swiper-wrapper .swiper-slide::after {
        background-image: url(https://pic03.eapple.com.tw/theedge3063/bg-19.png);
    }

    .bannerindex .swiper-slide:nth-of-type(1) img {
        animation: img-transform-768 4.3s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    }

    .bannerindex .swiper-slide:nth-of-type(2) img {
        left: -50%;
    }

    @keyframes img-transform-768 {
        0% {
            top: -20px;
            opacity: 0;
            transform: scale(0.5, 0);
        }

        5% {
            top: -20px;
            opacity: 1;
            transform: scale(0.5, 0);
        }

        30% {
            top: -20px;
            opacity: 1;
            transform: scale(0.5, 0.5);
        }

        40% {
            top: -20px;
            opacity: 1;
            transform: scale(0.5, 0.5);
            left: 0;
        }

        100% {
            top: 0px;
            opacity: 1;
            transform: scale(1);
            left: -50%;
        }
    }
}


/* 大圖選單圈圈 */
.bannerindex .swiper-pagination {
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    pointer-events: none;
    opacity: 0;
    animation: act-logo 1s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 4.5s;
}

.bannerindex .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: transparent;
    margin: 0 5px;
    border-radius: 0;
    position: relative;
    border-style: solid;
    opacity: 1;
    background-color: transparent;
    pointer-events: auto;
}

.bannerindex .swiper-pagination-bullet {
    border-radius: 0;
    background: transparent;
}


.bannerindex .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
    opacity: 0.3;
}

.bannerindex .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {
    opacity: 0.3;
}

/*選單設定*/
.header_area {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0;
}

.main_header_area {
    background: transparent;
}

.main_header_area .container {
    max-width: 90%;margin: 3% auto 0;
}

.me_tp_features {
    display: none;
}


/*LOGO設定*/
.nav-brand img {
    width: 100%;
    max-width: 100%;
}

.nav-brand {
    width: 310px;
    transition: all 0.5s;
}

.sticky .nav-brand {
    width: 230px;
    transition: all 0.5s;
}

.pageIndex .nav-header {
    top: 70px;
    left: 0;
    transition: all 0.3s;
}

.sticky .nav-header {
    top: 22px;
    transition: all 0.3s;
}

.nav-header {
    top: 20px;
    left: 0;
    transition: all 0.3s;
}



@media screen and (max-width: 1440px) {
    .nav-brand {
        width: 250px;
        transition: all 0.5s;
    }

    .sticky .nav-brand {
        transition: all 0.5s;
    }
}

@media screen and (max-width: 1024px) {
    .pageIndex .nav-header {
        position: relative;
        display: block;
        top: 50px;
        width: fit-content;
        margin: 0 auto;
    }

    .pageIndex .sticky .nav-header {
        top: 40px;
    }

    .nav-brand {
        width: 200px;
        transition: all 0.5s;
    }

    .sticky .nav-brand {
        width: 150px;
        transition: all 0.5s;
    }

    .nav-header {
        position: absolute;
        z-index: 0;

    }
}








/* 開場logo、選單 */

/* 
.nav-header {
    animation: action-logo 0.5s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 4.6s;
}

@keyframes action-logo {
    0%{
        opacity: 0;
        transform: translate(-50%,0%) scale(1.5);
    }
    100%{
        opacity: 1;
        transform: translate(-50%,0%) scale(1);
    }
    
} */


/*  */
.header_area .main_header_area {
    position: fixed;
    background: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    opacity: 1;
    animation: action-nav 0.5s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 5s;
    transition: all 0.5s;
}

.header_area.sticky .main_header_area {
    background: transparent;
    height: 0;
    transition: all 0.5s;
}

.header_area .me_tp_features {
    display: block;
    position: fixed;
    top: 40px;
    right: 210px;
    margin-bottom: 0;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.header_area.sticky .me_tp_features {
    top: 20px;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.header_area .stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile {
    display: block;
    position: fixed;
    top: 4%;
    right: 1%;
    z-index: 10000000;
    transition: all 0.5s;
    pointer-events: all;
}

.header_area.sticky .stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile {
    top: 4%;
    transition: all 0.5s;
}

/* 


@keyframes action-nav {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
 */


/* 漢堡 */

.stellarnav .menu-toggle {
    text-align: center;
    opacity: 1;
    /* animation: action-menu 0.5s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99); */
    animation-delay: 4.6s;
}

.stellarnav .menu-toggle:after {
    content: "MENU";
    display: none;
    font-size: 12px;
    text-align: center;
    color: #43453D;
    margin-top: 10px;
}


@keyframes action-menu {
    0% {
        opacity: 0;
        transform: translate(-50%, 0%) scale(1.5);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0%) scale(1);
    }

}

.stellarnav.desktop .menu-toggle span.bars span,
.stellarnav.mobile .menu-toggle span.bars span {
    display: block;
    position: relative;
    width: 20px;
    height: 2px;
    border-radius: 6px;
    background: #fff;
    margin: 0 auto 5px;
    left: 0;
    transition: 0.5s;
}

.stellarnav.desktop .menu-toggle:hover span.bars span:nth-child(1),
.stellarnav.mobile .menu-toggle:hover span.bars span:nth-child(1) {
    left: -10px;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.stellarnav.desktop .menu-toggle span.bars span:nth-child(2),
.stellarnav.mobile .menu-toggle span.bars span:nth-child(2) {
    opacity: 1;
    transition: all 1s;
}

.stellarnav.desktop .menu-toggle:hover span.bars span:nth-child(3),
.stellarnav.mobile .menu-toggle:hover span.bars span:nth-child(3) {
    left: 10px;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}




/* 漢堡關 */

.stellarnav .menu-toggle span.bars {
    top: 0;
}

.stellarnav.desktop.active .menu-toggle span.bars span,
.stellarnav.mobile.active .menu-toggle span.bars span {
    width: 50px;
}

.stellarnav.desktop.active .menu-toggle span.bars span:nth-child(1),
.stellarnav.mobile.active .menu-toggle span.bars span:nth-child(1) {
    margin: 0;
    transform: rotate(35deg) scaleX(.35) translate(32px, -11.5px);
    border-radius: 50px 50px 50px 0;
    transition: all 0.3s;
}

.stellarnav.desktop.active .menu-toggle span.bars span:nth-child(2),
.stellarnav.mobile.active .menu-toggle span.bars span:nth-child(2) {
    margin: 0;
    opacity: 1;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 23px;
    transition: all 0.3s;
}

.stellarnav.desktop.active .menu-toggle span.bars span:nth-child(3),
.stellarnav.mobile.active .menu-toggle span.bars span:nth-child(3) {
    margin: 0;
    transform: rotate(-35deg) scaleX(.35) translate(32px, 11.5px);
    border-radius: 0 50px 50px 50px;
    transition: all 0.3s;
}



.stellarnav.desktop.active .menu-toggle:hover span.bars span:nth-child(1),
.stellarnav.mobile.active .menu-toggle:hover span.bars span:nth-child(1) {
    left: -10px;
    opacity: 0;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.stellarnav.desktop.active .menu-toggle:hover span.bars span:nth-child(3),
.stellarnav.mobile.active .menu-toggle:hover span.bars span:nth-child(3) {
    left: 10px;
    opacity: 0;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}










/* 未開啟 */

.stellarnav.desktop>ul,
.stellarnav.mobile>ul {
    display: flex !important;
    pointer-events: all;
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 0;
    padding-left: 30%;
    margin: 0;
    text-align: center;
    background: transparent;
    position: relative;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: -5;
    opacity: 0;
    transform-origin: 50% 0;
    transform: scale(1, 0);
    transition: all 0.5s cubic-bezier(0.73, 0.08, 0.11, 0.99);}

.stellarnav.desktop,
.stellarnav.mobile {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -5;
    line-height: normal;
    background-color: transparent;
    pointer-events: none;
    transition: 1s;
}


/* 開啟 */
.stellarnav.desktop.active>ul,
.stellarnav.mobile.active>ul {
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.stellarnav.desktop>ul::before,
.stellarnav.mobile>ul::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    background-color: #000;
    box-shadow: 1px 1px 5px #0000007a;
    transform-origin: 50% 0;
    transform: scale(1, 0);
    transition: all 1s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.stellarnav.desktop.active>ul::before,
.stellarnav.mobile.active>ul::before {
    transform: scale(1, 1);
    transition: all 1s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}


@keyframes nav-left {
    0% {
        transform: scale(1, 0);
    }

    100% {
        transform: scale(1, 1);
    }

}

@keyframes line-up {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

@keyframes nav-img {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

@media screen and (max-width: 1440px) {

    .header_area .stellarnav .menu-toggle,
    .stellarnav .call-btn-mobile,
    .stellarnav .location-btn-mobile {
        top: 4%;
        right: 7%;
    }

    .header_area.sticky .stellarnav .menu-toggle,
    .stellarnav .call-btn-mobile,
    .stellarnav .location-btn-mobile {
        top: 3%;
        transition: all 0.5s;
    }

    /* 首頁 */
    .pageIndex .header_area .stellarnav .menu-toggle,
    .stellarnav .call-btn-mobile,
    .pageIndex .stellarnav .location-btn-mobile {
        top: 11%;
    }

    .pageIndex .header_area.sticky .stellarnav .menu-toggle,
    .pageIndex .stellarnav .call-btn-mobile,
    .pageIndex .stellarnav .location-btn-mobile {
        top: 7%;
        transition: all 0.5s;
    }
}

@media screen and (max-width: 1024px) {

    .stellarnav.desktop>ul,
    .stellarnav.mobile>ul {
        padding-left: 0;
    }

}






/* BAR */


/* 購物籃 */
.tp_links {
    display: none;
}

.box_search input[type=text] {
    display: none;
    background: url(../images/search-icon.png) no-repeat 9px center #fff;
    border: 0;
    padding: 2px 0px 4px 42px;
    width: calc(20% - 42px);
    border-radius: 10em;
    transition: all .5s;
    outline: none;
    background-color: transparent;
    border-bottom: 1px #3F3F3F solid;
    border-radius: 0;
    transition: all 0.3s;
}

.box_search input[type=text]:hover {
    color: #3F3F3F;
    transition: all 0.3s;
}

.box_search input[type=text]:focus {
    color: #3F3F3F;
    transition: all 0.3s;
}

.shop_search_btn {
    display: none;
    background: #3F3F3F;
    color: #fff;
    font-size: 13px;
    border: none;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    padding: 4px 15px;
    cursor: pointer;
}

.box_search {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 60%;
    margin-bottom: 0;
    margin-right: 30px;
}

.me_tp_features a {
    margin: 0 0;
}

.me_tp_features a.tp_btn_cart {
    margin-right: 20px;
}

.me_tp_features a.tp_btn_cart span {
    display: none;
}

.me_tp_features a.tp_btn_notice span {
    display: none;
}










/* 選項 */

.stellarnav>ul>li::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #00000005;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: brightness(0.5);
    transition: all 0.3s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.stellarnav>ul>li:hover:before {
    backdrop-filter: brightness(1);
    transition: all 0.3s cubic-bezier(0.73, 0.08, 0.11, 0.99);

}


.stellarnav>ul>li>a {
    margin: 0 20px;
    padding: 0;
    color: #fff;
    display: flex;
    text-transform: uppercase;
    position: relative;
    font-size: 16px;
    line-height: 20px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding-left: 10%;
    overflow: visible;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
    opacity: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: baseline;
    flex-direction: column;
    text-wrap: nowrap;
}

.stellarnav>ul>li>a:hover {
    transition: all 0.3s;background: #ffffff0d;
}

.stellarnav>ul>li>a b {
    display: inline;
    line-height: 150%;
    height: auto;
}

.stellarnav>ul>li>a b:nth-child(1) {
    font-size: 24px;
    font-weight: 500;
    font-family: "Montserrat", serif;
    letter-spacing: 0.1em;
}

.stellarnav>ul>li>a b:nth-child(2) {
    font-size: 16px;
    word-break: keep-all;
    font-weight: 100;
    letter-spacing: 0.1em;
}

.stellarnav>ul>li>a:hover b:nth-child(1) {
    transition: all 0.5s;
}

.stellarnav>ul>li>a:hover b:nth-child(2) {
    transition: all 0.5s;
}


.stellarnav li {
    opacity: 1;
    width: 100%;
}

.navigation {
    width: 100%;
    position: relative;
    padding: 0;
}

.stellarnav>ul>li>a:hover b {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
}


/* 下拉 */

.stellarnav>ul>li.has-sub:hover {
    flex: 4;
    transition: all 1s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}


@media screen and (min-width: 768px) {
    .stellarnav>ul>li>ul {
        display: flex !important;
    }
}


.stellarnav>ul>li>ul {
    position: absolute;
    height: 100%;
    width: 50%;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #000000bd, #00000094);
    padding: 0;
    /* backdrop-filter: blur(10px); */
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.73, 0.08, 0.11, 0.99);
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 30%;
    justify-content: flex-end;
    backdrop-filter: blur(8px);
}

.stellarnav>ul>li:hover>ul {
    opacity: 1;
    transition: all 1s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.stellarnav li li {
    display: block;
    border: 0;
    margin-bottom: -1px;
    background: transparent;
    color: #fff;
    transition: all 0.3s;
}

.stellarnav li>ul>li::before {
    content: "";
    display: inline-block;
    width: 0px;
    height: 4px;
    background-color: #172D2C;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    transition: all 0.3s;
}

.stellarnav li>ul>li:hover:before {
    width: 10px;
    transition: all 0.3s;
}

.stellarnav li li:nth-child(1) {}

.stellarnav li li:nth-last-child(1) {}

.stellarnav li li:hover {
    background: transparent;
    z-index: 100000;
    transition: all 0.3s;
}

.stellarnav li li a {
    padding: 15px 10px;
    display: block;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s;
    padding-left: 15px;
}

.stellarnav li li.has-sub>a {
    padding: 15px 10px;
}

.stellarnav li li a:hover {
    color: #fff;
    padding-left: 20px;
    transition: all 0.3s;
}

@keyframes ul-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes up {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 子分類 */
.stellarnav ul ul ul {
    position: relative;
    top: 0;
    left: 0;
}

.stellarnav ul ul ul li a {
    padding: 15px 10px;
    padding-left: 20px;
    transition: all 0.3s;
}

.stellarnav ul ul ul li a:hover {
    background: #00000023;
    transition: all 0.3s;
}


@media screen and (max-width: 768px) {

    /* 開啟手機板下方按鈕所需設定 */
    #bottom_menu {
        display: block;
    }


    #to_top {
        bottom: 60px;
    }

    .nav-menu {
        margin: 0;
    }

    .nav-menu>li:not(.tp_links) {
        padding-right: 0;
    }

    .nav-dropdown>li {
        text-align: left;
    }

    .nav-dropdown>li>a {
        width: calc(100% - 45px);
    }}

@media screen and (max-width: 600px) {


}
/*Footer/＝＝＝＝＝*/
.footer {
    border-top: none !important;
    padding: 40px 0 0;
    background: #0a0a0a;}

.footer .center { position: relative;max-width: 80%;}
.footer_logo {max-width: 180px;}

.copy {
    background: #000;
    color: #fff;
    border: 0;margin-top: 0;}

.center {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;}

.copy a { color: #fff;}
.footer_menu a {transition: all 0.3s;}
.box_link { display: none;}
.footer_logo img {margin-top: 20px;}
.footer_info li p {
    width: 100%;
    color: #fff;
    margin: 10px 0 0;
    margin-right: 40px;}

.footer_info li p a {color: #fff;}
.footer_info {
  margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
padding-bottom: 3%;}

.footer_info ul {
    display: flex;
    vertical-align: top;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    width: 80%;}

.footer_menu {
    border-bottom: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;}

.footer_menu a {
  text-align: center;
    transition: all 0.3s;
    width: calc(100% / 2 - 20px);
    margin: 0 10px 10px 0;
    background: transparent;
    color: #ffffff9b;
    padding: 10px 20px;
    overflow: hidden;
    position: relative;
    border: none;
    letter-spacing: 2px;}

.footer_menu a:hover {
  border:#58C4C9;
    background: #58C4C9;
    color: #fff;
    transition: 0.3s all;}

.footer_menu a::before {}

.footer_menu a:hover:before {
    transform: translateX(0%);
    transition: all .3s;}

.footer_menu a:nth-child(1) {display: none;}
.footer_info li:nth-child(2) {width: 30%;}
.info_fix {}

.footer_info li:nth-child(1) {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    margin-right: 5%;}

.footer_info li:nth-child(1)::before {
    content: "CONTACT";
    display: block;
    width: 100%;
    color: #fff;
    border-bottom: 1px #fff solid;
    padding-bottom: 10px;
    font-size: 24px;
    letter-spacing: 3px;
    font-weight: bold;}

    @media screen and (max-width: 1500px) {
    .footer_menu a {width: calc(100% / 2 - 20px);}}

@media screen and (max-width: 1024px) {
  .footer_info {
    margin-bottom: 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;}

    .footer_info li:nth-child(1) {width: 100%;}
    .footer_info ul {
        display: flex;
        vertical-align: top;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-start;}

    .footer_info li:nth-child(2) {width: 100%;}

}

@media screen and (max-width: 768px) {
    .footer_info {
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .footer_info ul {
        display: flex;
        vertical-align: top;
        width: 100%;
        justify-content: space-between;
        flex-direction: column;
    }

}


@media screen and (max-width: 500px) {
    .footer_menu a {
        transition: all 0.3s;
        width: 100%;
        margin: 0 5px 5px 0;
        background: transparent;
        color: #fff;
        padding: 10px 20px;
        overflow: hidden;
        position: relative;
    }

    .info_fix {
        bottom: 50px;
    }

}


/*top*/
#to_top {
    bottom: 180px !important;
    left: unset;
    right: -1px;
    width: 55px;
    height: 47px;
    padding-top: 11px;
    color: #fff;
    background: #ffffff2c;
    box-shadow: none;
    border-radius: 0;
    border: none;}
#to_top i:before, #to_top i:after {background: #fff;}