@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;
}

html{
	
}
body{ 

}

@media screen and ( max-width: 768px ){
	body{
		background-size: 213%;
	}
}


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

}




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


/* kv */
.topbox { position:relative; width: 1200px; margin: auto;}
.title01{ top:187px; left:207px; position: absolute;}
.sp{ top:344px; left:279px; position: absolute;}
.sp1209{ top:342px; left:330px; position: absolute;}

.kv_pc {width: 100%; height:816px; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.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: 768px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.sidenav , .button { display: none; }	
	.container { max-width:100%; min-width:320px; padding:0 2vw; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.side-menu { display: none; }

}




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


h2 { background:url(../images/bg_theme.png) no-repeat center 5px; padding:0 0 20px 0; font-weight: bold; font-size:56px; line-height:80px;  text-align: center; color:#025a44; font-family:'Noto Serif TC',Arial, Helvetica, sans-serif; }
h3{ color:#575757; /*margin-top:-20px;*/ padding:0px 10px; /*font-weight:600;*/ line-height:24px; font-size:18px;}
.number{ color:#a62d33; font-size:1.4rem; /*font-family:'Noto Serif TC',Arial, Helvetica, sans-serif;*/ font-weight:bold;}	
.proname{/*font-family:'Noto Serif TC','Microsoft JhengHei','Heiti TC';*/ font-weight:normal;color:#777; font-size:1rem; padding:10px 10px 15px 10px;}	
	@media screen and ( max-width: 768px ){
		h2 { background:url(../images/m/mbg_theme.png) no-repeat center 3vw/100%; padding:2.5% 0 0% 0;  font-size: 1.8rem; line-height: 2.5rem; }
		h3{ line-height: 1.2rem; font-size: 1rem;}
        .number{font-size:1.2rem;}
		.proname{font-size:0.6rem;}	
	}




/* -- BACKGROUND -- */	
.box1{ width:1200px; background: url("../images/m/bg1_pk.png") repeat; padding:20px 0; border-radius:10px; margin:0 auto 50px auto;}
.box2{ width:1200px; background: url("../images/m/bg2_bl.png") repeat; padding:20px 0; border-radius:10px; margin:50px auto 0 auto; }
.r-rectangle{ background: url("../images/m/bg3_yellow.png") repeat; padding:20px 0; border-radius:10px;}

.bg_ad{ background: url("../images/m/bg_ad.png") repeat; padding:20px 0;}

.bg_1{ background:url("../images/bg_deco1.png") no-repeat center bottom, url("../images/bg_03.png") no-repeat center top, url("../images/m/bg.png") repeat; padding-bottom:50px; }
.bg_2{ background:url("../images/bg_deco2.png") no-repeat center 420px, url("../images/m/bg.png") repeat; padding:50px 0 0 0; padding-bottom:50px; }
.bg_3{ background:url("../images/bg_05.png") no-repeat center top; padding:20px 0;}
	.bg_3 h2 { color:#e3ab24;}

	
	@media screen and ( max-width: 768px ){
		.box1, .box2 { width:96vw; margin:0 auto; padding:0; margin-top: 0; margin-bottom:5vw;}

		.bg_ad{ padding:5vw 0;}

		.bg_1{ background:url("../images/m/bg.png") repeat; padding:5vw 0; }
		.bg_2{ background:url("../images/m/bg.png") repeat; padding:5vw 0 0 0; padding-bottom:5vw; }
		.bg_3{ background:url("../images/m/bg4_bk.png") repeat ; padding:0;}

}	







/* -- 1x3 -- */
.box_content{ width:1160px; margin:0 auto; }
.box_1x3 h2 { font-weight: bold; font-size: 22px; line-height: 10px; color: var(--PV-main); font-family: unset;}
.box_1x3 li{ width:370px; background-color:#fcf6ec; margin:0 25px 20px 0; text-align:center; border-radius: 10px;}
.box_1x3 li:nth-child(3n){ margin-right:0px;}
.box_1x3 .box2_block{ overflow:hidden;}
.box_1x3 li img{ max-height:350px; max-width:370px; vertical-align: middle; margin:0 auto; padding:16px 16px 0;}

	@media screen and ( max-width: 768px ){
/*		.box{ width:100%; min-width:320px;}*/
		.box_content{ width:100%; padding:2vw;}
		.box_1x3 h2 {padding:2.5% 0;  font-size: 1rem; line-height: 1.2rem; background: none; }
/*
		.box1 .box_content { width:90vw;}
		.box3 .box_content { width:90vw;}
*/

		.box_1x3{ display:flex; flex-wrap:wrap;}
		.box_1x3 li{ width:44vw; margin:1vw; border-radius:2px;}
		.box_1x3 li img{ max-height:46vw; max-width:46vw; vertical-align:top; padding:5vw 1vw 1vw 1vw;}
	}	




/* -- 1x4 -- */
.block2{ padding:0 0 0 0; min-width:1160px;margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch;}
.block2 li {width:280px; background-color:#fff; text-align:center;padding:8px; overflow:hidden; margin-right:13px; display:inline-block; vertical-align:top; margin-bottom:13px; border-radius:10px;}
/*.block2 li:hover{box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.2), 1px 4px 8px rgba(0, 0, 0, 0.2);}*/
.block2 li:nth-child(4n){margin-right:0px;}
.block2 li div{width:264px;height:264px;overflow:hidden; vertical-align:middle;line-height:264px; margin-bottom:8px;}
.block2 li img{ max-width:100%; max-height:100%; margin:0 auto; vertical-align:middle; }
.block2 li h2{ font-family: unset; height:auto; font-size:1.2rem; line-height:1.5rem; color:#fff; text-align:center; font-weight:600; overflow: hidden;  margin:10px 0px 5px 0px; background-color:#96300f; padding:5px; /*width:264px;*/}
.block2 li p{ height:auto; font-size:18px; line-height:24px; color:#353531; text-align:center; font-weight:500; position:relative;overflow: hidden; z-index:10; padding-bottom:8px; padding-top:8px;}
.block2 li h4{ height:auto; font-size:0.75rem; line-height:1.5rem; color:#777; text-align:center; font-weight:500; position:relative;padding-top:0px;}
.block2 li h4 span{  height:auto; font-size:1.4rem; line-height:1.5rem; color:#882c33; text-align:center; font-weight:900; position:relative;font-family:'notos-serif';}

	@media screen and ( max-width: 768px ){
		.block2{ padding:2% 0 2% 0; min-width:100%;margin:0 auto;}
		.block2 li {width:44vw; padding:1vw; overflow:hidden; margin:1vw; border-radius:2px;}
		.block2 li:hover{box-shadow:none;}
		.block2 li:nth-child(2n){margin-right:0px;}
		.block2 li:nth-child(4n){margin-right:0px;}
		.block2 li div{width:42vw;height:42vw;overflow:hidden;vertical-align:middle; margin:0 auto; line-height:45vw;margin-bottom:2vw;}
		.block2 li img{line-height:0; vertical-align:top; transition:all 0.5s;vertical-align:middle;}
		.block2 li h2{ font-size:0.8rem; line-height:1rem; margin:0px 0px 0px 0px; padding:5px 2px; letter-spacing:0px; background-image:none;}
		.block2 li p{font-size:0.8rem; line-height:1.1rem; padding-bottom:0;}
		.block2 li h4{font-size:0.5rem; line-height:1.5rem;padding-top:2%;}
		.block2 li h4 span{  font-size:1.2rem; line-height:1.5rem; }
	}

/* circle_4p */
.circle_4p { width: 1200px; min-width:1200px;margin: 40px auto; border-radius:10px;}
.circle_4p { margin: auto; min-width:1200px;  border-radius: 10px; padding:20px 0; margin-bottom:50px;}
.circle_4p h2 {  padding:0; font-weight: bold; font-size: 56px; line-height: 80px;  text-align: center; color:#025a44; }
.circle_4p h2 p { font-size: 26px; letter-spacing: 5px; line-height: 36px; color:#412521;}
.circle_4p ul { padding: 140px 31px 0px; overflow: hidden; display: flex; }
.circle_4p ul li { width: 274.5px; margin: 15px 5px; background-color: #fff; text-align: center; border-radius: 0 0 50px 50px; }
.circle_4p ul li a {  }
.circle_4p ul li img { display: block; border-radius:50%; margin: -132px auto 0 auto; height: 274.5px; width: 274.5px; border: solid 5px #f1f1f1;object-fit: contain;background: #ffffff; }

.circle_4p h3 { font-weight: bold; font-size: 22px; line-height:60px; color:var(--PV-main); }
.circle_4p p { /*font-weight: bold;*/ font-size: 18px; line-height:22px; color:var(--PV-font); }
.circle_4p .sale {position: relative; display: inline-block; width: 210px; margin: 20px;overflow: hidden; padding: 0 33px 0 8px; line-height: 43px; text-align: center;  }
.circle_4p span {font-weight: bold; font-size: 20px; border-radius:50px; border: var(--PV-price) 1px solid; color:var(--PV-price); }
.circle_4p span small { font-size: 16px;}
.circle_4p span .go { position: absolute;right: 0; top: -15px; background-color:var(--PV-price); color: #fff; font-size: 16px; line-height: 63px; padding: 3px;}

	@media screen and ( max-width: 768px ){
		.circle_4p { margin:  0 auto 5vw; padding: 0vw 1vw 6vw;width: 96vw; min-width: 96vw; }
		.circle_4p h2 { padding:2.5% 0 0% 0;  font-size: 1.8rem; line-height: 2.5rem; }
		.circle_4p h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.5rem; }
		.circle_4p ul { padding:0 2%; flex-wrap: wrap;  }
		.circle_4p ul li { width: 48%; margin:1%; padding:1%; border-radius: 0 ; }
		.circle_4p ul li img {  width: 42vw; height: 42vw; margin: 0 auto 0 auto;}
		.circle_4p h3 {  font-size: 1rem; line-height: 1.2rem; margin: 2vw;  }
		.circle_4p p {  font-size: 0.8rem; line-height: 1rem;  }
		.circle_4p .sale { width:90%; margin:3vw auto; overflow: hidden; padding: 0 14% 0 0; line-height: 2rem; text-align: center;  }
		.circle_4p span { font-size: 0.9rem; border-radius:50px; }
		.circle_4p span small { font-size: 0.7rem;}
		.circle_4p span .go {  top: -18px;  font-size: 0.5rem; line-height: 4rem; padding: 1%;}
	}

/* 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:0px 0 15px 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 5vw; 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 auto 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;}
	}




/* --類別分類-- */	
.cata{ padding:0 35px;}

.cata li{ text-align:center; width:207px; margin-right:12px; margin-bottom:25px; overflow:visible;}
.cata li:nth-child(5n){ margin-right:0px;}

.cata div{ width:207px; height:207px; border-radius:50%; overflow:hidden; /*border:#4ebbc0 5px solid;*/}
.cata div img{ width:207px; height:auto; }
.cata li p{ font-size:1.4rem; font-weight:bold; color:#d5d0c5; line-height:50px;}
	@media screen and ( max-width: 768px ){
		.cata{ padding:0 2%;}
		.cata div{ width:28vw; height:28vw;}
		.cata div img{ width:100%; height:auto; }
		.cata{ margin:0 auto;}
		.cata li{ display:inline-block; width:28vw;margin: 0px 1vw 15px 1vw;}
		.cata li:nth-child(5n){ margin-right:5px; display:block;}
		.cata li p{ size:0.8rem;  line-height:30px;}
	}
	@media screen and ( max-width: 540px ){
		.cata div{ width:40vw; height:40vw;}
		.cata{ margin:0 auto;}
		.cata li{ display:inline-block; width:42vw;margin:2vw;}
		.cata li:nth-child(5n){ margin-right:1.5vw;}
		.cata li p{ font-size:0.9rem;  line-height:30px;}
	}



/* --AD-- */
.boxAD{ /*background:url(../images/m/mbg_2.png) repeat center top;*/padding:0px 0px 0px 0px;}
.contenAD{ padding:0 20px;}
.boxAD ul{ padding-top:25px;}
.boxAD ul a{ display:block;float:left;}
.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(4){ width:1160px; transition:all 0.5s;}
.boxAD .item_pc{ width:1152px; margin-bottom:22px;}
.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:49%; margin-right:22px; overflow:hidden; margin-bottom:22px;}
.boxAD ul li img{ width:100%;}
.boxAD ul li:nth-child(3n){margin-right:0px;}
	@media screen and ( max-width: 768px ){
		.contenAD{ padding:0 0 10px 0;}
		.boxAD { width:96vw;  margin: 0 auto;}
		.boxAD ul{ padding-top:0vw; display:block;}
		.boxAD ul li{ width:96vw; margin:2vw auto;}	
		.boxAD ul li img{ width:96vw;}
		.boxAD .item_pc{ display:none;}
		.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(4),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:96vw;margin-right:0; margin-bottom:0vw;}
	}



/* AD */
.AD {width: 1200px; min-width: 1200px;}
.AD { margin: 0 auto 0px auto; padding: 20px 90px 20px 90px; overflow: hidden;/*background:url("../images/bg_01.jpg")*/  }
.AD ul li { margin: 10px 6px;}
.AD ul li img { width: 494px; }
@media screen and ( max-width: 768px ){	
/* AD */
.AD { margin: 0; padding: 2%; overflow: hidden;background:none; 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: 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;
}