body, div, p {
	font-family: 'Microsoft Yahei';
	font-size: 14px;
}

.box {
	width: 400px;
	height: 400px;
	border: 10px solid #000000;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 3px #444 inset;
	position: relative;
	align-self: center;
	background: white;
	z-index: 9999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*原点*/
.origin {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	top: 190px;
	left: 190px;
	position: absolute;
	z-index: 30;
}

/* 指针 */
.clock_line {
	position: absolute;
	position: absolute;
	z-index: 20;
}

.hour_line {
	width: 100px;
	height: 4px;
	top: 198px;
	left: 200px;
	border-radius: 2px;
	transform-origin: 0 50%;
	box-shadow: 1px -3px 8px 3px #aaa;
}

.minute_line {
	width: 140px;
	height: 4px;
	top: 199px;
	left: 190px;
	border-radius: 2px;
	transform-origin: 7.692% 50%;
	box-shadow: 1px -3px 8px 1px #aaa;
}

.second_line {
	width: 170px;
	height: 2px;
	top: 199.5px;
	left: 180px;
	transform-origin: 11.765% 50%;
	box-shadow: 1px -3px 7px 1px #bbb;
}

.dot_box {
	width: inherit;
	height: inherit;
	border-radius: 50%;
}

/*时钟数*/
.dot {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	position: absolute;
}

.clock-scale {
	width: 195px;
	height: 2px;
	transform-origin: 0% 50%;
	z-index: 7;
	position: absolute;
	top: 199px;
	left: 200px;
}

.clock-scale-0 .scale-show {
	height: 3px;
	padding-bottom: 1px;
}

.scale-show {
	width: 12px;
	height: 2px;
	float: left;
}

.scale-hidden {
	width: 183px;
	height: 2px;
	float: left;
}

/*日期*/
.date_info {
	width: 180px;
	height: 28px;
	font-size: 15px;
	line-height: 28px;
	text-align: center;
	position: absolute;
	top: 250px;
	left: 120px;
	z-index: 11;
	color: #2a2a2a;
	font-weight: bold;
}

.time_info {
	width: 170px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	position: absolute;
	top: 270px;
	left: 125px;
	z-index: 11;
}

/* 默认主题start */
.dot {font-size: 2rem;}
.origin {background: #f60;}
.hour_line,.minute_line {background-color: #000;}
.second_line {background-color: #f60;}
.scale-show {background-color: #000;}
.date_info,.time_info {color: #000;}

.hour_line {
	box-shadow: 1px -3px 8px 3px #aaa;
}

.minute_line {
	box-shadow: 1px -3px 8px 1px #aaa;
}

.second_line {
	box-shadow: 1px -3px 7px 1px #bbb;
}
/* 默认主题end */

/* 主题3 - start */
.clock-box-theme-3{background: #225d60;border-color: #ca7752;box-shadow: 0px 0px 20px 3px #7e4b34 inset;}
.clock-box-theme-3 .dot {color: #fff;font-family: serif;font-size: 1.8rem;}
.clock-box-theme-3 .origin {background: #ca7752;}
.clock-box-theme-3 .hour_line,.clock-box-theme-3 .minute_line {background-color: #ca7752;}
.clock-box-theme-3 .second_line {background-color: #ca7752;}
.clock-box-theme-3 .scale-show {background-color: #fff;}
.clock-box-theme-3 .date_info,.clock-box-theme-3 .time_info {color: #fff;font-family: serif;font-size: 1.3rem;}
.clock-box-theme-3 .hour_line {
	box-shadow: 1px -3px 8px 3px #245254;
}

.clock-box-theme-3 .minute_line {
	box-shadow: 1px -3px 8px 1px #245254;
}

.clock-box-theme-3 .second_line {
	box-shadow: 1px -3px 7px 1px #245254;
}
/* 主题3 - end */


/* 主题4 - start */
.clock-box-theme-4{background: #fff;border-color: #fe9cab;box-shadow: 0px 0px 20px 3px #f6cdc9 inset;}
.clock-box-theme-4 .dot {color: #fe9cab;font-family: fantasy;font-size: 1.8rem;}
.clock-box-theme-4 .origin {background: #fe9cab;}
.clock-box-theme-4 .hour_line,.clock-box-theme-4 .minute_line {background-color: #fe9cab;}
.clock-box-theme-4 .second_line {background-color: #fe9cab;}
.clock-box-theme-4 .scale-show {background-color: #fe9cab;}
.clock-box-theme-4 .date_info,.clock-box-theme-4 .time_info {color:#fe9cab;font-family: fantasy;font-size: 1.2rem;}
.clock-box-theme-4 .hour_line {
	box-shadow: 1px -3px 8px 3px #ffeff1;
}

.clock-box-theme-4 .minute_line {
	box-shadow: 1px -3px 8px 1px #ffeff1;
}

.clock-box-theme-4 .second_line {
	box-shadow: 1px -3px 7px 1px #ffeff1;
}
/* 主题4 - end */

.clock-box-theme-2 {
	border-color: #880000;
}

.clock-box-theme-2 .origin {
	background: #880000;
}

/* 主题5 - start */
.clock-box-theme-5{background: #b4e1e1;border-color: #008972;box-shadow: 0px 0px 20px 3px #77908c inset;}
.clock-box-theme-5 .dot {color: #00b698;font-family: 宋体;font-size: 2rem;}
.clock-box-theme-5 .origin {background: #008972;}
.clock-box-theme-5 .hour_line,.clock-box-theme-5 .minute_line {background-color: #008972;}
.clock-box-theme-5 .second_line {background-color: #008972;}
.clock-box-theme-5 .scale-show {background-color: #00b698;}
.clock-box-theme-5 .date_info,.clock-box-theme-5 .time_info {color:#00b698;font-family: 宋体;font-size: 1.1rem;}
.clock-box-theme-5 .hour_line {
	box-shadow: 1px -3px 8px 3px #c0efef;
}

.clock-box-theme-5 .minute_line {
	box-shadow: 1px -3px 8px 1px #c0efef;
}

.clock-box-theme-5 .second_line {
	box-shadow: 1px -3px 7px 1px #c0efef;
}
.clock-box-theme-5 .clock-scale-0 .scale-show{
	height: 8px;
    padding-bottom: 0;
    border-radius: 8px;
    width: 8px;
    margin-top: -3px;
}
.clock-box-theme-5 .clock-scale-1 .scale-show,.clock-box-theme-5 .clock-scale-2 .scale-show,
.clock-box-theme-5 .clock-scale-3 .scale-show,.clock-box-theme-5 .clock-scale-4 .scale-show {
	width: 2px;
    height: 2px;
    border-radius: 2px;
}
/* 主题5 - end */

/* 主题6 - start */
.clock-box-theme-6 {background: #a8cae0;border-color: #0061bd;box-shadow: 0px 0px 20px 3px #778490 inset;}
.clock-box-theme-6 .dot {color: #0061bd;font-family: 宋体;font-size: 2rem;}
.clock-box-theme-6 .origin {background: #0061bd;}
.clock-box-theme-6 .hour_line,.clock-box-theme-6 .minute_line {background-color: #0061bd;}
.clock-box-theme-6 .second_line {background-color: #0061bd;}
.clock-box-theme-6 .scale-show {background-color: #0061bd;}
.clock-box-theme-6 .date_info,.clock-box-theme-6 .time_info {color:#0061bd;font-family: 宋体;font-size: 1.1rem;}
.clock-box-theme-6 .hour_line {
	box-shadow: 1px -3px 8px 3px #9ec0e0;
}

.clock-box-theme-6 .minute_line {
	box-shadow: 1px -3px 8px 1px #9ec0e0;
}

.clock-box-theme-6 .second_line {
	box-shadow: 1px -3px 7px 1px #9ec0e0;
}
.clock-box-theme-6 .clock-scale-0 .scale-show{
	height: 8px;
    padding-bottom: 0;
    border-radius: 8px;
    width: 8px;
    margin-top: -3px;
}
.clock-box-theme-6 .clock-scale-1 .scale-show,.clock-box-theme-6 .clock-scale-2 .scale-show,
.clock-box-theme-6 .clock-scale-3 .scale-show,.clock-box-theme-6 .clock-scale-4 .scale-show {
	width: 2px;
    height: 2px;
    border-radius: 2px;
}
/* 主题6 - end */

/* 主题7 - start */
.clock-box-theme-7 {background: #2f2e26;border-color: #2f2e26;box-shadow: 1px -3px 8px 3px #aaa;}
.clock-box-theme-7 .dot {color: #7fe9bc;font-family: Consolas;font-size: 2rem;}
.clock-box-theme-7 .origin {background: #7fe9bc;}
.clock-box-theme-7 .hour_line,.clock-box-theme-7 .minute_line {background-color: #7fe9bc;}
.clock-box-theme-7 .second_line {background-color: #7fe9bc;}
.clock-box-theme-7 .scale-show {background-color: #7fe9bc;}
.clock-box-theme-7 .date_info,.clock-box-theme-7 .time_info {color:#7fe9bc;font-family: Consolas;font-size: 1.1rem;}
.clock-box-theme-7 .hour_line {
	box-shadow: 1px -3px 8px 3px #2a624a;
}

.clock-box-theme-7 .minute_line {
	box-shadow: 1px -3px 8px 1px #2a624a;
}

.clock-box-theme-7 .second_line {
	box-shadow: 1px -3px 7px 1px #2a624a;
}
.clock-box-theme-7 .clock-scale-0 .scale-show{
	height: 8px;
    padding-bottom: 0;
    border-radius: 8px;
    width: 8px;
    margin-top: -3px;
}
.clock-box-theme-7 .clock-scale-1 .scale-show,.clock-box-theme-7 .clock-scale-2 .scale-show,
.clock-box-theme-7 .clock-scale-3 .scale-show,.clock-box-theme-7 .clock-scale-4 .scale-show {
	width: 3px;
    height: 2px;
    border-radius: 3px;
}
/* 主题7 - end */