/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');*/
html,body{
	margin:0;padding:0;
	font-family: "Microsoft JhengHei", "Helvetica", "Arial",sans-serif;

	background-color:#FFF;
	color:#000;
}

.col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1,
.col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, 
.col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1,
.col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1{
	padding:0px;
}

a{
	cursor:pointer;
}
a:focus,
a:hover {
	text-decoration: none
}

.container,
.row {
	margin: 0 auto;
	padding: 0
}


/*global*/

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.fancybox-slide--html .fancybox-close-small{
	top:-45px;
}
.fancybox-content{
	overflow:visible;
}
.fancybox-slide--html .fancybox-close-small{
	transform:scale(1.5);
}
@media(max-width:767px){
	.container{
		max-width:480px;
		padding:0px 15px;
	}
	.mobilewrapper{
		
	}
}

.navbar{
	border-radius:0px;
	border:none;
	box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
.navbar>.row{
	padding-left:0px;
	padding-right:0px;
	padding:15px 0px;
	
}
@media(max-width:767px){
	.navbar>.row{
		padding:0px 0px;
		
	}
}
.header_bg{
	position:absolute;
	width:100%;
	height:80px;
	top:0px;
	left:0px;
	background-color: rgba(0,0,0, 0.85);
	
}
@media(min-width:768px){

	.header_bg{
		height:120px;
	}
}
@media(max-width:767px){

	.navbar>.row{
		width:100%;
		max-width:100%;
		
		
		top:0px;
		z-index:100;
		
		opacity:0.95;
	}
}
@media (min-width: 768px){
	
	.navbar-collapse{
		text-align:right;
	}
	.navbar-header{
		float:none;
	}
}
.navbar-collapse{
	border:none;
}



@media(max-width:767px){
	.navbar-nav{
		margin: auto;
	}
	.navbar-collapse{
		padding-top: 15px;
		padding-right: 0px;
		padding-left: 0px;
	}
	.navbar-inverse .navbar-nav>li>a{
		color:#000;
	}

	.navbar-toggle{
		float: left;
		border: none;
		position: absolute;

		z-index: 10;
		border: none;
		background-color: transparent !important;
		right: 15px;
		top: 18px;
		margin-right: 0px;
		padding: 15px 15px;
		margin-top: 0px;
		margin-bottom: 0px;
	}
}
.navbar-inverse .navbar-toggle .icon-bar{
	background-color:#fff;
}

.logocontainer{
	padding: 0px 0px;
}


.alignMiddle>div {
	display: table
}
.alignMiddle>div>div {
	display: table-cell;
	vertical-align: middle
}
.lineheightn{
	line-height:24px !important;
}
.lineheightm{
	line-height:40px !important;
}
.maxwidth750{
	max-width:750px;
	width:100%;
}
.maxwidth900{
	max-width:900px;
	width:100%;
}
.maxwidth1000{
	max-width:1000px;
	width:100%;
}
.maxwidth100p{
	max-width:100%;
	
}
.textcenter {
	text-align: center
}
.textright{
	text-align: right;
}
.dleftmcenter{
	text-align: center
}
@media(min-width:768px){
	.dleftmcenter{
		text-align: left;
	}
}
.posrelative{
	position:relative;
}
.marginauto{
	margin-left:auto;
	margin-right:auto;
}
.marginleft0{
	margin-left:0px;
}
.clearboth{
	clear:both;
}
.displayib{
	display:inline-block !important;
}
.nopadding{
	padding:0px !important;
}
.boldtext {
	font-weight: 700
}
.extraboldtext {
	font-weight: 900;
}
@media(min-width:768px){
	.hoverzoom:hover{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;-webkit-transform:scale(1.15);-moz-transform:scale(1.15);-ms-transform:scale(1.15);-o-transform:scale(1.15);transform:scale(1.15)}
}
.listaplha{
	list-style-type: lower-alpha;
}
.dnone{
	display:none;
}
.error_msg{
	opacity:0;
	
    line-height: 15px;
	font-size:12px;
	color:#ee0000;
}

.arrow_left{
	width: 40px;
	height:40px;
	position:absolute;
	left:0px;
	top:calc(50% - 25px);
	background-image:url('../images/icon_arrow_left.png');
	background-size:18px 37px;
	background-repeat:no-repeat;
	background-position:center;
	z-index:10;
	cursor:pointer;
	transition: all 300ms ease;
	opacity:0.75;
}

.arrow_right{
	width: 40px;
	height:40px;
	position:absolute;
	right:0px;
	top:calc(50% - 25px);
	background-image:url('../images/icon_arrow_right.png');
	background-size:18px 37px;
	background-repeat:no-repeat;
	background-position:center;
	z-index:10;
	cursor:pointer;
	transition: all 300ms ease; 
	opacity:0.75;
}
@media(min-width:768px){
/* 	.arrow_left{
		left:-20px;
	}
	.arrow_right{
		right:-20px;
	} */
}
.arrow_right:hover, .arrow_left:hover{
	transform:scale(1.25);
	opacity:1;
}

.content_popup{background-color:#FFF;padding:20px 20px;}
@media(min-width:768px){
	.content_popup{
		padding:20px 50px;
	}
}
@media(min-width:768px){
	.content_popup{min-width:360px;height:240px}
	
}
@media(max-width:767px){
	.content_popup{
		max-width:100%;
		margin:0px 10px;
	}
}
.content_popup>div{display:table;height:100%;width:100%}
.content_popup>div>div{display:table-cell;vertical-align:middle}
.content_popup .title{font-size:20px;line-height:30px;letter-spacing:1px;text-align:center;margin-bottom:10px;font-weight:700}
.content_popup .caption{text-align:center;margin-bottom:20px;letter-spacing:1px}

.content_popup.leftalign .title,
.content_popup.leftalign .caption{
	text-align:left;
}
.content_popup.autoHeight{
	height:auto;
}

.button.dnone{
	display:none;
}
.button{
	color:#0066b1 !important;
	border:1px solid #0066b1;
	padding:12px 20px;
	border-radius:6px;
	display: inline-block;

	background-color:#fff !important;
	text-align:center;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
}
.button.small{
	color:#0066b1 !important;
	border:1px solid #0066b1;
	padding:2px 6px;
	border-radius:4px;
	background-color:#fff !important;
}
.button.mid{
	color:#0066b1 !important;
	border:1px solid #0066b1;
	padding:6px 12px;
	border-radius:4px;
	background-color:#fff;
}
.button.blue{
	color:#fff !important;
	border:1px solid #0066b1;
	background-color:#0066b1 !important;
}
.button.orange{
	color:#fff !important;
	border:1px solid #f6931e;
	background-color:#f6931e !important;
}
.button.orangetext{
	color:#f6931e !important;
	border:1px solid #f6931e;
	background-color:#fff;
}

.button.green{
	color:#fff !important;
	border:1px solid #39b44a;
	background-color:#39b44a !important;
}

.button.greentext{
	color:#39b44a !important;
	border:1px solid #39b44a;
	background-color:#fff;
}

.button.red{
	color:#fff !important;
	border:1px solid #ee4236;
	background-color:#ee4236 !important;
}

.button.redtext{
	color:#ee4236 !important;
	border:1px solid #ee4236;
	background-color:#fff;
}

.button.long{ 
	width:330px;
}
.button.autowidth{
	width:auto;
}
.button.block{
	display:block;
}

.button:hover{
	opacity:0.8;
}
.button.nobg{
	background-color:transparent;
	border:1px solid #1c74bb;
	color:#1c74bb;
}
.button.tiny{
	border-radius: 5px;
    padding: 5px 15px;
    width: auto;
    line-height: 20px;
}

.button.rightspacing{
	margin-right:15px;
}
.purpletext{
	color:#cd5fdd;
}
.whitetext{
	color:#FFF;
}
.orangetext{
	color:#1c74bb;
}
.blacktext{
	color:#000;
}
.darkgreytext{
	color:#1b1b1d;
}
.greytext{
	color:#AFAFAF;
}
.redtext{
	color:#EE0000;
}
.bluetext{
	color:#0066b1;
}
.lightgreytext{
	color:#CCC;
}
.bg_white{
	background-color:#FFF;
}
.bg_black{
	background-color:#000;
}
.bg_purple{
	background-color:#e3dfed;
}




@media(min-width:768px){
	
 .col2_item:nth-child(2n+1){
		padding-right: calc(30px / 2 * 1);
	}
	.col2_item:nth-child(2n+2){
		padding-left: calc(30px / 2 * 1);
	}
	
	.col3_item:nth-child(3n+1){
		padding-right: calc(20px / 3 * 2);
	}
	.col3_item:nth-child(3n+2){
		padding-left: calc(20px / 3 * 1);
		padding-right: calc(20px / 3 * 1);
	}
	.col3_item:nth-child(3n){
		padding-left: calc(20px / 3 * 2);
	}
	
	
	
}

	.colcontainer{
		margin-left:-10px;
		margin-right:-10px;
	}
	.colcontainer.thickpadding{
		margin-left:-20px;
		margin-right:-20px;
	}
	.colcontainer.thinpadding{
		margin-left:-5px;
		margin-right:-5px;
	}
	
	.col_item{
		padding-left:10px;
		padding-right:10px;
	}
	.col_item.thickpadding{
		padding-left:20px;
		padding-right:20px;
	}
	
	.col_item.thinpadding{
		padding-left:5px;
		padding-right:5px;
	}
	
	

.homepage_slider .owl-theme .owl-nav.disabled+.owl-dots{
	margin:auto;
}
.owl-theme .owl-nav.disabled+.owl-dots{
	margin: 10px 0px;
}
.owl-theme .owl-dots .owl-dot{
	outline:none;
}
.owl-theme .owl-dots .owl-dot span{
	width:15px;
	height:15px;
	margin-top:0px;
	margin-bottom:0px;
	background-color:#d5d6d8;
}
.owl-theme .owl-dots .owl-dot.active span{

	background-color:#1c74bb;
}

.autowidth{
	width:auto !important;
}
.fullwidth{
	width:100%;
}
.maxwidth{
	max-width:100%;
}
	.mb-l{margin-bottom:60px;}
	.mb-m{margin-bottom:40px;}
	.mb-s{margin-bottom:20px;}
	.mb-xs{margin-bottom:10px;}
	
	.mt-l{margin-top:60px;}
	.mt-m{margin-top:40px;}
	.mt-s{margin-top:20px;}
	.mt-xs{margin-top:10px;}

	.pb-l{padding-bottom:60px;}
	.pb-m{padding-bottom:40px;}
	.pb-s{padding-bottom:20px;}
	.pb-xs{padding-bottom:10px;}
	
	.pt-l{padding-top:60px;}
	.pt-m{padding-top:40px;}
	.pt-s{padding-top:20px;}
	.pt-xs{padding-top:10px;}
	
	.pl-l{padding-left:60px;}
	.pl-m{padding-left:40px;}
	.pl-s{padding-left:20px;}
	.pl-xs{padding-left:10px;}

@media(max-width:767px){
	.mb-none{
		margin-bottom:0px !important;
	}
	.mt-none{
		margin-top:0px !important;
	}
	.pt-none{
		padding-top:0px !important;
	}
	.pb-none{
		padding-bottom:0px !important;
	}
	.pl-none{
		padding-left:0px !important;
	}
}


/*global*/
/*font*/

body {
	font-size: 16px;
	line-height: 20px;
	letter-spacing:0px;
}
.talltext{
	line-height:36px;
}
@media(max-width:991px){
	.talltext {
		line-height: 24px;
	}
}
body{
	font-size:18px;
	line-height:24px;
}
.header-text{
	font-size:16px;
	line-height:24px;
}
.s-text{
	font-size: 14px;
	line-height:18px;
}

.sm-text {
	font-size: 20px;
	line-height: 28px
}

.m-text {
	font-size: 28px;
	line-height: 36px
}

.l-text {
	font-size: 32px;
	line-height: 36px;
	
}
.xl-text {
	font-size: 36px;
	line-height: 42px;
	
}
.xxl-text {
	font-size: 64px;
	line-height: 64px;
	letter-spacing: -1px;
	
}
@media(max-width:991px){
	
	.l-text {
		font-size: 26px;
		line-height: 32px;
		
	}
}
@media(max-width:767px){
	
	.m-text {
		font-size: 25px;
		line-height: 30px
	}

}
/*fonts*/
.displayblock{
	display:block !important;
}

.clearfix{
	clear:both;
}



#logo_fillupyourhappiness{
	max-width:300px;
	
}

@media(min-width:768px){
	.info_item{
		width:50%;
		margin-bottom:40px;
	}
	.info_item:nth-child(2){
		position:absolute;
		right:0px;
		top:0px;
		height: calc(100% - 70px - 40px);
	}
	.info_item:nth-child(2) .content{
		height: calc(100%);
		
	}
	
}
.info_item .title{
	line-height: 40px;
}

@media(max-width:767px){
	.info_item:nth-child(1){
		margin-bottom:40px;
	}
	
	.info_item .title{
		font-size: 26px;
		
	}
	
}

.info_item .title{
	height:70px;
	max-width:75%;
	text-align:center;
	color:#FFF;
	padding-top: 10px;
	padding-bottom: 24px;
	background-color:#cd5ede;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}

.info_item .content{
	background-color:#e3dfed;
	padding:70px 40px 0px 40px;
	
	-webkit-box-shadow: 4px 4px 10px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 10px 4px rgba(0,0,0,0.2);
	
}
@media(max-width:767px){
	.info_item .title{
		max-width:85%;
	}
	.info_item .content{
		padding:70px 15px 0px 15px;
	}
}


.info_item .content .deco3{
	position: absolute;
    width: 90%;
    top: -20px;
    left: 5%;
	background-image:url('/images/content_deco3.png');
	background-size:100%;
	background-position: center top;
	background-repeat:no-repeat;
	padding-bottom:calc(100% * 112 / 528);
}
@media(max-width:767px){
		
	.info_item .content .deco3{
		width: 105%;
		left: -2.5%;
	}
}

@media(min-width:768px){
	
	.info_item .content.deco_content{
		
		background-image:url('/images/content_deco2.png'), url('/images/content_deco1.png?2');
		background-size:90%, 90%;
		background-position: center 30px, center bottom;
		background-repeat:no-repeat, no-repeat;
		
	}

	

	.content_wrapper{
		height:100%;
		width:100%;
		display:table;
	}
	.content_wrapper>div{
		height:100%;
		width:100%;
		display:table-cell;
		vertical-align:middle;
	}

}

#stanleyplaza_gift_container{
	max-width:160px;
}
@media(min-width:768px){
	.container{
		max-width:900px;
	}
}
#content_container{
	
	position: relative;
}
#gameplay_container{
	max-width:280px;
}

