/**google font**/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');

/*全站*/
html, body { 
    font-family:Microsoft JhengHei;
    font-family: 'Roboto Condensed', sans-serif, "Microsoft JhengHei"!important; }
img { max-width:100%; }
.hideobj{ display:none;}
a{ color:#000; background-color:none;}
a:hover, a:focus { text-decoration: underline; background:none; color:#000; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
ul{ list-style:none;}

#myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color:#417617; color: white; cursor: pointer; padding: 15px; border-radius: 150px;}
#myBtn:hover { background-color: #dd0b78;}

.container{ padding:0px;}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12,
.col-lg-12 { padding-right: 0px; padding-left: 0px;}
ul.thumbnails li.col-md-4{ padding-right: 15px; padding-left: 15px;}
ul.thumbnails li.col-sm-6{ padding-right: 15px; padding-left: 15px;}
ul.thumbnails li.col-xs-12{ padding-right: 15px; padding-left: 15px;}
.form-horizontal .form-group .col-sm-3{ padding-right: 15px; padding-left: 15px;}
.form-horizontal .form-group .col-sm-9{ padding-right: 15px; padding-left: 15px;}
.row { margin-right: 0px; margin-left: 0px;}
.control-group .col-sm-2{ padding-left:15px; padding-right:15px;}
.control-group .col-sm-10{ padding-left:15px; padding-right:15px;}
iframe{ border-width: 0px; border-style: none;}

/**container**/
#index_container, #container{ width:100%; margin:auto;}
.width-1280{ max-width:1280px; width:98%; margin:auto;}
.width-990{ max-width:1280px; width:98%; margin:auto; padding:25px 0px;}

/*#header*/
#index_header { background:url(../images/index_header_bg.jpg) no-repeat center top; min-height:975px;}
#header_area{ position:relative; padding-bottom:15px;}
#company_logo{ padding-top:25px;}
#company_logo .logo_img{ padding-right:15px;}
#company_logo .company_text{}
span.T-style{ display:block; font-size:24px; color:#FFF; font-weight:700; text-shadow:1px 1px 0px #000; padding-top:20px;}
span.E-style{ font-size:19px; text-transform:uppercase; color:#FFF; text-shadow:1px 1px 0px #000;}



/*會員登入項目*/
#login-tabs li{ background:none;}
#login-tabs a{ color:#000; background:none;}
#login-tabs a:hover, #login-tabs a:focus{ text-decoration: underline; background:none; color:#000;}


/*#header*/
/*註冊*/
#hello_member ul li a:hover, #hello_member ul li a:focus, #hello_member ul li a:active { text-decoration: underline; background: none;}

/*語言*/
#language_area{ padding-top:25px;}
#language_area ul{ background:url(../images/language_area_li_bg.gif) no-repeat left 7px;}
#language_area ul li{ background:url(../images/language_area_li_bg.gif) no-repeat right 7px;}
#language_area ul li a { color:#fff; background:none; padding:0px 15px;}
#language_area ul li a:hover, #language_area ul li a:focus, #language_area ul li a:active { background: none; text-decoration: underline;}

/**search**/
#qsearch{ margin:24px 35px 0px 0px;}
#qsearch .input-group { display: table; padding-bottom:0px; width: 100%;}
#qsearch .input-group .form-control{}
#qsearch .btn-default{color: #ba1919; border:0px;}
#qsearch .form-control{border: 1px solid #dfdfdf; border-radius: 6px; transition:box-shadow ease-in-out .15s; height:30px; font-size:13px;}
#qsearch .btn-default{ background-color:transparent;}
/*.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, */.btn-default.active, .open > .dropdown-toggle.btn-default{ background-color:transparent;}


/**上選單**/
#mainnav{ background:url(../images/nav_bg.png) no-repeat center top; margin-top:25px;}
.navbar{ border-radius:0px; height:39px; margin:0px; text-align:center; padding:0px;}
.navbar-default { background-color:transparent;	border-color:transparent;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{ border-color:transparent;}
.navbar-collapse { padding-right: 0px; padding-left: 0px;}
/*#incateall{ display:none;}*/
#navbar-1{ text-align:center;}
ul#main_menu { display:inline-table; margin:auto;}
.navbar-nav{ float:inherit;}
.navbar-default .navbar-nav > li{}
.navbar-default .navbar-nav > li > a {color: #fff; font-weight:700; font-size:16px; line-height:39px; padding:0px 35px; text-decoration: none; text-transform:uppercase; text-shadow:1px 1px 0px #000;}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ff6c00;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ff6c00; background-color: transparent;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ color: #ff6c00; background-color: transparent;}


/**dropdown-menu**/
.dropdown-menu{ padding:10px 0px 10px 0px; border-radius: 10px; border:1px solid #00a0e9;}
.dropdown-menu > li{ border-bottom:1px dotted #ccc;}
.dropdown-menu > li > a{color: #00a0e9; padding:4px 10px;}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ color:#FFF; background-image:none; background-color: #00a0e9;}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{ background-image:none;}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{ background-color:#00a0e9;}
.dropdown-toggle{ cursor:pointer;}

/**banner**/
#mainbanner{ padding-top:0px;}
.swiper-container{ margin-top:150px;}
.swiper-container-vertica{ height:477px;}
.text-style{ font-size:28px; color:#FFF; text-transform:uppercase; font-family: 'Roboto', sans-serif; text-shadow:3px 3px 5px #333; line-height:40px; padding-top:230px; padding-left:50px;}
.iso_area{ margin:30px auto 0px auto; width:99%;}
/***style for banner's arrows and pagination ****/
.swiper-banner .arrow-left, .swiper-product .swiper-button-prev { position: absolute; left: 1%; top: 40%; width: 17px; height: 30px;z-index:99;}
.swiper-banner .arrow-right, .swiper-product .swiper-button-next { position: absolute; right: 1%; top: 40%; width: 17px; height: 30px;z-index:99;}
.swiper-banner .page-banner, .swiper-product .swiper-pagination{ position: absolute; left: 0; z-index:99; text-align: center; bottom:0; width: 100%;}
.swiper-banner .swiper-pagination-switch, .swiper-product .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999; box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer;}
.swiper-banner .swiper-active-switch, .swiper-product .swiper-active-switch { background: #fff;}
/***style for banner's arrows and pagination end ****/

#in_mainbanner{}
#in_mainbanner .swiper-container{ margin-top:50px;}
#in_mainbanner .swiper-container-vertica{ height:270px;}
.in_text-style{ font-size:30px; color:#FFF; text-transform:uppercase; font-family: 'Roboto', sans-serif; text-shadow:3px 3px 5px #333; line-height:50px;}
#in_mainbanner .iso_area img{ max-width:45%;}
#in_mainbanner a.swiper-slideimg img{ margin:auto;}

/**iin_main_area**/
body#body_style .sb-site{ background:url(../images/body_style_bg.jpg) no-repeat center top #314770;}
#in_main_area{ background:url(../images/in_main_area_bg.jpg) no-repeat center top #f0f6f6;}



/*--側欄--*/
#sidebar { padding:0px 0px;}
#sidebar .nav-header{ color:#004eff; font-size:30px; font-weight:500;}
#side_menu{ margin-top:130px; padding:0px 25px; margin-right:10%; border-right:1px solid #bfd2ed;}
#side_menu ul.nav{ margin:20px 0px 0px 15px; padding-bottom:50px;}
#side_menu ul.nav li{ border-bottom:1px dotted #223a6f;}
#side_menu ul.nav li a{ color:#223a6f; font-size:16px; padding:15px 0px 5px 10px;}
#side_menu ul.nav > li > a:hover, #side_menu ul.nav > li > a:focus { color:#F00; text-decoration: none; background-color: transparent}


/*RSS*/
#rss_area a{ text-shadow: none;}
#rss_area a:hover{ text-shadow: none;}

/*--內容區--*/
#content{ padding:10px 25px 50px 25px; background:url(../images/content_bg.png) no-repeat left 8px; color:#445d86;}
#content .txtNormal { overflow:auto; width:100%; font-size:18px; line-height:32px; padding:0px 30px 0px 20px;}
#content .txtNormal h1{ text-align:center; font-size:24px; color:#003cff; line-height:30px; clear:both;}
#content .txtNormal h4{ color:#03C;}

/**company*/
ul.office-img{ margin:0px; padding:0px;}
ul.office-img li{ padding:10px;}
ul.office-img li img{ border:5px solid #fff; box-shadow:0px 0px 5px #ccc;}

ul.history_area{ margin:0px; padding:0px;}
ul.history_area li{ overflow:hidden; border-bottom:1px dotted #999;}
ul.history_area li .year{ color:#06F; font-weight:bold; float:left; width:10%; text-align:center;}
ul.history_area li .history-text{ float:left; width:90%;}


/**table**/
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th { background-color:#D7EBEC; text-align:center; border:1px solid #b2c9ef;}
.table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { border:1px solid #b2c9ef;}
.table ul{ margin:0px 0px 0px 20px; padding:0px; list-style:disc;}

/**table_01**/
.table_01 { width: 100%; max-width: 100%; margin-bottom: 20px; font-size:90%;}
.table_01>thead>tr>th, .table_01>tbody>tr>th, .table_01>tfoot>tr>th { background-color:#D7EBEC; text-align:center; border:1px solid #b2c9ef; padding:0px 10px; line-height:25px;}
.table_01>thead>tr>td, .table_01>tbody>tr>td, .table_01>tfoot>tr>td { border:1px solid #b2c9ef; padding:0px 10px; line-height:25px;}
.table_01 td a{ color:#900;}

.space-10{ padding:15px;}
.pdf a{ color:#900;}

/*麵包屑*/
#content .breadcrumb { padding: 0px; margin:25px 0px 0px 0px; list-style: none; background-color: transparent; border-radius:0px; text-shadow: none; text-align:right;}
#content .breadcrumb li { text-shadow: none;}
#content .breadcrumb li a { color:#507fcf; text-shadow:none; text-decoration: none;}
#content .breadcrumb li a:hover { text-shadow: none; background:none; text-decoration: underline; color:#000;}
#content .breadcrumb li .divider{ text-shadow:none; background:none;}
#result{ display:none;}


/*個數*/
.page-header { border-bottom:0px #eee solid; padding:0px; margin:15px 0px 78px 10px;}
.page-header h1{ font-size:30px; font-weight:700; color:#258dc8; padding:0px; margin:0px;}
.page-header h1:first-letter{ color:#FFF; font-size:40px;}

/*產品頁*/
ul.thumbnails{ margin:0px; padding:0px; overflow:hidden;}
#content .thumbnails .catelist{ height:290px; overflow:hidden;}
#content .thumbnails .prodlist{ height:330px; overflow:hidden;}

.thumbnail { border:0px; padding:0px; background-color:transparent; border-radius:0px;}
.thumbnail img{ margin-right: auto; margin-left: auto; display: block; max-width: 100%;}
.listimg{ /*height:150px;*/}
.listimg img{ border:5px solid #86a2d0; }

.cate-name, .cate-name-more{ color:#102ca8; width:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;}
.cate-name a, .cate-name-more a{  color:#102ca8; font-weight:bold; font-size:16px;}
.cate-name a:hover, .cate-name-more a:hover{ color:#8B8682;}


/*產品介紹頁*/
#pb_area{ border:0px solid #ccc; overflow:hidden;}
.pro-name{ font-size:20px; color:#008aff; font-weight:bold; margin-bottom:20px;}
.bimgarea{ padding:10px;}
.bimgarea img { box-shadow: 0px 0px 8px #ccc;}
#content .pshow_title{ border-left:5px solid #ccc; font-size:18px; font-weight:bold; background-color: #eee; padding:7px;}

img.img-style{box-shadow: 0px 0px 10px #ccc; margin:10px 0px;}
ul.ul-style{ list-style:disc;}

.pro03-area{ margin-bottom:50px;}
.pro03-title{ color:#900;}
.pro03-img img{ box-shadow: 0px 0px 8px #ccc; margin:10px 0px;}
.pro03-text ul{ list-style:disc;}


.input-group { display: table; padding-bottom:10px; width: 100%;}
.input-group .form-control { margin-bottom: 0px;}

.listtxtspec .input-prepend{ padding:1px 0px; margin:0px;}
#lineqty{ width:30%;}
.showsmall ul { padding: 0px; margin: 0px; list-style: none;}
.showsmall li { float:left;}
.showsmall li img { margin: 3px; padding:3px; width:50px;}

/**other**/
.pro-desc{ height:80px; overflow-x:hidden; overflow-y:auto;}
.spec{ height:38px;}
.clear{ clear:both;}

/*頁籤**/
.nav-tabs .active a{ font-weight:bold;}

/*訊息用*/
.msgcont{ width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:10px;}
.msg_img_title { width:30%;}

/**inquiry**/
/**表單元素**/
fieldset.over-border { border: 1px solid #ccc !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.4em 0 !important; border-radius: 16px;}
legend.line-border { font-size: 16px !important; text-align: left !important; width:inherit; border-bottom:none; display:none;}
fieldset > div { margin-top:30px;}
.red{ color: #cc0000;}
.radio-inline input[type='radio'] { margin-left: -20px; float: left;}
.radio-inline { padding-left: 20px; font-weight: normal; margin-bottom: 0px; vertical-align: middle; display: inline-block; cursor: pointer;}
.help-inline{ vertical-align: middle; display: inline-block; padding-top:5px; float:left; padding-left:0px; cursor: default;}
.control-label{ cursor: default;}
.form-show .input-prepend { clear:both;}
fieldset.instep-border { border: 1px solid #ccc !important; padding: 0 16px 16px 16px !important; margin: 0 0 16px 0 !important; border-radius: 15px; /*圓角*/ background:#eeeeee; height:100px; font-weight:bold; color:#000000; text-align: center;}
fieldset.step-border { border: 1px solid #ccc !important; padding: 0 16px 16px 16px !important; margin: 0 0 16px 0 !important; border-radius: 15px; /*圓角*/ height:100px; text-align: center;}
legend.stepline-border { text-align: center !important; width:inherit; border-bottom:none;}
.enlarge{clear:both;}
@media only screen and (max-width : 480px) {
.navbar-inner li {display:block; width:100%;}
}

/*尾檔*/
#footer{ background:url(../images/footer_bg.gif) repeat left top;}
#footer .ftbar{ background-color:#4c6287; border-color: transparent; text-align:center;}
#footer .ftbar ul{ display:inline-block; margin:10px auto 8px auto; background:url(../images/language_area_li_bg.gif) no-repeat left 5px;}
#footer .ftbar ul li{ background:url(../images/language_area_li_bg.gif) no-repeat right 5px;}
#footer .ftbar ul.nav li a{ color:#FFF; padding:0px 20px; font-size:16px;}
#footer .ftbar ul.nav > li > a:hover, #footer .ftbar ul.nav > li > a:focus { text-decoration: none; background-color: transparent; border-radius: 0px;}

#address_area .col-sm-2{ width:20%;}
#cominfo{ color:#FFF; font-size:14px; line-height:22px;}
#cominfo ul li { /*display:inline-block;*/ line-height:22px; }
#cominfo ul li a{ color:#FFF; text-decoration:none;}

#copyright{ color:#4c6287; margin-top:30px; font-size:16px; font-weight:700; line-height:26px;}
#footlink ul li a { border-radius:inherit; }
#footlink ul li a:hover, .foot #footlink ul li a:focus, .foot #footlink ul li a:active { background:none; text-decoration:underline;}



/*首頁用*/
#index_company{ background:url(../images/index_company_bg.jpg) no-repeat center bottom; padding-bottom:30px;}
#index_company h3{ background:url(../images/title_bg.png) no-repeat left top; margin:0px; padding: 25px 0px 40px 40px; color:#258dc8; font-size:30px; font-weight:bold;}
#index_company h3:first-letter{ font-size:50px; color:#FFF;}
.en-img img { margin-right:20px;}
.company-text{ margin:0px 50px 20px 50px;}
.en-text{ font-size:18px; color:#445d86; font-weight:400; line-height:28px; margin-right:50px;}
.more{ float:right;}
.more a{ color:#FFF; display:block; background-color:#1e3166; font-weight:700; font-size:14px; padding:5px 8px;}
.more a:hover{ color:#FC0; text-decoration:none;}

#index_cate{ background:url(../images/index_cate_bg.jpg) no-repeat center top; border:1px solid #fff; padding:30px 0px;}
#index_cate h3{ color:#3c5edc; font-size:30px; margin:20px 0px;}
.pro_list{ max-width:1280px; width:100%; margin:auto;}
.tab-img img{ border:5px solid #86a2d0; border-radius:240px;}
.tab-name{ padding:15px 0px;}
.tab-name h4{ margin:10px 0px; padding:0px;}
.tab-name h4 a{ color:#4b6184;}
.padding-10{ margin:10px;}

.customer_logo{ background-color:#FFF; padding:30px 0px; overflow:hidden;}
.customer_logo ul{ margin:0px auto; padding:0px;}
.customer_logo ul li{ float:left; padding:15px 10px; text-align:center; vertical-align:middle;}
.title_customers{ color:#3c5edc; font-size:30px; margin:20px 0px; text-align:center;}

#index_msg_ul a{ background:#eee; padding:8px 15px; font-size:16px; color:#000;}
#index_msg_ul a:hover{ background:#eee; padding:8px 15px; font-size:16px; color:#000;}
#index_msg_ul .msgcont{}

/**pro**/
#idxprocarousel .span{small_class} .item { background-color : #EEE; height : {small_height}px; text-align : center; /* Firefox, Chrome */ line-height : {small_height}px; /* IE */ *font-size : 180px;  /* 200px * 0.9 = 180px */}
#idxprocarousel  img { vertical-align : middle;}
#idxprocarousel .caption { background : #666; padding : 5px;}
#idxprocarousel .caption a { color : #fff;}



/*style for google map  2015.10.21*/
.googlemap { width:100%; height:12em;}
.listimg a.btn.btn-link { display: initial;}


/******RWD*******/
@media all and (max-width: 1170px) {
#index_company{ background-position:right bottom;}
.en-img{ height:300px;}
}
@media all and (max-width: 990px) {
.swiper-container{margin-top: 50px;}
.text-style{padding-top: 100px;}
#index_header{ min-height:auto;}
.swiper-container-vertica{ height:400px;}
/**in**/
.in_text-style{line-height: 35px; padding-left: 15px;}
#in_mainbanner .iso_area img { max-width: 50%;}
#side_menu{padding: 0px 10px 0px 10px;}
#content{padding: 10px 10px 50px 10px;}
#content .txtNormal{padding: 0px;}

}
@media all and (max-width: 767px) {
#index_container, #container {box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.8);overflow: hidden;}
#index_header{ background-size: auto 100%;}
#mobile_toggle{ padding:15px; overflow:hidden; background: rgba(15, 23, 82, 0.6);}
#company_logo { padding-top:0px; /*max-width:350px;*/ width:100%; margin:auto;}
.text-style { padding-top: 150px; font-size: 20px; padding-left:15px; line-height:28px;}
.company-text { margin: 0px 10px 20px 10px;}
.en-text{margin-right: 0px; text-shadow:1px 1px 0px #fff;}
.swiper-container-vertica {height: 335px;}
.iso_area img{ max-width:50%;}

#cominfo ul li{ /*text-align:center;*/}
#copyright{ text-align:center;}
/***/
.in_text-style{ font-size:22px; line-height:28px;}
#content .txtNormal{font-size: 16px; line-height: 26px;}
#address_area .col-sm-2{ width:50% !important; min-height:150px; float:left; padding:10px;}
}

@media all and (max-width: 553px) {
.swiper-container-vertica {height: 250px;}
.text-style { padding-top:50px;}
.iso_area{ margin:15px 0px;}
#footer .ftbar ul{ background:none;}
#footer .ftbar ul.nav li { width:47%; background:none; margin:5px;}
#footer .ftbar ul.nav li{ border:1px solid #ccc;}
.nav-pills > li + li { margin-left:0px;}
#address_area .col-sm-2{ width:100% !important; min-height:inherit !important;}
}
@media all and (max-width: 485px) {
.swiper-container-vertica {height: 220px;}
#footer .ftbar ul.nav li a{padding: 0px 15px; font-size:14px;}
/**/
.in_text-style { font-size: 16px; line-height: 26px;}
#in_mainbanner .swiper-container{margin-top: 20px;}
#in_mainbanner .swiper-container-vertica{height: 180px;}
}
@media all and (max-width: 414px) {
span.T-style{font-size: 17px;}
span.E-style{font-size: 15px;}
#company_logo .logo_img { padding-right: 5px;}
.swiper-container-vertica {height: 180px;}
.text-style { padding-top: 10px; font-size: 18px; line-height: 25px;}
.en-text{font-size: 15px; line-height: 25px;}
}
@media all and (max-width: 412px) {
span.T-style{font-size: 18px;}
}
@media all and (max-width: 396px) {
.swiper-container-vertica {height: 195px;}
#footer .ftbar ul.nav li a{padding: 0px 10px;}
}
@media all and (max-width: 384px) {
span.T-style{font-size: 16px;}
}
@media all and (max-width: 364px) {
.swiper-container-vertica {height: 160px;}
.text-style{ text-transform:none;}
.en-img { height: 340px;}
.en-img img { margin-right: 10px;}
#index_company h3{padding: 20px 0px 30px 40px;}
}
@media all and (max-width: 345px) {
#index_company { background-position: left bottom;}
.en-img { height: inherit;}

.tab-img img{ margin:auto;}
}
@media all and (max-width: 340px) {
#mobile_toggle{padding: 10px;}
.swiper-container-vertica {height: 150px;}
#cominfo ul li{ font-weight:normal; font-size: 15px; line-height: 24px;}
}
@media all and (max-width: 330px) {
#mobile_toggle{padding: 3px;}
#footer .ftbar ul.nav li{width: 45%;}
}