@charset "utf-8";
/*============================================================ 全部共用區 ============================================================*/
*{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
html{
	height:100%;
	-webkit-text-size-adjust:none;
}
body {
	height:100%;
	margin:0;
	padding:0;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
}

.clear {
	margin: 0;
	padding: 0;
	border:0;
	clear: both;
}
.fontRed01{
	color:#d90057;
}
.fontGreyD{
	color:#2a363b;
}
.fontGreyD{
	color:#25272a;
}
.fontTeal01{
	color:#047f90;
}
.blank01{
	width:100%;
	height:50px;
}
.blank02{
	width:100%;
	height:35px;
}
a{
	text-decoration:none;
	color:#009999;
}
a:hover{
	text-decoration:none;
	color:#c43170;
}
.goTop{
	position: fixed;
	width: 83px;
	right: 20px;
	bottom: 85px;
	z-index: 9999;
	display: none;
	text-align:center;
	cursor: pointer;
}
.goTop img{
	border:0;
	max-width:100%;
	height:auto;
}
.goTop a{
	display: block;
	text-decoration: none;
}
.goTop a:hover{
	text-decoration: none;
}

#barBlack {
	position:fixed;
	z-index:999;
	height:28px;
	top:0;
	margin:0 auto;
	padding:0;
	width: 100%;
	background-color: #2e2e2e;
	text-align: center;
}
#barBlack img{
	max-width:100%;
	height:auto;
}
pre{    white-space: pre-line;}
/*---------------------   動畫設定    ---------------------*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	
	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;
	
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	
	visibility: visible !important;						
}

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}
@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}
/*---------------------   動畫設定 end    ---------------------*/

/*============================================================ 全部共用區end ============================================================*/




/*================================================================= 桌機版型區 =================================================================*/

/*----------------------  共用的表單、按鈕設定  ----------------------*/

/*----------- input placeholder設定 -----------*/
article input[type="text"]::-webkit-input-placeholder,
article input[type="password"]::-webkit-input-placeholder{
	color:#6f8c9f;
	opacity:1;
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]:-moz-placeholder,
article input[type="password"]:-moz-placeholder{
	color:#6f8c9f;
	opacity:1;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]::-moz-placeholder,
article input[type="password"]::-moz-placeholder{
	color:#6f8c9f;
	opacity:1;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]:-ms-input-placeholder,
article input[type="password"]:-ms-input-placeholder{
	color:#6f8c9f;
	opacity:1;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]:hover::-webkit-input-placeholder,
article input[type="password"]:hover::-webkit-input-placeholder{
	color:#546e7a;
	opacity:1;
	-webkit-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}
article input[type="text"]:hover:-moz-placeholder,
article input[type="password"]:hover:-moz-placeholder{
	color:#546e7a;
	opacity:1;
	-moz-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}
article input[type="text"]:hover::-moz-placeholder,
article input[type="password"]:hover::-moz-placeholder{
	color:#546e7a;
	opacity:1;
	-moz-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}
article input[type="text"]:hover:-ms-input-placeholder,
article input[type="password"]:hover:-ms-input-placeholder{
	color:#546e7a;
	opacity:1;
	-ms-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}
article input[type="text"]:focus::-webkit-input-placeholder,
article input[type="password"]:focus::-webkit-input-placeholder{
	opacity:0;
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]:focus:-moz-placeholder,
article input[type="password"]:focus:-moz-placeholder{
	opacity:0;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]:focus::-moz-placeholder,
article input[type="password"]:focus::-moz-placeholder{
	opacity:0;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
article input[type="text"]:focus:-ms-input-placeholder,
article input[type="password"]:focus:-ms-input-placeholder{
	opacity:0;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
/*----------- input placeholder設定 end -----------*/

.inputOne{
	width:100%;
	height:47px;
	padding:0 10px;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	font-size:20px;
	line-height:42px;
	color:#b0bec5;
	border:1px solid #88abc2;
	border-radius: 10px; 
	background-color: #fff; 
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	outline:none;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.inputCenter{
	width:100%;
	height:47px;
	padding:0 5px;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	text-align:center;
	font-size:20px;
	line-height:42px;
	color:#607d8b;
	border:1px solid #b0bec5;
	border-radius: 10px; 
	background-color: #fff; 
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	outline:none;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.inputOne:hover, .inputCenter:hover{
	color:#49708a;
	border:1px solid #6a8a9f;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.inputOne:focus, .inputOne:active,
.inputCenter:focus, .inputCenter:active{
	color:#25272a;
	border:1px solid #469462;
	background-color:#f8fff0;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.searchBox01{
	position:relative;
	display:inline-block;
	width:100%;
}
.inputSelect01.categoryInputText, 
.inputSelect01{
	width:100%;
	height:47px;
	padding-right:22px;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	text-align:center;
	font-size:20px;
	line-height:42px;
	color:#6f8c9f;
	border:1px solid #88abc2;
	border-radius:10px;
	background-color:#fff;
	cursor:pointer;
	outline:none;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	background: url(../img/arrow.jpg) right center  no-repeat;
}
.inputSelect01:hover{
	color:#49708a;
	border:1px solid #6a8a9f;
	background-color:#fff;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.inputSelect01:focus, .inputSelect01:active{
	color:#25272a;
	border:1px solid #469462;
	background-color:#f8fff0;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	transition:all 0.3s  ease-in-out;
}

.serchBoxArrowDown{
	position:absolute;
	z-index:5;
	top:4px;
	right:10px;
	pointer-events:none;
}
.serchBoxArrowDown i{
	font-size:22px;
	color:#49708a;
	line-height:43px;
}
.buttonSearch01{
	width:100%;
	height:47px;
	text-align:center;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	font-size:20px;
	line-height:47px;
	color: #fff;
	outline:none;
	cursor:pointer;
	border:none;
	border-radius:10px;
	background-color:#c43170;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
}
.buttonSearch01 i{
	padding-right:5px;
	font-size:24px;
}
.buttonSearch01:hover{
	background-color:#469462;
}
.buttonSearch01:active{
	background-color:#067147;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}
/*----------------------  共用的表單、按鈕設定 end  ----------------------*/



/*-------------------- 美化的Select下拉框設定 --------------------*/
.selectOne{
	height: 47px;
	font-size:20px;
	line-height:45px;
	border-radius:10px;
	border:1px solid #88abc2;
}
.nice-select {
	position: relative;
	display:inline-block;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	text-align: left !important;
	font-weight: normal;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	color:#6f8c9f;
	background-color: #fff;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
 }
.nice-select:hover {
	color:#546e7a;
	border-color:#6a8a9f;
}
.nice-select:active, .nice-select.open, .nice-select:focus {
	color:#35464e;
	border-color:#469462;
	background-color:#f8fff0;
}
.nice-select:after{
    position: absolute;
    display: block;
    width: 20px;
    height: 38px;
    margin-top: -19px;
    right: 5px;
    top:50%;
	content:"\f107";
	font-family:FontAwesome;
	font-weight:normal;
	text-align:center;
	font-size:24px;
	line-height:38px;
	color:#6c726d;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.nice-select:hover:after{
	color:#5d625d;
}
.nice-select.open:after {
	color:#5d625d;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
}
.nice-select.disabled {
    border-color: #9ba39b;
    color: #7c827c;
    pointer-events: none;
	cursor:pointer;
}
.nice-select.disabled:after {
      border-color: #6c726d;
}
.nice-select.wide {
    width: 100%;
}
.nice-select.wide .list{
      left: 0 !important;
      right: 0 !important;
}
.nice-select.right {
    float: right;
}
.nice-select.right .list {
      left: auto;
      right: 0;
}
.nice-select .list {
    top: 100%;
    left: 0;
    margin-top: 0;
    position: absolute;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
	color:#3e413e;
	border-color:#469462;
	background-color:#f8fff0;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
	-moz-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
	-ms-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 10;
}
.nice-select .list:hover .option:not(:hover) {
	color:#757575;
	background-color: transparent !important;
}
.nice-select .option {
    min-height: 32px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    list-style: none;
    line-height: 32px;
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
    transition: all 0.2s;
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
	color:#fff;
	background-color:#469462;
}
.nice-select .option.selected {
	color:#616161;
}
.nice-select .option.disabled {
	background-color: transparent;
	color: #999;
	cursor: default;
}
.no-csspointerevents .nice-select .list {
	display: none;
}

.no-csspointerevents .nice-select.open .list {
	display: block;
}
/*-------------------- 美化的Select下拉框設定 end --------------------*/



/*----------------    頁次設定    ----------------*/
.page-line{
	width:100%;
	text-align:center;
	margin:40px auto 0 auto;
}
.page-line span{
	display:inline-block;
	height:43px;
	margin:5px 2px;
	padding:0 14px;
	font-size:22px;
	line-height:41px;
	color:#556270;
	border:1px solid #ccc;
	background-color:#f5f5f5;
}
.page-line a{
	display:inline-block;
	height:43px;
	margin:5px 2px;
	padding:0 14px;
	font-size:22px;
	line-height:41px;
	text-decoration:none;
	color:#fff;
	border:1px solid #00a0b0;
	background-color:#00b6b1;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.page-line a:hover{
	text-decoration:none;
	border:1px solid #c43170;
	background-color:#c43170;
}
.page-line span i, .page-line a i{
	font-size:24px;
}
.pageInfor{
	display:inline-block;
	font-size:22px;
	line-height:43px;
	color:#556270;
}
.pageInput{
	width:90px;
	height:43px;
	text-align:center;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	font-size:22px;
	line-height:41px;
	color:#607d8b;
	border:1px solid #b0bec5;
	border-radius: 10px; 
	background-color: #fff; 
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	outline:none;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.pageInput:hover{
	color:#546e7a;
	border:1px solid #78909c;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.pageInput:focus, .pageInput:active{
	color:#37474f;
	border:1px solid #00b9bd;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.buttonPageGo{
	width:70px;
	height:43px;
	text-align:center;
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	font-size:24px;
	line-height:43px;
	color: #fff;
	outline:none;
	cursor:pointer;
	border:none;
	border-radius:10px;
	background-color:#c43170;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.buttonPageGo:hover{
	background-color:#93065e;
}
.buttonPageGo:active{
	background-color:#93065e;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}
/*----------------    頁次設定 end    ----------------*/



/*----------------------   嵌入RWD Youtube 以及 Vimeo RWD設定   ----------------------*/
.videoRwd{
	position:relative;
	height:0;
	padding-bottom:56.25%;
	padding-top:30px;
	overflow:hidden;
}
.videoRwd iframe,
.videoRwd object,
.videoRwd embed{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
/*----------------------   嵌入RWD Youtube 以及 Vimeo RWD設定 end   ----------------------*/



/*----------------------   版頭輪播Banner設定   ----------------------*/
.rotateBanner {
	width:100%;
/*	height:200px;
*/	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}
.rotateBanner ul{
	list-style: none;
	margin:0 auto;
	padding:0;
}
.rotateBanner li{
	position: absolute;
	display:block;
	width: 100%;
	left: 0;
	top: 0;
}
.rotateBanner img{
	width:100%;
	height:auto;
	z-index: 1;
	border:0;
}
.rslides {
	margin: 0 auto;
}
.preNext_nav {
	position: absolute;
	top: 50%;
	margin-top: -28px;
	left: 0;
	width: 38px;
	height: 56px;
	z-index: 3;
	text-indent: -9999px;
	text-decoration: none;
	overflow: hidden;
	opacity: 0;
	background: transparent url("../img/bannerArrow.png") no-repeat left top;
	background-color:rgba(37,39,42,0);
}
.preNext_nav:hover{
	opacity: 0.3;
	background-color:rgba(37,39,42,0.5);
}
.preNext_nav:active {
	opacity: 0.7;
	background-color:rgba(37,39,42,1);
}
.preNext_nav.next {
	left:auto;
	background-position: right top;
	right: 0;
}
/*----------------------   版頭輪播Banner設定 end   ----------------------*/



/*----------------------  版頭導覽列設定  ----------------------*/
#top-menu{
	display:none;
	position:fixed;
	top:28px;
	left:0;
	z-index:200;
	width:100%;
	height:60px;
	background-color:#93065e;
}
#top-menu #btn{
	display:none;
	position:absolute;
	height:42px;
	padding:0 10px;
	right:20px;
	top:8px;
	z-index:90;
	text-align:center;
	color:#93065e;
	border-radius:5px;
	background-color:#fff;
	cursor:pointer;
}
#top-menu #btn:hover{
	color:#fff;
	background-color:#bf7ea3;
}
#top-menu #btn i {
	font-size:40px;
	line-height:42px;
}
#xsWebLogo{
	position:absolute;
	width:92px;
	left:2%;
	top:5px;
	z-index:50;
}
#xsWebLogo img{
	width:100%;
	height:auto;
}

#xsNav{
	display:none;
	position:fixed;
	width:100%;
	top:88px;
	z-index:210;
	height:auto;
}
#xsNav ul{
	width: 100%;
	height: auto;
	list-style-type: none;
}
#xsNav ul li{
	width:100%;
	padding:5px 20px;
	text-decoration:none;
	border-bottom:1px dotted #fff;
	background-color:#93065e;
	cursor:pointer;
}
#xsNav ul li a{
	display:block;
	color:#fff ;
	text-decoration:none;
	font-size:20px;
	line-height:40px;
}
#xsNav li:hover{
	text-decoration:none;
	color:#fff;
	background-color:#bf7ea3;
}
nav{
	width: 100%;
	background-color:#93065e;
}
nav img{
	max-width:100%;
	height:auto;
}
#mainNav{
	width:950px;
	margin:0 auto;
}
#navButton{
	float:left;
  width: 1139px;
}
@media (max-width: 1139px) {
  #navButton {
    width: auto;
  }
}
#navButton a{
	float:left;
	display:block;
	height:51px;
	padding:0 20px;
	font-size:20px;
	line-height:51px;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	-webkit-transition:background 0.3s  ease-in-out;
	-moz-transition:background 0.3s  ease-in-out;
	-ms-transition:background 0.3s  ease-in-out;
	transition:background 0.3s  ease-in-out;
}
#navButton a:hover{
	color:#fff;
	background-color:#bf7ea3;
	text-decoration:none;
}
#navButton span{
	float:left;
	display:block;
	height:51px;
	padding:0 20px;
	font-size:22px;
	line-height:51px;
	color:#fff;
	background-color:#bf7ea3;
}
#xsHeader{
	display:none;
	width:100%;
	margin-top:88px;
}
header{
	display:block;
	width:100%;
	/*margin-top:28px;*/
}
/*----------------------  版頭導覽列設定 end  ----------------------*/



