@charset "utf-8";
/*============================================================ 全部共用區 ============================================================*/
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: none;
}

body {
    font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
}

.clear {
    margin: 0px;
    padding: 0px;
    border: 0;
    clear: both;
}

.fontRed01 {
    color: #c2185b;
}

.fontRed01EB {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #c2185b;
}

.fontGreyD01 {
    color: #212121;
}

.blank01 {
    width: 100%;
    height: 50px;
}

.blank02 {
    width: 100%;
    height: 70px;
}

a {
    text-decoration: none;
    color: #3949ab;
}

    a:hover {
        text-decoration: underline;
        color: #ab1587;
    }

.goTop {
    position: fixed;
    width: 100px;
    right: 10px;
    bottom: 30px;
    z-index: 9999;
    display: none;
    text-align: center;
    cursor: pointer;
}

    .goTop img {
        border: 0;
        max-width: 100%;
        height: auto;
    }

    .goTop a {
        display: block;
        text-decoration: none;
    }

        .goTop a:hover {
            text-decoration: none;
        }

#bar-black {
    position: fixed;
    z-index: 999;
    height: 28px;
    top: 0;
    margin: 0 auto;
    width: 100%;
    background-color: #2e2e2e;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

    #bar-black img {
        max-width: 100%;
        height: auto;
    }


/*---------------------   動畫設定    ---------------------*/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}


@keyframes tossing {
    0% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

@-webkit-keyframes tossing {
    0% {
        -webkit-transform: rotate(-5deg);
    }

    50% {
        -webkit-transform: rotate(5deg);
    }

    100% {
        -webkit-transform: rotate(-5deg);
    }
}

.tossing {
    animation-name: tossing;
    -webkit-animation-name: tossing;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
/*---------------------   動畫設定 end    ---------------------*/

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




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


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

/*----------- input placeholder設定 -----------*/
section input[type="text"]::-webkit-input-placeholder,
#bkSearchBar input[type="text"]::-webkit-input-placeholder {
    color: #78909c;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]:-moz-placeholder,
#bkSearchBar input[type="text"]:-moz-placeholder {
    color: #78909c;
    opacity: 1;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]::-moz-placeholder,
#bkSearchBar input[type="text"]::-moz-placeholder {
    color: #78909c;
    opacity: 1;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]:-ms-input-placeholder,
#bkSearchBar input[type="text"]:-ms-input-placeholder {
    color: #78909c;
    opacity: 1;
    -ms-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]:hover::-webkit-input-placeholder,
#bkSearchBar input[type="text"]:hover::-webkit-input-placeholder {
    color: #546e7a;
    opacity: 1;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

section input[type="text"]:hover:-moz-placeholder,
#bkSearchBar input[type="text"]:hover:-moz-placeholder {
    color: #546e7a;
    opacity: 1;
    -moz-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

section input[type="text"]:hover::-moz-placeholder,
#bkSearchBar input[type="text"]:hover::-moz-placeholder {
    color: #546e7a;
    opacity: 1;
    -moz-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

section input[type="text"]:hover:-ms-input-placeholder,
#bkSearchBar input[type="text"]:hover:-ms-input-placeholder {
    color: #546e7a;
    opacity: 1;
    -ms-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

section input[type="text"]:focus::-webkit-input-placeholder,
#bkSearchBar input[type="text"]:focus::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]:focus:-moz-placeholder,
#bkSearchBar input[type="text"]:focus:-moz-placeholder {
    opacity: 0;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]:focus::-moz-placeholder,
#bkSearchBar input[type="text"]:focus::-moz-placeholder {
    opacity: 0;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

section input[type="text"]:focus:-ms-input-placeholder,
#bkSearchBar input[type="text"]:focus:-ms-input-placeholder {
    opacity: 0;
    -ms-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
/*----------- input placeholder設定 end -----------*/

.inputOne01 {
    width: 100%;
    height: 46px;
    font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
    text-align: center;
    font-size: 20px;
    line-height: 42px;
    color: #607d8b;
    border: 2px solid #90a4ae;
    border-radius: 10px;
    background-color: #f6faff;
    outline: none;
    -webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    -moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    box-shadow: 1px 2px 0px rgba(51,51,51,.2);
}

    .inputOne01:hover {
        color: #546e7a;
        border-color: #78909c;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .inputOne01:focus, .inputOne01:active {
        color: #455a64;
        border-color: #69777f;
        background-color: #fff;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

/*----------- 美化的Select下拉框設定 -----------*/
.selectOne {
    height: 46px;
    font-size: 20px;
    line-height: 42px;
    border-radius: 10px;
    border: 2px solid #90a4ae;
}

.selectSearchSet {
    height: 36px;
    font-size: 18px;
    line-height: 34px;
    border-radius: 5px;
    border: 1px solid #90a4ae;
}

.nice-select {
    position: relative;
    display: inline-block;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left !important;
    font-weight: normal;
    font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
    color: #607d8b;
    background-color: #f6faff;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    -moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .nice-select:hover {
        color: #546e7a;
        border-color: #78909c;
    }

    .nice-select:active, .nice-select.open, .nice-select:focus {
        color: #455a64;
        border-color: #69777f;
        background-color: #fff;
    }

    .nice-select:after {
        position: absolute;
        display: block;
        width: 20px;
        height: 38px;
        margin-top: -19px;
        right: 5px;
        top: 50%;
        content: "\f107";
        font-family: FontAwesome;
        font-weight: normal;
        text-align: center;
        font-size: 24px;
        line-height: 38px;
        color: #607d8b;
        pointer-events: none;
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .nice-select:hover:after {
        color: #546e7a;
    }

    .nice-select.open:after {
        color: #546e7a;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .nice-select.open .list {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
    }

    .nice-select.disabled {
        border-color: #90a4ae;
        color: #78909C;
        pointer-events: none;
        cursor: pointer;
    }

        .nice-select.disabled:after {
            border-color: #6c84a2;
        }

    .nice-select.wide {
        width: 100%;
    }

        .nice-select.wide .list {
            left: 0 !important;
            right: 0 !important;
        }

    .nice-select.right {
        float: right;
    }

        .nice-select.right .list {
            left: auto;
            right: 0;
        }

    .nice-select .list {
        top: 100%;
        left: 0;
        margin-top: 0;
        position: absolute;
        padding: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        color: #616161;
        border: 1px solid #69777f;
        background-color: #fff;
        box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
        box-sizing: border-box;
        -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
        transform: scale(0.75) translateY(-21px);
        -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
        -moz-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
        -ms-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
        transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
        z-index: 10;
    }

        .nice-select .list:hover .option:not(:hover) {
            color: #757575;
            background-color: transparent !important;
        }

    .nice-select .option {
        min-height: 32px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        list-style: none;
        line-height: 32px;
        cursor: pointer;
        outline: none;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        transition: all 0.2s;
    }

        .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
            color: #fff;
            background-color: #44bac3;
        }

        .nice-select .option.selected {
            color: #616161;
        }

        .nice-select .option.disabled {
            background-color: transparent;
            color: #999;
            cursor: default;
        }

.no-csspointerevents .nice-select .list {
    display: none;
}

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

.buttonSearch01 {
    width: 100%;
    height: 46px;
    text-align: center;
    font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
    font-size: 20px;
    line-height: 46px;
    color: #fff;
    outline: none;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    background-color: #5d7ad5;
    -webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    -moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    box-shadow: 1px 2px 0px rgba(51,51,51,.2);
}

    .buttonSearch01:hover {
        background-color: #c05cae;
    }

    .buttonSearch01:active {
        background-color: #9d4b8e;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
    }

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



/*----------------    頁次設定    ----------------*/
.page-line {
    width: 100%;
    text-align: center;
    margin: 30px auto 0 auto;
}

    .page-line span {
        display: inline-block;
        margin: 5px 2px;
        padding: 5px 10px;
        font-size: 18px;
        line-height: 22px;
        color: #37474f;
        border: 1px solid #cfd8dc;
        background-color: #eceff1;
    }

    .page-line a {
        display: inline-block;
        margin: 5px 2px;
        padding: 5px 10px;
        font-size: 18px;
        line-height: 22px;
        text-decoration: none;
        color: #fff;
        border: 1px solid #757bc2;
        background-color: #757bc2;
    }

        .page-line a:hover {
            text-decoration: none;
            border: 1px solid #c05cae;
            background-color: #c05cae;
        }

    .page-line .page-number {
        display: inline-block;
        margin: 0 0 0 10px;
    }

        .page-line .page-number span {
            background: transparent;
            border: 0;
            padding: 0 5px;
        }
/*----------------    頁次設定 end    ----------------*/



/*----------------------  導覽列設定  ----------------------*/
#top-menu {
    display: none;
    width: 100%;
    height: 60px;
    position: fixed;
    top: 28px;
    left: 0;
    z-index: 100;
    background-color: #757bc2;
}

    #top-menu #btn {
        display: none;
        position: absolute;
        height: 40px;
        padding: 0 7px 0 8px;
        right: 2%;
        top: 10px;
        z-index: 50;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }

        #top-menu #btn:hover {
            color: #757bc2;
            background-color: #fff;
        }

        #top-menu #btn i {
            font-size: 36px;
            line-height: 40px;
        }

    #top-menu #xsWebLogo {
        position: absolute;
        width: 120px;
        left: 2%;
        top: 11px;
        z-index: 50;
    }

