@media screen and (min-width: 768px) { .main .about .cover img { display: block; width: 470px; height: 480px; } .main .about .info { width: 660px; padding-top: 65px; } .main .about .info .name { font-size: 50px; color: #5daf32; font-weight: bold; } .main .about .info .subname { font-size: 30px; margin-top: 15px; } .main .about .info .line { width: 36px; height: 7px; background: #5daf32; margin: 20px 0 30px; } .main .about .info .description { font-size: 20px; text-align: justify; word-break: break-all; line-height: 36px; } .main .about .info .tags { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 40px; } .main .technology .content .section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 30px; background: #eee; margin-top: 40px; } .main .technology .content .section:first-child { margin-top: 0; } .main .technology .content .section .cover { -ms-flex-negative: 0; flex-shrink: 0; } .main .technology .content .section .cover img { display: block; width: 374px; } .main .technology .content .section:nth-child(2n-1) .info { margin-left: 40px; } .main .technology .content .section:nth-child(2n) .info { margin-right: 40px; } .main .technology .content .section .info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 0; flex-shrink: 0; } .main .technology .content .section .info .title { font-size: 34px; color: #5daf33; font-weight: bold; } .main .technology .content .section .info .subtitle { font-size: 16px; color: #434343; font-weight: lighter; margin-top: 12px; } .main .technology .content .section .info .description { font-size: 27px; color: #434343; margin-top: 24px; line-height: 40px; text-align: justify; word-break: break-all; } .main .care .content .section { float: left; width: 390px; height: 340px; position: relative; margin-right: 15px; margin-top: 15px; background: #eee; overflow: hidden; } .main .care .content .section:nth-child(2), .main .care .content .section:nth-child(5), .main .care .content .section:nth-child(8) { margin-right: 0; } .main .care .content .section:nth-child(1), .main .care .content .section:nth-child(2) { margin-top: 0; } .main .care .content .section:first-child { width: 795px; } .main .care .content .section:nth-child(1), .main .care .content .section:nth-child(6) { background: #5daf32; } .main .care .content .section:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .main .care .content .section .cover { position: absolute; width: 100%; height: 100%; } .main .care .content .section .cover img { display: block; width: 100%; height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; } .main .care .content .section .info { position: absolute; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #fff; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 32px; line-height: 1.5; } .main .care .content .section .info .title { font-size: 28px; font-weight: bold; } .main .care .content .section .info .title.big { font-size: 41px; } .main .care .content .section .info .subtitle { font-size: 24px; margin-top: 8px; } .main .care .content .section .info .description { font-size: 20px; font-weight: lighter; margin-top: 20px; } .main .device .content .swiper-container { width: 100%; } .main .device .content .swiper-container img { display: block; width: 100%; } } @media screen and (max-width: 768px) { .main .about .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .main .about .content .cover { margin-top: 0.4rem; } .main .about .content .cover img { display: block; width: 5.46rem; height: 5.57rem; } .main .about .content .tags { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.16rem; } .main .about .content .tags img { display: block; width: 1.76rem; height: 1.12rem; margin: 0 0.06rem; } .main .about .content .info { width: 6.5rem; margin: 0 auto; } .main .about .content .info .name { font-size: 0.34rem; color: #5daf32; text-align: center; font-weight: bold; } .main .about .content .info .subname { font-size: 0.26rem; margin-top: 0.16rem; text-align: center; } .main .about .content .info .line { width: 0.4rem; height: 0.06rem; background: #5daf32; margin: 0.32rem auto; } .main .about .content .info .description { text-align: justify; word-break: break-all; color: #333333; text-align: center; font-size: 0.26rem; line-height: 0.48rem; } .main .technology .content .section { width: 6.86rem; margin: 0 auto; padding: 0.4rem 0.7rem; background: #eee; margin-top: 0.32rem; -webkit-box-sizing: border-box; box-sizing: border-box; } .main .technology .content .section:first-child { margin-top: 0; } .main .technology .content .section .cover img { display: block; width: 3.74rem; margin: 0 auto; } .main .technology .content .section .info .title { font-size: 0.3rem; color: #5daf33; font-weight: bold; text-align: center; margin-top: 0.26rem; } .main .technology .content .section .info .subtitle { font-size: 0.24rem; color: #333; margin-top: 0.16rem; text-align: center; } .main .technology .content .section .info .description { font-size: 0.26rem; color: #333; margin-top: 0.4rem; line-height: 0.48rem; text-align: justify; word-break: break-all; text-align: center; } .main .care .content { width: 6.86rem; margin: 0 auto; } .main .care .content .section { float: left; width: 3.34rem; height: 3.4rem; position: relative; margin-right: 0.18rem; margin-top: 0.18rem; background: #eee; } .main .care .content .section:first-child { width: 6.86rem; margin-top: 0; margin-right: 0; } .main .care .content .section:nth-child(3), .main .care .content .section:nth-child(5), .main .care .content .section:nth-child(7), .main .care .content .section:nth-child(9) { margin-right: 0; } .main .care .content .section:nth-child(1), .main .care .content .section:nth-child(6) { background: #5daf32; } .main .care .content .section .cover { position: absolute; width: 100%; height: 100%; } .main .care .content .section .cover img { display: block; width: 100%; height: 100%; } .main .care .content .section .info { position: absolute; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #fff; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0.32rem; line-height: 1.5; } .main .care .content .section .info .title { font-size: 0.32rem; } .main .care .content .section .info .title.big { font-size: 0.32rem; } .main .care .content .section .info .subtitle { font-size: 0.24rem; margin-top: 0.24rem; } .main .care .content .section .info .description { font-size: 0.24rem; font-weight: lighter; margin-top: 0.24rem; } .main .device .scroll-box img { width: 3.16rem; height: 3.06rem; margin-right: 0.24rem; } .main .device .scroll-box img:first-child { margin-left: 0.32rem; } .main .device .scroll-box img:last-child { margin-right: 0.32rem; } }