@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC&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:#7dd6ff;
	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: 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 15px;
	margin: 0 2px;
	color: #fff;
	border: 1px #007c7c solid;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;
	border-radius: 5px;}

.navi-warp ul li:hover{
	border: 1px solid #ffff00;
	color: #ffff00;
	transform: translateY(-5px);}

.navi-warp ul li a{color: #fff;}
.navi-warp ul li div.break{ display: none;}


/*-- 主內容區 --*/
/*======START=======*/
.container{
	display: inline-block;
	width: 100%;
	overflow: hidden;
	background: url(../images/bg.png) center repeat;
	background-size: auto;}

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	background: url(../images/theme-bg.png) top center repeat;
	background-size:  cover;}


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

.theme-wrap .theme{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px;
	z-index: 1;}

.theme-frame{
	display: inline-block;
	width: 601px;}

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

.theme-frame .theme-title{
	display: inline-block;
	position: absolute;
	width: 113.31%;
	max-width: 681px;
	top: 34%;
	left: 50%;
	transform: translateX(-50%);}
	
.theme-frame .theme-title > img{
	display: inline-block;
	width: 100%}	

.theme-frame .theme-subtitle{
	display: inline-block;
	position: absolute;
	bottom: 6%;
	left: 50%;
	transform: translateX(-50%);
	width: 90.68%;
	height: 20.33%;}
	
.theme-frame .theme-subtitle > img{
	display: inline-block;
	width: 100%}
		
/*-- theme-TL2022Q4 --*/
.theme-TL2022Q4{
	display: inline-block;
	width: 100%;}

.theme-TL2022Q4 > .TL2022Q4{
	display: inline-block;
	width: 100%;
	max-width: 501px;
    margin-left: 8%;}

.theme-TL2022Q4 > .TL2022Q4 > img{
	display: inline-block;
	width: 100%;
	animation: TL2022Q4-ani 0.6s ease-in-out infinite;}
	@keyframes TL2022Q4-ani{
		0%{opacity: 1;}
		50%{opacity: 0.9;}
		100%{opacity: 1;}
	}

.theme-TL2022Q4 > .TL2022Q4::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: -29.94%;
	top: -20px;
	width: 50.29%;
	height: 193px;
	background: url(../images/deco-arrow.png) top no-repeat;
	background-size: contain;
	animation: codeArrow-ani 2s ease-in-out infinite;}
	@keyframes codeArrow-ani{
		0%{transform: translate(0,0);}
		50%{transform: translate(-5px, -5px);}
		100%{transform: translate(0,0);}
	}

.theme-TL2022Q4 > .TL2022Q4::after{
	content: '';
	display: inline-block;
	position: absolute;
	right: -6%;
    bottom: 10%;
	width: 28.14%;
	height: 132px;
	background: url(../images/deco-gift.png) bottom no-repeat;
	background-size: contain;
	animation: codegift-ani 2s ease-in-out infinite;}
	@keyframes codegift-ani{
		0%{transform: rotate(5deg) scale(1);}
		25%{transform: rotate(-2deg) scale(1.05);}
		50%{transform: rotate( 2deg) scale(1);}
		75%{transform: rotate(-2deg) scale(1.01);}
		100%{transform: rotate(5deg) scale(1);}
	}


/*-- deco--*/
.deco-wrap{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;}

.theme-alung{
	display: inline-block;
	position: absolute;
	right: -5%;
    bottom: -3%;
	width: 32%;
	max-width: 415px;
	height: 456px;
	background: url(../images/theme-alung.gif) bottom no-repeat;
	background-size: contain;
	z-index: 1;}

.deco-ufo{
	display: inline-block;
	position: absolute;
	right: -10%;
	top: 5%;
	width: 216px;
	height: 145px;
	background: url(../images/deco-ufo.png) top no-repeat;
	background-size: contain;}

.deco-music{
	display: inline-block;
	position: absolute;
	right: 5%;
	top: 20%;
	width: 188px;
	height: 180px;
	background: url(../images/deco-music.png) bottom no-repeat;
	background-size: contain;}

.deco-welcome{
	display: inline-block;
	position: absolute;
	left: 5%;
	top: 5%;
	width: 244px;
	height: 138px;
	background: url(../images/deco-welcome.png) top no-repeat;
	background-size: contain;}

.deco-glass{
	display: inline-block;
	position: absolute;
	left: 10%;
	top: 25%;
	width: 165px;
	height: 153px;
	background: url(../images/deco-glass.png) bottom no-repeat;
	background-size: contain;}

.deco-go{
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 25%;
	width: 197px;
	height: 182px;
	background: url(../images/deco-go.png) bottom no-repeat;
	background-size: contain;}


