@charset "utf-8";
/*
* LHG MEMBER WEBSITE v1.0
* Support by: www.onesolution.com.hk
* Last updated: 2014-11-06
* Last remark: 
*/


/* Import
================================================== */
	@import url('reset.css');
	@import url('gird.css');
	@import url('navegation.css');
	@import url('slider.css');


/* Basic Styles
================================================== */
	::-moz-selection{ color: #2b505e; background: #aae0fe; }
	::selection { color: #2b505e; background: #aae0fe; }
   
	body {
		font-family: 'Microsoft JhengHei', sans-serif, Arial, Helvetica ;
		font-size: 16px ;
		font-weight: normal;
		color: #555459;
		overflow: visible;
		padding-top: 5px;
		background: url(../images/bg_top_color.png) repeat-x #eee center 0;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%; 
		-ms-text-size-adjust: 100%; }

	/* ===== Framework ===== */
	#wrapper {		
		position: relative;
	}

	.content_wrapper {		
		position: relative;
		width: 100%;
		margin: auto;
	}

	a:active,a:hover {
    	outline: 0;	
	}
	
	a {		
		color:#ED8001;
		-moz-transition:  all 0.2s ease-in-out;
		-webkit-transition:  all 0.2s ease-in-out;
		-o-transition:  all 0.2s ease-in-out;
		-ms-transition:  all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		color: inherit;
		outline: 0;
		text-decoration: none;
	}	


	/* ===== Typography ===== */
	a:hover {
		color:#F9BF3F;
	}
	
	h1 {}

	h2 {
		font-size: 38px;
		font-weight: normal;
		line-height: 60px;
		margin-bottom: 20px;
	}

	h3 {
		font-size: 21px;
		font-weight: normal;
		line-height: 60px;
		border-bottom: 1px solid #CACACA;
		margin-bottom: 20px;
		text-align: left;
	}

	h4 {}

	h5 {
		font-size: 18px;
		font-weight: bold;
	}

	h6 {}

	/* ===== Misc ===== */
	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.tl {
		text-align: left;
	}

	.tr {
		text-align: right;
	}

	.tc {
		text-align: center;
	}

	.hide {
		display: none !important;
	}

	.nobg {
			background: none !important;
	}

	.wtbg {
		background: #fff
	}

	.pd_0 {
		padding: 0!important;
	}

	.mb_0 {
		margin-bottom: 0px !important;
	}

	.mr_20p {
		margin-right: 20px !important;
	}

	/* text color */
	.tpeach {
		color: #FFA47D !important;
	}


/* Header
================================================== */
	#header {
		background: #fff;
		position: relative;
		display: block;
		height: 100px;
		width: 100%;
		vertical-align: middle;
		border-bottom: 1px solid #CACACA;
		z-index: 999;
	}

	#logo {
		position: relative;
		display: inline-block;
		width: 90px;
		height: 80px;
		margin: 10px;
	}

		#logo img {
			width:100%;
			height: auto;
		}

	#main_menu {
		position: relative;
		display: inline-block;
		width: 850px;
		height: 100px;
	}
	
		#main_menu .main_tit {
			float: right;
			width: 150px;
			height: 30px;
			margin: 15px 10px 10px 0;
		}

		#main_menu .menu {
			float: right;
			clear: both;
			position: relative;
		}
	
		#main_menu .user_container {
			position: absolute;
			top: 27px;
			right: 160px;
			font-size: 14px;
			color: #969696;
		}

			#main_menu .user_container a {
				display: inline-block;
				margin-right: 20px;
			}

			#main_menu .user_container .user_name {
				color: #ED8001;
			}

			#main_menu .user_container .user_name:hover {
				text-decoration: underline;
			}

			#main_menu .user_container .logout img{
				height: 12px;
				width: auto;
			}


