@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; }


/******** youtube video set ********/
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; width:100%; height: 0px; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/******** homepage ********/

@media screen and (min-width: 1280px) {
    
    header { width: 1150px; margin: 0 auto; z-index: 999;}
    
    header .logo-bx { width: 100%; height: 103px;}
    
    header .nav-bx { width: calc(100% - 240px); height: 60px; background: url('../images/topbtn_o_07.png') left bottom repeat-x; float: left;}
    header .nav-bx nav#mo { display: none;}
    header .nav-bx nav#pc { width: 100%;}
    header .nav-bx nav#pc ul#pc { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
    header .nav-bx nav#pc ul#pc li { padding: 0; margin: 0;}
    
    header .search-bx { width: 240px; height: 60px; padding: 20px 0 0 0; box-sizing: border-box; background: url('../images/topbtn_o_07.png') left bottom repeat-x; float: right;}
    header .search-bx form { display: flex; justify-content: flex-end; align-items: center;}
    
    #banner1 { width: 1150px; height: 300px; margin: 0 auto; overflow: hidden; position: relative;}
    #banner1 .banner-txt { width: 100%; position: absolute; top: 100px; left: 0; z-index: 99;}
    
    .news-list-bx { clear: both; width: 1150px; margin: 30px auto; border: 1px #ccc solid; box-sizing: border-box; overflow: hidden;}
    .news-list-bx .title-bx { width: 100%; padding: 5px 10px; color: #fff; font-size: 1.4em; font-weight: 600; background-color: #317bbf; box-sizing: border-box;}
    .news-list-bx .news-list-content { width: 100%; padding: 20px; box-sizing: border-box;}
    .news-list-bx .news-list-content .news-marquee { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start; align-items: stretch;}    
    .news-list-bx .news-list-content .news-marquee .marquee-date { width: 100px; font-size: 14px; color: #888888; font-weight: 700; line-height: 20px;}    
    .news-list-bx .news-list-content .news-marquee .marquee-title { width: calc(100% - 130px);}
    .news-list-bx .news-list-content .news-marquee .marquee-title a { font-size: 14px; color: #000000; font-weight: 700; line-height: 20px; text-decoration: none;}
    .news-list-bx .news-list-content .news-marquee .marquee-title a:hover { text-decoration: underline;}
    
    .pro-list-bx { clear: both; width: 1150px; margin: 0 auto 30px auto;}
    .pro-list-bx .title-bx { width: 100%;}
    .pro-list-bx ul.pro-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .pro-list-bx ul.pro-list li { width: calc(100% / 4 - 40px); padding: 0; margin: 20px; -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); background-color: #fff;}
    .pro-list-bx ul.pro-list li .pic-bx { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .pro-list-bx ul.pro-list li .pic-bx img { min-width: 100%; height: auto;}
    .pro-list-bx ul.pro-list li .info-bx-1 { width: 90%; padding: 10px; margin: 0 auto; font-size: 1.2em; font-weight: 600; box-sizing: border-box; border-bottom: 1px #ccc solid;}
    .pro-list-bx ul.pro-list li .info-bx-2 { width: 90%; padding: 10px; margin: 0 auto 20px auto; font-size: 1em; box-sizing: border-box;}    
    
    .video-contact-bx { width: 1150px; margin: 0 auto; display: flex; justify-content: space-around; align-items: center;}
    .video-contact-bx .video-bx { width: 40%;}
    
    .video-contact-bx .contact-bx { width: 50%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}
    .video-contact-bx .contact-bx .title-bx { width: 100%; padding: 5px 10px; color: #fff; font-size: 1.4em; font-weight: 600; background-color: #317bbf; box-sizing: border-box;}
    .video-contact-bx .contact-bx .title-bx .content-bx { width: 100%; padding: 2px; box-sizing: border-box;}
    
    footer { width: 1150px; padding: 25px 0; margin: 30px auto 0 auto; color: #fff; background-color: #317bbf; display: flex; justify-content: center; align-items: flex-start;}
    footer .infor-1, footer .infor-2, footer .infor-3 { margin: 0 10px; font-size: 1.2em;}
    
        
}

/*** scrolling ***/
@media screen and (min-width: 1150px) {
    
    
    .pro-scroll-bx { clear: both; width: 1150px; height: 160px; margin: 30px auto; display: flex; justify-content: flex-start; align-items: center;}
    .pro-scroll-bx .next-bx, .pro-scroll-bx .prev-bx { width: 45px; text-align: center; cursor: pointer;}
    .pro-scroll-bx .next-bx img, .pro-scroll-bx .prev-bx img { width: 70%; height: auto;}
    .pro-scroll-bx .pro-list-bx { width: 1060px; height: 160px; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll { height: 160px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li { width: 265px; padding: 0; margin: 0; text-align: center; float: left;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li img { width: 80%; height: auto;}
    
    
}

/*** scrolling ***/
@media screen and (min-width: 1000px) and (max-width: 1149px) {
    
    
    .pro-scroll-bx { clear: both; width: 980px; height: 140px; margin: 30px auto; display: flex; justify-content: flex-start; align-items: center;}
    .pro-scroll-bx .next-bx, .pro-scroll-bx .prev-bx { width: 30px; text-align: center; cursor: pointer;}
    .pro-scroll-bx .next-bx img, .pro-scroll-bx .prev-bx img { width: 85%; height: auto;}
    .pro-scroll-bx .pro-list-bx { width: 920px; height: 140px; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll { height: 140px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li { width: 230px; padding: 0; margin: 0; text-align: center; float: left;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li img { width: 80%; height: auto;}
    
    
}

/*** scrolling ***/
@media screen and (min-width: 768px) and (max-width: 999px) {
    
    
    .pro-scroll-bx { clear: both; width: 740px; height: 140px; margin: 30px auto; display: flex; justify-content: flex-start; align-items: center;}
    .pro-scroll-bx .next-bx, .pro-scroll-bx .prev-bx { width: 25px; text-align: center; cursor: pointer;}
    .pro-scroll-bx .next-bx img, .pro-scroll-bx .prev-bx img { width: 90%; height: auto;}
    .pro-scroll-bx .pro-list-bx { width: 690px; height: 140px; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll { height: 140px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li { width: 230px; padding: 0; margin: 0; text-align: center; float: left;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li img { width: 80%; height: auto;}
    
    
}


@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    header { width: 100%; margin: 0 auto;}
    
    header .logo-bx { width: 100%; height: 103px;}
    
    header .nav-bx { width: calc(100% - 240px); height: 60px; background: url('../images/topbtn_o_07.png') left bottom repeat-x; float: left;}
    header .nav-bx nav#pc { display: none;}
    header .nav-bx nav#mo { width: 100%; position: relative;}
    header .nav-bx nav#mo .nav-icon { width: 40px; margin: 0 0 0 20px; cursor: pointer;}
    header .nav-bx nav#mo .nav-icon img { width: 100%; height: auto;}
    header .nav-bx nav#mo ul#mo { width: 300px; padding: 20px; margin: 0; border: 1px #ccc solid; background-color: #eee; position: absolute; top: 60px; left: 0; box-sizing: border-box; z-index: 999;}
    header .nav-bx nav#mo ul#mo li { padding: 0; margin: 20px 0; text-align: center;}
    header .nav-bx nav#mo ul#mo li a { color: #000; font-size: 1.6em; font-weight: 500; text-decoration: none;}
    
    header .search-bx { width: 240px; height: 60px; padding: 20px 20px 0 0; box-sizing: border-box; background: url('../images/topbtn_o_07.png') left bottom repeat-x; float: right;}
    header .search-bx form { display: flex; justify-content: flex-end; align-items: center;}
    
    #banner1 { width: 100%; height: 28vw; margin: 0 auto; overflow: hidden; position: relative;}
    #banner1 .banner-txt { width: 100%; position: absolute; top: 8vw; left: 0; z-index: 99;}
    #banner1 img { width: 100%; height: auto;}
    
    .news-list-bx { clear: both; width: 90%; margin: 30px auto; border: 1px #ccc solid; box-sizing: border-box; overflow: hidden;}
    .news-list-bx .title-bx { width: 100%; padding: 5px 10px; color: #fff; font-size: 1.4em; font-weight: 600; background-color: #317bbf; box-sizing: border-box;}
    .news-list-bx .news-list-content { width: 100%; padding: 20px; box-sizing: border-box;}
    .news-list-bx .news-list-content .news-marquee { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start; align-items: stretch;}    
    .news-list-bx .news-list-content .news-marquee .marquee-date { width: 100px; font-size: 14px; color: #888888; font-weight: 700; line-height: 20px;}    
    .news-list-bx .news-list-content .news-marquee .marquee-title { width: calc(100% - 130px);}
    .news-list-bx .news-list-content .news-marquee .marquee-title a { font-size: 14px; color: #000000; font-weight: 700; line-height: 20px; text-decoration: none;}
    .news-list-bx .news-list-content .news-marquee .marquee-title a:active { text-decoration: underline;}
    
    .pro-list-bx { clear: both; width: 90%; margin: 0 auto 30px auto;}
    .pro-list-bx .title-bx { width: 100%;}
    .pro-list-bx ul.pro-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .pro-list-bx ul.pro-list li { width: calc(100% / 4 - 40px); padding: 0; margin: 20px; -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); background-color: #fff;}
    .pro-list-bx ul.pro-list li .pic-bx { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .pro-list-bx ul.pro-list li .pic-bx img { min-width: 100%; height: auto;}
    .pro-list-bx ul.pro-list li .info-bx-1 { width: 90%; padding: 10px; margin: 0 auto; font-size: 1.2em; font-weight: 600; box-sizing: border-box; border-bottom: 1px #ccc solid;}
    .pro-list-bx ul.pro-list li .info-bx-2 { width: 90%; padding: 10px; margin: 0 auto 20px auto; font-size: 1em; box-sizing: border-box;}
    
    
    
    .video-contact-bx { width: 100%; margin: 0 auto; display: flex; justify-content: space-around; align-items: center;}
    .video-contact-bx .video-bx { width: 40%;}
    
    .video-contact-bx .contact-bx { width: 50%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}
    .video-contact-bx .contact-bx .title-bx { width: 100%; padding: 5px 10px; color: #fff; font-size: 1.4em; font-weight: 600; background-color: #317bbf; box-sizing: border-box;}
    .video-contact-bx .contact-bx .title-bx .content-bx { width: 100%; padding: 2px; box-sizing: border-box;}
    
    footer { width: 100%; padding: 25px 0; margin: 30px auto 0 auto; color: #fff; font-size: 1.2em; background-color: #317bbf; display: flex; justify-content: center; flex-wrap: wrap;}
    footer .infor-1 { width: 100%; margin: 0 0 10px 0; text-align: center;}
    footer .infor-2 { width: 40%; padding: 0 10px 0 0; box-sizing: border-box; text-align: right; float: left;}
    footer .infor-3 { width: 60%; padding: 0 0 0 10px; box-sizing: border-box; text-align: left; float: left;}
    
    
}


@media screen and (max-width: 767px) {
    
    
    header { width: 100%; margin: 0 auto;}
    
    header .logo-bx { width: 100%; height: 103px;}
    
    header .nav-bx { width: calc(100% - 240px); height: 60px; background: url('../images/topbtn_o_07.png') left bottom repeat-x; float: left;}
    header .nav-bx nav#pc { display: none;}
    header .nav-bx nav#mo { width: 100%; position: relative;}
    header .nav-bx nav#mo .nav-icon { width: 40px; margin: 0 0 0 20px; cursor: pointer;}
    header .nav-bx nav#mo .nav-icon img { width: 100%; height: auto;}
    header .nav-bx nav#mo ul#mo { width: 300px; padding: 20px; margin: 0; border: 1px #ccc solid; background-color: #eee; position: absolute; top: 60px; left: 0; box-sizing: border-box; z-index: 999;}
    header .nav-bx nav#mo ul#mo li { padding: 0; margin: 20px 0; text-align: center;}
    header .nav-bx nav#mo ul#mo li a { color: #000; font-size: 1.6em; font-weight: 500; text-decoration: none;}
    
    header .search-bx { width: 240px; height: 60px; padding: 20px 20px 0 0; box-sizing: border-box; background: url('../images/topbtn_o_07.png') left bottom repeat-x; float: right;}
    header .search-bx form { display: flex; justify-content: flex-end; align-items: center;}
    
    #banner1 { width: 100%; height: 28vw; margin: 0 auto; overflow: hidden; position: relative;}
    #banner1 .banner-txt { width: 100%; position: absolute; top: 8vw; left: 0; z-index: 99;}
    #banner1 img { width: 100%; height: auto;}
    
    .news-list-bx { clear: both; width: 90%; margin: 30px auto; border: 1px #ccc solid; box-sizing: border-box; overflow: hidden;}
    .news-list-bx .title-bx { width: 100%; padding: 5px 10px; color: #fff; font-size: 1.4em; font-weight: 600; background-color: #317bbf; box-sizing: border-box;}
    .news-list-bx .news-list-content { width: 100%; padding: 20px; box-sizing: border-box;}
    .news-list-bx .news-list-content .news-marquee { width: 100%; padding: 10px 0;}    
    .news-list-bx .news-list-content .news-marquee .marquee-date { width: 100%; font-size: 14px; color: #888888; font-weight: 700; line-height: 20px;}    
    .news-list-bx .news-list-content .news-marquee .marquee-title { width: 100%;}
    .news-list-bx .news-list-content .news-marquee .marquee-title a { font-size: 14px; color: #000000; font-weight: 700; line-height: 20px; text-decoration: none;}
    .news-list-bx .news-list-content .news-marquee .marquee-title a:active { text-decoration: underline;}
    
    .pro-list-bx { clear: both; width: 90%; margin: 0 auto 30px auto;}
    .pro-list-bx .title-bx { width: 100%;}
    .pro-list-bx ul.pro-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .pro-list-bx ul.pro-list li { width: calc(100% / 2 - 20px); padding: 0; margin: 10px; -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); background-color: #fff;}
    .pro-list-bx ul.pro-list li .pic-bx { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .pro-list-bx ul.pro-list li .pic-bx img { min-width: 100%; height: auto;}
    .pro-list-bx ul.pro-list li .info-bx-1 { width: 90%; padding: 10px; margin: 0 auto; font-size: 1.2em; font-weight: 600; box-sizing: border-box; border-bottom: 1px #ccc solid;}
    .pro-list-bx ul.pro-list li .info-bx-2 { width: 90%; padding: 10px; margin: 0 auto 20px auto; font-size: 1em; box-sizing: border-box;}
    
    
    
    .video-contact-bx { width: 90%; margin: 0 auto;}
    .video-contact-bx .video-bx { width: 100%; margin: 0 0 20px 0;}    
    .video-contact-bx .contact-bx { width: 100%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}
    .video-contact-bx .contact-bx .title-bx { width: 100%; padding: 5px 10px; color: #fff; font-size: 1.4em; font-weight: 600; background-color: #317bbf; box-sizing: border-box;}
    .video-contact-bx .contact-bx .title-bx .content-bx { width: 100%; padding: 2px; box-sizing: border-box;}
    
    footer { width: 100%; padding: 25px 10px; margin: 30px auto 0 auto; color: #fff; font-size: 1.2em; background-color: #317bbf; box-sizing: border-box;}
    footer .infor-1 { width: 100%; margin: 0 0 10px 0; text-align: center;}
    footer .infor-2 { width: 100%; margin: 0 0 10px 0; text-align: center;}
    footer .infor-3 { width: 100%; text-align: center;}    
    
    
}

/*** scrolling ***/
@media screen and (min-width: 620px) and (max-width: 767px) {
    
    
    .pro-scroll-bx { clear: both; width: 600px; height: 110px; margin: 30px auto; display: flex; justify-content: flex-start; align-items: center;}
    .pro-scroll-bx .next-bx, .pro-scroll-bx .prev-bx { width: 30px; text-align: center; cursor: pointer;}
    .pro-scroll-bx .next-bx img, .pro-scroll-bx .prev-bx img { width: 80%; height: auto;}
    .pro-scroll-bx .pro-list-bx { width: 540px; height: 110px; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll { height: 110px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li { width: 180px; padding: 0; margin: 0; text-align: center; float: left;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li img { width: 80%; height: auto;}
    
    
}

/*** scrolling ***/
@media screen and (max-width: 619px) {
    
    
    .pro-scroll-bx { clear: both; width: 340px; height: 100px; margin: 30px auto; display: flex; justify-content: flex-start; align-items: center;}
    .pro-scroll-bx .next-bx, .pro-scroll-bx .prev-bx { width: 20px; text-align: center; cursor: pointer;}
    .pro-scroll-bx .next-bx img, .pro-scroll-bx .prev-bx img { width: 100%; height: auto;}
    .pro-scroll-bx .pro-list-bx { width: 300px; height: 100px; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll { height: 100px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li { width: 150px; padding: 0; margin: 0; text-align: center; float: left;}
    .pro-scroll-bx .pro-list-bx ul#list-scroll li img { width: 90%; height: auto;}
    
    
}