#gift_icon{
	vertical-align:bottom;
	width:40px;
	
}


.button_link{
	height:120px;
}


.bg_wood{
	background-image:url('/images/wood_bg_04.jpg');
	background-size:1920px auto;
	background-position:center;
	
	background-repeat:repeat-y;
}

@media(max-width:767px){


	.bg_wood{
		background-size:1200px auto;
		
	}	
}








@media(max-width:767px){
	#footer{
		padding-bottom:calc(100% * 160 / 480);
	}
	
	#footer_cameraeffect_bg{
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4fbfb+50,f4fbfb+100&0+0,1+50,1+100 */
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4fbfb+50,f4fbfb+51,f4fbfb+100&0+0,0+50,1+51,1+100 */
	
		
		
	}
	
	#footer_cameraeffect_icon{
		position: fixed;
		bottom: 0px;
		left:0px;
		width: 100%;
		
		
	}
	#footer_cameraeffect_icon>div{
		width: 100%;
		max-width: 480px;
		margin:auto;
		background-position: center bottom;
		background-repeat:no-repeat;
		padding-bottom:calc( 100% * 160 / 480);
		background-size:100%;
		background-image:url('/images/stanleyplaza-camera-effect-m.png');
	}
	#footer_cameraeffect_icon.comingsoon>div{
		background-image:url('/images/stanleyplaza-camera-effect-comingsoon-m.png');
	}
}



