* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #ffffff; color: #111111; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; width: 100%; }
a { color: inherit; text-decoration: none; transition: all 0.25s ease; }
a:hover { color: #555555; }
.hardcontainer { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.hardnavbar { background-color: #ffffff; border-bottom: 2px solid #111111; position: relative; z-index: 1000; }
.hardnavinner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.hardlogo { display: flex; align-items: center; }
.hardlogo img { height: 38px; width: auto; max-width: 160px; object-fit: contain; }
.hardmenu { display: flex; align-items: center; list-style: none; }
.hardmenu li { margin: 0 4px; }
.hardmenu li a { font-size: 14px; font-weight: 700; color: #111111; padding: 8px 16px; display: inline-block; text-transform: uppercase; }
.hardmenu li a:hover, .hardmenu li.active a { background-color: #111111; color: #ffffff; }
.hardnotice { background: #f9f9f9; border: 1px solid #e5e5e5; border-left: 4px solid #111111; padding: 12px 18px; border-radius: 0; margin: 20px 0; font-size: 14px; color: #333333; display: flex; align-items: center; }
.hardnotice i { color: #111111; margin-right: 8px; font-size: 16px; }
.hardbadgeauto { display: inline-block; padding: 2px 8px; font-size: 11px; color: #ffffff; background: #111111; font-weight: bold; }
.hardbadgemanual { display: inline-block; padding: 2px 8px; font-size: 11px; color: #111111; background: #e5e5e5; font-weight: bold; }
.hardherowrap { display: flex; gap: 20px; margin-bottom: 25px; }
.hardheroleft { width: 45%; }
.hardheroright { width: 55%; }
.hardblackcard { background: #111111; color: #ffffff; border-radius: 0; padding: 25px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; }
.hardblackcard .hardfocusimg { background: #1a1a1a; }
.hardfocuscard { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 0; padding: 25px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; }
.hardfocuscard:hover { border-color: #111111; }
.hardfocusimg { width: 100%; height: 180px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; }
.hardfocusimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hardfocustitle { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.hardfocusprice { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.hardbtnblack { display: inline-block; padding: 8px 26px; background: #111111; color: #ffffff; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.hardbtnblack:hover { background: #333333; color: #ffffff; }
.hardblackcard .hardbtnblack { background: #ffffff; color: #111111; }
.hardblackcard .hardbtnblack:hover { background: #e5e5e5; }
.hardlinegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }
.hardlinecard { background: #ffffff; border: 1px solid #e5e5e5; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.hardlinecard:hover { border-color: #111111; }
.hardlineimg { width: 50px; height: 50px; background: #f9f9f9; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.hardlineimg img { max-width: 80%; max-height: 80%; object-fit: contain; }
.hardlinetitle { font-size: 13px; font-weight: 700; color: #111111; margin-bottom: 6px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hardlineprice { font-size: 16px; font-weight: 800; color: #111111; margin-bottom: 8px; }
.hardgridfour { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }
.hardwhitecard { background: #ffffff; border: 1px solid #e5e5e5; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; transition: all 0.3s; }
.hardwhitecard:hover { border-color: #111111; transform: translateY(-3px); }
.hardwhitecardimg { width: 100%; height: 130px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; }
.hardwhitecardimg img { max-width: 100%; max-height: 110px; object-fit: contain; }
.hardwhitecardtitle { font-size: 13px; font-weight: 700; color: #111111; margin-bottom: 6px; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.hardwhitecardprice { font-size: 17px; font-weight: 800; color: #111111; margin-bottom: 8px; }
.harddarkrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px; }
.harddarkcard { background: #111111; color: #ffffff; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.harddarkcard .hardwhitecardimg { background: #1a1a1a; }
.harddarkcardtitle { font-size: 14px; font-weight: 700; color: #ffffff; margin-bottom: 6px; height: 36px; overflow: hidden; }
.harddarkcardprice { font-size: 18px; font-weight: 800; color: #ffffff; margin-bottom: 10px; }
.hardfullbanner { background: #111111; color: #ffffff; padding: 25px 30px; margin-bottom: 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hardfullbannerimg { width: 100px; height: 90px; background: #222222; padding: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hardfullbannerimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hardfullbannerinfo { flex: 1; min-width: 0; }
.hardfullbannertitle { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 6px; }
.hardfullbannerprice { font-size: 24px; font-weight: 800; color: #ffffff; }
.harddensebox { background: #ffffff; border: 1px solid #e5e5e5; padding: 20px; margin-bottom: 35px; }
.harddenselist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.harddenseitem { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f9f9f9; border: 1px solid #e5e5e5; }
.harddenseitem:hover { border-color: #111111; background: #ffffff; }
.harddenseleft { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.harddenseleft img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; background: #fff; border: 1px solid #e5e5e5; }
.harddensetitle { font-size: 13px; font-weight: 700; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.harddenseright { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: 10px; }
.harddenseprice { font-size: 15px; font-weight: 800; color: #111111; }
.harddensebtn { padding: 4px 12px; background: #111111; color: #ffffff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.harddensebtn:hover { background: #333333; }
.hardfooter { background: #111111; color: #888888; border-top: 2px solid #111111; padding: 30px 0; margin-top: 40px; text-align: center; }
.hardfooterlinks { margin-bottom: 10px; }
.hardfooterlinks a { font-size: 14px; color: #ffffff; margin: 0 10px; }
.hardfooterlinks a:hover { color: #aaaaaa; }
.hardfootercopy { font-size: 13px; color: #666666; }
.harddetailwrap { background: #ffffff; border: 1px solid #e5e5e5; padding: 30px; margin: 25px 0; }
.harddetailrow { display: flex; gap: 35px; margin-bottom: 30px; }
.harddetailleft { width: 40%; }
.harddetailimgbox { width: 100%; height: 300px; background: #f9f9f9; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.harddetailimgbox img { max-width: 90%; max-height: 90%; object-fit: contain; }
.harddetailright { width: 60%; }
.harddetailtitle { font-size: 20px; font-weight: 800; color: #111111; margin-bottom: 12px; }
.harddetailpricebox { background: #111111; color: #ffffff; border-left: 4px solid #111111; padding: 15px 20px; margin-bottom: 20px; display: flex; align-items: baseline; justify-content: space-between; }
.harddetailprice { font-size: 26px; font-weight: 800; color: #ffffff; }
.harddetailstock { font-size: 13px; color: #aaaaaa; }
.harddetailform { margin-top: 15px; }
.harddetailitem { margin-bottom: 16px; }
.harddetaillabel { font-size: 13px; font-weight: 700; color: #111111; margin-bottom: 5px; display: block; text-transform: uppercase; }
.harddetailinput { width: 100%; height: 40px; border: 1px solid #cccccc; padding: 0 12px; font-size: 14px; color: #111111; outline: none; background: #ffffff; }
.harddetailinput:focus { border-color: #111111; }
.harddetailbtn { width: 100%; height: 45px; background: #111111; color: #ffffff; font-size: 16px; font-weight: 800; border: none; cursor: pointer; text-transform: uppercase; margin-top: 10px; }
.harddetailbtn:hover { background: #333333; }
.harddetailtabhead { border-bottom: 2px solid #111111; display: flex; margin-bottom: 20px; }
.harddetailtabtitle { font-size: 15px; font-weight: 800; color: #ffffff; background: #111111; padding: 8px 18px; text-transform: uppercase; }
.harddetailcontent { font-size: 14px; color: #444444; line-height: 1.8; }
.hardquerywrap { background: #ffffff; border: 1px solid #e5e5e5; border-top: 3px solid #111111; padding: 30px; margin: 25px auto; max-width: 650px; }
.hardquerytitle { font-size: 18px; font-weight: 800; color: #111111; text-align: center; margin-bottom: 20px; text-transform: uppercase; }
.hardquerytabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; border-bottom: 1px solid #e5e5e5; padding-bottom: 12px; }
.hardquerytabitem { font-size: 13px; font-weight: 700; color: #666666; padding: 6px 14px; background: #f9f9f9; }
.hardquerytabitem.active, .hardquerytabitem:hover { color: #ffffff; background: #111111; }
.hardqueryitem { margin-bottom: 18px; }
.hardquerylabel { font-size: 13px; color: #111111; margin-bottom: 6px; display: block; font-weight: 700; text-transform: uppercase; }
.hardqueryinput { width: 100%; height: 42px; border: 1px solid #cccccc; padding: 0 12px; font-size: 14px; outline: none; background: #ffffff; color: #111111; }
.hardqueryinput:focus { border-color: #111111; }
.hardquerybtn { width: 100%; height: 44px; background: #111111; color: #ffffff; border: none; font-size: 15px; font-weight: 800; cursor: pointer; text-transform: uppercase; }
.hardquerybtn:hover { background: #333333; }
@media (max-width: 991px) {
    .hardherowrap { flex-direction: column; }
    .hardheroleft, .hardheroright { width: 100%; }
    .hardlinegrid, .hardgridfour, .harddarkrow { grid-template-columns: repeat(2, 1fr); }
    .harddetailrow { flex-direction: column; }
    .harddetailleft, .harddetailright { width: 100%; }
    .harddenselist { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .hardlinegrid, .hardgridfour, .harddarkrow { grid-template-columns: 1fr; }
    .hardnavinner { flex-direction: column; height: auto; padding: 12px 0; gap: 8px; }
    .hardmenu { flex-wrap: wrap; justify-content: center; }
    .hardfullbanner { flex-direction: column; text-align: center; }
}