@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@900&display=swap');

body, button, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, input, select, textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

body {
    line-height: 1.5;
    font-size: 1.125rem;
    color: var(--basic-txt);
    background: var(--main-color);
}

@media screen and (max-width:1199px) {
    h1, .h1 {
        font-size: calc(1.2rem + 2vw);
        /* RFS */
    }
}

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

    /* body {
        font-size: 0.875rem;
    } */
    h1, .h1 {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.75rem;
    }

    h3, .h3 {
        font-size: 1.5rem;
    }

    h4, .h4 {
        font-size: 1.25rem;
    }

    h5, .h5 {
        font-size: 1rem;
    }

    /* h6, .h6 {
        font-size: 0.875rem;
    } */
}

@media screen and (max-width:767px) {
    body {
        font-size: 1rem;
    }
}

ul {
    padding-inline-start: 0;
}

li {
    list-style: none;
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

.content-fluid {
    /* container-fluid */
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.contentbox {
    /* container */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.contentbox_main {
    position: relative;
    padding: 0 10px var(--content-p);
    text-align: center;
    z-index: 10;
}

@media screen and (min-width: 576px) {
    .contentbox {
        max-width: 540px;
    }
}

@media screen and (min-width: 768px) {
    .contentbox {
        max-width: 720px;
    }

    .contentbox_main {
        padding-right: 0;
        padding-left: 0;
    }
}

@media screen and (min-width: 992px) {
    .contentbox {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .contentbox {
        max-width: 1140px;
    }
}

.rowline {
    /* row */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*-------------------- 共用樣式 --------------------*/

:root {
    --basic-txt: #212121;
    --gray-light: #edf1f0;
    --ye-light: #ffff33;
    --ye-color: #FAB617;
    --og-color: #FF8B00;
    --og-deep: #df084e;
    --main-light-1: #CFF6E3;
    --main-light: #41D98F;
    --main-color: #11D073;
    --main-deep: #0C9251;
    --content-p: 5rem;
    --transition-com: all 0.25s ease;
}

strong {
    font-weight: 600 !important;
}

.txt-ye {
    color: var(--ye-light);
}

/*-- 區塊陰影 --*/

.sec-shadow {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

/*-- 重要底線 --*/

.under-line {
    border-bottom: 3px solid var(--main-color01);
}

.material-icons {
    vertical-align: text-top;
}

/*-------------------- 共用樣式 END --------------------*/

/*-------------------- 主視覺 --------------------*/

#main_top>h1 {
    display: block;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 1px;
    padding: 0;
    margin: 0;
}

#main_top {
    width: 100%;
    height: 0;
    padding-bottom: 500px;
    position: relative;
    background: url(https://event.cdn-gunnarworks.com/events/career/header_1920x500.jpg) no-repeat center;
    background-size: cover;
}

#main_top>.slogan_area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    text-align: center;
    color: #fff;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#727272+0,727272+100&0+0,0.4+50 */
    background: -moz-linear-gradient(top, rgba(114, 114, 114, 0) 0%, rgba(114, 114, 114, 0.4) 50%, rgba(114, 114, 114, 0.4) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(114, 114, 114, 0) 0%, rgba(114, 114, 114, 0.4) 50%, rgba(114, 114, 114, 0.4) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(114, 114, 114, 0) 0%, rgba(114, 114, 114, 0.4) 50%, rgba(114, 114, 114, 0.4) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00727272', endColorstr='#66727272', GradientType=0);
    /* IE6-9 */

}

#main_top>.slogan_area>p {
    font-size: 3.4rem;
    font-weight: 400;
    letter-spacing: 0.15rem;
}

#main_top>.slogan_area .btn-sec a {
    margin: 0 1rem;
}

@media screen and (max-width: 991px) {
    #main_top {
        padding-bottom: 400px;
    }

    #main_top>.slogan_area>p {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    #main_top {
        padding-bottom: 63.8%;
        background: url(https://event.cdn-gunnarworks.com/events/career/header_768x490.jpg) no-repeat center;
        background-size: cover;
    }

    #main_top>.slogan_area {
        height: 150px;
    }

    #main_top>.slogan_area>p {
        font-size: 1.75rem;
        margin-bottom: 0.6rem;
    }
}

/*-------------------- 主視覺 END --------------------*/

/*-------------------- NAV --------------------*/

