@charset "utf-8";
/* CSS Document */
/* ---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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---reset.css--- */
html, body{	
	font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

html{
	
}
body{ 
	background:url("../images/bg.jpg") top center repeat;
/*	background: #e9bf64;*/
	
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}






/* 滑鼠動態效果 */
.container li , .fukuda a {  
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.container li:hover,.fukuda a:hover{
	-webkit-transform: scale(0.98);;
		    transform: scale(0.98);}

/* 導覽頁籤 */
.sidenav { position: fixed; left: 0; top: 80px; z-index: 99; width: 90px; border-radius:50px 50px 10px 10px; overflow: hidden; background:#7e7e7e;   }
.sidenav ul { overflow: hidden;  padding: 20px 0; }
.sidenav ul li {font-weight: 500; font-size: 18px; line-height: 22px; text-align: center; color:#f9ef4d; }
.sidenav ul li a { display: block; color: #fff; font-size: 15px; line-height: 40px;}
.sidenav hr { margin: 12px; padding: 0; }

.sidenav li { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.sidenav li:hover a {  background-color:#000; }
.sidenav li:hover a { color:#f9ef4d ; }
 	@media screen and ( max-width: 640px ){
		.sidenav { display: none; }
		
	}

/* 活動按鈕 */
.button { margin: 20px auto; position: absolute; top: 580px; right: 90px; }
.button ul {display: flex;width: 680px;justify-content: center;margin: auto;}
.button ul:nth-child(even) { margin: auto auto auto -50px;}
.button li {width: 180px;  border: solid 2px #40220f; margin: 8px;padding: 14px;transition-duration:.3s; border-radius: 36px 36px 0 0;background: #fff;}
.button li h4 {color: #422110;}
.button ul:nth-child(odd) li:nth-child(even) {background: #fff003;}
.button ul:nth-child(even) li:nth-child(odd) { background: #fff003;}
.button a {color: #000;}
.button li:hover {  transform: scale(0.98) }


/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 82px; left: 404px; position: absolute;}
.title02{ top: 190px; left: 399px; position: absolute;}
.title03{ top: 305px; left: 404px; position: absolute;}
.title04{ top: 366px; left: 404px; position: absolute;}
.title05{ top: 132px; left: 495px; position: absolute;}
.title06{ top: 220px; left: 640px; position: absolute;}
.title07{ top: 350px; left: 915px; position: absolute;}


.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }




/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }

}



/* bg */
.bg01 { background:url("../images/flower.png") top center repeat,url("../images/bg01.jpg") top center repeat; margin: -120px auto 0;}
.bg02 { background:url("../images/flower2.png") top center repeat,url("../images/bg02-1.jpg") top center no-repeat, url("../images/bg.jpg") top center repeat;margin: -500px auto 0; padding: 500px 0 0;}
.bg03 { background:url("../images/flower.png") top center repeat,url("../images/bg03-1.jpg") top center no-repeat, url("../images/bg01.jpg") top center repeat;margin: -500px auto 0; padding: 500px 0 0;}
	@media screen and ( max-width: 640px ){
		.bg01 {margin:auto;}
	}



/* Public Version 公版顏色設定 */
:root {
	--PV-font: #323232; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #a62d33; /* 價格顏色-紅 */
	--PV-eslite: #a7212f; /* 誠品線上標準色 */
}

/* 文字樣式設定 */
html,body{font-family: Verdana,'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size: 16px;}
h2{font-size: 2.6rem; text-align: center;font-weight: 500; position: relative;color: #422110;}/* 區塊大標 */
h3{font-size: 2.2rem; text-align: center;font-weight: 500;}/* 區塊小標 */
h4{font-size: 1.2rem; text-align: center;font-weight: 500;line-height: 1.4rem;}/* 特色標 */
p{font-size: 1rem; font-weight: 300;line-height: 1.4rem;}/* 內文 */
small{font-size: 60%;}
big{font-size: 140%;color:var(--PV-eslite);font-weight: bold;}
.price{font-size: 0.9rem;font-weight: 500;color:var(--PV-font);display: block;}/* 價格 */
.font{color:var(--PV-font);}/* 文字顏色 */
.sm-pic{display: none;}
	@media screen and ( max-width: 640px ){
		html,body{font-size: 14px;}
		h2{font-size: 2rem;}
	}

.title {margin: 0 auto 20px;}
.title h2 big{color: #0c873b;}
.title p {font-size: 1.4rem;margin: 6px;letter-spacing: 6px; line-height: 2rem;}
	@media screen and ( max-width: 640px ){
		.title p {font-size: 1.2rem;line-height: 1.2rem;margin: 1vw;letter-spacing: 0px;}
	}

/* 4-6 circle */
.circle{ width: 1160px; margin:20px auto 60px;  }
.circle ul { display: flex; justify-content: center;flex-wrap: wrap;}
.circle h3{ width: 1160px;margin: 4px 8px;}
.circle li { width: 260px; background: #fff; margin: 136px 8px 8px;border-radius: 0 0 50px 50px; white-space: nowrap; }
.circle li a { }
.circle .font { display: block; text-align: center;  }
.circle .font h4 { width: 230px; padding: 8px 0; color: var(--PV-eslite); margin: auto;overflow: hidden;}
.circle .font p { margin: 0;margin: 0 20px;overflow: hidden; height: 45px;}
.circle .font .price { padding: 10px 30px 10px 10px; margin: 15px 30px 25px;border: var(--PV-eslite) 1px solid; color:var(--PV-eslite);border-radius:50px;  position: relative;overflow: hidden; white-space: nowrap;}
.circle .font .price:after { content: 'GO';position: absolute;right: 0;top: -15px;background-color: var(--PV-eslite);color: #fff;line-height: 63px;padding: 3px;font-size: 0.8rem; }
.circle .font .price big {    }
.circle img { border-radius:50%;margin: -132px auto 0 auto;display: block; width: 260px; height: 260px; object-fit: cover; border: solid 5px #f1f1f1;background: #ffffff;}
	@media screen and ( max-width: 640px ){
		.circle{width: 100%; margin: 2vw auto;}
		.circle ul {flex-wrap: wrap;}
		.circle h3{ width: 96vw;margin: 1vw;}
		.circle li {width: 46vw;  margin: 1vw; padding: 1vw 1vw 2vw; border-radius: 0;}
		.circle a {  }
		.circle .font {  margin: 1vw 0;}
		.circle .font h4 {width: 44vw; padding: 1vw;}
		.circle .font p { }
		.circle .font .price { margin: 0 2vw 2vw; padding: 1vw 6vw 1vw 1vw;}
		.circle .font .price:after { top: -5px;line-height: 2rem;padding: 3px;font-size: 0.5rem; }
		.circle .font .price big { font-size: 1.1rem; }
		.circle img { width: 43vw; height: 43vw; margin: auto;}
	}

/* 3-1 rectangle_3p */
.rectangle_3p{ width: 1160px; margin:20px auto 60px;  }
.rectangle_3p ul { display: flex; justify-content: center;flex-wrap: wrap;}
.rectangle_3p h3{ width: 1160px;margin: 4px 8px;}
.rectangle_3p li { width: 320px; background: #fff; margin: 4px 12px;  padding: 20px; text-align: center; }
.rectangle_3p li a { display: flex;flex-wrap: wrap; justify-content: center;}
.rectangle_3p .font {  margin: auto; }
.rectangle_3p .font h4 { margin: 10px 0; color: var(--PV-eslite); padding: 2px 16px;}
.rectangle_3p .font p {  }
.rectangle_3p .font .price { margin: 10px 0; }
.rectangle_3p .font .price big {    }
.rectangle_3p img { width: 266px; height: 266px; object-fit: contain; }
	@media screen and ( max-width: 640px ){
		.rectangle_3p{width: 100%; margin: 2vw auto;}
		.rectangle_3p ul {flex-wrap: wrap;}
		.rectangle_3p h3{ width: 96vw;margin: 1vw;}
		.rectangle_3p li {width: 46vw; padding: 3vw; margin: 1vw; }
		.rectangle_3p a {  }
		.rectangle_3p .font {padding: 1vw; }
		.rectangle_3p .font h4 { padding: 1vw;width: 40vw;white-space: nowrap;overflow: hidden; }
		.rectangle_3p .font p { }
		.rectangle_3p .font .price { margin: 1vw;}
		.rectangle_3p img { width: 40vw; height: 40vw;}
		.rectangle_3p ul li:first-child {width: 94vw; padding: 3vw; margin: 1vw 3vw; }
		.rectangle_3p ul li:first-child a { flex-wrap: nowrap; }
		.rectangle_3p ul li:first-child .font {padding: 1vw 0vw 1vw 3vw; }

	}


/* 4-4 hightlight */
.hightlight{ width: 1160px; margin:20px auto 60px;  }
.hightlight ul { display: flex; justify-content: center;flex-wrap: wrap;}
.hightlight h3{ width: 1160px;margin: 4px 8px;}
.hightlight li { width: 260px; background: #fff; margin: 4px 8px;  padding: 0; }
.hightlight li a { }
.hightlight .font { display: block; text-align: center;  }
.hightlight .font h4 { padding: 6px 10px; margin: 0 0 5px; color:#fff; background: #f385b5;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.hightlight .font p { margin: 0; }
.hightlight .font .price { margin: 10px 0 15px; }
.hightlight .font .price big {    }
.hightlight img { display: block; width: 260px; height: 260px; object-fit: cover; }
	@media screen and ( max-width: 640px ){
		.hightlight{width: 100%; margin: 2vw auto;}
		.hightlight ul {flex-wrap: wrap;}
		.hightlight h3{ width: 96vw;margin: 1vw;}
		.hightlight li {width: 46vw; padding: 0; margin: 1vw; }
		.hightlight a {  }
		.hightlight .font {  margin: 0 0 3vw 0;}
		.hightlight .font h4 { padding: 1vw;}
		.hightlight .font p { }
		.hightlight .font .price { margin: 1vw 0;}
		.hightlight img { width: 46vw; height: 46vw;}
	}

/* 2-6 various half */
.half{ display: flex; flex-wrap: wrap;justify-content: center;margin: 10px auto;}
.half ul{width: 560px;flex-wrap: wrap; margin: 4px 8px;background: url(../images/bg03.jpg) top center repeat;padding: 20px 10px;}
.half ul h3{ width: 560px; }
.half ul li{  margin: 4px; }
	@media screen and ( max-width: 640px ){
		.half{ }
		.half ul{width: 100%; margin: 2vw; padding: 2vw 0;}
		.half ul h3{ width: 100%; }
		.half ul li{  margin: 1vw; width: 45vw; }
		.half img{ width: 45vw; }
	}

/* scene */
.scene { display: flex; justify-content: center;flex-wrap: wrap;}
.half .scene li { width: 470px; background: none; margin:auto;  padding: 0; }
.scene li a { }
.scene .font { display: block; text-align: center;  }
.scene .font h4 { padding: 6px 10px; margin: 20px 0; color:#fff; background: #f385b5; font-size: 1.3rem; line-height: 1.6rem;}
.scene .font p { margin: 0; text-align: left; font-size: 1.1rem; line-height: 1.6rem; }
.scene .font .price { margin: 10px 0 15px; }
.scene .font .price big {    }
.scene img { display: block; width: 470px; height: 470px; object-fit: cover; }
	@media screen and ( max-width: 640px ){
		.scene {flex-wrap: wrap;}
		.half .scene li {width: 80vw; padding: 0; margin: 1vw; }
		.scene a {  }
		.scene .font {  margin: 0 0 3vw 0;}
		.scene .font h4 { padding: 1vw;}
		.scene .font p { }
		.scene .font .price { margin: 1vw 0;}
		.scene img { width: 80vw; height: 80vw;}
	}

/* 6-1 collect_5x6 */
.collect_5x6 { width: 1160px; margin: 0 auto 20px; }
.collect_5x6 ul { display: flex;overflow: hidden; justify-content: center; }
.collect_5x6 li {  background-color: #fff; text-align: center;margin: 6px; padding: 6px; position: relative;}
.collect_5x6 .font { display: block; text-align: center;   }
.collect_5x6 .font h4 { font-weight: bold;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.collect_5x6 .font p { margin: 0; }
.collect_5x6 .font .price { margin: 10px 0 15px; }
.collect_5x6 img { object-fit: contain;}

	/* h-row 橫排兩品 */
	.collect_5x6 .h-row li { width: 544px; padding: 10px 20px;}
	.collect_5x6 .h-row a {display: flex; }
	.collect_5x6 .h-row img {  width: 240px;height: 240px; }
	.collect_5x6 .h-row .font {text-align: left; margin: auto 0 auto 30px;}
	.collect_5x6 .h-row .font h4 { text-align: left; margin: 10px 0; font-size: 1.4rem; line-height: 2rem;  }
	.collect_5x6 .special { font-size: 1rem; color:#ffffff; background:var(--PV-eslite);  padding: 5px 15px; border-radius: 20px; }

	/* h-row 直排四品 */
	.collect_5x6 .s-row li { width: 266px; padding: 0;  }
	.collect_5x6 .s-row img { width: 256px;height: 256px;padding: 10px; margin: 42px auto 0;}
	.collect_5x6 .s-row h4 { width: 266px; padding: 10px; color:#fff; background-color:#d0470e; position: absolute; top: 0; }

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



    }


/* 6-5 keyword 關鍵字 */
.keyword { width: 1200px; margin: auto; min-width:1200px;}
.keyword { margin: 0px auto 40px; padding: 0px 50px; overflow: hidden; /*display: none;*/}
.keyword ul {display: flex; flex-wrap: wrap; justify-content: center;  }
.keyword ul li {  text-align: center; overflow: hidden;margin: 10px;padding: 0 20px; border: solid 1px;}
.keyword ul li:active a, .keyword ul li:hover a { color: #469bec;}
.keyword ul li a { color: #000;font-weight: bold; font-size: 24px; }
.keyword ul li a span { color: #f3f68c;}

	@media screen and ( max-width: 768px ){
		.keyword { margin:auto; padding: 0;width: 100%;min-width: 100%; }
		.keyword ul { overflow: hidden; margin: 3vw; }
		.keyword ul li { margin: 1vw; padding: 1vw 3vw;line-height: 1.2rem; }
		.keyword ul li a { font-size: 0.95rem; line-height: 1rem}
	}

/* AD */
.banner { width: 1160px; margin:20px auto 60px; }
.banner ul { display: flex; flex-wrap: wrap; justify-content: center;}
.banner li {  margin: 2px 4px;}
.banner img {width: 540px; }
@media screen and ( max-width: 640px ){	
/* AD */
.banner {  width: 100%; margin: 2vw auto; padding: 1vw;}
.banner ul{  }
.banner li {width: 96vw; margin: 0.5vw; }
.banner img {width: 100%; }	
}

/*--goto top--*/
#gotop {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 0px;
  right: 0px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  margin: 30px;
}
@media screen and ( max-width: 768px ){
#gotop {
  bottom: 2vw;
  right: 0;
  margin: 2vw;	
	}
  	
}

#gotop::after {
  font-family: FontAwesome;
  content:'　';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
    opacity:0.5;
	background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;
}
#gotop:hover {
  cursor: pointer;
  background-color: #666;
}
#gotop:active {
  background-color: #666;
}
#gotop.show {
  opacity: 0.4;
  visibility: visible;
}