index_home.css 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. *{padding: 0;margin: 0;box-sizing:border-box;font-family: "微软雅黑";}
  2. #index_fruit{width:1200px;height:450px;margin: 50px auto;}
  3. .fruit_h3{width:1200px;height:80px;line-height: 80px;}
  4. .fruit_h3>h3{color:#074F88;font-size:26px;letter-spacing:3px;margin: 0 auto;display: inline-block;font-weight: normal;}
  5. .fruit_h3 a{font-size: 16px;color: #ffb200;margin-left: 12px;height: 26px;
  6. line-height: 26px;display: inline-block;font-weight: normal;text-decoration:none}
  7. .fruit_h3 a:hover{color:#ff8200;}
  8. .fruit_cont{width:1200px;height:400px;}
  9. .fruit_cont>div{display: inline-block;width:250px;height:365px;margin-left:50px;
  10. overflow: hidden;position: relative;}
  11. .fruit_cont>div:nth-child(1){margin-left: 0px;}
  12. .fruit_content{width:250px;height:365px;position: absolute;top:0;left:0;
  13. transition:all 500ms linear;}
  14. .fruit_content:hover{top:-365px;}
  15. .fruit_content>img{width:250px;height:185px;display:block;}
  16. .cont_p{width:250px;height:180px;}
  17. .cont_p>h5{height:34px;font-size: 16px;color:#3C3B3B;text-align: center;margin: 10px 20px 0;line-height: 25px;font-weight:bold;}
  18. .cont_p>p{font-size: 14px;color:#838282;text-align: left;margin: 25px 5px 0px;line-height:25px;
  19. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 4;}
  20. .cont_img{width:250px;height:365px;}
  21. #index_demand{width:1200px;height:420px;margin: 0 auto;}
  22. .demand_cont{width:1200px;height:340px;border-top: 1px solid #F1F1F1;border-bottom: 1px solid #F1F1F1;
  23. padding:10px;}
  24. .demand_cont>div:nth-child(1){width:1200px;height:160px;border-bottom: 1px solid #F1F1F1;}
  25. .demand_cont>div:nth-child(2)>a>div{padding-top:10px;}
  26. .demand_cont>div>a{text-decoration:none}
  27. .demand_cont>div>a>div{width:290px;height:150px;border-left: 1px solid #F1F1F1;
  28. display: inline-block;box-sizing: border-box;padding: 0 10px;}
  29. .demand_cont>div>a:nth-child(1)>div{border-left:none;}
  30. .demand_img{width:300px;height:75px;position: relative;}
  31. .demand_img>img{width:75px;height:75px;display: inline-block;}
  32. .demand_img>div{width:185px;height:75px;display: inline-block;position: absolute;left:90px;top:0;}
  33. .demand_img>div>h5{margin: 0;margin-top:10px;font-size: 15px;letter-spacing: 2px;height:16px;font-weight: bold;color:#3B3B3B;font-family: "微软雅黑";
  34. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
  35. .demand_img>div>p{margin: 0;margin-top:10px;height:30px;line-height:25px;width:210px;position: relative;padding-left:25px;}
  36. .demand_cont>div>a:nth-child(5)>div{margin-top: 20px;border-left: none;}
  37. .demand_img>div>p>span{position: absolute;left:0;top:0;}
  38. .demand_p{font-size:14px;color:#838282;width:275px;height:65px;margin:5px 0 0 0;line-height:22px;
  39. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 3;}
  40. #index_policy{width:1200px;height:400px;margin: 50px auto 0;}
  41. #index_policy>div>a{float: right;width:190px;height:50px;color:#fff;line-height: 50px;font-size:16px;
  42. text-align: center;background:#2F83CE;margin-top: 15px;position: relative;padding-left:10px;}
  43. #index_policy>div>a span{font-size:25px;line-height: 40px;position: absolute;top:5px;left:40px;}
  44. .policy_cont{width:1200px;height:320px;position:relative;}
  45. .policy_img{width:470px;height:300px;display:inline-block;position:absolute;left:0;top:0;}
  46. .policy_img>img{width:470px;height:300px;}
  47. .policy_p{width:700px;height:300px;display:inline-block;padding-left:55px;position:absolute;left:470px;top:0;}
  48. .policy_p>a>div{width:630px;height:55px;margin-top:20px;position: relative;cursor: pointer;}
  49. .policy_p>a>div:hover>div>h4{color:#F68705;}
  50. .policy_p>a>div:hover>div>p{color:#F68705;}
  51. .policy_p>a>div:hover>div>h5{color:#F68705;}
  52. .policy_date{width:80px;height:55px;position: absolute;top:0;left:0;text-align:left;padding-top:5px;}
  53. .policy_date>h4{color:#505050;font-size: 20px;font-weight: bold;letter-spacing: 2px;}
  54. .policy_date>p{color:#7A7878;}
  55. .policy_line{width:0;height:45px;position: absolute;top:0;left:95px;border-left:1px solid #BCBBBB;}
  56. .policy_p_cont{width:510px;height:55px;position: absolute;top:0;right:0;}
  57. .policy_p_cont>h5{font-size:15px;color:#3B3B3B;margin-top: 0;font-weight: bold;}
  58. .policy_p_cont>p{color:#7f7f7f;font-size:14px;margin-top:5px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
  59. #index_man{width:100%;height:600px;margin: 100px auto 0;background:rgba(120,120,120,0.1);position: relative;}
  60. .index_man>img{margin: 0 auto;width:640px;height:100px;display: block;position:absolute;left:280px;top:-50px;}
  61. .index_cont{width:12000px;height:400px;padding:60px 0 0;position:absolute;bottom:0;left:0;}
  62. .index_man{width:1200px;height:400px;margin:0 auto;position: relative;}
  63. .index_man>div{width:1200px;height:400px;margin:0 auto;position: relative;overflow: hidden;}
  64. .index_man>div>span{position:absolute;top:225px;cursor:pointer;z-index:10;}
  65. .man_left{left:45px;}
  66. .man_right{right:40px;}
  67. .index_cont>div{width:320px;height:255px;margin-left:60px;position:relative;margin-top:30px;display:inline-block;}
  68. .index_cont>div:nth-child(1){}
  69. .index_oneman{width:320px;height:200px;background: #fff;left:0;bottom:0;position: absolute;padding-top:90px;}
  70. .index_oneman>img{width:100px;height:100px;border-radius: 50%;position:absolute;top:-50px;right:20px;}
  71. .appellation{width:175px;height:30px;line-height:30px;position:absolute;top:20px;left:25px;font-size:15px;font-weight:bold;color:#3C3B3B}
  72. .definition{width:100px;height:30px;line-height:30px;text-align: center;position: absolute;
  73. top:55px;right:20px;font-size:17px;font-weight:normal;color:#074F88;}
  74. .index_oneman>p{padding:0 20px;font-size:14px;color:#7F7F7F;line-height: 30px;height:90px;
  75. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 3;}
  76. #bottom{margin:-170px auto 0;}
  77. /*左右轮播*/
  78. .carousel{position: relative;width: 1200px;}
  79. .need_imgs{width: 1018px;overflow: hidden;position: absolute;left: 50%;margin-left: -500px;top: 0;}
  80. .carousel .need_prev{width: 30px;height: 34px;font-size: 24px;text-align: center;line-height: 34px;background: #686868;display: inline-block;color: #FFFFFF;position: absolute;top:90px;left:50px;box-shadow: 2px 2px 10px #333333;}
  81. .carousel ul{float: left;width: 100000px;}
  82. .carousel ul li{float: left;margin-left: 10px;margin-right: 10px;text-align: center;padding-bottom: 20px;}
  83. .carousel ul li p{font-size: 16px;color: #383838;line-height: 52px;background: #ffffff;box-shadow: 0 0 10px #616161;font-weight: bold;letter-spacing: 1px;
  84. width: 320px;padding-left: 10px;padding-right: 10px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-family: "Microsoft YaHei"}
  85. .carousel ul li p:hover{font-family: "Microsoft YaHei";color:#383838;}
  86. .carousel ul li img{width: 320px;height:160px;}
  87. .carousel .need_next{position: absolute;top:90px;right:30px;width: 30px;height: 34px;font-size: 24px;text-align: center;line-height: 34px;background: #686868;display: inline-block;color: #FFFFFF;box-shadow: 2px 2px 10px #333333;}
  88. .carousel .need_prev:hover,.carousel .need_next:hover{background: #003399;cursor: pointer;}
  89. .need_imgs ul li {position: relative;height: 216px;}
  90. .need_imgs ul li .need_black{position: absolute;top: 0 ;left: 0;width:320px ;height: 212px;background: rgba(0,0,0,.7);display: none;}
  91. .need_imgs ul li .need_black img{width: 29px;height: 24px;margin-top:78px;}
  92. .need_imgs ul li .need_black p{background: none;box-shadow: none;font-size: 14px;color: #FFFFFF;}
  93. .carousel ul li:hover .need_black{display: block;}
  94. /*精品成果鼠标经过*/
  95. .con_hover{position: absolute;top: 0 ;left:0px;width:220px ;height: 385px;background: rgba(0,0,0,.7);text-align: center;z-index: 58;display: none;}
  96. .con_hover a{width:100%;height:100%;display: block;}
  97. .con_hover img{width: 29px;height: 24px;margin-top:200px;margin-bottom: 10px;}
  98. .con_hover p{font-size: 14px;color: #FFFFFF;}
  99. .con_hover:hover{cursor: pointer;}
  100. /*转移过来的CSS*/
  101. html{font-size:62.5%;}
  102. .index_activity{position: relative;z-index:110;background: url(../../img/index_bannerbj.png) no-repeat center center;margin-top:-144px;height: 270px;box-shadow: 0 5px 10px 0 #e1e1e1;}
  103. .index_activity ul li{float: left;width: 190px;height:90px ;text-align: center;background-position-y: 100px;}
  104. .index_activity ul li strong{font-size: 36px;color: #ffbc09;font-weight: normal;}
  105. .index_activity ul li p{font-size: 16px;color: #074d88;font-weight: bold;}
  106. .index_activity ul{float: left;overflow: hidden;margin-top: 160px;}
  107. .index_activity form{float: right;position: relative;width: 270px;height: 44px;background: #FFFFFF;margin-top: 20px;box-shadow: 0 0 10px #CCCCCC;}
  108. .index_activity form .search{width: 20px;height: 20px;position: absolute;top: 12px;right:10px;}
  109. .index_activity form input{border: none;width:190px ;height: 32px;position:absolute;top: 6px;left: 40px;line-height: 32px;border-right: 2px solid #CCCCCC;}
  110. .index_activity form .index_use{width: 60px;height: 20px;position: absolute;top: 12px;left:8px}
  111. ::-webkit-input-placeholder{color:#CCCCCC !important;}
  112. .index_activity form .search:hover{cursor: pointer;}
  113. .index_select {display: none;}
  114. /*banner*/
  115. .carouselt{ position:relative; overflow: hidden;width:100%;height:470px; }
  116. .ct-img-big{ position:absolute; width:15360px !important;}
  117. .ct-img-big li{ float: left; }
  118. .btn{ position: absolute; display: block;}
  119. .btn-pre{top:220px;left:220px;}
  120. .btn-next{top:220px;right:220px;}
  121. .index-bj{margin-top: -135px;position: relative;z-index: 110;}