case.css 976 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .title {
  2. font-size: 34px;
  3. text-align: center;
  4. margin-top: 100px;
  5. }
  6. .main .case {
  7. box-sizing: border-box;
  8. }
  9. .main .case:nth-child(1) {
  10. padding-top: 80px !important;
  11. }
  12. .main .case:nth-child(odd) {
  13. height: 690px;
  14. padding: 120px 0;
  15. }
  16. .main .case:nth-child(odd) .cover {
  17. width: 668px;
  18. height: 410px;
  19. }
  20. .main .case:nth-child(even) {
  21. height: 720px;
  22. padding: 162px 0;
  23. background: url(/img/case-bg.png) no-repeat center;
  24. background-size: auto 720px;
  25. }
  26. .main .case:nth-child(even) .cover {
  27. width: 568px;
  28. height: 397px;
  29. }
  30. .main .case .cover {
  31. background: pink;
  32. }
  33. .main .case .content {
  34. position: relative;
  35. background: skyblue;
  36. width: 490px;
  37. height: 410px;
  38. margin-top: 50px;
  39. }
  40. .main .case .content img {
  41. display: block;
  42. width: 580px;
  43. height: 516px;
  44. position: absolute;
  45. left: 50%;
  46. top: 50%;
  47. transform: translate(-50%, -50%);
  48. }
  49. .main .case .cover img {
  50. display: block;
  51. width: 100%;
  52. height: 100%;
  53. }
  54. .footer {
  55. margin-top: 0;
  56. }