.banner {

    width: 100%;

    overflow: hidden;

    position: relative;

}



.banner .line,

.subbanner .line {

    background-color: rgba(255, 255, 255, .4);

    height: 100%;

    z-index: 9;

    width: 1px;

    position: absolute;

    top: 0;

}



.banner .line1,

.subbanner .line1 {

    left: 100px;

}



.banner .line2,

.subbanner .line2 {

    right: 100px;

}



.subbanner {

    width: 100%;

    overflow: hidden;

    background-repeat: no-repeat;

    background-position: center bottom;

    background-size: cover;

    position: relative;

    padding-top: 11%;

    padding-bottom: 11%;

}



.subbanner .title {

    text-align: center;

    color: #fff;

    font-size: 54px;

    font-weight: normal;

    margin-bottom: 10px;

}



.subbanner .subtitle {

    text-align: center;

    color: #fff;

    font-size: 20px;

}



.banner li a {

    display: block;

    position: relative;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}



.banner li .img {

    width: 100%;

    height: auto;

}



.banner li .text {

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 20%;

    z-index: 9;

    padding-top: 100px;

}



.banner li .t1 {

    color: #fff;

    font-size: 40px;

    letter-spacing: 8px;

    line-height: 1.3;

}



.banner li .t2 {

    color: #fff;

    font-size: 54px;

    margin: 30px 0;

    line-height: 1.2;

}



.banner li .t3 {

    color: #fff;

    font-size: 20px;

}



.banner-dots {

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 10%;

    z-index: 9;

}



.banner .swiper-pagination {

    position: relative;

    bottom: 0;

    text-align: left;

}



.banner .swiper-pagination-bullet {

    width: 54px;

    height: 10px;

    border-radius: 5px 0px 5px 0px;

    background-color: #fff;

    opacity: .4;

    transition: all .3s ease;

    margin-right: 20px;

}



.banner .swiper-pagination-bullet-active {

    opacity: 1;

    background-color: #fff;

}



.index-flex {

    display: flex;

}



.imgbox {

    width: 50%;

    max-width: 674px;

}

.imgbox.fadeInLeft {
    text-align: right;
}

.imgbox img {

    width: 100%;
    max-width: 400px;

}



.textbox {

    width: 50%;

}



.textbox.pl {

    padding-left: 8%;

}



.textbox.pr {

    padding-right: 8%;

}



.section1 {

    padding-top: 10%;

    padding-bottom: 10%;

    position: relative;

}



.section1 .fw {

    position: relative;

    z-index: 99;

}



.section1 .sbg {

    position: absolute;

    z-index: 1;

    opacity: .5;

    max-width: 50%;

}



.section1 .sbg img {

    max-width: 100%;

}



.section1 .bg1 {

    top: -100px;

    right: 0;

}



.section1 .bg2 {

    right: 0;

    bottom: 0;

}



.section1 .bg3 {

    left: 0;

    top: 50%;

    transform: translateY(-50%);

}



.section1 .bg4 {

    right: 6%;

    top: 50%;

    transform: translateY(-50%);

}



.section1 .bg5 {

    right: 0;

    top: 0;

}



.section1 .bg6 {

    left: 0;

    bottom: 0;

}



.text-title {

    font-size: 36px;

}



.text-title span {

    display: inline-block;

    color: #5DB806;

    position: relative;

    z-index: 9;

}



.text-title a {

    position: relative;

}



.text-title a i {

    display: inline-block;

    font-style: normal;

    color: #619034;

    position: relative;

    z-index: 9;

}



.text-title a::before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 20px;

    background-color: #CBD3AD;

    border-radius: 0px 10px 0px 10px;

    z-index: 1;

}



.textbox .state {

    color: #284425;

    font-size: 24px;

    margin: 28px 0 32px;

    letter-spacing: 3px;

}



.textbox .brief {

    color: #5B6A59;

    font-size: 14px;

    line-height: 2;

    max-width: 465px;

}



