@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;
	overflow: hidden;}

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	height: 700px;
	background: url(../images/theme-bg.png) center;
	background-size: cover;}

.theme-wrap .theme{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 80px 10px 20px;
	margin: 0 auto;
	z-index: 1;}

.theme .theme-title{
	width: 100%;
	max-width: 726px;
	margin: 0 auto;}

.theme .theme-title img{width: 100%;}

.theme-date{
	display: inline-block;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;}

.theme-date img{
	width: 80%;
	max-width: 380px;}



/*-- 裝飾 --*/
.deco-whitecotton{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/theme-whitecotton.png) top 0 center no-repeat;
	background-size: cover;}

.deco-bglemons{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: url(../images/bg-decoLemons.png) top -50px center no-repeat;
	background-size: cover;}

.deco-biglemon{
	position: absolute;
	display: inline-block;
	width: 22.17%;
	height: 161px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);}

.deco-biglemon::after{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/deco-lemon.png) center no-repeat;
	background-size: contain;
	animation: biglemon-ani 5s  linear infinite;}
	@keyframes biglemon-ani{
		0%{transform: rotate(0);
			transform-origin: center;}
		100%{transform: rotate(360deg);
			transform-origin: center;}
	}


.deco-dolphine{
	position: absolute;
	display: inline-block;
	width: 29.07%;
	height: 28.1%;
	top: -20px;
	right: 10px;
	animation: dohpine-ani 3.5s  linear infinite;}
	@keyframes dohpine-ani{
		0%{transform: translate(0%, 0% );
			opacity: 0;}
		5%{transform: translate(0%, 0% );
			opacity: 0;}
		40%{opacity: 1;}
		60%{transform: translate(-40%, -40% );
			opacity: 1;}
		80%{transform: translate(-60%, 0% );
			opacity: 0;}
		90%{transform: translate(-80%, 20% );
			opacity: 0;}
		100%{opacity: 0;}
	}

.deco-dolphine > img{
	width: 100%;
	animation: dohpineShake-ani 0.8s  linear infinite;}
	@keyframes dohpineShake-ani{
		0%{transform: rotate(6deg)}
		50%{transform: rotate(0deg)}
		100%{transform: rotate(6deg)}
	}

/*call卡專屬*/
.tag-callcardOnly{
	position: absolute;
	display: inline-block;
	top: 5%;
	right: 0;
	width: 254px;
	height: 40px;
	background: url(../images/tag_callcardOnly.png) center no-repeat;
	background-size: contain;
	z-index: 1;}

.deco-waveWhite{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 168px;
	left: 0;
	bottom: 0;
	background: url(../images/bg-waveWhite.png) top 0 center no-repeat;
	background-size: cover;}

.deco-people{
	position: absolute;
	display: inline-block;
	width: 240px;
	height: 206px;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-people.gif) top 0 center no-repeat;
	background-size: contain;}

.deco-whale{
	position: absolute;
	display: inline-block;
	width: 441px;
	height: 237px;
	left: 30%;
	transform: translateX(-50%);
	bottom: 0;
	background: url(../images/deco-whale.gif) top 0 center no-repeat;
	background-size: contain;
	z-index: 1;
	animation: whale-ani 4s  linear infinite;}
	@keyframes whale-ani{
		0%{transform: translate(-50% ,0);}
		50%{transform: translate(-50% ,20px);}
		100%{transform: translate(-50% , 0);}
	}

.deco-boatGirl{
	position: absolute;
	display: inline-block;
	width: 226px;
	height: 178px;
	right: 20%;
	bottom: 150px;
	background: url(../images/deco-boatGirl.png) bottom center no-repeat;
	background-size: contain;
	animation: boatGirl-ani 3.5s  linear infinite;}
	@keyframes boatGirl-ani{
		0%{transform: translateY(10px);}
		50%{transform: translateY( 0px);}
		100%{transform: translateY( 10px);}
	}
	

/*-- 活動內容 --*/
.compaign-wrap{
	display: inline-block;
	width: 100%;
	padding: 200px 20px 20px;
	background: url(../images/bg-conten.png) center no-repeat;
	background-size: auto;}

.tag-slogan{
	position: absolute;
    display: inline-block;
    width: 100%;
    max-width: 1200px;
    height: 240px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/deco-slogan.png) top left no-repeat;
    background-size: contain;}

.compaign-wrap .compaign{
	display: inline-block;
	width: 100%;
	max-width: 1200px;}

.btn-wrap{
	position: absolute;
	display: inline-block;
	width: 300px;
	top: -300px;
	right: 65px;}

.btn-wrap > a{
	display: inline-block;
	margin: 10px;}

