body {background-color: #eee;}
main {box-sizing: border-box;width: calc(100% - 24px); /*减去左右12px*2 */margin:12px auto;max-width: 1200px;padding:30px;border-radius: 8px;box-shadow: 0 0 2px rgba(0, 0, 0, 0.02);background: #fff;}
 /*产品型号*/
.prtitle{display: block;padding:0 0 16px;max-width:100%;box-sizing:border-box;text-align:left;text-align: justify;justify-content: space-around;word-break:break-all;line-height:1.2; font-weight:600;font-size:3.4rem;color:#343434;overflow: hidden;}
.server-list {list-style: none;}
.server-list > li > div {color:#111;}/*垂直居中内容*/
.server-list > li > div {text-align: left;} 
.group {margin-bottom:20px;display: flow-root;/*margin不重叠*/}
.group > div {box-sizing: border-box;}
.mod-a {display: flex;flex-wrap: wrap;column-gap: 20px;/*左右间距*/row-gap:0;/*上下间距*/}
.mod-a > div {width: calc((100% - 20px) / 2); /*每行2个*/}
.mod-d {display: flex;flex-wrap: wrap;column-gap: 30px;row-gap:0;}

/*菜单*/
.option {display: block;align-items: left;position: relative;margin:6px 0 24px;padding:0;}
.option.has-menu {position: relative;}
.config .option:before,.system:before,.billing-group:before {display: block;content:attr(data-type);margin:0 0 8px;padding:0 0 0 14px;width:100%;font-weight:500;font-size:1.8rem;line-height: 1.5;color:#000;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="4" height="14" style="fill:rgb(6,168,108)" /></svg>');background-size:100%;background-position:0 6px;}/*处理器,内存,硬盘,带宽,ip: 标题*/
.current {display: block;padding:8px 8px 8px 10px;border-radius:4px;font-weight:500;font-size:1.48rem;line-height: 1.5;background: transparent;cursor: default; /* 指针不变 */-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}/*处理器,内存,硬盘,带宽,ip: 内容*/
.option.has-menu .current {cursor: pointer;} /* 有菜单才显示指针 */
.option.has-menu .current:hover{background: #fff;}
.current::after { content: ""; /*默认无内容 */}

.option-menu div { white-space: normal; /* 允许内容换行 */ }
.server-list li .option[data-type="处理器"] > .current{word-break:break-all;/*英文强制换行*/}
.option .current{height:22px; border:#ddd 1px solid;  background:#FEFEFE;} 
.option:has(.option-menu) .current {background:#FEFEFE;}/* 有option-menu时 */
.option:not(:has(.option-menu)) .current {background:#F5F5F5;cursor:not-allowed;}/* 无option-menu时 */
.option .current::after {content: "　";display: inline-block;float:right;width:14px;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='%23666' stroke-linecap='square' stroke-miterlimit='10' stroke-width='40'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size:92%;}
.option .current::after {background-position:3px 5px;}/*点击前背景图标位置*/
.option.has-menu.open .current::after {transform:rotate(180deg);background-position:-1.8px -1px;}/*点击后背景图标位置*/
.option.has-menu.open .current {border:#ddd 1px solid;background: #fff;}/*点击之后样式*/
.config .option .option-menu {box-sizing: border-box;display:none;position: absolute;left:0;top:108%;width:100%;border: 1px solid #ddd; background: #fff;box-shadow: 0 2px 6px rgba(0,0,0,0.1);border-radius: 6px;z-index: 10;overflow-wrap: break-word; /* 允许换行 */}
.option .option-menu div {padding: 6px 10px;font-size: 1.48rem;line-height: 1.5;font-weight:500;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:only-child {border-radius: 6px;}/*一个div时*/
.option .option-menu > div:hover {background: #f0f0f0;}
.config .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;}
.system .option{margin-bottom:26px;padding:16px 20px 20px;border-radius:8px;background: #F6F6F6;}
.system .option .option-menu {box-sizing: border-box;display:none;position: absolute;left:20px;top:89%;width: calc(100% - 40px);border: 1px solid #ddd; background: #fff;box-shadow: 0 2px 6px rgba(0,0,0,0.1);border-radius: 6px;z-index: 10;overflow-wrap: break-word; /* 允许换行 */}
.system .option:before {display: block;content:attr(data-type);margin:0 0 16px;padding:2px 0 0 40px;font-weight:500;font-size:1.8rem;line-height: 1.5;color:#000;}/*系统选择*/
.system .option{background-repeat: no-repeat;background-size:8%;background-position:18px 16px;}
.system .option[data-type="Windows"] { background-image: url('os/windows.svg');}
.system .option[data-type="Centos"] {background-image: url('os/centos.svg');}
.system .option[data-type="Ubuntu"] {background-image: url('os/ubuntu.svg');}
.system .option[data-type="Debian"] {background-image: url('os/debian.svg');}
.system .option[data-type="RockyLinux"] {background-image: url('os/rockylinux.svg');}
.system .option[data-type="AlmaLinux"] {background-image: url('os/almalinux.svg');}
.system .option[data-type="ProxmoxVE"] {background-image: url('os/proxmoxve.svg');}
.option .choose {position: absolute;top: 0;right: 0;width:36px;height:36px;background: #06A86C;clip-path: polygon(100% 0, 100% 100%, 0 0); /* 右上角三角形 */
border-top-right-radius:8px;display: none; /* 默认隐藏 */z-index: 1;}
/* 对号（使用伪元素） */
.option .choose::after {content: "　";position: absolute;left:0;right:2px; top:2px;bottom: 0;z-index: 2;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='%23fff' stroke-linecap='square' stroke-miterlimit='10' stroke-width='66'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size:45%;background-position:18px 1px;}
.option .choose {display: none;}
.option.system-selected .choose {display: block;}
@media (min-width:768px) {
.mod-a,.mod-b,.mod-c {display: flex;flex-wrap: wrap;column-gap: 30px;/*左右间距*/row-gap:0;/*上下间距*/}
.mod-a > div {width: calc((100% - 90px) / 4); /*每行4个*/}
.mod-b > div {width: calc((100% - 30px) / 2); /*每行2个*/}
.mod-c > div {width: calc((100% - 60px) / 3); /*每行3个*/}
.system:before {margin:0 0 6px;}
.system .option{background-size:12%;background-position:16px 16px;}
.system .option:before {margin:0 0 20px;padding:6px 0 0 50px;font-size:1.88rem;line-height: 1.5;}
}
 
/* 倒直角三角形 */
.option-menu::before {content: "";position: absolute;top: -5px;left:10%; 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;}
/* 复制提示 */
.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:999;}
@media(min-width:768px){.copy-tip {font-size:1.6rem;}}
/*价格*/
.billing {margin-bottom:20px;padding:18px 0;border: 1px solid #F6F6F6;cursor: pointer;border-radius:6px;font-weight:500;font-size:1.6rem;color:#111;display: flex;justify-content: center;align-items: center;background: #F6F6F6;}
.billing.selected {border:1px solid #00c87f;background: #ECF7F3;}
.price {margin-left:-2px;font-size:3.6rem;line-height:0.9;color: #d9534f;display:block;font-weight:500;}
.price .unit {font-size:1.8rem;color: #333;margin-left:2px;font-weight:500;}
.origin {color: #999;text-decoration: line-through;text-decoration-thickness: 1.4px;font-size:2rem;margin-left:6px;}
.copyconfig{padding:16px 0 0;}
.copyconfig button{display: block;box-sizing: border-box;margin: 0;width: 100%;height:40px;font-size:1.6rem;line-height:1.5; font-weight:400;color:#fff;border:#00c87f 2px solid;border-radius:6px;background:#00c87f;cursor:pointer;}
.copyconfig button:hover{color:#fff;border:#008833 2px solid;} 
 @media (min-width:768px) {
.copyconfig{padding:12px 0 0;}
.copyconfig button{width:112px;height:46px;font-size:1.8rem;}
}