@charset "utf-8";
/* CSS Document */

html,bosy {
	font-family: "微軟正黑體", Arial, "sans-serif";
}

.bg_book {
	background: url(../images/bg_index.png) center top no-repeat, url(../images/bg_sky.png) repeat-x;
	background-size: cover auto;
	background-attachment: fixed;
    background-position-y: -0.2;
}
.bg_sky {
	background: #a1dbff;
	background: -moz-linear-gradient(top, #a1dbff 0%, #ddf2ff 28%, #ffffff 75%);
	background: -webkit-linear-gradient(top, #a1dbff 0%,#ddf2ff 28%,#ffffff 75%);
	background: linear-gradient(to bottom, #a1dbff 0%,#ddf2ff 28%,#ffffff 75%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1dbff', endColorstr='#ffffff',GradientType=0 );
}

.box_center {
	width: 950px;
	margin: 0 auto;
	position: relative;
}
.box_index {
	width: 950px;
	height: 570px;
	position: relative;
	background: url(../images/book.png) left 169px bottom -10px no-repeat;
	background-size:280px 169px;
	z-index: 0;
}
.box_index_m {
	display: none;
	z-index: 0;
}
.ill_index {
	display: block;
	width: 530px;
	height: 560px;
	background: url(../images/people01.png) bottom  right 178px no-repeat;
	background-size: 162px 361px;
	position: absolute;
	right:0;
	bottom: -2px;
}
.ill_index_m {
	display: none;
}
.say_blue {
	width: 90px;
	height: 50px;
	cursor:pointer;
	border-radius: 10px;
	background: #34b2e4;
	line-height:50px;
	color:#fff;
	box-shadow:3px 3px 0px rgba(11,152,208,1);
	text-align: center;
	text-decoration: none;
	position: absolute;
	margin-top: 200px;
	margin-left:100px;
	animation:move_say_blue 2.5s infinite; /*IE*/
    -moz-animation:move_say_blue 2.5s infinite; /*FireFox*/
    -webkit-animation:move_say_blue 2.5s infinite; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;
    z-index:1
}
.say_blue:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #34b2e4;
	border-width: 15px;
	margin-top: -15px;
}

.say_blue:hover {
	transform: scale(1.1, 1.1);
}
@keyframes move_say_blue {
    0% {top:0px;;left:5px}
    50% {top:10px;;left:0px}
	100% {top:0px;;left:5px}
}
@-moz-keyframes move_say_blue {
    0% {top:0px;}
    50% {top:10px;}
	100% {top:0px;}
}
@-webkit-keyframes move_say_blue {
     0% {top:0px;}
    50% {top:10px;}
	100% {top:0px;}
}

.say_green {
	width: 95px;
	height: 60px;
	border-radius: 10px;
	background: #39a030;
	line-height:60px;
	color:#fff;
	box-shadow:3px 3px 0px rgba(0,92,23,1);
	text-align: center;
	text-decoration: none;
	position: absolute;
	margin-top:100px;
	margin-left:160px;
	animation:move_say_green 3s infinite; /*IE*/
    -moz-animation:move_say_green 3s infinite; /*FireFox*/
    -webkit-animation:move_say_green 3s infinite; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;
    z-index:1
}
.say_green:after {
	top: 100%;
	left: 70%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #39a030;
	border-width: 15px;
	margin-left: -15px;
}
.say_green:hover {
	transform: scale(1.1, 1.1);
}
@keyframes move_say_green {
    0% {top:0px;left:5px}
    50% {top:10px;left:0px}
	100% {top:0px;left:5px;}
}
@-moz-keyframes move_say_green {
    0% {top:0px;left:5px}
    50% {top:10px;left:0px}
	100% {top:0px;left:5px;}
}
@-webkit-keyframes move_say_green {
    0% {top:0px;left:5px}
    50% {top:10px;left:0px}
	100% {top:0px;left:5px;}
}

.say_yellow {
	width: 95px;
	height: 55px;
	border-radius: 10px;
	background: #fe912a;
	line-height:55px;
	color:#fff;
	box-shadow:3px 3px 0px rgba(250,121,3,1);
	text-align: center;
	text-decoration: none;
	position: absolute;
	margin-top: 110px;
	margin-left:290px;
	animation:move_say_yellow 4s infinite; /*IE*/
    -moz-animation:move_say_yellow 4s infinite; /*FireFox*/
    -webkit-animation:move_say_yellow 4s infinite; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;
    z-index:1
}
.say_yellow:after {
	top: 100%;
	left: 30%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #fe912a;
	border-width: 15px;
	margin-left: -15px;
}
.say_yellow:hover {
	transform: scale(1.1, 1.1);
}
@keyframes move_say_yellow {
    0% {top:0px;left:5px}
    50% {top:10px;left:0px}
	100% {top:0px;left:5px;}
}
@-moz-keyframes move_say_yellow {
    0% {top:0px;left:5px}
    50% {top:10px;left:0px}
	100% {top:0px;left:5px;}
}
@-webkit-keyframes move_say_yellow {
    0% {top:0px;left:5px}
    50% {top:10px;left:0px}
	100% {top:0px;left:5px;}
}

.say_pink {
	width: 90px;
	height: 60px;
	border-radius: 10px;
	color: #fff;
	line-height: 60px;
	text-decoration: none;
	box-shadow:3px 3px 0px rgba(200,32,47,1);
	text-align: center;
	background: #e34856;
	position: absolute;
	margin-top: 185px;
	margin-left:360px;
	animation:move_say_pink 5s infinite; /*IE*/
    -moz-animation:move_say_pink 5s infinite; /*FireFox*/
    -webkit-animation:move_say_pink 5s infinite; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;	
}
.say_pink:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #e34856;
	border-width: 15px;
	margin-top: -15px;
	left:-26px
}
.say_pink:hover {
	transform: scale(1.1, 1.1);
}
@keyframes move_say_pink {
    0% {top:0px;;left:5px}
    50% {top:10px;;left:0px}
	100% {top:0px;;left:5px}
}
@-moz-keyframes move_say_pink {
    0% {top:0px;}
    50% {top:10px;}
	100% {top:0px;}
}
@-webkit-keyframes move_say_pink {
     0% {top:0px;}
    50% {top:10px;}
	100% {top:0px;}
}

.say_gray {
	width: 110px;
	height: 70px;
	border-radius: 10px;
	color: #fff;
	line-height: 70px;
	text-decoration: none;
	box-shadow:3px 3px 0px rgba(135,135,135,1);
	text-align: center;
	background: #a0a0a0;
	position: absolute;
	margin-top: 260px;
	margin-left:370px;
	animation:move_say_pink 4.5s infinite; /*IE*/
    -moz-animation:move_say_pink 4.5s infinite; /*FireFox*/
    -webkit-animation:move_say_pink 4.5s infinite; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;	
}
.say_gray:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #a0a0a0;
	border-width: 15px;
	margin-top: -15px;
	left:-26px
}
.say_gray:hover {
	transform: scale(1.1, 1.1);
}
@keyframes move_say_gray {
    0% {top:0px;;left:5px}
    50% {top:10px;;left:0px}
	100% {top:0px;;left:5px}
}
@-moz-keyframes move_say_gray {
    0% {top:0px;}
    50% {top:10px;}
	100% {top:0px;}
}
@-webkit-keyframes move_say_gray {
     0% {top:0px;}
    50% {top:10px;}
	100% {top:0px;}
}
.box_title_index {
	display: block;
	width: 500px;
	height: 200px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position: absolute;
	margin-top: 100px;
	margin-left:70px;
	background: url(../images/title_index.png) left top no-repeat;
	padding-top: 80px;
	font-size: 18px;
	line-height: 1.8;
	color: #474747;
	z-index: 1;
}
.box_title_index_m {
	display: none;
}
.two {
	width: 100%;
	height: 800px;
	background: url(../images/cr01.png) top center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
	margin-top:-12px;
}
.two_m {
	display: none;
}
.box_factor {
	width: 500px;
	margin-top:20px;
}
.box_factor_m{
	display:none;
}
.factor {
	width: 150px;
	height: 40px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	border: 1px solid #bfbfbf;
	border-radius: 8px;
	background: url(../images/icon_dropdown.png) center right 10px no-repeat;
	background-color: #fff;
	box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
	cursor:pointer;
	padding: 0px 30px 0px 10px;
	overflow:hidden;
	color:#696969;
	font-size:16px;
	font-family:"微軟正黑體";
	float:left;
	appearance:none; -moz-appearance:none; -webkit-appearance:none; 
	
}
select::-ms-expand { display: none; }
.factor:focus {
	outline: none;
}
.s_mr30 {
	margin-right: 30px;
}

