@charset "UTF-8";

html, body {
    width: 100%;
    min-height: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    text-align: left;
    overflow-x: hidden;
    font-size: 16px;
    color: #0f0f0f;
    background-color: #fff;
    line-height: 1.6;
    font-family: '微軟正黑體','Microsoft JhengHei',sans-serif;
    -webkit-tap-highlight-color: transparent
}

.gsc-wrapper .gsc-adBlock {
    display: none
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .pace:after {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,152,67,0.8);
        z-index: 99999;
        display: block
    }

.pace-inactive {
    display: none
}

#KeyShotVR {
    cursor: e-resize;
    height: 1109px
}

.pace .pace-progress {
    background: #009843;
    position: fixed;
    z-index: 200000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

* {
    -webkit-overflow-scrolling: touch
}

a {
    text-decoration: none;
    color: inherit
}

    a:active, a:hover {
        outline: none
    }

img {
    max-width: 100%;
    width: auto;
    height: auto
}

sup {
    font-size: .8em;
    vertical-align: super
}

h2 {
    font-size: 1.4em;
    font-weight: 700;
    margin-top: 10px
}

h3 {
    font-size: 1.3em;
    font-weight: 700;
    color: #009843
}

h4 {
    font-size: 1.2em;
    font-weight: 700;
    color: #009843
}

h5 {
    font-size: 1.1em;
    font-weight: 700
}

blockquote {
    padding: 10px 0 10px 25px
}

.ulstyle {
    display: block;
    list-style-type: disc;
    padding-left: 40px;
    margin: 1em 0
}

    .ulstyle li a {
        color: #009843
    }

#privacy_policy {
    background-color: #009843;
    display: block;
    display: none;
    position: fixed;
    z-index: 99999;
    color: #fff;
    padding: 50px;
    width: 100%;
    bottom: 0;
    text-align: center;
    opacity: .9
}

    #privacy_policy span {
        border-bottom: 1px solid
    }

    #privacy_policy .agree {
        background-color: #E60012;
        display: inline-block;
        padding: 10px 20px;
        font-weight: 700;
        cursor: pointer
    }

.document {
    max-width: 800px;
    padding: 20px;
    margin: 0px auto;
}

    .document .row {
        background-color: #FFF;
        margin: 10px 0 20px;
        padding: 10px
    }

        .document .row .doc_left {
            text-align: center;
            font-size: 1.2em;
            line-height: 70px
        }

        .document .row .doc_right {
            text-align: right;
            padding-right: 40px
        }

        .document .row a {
            margin: 10px;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 35px;
            background-color: #009843;
            color: #fff;
            text-align: center;
            font-size: 1.2em;
            border-radius: 50%;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

            .document .row a .aft {
                color: #009843;
                font-size: 0
            }

            .document .row a .aft, .document .row a .pre {
                display: inline-block;
                vertical-align: middle
            }

            .document .row a:hover {
                background-color: #E60012;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                .document .row a:hover .pre {
                    color: #E60012;
                    font-size: 0
                }

                .document .row a:hover .aft {
                    color: #fff;
                    font-size: 17px;
                    display: inline
                }

.tabs {
    margin-top: 30px;
    text-align: left
}

    .tabs .subtab {
        border-top: 1px solid #c7c7c7;
        margin-top: 0
    }

        .tabs .subtab object {
            width: 100%;
            height: 1200px
        }

    .tabs UL.horizontal {
        list-style: none outside none;
        margin: 0
    }

    .tabs LI {
        background: #CCC;
        display: inline-block
    }

    .tabs ul li A {
        color: #FFF;
        display: block;
        font-size: 18px;
        font-weight: 700;
        padding: 10px;
        text-decoration: none
    }

    .tabs ul LI:hover {
        background: #E60012;
        border-bottom: 10px solid #87020c !important
    }

        .tabs ul LI:hover A {
            color: #fff
        }

    .tabs .active {
        background: #009843 !important;
        border-bottom: 10px solid #006b03 !important
    }

        .tabs .active:hover {
            border-bottom: 10px solid #006b03 !important
        }

        .tabs .active A {
            color: #fff !important
        }

#spec_block {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #000;
    top: 0;
    filter: alpha(opacity=80) \9;
    background-color: rgba(0,0,0,.8)
}

.spec_img {
    max-width: 1200px;
    height: 95vh;
    margin: 10px auto;
    overflow-y: scroll
}

.subtype_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 290px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #eee;
    max-width: 258px
}

    .subtype_btn h5 {
        color: #009843
    }

    .subtype_btn img {
        margin-top: 10px
    }

    .subtype_btn:hover {
        cursor: pointer;
        background-color: #DDD;
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0
    }

        .subtype_btn:hover a img {
            -webkit-transform: Scale(1.1,1.1);
            -ms-transform: Scale(1.1,1.1);
            transform: Scale(1.1,1.1)
        }

.breadcrumb {
    padding: 20px 0;
    text-align: left;
    color: #009843
}

    .breadcrumb i {
        margin: 0 10px
    }

    .breadcrumb a:hover {
        color: #E60012
    }

input[type="text"] {
    -webkit-appearance: none;
    outline: 0
}

.t {
    display: table
}

    .t > .t-row {
        display: table-row
    }

        .t > .t-row > .t-cell {
            display: table-cell;
            vertical-align: middle;
            border-collapse: collapse;
            margin: 0;
            padding: 0
        }

dl {
    padding: 5px 0;
    font-size: 0
}

    dl dt, dl dd {
        display: inline-block;
        vertical-align: middle;
        font-size: 1rem
    }

.container {
    margin: auto;
    position: relative;
    z-index: 100;
    width: 60vw;
    max-width: 100%
}

.wrap {
    padding: 30px 0
}

section {
    position: relative;
    max-width: 100%
}

.row {
    padding: 10px 0
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .layout {
    position: relative;
    min-height: 1px;
    float: left;
    padding-left: 5px;
    padding-right: 5px
}

.col-12 {
    width: 100%
}

.col-11 {
    width: 91.66666667%
}

.col-10 {
    width: 83.33333333%
}

.col-9 {
    width: 75%
}

.col-8 {
    width: 66.66666667%
}

.col-7 {
    width: 58.33333333%
}

.col-6 {
    width: 50%
}

.col-5 {
    width: 41.66666667%
}

.col-4 {
    width: 33.33333333%
}

.col-3 {
    width: 25%
}

.col-2 {
    width: 16.66666667%
}

.col-1 {
    width: 8.33333333%
}

.pic {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 0;
    display: block
}

    .pic > span {
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        top: 0;
        left: 0
    }

        .pic > span:before {
            content: ' ';
            display: inline-block;
            height: 100%;
            width: 0;
            vertical-align: middle
        }

        .pic > span > img, .pic > span > iframe {
            max-width: 100%;
            width: auto;
            height: auto;
            display: inline-block;
            vertical-align: middle
        }

        .pic > span > iframe {
            width: 100%;
            height: 100%
        }

.preview_title {
    white-space: nowrap;
    max-width: 500px;
    position: absolute;
    margin: 10px 40px;
    z-index: 900;
    text-align: left
}

    .preview_title h1 {
        font-size: 2.5em;
        font-weight: bolder;
        color: #009843
    }

.preview_subtitle {
    font-size: 1.2em;
    color: #009843
}

.green_bottom {
    color: #fff;
    font-size: 20px;
    height: 45px;
    line-height: 45px;
    background-color: #009843;
    margin: 10px;
    width: 250px;
    text-align: center;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -webkit-transition: all .3s ease 0;
    -o-transition: all .3s ease 0;
    transition: all .3s ease 0
}

    .green_bottom:hover {
        background-color: #E60012
    }

.map, .video {
    position: relative;
    width: 100%;
    height: 0
}

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

.cf:after, .row:after, dl:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden
}

.bg-img {
    background-size: cover;
    display: block;
    width: 100%;
    height: 0
}

.editor {
    word-break: break-all
}

    .editor i {
        font-style: italic
    }

    .editor em, .editor b, .editor strong {
        font-weight: 700
    }

    .editor img {
        height: auto !important
    }

    .editor html, .editor address, .editor blockquote, .editor body, .editor dd, .editor div, .editor dl, .editor dt, .editor fieldset, .editor form, .editor frame, .editor frameset, .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6, .editor noframes, .editor ol, .editor p, .editor ul, .editor center, .editor dir, .editor hr, .editor menu, .editor pre {
        display: block
    }

    .editor li {
        display: list-item
    }

    .editor head {
        display: none
    }

    .editor table {
        display: table
    }

    .editor tr {
        display: table-row
    }

    .editor thead {
        display: table-header-group
    }

    .editor tbody {
        display: table-row-group
    }

    .editor tfoot {
        display: table-footer-group
    }

    .editor col {
        display: table-column
    }

    .editor colgroup {
        display: table-column-group
    }

    .editor td, .editor th {
        display: table-cell
    }

    .editor caption {
        display: table-caption
    }

    .editor th {
        font-weight: bolder;
        text-align: center
    }

    .editor caption {
        text-align: center
    }

    .editor body {
        margin: 8px
    }

    .editor h1 {
        font-size: 2em;
        margin: .67em 0
    }

    .editor h2 {
        font-size: 1.5em;
        margin: .75em 0
    }

    .editor h3 {
        font-size: 1.17em;
        margin: .83em 0
    }

    .editor h4, .editor p, .editor blockquote, .editor ul, .editor fieldset, .editor form, .editor ol, .editor dl, .editor dir, .editor menu {
        margin: 1.12em 0
    }

    .editor h5 {
        font-size: .83em;
        margin: 1.5em 0
    }

    .editor h6 {
        font-size: .75em;
        margin: 1.67em 0
    }

    .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6, .editor b, .editor strong {
        font-weight: bolder
    }

    .editor blockquote {
        margin-left: 40px;
        margin-right: 40px
    }

    .editor i, .editor cite, .editor em, .editor var, .editor address {
        font-style: italic
    }

    .editor pre, .editor tt, .editor code, .editor kbd, .editor samp {
        font-family: monospace
    }

    .editor pre {
        white-space: pre
    }

    .editor button, .editor textarea, .editor input, .editor select {
        display: inline-block
    }

    .editor big {
        font-size: 1.17em
    }

    .editor small, .editor sub, .editor sup {
        font-size: .83em
    }

    .editor sub {
        vertical-align: sub
    }

    .editor sup {
        vertical-align: super
    }

    .editor table {
        border-spacing: 2px
    }

    .editor thead, .editor tbody, .editor tfoot {
        vertical-align: middle
    }

    .editor td, .editor th {
        vertical-align: inherit
    }

    .editor s, .editor strike, .editor del {
        text-decoration: line-through
    }

    .editor hr {
        border: 1px inset
    }

    .editor ol, .editor ul, .editor dir, .editor menu, .editor dd {
        margin-left: 40px
    }

    .editor ol {
        list-style-type: decimal
    }

        .editor ol ul, .editor ul ol, .editor ul ul, .editor ol ol {
            margin-top: 0;
            margin-bottom: 0
        }

    .editor u, .editor ins {
        text-decoration: underline
    }

    .editor br:before {
        content: "\A"
    }

    .editor :before, .editor :after {
        white-space: pre-line
    }

    .editor center {
        text-align: center
    }

    .editor :link, .editor :visited {
        text-decoration: underline
    }

    .editor :focus {
        outline: thin dotted invert
    }

    .editor BDO[DIR="ltr"] {
        direction: ltr;
        unicode-bidi: bidi-override
    }

    .editor BDO[DIR="rtl"] {
        direction: rtl;
        unicode-bidi: bidi-override
    }

    .editor [DIR="ltr"] {
        direction: ltr;
        unicode-bidi: embed
    }

    .editor [DIR="rtl"] {
        direction: rtl;
        unicode-bidi: embed
    }

