@import url(../res/base.css);
h1{font:bold 2.5em/1 ""; color:#486b35}
h1:after{content:"+"; font:bold 1.5em/1 ""; color:#db224c; display:inline-block; position:relative; bottom:-0.8em}
section{margin:0 auto; max-width:1200px; width:100%;}
section>h2{font:bold 4em/2 ""; color:#103412; text-align:center; display: block;}

.part{width:100%; padding:4em 1em;}
.banner{width:100%; height:37.8125em; background: url(banner.jpg) no-repeat 40.5vw 0/auto 100%; overflow:hidden}
.banner>section{margin:0 auto; padding:4em 1em 0 1em;  width:1200px;}
.banner>section>div.l{float:left; display: inline; width:25em;}
.banner ul{padding-top:4em;}
.banner ul:first-child li{padding:0.5em 0;}
.banner ul:first-child em{padding-right:0.5em; width:5em; font:normal 2em/1 ""; color:#1a3b1c; display:inline-block; vertical-align: bottom;}
.banner ul:first-child em span{float:right; display: inline;margin-top:0.5em; padding:0.1em; width:1.6em; height:1.6em; text-align: center; font:normal 0.5em/1.5 ""; color:white; background-color: #1a3b1c;vertical-align: bottom; border-radius: 50%;}
.banner ul+ul{margin-top:3em; padding:0 2em; background-color:#f1f1ec; border-radius:1em; overflow: hidden;}
.banner ul+ul li{float:left; display: inline; padding:0.5em 0;}
.banner ul+ul li:nth-of-type(2n+1){margin-right:1em; clear:left}

.banner>section>div.r{float:right; display: inline; margin-top:4em; padding:2em; width:38em; font:1em/2 ""; color:white; background:linear-gradient(to right,rgba(16,52,18,0.2),transparent); border-radius:1em; }
.banner>section>div.r p+p{margin-top:1em;}

.listHaveImg{width:100%; padding:0; display: flex; justify-content: space-around; flex-wrap: wrap;}
.listHaveImg li{margin-top:2em; width:45%;}
.listHaveImg li:before{width:33em; height:14.63em; content:""; background: url(adpic.png) no-repeat 0 0/66em auto; display: block;}
.listHaveImg li strong{margin-top:1em; font:bold 1.2em/1.5 ""; color:#103412; display: block;}
.listHaveImg li strong:after{margin-top:1em; width:2em; height:0.2em; content: ""; background-color: #103412; display: block; }
.listHaveImg li p{margin-top:1em; font:normal 1em/1.5 "";}

.p1{min-height:857px; background: url(p1bg.jpg) no-repeat 50% 0/auto 100%;}
.p1>section>div{padding:2em 1em 1em 1em; width:100%; overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap;}
.p1 dl{margin-top:2em; width:32%; padding: 1.5em; background:#f0f6ee; border:white 1px solid; border-radius:1em; box-shadow:0 0 0.5em darkgray; overflow: hidden;}
.p1 dt{font:bold 2em/2 ""; color:#103412;}
.p1 dt span{margin-left:0.5em; font:lighter 0.9em/1 "幼圆";}
.p1 dd{margin-top:1em; padding-left:2em; font:1em/1.5 ""; display:block; position: relative;}
.p1 dd strong{font:bold 1.1em/2 ""; display: block;}
.p1 dd:before{width:1.5em; height:1.5em; content:""; background:url(p1icon.png) no-repeat 0 0/4.5em auto; display: block; position: absolute; left:0; top:0.5em;}

.p1 dl:nth-of-type(1) dd:nth-of-type(1):before{background-position:0 0;}
.p1 dl:nth-of-type(1) dd:nth-of-type(2):before{background-position:-1.5em 0;}
.p1 dl:nth-of-type(1) dd:nth-of-type(3):before{background-position:-3em 0;}

.p1 dl:nth-of-type(2) dd:nth-of-type(1):before{background-position:0 -1.5em;}
.p1 dl:nth-of-type(2) dd:nth-of-type(2):before{background-position:-1.5em -1.5em;}
.p1 dl:nth-of-type(2) dd:nth-of-type(3):before{background-position:-3em -1.5em;}

.p1 dl:nth-of-type(3) dd:nth-of-type(1):before{background-position:0 -3em;}
.p1 dl:nth-of-type(3) dd:nth-of-type(2):before{background-position:-1.5em -3em;}
.p1 dl:nth-of-type(3) dd:nth-of-type(3):before{background-position:-3em -3em;}

.p2{background: url(flowerL.png) no-repeat 0 0;}
.p2 .listHaveImg li:nth-of-type(1):before{background-position: 0 0;}
.p2 .listHaveImg li:nth-of-type(2):before{background-position: -33em 0;}


.p3{background: url(flowerr.png) no-repeat 100% 100%;}
.p3 .listHaveImg li:nth-of-type(1):before{background-position: 0 -14.63em;}
.p3 .listHaveImg li:nth-of-type(2):before{background-position: -33em -14.63em;}
.p3 .listHaveImg li:nth-of-type(3):before{background-position: 0 -29.26em;}
.p3 .listHaveImg li:nth-of-type(4):before{background-position: -33em -29.26em;}

.p4{background: url(goodsbg.jpg) no-repeat 50% 0/100% 100%; counter-reset:number;}
.p4 table{margin:2em auto 0 auto; width:100%; line-height: 2; background-color:white; border-radius:0 0 1em 1em; position: relative;}
.p4 table+table{margin-top:3em;}
.p4 table:before{counter-increment: number; content:counter(number); font:italic bold 5em/1 ""; color:#b0b9a6; position:absolute; left: -0.4em; top:-0.4em; z-index:2;}
.p4 table caption{padding:1em; font-size:1.5em; text-align: left; background-color:darkgreen; color:#dea161; border-radius:1em 1em 0 0; position:relative; z-index:3;}
.p4 table caption strong{margin-right:1em; padding-right:1em; font-size:1.2em; color:white; border-right:white 2px dotted;}
.p4 table thead tr{padding:0.2em 0;}
.p4 table th{padding:1em 0; line-height: 1.5; background-color:#d7d8c9;}
.p4 table th:nth-of-type(1){border-right:white 2px dotted}
.p4 table th:nth-of-type(n+3){padding:0 0.2em; white-space: nowrap; text-align: left; color:#dea161; }
.p4 table:nth-of-type(2) th:nth-of-type(n+3){font-weight: normal;}
.p4 table th span{font-weight:bold; display: block;}
.p4 table td{padding:0.5em; line-height: 1.5;}
.p4 table tr+tr td{border-top:#d7d8c9 2px dotted;}
.p4 table td[rowspan]{text-align: center; border-right:#d7d8c9 2px dotted;}
.p4 table tfoot td{padding:2em 0; text-align: center; border-top:#d7d8c9 2px solid}
.p4 table tfoot td a{padding:0.5em 5em; font:1em/1 ""; background-color:#cab166; color:white; display: inline-block; border-radius:0.5em;}
.p4 table tfoot td a:after{margin-left:1em; content: ""; border-left:white 0.8em solid; border-top:transparent 0.4em solid;  border-bottom:transparent 0.4em solid; display: inline-block; vertical-align: middle;}

.p4 .operate strong{margin-top:1em; display: block;}
.p4 .operate td>strong:first-child{margin-top:0;}

@media screen and (max-width: 1200px) {
  .banner>section{width:100vw;}
  .listHaveImg li:before{width:41.33vw; height:18.32vw; background-size: 82.66vw auto;}
  .p2 .listHaveImg li:nth-of-type(1):before{background-position: 0 0;}
  .p2 .listHaveImg li:nth-of-type(2):before{background-position: -41.33vw 0;}
  .p3 .listHaveImg li:nth-of-type(1):before{background-position: 0 -18.32vw;}
  .p3 .listHaveImg li:nth-of-type(2):before{background-position: -41.33vw -18.32vw;}
  .p3 .listHaveImg li:nth-of-type(3):before{background-position: 0 -36.64vw;}
  .p3 .listHaveImg li:nth-of-type(4):before{background-position: -41.33vw -36.64vw;}
}

@media screen and (max-width: 1064px) {  
  h1:after{margin-left:0.2em; bottom: -0.15em; vertical-align: bottom;}
  .banner>section{padding-top:2em;}
  .banner>section>div.l,.banner>section>div.r{width:100%;}
  .banner ul:first-child{float:left; display:inline}
  .banner ul:first-child em{width:4em;}
  .banner ul+ul{float: left; display: inline; margin-left:4em; color:white; background:linear-gradient(to right,rgba(16,52,18,0.2),transparent); border-radius:1em;}
  .banner>section>div.r{color:#333; background:#ecefec; border-radius:0;}  
  .banner{height:auto; background-size:auto 28em; background-position:26.75em 0;}
  .p1 dl{width:49%;}
}

@media screen and (max-width: 768px) {
    h1 span{display:block;}
    .banner{background-position:14em 0;}
    .banner ul:first-child{padding-top:2em;}
    .banner ul+ul{margin-left:0.5em; padding:0.5em;}  
}

@media screen and (max-width: 657px) {
    .banner{background-size:auto calc(46.81vw + 7em);}
    .banner>section>div.l{font-size:0.725em;}
    .banner>section>div.r{margin-top:4.66vw; font-size:0.725em;}
    .p1 dl{width:100%;}
    .p2,.p3,.p4{font-size:0.725em;}
    section>h2{font-size:9.74vw;}
}
@media screen and (max-width: 496px) {
    .banner ul+ul li{padding:0; line-height: 1.5; clear: both;}
    .p1{font-size:0.875em;}
    .listHaveImg li{width:100%;}
    .listHaveImg li:before{width:93vw; height:41.22vw; background-size: 186vw auto;}
    .p2 .listHaveImg li:nth-of-type(1):before{background-position: 0 0;}
    .p2 .listHaveImg li:nth-of-type(2):before{background-position: -93vw 0;}
    .p3 .listHaveImg li:nth-of-type(1):before{background-position: 0 -41.22vw;}
    .p3 .listHaveImg li:nth-of-type(2):before{background-position: -93vw -41.22vw;}
    .p3 .listHaveImg li:nth-of-type(3):before{background-position: 0 -82.44vw;}
    .p3 .listHaveImg li:nth-of-type(4):before{background-position: -93vw -82.44vw;}
}
@media screen and (max-width: 420px) {
    h1{font-size:9.52vw;}
    .p1{font-size:3vw;}
    .banner>section>div.l,.banner>section>div.r{font-size:2.8vw;}
}