@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;
	font-size: 1em;
	transition: 0.8s;
	color: #1d1d1f;
	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:#ff1e00;
	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 4%;
	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}

body{background: #fff7cb;}

/*-- 主內容區 --*/
/*======START=======*/

.theme-bg{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 0;
	width: 300%;
	min-height: 90%;
	transform: translateX(-50%);
	background: url(../images/theme-bg.png) top center no-repeat;
	background-size: contain;}

.theme-bg::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/Aurora.png) center no-repeat;
	background-size: contain;
	animation: aurora-ani 3s ease-out infinite;}
	@keyframes aurora-ani{
		0%{opacity: 0.2;
			transform: scale(1);}
		50%{opacity: 1;
			transform: scale(0.99);}
		100%{opacity: 0.2;
			transform: scale(1);}
	}


.container{
	display: inline-block;
	width: 100%;
	overflow: hidden;}

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px 2%;
	margin:  0 auto;}

.theme{
	display: inline-block;
	width: 100%;
	max-width: 800px;}

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

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

.theme-couple{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/theme-couple.png) center no-repeat;
	background-size: contain;}

.theme-momey{
	display: inline-block;
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/theme-money.png) center no-repeat;
	background-size: contain;}

.deco-6years{
	display: inline-block;
	position: absolute;
	top: 63%;
    left: 7%;
	transform: translate(-50%, -50%);
	width: 41.75%;
	max-width: 334px;
	height: 51.38%;
	max-height: 334px;
	background: url(../images/deco-6years.png) center no-repeat;
	background-size: contain;}

.deco-aroundtheworld{
	display: inline-block;
	position: absolute;
	top: 40%;
    right: -20%;
	width: 50%;
	max-width: 509px;
	height: 51.38%;
	max-height: 132px;
	background: url(../images/theme-decotitle.png) center no-repeat;
	background-size: contain;}


.deco-fallinCoins{
	position: absolute;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50%);
	background: url(../images/fallingCoins.png) center no-repeat;
	background-size: contain;
	pointer-events: none;
	animation: fallincoins-ani 2s ease-in-out infinite;}
	@keyframes fallincoins-ani{
		0%{transform: translate( -50%, -50%);}
		50%{transform: translate( -50%, -51%);}
		100%{transform: translate( -50%, -50%);}
	}

	.deco-fallinCoins > span{
		display: inline-block;
		width: 6%;
		max-width: 50px;
		height: 13.75%;
		max-height: 50px;
		animation: fallinSinglecoin-ani 5s ease-in-out infinite;}
		@keyframes fallinSinglecoin-ani{
			0%{ top: -150%; transform: rotate(0);}
			99%{ top: 150%;	
				opacity: 1;}
			100%{opacity: 0;transform: rotate(360deg);}
		}
	

	.deco-fallinCoins > span:nth-of-type(1){
		background: url(../images/deco-coins1.png) center no-repeat;
		background-size: contain;
		animation-duration: 5.6s;}

	.deco-fallinCoins > span:nth-of-type(2){
		background: url(../images/deco-coins2.png) center no-repeat;
		background-size: contain;
		animation-duration: 4s;}

	.deco-fallinCoins > span:nth-of-type(3){
		background: url(../images/deco-coins3.png) center no-repeat;
		background-size: contain;
		animation-duration: 5.2s;}

	.deco-fallinCoins > span:nth-of-type(4){
		background: url(../images/deco-coins1.png) center no-repeat;
		background-size: contain;
		animation-duration: 7s;}

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


/*-- 推薦案例 --*/
.case-wrap{
	display: inline-block;
	width: 100%;
	padding: 10px 2%;}

.case-wrap .case{
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin:  0 auto;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;}

.case-wrap .case > span,
.case-wrap .case > a{
	display: inline-block;
	flex: 1;
	max-width: 320px;
	margin: 1%;}

.case-wrap .case > a:nth-of-type(2){display: none;}

.case-wrap .case > span > img,
.case-wrap .case > a > img{
	display: inline-block;
	width: 100%;}

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

/* 商品介紹*/
.product-wrap{
	display: inline-block;
	width: 100%;
	padding: 40px 2% 20px;}

.product-wrap .product{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	background: #fff;
	padding: 10px 2%}

.product-wrap .product::before{
	 content: '';
	 position: absolute;
	 display: inline-block;
	 width: 35%;
	 max-width: 180px;
	 height: 60px;
	 background: url(../images/tag-ttile.png) center no-repeat;
	 background-size: contain;
	 left: 5%;
	 top: -10px;}

.product > h2{
	font-size: 2.4em;
	color: #0e5750;
	font-weight: 900;
	padding: 50px 10px 20px;}

.product > h2 > .w-break{ display: none;}

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

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

#tablepc{max-width: 1136px;}
#tablemb{
	max-width: 609px;
	display: none;}

.note{
	display: inline-block;
	width: 100%;
	padding: 20px;
	padding-left: 45px;}

.note li{
	font-size: 16px;
	text-align: left;}
.note li::before{
	content: "註";
	display: flex;
	align-items: center;
	position: absolute;
	left: -35px;
}

.note a{
	color: #0000ff;
	text-decoration: underline;}


/*商品特色*/
.advs-wrap{
	display: inline-block;
	width: 100%;
	padding: 10px 2%;}

.advs-wrap .advs{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	justify-content: space-evenly;}

.advs > span{
	display: inline-block;
	flex: 1;
	flex-wrap: wrap;
	max-width: 385px;
	margin: 1%;}

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

/*--CTA--*/
.cta-wrap{
	display: inline-block;
	width: 100%;
	padding: 10px 2%;}

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

.cta-wrap .cta > a{
	display: inline-block;
	flex: 1;
	max-width: 320px;
	margin: 1%;}

.cta-wrap .cta > a > img{
	display: inline-block;
	width: 100%;}

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


/*線上專業保險顧問特色*/
.salesAdvance-wrap{
	display: inline-block;
	width: 100%;
	padding: 1% 2%;
	border-radius: 20px 20px 60px 60px;}

.salesAdvance{
	display: inline-block;
	width: 100%;
	max-width: 1000px;
	padding: 2%;}

.salesAdvance h2{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin:  0 auto;
	max-width: 734px;
	min-height: 119px;
	font-size: 10px;
	color: transparent;
	margin-bottom: 20px;}

.salesAdvance h2 > span{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/salesTitle.png) center no-repeat;
	background-size: contain;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);}

.salesAdvance h3 > span.w-break::after{	content: '，';}

.salseAdv{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;}

.salseAdv span{
	display: inline-block;
	flex: 1;
	max-width: 250px;
	margin: 1%;}

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

.salseAdv span:active,
.salseAdv span:hover{transform: translateY(-20px);}
.salseAdv span:nth-of-type(2){animation-delay: 0.2s;}
.salseAdv span:nth-of-type(3){animation-delay: 0.4s;}

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



/*-----------------*/
/*----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;}

.btnTop{
	position: relative;
	display: inline-block;
	left: 40%;
	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);} 

.btn-right{
	display: inline-block;
	position: absolute;
	width: 150px;
	left: 50%;
	top: -210px;
	transform: translateX(-50%);}

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

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