m.css 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. @charset "utf-8";
  2. /* CSS Document
  3. design by www.qingqingblog.com
  4. */
  5. @media only screen and (max-width: 1200px) {
  6. .box { width: 1000px; }
  7. .ad_top { margin-left: 5px; }
  8. .links a { padding: 3px 10px; }
  9. }
  10. @media screen and (min-width: 960px) and (max-width: 1024px) {
  11. .box { width: 940px; }
  12. .ad_top { width: 510px; }
  13. .contact_icon ul li i img { right: 0; }
  14. #starlist li a { padding: 0 10px }
  15. .menu:after { right: 0 }
  16. .f_news_title { font-size: 18px; }
  17. .featured_pics ul li i { height: 120px }
  18. .featured_pics ul li section { left: 10%; width: 80%; }
  19. .blogs, .all_news_list, .blogs_search, .blogs_info_page { width: 68%; }
  20. .rbox { width: 30% }
  21. .emial_box { padding: 16px 16px 20px 16px; }
  22. .links li { width: 18% }
  23. .photos li i, .pics_content ul li i { height: 146px; }
  24. .all_videos li i { height: 117px; }
  25. .featured_video_fl h3 { font-size: 22px; }
  26. .resume_tec li span { width: 63% }
  27. .designer section { width: 76% }
  28. }
  29. @media only screen and (max-width: 959px) {
  30. .box { width: 96% }
  31. .ad_top, .contact_icon { display: none }
  32. .is-search { position: fixed; right: 50px; background: none; }
  33. .search-page { position: fixed; top: 40px; border-radius: 0; }
  34. .is-search i { background: url(../images/search_m.png) no-repeat center; background-size: 24px; width: 40px; height: 40px; }
  35. header { height: auto }
  36. header { width: 100%; height: 40px; background: #fff; position: fixed; top: 0; z-index: 999; padding-top: 0; box-shadow: #e0e7ec 1px 1px 3px; }
  37. header .box { width: 100%; }
  38. .ph_margin { height: 40px; margin-bottom: 20px }
  39. #mnavh { display: block; top: 0; position: fixed; right: 0; }
  40. #mnavh.open:after { position: fixed; width: 40%; height: 100%; content: ""; right: 0; top: 40px; }
  41. nav { background: none; height: auto; padding-left: 0; margin-top: 0; }
  42. .logo img { height: 40px; margin-left: 10px }
  43. nav #starlist { width: 100%; background: rgba(0,0,0,0.7); overflow: hidden; }
  44. #starlist { display: none }
  45. #starlist li { width: 60%; margin: 0; background: #fff; border-bottom: #eee 10px solid; line-height: 50px; float: left; font-size: 16px; font-weight: normal; }
  46. #starlist li a { text-align: left; text-indent: 2em; color: #000; width: 100%; padding: 0; font-size: 15px; }
  47. #starlist li:nth-child(1) { border-top: #eee 1px solid; }
  48. #starlist ul.sub { background: none; width: 100%; display: block; position: initial; padding: 0; opacity: 1; transition: none; }
  49. #starlist ul.sub:before { display: none }
  50. #starlist ul.sub li { border-bottom: none; width: 100%; overflow: hidden; line-height: 40px !important; border-top: none; height: 40px !important; background: none; font-size: 14px; }
  51. #starlist ul.sub li:first-child { border-top: #eee 1px solid; }
  52. #starlist ul.sub li a { display: block; padding-left: 10px; text-indent: 3em; width: auto; color: #000; }
  53. #starlist li a:hover, #starlist ul.sub li a:hover { color: #012684 }
  54. .menu:after { width: 26px; height: 22px; content: ""; background: url("../images/jiantou.png") no-repeat; background-size: 16px; display: block; }
  55. .menu:after { top: 20px; right: 6px; border-color: transparent; }
  56. .menu:hover:after { transform: none; }
  57. .menu span { display: block; ; position: absolute; width: 50px; height: 50px; background: #fff; top: 0; right: 0; border-left: #eee 1px solid; }
  58. #starlist li:last-child { padding-bottom: 100%; }
  59. #starlist ul.sub li:last-child { padding-bottom: 0 }
  60. #starlist li:hover ul.sub:before { display: none }
  61. .swiper-slide section p { font-size: 14px; }
  62. .swiper-slide section span { font-size: 12px; }
  63. .f_news_pic { display: none }
  64. .featured_news { width: 63% }
  65. .f_news_list { width: 100% }
  66. .mycard { width: 34% }
  67. .featured_pics { margin: 10px 0 30px 0; }
  68. .featured_nav #tab li a { margin: 0 10px }
  69. .rbox { display: none }
  70. .blogs, .blogs_info_page, .all_news_list, .blogs_search { width: 100% }
  71. .links li { width: auto }
  72. .featured_pics { overflow-x: auto; }
  73. .featured_pics ul { width: 1200px !important; overflow-x: scroll; }
  74. .featured_nav #tab { padding: 0 20px }
  75. .pics_content ul li i, .photos li i { height: 140px }
  76. .all_videos li i { height: 113px; }
  77. .featured_video_fl h3 { font-size: 22px; }
  78. .photos li p { font-size: 14px; }
  79. .play_video iframe { height: auto;}
  80. }
  81. @media only screen and (max-width: 768px) {
  82. .featured_nav #tab li a { padding: 0 6px; }
  83. .pics_content ul li i, .photos li i { height: 150px }
  84. .all_videos li p { font-size: 14px; }
  85. .all_videos ul li, .photos ul li { width: 33.333% }
  86. .all_videos li i { height: 118px; }
  87. .featured_video_fl, .featured_video_fr, .play_video, .play_info { width: 100% }
  88. .featured_news { width: 56%; }
  89. .featured_nav #tab li a { margin: 0 5px; }
  90. .mycard { width: 41%; }
  91. .resume_left, .resume:after { width: 40% }
  92. .resume_tec { margin: 0 20px 100px; }
  93. .resume_right { margin-left: 40% }
  94. .ad img { width: 100% }
  95. }
  96. @media only screen and (max-width: 640px) {
  97. .featured_news, .mycard { width: 100% }
  98. .featured_nav #tab li a { margin: 0 10px }
  99. .mycard i { float: left; margin: 0 20px 0 0; height: 120px; width: 160px; }
  100. .mycard ul li { line-height: 30px }
  101. .mycard { height: auto; margin: 20px 0 }
  102. p.mycard_title_en { display: none; }
  103. .blogs_list i { width: 160px; height: 120px }
  104. .blogs_list h2 { font-size: 18px; margin: 5px 0; }
  105. .blogs_base span { margin-right: 10px }
  106. .blogs_base { margin: 10px 0 0 0; font-size: 12px; }
  107. a.read_more { font-size: 12px; padding: 5px 10px; width: 60px; }
  108. h2.h_title { font-size: 18px; }
  109. .links { margin: 0 auto }
  110. .links a { font-size: 12px; padding: 0 10px; }
  111. .featured_pics { margin: 10px 0 20px 0; }
  112. .featured_news { margin-top: 20px }
  113. .wz_love ul li { width: 100% }
  114. .designer i { width: 60px; height: 60px }
  115. .designer i img { width: 100% }
  116. .designer h3 { margin: 0 }
  117. .designer p { font-size: 14px; }
  118. .designer section { width: 74%; margin-top: 5px; }
  119. .designer span img { width: 70px }
  120. .all_videos ul li, .photos ul li { width: 50% }
  121. .banner { width: 1000px; overflow-x: scroll; }
  122. .banner_box { overflow-x: auto; }
  123. .play_video video { height: auto !important }
  124. .play_box { padding: 10px 0 }
  125. .play_info section { padding: 10px; }
  126. .resume_right { margin-left: 0; padding: 15px; }
  127. .resume_left { width: 100%; background: #f0f0f0; margin-bottom: 30px }
  128. .resume:after { display: none }
  129. .resume_tec { margin: 0 20px 20px; }
  130. .featured_video_fl { height: 300px }
  131. .pics_content ul li { width: 50% }
  132. .album_info i { width: 90px; height: 68px; margin-right: 10px; }
  133. .album_box { padding: 10px; }
  134. .album_info h1 { font-size: 18px; margin: 10px; }
  135. .album_info { float: none; width: 100%; }
  136. .album_info p.a_i_ms { display: none; }
  137. p.a_i_time { font-size: 12px; }
  138. .album_info span { display: none; }
  139. .album_info em { margin-right: 10px; }
  140. .visitor_area { width: 100%; }
  141. .album_next ul li:nth-child(1) a { padding-left: 30px; background: url(../images/icon_left.png) no-repeat left top 60%; background-size: 32px; }
  142. .album_next ul li:nth-child(2) a { background: url(../images/icon_right.png) no-repeat right top 60%; background-size: 32px; padding-right: 30px; }
  143. .album_next span { display: block; margin-bottom: 10px; font-size: 14px; }
  144. .album_next p, .album_next h3 { display: none; }
  145. .play_info h1, .page_title { font-size: 18px; }
  146. .pages { padding: 15px; }
  147. .icon-top { right: 20px; bottom: 20px }
  148. .mycard .ewm { display: none }
  149. .all_news_list ul { padding: 15px 10px; }
  150. .all_news_list ul li span { font-size: 12px; }
  151. .links li {width: 33.3333%;}
  152. }
  153. @media only screen and (max-width: 480px) {
  154. .search-page .search { width: 90% }
  155. .search-page .go-left { right: 5px; top: 5px; background-size: 16px; width: 16px; height: 16px; }
  156. .featured_nav #tab li a { margin: 0 8px; padding: 0; font-size: 14px; }
  157. .featured_nav #tab { padding: 0 10px; line-height: 40px; margin: 5px 0; }
  158. .featured_nav { margin-bottom: 20px }
  159. .f_news_list li i { width: 120px; height: 90px; }
  160. .banner li { font-size: 16px; }
  161. .f_news_list li p { font-size: 14px; }
  162. .mycard { display: none }
  163. .blogs_list { padding: 15px; }
  164. .blogs_list i { width: 90px; height: 68px; margin: 0 10px 10px 0 }
  165. .blogs_list h2 { font-size: 15px; white-space: inherit; line-height: inherit; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; margin: 10px 0; }
  166. .blogs_list p { clear: both; }
  167. .featured_pics ul { padding: 10px }
  168. .footer_nav li a { padding: 0 5px; margin: 0 5px; font-size: 14px; }
  169. .footer_nav li a:after { right: -5px; }
  170. .featured_pics ul { width: 800px !important; overflow-x: scroll; }
  171. .featured_pics ul li i { height: 113px }
  172. .featured_pics ul li a { margin: 5px; }
  173. .icon_more { margin-top: 0 }
  174. .wz_info span { margin: 0 5px 0 0 }
  175. .info-pre-next p, .info-pre-next p:nth-child(2) { width: 100%; float: none; text-align: left }
  176. .designer span { float: none; display: block; }
  177. .designer span img { margin: auto; width: 140px; }
  178. .designer section { width: 100%; margin: 20px 0; }
  179. .wz_love ul li a { margin: 0 15px; }
  180. .wz_love .h_title { margin: 10px 0 0 15px; }
  181. article { padding: 15px; }
  182. .wz_love ul li span { left: 148px; }
  183. footer { margin-top: 20px }
  184. .epages { margin: 20px auto }
  185. .pics_content ul li i, .photos li i { height: 100px }
  186. .photos ul li { margin-bottom: 0 }
  187. .epages { font-size: 12px; }
  188. .featured_video_fl { height: 200px; }
  189. .featured_video_fl h3 { font-size: 15px; line-height: 24px; }
  190. .featured_video_fl i:before { width: 50px; height: 50px; margin-top: -25px; margin-left: -25px;background-size: 24px; }
  191. .featured_video_fl section { padding: 15px; }
  192. .all_videos li i { height: 78px; }
  193. .all_videos { padding: 5px }
  194. .all_videos li i:before { background-size: 15px; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; }
  195. .featured_video_fr li i { width: 120px; height: 80px; margin-right: 10px; border-radius: 10px; }
  196. .featured_video_fr li h3 { font-size: 15px; font-weight: normal; margin-bottom: 10px }
  197. .featured_video_fr ul li:last-child a { padding-bottom: 20px }
  198. .featured_video_fr ul li a { margin: 10px }
  199. .featured_pics ul li section { left: 7%; width: 84%; }
  200. .featured_pics ul li p { font-size: 12px; }
  201. }