@import url("../../css2.css");

.img_link img, .img_link>.show_box, .img_link .span {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.img_link {
    font-size: 0;
    letter-spacing: 0;
    line-height: 0
}

* {
    box-sizing: border-box
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, img {
    margin: 0px;
    padding: 0px
}

fieldset, img, abbr, acronym {
    border: 0
}

q:before, q:after {
    content: ''
}

input, button, select, textarea {
    border: none;
    outline: none;
    font-family: 'Noto Sans TC', sans-serif
}

button {
    cursor: pointer;
    padding: 0;
    font-family: 'Noto Sans TC', sans-serif
}

a {
    text-decoration: none;
    color: #333
}

a:hover {
    color: #888
}

body, html {
    width: 100%;
    height: 100%
}

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clearfix {
    zoom: 1
}

.clear {
    clear: both
}

.fleft {
    float: left
}

@media only screen and (max-width: 767px) {
    .fleft {
        float: none
    }
}

.fright {
    float: right
}

@media only screen and (max-width: 767px) {
    .fright {
        float: none
    }
}

.m_fleft {
    float: left
}

.m_fright {
    float: right
}

h2, .h2 {
    font-size: 60px
}

h3, .h3 {
    font-size: 35px
}

h4, .h4 {
    font-size: 28px
}

h5, .h5 {
    font-size: 18px
}

.marb_10 {
    margin-bottom: 10px
}

.marb_20 {
    margin-bottom: 20px
}

.marb_30 {
    margin-bottom: 30px
}

.marb_40 {
    margin-bottom: 40px
}

.marb_50 {
    margin-bottom: 50px
}

.marb_60 {
    margin-bottom: 60px
}

.marb_80 {
    margin-bottom: 80px
}

.marb_100 {
    margin-bottom: 100px
}

.marr_20 {
    margin-right: 20px
}

@media only screen and (max-width: 767px) {
    .marb_m_0 {
        margin-bottom: 0px
    }
}

@media only screen and (max-width: 767px) {
    .m_marb_20 {
        margin-bottom: 20px
    }
}

@media only screen and (max-width: 767px) {
    .m_marb_50 {
        margin-bottom: 50px
    }
}

.ul {
    list-style: none
}

.lileft li {
    float: left
}

.bold {
    font-weight: bold
}

.text_line {
    text-decoration: underline
}

.align_center {
    text-align: center
}

.align_left {
    text-align: left
}

.align_right {
    text-align: right
}

@media only screen and (max-width: 767px) {
    .m_align_center {
        text-align: center
    }
}

@media only screen and (max-width: 767px) {
    .m_align_left {
        text-align: left
    }
}

@media only screen and (max-width: 767px) {
    .m_align_right {
        text-align: right
    }
}

.img_link {
    text-align: center;
    width: 100%;
    height: 100%
}

.img_link img, .img_link>.show_box {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle
}

.img_link .span {
    width: 0px;
    height: 100%;
    vertical-align: middle
}

.main {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px
}

@media only screen and (max-width: 999px) {
    .main {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media only screen and (max-width: 767px) {
    .main {
        padding: 0px 15px
    }
}

.ovh {
    overflow: hidden
}

body {
    background: #FFF;
    font-family: 'Arial', 'Noto Sans TC', sans-serif;
    color: #333;
    font-size: 18px;
    letter-spacing: 1px
}

.header {
    position: fixed;
    z-index: 60;
    background: #FFF;
    top: 0;
    width: 100%;
    height: 80px;
    padding: 0px 15px
}

.header .mb-hambruger {
    display: none
}

@media only screen and (max-width: 999px) {
    .header .mb-hambruger {
        display: block;
        position: fixed;
        right: 0;
        top: 0
    }
}

.header .mb-hambruger .ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.header .mb-hambruger .hamRotate.active {
    transform: rotate(45deg)
}

.header .mb-hambruger .hamRotate180.active {
    transform: rotate(180deg)
}

.header .mb-hambruger .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #3B8D70;
    stroke-width: 4;
    stroke-linecap: round
}

.header .mb-hambruger .ham4 .top {
    stroke-dasharray: 40 121
}

.header .mb-hambruger .ham4 .bottom {
    stroke-dasharray: 40 121
}

.header .mb-hambruger .ham4.active .top {
    stroke-dashoffset: -68px
}

.header .mb-hambruger .ham4.active .bottom {
    stroke-dashoffset: -68px
}

@media only screen and (max-width: 999px) {
    .header {
        height: 60px
    }
}

.header .flex-box {
    align-items: center;
    display: flex;
    justify-content: space-between;
    height: 100%
}

.header .logo {
    display: block
}

.header .logo img {
    display: block
}

@media only screen and (max-width: 999px) {
    .header .logo img {
        height: 40px
    }
}

@media only screen and (max-width: 320px) {
    .header .logo img {
        max-width: 85%;
        height: auto
    }
}

.header .right-box {
    display: flex
}

.header .main_menu {
    display: flex;
    align-items: center
}

@media only screen and (max-width: 999px) {
    .header .main_menu {
        position: fixed;
        display: block;
        display: none;
        width: 100%;
        top: 60px;
        width: 100%;
        height: 100%;
        background: #FFF;
        left: 0;
        border-top: 1px solid #eee
    }
}

.header .main_menu li {
    margin-right: 40px;
    list-style: none;
    position: relative
}

@media only screen and (max-width: 999px) {
    .header .main_menu li {
        border-bottom: 1px solid #eee;
        margin-right: 0
    }
}

.header .main_menu li.mb-lan {
    display: none
}

@media only screen and (max-width: 999px) {
    .header .main_menu li.mb-lan {
        display: block
    }
}

.header .main_menu li .big_title {
    position: relative;
    color: #555;
    cursor: pointer;
    display: block;
    font-family: 'Noto Serif TC', serif;
    font-weight: 500;
    z-index: 10;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (max-width: 999px) {
    .header .main_menu li .big_title {
        padding: 15px 20px
    }
}

.header .main_menu li .big_title span {
    display: block;
    position: absolute;
    top: 34px;
    left: 50%;
    width: 1px;
    background: #3B8D70;
    height: 0px;
    border-radius: 2px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.header .main_menu li .menu_2 {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    visibility: hidden;
    position: absolute;
    top: -10px;
    padding-top: 53px;
    left: 50%;
    margin-left: -105px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (max-width: 999px) {
    .header .main_menu li .menu_2 {
        transition: all 0s;
        -moz-transition: all 0s;
        -o-transition: all 0s;
        -ms-transition: all 0s;
        -webkit-transition: all 0s;
        border-top: 1px solid #3B8D70;
        position: relative;
        visibility: visible;
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        left: 0;
        margin: 0;
        top: 0px;
        padding-top: 0px;
        display: none
    }
}

@media only screen and (max-width: 767px) {
    .header .main_menu li .menu_2 {
        top: 0
    }
}

.header .main_menu li .menu_2 .w_bg {
    background: #FFF;
    width: 210px;
    border-radius: 30px 0px 30px 0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
    overflow: hidden
}

@media only screen and (max-width: 999px) {
    .header .main_menu li .menu_2 .w_bg {
        width: 100%;
        box-shadow: none;
        background: #f7f7f7;
        border-radius: 0
    }
}

.header .main_menu li .menu_2 a {
    display: block;
    font-size: 16px;
    padding: 15px 15px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-weight: 500
}

@media only screen and (max-width: 999px) {
    .header .main_menu li .menu_2 a {
        padding: 10px 20px;
        text-align: left
    }
}

.header .main_menu li .menu_2 a:hover {
    color: #3B8D70;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #F7FBEE;
    font-weight: bold
}

@media only screen and (min-width: 1000px) {
    .header .main_menu li:hover .big_title {
        color: #3B8D70;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }

    .header .main_menu li:hover .big_title span {
        height: 19px;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }

    .header .main_menu li:hover .menu_2 {
        visibility: visible;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        top: 0px;
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

.header .language {
    border: 1px solid #3B8D70;
    font-size: 18px;
    height: 40px;
    padding: 0px 10px;
    width: 100px;
    font-family: 'Noto Serif TC', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #3B8D70;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (max-width: 999px) {
    .header .language {
        font-size: 16px;
        margin-rigfht: 40px;
        height: 35px;
        letter-spacing: 0;
        width: auto;
        display: none
    }
}

.header .language:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #3B8D70;
    color: #FFF
}

.main-box {
    max-width: 1280px;
    padding: 0px 20px;
    margin: 0 auto
}

@media only screen and (max-width: 767px) {
    .main-box {
        padding: 0px 15px
    }
}

.ovh {
    overflow: hidden
}

.main-1240 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0px 20px
}

@media only screen and (max-width: 767px) {
    .main-1240 {
        padding: 0px 15px
    }
}

.section-1-kv {
    position: relative;
    width: 100%;
    margin-top: 80px;
    padding: 0px 5.72916666vw;
    margin-bottom: 40px
}

@media only screen and (max-width: 999px) {
    .section-1-kv {
        margin-top: 60px;
        padding: 0px 20px
    }
}

@media only screen and (max-width: 767px) {
    .section-1-kv {
        padding: 0;
        margin-bottom: 20px
    }
}

.section-1-kv .center-slogan {
    position: absolute;
    top: 50%;
    margin-top: -6vw;
    width: 100%;
    left: 0;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.8s linear forwards;
    -webkit-animation: bg-top 0.5s 0.8s linear forwards;
    animation: bg-top 0.5s 0.8s linear forwards
}

@media only screen and (max-width: 767px) {
    .section-1-kv .center-slogan {
        top: 20px;
        right: 20px;
        margin-top: 0;
        background: #FFF;
        border-radius: 20px 0 20px 0;
        width: 55.4666vw;
        padding: 10px;
        left: initial;
        z-index: 10
    }
}

.section-1-kv .center-slogan h2 {
    color: #FFF;
    font-size: 2.8125vw;
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-weight: 600;
    letter-spacing: 2px
}

@media only screen and (max-width: 767px) {
    .section-1-kv .center-slogan h2 {
        text-align: left;
        font-size: 6.9vw;
        letter-spacing: 0;
        line-height: 7.2vw;
        color: #3B8D70;
        margin-bottom: 10px
    }
}

.section-1-kv .center-slogan p {
    color: #FFF;
    text-transform: uppercase;
    font-size: 1.1971666vw;
    text-align: center;
    letter-spacing: 2.5px
}

@media only screen and (max-width: 767px) {
    .section-1-kv .center-slogan p {
        text-align: left;
        font-size: 12px;
        color: #3B8D70
    }
}

.section-1-kv .top-kv {
    width: 100%;
    position: relative
}

.section-1-kv .kvbox-pc {
    width: 100%;
    position: relative;
    border-radius: 5.208333vw 0px 5.208333vw 0px;
    overflow: hidden;
    margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
    .section-1-kv .kvbox-pc {
        display: none
    }
}

.section-1-kv .kvbox-pc .bg-pc {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.8s 0s linear forwards;
    -webkit-animation: alpha01 0.8s 0s linear forwards;
    animation: alpha01 0.8s 0s linear forwards
}

.section-1-kv .kvbox-pc .bg-pc, .section-1-kv .kvbox-pc img {
    display: block;
    width: 100%
}

.section-1-kv .kvbox-pc .chicken {
    width: calc((554/1700)*100%);
    position: absolute;
    z-index: 2;
    left: -21%;
    bottom: -8%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top-let 0.5s 0.8s linear forwards;
    -webkit-animation: bg-top-let 0.5s 0.8s linear forwards;
    animation: bg-top-let 0.5s 0.8s linear forwards
}

.section-1-kv .kvbox-pc .grass3 {
    width: calc((495/1700)*100%);
    position: absolute;
    z-index: 5;
    left: -6.5%;
    bottom: 0;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.3s linear forwards;
    -webkit-animation: bg-top 0.5s 0.3s linear forwards;
    animation: bg-top 0.5s 0.3s linear forwards
}

.section-1-kv .kvbox-pc .grass2 {
    width: calc((183/1700)*100%);
    position: absolute;
    z-index: 5;
    left: 6.5%;
    bottom: -1%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.5s linear forwards;
    -webkit-animation: bg-top 0.5s 0.5s linear forwards;
    animation: bg-top 0.5s 0.5s linear forwards
}

.section-1-kv .kvbox-pc .frog {
    width: calc((132/1700)*100%);
    position: absolute;
    z-index: 1;
    left: 12.5%;
    bottom: 11%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top-let 0.5s 1s linear forwards;
    -webkit-animation: bg-top-let 0.5s 1s linear forwards;
    animation: bg-top-let 0.5s 1s linear forwards
}

.section-1-kv .kvbox-pc .butterfly1 {
    width: calc((83/1700)*100%);
    position: absolute;
    z-index: 5;
    left: 13.5%;
    bottom: 28%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.5s 0.6s linear forwards;
    -webkit-animation: alpha01 0.5s 0.6s linear forwards;
    animation: alpha01 0.5s 0.6s linear forwards
}

.section-1-kv .kvbox-pc .bug1 {
    width: calc((14/1700)*100%);
    position: absolute;
    z-index: 6;
    left: 18%;
    bottom: 3%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.5s 1.2s linear forwards;
    -webkit-animation: alpha01 0.5s 1.2s linear forwards;
    animation: alpha01 0.5s 1.2s linear forwards
}

.section-1-kv .kvbox-pc .grass4 {
    width: calc((391/1700)*100%);
    position: absolute;
    z-index: 2;
    left: 16.15%;
    bottom: 0%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.2s linear forwards;
    -webkit-animation: bg-top 0.5s 0.2s linear forwards;
    animation: bg-top 0.5s 0.2s linear forwards
}

.section-1-kv .kvbox-pc .spider {
    width: calc((265/1700)*100%);
    position: absolute;
    z-index: 1;
    left: 21%;
    bottom: -13%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top-15 0.5s 0.4s linear forwards;
    -webkit-animation: bg-top-15 0.5s 0.4s linear forwards;
    animation: bg-top-15 0.5s 0.4s linear forwards
}

.section-1-kv .kvbox-pc .snake {
    width: calc((253/1700)*100%);
    position: absolute;
    z-index: 1;
    left: 34.5%;
    bottom: 8%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top-15 0.5s 0.6s linear forwards;
    -webkit-animation: bg-top-15 0.5s 0.6s linear forwards;
    animation: bg-top-15 0.5s 0.6s linear forwards
}

.section-1-kv .kvbox-pc .grass5 {
    width: calc((258/1700)*100%);
    position: absolute;
    z-index: 1;
    left: 44.5%;
    bottom: 0%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.2s linear forwards;
    -webkit-animation: bg-top 0.5s 0.2s linear forwards;
    animation: bg-top 0.5s 0.2s linear forwards
}

.section-1-kv .kvbox-pc .bug2 {
    width: calc((32/1700)*100%);
    position: absolute;
    z-index: 1;
    left: 47.5%;
    bottom: 6%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.5s 1.2s linear forwards;
    -webkit-animation: alpha01 0.5s 1.2s linear forwards;
    animation: alpha01 0.5s 1.2s linear forwards
}

.section-1-kv .kvbox-pc .grass6 {
    width: calc((267/1700)*100%);
    position: absolute;
    z-index: 3;
    left: 57.5%;
    bottom: -4.5%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.5s linear forwards;
    -webkit-animation: bg-top 0.5s 0.5s linear forwards;
    animation: bg-top 0.5s 0.5s linear forwards
}

.section-1-kv .kvbox-pc .grass7 {
    width: calc((322/1700)*100%);
    position: absolute;
    z-index: 2;
    left: 66%;
    bottom: -8.5%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0.2s linear forwards;
    -webkit-animation: bg-top 0.5s 0.2s linear forwards;
    animation: bg-top 0.5s 0.2s linear forwards
}

.section-1-kv .kvbox-pc .peo1 {
    width: calc((167/1700)*100%);
    position: absolute;
    z-index: 1;
    left: 71%;
    bottom: 0%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 1s linear forwards;
    -webkit-animation: bg-top 0.5s 1s linear forwards;
    animation: bg-top 0.5s 1s linear forwards
}

.section-1-kv .kvbox-pc .bird1 {
    width: calc((61/1700)*100%);
    position: absolute;
    z-index: 1;
    right: 4%;
    top: 8%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bird1 1s 0.6s linear forwards;
    -webkit-animation: bird1 1s 0.6s linear forwards;
    animation: bird1 1s 0.6s linear forwards
}

.section-1-kv .kvbox-pc .bird2 {
    width: calc((102/1700)*100%);
    position: absolute;
    z-index: 1;
    right: 22%;
    top: 15%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bird2 6s 1s ease-in infinite;
    -webkit-animation: bird2 6s 1s ease-in infinite;
    animation: bird2 6s 1s ease-in infinite
}

.section-1-kv .kvbox-pc .butterfly2 {
    width: calc((80/1700)*100%);
    position: absolute;
    z-index: 4;
    left: 63%;
    bottom: 31%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-lbottom-15 0.3s 1s linear forwards;
    -webkit-animation: bg-lbottom-15 0.3s 1s linear forwards;
    animation: bg-lbottom-15 0.3s 1s linear forwards
}

.section-1-kv .kv-mobile {
    display: none;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.8s 0s linear forwards;
    -webkit-animation: alpha01 0.8s 0s linear forwards;
    animation: alpha01 0.8s 0s linear forwards
}

@media only screen and (max-width: 767px) {
    .section-1-kv .kv-mobile {
        display: block;
        border-radius: 0 0 40px 0;
        overflow: hidden
    }

    .section-1-kv .kv-mobile img {
        display: block;
        width: 100%
    }
}

.section-1-kv .statis-box {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 1.1s linear forwards;
    -webkit-animation: bg-top 0.5s 1.1s linear forwards;
    animation: bg-top 0.5s 1.1s linear forwards
}

@media only screen and (max-width: 999px) {
    .section-1-kv .statis-box .main-1240 {
        padding: 0
    }
}

.section-1-kv .statis-box ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap
}

@media only screen and (max-width: 767px) {
    .section-1-kv .statis-box ul {
        padding: 15px
    }
}

.section-1-kv .statis-box ul li {
    width: 25%;
    list-style: none;
    border-right: 1px dashed #C8E487
}

@media only screen and (max-width: 767px) {
    .section-1-kv .statis-box ul li {
        width: 50%;
        padding: 15px 0px
    }

    .section-1-kv .statis-box ul li:nth-child(2) {
        border-right: 0px;
        border-bottom: 1px dashed #C8E487
    }

    .section-1-kv .statis-box ul li:nth-child(1) {
        border-bottom: 1px dashed #C8E487
    }
}

.section-1-kv .statis-box ul li:last-child {
    border-right: 0px
}

.section-1-kv .statis-box ul li h3 {
    color: #333;
    line-height: 1.2;
    font-size: 18px;
    text-align: center;
    font-family: 'Noto Serif TC', serif
}

@media only screen and (max-width: 1599px) {
    .section-1-kv .statis-box ul li h3 {
        font-size: 16px
    }
}

.section-1-kv .statis-box ul li h2.num {
    line-height: 1.2;
    font-size: 38px;
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    color: #3B8D70
}

@media only screen and (max-width: 1599px) {
    .section-1-kv .statis-box ul li h2.num {
        font-size: 28px
    }
}

@media only screen and (max-width: 999px) {
    .section-1-kv .statis-box ul li h2.num {
        font-size: 22px
    }
}

.section-1-kv .statis-box ul li p {
    text-align: center;
    font-size: 16px;
    color: #555
}

@media only screen and (max-width: 1599px) {
    .section-1-kv .statis-box ul li p {
        font-size: 14px
    }
}

.section-2-statistic {
    position: relative;
    width: 100%;
    margin-bottom: 100px
}

@media only screen and (max-width: 767px) {
    .section-2-statistic {
        margin-bottom: 40px
    }
}

.section-2-statistic.vivi .statbox .right-box {
    -moz-animation: bg-top 0.5s 0.7s linear forwards;
    -webkit-animation: bg-top 0.5s 0.7s linear forwards;
    animation: bg-top 0.5s 0.7s linear forwards
}

.section-2-statistic.vivi .statbox .left-box {
    -moz-animation: bg-top 0.5s 0.5s linear forwards;
    -webkit-animation: bg-top 0.5s 0.5s linear forwards;
    animation: bg-top 0.5s 0.5s linear forwards
}

.section-2-statistic.vivi .titlebox {
    -moz-animation: bg-top 0.3s 0.3s linear forwards;
    -webkit-animation: bg-top 0.3s 0.3s linear forwards;
    animation: bg-top 0.3s 0.3s linear forwards
}

.section-2-statistic.vivi .gray-bg {
    -moz-animation: index-bg1 1s 0s linear forwards;
    -webkit-animation: index-bg1 1s 0s linear forwards;
    animation: index-bg1 1s 0s linear forwards
}

@media only screen and (max-width: 767px) {
    .section-2-statistic.vivi .gray-bg {
        -moz-animation: w_100 1s 0s linear forwards;
        -webkit-animation: w_100 1s 0s linear forwards;
        animation: w_100 1s 0s linear forwards
    }
}

.section-2-statistic.vivi a.morebtn {
    -moz-animation: alpha01 0.5s 0.9s linear forwards;
    -webkit-animation: alpha01 0.5s 0.9s linear forwards;
    animation: alpha01 0.5s 0.9s linear forwards
}

.section-2-statistic.vivi .left-cir {
    -moz-animation: alpha01 0.5s 0.9s linear forwards;
    -webkit-animation: alpha01 0.5s 0.9s linear forwards;
    animation: alpha01 0.5s 0.9s linear forwards
}

.section-2-statistic.vivi .ills-right {
    -moz-animation: bird-move 0.5s 0.8s linear forwards;
    -webkit-animation: bird-move 0.5s 0.8s linear forwards;
    animation: bird-move 0.5s 0.8s linear forwards
}

.section-2-statistic.vivi .ills-right img {
    -moz-animation: bird 0.5s 0.8s linear forwards;
    -webkit-animation: bird 0.5s 0.8s linear forwards;
    animation: bird 0.5s 0.8s linear forwards
}

.section-2-statistic .titlebox {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100)
}

.section-2-statistic .left-cir {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    margin-left: -900px;
    z-index: 1;
    bottom: -50px
}

.section-2-statistic .left-cir .cirbox {
    position: relative;
    width: 100%;
    height: 100%
}

.section-2-statistic .left-cir .cirbox img.cir {
    max-width: 100%;
    max-height: 100%;
    -moz-animation: rotate360 10s 0s linear infinite;
    -webkit-animation: rotate360 10s 0s linear infinite;
    animation: rotate360 10s 0s linear infinite
}

.section-2-statistic .left-cir .cirbox .center {
    -moz-animation: rotate360un 10s 0s linear infinite;
    -webkit-animation: rotate360un 10s 0s linear infinite;
    animation: rotate360un 10s 0s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -160px;
    margin-left: -140px
}

.section-2-statistic .ills-right {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    position: absolute;
    z-index: 10;
    left: 50%;
    margin-left: 650px;
    bottom: 0px
}

@media only screen and (max-width: 1599px) {
    .section-2-statistic .ills-right {
        margin-left: 568px
    }
}

.section-2-statistic .ills-right img {
    width: 480px
}

@media only screen and (max-width: 1599px) {
    .section-2-statistic .ills-right img {
        width: 400px
    }
}

.section-2-statistic .gray-bg {
    position: absolute;
    width: 0vw;
    height: 610px;
    right: 0;
    top: 58px;
    z-index: 1;
    background: #F7F7F7;
    border-radius: 5.2vw 0px 5.2vw 0px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100)
}

@media only screen and (max-width: 999px) {
    .section-2-statistic .gray-bg {
        height: 430px
    }
}

@media only screen and (max-width: 767px) {
    .section-2-statistic .gray-bg {
        width: 100%;
        top: initial;
        height: 65%;
        bottom: 30px
    }
}

.section-2-statistic .main-1240 {
    position: relative;
    z-index: 2
}

.section-2-statistic a.morebtn {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    width: 250px;
    height: 60px;
    border-radius: 30px 0px 30px 0px;
    border: 2px solid #3B8D70;
    color: #3B8D70;
    display: flex;
    margin: 0 auto;
    background: #FFF;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.section-2-statistic a.morebtn p {
    margin-right: 5px
}

.section-2-statistic a.morebtn:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #3B8D70;
    color: #FFF
}

.section-2-statistic a.morebtn:hover line {
    stroke: #FFF
}

.statbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px
}

@media only screen and (max-width: 767px) {
    .statbox {
        flex-direction: column
    }
}

.statbox .left-box {
    width: calc(70% - 15px);
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100)
}

@media only screen and (max-width: 999px) {
    .statbox .left-box {
        width: calc(70% - 10px)
    }
}

@media only screen and (max-width: 767px) {
    .statbox .left-box {
        width: 100%;
        margin-bottom: 20px
    }
}

.statbox .left-box .taxa-item {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.statbox .left-box .taxa-item li {
    cursor: pointer;
    width: calc(100%/21);
    position: relative;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    top: 0px
}

@media only screen and (min-width: 1000px) {
    .statbox .left-box .taxa-item li:hover {
        top: -5px;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

@media only screen and (max-width: 767px) {
    .statbox .left-box .taxa-item li {
        width: calc(100%/8)
    }
}

.statbox .left-box .taxa-item li .iconbox {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 767px) {
    .statbox .left-box .taxa-item li .iconbox {
        height: 35px
    }
}

.statbox .left-box .taxa-item li .iconbox img {
    max-width: 25px;
    max-height: 25px
}

@media only screen and (max-width: 999px) {
    .statbox .left-box .taxa-item li .iconbox img {
        max-width: 20px;
        max-height: 20px
    }
}

@media only screen and (max-width: 767px) {
    .statbox .left-box .taxa-item li .iconbox img {
        max-width: 25px;
        max-height: 25px
    }
}

.statbox .left-box .taxa-item li .color-bar {
    width: 100%;
    height: 4px
}

.statbox .left-box .tree-map {
    width: 100%
}

.statbox .left-box .tree-map img, .statbox .left-box .tree-map canvas, .statbox .left-box .tree-map svg {
    display: block;
    max-width: 100%
}

.statbox .right-box {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    width: calc(30% - 15px);
    background: #FFF;
    border-radius: 10px
}

@media only screen and (max-width: 999px) {
    .statbox .right-box {
        width: calc(30% - 10px)
    }
}

@media only screen and (max-width: 767px) {
    .statbox .right-box {
        width: 100%
    }
}

.statbox .right-box .title-box {
    border-bottom: 1px solid #eee;
    width: 100%;
    text-align: center;
    padding: 10px
}

.statbox .right-box .title-box h3 {
    position: relative;
    display: inline-block;
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    color: #333
}

@media only screen and (max-width: 999px) {
    .statbox .right-box .title-box h3 {
        font-size: 16px
    }
}

.statbox .right-box .title-box h3 span {
    position: absolute;
    width: 100%;
    left: 0;
    background: #3B8D70;
    height: 3px;
    bottom: -12px;
    border-radius: 3px
}

.statbox .right-box .chart-box {
    padding: 15px 20px 15px 20px
}

.statbox .right-box .chart-box img {
    width: 311px
}

.section-3-mapbox {
    position: relative;
    width: 100%;
    margin-bottom: 80px
}

@media only screen and (max-width: 767px) {
    .section-3-mapbox {
        margin-bottom: 40px
    }
}

.section-3-mapbox.vivi .green-bg {
    -moz-animation: index-bg1 1s 0s linear forwards;
    -webkit-animation: index-bg1 1s 0s linear forwards;
    animation: index-bg1 1s 0s linear forwards
}

.section-3-mapbox.vivi .titlebox {
    -moz-animation: bg-top 0.5s 0.3s linear forwards;
    -webkit-animation: bg-top 0.5s 0.3s linear forwards;
    animation: bg-top 0.5s 0.3s linear forwards
}

.section-3-mapbox.vivi .map-box {
    -moz-animation: bg-top 0.5s 0.5s linear forwards;
    -webkit-animation: bg-top 0.5s 0.5s linear forwards;
    animation: bg-top 0.5s 0.5s linear forwards
}

.section-3-mapbox.vivi .bird-ill {
    -moz-animation: bg-top 0.3s 0.8s linear forwards;
    -webkit-animation: bg-top 0.3s 0.8s linear forwards;
    animation: bg-top 0.3s 0.8s linear forwards
}

.section-3-mapbox.vivi .ill-sq {
    -moz-animation: bg-top-right 0.3s 0.8s linear forwards;
    -webkit-animation: bg-top-right 0.3s 0.8s linear forwards;
    animation: bg-top-right 0.3s 0.8s linear forwards
}

.section-3-mapbox .ill-sq {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    position: absolute;
    left: 50%;
    z-index: 3;
    bottom: -100px;
    margin-left: 500px
}

.section-3-mapbox .main-1240 {
    position: relative;
    z-index: 5
}

.section-3-mapbox .bird-ill {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    position: absolute;
    top: -146px;
    z-index: 6;
    left: -52px
}

@media only screen and (max-width: 767px) {
    .section-3-mapbox .bird-ill {
        top: -84px;
        left: -16px
    }
}

.section-3-mapbox .bird-ill img {
    width: 170px
}

@media only screen and (max-width: 767px) {
    .section-3-mapbox .bird-ill img {
        width: 100px;
        height: auto
    }
}

.section-3-mapbox .green-bg {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    position: absolute;
    width: 0vw;
    height: 610px;
    left: 0;
    top: 10px;
    z-index: 3;
    background: url("../image/indexbg2.jpg") bottom left fixed no-repeat;
    background-color: #3B8D70;
    background-size: cover;
    border-radius: 5.2vw 0px 5.2vw 0px
}

.section-3-mapbox .titlebox {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    position: relative;
    z-index: 5
}

.section-3-mapbox .titlebox .title {
    color: #FFF
}

.map-box {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 6px solid #FFF;
    border-radius: 50px 0px 50px 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    position: relative
}

.map-box .evi-box {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    left: 20px
}

.map-box .evi-box .evi-menu {
    display: none;
    position: absolute;
    background: #FFF;
    z-index: 5;
    border-radius: 10px;
    bottom: 50px;
    width: 120px;
    padding: 15px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16)
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox:last-child {
    margin-bottom: 0
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox .radio {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #B2D956;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox .radio img {
    display: none
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox .radio.now {
    background: #B2D956
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox .radio.now img {
    display: block
}

.map-box .evi-box .evi-menu .cus-radio-area .cus-radiobox p {
    font-size: 18px
}

.map-box .evi-box .btnarea {
    width: 50px;
    height: 50px;
    border: 2px solid #FFF;
    border-radius: 5px;
    background: #3B8D70;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .map-box .evi-box .btnarea:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #B2D956
    }
}

.map-box .evi-box .btnarea .menu {
    height: 16px;
    width: 22px;
    position: relative;
    cursor: pointer
}

.map-box .evi-box .btnarea .menu.menu-2:after {
    content: '';
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: 2px;
    position: absolute;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 0.3s 0.3s, opacity 0.3s 0.3s
}

.map-box .evi-box .btnarea .menu.menu-2:before {
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: 2px;
    position: absolute;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 0.3s 0.3s, opacity 0.3s 0.3s
}

.map-box .evi-box .btnarea .menu.menu-2 span {
    height: 2px;
    border-radius: 2px;
    display: block;
    opacity: 1;
    transform: translate3d(0, 7px, 0);
    position: relative
}

.map-box .evi-box .btnarea .menu.menu-2 span:after {
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: 2px;
    position: absolute;
    transform: rotate(0);
    transition: transform 0.3s
}

.map-box .evi-box .btnarea .menu.menu-2 span:before {
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: 2px;
    position: absolute;
    transform: rotate(0);
    transition: transform 0.3s
}

.map-box .evi-box .btnarea .menu.menu-2.active:after {
    transform: translate3d(0, -7px, 0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.15s 0.15s
}

.map-box .evi-box .btnarea .menu.menu-2.active:before {
    transform: translate3d(0, 7px, 0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.15s 0.15s
}

.map-box .evi-box .btnarea .menu.menu-2.active span:after {
    transform: rotate(45deg);
    transition: transform 0.3s 0.3s
}

.map-box .evi-box .btnarea .menu.menu-2.active span:before {
    transform: rotate(-45deg);
    transition: transform 0.3s 0.3s
}

.map-box .card-pop {
    position: absolute;
    width: 240px;
    background: #FFF;
    border-radius: 10px;
    z-index: 15;
    right: 50px;
    top: 50px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16)
}

.map-box .card-pop .topbox {
    padding: 12px 15px
}

.map-box .card-pop .pop-title {
    display: flex;
    align-items: center;
    margin-bottom: 0
}

.map-box .card-pop .pop-title .method {
    font-size: 16px;
    color: #3B8D70;
    margin-left: 7px;
    border: 2px solid #3B8D70;
    border-radius: 15px;
    padding: 0px 10px
}

.map-box .card-pop .contentbox {
    border-top: 1px solid #EEEEEE;
    padding: 15px 15px 30px 15px;
    position: relative
}

.map-box .card-pop .contentbox .more {
    color: #FFF;
    font-size: 14px;
    width: 102px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px 0px 15px 0px;
    background: #3B8D70;
    position: absolute;
    bottom: -17px;
    right: 15px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .map-box .card-pop .contentbox .more:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #B2D956
    }
}

.map-box .card-pop .contentbox ul {
    list-style: none
}

.map-box .card-pop .contentbox ul li {
    font-size: 16px;
    margin-bottom: 4px;
    color: #555
}

.map-box .card-pop .contentbox ul li span {
    color: #3B8D70
}

.map-box .bubble {
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40%;
    right: 30%;
    background: #3B8D70;
    border-radius: 50%;
    z-index: 10;
    color: #FFF;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .map-box .bubble:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #B2D956;
    }
}

.map-box .bubble.now {
    background: #B2D956
}

.map-box .map-canvas-iframe {
    position: relative;
    width: 100%;
    height: 100%
}

.map-box .map-canvas-iframe img, .map-box .map-canvas-iframe canvas, .map-box .map-canvas-iframe svg, .map-box .map-canvas-iframe iframe {
    display: block;
    max-width: 100%;
    z-index: 1;
    position: relative
}

@media only screen and (max-width: 1279px) {
    .map-box .map-canvas-iframe img, .map-box .map-canvas-iframe canvas, .map-box .map-canvas-iframe svg, .map-box .map-canvas-iframe iframe {
        height: 100%;
        max-width: initial
    }
}

.map-box .map-canvas-iframe .pop-title {
    position: relative;
    padding-left: 5px;
    margin-bottom: 10px
}

.map-box .map-canvas-iframe .pop-title p {
    font-family: 'Noto Serif TC', serif;
    font-weight: bold;
    font-size: 18px;
    color: #3B8D70
}

.map-box .map-canvas-iframe .pop-title .line {
    position: absolute;
    left: -15px;
    width: 17px;
    top: 50%;
    height: 1px;
    background: #3B8D70
}

.section-4-news {
    position: relative;
    background: url("../image/indexbg3.jpg") no-repeat top center;
    background-size: cover;
    padding-bottom: 50px;
    z-index: 2
}

.section-4-news.vivi .more {
    -moz-animation: bg-top-right-15 0.3s 0.8s linear forwards;
    -webkit-animation: bg-top-right-15 0.3s 0.8s linear forwards;
    animation: bg-top-right-15 0.3s 0.8s linear forwards
}

.section-4-news.vivi .titlebox {
    -moz-animation: bg-top 0.5s 0s linear forwards;
    -webkit-animation: bg-top 0.5s 0s linear forwards;
    animation: bg-top 0.5s 0s linear forwards
}

.section-4-news.vivi .news-tab {
    -moz-animation: bg-top 0.5s 0.3s linear forwards;
    -webkit-animation: bg-top 0.5s 0.3s linear forwards;
    animation: bg-top 0.5s 0.3s linear forwards
}

.section-4-news.vivi .news-card {
    -moz-animation: bg-top 0.5s 0.5s linear forwards;
    -webkit-animation: bg-top 0.5s 0.5s linear forwards;
    animation: bg-top 0.5s 0.5s linear forwards
}

.section-4-news .titlebox {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100)
}

.section-4-news .frog {
    position: absolute;
    bottom: -38px;
    z-index: 2;
    width: 152px;
    left: 50%;
    margin-left: 129px
}

.section-4-news .frog img {
    width: 100%;
    height: auto
}

.section-4-news .news-tab {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    margin-bottom: 40px
}

@media only screen and (max-width: 767px) {
    .section-4-news .news-tab {
        margin-bottom: 20px;
        overflow: auto;
        padding: 15px 0px
    }
}

.section-4-news .news-tab ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 767px) {
    .section-4-news .news-tab ul {
        justify-content: flex-start
    }
}

.section-4-news .news-tab li {
    border-radius: 15px 0px 15px 0px;
    color: #333;
    font-size: 18px;
    height: 40px;
    padding: 0px 10px;
    min-width: 85px;
    margin: 0px 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFF;
    cursor: pointer;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (max-width: 767px) {
    .section-4-news .news-tab li {
        font-size: 16px;
        min-width: 70px;
        margin: 0px 5px 0px 0px
    }
}

.section-4-news .news-tab li .leaf {
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
    display: none
}

@media only screen and (min-width: 1000px) {
    .section-4-news .news-tab li:hover {
        border: 2px solid #3B8D70;
        color: #3B8D70;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }

    .section-4-news .news-tab li:hover .leaf {
        display: block
    }
}

.section-4-news .news-tab li.now {
    border: 2px solid #3B8D70;
    color: #3B8D70;
    font-weight: bold
}

.section-4-news .news-tab li.now .leaf {
    display: block
}

.section-4-news .news-card {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    display: flex;
    justify-content: space-between;
    margin-bottom: 45px
}

@media only screen and (max-width: 767px) {
    .section-4-news .news-card {
        flex-wrap: wrap;
        flex-direction: column
    }
}

.section-4-news .news-card li {
    width: calc(((1/3)*100%) - 13px);
    list-style: none;
    background: #FFF;
    border-radius: 15px 0px 15px 0px;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1)
}

@media only screen and (max-width: 767px) {
    .section-4-news .news-card li {
        width: 100%;
        margin-bottom: 20px
    }
}

.section-4-news .news-card li .picbox {
    display: block;
    width: 100%;
    padding-bottom: calc((240/380)*100%);
    position: relative;
    border-radius: 15px 0px 15px 0;
    overflow: hidden
}

.section-4-news .news-card li .picbox:hover .imgbox {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.section-4-news .news-card li .picbox .imgbox {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7
}

.section-4-news .news-card li .picbox img {
    max-width: 100%;
    max-height: 100%
}

.section-4-news .news-card li .content {
    padding: 10px
}

.section-4-news .news-card li .content a.title {
    font-size: 20px;
    margin-bottom: 13px;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.section-4-news .news-card li .content a.title:hover {
    color: #3B8D70;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.section-4-news .more {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    width: 270px;
    height: 62px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center
}

.section-4-news .more svg.bg {
    position: absolute;
    z-index: 1
}

.section-4-news .more p {
    color: #3B8D70;
    margin-right: 5px
}

.section-4-news .more p, .section-4-news .more .ar {
    position: relative;
    z-index: 5;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.section-4-news .more path {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.section-4-news .more:hover .bg path {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    fill: #3B8D70
}

.section-4-news .more:hover p {
    color: #FFF;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.section-4-news .more:hover .ar line {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    stroke: #FFF
}

.cat-date {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.cat-date .cate {
    color: #FFF;
    border-radius: 15px;
    font-size: 16px;
    line-height: 16px;
    padding: 7px 12px;
    margin-right: 5px
}

.cat-date .cate.color-red {
    background: #E37373
}

.cat-date .cate.color-org {
    background: #E09A53
}

.cat-date .cate.color-yel {
    background: #E3B332
}

.cat-date .cate.color-gre {
    background: #3B8D70
}

.cat-date .cate.color-blu {
    background: #488395
}

.footer {
    border-top: 4px solid #B2D956;
    background: #3B8D70;
    padding-top: 30px;
    position: relative;
    z-index: 1
}

.footer .logoft {
    margin-bottom: 20px
}

.footer .logoft h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    color: #FFF;
    font-family: 'Noto Serif TC', serif
}

@media only screen and (max-width: 767px) {
    .footer .logoft h2 {
        font-size: 22px
    }
}

.footer .logoft p {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #FFF
}

.footer .short {
    text-align: center;
    color: #FFF;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 15px
}

@media only screen and (max-width: 767px) {
    .footer .short {
        font-size: 14px;
        line-height: 20px
    }
}

.footer .login {
    width: 100px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 17px;
    border: 1px solid #FFF;
    margin: 0 auto;
    background: none;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    margin-bottom: 15px
}

.footer .login p {
    color: #FFF;
    margin-left: 5px
}

@media only screen and (min-width: 1000px) {
    .footer .login:hover {
        background: #FFF;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }

    .footer .login:hover p {
        color: #3B8D70
    }

    .footer .login:hover rect, .footer .login:hover path {
        fill: #3B8D70
    }
}

.footer .bottom-link {
    background: #1B6F51;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: #FFF
}

.footer .bottom-link span {
    display: block;
    margin: 0px 10px
}

.footer .bottom-link a {
    font-size: 16px;
    color: #FFF;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.footer .bottom-link a:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    color: #e4fff6
}

@media only screen and (max-width: 767px) {
    .footer .bottom-link a {
        font-size: 14px
    }
}

.chart-box img, .chart-box canvas, .chart-box svg {
    display: block;
    max-width: 100%
}

.titlebox {
    text-align: center;
    margin-bottom: 35px
}

@media only screen and (max-width: 767px) {
    .titlebox {
        margin-bottom: 25px
    }
}

.titlespan {
    text-align: center;
    margin-bottom: 35px
}

@media only screen and (max-width: 767px) {
    .titlespan {
        margin-bottom: 25px
    }
}

.titlebox .leaf {
    text-align: center;
    width: 41px;
    margin: 0 auto
}

@media only screen and (max-width: 767px) {
    .titlebox .leaf {
        width: 20px
    }
}

.titlebox .leaf img {
    display: block;
    width: 100%
}

.titlebox .title {
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-size: 35px;
    font-weight: bold;
    color: #333;
    position: relative;
    display: inline-block
}

@media only screen and (max-width: 767px) {
    .titlebox .title {
        font-size: 7.4666vw
    }
}

.titlebox .title p {
    position: relative;
    z-index: 3
}

.titlebox .title span {
    color: #3B8D70
}

.titlebox .title .line {
    position: absolute;
    width: 118px;
    height: 12px;
    border-radius: 10px;
    background: #DEECBF;
    z-index: 1;
    right: -6px;
    bottom: 0px
}

@media only screen and (max-width: 767px) {
    .titlebox .title .line {
        width: 25vw
    }
}

.color-bar-01 {
    background: #DB6363
}

.color-bar-02 {
    background: #E37373
}

.color-bar-03 {
    background: #F59A9A
}

.color-bar-04 {
    background: #EBBC40
}

.color-bar-05 {
    background: #F2AF6B
}

.color-bar-06 {
    background: #E8994A
}

.color-bar-07 {
    background: #E9865A
}

.color-bar-08 {
    background: #3A8B6F
}

.color-bar-09 {
    background: #349E78
}

.color-bar-10 {
    background: #5EB56F
}

.color-bar-11 {
    background: #7BB55D
}

.color-bar-12 {
    background: #9AB855
}

.color-bar-13 {
    background: #61BCD8
}

.color-bar-14 {
    background: #51A3C8
}

.color-bar-15 {
    background: #4EABA8
}

.color-bar-16 {
    background: #3E9491
}

.color-bar-17 {
    background: #B07ED1
}

.color-bar-18 {
    background: #8481D8
}

.color-bar-19 {
    background: #6663BB
}

.color-bar-20 {
    background: #4971AE
}

.color-bar-21 {
    background: #397FA8
}

.loadingbox {
    height: 100%;
    width: 100%;
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    z-index: 80
}

.loader {
    height: 20px;
    width: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 20px;
    width: 20px;
    border-radius: 5px 0px 5px 0;
    position: absolute
}

.loader--dot:first-child {
    background-color: #E37373;
    animation-delay: 0.5s
}

.loader--dot:nth-child(2) {
    background-color: #E09A53;
    animation-delay: 0.4s
}

.loader--dot:nth-child(3) {
    background-color: #E3B332;
    animation-delay: 0.3s
}

.loader--dot:nth-child(4) {
    background-color: #B2D956;
    animation-delay: 0.2s
}

.loader--dot:nth-child(5) {
    background-color: #3B8D70;
    animation-delay: 0.1s
}

.loader--dot:nth-child(6) {
    background-color: #488395;
    animation-delay: 0s
}

.loader--text {
    position: absolute;
    top: 200%;
    left: 0;
    right: 0;
    width: 4rem;
    margin: auto;
    font-family: 'Arial', sans-serif;
    letter-spacing: 0
}

.loader--text:after {
    content: "Loading";
    font-weight: bold;
    animation-name: loading-text;
    color: #3B8D70;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    text-transform: uppercase
}

@keyframes loader {
    15% {
        transform: translateX(0)
    }

    45% {
        transform: translateX(230px)
    }

    65% {
        transform: translateX(230px)
    }

    95% {
        transform: translateX(0)
    }
}

@keyframes loading-text {
    0% {
        content: "Loading"
    }

    25% {
        content: "Loading."
    }

    50% {
        content: "Loading.."
    }

    75% {
        content: "Loading..."
    }
}

.page-top {
    margin-top: 80px;
    width: 100%
}

@media only screen and (max-width: 999px) {
    .page-top {
        margin-top: 60px
    }
}

.go-topbtn {
    width: 50px;
    height: 50px;
    background: #3B8D70;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 50;
    right: 15px;
    bottom: 20px;
    border-radius: 50%;
    margin-top: 70px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .go-topbtn:hover {
        background: #B2D956;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

@media only screen and (max-width: 767px) {
    .go-topbtn {
        width: 40px;
        height: 40px;
        right: 10px;
        top: initial;
        margin-top: 0;
        bottom: 10px
    }
}

.go-topbtn svg {
    display: block;
    margin: 0 auto;
    width: 22px;
    height: auto
}

@media only screen and (max-width: 767px) {
    .go-topbtn svg {
        width: 16px
    }
}

.in-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 186px
}

@media only screen and (max-width: 767px) {
    .in-banner {
        height: initial;
        min-height: 100px;
        background: #f7f7f7
    }
}

.in-banner .bg-gray {
    position: absolute;
    width: 100%;
    height: 150px;
    background: #f7f7f7
}

@media only screen and (max-width: 767px) {
    .in-banner .bg-gray {
        height: initial;
        position: relative;
        z-index: 1
    }
}

.in-banner .bg-gray .rel {
    position: relative;
    width: 100%;
    height: 100%
}

.in-banner .bg-gray .titlebox {
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .in-banner .bg-gray .titlebox {
        bottom: initial;
        position: relative;
        padding: 18px 50px
    }
}

.in-banner .bg-gray .titlebox p {
    font-size: 50px;
    padding-bottom: 10px;
    position: relative
}

@media only screen and (max-width: 1279px) {
    .in-banner .bg-gray .titlebox p {
        font-size: 40px
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .bg-gray .titlebox p {
        font-size: 8.5vw;
        letter-spacing: 0
    }
}

.in-banner .bg-gray .titlebox p span {
    height: 4px;
    width: 100%;
    display: block;
    border-radius: 2px;
    background: #3B8D70;
    position: absolute;
    bottom: 0
}

.in-banner .bg-gray .titlebox .leaf {
    width: 25px
}

.in-banner .in-illbox {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0
}

@media only screen and (max-width: 1920px) {
    .in-banner .in-illbox {
        width: 1920px;
        left: 50%;
        margin-left: -960px
    }
}

@media only screen and (max-width: 1599px) {
    .in-banner .in-illbox {
        width: 1800px;
        left: 50%;
        margin-left: -900px
    }
}

@media only screen and (max-width: 1279px) {
    .in-banner .in-illbox {
        width: 1700px;
        left: 50%;
        margin-left: -850px
    }
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox {
        width: 100%;
        left: initial;
        margin: 0
    }
}

.in-banner .in-illbox .sq-left01 {
    width: 265px;
    height: 75px;
    background: #B2D956;
    border-radius: 100px 0px 100px 0;
    position: absolute;
    left: -90px;
    top: 0;
    z-index: 1;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-left01 1s 0s linear forwards;
    -webkit-animation: sq-left01 1s 0s linear forwards;
    animation: sq-left01 1s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-left01 {
        height: 50px;
        width: 150px
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-left01 {
        height: 30px;
        width: 120px
    }
}

.in-banner .in-illbox .sq-left02 {
    height: 75px;
    width: 347px;
    background: #3B8D70;
    border-radius: 100px 0px 100px 0;
    position: absolute;
    left: 110px;
    bottom: 0px;
    z-index: 5;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-left02 0.4s 0.3s linear forwards;
    -webkit-animation: sq-left02 0.4s 0.3s linear forwards;
    animation: sq-left02 0.4s 0.3s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-left02 {
        width: 160px;
        height: 50px;
        left: -2%
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-left02 {
        left: -100px;
        height: 40px
    }
}

.in-banner .in-illbox .grass-left {
    width: 260px;
    position: absolute;
    bottom: 36px;
    z-index: 2;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.8s 0.3s linear forwards;
    -webkit-animation: alpha01 0.8s 0.3s linear forwards;
    animation: alpha01 0.8s 0.3s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .grass-left {
        left: -15%
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .grass-left {
        display: none
    }
}

.in-banner .in-illbox .grass-left img {
    display: block;
    width: 100%;
    height: auto
}

.in-banner .in-illbox .frog {
    width: 111px;
    position: absolute;
    top: -46px;
    z-index: 2;
    left: 66px
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .frog {
        width: 80px
    }
}

.in-banner .in-illbox .frog img {
    width: 100%;
    height: auto;
    display: block
}

.in-banner .in-illbox .sq-left03 {
    height: 30px;
    width: 30px;
    background: #3B8D70;
    border-radius: 15px 0px 15px 0;
    position: absolute;
    left: 480px;
    top: 30px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-left03 1s 0s linear forwards;
    -webkit-animation: sq-left03 1s 0s linear forwards;
    animation: sq-left03 1s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-left03 {
        left: 12%
    }
}

.in-banner .in-illbox .sq-left04 {
    width: 104px;
    height: 35px;
    background: #B2D956;
    border-radius: 100px 0px 100px 0;
    position: absolute;
    left: 520px;
    bottom: 76px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-left03 0.8s 0.3s linear forwards;
    -webkit-animation: sq-left03 0.8s 0.3s linear forwards;
    animation: sq-left03 0.8s 0.3s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-left04 {
        display: none
    }
}

.in-banner .in-illbox .sq-right01 {
    width: 157px;
    height: 59px;
    background: #B2D956;
    border-radius: 100px 0px 100px 0;
    position: absolute;
    right: 269px;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-right01 1s 0s linear forwards;
    -webkit-animation: sq-right01 1s 0s linear forwards;
    animation: sq-right01 1s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-right01 {
        right: 20px;
        height: 50px;
        width: 100px
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-right01 {
        height: 30px;
        width: 37px;
        right: -10px;
        bottom: 0px;
        border-radius: 27px 0px 13px 0
    }
}

.in-banner .in-illbox .sq-right02 {
    width: 107px;
    height: 29px;
    background: #3B8D70;
    border-radius: 100px 0px 100px 0;
    position: absolute;
    right: 390px;
    top: 74px;
    z-index: 1;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-right02 0.5s 0s linear forwards;
    -webkit-animation: sq-right02 0.5s 0s linear forwards;
    animation: sq-right02 0.5s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-right02 {
        right: 15%;
        width: 80px
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-right02 {
        right: -10px;
        width: 70px;
        top: 54px
    }
}

.in-banner .in-illbox .sq-right02 .bird {
    position: absolute;
    width: 65px;
    right: -10px;
    bottom: -27px
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-right02 .bird {
        width: 55px;
        bottom: -23px
    }
}

.in-banner .in-illbox .sq-right02 .bird img {
    width: 100%;
    height: auto
}

.in-banner .in-illbox .sq-right03 {
    width: 30px;
    height: 30px;
    background: #B2D956;
    border-radius: 15px 0px 15px 0;
    position: absolute;
    right: 290px;
    top: 37px;
    z-index: 2;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-right03 0.8s 0s linear forwards;
    -webkit-animation: sq-right03 0.8s 0s linear forwards;
    animation: sq-right03 0.8s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-right03 {
        right: 70px;
        top: -7px
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-right03 {
        display: none
    }
}

.in-banner .in-illbox .sq-right04 {
    width: 392px;
    height: 86px;
    background: #3B8D70;
    border-radius: 100px 0px 100px 0;
    position: absolute;
    right: -146px;
    top: 32px;
    z-index: 1;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: sq-right04 0.5s 0s linear forwards;
    -webkit-animation: sq-right04 0.5s 0s linear forwards;
    animation: sq-right04 0.5s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .sq-right04 {
        width: 150px;
        right: -10%;
        height: 50px
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .sq-right04 {
        display: none
    }
}

.in-banner .in-illbox .grass-right {
    width: 300px;
    position: absolute;
    bottom: 36px;
    right: -10px;
    z-index: 2;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: alpha01 0.8s 0.3s linear forwards;
    -webkit-animation: alpha01 0.8s 0.3s linear forwards;
    animation: alpha01 0.8s 0.3s linear forwards
}

@media only screen and (max-width: 999px) {
    .in-banner .in-illbox .grass-right {
        right: -25%
    }
}

@media only screen and (max-width: 767px) {
    .in-banner .in-illbox .grass-right {
        display: none
    }
}

.in-banner .in-illbox .grass-right img {
    height: auto;
    width: 100%;
    display: block
}

.conetnt-area {
    padding: 50px 0px 60px 0px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0s linear forwards;
    -webkit-animation: bg-top 0.5s 0s linear forwards;
    animation: bg-top 0.5s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .conetnt-area {
        padding: 40px 0px 50px 0px
    }
}

.conetnt-area.field_bg {
    position: relative;
    background: url("../image/indexbg3.jpg") no-repeat center bottom;
    background-size: cover
}

.news-tab-in {
    margin-bottom: 30px
}

@media only screen and (max-width: 767px) {
    .news-tab-in {
        overflow: auto
    }
}

.news-tab-in ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

@media only screen and (max-width: 767px) {
    .news-tab-in ul {
        justify-content: space-between
    }
}

.news-tab-in ul li {
    min-width: 120px;
    padding: 10px 20px;
    border-radius: 15px 0px 15px 0px;
    border: 1px solid #EEE;
    text-align: center;
    list-style: none;
    margin: 0px 5px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    margin-bottom: 10px
}

@media only screen and (max-width: 1279px) {
    .news-tab-in ul li {
        min-width: 100px
    }
}

@media only screen and (max-width: 767px) {
    .news-tab-in ul li {
        width: calc(33.333% - 5px);
        margin: 0;
        margin-bottom: 5px;
        min-width: initial
    }
}

.news-tab-in ul li.now {
    background: #3B8D70;
    border: 1px solid #3B8D70;
    color: #FFF
}

@media only screen and (min-width: 1000px) {
    .news-tab-in ul li:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #3B8D70;
        border: 1px solid #3B8D70;
        color: #FFF
    }
}

.tag-area {
    display: flex;
    flex-wrap: wrap
}

.tag-area a {
    color: #888;
    font-size: 16px;
    display: block;
    background: #F7F7F7;
    border-radius: 5px;
    padding: 3px 5px;
    margin-right: 5px;
    line-height: 30px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    margin-bottom: 5px
}

.tag-area a:hover {
    background: #3B8D70;
    color: #FFF;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-inlist ul {
    margin-bottom: 30px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.news-inlist ul li {
    border-radius: 15px 0 15px 0;
    border: 1px solid #eee;
    width: calc(50% - 10px);
    display: flex;
    margin-bottom: 20px;
    padding: 10px;
    align-items: center;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .news-inlist ul li:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #f7f7f7;
        border: 1px solid #f7f7f7
    }

    .news-inlist ul li:hover .txt-area .tag-area a {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #FFF
    }

    .news-inlist ul li:hover .txt-area .tag-area a:hover {
        background: #3B8D70
    }
}

@media only screen and (max-width: 1279px) {
    .news-inlist ul li {
        width: 100%
    }
}

@media only screen and (max-width: 767px) {
    .news-inlist ul li {
        width: 100%;
        display: block
    }
}

.news-inlist ul li .picbox {
    flex: 0 0 228px;
    display: block;
    width: 228px;
    height: 144px;
    position: relative;
    border-radius: 15px 0px 15px 0;
    overflow: hidden
}

@media only screen and (max-width: 767px) {
    .news-inlist ul li .picbox {
        width: 100%;
        margin-bottom: 10px;
        height: initial;
        flex: 0 0 100%;
        padding-bottom: calc((240/380)*100%)
    }
}

.news-inlist ul li .picbox:hover .imgbox {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.news-inlist ul li .picbox .imgbox {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7
}

.news-inlist ul li .picbox img {
    max-width: 100%;
    max-height: 100%;
    height: auto
}

.news-inlist ul li .txt-area {
    padding: 2px 10px 0px 20px
}

@media only screen and (max-width: 767px) {
    .news-inlist ul li .txt-area {
        padding: 0px
    }
}

.news-inlist ul li .txt-area .cat-date {
    margin-bottom: 5px
}

.news-inlist ul li .txt-area .cat-date p {
    font-size: 16px;
    color: #888
}

.news-inlist ul li .txt-area a.title {
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-inlist ul li .txt-area a.title:hover {
    color: #3B8D70;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.page-num {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

.page-num .pre {
    display: flex;
    align-items: center
}

.page-num .pre img {
    margin-right: 5px
}

.page-num .next {
    display: flex;
    align-items: center
}

.page-num .next img {
    margin-left: 5px
}

.page-num a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 5px 5px 5px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.page-num a:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    color: #3B8D70
}

.page-num .num {
    width: 30px;
    height: 30px;
    border: 1px solid #eee;
    background: #eee;
    font-size: 16px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    border-radius: 10px 0px 10px 0px
}

@media only screen and (min-width: 1000px) {
    .page-num .num:hover {
        background: #3B8D70;
        color: #FFF;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        border: 1px solid #3B8D70
    }
}

.page-num .num.now {
    border: 1px solid #3B8D70;
    background: #3B8D70;
    color: #FFF
}

@media only screen and (max-width: 999px) {
    .news-cont {
        flex-wrap: wrap
    }
}

.news-cont .left-box {
    float: left;
    width: calc(100% - 220px);
    padding-right: 30px
}

@media only screen and (max-width: 999px) {
    .news-cont .left-box {
        padding-right: 0;
        width: 100%;
        margin-bottom: 40px;
        float: initial
    }
}

.news-cont .left-box .cat-date p {
    color: #888
}

.news-cont .left-box .new-titlebox {
    border-bottom: 1px solid #ddd;
    position: relative;
    margin-bottom: 20px
}

.news-cont .left-box .new-titlebox .cat-date {
    margin-bottom: 5px
}

.news-cont .left-box .new-titlebox .line {
    position: absolute;
    z-index: 2;
    width: 125px;
    height: 1px;
    background: #3B8D70;
    bottom: -1px;
    left: 0
}

.news-cont .left-box .new-titlebox h2 {
    font-size: 35px;
    font-family: 'Noto Serif TC', serif;
    padding-bottom: 10px
}

@media only screen and (max-width: 767px) {
    .news-cont .left-box .new-titlebox h2 {
        font-size: 28px;
        line-height: 35px
    }
}

.news-cont .left-box .author-share-area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
    .news-cont .left-box .author-share-area {
        flex-direction: column-reverse
    }
}

.news-cont .left-box .author-share-area .author {
    display: flex
}

.news-cont .left-box .author-share-area .author .mark {
    margin-right: 5px;
    width: 17px;
    height: 17px;
    background: #3B8D70;
    border-radius: 5px 0px 5px 0px;
    margin-top: 5px
}

.news-cont .left-box .author-share-area .author .titleau {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Noto Serif TC', serif
}

.news-cont .left-box .author-share-area .sharebox {
    display: flex;
    align-items: center
}

@media only screen and (max-width: 767px) {
    .news-cont .left-box .author-share-area .sharebox {
        margin-bottom: 10px
    }
}

.news-cont .left-box .author-share-area .sharebox p {
    font-size: 14px;
    color: #888
}

.news-cont .left-box .author-share-area .sharebox a {
    display: block;
    margin-left: 5px
}

.news-cont .left-box .author-share-area .sharebox a circle {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box .author-share-area .sharebox a:hover circle {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        fill: #3B8D70
    }
}

.news-cont .left-box .author-share-area .sharebox a svg {
    display: block
}

.news-cont .left-box .editor-box {
    color: #555;
    line-height: 32px;
    margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
    .news-cont .left-box .editor-box {
        font-size: 16px;
        line-height: 28px
    }
}

.news-cont .left-box .editor-box img, .news-cont .left-box .editor-box iframe {
    max-width: 100%;
    height: auto
}

.news-cont .left-box .editor-box a {
    color: #4C8DA7;
    word-break: break-all
}

.news-cont .left-box .editor-box a:hover {
    color: #3B8D70
}

.news-cont .left-box .tag-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 50px
}

.news-cont .left-box .tag-box img {
    margin-top: 10px
}

.news-cont .left-box .tag-box .tag-area {
    margin-left: 8px
}

.news-cont .left-box .title-second {
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px
}

.news-cont .left-box .title-second h3 {
    font-family: 'Noto Serif TC', serif;
    text-align: center;
    font-size: 20px;
    font-weight: bold
}

.news-cont .left-box .title-second .line {
    background: #3B8D70;
    width: 110px;
    height: 1px;
    bottom: -1px;
    z-index: 2;
    position: absolute;
    left: 50%;
    margin-left: -55px
}

.news-cont .left-box ul.box2 {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between
}

.news-cont .left-box ul.box2 li {
    width: calc(50% - 10px);
    background: #f7f7f7;
    display: flex;
    border-radius: 15px 0px 15px 0px;
    padding: 10px 10px 10px 15px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #EFF6F4
    }
}

@media only screen and (max-width: 767px) {
    .news-cont .left-box ul.box2 li {
        width: 100%
    }
}

.news-cont .left-box ul.box2 li a {
    padding-right: 10px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li a:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        color: #3B8D70
    }
}

.news-cont .left-box ul.box2 li a.right-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 15px 0px 15px 0px;
    background: #3B8D70;
    color: #FFF;
    padding-right: 0;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li a.right-mark:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #B2D956
    }
}

.news-cont .left-box ul.box2 li a.right-mark.pdf {
    background: #E37373
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li a.right-mark.pdf:hover {
        background: #e85858;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.news-cont .left-box ul.box2 li a.right-mark.doc {
    background: #4C93D0
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li a.right-mark.doc:hover {
        background: #3d92dc;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.news-cont .left-box ul.box2 li a.right-mark.xls {
    background: #66A372
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li a.right-mark.xls:hover {
        background: #3fab52;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.news-cont .left-box ul.box2 li a.right-mark.other {
    background: #E09A53
}

@media only screen and (min-width: 1000px) {
    .news-cont .left-box ul.box2 li a.right-mark.other:hover {
        background: #ef9942;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.news-cont .left-box .link-box {
    margin-bottom: 20px
}

.news-cont .left-box .dowload-box {
    margin-bottom: 40px
}

.news-cont .left-box .page-link {
    border-top: 2px solid #3B8D70;
    padding-top: 50px
}

.news-cont .left-box .page-menu {
    border: 1px solid #ddd;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    border-radius: 30px 0px 30px 0px;
    justify-content: space-between;
    overflow: hidden
}

.news-cont .left-box .page-menu li {
    width: calc((1/3)*100%);
    list-style: none;
    position: relative
}

.news-cont .left-box .page-menu li .spline {
    width: 1px;
    height: calc(100% - 20px);
    position: absolute;
    right: 0;
    top: 10px;
    background: #ddd
}

.news-cont .left-box .page-menu li a {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-cont .left-box .page-menu li a p, .news-cont .left-box .page-menu li a line {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-cont .left-box .page-menu li a.pre svg {
    margin-right: 5px
}

.news-cont .left-box .page-menu li a.next svg {
    margin-left: 5px
}

.news-cont .left-box .page-menu li a:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #3B8D70
}

.news-cont .left-box .page-menu li a:hover p {
    color: #FFF;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-cont .left-box .page-menu li a:hover line {
    stroke: #FFF;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-cont .right-rank {
    top: 100px;
    position: sticky;
    float: right;
    width: 220px
}

@media only screen and (max-width: 999px) {
    .news-cont .right-rank {
        width: 100%;
        position: relative;
        float: initial;
        top: initial
    }
}

.news-cont .right-rank .titlearea {
    position: relative;
    border-bottom: 1px solid #ddd
}

.news-cont .right-rank .titlearea h3 {
    padding-bottom: 10px;
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    font-weight: bold
}

.news-cont .right-rank .titlearea .line {
    position: absolute;
    z-index: 2;
    bottom: -1px;
    width: 110px;
    background: #3B8D70;
    height: 1px
}

.news-cont .right-rank .article-rank-list {
    list-style: none
}

.news-cont .right-rank .article-rank-list li {
    border-bottom: 1px solid #ddd;
    padding: 8px 0px 10px 0
}

.news-cont .right-rank .article-rank-list li .title {
    font-size: 16px;
    color: #555;
    line-height: 22px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.news-cont .right-rank .article-rank-list li .title:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    color: #3B8D70
}

.news-cont .right-rank .article-rank-list li .radate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px
}

.news-cont .right-rank .article-rank-list li .radate .date {
    font-size: 12px;
    color: #888
}

.news-cont .right-rank .article-rank-list li .radate .numbox {
    color: #3B8D70;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Noto Serif TC', serif;
    position: relative;
    padding-left: 20px
}

.news-cont .right-rank .article-rank-list li .radate .numbox span {
    font-size: 20px
}

.news-cont .right-rank .article-rank-list li .radate .numbox .linew {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 1px;
    background: #3B8D70
}

.link-inlist {
    padding-top: 30px
}

.link-inlist ul {
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex
}

.link-inlist ul li {
    width: calc(50% - 15px);
    background: #f7f7f7;
    border-radius: 50px 0px 50px 0px;
    list-style: none;
    padding: 20px 50px 20px 210px;
    position: relative;
    min-height: 150px;
    margin-bottom: 70px
}

@media only screen and (max-width: 999px) {
    .link-inlist ul li {
        width: 100%
    }
}

@media only screen and (max-width: 767px) {
    .link-inlist ul li {
        padding: 150px 15px 50px 15px;
        margin-bottom: 60px
    }
}

.link-inlist ul li .cirbox {
    top: -30px;
    left: 30px;
    position: absolute;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    border: 2px solid #3B8D70;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 767px) {
    .link-inlist ul li .cirbox {
        left: 50%;
        margin-left: -82px
    }
}

.link-inlist ul li .cirbox .cir-logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.link-inlist ul li .cirbox .cir-logo img {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.link-inlist ul li .cirbox .cir-logo:hover img {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.link-inlist ul li .cirbox .cir-logo img {
    max-width: 100%;
    max-height: 100%
}

.link-inlist ul li .txt a {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (max-width: 767px) {
    .link-inlist ul li .txt a {
        text-align: center
    }
}

.link-inlist ul li .txt a:hover {
    color: #3B8D70;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.link-inlist ul li .txt p {
    color: #555
}

.link-inlist ul li .linka {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0;
    bottom: 0;
    background: #3B8D70;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px 0px 15px 0px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.link-inlist ul li .linka:hover {
    background: #B2D956;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.field_in .map-box {
    -moz-animation: bg-top 0.5s 0.5s linear forwards;
    -webkit-animation: bg-top 0.5s 0.5s linear forwards;
    animation: bg-top 0.5s 0.5s linear forwards
}

.register-box {
    background: #FFF;
    border-radius: 50px 0px 50px 0;
    padding: 50px 15px;
    position: relative;
    margin-top: 50px
}

@media only screen and (max-width: 767px) {
    .register-box {
        margin-top: 0;
        padding: 30px 15px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.08)
    }
}

.register-box .titlebox {
    position: absolute;
    top: -45px;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .register-box .titlebox {
        position: relative;
        top: 0
    }
}

.register-box .titlebox p {
    font-size: 50px;
    padding-bottom: 10px;
    position: relative
}

@media only screen and (max-width: 1279px) {
    .register-box .titlebox p {
        font-size: 40px
    }
}

@media only screen and (max-width: 767px) {
    .register-box .titlebox p {
        font-size: 8.5vw
    }
}

.register-box .titlebox p span {
    height: 4px;
    width: 100%;
    display: block;
    border-radius: 2px;
    background: #3B8D70;
    position: absolute;
    bottom: 0
}

.register-box .txtc {
    text-align: center;
    margin-bottom: 30px
}

.register-box .formbox {
    max-width: 680px;
    margin: 0 auto
}

.register-box .formbox .item-set {
    display: flex;
    justify-content: space-between
}

@media only screen and (max-width: 767px) {
    .register-box .formbox .item-set {
        display: block
    }
}

.register-box .formbox .item-set .item {
    width: calc(50% - 10px);
    margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
    .register-box .formbox .item-set .item {
        width: 100%
    }
}

.register-box .formbox .item-set .item p {
    font-size: 18px;
    margin-bottom: 5px;
    color: #555
}

.register-box .formbox .item-set .item input {
    background: #F7F7F7;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    padding: 0px 15px
}

.register-box .formbox .send-btn {
    display: flex;
    margin: 0 auto;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    background: #3B8D70;
    color: #FFF;
    min-width: 250px;
    padding: 10px;
    font-size: 18px;
    height: 60px;
    border-radius: 30px 0 30px 0;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.register-box .formbox .send-btn:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #B2D956
}

.field-wtop {
    position: relative;
    z-index: 5;
    padding: 50px 0px 40px 0px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0s linear forwards;
    -webkit-animation: bg-top 0.5s 0s linear forwards;
    animation: bg-top 0.5s 0s linear forwards
}

@media only screen and (max-width: 999px) {
    .field-wtop {
        padding: 40px 0px 40px 0px
    }
}

.field-wtop .main-1240 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.field-wtop .main-1240 .item-box {
    width: calc(((1/3)*100%) - 20px)
}

@media only screen and (max-width: 999px) {
    .field-wtop .main-1240 .item-box:nth-child(1) {
        width: 100%;
        margin-bottom: 30px
    }

    .field-wtop .main-1240 .item-box:nth-child(2) {
        width: calc(50% - 15px)
    }

    .field-wtop .main-1240 .item-box:nth-child(3) {
        width: calc(50% - 15px)
    }
}

@media only screen and (max-width: 767px) {
    .field-wtop .main-1240 .item-box:nth-child(2) {
        width: 100%;
        margin-bottom: 30px
    }

    .field-wtop .main-1240 .item-box:nth-child(3) {
        width: 100%
    }
}

.field-wtop .main-1240 .item-box .map-pic-area {
    border-radius: 50px 0px 50px 0px;
    width: 100%;
    overflow: hidden;
    border: 6px solid #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding-bottom: calc((322/394)*100%);
    position: relative;
    overflow: hidden
}

.field-wtop .main-1240 .item-box .map-pic-area .imgbox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0
}

.field-wtop .main-1240 .item-box .map-pic-area img, .field-wtop .main-1240 .item-box .map-pic-area iframe {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%
}

.field-wtop .main-1240 .item-box .inforbox {
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    margin-bottom: 15px
}

@media only screen and (max-width: 767px) {
    .field-wtop .main-1240 .item-box .inforbox {
        padding-top: 0px
    }
}

.field-wtop .main-1240 .item-box .address {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.field-wtop .main-1240 .item-box .address .item-mark {
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: #3B8D70;
    flex: 0 0 20px;
    margin-top: 14px;
    margin-right: 5px
}

.field-wtop .main-1240 .item-box .address p {
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    color: #333;
    font-weight: bold
}

.field-wtop .main-1240 .item-box .namebox {
    display: flex;
    align-items: center
}

.field-wtop .main-1240 .item-box .namebox h2 {
    font-family: 'Noto Serif TC', serif;
    font-size: 35px;
    font-weight: bold;
    color: #3B8D70
}

.field-wtop .main-1240 .item-box .namebox .method {
    font-size: 16px;
    color: #3B8D70;
    margin-left: 7px;
    border: 2px solid #3B8D70;
    border-radius: 18px;
    padding: 4px 15px
}

.field-wtop .main-1240 .item-box .bottom-set {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 10px 20px
}

.field-wtop .main-1240 .item-box .bottom-set ul li {
    list-style: none;
    margin-bottom: 10px
}

.field-wtop .main-1240 .item-box .bottom-set ul li span {
    color: #3B8D70
}

.field-wtop .main-1240 .item-box .chart-cir {
    padding: 0px 20px
}

.field-wtop .main-1240 .item-box .chart-cir img, .field-wtop .main-1240 .item-box .chart-cir canvas {
    max-width: 100%
}

.field-result {
    background: #f7f7f7;
    padding-top: 30px;
    padding-bottom: 60px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0s linear forwards;
    -webkit-animation: bg-top 0.5s 0s linear forwards;
    animation: bg-top 0.5s 0s linear forwards
}

.field-result .top-title-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px
}

.field-result .top-title-box h3 {
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    color: #333
}

.field-result .top-title-box .sum {
    font-size: 18px;
    color: #888
}

.field-result .table-result {
    width: 100%;
    margin-bottom: 40px;
    overflow: auto

}

/* @media only screen and (max-width: 767px) {
    .field-result .table-result {
        overflow: auto
    }
} */

.field-result .table-result .table-style {
    width: 100%
}

/* @media only screen and (max-width: 767px) {
    .field-result .table-result .table-style {
        width: 1000px
    }
} */

@media only screen and (min-width: 1000px) {
    .field-result .table-result .table-style tr {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }

    .field-result .table-result .table-style tr:hover td {
        background: #FFFFFF;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.field-result .table-result .table-style td {
    text-align: center;
    padding: 12px 10px;
    border-bottom: 1px solid #DDDDDD
}

@media only screen and (max-width: 767px) {
    .field-result .table-result .table-style td {
        font-size: 16px
    }
}

.field-result .table-result .table-style thead tr:first-child td {
    background: #3B8D70;
    color: #FFF
}

.explore-wtop {
    position: relative;
    z-index: 5;
    padding: 50px 0px 30px 0px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0s linear forwards;
    -webkit-animation: bg-top 0.5s 0s linear forwards;
    animation: bg-top 0.5s 0s linear forwards
}

.explore-wtop .exp-select-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px
}

@media only screen and (max-width: 999px) {
    .explore-wtop .exp-select-area {
        margin-bottom: 20px
    }
}

@media only screen and (max-width: 767px) {
    .explore-wtop .exp-select-area {
        margin-bottom: 10px
    }
}

.explore-wtop .form-item {
    width: calc(50% - 30px);
    position: relative
}

@media only screen and (max-width: 999px) {
    .explore-wtop .form-item {
        width: 100%
    }
}

.explore-wtop .form-item .linedash {
    position: absolute;
    border-right: 1px dashed #ddd;
    width: 1px;
    height: calc(100% + 20px);
    top: -20px;
    right: -30px
}

@media only screen and (max-width: 999px) {
    .explore-wtop .form-item .linedash {
        display: none
    }
}

.explore-wtop .form-item .input-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px
}

.explore-wtop .form-item .input-item p {
    margin-right: 20px;
    white-space: nowrap;
    line-height: 40px
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item p {
        font-size: 16px;
        margin-right: 15px
    }
}

.explore-wtop .form-item .input-item .selectbox {
    width: 100%
}

.explore-wtop .form-item .input-item .already_selected {
    margin-top: 10px
}

.explore-wtop .form-item .input-item .already_selected ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap
}

.explore-wtop .form-item .input-item .already_selected ul li {
    padding: 7px 36px 7px 13px;
    position: relative;
    background: #3B8D70;
    border-radius: 20px;
    margin-right: 10px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .explore-wtop .form-item .input-item .already_selected ul li:hover {
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        background: #B2D956
    }
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item .already_selected ul li {
        padding: 5px 30px 5px 10px
    }
}

.explore-wtop .form-item .input-item .already_selected ul li p {
    font-size: 16px;
    line-height: 20px;
    margin-right: 0
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item .already_selected ul li p {
        font-size: 14px
    }
}

.explore-wtop .form-item .input-item .already_selected ul li .xx {
    cursor: pointer;
    position: absolute;
    right: 13px;
    background: none;
    top: 50%;
    margin-top: -7.5px
}

.explore-wtop .form-item .input-item .already_selected ul li .xx img {
    display: block
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item .already_selected ul li .xx img {
        width: 12px
    }
}

.explore-wtop .form-item .input-item .already_selected ul li p {
    color: #FFF
}

.explore-wtop .form-item .input-item select {
    width: 100%;
    font-size: 16px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 40px;
    color: #555;
    padding: 0px 30px 0px 10px;
    background: url("../image/select_mark.svg") no-repeat right 10px top 50%
}

.explore-wtop .form-item .input-item .address-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.explore-wtop .form-item .input-item .address-select select {
    width: calc(((1/3)*100%) - 6px)
}

.explore-wtop .form-item .input-item .time-box {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item .time-box {
        flex-wrap: wrap
    }
}

.explore-wtop .form-item .input-item .time-box span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -5px;
    color: #555
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item .time-box span {
        display: none
    }
}

.explore-wtop .form-item .input-item .time-box .inputbox {
    position: relative;
    width: calc(50% - 10px)
}

@media only screen and (max-width: 767px) {
    .explore-wtop .form-item .input-item .time-box .inputbox {
        width: 100%;
        margin-bottom: 10px
    }
}

.explore-wtop .form-item .input-item .time-box .inputbox .calendar-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    cursor: pointer
}

.explore-wtop .form-item .input-item .time-box input {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 40px;
    padding: 0px 10px 0px 40px;
    width: 100%
}

.explore-wtop .btn-area {
    display: flex;
    justify-content: center
}

.explore-wtop .btn-area button {
    min-width: 130px;
    border: 2px solid #3B8D70;
    color: #3B8D70;
    height: 50px;
    background: #FFF;
    font-size: 20px;
    margin: 0px 10px;
    border-radius: 30px 0px 30px 0px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .explore-wtop .btn-area button:hover {
        background: #3B8D70;
        color: #FFF;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.explore-wtop .btn-area button.greenbtn {
    background: #3B8D70;
    color: #FFF
}

@media only screen and (min-width: 1000px) {
    .explore-wtop .btn-area button.greenbtn:hover {
        background: #B2D956;
        color: #FFF;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s;
        border: 2px solid #B2D956
    }
}

.explore-result {
    background: #f7f7f7;
    padding-top: 40px;
    padding-bottom: 60px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=100);
    -moz-animation: bg-top 0.5s 0s linear forwards;
    -webkit-animation: bg-top 0.5s 0s linear forwards;
    animation: bg-top 0.5s 0s linear forwards
}

.explore-result .statbox {
    margin-bottom: 30px
}

@media only screen and (max-width: 999px) {
    .explore-result .statbox {
        display: block
    }
}

.explore-result .statbox .right-box {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    width: calc(((1 / 3) * 100%) - 15px)
}

@media only screen and (max-width: 999px) {
    .explore-result .statbox .right-box {
        width: 100%
    }
}

.explore-result .statbox .right-box .title-box {
    padding: 15px 10px
}

@media only screen and (max-width: 999px) {
    .explore-result .statbox .right-box .title-box h3 {
        font-size: 20px
    }
}

@media only screen and (max-width: 767px) {
    .explore-result .statbox .right-box .title-box h3 {
        font-size: 16px
    }
}

.explore-result .statbox .right-box .title-box h3 span {
    bottom: -17px
}

.explore-result .statbox .left-box {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    width: calc(((1 / 3) * 100%) * 2 - 15px)
}

@media only screen and (max-width: 999px) {
    .explore-result .statbox .left-box {
        width: 100%;
        margin-bottom: 30px
    }
}

.explore-result .chart-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px
}

@media only screen and (max-width: 999px) {
    .explore-result .chart-item {
        display: block;
        margin-bottom: 0
    }
}

.explore-result .chart-item .title-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 15px 20px
}

@media only screen and (max-width: 767px) {
    .explore-result .chart-item .title-area {
        padding: 15px 15px
    }
}

.explore-result .chart-item .title-area .left-title.center {
    margin: 0 auto
}

.explore-result .chart-item .title-area .left-title h3 {
    position: relative;
    font-size: 20px;
    font-family: 'Noto Serif TC', serif
}

@media only screen and (max-width: 767px) {
    .explore-result .chart-item .title-area .left-title h3 {
        font-size: 16px
    }
}

.explore-result .chart-item .title-area .left-title h3 span {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    background: #3B8D70;
    height: 3px;
    bottom: -17px;
    border-radius: 3px
}

.explore-result .chart-item .title-area .right-unit {
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center
}

@media only screen and (max-width: 767px) {
    .explore-result .chart-item .title-area .right-unit {
        font-size: 12px
    }
}

.explore-result .chart-item .title-area .right-unit p {
    margin-right: 5px
}

.explore-result .chart-item .title-area .right-unit select {
    height: 30px;
    background: #f7f7f7;
    width: 80px;
    border-radius: 15px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .explore-result .chart-item .title-area .right-unit select {
        width: 60px;
        font-size: 14px
    }
}

.explore-result .chart-item .left-3per {
    width: calc(((1/3)*100%)*2 - 15px);
    background: #FFF;
    border-radius: 10px
}

@media only screen and (max-width: 999px) {
    .explore-result .chart-item .left-3per {
        width: 100%;
        margin-bottom: 30px
    }
}

.explore-result .chart-item .right-1per {
    width: calc(((1 / 3) * 100%) - 15px);
    background: #FFF;
    border-radius: 10px
}

@media only screen and (max-width: 999px) {
    .explore-result .chart-item .right-1per {
        width: 100%;
        margin-bottom: 30px
    }
}

.explore-result .chart-item .rl-2per {
    width: calc(50% - 15px);
    background: #FFF;
    border-radius: 10px
}

@media only screen and (max-width: 999px) {
    .explore-result .chart-item .rl-2per {
        width: 100%;
        margin-bottom: 30px
    }
}

.explore-result .chart-item .canvas-area {
    padding: 10px 15px
}

@media only screen and (max-width: 767px) {
    .explore-result .chart-item .canvas-area {
        padding: 15px
    }
}

.explore-result .chart-item .canvas-area .mb-scro {
    width: 100%;
    overflow: auto
}

@media only screen and (max-width: 767px) {
    .explore-result .chart-item .canvas-area .mb-scro img, .explore-result .chart-item .canvas-area .mb-scro .canvas {
        width: 800px;
        max-width: 800px
    }
}

.explore-result .chart-item .canvas-area img, .explore-result .chart-item .canvas-area .canvas {
    max-width: 100%;
    width: 100%
}

.explore-result .sheet-btn {
    background: #3B8D70;
    color: #FFF;
    width: 250px;
    height: 60px;
    border-radius: 30px 0 30px 0px;
    display: block;
    margin: 0 auto;
    font-size: 18px;
    margin-top: 50px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (min-width: 1000px) {
    .explore-result .sheet-btn:hover {
        background: #B2D956;
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        -webkit-transition: all .3s
    }
}

.explore-result .sp-rank {
    padding: 30px 20px 20px 20px
}

@media only screen and (max-width: 767px) {
    .explore-result .sp-rank {
        padding: 20px 15px
    }
}

.explore-result .sp-rank ul {
    list-style: none
}

.explore-result .sp-rank ul li {
    display: flex;
    padding: 5px 20px 5px 5px;
    border-radius: 30px;
    background: #f7f7f7;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.explore-result .sp-rank ul li:nth-child(1) .left-rank .rank-mark, .explore-result .sp-rank ul li:nth-child(2) .left-rank .rank-mark, .explore-result .sp-rank ul li:nth-child(3) .left-rank .rank-mark {
    background: #B2D956
}

@media only screen and (max-width: 767px) {
    .explore-result .sp-rank ul li {
        margin-bottom: 10px
    }
}

.explore-result .sp-rank ul li .right-data {
    font-size: 16px;
    font-weight: bold;
    color: #3B8D70;
    letter-spacing: 0
}

@media only screen and (max-width: 767px) {
    .explore-result .sp-rank ul li .right-data {
        font-size: 16px
    }
}

.explore-result .sp-rank ul li .left-rank {
    display: flex;
    align-items: center
}

.explore-result .sp-rank ul li .left-rank .namebox {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Noto Serif TC', serif;
    color: #555;
    margin-left: 5px
}

@media only screen and (max-width: 767px) {
    .explore-result .sp-rank ul li .left-rank .namebox {
        font-size: 14px
    }
}

.explore-result .sp-rank ul li .left-rank .rank-mark {
    background: #3B8D70;
    color: #FFF;
    font-size: 12px;
    font-family: 'Noto Serif TC', serif;
    font-weight: bold;
    border-radius: 20px;
    height: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px
}

.explore-result .sp-rank ul li .left-rank .rank-mark span {
    font-size: 20px
}

@media only screen and (max-width: 767px) {
    .explore-result .sp-rank ul li .left-rank .rank-mark span {
        font-size: 18px
    }
}

.login_pop {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 60;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 767px) {
    .login_pop {
        padding: 0px 15px
    }
}

.login_pop .center-w {
    width: 100%;
    max-width: 600px;
    padding: 40px 15px;
    background: #FFF;
    border-radius: 50px 0px 50px 0px;
    position: relative
}

@media only screen and (max-width: 767px) {
    .login_pop .center-w {
        padding: 30px 15px 30px 15px
    }
}

.login_pop .center-w .xx {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px
}

.login_pop .center-w .xx line, .login_pop .center-w .xx .cirbg {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.login_pop .center-w .xx:hover svg .cirbg {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    fill: #3B8D70
}

.login_pop .center-w .xx:hover svg line {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    stroke: #FFF
}

.login_pop .center-w .titlebox {
    position: relative;
    margin-bottom: 30px
}

@media only screen and (max-width: 767px) {
    .login_pop .center-w .titlebox {
        margin-bottom: 20px
    }
}

.login_pop .center-w .titlebox h3.title {
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-size: 35px;
    font-weight: bold;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 10px
}

@media only screen and (max-width: 767px) {
    .login_pop .center-w .titlebox h3.title {
        font-size: 7.4666vw
    }
}

.login_pop .center-w .titlebox h3.title p {
    position: relative;
    z-index: 3
}

.login_pop .center-w .titlebox h3.title .line {
    width: 100%;
    bottom: 0px;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: #3B8D70
}

.login_pop .center-w p {
    text-align: center;
    color: #555
}

.login_pop .center-w .google-btn {
    display: flex;
    max-width: 300px;
    height: 68px;
    border-radius: 34px;
    background: #f7f7f7;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

@media only screen and (max-width: 767px) {
    .login_pop .center-w .google-btn {
        height: 55px
    }
}

.login_pop .center-w .google-btn p {
    font-size: 18px
}

.login_pop .center-w .google-btn img {
    margin-right: 10px
}

.login_pop .center-w .google-btn:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #3B8D70
}

.login_pop .center-w .google-btn:hover p {
    color: #FFF
}

.popbox {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 60;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 767px) {
    .popbox {
        padding: 0px 15px
    }
}

.popbox .center-w {
    width: 100%;
    max-width: 400px;
    padding: 30px 15px;
    background: #FFF;
    border-radius: 50px 0px 50px 0px;
    position: relative
}

@media only screen and (max-width: 767px) {
    .popbox .center-w {
        padding: 30px 15px 30px 15px
    }
}

.popbox .center-w p {
    text-align: center;
    margin-bottom: 20px
}

.popbox .center-w .flex-box {
    display: flex;
    justify-content: center
}

.popbox .center-w .flex-box button {
    color: #FFF;
    width: 150px;
    height: 50px;
    border-radius: 25px;
    background: #3B8D70;
    font-size: 18px;
    margin: 0px 5px;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.popbox .center-w .flex-box button:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #B2D956
}

.static-title {
    display: flex
}

.static-title .linemark {
    height: 3px;
    width: 23px;
    background: #3B8D70;
    margin-top: 25px;
    margin-right: 10px;
    border-radius: 3px
}

@media only screen and (max-width: 767px) {
    .static-title .linemark {
        margin-top: 18px
    }
}

.static-title h2 {
    font-size: 35px;
    font-weight: bold;
    font-family: 'Noto Serif TC', serif;
    margin-bottom: 30px
}

@media only screen and (max-width: 767px) {
    .static-title h2 {
        font-size: 26px;
        line-height: normal
    }
}

.static-editor-box {
    font-size: 18px;
    line-height: 30px;
    color: #555
}

@media only screen and (max-width: 767px) {
    .static-editor-box {
        font-size: 16px;
        line-height: 25px
    }
}

.static-editor-box img, .static-editor-box iframe {
    max-width: 100%;
    height: auto
}

.static-editor-box h3 {
    font-family: 'Noto Serif TC', serif;
    color: #3B8D70;
    font-weight: bold;
    font-size: 20px
}

.static-editor-box a {
    color: #4C8DA7;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.static-editor-box a:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    color: #3B8D70
}

.static-editor-box ul {
    padding: 15px 0px 0px 20px
}

.static-editor-box ul li {
    margin-bottom: 5px;
    list-style: disc
}

.static-editor-box ul li::marker {
    color: #3B8D70
}

.edit-btn {
    height: 40px;
    border-radius: 30px;
    background: #E37373;
    color: #FFF;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s
}

.edit-btn:hover {
    transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    background: #d34e4e
}

@-webkit-keyframes bar_line {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-moz-keyframes bar_line {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-ms-keyframes bar_line {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes bar_line {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-webkit-keyframes alpha01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes alpha01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes alpha01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes alpha01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes rotate360 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes rotate360 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-ms-keyframes rotate360 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate360 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate360un {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@-moz-keyframes rotate360un {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@-ms-keyframes rotate360un {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@keyframes rotate360un {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@-webkit-keyframes alpha-scale {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        -moz-transform: scale(.6);
        -ms-transform: scale(.6);
        -o-transform: scale(.6);
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    50% {
        opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=100);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes alpha-scale {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        -moz-transform: scale(.6);
        -ms-transform: scale(.6);
        -o-transform: scale(.6);
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    50% {
        opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=100);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-ms-keyframes alpha-scale {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        -moz-transform: scale(.6);
        -ms-transform: scale(.6);
        -o-transform: scale(.6);
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    50% {
        opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=100);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes alpha-scale {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        -moz-transform: scale(.6);
        -ms-transform: scale(.6);
        -o-transform: scale(.6);
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    50% {
        opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=100);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes index-bg1 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 75.41vw
    }
}

@-moz-keyframes index-bg1 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 75.41vw
    }
}

@-ms-keyframes index-bg1 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 75.41vw
    }
}

@keyframes index-bg1 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 75.41vw
    }
}

@-webkit-keyframes w_100 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 100vw
    }
}

@-moz-keyframes w_100 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 100vw
    }
}

@-ms-keyframes w_100 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 100vw
    }
}

@keyframes w_100 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        width: 0vw
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        width: 100vw
    }
}

@-webkit-keyframes bg-top {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 30px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes bg-top {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 30px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes bg-top {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 30px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes bg-top {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 30px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes bg-top-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes bg-top-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes bg-top-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes bg-top-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes bg-top-right-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes bg-top-right-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes bg-top-right-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes bg-top-right-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes bg-lbottom-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(8px, -15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes bg-lbottom-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(8px, -15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes bg-lbottom-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(8px, -15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes bg-lbottom-15 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(8px, -15px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes float {
    0% {
        transform: translate(0px, 0px)
    }

    50% {
        transform: translate(0px, 25px)
    }

    100% {
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes float {
    0% {
        transform: translate(0px, 0px)
    }

    50% {
        transform: translate(0px, 25px)
    }

    100% {
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes float {
    0% {
        transform: translate(0px, 0px)
    }

    50% {
        transform: translate(0px, 25px)
    }

    100% {
        transform: translate(0px, 0px)
    }
}

@keyframes float {
    0% {
        transform: translate(0px, 0px)
    }

    50% {
        transform: translate(0px, 25px)
    }

    100% {
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes bg-top-let {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes bg-top-let {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes bg-top-let {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes bg-top-let {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes bg-top-right {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes bg-top-right {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes bg-top-right {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes bg-top-right {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes bird1 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    30% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes bird1 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    30% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes bird1 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    30% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes bird1 {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    30% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes bird2 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    10% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-2vw, -5px)
    }

    50% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    60% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-40vw, 15px)
    }

    100% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes bird2 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    10% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-2vw, -5px)
    }

    50% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    60% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-40vw, 15px)
    }

    100% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes bird2 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    10% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-2vw, -5px)
    }

    50% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    60% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-40vw, 15px)
    }

    100% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }
}

@keyframes bird2 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    10% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-2vw, -5px)
    }

    50% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    60% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-40vw, 15px)
    }

    100% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes cbig-hand2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    100% {
        transform: translateY(0)
    }
}

@-moz-keyframes cbig-hand2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    100% {
        transform: translateY(0)
    }
}

@-ms-keyframes cbig-hand2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes cbig-hand2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    100% {
        transform: translateY(0)
    }
}

@-webkit-keyframes bird-move {
    0% {
        transform: translate(40px, 0px);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    25% {
        transform: translate(30px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        transform: translate(20px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    75% {
        transform: translate(10px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes bird-move {
    0% {
        transform: translate(40px, 0px);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    25% {
        transform: translate(30px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        transform: translate(20px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    75% {
        transform: translate(10px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes bird-move {
    0% {
        transform: translate(40px, 0px);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    25% {
        transform: translate(30px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        transform: translate(20px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    75% {
        transform: translate(10px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes bird-move {
    0% {
        transform: translate(40px, 0px);
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100)
    }

    25% {
        transform: translate(30px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    50% {
        transform: translate(20px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    75% {
        transform: translate(10px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes bird {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    25% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-moz-keyframes bird {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    25% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-ms-keyframes bird {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    25% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes bird {
    0% {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    25% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-webkit-keyframes sq-left01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-left01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-left01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-left01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes sq-left02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-left02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-left02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-left02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-60px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes sq-left03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-left03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-left03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-left03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes sq-right01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-right01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-right01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-right01 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes sq-right02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-right02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-right02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-right02 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(30px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes sq-right03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-15px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-right03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-15px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-right03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-15px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-right03 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(15px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-15px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes sq-right04 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(40px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-40px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-moz-keyframes sq-right04 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(40px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-40px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@-ms-keyframes sq-right04 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(40px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-40px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}

@keyframes sq-right04 {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=100);
        transform: translate(40px, 0px)
    }

    33% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }

    66% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(-40px, 0px)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0px, 0px)
    }
}