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

font-family: 
@font-face {
    /*處理中文難字問題*/
    font-family: 'tcav';
    src: url('fonts/mingliu.ttf') format('truetype');}

  *{font-family:'cwTeXYen', 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.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: 9;
	top: 0;}

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

.logo-wrap{
	flex: 3;
	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: 25px;
    color: #fff;
    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{
	position: relative;
	background-color: #007c7c;
	vertical-align: middle;
	font-size: 20px;
    height: 70px;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px 0;
    line-height: 50px;
	text-align: center;	}
	
.menu-wrap a, .ezbao-title{color: #fff; cursor: pointer;padding: 0 20px;}
.menu-wrap a:hover, .ezbao-title:hover{color:#fcd72c}



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

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


/*----h1預設----*/
h1{
	font-size: 40px;
	color: #ed868f;
	margin: 20px 0;
	letter-spacing: -2px;
	font-weight: 800;}

/*----------------------------------------*/
/*----------------主內容區-----------------*/
/*----------------------------------------*/

section h1 span{
	font-size: 40px;
	color: #5fceca;
	margin: 20px 0;}

h1 span:nth-of-type(2),
.steps-wrap h1 span:nth-of-type(1),
.reserve-wrap h1 span:nth-of-type(1),
.rules-wrap h1 span:nth-of-type(1){
	color: #333333;}

.container{
	width: 100%;
	background: #fff;
	position: relative;
	text-align:center;
	margin: 0 auto;
	overflow: hidden;}

/*----------------------------------------*/
/*----------------S1：主視覺---------------*/
/*----------------------------------------*/

.theme-wrap{
	display: inline-block;
	width: 100%;
	height: auto;
	padding: 0 20px 0;
	background:#fff url(../images/theme-bg.png) top center repeat-x;
	background-size: auto;
	z-index: 1;}

.theme{
	display: inline-block;
	margin: 0 auto;
	width: 100%;
	max-width: 1400px;
	height: 500px;
	overflow: hidden;}

/*櫻花*/
.deco-sakuraL{
	position: absolute;
	display: inline-block;
	background: url(../images/deco-sakuraL.png) left center no-repeat;
	background-size: contain;
	width: 445px;
	height: 210px;
	left: 0;
	top: 20px;
	pointer-events: none;}

.deco-sakuraR{
	position: absolute;
	display: inline-block;
	background: url(../images/deco-sakuraR.png) right center no-repeat;
	background-size: contain;
	width: 380px;
	height: 210px;
	right: 0;
	top: 50px;
	pointer-events: none;}	

/*雲*/
.theme-cloud1{
	display: inline-block;
	position: absolute;
	width: 167px;
	height: 40px;
	left: 20%;
	bottom: 50%;
	background: url(../images/theme-clouds1.png) center no-repeat;
	background-size: contain;
	animation: cloudsfloating-ani1 10s linear infinite;}
	
.theme-cloud2{
	display: inline-block;
	position: absolute;
	width: 115px;
	height: 27px;
	left: 25%;
	top: 15%;
	background: url(../images/theme-clouds2.png) center no-repeat;
	background-size: contain;
	animation: cloudsfloating-ani1 30s ease-out infinite;}	

.theme-cloud3{
	display: inline-block;
	position: absolute;
	width: 198px;
	height: 47px;
	right: 20%;
	top: 10%;
	background: url(../images/theme-clouds3.png) center no-repeat;
	background-size: contain;
	animation: cloudsfloating-ani2 20s linear infinite;}

.theme-cloud4{
	display: inline-block;
	position: absolute;
	width: 115px;
	height: 27px;
	right: 15%;
	bottom: 50%;
	background: url(../images/theme-clouds4.png) center no-repeat;
	background-size: contain;
	animation: cloudsfloating-ani2 12s ease-in-out infinite;}	


/*--主題背景--*/
.theme-back{
	display: inline-block;
	width: 100%;
	height: 100%;}

.theme-moutains1{
	display: inline-block;
	position: absolute;
	width: 547px;
	height: 147px;
	left: 0;
	bottom: 0;
	background: url(../images/theme-moutains1.png) bottom center no-repeat;
	background-size: contain;}

.theme-moutains2{
	display: inline-block;
	position: absolute;
	width: 503px;
	height: 227px;
	left: 10%;
	bottom: 0;
	background: url(../images/theme-moutains2.png) bottom center no-repeat;
	background-size: contain;}	

.theme-moutains3{
	display: inline-block;
	position: absolute;
	width: 672px;
	height: 265px;
	left: 30%;
	bottom: 0;
	background: url(../images/theme-moutains3.png) bottom center no-repeat;
	background-size: contain;}	

.theme-moutains4{
	display: inline-block;
	position: absolute;
	width: 476px;
	height: 123px;
	right: 0;
	bottom: 0;
	background: url(../images/theme-moutains4.png)bottom center no-repeat;
	background-size: contain;}		
	
.theme-sun{
	display: inline-block;
	position: absolute;
	width: 257px;
	height: 257px;
	left: 30%;
	bottom: 100px;
	background: url(../images/theme-sun.png) bottom center no-repeat;
	background-size: contain;}	
		
.theme-house{
	display: inline-block;
	position: absolute;
	width: 451px;
	height: 228px;
	right: 10%;
	bottom: 20px;
	background: url(../images/theme-house.png)bottom center no-repeat;
	background-size: contain;}	

.theme-trees1{
	position: absolute;
	display: inline-block;
	width: 62px;	
	height: 152px;
	left: 0;
	bottom: 0px;
	background: url(../images/theme-trees1.png)bottom center no-repeat;
	background-size: contain;}

.theme-trees2{
	position: absolute;
	display: inline-block;
	width: 76px;	
	height: 189px;
	right: 0;
	bottom: 0px;
	background: url(../images/theme-trees2.png)bottom center no-repeat;
	background-size: contain;}

.theme-trees4{
	position: absolute;
	display: inline-block;
	width: 62px;	
	height: 152px;
	right: 50px;
	bottom: 0px;
	background: url(../images/theme-trees4.png)bottom center no-repeat;
	background-size: contain;}	

/*--主題中景--*/
.theme-middle{
	display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;}

/*標題*/
.theme-title{
	width: 550px;
	margin: 0 auto;
    top: 110px;}

.theme-title-happiness2{
	display: inline-block;
	width: 534px;
	height: 202px;
	background: url(../images/theme-title-happiness2.png) bottom center no-repeat;
	background-size: contain;}

.theme-title-sfl{
	display: inline-block;
    position: absolute;
    top: -42px;
    right: 50px;}	

.theme-title-stu{
	display: inline-block;
	width: 78px;
	height: 103px;
	background: url(../images/theme-title-stu.png) center no-repeat;
	background-size: contain;
	animation: gogogo2-ani 2s ease-in-out infinite;}

.theme-title-fa{
	display: inline-block;
	width: 78px;
	height: 124px;
	background: url(../images/theme-title-fa.png) center no-repeat;
	background-size: contain;
	animation: gogogo1-ani 1.8s ease-in-out infinite;}
	
.theme-title-lo{
	display: inline-block;
	width: 85px;
	height: 104px;
	background: url(../images/theme-title-lo.png) center no-repeat;
	background-size: contain;
	animation: gogogo3-ani 2.2s ease-in-out infinite;}

.theme-date{
	display: inline-block;
	position: absolute;
	width: 391px;
	height: 114px;
	background: url(../images/theme-date.png)top center no-repeat;
	background-size: contain;
	bottom: -50px;
    left: 20px;}


/*--主題前景--*/
.theme-front{
	display: inline-block;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	pointer-events: none;}

.theme-TRA{
	position: absolute;
	display: inline-block;
	right: 0;
	bottom: 20px;
	width: 834px;	
	height: 126px;
	background: url(../images/theme-TRA.png)bottom center no-repeat;
	background-size: contain;
	animation: trainRun2-ani 10s ease-in-out infinite;}	

.theme-platform{
	display: block;
	width: 100%;	
	height: 43px;
	background: url(../images/theme-platform.png) center repeat-X;
	background-size: cover;}

.theme-broad{
	position: absolute;
	display: inline-block;
	width: 262px;	
	height: 165px;
	left: 20%;
	bottom: 15px;
	background: url(../images/theme-broad.png) bottom center no-repeat;
	background-size: contain;}

.theme-treesFront3{
	position: absolute;
	display: inline-block;
	width: 77px;	
	height: 197px;
	left: 15%;
	bottom: -40px;
	background: url(../images/theme-treesFront3.png)bottom center no-repeat;
	background-size: contain;}

.theme-treesFront2{
	position: absolute;
	display: inline-block;
	width: 48px;	
	height: 118px;
	bottom: -40px;
	left: 40%;
	background: url(../images/theme-treesFront2.png)bottom center no-repeat;
	background-size: contain;}

.theme-treesFront1{
	position: absolute;
	display: inline-block;
	width: 48px;	
	height: 118px;
	left: 19%;
	bottom: -40px;
	background: url(../images/theme-treesFront2.png)bottom center no-repeat;
	background-size: contain;}

.theme-treesFront4{
	position: absolute;
	display: inline-block;
	width: 400px;	
	height: 80px;
	right: 10%;
	bottom: -20px;
	background: url(../images/theme-treeFront1.png)bottom center no-repeat;
	background-size: contain;}


/*----------------------------------------*/
/*-----------------新手村-----------------*/
/*----------------------------------------*/

.newlyMember-wrap{
	width: 100%;
	padding: 40px;}

.newlyMember-bg{
	position: absolute;
	display: block;
	position: absolute;
	width: 100%;
	height: 121px;
	background: url(../images/newly-bg.png) top repeat-x;
	background-size: contain;
	left: 0;
	top: 0;}

.newlyMember{
	margin: 0 auto;
	max-width: 1400px;
	margin-top: 130px;
	padding: 20px;
	background: #bcffd4;
	border-radius: 50px;}

/*新手村-櫻花*/

.newlyMember-wrap .deco-sakuraL {
	height: 10%;
    left: 0;
    top: 10%;
    z-index: 1;
    background-position: left;}

.newlyMember-wrap .deco-sakuraR {
	height: 10%;
    right: 0;
    top: 55%;
    z-index: 1;
    background-position: right;}


/*新手村招牌*/
.icon-newMember{
	position: absolute;
	display: block;
	width: 184px;
	height: 214px;
	background: url(../images/icon-newMember.png) top no-repeat;
	background-size: contain;
	left: 30%;
	top: -10px;}

/*新手任務*/
.newlymission-wrap{
	width: 100%;
	display: inline-flex;
	justify-content:space-between;
	flex-direction: column;
	-ms-flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;}

.newlymission-wrap > div{
	flex: 1;
	justify-content: space-between;
    display: flex;
    flex-wrap: wrap;}

.mission1,.mission2,.mission3,.mission4{
	display: inline-block;
	width: 520px;
	height: 400px;
	margin: 20px;
	background: url(../images/mission-1.png) center no-repeat;
	background-size: contain;}

.mission2{
	margin-top: 80px;
	background: url(../images/mission-2.png) center no-repeat;
	background-size: contain;
	animation-delay: 0.2s;}

.mission3{
	background: url(../images/mission-3.png) center no-repeat;
	background-size: contain;
	animation-delay: 0.2s;}

.mission4{
	margin-top: 60px;
	background: url(../images/mission-4.png) center no-repeat;
	background-size: contain;}


/*任務獎品1-4*/
.gift-m1{
	position: absolute;
	display: inline-block;
	width: 163px;
	height: 165px;
	background: url(../images/gift-airpods.png) center no-repeat;
	background-size: contain;
	left: 10%;
    bottom: 20%;
	animation-delay: 0.2s;}
	
.gift-m2{
	position: absolute;
	display: inline-block;
	width: 214px;
	height: 181px;
	background: url(../images/gift-vencher711.png) center no-repeat;
	background-size: contain;
	right: 10%;
    bottom: 15%;
	animation-delay: 0.4s;}	

.gift-m3{
	position: absolute;
	display: inline-block;
	width: 278px;
	height: 131px;
	background: url(../images/gift-pxvencher.png) top center no-repeat;
	background-size: contain;
	left: 18%;
    bottom: 12%;
	animation-delay: 0.4s;}

.gift-m4{
	position: absolute;
	display: inline-block;
	width: 167px;
	height: 82px;
	background: url(../images/gift-linepoints.png) center no-repeat;
	background-size: contain;
	right: 32%;
    bottom: 42%;
	animation-delay: 0.4s;}	


/*裝飾石路 & 編號 1-4*/
.mission1::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 146px;
	height: 65px;
	background: url(../images/deco-stone1.png) center no-repeat;
	background-size: auto;
	bottom: 30px;
	right: 0;}

.mission1::before{
	content: '';
	opacity: 0;
	position: absolute;
	display: inline-block;
	width: 45px;
	height: 64px;
	background: url(../images/icon-stop1.png) center no-repeat;
	background-size: auto;
	right: 10%;
	animation: fadeInUp1-ani 1s ease-in-out forwards;
	animation-delay: 1s;}

.mission2::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 68px;
	height: 98px;
	background: url(../images/deco-stone2.png) center no-repeat;
	background-size: auto;
	bottom: 30px;
	left: -60px;}

.mission2::before{
	content: '';
	opacity: 0;
	position: absolute;
	display: inline-block;
	width: 45px;
	height: 64px;
	background: url(../images/icon-stop2.png) center no-repeat;
	background-size: auto;
	left: 30px;
	animation: fadeInUp2-ani 1s ease-in-out forwards;
	animation-delay: 1.5s;}

.mission3::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 106px;
	height: 45px;
	background: url(../images/deco-stone3.png) center no-repeat;
	background-size: auto;
	bottom: 80px;
	right: 0;}

.mission3::before{
	content: '';
	opacity: 0;
	position: absolute;
	display: inline-block;
	width: 45px;
	height: 64px;
	background: url(../images/icon-stop3.png) center no-repeat;
	background-size: auto;
	right: 10%;
	animation: fadeInUp3-ani 1s ease-in-out forwards;
	animation-delay: 1.8s;}

.mission4::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 38px;
	height: 47px;
	background: url(../images/deco-stone4.png) center no-repeat;
	background-size: auto;
	bottom: 130px;
	left: 0;}

