@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: #b40901;}
.color-blue { color: #182d93;}


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


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



@media screen and (min-width: 1280px) {
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px calc(50% - 620px); background-color: #598ecf; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    
    header .logo-bx { width: 400px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    header .logo-bx a img.logo { width: 300px; height: auto;}
    header .logo-bx a img.title { width: 250px; height: auto;}
    
    header nav#pad { display: none;}
    header nav#mo { display: none;}
    
    header nav#pc { width: calc(100% - 400px);}
    header nav#pc .social-icon-box { width: 100%; padding: 0 15px 0 0; margin: 0 0 30px 0; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box;}
    header nav#pc .social-icon-box .icon { width: 26px; height: 26px; margin: 0 0 0 10px;}
    header nav#pc .social-icon-box .icon a { width: 100%; height: 100%; color: #598ecf; font-size: 1em; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;}
    header nav#pc .social-icon-box .icon a:hover { color: #182d93;}
    
    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; margin: 0;}
    header nav#pc ul.nav li a { padding: 3px 15px; color: #fff; font-size: 1.2em; border-radius: 6px; background-color: #598ecf; text-decoration: none; display: block;}
    header nav#pc ul.nav li a:hover { color: #598ecf; background-color: #fff;}
    
    
    
    /********** 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: center; align-items: stretch;}
    section#hp-items .item-bx { width: calc(100% / 4);}
    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: 200px; border-radius: 40px 0; border: 6px #fff solid; background-color: #fff; 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: #ba252e; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #ba252e 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); margin: 0 0 80px 0; 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: auto; 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; font-size: 1.6em; border-bottom: 1px #414141 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: 500px; height: auto; margin: 0 0 40px 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: #b30a00; 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: #b30a00;}
    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: #b30a00;}
    
    
    
    /********** 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: #fb3736; font-size: 1.6em; font-weight: 400; background-color: #182d93; display: flex; justify-content: center; align-items: flex-end;}
    section#products .column-lf .top-title span.mo-icon { display: none;}
    section#products .column-lf .top-title-triangle { border-color: #182d93 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: #182d93; 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: none; 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: #fb3736; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { background-color: #f8f8f8;}
    
    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; font-size: 1.6em; border-bottom: 1px #414141 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%; height: 10vw; padding: 10px; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    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: #f83436; 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: #f83436;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 40px 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%; padding: 39px 0 0 0; position: relative;}
    section#products .column-rt .pro-intro-content ul#tabs { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; position: absolute; top: 0; left: 0; z-index: 10;}
    section#products .column-rt .pro-intro-content ul#tabs li { width: 120px; padding: 0; margin: 0 4px 0 0;}
    section#products .column-rt .pro-intro-content ul#tabs li a { width: 100%; padding: 5px 0; color: #414141; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #f1f1f1; border: 1px #ccc solid; border-radius: 10px 10px 0 0; display: block;}
    section#products .column-rt .pro-intro-content ul#tabs li a:hover { color: #f83436; background-color: #fff;}
    section#products .column-rt .pro-intro-content ul#tabs li a.sel { color: #f83436; background-color: #fff; border-bottom: 1px #fff solid;}
    section#products .column-rt .pro-intro-content .tab-content { width: 100%; padding: 20px; line-height: 1.8em; background-color: #fff; border: 1px #ccc solid; box-sizing: border-box; z-index: 9;}
    section#products .column-rt .pro-intro-content .tab-content div { display: none;}
    section#products .column-rt .pro-intro-content .tab-content div img { max-width: 100%; height: auto;}


    /********** section#support **********/

    .support-content { clear: both; width: 80%; margin: 0 auto;}
    .support-content .supoort-con-list { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; border-radius: 8px; box-sizing: border-box; overflow: hidden;}
    .support-content .supoort-con-list .top-title { width: 100%; padding: 10px; font-size: 1.1rem; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; flex-wrap: wrap; cursor: pointer;}
    .support-content .supoort-con-list .top-title .icon { width: 40px; text-align: center;}
    .support-content .supoort-con-list .top-title .title { width: calc(100% - 80px); font-weight: 500;}
    .support-content .supoort-con-list .top-title .down { width: 40px; text-align: center;}
    .support-content .supoort-con-list .content { width: 100%; padding: 20px 50px; background-color: #fff; box-sizing: border-box; display: none; justify-content: flex-start; align-items: flex-start;}
    .support-content .supoort-con-list .content .text { width: calc(100% - 60px);}
    .support-content .supoort-con-list .content .icon { width: 60px; font-size: 1.4rem; text-align: center;}
    .support-content .supoort-con-list .content .icon a { color: #414141; text-decoration: none;}
    .support-content .supoort-con-list .content .icon a:hover { color: #598ecf;}


    /********** section#case **********/
    
    .case-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .case-content .case-box { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px;}
    .case-content .case-box a { color: #414141; font-size: 1rem; text-decoration: none;}
    .case-content .case-box a .pic { width: 100%; height: 150px; overflow: hidden;}
    .case-content .case-box a .pic img { width: 100%; height: auto;}
    .case-content .case-box a .title { width: 100%; padding: 5px; box-sizing: border-box; text-align: center;}
    .case-content .case-box a:hover { color: #598ecf;}

    .case-detail_con { clear: both; width: 100%;}
    .case-detail_con .date { width: 100%; padding: 0 0 30px 0; font-size: 1.1rem;}
    .case-detail_con .pic { width: 100%; text-align: center;}
    .case-detail_con .pic img { max-width: 100%; height: auto; margin: 0 0 20px 0;}
    
    
    /********** section#contact **********/
    
    section#about .column-full .contact-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
    
    section#about .column-full .contact-content .column-lf { width: 40%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#about .column-full .contact-content .column-lf .icon { width: 50px; margin: 0 0 10px 0; color: #182d93; font-size: 1.8em; text-align: center;}
    section#about .column-full .contact-content .column-lf .text { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1.2em;}
    section#about .column-full .contact-content .column-lf .map { width: 100%; margin: 20px 0 0 0;}
    section#about .column-full .contact-content .column-lf .map iframe { width: 100%; height: 300px;}
    
    section#about .column-full .contact-content .column-rt { width: 60%; padding: 0 10%; box-sizing: border-box;}
    section#about .column-full .contact-content .column-rt 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-rt 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-rt 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: #f83436; cursor: pointer;}
    section#about .column-full .contact-content .column-rt input[type=submit]:hover { background-color: #c62728;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; padding: 40px calc(50% - 620px); background-color: #598ecf; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    
    footer .footer-logo { width: calc(100% / 3); padding: 50px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
    footer .footer-logo img.logo { width: 300px; height: auto;}
    footer .footer-logo img.title { width: 165px; height: auto;}
    
    footer .footer-add { width: calc(100% / 3); color: #fff;}
    footer .footer-add .title { width: 100%; padding: 0 8px 8px 8px; font-size: 1.1em; border-bottom: 1px #fff solid; box-sizing: border-box;}
    footer .footer-add .add-infor { width: 100%; padding: 20px; box-sizing: border-box;}
    footer .footer-add .add-infor span.name { font-size: 1.1em;}
    
    footer .footer-social { width: calc(100% / 3); display: flex; justify-content: flex-end; align-items: center;}
    footer .footer-social .icon { width: 26px; height: 26px; margin: 0 0 0 10px;}
    footer .footer-social .icon a { width: 100%; height: 100%; color: #598ecf; font-size: 1em; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;}
    footer .footer-social .icon a:hover { color: #182d93;}
    
    .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: #598ecf; box-sizing: border-box; display: flex; justify-content: flex-start; position: relative;}
    
    header .logo-bx { width: 400px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    header .logo-bx a img.logo { width: 300px; height: auto;}
    header .logo-bx a img.title { width: 250px; height: auto;}
    
    header nav#pc { display: none;}
    header nav#mo { display: none;}
    
    header nav#pad { width: calc(100% - 400px);}
    header nav#pad .social-icon-box { width: 100%; padding: 0 15px 0 0; margin: 0 0 20px 0; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box;}
    header nav#pad .social-icon-box .icon { width: 26px; height: 26px; margin: 0 0 0 10px;}
    header nav#pad .social-icon-box .icon a { width: 100%; height: 100%; color: #598ecf; font-size: 1em; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;}
    header nav#pad .social-icon-box .icon a:active { color: #182d93;}
    
    header nav#pad .nav-icon { width: 60px; color: #fff; font-size: 2.4em; text-align: center; float: right;}
    
    header nav#pad ul.nav { width: 100%; padding: 40px; margin: 0; list-style: none; background-color: #598ecf; 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: 10px 15px; color: #fff; font-size: 1.2em; border-radius: 6px; background-color: #598ecf; text-decoration: none; display: block;}
    header nav#pad ul.nav li a:active { color: #598ecf; background-color: #fff;}
    
    
    
    /********** 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 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    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: 18vw; border-radius: 40px 0; border: 6px #fff solid; background-color: #fff; 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; 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: 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: 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: #ba252e; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #ba252e 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; margin: 0 0 80px 0; 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: auto; 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; font-size: 1.6em; border-bottom: 1px #414141 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: 500px; height: auto; margin: 0 0 40px 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: #b30a00; 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: #b30a00;}
    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: #b30a00;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
    
    section#products .column-lf { width: 100%; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #fb3736; font-size: 1.6em; font-weight: 400; background-color: #182d93; display: flex; justify-content: center; align-items: flex-end;}
    section#products .column-lf .top-title span.mo-icon { margin: 0 0 0 10px; }
    section#products .column-lf .top-title-triangle { border-color: #182d93 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: none;}
    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: #182d93; 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: none; 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: #fb3736; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { background-color: #f8f8f8;}
    
    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; font-size: 1.6em; border-bottom: 1px #414141 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%; height: 16vw; padding: 10px; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    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: #f83436; 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: #f83436;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 40px 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%; padding: 39px 0 0 0; position: relative;}
    section#products .column-rt .pro-intro-content ul#tabs { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; position: absolute; top: 0; left: 0; z-index: 10;}
    section#products .column-rt .pro-intro-content ul#tabs li { width: 120px; padding: 0; margin: 0 4px 0 0;}
    section#products .column-rt .pro-intro-content ul#tabs li a { width: 100%; padding: 5px 0; color: #414141; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #f1f1f1; border: 1px #ccc solid; border-radius: 10px 10px 0 0; display: block;}
    section#products .column-rt .pro-intro-content ul#tabs li a:hover { color: #f83436; background-color: #fff;}
    section#products .column-rt .pro-intro-content ul#tabs li a.sel { color: #f83436; background-color: #fff; border-bottom: 1px #fff solid;}
    section#products .column-rt .pro-intro-content .tab-content { width: 100%; padding: 20px; line-height: 1.8em; background-color: #fff; border: 1px #ccc solid; box-sizing: border-box; z-index: 9;}
    section#products .column-rt .pro-intro-content .tab-content div { display: none;}
    section#products .column-rt .pro-intro-content .tab-content div img { max-width: 100%; height: auto;}


    /********** section#support **********/

    .support-content { clear: both; width: 90%; margin: 0 auto;}
    .support-content .supoort-con-list { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; border-radius: 8px; box-sizing: border-box; overflow: hidden;}
    .support-content .supoort-con-list .top-title { width: 100%; padding: 10px; font-size: 1.1rem; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; flex-wrap: wrap; cursor: pointer;}
    .support-content .supoort-con-list .top-title .icon { width: 40px; text-align: center;}
    .support-content .supoort-con-list .top-title .title { width: calc(100% - 80px); font-weight: 500;}
    .support-content .supoort-con-list .top-title .down { width: 40px; text-align: center;}
    .support-content .supoort-con-list .content { width: 100%; padding: 20px 50px; background-color: #fff; box-sizing: border-box; display: none; justify-content: flex-start; align-items: flex-start;}
    .support-content .supoort-con-list .content .text { width: calc(100% - 60px);}
    .support-content .supoort-con-list .content .icon { width: 60px; font-size: 1.4rem; text-align: center;}
    .support-content .supoort-con-list .content .icon a { color: #414141; text-decoration: none;}
    .support-content .supoort-con-list .content .icon a:hover { color: #598ecf;}


    /********** section#case **********/
    
    .case-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .case-content .case-box { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
    .case-content .case-box a { color: #414141; font-size: 1rem; text-decoration: none;}
    .case-content .case-box a .pic { width: 100%; height: 15vw; overflow: hidden;}
    .case-content .case-box a .pic img { width: 100%; height: auto;}
    .case-content .case-box a .title { width: 100%; padding: 5px; box-sizing: border-box; text-align: center;}
    .case-content .case-box a:hover { color: #598ecf;}

    .case-detail_con { clear: both; width: 100%;}
    .case-detail_con .date { width: 100%; padding: 0 0 30px 0; font-size: 1.1rem;}
    .case-detail_con .pic { width: 100%; text-align: center;}
    .case-detail_con .pic img { max-width: 100%; height: auto; margin: 0 0 20px 0;}
        
    
    /********** section#contact **********/
    
    section#about .column-full .contact-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
    
    section#about .column-full .contact-content .column-lf { width: 40%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#about .column-full .contact-content .column-lf .icon { width: 50px; margin: 0 0 10px 0; color: #182d93; font-size: 1.8em; text-align: center;}
    section#about .column-full .contact-content .column-lf .text { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1.2em;}
    section#about .column-full .contact-content .column-lf .map { width: 100%; margin: 20px 0 0 0;}
    section#about .column-full .contact-content .column-lf .map iframe { width: 100%; height: 300px;}
    
    section#about .column-full .contact-content .column-rt { width: 60%; padding: 0 5%; box-sizing: border-box;}
    section#about .column-full .contact-content .column-rt 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-rt 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-rt 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: #f83436; cursor: pointer;}
    section#about .column-full .contact-content .column-rt input[type=submit]:hover { background-color: #c62728;}
    
        
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; padding: 40px 20px; background-color: #598ecf; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    
    footer .footer-logo { width: 40%; padding: 50px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
    footer .footer-logo img.logo { width: 200px; height: auto;}
    footer .footer-logo img.title { width: 165px; height: auto;}
    
    footer .footer-add { width: 40%; color: #fff;}
    footer .footer-add .title { width: 100%; padding: 0 8px 8px 8px; font-size: 1.1em; border-bottom: 1px #fff solid; box-sizing: border-box;}
    footer .footer-add .add-infor { width: 100%; padding: 20px; box-sizing: border-box;}
    footer .footer-add .add-infor span.name { font-size: 1.1em;}
    
    footer .footer-social { width: 20%; display: flex; justify-content: flex-end; align-items: center;}
    footer .footer-social .icon { width: 26px; height: 26px; margin: 0 0 0 10px;}
    footer .footer-social .icon a { width: 100%; height: 100%; color: #598ecf; font-size: 1em; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;}
    footer .footer-social .icon a:hover { color: #182d93;}
    
    .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: #598ecf; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative;}
    
    header .logo-bx { width: 280px;}
    header .logo-bx a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    header .logo-bx a img.logo { width: 200px; height: auto;}
    header .logo-bx a img.title { width: 200px; height: auto;}
    
    header nav#pc { display: none;}
    header nav#pad { display: none;}
    
    header nav#mo { width: calc(100% - 280px);}
    
    header nav#mo .nav-icon { width: 60px; color: #fff; font-size: 2.4em; text-align: right; float: right;}
    
    header nav#mo ul.nav { width: 100%; padding: 40px 20px; margin: 0; list-style: none; background-color: #598ecf; box-sizing: border-box; display: none; position: absolute; top: 90px; 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: #598ecf; text-decoration: none; display: block;}
    header nav#mo ul.nav li a:active { color: #598ecf; background-color: #fff;}
    header nav#mo ul.nav .social-icon-box { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
    header nav#mo ul.nav .social-icon-box .icon { width: 26px; height: 26px; margin: 0 15px;}
    header nav#mo ul.nav .social-icon-box .icon a { width: 100%; height: 100%; color: #598ecf; font-size: 1em; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;}
    header nav#mo ul.nav .social-icon-box .icon a:active { color: #182d93;}
    
    
    
    /********** 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 .item-bx { width: 100%; margin: 0 0 20px 0;}
    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: 50vw; border-radius: 40px 0; border: 6px #fff solid; background-color: #fff; 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; 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: 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: 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: 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 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: #ba252e; font-size: 0.8em; text-align: center; line-height: 1.1em; border: 1px #ba252e 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; margin: 0 0 80px 0; 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% - 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: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; font-size: 1.6em; border-bottom: 1px #414141 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 { max-width: 100%; width: 500px; height: auto; margin: 0 0 40px 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: #b30a00; 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: #b30a00;}
    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: #b30a00;}
    
    
    
    /********** section#products **********/
    
    section#products { clear: both; width: 100%; padding: 40px 15px; box-sizing: border-box;}
    
    section#products .column-lf { width: 100%; background-color: #f8f8f8;}
    section#products .column-lf .top-title { width: 100%; height: 45px; color: #fb3736; font-size: 1.6em; font-weight: 400; background-color: #182d93; display: flex; justify-content: center; align-items: flex-end;}
    section#products .column-lf .top-title span.mo-icon { margin: 0 0 0 10px; }
    section#products .column-lf .top-title-triangle { border-color: #182d93 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: none;}
    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: #182d93; 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: none; 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: #fb3736; background-color: #fff;}
    section#products .column-lf .left-nav ul.lf-nav li ul.popup li a.sel { background-color: #f8f8f8;}
    
    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; font-size: 1.6em; border-bottom: 1px #414141 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%; height: 30vw; padding: 10px; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    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: #f83436; 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: #f83436;}
    
    section#products .column-rt .pro-intro-title { clear: both; width: 100%; padding: 3px 10px; margin: 0 0 40px 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%; padding: 39px 0 0 0; position: relative;}
    section#products .column-rt .pro-intro-content ul#tabs { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; position: absolute; top: 0; left: 0; z-index: 10;}
    section#products .column-rt .pro-intro-content ul#tabs li { width: 120px; padding: 0; margin: 0 4px 0 0;}
    section#products .column-rt .pro-intro-content ul#tabs li a { width: 100%; padding: 5px 0; color: #414141; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #f1f1f1; border: 1px #ccc solid; border-radius: 10px 10px 0 0; display: block;}
    section#products .column-rt .pro-intro-content ul#tabs li a:hover { color: #f83436; background-color: #fff;}
    section#products .column-rt .pro-intro-content ul#tabs li a.sel { color: #f83436; background-color: #fff; border-bottom: 1px #fff solid;}
    section#products .column-rt .pro-intro-content .tab-content { width: 100%; padding: 20px; line-height: 1.8em; background-color: #fff; border: 1px #ccc solid; box-sizing: border-box; z-index: 9;}
    section#products .column-rt .pro-intro-content .tab-content div { display: none;}
    section#products .column-rt .pro-intro-content .tab-content div img { max-width: 100%; height: auto;}


    /********** section#support **********/

    .support-content { clear: both; width: 100%;}
    .support-content .supoort-con-list { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; border-radius: 8px; box-sizing: border-box; overflow: hidden;}
    .support-content .supoort-con-list .top-title { width: 100%; padding: 10px; font-size: 1.1rem; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; flex-wrap: wrap; cursor: pointer;}
    .support-content .supoort-con-list .top-title .icon { width: 40px; text-align: center;}
    .support-content .supoort-con-list .top-title .title { width: calc(100% - 80px); font-weight: 500;}
    .support-content .supoort-con-list .top-title .down { width: 40px; text-align: center;}
    .support-content .supoort-con-list .content { width: 100%; padding: 20px 20px; background-color: #fff; box-sizing: border-box; display: none; justify-content: flex-start; flex-wrap: wrap;}
    .support-content .supoort-con-list .content .text { width: 100%;}
    .support-content .supoort-con-list .content .icon { width: 100%; padding: 10px 0 0 0; font-size: 1.4rem; text-align: left;}
    .support-content .supoort-con-list .content .icon a { color: #414141; text-decoration: none;}
    .support-content .supoort-con-list .content .icon a:hover { color: #598ecf;}


    /********** section#case **********/
    
    .case-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .case-content .case-box { width: calc(100% / 2 - 20px); margin: 0 10px 30px 10px;}
    .case-content .case-box a { color: #414141; font-size: 1rem; text-decoration: none;}
    .case-content .case-box a .pic { width: 100%; height: 22vw; overflow: hidden;}
    .case-content .case-box a .pic img { width: 100%; height: auto;}
    .case-content .case-box a .title { width: 100%; padding: 5px; box-sizing: border-box; text-align: center;}
    .case-content .case-box a:active { color: #598ecf;}

    .case-detail_con { clear: both; width: 100%;}
    .case-detail_con .date { width: 100%; padding: 0 0 30px 0; font-size: 1.1rem;}
    .case-detail_con .pic { width: 100%; text-align: center;}
    .case-detail_con .pic img { max-width: 100%; height: auto; margin: 0 0 20px 0;}
    
    
    /********** section#contact **********/
    
    section#about .column-full .contact-content { clear: both; width: 100%;}
    
    section#about .column-full .contact-content .column-lf { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#about .column-full .contact-content .column-lf .icon { width: 50px; margin: 0 0 10px 0; color: #182d93; font-size: 1.8em; text-align: center;}
    section#about .column-full .contact-content .column-lf .text { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1.2em;}
    section#about .column-full .contact-content .column-lf .map { width: 100%; margin: 20px 0 0 0;}
    section#about .column-full .contact-content .column-lf .map iframe { width: 100%; height: 300px;}
    
    section#about .column-full .contact-content .column-rt { width: 100%; margin: 30px 0 0 0;}
    section#about .column-full .contact-content .column-rt 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-rt 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-rt 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: #f83436; cursor: pointer;}
    section#about .column-full .contact-content .column-rt input[type=submit]:hover { background-color: #c62728;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; padding: 40px 15px; background-color: #598ecf; box-sizing: border-box;}
    
    footer .footer-logo { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
    footer .footer-logo img.logo { width: 80%; height: auto;}
    footer .footer-logo img.title { width: 165px; height: auto;}
    
    footer .footer-add { width: 100%; margin: 0 0 30px 0; color: #fff;}
    footer .footer-add .title { width: 100%; padding: 0 8px 8px 8px; font-size: 1.1em; border-bottom: 1px #fff solid; box-sizing: border-box;}
    footer .footer-add .add-infor { width: 100%; padding: 20px; box-sizing: border-box;}
    footer .footer-add .add-infor span.name { font-size: 1.1em;}
    
    footer .footer-social { width: 100%; display: flex; justify-content: center; align-items: center;}
    footer .footer-social .icon { width: 26px; height: 26px; margin: 0 20px;}
    footer .footer-social .icon a { width: 100%; height: 100%; color: #598ecf; font-size: 1em; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;}
    footer .footer-social .icon a:hover { color: #182d93;}
    
    .footer-copyright { clear: both; width: 100%; padding: 15px; font-size: 0.9em; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    
    
}