@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+TC:wght@100;500;700;900&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: #111111;
	outline: none;
	word-break: break-all;}

/*-- 隱藏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:#ffff00;
	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: #fff;
	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;
	margin: 0 15px;
	color: #808080;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;}

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

.navi-warp ul li a{color: inherit;}
.navi-warp ul li span.break{ display: none;}

body{
	background: #dbf7f4;
	scroll-behavior: smooth !important;}

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

.theme-bg{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-height: 290px;
	min-height: 65vh;
	top: 0;
	left: 0;
	background: url(../images/theme-bg.png) top 0 center repeat-x;
	background-size: auto;}

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	overflow: hidden;
	max-height:600px;

	h1{
		display: flex;
		text-align: center;
		width: 100%;
		position: absolute;
		align-items: center;
		color: #fffbf0;
		left: 0;
		top: 0;
		transform: translate(-50%, -50%);}

	.theme{
		display: inline-block;
		align-items: center;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 30px 1%;

		span.theme-date{
			display: inline-block;
			position: absolute;
			top: -2px;
			left: 2%;
			width: 23%;
			max-width: 150px;
			height: 120px;
			background: url(../images/theme-date.png) top center no-repeat;
			background-size: contain;}

		span.theme-mb{
			max-width: 650px;
			display: none;}

		span{
			display: inline-block;
			width: 100%;
			max-width: 1150px;
			
			img{
				display: inline-block;
				width: 100%;}
	
			span{
				position: absolute;
				display: inline-block;
				width: 100%;
				left: 0;
				top: 0;
	
				img{
				display: inline-block;
				width: 100%;}}			

			span.theme-title{
				z-index: 1;}



			span.theme-subtitle{
				z-index: 2;
				animation: theme-subtitle-ani 2s ease-in-out infinite;}

			span.theme-coin1{
				animation: theme-coin-ani 2s ease-in-out infinite;}

			span.theme-coin2{
				animation: theme-coin-ani 1.5s ease-in-out infinite;}

			span.goldbg{
				top: initial;
				bottom: -5px;}				
			}

		.theme-mainShine{
				display: inline-block;
				width: 100%;
				max-width: 1070px;
				height: 100%;
				position: absolute;
				top: 54%;
				left: 50%;
				transform: translate(-50% , -50%);
				background: url(../images/theme-mainshine.gif) center no-repeat;
				background-size: contain;}

		.theme-goldbg{
				display: inline-block;
				width: 110%;
				max-width: initial;
				height: 100%;
				position: absolute;
				top: 70%;
				left: 54%;
				transform: translate(-50% , -50%);
				background: url(../images/theme-goldbg.png) center no-repeat;
				background-size: contain;}

		.theme-alung{
				display: inline-block;
				width: 100%;
				max-width: 780px;
				height: 100%;
				position: absolute;
				top: 50%;
				left: 48%;
				transform: translate(-50% , -50%);
				background: url(../images/alung.gif) center no-repeat;
				background-size: contain;}
			}
		
		.spotlight-r,
		.spotlight-l{
			position: absolute;
			display: inline-block;
			width: 80%;
			max-width: 700px;
			height: 580px;
			right: 0;
			left: initial;
			top: -120px;
			background: url(../images/spotlight-r.png) top center no-repeat;
			background-size: contain;
			animation: spotlight1-ani 4s ease infinite;
			pointer-events: none;}

		.spotlight-l{
			left: 0;
			background: url(../images/spotlight-l.png) top center no-repeat;
			background-size: contain;
			animation: spotlight2-ani 4s ease infinite;}
	}

	/* animation */
		@keyframes theme-title-shine-ani {
			0%{ opacity: 0.5;}
			50%{ opacity:1;}
			100%{ opacity: 0.5;}
		}		

		@keyframes theme-subtitle-ani {
			0%{ transform: rotate(1deg); transform-origin: right 50px center;}
			50%{ transform: rotate(-1deg); transform-origin: right 50px  center;}
			100%{ transform: rotate(1deg); transform-origin: right 50px  center;}
		}		

		@keyframes theme-coin-ani {
			0%{transform: translateY(5px);}
			50%{transform: translateY(0px);}
			100%{transform: translateY(5px);}
		}		



		@keyframes spotlight1-ani {
			0%{ transform: rotate(10deg); transform-origin: right top;}
			50%{ transform: rotate(-20deg); transform-origin: right top;}
			100%{ transform: rotate(10deg); transform-origin: right top;}
		}	


		@keyframes spotlight2-ani {
			0%{ transform: rotate(10deg); transform-origin: left top;}
			50%{ transform: rotate(-20deg); transform-origin: left top;}
			100%{ transform: rotate(10deg); transform-origin: left top;}
		}	

.goldfalling-wrap{
	position: absolute;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;;
	max-width: 1200px;
	pointer-events: none;

		> li{
			display: inline-block;
			width: 20%;
			height: 20%;
			max-width: 35px;
			max-width: 25px;
			background: url(../images/deco-coins01.png) center no-repeat;
			background-size: contain;
			animation: coinsFalling-ani 5s ease infinite;}

		> li:nth-of-type(1){ 
			background: url(../images/deco-coins01.png) center no-repeat;
			background-size: contain;
			animation-duration: 6s;}

		> li:nth-of-type(2){ 
			background: url(../images/deco-coins02.png) center no-repeat;
			background-size: contain;
			animation-duration: 3s;}

		> li:nth-of-type(3){ 
			height: 7%;
			margin-left: -40%;
			background: url(../images/deco-coins03.png) center no-repeat;
			background-size: contain;
			animation-duration: 3.4s;}

		> li:nth-of-type(4){ 
			background: url(../images/deco-coins04.png) center no-repeat;
			background-size: contain;
			animation-duration: 3.2s;}

		> li:nth-of-type(5){ 
			background: url(../images/deco-coins05.png) center no-repeat;
			background-size: contain;
			animation-duration: 5s}
	}

	@keyframes coinsFalling-ani {
		0%{ transform: translateY(-200%);}
		90%{ opacity: 1;}
		100%{ 
			transform: translateY(360%);
			opacity: 0;}
	}

