@charset "utf-8";

/* header
--------------------------------------------------------- */
#header {
position: relative;
width: 980px;
height: 65px;
margin: 0;
padding: 9px 0 0 0;
background: none;
overflow: hidden;
}

/* h1 */
#header h1 {
position: relative;
float: left;
width: 150px;
padding: 0 0 0 20px;
z-index: 2;
}
#header p.logo {
position: absolute;
left: 0;
bottom: 6px;
}

/* dl */
#header dl {
position: relative;
float: right;
}
#header dl dt {
clear: both;
height: 0px;
overflow: hidden;
}
#header dl dd {
float: left;
}

#header dl dd a {
background: url(../img/common/nav_global_top.gif) no-repeat left top;
}

#header dl dd.store a,
#header dl dd.store_on a        { width: 118px; }
#header dl dd.product a,
#header dl dd.product_on a      { width: 102px; }
#header dl dd.support a,
#header dl dd.support_on a      { width: 103px; }
#header dl dd.magazine a,
#header dl dd.magazine_on a     { width: 102px; }
#header dl dd.contact a,
#header dl dd.contact_on a      { width: 120px;}
#header dl dd.catalogue a,
#header dl dd.catalogue_on a    { width: 124px; }
#header dl dd.shop a,
#header dl dd.shop a            { width: 123px; }

#header dl dd.store a           { background-position: 0 0; }
#header dl dd.store a:hover     { background-position: -0 -36px; }
#header dl dd.store_on a        { background-position: -0 -72px; }
#header dl dd.product a         { background-position: -118px 0; }
#header dl dd.product a:hover   { background-position: -118px -36px; }
#header dl dd.product_on a      { background-position: -118px -72px; }
#header dl dd.support a         { background-position: -220px 0; }
#header dl dd.support a:hover   { background-position: -220px -36px; }
#header dl dd.support_on a      { background-position: -220px -72px; }
#header dl dd.magazine a        { background-position: -323px 0; }
#header dl dd.magazine a:hover  { background-position: -323px -36px; }
#header dl dd.magazine_on a     { background-position: -323px -72px; }
#header dl dd.contact a         { background-position: -425px 0; }
#header dl dd.contact a:hover   { background-position: -425px -36px; }
#header dl dd.contact_on a      { background-position: -425px -72px; }
#header dl dd.catalogue a       { background-position: -545px 0; }
#header dl dd.catalogue a:hover { background-position: -545px -36px; }
#header dl dd.catalogue_on a    { background-position: -545px -72px; }
#header dl dd.shop a            { background-position: -669px 0; }
#header dl dd.shop a:hover      { background-position: -669px -36px; }
#header dl dd.shop_on a         { background-position: -669px -72px; }



/* contents
--------------------------------------------------------- */
#contents  {
margin: 0;
padding: 0;
background: 0;
}


/* flashArea */
#contents .flashArea {
position: relative;
clear: both;
}
#contents .flashArea .hill {
position: relative;
margin: -65px 0 0 0;
z-index: 2;
zoom: 1;
}



/* main-contents
--------------------------------------------------------- */
#contents #main-contents {
width: 980px;
}

/* ----- main ----- */
#contents #main {
float: left;
width: 520px;
margin: 0;
padding: 0 0 40px 230px;
}


/* newsArea */
#contents #main .newsArea {
width: 520px;
padding: 0;
}
#contents #main .newsArea h2 {
float: left;
width: 376px;
background: url(../img/top/bg_news.gif) no-repeat 54px 6px; 
}

#contents #main .newsArea p.view {
float: left;
width: 66px;
padding: 2px 0 0 12px;
}
#contents #main .newsArea p.rss {
float: left;
width: 43px;
padding: 2px 0 0 18px;
}

#contents #main .newsArea ul {
clear: both;
width: 514px;
padding: 20px 0 0 6px;
overflow: hidden;
}
#contents #main .newsArea ul li {
margin: 0 0 8px 0;
padding: 0 0 0 14px;
line-heigth:140%;
background: url(../img/common/list_circle_Lbrwn.gif) no-repeat 0 4px;
color: #643610;
}
#contents #main .newsArea ul li a {
display: block;
width: 495px;
cursor: pointer;
color: #643610;
}
#contents #main .newsArea ul li span {
display: block;
float: left;
width: 90px;
margin: 0 5px 0 0;
padding: 0 0 0 0;
color: #bc741f;
}
#contents #main .newsArea ul li a:hover span  {
text-decoration: underline;
}

/* appealArea_news_up */
#contents #main .appealArea_news_up {
margin: 0 0 20px 0;
padding: 12px 0 0 0;
}


