@charset "utf-8";
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;
}

html, body{	
	font-family:'Noto Sans TC',"Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
	scroll-behavior:smooth;
}
	@media screen and ( max-width: 768px ){
		body{
			background:url("../images/m/mbg_1-gr.png") repeat center center/7%;
		}
	}


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



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



.WRAPPER{ 
	max-width:1920px; min-width:1200px; margin:0 auto; overflow:hidden; position:relative;
	background:#3f9539;
}
.container1200 { max-width:1200px; margin:0 auto; padding:0 0; position:relative; }
.container1920 { max-width:1920px; margin:0 auto; padding:20px 0; position:relative; }
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ min-width:100%; min-width:100%; position:initial;}
		.container1200, .container1920{ max-width:100vw; min-width:320px; padding:2vw; text-align:center; }
		.container1200{ padding:0;}
	}


/* -------------------------------------------------------------------------------- */


/* -- KV -- */
.topbox { position:relative; width:1200px; margin:0 auto;}
	/*decoration*/
	.deco{ position:absolute;}
	.d-money{ top:242px; right:655px; animation:money 2.5s ease-in-out 0s infinite alternate; }
	.kv-sp{ position:absolute; top:480px; right:218px; }
	.kv-org1{ position:absolute; top:739px; left:109px; }
	.kv-org2{ position:absolute; top:702px; left:295px; }
	.kv-org3{ position:absolute; top:625px; right:94px; }
	.kv-org4{ position:absolute; top:648px; right:27px; }
	.kv-org5{ position:absolute; top:346px; right:13px; }

.kv_pc{ width:100%; height:845px; text-align:center; background:url("../images/kv.png") top center no-repeat; }
.kv_pc img{ display:block; }

.kv_m, .mItem{ display:none; }
.pcItem{ display:block; }
	@media screen and ( max-width: 768px ){
		.deco{ position:absolute;}
		.d-money{ width:18vw; top:49vw; right:3vw; }

		.kv_m { display:block; width:100vw; position:relative; background:url("../images/m/kv_m.png") no-repeat center top/100%; height:144vw; }
		.kv_m a { font-size:0; display:block; }

		.kv_pc, .pcItem{ display:none; }
		.mItem{ display:block; }
	}



/* -- BACKGROUND -- */	
.bg_1{ height:1212px; background:url("../images/bg_flower.png") no-repeat center; padding:0; }
.bg_banner{ height:876px; background:url("../images/bg_banner.png") no-repeat center top; padding:4px 0;}
	@media screen and ( max-width: 768px ){
		.bg_1{ height:auto; background:none; }
		.bg_banner{ height:auto; padding:2vw 0; background-size:100%; background-repeat:repeat-y; }
	}	

