﻿
/* CSS Document */

.m-menubtn{position: fixed;z-index: 102;top:0;right: 0;width:60px;height:60px;cursor: pointer;-webkit-transition:.5s;transition:.5s; display:none}
.m-menubtn span{position: absolute;top:0;bottom: 0;left: 0; right: 0; width:20px;height:2px; background: #333; margin: auto;}
.m-menubtn span:before, .m-menubtn span:after {content: "";width: 100%;height: 100%;position: absolute;bottom: 0;left: 0;right: 0;margin: auto; background-color: #333;}
.m-menubtn span:before {bottom: 5px;}
.m-menubtn span:after {bottom: -5px;}
.m-menubtn.active span:before{-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg); background:#006835}
.m-menubtn.active span:after {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
.m-menubtn.active span {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); background:#006835}
.m-menubtn.active span, .m-menubtn.active span:before, .m-menubtn.active span:after {right: 0;bottom: 0;}
.m-menubtn span, .m-menubtn span:before, .m-menubtn span:after{-webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);-moz-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);-o-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);}

/*.m-menubtn:before {content: "Menu";font-size: 12px;position: absolute;bottom: 10px; left: 0; right: 0; margin: auto;text-align: center; color:#fff}

*/

.m-menu{position:fixed; right:0;top:0; width:100%; height:100%;overflow-y:auto; overflow-x:hidden;visibility: hidden;z-index:98;}
.m-menu:before{content:'';top: 0;left: 0;width: 100%;height: 100%; position: fixed;background: rgba(0,0,0,0.9); opacity:0;transition:0.5s;}
.m-menu ul{ width:100%;padding-top:80px; padding-bottom:30px; padding-left:3%; padding-right:3%;overflow-y:auto;overflow-x:hidden;}
.m-menu li{ position: relative;border-bottom:1px solid rgba(255,255,255,.2);opacity: 0; transform: translateX(3.5rem);}
.m-menu li>a{ font-size:16px;line-height: 30px;padding: 12px 0;position:relative}
.m-menu li>a i{ position:absolute; width:15px; height:15px; right:0;top:50%; margin-top:-7px; opacity:.65}
.m-menu li>a i:before{ content:""; width:15px; height:1px; background:#fff; position:absolute; left:0;top:7px;}
.m-menu li>a i:after{ content:""; width:1px; height:15px; background:#fff; position:absolute; left:7px;top:0;}
.m-menu li>a.on i:after{ -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.m-menu a{ display:block; color:#fff;}
.m-menu .sub{ display:none; padding-bottom:10px}
.m-menu .sub a{color:rgba(255,255,255,.6); line-height:30px;font-size:15px; padding-left:20px; position:relative}
.m-menu .sub a:before{/*content: "";*/position: absolute;bottom: 15px; left: 0; width: 10px; height: 1px; background: rgba(255,255,255,.5);}
.m-menu.active{visibility:visible;opacity:1;}
.m-menu.active:before{ opacity:1}
.m-menu.active li{opacity: 1;transform: translateX(0);transition: opacity 500ms linear 375ms, transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 375ms;}


.m-footer{color:#fff; position:fixed; width:100%; left:0;bottom:0; display:none; font-size:12px; z-index:99;background: #006835;}
.m-footer li{ float:left; width:33.33%; text-align:center}
.m-footer a{ display:block; line-height:20px;color:#fff;}
.m-footer .tel i{ display:block;background:url(../image/ico-tel.png) no-repeat center; background-size:auto 18px; height:25px;}
.m-footer .tel2 i{ display:block;background:url(../image/ico-tel.png) no-repeat center; background-size:auto 18px; height:25px;}
.m-footer .mail i{ display:block;background:url(../image/ico-add.png) no-repeat center; background-size:auto 18px; height:25px;}
.m-footer span{ display:block;}


@media screen and (max-width:1650px){
.wrap{ width:90%;}
.nbanner2 .txt{ width:90%; left:5%; margin-left:0}
}
@media screen and (max-width:1440px){
.space, .main{ padding:60px 0}
.title{ font-size:35px;}
.banner .ban-txt h3{ font-size:50px}
.banner .ban-txt ul{ margin-top:30px}
.i-businessList .txt h4{ font-size:30px; line-height:40px}
.i-businessList02 .txt .tit{ font-size:30px; margin-bottom:5px;}
.i-newslist .txt{ padding:50px 35px;}
.nbanner{ height:400px}
.nbanner .nbantit{font-size: 28px;}
.inner-nav li a{ height:70px}
.lacat{ line-height:70px}
.main .content-about .txt{ padding-top:0}
.historyList{padding: 120px 0 20px;}
.historyList li .txt{ font-size:16px}
.historyList li .txt .time{ font-size:24px}
.newslist li{ padding:3.5% 0}
.business .txt h3{ font-size:35px;}
.nbanner2 .txt{ padding:3%; font-size:16px;}
.nbanner2 .txt h1{ font-size:30px;}
.newslist ul{ margin-top:-60px}
.newslist .txt .intro{-webkit-line-clamp:2; min-height:auto; margin-bottom:4%}
.newslist .txt .time{padding:2% 0 1%;}
.newslist .txt h3{ margin-bottom:3%}
.businessNum{ margin-top:60px; margin-bottom:60px}
.businessNum .numCount li{ width:25%; padding:0 2%}
.businessNum .numCount .tit1 .counter{ font-size:35px}
.businessNum .numCount .tit1 .fh{ font-size:14px}
}
@media screen and (max-width:1024px){
.wrap{ width:100%; padding:0 20px}
.nbanner2 .txt{ width:calc(100% - 40px); left:20px}
.header, .logo, .search{ height:60px}
.logo img{ height:50px; width:auto}
.search{margin-right: 40px;}
.search-btn{ margin-top:13px;margin-left:0;}
.search-alert{ padding:20px; top:60px}
.search-alert form{ height:40px; line-height:38px;}
.menu{ display:none}
.m-menubtn{ display:block}
.banner{ height:auto; margin-top:60px;}
.banner .ban-txt h3{ font-size:40px}
.banner .ban-txt li{ padding:0 3%}
.banner .swiper-pagination-bullet{ width:8px; height:8px;}
.banner.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 5px}
.space, .main{ padding:40px 0}
.title{ font-size:30px; background-size:auto 8px;padding-bottom:15px;margin-bottom:25px;}
.i-aboutList{ margin-top:20px}
.i-aboutList .arrow{ width:45px; height:45px}
.i-aboutList .arrow:after{width: 10px; height: 10px;top: 16px;left: 15px;}
.i-aboutList li .txt{padding: 20px 30px;}
.i-aboutList h3{ font-size:20px;letter-spacing: 5px;padding-top: 20px; background-size:auto 8px; height:120px}
.i-aboutList h4{font-size:12px;left:40px;}
.i-businessList .txt h3{font-size:20px}
.i-businessList .txt h4{font-size: 24px;line-height: 30px;margin:10px 0 30px;}
.i-businessList .numCount .tit1 .counter{ font-size:35px}
.i-businessList .numCount .tit1 .fh{ font-size:16px;padding-left: 5px;}
.i-businessList02 .txt .tit{ font-size:26px}
.i-newslist .txt{ padding:10%}
.i-newslist .intro{-webkit-line-clamp:3;min-height:72px;}
.i-newslist h3{font-size: 18px;line-height: 24px;min-height: 48px; margin:10px 0}
.i-newslist .swiper-scrollbar-drag{ height:5px; top: -3px;}
.i-contact .title{background-size:auto 8px;}
.i-contact .list li{ padding:0 2%}
.i-contact .list .ico{ width:65px; height:65px;margin: 0 auto 30px;}
.i-contact .list .tel .ico{ background-size:auto 25px}
.i-contact .list .mail .ico{ background-size:auto 20px}
.i-contact .list .add .ico{ background-size:auto 25px}
.i-contact .list h3{margin-top: 5px;}
.i-contact .list .tel h3, .i-contact .list .mail h3{ font-size:16px}
.main .content-about .txt{ width:100%}
.content-about-intro{ height:auto; padding-right:0}
.historyList{padding: 80px 0 20px;}
.historyList .topDot{ width:60px; height:60px; margin-left: -30px;background-size: auto 25px;}
.nbanner{ margin-top:60px;height:260px;}
.nbanner .nbantit{ font-size:20px}
.nbanner .nbantit h4{ font-size:14px}
.nbanner h5{ font-size:14px}
.lacat{ display:none}
.navBox02{ display:none}
.navBox .wrap{ padding:0}
.inner-nav{ width:100%; float:none}
.inner-nav li a{ height:60px;}
.inner-nav li:last-child a:after{ display:none}
.main .content-about .title{ text-align:center}
.main .content-about .pic{ width:100%}
.main .content-about .pic:after{ display:none}
.cullist li{ width:49%; margin-bottom:2%}
.historyList li:nth-child(2n+1) .txt{ padding-left:0}
.historyList li:nth-child(2n) .txt{ padding-right:0}
.newslist ul{ margin-top:-40px}
.newslist .txt h3{ font-size:18px;line-height: 24px; margin-bottom:2%}
.newslist .txt .time{ padding:1% 0}
.newslist .txt .intro{ margin-bottom:2%}
.newslist .more{ width:40px; height:40px}
.newslist .more:after{top:13px;left:11px;}
.newstit{ font-size:22px;line-height: 30px;}
.newstm{ font-size:12px; line-height:20px; margin-bottom:10px}
.news-article{ padding:20px 15px;}
.news-article span{ font-size:15px !important;font-family:'microsoft yahei' !important}
.business .txt h3{ font-size:30px;margin-bottom: 5%;}
.business .txt .intro{-webkit-line-clamp: 2;line-height: 24px;margin-bottom: 5%;}
.nbanner2{ margin-top:60px; height:auto}
.nbanner2 .txt{ position:relative; width:100%; left:0;bottom:auto; background:#f3f3f3; color:#666; padding:40px 15px}
.nbanner2 .txt h1{ font-size:30px;line-height: 35px;color:#333;text-align: center;background: url(../image/tit-ico.png) no-repeat center bottom;background-size: auto 8px;padding-bottom:15px; margin-bottom:25px}
.businessList .txt{ font-size:16px;letter-spacing:0;padding: 5%;}
.businessList .txt h3{ font-size:22px;line-height:30px;}
.businessList .txt h4{ font-size:18px}
.businessNum{ margin-top:40px; margin-bottom:30px}
.nav-pro{ margin-bottom:20px}
.nav-pro li a{ font-size:16px; padding:5px 0;width: 125px;margin: 0 5px;}
.main-product-food{ padding-top:100px !important}
.back{ margin-top:20px}
.back a{ line-height:40px; padding:0 35px}
.businessList03{ margin-top:30px}
.businessList03 .swiper-button-prev, .businessList03 .swiper-button-next{ width:45px; height:45px; margin-top:-23px}
.businessList03 .swiper-button-prev:after, .businessList03 .swiper-button-next:after{ width:10px; height:10px}
.businessList03 .swiper-button-prev:after{top: 17px;right: 14px;}
.businessList03 .swiper-button-next:after{top: 17px;left: 14px;}
#allmap{ height:400px}
.footer{ padding:20px 0}
.copyright, .f-ewm{ float:none;}
.qbfood{ padding-bottom:35px}
.qbfood .swiper-pagination-bullet{ width:8px; height:8px;}
.yjf-prolist .txt h3{ font-size:20px; margin:0}
.yjf-prolist .txt h5{ font-size:16px; margin:5px 0 0 }
}
@media screen and (max-width:768px){
.wrap{ padding:0 15px}
.m-menubtn{ width:50px}

.banner .ban-txt h3{ font-size:30px}
.title{ font-size:26px;line-height: 30px; margin-bottom:20px}
.note{ font-size:14px}
.i-aboutList ul{ flex-wrap:wrap;}
.i-aboutList li{ width:50%}
.i-businessList .txt h3{ font-size:16px}
.i-businessList .txt h4{ font-size:20px; line-height: 26px;}
.i-businessList .numCount li{ font-size:14px}
.i-businessList .numCount .tit1 .counter{ font-size:26px}
.i-businessList02 .txt .tit{ font-size:24px}
.i-newslist h3{ font-size:16px;}
.i-newslist .intro{-webkit-line-clamp: 2;min-height: 48px;}
.space, .main{ padding:30px 0}
.main .content{ font-size:14px; line-height:26px}
.main .content-about .txt p{ margin-bottom:10px}
.main-development .title{ text-align:left; padding-left:60px; background:none; padding-bottom:0}
.historyList{ padding:60px 0 10px; margin-top:-55px}
.historyList .topDot{ width:45px; height:45px; background-size:25px; left:0; margin-left:0}
.historyList .botDot{ margin-left:0; left:18px}
.historyList .line{ left:23px;}
.historyList li .txt{ width:100%; text-align:left}
.historyList li:nth-child(2n+1) .txt{ padding-left:60px; padding-right:0}
.historyList li::before{ left:18px; margin-left:0;top: 3px;}
.historyList li .txt:after{ left:25px; width:25px; top: 8px;}
.historyList li:nth-child(2n) .txt:after{ right:auto; left:25px}
.historyList li .txt{ font-size:14px; line-height:20px}
.historyList li .txt p{ margin-top:8px}
.historyList li .txt .time{ font-size:18px;}
.my-gallery li{ width:48%}
.newslist .txt .time{ font-size:12px;}
.newslist .txt h3{font-size: 16px;line-height: 20px;}
.newslist .txt .intro{ font-size:12px; line-height:18px}
.newslist .more{ width:30px; height:30px}
.newslist .more:after{width:6px;height:6px;top: 10px;left: 9px;}
.newstit{ font-size:18px;line-height: 24px;}
.page_2{ margin-top:30px}
.page_2 p{ font-size:12px;}
.page_2 p a{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.business li{ margin-bottom:4%}
.business a{ display:block}
.business .pic, .business .txt{ width:100%}
.business .txt{ padding:2% 0 3%}
.business li:nth-child(2n) .txt{padding:3% 0}
.business .txt h3{ margin-bottom:1%;font-size: 24px;line-height: 30px;}
.business .txt .intro{ margin-bottom:1%;font-size:14px;line-height: 20px;}
.nbanner2 .txt{padding: 20px 15px; font-size: 14px;line-height: 26px;}
.nbanner2 .txt h1{font-size: 26px;line-height: 30px; margin-bottom: 20px;}
.businessNum{ margin-top: 20px;margin-bottom: 20px;}
.businessNum .numCount li{ font-size:14px;line-height: 20px;}
.businessNum .numCount .tit1 .counter{ font-size:30px}
.businessList .txt h3{ font-size:16px;line-height: 20px;}
.businessList .txt h4{ font-size:14px; margin-bottom: 5px;}
.businessList .txt{ font-size:14px; line-height:20px}
.businessIntro{ font-size:14px; line-height:20px; margin-bottom:20px}
.i-contact{ display:none}
.main .content-contact{ font-size:14px; line-height:26px}
.content-contact .title{ font-size:26px;margin-bottom: 30px;}
.contact-list{margin-bottom: 20px;}
.contact-list li{ line-height:20px}
.contact-list .icon{ width:60px; height:60px;box-shadow: 0 0 0 5px rgba(0,104,53,.15); margin-bottom:10px}
.contact-list .tel .icon{ background-size:auto 20px}
.contact-list .mail .icon{background-size:auto 17px}
.contact-list .add .icon{ background-size:auto 20px}
#allmap{ height:300px}
.footer{ background:#ebebeb; font-size:12px; padding-bottom:60px}
.copyright{ padding-bottom:5px}
.i-newslist{ padding-bottom:20px}
.i-newslist .pic{ position:relative; opacity:1; height:270px}
.i-newslist .pic:after{ display:none}
.i-newslist .txt{ padding:5%}
.i-newslist .swiper-slide:hover h3{ color:#006835}
.i-newslist .swiper-slide:hover .time{color:#999}
.i-newslist .swiper-slide:hover .intro{color:#999}

.nav-pro li a{ font-size:14px; padding: 3px 0;width: 100px;}
.prolist .item, .businessList02 li{ width:48%}
.bus-tit{ font-size:22px;margin-bottom: 20px;}
.back a{ line-height:34px; padding:0 25px}
.yjf-prolist li{ margin-bottom:30px}
.m-footer{ display:block}
}
@media screen and (max-width:640px){
.space, .main{ padding:20px 0}
.search{ display:none}
.banner .ban-txt h3{ font-size:20px}
.banner .ban-txt li{ font-size:12px}
.banner .ban-txt .ico img{ width:auto; height:25px}
.title, .nbanner2 .txt h1{ font-size:22px;background-size: auto 6px;padding-bottom: 10px; margin-bottom:15px}
.note{ font-size:12px}
.i-aboutList h3{ font-size:18px;}
.i-aboutList .arrow{ width:40px; height:40px}
.i-aboutList .arrow:after {width: 8px;height: 8px;top: 14px;left: 13px;}
.i-aboutList li:hover .arrow{right:30px}
.i-businessList .pic{ height:240px}
.i-businessList .pic img{ height:100%; object-fit:cover}
.i-businessList .txt h3{ font-size:14px}
.i-businessList .txt h4{font-size: 16px;line-height: 20px;margin: 5px 0 15px;}
.i-businessList .numCount li{ margin:0; padding:0 1%; width:33%}
.i-businessList .numCount li, .i-businessList .numCount .tit1 .fh{ font-size:12px}
.i-businessList .numCount .tit1 .counter{ font-size:20px}
.i-businessList02 .txt .tit{ font-size:18px}
.i-businessList02 .txt .more{ font-size:12px;display: none;}

.i-newslist .txt{ padding:5%}
.i-newslist h3, .i-newslist .intro{line-height:20px;min-height: 40px;}
.i-newslist .time{ font-size:12px}
.i-newslist .pic{ height:200px}
.nbanner{ height:200px}
.nbanner .nbantit{ font-size:16px;bottom:35%}
.nbanner .nbantit h3:after{ width:15px;margin: 5px auto;}
.nbanner .nbantit h4{ font-size:12px}
.content-contact .title{ font-size:22px; margin-bottom: 15px; text-align:left; background:none; padding-bottom:0}
.contact-list ul{ flex-wrap:wrap;}
.contact-list li{ width:100%; padding:0; text-align:left; position:relative; padding-left:60px;margin-bottom: 10px; padding-bottom:10px;border-bottom: 1px solid #e8e8e8; min-height:60px}
.contact-list .icon{ position:absolute; left:0;top:5px; width:45px; height:45px;margin-bottom: 0;}
.contact-list h4{ margin:0}
.businessList .pic{ width:100%; float:none}
.businessList .txt{ float:none; width:100%; padding: 15px 15px 20px;position:relative}
.businessList .txt h3{ margin-bottom:5px}
.businessList .txt h4{ margin-top:-5px}
.businessIntro{ margin-bottom:15px}
.inner-nav li{ width:25%}
.inner-nav li a{ height:45px;font-size:15px; padding:0}
.cullist .tit{ font-size:16px}
.newslist ul{ margin-top:-20px}
#allmap{ height:200px}
.pages{ margin-top:20px}
.pagination p, .pagination a{ line-height:20px!important; padding:2px 10px!important; margin-right:3px !important; margin-bottom:3px !important;}
.business .txt h3{ font-size:20px}
.bus-tit{ font-size:18px}
.bus-tit span{ padding:0 20px}
.main-product-food{padding-top: 80px !important;}
.businessList03 .tit{ font-size:16px;padding: 30px 15px 15px;}
.businessList03 .swiper-button-prev{left:15px;}
.businessList03 .swiper-button-next{right:15px}
.yjf-prolist li{ margin-bottom:20px;}
.yjf-prolist .pic{ float:none; width:100%;}
.yjf-prolist .pic img{ width:auto}
.yjf-prolist .pic .wz{font-size: 12px;line-height: 20px; margin-top:2%}
.yjf-prolist .txt{ width:100%; float:none}
.yjf-prolist .txt h3{ font-size:16px;margin:10px 0 0;}
.yjf-prolist .txt h5{ font-size:14px}
}
@media screen and (max-width:480px){
.banner .ban-txt ul{ display:none}
.i-aboutList h4{ display:none}
.i-businessList02 .txt .tit{ font-size:16px}
.i-aboutList li .txt{ padding:15px}
.i-aboutList h3{ font-size:16px}
.i-aboutList .arrow{ width:30px; height:30px}
.i-aboutList .arrow:after{width: 6px;height: 6px;top: 11px;left: 9px;}
.i-aboutList li:hover .arrow{right:15px}
.i-newslist .pic{height: 180px;}
.nbanner{ height:150px}
.cullist li{ width:100%}
.my-gallery li{ width:100%; margin-right:0}
.newslist .txt .intro{ display:none}
.newslist .txt h3{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.newstit{ font-size:16px; line-height: 20px;}
.businessNum .numCount{flex-wrap:wrap;}
.businessNum .numCount li{ width:50%; padding:2%}
.businessNum .numCount .tit1 .counter{ font-size:26px}
.businessNum .numCount li:nth-child(1), .businessNum .numCount li:nth-child(2){ border-bottom:1px solid #e8e8e8; padding-bottom:15px}
.businessNum .numCount li:nth-child(1), .businessNum .numCount li:nth-child(3){ border-right:1px solid #e8e8e8}
.businessNum .numCount li:nth-child(3), .businessNum .numCount li:nth-child(4){ padding-top:15px;}
.prolist .item, .businessList02 li{ width:100%; margin-right:0}
.bus-tit{ margin-bottom:15px}
.businessList03 .swiper-button-prev, .businessList03 .swiper-button-next{ width:35px; height:35px; margin-top:-17px}
.businessList03 .swiper-button-prev:after, .businessList03 .swiper-button-next:after{ width:6px; height:6px;}
.businessList03 .swiper-button-next:after{top: 14px;left: 13px;}
.businessList03 .swiper-button-prev:after{top:14px;right:13px}
}