.textbox .brief p+p {

    margin-top: 18px;

}



.textbox .brief.w2 {

    max-width: 625px;

}



.lookmore {

    display: inline-block;

    background-color: #619034;

    color: #fff;

    font-size: 14px;

    padding: 0 36px;

    height: 48px;

    line-height: 48px;

    border-radius: 24px;

    transition: all .3s ease;

}



.lookmore span {

    display: inline-block;

    margin-right: 30px;

}



.lookmore img {

    vertical-align: baseline;

}



.lookmore:hover {

    opacity: .9;

}



.textbox .lookmore {

    margin-top: 10%;

}



.textbox .icon1 {

    text-align: right;

    margin-bottom: 8%;

}



.textbox .icon2 {

    margin-top: 40px;

    width: 100%;

}



.section1 .mt {

    margin-top: 10%;

}



.textbox2 .wrap {

    max-width: 465px;

}



.section2 {

    padding-top: 9%;

    padding-bottom: 9%;

    background-image: url(../images/img_ppjieshao.png);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}



.section2 .wrap {

    max-width: 1476px;

    margin: 0 auto;

    background-color: rgba(255, 255, 255, .95);

    padding: 7% 40px;

}



.section2 .title {

    text-align: center;

    margin-bottom: 5%;

}



.section2 .title a {

    display: inline-block;

    position: relative;

}



.section2 .title span {

    display: inline-block;

    font-style: normal;

    color: #619034;

    position: relative;

    z-index: 9;

    font-size: 36px;

}



.section2 .title a::before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 20px;

    background-color: #CBD3AD;

    border-radius: 0px 10px 0px 10px;

    z-index: 1;

}



.section2 .brief {

    color: #284425;

    font-size: 18px;

    line-height: 2;

    text-align: center;

}



.inpage {

    padding-top: 5%;

    padding-bottom: 5%;

}



.inpage-flex {

    display: flex;

}



.left-images {

    flex-shrink: 0;

    width: 48%;

    max-width: 620px;

}



.rightcon {

    overflow: hidden;

    flex: 1;

    margin-left: 5%;

}



.rightcon .name {

    color: #284425;

    font-size: 48px;

    margin-bottom: 20px;

}



.rightcon .price {

    color: #5DB806;

    font-size: 30px;

    font-weight: bold;

}



.rightcon .line {

    height: 1px;

    background-color: #CECECE;

    margin: 40px 0;

}



.rightcon .title {

    color: #284425;

    font-size: 24px;

    margin-bottom: 25px;

}



.product-intro .item {

    color: #5B6A59;

    font-size: 14px;

    line-height: 2;

    position: relative;

    padding-left: 24px;

}



.product-intro .item .t0 {

    font-weight: bold;

}



.product-intro .item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 6px;

    width: 10px;

    height: 10px;

    border: 3px solid #284425;

}



.product-intro .item+.item {

    margin-top: 20px;

}



.product-intro .item0 {

    padding-left: 24px;

    position: relative;

    margin-bottom: 20px;

}



.product-intro .item0 .tt {

    color: #5B6A59;

    font-size: 14px;

    line-height: 2;

    font-weight: bold;

}



.product-intro .item0 .brief {

    color: #5B6A59;

    font-size: 14px;

    line-height: 2;

    position: relative;

}



.product-intro .item0::before {

    content: "";

    position: absolute;

    left: 0;

    top: 6px;

    width: 10px;

    height: 10px;

    border: 3px solid #284425;

}



.product-type-list {

    display: flex;

    margin: 0 -10px;

    flex-wrap: wrap;

    align-items: stretch;

}



.product-type-list li {

    width: 33.3%;

    padding: 0 10px;

    margin-bottom: 15px;

}



.product-type-list li a {

    display: block;

    padding: 24px 15px 20px 20px;

    border: 1px solid #D1D9CF;

    height: 100%;

    transition: all .3s ease;

}



