header { height: 120px;}
.head-box { max-width: 1300px; height: 120px;; margin: 0 auto;}
.head-box .logo-box { width: 460px;}
.head-box .logo-box img { width: 76px; height: 69px; float: left; margin-top: 35px;}
.head-box .logo-box h1 { font-size: 40px; float: left; color: #038e37; font-weight: bold; margin: 45px 0 0 20px;} 
.head-box .menu-box { float: left; height: 120px; margin-left: 20px;} 
.head-box .menu-box .menu-item { float: left; width: 120px; height: 120px; text-align: center; padding-top: 60px;} 
.head-box .menu-box .menu-item span { font-size: 21px; color: #038e37;} 
.head-box .menu-box .menu-item h3 { font-size: 15px; color: #038e37; margin-top: 5px;}
.head-box .menu-box .menu-item.active { background: #4cc3f3;}
.head-box .menu-box .menu-item.active span { color: #fff;}
.head-box .menu-box .menu-item.active h3 { color: #fff;}
.head-box .phone-box { float: right; padding-top: 55px;}
.head-box .phone-box .phone-top { overflow: hidden;}
.head-box .phone-box .phone-top span { font-size: 28px; color: #038e37; float: left;}
.head-box .phone-box .phone-top h3 { font-size: 16px; line-height: 32px; margin-left: 10px; color: #038e37; float: left;}
.head-box .phone-box h2 { font-size: 20px; font-weight: bold; color: #038e37;}
.menu-m-box { display: none;}

.banner-box { width: 1212px; height: 470px; margin: 0 auto; position: relative;}
.banner-box .banner-list-box { width: 1920px; height: 470px; position: absolute; left: 50%; top: 0; margin-left: -960px; display: flex;}
.banner-box .banner-list { width: 1920px; height: 470px; display: flex;}
.banner-box .banner-list .banner-item { width: 1920px; height: 470px; flex-shrink: 0;}
.banner-box .banner-list .banner-item img { width: 1920px; height: 470px;}
.banner-box .banner-pagination { position: absolute; bottom: 15px; right: 0;}
.banner-box .banner-pagination .swiper-pagination-bullet { width: 27px; height: 2px; background: #fff; display: inline-block; margin-left: 8px;}
.banner-box .banner-pagination .swiper-pagination-bullet:first-child { margin-left: 0;}
.banner-box .banner-pagination .swiper-pagination-bullet-active { background: #4cc3f3;}
.banner-box .swiper-button-prev { width: 50px; height: 66px; background: url("../imgs/banner-left-btn.png") no-repeat 0 0; position: absolute; left: -50px; top: 50%; margin-top: -33px;}
.banner-box .swiper-button-next { width: 50px; height: 66px; background: url("../imgs/banner-right-btn.png") no-repeat 0 0; position: absolute; right: -50px; top: 50%; margin-top: -33px;}

.header-line { border-bottom: 2px solid #038e37;}

.section { padding: 45px 0;}
.section1 { background: #f3f3f3;}
.section-body { width: 1212px; position: relative; margin: 0 auto;}
.section-title { position: relative;}
.section-title h1 { text-align: center; color: #028e37; font-size: 38px; font-weight: bold;}
.section-title h2 { text-align: center; color: #028e37; font-size: 15px; margin-top: 5px;}
.section-title .line { width: 100%; position: absolute; left: 0; top: 44px; overflow: hidden;}
.section-title .line div { height: 1px; background: #a1c7e7;}
.section-title .line .line-l { width: calc(50% - 135px); float: left;}
.section-title .line .line-r { width: calc(50% - 135px); float: right;}

.home-product-box { overflow: hidden; margin-top: 60px;}

.product-body-r { width: 958px; float: right;}
.product-body-r .product-top { overflow: hidden;}
.product-body-r .product-top .title { float: left; overflow: hidden; font-size: 16px; color: #028e37; line-height: 21px;}
.product-body-r .product-top .title img { float: left; margin-right: 10px;}
.product-body-r .product-top .more { float: right; font-size: 16px; color: #028e37;}
.product-body-r .product-list { margin-top: 10px; overflow: hidden; display: none;}
.product-body-r .product-list.active { display: block;}
.product-body-r .product-list .product-item { width: 470px; padding: 7px; float: left; background: #fff;}
.product-body-r .product-list .product-item:hover { background: #4cc3f3;}
.product-body-r .product-list .product-item:nth-child(2) { float: right;}
.product-body-r .product-list .product-item .pic-box { position: relative;}
.product-body-r .product-list .product-item .pic-box::before { content: ""; display: block; width: 100%; padding-top: 60%;}
.product-body-r .product-list .product-item img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: contain;}
.product-body-r .product-list .product-item h1 { height: 30px; margin-top: 6px; text-align: center; font-size: 20px; color: #2c2c2c; font-weight: bold;}

.home-case-box { overflow: hidden;}
.home-case-list-box { margin-top: 60px;}
.home-case-list-box .home-case-list { display: flex;}
.home-case-list-box .home-case-list .home-case-item-box { overflow: hidden; flex-shrink: 0;}
.home-case-list-box .home-case-list .home-case-item { width: 250px; float: left; display: block; margin-left: 70px;}
.home-case-list-box .home-case-list .home-case-item:first-child { margin-left: 0;}
.home-case-list-box .home-case-list .home-case-item .case-body { width: 250px; height: 250px; padding: 8px; background: #028e37; border-radius: 50%; overflow: hidden;}
.home-case-list-box .home-case-list .home-case-item:hover .case-body { background: #4cc3f3;}
.home-case-list-box .home-case-list .home-case-item .case-body .pic-box { width: 234px; height: 234px; border-radius: 50%; overflow: hidden;}
.home-case-list-box .home-case-list .home-case-item .case-body .pic-box img { width: 234px; height: 234px; object-fit: cover;}
.home-case-list-box .home-case-list .home-case-item h1 { text-align: center; color: #161616; font-size: 16px; margin-top: 25px;}
.home-case-box .case-button-prev { width: 49px; height: 49px; position: absolute; left: -79px; top: 235px; cursor: pointer; background: url("../imgs/home-case-btn-l.png") no-repeat 0 0;}
.home-case-box .case-button-next { width: 49px; height: 49px; position: absolute; right: -79px; top: 235px; cursor: pointer; background: url("../imgs/home-case-btn-r.png") no-repeat 0 0;}
.home-case-m-box { display: none;}

.bottom-menu { background: #028e37; padding: 20px 0 25px;}
.bottom-menu .bottom-menu-box { width: 1212px; margin: 0 auto; overflow: hidden;}
.bottom-menu .bottom-menu-box .bottom-menu-list { float: left; margin-left: 150px;}
.bottom-menu .bottom-menu-box .bottom-menu-list:first-child { margin-left: 0;}
.bottom-menu .bottom-menu-box .bottom-menu-list>div { margin-top: 8px;}
.bottom-menu .bottom-menu-box .bottom-menu-list .bottom-menu-item { color: #fff; font-size: 15px;}

footer { background: #4cc3f3; padding: 10px 0 15px;}
footer .foot-box { width: 1212px; margin: 0 auto;}
footer .foot-box p { font-size: 13px; color: #010101; margin-top: 12px;}

/*common*/
.left-menu-box { width: 220px; background: #028e37; float: left; padding-bottom: 45px;}
.left-menu-box .menu-top { height: 90px; padding-left: 58px; padding-top: 25px; position: relative;}
.left-menu-box .menu-top span { font-size: 28px; color: #fff; position: absolute; left: 18px; top: 50%; margin-top: -14px;}
.left-menu-box .menu-top h1 { font-size: 18px; color: #fff; font-weight: bold;}
.left-menu-box .menu-top h2 { font-size: 12px; color: #fff; margin-top: 2px;}
.left-menu-box .menu-list { border-top: 1px solid #4cc3f3;}
.left-menu-box .menu-list .menu-item { display: block; height: 55px; line-height: 1px; font-size: 15px; border-bottom: 1px solid #4cc3f3; padding: 25px 5px 25px 40px; color: #fff; position: relative;}
.left-menu-box .menu-list .menu-item::before { content: ""; width: 17px; height: 55px; position: absolute; left: 0; top: 0;}
.left-menu-box .menu-list .menu-item::after { content: ""; width: 16px; height: 16px; background: url('../imgs/mune-ico.png') no-repeat 0 0; position: absolute; left: 20px; top: 50%; margin-top: -8px;}
.left-menu-box .menu-list .menu-item.active { background: #4cc3f3; border-color: #4cc3f3;}
.left-menu-box .menu-list .menu-item.active::before { background: #4cc3f3;}
.left-menu-box .menu-list .menu-item.active::after { background: url('../imgs/mune-ico.png') no-repeat 0 -16px;}

.content-box { overflow: hidden;}
.content-box .content-right { width: 958px; float: right; padding-top: 40px;}
.content-box .content-right .title { padding-bottom: 30px; border-bottom: 1px solid #e6e6e6;}
.content-box .content-right .title h1 { font-size: 24px; color: #2c2c2c; font-weight: bold;}
.content-box .content-right .content-body .product-list { overflow: hidden;}
.content-box .content-right .content-body .product-list .product-item { width: 313px; float: left; margin: 0 0 27px 9px; background: #028e37;}
.content-box .content-right .content-body .product-list .product-item:nth-child(3n + 1) { margin: 0 0 27px 0;}
.content-box .content-right .content-body .product-list .product-item .pic-box { position: relative; overflow: hidden; margin: 4px 4px 0; background: #fff;}
.content-box .content-right .content-body .product-list .product-item .pic-box::before { content: ""; display: block; padding-top: 66%;}
.content-box .content-right .content-body .product-list .product-item .pic-box img { width: 100%; height: 100%; object-fit: contain; position: absolute; left: 0; top: 0;}
.content-box .content-right .content-body .product-list .product-item .name { border-top: 5px solid #4cc3f3; padding: 7px 4px; font-size: 16px; text-align: center; color: #fff; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.content-box .content-right .content-body .news-list { overflow: hidden;}
.content-box .content-right .content-body .news-list .news-item { width: 304px; float: left; margin: 30px 0 0 23px;}
.content-box .content-right .content-body .news-list .news-item:nth-child(3n + 1) { margin: 30px 0 0 0;}
.content-box .content-right .content-body .news-list .news-item .news-pic { position: relative;}
.content-box .content-right .content-body .news-list .news-item .news-pic::before { padding-top: 56%; content: ""; display: block;}
.content-box .content-right .content-body .news-list .news-item .news-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.content-box .content-right .content-body .news-list .news-item h1 { margin-top: 10px; font-size: 16px; color: #2c2c2c; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.content-box .content-right .content-body .news-list .news-item .more { margin-top: 10px; font-size: 12px; color: #fff; display: inline-block; width: 70px; height: 18px; background: #c5c5c5; border-radius: 9px; overflow: hidden; text-align: center;}

.content-box .content-right .content-body .contact-box .contact-top { color: #028e37; font-size: 24px; border-bottom: 2px solid #028e37; padding: 15px 0;}
.content-box .content-right .content-body .contact-box .contact-body { box-shadow: rgba(230,230,230,.5) 0px 0px 2px 2px; margin: 15px 3px 3px;}
.content-box .content-right .content-body .contact-box .contact-title { color: #028e37; font-size: 24px; border-bottom: 1px solid #e6e6e6; padding: 10px 0; margin: 0 15px;}
.content-box .content-right .content-body .contact-box .info-row { overflow: hidden; margin: 0 15px; padding: 13px 0; font-size: 16px; border-bottom: 1px solid #e6e6e6;}
.content-box .content-right .content-body .contact-box .info-row:last-child { border-bottom: none;}
.content-box .content-right .content-body .contact-box .info-col3 { width: 33.33%; float: left;}
.content-box .content-right .content-body .contact-box .info-row span { color: #028e37; font-size: 32px;}
.content-box .content-right .content-body .contact-box .info-row span.emailico { font-size: 24px;}

.map-box { height: 400px; margin-top: 40px;}

.pagination { text-align: center; margin-top: 30px;}
.pagination li { display: inline-block; line-height: 24px; border-radius: 3px; border: 1px solid #028e37; color: #028e37; margin: 0 3px;}
.pagination li a { color: #028e37;}
.pagination li a, .pagination li span { display: inline-block; padding: 0 7px; font-size: 14px;}
.pagination li.active { background: #028e37; color: #fff;}
.pagination li.disabled { background: #c5c5c5; color: #fff; border: 1px solid #c5c5c5;}

.details-box .title { text-align: center;}
.details-box .title h1 { font-size: 30px; color: #038e37;}
.details-box .title .title-data { border-bottom: 1px solid #e6e6e6; padding: 15px 0;}
.details-box .title span { font-size: 12px; color: #ccc;}
.details-box .details-body { margin-top: 20px; font-size: 15px; line-height: 25px;}
.details-box .details-body img { display: inline-block; max-width: 100%;}


@media screen and ( max-width: 750px) {
    header { height: 31px;}
    .head-box { max-width: 100%; height: 31px;}
    .head-box .logo-box { width: auto;}
    .head-box .logo-box img { width: 35px; height: auto; float: left; margin-top: 5px; margin-left: 8px;}
    .head-box .logo-box h1 { font-size: 18px; margin: 0 0 0 5px; line-height: 31px;} 
    .head-box .menu-box { display: none;}
    .head-box .phone-box { display: none;}

    .menu-m-box { display: block; position: absolute; width: 100%; height: 31px; left: 0; top: 0; z-index: 100;}
    .menu-m-box .menu-m-ico { width: 31px; height: 31px; position: absolute; right: 0; top: 0; background: url("../imgs/menu-m-bg.png") no-repeat 0 0; background-size: 100% 100%;}
    .menu-m-box .menu-m-list { width: 100%; background: #fff; position: absolute; left: 0; top: 0; display: none;}
    .menu-m-box .menu-m-list .close-btn { width: 31px; height: 31px; position: absolute; right: 0; top: 0; background: url("../imgs/menu-m-close-bg.png") no-repeat 0 0; background-size: 100% 100%;}
    .menu-m-box .menu-m-list .menu-m-item { border-bottom: 1px solid #eeeded;}
    .menu-m-box .menu-m-list .menu-m-item .menu-m-title { line-height: 31px; text-align: center; color: #028e37; font-size: 14px; font-weight: bold; display: block;}
    .menu-m-box .menu-m-list .menu-m-item .menu-m-son-list { overflow: hidden; padding: 5px 20px; display: none;}
    .menu-m-box .menu-m-list .menu-m-item .menu-m-son-list.active { display: block;}
    .menu-m-box .menu-m-list .menu-m-item .menu-m-son-list .menu-m-son-item { width: 50%; float: left; color: #4a4a4a; font-size: 12px; padding: 0 5px; line-height: 26px;}

    .banner-box { width: 100%; height: 177px; overflow: hidden;}
    .banner-box .banner-list-box { width: 100%; height: 177px; left: 0; top: 0; margin-left: 0;}
    .banner-box .banner-list { width: 100%; height: 177px;}
    .banner-box .banner-list .banner-item { width: 100%; height: 177px;}
    .banner-box .banner-list .banner-item img { width: 100%; height: 177px; object-fit: cover;}
    .banner-box .banner-pagination { bottom: 10px; right: 5px;}
    .banner-box .banner-pagination .swiper-pagination-bullet { width: 14px; height: 2px; margin-left: 4px;}
    .banner-box .swiper-button-prev { width: 50px; height: 66px; background: url("../imgs/banner-left-btn.png") no-repeat 0 0; position: absolute; left: -50px; top: 50%; margin-top: -33px;}
    .banner-box .swiper-button-next { width: 50px; height: 66px; background: url("../imgs/banner-right-btn.png") no-repeat 0 0; position: absolute; right: -50px; top: 50%; margin-top: -33px;}

    .section { padding: 22px 10px;}
    .section1 { background: #f3f3f3;}
    .section-body { width: auto;}

    .section-title { position: relative;}
    .section-title h1 { font-size: 19px;}
    .section-title h2 { text-align: center; color: #028e37; font-size: 12px; margin-top: 5px;}
    .section-title .line { width: 100%; position: absolute; left: 0; top: 22px; overflow: hidden;}
    .section-title .line div { height: 1px; background: #a1c7e7;}
    .section-title .line .line-l { width: calc(50% - 65px); float: left;}
    .section-title .line .line-r { width: calc(50% - 65px); float: right;}

    .home-product-box { margin-top: 20px;}
    
    .product-body-r { width: auto; float: none;}
    .product-body-r .product-top { margin-top: 8px;}
    .product-body-r .product-top .title { font-size: 12px;}
    .product-body-r .product-top .title img { margin-right: 5px; width: 12px; height: 12px; margin-top: 4px;}
    .product-body-r .product-top .more { font-size: 12px;}
    .product-body-r .product-list { margin-top: 10px; overflow: hidden;}
    .product-body-r .product-list .product-item { width: calc(50% - 5px); padding: 5px; float: left; background: #fff;}
    .product-body-r .product-list .product-item .pic-box { position: relative;}
    .product-body-r .product-list .product-item .pic-box::before { content: ""; display: block; width: 100%; padding-top: 60%;}
    .product-body-r .product-list .product-item img { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
    .product-body-r .product-list .product-item h1 { height: 20px; margin-top: 6px; font-size: 12px;}

    .home-case-box { display: none;}
    .home-case-m-box { margin: 0 50px; position: relative; display: block;}
    .home-case-m-box .home-case-m-list-box { margin-top: 20px; overflow: hidden;}
    .home-case-m-list-box .home-case-m-list { display: flex;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item { flex-shrink: 0; padding: 0 20px;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item .case-body { width: auto; padding: 8px; background: #028e37; border-radius: 50%; overflow: hidden;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item:hover .case-body { background: #4cc3f3;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item .case-body .pic-box { width: auto; position: relative; border-radius: 50%; overflow: hidden;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item .case-body .pic-box::before { padding-top: 100%; content: ""; display: block;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item .case-body .pic-box img { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
    .home-case-m-list-box .home-case-m-list .home-case-m-item h1 { text-align: center; color: #161616; font-size: 12px; margin-top: 25px;}
    .home-case-m-box .case-m-button-prev { width: 25px; height: 25px; position: absolute; left: -35px; top: calc(50% - 35px); cursor: pointer; background: url("../imgs/home-case-btn-l.png") no-repeat 0 0; background-size: 100% 100%;}
    .home-case-m-box .case-m-button-next { width: 25px; height: 25px; position: absolute; right: -35px; top: calc(50% - 35px); cursor: pointer; background: url("../imgs/home-case-btn-r.png") no-repeat 0 0; background-size: 100% 100%;}

    .bottom-menu { background: #028e37; padding: 15px 0;}
    .bottom-menu .bottom-menu-box { width: auto; margin: 0 0 0 10px; overflow: hidden;}
    .bottom-menu .bottom-menu-box .bottom-menu-list { float: left; margin-left: 0; padding-right: 20px;}
    .bottom-menu .bottom-menu-box .bottom-menu-list:first-child { margin-left: 0;}
    .bottom-menu .bottom-menu-box .bottom-menu-list>div { display: none; margin-top: 0}
    .bottom-menu .bottom-menu-box .bottom-menu-list>div.title { display: block;}
    .bottom-menu .bottom-menu-box .bottom-menu-list .bottom-menu-item { color: #fff; font-size: 12px; line-height: 24px;}

    footer { background: #4cc3f3; padding: 15px 10px;}
    footer .foot-box { width: auto; margin: 0 auto;}
    footer .foot-box p { font-size: 12px; color: #010101; margin-top: 10px;}

    /*common*/
    .left-menu-box { width: auto; float: none; padding-bottom: 0; padding-left: 0; overflow: hidden;}
    .left-menu-box .menu-top { width: 32px; height: 72px; padding-left: 0; padding-top: 25px; position: relative; float: left;}
    .left-menu-box .menu-top span { font-size: 14px; left: 9px; top: 8px; margin-top: 0;}
    .left-menu-box .menu-top h1 { font-size: 12px; font-weight: bold; text-align: center;}
    .left-menu-box .menu-top h2 { display: none;}
    .left-menu-box .menu-list { border-top: none; margin-left: 32px;}
    .left-menu-box .menu-list .menu-item { width: 33.33%; height: 36px; float: left; line-height: 20px; font-size: 12px; padding: 8px 5px 8px 20px; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
    .left-menu-box .menu-list .menu-item em { width: 0; height: 16px; border-right: 1px solid #4cc3f3; position: absolute; right: 0; top: 10px; display: block;}
    .left-menu-box .menu-list .menu-item::before { width: 5px; height: 36px;}
    .left-menu-box .menu-list .menu-item::after { width: 8px; height: 8px; background: url('../imgs/mune-ico.png') no-repeat 0 0; background-size: 8px 16px; left: 8px; margin-top: -4px;}
    .left-menu-box .menu-list .menu-item.active::after { background: url('../imgs/mune-ico.png') no-repeat 0 -8px; background-size: 8px 16px;}
    .left-menu-box .menu-list .menu-item.active em { border-right: 1px solid #4cc3f3;}

    .content-box .content-right { width: auto; float: none; padding-top: 15px;}
    .content-box .content-right .title { padding-bottom: 15px;}
    .content-box .content-right .title h1 { font-size: 14px;}

    .content-box .content-right .content-body .product-list .product-item { width: calc(50% - 5px); margin: 0 0 14px 10px;}
    .content-box .content-right .content-body .product-list .product-item:nth-child(3n + 1) { margin: 0 0 14px 10px;}
    .content-box .content-right .content-body .product-list .product-item:nth-child(2n + 1) { margin: 0 0 14px 0;}
    .content-box .content-right .content-body .product-list .product-item .pic-box { margin: 3px 3px 0;}
    .content-box .content-right .content-body .product-list .product-item .name { border-top: 3px solid #4cc3f3; padding: 4px 3px; font-size: 12px;}
    
    .content-box .content-right .content-body .news-list .news-item { width: calc(50% - 5px); margin: 15px 0 0 10px;}
    .content-box .content-right .content-body .news-list .news-item:nth-child(3n + 1) { margin: 15px 0 0 10px;}
    .content-box .content-right .content-body .news-list .news-item:nth-child(2n + 1) { margin: 15px 0 0 0;}
    .content-box .content-right .content-body .news-list .news-item h1 { font-size: 12px; margin-top: 5px;}
    .content-box .content-right .content-body .news-list .news-item .more { margin-top: 5px; font-size: 12px; color: #fff; display: inline-block; width: 50px; height: 16px; border-radius: 8px;}
    
    .content-box .content-right .content-body .contact-box .contact-top { font-size: 12px; padding: 10px 0;}
    .content-box .content-right .content-body .contact-box .contact-body { margin: 10px 3px 3px;}
    .content-box .content-right .content-body .contact-box .contact-title { font-size: 12px; padding: 7px 0; margin: 0 10px;}
    .content-box .content-right .content-body .contact-box .info-row { margin: 0 10px; padding: 7px 0; font-size: 12px;}
    .content-box .content-right .content-body .contact-box .info-row:last-child { border-bottom: none;}
    .content-box .content-right .content-body .contact-box .info-col3 { width: auto; float: none; margin-top: 3px;}
    .content-box .content-right .content-body .contact-box .info-row span { color: #028e37; font-size: 16px;}
    .content-box .content-right .content-body .contact-box .info-row span.emailico { font-size: 12px;}

    .map-box { height: 200px; margin-top: 20px;}
    }