html, body {
   /* height: 100%;*/
}
body {

}
.navbars-box.sub {
    height: 92px;
}
.navbars-box-top.sub {
    padding-top: 92px;
}
/*選單與標題*/
.top-menu-btn-box>div, .top-menu-btn-box>a {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    height: 46px;
    background-color: #3E3A39;
    color: #fff;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, opacity .15s ease-in-out;
}
.top-menu-btn-box>div, .top-menu-btn-box>a {
    border-right: 1px solid #595757;
}
.top-menu-btn-box>div:last-child, .top-menu-btn-box>a:last-child {
    border-right: 0px;
}
.top-menu-btn-box>div:hover, .top-menu-btn-box>a:hover {
}
.top-menu-btn-box>div.active , .top-menu-btn-box>a.active {
}
.nav-pills .nav-link {
    border-radius: 0px;
    padding: 0px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: inherit;
    background-color: whitesmoke;
}

/*主視覺區塊*/
.main-top-box {
    position: relative;
    width: 100%;
    height: 456px;
    background: url(../../images/jobs-2019/top_1920_444.jpg) no-repeat center center;
    transition: all .15s ease-in-out;
}
.main-top-image-01 {
    position: relative;
    margin: 0 auto;
    top: 48px;
    left: -240px;
    width: 495px;
    height: 258px;
    background: url(../../images/jobs-2019/top-img1.png) no-repeat center center;
    background-size: contain;
    transition: all .15s ease-in-out;
}
.main-top-image-02 {
    position: relative;
    margin: 0 auto;
    top: -20px;
    left: 500px;
    width: 481px;
    height: 428px;
    background: url(../../images/jobs-2019/top-img2.png) no-repeat center center;
    background-size: contain;
    transition: all .15s ease-in-out;
}
@media (max-width: 1026px) {
.main-top-box {
}
.main-top-image-01 {
    top: 28px;
    left: -148px;
    width: 398px;
    background-size: contain;
}
.main-top-image-02 {
    top: 34px;
    left: 304px;
    width: 404px;
    background-size: contain;
}
}
@media (max-width: 760px) {
.main-top-box {
    background-size: cover;
}
.main-top-image-01 {
    top: 28px;
    left: 0px;
    width: 320px;
    height: 167px;
    background-size: contain;
}
.main-top-image-02 {
    top: 166px;
    left: 0;
    width: 294px;
    height: 262px;
    background-size: contain;
}
}
@media (max-width: 320px) {
.main-top-image-01 {
    width: 300px;
    height: 156px;
    background-size: contain;
}
.main-top-image-02 {
}
}

.title-box1 {
    padding: 6px;
    color: #fff;
    background-color: #e60012;
}
.button-box1 {
    padding: 12px;
    background-color: rgba(230,0,18,0.08);
}
.button-1 {
    color: #fff;
    background-color: #e60012;
    cursor: pointer;
    border: 1px solid #fff;
    box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.1);
    border-radius: 8px;
}
@media (hover: hover) {
.button-1:hover {
    background-color: #e60012;
}
}

