@import url("fontawesome-4.4.0.min.css");
@charset "utf-8";
/* CSS Document */
* { box-sizing:border-box }
*:before, *:after { box-sizing:inherit }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
img {max-width: 100%}
body {font-family: "微軟正黑體";color: #000;margin: 0px;padding: 0px;	font-size: 110%;}
a {color: #000;	text-decoration: none;}
a:hover {color: #F00;}
ul {margin: 0; padding: 0; list-style: none;}

.wrapper {padding:0.5em 0rem;margin: 0 auto;width: 1170px;}
.container {padding:0em 1rem}
@media (max-width: 1040px) {.wrapper{width: 100%;}}

/*=====================  header start  =====================*/
[hidden],template{display:none}
input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}
.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}
.fade.in{opacity:1}
.collapse{display:none}
.collapse.in{display:block}
tr.collapse.in{display:table-row}
tbody.collapse.in{display:table-row-group}
.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}
.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}
.nav{padding-left:0;margin-bottom:0;list-style:none}
.nav>li{position:relative;display:block;}
.nav>li>a{position:relative;display:block;padding:10px 15px;text-align:center; border-bottom:1px solid #e7e7e7}
.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}
.nav>li.disabled>a{color:#777}
.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}
.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}
.navbar{position:relative;min-height:50px;margin-bottom:15px;border:1px solid transparent}
@media (max-width:966px){.nav>li>a{padding:10px 10px}}
@media (min-width:926px){.navbar{border-radius:4px}}
@media (min-width:926px){.navbar-header{float:left}}
.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.navbar-collapse.in{overflow-y:auto}
@media (min-width:926px){
.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}
.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}
.navbar-collapse.in{overflow-y:visible}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}
@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.containe>.navbar-header{margin-right:-15px;margin-left:-15px}
@media (min-width:926px){
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}
}
.navbar-static-top{z-index:1000;border-width:0 0 1px}
@media (min-width:926px){.navbar-static-top{border-radius:0}}
.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}
@media (min-width:926px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}
.navbar-fixed-top{top:0;border-width:0 0 1px}
.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}
.navbar-brand{float:left;}
.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}
.navbar-brand>img{display:block}
@media (max-width:554px){.navbar-brand{width:85%;}}
@media (min-width:926px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}
nav.navbar.bootsnav .navbar-toggle{ background-color: #fff !important; border: none; padding: 0; font-size: 18px; position: relative; top: 25px;}
.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}
.navbar-toggle:focus{outline:0}
.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}
.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}
@media (max-width:480px){nav.navbar.bootsnav .navbar-toggle{ top: 15px;}}
@media (min-width:926px){.navbar-toggle{display:none}}
.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}
@media (max-width:926px){
.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}
.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}
.navbar-nav .open .dropdown-menu>li>a{line-height:20px}
.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}
@media (min-width:926px){
.navbar-nav{float:left;margin:0}
.navbar-nav>li{float:left}
.navbar-nav>li>a{padding-top:15px;padding-bottom:15px;border-bottom:none }
}
.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}
.navbar-btn{margin-top:8px;margin-bottom:8px}
.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}
.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}
@media (min-width:926px){
.navbar-left{float:left!important}
.navbar-right{float:right!important;margin-right:-15px; margin-top:20px}
.navbar-right~.navbar-right{margin-right:0}
}
.navbar-default{width:100%}
.navbar-default .navbar-brand{color:#777}
.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}
.navbar-default .navbar-nav>li>a{color:#000; font-size:130%; font-weight:600}
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#ff0000;background-color:transparent}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}
.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}
.navbar-default .navbar-toggle{border-color:#ddd}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}
.navbar-default .navbar-toggle .icon-bar{background-color:#888}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}
@media (max-width:926px){
.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}
.navbar-default .navbar-link{color:#777}
.navbar-default .navbar-link:hover{color:#333}
.navbar-default .btn-link{color:#777}
.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}
.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}




/*=====================  區塊 start  =====================*/
.row-left{width:27%; float:left}
.row-right{width:70%; float:right}
@media (max-width: 1100px) {
.row-left{width:25%;}
.row-right{width:73%;}
}
@media (max-width: 1000px) {
.row-left{display:none;}
.row-right{width:100%;}
}

/*=====================  left start  =====================*/
.info{width:100%; background-color:#ededed; border:1px solid #d2d2d2; padding:10px; margin-bottom:20px;}
.info i{float:left; margin-right:5px; font-size:150%; color:#767676;}
.info-title{font-size:115%; border-bottom:dashed 1px #d2d2d2; padding-bottom:2px; color:#0083e7; float:left; font-weight:600; width:80%}
.info-title-s{font-size:0.3em; color:#a3a3a3;float:left;}
.info-data{width:100%; border-radius:5px; background-color:#fff; padding:5px; float:left; margin-top:5px;}
.info-data li i{font-size:1em; display:block; position:absolute; top:0; left:0; width:30px; text-align:center;color:#000;}
.info-data li *{margin:0; padding:0; line-height:1.7;}
.info-data li {position:relative; padding-left:30px; margin-bottom:8px;word-break: break-all;}
.product-overview{width:100%; border-radius:5px; background-color:#fff; padding:5px 8px; float:left; margin-top:5px;}
.product-overview li{width:100%; border-bottom:1px dashed #d2d2d2; padding-bottom:5px; margin-bottom:5px;}
.info-datas{display:none}
@media screen and (max-width:1040px){.info-title{width:75%}}
@media screen and (max-width:1000px){
.info-datas{width:100%; border-radius:5px; background-color:#fff; padding:5px;margin-top:5px; display:block}
.info-datas li i{font-size:1em; display:block; position:absolute; top:0; left:0; width:30px; text-align:center;color:#000;}
.info-datas li *{margin:0; padding:0; line-height:1.7;}
.info-datas li {position:relative; padding-left:30px; margin-bottom:8px;font-size:1.2em;word-break: break-all; float:left; margin-right:50px; line-height:1.6}
}


/*=====================  right start  =====================*/
/****** news css *******/
.ticker-headline {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 25px 0; margin: 0;}
.ticker-headline span{ border-right:1px dotted #999999; padding:0 5px}
.carousel.vertical .carousel-inner {height: 100%; width: auto;}
.carousel.vertical .carousel-inner > .item { width: auto;padding-right: 50px;}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel.vertical .carousel-inner > .item {transition: 0.6s ease-in-out;}
.carousel.vertical .carousel-inner > .item.next, .carousel.vertical .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);top: 0;}
.carousel.vertical .carousel-inner > .item.prev, .carousel.vertical .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0); top: 0;}
.carousel.vertical .carousel-inner > .item.next.left, .carousel.vertical .carousel-inner > .item.prev.right, .carousel.vertical .carousel-inner > .item.active {transform: translate3d(0, 0, 0); top: 0;}
}
.carousel.vertical .carousel-inner > .active,.carousel.vertical .carousel-inner > .next,.carousel.vertical .carousel-inner > .prev {display: block;}
.carousel.vertical .carousel-inner > .active {}
.carousel.vertical .carousel-inner > .next,.carousel.vertical .carousel-inner > .prev { position: absolute; top: 0; width: 100%;}
.carousel.vertical .carousel-inner > .next { top: 100%;}
.carousel.vertical .carousel-inner > .prev { top: -100%;}
.carousel.vertical .carousel-inner > .next.left,.carousel.vertical .carousel-inner > .prev.right { top: 0;}
.carousel.vertical .carousel-inner > .active.left { top: -100%;}
.carousel.vertical .carousel-inner > .active.right { top: 100%;}
.carousel.vertical .carousel-control {left: auto; width: 50px;}
.carousel.vertical .carousel-control.up { top: 0; right: 0; bottom: 50%;}
.carousel.vertical .carousel-control.down {top: 40%; right: 0; bottom: 0;}
.carousel.vertical .carousel-control .icon-prev,.carousel.vertical .carousel-control .icon-next,.carousel.vertical .carousel-control .glyphicon-chevron-up,.carousel.vertical .carousel-control .glyphicon-chevron-down {position: absolute; top: 50%; display: inline-block;}
.carousel.vertical .carousel-control .icon-prev,.carousel.vertical .carousel-control .glyphicon-chevron-up { left: 50%; margin-left: -10px; top: 50%; margin-top: -10px;}
.carousel.vertical .carousel-control .icon-next,.carousel.vertical .carousel-control .glyphicon-chevron-down {left: 50%;  margin-left: -10px;top: 50%; margin-top: -10px;}
.carousel.vertical .carousel-control .icon-up,.carousel.vertical .carousel-control .icon-down {width: 20px; height: 20px;line-height: 1; font-family: serif;}
.carousel.vertical .carousel-control .icon-prev:before {content: '\2039';}
.carousel.vertical .carousel-control .icon-next:before {content: '\203a';}
.carousel{position:relative;}
.carousel-inner{position:relative;width:100%;overflow:hidden}
.carousel-inner>.item{position:relative;display:none;}
.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}
@media all and (transform-3d),(-webkit-transform-3d){
.carousel-inner>.item{}
.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;}
}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
.carousel-inner>.active{}
.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
.carousel-inner>.next{left:100%}
.carousel-inner>.prev{left:-100%}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}
.carousel-inner>.active.left{left:-100%}
.carousel-inner>.active.right{left:100%}
.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#8d8d8d;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);filter:alpha(opacity=50);opacity:.5}
.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}
.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}
.carousel-control:focus,.carousel-control:hover{color:#980000;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;display:inline-block}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}
.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}
.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}
.carousel-indicators{position:absolute;bottom:10px;left:50%;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}
.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}
.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}
.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.carousel-caption .btn{text-shadow:none}
@media screen and (min-width:768px){
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}
.carousel-caption{right:20%;left:20%;padding-bottom:30px}
.carousel-indicators{bottom:20px}
}

