@charset "utf-8";
/* CSS Document */
/*google字型*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*{	/*font-family:'Noto Sans TC', sans-serif, '微軟正黑體', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";*/
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	font-family: '微軟正黑體';
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #333333;
	outline: none;}

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.3) url(../images/Infinity.svg) center no-repeat;
	background-size: auto;
	z-index: 2;
	top: 0;
	left: 0;}


/*---- Header：logo----*/

header{
	background-color: #007c7c;
	position: sticky;
	z-index: 1;
	top: 0;}

.header-wrap{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;}

.logo-wrap{
	flex: 1;
	position: relative;
	text-align: left;
	height: 70px;
	line-height: 70px;
	margin: 0 auto;}

 .logo{
	display:inline-block;
	vertical-align: middle;
	width: 180px;
	height: 70px;
	background: url(../images/logo.svg) center no-repeat;
	background-size: 85%;}

/*----Header：網路投保鈕----*/	
.ezbao-title{
	position: relative;
	vertical-align: middle;
    height: 70px;
    font-size: 1.5em;
    color: #fff;
    font-weight: 600;
    line-height: 60px;}

.ezbao-title::before{
	content: '';
	display: inline-block;
	vertical-align: middle;
    position: relative;
    width: 2px;
    height: 32px;
    background-color: #fff;
    vertical-align: text-bottom;
    margin: 0 15px 0 5px;}

/*----Header：選單----*/	
.menu-wrap{
	width: 400px;
	position: relative;
	background-color: #007c7c;
	top: 0;
	right: 0;
    width: 500px;
    height: 70px;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px 0;
    line-height: 50px;    
    font-weight: 600;
	text-align: center;	}
	
