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

/* CSS Document */
@media screen and (min-width:1200px){
    /* about */

    #right_about{	
        padding-left: 70px;
        padding-top: 17px;
    }
    /* persistent*/
    #pers_01{
        width:310px;
        padding-top: 90px;   
        margin-top: -10px;
        margin-right: 30px;
        margin-bottom: 50px;
        float: left;
        background:url(/images/index/spoon.png)no-repeat;
    }
    /* products */
    .pro_lr_button{
        width: 1200px;
        margin-top: -320px;
        margin-bottom: 320px;
    }
    /* news */
    #news_form{
        width:984px;
        height: 400px;

    }
    .news_list{
        width: 328px;
        height: 430px;      
        padding:25px;

    }
    .news_lr_button{
        width: 1050px;
    }
     #btn_news_more{     
        margin-top: 300px;
    }
}
 @media screen and (max-width:1200px) and (min-width:992px){
    /* abuot */

    
    /* persistent*/
    #persistent{
        padding-top: 30px;
        background-image: none;
    }
    #pers_01{   
        width:310px;
        height: 330px;
        padding-top: 30px;
        margin: 0 auto;
        position:static;      
    }
    #pers_02{
        width: calc(233px * 0.8);
        margin-left: 0px;
    }

    #pers_03{
        width: calc(200px * 0.8);
    }
    #pers_04{
        width: calc(228px * 0.8);
        margin-right: 0;
    }
    #pers_img{
        width:600px;
        margin: 0 auto;

    }
    #pers_img:after{
        content:".";
       height:0;
       visibility:hidden;
       display:block;
       clear:both;
    }
    
    /* JAM ROAD */
    #jam_road{
        height: 750px;
        padding-top: 50px;
    } 
    /* Fruit Master  */
    #left_fruit_master{
        width:450px;
    }
    #right_fruit_master{
       width:400px;
    }
    /* products*/
    #products_img{
        width: calc(100% - 80px);

    }
    .pro_lr_button{
        width: calc(100% - 20px);
        margin-top: -320px;
        margin-bottom: 320px;
    }
    /* news*/
    #news{
        height: 730px;
    }
    #news_form{
        width:calc(100% - 80px);          
    }        
    .news_list{
        width: 260px;          
        padding:10px;       
    }
    .news_lr_button{
        width: calc(100% - 20px);
        margin-top: -250px;     
    }
     #btn_news_more{     
        margin-top: 280px;
    }

}
 @media screen and (min-width:992px){
     #banner2{background-image:url(/images/index/banner2.jpg);}  
     #banner3{background-image:url(/images/index/banner3.jpg);}  
     
    #banner, #about, #persistent_bg_top,  #persistent, #persistent_bg_down, #jam_road, #real_fruit_use, #fruit_master, #fruit_master_list_img, #brand, #products, #news, #partner{
        width: calc(100% - 150px);
        margin-left: 150px;
    }
     /* Banner */
    #banner_prev, #banner_next{
         display: none;           
    }
    #btn_down{
        width: 104px;
        height: 135px;
        background:url(/images/index/btn_down.png);
        position:absolute;
        z-index: 22001;		
        top:80%;
        left:50%;
        margin-left: 23px;
        cursor: pointer;
    }

    /* persistent */
    #phone_persimg{
        display:none;
    }
    .btn_per_more{
        display: none;
    }
     .pers_lr_button{
         display:none;
     }
    /* JAM ROAD */
    #jam_road_list_phone{
        display:none;
    }
     .jam_lr_button{
         display: none;
     }
    /* FRUIT MASTER*/
     #phone_fruit_master_1,#phone_fruit_master_2,#phone_fruit_master_3,#phone_fruit_master_4{
         display:none;
     }
     /* Fruit Master  */
    #btn_phone_fruit_master_more{
        display:none;
    }
}
@media screen and (max-width:992px){
    
    /* banner */
    #btn_down{
        width: 23px;
        height: 26px;
        background:url(/images/index/phone_btu_scroll.png);
        position:absolute;
        z-index: 22001;		
        top:90%;
        left:50%;
        margin-left: -11px;
        cursor: pointer;
    }
    #banner2{background-image:url(/images/index/m_banner2.jpg);} 
    #banner3{background-image:url(/images/index/banner3_phone.jpg);} 
    /* banner */
    .carousel-indicators{
        display:none;

    }
    /* about */
    #about_form{
        padding-top: 50px;
    }
    #left_about{
        padding-left:20px;
        padding-right: 20px;
    }
    #right_about{
        padding-left: 30px;
        padding-right: 30px;        
    }
    #right_about h1{
        display: none;
    }
    #about_txt{
        width:100%;
        font-size: 20px;
    }
    #about_content{
        width:100%;
        font-size: 13px;
    }
    #btn_about_more{
        margin: 0 auto;
        color: #666;
        border-color: #666;
    }
    /* persistent*/
    #persistent{
        min-height: 600px;
        padding-top: 0px;
        background-image: none;
    }
    #pers_01{ 
        padding-top: 50px;
        width:210px;                        
        position:static;
        background-image: none;                   
        float:none;
        margin: 0 auto;                
    }
    #perstxt1{
        font-size:26px;        
    }
    #perstxt2{
        font-size: 20px;
    }
    #perstxt3{
        font-size: 13px;
    }
    #pers_02, #pers_03, #pers_04{
        display:none;
    }
    #phone_persimg{
        padding-top: 50px;
        margin: 0 auto;
        width:80%;
        
    }
    #phone_persimg div{
        width:180px;
        position: relative;
        margin:0 auto;
    }
    #phone_persimg img{
        max-width:180px;            
    }
    #phone_persimg_more{
        position: relative;
        width: 180px;
        height: 40px;
        margin: 0 auto;
        margin-top: 50px;            
    } 
    .pers_lr_button{
        width: calc(100%);
        padding-top: 50px;
        margin-bottom: 0px;
        
    }
    .btn_pers_prev{
        background: url('/images/index/btn_prev.png') no-repeat;
    }
    .btn_pers_next{
        background: url('/images/index/btn_next.png') no-repeat;
    }
    
    /* Jam road*/
    #jam_road{
        height:600px;
        padding-top: 30px;
        overflow: inherit;
    }
    #jam_road_list{
        display: none;
    }
    #jam_road_title{
        width:100%;
        height: 180px;   
        margin: 0 auto;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
      
    }
    #jam_road_txt1{
        width: 100%;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
        font-size: 26px;
    }
    #jam_road_txt2{
        width:100%;
        font-family:"新細明體";
        font-size: 20px;
        font-weight: bolder;
        letter-spacing: 2px;
    }
    #jam_road_txt3{
        font-size: 13px;
        line-height: 25px;
        letter-spacing: 2px;
        font-weight: 100;
        margin-top: 20px;
    }
    #jam_road_list_phone{       
        padding-top: 50px;
        
        margin: 0 auto;
        width:80%;
        font-size: 17px;
        padding-bottom: 20px;

    }
    #jam_road_list_phone > div{        
        width:220px;
        position: relative;
        margin:0 auto;      
        text-align: center;    
    }
    #jam_road_list_phone img{
        max-width:220px;    
        padding: 20px;
        margin-bottom: 20px;
    }
    #jam_road_list_line{
        display: none;
        
    }
    #btn_jam_road{
        margin-top: 80px;
        
    }
    .jam_lr_button{
        width: calc(100%- 20px);
        margin-top: -300px !important;        
    }
    .btn_jam_prev{
        background: url('/images/index/btn_prev.png') no-repeat;
    }
    .btn_jam_next{
        background: url('/images/index/btn_next.png') no-repeat;
    }
    /* Real Fruit Use */
    #real_fruit_use{ 
        height: 600px;
    }
    #real_fruit_use_title{
        width:100%;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }
    #real_fruit_left{
        height:150px;
        background:url(/images/index/realfruit_phone_img.png) no-repeat right;
    }
    #real_fruit_right{
        display:none;
    }
    #real_fruit_text1{
        font-size: 26px;
    }
    #real_fruit_text2{
        font-size:20px;
        letter-spacing: 2px;
    }
    #real_fruit_text3{
        font-size:13px;
        letter-spacing: 2px;
    }
    #btn_real_fruit{
        margin-top: 20px;      
    }
    /* FRUIT MASTER START*/
    #left_fruit_master,#right_fruit_master{display:none;}
    #phone_fruit_master_1{
        font-size:28px;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";     
        color:#1F6145;
        text-align: center;
    }
    #phone_fruit_master_2{
        text-align: center;
        font-family:"細明體-ExtB";
        font-size:20px;
        color:#231815;
        font-weight: bold;
    }
    #phone_fruit_master_3{
        text-align: center;
    }
    #phone_fruit_master_4{
        text-align: center;
        font-size :13px;
        color:#727171;
        margin-top: 40px;
        line-height: 30px;
        letter-spacing: 2px;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 30px;
    }
    #fruit_master_info{
        display:none;
    }
    /* FRUIT MASTER END*/
    /* brand*/
    #brand{
        display: none;
    }
    /* products start*/
    .products_name_en{
        display: none;
    }
    .products_name{
        font-size:13px;

    }
    .products_item, .products_price{
        width:100%;
        height: 25px;
        padding:0px;
        text-align: center;
        float: inherit;
    }   
    #products_img{
        width: calc(100% - 60px);
    }
    .products_list{
        padding:30px !important;            
    }   
    .pro_lr_button{
        width: calc(100% - 20px);          
        margin-top: -200px;       
    }
    .btn_pro_prev{
        background: url('/images/index/btn_prev.png') no-repeat;
    }
    .btn_pro_next{
        background: url('/images/index/btn_next.png') no-repeat;
    }
    .pro_lr_button{
        width: calc(100% - 20px);
        margin-top: -350px;
        margin-bottom: 320px;
    }

    /* news start*/
    #news{
        height: 730px;
    }
    #news_form{
        width:calc(100% - 80px);           
    }
    .news_list{
        width: 260px;          
        padding:10px;       
    }
    .news_lr_button{
        width:100px;   
        margin-top: 40px;

    }
    .btn_news_prev{
        background: url('/images/index/btn_news_prev.png') no-repeat;
    }
    .btn_news_next{
        background: url('/images/index/btn_news_next.png') no-repeat;
    }
    #btn_news_more{
        display:none;
    }

    /* persistent start */
    .btn_pers_prev{
        background: url('/images/index/btn_prev.png') no-repeat;
    }
    .btn_pers_next{
        background: url('/images/index/btn_next.png') no-repeat;
    }
    #btn_pers_more{
        display:none;
    }
    /* persistent end*/

}