/*-- 註冊鈕 --*/
.btn-wrap{
	display: inline-block;
	width: 100%;
	padding: 20px;}

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

.btn-join > img{
	width: 100%;
	max-width: 354px ;}

.deco-line{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 74px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/deco-line.png) center no-repeat;
	background-size: contain;}

/*-- 活動區 --*/
.campaign-wrap{
	display: inline-block;
	width: 100%;
	padding: 5px 2%;}

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

.campaign-1 > div{
	width: calc(50% - 80px);
	max-width: 465px;
	margin: 0 40px;}

.campaign-1 > div:hover{
	transform: translateY(-10px);}

.campaign-1 > div.capm3-pc{
	width: 100%;
	max-width: 982px;
	display: block;
	animation: capm3-pc-ani 1s ease-in-out infinite;}
	@keyframes capm3-pc-ani{
		0%{opacity: 1;}
		50%{opacity: 0.95;}
		100%{opacity: 1;}
	}

.campaign-1 > div.capm3-mobile{
	width: 100%;
	max-width: 606px;
	display: block;
	animation: capm3-pc-ani 1s ease-in-out infinite;
	display: none; } /*大版預設隱藏*/
	@keyframes capm3-pc-ani{
		0%{opacity: 1;}
		50%{opacity: 0.95;}
		100%{opacity: 1;}
	}
	
.campaign-1 > div > img{
	width: 100%;}

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

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

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

.camp4-bglight{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/camp4-1-bglight.png) bottom 30px center no-repeat;
	background-size:  cover;}

.camp5-bglight{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/camp4-2-bglight.png) bottom 30px center no-repeat;
	background-size:  cover;}

.capm3-pc .camp3-bglight{
	background-position: left center;
	background-size:  80%;}

/*-- gift --*/
.gift-lpcoin1{
	position: absolute;
	display: inline-block;
	width: 41.04%;
	height: 34.34%;
	right: -7%;
    bottom: 20%;
	background: url(../images/gift-lpcoin1.png) center no-repeat;
	background-size:  contain;}

.gift-lpcoin2{
	position: absolute;
	display: inline-block;
	width: 41.29%;
	height: 28.25%;
	left: -7%;
    bottom: 15%;
	background: url(../images/gift-lpcoin2.png) center no-repeat;
	background-size:  contain;}

.gift-sogo1000{
	position: absolute;
	display: inline-block;
	width: 61.07%;
	height: 46.74%;
	left: -7%;
    bottom: 0;
	background: url(../images/gift-sogo1000.png) center no-repeat;
	background-size:  contain;}

.gift-iphone14{
	position: absolute;
	display: inline-block;
	width: 25.76%;
	height: 79.92%;
	right: 7%;
    bottom: 5%;
	background: url(../images/gift-iphone.png) center no-repeat;
	background-size: contain;
	animation: iphone14-ani 2s ease-in-out infinite;} 

.capm3-mobile .gift-iphone14{
	position: absolute;
	display: inline-block;
	width: 41.74%;
	height: 52.29%;
	left: 29%;
    top: 15%;
	background: url(../images/gift-iphone.png) center no-repeat;
	background-size: contain;
	animation: iphone14-ani 2s ease-in-out infinite;} 
	@keyframes iphone14-ani{
		0%{ transform: rotate(1deg);
			transform-origin: left bottom;}
		50%{ transform: rotate(-1deg); 
			transform-origin: left bottom;}
		100%{ transform: rotate(1deg); 
			transform-origin: left bottom;}
	}

.gift-lp250{
	position: absolute;
	display: inline-block;
	width: 62.03%;
	height: 36.25%;
    left: 18%;
    top: 15%;
	background: url(../images/gift-lp250.png) center no-repeat;
	background-size:  contain;
	animation: lp250-ani 2.2s ease-in-out infinite;}
	@keyframes lp250-ani{
		0%{transform: translateY(0px);}
		50%{transform: translateY(5px);}
		100%{transform: translateY(0px);}
	}

.gift-aripods3{
	position: absolute;
	display: inline-block;
	width: 62.03%;
	height: 36.25%;
    left: 18%;
    top: 15%;
	background: url(../images/gift-airpods3.png) center no-repeat;
	background-size:  contain;
	animation: aripods3-ani 2s ease-in-out infinite;}
	@keyframes aripods3-ani{
		0%{transform: translateY(5px);}
		50%{transform: translateY(0px);}
		100%{transform: translateY(5px);}
	}