.menu-wrap span, .ezbao-title{color: #fff; cursor: pointer;}
.menu-wrap span:hover, .ezbao-title:hover{color:#fcd72c}
.menu-wrap a{flex: 1; vertical-align: middle;}


/*社群分享鈕*/
.line-share{
	display: inline-block;
	vertical-align: middle;
	width: 69px;
	height: 31px;
	background: url(../images/line_share.png) center no-repeat;
	background-size: auto;}

.fb-share{
	display: inline-block;
	vertical-align: middle;
	width: 69px;
	height: 31px;
	background: url(../images/fb_share.png) center no-repeat;
	background-size: auto;}


/*----主內容區----*/
.container{
	width: 100%;
	background: #fff;
	position: relative;
	text-align:center;
	margin: 0 auto;
	overflow: hidden;}
	
/*----1.主視覺----*/

.theme-wrap{
	width: 100%;
	transition: 0.5s;}

.theme-deco{
	position: absolute;
	top: 0;
	right: -20%;
	display: inline-block;
	width: 822px;
	height: 604px;
	background: url(../images/img_theme.png) center no-repeat;
	background-size: contain;
	transition: 0.5s;
	animation-delay: 1s;
	animation-duration: 1.5s;}

.theme-content{
	margin: 0 auto;
	text-align: left;
	padding: 20px;
	min-height: 650px;}

.title_section1{
	position: absolute;
    top: 5%;
    display: inline-block;
    width: 50%;
	height: 109px;
	animation-delay: 1s;}

.title_section1 h1{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;}


/*----主視覺描述----*/

/*背景*/
.theme-subDescription{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50%;
	transform: translateY(-50%);
	background: #e7e7e7;}

/*描述*/
.subDescription{
	position: absolute;
	width: 50%;
	top: 50%;
	transform: translateY(-50%);}

.subDescription p{
	color: #333333;
	font-size: 1.2em;
	line-height: 40px;
	animation-delay: 1s;}

.subDescription p:nth-of-type(1){animation-delay: 1.2s;}
.subDescription p:nth-of-type(2){animation-delay: 1.4s;}
.subDescription p:nth-of-type(3){animation-delay: 1.6s;}

.btn-reserveNow{
	display: inline-block;
	margin: 40px auto 0;
	padding: 2px 20px;
	background: #9e2e08;
	border-radius: 30px;
	font-size: 1.5em;
	color: #fff;
	font-weight: 600;
	animation-delay: 2s;
	animation-duration: 1.5s;}

a.btn-reserveNow{color: #fff;}
.btn-reserveNow:hover{color: #ffe46c;}



/*----2.免費建議及服務----*/

.service-wrap{width: 100%;}
.title_section2{
	position: absolute;
    top: -100px;
    left: 0;
    display: none;
    width: 100%;
	height: 93px;}

.title_section2 img{
	position: absolute;
	left: 0;}

.title_section2 h1 span{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;}	
	
.service-content{
	margin: 0 auto;
	padding: 40px 80px;
	margin-bottom: 60px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;}

.service-content div{
	width: 300px;
	height: auto;
	display: inline-block;
	text-align: center;
	padding: 15px;
	background: #fff;
	top: 0;
	border:1px solid rgba(162, 77, 52 , 0.25);
	box-shadow: 0 10px 20px -6px rgba(00, 00, 00, 0.2);
	transition: 0.5s;}

.service-content div:nth-of-type(1){animation-delay: 0.5s;}
.service-content div:nth-of-type(2){animation-delay: 0.9s;}
.service-content div:nth-of-type(3){animation-delay: 1.3s;}

.service-content div:hover{
	box-shadow: 0 25px 25px -10px rgba(00, 00, 00, 0.1);
	top: -15px;}

.service-content div h2{
	padding: 20px 0;
    position: absolute;
    width: 100%;
    left: 0;
    top: 130px;
    color: #fff;
    text-shadow: 1px 1px 15px rgba(00, 0, 0, 1), 0 0 5px rgba(00, 0, 0, 0.5);}
	
.service-content div p{
	text-align: left;
	padding: 5px 10px;
	color: #333333;
	letter-spacing: 1px;}

.square-deco{
	position: absolute;
    display: inline-block;
    width: 405px;
    height: 500px;
    border-radius: 20px;
    background: hsl(14deg 100% 94%);
    transform: rotate(75deg);
    left: 14%;
    bottom: -25px;}

/*----3.找到人生的定位----*/
.stage-wrap{width: 100%;}
.stage-content{
	position: relative;
	margin: 0 auto;
	padding: 40px 2%;	
	display: flex;
	flex-direction: row;
	justify-content: space-around;}

.title_section3{
	position: relative;
    left: 0;
    display: inline-block;
    width: 100%;
	height: 94px;
	animation-duration: 1.2s;}
	
.title_section3 img{position: relative;}
.title_section3 h1 span{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;}

.stage-wrap h2{
	margin: 10px 0;
	color: #736b69;
	font-weight: 400;
	animation-delay: 0.5s;}

.stage-bg{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #ffe9db;
	margin-bottom: 60px;}

/*階段圖卡*/
#stage1, #stage2, #stage3, #stage4{display: none;}

.stage-content .stage-card1,
.stage-content .stage-card2,
.stage-content .stage-card3,
.stage-content .stage-card4{
	width: 250px;
	padding: 20px;
	margin: 0 20px;
	position: relative;
	display: flex;
	height: 350px;
	background: #fff;
	box-shadow: 5px 5px 0px 0px rgba(177, 63, 14, 0.17);
	transition: 1s;
	overflow: hidden;
	cursor: pointer;}

.stage-card1{animation-delay: 0.2s;}
.stage-card2{animation-delay: 0.4s;}
.stage-card3{animation-delay: 0.6s;}
.stage-card4{animation-delay: 0.8s;}

.stage-content .stage-card1 h2,
.stage-content .stage-card2 h2,
.stage-content .stage-card3 h2,
.stage-content .stage-card4 h2{
	font-size: 20px;
	color: #9e2e08;
	white-space: nowrap;}

.btn-stage1, .btn-stage2, .btn-stage3, .btn-stage4{
	display: inline-block;
	width: 	150px;
	height: 40px;
	line-height: 30px;
	padding: 5px;
	margin: 10px 0 5px;
	border-radius: 20px;
	color: #fff;
	font-size: 17px;
	background: #9e2e08;}

.btn-stage2{background: #996342;}
.btn-stage3{background: #c16538;}
.btn-stage4{background: #ff6d2e;}

.btn-stage1::after, .btn-stage2::after, .btn-stage3::after, .btn-stage4::after {
	content: '';
    display: inline-block;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 20px;
    background: #de5d32 url(../images/btn_arrows.png) left 10px center no-repeat;
	background-size: auto;
	transition: 1s;}
	
.btn-stage2::after{background-color: #c38052;}
.btn-stage3::after{background-color: #dd7846;}
.btn-stage4::after{background-color: #eea06e;}

.stage-card1 > div:nth-of-type(1),
.stage-card2 > div:nth-of-type(1),
.stage-card3 > div:nth-of-type(1),
.stage-card4 > div:nth-of-type(1){
	flex: 1;
	text-align: center;}

.stage-card1 > div:nth-of-type(1) img,
.stage-card2 > div:nth-of-type(1) img,
.stage-card3 > div:nth-of-type(1) img,
.stage-card4 > div:nth-of-type(1) img{
	display: block;
	margin: auto;}


.stage-card1 > div:nth-of-type(2),
.stage-card2 > div:nth-of-type(2),
.stage-card3 > div:nth-of-type(2),
.stage-card4 > div:nth-of-type(2){
	flex: 0;
	opacity: 0;
	overflow: hidden;}	

/*階段卡牌開關*/
/*開啟：就業新鮮*/
#stage1:checked ~ label.stage-card1{	
	width:calc(100%);}
#stage1:checked ~ .stage-card1 > div:nth-of-type(2){
	flex:4;
	opacity: 1;
	overflow:initial;}	

#stage1:checked ~ label.stage-card2,
#stage1:checked ~ label.stage-card3,
#stage1:checked ~ label.stage-card4{
	width: 0;
	padding: 0;
	margin: 0;}

/*開啟：結婚奮鬥*/
#stage2:checked ~ label.stage-card2{	
	width:calc(100%);}
#stage2:checked ~ .stage-card2 > div:nth-of-type(2){
	flex:4;
	opacity: 1;
	overflow:initial;}	

#stage2:checked ~ label.stage-card1,
#stage2:checked ~ label.stage-card3,
#stage2:checked ~ label.stage-card4{
	width: 0;
	padding: 0;
	margin: 0;}

/*開啟：育兒規劃*/
#stage3:checked ~ label.stage-card3{	
	width:calc(100%);}
#stage3:checked ~ .stage-card3 > div:nth-of-type(2){
	flex:4;
	opacity: 1;
	overflow:initial;}	

#stage3:checked ~ label.stage-card1,
#stage3:checked ~ label.stage-card2,
#stage3:checked ~ label.stage-card4{
	width: 0;
	padding: 0;
	margin: 0;}

/*開啟：退休準備*/	
#stage4:checked ~ label.stage-card4{	
	width:calc(100%);}
#stage4:checked ~ .stage-card4 > div:nth-of-type(2){
	flex:4;
	opacity: 1;
	overflow:initial;}

#stage4:checked ~ label.stage-card1,
#stage4:checked ~ label.stage-card2,
#stage4:checked ~ label.stage-card3{
	width: 0;
	padding: 0;
	margin: 0;}

/*開關紐顯示*/
#stage1:checked ~ label.stage-card1 .btn-close,
#stage2:checked ~ label.stage-card2 .btn-close,
#stage3:checked ~ label.stage-card3 .btn-close,
#stage4:checked ~ label.stage-card4 .btn-close{opacity: 1;}	
/*開關紐選轉*/
#stage1:checked ~ label div .btn-stage1::after{
	transform: rotate(180deg);
	transition: 1s;}
#stage2:checked ~ label div .btn-stage2::after{
	transform: rotate(180deg);
	transition: 1s;}
#stage3:checked ~ label div .btn-stage3::after{
	transform: rotate(180deg);
	transition: 1s;}
#stage4:checked ~ label div .btn-stage4::after{
	transform: rotate(180deg);
	transition: 1s;}	

/* 另一種展開發：不用*/
/*#stage1:checked ~ label.stage-card1{
	position: absolute;
	width:calc(100% - 180px);
	z-index: 1;}*/


/*保障詳情*/
.insure-wrap{display: flex;}
.insure-wrap div{
	flex: 1;
	justify-content: space-evenly;
	display: flex;
	flex-direction: column;}

.insure-wrap div span:nth-of-type(1){
	font-size:18px;
	font-weight: 600;
	color: #9e2e08;
	border-bottom: 1px dashed #572311;
    padding-bottom: 10px;
	min-height: 115px;}
	
