
.main-flex{display:flex;}
.main-left {width:300px;}
.main-right {flex:1;margin-left:20px;}
/*----------------------------------------*/
.main-left h3 {height:50px;line-height:50px;padding:0 0 0 20px;background:var(--btn-bg);font-size:20px;color:#fff;font-weight:600;text-transform:uppercase;}
.main-left h3::after {display:none;font-family:"qico";content:"\e727";float:right;font-size:20px;font-weight:normal;margin-top:0px;margin-right:15px;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;}
.main-left h3.active::after {-webkit-transform:rotate(45deg) scale(1.08);-ms-transform:rotate(45deg) scale(1.08);transform:rotate(45deg) scale(1.08);}

/*               
.sidemenu {margin:0 0 15px}
.sidemenu ul {border:1px solid #ededed;border-top:none}
.sidemenu ul li {margin:3px 0 0;border-bottom:1px solid #ededed}
.sidemenu ul li h5 {line-height:24px;display:block;font-size:16px;color:#333;cursor:pointer;position:relative}
.sidemenu ul li h5 a {color:#333;display:block;padding:10px 50px 10px 20px;text-transform:capitalize}
.sidemenu ul li h5 a:hover {color:#00A2E0;text-decoration:underline}
.sidemenu ul li h5 span {position:absolute;top:0;right:0;background:url(images/i4.png) no-repeat center;width:40px;height:45px;display:block}

.sidemenu dl {display:none}
.sidemenu dl dd {line-height:40px;border-bottom:1px dashed #dcdcdc;background:#fff;padding:0 20px}
.sidemenu dl dd:last-child {border-bottom:none}
.sidemenu dl dd a {font-size:15px;display:block;color:#666;padding-left:15px;text-transform:capitalize;background:url(images/i10-1.png) no-repeat left center}
.sidemenu dl dd.active a,.sidemenu dl dd a:hover {color:var(--active-color);background:url(images/i10.png) no-repeat left center}
.sidemenu ul li.active h5 {border-bottom:1px solid #ededed}
.sidemenu ul li.active h5 a {color:#00A2E0;}
.sidemenu ul li.active span {background:url(images/i4-1.png) no-repeat center}
*/

.sidemenu{margin:0 0 20px;}
.sidemenu > ul{}
.sidemenu > ul > li{border:1px solid #EAEAEA;margin-top:5px;}
.sidemenu > ul > li h5{height:45px;line-height:45px;display:block;padding:0 0 0 20px;font-size:18px;color:#404040;cursor:pointer;position:relative;}
.sidemenu > ul > li h5 a{display:block;padding:0 40px 0 0;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.sidemenu > ul > li h5 a:hover{color:#008CD6;}
.sidemenu > ul > li h5 span{position:absolute;right:0;top:0;width:40px;height:45px;display:block;text-align:center;transition:all 0.3s ease 0s;}
.sidemenu > ul > li h5 span::after{font-family:"qico";content:"\e699";font-size:18px;display:inline-block;transition:all 0.3s ease 0s;}

.sidemenu > ul > li ul {display:none;}
.sidemenu > ul > li ul li{line-height:24px;border-bottom:1px solid #F1F1F3;background:#fff;padding:0 20px;position:relative;}
.sidemenu > ul > li ul li:last-child {border-bottom:none;}
.sidemenu > ul > li ul li > span{position:absolute;top:2px;right:0;width:40px;height:40px;line-height:40px;text-align:center;display:block;cursor:pointer;transition:all 0.3s ease 0s;}
.sidemenu > ul > li ul li > span::after{font-family:"qico";content:"\e699";font-size:18px;display:inline-block;transition:all 0.3s ease 0s;}
.sidemenu > ul > li > ul > li > a {font-size:16px;display:block;color:#484848;padding:10px 40px 10px 15px;text-transform:capitalize;background:url(images/dot1.png) no-repeat left 18px;}
.sidemenu > ul > li > ul > li.active > a,.sidemenu > ul > li > ul > li > a:hover {color:#00A2E0;}

.sidemenu > ul > li ul li.active > span i{transform:rotate(180deg);}

.sidemenu > ul > li > ul > li > ul > li{}
.sidemenu > ul > li > ul > li > ul > li a{font-size:15px;display:block;color:#666;padding:10px 10px 10px 15px;background:url(images/dot1.png) no-repeat left 18px;}
.sidemenu > ul > li > ul > li > ul > li a:hover,.sidemenu > ul > li > ul > li > ul > li.active a{color:#00A2E0;}

.sidemenu > ul > li.active h5{color:#008CD6;border-bottom:1px solid #e2e2e2;}
.sidemenu > ul > li.active h5 > span::after{transform:rotate(180deg);}
/* 核心：保留flex布局（本身就是BFC），仅调整对齐方式 */
.product-detail .wp.main-flex {
  display: flex; /* flex布局天然触发BFC，无需额外flow-root */
  align-items: flex-start; /* 关键：左右顶对齐，避免侧边栏拉伸右侧 */
  justify-content: space-between;
  margin: 0 auto;
  /*width: 1440px;*/ /* 保留你的固定宽度 */
}

/* 侧边栏：用overflow触发BFC，兼容flex */
.main-left {
  flex: 0 0 auto; /* 侧边栏不缩放，保持自身宽度 */
  margin-right: 20px; /* 与右侧间距 */
}

.main-left .sidemenu {
  overflow: hidden; /* 触发BFC，限制内部菜单溢出 */
  max-height: 65vh; /* 限制侧边栏最大高度，避免撑开页面 */
  overflow-y: auto; /* 内容过多时滚动，无空白 */
}

/* 右侧内容：纯flex适配，不破坏flex:1 */
.main-right {
  flex: 1; /* 正常生效，自适应剩余宽度 */
  min-width: 0; /* 解决flex子项宽度溢出问题 */
  /*overflow: hidden; *//* 轻量触发BFC，隔离布局（不影响flex） */
}
                              
                              
@media screen and (max-width:992px) {
.main-left {float:none;width:100%;}
.main-right {margin-left:0;}
.main-left h3 {font-size:18px;padding:0 0 0 15px;}
.main-left h3::after {display:block;}
.sidemenu > ul {display:none;}
.sidemenu > ul > li h5 {padding:8px 0 8px 15px;font-size:16px;}
.sidemenu > ul > li h5 span {top:calc(50% - 18px);width:36px;height:36px;}


}
@media only screen and (max-width: 992px) {
.product-detail .wp.main-flex {
    /*flex-direction: column;*/
  display: block;
}
  }