@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+TC:wght@100;500;700;900&display=swap');

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

  *{font-family: 'Noto Sans TC', sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #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:#ffffff;
	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 2%;
	max-width: 1200px;}

.logo-wrap {
    display: inline-block;
    position: relative;
    width: auto;
    text-align: left;
    height: 70px;
    line-height: 4px;
    z-index: 1;
    color: #fff;
    font-size: 22px;
}

.logo-wrap img {
    height: 80%;
    vertical-align: middle;
    margin: 4% 0;
}

/*-- 選單 --*/

.menu-wrap {
    display: flex;
    position: absolute;
    width: 100%;
    max-width: 550px;
    align-items: center;
    justify-content: space-evenly;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    padding: 8px;
    font-size: 1rem;

    li {
        display: inline-block;
        flex: 1;
        max-width: 150px;
        font-size: clamp(0.8rem, 1.1em, 1.3em);
        padding: 8px;
        color: #fff;
        cursor: pointer;
        border-top: 0px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 0px solid transparent;
        border-left: 0px solid transparent;
    }

    li:hover,
    li:active {
        color: #ffff00;
        animation: border-ani 1s ease infinite;
    }
}

.menu-wrap > li > span.w-break {
    display: none;
}

@keyframes border-ani {
    0% {
        border: 0px solid transparent;
    }
    15% {
        border-top: 2px solid #ffff00;
    }
    30% {
        border-right: 2px solid #ffff00;
    }
    45% {
        border-bottom: 2px solid #ffff00;
    }
    60% {
        border-left: 2px solid #ffff00;
    }
    100% {
        border-top: 0px solid transparent;
    }
}body{background: #ffffff;}

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

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	background: url(../images/theme-bg.png) top -5px center no-repeat;
	background-size: auto;
	min-height: 400px;
	overflow: hidden;
}

.theme-shine{
            position: absolute;
            width: 100%;
            height: 100vh;
            display: inline-block;
            right: 0;
            top: 0;
            pointer-events: none;

            img{
                display: inline-block;
                position: absolute;
                height: 120%;
                right: 0;
                top: -10px;
                animation: shine-ani 3s ease-in-out infinite;}

            img:nth-of-type(2){ right: 10%;}
            img:nth-of-type(3){
                left: 10%;
                right: initial;
                animation: shine-ani2 3.2s ease-in-out infinite;               
            }           
            
            img:nth-of-type(4){
                left: 0;
                right: initial;
                animation: shine-ani2 3.2s ease-in-out infinite;
            }
        }

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

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


.theme{
	display: inline-block;
	width: 100%;
	max-width: 1400px;
	padding: 260px 20px 20px;}

.theme > .theme-title{
	display: inline-block;
	width: 100%;
	max-width: 692px;
	margin: 0 auto;}

.theme > .theme-title > img{
	 display: inline-block;
	 width: 100%;
	 left: 5%;}

.theme-alung{
	position: absolute;
	display: inline-block;
    width: 57.8%;
    height: 320px;
    max-width: 400px;
    left: -15%;
    bottom: -3%;
	background: url(../images/theme-alung.png) bottom center no-repeat;
	background-size: contain;
	z-index: 1;}

/*.theme-date{
	position: absolute;
	display: inline-block;
	width: 43.78%;
	height: 82.21%;
	max-width: 303px;
	right: -10%;
    bottom: 50%;}	

.theme-date > img{
	display: inline-block;
	width: 100%;}*/	

.theme-date{
	position: absolute;
    	display: inline-block;
    	width: 50%;
    	max-width: 380px;
    	height: 180px;
    	left: 9%;
    	top: -9%;
	background: url(../images/theme-date.png) center no-repeat;
	background-size: contain;}

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


.theme > h1{
	position: absolute;
	display: block;
	width: 100%;
	font-size: 40px;
	color: transparent;
	margin: 0 auto;}

/*女力好禮限時登場*/
.theme-round2{
	display: inline-block;
    position: absolute;
    left: 52%;
    top: -100%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    min-width: 200px;
    z-index: 2;}

.theme-round2 > span{
	display: inline-block;
	width: 100%;
 	animation-delay: 1s;}