/*----------------------  主要內容框架設定  ----------------------*/
article{
	width:100%;
	min-height:60%;
	padding:40px 0 70px;
	background-color:#ecedf0;
}
section{
	width:1200px;
	margin:0 auto;
}
#container{
	width:100%;
}
.titleOne{
	width:100%;
	height:46px;
	margin-bottom:15px;
	border-bottom:2px solid #5dbebe;
}
.titleTwo{
	width:100%;
	height:46px;
	margin-bottom:15px;
	border-bottom:2px solid #ff8288;
}
.titleOne span, .titleTwo span{
	display:inline-block;
	font-size:24px;
	line-height:46px;
	color:#25272a;
}
.titleText{
	float:left;
	font-size:24px;
	line-height:46px;
	color:#25272a;
}
.titleOne span i, .titleOne > .titleText i{
	padding-right:5px;
	font-size:25px;
	color:#009999;
}
.titleTwo span i, .titleTwo > .titleText i{
	padding-right:5px;
	font-size:25px;
	color:#d5566a;
}
.buttonMore{
	float:right;
}
.buttonMore a{
	display:block;
	height:40px;
	padding:0 15px;
	font-size:22px;
	line-height:36px;
	color: #fff;
	text-align:center;
	border-radius:20px;
	background-color:#c43170;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:background 0.3s  ease-in-out;
	-moz-transition:background 0.3s  ease-in-out;
	-ms-transition:background 0.3s  ease-in-out;
	transition:background 0.3s  ease-in-out;
}
.buttonMore a i{
	padding-left:5px;
	font-size:20px;
}
.buttonMore a:hover{
	background-color:#009999;
}
.buttonMore a:active{
	background-color:#047f90;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}
#webRoot{
	width:100%;
	margin-bottom:20px;
	font-size:18px;
	line-height:30px;
}
#webRoot ul li{
	list-style:none;
	display:inline-block;
}
#webRoot ul li:nth-child(n+2):before{
	content:">";
	display:inline-block;
	margin:0 2px;
	color:#616161;
}
#webRoot ul li span{
	color:#505c63;
}
#webRoot ul li a{
	text-decoration:none;
	color:#067147;
}
#webRoot ul li a:hover{
	text-decoration:none;
	color:#469462;
}
.tipsBox01{
	width:100%;
	padding-bottom:10px;
	font-size:22px;
	line-height:30px;
	color:#25272a;
}
.tipsCenter01{
	width:100%;
	text-align:center;
	padding:0 0 30px;
	font-size:22px;
	line-height:30px;
	color:#25272a;
}
.tipsCenter02{
	width:100%;
	text-align:center;
	padding:10px 0 15px;
	font-weight:bold;
	font-size:22px;
	line-height:30px;
	color:#25272a;
}
.tipsBox01 p, .tipsCenter01 p, 
.tipsCenter02 p{
	margin-bottom:15px;
}
.buttonEasytest{
	width:50%;
	margin:10px auto 20px;
}
.buttonEasytest a{
	display:block;
	height:50px;
	font-size:24px;
	line-height:50px;
	color: #fff;
	text-align:center;
	border-radius:10px;
	background-color:#d5566a;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:background 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
.buttonEasytest a i{
	padding-left:10px;
	font-size:30px;
	-webkit-transition:padding 0.3s  ease-in-out;
	-moz-transition:padding 0.3s  ease-in-out;
	-ms-transition:padding 0.3s  ease-in-out;
	transition:padding 0.3s  ease-in-out;
}
.buttonEasytest a:hover{
	letter-spacing:5px;
	background-color:#00b6b1;
}
.buttonEasytest a:active{
	background-color:#009999;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}
/*----------------------  主要內容框架設定 end  ----------------------*/



/*---------------------    13種職業角色頁籤設定    ---------------------*/
.tabJobClass{
	width:100%;
	margin:0 auto;
	transition:all 0.4s ease;
	border:0px solid red;
}
.tabJobClass input[type="radio"]{
	display:none;
}
.tabOutBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
.tabJobButton{
	/*float: left;*/
	/*display:block;*/
	/*width:118px;*/
	display: block;
	width:calc((100% / 11) - 2px);
	margin-right:2px;
	margin-top: 2px;
	margin-bottom:2px;
	text-align:center;
	color:#25272a;
	font-weight:normal;
	border-radius:5px 5px 0 0;
	border:1px solid #bbbec9;
	border-bottom:none;
	background-color:#fafafa;
}

.tabJobButtonEnd{
	/*float: left;*/
	/*display:block;*/
	/*width:118px;*/
	display: inline-block;
	width:calc((100% / 11) - 2px);
	margin-right:0;
	text-align:center;
	color:#25272a;
	border-radius:5px 5px 0 0;
	border:1px solid #bbbec9;
	border-bottom:none;
	background-color:#fafafa;
}
.tabJobButton:hover, .tabJobButtonEnd:hover{
	color:#fff !important;
	border:1px solid #00b6b1;
	border-bottom:none;
	background-color:#00b6b1;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
	cursor:pointer;
}
.jobClassImg{
	width:100%;
}
.jobClassImg img{
	max-width:100%;
	height:auto;
}
.jobClassName{
	width:100%;
	padding:5px 0;
	text-align:center;
	font-size:16px;
	line-height:20px;
}
#tab22 .jobClassName{
	transform: scale(.85);
	width:calc(100% / 0.85);
	margin-left:-7.5%;
}
.tabJobContent {
	width:100%;
	border-top:#EEEEEE;
}
.tabJobContent > div{
	/*display:none;*/
}
#tabJobContent01, #tabJobContent02,
#tabJobContent03, #tabJobContent04,
#tabJobContent05, #tabJobContent06,
#tabJobContent07, #tabJobContent08,
#tabJobContent09, #tabJobContent10,
#tabJobContent11, #tabJobContent12,
#tabJobContent13, #tabJobContent14,
#tabJobContent15, #tabJobContent16,
#tabJobContent17, #tabJobContentInner{
	width:100%;
	padding:40px 30px;
	background-color:#fff;
	-webkit-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
}
#tabJobContentInner{
	/*border-top:2px solid #bbbec9;*/
}
#tabJobContent01{
	border-top:2px solid #f29c24;
}
#tabJobContent02{
	border-top:2px solid #df7222;
}
#tabJobContent03{
	border-top:2px solid #00b2b6;
}
#tabJobContent04{
	border-top:2px solid #bd8bb1;
}
#tabJobContent05{
	border-top:2px solid #ed9abe;
}
#tabJobContent06{
	border-top:2px solid #ff847c;
}
#tabJobContent07{
	border-top:2px solid #84b362;
}
#tabJobContent08{
	border-top:2px solid #ff968c;
}
#tabJobContent09{
	border-top:2px solid #e5b34f;
}
#tabJobContent10{
	border-top:2px solid #5f69b8;
}
#tabJobContent11{
	border-top:2px solid #8ec31e;
}
#tabJobContent12{
	border-top:2px solid #37c4d3;
}
#tabJobContent13{
	border-top:2px solid #dda0c6;
}
#tabJobContent14{
	border-top:2px solid #d9777f;
}
#tabJobContent15{
	border-top:2px solid #c5962e;
}
#tabJobContent16{
	border-top:2px solid #ba82d9;
}
#tabJobContent17{
	border-top:2px solid #2badd9;
}
[type=radio]:checked + .tabJobButton,
[type=radio]:checked + .tabJobButtonEnd{
	cursor:default;
	font-weight:bold;
	color:#fff;
	border-width:1px;
	border-style:solid;
	border-bottom:none;
	-webkit-transition:all 0.3s  ease-in-out;
	-moz-transition:all 0.3s  ease-in-out;
	-ms-transition:all 0.3s  ease-in-out;
	transition:all 0.3s  ease-in-out;
}
#tab01:checked + .tabJobButton{
	border-color:#f29c24;
	background-color:#f29c24;
}
#tab02:checked + .tabJobButton{
	border-color:#df7222;
	background-color:#df7222;
}
#tab03:checked + .tabJobButton{
	border-color:#00b2b6;
	background-color:#00b2b6;
}
#tab04:checked + .tabJobButton{
	border-color:#bd8bb1;
	background-color:#bd8bb1;
}
#tab05:checked + .tabJobButton{
	border-color:#ed9abe;
	background-color:#ed9abe;
}
#tab06:checked + .tabJobButton{
	border-color:#ff847c;
	background-color:#ff847c;
}
#tab07:checked + .tabJobButton{
	border-color:#84b362;
	background-color:#84b362;
}
#tab08:checked + .tabJobButton{
	border-color:#ff968c;
	background-color:#ff968c;
}
#tab09:checked + .tabJobButton{
	border-color:#e5b34f;
	background-color:#e5b34f;
}
#tab10:checked + .tabJobButton{
	border-color:#5f69b8;
	background-color:#5f69b8;
}
#tab11:checked + .tabJobButton{
	border-color:#8ec31e;
	background-color:#8ec31e;
}
#tab12:checked + .tabJobButton{
	border-color:#37c4d3;
	background-color:#37c4d3;
}
#tab13:checked + .tabJobButton{
	border-color:#37c4d3;
	background-color:#37c4d3;
}
#tab14:checked + .tabJobButton{
	border-color:#d9777f;
	background-color:#d9777f;
}
#tab15:checked + .tabJobButton{
	border-color:#c5962e;
	background-color:#c5962e;
}
#tab16:checked + .tabJobButton{
	border-color:#ba82d9;
	background-color:#ba82d9;
}
#tab17:checked + .tabJobButton{
	border-color:#2badd9;
	background-color:#2badd9;
}
#tab18:checked + .tabJobButton{
	border-color:#f9ba00;
	background-color:#f9ba00;
}
#tab19:checked + .tabJobButton{
	border-color:#d69854;
	background-color:#d69854;
}
#tab20:checked + .tabJobButton{
	border-color:#62b51a;
	background-color:#62b51a;
}
#tab21:checked + .tabJobButton{
	border-color:#f7d02d;
	background-color:#f7d02d;
}
#tab22:checked + .tabJobButtonEnd{
	border-color:#feb914;
	background-color:#feb914;
}
#tab01:checked ~ .tabJobContent #tabJobContent01,
#tab02:checked ~ .tabJobContent #tabJobContent02,
#tab03:checked ~ .tabJobContent #tabJobContent03,
#tab04:checked ~ .tabJobContent #tabJobContent04,
#tab05:checked ~ .tabJobContent #tabJobContent05,
#tab06:checked ~ .tabJobContent #tabJobContent06,
#tab07:checked ~ .tabJobContent #tabJobContent07,
#tab08:checked ~ .tabJobContent #tabJobContent08,
#tab09:checked ~ .tabJobContent #tabJobContent09,
#tab10:checked ~ .tabJobContent #tabJobContent10,
#tab11:checked ~ .tabJobContent #tabJobContent11,
#tab12:checked ~ .tabJobContent #tabJobContent12,
#tab13:checked ~ .tabJobContent #tabJobContent13,
#tab14:checked ~ .tabJobContent #tabJobContent14,
#tab15:checked ~ .tabJobContent #tabJobContent15,
#tab16:checked ~ .tabJobContent #tabJobContent16,
#tab17:checked ~ .tabJobContent #tabJobContent17,
#tab18:checked ~ .tabJobContent #tabJobContent18,
#tab19:checked ~ .tabJobContent #tabJobContent19,
#tab20:checked ~ .tabJobContent #tabJobContent20,
#tab21:checked ~ .tabJobContent #tabJobContent21,
#tab22:checked ~ .tabJobContent #tabJobContent22,
#tabJobContentInner{
	display:block;
	animation:fadeIn 1s ease;
	-webkit-animation:fadeIn 1s ease;
	-ms-animation:fadeIn 1s ease;
}
/*--------------------------    13種職業角色頁籤設定 end    --------------------------*/