#product_description {
    margin-top: 50px
}

#SearchDiv {
    display: inline-block;
    position: fixed;
    right: 0;
    float: right;
    width: 250px;
    margin: 20px;
    z-index: 9999
}

.form-control {
    display: inline-block;
    float: left;
    width: 80%;
    height: 40px;
    padding: 10px;
    font-size: 1.2em;
    border: 1px solid gray;
    border-radius: 3px 0 0 3px
}

.input-group-btn {
    color: #fff;
    background-color: #009843;
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 2px 10px 20px;
    margin-left: -10px;
    font-size: 1.3em;
    border: 1px solid gray;
    border-left: none;
    border-radius: 0 5px 5px 0
}

    .input-group-btn:hover {
        background-color: #E60012
    }

@media print {
    .editor h1 {
        page-break-before: always
    }

    .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 {
        page-break-after: avoid
    }

    .editor ul, .editor ol, .editor dl {
        page-break-before: avoid
    }
}

.txt-center {
    text-align: center
}

.txt-right {
    text-align: right
}

.inline-item {
    display: inline-block
}

.align-m {
    display: inline-block;
    vertical-align: middle
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap
}

::-moz-selection {
    background: #E60012;
    color: #fff
}

::selection {
    background: #E60012;
    color: #fff
}

.icon {
    display: none
}

input[type=text]:focus, select:focus {
    border: 1px solid #555
}

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

body {
    background-color: #EFEFEF
}

#main {
    background-color: #F3F3F3;
    width: calc(100% - 192px);
    float: right;
    text-align: center;
    min-height: 100%
}

.titles {
    text-align: center;
    margin-top: 2.5%
}

    .titles h1 {
        font-size: 30px;
        font-weight: lighter;
        color: #000;
        position: relative
    }

        .titles h1 span {
            padding-bottom: 10px;
            border-bottom: 2px solid #E60012
        }

.more {
    margin-top: 4%;
    margin-bottom: 3%
}

    .more p {
        color: #009843;
        font-size: 18px;
        margin-bottom: 10px
    }

    .more img {
        -webkit-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
        transform: scaleY(-1)
    }

    .more a:hover p span {
        font-weight: 700
    }

footer {
    background-color: #009843;
    color: #fff;
    font-size: 16px;
    width: 100%;
    padding: 50px 0;
    position: relative;
    text-align: center;
    margin-top: 6%;
    clear: both
}

    footer span {
        display: inline-block;
        margin: 0 10px
    }

        footer span p {
            display: inline-block;
            vertical-align: middle;
            margin: 10px 15px
        }

        footer span i {
            vertical-align: middle
        }

    footer .copy {
        font-size: 15px
    }

#gotop {
    position: fixed;
    bottom: 8%;
    right: 5%;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    font-size: 0;
    -webkit-transition: all .3s ease 0;
    -o-transition: all .3s ease 0;
    transition: all .3s ease 0;
    z-index: 9999
}

    #gotop img {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        vertical-align: middle;
        display: inline-block
    }

    #gotop:before {
        content: '';
        width: 0;
        height: 100%;
        vertical-align: middle;
        display: inline-block
    }

    #gotop:hover {
        background-color: #eee;
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0
    }

p {
    line-height: 170%;
    margin-bottom: 14px
}

ol {
    margin-left: 2em;
    list-style-type: decimal
}

    ol li {
        margin-bottom: 20px
    }

.notice {
    color: #E60012
}

.pic {
    width: 100%;
    height: 0;
    padding-top: 70%;
    display: block;
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
    overflow: hidden
}

    .pic span img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0
    }

#topbanner {
    position: relative
}

    #topbanner .subtitle {
        font-size: 40px;
        color: #fff;
        font-weight: 400;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 110px;
        text-shadow: #000 .1em .1em .2em
    }

