@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: 5%;
	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-wrap{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 0 20px;}

.navi-wrap > a {
	display: inline-block;
	border:1px solid rgba(255, 255, 255, 0);
	min-width: 65px;
	margin: 0 5px;
	padding: 5px;
	color: #fff;
	font-size: 17px;
	line-height: 20px;
	font-weight: 200;}

.navi-wrap > a:hover{
	color: rgb(255, 214, 30);
	border:1px solid rgba(255, 214, 30, 1);;}

	

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


	/*---------------*/
	/*----主視覺------*/
	/*---------------*/
	.theme-wrap{
		display: flex;	
		width: 100%;
		height: calc(100vh - 70px);
		padding: 20px;
		align-items: center;}

	.theme-wrap .video-wrap{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;}

	.theme-wrap .video-wrap video{
		display: block;
		width: 100%;
		height: 100%;
		background-size: cover;
		-o-object-fit: cover;
		object-fit: cover;}

	.theme-wrap .overlaybg{
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;		
		background: url(../images/videoBg.png) center no-repeat;
		background-size: cover;
		opacity: 1;
		animation: fadeOut-ani 3s ease forwards;}
		/*背景預設漸出動畫*/
		@keyframes fadeOut-ani{
			0%{opacity: 1;}
			100%{opacity: 0;}
		}

    /*主標題*/
	.theme-wrap .theme > h1,
	.theme-wrap .theme > h2{
		align-items: center;
		display: inline-block;
		background: none;
		color: rgba(255, 255, 255, 0);}

	.theme-wrap .theme > h1{
		display: inline-block;
		width: 388px;
		height: 93px;}

	.theme-wrap .theme > h2{
		display: inline-block;
		width: 387px;
		height: 62px;}

	.theme-wrap .theme > h1 > img,
	.theme-wrap .theme > h2 > img{
		position: absolute;
		left: 0;
		top: 0;}

	.theme-wrap .theme h1.theme-g::after{
		content: '';
		display: inline-block;
		position: absolute;
		width: 122px;
		height: 124px;
		background: url(../images/theme_ganimated.png) center no-repeat;
		background-size: contain;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);}	

	.theme-wrap .theme{		
		display: inline-block;
		width: 100%;
		max-width: 400px;
		margin: 140px auto 0;}

	.theme-wrap .theme-gift{
		position: absolute;
		left: 10%;
		bottom: 5%;
		animation: floating-ani 3s ease infinite;
		cursor: pointer;}
		/*禮物動畫*/
		@keyframes floating-ani{
			0%{transform: translateY(0px);}
			50%{transform: translateY(-10px);}
			10%{transform: translateY(0px);}
		}

	.theme-wrap .theme-tag{
		position: absolute;
		left: 10%;
		top: 5%;}

	/*overlay*/
	.overlay{
		display: inline-block;
		position: absolute;
		background: rgba(33, 33, 33, 0.32);
		mix-blend-mode: revert;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;}

	/*共用h2*/

	h2{
		font-size: 40px;
		line-height: 48px;
		padding: 0 20px;
		margin: 60px 0 30px;
		color: #df4e07;
		background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-ms-background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;}

	h2 > span::before {content: '，';}
	h2 span{
		color: #df4e07;
		background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-ms-background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;}



	/*-----------------------*/
	/*---保險星G攻略報你知-----*/
	/*------------------------*/
	.s1-wrap{
		display: block;
		width: 100%;}
	
	.s1-wrap .s1{		
		margin: 0 auto;
		max-width: 1200px;
		padding: 10px;}
	
	.stars5-wrap{
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-evenly;
		flex-wrap: wrap;}
	
	.stars5-wrap > .advantage-card{
		display: inline-block;
		width: 330px;
		min-height: 250px;
		background: url(../images/s1_bg1.png) top 0 left 0 no-repeat;
		background-size: cover;
		border: 1px solid #fff;
		border-radius: 10px;
		margin: 30px 10px;
		padding: 60px 20px 20px;
		box-shadow: 0px 4px 15px -5px rgba(00, 00, 00, 0.6);}

	.stars5-wrap > .advantage-card.card2{
		display: inline-block;
		width: 480px;
		min-height: 352px;
		background: url(../images/s1_bg2.png) top 0 left 0 no-repeat;
		background-size: cover;
		border: 1px solid #fff;
		border-radius: 10px;
		margin: 30px 10px;
		padding: 20px 20px 20px;
		box-shadow: 0px 4px 15px -5px rgba(00, 00, 00, 0.6);}

	.stars5-wrap > .advantage-card > h3{
		font-size: 28px;
		line-height: 36px;
		margin: 5px 0 10px;}

	.stars5-wrap > .advantage-card > h3 > span{
		display: block;
		color: #de4e07;}

	.stars5-wrap > .advantage-card > p{
		font-size: 17px;
		font-weight: 400;
		line-height: 25px;}

	.stars5-wrap > .advantage-card:nth-of-type(2) > p{text-align: left;}
	.stars5-wrap > .advantage-card > p > span{color: #de4e07;}

	.advantage-tag1, .advantage-tag2, .advantage-tag3,
	.advantage-tag4, .advantage-tag5{
		position: absolute;
		left: -17px;
		top: -15px;
		pointer-events: none;}

	.advantage-card::after{
		content: '';
		position: absolute;
		display: inline-block;
		top: 10px;
		right: 10px;
		width: 48px;
		height: 46px;
		background: url(../images/deco-s1-star1.png) center no-repeat;
		background-size: contain;}

    /*什麼是自動平衡*/
	a.btn-autoBalance{
		position: absolute;
		display: inline-block;
		width: 133px;
		height: 133px;
		background: url(../images/btn-autoBalance.png) center no-repeat;
		background-size: contain;
		cursor: pointer;
		top: -15px;
		right: -20px;
		z-index: 1;
		animation: floating-ani 2s linear infinite;}

	/*標的表格*/
	.stars5-wrap > .advantage-card.card2 > table{
		padding: 5px 10px;
		width: 100%;
		min-height: 225px;
		background: rgba(255, 255, 255, 0.46);
		border-radius: 5px;	}

	.stars5-wrap > .advantage-card.card2 > table tr:nth-of-type(1){
		min-height: 120px;}	

	.stars5-wrap > .advantage-card.card2 > table tr{
		display: block;}	

	.stars5-wrap > .advantage-card.card2 > table tr:nth-of-type(1){		
		border-bottom: 1px solid #333333;}

	.stars5-wrap > .advantage-card.card2 > table tr th {
		font-weight: 500;
	    white-space: nowrap;}

	.stars5-wrap > .advantage-card.card2 > table ol,
	.stars5-wrap > .advantage-card.card2 > table ul {
		margin-left: 40px;
		padding: 5px;}

	.stars5-wrap > .advantage-card.card2 > table ol li{
		color: #6d230c;
		font-weight: 600;
		font-size: 17px;
		text-align: left;}

	.stars5-wrap > .advantage-card.card2 > table ul li{
		font-size: 15px;
		list-style:disc;
		text-align: left;}

	.stars5-wrap > .advantage-card:active,
	.stars5-wrap > .advantage-card:hover{transform: translateY(-20px);}



	/*-----------------------*/
	/*---未來做資產規劃煩腦-----*/
	/*------------------------*/
	.s2-wrap{
		display: block;
		width: 100%;}

	.s2-wrap > h2{ margin-bottom: 15px;}	
	.s2-wrap > p{
		padding: 0 20px;
		font-size: 20px;
		font-weight: 300;
		margin-bottom:40px ;}

	.s2-wrap > p > span{color: #de4e07;}
	.s2-wrap .s2{		
		margin: 0 auto;		
		padding: 50px 10px 50px 40%;
		background:url(../images/s2-bg.png) center no-repeat;
		background-size: cover;}
	
	.s2-wrap .s2 .wwh-wrap{
		margin: 0 auto;
		width: 100%;
		max-width: 1200px;
		text-align: center;
		display: flex;
		flex-direction: column;}

	.s2-wrap .s2 .wwh-wrap > div{
		width: 90%;
		margin: 0 auto;
		padding: 40px 40px 40px 100px;
		margin-bottom: 20px;
		background: #fff;}
	.s2-wrap .s2 .wwh-wrap > div:last-child{margin-bottom: initial;}
	.s2-wrap .s2 .wwh-wrap > div:nth-of-type(1){animation-delay: 0.1s;}
	.s2-wrap .s2 .wwh-wrap > div:nth-of-type(2){animation-delay: 0.2s;}
	.s2-wrap .s2 .wwh-wrap > div:nth-of-type(3){animation-delay: 0.3s;}


	.s2-wrap .s2 .wwh-wrap > div:hover,
	.s2-wrap .s2 .wwh-wrap > div:active{transform: translate(-5px,-10px);}

	.s2-wrap .s2 .wwh-wrap > div > span{
		position: absolute;
		display: inline-block;
		left: 30px;
		top: 40%;
		transform: translateY(-50%);
		background: #de4e07;
		width: 48px;
		height: 48px;
		line-height: 48px;
		border-radius: 50%;
		color: #fff;
		font-size: 30px;
		font-weight: 600;}

	.s2-wrap .s2 .wwh-wrap > div > span::after{
		content: 'WHEN';
		position: absolute;
		color: #de4e07;
		font-size: 15px;
		left: 50%;
		bottom: -40px;
		transform: translateX(-50%);}

	.s2-wrap .s2 .wwh-wrap > div:nth-of-type(2) > span::after{content: 'WHICH';}
	.s2-wrap .s2 .wwh-wrap > div:nth-of-type(3) > span::after{content: 'HOW';}
		
	.s2-wrap .s2 .wwh-wrap > div > h3{
		text-align: left;
		color: #333;
		font-size: 30px;
		line-height: 40px;
		font-weight: 300;}

	.s2-wrap .s2 .wwh-wrap > div > h4{
		text-align: left;
		padding-left: 20px;
		color: #de4e07;
		font-size: 30px;
		font-weight: 600;}

	.s2-wrap .s2 .wwh-wrap > div > h4::before{
		position: relative;
		content: '>>';
		font-size: 18px;
		font-weight: 600;
		margin-right: 5px;
		bottom: 5px;
		animation: harrow-ani 2s ease infinite;}
		/*h4arrow動畫*/
		@keyframes harrow-ani{
			0%{opacity: 0; left: -5px;}
			50%{opacity: 1; left: 0px;}
			100%{opacity: 0; left: 5px;}
		}

	.s2-wrap .s2 .wwh-wrap > div > p{
		text-align: left;
		color: #333333;
		font-size: 20px;
		padding-left: 50px;
		font-weight: 600;}

	.s2-wrap .s2 .wwh-wrap > div:hover > p{
		animation: shineWords-ani 1.5s ease-in-out infinite;}
		@keyframes shineWords-ani{
			0%{
				color: #df4e07;}
			50%{
				color: #5e2303;}
			100%{
				color: #ff740d;}
		}



	/*-------------------*/
	/*---適合怎樣的族群---*/
	/*-------------------*/
	.s3-wrap{
		display: block;
		width: 100%;
		margin-bottom: 80px;}

	.s3-wrap > h2{ margin-bottom: 15px;}	
	.s3-wrap > p{
		padding: 0 20px;
		font-size: 20px;
		font-weight: 300;
		margin-bottom:50px ;}

	.s3-wrap .s3 {
		display: flex;
		max-width: 1200px;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 auto;}

	.s3-wrap .s3 > div{
		flex: 1;
		margin: 20px auto;}
	.s3-wrap .s3 > div:nth-of-type(1){animation-delay: 0.2s;}
	.s3-wrap .s3 > div:nth-of-type(2){animation-delay: 0.4s;}
	.s3-wrap .s3 > div:nth-of-type(3){animation-delay: 0.6s;}

	.s3-wrap .s3 > div > h3{
		display: block;
		width: auto;
		max-width: 180px;
		margin:  20px auto 15px;
		color: #df4e07;
		text-align: left;
		font-size: 25px;
		padding: 0 10px;
		border-left: 2px solid #df4e07;}

	.s3-wrap .s3 > div > p{		
		font-size: 20px;
		font-weight: 300;}

	.s3-wrap > div:nth-of-type(2) {
		background: #fff1ea;
		margin: 40px 0;
		padding: 30px 2%;}

	.s3-wrap > div > h3{
		font-size: 26px;
		margin: 0px 0 20px;}

	.s3-wrap > div > h3 > span{color: #df4e07;}
	.s3-wrap > div:nth-of-type(2) > p {
		font-size: 20px;
		font-weight: 300;}

	a.btn-action3{
		display: inline-block;
		position: relative;
		min-width: 300px;
		height: 60px;
		line-height: 30px;
		padding: 10px;
		font-size: 30px;
		font-weight: 600;
		color: #fff;
		background: #df4e07;
		border: 2px solid #de4e07;
		border-radius: 50px;}

	a.btn-action3:active,
	a.btn-action3:hover{
		color: #df4e07;
		background: rgb(238, 255, 0);
		transform: translateY(-5px);}

	a.btn-action3::after{
		content: '▼';
		position: absolute;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
		color: #df4e07;
		background: -webkit-linear-gradient(-50deg, #df950b 10%, #ffe81c 50%, #c7ba06 100%);
		-ms-background: -webkit-linear-gradient(-50deg, #df950b 10%, #ffe81c 50%, #c7ba06 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: arrow-ani 2s ease infinite;}
		/*箭頭動畫*/
		@keyframes arrow-ani{
			0%{transform: translate(-50%, -5px);}
			50%{transform: translate(-50%, 0px);}
			100%{transform: translate(-50%, -5px);}
		}
	

	/*---------------*/
	/*-歡慶上市加碼抽-*/
	/*---------------*/
	.s4-wrap{
		padding: 40px 20px 80px;
		background: #f1f1f1;}

	.s4-wrap .s4{
		max-width: 1200px;
		margin: 0 auto;}
			
	.s4-wrap .s4 > h2 {margin:20px 0 10px;}
	.s4-wrap .s4 > h2 > span{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 45px;
		display: block;
		color: #df4e07;
		line-height: 48px;
		background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-ms-background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;}
		
	/*'，'不顯示*/
	.s4-wrap .s4 > h2 > span::before{content:'';}	
	/*"-"樣示*/
	.s4-wrap .s4 > h2 > span > span:nth-of-type(3){
		font-size: 40px;
		font-weight: 600;}
	/*時間"/"樣示*/
	.s4-wrap .s4 > h2 > span > span{
		font-size: 20px;
		padding: 0 5px;
		font-weight: 300;}

	.s4-wrap .s4 > p{
		font-size: 20px;
		font-weight: 300;}

	/*活動1-3獎品*/
	.s4Gift-wrap{
		align-items: center;
		padding: 20px;}

	.s4Gift-wrap > div > p{
		padding: 5px;
		font-size: 20px;
		font-weight: 300;
		line-height: 34px;
		letter-spacing: 1px;}

	.s4Gift-wrap > div > p > span{
		color: #df4e07;
		font-weight: 600;}

	.s4Gift-wrap > div{
		display: inline-block;
		align-items: center;
		vertical-align: middle;
		padding: 80px 30px 40px;
		margin: 40px 20px 100px;
		width: 330px;
		height: 330px;
		border-radius: 50%;
		background: #fff;}

	.deco-ribbon{
		display: inline-block;
		position: absolute;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
		width: 94px;
		height: 76px;
		background: url(../images/deco-ribbon.png) center no-repeat;
		background-size: contain;}

	/*gift圖*/
	.deco-gift1{
		display: inline-block;
		position: absolute;
		bottom: -140px;
		left: 50%;
		transform: translateX(-50%);
		width: 295px;
		height:207px;
		background: url(../images/gift_px.png) center no-repeat;
		background-size: contain;}

	.deco-gift2-1{
		display: inline-block;
		position: absolute;
		bottom: -190px;
		left: -50px;
		width: 193px;
		height:277px;
		background: url(../images/gift_DeLonghi.png) center no-repeat;
		background-size: contain;}

	.deco-gift2-2{
		display: inline-block;
		position: absolute;
		bottom: -145px;
		right: -70px;
		width: 322px;
		height: 225px;
		background: url(../images/gift_BALMUDA.png) center no-repeat;
		background-size: contain;}

	.deco-gift3{
		display: inline-block;
		position: absolute;
		bottom: -150px;
		left: 50%;
		transform: translateX(-50%);
		width: 285px;
		height: 247px;
		background: url(../images/gift_Essenza.png) center no-repeat;
		background-size: contain;}

	/*紙花*/
	.s4-wrap ul{
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		overflow: hidden;
		pointer-events: none;}

	.s4-wrap ul li{
		display: inline-block;
		background: #de4e07;
		width: 10px;
		height: 10px;
		animation: falling-ani 10s linear infinite ;}
		/*紙花動畫*/
		@keyframes falling-ani{
			0%{transform: translateY(-100px) rotate(0);}
			50%{transform: translateY(450px) rotate(-360deg);}
			100%{transform: translateY(900px) rotate(-720deg);}
		}

	.s4-wrap ul li:nth-of-type(even){background: #ffa509;}
	.s4-wrap ul li:nth-of-type(1){animation-duration: 10s;}
	.s4-wrap ul li:nth-of-type(2){animation-duration: 8.2s;}
	.s4-wrap ul li:nth-of-type(3){animation-duration: 6.6s;}
	.s4-wrap ul li:nth-of-type(4){animation-duration: 9s;}
	.s4-wrap ul li:nth-of-type(5){animation-duration: 7.5s;}
	.s4-wrap ul li:nth-of-type(6){animation-duration: 14s;}
	.s4-wrap ul li:nth-of-type(7){animation-duration: 6s;}
	.s4-wrap ul li:nth-of-type(8){animation-duration: 5.5s;}
	.s4-wrap ul li:nth-of-type(9){animation-duration: 4s;}
	.s4-wrap ul li:nth-of-type(10){animation-duration: 8s;}
	.s4-wrap ul li:nth-of-type(11){animation-duration: 11s;}

	.deco-gift1:hover, .deco-gift3:hover{
		animation: shaking-ani1 2s linear infinite;}
		/*贈品動話*/
		@keyframes shaking-ani1{
			0%{transform: translateX(-50%) rotate(0deg);}
			10%{transform: translateX(-50%) rotate(5deg);}
			20%{transform: translateX(-50%) rotate(0deg);}
			30%{transform: translateX(-50%) rotate(5deg);}
			40%{transform: translateX(-50%) rotate(0deg);}
			100%{transform: translateX(-50%) rotate(0deg);}
		}

	.deco-gift2-1:hover, .deco-gift2-2:hover{
		animation: shaking-ani2 2s linear infinite;}
		/*贈品動話*/
		@keyframes shaking-ani2{
			0%{transform: rotate(0deg);}
			10%{transform: rotate(5deg);}
			20%{transform: rotate(0deg);}
			30%{transform: rotate(5deg);}
			40%{transform: rotate(0deg);}
			100%{transform: rotate(0deg);}
		}

	/*---------------*/
	/*--3分鐘了解影片--*/
	/*---------------*/
	
	.s6-wrap{
		padding: 40px 20px 10px;}
	.s6-wrap > h2 > span{display: block;}
	.s6-wrap > h2 > span::before{content: '';}
	.s6-wrap .s6{
		display: inline-block;
		width: 100%;
		max-width: 1200px;
		height: 540px;		
		margin: 0 auto;}

	.s6-wrap .s6 iframe{
		border: 2px solid #de4e07;
		display: inline-block;
		width: 90%;
		height: 100%;}


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

	.rules-title > h2{
		display: inline-block;
		margin: initial;
		cursor: pointer;}

	.rules-title > h2::after{
		display: inline-block;
		content: '▼';
		right: 0;
		vertical-align: middle;
		margin: 0px 5px;
		padding-bottom: 5px;
		font-size: 30px;
		color: #df4e07;
		background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-ms-background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		transition: 0.5s;}

	.rules-title span{
		display: block;
		width: 100%;
		max-width: 1200px;
		height: 5px;
		margin: 20px auto;
		background: #de4e07;}

	.rules{
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 2%;

		height: 0;
		overflow: hidden;
		padding: 0;}

	.rules ol {padding-left: 20px;}
	.rules > ol > li{
		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;}
		
	.rules ol li ul{
		background: #efefef;
		padding: 10px;
		padding-left: 30px;}

	.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;
		margin-bottom: 0;
		font-size: 16px;
		font-weight: 600;}

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

	#rules-switch:checked ~ .rules-title span::before{
		transform: translate(-50% , -50%) rotate(180deg);}

	#rules-switch:checked ~ .rules-title h2::after{
		transform: scaleY(-1);}


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

	.rules > ol > li > ul {text-align: left;}
	.rules > ol > li > h3{
		display: inline-block;
		padding: 2px 5px;
		border: 1px solid #333; 
		width: auto;}

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

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

	.btnTop-Wrap{
		display: inline-block;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 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: rgb(255, 208, 0);
		background: linear-gradient(130deg, rgb(190, 156, 4) 9%, rgb(207, 125, 17) 40%, rgba(212,157,12,1) 73%);
		line-height: 50px;
		color: #ffffff;
		text-shadow: 1px 1px 5px rgba(59, 22, 22, 0.8);
		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: rgb(177, 68, 25);
		text-shadow: 1px 1px 5px rgba(59, 22, 22, 0);
		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;}
		#section2{top: -40px;}
		#section3{top: -40px;}
		#section4{top: -40px;}

	/*---------------*/
	/*----我要試算----*/
	/*---------------*/

	.btn-action1, .btn-action2{
		display: inline-block;
		width: 104px;
		height: 104px;
		left: 50%;
		transform: translateX(-50%);
		background: url(../images/btn-atction1.png) center no-repeat;
		background-size: contain;}

	.btn-action2{
		background: url(../images/btn-atction2.png) center no-repeat;
		background-size: contain;}

	.btn-action1:hover,
	.btn-action2:hover,
	.btn-action2:active,
	.btn-action2:active{transform: translate(-50%, -5px);}


	/*---------------*/
	/*--自動平衡PopUp-*/
	/*---------------*/

	.popUp-wrap{
		position: fixed;
		display: inline-block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.8);
		z-index: 999;
		opacity: 0;
		pointer-events: none;}

	.popUp-wrap .popUp{
		display: inline-block;
		position: absolute;
		padding: 40px;
		background: #fff;
		box-shadow: 0 10px 35px -10px rgba(33, 33, 33, 0.32);
		max-width: 80%;
		width: 80%;
		max-width: 700px;
		height: 80%;
		border: 1px solid #de4e07;
		border-radius: 20px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);}

	.popUp-wrap .popUp > div{
		width: 100%;
		height: calc(100% - 50px);
		overflow-y: auto;}

	/*scrollBar樣式*/
	/* width */
	::-webkit-scrollbar {width: 5px;}		
	/* Track */
	::-webkit-scrollbar-track {background: rgba(00, 00, 00, 0);}
	/* Handle */
	::-webkit-scrollbar-thumb {background: #b70f07;}		
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {background: #ffa509;}
	/*scrollBar樣式結束*/

	.popUp-wrap .popUp h2{
		margin: 10px 0;}
	.popUp-wrap .popUp h2 span{
		background: #b70f07;
		-ms-background:initial;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;}
	.popUp-wrap .popUp h2 span::before{content: '';}

	/*自動平衡特色*/
	.feature-1{
		background: #fff1ea;
		margin: 20px 0;
		padding: 20px;}

	.popUp .feature-1 > h3{
		text-align: left;
		font-size: 24px;
		padding-left: initial;
		color: #de4e07;}

	.feature-1 p{
		margin: 5px 0;
		text-align: left;
		font-size: 17px;}

	/*什麼是自動平衡？*/
	.feature-2{
		margin: 20px 0;}

	.popUp h3{
		padding-left: 20px;
		text-align: left;
		font-size: 24px;
		color: #de4e07;}

	.popUp p{
		margin: 10px 0;
		text-align: left;
		font-size: 17px;}

	span.note{
		margin: 10px;
		display: block;
		color: #6d230c;
		text-align: left;
		font-size: 15px;}

	span.blue{
		color: #0582a8;
		font-weight: 500;}
	span.red{
		color: #fd3e34;
		font-weight: 500;}

	.feature-2 .tag{
		position:absolute;
		display: inline-block;
		left: 20px;
		top: -5px;
		height: auto;
		padding: 5px;
		font-size: 18px;
		font-weight: 500;
		background: #de4e07;
		color: #ffffff;}

	.feature-2 > div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		background: #efefef;
		border-top: 1px solid #ff740d;
		padding: 40px 20px 20px;
		margin-bottom: 40px;}

	.feature-2 > div > div{flex: 1;}

	.feature-2 > div > div > span{
		 display: inline-block;
		 color: #db491d;
		 padding: 5px;
		 margin: 5px;
		 border: 1px solid #db491d;}

	.feature-2 > div > div > span:nth-of-type(1){
		border: 1px solid #cc5e10;
		border-left: 10px solid #cc5e10;
		color: #cc5e10;}

	.feature-2 > div > div > span:nth-of-type(2){
		border: 1px solid #ff9800;
		border-left: 10px solid #ff9800;
		color: #ff9800;}

	.feature-2 > div > div > span:nth-of-type(3){
		border: 1px solid #f8700c;
		border-left: 10px solid #f8700c;
		color: #f8700c;}

	.feature-2 > div > div > span > span{
		 color: #db491d;
		 font-size: 12px;
		 margin: 0 5px;
		 font-weight: 100;}

	/*PieChart*/
	.pieChart{
		display: inline-block;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background: conic-gradient(#cc5e10 0deg 72deg, #ff9800 72deg 180deg, #f8700c 180deg 360deg);
		margin-top: 20px;}

	.pieChart::after{
		content: '自動平衡投資標的之配置比例';
		display: inline-block;
		position: absolute;
		font-size: 14px;
		color: #5e2303;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
		padding: 5px;
		white-space: nowrap;}

	.pieChart.ver2::after{content: '自動平衡投資標的之帳戶比例';}

	.pieChart > span{
		position: absolute;
		color: #fff;
		font-weight: 500;}

	.pieChart > span > span{
		display: block;
		color: #db491d;
		background: #fff;
		text-align: center;
		width: 20px;
		height: 20px;line-height: 20px;
		border-radius: 50%;
		font-size: 14px;
		font-weight: 500;}

	.pieChart > span:nth-of-type(1){
		right: 30px;
		top: 10px;}
	.pieChart > span:nth-of-type(2){
		right: 25px;
		bottom: 20px;}
	.pieChart > span:nth-of-type(3){
		left: 20px;
		top: 50px;}

	/*自動平衡日*/	
	.pieChart.ver2{
		background: conic-gradient(#cc5e10 0deg 36deg, #ff9800 36deg 252deg, #f8700c 252deg 360deg);}

	.pieChart.ver2 > span:nth-of-type(1){
		right: 40px;
		top: 10px;}
	.pieChart.ver2 > span:nth-of-type(2){
		right: 40px;
		bottom: 20px;}
	.pieChart.ver2 > span:nth-of-type(3){
		left: 30px;
		top: 30px;}

	/*table*/
	
	.feature-2 > div > div > table{
		width: 100%;
		background: #fff;}

	.feature-2 > div > div > table tr th{
		color: #de4e07;
		width: 21%;
		padding: 5px;}
	.feature-2 > div > div > table tr th:nth-of-type(1){width: 15%;}

	.feature-2 > div > div > table thead tr th{
		font-weight: 400;
		color: #333333;
		background-color: #f7c09a;}

	.feature-2 > div > div > table tbody tr td{
		font-weight: 400;
		color: #de4e07;}

	.feature-2 > div > div > table tbody tr:nth-of-type(even){background-color: #ffeee1;}
	.feature-2 > div > div > table tbody tr:nth-of-type(odd){background-color: #f7e1d3;}
	
	td.down::after{
		position: relative;
		content: '▼';
		font-size: 12px;
		margin-left: 5px;
		bottom: 2px;
		color: #fd3e34;}

	td.up::after{
		position: relative;
		content: '▲';
		font-size: 12px;
		margin-left: 5px;
		bottom: 2px;
		color: #099b83;}

	/*--pieChart比較--*/
	.feature-2 > div.flex-column{
		flex-direction: column;}

	.feature-2 > div.flex-column > div:nth-of-type(2){
		padding: 20px;
		display: flex;
		justify-content: space-around;
		margin-top: 20px;}		

	div.flex-column > div > .pieChart.ver2 > span:nth-of-type(1)::after{
		content: '▼';
		position: absolute;
		color: #ff0000;
		font-size: 18px;
		font-weight: 600;
		animation:  down-ani 2.5s ease infinite;}
		/*下跌動畫*/
		@keyframes down-ani{
			0%{transform: translateY(0);
				opacity: 0;}
			60%{transform: translateY(-20px);
				opacity: 0;}
			90%{transform: translateY(-5px);
				opacity: 1;}
			100%{transform: translateY(0);
				opacity: 0;}
			}

	div.flex-column > div > .pieChart.ver2 > span:nth-of-type(2)::after{	
		content: '▲';
		position: absolute;
		color: #10ddbb;
		font-size: 18px;
		font-weight: 600;
		right: -20px;
		top: 5px;
		animation: up-ani 2.5s ease infinite;}
		/*下跌動畫*/
		@keyframes up-ani{
			0%{transform: translateY(0);
				opacity: 0;}
			60%{transform: translateY(20px);
				opacity: 0;}
			90%{transform: translateY(5px);
				opacity: 1;}
			100%{transform: translateY(0);
				opacity: 0;}
			}

	div.flex-column > div > .pieChart.ver2 > span:nth-of-type(3)::after{
		content: '▼';
		position: absolute;
		color: #ff0000;
		font-size: 18px;
		font-weight: 600;
		animation:  down-ani 2.5s ease infinite;}
	
	div.deco-arrow{
		display: inline-block;
		position: absolute;
		font-size: 20px;
		color: #de4e07;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(90deg);
		animation: decoArrow-ani 3s ease-in-out infinite ;}
		/*箭頭動畫*/
		@keyframes decoArrow-ani{
			0%{transform: translate( 0%, -50%) rotate(90deg);}
			50%{transform: translate( -15px, -50%) rotate(90deg);}
			100%{transform: translate( 0%, -50%) rotate(90deg);}
		}

	.fivepercent{
		position: absolute;
		display: inline-block;
		color: #fff;
		right: -65px;
		top: 5px;
		font-size: 20px;
		font-weight: 600;
		padding: 5px 10px;
		border-radius: 20px;
		background: #ff0000;
		box-shadow: 0 3px 18px 0px rgba(228, 31, 31, 0.8);
		animation: shine-ani 2s ease infinite;}
		/*閃爍動畫*/
		@keyframes shine-ani{
			0%{box-shadow: 0 3px 10px 0px rgba(228, 31, 31, 0.8);
				transform: translateY(0);}
			50%{box-shadow: 0 3px 10px 0px rgba(228, 31, 31, 0.2);
				transform: translateY(-5px);}
			100%{box-shadow: 0 3px 10px 0px rgba(228, 31, 31, 0.8);
				transform: translateY(0);}
			}

	.fivepercent::after{
		color: #ff0000;
		content: '▼';
		position: absolute;
		bottom: -4px;
		left: -2px;
		font-size: 14px;
		transform: rotate(45deg);}


	/*有無自動平衡比較*/
	.feature-3{
		display: flex;
		margin: 20px 0;}

	.feature-3 .tag{
		position:absolute;
		display: inline-block;
		left: 20px;
		top: -5px;
		height: auto;
		padding: 5px;
		font-size: 18px;
		font-weight: 500;
		background: #de4e07;
		color: #ffffff;}

	.feature-3 .tag.unbalance{background: #686767;}

	.feature-3 > div{
		flex: 1;
		flex-wrap: wrap;
		justify-content: space-evenly;
		background: #efefef;
		border-top: 1px solid #ff740d;
		padding: 40px 20px 20px;}

	.feature-3 > div:nth-of-type(1){margin-right: 5px;}
	.feature-3 > div:nth-of-type(2){margin-left: 5px;}
	.feature-3 > div > div > div:nth-of-type(1){min-height: 170px;}

	.feature-3 > div:nth-of-type(2)  > div > div:nth-of-type(1) > P{
		margin-left: 30px;}
	.feature-3 > div:nth-of-type(2)  > div > div:nth-of-type(1) > P::before{
		content: '！';
		position: absolute;
		top: 5px;
		left: -25px;
		display: inline-block;
		text-align: center;
		color: #fff;
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 50%;
		background: #ff0000;}

	/*無自動平衡*/	
	.pieChart.ver3{
		background: conic-gradient(#8e8a88 0deg 36deg, #6b6762 36deg 54deg, #c1bdbb 54deg 360deg);}

	.pieChart.ver3 > span:nth-of-type(1){
		right: 40px;
		top: 10px;}
	.pieChart.ver3 > span:nth-of-type(2){
		right: 17px;
		top: 24px;}
	.pieChart.ver3 > span:nth-of-type(3){
		left: 40px;
		top: 50%;}	

	/*關閉鈕*/
	.btn-close{
		position: absolute;
		display: inline-block;
		width: 40px;
		height: 40px;
		top: 3%;
		right: 3%;
		cursor: pointer;}

	.btn-close > span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
		width: 2px;
		height: 100%;
		background: #de4e07;}
	
	.btn-close > span:nth-of-type(2){transform: translate(-50%, -50%) rotate(-45deg);}