/*-------------------------------------------------查薪資------------------------------------------------------------*/
.box_main02 {
	width: 950px;
	height: 513px;
	margin: 0 auto;
	position: relative;
	padding-top: 70px;
}
.ill02 {
	width: 354px;
	height: 368px;
	position:absolute;
	background: url(../images/people02.png) no-repeat;
	margin-top:35px;
	animation:move_ill02 4.5s; /*IE*/
    -moz-animation:move_ill02 4.5s; /*FireFox*/
    -webkit-animation:move_ill02 4.5s; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;	
}
@keyframes move_ill02 {
    0% {left:-100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
@-moz-keyframes move_ill02 {
    0% {left:-100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
@-webkit-keyframes move_ill02 {
    0% {left:-100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
.main02 {
	width: 596px;
	height: 513px;
	float: right;
	transition: 0.5s ease-in-out;
	animation:move_main02 4s; /*IE*/
    -moz-animation:move_main02 4s; /*FireFox*/
    -webkit-animation:move_main02 4s; /*Chrome, Safari*/
}
@keyframes move_main02 {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-moz-keyframes move_main02 {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes move_main02 {
    0% {opacity: 0}
	100% {opacity: 1}
}
.main02 h3 {
	font-size: 26px;
	color: #0b98d0;
	font-weight: normal;
	padding-bottom: 15px;
}
.main02 h4 {
	font-size: 21px;
	color: #000;
	font-weight: normal;
	padding-bottom: 18px;
}
.main02 h5 {
	font-size: 15px;
	color: #000;
	font-weight: normal;
	text-align: right;
	padding-top: 15px;
}
.box_table {
	width: 542px;
	/*height: 240px;*/
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding: 13px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
	float:left;
	margin-bottom:30px;
}
.table01 {
	font-size: 15px;
	border-collapse: collapse;
	border: 1px solid #a0a0a0;
}
.table01 th {
	border-collapse: collapse;
	border: 1px solid #a0a0a0;
	background-color: #e8e8e8;
	text-align: center;
	padding: 10px 5px;
}
.table01 td {
	padding: 10px 5px;
	border-collapse: collapse;
	border: 1px solid #a0a0a0;
}
.table01 tr:nth-child(2), .table01 tr:nth-child(3){
	background-color: #f0f8f9;
}
.table01 tr:nth-child(4), .table01 tr:nth-child(5){
	background-color: #f6f4e8;
}
.bt_blue, .bt_green, .bt_yellow, .bt_red {
	padding: 15px;
	color: #fff;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.7);
	margin: 0 auto;
	text-decoration: none;
	border-radius: 7px;
	font-size: 21px;
	float:left;
	transition: 0.2s ease-in-out;
	margin-left:0px;
	margin-top:0px;
}
.bt_blue {
	background-color: #34b2e4;
	box-shadow: 5px 5px 0px rgba(4,122,169,1);
}
.bt_blue:hover, .bt_green:hover, .bt_yellow:hover, .bt_red:hover {
	box-shadow: none;
	margin-left:5px;
	margin-top:5px;
}
/*-----------------------------------------------性格測驗----------------------------------------------------------*/
.three {
	width: 100%;
	height: 800px;
	background: url(../images/cr02.png) top center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
	margin-top:-310px;
}
.three_m {
	display: none;
}
.box_main03 {
	width: 950px;
	height: 513px;
	margin: 0 auto;
	position: relative;
	padding-top: 70px;
}
.ill03 {
	width: 354px;
	height: 368px;
	position:absolute;
	margin-left:630px;
	background: url(../images/ill03.png) no-repeat;
	margin-top:175px;
	animation:move_ill03 8.5s; /*IE*/
    -moz-animation:move_ill03 8.5s; /*FireFox*/
    -webkit-animation:move_ill03 8.5s; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;	
}
@keyframes move_ill03 {
    0% {left:100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
@-moz-keyframes move_ill03 {
    0% {left:100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
@-webkit-keyframes move_ill03 {
    0% {left:100px;opacity: 0}
	100% {left:0px;opacity: 1}
}

.main03 {
	width: 675px;
}
@keyframes move_main03_l {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-moz-keyframes move_main03_l {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes move_main03_l {
    0% {opacity: 0}
	100% {opacity: 1}
}
.main03_l {
	width: 390px;
	height: 220px;
	float: left;
	transition: 0.5s ease-in-out;
	animation:move_main03_l 6.5s; /*IE*/
    -moz-animation:move_main03_l 6.5s; /*FireFox*/
    -webkit-animation:move_main03_l 6.5s; /*Chrome, Safari*/
}

.main03_l h3 {
	font-size: 26px;
	color: #005c17;
	font-weight: normal;
	padding-bottom: 15px;
}
.main03_l h4 {
	font-size: 21px;
	color: #000;
	font-weight: normal;
	padding-bottom: 18px;
}
.main03_l p {
	line-height: 1.6;
	font-size: 16px;
	color: #5a5a5a;
	margin-bottom: 30px;
}
.bt_green {
	background-color: #39a030;
	box-shadow: 5px 5px 0px rgba(0,92,23,1);
}
.main03_r{
	width: 285px;
	height: 285px;
	float: left;
	transition: 0.5s ease-in-out;
	animation:move_main03_l 6.5s; /*IE*/
    -moz-animation:move_main03_l 6.5s; /*FireFox*/
    -webkit-animation:move_main03_l 6.5s; /*Chrome, Safari*/
}
.spectrum {
	width: 285px;
	height: 285px;
	float: left;
}
/*-----------------------------------------------工作內容----------------------------------------------------------*/
.four {
	width: 100%;
	height: 1000px;
	background: url(../images/cr03.png) top center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
	margin-top:-340px;
}
.four_m {
	display: none;
}
.box_main04 {
	width: 950px;
	height: 513px;
	margin: 0 auto;
	position: relative;
	padding-top: 70px;	
}
.ill04 {
	width: 354px;
	height: 438px;
	position:absolute;
	background: url(../images/people03.png) no-repeat;
	animation:move_ill04 8.5s; /*IE*/
    -moz-animation:move_ill04 8.5s; /*FireFox*/
    -webkit-animation:move_ill04 8.5s; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;	
}
@keyframes move_ill04 {
    0% {left:-100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
@-moz-keyframes move_ill04 {
    0% {left:-100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
@-webkit-keyframes move_ill04 {
    0% {left:-100px;opacity: 0}
	100% {left:0px;opacity: 1}
}
.main04 {
	width: 726px;
	height: 853px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding-left:150px;
	padding-right:95px;
	padding-top:80px;
	float:right;
	margin-right:30px;
	position:absolute;
	top:50px;
	right:0;
	background: url(../images/paper.png) no-repeat;
	animation:move_main04 4.5s; /*IE*/
    -moz-animation:move_main04 4.5s; /*FireFox*/
    -webkit-animation:move_main04 4.5s; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;
}
@keyframes move_main04 {
    0% {top: 100px; opacity: 0}
	100% {top: 50px;opacity: 1}
}
@-moz-keyframes move_main04 {
    0% {top: 100px; opacity: 0}
	100% {top: 50px;opacity: 1}
}
@-webkit-keyframes move_main04 {
    0% {top: 100px; opacity: 0}
	100% {top: 50px;opacity: 1}
}

.main04 h3 {
	font-size: 26px;
	color: #fa7903;
	font-weight: normal;
	padding-bottom: 15px;
}
.main04 h4 {
	font-size: 21px;
	color: #000;
	font-weight: normal;
	padding-bottom: 18px;
}
.main04 p {
	line-height: 1.6;
	font-size: 16px;
	color: #5a5a5a;
	margin-bottom: 30px;
}
.bt_yellow {
	background-color: #fe912a;
	box-shadow: 5px 5px 0px rgba(228,109,0,1);
}

/*-----------------------------------------------科系背景----------------------------------------------------------*/
.five {
	width: 100%;
	/*height: 800px;*/
	background: url(../images/cr04.png) top center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
	margin-top: -500px;
}

.box_main05 {
	width: 950px;
	height: 655px;
	margin: 0 auto;
	position: relative;
	padding-top: 100px;
}
.main05 {
	width: 950px;
	float:left;
	padding-bottom: 20px;
	/*position:absolute;
	top:50px;
	right:0;*/
	animation:move_main05 4.5s; /*IE*/
    -moz-animation:move_main05 4.5s; /*FireFox*/
    -webkit-animation:move_main05 4.5s; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;
}
@keyframes move_main05 {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-moz-keyframes move_main05 {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes move_main05 {
    0% {opacity: 0}
	100% {opacity: 1}
}

.main05 h3 {
	font-size: 26px;
	color: #c8202f;
	font-weight: normal;
	padding-bottom: 15px;
}
.main05 h4 {
	font-size: 21px;
	color: #000;
	font-weight: normal;
	padding-bottom: 18px;
}
.dt_list {}
.dt_list ul {
	list-style: none;
	float: left;
	margin-bottom: 30px;
}
.dt_list li {
	list-style: none;
	margin-bottom: 10px;
	font-size: 16px;
	color: #5a5a5a;
}
.pei {
	width: 149px;
	height: 144px;
	float: left;
}
.c01, .c02, .c03, .c04, .c05, .c06, .c07, .c08, .c09, .c10 {
	width: 12px;
	height: 12px;
	border-radius: 100%;
	margin-top:3px;
}
.c01 {
	background-color: #4f7baa;
}
.c02 {
	background-color: #14a0c1;
}
.c03 {
	background-color: #02cc9a;
}
.c04 {
	background-color: #7de313;
}
.c05 {
	background-color: #5058ab;
}
.c06 {
	background-color: #162688;
}
.c07 {
	background-color: #2b908f;
}
.c08 {
	background-color: #e4d354;
}
.c09 {
	background-color: #f45b5b;
}
.c10 {
	background-color: #91e8e1;
}
.bt_red {
	clear: both;
	background-color: #e24856;
	box-shadow: 5px 5px 0px rgba(172,14,28,1);
}

#pie_chart {
	width:220px;
	height: 220px;
	float:left;
	position:relative;
	z-index:1;	
	background-color:rgba(0,0,0,0)
}
/*-----------------------------------------------專業能力----------------------------------------------------------*/
.six {
	width: 100%;
	overflow:hidden;
	background: url(../images/cr05.png) bottom center no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 2;
	margin-top: -495px;
	background-color:#fff;
	padding-bottom:70px;
}

.box_main06 {
	width: 950px;
	overflow:hidden;
	margin: 0 auto;
	position: relative;
	padding-top: 100px;
}
.box_main06 img {
	margin-left:200px;
}
.main06 {
	width: 520px;
	float:left;
	margin-right:50px;
	/*position:absolute;
	top:50px;
	right:0;*/
	animation:move_main06 4.5s; /*IE*/
    -moz-animation:move_main06 4.5s; /*FireFox*/
    -webkit-animation:move_main06 4.5s; /*Chrome, Safari*/
    transition: 0.5s ease-in-out;
}
@keyframes move_main06 {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-moz-keyframes move_main06 {
    0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes move_main06 {
    0% {opacity: 0}
	100% {opacity: 1}
}

.main06 h3 {
	font-size: 26px;
	color: #000;
	font-weight: normal;
	padding-bottom: 15px;
}
.main06 h4 {
	font-size: 21px;
	color: #000;
	font-weight: normal;
	padding-bottom: 18px;
}
#back-to-top {	
	width:49px;
	height:124px;
	position: fixed;
	bottom: 10%;
	right: 13%;
	background:url(../images/gotop.png) no-repeat;
	background-size:49px auto;
	z-index:70;
	transition: opacity 0.2s ease-out;
	opacity: 0;
	cursor: pointer;
}
#back-to-top:hover {
	background-position:left bottom;
}
#back-to-top.show {
	opacity: 1;
}

.navi {
	width: 100%;
	height: 50px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
	position: fixed;
	opacity: 0;
	margin-top: 30px;
	z-index:5;
	transition: opacity 0.2s ease-out;
}
.navi_move {
	opacity: 1;
}
.navi ul {
	width: 950px;
	height: 50px;
	line-height: 50px;
	margin: 0 auto;
}
.navi li {
	height:36px;
	line-height: 36px;
	float: left;
	margin-right:50px;
	margin-top:6px;
}
.navi li a {
	display:block;
	text-decoration:none;
	color:#292929;
	padding:0px 5px;
	border-radius:5px;
}
.navi li:nth-child(1) a:hover {
	background-color:#34b2e4;
	color:#fff;
}
.navi li:nth-child(2) a:hover {
	background-color:#39a030;
	color:#fff;
}
.navi li:nth-child(3) a:hover {
	background-color:#e66e00;
	color:#fff;
}
.navi li:nth-child(4) a:hover {
	background-color:#e34856;
	color:#fff;
}
.hide {
	display: none;
}
.show {
	display: block;
}
.nu_bar {
	width: 100%;
	max-width: 800px;
	overflow: hidden;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding-top:15px;
}
.nu_bar ul {
	list-style:none;
}
.nu_bar li {
	font-size: 16px;
	color: #5a5a5a;
	margin-top:-15px;
	position:relative;
}
.n01 {
	height: 30px;
	position: relative;
	z-index: 0;
	background: linear-gradient(to left, #4cb8c4, #3cd3ad);
}
.n_gray {
	width: 100%;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding-right:20px;
	height: 30px;
	background-color: #eee;
	position: relative;
	left: 0;
	z-index: -1;
	top:-30px;
}
.n_text {
 float:right;
 line-height:30px;
 position:absolute;
 right:0;
 padding-right:10px;
 margin-top:-30px;
}
@media screen and (max-width: 1201px) {
	#back-to-top {	
		right: 0%;
	}
}
@media screen and (max-width: 1025px) {
	#back-to-top {	
		right: 0%;
	}
}
@media screen and (max-width: 951px) {
	#back-to-top {	
		right: 0%;
	}
}
@media screen and (max-width: 721px) {	
	.navi {
		display: none;
	}
	.box_index {
		display: none;
	}
	.box_index_m {
		display: block;
	}
	.bg_book {
		background: none, url(../images/bg_sky.png) repeat-x;
		background-size:100% 500px;
		background-attachment: fixed;
		background-position-y: -0.2;
	}
	.box_blackbar_s {
		display: none;
	}
	.box_center {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.box_index {
		width: 100%;
		position: relative;
		background:none;
		z-index: 0;
	}
	.box_title_index {
		display: none;
	}
	.box_title_index_m {
		display: block;
		width: 100%;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding: 21px;
		z-index: 1;
	}
	.box_title_index_m h3 {
		font-size: 26px;
		color: #1a72bb;
		text-shadow: 1px 1px 0px #fff;
		font-weight:bold;
		margin-bottom:5px;
	}
	.box_title_index_m h4 {
		font-size: 18px;
		color: #474747;
		line-height: 1.6;
	}
	.box_factor {
		display:none;
	}
	.box_factor_m{
		display:block;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding:0px 21px;
		margin-bottom:20px;
	}
	.factor {
		width: 100%;
		height: 35px;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		border: 1px solid #bfbfbf;
		border-radius: 8px;
		background: url(../images/icon_dropdown.png) center right 10px no-repeat;
		background-color: #fff;
		box-shadow: 3px 3px 0px rgba(0,0,0,0);
		padding: 0px 30px 0px 10px;
		overflow:hidden;
		color:#696969;
		font-size:16px;
		font-family:"微軟正黑體";
		float:left;
		appearance:none; -moz-appearance:none; -webkit-appearance:none; ::-ms-expand { display: none; } 
	}
	.ill_index {
		display: none;	
	}
	.ill_index_m {
		display: block;
		width: 100%;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding:30px 21px 21px 21px;
		overflow:hidden;
		background: url(../images/people01.png) bottom  right 21px no-repeat;
		background-size: 100px 223px;	
	}
	.say_blue_m {
		width:calc(100% - 110px);
		height: 35px;
		cursor:pointer;
		border-radius: 8px;
		background: #34b2e4;
		line-height:35px;
		color:#fff;
		box-shadow:3px 3px 0px rgba(11,152,208,0);
		text-align: left;
		text-indent: 15px;
		text-decoration: none;
		position: relative;
		transition: 0.5s ease-in-out;
		z-index:1;
		margin-bottom:10px;
		float:left;
	}
	.say_blue_m:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position:absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-left-color: #34b2e4;
		border-width: 9px;
		margin-top: -9px;
	}
	.say_green_m {
		width:calc(100% - 110px);
		height: 35px;
		cursor:pointer;
		border-radius: 8px;
		background: #39a030;
		line-height:35px;
		color:#fff;
		box-shadow:3px 3px 0px rgba(11,152,208,0);
		text-align: left;
		text-indent: 15px;
		text-decoration: none;
		position: relative;
		transition: 0.5s ease-in-out;
		z-index:1;
		margin-bottom:10px;
		float:left;
	}
	.say_green_m:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position:absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-left-color: #39a030;
		border-width: 9px;
		margin-top: -9px;
	}
	.say_yellow_m {
		width:calc(100% - 110px);
		height: 35px;
		cursor:pointer;
		border-radius: 8px;
		background: #fe912a;
		line-height:35px;
		color:#fff;
		box-shadow:3px 3px 0px rgba(11,152,208,0);
		text-align: left;
		text-indent: 15px;
		text-decoration: none;
		position: relative;
		transition: 0.5s ease-in-out;
		z-index:1;
		margin-bottom:10px;
		float:left;
	}
	.say_yellow_m:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position:absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-left-color: #fe912a;
		border-width: 9px;
		margin-top: -9px;
	}
	.say_pink_m {
		width:calc(100% - 110px);
		height: 35px;
		cursor:pointer;
		border-radius: 8px;
		background: #e34856;
		line-height:35px;
		color:#fff;
		box-shadow:3px 3px 0px rgba(11,152,208,0);
		text-align: left;
		text-indent: 15px;
		text-decoration: none;
		position: relative;
		transition: 0.5s ease-in-out;
		z-index:1;
		margin-bottom:10px;

		float:left;
	}
	.say_pink_m:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position:absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-left-color: #e34856;
		border-width: 9px;
		margin-top: -9px;
	}
	.say_gray_m {
		width:calc(100% - 110px);
		height: 35px;
		cursor:pointer;
		border-radius: 8px;
		background: #a0a0a0;
		line-height:35px;
		color:#fff;
		box-shadow:3px 3px 0px rgba(11,152,208,0);
		text-align: left;
		text-indent: 15px;
		text-decoration: none;
		position: relative;
		transition: 0.5s ease-in-out;
		z-index:1;
		margin-bottom:10px;
		float:left;
	}
	.say_gray_m:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position:absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-left-color: #a0a0a0;
		border-width: 9px;
		margin-top: -9px;
	}
	.two {
		display:none;
	}
	.two_m {
		display: block;
		width: 100%;
		overflow: hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding: 21px;
		background-color: #eff2f4;
	}
	.two_m h3 {
		border-left: 4px solid #0b98d0;
		font-size: 18px;
		text-indent: 8px;
		margin-bottom: 10px;
		color:#0b98d0;
	}
	.two_m h4 {
		font-size: 16px;
		color:#292929;
	}
	.salary_box {
		width: 100%; 
		overflow:hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding:12px;
		margin-top: 20px;
		border-radius:8px;
		background-color:#fff;
		box-shadow:3px 3px 0px rgba(0,0,0,0.3);	
	}
	.table_salary{
		color: #6b6b6b;	
		font-size: 16px;
		background-color:#f6f4e8;
		border-bottom: 1px solid #c2c2c2;
	}
	.table_salary td{
		padding:6px 10px;
		border-collapse: collapse;
		border: 1px solid #c2c2c2;
		line-height:1.6;
	}
	.table_salary td:first-child{
		border-top:none;
	}
	.table_salary td:last-child{
		border-top:none;
	}
	.salary_title {
		height: 35px;
		line-height:35px;
		border: 1px solid #c2c2c2;	
		font-size: 18px;
		text-align:center;	
	}
	.salary_title a {
		display: block;
		color: #000;
		text-decoration: none;
		background: #e3e3e3;
		background: -moz-linear-gradient(top, #e3e3e3 0%, #d1d1d1 100%);
		background: -webkit-linear-gradient(top, #e3e3e3 0%,#d1d1d1 100%);
		background: linear-gradient(to bottom, #e3e3e3 0%,#d1d1d1 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#d1d1d1',GradientType=0 );
	}
	.salary_main .bbox{
		width:100%;
		overflow:hidden;
		border-bottom:1px solid #c2c2c2;
	}
	.none{width:100%; height:100px; text-indent:10px; padding-top:10px; color: #6b6b6b; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; font-size: 14px; font-weight:100;}   	
	.salary_main li a {
		text-decoration: none;
	}
	.bt_blue, .bt_green, .bt_yellow, .bt_red {
		padding: 8px;
		color: #fff;
		text-shadow: 0px 0px 10px rgba(0,0,0,0.7);
		text-decoration: none;
		border-radius: 7px;
		font-size:16px;
		transition: 0.2s ease-in-out;
		margin-left:0px;
		margin-top:0px;
	}
	.bt_blue {
		background-color: #34b2e4;
		box-shadow: 3px 3px 0px rgba(4,122,169,1);
	}
	.bt_blue:hover, .bt_green:hover, .bt_yellow:hover, .bt_red:hover {
		box-shadow: none;
		margin-left:5px;
		margin-top:5px;
	}
	.three {
		display: none;
	}
	.three_m {
		display: block;
		width: 100%;
		overflow: hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding: 21px;
		background-color: #fff;
	}
	.three_m h3 {
		border-left: 4px solid #39a030;
		font-size: 18px;
		text-indent: 8px;
		margin-bottom: 10px;
		color:#39a030;
	}
	.three_m h4 {
		font-size: 16px;
		color:#292929;
	}
	.three_m p {
		font-size: 16px;
		line-height: 1.6;
		color:#292929;
	}
	.four {
		display: none;
	}
	.four_m {
		display: block;
		width: 100%;
		overflow: hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding: 21px;
		background-color: #e1f1ff;
	}
	.four_m h3 {
		border-left: 4px solid #f88e29;
		font-size: 18px;
		text-indent: 8px;
		margin-bottom: 10px;
		color:#f88e29;
	}
	.four_m h4 {
		font-size: 16px;
		color:#292929;
	}
	.four_m .box_p {
		width: 100%; 
		overflow:hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding:12px;
		margin-top: 20px;
		border-radius:8px;
		background-color:#fff;
		box-shadow:3px 3px 0px rgba(0,0,0,0.3);	
	}
	.four_m p {
		font-size: 16px;
		line-height: 1.6;
		color:#292929;
	}
	.five {
		width: 100%;
		/*height: 800px;*/
		background:none;
		position: relative;
		z-index: 0;
		margin-top: 0px;
		overflow: hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding: 21px;
		background-color: #fff;
	}
	.box_main05 {
		width: 100%;
		height:530px;
		overflow:hidden;
		position: relative;
		padding-top: 0px;
	}
	.main05 {
		width: 100%;
		float:left;
	}
	.bt_red {
		display:none;
	}
	.three_m h4 {
		font-size: 16px;
		color:#292929;
		padding-bottom:20px;
	}
	.main05 h3 {
		border-left: 4px solid #e34856;
		font-size: 18px;
		text-indent: 8px;
		margin-bottom: 10px;
		color:#e34856;
		padding-bottom:0px;
	}
	.main05 h4 {
		font-size: 16px;
		color:#292929;
		padding-bottom: 15px;
	}
	.dt_list ul {
		list-style: none;
		float: left;
		margin-bottom: 0px;
	}
	#back-to-top {	
		width:30px;
		height:76px;
		background-size:30px auto;
	}
	#pie_chart {
		margin-top:-20px;
		z-index:-1;
	}
	.six {
		width: 100%;
		height: 500px;
		background:none;
		background-size: cover;
		position: relative;
		z-index: -2;
		margin-top: -15px;
		overflow: hidden;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		padding: 21px;
		background-color: #fff;
	}
	.box_main06 {
		width: 100%;
		height: 300px;
		margin: 0 auto;
		position: relative;
		padding-top: 0px;
	}
	.main06 {
		width: 520px;
		float:left;
		margin-right:0px; 
	}
	.main06 h3 {
		border-left: 4px solid #595959;
		font-size: 18px;
		text-indent: 8px;
		margin-bottom: 10px;
		color:#595959;
		padding-bottom:0px;
	}
	.main06 h4 {
		font-size: 16px;
		color:#292929;
		padding-bottom: 15px;
	}
	.six {
		width: 100%;
		height:auto;
		overflow:hidden;
		background:none;
		background-size: cover;
		position: relative;
		z-index: 0;
		margin-top: 0px;
		background-color:#fff;
		padding-bottom:0px;
		border-bottom:10px solid #497d49
	}
	.box_main06 {
		width: 100%;
		overflow:hidden;
		margin: 0 auto;
		position: relative;
		padding-top: 0px;
	}
	.box_main06 img {
		width:100%;
		height:95%;
		margin-left:0px;
	}
}