@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");

/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, fREigure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; 
}
ol, ul, li{
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */

a { text-decoration:none;}

html {	

	-webkit-text-size-adjust:none;
	scroll-behavior: smooth; 
	font-family:'Noto Sans TC', sans-serif;
}

body{
	background:url(images/bg.png) center center ;
	background-size: 100% 100%;
}

 	@media screen and ( max-width: 768px ){
		*{
			box-sizing:border-box; /* 讓 padding 與 width 解除關係 */
		}
		html,body{
			-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */
		}
	}
/* --電腦版型------------------------------------- */

#WRAPPER{ width:100%; min-width:1200px; margin:0 auto; }
 	@media screen and ( max-width: 768px ){
		#WRAPPER{ min-width:100%;}
	}
	
header{
	clear:both;
	width:100%;
	margin:0 auto;
	background-color:#727171;
	padding:5px 0;

	}	
	
header img{	padding-left:15px;
	}

article{
	width:100%;
	margin:0 auto;
	text-align:center;	
}


#title{
	width:100%;
 	height:auto;
	overflow:hidden;
	margin:0 auto;
	font-weight: bold;
 	}
 	
#title_pc{
	width:1200px;
	height:500px;
	overflow: hidden;
	margin:0 auto 0 auto; 
	text-align:center;
  }	

.sale_info{
	width:550px;
	height:auto;
	overflow:hidden; 
	font-weight:500;
	position: absolute;
	margin-top:-300px;
	margin-left:620px;
	text-align:left;
}	
	
.sale_info p{
	margin:10px auto;
	font-size:1.18rem;
	line-height:1.2;
}	

.sale_info p span{
	font-size:1.25rem;
	color:#e73357;
	font-weight:750;
	padding:0 5px;
}	
.sale_info .ps{
	font-size:1rem;
	color:#333;
	font-weight:500;
	line-height:1.3;
}	

#title_m, #m{
	display:none;
	}
	 @media screen and ( max-width: 768px ){
	 
	
header img{
	width:50%;
	padding-left:15px;
	}
	
		#title_pc{ display:none;}
		#m{display:block;}
		#title_m{display:block;
		 	width:100%;
	height:auto;
	overflow: hidden;
		 }
		#title_m img{
			width:100%;
			margin:0;
			padding:0;
			right:0;
			}
			
	
.sale_info div{
	width:90%;	
	
}	
.sale_info p{
	margin:10px auto;
	font-size:0.95rem;
}	

.sale_info p span{
	font-size:1rem;
	font-weight:650;
}	
.sale_info .ps{
	font-size:0.9rem;
	line-height:1.1;
}	



	}

section{
	width:100%;
	height:auto;	
	margin:0 auto;
	overflow:hidden;
	text-align;center;
position: relative;
z-index:3;
	}
	
section div{
	width:1200px;
	height:auto;
	overflow:hidden;
	margin:10px auto;
}	
	
section MENU{
	width:1200px;	
	height:auto;
	overflow:hidden; 
	margin:0 auto;
	text-align: center;
}	


section MENU ul{
width:1100px;
	height:auto;
	margin:10px auto;
	text-align: center;
}	
section MENU li{
	float:left;
	font-size:22px;
	width:15%;
	height:auto;
	margin:0 auto;
	border-right:3px #6495ED solid;
	padding:4px 3px;
	font-weight:bold;
}	
	
section MENU li:last-child{
	border-right:none;	
	}
section MENU li a{
	color:#111;
}

section MENU li a:hover{
	color:#d82f51;
	background:#FFF;
}
.menu_active{
	color:#d82f51;
	background:#FFF;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:999;
  padding: 5px;
	background:#ffe22d;
}
	 @media screen and ( max-width: 768px ){


section div{
	width:100%;
	margin:5px auto;
}	
	
section MENU{
	width:100%;
}	


section MENU ul{
	width:98%;
	margin:10px auto;
}	

section MENU li{
	float:left;
	font-size:18px;
	width:15%;
	line-height:1.5;
}	
	
	}


