@charset "big5";

/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1440px) {
    
    .sidebar li a:link, .sidebar li a:visited {	font-size: 1em; }
    
    .kv-pc { width: 60%; }
    
    .area { width: 80%; }
    .s1 { padding: 50px 0; }
    .s2, .s3, .s4 { padding: 0 0 50px 0; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1280px) {
    
    /*item樣式*/
    div[class^="name"] { font-size: 1em; }
    div[class^="price"] { font-size: 0.9em; }
    div[class^="sale"] { font-size: 0.9em; }
    div[class^="sale"] span { font-size: 0.9em; }
    div[class^="sale"] b { font-size: 1.7em; }
    div[class^="sale"] strong { font-size: 0.9em; }
    
    .sidebar { width: 100px; }
    .sidebar li { font-size: 1em; }    
    
    .photo-1 { height: 320px; }
    .photo-1 img { max-height: 300px; }
    
    .list-1, .bn, .rule { width: 90%; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
    
    .kv-pc { width: 70%; }
    .area { width: 90%; }
    .s1 { padding: 50px 0; }
    .s2, .s3, .s4 { padding: 0 0 50px 0; } 
    
    /*購物車按鈕*/
    .cart { width: 85%; }
    .button02 span, .button03 span, .button04 span { font-size: 0.8em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 834px) {
    
    /*item樣式*/
    div[class^="name"] { font-size: 1em; }
    div[class^="price"] { font-size: 0.9em; }
    div[class^="sale"] { font-size: 0.9em; }
    div[class^="sale"] span { font-size: 0.9em; }
    div[class^="sale"] strong { font-size: 0.9em; }
    div[class^="sale"] b { font-size: 1.7em; }
    
    .kv-pc { width: 95%; }
    .area { width: 95%; }
    .area h2 { width: 100%; }
    .s1 { padding: 50px 0; }
    .s2, .s3, .s4 { padding: 0 0 50px 0; }
    
    .tips { display: none; }
    .tips-m { width: 95%; margin: 0 auto; display: block; }
    
    .list-1, .bn, .rule { width: 100%; }
    
    .list-1 li { width: 48%; margin: 0 1% 15px 1%; }
    .s2 .list-1 li:nth-child(2) { display: block; }
    .s3 .list-1 li:nth-child(4) { display: block; }   
    
    .bn li { float: none; width: 100%; margin: 0 auto 10px auto; }
    
    .rule {	width: 100%; }
    
    /*購物車按鈕*/
    .button02 span, .button03 span, .button04 span { font-size: 0.8em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 480px) {
    
    /*item樣式*/
    div[class^="name"] {
	font-size: 1em;
	-webkit-line-clamp: 1; /*顯示的行數*/
	line-height: 1.3em; /*行高值*/
	height: 1.3em; /*限定高度為行數乘行高的值*/
    }
    
    .s1 { padding: 30px 0 20px 0; }
    .s2, .s3, .s4 { padding: 0 0 20px 0; }
    
    .photo-1 { height: 240px; }
    .photo-1 img { max-height: 220px; }
    
    .rule { width: 100%; padding: 10px 15px; margin: 0 auto; }
    
   /*copyright*/
    .copyright { font-size: 0.7em; }
    
    /*購物車按鈕*/
    .button02 span, .button03 span, .button04 span { font-size: 0.9em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 375px) {
    
    .list-1 li { width: 48%; margin: 0 1% 10px 1%; }
    .photo-1 { height: 200px; }
    .photo-1 img { max-height: 180px; } 
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 320px) {
    
    /*item樣式*/
    div[class^="name"] { font-size: 0.9em; }
    div[class^="price"] { font-size: 0.85em; }
    div[class^="sale"] { font-size: 0.85em; }
    div[class^="sale"] span { font-size: 0.85em; }
    div[class^="sale"] strong { font-size: 0.85em; }
    div[class^="sale"] b { font-size: 1.6em; }
    
    .photo-1 { height: 180px; }
    .photo-1 img { max-height: 160px; }
    
    /*copyright*/
    .copyright { font-size: 0.5em; }
    
}