html{
	background: #00065b url('../img/bg.jpg') center top;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    height:100%;
}
body{
	font: 14px/1.6 arial,sans-serif;
	/*background: rgba(0, 0 ,0, 0.86);*/
	background: rgba(0, 0 ,0, 0.42);
	height:100%;
	
}
*{
	margin:0;
	padding:0;
}
.main{}
.main-body{
	width:760px;
	margin:auto;
	padding:100px 0 0;
	padding-top:calc(50vh - 300px);
}
.main-body:after{
	clear:both;
	content:"";
	display:block;
	height:0;
}
.main-body .row.r_2 .col{
	position: relative;
    float: left;
	width:30%;
	margin-top:4%;
}
.main-body .row.r_2 .col + .col{
	margin-left:4%;
}
.main-body .bgcolor1 {
    background-color: #f97152;/*rgba(243,77, 35, 0.9);*/
}
.main-body .bgcolor2 {
    background-color: #bc90f8;/*rgba(130,184, 2, 0.9);*/
}
.main-body .bgcolor3 {
    background-color: #08bdb4;/*rgba(2,164, 239, 0.9);*/
}
.main-body .bgcolor4 {
    background-color: #3caff7;/*rgba(254,183, 3, 0.9);*/
}
.main-body .bgcolor5 {
    background-color: #fc9438;/*rgba(254,183, 3, 0.9);*/
}
.main-body .bgcolor6 {
    background-color: #8493f0;/*rgba(254,183, 3, 0.9);*/
}
.main-body .bgcolor7 {
    background-color: #2698ce;/*rgba(254,183, 3, 0.9);*/
}
.main-body .col-box{
	border-radius:4px;
	position:relative;
}
.main-body .main-heard{
	padding:0 15px 0 0;
	color:#fff;
	font-size:30px;
}
.main-body .main-heard img{
	height:50px;
	vertical-align: top;
}
.main-body .col-box a{
	display:block;
	padding:22px 20px;
	color:#fff;
	text-align:center;
	cursor:pointer;
	border-radius:4px;
	transform:rotateX(0deg) rotateY(0deg);
	transform-style:preserve-3d;
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-webkit-transform-style:preserve-3d;
	/*-webkit-backface-visibility:hidden;*/
	-moz-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform-style:preserve-3d;
	/*-moz-backface-visibility:hidden;*/
	-o-transition:all .4s ease-in-out;
	-ms-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
}
.main-body .col-box:hover a{
	transform: scale(1.06);
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	/*box-shadow: 0 0 26px rgba(205, 205, 205, 0.45);*/
}
.main-body .col-box:hover a span{
	ransform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
}
.main-body .col-box a i{
	display:block;
	padding-bottom:10px;
}
.main-body .col-box a i img{
	width:50px;
	height:50px;
}
.main-body .col-box:hover a i img{
	transform: scale(1.2);
}
.main-body .col-box a span{
	font-size:20px;
}
.main-body .col-box section:hover{
	z-index:11;
	animation: myopacity 1s ease-in-out 
	-moz-animation: myopacity 1s ease-in-out; 
	-webkit-animation: myopacity 1s ease-in-out; 
	-o-animation: myopacity 1s ease-in-out;
	opacity: 1;
}
.main-body .col-box section{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:4px;
	background: rgba(140, 140, 140, 0.9);
	text-align:center;
	opacity: 0;
	
}
.main-body .col-box section > span{
	margin:40% auto 0 auto;
	width:80%;
	display:block;
	line-height:36px;
	border-radius:20px;
	font-size:18px;
	color:#eee;
	border:1px solid #eee;
	cursor:pointer;
}
@keyframes myopacity {

from { opacity: 0; }

to { opacity: 1; }

}