/* 選單 */

.menu-wrap{
	display: inline-block;
	position: sticky;
	width: 100%;
	top: 0px;
	padding: 0 2%;
	z-index: 2;
	background: #dbf7f4;	
	margin-bottom: 10px;

	.menu{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 10px;
		width: 100%;
		max-width: 1200px;
		margin: auto;
/* 		box-shadow: 0 15px 10px -10px rgba(00, 00, 00, 0.1); */}

	.social{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		max-width: 1200px;
		margin: auto;
/* 		box-shadow: 0 15px 10px -10px rgba(00, 00, 00, 0.1); */}

		a{
			display: inline-block;
			flex: 1;
			width: 100%;
			max-width: 200px;
			margin: 0 1%;
			cursor: pointer;

			img{
				display: inline-block;
				width: 100%;}

			img:nth-of-type(2){	display: none}

			}
		a:active, a:hover{
			transform: translateY(-10px);}
		
		/* a:hover:before{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			top:10%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-top: 25px solid #ffff00;
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
			z-index: 1;
			animation: navi-arrow-ani 1s ease infinite;} */
		}
		a.navi-noneActive{cursor: initial;}
/* 		a.navi-noneActive::before{
			content: '';
			position: absolute;
			top: -20px;
			width: 0;
			height: 0;
			top:10%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-top: 25px solid #ffff00;
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
			z-index: 1;
			animation: navi-arrow-ani 1s ease infinite;} */
	}
		@keyframes navi-arrow-ani{
			0%{transform: translate(-50%,-50%) scaleX(1);}
			50%{transform: translate(-50%,-50%) scaleX(-1);}
			100%{transform: translate(-50%,-50%) scaleX(1);}
			
			}

/*-- 共同選項  --*/
.span2{
	text-align: left;
	padding:min(1rem , 2%);
	padding-left: 5px;
	color: #4d4d4d;
	font-size: clamp( 0.8rem, calc(6vw - 1rem), 1.5rem );
	font-weight: 900;}

h2{
	text-align: left;
	padding:min(1rem , 2%);
	padding-left: 30px;
	color: #0e5750;
	font-size: clamp( 1.5rem, calc(6vw - 1rem), 3.125rem );
	font-weight: 900;}

h2::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 2.5%;
	min-width: 20px;
	height: 15%;
	background: #0e5750;
	border-radius: 30px;
	left: 0;
	top: 45%;
	transform: translateX(-50%);}

h3{
	text-align: center;
	color: #333333;
	font-size: clamp( 1.2rem , calc(8vw - 1.5rem), 2rem );
	font-weight: 900;}

h4{
	text-align: left;
	color: #111111;
	padding: 1% 3%;
	font-size: clamp( 1.1rem , calc(7vw - 1.1rem), 1.4rem );
	font-weight: 800;}

