main.css 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. @charset 'UTF-8';
  2. /* Reset css */
  3. html, body, div, footer, header, menu, nav {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
  4. .wk_list_about, .wk_view, .post_from, .post_msg_from { box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
  5. s {outline:0;}
  6. body{line-height:1.5}ol,ul{list-style:none}
  7. table{border-collapse:collapse;border-spacing:0}
  8. caption,th{text-align:left}
  9. sup,sub{font-size:100%;vertical-align:baseline}
  10. :link,:visited ,ins{text-decoration:none}
  11. blockquote,q{quotes:none}
  12. blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
  13. article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}
  14. /* Reset css end */
  15. /* Gobal css */
  16. html {font-size:625%; width:100%; height:100%;}
  17. body {font-family:'Helvetica Neue',Helvetica,STHeiti,'Microsoft YaHei',Arial,Verdana,sans-serif; font-size:14px; line-height:1.5; color:#121212; background:#f8f8f8; width:100%; height:100%; text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing: antialiased;}
  18. a:hover {color:#666; text-decoration:none;}
  19. a{color:#ea3340;text-decoration:none;outline:none;transition:all 0.3s; -webkit-transition:all 0.3s;-moz-transition:all 0.3s; -webkit-tap-highlight-color:rgba(0,0,0,0);}
  20. /*clear float*/
  21. .clearfix:after {font-size:0;line-height:0;content: "\020";display: block;height: 0;clear: both;}
  22. .clearfix {zoom: 1;}
  23. @font-face{
  24. font-family: 'fzltcxhjw';
  25. src: url("fzltcxhjw.ttf"),
  26. url("fzltcxhjw.woff");
  27. font-weight:bold;
  28. }
  29. /* Gobal css end */
  30. /* Font css */
  31. .f64{font-size:64px;}
  32. .f60{font-size:60px;}
  33. .f52{font-size:52px;}
  34. .f48{font-size:48px;}
  35. .f32{font-size:32px;}
  36. .f28{font-size:28px;}
  37. .f24{font-size:24px;}
  38. .f22{font-size:22px;}
  39. .f18{font-size:18px;}
  40. .f16{font-size:16px;}
  41. .f15{font-size:15px;}
  42. .f14{font-size:14px;}
  43. .f-family{font-family:'fzltcxhjw','Helvetica Neue',Helvetica,STHeiti,'Microsoft YaHei';}
  44. .fblack{color:#121212;}
  45. .fwhite{color:#fff;}
  46. .fblue{color:#133a58;}
  47. /* Font css end */
  48. /* Btn css */
  49. .comm-Btn,.comm-Btn:hover{ padding:0 44px; display:inline-block; line-height:44px; color:#FFF; text-decoration:none; border:1px solid #fff; border-radius:4px;}
  50. .comm-Btn:hover{background:#fff; color:#333; }
  51. .Btn-red,.Btn-red:hover{border:1px solid #ea3340; background:#ea3340; color:#FFF; }
  52. .Btn-small,.Btn-small:hover{margin:15px auto; height:34px; line-height:34px; padding:0 22px; color:#121212; border:1px solid #333; border-radius:4px; }
  53. .Btn-small:hover{background:#ea3340; color:#fff; border:1px solid #ea3340;}
  54. /* Btn css end */
  55. /* comm css */
  56. .wk-warp{margin:0 auto; width:100%; height:100%; background:#F6F6F6; }
  57. .container{margin:0 auto; padding:0 12px; max-width:1164px; min-width:1024px;}
  58. .wk-case,.wk-index-contact,.wk-clients,.wk-friends,.wk-items-list,.wk-abtdiv,.wk-gettouch,.wk-about,.wk-data,.wk-space,.wk-team,.wk-job{width:100%; min-width:1024px; padding:88px 0;}
  59. .bg-white{background-color:#ffffff;}
  60. .bg-gray{background-color:#f8f8f8;}
  61. /* title css */
  62. .title-index{margin:0; color:#121212; }
  63. .title-index span{display:inline-block; margin-right:15px; vertical-align:middle;}
  64. .title-index em{display:inline-block; margin-right:15px; color:#888; vertical-align:middle;}
  65. .title-index i{display:inline-block; width:50px; padding-top:1px; background:#ea3340; vertical-align:middle;}
  66. /* header*/
  67. .wk-header{position:fixed; left:0; top:0; padding:25px 0; height:60px; width:100%; z-index:1000; -moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; }
  68. .wk-header h1{float:left; margin:0;}
  69. .wk-header h1 a.logo{display:block; width:50px; height:50px; text-indent:-8889px; background:url(logo_main.png) no-repeat center; background-size:50px 50px; -moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
  70. .wk-header-scroll{padding:8px 0; height:60px; background:#FFF; background:rgba(255,255,255,.96); -moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; border-bottom:1px solid #ddd; }
  71. .wk-header-scroll h1 a.logo{display:block; width:150px; height:40px; background:url(logo.png) no-repeat center; background-size:150px 40px; text-indent:-8889px; -moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
  72. /*right menu*/
  73. .toggle-btn{display:none;}
  74. .wk-mobile-nav {display:none;}
  75. /*slider index*/
  76. #Slider-index .slick {margin: 0 auto; width:100%; min-width:1024px;}
  77. #Slider-index .slick div.slidbox{background-repeat:none; background-position:center; background-size:cover;box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}
  78. #Slider-index .slick div.slidbox div.container{display:table; height:100%;}
  79. #Slider-index .slick-prev:before, .slick-next:before { position:absolute; left: 0; top: 1px; color: #ccc;}
  80. #Slider-index .slick-prev {display:none; left: -35px;}
  81. #Slider-index .slick-next {display:none; right: -35px;}
  82. #Slider-index .slick-dots {bottom: 35px;}
  83. /*slider subpage*/
  84. /* footer */
  85. .wk-footer{background:#9a9c99;}
  86. .footer-box{float:left; width:50%;}
  87. .footer-box .footer-txt{clear:both; color:#eee;}
  88. .footer-nav{overflow:hidden; margin:0 0 30px;}
  89. .footer-nav li{float:left; padding:0 40px 0 0;}
  90. .footer-nav li a{display:block; color:#fff;}
  91. .footer-nav li a:hover{text-decoration:none; color:#ccc;}
  92. .logo-en{display:block; width:240px; height:34px; background:url(logo_en_2x.png) no-repeat center top; background-size:240px 18px;}
  93. .fr{float:right;}
  94. .tright{text-align:right;}
  95. /* index service item */
  96. .wk-service-item{width:100%; min-width:1024px;}
  97. .service-item li{float:left; width:33.3333%; text-align:center; border-left:1px solid #ddd;}
  98. .service-item li:last-child{border-right:1px solid #ddd;}
  99. .service-item li a,.service-item li a:hover{padding:22px 0; display:block; text-decoration:none; text-align:center; }
  100. .service-item li a:hover{background-color:#ea3340;}
  101. .service-item li a span{display:inline-block; padding:6px 6px 6px 96px; text-align:left;}
  102. .service-item li a span h3{margin:0; line-height:38px; color:#121212;}
  103. .service-item li a:hover span h3{color:#fff;}
  104. .service-item li a span p{line-height:26px; color:#888; }
  105. .service-item li a:hover span p{color:#f8f8f8; }
  106. .service-item li a span.service-ue{background:url(icon_ue.png) no-repeat 0px 0px; background-size:76px; -moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
  107. .service-item li a:hover span.service-ue{background:url(icon_ue.png) no-repeat 0px -76px; background-size:76px;}
  108. .service-item li a span.service-ui{background:url(icon_ui.png) no-repeat 0px 0px; background-size:76px;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
  109. .service-item li a:hover span.service-ui{background:url(icon_ui.png) no-repeat 0px -76px; background-size:76px; }
  110. .service-item li a span.service-dev{background:url(icon_dev.png) no-repeat 0px 0px; background-size:76px;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
  111. .service-item li a:hover span.service-dev{background:url(icon_dev.png) no-repeat 0px -76px; background-size:76px; }
  112. /* case*/
  113. .case-list{overflow:hidden;}
  114. .case-list li{float:left; }
  115. .case-list li a,.case-list li a:hover{display:block; text-decoration:none; color:#121212;}
  116. .case-list li a img{margin:0 0 10px; display:block; width:100%;}
  117. .case-list li a h4,.case-list li a:hover h4{margin:0; width:90%; line-height:40px; color:#121212; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  118. .case-list li a p,.case-list li a:hover p{width:94%; margin:0 3%; height:60px; line-height:20px; color:#666; overflow:hidden;}
  119. /* index contact */
  120. .wk-index-contact{background:url(bg_contactimg.jpg) no-repeat center; background-size:cover; background-attachment:fixed; }
  121. .wk-index-contact h3{margin:0 auto 20px; width:60%; line-height:1.75; text-align:center;color:#fff; }
  122. .wk-index-contact p{margin:0 auto 15px; width:80%; line-height:1.75; text-align:center;color:#eee; }
  123. .wk-index-contact p span{display:inline-block; margin:0 20px;}
  124. .btn-box{margin:40px auto 0;}
  125. /* client commemt */
  126. #Slider-say .slick { width:960px; padding:60px 0 80px; margin: 0 auto; text-align:center;}
  127. #Slider-say .slick div.slidbox h3{margin:0 0 40px; line-height:1.7; text-align:center;}
  128. #Slider-say .slick div.slidbox p{margin:0 0 20px; color:#666; text-align:center;}
  129. #Slider-say .slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
  130. #Slider-say .slick-prev { display:none; left: -35px;}
  131. #Slider-say .slick-next { display:none; right: -35px;}
  132. #Slider-say .slick-dots { bottom: 35px;}
  133. #Slider-say .slick-dots li button { border:2px solid #666; background:#666; display: block; height: 10px; width: 10px; border-radius:5px; opacity: 0.35; outline: none; line-height: 0; font-size: 0; color: transparent; cursor: pointer; outline: none; }
  134. #Slider-say .slick-dots li.slick-active button{ opacity: 1; border:2px solid #ea3349; background: transparent;}
  135. /* friends */
  136. .wk-friends{padding:44px 0;}
  137. .wk-friends ul.friends-list li{float:left;margin:10px 0; padding:10px 20px; width:25%; }
  138. .wk-friends ul.friends-list li img{margin:0 auto; display:block; width:100%;}
  139. .mark-info{position:absolute; bottom:0px; left:0; width:100%; text-align:center; padding:20px 0; background:rgba(234,51,64,.76);_background:#000; color:#fff;}
  140. .mark-info h4{margin:0; line-height:2;}
  141. /*show txt style*/
  142. .show-txtstyle-center{vertical-align:middle; display:table-cell;text-align:center;}
  143. .show-txtstyle-center p.iconimg img{margin:0 auto 2%; width:180px; }
  144. .show-txt-left{text-align:left;}