@charset "utf-8";
/* ============================================================
 * 檔案:public.css
 * 用途:全站共用樣式(左側選單、Logo、頁首頁尾、按鈕、會員登入彈窗等)。★每一頁都會載入,改全站通用的東西在這裡
 * ------------------------------------------------------------
 * 【常見小修改速查】
 *   字體大小  → 搜尋  font-size      (例 font-size: 16px;)
 *   字型      → 搜尋  font-family    (全站預設字型設定在 public.css)
 *   文字顏色  → 搜尋  color
 *   背景顏色  → 搜尋  background  或  background-color
 *   外距(元素之間) → 搜尋  margin
 *   內距(框內留白) → 搜尋  padding
 *   粗體      → font-weight: bold;   置中 → text-align: center;
 * ============================================================ */
/* 【public.css 分區目錄】
   ① 全站基礎設定(字型/字級/文字色)   ② 通用按鈕
   ③ 左側選單(Logo/選單/社群圖示)     ④ 購物車鈕   ⑤ 會員鈕
   ⑥ 登入彈窗   ⑦ 會員下拉   ⑧ 購物車下拉   ⑨ 頁尾   ⑩ 回頂鈕
   檔尾:左側選單 RWD(可捲動+圖示固定)修正                       */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); 
/* font-family: ‘Noto Sans TC’, sans-serif; */
/* ─────────────────────────────────────────────────────────
   ① 全站基礎設定:預設字型、文字大小、文字顏色
      ★想改「全站預設字型 / 文字大小」→ 改下面 html,body 的 font-family / font-size
   ───────────────────────────────────────────────────────── */
html,body{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 12px;  
    font-weight:100;
}
div{outline: none;}
ul{margin: 0px;padding: 0px;list-style: none;}

/* Button */
/* ───── ② 通用按鈕樣式(圓角綠色按鈕等,多頁共用) ───── */
.btn_center{
    width: 180px;
    height: 35px;  
    font-weight: 400;
    line-height: 30px;      
    margin: 0 auto;        
    border: 1px solid #666;
    border-radius: 20px;
    text-align: center;
    color: #666;
    font-size: 16px;		
    cursor: pointer;
    display: block;
    font-weight: 400;
    transition: 0.25s;
}
.btn_center:hover, .btn_center:focus{
    text-decoration:none;
    color: #FFF;
    box-shadow: inset 180px 0 0 0 #666; 
}
.btn_center_1{
    width: 180px;
    height: 35px;
    font-weight: 400;
    line-height: 30px;      
    margin: 0 auto;        
    border: 1px solid #666;
    border-radius: 20px;
    text-align: center;
    color: #666;
    font-size: 16px;		
    cursor: pointer;
    display: block;
    font-weight: 400;
    transition: 0.25s;
}
.btn_center_1:hover, .btn_center_1:focus{
    text-decoration:none;
    color: #FFF;
    box-shadow: inset 180px 0 0 0 #666;             
    
}
/* Menu Start*/
/* ─────────────────────────────────────────────────────────
   ③ 左側固定選單區(每頁左邊那一條)
      #web_header=整條側欄  #logo=商標  #menu=選單清單
      .menu_tw=中文選單字   .menu_en=英文小字   #icon_link=底部 IG/FB 圖示
      ★想改選單「字體大小」→ 改 .menu_tw / .menu_en 的 font-size
      (本檔最底部另有一段『選單可捲動 + 圖示固定底部』的 RWD 修正)
   ───────────────────────────────────────────────────────── */
#web_header{
    width: 150px;	
    background-color:#FBFBFC;
    position: fixed;
    z-index: 31000;

}
#phone_header{
    display:none;
}


