@import url(../system/css/editor.css);
@charset "utf-8";
/* CSS Document */
@import url(btn.css);
 @import url(form.css);
 @import url(pages.css);
/*全局*/
body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif, '微軟正黑體', '新細明體'; font-size: 13px; color: #72472C; letter-spacing: 1px; line-height: 22px; text-align: justify; text-justify: inter-ideograph; }
/***common*********************************************************/
p { margin: 0px; padding: 0px; }
img { border: 0px; }
.clear { zoom: 1; clear: both; }
.clear:after { content: ''; display: block; clear: both; visibility: hidden; height: 0; }
.bold { font-weight: bold; }
/***fixedbar*********************************************************/
#fixedbar { width: 100%; height: 40px; z-index: 99; background: #fff; }
#topnavcart { z-index: 10; left: 0px; top: 0px; width: 1000px; position: relative; margin: 0 auto; height: 37px; }
#logo { position: absolute; z-index: 1; left: 3px; top: -11px; }
/***header********************************************************/
#header-box { width: 100%; height: auto; position: relative; margin: auto; }
.header { width: 1000px; height: 131px; margin: 0 auto; position: relative; }
/*search-box***********/
#search-box { width: 270px; height: auto; position: absolute; z-index: 1; right: 0px; top: 69px; }
#search-box .input { border: 1px #CCCCCC solid; height: auto; width: 193px; float: left; margin-top: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#search-box .style { width: 100%; height: 28px; padding: 0px 0px 0px 5px; border: 0px; font-size: 12px; color: #888888; background-color: transparent; outline: none; }
#search-box .btn { height: 62px; width: 61px; float: right; }
#search-box .btn a { background: url(../data/wrapper/send_search.png); height: 62px; width: 61px; display: block; -webkit-transition: background-image 300ms linear; -moz-transition: background-image 300ms linear; -o-transition: background-image 300ms linear; transition: background-image 300ms linear; }
#search-box .btn a:hover { background: url(../data/wrapper/send_search-.png); }
/*menu-box***********/
#menu-box { width: auto; height: auto; z-index: 90; top: 85px; left: 0px; position: absolute; }
.menu { width: auto; margin: auto; }
#menu-box .top_but { width: auto; height: 35px; }
/*外層框*/
#menu-box .top_but ul { list-style-type: none; margin: 0px; padding: 0px; }
/*UL設定不要有列表項目符號，並且不要有間距*/
#menu-box .top_but li { height: 35px; float: left; }
#menu-box .top_but ul li { position: relative; }
/*可橫向排列，直立式按鈕及不需要float標籤*/
#menu-box .top_but li a { padding:10px 10px 0 20px ; text-align:left ;color:#3D1408; text-decoration:none; font-size:16px; font-weight:bold;height: 25px; display: block; -webkit-transition: background-image 500ms linear; -moz-transition: background-image 500ms linear; -o-transition: background-image 500ms linear; transition: background-image 500ms linear; }
/*li內容有做連結時的設定，設定與圖片長寬相同並隱藏文字*/
#menu-box .top_but li.top_but01>a { width: auto;  }
/*按鈕1第一章圖*/
#menu-box .top_but li.top_but01>a:hover { background: url(../data/wrapper/menu_dot.png) 0 12px no-repeat; }
/*按鈕1第二張圖*/
#menu-box .top_but li.top_but02>a { width: auto;  }
/*按鈕2第一章圖*/
#menu-box .top_but li.top_but02>a:hover { background: url(../data/wrapper/menu_dot.png) 0 12px no-repeat; }
/*按鈕2第二張圖*/
#menu-box .top_but li.top_but03>a { width: auto;  }
/*按鈕3第一章圖*/
#menu-box .top_but li.top_but03>a:hover { background: url(../data/wrapper/menu_dot.png) 0 12px no-repeat; }
/*按鈕3第二張圖*/
#menu-box .top_but li.top_but04>a { width: auto; }
/*按鈕4第一章圖*/
#menu-box .top_but li.top_but04>a:hover { background: url(../data/wrapper/menu_dot.png) 0 12px no-repeat; }
/*按鈕4第二張圖*/
#menu-box .top_but li.top_but05>a { width: auto; }
/*按鈕4第一章圖*/
#menu-box .top_but li.top_but05>a:hover { background: url(../data/wrapper/menu_dot.png) 0 12px no-repeat; }
/*按鈕4第二張圖*/
/*************************************/
#menu-box .top_but ul li>ul { position: absolute; top: 100%; left: 0px; width: 200px; background: #eae7e3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #CCC; display: none; -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear; }
#menu-box .top_but ul li:hover ul { display: block; -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear; }
#menu-box .top_but ul li>ul:after { content: ''; display: block; clear: both; }
#menu-box .top_but ul li>ul li { width: 100%; height: auto; }
#menu-box .top_but ul li>ul li a { font-size:14px; width: 100%; height: auto; word-break: break-all; line-height: 1.3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 8px; padding:5px 24px 5px 8px; text-decoration: none; color: #5F3A18 }
#menu-box .top_but ul li>ul li:hover > a { background: url('../data/cart/step.png')96% 4px no-repeat, url('../data/cart/white.jpg'); color: #5F3A18; }
/***ad-box-in******************************************************/
.main-top { width: 1000px; height: auto; margin: 0 auto; }
/***main_box********************************************************/
#main-box { width: 100%; height: auto; margin: 0 auto; }
.main { width: 1000px; height: auto; position: relative; margin: 0 auto; }
.main:after { content: ' '; display: block; clear: both; }
#leftside { width: 222px; height: auto; margin: 0px 0px 20px 0px; float: left; }
.leftnav-box { padding: 10px 0; width: 100%; height: auto; background: url(../data/wrapper/left_top.png) top center no-repeat, url(../data/wrapper/left_bottom.png) bottom center no-repeat, url(../data/wrapper/left-center.png); }
#rightside { width: 750px; height: auto; margin: 0px 0px 50px 0px; float: right; }
#centerside { width: 1000px; height: auto; margin: 0px 0px 20px 0px; float: right; }
#title { margin-bottom: 48px; font-size: 22px; font-weight: bold; color: #3D140B; width: 980px; height: 63px; float: left; background: url(../data/index/title_bg.png) 0 0 no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 0 0 20px; 
height: 69px;
background-position: bottom;
width: 996px;
/* background-size: 100% 49px; */
}
#title_sub { width: 100%; height: auto; font-size: 17px; font-weight: bold; color: #3D140B; }
#container { color: #3D140B; width: 100%; height: auto; float: left; margin: 10px 0px 0px 0px; letter-spacing: 1px; line-height: 22px; text-align: justify; text-justify: inter-ideograph;text-align: left; }
#container img{ max-width:100% !important; height:auto !important;}
/***footer_box*********************************************************/
#footer_box { width: 100%; height: auto; margin: 0 auto; margin-top: 30px; }
#footer { width: 1000px; height: 250px; margin: 0 auto; position: relative; color: #53392C; padding-top: 30px; background: url(../data/wrapper/footer_bg.jpg) 0 0 no-repeat; }
#footer_menu { width: 1000px; height: auto; padding-left: 0px; letter-spacing: 1px; line-height: 20px; }
#footer_menu a { color: #55392D; text-decoration: none; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; }
#footer_menu a:visited { color: #55392D; text-decoration: underline; }
#footer_menu a:hover { color: #55392D; text-decoration: underline; }
#footer_menu ul { padding: 0; margin: 0px; margin-left: 10px; color: #999999; list-style-image: url(../data/wrapper/footer_dot.png); }
#footer_menu li { padding: 0px; margin-left: 0px; list-style-position: inside; }
#footer_menu .top { list-style-type: none; font-size: 16px; color: #54392C; font-weight: bold; }
#footer_menu .menu1-box { width: 440px; height: auto; float: right; }
#footer_menu .menu1-top { width: 100%; height: 30px; float: left; color: #441106; font-weight: bold; font-size: 16px; }
#footer_menu .menu1 { font-size: 12px; width: 100%; height: auto; float: left; padding: 0 0 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#footer_menu .menu1 .caption { float: left; margin-top: 13px; width: 80px; }
#footer_menu .input { border: 1px #CCCCCC solid; height: 28px; width: 193px; float: left; margin-top: 7px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #FFF; }
#footer_menu .style { width: 100%; height: 28px; padding: 0px 0px 0px 5px; border: 0px; font-size: 12px; color: #888888; background-color: transparent; outline: none; }
#footer_menu .btn { float: left; width: 70px; height: 25px; margin-top: 10px; }
#footer_menu .btn a { width: 70px; height: 25px; background: url(../data/wrapper/subscription.png) 0 0 no-repeat; display: block; -webkit-transition: background-image 300ms linear; -moz-transition: background-image 300ms linear; -o-transition: background-image 300ms linear; transition: background-image 300ms linear; }
#footer_menu .btn a:hover { background: url(../data/wrapper/subscription-.png); }
#footer_menu .menu2 { font-size: 12px; width: 550px; height: auto; float: left; margin: 0px 0px 0px 0px; line-height: 25px; }
#footer_menu .menu2_content2 { width: 100%; height: auto; margin: auto; width: 150px; text-align: left; padding: 0px 0px 0px 20px; float: left; }
#footer_menu .menu2_content3 { width: 100%; height: auto; margin: auto; width: 160px; text-align: left; padding: 0px 0px 0px 0px; float: left; }
#footer_menu .menu2_content4 { width: 100%; height: auto; margin: auto; width: 100px; text-align: left; padding: 0px 0px 0px 0px; float: left; }
#footer .copyright { font-size: 12px; color: #72725F; position: absolute; left: 1px; top: 180px; z-index: 5; letter-spacing: 2px; width: 554px; text-align: left; }
#footer .cash_flow { font-size: 12px; color: #72725F; position: absolute; left: 1px; top: 210px; z-index: 5; letter-spacing: 2px; width: 554px; text-align: left; }
#footer .webdeaign { font-size: 12px; color: #72725F; position: absolute; left: 895px; top: 180px; z-index: 99; }
#footer .webdeaign a { color: #72725F; text-decoration: underline; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; }
#footer .webdeaign a:visited { color: #72725F; text-decoration: none; }
#footer .webdeaign a:hover { color: #582819; text-decoration: underline; }
/***header-txttxt*********************************************************/
.header-txt { position: absolute; z-index: 1; right: 0px; top: 0px; ; width: 460px; color: #FFF; }
.header-txt a { color: #3D1306; text-decoration: none; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; }
.header-txt a:hover { color: #3D1306; text-decoration: underline; }
.header-txt ul { list-style-type: none; padding: 0px; margin: auto; margin: 0; padding: 0; display: inline-block; float: right; }
.header-txt li { color: #3D1306; float: left; width: auto; height: 25px; list-style-type: none; padding: 0 5px; }
.header-txt li+li:before { content: "/"; display: inline-block; vertical-align: middle; padding: 0 10px 0 0; }
.header-txt .btn { float: right; width: 70px; height: 25px; }
.header-txt .btn a { width: 70px; height: 25px; background: url(../data/index/login.png) 0 0 no-repeat; display: block; -webkit-transition: background-image 300ms linear; -moz-transition: background-image 300ms linear; -o-transition: background-image 300ms linear; transition: background-image 300ms linear; }
.header-txt .btn a:hover { background: url(../data/index/login-.png); }
/***header-btn*********************************************************/
.top_cart { color: #3D1306; width: 500px; width: 782px; position: absolute; z-index: 1; right: 0px; top: 29px; text-align: right; }
.top_cart a { color: #B20000; text-decoration: underline; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; }
.top_cart a:hover { color: #FF4000; text-decoration: underline; }
.top_cart span { color: #68200C; font-size: 12px; float: left; }
/***breadcrumbs*********************************************************/
#breadcrumbs { text-align: left; color: #72482D; font-size: 12px; position: absolute; left: 0px; top: 74px; z-index: 1; letter-spacing: 2px; }
#breadcrumbs span { color: #999999; }
#breadcrumbs img { padding: 0px 2px 0 0; }
#breadcrumbs a { color: #8CB70F; text-decoration: none; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; }
#breadcrumbs a:visited { color: #8CB70F; text-decoration: none; }
#breadcrumbs a:hover { color: #900; text-decoration: none; }