.insure-content1 img{padding: 4px 0;}
.insure-content1 > span{border-bottom:0px !important;}

/*保障項目-圖市示*/
.insure-content2 span:nth-of-type(1)::before,
.insure-content3 span:nth-of-type(1)::before,
.insure-content4 span:nth-of-type(1)::before,
.insure-content5 span:nth-of-type(1)::before,
.insure-content6 span:nth-of-type(1)::before{
	content: '';
    position: relative;
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
	border-radius: 50%;	
    background: #fff3ef url(../images/icon_lifeinsure.png) center no-repeat;
	background-size: 60%;}
	
.insure-content3 span:nth-of-type(1)::before{
	background: #fff3ef url(../images/icon_accident.png) center no-repeat;
	background-size: 62%;}

.insure-content4 span:nth-of-type(1)::before{
	background: #fff3ef url(../images/icon_payasyouspend.png) center no-repeat;
	background-size: 60%;}

.insure-content5 span:nth-of-type(1)::before{
	background: #fff3ef url(../images/icon_pay.png) center no-repeat;
	background-size: 60%;}

.insure-content6 span:nth-of-type(1)::before{
	background: #fff3ef url(../images/icon_cancer.png) center no-repeat;
	background-size: 60%;}

.insure-wrap div span:nth-of-type(2),
.insure-wrap div span:nth-of-type(3){
	margin: 0 auto;
	font-size:36px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 600;
	color: #ed521e;
	display: inline-block;
	width: 80px;
	height: 80px;
	line-height: 80px;
	border-radius: 50%;
	background: #ffefef;}

.insure-wrap div span:nth-of-type(3){background: #fcf2e9;}

span.no-bg{background:#fff !important;}

.insure-wrap div span:nth-of-type(2).fee-unit::after,
.insure-wrap div span:nth-of-type(3).fee-unit::after{
	content: '萬';
	font-size: 13px;}

.insure-wrap div span:nth-of-type(2).fee-unit2::after,
.insure-wrap div span:nth-of-type(3).fee-unit2::after{
	content: '千';
	font-size: 13px;}


/*關閉裝飾 X */
.btn-close{
	display: inline-block;
	position: absolute;
	opacity: 0;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	background: url(../images/btn_close.png) center no-repeat;
	background-size: contain;
	transition: 0.5s;}

/*保障附註說明*/
.insure-wrap .note{	
	position: absolute;
	bottom: -10px;
	right: 0;}
.insure-wrap .note span{	
	color: #9e2e08;
	font-size: 13px;
	font-weight: 600;
	margin-right: 20px;}


/*保障說明(手機版)*/
#stageCard1m, #stage1-mobile,
#stageCard2m, #stage2-mobile,
#stageCard3m, #stage3-mobile,
#stageCard4m, #stage4-mobile{
	display: none;}



/*----4.預見好顧問，保障永留存！----*/

.campaign-wrap{width: 100%;}
.campaign-bg{
	position: relative;
	height: 100%;
	width: 100%;
	min-height: 800px;
	background: url() center no-repeat;
	background-size: cover;}

.campaign-content{
	position: relative;
	margin: 0 auto;
	margin-bottom: 60px;
	padding: 40px;	
	display: flex;
	flex-direction: row;
	justify-content: space-around;}

.campaign-content .campaign1{
	flex: 1;
	padding: 20px;
    background: #ffebda;
    height: 100%;
    margin-right: 20px;
    border-radius: 20px 0 20px 0;}

.campaign-content .campaign2{
	flex: 1;
	margin-top: 40px;
	padding: 20px;
    background: #fae4e4;
    height: 100%;
    border-radius: 0 20px 0 20px;}

.title_section4{
	position: relative;
    left: 0;
    display: inline-block;
    width: 100%;
	height: 94px;
	animation-duration: 1.2s;}

.campaign-content div:nth-of-type(2) span{	animation-delay: 0.4s;}

.title_section4 img{position: relative;}
.title_section4 h1 {
	position: absolute;	
	top: 0px;
	left: 0;	
	z-index: -1;}

.title_section4:nth-of-type(1) h1 span{
	font-size: 10px;
	color: #ffebda;}
	
.title_section4:nth-of-type(2)  h1 span{
	font-size: 10px;
	color: #fae4e4;}

.campaign-text{padding: 20px;}
.campaign-text p{
	text-align: left;
	font-size: 20px;
	font-weight: 400;
	line-height: 40px;}

.earlyGift{
	position: absolute;
	display: inline-block;
	right: 50px;
	font-size: 30px;
	font-weight: 600;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50%;
	color: #a0310c;
	background: #Fff;
	animation:bounce-ani 1.5s ease infinite ;
	box-shadow: 5px 5px 0px 0px rgba(62, 77, 52, 0.15);}

.earlyGift::after{
	content: "";
    position: absolute;
    bottom: 0;
    left: 4px;
    transform: rotate(105deg);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 13px 24px;
    border-color: transparent transparent rgba(255, 255, 255);
	transition: all 0.5s ease 0s;}
	
.bonusGift{
	position: absolute;
    top: -120px;
    right: -40px;
	width: 28%;
	animation-duration: 1s;
	animation-delay: 1s;}

.title_section4 p{
	font-size: 20px;
	font-weight: 400;
	line-height: 40px;
	padding:0 30px ;}

.campaign-prize{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 30px 0;}

.campaign-prize img{margin-bottom: 30px;}
.campaign-prize img:nth-of-type(1){animation-delay: 0.2s;}
.campaign-prize img:nth-of-type(2){animation-delay: 0.4s;}
.campaign-prize img:nth-of-type(3){animation-delay: 0.6s;}
.campaign-prize img:nth-of-type(4){animation-delay: 0.8s;}

.img-deco{
	position: absolute;
	display: inline-block;
	width: 243px;
	height: 198px;
	left: 25%;
    bottom: 3%;
	background:url(../images/img_section4-deco.png) center no-repeat;
	background-size: contain;
	transform: rotate(17deg);}


/*----5.用戶滿意推薦！----*/

.recommend-wrap{width: 100%;}
.recommend-bg{
	position: relative;
	background: #fae4e4;
	display: inline-block;
	margin:20px 0 60px;
	width: 100%;
	height: 100%;}

.recommend-content{	
	position: relative;
	margin: 0 auto;
	padding: 40px 80px;}

.title_section5{
	position: relative;
    left: 0;
    display: inline-block;
    width: 100%;
	height: 94px;
	animation-duration: 1.2s;}	

.title_section5 img{position: relative;}
.title_section5 h1  span{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	z-index: -1;}	

.recommend-card{
	display: inline-block;
	width: 50%;
	padding: 2% 20px;
	background: #fff;
	border:1px solid rgba(162, 77, 52, 0.15);
	box-shadow: 5px 5px 0px 0px rgba(62, 77, 52, 0.15);}

.recommendCard-wrap{
	position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;}
	
.recommend{
	vertical-align: middle;
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 0 10px;}

.recommend div{	
	height: 200px;
	padding: 10px;}

.recommend div p{	
	text-align: justify;
	padding: 0px 10px;
	font-size: 17px;
	line-height: 24px;}
	
.recommend div span{
	display: block;
	padding: 0 10px;
	margin-top: 5px;
	width: 100%;
	text-align: right;
	font-size: 18px;}

.recommend-card .img-quote1{
	position: absolute;
	display: inline-block;
	left: 3%;
	top: 15%;
	width: 24px;
	height: 19px;
	background: url(../images/img_section5-deco8-2.png) center no-repeat;
	background-size: contain;}

.recommend-card .img-quote2{
	position: absolute;
	display: inline-block;
	right: 3%;
	bottom: 15%;
	width: 24px;
	height: 19px;
	background: url(../images/img_section5-deco8-1.png) center no-repeat;
	background-size: contain;}

.recommend-content img{pointer-events: none;}

.img-deco7{
	position: absolute;
	left: -120px;
	bottom: -10px;
	animation: floating-ani 3s ease-in-out infinite;}

.img-deco8{
	position: absolute;
	right: -90px;
	bottom: -30px;
	animation: bounce-ani 2s ease infinite;}

.recommend-content > img{position: absolute;}

.img-deco1{
	left: 15%;
	top: 20px;
	animation: ani-paperDrop 2s ease-in-out infinite;}

.img-deco2{
	width: 50px;
	right: 20%;
	top: 40px;
	animation: ani-paperDrop 1.5s ease-in-out infinite;}

.img-deco1-1{
	right: 11%;
	bottom: 40px;
	animation: ani-paperDrop 3.1s ease-in-out infinite;}

.img-deco3{
	right: 5%;
	top: 60px;
	animation: ani-paperDrop 3s ease-in-out infinite;}

.img-deco4{
	width: 50px;
	left: 23%;
	top: 63px;
	animation: ani-paperDrop 3.1s ease-in-out infinite;}

.img-deco3-1{
	left: 7%;
	bottom: 110px;
	animation: ani-paperDrop 2.1s ease-in-out infinite;}

.img-deco5{
    left: 13%;
	bottom: 33px;
	animation: ani-paperDrop 1.1s ease-in-out infinite;}

.img-deco6{
	right: 13%;
	top: 80px;
	animation: ani-paperDrop 4s ease-in-out infinite;}



/*----6.保險諮詢流程！----*/

.steps-wrap{width: 100%;}
.steps-content{	
	position: relative;
	margin: 0 auto;
	padding: 40px 80px;
	margin-bottom:60px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;}

.title_section6{
	position: relative;
    left: 0;
    display: inline-block;
    width: 100%;
	height: 94px;
	animation-duration: 1.2s;}	

.title_section6 img{position: relative;}
.title_section6 h1 span{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	z-index: -1;}	

.steps{
	display: inline-block;
	padding: 20px;}

.steps-content .steps:nth-of-type(1){animation-delay: 0.4s;}
.steps-content .steps:nth-of-type(2){animation-delay: 0.8s;}
.steps-content .steps:nth-of-type(3){animation-delay: 1.2s;}
.steps-content .steps:nth-of-type(4){animation-delay: 1.6s;}

.line-deco{
	display: block;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-40%, -50%);
	width: 60%;
	border: 2px dashed #572311;
	animation-duration: 1.2s;
	animation-delay: 0.6s;}

.steps .step-number{
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 100px;
	font-weight: 600;
	left: 0;
	bottom: 0;
	color: #fca9a9;}

.steps p{
	font-size: 20px;
	font-weight: 600;
	min-height: 60px;
	padding:10px 0 10px 30px;
	line-height: 60px;}

.steps p span {
	display: block;
	color: #a0310c;
	line-height: 28px;
	vertical-align: middle;}



/*----7.活動注意事項----*/

#rules-details{display: none;}
.rules-details{
	width: 100%;
	text-align: center;
	cursor: pointer;}

.rules-wrap{
	width: 100%;
	padding:10px 10px 40px;
	overflow: hidden;}

.rules{
	display: inline-block;	
	margin: 0 auto;
	width: 1000px;
	padding: 20px 0;
	border-radius: 20px;
	background: #f3f3f3;
	overflow: hidden;}

.title-rules span{
	display: inline-block;
    position: absolute;
    vertical-align: middle;
    color: #f3f3f3;}

.circle{
	display: block;
	margin: 20px auto 0;
	text-align: center;
	vertical-align: middle;
	width: 100px;
	height: 28px;
	border-radius: 20px;
	background: #e87953;}

.circle::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 9px 6px;
	border-color: transparent transparent #fff transparent;	
	transition: 0.5s;}

.rules-content{
	opacity: 0;
	height: 0;	
	margin: 0 auto;
	width: 90%;
	font-family:'Noto Sans TC', sans-serif, '微軟正黑體';
	font-size: 1em;    
	line-height: 30px;
	transition: height 0.5s;}

.rules-content ol li{
	text-align: left;
	font-weight: 600;
	margin-bottom: 10px;}

.list2{list-style: none}
.list2 li:nth-of-type(1),
.list2 li:nth-of-type(2){margin-bottom: 0;}
.list3 { 
	margin-left: 30px;
	list-style-type: lower-alpha;}

.rules-details h1{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;}	

/*---活動注意事項開合設定----*/

#rules-details:checked ~ .rules-content{
	opacity: 1;
	height: 100%;
	padding: 0 20px 20px;
	margin-top: 20px;
	transition: 0.5s;}

#rules-details:checked ~ label.rules-details .circle::after{
	transform: translate(-50%, -50%) rotateX(0deg);}



/*----8.預約保險諮詢----*/
.actionBtn-wrap{
	position: fixed;
    width: 100%;
    background: rgba(158, 47, 9, 0.8);
    justify-content: center;
    bottom: 0;
    z-index: 9;}
	
.actionBtn-wrap p{
	vertical-align: middle;
	display: inline-block;
	font-size: 1.5em;
	line-height: 1.5em;
	color: #fff;
	font-weight: 600;
	margin: 0 20px;
	padding: 10px;}

.actionBtn{
	vertical-align: middle;
	display: inline-block;
	height: 40px;
	border-radius: 20px;
	padding: 6px 20px;
	color: #db491d;
	background: #fff;
	font-size: 1.2em;
	cursor: pointer;
	font-weight: 600;}

.actionBtn-wrap:hover{
	background: rgba(158, 47, 9, 1);}

.actionBtn-wrap:hover p{
	color:#fff;}

.actionBtn-wrap:hover .actionBtn{
	color: #fff;
	background: #db491d;}

 /*右側預約鈕*/
.btnTop-Wrap .actionBtn{
	display: inline-block;
    font-size: 23px;
    position: absolute;
    width: 70px;
    height: 80px;
    line-height: 22px;
    padding: 7px 5px;
    right: -5px;
    bottom: 65px;
    border-radius: 10px;
    background: #FF5722;
    color: #fff;
    animation: bounce-ani 2s ease infinite;}

.btnTop-Wrap .actionBtn::after{
	content: "";
	position: absolute;
	top: -13px;
	left: -5px;
	transform: rotate(159deg);
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 5px 10px;
	border-color: transparent transparent #ff6d2e transparent;
	transition: all 0.5s ease 0s;}

.btnTop-Wrap .actionBtn::before{
	content: '';
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    background: url(../images/icon_service.svg) top center no-repeat;
    background-size: contain;
    top: -60px;
    left: 0px;}


/*----回頁首toTop-----*/

.btnTop-Wrap{
	position: fixed;
    right: 50px;
    top: 60%;
	z-index: 99;}

.btnTop{
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	font-weight: 600;
	padding: 5px;
	background: #9e2e08;
	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{
	background: #e6573e;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 


/*----control no.-----*/

.cno{
	box-sizing: border-box;
	padding: 0 10%;
	text-align: right;
	width: 100%;
	color: #fff;
	display: block;	
	background: #007C7C;
	font-family: '微軟正黑體';
	font-size: 1em;	
	line-height: 30px;
	letter-spacing: 1px;
	right: 0px;}

/*----fotter----*/

footer{
	font-family: '微軟正黑體';
	font-size: 1em;	
	text-align: center;
	font-weight: 600;
	padding: 20px;
	margin-bottom: 60px;
	/*border-top: solid 20px #007C7C;*/}


/*----顏色加強-----*/
.blue_note{color: #44a7eb;font-weight: 600;}
.green_note{color: #0cbdb3;font-weight: 600;}
.darkRed_note{color: #9e2e08; font-weight: 600; }
.orange_note{color: #f24d00;}


/*----螢幕寬度大於1200px時----*/

@media screen and (min-device-width: 1025px){
	.container{width: 100%;}
	.header-wrap, .theme-content,
	.service-content, .stage-content,
	.campaign-content, .steps-content{
		width: 1200px;
		transition: 0.5s;}

	footer{
		width: 100%;
		padding: 0px;
		line-height: 30px;}
}


/*----螢幕寬度介於1024px-768px時----*/
@media (min-width: 769px) and (max-width: 1024px) {
	.bonusGift {right: 24px;}
	.service-content div {margin: 10px;}
	.img-deco {top: 55%;}
	.recommend-card {width: 70%;}
}

/*----螢幕寬度介於768px-600px時----*/
@media (min-width: 600px) and (max-width: 768px) {
	
	.header-wrap{width: 100%;}
	/*--Header列--*/
	.ezbao-title{
		font-size: 1.2em;
		padding-top: 7px;}
	.ezbao-title::before{height: 25px;}
	.logo{
		width: 20%;
		height: 70px;
		background-size: 90%;
		margin-left: 10px ;}

	/*--選單--*/	
	.menu-wrap{
		position: fixed;
		width: 100%;
		height: auto;
		padding: 10px;
		top: auto;
		left: auto;
		bottom: 0;
		z-index: 2;
		background-color: #9e2f09;
		line-height: 30px;
		display: block;}	

	.menu-wrap a:nth-of-type(1) span,
	.menu-wrap a:nth-of-type(2) span,
	.menu-wrap a:nth-of-type(3) span,
	.menu-wrap a:nth-of-type(4) span{
		vertical-align: middle;
		background: #fff;
		color: #9e2f09;
		padding: 4px;
		border-radius: 5px;
		font-size: 15px;
		width: 40px;
		display: inline-block;
		line-height: 15px;
		font-weight: 600;
		margin-right: 2px;}

	.menu-wrap a:nth-of-type(1) span:active,
	.menu-wrap a:nth-of-type(2) span:active,
	.menu-wrap a:nth-of-type(3) span:active,
	.menu-wrap a:nth-of-type(4) span:active{
		vertical-align: middle;
		background: rgba(236, 67, 25);
		color: #fff;
		transition: 0.2s;}


	.line-share {
		display: inline-block;
		vertical-align: middle;
		width: 40px;
		height: 38px;
		background:url(../images/line_share_m.png) center no-repeat;
		background-size: contain;
		border-radius: 5px;}

	.fb-share {
		display: inline-block;
		vertical-align: middle;
		width: 40px;
		height: 38px;
		background:url(../images/fb_share_m.png) center no-repeat;
		background-size: contain;
		border-radius: 5px;}

	/*主視覺*/
	
	.theme-deco {
		position: absolute;
		right: -35%;
		height: 400px;}

	.theme-content {min-height: 450px;}
	.title_section1 img{width: 60%;}
	.btn-reserveNow {margin: 20px auto 0px;}

	/*2.免費服務與規劃*/
	.service-content div {
		flex: 1; 
		margin-right: 5px;
		width: initial;}

	.service-content div img{width: 100%;}
	.service-content div h2 {
		font-size: 20px;
		top: 35%;}
		
	.square-deco{
		width: 40%;
		height: 100%;}
		
	.service-content {padding: 40px 20px;}

	/*3.找到人生的定位--*/
	.stage-content {padding: 40px 20px;}
	.stage-content .stage-card1, .stage-content .stage-card2, .stage-content .stage-card3, .stage-content .stage-card4 {
		width: 25%;
		padding: 0;
		margin: 0px 10px;}

	.stage-card1 > div:nth-of-type(1) img, .stage-card2 > div:nth-of-type(1) img, .stage-card3 > div:nth-of-type(1) img, .stage-card4 > div:nth-of-type(1) img {
		width: 100%;}

	.stage-card1 > div:nth-of-type(1), .stage-card2 > div:nth-of-type(1), .stage-card3 > div:nth-of-type(1), .stage-card4 > div:nth-of-type(1) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30px 5px;
		margin: 0 10px;}		

	.stage-card1 > div:nth-of-type(2), .stage-card2 > div:nth-of-type(2), .stage-card3 > div:nth-of-type(2), .stage-card4 > div:nth-of-type(2) {
		padding: 20px 0;}

	.insure-content2 span:nth-of-type(1)::before, .insure-content3 span:nth-of-type(1)::before, .insure-content4 span:nth-of-type(1)::before, .insure-content5 span:nth-of-type(1)::before, .insure-content6 span:nth-of-type(1)::before {
		width: 60px;
		height: 60px;}

	.btn-stage1, .btn-stage2, .btn-stage3, .btn-stage4 {width: 95%;}
	.insure-wrap div {padding: 20px 0px;}
	.btn-close {
		right: 5px;
		top: 5px;}

	/*4.預見好顧問，保障永留存！*/
	.campaign-content{flex-direction: column;}
	.campaign-text {padding: 20px 10%;}
	.earlyGift {right: 10%;}
	.bonusGift {
		top: 10%;
		right: 4%;
		width: 25%;}
	.img-deco{display: none;}
	.campaign2 p:nth-of-type(1) > span {
		display: block;}


	/*5.用戶滿意推薦！*/
	.recommend-card {
		display: inline-block;
		width: 80%;}

	/*6.*/
	.steps{padding: 0 20px;}
	.steps img{width: 100%;}
	.steps-content {padding: 40px 10px;}
	.steps .step-number {font-size: 5em;}
	.steps p {font-size: 1.1em;}


	/*7.活動注意事項*/
	.rules {width: 100%;}

	/*--預約保險諮詢--*/				
	.actionBtn-wrap {display: none;}
	.btnTop-Wrap {top: 80%;}
}



/*----螢幕寬度小於於600px時----*/
@media screen and (max-device-width: 600px){

	/*--Header列--*/
	.ezbao-title{
		font-size: 1.2em;
		padding-top: 7px;}
	.ezbao-title::before{height: 25px;}
	.logo{
		width: 35%;
		height: 70px;
		background-size: 90%;
		margin-left: 10px ;}

	/*--選單--*/	
	.menu-wrap{
		position: fixed;
		width: 100%;
		height: auto;
		padding: 10px;
		top: auto;
		left: auto;
		bottom: 0;
		z-index: 2;
		background-color: #9e2f09;
		line-height: 30px;
		display: block;}	

	.menu-wrap a:nth-of-type(1) span,
	.menu-wrap a:nth-of-type(2) span,
	.menu-wrap a:nth-of-type(3) span,
	.menu-wrap a:nth-of-type(4) span{
		vertical-align: middle;
		background: #fff;
		color: #9e2f09;
		padding: 4px;
		border-radius: 5px;
		font-size: 15px;
		width: 40px;
		display: inline-block;
		line-height: 15px;
		font-weight: 600;
		margin-right: 2px;}

	.menu-wrap a:nth-of-type(1) span:active,
	.menu-wrap a:nth-of-type(2) span:active,
	.menu-wrap a:nth-of-type(3) span:active,
	.menu-wrap a:nth-of-type(4) span:active{
		vertical-align: middle;
		background: rgba(236, 67, 25);
		color: #fff;
		transition: 0.2s;}


	.line-share {
		display: inline-block;
		vertical-align: middle;
		width: 40px;
		height: 38px;
		background:url(../images/line_share_m.png) center no-repeat;
		background-size: contain;
		border-radius: 5px;}

	.fb-share {
		display: inline-block;
		vertical-align: middle;
		width: 40px;
		height: 38px;
		background:url(../images/fb_share_m.png) center no-repeat;
		background-size: contain;
		border-radius: 5px;}



	/*--1.主視覺區--*/
	.theme-deco{
		top: 0;
		right: 0;
		width: 100%;
		height: 60%;
		background: url(../images/img_theme.png)top left 110px no-repeat;
		background-size: contain;}

	.theme-content{
		padding: 140px 2% 0px;
    	min-height: 430px;}

	.title_section1 {
		position: relative;
		display: inline-block;
		width: 100%;
		height: auto;}

	.title_section1 h1{
		position: relative;
		font-size: 2em;
		font-weight: 600;
		color: #9f300d;
		text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2),1px 1px 1px rgba(255, 255, 255, 0.8);
		background: rgba(231, 231, 231, 0.6);
		display: inline-block;
		padding: 0 7px;}

	.title_section1 img{display: none;}

	.subDescription {
		position: relative;
		width: 100%;
		transform: initial;
		padding: 30px 0px;}

	.subDescription p {
		font-size: 18px;
		font-weight: 600;
		line-height: 28px;
		text-shadow: -1px -1px 2px rgba(255, 255, 255, 1),
					 1px 1px 0px rgba(255, 255, 255, 1),
					 1px 1px 2px rgba(255, 255, 255, 0.8);}


	/*--2.免費建議及服務--*/
	.square-deco {
		position: absolute;
		display: inline-block;
		width: 80%;
		height: 100%;}

	.service-content{
		padding: 2%;
		margin-bottom: 40px;
		display: block;}

	.service-content div:nth-of-type(1),
	.service-content div:nth-of-type(2){margin-bottom: 40px;}


	/*--3.找到人生的定位--*/		
	.stage-bg{margin-bottom: auto;}
	.title_section3 h1{padding: 2%;}
	.title_section3 h1 span{
		position: relative;
		display: block;
		color: #9f300d;
		font-size: 1.2em;}

	.title_section3 h1 span:nth-of-type(2){display: none;}	
	.title_section3 img {display: none;}	

	.stage-wrap h2 {
		margin: 10px;
		font-size: 1.2em;}

	.stage-content {
		margin: 0 auto;
		padding: 20px 2%;
		display: flex;
		flex-direction: column;}

	.stage-content .stage-card1, .stage-content .stage-card2, .stage-content .stage-card3, .stage-content .stage-card4 {
		width: 250px;
		padding: 20px;
		margin: 0 auto 20px;
		position: relative;
		display: flex;
		flex-direction: column;
		background: #fff;
		overflow: hidden;}
   

		/*保障詳情*/
		.insure-wrap {
			flex-direction: column;}

		.insure-wrap div {flex-direction: row;}
		.insure-wrap div span:nth-of-type(1) {
			font-size: 15px;
			color: #9e2e08;
			padding-right: 10px;
			min-height: auto;
			border-bottom: 0;
			border-right: 1px dashed #572311;
			min-width: 90px;}

		.insure-content1 img {
			padding: 10px 0;
			width: 30%;
			transform: rotate(15deg);
			margin: 0 auto;}

		.insure-content1 span:nth-of-type(1){
			font-size: 20px !important;
			border-bottom: 0px !important;
			color: #ed521e !important;
			line-height: 24px;}

		.insure-content2 span:nth-of-type(1)::before, .insure-content3 span:nth-of-type(1)::before, .insure-content4 span:nth-of-type(1)::before, .insure-content5 span:nth-of-type(1)::before, .insure-content6 span:nth-of-type(1)::before {
			width: 60px;
			height: 60px;}		

		/*保障附註說明*/
		.insure-wrap .note{	
			padding:0 10px;
			position: relative;}

		.insure-wrap .note span{	
			display: block;
			text-align: left;}			
		

		/*保障說明(手機版蓋版)*/
		#stage1-mobile, #stage2-mobile, #stage3-mobile, #stage4-mobile{
			position: fixed;
			background: #fff;
			display: none;
			width: 80%;
			z-index: 1;
			top: 50%;
			left: 50%;
			padding: 20px;
			box-shadow: 0 0 0 200px rgba(00,00,00,0.5);
			cursor: pointer;
			animation:fadeInDwon-ani 0.8s ease-in-out forwards;}

		#stage1-mobile .btn-close,#stage2-mobile .btn-close,
		#stage3-mobile .btn-close,#stage4-mobile .btn-close{
			opacity: 1;}

		#stageCard1m,
		#stageCard2m,
		#stageCard3m,
		#stageCard4m{display: block;}
		
		label.stage-card1, 
		label.stage-card2,
		label.stage-card3,
		label.stage-card4{display: none !important;}



		/* 第一版手機版開合設定 (不用)
		
		階段卡牌開關
		/*開啟：就業新鮮
		#stage1:checked ~ label.stage-card1{	
			height: auto;}
		#stage1:checked ~ .stage-card1 > div:nth-of-type(2){
			opacity: 1;}
		#stage1:checked ~ label.stage-card2,
		#stage1:checked ~ label.stage-card3,
		#stage1:checked ~ label.stage-card4{
			height: 0;
			opacity: 0;
			transition: 1s;}

		/*開啟：結婚奮鬥
		#stage2:checked ~ label.stage-card2{	
			height: auto;}
		#stage2:checked ~ .stage-card2 > div:nth-of-type(2){
			opacity: 1;}
		#stage2:checked ~ label.stage-card1,
		#stage2:checked ~ label.stage-card3,
		#stage2:checked ~ label.stage-card4{
			height: 0;
			opacity: 0;
			transition: 1s;}

		/*開啟：育兒規劃
		#stage3:checked ~ label.stage-card3{	
			height: auto;}
		#stage3:checked ~ .stage-card3 > div:nth-of-type(2){
			opacity: 1;}
		#stage3:checked ~ label.stage-card1,
		#stage3:checked ~ label.stage-card2,
		#stage3:checked ~ label.stage-card4{
			height: 0;
			opacity: 0;
			transition: 1s;}		

		/*開啟：退休準備	
		#stage4:checked ~ label.stage-card4{
			height: auto;}
		#stage4:checked ~ .stage-card4 > div:nth-of-type(2){
			opacity: 1;}
		#stage4:checked ~ label.stage-card1,
		#stage4:checked ~ label.stage-card2,
		#stage4:checked ~ label.stage-card3{
			height: 0;
			opacity: 0;
			transition: 1s;}  */


	/*開關紐選轉*/
	/*.btn-stage1::after, .btn-stage2::after, .btn-stage3::after, .btn-stage4::after {
		transform: rotate(90deg);}*/

	#stage1:checked ~ label div .btn-stage1::after{
		transform: rotate(270deg);
		transition: 1s;}
	#stage2:checked ~ label div .btn-stage2::after{
		transform: rotate(270deg);
		transition: 1s;}
	#stage3:checked ~ label div .btn-stage3::after{
		transform: rotate(270deg);
		transition: 1s;}
	#stage4:checked ~ label div .btn-stage4::after{
		transform: rotate(270deg);
		transition: 1s;}	
		
				

	/*--4.預見好顧問，保障永留存！--*/
	.campaign-bg {
		background: url(../images/img_section4-bg.png) top -680px left -150px no-repeat;
		background-size: cover;}

	.campaign-content{
		display: block;
		padding: 40px 2%;
		margin-bottom: auto;}

	.campaign-content .campaign1 {
		margin-right: auto;
	    padding: 2%;}

	.title_section4 h1{
		position: relative;
		padding: 2%;}

	.title_section4:nth-of-type(1) h1 span {
		position: relative;
		display: block;
		color: #9f300d;
		font-size: 1.2em;}

	.title_section4 h1 span:nth-of-type(2){display: none;}	
	.title_section4 img{display: none;}
	.campaign-text {padding: 10px 2%;}

	.campaign-text p {
		text-align: center;
		font-size: 1.2em;}

	.campaign-content div:nth-of-type(2){margin-top: 40px;}
	.campaign-content > div:nth-of-type(1) img{width: 90%;}

	.campaign2 p:nth-of-type(1) > span{
		display: block;}

	.title_section4 p{
		text-align: center;
		padding: 0 20px;
		font-size: 1.2em;}
	
	.earlyGift{
		right: 2%;
		top: -20px;
		font-size: 23px;
		width: 80px;
		height: 80px;
		line-height: 80px;}		

	.bonusGift{
		top: -65px;
		right: 0;
		width: 29%;}

	.img-deco{display: none;}


	/*--5.用戶滿意推薦！--*/
	.title_section5 {height: auto;}
	.title_section5 h1 {position: relative;}
	.title_section5 h1 span{
		position: relative;
		padding: 2%;
		color: #9f300d;
		font-size: 1.2em;}

	.title_section5 img{display: none;}
	.recommend-content {padding: 40px 2%;}
	.recommend-card {width: 90%;}
	
	.img-deco1 {width: 10%;left: 4%;}
	.img-deco2 {width: 10%;right: 32%;}
	.img-deco3 {right: 5%;top: 40px;width: 10%;}
	.img-deco4 {left: 16%;}
	.img-deco6 {width: 12%;top: 10px;right:18%;}

	.img-deco7 {
		left: -25px;
		width: 30%;
		bottom: 50px;}

	.img-deco8 {
		right: -15px;
		width: 20%;
		bottom: -40px;}

	/*--6.保險諮詢流程！--*/

	.title_section6 {height: auto;}
	.title_section6 h1 {position: relative;}
	.title_section6 h1 span{
		position: relative;
		padding: 2%;
		color: #9f300d;
		font-size: 1.2em;}
		
	.title_section6 img{display: none;}		
	.steps-content {
		padding: 20px 2%;
		display: block;
		margin-bottom: auto;}

	.line-deco {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		height: 60%;
		border-color: rgba(51, 51, 51, 0.5);}

	.steps p span{
		text-shadow: 1px 1px 0 rgba(255, 255, 255, 1),
					-1px -1px 0 rgba(255, 255, 255, 1),
					 2px 2px 0px rgba(255, 255, 255, 1),
					 -2px -2px 0px rgba(255, 255, 255, 1);}




	/*--7.活動注意事項--*/
	.rules{width: 100%;}
	.rules-details img{display: none;}	
	.rules-details h1 {
		position: relative;
		padding: 2%;}

	.rules-details h1 span{
		color: #9f300d;
		position: relative;
		font-size: 1.2em;}


	/*--預約保險諮詢--*/				
	.actionBtn-wrap {display: none;}

	/*小版預約鈕*/
	.btnTop-Wrap .actionBtn{
		font-size: 18px;
		width: 50px;
		height: 70px;
		line-height: 19px;
		padding: 5px 5px;
		right: 0;
		bottom: 55px;
		border-radius: 10px;	}

	.btnTop-Wrap .actionBtn::after{
		top: -13px;
		left: 2px;}

	.btnTop-Wrap .actionBtn::before {
		width: 50px;
		height: 55px;
		top: -48px;
		left: 0px;}
		
	/*--totop--*/
	.btnTop-Wrap {
		right: 2%;
		bottom: 8%;
		top: auto;		
		transform: translateY();}
	
	.btnTop{
		opacity: 0.8;
		font-size: 1em;
		line-height: 40px;
		font-weight: 600;
		width: 50px;
		height: 50px;}

	.btnTop:hover{opacity: 1;}
	.btnTop:active{
		width: 50px;
		height: 50px;
		opacity: 1;
		background-size: 50px 50px;}

	/*footer*/	
	footer{
		line-height: normal;
		padding: 3%;
		text-align: left;
		margin-bottom: 50px;}

    footer .announce{text-align: left;}		

}


/*iPhone5*/
@media screen and (max-device-width: 320px){
	.insure-content1 img {width: 25%;}
	.insure-wrap .note{padding:0;}
	.insure-wrap .note span{margin:0;}
	.insure-wrap div span:nth-of-type(2), .insure-wrap div span:nth-of-type(3) {font-size: 24px;}
	
}


/*----動畫-----*/
@keyframes floating-ani { 
	0%{
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	50%{
		-webkit-transform:translateY(-10px);
		transform:translateY(-10px);
	}
	100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);  
	}
}



/*入場動畫左→右*/
@keyframes fadeInLeft-ani {
	0%{opacity: 0;
	   -webkit-transform: translateX(-50px);
	   transform: translateX(-50px);}

	100%{
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);}
	}


/*入場動畫右→左*/

@keyframes fadeInRight-ani {
	0%{
		opacity: 0;
	   -webkit-transform: translateX(150px);
	   transform: translateX(150px);}
	   
  100%{
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);}
	}