.subnav {
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    margin: auto
}

    .subnav ul {
        text-align: center;
        width: 100%
    }

        .subnav ul li {
            min-width: 80px;
            display: inline-block;
            vertical-align: top;
            background-color: rgba(255,255,255,0.7);
            -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
            box-shadow: 0 0 3px rgba(0,0,0,0.2);
            width: auto;
            margin: .5%;
            height: 35px;
            line-height: 35px
        }

            .subnav ul li a {
                padding: 5px;
                font-size: 16px;
                color: #000;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

            .subnav ul li:hover, .subnav ul li.active {
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0;
                background-color: rgba(0,152,67,0.7)
            }

                .subnav ul li:hover a, .subnav ul li.active a {
                    color: #fff
                }

.video-container {
    position: relative;
    padding-bottom: 58.7%;
    padding-top: 30px;
    overflow: hidden
}

    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

.content_withpic {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 5%
}

    .content_withpic .pic_left {
        text-align: center;
        display: inline-block;
        vertical-align: top;
        width: 47%;
        margin-right: 20px;
        font-size: 0
    }

        .content_withpic .pic_left img {
            width: 80%;
            display: inline-block;
            vertical-align: middle
        }

    .content_withpic .content {
        display: inline-block;
        vertical-align: top;
        text-align: left;
        width: 50%
    }

        .content_withpic .content h3 {
            font-size: 1.6em;
            font-weight: bolder;
            color: #000;
            line-height: 30px;
            margin-top: 5%;
            margin-bottom: 5%
        }

.logo_pattern {
    float: left;
    position: absolute;
    margin-left: -27px;
    margin-top: -17px;
	height:70px;
	max-width:220px;
    z-index: 999
}

.hiwinbowbow_righttop {
    position: absolute;
    right: 0;
    margin-top: -64px;
    max-width: 300px
}

.hiwinbowbow_lefttop {
    position: absolute;
    left: 200px;
    margin-top: -50px;
    max-width: 450px
}

.hiwinbowbow_middleright {
    max-width: 233px;
    position: absolute;
    right: -232px;
    margin-top: 150px;
    z-index: 99
}

.hiwinbowbow_bottomleft {
    float: left;
    margin-top: -450px
}

.hiwinbowbow_bottomright {
    float: right;
    margin-top: -400px
}

.me_certification_no {
    top: 200px;
    bottom: 0
}

    .me_certification_no h3 {
        color: #009843;
        font-size: 1.5em
    }

@media only screen and (min-width: 1024px) {
    #product .pd_title {
        text-align: left;
        margin-top: 0;
        font-size: 35px;
        color: #009843
    }

    .rwdlogo {
        display: none
    }

    .page {
        z-index: 9999;
        position: fixed;
        left: 0;
        top: 0
    }

    #menu .node {
        position: relative;
        height: 100vh;
        width: 192px;
        background-color: #fff
    }

        #menu .node .logowrapper {
            padding: 35px 23px 30px;
            display: block;
            background-color: #009843;
            text-align: center;
            width: 100%
        }

            #menu .node .logowrapper img {
                -webkit-transition: all .1s ease .1s;
                -o-transition: all .1s ease .1s;
                transition: all .1s ease .1s
            }

            #menu .node .logowrapper:hover img {
                -webkit-transform: scale(1.05,1.05);
                -ms-transform: scale(1.05,1.05);
                transform: scale(1.05,1.05);
                -webkit-transition: all .1s ease .1s;
                -o-transition: all .1s ease .1s;
                transition: all .1s ease .1s
            }

    #menu .main_list {
        color: #333;
        text-align: center;
        background-color: #fff;
        margin-top: 10px
    }

        #menu .main_list .f_li {
            padding: 5px 0;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0;
            z-index: 1
        }

            #menu .main_list .f_li > a {
                position: relative
            }

            #menu .main_list .f_li:after {
                content: '';
                width: 0;
                height: 1px;
                background-color: #E60012;
                position: absolute;
                left: 0;
                text-align: center;
                bottom: -5px;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

            #menu .main_list .f_li .t_ul {
                opacity: 0;
                height: 100vh;
                z-index: -1;
                color: #fff;
                position: absolute;
                width: 0;
                top: 0;
                left: 0;
                background-color: #009843;
                text-align: left;
                padding-left: 0;
                padding-top: 20px;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                #menu .main_list .f_li .t_ul .t_li {
                    padding: 3px 0
                }

                    #menu .main_list .f_li .t_ul .t_li a {
                        padding-left: 20px
                    }

                    #menu .main_list .f_li .t_ul .t_li .s_ul {
                        display: none;
                        overflow-y: scroll
                    }

                    #menu .main_list .f_li .t_ul .t_li i {
                        margin-left: 5px;
                        font-size: 16px
                    }

            #menu .main_list .f_li.active {
                color: #009843
            }

                #menu .main_list .f_li.active > a:after {
                    width: 65px;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

            #menu .main_list .f_li:hover {
                color: #009843;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                #menu .main_list .f_li:hover > a:after {
                    width: 65px;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

                #menu .main_list .f_li:hover .t_ul {
                    font-size: 16px;
                    -webkit-transition: all .5s ease 0;
                    -o-transition: all .5s ease 0;
                    transition: all .5s ease 0;
                    padding-left: 20px;
                    padding-top: 40px;
                    width: 210px;
                    left: 192px;
                    opacity: 1
                }

                    #menu .main_list .f_li:hover .t_ul .subclass {
                        font-size: 20px
                    }

                        #menu .main_list .f_li:hover .t_ul .subclass a {
                            cursor: default
                        }

                    #menu .main_list .f_li:hover .t_ul .t_li {
                        font-size: 16px;
                        margin: 0;
                        -webkit-transition: all .3s ease 0;
                        -o-transition: all .3s ease 0;
                        transition: all .3s ease 0
                    }

                        #menu .main_list .f_li:hover .t_ul .t_li a {
                            padding: 5px 20px;
                            display: block
                        }

                    #menu .main_list .f_li:hover .t_ul .t_li_active {
                        background-color: rgba(255,255,255,0.2);
                        -webkit-transition: all .3s ease 0;
                        -o-transition: all .3s ease 0;
                        transition: all .3s ease 0
                    }

                        #menu .main_list .f_li:hover .t_ul .t_li_active a {
                            position: relative
                        }

                            #menu .main_list .f_li:hover .t_ul .t_li_active a:after {
                                position: absolute;
                                right: 10px;
                                content: '\f105';
                                font-family: "Font Awesome 5 Free";
                                font-weight: 900;
                                color: #fff;
                                top: 5px;
                                bottom: 5px;
                                margin: auto
                            }

                        #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul {
                            display: block;
                            position: absolute;
                            left: 210px;
                            width: calc(100vw - 210px - 193px);
                            background-color: rgba(255,255,255,1);
                            height: 100vh;
                            color: #009843;
                            top: 0;
                            padding-top: 40px;
                            padding-left: 25%;
                            padding-right: 25%
                        }

                            #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .closebt {
                                position: fixed;
                                right: 50px;
                                top: 50px;
                                color: #009843;
                                font-size: 20px
                            }

                                #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .closebt i {
                                    font-size: 1.5em
                                }

                                    #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .closebt i:hover {
                                        cursor: pointer
                                    }

                            #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li {
                                position: relative;
                                padding-right: 10px;
                                min-height: 1px;
                                display: inline-block;
                                -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
                                box-shadow: 0 0 3px rgba(0,0,0,0.2);
                                background-color: #fff;
                                -webkit-transition: all .3s ease 0;
                                -o-transition: all .3s ease 0;
                                transition: all .3s ease 0;
                                margin: .9%
                            }

                                #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li a {
                                    display: flex;
                                    align-items: center;
                                    padding: 0;
                                    position: relative;
                                    min-height: 80px
                                }

                                #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li img, #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li p {
                                    vertical-align: middle;
                                    display: inline-block
                                }

                                #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li img {
                                    float: left;
                                    max-width: 80px;
                                    margin: 10px
                                }

                                #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li p {
                                    margin-left: 10px;
                                    margin-bottom: 10px;
                                    margin-top: 10px;
                                    font-size: 0
                                }

                                    #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li p span {
                                        line-height: 24px;
                                        display: inline-block;
                                        vertical-align: middle;
                                        font-size: 16px;
                                        color: #333
                                    }

                                    #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li p:after {
                                        content: '';
                                        display: inline-block;
                                        vertical-align: middle;
                                        height: 100%;
                                        width: 0
                                    }

                                #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li:hover {
                                    -webkit-box-shadow: 0 0 20px rgba(0,152,67,0.8);
                                    box-shadow: 0 0 20px rgba(0,152,67,0.8);
                                    -webkit-transition: all .3s ease 0;
                                    -o-transition: all .3s ease 0;
                                    transition: all .3s ease 0
                                }

                                    #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_li:hover p span {
                                        color: #009843
                                    }

                            #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_subclass span h3 {
                                font-size: 20px;
                                color: #000
                            }

                            #menu .main_list .f_li:hover .t_ul .t_li_active .s_ul .s_subclass span h2 {
                                margin-top: -5px;
                                font-size: 20px
                            }

        #menu .main_list .dis_open > a {
            cursor: default
        }

    #menu .social {
        text-align: center;
        margin: 15px 0
    }

        #menu .social span {
            color: #545454;
            font-size: 33px;
            margin: 0 5px;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

            #menu .social span:nth-child(1) {
                color: #E60012;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

            #menu .social span:nth-child(2) {
                color: #4267B2;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

            #menu .social span:nth-child(3) {
                color: #4ECD00;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

    #aspoptgroup {
        font-size: 1.5em;
        font-weight: 700
    }

    .search, .language {
        position: relative;
        margin: 10px 0;
        text-align: center
    }

        .language select {
            padding: 10px;
            width: 80%
        }

        .search #search_box, .search .language_choose, .language #search_box, .language .language_choose {
            font-size: 13px;
            width: 150px;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid #BBB
        }

        .search .language_choose, .language .language_choose {
            color: #6A6A6A
        }

        .search button, .language button {
            background-color: rgba(255,255,255,0);
            border: none;
            color: #535353;
            position: absolute;
            right: 25px;
            top: 0;
            bottom: 0;
            margin: auto
        }

    #menu .member {
        background-color: #F3F3F3;
        padding: 5px 0 10px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%
    }

        #menu .member p {
            margin: 12px 0;
            color: #212121
        }

        #menu .member ul li {
            border: 2px solid #fff;
            background-color: #fff;
            display: inline-block;
            line-height: 30px;
            width: 68px;
            height: 38px;
            color: #333;
            margin: 0 8px;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

            #menu .member ul li:hover, #menu .member ul li.acctive {
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0;
                color: #009843;
                border: 2px solid #009843
            }
}

@media only screen and (max-width: 1680px) {
    .me_certification_no {
        top: 150px
    }

    #product_description {
        margin-top: -50px;
        z-index: 999
    }
}

@media only screen and (max-width: 1440px) {
    .me_certification_no {
        top: 100px
    }

    .hiwinbowbow_bottomleft {
        margin-top: -450px
    }

    .hiwinbowbow_bottomright {
        margin-top: -472px
    }

    #topbanner .subtitle {
        font-size: 35px;
        position: relative;
        color: #009843;
        bottom: 0;
        margin-top: 10px;
        text-shadow: none
    }

    .subnav {
        position: relative;
        bottom: 0;
        margin: 20px auto
    }

    #main .news #news_items .single_news .content {
        width: 50%
    }

    #main .news #news_items .single_news .pic_area {
        width: 50%
    }

    #main .links ul li {
        padding-top: 30%
    }

        #main .links ul li:first-child {
            width: 100%
        }

        #main .links ul li:nth-child(2), #main .links ul li:last-child {
            width: 50%
        }

    #certification .cng li {
        width: 33.3333%
    }

    #global_location .container {
        width: 80%
    }

        #global_location .container .locations li {
            width: calc(33.33% - 10px)
        }

            #global_location .container .locations li .flag {
                display: block;
                margin: 15px auto
            }

            #global_location .container .locations li .country {
                width: 100%;
                text-align: center
            }

    #local_location .container {
        width: 80%
    }

        #local_location .container .locations .sublocation {
            width: calc(33.33% - 10px);
            width: 100%;
            text-align: center
        }

    #main .productlist > ul li {
        width: 30%;
        min-height: 280px
    }
}

