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

.navi-warp ul li{
	list-style: none;
	display: inline-block;
	padding: 5px 10px;
	margin: 0 2px;
	color: #fff;
	border-radius: 5px;
	border: 1px #007c7c solid;
	font-weight: 600;
	cursor: pointer;}

.navi-warp ul li span{color: #fff;}
.navi-warp ul li:hover{
	background: #ff2b2b;
	border: 1px #eaff00 dashed;}

.navi-warp ul li:hover span{color: #eaff00;}

.navi-warp ul li a{color: #fff;}

/*-- 主內容區 --*/
.container{
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;}


	/*-- 主視覺 --*/
	.theme-wrap{
		display: inline-block;
		width: 100%;
		min-height: 600px;
		background: url(../images/themebg.png) bottom 0 center no-repeat;
		background-size: cover;}

	.theme{
		display: inline-block;
		width: 100%;
		max-width: 1200px;
		padding: 20px;
		padding-top: 100px;
	}

	.deco-gameFlag{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 253px;
		padding: 20px;
		background: url(../images/deco-gameFlag.png) top -20px center no-repeat;
		background-size: auto;
		animation: gameFlag-ani 2s ease-in-out infinite;
		pointer-events: none;}
		/* gameFlag-ani */
		@keyframes gameFlag-ani{
			 0%{transform: translateY(-10px);}
			50%{transform: translateY( 0px);}
			100%{transform: translateY(-10px);}
		}

	.deco-paperCuts{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 806px;
		padding: 20px;
		background: url(../images/deco-paperCuts.png) top -20px center no-repeat;
		background-size: contain;
		animation: paperCuts-ani 5s ease-in-out infinite;
		pointer-events: none;}
		/* paperCuts-ani */
		@keyframes paperCuts-ani{
			 0%{transform: translateY(-100px);
				opacity: 0;}
			20%{opacity: 1;}
			50%{opacity: 1;}
			100%{transform: translateY(200px);
				opacity: 0;}
		}

		.logo-tw{
			display:inline-block;
			position: absolute;
			overflow: hidden;
			width: 180px;
			height: 180px;
			top: 0;
			left: 50%;
			transform: translateX(-50%);}

		.logo-tw > img{
			display:inline-block;
			position: absolute;
			overflow: hidden;
			width: 100%;
			left: 50%;
			transform: translateX(-50%);}

		.theme-title{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			max-width: 900px;
			margin: 0 auto;}

		.theme-title > span{
			display: inline-block;
			width: auto;}

		.theme-title > span:nth-of-type(1){right: -3.5%;}
		.theme-title > span:nth-of-type(2){left: -3.5%;}
		.theme > span:nth-of-type(2){bottom: 60px;}
		.theme > span:nth-of-type(3){
			position: absolute;
			left: 50%;
			bottom: 20px;
			transform: translateX(-50%);}


		.theme-title > span:nth-of-type(2) > img{
			animation: oilShake-ani 1s ease-in-out infinite;}
			/* oilShake-ani */
			@keyframes oilShake-ani{
				0%{transform: translateX(-2px);}
				50%{transform: translateX(2px);}
				100%{transform: translateX(-2px);}
			}


	.theme-title::before{
		content: '';
		position: absolute;
		display: inline-block;
		width: 10.11%;
		max-width: 91px;
		height: 81px;
		background: url(../images/oil2.png) center no-repeat;
		background-size: contain;
		left: 0;
		bottom: 0;
		animation:  oil2-ani 1.5s ease-in-out infinite;}
		/* oil2-ani */
		@keyframes oil2-ani{
			0%{ transform: translate(30px , -10px);
				opacity: 0;}
			50%{opacity: 1;}
			100%{ transform: translate(-10px , 10px);
				opacity: 0;}
		}

	.theme-title::after{
		content: '';
		position: absolute;
		display: inline-block;
		width: 10.66%;
		max-width: 96px;
		height: 92px;
		background: url(../images/oil1.png) center no-repeat;
		background-size: contain;
		right: 0;
		top: 0;
		animation:  oil1-ani 1.2s ease-in-out infinite;}
		/* oil1-ani */
		@keyframes oil1-ani{
			0%{ transform: translate(-10px , 10px);
				opacity: 0;}
			50%{opacity: 1;}
			100%{ transform: translate(20px , -10px);
				opacity: 0;}
		}

		/*貓咪群*/
		.cat-wrap{
			display: flex;
			max-width: 1000px;
			width: 100%;
			margin: 0 auto;
			justify-content: center;
			flex-wrap: wrap;}

		.cat-wrap span{
			display: inline-block;
			flex:1;}

		.cat-wrap span:nth-of-type(1) {
			animation: catmove1-ani 4s ease infinite;}
			/* catmove1-ani */
			@keyframes catmove1-ani{
				0%{transform: translateX(0px);}
				50%{transform: translateX(50px);}
				100%{transform: translateX(0px);}
			}

		.cat-wrap span:nth-of-type(1) > img{
			animation: cat1-ani 1s ease infinite;}
			/* cat1-ani */
			@keyframes cat1-ani{
				0%{transform: translateY(0px);}
				50%{transform: translateY(-20px);}
				100%{transform: translateY(0px);}
			}

		.cat-wrap span:nth-of-type(2) {
			animation: catmove2-ani 3.8s ease infinite;}
			/* catmove2-ani */
			@keyframes catmove2-ani{
				0%{transform: translateX(0px);}
				50%{transform: translateX(-10px);}
				100%{transform: translateX(0px);}
			}

		.cat-wrap span:nth-of-type(2) > img {
			animation: cat2-ani 1s ease infinite;}
			/* cat1-ani */
			@keyframes cat2-ani{
				 0%{transform: scale(1) rotate(2deg);}
				50%{transform: scale(0.99) rotate(0deg);}
				100%{transform: scale(1) rotate(2deg);}
			}

		.cat-wrap span:nth-of-type(4) {
			animation: catmove4-ani 6s ease infinite;}
			/* catmove4-ani */
			@keyframes catmove4-ani{
				0%{transform: translateX(0px);}
				50%{transform: translateX(-50px);}
				100%{transform: translateX(0px);}
			}

		.cat-wrap span:nth-of-type(4) > img{
			animation: cat4-ani 1.5s ease infinite;}
			/* cat1-ani */
			@keyframes cat4-ani{
				0%{transform: translateY(0px);}
				50%{transform: translateY(-20px);}
				100%{transform: translateY(0px);}
			}

/*-- 活動規則+時間說明 --*/

.game-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px;
	top: -20px;}

.game-wrap .game{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 80px 30px 30px;
	margin: 0 auto;
	top: -20px;
	background: url(../images/bg.png) center;
	background-size: auto;}

.nail{
	position: absolute;
	display: inline-block;
	width: 17px;
	height: 16px;
	background: url(../images/deco-nail.png) center no-repeat;
	background-size: contain;}

.nail.p1{
	top: 10px;
	left: 10px;}

.nail.p2{
	top: 10px;
	right: 10px;}

.nail.p3{
	bottom: 10px;
	left: 10px;}

.nail.p4{
	bottom: 10px;
	right: 10px;}

.gameFlag{
	position: absolute;
	display: inline-block;
	width: 339px;
	height: 84px;
	top: -60px;
	background: url(../images/deco-ruleflag.png) center no-repeat;
	background-size: contain;}

.gameFlag.p1{left: 20px;}
.gameFlag.p2{right: 20px;}

/*-- 內容說明 --*/
.game-content{
	display: inline-block;
	width: 100%;
	padding: 60px;
	background: #fff;}

.game-content h2{
	position: absolute;
	display: inline-block;
	color: #ac743d;
	width: 404px;
	height: 78px;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 auto;}

.game-content h2 > img{
	position: absolute;
	top: 0;
	left: 0;}

.game-content > span:nth-of-type(3){
	display: block;
	margin: 10px 0;}


/*-- 甩油獎勵區 --*/
.game-prize {
	display: flex;
	flex-wrap: wrap;
	margin-top: 100px;
	justify-content: center;
	align-items: center;}

.game-prize::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: -35px;
    top: -80px;
	width: 277px;
	height: 169px;
	background: url(../images/game-prizeTitle.png) top center no-repeat;
	background-size: contain;}

.game-prize > div {
	display: inline-block;
	padding: 20px 50px 20px 20px ;
	width: 478px;
	min-height: 425px;
	margin: 10px;
	background: url(../images/prizes1_bg.png) top center no-repeat;
	background-size: contain;}

.game-prize > div:nth-of-type(2){animation-delay: 0.2s;}

.game-prize > div > p:nth-of-type(1){
	font-size: 28px;
	color: #ad7b47;
	font-weight: 600;}

.deco-pinBlue{
	position: absolute;
	display: inline-block;
	width: 25px;
	height: 31px;
	top: 15px;
	left: 5%;
	margin: 0 !important;
	background: url(../images/deco-pinsblue.png) center no-repeat;
	background-size: contain;}

.deco-pinGreen{
	position: absolute;
	display: inline-block;
	width: 27px;
	height: 33px;
	top: 10px;
	right: 10%;
	margin: 0 !important;
	background: url(../images/deco-pinsgreen.png) center no-repeat;
	background-size: contain;}

.game-wording{
	display: inline-block;
	text-align: left;
	width: 100%;
	padding-right: 40%;
	margin: 10px 10px 5px;
	z-index: 1;}

.game-wording > span{
	font-size: 24px;
	font-weight: 600;
	color: #583208;
	white-space: pre-line;
	padding-bottom: 5px;
	border-bottom: 1px solid #333;
	line-height: 48px;}

.game-wording > span > span{color: #ff440a;}
.font32{font-size: 32px;}

p.note{
	font-size: 15px;
	font-weight: 600;
	color: #ff2b2b;
	text-align: left;
	margin: 10px 0;}

.game-prize > div .prize-wrap{
	display: inline-block;
	position: absolute;
	top: 100px;
	right: 6%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #fff;}

.game-prize > div > span{
	display: inline-block;
	margin: 10px 0;}

/*獎品*/
.game-prize > div .prize-wrap >img{
	position: absolute;
	width: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);}

/*裝飾貓*/
.cat-win::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -20px;
	right: 30px;
	width: 30.96%;
	max-width: 145px;
	height: 181px;
	background: url(../images/deco-catwin.png) bottom center no-repeat;
	background-size: contain;
	animation: moving1-ani 2s ease-in-out infinite;}
	/* moving1-ani */
	@keyframes moving1-ani{
		0%{ transform: translateY(0);}
		50%{ transform: translateY(-15px);}
		100%{ transform: translateY(0);}
	}

.cat-watch::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -20px;
	right: 0 ;
	width: 41%;
	max-width: 196px;
	height: 175px;
	background: url(../images/deco-catswatch.png) bottom center no-repeat;
	background-size: contain;
	animation: moving2-ani 2.5s ease-in-out infinite;}
	/* moving2-ani */
	@keyframes moving2-ani{
		0%{ transform: translateX(0);}
		50%{ transform: translateX(-5px);}
		100%{ transform: translateX(0);}
	}


/*-- 報名甩油區 --*/
.game-date {
	display: inline-block;
	text-align: left;
	width: 100%;
	max-width: 960px;
	padding: 20px;
	margin-top: 120px;
	background: #e8e6e6;}

.game-date::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: -35px;
    top: -80px;
	width: 277px;
	height: 169px;
	background: url(../images/game-signinTitle.png) top center no-repeat;
	background-size: contain;}

.game-date > div{
	padding: 20px 40px;
	background: #fff;}

.game-date > div > span{
	text-align: left;
	display: block;
	font-size: 24px;
	font-weight: 600;
	color: #583208;}

.game-date > div > span > span:nth-of-type(1){
	display: inline-block;
	text-align: left;
	font-size: 24px;
	font-weight: 600;
	color: #583208;
	border-bottom: 1px solid #333;
	line-height: 40px;
	margin-bottom: 10px;}


.game-date > div > span > span:nth-of-type(2).signin{color: #ed3d3d;}
.game-date > div > span > span:nth-of-type(2).signin > span{
	position: absolute;
    display: inline-block;
	width: 130px;
	left: 165px;
    top: 50%;
    line-height: 24px;
    height: 24px;
    transform: translateY(-50%);
	animation: note2-ani 2s ease-in-out infinite;}
	/* note2-ani */
	@keyframes note2-ani{
		0%{ transform: translate(10px ,-50%);}
		50%{ transform: translate( 0px ,-50%);}
		100%{ transform: translate(10px ,-50%);}
	}

.game-date > div > span > span:nth-of-type(2).signin > span::after{
	content: '趕快找好夥伴組隊';
	width: 130px;
	position: absolute;
	left: 0;
	top: 0;
    font-size: 15px;
    font-weight: 400;
	line-height: 20px;
    padding: 2px 5px;
    color: #fff;
    background: #ed3d3d;
    border-radius: 5px;}

.game-date > div > span > span:nth-of-type(2).signin > span::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	left: -7px;
	top: 50%;
    transform: translateY(-50%);
	border-style: solid;
	border-width: 5px 10px 5px 0;
	border-color: transparent #ed3d3d transparent transparent;}

.game-date > div > span > span:nth-of-type(2).gaming{color: #cc7059;}
.game-date > div > span > span:nth-of-type(2).gaming > span{
	position: absolute;
    display: inline-block;
	width: 130px;
	left: 165px;
    top: 50%;
    line-height: 24px;
    height: 24px;
	animation: note2-ani 2.2s ease-in-out infinite;}
	/* note2-ani */
	@keyframes note2-ani{
		0%{ transform: translate(0px ,-50%);}
		50%{ transform: translate( 8px ,-50%);}
		100%{ transform: translate( 0px ,-50%);}
	}

.game-date > div > span > span:nth-of-type(2).gaming > span::after{
	content: '開始走路運動趣';
	width: 130px;
	position: absolute;
	left: 0;
	top: 0;
    font-size: 15px;
    font-weight: 400;
	line-height: 20px;
    padding: 2px 5px;
    color: #fff;
    background: #cc7059;
    border-radius: 5px;}

.game-date > div > span > span:nth-of-type(2).gaming > span::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	left: -7px;
	top: 50%;
    transform: translateY(-50%);
	border-style: solid;
	border-width: 5px 10px 5px 0;
	border-color: transparent #cc7059 transparent transparent;}



.game-date > div > ol{padding: 10px 0px 10px 40px;}
.game-date > div > ol >li{
	counter-increment: li;
	text-align: left;
	font-size: 24px;
	font-weight: 600;
	line-height: 40px;
	list-style: none;
	color: #583208;}

.game-date > div > ol > li::before{
	content: counter(li);
	position: absolute;
	top: 6px;
	left: -35px;
	color: #fff;
	display: inline-block;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	background: #583208;}

.game-date > div > ol > li > span{ color: #d9790f;}
.game-date > div > ol > li > span.note{ 
	font-size: 16px;
	color: #ed3d3d;}

/*報名貓*/
.cat3team-wrap{
	position: absolute;
	display: inline-block;
	width: 33.15%;
	max-width: 305px;
	height: 193px;
	right: 10px;
	top: 0;}

.cat3team-wrap > div:nth-of-type(1){
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100%;
	top: 0;
	left: 0;}

.cat-3team{
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;}

.cat3team-wrap > div:nth-of-type(1) > span > img,
.cat-3team > img{width: 100%;}

.cat3team-wrap > div:nth-of-type(1) > span{
	margin: 0 10px;
	opacity: 0;
	animation: numberUp-ani 3s ease-in-out infinite;}
	/* numberUp-ani */
	@keyframes numberUp-ani{
		0%{ transform: translateY(0);
			opacity: 0;}
		33%{opacity: 1;
			transform: translateY(-70%);}
		66%{opacity: 0;
			transform: translateY(-70%);}
		100%{ opacity: 0;}
		}

	.cat3team-wrap > div:nth-of-type(1) > span:nth-of-type(2){animation-delay: 0.5s;}
	.cat3team-wrap > div:nth-of-type(1) > span:nth-of-type(3){animation-delay: 1s;}

.btn-teamUp{
	display: inline-block;
	width: auto;
	margin: 20px auto;}

.btn-teamUp:hover,
.btn-teamUp:active{transform: translateY(-20px);}



/*-- TEAMWALK 立即下載 --*/
.download-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px;}

.download-wrap .download{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 80px 30px 30px 300px;
	background: url(../images/bg.png) center;
	background-size: cover;}

.download-title{
	position: absolute;
	left: 50%;
	top: -50px;
	transform: translateX(-50%);}

.download > div:nth-of-type(2){
	display: flex;
	justify-content: center;}
.download > div:nth-of-type(2) > a {margin: 0 5px;}
.download > div:nth-of-type(2) > a > img{
	min-width: 280px;
	width: 100%;}

/*-- 左側 --*/
.deco-downloadLeft{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	max-width: 300px;
	padding: 20px;
	top: 0;
	left: 0;}

.twkLogo{
	top: -50px;
	display: inline-block;}

.cat-gym{
	display: inline-block;
	position: absolute;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10px;}

.cat-gym > img{
	animation: catGym-ani 2s ease-in-out infinite;}
	/* catGym-ani */
	@keyframes catGym-ani{
		0%{ transform: translateX(0px);}
		50%{ transform: translateX(-10px);}
		100%{ transform: translateX(0px);}
	}

.cat-gym::before{
	content: '';
	position: absolute;
	display: inline-block;
	right: 30px;
	width: 100px;
	height: 62px;
	background: url(../images/deco-catgymWords.png) center no-repeat;
	background-size: contain;
	animation: catgymWords-ani 2s ease-in-out infinite ;}
	/* catgymWords-ani */
	@keyframes catgymWords-ani{
		0%{transform: translate(0px , 0px);
			opacity: 0;}
		60%{transform: translate(10px , -10px);
			opacity: 1;}
		90%{transform: translate(10px , -10px);}
		100%{transform: translate(10px , -10px);
			opacity: 0;}
	}


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

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

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

.rules-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 22px ;
	height: 18px;
	background: url(../images/rule-triangle.png) center no-repeat;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.5s;}

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

.rules > ol > li{
	color: #713d06;
	font-size: 16px;}

.rules ol li{
	font-weight: 600;
	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 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: none;
	color: #713d06;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 600;}

/*活動辦法開關控制器*/
#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: 136px;
		height: 138px;
		top: -138px;
		left: 50%;
		transform: translateX(-50%);}

	.rightBN-wrap .cat-bg{
		display: inline-block;
		position: absolute;
		top: -66%;
		width: 76.81%;
		max-width: 106px;
		height: 138px;
		background: url(../images/deco-RightCat.png) center no-repeat;
		background-size: contain;}

	.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: #553b20;
		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{top: -40px;}



	/*-- 貼心提醒公告 --*/

	.notice-wrap{
		display: inline-block;
		position: sticky;
		top: 70px;
		font-weight: 600;
		width: 100%;
		left: 0;
		text-align: center;
		color: #db491d;
		padding: 15px 60px;
		line-height: 20px;
		background: rgba(255, 255, 255, 0.8);
		overflow: hidden;
		z-index: 99;}

	.notice-wrap span{
		position: absolute;
		display: inline-block;
		text-align: center;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		cursor: pointer;}

	.notice-wrap span > span{
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
		width: 2px;
		height: 60%;
		background: #333;}

	.notice-wrap span > span:nth-of-type(2){transform: translate(-50%,-50%) rotate(-45deg);}