@charset 'utf-8';
body{margin:0;padding:0;color:#555;font:15px/1.8 微軟正黑體,"Noto Sans",Microsoft Yahei,Tahoma,Arial,Verdana,sans-serif;word-wrap:break-word;min-width: 1000px;}
pre{word-break:break-all;word-wrap:break-word;}
ul,ol,li,dl,dt,dd{margin:0;padding:0;list-style:none;box-sizing:border-box;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
div{max-width:100%;box-sizing:border-box;}
img{border:0;max-width:100%;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}
p{margin:0 0 0.3em;}
.row{}
.x3{width: 33.33%;float: left;}
.x6{width: 50%;float: left;}

.clear{clear:both;}
.wrapper{width: 960px;margin-left:auto;margin-right:auto;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;clear: both;}
.mgt{margin-top: 15px;}
.topnav{line-height: 30px;background: #9acd68;color: #fff;overflow: hidden;}
.topnav .l{width: 14%;text-align: right;float: left;}
.topnav .l .tel{background:url(img/tel.png) no-repeat 0 5px;display: inline-block;text-indent: 30px;}
.topnav .r{width: 14%;float: right;}
.topnav .r .facebook{float: left;}
.topnav .r .facebook span{display: inline-block;background: url(img/facebook.png) no-repeat 0 5px;text-indent: 25px;}
.topnav .r .pico{float: left;margin-left: 15px;}
.topnav .r .pico span{display: inline-block;background: url(img/pico.png) no-repeat 0 5px;text-indent: 25px;}
.logo{text-align: center;height: 105px;}
.logo img{margin-top:25px;}
.nav{width: 100%;background: #9acd68;height: 41px;}
.nav li{width: 14.2%;float: left;text-align: center;line-height: 41px;color: #fff;border-right: solid 1px #fff;font-size: 16px;font-weight: bold;}
.nav li:last-child{border: none;}
.nav li a{display: block;}
.banner{position: relative;}
.banner ul li{overflow: hidden;line-height: 0;}
.banner ul li img{width: 100%;}
.banner ol{position: absolute;bottom: 10px;z-index: 333;text-align: center;width: 100%;}
.banner ol li{width: 15px;height: 15px;background: #fff;display: inline-block;margin: 0 3px;border-radius: 50%;cursor: pointer;opacity: 0.5;}
.banner ol li.on{background: #000;}
.index_a h3{font-size: 21px;text-align: center;margin-top: 30px;margin-bottom: 30px;color: #009d42;}
.index_a p{margin-bottom: 30px;}
.our{overflow: hidden;border-top: solid 1px #ccc;padding-top: 36px;padding-bottom: 45px;}
.our .l{width: 50%;float: left;}
.our .l .info{margin-right: 40px;margin-top:15px;}
.our .l .more{width: 136px;height: 40px;background: #6ecf42;line-height: 40px;text-align: center;color: #fff;font-weight: bold;font-size: 16px;margin-top:20px;}
.our .l .more a{display: block;}
.our .r{width: 50%;float: left;}
.footer{line-height: 36px;text-align: center;color: #fff;background:#9acd68;}

.banner_inner{height: 300px;width: 100%;background:url(img/banner_inner.jpg) top center;background-size:cover;}
h3.h3{color: #009d42;font-size: 25px;text-align: center;margin-top: 30px;margin-bottom: 25px;}
.article{min-height: 500px;margin-bottom: 20px;}
.article .row{margin-top: 30px;}
.article .x3{text-align: center;padding: 10px;}

.products{margin-bottom: 20px;overflow: hidden;}
.products ul li{width: 33%;float: left;border-bottom: solid 2px #64aaaf;margin-top: 20px;text-align: center;overflow: hidden; }
.products ul li .media{border-right: solid 2px #64aaaf;padding: 10px;}
.products ul li:nth-child(3n) .media{border-right: none;}
.products ul li:nth-child(7){border-bottom: none}
.products ul li:nth-child(8){border-bottom: none}
.products ul li:nth-child(9){border-bottom: none}
.products ul li p.img{line-height: 0;height: 225px;}

.products ul li p.title{line-height: 32px;}
.topnav .r a{display: flex;align-items: center;margin-top: 6px;}
@media screen and (max-width:768px) {
    body{min-width: 100%;}
    .nav li{width: 100%;}
    .nav{display: flex;justify-content: space-between;}
    .wrapper{width: 100%;padding-left: 15px;padding-right: 15px;}
    .topnav{padding:5px 15px;}
    .topnav .l,.topnav .r{width: auto;}
   
    .banner ul li{width: 100%;}
}
@media screen and (max-width:767px) {
    .logo{height: auto; display: flex;align-items: center;justify-content: space-between;padding:  15px;padding-left: 0;}
    .logo a{width: 60%;display: flex;}
    .logo img{margin-top: 0;}
    .logo .menbar{position: relative;width: 16px;}
    .logo .menbar span{display: block;width: 16px;height: 1px;background: #000;margin: 5px auto;}
    .logo .menbar.open{position: relative;margin-top: -10px;}
    .logo .menbar.open span:nth-child(1){display: none;}
    .logo .menbar.open span:nth-child(2){
        position: absolute;
        content: '';
        width: 16px;
        height: 1px;
        left: 0;
        background: #000;
        transform: rotate(45deg) scaleX(1.35);
        transition-delay: .1s;
        top: 0;
    }
    .logo .menbar.open span:nth-child(3){
        position: absolute;
        content: '';
        width: 16px;
        height: 1px;
        left: 0;
        background: #000;
        transform: rotate(-45deg) scaleX(1.35);
        transition-delay: .1s;
    }
    .nav{height: auto;display: none;}
    .nav li{float: none;width: 100%;text-align: left;box-sizing: border-box;padding: 0 15px;}
    .our .l{width: 100%;}
    .our .r{width: 100%;margin-top: 2rem;}
    .footer{line-height: 1.2;padding: 10px;}
    .products ul li{width: 100%;margin-top: 0;margin-bottom: 20px;}
    .x6{width: 100%;}
    .map{margin-left: 0 !important;margin-top: 2rem;margin-bottom: 3rem;}
    .banner_inner{height: 100px;}

}