body{
	font-family: 'Open Sans','Noto Sans TC';
	text-align:center;
	overflow-x:hidden;
}

/* header */
#TOP{width:100%;background: #424242;}
header{width: 100%;min-width: 100%;height: 40px;text-align: center;background: #424242;position: relative;z-index: 999;}
header table{width: 800px;margin: 0 auto;}
/* header */

.footer{
	text-align:center;
	background:#424242;
	padding:10px;
	color:#FFF;
	font-size:10px;
	letter-spacing:1px;
}


/*-----------------PC-----------------*/

#wrapper_m,.onedaysale_m, .first_m{display: none;}

/*.onedaysale img{ width:100%; }*/

.onedaysale{
	display: block;
	width: 100%;
	background-color: #ed4490;
	margin: 0 auto;
	overflow: hidden;
}

#wrapper{ 
	width: 100%;
	background: url(images/HEADER.jpg) no-repeat center;
	overflow: hidden;
	height: 1000px;
	margin: 0 auto;
}

.wrapperbox{
	width: 1200px;
	position: relative;
	margin: 0 auto;
}

.header1, .header2, .header3, .header4{ position: absolute; }

.header1{top:50px;left:-30px;}

.header2{top:615px;right:-70px;}

.header3{top:670px;left:70px;}

.header4{top:220px;right:65px;}

/*--------------------- 活動商品 --------------------- */

#saleoutbox{width: 100%;}

.first{ display: flex; }