/*---------------------    與頁籤連動的浮動按鈕設定    ---------------------*/
.tabfloatLink {
	position: fixed;
	width:112px;
	right: 20px;
	top: 320px;
	z-index: 9999;
	text-align:center;
}
.tabfloatLink > div{
	/*display:none;*/
}
.tabfloatLink img{
	border:0;
	max-width:100%;
	height:auto;
}
.tabfloatLink > .floatApply{
	display:block;
}
.floatApply a{
	width: 100%;
	display: block;
	margin-bottom:10px;
	text-decoration: none;
	border-radius:10px;
	overflow:hidden;
	border-top:1px solid #8bc6af;
	border-right:1px solid #2e6a52;
	border-bottom:1px solid #2e6a52;
	border-left:1px solid #8bc6af;
	-webkit-box-shadow: 2px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 2px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 2px 2px 0px rgba(51,51,51,.2); 
}
#floatLink a,#floatLink01 a, #floatLink02 a,
#floatLink03 a, #floatLink04 a,
#floatLink05 a, #floatLink06 a,
#floatLink07 a, #floatLink08 a,
#floatLink09 a, #floatLink10 a,
#floatLink11 a, #floatLink12 a,
#floatLink13 a, #floatLink14 a,
#floatLink15 a, #floatLink16 a,
#floatLink17 a{
	width: 100%;
	display: block;
	margin-bottom:10px;
	text-decoration: none;
	border-radius:10px;
	overflow:hidden;
	-webkit-box-shadow: 2px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 2px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 2px 2px 0px rgba(51,51,51,.2); 
}
.floatLink01 a{
	border-top:1px solid #f6b760;
	border-right:1px solid #9a6317;
	border-bottom:1px solid #9a6317;
	border-left:1px solid #f6b760;
}
.floatLink02 a{
	border-top:1px solid #e8985e;
	border-right:1px solid #8e4916;
	border-bottom:1px solid #8e4916;
	border-left:1px solid #e8985e;
}
.floatLink03 a{
	border-top:1px solid #46c7ca;
	border-right:1px solid #007174;
	border-bottom:1px solid #007174;
	border-left:1px solid #46c7ca;
}
.floatLink04 a{
	border-top:1px solid #cfabc6;
	border-right:1px solid #785871;
	border-bottom:1px solid #785871;
	border-left:1px solid #cfabc6;
}
.floatLink05 a{
	border-top:1px solid #f2b6d0;
	border-right:1px solid #976279;
	border-bottom:1px solid #976279;
	border-left:1px solid #f2b6d0;
}
.floatLink06 a{
	border-top:1px solid #ffa6a0;
	border-right:1px solid #a2544f;
	border-bottom:1px solid #a2544f;
	border-left:1px solid #ffa6a0;
}
.floatLink07 a{
	border-top:1px solid #a6c88d;
	border-right:1px solid #54723e;
	border-bottom:1px solid #54723e;
	border-left:1px solid #a6c88d;
}
.floatLink08 a{
	border-top:1px solid #ffb3ab;
	border-right:1px solid #a25f59;
	border-bottom:1px solid #a25f59;
	border-left:1px solid #ffb3ab;
}
.floatLink09 a{
	border-top:1px solid #ecc87f;
	border-right:1px solid #927232;
	border-bottom:1px solid #927232;
	border-left:1px solid #ecc87f;
}
.floatLink10 a{
	border-top:1px solid #8b92cb;
	border-right:1px solid #3c4375;
	border-bottom:1px solid #3c4375;
	border-left:1px solid #8b92cb;
}
.floatLink11 a{
	border-top:1px solid #add35b;
	border-right:1px solid #5a7c13;
	border-bottom:1px solid #5a7c13;
	border-left:1px solid #add35b;
}
.floatLink12 a{
	border-top:1px solid #6ed4df;
	border-right:1px solid #237d86;
	border-bottom:1px solid #237d86;
	border-left:1px solid #6ed4df;
}
.floatLink13 a{
	border-top:1px solid #e6bad6;
	border-right:1px solid #8d667e;
	border-bottom:1px solid #8d667e;
	border-left:1px solid #e6bad6;
}
.floatLink14 a{
	border-top:1px solid #e5b8bb;
	border-right:1px solid #8c6266;
	border-bottom:1px solid #8c6266;
	border-left:1px solid #e5b8bb;
}
.floatLink15 a{
	border-top:1px solid #e5d7b8;
	border-right:1px solid #8c7f62;
	border-bottom:1px solid #8c7f62;
	border-left:1px solid #e5d7b8;
}
.floatLink16 a{
	border-top:1px solid #d5b8e5;
	border-right:1px solid #7e628c;
	border-bottom:1px solid #7e628c;
	border-left:1px solid #d5b8e5;
}
.floatLink17 a{
	border-top:1px solid #b8dae5;
	border-right:1px solid #62828c;
	border-bottom:1px solid #62828c;
	border-left:1px solid #b8dae5;
}
#tab01:checked ~ .tabfloatLink #floatLink01,
#tab02:checked ~ .tabfloatLink #floatLink02,
#tab03:checked ~ .tabfloatLink #floatLink03,
#tab04:checked ~ .tabfloatLink #floatLink04,
#tab05:checked ~ .tabfloatLink #floatLink05,
#tab06:checked ~ .tabfloatLink #floatLink06,
#tab07:checked ~ .tabfloatLink #floatLink07,
#tab08:checked ~ .tabfloatLink #floatLink08,
#tab09:checked ~ .tabfloatLink #floatLink09,
#tab10:checked ~ .tabfloatLink #floatLink10,
#tab11:checked ~ .tabfloatLink #floatLink11,
#tab12:checked ~ .tabfloatLink #floatLink12,
#tab13:checked ~ .tabfloatLink #floatLink13,
#tab14:checked ~ .tabfloatLink #floatLink14
#tab15:checked ~ .tabfloatLink #floatLink15,
#tab16:checked ~ .tabfloatLink #floatLink16,
#tab17:checked ~ .tabfloatLink #floatLink17{
	display:block;
	animation:fadeIn 1s ease;
	-webkit-animation:fadeIn 1s ease;
	-ms-animation:fadeIn 1s ease;
}
/*---------------------    與頁籤連動的浮動按鈕設定 end    ---------------------*/



