@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-blue { color: #005bab;}


/********** 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 #005bab 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: #005bab; background-color: #eee;}
#page-num-box ul.page li a.sel { color: #fff; background-color: #005bab;}


/********** 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: #005bab; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #f1f1f1; border: 1px #005bab solid; border-radius: 8px; cursor: pointer;}
#goback-bt input[type=button]:hover { color: #f1f1f1; background-color: #005bab;}



@media screen and (min-width: 1280px) {
    
    
    /********** header **********/
    
    header { width: 100%; padding: 0 calc(50% - 620px); background-color: #ccc; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    
    header .logo-bx { width: 440px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    header .logo-bx a img.logo { width: 160px; height: auto; margin: 0 20px 0 0;}
    header .logo-bx a img.title { width: 200px; height: auto;}
    
    header nav#pad { display: none;}
    header nav#mo { display: none;}
    
    header nav#pc { width: calc(100% - 440px); display: flex; justify-content: flex-start; 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: 20px 0; margin: 0; position: relative;}
    header nav#pc ul.nav li a { padding: 3px 20px; color: #005bab; font-size: 1.2rem; font-weight: 500; border-radius: 6px; background-color: #ccc; text-decoration: none; display: block; cursor: pointer;}
    header nav#pc ul.nav li a:hover { color: #fff; background-color: #005bab;}
    header nav#pc ul.nav li a.sel { color: #fff; background-color: #005bab;}
    header nav#pc ul.nav li ul.nav-popup { width: 200px; padding: 0; margin: 0; list-style: none; display: none; position: absolute; top: 65px; left: calc(50% - 100px); z-index: 999;}
    header nav#pc ul.nav li ul.nav-popup li { width: 100%; padding: 0; margin: 0;}
    header nav#pc ul.nav li ul.nav-popup li a { width: 100%; padding: 20px; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0; box-sizing: border-box;}
    header nav#pc ul.nav li ul.nav-popup li a:hover { color: #005bab; background-color: #eee;}

    .header-search-box { width: 80%; margin: 40px auto 0 auto;}
    .header-search-box input[type=search] { width: 100%; padding: 5px; color: #005bab; font: 1rem "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #005bab 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: 40px 0; 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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 { width: 50%; height: 400px; overflow: hidden; position: relative;}
    section#hp-company .right-pic .triangle-1 { border-color: #f9f9f9 transparent transparent transparent; border-style: solid solid solid solid; border-width: 400px 125px 0px 0px; height: 0px; width: 0px; position: absolute; top: 0; left: 0; z-index: 10;}
    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: 0 calc(50% - 620px); margin: 0 0 80px 0; 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 .triangle-2 { border-color: transparent #ffffff transparent transparent; border-style: solid solid solid solid; border-width: 0px 125px 400px 0px; height: 0px; width: 0px; position: absolute; top: 0; right: 0; z-index: 10;}
    section#hp-news .left-pic img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
    section#hp-news .right-news { width: 50%;}
    section#hp-news .right-news .title { width: 100%; padding: 3px 10px; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: #005bab; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #005bab 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 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: #005bab; font-size: 1.6em; border-bottom: 1px #005bab 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 0 40px 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;}


    .certificates-content { clear: both; width: 100%;}
    .certificates-content img.logo { width: 300px; height: auto; margin: 0 0 30px 0;}
    .certificates-content img.paper { max-width: 100%; height: auto;}
    .certificates-content hr { clear: both; width: 100%; margin: 50px 0; border: 1px #ccc solid;}
    
    
    
    /********** 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: #005bab; 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: #005bab;}
    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: #005bab;}
    
    
    
    /********** 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; margin: 0 40px 0 0; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #b4b4b5; font-size: 1.6em; font-weight: 400; background-color: #005bab; 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: #005bab 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: #005bab; 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: #005bab; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { color: #005bab; 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: #005bab; font-size: 1.6em; border-bottom: 1px #005bab 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: #005bab; text-align: center; text-decoration: none; border: 1px #005bab 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: #005bab;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 20px 0; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: #005bab; 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=submit] { 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: #005bab; cursor: pointer;}
    section#about .column-full .contact-content .column-table input[type=submit]:hover { background-color: #005bab;}



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

    ul#sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
    ul#sitemap li { width: 200px; padding: 20px 0; margin: 0; text-align: center;}
    ul#sitemap li a { color: #005bab; font-size: 1.2rem; font-weight: 600; text-decoration: none; border-bottom: 2px #005bab solid;}
    ul#sitemap li a:hover { color: #414141;}
    ul#sitemap li ul.sitemap-pop { width: 100%; padding: 10px 0; margin: 0; list-style: none; display: block;}
    ul#sitemap li ul.sitemap-pop li { width: 100%; padding: 8px 0; margin: 0;}
    ul#sitemap li ul.sitemap-pop li a { color: #414141; font-size: 1.1rem; text-decoration: none; border-bottom: 0;}
    ul#sitemap li ul.sitemap-pop li a:hover { color: #005bab;}



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

    .error-sub-title { clear: both; width: 100%; padding: 30px 0; color: #005bab; font-size: 5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
    .error-404 { width: 100%; padding: 50px 0; color: #005bab; 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: #005bab; display: block;}
    .error-goback-bt a:hover { color: #005bab; background-color: #ccc;}
    
    
    
    /********** footer **********/

    .footer-cerit { clear: both; width: 100%; padding: 20px calc(50% - 620px); box-sizing: border-box; border-top: 1px #005bab solid; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .footer-cerit img { width: 100px; height: auto; margin: 20px;}
    
    footer { clear: both; width: 100%; padding: 40px calc(50% - 620px); background-color: #005bab; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}    
    
    footer .footer-logo { width: 400px; display: flex; justify-content: flex-start; align-items: center;}
    footer .footer-logo img.footer-logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    footer .footer-logo img.footer-title { width: 160px; height: auto;}
    
    footer ul.footer-nav { width: calc(100% - 400px); padding: 0; margin: 0; list-style-type: none; display: flex; justify-content: flex-end; align-items: center;}
    footer ul.footer-nav li { padding: 0 10px; margin: 0;}
    footer ul.footer-nav li a { color: #fff; font-size: 1rem; line-height: 1.4em; text-decoration: none;}
    footer 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) {
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px; background-color: #ccc; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative;}
    
    header .logo-bx { width: 440px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    header .logo-bx a img.logo { width: 160px; height: auto; margin: 0 20px 0 0;}
    header .logo-bx a img.title { width: 200px; height: auto;}
    
    header nav#pc { display: none;}
    header nav#mo { display: none;}
    
    header nav#pad { width: calc(100% - 440px); display: flex; justify-content: flex-end; align-items: center;}
    header nav#pad .nav-icon { width: 60px; color: #005bab; font-size: 2.4em; text-align: center;}    
    header nav#pad ul.nav { width: 100%; padding: 40px; margin: 0; list-style: none; background-color: #005bab; box-sizing: border-box; display: none; position: absolute; top: 95px; 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: 15px; color: #fff; font-size: 1.2em; font-weight: 500; border-radius: 6px; background-color: #005bab; text-decoration: none; display: block; cursor: pointer;}
    header nav#pad ul.nav li a:hover { color: #005bab; background-color: #fff;}
    header nav#pad ul.nav li a:active { color: #005bab; background-color: #fff;}
    header nav#pad ul.nav li ul.nav-popup { width: 100%; padding: 40px 0; margin: 0; box-sizing: border-box; background-color: #ccc; list-style: none; display: none;}
    header nav#pad ul.nav li ul.nav-popup li { width: 100%; padding: 0; margin: 0;}
    header nav#pad ul.nav li ul.nav-popup li a { width: 100%; padding: 20px; color: #005bab; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0; background-color: #ccc; box-sizing: border-box;}
    header nav#pad ul.nav li ul.nav-popup li a:hover { color: #005bab; background-color: #fff;}
    header nav#pad ul.nav li ul.nav-popup li a:active { color: #005bab; background-color: #fff;}

    .header-search-box { width: 300px; margin: 0 auto;}
    .header-search-box input[type=search] { width: 100%; padding: 5px; color: #005bab; font: 1rem "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #005bab 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: 120px; border-radius: 40px 0; 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 60px 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 40px; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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 { width: 50%; overflow: hidden; position: relative;}
    section#hp-company .right-pic .triangle-1 { border-color: #f9f9f9 transparent transparent transparent; border-style: solid solid solid solid; border-width: 500px 125px 0px 0px; height: 0px; width: 0px; position: absolute; top: 0; left: 0; z-index: 10;}
    section#hp-company .right-pic img { width: auto; height: 100%; position: absolute; top: 0; right: 0;}
    
    
    
    /********** section#hp-news **********/
    
    section#hp-news { clear: both; width: 100%; padding: 0; margin: 0 0 60px 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#hp-news .left-pic { width: 50%; overflow: hidden; position: relative;}
    section#hp-news .left-pic .triangle-2 { border-color: transparent #ffffff transparent transparent; border-style: solid solid solid solid; border-width: 0px 125px 500px 0px; height: 0px; width: 0px; position: absolute; top: 0; right: 0; z-index: 10;}
    section#hp-news .left-pic img { width: auto; height: 100%; position: absolute; top: 0; left: 0;}
    section#hp-news .right-news { width: 50%;}
    section#hp-news .right-news .title { width: 100%; padding: 3px 10px; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 solid; box-sizing: border-box;}
    section#hp-news .right-news .news-list { width: 100%; 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: #005bab; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #005bab 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; background-color: #f9f9f9; box-sizing: border-box;}
    section#hp-products .title { width: 100%; margin: 0 0 40px 0; padding: 3px 10px; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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 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: #005bab; font-size: 1.6em; border-bottom: 1px #005bab 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: 80%; height: auto; margin: 0 0 40px 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;}


    .certificates-content { clear: both; width: 100%;}
    .certificates-content img.logo { width: 300px; height: auto; margin: 0 0 30px 0;}
    .certificates-content img.paper { max-width: 100%; height: auto;}
    .certificates-content hr { clear: both; width: 100%; margin: 50px 0; border: 1px #ccc solid;}
    
    
    
    /********** 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: #005bab; 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: #005bab;}
    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: #005bab;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
    
    section#products .column-lf { width: 100%; padding: 0 0 20px 0; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #b4b4b5; font-size: 1.6em; font-weight: 400; background-color: #005bab; 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: #005bab 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: #005bab; 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: #005bab; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { color: #005bab; 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: #005bab; font-size: 1.6em; border-bottom: 1px #005bab 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: #005bab; text-align: center; text-decoration: none; border: 1px #182d93 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: #005bab;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 20px 0; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: #005bab; 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=submit] { 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: #005bab; cursor: pointer;}
    section#about .column-full .contact-content .column-table input[type=submit]:hover { background-color: #005bab;}



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

    ul#sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
    ul#sitemap li { width: 200px; padding: 20px 0; margin: 0; text-align: center;}
    ul#sitemap li a { color: #005bab; font-size: 1.2rem; font-weight: 600; text-decoration: none; border-bottom: 2px #005bab solid;}
    ul#sitemap li a:hover { color: #414141;}
    ul#sitemap li ul.sitemap-pop { width: 100%; padding: 10px 0; margin: 0; list-style: none; display: block;}
    ul#sitemap li ul.sitemap-pop li { width: 100%; padding: 8px 0; margin: 0;}
    ul#sitemap li ul.sitemap-pop li a { color: #414141; font-size: 1.1rem; text-decoration: none; border-bottom: 0;}
    ul#sitemap li ul.sitemap-pop li a:hover { color: #005bab;}



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

    .error-sub-title { clear: both; width: 100%; padding: 30px 0; color: #005bab; font-size: 5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
    .error-404 { width: 100%; padding: 50px 0; color: #005bab; 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: #005bab; display: block;}
    .error-goback-bt a:hover { color: #005bab; background-color: #ccc;}
    
        
    
    /********** footer **********/

    .footer-cerit { clear: both; width: 100%; padding: 20px 40px; box-sizing: border-box; border-top: 1px #005bab solid; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .footer-cerit img { width: 100px; height: auto; margin: 20px;}
    
    footer { clear: both; width: 100%; padding: 40px; background-color: #005bab; box-sizing: border-box;}
    
    footer .footer-logo { width: 100%; display: flex; justify-content: center; align-items: center;}
    footer .footer-logo img.footer-logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    footer .footer-logo img.footer-title { width: 160px; height: auto;}
    
    footer ul.footer-nav { width: 100%; padding: 0; margin: 20px 0 0 0; list-style-type: none; display: flex; justify-content: center; align-items: center;}
    footer ul.footer-nav li { padding: 0 10px; margin: 0;}
    footer ul.footer-nav li a { color: #fff; font-size: 1rem; line-height: 1.4em; text-decoration: none;}
    footer 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) {
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px 10px; background-color: #ccc; 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: center;}
    header .logo-bx a img.logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    header .logo-bx a img.title { width: 160px; 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: 0 auto; color: #005bab; font-size: 2.4em; text-align: center;}
    
    header nav#mo ul.nav { width: 100%; padding: 40px 20px; margin: 0; list-style: none; background-color: #005bab; box-sizing: border-box; display: none; position: absolute; top: 120px; 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: 10px 15px; color: #fff; font-size: 1.2em; border-radius: 6px; background-color: #005bab; text-decoration: none; display: block;}
    header nav#mo ul.nav li a:active { color: #005bab; background-color: #fff;}
    header nav#mo ul.nav li ul.nav-popup { width: 100%; padding: 40px 0; margin: 0; box-sizing: border-box; background-color: #ccc; list-style: none; display: none;}
    header nav#mo ul.nav li ul.nav-popup li { width: 100%; padding: 0; margin: 0;}
    header nav#mo ul.nav li ul.nav-popup li a { width: 100%; padding: 20px; color: #005bab; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0; background-color: #ccc; box-sizing: border-box;}
    header nav#mo ul.nav li ul.nav-popup li a:active { color: #005bab; background-color: #fff;}

    .header-search-box { clear: both; width: 300px; margin: 0 auto;}
    .header-search-box input[type=search] { width: 100%; padding: 5px; color: #005bab; font: 1rem "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #005bab 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: 40px 0; 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 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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 { width: 100%; height: 50vw; overflow: hidden; position: relative;}
    section#hp-company .right-pic .triangle-1 { border-color: #f9f9f9 transparent transparent transparent; border-style: solid solid solid solid; border-width: 50vw 18vw 0px 0px; height: 0px; width: 0px; position: absolute; top: 0; left: 0; z-index: 10;}
    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: 0; margin: 0 0 60px 0; box-sizing: border-box;}
    section#hp-news .left-pic { width: 100%; height: 50vw; overflow: hidden; position: relative;}
    section#hp-news .left-pic .triangle-2 { border-color: transparent #ffffff transparent transparent; border-style: solid solid solid solid; border-width: 0px 18vw 50vw 0px; height: 0px; width: 0px; position: absolute; top: 0; right: 0; z-index: 10;}
    section#hp-news .left-pic img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
    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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: #005bab; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #005bab 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: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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% - 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: #005bab; font-size: 1.6em; border-bottom: 1px #005bab 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;}


    .certificates-content { clear: both; width: 100%;}
    .certificates-content img.logo { width: 240px; height: auto; margin: 0 0 30px 0;}
    .certificates-content img.paper { max-width: 100%; height: auto;}
    .certificates-content hr { clear: both; width: 100%; margin: 50px 0; border: 1px #ccc solid;}
    
    
    
    /********** 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: #005bab; 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: #005bab;}
    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: #005bab;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 40px 15px; 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: #b4b4b5; font-size: 1.6em; font-weight: 400; background-color: #005bab; 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: #005bab 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: #005bab; 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: #005bab; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { color: #005bab; 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: #005bab; font-size: 1.6em; border-bottom: 1px #005bab 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: #005bab; text-align: center; text-decoration: none; border: 1px #005bab 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: #005bab;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 20px 0; color: #cd7f32; font-size: 1.4em; font-weight: 500; border-left: 7px #cd7f32 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: #005bab; 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=submit] { 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: #005bab; cursor: pointer;}
    section#about .column-full .contact-content .column-table input[type=submit]:hover { background-color: #005bab;}



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

    ul#sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    ul#sitemap li { width: 100%; padding: 20px 0; margin: 0; text-align: center;}
    ul#sitemap li a { color: #005bab; font-size: 1.2rem; font-weight: 600; text-decoration: none; border-bottom: 2px #005bab solid;}
    ul#sitemap li a:active { color: #414141;}
    ul#sitemap li ul.sitemap-pop { width: 100%; padding: 10px 0; margin: 0; list-style: none; display: block;}
    ul#sitemap li ul.sitemap-pop li { width: 100%; padding: 8px 0; margin: 0;}
    ul#sitemap li ul.sitemap-pop li a { color: #414141; font-size: 1.1rem; text-decoration: none; border-bottom: 0;}
    ul#sitemap li ul.sitemap-pop li a:active { color: #005bab;}



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

    .error-sub-title { clear: both; width: 100%; padding: 30px 0; color: #005bab; font-size: 5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
    .error-404 { width: 100%; padding: 50px 0; color: #005bab; 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: #005bab; display: block;}
    .error-goback-bt a:hover { color: #005bab; background-color: #ccc;}
    
    
    
    /********** footer **********/

    .footer-cerit { clear: both; width: 100%; padding: 30px 40px; box-sizing: border-box; background-color: #fff; border-top: 1px #005bab solid; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .footer-cerit img { width: 100px; height: auto; margin: 10px 20px;}
    
    footer { clear: both; width: 100%; padding: 40px 20px; background-color: #005bab; box-sizing: border-box;}
    
    footer .footer-logo { width: 100%; display: flex; justify-content: center; align-items: center;}
    footer .footer-logo img.footer-logo { width: 120px; height: auto; margin: 0 10px 0 0;}
    footer .footer-logo img.footer-title { width: 160px; height: auto;}
    
    footer ul.footer-nav { width: 100%; padding: 0; margin: 20px 0 0 0; list-style-type: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    footer ul.footer-nav li { padding: 10px; margin: 0;}
    footer ul.footer-nav li a { color: #fff; font-size: 1rem; line-height: 1.4em; text-decoration: none;}
    footer ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
    
    .footer-copyright { clear: both; width: 100%; padding: 15px; font-size: 0.8em; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    
    
}