/*common*/


/* footer part */

html,
body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -52px;
}

#wrapper:after {
    content: "";
    display: block;
    height: 52px;
}


/*  */

body {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif, Arial, "微軟正黑體";
    min-width: 1000px;
    font-size: 13px;
    line-height: 16px;
}

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

.black {
    color: #000;
}

.green {
    color: #189f84;
}

.green2 {
    color: #11826b
}

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?1jkugw');
    src: url('fonts/icomoon.eot?1jkugw#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1jkugw') format('truetype'), url('fonts/icomoon.woff?1jkugw') format('woff'), url('fonts/icomoon.svg?1jkugw#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-uniF100:before {
    content: "\f100";
}

.icon-uniF101:before {
    content: "\f101";
}

.icon-uniF104:before {
    content: "\f104";
}

.icon-uniF105:before {
    content: "\f105";
}

.clearfix {
    clear: both;
    display: block;
}

.clearfix:before {
    clear: both;
    display: block;
}

.clearfix:after {
    clear: both;
    display: block;
}

#header .green_bar {
    height: 8px;
    width: 100%;
    background: #189F84;
}

.wrapper {
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}

#header .logo {
    margin: 8px 0 11px 0;
    float: left;
    background: url("../images/logo.jpg")no-repeat center;
    height: 87px;
    width: 194px;
}

#header .right_side {
    float: right;
    margin-top: 46px;
}

#header .right_side table td {
    vertical-align: middle;
    padding: 0 5px;
    color: #727272;
    font-size: 13px;
}

#header .right_side table td a {
    color: #727272;
}

#header .right_side table td span {
    font-size: 9px;
}

#header .right_side table td a:hover,
#header .right_side table td a.active {
    color: #21a185;
    text-decoration: underline;
}

#header .shadow {
    background: url("../images/shadow_top.png") repeat-x;
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    top: 114px;
    z-index: 9;
}

#content .index_bg {
    background: url("../images/bg.jpg") center no-repeat;
    height: 474px;
    width: 100%;
    min-width: 1000px;
}

#content .left {
    float: left;
}

#content .right {
    float: right;
    position: relative;
}

#content .index_link {
    margin: 477px 25px 0 25px;
    float: left;
}

#content .index_link .btn {
    display: block;
    text-align: center;
    width: 230px;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 0;
    margin-top: 9px;
    border-radius: 5px;
        line-height: 17px;
    font-family: 'icomoon', 'Open Sans', sans-serif, Arial, "微軟正黑體";
    border: 1px solid #dfdfdf;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbfbfb+0,fbfbfb+50,ebebeb+51,ebebeb+100 */
    background: #fbfbfb;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fbfbfb 0%, #fbfbfb 50%, #ebebeb 51%, #ebebeb 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fbfbfb 0%, #fbfbfb 50%, #ebebeb 51%, #ebebeb 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fbfbfb 0%, #fbfbfb 50%, #ebebeb 51%, #ebebeb 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#ebebeb', GradientType=0);
    /* IE6-9 */
}

#content .index_link.last {
    margin: 477px 0px 0 25px;
}

.small_arrow {
    font-size: 17px;
    vertical-align: middle;
    height: 14px;
    position: absolute;
    width: 10px;
    text-align: right;
    font-weight: normal;
    display: inline-block;
    margin: 1px 0 0 5px;
}

#content .index_link .btn:hover .small_arrow {
    animation: more_animate 0.2s linear infinite alternate;
}

@keyframes more_animate {
    0% {
        width: 10px;
    }
    100% {
        width: 13px;
    }
}

#content .right .menu {
    width: 164px;
    position: relative;
}

#content .right .menu a {
    width: 142px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+40,f2f2f2+94 */
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 40%, #f2f2f2 94%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 40%, #f2f2f2 94%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 40%, #f2f2f2 94%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
    /* IE6-9 */
    padding: 30px 0 30px 22px;
    text-align: left;
    display: block;
    color: #000;
    font-size: 15px;
    line-height: 17px;
}

#content .right .menu a.active,
#content .right .menu a:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#35a589+26,0e8263+94 */
    background: #35a589;
    /* Old browsers */
    background: -moz-linear-gradient(top, #35a589 26%, #0e8263 94%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #35a589 26%, #0e8263 94%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #35a589 26%, #0e8263 94%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#35a589', endColorstr='#0e8263', GradientType=0);
    /* IE6-9 */
    color: #fff;
}

#content .right .menu:after {
    content: "";
    display: block;
    position: absolute;
    right: -27px;
    background: url("../images/shadow_right.png") no-repeat;
    top: 0;
    width: 27px;
    height: 600px;
}

#content .right .menu:before {
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    background: url("../images/shadow_left.png") no-repeat;
    top: 0;
    width: 27px;
    height: 600px;
}

#content .right .overview {
    background-color: #39929e;
    width: 142px;
    padding: 30px 0 30px 22px;
    text-align: left;
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 17px;
    position: relative;
}

#content .right .overview:hover {
    background-color: #1e737f;
}

#content .right .overview:hover:before {
    left: -32px;
    transition: all 0.3s;
}