#xsWebLogo img {
    max-height: 100%;
    width: auto;
}

#xsNav {
    display: none;
    position: fixed;
    width: 100%;
    top: 60px;
    z-index: 99;
    height: auto;
}

    #xsNav ul {
        width: 100%;
        height: auto;
        list-style-type: none;
	position: absolute;
        top: 28px
    }

        #xsNav ul li {
            width: 100%;
            float: none;
            text-decoration: none;
            border-bottom: 1px dotted #fff;
            background-color: #757bc2;
            transition: all 300ms ease;
            cursor: pointer;
        }

            #xsNav ul li .subMenu li {
                width: 100%;
            }

            #xsNav ul li span {
                display: block;
                padding: 5px 5px 0;
                text-align: center;
                font-size: 18px;
                line-height: 24px;
                color: #fff;
            }

            #xsNav ul li a {
                display: block;
                padding-left: 15px;
                padding-right: 10px;
                height: 40px;
                color: #fff;
                text-decoration: none;
                font-size: 20px;
                line-height: 40px;
                color: #fff;
            }

                #xsNav ul li a i {
                    padding-right: 3px;
                    font-size: 20px;
                    line-height: 40px;
                }

    #xsNav li a:hover {
        text-decoration: none;
        color: #fff;
        background-color: #c05cae;
    }

nav {
    width: 1200px;
    margin: 0 auto;
}

#webLogo {
    float: left;
    width: 140px;
    padding-top: 10px;
    padding-left: 4px;
}