@media(max-width:767px){
/* 	#footer_cameraeffect_icon {
	  animation: shake 5s;
	  animation-iteration-count: infinite;
	}
		
	@keyframes shake {
	  0% { transform: translate(1px, 1px) rotate(0deg); }
	  10% { transform: translate(-1px, -2px) rotate(-1deg); }
	  20% { transform: translate(-3px, 0px) rotate(1deg); }
	  30% { transform: translate(3px, 2px) rotate(0deg); }
	  40% { transform: translate(1px, -1px) rotate(1deg); }
	  50% { transform: translate(-1px, 2px) rotate(-1deg); }
	  60% { transform: translate(-3px, 1px) rotate(0deg); }
	  70% { transform: translate(3px, 1px) rotate(-1deg); }
	  80% { transform: translate(-1px, -1px) rotate(1deg); }
	  90% { transform: translate(1px, 2px) rotate(0deg); }
	  100% { transform: translate(1px, -2px) rotate(-1deg); }
	}
	 */
}




#ig_container{
	max-width:160px;
	display: inline-block;
}

#ig_container img{
	border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}








#deer_smile{
	position: absolute;
	bottom:20px;
	height:40%;
	width:100%;
	left:0px;
	
	overflow-y:hidden;
}

#icon_smile{
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	padding-bottom: calc(50px * 120 / 80);
	background-image: url('/images/icon_smile.png');
	width: 50px;
	height: 75px;
	
	position:absolute;
	bottom:44%;
	left:58%;
	
	
	
	animation: bounce 300ms infinite;
	-webkit-animation: bounce 300ms infinite;
	
	
}

#icon_deer{
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	padding-bottom: calc(100px * 63 / 80);
	background-image: url('/images/icon_deer.png');
	
	width: 100px;
	height: 80px;
	
	position:absolute;
	bottom:-2%;
	left:37%;
}

#deer_smile_container{
	
	animation: showhide 4000ms infinite;
	-webkit-animation: showhide 4000ms infinite;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}


@-webkit-keyframes showhide {
  0%{
    -webkit-transform: translateY(0px);
	opacity:1;
  }
  40%{
    -webkit-transform: translateY(0px);
	opacity:1;
  }
  60% {
    -webkit-transform: translateY(80px);
	opacity:0;
  }
  80% {
    -webkit-transform: translateY(80px);
	opacity:0;
  }
  100% {
    -webkit-transform: translateY(0px);
	opacity:1;
  }
}
@keyframes showhide {
  0%{
    -webkit-transform: translateY(0px);
	opacity:1;
  }
  40%{
    -webkit-transform: translateY(0px);
	opacity:1;
  }
  60% {
    -webkit-transform: translateY(80px);
	opacity:0;
  }
  80% {
    -webkit-transform: translateY(80px);
	opacity:0;
  }
  100% {
    -webkit-transform: translateY(0px);
	opacity:1;
  }
}