css.css 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792
  1. @charset "utf-8";
  2. /* Css Reset */
  3. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
  4. form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; }
  5. fieldset,img { border: 0; }
  6. address,caption,cite,code,dfn,em,th,var,i { font-weight:normal; font-style:normal; }
  7. ol,ul,li { list-style: none; }
  8. caption,th { text-align: left; }
  9. h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size:100%; }
  10. q:before,q:after { content:''; }
  11. abbr,acronym { border: 0; }
  12. /* Public */
  13. html{ width:100%; }
  14. body{ width:100%; color:#555;font: 12px/1.5 "Microsoft YaHei","Helvetica Neue",Helvetica Neue,Helvetica,Hiragino Sans GB,tahoma,arial,sans-serif; -webkit-text-size-adjust: none;}
  15. a{color:#555;text-decoration:none; outline:none;}
  16. a:focus{outline:none;}
  17. a:hover {text-decoration:none; outline:none;}
  18. .fl{ float:left !important; }
  19. .fr{ float:right !important; }
  20. .mab{ margin-bottom:10px; }
  21. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  22. .clear{ clear:both}
  23. h1{
  24. font-size: 5em;
  25. }
  26. h2{
  27. font-size: 3em;
  28. }
  29. h3{
  30. font-size: 2em;
  31. }
  32. .content{
  33. position: relative;
  34. text-align: center;
  35. }
  36. #slide3 .content{
  37. position: relative;
  38. top: 72%;
  39. text-align: center;
  40. transform: translateY(0%);
  41. width: 83.5%;
  42. }
  43. #slide2 .content{
  44. position: relative;
  45. top: 51.5%;
  46. text-align: right;
  47. transform: translateY(0%);
  48. width: 69.9%;
  49. }
  50. /* Section 1
  51. * --------------------------------------- */
  52. #section0 h1{
  53. color: #444;
  54. }
  55. #section0 p{
  56. color: #333;
  57. opacity: 0.4;
  58. }
  59. /* Section 2
  60. * --------------------------------------- */
  61. #section1{background: #fff;}
  62. #section1 .options{
  63. padding: 100px 0 30px 0;
  64. }
  65. .mobile .section{background: #fff;}
  66. #section1 .content{
  67. width:1000px;
  68. margin:0 auto;
  69. padding: 20px 0;
  70. }
  71. #section1 p{
  72. filter:alpha(opacity=70);
  73. opacity: 0.7;
  74. font-size: 18px;
  75. color: #010101;
  76. text-align: left;
  77. margin: 35px;
  78. background: #fff;
  79. border-radius: 10px;
  80. }
  81. #section1 .options img{margin: 0 40px;}
  82. .section .fp-tableCell>.title{
  83. width: 1000px;
  84. margin: 0 auto;
  85. text-align: center;
  86. font-size: 26px;
  87. }
  88. .back_top{position: fixed;left: 50%;margin-left: 590px;bottom: 220px;width: 45px;height: 45px;background: #d2d2d2;border-radius: 50%;cursor: pointer;display: none;}
  89. .back_top>div{width: 100%;height: 100%;background: url(../images/go_top.png) center center no-repeat;}
  90. .btn_join_us{padding:10px 48px;color: #ea094b;border: 1px solid #ccc;border-radius: 25px;font-size: 22px;cursor:pointer;}
  91. .btn_join_us:hover{color: #fff;background: #ea094b;}
  92. .title-after-before{padding: 0 45px;position: relative;}
  93. .title-after-before:before{content:'';height: 1px;width: 30px;position: absolute;top:35px;left: 0;background: #555;}
  94. .title-after-before:after{content:'';height: 1px;width: 30px;position: absolute;top:35px;right: 0;background: #555;}
  95. .section .title-after-before:before,.section .title-after-before:after{top:18px;}
  96. .section .title img{width: 100%;}
  97. #section1 .btn_more{background: #fff;color: #e7004c;border: 1px solid #ccc;padding: 10px 35px;border-radius: 25px;font-size: 14px;}
  98. #section1 .btn_more:hover{color: #fff;background: #ea094b;}
  99. /* Section 3
  100. * --------------------------------------- */
  101. #section2{
  102. background:#fff1f1;
  103. }
  104. #section2 .content{
  105. width: 1000px;
  106. margin: 0 auto;
  107. }
  108. #section2 h1{
  109. color: #F2F2F2;
  110. }
  111. #section3{
  112. background: #fff;
  113. }
  114. #section3 .content{
  115. width: 1000px;
  116. margin: 0 auto;
  117. }
  118. #section4{
  119. background: #fff1f1;
  120. }
  121. #section4 .content{
  122. width: 1000px;
  123. margin: 0 auto;
  124. }
  125. #section5 {background: #fff;}
  126. #section5 .mab-box{
  127. margin: 60px 200px 60px auto;
  128. height: 550px;
  129. }
  130. #section5 .mab-box img{width: 100%;}
  131. #section5 .content{
  132. width: 1000px;
  133. margin: 0 auto;
  134. }
  135. #section6{
  136. height: auto !important;
  137. }
  138. .lianxi-box{position: absolute;left: 820px;top: 0; display: inline-block;width: 200px;height: 550px;}
  139. article, section, time, aside {display: block;}
  140. .point-time {content: "";position: absolute;width: 13px;height: 13px;top:50%;-webkit-transform:translateY(-50%); left: 20px;background: #1c87bf;margin-left: -4px;border-radius: 50%;}
  141. .point-red {background-color: #e70444;}
  142. .content {width: 100%;margin: 10px auto;}
  143. .content article {position: relative;}
  144. .content article section {padding:8px 0;position: relative;}
  145. .content article section:nth-of-type(3){padding: 20px 0;}
  146. .content article section:last-child{padding:40px 0;}
  147. .content article section:before {content: "";width: 1px;top:0;bottom:0;left: 22px;background: #e70444;position: absolute;}
  148. .content article section time {display: block;}
  149. .content article section time > span {display: block;margin-left: 45px;color:#e70444;}
  150. .content article section aside {color: #3a3a38;margin-left:55px;margin-right: 5px;text-align: left;}
  151. .content article section aside p{margin-bottom: 0;font-size:13px;}
  152. .content article section aside .things{color:#222;margin-top: 5px;}
  153. .point-time.app{width: 40px;height: 20px;left: 6px;border-radius: 5px;padding: 10px 0;color: #fff;}
  154. .point-time.tel{width: 30px;height: 30px;left:11px;background: url(../images/wap_icon_tel.png) center center /30px no-repeat #fff;}
  155. .point-time.address{width: 30px;height: 30px;left:11px;background: url(../images/wap_icon_lbs.png) center center /30px no-repeat #fff;}
  156. .point-time.company{width: 30px;height: 30px;left:11px;background: url(../images/wap_icon_company.png) center center /30px no-repeat #fff;}
  157. .point-time.wechat{width: 30px;height: 30px;left:11px;background: url(../images/wap_icon_wechat.png) center center /30px no-repeat #fff;}
  158. .new_li{list-style: none;position: absolute; width: 80%;left: 10%;bottom: 10px;}
  159. .new_li li{display: inline-block;width: 30%;padding: 0 10px;}
  160. .new_li li img{width: 100%;}
  161. .news_list{list-style: none;width: 1000px;position: absolute;left: 50%;top:75%;margin-left: -500px;}
  162. .news_list li{float: left;position: relative;background: #f8d7d7; width: 300px;height: 150px;padding: 3px;margin: 0 10px 0 0;}
  163. .news_list li img{height: 100%; cursor:pointer;}
  164. .news_list .tit{position: absolute;right: 0;top: 50%;-webkit-transform: translateY(-50%);font-size: 20px;color: #d50058;width: 52%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  165. .nav_off{position: fixed;width: 110px;height: 131px;background: url(../images/menu_hide.png) left top no-repeat;left: 0;top: 50%;margin-top: -150px;cursor: pointer;z-index: 99;}
  166. .shop_off{position: fixed;width: 110px;height: 131px;background: url(../images/menu_shop.png) left top no-repeat;left: 0;top: 50%;margin-top:50px;cursor: pointer;z-index: 2;}
  167. .nav_on{width: 500px;height: 500px;background: url(../images/logo_1.png) 10px center no-repeat;position: fixed;left:0;top: 50%;margin-top: -255px;display: none;z-index: 100;border: 35px solid transparent;}
  168. .nav_on>div{position: relative;width: 500px;height: 500px;}
  169. .line_1{position: absolute;left:140px;top:70px;}
  170. .gsjj_menu{position: absolute;width: 88px;height: 88px;background: url(../images/home_menu_off.png) center center no-repeat; left:128px; top: 0;}
  171. .gsjj_menu:hover{background: url(../images/home_menu_on.png) center center no-repeat;}
  172. .line_2{position: absolute;left:182px;top: 100px;}
  173. .news_menu{position: absolute;width: 88px;height: 88px;background: url(../images/qyjj_menu_off.png) center center no-repeat;left:215px;top:33px;}
  174. .news_menu:hover{background: url(../images/qyjj_menu_on.png) center center no-repeat;}
  175. .line_3{position: absolute;left:210px;top:172px;}
  176. .team_menu{position: absolute;width: 88px;height: 88px;background: url(../images/news_menu_off.png) center center no-repeat;left:275px;top:115px;}
  177. .team_menu:hover{background: url(../images/news_menu_on.png) center center no-repeat;}
  178. .line_4{position: absolute;left:220px;top:235px;}
  179. .pro_menu{position: absolute;width: 88px;height: 88px;background: url(../images/pro_menu_off.png) center center no-repeat;left:285px;top:205px;}
  180. .pro_menu:hover{background: url(../images/pro_menu_on.png) center center no-repeat;}
  181. .line_5{position: absolute;left:210px;top:285px;}
  182. .join_menu{position: absolute;width: 88px;height: 88px;background: url(../images/team_menu_off.png) center center no-repeat;left:275px;top:290px;}
  183. .join_menu:hover{background: url(../images/team_menu_on.png) center center no-repeat;}
  184. .line_6{position: absolute;left:180px;top:325px;}
  185. .lbs_menu{position: absolute;width: 88px;height: 88px;background: url(../images/join_menu_off.png) center center no-repeat;left:215px;top:370px;}
  186. .lbs_menu:hover{background: url(../images/join_menu_on.png) center center no-repeat;}
  187. .line_7{position: absolute;left:140px;top:335px;}
  188. .tel_menu{position: absolute;width: 88px;height: 88px;background: url(../images/tel_menu_off.png) center center no-repeat;left:130px;top:410px;}
  189. .tel_menu:hover{background: url(../images/tel_menu_on.png) center center no-repeat;}
  190. .line_8{position: absolute;left:353px;top:199px;display: none;}
  191. .bottle_menu{position: absolute;width: 88px;height: 88px;background: url(../images/bottle_menu_off.png) center center no-repeat;left:416px;top:143px;display: none;}
  192. .bottle_menu:hover{background: url(../images/bottle_menu_on.png) center center no-repeat;}
  193. .line_9{position: absolute;left: 352px;top: 265px;display: none;}
  194. .water_menu{position: absolute;width: 88px;height: 88px;background: url(../images/water_menu_off.png) center center no-repeat;left:416px;top:273px;display: none;}
  195. .water_menu:hover{background: url(../images/water_menu_on.png) center center no-repeat;}
  196. .search_containner{position: absolute;width: 30%;height: 70%;top: 15%;right: 10%;background: rgba(235,63,109,.3);border-radius: 10px;}
  197. .search_box{background: #e7dee4;padding:0;height: 90%;margin-top: 6%;margin-top: 5%\9;border-radius: 10px;position: relative;overflow: hidden;}
  198. .search_box h3{text-align: center;padding: 30px 0 10px 0;}
  199. .select_address{padding: 10px 10%;}
  200. .search_content{color: #333;padding: 10px 10%;}
  201. .search_content input{border: 1px solid #e5e5e5;border-radius: 15px;padding: 5px 10px;margin-left: 20px;}
  202. .search_tb{padding: 10px 6%;height: 59.8%;overflow: hidden;}
  203. .search_tb table{border: 0;width: 100%;text-align: center;}
  204. .search_tb table th{background: #ea094b;font-size: 12px;padding: 5px 8px;text-align: center;}
  205. .search_tb table td{color: #333;font-size: 12px;padding: 5px 8px;}
  206. .footer a{color: #fff;}
  207. .footer_box_1{position: relative;width: 100%;height: 120px;background: #603f45;}
  208. .footer_box_1 ul{text-align: center;padding: 8px 0 0 0;position: absolute;top: 50%;left: 0;width: 100%;margin-top: -60px;}
  209. .footer_box_1 ul li{padding: 3px 10px;font-size: 14px;color: #bc9ea4;}
  210. .content1{position: relative;margin: 0 auto;width: 1024px;max-width: 1024px;}
  211. .content1 .item_1{padding: 70px 0 0 0;}
  212. .content1 .item_1 h3{font-size: 32px;font-weight: 500;text-align: left;}
  213. .content1 .item_1 p{text-align: left;font-size: 18px;padding: 10px 0 20px 0;line-height: 2;color: #474747;}
  214. .corporate_banner{text-align: center;position: relative;}
  215. .corporate_banner .title{position: absolute;left: 50%;top: 0;width: 230px;height: 169px;background: url(../images/gsjj_title.png) top center no-repeat;background-size: 80%;margin-left: -115px;}
  216. .corporate_banner .text{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background: #e5004d;padding: 10px 0;}
  217. .corporate_banner .li{width: 824px;margin: 0 auto; background: url(../images/logo_title.png) left center no-repeat;height: 100px;color: #fff;font-size: 40px;line-height: 100px;padding-left: 200px;}
  218. .team_dic_box{position: relative;width: 100%;height: 332px;padding: 40px 0;}
  219. .team_dic_box .left{width: 45%;float: left;margin-left: 4.5%;}
  220. .team_dic_box .right{width: 44%;float: left;margin-left: 2.5%;font-size: 18px;line-height: 2;padding-top: 15px;}
  221. .team_img1{height: 951px;padding: 50px 0;}
  222. .team_img2{height: 1139px;padding: 50px 0;}
  223. .team_img3{height: 1101px;padding: 50px 0;}
  224. .big_h1{text-align: center;padding: 80px 0 160px 0;}
  225. .footer_box{width: 100%;height:196px;background: #ea094b;}
  226. .footer_box ul{text-align: center;padding:0;position: absolute;top: 50%;left: 0;width: 100%;margin-top: -50px;}
  227. .footer_box ul li{padding: 3px 10px;font-size: 14px;color: #fff;}
  228. .footer_box .footer{position: relative;height:100%;}
  229. /* banner */
  230. .banner{ width:100%; height:100%; overflow:hidden; position:relative; border:0;}
  231. .banner .bd{ position:relative; z-index:0; height:100%;}
  232. .banner .bd ul{ width:100% !important; height:100% !important;}
  233. .banner .bd li{ width:100% !important; height:100%; }
  234. .banner .bd li .siteWidth{ width:100%; position:relative; margin:0 auto; height:100%; }
  235. .banner .bd li>a{ height:100%; display:block;position: relative;}
  236. .banner .hd{ width:100%; position:absolute; z-index:1; bottom:30px; left:0; height:30px; line-height:30px; text-align:center; }
  237. .banner .hd ul li{ cursor:pointer; display:inline-block; *display:inline; zoom:1; width:12px; height:12px; margin:6px; background:#fff;border: 1px solid #ea094b; overflow:hidden; line-height:9999px; filter:alpha(opacity=40);opacity:0.4;border-radius: 50%;}
  238. .banner .hd ul .on{ filter:alpha(opacity=100);opacity:1; background: #ea094b; }
  239. .banner .bd .banner_iteam {background-repeat:no-repeat;background-attachment:fixed;background-position:bottom center;background-size:1920px auto;overflow: hidden;}
  240. .banner .bd .banner_iteam img{width: 1920px;height: auto;margin: 0 auto;}
  241. .list_title{position: absolute;left: 0;top: 32%;width: 100%;}
  242. .list_cell{width: 1000px;margin: 0 auto;text-align: center;font-size:50px;}
  243. .list_containner{margin: 30px auto;width: 1000px;background: #fff;}
  244. .list_containner>p{font-size: 18px;margin: 30px 0;}
  245. .list_containner .img_box{padding: 20px 100px;}
  246. .list_containner .img_box img{width: 100%;}
  247. /* news css */
  248. .slideTxtBox{ width:1000px;text-align:left; }
  249. .slideTxtBox .hd{ height:34px; line-height:34px; padding:0 10px 0 20px;position:relative; }
  250. .slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:36px; }
  251. .slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;color: #555;border-radius: 25px;width: 100px;text-align: center;font-size: 16px;}
  252. .slideTxtBox .hd ul li.on{ background:#ea094b; border:0; color: #fff;}
  253. .slideTxtBox .bd ul{ padding: 17px 15px; zoom:1; }
  254. .slideTxtBox .bd li table{width: 100%; }
  255. .slideTxtBox .bd li{margin:50px 0 ;}
  256. .slideTxtBox .btn_more{width:60px;display: block;color: #ea094b;text-align: center;border: 1px solid #ccc;padding: 8px 0;border-radius: 25px;margin: 0 0 0 20px;}
  257. .slideTxtBox .btn_more:hover{background:#ea094b;color: #fff;border: 0;}
  258. .page_cell{text-align: center;}
  259. .page_cell span{ padding: 0 10px;font-size: 17px;cursor: pointer;}
  260. .page_cell span.on{color: #ea094b;}
  261. .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: #000;filter:alpha(opacity=70);opacity: .7;display: none;z-index: 2;}
  262. .loading-bg{width: 100%;height: 100%;background-color:#ccc;position: fixed;left: 0;top: 0;z-index: 999;color: #ea094b;}
  263. .loading-bg:after{content: 'loading...';position: absolute;left: 50%;top: 55%;-webkit-transform: translateX(-45%);transform: translateX(-45%);}
  264. .loading {
  265. width: 3px; height:3px;
  266. border-radius: 100%;
  267. box-shadow: 0 -10px 0 1px currentColor, /* top, 1px expand */
  268. 10px 0px currentColor, /* right */
  269. 0 10px currentColor, /* bottom */
  270. -10px 0 currentColor, /* left */
  271. -7px -7px 0 .5px currentColor, /* left-top, 0.5px expand */
  272. 7px -7px 0 1.5px currentColor, /* right-top, 1.5px expand */
  273. 7px 7px currentColor, /* right-bottom */
  274. -7px 7px currentColor; /* left-bottom */
  275. -webkit-animation: loading 1s step-start infinite;
  276. animation: loading 1s step-start infinite;
  277. /*center*/
  278. position: absolute;
  279. top: 0; right: 0; bottom: 0; left: 0;
  280. margin: auto;
  281. }
  282. .joinus_box{width: 969px;margin:100px auto 0 auto;}
  283. .joinus_box .cell{border:1px solid #ede3e3;-webkit-box-shadow:-1px 0 0px white,1px 0 0px white,0 -1px 0px white,0 2px 5px #ede3e3;border-bottom-right-radius:10px;border-bottom-left-radius:10px;margin-bottom:70px;}
  284. .joinus_box .btn_box{padding: 40px 0;}
  285. .joinus_box .cell{margin-bottom: 40px;}
  286. .joinus_box .cell img{width: 100%;}
  287. /* 本例子css */
  288. .txtScroll-top{ width:306px; overflow:hidden; position:relative; border:0; }
  289. .txtScroll-top .hd{ overflow:hidden; height:40px;line-height: 40px; background:#ea094b; padding:0 10px; color: #fff; }
  290. .txtScroll-top .hd .prev,.txtScroll-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;cursor:pointer;}
  291. .btn_new_more{position: absolute;right:20px;top:7px;width: 80px;height: 25px;background: url(../images/btn_more_content.png) center center no-repeat;background-size: 100%;}
  292. .txtScroll-top .hd .next{}
  293. .txtScroll-top .hd ul{ float:left; overflow:hidden; zoom:1;display: none;}
  294. .txtScroll-top .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer;}
  295. .txtScroll-top .hd ul li.on{ background-position:0 0; }
  296. .txtScroll-top .bd{ padding:15px; }
  297. .txtScroll-top .infoList li{ height:24px; line-height:24px;font-size: 14px;width: 270px;}
  298. .txtScroll-top .infoList li a{color:#333;}
  299. .txtScroll-top .infoList li .date{ float:right; color:#999; }
  300. /*企业新闻*/
  301. .m-slide-box{position: relative;padding: 50px 0 0 0;}
  302. .border_1{border-top: 1px solid #ccc;padding: 30px 0;}
  303. .m-slide{ position: relative; width:1000px; height: 250px;background: #fff;margin:0 auto;border-radius: 8px;}
  304. .m-slide .img { float: left; position: relative }
  305. .m-slide .img li, .m-slide .img a, .m-slide .img { display: block; width: 600px; height: 250px }
  306. .m-slide .img img{width: 280px;height: 180px;padding: 35px 20px 35px 20px;float: left;cursor: pointer;}
  307. .m-slide .img li { position: absolute; left: 0; top: 0 }
  308. .m-slide .img .first { display: block }
  309. .m-slide .tab { float: right;height: 180px;padding: 25px 20px 25px 0;}
  310. .m-slide .tab li { *margin-bottom: -3px; width: 353px;}
  311. .m-slide .tab .first { border-top: 0 }
  312. .m-slide .tab a { text-decoration: none; display: block; position: relative; width: 352px; height:49px;}
  313. .m-slide .tab a:hover{background: #ea094b;color: #fff;}
  314. .m-slide .tab a b { position: absolute; left: 0; top: 20px; width: 4px; height: 11px; overflow: hidden }
  315. .m-slide .tab a span { position: absolute; overflow: hidden }
  316. .m-slide .tab a .title { left: 105px; top: 15px; height: 20px; line-height: 20px; font-size: 16px;}
  317. .m-slide .tab a .des { left: 10px; top: 15px; height: 20px; line-height: 20px;font-size: 16px;}
  318. .m-slide .tab .first a { height: 50px }
  319. .m-slide .tab .on a { background-color: #ea094b;}
  320. .m-slide .tab .on a span {color: #fff;}
  321. .m-slide .right-box{width: 280px;height: 180px;float: left;position: relative;text-align: left;padding: 35px 0;}
  322. .m-slide .right-box .tit-line2{font-size: 18px;line-height: 1.2;cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  323. .m-slide .right-box .tit-line2:hover{color: #ea094b;}
  324. .m-slide .btn-more{border: 1px solid #ccc;padding: 7px 30px;border-radius: 25px;color: #ea094b;position: absolute;left: 0;bottom:35px;font-size: 14px;cursor: pointer;}
  325. .m-slide .btn-more:hover{background: #ea094b;color: #fff;}
  326. .m-slide .content-des{font-size: 14px;color: #b2b2b2;padding:5px 0;max-height:42px;white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
  327. .left-menu{position: absolute;left: 60px;top:30px;padding: 4px 20px; background: #fff1f1;font-size: 20px;}
  328. .right-menu{position: absolute;right: 60px;top:30px;padding: 4px 20px; background: #fff1f1;font-size: 20px;cursor: pointer;}
  329. .right-menu:hover{color: #ea094b;}
  330. /*企业新闻手机版banner*/
  331. .news_banner{ width:100%; height:100%; overflow:hidden; position:relative; border:0;text-align: left;display: none;}
  332. .news_banner .bd{ position:relative; z-index:0;margin: 0 15px 5px 15px;}
  333. .news_banner .bd li{ width:100% !important; height:100%;min-height: 130px;}
  334. .news_banner .bd li .siteWidth{ width:100%; position:relative; margin:0 auto; height:100%; }
  335. .news_banner .bd li>a{display:block;position: relative;margin:0;border-top:1px solid #ede3e3;border-radius: 5px;padding:0 15px;-webkit-box-shadow:-1px 0 1px #ede3e3,1px 0 1px #ede3e3,1px 0 1px #ede3e3,0 2px 5px #ede3e3;}
  336. .news_banner .bd li>a img{width:190px;-webkit-transform: scaleX(.5) scaleY(.7) translateX(-50%);}
  337. .news_banner .hd{ width:100%; height:18px; line-height:18px; text-align:center; }
  338. .news_banner .hd ul li{ cursor:pointer; display:inline-block; *display:inline; zoom:1; width:8px; height:8px; margin:6px; background:#fff;border: 1px solid #ea094b; overflow:hidden; line-height:9999px; filter:alpha(opacity=40);opacity:0.4;border-radius: 50%;}
  339. .news_banner .hd ul .on{ filter:alpha(opacity=100);opacity:1; background: #ea094b; }
  340. .news_banner .right-box{position: absolute;width: 55%;left: 40%;top: 0;padding: 15px 0;}
  341. .news_banner .right-box .tit-line2{line-height: 1.2;cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #000;font-size: 14px;}
  342. .news_banner .content-des{font-size: 12px;color: #b2b2b2;padding:5px 0;max-height:60px;white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;}
  343. /* 科学喂养css */
  344. .scrollBox{ width:1000px; background:#fff;padding:10px 0 0 0;position:relative;margin:0 auto;overflow:hidden;zoom:1;}
  345. .scrollBox .piclist{ overflow:hidden; zoom:1;}
  346. .scrollBox .ohbox{overflow:hidden; position:relative;width:910px;left:45px;top: 15px;}
  347. .scrollBox .piclist li{float:left; display:inline; width:210px;background:#fff;margin-right:10px;padding:5px;}
  348. .scrollBox .piclist li span{height:25px;line-height:25px;display:block;text-align:center;font-size: 18px;margin-top: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  349. .scrollBox .pageBtn span{ display:block;width:30px;height:60px;position:absolute;top:90px;cursor:pointer;text-indent:-999em;overflow:hidden; }
  350. .scrollBox .pageBtn .prev{left:7px;background: url(../images/scroll_prev.png) center center no-repeat;opacity: .5;filter: alpha(opacity=50);}
  351. .scrollBox .pageBtn .next{right:7px;background: url(../images/scroll_next.png) center center no-repeat;opacity: .5;filter: alpha(opacity=50);}
  352. .scrollBox .pageBtn .prev:hover,.scrollBox .pageBtn .next:hover{opacity: 1;filter: alpha(opacity=100);}
  353. .scrollBox .pageBtn .list{overflow:hidden;zoom:1;margin:10px 0 0 413px; }
  354. .scrollBox .pageBtn .list li{ float:left; display:inline; width:15px;height:15px;cursor:pointer;margin-left:10px;overflow:hidden;color: #fff;}
  355. /*科学喂养手机版*/
  356. .group_banner{border-top:1px solid #ede3e3;-webkit-box-shadow:-1px 0 1px #ede3e3,1px 0 1px #ede3e3,1px 0 1px #ede3e3,0 2px 5px #ede3e3;margin:0 15px;display: none;}
  357. .group_banner .row{display: table;}
  358. .group_banner .row>div{display: table-cell;width: 50%;padding: 10px;position: relative;}
  359. .group_banner .row>div:first-child{padding-right:5px;}
  360. .group_banner .row>div:last-child{padding-left: 5px;}
  361. .group_banner .row>div img{width: 100%;}
  362. /* 团队风采css */
  363. .picBtnTop{ width:800px; height:680px;padding:5px; position:relative; overflow:hidden; zoom:1;margin:60px auto;}
  364. .picBtnTop .hd{ width:100px; height:590px;position:absolute; right:5px;padding:45px 0;}
  365. .picBtnTop .hd .iteam1{-webkit-transform: translateX(-100%);transform: translateX(-100%);}
  366. .picBtnTop .hd .iteam2{-webkit-transform: translateX(-30%);transform: translateX(-30%);}
  367. .picBtnTop .hd .iteam3{-webkit-transform: translateX(-30%);transform: translateX(-30%);}
  368. .picBtnTop .hd .iteam4{-webkit-transform: translateX(-100%);transform: translateX(-100%);}
  369. .picBtnTop .hd ul li{ width:100px; text-align:center; padding:13px 0;opacity: .5;cursor:pointer;filter: alpha(opacity=50);}
  370. .picBtnTop .hd ul li:first-child{padding: 0;}
  371. .picBtnTop .hd ul li:last-child{padding: 0;}
  372. .picBtnTop .hd ul li img{ width:100%; height:100%; border:0; cursor:pointer; vertical-align:bottom;border-radius: 50%;}
  373. .picBtnTop .hd ul li.on{opacity: 1;filter: alpha(opacity=100);}
  374. .picBtnTop .bd{ width:520px; height:520px; position:relative; padding:80px 0 80px 80px; }
  375. .picBtnTop .bd li{ position:relative; zoom:1; vertical-align:middle;}
  376. .picBtnTop .bd li .pic{ position:relative; z-index:0; }
  377. .picBtnTop .bd li .pic img{ width:100%; height:100%; vertical-align:bottom; }
  378. .picBtnTop .prev{position: absolute;right:210px;top: 5px;display: block;width: 63px;height:63px;background: url(../images/prev1.png) center center no-repeat;filter: alpha(opacity=50);opacity: 0.5;cursor:pointer;}
  379. .picBtnTop .next{position: absolute;right:210px;bottom: 5px;display: block;width: 63px;height:63px;background: url(../images/next1.png) center center no-repeat;filter: alpha(opacity=50);opacity: 0.5;cursor:pointer;}
  380. .picBtnTop .prev:hover,.picBtnTop .next:hover{filter: alpha(opacity=100);opacity: 1;}
  381. .picBtnTop .welcome_join{position: absolute;left: 0;bottom: 0;font-size: 0;line-height: 0;width: 207px;height: 207px;}
  382. .picBtnTop .welcome_join img{width: 100%;}
  383. .mobile_box{background:url(../images/joinus_bg.jpg) top center no-repeat;background-size:auto 100%; display: none;}
  384. /*手机端头部菜单*/
  385. .wap_header{height: 45px;position: absolute;width: 100%;top:0;background: url(../images/wap_logo.png) #ea0b4c center center no-repeat;background-size: 60px 21px;display: none;}
  386. .wap_menu{float: left;width: 45px;height: 45px;background: url(../images/wap_menu.png) center center no-repeat;background-size: 25px;}
  387. #section3 .mobile_joinus{display: none;}
  388. #section3 .mobile_joinus .title{font-size: 40px;color: #ea094b;margin: 20px 0;}
  389. #section3 .mobile_joinus .btn_more{background: #fff;border: 1px solid #ccc;font-size: 20px;padding: 5px 10px;border-radius: 25px;}
  390. #section3 .mobile_joinus .btn_join_tel{width: 70%;margin:40px auto 20px auto;}
  391. #section4 .wap_team_middle{width:200px;position: absolute;left:50%;top:50%;margin-left: -100px;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
  392. #section4 .wap_team_middle img{width: 100%;}
  393. .lock-wrap {position: absolute;left: 0;width: 100%;height: 100%;background: #f9ebeb;z-index: 10;display: none;}
  394. .lock-wrap .lock {position: absolute;left: 50%;top: 50%;width: 380px;height: 30px;margin: -15px 0 0 -190px;text-align: center;color: #ea094b;font-size: 25px;}
  395. .lock-wrap-ipad {position: absolute;left: 0;width: 100%;height: 100%;background: #f9ebeb;z-index: 10;display: none;}
  396. .lock-wrap-ipad .lock-ipad {position: absolute;left: 50%;top: 50%;width: 500px;height: 30px;margin: -15px 0 0 -250px;text-align: center;color: #ea094b;font-size: 25px;}
  397. .mobile_team_show{position: relative;display: none;}
  398. .mui-table-view {position: relative;margin-top: 20px;margin-bottom: 10px;padding-left: 0;list-style: none;}
  399. .mui-table-view.mui-grid-view {font-size: 0;display: block;padding: 0 10px 10px 0;white-space: normal;}
  400. .mui-table-view.mui-grid-view .mui-table-view-cell {display: inline-block;margin-right: -8px;padding: 10px 0 0 8px;text-align: center;vertical-align: middle;background: 0 0;position: relative;}
  401. .mui-table-view-cell>a:not(.mui-btn) {position: relative;display: block;overflow: hidden;margin: -11px -15px;padding: inherit;white-space: nowrap;text-overflow: ellipsis;color: inherit;}
  402. .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {margin: -10px 10px 0 -4px;}
  403. .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {width: 100%;max-width: 100%;height: auto;border: 0;}
  404. .mui-col-xs-6 {width: 50%;}
  405. .mui-table-view .mui-media, .mui-table-view .mui-media-body {overflow: hidden;}
  406. #section5 .wap-map-box{display:none;}
  407. .mobile {float: none; position: relative;overflow: hidden;}
  408. /*Hiding the checkbox*/
  409. #tm {display: none;}
  410. /*Content area*/
  411. .mobile section {position: relative; transition: all 0.45s;}
  412. .mobile section label {cursor: pointer; text-transform: uppercase;}
  413. /*Nav styles*/
  414. .sidenav {background: #fff; width: 200px;position: fixed; left: 0; top: 0; bottom: 0; padding-top: 40px;display: none;}
  415. .sidenav li {list-style-type: none;padding: 8px 20px;position: relative;text-align: center;}
  416. .sidenav a {text-decoration: none; }
  417. .sidenav a:hover{color: #eb1957;}
  418. .sidenav b {display: block;font-size: 14px;height: 40px;line-height: 40px;opacity: 0;-webkit-transform: translateX(50px); transform: translateX(50px); transition: all 0.4s;padding: 0 20px 0 60px;}
  419. /*Animation controls using checkbox hack*/
  420. /*Animate content area to the right*/
  421. #tm:checked ~ section {-webkit-transform: translateX(200px);transform: translateX(200px);}
  422. /*Animate links from right to left + fade in effect*/
  423. #tm:checked ~ .sidenav b {opacity: 1;-webkit-transform: translateX(0); transform: translateX(0);}
  424. /*Adding delay to link animation - in multiples of .08s*/
  425. /*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
  426. #tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}
  427. #tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}
  428. #tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}
  429. #tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}
  430. #tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}
  431. #tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}
  432. #tm:checked ~ .sidenav li:nth-child(7) b {transition-delay: 0.56s;}
  433. .sidenav .fa-home{background:url(../images/wap_icon_home.png) 20px center / 35px 35px no-repeat;}
  434. .sidenav .fa-jianjie{background:url(../images/wap_icon_jianjie.png) 20px center / 35px 35px no-repeat;}
  435. .sidenav .fa-news{background:url(../images/wap_icon_news.png) 20px center / 35px 35px no-repeat;}
  436. .sidenav .fa-join{background:url(../images/wap_icon_join.png) 20px center / 35px 35px no-repeat;}
  437. .sidenav .fa-pro{background:url(../images/wap_icon_pro.png) 20px center / 35px 35px no-repeat;}
  438. .sidenav .fa-team{background:url(../images/wap_icon_team.png) 20px center / 35px 35px no-repeat;}
  439. .sidenav .fa-tel{background:url(../images/wap_icon_telus.png) 20px center / 35px 35px no-repeat;}
  440. /*新闻详情*/
  441. .news_prev,.news_next{margin: 10px 0;font-size: 14px;}
  442. .news_prev a,.news_next a{color: #b2b2b2;}
  443. .news_next a:hover,.news_prev a:hover{color: #ea094b;}
  444. .return_news_list{position: absolute;right: 0;top: 12px;border: 1px solid #ccc;border-radius:25px;padding: 3px 25px;color: #ea094b;font-size: 14px;}
  445. .return_news_list:hover{background-color: #ea094b;color: #fff;}
  446. .back_btn{float: left;width: 105px;height: 120px;line-height: 120px;font-size: 26px;color: #999;text-align: left;cursor: pointer; border-right:1px solid #ccc;padding-left: 65px;background: url(../images/jiantou.png) left center no-repeat;}
  447. .back_btn:hover{background: url(../images/jiantou1.png) left center no-repeat;color: #ea094b;}
  448. .header_news_details{position: relative;border-bottom:1px solid #ccc;height: 120px;}
  449. .center_cell{margin: 0 auto;width: 980px;padding: 0 10px;height: 120px;}
  450. .news_content{margin: 70px auto;width: 1000px;text-align: center;padding-bottom: 200px;background: #fff;}
  451. .news_content .title{font-size: 24px;}
  452. .news_content .date_time{font-size: 14px;color: #b2b2b2;margin: 10px 0 45px 0;}
  453. .news_content .dic{font-size: 14px;margin: 10px 0 20px 0;}
  454. .news_content .details_content{width: 1000px;max-width: 1000px;overflow: hidden;text-align: left;}
  455. .news_content .details_content img{max-width: 100%;}
  456. .box_number{position: relative;text-align: left;margin: 30px 0;}
  457. .footer_fixed{position: fixed;left: 0;bottom: 0;width: 100%;}
  458. .more_content{text-align: left;padding: 15px 0;margin: 30px 0;}
  459. .more_content a{color: #0000FF;}
  460. /*小屏幕*/
  461. @media only screen and (min-width: 1024px) and (max-width:1279px) {
  462. .nav_off{background-size: 70%;}
  463. .shop_off{background-size: 65%;}
  464. #section1 .content,#section2 .content{width: 900px;}
  465. #section1 .options{padding: 10px 0 10px 0;}
  466. #section1 .options img{width: 100px;}
  467. #section1 p{margin: 25px 35px;}
  468. .m-slide-box {padding: 20px 0 0 0;}
  469. .left-menu{top: 0;}
  470. .right-menu{top: 0;}
  471. .m-slide{height: 160px;width: 900px;}
  472. .m-slide .img li, .m-slide .img a, .m-slide .img {height: 160px;width: 523px;}
  473. .m-slide .img img{height: 130px;width: 202px; padding: 15px 20px 15px 20px;}
  474. .m-slide .right-box{height: 130px;padding: 15px 0;}
  475. .m-slide .btn-more{bottom: 15px;}
  476. .border_1{padding: 25px 0;}
  477. .m-slide .tab{height: 130px; padding: 15px 20px 15px 0;}
  478. .m-slide .tab a{height: 30px;}
  479. .m-slide .tab a .title,.m-slide .tab a .des{top: 5px;}
  480. .scrollBox{width: 900px;}
  481. .scrollBox .ohbox{width: 770px;left: 65px;}
  482. .scrollBox .pageBtn .prev{left: 27px;}
  483. .scrollBox .pageBtn .next{right: 27px;}
  484. .scrollBox .piclist li{width: 100px;margin:0 40px;}
  485. .scrollBox .piclist li img{width: 100px;}
  486. .scrollBox .pageBtn span{top: 40px;}
  487. .scrollBox .piclist li span{font-size: 12px;}
  488. .joinus_box{width: 650px; margin: 20px auto 0 auto;}
  489. .joinus_box .btn_box {padding: 25px 0;}
  490. .picBtnTop{width: 700px; height: 380px; margin: 20px auto;}
  491. .picBtnTop .bd{ width:320px; height:320px;padding:30px 0 30px 80px; }
  492. .picBtnTop .hd{height: 320px;padding: 30px 0;}
  493. .picBtnTop .hd ul li{width: 50px;}
  494. .picBtnTop .welcome_join{width: 167px;height: 167px;}
  495. #section5 .mab-box{margin: 60px 300px 60px auto;width: 600px;height: 450px;}
  496. .content article section:nth-of-type(3) {padding: 5px 0;}
  497. .content article section:last-child {padding: 10px 0;}
  498. .lianxi-box{left: 720px;}
  499. .list_cell {font-size: 30px;}
  500. .list_containner {width: 900px;}
  501. .slideTxtBox {width: 900px;}
  502. .news_content{width: 900px;}
  503. .news_content .details_content {width: 900px;max-width: 900px;}
  504. .back_top{margin-left: 400px;}
  505. }
  506. @media only screen and (min-width: 1280px) and (max-width:1359px) {
  507. .nav_off{background-size: 70%;}
  508. .shop_off{background-size: 65%;}
  509. #section1 .options{padding: 10px 0 10px 0;}
  510. #section1 .options img{width: 100px;}
  511. #section1 p{margin: 25px 35px;}
  512. .m-slide-box {padding: 20px 0 0 0;}
  513. .left-menu{top: 0;}
  514. .right-menu{top: 0;}
  515. .m-slide{height: 160px;}
  516. .m-slide .img li, .m-slide .img a, .m-slide .img {height: 160px }
  517. .m-slide .img img{height: 130px;padding: 15px 20px 15px 20px;}
  518. .m-slide .right-box{height: 130px;padding: 15px 0;}
  519. .m-slide .btn-more{bottom: 15px;}
  520. .border_1{padding: 25px 0;}
  521. .m-slide .tab{height: 130px; padding: 15px 20px 15px 0;}
  522. .m-slide .tab a{height: 30px;}
  523. .m-slide .tab a .title,.m-slide .tab a .des{top: 5px;}
  524. .scrollBox .ohbox{width: 870px;left: 65px;}
  525. .scrollBox .pageBtn .prev{left: 27px;}
  526. .scrollBox .pageBtn .next{right: 27px;}
  527. .scrollBox .piclist li{width: 100px;margin:0 55px;}
  528. .scrollBox .piclist li img{width: 100px;}
  529. .scrollBox .pageBtn span{top: 45px;}
  530. .scrollBox .piclist li span{font-size: 12px;}
  531. .joinus_box{width: 650px; margin: 20px auto 0 auto;}
  532. .joinus_box .btn_box {padding: 25px 0;}
  533. .picBtnTop{width: 700px; height: 380px; margin: 20px auto;}
  534. .picBtnTop .bd{ width:320px; height:320px;padding:30px 0 30px 80px; }
  535. .picBtnTop .hd{height: 320px;padding: 30px 0;}
  536. .picBtnTop .hd ul li{width: 50px;}
  537. .picBtnTop .welcome_join{width: 167px;height: 167px;}
  538. #section5 .mab-box {margin: 30px 220px 30px auto;}
  539. }
  540. /*一般笔记本分辨率*/
  541. @media only screen and (min-width: 1360px) and (max-width:1366px) {
  542. .nav_off{background-size: 70%;}
  543. .shop_off{background-size: 65%;}
  544. #section1 .options{padding: 30px 0 10px 0;}
  545. #section1 .options img{width: 100px;}
  546. .m-slide-box {padding: 30px 0 0 0;}
  547. .left-menu{top: 10px;}
  548. .right-menu{top: 10px;}
  549. .m-slide{height: 160px;}
  550. .m-slide .img li, .m-slide .img a, .m-slide .img {height: 160px }
  551. .m-slide .img img{height: 130px;padding: 15px 20px 15px 20px;}
  552. .m-slide .right-box{height: 130px;padding: 15px 0;}
  553. .m-slide .btn-more{bottom: 15px;}
  554. .border_1{padding: 25px 0;}
  555. .m-slide .tab{height: 150px; padding: 15px 20px 15px 0;}
  556. .m-slide .tab a{height: 30px;}
  557. .m-slide .tab a .title,.m-slide .tab a .des{top: 5px;}
  558. .scrollBox .piclist li{width: 150px;margin:0 35px;}
  559. .scrollBox .piclist li img{width: 150px;}
  560. .scrollBox .pageBtn span{top: 80px;}
  561. .joinus_box{width: 750px; margin: 40px auto 0 auto;}
  562. .joinus_box .btn_box {padding: 30px 0;}
  563. .picBtnTop{width: 750px; height: 480px; margin: 20px auto;}
  564. .picBtnTop .bd{ width:420px; height:420px;padding:30px 0 30px 80px; }
  565. .picBtnTop .hd{height: 420px;}
  566. .picBtnTop .hd ul li{width: 65px;}
  567. .picBtnTop .welcome_join{width: 167px;height: 167px;}
  568. #section5 .mab-box{margin: 30px 220px 30px auto;}
  569. }
  570. @media only screen and (min-width: 1367px) and (max-width:1680px) {
  571. #section1 .options{padding: 50px 0 30px 0;}
  572. #section1 .options img{width: 150px;}
  573. .m-slide-box {padding: 30px 0 0 0;}
  574. .left-menu{top: 10px;}
  575. .right-menu{top: 10px;}
  576. .m-slide{height: 160px;}
  577. .m-slide .img li, .m-slide .img a, .m-slide .img {height: 160px }
  578. .m-slide .img img{height: 130px;padding: 15px 20px 15px 20px;}
  579. .m-slide .right-box{height: 130px;padding: 15px 0;}
  580. .m-slide .btn-more{bottom: 15px;}
  581. .border_1{padding: 25px 0;}
  582. .m-slide .tab{height: 150px; padding: 15px 20px 15px 0;}
  583. .m-slide .tab a{height: 30px;}
  584. .m-slide .tab a .title,.m-slide .tab a .des{top: 5px;}
  585. .joinus_box{width: 850px; margin: 40px auto 0 auto;}
  586. .joinus_box .btn_box {padding: 30px 0;}
  587. .picBtnTop{width: 750px; height: 480px; margin: 20px auto;}
  588. .picBtnTop .bd{ width:420px; height:420px;padding:30px 0 30px 80px; }
  589. .picBtnTop .hd{height: 420px;}
  590. .picBtnTop .hd ul li{width: 65px;}
  591. .picBtnTop .welcome_join{width: 167px;height: 167px;}
  592. #section5 .mab-box {margin: 50px 200px 50px auto;}
  593. }
  594. @media screen and (orientation:portrait) {
  595. /*移动设备竖屏*/
  596. body{background-color: #fff !important;}
  597. .sidenav{display: block;}
  598. .mobile {float:left;width: 100%;}
  599. .nav_off{display: none;}
  600. .shop_off{display: none;}
  601. #fp-nav{display: none;}
  602. #section1 .options img{width:20%;}
  603. .wap_header{display: block;top: 0;}
  604. .section .fp-tableCell>.title {width: 100%;margin:0 auto;font-size: 18px;}
  605. #section1 .content {width: 100%;margin: 0 auto;padding: 10px 0;}
  606. #section1 .options {padding: 10px 0 0 0;}
  607. #section1 p{margin: 10px 20px;font-size: 12px;}
  608. .m-slide-box {padding: 15px 0 0 0;}
  609. .m-slide{display: none;}
  610. .scrollBox{display: none;}
  611. #section2{background: #fff;}
  612. #section2 .content{width: 100%;}
  613. .border_1{padding: 20px 0 0 0;}
  614. .left-menu{left: 0;font-size: 14px;padding: 4px 15px;top:0;background: #fff;}
  615. .right-menu{font-size: 14px;top:0;padding: 4px 15px;right: 0;background: #fff;}
  616. .group_banner{display: block;}
  617. .news_banner{display: block;}
  618. .joinus_box{display: none;}
  619. .picBtnTop{display: none;}
  620. #section5 .mab-box{display: none;}
  621. .footer_box ul li{font-size: 12px;}
  622. .footer_box ul li:first-child{display: none;}
  623. .footer_box{height: 115px;}
  624. .footer_box ul{margin-top:0;-webkit-transform: translateY(-50%);}
  625. #section3{background: url(../images/joinus_bg1.jpg) center center no-repeat;background-size:auto 100%;}
  626. #section3 .content{width: 100%;}
  627. #section3 .mobile_joinus{display: block;}
  628. #section4 .content {width: 100%;}
  629. .mobile_team_show{display: block;}
  630. #section5 .content {width: 100%;}
  631. #section5 .wap-map-box{display: block;}
  632. .list_containner {width: 80%;}
  633. .list_cell {width: 100%;font-size: 20px;}
  634. .list_containner {margin: 10px auto;width: 90%;}
  635. .list_title { top:50%;-webkit-transform: translateY(-50%);}
  636. h2 {font-size: 16px;}
  637. .list_containner>p{font-size: 14px;margin: 10px 0;}
  638. .list_containner .img_box{padding: 10px 10px;}
  639. .slideTxtBox {width: 100%;}
  640. .slideTxtBox .bd ul{padding: 0;}
  641. .slideTxtBox .bd li{width: 100%;position: relative;overflow: hidden;margin: 15px 0;}
  642. .slideTxtBox .hd ul li{width: 35%;}
  643. .slideTxtBox .hd ul {float: none;position: relative;left: 0;top: 0;}
  644. .slideTxtBox .hd{padding: 10px 10%;}
  645. .title-after-before{padding: 0 25px;}
  646. .title-after-before:before,.title-after-before:after{top: 10px;width: 20px;}
  647. .section .title-after-before:before,.section .title-after-before:after{top:10px;}
  648. .header_news_details{display: none;}
  649. .news_content {margin: 0px auto;width: 100%;padding-bottom: 0px;padding-top: 65px;}
  650. .news_content .details_content {width: auto;padding: 0 15px;max-width: 100%;}
  651. .news_content .title {font-size: 16px;}
  652. .news_content .date_time {font-size: 12px;margin: 10px 0 10px 0;}
  653. .news_content .dic {font-size: 12px;}
  654. .more_content {padding: 15px 10px;margin: 10px 0;}
  655. .return_news_list{display: none;}
  656. .news_prev, .news_next {margin: 10px;font-size: 12px;}
  657. .pc_box{display: none;}
  658. .mobile_box{display: block;}
  659. .back_top {left: auto;right: 20px;bottom: 120px;}
  660. }
  661. /*4-417*2=834*/
  662. @media (device-height:480px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){
  663. .news_banner .content-des{-webkit-line-clamp: 2;}
  664. .list_cell {font-size: 14px;}
  665. .list_containner {margin: 10px auto;width: 90%;}
  666. h2 {font-size: 14px;}
  667. .list_containner>p{font-size: 12px;margin: 10px 0;}
  668. .list_containner .img_box{padding: 10px 10px;}
  669. .footer_box{height: 115px;}
  670. }
  671. /* 425*2=850*/
  672. @media (width:270px){
  673. .news_banner .content-des{-webkit-line-clamp: 2;}
  674. .list_cell {font-size: 14px;}
  675. .list_containner {margin: 10px auto;width: 90%;}
  676. h2 {font-size: 14px;}
  677. .list_containner>p{font-size: 12px;margin: 10px 0;}
  678. .list_containner .img_box{padding: 10px 10px;}
  679. .footer_box{height: 115px;}
  680. }
  681. /*5-504*2=1008*/
  682. @media (device-height:568px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){
  683. .news_banner .content-des{-webkit-line-clamp: 2;}
  684. .list_cell {font-size: 14px;}
  685. .list_containner {margin: 10px auto;width: 90%;}
  686. h2 {font-size: 14px;}
  687. .list_containner>p{font-size: 12px;margin: 10px 0;}
  688. .list_containner .img_box{padding: 10px 10px;}
  689. .footer_box{height: 115px;}
  690. }
  691. /* 567*1.5=850*/
  692. @media(width:360px){
  693. .news_banner .content-des{-webkit-line-clamp: 2;}
  694. .list_cell {font-size: 14px;}
  695. .list_containner {margin: 10px auto;width: 90%;}
  696. h2 {font-size: 14px;}
  697. .list_containner>p{font-size: 12px;margin: 10px 0;}
  698. .list_containner .img_box{padding: 10px 10px;}
  699. }
  700. /*6-603*2=1206*/
  701. @media (device-height:667px) and (min-width:375px) and (-webkit-min-device-pixel-ratio:2){
  702. }
  703. /*6p-665*2=1330*/
  704. @media (device-height:736px) and (min-width:414px) and (-webkit-min-device-pixel-ratio:2){
  705. }
  706. /*ipad竖屏*/
  707. @media screen and (orientation:portrait) and (width:768px) and (height:1024px) and (-webkit-min-device-pixel-ratio:2){
  708. .lock-wrap-ipad{display: block;}
  709. .nav_off{background-size: 70%;}
  710. .shop_off{background-size: 65%;}
  711. #section1 .content,#section2 .content{width: 900px;}
  712. #section1 .options{padding: 10px 0 10px 0;}
  713. #section1 .options img{width: 100px;}
  714. #section1 p{margin: 25px 35px;}
  715. .m-slide-box {padding: 20px 0 0 0;}
  716. .left-menu{top: 0;}
  717. .right-menu{top: 0;}
  718. .m-slide{height: 160px;width: 900px;}
  719. .m-slide .img li, .m-slide .img a, .m-slide .img {height: 160px;width: 523px;}
  720. .m-slide .img img{height: 130px;width: 202px; padding: 15px 20px 15px 20px;}
  721. .m-slide .right-box{height: 130px;padding: 15px 0;}
  722. .m-slide .btn-more{bottom: 15px;}
  723. .border_1{padding: 25px 0;}
  724. .m-slide .tab{height: 130px; padding: 15px 20px 15px 0;}
  725. .m-slide .tab a{height: 30px;}
  726. .m-slide .tab a .title,.m-slide .tab a .des{top: 5px;}
  727. .scrollBox{width: 900px;}
  728. .scrollBox .ohbox{width: 770px;left: 65px;}
  729. .scrollBox .pageBtn .prev{left: 27px;}
  730. .scrollBox .pageBtn .next{right: 27px;}
  731. .scrollBox .piclist li{width: 100px;margin:0 40px;}
  732. .scrollBox .piclist li img{width: 100px;}
  733. .scrollBox .pageBtn span{top: 60px;}
  734. .scrollBox .piclist li span{font-size: 12px;}
  735. .joinus_box{width: 650px; margin: 20px auto 0 auto;}
  736. .joinus_box .btn_box {padding: 25px 0;}
  737. .picBtnTop{width: 700px; height: 380px; margin: 20px auto;}
  738. .picBtnTop .bd{ width:320px; height:320px;padding:30px 0 30px 80px; }
  739. .picBtnTop .bd ul{width: 320px;height: 320px;}
  740. .picBtnTop .bd li{width: 320px;height: 320px;}
  741. .picBtnTop .bd li .pic img {width: 320px;height: 320px;}
  742. .picBtnTop .hd{height: 320px;padding: 30px 0;}
  743. .picBtnTop .hd ul li{width: 50px;}
  744. .picBtnTop .welcome_join{width: 167px;height: 167px;}
  745. #section5 .mab-box{margin: 10px auto;width: 800px;}
  746. .list_containner {width: 80%;}
  747. .list_cell {width: 100%;font-size: 20px;}
  748. .news_content{display: none;}
  749. .mobile_box{display: none;}
  750. }
  751. @media screen and (orientation:landscape) and (max-height:767px) and (-webkit-min-device-pixel-ratio:2){
  752. /*移动设备横屏*/
  753. .nav_off{display: none;}
  754. .shop_off{display: none;}
  755. #fp-nav{display: none;}
  756. .lock-wrap{display: block;}
  757. .pc_box{display: none;}
  758. .news_content{display: none;}
  759. }