.in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } .content { width: 100%; position: relative; z-index: 3; background-color: white; padding-top: 0.33rem; } .content .box { width: 100%; } .content .box .nav { margin-left: 1.9575rem; } .content .box .nav nav ul::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .nav nav ul li { float: left; font-size: 0.105rem; line-height: 0.105rem; color: #a8a8a8; } .content .box .nav nav ul li a { color: #a8a8a8; } .content .box .nav nav ul li:nth-of-type(2n) { margin: 0 0.135rem; } .content .box .nav nav ul li:last-of-type a { color: #333; } .content .box .introduce { width: 73%; margin: 0 auto; margin-top: 1.0725rem; } .content .box .introduce .left { float: left; width: 3.60001rem; } .content .box .introduce .left .title { font-size: 0.36rem; font-weight: bold; line-height: 0.48rem; color: #333333; } .content .box .introduce .left .p { margin-top: 0.285rem; } .content .box .introduce .left .p p { font-size: 0.135rem; line-height: 0.285rem; color: #333333; text-align: justify; } .content .box .introduce .right { float: right; width: 6.31502rem; padding-bottom: 0.2775rem; border-bottom: solid 0.0075rem #e6e6e6; } .content .box .introduce .right .img { width: 100%; } .content .box .introduce .right .img img { width: 100%; } .content .box .introduce .right .text { width: 100%; margin-top: 0.3375rem; } .content .box .introduce .right .text .title { font-size: 0.15rem; font-weight: bold; line-height: 0.15rem; color: #333333; } .content .box .introduce .right .text .h3 { font-family: "Arial"; font-size: 0.18rem; font-weight: bold; line-height: 0.18rem; color: #a8a8a8; margin-top: 0.1575rem; float: left; padding-left: 0.1425rem; position: relative; } .content .box .introduce .right .text .h3::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0; left: 0; } .content .box .introduce .right .text .time { float: right; font-family: "Arial"; font-size: 0.12rem; font-weight: bold; line-height: 0.18rem; color: #a8a8a8; margin-top: 0.1575rem; position: relative; } .content .box .introduce .right .text .time span { color: #ea222d; } .content .box .introduce .right .text .time::after { content: ""; width: 0.0075rem; height: 0.375rem; background-color: #e3e3e3; position: absolute; bottom: 0; left: -0.2925rem; } .content .box .introduce .bottom { font-size: 0.135rem; line-height: 0.285rem; color: #333333; text-align: justify; margin-top: 0.315rem; } .content .box .brand { width: 100%; margin-top: 0.705rem; position: relative; } .content .box .brand .img { width: 100%; height: 4.71751rem; position: relative; min-height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-image: url(../img/companyProfile_02.jpg); z-index: 1; } .content .box .brand .brand-box { width: 73%; height: 2.34001rem; position: absolute; left: 13.5%; bottom: -1.245rem; background-color: white; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); z-index: 10; } .content .box .brand .brand-box .text { padding-top: 0.495rem; } .content .box .brand .brand-box .text .title { font-size: 0.315rem; font-weight: bold; line-height: 0.315rem; color: #333333; text-align: center; } .content .box .brand .brand-box .text .title span { color: #ea222d; margin: 0 0.18rem; } .content .box .brand .brand-box .text .line { width: 9.60002rem; height: 0.0075rem; background-color: #f1f1f1; margin: 0 auto; margin-top: 0.3225rem; } .content .box .brand .brand-box .text .p { width: 4.6rem; font-size: 0.135rem; line-height: 0.27rem; color: #333333; margin: 0 auto; margin-top: 0.3075rem; text-align: center; } .relax { width: 100%; height: 5.71501rem; overflow: hidden; background-color: #fff; position: relative; background: url(../img/hillback.jpg) no-repeat; background-size: cover; background-position: left bottom; z-index: 1; } .relax .hill { width: 100%; height: 4.07rem; position: relative; z-index: 1; margin-top: 2.81251rem; } .relax .hill > ul { width: 100%; height: 100%; padding: 0.7rem 1rem; padding-top: 0; box-sizing: border-box; display: flex; justify-content: space-evenly; align-items: flex-start; text-align: center; } .relax .hill > ul > li > span:nth-of-type(3), .relax .hill > ul > li > span:nth-of-type(4) { display: block; } .relax .hill > ul > li:nth-of-type(4) > span:nth-of-type(2) { display: none; } .relax .hill > ul > li > span:nth-of-type(2) { font-size: 0.34rem; font-family: Arial; font-weight: 900; color: #333333; line-height: 0.81rem; } .relax .hill > ul > li > span:nth-of-type(1) { font-size: 0.34rem; font-family: Arial; font-weight: 900; color: #333333; line-height: 0.81rem; } .relax .hill > ul > li > span:nth-of-type(3) { font-size: 0.13rem; font-weight: 400; color: #333333; } .relax .hill > ul > li > span:nth-of-type(4) { font-size: 0.12rem; font-weight: 400; color: #333333; line-height: 0.3rem; } .relax .cloud { width: 100%; height: 100%; position: absolute; top: 0; display: flex; } .relax .cloud > span { width: 100%; height: 100%; display: block; background: url(../img/cloud.png) 0rem 0rem no-repeat; background-size: 100% 100%; flex-shrink: 0; transform: translateX(-43.2rem); animation: cloud 100s linear infinite; } @keyframes cloud { 0% { transform: translateX(0); } 100% { transform: translateX(-43.2rem); } } @media screen and (max-width: 1020px) { .in_banner_bot { height: 5rem; } .content .box .nav { margin-left: 5%; margin-top: 0.3rem; } .content .box .nav nav ul li { font-size: 0.25rem; line-height: 0.25rem; } .content .box .introduce { width: 90%; } .content .box .introduce .left { float: left; width: 100%; } .content .box .introduce .left .p p { font-size: 0.24rem; line-height: 0.432rem; } .content .box .introduce .right { float: right; width: 100%; margin-top: 0.5rem; } .content .box .introduce .right .text .title { font-size: 0.25rem; line-height: 0.25rem; } .content .box .introduce .right .text .h3 { font-size: 0.24rem; line-height: 0.24rem; margin-top: 0.3rem; padding-left: 0.1425rem; } .content .box .introduce .right .text .h3::after { width: 0.0375rem; height: 0.22rem; } .content .box .introduce .right .text .time { font-size: 0.24rem; line-height: 0.24rem; margin-top: 0.3rem; } .content .box .introduce .bottom { font-size: 0.24rem; line-height: 0.432rem; margin-top: 0.315rem; } .content .box .brand .img { width: 100%; height: 4.4rem; overflow: hidden; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center bottom; background-attachment: inherit; background-image: url(../img/companyProfile_02.jpg); z-index: 1; } .content .box .brand .brand-box { width: 90%; margin: 0 auto; height: 3.5rem; position: absolute; left: 5%; bottom: -2.2rem; } .content .box .brand .brand-box .text { padding-top: 0.6rem; } .content .box .brand .brand-box .text .title { font-size: 0.34rem; line-height: 0.34rem; } .content .box .brand .brand-box .text .line { width: 90%; height: 0.015rem; background-color: #f1f1f1; margin: 0 auto; margin-top: 0.4rem; } .content .box .brand .brand-box .text .p { width: 90%; font-size: 0.24rem; line-height: 0.42rem; margin: 0 auto; margin-top: 0.4rem; } .relax { height: 7.5rem; background-position: center center; } .relax .hill { margin-top: 2.8rem; } .relax .hill > ul { padding: 0; flex-wrap: wrap; align-content: flex-start; } .relax .hill > ul li { width: 30%; margin-top: 20px; } .relax .hill > ul > li > span:nth-of-type(1) { font-size: 0.5rem; font-family: Arial; font-weight: 900; color: #333333; line-height: 0.81rem; } .relax .hill > ul li > span:nth-of-type(3) { font-size: 0.25rem; } .relax .hill > ul li > span:nth-of-type(4) { display: none; } .relax .cloud { display: none; } }