.mission4::before{
	content: '';
	opacity: 0;
	position: absolute;
	display: inline-block;
	width: 45px;
	height: 64px;
	background: url(../images/icon-stop4.png) center no-repeat;
	background-size: auto;
	left: 12%;
	animation: fadeInUp4-ani 1s ease-in-out forwards;}


/*任務鈕*/

.btn-m1{
	position: absolute;
    display: inline-block;
    width: 156px;
    height: 50px;
    background: url(../images/btn-m1.png) center no-repeat;
    background-size: auto;
    bottom: 30px;
	right: 34%;
	animation-delay: 1.1s;}

.btn-m2-1{
	position: absolute;
    display: inline-block;
    width: 156px;
    height: 50px;
    background: url(../images/btn-m2-1.png) center no-repeat;
    background-size: auto;
	bottom: 15%;
	left: 18%;
	animation-delay: 1.2s;}

.btn-m2-2{
	position: absolute;
    display: inline-block;
    width: 156px;
    height: 50px;
    background: url(../images/btn-m2-2.png) center no-repeat;
    background-size: auto;
	bottom: 6%;
	right: 20%;
	cursor: pointer;
	animation-delay: 1.3s;}	

.btn-m3-1{
	position: absolute;
    display: inline-block;
    width: 156px;
    height: 50px;
    background: url(../images/btn-m3-1.png) center no-repeat;
    background-size: auto;
	bottom: -5%;
	left: 18%;
	animation-delay: 1.1;}

