

.rcourse
{
	padding-left:10px;
}


.ruser
{
	margin-top:50px;
	padding: 60px 60px;
}

.cards1tabs
{
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	margin: 0 0px;
	text-align:center;
	overflow:hidden;
}

.cards1tab
{
	width: 100px;
	padding: 10px 0;
	/*background: #fafafa;*/
	color: #777;
	margin: 5px 1px;
	overflow:hidden;
	position:relative;
	opacity:1;	border-bottom: 2px solid #5bd0;
}

.cards1tab:hover
{
	cursor:pointer;
	color: #5bd;
}

.cards1tab:active
{
	color: #5bd9;
}

.cards1tabSelected
{	border-bottom: 2px solid #5bd;

}
/*
.cards1tab:first-child
{
	border-radius:16px 0 0 16px;
}

.cards1tab:last-child
{
	border-radius:0 16px 16px 0;
}
*/
.cards1
{
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	margin: 0;
	
}

.card1-jl
{
	justify-content: left;
}

.card1-jr
{
	justify-content: right;
}

.card1-jm
{
	justify-content: center;
}

.card1
{
	width: 20%;
	height:300px;
	/*background: #fff;*/
	margin: 10px 0;
	/*border-radius:10px;*/
	
	position:relative;
	font-family:"Open Sans", sans-serif;
	opacity:0;
}

.card1Body
{
	margin: 0 10px;
	box-shadow:0 0 4px #9999;
	height:300px;	/*overflow:hidden;*/	border-radius:4px;
}

.card1t1
{
	position:absolute;
	bottom:40px;
	left:0;
	right:0;
	height: 80px;
	background:#fff;
	/*color:#666;*/
	text-align:center;
	/*font-size:12pt;*/
	padding: 10px;
}

.card1t1b
{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	margin:0 10px;
	text-align:center;
	padding:100px 0;
}

.card1Desc
{
	margin:0;	color:#777;
	padding:10px;
	height:249px;
	overflow:hidden;
}

.card1DescMask
{
	background: linear-gradient(to bottom, #fff0,#ffff);
	height: 40px;
	margin-top: -40px;
	z-index: 1000000;
	display: block;
	position: absolute;
	width: 100%;
	bottom:51px;
}

.card1aBtn
{
	background:#5dc;
	color:#f4f4f4;
	position:absolute;
	bottom:10px;
	left:50px;
	right:50px;
	text-align:center;
	padding: 10px;	border-radius:4px;	opacity:1;
}

.card1t2a
{
	position:absolute;
	top:0;
	left:0;
	width:auto;
	height: auto;
	background:#2d3741;
	color:gold;
	opacity:0.8;
	text-align:right;
	font-size:10pt;
	padding: 8px 20px;
}

.card1t2b
{
	position: absolute;	bottom: 2px;	width: auto;	height: 40px;	color: #ed4;	text-align: right;	font-size: 10pt;	padding: 10px;
}

.card1t3
{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background:#3338;
	color:#eee;
	text-align:right;
	font-size:10pt;
	padding: 10px 20px;
	height:40px;
}

.card1t3b
{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:40px;
	padding: 5px;
}

.card1i
{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:300px
}

.card1 img
{
	width:100%;
}

.card1a
{
	background-color:#fff;
	color: #eee;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	text-decoration:none;/*
	text-align:justify;
	text-justify:inter-character;*/
	box-shadow:0 0 4px #9999;	
}

.card1:hover .flipBody 
{
	transform:rotateY(180deg);
	transition:0.5s;
}


.cards2
{
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	margin: 0 -20px;
	justify-content: center;
}

.card2
{
	width: 300px;
	height:400px;
	background: #eee;
	margin: 20px 20px;
	overflow:hidden;
	border-radius:16px;
	position:relative;
	font-family:"Open Sans", sans-serif;
}

.card2i
{
	height:100%;
}

.card2t2b
{
	position:absolute;
	top:366px;
	right:0;
	left:0;
	height: auto;
	color:gold;
	opacity:0.8;
	text-align:left;
	font-size:10pt;
	padding: 8px 20px;
}

.card3
{
	width:calc(50% - 20px);	max-width:360px;
	height: 300px;
	background: #fff;
	box-shadow: 0 0 4px #9999;
	margin: 10px;
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	font-family: "Open Sans", sans-serif;
	opacity:0;
}

@media(max-width: 1440px) {

	.card1
	{
		width:33%;
	}

}

@media(max-width: 800px){
	.rcourse
	{
		padding-left:0px;
	}

	.card1-jm-m
	{
		justify-content: center;
	}


	.card1a:hover
	{
		opacity:inherit;
	}
	
	.card1aMS
	{
		transform: rotateY(180deg);
	}

	.card3
	{
		width:360px;
	}
	
	.card1
	{
		width: 100%;		height: 100px;
	}
	
	.card1Body
	{
		height:100px;		background:#fff;		
	}
	
	.card1:hover .flipBody 
	{
		transform:rotateY(0deg);
		transition:0.5s;
	}
	
	.card1i
	{
		width:100px;
		height:100px;
	}
	
	.card1t1
	{
		bottom:unset;
		top:0;
		left:100px;
		right:0px;
		text-align:left;
		padding:5px 10px;
	}
	
	.card1t3
	{
		left:90px;
		right:10px;
		padding:5px 0px;		height:28px;
		background:#0000;
		color:#3cb;
		
	}
	
	.card1t2a
	{
		left:unset;
		right:0;
		opacity:1;
		background:#0000;
		color:#5bd;
		padding: 8px 10px;
	}		.card1t2b	{		padding:5px 0px;		height:28px;		left:110px;	}
	
	.card1t3b
	{
		
	}		.card1aBtn	{		opacity:0;		left:0;		right:0;		bottom:0;		height:100%;	}
	
	.card1t1b
	{
		
		padding:0;
		opacity:0;
	}
}