@charset "utf-8";
:root {
--primary-color:#8B4513;
--secondary-color:#D2B48C;
--accent-color:#A52A2A;
--light-color:#F5F5DC;
--dark-color:#4E3524;
--text-color:#333;
--shadow:0 5px 10px rgba(0,0,0,0.1);
}
* {margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Microsoft YaHei","微软雅黑",simsun,"Helvetica Neue",Verdana,Arial,Helvetica,sans-serif;}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body {background-color:var(--light-color);color:var(--text-color);line-height:1.6;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%238B4513" stroke-width="0.5" stroke-opacity="0.1"/></svg>');}
html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility}
article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}
audio,canvas,video{display:inline-block}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
li,ul{list-style:none}
.art-content li,.art-content ul{list-style:inherit}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:none}
small{font-size:.9em}
input,textarea,button{outline:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:600;}
code,pre,pre tt{font-family:Courier,'Courier New',monospace}
pre{background:#f8f8f8;border:1px solid #ddd;padding:1em 1.5em;display:block;-webkit-overflow-scrolling:touch}
hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:.8em;height:10px}
.textwrap,.textwrap td,.textwrap th{word-wrap:break-word;word-break:break-all}
.textwrap-table{table-layout:fixed}
.serif{font-family:Palatino,Optima,Georgia,serif}
img{max-width:100%}
em,i{font-style:normal;}


/*==========public class=========*/