.btn-m3-2{
	position: absolute;
    display: inline-block;
    width: 156px;
    height: 50px;
    background: url(../images/btn-m3-2.png) center no-repeat;
    background-size: auto;
	bottom: 0%;
	right: 18%;
	animation-delay: 1.2s;}

.btn-m4-1{
	position: absolute;
    display: inline-block;
    width: 156px;
    height: 49px;
    background: url(../images/btn-m4-1.png) center no-repeat;
    background-size: auto;
	bottom: 10%;
	left: 18%;
	animation-delay: 1.1s;}

.btn-m4-2{
	position: absolute;
    display: inline-block;
    width: 185px;
    height: 50px;
    background: url(../images/btn-m4-2.png) center no-repeat;
    background-size: auto;
	bottom: 2%;
	right: 15%;
	animation-delay: 1.2s;}


/*----------------------------------------*/
/*-----------------保寶村-----------------*/
/*----------------------------------------*/

.vipMember-wrap{
	width: 100%;
	padding: 40px;}

.vipMember{
	width: 100%;
	margin: 0 auto;
	max-width: 1400px;
	padding: 20px;
	background: #f9ffd8;
	border-radius: 50px;}

/*保寶村-櫻花*/
.vipMember-wrap .deco-sakuraL {
	height: 10%;
    left: 0;
    top: 0;
    z-index: 1;
    background-position: left;}

