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


/*----------------------------------------------------------------------------------------
                                    POSITION
-----------------------------------------------------------------------------------------*/

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-inherit {
    position: inherit !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

@media (max-width: 575px) {
    .zeroing-sm {
        position: relative !important;
        width: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .zeroing-md {
        position: relative !important;
        width: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

.t-0 {
    top: 0;
}

.t-25 {
    top: 25%;
}

.t-50 {
    top: 50%;
}

.t-75 {
    top: 75%;
}

.t-100 {
    top: 100%;
}

.r-0 {
    right: 0;
}

.r-25 {
    right: 25%;
}

.r-50 {
    right: 50%;
}

.r-75 {
    right: 75%;
}

.r-100 {
    right: 100%;
}

.b-0 {
    bottom: 0;
}

.b-25 {
    bottom: 25%;
}

.b-50 {
    bottom: 50%;
}

.b-75 {
    bottom: 75%;
}

.b-100 {
    bottom: 100%;
}

.l-0 {
    left: 0;
}

.l-25 {
    left: 25%;
}

.l-50 {
    left: 50%;
}

.l-75 {
    left: 75%;
}

.l-100 {
    left: 100%;
}

.centered {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.overall {
    position: relative;
    z-index: 10;
}

.underall {
    position: relative;
    z-index: -10;
}

.absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.absolute-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.fixed-left,
.fixed-right,
.fixed-center {
    position: fixed;
    z-index: 1030;
    top: 0;
    bottom: 0;
}

.fixed-right {
    right: 0;
}

.fixed-left {
    left: 0;
}

.fixed-center {
    right: 0;
    left: 0;
}

.fixed-top,
.show-on-scroll,
.hide-on-scroll {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-top {
        /*position: -webkit-sticky;*/
        /*position: sticky;*/
        top: 0;
        z-index: 1020;
    }
}

.show-on-scroll {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
}

.show-on-scroll.show {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.hide-on-scroll {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.hide-on-scroll.hide {
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
}


/*----------------------------------------------------------------------------------------
                                    SECTION BACKGROUND
-----------------------------------------------------------------------------------------*/
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
section, header, footer { position: relative; z-index: 1; }
.bg-wrap, .bg, .nav-bg { position: absolute; overflow: hidden; z-index: -2; top: 0; bottom: 0; left: 0; right: 0; }
.bg-box { z-index: -1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.bg-box::before { display: block; content: ""; }
.bg-box.col-1, .bg-box.col-2, .bg-box.col-3, .bg-box.col-4, .bg-box.col-5, .bg-box.col-6, .bg-box.col-7, .bg-box.col-8, .bg-box.col-9, .bg-box.col-10, .bg-box.col-11, .bg-box.col-12 { position: absolute; top: 0; right: auto; bottom: 0; left: 0; }
.bg-box.col-1:last-child, .bg-box.col-2:last-child, .bg-box.col-3:last-child, .bg-box.col-4:last-child, .bg-box.col-5:last-child, .bg-box.col-6:last-child, .bg-box.col-7:last-child, .bg-box.col-8:last-child, .bg-box.col-9:last-child, .bg-box.col-10:last-child, .bg-box.col-11:last-child, .bg-box.col-12:last-child { right: 0; left: auto; }

@media (min-width: 576px) {
.bg-box[class*="col-sm-"] { position: absolute; top: 0; bottom: 0; left: auto; right: auto; }
.bg-box[class*="col-sm-"]:first-child { left: 0; }
.bg-box[class*="col-sm-"]:last-child { right: 0; }
}

@media (min-width: 768px) {
.bg-box[class*="col-md-"] { position: absolute; top: 0; bottom: 0; left: auto; right: auto; }
.bg-box[class*="col-md-"]:first-child { left: 0; }
.bg-box[class*="col-md-"]:last-child { right: 0; }
}

@media (min-width: 992px) {
.bg-box[class*="col-lg-"] { position: absolute; top: 0; bottom: 0; left: auto; right: auto; }
.bg-box[class*="col-lg-"]:first-child { left: 0; }
.bg-box[class*="col-lg-"]:last-child { right: 0; }
}

@media (min-width: 1200px) {
.bg-box[class*="col-xl-"] { position: absolute; top: 0; bottom: 0; left: auto; right: auto; }
.bg-box[class*="col-xl-"]:first-child { left: 0; }
.bg-box[class*="col-xl-"]:last-child { right: 0; }
}
.bg.parallax[data-rellax-speed="1"], .bg.parallax[data-rellax-speed="-1"] { top: -10vh; bottom: -10vh; }
.bg.parallax[data-rellax-speed="2"], .bg.parallax[data-rellax-speed="-2"] { top: -20vh; bottom: -20vh; }
.bg.parallax[data-rellax-speed="3"], .bg.parallax[data-rellax-speed="-3"] { top: -30vh; bottom: -30vh; }
.bg.parallax[data-rellax-speed="4"], .bg.parallax[data-rellax-speed="-4"] { top: -40vh; bottom: -40vh; }
.bg.parallax[data-rellax-speed="5"], .bg.parallax[data-rellax-speed="-5"] { top: -50vh; bottom: -50vh; }
.bg.parallax video { width: auto !important; }
/*----------------------------------------------------------------------------------------
                        PADDING & MARGIN
-----------------------------------------------------------------------------------------*/
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-10 { padding-top: 10px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pt-50 { padding-top: 50px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pt-75 { padding-top: 75px !important; }
.pb-75 { padding-bottom: 75px !important; }
.pt-100 { padding-top: 100px !important; }
.pb-100 { padding-bottom: 100px !important; }
.pt-150 { padding-top: 150px !important; }
.pb-150 { padding-bottom: 150px !important; }
.pt-200 { padding-top: 200px !important; }
.pb-200 { padding-bottom: 200px !important; }
.pt-250 { padding-top: 250px !important; }
.pb-250 { padding-bottom: 250px !important; }
.pt-300 { padding-top: 300px !important; }
.pb-300 { padding-bottom: 300px !important; }
.pt-350 { padding-top: 350px !important; }
.pb-350 { padding-bottom: 350px !important; }
.pt-400 { padding-top: 400px !important; }
.pb-400 { padding-bottom: 400px !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mt--30 { margin-top: -30px !important; }
.mb--30 { margin-bottom: -30px !important; }
.mt-50 { margin-top: 50px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mt--50 { margin-top: -50px !important; }
.mb--50 { margin-bottom: -50px !important; }
.mt-75 { margin-top: 75px !important; }
.mb-75 { margin-bottom: 75px !important; }
.mt-100 { margin-top: 100px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mt--100 { margin-top: -100px !important; }
.mb--100 { margin-bottom: -100px !important; }
.mt-150 { margin-top: 150px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mt-200 { margin-top: 200px !important; }
.mb-200 { margin-bottom: 200px !important; }
.mt--200 { margin-top: -200px !important; }
.mb--200 { margin-bottom: -200px !important; }
.mt-250 { margin-top: 250px !important; }
.mb-250 { margin-bottom: 250px !important; }
.mt-300 { margin-top: 300px !important; }
.mb-300 { margin-bottom: 300px !important; }
.mt--300 { margin-top: -300px !important; }
.mb--300 { margin-bottom: -300px !important; }

@media (min-width: 576px) {
.pt-sm-0 { padding-top: 0 !important; }
.pb-sm-0 { padding-bottom: 0 !important; }
.pt-sm-10 { padding-top: 10px !important; }
.pb-sm-10 { padding-bottom: 10px !important; }
.pt-sm-20 { padding-top: 20px !important; }
.pb-sm-20 { padding-bottom: 20px !important; }
.pt-sm-30 { padding-top: 30px !important; }
.pb-sm-30 { padding-bottom: 30px !important; }
.pt-sm-50 { padding-top: 50px !important; }
.pb-sm-50 { padding-bottom: 50px !important; }
.pt-sm-75 { padding-top: 75px !important; }
.pb-sm-75 { padding-bottom: 75px !important; }
.pt-sm-100 { padding-top: 100px !important; }
.pb-sm-100 { padding-bottom: 100px !important; }
.pt-sm-150 { padding-top: 150px !important; }
.pb-sm-150 { padding-bottom: 150px !important; }
.pt-sm-200 { padding-top: 200px !important; }
.pb-sm-200 { padding-bottom: 200px !important; }
.pt-sm-250 { padding-top: 250px !important; }
.pb-sm-250 { padding-bottom: 250px !important; }
.pt-sm-300 { padding-top: 300px !important; }
.pb-sm-300 { padding-bottom: 300px !important; }
.pt-sm-350 { padding-top: 350px !important; }
.pb-sm-350 { padding-bottom: 350px !important; }
.pt-sm-400 { padding-top: 400px !important; }
.pb-sm-400 { padding-bottom: 400px !important; }
.mt-sm-auto { margin-top: auto !important; }
.mb-sm-auto { margin-bottom: auto !important; }
.mt-sm-0 { margin-top: 0px !important; }
.mb-sm-0 { margin-bottom: 0px !important; }
.mt-sm-10 { margin-top: 10px !important; }
.mb-sm-10 { margin-bottom: 10px !important; }
.mt-sm-20 { margin-top: 20px !important; }
.mb-sm-20 { margin-bottom: 20px !important; }
.mt-sm-30 { margin-top: 30px !important; }
.mb-sm-30 { margin-bottom: 30px !important; }
.mt-sm--30 { margin-top: -30px !important; }
.mb-sm--30 { margin-bottom: -30px !important; }
.mt-sm-50 { margin-top: 50px !important; }
.mb-sm-50 { margin-bottom: 50px !important; }
.mt-sm--50 { margin-top: 50px !important; }
.mb-sm--50 { margin-bottom: -50px !important; }
.mt-sm-75 { margin-top: 75px !important; }
.mb-sm-75 { margin-bottom: 75px !important; }
.mt-sm-100 { margin-top: 100px !important; }
.mb-sm-100 { margin-bottom: 100px !important; }
.mt-sm--100 { margin-top: -100px !important; }
.mb-sm--100 { margin-bottom: -100px !important; }
.mt-sm-150 { margin-top: 150px !important; }
.mb-sm-150 { margin-bottom: 150px !important; }
.mt-sm-200 { margin-top: 200px !important; }
.mb-sm-200 { margin-bottom: 200px !important; }
.mt-sm--200 { margin-top: -200px !important; }
.mb-sm--200 { margin-bottom: -200px !important; }
.mt-sm-250 { margin-top: 250px !important; }
.mb-sm-250 { margin-bottom: 250px !important; }
.mt-sm-300 { margin-top: 300px !important; }
.mb-sm-300 { margin-bottom: 300px !important; }
.mt-sm--300 { margin-top: -300px !important; }
.mb-sm--300 { margin-bottom: -300px !important; }
}

@media (min-width: 768px) {
.pt-md-0 { padding-top: 0 !important; }
.pb-md-0 { padding-bottom: 0 !important; }
.pt-md-10 { padding-top: 10px !important; }
.pb-md-10 { padding-bottom: 10px !important; }
.pt-md-20 { padding-top: 20px !important; }
.pb-md-20 { padding-bottom: 20px !important; }
.pt-md-30 { padding-top: 30px !important; }
.pb-md-30 { padding-bottom: 30px !important; }
.pt-md-50 { padding-top: 50px !important; }
.pb-md-50 { padding-bottom: 50px !important; }
.pt-md-75 { padding-top: 75px !important; }
.pb-md-75 { padding-bottom: 75px !important; }
.pt-md-100 { padding-top: 100px !important; }
.pb-md-100 { padding-bottom: 100px !important; }
.pt-md-150 { padding-top: 150px !important; }
.pb-md-150 { padding-bottom: 150px !important; }
.pt-md-200 { padding-top: 200px !important; }
.pb-md-200 { padding-bottom: 200px !important; }
.pt-md-250 { padding-top: 250px !important; }
.pb-md-250 { padding-bottom: 250px !important; }
.pt-md-300 { padding-top: 300px !important; }
.pb-md-300 { padding-bottom: 300px !important; }
.pt-md-350 { padding-top: 350px !important; }
.pb-md-350 { padding-bottom: 350px !important; }
.pt-md-400 { padding-top: 400px !important; }
.pb-md-400 { padding-bottom: 400px !important; }
.mt-md-auto { margin-top: auto !important; }
.mb-md-auto { margin-bottom: auto !important; }
.mt-md-0 { margin-top: 0 !important; }
.mb-md-0 { margin-bottom: 0 !important; }
.mt-md-10 { margin-top: 10px !important; }
.mb-md-10 { margin-bottom: 10px !important; }
.mt-md-20 { margin-top: 20px !important; }
.mb-md-20 { margin-bottom: 20px !important; }
.mt-md-30 { margin-top: 30px !important; }
.mb-md-30 { margin-bottom: 30px !important; }
.mt-md--30 { margin-top: -30px !important; }
.mb-md--30 { margin-bottom: -30px !important; }
.mt-md-50 { margin-top: 50px !important; }
.mb-md-50 { margin-bottom: 50px !important; }
.mt-md--50 { margin-top: -50px !important; }
.mb-md--50 { margin-bottom: -50px !important; }
.mt-md-75 { margin-top: 75px !important; }
.mb-md-75 { margin-bottom: 75px !important; }
.mt-md-100 { margin-top: 100px !important; }
.mb-md-100 { margin-bottom: 100px !important; }
.mt-md--100 { margin-top: -100px !important; }
.mb-md--100 { margin-bottom: -100px !important; }
.mt-md-150 { margin-top: 150px !important; }
.mb-md-150 { margin-bottom: 150px !important; }
.mt-md-200 { margin-top: 200px !important; }
.mb-md-200 { margin-bottom: 200px !important; }
.mt-md--200 { margin-top: -200px !important; }
.mb-md--200 { margin-bottom: -200px !important; }
.mt-md-250 { margin-top: 250px !important; }
.mb-md-250 { margin-bottom: 250px !important; }
.mt-md-300 { margin-top: 300px !important; }
.mb-md-300 { margin-bottom: 300px !important; }
.mt-md--300 { margin-top: -300px !important; }
.mb-md--300 { margin-bottom: -300px !important; }
}

@media (min-width: 992px) {
.pt-lg-0 { padding-top: 0 !important; }
.pb-lg-0 { padding-bottom: 0 !important; }
.pt-lg-10 { padding-top: 10px !important; }
.pb-lg-10 { padding-bottom: 10px !important; }
.pt-lg-20 { padding-top: 20px !important; }
.pb-lg-20 { padding-bottom: 20px !important; }
.pt-lg-30 { padding-top: 30px !important; }
.pb-lg-30 { padding-bottom: 30px !important; }
.pt-lg-50 { padding-top: 50px !important; }
.pb-lg-50 { padding-bottom: 50px !important; }
.pt-lg-75 { padding-top: 75px !important; }
.pb-lg-75 { padding-bottom: 75px !important; }
.pt-lg-100 { padding-top: 100px !important; }
.pb-lg-100 { padding-bottom: 100px !important; }
.pt-lg-150 { padding-top: 150px !important; }
.pb-lg-150 { padding-bottom: 150px !important; }
.pt-lg-200 { padding-top: 200px !important; }
.pb-lg-200 { padding-bottom: 200px !important; }
.pt-lg-250 { padding-top: 250px !important; }
.pb-lg-250 { padding-bottom: 250px !important; }
.pt-lg-300 { padding-top: 300px !important; }
.pb-lg-300 { padding-bottom: 300px !important; }
.pt-lg-350 { padding-top: 350px !important; }
.pb-lg-350 { padding-bottom: 350px !important; }
.pt-lg-400 { padding-top: 400px !important; }
.pb-lg-400 { padding-bottom: 400px !important; }
.mt-lg-auto { margin-top: auto !important; }
.mb-lg-auto { margin-bottom: auto !important; }
.mt-lg-0 { margin-top: 0 !important; }
.mb-lg-0 { margin-bottom: 0 !important; }
.mt-lg-10 { margin-top: 10px !important; }
.mb-lg-10 { margin-bottom: 10px !important; }
.mt-lg-20 { margin-top: 20px !important; }
.mb-lg-20 { margin-bottom: 20px !important; }
.mt-lg-30 { margin-top: 30px !important; }
.mb-lg-30 { margin-bottom: 30px !important; }
.mt-lg--30 { margin-top: -30px !important; }
.mb-lg--30 { margin-bottom: -30px !important; }
.mt-lg-50 { margin-top: 50px !important; }
.mb-lg-50 { margin-bottom: 50px !important; }
.mt-lg--50 { margin-top: -50px !important; }
.mb-lg--50 { margin-bottom: -50px !important; }
.mt-lg-75 { margin-top: 75px !important; }
.mb-lg-75 { margin-bottom: 75px !important; }
.mt-lg-100 { margin-top: 100px !important; }
.mb-lg-100 { margin-bottom: 100px !important; }
.mt-lg--100 { margin-top: -100px !important; }
.mb-lg--100 { margin-bottom: -100px !important; }
.mt-lg-150 { margin-top: 150px !important; }
.mb-lg-150 { margin-bottom: 150px !important; }
.mt-lg-200 { margin-top: 200px !important; }
.mb-lg-200 { margin-bottom: 200px !important; }
.mt-lg--200 { margin-top: -200px !important; }
.mb-lg--200 { margin-bottom: -200px !important; }
.mt-lg-250 { margin-top: 250px !important; }
.mb-lg-250 { margin-bottom: 250px !important; }
.mt-lg-300 { margin-top: 300px !important; }
.mb-lg-300 { margin-bottom: 300px !important; }
.mt-lg--300 { margin-top: -300px !important; }
.mb-lg--300 { margin-bottom: -300px !important; }
}

@media (min-width: 1200px) {
.pt-xl-0 { padding-top: 0 !important; }
.pb-xl-0 { padding-bottom: 0 !important; }
.pt-xl-10 { padding-top: 10px !important; }
.pb-xl-10 { padding-bottom: 10px !important; }
.pt-xl-20 { padding-top: 20px !important; }
.pb-xl-20 { padding-bottom: 20px !important; }
.pt-xl-30 { padding-top: 30px !important; }
.pb-xl-30 { padding-bottom: 30px !important; }
.pt-xl-50 { padding-top: 50px !important; }
.pb-xl-50 { padding-bottom: 50px !important; }
.pt-xl-75 { padding-top: 75px !important; }
.pb-xl-75 { padding-bottom: 75px !important; }
.pt-xl-100 { padding-top: 100px !important; }
.pb-xl-100 { padding-bottom: 100px !important; }
.pt-xl-150 { padding-top: 150px !important; }
.pb-xl-150 { padding-bottom: 150px !important; }
.pt-xl-200 { padding-top: 200px !important; }
.pb-xl-200 { padding-bottom: 200px !important; }
.pt-xl-250 { padding-top: 250px !important; }
.pb-xl-250 { padding-bottom: 250px !important; }
.pt-xl-300 { padding-top: 300px !important; }
.pb-xl-300 { padding-bottom: 300px !important; }
.pt-xl-350 { padding-top: 350px !important; }
.pb-xl-350 { padding-bottom: 350px !important; }
.pt-xl-400 { padding-top: 400px !important; }
.pb-xl-400 { padding-bottom: 400px !important; }
.mt-xl-auto { margin-top: auto !important; }
.mb-xl-auto { margin-bottom: auto !important; }
.mt-xl-0 { margin-top: 0 !important; }
.mb-xl-0 { margin-bottom: 0 !important; }
.mt-xl-10 { margin-top: 10px !important; }
.mb-xl-10 { margin-bottom: 10px !important; }
.mt-xl-20 { margin-top: 20px !important; }
.mb-xl-20 { margin-bottom: 20px !important; }
.mt-xl-30 { margin-top: 30px !important; }
.mb-xl-30 { margin-bottom: 30px !important; }
.mt-xl--30 { margin-top: -30px !important; }
.mb-xl--30 { margin-bottom: -30px !important; }
.mt-xl-50 { margin-top: 50px !important; }
.mb-xl-50 { margin-bottom: 50px !important; }
.mt-xl--50 { margin-top: 50px !important; }
.mb-xl--50 { margin-bottom: -50px !important; }
.mt-xl-75 { margin-top: 75px !important; }
.mb-xl-75 { margin-bottom: 75px !important; }
.mt-xl-100 { margin-top: 100px !important; }
.mb-xl-100 { margin-bottom: 100px !important; }
.mt-xl--100 { margin-top: -100px !important; }
.mb-xl--100 { margin-bottom: -100px !important; }
.mt-xl-150 { margin-top: 150px !important; }
.mb-xl-150 { margin-bottom: 150px !important; }
.mt-xl-200 { margin-top: 200px !important; }
.mb-xl-200 { margin-bottom: 200px !important; }
.mt-xl--200 { margin-top: -200px !important; }
.mb-xl--200 { margin-bottom: -200px !important; }
.mt-xl-250 { margin-top: 250px !important; }
.mb-xl-250 { margin-bottom: 250px !important; }
.mt-xl-300 { margin-top: 300px !important; }
.mb-xl-300 { margin-bottom: 300px !important; }
.mt-xl--300 { margin-top: -300px !important; }
.mb-xl--300 { margin-bottom: -300px !important; }
}

/*調整手機版選單與板頭的空格*/
@media (max-width: 575px) {
.mb-100{margin-bottom: 85px !important;}
}