#content .right .overview:before {
    width: 35px;
    height: 35px;
    content: "\f100";
    background: url("../images/ball.png");
    font-family: 'icomoon';
    position: absolute;
    left: -27px;
    top: 14px;
    color: #3A929E;
    font-size: 24px;
    vertical-align: middle;
    /* text-align: center; */
    padding: 15px 0 0 14px;
    animation: more_animate2 0.3s linear infinite alternate;
}

@keyframes more_animate2 {
    0% {
        padding-left: 15px;
    }
    100% {
        padding-left: 18px;
    }
}

#content .right .map {
    background: url("../images/map.jpg");
    width: 149px;
    height: 104px;
    margin: 20px 0 0 5px;
}

.action_hide {
    position: absolute;
    right: 0;
}

.action_show {
    padding: 20px;
    position: absolute;
    right: 0;
    background-color: #FFF;
    height: 647px;
    background: url("../images/pop_bg.jpg") 218px 392px no-repeat #fff;
    display: none;
}

.action_show p {
    line-height: 14px;
    font-size: 13px;
    color: #5C5C5C;
    font-family: Myriad Pro;
    width: 384px;
    text-align: justify;
}

.animate_fix {
    width: 164px;
    height: 600px;
    overflow: hidden;
}

#content .right .action_show .right_shadow {
    display: block;
    position: absolute;
    right: -27px;
    background: url("../images/shadow_right.png");
    top: 0;
    width: 27px;
    height: 742px;
}

#content .right .action_show .left_shadow {
    display: block;
    position: absolute;
    left: -10px;
    background: url("../images/shadow_left.png");
    top: 0;
    width: 27px;
    height: 742px;
}

#content .right h1 {
    width: 100%;
    font-size: 15px;
    border-bottom: #DFDFDF 1px solid;
    font-weight: normal;
    font-family: 'Open Sans';
    color: #21a185;
    padding: 0px 0 10px 0;
    margin: 0;
    width: 384px;
}

#content .right .close_btn {
    position: absolute;
    left: -27px;
    top: 400px;
    background: url("");
    width: 35px;
    height: 35px;
    background: url("../images/ball.png");
    font-family: 'icomoon';
    position: absolute;
    color: #3A929E;
    font-size: 24px;
    vertical-align: middle;
    /* text-align: center; */
    padding: 15px 0 0 18px;
    cursor: pointer;
}

#content .right .close_btn:hover {
    animation: more_animate2 0.3s linear infinite alternate;
}

#footer {
    background-color: #21A185;
    padding: 10px 0;
    width: 100%;
    color: #bbf3e7;
}

#footer .left a {
    color: #bbf3e7;
    font-size: 12px;
}

#footer .left a:hover {
    color: #fff;
}

#footer .left {
    float: left;
}

#footer .right {
    float: right;
}

#footer .right {
    font-size: 12px;
    text-align: right;
}

#footer .right a {
    color: #FFF;
}

#footer .right a:hover {
    color: #FFF;
    text-decoration: underline;
}

#content .sub_menu {
    float: left;
    margin-top: 20px;
    width: 123px;
    text-align: right;
    
}

#content .about_banner {
    background: url("../images/about_banner.jpg") no-repeat;
    height: 172px;
    width: 847px;
    display: block;
}

#content .sub_menu h2 {
    font-family: Myriad Pro;
    font-size: 15px;
    color: #09578d;
    text-align: right;
    border-bottom: #09578d 1px solid;
    padding-bottom: 5px;
}

#content .sub_menu a {
    color: #535353;
    font-size: 13px;
    line-height: 15px;
    margin: 10px 0 0 0;
    border-bottom: #e4e4e4 1px solid;
    padding-bottom: 10px;
    display: block;
    font-family: Myriad Pro;
}

#content .sub_menu a.active,
#content .sub_menu a:hover {
    color: #b52626;
}

#content .sub_menu a.active:after {
    content: "\f101";
    display: inline-block;
    font-family: 'icomoon';
    padding: 0px 0 0 5px;
    margin-top: -2px;
    vertical-align: middle;
}

#content .main_content {
    width: 705px;
    float: right;
    display: block;
    position: relative;
    margin-top: 17px;
    min-height: 453px;
}

#content .main_content .content_shadow {
    background: url("../images/content_box_shadow.jpg");
    position: absolute;
    left: -10px;
    top: 10px;
    width: 13px;
    height: 453px;
}

#content .main_content h1 {
    background-color: #f4f4f4;
    color: #21a185;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    padding: 10px 15px 10px 20px;
    display: inline-block;
    position: relative;
    line-height: 16px;
}

#content .main_content h1:after {
position: absolute;
right: -24px;
background: url("../images/tri.jpg");
height: 36px;
width: 24px;
content:"";
top: 0;
}

#content .main_content .info {
border-top: 1px solid #dddddd;
padding: 15px 30px 60px 20px;
}

#content .main_content .info p {
    margin: 0;
    font-size: 13px;
    font-family: Myriad Pro;
    text-align: justify;
    color: #373737;
    line-height: 17px;
}

