* { padding: 0; margin: 0; list-style: none; } .common-flex { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .common-flex-title { display: flex; flex-direction: column; justify-content: center; align-items: center; } .common-clear-margin { margin-right: 0; margin-left: 0; } .common-clear-padding { padding-right: 0; padding-left: 0; } .common-deco-cirle { width: 8px; height: 8px; background: #a3c85e; border-radius: 4px; display: inline-block; margin-right: 8px; } .common-cfx { width: 32px; height: 4px; background: #7fb63e; margin-bottom: 30px; } .bg-overlay { background-color: rgba(37, 41, 52, 0.7); position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; } /* 生物碳中和区域 */ /* .header { display: flex; justify-content: center; align-items: center; width: 100%; height: 580px; background-image: url(../images/biocarbon-neutral/banner.png); background-repeat: no-repeat; background-size: cover; background-position: top center; } */ .header { display: flex; justify-content: center; align-items: center; width: 100%; height: 580px; background-image: url(../images/biocarbon-neutral/banner.png); background-repeat: no-repeat; background-size: cover; background-position: top center; position: relative; } .header-fb { width: 100%; } .header .title1 { width: 100%; height: 78px; font-size: 75px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: center; color: #666971; line-height: 24px; letter-spacing: 16px; margin-bottom: 8px !important; } .header .title2 { width: 100%; height: 26px; font-size: 25px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: center; color: #666971; line-height: 24px; letter-spacing: 5.2px; margin-bottom: 8px !important; } /* 用得起的无土栽培方式 */ .box1 { width: 63%; height: 526px; background: #ffffff; margin: 0 auto; } .box1 .box1-fb1 { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .box1 .box1-fb1 .box1-title-fb .title1 { width: 319px; height: 32px; font-size: 31px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: center; color: #252934; line-height: 70px; } .box1 .box1-fb1 .box1-title-fb .title2 { text-transform: uppercase; width: 381px; height: 32px; opacity: 0.1; font-size: 40px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: center; color: #252934; line-height: 24px; margin: 0 20px; } .box1 .box1-fb2 { width: 100%; } .box1 .box1-fb2 .ims { display: block; margin-bottom: 20px; } .box1 .box1-fb2 .des { margin-bottom: 20px; } /* 水培牧草 */ .box2 { position: relative; width: 63%; height: 733px; background: #fbfbfb; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; margin: 0 auto; } .box2 .bcirle { width: 100px; height: 100px; position: absolute; top: 56px; right: 119px; } .box2 .box2-fb1 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 49px; } .box2 .box2-fb1 .title1 { width: 256px; height: 32px; font-size: 32px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: left; color: #252934; line-height: 66px; } .box2 .box2-fb1 .title2 { text-transform: uppercase; width: 135px; height: 32px; opacity: 0.1; font-size: 40px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: left; color: #252934; line-height: 24px; } .box2 .box2-fb2 { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .box2 .box2-fb2 .igrass { margin-left: 50px; width: 543px; height: 407px; } .box2 .box2-fb2 .right { width: 704px; height: 336px; background: #ffffff; margin-left: -150px; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; } .box2 .box2-fb2 .right .rl1 { height: 24px; font-size: 24px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: justifyLeft; color: #252934; line-height: 20px; } .box2 .box2-fb2 .right .rl { height: 19px; font-size: 18px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: justifyLeft; color: #737c86; line-height: 20px; } /* 应用优势 */ .box3 { width: 63%; /* height: 789px; */ margin: 0 auto; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; background: #ffffff; padding-left: 49px; padding-right: 49px; } .box3 .box3-fb1 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .box3 .box3-fb1 .title1 { margin-top: 30px; height: 32px; font-size: 32px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: left; color: #252934; line-height: 67px; } .box3 .box3-fb1 .title2 { text-transform: uppercase; height: 32px; opacity: 0.1; font-size: 40px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: left; color: #252934; line-height: 24px; } .box3 .box3-fb2 { width: 100%; /* height: 221px; */ box-shadow: rgba(210, 206, 206, 0.3) 0 0 16px 0; } .box3 .box3-fb2 .xt { height: 221px !important; display: flex; flex-direction: column; /* justify-content: space-around; */ justify-content: center; align-items: center; width: 100%; height: 100%; box-sizing: border-box; } .box3 .box3-fb2 .xt .xt1 { /* width: 48px; */ /* height: 24px; */ height: 60px; line-height: 60px; font-size: 24px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: bold; text-align: center; color: #252934; } .box3 .box3-fb2 .xt .xt3 { /* width: 176px; */ /* height: 15px; */ /* line-height: 40px; */ font-size: 16px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular; font-weight: 400; text-align: center; color: #737c86; } /* 水培青绿饲料的价值 */ .box4 { width: 63%; height: 439px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .box4 .box4-fb .box4-fb1 .title1 { width: 288px; height: 32px; font-size: 32px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: left; color: #252934; line-height: 80px; } .box4 .box4-fb .box4-fb1 .title2 { width: 134px; height: 32px; opacity: 0.1; font-size: 40px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold; font-weight: 700; text-align: left; color: #252934; line-height: 24px; } .box4 .box4-fb .p1 { font-size: 16px; font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular; font-weight: 400; text-align: left; color: #737c86; line-height: 24px; } @media screen and (max-width: 1820px) { .box2 { height: 100%; } .box2 .box2-fb2 .right { margin-left: 50px; } } @media screen and (max-width: 1275px) { .box2 .box2-fb2 .igrass { width: 450px; height: 360px; } .box2 .bcirle { top: 14px; right: 13px; } .box2 .box2-fb2 .right { width: 100%; } } @media screen and (max-width: 795px) { .box2 { width: 100%; } .header .title1 { font-size: 70px; } } @media screen and (max-width: 595px) { .header { height: 231px; } .header .title1 { font-size: 27px; line-height: 92px; letter-spacing: 6px; } .header .title2 { font-size: 16px; display: none; } /* 用得起的无土栽培方式 */ .box1 { width: 100%; height: 650px; } .box1 .box1-fb1 .box1-title-fb .title1 { width: 260px; font-size: 26px; } .box1 .box1-fb1 .box1-title-fb .title2 { width: 259px; height: 32px; font-size: 27px; } /* 水培牧草 */ .box2 .bcirle { width: 60px; height: 60px; top: 8px; right: 8px; } .box2 .box2-fb1 .title1 { font-size: 26px; line-height: 70px; } .box2 .box2-fb1 .title2 { font-size: 27px; } .box2 .box2-fb2 .igrass { width: 300px; height: 280px; } .box2 { width: 100%; height: 733px; } .box2 .box2-fb2 { width: 100%; display: flex; justify-content: center; align-items: center; } .box2 .box2-fb2 .igrass { margin-left: 0; } .box2 .box2-fb2 .right { margin-left: 0; } .box2 .box2-fb2 .right .rl1 { line-height: 26px; } /* 应用优势 */ .box3 { width: 100%; } .box3 .box3-fb1 .title1 { line-height: 68px; font-size: 26px; } .box3 .box3-fb1 .title2 { font-size: 27px; } /* 水培青绿饲料的价值 */ .box4 { width: 100%; padding: 0 30px; } .box4 .box4-fb .box4-fb1 .title1 { font-size: 26px; } .box4 .box4-fb .box4-fb1 .title2 { font-size: 27px; } } @media screen and (max-width: 414px) { .box3 .box3-fb2 .xt { height: 127px !important; } .box3 .box3-fb2 .xt .xt1 { line-height: 50px; font-size: 18px; } .common-cfx { margin-bottom: 11px; } .box3 .box3-fb2 .xt .xt3 { font-size: 13px; } } @media screen and (max-width: 375px) { .box3 .box3-fb2 .xt { height: 111px !important; } .box3 .box3-fb2 .xt .xt1 { line-height: 31px; font-size: 16px; } .common-cfx { margin-bottom: 19px; } .box3 .box3-fb2 .xt .xt3 { font-size: 13px; } }