#BOX {
	width:1100px;
	height:auto;
	overflow: hidden;
	margin: 10px auto;
	text-align:left;
	}
	
#BOX h1 {
	display:inline-block;
	font-size:2.15rem;
	font-weight:bold;
	margin:10px auto 15px auto;
	LETTER-SPACING:3px;
	color:#FFF;
	background:#e50061;
	border-radius: 20px;
	padding:5px 15px; 
	text-align:center;
}

.t1{
	font-size:1.35rem;
	color:#68228B;
	 border-bottom:1px solid #BBB;
	padding:5px 0 13px 20px;
	display:block;
	line-height:1.5;
}

.t2{
	font-size:1.25rem;
	color:#68228B;
	padding:3px 0 3px 20px;
	display:block;
}

.t2 span{
	color:#111;
}

.t2 a{
	color:#003f65;
	 border-bottom:1px solid #BBB;
	
}
.t2 a:hover{
	color:#e50061;
	font-weight:bold;
}

	
#BOX ul{
	width:1000px;
	height:auto;
	overflow: hidden;
 	text-align:center;
	padding:5px 3% 5px 2%;
}


#BOX li {
	width:230px;
	height:380px;
	overflow: hidden;
	float:left;
	margin:20px 10px 15px 10px;
	background: #FFF; 
	border-radius: 20px;
}

#BOX li img {
	width: auto;
	height:200px;
	
}


#BOX li h2 {
	width: 100%;	
	overflow:hidden;
	color:#FFF;
	margin:0 auto;
	text-align: center;
  font-weight:bold;
	background:#DB7093;
	font-size:17px;
	height:55px;
  line-height:1.5;
	
}

 #BOX li h3 {margin:10px 0;
	 text-align: center; line-height:1.2;
} 
 #BOX li h3 span{
 font-size: 13px;
	 text-align: center; 
	
} 
 #BOX li h3 .font_price{
font-weight:bold;font-size: 23px;
color:#ff007e;
}

#BOX li div {
	width: 35px;
	margin:0 auto 0 auto;	
	
}

#BOX li div img {
	width:100%;
	margin:0;
	height:auto;
	border:none;
}

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


#BOX {
	width:100%;
	height:auto;
	overflow: hidden;
	margin: 5px auto;
	padding:0 10px;
	}
	

#BOX h1 {
	font-size:1.35rem;
	padding:5px 15px; 
	margin:2px auto;
	display:block;
}

.t1{
	font-size:1.05rem;
	line-height:1.8;
	padding:5px 5px 5px 5px;
}

.t2{
	font-size:1rem;
}

	
#BOX ul{
width:100%;
}


#BOX li {
	width:45%;
	height:380px;
	overflow: hidden;
	float:left;
	margin:10px 7px 15px 7px;
	background: #FFF; 
	border-radius: 20px;
}

#BOX li img {
	width: auto;
	height:180px;
	
}


#BOX li h2 {
	width: 100%;	
	background:#8B7E66;
	font-size:14px;
	height:auto;
  line-height:1.5;
	
}
 #BOX li h3 {margin:10px 0;
	 text-align: center; line-height:1.2;
} 
 #BOX li h3 span{
 font-size: 13px;
	 text-align: center; 
	
} 
 #BOX li h3 .font_price{
font-weight:bold;font-size: 23px;
color:#ff007e;
}

#BOX li div {
	width: 35px;
	margin:0 auto 0 auto;	
	
}

#BOX li div img {
	width:100%;
	margin:0;
	height:auto;
	border:none;
}

	}

footer{
	clear:both;
	width:100%;
	margin:0 auto;
	background-color:#4B3100;
	height:auto;
	padding:10px 0;
}

footer p{
	font-size:13px;
	text-align:center;
	line-height:1.8;
	color:#FFF;
}


#car{ /* 購物車 */
            text-align: left;
	width:40px;
	right:60px;
  position:fixed; 	top:15px;
  z-index:99999;
}

#car span{ /* 購物車 */
	display:block;
	margin:0 auto;
  background-color:#F00;
  color:#FFF;
  font-size:17px;
  text-align:center;
   border-radius:5px;
   padding:2px;
}

