/* Slider */

/*info*/
#info {position: relative;overflow: hidden;}
#info .dLine { border-right: 1px solid #666;}
#info .howto { max-width: 100%; padding: 0px; margin-top: 0px; position: relative;}
.step-title, .step-action-btn, .step-tnc {text-align: center;}
#app-voucher .step-action-btn {display: block;}
.step-tnc {	margin: 30px auto;}
.step-tnc a {color: #6d6d6d;text-decoration: underline;}
.step-tnc small {font-size: 17px;}
.step-action-btn {border-radius: 50px;padding: 15px 30px;max-width: 280px;margin: 30px auto;}
#app-voucher .step-action-btn {background-color: #139147;}
#app-takeaway .step-action-btn {background-color: #e31f2b;}
#info #app-voucher.howto .text {padding: 0px}
#info .howto .text {grid-column: 5/10;-ms-grid-column: 6;-ms-grid-column-span: 5;-ms-grid-row-align: center;}
#info .howto .slider {grid-column: 2/5;-ms-grid-column: 4;-ms-grid-column-span: 2;}
#info .howto .text h1 {font-size: 1.3em;line-height: 1.3em;	text-align: left;	margin: 0;color: #ffffff;padding-bottom: .2em;background-color: red;}
#info .howto .text small {color: #ffd300;text-align: left;margin: 0 0 2em;line-height: 1.5;	display: block;	font-weight: 400;}
#info .howto .text ul {	counter-reset: step-counter;padding: 20% 0 0 0;	margin-right: 30px;}
#info .howto .text ul li {	opacity: 0.6;	text-align: left;	padding-bottom: 10px;	font-size: 1em;	line-height: 1.6em;	color: #bbbbbb;	font-weight: 400;}
#info .howto .text ul li:before {counter-increment: step-counter;content: "Step " counter(step-counter);	display: block;	font-weight: 900;margin: 1em 0 0.5em;background-color: transparent;	border: 1px solid;	border-radius: 40px;max-width: 100px;text-align: center;}

/*		#info .howto .text ul li.active {color:#000000; opacity: 1;}
				#info .howto .text ul li.active:before {color: #ffffff; background-color:green;}*/

#info .howto .text ul li {color: #000000;opacity: 1;}
#info #app-voucher.howto .text ul li:before {color: #ffffff;background-color: #139147;}
#info #app-takeaway.howto .text ul li:before {color: #ffffff;background-color: #079247;}
#info .howto .slider {	max-width: 210px;	margin: 3em auto 0;	border-top: 40px solid #cccccc;	border-bottom: 40px solid #cccccc;	border-left: 10px solid #cccccc;border-right: 10px solid #cccccc;-webkit-border-radius: 20px;	-moz-border-radius: 20px;	border-radius: 20px;	border-top: 40px solid #1c1e23;	border-bottom: 40px solid #1c1e23;	border-left: 10px solid #1c1e23;border-right: 10px solid #1c1e23;display: inline-block;}
#info .howto .text {max-width: 470px; padding: 0 2em 0;	font-size: 18px;display: inline-block;}
#info .howto .slick-slider {margin-bottom: 30px;}
#info .howto .slick-dots {position: absolute;display: block;	width: 100%;padding: 0;	list-style: none;text-align: center;}
#info .howto .slick-dots li {position: relative;display: inline-block;width: 20px;height: 20px;margin: 0 2px;	padding: 0;	cursor: pointer;}
#info .howto .slick-dots li button {font-size: 0;line-height: 0;display: block;width: 20px;	height: 20px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}
#info .howto .slick-dots li button:hover, #info .howto .slick-dots li button:focus {outline: none;}
#info .howto .slick-dots li button:hover:before, #info .howto .slick-dots li button:focus:before {	opacity: 1;}
#info .howto .slick-dots li button:before {font-family: 'slick';font-size: 30px;line-height: 20px;position: absolute;top: 0;left: 0;width: 20px;height: 20px;content: '•';	text-align: center;	opacity: .25;	color: white;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;}
#info .howto .slick-dots li.slick-active button:before {opacity: .75;color: black;}
#info .howto .text h1>span {display: inline-block;font-size: inherit;padding: 0 3px;}

@media (max-width:640px) {
	#info .howto .text ul {	counter-reset: step-counter;padding: 23% 0 0 10%;margin-right: 0px;	}
	#info .howto .text ul li {padding-bottom: 0px;	font-size: 0.9em;line-height: 1.4em;}
}

/* tab */

/*tab show*/
#info.show>.maxWidth, #wrp_offers.show>.maxWidth, #orpay.show>center{opacity: 1;transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;transition: 0.5s opacity ease-in, 0.8s transform ease;transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;position: relative;top: 0;z-index: 100;-webkit-transform: translateY(0px);transform: translateY(0px);}
/*tab hide*/
#info>.maxWidth, #wrp_offers>.maxWidth, #orpay>center{opacity: 0;-webkit-transform: translateY(-3px);transform: translateY(-3px);position: absolute;width: 100%;z-index: -1;left: 0;}

#info .howto .text {padding: 0;vertical-align: top;}

@media (min-width: 769px) {
	#howTo {font-size: 0;}
	.btn-desktop {display: block;}
	.btn-mobile {display: none;	}
}

@media (max-width: 768px) {
	#info .dLine {border: none;border-bottom: 1px solid #cccccc;padding: 0;	}
	#info {padding: 0px 20px 0px;}
	#howTo {padding: 30px 10% 50px;	}
	#info .howto .text, #orpay .howto .text {grid-column: 1/11;	order: 1;	-ms-grid-column: 1;	-ms-grid-column-span: 11;	padding: 0 20px;}
	#info .howto .slider, #orpay .howto .slider {grid-column: 1/11;order: 2;-ms-grid-column: 1;	-ms-grid-column-span: 11;}
	/*#info .howto .text ul li {color:#bbbbbb;}*/
	#info .howto.active, #orpay .howto.active {padding: 20% 0 28%;}
	.btn-desktop {display: block;}
	.btn-mobile {display: none;
	}
}

@media (max-width: 640px) {
	#howTo {border-top: 4px solid #ececec}
	#info .howto .text h1, #orpay .howto .text h1 {	font-size: 1.6rem;	text-align: center;	}
	.en #info .howto .text h1, .en #orpay .howto .text h1 {	font-size: 1.4rem;}
	#info .howto .text h1>span, #orpay .howto .text h1>span {display: block;font-size: inherit;	}
	.zh #info .howto .text, .zh #orpay .howto .text {font-size: 15px;padding: 0 10%;	}
}

@media (max-width: 480px) {
	#howTo {padding: 30px 15px 50px;}
	#app-voucher .content-grid {}
	#info .howto .slider, #orpay .howto .slider {max-width: 180px!important}
	#info .howto .slider, #orpay .howto .slider {border-top: 20px solid #1c1e23;}
	#info .howto .slider, #orpay .howto .slider {border-bottom: 30px solid #1c1e23;}
	.btn-desktop {display: none;}
	.btn-mobile {display: block;}
}

@media (max-width: 375px) {
	#info .howto .text ul li, #orpay .howto .text ul li {font-size: 16px;}
	#info .howto .text h1, #orpay .howto .text h1 {	font-size: 1.5rem;}
	#info .howto .slider, #orpay .howto .slider {max-width: 100%;}
}

@media (max-width: 320px) {
	#info .howto .text h1 {	font-size: 1.2rem;}
	.en #info .howto .text h1 {	font-size: 1.4rem;}
}

/* Slider */

#wrp_offers, #orpay {position: relative;overflow: hidden;}
#wrp_offers .dLine, #orpay .dline {border-right: 1px solid #666;}
#wrp_offers .howto, #orpay .howto {max-width: 100%;	padding: 0px;margin-top: 0px;position: relative;}
.step-title, .step-action-btn, .step-tnc {	font-size:19px;	text-align: center;}
#app-voucher .step-action-btn, #orpay .step-action-btn {display: block;}
.step-tnc {	margin: 30px auto;}
.step-tnc a {color: #6d6d6d;text-decoration: underline;}
.step-tnc small {font-size: 17px;}
.step-action-btn {	border-radius: 50px;padding: 15px 30px;max-width: 280px;margin: 30px auto;}
#app-voucher .step-action-btn {	background-color: #139147;}
#app-takeaway .step-action-btn {background-color: #e31f2b;}
#app-orpay .step-action-btn {background-color: #e31f2b;}
#wrp_offers #app-voucher.howto .text, #orpay #app-voucher.howto .text {	padding: 0px}
#wrp_offers .howto .text,#orpay .howto .text {	grid-column: 5/10;	-ms-grid-column: 6;	-ms-grid-column-span: 5;-ms-grid-row-align: center;}
#wrp_offers .howto .slider, #orpay .howto .slider {	grid-column: 2/5;	-ms-grid-column: 4;	-ms-grid-column-span: 2;}
#wrp_offers .howto .text h1, #orpay .howto .text h1 {font-size: 1.3em;	line-height: 1.3em;	text-align: left;	margin: 0;	color: #ffffff;	padding-bottom: .2em;	background-color: red;}
#wrp_offers .howto .text small, #orpay .howto .text small {	color: #ffd300;	text-align: left;	margin: 0 0 2em;line-height: 1.5;	display: block;	font-weight: 400;}
#wrp_offers .howto .text ul, #orpay .howto .text ul {counter-reset: step-counter;	padding: 20% 0 0 0;	margin-right: 30px;}
#wrp_offers .howto .text ul li, #orpay .howto .text ul li {	opacity: 0.6;text-align: left;	padding-bottom: 10px;	font-size: 1em;	line-height: 1.6em;	color: #bbbbbb;	font-weight: 400;}
#wrp_offers .howto .text ul li:before{counter-increment: step-counter;	content: "Step " counter(step-counter);	display: block;	font-weight: 900;	margin: 1em 0 0.5em;	background-color: transparent;	border: 1px solid;	border-radius: 40px;	max-width: 100px;	text-align: center;}

#orpay .howto .text ul li:before{counter-increment: step-counter;content: "Step " counter(step-counter);display: block;	font-weight: 900;margin: 1em 0 0.5em;background-color: transparent;border: 1px solid;border-radius: 40px;	max-width: 100px;	text-align: center;}

/*		#wrp_offers .howto .text ul li.active {color:#000000; opacity: 1;}
				#wrp_offers .howto .text ul li.active:before {color: #ffffff; background-color:green;}*/

#wrp_offers .howto .text ul li, #orpay .howto .text ul li {	color: #000000;	opacity: 1;}
#wrp_offers #app-voucher.howto .text ul li:before, #orpay #app-voucher.howto .text ul li:before {color: #ffffff;background-color: #139147;}
#wrp_offers #app-takeaway.howto .text ul li:before {color: #ffffff;	background-color: #e31f2b;}
#orpay #app-orpay.howto .text ul li:before {color: #ffffff;	background-color: #f7931d;}
#wrp_offers .howto .slider, #orpay .howto .slider {	max-width: 210px;	margin: 3em auto 0;	border-top: 40px solid #cccccc;	border-bottom: 40px solid #cccccc;	border-left: 10px solid #cccccc;	border-right: 10px solid #cccccc;	-webkit-border-radius: 20px;	-moz-border-radius: 20px;	border-radius: 20px;	border-top: 40px solid #1c1e23;	border-bottom: 40px solid #1c1e23;	border-left: 10px solid #1c1e23;	border-right: 10px solid #1c1e23;	display: inline-block;}
#wrp_offers .howto .text, #orpay.howto .text {	max-width: 470px;	padding: 0 2em 0;	font-size: 18px;	display: inline-block;}
#wrp_offers .howto .slick-slider, #orpay .howto .slick-slider {	margin-bottom: 30px;}
#wrp_offers .howto .slick-dots, #orpay .howto .slick-dots {	position: absolute;	display: block;	width: 100%;	padding: 0;	list-style: none;	text-align: center;}
#wrp_offers .howto .slick-dots li, #orpay .howto .slick-dots li  {	position: relative;	display: inline-block;	width: 20px;height: 20px;margin: 0 2px;	padding: 0;	cursor: pointer;}
#wrp_offers .howto .slick-dots li button, #orpay .howto .slick-dots li button {	font-size: 0;	line-height: 0;	display: block;	width: 20px;	height: 20px;	padding: 5px;	cursor: pointer;	color: transparent;	border: 0;	outline: none;	background: transparent;}
#wrp_offers .howto .slick-dots li button:hover, #wrp_offers .howto .slick-dots li button:focus  {	outline: none;}
#orpay .howto .slick-dots li button:hover, #orpay .howto .slick-dots li button:focus  {outline: none;}
#wrp_offers .howto .slick-dots li button:hover:before, #wrp_offers .howto .slick-dots li button:focus:before {	opacity: 1;}
#orpay .howto .slick-dots li button:hover:before, #orpay .howto .slick-dots li button:focus:before {opacity: 1;}
#wrp_offers .howto .slick-dots li button:before, #orpay .howto .slick-dots li button:before {	font-family: 'slick';	font-size: 30px;	line-height: 20px;	position: absolute;	top: 0;	left: 0;	width: 20px;	height: 20px;	content: '•';	text-align: center;	opacity: .25;	color: white;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;}
#wrp_offers .howto .slick-dots li.slick-active button:before, #orpay .howto .slick-dots li.slick-active button:before {	opacity: .75;	color: black;}
#wrp_offers .howto .text h1>span, #orpay .howto .text h1>span {	display: inline-block;	font-size: inherit;	padding: 0 3px;}

@media (max-width:640px) {
	#wrp_offers .howto .text ul, #orpay .howto .text ul {	counter-reset: step-counter;	padding: 23% 0 0 10%;	margin-right: 0px;}
	#wrp_offers .howto .text ul li, #orpay .howto .text ul li {	padding-bottom: 0px;	font-size: 0.9em;line-height: 1.4em;	}
}




/* tab */

#wrp_offers .howto .text {	padding: 0;	vertical-align: top;}

@media (min-width: 769px) {
	#howTo {font-size: 0;}
	.btn-desktop {	display: block;	}
	.btn-mobile {display: none;	}
}

@media (max-width: 768px) {
	#wrp_offers .dLine {border: none;border-bottom: 1px solid #cccccc;	padding: 0;	}
	#wrp_offers {	}
	#howTo {padding: 30px 10% 50px;	}
	#wrp_offers .howto .text {grid-column: 1/11;	order: 1;	-ms-grid-column: 1;	-ms-grid-column-span: 11;	padding: 0 20px;}
	#wrp_offers .howto .slider {grid-column: 1/11;	order: 2;	-ms-grid-column: 1;	-ms-grid-column-span: 11;	}
	/*#wrp_offers .howto .text ul li {color:#bbbbbb;}*/
	#wrp_offers .howto.active {	padding: 20% 0 28%;	}
	.btn-desktop {	display: block;	}
	.btn-mobile {	display: none;}
}

@media (max-width: 640px) {
	#howTo {border-top: 4px solid #ececec}
	#wrp_offers .howto .text h1 {font-size: 1.6rem;	text-align: center;}
	.en #wrp_offers .howto .text h1 {font-size: 1.4rem;}
	#wrp_offers .howto .text h1>span {display: block;	font-size: inherit;}
	.zh #wrp_offers .howto .text {font-size: 15px;	padding: 0 3%;}
}

@media (max-width: 480px) {
	#howTo {padding: 30px 15px 50px;}
	#app-voucher .content-grid {}
	#wrp_offers .howto .slider {max-width: 180px;}
	#wrp_offers .howto .slider {border-top: 20px solid #1c1e23;}
	#wrp_offers .howto .slider {border-bottom: 30px solid #1c1e23;}
	.btn-desktop {display: none;}
	.btn-mobile {display: block;}
}

@media (max-width: 375px) {
	#wrp_offers .howto .text ul li,#orpay .howto .text ul li {font-size: 16px;}
	#wrp_offers .howto .text h1,#orpay .howto .text h1 {font-size: 1.5rem;}
	#wrp_offers .howto .slider, #orpay .howto .slider {	max-width: 100%;}
}

@media (max-width: 320px) {
	#wrp_offers .howto .text h1, #orpay .howto .text h1 {font-size: 1.2rem;}
	.en #wrp_offers .howto .text h1 {font-size: 1.4rem;}
}