*{ margin:0; padding:0; color:#676767;outline:none;font: 14px/1.8 "微软雅黑","Hiragino Sans GB","冬青黑体",tahoma,"times new roman",helvetica,arial;}
a{text-decoration:none}
body{ background-color:#ffffff;}
a.logo{font-size:0; display: flex; position:fixed; top: 40px; left: 40px; z-index: 99}
a#navSwitch{ background-color:#00552c; width:48px; height: 48px; border:none; display: flex; flex-flow: column nowrap; box-sizing: border-box; padding:12px 8px; justify-content:space-between; align-items: center; position: fixed; top: 50px; right: 50px; cursor: pointer; z-index:5; transition: all 0.3s}
a#navSwitch span{ height: 2px; width:100%; display: block; background-color:#fff;transition: all 0.3s}
a#navSwitch.active{background-color:#fff; justify-content: center;}
a#navSwitch.active span{ background-color:#00552c; position: absolute;}
a#navSwitch.active span:first-child{ transform:rotate(45deg)}
a#navSwitch.active span:nth-child(2){ width: 0}
a#navSwitch.active span:last-child{ transform:rotate(-45deg)}

nav{ height: 100%; position:fixed; top: 0; right:-380px; display: flex; flex-flow:column nowrap; background:url("../images/nav-bg.png"); width:380px; align-items: center; justify-content: center; transition:all 0.5s; z-index: 4}
nav.active{right:0}
nav a{ font-size: 24px; font-weight: bold; color: #fff; text-shadow:0 1px 2px rgba(0,0,0,.5)}


.code-copyright{ display: flex; flex-flow: column nowrap; position: fixed; bottom: 40px; left:40px; z-index: 99}
.bot-code{ display: flex; align-items: flex-start;margin-bottom: 20px}
.bot-code img{ width: 100px; height: auto; margin-right:20px; }
.copyright,
.copyright a{ font-weight: bold; color: #00552c; text-shadow: 0 1px 2px #a3a3a3}
.audio-tel{ display: flex; flex-flow:column nowrap; align-items: center; position: fixed; right: 40px; bottom:40px; z-index: 5}
a#audioPlay{ display: block; width:50px; height: 50px; background:url("../images/autoPlay-icon.png") no-repeat center rgba(0,0,0,0.5); border-radius:100%; border: 2px solid #fff; cursor: pointer; position: fixed; bottom: 140px; right: 40px;z-index: 999}
a.getTel{ background-color: #00552c; color: #fff; font-size:20px; font-weight: bold; display: block;  padding:10px 10px 10px 50px;margin-top: 30px; background:url("../images/getTel-icon.png") no-repeat left 10px center #00552c;}
a#audioPlay.play{ animation:play 2s forwards infinite linear;}
@keyframes play{
	to{ transform: rotate(360deg)}
}

.box.index > div{ background:no-repeat center fixed; background-size:cover; width: 100%; height:auto; min-height:100vh; overflow: hidden}

.first{ display: flex; flex-flow:row nowrap; justify-content: center;}
.first-box{display: flex; flex-flow:column nowrap; align-items: center; justify-content:space-between;}
.first-box *{ margin: 10px 0;}
.first-box img:last-child{ margin: 0;}
.first-box p{ color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); line-height: 1}
.first-box p.eng{ font-size:12px; text-align: center;}
.first-box p.ch{font-size: 30px; font-weight: bold;}

.about{ justify-content: center; align-items: center; display: flex; flex-flow: column nowrap;}
.about-box{   width: 100%;max-width: 1440px; margin-bottom: 40px; position: relative; display: flex; flex-flow:row nowrap;align-items: center; justify-content: center; height: 550px}
.about-fixed-img{ position: absolute;z-index: 1}
.about-box-item{width: 50%; height: 550px; box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; position: absolute; top: 0}
.about-box-item.green{ background-color:rgba(0, 85, 44, 0.8); left: 0}
.about-box-item.white{ background-color:rgba(255, 255, 255, 0.8); right: 0}

.about-box-list{ width:1320px;z-index: 1;position: absolute; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; height: 336px}
.about-box-list a{ display: flex;width: 50%}
.about-box-list a div{ display: flex; flex-flow: column nowrap}
.about-box-list a div h3{ font-size: 16px; font-weight: bold;}
.about-box-list a div span{ font-size: 14px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"}
.about-box-list a:nth-child(odd) div{ padding-left:48px; background: url("../images/about-list-icon-white.png") no-repeat left 14px center}
.about-box-list a:nth-child(odd) div h3{ color: #fff}
.about-box-list a:nth-child(odd) div span{ color: #a8a9a8}
.about-box-list a:nth-child(even){ flex-direction: row-reverse}
.about-box-list a:nth-child(even) div{ align-items: flex-end;padding-right:48px; background: url("../images/about-list-icon-green.png") no-repeat right 15px center}
.about-box-list a:nth-child(even) div h3{ color: #00552c; }
.about-bar{ display: flex; justify-content: center;}
.about-bar a{ display: block; width:140px; height: 140px;font-weight: bold; font-size:20px;color:#fff; background-color: #00552c; line-height: 140px; text-align: center; border-radius: 100%; margin:0 30px}

.pro{ display: flex; flex-flow: column nowrap; align-items: center}
.title{ position: relative; display: flex; flex-flow:column nowrap; align-items: center; padding-top:70px; margin: 40px 0; width: 100%}
.title b{ font-size:120px; color: rgba(255,255,255,.5); font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; position: absolute; line-height: 1; top: 0}
.title span,
.title p{ position: relative; z-index: 1}
.title span{ font-size:40px; font-weight: bold; color: #01562d; line-height: 1; display: flex; justify-content: center; padding-bottom: 60px}
.title span:before{ position: absolute; bottom:28px; display: block; background-color:#01562d; content:''; height: 4px; width: 50px;}
.title p{ font-size: 16px; font-weight: bold; color: #333333}

.pro-bar{ display: flex; justify-content: center; margin-bottom: 40px}
.pro-bar a{ background-color:#01562d; color: #fff; font-size: 20px; font-weight: bold; padding: 10px 30px; margin: 0 10px}

.pro-box{ display: flex; flex-flow: row wrap; width: 1200px; max-width:100%; justify-content: space-between}
.pro-box a{ display: flex; width:250px; flex-flow: column nowrap; align-items: center;}
.pro-box a *{ transition:all 0.5s}
.pro-box a .img{ position: relative; font-size: 0; background: #000; overflow: hidden}
.pro-box a .img:before{ display:block; content: '+'; width:60px; height: 60px; box-sizing: border-box; border-radius:100%; position: absolute; border:4px solid #fff; left:calc(50% - 30px); top: 0; opacity: 0; transition:all 0.5s; line-height: 52px; text-align: center; font-size:30px; font-weight: bold; color:#fff}
.pro-box a img{ width: 100%}
.pro-box a b{ font-size:16px; text-align: center; height: 50px; line-height: 50px; width: 100%; position: relative; color: #313131; text-indent: 0.5em; overflow: hidden}
.pro-box a b:before{ display: block; width: 30px; text-align: right; content: '>'; height: 30px; border-left: 1px solid #515151; position: absolute; line-height: 30px; right:-31px; top: 25px; transition: all 0.5s}
.pro-box a:hover img{ opacity:.3; transform: scale(1.3)}
.pro-box a:hover .img:before{ opacity: 1; top:calc(50% - 30px)}
.pro-box a:hover b{ color: #00552c}
.pro-box a:hover b:before{ right:40px}

.base{ display: flex; justify-content: center; position: relative; flex-flow: column nowrap; width: 100%}
.base-box{ display: flex; position: relative; height: 260px; background: url("../images/nav-bg.png")}
.base-box.top{ width: 40%; justify-content: flex-end}
.base-box.bot{ width: 60%; left: 20%;}

.base-top-title{ display: flex;  flex-flow: column nowrap; justify-content: center; margin-right: 50px;}
.base-top-title b{ font-size:60px; color: #fff; line-height: 1; position: relative; margin-bottom: 50px}
.base-top-title b:before{ width:80%; position: absolute; left:-45%; bottom:-24px; display: block; background-color: #fff; content: ''; height: 4px}
.base-top-title p{ color: #fff; line-height: 1.6}
.base-top-title p:first-line{color:#fedd00}
.base-bot-title{ display: flex; flex-flow: column nowrap; justify-content: center; margin: 0 50px;}
.base-bot-title *{white-space: nowrap}
.base-bot-title p{ color:rgba(255,255,255,0.5); font-size: 12px;}
.base-bot-title p:first-line{ font-size: 16px; font-weight: bold; color: #fff}
.base-bot-title span{ font-size:24px; font-weight: bold; color: #fff; line-height: 1.4;}
.base-bot-title b{ font-size: 18px; color: #fedd00; margin-top:30px; background: url("../images/title-tel-icon.png") no-repeat left center; padding-left: 34px}
.base-img{ position: absolute; display: flex; left: 100%}
.base-box.bot a{ margin-top: 50px}


.news{ width: 100%; display: flex; flex-flow: column nowrap; justify-content: space-around}

.news-title{ margin: 0}
.news-title span,
.news-title p{ color: #fff}
.news-title span:before{ background-color: #fff}

#news{width: 100%;}
#news .swiper-slide{width: 100%;max-width:1100px;}
#news .swiper-slide a{ background: #fff; width:100%; display: flex; flex-flow:row nowrap; justify-content: space-between; box-sizing: border-box; padding: 40px 50px; border:1px solid #ccc; border-radius:10px}
#news .swiper-slide a div.text{ display: flex; flex-flow: column nowrap; justify-content:space-between}
#news .swiper-slide a div.text span{ color: #676767; font-size: 16px; font-weight: bold;}
#news .swiper-slide a div.text h3{ font-size: 24px; color: #00552c; font-weight: bold;}
#news .swiper-slide a div.text strong{ background: #00552c; color: #fff; padding:0 20px; align-self: flex-start; height: 40px; border-radius: 40px; line-height: 40px}

#news .swiper-slide a img{ width: 490px; height: 280px; border: 5px solid #f3f3f3; margin-left: 30px}

.news-btn{ position: absolute; height: 100%; width:calc((100% - 1120px) / 2); top: 0;z-index: 10; color: rgba(51,51,51,0.7)}
.news-btn.prev{ background: linear-gradient(to right, rgba(51,51,51,0.4) , rgba(51,51,51,0.1)); left: 0; border-radius:0 10px 10px 0}
.news-btn.next{ background: linear-gradient(to left, rgba(51,51,51,0.4) , rgba(51,51,51,0.1)); right: 0; border-radius:10px 0 0 10px}

.contact{ display: flex; flex-flow: column nowrap; justify-content:center}
.contact-title{ margin-top: 0}
.contact-title span,
.contact-title p{ color: #fff}

.contact-box{ display: flex; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); justify-content: center}
.contact-box div{ width: 400px;border-right: 1px solid rgba(255,255,255,.5); box-sizing: border-box; padding: 30px 0; display: flex; flex-flow: column nowrap; align-items: center}
.contact-box div:first-child{border-left: 1px solid rgba(255,255,255,.5)}
.contact-box div b{ font-weight: bold; color: #a5a159; font-size: 24px; padding-top: 50px; background: no-repeat top center}
.contact-box div p{ font-size:16px; color: #fff; font-weight: bold; margin-top: 20px}
.contact-box div:nth-child(1) b{ background-image: url("../images/cus-icon-1.png")}
.contact-box div:nth-child(2) b{ background-image: url("../images/cus-icon-2.png")}
.contact-box div:nth-child(3) b{ background-image: url("../images/cus-icon-3.png")}



.current-title{display: flex; width: 100%; flex-flow: column nowrap; overflow: hidden; padding: 50px 20px; box-sizing: border-box;}

.loca-bar{max-width: 1200px; width: 100%; margin: 0 auto; background: url("../images/loca-icon.png") no-repeat left center; padding-left: 30px; box-sizing: border-box; padding: 40px 0 40px 30px}
.loca-bar *:after{content:">"; margin: 0 10px}
.loca-bar *:last-child:after{ display: none}

.list-box{max-width: 1200px; width: 100%; margin: 0 auto}
.list-about h3{ width: 100%; padding-bottom:40px; text-align: center; font-size: 30px; border-bottom: 1px solid #f0f0f0; margin-bottom: 30px}

.list-footer{ width: 100%; background-color:#292931; margin-top: 60px}
.bot{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; padding: 60px 0}
.small-title{ font-size: 24px; font-weight: bold; color: #999; padding-bottom:30px}
.list-copyright{ background-color:#232228;}
.list-copyright > div{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; padding: 10px 0}
.list-copyright > div *{ font-size: 12px;}
.link-box{ display: flex; flex-flow:row wrap}
.link-box a{ width: 25%;}
.link-box a:before{content:'<'}
.bot-logo{ background: #3b3b43; display: block; font-size: 0; box-sizing: border-box; padding: 10px; border-radius: 10px; margin-top: 30px}

.cus-box{ display: flex; flex-flow: column nowrap;}
.cus-box p{padding-left:40px; background: no-repeat left center; line-height: 2.4; font-size: 16px}
.cus-box p:nth-child(1){ background-image: url("../images/list-cus-icon-1.png")}
.cus-box p:nth-child(2){ background-image: url("../images/list-cus-icon-2.png")}
.cus-box p:nth-child(3){ background-image: url("../images/list-cus-icon-3.png")}
.cus-box p:nth-child(4){ background-image: url("../images/list-cus-icon-4.png")}
.cus-box p:nth-child(5){ background-image: url("../images/list-cus-icon-5.png")}

.page{ box-sizing:border-box; width:100%; display:flex; flex-flow:row nowrap; justify-content:flex-end; padding:20px 0}
.page *{text-align:center; height:28px; line-height:28px; font-size:12px; margin:0 3px; padding:0 10px; border:1px solid #D5D5D5; background:#fff; transition:all 0.5s}
.page span{ color:#aaaaaa; background:#E5E5E5; border-color:#FFFFFF}
.page a{ color:#969696;}
.page a:hover{ background:#4caf50; color:#FFFFFF; border-color:#fff}
.page span.active{ background:#00552c; color:#FFFFFF; border-color:#fff}

.list-pro-box{overflow: hidden}

.list-news-box a{ background: #fff; width:100%; display: flex; flex-flow:row nowrap; justify-content: space-between; box-sizing: border-box; padding:20px; border:1px solid #ccc; border-radius:10px; margin-bottom: 30px; align-items: center}
.list-news-box a div.text{ display: flex; flex-flow: column nowrap; justify-content:space-between; align-self: stretch}
.list-news-box a div.text span{ color: #676767; font-size: 16px; font-weight: bold;}
.list-news-box a div.text h3{ font-size: 24px; color: #00552c; font-weight: bold;}
.list-news-box a div.text strong{ background: #00552c; color: #fff; padding:0 20px; align-self: flex-start; height: 40px; border-radius: 40px; line-height: 40px}
.list-news-box a img{ width: 490px; height:auto; border: 5px solid #f3f3f3; margin-left: 30px}
.list-news-box a:nth-child(even) img{order: -1; margin: 0; margin-right: 30px}
.list-news-box a:nth-child(even) div.text *{ text-align: right; }
.list-news-box a:nth-child(even) div.text strong{ align-self: flex-end}


.cont-title{ background:url("../images/nav-bg.png"); height: 200px; justify-content: center; align-items: center; display: flex; flex-flow: column wrap; margin-bottom: 20px}
.cont-title *{color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.3)}
.cont-title h3{font-size:30px;font-weight: bold;margin: 10px;}
.cont-page{border-top: 1px solid #e1e1e1; display: flex; justify-content: space-between; align-items:center; margin-top: 50px; padding-top: 50px}
.cont-page *{transition: all 0.3s}
.cont-page div{display: flex;flex-flow: column wrap;}
.cont-page > a{ background: #666; color: #fff; height: 30px; line-height: 30px; padding: 10px; font-weight: bold; width: 200px; overflow:hidden; text-align:right;}
.cont-page > a:hover{ background: #00552c; text-indent:1em}
.cont-page div a:hover{color: #00552c}