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

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

body { padding:0; margin:0 auto; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #fff; 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; }


@media screen and (min-width: 1280px) {
    
    
    /********** header **********/
    
    header { width: 100%; height: 120px; padding: 0 calc(50% - 620px); box-sizing: border-box;}
    
    header .logo-bx { width: 340px; margin: 18px 0 0 0; float: left;}
    
    header .nav-icon { display: none;}
    
    header nav#pc { width: calc(100% - 340px); float: right;}
    header nav#pc .nav-icon-close { display: none;}
    header nav#pc ul#nav-1 { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    header nav#pc ul#nav-1 li { padding: 0; margin: 70px 5px 0 5px; color: #666; font-size: 1.2em; line-height: 1em; font-weight: 500;}
    header nav#pc ul#nav-1 li a { padding: 8px 15px; color: #666; text-decoration: none; display: block; background-color: #fff; border-radius: 8px;}
    header nav#pc ul#nav-1 li a:hover { color: #fff; background-color: #666;}
    
    
    
    /********** service button **********/
    
    .service-bt { width: 220px; height: 65px; position: absolute; top: 450px; right: calc(50% - 620px); z-index: 999;}
    .service-bt a { width: 100%; height: 100%; color: #fff; font-size: 1.6em; font-weight: 500; background-image: linear-gradient(to right bottom, #cccccc, #ffffff, #cdcdcd, #999999, #cdcdcd, #cccccc, #666666); text-decoration: none; border: 2px #fff solid; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .service-bt a:hover { color: #414141;}
    
    
    
    /********** banner **********/
    
    .banner-bx { clear: both; width: 100%; height: 450px; overflow: hidden;}
    .banner-bx img { width: 100%; height: auto;}
    
    
    
    /********** service #hp **********/
    
    section { width: 100%; padding: 80px 0;}
    
    .application-items { width: 1240px; margin: 0 auto 80px auto; display: flex; justify-content: flex-start; align-items: stretch;}
    .application-items .item-bx { width: calc(100% / 6);}
    .application-items .item-bx a { width: 100%; padding: 10px; text-decoration: none; display: block; box-sizing: border-box;}
    .application-items .item-bx a:hover { background-color: #efefef;}
    .application-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);}
    .application-items .item-bx a .title { width: 100%; padding: 20px 0; color: #666; font-size: 1.1em; font-weight: 500; text-align: center;}
    .application-items .item-bx a .intro { width: 100%; color: #666; font-size: 0.9em;}
    
    .about-intro { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .about-intro .column-left { width: 50%; background: url("../images/about_pic_bg.jpg") no-repeat; background-size: cover; position: relative;}
    .about-intro .column-left .bg-flite { width: 100%; height: 100%; color: #cd7f32; font-size: 3em; font-weight: 600; letter-spacing: 0.2em; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.8);}
    .about-intro .column-right { width: 50%; padding: 30px calc(50% - 620px) 20px 50px; background-color: #f8f8f8; box-sizing: border-box;}
    .about-intro .column-right .title { width: 100%; margin: 0 0 40px 0; color: #cd7f32; font-size: 1.2em; font-weight: 500; text-align: center;}
    .about-intro .column-right .intro { width: 100%; color: #666; line-height: 2em;}
    .about-intro .column-right .more { width: 100%; padding: 20px 20px 0 0; color: #666; font-size: 0.8em; text-align: right; box-sizing: border-box;}
    .about-intro .column-right .more a { color: #666; text-decoration: none;}
    .about-intro .column-right .more a:hover { text-decoration: underline;}
    
    
    
    /********** service #about **********/
    
    .page-banner-bx { clear: both; width: 100%; height: 350px; overflow: hidden;}
    .page-banner-bx img { width: 100%; height: auto;}
    
    .page-service-bt { width: 220px; height: 65px; position: absolute; top: 340px; right: calc(50% - 620px); z-index: 999;}
    .page-service-bt a { width: 100%; height: 100%; color: #fff; font-size: 1.6em; font-weight: 500; background-image: linear-gradient(to right bottom, #cccccc, #ffffff, #cdcdcd, #999999, #cdcdcd, #cccccc, #666666); text-decoration: none; border: 2px #fff solid; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .page-service-bt a:hover { color: #414141;}

    .content-about { width: 1240px; margin: 0 auto;}

    .content-about .sub-title { width: 100%; background-color: #efefef;}
    .content-about .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}

    .content-about .content-text { width: 100%; margin: 80px 0 0 0; line-height: 2em;}
    .content-about .content-text img.pic-right { width: 450px; height: auto; margin: 0 0 0 30px; float: right;}
    .content-about .content-text font.bigger { font-size: 1.1em; font-weight: 500;}
    
    
    
    /********** service #application **********/
    
    .content-application { width: 1240px; margin: 0 auto;}
    
    .content-application .sub-title { width: 100%; background-color: #efefef;}
    .content-application .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-application .snd-menu-bx { width: 100%; background-color: #f8f8f8;}
    .content-application .snd-menu-bx ul.snd-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    .content-application .snd-menu-bx ul.snd-menu li { padding: 0; margin: 0;}
    .content-application .snd-menu-bx ul.snd-menu li a { padding: 15px 30px; color: #666; font-size: 1.1em; font-weight: 500; text-decoration: none; background-color: #f8f8f8; display: block;}
    .content-application .snd-menu-bx ul.snd-menu li a:hover { background-color: #eee;}
    
    .content-application .content-text { width: 100%; line-height: 2em;}    
    .content-application .content-text .app-item-bx { width: 100%; padding: 80px 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .content-application .content-text .app-item-bx:last-child { border: 0;}
    .content-application .content-text .app-item-bx .pic { width: 200px; 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);}
    .content-application .content-text .app-item-bx .text { width: calc(100% - 260px); padding: 0 0 0 60px;}
    .content-application .content-text .app-item-bx .photo-bx { width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start;}
    .content-application .content-text .app-item-bx .photo-bx .photo { width: calc(100% / 3 - 60px); height: 180px; margin: 0 30px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .content-application .content-text .app-item-bx .photo-bx .photo img { width: 100%; height: auto;}    
    .content-application .content-text .app-item-bx #gotop { clear: both; width: 100%; margin: 80px 0 0 0; text-align: right;}
    .content-application .content-text .app-item-bx #gotop a.top { color: #666; text-decoration: none; cursor: pointer;}
    
    
    
    /********** service #client service **********/
    
    .content-clientserv { width: 1240px; margin: 0 auto;}
    
    .content-clientserv .sub-title { width: 100%; background-color: #efefef;}
    .content-clientserv .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;} 
    
    .content-clientserv .content-text { clear: both; width: 80%; margin: 80px auto 0 auto; line-height: 2em;}
    .content-clientserv .content-text .photos-bx { clear: both; width: 100%;}
    .content-clientserv .content-text .photos-bx img { width: calc(100% / 3 - 40px); margin: 20px; float: left;}
    .content-clientserv .content-text .photos-bx img:nth-child(3n+1) { clear: both;}
    
    
    
    /********** service #device (#mass items) **********/
    
    .content-mass { width: 1240px; margin: 0 auto;}
    
    .content-mass .sub-title { width: 100%; background-color: #efefef;}
    .content-mass .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-mass .snd-menu-bx { width: 100%; background-color: #f8f8f8;}
    .content-mass .snd-menu-bx ul.snd-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    .content-mass .snd-menu-bx ul.snd-menu li { padding: 20px 0; margin: 0 20px;}
    .content-mass .snd-menu-bx ul.snd-menu li a { color: #666; text-decoration: none;}
    .content-mass .snd-menu-bx ul.snd-menu li a .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #666; text-align: center; border-radius: 10px; background: #f8f8f8; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a:hover .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #fff; text-align: center; border-radius: 10px; background: #cd7f32; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a.sel .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #fff; text-align: center; border-radius: 10px; background: #cd7f32; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a:hover .dialog-bottom::after { border-color: #cd7f32 transparent transparent transparent; border-style: solid solid solid solid; border-width: 20px 35px 20px 35px; bottom: -29px; content: ""; height: 0px; left: 23px; position: absolute; width: 0px;}
    .content-mass .snd-menu-bx ul.snd-menu li a.sel .dialog-bottom::after { border-color: #cd7f32 transparent transparent transparent; border-style: solid solid solid solid; border-width: 20px 35px 20px 35px; bottom: -29px; content: ""; height: 0px; left: 23px; position: absolute; width: 0px;}
    
    .content-mass .content-text { clear: both; width: 90%; margin: 80px auto 0 auto;}
    .content-mass .content-text div { width: 100%; line-height: 2em;}
    .content-mass .content-text div .photos-bx { width: calc(100% / 3 - 40px); height: 180px; margin: 20px; border: 6px #fff solid; border-radius: 10px; box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); overflow: hidden; float: left;}
    .content-mass .content-text div .photos-bx img { width: 100%; height: auto;}
    
    
    
    /********** service #contact **********/
    
    .content-contact { width: 1240px; margin: 0 auto;}
    
    .content-contact .sub-title { width: 100%; background-color: #efefef;}
    .content-contact .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-contact .content-text { clear: both; width: 100%; margin: 80px 0 0 0;}
    .content-contact .content-text .address-infor { width: 40%; margin: 0 0 60px 0; line-height: 2em; display: flex; justify-content: center; float: left;}
    .content-contact .content-text .form-bx { width: 60%; margin: 0 0 60px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; float: left;}
    .content-contact .content-text .form-bx .caption { width: 100px; margin: 0 10px 15px 0; text-align: right;}
    .content-contact .content-text .form-bx .column { width: calc(100% - 110px); margin: 0 0 15px 0;}
    .content-contact .content-text .form-bx .column input[type=text].style1 { width: 70%; padding: 5px 10px; font: 1em "微軟正黑體"; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .content-contact .content-text .form-bx .column textarea { width: 70%; height: 100px; padding: 5px 10px; font: 1em "微軟正黑體"; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .content-contact .content-text .form-bx .column input[type=button] { padding: 10px 20px; margin: 20px 0 0 0; color: #fff; font: 1em "微軟正黑體"; border: 0; border-radius: 8px; background-color: #666; box-sizing: border-box; cursor: pointer;}
    .content-contact .content-text .map-bx { clear: both; width: 100%; margin: 80px 0 0 0;}
    .content-contact .content-text .map-bx iframe { width: 100%; height: 350px;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; border-top: 1px #ccc solid;}
    
    footer .footer-bx { width: 1240px; margin: 40px auto; display: flex; justify-content: flex-start; align-items: stretch;}
    footer .footer-bx .column-left { width: 50%;}
    footer .footer-bx .column-left .logo-title { width: 380px;}
    footer .footer-bx .column-left .address { clear: both; width: calc(100% - 70px); padding: 0 0 0 82px; color: #666; font-size: 0.9em; box-sizing: border-box;}
    footer .footer-bx .column-right { width: 50%; display: flex; justify-content: flex-end; align-items: flex-start;}
    
    footer .copyright-bx { width: 100%; padding: 15px 0; color: #666; font-size: 0.8em; text-align: center; background-color: #eaeaea;}
    
    
    
}


@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    /********** header **********/
    
    header { width: 100%; margin: 20px 0;}
    
    header .logo-bx { width: 100%; margin: 0 0 20px 0; text-align: center;}
    
    header .nav-icon { display: none;}
        
    header nav#pc { clear: both; width: 100%;}
    header nav#pc .nav-icon-close { display: none;}
    header nav#pc ul#nav-1 { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    header nav#pc ul#nav-1 li { padding: 0; margin: 0 5px; color: #666; font-size: 1.2em; line-height: 1em; font-weight: 500;}
    header nav#pc ul#nav-1 li a { padding: 8px 15px; color: #666; text-decoration: none; display: block; background-color: #fff; border-radius: 8px;}
    header nav#pc ul#nav-1 li a:hover, a:active { color: #fff; background-color: #666;}
    
    
    
    /********** service button **********/
    
    .service-bt { width: 220px; height: 65px; position: absolute; top: 40vw; right: 20px; z-index: 999;}
    .service-bt a { width: 100%; height: 100%; color: #fff; font-size: 1.6em; font-weight: 500; background-image: linear-gradient(to right bottom, #cccccc, #ffffff, #cdcdcd, #999999, #cdcdcd, #cccccc, #666666); text-decoration: none; border: 2px #fff solid; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .service-bt a:hover, a:active { color: #414141;}
    
    
    
    /********** banner **********/
    
    .banner-bx { clear: both; width: 100%; height: 34vw; overflow: hidden;}
    .banner-bx img { width: 100%; height: auto;}
    
    
    
    /********** service #hp **********/
    
    section { width: 100%; padding: 80px 0;}
    
    .application-items { width: 90%; margin: 0 auto 70px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .application-items .item-bx { width: calc(100% / 3); margin: 0 0 10px 0;}
    .application-items .item-bx a { width: 100%; padding: 10px; text-decoration: none; display: block; box-sizing: border-box;}
    .application-items .item-bx a:hover, a:active { background-color: #efefef;}
    .application-items .item-bx a .pic { width: 100%; height: 14vw; 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);}
    .application-items .item-bx a .pic img { width: 100%; height: auto;}
    .application-items .item-bx a .title { width: 100%; padding: 20px 0; color: #666; font-size: 1.1em; font-weight: 500; text-align: center;}
    .application-items .item-bx a .intro { width: 100%; color: #666; font-size: 0.9em;}
    
    .about-intro { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .about-intro .column-left { width: 50%; background: url("../images/about_pic_bg.jpg") no-repeat; background-size: cover; position: relative;}
    .about-intro .column-left .bg-flite { width: 100%; height: 100%; color: #cd7f32; font-size: 3em; font-weight: 600; letter-spacing: 0.2em; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.8);}
    .about-intro .column-right { width: 50%; padding: 30px 20px 20px 20px; background-color: #f8f8f8; box-sizing: border-box;}
    .about-intro .column-right .title { width: 100%; margin: 0 0 40px 0; color: #cd7f32; font-size: 1.2em; font-weight: 500; text-align: center;}
    .about-intro .column-right .intro { width: 100%; color: #666; line-height: 2em;}
    .about-intro .column-right .more { width: 100%; padding: 20px 20px 0 0; color: #666; font-size: 0.8em; text-align: right; box-sizing: border-box;}
    .about-intro .column-right .more a { color: #666; text-decoration: none;}
    .about-intro .column-right .more a:hover, a:active { text-decoration: underline;}
    
    
    
    /********** service #about **********/
    
    .page-banner-bx { clear: both; width: 100%; height: 26vw; overflow: hidden;}
    .page-banner-bx img { width: 100%; height: auto;}
    
    .page-service-bt { width: 220px; height: 65px; position: absolute; top: 30vw; right: 20px; z-index: 999;}
    .page-service-bt a { width: 100%; height: 100%; color: #fff; font-size: 1.6em; font-weight: 500; background-image: linear-gradient(to right bottom, #cccccc, #ffffff, #cdcdcd, #999999, #cdcdcd, #cccccc, #666666); text-decoration: none; border: 2px #fff solid; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .page-service-bt a:hover, a:active { color: #414141;}

    .content-about { width: 90%; margin: 0 auto;}

    .content-about .sub-title { width: 100%; background-color: #efefef;}
    .content-about .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}

    .content-about .content-text { width: 100%; margin: 80px 0 0 0; line-height: 2em;}
    .content-about .content-text img.pic-right { width: 350px; height: auto; margin: 0 0 0 30px; float: right;}
    .content-about .content-text font.bigger { font-size: 1.1em; font-weight: 500;}
    
    
    
    /********** service #application **********/
    
    .content-application { width: 90%; margin: 0 auto;}
    
    .content-application .sub-title { width: 100%; background-color: #efefef;}
    .content-application .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-application .snd-menu-bx { width: 100%; background-color: #f8f8f8;}
    .content-application .snd-menu-bx ul.snd-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    .content-application .snd-menu-bx ul.snd-menu li { padding: 0; margin: 0;}
    .content-application .snd-menu-bx ul.snd-menu li a { padding: 15px; color: #666; font-size: 1.1em; font-weight: 500; text-decoration: none; background-color: #f8f8f8; display: block;}
    .content-application .snd-menu-bx ul.snd-menu li a:hover { background-color: #eee;}
    
    .content-application .content-text { width: 100%; line-height: 2em;}    
    .content-application .content-text .app-item-bx { width: 100%; padding: 80px 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .content-application .content-text .app-item-bx:last-child { border: 0;}
    .content-application .content-text .app-item-bx .pic { width: 200px; 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);}
    .content-application .content-text .app-item-bx .text { width: calc(100% - 260px); padding: 0 0 0 60px;}
    .content-application .content-text .app-item-bx .photo-bx { width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start;}
    .content-application .content-text .app-item-bx .photo-bx .photo { width: calc(100% / 3 - 30px); height: 13vw; margin: 0 15px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .content-application .content-text .app-item-bx .photo-bx .photo img { width: 100%; height: auto;}
    .content-application .content-text .app-item-bx #gotop { clear: both; width: 100%; margin: 80px 0 0 0; text-align: right;}
    .content-application .content-text .app-item-bx #gotop a.top { color: #666; text-decoration: none; cursor: pointer;}
    
    
    
    /********** service #client service **********/
    
    .content-clientserv { width: 90%; margin: 0 auto;}
    
    .content-clientserv .sub-title { width: 100%; background-color: #efefef;}
    .content-clientserv .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-clientserv .content-text { clear: both; width: 100%; margin: 80px auto 0 auto; line-height: 2em;}
    .content-clientserv .content-text .photos-bx { clear: both; width: 100%;}
    .content-clientserv .content-text .photos-bx img { width: calc(100% / 3 - 40px); margin: 20px; float: left;}
    .content-clientserv .content-text .photos-bx img:nth-child(3n+1) { clear: both;}
    
    
    
    /********** service #device (#mass items) **********/
    
    .content-mass { width: 90%; margin: 0 auto;}
    
    .content-mass .sub-title { width: 100%; background-color: #efefef;}
    .content-mass .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-mass .snd-menu-bx { width: 100%; background-color: #f8f8f8;}
    .content-mass .snd-menu-bx ul.snd-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    .content-mass .snd-menu-bx ul.snd-menu li { padding: 20px 0; margin: 0;}
    .content-mass .snd-menu-bx ul.snd-menu li a { color: #666; text-decoration: none;}
    .content-mass .snd-menu-bx ul.snd-menu li a .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #666; text-align: center; border-radius: 10px; background: #f8f8f8; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a:active .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #fff; text-align: center; border-radius: 10px; background: #cd7f32; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a.sel .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #fff; text-align: center; border-radius: 10px; background: #cd7f32; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a:active .dialog-bottom::after { border-color: #cd7f32 transparent transparent transparent; border-style: solid solid solid solid; border-width: 20px 35px 20px 35px; bottom: -29px; content: ""; height: 0px; left: 23px; position: absolute; width: 0px;}
    .content-mass .snd-menu-bx ul.snd-menu li a.sel .dialog-bottom::after { border-color: #cd7f32 transparent transparent transparent; border-style: solid solid solid solid; border-width: 20px 35px 20px 35px; bottom: -29px; content: ""; height: 0px; left: 23px; position: absolute; width: 0px;}
    
    .content-mass .content-text { clear: both; width: 90%; margin: 80px auto 0 auto;}
    .content-mass .content-text div { width: 100%; line-height: 2em;}
    .content-mass .content-text div .photos-bx { width: calc(100% / 2 - 40px); height: 20vw; margin: 20px; border: 6px #fff solid; border-radius: 10px; box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); overflow: hidden; float: left;}
    .content-mass .content-text div .photos-bx img { width: 100%; height: auto;}
    
    
    
    /********** service #contact **********/
    
    .content-contact { width: 90%; margin: 0 auto;}
    
    .content-contact .sub-title { width: 100%; background-color: #efefef;}
    .content-contact .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-contact .content-text { clear: both; width: 100%; margin: 80px 0 0 0;}
    .content-contact .content-text .address-infor { width: 100%; margin: 0 0 60px 0; line-height: 2em; display: flex; justify-content: center;}
    .content-contact .content-text .form-bx { width: 70%; margin: 0 auto 60px auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    .content-contact .content-text .form-bx .caption { width: 80px; margin: 0 10px 15px 0; text-align: right;}
    .content-contact .content-text .form-bx .column { width: calc(100% - 90px); margin: 0 0 15px 0;}
    .content-contact .content-text .form-bx .column input[type=text].style1 { width: 100%; padding: 5px 10px; font: 1em "微軟正黑體"; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .content-contact .content-text .form-bx .column textarea { width: 100%; height: 100px; padding: 5px 10px; font: 1em "微軟正黑體"; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .content-contact .content-text .form-bx .column input[type=button] { padding: 10px 20px; margin: 20px 0 0 0; color: #fff; font: 1em "微軟正黑體"; border: 0; border-radius: 8px; background-color: #666; box-sizing: border-box; cursor: pointer;}
    .content-contact .content-text .map-bx { clear: both; width: 100%; margin: 80px 0 0 0;}
    .content-contact .content-text .map-bx iframe { width: 100%; height: 350px;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; border-top: 1px #ccc solid;}
    
    footer .footer-bx { width: 90%; margin: 40px auto; display: flex; justify-content: flex-start; align-items: stretch;}
    footer .footer-bx .column-left { width: 50%;}
    footer .footer-bx .column-left .logo-title { width: 380px;}
    footer .footer-bx .column-left .address { clear: both; width: calc(100% - 70px); padding: 0 0 0 82px; color: #666; font-size: 0.9em; box-sizing: border-box;}
    footer .footer-bx .column-right { width: 50%; display: flex; justify-content: flex-end; align-items: flex-start;}
    
    footer .copyright-bx { width: 100%; padding: 15px 0; color: #666; font-size: 0.8em; text-align: center; background-color: #eaeaea;}
    
    
    
}


@media screen and (max-width: 767px) {
    
    
    /********** header **********/
    
    header { width: 100%; padding: 20px 0;}
    
    header .logo-bx { width: calc(100% - 100px); padding: 0 15px 15px 15px; box-sizing: border-box; float: left;}
    header .logo-bx img { max-width: 300px; width: 100%; height: auto;}
    
    header .nav-icon { width: 80px; margin: 0 auto; color: #414141; font-size: 3em; text-align: center; float: right;}
    
    header nav#pc { width: 100%; background-color: #efefef; position: absolute; top: 0; left: -100%; z-index: 999;}
    header nav#pc .nav-icon-close { width: 60px; color: #414141; font-size: 2em; text-align: center; position: absolute; top: 10px; right: 10px;}
    header nav#pc ul#nav-1 { clear: both; width: 100%; padding: 60px 20px; margin: 0; list-style: none; display: block; box-sizing: border-box;}
    header nav#pc ul#nav-1 li { padding: 0; margin: 5px; color: #666; font-size: 1.2em; line-height: 1em; font-weight: 500; text-align: center;}
    header nav#pc ul#nav-1 li a { padding: 20px; color: #666; text-decoration: none; display: block; background-color: #fff; border-radius: 8px;}
    header nav#pc ul#nav-1 li a:hover, a:active { color: #fff; background-color: #666;}
    
    
    
    /********** service button **********/
    
    .service-bt { clear: both; width: 220px; height: 65px; margin: 20px 0 40px 0; float: right;}
    .service-bt a { width: 100%; height: 100%; color: #fff; font-size: 1.6em; font-weight: 500; background-image: linear-gradient(to right bottom, #cccccc, #ffffff, #cdcdcd, #999999, #cdcdcd, #cccccc, #666666); text-decoration: none; border: 2px #fff solid; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .service-bt a:hover, a:active { color: #fff; text-decoration: none; background-color: #666;}
    
    
    
    /********** banner **********/
    
    .banner-bx { clear: both; width: 100%; height: 34vw; overflow: hidden;}
    .banner-bx img { width: 100%; height: auto;}
    
    
    
    /********** service #hp **********/
    
    section { width: 100%; padding: 80px 0;}
    
    .application-items { width: 90%; margin: 0 auto 70px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .application-items .item-bx { width: calc(100% / 2); margin: 0 0 10px 0;}
    .application-items .item-bx a { width: 100%; padding: 10px; text-decoration: none; display: block; box-sizing: border-box;}
    .application-items .item-bx a:hover, a:active { background-color: #efefef;}
    .application-items .item-bx a .pic { width: 100%; height: 22vw; 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);}
    .application-items .item-bx a .pic img { width: 100%; height: auto;}
    .application-items .item-bx a .title { width: 100%; padding: 20px 0; color: #666; font-size: 1.1em; font-weight: 500; text-align: center;}
    .application-items .item-bx a .intro { width: 100%; color: #666; font-size: 0.9em;}
    
    .about-intro { width: 100%;}
    .about-intro .column-left { width: 100%; height: 60vw; background: url("../images/about_pic_bg.jpg") no-repeat; background-size: cover; position: relative;}
    .about-intro .column-left .bg-flite { width: 100%; height: 100%; color: #cd7f32; font-size: 3em; font-weight: 600; letter-spacing: 0.2em; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.8);}
    .about-intro .column-right { width: 100%; padding: 40px 20px; background-color: #f8f8f8; box-sizing: border-box;}
    .about-intro .column-right .title { width: 100%; margin: 0 0 20px 0; color: #cd7f32; font-size: 1.2em; font-weight: 500; text-align: center;}
    .about-intro .column-right .intro { width: 100%; color: #666; line-height: 2em;}
    .about-intro .column-right .more { width: 100%; padding: 20px 20px 0 0; color: #666; font-size: 0.8em; text-align: right; box-sizing: border-box;}
    .about-intro .column-right .more a { color: #666; text-decoration: none;}
    .about-intro .column-right .more a:hover, a:active { text-decoration: underline;}
    
    
    
    /********** service #about **********/
    
    .page-banner-bx { clear: both; width: 100%; height: 26vw; overflow: hidden;}
    .page-banner-bx img { width: 100%; height: auto;}
    
    .page-service-bt { clear: both; width: 220px; height: 65px; margin: 20px 0 40px 0; float: right;}
    .page-service-bt a { width: 100%; height: 100%; color: #fff; font-size: 1.6em; font-weight: 500; background-image: linear-gradient(to right bottom, #cccccc, #ffffff, #cdcdcd, #999999, #cdcdcd, #cccccc, #666666); text-decoration: none; border: 2px #fff solid; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .page-service-bt a:hover { color: #414141;}

    .content-about { clear: both; width: 90%; margin: 0 auto;}

    .content-about .sub-title { width: 100%; background-color: #efefef;}
    .content-about .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}

    .content-about .content-text { width: 100%; margin: 80px 0 0 0; line-height: 2em;}
    .content-about .content-text img.pic-right { clear: both; width: 100%; height: auto; margin: 0 0 20px 0;}
    .content-about .content-text font.bigger { font-size: 1.1em; font-weight: 500;}
    
    
    
    /********** service #application **********/
    
    .content-application { clear: both; width: 90%; margin: 0 auto;}
    
    .content-application .sub-title { width: 100%; background-color: #efefef;}
    .content-application .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-application .snd-menu-bx { width: 100%; background-color: #f8f8f8;}
    .content-application .snd-menu-bx ul.snd-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .content-application .snd-menu-bx ul.snd-menu li { padding: 0; margin: 0;}
    .content-application .snd-menu-bx ul.snd-menu li a { padding: 15px 20px; color: #666; font-size: 1.1em; font-weight: 500; text-decoration: none; background-color: #f8f8f8; display: block;}
    .content-application .snd-menu-bx ul.snd-menu li a:hover { background-color: #eee;}
    
    .content-application .content-text { width: 100%; line-height: 2em;}    
    .content-application .content-text .app-item-bx { width: 100%; padding: 80px 0; border-bottom: 1px #ccc solid;}
    .content-application .content-text .app-item-bx:last-child { border: 0;}
    .content-application .content-text .app-item-bx .pic { width: 200px; height: 120px; margin: 0 auto; 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);}
    .content-application .content-text .app-item-bx .text { clear: both; width: 100%; padding: 20px 0 0 0;}
    .content-application .content-text .app-item-bx .photo-bx { width: 100%; margin: 80px 0 0 0;}
    .content-application .content-text .app-item-bx .photo-bx .photo { width: 80%; height: 40vw; margin: 15px auto; overflow: hidden;}
    .content-application .content-text .app-item-bx .photo-bx .photo img { width: 100%; height: auto;}
    .content-application .content-text .app-item-bx #gotop { clear: both; width: 100%; margin: 80px 0 0 0; text-align: right;}
    .content-application .content-text .app-item-bx #gotop a.top { color: #666; text-decoration: none; cursor: pointer;}
    
    
    
    /********** service #client service **********/
    
    .content-clientserv { width: 90%; margin: 0 auto;}
    
    .content-clientserv .sub-title { clear: both; width: 100%; background-color: #efefef;}
    .content-clientserv .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-clientserv .content-text { clear: both; width: 100%; margin: 80px auto 0 auto; line-height: 2em;}
    .content-clientserv .content-text .photos-bx { clear: both; width: 100%; text-align: center;}
    .content-clientserv .content-text .photos-bx img { width: 90%; margin: 20px 0;}
    
    
    
    /********** service #mass items **********/
    
    .content-mass { width: 90%; margin: 0 auto;}
    
    .content-mass .sub-title { clear: both; width: 100%; background-color: #efefef;}
    .content-mass .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-mass .snd-menu-bx { width: 100%; background-color: #f8f8f8;}
    .content-mass .snd-menu-bx ul.snd-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .content-mass .snd-menu-bx ul.snd-menu li { padding: 20px 0; margin: 0;}
    .content-mass .snd-menu-bx ul.snd-menu li a { color: #666; text-decoration: none;}
    .content-mass .snd-menu-bx ul.snd-menu li a .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #666; text-align: center; border-radius: 10px; background: #f8f8f8; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a:active .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #fff; text-align: center; border-radius: 10px; background: #cd7f32; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a.sel .dialog-bottom { padding: 10px 0 0 0; width: 110px; height: 50px; color: #fff; text-align: center; border-radius: 10px; background: #cd7f32; box-sizing: border-box; position: relative;}
    .content-mass .snd-menu-bx ul.snd-menu li a:active .dialog-bottom::after { border-color: #cd7f32 transparent transparent transparent; border-style: solid solid solid solid; border-width: 20px 35px 20px 35px; bottom: -29px; content: ""; height: 0px; left: 23px; position: absolute; width: 0px;}
    .content-mass .snd-menu-bx ul.snd-menu li a.sel .dialog-bottom::after { border-color: #cd7f32 transparent transparent transparent; border-style: solid solid solid solid; border-width: 20px 35px 20px 35px; bottom: -29px; content: ""; height: 0px; left: 23px; position: absolute; width: 0px;}
    
    .content-mass .content-text { clear: both; width: 90%; margin: 80px auto 0 auto;}
    .content-mass .content-text div { width: 100%; line-height: 2em;}
    .content-mass .content-text div .photos-bx { width: 100%; height: 42vw; margin: 30px auto; border: 6px #fff solid; border-radius: 10px; box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); overflow: hidden;}
    .content-mass .content-text div .photos-bx img { width: 100%; height: auto;}
    
    
    
    /********** service #contact **********/
    
    .content-contact { width: 90%; margin: 0 auto;}
    
    .content-contact .sub-title { clear: both; width: 100%; background-color: #efefef;}
    .content-contact .sub-title .text { width: 130px; margin: 0 auto; color: #666; font-size: 2em; font-weight: 500; text-align: center; border-bottom: 5px #ccc solid;}
    
    .content-contact .content-text { clear: both; width: 100%; margin: 80px 0 0 0;}
    .content-contact .content-text .address-infor { width: 100%; margin: 0 0 60px 0; line-height: 2em; display: flex; justify-content: center;}
    .content-contact .content-text .form-bx { width: 100%; margin: 0 0 60px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    .content-contact .content-text .form-bx .caption { width: 100%; margin: 0 0 10px 0;}
    .content-contact .content-text .form-bx .column { width: 100%; margin: 0 0 15px 0;}
    .content-contact .content-text .form-bx .column input[type=text].style1 { width: 100%; padding: 5px 10px; font: 1em "微軟正黑體"; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .content-contact .content-text .form-bx .column textarea { width: 100%; height: 100px; padding: 5px 10px; font: 1em "微軟正黑體"; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .content-contact .content-text .form-bx .column input[type=button] { padding: 10px 20px; color: #fff; font: 1em "微軟正黑體"; border: 0; border-radius: 8px; background-color: #666; box-sizing: border-box; cursor: pointer;}
    .content-contact .content-text .map-bx { clear: both; width: 100%; margin: 80px 0 0 0;}
    .content-contact .content-text .map-bx iframe { width: 100%; height: 350px;}
    
    
    
    /********** footer **********/
    
    footer { clear: both; width: 100%; border-top: 1px #ccc solid;}
    
    footer .footer-bx { width: 90%; margin: 40px auto;}
    footer .footer-bx .column-left { width: 100%; margin: 0 0 30px 0;}
    footer .footer-bx .column-left .logo-title { width: 100%;}
    footer .footer-bx .column-left .logo-title img { max-width: 100%; height: auto;}
    footer .footer-bx .column-left .address { clear: both; width: 100%; padding: 0 0 0 82px; color: #666; font-size: 0.9em; box-sizing: border-box;}
    footer .footer-bx .column-right { width: 100%; display: flex; justify-content: center; align-items: center;}
    
    footer .copyright-bx { width: 100%; padding: 15px 0; color: #666; font-size: 0.8em; text-align: center; background-color: #eaeaea;}
        
    
    
}