﻿
.panel-one:after, .panel-two:after, .panel-three:after, .panel-four:after, .panel-four ul:after, .panel-five:after, .panel-five ul:after, .panel-six:after, .panel-seven:after, .panel-eight:after, .panel-nine:after, #panel:after, #banner:after, #footer:after {
    display: block;
    height: 0;
    clear: both;
    content: " ";
    visibility: hidden;
}

#panel img {
    max-width: 100%;
}

/* ================================
   slider banner   (panel-one and panel-three)
   ================================ */

#slider-column_content {
    max-height: 753px;
    max-width: 1920px;
    margin: 0 auto;
}


.scroll-to-start {
    position: absolute;
    bottom: 2.5em;
    width: 100%;
    text-align: center;
    z-index:9999;
}

@media only screen and (max-width: 960px) {
    .scroll-to-start {
        bottom: 1em;

    }

}

@-webkit-keyframes scroll-animation {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(1.2em);
        transform: translateY(1.2em)
    }
}

@keyframes scroll-animation {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(1.2em);
        transform: translateY(1.2em)
    }
}



.scroll-to-start-icon {
    border: 3px solid #fff;
    border-radius: 1em;
    display: block;
    height: 2.3em;
    width: 1.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    .scroll-to-start-icon div {
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: scroll-animation;
        animation-name: scroll-animation;
        background-color: #fff;
        border-radius: 50%;
        background-clip: padding-box;
        height: 0.4em;
        margin-top: 5px;
        width: 0.4em
    }


.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}




#slider-column_contentb {
    max-height: 428px;
    max-width: 1920px;
    margin: 0 auto;
}

.slider-wrapper {
    position: relative;
}
    .slider-wrapper .rslides {
        position: relative;
        list-style: none;
        overflow: hidden;
        width: 100%;
        padding: 0;
        margin: 0 
    }

        .slider-wrapper .rslides li {
            -webkit-backface-visibility: hidden;
            position: absolute;
            display: none;
            width: 100%;
            left: 0;
            top: 0
        }

            .slider-wrapper .rslides li img {
                display: block;
                height: auto;
                float: left;
                width: 100% !important;
                border: 0
            }

            .slider-wrapper .rslides li:first-child {
                position: relative;
                display: block;
                float: left
            }


    .slider-wrapper .rslides_tabs {
        position: absolute;
        bottom: 1.2em;
        z-index: 1103;
        height: .4em;
        width: 100%;
        text-align: center
    }

        .slider-wrapper .rslides_tabs li {
            display: inline-block;
            height: .4em
        }

            .slider-wrapper .rslides_tabs li a {
                border-radius: 5px;
                display: block;
                height: .4em;
                width: 2.3em;
                margin: 0 5px;
                border: 0;
                background: #fff;
                -webkit-transition: all .1s ease-in-out;
                -moz-transition: all .1s ease-in-out;
                -o-transition: all .1s ease-in-out;
                transition: all .1s ease-in-out;
                color: transparent
            }

            .slider-wrapper .rslides_tabs li.rslides_here a {
                opacity: 1;
                background: #27b900;
            }



/* ================================
   panel-two
   ================================ */
.panel-two {
    padding: 0 0 0 0;
    max-width: 1920px;
    margin: 0 auto;
}

    .panel-two .category {
        font-size: 3.2em;
        font-weight: 600;
        line-height: 1;
        font-family: Bahnschrift;
    }

    .panel-two .title {
        font-size: 2.4em;
        padding: 40px 0 40px 0;
        line-height: 1;
    }

    .panel-two .description {
        font-size: 1.1em;
        width: 60%;
        line-height: 1.7;
    }

    .panel-two .link {
        padding: 56px 0 10px 0;
    }

        .panel-two .link a {
            font-size: 1.1em;
            line-height: 2em;
            display: block;
            width: 40%;
            min-width: 9.5em;
            padding: 1px 0;
            text-align: center;
            margin: 0 auto;
            border: 2px solid #000;
            transition: 0.2s;
            -webkit-transition: .2s;
            -moz-transition: .2s;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: url(../imgs/icon-angle-right.png ) no-repeat;
            background-position: 96% 50%;
        }
            .panel-two .link a:hover {
                color: #fff;
                border-color: #27b900;
                background: url(../imgs/icon-angle-right-white.png ) no-repeat #27b900;
                background-position: 96% 50%;
            }
