/* Google fonts & font family
==================================================*/

@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
html,body{
	margin:0;padding:0;
	font-family: 'Poppins','Noto Sans TC', sans-serif, "Microsoft JhengHei", "微軟正黑體","Arial",Helvetica,sans-serif;
	font-size:12px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	 
	height: 100%;
    color: #333; 
	background-color:#FFF;
}

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


a,
a * {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}
a:hover,
a:hover *,
a:focus {
    text-decoration: none;
    color: inherit;
    outline: 0;
}
a:focus {
    border: 0;
}

a[href^="mail-to"], a[href^="mail-to"]:hover{	
	text-decoration:underline;
}
a[href^="mail-to"]:hover{
	opacity:0.8;
}
.row, .container , .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	margin: 0px;
	padding: 0px;
}

.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;
}
.container {
	margin-left: auto;
	margin-right: auto;
}
.img-full {
	width: 100%;
	height: auto;
}



.alignMiddle>div {
	display: table
}
.alignMiddle>div>div {
	display: table-cell;
	vertical-align: middle
}
.maxwidth100p{
	max-width:100%;

}
.maxwidth600{
	max-width:600px;
	width:100%;
}
.maxwidth750{
	max-width:750px;
	width:100%;
}
.maxwidth900{
	max-width:900px;
	width:100%;
}
.maxwidth1000{
	max-width:1000px;
	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;
}
.clearboth{
	clear:both;
}
.displayb{
	display:block !important;
}
.displayib{
	display:inline-block !important;
}
.nopadding{
	padding:0px !important;
}
.boldtext {
	font-weight: 700;
}
.lboldtext {
	font-weight: 500;
}
@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;
	font-size:12px;
	color:#ee0000;
}


.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:240px;}
	
}
@media(max-width:767px){
	.content_popup{
		max-width:100%;
		padding: 10px 0px;
		margin:0px 10px;
	}
}
.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;
}

.fancybox-content{
	max-width: 90%;
	max-height:90%;
	padding:15px;
}

@media(min-width:768px){
	.fancybox-content{
		max-width: 80%;
		max-height:80%;
	}
}
/*
.button{
	color:#FFF;
	padding:10px 0px;
	position:relative;
	width:calc(100% - 60px);
	display:block;
	background-color:#1c74bb;
	text-align:center;
	cursor:pointer;
	font-weight:bold;
	font-size:18px;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	letter-spacing: 2px;
}
.button::before {
    content: " ";
    position: absolute;
    left: -28px;
    top: 0px;
    width: 30px;
    height: 40px;
    background-color: #1c74bb;
    border-right: none;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
.button.displayib{
	width:auto;
	padding-left: 20px;
	padding-right:20px;
	margin-left: 40px;
    margin-right: 40px;
}


.button::after {
    content: " ";
    position: absolute;
    right: -28px;
    top: 0px;
    width: 30px;
    height: 40px;
    background-color: #1c74bb;
    border-right: none;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
*/
.button:hover {
	opacity:.9;
}




.button.lightblue{
	color:#FFF;
	background-color:#4da1e9;
}

.button.lightblue::after,
.button.lightblue::before{
	
	background-color:#4da1e9;
}

.button.lightblue:hover{
	color:#FFF;
	background-color:#4da1e9;
}


.button{
    color: #FFF !important;
    border: 1px solid #0ca7dd;
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-block;
    background-color: #0ca7dd !important;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}


.button_rect.long{
	padding: 12px 80px;
}

.button_rect.blue {
    color: #fff !important;
    border: 1px solid #0066b1;
    background-color: #0066b1 !important;
}


.whitetext{
	color:#FFF;
}
.blacktext{
	color:#000;
}

.greytext{
	color:#525252;
}
a.greytext:hover{
	color:#525252;
}

.greytext_light{
	color:#EEE;
}

.lightbluetext{
	color:#1c74bb;
}
.bluetext{
	color:#1a327c;
}
.darkredtext{
	color:#c21f20;
}
.bluetext_light{
	color:#4da1e9;
}

.redtext{
	color:#ff7e6c;
}

.yellowtext{
	color:#fbc73d;
}


.cyantext{
	color:#2dadb0;
}
.cyan_lighttext{
	color:#a6c512;
}
.bg_darkblue{
	background-color:#1a327c;
}
.bg_paleyellow{
	background-color:#fef7ef;
}
.bg_orange{
	background-color:#fc4c02;
}
.bg_mannings{
	background-color:#fabb92;
}
.bg_grey_light{
	background-color:#fafafc;
}
.bg_grey{
	background-color:#808080;
}
.bg_white{
	background-color:#FFF;
}
.bg_cyan{
	background-color:#2dadb0;
}
.bg_cyan_light{
	background-color:#a6c512;
}
.bg_cyan_pale{
	background-color:#edf3d1;
}
.bg_blue{
	background-color:#0ca7dd;
}

label:hover{
	opacity:0.9;
}

.fullwidth{
	width:100%;
}
.maxwidth{
	max-width:100%;
}

.mb-xxl{margin-bottom:120px;}
.mb-xl{margin-bottom:80px;}
.mb-l{margin-bottom:60px;}
.mb-m{margin-bottom:40px;}
.mb-s{margin-bottom:20px;}
.mb-xs{margin-bottom:10px;}
.xs-mb-xs{
	margin-bottom:10px !important;
}

.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-xl{padding-left:80px;}
.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;
	}
}


