@charset "utf-8"; /* CSS Document */ /*banner*/ #ins_banner { position: relative; z-index: 0;} #ins_banner .swiper-slide { position: relative; z-index: 0;} #ins_banner .con { width: 100%; margin: 0;} #ins_banner .pic { position: relative; z-index: 0; padding-top: 598px;} #ins_banner .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} #ins_banner .txtb { position: absolute; left: 5.2%; top: 6.7vw; bottom: 6.7vw; right: 0; right: 5.2%; display: flex; justify-content: center; align-items: center;} #ins_banner .txtb .txt { width: 51%; margin: 0 auto 0 0; text-align: left; font-weight: lighter; color: rgba(255,255,255,0.9); filter:alpha(opacity=0);-moz-opacity:0; opacity:0; transition: all 1s; -webkit-transition:all 1s; transform: translate(0,90px); -ms-transform: translate(0,90px); -webkit-transform: translate(0,90px);} #ins_banner .txtb .txt .name {font-size: 60px; line-height: 1.4;} #ins_banner .txtb .txt .name2 {font-size: 42px; line-height: 1.4;} #ins_banner .txtb .txt .intro { margin-top: 0.2em; line-height: 1.5; font-size: 30px; max-height: 4.5em; overflow: hidden;} #ins_banner .txtb .txt .btn { margin-top: 6%;} #ins_banner .swiper-slide-active .txtb .txt { filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0); } #ins_banner .btnNext,#ins_banner .btnPrev { cursor: pointer; display: inline-block; position: absolute; right: 5.2%; top: 50%; z-index: 10; width: 2.8em; height: 2.8em; margin-top: -1.4em; border: 1px solid #fff; background:#fff url(../images/arr_gray.png) center center no-repeat; background-size: 26.6% auto; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } #ins_banner .btnPrev { left: 5.2%; right: auto; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); } #ins_banner .btnNext:hover, #ins_banner .btnPrev:hover { border: 1px solid #fff; } #ins_banner .btnPrev::before, #ins_banner .btnNext::before{ content: ""; display: block;position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/arr_gray.png) center center no-repeat; background-size: 26.6% auto; } #ins_banner .btnPrev:hover::before, #ins_banner .btnNext:hover::before { background-image: url(../images/arr_white.png); } #ins_banner .btnNext::after, #ins_banner .btnPrev::after{ content: ""; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#068d39+0,058d7d+100 */ background: linear-gradient(to right, rgba(6,141,57,1) 0%,rgba(5,141,125,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:alpha(opacity=0);-moz-opacity:0; opacity:0; transition: all 0.5s; -webkit-transition:all 0.5s; } #ins_banner .btnNext:hover::after, #ins_banner .btnPrev:hover::after{ filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;} #ins_banner .swiper-button-disabled, #ins_banner .swiper-button-disabled:hover{ filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;} #ins_banner .swiper-button-disabled:hover::before, #ins_banner .swiper-button-disabled:hover::before { background-image: url(../images/arr_gray.png); } #ins_banner .swiper-button-disabled:hover::after, #ins_banner .swiper-button-disabled:hover::after{ filter:alpha(opacity=0);-moz-opacity:0; opacity:0;} #ins_banner .num { position: absolute; z-index: 1000; left: 9.3%; color: #fff; bottom: 3.4em;} #ins_banner .num span { font-weight: bold;} #ins_banner .num span.cur { font-size: 1.87em;} @media only screen and (max-width:1920px) { #ins_banner .pic { padding-top:31.1%;} #ins_banner .txtb .txt .name {font-size: 3.1vw; } #ins_banner .txtb .txt .name2 { font-size: 2.18vw;} #ins_banner .txtb .txt .intro { font-size: 1.56vw;} } @media only screen and (max-width:828px) { #ins_banner .con { width: 100%; margin: 0;} #ins_banner .pic { position: relative; z-index: 0; padding-top: 60%;} #ins_banner .txtb { left: 13%; right: 13%;} #ins_banner .txtb .txt .name { font-size: 4.8vw;} #ins_banner .txtb .txt .intro { font-size: 2vw;} #ins_banner .txtb .txt .btn { font-size: 2vw; margin-top: 1.8em;} #ins_banner .num { font-size: 2vw; } #ins_banner .btnNPW { font-size: 2vw; } #ins_banner .swiper-pagination { font-size: 2vw;} } .filterBox { margin-top: 2.8%; border: 1px solid #eee; line-height: 2.5em;} .filterBox dl { border-bottom: 1px solid #eee; display: flex; justify-content: flex-start; align-items: stretch; } .filterBox dl:last-child { border-bottom: 0;} .filterBox dl dt {padding: 1% 0; background-color: #fbfbfb; font-weight: bold; padding: 0 3.5%;} .filterBox dl dd {padding: 1% 0; flex: 1; margin-left: 2.56%; margin-right: 2.56%; text-align: left;} .filterBox dl dd a { display: inline-block; color: #666; margin-right:1.4%;} .filterBox dl dd a:hover { color: #007437;} .filterBox dl dd a.cur { color: #007437; font-weight: bold; border-bottom: 1px solid #007437;} @media only screen and (max-width:828px) { .filterBox dl { display: block;} .filterBox dl dt { text-align: left; display: flex; justify-content: space-between; align-items: center;} .filterBox dl dt::after {content: ">"; display: block; width: 1em; height: 1em; font-family: "瀹嬩綋";line-height: 1em; color: #999; } .filterBox dl.show dt::after { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ } .filterBox dl dd { display: none;} } .filterBox .attr a { margin-right: 16.7%;} .filterBox .attr .pics img{ width: 2.5em; height: 2.5em; display: inline-block; vertical-align: middle;} .filterBox .attr .pics img:nth-child(1){ display: inline-block;} .filterBox .attr .pics img:nth-child(2){ display: none;} .filterBox .attr span{display: inline-block; vertical-align: middle;} .filterBox .attr span.arrow {width: 0.74em; height: 0.75em; margin-left: 0.4em; background: url(../images/arr_gray.png) center center no-repeat; background-size:contain ; transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ filter:alpha(opacity=70);-moz-opacity:.7; opacity:0.7; } .filterBox .attr .cur span.arrow, .filterBox .attr a:hover span.arrow{ background-image: url(../images/arr_green.png); filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;} .filterBox .attr a.cur { border-bottom: 0;} .filterBox .attr .cur .pics img:nth-child(1), .filterBox .attr a:hover .pics img:nth-child(1){ display: none;} .filterBox .attr .cur .pics img:nth-child(2), .filterBox .attr a:hover .pics img:nth-child(2){ display: inline-block;} .proIBox { padding-bottom: 5.5em; background-color: #fff;} .proIBox .tit { margin-top: 2.2%; font-weight: bold; text-align: center;} .proIBox .list ul {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;} .proIBox .list li { width: 17%; margin-right: 3.7%; margin-top: 1.5%;} .proIBox .list li:nth-child(5n) { margin-right: 0;} .proIBox .list a { display: block;} .proIBox .list .pic { position: relative; z-index: 0; padding-top: 103.2%; border: 1px solid #eee;}/*background-color: #f6f6f6;*/ .proIBox .list .pic img { position: absolute; z-index: 0; left: 13.8%; right: 13.8%; top: 18.6%; bottom: 18.6%; width: 72.4%; height: 62.8%; object-fit: contain;} .proIBox .list .name { padding:1.3em 1em;} @media only screen and (max-width:828px) { .proIBox { padding-bottom: 3em;} .proIBox .list { margin-top: 1.5em;} .proIBox .list li { width: 48.75%; margin-right: 2.5%;} .proIBox .list li:nth-child(3n) { margin-right: 2.5%;} .proIBox .list li:nth-child(2n) { margin-right: 0;} } .viewMore{ color: #333; font-size: 18px; position: relative; padding-right: 25px; width: 9em !important; border: none !important; } .viewMore:before{ content: ""; display: block; width: 14px; height: 14px; background: url(../images/more_icon.png) left top no-repeat; background-size: auto 100%; position: absolute; right: 0; top: 18px; } .viewMore:hover{ color: #007437; } .deBox .conD .caseList { margin: 0 3.2% ;} .caseList ul { margin-top: -4%; display: flex;flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .proIBox .caseList ul { margin-top: -2%;} .caseList li { width: 23.8%; margin-top: 4.1%; margin-right: 1.4%; background-color: #f8f8f8; /* -moz-border-bottom-right-radius:3.5em; -webkit-border-bottom-right-radius:3.5em; border-bottom-right-radius:3.5em; */} .deBox .conD .caseList li { background-color: #fff;} .caseList li:nth-child(4n) { margin-right: 0;} .caseList .pic {position: relative; z-index: 0; padding-top: 62%; height: 0; opacity: inherit; display: block; cursor: pointer;} .caseList .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .caseList .txtb { padding: 4.5% 8% 7% 8%; text-align: left; } .caseList .txtb .cate { margin-bottom: 0.4em; color: #018b35; font-weight: bold;} .caseList .txtb .name { line-height: 1.5em; height: 1.5em; overflow: hidden; font-weight: bold; } .caseList .txtb .name a {} .caseList .txtb .intro { line-height: 1.7; margin-top:0.7em; color: #333; height: 5.1em; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .caseList .pic .btnPlayW { position: absolute; z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; } .caseList .pic .btnPlay {width: 7.5%; padding-top: 7.5%; background: url(../images/play.png) center center no-repeat; background-size:contain ;} .caseList .btnMore { display: inline-block; margin-top: 4.5%; color: #666; }/*background-image: url(../images/arr2_green.png);*/ .caseList .btnMore:hover { color: #018b35;} @media only screen and (max-width:828px) { .proIBox .caseList ul { margin-top: 0;} } @media only screen and (max-width:580px) { .caseList li { width: 100%; margin-right: 0;} } .proIBox .soluList ul { margin-top: -1%;} .soluList li {margin-top: 3%;background-color: #f8f8f8; /* -moz-border-bottom-right-radius:3.5em; -webkit-border-bottom-right-radius:3.5em; border-bottom-right-radius:3.5em; */ display: flex; justify-content: flex-start; align-items: center;} .deBox .conD .soluList { margin: 0 3.4%;} .deBox .conD .soluList li:first-child { margin-top: 0;} .soluList .picb { width: 36.5%;} .soluList .pic {position: relative; z-index: 0; padding-top: 66.3%; height: 0; opacity: inherit; display: block; cursor: pointer;} .soluList .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* object-fit: cover; */} .soluList .txtb { flex: 1; padding: 2.3% 4.4% 3% 4.4%; text-align: left; } .soluList .txtb .name { line-height: 1.5em; height: 1.5em; overflow: hidden; font-weight: bold; } .soluList .txtb .intro { color: #333; } .soluList .txtb .intro dl { margin-top:1.4em; display: flex; justify-content: flex-start; align-items: flex-start;} .soluList .txtb .intro dl dt { margin-right: 6.4%; font-weight: bold; color: #017538;} .soluList .txtb .intro dl dd{ color: #323232; flex: 1; font-size: 0.87em;} .soluList .btnMore { display: inline-block; margin-top: 4.5%; color: #666; }/*background-image: url(../images/arr2_green.png);*/ .soluList .btnMore:hover { color: #018b35;} @media only screen and (max-width:828px) { .proIBox .tit { margin-top: 1.5em;} .soluList { margin-top: 1.5em;} .soluList li { display: block;} .soluList .picb { width: 100%;} .soluList .txtb { padding: 2em;} } .serBox .tab ul { margin: 0 auto 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;} .serBox .tab ul li { width: 31.7%; margin-top: 4%; margin-right: 2.45%; background-color: #f8f8f8; transition: all 0.5s; -webkit-transition:all 0.5s; /* -moz-border-bottom-right-radius:2.3em; -webkit-border-bottom-right-radius:2.3em; border-bottom-right-radius:2.3em; */ overflow: hidden; position: relative; z-index: 0;} .serBox .tab ul li:nth-child(3n) { margin-right: 0;} .serBox .tab ul li::after { content: ""; display: block; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#018b35+0,058d7f+100 */ background: linear-gradient(to right, rgba(1,139,53,1) 0%,rgba(5,141,127,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:alpha(opacity=0);-moz-opacity:0; opacity:0; transition: all 0.5s; -webkit-transition:all 0.5s; } .serBox .tab ul li:hover::after, .serBox .tab ul li.cur::after{ filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; } .serBox .tab .lib { position: relative; z-index: 1; display: block; cursor: pointer;} .serBox .tab .pic { padding-top: 66.4%; position: relative; z-index: 1;} .serBox .tab .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.5s; -webkit-transition:all 0.5s;} .serBox .tab .txt { display: flex; justify-content: space-between; align-items: center; padding: 10% 13% 12.3% 23%;} .serBox .tab .txt .name { color: #333; flex: 1; text-align: left; margin: 0 3% 0 8.7%;} .serBox .tab .pics img { width: 2.75em; height: 2.75em;} .serBox .tab .pics img:nth-child(1) {display: block;} .serBox .tab .pics img:nth-child(2) {display: none;} .serBox .tab .arrow { width: 0.5em; height: 0.5em; background: url(../images/arr3_white.png) center center no-repeat; background-size:contain ;} .serBox .tab li:hover .txt .name, .serBox .tab li.cur .txt .name{ font-weight: bold; color: #fff;} .serBox .tab li:hover .pics img:nth-child(1), .serBox .tab li.cur .pics img:nth-child(1){display: none;} .serBox .tab li:hover .pics img:nth-child(2), .serBox .tab li.cur .pics img:nth-child(2){display: block;} @media only screen and (max-width:828px) { .serBox .tab .txt { padding: 1.2em 5% ;} .serBox .tab .pics img { width:2em; height: 2em;} } @media only screen and (max-width:540px) { .serBox .tab ul li { width: 100%; margin-right: 0; margin-top: 1em;} } .seriBox { margin-top: 3.1%; background: #016e6d url(../images/ser_bg_1.jpg) center center no-repeat; background-size:cover; color: #fff; padding: 5% 0 3.7%; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;} .seriBoxZ { padding-bottom: 7.1em;} .seriBoxZ .con { overflow: visible;} .seriBox .tit { margin: 0 4.5%; display: flex; justify-content: space-between; align-items: flex-start;} .seriBox .tit .titb { flex: 1; margin-right: 2em; text-align: left;} .seriBox .tit .titb .name { line-height: 1.2;} .seriBox .tit .titb .intro { margin-top: 1.2em; line-height: 1.9;} .seriBox .swiper-seri { position: relative; z-index: 0; margin: 2.5% 3.7% 0;} .seriBox .swiper-seri .swiper-slide { width: 25%;} .seriBox .swiper-seri .swiper-slide .item { padding: 14.7% 0 10%; margin: 0 3.57%; display: block; cursor: pointer; background-color: #fff; -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em; } .seriBox .swiper-seri .swiper-slide .item .pic { position: relative; z-index: 0; margin:0 19.4%; padding-top: 57%;} .seriBox .swiper-seri .swiper-slide .item .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain;} .seriBox .swiper-seri .swiper-slide .item .name { margin-top: 5%; margin-bottom: 5%; height: 2.5em; line-height: 1.5em; /* overflow: hidden; */} .seriBox .swiper-seri .btnNext, .seriBox .swiper-seri .btnPrev { position: absolute; z-index: 10; right: -4%; margin-right: -1.4em; top: 50%; cursor: pointer; display: inline-block; width: 2.8em; height: 2.8em; margin-top: -1.4em; border: 1px solid #fff;border: 1px solid #cecece; background:#fff url(../images/arr_gray.png) center center no-repeat; background-size: 26.6% auto; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .seriBox .swiper-seri .btnPrev { left: -4%; margin-left: -1.4em; right: auto; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .seriBox .swiper-seri .btnNext:hover, .seriBox .swiper-seri .btnPrev:hover { border: 1px solid #fff; } .seriBox .swiper-seri .btnPrev::before, .seriBox .swiper-seri .btnNext::before{ content: ""; display: block;position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/arr_gray.png) center center no-repeat; background-size: 26.6% auto; } .seriBox .swiper-seri .btnPrev:hover::before, .seriBox .swiper-seri .btnNext:hover::before { background-image: url(../images/arr_white.png); } .seriBox .swiper-seri .btnNext::after, .seriBox .swiper-seri .btnPrev::after{ content: ""; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#068d39+0,058d7d+100 */ background: linear-gradient(to right, rgba(6,141,57,1) 0%,rgba(5,141,125,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:alpha(opacity=0);-moz-opacity:0; opacity:0; transition: all 0.5s; -webkit-transition:all 0.5s; } .seriBox .swiper-seri .btnNext:hover::after, .seriBox .swiper-seri .btnPrev:hover::after{ filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;} .seriBox .swiper-seri .swiper-button-disabled { } .seriBox .swiper-seri .swiper-button-disabled, .seriBox .swiper-seri .swiper-button-disabled:hover{ filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;} .seriBox .swiper-seri .swiper-button-disabled:hover::before, .seriBox .swiper-seri .swiper-button-disabled:hover::before { background-image: url(../images/arr_gray.png); } .seriBox .swiper-seri .swiper-button-disabled:hover::after, .seriBox .swiper-seri .swiper-button-disabled:hover::after{ filter:alpha(opacity=0);-moz-opacity:0; opacity:0;} @media only screen and (max-width:828px) { .seriBoxZ { padding-bottom: 3em;} .seriBox { padding: 3em 0;} .seriBox .swiper-seri { margin: 2em 1.8em 0;} .seriBox .swiper-seri { margin-top: 2em;} .seriBox .tit { display: block; text-align: left;} .seriBox .tit .titb { margin-right: auto;} .seriBox .btn { margin-top: 1em;} .seriBox .swiper-seri .btnPrev { margin-left: -1.8em; margin-top: -1.1em; width: 2.2em; height: 2.2em;} .seriBox .swiper-seri .btnNext { margin-right: -1.8em;margin-top: -1.1em; width: 2.2em; height: 2.2em;} } /*璇︽儏*/ .deBox { margin-top: 2.7%;} .deBox .con { overflow: visible;} .deBox .deTop { display: flex; justify-content: space-between; align-items: flex-start;} .deBox .deTop .conL{ position: relative; z-index: 0; width: 58.8%; } .swiper-de { position: relative; z-index: 0;background-color: #f6f6f6;} .swiper-de .item .picb .pic {position: relative; z-index: 0; padding-top: 62%;} .swiper-de .item .picb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .swiper-de .item .videoBox { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background-color: #000;} .swiper-de .item .videoBox video { position: absolute; z-index: 0; left: 0; top: 0; width:100%; height: 100%; object-fit: contain;} .swiper-de .item .videoBox .videoPic { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%;} .swiper-de .item .videoBox .btnPlay{ position: absolute; z-index: 2; left: 50%; top: 50%; margin-top: -3.3%; margin-left: -3.3%; width:6.6%; padding-top: 6.6%; height: 0; cursor: pointer; background: url(../images/btn_play_2.png) center center no-repeat; background-size:contain; } .swiper-de .item .videoBox.curPlay .videoPic { display: none; } .swiper-de .item .videoBox.curPlay .btnPlay {display: none; } .swiper-de .item .videoBox.pausePlay .videoPic { display: none; } .swiper-de .item .videoBox.pausePlay .btnPlay {display: block; } .swiper-de .btnNext, .swiper-de .btnPrev { position: absolute; z-index: 10; right: -1.4em; top: 50%; cursor: pointer; display: inline-block; width: 2.8em; height: 2.8em; margin-top: -1.4em; border: 1px solid #fff;border: 1px solid #cecece; background:#fff url(../images/arr_gray.png) center center no-repeat; background-size: 26.6% auto; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .swiper-de .btnPrev { left: -1.4em; right: auto; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .swiper-de .btnNext:hover, .swiper-de .btnPrev:hover { border: 1px solid #fff; background-color: #018b35; background-image: url(../images/arr_white.png); } .swiper-de .swiper-button-disabled, .swiper-de .swiper-button-disabled:hover{ border: 1px solid #cecece; background:#fff url(../images/arr_gray.png) center center no-repeat; } .swiper-de-s { z-index: 1; left: 3%; bottom: 0; width: 94%; margin: 1.5% 0 1.5% 0;}/*position: absolute;margin-bottom: 1.5%;*/ .swiper-de-s .swiper-slide { cursor: pointer; width: 14%;} .swiper-de-s .item {display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 0; overflow: hidden;} .swiper-de-s .item .pic {position: relative; z-index: 0; width: 100%; padding-top: 60.4%; } .swiper-de-s .item .pic .btnPlay{ position: absolute; z-index: 2; left: 50%; top: 50%; margin-top: -20%; margin-left: -20%; width:40%; padding-top: 40%; height: 0; cursor: pointer; background: url(../images/btn_play_2.png) center center no-repeat; background-size:contain; } .swiper-de-s .item::after { content: ""; display: block; position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,116,56,0.5);} .swiper-de-s .item img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .swiper-de-s .swiper-slide-active .item::after { background-color:transparent; border: 2px solid #007438;} @media only screen and (max-width:828px) { .swiper-de-s .item .pic .btnPlay{ margin-top: -15%; margin-left: -15%; width:30%; padding-top: 30%;} .swiper-de .btnPrev { left: -0.8em; margin-top: -1.1em; width: 2.2em; height: 2.2em;} .swiper-de .btnNext { right: -0.8em;margin-top: -1.1em; width: 2.2em; height: 2.2em;} } .deBox .deTop .conR{ width: 35.5%; margin-right: 2.8%; text-align: left;} .deBox .deTop .conR .name { color: #333; font-weight: bold;} .deBox .deTop .conR .name2 { margin-top: 5%; color: #666; font-weight: bold; line-height: 1.3;} .deBox .deTop .conR .info { color: #666; margin-top: 1em; background-color: #f8f8f8; padding:1% 4%;} .deBox .deTop .conR .info dl { padding: 0.7em 0 0.6em; border-bottom: 1px solid #e2e2e2; display: flex; justify-content: flex-start; align-items: flex-start;} .deBox .deTop .conR .info dl:last-child { border-bottom: 0;} .deBox .deTop .conR .info dt { color: #007437;} .deBox .deTop .conR .info dd { flex: 1; margin-left: 9.6%;} .deBox .deTop .conR .asse { color: #666;margin-top: 1em; background-color: #f8f8f8; padding:1.8% 4%;} .deBox .deTop .conR .asse dl { padding: 0.7em 0 0.6em; border-bottom: 1px solid #e2e2e2; display: flex; justify-content: flex-start; align-items: flex-start;} .deBox .deTop .conR .asse dl:last-child { border-bottom: 0;} .deBox .deTop .conR .asse dt { color: #333; font-weight: bold;} .deBox .deTop .conR .asse dt.grren { color: #007437;} .deBox .deTop .conR .asse dd { flex: 1; margin-left: 5.2%;} .deBox .deTop .conR .proInfo { color: #666; padding:4% 4% 4% 0; border-bottom: 1px solid #e5e5e5;} .deBox .deTop .conR .proInfo dl { padding: 0.7em 0 0.6em; display: flex; justify-content: flex-start; align-items: flex-start;} .deBox .deTop .conR .proInfo dl:last-child { border-bottom: 0;} .deBox .deTop .conR .proInfo dt { color: #333; font-weight: bold; padding-top: 0.22em;} .deBox .deTop .conR .proInfo dt.grren { color: #007437;} .deBox .deTop .conR .proInfo dd { flex: 1; margin-left: 6%; line-height: 1.8;} .deBox .deTop .conR .tel { position: relative; z-index: 0; color: #666; margin-top: 5.5%; padding-left: 4.8em; padding-top: 0.6em;} .deBox .deTop .conR .tel .icon { position: absolute; left: 0; top: 0; display: inline-block; width: 3.1em; height: 3.1em; background: url(../images/tel2.png) 0 0 no-repeat; background-size:contain ; vertical-align: middle;} .deBox .deTop .conR .tel span { margin-right: 8%; display: inline-block;} .deBox .deTop .conR .tel b { color: #00753a; font-size: 1.1em;} .deBox .deTop .conR .tel .telTXt:last-child { margin-right: 0;} .deBox .deTop .conR .btnW { margin-top: 5.4%; display: flex; justify-content: space-between; align-items: center;} .btnDe { width: 49%; text-align: center; font-weight: bold; color: #fff; background-color: #27af7b; line-height: 3.7em; /* -moz-border-bottom-right-radius:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; */} .btnDe:hover { color: #fff; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007437+0,058d7f+100 */ background: linear-gradient(to right, rgba(0,116,55,1) 0%,rgba(5,141,127,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .deBox .proDeTop { align-items: center; /* -moz-border-bottom-right-radius:3.4em; -webkit-border-bottom-right-radius:3.4em; border-bottom-right-radius:3.4em; */} .deBox .proDeTop { border: 1px solid #efefef;} .deBox .proDeTop .conL{ width: 50%;} .deBox .proDeTop .conR{ width: 36.7%; margin-right: 5%;} .deBox .proDeTop .swiper-de .item .picb .pic {position: relative; z-index: 0; padding-top: 88.5%;} .deBox .soluDeTop { align-items: center; /* -moz-border-bottom-right-radius:3.4em; -webkit-border-bottom-right-radius:3.4em; border-bottom-right-radius:3.4em; */} .deBox .soluDeTop { border: 1px solid #efefef;} .deBox .caseDeTop { align-items: center; /* -moz-border-bottom-right-radius:3.4em; -webkit-border-bottom-right-radius:3.4em; border-bottom-right-radius:3.4em; */ -moz-box-shadow: 0 0 0.5em rgba(44, 72, 58, .08); -webkit-box-shadow: 0 0 0.5em rgba(44, 72, 58, .08); box-shadow: 0 0 0.5em rgba(44, 72, 58, .08);} .deBox .tab ul { margin-top:2.5%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; line-height: 3em;} .deBox .tab ul li { position: relative; z-index: 0; cursor: pointer; height: 3em; line-height: 3em; padding: 0.5em 0 0.4em; overflow: hidden; margin-right: 0.4%; width: 12.1%; text-align: center; background-color: #fff; transition: all 0.5s; -webkit-transition:all 0.5s; /* -moz-border-bottom-right-radius:1.1em; -webkit-border-bottom-right-radius:1.1em; border-bottom-right-radius:1.1em; */} .deBox .tab ul li::after { content: ""; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid #eee; /* -moz-border-bottom-right-radius:1.1em; -webkit-border-bottom-right-radius:1.1em; border-bottom-right-radius:1.1em; */ } .deBox .tab ul li.cur { color: #fff; font-weight: bold; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007437+0,058d7e+100 */ background: linear-gradient(to right, rgba(0,116,55,1) 0%,rgba(5,141,126,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .deBox .conDZ { background-color: #f9f9f9;}/*padding-top: 2.7%;*/ .deBox .conD {display: none;} .deBox .conD.show {display: block;} .deBox img{display: block; vertical-align: bottom;} .caseOver { /*margin: 0 2% 2% 2%; padding: 1.5% 0 2% 0; background-color: #017439; */} .caseOver .conO { background-color: #fff; padding: 3%; text-align: left;} .caseOver .conO img { max-width: 100%; height: auto;} .caseOver img { display: block; vertical-align: bottom;} .proOver {margin: 0 11.6%; padding: 0.5% 0 0; } .proOver img { max-width: 100%; height: auto;} @media only screen and (max-width:828px) { .deBox .deTop {display: block;} .deBox .deTop .conL{ width: 100%;} .deBox .deTop .conR{ margin: 1.5em 1em 0; width: auto;} .deBox .tab ul { margin-top: 1.5em;} .deBox .tab ul li { width: 23%; margin-right: 1%; margin-top: 1%; line-height: 2.2em; height: 2.2em;} .deBox .conD {display: block;} .deBox .conD.show {display: none;} } .downList { margin: 0 3.2%;} .downList ul {} .downList li { margin-top: 1.8%; padding:2.1% 3.2%; background-color: #fff; text-align: left; display: flex; flex-wrap:wrap ; justify-content: space-between; align-items: center;} .downList li:first-child { margin-top: 0;} .downList li .pics { position: relative; z-index: 0; width: 4.83em; height: 4.83em;} .downList li .pics img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } .downList li .name { margin: 0 4%; flex: 1; font-weight: bold;} .downList li .btnDown { line-height: 2.5em; display: inline-block;cursor: pointer;} .downList li .btnDown .arrow { vertical-align: middle; margin-left: 0.8em; display: inline-block; position: relative; z-index: 0; width: 2.5em; height: 2.5em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007437+0,058d7e+100 */ background: linear-gradient(to bottom, rgba(0,116,55,1) 0%,rgba(5,141,126,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ transition: all 0.5s; -webkit-transition:all 0.5s; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); } .downList li .btnDown .arrow::after { position: absolute; content: ""; display: block; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arr_white.png) center center no-repeat; background-size: 26.6% auto; } @media only screen and (max-width:828px) { .downList li { margin-top: 1em; padding:1em; } .downList li .pics {width: 2em; height: 2em;} .downList li .btnW { width: 100%; text-align: right;} .caseOver {margin: 0; /* padding: 1em 1em 0; */} .proOver {margin: 0; /* padding: 1em 1em 0; */ } } .paraBox { position: relative; z-index: 0; margin-top: 4.8%; padding: 2.6% 0;} .paraBox::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f3f3f3+0,ffffff+100 */ background: linear-gradient(to bottom, rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .iTit {display: flex; justify-content: space-between; align-items: center;} .iTit .name { font-weight: bold; color: #333; padding-right: 1.5em; background: url(../images/dot2.png) right center no-repeat; background-size:auto 0.5em ;} .paraBox .list { color: #333; margin-top: 0.8%; line-height: 1.5em;} .paraBox .list ul {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;} .paraBox .list ul li { width: 32.9%; margin-top: 0.65%; margin-right: 0.65%; text-align: left; } .paraBox .list ul li:nth-child(3n) { margin-right: 0;} .paraBox .list dl { padding: 4% 5.2% 3.5%; border: 1px solid #f2f2f2; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; /* -moz-border-bottom-right-radius:1.2em; -webkit-border-bottom-right-radius:1.2em; border-bottom-right-radius:1.2em; */} .paraBox .list dd { flex: 1; margin-left: 0.2em; font-weight: bold; font-size: 1.1em;} .paraIBox { position: relative; z-index: 0; padding: 0.5% 0 2%; margin: 0 3.2%;} .paraIBox .tit { text-align: left; font-weight: bold; color: #007438;} .paraIBox .list { color: #333; margin-top: 0.9%; padding-bottom: 2%; line-height: 1.5em;} .paraIBox .list ul {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;} .paraIBox .list ul li { width: 32.9%; margin-top: 0.65%; margin-right: 0.65%; text-align: left; } .paraIBox .list ul li:nth-child(3n) { margin-right: 0;} .paraIBox .list dl { padding: 4% 5.2% 3.5%; border: 1px solid #f2f2f2; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; /* -moz-border-bottom-right-radius:1.2em; -webkit-border-bottom-right-radius:1.2em; border-bottom-right-radius:1.2em; */} .paraIBox .list dd { flex: 1; margin-left: 0.2em; font-weight: bold; font-size: 1.1em;} .aProBox { padding-top: 1.5%; padding-bottom: 2%; display: flex; justify-content: space-between; align-items: stretch;} .aProBox .picb { width: 48.9%;} .aProBox .picb .pic { position: relative; z-index: 0; padding-top: 459px;} .aProBox .picb .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: cover;} .aProBox .txtb { width: 51.1%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,ffffff+100 */ background: linear-gradient(to right, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ -moz-border-bottom-left-radius:3.5em; -webkit-border-bottom-left-radius:3.5em; border-bottom-left-radius:3.5em; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } .aProBox .txtb .conA { overflow-x: hidden; overflow-y: auto; margin: 7.9% 3.6% 6.4% 7.9%; height: 353px;text-align: left;} .aProBox .txtb .conA .list { } .aProBox .txtb .conA .list dl{ padding: 3.9% 0; border-bottom: 1px solid #dfdfdf;} .aProBox .txtb .conA .list dl:first-child { padding-top: 0;} .aProBox .txtb .conA .list dt { font-size: 1.1em; color: #007437; font-weight: bold;} .aProBox .txtb .conA .list dd { margin-top: 0.5em; padding: 0 0.1em;} @media only screen and (max-width:828px) { .paraBox { padding: 2em 0;} .paraBox .list { margin-top: 1em;} .paraBox .list ul {display: block;} .paraBox .list ul li { width: 100%; margin-right:auto;} .paraBox .list dl { padding:0.8em 1em;} .paraIBox {padding: 2em 0 ;} .paraIBox .list { margin-top: 1em;} .paraIBox .list ul {display: block;} .paraIBox .list ul li { width: 100%; margin-right:auto;} .paraIBox .list dl { padding:0.8em 1em;} .aProBox {display: block;padding-top: 1em; padding-bottom: 2em;} .aProBox .picb { width: 100%;} .aProBox .txtb { width: 100%;} .aProBox .picb .pic { position: relative; z-index: 0; padding-top: 58.7%;} .aProBox .txtb .conA { overflow-y: initial; height: auto;} } .honorList { padding-bottom: 3.7%;} .honorList ul { margin: -2.5% 3.3% 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;} .honorList li { width: 31.66%; margin-right: 2.5%; margin-top: 3.7%; background-color: #fff;} .honorList li:nth-child(3n) { margin-right: 0;} .honorList .lib { padding: 9.6% 8.6% 11%;} .honorList .pic { position: relative; z-index: 0; padding-top: 100%;} .honorList .pic img { position: absolute; z-index: 0; left: 0; right: 0; top:0; bottom: 0; width: 100%; height: 100%; object-fit: contain;} .honorList .name { padding:8.5% 1em 0; color: #333;} @media only screen and (max-width:828px) { .honorList { padding-bottom: 3em;} .honorList { margin-top: 1.5em;} .honorList li { width: 48.75%; margin-right: 2.5%;} .honorList li:nth-child(3n) { margin-right: 0;} .honorList li:nth-child(2n) { margin-right: 0;} } /*鏂规绱㈠彇*/ .requBox { margin:-0.5% 3.2% 0; padding-bottom:3.2% ; display: flex;flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;} .requBox form { display: flex;flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%;} .requBox dl { margin-top: 1.5%; background-color: #fff; width: 49.4%; border: 1px solid #f3f3f3; display: flex; justify-content: flex-start; align-items: flex-start; /* -moz-border-bottom-right-radius:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; */ } .requBox dt {padding: 1.7em 0 1.7em 1.9em;} .requBox dd {padding: 1.7em 1.7em 1.7em 0.4em; flex: 1;} .requBox .input { border: 0; outline-width: 0; width: 100%; line-height: 1.5em; height: 1.5em; font-size: 1em;} .requBox .textarea { border: 0; outline-width: 0; width: 100%; line-height: 1.2em; height: 7.2em; font-size: 1em;} .requBox dl.dlW { width: 100%;} .requBox .btnW { margin-top: 1.7em; width: 100%} .requBox .btnSubmit { width: 100%; text-align: center; font-weight: bold; color: #fff; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007437+0,058d7f+100 */ background: linear-gradient(to right, rgba(0,116,55,1) 0%,rgba(5,141,127,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ line-height: 4.75em; /* -moz-border-bottom-right-radius:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; */} .requBox .btnSubmit:hover { color: #fff; } @media only screen and (max-width:828px) { .requBox { margin:1em 3.2% 0; padding-bottom:3em;} .requBox dl { width: 100%;} .requBox dt {padding: 1.1em 0 1.1em 1em;} .requBox dd {padding: 1.1em 1.1em 1.1em 0.2em; flex: 1;} .requBox .btnSubmit { line-height: 3.8em;} } /*9.23 */ .cover{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.8; filter: alpha(opacity=70); z-index: 999; display: none;} .login{width: 40%; background: #fff; border-radius: 4px; height: auto;position: fixed; top: 15%; left:30%; margin:0 auto; z-index: 9999; display: none;} .login-content{width: 100%; padding:0 0%;float:left; overflow:hidden;} .login-content span.close{display: block; position: absolute;top: 12px; right: 11px; cursor: pointer; width: 32px;height: 32px;background: url(../images/img24.png) no-repeat;} .mes-box2{width:94%; margin-left:3%; margin-right:3%;} .mes-box2 .item{float: left; width:100%; margin-top: 20px;} .mes-box2 .item .mingc{font-size: 16px;color: #000000;display: block;margin-bottom: 16px; text-align:left; font-weight:800;} .mes-box2 .item span{color: #E33744;} .mes-box2 .item input{ width: 95%; height: 48px; color: #666; font-size: 16px; border: 1px solid #ddd; padding: 0 2.5%; } .mes-box2 .item select { width: 32%; height: 48px; color: #666; font-size: 16px; border: 1px solid #ddd; padding: 0 2%; margin-left: 2%; } .mes-box2 .item #s_province { margin-left: 0; } .mes-box2 .item #msg_demand{ width: 100%; height: 48px; color: #666; font-size: 16px; border: 1px solid #ddd; padding: 0 2%; margin-left: 0; } .mes-box2 .item textarea{ width: 98%; color: #666; font-size: 16px; line-height: 32px; border: 1px solid #ddd; padding: 5px 1%; height: 128px; } .mes-box2 .submit{ width: 420px; height: 48px; line-height: 48px; text-align: center; color: #FFFFFF; font-size: 18px; display: block; margin: 0 auto; background: #007437; border-radius: 4px; border: none; } .filterBox dt{ line-height:68px;} .zhankai{ text-align:center; font-size:16px; color:#666; margin-top:20px; margin-bottom:20px; background:#f8f8f8; height:46px; line-height:46px; width:100%; cursor:pointer; } .zhankai a{ padding-right:46px; background:url(../images/img25.png) no-repeat right;} .shousuo{ text-align:center; font-size:16px; color:#666; margin-top:20px; margin-bottom:20px; background:#f8f8f8; height:46px; line-height:46px; width:100%; cursor:pointer; } .shousuo a{ padding-right:46px; background:url(../images/img26.png) no-repeat right;}