/* Slider
================================================== */
#main_slider {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	max-height: 420px;
	background: #fff;
}

	#main_slide img {
        width: 100%;
        height: auto;
    }

    #main_slider .slides li {
    	margin: 0 auto;
    	width: 100%;
    	display: block;
    }

    #main_slider .slides li a {
    }

     #main_slider .slides li img {
     	width: 100%;
     	height: auto;
    }



.org_ass {
	position: relative;
	max-width: 1440px;
	max-height: 60px;
	margin: 0 auto 10px auto;

}
.org_ass img {
	width: 100%;
	height: auto;
}


/* HOME Announcement Block
================================================== */
.anno_block {
	position: relative;
	display: block;
	margin: 0px auto 60px auto;
	padding: 0px 5px;
}

	.anno_block .ass_sayhi {
		position: relative;
		max-width: 460px;
		height: auto;
		margin: -10px 0 -50px -20px;
	}

	.anno_block	.basic_box {
		padding: 30px;
	}	



/* General Setting
================================================== */
.basic_box {
	position: relative;
	margin: 0 auto;
	padding: 50px;
	line-height: 30px;
	border: 6px solid #D1D1D1;
	background: #fff;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.general_block {
	position: relative;
	padding: 60px 0;
}
	.general_block p {
		line-height: 30px;
		padding: 0 60px;
	}

	.general_block img.separator {
		display: block;
		position: relative;
		max-width: 20px;
		height: auto;
		margin: 15px auto;
		border-bottom: none;
	}

	.general_block img.original {
		display: block;;
		margin: 10px auto;
		max-width: 940px;
		height: auto;

	}

	.general_block .back {
		position: relative;
		float: right;
		right: 10px;
		top: 20px;
		font-size: 16px;
	}
	.general_block .back {
		position: relative;
		float: right;
		right: 10px;
		top: 20px;
		font-size: 16px;
	}


