@charset "utf-8";

@media screen and (max-width: 1200px) {
   .max-1200 { margin: 0 10px;}
}

@media screen and (max-width: 980px) {

   .Related-link.w-250,
   .index-facebook.w-250 { margin:  0 auto;}   

/* 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; max-height: none; 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%; } 



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

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


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

}   

@media screen and (max-width: 640px) {
   .index-area .flex-1 { width: 100%; flex: none; }
   .album .marquee > a { width: calc(33.3% - 10px); }
}

@media screen and (max-width: 480px) {

.Related-link.w-250 { width: 100%; }

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

.slicknav_menu { display: block;}

/*  header */
header { background:#7f9bd2; height:auto; margin-top:40px; position:static; background-size:cover;}
header .top-bg { background:url(../images/top-bg-img.jpg) top no-repeat; background-size: cover;}
header .logo { width:100px; padding:10px 10px; text-align:right;}
header .logo img { height:50px; width:auto; }
header .top-company-name {  font-size:14px; padding:10px;  color:#ffffff; line-height:1.2em;}
header .top-company-name span { display:none;}

/* member   */
.login-info { position: relative; right:0; top:0; text-align:center; padding:0 0 10px 0; display:block; width:100%;}

ul.top-tool { position: fixed; left:0px; top:0px; right:50px; z-index:1005; padding-left:10px; height:40px;}
ul.top-tool li .search-btn { padding:0px 10px;}
ul.top-tool li a { padding:8px 0 8px 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>span { }
.menu li>.sub { opacity:1; position: relative; visibility: visible;}
.menu li>.sub>ul {}
.menu li>.sub>ul>li a { }
.menu li>.sub>ul>li a:hover {}


.lis-item { width: 48%;}

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

/* member   */
.order-lis ul li { border-bottom:1px #e0e0e0 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 > div { border-left: 0; }
.order-lis ul li .number { width: 100%; flex: none; }
.order-lis ul li .time {  font-size:12px; }
.order-lis ul li .time span { display: inline-block;   }
.order-lis ul li .finish {  display:inline-block;}
.order-lis ul li .unpaid {display:block; }
.order-lis ul li .preparing { display:block; }
.order-lis ul li .shipped { display:block; }
.order-lis ul li .name { display:block;}
.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;}

.sub>li>a, .sub>li>span { padding-left: 0;}

.lis-itim {  }
.lis-itim .time { float:none; border-bottom:1px #CCCCCC solid; border-right:0; margin:0 0 5px 0; width:100%; padding:0 0 5px 0; }
.lis-itim h4 { margin:0; }
.lis-itim p { margin:0;}

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

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

/*  left-menu  */
.left-menu { 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;}



/*  album */
.album a { display:inline-block; margin:0 5px 0 0 ;}
.album a img { height:100px; width:auto; }

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


/*  index-news  */
.i-news .list li { width:100%;}
.i-news .list li { margin:0 0 10px 0;  }
.i-news .list li .cover { width:100%; float:none; }
.i-news .list li .cover a { display:block; padding-bottom:70%; width:100%;  height:0;}
.i-news .list li h3 { margin:10px 0; }
.i-news .list li p { margin:0; }

/*  index-products  */
.i-products .list {}
.i-products .list li { width:49%; height:270px;}

/* 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 { margin-top: 20px;}
.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:100%; }
.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.data,
.delivery-member-info textarea.data { width:100%; }
.delivery-member-info input.checkbox { width:auto;}


/* 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 { margin-top:0;}
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 0px; }
.page-box .content-box { min-height:300px; padding: 10px 0px 30px 0px;}



/*  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; padding:0 10px 50px 10px;}
.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;}


.i-main-box { padding:0;}

.Related-link #myDiv { margin-bottom: 20px; }
.Related-link img { width:100%; height:auto;}

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

.foot-info .foot-logo { float:none; width:100px; height:auto; margin:0 auto; display:block;}
.foot-info .info {  margin-left: 0px; text-align:center; }
.foot-info .info br { display: block;}

}

@media screen and (max-width: 375px) {
   .lis-item { width: 98%;}

   .album .marquee > a { width: calc(50% - 10px); }
}