#logo{
    width: 73px;
    height: 73px;
    margin-left: 38px;
    margin-top: 56px;
}
#logo img{
    width: 100%;
}
#phone_menu_title{
    display: none;
}
#phone_user_id{
    display:none;
    
}
#menu ul{
    width: 100%;
    padding: 0px;
    margin-top: 65px;		
    list-style: none;
}
#menu ul li{
    width:100%;
    margin-top: 35px;
    text-align: center;
    cursor: pointer;
}
#menu ul li:hover{
    color: #999;
}
.menu_tw{

    font-size: 16px;
}
.menu_en{ 
    font-family: 'Rasa', serif;
    font-size: 12px;
    color:#AAA;
}
#icon_link{
    width: 62px;
    height: 50px;
    position:absolute;
    text-align: center;
    bottom: 0px;
    margin-left: 45px;
    
}
#icon_link img{
    width:25px;
    height: 25px;
}
#btn_icon_fb{
    float: right;
    
}
#btn_icon_ig{
    float: left;
 
}



.menu_active{
    color: #B28247 !important;
    
}
.menu_active .menu_en{
    color: #B28427;
}
/* Menu End*/
/* ICON */
/* ───── ④ 右上角:購物車圓鈕 + 數量紅點 ───── */
#web_buy_car{
    width:61px;
    height: 90px;
    position: fixed;
    right:50px;
    top:40px;
    background: url(/images/index/web_buycar.png) no-repeat top;
    z-index: 11000;
    font-family: 'Rasa', serif;
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
}    
#web_buycar_num{
    width:24px;
    height: 24px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    float:left;
    margin-top: 50px;
    margin-left: 20px;
    font-family: 'Rasa', serif;
    color: #C9A063;
    font-size: 16px;
}
/* ───── ⑤ 右上角:會員(人像)圓鈕 ───── */
#web_user_icon, #web_user_list_icon{
    width:61px;
    height: 61px;
    position: fixed;
    right:130px;
    top:40px;
    
    z-index: 11000;
    cursor: pointer;
}
#web_user_icon {
   background: url(/images/index/web_user_icon.png) no-repeat top; 
}
#web_user_list_icon{
    background: url(/images/index/web_user_icon_login.png) no-repeat top; 
}
/* 會員登入*/
/* ─────────────────────────────────────────────────────────
   ⑥ 會員登入彈窗(點右上角人像跳出)
      Email/密碼/驗證碼欄位、登入/取消鈕、註冊/忘記密碼連結
      #login_captcha=驗證碼圖片  #login_code=驗證碼輸入框
   ───────────────────────────────────────────────────────── */
#web_login_form{
    width:400px;
    height: 308px;
    background: #FFF;
    position: fixed;
    left:50%;
    top:50%;
    margin-left: -125px;
    margin-top: -159px;
    z-index: 60000;  
    display: none;
    border: 1px solid #CCC;
  

}
#web_login_form ul{
    width:100%;   
    height: 266px;
    padding-top: 30px;
    padding-left: 30px;
}
#web_login_form ul li{
    width:100%;
    height: 55px;
    list-style: none;

}
#web_login_form input{
    width:320px;
    height: 38px;
    border-radius: 20px;
    border:1px solid #AAA;
    padding-left: 15px;
    font-size: 14px;
}
#login_code{
    width:155px !important;
    margin-right: 10px;
    float: left;
    
}
#login_captcha{
    border-radius: 20px;
    cursor: pointer;
}
#btn_code{
    width:155px;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    float: right;
    margin-right: 40px;

}
#btn_cancel{
    width:50%;
    height: 40px;
    border:none;
    float: left;
    font-size: 14px;
    cursor: pointer;
    display: block;
    background: #efefef;
}
#btn_login{
    width:50%;
    height: 40px;
    border:none;
    float:right;
    background-color: #1F6145;
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
    display: block;
}
#login_title_text{
    height:35px !important;
    padding-left: 5px;

}
#text_login{
    font-size: 13px;
}
#text_remember{
    font-size: 13px;
    float: right;
    color:#AAA;
    margin-right: 30px;
}
#text_register{
    font-size:13px;
    float: right;
    color:#179162;
    margin-right: 50px;

}
#login_mess{
    text-align: center;
    color: #FF0000;
    padding-right: 35px;
    font-family: "微軟正黑體";
    font-size: 14px;

}
/* 會員選單 START*/ 
/* ───── ⑦ 會員下拉選單(登入後點人像出現) ───── */
#web_user_list_form{
    width:202px;
    height: auto;
    background: url(/images/index/member_login_form.png);
    position: fixed;
    z-index: 11000;
    right:102px;
    top:110px;
    display: none;
    padding: 35px;
    padding-top: 45px;
}    
#web_user_list_form ul{
    width:100%;
    list-style: none;


}
#web_user_list_form ul li{
    width:100%;
    height: 44px;
    line-height: 44px;
    font-size: 16px;        
    padding-left: 15px;
    cursor: pointer;
}
#web_user_list_form ul li i{
    margin-right: 15px;
}
.user_list_active{
    color:#88A6A2;
}
 /* 會員選單 END*/ 