/*date入場動畫*/	
@keyframes fadeInShow-ani{
	0%{
		opacity: 0;
	   -webkit-transform: scale(0,0) translateX(150px);
	   transform:scale(0,0) translateX(150px);}
	   
  100%{
		opacity: 1;
		-webkit-transform:scale(1,1) translateX(0);
		transform:scale(1,1) translateX(0);}
}


/*flag入場動畫*/
@keyframes fadeInDwon-ani {
	0%{opacity: 0;
	   -webkit-transform: translate(-50%, -100%);
	   transform: translate(-50%, -100%);}

	100%{
		opacity: 1;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);}
	}


/*紙花動畫*/

@keyframes ani-paperDrop{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) translateY(-20px);
	    transform: scale(0) translateY(-20px);}

	50%{
		opacity: 1;
		-webkit-transform: scale(1) translateY(-50px);
		transform: scale(1) translateY(-50px);}
		
	100%{
		opacity:0;
		-webkit-transform: scale(1) translateY(-80px);
		transform:scale(1)  translateY(-80px);}
}


@keyframes shake-ani{
 
	0%{ transform: rotate(2deg);
		-webkit-transform: rotate(2deg);}

	5%{ transform: rotate(-2deg);
		-webkit-transform: rotate(-2deg);}

	10%{ transform: rotate(2deg);
		-webkit-transform: rotate(2deg);}

	15%{ transform: rotate(-2deg);
		-webkit-transform: rotate(-2deg);}

	20%{ transform: rotate(2deg);
		-webkit-transform: rotate(2deg);}

	25%{ transform: rotate(-2deg);
		-webkit-transform: rotate(-2deg);}

	100%{ transform: rotate(2deg);
		-webkit-transform: rotate(2deg);
	}
}


@keyframes bounce-ani{
	0%{transform: scale(0.94);}
	20%{transform: scale(0.96) rotate(5deg);}
	40%{transform: scale(0.94);}
	60%{transform: scale(0.96);}
	80%{transform: scale(0.94);}
	90%{transform: scale(0.96);}
	100%{transform: scale(0.94);}
}