assessMent.css 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. .col-md-6{margin: 0;padding: 0;}
  2. *{padding: 0;margin: 0;box-sizing:border-box;font-family: "微软雅黑";}
  3. .assessMent .container {width: 1200px;}
  4. .assessMent{width: 100%;height: 78px;background: fbfbfb;box-shadow: 0px 7px 15px #CCC ;position: relative;}
  5. .assessMent .container ul li{float: left;width:290px;margin-top: -28px;}
  6. .assessMent .container ul li img{height: 106px;margin-right: 20px;transition: all .5s;}
  7. .assessMent .container ul li:first-child+li+li span{margin-right: 60px;}
  8. .assessMent .container ul li span{color: #2a6597;font-size: 18px;vertical-align: top;margin-top: 54px;display: inline-block;margin-right: 45px;transition: all .5s;}
  9. .assessMent .container ul li:first-child+li+li+li span{margin-right: 7px;}
  10. .assessMent .container ul li img.line{height: 74px;vertical-align: top;margin-top: 26px;}
  11. .assessMent .container ul li:hover{cursor: pointer;}
  12. .assessMent .container ul li:hover .people{margin-left: -10px;}
  13. .assessMent .container ul li:hover span{margin-left: -10px;}
  14. .carouselt{height:470px;}
  15. .process{width:1200px;height:520px;margin:30px auto 0;position:relative;}
  16. .process_title{width:1200px;height:110px;background: url(../../../img/assessMent1.png);}
  17. .process_cont{width:1200px;height:250px;background: url(../../../img/assessMent10.png);
  18. margin-top:50px;position:relative;}
  19. .process_cont>div{border-radius: 50%;background: #fff;cursor: pointer;}
  20. .process_cont>div:hover>img{transform-origin:50% 50%;transform: rotate(180deg);}
  21. .process_cont>div:hover>div{display: block;}
  22. .process_cont>div>img{position: absolute;top:0;left:0;transition:all 500ms linear;}
  23. .process_cont>div>h1{line-height:85px;font-size:48px;color:#074F88;}
  24. .process_cont>div>p{font-size:16px;margin-top:-10px;color:#676767;}
  25. .process_cont>div>div{position: absolute;top:140px;left:20px;width:95px;height:115px;
  26. line-height: 22px;letter-spacing: 1px;color:#929090;display:none;}
  27. .process_cont>div.big_quan>div{width:105px;height:115px;top:160px;left:30px;}
  28. .process_cont>div.big_quan>h1{margin-top:10px;}
  29. .process_cont>div:nth-child(1){width:130px;height:130px;position:absolute;
  30. top:20px;left:0;text-align:center;}
  31. .process_cont>div:nth-child(2){width:153px;height:153px;position:absolute;
  32. top:60px;left:175px;text-align:center;}
  33. .process_cont>div:nth-child(3){width:130px;height:130px;position:absolute;
  34. top:-30px;left:330px;text-align:center;}
  35. .process_cont>div:nth-child(4){width:152px;height:152px;position:absolute;
  36. top:50px;left:475px;text-align:center;}
  37. .process_cont>div:nth-child(5){width:152px;height:152px;position:absolute;
  38. top:-50px;left:635px;text-align:center;}
  39. .process_cont>div:nth-child(6){width:129px;height:129px;position:absolute;
  40. top:100px;left:775px;text-align:center;}
  41. .process_cont>div:nth-child(7){width:152px;height:152px;position:absolute;
  42. top:110px;left:930px;text-align:center;}
  43. .process_cont>div:nth-child(8){width:130px;height:130px;position:absolute;
  44. top:-10px;left:1080px;text-align:center;}
  45. .process_btn{width:1200px;height:50px;text-align: center;margin-top:30px;}
  46. .process_btn>a{width: 150px;height: 40px;display: inline-block;color: #ffffff;font-size: 16px;
  47. line-height: 40px;text-align: center;background: #ffb200;letter-spacing: 2px;}
  48. .process_btn>a:nth-child(1){margin-right:30px;}
  49. .process_btn>a:hover{background:#f9bb73;}
  50. .services{width:100%;height:670px;margin:0 auto;position:relative;background:url(../../../img/assessMent11.png) no-repeat center center;}
  51. .services>div{width:1200px;height:670px;margin:0 auto;position:relative;}
  52. .services_left{width:420px;height:620px;position:absolute;top:90px;left:0;}
  53. .services_left>div{width:420px;height:165px;margin-bottom:20px;position:relative;
  54. background:url(../../../img/assessMent20.png);transition:all 400ms linear;}
  55. .services_left>div:hover{transform-origin: 50% 50%;transform:scale(1.05);}
  56. .services_title{position: absolute;width:25px;height:165px;top:10px;left:25px;
  57. color:#fff;font-size:18px;}
  58. .services_p{width:350px;height:140px;position: absolute;top:4px;
  59. left:61px;padding:15px;letter-spacing: 1px;line-height:22px;color:#5F5E5E;}
  60. .services_title1{position: absolute;width:25px;height:165px;top:10px;left:25px;
  61. color:#fff;font-size:16px;line-height:18px;}
  62. .services_p1{width:350px;height:140px;position: absolute;top:4px;
  63. left:61px;padding:5px 10px;letter-spacing: 1px;line-height:22px;color:#5F5E5E;}
  64. .services_title2{position: absolute;width:25px;height:165px;top:10px;left:25px;
  65. color:#fff;font-size:18px;line-height:22px;}
  66. .services_p3{width:255px;height:60px;position: absolute;top:4px;
  67. left:61px;padding:15px;letter-spacing: 1px;line-height:22px;color:#5F5E5E;}
  68. .services_title3{position: absolute;width:25px;height:165px;top:10px;left:32px;
  69. color:#fff;font-size:18px;line-height:22px;}
  70. .services_center{width:343px;height:620px;position:absolute;top:90px;left:430px;}
  71. .services_center_p{width:325px;height:185px;background:url(../../../img/assessMent21.png);margin: 0 auto;transition:all 400ms linear;}
  72. .services_center_p:hover{transform-origin: 50% 50%;transform:scale(1.05);}
  73. .services_center_img{width:343px;height:275px;margin-top:60px;
  74. background: url(../../../img/assessMent22.png);}
  75. .services_right{width:420px;height:620px;position:absolute;top:90px;right:0;}
  76. .services_right>div{width:420px;height:165px;margin-bottom:20px;position:relative;
  77. background:url(../../../img/assessMent20.png);transition:all 400ms linear;}
  78. .services_right>div:hover{transform-origin: 50% 50%;transform:scale(1.05);}
  79. .policies{width:1200px;height:720px;margin:0 auto;position:relative;}
  80. .policies_title{width:1200px;height:100px;margin-top:20px;
  81. background:url(../../../img/assessment16.png);}
  82. .policies_cont{width:1200px;height:315px;position:relative;}
  83. .cont_img{width:568px;height:315px;position: absolute;top:20px;left:0;
  84. background:url(../../../img/assessMent12.png);}
  85. .cont_p{width:580px;height:315px;position: absolute;top:20px;right:0;}
  86. .cont_p h5{letter-spacing: 1px;color:#888686;}
  87. .policies .line{width:30px;height:3px;background:#FFB200;}
  88. .cont_p h4{letter-spacing: 1px;color:#444;margin:10px 0;font-weight:bold;line-height: 25px;
  89. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;}
  90. .cont_p p{letter-spacing: 1px;color:#888686;line-height: 22px;
  91. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 6;}
  92. .more{width:200px;height:50px;position: absolute;bottom:0;right:0;background:#2F83CE;
  93. text-align: center;line-height: 50px;color:#fff;}
  94. .more>span:nth-child(1){font-size:26px;cursor: pointer;}
  95. .more>span:nth-child(2){font-size:18px;cursor: pointer;}
  96. .more>span:nth-child(2)>a{color:#fff;}
  97. .policies_bot{width:1200px;height:180px;margin-top:50px;}
  98. .bot{width:370px;height:180px;margin-left:40px;padding: 15px;transition:all 300ms linear;
  99. background: #F8F8F8;display: inline-block;vertical-align: top;}
  100. .bot:hover{box-shadow:0 0 5px 3px #ddd ;}
  101. .policies_bot>a:nth-child(1)>.bot{margin-left: 0;;}
  102. .bot h5{letter-spacing: 1px;color:#888686;}
  103. .bot h4{letter-spacing: 1px;color:#444;margin:10px 0;font-weight:bold;font-size:15px;
  104. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
  105. .bot p{letter-spacing: 1px;color:#888686;line-height: 22px;
  106. text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 3;}
  107. .advantages{width:100%;height:550px;margin:0 auto;position:relative;background:#F8F8F8;}
  108. .advantages>div{width:1200px;height:520px;margin: 0 auto;}
  109. .advantages_title{width:1200px;height:100px;margin-top:20px;
  110. background:url(../../../img/assessMent15.png);}
  111. .advantages_cont{width:1200px;height:500px;background: url(../../../img/assessMent14.png) no-repeat center center;
  112. position:relative;}
  113. .advantages_cont>div{width:270px;height:50px;position: absolute;}
  114. .advantages_cont>div>span{font-size:22px;color:#3B3B3B;margin-right:10px;}
  115. .advantages_cont>div:nth-child(1){top:100px;left:50px;}
  116. .advantages_cont>div:nth-child(2){top:100px;right:10px;}
  117. .advantages_cont>div:nth-child(3){top:180px;left:100px;}
  118. .advantages_cont>div:nth-child(4){top:180px;right:60px;}
  119. .advantages_cont>div:nth-child(5){top:260px;left:150px;}
  120. .advantages_cont>div:nth-child(6){top:260px;right:110px;}
  121. #bottom{margin-top:-150px;}