@import url("https://panel.noon360.com/mainssl/uploads/noon360/template/us_basic/style.css");

#ns_Header {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    position: unset;
    top: 0;
    z-index: 9999;
    height: 110px;
}

#ns_Header {margin-bottom: 0;}

#ns_Menu {
 display: none;
}

#id_HeaderCol3 .nsDock {
    width: auto;
}

#id_HeaderCol3 .HeaderLeft3, #id_HeaderCol3 .HeaderRight3 {
    width: 180px;
}
.meLogoBlock img {
    width: 100%;
    max-width: 200px;
    max-height: 90px;
    min-width: 113px;
    object-fit: contain;
}

@media (max-width: 768px) {
#id_HeaderCol3 .HeaderLeft3, #id_HeaderCol3 .HeaderRight3 {
    width: 33%;
}

}

/*導覽列第二排調整*/
body #dataSiteTree.Hori2 * {
    display: block;
    box-sizing: border-box;
    line-height: 125%;
    text-align: center;
    font-size: 1.2rem;
}

body #dataSiteTree.Hori2 .SiteGroup_1 {
    display: inline-block;
    margin: 5px;
    white-space: unset;
    position: relative;
}
#dataSiteTree.Hori2 .SiteGroup_1 .SiteMenu_1 {
    border: 0px solid #cccccc;
    z-index: 99;
    width: 200px;
}
body #dataSiteTree.Hori2 .SiteNode_1 {
    padding-left: 0;
}
body #dataSiteTree.Hori2 .SiteGroup_2 {
    display: block;
}
body #dataSiteTree.Hori2 .SiteGroup_2 a {
    border-bottom: 1px solid #E8E6ED;
    padding: 10px;
}
body #dataSiteTree.Hori2 .SiteGroup_2 span.ClassName {
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    color: #585757;
}


/*驗證碼調整*/
.tdChkCodeImg {
    -webkit-filter: contrast(1.7) grayscale(4);
    filter: contrast(1.7) grayscale(4);
}




/* LIAM START */

/* ROOT區 */

:root {
    /* Main-theme-color */
    --regular-btn-color: #A88B6F;    /* 建議修改 */
    --regular-btn-hover-color: #333;
    --nav-bar-color: #153852;    /* 建議修改 */
    --nav-bar-font-color: #FFF;
    /* HEADER  註：如果要改HEADER背景為淺色，請到下方啟用FILTER */
    --header-bg-color: #FFF;
    --header-font-color: #524F4C;
    --header-font-hover-color: #A88B6F;    /* 建議修改 */
    /* PRDLIST 左邊商品分類欄 */
    --shop-left-bar-hover-color: #215984;    /* 建議修改 */
    --shop-left-bar-hover-font-color: #FFF;
    --shop-left-bar-hover-color-2: #2f988f;    /* 建議修改 */
    /* 一般頁面中標題及文字顏色 */
    --title-font-color: #875944;
    --subtitle-font-color: #333;
    --content-font-color: #4A4A4A;
    /* RWD左側導覽列 */
    --left-bar-color: #153852;    /* 建議修改 */
    --left-bar-tab-color: #F1F1F1; 
    --left-bar-font-color: #FFF;
    --left-bar-tab-font-color: #333;
    /* 常見問題導覽列 */
    --help-nav-bar-color: #A88B6F;    /* 建議修改 */
    --help-nav-bar-color-dark: #875944;    /* 建議修改 */
    /* OTHER */
    --member-font-hover-color: #e4875c;
    --login-btn-color: #A88B6F;
    --shopcar-btn-color: #A88B6F;
    --sold-out-color: #666666;
    /* FOOTER */
    --footer-color: #FFF;
    --footer-font: #333;
    --noon360-color: #2d628d;    /* 建議修改 */
}



/* HEADER導覽列 */

#ns_Header .SiteMenu a span {
    color: var(--header-font-color);
}

#ns_Header .SiteMenu a:hover span {
    color: var(--header-font-hover-color);
}

body #ns_Header {
    background-color: var(--header-bg-color);
}