@media only screen and (max-width: 1024px) {
    #product_description {
        margin-top: -150px;
        z-index: 999
    }

    .logo_pattern {
        margin-top: -15px
    }

    .hiwinbowbow_lefttop {
        width: 150px;
        margin-top: -70px;
        margin-left: -170px
    }

    .hiwinbowbow_righttop {
        width: 150px;
        margin-top: -70px
    }

    .hiwinbowbow_bottomleft {
        width: 350px;
        margin-top: -315px
    }

    .hiwinbowbow_bottomright {
        width: 350px;
        margin-top: -520px
    }

    .content_withpic .pic_left {
        display: block;
        width: 100%
    }

    .content_withpic .content {
        display: block;
        width: 100%
    }

    #main {
        width: 100%;
        float: none;
        margin-top: 60px
    }

        #main .links ul li, #main .links ul li:nth-child(2), #main .links ul li:last-child {
            width: 100%;
            padding-top: 50%
        }

        #main .news #news_items .single_news .content {
            min-height: 350px
        }

        #main .group ul {
            margin-top: 10%
        }

            #main .group ul li {
                width: 80%;
                float: none;
                display: block;
                margin: 20px auto
            }

                #main .group ul li a {
                    padding: 30px
                }

    #SearchDiv {
        right: 40px;
        top: -10px
    }

    .input-group-btn {
        color: #333;
        background-color: #F3F3F3
    }

        .input-group-btn:hover {
            color: #FFF;
            background-color: #E60012
        }

    .pd_title {
        text-align: left;
        color: #009843;
        font-size: 2em
    }

    .stakeholder #main .container {
        width: 70%
    }

    .stakeholder #main h3 {
        font-size: 24px;
        line-height: 30px
    }

    .stakeholder #main ul li {
        width: 50%
    }

    #global_location .container .locations li {
        width: calc(50% - 20px);
        margin: 5% auto;
        min-width: 0;
        float: none
    }

    #local_location .container .locations .sublocation {
        width: calc(50% - 20px);
        margin: 5% auto;
        min-width: 0;
        float: none
    }

    #certification .cng li {
        width: 50%
    }

    .productlist > ul li {
        width: 33%
    }

        .productlist > ul li a .name span {
            font-size: 20px;
            line-height: 20px
        }

    #product .product .prtop {
        width: 100%;
        margin-top: 1%
    }

        #product .product .prtop .pic_wrap {
            width: 100%
        }

            #product .product .prtop .pic_wrap .pic {
                padding-top: 100%
            }

    #product .product .topright {
        width: 100%;
        margin-top: 1%;
        margin-bottom: 3%;
        text-align: left
    }

        #product .product .topright ul li {
            width: 100%;
            display: inline-block;
            float: none;
            margin: 1%
        }

    #support .container .tech_table {
        width: 80%
    }

    #news .container .grid .gutter-sizer {
        width: 5%
    }

    #news .container .grid .grid-sizer, #news .container .grid .grid-item {
        width: 28%
    }

    #contact .fullscreen #map, #contact .fullscreen .contactperson {
        width: 100%
    }

    #contact .container .formpanel {
        width: 80%
    }

    .page {
        width: 80%;
        max-width: 350px;
        position: fixed;
        top: 38px;
        left: -80%;
        height: 100vh;
        background-color: #00652d;
        z-index: 999;
        -webkit-transition: .5s all 0 ease;
        -o-transition: .5s all 0 ease;
        transition: .5s all 0 ease;
        overflow: scroll
    }

    #menu .node {
        padding: 20px
    }

        #menu .node .logowrapper {
            display: none
        }

        #menu .node .dis_open:after {
            content: '\f105';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 20px;
            color: #fff;
            position: absolute;
            right: 0;
            top: 10px;
            bottom: 20px;
            margin: auto
        }

        #menu .node .oo:after {
            content: '\f105';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 20px;
            color: #fff;
            position: absolute;
            right: 0;
            top: 10px;
            bottom: 20px;
            margin: auto
        }

        #menu .node .xx:after {
            content: '\f107';
            font-family: "Font Awesome 5 Free"
        }

        #menu .node .menuItemType {
            position: relative
        }

            #menu .node .menuItemType a {
                background-color: #00652d;
                color: #FFF;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-size: 16px;
                padding: 10px 0;
                position: relative;
                display: block
            }

                #menu .node .menuItemType a:before {
                    content: '';
                    border: .5px solid rgba(0,79,34,0.3);
                    display: block;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0
                }

        #menu .node .f_li .t_ul, #menu .node .f_li .subclass {
            display: none
        }

            #menu .node .f_li .t_ul .t_li {
                padding-left: 10px
            }

                #menu .node .f_li .t_ul .t_li:last-child {
                    padding-bottom: 0
                }

            #menu .node .f_li .t_ul .s_ul {
                display: none
            }

                #menu .node .f_li .t_ul .s_ul .s_subclass, #menu .node .f_li .t_ul .s_ul .closebt {
                    display: none
                }

                #menu .node .f_li .t_ul .s_ul .s_li {
                    padding-left: 10px
                }

                    #menu .node .f_li .t_ul .s_ul .s_li img {
                        display: none
                    }

        #menu .node .f_li .t_ul_open, #menu .node .f_li .s_ul_open {
            z-index: 999;
            position: relative;
            display: block !important
        }

        #menu .node .social {
            text-align: center;
            margin: 15px 0
        }

            #menu .node .social span {
                color: #fff;
                font-size: 28px;
                margin: 0 5px;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                #menu .node .social span:nth-child(1) {
                    color: #FFF;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

                #menu .node .social span:nth-child(2) {
                    color: #FFF;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

    .node .search, .node .language {
        position: relative;
        margin: 20px 0 10px;
        text-align: center
    }

        .node .search #search_box, .node .search .language_choose, .node .language #search_box, .node .language .language_choose {
            font-size: 13px;
            width: 100%;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid #BBB;
            font-family: 微軟正黑體;
            background-color: #fff
        }

        .node .search .language_choose, .node .language .language_choose {
            font-size: 15px;
            color: #6A6A6A
        }

        .node .search button, .node .language button {
            background-color: rgba(255,255,255,0);
            border: none;
            color: #535353;
            font-size: 12px;
            position: absolute;
            right: 15px;
            top: 0;
            bottom: 0;
            margin: auto
        }

    #menu .node .member {
        font-size: 16px;
        height: 60px;
        background-color: #EFEFEF;
        padding: 7px;
        text-align: center;
        z-index: 999;
        position: fixed;
        width: 80%;
        max-width: 350px;
        left: -80%;
        bottom: 0;
        -webkit-transition: .5s all 0 ease;
        -o-transition: .5s all 0 ease;
        transition: .5s all 0 ease
    }

        #menu .node .member p {
            margin: 12px 0;
            color: #212121;
            display: inline-block;
            vertical-align: middle
        }

        #menu .node .member ul {
            display: inline-block;
            vertical-align: middle
        }

            #menu .node .member ul li {
                background-color: #009843;
                display: inline-block;
                line-height: 30px;
                width: 68px;
                height: 30px;
                color: #333;
                margin: 0 8px;
                color: #fff;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

    .menu_open, .member_open {
        left: 0 !important
    }

    .container {
        width: 85vw
    }

    #history .container .historywrap > li .year, #tech_QA #main .container .historywrap > li .year {
        width: 70px;
        height: 70px;
        font-size: 18px;
        line-height: 70px
    }

    #history .container .historywrap > li:before, #tech_QA #main .container .historywrap > li:before {
        left: 35px
    }

    #history .container .historywrap > li .events, #history .container .historywrap > li .ans, #tech_QA #main .container .historywrap > li .events, #tech_QA #main .container .historywrap > li .ans {
        max-width: calc(100% - 100px)
    }

        #history .container .historywrap > li .events:before, #history .container .historywrap > li .ans:before, #tech_QA #main .container .historywrap > li .events:before, #tech_QA #main .container .historywrap > li .ans:before {
            top: 25px
        }

        #history .container .historywrap > li .events ul .date, #history .container .historywrap > li .ans ul .date, #tech_QA #main .container .historywrap > li .events ul .date, #tech_QA #main .container .historywrap > li .ans ul .date {
            position: relative;
            height: auto
        }

            #history .container .historywrap > li .events ul .date span, #history .container .historywrap > li .ans ul .date span, #tech_QA #main .container .historywrap > li .events ul .date span, #tech_QA #main .container .historywrap > li .ans ul .date span {
                display: inline-block;
                vertical-align: middle
            }

        #history .container .historywrap > li .events ul .eventlist, #history .container .historywrap > li .ans ul .eventlist, #tech_QA #main .container .historywrap > li .events ul .eventlist, #tech_QA #main .container .historywrap > li .ans ul .eventlist {
            margin-left: 0
        }

        #history .container .historywrap > li .events ul {
            padding-left: 20px
        }

    .rwdlogo {
        display: block;
        position: fixed;
        top: 0;
        background-color: #009843;
        width: 100%;
        padding: 10px;
        text-align: left;
        z-index: 1000
    }

    .icon {
        display: block
    }

        .icon #nav-icon1 {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 15px;
            top: 15px;
            z-index: 9999999;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            cursor: pointer
        }

            .icon #nav-icon1 span {
                display: block;
                position: absolute;
                height: 3px;
                width: 100%;
                background: #fff;
                opacity: 1;
                left: 0;
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: .25s ease-in-out;
                -moz-transition: .25s ease-in-out;
                -o-transition: .25s ease-in-out;
                transition: .25s ease-in-out
            }

                .icon #nav-icon1 span:nth-child(1) {
                    top: 0
                }

                .icon #nav-icon1 span:nth-child(2) {
                    top: 9px
                }

                .icon #nav-icon1 span:nth-child(3) {
                    top: 18px
                }

            .icon #nav-icon1.open span:nth-child(1) {
                top: 9px;
                -webkit-transform: rotate(135deg);
                -moz-transform: rotate(135deg);
                -o-transform: rotate(135deg);
                -ms-transform: rotate(135deg);
                transform: rotate(135deg)
            }

            .icon #nav-icon1.open span:nth-child(2) {
                opacity: 0;
                left: -30px
            }

            .icon #nav-icon1.open span:nth-child(3) {
                top: 9px;
                -webkit-transform: rotate(-135deg);
                -moz-transform: rotate(-135deg);
                -o-transform: rotate(-135deg);
                -ms-transform: rotate(-135deg);
                transform: rotate(-135deg)
            }

    .social {
        text-align: center;
        margin: 15px 0
    }

        .social span {
            color: #fff;
            font-size: 28px;
            margin: 0 5px;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

            .social span:first-child:hover {
                color: red;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

            .social span:last-child:hover {
                color: #4267B2;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

    .search, .language {
        position: relative;
        margin: 20px 0 10px;
        text-align: center
    }

        .search #search_box, .search .language_choose, .language #search_box, .language .language_choose {
            font-size: 13px;
            width: 150px;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid #BBB;
            background-color: #fff
        }

        .search .language_choose, .language .language_choose {
            font-size: 15px;
            color: #6A6A6A
        }

        .search button, .language button {
            background-color: rgba(255,255,255,0);
            border: none;
            color: #535353;
            font-size: 12px;
            position: absolute;
            right: 15px;
            top: 0;
            bottom: 0;
            margin: auto
        }

    .member {
        font-size: 16px;
        background-color: #fff;
        padding: 7px;
        text-align: center;
        position: fixed;
        bottom: 0;
        width: 80%;
        left: 0
    }

        .member p {
            margin: 12px 0;
            color: #212121;
            display: inline-block;
            vertical-align: middle
        }

        .member ul {
            display: inline-block;
            vertical-align: middle
        }

            .member ul li {
                background-color: #009843;
                display: inline-block;
                line-height: 30px;
                width: 50px;
                height: 30px;
                color: #333;
                margin: 0 8px;
                color: #fff;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

    #mm-0 {
        background-color: #EFEFEF
    }

    .mm-menu {
        background: #00652d;
        max-width: 350px
    }

        .mm-menu .mm-navbar a, .mm-menu .mm-menu .mm-navbar > * {
            color: #fff
        }

    .mm-listview > li > a {
        color: #FFF;
        padding: 20px
    }

        .mm-listview > li > a:hover, .mm-listview .mm-next.mm-fullsubopen:hover + a {
            color: #009843
        }

            .mm-listview > li > a:hover span {
                color: #009843
            }

    em.mm-counter + a.mm-next {
        width: 50px
    }

    em.mm-counter {
        right: 25px
    }

    .mm-next:after {
        right: 10px
    }

    .mm-listview .mm-next:before {
        right: 10px;
        display: none
    }

    .logowrapper {
        text-align: center;
        display: none
    }

    .s_subclass span, .s_li img, .closebt {
        display: none
    }

    .mm-listview > li.mm-vertical > .mm-next, .mm-vertical .mm-listview > li > .mm-next {
        padding: 30px;
        width: 100%
    }

    .mm-listview > li.subclass {
        display: none
    }

    .mm-next:after {
        right: 20px
    }

    .mm-menu .mm-listview > li .mm-next:after, .mm-menu .mm-btn:after, .mm-menu .mm-btn:before {
        border-color: #fff
    }

    .mm-panels > .mm-panel > .mm-listview {
        margin: 0 -20px 20px
    }

    .mm-panels > .mm-panel:before {
        height: 0
    }

    .mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel {
        padding: 0 0 0 10px
    }

    .mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
        color: #009843;
        background: #fff
    }

    em.mm-counter + a.mm-next + a, em.mm-counter + a.mm-next + span {
        margin-right: 0
    }

    .s_li a p span {
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block
    }

    .me_certification_no {
        top: 0
    }
}

