@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #fff; font-weight: 300; display: block; position: relative;}
img { border:0;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both; width: 100%;}

.color-red { color: #e50012;}
/*.color-blue { }*/


/********** page num **********/
#page-num-box { clear: both; width: 100%; margin: 40px 0 0 0;}
#page-num-box ul.page { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
#page-num-box ul.page li { padding: 0; margin: 5px;}
#page-num-box ul.page li a { padding: 3px 10px; color: #414141; font-size: 0.9em; border: 1px #e50012 solid; border-radius: 6px; background-color: #fff; text-decoration: none; display: block; box-sizing: border-box;}
#page-num-box ul.page li a:hover { color: #e50012; background-color: #eee;}
#page-num-box ul.page li a.sel { color: #fff; background-color: #e50012;}


/********** goback button **********/
#goback-bt { clear: both; width: 100%; margin: 60px 0 0 0; text-align: center;}
#goback-bt input[type=button] { padding: 3px 20px; color: #e50012; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #f1f1f1; border: 1px #e50012 solid; border-radius: 8px; cursor: pointer;}
#goback-bt input[type=button]:hover { color: #f1f1f1; background-color: #e50012;}



@media screen and (min-width: 1280px) {

    aside#contact-us { width: 190px; position: fixed; bottom: 0; right: 0; z-index: 99999;}
    aside#contact-us a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #e50012; text-decoration: none; display: block;}
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px calc(50% - 620px); background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    
    header .logo-bx { width: 400px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
    header .logo-bx a img.logo { width: 160px; height: auto; margin: 0 20px 0 0;}
    header .logo-bx a img.title { width: 160px; height: auto;}
    
    header nav#pad { display: none;}
    header nav#mo { display: none;}
    
    header nav#pc { width: calc(100% - 400px); display: flex; justify-content: flex-end; align-items: center;}
    header nav#pc ul.nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    header nav#pc ul.nav li { padding: 0 20px; margin: 0;}
    header nav#pc ul.nav li a { padding: 3px 0; color: #231815; font-size: 1.1rem; font-weight: 500; border-bottom: 4px #fff solid; text-decoration: none; display: block;}
    header nav#pc ul.nav li a:hover { border-bottom: 4px #e50012 solid;}

    .header-search-box { clear: both; width: 80%; margin: 40px auto 0 auto;}
    .header-search-box input[type=search] { width: 100%; padding: 5px; color: #231815; font: 1rem "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #231815 solid; background-color: #fff; box-sizing: border-box;}
    
    
    
    /********** banner **********/
    
    .banner-box { width: 100%; overflow: hidden;}
    
    .page-banner { width: 100%; height: 21vw; overflow: hidden;}
    .page-banner img { width: 100%; height: auto;}
    
    
    
    /********** section#hp-items **********/
    
    section#hp-items { clear: both; width: 100%; padding: 80px calc(50% - 620px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-items .sub-title { width: 100%; margin: 0 0 40px 0; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-items .item-bx { width: calc(100% / 6);}
    section#hp-items .item-bx a { width: 100%; height: 100%; padding: 10px; text-decoration: none; display: block; box-sizing: border-box;}
    section#hp-items .item-bx a:hover { background-color: #efefef;}
    section#hp-items .item-bx a .pic { width: 100%; height: 120px; border-radius: 20px; border: 6px #fff solid; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); display: flex; justify-content: center; align-items: center;}
    section#hp-items .item-bx a .pic img { width: 100%; height: auto;}
    section#hp-items .item-bx a .title { width: 100%; padding: 20px 0; color: #666; font-size: 1.1em; font-weight: 500; text-align: center;}
    section#hp-items .item-bx a .intro { width: 100%; color: #666; font-size: 0.9em;}
    
    
    
    /********** section#hp-company **********/
    
    section#hp-company { clear: both; width: 100%; padding: 0 calc(50% - 620px); margin: 0 0 80px 0; background-color: #f9f9f9; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#hp-company .left-text { width: 50%; padding: 40px 0 0 0;}
    section#hp-company .left-text .title { width: 100%; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-company .left-text .text { width: 100%; padding: 40px; line-height: 2em; box-sizing: border-box;}
    section#hp-company .left-text .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-company .left-text .more a { color: #707070; text-decoration: none;}
    section#hp-company .left-text .more a:hover { text-decoration: underline;}
    section#hp-company .right-pic-mo { display: none;}
    section#hp-company .right-pic { width: 50%; height: 400px; overflow: hidden; position: relative;}
    section#hp-company .right-pic img { width: 100%; height: auto; position: absolute; top: 0; right: 0;}
    
    
    
    /********** section#hp-news **********/
    
    section#hp-news { clear: both; width: 100%; padding: 80px calc(50% - 620px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#hp-news .left-pic { width: 50%; height: 400px; overflow: hidden; position: relative;}
    section#hp-news .left-pic img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
    section#hp-news .right-news { width: 50%; padding: 0 0 0 40px; box-sizing: border-box;}
    section#hp-news .right-news .title { width: 100%; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-news .right-news .news-list { width: 100%; padding: 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-news .right-news .news-list .date { width: 60px; padding: 6px 0; margin: 0 20px 20px 0; color: #231815; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #231815 solid; border-radius: 8px; box-sizing: border-box;}
    section#hp-news .right-news .news-list .news { width: calc(100% - 80px); margin: 0 0 20px 0;}
    section#hp-news .right-news .news-list .news a { color: #414141; text-decoration: none;}
    section#hp-news .right-news .news-list .news a:hover { text-decoration: underline;}
    section#hp-news .right-news .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-news .right-news .more a { color: #707070; text-decoration: none;}
    section#hp-news .right-news .more a:hover { text-decoration: underline;}
    
    
    
    /********** section#hp-products **********/
    
    section#hp-products { clear: both; width: 100%; padding: 80px calc(50% - 620px); background-color: #f9f9f9; box-sizing: border-box;}
    section#hp-products .title { width: 100%; margin: 0 0 40px 0; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-products .pro-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-products .pro-list .pro-box { width: calc(100% / 4 - 30px); margin: 0 15px 20px 15px; border: 1px #ccc solid; box-sizing: border-box;}
    section#hp-products .pro-list .pro-box a { width: 100%; height: 100%; color: #414141; text-decoration: none; display: block;}
    section#hp-products .pro-list .pro-box a:hover {-moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
    section#hp-products .pro-list .pro-box a .pic { width: 100%;}
    section#hp-products .pro-list .pro-box a .pic img { width: 100%; height: auto;}
    section#hp-products .pro-list .pro-box a .name { width: 100%; padding: 10px; box-sizing: border-box;}
    section#hp-products .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-products .more a { color: #707070; text-decoration: none;}
    section#hp-products .more a:hover { text-decoration: underline;}
    
    
    
    /********** section#about **********/
    
    section#about { clear: both; width: 100%; padding: 40px calc(50% - 620px) 80px calc(50% - 620px); box-sizing: border-box;}
    
    section#about .column-full { width: 100%;}
    
    section#about .column-full .breadcrumbs-box { width: 100%; padding: 0 0 40px 0; color: #888; font-size: 0.9em;}
    section#about .column-full .breadcrumbs-box a { color: #888; text-decoration: none;}
    section#about .column-full .breadcrumbs-box a:hover { text-decoration: underline;}
    
    section#about .column-full .title-name { clear: both; width: 100%; padding: 0 0 5px 0; margin: 0 0 40px 0; color: #e50012; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #e50012 solid;}
    
    section#about .column-full .about-content { clear: both; width: 100%; padding: 0 80px; line-height: 1.8em; box-sizing: border-box;}    
    section#about .column-full .about-content img.about-pic-1 { width: 80%; height: auto; margin: 0 auto 40px auto; display: block;}
    section#about .column-full .about-content ul.num { padding: 0 0 0 24px; margin: 0; list-style: decimal; display: block;}
    section#about .column-full .about-content ul.num li { padding: 0; margin: 0;}
    
    
    
    /********** section#news **********/
    
    section#about .column-full .news-list { clear: both; width: 90%; padding: 10px 20px; margin: 0 auto; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}
    section#about .column-full .news-list:hover { background-color: #f1f1f1;}
    section#about .column-full .news-list .icon { width: 60px; color: #e50012; font-size: 1.4em;}
    section#about .column-full .news-list .title { width: calc(100% - 160px);}
    section#about .column-full .news-list .title a { color: #414141; text-decoration: none;}
    section#about .column-full .news-list .title a:hover { color: #e50012;}
    section#about .column-full .news-list .date { width: 100px; font-size: 0.9em; text-align: right;}
    
    section#about .column-full .news-content { clear: both; width: 90%; margin: 30px auto 0 auto; line-height: 1.8em;}
    section#about .column-full .news-content img { max-width: 100%; height: auto;}
    section#about .column-full .news-content a { color: #414141; text-decoration: underline;}
    section#about .column-full .news-content a:hover { color: #e50012;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 80px calc(50% - 620px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    
    section#products .column-lf { width: 300px; padding: 0 0 40px 0; margin: 0 40px 0 0; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #e50012; font-size: 1.6em; font-weight: 400; background-color: #231815; display: flex; justify-content: center; align-items: flex-end;}
    section#products .column-lf .top-title font.mo-icon { display: none;}
    section#products .column-lf .top-title-triangle { border-color: #231815 transparent transparent transparent; border-style: solid solid solid solid; border-width: 35px 150px 35px 150px; height: 0px; width: 0px;}
    section#products .column-lf .left-nav { width: 100%; padding: 0 0 30px 0; box-sizing: border-box;}
    section#products .column-lf .left-nav ul.lf-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    section#products .column-lf .left-nav ul.lf-nav li { width: 100%; padding: 0; margin: 0;}
    section#products .column-lf .left-nav ul.lf-nav li a { padding: 10px 30px; color: #e50012; font-size: 1.2em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
    section#products .column-lf .left-nav ul.lf-nav li a:hover { background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li a.sel { background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup { width: 100%; padding: 0 20px; margin: 0; list-style: none; display: block; box-sizing: border-box;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li { width: 100%; padding: 0; margin: 0;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a { width: 100%; padding: 10px 30px; color: #666; font-size: 1em; text-decoration: none; box-sizing: border-box; display: block;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a:hover { color: #e50012; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { color: #e50012; background-color: #fff;}
    
    section#products .column-rt { width: calc(100% - 340px);}
    section#products .column-rt .breadcrumbs-box { width: 100%; padding: 0 0 40px 0; color: #888; font-size: 0.9em;}
    section#products .column-rt .breadcrumbs-box a { color: #888; text-decoration: none;}
    section#products .column-rt .breadcrumbs-box a:hover { text-decoration: underline;}
    
    section#products .column-rt .pro-title-name { clear: both; width: 100%; padding: 0 0 5px 0; margin: 0 0 40px 0; color: #e50012; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #e50012 solid;}
    
    section#products .column-rt .pro-list-box { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#products .column-rt .pro-list-box .pro-list { width: calc(100% / 4 - 30px); margin: 0 15px 20px 15px; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-list-box .pro-list a { width: 100%; height: 100%; color: #414141; text-decoration: none; display: block;}
    section#products .column-rt .pro-list-box .pro-list a:hover { -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);}
    section#products .column-rt .pro-list-box .pro-list a .pic { width: 100%; }
    section#products .column-rt .pro-list-box .pro-list a .pic img { width: 100%; height: auto;}
    section#products .column-rt .pro-list-box .pro-list a .name { width: 100%; padding: 10px; font-size: 0.9em; line-height: 1.4em; box-sizing: border-box;}
    
    
    
    /********** section#product detail **********/
    
    section#products .column-rt .pro-detail-box { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
    section#products .column-rt .pro-detail-box .pro-pics-box { width: calc(50% - 20px); margin: 0 20px 40px 0;}
    section#products .column-rt .pro-detail-box .pro-pics-box .bigpic { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-detail-box .pro-pics-box .bigpic img { width: 100%; height: auto;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox { clear: both; width: 100%;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb li { width: calc(100% / 4 - 10px); margin: 0 5px 10px 5px; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb li img { width: 100%; height: auto; cursor: pointer;}
    section#products .column-rt .pro-detail-box .pro-infor-box { width: calc(50% - 20px); margin: 0 0 40px 20px;}
    section#products .column-rt .pro-detail-box .pro-infor-box .title-name { width: 100%; padding: 0 0 5px 0; margin: 0 0 30px 0; font-size: 1.4em; border-bottom: 1px #414141 solid;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor { width: 100%; line-height: 1.8em;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box { width: 140px; margin: 30px 10px 0 0; float: left;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box a { padding: 3px 5px; color: #e50012; text-align: center; text-decoration: none; border: 1px #e50012 solid; border-radius: 8px; background-color: #eee; box-sizing: border-box; display: block;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box a:hover { color: #eee; background-color: #e50012;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 20px 0; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    
    section#products .column-rt .pro-intro-content { clear: both; width: 100%; position: relative;}
    section#products .column-rt .pro-intro-content .tab-content { width: 100%; padding: 20px; line-height: 1.8em; background-color: #fff; box-sizing: border-box; z-index: 9;}
    section#products .column-rt .pro-intro-content .tab-content div img { max-width: 100%; height: auto;}
    
    
    
    /********** section#contact **********/
    
    section#about .column-full .contact-content { clear: both; width: 100%;}
    
    section#about .column-full .contact-content .column-helf { width: 80%; padding: 0 20px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
    section#about .column-full .contact-content .column-helf .icon { width: 50px; margin: 0 0 10px 0; color: #e50012; font-size: 1.8em; text-align: center;}
    section#about .column-full .contact-content .column-helf .text { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1.1em;}
    section#about .column-full .contact-content .column-helf .text font.title { font-size: 1.2em; font-weight: 500;}
    section#about .column-full .contact-content .column-helf .map { width: 100%; margin: 20px 0 0 0;}
    section#about .column-full .contact-content .column-helf .map iframe { width: 100%; height: 300px;}
    
    section#about .column-full .contact-content hr { width: 100%; margin: 40px 0; border: 1px #ccc solid;}
    
    section#about .column-full .contact-content .column-table { width: 100%; padding: 0 20%; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table input[type=text], input[type=tel], input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; border-radius: 8px; background-color: #fff; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table textarea { width: 100%; height: 100px; padding: 10px; margin: 0 0 10px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; border-radius: 8px; background-color: #fff; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table input[type=button] { clear: both; padding: 6px 20px; margin: 20px 0 0 0; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #e50012; cursor: pointer;}
    section#about .column-full .contact-content .column-table input[type=button]:hover { background-color: #e50012;}



    /********** site map **********/

    .sitemap-content { clear: both; width: 100%; padding: 80px 0;}
    .sitemap-content ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
    .sitemap-content ul.sitemap li { padding: 10px; margin: 0;}
    .sitemap-content ul.sitemap li a { padding: 5px 20px; color: #e50012; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
    .sitemap-content ul.sitemap li a:hover { color: #e50012; border-radius: 10px; background-color: #231815;}



    /********** 404 error **********/

    .error-sub-title { clear: both; width: 100%; padding: 30px 0; color: #e50012; font-size: 5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
    .error-404 { width: 100%; padding: 50px 0; color: #e50012; font-size: 2rem; font-weight: 500; text-align: center;}
    .error-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
    .error-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #e50012; display: block;}
    .error-goback-bt a:hover { color: #e50012; background-color: #231815;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; padding: 40px calc(50% - 620px); background-color: #231815; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    
    footer .footer-logo { width: 300px; display: flex; justify-content: flex-start; align-items: flex-end;}
    footer .footer-logo img.footer-logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    footer .footer-logo img.footer-title { width: 120px; height: auto;}
    
    ul.footer-nav { width: calc(100% - 300px); padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    ul.footer-nav li { padding: 0 10px; margin: 0;}
    ul.footer-nav li a { padding: 5px 0; color: #fff; font-size: 1.1rem; text-decoration: none; display: block;}
    ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
    
    .footer-copyright { clear: both; width: 100%; padding: 15px; font-size: 0.9em; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    
            
}


@media screen and (min-width: 768px) and (max-width: 1279px) {

    aside#contact-us { width: 190px; position: fixed; bottom: 0; right: 0; z-index: 99999;}
    aside#contact-us a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #e50012; text-decoration: none; display: block;}
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative;}
    
    header .logo-bx { width: 400px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
    header .logo-bx a img.logo { width: 160px; height: auto; margin: 0 20px 0 0;}
    header .logo-bx a img.title { width: 160px; height: auto;}
    
    header nav#pc { display: none;}
    header nav#mo { display: none;}
    
    header nav#pad { width: calc(100% - 400px); display: flex; justify-content: flex-end; align-items: center;}
    
    header nav#pad .nav-icon { width: 60px; color: #231815; font-size: 2.4em; line-height: 1em; text-align: center;}
    
    header nav#pad ul.nav { width: 100%; padding: 40px; margin: 0; list-style: none; background-color: #231815; box-sizing: border-box; display: none; position: absolute; top: 100px; left: 0; z-index: 999;}
    header nav#pad ul.nav li { padding: 0; margin: 0; text-align: center;}
    header nav#pad ul.nav li a { padding: 20px 15px; color: #fff; font-size: 1.2em; font-weight: 500; border-radius: 6px; text-decoration: none; display: block;}
    header nav#pad ul.nav li a:active { color: #231815; background-color: #fff;}

    .header-search-box { width: 300px; margin: 0 auto;}
    .header-search-box input[type=search] { width: 100%; padding: 5px; color: #231815; font: 1rem "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #231815 solid; background-color: #fff; box-sizing: border-box;}
    
    
    
    /********** banner **********/
    
    .banner-box { width: 100%; overflow: hidden;}
    
    .page-banner { width: 100%; height: 21vw; overflow: hidden;}
    .page-banner img { width: 100%; height: auto;}
    
    
        
    /********** section#hp-items **********/
    
    section#hp-items { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-items .sub-title { width: 100%; margin: 0 0 40px 0; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-items .item-bx { width: calc(100% / 3 - 20px); margin: 0 10px 20px 10px;}
    section#hp-items .item-bx a { width: 100%; height: 100%; padding: 10px; text-decoration: none; display: block; box-sizing: border-box;}
    section#hp-items .item-bx a:hover { background-color: #efefef;}
    section#hp-items .item-bx a .pic { width: 100%; height: 15vw; border-radius: 2vw; border: 6px #fff solid; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); display: flex; justify-content: center; align-items: center;}
    section#hp-items .item-bx a .pic img { width: 100%; height: auto;}
    section#hp-items .item-bx a .pic img { width: 100%; height: auto;}
    section#hp-items .item-bx a .title { width: 100%; padding: 20px 0; color: #666; font-size: 1.1em; font-weight: 500; text-align: center;}
    section#hp-items .item-bx a .intro { width: 100%; color: #666; font-size: 0.9em;}
    
    
    
    /********** section#hp-company **********/
    
    section#hp-company { clear: both; width: 100%; padding: 0; margin: 0 0 80px 0; background-color: #f9f9f9; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#hp-company .left-text { width: 50%; padding: 40px 0;}
    section#hp-company .left-text .title { width: calc(100% - 40px); padding: 3px 10px; margin: 0 0 0 30px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-company .left-text .text { width: 100%; padding: 30px; line-height: 2em; box-sizing: border-box;}
    section#hp-company .left-text .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-company .left-text .more a { color: #707070; text-decoration: none;}
    section#hp-company .left-text .more a:hover { text-decoration: underline;}
    section#hp-company .right-pic-mo { display: none;}
    section#hp-company .right-pic { width: 50%; overflow: hidden; background-image: url("../images/hp_company_pic.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
    section#hp-company .right-pic img { display: none;}
    
    
    
    /********** section#hp-news **********/
    
    section#hp-news { clear: both; width: 100%; padding: 0; margin: 80px 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#hp-news .left-pic { width: calc(50% - 40px); margin: 0 40px 0 0; background-image: url("../images/hp_news_pic.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
    section#hp-news .left-pic img { display: none;}
    section#hp-news .right-news { width: 50%;}
    section#hp-news .right-news .title { width: 100%; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-news .right-news .news-list { width: calc(100% - 40px); padding: 30px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#hp-news .right-news .news-list .date { width: 60px; padding: 6px 0; margin: 0 20px 20px 0; color: #231815; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #231815 solid; border-radius: 8px; box-sizing: border-box;}
    section#hp-news .right-news .news-list .news { width: calc(100% - 80px); margin: 0 0 20px 0;}
    section#hp-news .right-news .news-list .news a { color: #414141; text-decoration: none;}
    section#hp-news .right-news .news-list .news a:hover { text-decoration: underline;}
    section#hp-news .right-news .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-news .right-news .more a { color: #707070; text-decoration: none;}
    section#hp-news .right-news .more a:hover { text-decoration: underline;}
    
    
    
    /********** section#hp-products **********/
    
    section#hp-products { clear: both; width: 100%; padding: 80px 40px; background-color: #f9f9f9; box-sizing: border-box;}
    section#hp-products .title { width: 100%; margin: 0 0 40px 0; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-products .pro-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-products .pro-list .pro-box { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box;}
    section#hp-products .pro-list .pro-box a { width: 100%; height: 100%; color: #414141; text-decoration: none; display: block;}
    section#hp-products .pro-list .pro-box a:hover {-moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
    section#hp-products .pro-list .pro-box a .pic { width: 100%;}
    section#hp-products .pro-list .pro-box a .pic img { width: 100%; height: auto;}
    section#hp-products .pro-list .pro-box a .name { width: 100%; padding: 10px; box-sizing: border-box;}
    section#hp-products .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-products .more a { color: #707070; text-decoration: none;}
    section#hp-products .more a:hover { text-decoration: underline;}
    
    
    
    /********** section#about **********/
    
    section#about { clear: both; width: 100%; padding: 40px 40px 80px 40px; box-sizing: border-box;}
    
    section#about .column-full { width: 100%;}
    
    section#about .column-full .breadcrumbs-box { width: 100%; padding: 0 0 40px 0; color: #888; font-size: 0.9em;}
    section#about .column-full .breadcrumbs-box a { color: #888; text-decoration: none;}
    section#about .column-full .breadcrumbs-box a:hover { text-decoration: underline;}
    
    section#about .column-full .title-name { clear: both; width: 100%; padding: 0 0 5px 0; margin: 0 0 40px 0; color: #e50012; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #e50012 solid;}
    
    section#about .column-full .about-content { clear: both; width: 100%; padding: 0 60px; line-height: 1.8em; box-sizing: border-box;}    
    section#about .column-full .about-content img.about-pic-1 { width: 90%; height: auto; margin: 0 auto 40px auto; display: block;}
    section#about .column-full .about-content ul.num { padding: 0 0 0 24px; margin: 0; list-style: decimal; display: block;}
    section#about .column-full .about-content ul.num li { padding: 0; margin: 0;}
    
    
    
    /********** section#news **********/
    
    section#about .column-full .news-list { clear: both; width: 90%; padding: 10px 20px; margin: 0 auto; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}
    section#about .column-full .news-list:hover { background-color: #f1f1f1;}
    section#about .column-full .news-list .icon { width: 60px; color: #e50012; font-size: 1.4em;}
    section#about .column-full .news-list .title { width: calc(100% - 160px);}
    section#about .column-full .news-list .title a { color: #414141; text-decoration: none;}
    section#about .column-full .news-list .title a:hover { color: #e50012;}
    section#about .column-full .news-list .date { width: 100px; font-size: 0.9em; text-align: right;}
    
    section#about .column-full .news-content { clear: both; width: 90%; margin: 30px auto 0 auto; line-height: 1.8em;}
    section#about .column-full .news-content img { max-width: 100%; height: auto;}
    section#about .column-full .news-content a { color: #414141; text-decoration: underline;}
    section#about .column-full .news-content a:hover { color: #e50012;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
    
    section#products .column-lf { width: 100%; padding: 0 0 30px 0; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #e50012; font-size: 1.6em; font-weight: 400; background-color: #231815; display: flex; justify-content: center; align-items: flex-end;}
    section#products .column-lf .top-title font.mo-icon { margin: 0 0 0 10px; }
    section#products .column-lf .top-title-triangle { border-color: #231815 transparent transparent transparent; border-style: solid solid solid solid; border-width: 35px 150px 35px 150px; height: 0px; width: 0px; margin: 0 auto;}
    section#products .column-lf .left-nav { width: 100%; padding: 0 0 30px 0; box-sizing: border-box; display: block;}
    section#products .column-lf .left-nav ul.lf-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    section#products .column-lf .left-nav ul.lf-nav li { width: 100%; padding: 0; margin: 0;}
    section#products .column-lf .left-nav ul.lf-nav li a { padding: 10px 30px; color: #e50012; font-size: 1.2em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
    section#products .column-lf .left-nav ul.lf-nav li a:hover { background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li a.sel { background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup { width: 100%; padding: 0 20px; margin: 0; list-style: none; display: block; box-sizing: border-box;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li { width: 100%; padding: 0; margin: 0;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a { width: 100%; padding: 10px 30px; color: #666; font-size: 1em; text-decoration: none; box-sizing: border-box; display: block;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a:hover { color: #e50012; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { color: #e50012; background-color: #fff;}
    
    section#products .column-rt { width: 100%; margin: 40px 0 0 0;}
    section#products .column-rt .breadcrumbs-box { width: 100%; padding: 0 0 40px 0; color: #888; font-size: 0.9em;}
    section#products .column-rt .breadcrumbs-box a { color: #888; text-decoration: none;}
    section#products .column-rt .breadcrumbs-box a:hover { text-decoration: underline;}
    
    section#products .column-rt .pro-title-name { clear: both; width: 100%; padding: 0 0 5px 0; margin: 0 0 40px 0; color: #e50012; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #e50012 solid;}
    
    section#products .column-rt .pro-list-box { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#products .column-rt .pro-list-box .pro-list { width: calc(100% / 4 - 30px); margin: 0 15px 20px 15px; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-list-box .pro-list a { width: 100%; height: 100%; color: #414141; text-decoration: none; display: block;}
    section#products .column-rt .pro-list-box .pro-list a:hover { -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);}
    section#products .column-rt .pro-list-box .pro-list a .pic { width: 100%; }
    section#products .column-rt .pro-list-box .pro-list a .pic img { width: 100%; height: auto;}
    section#products .column-rt .pro-list-box .pro-list a .name { width: 100%; padding: 10px; font-size: 0.9em; line-height: 1.4em; box-sizing: border-box;}
    
    
    
    /********** section#product detail **********/
    
    section#products .column-rt .pro-detail-box { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
    section#products .column-rt .pro-detail-box .pro-pics-box { width: calc(50% - 20px); margin: 0 20px 40px 0;}
    section#products .column-rt .pro-detail-box .pro-pics-box .bigpic { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-detail-box .pro-pics-box .bigpic img { width: 100%; height: auto;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox { clear: both; width: 100%;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb li { width: calc(100% / 4 - 10px); margin: 0 5px 10px 5px; border: 1px #ccc solid; box-sizing: border-box; flex-wrap: wrap;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb li img { width: 100%; height: auto; cursor: pointer;}
    section#products .column-rt .pro-detail-box .pro-infor-box { width: calc(50% - 20px); margin: 0 0 40px 20px;}
    section#products .column-rt .pro-detail-box .pro-infor-box .title-name { width: 100%; padding: 0 0 5px 0; margin: 0 0 30px 0; font-size: 1.4em; border-bottom: 1px #414141 solid;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor { width: 100%; line-height: 1.8em;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box { width: 140px; margin: 30px 10px 0 0; float: left;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box a { padding: 3px 5px; color: #e50012; text-align: center; text-decoration: none; border: 1px #e50012 solid; border-radius: 8px; background-color: #eee; box-sizing: border-box; display: block;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box a:hover { color: #eee; background-color: #e50012;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 20px 0; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    
    section#products .column-rt .pro-intro-content { clear: both; width: 100%; position: relative;}
    section#products .column-rt .pro-intro-content .tab-content { width: 100%; padding: 20px; line-height: 1.8em; background-color: #fff; box-sizing: border-box; z-index: 9;}
    section#products .column-rt .pro-intro-content .tab-content div img { max-width: 100%; height: auto;}
    
    
    
    /********** section#contact **********/
    
    section#about .column-full .contact-content { clear: both; width: 100%;}
    
    section#about .column-full .contact-content .column-helf { width: 80%; padding: 0 20px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
    section#about .column-full .contact-content .column-helf .icon { width: 50px; margin: 0 0 10px 0; color: #e50012; font-size: 1.8em; text-align: center;}
    section#about .column-full .contact-content .column-helf .text { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1.1em;}
    section#about .column-full .contact-content .column-helf .text font.title { font-size: 1.2em; font-weight: 500;}
    section#about .column-full .contact-content .column-helf .map { width: 100%; margin: 20px 0 0 0;}
    section#about .column-full .contact-content .column-helf .map iframe { width: 100%; height: 300px;}
    
    section#about .column-full .contact-content hr { width: 100%; margin: 40px 0; border: 1px #ccc solid;}
    
    section#about .column-full .contact-content .column-table { width: 100%; padding: 0 10%; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table input[type=text], input[type=tel], input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; border-radius: 8px; background-color: #fff; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table textarea { width: 100%; height: 100px; padding: 10px; margin: 0 0 10px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; border-radius: 8px; background-color: #fff; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table input[type=button] { clear: both; padding: 6px 20px; margin: 20px 0 0 0; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #e50012; cursor: pointer;}
    section#about .column-full .contact-content .column-table input[type=button]:hover { background-color: #e50012;}



    /********** site map **********/

    .sitemap-content { clear: both; width: 100%; padding: 80px 0;}
    .sitemap-content ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
    .sitemap-content ul.sitemap li { padding: 10px; margin: 0;}
    .sitemap-content ul.sitemap li a { padding: 5px 20px; color: #e50012; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
    .sitemap-content ul.sitemap li a:hover { color: #e50012; border-radius: 10px; background-color: #231815;}



    /********** 404 error **********/

    .error-sub-title { clear: both; width: 100%; padding: 30px 0; color: #e50012; font-size: 5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
    .error-404 { width: 100%; padding: 50px 0; color: #e50012; font-size: 2rem; font-weight: 500; text-align: center;}
    .error-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
    .error-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #e50012; display: block;}
    .error-goback-bt a:hover { color: #e50012; background-color: #231815;}
    
        
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; padding: 40px; background-color: #231815; box-sizing: border-box;}
    
    footer .footer-logo { width: 100%; display: flex; justify-content: center; align-items: flex-end;}
    footer .footer-logo img.footer-logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    footer .footer-logo img.footer-title { width: 120px; height: auto;}
    
    ul.footer-nav { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    ul.footer-nav li { padding: 0 10px; margin: 0;}
    ul.footer-nav li a { padding: 5px 0; color: #fff; font-size: 1.1rem; text-decoration: none; display: block;}
    ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
    
    .footer-copyright { clear: both; width: 100%; padding: 15px; font-size: 0.9em; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    
    
}


@media screen and (max-width: 767px) {

    aside#contact-us { width: 160px; position: fixed; bottom: 0; left: calc(50% - 80px); z-index: 99999;}
    aside#contact-us a { width: 100%; padding: 8px 0; color: #fff; font-size: 0.9rem; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #e50012; text-decoration: none; display: block;}
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px 10px; background-color: #fff; box-sizing: border-box; position: relative;}
    
    header .logo-bx { width: 280px; margin: 0 auto;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
    header .logo-bx a img.logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    header .logo-bx a img.title { width: 120px; height: auto;}
    
    header nav#pc { display: none;}
    header nav#pad { display: none;}
    
    header nav#mo { width: 100%;}
    
    header nav#mo .nav-icon { width: 50px; margin: 20px auto 0 auto; color: #231815; font-size: 2.4em; line-height: 1em; text-align: center;}
    
    header nav#mo ul.nav { width: 100%; padding: 40px 20px; margin: 0; list-style: none; background-color: #231815; box-sizing: border-box; display: none; position: absolute; top: 145px; left: 0; z-index: 999;}
    header nav#mo ul.nav li { padding: 0; margin: 0; text-align: center;}
    header nav#mo ul.nav li a { padding: 15px 15px; color: #fff; font-size: 1.2em; font-weight: 500; border-radius: 6px; background-color: #231815; text-decoration: none; display: block;}
    header nav#mo ul.nav li a:active { color: #231815; background-color: #fff;}
    
    .header-search-box { clear: both; width: 300px; margin: 0 auto;}
    .header-search-box input[type=search] { width: 100%; padding: 5px; color: #231815; font: 1rem "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #231815 solid; background-color: #fff; box-sizing: border-box;}
    
    
    
    /********** banner **********/
    
    .banner-box { width: 100%; overflow: hidden;}
    
    .page-banner { width: 100%; height: 21vw; overflow: hidden;}
    .page-banner img { width: 100%; height: auto;}
    
    
    
    /********** section#hp-items **********/
    
    section#hp-items { clear: both; width: 100%; padding: 40px 15px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-items .sub-title { width: 100%; margin: 0 0 40px 0; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-items .item-bx { width: calc(100% / 2 - 10px); margin: 0 5px 20px 5px;}
    section#hp-items .item-bx a { width: 100%; height: 100%; padding: 10px; text-decoration: none; display: block; box-sizing: border-box;}
    section#hp-items .item-bx a:hover { background-color: #efefef;}
    section#hp-items .item-bx a .pic { width: 100%; height: 25vw; border-radius: 4vw; border: 6px #fff solid; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); display: flex; justify-content: center; align-items: center;}
    section#hp-items .item-bx a .pic img { width: 100%; height: auto;}
    section#hp-items .item-bx a .pic img { width: 100%; height: auto;}
    section#hp-items .item-bx a .title { width: 100%; padding: 20px 0 10px 0; color: #666; font-size: 1rem; font-weight: 500; text-align: center;}
    section#hp-items .item-bx a .intro { width: 100%; color: #666; font-size: 0.8rem;}
    
    
    
    /********** section#hp-company **********/
    
    section#hp-company { clear: both; width: 100%; padding: 0 0 60px 0; background-color: #f9f9f9; box-sizing: border-box;}
    section#hp-company .left-text { width: 100%; padding: 40px 0;}
    section#hp-company .left-text .title { width: calc(100% - 20px); padding: 3px 10px; margin: 0 0 0 20px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-company .left-text .text { width: 100%; padding: 30px; line-height: 2em; box-sizing: border-box;}
    section#hp-company .left-text .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-company .left-text .more a { color: #707070; text-decoration: none;}
    section#hp-company .left-text .more a:hover { text-decoration: underline;}
    section#hp-company .right-pic { display: none;}
    section#hp-company .right-pic-mo { width: 100%; height: 50vw; overflow: hidden;}
    section#hp-company .right-pic-mo img { width: 100%; height: auto;}
    
    
    
    /********** section#hp-news **********/
    
    section#hp-news { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
    section#hp-news .left-pic { width: 100%; height: 50vw; overflow: hidden;}
    section#hp-news .left-pic img { width: 100%; height: auto;}
    section#hp-news .right-news { width: 100%; padding: 40px 0 0 0;}
    section#hp-news .right-news .title { width: calc(100% - 20px); padding: 3px 10px; margin: 0 0 0 20px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-news .right-news .news-list { width: 100%; padding: 30px 15px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#hp-news .right-news .news-list .date { width: 60px; padding: 6px 0; margin: 0 20px 20px 0; color: #231815; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #231815 solid; border-radius: 8px; box-sizing: border-box;}
    section#hp-news .right-news .news-list .news { width: calc(100% - 80px); margin: 0 0 20px 0;}
    section#hp-news .right-news .news-list .news a { color: #414141; text-decoration: none;}
    section#hp-news .right-news .news-list .news a:hover { text-decoration: underline;}
    section#hp-news .right-news .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-news .right-news .more a { color: #707070; text-decoration: none;}
    section#hp-news .right-news .more a:hover { text-decoration: underline;}
    
    
    
    /********** section#hp-products **********/
    
    section#hp-products { clear: both; width: 100%; padding: 40px 0; background-color: #f9f9f9; box-sizing: border-box;}
    section#hp-products .title { width: calc(100% - 20px); margin: 0 0 40px 20px; padding: 3px 10px; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    section#hp-products .pro-list { width: 80%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#hp-products .pro-list .pro-box { width: calc(100% - 40px); margin: 0 20px 30px 20px; border: 1px #ccc solid; box-sizing: border-box;}
    section#hp-products .pro-list .pro-box a { width: 100%; height: auto; color: #414141; text-decoration: none; display: block;}
    section#hp-products .pro-list .pro-box a:active {-moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
    section#hp-products .pro-list .pro-box a .pic { width: 100%;}
    section#hp-products .pro-list .pro-box a .pic img { width: 100%; height: auto;}
    section#hp-products .pro-list .pro-box a .name { width: 100%; padding: 10px; box-sizing: border-box;}
    section#hp-products .more { width: 100%; padding: 0 50px 0 0; font-size: 0.9em; text-align: right; box-sizing: border-box;}
    section#hp-products .more a { color: #707070; text-decoration: none;}
    section#hp-products .more a:hover { text-decoration: underline;}
    
    
    
    /********** section#about **********/
    
    section#about { clear: both; width: 100%; padding: 40px 20px 80px 20px; box-sizing: border-box;}
    
    section#about .column-full { width: 100%;}
    
    section#about .column-full .breadcrumbs-box { width: 100%; padding: 0 0 40px 0; color: #888; font-size: 0.9em;}
    section#about .column-full .breadcrumbs-box a { color: #888; text-decoration: none;}
    section#about .column-full .breadcrumbs-box a:hover { text-decoration: underline;}
    
    section#about .column-full .title-name { clear: both; width: 100%; padding: 0 0 5px 0; margin: 0 0 40px 0; color: #e50012; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #e50012 solid;}
    
    section#about .column-full .about-content { clear: both; width: 100%; line-height: 1.8em;}    
    section#about .column-full .about-content img.about-pic-1 { width: 100%; height: auto; margin: 0 0 20px 0;}
    section#about .column-full .about-content ul.num { padding: 0 0 0 24px; margin: 0; list-style: decimal; display: block;}
    section#about .column-full .about-content ul.num li { padding: 0; margin: 0;}
    
    
    
    /********** section#news **********/
    
    section#about .column-full .news-list { clear: both; width: 100%; padding: 10px 0; margin: 0 auto; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
    section#about .column-full .news-list:active { background-color: #f1f1f1;}
    section#about .column-full .news-list .icon { width: 40px; color: #e50012; font-size: 1.4em;}
    section#about .column-full .news-list .title { width: calc(100% - 60px);}
    section#about .column-full .news-list .title a { color: #414141; text-decoration: none;}
    section#about .column-full .news-list .title a:active { color: #e50012;}
    section#about .column-full .news-list .date { width: 100%; margin: 10px 0 0 0; font-size: 0.9em; text-align: right;}
    
    section#about .column-full .news-content { clear: both; width: 100%; margin: 30px auto 0 auto; line-height: 1.8em;}
    section#about .column-full .news-content img { max-width: 100%; height: auto;}
    section#about .column-full .news-content a { color: #414141; text-decoration: underline;}
    section#about .column-full .news-content a:active { color: #e50012;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 40px 15px; box-sizing: border-box;}
    
    section#products .column-lf { width: 100%; padding: 0 0 40px 0; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #e50012; font-size: 1.6em; font-weight: 400; background-color: #231815; display: flex; justify-content: center; align-items: flex-end;}
    section#products .column-lf .top-title font.mo-icon { margin: 0 0 0 10px; }
    section#products .column-lf .top-title-triangle { border-color: #231815 transparent transparent transparent; border-style: solid solid solid solid; border-width: 35px 150px 35px 150px; height: 0px; width: 0px; margin: 0 auto;}
    section#products .column-lf .left-nav { width: 100%; padding: 0 0 30px 0; box-sizing: border-box; display: block;}
    section#products .column-lf .left-nav ul.lf-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    section#products .column-lf .left-nav ul.lf-nav li { width: 100%; padding: 0; margin: 0;}
    section#products .column-lf .left-nav ul.lf-nav li a { padding: 10px 30px; color: #e50012; font-size: 1.2em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
    section#products .column-lf .left-nav ul.lf-nav li a:hover { background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li a.sel { background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup { width: 100%; padding: 0 20px; margin: 0; list-style: none; display: block; box-sizing: border-box;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li { width: 100%; padding: 0; margin: 0;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a { width: 100%; padding: 10px 30px; color: #666; font-size: 1em; text-decoration: none; box-sizing: border-box; display: block;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a:hover { color: #e50012; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { color: #e50012; background-color: #fff;}
    
    section#products .column-rt { width: 100%; margin: 40px 0 0 0;}
    section#products .column-rt .breadcrumbs-box { width: 100%; padding: 0 0 40px 0; color: #888; font-size: 0.9em;}
    section#products .column-rt .breadcrumbs-box a { color: #888; text-decoration: none;}
    section#products .column-rt .breadcrumbs-box a:hover { text-decoration: underline;}
    
    section#products .column-rt .pro-title-name { clear: both; width: 100%; padding: 0 0 5px 0; margin: 0 0 40px 0; color: #e50012; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #e50012 solid;}
    
    section#products .column-rt .pro-list-box { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#products .column-rt .pro-list-box .pro-list { width: calc(100% / 2 - 20px); margin: 0 10px 20px 10px; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-list-box .pro-list a { width: 100%; height: 100%; color: #414141; text-decoration: none; display: block;}
    section#products .column-rt .pro-list-box .pro-list a:hover { -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);}
    section#products .column-rt .pro-list-box .pro-list a .pic { width: 100%; }
    section#products .column-rt .pro-list-box .pro-list a .pic img { width: 100%; height: auto;}
    section#products .column-rt .pro-list-box .pro-list a .name { width: 100%; padding: 10px; font-size: 0.9em; line-height: 1.4em; box-sizing: border-box;}
    
    
    
    /********** section#product detail **********/
    
    section#products .column-rt .pro-detail-box { clear: both; width: 100%;}
    section#products .column-rt .pro-detail-box .pro-pics-box { width: 100%; margin: 0 0 40px 0;}
    section#products .column-rt .pro-detail-box .pro-pics-box .bigpic { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; box-sizing: border-box;}
    section#products .column-rt .pro-detail-box .pro-pics-box .bigpic img { width: 100%; height: auto;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox { clear: both; width: 100%;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb li { width: calc(100% / 4 - 10px); margin: 0 5px 10px 5px; border: 1px #ccc solid; box-sizing: border-box; flex-wrap: wrap;}
    section#products .column-rt .pro-detail-box .pro-pics-box .thumbpicbox ul.thumb li img { width: 100%; height: auto; cursor: pointer;}
    section#products .column-rt .pro-detail-box .pro-infor-box { width: 100%; margin: 0 0 40px 0;}
    section#products .column-rt .pro-detail-box .pro-infor-box .title-name { width: 100%; padding: 0 0 5px 0; margin: 0 0 30px 0; font-size: 1.4em; border-bottom: 1px #414141 solid;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor { width: 100%; line-height: 1.8em;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box { width: 140px; margin: 30px 10px 0 0; float: left;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box a { padding: 3px 5px; color: #e50012; text-align: center; text-decoration: none; border: 1px #e50012 solid; border-radius: 8px; background-color: #eee; box-sizing: border-box; display: block;}
    section#products .column-rt .pro-detail-box .pro-infor-box .infor .bt-box a:hover { color: #eee; background-color: #e50012;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 20px 0; color: #e50012; font-size: 1.4em; font-weight: 500; border-left: 7px #e50012 solid; box-sizing: border-box;}
    
    section#products .column-rt .pro-intro-content { clear: both; width: 100%; position: relative;}
    section#products .column-rt .pro-intro-content .tab-content { width: 100%; padding: 20px; line-height: 1.8em; background-color: #fff; box-sizing: border-box; z-index: 9;}
    section#products .column-rt .pro-intro-content .tab-content div img { max-width: 100%; height: auto;}
    
    
    /********** section#contact **********/
    
    section#about .column-full .contact-content { clear: both; width: 100%;}
    
    section#about .column-full .contact-content .column-helf { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
    section#about .column-full .contact-content .column-helf .icon { width: 50px; margin: 0 0 10px 0; color: #e50012; font-size: 1.8em; text-align: center;}
    section#about .column-full .contact-content .column-helf .text { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1.1em;}
    section#about .column-full .contact-content .column-helf .text font.title { font-size: 1.2em; font-weight: 500;}
    section#about .column-full .contact-content .column-helf .map { width: 100%; margin: 20px 0 0 0;}
    section#about .column-full .contact-content .column-helf .map iframe { width: 100%; height: 300px;}
    
    section#about .column-full .contact-content hr { width: 100%; margin: 10px 0 30px 0; border: 1px #ccc solid;}
    
    section#about .column-full .contact-content .column-table { width: 100%;}
    section#about .column-full .contact-content .column-table input[type=text], input[type=tel], input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; border-radius: 8px; background-color: #fff; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table textarea { width: 100%; height: 100px; padding: 10px; margin: 0 0 10px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; border-radius: 8px; background-color: #fff; box-sizing: border-box;}
    section#about .column-full .contact-content .column-table input[type=button] { clear: both; padding: 6px 20px; margin: 20px 0 0 0; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #e50012; cursor: pointer;}
    section#about .column-full .contact-content .column-table input[type=button]:hover { background-color: #e50012;}



    /********** site map **********/

    .sitemap-content { clear: both; width: 100%; padding: 40px 0;}
    .sitemap-content ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    .sitemap-content ul.sitemap li { padding: 10px; margin: 0; text-align: center;}
    .sitemap-content ul.sitemap li a { padding: 10px 20px; color: #e50012; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
    .sitemap-content ul.sitemap li a:active { color: #e50012; border-radius: 10px; background-color: #231815;}



    /********** 404 error **********/

    .error-sub-title { clear: both; width: 100%; padding: 30px 0; color: #e50012; font-size: 5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
    .error-404 { width: 100%; padding: 50px 0; color: #e50012; font-size: 2rem; font-weight: 500; text-align: center;}
    .error-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
    .error-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #e50012; display: block;}
    .error-goback-bt a:hover { color: #e50012; background-color: #231815;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; padding: 40px 20px; background-color: #231815; box-sizing: border-box;}
    
    footer .footer-logo { width: 100%; display: flex; justify-content: center; align-items: flex-end;}
    footer .footer-logo img.footer-logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    footer .footer-logo img.footer-title { width: 120px; height: auto;}
    
    ul.footer-nav { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    ul.footer-nav li { padding: 0 10px; margin: 0;}
    ul.footer-nav li a { padding: 5px 0; color: #fff; font-size: 1.1rem; text-decoration: none; display: block;}
    ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
    
    .footer-copyright { clear: both; width: 100%; padding: 15px 15px 60px 15px; font-size: 0.8em; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    
    
}