@charset "utf-8";
/* CSS Document */
.front-box{
	float: left;
	position: relative;
	width: 27rem;
	font-family: 'Roboto', sans-serif;
	font-size: 19px;
	font-size: 1.9rem;
	font-weight: 600;
	color: #fff;
	}
.front-box .triangle{
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: absolute;
	top: 5.2rem;
	left: -0.6rem;
	}	
.front-box .play-button {
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.6);
	width: 3.5rem;
	height: 3.5rem;
	border: 0.6rem solid #fff;
	position: absolute;
	z-index: 40;
	top: 5.7rem;
	left: 50%;
	margin-left: -23.5px;
	}
.front-box .play-button .triangle-90{
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 15px solid #fff;
	position: relative;
	top: 25%;
	left: 35%;
	}

.front-box .wdgimg {
	display: none;
	}
.front-box a{
	display: block; 
	position: relative;
	color: #fff;
	}
.front-box a.film {
	display: initial;
	position: initial;
	}
.front-box a.text{
	position: absolute;
	z-index: 30;
	top: 1.5rem;
	left: -0.6rem;
	z-index: 40;
	}
.front-box a.text span {
	position: relative;
	display: inline-block;
	overflow: hidden;
	line-height: 3.7rem;
	padding: 0 2rem;	
}
.front-box a.text span.orange {
	background-color: #fcc400;
	box-shadow: 1px 2px #7d6202;
	}
.front-box .triangle.border-orange{
	border-top: 12px solid #b87604;
	}
.front-box a.text span.violet {
	background-color: #b681f2;
	box-shadow: 1px 2px #6f3ea6;
	}
.front-box .triangle.border-violet{
	border-top: 12px solid #3b0578;
	}
.front-box a.text span.green {
	background-color: #b7e586;
	box-shadow: 1px 2px #4e7426;
	}
.front-box .triangle.border-green{
	border-top: 12px solid #527e23;
	}
.front-box a .canvas-img {
	position: relative;
	z-index: 20;
	}
.front-box a .canvas-shadow {
	position: absolute;
z-index: 10;
left: 0.8rem;
top: 0.5rem;
	}