body {
	font-size: 14px;
	line-height: 22px;
	letter-spacing:0px;
}


.s-text{
	font-size: 12px;
	line-height: 14px
}

.ssm-text{
	font-size:   18px;
	line-height: 24px
}

.sm-text {
	font-size: 22px;
	line-height: 25px
}

.m-text {
	font-size: 24px;
	line-height: 30px
}

.l-text {
	font-size: 30px;
	line-height: 35px;
	
}

.xl-text{
	font-size: 40px;
	line-height: 48px;
}
.xxl-text{
	font-size: 60px;
	line-height: 70px;
}
.xxxl-text{
	font-size: 70px;
	line-height: 70px;
}
@media(min-width:992px){
	.xxxl-text{
		font-size: 80px;
		line-height: 80px;
	}
	
}
@media(min-width:1200px){
	.xxxl-text{
		font-size: 90px;
		line-height: 100px;
	}
	
}
@media(max-width:767px){
	.xxl-text{
		font-size: 40px;
		line-height: 48px;
	}
	.xxxl-text{
		font-size: 40px;
		line-height: 48px;
	}
}

@media(max-width:340px){
	
	.xxl-text{
		font-size: 34px;
		line-height: 40px;
	}
}

@media(min-width:768px){
	
	.ssm-text{
		font-size:   18px;
		line-height: 24px
	}

}
@media(max-width:991px){

	.sm-text {
		font-size: 22px;
		line-height: 25px
	}

	.m-text {
		font-size: 24px;
		line-height: 30px
	}

	.l-text {
		font-size: 24px;
		line-height: 30px;
		
	}
}
@media(min-width:768px) and (max-width:1199px){

	.ssm-text{
		font-size:   15px;
		line-height: 20px
	}
}
@media(max-width:1199px){

	.ssm-text{
		line-height: 20px
	}
}

@media(max-width:767px){
	.container{
		max-width:480px;
		margin-left:auto;
		margin-right:auto;
		padding:0px 15px;
	}
}
@media(min-width:1200px){
	.container{
		max-width:1200px;
		margin-left:auto;
		margin-right:auto;
		
	}
}



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






/* home - kv*/
#home{
}
#home-kv{
	
	position:relative;
}


/* home - kv*/






/*header*/
	header{
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fe816b+0,f7d365+100 */
		background: #fe8d7b; /* Old browsers */
		background: -moz-linear-gradient(left,  #fe8d7b 0%, #f2cf1d 98%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #fe8d7b 0%,#f2cf1d 98%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #fe8d7b 0%,#f2cf1d 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe8d7b', endColorstr='#f2cf1d',GradientType=1 ); /* IE6-9 */


		position:fixed;
		height:60px;
		width:100%;
		top:0px;
		left:0px;
		z-index:10000;
		transition:all 300ms ease;
	}
	@media(min-width:768px){
		header{
			height:90px;
		}
	}
	
	header.toggle{
		background-color:transparent;
	}
	#logo_image{
		margin:15px 10px;
		position:relative;
		float:left;
		cursor:pointer;
	}
	@media(max-width:767px){
		#logo_image{
			margin:10px 10px;
		}
	}
	#logo_image img{
		height:40px;
	}
	@media(min-width:768px){
		#logo_image img{
			height:60px;
		}
	}
	
	#header_logo_white{
		position:absolute;
		left:0px;
		top:0px;
		
		
	}
	header #header_logo_black{ 
		opacity:1;
		transition: opacity 300ms;
	}
	header.toggle #header_logo_black{ 
		opacity:0;
	}
	
	header #header_logo_white{ 
		opacity:0;
		transition: opacity 300ms;
		-webkit-transition-delay: 100ms; /* Safari */
		transition-delay: 100ms;
	}
	header.toggle #header_logo_white{ 
		opacity:1;
	}
	
	
	
	
	header>div.container{
		position:relative;
	}
	
	
	#header_right{
		float:right;
	}
	
	#toggle{
		/* position:absolute;
		right:0px;
		top:0px; */
		float:left;
		height:100%;
		width:44px;
		padding: 20px 10px;
		
		cursor:pointer;
		z-index:1000
	}
	@media(min-width:768px){
		#toggle{
			width:60px;
			padding:30px 17.5px;
		}
	}
	#toggle span{
		height: 4px;
		display:block;
	
		background-color:#333;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
	}
	#toggle:hover span{
		background-color:#666;
		
	}
	
	#toggle.active span{
		background-color:#fff;
	}
	
	#toggle span.middle{
		transform:translateY(4px);
	}
	#toggle span.bottom{
		transform:translateY(8px);
	}
	
	
	#toggle.active span.top{
		transform:translateY(8px) rotate(315deg);
	}
	#toggle.active span.middle{
		display:none;
	}
	#toggle.active span.bottom{
		transform:translateY(4px) rotate(405deg);
	}
	
	.lang_item{
		float: left;
		padding: 8px;
		margin: 12px 4px;
		font-size: 15px;
		line-height: 20px;
		
		
		width: 36px;
		border-radius: 50%;
		text-align: center;
		cursor:pointer;
		position:relative;
		z-index:20;
		color:#888;
		
		transition:all 300ms ease;
	}
	
	@media(min-width:768px){
		.lang_item{
			padding: 8px;
			margin: 22px 4px;
			font-size: 15px;
			line-height: 20px;
		}
	}
	
	.lang_item.active{
		color:#FFF;
		background-color:#999;
		font-weight:bold;
	}
	
	header.toggle .lang_item{
		opacity:0;
	}
	
