/********************************************************
 標準化標題文字
xxxxx: 樣式	default、style01、style02
yyyyy: 顏色	info(藍)、error(紅)、success(綠)、warning(橙) 
<h3 class="webPage_title xxxxx yyyyy">
    <span class="title">這是標題文字</span>
</h3>
*******************************************************/
.webPage_title {
	position: relative;
	padding: 0;
	margin: 0 0 .5em;
	display: block;
    border-style: solid;
    border-width: 0;
    border-color: transparent; 
	overflow: hidden;
}

.webPage_title span.title {
	display: inline-block;
    border-style: solid;
    border-width: 0;
    border-color: transparent; 
}

.webPage_title span.title:before {
	font-family:'FontAwesome';
}

.webPage_title span.title:after {
	position: absolute; 
	content: "";
	display: inline-block;
}

/**********************
 預設樣式
***********************/
.webPage_title.default span.title:before {
	content: '\f04c';	/*** fa fa-pause ***/
	color: #868686;
	padding-right: .5em;
}

.webPage_title.default span.title:after {
	height: 1px;
	width: 80%;
	top: 50%;
	margin-left: .5em;
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(124,124,124,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) );
}

/*** 藍色 ***/
.webPage_title.default.info span.title, 
.webPage_title.default.info span.title:before {
	color: rgba(0,85,204,1);	/* #0055cc; */
}