/* bannerArea */
#contents #main .bannerArea {
clera: both;
width: 520px;
margin: 15px 0 0 0;
overflow: hidden;
}
#contents #main .bannerArea h2 {
height: 0px;
overflow: hidden;
}
#contents #main .bannerArea ul {
width: 525px;
margin-right: -5px;
}
#contents #main .bannerArea ul li {
float: left;
margin: 0 5px 0 0;
padding: 0;
}


/* appealArea */
#contents #main .appealArea {
margin: 20px 0 0 0;
padding: 12px 0 0 0;
/* background: url(../img/common/bg_h-line.gif) repeat-x left top; */
}
/*
#contents #main .appealArea a.banner1:hover {
display: block;
width: 520px;
height: 225px;
background: url(../img/top/bnr_web-bottle_on.jpg) no-repeat left top;
}
#contents #main .appealArea a.banner2:hover {
display: block;
width: 520px;
height: 225px;
background: url(../img/top/bnr_2_on.gif) no-repeat left top;
}
#contents #main .appealArea a.banner3:hover {
display: block;
width: 520px;
height: 225px;
background: url(../img/top/bnr_3_on.gif) no-repeat left top;
}

#contents #main .appealArea a:hover img {
visibility: hidden;
}
*/

/* ----- sub ----- */
#contents #sub {
float: right;
width: 214px;
padding: 0 0 30px 0;
}

/* searchArea */
#contents #sub .searchArea {
width: 214px;
margin: 0 0 4px 0;
padding: 0 0 12px 0;
background: #86B00D url(../img/top/bg_btm_search.gif) no-repeat left bottom;
}
#contents #sub .searchArea h2 {
margin: 0 0 5px 0;
}
#contents #sub .searchArea form#search {
position: relative;
top: 0;
right: 0;
padding: 0 0 0 26px;
}

/* rankingArea */
#contents #sub .rankingArea {
width: 214px;
}
#contents #sub .rankingArea ul {
width: 214px;
padding: 0 0 7px 0;
background: url(../img/common/bg_btm_grn.gif) no-repeat left bottom;
}
#contents #sub .rankingArea ul li {
clear: both;
width: 198px;
padding: 8px 4px 6px 12px;
border-bottom: 1px solid #E9E7A5;
background: #FCFACA;
overflow: hidden;
}
#contents #sub .rankingArea ul li.end {
border: none;
}
#contents #sub .rankingArea ul li img {
float: left;
margin: 0 12px 0 0;
}

#contents #sub .rankingArea ul li span {
float: left;
width: 135px;
}
#contents #sub .rankingArea ul li strong {
display: block;
padding: 0 0 4px 0;
color: #E06A0D;
font-weight: bold;
}
#contents #sub .rankingArea ul li a {
width: 202px;
cursor: pointer;
color: #824C1C;
}
#contents #sub .rankingArea ul li a:hover strong {
text-decoration: underline;
}

/* bannerArea */
#contents #sub .bannerArea h2 {
height: 0;
overflow: hidden;
}
#contents #sub .bannerArea ul li {
margin: 7px 0 0 0;
}

/* bannerArea right_top */
#contents #sub .right_top h2 {
height: 0;
overflow: hidden;
}
#contents #sub .right_top ul li {
margin: 1px 0 5px 0;
}


/* ----- sidebar ----- */
#contents #sidebar {
position: absolute;
top: 440px;
left: 0;
width: 214px;
padding: 0;
z-index: 10;
}

/* logout */
#contents #sidebar .formArea .logout {
margin: -14px 0 0 0;
padding: 0;
}
#contents #sidebar .formArea .logout p.member {
position: relative;
top: 0;
left: 0;
}
/* login */
#contents #sidebar .formArea .login {
margin: 0 0 0 0;
}
#contents #sidebar .formArea .login p.welcome {
padding: 0 10px 8px 10px;
}

/* categoryArea */
#contents #sidebar .categoryArea {
width: 214px;
padding: 0 0 7px 0;
background: url(../img/common/bg_btm_grn.gif) no-repeat left bottom;
}
#contents #sidebar .categoryArea ul {
height: 308px;
}

#contents #sidebar .formArea .logout p.check {
width: 174px; 
margin: 8px 0 10px 16px;
text-align: left;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}

#contents #sidebar .formArea .logout p.check input {
margin: 0 5px;
}

/* IE7‚ÖŽw’è */
*:first-child+html #contents #sidebar .formArea .logout p.check input {
margin: -5px 5px 0 5px;
}