/* #id_HeaderRight3_1 img {
    filter: brightness(100);
} */


/* 右上角四個ICON相關 */

    /* 聯絡我們 */

    body #iWinTopDiv .contentUs .weForm span.btnUploadURL {
        border: 1px solid var(--regular-btn-color);
        padding: 3px 5px 5px 5px;
        background: var(--regular-btn-color);
        color: #fff;
        vertical-align: middle;
    }
    body #iWinTopDiv .contentUs .weForm .button[type=submit] {
        border-color: var(--regular-btn-color);
        background-color: var(--regular-btn-color);
        color: #fff;
        border-radius: 0px;
    }

    /* 登入 */

        /* 會員中心、登入HOVER顏色 */

        #blk3 .memberBlk a:hover {
            color: var(--member-font-hover-color);
        }

    /* LOGINFORM、JOINFORM 按鈕 */

    body .meCSS input[type=submit] {
        background: var(--login-btn-color);
        color: #fff;
    }
    body .meCSS input[type=submit]:hover {
        background: var(--regular-btn-hover-color);
        color: #fff;
    }

    /* 購物車按鈕 立即結帳 */

    body a.popupShopCartBtnSubmit.txt_PopupShopCartSubmit {
        background: var(--shopcar-btn-color);
        color: #fff;
    }

/* HEADER + 商品導覽列 RWD 左側 */

@media (max-width: 768px) {
    body .meus_NkMiniSiteAndPrdNav .tab button.active {
        background-color: var(--left-bar-color);
        color: var(--left-bar-font-color);
    }
    body .meus_NkMiniSiteAndPrdNav .tab-content.active {
        display: block;
        background: var(--left-bar-color);
        border: none;
    }
    #id_HeaderCol #content-1 .SiteItem span {
        color: var(--left-bar-font-color);
    }
    #id_HeaderCol #content-2 .SiteItem span {
        color: var(--left-bar-font-color);
    }
    .hamburger-content .tab {
        background-color: var(--left-bar-tab-color);
        color: var(--left-bar-tab-font-color);
    }
    #dataSiteTree a span {
        color: var(-left-bar-font-color);
    }
}
    
/* 商品分類導覽列 */

#id_HeaderCol {
    width: 100%;
    background: var(--nav-bar-color);
}

#id_HeaderCol .SiteItem span {
    color: var(--nav-bar-font-color);
}

#id_HeaderCol .hambuger-content a span {
    color: var(--nav-bar-font-color);
}


/* 首頁 商品展示區 標題 文字顏色 */

body .meMsg_MsgBlk .meMsg_MsgTitle {
    color: var(--title-font-color);
}
body .meMsg_MsgBlk .meMsg_MsgSubTitle {
    color: var(--subtitle-font-color);
}
body .meMsg_MsgBlk .meMsg_Content {
    color: var(--content-font-color);
}

/* 把會員登入頁面標題排除選取範圍 */

#id_Content .Title1 .meMsg_MsgBlk .meMsg_MsgTitle {
    color: #333333;
}

#id_Content .title2 .meMsg_MsgBlk .meMsg_MsgTitle {
    color: #333333;
}