.vipMember-wrap .deco-sakuraR {
	height: 10%;
    right: 0;
    top: 65%;
    z-index: 1;
    background-position: right;}	

.vipMember-wrap .deco-sakuraL.positon2{
	top:auto;
	bottom:0;}

/*保寶村招牌*/
.icon-vipMember{
	position: absolute;
	display: block;
	position: absolute;
	width: 184px;
	height: 214px;
	background: url(../images/icon-vipMember.png) top repeat-x;
	background-size: contain;
	left: 30%;
    top: 0;}

.vipmission-wrap{
	width: 100%;
	display: inline-flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin: 0 auto;}

.vipmission-wrap > div{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;}	


/*保寶任務*/
.mission5{
	display: inline-block;
	margin: 0 auto;
	width: 531px;
	height: 442px;
	background: url(../images/mission-5.png) center no-repeat;
	background-size: auto;
	margin-top: 200px;}

 /*任務5裝飾旗*/
 .deco-flag{
	position: absolute;
	display: inline-block;
	width: 511px;
	height: 243px;
	background: url(../images/deco-flag.png) center no-repeat;
	background-size: auto;
	top: -200px;
	left: 0;}

/*任務5加碼公告*/
.spTime-wrap{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 200px;
	left: -35px;
	bottom: 0;}