.highlight {
	display: inline-block;
	background: #FDF1D8;
	border: 1px solid #F7BD3F;
	padding: 0px 12px;	
    -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


.separator {
	position: relative;
	display: block;
	height: 1px;
	width: 100%;
	margin: 20px auto;
	border-bottom: 1px solid #CACACA;
}

small {
	font-size: 12px;
	line-height: 15px;
}

.line_separator {
	position: relative;
	display: block;
	height: 1px;
	width: 100%;
	margin: 0 auto 30px auto;
	border-bottom: 1px solid #CACACA;
}



/* LOGIN FROM
================================================== */
.login_block {
	position: relative;
	margin: 50px auto;
}

	.login_block .ass_sayhi {
		position: relative;
		display: block;
		max-width: 400px;
		height: auto;
		margin: -10px auto -42px auto;
	}

	.login_block .shadow {
		position: relative;
		display: block;
		max-width: 520px;
		height: auto;
		margin: 50px auto;
	}

.login_box {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 30px;
	max-width: 400px;
	text-align: center;
	line-height: 30px;
	border: 6px solid #D1D1D1;
	background: #fff;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

	.login_box input[type=text],
	.login_box input[type=password] {
		display: block;
		background-color: #F2F2F2;
		width: 320px;
		height: 36px;
		padding: 10px 10px 10px 70px;
		outline: none;
		font-size: 18px;
	}

	.login_box input[type=submit] {
		width: 400px;
		height: 50px;
		line-height: 50px;
		padding: 0;
	}

	.login_box fieldset {
		position: relative;		
		width: 400px;	
		height: 56px;
		padding: 0;
		overflow: hidden;	
		margin: 0 auto 20px auto;
		outline: none;
	}

		.login_box fieldset .icn_login {
			position: absolute;
			top: 0;
			left: 0;
			max-width: 56px;
			max-height: 56px;
		}

	.login_box p a {
		color: #ED8001;
		font-size: 16px;
		text-decoration: underline;

	}


/* BUTTONS
================================================== */
.btn {
	display: inline-block;
	position: relative;
	outline: none;
	border: none;
	margin: 20px auto 10px auto;
	height: 50px;
	padding: 0 20px;
	line-height: 50px;
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 3;
    -webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.org_btn {
	background: #F3A23B;
	-webkit-box-shadow: 0px 4px 0px 0px rgba(255, 134, 80, 1);
	-moz-box-shadow:    0px 4px 0px 0px rgba(255, 134, 80, 1);
	box-shadow:         0px 4px 0px 0px rgba(255, 134, 80, 1);
}

.org_btn:hover {
	color: #fff;
	top: 2px;
	-webkit-box-shadow: 0px 2px 0px 0px rgba(255, 134, 80, 1);
	-moz-box-shadow:    0px 2px 0px 0px rgba(255, 134, 80, 1);
	box-shadow:         0px 2px 0px 0px rgba(255, 134, 80, 1);
}


.bk_btn {
	background: #5C5C5C;
	-webkit-box-shadow: 0px 4px 0px 0px rgba(51, 51, 51, 1);
	-moz-box-shadow:    0px 4px 0px 0px rgba(51, 51, 51, 1);
	box-shadow:         0px 4px 0px 0px rgba(51, 51, 51, 1);
}

.bk_btn:hover {	
	color: #fff;
	top: 2px;
	-webkit-box-shadow: 0px 2px 0px 0px rgba(51, 51, 51, 1);
	-moz-box-shadow:    0px 2px 0px 0px rgba(51, 51, 51, 1);
	box-shadow:         0px 2px 0px 0px rgba(51, 51, 51, 1);
}



.btn_small {
	display: inline-block;
	position: relative;
	outline: none;
	border: none;
	margin: 6px auto;
	height: 24px;
	padding: 0 6px;
	line-height: 24px;
	color: #fff;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 4;
    -webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.btn_small.org_btn {
	background: #F3A23B;
	-webkit-box-shadow: 0px 2px 0px 0px rgba(255, 134, 80, 1);
	-moz-box-shadow:    0px 2px 0px 0px rgba(255, 134, 80, 1);
	box-shadow:         0px 2px 0px 0px rgba(255, 134, 80, 1);
}

.btn_small.org_btn:hover {
	color: #fff;
	top: 2px;
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 134, 80, 1);
	-moz-box-shadow:    0px 1px 0px 0px rgba(255, 134, 80, 1);
	box-shadow:         0px 1px 0px 0px rgba(255, 134, 80, 1);
}



/* Member Jetso
================================================== */
.general_box_list {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}
	.general_box_list li {
		display: block;
		position: relative;
		width: 100%;
		margin-bottom: 50px;
	}

	.general_box_list h3 {
		line-height: 40px;
	}

	.general_box_list p {
		padding: 0;
		line-height: 20px;
	}



/* Member Profile
================================================== */
.profile_list {
	position: relative;
	display: block;
	margin: 0;
	padding: 0
}

	.profile_list li {
		float: left;
		display: inline-block;
		min-height: 30px;	
		padding: 20px 0;
		margin: 0 !important;
		line-height: 30px;	
		background: url(../images/line_dot.png) repeat-x left bottom;
	}

	.profile_list li.grid-5 {
		width: 424px;
	}

	.profile_list li.grid-10 {
		width: 848px;
	}

	.profile_list .display_label,
	.profile_list .display_value {
		padding: 0 10px;
		display: inline-block;
		min-width: 100px;
	}

	.profile_list .display_label {
		color: #E67B4E;
	}

img.msg_ok {
	display: inline-block;
	position: relative;
	width: 160px;
	height: 30px;
	top: 8px;
	margin-top: -8px;
	margin-right: 20px;
}

/* Member Profile EDIT
================================================== */
.edit_box {
	position: relative;
}

.edit_box input[type=text],
.edit_box input[type=password] {
	position: relative;
	border: 1px solid #A9A9A9;
	padding: 3px 8px;
}

.edit_box .grid-5 input[type=text]{
	width: 260px;
}

.edit_box .grid-10 input[type=text] {
	width: 690px;
}

.edit_box input[type=password] {
	width: 260px;
}



/* Member Histoyr & Redeem
================================================== */
.display_points {
	display: inline-block;
	font-size: 32px;
	font-weight: bold;
	color: #F3A23B;
	padding: 0 0 0 15px;
	margin-top: -20px;
	letter-spacing: 2px;
}

/* basis list style*/
.dot_list {
	position: relative;
	left:10px;
	display: block;
	margin: 0 auto 50px auto;
	border-left: 3px solid #D1D1D1;
}

	.dot_list .flag {
		position: relative;
		display: inline-block;
		left: -12px;
		height: 32px;
		padding: 0 20px 0 15px;	
		margin-bottom: 0x;
		color: #fff;
		line-height: 32px;
		background: #ED7223;
	}
		.dot_list .flag img {
			position: absolute;
			right: -10px;
			top: 0;
			width: 10px;
			height: 32px;
		}

	.dot_list ul {
		position: relative;
		top: 20px;
	}

	.dot_list li {
		position: relative;
		display: block;
		min-height: 40px;
	}

	.dot_list li:before {
		content: " ";
		position: absolute;
		display: block;		
		left:-10px;
		top: 10px;
		width: 11px;
		height: 11px;	
		z-index: 950;
		background: #FFA47D;
		border: 3px solid #fff;	
	    -webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;

	}


	.dot_list li.first, .dot_list li.first:hover {
		color: #FFA47D ;
		background: none !important;
	}

	.dot_list li.first span {
		color: #FFA47D !important;
	}

	.dot_list li.first:before {
		display: none;

	}

	.dot_list li.last:before {
		background: #93C63A;
	}


/* point details style */
	.point_details li {
		background: url(../images/line_dot.png) repeat-x 0 center;
		line-height: 40px;
		margin: 0;
	}

	.point_details li:hover {
		background: url(../images/line_dot_org.png) repeat-x 0 center;
	}

		.point_details li span {
			display: inline-block;
			position: relative;
			background: #fff;
			margin: 0 0 0 0;
			padding: 0 10px;
		}

		.point_details li .date {
			width: 80px;
			text-align: center;
		}

		.point_details li .p_value {
			text-align: right;
			float: right;
		}

		.point_details li.first .p_value {
			width: 80px;
			text-align: center;
		}


/* history details style */
.history_details ul {
	margin-top: -40px;
}
	.history_details li {
		margin: 20px 0;
		font-size: 12px;
		min-height: 40px;
		background: url(../images/arrow_history_clip_bottom.png) no-repeat #F0F0F0 left 40px;
	}

	.history_details li.first {
		font-size: 16px !important;
		background: none;
	}

	.history_details li:hover {
		background: url(../images/arrow_history_clip_bottom.png) no-repeat #FFE3B9 left 40px;
	}

	.history_details img.clip {
		position: absolute;
		left: 0;
		top: 0;
		height: 40px;
		width: auto;
	}

	.history_details li span {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		line-height: 20px;
	} 

	.history_details li.first span {
		top: 20px;
		padding: 0;
		line-height: 20px;
	}

	.history_details li .hd_date {
		width: 75px;
		margin-left: 24px;
		padding: 3px 0;		
		line-height: 16px;
	}

	.history_details li .hd_desc {
		width: 170px;
	}

	.history_details li .hd_refno {
		width: 90px;
	}

	.history_details li .hd_remark {
		width: 120px;
	}

	.history_details li .hd_ap, 
	.history_details li .hd_lp, 
	.history_details li .hd_amount {
		width: 90px;
		text-align: right;
	}

	.history_details li .hd_date,
	.history_details li .hd_desc, 
	.history_details li .hd_ap, 
	.history_details li .hd_lp,
	.history_details li .hd_amount {		
		margin-right: 12px;
	}
	.history_details li.first .hd_remark {
		text-align: center;
	}

	.history_details li .hd_ap {
		color: #0CB2A1;
	}
	.history_details li .hd_lp {
		color: #DF3B59;
	}


	.history_details li.viewmore, .history_details li.viewmore:hover {
		background: none;
	}

	.history_details li.viewmore:before {	
		width: 8px;
		height: 8px;	
		left: -8px;	
		background: #fff;
		border: 3px solid #FFA47D;	
	}

	.history_details .more {
		display: inline-block;
		position: relative;
		top: 2px;
		margin-left: 18px;
		color: #ED7223;
		text-decoration: underline;
	}

	.history_details .more img {
		height: 12px;
		width: auto;
	}

	.history_details .more:hover {
		color:#F9BF3F;
	}



/* redeem details style */
.redeem_details ul {
	margin-top: -40px;
}
	.redeem_details li {
		margin: 20px 0;
		background: #F0F0F0;
		font-size: 12px;
		height: 40px;
	}

	.redeem_details li.first {
		font-size: 16px !important;
	}

	.redeem_details li:hover {
		background: #FFE3B9;
	}

	.redeem_details img.clip {
		position: absolute;
		left: 0;
		top: 0;
		height: 40px;
		width: auto;
	}

	.redeem_details li span {
		position: relative;
		display: inline-block;
	}

	.redeem_details li.first span {
		top: 20px;
	}

	.redeem_details li .rd_desc {
		width: 140px;
		margin-right: 24px;
		margin-left: 24px;
	}

	.redeem_details li .rd_price,
	.redeem_details li .rd_point,
	.redeem_details li .rd_amount {
		width: 140px;
		margin-right: 24px;
		text-align: right;
	}
	.redeem_details li .rd_point {
		color: #DF3B59;
	}

	.redeem_details li .rd_qty {
		width: 80px;
		text-align: center;
	}

	.redeem_details input.qty {
		position: relative;
		left: 5px;
		width: 40px;
		height: 24px;
		border: 1px solid #CACACA;
		text-align: center;
	}

	.redeem_details li .rd_button {
		width: 60px;
		text-align: center;
	}


/* PAGE NAV
================================================== */
.page_nav {
	position: relative;
	margin: 10px auto;
}

	.pages {
		display: block;
		position: relative;
		right: 2px;
		margin-bottom: 6px;
		clear: both;
		height: 30px;
		line-height: 30px;
		text-align: center
	}
		.pages li {
			display: inline;
			background: #fff;
			padding: 2px 6px;
			font-size: 12px;
			color: #9B9B9B;
			cursor: pointer;
			border: 1px solid #ccc;
		}
		.pages li:hover, .pages li.pgCurrent {
			color: #ED7223 !important;
			text-decoration: underline;
		}
		.pages li.pgEmpty {
			color: #D1D1D1 !important;
		}


/* Message
================================================== */
.msg_box {
	display: block;
	position: relative;
	width: 80%;
	text-align: center;
	line-height: 40px;
	padding: 10px 10%;
	margin-bottom: 20px;
}

.msg_box.success {
	background: #E9F4D8;
	border: 1px solid #0CB2A1;
	color: #0CB2A1;
}

.msg_box.error {
	background: #F9E4E8;
	border: 1px solid #DF3B59;
	color: #DF3B59;
}

.msg_close {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
}


 
/* Disclaimer
================================================== */
.general_block .disclaimer p {
	padding: 0 0;
}


/* Footer
================================================== */
#footer {
	position: relative;
	margin: 0 auto;
	display: block;
	height: 60px;
	width: 100%;
	color: #fff;
	background: #555459;
}
	
	#footer p {
		line-height: 60px;
	}




/* Back to top
================================================== */

	#back-to-top, .touch-device #back-to-top:hover{
		position:fixed;
		z-index: 9999;
		display: none;
		opacity: 0.9;
		-moz-opacity: 0.9;
		-khtml-opacity: 0.9;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		filter: alpha(opacity=90);
		height:80px;
		width: 32px;
		bottom: 90px;
		right:70px;
		cursor: pointer;
		-webkit-transition: all .2s ease;
	    -moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 20000;
	}	

	#back-to-top img {
		width: 100%;
		height: auto;
	}