@charset "utf-8";
/*{ box-sizing:border-box;border:1px  #268A28 solid;}
/* CSS Document */
/* ---reset.css--- */




/* -- 區塊 -- */
.box{ padding: 0px 0 30px;}
/*.box1{ padding: 40px 0 20px;}*/
/*.box12{ padding: 100px 0 20px;}*/
.box_content{width:1200px; margin:0 auto; }
/*.box3,.box6,.box9 {background:url("../images/deco02.png") top center no-repeat,url("../images/deco3_01.png") bottom center no-repeat,url("../images/bg.png") top center repeat;}
.box12 {background:url("../images/deco02.png") top center no-repeat,url("../images/bg.png") top center repeat;}
.box4,.box7,.box10{background:url("../images/deco3_02.png") top center no-repeat,url("../images/mbg_1.png") top center repeat;}*/
.box1{background:url("../images/bg02.jpg") top center no-repeat;}
/*.box:nth-child(3n+2){background:url("../images/deco01.png") top center no-repeat,url("../images/mbg_2.png") top center repeat;}*/
.box .sale { display: inline-block; line-height: 28px;   }
.box span {font-weight: bold; font-size: 22px; color:var(--PV-main); }
.box span small { font-size: 16px; }
@media screen and ( max-width: 768px ){
	.box{ padding: 2vw 0 0vw;}
.box1{ padding: 2vw 0 0vw;}
	.box_content{width:92vw; margin:3vw auto; }
	.box{ width: 100%;}
	.box{background:url("../images/bg-y.jpg") top center repeat;}
	.box .sale { display: inline-block; line-height: 30px;   }
.box span {font-weight: bold; font-size:1.5rem; color:var(--PV-main); }
.box span small { font-size:0.9rem; }
	
}


/* -- 月曆底 -- 
.box1 .left_block{background:url(../images/calendar-01.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box2 .left_block{background:url("../images/calendar-02.png") top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box3 .left_block{background:url(../images/calendar-03.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box4 .left_block{background:url(../images/calendar-04.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box5 .left_block{background:url(../images/calendar-05.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box6 .left_block{background:url(../images/calendar-06.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box7 .left_block{background:url(../images/calendar-07.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box8 .left_block{background:url(../images/calendar-08.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box9 .left_block{background:url(../images/calendar-09.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box10 .left_block{background:url(../images/calendar-10.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box11 .left_block{background:url(../images/calendar-11.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}
.box12 .left_block{background:url(../images/calendar-12.png) top left no-repeat,url(../images/calendar-bg.png) top center repeat;}*/

@media screen and ( max-width: 768px ){
.box1 .left_block
	{background:url("../images/bg-g.jpg") top center repeat;  background-size: 100%; border-radius: 8px; border: 1px solid #ffffff;}
}
	
/* -- 公版 -- */
.left_block{width: 610px; float: left; height: 736px; margin-top: 8px; padding: 30px 70px; margin-left: 30px; }

.calender{overflow: hidden; display: flex;flex-wrap: wrap;}
.calender li{ margin: 30px auto 30px;}
.calender li p{font-size: 24px;line-height: 30px; text-align:center; background-color:#f5c55d; padding: 3px 8px; position: relative; color: #0a5958; margin: 20px 0 10px 0; border-radius:30px;}
/*.calender li:nth-child(1) h3{ font-size: 300px;line-height: 240px; font-family: 'Noto Serif TC'; width: 100%;text-align: right; margin-bottom: 80px; color: #e12021; margin-top: -30px;}*/
.calender li span{font-size: 18px;line-height: 28px;color: #ffffff; text-align:center;}
.calender li img{ display:block; width: 470px; height: 470px;}



@media screen and ( max-width: 768px ){
	
	.left_block{ width: 100%; height: auto; float: none;display: block; padding: 0 0; margin-top: 2vw; margin-left: 0; margin: 0 auto; padding: 5vw 0 2vw;}
	.calender{width: 80vw; margin: 0 auto; margin-bottom: 3vw;}
	.calender li{ margin: 0 auto 0; text-align:center;}
	
.calender li p{width: 100%; height:auto; font-size: 18px; margin: 0 auto; margin: 20px 0 10px 0; text-align:center; }
.calender li h3{ display: none;}
.calender li span{font-size: 15px;line-height: 24px;color: #ffffff; text-align:center; padding-right: 0px; }
.calender li img{ display:block; width: 100%; height:auto; margin: 0 auto;}

}


.block{ padding: 22px 0 0px; width:560px; margin:0 auto; display:flex; flex-wrap:wrap; align-item:stretch; float: right;}
.block li {width:260px; background-color:#fff; text-align:center; padding:10px; overflow:hidden; display:inline-block; vertical-align:top; margin: 4px;position: relative; transition:all 0.5s; border-radius:0px;}
.block li:hover{transform: translateY(-8px);}
.block li img{ width:242px; height:242px; object-fit: contain; margin:0 auto 8px auto;}
.block li h2{ height:auto; font-size:16px; line-height:20px; color:#ffffff; text-align:center; font-weight:bold; position:relative; overflow: hidden;  margin:5px 0px 5px 0px; background-color:#c74a28; padding:2px; width:242px;}
.block li p{ height:auto; font-size:16px; line-height:12px; color:#353531; text-align:center; font-weight:bold; position:relative; overflow: hidden; z-index:10; padding-bottom:8px; padding-top:8px;}

	@media screen and ( max-width: 768px ){
		.block{ padding:2% 0 2% 0; min-width:92vw; margin:0 auto; width: 92vw;}
		.block li {width:45vw; padding:1vw; overflow:hidden; margin: 0; margin-right:2vw; margin-bottom:2vw;}
		.block li:hover{box-shadow:none;}
		.block li:nth-child(2n){margin-right:0px;}
		.block li:nth-child(4n){margin-right:0px;}
		.block li img{width:42vw;height:42vw;}
		.block li h2{ width: 100%; font-size:12px; line-height:18px;  margin:0px 0px 0px 0px;  padding:2px 2px;}
		.block li p{font-size:12px; line-height:12px; padding-bottom:0; padding-top: 5px;}
}



/*navigation bar for pc*/
/* Style the navbar */
  #navbar {
	overflow: hidden;
	background:url("../images/navbg.jpg") top center no-repeat;
	/*max-width:1920px;*/
	   width:100%; min-width:1200px; 
	height:70px;
	z-index:999;
  }
  	@media screen and ( max-width: 768px ) {
		#navbar{ display:none;} 
		.sticky + .content { padding-top:0px !important;}
	}

  .nav_content{ width:1200px; margin:0 auto;}
  
  /* Navbar links */
  #navbar a {
	float: left;
	display: block;
	color: #fffbe4;
	text-align: center;
	text-decoration: none;
	width:240px;
	font-size:24px;
	font-weight: bold;
  }
  
  /* Page content */
  .content {
	padding: 0px;
  }
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
	position: fixed;
	top: 0;
	width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
	padding-top: 70px;
  }


/*for mobile*/
menu{display:none;}
	@media screen and ( max-width: 768px ){
		menu{ display:block;}
	}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	list-style: none;
	background-color:#ce552f;
	z-index:1000;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:1px solid #ffffff;
	padding:4px;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	font-size:13px;
	letter-spacing: -1px;
}
menu ul li a{
		font-size:13px;
}
menu ul li:nth-last-child(1){
	border-right:none;
}
menu a{
	color:#ffffff !important;
	text-decoration:none;

}