/* 購物車清單 START*/
.web_buycar_list_hide{
    display: none;
}
/* ───── ⑧ 購物車下拉清單(點購物車跳出的小視窗) ───── */
#web_buycar_list_form{
    width:453px;
    position: fixed;
    z-index: 11000;
    right: 23px;
    top:110px;
    display: none;
}
#web_buycar_list_header{
    width:453px;
    height: 30px;
    background: url(/images/index/web_buycar_list_header.png) no-repeat;
}
#web_buycar_list_body{
    width: 453px;
    min-height: 50px;
    box-sizing: border-box;
    padding-left: 11px;
    padding-right: 11px;
    background: url(/images/index/web_buycar_list_body.png);        
}
#web_buycar_list_body:after{
    clear : left;
    content : '.';
    display : block;
    height : 0;
    overflow : hidden;

}
#web_buycar_list_footer{
    width:453px;
    height: 19px;
    background: url(/images/index/web_buycar_list_footer.png) no-repeat;
}
#web_buycar_list_title{
    width:100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #aaa; 
    font-size: 14px;
    padding-left: 30px;
}
.web_buycar_space{
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 16px;
            
        }
.buycar_img{
    width:70px;
    height: 45px;        
    overflow: hidden;
    text-align: left;
    float: left;

}
.buycar_img img{
    width: 20px;
}
.buycar_name{
    width:150px;
    height: 45px; 
    float: left;
    text-align: left;
}
.buycar_price{
    width:60px;
    height: 45px;
    text-align: center;
    float: left;        
}
.buycar_num{
    width:60px;
    height: 45px; 
    float: left;
    text-align: center;
}
.buycar_del{
    width: 60px;
    height: 45px;     
    float: left;
    text-align: center;
}
.web_buycar_list{
    width:100%;
    height: 55px;
    line-height: 55px;
    padding-left: 30px;
    border-bottom: 1px dotted #AAA;
    font-size: 14px;
}
.btn_buycar_list_del{
    width:28px;
    height: 28px;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 13px;
    background: url(/images/index/btn_buycar_del.png);
}
#web_buycar_list_total{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-size: 14px;
    padding-left: 46px;
}
#web_buycar_button{
    width:100%;
    height: 50px;
    padding-left: 46px;
    padding-right: 20px;
}
#btn_to_buycar{
    width:100%;
    height: 35px;
    border: none;
    background: #C9A063;
    color:#FFF;
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
}
.text-align-left{
    text-align: left;        
}
.text-align-center{
    text-align: center;        
}    

/* 購車清單 END*/
/* footer start*/
/* ─────────────────────────────────────────────────────────
   ⑨ 頁尾(每頁最底部)
      #footer_logo=頁尾商標  #footer_menu=頁尾連結列  #copyright=版權文字
   ───────────────────────────────────────────────────────── */
