﻿
/*banner*/
.banner { height: 580px; background: #F8F8F8;min-width:1220px; }
.banner-list { height: 580px; position: relative; z-index: 1; overflow:hidden;}
.banner a { display: block; height: 580px; background-size: cover; text-decoration: none; }
.banner ul { height: 580px; position: absolute; left: 0px; top: 0px; }
.banner li { position: relative; float: left; width: 100%; height: 580px; }

.banner-list .text-box { padding-top: 137px; }
.banner-list .text-box h3 { color: #3F9300; font-size: 24px; line-height: 31px; margin-bottom:14px;}
.banner-list .text-box p { opacity: 0; }

.banner-list .text-box .btn { width: 144px; height: 40px; line-height: 40px; border-radius: 4px; background: #83C450; color: #fff; text-align: center; font-size: 14px; margin-top: 26px; }
.banner-list .item:nth-child(2) .text-box .btn { background: #00865E; }
.banner-list .text-box div { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); transition: opacity .5s, -webkit-transform .5s .5s; transition: transform .5s .5s, opacity .5s; transition: transform .5s .5s, opacity .5s, -webkit-transform .5s .5s; }
.banner-list .item .text-show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: all .5s .5s; }
.banner-list .item:nth-child(2) .text-box .text-showp, .banner-list .item:nth-child(3) .text-box .text-showp { animation: myfirst 1s; opacity: 1; transition: all 1s; }
.banner-list .item:nth-child(2) .text-box .text-showp1, .banner-list .item:nth-child(3) .text-box .text-showp1 { animation: myfirst1 1.2s; opacity: 1; transition: all 2s; }
.banner-list .item:nth-child(2) .text-box .text-showp2, .banner-list .item:nth-child(3) .text-box .text-showp2 { animation: myfirst2 1.6s; opacity: 1; transition: all 3s; }


@keyframes myfirst {
    from { margin-left: 100px;}
    to { margin-left: 0px; }

}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from { margin-left: 100px; }
    to { margin-left: 0px;  }
}
@keyframes myfirst1 {
    from { margin-left: 400px; }
    to { margin-left: 0px; }
}
@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
    from { margin-left: 400px; }
    to { margin-left: 0px; }
}
@keyframes myfirst2 {
    from { margin-left: 600px; }
    to { margin-left: 0px; }
}
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
    from { margin-left: 600px; }
    to { margin-left: 0px; }
}

.banner-list .item:first-child .text-box, .banner-list .item:last-child .text-box { padding-top: 210px; }
.banner-list .item:first-child .text-box p, .banner-list .item:last-child .text-box p { text-align: center; padding-bottom: 24px; }
.banner-list .item:first-child .text-box .text-showp, .banner-list .item:last-child .text-box .text-showp { animation: myfirst3 1.2s; opacity: 1; transition: all 3s; }
.banner-list .item:first-child .text-box .text-showp1, .banner-list .item:last-child .text-box .text-showp1 { animation: myfirst4 1.6s; opacity: 1; transition: all 3s; }
@keyframes myfirst3 {
    from { margin-top: -200px; }
    to { margin-top: 0px; }
}
@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
    from { margin-left: -200px; }
    to { margin-left: 0px; }
}
@keyframes myfirst4 {
    from { margin-top: -160px; }
    to { margin-top: 0px; }
}
@-webkit-keyframes myfirst4 /* Safari and Chrome */
{
    from { margin-left: -160px; }
    to { margin-left: 0px; }
}

.banner-list .item:nth-child(2) .text-box { padding-top: 155px; }
.banner-list .item:nth-child(2) .text-box p {padding-bottom:14px; }
.banner-list .item:nth-child(2) .text-box .text-showp { animation: myfirst1 1.2s; opacity: 1; transition: all 3s; }
.banner-list .item:nth-child(2) .text-box .text-showp1 { animation: myfirst2 1.6s; opacity: 1; transition: all 3s; }

