contactUs.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. .service-content * {
  2. box-sizing: border-box;
  3. }
  4. .service-efficient {
  5. width: 100%;
  6. display: flex;
  7. background-color: white;
  8. flex-wrap: wrap;
  9. }
  10. .service-efficient .top {
  11. width: 100%;
  12. padding: 0.5rem;
  13. font-size: 0.2rem;
  14. text-align: left;
  15. }
  16. .service-efficient .image {
  17. width: 100%;
  18. }
  19. .service-efficient img {
  20. width: 100%;
  21. height: 100%;
  22. }
  23. .service-efficient-else {
  24. flex-wrap: wrap-reverse;
  25. }
  26. .service-experience {
  27. width: 100%;
  28. display: flex;
  29. justify-content: space-around;
  30. margin: auto;
  31. flex-wrap: wrap;
  32. }
  33. .service-experience .image {
  34. width: 100%;
  35. position: relative;
  36. }
  37. .service-experience .image .top {
  38. font-size: 0.4rem;
  39. background-color: #e4e4e4;
  40. padding: 0.3rem 0;
  41. margin-top: -0.25rem;
  42. }
  43. .service-major {
  44. width: 100%;
  45. position: relative;
  46. display: flex;
  47. justify-content: space-around;
  48. margin: auto;
  49. flex-wrap: wrap;
  50. }
  51. .service-major .image {
  52. width: 100%;
  53. }
  54. .service-major .main-title {
  55. width: 100% !important;
  56. background-color: #fff;
  57. padding: 0.4rem;
  58. font-size: 0.25rem;
  59. text-align: left;
  60. }
  61. .service-major .main-title p {
  62. margin-bottom: 0.2rem;
  63. }
  64. .service-increment {
  65. width: 100%;
  66. display: flex;
  67. justify-content: space-between;
  68. flex-wrap: wrap;
  69. }
  70. .service-increment .image {
  71. width: 48%;
  72. position: relative;
  73. margin-bottom: 0.3rem;
  74. overflow: hidden;
  75. }
  76. .service-increment .image:hover img {
  77. transform: scale(1.2);
  78. transition: all 0.5s;
  79. }
  80. .service-increment .image .share {
  81. width: 100%;
  82. height: 40%;
  83. font-size: 0.2rem;
  84. padding: 0.2rem;
  85. text-align: left;
  86. color: #ffffff;
  87. position: absolute;
  88. bottom: 0;
  89. background: rgba(0, 0, 0, 0.7);
  90. }
  91. .example-image {
  92. height: 5rem;
  93. }
  94. .example-experience {
  95. display: flex;
  96. justify-content: space-between;
  97. flex-wrap: wrap;
  98. }
  99. .example-experience .image {
  100. width: 30%;
  101. }
  102. .example-experience .image .top {
  103. font-size: 0.1rem;
  104. background-color: #e4e4e4;
  105. margin-top: -0.15rem;
  106. text-align: left;
  107. padding: 0.2rem 0;
  108. }
  109. .pain-point-img {
  110. min-height: 3rem;
  111. margin-top: 0.1rem;
  112. }
  113. .pain-point {
  114. height: 100%;
  115. display: flex;
  116. position: absolute;
  117. top: 0;
  118. justify-content: space-around;
  119. align-items: center;
  120. }
  121. .pain-point .box {
  122. width: 16%;
  123. }
  124. .pain-point .box img {
  125. width: 100%;
  126. }
  127. .pain-point .box p {
  128. font-size: 0.25rem;
  129. color: #ffffff;
  130. padding-top: 0.2rem;
  131. }
  132. .pain-point .box:hover img {
  133. transform: scale(1.1);
  134. transition: all 0.5s;
  135. }
  136. .industry-img {
  137. min-height: 4rem;
  138. }
  139. .industry {
  140. height: 80%;
  141. display: flex;
  142. position: absolute;
  143. top: 10%;
  144. justify-content: space-around;
  145. align-items: center;
  146. }
  147. .industry .box-left {
  148. margin-left: 0.5rem;
  149. }
  150. .industry .box-right {
  151. margin-right: 0.5rem;
  152. }
  153. .industry .box img {
  154. width: 50%;
  155. }
  156. .industry .box p {
  157. font-size: 0.25rem;
  158. color: #ffffff;
  159. padding-top: 0.2rem;
  160. }
  161. .industry .box {
  162. width: 22%;
  163. display: flex;
  164. flex-direction: column;
  165. justify-content: center;
  166. align-items: center;
  167. }
  168. .industry .box:hover img {
  169. transform: scale(1.1);
  170. transition: all 0.5s;
  171. }
  172. .section {
  173. color: #fff;
  174. text-align: center;
  175. padding: 0.66rem 0;
  176. background-color: #838383;
  177. }
  178. .section .title .desc {
  179. font-size: 0.3rem;
  180. margin-bottom: 0.22rem;
  181. }
  182. .section .title .info {
  183. font-size: 0.22rem;
  184. /* margin-bottom: 0.76rem; */
  185. }
  186. #myMap {
  187. width: 100%;
  188. height: 6rem;
  189. }
  190. .beianinfo {
  191. display: inline-block;
  192. margin-left: 0.65rem;
  193. }