span.priceR{ color:#b83f2e; font-size:1.5em; line-height:0.8em; font-weight:bold;}
	@media screen and ( max-width: 768px ){
		span.priceR{ padding:0 1vw !important; color:#b83f2e !important; }
	}	


/* -- CONTENT -- */
img.couponTheme{ max-width:100%; margin:0 auto; position:relative; bottom:-10px; z-index:2; }
.couponOuter{ 
	height:auto; position:relative; 
	background:#faf4e3; border:20px solid #3951a2; border-radius:20px; }

	/*decoration*/
	.d-pig{ bottom:-40px; left:-150px;}
	.d-cat{ bottom:-40px; right:-50px;}

	.d-m1{ top:-48px; left:50px; animation:money 2.5s ease-in-out 0s infinite alternate;}
	.d-m2{ top:10px; left:-10px; animation:money 2.5s ease-in-out 0s infinite alternate-reverse;}
	.d-m3{ top:-15px; right:20px; animation:money 2.5s ease-in-out 0s infinite alternate; }
	.d-m4{ bottom:270px; left:170px; animation:money 2.5s ease-in-out 0s infinite alternate; }
	.d-m5{ bottom:250px; right:200px; animation:money 2.5s ease-in-out 0s infinite alternate-reverse; }
	.d-m6{ bottom:210px; right:140px; animation:money 2.5s ease-in-out 0s infinite alternate; }
			@keyframes money {
				0%{ transform:rotate(0deg); }
				100%{ transform:rotate(50deg); }
			}

/* coupon */
.box_coupon{ display:flex; flex-wrap:wrap; justify-content:center; margin:2% 2% 0 2%; padding:0 0 2% 0; }
.btnCoupon100, .btnCoupon200, .btnCoupon300, .btnCoupon500, .btnCoupon1000{ width:488px; height:208px; margin:12.5px;}
.box_coupon a{ display:block; }
.box_coupon img{ display:block; max-width:100%; margin:0 auto; }
/* text */
.box_txt{ background:#f5e9ca; padding:30px; }
.box_txt ol{ width:800px; margin:0 auto; padding-left:30px; }
.box_txt ol li{ list-style:disc; font-size:18px; line-height:34px;}
	@media screen and ( max-width: 768px ){	
		.couponOuter{ margin:2vw 3vw 4vw 3vw; border:10px solid #3951a2; }
		.couponOuter .deco{ display:none;}
		
		.box_coupon{ padding:2vw 0 4vw 0; }
		.btnCoupon100, .btnCoupon200, .btnCoupon300, .btnCoupon500, .btnCoupon1000{ height:auto; margin:1.8vw 2vw; }

		.box_txt{ text-align:left; border-radius:0 0 10px 10px;}
		.box_txt ol{ width:100%; padding-left:2vw; }
		.box_txt ol li{ font-size:1em; line-height:1.5em; text-align:justify; }
			
	}



/* -- AD -- */
.banner{ max-width:1200px; margin:0 auto; padding:20px; background:#f4b2b7; }
.banner ul { width:100%; margin:0 auto; text-align:center; }
.banner ul li { margin:5px; display:inline-block;}
.banner ul li img { width:562px; }
.banner ul li.bn1280 img{ width:1138px; } /*for 1280x307*/
	@media screen and ( max-width: 768px ){	
		.banner{ padding:2vw; background:none; }
		.banner ul li { margin:1vw; }
		.banner ul li img { width:92vw; }
		.banner 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: 10vw;
			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;
}



/* -- sidemanu for pc -- */
.side-menu{
	position: fixed;
	width: 130px;
	top:6%;
	padding:10px;
	border-radius:0 0 20px 0;
	box-sizing: border-box;
	background:#f9b900;
	opacity:0.95; 
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
}
.side-menu label{
	position: fixed;
	width: 40px;
	height: 150px;
	background:#3752a3;
	opacity:0.95; 
	color: #faf4e3;
	right: -40px;
	top: 0%;
	line-height: 28px;
	text-align: center;
	font-size: 24px;
	border-radius: 0 10px 10px 0;
	padding:18px 8px 10px 8px;
	font-weight:500;
}
#side-menu-switch{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch:checked + .side-menu{
	transform: translateX(0);
}
nav a{
	display: block;
	padding: 6px 5px;
	color: #000000;
	text-decoration: none;
	position: relative;
	font-size:14px;	
	font-weight: 300;
}
nav a:hover{
	color: #ffffff;
	background-color:#2a438d;
	border-radius:0;
}
nav p.name_menu{ padding:5% 0 3% 0; font-size:1.5em; line-height:1.2em; border-bottom:1px solid; color:#3752a3;}
nav ul.area1{ margin-bottom:150px;}
nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #2a438d;}
nav ul.area1 li:nth-child(even){ border-right:1px dotted #2a438d;}
nav ul.area2 li{ border-bottom:1px dotted #2a438d;}
nav ul.area1 li:nth-last-child(1), nav ul.area1 li:nth-last-child(2), nav ul.area2 li:nth-last-child(1){ border-bottom:none;}



/* -- sidemanu for mobile -- */
.sidenav, .icon_sidenav { display: none;}
@media screen and ( max-width: 768px ){
	.side-menu {display: none;}
	.icon_sidenav{ 
		display: inherit; 
		position: fixed;
		z-index: 999;
		bottom: 15%;
		right: 0px;
		max-width: 15%;
		padding: 3% 2%;
		background:#3752a3;
		color:#fffded;
		border-radius: 8px 0 0 8px;
		line-height:1.1em;
		font-size:1.2em;
	}
	.icon_sidenav img{
		max-width: 100%;
		padding: 15% 18%;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		background:rgba(0, 0, 0, 1);
	}
	.sidenav {
		display: inherit;
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		background-color:rgba(249, 185, 0, 0.98);
		overflow-x: hidden;
		transition: 0.3s;
		padding-top: 60px;
	  }
	  .sidenav p {
		padding-bottom: 1.5vw;
		margin-left: 8vw;
		font-size: 32px;
		color: #3752a3;;
		font-weight: bold;
		border-bottom:1px solid #3752a3;
	  }
	  .sidenav p:last-of-type{ margin-top:5vw;}
	  .sidenav a {
		margin: 2vw 0 2vw 8vw;
		text-decoration: none;
		font-size: 18px;
		color: #000000;
		display: block;
		transition: 0.3s;
		font-weight: 300;
	  }
	  
	  .sidenav a:hover {
		color: #fffcd4;
	  }
	  
	  .sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	  }
	  
	  @media screen and (max-height: 450px) {
		.sidenav {padding-top: 15px;}
		.sidenav a {font-size: 18px;}
	  }

	.sidenav .style_2column{
		display:flex;
		flex-wrap:wrap;
	}
	.sidenav .style_2column li{
		max-width:50%;
		margin:1.5vw 0 1vw 8vw;
	}
	.sidenav .style_2column li a{
		margin:0;
	}
}