@import "common.css?d=3";
/* youtube */
.youtube{
	font-size:1.5em;font-weight:bold;text-align:center;text-shadow:1px 1px 0px #8899aa;
	color:#223344;background-color:#aabbcc;
	padding:30px 0px;line-height:2.5rem;
}
/* page */
.page{width:100%;padding-top:35px;padding-bottom:45px;}
.light{background-color:#dddddd;}
.dark{background-color:#bbc0c3;}
/* event */
.event{
	display:block;
	padding:15px 0px;
	text-align:center;
	background-color:#ffffe0;
	color:#666644;
	line-height:1.75em;
}
.event>.lead-text{
	font-weight:bold;
	margin-right:10px;
}
.event>br{
	display:none;
}
@media (max-width:500px){
	.event>.lead-text{
		margin-right:0px;
	}
	.event>br{
		display:block;
	}
}
/* welcome page setting */
.welcome{height:300px;max-height:40vh;background-image:url(/imgs/welcome0.jpg);background-position:center center;transition:opacity 0.8s;}
.welcome .slogan{font-size:2em;color:#ffffff;text-shadow:0px 0px 10px #000000;padding-top:70px;line-height:60px;transition:opacity 0.8s;}
@media (max-width:500px){
	.welcome{
		background-position:50% center;
	}
}
/* subject */
.view>.subject{
	display:block;margin-top:20px;margin-bottom:40px;
	text-shadow:1px 1px 0px #888888;
	font-size:1.4em;font-weight:bold;
}
.view>.sub-subject{
	margin-bottom:25px;font-size:1.2em;
}
/* cwpeng */
.view>.cwpeng{
	display:flex;justify-content:center;align-items:center;
}
.view>.cwpeng>img.picture{
	border-radius:50%;width:400px;max-width:90%;margin:10px;
}
.view>.cwpeng>.experience{
	line-height:35px;width:400px;max-width:90%;margin:10px;
}
.view>.cwpeng>.experience>div{
	width:100%;overflow:hidden;white-space:nowrap;
}
@media (max-width:800px){
	.view>.cwpeng{
		flex-wrap:wrap;
	}
}
/* content block */
.view>.block{
	display:inline-block;width:500px;max-width:95%;vertical-align:top;
}
.view>.block>.title{
	margin:5px 0px;
	font-weight:bold;font-size:1.2em;text-shadow:1px 1px 0px #888888;
}
.view>.block>.title>img{
	width:64px;height:64px;
}
.view>.block>.content{
	line-height:35px;padding:10px;
}
.view>.block>.content>.separator{height:0px;border-top:1px dashed #888888;margin:25px auto;width:20%;}
.view>.block>.content a:hover{text-decoration:underline;}
.view>.join{margin:20px 0px;line-height:30px;font-weight:bold;}
.view>.join>.cta{margin-top:20px;}
/* careers */
.view>.careers{
	width:90%;margin:0px auto;
	display:flex;justify-content:center;flex-wrap:wrap;
}
.view>.careers>.career{
	display:block;
	flex:none;line-height:35px;
	width:40%;margin:0px 20px;
	padding-bottom:25px;
}
.view>.careers>.career>.title{
	margin-bottom:10px;
	font-weight:bold;font-size:1.2em;
}
@media (max-width:1200px){
	.view>.careers>.career>.description>br{
		display:none;
	}
}
@media (max-width:600px){
	.view>.careers>.career{
		width:90%;
	}
}
/* features */
.view>.features{
	width:95%;margin:0px auto;
	display:flex;justify-content:center;
}
.view>.features>.feature{
	display:block;
	flex:none;line-height:35px;
	width:30%;margin:0px 20px;
	padding-bottom:25px;
}
.view>.features>.feature>.title{
	margin-bottom:10px;
	font-weight:bold;font-size:1.2em;
}
@media (max-width:600px){
	.view>.features{
		flex-wrap:wrap;
	}
	.view>.features>.feature{
		width:90%;
	}
}
/* course tree */
.view>.course-tree{width:90%;margin:0px auto;position:relative;}
.view>.course-tree>img{width:100%;}
.view>.course-tree>a.link{position:absolute;width:21%;height:15%;display:block;z-index:1;}
@media (max-width:600px){
	.view>.course-tree{width:100%;}
}
/* .view>.profiles */
.view>.profiles{
	display:flex;justify-content:center;flex-wrap:wrap;
}
.view>.profiles>.profile{
	display:flex;flex-direction:column;
	width:22%;margin:1%;background-color:#eeeeee;
	height:300px;max-height:300px;
}
.view>.profiles>.profile>.picture{
	flex:none;height:110px;background-color:#c8c8c8;
}
.view>.profiles>.profile>.picture>.avatar{
	width:120px;height:120px;object-fit:cover;
	position:relative;top:20px;border-radius:50%;
}
.view>.profiles>.profile>.nickname{
	flex:none;padding-top:40px;text-align:center;
}
.view>.profiles>.profile>.description{
	flex:auto;overflow:hidden;text-overflow:ellipsis;
	margin:15px 0px;padding:0px 15px;
	line-height:1.5em;text-align:left;
	color:#444444;font-size:0.9em;
}
.view>.profiles>.profile>.current{
	flex:none;height:30px;padding:0px 15px;
	font-size:0.8em;display:flex;justify-content:center;align-items:center;
}
.view>.profiles>.profile>.current>.title, .view>.profiles>.profile>.current>.company{
	margin:0px 5px;white-space:nowrap;overflow-x:hidden;
}
@media (max-width:1000px){
	.view>.profiles{
		flex-wrap:wrap;
	}
	.view>.profiles>.profile{
		width:45%;margin:2%;
	}
}
@media (max-width:500px){
	.view>.profiles>.profile{
		width:90%;
	}
}
/* .view>.premium */
.view>.premium{
	margin-top:10px;margin-bottom:30px;
}
.view>.premium>.title{font-size:1.4em;font-weight:bold;text-shadow:1px 1px 0px #888888;margin-bottom:20px;}
.view>.premium>.price{font-size:1.2em;font-weight:bold;}
.view>.premium>.description{padding-top:15px;}
/* .view>.courses */
.view>.courses{
	display:flex;flex-wrap:wrap;justify-content:center;
	line-height:35px;text-align:left;margin:25px 0px;
}
.view>.courses>.course{
	width:calc(90% - 30px);
	margin:10px 0px;padding:10px 15px;
	padding-bottom:20px;
	border:1px solid #bbbbbb;
	background-color:#cbcbcb;
}
.view>.courses>.course a:hover,
.view>.courses>.course a:active{
	text-decoration:underline;
}
.view>.courses>.course>.title{
	display:flex;align-items:center;
	margin-bottom:10px;font-weight:bold;font-size:1.2rem;
}
.view>.courses>.course>.title>img{
	width:30px;height:30px;margin-right:10px;
}
.view>.courses>.course>.keypoints-list{
	display:flex;align-items:flex-start;flex-wrap:wrap;
}
.view>.courses>.course>.keypoints-list>.keypoints{
	flex:none;width:400px;max-width:90%;
}
.view>.courses>.course>.links{
	display:flex;justify-content:flex-end;align-items:center;
}
.view>.courses>.course>.links>.link{
	margin-left:15px;text-decoration:underline;
}
@media (max-width:500px){
	.view>.courses>.course>.title{
		font-size:1rem;
	}
}