#content .main_content .info .name { font-size: 15px; ;line-height: 17px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid rgb(212,212,212); color: rgb(9, 87, 141);    font-family: Myriad Pro; }
#content .main_content .info .green_bold { font-weight: bold; color: #b52626;    font-family: Myriad Pro; }
#content .main_content .info.pro{     font-family: Myriad Pro;}


.link_table td {
    padding: 15px 10px 15px 0;
    text-align: left;
    height: 36px;
    font-family: Myriad Pro;
}

.link_table {
    border-collapse: collapse;
    margin: 15px 0 0 0;
    width: 657px;
}

.link_table img {
    height: 40px;
}

.link_table td.text {
    color: #199F84;
    font-size: 17px;
}

.link_table img.bm_logo {
    height: 70px;
}

.link_table a {
    text-decoration: underline;
    color: #000;
}

.info_left_table td {
    border: 1px solid #cdcdcd;
    padding: 8px 10px;
    text-align: center;
    text-align: left;
    padding-left: 20px;
    font-size: 13px;
    vertical-align: top;
}

.info_left_table {
    border-collapse: collapse;
    margin: 0px 0 0 0;
    width: 657px;
}

.info_left_table tr:nth-child(odd) td {
    background-color: #F5F5F5;
}

.info_left_table .ctitle {
    width: 135px;
    color: #21a185;
    font-size: 13px;
    text-align: left;
}

.info_left_table a {
    text-decoration: underline;
}

.info .half {
    width: 45%;
    float: left;
    margin-right: 5%;
}

.info .half .height_1 {
    height: 144px;
}

.info .half .height_2 {
    height: 135px;
}

.info_table {
    width: 655px;
    border-collapse: collapse;
}

.info_table th {
    background-color: #CCE6DF;
    font-size: 13px;
    color: #000;
    padding: 10px 20px 10px 20px;
    font-weight: bold;
    border-bottom: 1px solid #2C9D80;
}

.info_table td {
    background-color: #fff;
    font-size: 13px;
    color: #000;
    padding: 12px 20px 12px 20px;
    font-size: 13px;
    vertical-align: middle;
    border-bottom: 1px dotted #ccc;
}

.info_table .down_icon {
    height: 21px;
    text-align: center;
}

.info_table a:hover {
    text-decoration: underline;
}

.info_table .tac {
    text-align: center;
}

.table_remark {
    margin-top: 4px;
    line-height: 35px;
}

.table_remark a:hover {
    color: #de1817;
}

.stock_table {
    width: 290px;
    float: left;
    margin-right: 35px;
}

.stock_table td {
    padding: 7px 15px;
    font-size: 13px;
}

.stock_table tr:nth-child(even) td {
    background-color: #EFEFEF;
}

.stock_table .no_padding {
    padding: 10px 0 !important;
    background-color: #FFF !important;
}

.stock_table td:nth-child(1) {
    font-weight: bold;
}

.info h2 {
    padding: 12px 15px;
    color: #21a185;
    margin: 0;
    font-weight: normal;
    width: 583px;
    border: 1px solid #cdcdcd;
}

.pagination li {
    display: inline-block;
    margin: 5px 3px;
    padding: 5px 7px;
    border: 1px solid #eaeaea;cursor: pointer;
}

.pagination li:hover {
    background-color: #2C9D80;
    border: 1px solid #eaeaea;
    color: #fff;
}

.pagination ul {
margin: 10px 0 0 0;
    text-align: left;
    padding: 0px;
    
}
.pagination li.pgCurrent {
    background-color: #2C9D80;
    border: 1px solid #eaeaea;
    color: #fff;
}
.pagination li.Prev, .pagination li.pgNext {
    height: 23px;
    padding: 3px 3px 0 3px;
    cursor: pointer;
}

.pagination li.Prev:hover, .pagination li.pgNext:hover {
background-color: #FFF;
}

.point_table{ width: 630px;     width: 630px;
    margin: 23px auto 0 auto;}
.point_table td{width: 210px;     padding: 10px 0;
    text-align: center; color: #545454; vertical-align: top;}

.point_table a{width: 210px;     padding: 10px 0;
    text-decoration: underline;}
.contact_line{ margin: 20px 0 0px 0; width: 650px; height: 1px; background-color: #cdcdcd;}


#content .about_banner2 {
    background: url("../images/range_banner.jpg") no-repeat;
    height: 172px;
    width: 847px;
    display: block;
}

#content .about_banner3 {
    background: url("../images/related_banner.jpg") no-repeat;
    height: 172px;
    width: 847px;
    display: block;
}

#content .contact_banner {
    background: url("../images/contact_banner.jpg") no-repeat;
    height: 172px;
    width: 847px;
    display: block;
}

#content .main_content .info.sitemap .name {
    width: 200px;
    color: #09578d;
}
#content .main_content .info.sitemap .name a{

    color: inherit;
    
}

.downnload_remark{     margin: 15px 0 5px 0;font-size: 17px; }
.downnload_remark a{ color: #21a185; text-decoration: underline; font-size: 17px;}
.pgEmpty{ display: none !important;}