/*header*/
/*footer*/
	footer{
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fe816b+0,f7d365+100 */
		background: #fe8d7b; /* Old browsers */
		background: -moz-linear-gradient(left,  #fe8d7b 0%, #f2cf1d 98%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #fe8d7b 0%,#f2cf1d 98%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #fe8d7b 0%,#f2cf1d 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe8d7b', endColorstr='#f2cf1d',GradientType=1 ); /* IE6-9 */


		min-height:70px;
		padding:15px 0px !important;
		color:#FFF;
		
	}
	@media(min-width:768px){
		footer{
			height:90px;
		}
	}
	
	.footer_logo{
		text-align:center
		
	}
	.footer_logo img{
		height:40px;
	}
	@media(min-width:768px){
		.footer_logo img{
			height:60px;
		}
		
		.footer_logo{
			text-align:left;
			
		}
	}
	.footer_copyright{
		text-align:center;
		line-height:40px;
	}
	@media(min-width:768px){
	
		.footer_copyright{
			text-align:center;
			line-height:60px;
		}	
	}
	@media(max-width:767px){
		.footer_copyright{
			margin-bottom:10px;
		}
		
	}
	.footer_icons_container{
		text-align:center;
		
	}
	.footer_icon{
		cursor:pointer;
		width:40px;
		height:40px;
		display:inline-block;
		vertical-align: top;
	}
	.footer_icon img{
		width:100%;
	}
	@media(min-width:768px){
		
		.footer_icons_container{
			text-align:right;
			padding:10px 0px;
		}
		.footer_icon{
			margin-left:10px;
		}
	}
	
	#backtotop{
		position:fixed;
		right:-200px;
		bottom:100px;
		cursor:pointer;
		transition: all 300ms ease;
	}
	#backtotop:hover{
		transform: scale(1.2);
	}
	
	#backtotop.active{
		right:40px;
	}
	@media(max-width:767px){
			
		#backtotop{
			bottom:15px;
		}
	}
	#backtotop div{
		color: #0ca7dd;
		background-color:#FAFAFA;
		border-radius:50%;
		line-height:40px;
		text-align:center;
		width:40px;
		border:1px solid #DDD;
		height:40px;
	}
	
/*footer*/



/*header-overlay*/
	#header-overlay{
	
		width:100%;
		height:100%;
	
		background-color: rgba(25,25,25,0.9);
		opacity:0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		position:fixed;
		top:0px;
		left:0px;
		transform:translateY(-100%);
		z-index:100;
		color:#FFF;
	}
	#header-overlay.active{
		opacity:1;
		
		transform:translateY(0%);
		
	}
	#header-overlay>div{
		display:table;
		height:100%;
		width:100%;
	}
	#header-overlay>div>div{
		display:table-cell;
		vertical-align:middle;
		text-align:center;
	}
	#header-overlay ul{
		list-style-type:none;
		padding-left: 0px;
	}
	#header-overlay .link-item{
		padding:2vmin;
		font-size: 5vmin;
	}
