/* ------------------------------------------
 * IT书包
 * 网址：www.itshubao.com
 * 整理：yinq<3331653644@qq.com> 
 -------------------------------------------- */
body{
	margin:0;
	color:#444;
	background:#4c2e58;
	font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.time-wrap,
.time-wrap .time-base,
.time-wrap .time-wheel,
.time-wrap .time-clock,
.time-wrap .time-wheel:before,
.time-wrap .time-wheel:after,
.time-wrap .time-clock .indicators,
.time-wrap .time-clock .indicators>div,
.time-wrap .time-clock .letters,
.time-wrap .time-clock .letters>div,
.time-wrap .time-clock .arrows,
.time-wrap .time-clock .arrows>div{
	top:50%;
	left:50%;
	position:absolute;
}
.time-wrap .time-belt:before,
.time-wrap .time-belt:after,
.time-wrap .time-wheel:before,
.time-wrap .time-wheel:after,
.time-wrap .time-clock .indicators:before,
.time-wrap .time-clock .letters>div:before,
.time-wrap .time-clock .letters>div:after,
.time-wrap .time-clock .arrows>div:before,
.time-wrap .time-clock .arrows .second:after{
	content:'';
	position:absolute;
}
.time-wrap{
	width:380px;
	height:380px;
	overflow:hidden;
	border-radius:50%;
	margin-top:-190px;
	margin-left:-190px;
	background:rgba(0,0,0,.2);
	-webkit-animation-duration:.4s;
	        animation-duration:.4s;
}
.time-wrap .time-base{
	width:180px;
	height:260px;
    margin-top:-130px;
	background:#dde5eb;
    margin-left:-90px;
	border-radius:100px / 30px;
	-webkit-animation-delay:.4s;
	        animation-delay:.4s;
	-webkit-animation-duration:.4s;
	        animation-duration:.4s;
}
.time-wrap .time-belt{
	z-index:1;
	margin:auto;
	width:150px;
	height:inherit;
	overflow:hidden;
	position:relative;
	background:#f7af76;
	border-radius:120px / 30px;
	-webkit-animation-delay:.6s;
	        animation-delay:.6s;
	-webkit-animation-duration:.6s;
	        animation-duration:.6s;
}
.time-wrap .time-belt:before,
.time-wrap .time-belt:after{
	width:40px;
	height:inherit;
	background:#743a6a;
}
.time-wrap .time-belt:before{left:0}
.time-wrap .time-belt:after{right:0}

.time-wrap .time-wheel{
	left:auto;
	right:45px;
	width:30px;
	height:30px;
	margin-top:-15px;
	background:#c7d9e3;
	border-radius:0 10px 10px 0;
	-webkit-animation-delay:1.6s;
	        animation-delay:1.6s;
	-webkit-animation-duration:.8s;
	        animation-duration:.8s;
}
.time-wrap .time-wheel:before{
	z-index:1;
	left:15px;
	width:6px;
	height:36px;
	margin-top:-18px;
	background:-webkit-linear-gradient(top, #ccdbe5, #ccdbe5 50%, #dde5eb 50%, #dde5eb);
	background:linear-gradient(to bottom, #ccdbe5, #ccdbe5 50%, #dde5eb 50%, #dde5eb);
	background-position:0;
	background-size:100% 4px;
}
.time-wrap .time-wheel:after{
	right:4px;
	left:auto;
	width:14px;
	height:40px;
	margin-top:-20px;
	background:#dde5eb;
	border-radius:0 8px 8px 0;
}
.time-wrap .time-clock{
	z-index:5;
	width:240px;
	height:240px;
	background:#fff;
	border-radius:50%;
	margin-top:-120px;
	margin-left:-120px;
	border:10px solid #dde5eb;
	box-shadow:0 0 0 5px #c7d9e3 inset,-6px 6px 0 0 rgba(0,0,0,.1);
	-webkit-animation-delay:1s;
	        animation-delay:1s;
	-webkit-animation-duration:.4s;
	        animation-duration:.4s;
}
.time-wrap .time-clock .indicators{
	width:210px;
	height:210px;
	margin-top:-105px;
	margin-left:-105px;
}
.time-wrap .time-clock .indicators:before{
	top:50%;
	left:50%;
	z-index:1;
	width:190px;
	height:190px;
	background:#fff;
	border-radius:50%;
	margin-top:-95px;
	margin-left:-95px;
}
.time-wrap .time-clock .indicators>div,
.time-wrap .time-clock .letters>div{
	height:1px;
	width:210px;
	margin-top:-0.5px;
	position:absolute;
	margin-left:-105px;
	border:1px solid #743a6a;
}
.time-wrap .time-clock .indicators>div:nth-child(2),
.time-wrap .time-clock .letters>div:nth-child(2){
	-webkit-transform:rotate(90deg);
	        transform:rotate(90deg);
}
.time-wrap .time-clock .indicators>div:nth-child(3),
.time-wrap .time-clock .letters>div:nth-child(3){
	-webkit-transform:rotate(120deg);
	        transform:rotate(120deg);
}
.time-wrap .time-clock .indicators>div:nth-child(4),
.time-wrap .time-clock .letters>div:nth-child(4){
	-webkit-transform:rotate(150deg);
	        transform:rotate(150deg);
}
.time-wrap .time-clock .indicators>div:nth-child(5),
.time-wrap .time-clock .letters>div:nth-child(5){
	-webkit-transform:rotate(210deg);
	        transform:rotate(210deg);
}
.time-wrap .time-clock .indicators>div:nth-child(6),
.time-wrap .time-clock .letters>div:nth-child(6){
	-webkit-transform:rotate(240deg);
	        transform:rotate(240deg);
}
.time-wrap .time-clock .letters{
	z-index:5;
	width:200px;
	height:200px;
	border-radius:50%;
	margin-top:-100px;
	margin-left:-100px;
}
.time-wrap .time-clock .letters>div{
	border:none;
}
.time-wrap .time-clock .letters>div:before,
.time-wrap .time-clock .letters>div:after{
	top:50%;
	width:20px;
	height:20px;
	font-size:12px;
	margin-top:-10px;
	text-align:center;
}
.time-wrap .time-clock .letters>div:before{left:15px}
.time-wrap .time-clock .letters>div:after{right:15px}
.time-wrap .time-clock .letters>div:nth-child(1):before{content:'9'}
.time-wrap .time-clock .letters>div:nth-child(1):after{content:'3'}
.time-wrap .time-clock .letters>div:nth-child(2):before,
.time-wrap .time-clock .letters>div:nth-child(2):after{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
.time-wrap .time-clock .letters>div:nth-child(2):before{content:'12'}
.time-wrap .time-clock .letters>div:nth-child(2):after{content:'6'}
.time-wrap .time-clock .letters>div:nth-child(3):before,
.time-wrap .time-clock .letters>div:nth-child(3):after{-webkit-transform:rotate(-120deg);transform:rotate(-120deg)}
.time-wrap .time-clock .letters>div:nth-child(3):before{content:'1'}
.time-wrap .time-clock .letters>div:nth-child(3):after{content:'7'}
.time-wrap .time-clock .letters>div:nth-child(4):before,
.time-wrap .time-clock .letters>div:nth-child(4):after{-webkit-transform:rotate(-150deg);transform:rotate(-150deg)}
.time-wrap .time-clock .letters>div:nth-child(4):before{content:'2'}
.time-wrap .time-clock .letters>div:nth-child(4):after{content:'8'}
.time-wrap .time-clock .letters>div:nth-child(5):before,
.time-wrap .time-clock .letters>div:nth-child(5):after{-webkit-transform:rotate(-210deg);transform:rotate(-210deg)}
.time-wrap .time-clock .letters>div:nth-child(5):before{content:'4'}
.time-wrap .time-clock .letters>div:nth-child(5):after{content:'10'}
.time-wrap .time-clock .letters>div:nth-child(6):before,
.time-wrap .time-clock .letters>div:nth-child(6):after{-webkit-transform:rotate(-240deg);transform:rotate(-240deg)}
.time-wrap .time-clock .letters>div:nth-child(6):before{content:'5'}
.time-wrap .time-clock .letters>div:nth-child(6):after{content:'11'}


.time-wrap .time-clock .arrows{
	z-index:5;
	width:220px;
	height:220px;
	margin-top:-110px;
	margin-left:-110px;
	-webkit-transform:rotate(90deg) scale(0);
	        transform:rotate(90deg) scale(0);
	-webkit-animation-delay:2s;
	        animation-delay:2s;
	-webkit-animation:showArrow .8s forwards;
	        animation:showArrow .8s forwards;
}
.time-wrap .time-clock .arrows>div{
	width:inherit;
	margin-left:inherit;
	-webkit-transition:all .4s ease-in-out 0s;
	transition:all .4s ease-in-out 0s;
}
.time-wrap .time-clock .arrows>div:before{
	height:inherit;
	background:#743a6a;
}
.time-wrap .time-clock .arrows .hour{
	height:8px;
	margin-top:-4px;
}
.time-wrap .time-clock .arrows .hour:before{
	left:40px;
	width:90px;
}
.time-wrap .time-clock .arrows .minute{
	height:5px;
	margin-top:-2.5px;
}
.time-wrap .time-clock .arrows .minute:before{
	left:10px;
	width:120px;
}
.time-wrap .time-clock .arrows .second{
	height:2px;
	margin-top:-1px;
}
.time-wrap .time-clock .arrows .second:before{
	left:15px;
	width:115px;
	background:#f7af76;
}
.time-wrap .time-clock .arrows .second:after{
	top:50%;
	left:50%;
	width:14px;
	height:14px;
	margin-top:-7px;
	margin-left:-7px;
	background:#f7af76;
	border-radius:50%;
	border:2px solid #dde5eb;
}
@-webkit-keyframes showArrow{
	0%{-webkit-transform:rotate(90deg) scale(0);transform:rotate(90deg) scale(0)}
	100%{-webkit-transform:rotate(90deg) scale(1);transform:rotate(90deg) scale(1)}
}
@keyframes showArrow{
	0%{-webkit-transform:rotate(90deg) scale(0);transform:rotate(90deg) scale(0)}
	100%{-webkit-transform:rotate(90deg) scale(1);transform:rotate(90deg) scale(1)}
}