@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 15px;
	margin: 0 2px;
	color: #fff;
	border: 2px #007c7c solid;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;
	border-radius: 10px;}

.navi-warp ul li span{color: #fff;}
.navi-warp ul li:hover{
	background: #00ade2;
	color: #ffff00;
	border-bottom: 2px #f2ffc5 solid;}

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

/*-- 主內容區 --*/
.container{
	display: block;
	width: 100%;
	margin: 0 auto;
	background: url(../images/deco-bgwhite2.png) top left repeat;
	background-size: auto;
	overflow: hidden;}

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

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

.theme-wrap .theme > div{
	display: inline-block;		
	width: 100%;
	max-width: 546px;
	height: 503px;
	background: url(../images/theme-bg.png) center no-repeat;
	background-size: contain;}

.deco-themebgblue{
	display: inline-block;
	position: absolute;
	width: 1000%;
	height: 100px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/deco-bgblue.png) center no-repeat;
	background-size: cover;}

.theme-wrap .theme div .theme-winner{
	display: inline-block;
	position: absolute;
	width: auto;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);}

.theme-wrap .theme div .theme-winner::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 146px;
	height: 104px;
	right: 0;
	top: -20px;
	background: url(../images/theme-no1.png) center no-repeat;
	background-size:  contain;
	animation: no1-ani 2.5s ease-in-out infinite;}
	/* no1-ani */
	@keyframes no1-ani{
		0%{transform: translate(0, 0);}
		50%{transform:  translate(5px ,-10px);}
		100%{transform: translate( 0 , 0);}
	}

.theme-wrap .theme div .theme-title{
	display: inline-block;
	position: absolute;
	width: auto;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);}

.theme-wrap .theme div .theme-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 269px;
	height: 56px;
	left: 50%;
	bottom: -100px;
	transform: translate(-50% , -50%);
	background: url(../images/deco-flower.png) center no-repeat;
	background-size:  contain;}

.theme-wrap .theme div .theme-prize {
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);}

.theme-wrap .theme div .theme-prize span{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 1px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);}

.theme-wrap .theme div .theme-prize span > img{
	position: absolute;
	display: inline-block;
	top: 50%;
	transform: translateY(-50%);
	animation: gift-ani 5s ease-in-out infinite;}
	/* gift-ani */
	@keyframes gift-ani{
		0%{ transform: translateY(-60%);}
		50%{ transform: translateY(-50%);}
		100%{ transform: translateY(-60%);}
	}

.theme-wrap .theme div .theme-prize span:nth-of-type(1) > img{left: 5%; animation-duration: 4.2s;}
.theme-wrap .theme div .theme-prize span:nth-of-type(2) > img{left: 15%; animation-duration: 5.2s;}
.theme-wrap .theme div .theme-prize span:nth-of-type(3) > img{left: 30%; animation-duration: 4s;}
.theme-wrap .theme div .theme-prize span:nth-of-type(4) > img{left: 45%; animation-duration: 5.8s;}
.theme-wrap .theme div .theme-prize span:nth-of-type(5) > img{right: 15%; animation-duration: 4.5s;}
.theme-wrap .theme div .theme-prize span:nth-of-type(6) > img{
	left: 10%; 
	transform: translateY(0%);
	animation: gift-ani2 6s ease-in-out infinite;}
	/* gift-ani2 */
	@keyframes gift-ani2{
		0%{ transform: translateY(00%);}
		50%{ transform: translateY(30%);}
		100%{ transform: translateY(0%);}
	}

.theme-wrap .theme div .theme-shine{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/deco-shine.png) center no-repeat;
	background-size: contain;
	animation: shine-ani 20s linear infinite;}
	/* shine-ani */
	@keyframes shine-ani{
		0%{transform: rotate(0deg);}
		100%{transform: rotate(-360deg);}
	}


/*-- 阿龍 --*/
.deco-alung{
	position: absolute;
	display: inline-block;
	width: 27.58%;
	height: 100%;
	max-height: 445px;
	left: 6%;
	bottom: 0;
	background: url(../images/deco-alung.png) center no-repeat;
	background-size: contain;}