.deco-sptime1{
	FONT-WEIGHT: 100;
	position: absolute;
	display: inline-block;
	width: 231px;
	height: 172px;
	background: url(../images/deco-sptime1.png) center no-repeat;
	background-size: auto;
	left: 0;
	}

.deco-sptime1::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 99px;
	height: 39px;
	background: url(../images/icon-sptime1.png) center no-repeat;
	background-size: auto;
	left: 0px;
	top: -40px;
	animation: sptimefloating-ani 2s ease-in-out infinite;}

.deco-sptime2{
	/*opacity: 0;預設不顯示*/
	position: absolute;
	display: inline-block;
	width: 231px;
	height: 172px;
	background: url(../images/deco-sptime2.png) center no-repeat;
	background-size: auto;
	left: 130px;
	bottom: -80px;
	}

.deco-sptime2::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 99px;
	height: 39px;
	background: url(../images/icon-sptime2.png) center no-repeat;
	background-size: auto;
	left: 50px;
	top: -40px;
	animation: sptimefloating-ani 1.8s ease-in-out infinite;}	

.deco-sptime3{
	/*opacity: 0;預設不顯示 4/26開啟*/
	position: absolute;
	display: inline-block; 
	width: 241px;
	height: 175px;
	background: url(../images/deco-sptime3.png) center no-repeat;
	background-size: auto;
	right: -24px;
    top: 35px;}	

.deco-sptime3::before{
	content: '';
	position: absolute;
	display: inline-block; 
	width: 99px;
	height: 39px;
	background: url(../images/icon-sptime3.png) center no-repeat;
	background-size: auto;
	left: 60px;
	top: -40px;
	animation: sptimefloating-ani 3s ease-in-out infinite;}	


.deco-sptime1::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 42px;
	height: 31px;
	background: url(../images/deco-bush.png) center no-repeat;
	background-size: auto;
	bottom: -30%;
    right: -34%;}

.mission6, .mission7, .mission8{
	margin: 0 auto;
	display: inline-block;
	width: 540px;
	height: 330px;
	background: url(../images/mission-6.png) center no-repeat;
	background-size: auto;}

.mission7{
	background: url(../images/mission-7.png) center no-repeat;
	background-size: auto;}

.mission8{
	background: url(../images/mission-8.png) center no-repeat;
	background-size: auto;}

.mission9{
	display: inline-block;
	margin: 0 auto;
	width: 668px;
	height: 429px;
	background: url(../images/mission-9.png) center no-repeat;
	background-size: auto;
	margin-top: 200px;
	margin-left: 20px;}


/*任務獎品5-9*/
.gift-m5{
	position: absolute;
	display: inline-block;
	width: 187px;
	height: 201px;
	background: url(../images/gift-iphone12.png) center no-repeat;
	background-size: contain;
	left: 10%;
    bottom: 45%;
	animation-delay: 0.4s;}

.gift-m6{
	position: absolute;
	display: inline-block;
	width: 211px;
	height: 165px;
	background: url(../images/gift-SKMvencher1.png) center no-repeat;
	background-size: contain;
	left: 2%;
    bottom: 30%;
	animation-delay: 0.5s;}
	
.gift-m7{
	position: absolute;
	display: inline-block;
	width: 187px;
	height: 201px;
	background: url(../images/gift-foodCupon.png) center no-repeat;
	background-size: contain;
	right: 5%;
    bottom: 30%;
	animation-delay: 0.4s;}
	
.gift-m8-1{
	position: absolute;
	display: inline-block;
	width: 128px;
	height: 125px;
	background: url(../images/gift-appleWatch.png) center no-repeat;
	background-size: contain;
	right: 14%;
    bottom: 5%;
	animation-delay: 0.4s;}
	
.gift-m8-2{
	position: absolute;
    display: inline-block;
    width: 138px;
    height: 259px;
    background: url(../images/gift-ps5.png) center no-repeat;
    background-size: contain;
    right: 0;
    bottom: 0;
	animation-delay: 0.2s;}	

