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

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

  *{font-family: 'Noto Sans TC';
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #535353;
	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:#ff2600;
	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: #fff;
	position: sticky;
    top: 0;
	z-index: 999;}

.header-wrap{
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 15px 2%;
	max-width: 1200px;}

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

.logo-wrap img{
	height: 100%;
	vertical-align: middle}

/*-- 選單 --*/
.navi-warp{
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);}

.navi-warp ul{
	display: flex;
	justify-content: center;
	padding: 10px;}

.navi-warp ul li{
	list-style: none;
	display: inline-block;
	padding: 5px;
	margin: 0 15px;
	color: #808080;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;}

.navi-warp ul li:hover{
	border-bottom: 2px #808080 solid;;
	transform: translateY(-5px);}

.navi-warp ul li a{color: inherit;}
.navi-warp ul li span.break{ display: none;}

body{
	background: #fff;
	background-size: cover;
	animation: wave-ani 8s ease-in-out infinite;}
	@keyframes wave-ani{
		0%{background-position-x: -20px;}
		50%{background-position-x: 20px;}
		100%{background-position-x: -20px;}
	}

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

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	background: url(../images/theme-bg.png) center no-repeat;
	background-size: cover;
	/*animation: theme-wrap-ani 15s ease-in-out infinite;*/}
	@keyframes theme-wrap-ani{
		0%{ background-position: top 50%  left 50%;}
		50%{ background-position: top 100%  right 100%;}
		100%{ background-position: top 50%  left 50%;}
	}

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

.theme-wrap .theme .theme-title{
	display: inline-block;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	max-width: 560px;
	text-align: center;}

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

.theme-wrap .theme .theme-title .title,
.theme-wrap .theme .theme-title .theme-shine{
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 560px;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);}

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

.theme-shine{
	animation: theme-shine-ani 1s ease-in-out infinite}
	@keyframes theme-shine-ani {
		0%{opacity: 1;}
		50%{opacity: 0;}
		80%{opacity: 1;}
		100%{opacity: 1;}
	}

.theme-wrap .theme .theme-title .title-subtitle{
	display: inline-block;
	position: absolute;
	width: 100%;
    max-width: 760px;
    top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);}

.theme-along{
	display: inline-block;
	position: absolute;
	width: 25%;
	max-width: 400px;
	height: 400px;
	right: 0%;
	bottom: -60px;
	background: url(../images/theme-along.gif) bottom center no-repeat;
	background-size: contain;}


.deco-shine{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translate(-50%, -50%);
	animation: shine-ani 11s ease-in-out infinite;
	pointer-events: none;
	opacity: 0.8;}
	@keyframes  shine-ani{
		0%{ transform: translate(-50%, -50%) rotate(-20deg);
			transform-origin: top right;}
		50%{ transform: translate(-50%, -50%) rotate(30deg);
			 transform-origin: top right;}
		100%{ transform: translate(-50%, -50%) rotate(-20deg);
			  transform-origin: top right;}
	}


.scroll-btn{
	position: absolute;
	display: inline-block;
	color: #737373;
	width: 30px;
	height: 50px;
	left: 50%;
	bottom: 0%;
	transform: translateX(-50%);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	display: none;}

.scroll-btn:hover,
.scroll-btn:active{background: rgba(13, 199, 201, 0.8);}