/* 購買 PRDLIST */

    /* 左側商品分類 */

    #id_ColLeft_1 .mePrdTree .TreeNode_1 {
        color: #000;
        background: #fff;
        border-top: 1px solid var(--shop-left-bar-hover-color);
    }
    
    #id_ColLeft_1 .mePrdTree .TreeNode_1:hover {
        color: var(--shop-left-bar-hover-font-color);
        background: var(--shop-left-bar-hover-color);
    }
    
    #id_ColLeft_1 .mePrdTree .TreeGroup_2:last-child {
        border-bottom: 1px solid var(--shop-left-bar-hover-color);
    }
    
    #id_ColLeft_1 .mePrdTree .TreeNode_1:hover .ClassName {
        color: var(--shop-left-bar-hover-font-color);
    }

    /* 左側商品分類－TreeNode_2 （一般未顯示）（分類資料夾還有再下一層才會查看到） */

    #id_ColLeft_1 .dataPrdTree .TreeNode_2:hover {
        background: var(--shop-left-bar-hover-color-2);
    }
    
    #id_ColLeft_1 .dataPrdTree .TreeNode_2:hover .ClassName {
        color: var(--shop-left-bar-hover-font-color);
    }

    /* 加入購物清單按鈕 */

    body #ns_Main .PrdList .SaleBtn1, body #ns_Main .PrdList .SaleBtn2, body #ns_Main .PrdList .SaleBtn3 {
        background: var(--regular-btn-color);
        border: 1px solid var(--regular-btn-color);
        color: #fff;
    }

    body #ns_Main .PrdList .SaleBtn1:hover, body #ns_Main .PrdList .SaleBtn2:hover, body #ns_Main .PrdList .SaleBtn3:hover {
        background: var(--regular-btn-hover-color);
        border-color: var(--regular-btn-hover-color);
    }

    /* 商品售完提示 */

    .PrdListBlk .PrdList .SaleBtn7 {
        border: 1px solid var(--sold-out-color);
        background: var(--sold-out-color);
        color: #fff;
    }

    /* 頁數 */

    #id_ContentBottom #PageCtrl a:hover {
        color: var(--nav-bar-color);
    }

    /* PRDINFO */ 

    .buybox .buyBtnBlk .rtBuyNow .c5Buy {
        border: 1px solid var(--regular-btn-color);
        color: #fff;
        background-color: var(--regular-btn-color);
    }

    /* 購物後登錄頁面SHOPLOGIN */

    body #ns_Main .tbLoginForm input[type="submit"]  {
        background: var(--login-btn-color);
        color: #fff;
    }
    body #ns_Main input.txt_ShopLoginQryPwd {
        border-color: var(--login-btn-color);
        color: #333333;
    }


/* 會員中心 */

.membercenter-headline .meMsg_MsgBlk .meMsg_MsgTitle {
    font-size: 24px;
    line-height: 120%;
    margin-top: 50px;
    margin-bottom: 40px;
    color: var(--title-font-color);
}

.memTab .ClassImg:has(img[title="訂單查詢"])::before {
    content: '\f03a';
    font-family: 'FontAwesome';
    font-size: 24px;
    color: var(--regular-btn-color); 
}
.memTab .ClassImg:has(img[title="會員資訊"])::before {
    content: '\f007';
    font-family: 'FontAwesome';
    font-size: 24px;
    color: var(--regular-btn-color); 
}
.memTab .ClassImg:has(img[title="我的最愛"])::before {
    content: '\f004';
    font-family: 'FontAwesome';
    font-size: 24px;
    color: var(--regular-btn-color); 
}
.memTab .ClassImg:has(img[title="紅利點數"])::before {
    content: '\f51e';
    font-family: 'FontAwesome';
    font-size: 24px;
    color: var(--regular-btn-color); 
}
.memTab .ClassImg:has(img[title="訊息"])::before {
    content: '\f27a';
    font-family: 'FontAwesome';
    font-size: 24px;
    color: var(--regular-btn-color); 
}
.memTab .ClassImg:has(img[title="優惠券"])::before {
    content: '\f02b';
    font-family: 'FontAwesome';
    font-size: 24px;
    color: var(--regular-btn-color); 
}

    /* 會員中心－訂單查詢_按鈕調整 */

    body .BlockTD a, body .ShopInfoBtn21 {
        background: var(--regular-btn-color);
        color: #fff;
    }
    body .BlockTD a:hover, body .ShopInfoBtn21:hover {
        background: #333;
        color: #fff;
    }

    /* 會員中心－查詢個人資訊_QryReg */

    body input#btnQryRegRegister {
        background: var(--regular-btn-color);
        color: #fff;
    }
    body input#btnQryRegRegister:hover {
        background: #333;
        color: #fff;
    }

    /* 會員中心－修改個人資訊_RegForm */

    body .meCSS .meForm input[type=submit] {
        background: var(--regular-btn-color);
        color: #fff;
    }
    body .meCSS .meForm input[type=submit]:hover {
        background: #333;
        color: #fff;
    }

    /* 會員中心－訊息_按鈕調整 */

    body .contactPageForm .weForm span.btnUploadURL {
        background: var(--regular-btn-color);
        color: #fff;
        border-color: var(--regular-btn-color);
    }
    body .contactPageForm .weForm span.btnUploadURL:hover {
        background: var(--regular-btn-hover-color);
        color: #fff;
        border-color: var(--regular-btn-hover-color);
    }
    body .contactPageForm .weForm .button[type=submit] {
        background: var(--regular-btn-color);
        color: #fff;
        border-color: var(--regular-btn-color);
    }
    body .contactPageForm .weForm .button[type=submit]:hover {
        background: var(--regular-btn-hover-color);
        color: #fff;
        border-color: var(--regular-btn-hover-color);
    }




