html,body,address,div,dl,form,h1,h2,h3,h4,h5,h6,ol,p,table,ul,dd,dt,li,tbody,td,th,tr{margin:0;padding:0;font-family:'Hiragino Sans GB','Microsoft Yahei',"WenQuanYi Micro Hei",SimSun,Arial,Tahoma,Helvetica,STHeiti;font-size: 62.5%;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-size-adjust:none;}
img{-webkit-touch-callout:none;}
select{outline:none;appearance: none;color: #000;background-repeat:no-repeat; background-position:right 3px center;background-size:20px;}
/*滚动条样式 */
body::-webkit-scrollbar {width:8px;height:0;}body::-webkit-scrollbar-thumb {background-color: #C9C9C9;border-radius: 4px;}
body::-webkit-scrollbar-thumb:hover {background-color: #9F9F9F;}
body::-webkit-scrollbar-track {background-color: #fff;border-radius: 4px;}body::-webkit-scrollbar-track:hover {background-color: #E8E8E8;}
main{background-color: #fff;}
@media only screen and (min-width:768px){
main{width:1088px;}
.server-title {padding:0 0 43px;}
.server-details{margin:0 36px;padding:0 0 30px;gap:30px;}
.option-group{width:493px;}
.os-details,.price-details{margin:0 36px;}
.os-container {gap:30px;}
.os-group {width:278px;}
.option-group select,.os-group select{height:38px;}
.pricing-container {gap:30px;}
.pricing-box{font-size:1.8rem;}.price{margin:0 1px;font-size:2.2rem;}.currency {font-size: 1.6rem;}
main p{margin:0 36px;padding:20px 0 10px;line-height:2.6rem; font-size:1.4rem;color: #666;}
.order-now {font-size:1.6rem;padding: 13px 30px;}
.copy-tips{padding:20px;font-size:1.6rem;border-radius: 10px; }
}
@media only screen and (max-width:768px){
main{box-sizing:border-box;width:100%;overflow: hidden;}
.server-title {padding:0 0 36px;}
.server-details{margin:0;padding:0 0 20px;width:100%;gap:18px;}
.option-group{width:100%;}
.os-details,.price-details{margin:0;width:100%;}
.os-container {width:100%;gap:20px;overflow: hidden;}
.pricing-container{width:100%;gap:20px;overflow: hidden;}
.os-group {width:100%;}
.option-group select,.os-group select{height:42px;}
.pricing-box{width:100%;}
.pricing-box{font-size:2.2rem;}.price{margin:2px 1px 0;font-size:2.4rem;}.currency {font-size: 1.8rem;}
.button-container{width:100%;}
main p{margin:0;padding:20px 0;line-height:2.6rem; font-size:1.6rem;font-weight:200;color: #666;}
.order-now {padding: 13px 0;width:100%;font-size:1.8rem;}
.copy-tips{padding:30px;width:50%;font-size:2rem;font-weight:300;border-radius:18px; }
}
.server-title {margin:0;font-size:3.4rem;font-weight:500;color: #000;text-align:center;}
.server-details {display: flex;flex-wrap: wrap;justify-content: left;}
.option-group{margin:0;padding:0;height:80px;overflow:hidden;}
.option-group strong,.os-details strong,.price-details strong{display:block;padding:0 0 8px 16px;font-size:1.8rem;font-weight:500;color: #000;line-height:28px;background-image:url('data:image/svg+xml;utf8,');background-size:100%;background-position:0 6px;}
.option-group select {margin:0;padding:9px;width:100%;border:1px solid #ccc;border-radius:6px;font-size:1.6rem;}
select:disabled {cursor: not-allowed;background-color: #F6F6F6;background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23888888%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E');}
select:not(:disabled) {cursor: pointer;background-color: #fff;background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"%3E%3C/path%3E%3C/svg%3E');}
.hardDrive1,.hardDrive2,.hardDrive3{position: relative;display:inline-block;}#hardDrive1,#hardDrive2,#hardDrive3{position: relative;z-index:1;}
.delete-btn {position: absolute;top:42.5px;right:26px;z-index:2;padding:3px 7px;border: none;font-size:14px;color: #fff;border-radius:5px;background: #d9534f;cursor: pointer;}
.delete-btn:hover {background: #c9302c;}
.option-group option.placeholder, .os-group option.placeholder{display: none; /* 隐藏提示选项 */}
.placeholder-text {color: #999;}
.checkmark {display: inline-block;position: absolute;z-index:1;top:0;right:0;width:0;height:0;border-top:38px solid #06A86C; border-left:38px solid transparent;border-radius:0 8px 0 0;}
.checkmark::after {content: "";position: absolute;top:-35px;right:2px;width:18px; height:18px;background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M9 16.2l-3.5-3.5-1.4 1.4 4.9 4.9 12-12-1.4-1.4z"/%3E%3C/svg%3E');background-size: contain;background-repeat: no-repeat; }
.os-container {display: flex;flex-wrap: wrap;justify-content: left;padding:0 0 30px;}
.os-group {position: relative;z-index:3;padding:16px 20px 20px;border-radius:8px;/* box-shadow: 0 0.5px 4px -1px rgb(0 0 0 / 8%), 0 2.6px 8px -1px rgb(0 0 0 / 6%), 0 5.7px 12px -1px rgb(0 0 0 / 2%), 0 7px 7px -1px rgb(0 0 0 / 2%); */background: #F6F6F6;}
.os-group h3{margin: 0 0 14px;padding:0 0 0 60px;height: 48px;line-height: 48px;font-size:2rem;font-weight:500;color: #000;background-size: contain;background-repeat: no-repeat;}
.os-group:nth-child(1) h3{background-image: url('os/windows.svg');}
.os-group:nth-child(2) h3{background-image: url('os/centos.svg');}
.os-group:nth-child(3) h3{background-image: url('os/ubuntu.svg');}
.os-group:nth-child(4) h3{background-image: url('os/debian.svg');}
.os-group:nth-child(5) h3{background-image: url('os/rockylinux.svg');}
.os-group select {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius:6px;font-size: 16px;color: #555;cursor: pointer;}
/*价格*/
.pricing-container {display: flex;flex-wrap: wrap;justify-content: left;padding:0 0 20px;}
.pricing-box {background-color: #e9f7ec;border-radius:8px;padding:.3rem 2.6rem;height:65px;display: flex;justify-content: center;align-items: center;text-align: center;gap:2px;font-weight:500;}
.price {color: #06A86C;letter-spacing:-1px;}
.currency {color: #333;margin:4px 0 0;}
.price span {font-weight: bold;}
/*按钮*/
.button-container {position: relative;display: inline-block;}
.order-now {margin:0;text-align: center;border: none;border-radius:8px;color: #fff;text-decoration: none;letter-spacing:1px;display: inline-block; position: relative; z-index: 1; outline: none;background-color: #06A86C;cursor: pointer;}
.order-now:hover {background-color: #038952;}
.order-now::after {content: '';position: absolute;top: -3px;left: -3px;right: -3px;bottom: -3px;border: 3px solid #A2DDC3;border-radius:11px;z-index: 0;opacity: 0;transition: opacity 0.5s ease, transform 0.5s ease;}
.order-now:active::after {opacity: 1;transform: scale(1);}
.copy-tips{display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; z-index: 1000; text-align: center;}