/*header-overlay*/

	 section{
		position: relative;
		background-color:#FFF;
	}
	
		

/*global*/

	.section_title{
		
		text-align:center;
		margin-top:40px;
		margin-bottom:40px;
	}
	.section_title>div{
		position:relative;
		display:inline-block;
		color:#fbc73d;
		text-align:center;
		font-size: 50px;
		line-height: 60px;
		padding-bottom:10px;
	}
	.section_title.red>div{
		color:#ff7e6c;
	}
	
	
		
	.section_title>div::after{
		position:absolute;
		content:"";
		top:100%;
		left:0px;
		width:100%;
		height:3px;
		background-color:#fbc73d;
	}
	.section_title.red>div::after{
		
		background-color:#ff7e6c;
	}
		
	
	@media(max-width:767px){
		
		.section_title{
			font-size: 36px;
			line-height: 45px;
		}
	}

	@media(max-width:340px){
		
		.section_title{
			font-size: 30px;
			line-height: 35px;
		}
	}
	
/*global*/


/*homepage*/

	section.row{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	@media(max-width:767px){
			
		section.row{
			padding-top: 20px;
			padding-bottom: 20px;
		}
	}

	
#ig_carpark{
	position: absolute;
    display: block;
    width: 19%;
    height: 26%;
    top: 18.5%;
    right: 5%;
}	
	


#ig_stanleyplazahk{
	position: absolute;
    display: block;
    width: 37%;
    height: 7%;
   
    top: 61.5%;
    left: 31.5%;
}	
	



.bg_footer{
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('/images/bg_footer.jpg');
	padding-bottom:calc(100% * 590 / 1920);
}

@media(max-width:767px){

	.bg_footer{
		background-image: url('/images/bg_footer_m.jpg');
		padding-bottom:calc(100% * 405 / 750);
	}
}

@media(max-width:767px){
	.mb-xxl{margin-bottom:60px;}
}


@media(max-width:767px){

	#content_container>.container{
		padding-left:0px;
		padding-right:0px;
	}
}

.kv_menu.col1{
	left: 24.9%;
}
.kv_menu.col2{
    left: 42%;
}
.kv_menu.col3{
    left: 59%;
}
.kv_menu.row1{
	top: 33.5%;
}
.kv_menu.row2{
	top: 43.6%;
}
.kv_menu{
	cursor:pointer;
	position:absolute;
	height: 9%;
    width: 16%;
}

@media(min-width:768px){
	#footer_cr{
		height:80px;
		line-height:40px;
		margin-top:-80px;
	}
}



@media(max-width:767px){
	#footer_cr{
		line-height: 12px;
		margin-top: -46px;
	}
}

#nav_container{
	height: 50px;
    position: fixed;
    top: 0px;
  
    z-index: 1;
    width: 100%;
}
#nav_toggle{
	height: 30px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
	z-index:10;
}

#nav_toggle>span{
	height: 5px;
    margin-bottom: 6px;
    background: #FFF;
    display: block;
	transition: all 300ms ease;
}

#nav_toggle>span:nth-child(2){
	transition: none;
}
#nav_toggle>span:last-child{
	margin:0px;
}
#nav_toggle.active>span:first-child{
	    transform: rotate(45deg);
    transform-origin: top left;
    width: 100%;
}
#nav_toggle.active>span:nth-child(2){
	display:none
}
#nav_toggle.active>span:last-child{
	transform: rotate(-45deg) translateY(6px) translateX(-6px);
    transform-origin: bottom left;
    width: 100%;
}


#nav_toggle>span:first-child{
	transform: rotate(0deg);
    transform-origin: top left;
    width: 100%;
}
#nav_toggle>span:last-child{
	transform: rotate(0deg) translateY(0px) translateX(0px);
    transform-origin: bottom left;
    width: 100%;
}

.mobil_menu{
	display:none;
	
	width:50%;
	list-style-type:none;
	position: absolute;
    right: 0px;
    top: 0px;
	background-color:rgba(0,0,0,0.55);
	padding:20px 25px 0px 25px;
	
	transition: all 200ms ease;
}
.mobil_menu li{
	padding:12.5px 0px;
	color:#FFF;
	text-align:center;
	border-bottom:1px solid #FFF;

}
.mobil_menu li:last-child{
	border:none;
}

.mobil_menu.active{
	display:block; 
}

#ig_playtheeffect{
	position: absolute;
    display: block;
    width: 38%;
    height: 9%;
    top: 54.5%;
    left: 54.5%;
}
#ig_playtheeffect2{
	position: absolute;
    display: block;
    width: 18%;
    height: 4%;
    top: 59%;
    left: 38.5%;
}

img.lazy{
    width: 100% !important;
}