@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap);

@font-face {
    /*--處理中文難字問題 --*/
    font-family: 'tcav';
    src: url('fonts/mingliu.ttf') format('truetype');}

  *{font-family: 'Noto Sans TC', sans-serif, '微軟正黑體';
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #333333;
	outline: none;}

/*-- 隱藏input數字預設輸入上下箭頭調整功能 --*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;}

img{border: 0;}

a:link, a:checked, a:visited{
	color:#db491d;
	text-decoration: none;}

/*-- 預載Loading --*/
.loader{
	position: fixed;
	display: inline-block;
	height: 100vh;
	width: 100%;
	background: rgba(255, 255, 255, 0.8) url(../images/loading.svg) center no-repeat;
	background-size: 25%;
	z-index: 2;
	top: 0;
	left: 0;}

/*-- header --*/
header{
	width: 100%;
	height: 70px;
	background: #007c7c;
	position: sticky;
    top: 0;
	z-index: 999;}

.header-wrap{
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 15px 2%;
	max-width: 1200px;}

.logo-wrap{
	display: inline-block;
	position: relative;
	width: auto;
	text-align: left;
	height: 40px;
	line-height: 4px;
	z-index: 1;
	color: #fff;
	font-size: 22px;}

.logo-wrap img{
	height: 100%;
	vertical-align: middle}

/*-- 選單 --*/
.navi-warp{
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);}

.navi-warp ul{
	display: flex;
	justify-content: center;
	padding: 10px;
	counter-reset:num;}

.navi-warp ul li{
	list-style: none;
	display: inline-block;
	padding: 2px 15px 7px;
	margin: 0 2px;
	color: #fff;
	line-height: 18px;
	border: 2px #007c7c solid;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;
	border-radius: 50px;}