.slide { height: 100%; width: 100%; position: absolute; top: 0; left: 100%; z-index: 10; background-color: #120103; background-position: 50% 50%; background-size: cover; transition: left 0s .75s; font-family: HarmonyOS Sans SC; }
.slide h2 { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); transition: opacity .5s, -webkit-transform .5s .5s; transition: transform .5s .5s, opacity .5s; transition: transform .5s .5s, opacity .5s, -webkit-transform .5s .5s; }
[id^="slide"]:checked + .slide { left: 0; z-index: 100; transition: left .65s ease-out; }
[id^="slide"]:checked + .slide h2 { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: all .5s .5s; }

.banner-paging { position: absolute; bottom: 40px; left: 50%; transform: translate(-50%,0%); z-index: 200; }
.banner-paging label { display: inline-block; position: relative; width: 12px; height: 12px; line-height: 12px; text-align: center; border-radius: 50%; margin-right: 10px; pointer-events: none; }
.banner-paging em { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.banner-paging .cur em { background:#fff;}
.banner-btn { display: none; position: absolute; top: 50%; margin-top: -30px; width: 60px; height: 60px; line-height: 60px; background: rgba(0, 0, 0, 0.2); text-align: center; z-index: 200; cursor: pointer; transition: all 0.3s; }
.banner-btn:hover { background: rgba(145,197,59, 0.8); }
.banner .btn-pre { left: 60px; }
.banner .btn-next { right: 60px; }
.banner-btn .ico60 { width: 50px; height: 50px; }
.banner .ico-left-circle50 { background-position-x: -125px; }
.banner .ico-right-circle50 { background-position-x: -185px; }
.banner:hover .banner-btn { display: block; }

.banner-narrow { width: 1220px; margin: auto; }

.column { margin-top: 80px; text-align: center; }
.column .split1 { display: none; }
.column .item { display: inline-block; width: 152px; height: 152px; text-align: center; margin-right: 56px; position: relative;transition:all 0.3s; }
.column .item > a { display: block; width: 104px; height: 104px; padding: 24px; }
.column .item:hover { background: #91c53b; }
.column .item:hover img { filter: brightness(100); }
.column .item:hover a { color: #fff; }
.column .item a:hover { text-decoration: none; }
.column .item p { position: absolute; bottom: 24px; height: 24px; width: 100%; }
.column .item p a { display: block; }
.column .item p:last-child { display: none }
.column .item img { width: 64px; height: 64px; object-fit: cover; transition: all 0.3s; }
.column .item:last-child { margin-right: 0px; }

.section { margin-top: 80px; }
.section .title { line-height: 32px; margin-bottom: 50px; text-align: center; }
.section .title .name { position: relative; }
.section .title .name span { display: none; }
.section .title .name .ico { width: 240px; margin: 0px 24px; }
.section .title .ico-title-right { background-position-x: -360px; }
.section .title .ico-title-left { background-position-x: -600px; }
.section .title .line2 { display: none; }
.section .title .more { display: none; }
.section .links { text-align: center; margin-top: 50px; }
.section .links .ico { background-position-y: -860px; margin-left: 30px; }

.aboutus { position: relative; height: 470px; margin-top: 0px; }
.aboutus .title { display: none; }
.aboutus .pic { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.aboutus .pic img { width: 100%; height: 100%; object-fit: cover; }
.aboutus .item { position: absolute; top: 50%; margin-top: -160px; left: 50%; margin-left: -500px; z-index: 100; width: 1000px; height: 320px; background: rgba(255, 255, 255, 0.6); text-align: center; backdrop-filter: blur(17px); }
.aboutus .name { padding-top: 72px; }
.aboutus .name:after { display: block; content: ""; width: 60px; height: 3px; background: #fff; margin: 14px auto; }
.aboutus .desc { width: 738px; line-height: 24px; margin: auto; }
.aboutus .links { margin-top: 32px; }

.service { margin-top: 50px; }
.service .title { display: none; }
.service .item { width: 390px; height: 244px; float: left; margin-bottom: 30px; position: relative; margin-right: 25px; }
.service .item:nth-child(3n) { margin-right: 0px; }
.service .item .pic { width: 390px; height: 244px; overflow: hidden; }
.service .item .pic img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.service .item .pic img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); }
.service .item .name { position: absolute; bottom: 0px; width: 100%; height: 48px; line-height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0, 0, 0, 0.4); }
.service .item .name a { display: block; padding: 0px 12px; color: #fff; }
.service .item .name a:hover { text-decoration: none; }
.service .item .desc { display: none; }
.service .item .link1 { display: none; }


.brand-br { background: url(/res/images/bg/brand.png) no-repeat center; background-size: 100% auto; height:440px; margin: 0 auto; }
.brand-box { height:100%;position:relative;}
.brand { background: #F9F9F9; padding: 80px 0px; margin-top: 0px; }
.brand .item { display:block;}
.brand .item img { position: absolute; transition: all .5s linear; animation: sca .5s linear infinite; }
.brand .item img:hover { opacity: 1 !important; z-index: 100 !important; width: 220px !important; height: 147px !important; }

.brand .item .brand-c { -webkit-transform: scale(1.04); transform: scale(1.04); }
.brand .item .brand-b { -webkit-transform: scale(1.03); transform: scale(1.03); }
.brand .item .brand-a { -webkit-transform: scale(1.02); transform: scale(1.02); }
.brand .item .brand-d { -webkit-transform: scale(1.05); transform: scale(1.05); }
.brand .links { margin-top: 26px;}

.product { background: #F9F9F9; padding: 80px 0px; }
.product .slider { display: none; }
.product .item { float: left; width: 243px; margin: 0 0 -1px -1px; transition: all 0.5s; position: relative; line-height: 20px; }
.product .item:hover { background: #91c53b;color:#fff!important; box-shadow: 0px 4px 6px rgba(145,197,59, 0.05), 0px 10px 15px rgba(145,197,59, 0.1); z-index: 1; }
.product .item a { display: block; padding: 24px 20px 18px 20px; text-decoration: none; }
.product .item:hover a { color: #fff!important; }
.product .item:hover a div { color: #fff !important; }
.product .item:hover a label { color: #fff !important; }
.product .item .pic { width: 160px; height: 160px; margin: auto; }
.product .item .time { height: 20px; padding: 20px 0px 4px 0px; }
.product .item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product .item .desc { height: 20px; padding: 4px 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product .item .desc .split { margin: 0px 6px; margin-top: -2px; }
.product .item .price .old { text-decoration: line-through; }
.product .item .price span { margin-left: 4px; }
.product .item .tag { position: absolute; top: 12px; left: 12px; }
.product .item .tag span { vertical-align: middle; }
.product .item .pic-zoom { position: absolute; top: 4px; right: 4px; cursor: pointer; display: none; }
.product .item .pic-zoom:hover { opacity: 0.8; }
.product .item:hover .pic-zoom { display: block; }


.news { padding-bottom: 100px; }
.news .item { padding: 24px 0px; position: relative; border-top: 1px solid #EEEEEE;cursor:pointer; }
.news .item a { text-decoration:none;}
.news .item:hover { background: #91c53b;}
.news .item:hover a { color: #fff !important; }
.news .item:hover img { -webkit-transform: scale(1.04); transform: scale(1.04); }
.news .item:hover span:after { background: #fff!important; }

.news .item:last-child { border-bottom: 1px solid #EEEEEE; }
.news .item .type { display: none; }
.news .item .pic { width: 220px; height: 124px; float: left; margin-left: 207px; }
.news .item .pic img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.news .item .desc { float: right; width: 740px; position: relative; }
.news .item .name { line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; }
.news .item .text { height: 44px; line-height: 22px; overflow: hidden; }
.news .item .link1 { display: none }
.news .item .time { position: absolute; top: 0px; left: -474px; color: #333; }
.news .item .author { color: #999; padding-top: 26px; }
.news .item .time span { font-weight: bold; }
.news .item .time span:after { display: inline-block; content: ""; width: 1px; height: 16px; background: #999; margin: 0px 8px; vertical-align: middle; }
.news .item .time2 { display: none; }
.news .item div { transition:all 0.3s;}
.news .item:hover div { color: #fff !important; }

#category4 { display: block; }