.fcinp{border: 1px solid #ddd;min-width:200px;height:30px;padding:2px 5px;background: #f6f6f6;}
.fcinp:hover{border:1px solid #ccc;background-color:#eee;}
.fcbtn{position:relative;border: solid 1px #ddd;background: transparent;display:inline-block;line-height: 1.5;text-align:center;cursor:pointer;font-size:14px;padding: .375em 1em;}
.fcbtn[class*='bg-']{color: #fff !important;border-color: transparent !important;}
.fcbtn[class*='bg-']:hover::before {position: absolute;content: "";width:100%;height:100%;top: 0;left: 0;background-color: rgba(0,0,0,.05);border-radius: inherit;}
.fcbtn-mini{padding: .125em .5em;font-size:12px;}
.fcbtn-big{padding: .625em 1.25em;font-size:16px;}
.fcbtn-block {display: block;width: 100%;}
.fcbtn[disabled]{pointer-events:none;cursor:not-allowed;webkit-box-shadow:none;box-shadow:none;filter:alpha(opacity=50);opacity:.5}

.btngroupmr10 .fcbtn{margin-right:10px;margin-bottom:10px;}
.btngroupmr20 .fcbtn{margin-right:20px;margin-bottom:10px;}

.fl{float:left;}
.fr{float:right;}
.tac{text-align:center;}
.ofh{overflow:hidden;}
.xddw{position:relative;}
.jddw{position:absolute;}
.noview{display:none;}
.mousehand{cursor:pointer}
.clear{clear:both;}
.clear:after{display:block;clear:both;visibility:hidden;height:0;font-size:0;content:".";}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.yj5{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.bd1{border:1px solid #ddd;}
.bdbt1{border-bottom: 1px solid #ddd;}
.bdbt2{border-bottom: 1px dashed #ddd;}
.nobd{border:none !important;}
.fontnm{font-weight:400 !important;font-style:normal !important;}
.fontbd{font-weight:700 !important;}
.f10{font-size:10px !important;}
.f12{font-size:12px !important;}
.f14{font-size:14px !important;}
.f16{font-size:16px !important;}
.f18{font-size:18px !important;}
.f20{font-size:20px !important;}
.f24{font-size:24px !important;}
.f30{font-size:30px !important;}
.f36{font-size:36px !important;}
.lh14{line-height:14px !important;}
.lh18{line-height:18px !important;}
.lh24{line-height:24px !important;}
.lh30{line-height:30px !important;}
.lh36{line-height:36px !important;}
.lh48{line-height:48px !important;}
.pd5{padding:5px !important;}
.pd10{padding:10px !important;}
.pd20{padding:20px !important;}
.pd30{padding:30px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.bgfff{background:#fff !important;}
.bg-main{background:#0a8 !important;}
.bg-blue{background:#0ae !important;}
.bg-yellow{background:#f60 !important;}
.bg-red{background:#f00 !important;}
.bg-green{background:#2c7 !important;}
.bg-black{background:#000 !important;}
.bg-gray{background:#999 !important;}
.text-fff{color:#fff !important;}
.text-main{color:#0a8 !important;}
.text-blue{color:#0ae !important;}
.text-yellow{color:#f60 !important;}
.text-red{color:#f00 !important;}
.text-green{color:#2c7 !important;}
.text-black{color:#000 !important;}
.text-gray{color:#999 !important;}

.basetable{margin:5px auto;line-height:26px;}
.basetable td{border:1px solid #ccc;padding:8px 5px;}

.codetest pre{margin-bottom:20px;}

.xz-radio-group {  
  /*display: flex;  flex-direction: row;flex-wrap: wrap;align-items: flex-start;gap: 9px;*/
} 
.xz-radio-group label { position: relative;  display: inline-block;  padding: 3px 10px;margin:0 5px 8px 0;font-size:13px;	border: 1px solid #ddd;  border-radius: 5px;  cursor: pointer; } 

.xz-radio-group label.selected {border-color: #0a8; color:#0a8;}
.xz-radio-group input{ position: absolute;  opacity: 0;  width: 0;  height: 0;  } 

/*==========public class end =========*/

.container {width:100%;max-width:1200px;margin:0 auto;padding:0 15px;}

/* 头部样式 */        
header {background:linear-gradient(to right,var(--primary-color),var(--dark-color));color:white;padding:1rem 0;box-shadow:var(--shadow);position:relative;}
.header-content {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.logo {display:flex;align-items:center;}
.logo a {display:block;margin:0;padding:0;border:none;line-height:0;}
.logo img {max-height:50px;}
.logo h1 {font-size:1.8rem;margin-left:10px;text-shadow:2px 2px 4px rgba(0,0,0,0.3);}
.logo-icon {font-size:2.5rem;color:var(--secondary-color);}

/* 导航样式 */        
.header-nav {display:flex;}
.nav-desktop {display:flex;list-style:none;margin:0;padding:0;}
.nav-desktop li {margin:0 10px;}
.nav-desktop a {color:white;text-decoration:none;font-weight:400;padding:10px 15px;border-radius:5px;transition:all 0.3s ease;display:block;}
.nav-desktop a:hover,.nav-desktop a.active {background-color:rgba(255,255,255,0.2);}
.mobile-nav-toggle {display:none;background:none;border:none;font-size:1.5rem;color:white;cursor:pointer;}
.nav-mobile {position:fixed;top:0;left:-250px;width:250px;height:100vh;background-color:var(--dark-color);z-index:1000;transition:left 0.3s ease;padding-top:60px;box-shadow:2px 0 5px rgba(0,0,0,0.2);}
.nav-mobile.active {left:0;}
.nav-mobile ul {list-style:none;}
.nav-mobile a {display:block;color:white;text-decoration:none;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,0.1);}
.nav-mobile a:hover {background-color:var(--primary-color);}
.close-nav {position:absolute;top:15px;right:15px;background:none;border:none;color:white;font-size:1.5rem;cursor:pointer;}

/* 主内容区样式 */        
main {padding:2rem 0;min-height:calc(100vh - 200px);}

.section-title {font-size: 1.5em;text-align:center;margin:3rem 0 2rem;color:var(--primary-color);position:relative;padding-bottom:10px;}
.section-title:after {content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100px;height:3px;background-color:var(--primary-color);}

.btn {display:inline-block;background-color:var(--primary-color);border:none;color:white;padding:5px 15px;border-radius:5px;text-decoration:none;transition:all 0.3s ease;cursor:pointer}
.btn:hover {background-color:var(--accent-color);transform:translateY(-2px);}
.btn-small {padding:4px 10px;font-size:0.9rem;}
.btn[disabled]{pointer-events:none;cursor:not-allowed;webkit-box-shadow:none;box-shadow:none;filter:alpha(opacity=50);opacity:.5}

.hero {background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('banner.jpg');background-size:cover;background-position:center;color:white;text-align:center;padding:4rem 1rem;border-radius:10px;margin:1rem auto;}
.hero h2 {font-size:2.5rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,0.5);}
.hero p {font-size:1.2rem;max-width:800px;margin:0 auto;}

/* 产品分类 */        
.products-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin:2rem 0;}
.product-card {background-color:white;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:transform 0.3s ease;}
.product-card:hover {transform:translateY(-5px);}
.product-img {height:240px;overflow:hidden;background-color:var(--secondary-color);display:flex;align-items:center;justify-content:center;color:var(--dark-color);font-size:3rem;}
.product-img a {display:block;width:100%;height:100%;}
.product-img img {width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.product-info {padding:15px;}
.product-title{margin-bottom:5px;}
.product-title a {font-weight:bold;color:var(--dark-color);}
.product-title a:hover{color:var(--accent-color);}
.product-price {color:var(--accent-color);font-weight:bold;margin:10px 0;}

/* 产品详情 */        
.product-detail-container {display:flex;flex-wrap:wrap;gap:30px;margin-bottom:30px;}
.product-detail-image {flex:1;min-width:300px;background-color:var(--secondary-color);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--dark-color);font-size:5rem;overflow: hidden;}
.product-detail-info {flex:1;min-width:300px;}
.product-detail-title {font-size:1.8rem;color:var(--dark-color);margin-bottom:10px;}
.product-detail-id {color:#666;margin-bottom:20px;}
.product-detail-price {font-size:1.6rem;color:var(--accent-color);font-weight:bold;margin-bottom:20px;}
.product-detail-description {line-height:1.8;margin-bottom:30px;}
.product-detail-actions {display:flex;gap:15px;}

/* 分类导航 */        
.category-nav {background-color:white;padding:15px 5px;border-radius:8px;box-shadow:var(--shadow);margin-bottom:2rem;}
.category-nav ul {display:flex;justify-content:center;list-style:none;flex-wrap:wrap;}
.category-nav li {margin:5px 10px;}
.category-nav a {color:var(--dark-color);text-decoration:none;padding:8px 15px;border-radius:20px;background-color:var(--light-color);transition:all 0.3s ease;}
.category-nav a:hover,.category-nav a.active {background-color:var(--text-color);color:white;}

/* 文章分类 */        
.articles-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:2rem 0;}
.article-card {background-color:white;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);}
.article-img {height:180px;background-color:var(--secondary-color);display:flex;align-items:center;justify-content:center;color:var(--dark-color);font-size:2.5rem;}
.article-info {padding:15px;}
.article-title{margin-bottom:10px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}
.article-title a{font-weight:bold;color:var(--dark-color);}
.article-title a:hover{color:var(--accent-color);}
.article-excerpt {color:#666;margin-bottom:10px;font-size:0.9rem;}
.article-more span{font-size:0.9rem;}

/* 文章详情 */        
.product-detail,.article-detail {background-color:white;padding:1.5rem;border-radius:8px;box-shadow:var(--shadow);margin-bottom:1rem;margin-top:1rem;}
.art-detail-title {font-size: 1.2em;text-align:center;margin:1rem 0 1.5rem;position:relative;padding-bottom:10px;}
.art-detail-img {max-width:360px;margin:1.5rem auto;border-radius:8px;text-align:center;}
.art-content {line-height:1.8;margin:1.5rem 0;}
.art-content p{margin-bottom:10px;}
.art-content a{color:var(--primary-color);border-bottom:1px dashed var(--primary-color)}
.art-content h1,.art-content h2,.art-content h3,.art-content h4{padding-left: 10px;line-height: 1.2;border-left: 4px solid var(--primary-color);margin: 15px 0 10px;font-weight:700;color:#333;font-size:1.1em}
.art-content h5,.art-content h6{font-size:1em}
.art-content blockquote{color:#666;font-weight:400;border-left:4px solid var(--secondary-color);padding:.5em 1em;background-color:#f3f3f3}
.art-content img{height:auto;margin: 10px auto;display: block;}
.art-content table {border-collapse:collapse;empty-cells:show;border-spacing:0;width:100%;}
.art-content table tr.firstRow{font-weight:bold;background-color:#f8f8f8;text-align:left}
.art-content table th,.art-content table td{padding:.3em .5em;margin:0;vertical-align:top;border:1px solid #ddd}
.art-content blockquote,.art-content dl,.art-content form,.art-content hr,.art-content ol,.art-content p,.art-content pre,.art-content table,.art-content ul{font-weight:400;margin-bottom:1rem}
.art-content ul p,.art-content ol p{margin-bottom:0}
.art-content blockquote p{margin-top:5px;margin-bottom:5px;}
.art-content li{margin-left:1.2em}
.art-content ol li{list-style: decimal;}
.art-content ul li{list-style: none;margin-left:0;}
.art-content hr{border:none;margin-top:1.5rem;margin-bottom:1.5rem;border-top:1px solid #eee;height:1px;background:0 0}

.article-meta{color:#666}
.article-meta a{color:#666}

/**********分页********/
.pagination {clear:both;text-align:center;margin:auto;padding:10px 0;overflow:hidden;margin-bottom:20px;}
.pagination li{display:inline-block;height:30px;line-height:30px;margin:3px;box-shadow: 0 1px 3px rgba(26,26,26,.2);}
.pagination a{display:block;font-size:14px;padding:0 10px;background:#fff;color:#666;}
.pagination a:hover,.pagination li.active a{color:#fff;background:var(--primary-color);}

/* 微信 */
.wechat-icon {position: fixed;top: 270px; right: 20px;background-color: #07c160;color: white;width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: var(--shadow);z-index: 998;transition: all 0.3s ease;}
.wechat-icon:hover {background-color: #06ae56;transform: scale(1.05);}

/* 右侧预订单 */  
.reservation-icon {position:fixed;top:200px;right:20px;background-color:var(--primary-color);color:white;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);z-index:998;}
.reservation-count {position:absolute;top:-5px;right:-5px;background-color:var(--accent-color);color:white;border-radius:50%;width:20px;height:20px;font-size:12px;display:flex;align-items:center;justify-content:center;}
      
.reservation-container {position:fixed;top:200px;right:20px;background-color:white;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,0.2);padding:15px;z-index:999;width:300px;display:none;}
.reservation-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee;}
.reservation-items {max-height:300px;overflow-y:auto;margin-bottom:10px;}
.reservation-item {display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eee;}
.reservation-item-info {flex-grow:1;}
.reservation-item-title {font-weight:bold;margin-bottom:5px;font-size:0.9rem;}
.reservation-item-id {font-size:12px;color:#666;}
.reservation-item-quantity {display:flex;align-items:center;margin:0 10px;}
.quantity-btn {width:25px;height:25px;background-color:var(--light-color);border:none;border-radius:3px;cursor:pointer;}
.quantity-input {width:40px;text-align:center;margin:0 5px;border:1px solid #ddd;border-radius:3px;padding:3px;}
.remove-item {color:var(--accent-color);background:none;border:none;cursor:pointer;font-size:16px;margin-left: 10px;}
.reservation-total {font-weight:bold;text-align:right;margin-bottom:15px;font-size:0.9rem;}
.reservation-actions {display:flex;justify-content:space-between;}
.reservation-btn {padding:3px 10px;border-radius:4px;cursor:pointer;border:none;}
.reservation-clear {background-color:#f5f5f5;color:#666;font-size:0.9rem;}
.reservation-checkout {background-color:var(--accent-color);color:white;font-size:0.9rem;}


/* 表单 */        
.form-container {background-color:white;padding:2rem;border-radius:8px;box-shadow:var(--shadow);max-width:800px;margin:0 auto;}
.form-group {margin-bottom:1.5rem;}
.form-group label {display:block;margin-bottom:0.5rem;font-weight:bold;color:var(--dark-color);}
.form-control {width:100%;padding:10px;border:1px solid #D2B48C;border-radius:4px;font-size:1rem;}
textarea.form-control {min-height:60px;resize:vertical;}

/* 表单已选项目 */        
.booking-reservation-item {display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eee;margin-bottom:5px;}
.booking-reservation-info {flex-grow:1;}
.booking-reservation-title {font-weight:bold;margin-bottom:4px;color:var(--dark-color);}
.booking-reservation-id {font-size:12px;color:#666;margin-bottom:4px;}
.booking-reservation-price {color:var(--primary-color);font-size:14px;}
.booking-reservation-quantity {display:flex;align-items:center;margin:0 15px;}
.booking-reservation-total {font-weight:bold;text-align:right;margin-top:15px;padding-top:5px;font-size:1rem;color:var(--accent-color);}

/* 使用说明区域样式 */
.usage-guide {background:#fff;border-radius:8px;padding:2rem;box-shadow:var(--shadow);max-width:800px;margin:0 auto 30px;}
/* 步骤样式 */
.guide-steps {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:25px;}
.step {display:flex;flex-direction:column;align-items:center;text-align:center;background:white;padding:25px 20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all 0.3s ease;border:1px solid var(--secondary-color);}
.step:hover {transform:translateY(-3px);box-shadow:0 4px 15px rgba(139,69,19,0.15);}
.step-number {background:var(--secondary-color);color:white;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem;margin-bottom:15px;box-shadow:0 2px 5px rgba(139,69,19,0.3);}
.step-content h4 {color:var(--dark-color);margin:0 0 12px 0;font-size:1.1rem;font-weight:600;}
.step-content p {color:#666;margin:0;line-height:1.5;font-size:0.9rem;}
/* 提示信息样式 */
.guide-tips {background:rgba(139,69,19,0.05);padding:15px;border-radius:8px;line-height:30px;}
.tip-item {color:var(--dark-color);font-size:0.9rem;margin-bottom:10px;}
.tip-item b{font-weight:600;display:block;}
.tip-item a{color:var(--accent-color);border-bottom:1px dashed var(--accent-color)}

/* 页脚样式 */        
footer {background-color:var(--dark-color);color:white;text-align:center;padding:1.5rem 0;margin-top:2rem;}
.footer-content {display:flex;flex-direction:column;align-items:center;line-height:36px;}

/* 响应式设计 */

@media (max-width:768px) {
header.fixed {position:fixed;left:0px;right:0px;top:0px;z-index:99;}
.header-nav {display:none;}
.mobile-nav-toggle {display:block;/* position:absolute;top:20px;right:20px;*/}
.hero {padding:3rem 1rem;}
.hero h2 {font-size:1.5rem;}
.hero p {font-size:1rem;}
.category-nav{padding:10px 0;}
.category-nav.fixed {position:fixed;left:0px;right:0px;z-index:99;padding:2px;border-radius:0px;margin-bottom:0px;}
.category-nav li {margin:10px 5px;}
.category-nav a {font-size:0.8rem;padding:5px 10px;}
.product-img {height:300px;}
.product-detail-container {gap:10px;margin-bottom:10px;}
.product-detail-title {font-size:1.5rem;margin-top:15px;}
.product-detail-price {font-size:1.5rem;}
.form-container {padding:1rem;}
.usage-guide {padding:20px 15px;margin-bottom:20px;}
.guide-steps {grid-template-columns:1fr;gap:15px;}
.guide-steps .step {padding:15px;}
.guide-tips {flex-direction:column;gap:12px;}
.reservation-container {width:90%;left:5%;right:5%;top:160px;}
.reservation-icon {top:160px;right:10px;}
.wechat-icon {top: 230px;right: 10px;}
footer {padding:1.2rem 0;}
.footer-content {line-height:26px;font-size:0.9rem;}
}