.gift-m9{
	position: absolute;
	display: inline-block;
	width: 211px;
	height: 165px;
	background: url(../images/gift-SKMvencher2.png) center no-repeat;
	background-size: contain;
	right: 0;
    bottom: 35%;
	animation-delay: 0.4s;}	

/*加碼iparking*/
.icon-iparking{
	position: absolute;
	display: inline-block;
	width: 322px;
	height: 86px;
	background: url(../images/icon-iparking.png) top center no-repeat;
	background-size: auto;
	bottom: 15%;
	right: 20%;
	animation-delay: 1.5s;}		

/*保寶任務鈕*/

.btn-m5{
	position: absolute;
    display: inline-block;
    width: 155px;
    height: 49px;
    background: url(../images/btn-m5-1.png) center no-repeat;
    background-size: auto;
	bottom: 50%;
	right: 20%;
	animation-delay: 1s;}

.btn-m6{
	position: absolute;
    display: inline-block;
    width: 205px;
    height: 49px;
    background: url(../images/btn-m6-1.png) center no-repeat;
    background-size: auto;
	bottom: 10%;
	right: 30%;
	animation-delay: 1.2s;}	

.btn-m7{
	position: absolute;
    display: inline-block;
    width: 205px;
    height: 49px;
    background: url(../images/btn-m7-1.png) center no-repeat;
    background-size: auto;
	bottom: 16%;
	right: 32%;
	animation-delay: 1.1s;}

.btn-m8-wrap{
	display: flex;
	justify-content: space-evenly;
	-ms-justify-content: space-evenly;
	position: absolute;
	width: 550px;
	height:230px;
	background: url(../images/mission8-bg.png) center no-repeat;
    background-size: auto;
	left: 0;
	bottom: -230px;}

.btn-m8-wrap > a{ margin: 0 auto;}

.btn-1ylife{
	display: inline-block;
	width: 120px;
	height: 147px;
	background: url(../images/btn-1ylife.png) center no-repeat;
    background-size: auto;
	top: 26px;
	animation-delay: 1s;}

.btn-enjour{
	display: inline-block;
	width: 114px;
	height: 146px;
	background: url(../images/btn-enjour.png) center no-repeat;
    background-size: auto;
	top: 15px;
	animation-delay: 1.2s;}	
	
.btn-newlife{
	display: inline-block;
	width: 114px;
	height: 146px;
	background: url(../images/btn-newlife.png) center no-repeat;
    background-size: auto;
	top: 70px;
	animation-delay: 1.3s;}	

.btn-elife{
	display: inline-block;
	width: 114px;
	height: 146px;
	background: url(../images/btn-elife.png) center no-repeat;
    background-size: auto;
	top: 48px;
	animation-delay: 1.4s;}	

.btn-m9-1{
	position: absolute;
    display: inline-block;
    width: 155px;
    height: 49px;
    background: url(../images/btn-m9-1.png) center no-repeat;
    background-size: auto;
	bottom: -6%;
	right: 50%;
	animation-delay: 1.1s;}

.btn-m9-2{
	position: absolute;
    display: inline-block;
    width: 155px;
    height: 49px;
    background: url(../images/btn-m9-2.png) center no-repeat;
    background-size: auto;
	bottom: -5%;
	right: 20%;
	animation-delay: 1.2s;}	

.btn-crditcard{
	position: absolute;
    display: inline-block;
    width: 134px;
    height: 103px;
    background: url(../images/btn-creditcard.png) center no-repeat;
    background-size: auto;
	bottom: -12%;
    right: 0;
	animation: sptimefloating-ani 2s ease infinite;}

/*----------------------------------------*/
/*-----------------列車----------------*/
/*----------------------------------------*/

.trainRail-wrap{
	position: fixed;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	pointer-events: none;}

.deco-rail{
	position: relative;
	display: inline-block;
	width: 89px;
	height: 2000px;
	background: url(../images/theme-rail.png) top center repeat-Y;
	background-size: auto;}

.theme-trainHead{
	opacity: 0;/*預設不顯示，滾動後出現*/
	position: absolute;
	display: inline-block;
	width: 111px;
	height: 122px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: headDance-ani 1.5s ease-in-out infinite;}

.theme-trainHead::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 96px;
	height: 74px;
	background: url(../images/theme-trainHandR.png) center no-repeat;
	background-size: auto;
	z-index: -1;
	right: -90px;
	animation: handwave-ani1 1.5s ease-in-out infinite;
	animation-delay: 2s;}