.btn-wrap > a:hover{
	transform: translateY(-20px);}

.btn-wrap > a:nth-of-type(1){
	margin-right: 80px;}

.btn-wrap > a:nth-of-type(2){
	margin-left: 120px;}

.btn-wrap > a:nth-of-type(1) > span{
	position: absolute;
	display: inline-block;
	left: 18%;
	width: 170px;
	height: 170px;
	background: url(../images/deco-callcard.png) center no-repeat;
	background-size: auto;}

.btn-wrap > a:nth-of-type(2) > span{
	position: absolute;
	display: inline-block;
	right: 2%;
	width: 170px;
	height: 170px;
	background: url(../images/deco-register.png) center no-repeat;
	background-size: auto;
	animation-delay: 0.2s;}


.content{
	display: inline-block;
	width: 800px;
	height: 800px;
	padding: 160px 40px;
	margin-right: 300px;
	background: url(../images/bg-prize.png) center no-repeat;
	background-size: auto;}

.prize1{
	margin-left: 120px;
	margin-bottom: 20px;
	width: auto;
	display: inline-block;}

.prize2{
	margin-right: 120px;
	width: auto;
	display: inline-block;
	animation-delay: 0.3s;}


.prize1::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 91px;
	height: 85px;
	right: 0;
	bottom: 0;
	background: url(../images/deco-turtle.png) center no-repeat;
	background-size: contain;}

.prize2::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 106px;
	height: 92px;
	right: 60px;
	bottom: -50px;
	background: url(../images/deco-fish.png) center no-repeat;
	background-size: contain;}

.deco-prize1{
	position: absolute;
	display: inline-block;
	width: 235px;
	height: 235px;
	left: -230px;
	background: url(../images/prize1.png) center no-repeat;
	background-size: contain;
	animation: decoprize-ani 1.6s ease-in-out infinite ;}

.deco-prize2{
	position: absolute;
	display: inline-block;
	width: 260px;
	height: 260px;
	right: -230px;
	background: url(../images/prize2.png) center no-repeat;
	background-size: contain;
	animation: decoprize-ani 2s ease-in-out infinite ;}
	@keyframes decoprize-ani{
		0%{ transform: scale(1);}
		50%{ transform: scale(1.03);}
		100%{ transform: scale(1);}
	}


/*-- Call Call卡會員服務 --*/

.actions-wrap{
	display: inline-block;
	width: 100%;}

.bg-gray{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 600px;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: url(../images/bg-gray.png) top center no-repeat;
	background-size: cover;
	z-index: -1;}

.actions-wrap div{
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;}

.actions-wrap div a{
	display: inline-block;
	margin: 40px;}

.actions-wrap div a:hover{ transform: translateY(-10px);}

.actions-wrap div a:nth-of-type(1){margin-top: 80px;}
.actions-wrap div a:nth-of-type(2){margin-bottom: 80px;}



.deco-seaweed1{
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 106px;
	right: 0;
	bottom: 0;
	background: url(../images/deco-seaweed1.png) top center no-repeat;
	background-size: contain;}

.deco-seaweed2{
	position: absolute;
	display: inline-block;
	width: 108px;
	height: 118px;
	left:  0;
	bottom: 0;
	background: url(../images/deco-seaweeds.png) top center no-repeat;
	background-size: contain;}


.deco-colorfishs1{
	position: absolute;
	display: inline-block;
	width: 147px;
	height: 94px;
	right: 10%;
	top: 0;
	background: url(../images/deco-colorfishs1.png) top center no-repeat;
	background-size: contain;
	animation: colorfishs1-ani 3s linear infinite;}
	@keyframes colorfishs1-ani{
		0%{transform: translateY(-15px);}
		50%{transform: translateY(0px);}
		100%{transform: translateY(-15px);}
	}

.deco-colorfishs2{
	position: absolute;
	display: inline-block;
	width: 147px;
	height: 94px;
	left: 10%;
	bottom: 50%;
	background: url(../images/deco-colorfishs2.png) top center no-repeat;
	background-size: contain;
	animation: colorfishs2-ani 8s linear infinite;}
	@keyframes colorfishs2-ani{
		0%{transform: translateX(-50px) scaleX(1);}
		50%{transform: translateX(0px) scaleX(1);}
		55%{transform: translateX(0px) scaleX(-1);}
		100%{transform: translateX(-50px) scaleX(-1);}
	}














/*-- 活動辦法 --*/
.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: 38px;
	font-weight: 600;
	color: #354c50;
	margin-bottom: 20px;}

.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{
	list-style: none;
	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;}
	}