@charset "utf-8";
@import url(fontawesome/css/all.min.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@300;400;500;600;900&display=swap');


:root {
    --greenLight: #5e8b58;
    --greenLight2: #6da765;
    --fontColor: #6d7278;
    --yellow2: #e6bb5f;
    --yellow: #ffb300;
    --brown: #c1993c;
    --blue: #106dde;
    --orange: #e7876f;
    --green: #30a79c;
    --grey: #e9e9e9;
    --greenhigh: #40cf2d;
    --footerBg: #343434;
    --newtag2: #8bbebd;
    --newtag3: #ed9999;
    --Grey9: #9b9b9b;
    --Grey6: #666;
    --Grey3: #38393a;
    --white: #fff;
    --Black: #000;
    --Red: #f55;
}

* {
    box-sizing: border-box;
    outline: none;
}

body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', serif;
    line-height: 1.5;
    margin: 0;
    color: var(--fontColor);
}

a, a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
}

main {
    clear: both;
}

form input,
form select,
form input.form-control,
form textarea.form-control {
    background-color: var(--white);
    /* line-height: 2.5em; */
    border-radius: 4px;
    border: solid 1px #d7d7d7;
}

    form input:focus,
    form select:focus,
    form input.form-control:focus,
    form textarea.form-control:focus {
        background-color: var(--white);
        border-color: #aaa;
    }

::placeholder {
    color: var(--Grey9) !important;
    font-size: 0.88rem;
}
/* select */
.select {
    position: relative;
    min-width: 100px;
}

    .select svg {
        position: absolute;
        right: 16px;
        top: calc(50% - 2px);
        width: 10px;
        height: 10px;
        stroke-width: 1px;
        stroke: var(--greenLight);
        fill: var(--greenLight);
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
        transform: rotate(-180deg);
    }

    .select select {
        -webkit-appearance: none;
        width: 100%;
      /*  padding: 7px 40px 7px 12px;
        height: calc(1.5em + 0.75rem + 5px);
        border: 1px solid #e8eaed;
        border-radius: 4px;
        background: #fff;*/
        box-shadow: 0 1px 3px -2px #9098a9;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.88rem;
        transition: all 150ms ease;
        color: #8a8a8a;
    }

        .select select:required:invalid {
            color: #8a8a8a;
        }

        .select select option {
            color: #8a8a8a;
        }

            .select select option[value=""][disabled] {
                display: none;
            }

            .select select option:hover,
            .select select option:focus {
                box-shadow: 0 0 10px 100px var(--greenLight) inset !important;
            }

        .select select:focus {
            outline: none;
            border-color: #aaa;
        }

        .select select:hover + svg {
            /* stroke: #aaa; */
            stroke: var(--green);
            fill: var(--green);
        }

.sprites {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}

form .input_group {
    display: flex;
    margin-bottom: 15px;
}

    form .input_group > label {
        width: 100px;
        text-align: left;
        padding-top: 5px;
    }

    form .input_group > textarea {
        background-color: var(--footerBg);
        line-height: 2.5em;
        border: 0;
        resize: none;
    }

    form .input_group > input,
    form .input_group > textarea,
    form .input_group .code_box {
        width: 100%;
        text-align: left;
    }

a {
    color: var(--fontColor);
}

    a, a:focus, a:hover {
        text-decoration: none;
    }

        a:hover {
            color: var(--greenLight);
            transition: 0.3s linear;
        }

/*        a:focus,
        *:focus {
            outline: none !important;
            box-shadow: none !important;
        }
*/
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.colorgreenLight {
    color: var(--greenLight);
}

.colorgreenLightBg {
    background-color: var(--greenLight);
}

.colorgreenLight2 {
    color: var(--greenLight2);
}

.colorfontColor {
    color: var(--fontColor);
}

.colorfontColorBg {
    background-color: var(--fontColor);
}

.coloryellow {
    color: var(--yellow);
}

.coloryellow2 {
    color: var(--yellow2);
}

