contactUsPC.css 3.3 KB

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