.theme-trainHead::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 35px;
	height: 28px;
	background: url(../images/theme-trainHandL.png) top center no-repeat;
	background-size: auto;
	z-index: -1;
	top: 55px;
    left: -26px;
	animation: handwave-ani2 1.3s ease-in-out infinite;}	


/*連結特效*/
.newlymission-wrap a:hover, 
.vipMember a:hover{
	transform: translateY(-5px);
	transition: 0.5s;}

.newlymission-wrap a:active, 
.vipMember a:active{
	transform: scale(0.9);
	transition: 0.5s;}	

/*----------------------------------------*/
/*-----------------活動辦法----------------*/
/*----------------------------------------*/

.rules-wrap{
	width: 100%;
	padding: 20px;
	background: #fff;}

.rules{
	display: inline-block;
	background: #ffebed;
	max-width: 1400px;
	padding: 10px;
	border-radius: 10px;}
	
.rules ol{
	opacity: 0;
	height: 40px;
	overflow: hidden;
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	text-align: left;}

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

.rules .subRules1{
	color: #ed868f;
	list-style: none;
	padding: 20px;
	background: #ffe1e1;
	margin: 10px 0;
	border-radius: 10px;}

.rules .subRules2{
	list-style: none;
	padding: 10px 10px 0px;
	line-height: 18px;}

/*----強調用色----*/
.word-style1{color: #f95e6c; font-weight: 600;}
.subRules1 .word-style1::before{
	content: '★';
	font-size: 14px;
	margin-right: 4px;
	vertical-align: middle;
	display: inline-block;
	height: 24px;}

/*活動辦法開關*/
#rules-switch{display: none;}
	/*展開箭頭*/
.rules-switch{cursor: pointer;}
.rules-switch h1::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 39px;
	height: 39px;
	background: url(../images/icon-arrow.png) center no-repeat;
	transform: rotate(180deg);
	background-size: auto;
	transition: all 0.5s ease 0s;}

#rules-switch:checked ~ .rules-switch h1::after{transform: rotate(0deg);}
#rules-switch:checked ~ .rules > ol{
	padding: 30px 60px;
	height:auto;}
#rules-switch:checked ~ .rules > ol {opacity: 1;}		




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

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

.btnTop{
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	font-weight: 600;
	padding: 5px;
	background: #5fceca;
	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;}

/*----footer----*/

footer{
	background: #fff;
	font-family: '微軟正黑體';
	font-size: 1em;	
	text-align: center;
	font-weight: 600;
	padding: 20px;
	font-size: 18px;}

/*推薦攻略、綁定教學*/
.popUp-wrap{
	position: fixed;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(00, 00, 00, 0.8);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;}

.popup-content{
	position: absolute;
	background: #fff;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 50%;
	overflow: auto;
	max-width: 800px;
	padding: 20px;}

.popup-content img{ width: 100%;}
.memberonlym, .appm{display: none;}
.app{
	display: inline-block;
	position: absolute;
	width: 70%;
    height: auto;
	top: 10%;
	right: 0;
	z-index: 1;}

.app img{width: 40%;}

/*關閉蓋版X*/
.sp-close{
	position: absolute;
	right: 10%;
	top: 10%;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 1;}

.sp-close span{
	position: absolute;
	width: 2px;
	height: 100%;
	background: #fff;	
	transform: rotate(45deg);}

.sp-close span:nth-of-type(2){transform: rotate(135deg);}


/*---------------*/
/*----動畫區-----*/
/*---------------*/

/*雲朵動畫*/
@keyframes cloudsfloating-ani1 { 
	0%{
		opacity: 0;
		-webkit-transform: translateX(-200px);
		transform: translateX(-200px);}

	80%{
		opacity: 1;}

	100%{
		opacity: 0;
		-webkit-transform:translateX(500px) scale(0.8);
		transform:translateX(500px) scale(0.8);}
	}

@keyframes cloudsfloating-ani2 { 
	0%{
		opacity: 0;
		-webkit-transform: translateX(-500px);
		transform: translateX(-500px);}

	80%{
		opacity: 1;}

	100%{
		opacity: 0;
		-webkit-transform:translateX(200px) scale(0.8);
		transform:translateX(200px) scale(0.8);}
	}	


/*出發囉！動畫*/

@keyframes gogogo1-ani { 
	0%{ transform: translateY(0px);
		-webkit-transform: translate(0px);}		
	50%{transform: translateY(6px);
		-webkit-transform: translateY(6px);	}
	100%{transform: translateY(0px);
		-webkit-transform: translateY(0px);}
	}