.colorbrown {
    color: var(--brown);
}

.colorblue {
    color: var(--blue);
}

.colororange {
    color: var(--orange);
}

.colorgreen {
    color: var(--green);
}

.colorgrey {
    color: var(--grey);
}

.colorfooterBg {
    color: var(--footerBg);
}

.colorGrey3 {
    color: var(--Grey3);
}

.colorGrey6 {
    color: var(--Grey6);
}

.colorGrey9 {
    color: var(--Grey9);
}

.colorBlack {
    color: var(--Black);
}

.colorWhite {
    color: var(--white);
}

.colorRed {
    color: var(--Red);
}

.colorRedBg {
    background-color: var(--Red);
}

.fontSerifTC {
    font-family: 'Noto Serif TC', serif;
}

.f11 {
    font-size: 0.69rem;
}

.f12 {
    font-size: 0.75rem;
}

.f13 {
    font-size: 0.81rem;
}

.f14 {
    font-size: 0.88rem;
}

.f15 {
    font-size: 0.94rem;
}

.f16 {
    font-size: 1rem;
}

.f17 {
    font-size: 1.06rem;
}

.f18 {
    font-size: 1.13rem;
}

.f19 {
    font-size: 1.19rem;
}

.f20 {
    font-size: 1.25rem;
}

.f21 {
    font-size: 1.3125rem;
}

.f22 {
    font-size: 1.38rem;
}

.f24 {
    font-size: 1.5rem;
}

.f26 {
    font-size: 1.63rem;
}

.f28 {
    font-size: 1.75rem;
}

.f30 {
    font-size: 1.88rem;
}

.f32 {
    font-size: 2rem;
}

.f36 {
    font-size: 2.26rem;
}

.f37 {
    font-size: 2.3125rem;
}

.f40 {
    font-size: 2.5rem;
}

.f47 {
    font-size: 2.9375rem;
}

.f60 {
    font-size: 3.75rem;
}

.fw100 {
    font-weight: 100;
}

.fw300 {
    font-weight: 300;
}

.fw400 {
    font-weight: 400;
}

.fw500 {
    font-weight: 500;
}

.fw600 {
    font-weight: 600;
}

.fw700 {
    font-weight: 700;
}

.fw800 {
    font-weight: 800;
}

.fw900 {
    font-weight: 900;
}

.opacity100 {
    opacity: 1;
}

.targetlink:target {
    padding-top: 100px;
    margin-top: -100px;
}

.targetlink.t1 {
    padding-top: 100px;
    margin-top: -100px;
}

.swiper .img-fluid {
    width: 100%;
}

.text-shasow {
    text-shadow: 2px 2px 10px #222;
}

.enTxt {
    font-family: 'Nunito Sans', sans-serif;
}
/* iframe video RWD */

.framewrapper {
    position: relative;
    padding-bottom: 100%;
    /*  padding-top: 25px;*/
    height: 0;
}

.framewrapper2 {
    position: relative;
    padding-bottom: 38.64%;
    /* padding-top: 25px;*/
    height: 0;
}

    .framewrapper iframe,
    .framewrapper2 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*  圖片hover效果1 */

.hovimg-zoom {
    display: block;
    overflow: hidden;
}

    .hovimg-zoom img {
        width: 100%;
        transition: all 0.6s;
        transform: scale(1.06);
    }

    .hovimg-zoom:hover img {
        transform: scale(1.16);
    }