@media only screen and (max-width: 640px) {
    .preview_title {
        margin: -60px 10px 10px;
        position: relative
    }

        .preview_title h1 {
            margin-right: 20px;
            display: inline-block
        }

    .hiwinbowbow_bottomleft {
        width: 250px;
        margin-top: -239px
    }

    .hiwinbowbow_bottomright {
        width: 250px;
        margin-top: -439px
    }

    #KeyShotVR {
        height: 500px
    }

    #product_description {
        margin-top: -250px;
        z-index: 999
    }

    #support .container .troubleshooting {
        width: 100%
    }

    footer {
        margin-top: 12%
    }

    #main .news #news_items .single_news .pic_area, #main .news #news_items .single_news .content {
        width: 100%
    }

    .stakeholder #main .container {
        width: 80%
    }

    .stakeholder #main .recs li {
        width: 100%;
        text-align: center;
        margin-bottom: 3%;
        height: 150px
    }

    .container article {
        margin: 10% 0
    }

        .container article h1 {
            font-size: 25px;
            color: #009843;
            margin-bottom: 15px
        }

    .container .to li {
        width: 100%;
        float: none;
        margin: 20px auto
    }

        .container .to li .wrapper {
            padding: 5%;
            height: 260px
        }

    #news .container .grid .gutter-sizer {
        width: 2%
    }

    #news .container .grid .grid-sizer, #news .container .grid .grid-item {
        width: 45%
    }
}

@media only screen and (max-width: 480px) {
    #product .pd_title {
        text-align: left;
        margin-top: 0;
        font-size: 30px;
        color: #009843;
        text-align: left
    }

    #SearchDiv {
        width: 35%
    }

    .input-group-btn {
        width: 30px;
        font-size: 1.3em
    }

        .input-group-btn i {
            margin-left: -5px
        }

    .titles {
        margin-bottom: 10%
    }

        .titles h1 {
            font-size: 27px
        }

    #main .productlist > ul {
        width: 100%
    }

        #main .productlist > ul li {
            width: 48%;
            min-height: 240px;
            float: left
        }

    #main .news .slick-next:before, #main .news .slick-prev:before {
        content: url(../img/arrow_s.png)
    }

    #main .news .slick-next {
        right: -20px
    }

    #main .news .slick-prev {
        left: -20px
    }

    #global_location .container .locations li {
        width: 100%;
        margin: 5% auto
    }

    #local_location .container .locations .sublocation {
        width: 100%;
        margin: 5% auto
    }

    #history .container, #tech_QA #main .container {
        width: 95%
    }

        #history .container .historywrap > li .year, #tech_QA #main .container .historywrap > li .year {
            width: 50px;
            height: 50px;
            font-size: 13px;
            line-height: 50px
        }

        #history .container .historywrap > li:before, #tech_QA #main .container .historywrap > li:before {
            left: 25px
        }

        #history .container .historywrap > li .events, #history .container .historywrap > li .ans, #tech_QA #main .container .historywrap > li .events, #tech_QA #main .container .historywrap > li .ans {
            max-width: calc(100% - 80px)
        }

            #history .container .historywrap > li .events:before, #history .container .historywrap > li .ans:before, #tech_QA #main .container .historywrap > li .events:before, #tech_QA #main .container .historywrap > li .ans:before {
                top: 10px
            }

    #certification .cng li {
        width: 80%;
        float: none;
        margin: 0 auto
    }

    #product .productlist > ul li {
        width: 48%;
        float: left
    }

    #product .product .topright ul li {
        width: 100%;
        font-size: 16px
    }

    #product .container .prclassnav ul li {
        padding: 5px;
        font-size: 17px;
        margin-right: 10px;
        margin-bottom: 15px
    }

    #support .container .tech_table {
        width: 100%
    }

    #contact .container .formpanel {
        width: 100%
    }

        #contact .container .formpanel dl .half {
            width: 100%
        }

            #contact .container .formpanel dl .half:first-child {
                margin-right: 0
            }

    .stakeholder #main .container .formpanel {
        width: 100%
    }

        .stakeholder #main .container .formpanel dl .half {
            width: 100%
        }

            .stakeholder #main .container .formpanel dl .half:first-child {
                margin-right: 0
            }

    .hiwinbowbow_righttop {
        width: 120px;
        margin-top: -50px
    }

    .hiwinbowbow_lefttop {
        clear: both;
        width: 150px;
        margin-top: -60px
    }

    .hiwinbowbow_bottomleft {
        width: 240px;
        margin-top: -231px
    }

    .hiwinbowbow_bottomright {
        width: 160px;
        margin-top: -455px
    }
}

@media screen and (max-width: 375px) {
    .tabs {
        margin-top: 30px;
        text-align: left
    }

        .tabs .subtab {
            border-top: 1px solid #c7c7c7;
            margin-top: 0
        }

            .tabs .subtab object {
                width: 100%;
                height: 700px
            }

        .tabs UL.horizontal {
            list-style: none outside none;
            margin: 0
        }

        .tabs LI {
            background: #CCC;
            display: block
        }

    #product_description {
        margin-top: -450px;
        z-index: 999
    }

    #main .links ul li, #main .links ul li:nth-child(2), #main .links ul li:last-child {
        padding-top: 100%
    }

    #product .product .topright ul li {
        width: 100%;
        display: block;
        margin: 2% auto
    }

    #SearchDiv {
        display: none
    }

    #support .container .tech_table .items {
        text-align: right
    }

        #support .container .tech_table .items h4 {
            width: 50%
        }

        #support .container .tech_table .items .type {
            text-align: center;
            position: relative;
            right: 15px
        }

    .newslist {
        width: 80vw;
        max-width: 100%
    }

    #news .container .grid .gutter-sizer {
        width: 0
    }

    #news .container .grid .grid-sizer, #news .container .grid .grid-item {
        width: 100%
    }

    #contact .fullscreen #map {
        height: 300px
    }

    #main .productlist > ul li {
        width: 48%
    }
}

.news .slick-list {
    position: relative;
    padding: 0
}

.news .slick-next, .news .slick-prev {
    z-index: 99
}

    .news .slick-next:before, .news .slick-prev:before {
        content: url(../img/arrow.png);
        width: 36px;
        height: 36px;
        background-color: rgba(255,255,255,0)
    }

.news .slick-next {
    right: -40px;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1)
}

.news .slick-prev {
    left: -40px
}

.news #multiple {
    margin-top: 6%;
    position: relative;
    width: 100%
}

    .news #multiple .multiple_items {
        position: relative;
        display: block;
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0;
        text-align: center;
        width: 54vw;
        font-size: 0;
        overflow: hidden
    }

        .news #multiple .multiple_items img {
            display: inline-block;
            vertical-align: middle
        }

        .news #multiple .multiple_items:before {
            content: '';
            height: 0;
            width: 100%;
            display: inline-block;
            vertical-align: middle
        }

.news .slick-slider {
    margin-bottom: 0
}

.news #news_items {
    margin-top: 20px
}

    .news #news_items .single_news .pic_area img {
        width: 100%
    }

    .news #news_items .single_news .content {
        text-align: left;
        padding: 0;
        padding-top: 31%;
        background-color: #fff
    }

        .news #news_items .single_news .content .wrapper {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            padding-left: 5%;
            padding-top: 5%;
            padding-right: 5%;
            height: 100%
        }

            .news #news_items .single_news .content .wrapper .news_class {
                position: absolute;
                right: 0;
                top: 0;
                font-size: 14px;
                color: #fff;
                padding: 3px 7px;
                background-color: #009843
            }

            .news #news_items .single_news .content .wrapper .date {
                color: #009843;
                font-size: 14px
            }

            .news #news_items .single_news .content .wrapper .text {
                font-size: 16px;
                line-height: 26px;
                color: #333
            }

            .news #news_items .single_news .content .wrapper .title {
                font-size: 20px;
                color: #333;
                margin-top: 20px;
                margin-bottom: 20px
            }

            .news #news_items .single_news .content .wrapper .more_g {
                position: absolute;
                right: 0;
                bottom: 0;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                .news #news_items .single_news .content .wrapper .more_g a {
                    background-color: #DDD;
                    color: #333;
                    font-size: 14px;
                    font-family: Raleway;
                    width: 150px;
                    height: 40px;
                    padding: 15px 0;
                    line-height: 14px;
                    text-align: center;
                    display: inline-block
                }

                .news #news_items .single_news .content .wrapper .more_g:hover a {
                    background-color: #009843;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0;
                    color: #fff
                }

.links_icon {
    position: absolute;
    width: 33px;
    margin: auto;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%,0)
}

    .links_icon a, .links_icon span {
        position: relative;
        background-color: #E60012;
        padding: 20px 5px 5px;
        display: inline-block
    }

        .links_icon a i, .links_icon span i {
            font-size: 16px;
            color: #fff
        }