/*--------------------------   首頁相關設定   --------------------------*/
.abilityCompanyBox{
	width:100%;
}
.abilityCompanyBox ul{
	list-style:none;
}
.abilityCompanyBox li{
	float:left;
	width:220px;
	margin-right:10px;
}
.abilityCompanyBox li:last-child{
	margin-right:0;
}
.abilityCompanyLogo{
	width:100%;
	padding:5px;
	overflow:hidden;
}
.abilityCompanyLogo img{
	width:100%;
	height:auto;
}
.abilityCompanyName{
	width:100%;
	margin-top:5px;
	text-align:center;
	font-size:18px;
	line-height:27px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.abilityCompanyBox li a .abilityCompanyLogo{
	border:1px solid #bbbec9;
}
.abilityCompanyBox li a:hover .abilityCompanyLogo{
	border:1px solid #00b6b1;
}

.abilityCompanyBox li a .abilityCompanyName{
	text-decoration:none;
	color:#047f90;
}
.abilityCompanyBox li a:hover .abilityCompanyName{
	text-decoration:none;
	color:#c43170;
}
.tabContentLeft{
	float:left;
	width:555px;
}
.tabContentRight{
	float:right;
	width:555px;
}
.personalIdentityBox{
	float:left;
	width:250px;
}
.companyIdentityBox{
	float:right;
	width:285px;
}
.identifyDiagram{
	width:100%;
	border:1px solid #bbbec9;
}
.identifyDiagram img{
	width:100%;
	height:auto;
}
.identifyTitle{
	text-align:center;
	font-size:20px;
	line-height:30px;
	color:#334785;
}
.identifyTopic{
	font-size:20px;
	line-height:30px;
	color:#25272a;
}
.personalIdentityBox ul, .companyIdentityBox ul{
	list-style:none;
}
.personalIdentityBox li:before, .companyIdentityBox li:before{
	content:"\f005";
	width:21px;
	margin-left:-21px;
	margin-right:3px;
	font-family:FontAwesome;
	font-size:18px;
	line-height:24px;
	color:#ff8288;
}
.personalIdentityBox li,  .companyIdentityBox li{
	margin-bottom:12px;
	padding-left:21px;
	font-size:18px;
	line-height:24px;
	color:#505c63;
}
.buttonGo{
	width:95%;
	margin:20px auto 0;
}
.buttonGo a{
	display:block;
	height:46px;
	font-size:24px;
	line-height:45px;
	color: #fff;
	text-align:center;
	border-radius:10px;
	background-color:#d5566a;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:background 0.3s  ease-in-out;
	-moz-transition:background 0.3s  ease-in-out;
	-ms-transition:background 0.3s  ease-in-out;
	transition:background 0.3s  ease-in-out;
}
.buttonGo a i{
	padding-left:5px;
	font-size:24px;
	-webkit-transition:padding 0.3s  ease-in-out;
	-moz-transition:padding 0.3s  ease-in-out;
	-ms-transition:padding 0.3s  ease-in-out;
	transition:padding 0.3s  ease-in-out;
}
.buttonGo a:hover{
	background-color:#00b6b1;
}
.buttonGo a:active{
	background-color:#009999;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}
.expertSayScroll {
	position: relative;
	width: 100%;
	height: 648px;
	overflow: hidden;
}
.expertSayScroll ul {
	position: absolute;
	width: 100%;
	margin:0;
}
.expertSayScroll li {
	width:100%;
	margin:0;
	padding:0;
}
.expertSayScroll li a {
	display:block;
	width:100%;
	height: 108px;
	padding: 10px;
	background-color:#f5f5f5;
	border-bottom:1px solid #c7cad3;
}
.expertSayScroll li a:hover {
	background-color:#ebffff;
}
.expertImg{
	float:left;
	width:21%;
	margin-right:2%;
	height:88px;
	border:1px solid #bbbec9;
	overflow:hidden;
}
.expertImg img{
	width:100%;
	height:auto;
}
.expertContent{
	float:left;
	width:77%;
}
.expertTitle{
	width:100%;
	font-size:20px;
	line-height:28px;
	color:#067147;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.expertTitle:before{
	content:"\f0a9";
	margin-right:5px;
	font-family:FontAwesome;
	font-size:20px;
	color:#067147;
}
.experShare{
	width:100%;
	height:48px;
	margin-top:6px;
	margin-bottom:6px;
	font-size:18px;
	line-height:24px;
	color:#505c63;
	overflow:hidden;
}

/*--------------------------   首頁相關設定 end  --------------------------*/



/*--------------------------   最新職缺相關設定   --------------------------*/
.jobSearchBar{
	width:100%;
	margin-bottom:25px;
}
.jobSearchPart01{
	float:left;
	width:31%;
	margin-right:1%;
}
.jobSearchPart02{
	float:left;
	width:18%;
	margin-right:1%;
}
.jobSearchPart03{
	float:left;
	width:18%;
	margin-right:1%;
}
.jobSearchPart04{
	float:left;
	width:18%;
	margin-right:1%;
}
.jobSearchPart05{
	float:left;
	width:11%;
}
.jobListTitleRow{
	width:100%;
	height:49px;
	font-size:20px;
	line-height:47px;
	color:#fff;
	background-color:#009999;
	border-bottom:2px solid #74d7d4;
} 
.jobListTitlePart01{
	float:left;
	width:9%;
	text-align:center;
}
.jobListTitlePart02{
	float:left;
	width:27%;
	padding:0 5px;
}
.jobListTitlePart03{
	float:left;
	width:26%;
	padding:0 5px;
}
.jobListTitlePart04{
	float:left;
	width:12%;
	padding:0 5px;
}
.jobListTitlePart05{
	float:left;
	width:13%;
	padding:0 5px;
}
.jobListTitlePart06{
	float:left;
	width:13%;
	padding:0 5px;
}
.jobListContentRow{
	width:100%;
	height:49px;
	border-bottom:1px dotted #ff8288;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.jobListContentRow:nth-child(even){
	background-color:#f5f5f5;
}
.jobListContentRow:nth-child(odd){
	background-color:#fff;
}
.jobListContentRow:hover{
	background-color:#f8fff0;
}
.jobListContentPart01{
	float:left;
	width:9%;
	text-align:center;
	font-size:18px;
	line-height:48px;
    color:#505c63;
    clear:both;
}
.jobListContentPart02{
	float:left;
	width:27%;
	padding:0 5px;
	font-size:18px;
	line-height:48px;
	color:#505c63;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.jobListContentPart02 a{
	text-decoration:none;
	color:#047f90;
}
.jobListContentPart03{
	float:left;
	width:26%;
	padding:0 5px;
	font-size:18px;
	line-height:48px;
	color:#505c63;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.jobListContentPart02 a{
	text-decoration:none;
	color:#c43170;
}
.jobListContentPart02 a:hover, .jobListContentPart03 a:hover{
	text-decoration:none;
	color:#067147;
}
.jobListContentPart04{
	float:left;
	width:12%;
	padding:0 5px;
	font-size:18px;
	line-height:48px;
	color:#25272a;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
    text-overflow:ellipsis;
    display: list-item;
}
.jobListContentPart05{
	float:left;
	width:13%;
	padding:0 5px;
	font-size:18px;
	line-height:48px;
	color:#25272a;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.jobListContentPart06{
	float:left;
	width:13%;
	text-align:center;
}
.jobListContentPart06b{
	float:left;
	width:13%;
	padding:0 5px;
	font-size:18px;
	line-height:48px;
	color:#505c63;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.buttonApply{
	display:inline-block;
	width:90%;
	margin:2px 0;
}
.buttonApply a{
	display:block;
	height:42px;
	text-align:center;
	font-size:20px;
	line-height:41px;
	color: #fff;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	border-radius:10px;
	background-color:#d5566a;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:background 0.3s  ease-in-out;
	-moz-transition:background 0.3s  ease-in-out;
	-ms-transition:background 0.3s  ease-in-out;
	transition:background 0.3s  ease-in-out;
}
.buttonApply a:hover{
	border-radius:10px;
	background-color:#48a681;
}
.buttonApply a:active{
	background-color:#469462;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}

/*--------------------------   最新職缺相關設定 end   --------------------------*/



/*--------------------------   企業／學校認同相關設定   --------------------------*/
.abilityOrganizationBox{
	width:100%;
}
.abilityOrganizationBox ul{
	list-style:none;
}
.abilityOrganizationBox li{
	float:left;
	width:220px;
	margin-right:10px;
	margin-bottom:10px;
}
.abilityOrganizationBox li:nth-child(5n){
	margin-right:0;
}
.abilityOrganizationLogo{
	width:100%;
	height:83px;
	padding:5px 5px 0;
	overflow:hidden;
}
.abilityOrganizationLogo img{
	width:100%;
	height:auto;
}
.abilityOrganizationName{
	width:100%;
	padding:20px 5px;
	text-align:center;
	font-size:20px;
	line-height:30px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.abilityCompanyName{
	width:100%;
	padding:0 2px 5px;
	text-align:center;
	font-size:20px;
	line-height:28px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.abilitySchoolName{
	width:100%;
	padding:5px 2px 0;
	text-align:center;
	font-size:21px;
	line-height:32px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.abilityDepartmentName{
	width:100%;
	padding:0 2px 5px;
	text-align:center;
	font-size:20px;
	line-height:28px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.abilityOrganizationBox li span {
	display:block;
	border:1px dotted #bbbec9;
	background-color:#eee;
}
.abilityOrganizationBox li a {
	display:block;
	border:1px solid #5dd1cd;
	background-color:#fff;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
}
.abilityOrganizationBox li a:hover{
	border:1px solid #df9e7d;
	background-color:#fffff0;
}
.abilityOrganizationBox li span .abilityCompanyName,
.abilityOrganizationBox li span .abilitySchoolName{
	color:#505c63;
}
.abilityOrganizationBox li span .abilityDepartmentName{
	color:#334785;
}
.abilityOrganizationBox li a .abilityCompanyName{
	text-decoration:none;
	color:#4075af;
}
.abilityOrganizationBox li a:hover .abilityCompanyName{
	text-decoration:none;
	color:#d5566a;
}
.abilityOrganizationBox li a .abilitySchoolName{
	text-decoration:none;
	color:#c43170;
}
.abilityOrganizationBox li a:hover .abilitySchoolName{
	text-decoration:none;
	color:#469462;
}
.abilityOrganizationBox li a .abilityDepartmentName{
	text-decoration:none;
	color:#0097a7;
}
.abilityOrganizationBox li a:hover .abilityDepartmentName{
	text-decoration:none;
	color:#d5566a;
}
.benefitTitleBox01{
	width:100%;
}
.benefitTitleBox02{
	width:100%;
	margin-bottom:70px;
}
.benefitTitleBox01 img, .benefitTitleBox02 img{
	width:100%;
	height:auto;
}
.benefitImg11, .benefitImg12,
.benefitImg13, .benefitImg14,
.benefitImg21, .benefitImg22,
.benefitImg23{
	float:left;
	width:43px;
	height:43px;
	margin-right:5px;
	padding:5px;
	text-align:center;
	border-radius:50%;
	overflow:hidden;
}
.benefitImg11{
	background-color:#f57f17;
}
.benefitImg12{
	background-color:#e5677c;
}
.benefitImg13{
	background-color:#00bcd4;
}
.benefitImg14{
	background-color:#7cb342;
}
.benefitImg21, .benefitImg22,
.benefitImg23{
	float:left;
	width:7.75%;
	height:43px;
	margin-right:1%;
	padding:5px;
	text-align:center;
	border-radius:50%;
	overflow:hidden;
}
.benefitImg21{
	background-color:#e5b34f;
}
.benefitImg22{
	background-color:#767cb7;
}
.benefitImg23{
	background-color:#48a681;
}
.benefitText11, .benefitText12,
.benefitText13, .benefitText14{
	float:left;
	font-size:22px;
	line-height:42px;
	color:#25272a;
}
.benefitText11 span{
	color:#d95e00;
}
.benefitText12 span{
	color:#d5566a;
}
.benefitText13 span{
	color:#009999;
}
.benefitText14 span{
	color:#558b2f;
}
.benefitText21, .benefitText22,
.benefitText23{
	float:left;
	width:91%;
	padding-top:3px;
	font-size:22px;
	line-height:32px;
	color:#25272a;
}
.benefitText21 span{
	color:#bb9241;
}
.benefitText22 span{
	color:#575fa7;
}
.benefitText23 span{
	color:#469462;
}
.benefitContent01{
	width:100%;
	margin-bottom:15px;
	padding-left:50px;
	font-size:18px;
	line-height:22px;
	color:#505c63;
}
.benefitContent01 p{
	margin-bottom:10px;
}
.actionBox{
	width:100%;
	margin-bottom:25px;
	padding:15px;
	border-radius:10px;
	background-color:#77abdf;
	-webkit-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
}
.feedbackBox{
	width:100%;
	margin:25px 0;
	padding:15px;
	border-radius:10px;
	background-color:#dd7585;
	-webkit-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
}
.actionTitle{
	width:100%;
	margin-bottom:15px;
	font-size:22px;
	line-height:32px;
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,.8);
}
.actionBox ul, .feedbackBox ul{
	list-style:disc;
	margin-left:25px;
}
.actionBox li, .feedbackBox li{
	margin-bottom:10px;
	font-size:18px;
	line-height:24px;
	color:#fff;
}
.showQRCodeBox{
	width:100%;
	text-align:center;
}
.showQRCodeText{
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
	font-weight:bold;
	font-size:22px;
	line-height:32px;
	color:#d5566a;
}
.showQRCodeImg{
	display:inline-block;
	width:100px;
	vertical-align:middle;
	border-radius:10px;
	border:2px solid #ff8288;
	overflow:hidden;
}
.showQRCodeImg img{
	width:100%;
	height:auto;
}
.benefitBlank{
	display:block;
	width:100%;
	height:50px;
}
.buttonBility{
	width:80%;
	margin:20px auto 0;
}
.buttonBility a{
	display:block;
	height:46px;
	font-size:24px;
	line-height:45px;
	color: #fff;
	text-align:center;
	border-radius:10px;
	background-color:#00b6b1;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-webkit-transition:background 0.3s  ease-in-out;
	-moz-transition:background 0.3s  ease-in-out;
	-ms-transition:background 0.3s  ease-in-out;
	transition:background 0.3s  ease-in-out;
}
.buttonBility a i{
	padding-left:5px;
	font-size:24px;
	-webkit-transition:padding 0.3s  ease-in-out;
	-moz-transition:padding 0.3s  ease-in-out;
	-ms-transition:padding 0.3s  ease-in-out;
	transition:padding 0.3s  ease-in-out;
}
.buttonBility a:hover{
	background-color:#c43170;
}
.buttonBility a:active{
	background-color:#93065e;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}

/*--------------------------   企業／學校認同相關設定 end   --------------------------*/



/*--------------------------   達人親自說頁籤與內容相關設定   --------------------------*/
.tabTalentShareBox{
	width:100%;
}
.tabTalentShareBox input[type="radio"]{
	display:none;
}
.tabTalentClassButton{
	float: left;
	display:block;
	height:46px;
	margin-right:10px;
	margin-bottom:15px;
	padding:0 20px;
	text-align:center;
	font-size:22px;
	line-height:42px;
	color:#0097a7;
	border-radius:7px;
	border:2px solid #00bcd4;
	background-color:#fff;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
}
.tabTalentClassButton:hover{
	cursor:pointer;
	color:#fff;
	border:2px solid #00b9bd;
	background-color:#00b9bd;
}
.btnActive{
	cursor:default;
	font-weight:bold;
	color:#fff;
	border:2px solid #c43170;
	background-color:#c43170;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow:none;	
}
.btnActive a{
	color:#fff;
}
.tabTalentContent {
	width:100%;
	padding:20px 0;
}
.tabTalentContent > div{
	/*display:none;*/
}
#tabTalentContent01, #tabTalentContent02{
	width:100%;
}

[type=radio]:checked + .tabTalentClassButton{
	cursor:default;
	font-weight:bold;
	color:#fff;
	border:2px solid #c43170;
	background-color:#c43170;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow:none;
	
}
#tab01:checked ~ .tabTalentContent #tabTalentContent01,
#tab02:checked ~ .tabTalentContent #tabTalentContent02{
	display:block;
	animation:fadeIn 1s ease;
	-webkit-animation:fadeIn 1s ease;
	-ms-animation:fadeIn 1s ease;
}
.talentSearchBar{
	width:100%;
	padding:0 50px;
	margin-bottom:25px;
}
.talentSearchPart01{
	float:left;
	width:30%;
	margin-right:1%;
}
.talentSearchPart02{
	float:left;
	width:50%;
	margin-right:1%;
}
.talentSearchPart03{
	float:left;
	width:18%;
}
.talentShareList{
	width:100%;
	padding:20px 0;
}
.talentShareList ul {
	width: 100%;
	margin:0;
	border-top:3px solid #78b18d;
}
.talentShareList li {
	width:100%;
	margin:0;
	padding:0;
}
.talentShareList li a {
	display:block;
	width:100%;
	padding:15px;
	border-bottom:1px solid #c7cad3;
}
.talentShareList li:nth-child(odd){
	background-color:#fff;
}
.talentShareList li:nth-child(even){
	background-color:#f5f5f5;
}
.talentShareList li a:hover {
	background-color:#f8fff0;
}
.talentImg{
	float:left;
	width:17%;
	height:102px;
	border:1px solid #bbbec9;
	overflow:hidden;
}
.talentImg img{
	width:100%;
	height:auto;
}
.talentListContent{
	float:right;
	width:80%;
}
.talentTitle{
	float:left;
	width:84%;
	font-size:20px;
	line-height:32px;
	color:#067147;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.talentTitle:before{
	content:"\f0a9";
	margin-right:5px;
	font-family:FontAwesome;
	font-size:20px;
	color:#067147;
}
.talentViewNo{
	float:right;
	width:15%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	line-height:32px;
	color:#d5566a;
	overflow:hidden;
}
.talentViewNo:before{
	content:"瀏覽數：";
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	font-size:18px;
	color:#505c63;
}
.talentShare{
	width:100%;
	height:50px;
	margin-top:10px;
	margin-bottom:10px;
	font-size:18px;
	line-height:25px;
	color:#505c63;
	overflow:hidden;
}
.shareContentBox{
	width:100%;
	padding:20px;
	border:1px solid #78b18d;
	background-color:#fff;
	-webkit-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
}
.talentImgLarge{
	float:left;
	width:30%;
	overflow:hidden;
}
.talentImgLarge img{
	width:100%;
	height:auto;
}
.shareContent{
	float:right;
	width:68%;
}
.shareContentTitle{
	width:100%;
	margin-bottom:10px;
	font-size:22px;
	line-height:30px;
	color:#067147;
}
.shareContentTitle:before{
	content:"\f0a9";
	margin-right:5px;
	vertical-align:baseline;
	font-family:FontAwesome;
	font-size:24px;
	color:#067147;
}

.shareDetail{
	width:100%;
	font-size:20px;
	line-height:28px;
	color:#505c63;
}
.shareDetail p{
	margin-bottom:25px;
}
.shareInfo{
	width:100%;
	margin-top:25px;
	font-size:20px;
	line-height:28px;
	color:#25272a;
}
.FB-comments{
	width:100%;
	padding:20px;
	border:1px solid #bbbec9;
	background-color:#fff;
    overflow: hidden;
	-webkit-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
}
.FB-comments img{
	width:100%;
	height:auto;
}
/*--------------------------   達人親自說頁籤與內容相關設定 end   --------------------------*/



/*----------------------  我要報考相關設定  ----------------------*/
.applyTitle{
	width:100%;
	font-weight:bold;
	font-size:22px;
	line-height:32px;
	color:#334785;
}
.applyTitle:before{
	content:"▍";
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
	font-size:18px;
	line-height:24px;
	color:#ff8288;
}
.applyContent01{
	width:100%;
	margin-bottom:30px;
	font-size:18px;
	line-height:28px;
	color:#414b51;
}
.applyContent01 p{
	margin-bottom:15px;
}
.applyContent01 ol{
	margin-left:28px;
	list-style:decimal;
}
.applyContent01 li{
	margin-bottom:10px;
}
.projectItemBox{
	width:100%;
	margin-top:15px;
	margin-bottom:25px;
}
.projectItemButton{
	float:left;
}
a.projectItemButton{
	display:block;
	height:46px;
	margin-right:10px;
	margin-bottom:15px;
	padding:0 20px;
	text-align:center;
	font-size:22px;
	line-height:42px;
	color:#0097a7;
	border-radius:7px;
	border:2px solid #00bcd4;
	background-color:#fff;
	-webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
	box-shadow: 1px 2px 0px rgba(51,51,51,.2); 
}
a:hover.projectItemButton{
	color:#fff;
	border:2px solid #00b9bd;
	background-color:#00b9bd;
}
a:active.projectItemButton{
	color:#fff;
	border:2px solid #00b9bd;
	background-color:#00b9bd;
	-webkit-box-shadow: none; 
	-moz-box-shadow: none; 
	box-shadow: none; 
}
span.projectItemButton{
	display:block;
	height:46px;
	margin-right:10px;
	margin-bottom:15px;
	padding:0 20px;
	text-align:center;
	font-size:22px;
	line-height:42px;
	color:#505c63;
	border-radius:7px;
	border:2px solid #bbbec9;
	background-color:#fff;
}
/*----------------------  我要報考相關設定 end  ----------------------*/



/*--------------------------   頁尾設定   --------------------------*/
footer{
	width:100%;
	padding:20px 0;
	border-top:5px solid #93065e;
	text-align:center;
}
.footerLogo{
	display:inline-block;
	margin-right:20px;
	height:38px;
}
.footerLogo:last-child{
	margin-right:0;
}
.footerLogo img{
	max-height:100%;
	width:auto;
}
/*--------------------------   頁尾設定 end   --------------------------*/


/*============================================================ 桌機版型區end =================================================================*/






/*=============================================================== 平板版型區 ===============================================================*/

@media screen and (min-width: 992px) and (max-width: 1200px) {

/*----------------------  版頭導覽列設定  ----------------------*/
#mainNav{
	width:100%;
	padding-right:0;
}
#navButton a{
	padding:0 15px;
	font-size:21px;
	line-height:51px;
}
#navButton span{
	padding:0 15px;
	font-size:21px;
	line-height:51px;
}

/*----------------------  版頭導覽列設定 end  ----------------------*/



/*----------------------  主要內容框架設定  ----------------------*/
article{
	width:100%;
}
section{
	width:100%;
	padding:0 1.5%;
}
.titleOne span, .titleTwo span{
	display:inline-block;
	font-size:22px;
	line-height:46px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.titleText{
	float:left;
	font-size:22px;
	line-height:46px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.titleOne span i, .titleOne > .titleText i{
	padding-right:2px;
	font-size:23px;
}
.titleTwo span i, .titleTwo > .titleText i{
	padding-right:2px;
	font-size:23px;
}
.tipsBox01 p, .tipsCenter01 p,
.tipsCenter02 p{
	margin-bottom:25px;
}
.buttonEasytest{
	width:60%;
	margin:30px auto 0;
}
/*----------------------  主要內容框架設定 end  ----------------------*/



/*---------------------    13種職業角色頁籤設定    ---------------------*/
.tabJobButton{
	/*width:13.5%;
	margin-right:0.6%;*/
	width:calc((100% / 9) - 4px);
	margin-right:2px;
	margin-bottom:6px;
	border-radius:5px;
	border-bottom:1px solid #bbbec9;
}
.tabJobButtonEnd{
	/*width:13.5%;
	margin-right:0;*/
	width:calc((100% / 9) - 4px);
	margin-right:0;
	margin-bottom:6px;
	border-radius:5px;
	border-bottom:1px solid #bbbec9;
}
.tabJobButton:hover, .tabJobButtonEnd:hover{
	border-bottom:1px solid #00b6b1;
}
#tabJobContent01, #tabJobContent02,
#tabJobContent03, #tabJobContent04,
#tabJobContent05, #tabJobContent06,
#tabJobContent07, #tabJobContent08,
#tabJobContent09, #tabJobContent10,
#tabJobContent11, #tabJobContent12,
#tabJobContent13{
	width:100%;
	padding:40px 20px;
}
.jobClassName{
	padding:4px 0;
	font-size:15px;
	line-height:18px;
}
/*--------------------------    13種職業角色頁籤設定 end    --------------------------*/



/*---------------------    與頁籤連動的浮動按鈕設定    ---------------------*/
.tabfloatLink {
	width:112px;
	right: 5px;
	top: 329px;
}
/*---------------------    與頁籤連動的浮動按鈕設定 end    ---------------------*/



/*--------------------------   首頁相關設定   --------------------------*/
.abilityCompanyBox li{
	float:left;
	width:19.2%;
	margin-right:1%;
}
.abilityCompanyBox li:last-child{
	margin-right:0;
}
.tabContentLeft{
	float:left;
	width:49%;
}
.tabContentRight{
	float:right;
	width:49%;
}
.personalIdentityBox{
	float:left;
	width:45%;
}
.companyIdentityBox{
	float:right;
	width:51%;
}
.buttonGo{
	width:100%;
}
/*--------------------------   首頁相關設定 end  --------------------------*/



/*--------------------------   最新職缺相關設定   --------------------------*/
.jobListTitlePart01{
	width:9%;
}
.jobListTitlePart02{
	width:27%;
	padding:0 2px;
}
.jobListTitlePart03{
	float:left;
	width:26%;
	padding:0 2px;
}
.jobListTitlePart04{
	float:left;
	width:12%;
	padding:0 2px;
}
.jobListTitlePart05{
	float:left;
	width:12%;
	padding:0 2px;
}
.jobListTitlePart06{
	float:left;
	width:14%;
}
.jobListContentPart01{
	float:left;
	width:9%;
}
.jobListContentPart02{
	float:left;
	width:27%;
	padding:0 2px;
}
.jobListContentPart03{
	float:left;
	width:26%;
	padding:0 2px;
}
.jobListContentPart04{
	float:left;
	width:12%;
	padding:0 2px;
}
.jobListContentPart05{
	float:left;
	width:12%;
	padding:0 2px;
}
.jobListContentPart06{
	float:left;
	width:14%;
}
.jobListContentPart06b{
	float:left;
	width:14%;
	padding:0 2px;
}
.buttonApply{
	display:inline-block;
	width:90%;
	margin:2px 0;
}
/*--------------------------   最新職缺相關設定 end   --------------------------*/



/*--------------------------   企業／學校認同相關設定   --------------------------*/
.abilityOrganizationBox li{
	float:left;
	width:19.2%;
	margin-right:1%;
}
.abilityOrganizationBox li:nth-child(5n){
	margin-right:0;
}
.abilityOrganizationLogo{
	width:100%;
	height:auto;
	padding:5px 5px 0;
	overflow:hidden;
}
.benefitTitleBox02{
	width:100%;
	margin-bottom:80px;
}
.benefitImg21, .benefitImg22,
.benefitImg23{
	float:left;
	width:43px;
	height:43px;
	margin-right:1%;
	padding:5px;
}
.benefitText21, .benefitText22,
.benefitText23{
	float:left;
	width:89%;
	padding-top:5px;
}
.benefitBlank{
	width:100%;
	height:26px;
}
.buttonBility{
	width:90%;
	margin:20px auto 0;
}
/*--------------------------   企業／學校認同相關設定 end   --------------------------*/



/*--------------------------   達人親自說頁籤與內容相關設定   --------------------------*/
.talentSearchBar{
	width:100%;
	padding:0 30px;
	margin-bottom:25px;
}
.talentImg{
	float:left;
	width:17%;
	height:102px;
	border:1px solid #bbbec9;
	overflow:hidden;
}
.talentListContent{
	float:right;
	width:82%;
}
.talentTitle{
	float:left;
	width:81%;
}
.talentViewNo{
	float:right;
	width:18%;
}
.talentImgLarge{
	float:left;
	width:32%;
}
.shareContent{
	float:right;
	width:66%;
}
/*--------------------------   達人親自說頁籤與內容相關設定 end   --------------------------*/



/*--------------------------   頁尾設定   --------------------------*/
footer{
	width:100%;
	padding:20px 1.5% 10px;
}
.footerLogo{
	display:inline-block;
	height:38px;
	margin:0 5px 15px; 
}
/*--------------------------   頁尾設定 end   --------------------------*/

}

@media screen and (min-width: 768px) and (max-width: 991px) {

/*----------------------  版頭導覽列設定  ----------------------*/
#mainNav{
	width:100%;
	padding-right:0;
}
#navButton a{
	padding:0 7px;
	font-size:20px;
	line-height:51px;
	letter-spacing:-1px;
}
#navButton span{
	padding:0 7px;
	font-size:20px;
	line-height:51px;
	letter-spacing:-1px;
}

/*----------------------  版頭導覽列設定 end  ----------------------*/



/*----------------------  主要內容框架設定  ----------------------*/
article{
	width:100%;
	min-height:70%;
}
section{
	width:100%;
	padding:0 1.5%;
}
.tipsBox01 p, .tipsCenter01 p,
.tipsCenter02 p{
	margin-bottom:30px;
}
.buttonEasytest{
	width:80%;
	margin:30px auto 0;
}
/*----------------------  主要內容框架設定 end  ----------------------*/



/*---------------------    13種職業角色頁籤設定    ---------------------*/
.tabJobButton{
	/*width:13.6%;
	margin-right:0.6%;*/
	width:calc((100% / 7 ) - 4px);
	margin-right:2px;
	margin-bottom:6px;
	border-radius:5px;
	border-bottom:1px solid #bbbec9;
}
.tabJobButtonEnd{
	/*width:13.6%;
	margin-right:0;*/
	width:calc((100% / 7 ) - 4px);
	margin-right:0;
	margin-bottom:6px;
	border-radius:5px;
	border-bottom:1px solid #bbbec9;
}
.tabJobButton:hover, .tabJobButtonEnd:hover{
	border-bottom:1px solid #00b6b1;
}
#tabJobContent01, #tabJobContent02,
#tabJobContent03, #tabJobContent04,
#tabJobContent05, #tabJobContent06,
#tabJobContent07, #tabJobContent08,
#tabJobContent09, #tabJobContent10,
#tabJobContent11, #tabJobContent12,
#tabJobContent13{
	width:100%;
	padding:40px 10px;
}
.jobClassName{
	padding:3px 0;
	font-size:13px;
	line-height:16px;
}
/*--------------------------    13種職業角色頁籤設定 end    --------------------------*/



