/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

.web-sign {
    position: relative;
    margin: 50px auto 60px;
    max-width: 16vw;
}

    .web-sign div {
        position: relative;
    }

    .web-sign img {
        display: block;
        margin: auto;
        border: 0;
        width: 100%;
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
    }

    .web-sign .front {
        position: relative;
        z-index: 3;
    }

    .web-sign .back {
        position: absolute;
        top: 0;
        animation: rotation 60s infinite linear;
        -webkit-animation: rotation 60s infinite linear;
    }

@media only screen and (max-width: 1279px) {
    .web-sign {
        max-width: 20vw;
    }
}

@media only screen and (max-width: 767px) {
    .web-sign {
        max-width: 40vw;
    }
}

main.pattern {
    background: #fff url(../x/background/index_bg.gif) no-repeat center 890px !important;
}

.bx-wrapper {
    margin-bottom: 0;
    border: none;
}

.bx-wrapper .bx-pager {
    display: none;
}

.call_section.forest {
    background: #18a84c url(../x/banner1.jpg) center top repeat fixed;
}

.call_section.clean {
    background: #1b1a1b url() center center no-repeat fixed;
}


.hero_single.version_2 {
    background: #222222 url(../x/background/banner_view1.jpg) center center no-repeat;
    background-size: cover;
}

    .hero_single.version_2 .wrapper {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }

        .hero_single.version_2 .wrapper h3 {
            font-weight: 300;
            margin: 0 auto;
            position: absolute;
            top: 150px;
            left: 0;
            right: 0;
        }

        /*.hero_single.version_2 form {
            margin-top: 300px;
        }*/

