@charset 'utf-8';
.page-content {}
.page-content ul { padding:0;}
.page-content li { list-style:none;}
.page-content .flex { display: flex; justify-content: space-between; }



.company { line-height:1.7;}
.company b { font-weight: 800; color: #111;}
.company b.blue { color: #005bd6;}
.company b.brown { color: #876d3e;}
.company p { padding: 0 0 15px;}
.company .art1 { padding: 0 0 30px; background: url('/page/imgs/company_bg.jpg') no-repeat right top ;;}
.company .art1 .txt .p1 { padding: 0 0 35px; font-size: 24px; line-height: 1.5; }
.company .art1 .txt .p2 { font-size: 20px;}
.company .art2 { padding: 30px; background: #fbfbfb; border: 1px solid #dcdcdc;}
.company .art2 p { padding: 0 0 15px; font-size: 20px; }
.company .art2 .flex div { color: #111;}
@media (max-width:1199px){
    .company .art1 { background-size: 260px auto; }
    .company .art1 .txt .p1 { padding: 0 0 25px;}
}
@media (max-width:991px){
    .company .art1 { background-size: 300px auto; }
    .company .art1 .txt { width: calc(100% - 350px); }
    .company .art1 .txt br { display: none;}
}
@media (max-width:768px){
    .company .art1 { background:none; }
    .company .art1 .txt { width: 100%; }
    .company .art2 .flex { flex-direction: column;;}
}
@media (max-width:576px){
    .company .art1 { background:none; }
    .company .art1 .txt { width: 100%; }
    .company .art2 .flex { flex-direction: column;;}
    .company p{font-size: 15px;}
}

.prod .img img { width: 100%;}
.prod .wrap { padding: 30px 0; margin: -10px;}
.prod .wrap.flex { flex-wrap:wrap;}
.prod .wrap figure { position: relative; margin: 10px; width: calc(50% - 20px); }
.prod .wrap figure .img img { width: 100%;}
.prod .wrap figure figcaption { position: absolute; left: 0; top: 0; padding: 8px 10px; width: 185px; font-size: 18px; line-height: 30px; font-weight: 700;  background: rgba(0,0,0,.5); color: #fff;}
.prod .wrap figure figcaption b { display: inline-block; margin: 0 8px 0 0; width: 30px; height: 30px; text-align: center; background: #005bd6; border-radius: 50%;}


.prod.sys h4 { font-size: 25px; font-weight: 800; color: #111;}
.prod.sys .wrap figure figcaption b { background: #005bd6; }
.prod.pati .wrap figure figcaption b { background: #796035; }

@media (max-width:768px){
    .prod .wrap { margin: -5px;}
    .prod .wrap figure { position: relative; margin: 5px; width: calc(50% - 10px); }
}
@media (max-width:480px){
    .prod .wrap { margin: -5px 0;}
    .prod .wrap.flex { flex-direction: column;;}
    .prod .wrap figure { margin: 5px 0; width: 100%; }
}

#tab-menu { display: flex; margin: 0 0 0 1px;}
#tab-menu li { flex:1; margin:0 0 0 -1px; border: 1px solid #dcdcdc;  }
#tab-menu li a { display: block; height: 40px; line-height: 40px; text-align: center; color: #111; }
#tab-menu li a.on,
#tab-menu li a:hover { background: #796035; color: #fff;}

.pati1 #tab-menu {}
.pati1 #tab-menu {}

@media (max-width:576px){
    .pati1 #tab-menu { flex-wrap:wrap; margin: 1px 0 0 1px; }
    .pati1 #tab-menu li { flex:inherit; margin:-1px 0 0 -1px; width: 33.33%; }
}

.pati2 #content1 .img { border: 1px solid #dcdcdc;}

.pati .flex2,
.pati .flex3,
.pati .flex4 { display: flex; flex-wrap:wrap; }

.pati .flex2 .img { padding: 10px; width: 50%;}
.pati .flex3 .img { padding: 10px; width: 33.333%;}
.pati .flex4 .img { padding: 10px; width: 25%;}

@media (max-width:768px){
    .pati .flex3 .img { width: 50%;}
    .pati .flex4 .img { width: 33.333%;}
}
@media (max-width:480px){
    .pati .flex2 .img,
    .pati .flex3 .img,
    .pati .flex4 .img { padding: 5px;}
    .pati .flex4 .img { width: 50%;}
}