/*---------------------    與頁籤連動的浮動按鈕設定    ---------------------*/
.tabfloatLink {
	width:90px;
	right: 5px;
	top: 329px;
}
/*---------------------    與頁籤連動的浮動按鈕設定 end    ---------------------*/



/*--------------------------   首頁相關設定   --------------------------*/
.abilityCompanyBox li{
	float:left;
	width:24.25%;
	margin-right:1%;
}
.abilityCompanyBox li:nth-child(4){
	margin-right:0;
}
.abilityCompanyBox li:last-child{
	display:none;
}
.tabContentLeft{
	float:none;
	width:100%;
	margin-bottom:50px;
}
.tabContentRight{
	float:none;
	width:100%;
}
.personalIdentityBox{
	float:left;
	width:45%;
}
.companyIdentityBox{
	float:right;
	width:51%;
}
.buttonGo{
	width:100%;
}
/*--------------------------   首頁相關設定 end  --------------------------*/



/*--------------------------   最新職缺相關設定   --------------------------*/
.jobListTitlePart01{
	width:9%;
}
.jobListTitlePart02{
	width:27%;
	padding:0 2px;
}
.jobListTitlePart03{
	float:left;
	width:26%;
	padding:0 2px;
}
.jobListTitlePart04{
	float:left;
	width:11%;
	padding:0 2px;
}
.jobListTitlePart05{
	float:left;
	width:12%;
	padding:0 2px;
}
.jobListTitlePart06{
	float:left;
	width:15%;
}
.jobListContentPart01{
	float:left;
	width:9%;
}
.jobListContentPart02{
	float:left;
	width:27%;
	padding:0 2px;
}
.jobListContentPart03{
	float:left;
	width:26%;
	padding:0 2px;
}
.jobListContentPart04{
	float:left;
	width:11%;
	padding:0 2px;
}
.jobListContentPart05{
	float:left;
	width:12%;
	padding:0 2px;
}
.jobListContentPart06{
	float:left;
	width:15%;
}
.jobListContentPart06b{
	float:left;
	width:15%;
	padding:0 2px;
}
.buttonApply{
	display:inline-block;
	width:98%;
	margin:2px 0;
}
/*--------------------------   最新職缺相關設定 end   --------------------------*/