#navJobClass {
    float: right;
}

    #navJobClass span {
        position: relative;
        display: inline-block;
        margin: 0 3px;
        padding: 7px 12px 9px;
        font-size: 18px;
        line-height: 20px;
        color: #fff;
        text-decoration: none;
        border: 1px dotted #fff;
        background: rgb(117,123,194); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(117,123,194,1) 0%, rgba(142,147,205,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(117,123,194,1) 0%,rgba(142,147,205,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(117,123,194,1) 0%,rgba(142,147,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757bc2', endColorstr='#8e93cd',GradientType=0 ); /* IE6-9 */
    }

    #navJobClass .spanC {
        position: relative;
        display: inline-block;
        margin: 0 3px;
        padding: 7px 12px 9px;
        font-size: 18px;
        line-height: 20px;
        color: #fff;
        text-decoration: none;
        border: 1px dotted #fff;
        background: rgb(117,123,194); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(117,123,194,1) 0%, rgba(142,147,205,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(117,123,194,1) 0%,rgba(142,147,205,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(117,123,194,1) 0%,rgba(142,147,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757bc2', endColorstr='#8e93cd',GradientType=0 ); /* IE6-9 */
    }

    #navJobClass a {
        position: relative;
        display: inline-block;
        margin: 0 3px;
        padding: 7px 12px 9px;
        font-size: 18px;
        line-height: 20px;
        color: #577ac1;
        text-decoration: none;
        border: 1px dotted #868fc7;
        background-color: #f6faff;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
    }

        #navJobClass a div.jobclassName,
        #navJobClass span div.jobclassName {
            display: inline-block;
        }

        #navJobClass a i, #navJobClass span i {
            padding-right: 3px;
            font-size: 36px;
            vertical-align: super;
        }

        /*----- hover顏色往下移動特效 -----*/
        #navJobClass a:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            border: none;
            background: rgb(117,123,194); /* Old browsers */
            background: -moz-linear-gradient(top, rgba(117,123,194,1) 0%, rgba(142,147,205,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, rgba(117,123,194,1) 0%,rgba(142,147,205,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, rgba(117,123,194,1) 0%,rgba(142,147,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757bc2', endColorstr='#8e93cd',GradientType=0 ); /* IE6-9 */
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }

        #navJobClass a:hover, #navJobClass a:focus, #navJobClass a:active {
            text-decoration: none;
            color: #fff;
        }

            #navJobClass a:hover:before, #navJobClass a:focus:before, #navJobClass a:active:before {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
/*----- hover顏色往下移動特效 end -----*/

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



/*----------------------  頁首設定  ----------------------*/


/*---------------  動畫優先順序與時間設定  ---------------*/

/*------------  首頁動畫設定  ------------*/
@keyframes components01 {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    2% {
        transform: translateY(8%);
        opacity: 1;
    }

    2.6% {
        transform: translateY(-4%);
    }

    3.2% {
        transform: translateY(4%);
    }

    3.8% {
        transform: translateY(-2%);
    }

    4% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components01 {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    2% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    2.6% {
        -webkit-transform: translateY(-4%);
    }

    3.2% {
        -webkit-transform: translateY(4%);
    }

    3.8% {
        -webkit-transform: translateY(-2%);
    }

    4% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    4% {
        transform: scale(0);
        opacity: 0;
    }

    6.4% {
        transform: scale(1.1);
        opacity: 1;
    }

    7.2% {
        transform: scale(0.9);
    }

    8% {
        transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components02 {
    0% {
        opacity: 0;
    }

    4% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    6.4% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }

    7.2% {
        -webkit-transform: scale(0.9);
    }

    8% {
        -webkit-transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    6% {
        transform: scale(0);
        opacity: 0;
    }

    8.4% {
        transform: scale(1.1);
        opacity: 1;
    }

    9.2% {
        transform: scale(0.9);
    }

    10% {
        transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components03 {
    0% {
        opacity: 0;
    }

    6% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    8.4% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }

    9.2% {
        -webkit-transform: scale(0.9);
    }

    10% {
        -webkit-transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    8% {
        transform: scale(0);
        opacity: 0;
    }

    10.4% {
        transform: scale(1.1);
        opacity: 1;
    }

    11.2% {
        transform: scale(0.9);
    }

    12% {
        transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components04 {
    0% {
        opacity: 0;
    }

    8% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    10.4% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }

    11.2% {
        -webkit-transform: scale(0.9);
    }

    12% {
        -webkit-transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    10% {
        transform: scale(0);
        opacity: 0;
    }

    12.4% {
        transform: scale(1.1);
        opacity: 1;
    }

    13.2% {
        transform: scale(0.9);
    }

    14% {
        transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components05 {
    0% {
        opacity: 0;
    }

    10% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    12.4% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }

    13.2% {
        -webkit-transform: scale(0.9);
    }

    14% {
        -webkit-transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    12% {
        transform: scale(0);
        opacity: 0;
    }

    14.4% {
        transform: scale(1.1);
        opacity: 1;
    }

    15.2% {
        transform: scale(0.9);
    }

    16% {
        transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components06 {
    0% {
        opacity: 0;
    }

    12% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    14.4% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }

    15.2% {
        -webkit-transform: scale(0.9);
    }

    16% {
        -webkit-transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    14% {
        transform: scale(0);
        opacity: 0;
    }

    16.4% {
        transform: scale(1.1);
        opacity: 1;
    }

    17.2% {
        transform: scale(0.9);
    }

    18% {
        transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes components07 {
    0% {
        opacity: 0;
    }

    14% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    16.4% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }

    17.2% {
        -webkit-transform: scale(0.9);
    }

    18% {
        -webkit-transform: scale(1);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}
/*------------  首頁動畫設定end  ------------*/



/*------------  幼兒學前教育頁動畫設定  ------------*/
@keyframes sceneRole11 {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    2% {
        transform: translateY(8%);
        opacity: 1;
    }

    2.6% {
        transform: translateY(-4%);
    }

    3.2% {
        transform: translateY(4%);
    }

    3.8% {
        transform: translateY(-2%);
    }

    4% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole11 {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    2% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    2.6% {
        -webkit-transform: translateY(-4%);
    }

    3.2% {
        -webkit-transform: translateY(4%);
    }

    3.8% {
        -webkit-transform: translateY(-2%);
    }

    4% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    4% {
        transform: translateY(-100%);
        opacity: 0;
    }

    6% {
        transform: translateY(8%);
        opacity: 1;
    }

    6.6% {
        transform: translateY(-4%);
    }

    7.2% {
        transform: translateY(4%);
    }

    8.8% {
        transform: translateY(-2%);
    }

    8% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole12 {
    0% {
        opacity: 0;
    }

    4% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    6% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    6.6% {
        -webkit-transform: translateY(-4%);
    }

    7.2% {
        -webkit-transform: translateY(4%);
    }

    7.8% {
        -webkit-transform: translateY(-2%);
    }

    8% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    6% {
        transform: translateY(-100%);
        opacity: 0;
    }

    8% {
        transform: translateY(8%);
        opacity: 1;
    }

    8.6% {
        transform: translateY(-4%);
    }

    9.2% {
        transform: translateY(4%);
    }

    9.8% {
        transform: translateY(-2%);
    }

    10% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole13 {
    0% {
        opacity: 0;
    }

    6% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    8% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    8.6% {
        -webkit-transform: translateY(-4%);
    }

    9.2% {
        -webkit-transform: translateY(4%);
    }

    9.8% {
        -webkit-transform: translateY(-2%);
    }

    10% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}
/*------------  幼兒學前教育頁動畫設定end  ------------*/


/*------------  高中職國中小頁動畫設定  ------------*/
@keyframes sceneRole22 {
    0% {
        opacity: 0;
    }

    4% {
        transform: translateY(-100%);
        opacity: 0;
    }

    6% {
        transform: translateY(8%);
        opacity: 1;
    }

    6.6% {
        transform: translateY(-4%);
    }

    7.2% {
        transform: translateY(4%);
    }

    7.8% {
        transform: translateY(-2%);
    }

    8% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole22 {
    0% {
        opacity: 0;
    }

    4% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    6% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    6.6% {
        -webkit-transform: translateY(-4%);
    }

    7.2% {
        -webkit-transform: translateY(4%);
    }

    7.8% {
        -webkit-transform: translateY(-2%);
    }

    8% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    6% {
        transform: translateY(-100%);
        opacity: 0;
    }

    8% {
        transform: translateY(8%);
        opacity: 1;
    }

    8.6% {
        transform: translateY(-4%);
    }

    9.2% {
        transform: translateY(4%);
    }

    9.8% {
        transform: translateY(-2%);
    }

    10% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole23 {
    0% {
        opacity: 0;
    }

    6% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    8% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    8.6% {
        -webkit-transform: translateY(-4%);
    }

    9.2% {
        -webkit-transform: translateY(4%);
    }

    9.8% {
        -webkit-transform: translateY(-2%);
    }

    10% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    8% {
        transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        transform: translateY(8%);
        opacity: 1;
    }

    10.6% {
        transform: translateY(-4%);
    }

    11.2% {
        transform: translateY(4%);
    }

    11.8% {
        transform: translateY(-2%);
    }

    12% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole24 {
    0% {
        opacity: 0;
    }

    8% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    10.6% {
        -webkit-transform: translateY(-4%);
    }

    11.2% {
        -webkit-transform: translateY(4%);
    }

    11.8% {
        -webkit-transform: translateY(-2%);
    }

    12% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    10% {
        transform: translateY(-100%);
        opacity: 0;
    }

    12% {
        transform: translateY(8%);
        opacity: 1;
    }

    12.6% {
        transform: translateY(-4%);
    }

    13.2% {
        transform: translateY(4%);
    }

    13.8% {
        transform: translateY(-2%);
    }

    14% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole25 {
    0% {
        opacity: 0;
    }

    10% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    12% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    12.6% {
        -webkit-transform: translateY(-4%);
    }

    13.2% {
        -webkit-transform: translateY(4%);
    }

    13.8% {
        -webkit-transform: translateY(-2%);
    }

    14% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    12% {
        transform: translateY(-100%);
        opacity: 0;
    }

    14% {
        transform: translateY(8%);
        opacity: 1;
    }

    14.6% {
        transform: translateY(-4%);
    }

    15.2% {
        transform: translateY(4%);
    }

    15.8% {
        transform: translateY(-2%);
    }

    16% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole26 {
    0% {
        opacity: 0;
    }

    12% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    14% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    14.6% {
        -webkit-transform: translateY(-4%);
    }

    15.2% {
        -webkit-transform: translateY(4%);
    }

    15.8% {
        -webkit-transform: translateY(-2%);
    }

    16% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    14% {
        transform: translateY(-100%);
        opacity: 0;
    }

    16% {
        transform: translateY(8%);
        opacity: 1;
    }

    16.6% {
        transform: translateY(-4%);
    }

    17.2% {
        transform: translateY(4%);
    }

    17.8% {
        transform: translateY(-2%);
    }

    18% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole27 {
    0% {
        opacity: 0;
    }

    14% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    16% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    16.6% {
        -webkit-transform: translateY(-4%);
    }

    17.2% {
        -webkit-transform: translateY(4%);
    }

    17.8% {
        -webkit-transform: translateY(-2%);
    }

    18% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

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

    16% {
        transform: translateY(-100%);
        opacity: 0;
    }

    18% {
        transform: translateY(8%);
        opacity: 1;
    }

    18.6% {
        transform: translateY(-4%);
    }

    19.2% {
        transform: translateY(4%);
    }

    19.8% {
        transform: translateY(-2%);
    }

    20% {
        transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}

@-webkit-keyframes sceneRole28 {
    0% {
        opacity: 0;
    }

    16% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    18% {
        -webkit-transform: translateY(8%);
        opacity: 1;
    }

    18.6% {
        -webkit-transform: translateY(-4%);
    }

    19.2% {
        -webkit-transform: translateY(4%);
    }

    19.8% {
        -webkit-transform: translateY(-2%);
    }

    20% {
        -webkit-transform: translateY(0%);
    }

    100% {
        zoom: 1;
        opacity: 1;
    }
}
/*------------  高中職國中小頁動畫設定 end  ------------*/


/*---------------  動畫優先順序與時間設定 end  ---------------*/

header {
    width: 100%;
    /* margin-top: 28px; */
}

#headerIndex {
    position: relative;
    height: 440px;
    background-color: #f6faff;
    background: url(../img/headerIndex.jpg) top center no-repeat;
    background-size: cover;
}

#headerImg01 {
    position: relative;
    height: 440px;
    background-color: #f6faff;
    background: url(../img/headerImg01.jpg) top center no-repeat;
    background-size: cover;
}

#headerImg02 {
    position: relative;
    height: 440px;
    background-color: #f6faff;
    background: url(../img/headerImg02.jpg) top center no-repeat;
    background-size: cover;
}

#headerImg03 {
    position: relative;
    height: 400px;
    background-color: #f6faff;
    background: url(../img/headerImg03.jpg) top center no-repeat;
    background-size: cover;
}

#headerImg04 {
    position: relative;
    height: 440px;
    background-color: #f6faff;
    background: url(../img/headerImg04.jpg) top center no-repeat;
    background-size: cover;
}

#headerImg05 {
    position: relative;
    height: 440px;
    background-color: #f6faff;
    background: url(../img/headerImg05.jpg) top center no-repeat;
    background-size: cover;
}

header img {
    max-width: 100%;
    height: auto;
}

#xsHeader {
    display: none;
    position: relative;
    width: 100%;
    top: 60px;
    text-align: center;
}

    #xsHeader img {
        width: 100%;
        height: auto;
    }

#educationalWorkIcon {
    position: absolute;
    width: 420px;
    left: -2%;
    bottom: 0;
    z-index: 10;
}

#headSlogan {
    position: absolute;
    width: 390px;
    left: 17.2%;
    top: 125px;
    z-index: 10;
    animation: components01 25s ease;
    -webkit-animation: components01 25s ease;
    visibility: visible !important;
}

#headSlogan01 {
    position: absolute;
    width: 415px;
    left: 17.2%;
    top: 65px;
    z-index: 10;
    animation: sceneRole11 25s ease;
    -webkit-animation: sceneRole11 25s ease;
    visibility: visible !important;
}

#headSlogan02 {
    position: absolute;
    width: 390px;
    left: 15%;
    top: 65px;
    z-index: 10;
    animation: sceneRole11 25s ease;
    -webkit-animation: sceneRole11 25s ease;
    visibility: visible !important;
}

#headSlogan03 {
    position: absolute;
    width: 420px;
    left: 18%;
    top: 65px;
    z-index: 10;
    animation: sceneRole11 25s ease;
    -webkit-animation: sceneRole11 25s ease;
    visibility: visible !important;
}

#headSlogan04 {
    position: absolute;
    width: 290px;
    left: 20%;
    top: 70px;
    z-index: 10;
    animation: sceneRole11 25s ease;
    -webkit-animation: sceneRole11 25s ease;
    visibility: visible !important;
}

#headSlogan05 {
    position: absolute;
    width: 502px;
    left: 15.1%;
    top: 72px;
    z-index: 10;
    animation: sceneRole11 25s ease;
    -webkit-animation: sceneRole11 25s ease;
    visibility: visible !important;
}

.typeEducation01 {
    position: absolute;
    width: 138px;
    left: 31.35%;
    bottom: 20px;
    z-index: 10;
    animation: components02 25s ease;
    -webkit-animation: components02 25s ease;
    visibility: visible !important;
}

.typeEducation02 {
    position: absolute;
    width: 138px;
    left: 42.29%;
    bottom: 100px;
    z-index: 10;
    animation: components03 25s ease;
    -webkit-animation: components03 25s ease;
    visibility: visible !important;
}

.typeEducation03 {
    position: absolute;
    width: 138px;
    left: 53.27%;
    top: 108px;
    z-index: 10;
    animation: components04 25s ease;
    -webkit-animation: components04 25s ease;
    visibility: visible !important;
}

.typeEducation04 {
    position: absolute;
    width: 138px;
    right: 24.9%;
    top: 105px;
    z-index: 10;
    animation: components05 25s ease;
    -webkit-animation: components05 25s ease;
    visibility: visible !important;
}

.typeEducation05 {
    position: absolute;
    width: 156px;
    right: 12.92%;
    bottom: 100px;
    z-index: 10;
    animation: components06 25s ease;
    -webkit-animation: components06 25s ease;
    visibility: visible !important;
}

.typeEducation06 {
    position: absolute;
    width: 145px;
    right: 1.46%;
    bottom: 20px;
    z-index: 10;
    animation: components07 25s ease;
    -webkit-animation: components07 25s ease;
    visibility: visible !important;
}

.headerRole011 {
    display: block;
    position: absolute;
    width: 380px;
    left: 28%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole12 25s ease;
    -webkit-animation: sceneRole12 25s ease;
    visibility: visible !important;
}

.headerRole012 {
    display: block;
    position: absolute;
    width: 328px;
    right: 16%;
    bottom: 22px;
    z-index: 10;
    animation: sceneRole13 25s ease;
    -webkit-animation: sceneRole13 25s ease;
    visibility: visible !important;
}

.headerRole013 {
    display: block;
    position: absolute;
    width: 132px;
    right: 2%;
    bottom: 0;
    z-index: 10;
}

.headerRole021 {
    display: block;
    position: absolute;
    width: 387px;
    left: 44%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole22 25s ease;
    -webkit-animation: sceneRole22 25s ease;
    visibility: visible !important;
}

.headerRole022 {
    display: block;
    position: absolute;
    width: 242px;
    right: 12%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole023 {
    display: block;
    position: absolute;
    width: 205px;
    right: 6%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole024 {
    display: block;
    position: absolute;
    width: 162px;
    right: 0;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole031 {
    display: block;
    position: absolute;
    width: 323px;
    left: 31%;
    bottom: 16px;
    z-index: 10;
    animation: sceneRole22 25s ease;
    -webkit-animation: sceneRole22 25s ease;
    visibility: visible !important;
}

.headerRole032 {
    display: block;
    position: absolute;
    width: 482px;
    right: 12%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole033 {
    display: block;
    position: absolute;
    width: 133px;
    right: 1%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole24 25s ease;
    -webkit-animation: sceneRole24 25s ease;
    visibility: visible !important;
}

.headerRole041 {
    display: block;
    position: absolute;
    width: 159px;
    right: 34%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole22 25s ease;
    -webkit-animation: sceneRole22 25s ease;
    visibility: visible !important;
}

.headerRole042 {
    display: block;
    position: absolute;
    width: 133px;
    left: 25%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole043 {
    display: block;
    position: absolute;
    width: 133px;
    left: 35%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole044 {
    display: block;
    position: absolute;
    width: 133px;
    left: 45%;
    bottom: 6px;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole045 {
    display: block;
    position: absolute;
    width: 155px;
    right: 19.5%;
    bottom: 6px;
    z-index: 10;
    animation: sceneRole24 25s ease;
    -webkit-animation: sceneRole24 25s ease;
    visibility: visible !important;
}

.headerRole046 {
    display: block;
    position: absolute;
    width: 148px;
    right: 10.75%;
    bottom: 3px;
    z-index: 10;
    animation: sceneRole24 25s ease;
    -webkit-animation: sceneRole24 25s ease;
    visibility: visible !important;
}

.headerRole047 {
    display: block;
    position: absolute;
    width: 133px;
    right: 0.5%;
    bottom: 2px;
    z-index: 10;
    animation: sceneRole24 25s ease;
    -webkit-animation: sceneRole24 25s ease;
    visibility: visible !important;
}

.headerRole051 {
    display: block;
    position: absolute;
    width: 157px;
    right: 33%;
    bottom: 50px;
    z-index: 10;
    animation: sceneRole22 25s ease;
    -webkit-animation: sceneRole22 25s ease;
    visibility: visible !important;
}

.headerRole052 {
    display: block;
    position: absolute;
    width: 157px;
    left: 26%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole053 {
    display: block;
    position: absolute;
    width: 180px;
    left: 37%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole054 {
    display: block;
    position: absolute;
    width: 157px;
    right: 40%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole23 25s ease;
    -webkit-animation: sceneRole23 25s ease;
    visibility: visible !important;
}

.headerRole055 {
    display: block;
    position: absolute;
    width: 486px;
    right: 1%;
    bottom: 0;
    z-index: 10;
    animation: sceneRole24 25s ease;
    -webkit-animation: sceneRole24 25s ease;
    visibility: visible !important;
}
/*----------------------  頁首設定 end  ----------------------*/



/*----------------------  20200512新增 會員設定  ----------------------*/
/*
.xs-member-block {
	display: none;
}
*/
.member-block {
    max-width: 1200px;
    margin: 0 auto;
}

    .member-block ul {
        display: flex;
        float: right;
    }

        .member-block ul li {
            margin: 10px 0;
            padding: 0 10px;
            border-right: 1px dotted #868fc7;
        }

            .member-block ul li:last-child {
                border-right: 0;
                padding: 0 0 0 10px;
            }

            .member-block ul li a {
                color: #577ac1;
                text-decoration: none;
                transition: .5s;
            }

                .member-block ul li a:hover {
                    color: #7a57c1;
                }

/*----------------------  20200512新增 會員設定 end  ----------------------*/






/*----------------------  工作、學校補教搜尋設定  ----------------------*/
#bkSearchBar {
    width: 100%;
    padding: 20px 0;
    background: url(../img/bkSearch.gif) repeat top left;
    border-top: 1px solid #abe4e2;
    -webkit-box-shadow: 0px 3px 0px rgba(24,27,27,.2);
    -moz-box-shadow: 0px 3px 0px rgba(24,27,27,.2);
    box-shadow: 0px 3px 0px rgba(24,27,27,.2);
}

.searchBarPart01a {
    float: left;
    width: 25%;
    margin-right: 1%;
    cursor: pointer;
}

.searchBarPart02a {
    float: left;
    width: 25%;
    margin-right: 1%;
}

.searchBarPart01b {
    float: left;
    width: 30%;
    margin-right: 1%;
    cursor: pointer;
}

.searchBarPart02b {
    float: left;
    width: 20%;
    margin-right: 1%;
    cursor: pointer;
}

.searchBarPart03 {
    float: left;
    margin-right: 1%;
    width: 17.5%;
}

.searchBarPart04 {
    float: left;
    margin-right: 1%;
    width: 17%;
}

.searchBarPart05 {
    float: left;
    width: 11.5%;
}

.partLine {
    float: left;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    color: #757575;
}

/*----------------------  工作、學校補教搜尋設定  ----------------------*/



/*---------------------    搜尋頁籤設定    ---------------------*/
.tabSearchBox {
    width: 1200px;
    margin: 0 auto;
    transition: all 0.4s ease;
}

    .tabSearchBox input[type="radio"] {
        display: none;
    }

.tabPosition {
    display: block;
    float: left;
    display: block;
    width: 100%;
}

.tabSearchButton {
    position: relative;
    float: left;
    display: block;
    height: 30px;
    padding: 0 10px;
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    color: #424242;
}

    .tabSearchButton:hover {
        cursor: pointer;
        color: #005d96;
    }

.tabSearchContent {
    width: 100%;
}

    .tabSearchContent > div {
        display: none;
    }

#tabSearchContent01 {
    width: 100%;
    padding: 20px 0;
}

#tabSearchContent02 {
    width: 100%;
    padding: 20px 0;
}

[type=radio]:checked + .tabSearchButton {
    cursor: default;
    font-weight: bold;
    color: #005d96;
}

.buttonPointDown {
    position: absolute;
    z-index: 30;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-color: transparent;
    visibility: hidden;
}

    .buttonPointDown:after {
        position: absolute;
        content: " ";
        top: 100%; /* At the top of the tooltip */
        left: 50%;
        margin-left: -7px;
        border-width: 7px;
        border-style: solid;
        border-color: #144e76 transparent transparent transparent;
    }

[type=radio]:checked + .tabSearchButton .buttonPointDown {
    visibility: visible;
}

#tab01:checked ~ .tabSearchContent #tabSearchContent01,
#tab02:checked ~ .tabSearchContent #tabSearchContent02 {
    display: block;
}
/*--------------------------    搜尋頁籤設定 end    --------------------------*/



/*----------------------  熱門搜尋設定  ----------------------*/
#hotSearchBox {
    width: 100%;
    margin-bottom: 15px;
}

.hotSearchTitle {
    float: left;
    height: 40px;
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 40px;
    color: #144e76;
}

.hotSearchButton {
    float: left;
}

a.hotSearchButton {
    display: block;
    height: 40px;
    padding: 0 10px;
    margin-bottom: 5px;
    margin-right: 10px;
    text-decoration: none;
    font-size: 18px;
    line-height: 38px;
    color: #2c7dc9;
    border: 1px solid #2ba1d4;
    border-radius: 7px;
    background-color: #fafafa;
    -webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    -moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    box-shadow: 1px 2px 0px rgba(51,51,51,.2);
}

    a.hotSearchButton i {
        padding-right: 3px;
        font-size: 24px;
    }

a:hover.hotSearchButton {
    text-decoration: none;
    color: #fff;
    border: 1px solid #2c7dc9;
    background-color: #2c7dc9;
}

a:active.hotSearchButton {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

span.hotSearchButton {
    display: block;
    height: 40px;
    padding: 0 10px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-size: 18px;
    line-height: 38px;
    color: #fff;
    border-radius: 7px;
    border: 1px solid #2c7dc9;
    background-color: #2c7dc9;
    -webkit-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    -moz-box-shadow: 1px 2px 0px rgba(51,51,51,.2);
    box-shadow: 1px 2px 0px rgba(51,51,51,.2);
}

/*----------------------  熱門搜尋設定 end  ----------------------*/


/*----------------------  圖片輪播設定  ----------------------*/
.owl-img-block {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding-bottom: 40px;
}

/*----------------------  圖片輪播設定 end  ----------------------*/


/*----------------------  主要內容活動列表設定  ----------------------*/
article {
    width: 100%;
    padding: 50px 0;
}

section {
    width: 1200px;
    margin: 0 auto;
}

.searchResults {
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    color: #616161;
}

.searchNo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #d66683;
}

.salaryMark {
    color: #2d6ade;
}

.searchSetBox {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: #eceff1;
}

.searchSetPart01 {
    display: inline-block;
    width: 20%;
    margin: 0 1%;
}

.searchSetPart02 {
    display: inline-block;
    width: 20%;
    margin: 0 1%;
}

.jobListRow {
    width: 100%;
    padding: 10px 10px 13px;
    border-bottom: 1px solid #cfd8dc;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}




/*----- 重要職缺設定 -----*/
/*
.jobListRow:nth-child(4) .jobListColumn11 a::before, .jobListRow:nth-child(5) .jobListColumn11 a::before {
    content: url('../img/list-icon.png');
    padding-right: 5px;
}

section .jobListRow:nth-child(4), section .jobListRow:nth-child(5) {
    background-color: #fff2f2;
    background-color: #ffe5e5;
}

section .jobListRow:nth-child(4):hover, section .jobListRow:nth-child(5):hover {
    background-color: #fffde7;
}
*/
.bg-pink .jobListColumn11 a::before {
    content: url('../img/list-icon.png');
    padding-right: 5px;
}
.bg-pink {
    background-color: #ffe5e5 !important;
}
.bg-pink:hover {
    background-color: #fffde7 !important;
}


.jobListRow:nth-child(even) {
    background-color: #fff;
}

.jobListRow:nth-child(odd) {
    background-color: #f5f8fa;
}

.jobListRow:hover {
    background-color: #fffde7;
    cursor: pointer;
}

.jobListContentPart01 {
    float: left;
    width: 350px;
    padding-right: 10px;
}

.jobListColumn11 {
    width: 100%;
    font-size: 20px;
    line-height: 26px;
    color: #3949ab;
}

    .jobListColumn11 a {
        text-decoration: none;
        color: #3949ab;
    }

        .jobListColumn11 a:hover {
            font-size: 18px;
            text-decoration: underline;
            color: #ab1587;
        }

.jobListColumn12 {
    width: 100%;
    font-size: 16px;
    line-height: 34px;
    color: #546e7a;
}

.jobListContentPart02 {
    float: left;
    width: 555px;
    padding-right: 10px;
}

.jobListColumn21 {
    width: 100%;
    font-size: 16px;
    line-height: 26px;
    color: #607d8b;
}

.jobListColumn22 {
    width: 100%;
}

.jobListContentPart03 {
    float: left;
    width: 155px;
    font-size: 16px;
    line-height: 26px;
    color: #d66683;
}

.jobListContentPart04 i {
    float: left;
    width: 20px;
    height: 60px;
    text-align: center;
    font-size: 36px;
    line-height: 60px;
    color: #78909c;
}

a.btn-Apply {
    background: #5D7AD9;
    border: none;
    color: #FFF;
}

a.btn-Apply:hover {
    background: #c05cae;
    cursor: pointer;
    text-decoration: none;
}

.firmBenefit {
    float: left;
    display: block;
    height: 30px;
    margin: 2px 4px 2px 0;
    padding: 0 10px;
    font-size: 16px;
    line-height: 28px;
    color: #546e7a;
    border-radius: 5px;
    border: 1px solid #90a4ae;
    background-color: #fafafa;
}

.firmBenefitOn {
    float: left;
    display: block;
    height: 30px;
    margin: 2px 4px 2px 0;
    padding: 0 10px;
    font-size: 16px;
    line-height: 28px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #497fec;
    background-color: #497fec;
}
/*----------------------  主要內容活動列表設定 end  ----------------------*/





/*----------------  公開招募簡章設定  ----------------*/
#bpSearchBar {
    width: 100%;
    background: url(../img/bpSearch.gif) repeat top left;
    border-top: 2px solid #b4b3df;
    -webkit-box-shadow: 0px 4px 0px #acacd9;
    -moz-box-shadow: 0px 4px 0px #acacd9;
    box-shadow: 0px 4px 0px #acacd9;
    color: #616161;
    padding: 20px 0;
}
.breadcrumb {
    width: 100%;
    /* display: inline-block; */
    margin: 10px 0 0 0;
}
.search-content .p-input {
    width: 87%;
    background: #fafaff;
    border: 2px solid #9392d3;
    border-radius: 10px;
    color: #616161;
    display: inline-block;
    font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
    font-size: 18px;
    line-height: 42px;
    margin: 20px 10px 20px 0;
    outline: none;
    padding: 0 15px;
    text-align: center;
}
.p-input:focus, .p-input:active {
    background: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-content .p-btn {
    width: 11%;
    background: #6261bb;
    border: none;
    border-radius: 10px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: "ITC Avant Garde Gothic", "微軟正黑體", Arial, sans-serif;
    font-size: 20px;
    line-height: 46px;
    outline: none;
    /* padding: 0 40px; */
    position: relative;
    top: 2px;
}
.search-content .p-btn:hover {
    background: #bc3189;
}
.p-shadow {
    box-shadow: 1px 2px 0px rgba(0, 0, 0, .2);
}

.searchSetBox-P {
    width: 100%;
    background: #EDEDED;
    padding: 10px 0;
    text-align: center;
}
.searchSetBox-P .nice-select {
    background: #f9f9ff;
    color: #737392;
}
.searchSetBox-P .nice-select::after {
    color: #737392;
}
.searchSetBox-P .selectSearchSet {
    border: 1px solid #9c9cbb;
}
/*--- 職缺列表 ---*/
.work-list-block {
    color: #616161;
    font-size: 16px;
    line-height: 30px;
}
ul.work-list {
    width: 100%;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    padding: 35px 0;
}
ul.work-list:nth-child(even) {
    background: #f3f3fb;
}
ul.work-list:hover {
    background: #fff0fb;
    cursor: pointer;
    transition: .3s;
}
ul.work-list:hover li.school-name {
    color: #bc3189;
    /* font-size: 20px; */
}
ul.work-list > li:not(:last-child),
ul.detail-item-list > li:not(:last-child) {
    border-right: 1px solid #e4e4e4;
}
ul.work-list li.school-block {
    width: 45%;
    padding-left: 20px;
}
ul.work-list li.detail-block {
    width: 40%;
}
ul.work-list li.apply-block {
    width: 15%;
    align-self: center;
    text-align: center;
}
li.school-block li.school-name {
    color: #6261bb;
    font-weight: bold;
    font-size: 18px;
}
ul.detail-item-list > li {
    padding: 0 20px;
}
li.detail-block ul.detail-item-list {
    display: flex;
}
.btn-Apply-P {
    background: #6261bb;
    border: none;
    border-radius: 5px;
    color: #FFF;
    /* line-height: 24px; */
    padding: 6px 15px;
}
.btn-Apply-P:hover {
    background: #bc3189;
    color: #FFF;
    text-decoration: none;
}

/*----------------  公開招募簡章設定 end  ----------------*/




/*----------------  頁尾設定  ----------------*/
footer {
    width: 100%;
    padding: 20px 0;
    border-top: 5px solid #c4cbd2;
    background: rgb(246,250,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(246,250,255,1) 0%, rgba(246,250,255,1) 40%, rgba(230,233,240,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(246,250,255,1) 0%,rgba(246,250,255,1) 40%,rgba(230,233,240,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(246,250,255,1) 0%,rgba(246,250,255,1) 40%,rgba(230,233,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6faff', endColorstr='#e6e9f0',GradientType=0 ); /* IE6-9 */
}

#footerMain {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.webLinkBox {
    display: inline-block;
}

    .webLinkBox a {
        float: left;
        display: block;
        padding: 0 5px;
        text-decoration: none;
        font-size: 20px;
        line-height: 32px;
        color: #4164af;
    }

        .webLinkBox a:hover {
            text-decoration: none;
            color: #d7476e;
        }

.webLinkLine {
    float: left;
    height: 32px;
    font-size: 20px;
    line-height: 32px;
    color: #90a4ae;
}

#footerMain p {
    padding-top: 10px;
    font-size: 18px;
    line-height: 30px;
    color: #6c84a2;
}
/*----------------  頁尾設定 end  ----------------*/


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






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

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

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

    /*----------- 美化的Select下拉框設定 -----------*/
    .selectOne {
        height: 46px;
        font-size: 18px;
        line-height: 42px;
    }

    .selectSearchSet {
        height: 36px;
        font-size: 18px;
        line-height: 34px;
    }

    .nice-select {
        padding-left: 5px;
        padding-right: 5px;
    }

        .nice-select .option {
            min-height: 32px;
            padding-left: 5px;
            padding-right: 5px;
        }
    /*----------- 美化的Select下拉框設定 end -----------*/

    .buttonSearch01 {
        width: 100%;
        height: 46px;
        text-align: center;
        font-size: 20px;
        line-height: 46px;
    }
    /*----------------------  共用的表單、按鈕設定 end  ----------------------*/



    /*----------------    頁次設定    ----------------*/
    .page-line span {
        margin: 5px 2px;
        padding: 5px 12px 7px;
        font-size: 20px;
        line-height: 24px;
    }

    .page-line a {
        margin: 5px 2px;
        padding: 5px 12px 7px;
        font-size: 20px;
        line-height: 24px;
    }

    .page-line .page-number {
        display: block;
        margin: 10px 0;
    }
    /*----------------    頁次設定 end    ----------------*/



    /*----------------------  導覽列設定  ----------------------*/
    nav {
        width: 100%;
        padding: 0 5px;
    }

    #navJobClass a, #navJobClass span {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 5px 5px 7px;
        font-size: 18px;
        line-height: 20px;
    }

        #navJobClass a i, #navJobClass span i {
            padding-right: 2px;
            font-size: 25px;
            vertical-align: super;
        }

    #webLogo {
        float: left;
        width: 130px;
        padding-top: 10px;
        padding-left: 0;
    }
    /*----------------------  導覽列設定 end  ----------------------*/



    /*----------------------  頁首設定  ----------------------*/
    header {
        width: 100%;
    }

    #headerIndex {
        background: url(../img/smHeaderIndex.jpg) top center no-repeat;
        background-size: cover;
    }

    #headerImg01 {
        background: url(../img/smHeaderImg01.jpg) top center no-repeat;
        background-size: cover;
    }

    #headerImg02 {
        background: url(../img/smHeaderImg02.jpg) top center no-repeat;
        background-size: cover;
    }

    #headerImg03 {
        background: url(../img/smHeaderImg03.jpg) top center no-repeat;
        background-size: cover;
    }

    #headerImg04 {
        background: url(../img/smHeaderImg04.jpg) top center no-repeat;
        background-size: cover;
    }

    #headerImg05 {
        background: url(../img/smHeaderImg05.jpg) top center no-repeat;
        background-size: cover;
    }

    #educationalWorkIcon {
        position: absolute;
        width: 280px;
        left: -20px;
        bottom: 0;
        z-index: 10;
    }

    #headSlogan {
        position: absolute;
        width: 320px;
        left: 2%;
        top: 110px;
        z-index: 10;
    }

    #headSlogan01 {
        position: absolute;
        width: 380px;
        left: 15.63%;
        top: 80px;
    }

    #headSlogan02 {
        position: absolute;
        width: 372px;
        left: 1%;
        top: 65px;
    }

    #headSlogan03 {
        position: absolute;
        width: 394px;
        left: 3%;
        top: 65px;
    }

    #headSlogan04 {
        position: absolute;
        width: 276px;
        left: 3%;
        top: 70px;
    }

    #headSlogan05 {
        position: absolute;
        width: 450px;
        left: 1%;
        top: 68px;
    }

    .typeEducation01 {
        position: absolute;
        width: 105px;
        left: 30%;
        bottom: 5px;
        z-index: 10;
    }

    .typeEducation02 {
        position: absolute;
        width: 105px;
        left: 39%;
        bottom: 117px;
        z-index: 10;
    }

    .typeEducation03 {
        position: absolute;
        width: 105px;
        left: 47.5%;
        top: 98px;
        z-index: 10;
    }

    .typeEducation04 {
        position: absolute;
        width: 105px;
        right: 24.5%;
        top: 96px;
        z-index: 10;
    }

    .typeEducation05 {
        position: absolute;
        width: 120px;
        right: 12.5%;
        bottom: 117px;
        z-index: 10;
    }

    .typeEducation06 {
        position: absolute;
        width: 111px;
        right: 5px;
        bottom: 5px;
        z-index: 10;
    }

    .headerRole011 {
        left: 48%;
    }

    .headerRole012, .headerRole013 {
        display: none;
    }

    .headerRole021 {
        left: 48%;
    }

    .headerRole022, .headerRole023,
    .headerRole024 {
        display: none;
    }

    .headerRole031 {
        left: 41%;
    }

    .headerRole032 {
        display: none;
    }

    .headerRole033 {
        right: 1%;
    }

    .headerRole041 {
        width: 140px;
        right: 26%;
    }

    .headerRole042 {
        width: 120px;
        left: 35%;
    }

    .headerRole047 {
        width: 120px;
        right: 1%;
        animation: sceneRole24 25s ease infinite;
        -webkit-animation: sceneRole24 25s ease infinite;
        visibility: visible !important;
    }

    .headerRole043, .headerRole044,
    .headerRole045, .headerRole046 {
        display: none;
    }

    .headerRole051 {
        right: 1%;
    }

    .headerRole052 {
        left: 34%;
    }

    .headerRole053 {
        left: 50%;
    }

    .headerRole054 {
        right: 6%;
    }

    .headerRole055 {
        display: none;
    }
    /*----------------------  頁首設定 end  ----------------------*/




    /*----------------------  工作、學校補教搜尋設定  ----------------------*/
    .searchBarPart01a {
        float: left;
        width: 22%;
    }

    .searchBarPart02a {
        float: left;
        width: 22%;
    }

    .searchBarPart01b {
        float: left;
        width: 24%;
    }

    .searchBarPart02b {
        float: left;
        width: 20%;
    }

    .searchBarPart03 {
        float: left;
        width: 20%;
    }

    .searchBarPart04 {
        float: left;
        width: 20%;
    }

    .searchBarPart05 {
        float: left;
        width: 12%;
    }
    /*----------------------  工作、學校補教搜尋設定  ----------------------*/




    /*---------------------    搜尋頁籤設定    ---------------------*/
    .tabSearchBox {
        width: 100%;
        padding: 0 0.5%;
    }
    /*--------------------------    搜尋頁籤設定 end    --------------------------*/



    /*----------------------  熱門搜尋設定  ----------------------*/
    .hotSearchTitle {
        margin-bottom: 7px;
    }

    a.hotSearchButton {
        padding: 0 9px;
        margin-bottom: 7px;
        margin-right: 7px;
    }

    span.hotSearchButton {
        padding: 0 9px;
        margin-bottom: 7px;
        margin-right: 7px;
    }
    /*----------------------  熱門搜尋設定 end  ----------------------*/



    /*----------------------  主要內容活動列表設定  ----------------------*/
    section {
        width: 100%;
        padding: 0 0.5%;
    }

    .searchSetPart01 {
        width: 30%;
    }

    .searchSetPart02 {
        width: 30%;
    }

    .jobListRow {
        width: 100%;
        padding: 10px 1% 13px;
    }

    .jobListContentPart01 {
        width: 31%;
        padding-right: 0.5%;
    }

    .jobListContentPart02 {
        width: 48%;
        padding-right: 0.5%;
    }

    .jobListContentPart03 {
        width: 17%;
    }

    .jobListContentPart04 i {
        width: 3%;
    }
    /*----------------------  主要內容活動列表設定 end  ----------------------*/

    

    /*----------------  公開招募設定  ----------------*/
    ul.work-list li.school-block {
        width: 55%;
    }
    ul.work-list li.detail-block {
        width: 30%;
    }
    li.detail-block ul.detail-item-list {
        flex-wrap: wrap;
    }
    ul.detail-item-list li.detail-item-exp {
        border-right: none;
    }
    /*----------------  公開招募設定 end  ----------------*/



    /*----------------  頁尾設定  ----------------*/
    #footerMain {
        width: 100%;
        padding: 0 0.5%;
    }

    .webLinkBox a {
        float: left;
        display: block;
        padding: 0;
    }

    .webLinkLine {
        float: left;
        height: 32px;
        font-size: 20px;
        line-height: 32px;
        color: #90a4ae;
    }

    /*----------------  頁尾設定 end  ----------------*/

}

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