.webPage_title.default.info span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(0,85,204,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(0,85,204,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(0,85,204,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(0,85,204,1), rgba(124,124,124,0) );
}

/*** 紅色 ***/
.webPage_title.default.error span.title ,
.webPage_title.default.error span.title:before {
	color: rgba(255,17,102,1);	/* #FF1166; */
}

.webPage_title.default.error span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(255,17,102,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(255,17,102,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(255,17,102,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(255,17,102,1), rgba(124,124,124,0) );
}

/*** 綠色 ***/
.webPage_title.default.success span.title ,
.webPage_title.default.success span.title:before {
	color: rgba(51,153,17,1);	/* #339911; */
}

.webPage_title.default.success span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(51,153,17,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(rgba(51,153,17,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(51,153,17,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(51,153,17,1), rgba(124,124,124,0) );
}

/*** 橙色 ***/
.webPage_title.default.warning span.title ,
.webPage_title.default.warning span.title:before {
    color: rgba(255,170,0,1);	/* #ffaa00; */
    color: rgba(204,138,0,1);	/* #CC8A00; */
}

.webPage_title.default.warning span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(204,138,0,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(204,138,0,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(204,138,0,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(204,138,0,1), rgba(124,124,124,0) );
}

/**********************
 樣式一
***********************/
.webPage_title.style01 {
	border-width: 0 0 1px;
	border-color: rgba(127,127,127,.3);
	overflow: inherit;
}

.webPage_title.style01 span.title {
	border-width: 0 0 5px;
	border-color: rgba(127,127,127,1);
	padding-bottom: 3px;
	margin-bottom: -5px;
}

/*** 藍色 ***/
.webPage_title.style01.info {
	color: rgba(0,85,204,1);
	border-color: rgba(0,85,204,.3);
}
.webPage_title.style01.info span.title {
	border-color: rgba(0,85,204,1);
}

/*** 紅色 ***/
.webPage_title.style01.error {
	color: rgba(255,17,102,1);	/* #FF1166; */
	border-color: rgba(255,17,102,.3);
}
.webPage_title.style01.error span.title {
	border-color: rgba(255,17,102,1);
}

/*** 綠色 ***/
.webPage_title.style01.success {
	color: rgba(51,153,17,1);	/* #339911; */
	border-color: rgba(51,153,17,.3);
}
.webPage_title.style01.success span.title {
	border-color: rgba(51,153,17,1);
}

/*** 橙色 ***/
.webPage_title.style01.warning {
	color: rgba(204,138,0,1);	/* #CC8A00; */
	border-color: rgba(204,138,0,.3); 
}
.webPage_title.style01.warning span.title {
	border-color: rgba(204,138,0,1);
}


/**********************
 樣式二
***********************/
.webPage_title.style02 {
	border-width: 4px 0 1px 0;
	border-top-color: rgba(127,127,127,1);
	border-bottom-color: rgba(127,127,127,.2);
	background: rgba(127,127,127,.05);
	padding: .4em .5em .3em;
}

/*** 藍色 ***/
.webPage_title.style02.info {
	border-top-color: rgba(0,85,204,1);	/* #0055cc;	*/
	border-bottom-color: rgba(0,85,204,.2);
	background: rgba(0,85,204,.05);
	color: rgba(0,85,204,1);
}

/*** 紅色 ***/
.webPage_title.style02.error {
	border-top-color: rgba(255,17,102,1);	/* #FF1166; */
	border-bottom-color: rgba(255,17,102,.2);
	background: rgba(255,17,102,.05);
	color: rgba(255,17,102,1);
}

/*** 綠色 ***/
.webPage_title.style02.success {
	border-top-color: rgba(51,153,17,1);	/* #339911; */
	border-bottom-color: rgba(51,153,17,.2);
	background: rgba(51,153,17,.05);
	color: rgba(51,153,17,1);
}

/*** 橙色 ***/
.webPage_title.style02.warning {
	border-top-color: rgba(204,138,0,1);	/* #CC8A00; */
	border-bottom-color: rgba(204,138,0,.2);
	background: rgba(204,138,0,.05);
	color: rgba(204,138,0,1);
}

/**********************
 樣式三
***********************/
.webPage_title.style03 {
	background: rgba(127,127,127,.1);
	padding: .5em .5em .4em;
}

/*** 藍色 ***/
.webPage_title.style03.info {
	background: rgba(0,85,204,.05);
	color: rgba(0,85,204,1);
}

/*** 紅色 ***/
.webPage_title.style03.error {
	background: rgba(255,17,102,.05);
	color: rgba(255,17,102,1);
}

/*** 綠色 ***/
.webPage_title.style03.success {
	background: rgba(51,153,17,.05);
	color: rgba(51,153,17,1);
}

/*** 橙色 ***/
.webPage_title.style03.warning {
	background: rgba(204,138,0,.05);
	color: rgba(204,138,0,1);
}


/********************************************
 標準 10 欄式 - 區塊顯示 - 整體設定
 
<div class="page_section">
	<h3 class="page_section_title"><span class="title">...</span></h3>
	<div class="page_section_content">
	</div>
</div>	
********************************************/
.page_section {
	margin-bottom: 5%;

	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-o-border-radius: 4px 4px 0 0;
	-ms-border-radius: 4px 4px 0 0;
}

.page_section .page_section_title {
	background: rgba(31,181,173,.7);
	background: rgba(0,160,210,1);	/* #00a0d2;	*/
	margin: 0;
	padding: .5em 1em .3em;
	color: #FF0;

	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-o-border-radius: 4px 4px 0 0;
	-ms-border-radius: 4px 4px 0 0;
}

.page_section .page_section_title .title {
	display: inline-block;
}

.page_section .page_section_title .title:before {
	font-family: 'FontAwesome';
	content: '\f013';
	padding-right: 8px;
	opacity: .7;
}

.page_section .page_section_content {
	padding: 1em;
	border-style: solid;
	border-color: rgba(31,181,173,.2);
	border-width: 0 1px 1px 1px;

	background: rgba(31,181,173,.03);
	
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	-o-border-radius: 0 0 4px 4px;
	-ms-border-radius: 0 0 4px 4px;
}

/*** 新生專區 title 前面 icon-font ***/
.freshman .page_section .page_section_title .title:before {
	content: '';
	padding-right: 0;
}

.freshman .page_section .page_section_content a {}

.freshman .page_section .page_section_content a img {
	/*	display: none; */
}