.product-type-list li .kk {

    width: 16px;

    height: 15px;

    background-color: #AFBBAE;

}



.product-type-list li .pname {

    color: #284425;

    font-size: 16px;

    margin-top: 5px;

}



.product-type-list li.on a {

    background-color: #619034;

}



.product-type-list li.on .pname {

    color: #fff;

}



.product-type-list li.on .kk {

    background-color: #619034;

}



.product-type-list li a:hover {

    border-color: #619034;

}



.product-type-list li a:hover .kk {

    background-color: #619034;

}



.commonbtn {

    display: inline-block;

    color: #fff;

    font-size: 14px;

    text-align: center;

    height: 60px;

    background-color: #3C403D;

    padding: 0 20px;

    line-height: 60px;

}



.commonbtn:hover {

    opacity: .9;

}



.probtns .commonbtn {

    display: block;

}



.probtns {

    display: flex;

}



.probtns .pro {

    flex: 1;

}



.probtns .pro+.pro {

    margin-left: 30px;

}



.number {

    display: flex;

}



.number a {

    display: inline-block;

    height: 60px;

    line-height: 60px;

    background-color: #3C403D;

    color: #fff;

    font-size: 18px;

    text-align: center;

    width: 124px;

    max-width: 30%;

    min-width: 60px;

    flex-shrink: 0;

}



.number .num {

    flex: 1;

    overflow: hidden;

}



.number .num input {

    width: 100%;

    text-align: center;

    color: #fff;

    font-size: 18px;

    background-color: #616B63;

    height: 60px;

}



.number a:hover {

    opacity: .9;

}



.bigimg .img {

    width: 100%;

}



.bigimg .hide {

    display: none;

}



.smallbox {

    position: relative;

    margin-top: 10px;

    height: 125px;

    overflow: hidden;

    padding: 0 30px;

}



.smallbox .btn {

    position: absolute;

    top: 0;

    z-index: 9;

    width: 20px;

    height: 100%;

}



.smallbox .btn img {

    width: 100%;

    height: 100%;

}



.smallbox .prev {

    left: 0;

}



.smallbox .next {

    right: 0;

}



.smallbox .btn.disabled {

    opacity: .5;

}



.small-swiper {

    overflow: hidden;

}



.small-swiper li {

    overflow: hidden;

    opacity: .3;

}



.small-swiper li .img {

    width: 100%;

    height: 125px;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}



.small-swiper li.active {

    opacity: 1;

}



.section3 {

    padding: 8% 0;

}



.section3 .text-title {

    color: #619034;

    margin-bottom: 35px;

    padding-bottom: 30px;

    border-bottom: 1px solid #CECECE
}



.contact {

    padding: 8% 0;

}



.contact .fw {

    display: flex;

    align-items: stretch;

}



.contact .text-title {

    color: #619034;

    position: relative;

    border-bottom: 1px solid rgba(85, 141, 89, .4);

    padding-bottom: 40px;

    margin-bottom: 40px;

}



.contact .text-title::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100px;

    height: 3px;

    background-color: #619034;

}



.contact .left {

    width: 50%;

    padding-right: 50px;

    padding-top: 15px;

}



.contact .right {

    position: relative;

    width: 50%;

}



.contact .right .bg {

    position: absolute;

    top: 20px;

    bottom: 0;

    left: 0;

    right: 20px;

    background-color: #CBD3AD;

    z-index: 1;

}



.contact .right .map {

    position: relative;

    z-index: 9;

    width: 100%;

    height: 100%;

    background-color: #fafafa;

}



.contact .left .wrap {

    max-width: 620px;

}



.contact .info+.info {

    margin-top: 26px;

}



.contact .info .t1 {

    color: #284425;

    font-size: 14px;

}



.contact .info .t2 {

    color: #284425;

    font-size: 20px;

    margin-top: 12px;

    line-height: 1.6;

}



.contact .info .t2 span {

    display: inline-block;

    margin-right: 10px;

}