.navi-warp ul li span{
	counter-increment:num;
	color: #fff;}

.navi-warp ul li > span::before{
	content: '技巧' counter(num);
	position: relative;
	text-align: left;
	font-size: 13px;
	font-weight: 200;
	display: block;
	color: #ffff00;}

.navi-warp ul li:hover{
	border-bottom: 2px solid #ffff00;
	color: #ffff00;
	transform: translateY(-5px);}

.navi-warp ul li a{color: #fff;}
.navi-warp ul li div.break{ display: none;}

/*-- 主內容區 --*/
/*======START=======*/
.container{
	display: inline-block;
	width: 100%;
	overflow: hidden;}

	/*-- 主視覺 --*/
	.theme-wrap{
		display: inline-block;
		width: 100%;
		height: 630px;
		margin: 0 auto;
		background: url(../images/theme-bg.png) top -70px center repeat;
		background-size: cover;}

	.theme{
		display: inline-block;
		width: 100%;	
		height: 100%;
		max-width: 1400px;
		padding: 0 2% 0;
		z-index: 1;}

	.theme-clouds{
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		max-width: 1400px;
		height: 100%;
		background: url(../images/theme-bgclouds.png) top center no-repeat;
		background-size: contain;}

	.theme-ppl{
		display: inline-block;
		width: 80%;
		max-width: 450px;
		height: 374px;
		background: url(../images/theme2-pplheart.gif) bottom center no-repeat;
		background-size: contain;}		
	
	.theme2-title2{
		display: inline-block;
		position: absolute;
		left: 50%;
		top: 60%;
		transform: translate(-50%, -50%);
		width: 100%;
		max-width: 803px;
		height: 260px;}

	.theme2-title2 > span{
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(../images/theme2-title2.png) bottom center no-repeat;
		background-size: contain;}

	.theme2-title2::after{
		content: '';
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 36.48%;
		max-width: 293px;
		height: 136px;
		background: url(../images/theme2-titletag.png) bottom center no-repeat;
		background-size: contain;
		z-index: -1;
		animation: theme-titletag-ani 5s linear infinite;}
		@keyframes theme-titletag-ani{
			0%{ transform: rotate(-3deg);
				transform-origin: left bottom;}
			50%{ transform: rotate(0deg);
				transform-origin: left bottom;}
			100%{ transform: rotate(-3deg);
				transform-origin: left bottom;}
		}
	
	.theme2-title1{
		display: inline-block;
		position: absolute;
		left: 50%;
		top: 60%;
		transform: translate(-50%, -50%);
		width: 35.99%;
		max-width: 289px;
		height: 180px;}

	.theme2-title1 > span{
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(../images/theme2-title1.png) bottom center no-repeat;
		background-size: contain;
		animation: theme-title1-ani 2s ease-in-out infinite;}
		@keyframes theme-title1-ani{
			0%{transform: scale(1) rotate(2deg);}
			50%{transform: scale(1.04) rotate(0deg);}
			100%{transform: scale(1) rotate(2deg);}
		}

	.theme2-title1 > span::after{
		content: '';
		position: absolute;
		display: inline-block;
		width: 50.17%;
		max-width: 145px;
		height: 109px;
		right: -30px;
		bottom: 0;
		background: url(../images/deco-kiss.png) bottom center no-repeat;
		background-size: contain;
		opacity: 0;
		animation:  akiss-ani 4s ease-in-out infinite;}
		@keyframes akiss-ani{
			0%{transform: scale(1.8) rotate(5deg);
			    opacity: 0;}

			25%{transform: scale(1.8) rotate(0deg);
			    opacity: 0;}

			5%{transform: scale(1.8);
				opacity: 0;}

			50%{transform: scale(1) rotate(-5deg);
				opacity: 1;}

			75%{transform: scale(0.99) rotate(0deg);
					opacity: 1;}

			90%{transform: scale(1);
				opacity: 1;}					

			100%{transform: scale(1) rotate(5deg);
				opacity: 0;}
			}		

	.theme2-subtitle{
		display: inline-block;
		position: absolute;
		width: 100%;
		max-width: 557px;
		height: 133px;
		left: 50%;
		bottom: 60px;
		transform: translateX(-50%);}

	.theme2-subtitle > span{
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(../images/theme2-subtitle.png) bottom center no-repeat;
		background-size: contain;
		animation-delay: 0.8s;}

	.theme-date{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 100px;
		width: 154px;
		height: 103px;
		background: url(../images/theme-date.png) bottom center no-repeat;
		background-size: contain;
		animation-duration: 1.8s;
		animation-delay: 0.3s;}

	/* spotlight */
	.spotlight-r{
		display: inline-block;
		position: absolute;
		top: -100px;
		right: 0;
		width: 610px;
		height: 804px;
		background: url(../images/deco-spotlightRight.png) center no-repeat;
		background-size: contain;
		animation: spotlight-r-ani 10s linear infinite;
		z-index: 1;
		opacity: 0.8;
		pointer-events: none;}
		@keyframes spotlight-r-ani{
			0%{ transform: rotate(40deg);
				transform-origin: right top;}
			50%{ transform: rotate(-40deg);
				transform-origin: right top;}
			100%{ transform: rotate(40deg);
				transform-origin: right top;}
		}

	.spotlight-l{
		display: inline-block;
		position: absolute;
		top: -100px;
		left: 0;
		width: 610px;
		height: 804px;
		background: url(../images/deco-spotlightLeft.png) center no-repeat;
		background-size: contain;
		animation: spotlight-l-ani 8s linear infinite;
		z-index: 1;
		opacity: 0.8;
		pointer-events: none;}
		@keyframes spotlight-l-ani{
			0%{ transform: rotate(-40deg);
				transform-origin: left top;}
			50%{ transform: rotate(40deg);
				transform-origin: left top;}
			100%{ transform: rotate(-40deg);
				transform-origin: left top;}
		}

	/*-- deco-tips --*/
	.deco-tips-wrap{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;}

	.deco-tips-wrap > span{
		display: inline-block;
		position: absolute;
		width: 94px;
		height: 93px;
		animation: decotips-ani 2s ease-in-out infinite;}
		@keyframes decotips-ani {
			0%{transform: translateY(0);}
			50%{transform: translateY(-10px);}
			100%{transform: translateY(0);}
		}
	
	.deco-tips-wrap > span.deco-tips1{
		background: url(../images/theme-tips1.png) center no-repeat;
		background-size: contain;
		left: 15%;
		top: 20%;}

	.deco-tips-wrap > span.deco-tips2{
		background: url(../images/theme-tips2.png) center no-repeat;
		background-size: contain;
		left: 5%;
		bottom: 30%;
		animation-duration: 3.3s;}

	.deco-tips-wrap > span.deco-tips3{
		background: url(../images/theme-tips3.png) center no-repeat;
		background-size: contain;
		right: 23%;
		top: 5%;
		animation-duration: 4s;}

	.deco-tips-wrap > span.deco-tips4{
		background: url(../images/theme-tips4.png) center no-repeat;
		background-size: contain;
		right: 8%;
		top: 20%;
		animation-duration: 4.8s;}

	.deco-tips-wrap > span.deco-tips5{
		background: url(../images/theme-tips5.png) center no-repeat;
		background-size: contain;
		right: 11%;
		bottom: 30%;
		animation-duration: 2.4s;}

	


	/*-- 裝飾草叢 --*/
	.deco-bush{
		position: absolute;
		display: inline-block;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 64px;
		background: url(../images/theme-bush.png) top center repeat-X;
		background-size: auto;}

	/* falling flower*/
	.flower-falling{
		position: fixed;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;}

	.flower-falling li{
		display: inline-block;
		animation: maple-falling-ani 5s ease-in-out infinite;}
		@keyframes maple-falling-ani{
			0%{ opacity: 0;
				transform: translateY(-20px);}
			10%{ opacity:1;}
			90%{ opacity: 1;}
			100%{ opacity: 0;
				transform: translateY(1000px);}
		}

		.flower-falling li:nth-child(1){animation-duration: 7s;}
		.flower-falling li:nth-child(2){animation-duration: 7.9s;}
		.flower-falling li:nth-child(3){animation-duration: 6.2s;}
		.flower-falling li:nth-child(4){animation-duration: 7.4s;}
		.flower-falling li:nth-child(5){animation-duration: 15s;}
		.flower-falling li:nth-child(6){animation-duration: 12s;}
		.flower-falling li:nth-child(7){animation-duration: 13s;}
		.flower-falling li:nth-child(8){animation-duration: 9.4s;}
		.flower-falling li:nth-child(9){animation-duration: 8.2s;}
		.flower-falling li:nth-child(10){animation-duration: 16s;}

		.flower-falling li span::before{
			content: '';
			position: relative;
			display: inline-block;
			width: 30px;
			height: 30px;
			background: url(../images/falling-flower1.png) top center no-repeat;
			background-size: contain;
			animation: spin-maple-ani 3s ease-in-out infinite;}
			@keyframes spin-maple-ani{
				0%{ transform: rotate(0deg);}
				100%{ transform: rotate(360deg);}
			}		

		/*-- 活動內容區 --*/	
		/*-- 網路投保抽好禮 --*/
		.campaign-wrap{
			display: inline-block;
			width: 100%;
			background: #ffdfde;
			padding: 6% 4% 2%;
			margin: 0 auto;}

		.campaign{
			display: inline-block;
			width: 100%;
			max-width: 1200px;
			padding: 80px 40px;
			border-radius: 20px;
			background: #fff;}

		.campaign > h1{
			display: inline-block;
			position: absolute;
			color: #fbe4d2;
			font-size: 12px;
			line-height: 98px;
			width: 90%;
			max-width: 470px;
			height: 98px;
			left: 50%;
			top: -45px;
			transform: translateX(-50%);
			margin: 0 auto;
			padding: 0 10px;}

		.campaign > h1 > .campiagn-title{
			display: inline-block;
			position: absolute;
			width: 100%;
			height: 98px;
			background: url(../images/campiagn-title.png) center no-repeat;
			background-size: contain;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);}

		.campaign > h1 > .campiagn-title::before{
			content: '';
			display: inline-block;
			position: absolute;
			left: -60px;
			top: 20px;
			width: 9.78%;
			max-width: 46px;
			height: 45px;
			background: url(../images/deco-titleLeaf1.png) center no-repeat;
			background-size: contain;}

		.campaign > h1 > .campiagn-title::after{
			content: '';
			display: inline-block;
			position: absolute;
			right: -60px;
			top: 50px;
			width: 9.14%;
			max-width: 41px;
			height: 34px;
			background: url(../images/deco-titleLeaf2.png) center no-repeat;
			background-size: contain;}

		/*共同樣式*/
		.camp{
			display: inline-block;
			width: 100%;
			max-width: 960px;
			padding: 60px 60px 20px;
			background: url(../images/camp-bg.png) center;
			margin-bottom: 100px;
			background-size: auto;}
		
		.camp:last-child{margin-bottom: 0;}
		
		/*各區背景、陰影*/
		.camp.good1{
			border: 1px solid #1cab9f;
			box-shadow:  15px 15px 0 0 rgba(28, 171, 159, 0.5);}
		.camp.good2{
			border: 1px solid #ffa23e;
			box-shadow:  15px 15px 0 0 rgba(255, 162, 62, 0.5);}
		.camp.good3{
			border: 1px solid #3ec2ff;
			box-shadow:  15px 15px 0 0 rgba(62, 194, 255, 0.5);}
		.camp.good4{
			border: 1px solid #ff799f;
			box-shadow:  15px 15px 0 0 rgba(255, 121, 159, 0.5);}
		.camp.good5{
			border: 1px solid #ffd200;
			box-shadow:  15px 15px 0 0 rgba(255, 210, 0, 0.5);}
		.camp.good6{
			border: 1px solid #bd800b;
			box-shadow:  15px 15px 0 0 rgba(189, 128, 11, 0.5);}

		/*好康tag*/		
		.camp .camp-tag{
			display: inline-block;
			position: absolute;
			top: -45px;
			left: 20px;
			width: 151px;
			height: 97px;}

		/*好康tag1-6樣式*/
		.camp.good1 .camp-tag{
			background: url(../images/deco-good1.png) center no-repeat;
			background-size: contain;}
		.camp.good2 .camp-tag{
			background: url(../images/deco-good2.png) center no-repeat;
			background-size: contain;}
		.camp.good3 .camp-tag{
			background: url(../images/deco-good3.png) center no-repeat;
			background-size: contain;}
		.camp.good4 .camp-tag{
			background: url(../images/deco-good4.png) center no-repeat;
			background-size: contain;}
		.camp.good5 .camp-tag{
			background: url(../images/deco-good5.png) center no-repeat;
			background-size: contain;}
		.camp.good6 .camp-tag{
			background: url(../images/deco-good6.png) center no-repeat;
			background-size: contain;}

		/*商品介紹*/
		.camp-intro{
			display: inline-block;
			padding: 20px;}

		.camp-intro h2{
			display: inline-block;
			padding-bottom: 10px;
			font-size: 32px;
			font-weight: 700;}		

		.camp-intro p{
			font-size: 26px;
			font-weight: 700;}
			
		/*acvtionBtn*/
		.camp-actbtn{padding: 20px;}
		.camp-actbtn:active,
		.camp-actbtn:hover{transform:translateY(-10px);}

		/*acvtionBtn5*/
		.good5 .camp-actbtn{ padding: 20px 5px;}
		.good5 .camp-actbtn:nth-of-type(1){bottom: 40px;}
		.good5 .camp-actbtn:nth-of-type(3){bottom: 20px;}

		/*acvtionBtn6*/
		.good6 .camp-actbtn{ padding: 20px 5px;}
		.good6 .camp-actbtn:nth-of-type(1){bottom: 40px;}
		.good6 .camp-actbtn:nth-of-type(3){bottom: 20px;}


		/*商品介紹內容字顏色1-6樣式*/
		.camp-intro.good1 h2,
		.camp-intro.good1 h2 span{
			 color: #1cab9f;}
			 
		.camp-intro.good2 h2,
		.camp-intro.good2 h2 span{
			 color: #ffa23e;}

		.camp-intro.good3 h2,
		.camp-intro.good3 h2 span{
			 color: #3ec2ff;}

		.camp-intro.good4 h2,
		.camp-intro.good4 h2 span{
			 color: #ff799f;}

		.camp-intro.good5 h2,
		.camp-intro.good5 h2 span{
			 color: #d9b50f;}

		.camp-intro.good6 h2,
		.camp-intro.good6 h2 span{
			 color: #bd800b;}


		/*獎品設定*/
		.camp-gift{
			display: inline-block;
			width: 360px;
			height: 280px;
			padding: 110px 0 0 140px;}

		.camp-gift img{
			display: inline-block;
			width: 100%;
			max-width: 180px;}


		/*獎品好康1-6樣式*/
		.camp-gift.good1-1{
			background: url(../images/s1-prize1.png) center no-repeat;
			background-size: contain;
			margin-right: 60px;
			margin-bottom: 40px;}

		.camp-gift.good1-2{
			background: url(../images/s1-prize2.png) center no-repeat;
			background-size: contain;}

		.camp-gift.good2{
			background: url(../images/s2-prize1.png) center no-repeat;
			background-size: contain;}

		.camp-gift.good3{
			margin:40px 40px 0;
			background: url(../images/s3-prize1.png) center no-repeat;
			background-size: contain;}

		.camp-gift.good4{
			margin:40px 40px 0;
			background: url(../images/s4-prize1.png) center no-repeat;
			background-size: contain;}

		.camp-gift.good5{
			margin:40px 40px 0;
			background: url(../images/s5-prize1.png) center no-repeat;
			background-size: contain;}

		.camp-gift.good6{
			margin:40px 40px 0;
			background: url(../images/s6-prize1.png) center no-repeat;
			background-size: contain;}

		
		/*版面排版配置*/
		.flex-col{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;}	
			
		.camp.good1 .flex-col > div{ flex: 1;}
		.camp.good2 .flex-col > div{ flex: 1;}
		.camp.good3 .flex-col:first-child > div{ width: 100%;}
		.camp.good4 .flex-col:first-child > div{ width: 100%;}

		.flex-row{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			flex-direction: row;}

		.break{display: block;}

		.camp-intro.good3 .break{
			display: inline-block;
			width: 20px;}

		.camp-intro.good4 .break{
			display: inline-block;
			width: 20px;}

		.bgmark{
			padding: 0 2px;
			z-index: 1;}

		.bgmark::before{
			content: '';
			display: inline-block;
			position: absolute;
			left: 0;
			bottom: 5px;
			width: 100px;
			height: 15px;
			background: #fff100;
			z-index: -1;}

		.camp-intro.good3 .bgmark::before{width: 66px;}
		.camp-intro.good4 .bgmark::before{width: 66px;}
		.camp-intro.good5 .bgmark::before{width: 66px;}

		.markRed{
			font-size: 28px;
			color: #ff5a2c;}


		/*-- deco --*/
		.good1-note{
			display: inline-block;
			color: #ff5a2c;
			font-size: 17px;
			font-weight: 600;
			background: #eee;
			border-radius: 30px;
			padding: 20px 20px 20px 50px;
			margin-top: 20px;}

		.deco-squirrel{
			display: inline-block;
			position: absolute;
			width: 111px;
			height: 119px;
			background: url(../images/deco-squirrel.png) center no-repeat;
			background-size: contain;
			left: -60px;
			top: 50%;
			transform: translateY(-50%);
			animation: squirrel-ani 2s ease-in-out infinite;}
			@keyframes squirrel-ani{
				0%{ transform: translateY(-50%) rotate(-3deg);
					transform-origin: left bottom;}
				50%{ transform: translateY(-50%) rotate(0deg);
					transform-origin: left bottom;}
				100%{ transform: translateY(-50%) rotate(-3deg);
					transform-origin: left bottom;}
			}
		
			.deco-marshroom{
				display: inline-block;
				position: absolute;
				width: 65px;
				height: 57px;
				background: url(../images/deco-marshroom.png) center no-repeat;
				background-size: contain;
				right: 10px;
				top: -35px}

			.deco-fox{
				display: inline-block;
				position: absolute;
				width: 121px;
				height: 120px;
				background: url(../images/deco-fox.png) center no-repeat;
				background-size: contain;
				right: -140px;
				top: 50%;
				transform: translateY(-50%);
				animation: fox-ani 3s ease-in-out infinite ;}
				@keyframes fox-ani{
					0%{ transform: translateY(-50%) rotate(-3deg);
						transform-origin: center bottom;}
					50%{ transform: translateY(-50%) rotate(3deg);
						transform-origin: center bottom;}
					100%{ transform: translateY(-50%) rotate(-3deg);
						transform-origin: center bottom;}
				}
				
			.deco-leafGreen{
				display: inline-block;
				position: absolute;
				width: 43px;
				height: 42px;
				background: url(../images/deco-leafGreen.png) center no-repeat;
				background-size: contain;
				left: -50px;
				bottom: 20px;}
				
				
			.deco-racoon{
				display: inline-block;
				position: absolute;
				width: 142px;
				height: 116px;
				background: url(../images/deco-racoon.png) center no-repeat;
				background-size: contain;
				left: -30px;
				bottom: -20px;
				animation: racoon-ani 2.5s ease-in-out infinite;}
				@keyframes racoon-ani{
					0%{ transform: rotate(-3deg);
						transform-origin: left bottom;}
					50%{ transform: rotate(0deg);
						transform-origin: left bottom;}
					100%{ transform: rotate(-3deg);
						transform-origin: left bottom;}
				}
				
			.deco-arcon{
				display: inline-block;
				position: absolute;
				width: 29px;
				height: 43px;
				background: url(../images/deco-arcon.png) center no-repeat;
				background-size: contain;
				right: 30px;
				top: 20px;}		
				
			.deco-deer{
				display: inline-block;
				position: absolute;
				width: 108px;
				height: 128px;
				background: url(../images/deco-deer.png) center no-repeat;
				background-size: contain;
				right: -110px;
				top: 50%;
				transform: translateY(-50%);
				animation: deer-ani 2.8s ease-in-out infinite;}
				@keyframes deer-ani{
					0%{ transform: translateY(-50%) rotate(-5deg);
						transform-origin: right bottom;}
					50%{ transform: translateY(-50%) rotate(0deg);
						transform-origin: right bottom;}
					100%{ transform: translateY(-50%) rotate(-5deg);
						transform-origin: right bottom;}
				}
				
				.deco-doubleleaves{
					display: inline-block;
					position: absolute;
					width: 71px;
					height: 44px;
					background: url(../images/deco-doubleleaves.png) center no-repeat;
					background-size: contain;
					left: -70px;
					bottom: 20px;}	

				.deco-woods{
					display: inline-block;
					position: absolute;
					width: 95px;
					height: 53px;
					background: url(../images/deco-woods.png) center no-repeat;
					background-size: contain;
					left: 0;
					bottom: -10px;}	

				.deco-hedgehog{
					display: inline-block;
					position: absolute;
					width: 103px;
					height: 72px;
					background: url(../images/deco-hedgehog.png) center no-repeat;
					background-size: contain;
					left: -40px;
					bottom: 40px;
					animation: hedgehog-ani 1.5s ease-in-out infinite;}
					@keyframes hedgehog-ani{
						0%{ transform: translateY(5px);}
						10%{ transform: translateY(0px);}
						20%{ transform: translateY(5px);}
						80%{ transform: translateY(5px);}
						90%{ transform: translateY(0px);}
						100%{ transform: translateY(5px);}
					}

				.deco-owl{
					display: inline-block;
					position: absolute;
					width: 95px;
					height: 100px;
					background: url(../images/deco-owl.png) center no-repeat;
					background-size: contain;
					left: -40px;
					bottom: 40px;
					animation: owl-ani 1.5s ease-in-out infinite;}
					@keyframes owl-ani{
						0%{ transform: translateY(5px);}
						10%{ transform: translateY(0px);}
						20%{ transform: translateY(5px);}
						80%{ transform: translateY(5px);}
						90%{ transform: translateY(0px);}
						100%{ transform: translateY(5px);}
					}


/*=======END========*/


/*-- 活動辦法 --*/
.rules-wrap{padding: 20px 20px 20px;}
#rules-switch{display: none;}

.rules-title{
	display: inline-block;
	width: auto;
	cursor: pointer;}

.rules-title h2{
	display: inline-block;
	vertical-align: middle;
	font-size: 48px;
	font-weight: 600;
	color: #354c50;}

.rules{
	max-width: 1100px;
	margin: 20px auto 10px;
	padding: 20px 2%;
	height: 0;
	overflow: hidden;
	padding: 0;
	background: #fff;
	border: 1px solid #ff799f}

.rules-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 35px ;
	height: 31px;
	background: url(../images/deco-triangle.png) center no-repeat;
	background-size: contain;
	bottom: -30px;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	transition: 0.5s;}

.rules ol {
	padding-left: 30px;
    padding-right: 10px;}

.rules > ol > li{
	color: #3c4a4c;
	font-size: 15px;}

.rules ol li{
	font-weight: 400;
	text-align: left;
	line-height: 24px;
	margin-bottom: 10px;}

.rules ol li h3{
	margin: 10px 0;
	text-align: left;
	font-size: 17px;
	white-space: pre-line;
	color: #f44336;}
	
.rules ol li h3 span.break{display: none;}	
	
.rules ol li ul{
	background: #efefef;
	padding: 10px;
	padding-left: 30px;
	margin-top: 10px;}

.rules ol li ul li{
	margin-left: 10px;
	list-style: square;
	font-weight: 400;
	margin-bottom: 5px;}

.rules ol li ul li span{color: #ff5722;}

.rules ol li ol{padding-left: 5px;}
.rules ol li ol li{
	list-style: inherit;
    margin-bottom: 0;
    font-size: 15px;
    margin-left: 10px;}

/*活動辦法開關控制器*/
#rules-switch:checked ~ .rules{
	height: auto;
	padding: 30px 2%;}

#rules-switch:checked ~ .rules-title::after{
	transform: translateX(-50%) rotate(180deg);}


/*路徑提示箭頭*/
.icon-arrow::after{
	content: '▼';
	position: absolute;
	color: #db491d;
	top: 14px;
	left: 4px;
	transform: rotate(-90deg);
	display: inline-block;
	font-size: 15px;
	animation: iconArrow-ani 2s linear infinite;}


	/*路徑提示箭頭動畫*/
	@keyframes iconArrow-ani{
		0%{ transform: translateX(4px) rotate(-90deg);}
		50%{ transform: translateX(-4px) rotate(-90deg);}
		100%{ transform: translateX(4px) rotate(-90deg);}
	}


	/*-- 右側浮動BN --*/
	.rightBN-wrap{
		display: inline-block;
		position: absolute;
		width: 209px;
		height: 211px;
		top: -195px;
		left: 50%;
		transform: translateX(-50%);}

	.rightBN-wrap .cat-hand{
		display: inline-block;
		position: absolute;
		top: -13%;
		left: 45%;
		width: 29.71%;
		max-width: 41px;
		height: 34px;
		background: url(../images/deco-RightCatHand.png) center no-repeat;
		background-size: contain;
		animation: catHand-ani 2s ease-in-out infinite;	}
		/* catHand-ani */
		@keyframes catHand-ani{
			0%{transform: rotate(10deg);
			    transform-origin: top right;}
			50%{transform: rotate(0deg);
				transform-origin: top right;}
			100%{transform: rotate(10deg);
				transform-origin: top right;}
		}

		.rightBN{
			display: inline-block;
			width: 100%;
			height: 100%;
			animation: rightBNShake-ani 2s ease-in-out infinite;}
			/* rightBNShake-ani */
			@keyframes rightBNShake-ani{
				 0%{transform: rotate(-5deg) scale(1);}
				50%{transform: rotate(5deg) scale(0.98);}
				100%{transform: rotate(-5deg) scale(1);}
			}
		
		.rightBN > img{
			width: 100%;}
		

	/*-----------------*/
	/*----TO TOP ------*/
	/*-----------------*/

	.section-btnTop{
		display: inline-block;
		position: fixed;
		width: 100%;
		max-width: 1200px;
		height: 1px;
		margin: 0 auto;
		bottom: 25%;
		left: 50%;
		transform: translate(-50% , -50%);
		text-align: right;
		z-index: 99;}

	.btnTop-Wrap{
		display: inline-block;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;}

	.btnTop{
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 60px;
		border-radius: 30px;
		font-weight: 600;
		padding: 5px;
		background: #ff799f;
		line-height: 50px;
		color: #ffffff;
		font-size: 1.2em;
		cursor: pointer;
		transition: 0.5s;
		box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0.8);}

	.btnTop:active,
	.btnTop:hover{
		color: rgb(255, 230, 0);
		background: #4e2f0e;
		box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 

	.cno{
		display: block;
		text-align: right;
		width: 100%;
		background: #007c7c;
		color: #fff;
		padding: 5px 2%;
		z-index: -1;}

	footer{
		padding: 10px 2%;
		font-size: 15px;
		z-index: 1;}
	
	
	/*錨點--*/
	#section1, #section2,
	#section3, #section4,
	#section5, #section6{top: -90px;}