body{
	width: 100%;
	height: 100%;
	margin: 0px 0px 0px 0px;
	font-family: 'Noto Sans CJK TC', 'Source Sans Pro', sans-serif;
	background-color: #FFF;
}

li{
	padding-bottom: 3px;
}

p{
	font-size: 1.2em;
	line-height: 1.4em;
	width: 100%;
	margin: .2em 0 0 0;
}

b{
	font-size: 1.1em;
}

h1{
	line-height: 1.5em;
}

pre{
	font-size: 1.2em;
	line-height: 1.6em;
}

.container{
	display: table;
}

#content_nobg_index{
	width: 100%;
    margin: 0px 5%;
    padding: 0 5% 100px 5%;
    display: table-cell;
    vertical-align: middle;
}

#knowledge_none{
	color: #FFF;
	background: #555;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}
 
#knowledge_competency{
	color: #FFF;
	background: url(../img/knowledge_competency.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}
#knowledge_logic{
	color: #FFF;
	background: url(../img/knowledge_logic.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}
#knowledge_time{
	color: #FFF;
	background: url(../img/time_1.jpg) center top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_talent{
	color: #FFF;
	background: url(../img/talent_0.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}
#knowledge_poll{
	color: #FFF;
	background: url(../img/knowledge_poll.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}
#knowledge_read{
	color: #FFF;
	background: url(../img/knowledge_read.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_problem{
	color: #FFF;
	background: url(../img/knowledge_problem.jpg) repeat bottom;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_teaching{
	color: #FFF;
	background: url(../img/knowledge_teaching.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_speak{
	color: #FFF;
	background: url(../img/knowledge_speak.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_focus{
	color: #FFF;
	background: url(../img/knowledge_focus.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_charm{
	color: #FFF;
	background: url(../img/knowledge_charm.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_briefing{
	color: #FFF;
	background: url(../img/knowledge_briefing.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}
#knowledge_formula{
	color: #FFF;
	background: url(../img/knowledge_formula.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_numbers{
	color: #FFF;
	background: url(../img/knowledge_head_numbers.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_president{
	color: #FFF;
	background: url(../img/knowledge_head_president.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_brain_head{
	color: #FFF;
	background: url(../img/knowledge_brain_head.jpg) repeat bottom;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_brain_attention{
	color: #FFF;
	background: url(../img/knowledge_brain_attention.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_imaginative{
	color: #FFF;
	background: url(../img/apply_imaginative.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_case{
	color: #FFF;
	background: url(../img/knowledge_apply_case.jpg) repeat center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_express{
	color: #FFF;
	background: url(../img/knowledge_apply_express.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_leadership{
	color: #FFF;
	background: url(../img/knowledge_apply_leadership.jpg) repeat bottom;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_performance{
	color: #FFF;
	background: url(../img/knowledge_head_none.jpg) repeat top left;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_sense{
	color: #FFF;
	background: url(../img/apply_sense.jpg) repeat bottom;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_brila{
	color: #FFF;
	background: url(../img/knowledge/knowledge_brila.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_analysis{
	color: #FFF;
	background: url(../img/knowledge/logic_analysis.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_flip{
	color: #FFF;
	background: url(../img/knowledge/logic_flip.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_brila{
	color: #FFF;
	background: url(../img/knowledge/apply_brila.jpg) repeat top;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_performance{
	color: #FFF;
	background: url(../img/knowledge/apply_performance.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_combat{
	color: #FFF;
	background: url(../img/knowledge/apply_combat.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
	
}

#knowledge_apply_functions{
	color: #FFF;
	background: url(../img/knowledge/apply_functions.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_problem_question{
	color: #FFF;
	background: url(../img/knowledge/apply_problem_question.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_sell{
	color: #FFF;
	background: url(../img/knowledge/apply_sell.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_bullying{
	color: #FFF;
	background: url(../img/knowledge/apply_bullying.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_consensus{
	color: #FFF;
	background: url(../img/knowledge/apply_consensus.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_training{
	color: #FFF;
	background: url(../img/knowledge/apply_training.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_behavior{
	color: #FFF;
	background: url(../img/knowledge/apply_behavior.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_sense{
	color: #FFF;
	background: url(../img/knowledge/apply_sense.jpg) center;
	background-size: cover;
	margin-top: 100px;
	display: table;
	color: #FFF;
}

#knowledge_apply_school{
	color: #FFF;
	background: url(../img/knowledge/apply_school.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#knowledge_apply_password{
	color: #FFF;
	background: url(../img/knowledge/apply_password.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#knowledge_apply_gap{
	color: #FFF;
	background: url(../img/knowledge/apply_gap.jpg) bottom;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#knowledge_apply_competency{
	color: #FFF;
	background: url(../img/knowledge/apply_competency.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#knowledge_apply_hr1{
	color: #FFF;
	background: url(../img/knowledge/apply_hr1.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#knowledge_apply_hr2{
	color: #FFF;
	background: url(../img/knowledge/apply_hr2.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#knowledge_unity{
	color: #FFF;
	background: url(../img/knowledge/knowledge_unity.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#logic_thinking{
	color: #FFF;
	background: url(../img/knowledge/logic_thinking.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}

#logic_Intuitive{
	color: #FFF;
	background: url(../img/knowledge/logic_Intuitive.jpg) center;
	background-size: cover;
	margin-top: 100px;
	color: #FFF;
}


#logic_Intuitive h2,
#knowledge_unity h2,
#knowledge_apply_hr1 h2,
#knowledge_apply_hr2 h2,
#knowledge_apply_gap h2,
#knowledge_apply_school h2,
#knowledge_apply_consensus h2,
#knowledge_apply_training h2,
#knowledge_apply_sell h2,
#knowledge_apply_problem_question h2,
#knowledge_apply_functions h2,
#knowledge_apply_combat h2,
#knowledge_apply_performance h2,
#knowledge_apply_brila h2,
#knowledge_apply_express h2,
#knowledge_apply_case h2,
#knowledge_imaginative h2,
#knowledge_brain_attention h2,
#knowledge_brain_head h2,
#knowledge_president h2,
#knowledge_numbers h2,
#knowledge_formula h2,
#knowledge_briefing h2,
#knowledge_charm h2,
#knowledge_focus h2,
#knowledge_speak h2,
#knowledge_teaching h2,
#knowledge_problem h2,
#knowledge_read h2,
#knowledge_poll h2,
#knowledge_talent h2,
#knowledge_time h2,
#knowledge_logic h2,
#knowledge_competency h2{
	color: #FFF;
}

#bullying {
    margin-top: 25px;
    background: url(../img/knowledge/apply_bullying_2.jpg) fixed center;
    background-size: cover;
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);
}

#apply_competency_2 {
    margin-top: 25px;
    background: url(../img/knowledge/apply_competency_2.jpg) fixed center;
    background-size: cover;
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);
}



.workshops_line_1 {
    float: left;
    width: 24%;
    margin-right: .5%;
    margin-left: .5%;
    margin-top: 40px;
    display: inline-block;
}

.workshops_line_2 {
    float: left;
    width: 24%;
    margin-right: .5%;
    margin-left: .5%;
    margin-top: 40px;
    display: inline-block;
}

.workshops_line_3 {
    float: left;
    width: 24%;
    margin-right: .5%;
    margin-left: .5%;
    margin-top: 40px;
    display: inline-block;
}

.workshops_line_4 {
    float: left;
    width: 24%;
    margin-right: .5%;
    margin-left: .5%;
    margin-top: 40px;
    display: inline-block;
}

#h2_b{
	font-size: 50%;
	font-weight: lighter;
	color: #777;		
}

#back_link_tag {
    font-size: 80%;
    margin: 0 20px;
    top: 97px;
    position: absolute;
    background-color: #5ea1e0;
    color: #fff;
    padding: 15px 15px 10px 15px;
    border-radius: 5px;
    z-index: 5;
}

.tag_bar{
	float: left;
	width: 100%;
	margin-top: 30px;
	margin-bottom: 10px;
}
.tag_bar_btn{
	border-radius: 4px;
/*	background-color: #d5d2d2; */
	padding: 2px 6px;
}

.tag_bar_btn .active{
	background: #02b89a;
}

.active{
	background: #02b89a;
}

#alltag{
	font-size: .7em;
	margin: 15px 0;
}

#alltags{
	font-size: .6em;
	color: ;
}

button{
	background: #02b89a;
	border: 0;
	color: #FFF;
	border-radius: 15px; 
	cursor: pointer;
}

button:hover{
	background: #79e1d0;
	color: #fff;
}


#gif_clock{
	position:absolute;
	z-index:0;
	opacity:.99;
	width: 100%;
	height: 90%;
	background: url(../img/time_1.gif) center top; 
	background-size: cover;	

}



.recommended{
    cursor: pointer;
    float: left;
    transition: all 200ms ease-out;
    margin-bottom: 40px;
    width: 66.3%;
    background-color: #FFF;
    border-top: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 1%;
    box-shadow: 2px 2px 10px rgba(0,0,0,.3);
    min-height: 190px;
}

#news_head {
    width: calc(100% + -24px);
    height: 28%;
    margin: 12px;
}

.recommended:hover{
    -ms-transform: scale(1.01,1.01);
    -webkit-transform: scale(1.01,1.01);
    transform: scale(1.01,1.01);
}

.recommended h1 {
    float: left;
    width: calc(100% + -24px);
	margin: 0 12px;
    font-size: 90%;
    color: #274986
}
.recommended h5,
.recommended a {
    width: calc(100% + -24px);
	margin: 0 12px;
}

#recomended_articles {
    width: calc(100% + -24px);
    height: 20%;
    margin: 12px;
}



.share{
	position: fixed;
	bottom: 0;
	right: 0;
}

.works_news{
    cursor: pointer;
    float: left;
    transition: all 200ms ease-out;
    margin-bottom: 40px;
}
.head_news{
    cursor: pointer;
    float: left;
    transition: all 200ms ease-out;
    margin-bottom: 40px;
    width: 66%;
    background-color: #FFF;
    border-top: 2px solid #333;
    padding-bottom: 20px;
    margin-bottom: 1%;
    margin-left: .30%;
	margin-right: .30%;
    box-shadow: 2px 2px 10px rgba(0,0,0,.2);
    min-height: 60%;
}

.head_news:hover{
    -ms-transform: scale(1.01,1.01);
    -webkit-transform: scale(1.01,1.01);
    transform: scale(1.01,1.01);
}

.head_news h1 {
    float: left;
    width: calc(100% + -24px);
	margin: 0 12px;
    font-size: 130%;
    color: #274986;
}
.head_news h5,
.head_news a {
    width: calc(100% + -24px);
	margin: 0 12px;
	min-height: 30px;
}


#news_b{
	width: 32.7%;
    margin-left: .30%;
    margin-right: .30%;
    font-size: 75%;
    min-height: 30%;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

#news_c{ 
	width: 100%;
	font-size: 75%;
	margin-bottom: 20px;
	min-height: 200px;
	padding-bottom: 12px;
}

#news_c_txt {
	min-height: 100px;
	float: left;
}

#news_d{
	width: calc(100% + -24px);
	margin-left: 12px;
	font-size: 75%;
	padding-bottom: 20px;
	margin-top: 20px;
	min-height: 82px;
}

#news_d:hover{
	opacity: .7;
}

#news_link{
	width: 92%;
	padding: 15px 4%;
	font-size: 75%;
	border:0;
	background-color: #efefef;
	float: left;
}

#news_link:hover{
	color: #FFF;
	background-color: #225b86
}

#container_knowledge_page {
	background: #FFF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FFF, #EFEFEF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFF, #EFEFEF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFF, #EFEFEF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFF, #EFEFEF); /* Standard syntax */
    margin-top: 100px;
    padding-bottom: 80px;
}


#about_half{
	width: 50%;
	margin-top: 25px;
	float: left;
}

#about{
	margin-bottom: 30px;
}


.up_section{
	width:100%;
	text-align:center;
	font-size:90%;
	display: table;
	min-height: 38px;
	margin-top: 0px;
}

#sections{
	float: left;
	width: 20%;
	text-align: center;
	background-color: #37729e;
	color: #FFF;
	padding:0;
	line-height: 170%;
	display: table-cell;
    vertical-align: middle;
    min-height: 35px;
    margin-bottom: 20px;

    border: 1px solid #ccc;
    border-right: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#sections:hover{
	background-color: #225b86;
}
#sections_search{
	float: left;
	width: 25%;
	text-align: center;
	background-color: #37729e;
	padding: 0;
	display: table;
	min-height: 35px;

	border: 1px solid #ccc;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#sections_search input{
	margin: 4px 0 0 0;
	display: table-cell;
    vertical-align: middle;
    height: 25px;
    border-radius: 10px;
    text-align: right;
    padding-right: 5px;
    border: solid 1px #efefef;
    width: 80%;
    float: right;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
#search{
	float: right;
	margin: 9px 3% 0 3%;
	display: table-cell;
    vertical-align: middle;
}

#workshop_head{
	width: calc(100% + -24px);
	height: 18%;
	min-height: 125px;
	float: left;
	margin:12px;
}
#workshop_head_a{
	width: calc(100% + -24px);
	height: calc(36% + 108px);
	margin:12px;
	float: left;
}
#workshop_head_b{
	width: calc(100% + -24px);
	height: 18%;
	margin:12px;
	float: left;
}
#workshop_head_small{
	width: calc(40% + -12px);
	height: 50%;
	margin: 0 12px 15px 0;
	float: left;
}

#recommended{
	width: 100%;
	height: 20%;
	margin:0;
}

.news_category{
	width: 24.3%;
	float: left;
	margin-left: .30%;
	margin-right: .30%;
	margin-top: 25px;
	margin-bottom: 80px;
	padding-top: 7px;
	background-color: #FFF;
	border-top: 2px solid #333;
	box-shadow: 2px 2px 10px rgba(0,0,0,.3)
}

.news_category h2{
	margin-left: 12px;
	font-size: 170%;
}

.category{
	float: left;
	background-color: #FFF;
	border-bottom: 1px solid #ccc;
}

.category h1{
	float: left;
    width: calc(100% + -12px);
	margin: 0 12px 0 0;
    font-size: 130%;
    color: #274986;
}
.category h5{
	float: left;
    width: calc(100% + -12px);
	margin: 0 12px 0 0;
}

.category_more{
	float: left;
	margin-top: -1px;
	background-color: #FFF;
	width: 100%;
	border-top: 1px solid #ccc;
}

.head_news h4 {
    line-height: 120%;
    font-size: 15px;
    font-weight: normal;
    color: #333;
    margin: 0 12px;
    float: left;
    width: 100%;
}


@media all and (max-width: 930px) and (min-width: 751px) {

.news_category h2 {
    font-size: 135%;
}
.category h1,
.head_news h1 {
    font-size: 110%;
}
.category h5,
.head_news h5 {
    font-size: 80%;
}

}

@media all and (max-width: 780px) and (min-width: 100px) {

.news_category {width: 49.4%;}
.head_news {width: 99.4%;}
#news_b {width: 49.4%;}

.workshops_line_1 {
    width: 49%;
    margin-right: .9%;
    margin-top: 40px;
}

.workshops_line_2 {
    width: 49%;
    margin-right: 0;
    margin-top: 40px;
}

.workshops_line_3 {
    width: 49%;
    margin-right: .9%;
    margin-top: 40px;
}

.workshops_line_4 {
    width: 49%;
    margin-right: 0;
    margin-top: 40px;
}

}

@media all and (orientation: portrait) {
.container {
    min-height: 50%;
}

.news_category {width: 49.4%;}
.head_news {width: 99.4%;min-height: 0;}
#gif_clock {height: 65%;}
#news_c {width: 99.4%;min-height: 370px;}
#news_b {width: 99.4%;}
#news_d{min-height: 40px;}

#sections_search {width: 100%;margin-bottom:20px;}
#sections {
    font-size: 120%;
    line-height: 210%;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-right: 0;
}
#workshop_head {
    width: calc(100% + -24px);
    height: 15%;
    margin: 12px;
}
#workshop_head_a {
    width: calc(100% + -24px);
    height: 25%;
    margin: 12px;
}
#news_c a div {min-height: 220px;}

.workshops_line_1,
.workshops_line_3 {
    width: 49%;
    margin-right: .9%;
    margin-left: 0;
}
.workshops_line_2,
.workshops_line_4 {
    width: 49%;
    margin-right: .9%;
    margin-left: 0;
}

.head_news h1{
	font-size: 250%;
}
.head_news h4 {
	font-size: 200%;
}
.head_news h5 {
	font-size: 210%;
}

.category h1 {
    font-size: 225%;
}
.category h5 {
    font-size: 200%;
}

.workshops_line_break{
	float: left;
	width: 100%;
	height: 1px;
}

#recomended_articles {height: 10%;}

}