.deco-alung::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 52.87%;
	height: 100%;
	left: -10%;
	bottom: 0;
	background: url(../images/deco-alungHand.png) center no-repeat;
	background-size: contain;
	animation: alungHand-ani 2s linear infinite;}
	/* alungHand-ani */
	@keyframes alungHand-ani{
		0%{transform: translateY(-10px);}
		50%{transform: translateY(0px);}
		100%{transform: translateY(-10px);}
	}


/*-- 雷猛 --*/
.deco-raymond{
	position: absolute;
	display: inline-block;
	width: 24%;
	height: 100%;
	max-height: 235px;
	right: 6%;
	bottom: 0;
	background: url(../images/deco-raymond.png) center no-repeat;
	background-size: contain;}

.deco-raymond::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 24.16%;
	height: 22.97%;
	right: 20%;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-raymondHand.png) center no-repeat;
	background-size: contain;
	z-index: 1;
	animation: raymondHand-ani 2s linear infinite;}
	/* raymondHand-ani */
	@keyframes raymondHand-ani{
		0%{transform: rotate(0deg) translateY(-50%);
			transform-origin: top ;}
		50%{transform: rotate(10deg) translateY(-50%);
			transform-origin: top ;}
		100%{transform: rotate(0deg) translateY(-50%);
			transform-origin: top ;}
	}


/*-- 紙花 --*/
.bubble{
	position: fixed;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	top: 0;
	left: 0;}

.bubble li {
	display: inline-block;
	flex: 1;
	list-style: none;
	margin: 0 20px;
	animation: bubbleUp-ani 5s ease-in-out infinite;}
	/*-- bubbleUp-ani --*/
	@keyframes bubbleUp-ani{
		0%{	opacity: 0;
			transform: translateY(800px);}
		10%{opacity: 1;}
		90%{opacity: 1;}
		100%{opacity: 0;
			transform: translateY( 0px);}
	}

	.bubble li:nth-of-type(1){animation-duration: 8.2s;}
	.bubble li:nth-of-type(2){animation-duration: 4.8s;}
	.bubble li:nth-of-type(3){animation-duration: 5.6s;}
	.bubble li:nth-of-type(4){animation-duration: 17.2s;}
	.bubble li:nth-of-type(5){animation-duration: 10.2s;}
	.bubble li:nth-of-type(6){animation-duration: 14.2s;}
	.bubble li:nth-of-type(7){animation-duration: 15.2s;}
	.bubble li:nth-of-type(8){animation-duration: 8.2s;}
	.bubble li:nth-of-type(9){animation-duration: 9.7s;}
	.bubble li:nth-of-type(10){animation-duration: 14.2s;}
	.bubble li:nth-of-type(11){animation-duration: 8.1s;}
	.bubble li:nth-of-type(12){animation-duration: 14.8s;}
	.bubble li:nth-of-type(13){animation-duration: 8.6s;}
	.bubble li:nth-of-type(14){animation-duration: 11.2s;}
	.bubble li:nth-of-type(15){animation-duration: 4.2s;}
	.bubble li:nth-of-type(16){animation-duration: 7.2s;}
	.bubble li:nth-of-type(17){animation-duration: 10.2s;}
	.bubble li:nth-of-type(18){animation-duration: 5.7s;}
	.bubble li:nth-of-type(19){animation-duration: 6.2s;}
	.bubble li:nth-of-type(20){animation-duration: 8.5s;}

.bubble li span{
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 230, 0, 0.7);
	border:1px #ffffff solid;}


/*-- 網路投保初夏攻略(標) --*/
.tips-title{
	display: inline-block;
	width: 100%;
	margin: 80px 0 40px;}