.saleA, .saleB, .saleC, .saleD{
	width: 100%;
	margin: 0 auto;
}
.saleA{ background-color: #ffb3ab;}
.saleB{ background-color: #cbc7e6;}
.saleC{ background-color: #f18fba;}
.saleD{ background: url(images/saleD.jpg);}

.saleB1, .saleB2, .saleD2, .saleD3{
	display: flex;
	flex-direction: row;
	padding:1%;
	align-items: center;
}

.saleB1{background-color: #ffffff;}
.saleB2{background-color: #f7eda5;}
.saleD2{background-color: #fcecd4;}
.saleD3{background-color: #e4adad;}

.saleAbox, .saleBbox, .saleCbox, .saleDbox{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.saleAbox{
	background: url(images/saleAbg.png) no-repeat center ;
}

.saleBbox{background-color: #efedf7;}
.saleCbox{background-color: #edd1dd;}

.saleB1box{
	display: block;
	flex-direction: column;
	text-decoration: none;
	color: black;
	margin-right: 5%;
	width: 45%;
}



.sale1{
	display: flex;
	max-width: 1180px;
	padding: 0.5%;
	margin: 1.5% auto;
	background-color: #ffffff;
	border-radius: 10px;	
}

.sale2{
	display: flex;
	max-width: 1200px;
	padding-bottom: 2%;
	margin: 0 auto;
}

.sale3{
	display: flex;
	max-width: 1200px;
	padding-bottom: 2%;
	margin: 0 auto;
}



.saleCsingle, .saleDsingle{
	display: flex;
	max-width: 1200px;
	flex-wrap: wrap;
}

.saleCsingle{margin: 0 auto;}
.saleDsingle{margin: 2% auto;}

.prbox1, .prbox2, .prbox3, .prbox4, .prboxpink, .prboxD1{
	display: flex;
	flex-direction: column; 
	flex-wrap: wrap;
	width: 30%;
	margin-left: 1%;
	padding: 1%;
	text-decoration: none;
	color: black;
	font-family:'Open Sans', 'Noto Sans TC';
}

.prboxD1{ 
	width: 100%; 
	display: inline-flex;
	flex-direction: row;
	justify-content: space-around;
}

.prbox1{background-color: #f0dbd0;}
.prbox2{background-color: #fcd2d9;}
.prbox3{background-color: #d1def0;}
.prboxpink{background-color: #fce0ec;}

.prbox5, .prboxD{
	display: block;
	flex-direction: column; 
	flex-wrap: wrap;
	width: 22%;
	margin: 0 1% 1% 0;
	padding: 1%;
	text-decoration: none;
	color: black;
	font-family:'Open Sans', 'Noto Sans TC';
	background-color: #ffffff;
	border-radius: 10px;
}

.prboxD{
	width: 30.3%;
	background-color: #f2d4cf;
	border-radius: 10px;
}

.prbox1 img, .prbox2 img, .prbox3 img, .prbox4 img, .prbox5 img,.saleB1box img, .prboxpink img{
	display:flex;
	/*max-width: 310px;*/
	margin: 0 auto 2% auto;
}

.prbox4{
	width: 98%;
	display: flex;
	flex-direction: row;
}

.saleA3box{
	width: 49%;
	margin-right: 1%;
	display: inline-flex;
	flex-direction: row;
	max-height: 350px;
	text-decoration: none;
	color: black;
}

.saleA3{
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius:0 10px 10px 0;
	padding:2%;
	align-items: center;
}

/*.saleA3 img{ width: 50%; }*/

.boxdown{
	display:inline-block;
	flex-direction: column;
	text-align: left;
}

.boxdown img{ margin: 0 0 2% auto; }

.prbox{
	display: block;
	text-align: left;
	padding-left: 3%;
	margin-bottom: 3%;
}

.discont{
	display: inline-table;
	border: 1px solid #626262 ;
	border-radius: 20px;
	color: #626262;
	font-size:1.1em;
	max-width:110px;
	margin: 4% 0;
	padding: 2% 4%;
	
}

.name{
	display: inline-flex;
	font-size: 1.2em;
	margin-bottom: 5%;
	letter-spacing: 0.15em;
	text-align: left;
	line-height: 1.3em;
}

.name2{
	display:flex;
	font-size: 1.2em;
	margin: 5% auto;
	letter-spacing: 0.15em;
	text-align: left;
	line-height: 1.3em;
}

.pricebox{
	display: flex;
    flex-direction: row;
}

.pricebox2{ 
	display: block;
	text-align: left;
}

.pricebox3{ 
	display: inline-block;
	width: 34%;
	margin: auto;
}

.pricebox4{ 
	display: inline-table;
	/*flex-direction: column;
	width: 65%;*/
	text-align: left;
}

.pricebox2 img{width: 14%;}

.pic{ display: block; margin: auto; }

.price{
	display: inline-flex;
	color: #e60012;
	font-size: 2.5em;
	line-height: 1em;
	font-weight: 700;
}

.price:before{
	content: "任選價";
	font-size: 0.5em;
	padding-right:10px; 
	font-weight: 400;
	color: black;
}



/* FOOTER */

.footer{ 
	width: 100%;
	background-color: #006536; 
	display: block; 
}

.footer img{width: 100%; max-width: 1200px;}

.noticebox{
	background-color:#e1e1e1;
	width: 100%;
	padding-top: 1%;
}

h6{
	width: 350px;
	height: 50px;
	line-height: 50px;
	margin: 0 auto;
	text-align: center;
	color: #ffffff;
	background-color: #91ba20;
	border-radius: 50px;
	font-size: 1.2em;
	letter-spacing: 0.1em
}

.notice{
	padding-top: 1%;
	display: inline-block;
	max-width: 800px;
	margin: 0 auto 2% auto;
	text-align: left;
	font-size: 1em;
	line-height: 1.5em;
}

 .gotop {
    position:fixed;
    z-index:90;
    right:30px;
    bottom:31px;
    display:none;
    transition:all 0.5s;
    text-align: center;
}


/*-----------------行動裝置.手機-----------------*/

/*平板---------------------*/
@media screen and (max-width: 768px) {
    html,body { width: 100%; min-height: 100%;}

    #wrapper, .first{ display: none; }
	#wrapper_m {display: block; width: 100%;}
	#wrapper_m img, .onedaysale img{ width: 100%; }
	
	.first_m{ 
		display: flex; 
		width: 50%; 
		flex-direction: column;
		margin-bottom: 1%;
	}
	

	.sale1{
		width: 95%;
    	flex-direction: row;
    	flex-wrap: wrap;
    	align-content: center;
    	padding: 1.5%;
	}

	.sale2{ flex-direction: column; display:inline-block;}
	.sale3{ 
		width: 95%;
		flex-direction:column-reverse;
		align-content: center;
    	padding: 1.5%; 
	}

	.saleB1, .saleB2 {background-color: #efedf7;}

	.saleA3box{ width: 100%; margin-bottom: 2%;  display: flex;}

	.saleAbox, .saleBbox, .saleCbox{padding-bottom: 5%;}
	.prbox1, .prbox2, .prbox3, .prbox4, .prboxpink, .prboxD1{ 
		width: 47%; 
		align-content: center;
	}

	.saleD2, .saleD3{ background-color: #ffffff; }

	

	.saleAbox{ background: none; background-color: #fee1e3; }
	.prbox1, .prbox2, .prbox3, .prbox4, .prboxpink, .prboxD1{
		margin-bottom: 1%;
	}

	.prbox3{ flex-direction: row; }
	.prbox4{ display: contents; }

	.prbox5{ width: 40%; display: -webkit-inline-box; }

	.saleCsingle{display: inline-block;}
	
	.prbox3 img{ width: 100%; }
	.prbox4 img{ width: 25%; margin: 0 5%;}
	.saleA img, .saleB img, .saleC img, .saleD img, .first_m img{
		width: 100%; 
		margin: auto;
	}

	.saleDsingle{ flex-direction: column; }
	.prboxD { width: 50%; margin: 0 auto 2% auto; }
	.prboxD1{ width: 100%; }
	.noticebox{  width: auto; padding: 3%;}

	

}


/*手機---------------------*/
@media (max-width: 480px) {
    html, body, { width: 100%; min-height: 100%;}

    #wrapper_m image, .saleA3 img, .prbox3 img, .prboxD img,.sale2 img, .sale3 img, .saleB1,.sale3, .boxdown{ width: 100%;}
    .saleA3 .pricebox2{ width: 100%; }
    .saleA3box{ width: 95%; margin: 5% auto; }
	.prboxD  {width: 70%;}
	.saleA3box img{ width: 60%; }
	.pricebox2{ width: 65%; }
    .prbox5 img {width: 50%;}
	.prbox1 img, .prbox2 img, .prboxpink img, .saleB1box img { width: 40%; }
	.prbox4 img , .pricebox3 img{ width: 25%; }
	.pricebox img, .boxdown img{ width: 10%; }
	.pricebox3 img{ width: 18%; }
	.pricebox2 img{ width: 15%; }
   


    /*.sale2{ max-width: 480px; }*/



    .discont{ font-size: 0.5em; margin: 2% 0; }
    .name{ font-size: 0.7em; letter-spacing: 0.07em; }
    .name2, .notice{ font-size: 0.75em; letter-spacing: 0; }
    .price{ font-size: 1.5em; line-height: 0.5em; }
	

}