pcOrMobile.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. /* body {
  2. margin: 0;
  3. width: 100%;
  4. height: 100%;
  5. display: flex;
  6. justify-content: space-around;
  7. align-items: center;
  8. flex-wrap: wrap;
  9. } */
  10. /* div {
  11. width: 100%;
  12. height: 100%;
  13. } */
  14. html {
  15. font-size: 100px;
  16. }
  17. /* @media screen and (min-width:900px) { */
  18. .BGImage1 {
  19. background-image: url(./images/banner/bannerM1.jpg);
  20. background-size: auto 100%;
  21. background-repeat: no-repeat;
  22. background-position: center center ;
  23. }
  24. .BGImage2 {
  25. background-image: url(./images/banner/bannerM2.jpg);
  26. background-size:auto 100%;
  27. background-repeat: no-repeat;
  28. background-position: center center ;
  29. }
  30. .BGImage3 {
  31. background-image: url(./images/banner/bannerM3.jpg);
  32. background-size: auto 100%;
  33. background-repeat: no-repeat;
  34. background-position: center center ;
  35. }
  36. .BGImage4 {
  37. background-image: url(./images/banner/bannerM4.jpg);
  38. background-size: auto 100%;
  39. background-repeat: no-repeat;
  40. background-position: center center ;
  41. }
  42. .logo {
  43. width: 22%;
  44. /* height: 4%; */
  45. position: absolute;
  46. top: 10px;
  47. left: 15px;
  48. z-index: 999;
  49. }
  50. .pageTwoBox {
  51. display: flex;
  52. flex-flow: column nowrap;
  53. justify-content: space-evenly;
  54. width: 100%;
  55. height: 100%;
  56. }
  57. .container {
  58. /* margin: 20px; */
  59. width: 20%;
  60. /* flex:auto; */
  61. /* height: 30%; */
  62. /* perspective: 1000px; */
  63. }
  64. .card {
  65. margin-top: -10px;
  66. transition: transform 2s;
  67. transform-style: preserve-3d;
  68. cursor: pointer;
  69. }
  70. .front,
  71. .back {
  72. position: absolute;
  73. display: flex;
  74. flex-direction: column;
  75. justify-content: center;
  76. align-items: center;
  77. backface-visibility: hidden;
  78. }
  79. .back {
  80. transform: rotateY(180deg);
  81. }
  82. .threeTitle {
  83. width: 100%;
  84. font-size :3vh;
  85. color: black;
  86. letter-spacing: 3px;
  87. position: absolute;
  88. top: 2vh;
  89. }
  90. .HZSBox {
  91. width: 100%;
  92. height: 75vh;
  93. margin-top: 7vh;
  94. display: flex;
  95. flex-flow: row wrap;
  96. justify-content: space-around;
  97. /* background-color: brown; */
  98. }
  99. .HZSImg {
  100. width: 30%;
  101. height: 13%;
  102. }
  103. .HZSBtn {
  104. background-color: #fff;
  105. color: #61579B;
  106. border-radius: 5px;
  107. border: 1px solid #61579B;
  108. font-size: 2vh;
  109. padding: 1vh;
  110. margin-top: 1vh;
  111. }
  112. .PTLogo1 {
  113. width: 40px;
  114. height: 30px;
  115. margin: 20px;
  116. background-image: url("./images//hezuoshang/wechat.png");
  117. background-size: 100% 100%;
  118. /* background-color: chartreuse; */
  119. }
  120. .PTLogo1:hover {
  121. width: 40px;
  122. height: 30px;
  123. margin: 20px;
  124. background-image: url("./images//hezuoshang/wechat.png");
  125. background-size: 100% 100%;
  126. /* background-color: chartreuse; */
  127. }
  128. .PTLogo2 {
  129. width: 40px;
  130. height: 30px;
  131. margin: 20px;
  132. background-image: url("./images//hezuoshang/weibo.png");
  133. background-size: 100% 100%;
  134. /* background-color: chartreuse; */
  135. }
  136. .PTLogo2:hover {
  137. width: 40px;
  138. height: 30px;
  139. margin: 20px;
  140. background-image: url("./images//hezuoshang/weibo.png");
  141. background-size: 100% 100%;
  142. /* background-color: chartreuse; */
  143. }
  144. .PTLogo3 {
  145. width: 40px;
  146. height: 30px;
  147. margin: 20px;
  148. background-image: url("./images//hezuoshang/toutiao.png");
  149. background-size: 100% 100%;
  150. /* background-color: chartreuse; */
  151. }
  152. .PTLogo3:hover {
  153. width: 40px;
  154. height: 30px;
  155. margin: 20px;
  156. background-image: url("./images//hezuoshang/toutiao.png");
  157. background-size: 100% 100%;
  158. /* background-color: chartreuse; */
  159. }
  160. .PTLogoBox {
  161. display: flex;
  162. flex-flow: row nowrap;
  163. justify-content: center;
  164. }
  165. .otherTitleBox {
  166. position: absolute;
  167. top: 3vh;
  168. left: 3vw;
  169. color: black;
  170. font-size: 4vw;
  171. margin-top: 3vh;
  172. text-align: left;
  173. }
  174. .otherTitle1 {
  175. font-weight: 600;
  176. font-size: 4vw;
  177. }
  178. .tooth {
  179. position: absolute;
  180. top: 37vh;
  181. left: 50%;
  182. margin-left: -8vw;
  183. width: 16vw;
  184. height: 16vw;
  185. /* margin-top: -100vh; */
  186. }
  187. .TitleBox {
  188. position: absolute;
  189. /* left: 50%; */
  190. top: 48vh;
  191. /* margin-left: -15vw; */
  192. /* width: 30vw; */
  193. width: 100%;
  194. text-align: center;
  195. color: black;
  196. text-align: left;
  197. }
  198. .Title {
  199. text-align: center;
  200. width: 100%;
  201. font-size: 18px;
  202. }
  203. .Title1 {
  204. text-align: center;
  205. width: 100%;
  206. font-size: 18px;
  207. font-weight: 600;
  208. }
  209. a {
  210. display: block;
  211. }
  212. a:hover {
  213. color: #fff;
  214. }
  215. a:active {
  216. color: #fff;
  217. }
  218. .tanchuang {
  219. width: 100vw;
  220. height: 100vh;
  221. background-image: url(./images/xiaochengxu.jpg);
  222. background-size: auto 100%;
  223. background-repeat: no-repeat;
  224. background-position: center center ;
  225. position: absolute;
  226. top: 0;
  227. left: 0;
  228. z-index: 99999;
  229. }
  230. .tanchuangO {
  231. width: 100vw;
  232. height: 100vh;
  233. background-color: rgba(0, 0, 0, 0.5);
  234. position: absolute;
  235. top: 0;
  236. left: 0;
  237. z-index: 99999;
  238. }
  239. .tanchuangImg {
  240. width: 50vw;
  241. height: 50vw;
  242. position: absolute;
  243. top: 50%;
  244. left: 50%;
  245. margin-left: -25vw;
  246. margin-top: -15vw;
  247. }
  248. .display{
  249. display: none;
  250. }
  251. .imgBigBox {
  252. width: 100%;
  253. height: 60vh;
  254. display: flex;
  255. flex-flow: column nowrap;
  256. justify-content: space-evenly;
  257. margin-top: 3vh;
  258. }
  259. .introduce {
  260. width: 60%;
  261. margin-top: 1vh;
  262. /* flex:auto; */
  263. /* height: 85%; */
  264. }
  265. .introduce1 {
  266. width: 50%;
  267. margin-top: 2vh;
  268. /* flex:auto; */
  269. /* height: 85%; */
  270. }
  271. .imgBox {
  272. width: 100%;
  273. }
  274. /* } */