@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{
	background: #1fb6b8;
	background: url("../images/bg.jpg") repeat;
}
body{ /*background:url("../images/bg_01.jpg") center 860px no-repeat,
	             url("../images/bg.jpg") center 1800px repeat,*/

}


* {
  -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;}






/* 主色系設定 */
:root {
	--font-color: #3e1a0c; /* 文字色-咖啡 */
	--font-colorW: #ffffff; /* 文字色-白 */
	--font-colorB: #5e5c5c; /* 文字色-灰 */
	--font-colorC: #ffe49e; /* 文字色-黃 */
	--main-colorA: #871301; /* 視覺主色-紅 */
	--main-colorB: #91af26; /* 視覺輔助色-綠 */
	--main-colorC: #a62d33; /* 視覺重點色-紅 */
	
	--main-colorD: #dc6038; /* 視覺重點色-橘 */
	--main-colorE: #b7a92c; /* 視覺重點色-綠 */
}

/* 滑鼠動態效果 */
.container li {  float:left;
	-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:active, .container li:focus, .container li:hover{
	-webkit-transform:translateY(-8px);
		    transform:translateY(-8px)}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	 @media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { width: 1200px; margin: auto;min-width:1200px; background-color:#ffffff; padding: 8px 0 5px 0 ;}
.topbox { position: relative; width: 1200px; margin: auto;}
/*.promo01 { position: absolute; top:183px; left:197px;}*/

.topbn_pc {width: 100%; height:860px; position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.topbn_pc img { display: block; text-align: center; }
.topbn_m { display: none; }
.topbn_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }




/* m */
 @media screen and ( max-width: 991px ){
	.topbn_m { display: block; width: 100%; }
	.topbn_m img {  width: 100%; }
	.topbn_pc { display: none; }
	.sidenav , .button { display: none; }	
	.container {width: 100%; min-width: auto; background-color: none; background: url("../images/bg.jpg") repeat;}
	.for_pc{ display: none; }
	.for_m { display: block; }
	.side-menu { display: none; }

}


/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
.homeBG { background:url(../images/homeBG.jpg) no-repeat center top;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.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: 991px ){
	.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; }
	.for_m img {  width: 100%; }
}







/* 沖泡飲品 r-rectangle_3x4 */
.r-rectangle_3x4 { /*height: 1129px;*/ background:url("../images/bg02-2.png") top center repeat; margin:50px 0px 90px 0px;} 
.r-rectangle_3x4:before {content: ""; display: block;height: 50px; background:url("../images/bg02.png") top center no-repeat;  position: relative; top:-40px;}
.r-rectangle_3x4:after { content: ""; display: block; height: 50px; background:url("../images/bg02-3.png") top center no-repeat; position: relative; bottom:-17px;}
.r-rectangle_3x4 h2 { padding:0px 0 0px 0; font-weight: bold; font-size: 60px; line-height: 80px;  text-align: center;/* background:url("../images/pctitilebg.png") top center no-repeat;*/ color:#077483; margin-top: -100px; }
.r-rectangle_3x4 h2 p { font-size: 22px; letter-spacing: 5px; color:#e45700;line-height: 30px;}
.r-rectangle_3x4 h2 small { font-size: 30px;}
.r-rectangle_3x4 ul { padding: 0px 50px 0px; overflow: hidden; display: flex; }
.r-rectangle_3x4 ul li { width: 326px; padding: 30px 10px 10px 10px; margin: 15px 20px; background-color: #fff; text-align: center;border-radius:25px; }
.r-rectangle_3x4 ul li a {  }
.r-rectangle_3x4 ul li img { display: block; width: 320px;height: 320px;object-fit: contain; margin: 0 auto 0 auto; }
.r-rectangle_3x4 h3 { padding: 10px 0 0; font-weight: bold; line-height: 25px; font-size:18px;  color:var(--font-color); letter-spacing: 2px; align-items: center; justify-content: space-between;}
.r-rectangle_3x4 p { font-weight: bold; font-size: 16px; line-height: 20px; color:var(--font-color); }
.r-rectangle_3x4 .sale { display: inline-block; line-height: 43px;   }
.r-rectangle_3x4 span {font-weight: bold; font-size: 28px; color:var(--main-colorC); }
.r-rectangle_3x4 span small { font-size: 16px; color:var(--font-color);}
	/* 更改區塊背景(跳色) */
/*	.r-rectangle_3x3:nth-child(even) { background:url("../images/r-rectangle_3x2-2bg.png") top center no-repeat; }*/

 @media screen and ( max-width: 991px ){
.r-rectangle_3x4 { height: auto; background:url("../images/bg02m.png") repeat!important; margin: 0 0 0% 0; padding:0 0 5% 0; overflow: hidden; }
	.r-rectangle_3x4:before {display: none;}
	.r-rectangle_3x4:after {display: none; }
.r-rectangle_3x4 h2 { padding:2.5% 0 0% 0; font-weight: bold; font-size: 1.8rem; line-height: 2.5rem;  text-align: center; background:url("../images/pctitilebg_2.png") top center no-repeat; background-size: 95%; color:#ffffff; margin-top: 0;}
.r-rectangle_3x4 h2 small { font-size:1.5rem;}
.r-rectangle_3x4 h2 p { font-size: 1rem; letter-spacing: 0; color:#e45700; line-height: 1.5rem; }
.r-rectangle_3x4 ul { padding: 2%; overflow: visible; display: flex; flex-wrap: wrap; }
.r-rectangle_3x4 ul li { padding: 2%; width: 48%; margin:1%; background-color: #fff; text-align: center; border-radius: 2vw;}
	.r-rectangle_3x4 ul li:first-child {padding: 2% 5%; width: 98%; }
	.r-rectangle_3x4 ul li:first-child img { width: 80vw; height: 60vw; }
	.r-rectangle_3x4 ul li:first-child h3 { }
.r-rectangle_3x4 ul li img { display: block; width: 42vw; height: 42vw; margin: 0vw auto 0 auto;}
.r-rectangle_3x4 h3 { padding:6% 2% 2%;font-weight: bold; font-size: 1rem; line-height: 1.4rem;  letter-spacing:1px; /*text-align: justify;*/ align-items: center; justify-content: space-between; }
.r-rectangle_3x4 p { font-weight: bold; font-size: 0.8rem; line-height: 1.2rem;  }
.r-rectangle_3x4 .sale {display: inline-block; line-height: 3rem;  }
.r-rectangle_3x4 span {font-weight: bold; font-size: 1.5rem; }
.r-rectangle_3x4 span small { font-size: 1rem;}
	.r-rectangle_3x4:nth-child(even) { background:none; }
}


/* 讀書共和國 r-rectangle_3x4_2 */
.r-rectangle_3x4_2 { /*height: 1129px;*/ background:url("../images/bg02-2.png") top center repeat; margin:50px 0px 90px 0px;} 
.r-rectangle_3x4_2:before {content: ""; display: block;height: 50px; background:url("../images/bg02-1.png") top center no-repeat;  position: relative; top:-40px;}
.r-rectangle_3x4_2:after { content: ""; display: block; height: 50px; background:url("../images/bg02-3.png") top center no-repeat; position: relative; bottom:-17px;}
.r-rectangle_3x4_2 h2 { padding:0px 0 0px 0; font-weight: bold; font-size: 60px; line-height: 80px;  text-align: center;/* background:url("../images/pctitilebg.png") top center no-repeat;*/ color:#077483; margin-top: -100px; }
.r-rectangle_3x4_2 h2 p { font-size: 22px; letter-spacing: 5px; color:#e45700;line-height: 30px;}
.r-rectangle_3x4_2 h2 small { font-size: 30px;}
.r-rectangle_3x4_2 ul { padding: 0px 50px 0px; overflow: hidden; display: flex; }
.r-rectangle_3x4_2 ul li { width: 326px; padding: 30px 10px 10px 10px; margin: 15px 20px; background-color: #fff; text-align: center;border-radius:25px; }
.r-rectangle_3x4_2 ul li a {  }
.r-rectangle_3x4_2 ul li img { display: block; width: 320px;height: 320px;object-fit: contain; margin: 0 auto 0 auto; }
.r-rectangle_3x4_2 h3 { padding: 10px 0 0; font-weight: bold; line-height: 25px; font-size:18px;  color:var(--font-color); letter-spacing: 2px; align-items: center; justify-content: space-between;}
.r-rectangle_3x4_2 p { font-weight: bold; font-size: 16px; line-height: 20px; color:var(--font-color); }
.r-rectangle_3x4_2 .sale { display: inline-block; line-height: 43px;   }
.r-rectangle_3x4_2 span {font-weight: bold; font-size: 28px; color:var(--main-colorC); }
.r-rectangle_3x4_2 span small { font-size: 16px; color:var(--font-color);}
	/* 更改區塊背景(跳色) */
/*	.r-rectangle_3x3:nth-child(even) { background:url("../images/r-rectangle_3x2-2bg.png") top center no-repeat; }*/

 @media screen and ( max-width: 991px ){
.r-rectangle_3x4_2 { height: auto; background:url("../images/bg02m.png") repeat!important; margin: 0 0 0% 0; padding:0 0 5% 0; overflow: hidden; }
	.r-rectangle_3x4_2:before {display: none;}
	.r-rectangle_3x4_2:after {display: none; }
.r-rectangle_3x4_2 h2 { padding:2.5% 0 0% 0; font-weight: bold; font-size: 1.8rem; line-height: 2.5rem;  text-align: center; background:url("../images/pctitilebg_2.png") top center no-repeat; background-size: 95%; color:#ffffff; margin-top: 0;}
.r-rectangle_3x4_2 h2 small { font-size:1.5rem;}
.r-rectangle_3x4_2 h2 p { font-size: 1rem; letter-spacing: 0; color:#e45700; line-height: 1.5rem; }
.r-rectangle_3x4_2 ul { padding: 2%; overflow: visible; display: flex; flex-wrap: wrap; }
.r-rectangle_3x4_2 ul li { padding: 2%; width: 48%; margin:1%; background-color: #fff; text-align: center; border-radius: 2vw;}
	.r-rectangle_3x4_2 ul li:first-child {padding: 2% 5%; width: 98%; }
	.r-rectangle_3x4_2 ul li:first-child img { width: 80vw; height: 60vw; }
	.r-rectangle_3x4_2 ul li:first-child h3 { }
.r-rectangle_3x4_2 ul li img { display: block; width: 42vw; height: 42vw; margin: 0vw auto 0 auto;}
.r-rectangle_3x4_2 h3 { padding:6% 2% 2%;font-weight: bold; font-size: 1rem; line-height: 1.4rem;  letter-spacing:1px; /*text-align: justify;*/ align-items: center; justify-content: space-between; }
.r-rectangle_3x4_2 p { font-weight: bold; font-size: 0.8rem; line-height: 1.2rem;  }
.r-rectangle_3x4_2 .sale {display: inline-block; line-height: 3rem;  }
.r-rectangle_3x4_2 span {font-weight: bold; font-size: 1.5rem; }
.r-rectangle_3x4_2 span small { font-size: 1rem;}
	.r-rectangle_3x4_2:nth-child(even) { background:none; }
}




/* AD */
.AD {width: 1200px; min-width: 1200px;}
.AD { margin: -50px auto 50px auto; padding: 20px 20px 20px 20px; overflow: hidden; background:url("../images/bg_01.jpg");  }
.AD ul li { margin: 10px 10px;}
.AD ul li img { width: 560px; }
 @media screen and ( max-width: 991px ){	
/* AD */
.AD { margin: 0; padding: 2%; overflow: hidden; background:url("../images/bg_01m.png") repeat!important; padding-bottom:0px; width: 100%; min-width: 100%;}
.AD ul li {overflow: hidden; float: none; }
.AD ul li {width: 96%; margin: 2%; }
.AD ul li img {width: 100%; }
.AD ul li:nth-child(1) img, .AD ul li:nth-child(2) img, .AD ul li:nth-child(3) img, .AD ul li:nth-child(4) img, .AD ul li:nth-child(5) img ,.AD ul li:nth-child(6) img , .AD ul li:nth-child(7) 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: 991px ){
#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;
}