@charset "utf-8";
/* ============================================================
 * 檔案:mobile_public.css
 * 用途:手機/平板版 全站共用樣式(手機漢堡選單、手機頁首頁尾等)
 * ------------------------------------------------------------
 * 【常見小修改速查】
 *   字體大小  → 搜尋  font-size      (例 font-size: 16px;)
 *   字型      → 搜尋  font-family    (全站預設字型設定在 public.css)
 *   文字顏色  → 搜尋  color
 *   背景顏色  → 搜尋  background  或  background-color
 *   外距(元素之間) → 搜尋  margin
 *   內距(框內留白) → 搜尋  padding
 *   粗體      → font-weight: bold;   置中 → text-align: center;
 * ============================================================ */

@media screen and (min-width:1200px){

}
@media screen and (max-width:1200px) and (min-width:992px){
    /* footer */
    #copyright{
        width: 100%;
        height: 25px;
        line-height: 25px;
        padding-right: 20px;
        text-align: right;
    }
    #footer_menu{
        float: left;
    }
}
@media screen and (min-width:992px){
    .show_mobilc{display: none;}
    #footer_phone{
        display:none;
    }
    .childen_menu{
        width:150px;
        top:0px;
        position: fixed;
        padding-top: 205px;
        z-index: 10010;
        opacity: 0;
        display: none;
        background-color:#FBEFDD;
    }
    #products_chi_menu{
        padding-top: 130px;        
    }
    .childen_menu ul{
        width: 100%;
        padding: 0px;	
        list-style: none;
    }
    .childen_menu ul li{
        width:100%;
        height: 41px;      
        font-size: 16px;
        margin-top: 35px;
        text-align: center;
        cursor: pointer;
        color: #000000;
    }
    #phone_user_login{
        display: none;
    }
}
@media screen and (max-width:992px){   
    /* Menu Start*/
    .show_pc{display: none;}
    #phone_menu_top{
        width:100%;
        height: 50px;
        
    }
    #web_header{
        width:100%;
        background-color: #F5F2EA;
        display: none;
    }
    .childen_menu{
        width:100%;
        height: 100px !important;
        display: none;   
        margin-top: -25px;
    
    }
    #abouts_chi_menu{
        height: 100px !important;
    }
    #products_chi_menu{
        height: 210px !important;      
    }
   
        .menu_active{
    color: #000 !important;

    }
    .menu_active .menu_en{
        color: #000;
    }
    .childen_menu ul{
        width: 100%;
        padding: 0px;	
        margin: 0px;
        list-style: none;
    }
    .childen_menu ul li{
        width:100%;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        color: #B28427;
    }
    
    #logo{
        display:none;
    }
    #menu ul{
        margin-top: 20px;
    }
    #menu ul li{
        margin-top:10px;        
    }
    #menu > ul > li{
        width:70%;
        margin: 0 auto;
        border-top: 1px solid #aaa;
         padding-top: 3px;
         padding-bottom: 3px;
    }
    #user_chi_menu{
        width: 70%;
        height: 45px;
        margin: 0 auto;
        padding-top: 8px;
        display: none;
            
    }
    #btn_user{
        width: calc(50% - 5px);
        height: 30px;
        line-height: 27px;
        float: left;
        border: 1px solid #aaa;
    }
    #btn_logout{
        width: calc(50% - 5px);
        height: 30px;
        line-height: 27px;
        float: right;
        border: 1px solid #aaa;
    }
    #icon_link{
        right:30px;       

    }
    #phone_menu_title{
        display: inherit;
    }
    #phone_user_id, #phone_user_login{
        width: 100%;
        display: inherit;
        text-align: center;
        padding-bottom: 5px;
        cursor: pointer;
    }
    #phone_btn_close{
        width:18px;
        height: 18px;
        float: left;
        margin-top: 16px;
        margin-left: 20px;
        cursor: pointer;
        background: url(/images/index/btn_close.png);
    }
    #phone_logo{
        width:62px;
        height: 17px;     
        position: absolute;
        left:50%;
        margin-left: -31px;
        margin-top: 16px;           
        background: url(/images/index/phone_logo.png);
    }
    .phone_buy_car{
        width:41px;
        height: 50px;
        float: right;
        margin-right: 20px;
        margin-top: 0px;
        background: url(/images/index/buycar.png) no-repeat top;           

    }
    .phone_car_num{
        width:20px;
        height: 20px;
        text-align: center;
        background-color: #fff;
        border-radius: 10px;
        float:left;
        margin-top: 33px;
        margin-left: 10px;
        font-family: 'Rasa', serif;
        color: #C9A063;

    }
    #phone_menu_title{
        width:100%;
        height:50px;
        background: #FFF;

    }
    #phone_header{
        width:100%;
        height: 50px;
        display:inherit;
        position: fixed;
        z-index: 11000;
        background: #FFF;

    }
    #btn_menu{
        width:23px;
        height: 17px;
        background:url(/images/index/menu_icon.png);
        float:left;
        margin-top: 16px;
        margin-left: 20px;
        cursor: pointer;

    }
    #phone_user_icon{
        width:18px;
        height: 22px;
        float: right;
        margin-right: 15px;
        margin-top: 13px;
        background: url(/images/index/icon_user.png);

    }
    #phone_buy_car1{
        width:21px;
        height: 41px;
        float: right;
        margin-right: 30px;
        margin-top: 10px;
        text-align: center;
        padding-top: 19px;
        padding-left: 3px;
        font-family: 'Rasa', serif;
        font-size: 12px;
        color: #aaa;
        background: url(/images/index/titlebuycar.png) no-repeat top;
    }
    /* ICON*/
    #web_buy_car, #web_user_icon, #web_user_list_icon{
        display: none;
    }

    /* FOOTER */
    #footer{

        display:none;
    }
    #phone_footer{
        width: 100%;


    }
    #footer_phone_menu{
        width:100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        border-top: 1px solid #878788;
        border-bottom: 1px solid #878788;

    }
    #footer_phone_menu a{
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color:#3E3A39;

    }
    #footer_phone_logo{
        width:100%;
        margin-top: 20px;
        text-align: center;


    }
    #footer_phone_logo_text{
        width:100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color:#3E3A39;         
        margin-bottom: 15px;
        margin-top: 10px;
    }
    #phone_copyright{
        width:100%;
        height: 60px;
        line-height: 20px;
        padding-top: 10px;
        border-top: 1px solid #878788;
        text-align: center;
        color:#898989;
    }
    #btn_to_top{
    width:51px;
    height: 51px;
    position: fixed; 
    right: 32px;
    bottom: 30px;
    background: url(/images/btn_to_top.png) no-repeat;
    display: none;
    cursor: pointer;
}
    /* Member Login*/
    #web_login_form{
        width:calc(100% - 40px) !important;
        display: none;
        left: 0;
        top:20px;
        margin: 20px;
    }

    #web_login_form input{
        width:calc(100% - 30px);
        height: 38px;
        border-radius: 20px;
        border:1px solid #AAA;
        padding-left: 15px;
        font-size: 14px;
    }
    #login_code{
        width:calc(100% - 190px) !important;
        margin-right: 10px;
        float: left;

    }
    #login_captcha{
        border-radius: 20px;
        cursor: pointer;
    }
    #btn_code{
        width:100px;
        display: block;
        overflow: hidden;
        border-radius: 20px;
        float: right;
        margin-right: 40px;

    }
    /* 忘記密碼*/
    #forget{
        width:calc(100% - 40px) !important;     
        left: 0 !important;
        top:20px !important;
        margin: 20px !important;
    }
    #forget input{
        width:calc(100% - 30px) !important;
        height: 38px;
        border-radius: 20px;
        border:1px solid #AAA;
        padding-left: 15px;
        font-size: 14px;
    }
      
}


/* ===== 分類欄(紅框)RWD:桌機視窗變矮可垂直捲動;手機支援 12 個分類 (2026) ===== */
@media screen and (min-width:992px){
    /* 桌機:.childen_menu 原為 position:fixed; top:0 但沒設高度與捲動,
       分類太多 + 視窗太矮時下面會看不到。加 bottom:0 變成滿版視窗高,並可垂直捲動。 */
    .childen_menu{
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
@media screen and (max-width:992px){
    /* 手機:產品分類子選單原本固定 height:210px(只放得下約 6 個),
       改為自動高度,最多 65% 視窗高、超過可捲動,即可容納 12 個。 */
    #products_chi_menu{
        height: auto !important;
        max-height: 65vh;
        overflow-y: auto;
    }
}