@charset 'utf-8';

main {}
main ul, main dl, main ol { padding: 0;}
main li { list-style: none;}
main p { margin: 0;}

main  article { padding: 80px 0;}
main  article .title { text-align: center;}
main  article .title h2 { font-size: 35px; font-weight: 500; color: #111;}
main  article .title h2 b { font-weight: 500; color: #188000;}
main  article .title p { padding: 25px 0 43px; word-break: keep-all;}
main  article .title p span { display: block;}

@media (max-width:991px){
    main article { padding: 70px 0;}
    main article .title h2 { font-size: 33px; }
    main article .title p { padding: 23px 0 40px; }
}
@media (max-width:768px){
    main  article { padding: 60px 0;}

}
@media (max-width:576px){
    main article { padding: 50px 0;}
    main article .title h2 { font-size: 30px; line-height: 1.2; }
    main article .title p { padding: 18px 0 35px; }
    main  article .title p span { display: inline}
}


main a { transition: .1s;}
main a.more:hover,
main a.go-contact:hover { background: #188000 !important;}
main  .product .wrap { margin: 0 -1%; }
main  .product .wrap li { flex:1; margin: 0 1%; }
main  .product .wrap li a { display: block; padding: 30px 5px 35px; width: 100%; height: 100%; line-height: 1; border: 1px solid #e1e1e1; text-align: center; }
main  .product .wrap li a:hover { border-color: #188000;}
main  .product .wrap li a p { padding: 30px 0 7px; line-height: 1; font-weight: 500;  }
main  .product .wrap li a span { display: inline-block; font-size: 16px; color: #999; }
main  .product .wrap li a .img img { max-width: 130px;}
main  .product a.more { display: block; margin: 50px auto 0; width: 223px; height: 50px; background: #313131; color: #fff; font-size: 18px; text-align: center; line-height: 50px;  border-radius:25px }
main .customer { background: #f2f2f2;}
main .customer .map1 { width: calc(100% - 455px);}
main .customer .info { padding: 50px 0 0 40px; width: 455px; background: #fff;}
main .customer .info p { line-height: 1;}
main .customer .info .p1 { font-size: 16px; color: #999;}
main .customer .info .p2 { padding: 17px 0 23px; font-size: 35px;}
main .customer .info .p2 b { font-weight: 500;}
main .customer .info .p3 a { font-size: 40px; color: #4b9f00; font-weight: 700;}
main .customer .info .p4 { padding: 25px 0 25px; }
main .customer .info .p4 span { display: block; line-height: 1.6;}
main .customer .info .p4 span b { font-weight: 500;}
main .customer .info a.go-contact { display:inline-block; width: 170px; height: 45px; background: #313131; text-align: center; color: #fff; line-height: 45px; }
main .customer .info a.go-contact:nth-of-type(2) { display:inline-block; width: 170px; height: 45px; background: #f9a400; text-align: center; color: #fff; line-height: 45px; }
@media (max-width:991px){
    main .product .wrap { margin: 0 .5%; }
    main .product .wrap li {  margin: 0 .5%; }
    main .customer .map1 { width: calc(100% - 350px)}
    main .customer .info { padding: 50px 0 0 30px; width: 350px;}
    main .customer .info .p2 { font-size: 33px;}
    main .customer .info .p3 { font-size: 38px;}
}

@media (max-width:768px){
    main .product .wrap {  flex-wrap:wrap;  margin: 0 -1% -2%; }
    main .product .wrap li { flex:auto; flex-wrap:wrap;  margin: 0 1% 2%; width: 48%;}
    main .product a.more { margin: 30px auto 0;}
    main .customer .wrap { flex-direction: column;}
    main .customer .map1 { width: 100%}
    main .customer .info { padding: 40px 40px; width: 100%;}
}

@media (max-width:576px){
    main .customer .info { padding: 40px 15px;}
    main .customer .info .p2 { padding: 15px 0; font-size: 31px;}
    main .customer .info .p3  { font-size: 36px;}
    main .customer .info .p4 { padding: 15px 0 20px;}
}