* { padding: 0; margin: 0; list-style: none; } .common-flex { display: flex; flex-direction: column; justify-content: center; align-items: center; } .deco { width: 10px; height: 10px; background: #ffffff; border: 3px solid #1890ff; border-radius: 5px; display: inline-block; margin-right: 10px; } .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/government-regulation/18.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: 639px; */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; /* background-image: url(../images/government-regulation/1.png); background-repeat: no-repeat; background-size: cover; background-position: top center; */ margin: 0 auto; } .box1 .box1-fb { width: 100%; margin-top: 86.9958px; } .box1 .box1-fb .title1 { width: 100%; height: 48px; font-size: 48px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: center; color: #24252e; line-height: 24px; letter-spacing: 9.6px; } .box1 .box1-fb .title2 { text-transform: uppercase; width: 100%; 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-top: -31px; } .box1 .box1-img { width: 1200px; } /* 牲畜电子身份区域 */ .box2 { width: 63%; height: 682px; background: #fbfbfb; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .box2 .box2-img { width: 426px; height: 426px; } .box2 .box2-lb { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 16px !important; } .box2 .box2-lb .l11 { width: 230px; height: 36px; font-size: 33px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: left; color: #a3c85e; letter-spacing: 1.8px; margin-bottom: 49.0008px; } .box2 .box2-lb .xl { width: 230px; height: 24px; font-size: 19px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: left; color: #24252e; letter-spacing: 1.2px; margin-bottom: 39.0048px; } /* 无纸化检疫 */ .box3 { width: 63%; height: 723px; background: #ffffff; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .box3 .box3-img { width: 426px; height: 426px; } .box3 .box3-lb { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 16px !important; } .box3 .box3-lb .l11 { width: 230px; height: 36px; font-size: 33px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: left; color: #a3c85e; letter-spacing: 1.8px; margin-bottom: 49.0008px; } .box3 .box3-lb .xl { width: 230px; height: 24px; font-size: 19px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: left; color: #24252e; letter-spacing: 1.2px; margin-bottom: 39.0048px; } /* 统计管理 */ .box4 { width: 63%; height: 682px; background: #fbfbfb; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .box4 .box4-img { width: 426px; height: 426px; } .box4 .box4-lb { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 16px !important; } .box4 .box4-lb .l11 { width: 230px; height: 36px; font-size: 33px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: left; color: #a3c85e; letter-spacing: 1.8px; margin-bottom: 49.0008px; } .box4 .box4-lb .xl { width: 230px; height: 24px; font-size: 19px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: left; color: #24252e; letter-spacing: 1.2px; margin-bottom: 39.0048px; } /* 疫情预警防控 */ .box5 { width: 63%; height: 800px; background: #ffffff; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .box5 .box5-img { width: 426px; height: 426px; } .box5 .box5-lb { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 16px !important; } .box5 .box5-lb .l11 { width: 230px; height: 36px; font-size: 33px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: left; color: #a3c85e; letter-spacing: 1.8px; margin-bottom: 49.0008px; } .box5 .box5-lb .xl { width: 230px; height: 24px; font-size: 19px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: left; color: #24252e; letter-spacing: 1.2px; margin-bottom: 39.0048px; } /* 媒体查询 */ @media screen and (max-width: 1365px) { .box1 { width: 100%; height: auto; } .box1 .box1-img { width: 100%; } .box2 { width: 100%; height: auto; padding: 60px 0; } .box3 { width: 100%; height: auto; padding: 60px 0; } .box4 { width: 100%; height: auto; padding: 60px 0; } } /* @media screen and (max-width: 1055px) { .box1 .box1-fb .title2 { line-height: 34px; } .box1 { height: 489px; } .box2 { width: 100%; } .box2 .box2-img { width: 308px; height: 308px; } .box3 { width: 100%; } .box3 .box3-img { width: 308px; height: 308px; } .box4 { width: 100%; } .box4 .box4-img { width: 308px; height: 308px; } .box5 { width: 100%; } .box5 .box5-img { width: 308px; height: 308px; } } */ @media screen and (max-width: 914px) { .box1 .box1-fb .title1 { font-size: 35px; line-height: 35px; } .box1 .box1-fb .title2 { display: none; } .box1 { height: 429px; } } @media screen and (max-width: 595px) { .header { height: 231px; } .header .title1 { font-size: 30px; line-height: 92px; } .header .title2 { font-size: 16px; display: none; } .box1 { width: 100%; height: auto; } .box1 .box1-fb { margin-top: 13px; } .box1 .box1-fb .title1 { font-size: 23px; letter-spacing: 5px; margin: 20px 0 10px 0; } .box1 .box1-fb .title2 { display: none; } .box1 .box1-img { width: 100%; } /* 牲畜电子身份区域 */ .box2 { width: 100%; height: auto; padding: 60px 0; } .box2 .box2-img { width: 300px; height: 300px; margin: 30px 0; } .box2 .box2-lb .l11 { margin-bottom: 28.0008px; width: 182px; font-size: 23px; } .box2 .box2-lb .xl { margin-bottom: 20.0048px; width: 182px; font-size: 15px; } /* 无纸化检疫 */ .box3 { width: 100%; height: auto; padding: 60px 0; } .box3 .box3-img { width: 300px; height: 300px; } .box3 .box3-lb .l11 { margin-bottom: 28.0008px; width: 182px; font-size: 23px; } .box3 .box3-lb .xl { margin-bottom: 20.0048px; width: 182px; font-size: 15px; } /* 统计管理 */ .box4 { width: 100%; height: auto; padding: 60px 0; } .box4 .box4-img { width: 300px; height: 300px; margin: 30px 0; } .box4 .box4-lb .l11 { margin-bottom: 28.0008px; width: 182px; font-size: 23px; } .box4 .box4-lb .xl { margin-bottom: 20.0048px; width: 182px; font-size: 15px; } /* 疫情预警防控 */ .box5 { width: 100%; height: auto; padding: 60px 0; } .box5 .box5-img { width: 300px; height: 300px; } .box5 .box5-lb .l11 { margin-bottom: 28.0008px; width: 182px; font-size: 23px; } .box5 .box5-lb .xl { margin-bottom: 20.0048px; width: 182px; font-size: 15px; } }