#footer{
    width: calc(100% - 150px);        
    height: 60px;
    
    margin-left: 150px;

}
#footer_logo{
    margin-top: 20px;
    margin-left: 50px;
    float: left;
}
#footer_logo_text{
    margin-top: 20px;
    float: left;
    margin-left: 10px;

    font-size: 14px;
    color:#000;
}
#footer_menu{
    width:500px;        
    padding-top:25px;      
    font-size: 14px;  
    margin: 0 auto;
    text-align: center;        

}
#footer_menu a{
    width:100px;
    height: 14px;
    line-height: 14px;
    display: block;
    float: left;
    border-right: 1px solid #878788;
    color:#000;
}
#footer_menu a:nth-child(5){
    border-right: none;
}
#footer_menu a:hover{text-decoration: none;}
#copyright{
    float:right;
    font-size: 12px;
    margin-right: 40px;
}
/* footer end*/
/* ───── ⑩ 「回到頂部」按鈕 / 輸入框錯誤紅框 ───── */
#btn_to_top{
    width:51px;
    height: 51px;
    position: fixed; 
    right: 50px;
    bottom: 100px;
    background: url(/images/btn_to_top.png) no-repeat;
    display: none;
    cursor: pointer;
}
.btn_click{
    cursor: pointer;
}

.input_err{
    border: 1px solid #FF0000 !important;
    color:#FF0000;
}
.input_err::placeholder{
    color:#FF0000 !important;
}
#btn_remail{
    width: 150px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #CCC;
    background: #FFF;
    cursor: pointer;
    transition: all .3s ease; 
    display: none;
}
#btn_remail:hover{
    border-radius: 15px;
    color: #FFF;
    background: #666;
    border: 1px solid #666;

}
/* 忘記密碼*/
#forget{
            width:400px;
            height: 300px;
            background: #FFF;
            position: fixed;
            left:50%;
            top:50%;
            margin-left: -125px;
            margin-top: -150px;
            z-index: 30000;                   
            border: 1px solid #CCC;
            letter-spacing: 2px;
            display: none;
            overflow: hidden;
        }
        .step{
            width:100%;
            height: 258px;
            padding: 30px 30px 0px 30px;
            
        }
        .forget_title{
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            font-weight: 400;
        }
        .forget_ms{
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            color: #aaa;
        }
        .forget_input{
            width: 100%;
            height: 60px;
            line-height: 70px;
            
        }
        #forget input{
            width:320px;
            height: 38px;
            border-radius: 20px;
            border:1px solid #AAA;
            padding-left: 15px;
            font-size: 14px;
        }
        .forget_mess{
            font-size: 13px;
            font-weight: 400;
            color:#e60012;
            padding-left: 15px;
        }
        .btn_forget_cancel{
            width:50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border:none;
            float: left;
            font-size: 14px;
            cursor: pointer;
            display: block;
            background: #efefef;
      
        }
        .btn_forget_send{
            width:50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border:none;
            float:right;
            background-color: #1F6145;
            color: #FFF;
            font-size: 14px;
            cursor: pointer;
            display: block;
            font-weight: 400;
        }
        #mess1, #mess2,#step2, #step3{
            display: none;
        }      

/* ===== 左側選單 RWD 修正:選單可捲動、社群圖示固定在底部 (2026) ===== */
#web_header{
    top: 0;
    height: 100vh;
    overflow: hidden;            /* 整個側欄不捲動,只讓內部選單捲動 */
    display: flex;
    flex-direction: column;
}
#web_header #logo{
    flex: 0 0 auto;              /* Logo 固定在頂部 */
}
#web_header #menu{
    flex: 1 1 auto;             /* 選單佔據中間剩餘空間 */
    min-height: 0;             /* 允許收縮,讓內部可垂直捲動 */
    overflow-y: auto;          /* 只有選單本身出現捲軸 */
    overflow-x: hidden;
}
#web_header #icon_link{
    position: static;
    bottom: auto;
    flex: 0 0 auto;            /* 社群圖示固定在底部,不隨選單捲動 */
    margin-top: 35px;          /* 與「聯絡我們」保持間距(與選單項目間距一致) */
    margin-bottom: 25px;       /* 與視窗底部保持間距 */
    padding-top: 5px;
}