.theme-round2 > span > span{
	display: inline-block;
	width: 100%;
	animation: round2-ani 2s ease-in-out infinite;}
	@keyframes round2-ani{
		 0%{transform: translateY(2px);
			transform-origin: center top;}
		50%{transform: translateY(-2px);
			transform-origin: center top;}
		100%{transform: translateY(2px);
			transform-origin: center top;}
	}

.theme-round2 > span > span > img{
	display: inline-block;
	width: 100%;
	max-width: 800px;}
	
/* .theme-round2 > span::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 20.25%;
	max-width: 78px;
	height: 28.62%;
	background: url(../images/theme-round2tag.png) center no-repeat;
	background-size: contain;
	right: 25%;
	bottom: 20%;
	animation: round2tag-ani 1.5s ease-in-out infinite;}
	@keyframes round2tag-ani{
		 0%{transform: rotate(2deg);
			transform-origin: bottom left;}
		 50%{transform: rotate(-2deg);
			transform-origin: bottom left;}
		 100%{transform: rotate(2deg);
			transform-origin: bottom left;}
	} */



/*-- 活動 --*/
.campaign-wrap2 > h3 > span {
    display: inline-block;
    position: absolute;
    width: 100%;
    max-width: 539px;
    height: 75px;
    left: 50%;
    transform: translateX(-50%);
}
.campaign-wrap2 > h3 > span > img {
    display: inline-block;
    width: 100%;}
.campaign-wrap2 > h3 {
    display: inline-block;
    position: absolute;
    width: 100%;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    color: transparent;
}
.campaign-wrap2{
    display: inline-block;
    width: 100%;
    background: #fff;
    padding: 0 2%;
    margin: 80px 0 0;
}

.campaign-wrap{
	width: 100%;
	max-width: 1200px;
    margin: 0 auto;
}


.campaign-wrap h2{
	display: inline-block;
    	width: 100%;
    	font-weight: 600;
    	font-size: 30px;
    	color: #762788;
    	text-align: left;
    	max-width: 1050px;}

.campaign-wrap h2 > span.h2-mark{
	display: inline-block;
	font-weight: 600;
	font-size: 40px;
	color: #fff;
	margin: 2px 5px;}

.campaign-wrap h2 > span.h2-mark::after{
	position: absolute;
	content: attr(data-storke);
	left: 0;
	-webkit-text-stroke: 10px #326360;
	color: #fff;
	z-index: -1;}

.campaign-wrap h2 > span.w-break{display: none;}


.campaign1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 1400px;
	margin: 20px auto;
	padding: 40px 20px;}

.campaign1 > .p-card{
	display: inline-block;
	flex: 1;
	max-width: 380px;
	min-height: 360px;
	background: #fff;
	border: 4px solid #762788;
	border-radius: 10px;
	margin: 30px;
	padding: 40px 15px 20px;}

.campaign1 > .p-card:hover,
.campaign1 > .p-card:active{
	transform: translateY(-10px);}





.p-card > h3{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	color: transparent;
 	z-index: 1;}

.p-card > h3 > span{
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 290px;
	height: 70px;
	left: 50%;
	transform: translateX(-50%);}
	
.p-card > h3 > span > img{
	display: inline-block;
	width: 100%;}

.p-card > .p-content {
	font-size: 1.8em;
	font-weight: 600;
	color: #762788;}

.p-card > .p-content > span.number{
	font-size: 1.5em;
	color: #762788;}
	
.p-card > .prize-content {
	display: inline-block;
	width: 100%;
	padding: 20px 5px;
	margin-top: 10px;
	font-size: 1.5em;
	font-weight: 600;
	color: #4d155b;
	background: #e5e5e5;
	border-radius: 10px;}

.p-card > .prize-pic{
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 340px;
	left: 50%;
	bottom: -3%;
	transform: translateX(-50%);}

.p-card > .prize-pic > img{
	display: inline-block;
	width: 100%;}

.p-card:nth-of-type(2) > .prize-pic > img {animation-delay: 0.2s;}
.p-card:nth-of-type(2) > .prize-pic > img {animation-delay: 0.4s;}
.p-card:nth-of-type(3) > .prize-pic > img {animation-delay: 0.6s;}

.tag-giveaway::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 15%;
	max-width: 54px;
	height: 51px;
	right: 92%;
    top: -109px;
	background: url(../images/tag-giveaway.png) center no-repeat;
	background-size: contain;
	animation: prize-tag-ani 1s ease infinite;}

.tag-win::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 15%;
	max-width: 54px;
	height: 51px;
	left: -7%;
    top: -109px;
	background: url(../images/tag-win.png) center no-repeat;
	background-size: contain;
	animation: prize-tag-ani 1s ease infinite;}

	@keyframes prize-tag-ani{
		0%{transform: rotate(2deg) scale(1);}
		50%{transform: rotate(-2deg) scale(1.1);}
		100%{transform: rotate(2deg) scale(1);}
	}