.col-box1>div, .col-box1>a {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    padding: 12px;
}
.col-box2>div, .col-box1>a {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    text-align: center;
    padding: 12px;
}
.col-box3>div:nth-child(1) {
    padding-left: 12px;
    padding-right: 12px;
}
.col-box3>div:nth-child(2) {
    padding-left: 12px;
    padding-right: 12px;
}
@media (max-width: 1026px) {
.col-box1>div, .col-box1>a {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}
@media (max-width: 768px) {
.col-box2>div, .col-box2>a {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}
@media (max-width: 680px) {
.col-box2>div, .col-box2>a {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.col-box3>div:nth-child(1) {
    padding-left: 0px;
    padding-right: 0px;
}
.col-box3>div:nth-child(2) {
    padding-left: 0px;
    padding-right: 0px;
}
}
@media (max-width: 480px) {
.col-box1>div, .col-box1>a {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}
.form-box1 {
    max-width: 1080px;
    background-color: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.1);
}
.form-title1 {
    width: 100%;
    background-color: #EFEFEF;
    padding: 12px;
}
.form-div1>div {
    min-height: 34px;
}

.mw1 {
    max-width: 520px;
}
.mw2 {
    max-width: 420px;
}


/*第二版*/

.scrollspy-menu {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    will-change: transform;
    z-index: 5;
}
.scrollspy-menu.show {
    position: fixed;
    -webkit-transform: translate(0px, 46px);
    transform: translate(0px, 46px);
}
.scroll-body-new {
    height: 0px;
}
.scroll-body-new.active {
    height: 46px;
}

.select-none {
    filter: grayscale(0);
    transform: translateX(0px) scale(1.0);
    transition: all .5s ease-in-out;
    cursor: pointer;
}
/*
.select-none:hover {
    filter: grayscale(0) opacity(1);
}
*/
.select-none.select {
    
}
.select-none.select.active {
    filter: grayscale(0);
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0px 0px 16px 0 rgba(0,0,0,0.2);
}
.title-text.job-0::after {
    content: "選擇比努力更重要！";
}
.title-text.job-1::after {
    content: "你是初出社會想挑戰百萬年薪的夢想家";
}
.title-text.job-2::after {
    content: "你是職場菁英想再次榮耀人生的實踐家";
}
.title-text.job-3::after {
    content: "你是離鄉背景想光宗耀祖的好想家";
}
.title-text.job-4::after {
    content: "你是創意無限想大展拳腳的創業家";
}
.full-bg-1 {
    position: relative;
    width: 100%;
    height: 932px;
    background: url(../../images/jobs-2019/story-1-00.jpg) no-repeat center center;
    transition: all .15s ease-in-out;
}
.story-t1 {
    position: absolute; 
    top: 310px;
    left: 0px;
    transition: all .15s ease-in-out;
    line-height: 60px;
    padding: 0 40px 0 52px;
}
.story-t1>div:nth-child(1) {
    color: #fff;
    font-size: 40px;
}
.story-t1>div:nth-child(2) {
    color: #fff;
    font-size: 40px;
}
.full-bg-2 {
    position: relative;
    width: 100%;
    height: 700px;
    background: url(../../images/jobs-2019/story-1-05.jpg) no-repeat center center;
    transition: all .15s ease-in-out;
}
.story-t2 {
    position: absolute; 
    top: 268px;
    right: 0px;
    transition: all .15s ease-in-out;
    line-height: 60px;
    padding: 0 160px 0 40px;
}
.story-t2>div:nth-child(1) {
    color: inherit;
    font-size: 40px;
}
.story-t2>div:nth-child(2) {
    color: #B5B5B6;
    font-size: 40px;
}
.full-bg-3 {
    position: relative;
    width: 100%;
    height: 700px;
    background: url(../../images/jobs-2019/story-3-04.jpg) no-repeat center center;
    transition: all .15s ease-in-out;
}
.story-t3 {
    margin: 0 auto;
    width: 250px;
    position: absolute; 
    top: 270px;
    left: 0;
    right: 0;
    transition: all .15s ease-in-out;
    line-height: 60px;
    padding: 20px 40px;
    background-color: rgba(255,230,230,0.90);
}
.story-t3>div:nth-child(1) {
    color: inherit;
    font-size: 40px;
}
.story-t3>div:nth-child(2) {
    color: #e60012;
    font-size: 40px;
}
.story-btn {
    display: inline-block;
    color: #fff;
    font-size: 30px;
    padding: 0px 16px;
    background-color: #e60012;
}
.story-text1 {
    font-size: 40px;
    line-height: 52px;
    padding: 60px 0px;
    transition: all .15s ease-in-out;
}
.story-text1>div {
    display: inline-block;
}
.story-text2 {
    position: absolute;
    font-size: 36px;
    line-height: 48px;
    background-color: rgba(255,230,230,0.90);
    padding: 12px 20px;
    transition: all .15s ease-in-out;
}
.story-text2.t1 {
    top: 0;
    left: 0;
}
.story-text2.t2 {
    top: 0;
    right: 0;
}
.story-text2.t3 {
    bottom: 0;
    left: 0;
}
.story-text2.t4 {
    bottom: 0;
    right: 0;
}
.story-text3 {
    position: absolute;
    font-size: 36px;
    background-color: rgba(245,245,245,0.90);
    padding: 12px 20px;
    transition: all .15s ease-in-out;
}
.story-text3>div:nth-child(2) {
    padding: 4px 0px;
}
.story-text3.t1 {
    bottom: 0;
    left: 0;
}
.story-text3.t2 {
    bottom: 0;
    right: 0;
}
.story-text3.t3 {
    bottom: 0;
    left: 0;
}
.story-text3.t4 {
    bottom: 0;
    right: 0;
}
.story-3-bg>div:nth-child(1) {
    font-size: 36px;
    line-height: 48px;
}
.story-3-bg>div:nth-child(2) {
    font-size: 28px;
    line-height: 40px;
}
.story-3-bg>div:nth-child(3) {
    font-size: 16px;
    line-height: 24px;
}
.t-round-box {
    margin: 60px 0px;
}
.t-round-box:nth-child(1) {
    padding: 0 24px 0 48px;
}
.t-round-box:nth-child(2) {
    padding: 0 48px 0 24px;
}
.t-round-box-t {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 80px;
    color: #fff;
    border-radius: 50%;
    background-color: #e60012;
    width: 132px;
    height: 132px;
}

.story-3-bg {
    background-color: rgba(255,230,230,0.90);
}
.story-3-01 {
    width: 100%;
    height: 100%;
    background: url(../../images/jobs-2019/story-3-01.jpg) no-repeat center center;
    background-size: cover;
}
.story-3-02 {
    width: 100%;
    height: 100%;
    background: url(../../images/jobs-2019/story-3-02.jpg) no-repeat center center;
    background-size: cover;
}
.story-3-03 {
    width: 100%;
    height: 100%;
    background: url(../../images/jobs-2019/story-3-03.jpg) no-repeat center center;
    background-size: cover;
}
@media (max-width: 1400px) {
.full-bg-2 {
    height: 632px;
    background-position-x: 38%;
}
}
@media (max-width: 768px) {
.full-bg-3 {
    height: 532px;
    background-size: cover;
    background-position-x: 46%;
}
.story-t3 {
    top: 340px;
}
.story-text1 {
    font-size: 36px;
    line-height: 48px;
}
.story-text1>div {
    display: block;
}
.story-text2 {
    font-size: 28px;
    line-height: 40px;
}
.story-text2.t1 {
    top: auto;
    bottom: 0;
    left: 0;
}
.story-text2.t2 {
    top: auto;
    bottom: 0;
    right: 0;
}
}
@media (max-width: 680px) {
.full-bg-1 {
    height: 632px;
    background-position-x: 55%;
}
.full-bg-3 {
    background-position-x: 58%;
}
.story-t1 {
    top: 154px;
    padding: 0 40px;
}
.full-bg-2 {
    height: 632px;
    background-position-x: 35%;
}
.story-t2 {
    top: 364px;
    padding: 0 40px;
}
.t-round-box:nth-child(1) {
    padding: 0 12px 0 24px;
}
.t-round-box:nth-child(2) {
    padding: 0 24px 0 12px;
}
.story-3-01, .story-3-02, .story-3-03 {
    height: 200px;
}
}
.share-icon {
    display: block;
    padding: 15px 16px;
    text-align: center;
    color: #fff;
    position: fixed;
    right: 0px;
    bottom: 0px;
    background-color: #e60012;
    opacity: .6;
    border-radius: 4px;
    z-index: 1001;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-transform: translate(-15px, -65px);
    transform: translate(-15px, -65px);
    will-change: transform;
    transition: transform .3s ease-out;
}
.share-icon.active {
    -webkit-transform: translate(-15px, -120px);
    transform: translate(-15px, -120px);
}

.job_city {
	text-align: left;
}
.search-box-div {
	text-align: left;
	position: absolute;
	top: 38px;
	left: 0;
    z-index: 1;
    width: 604px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
}
.search-box-div.search-city .search-body .s-btn {
    margin: 0px;
}
.search-box-div .search-body .s-btn {
    padding: 0px 8px;
}
.search-box-div .search-body-title {
    padding: 2px 10px;
}



@media (max-width: 680px) {
.search-box-div {
    left: auto;
    right: 0;
    width: 100%;
}
.search-box-div .search-box {
    border: #EFEFEF 1px solid;
}
.search-box-div.search-city .search-body .s-btn {
    margin: 2px 2px;
}
.search-box-div.search-city .nav.search-body {
	display: block!important;
    overflow-y: auto;
    height: auto;
	max-height: 264px;
}
}

/* 僅 IE10+ CSS 風格樣式 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.search-box-div.search-city .search-body .s-btn {
    margin: 2px 0px;
}
}


@media (max-width: 360px) {
.search-box-div {
    width: 304px;
    right: -12px;
}
}
@media (max-width: 320px) {
.search-box-div {
    width: 264px;
	
}
}