.nav_bar {
    position: sticky;
    top: 0;
    left: 0;
    padding: 0;
    background: var(--main-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.nav_bar ul.rowline {
    display: flex;
    justify-content: flex-end;
    padding-inline-start: 0;
}

.nav_bar ul.rowline>li {
    display: inline-block;
    text-align: center;
    padding: 0.8rem 2rem;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; */
    transition: var(--transition-com);
}

.nav_bar ul.rowline>li>a {
    color: #ffffff;
}

.nav_bar ul.rowline>li:hover {
    transform: translateY(-3px);
    text-shadow: 1px 5px 2px rgba(0, 0, 0, 0.3);
    color: var(--ye-light);
}

.nav_bar ul.rowline>li>a:hover {
    color: var(--ye-light);
}

@media screen and (max-width:991px) {
    .nav_bar ul.rowline>li {
        font-size: 1.125rem;
        padding: 0.8rem 1.5rem;
    }

    .nav_bar .material-icons {
        vertical-align: sub;
        font-size: 110%;
    }
}

@media screen and (max-width: 767px) {
    .nav_bar ul.rowline {
        justify-content: center;
    }

    .nav_bar ul.rowline>li {
        font-size: 1rem;
        padding: 0.8rem 0.5rem;
    }

    .nav_bar .material-icons {
        vertical-align: middle;
    }
}

/*-------------------- NAV END --------------------*/

/*-------------------- 全頁 --------------------*/

#wrapper {
    padding-top: var(--content-p);
    width: 100%;
    overflow-x: hidden;
    background: url(https://event.cdn-gunnarworks.com/events/career/bg_all.jpg) repeat;
}

/*-- 大背景 --*/
.bg-icon {
    position: relative;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg-icon>img {
    position: absolute;
    height: auto;
}

.bg-icon>img:nth-of-type(1) {
    width: calc(10vw + 127px);
    top:calc(var(--content-p) * -0.5) ;
    right: 0;
}

.bg-icon>img:nth-of-type(2) {
    width: calc(12vw + 139px);
    top: 40%;
    left: 1rem;
}

.bg-icon>img:nth-of-type(3) {
    width: calc(11vw + 113px);
    bottom: 0.5rem;
    right: 1.5rem;
}

@media screen and (max-width:767px) {
    .bg-icon>img:nth-of-type(2) {
        left: -1rem;
    }

    .bg-icon>img:nth-of-type(3) {
        right: 0;
    }
}

/*-- 大背景 END --*/

/*-- 標題字級 --*/

header.display-4 {
    color: var(--ye-color);
    margin-bottom: calc(var(--content-p) / 2);
}

h1 {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: var(--main-color);
    font-weight: 600;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    z-index: 100;
}

h1::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 64px;
    height: 3px;
    background: var(--main-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

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

@media screen and (max-width:767px) {
    header.display-4 {
        font-size: 2.5rem;
    }
}

h2 {
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

h2>.material-icons {
    font-size: 2.2rem;
}

/*-- 按鈕 --*/

.btn {
    border-radius: 500px;
    white-space: nowrap;
}

@media screen and (min-width: 992px) {
    .btn {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

.btn>img {
    vertical-align: middle;
}

.btn-success {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-success:hover {
    background-color: var(--main-deep);
    border-color: var(--main-deep);
}

.btn-danger {
    color: #fff;
    background-color: var(--og-color);
    border-color: var(--og-color);
}

.btn-danger:hover {
    background-color: var(--og-deep);
    border-color: var(--og-deep);
}

.btn-lg {
    padding: 0.6rem 1.6rem;
    font-weight: 600;
    color: #fff !important;
}

@media screen and (max-width:991px) {
    .btn-lg {
        font-size: 1.125rem;
    }
}

@media screen and (max-width:767px) {
    .btn-lg {
        padding: 0.4rem 1rem;
        font-size: 1rem;
    }
}

/*-- 按鈕區域 --*/

.btn-sec {
    padding-bottom: 1rem;
    margin-bottom: 0;
    text-align: center;
}

/*-- 區塊樣式 --*/

.con_area {
    position: relative;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#faf8ed', GradientType=0);
    /* IE6-9 */
}

/*-------------------- 全頁 END --------------------*/

/*-------------------- 關於易遊網 #about --------------------*/

.about-slogan {
    background: var(--main-color);
    display: flex;
    flex-wrap: wrap;
    box-shadow: 15px 15px 30px rgba(86, 70, 52, 0.35);
    margin: 2.5rem 0;
}

.about-slogan>div {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    color: #fff;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 2rem;
}

.about-slogan>div:first-of-type {
    background: url(https://event.cdn-gunnarworks.com/events/career/pic-index01.jpg) no-repeat center/cover;
}

@media screen and (max-width: 767px) {
    .about-slogan>div {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        min-height: auto;
    }

    .about-slogan>div:first-of-type {
        padding-bottom: 66.66%;
    }

    .about-slogan>div>h2 {
        font-size: 1.5rem;
    }
}

/*-------------------- 關於易遊網 #about END --------------------*/

/*-------------------- 旅行 一站就GO #highlight --------------------*/

.highlight-area>div {
    margin-bottom: 2rem;
}

.highlight-area .light-icon {
    position: relative;
    background: var(--main-color);
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.highlight-area .light-icon::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: var(--main-light);
}

.highlight-area .light-icon>img, .highlight-area .light-icon>h3 {
    position: relative;
    z-index: 10;
    filter: drop-shadow(3.5px 4.5px 0 rgba(65, 156, 112, 0.5));
}

.highlight-area .light-icon>img {
    margin-bottom: 0.3rem;
    zoom: 1;
}

.highlight-area .light-icon>h3 {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2rem;
    margin-bottom: 0;
}

.highlight-area p {
    color: var(--main-deep);
    text-align: left;
}

@media screen and (max-width: 991px) {
    .highlight-area .light-icon {
        height: 200px;
    }

    .highlight-area .light-icon>img {
        zoom: 0.85;
    }
}

@media screen and (max-width: 767px) {
    .highlight-area .light-icon {
        height: 120px;
    }

    .highlight-area .light-icon>img {
        zoom: 0.5;
    }

    .highlight-area .light-icon>h3 {
        font-size: 1.25rem;
    }
}

/*-------------------- 旅行 一站就GO #highlight END --------------------*/

/*-------------------- 最新消息 #news --------------------*/

#news {
    --icon-area-w: 96px;
    /*-- 大聲公icon區塊寬度 --*/
    background: var(--main-light);
    padding-top: var(--content-p);
}

@media screen and (max-width: 767px) {
    #news {
        --icon-area-w: 75px;}
}

#news h1 {
    --main-color: #fff;
}

#news li.rowline {
    background: #fff;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.news-icon {
    width: var(--icon-area-w);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.news-icon>b {
    position: relative;
    display: inline-block;
    width: calc(var(--icon-area-w) * 0.75);
    /*-- 大聲公黃色圓形寬度 --*/
    height: calc(var(--icon-area-w) * 0.75);
    background: var(--ye-color);
    border-radius: 50%;
}

.news-icon>b::before {
    --icon-w: 56%;
    /*-- 大聲公icon寬度 --*/
    content: '';
    display: inline-block;
    position: absolute;
    background: url(https://event.cdn-gunnarworks.com/events/career/icon-index-new01.png) no-repeat center/contain;
    width: var(--icon-w);
    height: calc(var(--icon-w) * 0.8537);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.news-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: calc(100% - var(--icon-area-w));
    text-align: left;
    padding-right: 1rem;
}

.news-txt a.news-txt-more::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 600;
    font-size: 96%;
    margin-right: 0.2rem;
}

@media screen and (max-width: 767px) {
    .highlight-area .light-icon{
        margin-bottom: 0.6rem;
    }
    .news-txt {
        padding-right: 0.6rem;
    }
}

/*-------------------- 最新消息 #news END --------------------*/

/*-------------------- 發展沿革 #timeline --------------------*/

.timeline-wrap {
    --mark-w: 76px;
    --p-space: 1.5rem;
    position: relative;
    z-index: 10;
}

.timeline-wrap-list {
    display: flex;
    flex-wrap: nowrap;

    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin-bottom: 1.5rem;
}

.timeline-wrap-list:nth-of-type(odd) {
    flex-direction: row-reverse;
}

.timeline-wrap-list:nth-of-type(even) {
    flex-direction: row;
}

.timeline-mark {
    min-width: var(--mark-w);
    width: var(--mark-w);
    height: var(--mark-w);
    background: var(--main-color);
    text-align: center;
    vertical-align: middle;
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 50%;
}

.timeline-mark::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f3c5';
    font-weight: 900;
    color: #fff;
    font-size: calc(32 / 76 * var(--mark-w));
    line-height: var(--mark-w);
}

.timeline-list-box {
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-basis: 50%;
}

.timeline-date {
    display: flex;
    font-size: 1.5rem;
    color: var(--main-deep);
    padding-top: var(--p-space);
    padding-bottom: var(--p-space);
}

.timeline-wrap-list:nth-of-type(even) .timeline-date {
    justify-content: flex-end;
}

.timeline-txt {
    align-items: center;
    background: #fff;
    border: 1px solid var(--main-color);
    box-shadow: 3px 4px 0 var(--main-color);
    padding: var(--p-space) 1rem;
}

@media screen and (max-width: 767px) {
    .timeline-wrap {
        --mark-w: 36px;
    }

    .timeline-wrap-list:nth-of-type(odd) {
        flex-direction: row;
    }

    .timeline-wrap-list:nth-of-type(odd) .timeline-date {
        justify-content: flex-end;
    }

    .timeline-mark {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .timeline-list-box:nth-of-type(1) {
        -webkit-box-flex: 0.2;
        flex-grow: 0.2;
        flex-basis: 20%;
    }

    .timeline-list-box:nth-of-type(3) {
        -webkit-box-flex: 0.8;
        flex-grow: 0.8;
        flex-basis: 80%;
    }

    .timeline-date {
        font-size: 1rem;
    }

}

/*-- 軸線 --*/
.timeline-connector {
    position: absolute;
    width: 5px;
    height: calc(100% - var(--p-space) * 2.8);
    top: var(--p-space);
    left: 50%;
    transform: translateX(-50%);
    background: var(--main-color);
    z-index: -1;
}

/* .timeline-connector::before{content: ''; display: block; width: 100%; height: 100%; background:linear-gradient(to bottom, var(--main-color) 50%, transparent 50%); background-attachment: fixed; } */

@media screen and (max-width: 767px) {
    .timeline-connector {
        width: 5px;
        height: calc(100% - var(--p-space) * 3.5);
        top: var(--p-space);
        left: calc(19.5% + var(--mark-w) / 2);
        transform: translateX(-50%);
    }
}

/*-------------------- 發展沿革 #timeline END --------------------*/

/*-------------------- 得獎紀錄 #prize --------------------*/

#prize {
    background-color: var(--main-color);
    background-image: url(https://event.cdn-gunnarworks.com/events/career/bg-icon-page2-prize01.png);
    background-repeat: no-repeat;
    background-position: -20% center;
    background-size: 30%;
    padding-top: var(--content-p);
}

@media screen and (max-width: 1199px) {
    #prize {
        background-position: -25% center;
        background-size: 35%;
    }
}

@media screen and (max-width: 991px) {
    #prize {
        background-image: url(https://event.cdn-gunnarworks.com/events/career/bg-icon-page2-prize01deep.png);
        background-position: -40% -300%;
        background-size: 50%;
    }
}

@media screen and (max-width: 767px) {
    #prize {
        background-image: url(https://event.cdn-gunnarworks.com/events/career/bg-icon-page2-prize01deep.png);
        background-position: -160% 160%;
        background-size: 80%;
    }
}

#prize h1 {
    --main-color: #fff;
    width: 100%;
}

#prize .prize-list {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

.prize-list>li {
    display: block;
    text-align: left;
    color: #fff;
    margin-bottom: 5px;
}

.prize-list>li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f091';
    font-weight: 900;
    color: var(--ye-light);
    font-size: 96%;
    margin-right: 0.5rem;
}

/*-------------------- 得獎紀錄 #prize END --------------------*/

/*-------------------- 培育體系 #train_system --------------------*/

.system-step>div>.step-circle {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    z-index: 10;
}



.system-step>div:nth-of-type(1)>.step-circle {
    background-color: #41d990;
}

.system-step>div:nth-of-type(2)>.step-circle {
    background-color: #2bd683;
}

.system-step>div:nth-of-type(3)>.step-circle {
    background-color: #11d073;
}

.system-step>div:nth-of-type(4)>.step-circle {
    background-color: #08c268;
}

.system-step>div:nth-of-type(5)>.step-circle {
    background-color: #00b35c;
}

.system-step>div:nth-of-type(6)>.step-circle {
    background-color: #0d9c57;
}

.step-circle>b {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #fff;
    white-space: nowrap;
}

.system-step>div>.step-circle::before {
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translate(50%, -50%);
    font-family: 'Font Awesome 5 Free';
    content: '\f105';
    font-weight: 600;
    color: var(--main-light);
    font-size: 2rem;
}

.system-step>div:last-of-type>.step-circle::before {
    display: none;
}

@media screen and (max-width: 991px) {
    .system-step>div {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .step-circle>b {
        font-size: 1.3rem;
    }

    .system-step>div>.step-circle::before {
        right: -0.5rem;
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 767px) {
    .step-circle>b {
        font-size: 1.25rem;
    }
}

/*-- 培育體系 4塊說明 --*/
.system-intro {
    padding: 3rem 0;
}

@media screen and (max-width: 991px) {
    .system-intro>div {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 2rem;
        font-size: 1rem;
    }
}

.intro-box {
    position: relative;
    border-radius: 20px;
    border: 3px solid var(--main-color);
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 1.5rem 1rem 0.3rem;
}

.intro-box>h4 {
    position: absolute;
    display: inline-block;
    color: var(--main-color);
    font-weight: 600;
    white-space: nowrap;
    background-color: #fdf6ee;
    padding: 0 0.5rem;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.intro-box>p {
    color: var(--main-color);
}

.intro-box>ul li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f058';
    font-weight: 600;
    margin-right: 0.5rem;
}

/*-- 培育體系 4塊說明 END --*/

/*-------------------- 培育體系 #train_system END --------------------*/

/*-------------------- 訓練發展 #train_develop --------------------*/

#train_develop, #train_welfare {
    --train-color01: #37cfa2;
    --train-color02: #82d026;
    --train-color03: #00aa01;
    --train-color04: #23acac;
    --train-color05: #55d041;
}

.train-develop-content {
    --tree-w: 581px;
    position: relative;
}

.develop-tree {
    position: relative;
    display: inline-block;
    width: var(--tree-w);
    height: var(--tree-w);
    background: url(https://event.cdn-gunnarworks.com/events/career/icon-page3-tree.png) no-repeat center bottom/contain;
}

.develop-tree>span {
    position: absolute;
    display: inline-block;
    color: #fff;
    font-size: 1.875rem;
}

.develop-tree>span:nth-of-type(1) {
    top: 10%;
    left: 9%;
}

.develop-tree>span:nth-of-type(2) {
    top: 32%;
    left: 10%;
}

.develop-tree>span:nth-of-type(3) {
    top: 52%;
    left: 12%;
}

.develop-tree>span:nth-of-type(4) {
    top: 25%;
    right: 9%;
}

.develop-tree>span:nth-of-type(5) {
    top: 50%;
    right: 12%;
}

.develop-intro-wrap {
    text-align: left;
    padding-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
}

.develop-intro-wrap h4 {
    font-weight: 600;
}

.develop-intro-wrap h4::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f111';
    font-weight: 600;
    margin-right: 0.5rem;
}

.develop-intro-wrap>div {
    margin-bottom: 2rem;
}

@media screen and (max-width: 1199px) {
    .train-develop-content {
        --tree-w: 500px;
    }
}

@media screen and (max-width: 991px) {
    .train-develop-content {
        --tree-w: 360px;
        font-size: 1rem;
    }

    .develop-tree {
        margin-top: 2rem;
    }

    .develop-tree>span {
        font-size: 1.25rem;
    }

    .develop-intro-wrap h4 {
        font-size: 1.125rem;
    }

    .develop-intro-wrap>div {
        margin-bottom: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media screen and (max-width: 767px) {
    .train-develop-content {
        --tree-w: 355px;
    }

    .develop-tree {
        margin-top: 0;
    }
}

.develop-intro-wrap:nth-of-type(2)>div:nth-of-type(1) h4::before {
    color: var(--train-color01);
}

.develop-intro-wrap:nth-of-type(2)>div:nth-of-type(2) h4::before {
    color: var(--train-color02);
}

.develop-intro-wrap:nth-of-type(2)>div:nth-of-type(3) h4::before {
    color: var(--train-color03);
}

.develop-intro-wrap:nth-of-type(3)>div:nth-of-type(1) h4::before {
    color: var(--train-color04);
}

.develop-intro-wrap:nth-of-type(3)>div:nth-of-type(2) h4::before {
    color: var(--train-color05);
}

@media screen and (min-width: 768px) {
    .develop-intro-wrap {
        display: block;
        position: absolute;
        padding-top: 0;
        width: calc((100% - var(--tree-w)) / 2);
        height: 100%;
        z-index: 10;
    }

    .develop-intro-wrap:nth-of-type(2) {
        top: 0;
        left: 0;
    }

    .develop-intro-wrap:nth-of-type(3) {
        top: 5%;
        right: 0;
    }
}

@media screen and (min-width: 992px) {
    .develop-intro-wrap:nth-of-type(3) {
        top: 20%;
        right: 0;
    }
}

/*-------------------- 訓練發展 #train_develop END --------------------*/

/*-------------------- 員工福利 #train_welfare --------------------*/

#train_welfare {
    background: var(--main-light-1);
    padding-top: var(--content-p);
    font-size: 1rem;
    margin-top: -7px;
    overflow: hidden;
}

.welfare-intro-wrap {
    position: relative;
    justify-content: center;
}

/*-- 員工福利 背景ICON --*/

.welfare-intro-wrap>img[src*='bg-icon-page3-welfare'] {
    position: absolute;
    zoom: 1;
}

.welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(1) {
    top: -20%;
    left: -12%;
}

.welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(2) {
    bottom: -30%;
    left: 12%;
}

.welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(3) {
    top: -25%;
    right: -10%;
}

.welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(4) {
    bottom: -15%;
    right: -15%;
}

@media screen and (max-width:991px) {
    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare'] {
        zoom: 0.85;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(1) {
        top: -10%;
        left: 0%;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(2) {
        bottom: -8%;
        left: 8%;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(3) {
        top: -15%;
        right: -2%;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(4) {
        bottom: 0;
        right: 0;
    }
}

@media screen and (max-width:767px) {
    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare'] {
        zoom: 0.6;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(1) {
        top: -6%;
        left: 0%;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(2) {
        bottom: -5%;
        left: 8%;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(3) {
        top: -10%;
        right: -2%;
    }

    .welfare-intro-wrap>img[src*='bg-icon-page3-welfare']:nth-of-type(4) {
        bottom: 0;
        right: 0;
    }
}

/*-- 員工福利 背景ICON END --*/

.welfare-intro-wrap>div {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-bottom: 1.5rem;
}

@media screen and (min-width:992px) {
    #train_welfare {
        font-size: 1.125rem;
    }

    .welfare-intro-wrap>div {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media screen and (min-width:1200px) {
    .welfare-intro-wrap>div {
        padding-right: 10px;
        padding-left: 10px;
    }
}

.welfare-intro {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.welfare-intro header {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 87.264%;
    background-position: center top;
    background-repeat: no-repeat;
}

.welfare-intro header h4 {
    position: absolute;
    display: inline-block;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
}

.welfare-intro-wrap>div:nth-of-type(1) .welfare-intro header {
    background: url(https://event.cdn-gunnarworks.com/events/career/bg-page3-welfare01.png);
    background-size: cover;
}

.welfare-intro-wrap>div:nth-of-type(2) .welfare-intro header {
    background: url(https://event.cdn-gunnarworks.com/events/career/bg-page3-welfare02.png);
    background-size: cover;
}

.welfare-intro-wrap>div:nth-of-type(3) .welfare-intro header {
    background: url(https://event.cdn-gunnarworks.com/events/career/bg-page3-welfare03.png);
    background-size: cover;
}

.welfare-intro-wrap>div:nth-of-type(4) .welfare-intro header {
    background: url(https://event.cdn-gunnarworks.com/events/career/bg-page3-welfare04.png);
    background-size: cover;
}

.welfare-intro-wrap>div:nth-of-type(5) .welfare-intro header {
    background: url(https://event.cdn-gunnarworks.com/events/career/bg-page3-welfare05.png);
    background-size: cover;
}

.welfare-intro-wrap>div .welfare-intro::after, .welfare-intro-wrap>div .welfare-intro::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: -1;
}

.welfare-intro-wrap>div .welfare-intro::after {
    background-color: rgba(0, 0, 0, 0.1);
    /*-- 背景色暗一階 --*/
}


.welfare-intro-wrap>div:nth-of-type(1) .welfare-intro::before {
    background-color: var(--train-color01);
}

.welfare-intro-wrap>div:nth-of-type(2) .welfare-intro::before {
    background-color: var(--train-color02);
}

.welfare-intro-wrap>div:nth-of-type(3) .welfare-intro::before {
    background-color: var(--train-color03);
}

.welfare-intro-wrap>div:nth-of-type(4) .welfare-intro::before {
    background-color: var(--train-color04);
}

.welfare-intro-wrap>div:nth-of-type(5) .welfare-intro::before {
    background-color: var(--train-color05);
}

.welfare-intro article {
    padding: 1rem;
}

.welfare-intro article>ul {
    display: inline-block;
    text-align: left;
    color: #fff;
}

.welfare-intro article>ul li {
    padding-bottom: 5px;
}

.welfare-intro article>ul li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f058';
    font-weight: 600;
    margin-right: 0.5rem;
}

/*-------------------- 員工福利 #train_welfare END --------------------*/

/*-------------------- 職務介紹 #job --------------------*/

#job {}

.job-wrap {
    justify-content: center;
    text-align: left;
    color: #fff;
}

.job-wrap>div{
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    margin-bottom: 1.8rem;
}

.job-intro-wrap {
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    box-shadow: 15px 15px 30px rgba(86, 70, 52, 0.35);
}

.job-intro-wrap .job-intro-img {
    position: relative;
}

.job-intro-wrap .job-intro-img::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 8.4239%;
    background: url(https://event.cdn-gunnarworks.com/events/career/bg-page4-wave-top.png) no-repeat center top/cover;
}

.job-intro-wrap .job-intro-img>img {
    width: 100%;
    height: auto;
}

.job-intro-wrap .job-intro-txt {
    padding: 0.3rem 1rem;
}

.job-intro-wrap .job-intro-txt h3{font-weight: 600;}

.job-intro-wrap .job-intro-txt blockquote {
    position: relative;
    padding: 0.5rem;
    color: var(--ye-light);
    font-style: italic;
    font-size: 95%;
}

.job-intro-wrap .job-intro-txt blockquote::before, .job-intro-wrap .job-intro-txt blockquote::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 12px;
    background: url(https://event.cdn-gunnarworks.com/events/career/icon-mark.png) no-repeat center/contain;
}

.job-intro-wrap .job-intro-txt blockquote::before {
    top: -0.3rem;
    left: -0.1rem;
}

.job-intro-wrap .job-intro-txt blockquote::after {
    bottom: -0.3rem;
    right: -0.1rem;
    transform: rotate(180deg);
}


/*-------------------- 注意事項 #tte_note --------------------*/

#tte_note {
    color: #fff;
}

#tte_note::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://event.cdn-gunnarworks.com/events/career/bg3-icon-r.png) no-repeat right bottom/15%;
}

@media screen and (max-width: 767px) {
    #tte_note::before {
        background: none;
    }
}

#tte_note h1::before {
    content: url(https://event.cdn-gunnarworks.com/events/career/icon-title05.png);
    margin-right: 1rem;
    vertical-align: middle;
}

#tte_note ul {
    /* padding-inline-start: 24px; */
    margin-bottom: 5px;
}

@media screen and (max-width: 575px) {
    #tte_note ul {
        padding-inline-start: 5px;
    }
}

#tte_note li {
    text-align: left;
}

@media screen and (max-width:991px) {
    #tte_note li {
        font-size: 0.9375rem;
    }
}

#tte_note .contentbox>ul {
    width: 90%;
    margin: 0 auto;
    padding-inline-start: 0;
}

.note_list {
    background: url(https://event.cdn-gunnarworks.com/events/career/note_icon01.png) no-repeat left 3px;
    padding-left: 20px;
    margin-bottom: 5px;
}

.note_list_content {
    background: url(https://event.cdn-gunnarworks.com/events/career/note_icon02.png) no-repeat left 6px;
    padding-left: 20px;
}

.note_content_item {
    background: url(https://event.cdn-gunnarworks.com/events/career/note_icon02.png) no-repeat left 7px;
    padding-left: 15px;
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

#btn_app {
    position: fixed;
    right: 5px;
    bottom: calc(60px + 95px + 5px);
    z-index: 999;
}

#btn_top {
    position: fixed;
    right: 5px;
    z-index: 999;
}

@media screen and (max-width:767px) {
    #tte_note .contentbox>ul {
        width: 95%;
    }

    #btn_top, #btn_app {
        right: 0;
    }
}