.tips-title h1{
	display: inline-block;
	vertical-align: middle;
	font-size: 48px;
	font-weight: 600;
	color: #20b7d2;}

.tips-title h1::after{
	content: '';
	display: inline-block;
	width: 81px;
	height: 93px;
	vertical-align: middle;
	background: url(../images/deco-fan1.png) center no-repeat;
	background-size: contain;}

.tips-title > span{
	display: inline-block;
	vertical-align: middle;
	width: 50%;
	max-width: 150px;
	margin: 0 20px;
	height: 10px;
	background: #20b7d2;}


/*-- 攻略1-4共用樣式 --*/
.tips-wrap{
	display: block;
	width: 100%;
	padding: 80px 20px;
	background-size: cover;}


/*-- 壽險、年金 藍色背景 --*/
.tips-wrap#tips1{background: url(../images/deco-bgblue2.png) center;}
.tips-wrap#tips3{background: url(../images/deco-bgblue2.png) center;}

.tips-wrap .tips{
	display: inline-block;
	width: 100%;
	max-width: 1100px;
	padding: 80px 40px 30px;
	border-radius: 50px;
	background: #fff;
	box-shadow: 0 15px 50px -30px rgba(00, 00, 00, 0.8);}

.tips-wrap#tips4{padding-bottom: 10px;}

.tips-tag{
	position: absolute;
	top: 10px;
	left: 30px;}

.tips-col2{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;}

.tips-row2{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
	padding: 0 20px;}


/*-- 壽險、好好退休用 (文字區上下內距)--*/	
#tips1 .tips-row2 > div:nth-of-type(1){padding: 60px 0 30px;}
#tips4 .tips-row2 > div:nth-of-type(1){padding: 60px 0 30px;}
/*--  旅平、年金險用 (文字區上下內距)--*/
#tips2 .tips-col2 > div:nth-of-type(1){padding: 60px 0 30px;}
#tips3 .tips-col2 > div:nth-of-type(1){padding: 60px 0 30px;}


.tips-row2 div > h2{font-size: 36px;}
.tips-row2 div > h2 > span{
	padding: 2px 10px;
	margin-right: 5px;
	border-radius: 5px;
	color: #fff;}

/*-- 各攻略險種h2背景色 --*/	
.tips-wrap#tips1 .tips-row2 div > h2 > span{background: #e95f28;}
.tips-wrap#tips2 .tips-col2.t2-1 div > h2 > span{background: #05a577;}
.tips-wrap#tips2 .tips-col2.t2-2 div > h2 > span{background: #9ca913;}
.tips-wrap#tips3 .tips-col2.t3-1 div > h2 > span{background: #0ca5c1;}
.tips-wrap#tips3 .tips-col2.t3-2 div > h2 > span{background: #357db0;}
.tips-wrap#tips4 .tips-row2 div > h2 > span{background: #d89005;}

.tips-row2 div > p{
	padding: 20px 0;
	font-size: 22px;
	font-weight: 600;}

.tips-row2 div > p > span{color: #f18d06;}


/*-- 攻略獎品區 --*/
.tips-prize{
	display: inline-block;
	width: 439px;
	height: 246px;
	margin: 0 auto;
	margin-bottom:  40px;}

#tips1 .tips-prize.t1-1{
	background: url(../images/tips1-prize.png) center no-repeat;
	background-size: contain;}

#tips2 .tips-prize.t2-1{
	background: url(../images/tips2-prize1.png) center no-repeat;
	background-size: contain;}

#tips2 .tips-prize.t2-2{
	background: url(../images/tips2-prize2.png) center no-repeat;
	background-size: contain;}

#tips3 .tips-prize.t3-1{
	background: url(../images/tips3-prize1.png) center no-repeat;
	background-size: contain;}

#tips3 .tips-prize.t3-2{
	background: url(../images/tips3-prize2.png) center no-repeat;
	background-size: contain;}

#tips4 .tips-prize.t4-1{
	background: url(../images/tips4-prize1.png) center no-repeat;
	background-size: contain;}

.tips-prize span{
	position: absolute;
	display: inline-block;
	width: auto;
	right: 0;
	top: 10px;}
/*-- 投保按鈕 共同樣式 --*/
.btn{margin: 20px 5px;}
.btn:active,
.btn:hover{transform: translateY(-10px);}
.btn::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 5px;
	height: 40px;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	border-left: #f18e06 5px dashed;}

