@charset "UTF-8"; .header .logo { background-color: #2ab89a; background-image: linear-gradient(#2ab89a, #78c69c); } .header .location li, .header .location li a { color: #275b54; } .header .location li:before { background: #2ab89a; } .header .nav-btn i, .header .nav-btn i:after, .header .nav-btn i:before { background: #2ab89a; } .green-box { width: 100%; height: 100%; line-height: 1.2; overflow: hidden; } .green { position: relative; } .green .title-box { line-height: 1.2; padding-left: 2rem; position: relative; z-index: 1; } .green .title-box::before { content: "Green"; width: 100%; font-size: 1.88rem; font-family: "ProximaSansBlack"; text-transform: uppercase; font-style: italic; letter-spacing: -0.10667rem; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(#58d9be, rgba(88, 217, 190, 0.2)); display: block; position: absolute; left: 1.73333rem; top: -1rem; z-index: -1; } .green .title-box .num { font-size: 1.57333rem; color: #9ddb98; font-family: "微软雅黑"; font-weight: bold; letter-spacing: -0.06667rem; -webkit-text-stroke: 0.02667rem #fff; position: absolute; left: 0; top: 50%; margin-top: -0.88rem; } .green .title-box h2, .green9 .title-box p { font-size: 0.4rem; color: #333333; } .green .title-box h2 span, .green9 .title-box h2 a { font-size: 0.8rem; font-weight: bold; color: #fff; margin-bottom: 0.24rem; display: block; } .green .swt-btn { width: 6.98667rem; height: 1.18667rem; font-size: 0.26667rem; color: #fff; text-align: center; line-height: 1.18667rem; display: block; margin: 0 auto; position: relative; z-index: 1; } .green .swt-btn::before, .green .swt-btn::after { content: ""; box-shadow: 0 0.13333rem 0.09333rem 0.18667rem #6c2f11; position: absolute; left: 10%; right: 10%; top: 34%; bottom: 34%; opacity: 0.6; z-index: -1; } .green .swt-btn::before { transform: rotate(-4deg); } .green .swt-btn::after { transform: rotate(4deg); } .green .swt-btn a { width: 100%; height: 100%; background: #f45000; color: #fff; display: block; } .green .swt-btn a::after { content: ""; width: 0.69333rem; height: 0.49333rem; background: url(../images/finger.png) no-repeat; background-size: 100%; display: inline-block; vertical-align: middle; margin-left: 0.33333rem; } .green .swt-btn a strong { font-size: 0.34667rem; } .green .yd-zs { position: absolute; left: 5%; top: 0.10667rem; z-index: 1; } .green .yd-zs i, .green .yd-zs i::before, .green .yd-zs i::after { width: 0.10667rem; height: 0.10667rem; background: #9ddb98; border-radius: 50%; margin: 0.13333rem; display: block; position: relative; } .green .yd-zs i::before { content: ""; position: absolute; left: 0.10667rem; top: -0.13333rem; } .green .yd-zs i::after { content: ""; position: absolute; top: -0.13333rem; right: 0.10667rem; } .green .text { font-size: 0.37333rem; color: #666666; line-height: 0.77333rem; } .green1 { background: #04242d; background: url(../images/mgreen-bg.jpg) center top no-repeat #04242d; background-size: 100%; padding: 1.22667rem 0 0; position: relative; z-index: 1; } .green1 .title-pic { width: 9.02667rem; margin: 1.13333rem auto 2.50667rem; display: block; } .green1 .text { width: 8.42667rem; background: url(../images/bg-zs.jpg) repeat; padding: 0.66667rem 0.64rem; border-radius: 0.8rem 0.8rem 0.8rem 0; position: absolute; left: 0; bottom: 2.36rem; z-index: 1; box-shadow: 0 0.24rem 0.10667rem rgba(15, 94, 72, 0.2); } .green1 .text::before { content: ""; width: 0.74667rem; height: 0.74667rem; background: url(../images/bg-zs.jpg) repeat; display: block; position: absolute; left: 0; bottom: -0.66667rem; } .green1 .text::after { content: ""; width: 0.74667rem; height: 0.74667rem; background: #04242d; border-radius: 60px 0 0; display: block; position: absolute; left: 0; bottom: -0.74667rem; } .green1 .slogan { height: 10.32rem; background: #2ab89a; background: url(../images/mgreen-bg2.png) center bottom no-repeat #2ab89a; background-size: 100%; border-radius: 0.8rem; margin: 0 0.4rem 0 0.76rem; position: relative; } .green1 .slogan span { width: 0.4rem; font-size: 0.32rem; color: #79f5db; line-height: 1.25; text-align: center; position: absolute; right: 0.4rem; top: 0.2rem; } .green1 .slogan span::before, .green1 .slogan span::after { content: ""; width: 0.25333rem; height: 0.81333rem; background: url(../images/mgreen-tb01.png) center no-repeat; background-size: 100%; display: block; margin: 0.4rem auto; } .green1 .slogan span::after { -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); /*IE*/ filter: FlipV; } .green2 { background: #04242d; border-radius: 0 0 0.93333rem 0.93333rem; padding: 0 0.4rem 0.4rem; margin-top: -2.2rem; } .green2 .title-box { margin-left: 0.81333rem; } .green2 h3 { font-size: 0.56rem; color: #33bb9e; text-align: center; line-height: 1.2; margin: 1.53333rem 0 0.33333rem; } .green2 .text { color: #73abbb; margin: 0.33333rem 0 0.66667rem; } .green2 .swiper-tab { width: 100%; } .green2 .swiper-tab .swiper-tit li { width: 50%; background: #50666c; border-radius: 0.66667rem 0.66667rem 0.13333rem 0.13333rem; font-size: 0.4rem; color: #88a6ae; font-weight: bold; text-align: center; line-height: 1.62667rem; float: left; cursor: pointer; } .green2 .swiper-tab .swiper-tit .swiper-item-active { background: url(../images/bg-zs.jpg) repeat; font-size: 0.42667rem; color: #04242d; } .green2 .swiper-content { width: 100%; background: url(../images/bg-zs.jpg) repeat; border-radius: 0.26667rem 0.26667rem 0.53333rem 0.53333rem; margin: 0.16rem 0 0; position: relative; } .green2 .swiper-content::before { content: ""; width: 0.93333rem; height: 0.93333rem; background: url(../images/mgreen-tb02.png) center no-repeat #fff; background-size: 0.25333rem; border-radius: 50%; box-shadow: 0 0 0.24rem rgba(50, 186, 154, 0.42); position: absolute; left: 50%; top: -0.56rem; margin-left: -0.46667rem; } .green2 .swiper-content .swiper-slide { height: 100%; padding: 0.53333rem 0 0.33333rem; overflow: hidden; display: none; } .green2 .swiper-content .swiper-slide p { color: #666666; line-height: 0.64rem; padding: 0 0.46667rem 0 0.73333rem; margin: 0.46667rem 0; position: relative; } .green2 .swiper-content .swiper-slide p::before { content: ""; width: 0.36rem; height: 0.36rem; background: #48c2a8; background: rgba(0, 156, 123, 0.7); border-radius: 50%; display: block; position: absolute; left: -0.13333rem; top: 50%; margin-top: -0.18rem; } .green2 .swiper-content .swiper-slide-active { display: block; } .green2 .yd-zs { top: 1.44rem; } .green3 { padding: 1.6rem 0.4rem 0; } .green3 .yd-zs { top: 0.53333rem; } .green3 .title-box h2 span { color: #2caf8c; text-shadow: 0 0.14667rem 0.24rem rgba(30, 133, 109, 0.2); } .green3 .title-box::before { background-image: linear-gradient(#ededed, rgba(237, 237, 237, 0.2)); } .green3 .text { margin-top: 0.8rem; } .green3 .text p { margin: 0.33333rem 0; } .green4 { background-color: #2daf8b; background-image: linear-gradient(#70c39c, #29b89a); padding: 1.13333rem 0.4rem 0.53333rem; border-radius: 0.66667rem; z-index: 2; } .green4 .title-box h2 span { text-shadow: 0 0.14667rem 0.24rem rgba(30, 133, 109, 0.2); } .green4 .title-box::before { background-image: linear-gradient(to bottom right, #72d1ac, rgba(114, 209, 172, 0.2)); } .green4 .text { margin-top: 0.6rem; } .green4 .text p { color: #cffff1; margin: 0.33333rem 0; } .green5 { background: url(../images/bg-zs.jpg) repeat; padding: 0.01333rem 0 0.73333rem; border-radius: 0 0 0.8rem 0.8rem; margin-top: -0.82667rem; overflow: hidden; box-shadow: 0 0.36rem 0.28rem rgba(36, 123, 96, 0.2); z-index: 1; } .green5::before { content: ""; background: url(../images/mgreen-bg3.png) center top no-repeat; background-size: 100%; position: absolute; left: 0; right: -0.66667rem; top: 0.53333rem; bottom: 0; z-index: 3; } .green5 .same { margin-top: 0.86667rem; } .green5 .same .tit { font-size: 0.69333rem; color: #acddd0; font-weight: bold; letter-spacing: 10px; margin: 0.06667rem 0; } .green5 .same ul { position: relative; z-index: 3; } .green5 .same ul li { width: 33.33%; float: left; text-align: center; } .green5 .same ul li img { width: 2.29333rem; border-radius: 50%; } .green5 .same ul li p { font-size: 0.4rem; color: #2caf8c; font-weight: bold; padding-top: 0.24rem; } .green5 .wl-two ul li p { font-size: 0.4rem; color: #f45000; font-weight: normal; padding-top: 0.2rem; } .green6 { background-color: #29b89a; background-image: linear-gradient(#57c7a0, #29b89a); padding: 1.6rem 0.4rem 0.8rem; margin-top: -0.8rem; } .green6 h3 { font-size: 0.53333rem; color: #fff; font-weight: bold; text-align: center; text-shadow: 0 0.24rem 0.13333rem rgba(26, 129, 95, 0.2); } .green6 .text { color: #e2fff1; margin: 0.26667rem 0 0.6rem; } .green6 .swiper-tab2 { position: relative; z-index: 1; } .green6 .swiper-tit ul { overflow: hidden; margin-left: -0.43%; } .green6 .swiper-tit ul li { width: 32.904%; background: #d2d2d2; float: left; margin-left: 0.43%; font-size: 0.4rem; color: #fff; font-weight: bold; text-align: center; line-height: 0.8rem; } .green6 .swiper-tit ul .swiper-item-active { background: #fff; color: #3ab491; } .green6 .swiper-content .swiper-slide { display: none; } .green6 .swiper-content .swiper-slide-active { display: block; } .green6 .swiper-content .txt { background: #fff; font-size: 0.34667rem; color: #238b6d; line-height: 0.50667rem; text-align: center; padding: 0.18667rem 0; position: relative; } .green6 .swiper-content .txt::before, .green6 .swiper-content .txt::after { content: ""; box-shadow: 0 0.16rem 0.09333rem 0.18667rem #136952; position: absolute; left: 7%; right: 7%; top: 50%; bottom: 50%; z-index: -1; opacity: 0.5; } .green6 .swiper-content .txt::before { transform: rotate(-5deg); } .green6 .swiper-content .txt::after { transform: rotate(5deg); } .green6 .swiper-content .txt dd { position: relative; z-index: 1; } .green6 .swiper-content .txt dt { overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .green6 .swiper-content .txt dt img { height: 100%; } .green6 .swiper-content ul { padding-top: 1.2rem; overflow: hidden; position: relative; } .green6 .swiper-content ul::before { content: ""; height: 0.48rem; background: url(../images/green-zs02.png) center no-repeat; background-size: 0.58667rem; position: absolute; left: 0; right: 0; top: 0.24rem; } .green6 .swiper-content ul li { width: 33.33%; float: left; text-align: center; } .green6 .swiper-content ul li img { width: 80%; } .green6 .swiper-content ul li p a { font-size: 0.34667rem; color: #ffffff; font-weight: bold; line-height: 0.50667rem; display: block; } .green6 .cp-two { margin-top: 1.2rem; } .green7 { background: url(../images/bg-zs.jpg) repeat; padding: 1.33333rem 0.4rem 1.13333rem; } .green7 .title-box h2 span { color: #4caa85; text-shadow: 0 0.14667rem 0.24rem rgba(30, 133, 109, 0.2); } .green7 .title-box::before { background-image: linear-gradient(#ededed, rgba(237, 237, 237, 0.2)); } .green7 ul li { margin-top: 0.93333rem; padding: 1.26667rem 0.6rem 0.86667rem; border-radius: 0.8rem; box-shadow: 0 0 0.72rem rgba(34, 120, 95, 0.2); } .green7 ul li h3 { font-size: 0.4rem; font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to top right, #88d3ae, #2daf8b); position: relative; } .green7 ul li h3::before { content: ""; width: 0.85333rem; height: 0.85333rem; background: url(../images/green-zs03.png) no-repeat; background-size: 100%; display: block; position: absolute; left: -0.24rem; bottom: -0.10667rem; } .green7 ul li h3::after { content: ""; width: 0.8rem; height: 0.2rem; background: url(../images/green-jt.png) center no-repeat; background-size: 100%; display: inline-block; vertical-align: middle; margin-left: 0.2rem; } .green7 ul li .price { font-size: 0.54667rem; color: #f45000; margin: 0.13333rem 0 0.33333rem; display: block; } .green7 ul li .price i { font-size: 0.92rem; font-weight: bold; } .green7 ul li .txt { width: 80%; font-size: 0.32rem; color: #666666; line-height: 0.50667rem; } .green7 ul li .pic { margin: 0.8rem 0 0.53333rem; } .green8 { background-color: #29b89a; background-image: linear-gradient(#70c39c, #29b89a); padding: 1.33333rem 0.4rem; } .green8 .title-box::before { background-image: linear-gradient(to bottom right, #72d1ac, rgba(114, 209, 172, 0.2)); } .green8 .text { color: #fff; margin: 0.44rem 0 0.53333rem; } .green9 { padding: 1.4rem 0.4rem 0 0.76rem; } .green9 .title-box { margin-left: 0.46667rem; } .green9 .wenan { width: 100%; background: #2ab89a; background: url(../images/mgreen-bg2.png) center bottom no-repeat #2ab89a; background-size: 100%; border-radius: 0.8rem; padding: 8.13333rem 0 0.66667rem; position: relative; } .green9 .wenan .cs { padding: 0.2rem 0.66667rem; } .green9 .wenan .cs p { background: url(../images/mgreen-cszs.png) left center no-repeat; background-size: 0.28rem; font-size: 0.4rem; color: #fff; padding-left: 0.66667rem; margin: 0.53333rem 0; } .green9 .wenan .cs p strong { font-size: 0.48rem; color: #f56126; -webkit-text-stroke: 0.00667rem #fff; } .green9 .wenan .sft { overflow: hidden; } .green9 .wenan .sft li { width: 33.33%; float: left; text-align: center; } .green9 .wenan .sft li img { width: 2.01333rem; } .green9 .wenan .sft li p { font-size: 0.34667rem; color: #fff; font-weight: bold; padding-top: 0.26667rem; } .green9 .wenan .slogan { width: 0.4rem; font-size: 0.32rem; color: #79f5db; line-height: 1.25; text-align: center; position: absolute; right: 0.4rem; top: 0.2rem; } .green9 .wenan .slogan::before, .green9 .wenan .slogan::after { content: ""; width: 0.25333rem; height: 0.81333rem; background: url(../images/mgreen-tb01.png) center no-repeat; background-size: 100%; display: block; margin: 0.4rem auto; } .green9 .wenan .slogan::after { -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); /*IE*/ filter: FlipV; } .green9 .pic { width: 8.42667rem; background: url(../images/bg-zs.jpg) repeat; border-radius: 0.8rem 0.8rem 0.8rem 0; padding: 0.6rem 0.4rem 0.8rem; position: absolute; left: 0; top: -0.69333rem; box-shadow: 0 0.24rem 0.10667rem rgba(15, 94, 72, 0.2); } .green9 .pic::before { content: ""; width: 0.74667rem; height: 0.74667rem; background: url(../images/bg-zs.jpg) repeat; display: block; position: absolute; left: 0; bottom: -0.66667rem; } .green9 .pic::after { content: ""; width: 0.74667rem; height: 1.06667rem; background: #fff; border-radius: 60px 0 0; display: block; position: absolute; left: 0; bottom: -1.06667rem; box-shadow: 0 0.2rem 0.10667rem -0.06667rem rgba(15, 94, 72, 0.1) inset; } .green10 { padding: 1.2rem 0 0; } .green10 .title-box { margin: 0 0.4rem; } .green10 .title-box h2 span { color: #34bb9f; text-shadow: 0 0.14667rem 0.24rem rgba(30, 133, 109, 0.2); } .green10 .title-box::before { background-image: linear-gradient(#ededed, rgba(237, 237, 237, 0.2)); } .green10 .text { padding: 0.4rem; margin: 0.13333rem 0 0.6rem; } .green10 .swiper-tab3 { background-color: #2daf8b; background-image: linear-gradient(to bottom right, #88d3ae, #2daf8b); padding-bottom: 3.06667rem; } .green10 .swiper-tit ul { overflow: hidden; } .green10 .swiper-tit ul li { width: 50%; background: #dcdcdc; float: left; font-size: 0.53333rem; color: #2daf8b; font-weight: bold; text-align: center; line-height: 1.53333rem; } .green10 .swiper-tit ul .swiper-item-active { background: #2daf8b; color: #ffffff; text-shadow: 0 0.12rem 0.13333rem rgba(15, 94, 72, 0.2); } .green10 .swiper-content { margin: 0; padding: 0.4rem 0.53333rem; } .green10 .swiper-content .swiper-slide { display: none; } .green10 .swiper-content .swiper-slide p { color: #333333; margin: 0.33333rem 0; padding-left: 0.73333rem; position: relative; } .green10 .swiper-content .swiper-slide p::before { content: ""; width: 0.26667rem; height: 0.26667rem; background: #f45000; border-radius: 50%; display: block; position: absolute; left: 0; top: 0.26667rem; } .green10 .swiper-content .swiper-slide-active { display: block; } .green10 .swt-btn { font-size: 0.32rem; } .green10 .swt-btn a strong { font-size: 0.42667rem; } .green10 .swt-btn a::after { display: none; } .green11 { background: #fff; border-radius: 0.8rem 0.8rem 0 0; padding: 0 0.06667rem; margin-top: -0.73333rem; } .green11 ul { position: relative; top: -0.88rem; } .green11 ul li { width: 43%; height: 5.6rem; background: #fff; border-radius: 0.45333rem 2.13333rem 0.45333rem 0.45333rem; float: left; margin: 0 3.5% 0.58667rem; padding: 0.66667rem 0.36rem; box-shadow: 0 0.12rem 0.68rem rgba(26, 123, 96, 0.2); } .green11 ul li span { font-size: 0.85333rem; color: #46b997; font-weight: lighter; margin: 0 0.33333rem; position: relative; } .green11 ul li span::before { content: ""; width: 0.8rem; height: 0.8rem; border: 1px solid #46b997; border-radius: 50%; display: block; position: absolute; right: -0.16rem; top: -0.02667rem; } .green11 ul li strong { font-size: 0.4rem; color: #46b997; margin: 0.46667rem 0 0.29333rem; display: block; } .green11 ul li p { font-size: 0.34667rem; color: #333333; line-height: 0.50667rem; } .green11 ul li p::after { content: ""; width: 0.66667rem; height: 0.08rem; background: #f45000; border-radius: 0.26667rem; display: block; margin-top: 0.34667rem; }