@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 Sans TC',"Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none; background:url("../images/bg-w.jpg") repeat;
}


@media screen and ( max-width: 768px ){
	body{
		background:url("../images/bg-w.jpg") repeat center center;
	}
}


* {
  -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 { 
	-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)

}




.WRAPPER{ width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { max-width:1920px; margin:0 auto;}


/* kv */
.topbox { position:relative; width: 1200px; margin: auto;}

.product{ position:absolute;}


header{background:#f2b5b2;margin: 0 auto;min-width: 1200px;}
@media screen and ( max-width: 768px ){
header{background:#f2b5b2;margin: 0 auto;min-width: 100%;width: 100%;}	
	
}

.kv_pc {width: 100%; height:850px; text-align:center; background:url("../images/kv.jpg") top center no-repeat; max-width: 1920px; margin: 0 auto;}
.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; }
	@media screen and ( max-width: 768px ){
		.kv_m { display: block; width: 100%; }
		.kv_m img {  width: 100%; }
		.kv_pc { display: none; }
		.container { max-width:100%; min-width:320px; padding:0 2vw; text-align:center; }
		.for_pc{ display: none; }
		.for_m { display: block; margin: 0 auto; margin-bottom: 2vw; width: 96vw;}
	}

.title01{ position: absolute;top:87px; left: 679px;z-index: 99;}
.title02{ position: absolute;top:213px; left: 680px;z-index: 99;}
.title03{ position: absolute;top:91px; left: 1038px;z-index: 99;}



/* Public Version 公版顏色設定 */
:root {
	--PV-font: #575757; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #b61911; /* 價格顏色-紅 */
}





/* -- BACKGROUND -- */	
.r-rectangle{ background: url("../images/m/bg1-br.png") repeat; padding:20px 0; border-radius:10px;}
.bg_1{ background:url("../images/layout_01.png") no-repeat center top; padding:60px 0 30px 0; }
.bg_3{ background:url("../images/layout_04.png") no-repeat center top; padding:78px 0 30px 0; }
.bg_2{ background:url("../images/layout_02.png") repeat; padding:130px 0 30px 0;}
.bg_4{ background:url("../images/layout_05.png") repeat; padding:130px 0 30px 0;}
.bg_6{padding:0px 0 60px 0; background:url("../images/layout_05.png") no-repeat center bottom;}
.bg_7{ background:url("../images/m/bg1-br.png") repeat; padding:20px 0 30px 0; }
.bg1200{ width:1200px; margin:0 auto; padding:120px 0 20px 0;border-radius:10px;/* background:url("../images/bg-y.jpg") repeat;*/} 
.bg_3 .bg1200{ /*background:url("../images/bg-p.jpg") repeat;*/padding: 150px 0 30px 0;}

	.bg_5 .box_1x4 ul{ padding:0px 0 8px 0; }
	
.bg_bn{ background: url("../images/bg-y.jpg") repeat; padding:20px 0;}
.bg_bnyk{ background: url("../images/layout_05.png")top center no-repeat; padding:120px 0 0 0;}

	@media screen and ( max-width: 768px ){
		.bg_1, .bg_2, .bg_3, .bg_4, .bg_5, .bg_6{ background:none; padding:2vw 0; }
		.bg_7{ padding:2vw 0; }
			.bg1200,.bg_3 .bg1200{ width:96vw; padding: 2vw 0;}

		.bg_bn{ padding:2vw 0;}
.bg_bnyk{ background: url("../images/bg-p.jpg")top center repeat; padding:2vw 0 0 0;}
		.bg_1{ background: url("../images/bg-y.jpg")top center repeat;}	.bg_3{ background: url("../images/bg-bl.jpg")top center repeat;}
		.bg_6{ background: url("../images/bg-p.jpg")top center repeat; padding: 0px;}
		.bg_bnyk .item_m{ margin-bottom: 0px;}
}	





/*--------------------common--------------------*/
/* theme */
h2 { max-width:1200px; margin:0px auto 10px auto;  line-height:55px; font-size:48px; font-weight:bold; text-align:center; font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; display: none;}
h2 p { font-size:32px; line-height:40px;  letter-spacing:4px; text-align:center;}
h2 big{ font-size: 65px;}

.bg_1 h2,.bg_3 h2,.bg_bnyk h2{ color: #640f0a;background:url(../images/bg_theme.png) no-repeat center center;}
.bg_1 h2 big,.bg_3 h2 big,.bg_bnyk h2 big{color: #b61911;}
.bg_2 h2,.bg_4 h2{ color: #640f0a;background:url(../images/bg_theme2.png) no-repeat center center;}
.bg_2 h2 big,.bg_4 h2 big{color: #b61911;}

/*product layout*/
.box{ position:relative; width:1200px; padding:0 20px; margin:0 auto; display:flex; justify-content:center; text-align:center; }
.box ul{ width:100%; list-style:none; padding:0 0 0 0; z-index:2;}
.box ul li{ display:inline-block/*inline-table*/; text-align:center; vertical-align:top; overflow:hidden;}
.box ul li img{ object-fit:contain; display:block; padding:5%;}

/*product img*/
div.productContentImg{ position:relative; width:auto; height:250px; margin:0 auto 6% auto; background:#ffffff;}
div.productContentImg img{ 
	max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto; }
div.productContentImg span.sentence{ position:absolute; width:65%; bottom:-15px; left:0; right:0; margin:0 auto; padding:1.6% 2%; color:#ffffff; background:#b61911; border-radius:25px; z-index:2; font-size:18px;}

/*product txt*/
li span{ font-size:18px; line-height:24px;color:#000; display:inline-block; }
li p{ font-size:18px; line-height:38px; color:#000;}
span.priceR{ color:#b83e2e; font-size:24px; line-height:30px; font-weight:bold; }
span.txtR{ font-size:24px; color:#b83e2e; padding-right:5px; font-weight:bold; }

	@media screen and ( max-width: 768px ){
		h2 { max-width:100%; margin:0vw auto 1vw auto; background:url(../images/m/mbg_theme.png) no-repeat center center/100%; line-height:1.5em; font-size:1.8em; display: block;}
		h2 big{ font-size: 2.3rem;}
		h2 p { font-size:2rem; letter-spacing:0px;  }
		
		.box{ width:96vw; padding:0; margin:0 auto; display:inline-flex;}
		
		div.productContentImg{ height:46vw; margin:0 auto 7vw auto;}
		div.productContentImgB{ height:46vw;}
		div.productContentImg img{ bottom:2vw;}
		div.productContentImg span.sentence{ width:100%; bottom:-5vw; font-size:0.8em; line-height:1.6em; border-radius:0vw;}

		li span{ font-size:0.8em; line-height:1.2em;}
		li p{ font-size:0.8em; line-height:3em;}
		span.txtR{ font-size:1em; }
		.box ul{  align-items: stretch; display: flex;flex-wrap: wrap;}
	}
	@media screen and ( max-width: 414px ){
		h2 { font-size:1.8em; }
		h2 big{ font-size: 2rem;}
		h2 p { font-size: 1.2rem; line-height: 1rem; }
	}
/*--------------------common--------------------*/





/* 1x3 */
.box_1x3 ul li{ width:32.1%; margin:6px 5px; background:#ffffff; padding:1% 2%; border-radius: 10px;}
.box_1x3 ul li img{ padding:0%;}
	@media screen and ( max-width: 768px ){
		.box_1x3 ul li{ width:47.5%; margin:1% 1%; padding:2vw 0 0vw 0; border-radius: 0px;}
		/*.box_1x3 ul li:first-of-type{ width:96%;}*/
		.box_1x3 ul li:last-child{ width:96%; }
		.box_1x3 ul li img{ padding:5%;}
		.box_1x3 ul li:last-child div.productContentImg{ width:100%; }
		.box_1x3 ul li:last-child div.productContentImg img{ width:70%;}
		.box_1x3 ul li img.item_m{ height: auto;}
	}


/* 1x4 */
.box_1x4 ul{ padding:10px 0 0 0;}
.box_1x4 ul li{ width:22%; margin:0 5px; background:#fff; }
.box_1x4_2{ padding-bottom:30px; }
.bg_3 .box_1x4 ul li{ width:23.7%; margin:0 5px; background:#fff; }
.bg_2 .box_1x4 ul li{ width:22%; margin:0 5px; background:#fff; }
.bg_2 .box_1x4 ul{ margin: 0 auto;}

.box_1x4 div.productContentImg{ margin: 0 auto 12% auto;}
.box_1x4 div.productContentImg span.sentence{ width:100%; bottom:-30px; padding:1.6% 5%; border-radius:0px;}
	@media screen and ( max-width: 768px ){
		.box_1x4{ padding-top:0vw;}

		.box_1x4 ul{ margin-top:0vw; padding: 0;}
		.box_1x4 ul li{ width:47.5%; margin:1% 1%;}
		.bg_2 .box_1x4 ul li,.bg_3 .box_1x4 ul li{ width:47.5%; margin:1% 1%;}

		.box_1x4 div.productContentImg{ margin:0 auto 7vw auto;}
		.box_1x4 div.productContentImg span.sentence{ bottom:-5vw; padding:1.6% 3%; }
		.box_1x4_2{ padding-bottom:2vw; }
	}





/* r-rectangle */
.r-rectangle { width: 1200px; margin:40px auto;min-width:1200px;}
.r-rectangle { padding:20px 0; margin:auto; min-width:1200px;  border-radius: 10px; /*margin-bottom:50px;*/}
.r-rectangle h2 { padding:0; font-weight: bold; font-size: 56px; line-height: 80px; text-align: center; z-index: 2;  }
.r-rectangle h2 p { font-size: 22px; letter-spacing: 5px; color: #412521;line-height: 36px;}
.r-rectangle ul { padding: 0px 50px 0px; overflow: hidden; display: flex; }
.r-rectangle ul li { width: 326px; padding: 30px 30px 10px; margin: 15px 20px; background-color: #fff; text-align: center;border-radius:25px; }
.r-rectangle ul li a {  }
.r-rectangle ul li img { display: block; width: 266px;height: 266px;object-fit: contain; margin: 0 auto 0 auto; }
.r-rectangle h3 { padding: 10px 0 0; font-weight: bold; line-height: 32px; font-size: 22px;  color:var(--PV-main); }
.r-rectangle p { /*font-weight: bold;*/font-size: 18px; line-height: 24px; color:var(--PV-font); }
.r-rectangle .sale { display: inline-block; line-height: 43px;   }
.r-rectangle span {font-weight: bold; font-size: 22px; color:var(--PV-price); }
.r-rectangle span small { font-size: 16px;}

	@media screen and ( max-width: 768px ){
		.r-rectangle { margin: 0 auto; padding: 0vw 1vw 6vw;width: 96vw; min-width: 96vw; } 
		.r-rectangle h2 { padding:2.5% 0 0% 0; font-size: 1.8rem; line-height: 2.5rem;  text-align: center;margin-top: 0; letter-spacing: -0.1rem;}
		.r-rectangle h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.5rem; }
		.r-rectangle ul { padding: 0% 2%; overflow: visible; display: flex; flex-wrap: wrap; }
		.r-rectangle ul li { padding:5% 2%; width: 98%; margin:1%; background-color: #fff; text-align: left; border-radius: 2vw;}
		.r-rectangle ul li img { display: block; width: 42vw; height: 38vw; margin:0 2vw 0 auto; float: left;}
		.r-rectangle h3 { padding:0 2% 2% 0;font-weight: bold; font-size: 1.2rem; line-height: 1.5rem;  }
		.r-rectangle p { font-weight: bold; font-size: 0.8rem; line-height: 1.2rem;  }
		.r-rectangle .sale {display: inline-block; line-height: 2rem;  }
		.r-rectangle span {font-weight: bold; font-size: 1.2rem; }
		.r-rectangle span small { font-size: 1rem;}
	}










/* AD */
.bn { width:1200px; min-width: 1200px; margin: 0 auto; padding:0 20px;}
.bn ul { margin:0 auto; text-align:center;}
.bn ul li { margin:5px; display:inline-block;}
.bn ul li img { width:562px; }
.bn ul li.bn1280 img{ width:1060px; } /*for 1280x307*/
	@media screen and ( max-width: 768px ){	
		.bn { padding:2vw; width:100%; min-width:100%;}
		.bn ul li { margin:1vw; }
		.bn ul li img { width:92vw; }
		.bn ul li.bn1280 img{ width:92vw; }
			
	}










/*--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: 20px;
  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;
}

/*for mobile*/
menu{display:none;}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display: inline-flex; justify-content:center; text-align:center;
	flex-wrap: wrap;
	list-style: none;
	background-color:#f2b5b2;
	z-index:1000;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:1px solid #640f0a;
	padding:2px 0;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	font-size:13px;
	letter-spacing:1px;
	/*border-bottom:1px solid #dfdaad;*/
}
menu ul li a{
		font-size:12px;
}
menu ul li:nth-child(4n){
	border-right:none;
}
/*menu ul li:nth-child(5), menu ul li:nth-child(6), menu ul li:nth-child(7), menu ul li:nth-child(8){
	border-bottom:none;
}*/
menu a{
	color:#640f0a !important;
	text-decoration:none;
}

	@media screen and ( max-width: 768px ){
		.side-menu{ display:none;}
		menu{ display:block;}
	}


/*navigation bar for pc*/
/* Style the navbar */
#navbar {
	/*overflow: hidden;*/
	background:url(../images/bg_menu.png) repeat;
	max-width:1920px;
	height:60px;
	z-index:990; min-width:1200px; margin:0 auto;
  }
  	@media screen and ( max-width: 768px ) {
		#navbar{ display:none;} 
		.sticky + .content { padding-top:0px !important;}
	}

  .nav_content{ width:1200px; margin:0 auto;}