.p-card.g2 .prize-pic.tag-win::after{
	left: 6%;
    top: 5px;}

.teamwalk .prize-pic.tag-win::after{
	width: 17%;
    left: 12%;
    top: 20%;}
	
.campaign2 > .p-card{
	display: inline-block;
	flex: 1;
	width: 100%;
	max-width: 1180px;
	background: #fff;
	border: 4px solid #762788;
	border-radius: 10px;
	margin: 10px 0;
	padding: 40px 20px;}

.p-card.g4 > h3{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: -110px;
	left: 50%;
	transform: translateX(-50%);
	color: transparent;}

.p-card.g4 > h3 > span{
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 550px;
	height: 75px;
	left: 50%;
	transform: translateX(-50%);}
	
.p-card > h3 > span > img{
	display: inline-block;
	width: 100%;}

.teamwalk{ 
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;}
	
.camp4 .p-content:hover,
.camp4 .p-content:active{transform: translateY(-10px);}

.camp4 > .p-content{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	align-items: center;}
.camp4 > .p-content2{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	align-items: center;}

.camp4 > .p-content > div{
	display: inline-block;
	flex: 1;
	width: 100%;}

.camp4 > .p-content2 > div{
	display: inline-block;
	flex: 1;
	width: 100%;}

.camp4 > .p-content > div:nth-of-type(2){
	background: url(../images/prize4-bg.png) center repeat;
	background-size: cover;}

.camp4 > .p-content > div > h4{
	display: inline-block;
	font-size: 2em;
	padding: 5px 20px;
	color: #762788;
	background: #ffff00;
	border-radius: 50px;
	margin: 0 auto;
	margin-bottom: 10px;}

.camp4 > .p-content > div > p{
	display: inline-block;
	color: #762788;
	font-weight: 600;
	font-size: 1.3em;}

.camp4 > .p-content:nth-of-type(1) > div > h4::before{
	content: 'TeamWalk/';
	position: absolute;
	font-size: 0.6em;
	color: #762788;
	top: -30px;
	left: 0;}

.camp4 > .p-content:nth-of-type(2) > div > h4::before{
	content: '任務B /';
	position: absolute;
	font-size: 0.6em;
	color: #762788;
	top: -30px;
	left: 0;}

.camp4 .p-content .prize-pic{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/prize4-bg-circleWhite.png) no-repeat center;
	background-size: 70%;}

.camp4 .p-content2 .prize-pic{
	display: inline-block;
	width: 100%;
	height: 100%;}

.camp4 .p-content .prize-pic > img{
	display: inline-block;
	width: 100%;
	max-width: 240px;}	
.camp4 .p-content2 .prize-pic a > img{
	display: inline-block;
	width: 100%;
	max-width: 240px;}	

.camp4 .p-content:nth-of-type(1) .prize-pic > img{animation-delay: 0.2s;}	
.camp4 .p-content:nth-of-type(2) .prize-pic > img{animation-delay: 0.4s;}	

.camp4 .p-content:nth-of-type(1) .prize-pic2 > img{animation-delay: 0.2s;}	
.camp4 .p-content:nth-of-type(2) .prize-pic2 > img{animation-delay: 0.4s;}	

.camp4 .p-content2:nth-of-type(1) .prize-pic > img{animation-delay: 0.2s;}	
.camp4 .p-content2:nth-of-type(2) .prize-pic > img{animation-delay: 0.4s;}	

.camp4 .p-content2:nth-of-type(1) .prize-pic2 > img{animation-delay: 0.2s;}	
.camp4 .p-content2:nth-of-type(2) .prize-pic2 > img{animation-delay: 0.4s;}	

.camp4 .tag-win::after{
	top: 30px;
	left: 50%;}