#tips2 .btn::after{border-color: #05a577;}
#tips3 .btn::after{border-color: #357db0;}
#tips4 .btn::after{border-color: #d89005;}


/* 一年期定期壽險加碼*/
.tips1-bonus{
	display: inline-block;
	text-align: left;
	width: 100%;
	padding: 5px 100px;
	margin: 80px 0 40px;
	border-radius: 10px;
	border: 5px #f8a12a solid;}

.tips1-bonus::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	border: 5px #fff solid;
	background: #f7d8ad url(../images/deco-drink.png) center no-repeat;
	background-size: auto;}

.tips1-bonus h3{
	display: inline-block;
	width: 60%;
	font-size: 30px;
	font-weight: 600;}

.tips1-bonus h3::before{
	content: '▼';
	display: inline-block;
	vertical-align: middle;
	font-size: 24px;
	color: #e9286c;
	margin-right: 10px;
	transform: rotate(-90deg);}

.tips1-bonus h3 span{color: #e9286c;}
.tips1-bonus > span{
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	animation: bonus-ani 1s linear infinite;}
	/* bonus-ani */
	@keyframes bonus-ani{
		0%{transform: rotate(-1deg) translateY(-50%);}
		50%{transform: rotate(1deg) translateY(-50%);}
		100%{transform: rotate(-1deg) translateY(-50%);}
	}


/*-- 裝飾小圖 --*/
.deco-icecream2{
	position: absolute;
	display: inline-block;
	right: 40px;
	bottom: 20px;
	width: 74px;
	height: 102px;
	background: url(../images/deco-icecream2.png) center no-repeat;
	background-size: contain;}

.deco-icecream3{
	position: absolute;
	display: inline-block;
	right: 40px;
	bottom: 20px;
	width: 74px;
	height: 102px;
	background: url(../images/deco-icecream3.png) center no-repeat;
	background-size: contain;}

.deco-tree{
	position: absolute;
	display: inline-block;
	left: 10px;
	bottom: 20px;
	width: 181px;
	height: 200px;
	background: url(../images/deco-tree.png) center no-repeat;
	background-size: contain;}

.deco-birds{
	position: absolute;
	display: inline-block;
	left: 30%;
	top: 20px;
	width: 127px;
	height: 43px;
	background: url(../images/deco-birds.png) center no-repeat;
	background-size: contain;
	animation:  birds-ani 2s ease-in-out infinite;}
	/* birds-ani */
	@keyframes birds-ani{
		0%{ transform: scale(1);}
		50%{ transform: scale(0.9);}
		1000%{ transform: scale(1);}
	}


	.deco-leashadow1{
		display: inline-block;
		position: fixed;
		width: 300px;
		height: 441px;
		top: 70px;
		left: -250px;
		background: url(../images/deco-leafShadow1.png) center no-repeat;
		background-size: contain;
		z-index: 1;
		animation: leashadow-ani 5s ease-in-out infinite;}
		/* leashadow-ani */
		@keyframes leashadow-ani{
			0%{ transform: rotate(-55deg);
				transform-origin: top left;}
			50%{ transform: rotate(-45deg);
				transform-origin: top left;}
			100%{ transform: rotate(-55deg);
				transform-origin: top left;}
			}

	.deco-leashadow2{
		display: inline-block;
		position: fixed;
		width: 300px;
		height: 441px;
		bottom: 0px;
		right:-180px;
		background: url(../images/deco-leafShadow2.png) center no-repeat;
		background-size: contain;
		z-index: 1;
		animation: leashadow2-ani 5s ease-in-out infinite;}
		/* leashadow2-ani */
		@keyframes leashadow2-ani{
			0%{ transform: rotate(-25deg);
				transform-origin: bottom right;}
			50%{ transform: rotate(-40deg);
				transform-origin: bottom right;}
			100%{ transform: rotate(-25deg);
				transform-origin: bottom right;}
			}



/*--裝飾陰影--*/
.deco-shadow{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/deco-leavesSadows.png) center repeat-y;
	background-size: cover;
	pointer-events: none;}