/*--------------------------   企業／學校認同相關設定   --------------------------*/
.abilityOrganizationBox li{
	float:left;
	width:24.25%;
	margin-right:1%;
	margin-bottom:10px;
}
.abilityOrganizationBox li:nth-child(5n){
	margin-right:1%;
}
.abilityOrganizationBox li:nth-child(4n){
	margin-right:0;
}
.abilityOrganizationLogo{
	width:100%;
	height:auto;
	padding:5px 5px 0;
	overflow:hidden;
}
.benefitTitleBox02{
	width:100%;
	margin-bottom:30px;
}
.benefitImg21, .benefitImg22,
.benefitImg23{
	float:left;
	width:43px;
	height:43px;
	margin-right:1%;
	padding:5px;
}
.benefitText21, .benefitText22,
.benefitText23{
	float:left;
	width:89%;
	padding-top:5px;
}
.benefitBlank{
	display:none;
}
.buttonBility{
	width:90%;
	margin:20px auto 0;
}
/*--------------------------   企業／學校認同相關設定 end   --------------------------*



/*--------------------------   達人親自說頁籤與內容相關設定   --------------------------*/
.talentSearchBar{
	width:100%;
	padding:0 10px;
	margin-bottom:25px;
}
.talentImg{
	float:left;
	width:20%;
	height:102px;
	border:1px solid #bbbec9;
	overflow:hidden;
}
.talentListContent{
	float:right;
	width:77%;
}
.talentTitle{
	float:left;
	width:76.5%;
}
.talentViewNo{
	float:right;
	width:22.5%;
}
.talentImgLarge{
	float:left;
	width:31%;
}
.shareContent{
	float:right;
	width:67%;
}
/*--------------------------   達人親自說頁籤與內容相關設定 end   --------------------------*/



