@charset "utf-8";
/* CSS Document */
html,body {
	width: 100%;
	height: 100%;
}
a, a:hover, a:active, a:focus {
	text-decoration: none;
}
*{margin:0; padding: 0; box-sizing: border-box; /*z-index: 986;*/ outline: none;}
html{font-family:"微軟正黑體", Arial, sans-serif;/*自動找手機裡的黑體字*/
	-webkit-text-size-adjust:none;/*修正iphone旋轉後文字不要放大*/
	background-color:#fff;}
img{border:0; max-width:100%; height:auto; }
ul {
	margin-bottom: 0;
}
li{list-style: none;}
.clearfix{clear:both;content:".";font-size:0;height:0;overflow:hidden}
.floatL{float:left;}
.floatR{float:right;}
.pinkT{color:#e77198; font-weight:bold;}
.greenT{color:#0dc90c; font-weight:bold;}
.redT{color:#F03;}
.redbtn{background-color:#e04265; color:#fff; text-decoration:none; border-radius:5px;}
.redbtn:hover{background-color:#ec6183;}
.tRight{text-align:right; padding-right:10px;}
.w25{width:25%;}
.w37b{width:37.5%;}
.w30{width:30%;}
.w35{width:35%;}
.w100{width:100%;}

.ex-img{padding: 40px 70px;}



/
/*article*/
article{box-sizing: border-box; width:100%; display:block; float:left; background-color:#fff;}
article:nth-child(odd){background-color:#f9f9f9;}
.boxbox{max-width:1400px; overflow:hidden; margin:auto;}
.boxbox h2{border-left: #f4aa00 solid 6px;padding-left:10px;margin-bottom:20px;color:#444;font-size:22px;}


.picL{float:left; position:relative; z-index:2; width:27.8%; height:272px;}
.picL .picex{position:absolute; bottom:0; background-color:rgba(245,206,55,.9); width:100%; padding:12px; font-size:15px;}
.picL .picex span{font-size:19px; font-weight:bold; padding:0 5px;}
.picL img{border:#e5e5e5 solid 1px;}
.conR{float:right; background-color:#f2f1f1; height:270px; padding:15px 25px; border:#e5e5e5 solid 1px; border-radius:4px; width:71%; color:#303030;}
.conR h3{color:#4c5d79; font-size:22px; font-weight:bold;}
.conR p{margin:20px 0; line-height:25px; font-size:17px; text-align: justify;}
.conR h4{font-size:18px; margin-bottom:10px;}
.conR ul{width:100%;}
.conR ul li{width:45%; margin-left:22px; padding:3px 0 3px 15px; display:inline-block; vertical-align:top; position:relative;}
.conR ul li::before{position: absolute; top: 12px; left: 0; content: ""; display: block; width: 7px; height: 7px; border-radius: 7px; background-color: #cfa972;}
.morebtn{display:block; text-align:center;}
.morebtn a{border-radius:4px; background-color:#5778bb; color:#fff; font-size:20px; font-weight:bold; padding:8px 25px; text-decoration:none; transition: all 500ms ease;}
.morebtn a:hover{background-color:#a8c0e6;}
.joblist{
    border-top: #dcdcdc solid 4px;
    border-bottom: #dcdcdc solid 2px;
    margin: 20px 0;
}
.joblist li{padding:18px 0; border-bottom:#dcdcdc dashed 1px; margin:0px; overflow:hidden;}
.joblist li:last-child{border-bottom:0;}
.joblist .jobLeft, .joblist .jobCenter, .joblist .jobRight{float:left; padding:0 15px;}
.joblist .jobLeft{width:25%;}
.joblist .jobCenter{width:58.33333333%; border-left: solid 1px #dcdcdc;}
.joblist .jobRight{width:16.66666667%;}

/*套用新版轉職找工作CSS*/
.joblist li:hover {background-color:#f9fbff;}
.joblist li:before, .joblist li:after, .joblist .joblist_btnarea:before, ..joblist .joblist_btnarea:after {content: " "; display: table;}
.joblist li:after, .joblist .joblist_btnarea:after{clear: both;}
.joblist li .jobtitle span,
.joblist li .cpyname span{display:block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-weight:bold;}
.joblist li .jobtitle span{ font-size:1.3em; color: #bb2800;  max-height:1.8em; line-height:1.8em; margin-top:0.3em; }
.joblist li .cpyname span{font-size:1em; color:#333;  max-height:1.6em; line-height:1.6em;}
.joblist li .info {min-height:1.2em;}
.joblist li .info span.infospan {display:inline-block; color:#333; font-weight:bold; padding-right:10px; margin-right:10px; line-height:1.6em; border-right:solid 1px #dcdcdc;}
.info span {
    font-size: 12px;
}
.joblist li .info span.infospan.price {color:#eb6100;}
.joblist li .info span.infospan:nth-child(4) {border-right:none;}
.joblist li .des {font-size:12px; color:#7d7d7d; line-height:1.6em; font-weight:bold; height:3.2em; overflow:hidden;}
.joblist li .jobtitle div, .joblist li .cpyname div, .joblist li .info, .joblist li .des {display:block; padding:0.15em 0em;}
.joblist li .joblist_btnarea a {display:block; float:left; width:100%; border:solid 1px #898989; border-radius:3px; color:#898989; text-align:center; font-weight:bold; padding:0.5em 0em; text-decoration:none;}
.joblist li .joblist_btnarea a:last-child{margin-top:0.3em;background: white;}
.joblist li .joblist_btnarea a i {color:#898989; margin-right:5px;}
.joblist li .joblist_btnarea a:hover {color:#1a6cbf; border:solid 1px #1a6cbf;}
.joblist li .joblist_btnarea a:hover i {color:#1a6cbf;}
.joblist li .joblist_btnarea a.mark {margin-right:2%;    background: white;}
.joblist li .joblist_btnarea a.mark:hover {color:#eb6100 !important; border:solid 1px #eb6100 !important;}
.joblist li .joblist_btnarea a.mark:hover i {color:#eb6100;}
.joblist li .joblist_btnarea a.mark.act {color:#FFF; background-color:#eb6100; border:solid 1px #eb6100;}
.joblist li .joblist_btnarea a.mark.act i {color:#FFF;}
.joblist li .joblist_btnarea a i.markfly {position:absolute; left:0px; opacity:0; color:#eb6100;}
.joblist li .joblist_btnarea a.mark.act i.markfly {color:#eb6100;}
.joblist li .joblist_btnarea a.mark.act:focus i.markfly {
	animation: markclick 1.5s ease-in;
	-moz-animation: markclick 1.5s ease-in;
	-webkit-animation: markclick 1.5s ease-in;
	-o-animation: markclick 1.5s ease-in;
	animation-iteration-count: 1;
}




/* ---------- RWD 開始 ---------- */
@media screen and (max-width: 399px) {

}

@media screen and (min-width: 400px) and (max-width: 479px) {
	
}

@media screen and (max-width: 479px) {
	header .header768 img{display:none;}
	header .header480 img{display:block; width:100%; height:auto;}
	
	#searchBar input{width:100%;}
    #searchBar a{width:100%; margin:3px 0 0;}
	
	.picL, .conR{width:100%;}
	.conR ul li{width:100%;}
	
	#company ul li{width:100%; margin:5px 0 0;}

	
	/*footer{padding:10px;}*/
	footer span{display:block;}
}

@media screen and (min-width: 480px) and (max-width: 639px) {
	header .header768 img{width:100%; height:auto; display:block;}
	#searchBar input{width:100%;}
    #searchBar a{width:100%; margin:3px 0 0;}
	.picL, .conR{width:95%;}
	.conR ul li{width:48%;}
	
	#company ul li a{width:100px; height:100px;}
	
}

@media screen and (min-width: 640px) and (max-width: 767px) {
	header .header768 img{width:100%; height:auto; display:block;}
	#searchBar input{width:18%;}
	#searchBar input.w25{width:25%;}
	#searchBar a{padding:2px 10px;}
	.picL, .conR{width:95%;}
	.conR h4{margin-bottom:5px;}
	.conR p{margin:10px 0; font-size:15px; line-height:20px;}
	#company ul li a{width:140px; height:140px;}

}

@media screen and (max-width: 767px) {
	html,body{-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */}
    .topLogo{display:none;}
	.m_nav{display:block;}
	header .headerArea{display:none;}
	header h1{display:none;}
	.container{padding:0 10px;}
	
	/*article{min-height:280px;}*/
	.box h2{font-size:30px; margin-bottom:20px;}
	.box h2 span{font-size:11px;}
	
	.picL, .conR{height:auto; margin:auto; float:none;}
	.conR ul li{font-size:15px; margin-left:5px;}
	.conR h4{margin-bottom:5px;}
	.conR p{margin:10px 0; font-size:15px; line-height:20px;}
	
	/*.boxbox{padding:20px 0;}*/
	.joblist .jobLeft{width:100%;}
	.joblist .jobCenter{width:100%; border-left:none;}
	.joblist .jobRight{width:100%;}
	.joblist li{padding: 0 0 18px}
	.joblist li .jobtitle span, .joblist li .cpyname span, .joblist li .info, .joblist li .des {display:block; text-align:center; padding:0.3em 0em;}
	.joblist li .joblist_btnarea a {margin-top:1em; /*padding:0.8em 0em;*/}
	.joblist li .joblist_btnarea a:nth-child(2) {margin-top:0.2em;}
	.joblist li .joblist_btnarea a.mark.act:focus i.markfly {
		animation: markclick-xs 1.5s ease-in;
		-moz-animation: markclick-xs 1.5s ease-in;
		-webkit-animation: markclick-xs 1.5s ease-in;
		-o-animation: markclick-xs 1.5s ease-in;
		animation-iteration-count: 1;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	html,body{-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */}
    .topLogo{display:none;}
	.m_nav{display:block;}
	header .headerArea {display:none;}
	header .header990 img{width:100%; height:auto; display:block;}
	
	.container{padding:0 20px;}
	#searchBar input{width:18%;}
	#searchBar a{padding:2px 20px;}
	
	.picL .picex h2, .picL .picex span{float:none;}
	.picL{width:40%;}
	.picL .picex{padding:10px 12px;}
	.conR{width:59%; height:auto; padding:10px 15px;}
	.conR h4{margin-bottom:5px;}
	.conR p{margin:10px 0; font-size:15px; line-height:20px;}
	.conR ul li{font-size:15px; margin-left:5px;}

	
	.joblist .jobLeft{width:41.66666667%;}
	.joblist .jobCenter{width:58.33333333%;}
	.joblist .jobRight{width:100%;}
	
	.joblist li .joblist_btnarea a {width:49%; margin-top:1em;}
	.joblist li .joblist_btnarea a:last-child{margin-top:1em;}
	.joblist li .joblist_btnarea a.mark {margin-right:2%;}
	
	#company ul li a{width:160px; height:160px;}

}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.topLogo .topArea .nav{margin-right:10px;}
	.topLogo .topArea .nav ul li a {padding:0 3px;}

	header .headerArea span.h_title{position:absolute; left:40%; top:10%;}
    header .headerArea span.h_title img{width:55%;}
	
	.container{padding:0 20px;}
	#searchBar input{width:20%;}
	
	.picL{width:37%; height:282px;}
	.picL img{height:280px; width:100%;}
	.conR{width:62%; height:280px;}
	
	.joblist .jobLeft{width:33.33333333%;}
	.joblist .jobCenter{width:50%;}
	.joblist .jobRight{width:16.66666667%;}

	
}

@media screen and (min-width: 1201px) and (max-width: 1400px){
    header .headerArea span.h_title{position:absolute; left:40%; top:10%;}
    header .headerArea span.h_title img{width:65%;}


}
@media screen and (min-width: 1401px) and (max-width: 1799px){
    header .headerArea span.h_title{position:absolute; left:40%; top:10%;}
    header .headerArea span.h_title img{width:75%;}


}

 #section_interview {
    padding: 40px 10px !important;
}



/********************以下RWD********************/
@media screen and (max-width: 400px){
.gradient-wrap li .le_con{ width:100%; float: left;}	
.gradient-wrap li .ri_con{ width:100%; float:left; display:block;}
.gradient-wrap li .ri_con h3{border-bottom: none;}
.gradient-wrap li .ri_con{ margin-bottom:8px;}
.gradient-wrap li .ri_con .r_area{ margin-top:0px;}
}

.wrap-content {
	overflow: hidden;
}

.btn-center {
    margin-left: 100px;
    margin-top: 20px;
}

.mgt60 {
	margin-top: 0px;
}
.mgt10 {
	margin-top: 10px;
}
.w65p {
	width: 100%;
}
.inlineBlock {
    display: inline-block;
}
.txt-left {
	text-align: left;
}
.txt-right {
	text-align: right;
}
/*討論區*/
.a{
	background-color: #fceb95;
    padding: 10px 0px;
}
.b{margin-right: 0px !important;margin-left: 0px !important;}
.c{font-size: 1.3em; font-weight:bold;}
.e{ 
	border-top: solid 0.5px #535353;
    border-bottom: solid 0.5px #535353;
    padding: 5px 0px;
    margin: 15px 0px;}
.f{background-color: #fceb95;}
.a-btn{
    background: #9e7bd2;
    color: #fff;
    font-weight:bold;
    display: block;
    text-align: center;
    padding: 7px 0;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 1.3em;

}
.g{background-color: #c3ade2;}
/*input[type="text"] {
    border: solid 1px #898989;
    width: 100%;
    height: 45px;
    margin-top: 10px;
    border-radius: 4px;
}*/
.g{
	background-color: ;: #c3ade2;
    padding: 10px 0px;
    color: #fff;
}
.h{-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
background-color: #fff;
}
.i{margin-right: 0px !important;margin-left: 0px !important;}


/*討論區*/

@media (max-width: 991px) {
	.txt-left, .txt-right {
		text-align: center !important;
	}
	.mgt60 {
		margin-top: 30px;
	}
	.normal-btn {
		margin: 10px auto 0;
	}
}
/* modal */
.modal-wrap {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}

.modal-content {
background: #fff;
    color: #7d7d7d;
    border-radius: 10px;
    padding: 65px 0 0 96px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 778px;
    height: 500px;
}
@media (max-width: 777px) {
	.modal-content {
		transform: translate(-50%,-50%) scale(0.5);
		width: 600px;
    	height: 540px;
    	padding-left: 25px;
    	padding-top: 90px;
	}
	.ex-img {
    padding: 0px;
    padding-bottom: 50px;
}
.b {
    margin-bottom: 30px;
}
.i {
    margin-bottom: 0px;
}
}

.modal-content h1 {
	margin-bottom: 50px;
	font-size: 55px;
}
.modal-content p {
	color: #535353;
	line-height: 1.8;
	font-size: 30px;
}
.modal-content .red {
	color: #9e0000;
	font-size: 55px;

}
.modal-content .green {
	color: #05cb00;
	font-size: 26px;
	margin: 0 5px;
}
.modal-content .normal-btn {
	font-size: 27px;
	border-radius: 25px;
    color: #fff;
}
.modal-content .close {
    color: #7d7d7d;
    font-size: 55px;
    position: absolute;
    right: 30px;
    top: 30px;
}
.fz30 {
	font-size: 30px;
}
.masonry{ max-width: 1020px; margin: 0 auto; }

/*.masonry {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 0;
          column-gap: 0;
  counter-reset: item-counter;
}
@media screen and (min-width: 400px) {
  .masonry {
    -webkit-column-count: 1;
            column-count: 1;
  }
}
@media screen and (min-width: 600px) {
  .masonry {
    -webkit-column-count: 2;
            column-count: 2;
  }
}
@media screen and (min-width: 800px) {
  .masonry {
    -webkit-column-count: 2;
            column-count: 2;
  }
}
@media screen and (min-width: 1100px) {
  .masonry {
    -webkit-column-count: 2;
            column-count: 2;
  }
}*/

.witem {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  width: 50%;        
  padding: 4%;
  /*padding: 10px;*/
  counter-increment: item-counter;
}
.witem__content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 40px;
  background: currentColor;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
          background: transparent;
}


@media screen and (max-width: 767px){

	.witem {
	  width: 100%;        
	  padding-left: 0;
	  padding-right: 0;
	}

}

.relate-job {
    margin-top: 30px;
}

.discussTopic-otherlink {
	margin-bottom: 30px;
}

/*推薦職缺*/
div.tab_container {
    clear: left;
    width: 100%;
    border-top: none;
		border: 1px solid #ced6e9;
    background: #fff;
    height: auto;
    overflow: hidden;
    margin: 15px 0 0px;
		padding: 12px 15px;
    background-color: #f5f7fa;
}

.tab_container ul li {
	border-bottom:1px solid #e3e4e8;
	padding:10px 0;
}

.tab_container ul li:last-child{
	border-bottom: 0px solid #e3e4e8;
}


.tab_container:not(:last-child) a:nth-child(1):before{
	font-family: 'FontAwesome';
	content: "\f054";
	color: #fff;
	background-color: #57bec3;
	border-radius: 100%;
	padding: 5px 5px 4px 7px;
	font-size: 12px;
	margin: 0 12px 0 0;
	position: relative;
	bottom: 1px;
}

.tab_container ul li a {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: #556c99;
	text-decoration: none;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
	max-width: 90%;
}

.tab_container ul li a:nth-child(2) {
	font-weight: 400;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: bottom;
	max-width: 100%;
	display: block;
	margin: -3px 0 0 33px;
	font-size: 14px;
	color: rgb(51, 51, 51);
}

@media (max-width: 991px) and (min-width: 768px) {
	.tab_container ul li a {
		max-width: 77%;
	}
}


/* 右上角職涯黃金一條龍 */
.experience {
	display: block;
	margin-bottom: 19px !important;
    background: url(../img/deco-experience.png) #f5f7fa right bottom no-repeat !important;
    background-size: cover !important;
    margin-top: 95px !important;
    height: 261px !important;
    padding-top: 16px;
}
.experience:hover {
	background: url(../img/deco-experience-h.png) #f5f7fa right bottom no-repeat !important;
	background-size: cover !important;
}
.experience p {
    font-size: 20px;
    padding: 0px 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
    line-height: 2;
}
.experience .button-more {
	margin:5px 0 19px 0;
}

@media (max-width: 991px) {
	.experience {
	    margin-top: 10px !important;
	}
}