html,body{
    font-size: 62.5%;
    background: #000;
}
.clock{
    width: 700px;height: 700px;margin: 0 auto;position: relative;z-index: 6;padding-top: 50px;
}
.second{
    width: 502px;height: 502px;position: absolute;left: 20px;top: 20px;
    border-radius: 100%;
}
.second ul{
    width: 500px;height: 500px;position: relative;z-index: 8;
    border-radius: 100%;overflow: hidden;
    background: #293C55;
    /*transform: rotate(6deg);*/
}
.second ul li,.minute ul li,.hour ul li{
    height: 60px;position: absolute;z-index: 9;width: 16px;text-align: center;display: table;
    /*background: #273341;*/padding: 0 2px;
    transform-origin: 10px 0;
}
.second ul li span,.minute ul li span,.hour ul li span{
    display: table-cell;vertical-align: middle;width: 100%;height: 100%;font-size: 10px;color: #fff;
}
.minute{
    width: 380px;height:380px;position: absolute;left: 80px;top: 80px;z-index: 14;border-radius: 100%;
    transform: rotate(6deg);
    background: #273341;
}
.hour{
    width: 260px;height:260px;position: absolute;left: 140px;top: 140px;z-index: 14;border-radius: 100%;
    background: #62778d;
}
.day{
    width: 140px;height: 140px;position: absolute;left: 200px;top: 200px;z-index: 14;border-radius: 100%;
    background: #293C55;
}
.showRod{
    width: 20px;height: 250px;position: absolute;left: 240px;top: 0;z-index: 93;
    background: rgba(255,255,255,0.5);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;

}
.needle{
    width: 360px;height: 360px;border-radius: 100%;overflow: hidden;position: absolute;
    top: 70px;left: 70px;z-index: 12;
}