#car_number{ /* 購物車數量 */
	width: 15px;
	height: 15px;
	border-radius:999em;
	background-repeat: no-repeat;
	right: 55px;
  position:fixed; 	top: 10px;
	color:#FFFFFF;
	background-color:#900;
	font-size:11px;
	text-align:center;
	padding-top:1px;
  z-index:9999;
}
iframe{ /* 購物車 */
width:150px;
  position:absolute;
  right:25px;
  top:25px;
  height:auto;
  overflow:hidden;
}  

@media screen and ( max-width: 768px ){	
#car{ /* 購物車 */
	width:40px;
	height:40px;
	right:20px;
  position:fixed;
  top:30px;
  z-index:9999;
  color:#FFF;
  font-size:13px;
}
#car_number{ /* 購物車數量 */
	width: 15px;
	height: 15px;
	border-radius:999em;
	background-repeat: no-repeat;
	right: 15px;
  position:fixed; 	top: 25px;
	color:#FFFFFF;
	background-color:#900;
	font-size:11px;
	text-align:center;
	padding-top:1px;
}

iframe{ /* 購物車 */
	display:none;
}  
	
}




.yellow {
	height:30px;
	padding-top:30px;
	font-size:20px;
}

.yellow A {
	BORDER-RIGHT: #DB7093 1px solid; 
	PADDING-RIGHT: 5px; 
	BORDER-TOP: #DB7093 1px solid; 
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 5px; 
	BORDER-LEFT: #DB7093 1px solid; 
	COLOR: #333; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #DB7093 1px solid; 
	TEXT-DECORATION: none;
}
.yellow A:hover {
	BORDER-RIGHT: #DB7093 1px solid;
	BORDER-TOP: #DB7093 1px solid; 
	BORDER-LEFT: #DB7093 1px solid; 
	COLOR: #8B5A00; 
	BORDER-BOTTOM: #DB7093 1px solid
}
.yellow A:active {
	BORDER-RIGHT: #eee 1px solid; 
	BORDER-TOP: #eee 1px solid; 
	BORDER-LEFT: #eee 1px solid; 
	COLOR: #000; 
	BORDER-BOTTOM: #8B7765 1px solid;
}
.yellow SPAN.current {
	BORDER-RIGHT: #8B3626 1px solid; 
	PADDING-RIGHT: 5px; 
	BORDER-TOP: #8B3626 1px solid; 
	PADDING-LEFT: 5px; FONT-WEIGHT: bold; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 5px;  
	BORDER-LEFT: #8B3626 1px solid; 
	COLOR: #FFF; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #8B3626 1px solid; 
	BACKGROUND-COLOR: #D02090;
	font-size:22px;
}
.yellow SPAN.disabled {
	BORDER-RIGHT: #eee 1px solid; 
	PADDING-RIGHT: 5px; 
	BORDER-TOP: #eee 1px solid; 
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 5px; 
	BORDER-LEFT: #eee 1px solid; 
	COLOR: #ddd; PADDING-TOP: 2px; 
	BORDER-BOTTOM: #eee 1px solid;
}


#list_style{
	height: auto;
	overflow:hidden;
	margin:0 auto;
	padding:0px;
	text-align:center;
 }

#list_style li{
	width:auto;
	background-color: #4682B4;
	float:left;
	font-size:20px;
	margin:0 auto;
	border:#F63;
	margin:8px 25px;
	padding:10px;
	font-weight:bold;
  }


#list_style li a{
	color:#FFF;
  }

#list_style li a:hover{
	color:#4682B4;
	background-color: #FFF;
	padding:5px;
  }


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

#info{
width:100%;
}

#info h1{
	width:auto;
	font-size:20px;
	padding-left:18px;
	text-indent : -18px ;
}
#info h1 span{
	font-size:25px;
	
}
.yellow {
	height:50px;
	padding:10px 0;
	font-size:20px;
}

#list_style li{
	width:auto;
	font-size:16px;
	margin:2px 5px;
	padding:5px;
  }


}