@charset "utf-8";
/* CSS Document */
*{margin: 0px; padding:0px; box-sizing: border-box; font-family: '微軟正黑體'; color:#333;}
.focuspeople{ display:flex;width:100%; margin:10px 0 0 0px; flex-direction: column;border-top:1px #eee solid;} 

.focuspeoplearea{ display: flex; flex-direction: row;flex-basis: 0; flex-grow: 0; flex-shrink: 0; }
.focusbody{display:flex; flex-direction: column; width: 100%;  border:0px solid #c00;padding: 0px; margin: 0px;list-style: none; overflow-y: auto;height: 200px;}
.focusbody li.focuscount{display: flex; width: 100%;flex-direction: row; align-items:center; position: relative;padding:5%;border-bottom:1px #ededed solid;}
.focusbody li:last-child{border:0px;}


.focuscount img{float:left; border-radius: 100%; width: 50px}
.focuscount span{float:left; margin-left:10px;color:#333; font-size: 15px; font-family: '微軟正黑體'}
.focuscount a{position: absolute; right: 4%;font-size:15px;background-color:#999; line-height:150%;border:0px; color:#fff; text-decoration: none; border-radius: 15%; padding:2px 5px;}

.studentarea{display:flex; flex-direction: column; flex-basis: 100%; flex-grow: 0; flex-shrink: 0; border:0px solid #c00; margin-top: 5%; overflow-y:auto; height: auto;}
.studentarea .recent{display:inline-block;width: 100%; padding:4.5% 0% 0%; border-bottom:0px #eee solid; }
.studentarea .recent .title{color:#333; width: 100%; display: inline-block;line-height: 150%;font-size: 21px; font-weight: bold;margin-bottom:5%;  }
.studentarea .recent ul.books{color:#333; width: 100%; display: flex; flex-direction: row; justify-content: space-between;  padding:0px 5% 8%;list-style: none; border-bottom: 1px #ddd solid;}
.studentarea .recent ul.books li{padding:0px 2%; position: relative;border:0px #c00 solid;text-align: center; flex-basis: 33.3%;flex-grow: 0; flex-shrink: 0; display: flex; align-items:center; flex-direction: column; justify-content:space-between; margin: 0px;}

.studentarea .recent ul.books li .fbook{width: 100%; margin: 0px; border: 0px #c00 solid; flex-basis: 1; flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.studentarea .recent ul.books li img{width: 100%;margin: 0px;}
.studentarea .recent ul.books li div{ text-align: center;  width: 100%; font-size: 13px; line-height: 150%;position:relative; margin-top: 5px; padding: 0px; flex-basis: 1; flex-grow: 0; flex-shrink: 0; }

.interactivearea{padding:7% 0% 0%; display: flex; flex-direction: column;line-height: 180%}
.interactivearea .title{font-size:21px; font-weight: bold; margin-bottom: 5%; font-family: '標楷體'; display:inline-block; width: 100%; text-align: left;}
.interactivearea .publish{font-size:18px; font-weight: bold; margin-bottom: 5px; display:flex; align-items: center; width: 100%; text-align: left;}
.interactivearea .publish a{background-image: url(images/user/note-01.png); background-position: center center; background-repeat: no-repeat; background-size: auto;width:27px ; height: 27px; display: inline-block; margin: 0px 0px 0px 5px; }
	.interactivearea .publish a:hover{background-image: url(images/user/note-02.png)}	
.interactivearea .mission{font-size:16px; color:#888; margin-bottom: 5%; display:inline-block; width: 100%; text-align: left; }
.interactivearea .content{font-size:16px; color:#888; display:inline-block; width: 100%; text-align: left; }	

@media only screen and (min-width: 481px) {
.focuspeople{ display:flex;width:100%; margin:10px 0 0 0px; flex-direction: column;border-top:1px #eee solid;} 

.focuspeoplearea{ display: flex; flex-direction: row;flex-basis: 0; flex-grow: 0; flex-shrink: 0; }
.focusbody{display:flex; flex-direction: column; width: 100%;  border:0px solid #c00;padding: 0px; margin: 0px;list-style: none; overflow-y: auto;height: 200px;}
.focusbody li.focuscount{display: flex; width: 100%;flex-direction: row; align-items:center; position: relative;padding:5%;border-bottom:1px #ededed solid;}
.focusbody li:last-child{border:0px;}


.focuscount img{float:left; border-radius: 100%; width: 50px}
.focuscount span{float:left; margin-left:10px;color:#333; font-size: 15px; font-family: '微軟正黑體'}
.focuscount a{position: absolute; right: 4%;font-size:15px;background-color:#999; line-height:150%;border:0px; color:#fff; text-decoration: none; border-radius: 15%; padding:2px 5px;}

.studentarea{display:flex; flex-direction: column; flex-basis: 100%; flex-grow: 0; flex-shrink: 0; border:0px solid #c00; margin-top: 5%; overflow-y:auto; height: auto;}
.studentarea .recent{display:inline-block;width: 100%; padding:4.5% 0% 0%; border-bottom:0px #eee solid; }
.studentarea .recent .title{color:#333; width: 100%; display: inline-block;line-height: 150%;font-size: 21px; font-weight: bold;margin-bottom:5%;  }
.studentarea .recent ul.books{color:#333; width: 100%; display: flex; flex-direction: row; justify-content: space-between;  padding:0px 5% 8%;list-style: none; border-bottom: 1px #ddd solid;}
.studentarea .recent ul.books li{padding:0px 2%; position: relative;border:0px #c00 solid;text-align: center; flex-basis: 33.3%;flex-grow: 0; flex-shrink: 0; display: flex; align-items:center; flex-direction: column; justify-content:space-between; margin: 0px;}

.studentarea .recent ul.books li .fbook{width: 100%; margin: 0px; border: 0px #c00 solid; flex-basis: 1; flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.studentarea .recent ul.books li img{width: 100%;margin: 0px;}
.studentarea .recent ul.books li div{ text-align: center;  width: 100%; font-size: 13px; line-height: 150%;position:relative; margin-top: 5px; padding: 0px; flex-basis: 1; flex-grow: 0; flex-shrink: 0; }

.interactivearea{padding:7% 0% 0%; display: flex; flex-direction: column;line-height: 180%}
.interactivearea .title{font-size:21px; font-weight: bold; margin-bottom: 5%; font-family: '標楷體'; display:inline-block; width: 100%; text-align: left;}
.interactivearea .publish{font-size:18px; font-weight: bold; margin-bottom: 5px; display:flex; align-items: center; width: 100%; text-align: left;}
.interactivearea .publish a{background-image: url(images/user/note-01.png); background-position: center center; background-repeat: no-repeat; background-size: auto;width:27px ; height: 27px; display: inline-block; margin: 0px 0px 0px 5px; }
	.interactivearea .publish a:hover{background-image: url(images/user/note-02.png)}	
.interactivearea .mission{font-size:16px; color:#888; margin-bottom: 5%; display:inline-block; width: 100%; text-align: left; }
.interactivearea .content{font-size:16px; color:#888; display:inline-block; width: 100%; text-align: left; }	
	
	
	
}
@media only screen and (min-width: 768px) {
	
.focuspeople{ display:flex;width:100%; margin:10px 0 0 0px; flex-direction: row;border-top:1px #eee solid;} 

.focuspeoplearea{ display: flex; flex-direction: row;flex-basis: 35%; flex-grow: 0; flex-shrink: 0;}
.focusbody{display:flex; flex-direction: column; width: 100%;  border:0px solid #c00;padding: 0px; margin: 0px;list-style: none; overflow-y: auto;height: 800px;}
.focusbody li.focuscount{display: flex; width: 100%;flex-direction: row; align-items:center; position: relative;padding:5%;border-bottom:1px #ededed solid;}
.focusbody li:last-child{border:0px;}


.focuscount img{float:left; border-radius: 100%; width: 50px}
.focuscount span{float:left; margin-left:10px;color:#333; font-size: 15px; font-family: '微軟正黑體'}
.focuscount a{position: absolute; right: 4%;font-size:15px;background-color:#999; line-height:150%;border:0px; color:#fff; text-decoration: none; border-radius: 15%; padding:2px 5px;}

.studentarea{display:flex; flex-direction: column; flex-basis: 65%; flex-grow: 1; flex-shrink: 0; border:0px solid #c00;overflow-y:auto;margin-top: 0%;height: 800px;}
.studentarea .recent{display:inline-block;width: 100%; padding:4.5% 10% 0%; border-bottom:0px #eee solid; }
.studentarea .recent .title{color:#333; width: 100%; display: inline-block;line-height: 150%;font-size: 21px; font-weight: bold;margin-bottom:5%; text-align: left; }
.studentarea .recent ul.books{color:#333; width: 100%; display: flex; flex-direction: row; justify-content: space-between;  padding:0px 5% 8%;list-style: none; border-bottom: 1px #ddd solid;}
.studentarea .recent ul.books li{padding:0px 2%; position: relative;border:0px #c00 solid;text-align: center; flex-basis: 33.3%;flex-grow: 0; flex-shrink: 0; display: flex; align-items:center; flex-direction: column; justify-content:space-between; margin: 0px;}

.studentarea .recent ul.books li .fbook{width: 100%; margin: 0px; border: 0px #c00 solid; flex-basis: 1; flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.studentarea .recent ul.books li img{width: 100%;margin: 0px;}
.studentarea .recent ul.books li div{ text-align: center;  width: 100%; font-size: 13px; line-height: 150%;position:relative; margin-top: 5px; padding: 0px; flex-basis: 1; flex-grow: 0; flex-shrink: 0; }

.interactivearea{padding:7% 13% 0%; display: flex; flex-direction: column;line-height: 180%}
.interactivearea .title{font-size:21px; font-weight: bold; margin-bottom: 5%; font-family: '標楷體'; display:inline-block; width: 100%; text-align: left;}
.interactivearea .publish{font-size:15px; font-weight: bold; margin-bottom: 5px; display:flex; align-items: center; width: 100%; text-align: left;}
.interactivearea .publish a{background-image: url(images/user/note-01.png); background-position: center center; background-repeat: no-repeat; background-size: auto;width:24px ; height: 24px; display: inline-block; margin: 0px 0px 0px 5px; }
	.interactivearea .publish a:hover{background-image: url(images/user/note-02.png)}	
.interactivearea .mission{font-size:15px; color:#888; margin-bottom: 5%; display:inline-block; width: 100%; text-align: left; }
.interactivearea .content{font-size:15px; color:#888; display:inline-block; width: 100%; text-align: left; }
		
}


@media only screen and (min-width: 1024px) {
.focuspeople{ display:flex;width:100%; margin:10px 0 0 0px; flex-direction: row;border-top:1px #eee solid;} 

.focuspeoplearea{ display: flex; flex-direction: row;flex-basis: 35%; flex-grow: 0; flex-shrink: 0;}
.focusbody{display:flex; flex-direction: column; width: 100%;  border:0px solid #c00;padding: 0px; margin: 0px;list-style: none; overflow-y: auto;height: 800px;}
.focusbody li.focuscount{display: flex; width: 100%;flex-direction: row; align-items:center; position: relative;padding:5%;border-bottom:1px #ededed solid;}
.focusbody li:last-child{border:0px;}


.focuscount img{float:left; border-radius: 100%; width: 60px}
.focuscount span{float:left; margin-left:10px;color:#333; font-size: 16px; font-family: '微軟正黑體'}
.focuscount a{position: absolute; right: 4%;font-size:16px;background-color:#999; line-height:150%;border:0px; color:#fff; text-decoration: none; border-radius: 15%; padding:2px 5px;}

.studentarea{display:flex; flex-direction: column; flex-basis: 65%; flex-grow: 1; flex-shrink: 0; border:0px solid #c00;overflow-y:auto;margin-top: 0%;height: 800px;}
.studentarea .recent{display:inline-block;width: 100%; padding:4.5% 10% 0%; border-bottom:0px #eee solid;text-align: left; }
.studentarea .recent .title{color:#333; width: 100%; display: inline-block;line-height: 150%;font-size: 27px; font-weight: bold;margin-bottom:5%;  }
.studentarea .recent ul.books{color:#333; width: 100%; display: flex; flex-direction: row; justify-content: space-between;  padding:0px 5% 8%;list-style: none; border-bottom: 1px #ddd solid;}
.studentarea .recent ul.books li{padding:0px 2%; position: relative;border:0px #c00 solid;text-align: center; flex-basis: 33.3%;flex-grow: 0; flex-shrink: 0; display: flex; align-items:center; flex-direction: column; justify-content:space-between; margin: 0px;}

.studentarea .recent ul.books li .fbook{width: 100%; margin: 0px; border: 0px #c00 solid; flex-basis: 1; flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.studentarea .recent ul.books li img{width: 100%;margin: 0px;}
.studentarea .recent ul.books li div{ text-align: center;  width: 100%; font-size: 16px; line-height: 150%;position:relative; margin-top: 5px; padding: 0px; flex-basis: 1; flex-grow: 0; flex-shrink: 0; }

.interactivearea{padding:7% 13% 0%; display: flex; flex-direction: column;line-height: 180%}
.interactivearea .title{font-size:27px; font-weight: bold; margin-bottom: 5%; font-family: '標楷體'; display:inline-block; width: 100%; text-align: left;}
.interactivearea .publish{font-size:17px; font-weight: bold; margin-bottom: 5px; display:flex; align-items: center; width: 100%; text-align: left;}
.interactivearea .publish a{background-image: url(images/user/note-01.png); background-position: center center; background-repeat: no-repeat; background-size: auto;width:27px ; height: 27px; display: inline-block; margin: 0px 0px 0px 5px; }
	.interactivearea .publish a:hover{background-image: url(images/user/note-02.png)}	
.interactivearea .mission{font-size:17px; color:#888; margin-bottom: 5%; display:inline-block; width: 100%; text-align: left; }
.interactivearea .content{font-size:17px; color:#888; display:inline-block; width: 100%; text-align: left; }

}




@media only screen and (min-width: 1280px) {
	
	.focuspeople{ display:flex;width:100%; margin:10px 0 0 0px; flex-direction: row;border-top:1px #eee solid;} 

.focuspeoplearea{ display: flex; flex-direction: row;flex-basis: 35%; flex-grow: 0; flex-shrink: 0;}
.focusbody{display:flex; flex-direction: column; width: 100%;  border:0px solid #c00;padding: 0px; margin: 0px;list-style: none; overflow-y: auto;height: 800px;}
.focusbody li.focuscount{display: flex; width: 100%;flex-direction: row; align-items:center; position: relative;padding:5%;border-bottom:1px #ededed solid;}
.focusbody li:last-child{border:0px;}


.focuscount img{float:left; border-radius: 100%; width: 60px}
.focuscount span{float:left; margin-left:10px;color:#333; font-size: 16px; font-family: '微軟正黑體'}
.focuscount a{position: absolute; right: 4%;font-size:16px;background-color:#999; line-height:150%;border:0px; color:#fff; text-decoration: none; border-radius: 15%; padding:2px 5px;}

.studentarea{display:flex; flex-direction: column; flex-basis: 65%; flex-grow: 1; flex-shrink: 0; border:0px solid #c00;overflow-y:auto;margin-top: 0%;height: 800px;}
.studentarea .recent{display:inline-block;width: 100%; padding:4.5% 10% 0%; border-bottom:0px #eee solid; }
.studentarea .recent .title{color:#333; width: 100%; display: inline-block;line-height: 150%;font-size: 27px; font-weight: bold;margin-bottom:5%; text-align: left; }
.studentarea .recent ul.books{color:#333; width: 100%; display: flex; flex-direction: row; justify-content: space-between;  padding:0px 5% 8%;list-style: none; border-bottom: 1px #ddd solid;}
.studentarea .recent ul.books li{padding:0px 2%; position: relative;border:0px #c00 solid;text-align: center; flex-basis: 33.3%;flex-grow: 0; flex-shrink: 0; display: flex; align-items:center; flex-direction: column; justify-content:space-between; margin: 0px;}

.studentarea .recent ul.books li .fbook{width: 100%; margin: 0px; border: 0px #c00 solid; flex-basis: 1; flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.studentarea .recent ul.books li img{width: 100%;margin: 0px;}
.studentarea .recent ul.books li div{ text-align: center;  width: 100%; font-size: 16px; line-height: 150%;position:relative; margin-top: 5px; padding: 0px; flex-basis: 1; flex-grow: 0; flex-shrink: 0; }

.interactivearea{padding:7% 13% 0%; display: flex; flex-direction: column;line-height: 180%}
.interactivearea .title{font-size:27px; font-weight: bold; margin-bottom: 5%; font-family: '標楷體'; display:inline-block; width: 100%; text-align: left;}
.interactivearea .publish{font-size:17px; font-weight: bold; margin-bottom: 5px; display:flex; align-items: center; width: 100%; text-align: left;}
.interactivearea .publish a{background-image: url(images/user/note-01.png); background-position: center center; background-repeat: no-repeat; background-size: auto;width:27px ; height: 27px; display: inline-block; margin: 0px 0px 0px 5px; }
	.interactivearea .publish a:hover{background-image: url(images/user/note-02.png)}	
.interactivearea .mission{font-size:17px; color:#888; margin-bottom: 5%; display:inline-block; width: 100%; text-align: left; }
.interactivearea .content{font-size:17px; color:#888; display:inline-block; width: 100%; text-align: left; }
	
	
}