.links {
    margin: 4% auto
}

    .links ul li {
        background-size: cover;
        padding-top: 21%;
        position: relative;
        background-position-x: right;
        text-align: center;
        font-size: 0;
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0;
        -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
        box-shadow: 0 0 1px rgba(0,0,0,0.4)
    }

        .links ul li .wrapper {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
        }

            .links ul li .wrapper span {
                display: inline-block;
                font-size: 16px;
                color: #545454;
                font-family: Raleway
            }

                .links ul li .wrapper span h1 {
                    font-family: '微軟正黑體';
                    margin-bottom: -10px;
                    font-size: 30px;
                    color: #009843;
                    font-weight: lighter
                }

        .links ul li:hover {
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

            .links ul li:hover .wrapper span h1 {
                color: #E60012
            }

.group {
    margin-top: 3%;
    background-color: #fff;
    padding-top: .4%;
    padding-bottom: 4%;
    margin-bottom: 3%
}

    .group ul {
        margin-top: 5%
    }

        .group ul li {
            background: #fff;
            padding: 0 4.5%;
            position: relative
        }

            .group ul li a {
                width: 100%;
				height: 149px;
                display: block;
                padding: 30px 0;
                -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3);
                box-shadow: 0 0 1px rgba(0,0,0,0.3)
            }

                .group ul li a .links_icon {
                    top: -20px
                }

                .group ul li a:hover {
                    -webkit-box-shadow: 0 0 20px rgba(0,152,67,0.8);
                    box-shadow: 0 0 20px rgba(0,152,67,0.8)
                }

.wrapper_h1 {
    font-size: 32px;
    color: #009843;
    margin-bottom: 30px
}

article {
    text-align: left;
    margin: 4% 0
}

    article h1 {
        font-size: 32px;
        color: #009843;
        margin-bottom: 30px
    }

    article p {
        margin-bottom: 20px
    }

.to li {
    padding: 1%
}

    .to li .wrapper {
        padding: 10%;
        min-height: 260px;
        background: -webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0.8)));
        background: -webkit-linear-gradient(top,white 0%,rgba(255,255,255,0.8) 100%);
        background: -o-linear-gradient(top,white 0%,rgba(255,255,255,0.8) 100%);
        background: linear-gradient(to bottom,white 0%,rgba(255,255,255,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ccffffff',GradientType=0)
    }

        .to li .wrapper h2 {
            font-size: 20px;
            color: #009843;
            margin-bottom: 20px
        }

        .to li .wrapper img {
            max-width: 80%
        }

        .to li .wrapper p {
            text-align: left;
            font-size: 19px;
            color: #000;
            line-height: 24px;
            margin-bottom: 20px
        }

.gsc-search-button {
    padding: 10px;
    height: 50px
}

.subnav ul li {
    padding: 0
}

.historywrap {
    margin-top: 6%
}

    .historywrap > li {
        margin-top: 20px;
        position: relative
    }

        .historywrap > li .year {
            width: 100px;
            background-color: #009843;
            height: 100px;
            border-radius: 50%;
            font-family: 'Raleway',sans-serif;
            font-size: 25px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            float: left
        }

        .historywrap > li:before {
            content: '';
            width: 1px;
            height: calc(100% + 20px);
            background-color: #009843;
            position: absolute;
            left: 50px;
            top: 0;
            z-index: -1
        }

        .historywrap > li .events {
            text-align: left;
            background-color: #fff;
            padding: 5%;
            max-width: calc(100% - 150px);
            width: 86%;
            float: right;
            position: relative;
            border: 1px solid #ccc
        }

            .historywrap > li .events:before {
                content: url('blackCarrot.png');
                position: absolute;
                top: 35px;
                left: -29px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 15px 29px 15px 0;
                border-color: transparent #fff transparent transparent
            }

            .historywrap > li .events ul {
                position: relative
            }

                .historywrap > li .events ul .date {
                    font-size: 20px;
                    color: #009843;
                    display: inline-block;
                    vertical-align: top;
                    font-weight: lighter;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0
                }

                    .historywrap > li .events ul .date span {
                        margin-bottom: 4px;
                        display: block
                    }

                    .historywrap > li .events ul .date .line {
                        height: 1px;
                        width: 22px;
                        -webkit-transform: rotate(-45deg);
                        -ms-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        background-color: #009843
                    }

                .historywrap > li .events ul .eventlist {
                    margin-left: 9%;
                    margin-bottom: 20px
                }

                .historywrap > li .events ul li::before {
                    content: ">";
                    color: #E60012;
                    display: inline-block;
                    width: .7em;
                    margin-left: -1em
                }

                .historywrap > li .events ul .eventlist p {
                    display: inline-block;
                    vertical-align: top;
                    font-size: 16px;
                    color: #000;
                    line-height: 25px
                }

        .historywrap > li:last-child:before {
            width: 0
        }

#global_location .container {
    width: 80%
}

#global_location .locations {
    text-align: left;
    margin-bottom: 100px;
    margin-top: 5%;
    width: 100%
}

    #global_location .locations li {
        display: inline-block;
        vertical-align: top;
        min-width: 280px;
        width: calc(25% - 10px);
        margin-bottom: 5%
    }

        #global_location .locations li .flag {
            text-align: center;
            display: inline-block;
            vertical-align: top;
            border-radius: 50%;
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            background-color: #EFEFEF;
            width: 100px;
            height: 100px;
            line-height: 100px;
            margin-right: 20px;
            font-size: 0
        }

            #global_location .locations li .flag img {
                display: inline-block;
                vertical-align: middle
            }

            #global_location .locations li .flag:after {
                content: '';
                height: 100%;
                width: 0;
                display: inline-block;
                vertical-align: middle
            }

        #global_location .locations li .country {
            display: inline-block;
            vertical-align: top;
            text-align: left;
            width: calc(100% - 125px - 25px)
        }

            #global_location .locations li .country h4 {
                font-size: 16px;
                color: #000;
                line-height: 19px;
                margin-bottom: 10px
            }

            #global_location .locations li .country p {
                font-size: 14px;
                color: #878787
            }

            #global_location .locations li .country span {
                margin-top: 50px
            }

                #global_location .locations li .country span i {
                    font-size: 20px;
                    margin-right: 7px;
                    color: #000;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

                #global_location .locations li .country span:hover i {
                    color: #009843;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

#local_location .container {
    width: 70%
}

#local_location .locations {
    text-align: left;
    width: 100%
}

    #local_location .locations .sublocation {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        min-width: 25%;
        width: calc(25% - 10px);
        min-height: 150px;
        margin-bottom: 30px;
        padding: 20px
    }

        #local_location .locations .sublocation h2 {
            font-size: 28px;
            line-height: 34px;
            color: #009843;
            margin-top: 30px;
            margin-bottom: 10px
        }

        #local_location .locations .sublocation p {
            margin-left: 10px;
            text-indent: -10px
        }

        #local_location .locations .sublocation span {
            margin-top: 50px
        }

            #local_location .locations .sublocation span i {
                font-size: 20px;
                margin-right: 7px;
                color: #000;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

            #local_location .locations .sublocation span:hover i {
                color: #009843;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

#certification .cng {
    margin-top: 6%
}

    #certification .cng li {
        padding: 10px
    }

        #certification .cng li .wrapper {
            background-color: #fff;
            min-height: 360px;
            padding: 20px 10px 10px;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 1px rgba(0,0,0,0.3)
        }

        #certification .cng li .pic {
            padding-top: 80%
        }

        #certification .cng li p {
            font-size: 15px;
            color: #000;
            line-height: 22px;
            margin-bottom: 10px;
            margin-top: 25px;
            height: 50px;
            max-height: 50px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

        #certification .cng li .year {
            font-size: 18px;
            color: #009843
        }

#product .slick-slider {
    margin: 0
}

#product .pd_title2 {
    font-size: 20px;
    color: #009843;
    text-align: left
}

#product .prtop {
    width: 40%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 0
}

    #product .prtop .pic_wrap {
        width: 100%;
        background-color: #fff;
        margin-bottom: 20px
    }

        #product .prtop .pic_wrap .pic {
            padding-top: 100%
        }

    #product .prtop a div {
        width: 100%;
        color: #fff;
        background-color: #009843;
        margin-right: 10px;
        padding: 10px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0
    }

        #product .prtop a div:hover {
            background-color: #E60012;
            color: #fff;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0;
            transition: all .3s ease 0
        }

#product .topright {
    margin-top: 1%;
    padding-left: 20px;
    width: 59%;
    text-align: left
}

    #product .topright ul li {
        width: 66%;
        color: #fff;
        font-size: 20px;
        text-align: center;
        height: 45px;
        line-height: 45px;
        background-color: #009843;
        margin: 0 auto 8%;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0
    }

        #product .topright ul li:hover {
            background-color: #E60012;
            color: #fff;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

#product .doubleline {
    text-align: left
}

    #product .doubleline h1 {
        font-size: 30px;
        color: #009843
    }

    #product .doubleline span {
        display: inline-block;
        height: 2px;
        background-color: #E60012;
        width: 100px;
        z-index: 1;
        margin-top: 3px
    }

        #product .doubleline span:last-child {
            width: calc(100% - 100px);
            background-color: #DDD;
            z-index: 0
        }

#product .trait, #product .apply {
    width: 100%;
    margin-bottom: 2%;
    text-align: left
}

    #product .trait section, #product .apply section {
        width: 100%;
        padding: 15px
    }

    #product .trait p, #product .apply p {
        font-size: 16px;
        margin-bottom: 40px
    }

#product section {
    width: 100%
}

#product .slick-next, #product .slick-prev {
    z-index: 99
}

    #product .slick-next:before, #product .slick-prev:before {
        content: url(../img/arrow.png);
        width: 36px;
        height: 36px;
        background-color: rgba(255,255,255,0)
    }

#product .slick-next {
    right: -32px;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1)
}

#product .slick-prev {
    left: -32px
}

