@charset "utf-8"; .greenpage { width: 100%; background: url(../images/green-bg.jpg) center top no-repeat #04242d; background-size: 100%; padding: 175px 0 0; } .greenpage .header { background-color: #29b89a; background-image: linear-gradient(#29b89a, #7ac69c); box-shadow: 0 0 30px #75c59c; } .greenpage .header .nav li a { color: #16634e; } .greenpage .header .nav li:hover a { color: #ffffff; } .greenpage .header .tel { color: #16634e; } .green-title, .green-box { width: 1800px; margin: 0 auto; } .green-title img { width: 100%; } .green-box { background: url(../images/bg-zs.jpg) repeat; } .green { padding: 150px 5.55% 0; position: relative; overflow: hidden; } .green .yd-zs { position: absolute; left: 6%; top: 45px; } .green .yd-zs i, .green .yd-zs i::before, .green .yd-zs i::after { width: 8px; height: 8px; background: #d2d2d2; border-radius: 50%; margin: 10px; display: block; position: relative; } .green .yd-zs i::before { content: ""; position: absolute; left: 8px; top: -10px; } .green .yd-zs i::after { content: ""; position: absolute; top: -10px; right: 8px; } .green .swt-btn { width: 510px; height: 89px; font-size: 20px; color: #fff; text-align: center; line-height: 89px; display: block; margin: 0 auto; position: relative; z-index: 1; } .green .swt-btn::before, .green .swt-btn::after { content: ""; box-shadow: 0 10px 7px 14px #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 strong { font-size: 26px; } .green .swt-btn a { width: 100%; height: 100%; background: #f45000; color: #fff; display: block; } .green .swt-btn a::after { content: ""; width: 52px; height: 37px; background: url(../images/finger.png) no-repeat; background-size: 100%; display: inline-block; vertical-align: middle; margin-left: 25px; } .green .swt-btn:hover::before, .green .swt-btn:hover::after { box-shadow: 0 10px 7px 14px #71c9a5; } .green .swt-btn:hover a { background: #71c9a5; } .green .tit { position: relative; z-index: 1; padding-left: 140px; } .green .tit::before { content: "Green"; width: 100%; font-size: 141px; font-family: "ProximaSansBlack"; text-transform: uppercase; font-style: italic; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(#dff7ec, rgba(223, 247, 236, 0.2)); display: block; position: absolute; left: 120px; top: -80px; z-index: -1; } .green .tit .num { font-size: 118px; color: #9ddb98; letter-spacing: -5px; -webkit-text-stroke: 2px #fff; display: block; position: absolute; left: -5px; top: 50%; margin-top: -59px; } .green .tit h2 { font-size: 20px; color: #333333; } .green .tit h2 span { font-size: 50px; color: #3a986f; font-weight: bold; letter-spacing: 4px; margin-bottom: 20px; display: block; } .green .text { margin-top: 38px; font-size: 16px; color: #666666; line-height: 38px; } .green .text p { margin: 18px 0 0; } .green1 { background: url(../images/green-bg02.jpg) right center no-repeat #ffffff; padding-bottom: 145px; } .green1 .text { width: 60%; } .green2 { background-color: #2daf8b; background-image: linear-gradient(to bottom right, #88d3ae, #2daf8b); padding-bottom: 10px; } .green2 .yd-zs i, .green2 .yd-zs i::before, .green2 .yd-zs i::after { background: #fff; } .green2 .tit::before { opacity: 0.15; } .green2 .tit h2 { color: #fff; } .green2 .tit h2 span { color: #fff; text-shadow: 0 11px 10px #26a17f; } .green2 .text { width: 400px; } .green2 .text p { color: #155846; } .green2 .one-step { width: 729px; height: 227px; position: absolute; right: 330px; bottom: 0; } .green2 .one-step .title { width: 100%; height: 100%; background: url(../images/green-bg01.png) center no-repeat; background-size: 100%; font-size: 25px; color: #155846; text-align: center; padding: 22% 0 0; position: relative; z-index: 1; } .green2 .one-step .title span { font-weight: bold; padding-left: 25px; } .green2 .one-step li { position: absolute; } .green2 .one-step .l1 { left: -80px; bottom: 42px; } .green2 .one-step .l2 { left: 0; bottom: 146px; } .green2 .one-step .l3 { left: 260px; bottom: 242px; } .green2 .one-step .l4 { right: 130px; bottom: 205px; } .green2 .one-step .l5 { right: -164px; bottom: 146px; } .green2 .one-step .l6 { right: -180px; bottom: 42px; } .green2 .one-step li span { width: 34px; height: 34px; background: #fff; border-radius: 50%; font-size: 31px; color: #4bba97; text-indent: -2px; line-height: 35px; font-weight: bold; display: block; position: absolute; bottom: -10px; } .green2 .one-step li span::before { content: ""; width: 1px; height: 70px; background: #a9decf; display: block; position: absolute; top: 17px; } .green2 .one-step li p { font-size: 16px; color: #fff; font-weight: bold; line-height: 26px; border: 1px solid #fff; border-radius: 27px; padding: 13px; } .green2 .one-step .pl span { right: -6px; } .green2 .one-step .pl span::before { right: -1px; } .green2 .one-step .pl p { padding: 13px 28px 13px 15px; } .green2 .one-step .pr span { left: -6px; } .green2 .one-step .pr span::before { left: -1px; } .green2 .one-step .pr p { padding: 13px 15px 13px 28px; } .green3 { background: url(../images/green-bg04.jpg) center no-repeat; background-size: cover; padding: 60px 0; text-align: center; } .green4 { background: #eeeeee; padding: 205px 5.55% 139px; } .green4 .left { width: 49.5%; position: absolute; left: 86px; top: 86px; } .green4 .right { width: 39.5%; float: right; position: relative; } .green4 .tit::before { display: none; } .green4 .tit h2 span, .green5 .tit h2 span { color: #2caf8c; text-shadow: 0 11px 10px rgba(38, 161, 127, 0.2); } .green4 .yd-zs { left: 0; top: -120px; } .green4 .yd-zs i, .green4 .yd-zs i::before, .green4 .yd-zs i::after { background: #9ddb98; } .green4 .text p, .green5 .text p { color: #999999; } .green5 { background: #fff; padding: 90px 5.55% 40px; overflow: visible; z-index: 1; } .green5::before { content: ""; background: url(../images/green-bg03.png) right center no-repeat; position: absolute; left: 0; right: -26px; top: 0; bottom: 0; z-index: -1; } .green5 .left { width: 49%; float: left; padding: 60px 0 0; } .green5 .tit::before { background-image: linear-gradient(#ededed, rgba(237, 237, 237, 0.2)); } .green5 .right { width: 49.47%; float: right; position: relative; z-index: 1; } .green5 .right .wl-one { margin-left: -5.2%; } .green5 .right .wl-one li { width: 14.363%; float: left; margin-left: 5.2%; transition: all .3s; } .green5 .right .wl-one li img { border-radius: 50%; transition: all .3s; } .green5 .right .wl-one li p { font-size: 18px; color: #2caf8c; font-weight: bold; text-align: center; margin-top: 16px; transition: all .3s; } .green5 .right .wl-one li:hover { transform: translateY(-10px); } .green5 .right .wl-one li:hover img { box-shadow: 0 15px 10px -5px #ccc; } .green5 .right .wl-one li:hover p { color: #f45000; } .green5 .right .wl-two { padding: 168px 5.5% 0 6%; margin-top: 55px; position: relative; } .green5 .right .wl-two img { width: 783px; position: absolute; right: 0; top: 0; } .green5 .right .wl-two p { width: 33.33%; font-size: 18px; color: #f45000; font-weight: bold; text-align: center; float: left; } .green5 .right .wl-two p span { margin-bottom: 14px; display: block; } .green5 .right .wl-two .p2 { margin-top: 16px; } .green5 .right .wl-two .p3 { margin-top: 26px; } .green6 { background-color: #2daf8b; background-image: linear-gradient(to bottom right, #88d3ae, #2daf8b); padding: 55px 5.55%; } .green6 .left { width: 44.54%; float: left; } .green6 .right { width: 44.54%; float: right; margin-right: 55px; } .green6 h3 { font-size: 26px; color: #ffffff; font-weight: bold; } .green6 .text { color: #e2fff1; margin-top: 22px; } .green6 .left .swiper-tab { margin-top: 30px; position: relative; z-index: 1; } .green6 .left .swiper-tit { overflow: hidden; margin-left: -0.43%; } .green6 .left .swiper-tit .swiper-item { width: 32.904%; background: #d2d2d2; float: left; font-size: 22px; color: #ffffff; font-weight: bold; text-align: center; line-height: 44px; margin-left: 0.43%; cursor: pointer; } .green6 .left .swiper-tab .swiper-item-active { color: #3ab491; background: #ffffff; } .green6 .left .swiper-content .swiper-slide { width: 100%; display: none; } .green6 .left .swiper-content .swiper-slide-active { display: block; } .green6 .swiper-content .txt { background: #fff; font-size: 18px; color: #238b6d; text-align: center; line-height: 30px; padding: 13px 0; position: relative; } .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 { width: auto; max-width: none; } .green6 .swiper-content .txt::before, .green6 .swiper-content .txt::after { content: ""; box-shadow: 0 10px 7px 14px #136952; position: absolute; left: 5%; right: 5%; top: 50%; bottom: 50%; z-index: -1; opacity: 0.5; } .green6 .swiper-content .txt::before { transform: rotate(-4deg); } .green6 .swiper-content .txt::after { transform: rotate(4deg); } .green6 .swiper-content ul { overflow: hidden; padding: 45px 0 0; } .green6 .swiper-content li { width: 33.33%; float: left; text-align: center; } .green6 .swiper-content li p a { font-size: 18px; color: #e2fff1; font-weight: bold; padding-top: 10px; display: block; } .green6 .swiper-content li:hover p a { color: #e55313; } .green6 .right .swiper-content { margin-top: 50px; position: relative; z-index: 1; } .green6 .right .swiper-content ul { padding: 69px 0 0; } .green7 { padding: 60px 0; } .green7 h2 { font-size: 40px; color: #2daf8b; font-weight: bold; text-align: center; text-shadow: 0 11px 10px rgba(38, 161, 127, 0.2); } .green7 .text { color: #666666; text-align: center; padding: 0 12%; } .green7 .scx-pk { margin-top: 75px; } .green7 .scx-pk li { width: 49%; float: left; } .green7 .scx-pk li .title { font-size: 30px; } .green7 .scx-pk li .title h3 { color: #2daf8b; font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to top right, #88d3ae, #2daf8b); display: inline; position: relative; } .green7 .scx-pk li .title h3::before { content: ""; width: 64px; height: 64px; background: url(../images/green-zs03.png) no-repeat; background-size: 100%; display: block; position: absolute; left: -18px; bottom: -10px; } .green7 .scx-pk li .title span { background: url(../images/green-jt.png) left center no-repeat; color: #f45000; padding-left: 74px; display: inline; margin-left: 8px; } .green7 .scx-pk li .title span i { font-size: 50px; font-weight: bold; } .green7 .scx-pk li .txt { font-size: 16px; color: #666666; line-height: 38px; margin: 22px 0; } .green7 .scx-pk li .pic { text-align: center; } .green7 .scx-pk li .title, .green7 .scx-pk li .txt { padding: 0 0 0 115px; } .green7 .scx-pk .right .pic { margin-top: 50px; } .green7 .swt-btn { top: -77px; } .green8 { background-color: #2daf8b; background-image: linear-gradient(to bottom right, #88d3ae, #2daf8b); padding: 80px 5.55%; border-radius: 300px 300px 0 0; } .green8 h2 { font-size: 40px; color: #fff; text-align: center; text-shadow: 0 11px 10px rgba(38, 161, 127, 0.2); } .green8 h2 span { color: #fff; font-size: 50px; font-weight: bold; margin-right: 28px; display: inline; } .green8 .text { color: #b0ffe6; text-align: center; } .green8 .ul { margin-top: 45px; } .green8 .ul dl { width: 21.685%; float: left; margin-left: 4.42%; } .green8 .ul dl:first-child { margin: 0; } .green8 .ul dl dd { border: 2px solid #fff; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 12px 9px #3a986f; } .green8 .ul dl dd p { font-size: 20px; color: #ffffff; line-height: 42px; font-weight: bold; text-align: center; position: absolute; left: 0; right: 0; bottom: 0; } .green8 .ul dl dt { font-size: 16px; color: #333333; line-height: 30px; text-align: center; padding: 30px 6% 0; } .green9 { background: #fff; padding: 0; } .green9 .tit::before { background-image: linear-gradient(#ededed, rgba(237, 237, 237, 0.2)); } .green9 .tit h2 a { font-size: 50px; color: #2caf8c; font-weight: bold; letter-spacing: 4px; margin-bottom: 20px; text-shadow: 0 11px 10px rgba(38, 161, 127, 0.4); display: block; } .green9 .tit p { font-size: 20px; color: #333333; } .green9 .yd-zs i, .green9 .yd-zs i::before, .green9 .yd-zs i::after, .green10 .yd-zs i, .green10 .yd-zs i::before, .green10 .yd-zs i::after { background: #9ddb98; } .green9 .fl, .green9 .fr { width: 50%; } .green9 .fl { padding: 120px 0 0 5.55%; position: relative; } .green9 .fl::before { content: ""; width: 98px; height: 82px; background: url(../images/green-zs01.png) center no-repeat; background-size: 100%; display: block; position: absolute; right: 26px; top: 50%; } .green9 .fl .cs { width: 515px; margin: 55px 10px 45px; overflow: hidden; position: relative; } .green9 .fl .cs::before, .green9 .fl .cs::after { content: ""; background: #e5e5e5; position: absolute; } .green9 .fl .cs::before { width: 1px; left: 50%; top: 0; bottom: 0; } .green9 .fl .cs::after { height: 1px; left: 0; right: 0; top: 50%; } .green9 .fl .cs p { width: 50%; float: left; font-size: 16px; color: #999999; font-weight: bold; } .green9 .fl .cs p span { font-size: 24px; color: #f45000; font-weight: normal; } .green9 .fl .cs .p1 { padding: 0 0 20px; } .green9 .fl .cs .p2 { padding: 0 0 20px 10%; } .green9 .fl .cs .p3 { padding: 20px 0 0; } .green9 .fl .cs .p4 { padding: 20px 0 0 10%; } .green9 .fl .sft { position: relative; margin: 0 10px; padding-left: 105px; } .green9 .fl .sft dd { font-size: 18px; color: #999999; font-weight: bold; position: absolute; left: 0; top: 32%; } .green9 .fl .sft dt { overflow: hidden; } .green9 .fl .sft dt p { width: 18.1%; float: left; margin-left: 10%; text-align: center; } .green9 .fl .sft dt p:first-child { margin-left: 0; } .green9 .fl .sft dt p span { font-size: 18px; color: #2daf8b; font-weight: bold; display: block; margin-top: 12px; } .green9 .fr { position: relative; } .green9 .fr p { background: #2daf8b; font-size: 16px; color: #fff; line-height: 30px; padding: 22px 10%; position: absolute; left: 0; right: 0; bottom: 0; } .green10 { background: url(../images/bg-zs.jpg) repeat; padding: 127px 5.55% 80px; border-radius: 0 0 88px 88px; position: relative; z-index: 1; } .green10 .fl, .green10 .fr { width: 50%; } .green10 .swiper-tit { background: #e5e5e5; overflow: hidden; } .green10 .swiper-tit .swiper-item { width: 50%; font-size: 30px; color: #2daf8b; font-weight: bold; text-align: center; line-height: 90px; float: left; cursor: pointer; } .green10 .swiper-tit .swiper-item-active { background: #2daf8b; color: #fff; text-shadow: 0 13px 8px rgba(15, 94, 72, 0.2); } .green10 .swiper-content { height: 418px; background-color: #2daf8b; background-image: linear-gradient(to bottom right, #88d3ae, #2daf8b); } .green10 .swiper-content .swiper-slide { padding: 60px 10%; display: none; } .green10 .swiper-content .swiper-slide-active { display: block; } .green10 .swiper-content .swiper-slide p { font-size: 16px; color: #333333; line-height: 38px; margin: 14px 0; padding-left: 25px; position: relative; } .green10 .swiper-content .swiper-slide p::before { content: ""; width: 8px; height: 8px; background: #f45000; border-radius: 50%; display: block; position: absolute; left: 0; top: 15px; } .green10 .fr { text-align: right; padding: 110px 0 0 55px; position: relative; } .green10 .fr::before { content: ""; width: 98px; height: 82px; background: url(../images/green-zs01.png) center no-repeat; background-size: 100%; display: block; position: absolute; left: 26px; bottom: 0; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); /*IE*/ filter: FlipH; } .green10 .yd-zs { left: auto; right: 1.5%; top: -10px; } .green10 .tit { display: inline-block; } .green10 .tit::before { background-image: linear-gradient(#ededed, rgba(237, 237, 237, 0.2)); } .green10 .tit, .green10 .fr .text { text-align: left; } .green10 h2 span { text-shadow: 0 11px 10px rgba(38, 161, 127, 0.4); } .green10 .fr .text { color: #999999; } .green10 .swt-btn { width: auto !important; display: inline-block; margin: 104px 0 0; } .green10 .swt-btn a { padding: 0 30px; } .green10 .swt-btn a::after { display: none; } .green11 { background-color: #2daf8b; background-image: linear-gradient(to bottom right, #88d3ae, #2daf8b); padding-top: 146px; margin-top: -80px; } .green11 h2 { font-size: 40px; text-align: center; color: #fff; text-shadow: 0 9px 7px rgba(38, 161, 127, 0.4); } .green11 h2::after { content: ""; width: 100%; height: 36px; background: url(../images/green-zs02.png) center no-repeat; display: block; margin: 48px 0 38px; } .green11 ul { margin-left: -4.44%; padding: 0 0 80px; position: relative; overflow: hidden; } .green11 ul li { width: 15.56%; height: 293px; background: url(../images/green-fwbg.png) center no-repeat; background-size: 100%; float: left; margin-left: 4.44%; text-align: center; color: #ffffff; padding: 21px 0 19px; position: relative; } .green11 ul li::after { content: ""; width: 100px; height: 0; background: #30493c; border-radius: 55px; display: block; position: absolute; left: 50%; margin-left: -50px; bottom: -40px; box-shadow: 0 0 5px 2px #30493c; opacity: 0.15; } .green11 ul li strong { font-size: 26px; text-align: center; } .green11 ul li p { font-size: 16px; line-height: 30px; padding: 0 20%; } .green11 ul li span { margin: 20px 0 16px; display: block; position: relative; } .green11 ul li span::before { content: ""; background: #fff; position: absolute; left: -50%; right: -50%; top: 0; bottom: 0; } .green11 ul li:first-child span::before { left: 0; } .green11 ul li img { border-radius: 70px; box-shadow: 0 11px 10px rgba(15, 98, 75, 0.42); position: relative; z-index: 5; } @media screen and (max-width: 1900px) { .green5::before { right: 0; } } @media screen and (max-width: 1800px) { .green-title, .green-box { width: 1600px; } .green1 { background-position: 180% center; } .green2 .one-step { right: 220px; } .green4 { padding: 150px 5.55% 80px; } .green4 .tit h2 { line-height: 60px; } .green5::before { background-size: 50%; } .green5 .right .wl-one li { width: 14.8%; } .green9 .fr { padding-bottom: 70px; } .green10 .swiper-content { height: 456px; } .green11 ul li { height: 264px; padding: 18px 0 12px; background-size: 100% 100%; } .green11 ul li span { margin: 17px 0 16px; } .green11 ul li p{padding: 0 18%;} } @media screen and (max-width: 1600px) { .green-title, .green-box { width: 1400px; } .green .yd-zs { top: 30px; } .green .swt-btn { width: 420px; height: 77px; font-size: 16px; line-height: 77px; } .green .swt-btn a::after { width: 45px; margin-left: 15px; } .green .swt-btn strong { font-size: 22px; } .green .tit h2,.green9 .tit p { font-size: 17px; } .green .tit h2 span,.green7 h2,.green9 .tit h2 a { font-size: 38px; } .green .tit { padding-left: 110px; } .green .tit::before { font-size: 110px; left: 90px; top: -60px; } .green .tit .num { font-size: 95px; margin-top: -48px; letter-spacing: -5px; } .green .text { font-size: 15px; line-height: 32px; } .green1 { background-position: -80% center; padding: 120px 5.55% 100px; } .green1 .tit { padding-left: 100px; } .green2 { padding: 120px 5.55% 20px; } .green2 .one-step { width: 620px; height: 193px; right: 180px; } .green2 .one-step .title { font-size: 20px; } .green2 .one-step li p { font-size: 14px; } .green2 .one-step .pl p { padding: 10px 28px 10px 15px; } .green2 .one-step .pr p { padding: 10px 15px 10px 28px; } .green2 .one-step li span { width: 30px; height: 30px; font-size: 25px; text-indent: 0; } .green2 .one-step .l3 { left: 170px; } .green2 .one-step .l4 { right: 100px; } .green2 .one-step .l5 { right: -140px; } .green2 .one-step .l6 { right: -165px; } .green3 { padding: 40px 4%; } .green4 { padding: 100px 5.55%; } .green4 .tit h2 { line-height: 1; } .green4 .yd-zs { top: -85px; } .green4 .left { width: 48%; left: 5.55%; top: 66px; } .green5 { padding: 60px 5.55%; } .green5 .right { padding-top: 20px; } .green5 .right .wl-one li p { font-size: 16px; } .green5 .right .wl-two p { font-size: 16px; } .green5 .right .wl-two p span { margin-bottom: 10px; } .green5 .right .wl-two { padding-top: 130px; } .green6 h3 { font-size: 23px; } .green6 .left .swiper-tit .swiper-item { font-size: 18px; } .green6 .swiper-content .txt { font-size: 16px; line-height: 24px; } .green6 .swiper-content li p a { font-size: 16px; } .green6 .swiper-content li img { width: 80%; } .green7 .scx-pk li .title { font-size: 25px; } .green7 .scx-pk li .title span i { font-size: 40px; } .green7 .scx-pk li .txt { font-size: 15px; } .green8 { border-radius: 200px 200px 0 0; } .green8 h2 { font-size: 28px; } .green8 h2 span { font-size: 38px; margin-right: 20px; } .green8 .ul dl dd p { font-size: 18px; } .green8 .ul dl dt { font-size: 15px; line-height: 28px; padding: 20px 0 0; } .green9 .fl::before, .green10 .fr::before { width: 80px; right: 20px; } .green9 .fl .cs { width: 480px; } .green9 .fl .cs p { font-size: 15px; } .green9 .fl .cs p span { font-size: 20px; } .green9 .fl .sft { padding-left: 90px; } .green9 .fl .sft dt p span { font-size: 16px; } .green9 .fl .sft dd { font-size: 16px; } .green9 .fr p { font-size: 15px; line-height: 28px; } .green10 .swiper-content { height: 374px; } .green10 .yd-zs { top: -10px; } .green10 .fr { padding: 90px 0 0 55px; } .green10 .swiper-tit .swiper-item { font-size: 25px; line-height: 80px; } .green10 .swiper-content .swiper-slide { padding: 40px 10%; } .green10 .swiper-content .swiper-slide p { font-size: 15px; line-height: 32px; } .green10 .swiper-content .swiper-slide p::before { top: 12px; } .green10 .swt-btn { margin: 78px 0 0; } .green11 h2 { font-size: 28px; } .green11 ul li{height: 226px;} .green11 ul li strong { font-size: 22px; } .green11 ul li p { font-size: 15px; line-height: 24px; padding: 0 10%; } .green11 ul li span { margin: 12px 0; } } @media screen and (max-width: 1400px) { .green-title, .green-box { width: 1200px; } .green1 .text { width: 80%; } .green2 { padding-bottom: 340px; } .green2 .text { width: 100%; } .green2 .one-step { right: 27%; } .green4 { padding-bottom: 50px; } .green4 .left { width: 44%; top: 90px; } .green4 .right { width: 46%; } .green5 .right { padding-top: 60px; } .green5 .right .wl-two { padding-top: 115px; } .green7 .scx-pk li .title, .green7 .scx-pk li .txt { padding: 0; text-align: center; } .green9 .fl .cs { width: 400px; } .green9 .fl .cs p span { font-size: 18px; } .green9 .fr { padding-bottom: 110px; } .green10 .swiper-content { height: 406px; } .green11 ul li { height: 191px; padding: 12px 0 10px; } .green11 ul li strong { font-size: 18px; } .green11 ul li p { font-size: 14px; line-height: 20px; } } @media screen and (max-width: 1200px) { .green-title, .green-box { width: 1000px; } .green .swt-btn { width: 350px; height: 66px; font-size: 14px; line-height: 66px; } .green .swt-btn a::after { width: 36px; height: 27px; margin-left: 10px; } .green .swt-btn strong { font-size: 18px; } .green .tit h2,.green9 .tit p { font-size: 15px; } .green .tit h2 span, .green7 h2,.green9 .tit h2 a { font-size: 30px; margin-bottom: 15px; } .green .tit { padding-left: 88px; } .green .tit::before { font-size: 88px; left: 80px; top: -50px; } .green .tit .num { font-size: 80px; margin-top: -38px; } .green .text { font-size: 14px; line-height: 28px; } .green1 { background-position: -40% center; padding: 120px 5.55% 70px; } .green1 .tit { padding-left: 80px; } .green1 .text { width: 100%; } .green2 .one-step { right: 23%; } .green4 .left { top: 100px; } .green5 .right .wl-one li p { font-size: 14px; margin-top: 10px; } .green5 .right .wl-two { padding-top: 95px; } .green5 .right .wl-two p { font-size: 14px; } .green6 h3 { font-size: 20px; } .green6 .left .swiper-tit .swiper-item { font-size: 17px; } .green6 .swiper-content .txt { font-size: 14px; line-height: 20px; padding: 10px 0; } .green6 .swiper-content ul { padding-top: 30px; } .green6 .swiper-content li p a { font-size: 14px; } .green6 .right .swiper-content ul { padding-top: 53px; } .green7 .scx-pk li .title { font-size: 20px; } .green7 .scx-pk li .title h3::before { width: 55px; height: 55px; } .green7 .scx-pk li .title span { background-size: 40px; padding-left: 50px; } .green7 .scx-pk li .title span i { font-size: 30px; } .green7 .scx-pk li .txt { font-size: 14px; } .green7 .swt-btn { top: -30px; } .green8 { border-radius: 100px 100px 0 0; } .green8 h2 span { font-size: 30px; margin-right: 12px; } .green8 .ul dl dd p { font-size: 16px; } .green8 .ul dl dt { font-size: 14px; line-height: 26px; padding: 15px 0 0; } .green9 .fl .cs { width: 350px; margin: 40px 0; } .green9 .fl .cs p { font-size: 14px; } .green9 .fl .cs p span { font-size: 16px; } .green9 .fl .sft { padding-left: 75px; margin: 0; } .green9 .fl .sft dd { font-size: 14px; } .green9 .fl .sft dt p span { font-size: 14px; margin-top: 8px; } .green9 .fr { padding-bottom: 120px; } .green9 .fr p { font-size: 14px; } .green10 { padding: 80px 5.55%; } .green10 .swiper-tit .swiper-item { font-size: 20px; line-height: 60px; } .green10 .swiper-content { height: 388px; } .green10 .swiper-content .swiper-slide { padding: 15px 10%; } .green9 .fl::before, .green10 .fr::before { width: 60px; right: 10px; } .green10 .fr { padding: 90px 0 0 45px; } .green11 ul { margin-left: -2.5%; } .green11 ul li { width: 17.5%; height: 180px; margin-left: 2.5%; padding: 12px 0 7px; } .green11 ul li strong { font-size: 17px; } }