@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan');
@import url(https://fonts.googleapis.com/css?family=Aldrich);

/*全站*/
html, body { font-family:"Microsoft JhengHei"!important; font-size:100%; }
img { max-width:100%;}
ul{ list-style: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;}

.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-3{ padding-right: 15px; padding-left: 15px;}
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**/
#container{ width:100%; margin:auto;}

/*Header*/
header { width: 100%; height: 86px; border-bottom:1px solid #fff; background:url(../images/header_bg.gif) no-repeat center top #000; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}
header .logo_img img{ display: inline-block; height: 85px; line-height:85px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}

#header{}
.width-1280{ max-width:1280px; width:96%; margin:auto;}
.padding-60{ padding:60px 0px;}
.padding-15{ padding:15px;}


/**header_smaller**/
header.smaller { height: 71px;}
header.smaller .logo_img img { height: 70px; line-height: 70px;}


/**上選單**/
header #mainnav{ margin-top:36px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
header .navbar{ border-radius:0px; min-height: 40px; margin:0px; text-align:center; padding:0px;}
header .navbar-default { background-color:transparent;	border-color:transparent;}
header .navbar-default .navbar-collapse, header .navbar-default .navbar-form{ border-color:transparent;}
header .navbar-collapse { padding-right: 0px; padding-left: 0px;}
/*#incateall{ display:none;}*/
header #navbar-1{ text-align:center;}
header ul#main_menu { display: table; table-layout: fixed; margin:auto;}
header .navbar-nav{ float:inherit;}
header .navbar-default .navbar-nav > li{display: table-cell;}
header .navbar-default .navbar-nav > li > a {color: #fff; font-size:16px; line-height:24px; padding:8px 30px; text-decoration: none; font-weight:600; text-transform:uppercase;}
header .navbar-default .navbar-nav > li > a:hover, header .navbar-default .navbar-nav > li > a:focus { color: #f79b31;}
header .navbar-default .navbar-nav > .active > a, header .navbar-default .navbar-nav > .active > a:hover, header .navbar-default .navbar-nav > .active > a:focus { color: #f79b31; background-color: transparent;}
header .navbar-default .navbar-nav > .open > a, header .navbar-default .navbar-nav > .open > a:hover, header .navbar-default .navbar-nav > .open > a:focus{ color: #f79b31; background-color: transparent;}


/**header_smaller_nav**/
header.smaller #mainnav{ margin-top:16px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}


/**dropdown-menu**/
.dropdown-menu{ padding:0px; border:1px solid #d9ae00; background-color:#000;}
.dropdown-menu > li{ border-bottom:1px dotted #666;}
.dropdown-menu > li > a{ color: #fff; padding:10px 10px;}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ color:#FFF; background-image:none; background-color: #d9ae00;}
.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:#d9ae00;}
.dropdown-toggle{ cursor:pointer;}



/**banner**/
#banner_area{ margin-top:85px; border-bottom:2px solid #FFF;}
.swiper-slide{ position:relative;}
#banner01 .banner-w-area, #banner02 .banner-w-area{ position:absolute; width:100%; text-shadow:0px 0px 8px #333;font-family: 'Baloo Chettan', cursive; font-size:400%; color:#FFF; text-transform:uppercase;}
#banner01 .banner-w-area span, #banner02 .banner-w-area span{display:block; color:#ffcc00;}
#banner01 .banner-w-area{ top:40%; left:20%;}
#banner01 .banner-w-area span{ font-size:102%;}
#banner02 .banner-w-area{ top:40%; left:20%; }
#banner02 .banner-w-area span{ font-size:102%;}


#in_banner_area{ margin-top:85px; border-bottom:2px solid #FFF;}
#in_banner_area .swiper-slide{ height:315px; background-size: auto 100%!important;}
#in_banner_area #in_banner{ position:relative;}
#in_banner_area #in_banner.banner-w-area { position:absolute; width:100%; text-shadow:0px 0px 8px #333; font-family: 'Baloo Chettan', cursive; font-size:350%; color:#FFF; text-transform:uppercase; top:30%; left:42%;}
#in_banner_area #in_banner.banner-w-area span {display:block; color:#ffcc00; font-size:101%;}




/*--內頁區--*/
#content{ border-top: 24px solid #000; background:url(../images/index_content_bg.gif) no-repeat center top #FFF; padding:0px;}
.company-text{ margin:50px 20px; font-family: 'Baloo Chettan', cursive; font-size:24px; line-height:38px; color:#000;}
.form-group{ overflow:hidden;}
.contact_form{ max-width:700px; width:100%; margin:auto; font-size:16px; line-height:28px;}
.contactEmailBlock { text-align: center; }

/*麵包屑*/
#content .breadcrumb { text-shadow: none; padding: 9px 0px; margin:15px 0px 0px 0px; background-color: transparent; border-radius: 0px; text-align:right;}
#content .breadcrumb li { text-shadow: none; color:#6d6d6d; font-size:90%;}
.breadcrumb>li+li:before { padding: 0 8px; color: #ccc;}
#content .breadcrumb li a { text-shadow:none; text-decoration: none; color:#6d6d6d; font-weight:600;}
#content .breadcrumb li a:hover { text-shadow: none; background:none; text-decoration: underline;}
#content .breadcrumb li .divider{ text-shadow:none; background:none;}


/*個數*/
.page-header { padding-bottom: 0px; margin:0px; border-bottom:0px;}
.page-header h1{ background:url(../images/pro_title_bg.gif) no-repeat 275px 30px; font-family: 'Baloo Chettan', cursive; font-size:280%; color:#000; margin:0px; padding:0px;}


/*--內容區--*/
.content_text{ padding:20px 30px;}
.under_con{ font-size:60px; text-align:center; padding:50px 0px;}

.in_pro_list{ margin:30px 0px;}
.in_pro_list .list_icon{ background:#000; border:6px solid #b7b279; margin:15px;}
.in_pro_list .list_icon a{ text-decoration:none; font-family: 'Aldrich', sans-serif; color:#ffcc00; font-size:38px; font-style:italic; letter-spacing:-3px; padding:25px 0px; display:block;}
.in_pro_list .list_icon a:hover{ color:#ff0000;}
.in_pro_list:nth-child(2){ background-color:#000;}


/*產品頁*/
.pro_details ul{ list-style:disc;}
#html5-watermark{ display:none !important;}
.class_pro{ text-align:center; margin:10px;}
.class_pro a{ display:block; font-family: 'Baloo Chettan', cursive; font-size:30px; font-weight:bold; text-decoration:none; padding:10px 0px; background-color:#FC3; border-radius:15px; border:3px solid #917b2d;  box-shadow: 5px 5px 0px #e3e3e3;}
.class_pro a:hover{ color:#900;}
.class_pro a img { border:1px solid #ccc; margin-right:10px; width:80px; height:80px;}
#pro_main{ max-width:1050px; width:96%; margin: 0px auto;}
ul.details{ margin:auto;}
ul.details li{ font-size:18px; line-height:28px; text-align:left;}
.title-number{ background-color:#FC3; font-size:18px; border-radius:15px; padding:5px 15px; font-weight:bold;}

/**table**/
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { line-height:18px; border: 1px solid #666; font-size:15px;}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th{ text-align:center; text-transform:uppercase; padding:2px 8px; border:1px solid #666;}
.table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { padding:3px 10px 3px 20px; border:1px solid #a1a1a1;}
.table>tbody>tr>th:nth-child(odd){ background-color:#568261; color:#000;}
.table>tbody>tr>th:nth-child(even){ background-color:#eace15; color:#000;}

/**Bicycle table**/
.table_b>thead>tr>th, .table_b>tbody>tr>th, .table_b>tfoot>tr>th, .table_b>thead>tr>td, .table_b>tbody>tr>td, .table_b>tfoot>tr>td { line-height:18px; border: 1px solid #666; font-size:15px;}
.table_b>thead>tr>th, .table_b>tbody>tr>th, .table_b>tfoot>tr>th{ text-align:center; text-transform:uppercase; padding:2px 8px; border:1px solid #666;}
.table_b>thead>tr>td, .table_b>tbody>tr>td, .table_b>tfoot>tr>td { padding:3px 10px 3px 20px; border:1px solid #a1a1a1;}
.table_b>tbody>tr>th:nth-child(odd){ background-color:#3199be; color:#000;}
.table_b>tbody>tr>th:nth-child(even){ background-color:#25720a; color:#000;}


.rwd-table { /*background: #fff;*/ overflow: hidden;}
.rwd-table tr:nth-of-type(2n){ background: #dfd6e4;}
.rwd-table tr:nth-of-type(2n) td:nth-child(1){ background: #9d9d9d;}
.rwd-table th, .rwd-table td { margin: 0.4em 0.4em;}
.rwd-table { min-width: 100%;}
.rwd-table th { display: none;}
.rwd-table td { display: block;}
.rwd-table td:before { content: attr(data-th) " : "; width: 6.5em; display: inline-block;}
.rwd-table th, .rwd-table td { text-align: left;}
.rwd-table th, .rwd-table td:before { color: #e35500; font-weight: bold;}

#bicycle{}
#bicycle .rwd-table tr:nth-of-type(2n){ background: #f2ffea;}
#bicycle .rwd-table tr:nth-of-type(2n) td:nth-child(odd){ background: #f0f5fb;}
.w-60{ width:60%;}
.w-50{ width:50%;}
.w-40{ width:40%;}
.note{ font-size:18px; font-weight:bold;}
.red{ color:#F00;}

@media (min-width: 720px) {
.rwd-table td:before { display: none;}
.rwd-table th, .rwd-table td { display: table-cell; padding: 0.25em 0.5em;}
.rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0;}
.rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0;}
.rwd-table th, .rwd-table td { padding:0.4em  1em !important;}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{ border:1px solid #a1a1a1;}
}

/**color**/
.color01{ color:#039; font-weight:bold;}
.color02{ background-color:#eace15;}
.color03{ background-color:#706e73;}
.color04{ background-color:#CCC;}
.color-org{ color:#C60;}
.bg-wh{ background-color:#FFF;}

#tr_area .rwd-table tr:nth-of-type(2n) td:nth-child(1){ background-color:#FFF;}
#tr_area .table>thead>tr>th, #tr_area .table>tbody>tr>th, #tr_area .table>tfoot>tr>th{ text-align:left;}


/*尾檔*/
#footer{ }
/*.copyright{ text-align:center; padding:10px 0px; color:#878787; background-color:#3d3d3d; font-size:15px;}*/
.copyright{ display: none; }


/*首頁用*/
#index_content{ border-top: 24px solid #000; background:url(../images/index_content_bg.gif) no-repeat center top #FFF; padding:40px 0px 0px 0px;}
.pro_list{ margin:30px 0px;}
.pro_title{ background:url(../images/pro_title_bg.gif) no-repeat 275px 30px; font-family: 'Baloo Chettan', cursive; font-size:280%; color:#000;}
.list_icon{ background:#000; border:6px solid #b7b279; margin:5px 15px;}
.list_icon a{ text-decoration:none; font-family: 'Aldrich', sans-serif; color:#ffcc00; font-size:48px; font-style:italic; letter-spacing:-3px; padding:25px 0px; display:block;}
.list_icon a span{ display:block; font-size:16px; font-family:Arial, Helvetica, sans-serif; letter-spacing:normal;}
.list_icon a:hover{ color:#ff0000;}
.list_icon a:hover span{ color:#ffcc00;}

.iso_area{ background-color:#000; padding:30px 0px; margin-top:50px;}
.iso_area ul { display: table; table-layout: fixed; margin:0px auto; padding:0px;}
.iso_area ul li{ display: table-cell; vertical-align:middle; padding:15px 20px; }
.iso_area ul li img{ line-height:93px;}


/*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 : 1366px){
#banner01 .banner-w-area, #banner02 .banner-w-area{ font-size:350%;}
#banner02 .banner-w-area{ top:40%; left:15%;}
}
@media all and (max-width : 1280px){
#banner01 .banner-w-area, #banner02 .banner-w-area{ font-size:300%;}
#in_banner_area .swiper-slide{ background-position:-270px top !important;}
#in_banner_area .banner-w-area{ top:20%; line-height:58px;}
}
@media all and (max-width : 1220px){
.list_icon a{font-size: 40px;}
#in_banner_area #in_banner.banner-w-area{ left:35%;}
}
@media all and (max-width : 1246px){
.content_text{ padding:20px 10px;}
.in_pro_list .list_icon{height: 140px;}
.in_pro_list .list_icon a{ line-height:40px;}
.in_pro_list .list_icon{ margin:15px 10px;}
}
@media all and (max-width : 1100px){
#banner01 .banner-w-area, #banner02 .banner-w-area{ font-size:270%;}
#banner02 .banner-w-area{ left:10%;}
#in_banner_area #in_banner.banner-w-area{ left:30%;}
.list_icon a{font-size: 36px;}
}
@media all and (max-width : 1000px){
#banner01 .banner-w-area, #banner02 .banner-w-area{ font-size:250%;}
#in_banner_area #in_banner.banner-w-area{ left:20%;}
}
@media all and (max-width : 940px){
#banner01 .banner-w-area, #banner02 .banner-w-area{ font-size:220%;}
#in_banner_area #in_banner.banner-w-area{ left:15%; font-size:320%;}
#in_banner_area .swiper-slide{ height:260px;}
.list_icon a{font-size: 30px;}
}
@media all and (max-width : 803px){
header .navbar-default .navbar-nav > li > a{padding: 8px 25px;}
}
@media all and (max-width : 800px){
#banner01 .banner-w-area, #banner02 .banner-w-area{ font-size:200%;}
#in_banner_area #in_banner.banner-w-area{left:15%; font-size:300%;}
.list_icon a{font-size: 26px;}
}
@media all and (max-width : 767px){
#container { box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.8);overflow: hidden;}
.mobile-icon{ padding:10px;}
.mobile-icon .btn-default { color: #fff; background-color: #000; border-color: #000;}
#in_banner_area #in_banner.banner-w-area{ left:15%; font-size:300%;}
.in_pro_list .list_icon a{font-size: 30px;}
.in_pro_list .list_icon{ height:inherit;}
}
@media all and (max-width : 720px){
#banner01 .banner-w-area { font-size:180%; left: 36%;}
#in_banner_area #in_banner.banner-w-area{ left:10%; font-size:290%;}
}
@media all and (max-width : 670px){
#in_banner_area #in_banner.banner-w-area{ left:5%; font-size:250%;}
}

@media all and (max-width : 580px){
#banner01 .banner-w-area { left: 30%;}
#index_content{ background-size: 100%;}
.iso_area ul li{padding:5px;}
#in_banner_area #in_banner.banner-w-area{ left:10%; font-size:200%; line-height:40px;}
#in_banner_area .swiper-slide{ height:200px;}
}
@media all and (max-width : 530px){
#banner01 .banner-w-area { left: 20%; top:30%;}
#banner02 .banner-w-area{ top:30%;}
#in_banner_area #in_banner.banner-w-area{ left:5%;}
}
@media all and (max-width : 480px){
#banner01 .banner-w-area { left: 5%;}
header { height: 61px;}
header .logo_img img{ height: 60px; line-height:60px;}
/**header_smaller**/
header.smaller { height: 51px;}
header.smaller .logo_img img { height: 50px; line-height: 50px;}
.mobile-icon { padding: 0px;}
#banner_area, #in_banner_area{ margin-top:60px;}
.iso_area{padding: 10px 0px;}
#in_banner_area #in_banner.banner-w-area{ left:5%;}
.class_pro a img { margin:0px;}
}
@media all and (max-width : 440px){
#in_banner_area #in_banner.banner-w-area{ left:5%; font-size: 180%; line-height: 30px;}
}
@media all and (max-width : 414px){
#banner01 .banner-w-area { left: 3%; font-size:150%;}
#banner02 .banner-w-area{ font-size:150%;}
#index_content{padding: 20px 0px 0px 0px;}
.list_icon a{padding: 15px 0px;}
.copyright span{ display:block;}
}


@media all and (max-width : 400px){
#in_banner_area #in_banner.banner-w-area{ left:5%; font-size: 150%; line-height: 25px;}
}