#product .prclassnav {
    text-align: left;
    margin-top: 6%;
    margin-bottom: 6%
}

    #product .prclassnav ul li {
        background-color: #009843;
        padding: 5px 10px;
        font-size: 21px;
        color: #fff;
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 20px;
        -webkit-box-shadow: 4px 4px 1px rgba(0,0,0,0.1);
        box-shadow: 4px 4px 1px rgba(0,0,0,0.1);
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0
    }

        #product .prclassnav ul li:hover {
            background-color: #E60012;
            color: #fff;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

.productlist {
    margin-bottom: 6%
}

    .productlist > ul {
        margin-top: 6%
    }

        .productlist > ul li {
            width: 18%;
            min-height: 280px;
            background-color: #fff;
            padding: 10px 10px 0;
            margin: 1%;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 1px rgba(0,0,0,0.3)
        }

            .productlist > ul li a {
                overflow: hidden
            }

                .productlist > ul li a .pic {
                    width: 100%;
                    padding-top: 100%
                }

                    .productlist > ul li a .pic span img {
                        max-width: 100%;
                        max-height: 100%;
                        width: auto;
                        height: auto;
                        display: inline-block;
                        vertical-align: middle;
                        -webkit-transition: all .3s ease 0;
                        -o-transition: all .3s ease 0;
                        transition: all .3s ease 0
                    }

                .productlist > ul li a .name {
                    margin: 15px 0 0;
                    width: 100%;
                    position: relative;
                    text-align: center;
                    font-size: 0
                }

                    .productlist > ul li a .name span {
                        height: 90px;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-align-items: center;
                        align-items: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        line-height: 20px;
                        font-size: 20px;
                        color: #009843
                    }

                .productlist > ul li a .button {
                    position: relative;
                    overflow: hidden;
                    width: 42px;
                    margin: 0 auto
                }

                    .productlist > ul li a .button span {
                        display: block;
                        position: relative;
                        background-color: #009843;
                        border-radius: 50%;
                        width: 42px;
                        height: 42px;
                        bottom: -20px
                    }

                        .productlist > ul li a .button span i {
                            color: #fff;
                            margin-top: 5px;
                            font-size: 18px
                        }

            .productlist > ul li:hover {
                background-color: #DDD;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                .productlist > ul li:hover a .pic span img {
                    -webkit-transform: Scale(1.1,1.1);
                    -ms-transform: Scale(1.1,1.1);
                    transform: Scale(1.1,1.1)
                }

                .productlist > ul li:hover a .name span {
                    color: #E60012
                }

                .productlist > ul li:hover a .button span {
                    background-color: #E60012
                }

#news {
    position: relative
}

    #news .subnav {
        width: 33%
    }

        #news .subnav ul li {
            width: 22%;
            margin: 1.1%
        }

    #news .grid {
        margin: 6% auto 0
    }

        #news .grid .gutter-sizer {
            width: 5.3%
        }

        #news .grid .grid-sizer, #news .grid .grid-item {
            width: 21%;
            min-height: 310px;
            background-color: #fff;
            padding: 0 10px;
            text-align: left;
            margin: 2%;
            -webkit-transition: all .3s ease 0;
            -o-transition: all .3s ease 0;
            transition: all .3s ease 0
        }

            #news .grid .grid-sizer a .date, #news .grid .grid-item a .date {
                font-size: 13px;
                font-weight: lighter;
                color: #E60012;
                margin: 10px 0
            }

            #news .grid .grid-sizer a .imgwrap, #news .grid .grid-item a .imgwrap {
                margin: 10px 0;
                margin-bottom: 5px
            }

                #news .grid .grid-sizer a .imgwrap img, #news .grid .grid-item a .imgwrap img {
                    -webkit-transform: Scale(1,1);
                    -ms-transform: Scale(1,1);
                    transform: Scale(1,1);
                    width: 100%
                }

            #news .grid .grid-sizer a h2, #news .grid .grid-item a h2 {
                margin: 20px 0;
                font-size: 18px;
                color: #333;
                line-height: 21px
            }

            #news .grid .grid-sizer a .button, #news .grid .grid-item a .button {
                position: relative;
                overflow: hidden;
                width: 42px;
                margin: 0 auto;
                text-align: center
            }

                #news .grid .grid-sizer a .button span, #news .grid .grid-item a .button span {
                    display: block;
                    position: relative;
                    background-color: #009843;
                    border-radius: 50%;
                    width: 42px;
                    height: 42px;
                    bottom: -20px
                }

                    #news .grid .grid-sizer a .button span i, #news .grid .grid-item a .button span i {
                        color: #fff;
                        margin-top: 5px;
                        font-size: 18px
                    }

            #news .grid .grid-sizer:hover, #news .grid .grid-item:hover {
                background-color: #DDD;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                #news .grid .grid-sizer:hover a .imgwrap img, #news .grid .grid-item:hover a .imgwrap img {
                    -webkit-transform: Scale(1.05,1.05);
                    -ms-transform: Scale(1.05,1.05);
                    transform: Scale(1.05,1.05)
                }

                #news .grid .grid-sizer:hover a h2, #news .grid .grid-item:hover a h2 {
                    color: #009843
                }

                #news .grid .grid-sizer:hover a .button span, #news .grid .grid-item:hover a .button span {
                    background-color: #E60012
                }

    #news .more {
        margin-top: 0
    }

    #news .news_detail {
        text-align: left;
        margin-top: 3%;
        margin-bottom: 6%
    }

        #news .news_detail h1 {
            margin-bottom: 3%;
            font-size: 30px;
            color: #009843
        }

        #news .news_detail .navbar .shares {
            float: left
        }

            #news .news_detail .navbar .shares span {
                margin-right: 10px;
                vertical-align: middle;
                cursor: pointer
            }

                #news .news_detail .navbar .shares span i {
                    font-size: 35px;
                    color: #666
                }

                #news .news_detail .navbar .shares span:nth-child(1) i {
                    color: #365899
                }

                #news .news_detail .navbar .shares span:nth-child(2) i {
                    color: #DB4437
                }

                #news .news_detail .navbar .shares span:nth-child(3) i {
                    color: #3CB034
                }

        #news .news_detail .navbar .info {
            float: right;
            text-align: right
        }

            #news .news_detail .navbar .info .date {
                color: #009843;
                font-size: 16px;
                font-weight: lighter
            }

            #news .news_detail .navbar .info .author {
                font-size: 16px;
                color: #111
            }

        #news .news_detail .text {
            margin-top: 3%;
            font-size: 16px;
            color: #111;
            line-height: 29px
        }

            #news .news_detail .text p {
                margin-bottom: 30px
            }

            #news .news_detail .text img {
                margin: 10px
            }

    #news .prev, #news .next {
        position: absolute;
        top: 50%;
        margin: auto
    }

        #news .prev .thumb, #news .prev .artinfo, #news .next .thumb, #news .next .artinfo {
            display: none;
            vertical-align: middle
        }

        #news .prev .artinfo, #news .next .artinfo {
            width: 200px;
            line-height: 26px;
            margin-top: -20px
        }

            #news .prev .artinfo h4, #news .next .artinfo h4 {
                color: #009843;
                font-size: 16px
            }

            #news .prev .artinfo p, #news .next .artinfo p {
                line-height: 20px;
                font-size: 13px;
                color: #545454
            }

        #news .prev:hover, #news .next:hover {
            max-width: 300px;
            background-color: #fff;
            -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
            box-shadow: 0 0 4px rgba(0,0,0,0.4)
        }

            #news .prev:hover img, #news .prev:hover .thumb, #news .prev:hover .artinfo, #news .next:hover img, #news .next:hover .thumb, #news .next:hover .artinfo {
                display: inline-block
            }

            #news .prev:hover img, #news .next:hover img {
                top: 0;
                opacity: .9
            }

    #news .prev {
        left: -50px
    }

        #news .prev .artinfo {
            margin-left: 30px
        }

    #news .next {
        direction: rtl;
        right: -50px;
        text-align: right
    }

        #news .next .artinfo {
            margin-right: 5px
        }

        #news .next img {
            -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            transform: scaleX(-1)
        }

        #news .next p {
            margin-right: 5px
        }

    #news .backbt {
        margin-top: 10px;
        text-align: right;
        clear: both
    }

        #news .backbt img {
            -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            transform: scaleX(-1)
        }

        #news .backbt .back {
            font-size: 16px;
            margin-top: 3px;
            color: #000
        }

        #news .backbt:hover .back {
            color: #009843
        }

#support {
    text-align: center
}

    #support .tech_table {
        width: 80%;
        margin: 6% auto
    }

    #support .troubleshooting {
        display: inline-block;
        position: relative;
        float: left;
        width: 50%;
        margin: 6% auto;
        padding: 20px;
        text-align: left;
        height: 600px
    }

    #support .tech_title {
        font-size: 30px;
        color: #009843;
        text-align: left;
        margin-bottom: 3%
    }

        #support .tech_title span {
            color: #E60012
        }

    #support h2 {
        color: #009843;
        font-size: 18px;
        margin-top: 10px
    }

    #support .tech_table .items {
        background-color: #fff;
        height: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        position: relative;
        vertical-align: middle
    }

        #support .tech_table .items h4 {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: absolute;
            width: 33.333%;
            height: 60px;
            text-align: left;
            margin-left: 20px;
            line-height: 120%
        }

        #support .tech_table .items .type {
            margin: 0 5px
        }

            #support .tech_table .items .type a {
                display: inline-block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                background-color: #009843;
                color: #fff;
                font-size: 17px;
                border-radius: 50%;
                -webkit-transition: all .3s ease 0;
                -o-transition: all .3s ease 0;
                transition: all .3s ease 0
            }

                #support .tech_table .items .type a .aft {
                    color: #009843;
                    font-size: 0
                }

                #support .tech_table .items .type a .aft, #support .tech_table .items .type a .pre {
                    display: inline-block;
                    vertical-align: middle
                }

                #support .tech_table .items .type a:hover {
                    background-color: #E60012;
                    -webkit-transition: all .3s ease 0;
                    -o-transition: all .3s ease 0;
                    transition: all .3s ease 0
                }

                    #support .tech_table .items .type a:hover .pre {
                        color: #E60012;
                        font-size: 0
                    }

                    #support .tech_table .items .type a:hover .aft {
                        color: #fff;
                        font-size: 17px;
                        display: inline
                    }

