product-kestos.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. @media screen and (min-width: 768px) {
  2. .main .about .cover img {
  3. display: block;
  4. width: 470px;
  5. height: 480px;
  6. }
  7. .main .about .info {
  8. width: 660px;
  9. padding-top: 65px;
  10. }
  11. .main .about .info .name {
  12. font-size: 50px;
  13. color: #7d8bb0;
  14. font-weight: bold;
  15. }
  16. .main .about .info .subname {
  17. font-size: 30px;
  18. margin-top: 15px;
  19. }
  20. .main .about .info .line {
  21. width: 36px;
  22. height: 7px;
  23. background: #7d8bb0;
  24. margin: 20px 0 30px;
  25. }
  26. .main .about .info .description {
  27. font-size: 20px;
  28. text-align: justify;
  29. word-break: break-all;
  30. line-height: 36px;
  31. }
  32. .main .about .info .description p {
  33. margin-top: 24px;
  34. }
  35. .main .therapy .content img {
  36. display: block;
  37. width: 100%;
  38. margin-top: 3px;
  39. }
  40. .main .therapy .content img:first-child {
  41. margin-top: 0;
  42. }
  43. .main .program .content img {
  44. display: block;
  45. width: 100%;
  46. }
  47. .main .device .content .swiper-container {
  48. width: 100%;
  49. }
  50. .main .device .content .swiper-container img {
  51. display: block;
  52. width: 100%;
  53. }
  54. }
  55. @media screen and (max-width: 768px) {
  56. .main .about .content {
  57. display: -webkit-box;
  58. display: -ms-flexbox;
  59. display: flex;
  60. -webkit-box-orient: vertical;
  61. -webkit-box-direction: reverse;
  62. -ms-flex-direction: column-reverse;
  63. flex-direction: column-reverse;
  64. -webkit-box-align: center;
  65. -ms-flex-align: center;
  66. align-items: center;
  67. }
  68. .main .about .content .cover {
  69. margin-top: 0.4rem;
  70. }
  71. .main .about .content .cover img {
  72. display: block;
  73. width: 5.46rem;
  74. height: 5.57rem;
  75. }
  76. .main .about .content .info {
  77. width: 6.5rem;
  78. margin: 0 auto;
  79. }
  80. .main .about .content .info .name {
  81. font-size: 0.34rem;
  82. color: #7d8bb0;
  83. text-align: center;
  84. font-weight: bold;
  85. }
  86. .main .about .content .info .subname {
  87. font-size: 0.26rem;
  88. margin-top: 0.16rem;
  89. text-align: center;
  90. }
  91. .main .about .content .info .line {
  92. width: 0.4rem;
  93. height: 0.06rem;
  94. background: #7d8bb0;
  95. margin: 0.32rem auto;
  96. }
  97. .main .about .content .info .description {
  98. text-align: justify;
  99. word-break: break-all;
  100. color: #333333;
  101. text-align: center;
  102. font-size: 0.26rem;
  103. line-height: 0.48rem;
  104. }
  105. .main .therapy {
  106. width: 6.86rem;
  107. margin: 0 auto;
  108. }
  109. .main .therapy .content img {
  110. display: block;
  111. width: 100%;
  112. margin-top: 0.32rem;
  113. }
  114. .main .therapy .content img:first-child {
  115. margin-top: 0;
  116. }
  117. .main .program {
  118. width: 6.86rem;
  119. margin: 0 auto;
  120. }
  121. .main .program .content img {
  122. display: block;
  123. width: 100%;
  124. }
  125. .main .device .scroll-box img {
  126. width: 2.74rem;
  127. height: 2.53rem;
  128. margin-right: 0.24rem;
  129. }
  130. .main .device .scroll-box img:first-child {
  131. margin-left: 0.32rem;
  132. }
  133. .main .device .scroll-box img:last-child {
  134. margin-right: 0.32rem;
  135. }
  136. }