.scroll-btn::before{
	content: '滑動看更多';
	position: absolute;
	color: #fff;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.8em;}

.scroll-btn::after{
	content: '▼';
	display: inline-block;
	color: #f38452;
	white-space: nowrap;
	font-size: 0.8em;
	animation: scroll-ani 3s ease-in-out infinite;}
	@keyframes scroll-ani{
		0%{ transform: translateY(5px);
			opacity: 0;}
		10%{ transform: translateY(5px);
			opacity: 1;}
		80%{ transform: translateY(15px);
			opacity: 1;}
		100%{ transform: translateY(15px);
			opacity: 0;}
	}

.scroll-btn:hover:after{ color: #fff;}

.theme-wrap .theme .theme-title::after{
	content: '';
	display: inline-block;
	position: absolute;
    width: 18%;
    max-width: 114px;
    height: 27%;
    max-height: 114px;
    background: transparent url(../images/theme-appicon.png) center no-repeat;
    background-size: contain;
    top: 35%;
    right: 2%;
	animation: twlogo-ani 2s ease-in-out infinite;}
	@keyframes twlogo-ani{
		0%{transform: scale(1) rotate(-10deg);
			transform-origin: bottom left;}
		50%{transform: scale(1.1) rotate(10deg);
			transform-origin: bottom left;}
		100%{transform: scale(1) rotate(-10deg);
			transform-origin: bottom left;}
	}

/*-----------------*/
/*----- 前導言 -----*/
/*-----------------*/
.intro-wrap{
	display: inline-block;
	width: 100%;}

.intro-wrap .intro{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 80px 40px 20px;
	margin: 0 auto;}

.intro-wrap .intro > p{
	display: inline-block;
	color: #737373;
	width: 100%;
	height: 100%;
	font-size: 1.2em;
	text-align: justify;
	letter-spacing: 1px;}

.intro-wrap .intro > p::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 100%;
	background: #f38452;
	border-radius: 10px;}


/*-----------------*/
/*-----健康一起走---*/
/*-----------------*/

.sec-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px 2%;}

.sec-wrap .sec{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	padding: 20px 2%;
	margin: 0 auto;}

.sec-wrap .sec > div{
	flex: 1;
	justify-content: space-evenly;
	width: 100%;
	padding: 20px 2%;}


/*-----------------*/
/*-----獎項說明-----*/
/*-----------------*/
.prize-wrap{
	display: inline-block;
	width: 100%;}

.prize-wrap .prize{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px 2%;}

.prize-card{
	display: inline-block;
	width: 100%;
	background: #ffeee7;
	padding: 25px 20px;
	margin-bottom: 20px;
	border-radius: 20px;}

.prize-card .prize-card-list{
	display: flex;	
    justify-content: center;
	flex-wrap: wrap;
	width: 80%;
	margin:  0 auto;
    padding: 20px;
	border-radius: 5px;}

.prize-card .prize-card-list span{
	display: inline-block;
	flex: 1;
	max-width: 218px;
	min-width: 218px;
	margin: 10px;}

.prize-card .prize-card-list span > img:hover,
.prize-card .prize-card-list span > img:hover{transform: translateY(-15px);}
.prize .prize-card-list span > img{
	display: inline-block;
	width: 100%;}

.prize-col{
	display: flex;
	justify-content: space-between}

.prize-col .prize-card{width: 49%;}
.prize-col .prize-card-list span{max-width: 351px;}
.prize-col .prize-card-list span > img{	width: 100%;}

.prize .prize-card-list span:nth-of-type(1){ animation-delay:0.2s;}
.prize .prize-card-list span:nth-of-type(2){ animation-delay:0.4s;}
.prize .prize-card-list span:nth-of-type(3){ animation-delay:0.6s;}
.prize .prize-card-list span:nth-of-type(4){ animation-delay:0.8s;}
.prize .prize-card-list span:nth-of-type(5){ animation-delay:1s;}

/*企業獎*/
.prize-col.sales .prize-card{ background: #ffeee7;}

/*個人獎*/
.prize-col.personal .prize-card{ background: #ffeee7;}
.prize-col.personal .prize-card{width: 100%;}
.prize-col.personal .prize-card-list span{max-width: 432px;}
.prize-col.personal .note-list:nth-of-type(1) {max-width: 50%;}
.deco-girl{
	display: inline-block;
	position: absolute;
	width: 36.34% !important;
	max-width: 157px;
	height: 76%;
	min-height: 239px;
	min-width: initial !important;
	top: 50%;
	left: -20%;
	transform: translate(-50%, -50%);
	background: url(../images/deco-girl.png) center no-repeat;
	background-size: contain;
	animation: move-ani 0.5s ease-in-out infinite;}
	@keyframes move-ani{
		0%{transform: translate(-50%, -50%) scale(1);}
		50%{transform: translate(-50%, -50%) scale(1.02);}
		100%{transform: translate(-50%, -50%) scale(1);}
	}

.deco-man{
	display: inline-block;
	position: absolute;
	width: 36.34% !important;
	max-width: 167px;
	min-width: initial !important;
	height: 76%;
	min-height: 267px;
	top: 50%;
	left: 120%;
	transform: translate(-50%, -50%);
	background: url(../images/deco-man.png) center no-repeat;
	background-size: contain;
	animation: move-ani 0.6s ease-in-out infinite;}


/*獎項標*/
.prize-title{
	display: inline-block;
	width: 100%;}

.prize-title h3{
	display: inline-block;
	width: auto;
	white-space: nowrap;
	font-size: 2.2em;
	color: #f38452;}

.prize-title h3::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 14.5%;
	max-width: 29px;
	height: 45px;
	left: -30px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-prizeleafL.png) center no-repeat;
	background-size: contain;}

.prize-title h3::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 14.5%;
	max-width: 29px;
	height: 45px;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-prizeleafR.png) center no-repeat;
	background-size: contain;}

