@charset "utf-8";
/* CSS Document */
body, div, span, img, ul, li, p {
	padding: 0;
	margin: 0;
}
li{
	list-style:none;
}
#wrapper {
	overflow: hidden;
	width: 495px;
	height: 210px;
	border: 3px solid #fd9705;
	box-sizing: border-box;
	background-color: #03752b;
	position: relative;
}
.right, .date, .mask {
	position: absolute;
	height: 100%;
	top: 0;
}
.date {
	width: 42px;
	margin: 0 0 2px 2px;
	color: #fff;
}
.date li {
	font: bold 11px/1.8 Verdana, Geneva, sans-serif;
	padding-right: 10px;
	text-align: right;
	margin-top: 4px;
	display: block;
	height: calc( 100% / 7 - 5px);
	border-bottom: 1px solid #FFF;
	border-right: 1px solid #FFF;
}
.sun {
	color: #F00;
}
.sat {
	color: #FC0;
}
.right {
	right: 0;
}
.main{
	width:380px;
	height:200px;
	left:47px;
	position:relative;
}

.mask {
	margin:0 auto;
	cursor:pointer;
	z-index:300;
}

.mask a, .mask ul, .mask li {
	display:block;
	overflow:hidden;
}
.mask li {
	position:absolute;
	animation:slide 28s 0s infinite;
	-moz-animation-play-state:running;
	-webkit-animation-play-state:running;
	animation-play-state:running;
}
.mask li span{
	vertical-align: top;
	position:absolute;
	color:#FFF;
	display:inline-block;
	left:0;
	width: 0;
    height: 0;
    border-left: 14px solid #03752b;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 14px solid transparent;
}
.mask li:nth-of-type(1){
	-moz-animation-delay:0s;
	-webkit-animation-delay:0s;
	animation-delay:0s;
}
.mask li:nth-of-type(2){
	-moz-animation-delay:4s;
	-webkit-animation-delay:4s;
	animation-delay:4s;
}
.mask li:nth-of-type(2) span{
	margin-top:29px;
}
.mask li:nth-of-type(3){
	-moz-animation-delay:8s;
	-webkit-animation-delay:8s;
	animation-delay:8s;
}
.mask li:nth-of-type(3) span{
	margin-top:59px;
}
.mask li:nth-of-type(4){
	-moz-animation-delay:12s;
	-webkit-animation-delay:12s;
	animation-delay:12s;
}
.mask li:nth-of-type(4) span{
	margin-top:88px;
}
.mask li:nth-of-type(5){
	-moz-animation-delay:16s;
	-webkit-animation-delay:16s;
	animation-delay:16s;
}
.mask li:nth-of-type(5) span{
	margin-top:118px;
}
.mask li:nth-of-type(6){
	-moz-animation-delay:20s;
	-webkit-animation-delay:20s;
	animation-delay:20s;
}
.mask li:nth-of-type(6) span{
	margin-top:147px;
}
.mask li:nth-of-type(7){
	-moz-animation-delay:24s;
	-webkit-animation-delay:24s;
	animation-delay:24s;
}
.mask li:nth-of-type(7) span{
	margin-top:176px;
}
.mask:hover .progress-bar,
.mask:hover li{
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
	animation-play-state:paused;
}
.progress-bar {
	background:rgba(0,0,0,1);
	height:5px;
	width:100%;
	position:absolute;
	z-index:100;
	bottom:0;
	left:0;
	-moz-animation:bar 12s linear infinite;
	-webkit-animation:bar 12s linear infinite;
	animation:bar 12s linear infinite;
}
/* keyframes for slide */
@-moz-keyframes slide {
	0% {top:110%; opacity:0;z-index:10;}
	10% {top:0%;opacity:1;}
	30% {top:0%;opacity:1;}
	33.3% {top:0%;opacity:0;}
	43.3% {top:-100%; z-index:0;}
	50% {top:0; opacity:0; z-index:-10;}
	70% {top:0; opacity:0; z-index:-10;}
	80% {top:100%; opacity:0; z-index:10;}
}
@-webkit-keyframes slide {
	0% {top:110%; opacity:0;z-index:10;}
	10% {top:0%;opacity:1;}
	30% {top:0%;opacity:1;}
	33.3% {top:0%;opacity:0;}
	43.3% {top:-100%; z-index:0;}
	50% {top:0; opacity:0; z-index:-10;}
	70% {top:0; opacity:0; z-index:-10;}
	80% {top:100%; opacity:0; z-index:10;}
}
@keyframes slide {
	0% {top:110%; opacity:0;z-index:10;}
	10% {top:0%;opacity:1;}
	30% {top:0%;opacity:1;}
	33.3% {top:0%;opacity:0;}
	43.3% {top:-100%; z-index:0;}
	50% {top:0; opacity:0; z-index:-10;}
	70% {top:0; opacity:0; z-index:-10;}
	80% {top:100%; opacity:0; z-index:10;}
}
/* keyframes for progress-bar */
@-moz-keyframes bar {
	0%,43.3%,76.6% {width:0;opacity:0;}
	10%,53.3%,86.6% {width:10%;opacity:0.5;}
	30%,63.3%,96.6% {opacity:1;}
	33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
	34%,67%,100% {width:100%;opacity:0;}
}
@-webkit-keyframes bar {
	0%,43.3%,76.6% {width:0;opacity:0;}
	10%,53.3%,86.6% {width:10%;opacity:0.5;}
	30%,63.3%,96.6% {opacity:1;}
	33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
	34%,67%,100% {width:100%;opacity:0;}
}
@keyframes bar {
	0%,43.3%,76.6% {width:0;opacity:0;}
	10%,53.3%,86.6% {width:10%;opacity:0.5;}
	30%,63.3%,96.6% {opacity:1;}
	33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
	34%,67%,100% {width:100%;opacity:0;}
}