/****** about us css *******/
.has-divider { position: relative; clear:both}
.has-divider:before { background: url("../images/hash.png") repeat scroll left top transparent; bottom: 0; content: ""; height: 10px; left: 0; position: absolute; width: 100%; }
.row-about{width:100%; margin:0 0 20px 0;border-left:1px dotted #dadada;border-right:1px dotted #dadada;border-bottom:1px dotted #dadada;padding:10px}
.row-about .right{float:left; margin-right:3%}
.row-about h1{font-size:135%;color: #333333; margin: 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); text-transform: capitalize; vertical-align: middle; text-shadow: 1px 1px 0 #F6F6F6, 2px 2px 0 #D6D6D6; margin-bottom:10px;}
.row-about span { color: #22AAEE; }
.row-about .images{max-width:119px; max-height:146px;box-shadow:0px 0px 9px #cccccc;padding:3px}
.row-about .text{width:81%; float:left;}

/****** html css *******/
.html{width:100%; margin-bottom:20px}

/****** products css *******/
.row-product{width:100%;}
.pro-pic{width:29.5%; margin:10px 15px 5px 15px; float:left}
.pro-pic .proimg{width: 235px; height: 177px; text-align:center; vertical-align:middle; margin-bottom:5px; overflow: hidden;line-height:177px;}
.pro-pic .proimg .proimg_contect{max-width: 235px;  max-height: 177px;  vertical-align:middle;/*設定圖片垂直置中*/}
.pro-pic .proname{width:100%; text-align:center; height:58px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
@media (max-width: 1100px) {.pro-pic{width:28%;}}
@media (max-width: 1040px) {.pro-pic{width:29%;}.row-about .text{width:80%;}}
@media (max-width: 1020px) {.row-about .text{width:78%;}}
@media (max-width: 1000px) {.pro-pic{width:30.2%;}.row-about .right{margin-right:3%}.row-about .text{width:84%;}}
@media (max-width: 988px) {.pro-pic{width:29.5%;}}
@media (max-width: 969px) {.row-about .text{width:82%;}}
@media (max-width: 847px) {.row-about .text{width:80%;}}
@media (max-width: 814px) {.pro-pic{width:29%;}}
@media (max-width: 753px) {.row-about .text{width:78%;}}
@media (max-width: 724px) {.pro-pic{width:45%;}}
@media (max-width: 680px) {.row-about .text{width:75%;}}
@media (max-width: 631px) {.pro-pic{width:44%}}
@media (max-width: 594px) {.row-about .text{width:100%;}.row-about .right{width:119px;float:none;margin:0 auto 10px auto}.row-about h2{ text-align:center}}
@media (max-width: 531px) {.pro-pic{width:43.5%}}
@media (max-width: 493px) {.pro-pic{width:100%;margin:10px 0 5px 0;}.pro-pic .proimg{width: 100%; height: auto;}}
@media (max-width: 493px) {.pro-pic{width:100%;margin:10px 0 5px 0;}.pro-pic .proimg{width: 100%; height: auto;}}

/****** page products css *******/
.pprolist{width:100%; margin:20px 0; padding-bottom:20px; border-bottom:1px dashed #CCC}
.pprolist .pproimg{text-align:center; vertical-align:middle; float:left; margin-right:2%;width:29.5%;}
.pprolist .pproname{width:68.5%; font-size:1.5em; color:#004eff; font-weight:600;float:left;}
.pprolist .pproname a{color:#004eff;}
.pprolist .pprotext{width:68.5%; font-size:1.2em; color:#333;float:left;}
.btn{display:inline-block;margin:15px 0 0 0;font-size:0.95em;text-align:center;white-space:nowrap;vertical-align:middle;color:#fff;background-color:#337ab7;border-color:#2e6da4;border-radius:6px;padding:10px 16px;border:1px solid transparent; float: right;}
.btn:hover{background-color:#286090}
@media (max-width: 500px) {
.pprolist{padding-bottom:0;}
.pprolist .pproimg{text-align:center; vertical-align:middle; float:none; margin-right:0;width:100%;}
.pprolist .pproname{width:100%;float:none;text-align:center;margin-top:10px;}
.pprolist .pprotext{width:100%;float:none;text-align:center;}
    .btn{display:block;margin:15px auto 0 auto; float:none;}
}

/****** page big-products css *******/
.b-proimg{width:400px;  margin-right:2.5%; float:left;text-align:center; vertical-align:middle;margin-bottom:20px;}
.b-proname{width:47%; float:left; margin-bottom:30px;font-size:170%; color:#004eff; font-weight:600;}
.b-btnall{width:47%; float:left;}
.b-btn{display:inline-block;margin:15px 0 0 0;font-size:0.95em;text-align:center;white-space:nowrap;vertical-align:middle;color:#fff;background-color:#337ab7;border-color:#2e6da4;border-radius:6px;padding:10px 16px;border:1px solid transparent}
.b-btn:hover{background-color:#286090}
@media (max-width: 1040px) {.b-proimg{width:50%; height:auto;}}
@media (max-width: 500px) {
.b-proimg{width:100%; margin-right:0; float:none;}
.b-proname{width:100%; float:none; text-align:center;margin:10px 0;}
.b-btnall{width:100%; float:none; text-align:center}
.b-btn{margin:5px}
}

/****** footer css *******/
.row-footer{width:100%; margin:10px 0; text-align:center}

/***** contact us CSS ******/
.form-item-block {position: relative;margin-bottom: 25px;}
.form-container form input, .form-container form textarea {
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  padding: 20px;
  border: 1px solid #bababa;
  background-color: transparent;
  font-size: 1.2em;
  color: #000;
  -moz-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.form-container form label {position: absolute;top: 1px;left: 1px;font-weight: 700;margin-bottom: 0px; background: transparent;}
.form-container form label:before {content: "";height: 100%;display: inline-block;vertical-align: middle;}
.form-container form label span {display: inline-block; vertical-align: middle; padding: 0px 20px;}
.form-container form textarea {resize: none; height: 140px; line-height: 24px;}
.form-container form textarea + label {line-height: 24px; padding: 20px 0px;}
.form-container form input + label {height: calc(100% - 2px);}
.form-container form button {color: #fff; border: 1px solid #222; background: #9f0000; border-radius: 4px; outline: none; padding: 10px 20px;font-size: 1.2em;float:left; clear:both;margin-bottom:35px}
.form-container-2{margin:20px 0 30px 0}
/* example-2 styles */
#example-2.form-container label {opacity: 1;-moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s;}
#example-2.form-container input:focus,
#example-2.form-container input.active,
#example-2.form-container textarea:focus,
#example-2.form-container textarea.active { border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 1px solid transparent;}
#example-2.form-container input:focus + label,
#example-2.form-container input.active + label,
#example-2.form-container textarea:focus + label,
#example-2.form-container textarea.active + label {font-size: 80%;font-style: italic; left: -6px; opacity: 0.6;}

/***** news *****/
.met_module2_list{width:100%; padding:20px 0}
.met_module2_list li{list-style:none;border-bottom:1px solid #ddd;position:relative;}
.met_module2_list h2{font-weight:normal;font-size:100%;width:88%; }
.met_module2_list h2 a{display:inline-block; }
.met_module2_list li p{color:#818181}
.met_module2_list li span.time{color:#818181;position:absolute;right:10px;font-size:0.8em;top:7px}
.met_module2_list li h2 i{margin-right:5px;position:relative}
.met_module2_list li.list_2 h2{margin-bottom:3px;font-weight:bold}
.met_module2_list li.list_2{padding:10px 0}
.met_module2{padding:0px;}
.met_module2 h1.met_title{font-size:150%;padding:5px 0 0 0; line-height:40px; text-align:center;color: #36F;}
.met_module2 .met_infos{color:#818181;font-size:12px;margin-bottom:30px;padding-bottom:10px;border-bottom:1px solid #ddd;text-align:center;}
.met_module2 .met_time{padding-right:6px}
@media (max-width: 490px) {.met_module2_list h2{width:70%; }}
@media (max-width: 300px) {.met_module2_list h2{width:60%; }}


/*=====================  other start  =====================*/
.sitemap{width:100%; text-align:right; font-size:90%; color:#36F; margin-top:5px}
.sitemap a{color:#000}
.bgcolor-red{background-color:#ba0000}
.bgcolor-red:hover{background-color:#900000}
.row-50{width:45%; float:left; margin-right:5%;line-height:50px;}
.mt30{margin-top:30px}
.mb30{margin-bottom:30px}


/**頁碼 CSS*/
nav[role="navigation"] {text-align: center;}
.cd-pagination {width: 100%;max-width: 768px;margin: 2em auto 4em;text-align: center;}
.cd-pagination li {display: none;margin: 0 .2em;}/* hide numbers on small devices */
.cd-pagination li.button {display: inline-block;}/* make sure prev next buttons are visible */
.cd-pagination a, .cd-pagination span {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* use padding and font-size to change buttons size */
  padding: .5em .8em;
  font-size: 1.2em;
}
.cd-pagination a { border: 1px solid #e6e6e6; border-radius: 0.25em;}
.no-touch .cd-pagination a:hover {background-color: #f2f2f2;}
.cd-pagination a:active { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9);}/* click effect */
.cd-pagination a.disabled {color: rgba(46, 64, 87, 0.4); pointer-events: none;}/* button disabled */
.cd-pagination a.disabled::before, .cd-pagination a.disabled::after { opacity: .4;}
.cd-pagination .button:first-of-type a::before {content: '\00ab  ';}
.cd-pagination .button:last-of-type a::after { content: ' \00bb';}
.cd-pagination .current {background-color: #286090; border-color: #286090; color: #ffffff; pointer-events: none;}/* selected number */
@media only screen and (min-width: 768px) {
.cd-pagination li { display: inline-block; }
}