/*--------------------------   頁尾設定   --------------------------*/
footer{
	width:100%;
	padding:20px 1.5% 10px;
}
.footerLogo{
	display:inline-block;
	height:38px;
	margin:0 5px 15px; 
}
/*--------------------------   頁尾設定 end   --------------------------*/

}
/*============================================================== 平板版型區 end ==============================================================*/






/*================================================================ 手機版型區 ================================================================*/
@media screen and (max-width: 767px){
.goTop{
	position: fixed;
	width: 60px;
	right: 5px;
	bottom: 30px;
}

/*----------------    頁次設定    ----------------*/
.page-line{
	width:100%;
	text-align:center;
	margin:40px auto 0 auto;
}
.page-line span{
	display:inline-block;
	height:45px;
	margin:10px 2px;
	font-size:22px;
	line-height:43px;
}
.page-line a{
	display:inline-block;
	height:45px;
	margin:10px 2px;
	font-size:22px;
	line-height:43px;
}
.pageInput{
	width:90px;
	height:45px;
	margin:10px 0;
	font-size:22px;
	line-height:43px;
}
.buttonPageGo{
	width:70px;
	height:45px;
	margin:10px 0;
	font-size:24px;
	line-height:45px;
}

/*----------------    頁次設定 end    ----------------*/



/*----------------------  版頭導覽列設定  ----------------------*/
#top-menu{
	display:block;
}
#top-menu #btn{
	display:block;
}
#xsHeader{
	display:block;
}
header{
	display:none;
}
nav{
	display:none;
}
/*----------------------  版頭導覽列設定 end  ----------------------*/



