@charset "utf-8";
/*
* SUNYA WEBSITE v1.0
* Support by: www.onesolution.com.hk
* Last updated: 2015-06-26 / moo
* Last remark:
==================================================
*/
/* Import
================================================== */
@import url('reset.css');
@import url('grid.css');
@import url('navegation.css');
@import url('slider.css');
@import url('prettyPhoto.css');/*30/06/2015*/
/* Basic Styles
================================================== */
::-moz-selection{ color: #2b505e; background: #aae0fe; }
::selection { color: #2b505e; background: #aae0fe; }
body {
font-size: 14px ;
font-weight: normal;
color: #423f39;
overflow-x:hidden;
font-family: 'Microsoft JhengHei', arial, sans-serif;
}
body.mmAction {
width: 100%;
overflow: hidden;
}
.touch body {
-webkit-overflow-scrolling: touch;
}
/* ===== Framework ===== */
#wrapper {
position: relative;
width: 100%;
height: auto;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* ===== Typographfy ===== */
a:active,a:hover {
outline: 0;
}
a {
color: #423f39;
outline: 0;
text-decoration: none;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
a:hover {
color: #e25504;
}
p {}
i {font-style: italic;}
b {font-weight: bold;}
/* ===== 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;}
.nobd {border: none !important;}
/* text color */
.tbu {color: #0080c3;}
.tgn {color: #38A294;}
.trd {color: #DB4141;}
.tog {color: #E85403;}
.tbrn {color: #b69923;}
.tbrn a {color: #b69923;} /*02/07/2015*/
a.tbu:hover {color: #0080c3; text-decoration: underline;}
/*overly for popup & mob*/
#mm_overly,
.overly {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../images/bg_overly.png') transparent repeat center;
z-index:990;
overflow:hidden;
}
.mmAction #mm_overly:before {
content: ' ';
position: absolute;
display: block;
width: 40px;
height: 84px;
left:260px;
top:0;
background: url('../images/icn_menu_close_2x.png') #fff no-repeat left 22px;
background-size: 80px 40px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
cursor: pointer;
}
.mmAction.ppAction #mm_overly:before {display: none;}
.mbAction .overly:before {
content: ' ';
position: absolute;
display: block;
width: 40px;
height: 84px;
left:270px;
top:0;
background: url('../images/icn_menu_close_2x.png') #fff no-repeat left 22px;
background-size: 80px 40px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
cursor: pointer;
}
/*fix prettyphoto popup - 30/06/2015*/
div.pp_overlay {z-index: 9999;}
/* Header
================================================== */
#header {
display: block;
position: relative;
height: 160px;
padding-bottom: 85px;
z-index: 500;
background: url('../images/bg_hd_btm.jpg') repeat-x transparent center bottom;
margin-bottom: 0px;
}
#header .hd_bg {
position: absolute;
height: 160px;
width: auto;
left: -90px;
display: block;
z-index: 1;
}
#header .hd_bg img {
height: 100%;
width: auto;
}
#header .hd_bg_btm {
position: absolute;
width: 100%;
height: 24px;
bottom: 80px;
left: 0;
display: block;
z-index: 2;
}
#logo {
display: block;
position: relative;
width: 320px;
height: 60px;
margin: 46px auto 54px auto;
z-index: 10;
}
/*for mobile - 30/06/2015*/
#header #dd_schTrigger,
#header #top_social {display: none; position: absolute;}
#header #dd_schTrigger {
width: 24px;
height: 24px;
margin: 0;
padding: 0;
right:70px;
}
#header #dd_schTrigger:before {
content: ' ';
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 60px 1275px;
background-position: center -108px;
background-image: url('../images/icn_sprite_2x.png');
cursor: pointer;
}
.ie #header #dd_schTrigger:before {
background-image: url('../images/icn_sprite.png');
}
#mm_overly .schClose {display: none;}
#header #top_social {display: none; right:10px;}
/* ICONS
================================================== */
.icn {
background-color: transparent;
background-repeat: no-repeat;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
}
.ie .icn {
background-image: url('../images/icn_sprite.png');
}
/* GENERAL TITLE SETTNIG
================================================== */
h1 {font-size: 42px; font-weight: bold; line-height: 60px;}
h2 {font-size: 24px; font-weight: bold;}
h3 {}
h4 {}
h5 {}
h6 {}
/* GENERAL FRAME SETTNIG
================================================== */
.content {
margin: 10px auto;
z-index: 600;
}
.right_block {
position: relative;
width: 900px;
}
/*30/06/2015*/
.middle_block {
position: relative;
width: 630px;
}
.left_block {
position: relative;
width: 240px;
}
.dashed {
display: block;
width: auto;
height: 1px;
background: #fff;
border:none;
border-bottom: 1px dashed #c3c1be;
}
/*GENERAL BOX*/
.boxed {
background: #fff;
border:1px solid #cbc9c5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.boxed .box_ft {
display: block;
margin: 10px auto;
}
.basic_gradient {
margin: 4px;
background: url('../images/bg_box.png') #fff center;
background-repeat: repeat-x;
background-size: 100% 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.ie .basic_gradient {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_box.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_box.png',sizingMethod='scale')";
}
/* css table */
.css_table {
display:table;
}
.css_tr {
display: table-row;
}
.css_td {
display: table-cell;
}
.vm {
vertical-align: middle;
}
/*SIMPLE ICON TEXT*/
.more {
display: inline-block;
position: relative;
padding-right: 20px;
}
.more:after {
content: ' ';
display: inline-block;
position: absolute;
right: 5px;
top: 1px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-color: transparent;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
background-position: center -992px;
}
.ie .more:after {
background-image: url('../images/icn_sprite.png');
}
.back {
display: inline-block;
position: relative;
padding-left: 20px;
}
.back:before {
content: ' ';
display: inline-block;
position: absolute;
left: 0;
top: 1px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-color: transparent;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
background-position: center -942px;
}
.ie .back:after {
background-image: url('../images/icn_sprite.png');
}
/* BOOK CATEGORIE
================================================== */
#mob_book_menu_btn {
display: none;
position: absolute;
width: 90px;
height: 24px;
top: 96px;
left: 220;
cursor: pointer;
z-index: 999;
}
body.mmAction #mob_book_menu_btn {display: none!important;}
#book_nav {
position: relative;
display: block;
width: 250px;
margin-right: 20px;
height: auto;
}
.book_nav_btn {
position: relative;
display: block;
width: 250px;
height: auto;
}
body.mbAction .book_nav_btn {
width: 230px;
}
.bn_section {
position: relative;
}
.bn_section .section_tit {
position: relative;
display: block;
padding: 2px;
}
.bn_section .section_tit img {
width: 100%;
height: auto;
}
.bn_section .section_tit:after {
content: ' ';
display: block;
position: absolute;
bottom: 0;
height: 15px;
width: 100%;
background: url('../images/shandow_v_01.png') no-repeat center bottom;
background-size: 100% 15px;
}
.ie .bn_section .section_tit:after {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/shandow_v_01.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/shandow_v_01.png',sizingMethod='scale')";
}
.book_cat {
display: block;
position: relative;
padding: 8px;
background-color: transparent;
}
.book_cat.age_box {
padding-right: 90px;
min-width: 80px;
background: url('../images/bg_tree.png') no-repeat right center;
}
.book_cat li {
display: block;
position: relative;
padding: 8px 0 8px 18px;
border-bottom: 1px dashed #c3c1be;
}
.book_cat li:before {
content: ' ';
display: inline-block;
position: absolute;
left: 0px;
top: 8px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-color: transparent;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
background-position: center -600px;
}
.book_cat li.subcat:before{left: 18px;}
.book_cat li.subcat{padding: 8px 0 8px 36px;}
.ie .book_cat li:before {
background-image: url('../images/icn_sprite.png');
}
.book_cat li:hover:before {
background-position: center -565px;
}
.book_cat.col_2_box {}
.book_cat.col_2_box li {
display: inline-block;
width: 92px;
}
/* BOOK LIST
================================================== */
/*IMG TITLE*/
.block_img_tit {
position: relative;
padding-left: 20px;
line-height: 100px;
font-size: 24px;
color: #694924;
font-weight: bold;
background: url('../images/bg_list_img_tit.png') no-repeat center right;
margin-left: 80px;
}
.block_img_tit .tit_img {
display: block;
position: absolute;
left: -80px;
top: -10px;
width: 100px;
height: 100px;
}
.block_img_tit small {
font-size: 16px;
}
.block_img_tit .value {
position: relative;
color: #ff8144;
}
.block_img_tit .value:after {
content: ' ';
display: inline-block;
position: absolute;
width: 26px;
height: 28px;
right: -36px;
top: 3px;
background-repeat: no-repeat;
background-color: transparent;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
background-position: center -189px;
}
.ie .block_img_tit .value:after {
background-image: url('../images/icn_sprite.png');
}
/*BOOK LIST*/
.book_list {
position: relative;
display: block;
margin: 10px auto;
}
.book_list ul {
display: block;
position: relative;
}
.book_list li.book_info {
display: inline-block;
width: 285px;
padding: 0 10px 0 0;
margin: 0 0 40px 0;
vertical-align: middle;
}
.book_list .book_info img.thumb {
display: inline-block;
width: 132px;
height: auto;
padding: 4px;
background: #fff;
border: 1px solid #c3c1be;
}
.book_list .book_info .info {
position: relative;
width: 120px;
padding-left: 12px;
line-height: 20px;
}
.book_list .book_info .info p {
margin-bottom: 6px;
}
.book_list .book_info .info .name {
font-size: 16px;
color: #4d4d4d;
font-weight: bold;
margin-bottom: 5px;
}
.book_list .book_info .info .price {
color: #e25504;
font-weight: bold;
}
.book_list .book_info .info .btn {
padding: 2px 10px;
}
.book_list .book_info .info .rank {
font-size: 15px;
font-weight: bold;
}
/* BOOK DETAILS -30/06/2015
================================================== */
/*BOOK TITLE*/
.book_tit {
display: block;
position: relative;
height: auto;
border-top: 1px solid #f08d1e;
border-bottom: 1px solid #f08d1e;
margin-top: 20px;
padding: 0 0 10px 0;
}
.book_tit h1 {
padding: 10px 0 10px 0;
line-height: 46px;
}
.book_tit p {
color: #848484;
}
.book_tit .back {
position: absolute;
right:0;
bottom: 10px;
color: #848484;
}
.book_tit .back:hover {
text-decoration: underline;
}
/*BOOK INFO SECTION*/
.info_section {
display: block;
position: relative;
margin: 20px auto;
}
.info_section .left_col {
display: inline-block;
position: relative;
width: 260px;
}
.info_section .book_thumb {
display: inline-block;
width: 250px;
height: auto;
padding: 4px;
background: #fff;
border: 1px solid #c3c1be;
}
.info_section .book_price {
display: inline-block;
width: 165px;
height: 30px;
padding-left: 40px;
line-height: 30px;
color: #fff;
text-align: left;
background: url('../images/bg_price.png');
}
.info_section .left_col p.tc {
margin: 10px auto;
}
.book_photos{
margin-left: -5px;
}
.info_section .book_photos .owl-item *{
box-sizing: border-box;
}
.book_photos .photo{
width: 100%;
height: auto;
display: inline-block;
padding: 0 0 0 5px;
}
.info_section .book_photos img{
border: 1px solid #c3c1be;
}
/*BOOK TITLE*/
.info_section .right_col {
display: inline-block;
position: relative;
width: 350px;
margin: 0 auto 0 15px;
}
.info_section .info_list {
display: block;
position: relative;
border-top: 2px solid #c3c1be;
}
.info_section .info_list dl {
display: block;
padding: 10px 0;
line-height: 18px;
border-bottom: 1px solid #c3c1be;
}
.info_section .info_list dd {
display: inline-block;
position: relative;
width: 100px;
padding-left: 10px;
}
.info_section .info_list dd:before {
content: 'ยท';
display: inline-block;
position: absolute;
left: 0;
top: -5px;
color: #c3c1be;
font-weight: bold;
font-size: 24px;
}
.info_section .info_list dt {
display: inline-block;
}
/*TEXT SECTION*/
.txt_section {
position: relative;
display: block;
padding: 10px 0;
margin: 10px auto;
border-top: 1px dashed #c3c1be;
}
.txt_section h2{
line-height: 40px;
margin: 5px auto;
}
.txt_section h2 img {}
.txt_section p {
line-height: 20px;
}
/*SHEARE BOX*/
.share_box{
position: relative;
}
.share_box p {
padding: 5px 15px 5px 5px;
line-height:30px;
}
.share_box .sc_icn {
position: relative;
display: inline-block;
top: 6px;
margin-left: 5px;
}
/*FEATURE BOX*/
.feature_box {
position: relative;
}
.hl_tit {
position: relative;
display: block;
padding: 20px 0;
background: url('../images/bg_hl_box.png') #fff center;
background-repeat: repeat-x;
background-size: 100% 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.hl_tit img {
display: block;
margin: 0 auto;
width: auto;
height: 22px;
}
.hl_tit:after {
content: ' ';
display: block;
position: absolute;
bottom: 0;
height: 15px;
width: 100%;
background: url('../images/shandow_v_01.png') no-repeat center bottom;
background-size: 100% 15px;
}
.ie .hl_tit:after {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/shandow_v_01.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/shandow_v_01.png',sizingMethod='scale')";
}
.feature_box .book_list ul {text-align: center;}
.feature_box .book_list .book_info img.thumb {width: 80px;}
.feature_box .book_list li.book_info {width: 200px; text-align: left; padding: 0 0 15px 0; margin: 10px auto 5px auto; border-bottom: 1px dashed #c3c1be;}
.feature_box .book_list .book_info .info {padding-left: 8px;}
.feature_box .book_list .book_info .info .price {font-size: 13px;}
.feature_box .box_ft {padding-right: 10px;}
/*AD BANNERS*/
.ad_section {
display: block;
position: relative;
width: auto;
height: auto;
}
.ad_section .ad_banner {
display: block;
position: relative;
width: auto;
height: auto;
margin-bottom: 10px;
}
.ad_section .ad_banner img {
width: 100%;
height: auto;
}
/*02/07/2015 - PM*/
.ad_section .ad_1-3 {
display: inline-block;
width: 30%;
margin-right: 3.333%;
}
.ad_section .ad_1-3:last-child {
margin-right: 0;
}
/* home book section & home column bos
/* subscription & facebook box -01/07/2015
================================================== */
/*home book section */
.hb_box {
position: relative;
display: block;
margin: -2px auto 10px auto;
background: #fff;
border: 1px solid #cbc9c5;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
z-index: 50;
}
.hb_box .box_ft {
display: block;
margin: 15px auto;
}
.hb_box ul {
display: block;
position: relative;
padding: 10px 0;
text-align: center;
}
.hb_box li.book_info {
display: inline-block;
width: 180px;
padding: 0 0 0 0;
margin: 0 auto;
vertical-align: middle;
text-align: center;
}
.hb_box .book_info img.thumb {
display: inline-block;
width: 122px;
height: auto;
padding: 4px;
background: #fff;
border: 1px solid #c3c1be;
}
.hb_box .book_info p {
margin-bottom: 6px;
}
.hb_box .book_info .name {
font-size: 16px;
color: #4d4d4d;
font-weight: bold;
margin-bottom: 5px;
padding: 10px 0 0 0;
}
.hb_box .book_info .price {
color: #e25504;
font-weight: bold;
}
.hb_box .book_info .btn {
padding: 5px 10px;
}
/*fix owl*/
.hb_box .owl-theme .owl-controls {
position: absolute;
width: 100%;
top: 30%;
}
.hb_box .owl-theme .owl-controls .owl-buttons div {
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
padding: 0;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.ie .hb_box .owl-theme .owl-controls .owl-buttons div {
background-image: url('../images/icn_sprite.png');
}
.hb_box .owl-theme .owl-controls .owl-buttons div.owl-prev {
left:0;
background-position: center -862px;
}
.hb_box .owl-theme .owl-controls .owl-buttons div.owl-next {
right:0;
background-position: center -905px;
}
/*home column box & small_tab & news_img_list */
.column_box {
position: relative;
width: 305px;
}
/*highlight title*/
.column_box .hl_tit {
padding: 12px 10px;
}
.column_box .hl_tit img {
display: inline-block;
}
/*more button*/
.column_box .more {
position: absolute;
right: 0;
bottom: 10px;
}
/*small tab*/
.small_tab {
display: block;
position: relative;
height: 32px;
margin-top: 10px;
display: inline-block;
}
.small_tab .tab {
position: relative;
display: inline-block;
height: 36px;
margin: 0;
padding: 0 8px;
float: left;
border-right: 1px solid #ed9728;
background-image: url('../images/bg_small_tab.png');
background-position: center top;
background-repeat: repeat-x;
}
.small_tab .tab:hover {
background-image: url('../images/bg_small_tab_hover.png');
}
.small_tab .tab:last-child {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
.small_tab .tab.on {
top:-4px;
padding: 3px 11px 0 11px;
background: url('../images/bg_hl_box.png') #fff center;
background-repeat: repeat-x;
background-size: 100% 100%;
border-right: none;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.small_tab .tab:after,
.small_tab .tab:before {
display: none;
content: none;
}
.small_tab .tab img {
display: block;
position: relative;
top: 8px;
height: 20px;
width: auto;
}
.small_tab .tab img.on {
display: none;
}
.small_tab .tab.on img.on {
display: inline-block;
}
.small_tab .tab.on img.off {
display: none;
}
/*news_img_list*/
.news_img_list {
display: block;
position: relative;
width: 285px;
margin: 8px 10px 40px 10px;
border-bottom: 1px solid #c3c1be;
}
.news_img_list .news_thumb {
display: block;
position: relative;
max-height: 200px;
overflow: hidden;
}
.news_img_list .news_tit {
display: block;
position: relative;
text-align: left;
padding: 15px 10px 5px 20px;
}
.news_img_list .news_tit:before {
content: ' ';
display: inline-block;
position: absolute;
left: 4px;
top: 14px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-color: transparent;
background-size: 60px 1275px;
background-image: url('../images/icn_sprite_2x.png');
background-position: center -600px;
}
/*fix owl*/
.column_box .owl-theme .owl-controls {
position: absolute;
bottom: -32px;
margin-top: 0;
}
.column_box .owl-theme .owl-controls .owl-page span {
margin: 4px;
}
.column_box .owl-theme .owl-controls .owl-page.active span {
background: #e85403;
}
/*subscripition*/
.sub_box {position: relative;}
.sub_box .section_tit {
position: relative;
display: block;
padding: 10px 0;
}
.sub_box .section_tit:after {
content: ' ';
display: block;
position: absolute;
bottom: 0;
height: 15px;
width: 100%;
background: url('../images/shandow_v_01.png') no-repeat center bottom;
background-size: 100% 15px;
}
.ie .sub_box .section_tit:after {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/shandow_v_01.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/shandow_v_01.png',sizingMethod='scale')";
}
.sub_box .section_tit img {
display: block;
margin: 0 auto;
width: auto;
height: 22px;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
}
/*facebook box*/
.fb_box.boxed {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.fb_box {
display: block;
position: relative;
width: auto;
height: auto;
}
/* subscripition form */
.sub_form {
display: block;
position: relative;
margin: 10px;
}
.sub_form .sub_txt {
position: relative;
display: inline-block;
font-size: 16px;
height: 32px;
width: auto;
padding-left: 10px;
color: #a0aab3;
line-height: 32px;
background-color: #ffffff;
border: 1px solid #b3bbc2;
}
.sub_box .sub_form .btn {
position: absolute;
right: 0;
top: 0px;
height: 36px;
line-height: 32px;
color: #fff;
font-weight: bold;
background-image: url('../images/bg_small_tab_hover.png');
background-position: center top;
background-repeat: repeat-x;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/* GENERAL LIST -30/06/2015-pm
================================================== */
.general_list {
position: relative;
display: block;
}
.general_list h4 {
font-size: 28px;
font-weight: bold;
line-height: 50px;
border-bottom: 1px dashed #c3c1be;
}
.general_list ul {
display: block;
position: relative;
}
.general_list li {
position: relative;
border-bottom: 1px dashed #c3c1be;
padding: 20px 0;
}
.general_list li .thumb {
display: inline-block;
width: 132px;
height: auto;
padding: 4px;
background: #fff;
border: 1px solid #c3c1be;
}
.general_list li .info {
display: block;
width: 520px;
margin-left: 15px;
}
.general_list li .info p {
line-height: 24px;
}
.general_list li .info .name {
font-weight: bold;
font-size: 18px;
padding:10px 0;
}
.general_list li .btns {
position: absolute;
right: 0;
bottom: 20px;
width: 100px;
}
.general_list li .btn,.txt_section .btn {
padding: 7px 10px;
margin-top: 10px;
font-size: 15px;
line-height: 1;
}
.general_list.no_img li .info {
width: 700px;
}
/* GENERAL TAB -30/06/2015-pm
================================================== */
.general_tab {
position: relative;
display: block;
height: 36px;
width: auto;
}
.general_tab .tab {
display: inline-block;
position: relative;
height: 36px;
margin: 0 5px 0 25px;
background: url('../images/bg_tab.png') no-repeat transparent center top;
z-index: 5;
}
.general_tab .tab:nth-child(3){
z-index: 4;
}
.general_tab .tab.on {
z-index: 50;
background: url('../images/bg_tab_on.png') no-repeat transparent center top;
}
.general_tab .tab:before,
.general_tab .tab:after {
content: ' ';
display: inline-block;
position: absolute;
width: 25px;
height: 36px;
bottom: 0;
background: url('../images/bg_tab.png') no-repeat transparent;
}
.general_tab .tab:before {
left: -25px;
background-position: left top;
}
.general_tab .tab:after {
right: -25px;
background-position: right top;
}
.general_tab .tab.on:before,
.general_tab .tab.on:after {
background-image: url('../images/bg_tab_on.png');
}
.general_tab .tab img {
display: block;
position: relative;
top: 8px;
height: 20px;
width: auto;
}
/*INNER TITLE*/
.inner_tit {
display: block;
position: relative;
height: auto;
padding: 5px 0 20px 0;
border-top: 1px solid #f08d1e;
border-bottom: 1px solid #f08d1e;
margin-top: 20px;
}
.inner_tit h1 {
padding: 5px 0 0 0;
}
.inner_tit .back {
position: absolute;
right:0;
bottom: 10px;
color: #848484;
}
.inner_tit .back:hover {
text-decoration: underline;
}
/* POPUP FORM
================================================== */
body.ppAction #mm_overly {
display: block; z-index: 9999; overflow: auto;
}
.pp_form {display: none}
body.ppAction .pp_form {
display: block;
position: relative;
width: 880px;
padding: 20px;
margin: 150px auto 0 auto;
background: #fff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.pp_form .ppClose {
display: block;
position: absolute;
width: 60px;
height: 60px;
right: -20px;
top: -20px;
cursor: pointer;
z-index: 50px;
}
.pp_form .form_tit {
font-size: 32px;
font-weight: bold;
color: #ff8144;
padding:10px 0;
}
.pp_form .form_tit .name {
font-size: 21px;
color: #4d4d4d;
}
/* ========== General register form ========== */
.general_form {
display: block;
position: relative;
padding: 10px 0;
}
.inner_form {
display: block;
position: relative;
}
.general_form fieldset {}
.general_form fieldset.step {}
.general_form fieldset.final {
margin-top: 25px;
border-top: 1px dashed #c3c1be;
}
.general_form .row {
display: block;
position: relative;
margin: 10px auto;
padding: 10px 0;
}
.general_form .row.highlight {
background-color: #f2f5f9;
border: 1px solid #dee7f0;
padding: 5px 0;
}
.general_form .row .inner_row {
display: inline-block;
padding: 0;
}
.general_form .row.highlight a {
color: #0060aa;
text-decoration: underline;
}
.general_form .row.highlight a:hover {
color: #0993d8;
}
.general_form .row label {
display: inline-block;
position: relative;
width: 200px;
margin: 0 10px 0 0;
text-align: right;
line-height: 32px;
}
.general_form .row label.small {
width: auto;
}
.general_form .row strong,
.general_form .row b {
font-size: 16px;
font-weight: 700;
padding-right: 5px;
}
.general_form i.mark {
display: inline-block;
font-size: 16px;
padding: 0 12px;
}
.general_form .par {
display: inline-block;
position: relative;
font-size: 18px;
margin-left: -3px;
right: 2px;
padding: 0 2px;
}
.general_form .row .file_btn {
position: absolute;
top: 10px;
left: 263px;
width: 100px;
height: 36px;
line-height: 36px;
}
.general_form .row .file_txt {
padding-left: 110px;
width: 590px;
}
.general_form .fl_1-1 { width: 500px; margin-right: 20px;}
.general_form .fl_1-2 { width: 230px; margin-right: 22px;}
.general_form .fl_1-3 { width: 110px; margin-right: 5px;}
.general_form input:disabled{color: #777;}
.general_form p.form_desc{
width: 100%;max-width: 500px;
font-size: 14px;
margin-top: 7px;color: #666;
margin-left: 210px;
text-align: left;
}
.clearspace{margin-top: 10px;}
/* input */
.general_form input, .general_form textarea,
.inner_form input, .inner_form textarea {
position: relative;
display: inline-block;
font-size: 16px;
height: 32px;
padding-left: 10px;
color: #777;
line-height: 32px;
background-color: #ffffff;
border: 1px solid #b3bbc2;
}
.general_form input:focus, .general_form textarea:focus,
.inner_form input:focus, .inner_form textarea:focus{
color: #607280;
}
.general_form input.placeholder, .general_form textarea.placeholder,
.inner_form input.placeholder, ..inner_form textarea.placeholder {
color: #a0aab3;
}
/* CHECKBOX & RADIO */
.general_form input[type='radio'],
.general_form input[type='checkbox'] {
display: none;
}
.clr {
position: relative;
display: inline-block;
padding-left: 22px;
margin: 10px 20px 10px 0;
}
.clr.checked {}
.clr:before {
content: ' ';
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
background-color: transparent;
background-repeat: no-repeat;
background-position: right center;
left: 0;
top: -3px;
}
input[type='radio'] + .clr:before {
background-image: url('../images/icn_radio_unchecked_2x.png');
background-size: 12px 12px;
}
input[type='radio'] + .clr.checked:before {
background-image: url('../images/icn_radio_checked_2x.png');
}
input[type='checkbox'] + .clr:before {
background-image: url('../images/icn_checkbox_unchecked_2x.png');
background-size: 17px 17px;
}
input[type='checkbox'] + .clr.checked:before {
background-image: url('../images/icn_checkbox_checked_2x.png');
}
.ie input[type='radio'] + .clr:before {
background-image: url('../images/icn_radio_unchecked.png');
}
.ie input[type='radio'] + .clr.checked:before {
background-image: url('../images/icn_radio_checked.png');
}
.ie input[type='checkbox'] + .clr:before {
background-image: url('../images/icn_checkbox_unchecked.png');
}
.ie input[type='checkbox'] + .clr.checked:before {
background-image: url('../images/icn_checkbox_checked.png');
}
/* selector */
.general_form .selector,
.general_form .select {
display: inline-block;
position: relative;
}
.general_form .select {
height: 32px;
line-height: 32px;
padding-left: 10px;
margin-right: 15px;
background: #fff;
border: 1px solid #b3bbc2;
}
.general_form .select.small {
width: 110px;
}
.general_form .select.large {
width: 690px;
}
.general_form .select:after {
content: ' ';
display: inline-block;
position: absolute;
width: 20px;
height: 32px;
right: 5px;
top: 0;
background-color: transparent;
background-repeat: no-repeat;
background-size: 60px 1275px;
background-position: center -1010px;
background-image: url('../images/icn_sprite_2x.png');
cursor: pointer;
}
.ie .general_form .select:after {
background-image: url('../images/icn_sprite.png');
}
.general_form .select.active:after {
background-position: center -1035px;
}
.general_form .selector .selected {
color: #a0aab3;
}
.general_form .select:hover .selected,
.general_form .select:focus .selected {
color: #607280;
}
/* selector dropdown */
.general_form .selector ul {
display: none;
position: absolute;
right: -1px;
width: 100%;
max-height: 160px;
overflow-y:scroll;
text-align: left;
background: #fff;
border: 1px solid #B3BBC2;
border-top: none;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.2);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.2);
-webkit-overflow-scrolling: touch;
z-index: 850;
}
.general_form .selector ul li {
display: block;
padding: 5px;
margin: 0 10px;
line-height: 20px;
border-bottom: 1px dashed #B3BBC2;
}
.general_form .selector ul li:hover,
.general_form .selector ul li.current {
color: #0060aa;
background: #f2f5f9;
}
.general_form .selector ul li:last-child {
border-bottom: none;
}
.general_form .selector ul .mCSB_inside > .mCSB_container {
margin-right: 2px;
}
/*button*/
.general_form input[type='submit'],
.general_form .btn.btn_org {
border: none;
text-align: center;
padding: 0 20px 0 20px;
color: #fff;
line-height: 18px;
background-position: center 0;
}
.general_form input[type='submit']:hover,
.general_form .btn.btn_org:hover {
background-position: center -236px;
}
/* POPUP SIMPLE FORM -03/07/2015
================================================== */
.general_form.simple {
width: 90%; margin: auto;
}
.general_form.simple .row label {
width: auto;
text-align: left;
}
.general_form.simple .txt {
margin: 10px auto;
}
.general_form.simple .txt h6 {
font-weight: bold;
font-size: 21px;
line-height: 30px;
padding-bottom: 10px;
}
.general_form.simple .txt p {
font-size: 16px;
line-height: 24px;
}
/* AFTER LOGIN -03/07/2015
================================================== */
/*top buttons*/
#nav_top .logSuc {
display: none;
color: #fff;
}
#nav_top.login_suc .logSuc {
display: inline-block;
}
#nav_top.login_suc .logTrigger {
display: none;
}
/* MEMBER CENTER */
.mb_info {}
.mb_info .acc_tit {
display: block;
position: relative;
height: auto;
border-top: 1px solid #f08d1e;
border-bottom: 1px solid #f08d1e;
margin-top: 20px;
}
.acc_tit h1 {
padding: 10px 0 10px 0;
line-height: 46px;
}
.mb_info .acc_header {
display: block;
position: relative;
padding: 40px 0 20px 0;
font-size: 18px;
}
.acc_header .btn {
font-size: 14px;
padding: 4px 8px;
}
.mb_info .txt_section {
border-top: none;
padding-top: 0;
}
.mb_info .txt_section h2 {
padding: 5px 0;
margin-bottom: 10px;
border-top: 1px dashed #c3c1be;
border-bottom: 1px dashed #c3c1be;
}
.mb_info .general_form .row label {
width: 100px;
}
.mb_info .general_form input.locked {
background: #f0f0f0;
}
.membertable{
max-width: 900px;
padding: 15px;
font-size: 14px;
border:1px dashed #c3c1be;
margin-bottom: 30px;
}
.membertable .my_points{
display: block;
margin: 15px 0;
font-size: 16px;
text-align: center;
font-weight: bold;
}
.membertable .my_points span{
color: #ff8144;
font-size: 22px;
}
.membertable table{
width: 100%;
border-collapse: collapse;
background-color: #eee;
margin-top: 8px;
}
.membertable table th,.membertable table td{
vertical-align: middle;
text-align: center;
}
.membertable table th{padding:14px 2px 6px 2px;}
.membertable table td{padding:6px 2px 14px 2px;}
.membertable table th span{font-size: 18px;font-weight: bold;}
/* BUTTONS
================================================== */
.btn {
display: inline-block;
position: relative;
outline: none;
border: none;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* orange button */
.btn_org {
color: #fff;
background: url('../images/bg_sprite.png') repeat-x center -2px;
}
.btn_org:hover {
color: #fff;
background: url('../images/bg_sprite.png') repeat-x center -236px;
}
/* white button */
.btn_wt {
color: #333;
border: 1px solid #d5d5d5;
background: url('../images/bg_sprite.png') repeat-x center -92px;
}
.btn_wt:hover {}
/* GENERAL TABLE & slide_panel -02/07/2015
================================================== */
.general_table {
width: 100%;
min-width: 280px;
border-collapse:collapse;
}
.general_table.tb_blue {
background-color: #f2f5f9;
}
.general_table.tb_light{
background-color: #fff;
}
.general_table thead th {
padding: 12px 10px 9px 10px;
background-color: #f0e8d1;
color: #423f39;
font-size: 15px;
line-height: 18px;
font-weight: bold;
text-transform: uppercase;
vertical-align: bottom;
border-top: 2px solid #c3c1be;
border-bottom: 1px solid #c3c1be;
}
.general_table td {
padding: 12px 8px 9px 8px;
line-height: 18px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px solid #c3c1be;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.general_table tr:nth-child(2n-1),
.general_table tr:nth-child(2n-1) td {
background-color: #f0f0f0;
}
.general_table tr:hover,
.general_table tr:hover td{
font-weight: bold;
}
.general_table .summary tr,
.general_table .summary tr td {
background-color: #fff !important;
border-bottom: none;
padding-top: 12px;
}
.general_table b {
font-size: 16px;
font-weight: bold;
}
/*slide_panel*/
.slide_panel {
display: block;
position: relative;
}
.slide_panel h2 a:hover {
text-decoration: underline;
}
.slide_panel .general_table {
display: none;
}
.slide_panel.active .general_table {
display: table;
}
.slide_panel .panel_btn {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
padding-left: 15px;
text-align: right;
cursor: pointer;
}
.slide_panel .panel_btn:hover {
text-decoration: underline;
}
.slide_panel .panel_btn:before {
content: ' ';
display: inline-block;
position: absolute;
left: 0;
width: 15px;
height: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 60px 1275px;
background-position: center -1043px;
background-image: url('../images/icn_sprite_2x.png');
cursor: pointer;
}
.slide_panel.active .panel_btn:before {
background-position: center -1020px;
}
/* FOOTER
================================================== */
#footer {
position: relative;
display: block;
padding-top: 200px;
background: url('../images/bg_ft_glass.png') repeat-x center top;
margin-top: 0px;
}
.footer_wrapper {
position: relative;
display: block;
background: url('../images/bg_ft_btm.jpg') repeat-x center top;
background-size: 100% 100%;
padding: 30px 0;
}
.footer_wrapper:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 200px;
background: url('../images/bg_ft_pic.png') no-repeat center top;
top: -200px;
}
.footer_wrapper p.tc {
color:#423f39;
padding: 10px 0;
line-height: 20px;
}
.footer_wrapper p.tc span {
display: inline-block;
padding: 0 10px;
}
.footer_wrapper .footer_nav a {
display: inline-block;
}
.footer_wrapper .footer_nav a:after {
content: '/';
display: inline-block;
position: relative;
padding: 0 10px;
}
/* SITEMAP - 02/07/2015-PM
================================================== */
.sitemap {}
.txt_section.sitemap {
border-top: none;
}
.sitemap h2 {
border-top: 1px dashed #c3c1be;
border-bottom: 1px dashed #c3c1be;
}
.sitemap h2:after {
content: ' ';
display: inline-block;
position: relative;
width: 22px;
height: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 60px 1275px;
background-position: center -818px;
background-image: url('../images/icn_sprite_2x.png');
}
.ie .sitemap h2:after {
background-image: url('../images/icn_sprite.png');
}
.sitemap_list {
display: block;
position: relative;
padding: 10px 0;
margin-bottom: 20px;
}
.sitemap_list > li {
display: block;
float: left;
width: 18%;
margin-right: 2%;
margin-bottom: 20px;
}
.sitemap_list > li > a,
.sitemap_list > li >b {
font-size: 18px;
font-weight: bold;
line-height: 36px;
}
.sitemap_list li ul li {
display: block;
padding: 3px 0;
}
.sitemap_list li ul li a,
.sitemap_list li ul li b {
font-size: 16px;
font-weight: normal;
line-height: 20px;
}
/* Back to top
================================================== */
#back-to-top, .touch #back-to-top:hover{
position: fixed;
z-index: 9999;
display: none;
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
height:70px;
width: 30px;
bottom: 160px;
right:30px;
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:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
#back-to-top img {
width: 100%;
height: auto;
}
/* MISC
================================================== */
/* HK RANKING SEARCH FORM - 21/07/2015
================================================== */
/*text content*/
.block_txt {margin: 20px 20px;}
.page_content .block_txt {margin: 20px auto;}
.page_content .block_form {margin: 20px auto;}
.block_txt img {max-width: 80%;}/*23/07/2015*/
/*block search*/
.block_search {
display: block;
position: relative;
margin: 0 20px 20px 20px;
}
.bu_box {
background-color: #f2f5f9;
border: 1px solid #dee7f0;
padding: 10px;
}
.block_search .col_1-2 {
display: inline-block;
position: relative;
}
.block_search .general_form { padding: 0;}
.block_search .general_form .row label {
width: 150px;
}
.block_search .general_form label.mid_label {
width: auto;
display: inline-block;
}
.general_form .row.ft_btn {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.search_area {
display: block;
position: relative;
width: auto;
margin: 10px 0;
}
.search_area.row {
margin: 10px 0;
}
.search_area .search_box {
display: inline-block;
position: relative;
top: 0;
width: 280px;
padding: 0 36px 2px 5px;
border: 1px solid #b3bbc2;
background: #fff;
}
.search_area .txt_search {
width: 100%;
height: 28px;
line-height: 28px;
padding: 0;
background: transparent;
border:none;
}
.search_area .btn_search {
display: block;
position: absolute;
right: 0px;
top: 4px;
width: 32px;
height: 30px;
outline: none;
border: none;
background-image: url('../images/icn_nomal_sprite_2x.png');
background-repeat: no-repeat;
background-size: 50px 959px;
background-color: transparent;
background-position: center -655px;
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
}
.ie .search_area .btn_search {
background-image: url('../images/icn_nomal_sprite.png');
}
/* FIXED TOOLS LABEL - 23/07/2015
================================================== */
#tool_label {
display: block;
position: fixed;
width: 20px;
height: auto;
top: 240px;
right: -2px;
padding: 0 5px 0 5px;
background: #153955;
color: #fff;
z-index: 999;
}
#tool_label:before,
#tool_label:after {
content: ' ';
display: block;
width: 100%;
height: 8px;
left: 0;
position: absolute;
background-repeat: no-repeat;
background-size: 40px 130px;
background-color: transparent;
background-image: url('../images/bg_tools_label_2x.png');
}
.ie #tool_label:before,
.ie #tool_label:after {
background-image: url('../images/bg_tools_label.png');
}
#tool_label:before {
top: -7px;
background-position: left top;}
#tool_label:after {
bottom: -7px;
background-position: left bottom;}
#tool_label ul {
display: block;
position: relative;
}
#tool_label ul li {
display: block;
margin-bottom: 5px;
}
#tool_label ul li:last-child {
margin-bottom: 0;
}
#tool_label li img {
width: 18px;
height: 18px;
}