/*li to table*/
.tab-panel > ul {list-style: none;margin: 0;padding:0;width:100%;border-collapse: collapse;}
.tab-panel > ul > li > div {vertical-align: middle;}/*垂直居中*/
.tab-panel > ul > li:nth-child(n+2) div{color:#111;font-family: 'Montserrat';font-weight:500;}
@media(min-width:768px){
.tab-panel > ul{display:table;}
.tab-panel > ul > li {display: table-row;}
.tab-panel > ul > li > div {display: table-cell;}
.tab-panel > ul > li:first-child div {height:38px;line-height:1.5;font-family:'Montserrat','Noto-sans-sc';font-weight:500;font-size:1.48rem;color:#111;background: #F9F9F9;}/*表头加重背景色*/
.tab-panel > ul > li > div:first-of-type,.hide-on-pc{display: none;}/*PC端不显示第一个div。PC端不显示的内容*/
.tab-panel > ul > li > div:nth-child(2){text-align: left;padding:2px 10px;}/* CPU标题 */
.tab-panel > ul > li > div:nth-child(n+3):nth-last-child(n+2) {padding:1px 2px 2px;text-align: center;}/* 第2到倒数第2居中 */
.tab-panel > ul > li:nth-child(n+2) > div:nth-child(2){padding:1px 10px 2px 0;}/*选择第二个li的第2个div,即cpu*/
.tab-panel > ul > li:nth-child(n+2) > div{height:50px;font-size:1.64rem;border-bottom: 1px solid #eee;background:#fff;}
.tab-panel > ul > li > div:nth-last-child(2){line-height:1.5;}/* 价格 */
.tab-panel > ul > li > div:nth-last-child(2) > span:nth-child(3){display:none;}/*价格,PC端隐藏季付年付*/
.tab-panel > ul > li > div:last-child {white-space: nowrap;min-width: auto;}/* 订购按钮 最后一列 最小宽度 防止撑大 */
}
@media(max-width:768px){
.tab-panel >ul > li:first-of-type {display: none;}/*隐藏第1个li*/
/*重新排列li下的div*/
.tab-panel > ul > li {display: flex;flex-direction: column;}
.tab-panel > ul > li > div {order: 3;}/* 默认所有 div 都排后面 */
.tab-panel > ul > li:nth-child(n+2) > div:first-child {order: 0;}/* 型号在最前 */
.tab-panel > ul > li > div:nth-last-child(2) {order: 1;padding:0 0 20px;font-size:3.4rem;font-family: 'Montserrat','Noto-sans-sc';color:#333;font-weight:600;}/* 价格，让它排第二 */
.tab-panel > ul > li > div:nth-last-child(2) > span:nth-child(1){padding:0 0 0 2px;font-size:3.4rem;letter-spacing: 0.04em;font-weight:600;} /* 价格 */
.tab-panel > ul > li > div:nth-last-child(2) > span:nth-child(2){padding:0 10px 0 0;}/* 价格 */
.tab-panel > ul > li > div:nth-last-child(2) > span:nth-child(2),
.tab-panel > ul > li > div:nth-last-child(2) > span:nth-child(3){font-size:1.68rem;letter-spacing: -0.02em;font-weight:400;}/* 价格 */
.tab-panel > ul > li > div:last-child {order: 4;}/* 最后一个按钮保持最后 */
/*产品型号*/
.tab-panel > ul > li:nth-child(n+2) > div:first-child{display: flex;justify-content: center;align-items: center;height:60px;font-family: 'Montserrat';font-weight:600;font-size:24px;text-size-adjust:100%;white-space: nowrap;color: #000;overflow: hidden;}/*型号*/
.tab-panel > ul > li:nth-child(n+2) > div:first-child > span:nth-child(1){letter-spacing: -0.08em;margin-right: 0.03em;} /*型号*/
.tab-panel > ul > li:nth-child(n+2) > div:first-child > span:nth-child(n+2) {margin:0 0.1em;}/*型号*/
.tab-panel > ul > li:nth-child(n+2):not(:last-child) {box-shadow: 0 0 3px 2px #eee;}/* 第2个到倒数第2个li阴影 */
.tab-panel > ul > li:last-child {box-shadow: 0 20px 20px -16px #eee, 0 0 3px 1px #eee;}/* 最后一个li双重阴影 */
/*选择li下第2-倒数第3个div, 产品配置*/
.tab-panel > ul > li:nth-child(n+2) > div:nth-child(n+2):nth-last-child(n+3) {box-sizing:border-box;margin:0 auto;width:90%;padding:0 0 3px;line-height:26px;font-size:1.68rem;font-weight:600;color:#333;text-align:left;font-family: 'Montserrat','Noto-sans-sc';}/*CPU、内存、到线路*/
.tab-panel > ul > li > div:last-child {padding:16px 0;}/*订购或复制按钮布局*/
/*设置每个产品模块样式*/
.tab-panel > ul > li:nth-child(n+2) {position:relative;margin:0 0 14px;padding:10px 0;border-radius:6px;background:#fff;}
.tab-panel > ul > li:nth-child(n+2) > div:nth-child(n+2):before {content:attr(data-type);display:inline-block;position:absolute;z-index:1;left:0;top:3px;padding:0 0 8px;font-weight:400;font-family:'Noto-sans-sc';font-size:1.6rem;color:#111;}/*处理器,内存,硬盘,带宽,ip: 标题*/
.tab-panel > ul > li:nth-child(n+2) > div:nth-child(n+2) > .current{left:60px;max-width:80%;}/*处理器,内存,硬盘,带宽,ip: 内容*/
}
.server-list li {position: relative; }
.option {display: inline-flex;position: relative;align-items: center;font-family: sans-serif;}
.option.has-menu {position: relative;}
/* 当前选项区 */
.current {display: inline-block;line-height:1.5;border-radius: 6px;position: relative;z-index: 3;background: transparent;cursor: default; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
/* 只在有 menu 的 option 里让鼠标变小手 */
.option.has-menu .current {cursor: pointer;} /* 有菜单才显示指针 */
.option.has-menu.open .current {background: #eee;}
.current::after {/* content: ""; 默认无内容 */ width:12px;}
.option:has(.option-menu) .current::after {content: "　";display: inline-block;width:12px;font-size:1rem;vertical-align: middle;pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpolyline points='112 184 256 328 400 184' stroke='%23333333' stroke-linecap='square' stroke-miterlimit='10' stroke-width='122'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size:76%;}
.option.has-menu.open .current::after { transform:rotate(180deg); }
@media(min-width:768px){
.current {padding: 4px 7px 4px 8px;height:24px;}
.option.has-menu .current:hover{background: #eee;}
.option:has(.option-menu) .current::after {background-position:3px 1px;}/*点击前背景图标位置*/
.option.has-menu.open .current::after {background-position:0 5.4px;}/*点击后背景图标位置*/
}
@media(max-width:768px){
.server-list li .option[data-type="处理器"] > .current {padding: 4px 7px 3px 8px;}
.tab-panel > ul > li:nth-child(n+2) > div:nth-child(n+3) .current {padding: 4px 7px 3px 8px;}
.option:has(.option-menu) .current::after {background-position:3px 1px;}/*点击前背景图标位置*/
.option.has-menu.open .current::after {background-position:0px 5.4px;} /*点击后背景图标位置*/
}
/* 不再用 ::before 遮罩整块区域 */
.option.has-menu::before {content: none;}
/* 下拉菜单 */
.option .option-menu {display: none;position: absolute;border: 1px solid #ddd; background: #fff;box-shadow: 0 2px 6px rgba(0,0,0,0.1);border-radius: 6px;z-index:9999;width: max-content;overflow-wrap: break-word; /* 允许换行 */}
.option .option-menu div {line-height:1.5; font-size: 1.6rem;text-align: left;cursor: pointer;}
.option .option-menu > div:not(:last-child) {border-bottom: 1px solid #eee;}
.option .option-menu > div:first-child {border-radius: 6px 6px 0 0;}
.option .option-menu > div:last-child {border-radius: 0 0 6px 6px;}
.option .option-menu div:hover {background: #f0f0f0;}
.option .option-menu div.selected::after {content: "　";padding:0;display: inline-block;width:22px;
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpolyline points='416 128 192 384 96 288' stroke='%2306a86c' stroke-linecap='square' stroke-miterlimit='10' stroke-width='66'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size:76%;background-position:6px 4px;}
@media(min-width:768px){
.option .option-menu {top:90%;left:0;}
.option .option-menu div {padding: 6px 10px;}
}
@media(max-width:768px){
.option-menu{max-width: 90vw;top:110%;}
.option-menu div:nth-child(1){padding:8px 10px 6px;}
.option-menu div {padding: 7px 10px 6px;white-space: normal; /* 允许内容换行 */ }
.server-list li .option[data-type="处理器"] > .current{word-break:break-all;/*英文强制换行*/ max-width:76%;}
.server-list li .option[data-type="处理器"] > .option-menu {box-sizing: border-box;margin:0 auto;left:0;right:0px;width:100%;text-align: justify;overflow-wrap: break-word;}/*处理器下拉菜单专用*/
.server-list li .option:nth-of-type(n+3) .option-menu {left:60px;max-width:80%;white-space: nowrap;}/*其它下拉菜单共享*/
}
/* 倒直角三角形 */
.option-menu::before {content: "";position: absolute;top: -5px;left:28px; width:8px;height:8px;background: #fff;border-left: 1px solid #ddd;border-top: 1px solid #ddd;transform: translateX(-50%) rotate(45deg);z-index:20;}.option-menu.hovering::before {background: #f0f0f0;}
.server-list li .option[data-type="处理器"] > .option-menu::before {left:30%;}/*CPU下拉菜单倒三角形位置*/
/*按钮*/
.copy-btn,.buy-btn {all: unset;padding:0 0 2px 0;width:43%;height:40px;display: inline-flex;align-items: center;justify-content: center;font-size:1.6rem;font-weight:500;text-decoration: none;cursor: pointer;box-sizing: border-box;border-radius:6px;}
.copy-btn {margin:0 6px 0 0;color:#333;border:#f0f0f0 2px solid;background:#f0f0f0;}
.copy-btn:hover{border:#EAEAEA 2px solid;color:#000;background:#EAEAEA;}
.buy-btn {color:#fff;border:#00c87f 2px solid;background:#00c87f;}
.buy-btn:hover{border:#10D88F 2px solid;color:#fff;background:#10D88F;}
@media (min-width:768px){
.copy-btn {margin:0 4px 0 0;}
.copy-btn,.buy-btn {width:48px;height:30px;font-size:1.34rem;}
}
/* 复制提示 */
.copy-tip::before {content: "配置已复制";}
.copy-tip {display:none; position:fixed;top:50%; left:50%;padding:12px 24px;font-size: 1.8rem;max-width: 90%;transform:translate(-50%,-50%); border-radius:6px;background:#333; color:#fff;z-index:99999;}