.note-list ul{
	display: inline-block;
	width: 100%;
	text-align: left;
	padding: 20px;
	font-size: 1em;}

.note-list ul li{
	text-align: left;
	color: #333;
	list-style: none;
	font-size: 1em;
	padding-left: 20px;
	margin-bottom: 5px;}

.note-list ul li > span{
	font-size: 1.5em;
    font-weight: 400;
    color: #ff0000;}

.note-list li::before{
	content: '★';
	display: inline-block;
	position: absolute;
	left: 0px;
	top: 0;}

.note-list.sp1{
	width: 100%;
	max-width: 60%;
	margin: 0 auto;}

.note-list.sp2{
	display: inline-block;
	width: 100%;
	font-size: 0.8em;
	max-width: 1200px;}

.note-list.sp2::after{
	content: '龍珠使用說明';
	display: inline-block;
	position: absolute;
	top: -12px;
	left: 20px;
	font-size: 1.2em;
	color: #a77222;
	text-shadow: 2px 2px 0 rgb(255, 238,221), -2px -2px 0 rgb(2255, 238,221);}
	
.note-list.sp2 > ul{border: #a77222 1px solid;}
.note-list.sp2 > ul  li{
	color: #ab772b;
	font-size: 1.1em;}

.deco-buzzGifts{
	position: absolute;
	display: inline-block;
	width: 50%;
	max-width: 265px;
	height: 147px;
	right: 5%;
	top: -5%;
	background: url(../images/deco-buzzGifts.gif) bottom center no-repeat;
	background-size: contain;}

.deco-prize2-1gift::before,
.deco-prize2-2gift::before,
.deco-prize3-1gift::before,
.deco-prize3-2gift::before,
.deco-prize4-1gift::before{
	content: '';
	position: absolute;
	display: inline-block;
	left: -16%;
	bottom: -10px;
	width: 72.64%;
	height: 73.83%;
	max-width: 255px;
	max-height: 175px;
	background: url(../images/prize2-1gift.png) center no-repeat;
	background-size: contain;
	z-index: 1;}

.deco-prize2-2gift::before{
	background: url(../images/prize2-2gift.png) center no-repeat;
	background-size: contain;
	left: initial;
	right: -16%;}

.deco-prize3-1gift::before{
	background: url(../images/prize3-1gift.png) center no-repeat;
	background-size: contain;}

.deco-prize3-2gift::before{
	background: url(../images/prize3-2gift.png) center no-repeat;
	background-size: contain;}

.deco-prize4-1gift::before{
	background: url(../images/prize4-1gift.png) center no-repeat;
	background-size: contain;
	left: initial;
	right: -15%;}

.deco-prize2-1gift::after,
.deco-prize2-2gift::after,
.deco-prize3-1gift::after,
.deco-prize3-2gift::after,
.deco-prize4-1gift::after{
	content: '';
	position: absolute;
	display: inline-block;
	left: -16%;
	bottom: -10px;
	width: 72.64%;
	height: 73.83%;
	max-width: 255px;
	max-height: 175px;
	background: url(../images/prize-shine.gif) center no-repeat;
	background-size: contain;
	z-index: 1;}

.deco-prize4-1gift::after{
	left: initial;
	right: -25%;}

.deco-prize2-2gift::after{
	left: initial;
	right: -40%;}

.gift1::before,
.gift2::before,
.gift3::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/prize1-shine1.gif) center no-repeat;
	background-size: contain;
	z-index: 1;}

.gift2::before{	
	background: url(../images/prize1-shine2.gif) center no-repeat;
	background-size: contain;}

.gift3::before{
	background: url(../images/prize1-shine3.gif) center no-repeat;
	background-size: contain;}


