/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,button,input,select,textarea {
color:#222;
}
html {
font-size:1em;
line-height:1.4;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,canvas,img,video {
vertical-align:middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
border:0;
margin:0;
padding:0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
resize:vertical;
}
/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */
.notsupport {
background:#ccc;
color:#000;
margin:.2em 0;
padding:.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html, body {height: 100%; background:#FFBD34;}
html{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-webkit-touch-callout:none;}
.mainWrapper {width:100%;height:auto;position:relative;margin:0 auto; font-family:'Asap', sans-serif; background:#fff; overflow-x:hidden; }

.fitImg img{ width:100%; height:auto;}
.ignorePadding{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Header */
header { background:#ffc000; height:80px; position:relative; }
.header_logo{ width:153px; }
.header_logo_bg{ position:absolute; top:0; height:80px; left:-100%; width:100%; background:#000; }
.header_nav{ position:absolute; top:0; right:20px; padding-top:30px; }
.header_nav img{ width:15px; }
.header_nav a{ color:#000; text-decoration: none; }

header a:hover{ color:#666;}

/* Home */
.button{ padding:20px 30px; background:#fdb913; display:inline-block; text-align: center; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }
.buttonGrey{ background:#404040; color: #fff; }
.buttonLightGrey{ background:#e1e1e1; color: #000; }
.buttonMini{ width:200px; padding:15px 15px; background:#fdb913; color:#000; display:inline-block; text-shadow:none; }
.buttonCursor{ cursor:pointer; }
.buttonIcon{ width:15px; float: right; margin-left: 20px; }

.bgYellow{ background:#ffc000;}
.bgGrey{ background:#f4f4f4; }
.bgRed{ background:#ed1d24; }
.bgBlue{ background:#00a1e4; }
.bgOrange{ background:#f68b1f;}
.bgPattern{ background: url(../images/bg_pattern.jpg) repeat; background-position: top right; }
.uppercase{ text-transform: uppercase; }

.maxBgWidth{ position:relative; width:100%; max-width:1920px; margin:auto; }
.maxContentWidth { position:relative; width:100%; max-width:1400px; margin:auto; }
.playVideo{ position:absolute; top:35%; left:40%; width:25%; transition: opacity .5s;}
.videoClick:hover .playVideo{ opacity:.3; }

.pBg { width:100%; height:100%; background:rgba(0,0,0,0.7); position:fixed; left:0; top:0; z-index:1000; display:none; }
.pBox { background:white; margin:0 auto; width:100%; max-width:900px; padding:2%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align:center;}
.pBoxShort { max-width:600px; }
.pBox .pBoxClose { width:30px; padding:0; position:absolute; top:0; right:-40px; }

.videoWrapper{ position:relative; width:100%; }
.videoWrapper:before{ content: ""; display:block; padding-top:56%; }
.videoWrapper .mAspectRatio{ position:absolute; top: 0; left: 0; bottom: 0; right: 0; }

.floatRegister{ position:fixed; right: 0; top: 40%; z-index: 100;}
.floatRegister .icon{ position: relative; }
.floatRegister .text{ position: absolute; top:63%; left:16%; width: 80%; color: #fff; text-decoration: none; text-align: center; }

.sectionHeader{ position: relative; z-index: 1; }
.headerVideo{ position: absolute; top:13.5%; left:26%; width: 59.5%; }
.headerOverlay{ position: absolute; top:0; left:0; width: 100%; }
.headerButton{position: absolute; top:53%; left:14%; }

.headerNew{ color:white; }
.headerNew .desc{ position: absolute; top:36%; left:15%; width: 30%; }
.headerNew .titleA{ position: absolute; top:40%; left:10%; }
.headerNew .titleB{ position: absolute; top:50%; left:7%; }
.headerNew .watchVideo{ position: absolute; top:59%; left:19%; color:#404040; }
.cn .headerNew .watchVideo{ top:55%; }

.headerOld{ color:white; }
.headerOld .desc{ position: absolute; top:34%; left:61%; width: 30%; }
.headerOld .titleA{ position: absolute; top:37%; left:58%; }
.headerOld .titleB{ position: absolute; top:46%; left:69%; }
.headerOld .watchVideo{ position: absolute; top:54%; left:61%; color:#404040; }
.cn .headerOld .watchVideo{ top:50%; }

.sectionHeadline .bg{ width:137.15%; margin-left: -18.55%; }
.sectionHeadline .content{ position:absolute; top:49%; left:0; color: #fff; width: 100%; text-align: center; }
.cn .sectionHeadline .desc{ margin-top: 1%; }

.sectionFullfill{ position:relative; }
.sectionFullfill .bg{ width:137.15%; margin-left: -18.55%; }
.sectionFullfill .bg_shop{ width:37%; top:39%; left:0%; position: absolute; }
.sectionFullfill .bg_cloud_left{ width:77%; top:7%; left:0%; position: absolute; }
.sectionFullfill .bg_cloud_right{ width:57%; top:7%; right:0%; position: absolute; }
.sectionFullfill .title{ position:absolute; width: 100%; top:23%; left:0; text-align: center; color: #404040; }
.sectionFullfill .image{ position:absolute; width: 61%; top:38%; left:36%; }
.sectionFullfill .desc{ position:absolute; width: 54%; top:82%; left:36%; color: #fff; }
.sectionFullfill .space{ margin: 20px 0; }
.sectionFullfill a{ text-decoration: underline; color: #fff; }

.sectionLuckyDraw{ text-align: center; padding-bottom: 100px; }
.sectionLuckyDraw .title{ margin: 150px 0 0; }
.sectionLuckyDraw .subtitle{ margin: 30px 0; }
.sectionLuckyDraw .desc{ width: 50%; margin: 30px auto; }
.sectionLuckyDraw .buttonWinner{ width: 70%; margin: 30px auto; position: relative; }
.sectionLuckyDraw .buttonWinner .winTitle{ position: absolute; top:22%; left:22%; color: #fff; }
.sectionLuckyDraw .buttonWinner .find{ position: absolute; top:55%; left:22%; color: #000; }

.sectionLuckyDraw table{ width:100%; max-width: 1000px; margin: auto; }
.sectionLuckyDraw th{ background: #ed1c24; color: #fff; border: 2px solid #e1e1e1; padding: 20px 0; }
.sectionLuckyDraw th:first-child{ border-left: none; }
.sectionLuckyDraw th:last-child{ border-right: none; }
.sectionLuckyDraw td{ text-align: center; }
.sectionLuckyDraw tr:nth-child(odd) {background-color: #ebebeb;}
.sectionLuckyDraw td{ border: 2px solid #e1e1e1; padding: 20px 0; }
.sectionLuckyDraw td:first-child{ border-left: none; }
.sectionLuckyDraw td:last-child{ border-right: none; }

.sectionContent .bg{ float:right; width: 75%; }
.contentAndpao{ position: absolute; top:18%; left:10%; width: 30%; }
.contentDesc{ position: absolute; top:30%; left:43%; width: 45%; }
.contentDesc .desc{ padding:2% 0; color:#fff; }

.contentPromo{ position: absolute; top:65%; left:15%; width:70%; text-align: center; }

.sectionSteps{ position: relative; text-align: center; color: #fff; }
.sectionSteps .title{ margin: 100px 0 30px; }
.sectionSteps .content{ width: 90%; margin: auto; }
.sectionSteps .bottom{ margin: 50px 0; }
.sectionSteps .list{ list-style: none; padding: 0; margin: 0; }
.sectionSteps .list li{ position: relative; float: left; width: 23%; margin: 1%; text-align: center; }
.sectionSteps .list .thumb{ width: 90%; margin: auto; }
.sectionSteps .list .desc{ margin: 20px 30px; }

.sectionGames{ position: relative; text-align: center; }
.sectionGames .title{ margin: 100px 0 50px; }
.sectionGames .desc{ margin: 0 0 50px; }
.sectionGames .list{ list-style: none; padding: 0; margin: 0; }
.sectionGames .list li{ position: relative; float: left; width:31.3%; margin:1%; text-align: center; background: #fff; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); }
.sectionGames .list .thumb{ display:table-cell; }
.sectionGames .list .desc{ display:table-cell; vertical-align: middle; text-align: left; padding-left: 20px; }

.sectionBottom{ position: relative; padding: 0 0 30px; }
.sectionBottom .maxWidth{ width: calc(100% - 100px); margin: auto; position: relative; }
.sectionBottom .divider{ display: block; width: 100px; border: 5px solid #fff; margin:0px auto; }

.sectionAngpaoContent{ position:relative; padding:100px 0 50px; }
.sectionAngpaoContent .left{ float: left; width: 45%; margin-left: -20px; position: relative;}
.sectionAngpaoContent .blurb{ position: absolute; top:3%; right:1%; width: 30%; }
.sectionAngpaoContent .icon{ position: relative; }
.sectionAngpaoContent .text{ position: absolute; top:30%; left:0; width:95%; text-align: center; color: #fff; }
.sectionAngpaoContent .right{ float: left; width: 53%; margin-left: 2%; }
.sectionAngpaoContent .list{ list-style: none; padding: 0; margin: 30px 0; width: 100%; max-width: 550px; }
.sectionAngpaoContent .list li{ position: relative; float: left; width: 32.3%; text-align: center; background: #fff; }
.sectionAngpaoContent .list li:nth-child(even){ margin: 0 1%; }
.sectionAngpaoContent .list .desc{ padding: 20px 0; }

.sectionVideoContent{ position: relative; width:70%; left: 15%; top:0; text-align: center; padding: 50px 0; }
.sectionVideoContent .title{ margin: 0px 0 50px; }
.sectionVideoContent .desc{ padding:3% 0; color: #404040; }

.tncButton{ position:relative; text-align: center; margin: 30px 0 100px; }
.tncButton a{ text-decoration: none; }

.tncContent { position:relative; width:calc(100% - 100px); margin: 5% auto; background: #e1e1e1; }
.tncContent a{ color: #666;}
.tncRow{ position:relative; }
.tncLists{ padding: 30px 60px; display: none; }
.tncTitle{ float: left; width: 70%; padding: 16px 60px; }
.tncArrow{ width:70px; float: right; }

.tncContent table{ width:100%; max-width: 1000px; margin: auto; }
.tncContent th{ text-align: center; }
.tncContent td{ text-align: center; }
.tncContent table, .tncContent th, .tncContent td {
  border: 1px solid black;
}

.floatCoin{ position:absolute; top:0%; right:-5%; width:23%; }
.floatDrum{ position:absolute; top:79%; left:9%; width:28%; }
.floatKid{ position:absolute; top:95%; left:3%; width:20%; }
.floatLion{ position:absolute; top:110%; left:-3%; width:30%; }
.floatMen{ position:absolute; top:110%; right:-12%; width:28%; }

.floatLion2{ position:absolute; top:100%; left:-7%; width:25%; z-index: 1; }
.floatLion3{ position:absolute; top:120%; right:-7%; width:25%; z-index: 1; transform: scaleX(-1); }

.floatGold1{ position:absolute; top:24%; left:-4%; width:14%; }
.floatGold2{ position:absolute; top:43%; left:-2%; width:8%; }
.floatGold3{ position:absolute; top:62%; left:-2%; width:11%; }
.floatGold4{ position:absolute; top:31%; right:-2%; width:13%; }
.floatGold5{ position:absolute; top:57%; right:1%; width:13%; }

.floatGold6{ position:absolute; top:31%; right:-2%; width:8%; }
.floatGold7{ position:absolute; top:57%; left:-5%; width:13%; }

.imgFlip{ transform: scaleX(-1);}

footer{ background:#FFF; width:calc(100% - 100px); margin: auto; }
footer a{ color:#000; text-decoration: none; }
footer .footerIcons{ list-style:none; padding:0; margin:30px 0;}
footer .footerIcons li{ display:inline; margin:0 20px; }
footer .footerIcons li:first-child { margin:0 20px 0 0 ; }
footer .footerCopy{ list-style:none; padding:0; margin:30px 0; }
footer .footerCopy li{ display:inline; margin:0 20px; }
footer .footerCopy li:first-child { margin:0 20px 0 0 ; }

.fontRed{ color:#e93323; }
.fontDarkRed{ color:#c1140d; }
.fontYellow{ color:#f8b117; }
.fontBlue{ color:#00a1e4; }
.fontGrey{ color:#404040; }

.fontGeneral{ font-size:13px; }
.fontDesc{ font-size:20px; line-height:40px; }
.fontNav{ font-size:18px; }

.fontTncTitle{ font-size:20px; line-height:40px; font-weight: bold; }
.fontTnc{ font-size:15px; line-height:30px; }
.fontButton{ font-size:18px; line-height:18px; font-weight:bold;}
.fontFindButton{ font-size:18px; line-height:18px; font-weight:bold;}
.fontTncButton{ font-size:20px; line-height:20px; font-weight:bold;}

.fontFooterBrand{ font-size:18px; line-height:18px; font-weight:bold; }
.fontFooterCopyright{ font-size:15px; line-height:15px; }

.fontFloat{ font-size:22px; line-height:22px; font-weight: 700; }
.fontHeaderDesc{ font-size:22px; line-height: 22px; font-weight: 700; }
.fontHeaderTitleA{ font-size:85px; font-weight: 700; }
.fontHeaderTitleB{ font-size:55px; font-weight: 700; }

.fontHeadlineTitle{ font-size:76px; line-height: 76px; font-weight: 700; }
.fontHeadlineDesc{ font-size:33px; font-weight: 700; }
.cn .fontHeadlineDesc{ font-size:33px; line-height: 43px; }

.fontAngpowTitle{ font-size:126px; line-height: 126px; font-weight: 700; }
.fontAngpowSubTitle{ font-size:45px; line-height: 45px; font-weight: 700; }
.fontAngpowDesc{ font-size:30px; }
.fontAngpowDescTitle{ font-size:35px; font-weight: 700; }

.fontLuckyDrawTitle{ font-size:65px; line-height: 65px; font-weight: 700; }
.fontLuckyDrawSubTitle{ font-size:36px; font-weight: 700; }

.fontLuckyDrawTable{ font-size:22px; line-height: 22px; }
.fontLuckyDrawTableDesc{ font-size:15px; line-height: 15px; }
.fontLuckyDrawDesc{ font-size:30px; font-weight: 400; }
.fontLuckyDrawAstric{ font-size:16px; }
.fontLuckyDrawButtonTitle{ font-size:36px; font-weight: 700; }

.fontStepsTitle{ font-size:60px; font-weight: 700; }
.fontStepsDesc{ font-size:22px; }

.fontGamesTitle{ font-size:60px; line-height: 60px; font-weight: 700; }
.cn .fontGamesTitle{ font-size:60px; line-height: 65px; font-weight: 700; }
.fontGamesDesc{ font-size:14px; font-weight: 700; }
.fontGamesPrize{ font-size:28px; line-height: 28px; font-weight: 700; }
.fontGamesSecondPrize{ font-size:22px; font-weight: 700; }

.fontMechanicTitle{ font-size:60px; line-height: 60px; font-weight: 700; }
.fontMechanicSubTitle{ font-size:36px; font-weight: 700; }
.fontMechanicDesc{ font-size:30px; }
.fontMechanicPrize{ font-size:90px; font-weight: 700; font-family: Verdana; }
.fontMechanicPrize sup{ font-size:30px; font-weight: 700; top: -43px; font-family: Verdana; }
.fontMechanicPrizeDesc{ font-size:14px; font-family: Verdana; }
.fontBlurb{ font-size:25px; line-height: 25px; font-weight: 700; }
.cn .fontBlurb{ font-size:30px; line-height: 30px; font-weight: 700; }
.fontBlurbDesc{ font-size:17px; font-weight: 700; }

.fontVideoDesc{ font-size:22px; }

content{ scroll-snap-type: both proximity; }
section{ scroll-snap-align: start; }

.forDesktop{ display:block; }
.forMobile{ display:none; }

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

@media only screen and (max-width: 1400px) {
	.fontButton{ font-size:15px; line-height:15px; }
	
	.fontHeaderDesc{ font-size:1.8vw; line-height:1.8vw;}
	.fontHeaderTitleA{ font-size:6.1vw; }
	.fontHeaderTitleB{ font-size:4vw; }

	.fontHeadlineTitle{ font-size:5.1vw; line-height:5.1vw; }
	.cn .fontHeadlineTitle{ font-size:8.1vw; line-height:8.1vw; }
	.fontHeadlineDesc{ font-size:2.3vw; line-height: 2.3vw; }
	.cn .fontHeadlineDesc{ font-size:2.3vw; line-height: 3.3vw; }

	.fontAngpowTitle{ font-size:8.5vw; line-height:8.5vw; }
	.fontAngpowSubTitle{ font-size:3vw; line-height:3vw; }
	.fontAngpowDesc{ font-size:2.2vw; }
	.fontAngpowDescTitle{ font-size:2.5vw; }

	.fontLuckyDrawTitle{ font-size:4.5vw; line-height:4.5vw; }
	.fontLuckyDrawSubTitle{ font-size:2.6vw; }

	.fontLuckyDrawTable{ font-size:20px; line-height: 20px; }
	.fontLuckyDrawTableDesc{ font-size:12px; line-height: 12px; }
	.fontLuckyDrawDesc{ font-size:20px; }
	.fontLuckyDrawAstric{ font-size:13px; }
	.fontLuckyDrawButtonTitle{ font-size:2.5vw; }
	.fontFindButton{ font-size:1.5vw; }

	.fontStepsTitle{ font-size:4.3vw; }
	.fontStepsDesc{ font-size:18px; }

	.fontGamesTitle{ font-size:4.3vw; line-height:4.3vw; }
	.cn .fontGamesTitle{ font-size:4.3vw; line-height:5.6vw; }
	.fontGamesDesc{ font-size:14px; }
	.fontGamesPrize{ font-size:28px; }
	.fontGamesSecondPrize{ font-size:24px; }

	.fontMechanicTitle{ font-size:4.3vw; line-height: 4.3vw; }
	.fontMechanicSubTitle{ font-size:2.6vw; }
	.fontMechanicDesc{ font-size:20px; }
	.fontMechanicPrize{ font-size:90px; font-weight: 700; }
	.fontMechanicPrize sup{ font-size:30px; font-weight: 700; top: -43px; }
	.fontMechanicPrizeDesc{ font-size:14px; }
	.fontVideoDesc{ font-size:20px; }
	
	.fontBlurb{ font-size:1.7vw; line-height:1.7vw; }
	.cn .fontBlurb{ font-size:2.2vw; line-height:2.2vw; }
	.fontBlurbDesc{ font-size:1.2vw; font-weight: 700; }
}

@media only screen and (max-width: 1200px) {
	.sectionGames .list{ width: 80%; max-width: 500px; margin: 0 auto; }
	.sectionGames .list li{ width:100%; margin:20px 0; float: none; }
}

@media only screen and (max-width: 1100px) {
	.sectionLuckyDraw table{ width:calc(100% - 100px); }
	footer{ width:calc(100% - 50px); margin: auto; }
}

@media only screen and (max-width: 960px) {
	.header_nav{ right:20px; }
	.header_nav img{ width:12px; }
	
	footer .footerIcons img{ transform:scale(.8); }
	footer .footerIcons li{ display:inline; margin:0 5px; }
	footer .footerCopy li{ display:inline; margin:0 10px; }
	
	.fontGeneral{ font-size:13px; }
	.fontDesc{ font-size:2vw; line-height:4vw; }
	.fontNav{ font-size:15px; }
	.fontTncTitle{ font-size:18px; line-height:40px; font-weight: bold; }
	.fontTnc{ font-size:13px; line-height:30px; }
	
	.fontFooterBrand{ font-size:15px; line-height:15px; }
	.fontFooterCopyright{ font-size:12px; line-height:12px; }
	
	.sectionVideo .bg{ padding-top:28%; }
	.sectionLuckyDraw .buttonWinner .button{ padding:10px 25px; }
}

@media only screen and (max-width: 800px) {
	.floatRegister{ width:120px; }
	.fontFloat{ font-size:16px; line-height: 16px; font-weight: 700; }
	
	.pBg { width:100%; height:100%; background:rgba(0,0,0,0.7); position:fixed; left:0; top:0; z-index:1000; display:none; }
	.pBox { background:white; margin:0 auto; width:100%; max-width:900px; padding:5%; }
	.pBox .pBoxClose { width:30px; padding:0; position:absolute; top:-40px; right:60px; }
	
	.forDesktop{ display:none; }
	.forMobile{ display:block; }
	
	.headerNew .desc{ position: absolute; top:18%; left:29%; width: 50%; }
	.headerNew .titleA{ position: absolute; top:20%; left:20%; }
	.headerNew .titleB{ position: absolute; top:27%; left:15%; }
	.headerNew .watchVideo{ position: absolute; top:33%; left:43%; color:#404040; }
	.cn .headerNew .watchVideo{ top:29%; }

	.headerOld .desc{ position: absolute; top:17%; left:31%; width: 60%; }
	.headerOld .titleA{ position: absolute; top:20%; left:23%; width: 100%; }
	.headerOld .titleB{ position: absolute; top:26%; left:46%; }
	.headerOld .watchVideo{ position: absolute; top:32%; left:34%; color:#404040; }
	.cn .headerOld .watchVideo{ top:30%; }
	
	.sectionHeadline .content{ top:70%; }
	.sectionFullfill .title{ top:20%; }
	.sectionFullfill .image{ width: 74%; top:35%; left:22%; }
	.sectionFullfill .desc{ width: 54%; top:82%; left:22%; color: #fff; }
	.sectionFullfill .space{ margin: 10px 0; }
	
	.sectionLuckyDraw{ background-size: 70%; padding-bottom: 50px; }
	.sectionLuckyDraw .title{ margin: 130px 0 0; }
	.sectionLuckyDraw .subtitle{ margin: 20px 0; }
	.sectionLuckyDraw .desc{ margin: 20px auto; }
	.sectionLuckyDraw .buttonWinner{ margin: 20px auto; }
	.sectionLuckyDraw .mobileScroll{ overflow-x:auto; width: calc(100% - 50px); margin: auto; }

	.sectionLuckyDraw th{ padding: 15px 30px; min-width: 50px; }
	.sectionLuckyDraw td{ padding: 15px 30px;}
	
	.sectionBottom .maxWidth{ width: calc(100%); }
	
	.sectionSteps .list .desc{ margin: 15px 50px; }
	.sectionSteps .list li{ position: relative; float: left; width: 48%; margin: 1%; text-align: center; }
	.sectionSteps .list .thumb{ width: 80%; margin: auto; }
	
	.sectionAngpaoContent{ position:relative; padding:100px 0 50px; }
	.sectionAngpaoContent .left{ float: none; width: 80%; margin:0 auto;}
	.sectionAngpaoContent .right{ float: none; width: 90%; margin:50px auto 0; text-align: center; }
	.sectionAngpaoContent .list{ list-style: none; padding: 0; margin: 30px auto; width: 100%; }
	
	.sectionVideoContent{ position: relative; width:calc(100% - 50px); margin: auto; left:0; text-align: center; padding: 50px 0; }
	.sectionVideoContent .title{ margin: 0px 0 50px; }
	.sectionVideoContent .desc{ padding:3% 0; color: #404040; }
	
	.tncContent { position:relative; width:calc(100% - 50px); margin: 5% auto; background: #e1e1e1; }
	.tncRow{ position:relative; }
	.tncLists{ padding: 10px 40px; display: none; }
	.tncTitle{ float: left; width: 50%; padding: 16px 40px; }
	.tncArrow{ width:70px; float: right; }
	
	.fontHeaderDesc{ font-size:3vw; line-height:3vw;}
	.fontHeaderTitleA{ font-size:11vw; }
	.fontHeaderTitleB{ font-size:6.7vw; }
	
	.floatDrum{ position:absolute; top:79%; left:3%; width:28%; }
	.floatKid{ position:absolute; top:95%; left:1%; width:20%; }
	.floatLion{ position:absolute; top:110%; left:-9%; width:30%; }
	.floatMen{ position:absolute; top:110%; right:-7%; width:28%; }

	.floatLion2{ position:absolute; top:100%; left:-7%; width:25%; z-index: 1; }
	.floatLion3{ position:absolute; top:120%; right:-7%; width:25%; z-index: 1; }

	.floatGold1{ position:absolute; top:24%; left:-4%; width:14%; }
	.floatGold2{ position:absolute; top:43%; left:-2%; width:8%; }
	.floatGold3{ position:absolute; top:62%; left:-2%; width:11%; }
	.floatGold4{ position:absolute; top:31%; right:-2%; width:13%; }
	.floatGold5{ position:absolute; top:57%; right:1%; width:13%; }

	.floatGold6{ position:absolute; top:31%; right:-2%; width:8%; }
	.floatGold7{ position:absolute; top:57%; left:-5%; width:13%; }
	
	.fontLuckyDrawTable{ font-size:15px; line-height: 15px; }
	.fontLuckyDrawTableDesc{ font-size:10px; line-height: 10px; }
	
	.fontMechanicTitle{ font-size:6.3vw; line-height:6.3vw; }
	.fontMechanicSubTitle{ font-size:3.6vw; }
	
	.fontBlurb{ font-size:3.7vw; line-height:3.7vw; }
	.cn .fontBlurb{ font-size:4.7vw; line-height:4.7vw; }
	.fontBlurbDesc{ font-size:2.2vw; font-weight: 700; }
	.cn .fontBlurbDesc{ font-size:3.2vw; font-weight: 700; }
}

@media only screen and (max-width: 600px) {
	header { height:70px; }
	.header_logo{ width:120px; }
	
	.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;}
	
	.sectionSteps .list{ width:80%; margin: auto; }
	.sectionSteps .list li{ width:100%; display:table; padding:0; margin:10px 0; text-align:left; }
	.sectionSteps .list li .thumb{ width:45%; margin:0; padding-right:5%; float:none; display: table-cell;}
	.sectionSteps .list li .desc{ width:48%; margin:0; float:none; display: table-cell; vertical-align: middle; }

	footer .footerIcons img{ width:100%; }
	footer .footerIcons li:nth-child(2) img { width:15%; }
	footer .footerIcons li:nth-child(3) img { width:15%; }
	footer .footerIcons li:nth-child(4) img { width:15%; }
	footer .footerIcons li:nth-child(5) img { width:35%; }
	
	footer .footerIcons li{ display:inline; margin:0; }
	footer .footerIcons li:first-child { display:block; margin:0 5px 10px 0 ; }
	footer .footerCopy li{ display:inline; margin:0 5px; }
	footer .footerCopy li:first-child { margin:0 5px 0 0 ; }
	
	.button{ padding:15px 25px; }
	.fontButton{ font-size:12px; line-height:12px;}
	.fontGeneral{ font-size:13px; }
	.fontDesc{ font-size:3vw; line-height:7vw; }
	.fontNav{ font-size:12px; }
	.fontTncTitle{ font-size:13px; line-height:20px; font-weight: bold; }
	.fontTnc{ font-size:11px; line-height:20px; }
	
	.fontFooterBrand{ font-size:13px; line-height:13px; }
	.fontFooterCopyright{ font-size:10px; line-height:10px; }
	
	.fontLuckyDrawTable{ font-size:15px; line-height: 15px; }
	.fontLuckyDrawTableDesc{ font-size:10px; line-height: 10px; }
	.fontLuckyDrawDesc{ font-size:15px; }
	.fontLuckyDrawAstric{ font-size:10px; }
	
	.fontStepsDesc{ font-size:15px; }
	
	.fontMechanicDesc{ font-size:15px; }
	.fontVideoDesc{ font-size:15px; }
	
	.sectionLuckyDraw .buttonWinner .button{ padding:5px 20px; }
	
	.sectionSteps .title{ margin: 80px 0 20px; }
	.sectionSteps .bottom{ margin: 30px 0; }
	
	.sectionGames .title{ margin: 80px 0 30px; }
	.sectionGames .desc{ margin: 0 0 30px; }
	.sectionGames .list .thumb{ width: 150px; }
	.sectionGames .list .desc{ padding-left: 10px; }
	
	.tncArrow{ width:45px; }
}

@media only screen and (max-width: 500px) {
	.headerNew .watchVideo{ left:35%; }
	.headerOld .watchVideo{ left:25%; }
	
	.sectionLuckyDraw .buttonWinner{ width: 85%; margin: 20px auto; }
	.sectionLuckyDraw .buttonWinner .find{ top:50%; }
	
	.fontHeadlineDesc{ font-size:2.8vw; }
	.cn .fontHeadlineDesc{ font-size:2.8vw; line-height: 3.8vw; }
	.fontAngpowDesc{ font-size:2.5vw; }
	.fontAngpowDescTitle{ font-size:2.8vw; }
	
	.fontLuckyDrawTitle{ font-size:5.5vw; line-height:5.5vw; }
	.fontLuckyDrawSubTitle{ font-size:3.6vw; }
	
	.fontStepsTitle{ font-size:5.3vw; }
	
	.sectionGames .list .thumb{ width: 120px; }
	.fontGamesDesc{ font-size:11px; }
	.fontGamesPrize{ font-size:23px; line-height: 23px; }
	.fontGamesSecondPrize{ font-size:19px; }
	
	.sectionAngpaoContent{ padding:50px 0 30px; }
	.sectionVideoContent .title{ margin: 0px 0 30px; }
	
	.fontMechanicPrize{ font-size:70px; }
	.fontMechanicPrize sup{ font-size:20px; top:-37px; }
	.fontMechanicPrizeDesc{ font-size:12px; }
	
	.sectionAngpaoContent .list{ margin:20px auto; }
	.sectionFullfill .desc{ width:64%; }
	.sectionLuckyDraw .title{ margin: 130px 0 0; }
	
	.sectionLuckyDraw .desc{ width:80%; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}

.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
display: none !important;
visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,.clearfix:after{
content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after{
clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix{
*zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print{
* {
background:transparent!important;
color:#000!important;
box-shadow:none!important;
text-shadow:none!important;
}

a,a:visited {
text-decoration:underline;
}

a[href]:after {
content:" (" attr(href) ")";
}

abbr[title]:after {
content:" (" attr(title) ")";
}

.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
content:"";
}

pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}

thead {
display:table-header-group;
}

tr,img {
page-break-inside:avoid;
}

img {
max-width:100%!important;
}

@page {
margin:.5cm;
}

p,h2,h3 {
orphans:3;
widows:3;
}

h2,h3 {
page-break-after:avoid;
}
}