/*-- 如何投保 --*/

.deco-alung {
    position: absolute;
    display: inline-block;
    width: 100%;
    max-width: 2000px;
    height: 200px;
    background: url(../images/deco-alung.png) top center no-repeat;
    background-size: contain;
    top: 108px;
    right: -3px;
    z-index: 1;
    pointer-events: none
}
.moreBenefits-wrap{
	display: inline-block;
	width: 100%;
	background: #fff;
	padding: 70px 2% 0;
	margin: 60px 0 0;}

.moreBenefits-wrap > h3{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	color: transparent;}

.moreBenefits-wrap > h3 > span{
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 539px;
	height: 75px;
	left: 50%;
	transform: translateX(-50%);}
	
.moreBenefits-wrap > h3 > span > img{
	display: inline-block;
	width: 100%;}

.moreBenefits-wrap > h2{
	display: inline-block;
	font-weight: 600;
	font-size: 40px;
	color: #762788;}

.moreBenefits-wrap > h2::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 100px;
	height: 125px;
	right: 0;
	top: -100px;
	background: url(../images/deco-logo.png) center no-repeat;
	background-size: contain;
	animation: logo-ani 2s ease-in-out infinite;}
	@keyframes logo-ani{
		0%{ transform: rotate(5deg);
			transform-origin: bottom center;}
		50%{ transform: rotate(-5deg);
			 transform-origin: bottom center;}
		100%{ transform: rotate(5deg);
			  transform-origin: bottom center;}
		}

