/* ============================================================
   shizhong.css - 在线时钟样式
   页面：/shizhong/  结构：#clock > .clock-xin/.clock-xin2/#date/#hour/#min/#sec
   ============================================================ */
.box { display: flex; justify-content: center; padding: 20px 0; }
.clock {
    position: relative;
    width: 200px;
    height: 200px;
    border: 6px solid #444;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 8px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.2);
    margin: 0 auto;
}
/* 中心轴 */
.clock-xin, .clock-xin2 {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.clock-xin { width: 14px; height: 14px; background: #444; }
.clock-xin2 { width: 6px; height: 6px; background: #fff; }
/* 日期 */
.clock .date {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}
/* 指针（默认指向 12 点，由 JS rotate） */
.clock .hour, .clock .min, .clock .sec {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 4px;
}
.clock .hour {
    width: 6px;
    height: 50px;
    margin-left: -3px;
    background: #333;
    z-index: 5;
}
.clock .min {
    width: 4px;
    height: 70px;
    margin-left: -2px;
    background: #666;
    z-index: 6;
}
.clock .sec {
    width: 2px;
    height: 82px;
    margin-left: -1px;
    background: #c00;
    z-index: 7;
}