/*----------------------------------*/
/*---- 與TeamWalk齊心種下100顆樹 ----*/
/*----------------------------------*/
.camp-100plants{
	display: inline-block;
	width: 100%;}

.camp-100plants .plants100{
    display: inline-block;
    width: 100%;
    max-width: 1200px;
    padding: 20px 2%;}

.camp-100plants .plants100 .col{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: #ffeee7;
	padding: 20px 20px 0;
	border-radius: 20px;}

.camp-100plants .plants100 .col > div{
	flex: 1;
	padding: 20px;
	margin: 0 auto;}

.camp-100plants .plants100 .col > div:nth-of-type(1){
	min-width: 55%;}

.steps-counting{
	display: flex;
	align-items: center;
	width: 100%;
	padding: 20px;
	border-radius: 5px;}

.steps-counting > div{
	display: inline-block;
	width: 100%;
	padding: 20px;
	margin: 0 auto;
	background: #fff;
	border-radius: 5px;}

.steps-counting h3 {
	font-size: 1.5em;
	text-align: left;
	color: #333;}

.steps-counting h4 {
	font-size: 3em;
	text-align: center;
	white-space: nowrap;
	color: #f38452;}

.steps-counting h4::after{
	content: '步';
	font-size: 0.6em;
	text-align: left;
	color: #333;}

.deco-trees{
	display: inline-block;
	position: absolute;
	width: 43.8%;
	max-width: 198px;
	height: 76px;
	right: 7%;
	top: -20%;
	background: url(../images/deco-trees.png) bottom center no-repeat;
	background-size: contain;}

	#octweek1, #octweek2, #octweek3, #octweek4{display: none;}


/*----------------------------------*/
/*---- TeamWalk榮獲運動企業認證 ----*/
/*----------------------------------*/
.camp-certify{
	display: inline-block;
	width: 100%;}

.camp-certify .certify{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px 2%;}

.camp-certify .certify > div{
	display: inline-block;
	background: #ffeee7;
	padding: 40px 40px 20px;
	border-radius: 20px;}
		
			
/*-----------------*/
/*---- 相關報導 ----*/
/*-----------------*/

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

.news-wrap .news{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px 2%;
	border-radius: 20px;
	margin: 0 0 20px;}

.news-content{
	display: flex;
	justify-content:space-evenly;
	align-items: center;
	flex-wrap: wrap;
	padding: 20px;
	background: #ffeee7;}

.news-content > a{
	display: inline-block;
	flex: 1;
	width: 100%;
	max-width: 400px;
	min-width: 350px;
	margin: 15px;}

.news-content > a:active,
.news-content > a:hover{
	transform: translateY(-10px);}

.news-content > a > img{
	display: inline-block;
	width: 100%;}


	
/*-----------------*/
/*---- 合作廠商 ----*/
/*-----------------*/
.cooperate-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px 2%;}

.cooperate-wrap .cooperate{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px 2%;}

.company{
	display: inline-block;
	text-align: left;
	width: 100%;
	padding: 20px;}

.company .coGroup{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	vertical-align: middle;
	padding: 40px 10px 10px;}

.company .coGroup.cowork{display: inline-block;}
.company .coGroup.cowork::before{
	content: '協辦媒體';
	position: absolute;
	color: #404040;
	font-size: 1em;
    font-weight: 600;
	left: 15px;
    top: 10px;}

.company .coGroup.sponsor{display: inline-block;}
.company .coGroup.sponsor::before{
	content: '贊助單位';
	position: absolute;
	color: #404040;
	font-size: 1em;
    font-weight: 600;
	left: 15px;
    top: 10px;}

.company .coGroup.friendship::before{
	content: '參加企業';
	position: absolute;
	color: #404040;
	font-size: 1em;
    font-weight: 600;
	left: 15px;
    top: 10px;}

.company .coGroup > span{
	display: flex;
	flex: 1;
	max-width: 200px;
	min-width: 200px;
	height: 100px;
	text-align: center;
	align-items: center;
	padding: 10px;
	border-radius: 5px;
	background: #f0f0f0;
	margin: 0 1% 1% 0;}

.company .coGroup > span > a{margin: 0 auto;}

.company .coGroup > span > img{
	display: inline-block;
	width: 100%;
	max-width: 180px;
	margin: 0 auto;}


/*-----------------*/
/*---- 共同樣式 ----*/
/*-----------------*/

/*標題*/
.section-title-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px 2% 20px 120px;}

.section-title-wrap h2{
	font-size: 2.5em;
	color: #f38452;
	text-align: left;}

.section-title-wrap h3{
	font-size: 1.75em;
	color: #404040;
	text-align: left;}

.section-title-wrap.deco-walk::before,
.section-title-wrap.deco-prize::before,
.section-title-wrap.deco-plant::before,
.section-title-wrap.deco-certify::before,
.section-title-wrap.deco-idea::before,
.section-title-wrap.deco-rule::before,
.section-title-wrap.deco-addFriends::before,
.section-title-wrap.deco-cooperate::before,
.section-title-wrap.deco-news::before{
	content: '';
	position: absolute;
	display:inline-block;
	width: 100px;
	height: 100px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-walk.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-prize::before{
	background: url(../images/deco-prize.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-plant::before{
	background: url(../images/deco-plant.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-certify::before{
	background: url(../images/deco-certify.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-idea::before{
	background: url(../images/deco-lightball.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-rule::before{
	background: url(../images/deco-rules.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-addFriends::before{
	background: url(../images/deco-addfriends.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-cooperate::before{
	background: url(../images/deco-cooperate.png) center no-repeat;
	background-size: contain;}

.section-title-wrap.deco-news::before{
	background: url(../images/deco-news.png) center no-repeat;
	background-size: contain;}

.sec-cnotent{
	display: inline-block;
	width: 100%;
	padding: 20px 2%;}

.sec-cnotent p{
	color: #8c8c8c;
	font-size: 1.2em;
	line-height: 1.6em;
	letter-spacing: 1.5px;
	text-align: left;
	word-break: break-all;}

.sec-cnotent p > span > a,
.sec-cnotent p > span{color: #f38452}

.sec-pic {
	display: flex;
	justify-content: center;
	align-items: center;}

.sec-pic span{
	display: inline-block;
	width: 100%;
	max-width: 500px;
	min-width: 300px;}

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

.sec-pic span.deco-mobile1{
	position: absolute;
	display: inline-block;
	width: 30%;
	max-width: 209px;
	min-width: initial;
	height: 344px;
	left: -14%;
    top: 22%;
	background: url(../images/deco-mobile1.png) top center no-repeat;
	background-size: contain;
	animation: deco-mobile1-ani 2s ease-in-out infinite;}
	@keyframes deco-mobile1-ani{
		0%{transform: translateY(-5px);}
		50%{transform: translateY(0px);}
		100%{transform: translateY(-5px);}
	}
	
.sec-pic span.deco-mobile2{
	position: absolute;
	display: inline-block;
	width: 30%;
	max-width: 209px;
	min-width: initial;
	height: 344px;
	left: 5%;
    top: -10%;
	background: url(../images/deco-mobile2.png) center no-repeat;
	background-size: contain;
	animation: deco-mobile1-ani 2.2s ease-in-out infinite;}
	@keyframes deco-mobile1-ani{
		0%{transform: translateY(-10px);}
		50%{transform: translateY(0px);}
		100%{transform: translateY(-10px);}
	}

.sec-pic.idea span{
	margin-left: initial;
	margin-right: 20%;}

/*按鈕*/
.btn-wrap{
	display: flex;
	justify-content: left;
	padding: 30px 0 5px;}

.btn-wrap a{
	display: inline-block;
	width: 216px;
	font-size: 1.3em;
	height: 66px;
	line-height: 64px;
	padding: 0 30px 0 20px;
	margin-right: 20px;
	white-space: nowrap;
	color: #f38452;
	border: #f38452 1px solid;
	border-radius: 5px;
	cursor: pointer;}

.btn-wrap a:last-child{	margin-right: initial;}

.btn-wrap a::after{
	content: '';
    display: inline-block;
    position: absolute;
    width: 11.57%;
	max-width: 25px;
	height: 100%;
	background: url(../images/btn-arrow.png) center no-repeat;
	background-size: contain;
	margin-left: 2px;
    top: 50%;
    transform: translateY(-50%);}

.btn-wrap a:active,
.btn-wrap a:hover{
	color: #fff;
	background: #f38452;}

.btn-wrap.idea > a:nth-of-type(1):before,
.btn-wrap.idea > a:nth-of-type(2):before{
	content: 'PDF 檔';
	position: absolute;
	display: inline-block;
	width: auto;
	line-height: initial;
	font-size: 0.4em;
	color: #fff;
	background: #f38452;
	padding: 5px 10px;
	border-radius: 20px;
	left: 50%;
	transform: translateX(-50%);
	top: -20px;}

.btn-wrap.idea > a:nth-of-type(2):before{
	content: 'WORD 檔';}

/*-----------------*/
/*---- 活動辦法 ----*/
/*-----------------*/
.rules-wrap{
	display: inline-block;
	width: 100%;
	padding: 0px 2% 20px;}

#rules-switch{display: none;}
.rules-title{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	cursor: pointer;
	padding: 20px;
	text-align: left;}

.rules-title > .section-title-wrap{
	width: auto;
	padding-bottom: 0;}

.rules-title h2{
	display: inline-block;
	vertical-align: middle;
	font-size: 38px;
	font-weight: 600;
	color: #333;}

.rules{
	max-width: 1100px;
	margin: 20px auto 10px;
	padding: 20px 2%;
	height: 0;
	overflow: hidden;
	padding: 0;
	border-radius: 5px;
	border-top: 2px solid #ecf1f1;
	border-bottom: 2px solid #ecf1f1;}

.rules-title::after{
	content: '';
	position: relative;
	display: inline-block;
	width: 30px ;
	height: 30px;
	background: url(../images/deco-triangle.png) center no-repeat;
	background-size: contain;
	bottom: -15px;
	left: -10px;
	z-index: 1;
	transition: 0.5s;}

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

.rules > ol > li{
	color: #333;
	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;
	font-weight: 500;
	white-space: pre-line;
	color: #ff3c00;}
	
.rules ol li h3 span.break{display: none;}	
	
.rules ol li ul{
	padding: 10px;
	padding-left: 30px;
	margin-top: 10px;	
	border-radius: 10px;
	background: rgba(255, 252, 234, 0.8);}

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

.rules ol li ul li span{
	color: #ff5a2c;
    font-size: 14px;
    text-align: left;}

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

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

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

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

.note{
	display: block;
    font-size: 15px;
    color: #ff5a2c;
    margin-left: 30px;
    text-align: left;}

.note::before{
	content: '★';
	position: absolute;
	top: -1px;
	left: -18px;}	

/*------------------*/
/*-------蓋版-------*/
/*------------------*/
.popUp-wrap{
	display: inline-block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(00, 00, 00, 0.6);
	z-index: 999;
	display: none;}

/* 龍珠 */
.pupUp1{
	display: inline-block;
	width: 90%;
	max-width: 600px;
	padding: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	background: url(../images/camp1-bg.png	) center repeat;
	background-size: auto;
	border-radius: 20px;
	display: none;}

.pupUp1 div{ 
	display: inline-block;
	width: 100%;
	background: #fff;
	border-radius: 20px;
	padding: 20px;}

.pupUp1 div > h1{
	color: #ae7b23;
	margin: initial;}

.pupUp1 div > h1::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 150px;
	height: 80px;
	left: 50%;
	top: -60%;
	transform: translate(-50% , -50%);
	background: url(../images/popup-dragonballs.png) center no-repeat;
	background-size: contain;}

.pupUp1 p{
	color: #ae7b23;
	font-size: 20px;
	font-weight: 600;
	margin: 15px 0;}

.pupUp1 .btn-act{
	display: inline-block;
	position: absolute;
	white-space: nowrap;
	font-size: 18px;
	font-weight: 600;
	line-height: 20px;
	height: 40px;
	bottom: -20px;
	left: 50%;
    transform: translateX(-50%);
	padding: 10px 30px;
	border-radius: 40px;
	background: #896019;
	color: #fff;}

.btn-close{
	display: inline-block;
	position: absolute;
	width: 26px;
	height: 26px;
	top: -2%;
    right: -2%;
	background: url(../images/btn-close.png) center no-repeat;
	background-size: contain;
	cursor: pointer;
	z-index: 1;}
	
/* 企業排行榜 */
.pupUp2{
	display: inline-block;
	position: absolute;
	width: 90%;
	max-width: 1000px;
	height: calc(90vh - 100px);
    top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 20px;
	display: none;}

.chart-wrap{
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	padding: 20px 2%;
	background: #fff;}

.chart-wrap .chart{
	display: inline-block;
	width: 100%;
	height: 100%;	
	border-radius: 10px;
	padding: 2%;
	overflow-Y: scroll;}

.chart-wrap .chart > span{
	display: inline-block;
	width: 100%;
	max-width: 885px;}

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

.chart-title{
	display: inline-block;
	position: absolute;
	width: 80%;
	max-width: 530px;
	top: -10%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;}

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

#chart-mobile{
	display: none;
	max-width: 600px;}

/* 如何組隊 */
#popUp3{display: none;}
.teamUp-wrap{
	display: inline-block;
	font-size: 16px;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	padding: 20px 2%;
	background: #fff;}

.teamUp-wrap .btn-wrap{
	position: absolute;
	right: 2%;
	top: 0;}

.teamUp > .note-list{ padding: 1%;}
.teamUp > .note-list ul {
	border-radius: 5px;
	background: #ecf1f1;}

.teamUp > .note-list ul li{ color: #737373;}
.teamUp > .note-list ul li span{ color: #ff0000;}

.teamUp{
	display: inline-block;
	width: 100%;
	height: 100%;
	height: calc(100% - 85px);
	overflow-Y: scroll;}

.teamUp .steps-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;}

.teamUp .steps{
	display: inline-block;
	flex: 1;
	width: 100%;
	max-width: 309px;
	margin: 5px;}
	
.teamUp .steps{
	display: inline-block;
	flex: 1;
	width: 100%;
	margin: 5px;}

.teamUp .steps > p{
	text-align: left;
    padding: 5px 25px;
    background: #ff0d0d;
    color: #fff;}

.teamUp .steps span{
	display: inline-block;
	width: 100%;
	max-width: 309px;}

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


/*-----------------*/
/*---右側浮動BN-----*/
/*-----------------*/

.rightBN-wrap{
	display: inline-block;
	position: absolute;
	width: 121px;
	height: 164px;
	top: -160px;
	left: 50%;
	transform: translateX(-50%);}

	.rightBN{
		display: inline-block;
		width: 100%;
		height: 100%;
		cursor: pointer;
		animation: rightBNShake-ani 2s ease-in-out infinite;}
		/* rightBNShake-ani */
		@keyframes rightBNShake-ani{
				0%{transform: rotate(-5deg) scale(1);}
			50%{transform: rotate(5deg) scale(0.98);}
			100%{transform: rotate(-5deg) scale(1);}
		}
	
	.rightBN > img{width: 100%;}

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

.section-btnTop{
	display: inline-block;
	position: fixed;
	width: 100%;
	max-width: 1200px;
	height: 1px;
	margin: 0 auto;
	bottom: 16%;
	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{
	text-align: right;
	width: 100%;
	background: #007c7c;
	color: #fff;
	padding: 5px 2%;
	z-index: -1;}

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

footer a{ color: #ff0943 !important;}


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

/* 立即下載 Pop-Up*/
.teamUp-wrap.download{ height: auto;}
.download .teamUp .steps > p {
	text-align: center;
	color: #333;
	background: initial;
	margin-bottom: 10px;}

.section-title-wrap.deco-download::before{
	content: '';
	position: absolute;
	display:inline-block;
	width: 100px;
	height: 100px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-downlaod.png) center no-repeat;
	background-size: contain;}



/*-- 第六到十名 --*/
.list6-10{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 90%;
	max-width: 600px;
	padding: 5px;
	margin: 20px auto;
 
	:nth-of-type(1)::before{
		content:'';
		display: inline-block;
		position: absolute;
		width: 20px;
        height: 7px;
        left: -6px;
		top: 50%;
		transform: translate(0,-50%);
		background: #db491d;
		border-radius: 10px;
	}

	> div {
		display: flex;
		flex-direction: row;
		width: 100%;

		> span {
			display: inline-block;
			width: 100%;
			font-size: 20px;
			text-align: center;
			border: 1px solid #ffdac9;
			background: #fff;
			padding: 5px 2px;}

		> span:nth-of-type(1) { 
			flex: 1;
		}

		> span:nth-of-type(2) {
			flex: 1;
			font-size: 20px;
			color: #ff0000;
		}
	}
}