/*-- 保戶的家專屬 --*/
.campaign-2{
	display: inline-block;
	width: 90%;
	max-width: 1200px;
	padding: 80px 20px 40px;
	margin: 100px 0 40px;
	border: solid 3px #fff;
	border-radius: 20px;
	background: transparent;
	box-shadow: 0 0 5px 10px rgba(83, 229, 19, 0.5),
				0 0 5px 10px rgba(83, 229, 19, 0.5),
				inset 0 0 15px 5px rgba(83, 229, 19, 0.4),
				inset 0 0 15px 5px rgba(83, 229, 19, 0.4),
				inset 0 0 15px 5px rgba(83, 229, 19, 0.6);}

.campaign-2 h1{
	display: block;
	text-align: center;
	font-size: 15px;
	top: -80px;}

.campaign-2 h1 > span{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);}

.campaign-2 h1 > span{
	width: 85%;
	max-width: 460px;}
	
.campaign-2 h1 > span > img{width: 100%;}

.campaign-2 > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	padding: 20px;}

.campaign-2 > div > div{
	width: calc(50% - 30px);
	max-width: 403px;}

.campaign-2 > div > div:nth-of-type(2){
	animation-delay: 0.2s;}

.campaign-2 > div > div:hover{transform: translateY(-20px);}

.campaign-2 > div > div > div{
	display: inline-block;
	width: 100%;}

.campaign-2 > div > div > div > img{
	width: 100%;}

.btn-login,
.btn-services{
	display: inline-block;
	width: 100%;}

.btn-login > img,
.btn-services > img{
	display: inline-block;
	width: 87.59%;
	max-width: 353;}


/*-- 名額提示 --*/
.tag-10winners{
	content: '';
	display: inline-block;
	position: absolute;
    right: 0%;
    top: 20%;
	width: 37.20%;
	height: 26.62%;
	background: url(../images/tag-10winners.png) center no-repeat;
	background-size:  contain;
	animation: winners-ani 2s ease-in-out infinite;} 
	@keyframes winners-ani{
		0%{ transform: rotate(2deg);
			transform-origin: center bottom;}
		50%{ transform: rotate(-2deg); 
			transform-origin: center bottom;}
		100%{ transform: rotate(2deg); 
			transform-origin: center bottom;}
	}
	
.tag-5winners{
	content: '';
	display: inline-block;
	position: absolute;
	right: 15%;
    top: 10%;
	width: 37.20%;
	height: 26.62%;
	background: url(../images/tag-5winners.png) center no-repeat;
	background-size:  contain;
	animation: winners-ani 2s ease-in-out infinite;} 
	@keyframes winners-ani{
		0%{ transform: rotate(2deg);
			transform-origin: center bottom;}
		50%{ transform: rotate(-2deg); 
			transform-origin: center bottom;}
		100%{ transform: rotate(2deg); 
			transform-origin: center bottom;}
	}
	

/*-- LINE活動廣告 (廣告圖使用轉址，放在網投多媒體庫)--*/
.lineBN-wrap{
	display: inline-block;
	width: 100%;
	padding: 10px 40px;
	margin: 40px 0 0;}

.lineBN-wrap .lineBN{
	display: inline-block;
	width: 100%;
	max-width: 700px;
	height: auto;
	background: transparent;
	background-size: contain;
	border: solid 3px #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 0 5px 10px rgba(83, 229, 19, 0.5),
				0 0 5px 10px rgba(83, 229, 19, 0.5),
				inset 0 0 15px 5px rgba(83, 229, 19, 0.4),
				inset 0 0 15px 5px rgba(83, 229, 19, 0.4),
				inset 0 0 15px 5px rgba(83, 229, 19, 0.6);}

.lineBN-wrap .lineBN img{width: 100%;}
.line-title{
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 486px;
	left: 50%;
	top: -50px;
	transform: translateX(-50%);
	z-index: 1;}

.line-title > img{ width: 100%;}

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


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

#rules-switch{display: none;}

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

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

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

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

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

.rules > ol > li{
	color: #fff;
	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: #ffff00;}
	
.rules ol li h3 span.break{display: none;}	
	
.rules ol li ol{
	padding: 5px;
	padding-left: 30px;
	margin-top: 10px;}

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

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

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

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


/*路徑提示箭頭*/
.icon-arrow::after{
	content: '▼';
	position: absolute;
	color: #db491d;
	top: 14px;
	left: 4px;
	transform: rotate(-90deg);
	display: inline-block;
	font-size: 15px;
	animation: iconArrow-ani 2s linear infinite;}


	/*路徑提示箭頭動畫*/
	@keyframes iconArrow-ani{
		0%{ transform: translateX(4px) rotate(-90deg);}
		50%{ transform: translateX(-4px) rotate(-90deg);}
		100%{ transform: translateX(4px) rotate(-90deg);}
	}


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


	

	/*-----------------*/
	/*----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%;
		font-size: 15px;
		z-index: 1;}
	
	
	/*錨點--*/
	#section1, #section2,
	#section3, #section4,
	#section5, #section6{top: -90px;}