/*================================================================ 手機版型區 ================================================================*/
@media screen and (max-width: 767px) {
    a.btn-Apply {
        text-align: center;
    }

    .goTop {
        position: fixed;
        width: 55px;
        right: 5px;
        bottom: 30px;
    }

    #bar-black {
        display: none;
    }


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


    /*----------- 美化的Select下拉框設定 -----------*/
    .selectOne {
        border-radius: 5px;
    }

    .selectRegisterPart01 {
        margin-left: 0;
        border-radius: 0 5px 5px 0;
        border-left: none;
    }

    .selectRegisterPart02 {
        border-radius: 0 5px 5px 0;
    }

    .selectRegisterPart01:hover {
        border-left: none;
    }

    .selectRegisterPart01:focus, .selectRegisterPart01:active {
        border-left: none;
    }

    .nice-select {
        height: 45px;
        padding-left: 5px;
        padding-right: 0;
        line-height: 43px;
    }

        .nice-select:after {
            width: 20px;
            height: 43px;
            margin-top: -21.5px;
            right: 5px;
            top: 50%;
        }

        .nice-select .option {
            min-height: 45px;
            padding-left: 5px;
            padding-right: 0;
            line-height: 43px;
        }
    /*----------- 美化的Select下拉框設定 end -----------*/



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


    /*----------------    頁次設定    ----------------*/
    .page-line span {
        margin: 5px 2px;
        padding: 5px 12px 7px;
        font-size: 20px;
        line-height: 24px;
    }

    .page-line a {
        margin: 5px 2px;
        padding: 5px 12px 7px;
        font-size: 20px;
        line-height: 24px;
    }

    .page-line .page-number {
        display: block;
        margin: 10px 0;
    }
    /*----------------    頁次設定 end    ----------------*/



    /*----------------------  導覽列設定  ----------------------*/
    #top-menu {
        display: block;
    }

        #top-menu #btn {
            display: block;
        }
    /*
.xs-member-block {
	display: block;
	position: relative;
	top: 60px;
}
.xs-member-block ul {
	display: flex;
}
.xs-member-block ul li {
	width: 25%;
	border-right: 1px dotted #868fc7;
	text-align: center;
}
.xs-member-block ul li:last-child {
	border-right: 0;
}
.xs-member-block ul li a {
	background: #f6faff;
	color: #577ac1;
	display: block;
	font-size: 20px;
	padding: 20px 0;
	text-decoration: none;
	transition: 0.3s ease;
}
.xs-member-block ul li a:hover {
	background: #868fc7;
	color: #FFF;
}
*/
    nav {
        display: none;
    }

    #top-menu #xsSystemLogo {
        display: block;
    }

    #xsWebLogo {
        display: block;
    }

    #webLogo {
        display: none;
    }

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


    /*----------------------  頁首設定  ----------------------*/
    header {
        display: none;
    }

    #xsHeader {
        display: block;
    }
    /*----------------------  頁首設定  ----------------------*/



    /*----------------------  工作、學校補教搜尋設定  ----------------------*/
    #bkSearchBar {
        width: 100%;
        margin-top: 60px;
        padding: 20px 2%;
    }

    .searchBarPart01a {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    .searchBarPart02a {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    .searchBarPart01b {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    .searchBarPart02b {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    .searchBarPart03 {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    .searchBarPart04 {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    .searchBarPart05 {
        float: none;
        width: 100%;
        padding: 10px 5% 0;
    }

    .partLine {
        float: left;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        color: #757575;
    }

    /*----------------------  工作、學校補教搜尋設定  ----------------------*/



    /*---------------------    搜尋頁籤設定    ---------------------*/
    .tabSearchBox {
        width: 100%;
    }

    .tabSearchButton {
        float: left;
        display: block;
        height: 30px;
        padding: 0 5px;
    }
    /*--------------------------    搜尋頁籤設定 end    --------------------------*/



    /*----------------------  熱門搜尋設定  ----------------------*/
    #hotSearchBox {
        width: 100%;
        margin-bottom: 15px;
    }

    .hotSearchTitle {
        height: 46px;
        margin-bottom: 7px;
        font-size: 18px;
        line-height: 46px;
    }

    a.hotSearchButton {
        height: 46px;
        padding: 0 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        text-decoration: none;
        font-size: 18px;
        line-height: 44px;
    }

        a.hotSearchButton i {
            padding-right: 3px;
            font-size: 24px;
        }

    span.hotSearchButton {
        height: 46px;
        padding: 0 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        font-size: 18px;
        line-height: 44px;
    }

    /*----------------------  熱門搜尋設定 end  ----------------------*/


    /*----------------------  主要內容活動列表設定  ----------------------*/
    article {
        width: 100%;
        padding: 50px 0;
    }

    section {
        width: 100%;
        padding: 0 2%;
    }

    .searchSetBox {
        width: 100%;
        padding: 10px 0;
    }

    .searchSetPart01 {
        width: 48%;
        margin: 0;
    }

    .searchSetPart02 {
        width: 48%;
        margin: 0;
    }

    .jobListRow {
        width: 100%;
        padding: 10px 10px 13px;
    }

    .jobListContentPart01 {
        float: none;
        width: 100%;
        padding-right: 0;
        padding-bottom: 5px;
    }

    .jobListContentPart02 {
        float: none;
        width: 100%;
        padding-right: 0;
        padding-bottom: 10px;
    }

    .jobListContentPart03 {
        float: none;
        width: 100%;
    }

    .jobListContentPart04 i {
        display: none;
    }

    .btn-Apply {
        width: 100%;
        margin: 10px 0;
    }

    .firmBenefit {
        margin: 4px 4px 2px 0;
        padding: 0 10px;
    }

    .firmBenefitOn {
        margin: 4px 4px 2px 0;
        padding: 0 10px;
    }
    /*----------------------  主要內容活動列表設定 end  ----------------------*/


    /*----------------  公開招募簡章設定  ----------------*/
    #bpSearchBar {
        margin-top: 60px;
        padding: 20px;
    }
    .search-content .p-input {
        width: 100%;
        margin: 20px 0 5px 0;
    }
    .search-content .p-btn {
        width: 100%;
        margin: 5px 0 20px 0;
    }
    ul.work-list {
        display: block;
    }
    ul.work-list > li:not(:last-child) {
        border: none;
    }
    ul.work-list li.school-block {
        width: 100%;
        margin: 0 0 10px 0;
        padding-left: 10px;
    }
    ul.work-list li.detail-block {
        width: 100%;
    }
    li.detail-block ul.detail-item-list {
        flex-wrap: wrap;
    }
    ul.detail-item-list > li {
        padding: 0 10px;
    }
    ul.work-list li.apply-block {
        width: 96%;
        background: #6261bb;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .btn-Apply-P {
         display: block;
        padding: 0;
    }
    /*----------------  公開招募簡章設定 end  ----------------*/




    /*----------------  頁尾設定  ----------------*/
    footer {
        width: 100%;
        padding: 20px 2%;
    }

    #footerMain {
        width: 100%;
    }

    .webLinkBox a {
        padding: 0;
    }

    .webLinkLine {
        font-size: 18px;
    }

    #footerMain p {
        padding-top: 10px;
        font-size: 18px;
        line-height: 30px;
        color: #6c84a2;
    }
    /*----------------  頁尾設定 end  ----------------*/

}
.member-block a {
    background-color: #fff;
}
/*================================================================ 手