@keyframes zoomIn {
    0% {
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes picfadein {
    from {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes picfadein {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1.01);
    }
}

/*  圖片hover效果2*/
.zoom {
    width: 100%;
    -webkit-animation: picfadein 2s;
    animation: picfadein 2s;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: scale3d(1.01, 1.01, 1);
    transform: scale3d(1.01, 1.01, 1);
}

    .zoom:hover,
    a:hover .zoom {
        -webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
    }


/* btn */
.btn-custom {
    border-radius: 0;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.5rem 4rem;
}

.btn-custom2 {
    padding: 7px 27px;
    border-radius: 20px;
    background-color: transparent;
    border: none;
    color: var(--fontColor);
    word-break: keep-all;
    white-space: nowrap;
}

.btn-outline-greenLight {
    border-color: var(--greenLight) !important;
    color: var(--greenLight) !important;
}

    .btn-outline-greenLight:hover,
    .btn-outline-greenLight.active {
        background-color: var(--greenLight) !important;
        color: var(--white) !important;
    }

.btn-outline-greenLight2 {
    border-color: var(--greenLight2) !important;
    /* color: var(--greenLight2); */
}

    .btn-outline-greenLight2:hover,
    .btn-outline-greenLight2.active {
        background-color: var(--greenLight2) !important;
        color: var(--white) !important;
    }

.btn-outline-yellow {
    border-color: var(--yellow) !important;
    /* color: var(--yellow); */
}

    .btn-outline-yellow:hover,
    .btn-outline-yellow.active {
        background-color: var(--yellow) !important;
        color: var(--white) !important;
    }

.btn-outline-greenLight3 {
    border: 1px solid var(--greenLight2) !important;
    color: var(--white) !important;
}

    .btn-outline-greenLight3:hover,
    .btn-outline-greenLight3.active {
        background-color: var(--greenLight2) !important;
        color: var(--white) !important;
    }

.btn-white {
    border: 1px solid var(--greenLight) !important;
    background-color: var(--white) !important;
    /* color:var(--white)!important; */
}

    .btn-white:hover,
    .btn-white.active {
        background-color: var(--greenLight) !important;
        color: var(--white) !important;
    }

.formbtn .btn-outline-greenLight {
    background: #f9f6eb;
}

/* border rounded */
.rounded1 {
    border-radius: 10px !important;
}

.rounded2 {
    border-radius: 20px !important;
}

/*go top*/
/* .gototop{ display: none; border-radius: 50%; background-color: var(--fontColor); overflow: hidden; width: 60px; height: 60px; display: flex; flex-wrap: wrap; flex-direction:column; justify-content: center; align-items: center; color: #fff; position: fixed; bottom: 2vw; right: 2vw; z-index: 999; opacity: .7;}
.gototop:hover{ opacity: 1;color: #fff;}
.gototop span{ display: block; text-align: center; line-height: 1em; text-transform:uppercase;}
.gototop span img{ display: block; margin: 0 auto 2px;}
 */


/*page style*/
.page_bg {
    padding: 20px 20px 50px;
    background: #f8f6ed url('../images/bgline.png') left top repeat;
    height: 100%;
}

    .page_bg.style-2 {
        padding: 20px 20px 50px;
        background: linear-gradient(to bottom, rgb(171 236 255 / 45%) 30%, #fffaf4a3 60%), url(../images/bgline.png) left top repeat;
        height: 100%;
    }

.page-title-line {
    width: 100%;
    height: 2px;
    margin-top: 20px;
    background: var(--white) url('../images/line1.jpg') left top repeat-x;
}

/*boostrap*/
.pagination {
    border: none;
    border-radius: 4px;
}

.page-item.active .page-link {
    border: none;
    background-color: var(--greenLight);
    color: var(--white);
}

.page-item:first-child .page-link {
    border-radius: 4px;
}

.page-item:last-child .page-link {
    border-radius: 4px;
}

.page-link {
    border: none;
    border-radius: 4px;
    margin: 0 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a8a8a;
}

    .page-link:hover {
        background-color: var(--greenLight);
        color: var(--white);
    }

.page-link-dot {
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*bootstrap pagedlist.mvc*/
.page-item.active a {
    border: none;
    background-color: var(--greenLight);
    color: var(--white);
}

.page-item:first-child a {
    border-radius: 4px;
}

.page-item:last-child a {
    border-radius: 4px;
}

.page-item a {
    border: none;
    border-radius: 4px;
    margin: 0 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a8a8a;
}

    .page-item a:hover {
        background-color: var(--greenLight);
        color: var(--white);
    }