@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');
/*共用-背景色*/
.bg-white{ background:#fff;}
.bg-gray{ background:#f2f2f2;}
.bg-gray2{ background:#d9d9d9;}

.bg-pic01{ background:url(../images/p1/p1_3/pic01.jpg) no-repeat center;}
.bg-pic02{ background:url(../images/p6/pic01.jpg) no-repeat center bottom;}

.font-w{ font-weight:bold;}
.font-size36{ font-size:36px;}

.float-right{ float:right;}
.float-left{ float:left;}

.pd-top0{ padding-top:0;}
.pd-bottom0{ padding-bottom:0;}
.mg-top30{ margin-top:30px;}
.mg-bottom100{ margin-bottom:100px;}
.mg-bottom30{ margin-bottom:30px;}


.box-shadow{ box-shadow:1rem 1rem 1rem rgba(0,0,0,.18);}
.max-w300{ max-width:300px; width:100%; margin:0 auto;}

.imggg{ max-width:100%;}

/*banner*/
.banner { height: 300px; position: relative; }

/*標題*/
.major-title{ color:#3eb134; text-align:center;font-size:3rem;}
/*.major-title:after { content: ''; display: block; width: 60px; height: 4px; background: #405edb;  margin: 1em auto 1.5em; }*/
.major-title.list-item{ margin-bottom:80px;}
.page-title{ font-size:36px; margin:30px 0 10px 0; text-transform:uppercase;line-height: 1.5em;}
.page-title.sub{ font-size:30px; letter-spacing:-1px;}

/*關於我們*/
.slogan{ text-align:center; margin: 5px 0 35px 0;}
.slogan .slogan-hr,.slogan .slogan-text{ display:inline-block;}
.slogan .slogan-hr{ width:35px;}
.slogan .slogan-hr hr{ margin:6px 0;}
.slogan .slogan-text{ padding:0 20px; font-style:italic; font-size:18px; font-weight: 500; color:#8d8d8d;}
.abouts_box{ line-height:2; padding:30px 0;}
.abouts_box.pd-0{ padding:0;}
.area-box{ display:block;}
.area-box2{ position:relative;}
.area-pic{}
.area-text{ position:absolute;}
.area-pic{ left:0; top:0;}
.area-text{ right:-10px; top:80px; padding:40px; background:rgba(0,0,0,.8); color:#fff; }
.bg-about{ display:inline-block; background:url(../images/p1/pic04.png) right top no-repeat; margin: 0 -15px 0 -15px;}
.bg-sx-white ul { padding-left: 35px;}

.bg-csr{ display:inline-block; background:url(../images/p4/pic04.png) right top no-repeat; margin: 0 -15px 0 -15px;}
.comoss_name{font-family: 'Dancing Script', cursive; font-size:5rem; font-weight:bold;}
/*關於我們-上選單*/
.page-sidebar{}
.page-sidebar .sidebar{}
.page-sidebar .collapse{ text-align:center; margin-bottom:30px;}
.page-sidebar .navbar { text-align: center; position: inherit;}
.page-sidebar .nav>li { display:inline-block; width:33%; padding: 5px;}
.page-sidebar .nav>li>a{color: #333; font-size: 1.1em;background: rgba(0,0,0,0);border:1px solid #cbcbcb; position: inherit;padding:10px 0; display: block;}
.page-sidebar .nav>li>a.active, 
.page-sidebar .nav>li>a:focus, 
.page-sidebar .nav>li>a:hover, 
.page-sidebar .nav>li.dropdown>a:focus, 
.page-sidebar .nav>li.dropdown>a:hover{color: #fff; font-weight: inherit; background:#fe0000;}
.page-sidebar .collapse.in{}

/*iso*/
.btn-style{ display:inline-block; margin:1rem 0; padding:0 20px; border:1px solid #333; color:#333; -webkit-border-radius: 3px; -moz-border-radius: 3px;bprder-radius:3px;}
.btn-style:hover{ background:#333; color:#fff;}
.btn-style.pdd{ padding:10px 50px;}
.btn-style.md-0{ margin:0;}

.download-info-table{ padding-top:30px;}
.download-info-table .table { border-bottom:1px solid #e3e3e3; }
.download-info-table .table > thead > tr > th { color:#333; }
.download-info-table .table > tbody > tr > td,
.download-info-table .table > tbody > tr > th { vertical-align:middle; border:none; min-width:100px; color:#333; }
.download-info-table .table > tbody > tr:hover > td { color:#333; }
.download-info-table .table-striped > tbody > tr:nth-of-type(2n+1) { background:#F3F3F3; }
.download-info-table .btn strong { font-size:20px; margin-right:5px; }
.download-info-table .table tr th:first-child,
.download-info-table .table tr th:last-child,
.download-info-table .table tr td:first-child,
.download-info-table .table tr td:last-child { text-align:center; min-width:inherit; }
.download-info-table .btn { width:120px; margin:0 auto; }
.download-info-table .btn:hover,
.download-info-table .table > tbody > tr:hover .btn {}


/*網站地圖*/
.list-icon-sitemap{ margin-bottom:50px;}
.list-icon-sitemap .flr { float: right; }
.list-icon-sitemap .site_box { padding: .5em 0;text-align: center;}
.list-icon-sitemap .site_box:nth-child(odd) {  background: #F3F3F3;}
.list-icon-sitemap .site_box p { padding:0; margin:0;}
.list-icon-sitemap .site_box .col-sm-7 { padding: 10px 0;}
.list-icon-sitemap .site_box .col-sm-9 { margin-top: 6px; }
.list-icon-sitemap .site_box .col-sm-7 a,.list-icon-sitemap .site_box .col-sm-9 a{float:left;padding: 0 10px;border-right: 1px dashed #B9B9B9;margin-top:8px;}
.list-icon-sitemap .site_box a:hover{ color:#fa0202;}
.list-icon-sitemap .site_box .col-sm-7 a:last-child,.list-icon-sitemap .sublist a:last-child,.list-icon-sitemap .site_box .col-sm-9 a:last-child{ 
border-right: none;}
.list-icon-sitemap .site_box .col-sm-3 p {  background: #333;  display: inline-block;  padding: 7px 15px;  border-radius: 3px;  color: #fff; border:1px solid #333;min-width: 165px; text-align: left;}
.list-icon-sitemap .site_box .col-sm-3 p:hover {  background: transparent;  color: #333; border:1px solid #333; -o-transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear;transition:  all .3s linear; /*連結淡入淡出*/}
.list-icon-sitemap .site_box .col-sm-2 p {  background: #B1B1B1; display: inline-block;padding: 7px 10px;border-radius: 3px; color: #fff;margin-top: 11px; min-width:100%;}
.list-icon-sitemap .site_box .col-sm-3 i:first-child{ margin-right: 12px; }
.list-icon-sitemap .site_box .col-sm-2 i{ margin-left: 12px; }
.list-icon-sitemap .site_box .flr { margin: 5px 0 0em 5px;  color: #777777; }
.list-icon-sitemap .site_box .col-sm-2 a:hover p ,.site_box .col-sm-3 a:hover p  { background: #696969;}
.xzoom-container .img_b { border: solid 1px #ccc; margin-bottom: 10px; height:450px; line-height:450px;}
.xzoom-container img.xzoom { max-height: 450px; max-width:380px; width: auto; box-shadow: none;margin: 0; padding: 10px;}

@media (max-width: 480px) {
.xzoom-container img.xzoom { max-height: 400px; width: auto !important;}
}



@media (min-width: 769px) {
.sidebar > .collapse{ display:block;}
}

@media (max-width: 1024px) { 
}

@media (max-width: 992px) { 

}

@media (max-width: 768px) {
/*----banner---*/
/*.banner{ height:350px;}*/

/*簡易通用的自適應表格*/
.table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; }

/*關於我們-上選單*/
.page-sidebar .nav>li { width: 100%;}
.page-sidebar .nav>li>a:hover, 
.page-sidebar .nav>li.dropdown>a:focus, 
.page-sidebar .nav>li.dropdown>a:hover {  margin-left: inherit; }
.page-sidebar .nav>li>a{ padding:10px;}

/*關於我們*/
.page-title{}
.page-title .tt80{ margin-top:80px;}
.area-text{ top:10px;}
.bg-sx-white{ background:rgba(255,255,255,.8);}

/*網站地圖*/
.list-icon-sitemap .site_box { padding: .8em; text-align: left;}
.list-icon-sitemap .site_box .flr{transform:rotate(90deg);}

/*產品底層*/
.xzoom-container img.xzoom { max-height: 380px; width:auto !important;}
.xzoom-container .img_b { height: 380px; line-height: 380px;}
}

@media (max-width: 640px) {
/*.news-detail{ padding:2em 0 0 0;}*/
.download-detail{ padding:7em 0 0 0;}

/*slogan*/
.slogan .slogan-text{ width:100%;}
/*關於我們*/
.area-box2 .imgg{ margin:0 auto;}
.area-text {position: inherit; margin: 0 auto -10px auto; right: inherit; top: inherit;}
.area-text br.gg640{ display:none;}
.bg-about { background: url(../images/p1/pic04.png) center 290px no-repeat; padding: 0 45px 300px 45px;}
.major-title{font-size: 2.2rem;}
}

@media (max-width: 600px) { 
.text-center480{ text-align:center;}
.major-title.list-item {margin-bottom: 40px;}

/*關於我們*/
.abouts_box{ }
.abouts_box .float-right.gg480,
.abouts_box .float-left.gg480{ float:inherit;}
.abouts_box .float-right.gg480 .imgg,
.abouts_box .float-left.gg480 .imgg{ margin:0 auto 1em auto;}
.abouts_box .page-title{ margin-top:30px;}

}

@media (max-width: 480px) { 
/*----banner---*/
.banner{ background-position: center 70px !important; background-size: 200% !important; height: 200px;}

/*關於我們*/
.bg-about { padding:0 40px 140px 40px;}
.bg-sx-white ul { padding-left: 25px;}

/*iso*/
.download-info-table .gg480,
.download-info-table .table > tbody > tr > td:nth-child(3){ display:none;}
}

@media (max-width: 320px) { 
/*----banner---*/
.banner{ height:200px;}

}

/*共用*/
.bg-red{ background:#fa0202;}