@charset "utf-8";

/* 如果使用者之視窗寬度小於 1000px，將會再載入這裡的 CSS。*/
@media screen and (max-width: 1000px) {

    /*  nav  */
    nav { background: rgba(255, 255, 255, 0.9); }

    /*  nav  */
    nav {  border-bottom:3px #84e3ed solid; padding-bottom:5px;}
    .menu>li {width:10%;} 
    .menu>li:nth-child(1) { width:15%;}
    .menu>li:nth-child(2) { width:15%;}

    /* product */
    .product-lis li { width:31.33%; }

    /* product detaile */
    .product-cont {  padding: 10px;}
    .product-box { display:block; height:auto; }
    .product-info { padding:0;}
    .product-photo { height:auto; padding-right:0;}
    .product-info .cart { position: relative; margin-top:10px;}
    .product-info .cart a { padding:0 10px; }
    .qtyInputBox input { width:30px;}
    .product-lis li .quantity-num { width:90px;}
    .product-info .price { text-align:center; position:relative;  bottom:0; padding:15px 0; font-size:30px;}

    .product-info .briefly { line-height:1.6em; height: auto; overflow-y: inherit; }
    .product-title { padding:10px 0 20px 0;}


    /* index-catalog */
    .index-catalog { padding:0 10px;}
    .index-catalog .index-catalog-banner { display:none;}
    .index-catalog .index-catalog-list {  padding-left:0px; float:none; width:100%; } 

    /* i-recommend */ 
    .i-recommend { margin:0 -0.5%; padding:0 10px; }

    /* activity */
    .activity ul li { width:33.33%;}
    .activity ul li a { height:150px; }

    /* index-highlight */
    .index-highlights ul li {width:33.33%; height:150px;}


    /*  page  */
    .page-box {  border-radius:10px; overflow: inherit; padding:0 10px; }
}


/* 如果使用者之視窗寬度 >= 680px，將會再載入這裡的 CSS。*/
@media screen and (max-width: 680px) {


    .wallpeper { background:rgba(255, 255, 255, 0.9); }
    .main-box { max-width:1200px; margin:0 auto; padding:0; }
    .left-bg { display:none;}

    /*  header */
    header { height:auto; margin-top:50px; position:static;}
    header .logo { padding:0 10px; text-align:center; }
    header .logo img { width:auto; height:50px;}


    /* member   */
    .login-info { position: relative; right:0; top:0; text-align:center; padding-bottom:10px;}

    ul.top-tool { position: fixed; left:0px; top:0px; right:50px; z-index:1005;}
    ul.top-tool li .search-btn { padding:0px 10px;}
    ul.top-tool li img { height:22px; width:auto; padding:0;}
    ul.top-tool li span { display:none;}

    /*  nav  */
    nav { display:none; }
    .slicknav_menu li.cart a img { height:16px; width:auto; padding-right:5px; vertical-align:middle; margin-top:-4px;}
    .menu li>.sub { opacity:1; position: relative; visibility: visible;}


    /*  banner  */
    .banner { padding:0;}

    /*  首頁模組  */
    #myMenu ul li { font-size:14px; border-left:3px #c23b42 solid;}
    #myMenu ul li.active { color:#c23b42; border-left:3px #F93 solid;}

    .i-features .item { width:50%;}

    .index-lis { padding:10px;}
    .item-lis { height:auto;}
    .item-lis .photo { float: none; width:100%; }

    .item-lis .item-info { margin-left:0px; padding-bottom:20px;}
    .item-lis .item-info span.time { padding-top:10px; display:block;}
    .item-lis .item-info p { height: auto; overflow: auto; }

    /*  index-news  */
    .i-news { padding:20px 0 50px 0; display: block; }
    .i-news .title {  width:100%; padding-bottom:20px; }
    .i-news .news-list { -webkit-flex: 1; flex: 1; padding:0 30px; }
    .i-news .news-list .lis a { background:url(../images/i-news-dot.jpg) 0 10px no-repeat; color:#333; display:block; font-size:14px; padding:3px 0 3px 15px;}
    .i-news .news-list .lis a:hover { color:#F60;}
    .i-news .news-more { display: block; width: 100%; padding-top:30px;}

    /* member   */
    .order-lis ul li { display:block; border-bottom:1px #999999 solid; }
    .order-lis ul li.th-lis { display:none;}
    .order-lis ul li.th-lis>div { font-size:12px; display: -webkit-flex; display:flex; -webkit-align-items: center; align-items: center;  -webkit-justify-content: center;  justify-content: center;}
    .order-lis ul li .number { display:inline-block; }
    .order-lis ul li .time { display:inline-block; font-size:12px; }
    .order-lis ul li .finish {  display:inline-block;}
    .order-lis ul li .unpaid {display:block; text-align:left;}
    .order-lis ul li .preparing { display:block; text-align:left;}
    .order-lis ul li .shipped { display:block; text-align:left;}
    .order-lis ul li .name { display:block; text-align:left;}
    .search-bar {   display: block;}
    .search-bar .kyeword { width:100%; padding:0 0px 10px 0;}
    .search-bar .timearea { padding-left:0px;}


    /* news */ 
    .news-list { padding:0px; min-height:300px;}
    .lis-itim { width:100%; margin:0; float:none;}
    .lis-itim .time { font-size:16px; color:#4899a2; padding: 10px 0; text-align:center; border-bottom:1px #d7d7d7 solid; display:block; }
    .lis-itim h4 a { color:#535353; font-size:16px; padding:10px 5px; line-height:1.4em; display:block; height:auto; overflow:hidden;}

    .farmer-lis .farmer-item { width: calc(33.3% - 10px);}
    .farmer-lis .farmer-item h3 { height: auto; overflow: auto;}
    .farmer-lis .farmer-item h3 a { height: 2.8em; line-height: 1.4em; overflow: hidden; display: block;}


    /* message */
    .message-box { padding:10px; }

    /*  page  */
    .page-title h3 { padding:10px 45px;}

    /*  left-menu  */
    .left-menu { height:200px; overflow:scroll; margin-bottom:30px; border-bottom:3px #CCCCCC solid;  }
    .m-left-menu { display:block; width:100%; background:#5dc2cc; color:#ffffff; text-align:center; margin-bottom:10px; line-height:30px; border:0; padding:10px; font-family:Microsoft JhengHei; font-size:16px; }


    /* 首頁模組 */
    .inde-video { padding:10px;}
    .inde-video iframe { height:200px; }
    .inde-pro { padding:10px;}
    .inde-pro a { height:120px;}
    .inde-fbfans { padding:10px;}
    .inde-fbfans iframe { display:block; width:100%; height:220px; }
    .inde-event { padding:10px;}
    .inde-event-box a { height:120px;}
    .inde-event-box:nth-child(odd) a { margin-right:3px;}
    .inde-event-box:nth-child(even) a { margin-left:3px; }


    /* index-catalog */

    .index-catalog .index-catalog-list ul li { width:50%; padding-bottom:20px;}
    .index-catalog .index-catalog-list ul li h3 {  height:5.6em;}
    .index-catalog .index-catalog-list ul li .price { text-align: center; }

    /* i-recommend */ 
    .i-recommend { margin:0; }
    .i-recommend .i-cota { float:none; width: 100%; margin:0 0 20px 0; }

    /* activity */
    .activity ul li { width:50%;}
    .activity ul li a { height:120px; }
    .activity ul li h3 { height:6em; }

    /* index-highlight */
    .index-highlights ul li {width:50%; height:120px;}


    /* product */
    .product-lis li {width:48%;}

    /* product detaile */
    .pro-detail-box { padding-left:0px;}
    .product-cont {  padding: 10px;}
    .product-box { display:block; height:auto; }
    .product-info { padding:0;}
    .product-photo { height:auto; padding-right:0;}
    .product-info .cart { position: relative; margin-top:10px;}
    .product-info .cart a { padding:0 10px; }
    .qtyInputBox input { width:30px;}
    .product-lis li .quantity-num { width:90px;}
    .product-info .price { text-align:center; position:relative;  bottom:0; padding:15px 0; font-size:30px;}
    .product-title { padding:10px 0 20px 0;}

    /* login */
        ul.tabs li {  font-size:12px;}
    .page-box .login-bg { background: rgba(227, 227, 225, 0.8);}

    /* footer */
    footer .bg { min-height:100px; display:block;}

    .login .form-lis .code img.img-code { height:auto; width:100%; float:none;}

    /*  page  */
    .page-box { margin:0 10px; }
    .page-box .content-box { min-height:300px; padding: 10px 0px 30px 0px;}

    /* cart */
    .cart-table ul li { display: block; position:relative; padding-bottom:35px;}
    .cart-table ul li .photo { float:left; width:50%;}
    .cart-table ul li .name, 
    .cart-table ul li .quantity, 
    .cart-table ul li .price,
    .cart-table ul li .subtotal
    { float:left; width:50%; padding-bottom:5px;}
    .cart-table ul li.th-lis { display:none;}
    .cart-table ul li .del { position:absolute; left:0; bottom:5px; width:50%; }
    .cart-table ul li .delivery { text-align:right; float:left; width: 50%; padding-right:5px;}
    .cart-table ul li .total { text-align:left;}
    
    .cart-table ul li .price span,  .cart-table ul li .subtotal span { display: inline-block; color:#999; padding-right:5px;}
    .cart-table ul li .quantity { position:absolute; bottom:10px; right:0px;}
    .cart-table ul li .space {  text-align: center; padding:5px 0; }
    .delivery-member-info { display:block;}
    .delivery-member-info span { display:block;}
    .delivery-member-info input { width:100%; }
    .delivery-member-info input.checkbox { width:auto;}


    /*  content  內文  */
    .img-left { padding-right:0px;}
    .img-right { padding-left:0px;}

    /*  about  內文  */
    .about-pro { text-align: center; float:none;}
    
    /* form */
    .form .form-lis .title { width:70px;}
    .member-form .form-lis { display:block; padding:5px; background:#F3F3F3;}
    .member-form .form-lis .title { background: #CCC; color:#ffffff; width:100%; line-height:25px; text-align:left; border-left:0;}
    .member-form .form-lis .data { width:100%;}

    /* 框架 */
    .col-box { display: block; margin:0;}
    .col-box img { max-width:100%; width:auto; height:auto;}
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 { width:100%;margin:0;}

    footer .bg .foot-info > div { display:block; padding:0 5px;}
}

@media screen and (max-width: 480px) {
    .farmer { display: block;} 
    .farmer .photo { width: 100%;  margin: 0;}
    .farmer .photo .pic { width: 200px; margin: 0 auto;}
    .farmer-lis .farmer-item { width: calc(50% - 10px);}
    .farmer-lis .farmer-item h3 a { height: 2.8em; line-height: 1.4em; overflow: hidden;}
    .farmer-links .farmer-link-item { width: calc(33.3% - 10px);}
    .farmer-links .farmer-link-item h3 a { font-size: 12px;}
    

    
}