/*----------------------  主要內容框架設定  ----------------------*/
article{
	width:100%;
}
section{
	width:100%;
	padding:0;
}
#container{
	width:100%;
	padding:0 2%;
}
.titleOne span, .titleTwo span{
	display:inline-block;
	width:100%;
	font-size:24px;
	line-height:46px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.titleText{
	float:left;
	font-size:24px;
	line-height:46px;
	word-break:keep-all;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.titleOne span i, .titleOne > .titleText i{
	padding-right:2px;
	font-size:22px;
}
.titleTwo span i, .titleTwo > .titleText i{
	padding-right:2px;
	font-size:22px;
}
.tipsBox01 p, .tipsCenter01 p,
.tipsCenter02 p{
	margin-bottom:40px;
}
.buttonEasytest{
	width:100%;
	margin:0 auto;
}
/*----------------------  主要內容框架設定 end  ----------------------*/


/*---------------------    13種職業角色頁籤設定    ---------------------*/
.tabJobButton{
	/*width:23.5%;
	margin-left:.665%;
	margin-right:.665%;*/
	width:calc((100% / 4) - 4px);
	margin-right:2px;
	margin-bottom:5px;
	border-radius:5px;
	border-bottom:1px solid #bbbec9;
}
.tabJobButtonEnd{
	/*width:23.5%;
	margin-left:.665%;
	margin-right:0;*/
	width:calc((100% / 4) - 4px);
	margin-right:0;
	margin-bottom:5px;
	border-radius:5px;
	border-bottom:1px solid #bbbec9;
}
.tabJobButton:hover, .tabJobButtonEnd:hover{
	border-bottom:1px solid #00b6b1;
}
.jobClassName{
	padding:2px 0;
	font-size:12px;
	line-height:14px;
}
#tabJobContent01, #tabJobContent02,
#tabJobContent03, #tabJobContent04,
#tabJobContent05, #tabJobContent06,
#tabJobContent07, #tabJobContent08,
#tabJobContent09, #tabJobContent10,
#tabJobContent11, #tabJobContent12,
#tabJobContent13, #tabJobContent14
#tabJobContent15, #tabJobContent16
#tabJobContent17, #tabJobContent18
#tabJobContent19, #tabJobContent20{
	width:100%;
	padding:40px 10px;
}

/*--------------------------    13種職業角色頁籤設定 end    --------------------------*/



/*---------------------    與頁籤連動的浮動按鈕設定    ---------------------*/
.tabfloatLink {
	width:82px;
	right: 5px;
	top: 200px;
}
/*---------------------    與頁籤連動的浮動按鈕設定 end    ---------------------*/



/*--------------------------   首頁相關設定   --------------------------*/
.abilityCompanyBox li{
	float:left;
	width:49%;
	margin-right:1%;
	margin-bottom:10px;
}
.abilityCompanyBox li:nth-child(even){
	float:left;
	width:49%;
	margin-right:0;
	margin-left:1%;
}
.tabContentLeft{
	float:none;
	width:100%;
}
.tabContentRight{
	float:none;
	width:100%;
}
.personalIdentityBox{
	float:none;
	width:100%;
	margin-bottom:50px;
}
.companyIdentityBox{
	float:none;
	width:100%;
	margin-bottom:50px;
}
.identifyTitle{
	margin-bottom:10px;
	font-size:24px;
	line-height:32px;
}
.identifyTopic{
	font-size:22px;
	line-height:32px;
}
.personalIdentityBox ul, .companyIdentityBox ul{
	list-style:none;
}
.personalIdentityBox li:before, .companyIdentityBox li:before{
	width:22px;
	margin-left:-22px;
	margin-right:3px;
	font-size:20px;
	line-height:26px;
}
.personalIdentityBox li,  .companyIdentityBox li{
	margin-bottom:15px;
	padding-left:22px;
	font-size:20px;
	line-height:26px;
}
.buttonGo{
	width:96%;
	margin:25px auto 0;
}
.expertSayScroll {
	width: 100%;
	height: 660px;
}
.expertSayScroll li a {
	display:block;
	width:100%;
	height:110px;
	padding: 10px;
}
.expertImg{
	float:left;
	width:28%;
	margin-right:2%;
	height:90px;
	border:none;
}
.expertContent{
	float:left;
	width:70%;
}
.expertTitle{
	display:block;
	width:100%;
	font-size:20px;
	line-height:30px;
}
.experShare{
	display:block;
	width:100%;
	height:48px;
	margin-top:6px;
	margin-bottom:6px;
}

/*--------------------------   首頁相關設定 end  --------------------------*/



/*--------------------------   最新職缺相關設定   --------------------------*/
.jobSearchPart01, .jobSearchPart02,
.jobSearchPart03, .jobSearchPart04{
	float:none;
	width:100%;
	margin-right:0;
	padding-bottom:15px;
}
.jobSearchPart05{
	float:none;
	width:100%;
	margin-right:0;
}
.jobListTitleRow{
	display:none;
} 
.jobListContentRow{
	width:100%;
	height:auto;
    margin-bottom: 15px;
    padding: 15px 10px;
	border:1px dotted #ff8288;
}
.jobListContentPart01{
	float:none;
	width:100%;
	text-align:left;
	font-size:20px;
	line-height:36px;
}
.jobListContentPart02, .jobListContentPart03,
.jobListContentPart04, .jobListContentPart05,
.jobListContentPart06b{
	float:none;
	width:100%;
	padding:0;
	font-size:20px;
	line-height:36px;
}
.jobListContentPart06{
	float:none;
	width:100%;
}
.jobListContentPart01:before{
    content:"時間：";
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
 	font-size:20px;
	line-height:36px;
	color:#505c63;
}
.jobListContentPart04:before{
    content:"學歷：";
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
 	font-size:20px;
	line-height:36px;
	color:#505c63;
}
.jobListContentPart05:before{
    content:"經歷：";
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
 	font-size:20px;
	line-height:36px;
	color:#505c63;
}
.jobListContentPart06b:before{
    content:"工作地區：";
	font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
 	font-size:20px;
	line-height:36px;
	color:#505c63;
}
.buttonApply{
	width:95%;
	margin:15px 0 10px;
}
.buttonApply a{
	display:block;
	height:45px;
	text-align:center;
	font-size:20px;
	line-height:44px;
}

/*--------------------------   最新職缺相關設定 end   --------------------------*/



/*--------------------------   企業／學校認同相關設定   --------------------------*/
.abilityOrganizationBox li{
	float:left;
	width:49.25%;
	margin-right:1.5%;
	margin-bottom:10px;
}
.abilityOrganizationBox li:nth-child(5n){
	margin-right:1.5%;
}
.abilityOrganizationBox li:nth-child(2n){
	margin-right:0;
}
.abilityOrganizationLogo{
	width:100%;
	height:auto;
}
.abilityCompanyName{
	width:100%;
	padding:0 2px 5px;
	font-size:18px;
	line-height:28px;
}
.abilitySchoolName{
	width:100%;
	padding:5px 2px 0;
	font-size:20px;
	line-height:32px;
}
.abilityDepartmentName{
	width:100%;
	padding:0 2px 5px;
	font-size:18px;
	line-height:26px;
}
.benefitTitleBox02{
	width:100%;
	margin-bottom:30px;
}
.benefitImg11, .benefitImg12,
.benefitImg13, .benefitImg14,
.benefitImg21, .benefitImg22,
.benefitImg23{
	float:left;
	width:43px;
	height:43px;
	margin-right:5px;
	padding:5px;
}
.benefitImg21, .benefitImg22,
.benefitImg23{
	float:left;
	width:43px;
	height:43px;
	margin-right:1%;
	padding:5px;
}
.benefitText21, .benefitText22,
.benefitText23{
	float:left;
	width:83%;
	padding-top:3px;
}
.showQRCodeBox{
	width:100%;
	margin-bottom:40px;
}
.showQRCodeText{
	display:inline-block;
	margin-right:5px;
	margin-bottom:10px;
}
.benefitBlank{
	display:none;
}
.buttonBility{
	width:100%;
	margin:20px auto 0;
}

/*--------------------------   企業／學校認同相關設定 end   --------------------------*/



/*----------------------  我要報考相關設定  ----------------------*/
.projectItemBox{
	width:100%;
	margin-top:15px;
	margin-bottom:25px;
}
a.projectItemButton{
	display:block;
	height:auto;
	margin-right:10px;
	margin-bottom:15px;
	padding:7px 10px;
	text-align:center;
	font-size:22px;
	line-height:30px;
}
span.projectItemButton{
	display:block;
	height:auto;
	margin-right:10px;
	margin-bottom:15px;
	padding:7px 10px;
	text-align:center;
	font-size:22px;
	line-height:30px;
}
/*----------------------  我要報考相關設定 end  ----------------------*/



/*--------------------------   達人親自說頁籤與內容相關設定   --------------------------*/
.tabTalentClassButton{
	float: left;
	display:block;
	height:46px;
	margin:0 2% 15px;
	padding:0 15px;
	text-align:center;
	font-size:22px;
	line-height:42px;
}
.talentSearchBar{
	width:100%;
	padding:0;
	margin-bottom:25px;
}
.talentSearchPart01{
	float:none;
	width:100%;
	padding:0 2%;
	margin-right:0;
	margin-bottom:15px;
}
.talentSearchPart02{
	float:none;
	width:100%;
	padding:0 2%;
	margin-right:0;
	margin-bottom:15px;
}
.talentSearchPart03{
	float:none;
	width:100%;
	padding:0 2%;
	margin-right:0;
	margin-bottom:15px;
}
.talentShareList li a {
	padding:15px 2%;
}
.talentImg{
	float:left;
	width:28%;
	height:auto;
	border:1px solid #bbbec9;
	overflow:hidden;
}
.talentListContent{
	float:right;
	width:70%;
}
.talentTitle{
	float:none;
	width:100%;
	font-size:20px;
}
.talentViewNo{
	float:none;
	width:100%;
	font-size:18px;
	line-height:28px;
}
.talentViewNo:before{
	font-size:18px;
}
.talentShare{
	margin-top:0;
	margin-bottom:0;
}
.shareContentBox{
	width:100%;
	padding:30px 2%;
}
.talentImgLarge{
	float:none;
	width:100%;
	margin-bottom:20px;
}
.shareContent{
	float:none;
	width:100%;
}
.shareContentTitle{
	width:100%;
	margin-bottom:20px;
	font-size:22px;
	line-height:32px;
}
.shareContentTitle:before{
	content:"\f0a9";
	margin-right:5px;
	vertical-align:baseline;
	font-family:FontAwesome;
	font-size:24px;
	color:#067147;
}

.shareDetail{
	width:100%;
	font-size:20px;
	line-height:28px;
}
.shareDetail p{
	margin-bottom:30px;
}
.shareInfo{
	width:100%;
	margin-top:30px;
}
.FB-comments{
	width:100%;
	padding:30px 2%;
	border:1px solid #bbbec9;
	background-color:#fff;
    overflow: hidden;
	-webkit-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	-moz-box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
	box-shadow: 0px 3px 0px rgba(51,51,51,.2); 
}

/*--------------------------   達人親自說頁籤與內容相關設定 end   --------------------------*/



/*--------------------------   頁尾設定   --------------------------*/
footer{
	width:100%;
	padding:20px 1% 5px;
}
.footerLogo{
	display:inline-block;
	height:38px;
	margin:0 1px 15px; 
}
/*--------------------------   頁尾設定 end   --------------------------*/
}
/*================================================================ 手機版型區 end =============================================================*/