.moreBenefits-wrap > h2 > span{
	display: inline-block;
	color: #ff1414;}

/*-- TeamWalk優惠 --*/
.teamwalk-wrap{
	display: inline-block;
    flex: 1;
    width: 100%;
    max-width: 1180px;
    background: #fff;
    border: 4px solid #762788;
    border-radius: 10px;
    margin: 30px auto;
    padding: 20px;}

.teamwalk-wrap .teamwalk{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;}

.teamwalk > div:nth-of-type(1):hover,
.teamwalk > div:nth-of-type(1):active,
.teamwalk > div:nth-of-type(2):hover,
.teamwalk > div:nth-of-type(2):active
{transform: translateY(-10px);}

.teamwalk-wrap .teamwalk > div{
	flex: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	background: #f3ecf7;
	border-radius: 10px;
	margin: 10px;}

.tw-title {
	display: inline-block;
	position: absolute;
	width: 180px;
	height: 50px;
	background: url(../images/tw-prizeTitle1.png) center no-repeat;
	background-size: contain;
	top: -25px;
	left: -20px;}

.tw-title.gift1 {
	background: url(../images/tw-prizeTitle1.png) center no-repeat;
	background-size: contain;}

.tw-title.gift2 {
	background: url(../images/tw-prizeTitle2.png) center no-repeat;
	background-size: contain;}

.teamwalk-wrap .teamwalk div > div {
	flex: 1;
	display: inline-block;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px;}

.teamwalk div div p{
	display: inline-block;
    color: #4d155b;
    font-weight: 600;
    font-size: 1.5em;
	line-height: 1em;}

.teamwalk div div p > span.number{
	font-size: 1.5em;
    color: #326360;}

.teamwalk div div .prize-pic{
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 30px 0 0 0;}

.teamwalk div div .prize-pic > img{
	display: inline-block;
	width: 100%;
	max-width: 200px;}

.note{
	display: block;
	width: 100%;
	max-width: 150px;
	font-size: 1.1em;
	font-weight: 600;
	color: #fff;
	background: #ff1414;
	padding: 5px;
	margin: 5px auto;
	border-radius: 5px;}

/*-- 鳳守愛 --*/
.cancer-wrap{
	display: inline-block;
    width: calc(100% + 10%);
    background: url(../images/cancerbn-bg.png) center repeat; background-size: cover;
    left: 50%;
    transform: translateX(-50%);}

.cancer-wrap .cancer{
	display: inline-block;
	width: 100%;
    max-width: 1180px;}

.cancer-wrap > h3{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	color: transparent;
	z-index: 1;}

.cancer-wrap > h3 > span{
	display: inline-block;
	position: absolute;
	width: 90%;
	max-width: 612px;
	height: 75px;
	left: 50%;
	transform: translateX(-50%);}
	
.cancer-wrap> h3 > span > img{
	display: inline-block;
	width: 100%;}

.cancer-bn{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	cursor: pointer;}

.cancer-bn > img{
	display: inline-block;
	width: 100%;
	max-width: 1000px;}

.curves-bn > img{
	display: inline-block;
	width: 100%;
	max-width: 800px;}

.btn-cancer{
	display: inline-block;
	position: absolute;
	width: 300px;
	height: 80px;
	background: url(../images/btn-center.png) center no-repeat;
	background-size: contain;
	top: 75%;
	right: 48%;
	transform: translateY(-20%);}

.btn-cancer:hover,
.btn-cancer:active{
	transform: translateY(-10px);}




/*-- LINE優惠 --*/
.line-wrap{
	display: inline-block;
    width: calc(100% + 10%);
    background: url(../images/LINEbn-bg.png) center repeat;
    background-size: cover;
    margin: 100px 0 0;
    left: 50%;
    transform: translateX(-50%);}

.line-wrap .line{
	display: inline-block;
	width: 100%;
    max-width: 1180px;}

.line-wrap > h3{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	color: transparent;
	z-index: 1;}

.line-wrap > h3 > span{
	display: inline-block;
	position: absolute;
	width: 90%;
	max-width: 612px;
	height: 75px;
	left: 50%;
	transform: translateX(-50%);}
	
.line-wrap> h3 > span > img{
	display: inline-block;
	width: 100%;
	max-width: 540px;}

.line-bn{
	display: inline-block;
	width: 100%;
	max-width: 828px;
	cursor: pointer;}

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

.btn-line{
	display: inline-block;
	position: absolute;
	width: 300px;
	height: 80px;
	background: url(../images/btn-line.png) center no-repeat;
	background-size: contain;
	top: 49%;
	right: 9%;
	transform: translateY(-20%);}

.btn-line:hover,
.btn-line:active{
	transform: translateY(-10px);}	
	

.product-wrap{
    display: inline-block;
    width: 100%;
    max-width: 1200px;
    padding: 2% 0;
    margin-top: 16px;

    div{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        > div {
            display: inline-block;
            width: auto;
            max-width: 305px;
            margin: 2%;
            box-sizing: border-box;

            img{
                display: block;
                width: 100%;
                height: auto;
            }
        }
    
        > div:hover > img,
        > div:active > img{
            animation: product-ani 1s ease-in-out infinite;}
    
        > div::after{
            content: '';
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50% , -50%);
            background: url(../images/deco-product-stars.png) center no-repeat;
            background-size: contain;
            width: 120%;
            max-width: 370px;
            height: 117px;
            pointer-events: none;}
    
        > div:nth-of-type(odd)::after{
            top: 20%;}
    }
}

.swiper-horizontal {
    touch-action: pan-y;
}



/*-- 共用項目 --*/
.w-break{display: block;}

/*-- 按鈕 --*/
.btn-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px;}
	
.btn-active{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	height: 60px;
	font-size: 30px;
	font-weight: 600;
	color: #fff;
	line-height: 25px;
	padding: 15px 30px;
	padding-right: 50px;
	    background: #762788;
    border: 1px #ffff00 solid;
    border-radius: 20px;
    box-shadow: 0 10px 0 0 #ffff00;
	cursor: pointer;}

.campaign-wrap .btn-active{
	display: inline-block;
    color: #fff;
	max-width: 500px;
	font-size: 40px;
	word-break: keep-all;
	letter-spacing: 5px;}