@keyframes gogogo2-ani { 
	0%{ transform: translateY(0px);
		-webkit-transform: translate(0px);}
	50%{transform: translateY(-6px);
		-webkit-transform: translateY(-6px);}
	100%{transform: translateY(0px);
		-webkit-transform: translateY(0px);}
	}

@keyframes gogogo3-ani { 
	0%{ transform: translateY(0px);
		-webkit-transform: translate(0px);}
	50%{transform: translateY(-8px);
		-webkit-transform: translateY(-8px);}
	100%{transform: translateY(0px);
		-webkit-transform: translateY(0px);}
	}

/*列車進站*/
@keyframes trainRun1-ani{
	0%{transform: translateX(900px);}
	30%{transform: translateX(-30%);}
	70%{transform: translateX(-30%);}
	90%{transform: translateX(-300%);}
	100%{transform: translateX(-300%);}
}

@keyframes trainRun2-ani{
	0%{transform: translateX(200%);}
	30%{transform: translateX(30%);}
	70%{transform: translateX(30%);}
	90%{transform: translateX(-300%);}
	100%{transform: translateX(-300%);}
}

@keyframes trainRun3-ani{
	0%{transform: translateX(200%);}
	30%{transform: translateX(-20%);}
	70%{transform: translateX(-20%);}
	90%{transform: translateX(-300%);}
	100%{transform: translateX(-300%);}
}


/*stop入場動畫上→下*/
@keyframes fadeInUp1-ani {
	0%{
		opacity: 0;
		top: 55%;}
	   
  100%{
		opacity: 1;
		top:60%;}
	}

@keyframes fadeInUp2-ani {
	0%{
		opacity: 0;
		top: 5%;}
	   
  100%{
		opacity: 1;
		top:25%;}
	}

@keyframes fadeInUp3-ani {
	0%{
		opacity: 0;
		top: 30%;}
	   
  100%{
		opacity: 1;
		top:50%;}
	}

@keyframes fadeInUp4-ani {
	0%{
		opacity: 0;
		top: 20%;}
	   
  100%{
		opacity: 1;
		top:28%;}
	}



/*icon-sptime飄浮動畫*/
@keyframes sptimefloating-ani { 
	0%{
		-webkit-transform: translateY(0px);
		transform: translateY(0px);}

	50%{
		-webkit-transform:translateY(-5px);
		transform:translateY(-5px);}

	100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);}
	}

/*火車頭動畫*/
@keyframes handwave-ani1 { 
	0% { transform: rotate(0deg); transform-origin: left bottom; }
	50% { transform: rotate(-8deg); transform-origin: left bottom; }
	100% { transform: rotate(0deg); transform-origin: left bottom; }
	}

@keyframes handwave-ani2  { 
	0% { transform: rotate(0deg); transform-origin: right bottom; }
	50% { transform: rotate(-10deg); transform-origin: right bottom; }
	100% { transform: rotate(0deg); transform-origin: right bottom; }
	}

				
@keyframes headDance-ani  { 
	0% { transform: translate(-50%, -50%) scale(1);
		-ms-transform: translate(-50%, -50%) scale(1);  }

	50% { transform:translate(-50%, -50%) scale(1.05);
		-ms-transform:translate(-50%, -50%) scale(1.05);  }

	100% { transform:translate(-50%, -50%) scale(1);
		-ms-transform:translate(-50%, -50%) scale(1);}
	}


	





/*飄浮動畫*/
@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);}
}

@keyframes duck-ani{
	0%{transform: rotate(0deg);
		transform-origin: bottom right;}
	50%{transform: rotate(-5deg);
		transform-origin: bottom right;}
	100%{transform: rotate(0deg);
		transform-origin: bottom right;}
}




@keyframes tears-ani2{
	0%{transform: translateX(-5px);}
	50%{transform: translateX( 0px);}
	100%{transform: translateX( 5px);}
}

@keyframes crybaby-ani{
	0%{transform: scale(1);}
	50%{transform: scale(0.99);}
	100%{transform: scale(1);}
}

/*抽的動畫*/
@keyframes floating-ani2 { 
	0%{-webkit-transform: rotate(15deg) translateY(0px);
		transform: rotate(15deg) translateY(0px);}

	50%{-webkit-transform:rotate(15deg) translateY(-5px);
		transform:rotate(15deg) translateY(-5px);}

	100%{-webkit-transform:rotate(15deg) translateY(0px);
		transform:rotate(15deg) translateY(0px);}
	}

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