.main_categories {
    margin-top: 0;
    background: rgb(108,201,239);
    background: -moz-linear-gradient(left, rgba(108,201,239,1) 50%, rgba(51,195,195,1) 51%);
    background: -webkit-linear-gradient(left, rgba(108,201,239,1) 50%,rgba(51,195,195,1) 51%);
    background: linear-gradient(to right, rgba(108,201,239,1) 50%,rgba(51,195,195,1) 51%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cc9ef', endColorstr='#33c3c3',GradientType=1 );
}

    .main_categories div.row > div {
        text-align: center;
    }

        .main_categories div.row > div:nth-child(odd),
        .main_categories div.row > div:nth-child(odd) > a > img {
            background: #6cc9ef;
        }

        .main_categories div.row > div:nth-child(even),
        .main_categories div.row > div:nth-child(even) > a > img {
            background: #33c3c3;
        }

        .main_categories div.row > div:nth-child(odd):hover,
        .main_categories div.row > div:nth-child(odd):hover a img {
            background: #0093df;
        }

        .main_categories div.row > div:nth-child(even):hover,
        .main_categories div.row > div:nth-child(even):hover a img {
            background: #009a9a;
        }

        .main_categories div.row > div > a {
            margin: 0 auto;
            padding: 15px 0;
            color: #fff;
        }

            .main_categories div.row > div > a > img {
                margin-top: -30px;
                padding: 12px;
                border-radius: 50%;
                width: 80px;
            }

            .main_categories div.row > div > a > h3 {
                display: flex;
                margin: 0 auto 15px;
                color: #fff;
                min-height: 40px;
                max-height: 40px;
                align-items: center;
                justify-content: center;
                font-size: 1.05rem;
                font-weight: bold;
                letter-spacing: 0.1rem;
                line-height: 1.4rem;
            }

@media (max-width: 991px) {
    .main_categories div.row > div > a > h3 {
        margin-top: 5px;
        font-size: .8rem;
        font-weight: bold;
    }
}

@media (max-width: 767px) {
    .main_categories div.row > div > a > img {
        margin-top: unset;
    }
}

@media (max-width: 575px) {
    .main_categories {
        margin-bottom: 0;
    }

    .main_categories div.row > div:nth-child(3),
    .main_categories div.row > div:nth-child(3) > a > img,
    .main_categories div.row > div:nth-child(6),
    .main_categories div.row > div:nth-child(6) > a > img {
        background: #33c3c3;
    }

    .main_categories div.row > div:nth-child(4),
    .main_categories div.row > div:nth-child(4) > a > img,
    .main_categories div.row > div:nth-child(5),
    .main_categories div.row > div:nth-child(5) > a > img {
        background: #6cc9ef;
    }

    .main_categories div.row > div > a > h3 {
        margin: 0 auto 12px;
    }
}

.announce .wrapper {
    background-color: rgba(0, 0, 0, 0.65);
}

.announce h2 {
    color: #ffc107;
}

.announce p {
    font-size: 1.05rem;
    font-weight: 100;
    letter-spacing: 0.1rem;
    line-height: 1.5rem;
}


ul.headline-tab {
    float: none;
    margin: 0 auto 20px auto;
}

    ul.headline-tab li {
        position: relative;
        width: calc(100% / 5);
        text-align: center;
    }

        ul.headline-tab li a {
            display: block;
            margin-right: 10px;
            padding: 8px 0 3px;
            background: #004dda;
            border-bottom: 5px solid #004dda;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 500;
        }

            ul.headline-tab li a i {
                margin-right: 10px;
                display: none;
                font-size: 1.4rem;
                font-weight: 700;
                vertical-align: text-top;
            }

            ul.headline-tab li a.active,
            ul.headline-tab li a:active {
                background: #ffc107 !important;
                border-bottom: 5px solid #ffc107 !important;
                color: #222;
                outline: #555 dotted 5px;
            }

                ul.headline-tab li a.active i,
                ul.headline-tab li a:active i {
                    display: inline-block;
                }

            ul.headline-tab li a:hover {
                /*background: #1cbbb4;*/
                background: #32a067;
            }

@media (max-width: 575px) {

    ul.headline-tab li a {
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0;
    }

        ul.headline-tab li a i {
            display: none !important;
        }

}

.headline-title,
.headline {
    display: block;
    padding: 10px;
    border-bottom: 1px solid hsl(0, 0%, 83%);
    color: #555;
    font-size: 1.05rem;
    text-decoration: none;
    overflow: hidden;
}

    .headline-title h3,
    .headline h3 {
        padding-bottom: 10px;
        color: #0c512d;
        text-align: justify;
        font-size: 1.5rem;
        font-weight: 900;
        border-bottom: 1px solid hsl(0, 0%, 83%);
    }

.headline:hover {
    background: #fff;
    color: #33c3c3;
    font-weight: 700;
}

.headline-title p,
.headline p {
    margin-bottom: 0;
    color: #555;
    font-size: 1rem;
    font-weight: 400 !important;
    line-height: 1.5rem;
}

.headline i.font-weight-bold {
    color: #1cbbb4;
    font-weight: 700;
}

@media (max-width: 575px) {

    .headline-title h3,
    .headline h3 {
        padding-bottom: 0;
        color: #0c512d;
        text-align: left;
        font-size: 1rem;
        font-weight: 400;
        border-bottom: none;
    }

}

.headline-no-data {
    display: block;
    padding: 30px;
    border-top: 1px solid hsl(0, 0%, 83%);
    border-bottom: 1px solid hsl(0, 0%, 83%);
    color: #555;
    font-size: 1.05rem;
}

.article section > p {
    font-size: 1.15rem;
    letter-spacing: 1px;
    text-indent: 2.45rem;
}

    .article section > p:first-of-type:first-letter {
        font-size: 2rem;
    }

.article .postmeta ul {
    float: none;
}

.cal-single-day {
    position: relative;
    margin: 5px auto;
    padding: 0;
    background: white;
    border: 1px solid #999;
    border-radius: 1px;
    width: 90px;
    height: 70px;
    font-family: "Istok Web", sans-serif;
}

    .cal-single-day:before {
        content: '';
        position: absolute;
        border-left: 88px solid transparent;
        border-bottom: 10px solid rgba(0, 0, 0, 0.1);
        left: 0;
        bottom: 0px;
    }

    .cal-single-day .month {
        position: relative;
        /*
        background: linear-gradient(to right, #a32929, #ff6666 75%);
        background: -webkit-linear-gradient(left, #a32929, #ff6666 75%);
        background: -moz-linear-gradient(left, #a32929, #ff6666 75%);
        */
        background: linear-gradient(to right, #0c512d, #32a067 75%);
        background: -webkit-linear-gradient(right, #0c512d, #32a067 75%);
        background: -moz-linear-gradient(right, #0c512d, #32a067 75%);
        font-size: 0.95rem;
        font-weight: 400 !important;
        color: white;
        width: 100%;
        text-align: center;
    }

    .cal-single-day .day {
        margin-top: -4px;
        font-size: 1.8rem;
        color: #2d2d2d;
        font-weight: 900;
        text-align: center;
    }

.carousel .owl-item {
    opacity: 0.5;
    transform: scale(0.85);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(0.85, 0.85);
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden;
}

    .carousel .owl-item.active.center {
        opacity: 1;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1);
        transform: scale(1);
    }

        .carousel .owl-item.active.center .item .title h4,
        .carousel .owl-item.active.center .item .views {
            opacity: 1;
        }

.grid-gallery ul li figcaption .caption-content {
    margin-top: -40px;
}

.grid-gallery .item figure {
    position: relative;
    overflow: hidden;
    margin: -3px;
}

    .grid-gallery .item figure img {
        width: 100%;
        height: 100%;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .grid-gallery .item figure:hover img, .grid-gallery .item figure:focus img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
        
    }

    .grid-gallery .item figure:hover figcaption, .grid-gallery .item figure:focus figcaption {
        opacity: 1;
        
    }

        .grid-gallery .item figure:hover figcaption .caption-content, .grid-gallery .item figure:focus figcaption .caption-content {
            -webkit-transform: translate(0px, 0px);
            -moz-transform: translate(0px, 0px);
            -ms-transform: translate(0px, 0px);
            -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
            
        }

.grid-gallery .item figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 15% 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: center;
    font-size: 14px;
    font-size: 0.875rem;
    opacity: 0;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .grid-gallery .item figcaption .caption-content {
        position: absolute;
        top: 40%;
        left: 50%;
        margin-top: -30px;
        margin-left: -100px;
        width: 200px;
        -webkit-transform: translate(0px, 15px);
        -moz-transform: translate(0px, 15px);
        -ms-transform: translate(0px, 15px);
        -o-transform: translate(0px, 15px);
        transform: translate(0px, 15px);
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .grid-gallery .item figcaption a {
        color: #fff;
    }

        .grid-gallery .item figcaption a:hover, .grid-gallery ul li figcaption a:focus {
            color: #ffc107;
            
        }

    .grid-gallery .item figcaption i {
        font-size: 30px;
        font-size: 5rem;
    }

    .grid-gallery .item figcaption p {
        margin-bottom: 0;
        margin-top: 10px;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 0.95rem;
    }

.box-search {
    position: relative;
    padding: 25px 80px;
    background: #bea882;
}

    .box-search h4 {
        font-size: 1.2rem;
    }

    .box-search a {
        color: #fff;
    }

        .box-search a:hover {
            color: #0054a6;
        }

    .box-search > i {
        position: absolute;
        left: 25px;
        top: 25px;
        font-size: 36px;
        font-size: 2.25rem;
        color: #555;
    }

    .box-search select {
        display: block;
        border-radius: 0;
        height: 45px;
    }

@media (max-width: 575px) {

    .box-search {
        padding: 25px;
    }

        .box-search h4 {
            margin-top: 3px;
            margin-bottom: 20px;
            padding-left: 45px;
        }
}

.box-transparent {
    background: none !important;
    box-shadow: unset !important;
}

    .box-transparent i {
        padding: 8px;
        background-color: rgba(255, 255, 255, 0.15)!important;
        color: #fff!important;
    }

    .box-transparent h3 {
        margin-top: 15px;
        color: #fff;
    }

    .box-transparent p {
        color: #ddd;
    }

    span.address {
        margin-top: 5px;
        font-size: 0.75rem;
    }

#taiwanmap {
    margin: 0 auto;
}

.animation-box {
    max-width: 15vw;
    animation-duration: 3s !important;
    z-index: 99;
}

    .animation-box div {
        position: relative;
    }

    .animation-box img {
        display: block;
        margin: auto;
        border: 0;
        width: 100%;
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
    }

    .animation-box .top {
        position: relative;
        z-index: 100;
    }

    .animation-box .bottom {
        position: absolute;
        top: 0;
        animation: rotation 60s infinite linear;
        -webkit-animation: rotation 60s infinite linear;
    }

    .animation-box .bottom2 {
        position: absolute;
        top: 0;
        animation: rotation 10s infinite linear;
        -webkit-animation: rotation 10s infinite linear;
    }

.animation-left {
    position: absolute;
    left: -13vw;
    right: inherit;
    bottom: -5vw;
}

.animation-footer {
    position: relative;
}

    .animation-footer .front {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
    }

animation-footer .back {
    position: absolute;
    top: 0;
    z-index: 1;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(360deg)
    }
}

@-ms-keyframes rotation {
    from {
        -ms-transform: rotate(0deg)
    }

    to {
        -ms-transform: rotate(360deg)
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg)
    }

    to {
        -o-transform: rotate(360deg)
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.custom-search-input-2.inner input:last-child {
    border-right: unset;
}

@media (max-width: 991px) {
    .box-search .custom-search-input-2.inner {
        display: flex;
    }
    .custom-search-input-2.inner input {
        border-right: 1px solid #d2d8dd;
    }
    .custom-search-input-2.inner input[type='submit'] {
        margin: unset;
    }
}

@media (max-width: 575px) {
    .custom-search-input-2.inner input[type='submit'] {
        position: unset;
        margin-top: 5px;
    }
}

.mfp-wrap.my-mfp-popup .mfp-content {
    width: 400px;
    max-width: 400px;
    height: 330px;
    max-height: 90vh;
}