.btn-active:hover,
.btn-active:active{
	transform: translateY(5px);
	box-shadow: 0 5px 0 0 #ddd1ea;}

.btn-active::after{
	content: '▲';
	display: inline-block;
	position: absolute;
	font-size: 24px;
	right: 20px;
	top: 50%;
	color: #ffff00;
	transform: translateY(-50%) rotate(90deg);}

.btn-active:hover::after,
.btn-active:active::after{
	animation: btn-active-ani 1s ease-in-out infinite;}
	@keyframes btn-active-ani{
		0%{ right: 20px;}
		50%{ right: 10px;}
		100%{ right: 20px;}
	}

.campaign-wrap > .campaign2 .btn-wrap{
	position: absolute;
	width: auto;
	left: 50%;
	bottom: -40%;
	transform: translateX(-50%);}

.campaign-wrap > .campaign2 .btn-wrap .btn-active{
	max-width: 280px;
	font-size: 30px;
	letter-spacing:initial;}

.moreBenefits-wrap > .teamwalk-wrap > .teamwalk > .btn-wrap{
	position: absolute;
    width: auto;
    left: 50%;
    bottom: -40%;
    transform: translateX(-50%);}

.teamwalk-wrap .btn-wrap > .btn-active{
	display: inline-block;
    color: #fff;
	max-width: 280px;
	font-size: 30px;
	letter-spacing:initial;
	padding: 15px 30px;
	padding-right: 50px;}

/* 手機版提示窗*/
.remider{
    display: inline-block;
    position: relative;
    width: auto;
    margin: 5px 0;
    padding: 10px;
    border-radius: 20px;
    background: #f3ecf7;
    top: 36px;
    animation: remider-ani 1s ease infinite;
    display:none;}
    @keyframes remider-ani{
        0%{ transform: translateX(5px);}
        50%{ transform: translateX(-5px);}
        100%{ transform: translateX(5px);}
    }
.card-wrap.product{
    overflow: hidden;
	background-color: #ffffde;
    .card{
        h2{
            color: #f3ecf7;
        }
    }
}

/*-- CTA按紐 --*/
.btn-cta{
    display: inline-block;
    position: absolute;
    width: 100%;
    max-width: 600px;
    top: 102%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;

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

.btn-cta2{
    display: inline-block;
    position: absolute;
    width: 100%;
    max-width: 400px;
    top: 108%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    z-index: 1;

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

.product-wrap .btn-cta{
    max-width: 155px;
    top: 95%;
    left: 50%;
    transform: translate(-50%,-50%);
}
    
.product-wrap .btn-cta:hover{
    transform: translate(-50%,-70%);}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;}
    
.product-wrap{
    .swiper-pagination{
        display: none;
    }
}





/*-- 共用區塊設定 --*/
.card-wrap{
    display: inline-block;
    width: 100%;
    padding: 0 2%;

    .card{
        display: inline-block;
        width: 100%;
        max-width: 1200px;
        padding: 32px 0px;

        h2{
            display: inline-block;
            width: 100%;
            color: #faede1;
            margin: 40px 0 0px;
            z-index: 1;
            
            .title{
                position: absolute;
                display: inline-block;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
    
                img{
                    display: inline-block;
                    width: 100%;
                    max-width: 470px;
                }
            }
        }
    }
}

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


/*-- 活動辦法 --*/
.rules-wrap{
	padding: 60px 20px 20px;
	margin-bottom: 40px;}

#rules-switch{display: none;}

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

.rules-title h3 {
	display: block;
	width: 100%;
	color: transparent;}

.rules-title h3 > span{
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 314px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;}

.rules-title h3 > span > img{
	display: inline-block;
	width: 100%;}

.rules{
	max-width: 1200px;
	margin: 20px auto 10px;
	padding: 20px 2%;
	height: 0;
	overflow: hidden;
	padding: 0;
	background: #f3ecf7;
    border: 1px solid #762788;}

.rules-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 25px ;
	height: 20px;
	background: url(../images/deco-triangle.png) center no-repeat;
	background-size: contain;
	bottom: -70px;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	transition: 0.5s;}

.rules ol {
	padding-left: 30px;
    padding-right: 10px;}

.rules > ol > li{
	color: #762788;
	font-size: 15px;}

.rules ol li{
	font-weight: 400;
	text-align: left;
	line-height: 24px;
	margin-bottom: 10px;}

.rules ol li h3{
	margin: 10px 0;
	text-align: left;
	font-size: 17px;
	white-space: pre-line;
	color: #326360;}
	
.rules ol li h3 span.break{display: none;}	
	
.rules ol li ol{
	padding: 5px;
	padding-left: 30px;
	margin-top: -5px;}

.rules ol li ol li{
	margin-left: 10px;
	list-style: square;
	font-weight: 400;
	margin-bottom: 5px;}

.rules ol li ul li span{color: #22b9ff;}

.rules ol li ol{padding-left: 5px;}
.rules ol li ol li{
	list-style: inherit;
    margin-bottom: 0;
    font-size: 15px;
    margin-left: 10px;
	color: #326360;}

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

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

.rules a {color: #ff3c00;}

/* 獎項表格 */
.prize-table{
	display: inline-block;
	width: 100%;
	background: #fff;
	padding: 2px;
	margin: 20px 0;}

.prize-table .table-title,
.prize-table .table-content{
	display: flex;
 	align-items: center;}

.prize-table .table-title > span{color: #fff;}

.prize-table .table-title{background: #762788;}

.prize-table .table-title > span:nth-of-type(1),
.prize-table .table-content > span:nth-of-type(1){
	flex: 3;
	text-align: left;
	padding: 5px 10px;
	border-left: 1px #eee solid;
	border-right: 1px #eee solid;
	padding: 5px;
	word-break: break-all;}

.prize-table .table-title > span:nth-of-type(2),
.prize-table .table-content > span:nth-of-type(2){
	flex: 3;
	text-align: left;
	padding: 5px 10px;
	border-left: 1px #eee solid;
	border-right: 1px #eee solid;}

.prize-table .table-title > span:nth-of-type(2){text-align: center;}

.prize-table .table-title > span:nth-of-type(3),
.prize-table .table-content > span:nth-of-type(3){
	flex: 2;
	text-align: left;
	padding: 5px;}

.prize-table .table-title > span:nth-of-type(3){text-align: center;}

.mark-red{
	color: #db491d;
	font-weight: 600;}

.prize-table .table-content:nth-of-type(odd){background: #f5edfc;}

.prize-table-note{
	padding: 10px;
	padding-left: 30px;}

.prize-table-note > li{
	font-size: 13px;
	color: #ff1414;
	text-align: left;
	list-style: disc;
	letter-spacing: 0.2px;}



/*-- 右側浮動BN --*/
.rightBN-wrap{
	display: inline-block;
	position: absolute;
	top: -160px;
	left: 50%;
	transform: translateX(-50%);}
	
.rightBN-wrap a{
	display: inline-block;
	width: 150px;
	height: auto;}

.rightBN-wrap a > img{
	display: inline-block;
	width: 100%;
	animation: rightBN-ani 2s ease-in-out infinite;}
	@keyframes rightBN-ani{
		0%{ transform: rotate(5deg);
			transform-origin: center bottom;}
		50%{ transform: rotate(-5deg);
			transform-origin: center bottom;}
		100%{ transform: rotate(5deg);
			transform-origin: center bottom;}
	}


.rightBN::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 45.78%;
	height: 39.15%;
	max-width: 78px;
	max-height: 65px;
	transform: scaleX(-1);
	left: 64%;
	bottom: 32%;
	z-index: -1;
	background: url(../images/deco-hand2.png) top center no-repeat;
	background-size: contain;
	animation: deco-hand-ani 2s ease infinite;}
	@keyframes deco-hand-ani{
		0%{ transform: rotate(-10deg);
			transform-origin: bottom right;}
		50%{ transform: rotate(-20deg);
			transform-origin: bottom right;}
		100%{ transform: rotate(-10deg);
			transform-origin: bottom right;}
	}

.rightBN::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 45.78%;
	height: 39.15%;
	max-width: 78px;
	max-height: 65px;
	left: 0;
	bottom: 32%;
	z-index: -1;
	background: url(../images/deco-hand.png) top center no-repeat;
	background-size: contain;
	animation: deco-hand-ani 2s ease infinite;}
	@keyframes deco-hand-ani{
		0%{ transform: rotate(-10deg);
			transform-origin: bottom right;}
		50%{ transform: rotate(-20deg);
			transform-origin: bottom right;}
		100%{ transform: rotate(-10deg);
			transform-origin: bottom right;}
	}


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

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

.btnTop-Wrap{
	display: inline-block;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;}

.btnTop{
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-radius: 30px;
	font-weight: 600;
	padding: 5px;
	background: #db491d;
	line-height: 50px;
	color: #fff;
	font-size: 1.2em;
	cursor: pointer;
	transition: 0.5s;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0.8);}

.btnTop:active,
.btnTop:hover{
	color: #db491d;
	background: #ffff00;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 

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

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

footer a{ color: #ff0943 !important;}


/*錨點--*/
#section1, #section2,
#section3, #section4{top: -100px;}