.fast-air{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.042rem; .item{ height: 13.333rem; display: flex; align-items: center; justify-content: center; .desc{ padding: 2rem; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #fff; h4{ font-weight: normal; font-size: 1rem; padding-bottom: .6rem; } p{ font-size: 0.667rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; } } &:hover{ img{ transform: scale(1.06); } } } } .advantage{ display: flex; align-items: center; gap: 4rem; .img-box{ background: #0671b9; border-bottom:8px solid #0671b9; border-right:8px solid #0671b9; img{ display: block; } } .advantages{ width: 36%; padding: 1rem 0; li{ display: flex; align-items: center; padding: 0.8rem 0; gap: 0.5rem; .index{ font-size: 2rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; color: #dddddd; } } h4{ font-family: HarmonyOS_Sans_SC; font-size: 0.833rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; color: #000000; padding-bottom: 0.3rem; } p{ font-family: HarmonyOS_Sans_SC; font-size: 0.667rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; color: #666666; } } } .service{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; .item{ display: flex; flex-direction: column; align-items: center; background-color: #ffffff; border: solid 0.042rem #eeee; padding: 2.25rem; text-align: center; &:hover{ border-color: #0671b9; } .box{ width: 3.75rem; height: 3.75rem; background-color: #0671b9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.65rem; img{ height: 1.708rem; } } h3{ font-size: 1rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; color: #000000; padding-bottom: 0.7rem; } p{ font-size: 0.667rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; color: #666666; } } } .tishi{ display: flex; align-items: center; gap: 2rem; >div{ flex: 1; } h3{ font-size: 1.5rem; font-weight: normal; font-stretch: normal; letter-spacing: 0rem; color: #000000; padding-bottom: 1rem; &::after{ content: ''; margin: .5rem; display: block; width: 2.542rem; height: 0.125rem; background-color: #b81c22; } } p{ white-space: pre-line; font-family: HarmonyOS_Sans_SC; font-size: 0.667rem; font-weight: normal; font-stretch: normal; line-height: 1.5rem; letter-spacing: 0rem; color: #666666; } } .contact{ .grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 0.9rem; padding-bottom: 0.9rem; } .label{ font-size: 0.667rem; font-weight: normal; font-stretch: normal; line-height: 1rem; letter-spacing: 0rem; color: #000000; } .require::after{ content: "*"; color: #ff0000; } input{ height: 2.083rem; box-sizing: border-box; padding: 0 0.6rem; background-color: #ffffff; border: solid 1px #e5e5e5; font-size: 0.667rem; color: #000; width: 100%; box-sizing: border-box; &::placeholder { font-size: 0.667rem; color: #ffffff; } &:focus, &:hover{ outline: unset; border-color: #fff; } } button{ display: block; margin: 2rem auto; width: 7.5rem; height: 2.083rem; font-size: 0.667rem; color: #fff; background-color: #0671b9; } textarea{ width: 100%; display: block; padding: 0.6rem; box-sizing: border-box; background-color: #ffffff; border: solid 1px #e5e5e5; min-height: 6.25rem; &:focus, &:hover{ outline: unset; border-color: #fff; } } } @media (max-width: 992px) { .contact .grid{ grid-template-columns: repeat(1,1fr); } .why-grid{ grid-template-columns: repeat(2,1fr); } .search form button{ width: unset; padding: 0 1rem; white-space: nowrap; } .fast-air{ grid-template-columns: repeat(1,1fr); .item{ .img-box{ overflow: hidden; height:unset; } img{ height: unset; width: 100%; object-fit: fill; transition: transform .3s ease; } } } .tishi{ flex-direction: column-reverse; .desc{ width: 100%; } .img-box{ width: 100%; img{ max-width: 100%; } } } .service{ grid-template-columns: repeat(2,1fr); } .advantage{ flex-direction: column; gap: 0; .img-box{ width: 100%; border: unset; img{ display: block; width: 100%; height: unset; } } .advantages{ width: 100%; } } }