/*-- 活動辦法 --*/
.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-title h2::after{
	content: '';
	display: inline-block;
	width: 76px;
	height: 87px;
	vertical-align: middle;
	background: url(../images/deco-fan2.png) center no-repeat;
	background-size: contain;}

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

.rules-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 35px ;
	height: 31px;
	background: url(../images/deco-triangle.png) center no-repeat;
	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 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: #00cde2;
		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);}

	#rule1 > h3 > div{display: none;}


/*-- 2022/06 7-8月第二波活動主視覺 --*/
.theme2-wrap{
	display: block;
	width: 100%;
	padding: 20px 10px;
	background: url(../images/theme2-bgblue2.png) center no-repeat;
	background-size: cover;}

.theme2-wrap .theme2{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px 40px;
	padding-top: 200px;
	margin: 0 auto;}

.theme2-title{
	position: absolute;
	width: 100%;
	max-width: 744px;
	margin: 0 auto;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 20px;}

#theme2-mobile{display: none;} /* 小版標題隱藏 */

.theme2-title img{width: 100%;}
.theme2-title span.deco-watermelon{
	display: inline-block;
	position: absolute;
	top: 40px;
	left: -30px;
	width: 22.04%;
	animation: deco-shake 2s ease-in-out infinite;}
	@keyframes deco-shake{
		0% {transform: translateY(-10px);}
		50% {transform: translateY(  0px);}
		100% {transform: translateY(-10px);}	
	}
	
.theme2-title span.deco-icepop{
	display: inline-block;
	position: absolute;
	top: 40px;
	right: -80px;
	width: 19.35%;
	max-width: 144px;
	animation: deco-shake2 4s ease-in-out infinite;}
	@keyframes deco-shake2{
		0% {transform: translateY(-15px);}
		50% {transform: translateY(  0px);}
		100% {transform: translateY(-15px);}	
	}

.theme2-title span img{	width: 100%;}

.theme2-title::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 410px;
	height: 79px;
	background: url(../images/theme2-subtitle.png) center no-repeat;
	background-size: contain;
	left: 0px;
	top: -50px;
	z-index: -1;}

.theme2-gift{
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin: 0 auto;}

.theme2-gift > div > img{width: 100%;}
.theme2-alung{
	top: 10px;
	left: -50px;}

.theme2-date{
	display: inline-block;
	position: absolute;
	width: 43.45%;
	height: 44.14%;
	max-width: 166px;
	right: -50px;
	top: 40px;}

.theme2-date > img{
	display: inline-block;
	width: 100%;
	background: url(../images/theme2-date.png) center no-repeat;
	background-size: contain;
	animation: theme-date-ani 4s ease-in-out infinite;
	z-index: 1;}

	/*date-ani*/
	@keyframes theme-date-ani{
		0%{transform: translate(-10px, 10px);}
		50%{transform: translate( 0 ,0);}
		100%{transform: translate(-10px, 10px);}
	}

.theme2-wrap .bubble li span{background: rgba(255, 255, 255, 0.3);}


/*旅平增附註說明*/
.note{
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #e95f28;
	padding: 5px 15px;
	background: #fff;}

.tips-col2.t3-1 > div:nth-of-type(1) > h2::after{
	content: '';
	display: inline-block;
	position: absolute;
	top: -80px;
	right: 20px;
	width: 26.25%;
	max-width: 122px;
	height: 79px;
	background: url(../images/deco-rates.png) center no-repeat;
	background-size: contain;
	animation: rate-ani 1s ease-in-out infinite;}
	/* rate-ani */
	@keyframes rate-ani{
		0%{ transform: rotate(2deg) scale(0.99);
			transform-origin: left bottom;}
		50%{ transform: rotate(0deg) scale(1);
			transform-origin: left bottom;}
		100%{ transform: rotate(2deg) scale(0.99);
			transform-origin: left bottom;}
	}