/* FOOTER */

#ns_Footer {
    background-color: var(--footer-color);
    margin-top: unset;
}

#ns_Footer #id_FooterRight3 .SiteMenu a span, #ns_Footer #id_FooterLeft3 .meMsg_Content, #ns_Footer #id_FooterCol .meMsg_Title span, #ns_Footer #id_FooterCol .listCopyrightBlock span {
    color: var(--footer-font);
}

#ns_Footer #id_FooterCol .listCopyrightBlock span a {
    color: var(--noon360-color);
}

    /* 常見問題區塊 FAQ */

    /* 修復商品導覽列與常見問題導覽列中間有白線問題 */

    #id_HeaderCol_1 #dataSiteTree .SiteNode_B {
        border: 0;
    }

    #ns_Header {
        border-bottom: none;
    }

    /* 常見問題導覽列顏色 */

    body #ns_Main .FAQMenu0 {
        background: var(--help-nav-bar-color);
    }
    
    body #ns_Main .FAQMenu1 {
        background: var(--help-nav-bar-color-dark);
    }




/* 未確認到的顏色 */

    /* ShopOrder （應該是會員中心－優惠券）*/

    body #ns_Main input#btnCouponCode, body #ns_Main input.txt_btnChgCouponCode  {
        background: var(--regular-btn-color);
        color: #fff;
    }
    body #cenShopInfoStep #ShopInfoStep .StepTable .StepItem .StepItem1 .badge .text {
        background: var(--regular-btn-color);
        border: 1px solid #e8e8e8;
        color: #fff;
    }
    body #ns_Main #cenShopInfoStep #ShopInfoStep .StepTable .StepItem:nth-child(3) .badge::before,
    body #ns_Main #cenShopInfoStep #ShopInfoStep .StepTable .StepItem:nth-child(5) .badge::before {
        background: var(--regular-btn-color);
    }
    body .underBtn .meMsg_MsgTitle_2 {
        background: var(--regular-btn-color);
        color: #fff;
    }
    body .choosePayType.choosed {
        background: var(--regular-btn-color);
        color: #fff;
    }
    body #ns_Main #cenShopInfoStep #ShopInfoStep .StepTable .StepItem:nth-child(1) .StepItem0 .badge .text, body #ns_Main #cenShopInfoStep #ShopInfoStep .StepTable .StepItem:nth-child(3) .StepItem0 .badge .text {
        background: #f5eacf;
    }
    
    /* PrdInfo_規格按鈕 （不知道是啥，找得到divPrdInfo，但找不到tablePrdSpec）*/

    body .divPrdInfo .tablePrdSpec .liOpt.isClk {
        background: var(--regular-btn-color);
    }
    body .divPrdInfo .tablePrdSpec .optname {
        color: #fff;
        background: #000;
    }
    body .divPrdInfo .tablePrdSpec .optname:hover {
        color: #fff;
        background: var(--regular-btn-color);
    }
    body .divPrdInfo .tablePrdSpec .liOpt.isClk .optname {
        color: #fff;
        background: var(--regular-btn-color);
    }
    body .divPrdInfo .tablePrdSpec .liOpt.disabled .optname {
        color: #fff;
    }
    
/* LIAM END */