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