#tech_QA #main .historywrap {
    margin-top: 6%;
    margin-bottom: 6%
}

    #tech_QA #main .historywrap > li {
        margin-top: 20px
    }

        #tech_QA #main .historywrap > li .year {
            width: 100px;
            background-color: #009843;
            height: 100px;
            border-radius: 50%;
            font-family: 'Raleway',sans-serif;
            font-size: 25px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            float: left
        }

            #tech_QA #main .historywrap > li .year:after {
                content: '';
                width: 1px;
                height: 100%
            }

        #tech_QA #main .historywrap > li .events {
            cursor: pointer;
            text-align: left;
            background-color: #fff;
            padding: 3%;
            width: 86%;
            float: right;
            position: relative;
            font-size: 20px;
            line-height: 30px
        }

            #tech_QA #main .historywrap > li .events:before {
                content: '';
                position: absolute;
                top: 35px;
                left: -29px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 15px 29px 15px 0;
                -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
                box-shadow: 0 0 20px rgba(0,0,0,0.2);
                border-color: transparent #fff transparent transparent
            }

            #tech_QA #main .historywrap > li .events ul {
                position: relative
            }

                #tech_QA #main .historywrap > li .events ul .date {
                    font-size: 20px;
                    color: #009843;
                    display: inline-block;
                    vertical-align: top;
                    font-weight: lighter;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0
                }

                    #tech_QA #main .historywrap > li .events ul .date span {
                        margin-bottom: 4px;
                        display: block
                    }

                    #tech_QA #main .historywrap > li .events ul .date .line {
                        height: 1px;
                        width: 22px;
                        -webkit-transform: rotate(-45deg);
                        -ms-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        background-color: #009843
                    }

                #tech_QA #main .historywrap > li .events ul .eventlist {
                    margin-left: 9%
                }

                    #tech_QA #main .historywrap > li .events ul .eventlist p {
                        display: inline-block;
                        vertical-align: top;
                        font-size: 16px;
                        color: #000;
                        line-height: 25px
                    }

        #tech_QA #main .historywrap > li .ans {
            display: none;
            clear: both;
            padding: 2.5%;
            width: 86%;
            max-width: calc(100% - 150px);
            float: right;
            text-align: left;
            font-size: 17px;
            color: #009843;
            line-height: 25px
        }

#contact .titles {
    margin-top: 60px;
    margin-bottom: 8%
}

    #contact.titles h1 {
        font-size: 27px
    }

#contact .fullscreen {
    width: 100%
}

#contact #map {
    width: 66%;
    height: 498px;
    overflow: visible
}

#contact .contactperson {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

    #contact .contactperson .wrap {
        width: 100%;
        padding: 0
    }

        #contact .contactperson .wrap .locas {
            font-size: 16px;
            color: #000;
            margin: 7% 0
        }

            #contact .contactperson .wrap .locas span {
                color: #009843;
                font-weight: 700
            }

            #contact .contactperson .wrap .locas p {
                letter-spacing: 1px
            }

#contact .contactform {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.formstyle {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

#contact .contactform .title {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.formpanel {
    width: 100%;
    padding: 3% 5%;
    margin: 6% auto;
    text-align: left;
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4)
}

    .formpanel p {
        font-size: 16px;
        color: #000;
        margin: 10px 0
    }

    .formpanel label {
        font-size: 16px;
        color: #000;
        margin: 10px 20px 10px 5px
    }

    .formpanel p img {
        margin-left: 5px;
        cursor: pointer
    }

    .formpanel p a {
        font-size: 14px;
        text-decoration: underline
    }

    .formpanel dl div {
        display: inline-block
    }

        .formpanel dl div p {
            font-size: 15px;
            margin: 0 0 5px;
            color: #1F1F1F
        }

    .formpanel dl .half {
        width: 47%
    }

        .formpanel dl .half:first-child {
            margin-right: 5%
        }

    .formpanel dl .full {
        width: 100%
    }

    .formpanel dl .form-cell {
        width: 100%;
        border: 1px solid #CCC;
        height: 30px;
        line-height: 30px;
        padding: 5px 8px;
        color: #666;
        background-color: #EFEFEF
    }

    .formpanel dl textarea {
        width: 100%;
        border: 1px solid #CCC;
        padding: 5px 8px;
        color: #666;
        background-color: #EFEFEF;
        height: 90px;
        min-height: 90px;
        max-width: 100%
    }

    .formpanel .sendbt {
        margin-top: 10px;
        text-align: right
    }

        .formpanel .sendbt .send {
            font-size: 16px;
            margin-top: 3px;
            color: #000
        }

        .formpanel .sendbt:hover .send {
            color: #009843
        }

.stakeholder .nono {
    width: 80%
}

.stakeholder .formpanel {
    margin-top: 20px
}

.stakeholder #main h3 {
    margin: 6% auto;
    font-size: 28px;
    line-height: 34px;
    font-weight: lighter;
    color: #000;
    text-align: justify;
    text-justify: inter-ideograph
}

.stakeholder #main .titles {
    margin-bottom: 3%
}

.stakeholder #main .recs {
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .stakeholder #main .recs li {
        min-height: 200px;
        margin-bottom: 6%
    }

        .stakeholder #main .recs li h2 {
            font-size: 28px;
            line-height: 34px;
            font-weight: lighter;
            color: #009843;
            margin-bottom: 20px
        }

        .stakeholder #main .recs li p {
            font-size: 20px;
            font-weight: lighter;
            color: #000;
            margin: -5px 0
        }

            .stakeholder #main .recs li p i {
                font-size: 17px;
                width: 30px;
                text-align: center;
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -3px
            }

.stakeholder #main footer {
    margin-top: 3%
}

.nono {
    width: 80%
}

    .nono .recs .sect {
        min-height: 170px;
        margin-bottom: 3%;
        text-align: left
    }

        .nono .recs .sect h2 {
            font-size: 28px;
            line-height: 34px;
            font-weight: lighter;
            color: #009843;
            margin-bottom: 20px
        }

        .nono .recs .sect p i {
            margin-right: 10px
        }

.ca_table {
    margin: 2% auto;
    background-color: #FFF;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4)
}

    .ca_table tr:hover {
        background-color: #e0e0e0
    }

    .ca_table th {
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        background-color: #009843;
        color: #fff;
        padding: 10px;
        text-align: center
    }

    .ca_table td {
        border: 1px solid #CCC;
        padding: 5px 10px
    }

    .ca_table .dan {
        text-align: right;
        border: none
    }

    .ca_table #cpyear {
        font-size: 25px
    }

#member_area {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #000;
    top: 0;
    filter: alpha(opacity=80) \9;
    background-color: rgba(0,0,0,.8)
}

.member_content {
    margin: 0 auto;
    margin-top: 10%;
    padding: 10px 30px 30px;
    max-width: 350px;
    width: 100% !important;
    background-color: #F7F7F7;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
    overflow: hidden
}

    .member_content h1 {
        text-align: center;
        font-size: 2em;
        margin-bottom: 30px
    }

    .member_content .or {
        text-align: center;
        font-size: 2em;
        margin-bottom: 30px 0
    }

    .member_content input[type=submit] {
        width: 100%;
        display: block;
        margin-bottom: 10px;
        position: relative
    }

    .member_content input[type=text], input[type=password] {
        height: 44px;
        font-size: 16px;
        width: 100%;
        margin-bottom: 10px;
        -webkit-appearance: none;
        background: #fff;
        border: 1px solid #d9d9d9;
        border-top: 1px solid silver;
        padding: 0 8px;
        box-sizing: border-box;
        -moz-box-sizing: border-box
    }

        .member_content input[type=text]:hover, input[type=password]:hover {
            border: 1px solid #b9b9b9;
            border-top: 1px solid #a0a0a0;
            -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
        }

    .member_content .social-buttons {
        margin: 12px 0;
        text-align: center
    }

        .member_content .social-buttons a {
            padding: 15px
        }

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373
}

.btn-fb {
    color: #fff;
    background-color: #3b5998
}

    .btn-fb:hover {
        color: #fff;
        background-color: #496ebc
    }

.btn-gplus {
    color: #fff;
    background-color: #DB4437
}

    .btn-gplus:hover {
        color: #fff;
        background-color: #e85247
    }

.btn1 {
    text-align: right;
    cursor: pointer;
    font-size: 2em;
    color: #009843
}

.loginmodal {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    height: 36px;
    padding: 0 8px
}

.loginmodal-submit {
    display: inline-block;
    position: relative;
    border: 0;
    color: #fff;
    text-align: center;
    width: 49%;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    background-color: #009843;
    padding: 5px 0;
    font-size: 1.5em;
    cursor: pointer
}

    .loginmodal-submit:hover {
        border: 0;
        text-shadow: 0 1px rgba(0,0,0,0.3);
        background-color: #E60012
    }

.loginmodal-container a {
    text-decoration: none;
    color: #666;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    opacity: .6;
    transition: opacity ease .5s
}

.login-help {
    font-size: 12px
}

.inline_button {
    font-size: 1.5em;
    font-weight: 700;
    padding: 10px;
    margin: 20px;
    color: #fff;
    background-color: #009843;
    line-height: 70px
}

    .inline_button:hover {
        background-color: #E60012
    }

.btn {
    padding: 10px;
    color: #fff;
    background-color: #009843
}

    .btn:hover {
        background-color: #E60012
    }

.info_ca {
    padding: 10px;
    background: #FFF;
    border: solid 1px #696969;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3)
}

.image_btn {
    background-color: #009843;
    padding: 5px 10px;
    font-size: 21px;
    color: #fff;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 20px;
    -webkit-box-shadow: 4px 4px 1px rgba(0,0,0,0.1);
    box-shadow: 4px 4px 1px rgba(0,0,0,0.1);
    -webkit-transition: all .3s ease 0;
    -o-transition: all .3s ease 0;
    transition: all .3s ease 0;
    border: none;
}

    .image_btn:hover {
        background-color: #E60012;
        color: #fff;
        -webkit-transition: all .3s ease 0;
        -o-transition: all .3s ease 0;
        transition: all .3s ease 0;
        cursor: pointer
    }