@media only screen and (max-width: 720px) {

    .panel-two .title {
        font-size: 2.0em;
    }

    .panel-two .description {
        width: 80%;
    }

    .panel-two .link a {
        background-size: 10px;
    }
        .panel-two .link a:hover {
            background-size: 10px;
        }

        }

/* ================================
   panel-three
   ================================ */

.panel-three {
    background: #fff;

}
/* ================================
   panel-four
   ================================ */

.panel-four {
    padding: 4.2em 0 4.2em 0;
    background: #fff;
}

    .panel-four ul li {
        display: block;
        position: relative;
        float: left;
        width: 24%;
        margin: 0 1% 1% 0;
        height: auto;
        max-height:18em;
        /*border: 1px solid #696969;*/
        color: #000;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        transition: background-color 3s linear,color 3s linear;
        -webkit-transition: background-color 3s linear,color 3s linear;
        -moz-transition: background-color 3s linear,color 3s linear;
        -o-transition: background-color 3s linear,color 3s linear;
    }



        .panel-four ul li a {
            display: block;
            transition: color .2s ease;
            -moz-transition: color .2s ease;
            -webkit-transition: color .2s ease;
            transition: background-color 3s linear,color 3s linear;
            -webkit-transition: background-color 3s linear,color 3s linear;
            -moz-transition: background-color 3s linear,color 3s linear;
            -o-transition: background-color 3s linear,color 3s linear;
        }

        .panel-four ul li:nth-child(4n) {
            margin-right: 0;
        }

        .panel-four ul li img {
            max-width: 100%;
            max-height: 100%;
        }


    .panel-four .panel-four-describe {
        position: absolute;
        width: 100%;
        height: 100%;
        max-width: 100%;
        background: rgba(255,255,255,0.9);
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: block;
        transition: .9s;
        -webkit-transition: .9s;
        -moz-transition: .9s;
        opacity: 0;

    }

        .panel-four .panel-four-describe .text {
            width: 100%;
     /*       margin-top: 18%;*/
            height: 100%;
        }

        .panel-four .panel-four-describe p {
            text-align: center;
            vertical-align: middle;
            font-weight: 600;
        }

    .panel-four ul li a:hover .panel-four-describe {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0px;
        display: block;
        opacity: 1;
    }