h4.double{
	display: inline-block;
	width: auto;
	padding: 8px 16px;
	background: #6e4908;
	border-radius: 20px;
	color: #fff;
	font-weight: 600;
	line-height: initial;
	margin: 5px 0;

	span{
		color: #ffff00;}
	.w-break::after{
		content: " / ";
		font-weight: 200;}
	}

.card.prize > h4{
	font-size: clamp( 1.1rem , calc(7vw - 1.1rem), 1.4rem );

}

p{ 	font-size: clamp( 1.2rem , calc(8vw - 1.5rem), 1.5rem );
	color: #6e4908;}

p.note{ font-size: clamp( 1.2rem , calc(8vw - 1.5rem), 1.1rem );
		color: initial;}

.deco-curtain::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 40%;
	max-width: 200px;
	height: 125px;
	background: url(../images/deco-curtain.png) top right no-repeat;
	background-size: contain;
	right:0;
	top: 0;}

.block-indent{
	margin-left: 1.5rem;
}
.haging{
	padding-left: 1em;
}


/*-- 共用樣式 卡片底圖 --*/
.card-wrap {
	display: inline-block;
	width: 100%;
	padding: 10px 2%;

	.card{
		display: inline-block;
		width: 100%;
		max-width: 1200px;
		background: #ffffff;
		border-radius: 20px;
		padding: 10px;
	
		> div{
			display: flex;
			padding: 15px 10px;
			justify-content: space-evenly;
			align-items: center;
			flex-wrap: wrap;

			> span,
			> span > a {
				display: inline-block;
				width: 100%;
				max-width: 260px;
				margin: 1%;

				> img{
					display: inline-block;
					width: 100%;}}
			
			> span:hover,
			> span:active{
				transform: translateY(-15px);}
			}

		h3{
			.w-break::after{
				content: '，';
				color: #6e4908;}
			}
		}
		
		> a{	display: inline-block;
			width: 60%;
			max-width: 280px;

			img{
				display: inline-block;
				width: 100%;}
		}

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

/*-- 獎項 --*/
.card.prize{
	div{
		span{cursor: pointer;}
		span::before{
			content: '立即看攻略GO';
			position: absolute;
			display: inline-flex;
			padding: 10px;
			width: 65px;
			height: 65px;
			line-height: 1.2em;
			align-items: center;
			border-radius: 50px;
			font-size: 1.1em;
			color: #fff;
			background: rgb(219, 73, 29);
			bottom: -10%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: 0.5s;}

		span:active::before,
		span:hover::before{
			content: '立即看攻略GO';
			bottom: -105px;}

		span:nth-of-type(5)::before{display: none;}
		span:nth-of-type(4){display: none;}
		}
	}


/*--  --*/
.card-wrap{
	.card{	
		> div.m1,
		> div.m2,
		> div.m3{
			display: flex;
			padding: 15px 10px;
			justify-content: space-evenly;
			align-items: center;
			flex-wrap: wrap;

			> a {
				display: inline-block;
				width: 100%;
				max-width: 250px;
				margin: 2% 1%;
				cursor: pointer;

				> span{
					display: inline-block;
					width: 100%;
	
					> img{
						display: inline-block;
						width: 100%;
					}
				}

				> span:hover,
				> span:active{
					transform: translateY(-15px);}
			}
		}
	}
	.card.mission{				
		h3{
			.w-break::after{
				content: '  ';
				color: #6e4908;}
			}
		}
	}

/* 年金舊戶加碼提示 */
.card-wrap{
	.card{	
		> div.m2 a{
			/*margin-bottom: 50px;*/
			}

		> div.m2 a:nth-of-type(2)::before{
			content: '';
			position: absolute;
			display: inline-block;
			width: 35%;
			max-width: 80px;
			height: 80px;
			right: -20px;
			top: -30px;
			background: url(../images/mission2-02tag.png) center no-repeat;
			background-size: contain;
			animation: mission2-02tag-ani 1s ease-in-out infinite;
			z-index: 1;}

		/*> div.m2 a:nth-of-type(2)::after{	
			content: '註：投資型年金險累積月繳保費每滿3,000元';
			position: absolute;
			display: block;
			width: 100%;
			font-size: clamp( 0.9rem , calc(4vw - 1.5rem), 1.2rem );
			left: 50%;
			top: 110%;
			transform: translate(-50%, -50%);
			color: #ff0101;}*/

		
		}
	}

		@keyframes mission2-02tag-ani{
			0%{transform: translateY(0px);}
			50%{transform: translateY(-5px);}
			100%{transform: translateY(0px);}
		}

		
/*  領券抽獎攻略  */
.card-wrap.tips{
	.card{
		> h3{margin-top: 2%;

			span{
				font-size: clamp(1.2rem, calc(8vw - 1.5rem), 1.6rem);
				color: rgb(219, 73, 29);}
			}

/* 		> h3::after{
			content: '';
			display: inline-block;
			position: absolute;
			width: 75px;
			height: 75px;
			top: 50%;
			transform: translateY(-50%);
			background: url(../images/h3-iconV.png) center no-repeat;
			background-size: contain;
			margin-top: initial;}

		h3:nth-of-type(2)::after{
			background: url(../images/h3-iconT.png) center no-repeat;
			background-size: contain;}

		h3:nth-of-type(3)::after{
			background: url(../images/h3-iconG.png) center no-repeat;
			background-size: contain;} */

		> h3 { padding: 0 3%;}

		> a {
			display: inline-block;
			width: 100%;
			max-width: 1000px;
			padding: 10px 0;
			cursor: pointer;

			img{
				display: inline-block;
				width: 100%;}

			img:nth-of-type(2){
				display: none;
				max-width: 650px;}
			}
		}
	}

/*-- 網投頁tab --*/
.tabs-wrap{
	display: flex;		
	justify-content:  center;
	align-items: center;
	position: sticky;
	top: 0;
	width: 100%;
	max-width: 1200px;
	background: #dbf7f4;
	margin: 0 auto;
	padding: 24px 0 0;
	overflow: hidden;
	z-index: 3;

	span.tab{
		font-size: clamp( 1.3rem, calc(8vw - 1.2rem), 2.6rem );
		padding: 5px 3% 10px;
		border-radius: 20px 20px 0 0;
		font-weight: 900;
		margin: 0 1%;
		color: #0e5750;
		background: #fff;
		cursor: pointer;

		> span{ 
			position: absolute;
			display: inline-block;
			width: 100%;
			height: 0px;
			top: 0;
			left: 0;
			display: none;}

		> span::after{
			content: '';
			position: absolute;
			top: -20px;
			width: 0;
			height: 0;
			top:10%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-top: 20px solid #ffff00;
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			z-index: 1;
			animation: navi-arrow-ani 1s ease infinite;}
		
		
	}

	span.tab::before,
	span.tab::after{
		content: '';
		position: absolute;
		display: inline-block;
		width: 1000%;
		max-width: 1200px;
		height: 5px;
		left: 0;
		bottom: -1px;
		z-index: 2;
		display: none;}

	span.tab::before{
		left: initial;
		right: 0;}

	span.tab.active:nth-of-type(1)::after,
	span.tab.active:nth-of-type(1)::before{
		display: block;
		background: #0e5750;}

	span.tab.active:nth-of-type(2)::after,
	span.tab.active:nth-of-type(2)::before{
		display: block;
		background: #0e5750;}


	span.tab:nth-of-type(1).active,
	span.tab:nth-of-type(1):hover{ 
		background: #0e5750;
		color: #fff;
		transition: 0.2s;}

	span.tab:nth-of-type(2).active,
	span.tab:nth-of-type(2):hover{ 
		background: #0e5750;
		color: #fff;
		transition: 0.2s;}


	span.tab.active > span{display: inline-block;}
}



.tab::after.active{
	background: #0c95a4;}		




.card{
	div.prize-notice{
		display: flex;
		padding: 15px 10px;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
		
		> a {
			display: inline-block;
			width: 100%;
			max-width: 1000px;
			margin: 2% 1%;

			> span{
				display: inline-block;
				width: 100%;

				> img{
					display: inline-block;
					width: 100%;
				}
				> img:nth-of-type(2){
					display: none;
					width: 100%;
					max-width: 600px;
				}
			}

		}
	}
}

.prize-notice .table{
	display: inline-block;
	width: 100%;}

/*--  攻略表格 --*/
.table > div{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	font-size: 1em;
	background: #fffdd8;
    border-radius: 20px;

	> h4{
		font-size: clamp( 1.5rem , calc(7vw - 1.1rem), 2.3rem );
		padding: 20px 1% 6%;
	} 
	div{
		display: flex;
		flex: 3;
		width: 98%;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		background: #fff;
		margin-bottom: 1%;

		> span{
			display: flex;
			flex: 3;
			width: 98%;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 10px 1%;
			font-weight: 600;
			font-size: 1.6em;
			min-height: 180px;
			border-right: 1px dotted #ff9351;
		
			img{
				position: absolute;
				display: block;
				width: 100%;
				max-width: 200px;
				left: 50%;
				bottom: 50%;
				transform: translateX(-50%);
			}

			span.number1,
			span.number2,
			span.number3{
				color: #cf0505;
				font-size: 2em;
			}

			span.number1::after{
				content: "萬元";
				font-size: 0.4em;
				margin: 0 2px;
			}

			span.number2::after{
				content: "千元";
				font-size: 0.4em;
				margin: 0 2px;
			}

			span.number3::after{
				content: "百元";
				font-size: 0.4em;
				margin: 0 2px;
			}

			span.deal2{
				font-size: 0.8em;
				z-index: 2;
			}
		}

		> span:hover,
		> span:active{
			transform: translateY(-10px);}

		> span:nth-of-type(1){
			flex: 5;
			
			span.note{
				font-size: 0.8em;
                color: #dc3741;}
		}
	}

	div:nth-of-type(1) {
		background: linear-gradient(-90deg, #0e5750, #007c7c, #0e5750);
		border-radius: 20px 20px 0 0;		
		margin: 1%;}

	div:nth-of-type(1) > span{
		min-height: 120px;
		color: #fff;
		border: 0;
		padding-top: 70px;}

	div:nth-of-type(1) > span:nth-of-type(1)::before{
		content: "抽獎任務";
		position: absolute;
		display: inline-block;
		width: 100%;
		max-width: 120px;
		left: 50%;
		transform: translateX(-50%);
		top: -20px;
		border-radius: 0 0 20px 20px;
		padding: 10px 5px;
		color: rgb(219, 73, 29);
		font-weight: 600;
		background: #fff;}	
}

#eztravel .table > div{

	span.deal2{
		color: #dc3741;
	}
}

.table{
	ul{
		display: inline-block;
		width: 100%;
		padding: 16px;
		max-width: 1000px;

		li{
			text-align: left;
			list-style: none;
			padding-left: 20px;
			line-height: 1.5em;
			font-size: clamp( 0.8rem , calc(7vw - 1.1rem), 1.1rem );

			span{ color: #dc3741;}
		}
		li::before{
			content: "★";
			position: absolute;
			left: 0;
			top: 0;
		}
	}
}

div.btn-how{
	display: inline-block;
	width: auto;
	justify-content: right !important;
	background: transparent !important;
	margin: 8px;
	
	a{
		font-size: 1em;
		color: #fff !important;
		padding: 10px 15px;
		background: #dc3741;
		border-radius: 20px;
		margin: 0 20px;
		cursor: pointer;
	}
	a:hover{
		transform: translateY(-5px);
		background: #9e0711 ;}

	a::after{
			content: '';
			position: absolute;
			top: -20px;
			width: 0;
			height: 0;
			top:50%;
			left: 0%;
			transform: translate(-50%,-50%) rotate(-90deg);
			border-top: 20px solid #ffff00;
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			z-index: 1;}
}

/*-- 表格右下角，可領券數 --*/
.ticket-num{
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 0.9em;
	z-index: 1;

	span{
		font-size: 0.6em;
		padding-right: 3px;
	}
}

.ticket-num::before{
	content: "";
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
    border-width: 40px 60px 0px 0;
    border-color: transparent #fffdd8 transparent transparent;
	z-index: -1;}

.ticket-num::after{
	content: "張";
	font-size: 0.6em;
	margin: 0 2px;}

/*--年金險 利變、投資tab 切換--*/
.table div.ezannuity-tab{
	display: flex;
	width: 100%;
	max-width: 1200px;
	background: none;
	margin: 0 auto;
	padding: 10px 2%;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	transform: translateY(10px);

	> span{
		display: inline-block;
		flex: 1;
		max-width:200px;
		font-size: clamp( 1.5rem , calc(7vw - 1.1rem), 2.3rem );
		background: #fffdd8;
		color: #6e4908;
		border-radius: 10px;
		font-weight: 600;
		padding: 1% 3% 10px;
		margin: 0 1%;
		cursor: pointer;
		top: 10px;
	}

	> span::after{
		content: '';
		position: absolute;
		top: -20px;
		width: 0;
		height: 0;
		top: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-top: 20px solid #ffff00;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		z-index: 1;
		animation: navi-arrow-ani 1s ease infinite;}

	> span:hover{
		background: #fffdd8;
	}
}

#ezannuitytable1.Unselected{display: none;}
#ezannuitytable2.Unselected{display: none;}
#ezannuity-tabBtn1.Unselected{
		background: #a3a290;
		color: #ffffff;}
#ezannuity-tabBtn2.Unselected{
		background: #a3a290;
		color: #ffffff;}

.content{display: none;}
.content.active {
	display: block;}
	

/*旅平投保案例切換*/
.case-wrap{
	display: inline-block !important;
	width: 100%;
	padding: 20px;
	margin: 0 auto; 

	.case{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
		border: 6px solid #eee;
		border-radius: 20px;
		margin-top: 40px;
		padding: 2%;
		padding-top: 40px;

		> div{
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;			
			flex-wrap: wrap;

			> span{
				display: inline-block;
				text-align: center;
				width: 48%;
				max-width: 470px;
				margin: 0 1%;

				> img{
					display: inline-block;
					width: 100%;}
				}

			> span.example-wrap{
				display: block;
				max-width: initial;
				width: 100%;
				max-width: 940px;
				padding: 20px 1% 1%;
				background: #ffeeee;
				border-radius: 20px;
				margin-top: 20px;

				.example{
					display: inline-block;
					width: 100%;					
					padding: 8px;

					p{
						font-size: clamp(1.2rem, calc(4vw - 1.2rem), 1.5rem);
						font-weight: 600;
						text-align: left;
						color: #6e4908;
						padding: 8px;

						.age{
							color: #b88935;
							font-size: clamp(1.1rem, calc(4vw - 1.2rem), 1.1rem);}

						.disease{
							color: #b88935;}

						.money{
							color: #fa5f7f;
							font-size: clamp(1.3rem, calc(4vw - 1.2rem), 1.6rem);}
						
						}
					p.note{
						font-size: 16px;
						color: initial;
						font-weight: initial;}

					.claim{
						display: flex;
						align-items: center;
						width: 100%;
						background: #fff;
						border-radius: 20px;
						padding: 8px 16px;}
					
					.claim::before{
						content: '';
						display: inline-block;
						min-width: 80px;
						height: 80px;
						background: url(../images/icon-claim.png) center no-repeat;
						background-size: 90%;}

				}	
			}
			
			> span.example-wrap::before{
				content: '理賠案例';
                display: flex;
                align-items: center;
                position: absolute;
                width: auto;
                height: 40px;
                left: 18px;
                top: -15px;
                padding: 0px 12px;
                font-size: clamp(1.2rem, calc(4vw - 1.2rem), 1.4rem);
                color: #fff;
                background: #b88935;
				border-radius: 10px 10px 0 0;}
		}

		/*tab*/	
		> div.tab-wrap{
			display: flex;
			position: absolute;
			justify-content: center;
			max-width: 60%;
			top: -8%;
			left: 50%;
			transform: translate(-50%, 0%);
			flex-direction: row;
			z-index: 1;

			> span{
				display: inline-block;
				flex: 1;
				max-width: 150px;
				height: 79px;
				margin: 0 2%;
				background: url(../images/ta-tab1.png) center no-repeat;
				background-size: contain;
				cursor: pointer;}

			span::before{
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				top: 10%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-top: 20px solid #ffff00;
				border-right: 10px solid transparent;
				border-left: 10px solid transparent;
				z-index: 1;
				animation: navi-arrow-ani 1s ease infinite;}

			> span:nth-of-type(2){
				background: url(../images/ta-tab2.png) center no-repeat;
				background-size: contain;}	
			
			> span:nth-of-type(3){
				background: url(../images/ta-tab3.png) center no-repeat;
				background-size: contain;}

			}
		}
	}



.case-wrap .case > .tab-wrap > span:hover,
.case-wrap .case > .tab-wrap > span:active{
	transform: translateY(-10px);}

.case-wrap .case > .tab-wrap > span:hover::before,
.case-wrap .case > .tab-wrap > span:active::before{
	transform: translateY(-10px);
	animation: tab-arrow-ani 0.5s ease infinite;}
	@keyframes tab-arrow-ani {
		0%{transform: translate(-50%,-50%);}
		50%{transform: translate(-50%,-100%);}
		100%{transform: translate(-50%,-50%);}
	}

/* 預設隱藏*/
#case02, #case03{display: none;}

/* 旅平險特色 */
.card.taAdvance-wrap{
	display: flex;
	justify-content:space-evenly;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto; 
	padding: 32px 2% 8px;
	
	span{
		display: inline-block;
		width: 100%;
		max-width: 200px;

		> img{
			display: inline-block;
			width: 100%;}
		}
	}

/* 投保享優惠 */
.card-wrap{
	.card{
		> div.coupon-wrap{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 8px;
		
			.coupon{
				display: flex;
				justify-content: center;
				padding: 8px 16px;
				background: #fffaea;
				margin-bottom: 16px;

				.icon-coupon{
					display: inline-block;
					min-width: 100px;
					height: 100px;
					background: url(../images/icon-coupon01.png) center no-repeat;
					background-size: 80%;}

				> div{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					
					h4{
						display: block;
						width: 100%;
						color: #6e4908;
						text-align: left;
						padding: 4px;
						font-size: clamp(1.45rem, calc(8vw - 1.2rem), 2rem);

						span{
							color: #0ec417;
							font-size: 0.8em;
							padding: 0 8px;
						}
					}

					p{
						text-align: left;
						font-size: clamp(1.1rem, calc(8vw - 1.2rem), 1rem);
						padding: 2px;
						line-height: 22px;

						.sp{
							color: #fa5f7f;
							font-size: 1.2em;
							font-weight: 600;
							padding: 0 4px;}
					}
				}
			}
			.coupon:nth-of-type(2) .icon-coupon{
				background: url(../images/icon-coupon02.png) center no-repeat;
				background-size: 80%;}

			.coupon:nth-of-type(3) .icon-coupon{
				background: url(../images/icon-coupon03.png) center no-repeat;
				background-size: 80%;}
			.coupon:nth-of-type(4) .icon-coupon{
				background: url(../images/icon-coupon03.png) center no-repeat;
				background-size: 80%;}
		
		}
	}
}


/*-- 年金險商品--*/
.annuity-list{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 8px 16px;
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
	border-radius: 20px;

	> a > img{
		display: inline-block;
		margin-left: 50%;
		margin-bottom: 20px;}

	> a{margin-bottom: 16px;}

	> a > div {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		padding: 16px;
		border-radius: 20px;
		background: #d6fbff;

		> span{
			display: inline-block;
			width: 98%;
			min-width: 320px;
			min-height: 210px;
			margin: 1%;
			flex: 1;
			border-radius: 20px;
			background: url(../images/case-pic-01.png) center no-repeat;
			background-size: cover;
		}
	
		div{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex: 3;
			padding: 8px;
			margin: 1%;
			min-height: 210px;
			background: #fff;
			border-radius: 20px;
			box-shadow: 4px 4px 0 0 rgba(00, 00, 00, 0.2);

			h4{
				display: block;
				width: 100%;
				color: #fa5f7f;
				text-align: left;
				padding: 4px;
				font-size: clamp(1.45rem, calc(8vw - 1.2rem), 2rem);
	
				span{
					font-size: 0.7em;
					color: #0c95a4;
					padding: 0 4px;
				}
			}
			p{
				text-align: left;
				font-size: clamp(1.2rem, calc(8vw - 1.2rem), 1.3rem);
				padding: 8px 16px;
				font-weight: 600;
				line-height: 1.5em;
	
				.money{
					color: #fa5f7f;
					font-size: 1.2em;
					padding: 0 4px;}
			}
		}

	}

	> a:nth-of-type(2) > div > span{ 
		background: url(../images/case-pic-02.png) center no-repeat;
		background-size: cover;}

	> a:nth-of-type(3) > div > span{ 
		background: url(../images/case-pic-03.png) center no-repeat;
		background-size: cover;}

	> a:nth-of-type(1) > div > span::before,
	> a:nth-of-type(2) > div > span::before,
	> a:nth-of-type(3) > div > span::before{
		content: '';
		display: inline-block;
		position: absolute;
		width: 150px;
		height: 50px;
		top: 10px;
		left: -10px;}

	> a:nth-of-type(1) > div > span::before{
		background: url(../images/annuity-tag01.png) center no-repeat;
		background-size: contain;}

	> a:nth-of-type(2) > div > span::before{
		background: url(../images/annuity-tag02.png) center no-repeat;
		background-size: contain;}

	> a:nth-of-type(3) > div > span::before{
		background: url(../images/annuity-tag03.png) center no-repeat;
		background-size: contain;}

	> a:nth-of-type(2) > div > div > h4{ color: #ff9351;}
	> a:nth-of-type(3) > div > div > h4{ color: #0bbe73;}

	> a:nth-of-type(1) > div::after , 
	> a:nth-of-type(2) > div::after , 
	> a:nth-of-type(3) > div::after { 
		content: '*假設宣告利率維持在2.35%';
		display: inline-block;
		position: absolute;
		width: 100%;
		padding: 0 16px;
		text-align: left;
		left: 0;
		bottom: -30px;
		font-size: 1em;
		color: #0883ca;}
	> a:nth-of-type(3) > div::after {content: '*假設投資報酬率5%';}
}


/*-- 保障型商品 --*/
.card-wrap{
	.card{
		> div.accident-wrap{
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
			align-items: center;
			width: 100%;
			max-width: 1200px;
			overflow: auto;
			margin: 0 auto;
			padding: 16px 8px;
			container-type: scroll-state;

			> div{
				display: inline-block;
				width: 100%;
				max-width: 480px;
				min-width: 380px;
				margin-bottom: 80px;
				margin: 1%;
				
				span{
					display: inline-block;
					width: 100%;
					cursor: pointer;

					img{
						display: inline-block;
						width: 100%;}
					p{
						position: absolute;
						display: inline-block;
						left: 50%;
						top: 45%;
						transform: translate(-50%, -50%);
						width: 84%;
						padding: 2%;
						background: #5d0d7fa8;
						font-size: clamp(1rem, calc(4vw - 1rem), 1rem);
						text-align: left;
						color: #fff;
						border-radius: 20px;
						opacity: 0;
						
						> span{ 
							width: initial;
							display: inline-block;
							color: #ffff00;}
					}
					
					p::after{
						content: '';
						display: inline-block;
						position: absolute;
						width: 30%;
						max-width: 150px;
						height: 150px;
						top: -130px;
						right: -7%;
						background: url(../images/oneDay-tag01.png) center no-repeat;
						background-size: contain;
						animation: oneDay-ani 1s ease infinite;}
					}
					p.oneDay2::after{
						background: url(../images/oneDay-tag02.png) center no-repeat;
						background-size: contain;}
					p.oneDay3::after{
						background: url(../images/oneDay-tag03.png) center no-repeat;
						background-size: contain;}
					p.oneDay4::after{
						background: url(../images/oneDay-tag04.png) center no-repeat;
						background-size: contain;}
					p.oneDay5::after{
						background: url(../images/oneDay-tag05.png) center no-repeat;
						background-size: contain;}

					a.btn{
						img{
							display: inline-block;
							width: 30%;
							max-width: 280px;
							min-width: 250px;}
					}
				}
				
				span:hover,
				span:active{
					p{
					top: 34%;
					opacity: 1;}
				}	
			}	
		}
		div:nth-of-type(2).accident-wrap{
			justify-content: start;

			> div{margin: 0.2%;}
		}

		div:nth-of-type(3).accident-wrap{
			flex-wrap: wrap;
			> div{
				min-width: initial;
				max-width: 380px;
				span{
					display: inline-block;
					width: 90%;
					cursor: initial;}
			}
		}
	}
				@keyframes oneDay-ani {
					0%{transform: scale(1);}
					50%{transform: scale(1.15);}
					100%{transform: scale(1);}
				}

.scroll-notice{
	display: inline-block;
	text-align:left;
	width: 100%;
	color: rgb(219, 73, 29);
	padding: 8px 32px;}

.scroll-notice.zone1{ display: none;}


/* 立即申請 */
.card-wrap {
	.card.member{
		> div {
			display: flex;
			justify-content: space-evenly;

			a{
				display: inline-block;
				width: 100%;
				max-width:300px;


				span{
					display: inline-block;
					width: 100%;

					img{
					display: inline-block;
					width: 100%;}
				}
			}
		}
	}
}

.card-wrap {
	.card.member{
		> div.ccare {
			a{
				max-width: 400px;
				margin: 1%;
				padding: 8px;}
			}
		}
	}

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


/*-- 活動辦法 --*/
#rules-switch,#rules-switch2{display: none;}

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

.card-wrap{
	.card{	
		> div.rules{
			padding: 0;
		}}}

.card-wrap.rule .card h2::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 25px ;
	height: 20px;
	margin-left: 10px;
	background: url(../images/deco-triangle.png) center no-repeat;
	background-size: contain;
	top: 55%;
	z-index: 1;
	transition: 0.5s;
	transform: translateY(-50%);}

.rules{
	margin: 0;
	padding: 0;
	height: 0;
	overflow: hidden;
	padding: 0;
	background: #fff;
	border: 1px solid #fff;

	ul{
		padding: 10px 2% 10px 4%;

		li{
			text-align: left;
			color: #6e4908;

			> h4{
				text-align: left;
				font-size: 1em;}
			
			> ol{
				padding: 10px 2%;

				li{
					ol{						
						> li{
							list-style: square;
							margin-left: 2%;}
					}
				}
			}
			> ul{
				padding: 0;
				margin: 1px;
			}
		}
	}
}

.rules ul.ta{
	padding: 8px 32px;
	li{
		margin-left: 32px;
	}
}


.rules{
	ul{
		width: 100%;
		padding: 8px 16px;
		background: #f3f3f3;
		margin: 1% auto;
		border-radius: 20px;
		
		h3{
			font-size: clamp(1.1rem, calc(4vw - 1rem), 1.2rem);
			text-align: left;
			color: rgb(219, 73, 29);}
		h4{
			font-size: clamp(1rem, calc(4vw - 1rem), 0.9rem);
			text-align: left;
			padding: initial;
			color: #6e4908;}
		li{
			margin-left: 16px;}
		p{
			text-align: left;
			font-size: clamp(0.9rem, calc(4vw - 1rem), 0.8rem);
		}
	}
}



/*獎項表格*/
.prize-table{
	display: flex;
	width: 100%;
	padding: 10px;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	> div {
		display: inline-block;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ececec;

		> span{
			display: inline-block;
			flex: 1;
			font-size: 1.1em;
			padding: 1%;}

		> span:nth-of-type(1){
			min-width: 106px;
			color: #6e4908;}

		> span:nth-of-type(2){
			flex: 4;
			text-align: left;}

		> span:nth-of-type(3){
			flex: 5;
			text-align: left;}
		}

	> div:nth-of-type(1){
		span{ 
			background: #6e4908;
			color: #fff;}
	}
}

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

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

#rules-switch2:checked ~ .rules{
	height: auto;
	padding: 2px 2%;}

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

.rules a {color: #ff3c00;}

.rules > h3{
	display: block;
	width: 100%;
	font-size: 20px;
	text-align: left;
	padding: 5px 20px 0;
	color: #ff3c00;}



/*-----------------*/
/*----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: #db491d;
	line-height: 50px;
	color: #fff;
	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: #db491d;
	background: #ffff00;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 

/* .btnTop2{
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-55%);
	width: 60px;
	height: 60px;
	border-radius: 30px;
	font-weight: 600;
	padding: 5px;
	line-height: 50px;
	cursor: pointer;
	transition: 0.5s;} */

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

footer{
	padding: 10px 2%;
	background: #fff;
	font-size: 15px;
	z-index: 1;}

footer a{ color: #ff0943 !important;}


/*錨點--*/
#section1, #section2, #section3,
#section4, #sectionPrize{top: -160px;}
#tip01, #tip02, #tip03 {top: -200px;}




/*------------------*/
/*-------蓋版-------*/
/*------------------*/
.popUp-wrap{
	display: inline-block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(00, 00, 00, 0.6);
	z-index: 999;
	display: none;}

.pupUp{
	display: inline-block;
	width: 90%;
	max-width: 1000px;
	height: 80vh;
	padding: 20px 2%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	background: #fff;
	border-radius: 20px;
	display: none;

		h2{
			font-size: clamp( 1.8rem, 4vw - 1rem , 3rem);}
		ol{
			display: inline-block;
			text-align: left;
			height: max( 60vh , 80%);
			overflow: auto;
			padding: 30px 25px 30px 35px;
			background: #eeeeee;

			li{
				text-align: left;
				font-size: clamp(1rem, 3vw - 1rem, 1.2rem);

				a{
					color: #0883ca;
					text-decoration: underline;}
				
				span.mark-red{
					display: inline-block;
					font-size: 1.1em;
					color: rgb(219, 73, 29);

					> span {
						font-size: 0.8em;
						color: rgb(219, 73, 29);}
					}

				p.note{	
					display: inline-block;
					color: rgb(219, 73, 29);
					font-size: 0.8em;
					text-align: left;}
			}

			> span{
				display: flex;
				align-items: center;
				width: 100%;
				max-width: 800px;
				padding: 10px;
				margin: 3% auto;
				background: #fff;
				border: 1px solid #8f8e8e;
				box-shadow: 0 10px 5px -10px rgba(00, 00, 00, 0.6);

				img{
					display: inline-block;
					width: 100%;}
				}
			> span.mb{
				flex-direction: column;
				display: none;}
			} 
}

.pupUp > div{ 
	display: inline-block;
	width: 100%;
	background: #fff;
	border-radius: 20px;
	padding: 20px;}

.btn-close{
	display: inline-block;
	position: absolute;
	width: 40px;
    height: 40px;
    top: -20px;
    right: -15px;
	padding: 30px;
	background: rgb(219, 73, 29) url(../images/btn-close.png) center no-repeat;
	background-size: 55%;
	border-radius: 50px;
	cursor: pointer;
	z-index: 1;}

#popUpBonus1{display: inline-block;}
.pupUp#newbonus1{display: inline-block;}
#popUpBonus2{display:  inline-block;}
.pupUp#newbonus2{display: inline-block;}


/*-- 範例新增可領券數 --*/
.ticketCount{
	display: flex !important;
	position: absolute;
	padding: 15px 10px;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	font-size: clamp( 1rem, calc(6vw - 1rem), 1.5rem );
	line-height: 20px;
	font-weight: 600;
	background: #f30707;
	color: #ffff00;
	right: 5%;
	top: -20px;
	border: 4px dotted #ffffff;
	animation: ticketCount-ani 1s ease infinite;}
	@keyframes ticketCount-ani{
		0%{ transform: scale(0.95);
			background: linear-gradient(45deg, #f30707 , #cf0505, #cf0505) ;
			}
		50%{ transform: scale(1);
			background: linear-gradient(45deg, #cf0505, #f30707, #cf0505);}
		100%{ transform: scale(0.95);
			background: linear-gradient(45deg, #cf0505 , #cf0505, #f30707) ;}
	}

.ticketCount::after{
	content: "張券";
	color: #fff;
	font-size: 15px;
	margin-left: 2px;
	transform: translateY(5px);}

.ticketCount::before{
	content: "可領";
	color: #fff;
	font-size: 15px;
	margin-right: 2px;
	transform: translateY(-5px);}


.accident-wrap .ticketCount{
	width: initial !important;
	right: initial;
	left: -2%;
	top: 10px;}


/*-- 領券任務 (新表格版) --*/
.missionTable{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 16px;
	background: #fffaea;
	border-radius: 20px;
	font-size: 1em;
	font-weight: 600;

	> div{
		display: flex;
		width: 100%;
		flex: 1;
		justify-content: center;
		align-items: stretch;
		font-size: 1.4em;
		margin: 2px;
		

		> span{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			flex: 1;
			background: #fff;
		
			> span {
				display: flex;
				justify-content: center;
				align-items: stretch;
				width: 100%;
				flex: 2;

				> span{
					border-bottom: 1px dotted #ff9351;
					display: flex;
					flex: 3;
					justify-content: left;
					align-items: center;
					width: 100%;
					padding: 6px 4px;
					
					span{
						margin: 0 5%;
					}
				}

				> span:nth-of-type(2){
					flex: 2;
					justify-content: center;}	

				> span:nth-of-type(3){
					justify-content: center;}				
			}
		}

		> span{
			padding: 8px;
			border-right: 1px dotted #ff9351;}

		> span:nth-of-type(1){ color: #cf0505;}
		> span:nth-of-type(2){ flex: 5;}

	}

	> div:nth-of-type(1){
		background: linear-gradient(-90deg, #0e5750, #007c7c, #0e5750);
        border-radius: 20px 20px 0 0;
        

		span{ 
			color: #fff;
			margin: 1% 0;
			min-height: initial;
			border-right: 0px dotted #ff9351;
			background: transparent;}
	}

	ul{
		display: block;
		width: 100%;

		li{
			list-style: none;
			text-align: left;
	margin-bottom: 10px;
            line-height: 28px;

			p{
				display: inline-block;
				color: #db491d;
				padding-left: 5px;
				font-size: 0.9em;
				text-align: left;
			}
		}
	}

	a{
		display: flex;
		color: #fff;
		justify-content: center;
		align-items: center;
        padding: 8px 16px;
        background: #dc3741;
        border-radius: 50px;
		font-size: 0.8em;
		cursor: pointer;
		margin-bottom: 8px;
	}

	a.blue{
		background: #0c95a4;}

	a:hover{
		transform: translateY(-5px);
		background: #9e0711 ;}

	a::after{
			content: '';
			position: absolute;
			top: -20px;
			width: 0;
			height: 0;
			top:50%;
			left: -1%;
			transform: translate(-50%,-50%) rotate(-90deg);
			border-top: 14px solid #ffff00;
			border-right: 7px solid transparent;
			border-left: 7px solid transparent;
			z-index: 1;}
}

.col{ flex-direction: column;}
.row{ flex-direction: row;}


.missionTable{
	.number{
		color: #cf0505;
        font-size: 2em;}

/* 	.number::after{
		content: "張";
        font-size: 0.6em;
		margin-top: 15px;
		margin-left: 5px;}

	.number::before{
		content: "+";
        font-size: 0.8em;} */
}

span.row.doubleDetial{
	padding-top: 100px;
	z-index: 1;

	.detial{
		display: inline-block;
		position: absolute;
		background: #fff9da;
		width: 80%;
		margin: 0 auto;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		padding: 8px;
		z-index: -1;
		border: 1px solid #f30707; 

		ul{
			display: inline-block;
			width: 100%;
			padding-left: 30px;

			li{
				text-align: left;
				list-style: disc;
				font-size: 0.8em;			
				color: #cf0505;
				line-height: 20px;
				margin-bottom: 4px;
			}
		}
	
	}
}


.card.mission > .btn{
	display: block;
}


/*-- 快速投保連結---*/
.minssionQuick{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	
	a{
		display: inline-block;
		flex: 1;
		max-width: 250px;

		img{
			display: inline-block;
			width: 100%;
		}
	}

	a:hover,
	a:active{
		transform: translateY(-10px);
	}
}