.panel-four-text-describe-title {
    font-size: 1.4em;
    height: 1.8em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel-four-text-describe-summary {
    line-height: 1.6;
    font-size: 1.1em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: 7em;
}


@media only screen and (max-width: 720px) {
    .panel-four ul li {
        width: 32.66666%;
        margin: 0 1% 1% 0;
    }

        .panel-four ul li:nth-child(3n) {
            margin-right: 0;
        }

        .panel-four ul li:nth-child(4n) {
            margin: 0 1% 1% 0;
        }

    .panel-four .panel-four-describe p {
        line-height: 1.6;
        font-size: 0.9em;
    }
}
/* ================================
   panel-five
   ================================ */

.panel-five {
    padding: 4.9em 0 6em 0;
    border-top: 0.5em solid #000;
}

    .panel-five .category {
        font-size: 3.2em;
        font-weight: 600;
        line-height: 1;
        font-family: Bahnschrift;
    }

    .panel-five ul {
        padding: 4.9em 0 0 0;
    }

        .panel-five ul li {
            display: block;
            float: left;
            width: 45%;
            margin: 0 5% 6% 0;
            height: auto;
            color: #000;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: left;
            overflow: hidden;
        }

            .panel-five ul li .imgs {
                float: left;
                width: 32%;
                max-height: 185px;
                max-width: 185px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .panel-five ul li img {
                width: 100%;
                border: 1px solid #000;
                height: 183px;
                max-width: 183px;
                max-height: 183px;
            }

            .panel-five ul li .text {
                float: left;
                width: 63%;
                overflow: hidden;
                max-height: 10em;
                margin: 0 0 0 5%;
            }
            .panel-five ul li a:hover{
                color:#5c5c5c
            }
            .panel-five ul li:nth-child(2n) {
                margin-right: 0;
            }

            .panel-five ul li .text .date {
                font-size: 1.3em;
                font-weight: 600;
                line-height: 1.2;
            }

            .panel-five ul li .text .title {
                font-weight: 600;
                line-height: 2;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .panel-five ul li .text .describe {
                font-size: 0.9em;
                line-height: 1.4;
                overflow: hidden;
                display: block;
                max-height: 5.6em;
            }

    .panel-five .link {
        padding: 2em 0 0 0;
    }
        .panel-five .link a {
            font-size: 1.1em;
            line-height: 2em;
            display: block;
            width: 40%;
            min-width:9.5em;
            padding: 1px 0;
            text-align: center;
            margin: 0 auto;
            border: 2px solid #000;
            transition: 0.2s;
            -webkit-transition: .2s;
            -moz-transition: .2s;
            background: url(../imgs/icon-angle-right.png ) no-repeat;
            background-position: 96% 50%;
        }

            .panel-five .link a:hover {
                color: #fff;
                border-color: #27b900;
                background: url(../imgs/icon-angle-right-white.png ) no-repeat  #27b900;
                background-position: 96% 50%;
            }

@media only screen and (max-width: 720px) {

    .panel-five ul li {
        width: 95%;
        margin: 0 5% 6% 0;
    }
    .panel-five .link a {
        background-size: 10px;
    }
        .panel-five .link a:hover {
            background-size: 10px;
        }

}
/* ================================
   panel-six
   ================================ */

.panel-six {
    text-align: center;
}

    .panel-six p {
        background: #d9d9d9;
        padding: 1.4em 0;
        color: #5c5c5c;
        font-size: 1.3em;
    }

    .panel-six .triangleDiv {
        border-color: #d9d9d9 #fff #fff #fff;
        border-style: solid;
        border-width: 30px 29px 0 29px;
        height: 0;
        width: 0;
    }

/* ================================
   panel-seven
   ================================ */

.panel-seven {
    padding: 1.9em 0 2em 0;
    letter-spacing: -0.04em;
}

    .panel-seven .tel {
        padding: 0 10%;
    }

        .panel-seven .tel span {
            font-size: 2.5em;
            font-weight: 600;
            line-height: 1.5em;
            padding: 0 0 0 .2em;
            font-family: Bahnschrift;
            letter-spacing: -0.04em;
        }

        .panel-seven .tel p {
            text-align: center;
            margin: 0 auto;
            line-height: 2.8em;
            font-weight: 600;
            border-top: 2px solid #000;
        }

    .panel-seven .email {
        margin: 20px 0 0 0;
        width: 70%;
        background: #27b900;
        color: #fff;
        font-size: 1.6em;
        line-height: 2.5;
        font-weight: 600;
    }

        .panel-seven .email span {
            text-align: left;
            padding: 0 0 0 17px;
            letter-spacing: .3px;
        }

@media only screen and (max-width: 960px) {
    .panel-seven .email {
        width: 100%;
    }
}

/* ================================
   panel-eight
   ================================ */

.panel-eight {
    padding: 1.9em 0 0 0;
}


#container-map {
    width: 100%;
    height: 28em;
}

.mapcircle, .mapcenter {
    position: absolute;
    left: 0;
    top: 23px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #197500;
}

.mapcenter {
    position: absolute;
    left: 0;
    top: 23px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #197500;
    line-height: 70px;
}

.mapimg {
    position: absolute;
    left: 20px;
    top: -20px;
}
.mapcircle {
    -webkit-animation: circle 3s linear infinite;
    animation: circle 3s linear infinite;
}

@-webkit-keyframes circle { /* Safari and Chrome */
    from {
        opacity: 1;
        -webkit-transform: scale(0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(3);
    }
}