You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
15 KiB

2 years ago
  1. @charset "utf-8";
  2. .wrapper{margin-bottom:0}
  3. .banner{height:300px;height:33vh}
  4. .banner img{height:35%}
  5. .detail-page section{padding:30px 0;min-height: 50vh;}
  6. .detail-page .banner .banner-cover{left:0}
  7. .detail-page .newsd-bg .banner-cover{right:0;left:auto;mix-blend-mode:initial}
  8. section.news-list,section.download, .join-us{background:url(../img/detailbg.jpg);background-color:#FFF;background-repeat:no-repeat;background-position:left center;background-position-x:30px;-moz-background-size:auto 85%;-webkit-background-size:auto 85%;-o-background-size:auto 85%;background-size:auto 85%}
  9. .detail-page .download-bg{background:url(../img/banner-doewnload.jpg) no-repeat top center;background-size:cover}
  10. .detail-page .news-bg{background:url(../img/banner-news.jpg) no-repeat center center;background-size:cover}
  11. .detail-page .newsd-bg{background:url(../img/banner-newsd.jpg) no-repeat center center;background-size:cover}
  12. .detail-page .join-bg{background:url(../img/banner-join.jpg) no-repeat center center;background-size:cover}
  13. .detail-page .banner-text-detail{bottom:30px;height:25%;position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%)}
  14. .detail-page .banner-text-detail img{position:relative;right:0;height:100%;max-height:79px}
  15. .detail-page .container2{width:1000px;float:right}
  16. .date{font-size:12px;color:#666}
  17. .news p{margin-bottom:5px;margin-right:45px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#1a1a1a;font-size:15px}
  18. .new-news li{border-bottom:solid 1px #d1d4d5;margin-bottom:25px;padding:0 0 25px}
  19. .new-news a:last-child li{margin-bottom:30px}
  20. .arrow{display:inline-block;float:right;width:13px;margin-top:5px;margin-right:8px;box-sizing:border-box;-webkit-transition:.3s;transition:.3s}
  21. .new-news li:hover .arrow{margin-right:0}
  22. .new-news li:hover p,.new-news li:hover .date{background:#ededed}
  23. .arrow img{width:100%}
  24. .news-list p{margin-bottom:5px;/*margin-right:45px;*/overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#1a1a1a;font-size:15px;display:inline-block;max-width:90%}
  25. .news-list .new-news .news-category{font-size:12px;color:#666;position:absolute;left:0;top:28px}
  26. .new-news li{padding-left:0;padding-right:0}
  27. h2{font-size:32px;margin-bottom:35px}
  28. .arrow{width:20px}
  29. h2:after{-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);-moz-transform-origin:0 0;-ms-transform-origin:0 0}
  30. .detail-title{background:url(../img/detail-title-bg.png);width:115px;height:40px;text-align:center;background-repeat:no-repeat;margin-bottom:50px;margin-top:10px}
  31. .detail-title p{line-height:40px;margin:0 0 0 -10px;font-size:15px;color:#FFF;font-weight:400}
  32. .new-news a:last-child li{border:none}
  33. .download .wrapper,.news-list .wrapper,.news-detail .wrapper{background:transparent}
  34. .news-detail h2{font-size:32px;margin-bottom:10px;line-height:1.3}
  35. .news-detail-p{color:#666;line-height:24px}
  36. .news-detail-p p{margin-bottom:30px;font-size:15px}
  37. .news-detail-p p span{color:#ee7624;border-bottom:3px solid #ccc}
  38. .news-detail-p img{max-width:100%;margin-bottom:15px}
  39. .news-detail table{-webkit-box-shadow:rgba(0,0,0,0.1) 1px 1px 5px;-moz-box-shadow:rgba(0,0,0,0.1) 1px 1px 5px;box-shadow:rgba(0,0,0,0.1) 1px 1px 5px;border:0}
  40. .news-detail thead tr{color:#fff;background:#ee7624;text-align:center;border:0}
  41. .news-detail tr th{background:#fff2e9;font-weight:400;padding-left:10px}
  42. .news-detail thead tr td{padding:10px 0;border:0}
  43. .news-detail tbody tr{color:#555;border:0}
  44. .news-detail tbody tr td{text-align:center;padding:15px 10px;border:0}
  45. .news-detail tbody tr td.lalign{text-align:left}
  46. .news-detail h4,.download-post h4{font-size:18px}
  47. .news-detail h2:after{display:none}
  48. .n-title{border-bottom:4px solid #e1e1e1;margin-bottom:21px;padding-bottom:15px}
  49. .detail-date{font-size:12px;display:inline-block}
  50. .detail-date img{margin:-2px 5px 0 0}
  51. .news-detail-p img{max-width:100%;height:auto!important;}
  52. .breadcrumbnav{display:inline-block;float:right;color:#9C9E9F;font-size:13px;cursor:default}
  53. .breadcrumbnav a{color:#9C9E9F}
  54. .back-btn{text-align:center;display:inline-block;width:100%;margin-top:30px}
  55. .hide-text{text-indent:100%;white-space:nowrap;overflow:hidden;display:block}
  56. .ease-all{-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;transition:all 400ms ease-in-out}
  57. .select{position:relative;display:block;margin:0 auto;width:100%;max-width:130px;min-width:120px;color:#FFF;vertical-align:middle;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;float:right}
  58. .select .placeholder{position:relative;display:block;background-color:rgba(40,44,42,0.06);z-index:1;padding:8px 15px;border-radius:2px;cursor:pointer;color:#b3b3b3}
  59. .select .placeholder:hover{background:#34383c}
  60. .select .placeholder:after{position:absolute;right:1em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-family:'FontAwesome';content:'\f078';z-index:10}
  61. .select.is-open .placeholder:after{content:'\f077'}
  62. .select.is-open ul{display:block}
  63. .select ul{display:none;position:absolute;overflow:hidden;overflow-y:hidden;width:100%;background:#fff;border-radius:2px;top:100%;left:0;list-style:none;margin:5px 0 0;padding:0;z-index:100;max-height:120px}
  64. .select ul li{display:block;text-align:left;padding:8px 15px;color:#999;cursor:pointer}
  65. .select ul li:hover{background:#ee7624;color:#fff}
  66. .jpack-share-top{display:inline-block;width:100%;padding:0 15px}
  67. .sharrre{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-weight:400;margin-right:5px;position:relative;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
  68. .sharrre .share,.sharrre .count{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;display:inline-block;padding:0;text-decoration:none!important;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
  69. .sharrre .share{color:#fff;float:left;font-weight:700;text-decoration:none}
  70. .sharrre:hover .share{border:none;color:#fff;text-decoration:none}
  71. .sharrre .count{background-color:#fff;font-weight:700;position:relative;text-align:center}
  72. .share-small .share,.share-small .count{font-size:12px;height:20px;line-height:20px}
  73. .share-small .share{border-top-left-radius:3px;border-bottom-left-radius:3px;padding:0 0 0 24px;width:20px}
  74. .share-small .sharrre:hover .share{width:60px}
  75. .share-small .facebook:hover .share{width:50px}
  76. .share-small .pinterest:hover .share{width:45px}
  77. .share-small .googlePlus:hover .share{width:40px}
  78. .share-small .count{border-top-right-radius:3px;border-bottom-right-radius:3px;float:right;width:42px}
  79. .share-medium .share,.share-medium .count{font-size:13px;height:25px;line-height:25px}
  80. .share-medium .share{border-top-left-radius:3px;border-bottom-left-radius:3px;padding:0 0 0 28px;width:28px}
  81. .share-medium .count{border-top-right-radius:3px;border-bottom-right-radius:3px;float:right;width:42px}
  82. .share-medium .sharrre:hover .share{width:65px}
  83. .share-medium .facebook:hover .share{width:55px}
  84. .share-medium .pinterest:hover .share{width:50px}
  85. .share-medium .googlePlus:hover .share{width:45px}
  86. .share-tall .share{border-bottom-left-radius:3px;border-bottom-right-radius:3px;font-size:13px;height:25px;line-height:25px;padding-left:20px;text-align:center;width:100%}
  87. .share-tall .googlePlus .share{padding-left:16px}
  88. .share-tall .facebook .share{padding-left:18px}
  89. .share-tall .count{border-top-left-radius:3px;border-top-right-radius:3px;display:block;float:none;font-size:16px;height:55px;line-height:55px;width:75px}
  90. .share-small .share:before,.share-medium .share:before,.share-tall .share:before{line-height:1;display:block;font-family:'Genericons';font-size:13px;height:20px;top:4px;left:6px;text-indent:0;-webkit-font-smoothing:antialiased;position:absolute;width:20px;z-index:3}
  91. .share-medium .share:before{font-size:14px;top:5px;left:7px}
  92. .share-tall .share:before{bottom:0;top:auto}
  93. .twitter .share:before{content:'\f202'}
  94. .facebook .share:before{content:'\f204'}
  95. .googlePlus .share:before{content:'\f206';font-size:16px;line-height:14px}
  96. .youtube .share:before{content:'\f213'}
  97. .digg .share:before{content:'\f221'}
  98. .delicious .share:before{content:'\f202'}
  99. .pinterest .share:before{content:'\f209'}
  100. .linkedin .share:before{content:'\f207'}
  101. .stumbleupon .share:before{content:'\f223'}
  102. .share-small .pinterest .share:before{font-size:12px}
  103. .share-small .linkedin .share:before{font-size:16px;top:1px}
  104. .share-small .stumbleupon .share:before{font-size:16px;top:3px}
  105. .share-medium .pinterest .share:before{font-size:13px;top:6px}
  106. .share-medium .linkedin .share:before{font-size:17px;top:3px}
  107. .share-medium .stumbleupon .share:before{font-size:16px;top:5px}
  108. .share-tall .facebook .share:before{left:10px}
  109. .share-tall .googlePlus .share:before{left:13px}
  110. .share-tall .pinterest .share:before{font-size:13px;bottom:-1px}
  111. .share-tall .linkedin .share:before{font-size:17px;bottom:2px}
  112. .share-tall .stumbleupon .share:before{font-size:16px}
  113. .share-filled .twitter .share{background:#09b0ed}
  114. .share-filled .twitter .count,.share-filled .twitter .count:hover{color:#09b0ed;border:1px solid #09b0ed}
  115. .share-filled .facebook .share{background:#3d5a98}
  116. .share-filled .facebook .count,.share-filled .facebook .count:hover{color:#3d5a98;border:1px solid #3d5a98}
  117. .share-filled .googlePlus .share{background:#dd4c39}
  118. .share-filled .googlePlus .count,.share-filled .googlePlus .count:hover{color:#dd4c39;border:1px solid #dd4c39}
  119. .share-filled .linkedin .share{background:#035a87}
  120. .share-filled .linkedin .count,.share-filled .linkedin .count:hover{color:#035a87;border:1px solid #035a87}
  121. .share-filled .youtube .share{background:#cc181e}
  122. .share-filled .youtube .count,.share-filled .youtube .count:hover{color:#cc181e;border:1px solid #cc181e}
  123. .share-filled .pinterest .share{background:#cb2127}
  124. .share-filled .pinterest .count,.share-filled .pinterest .count:hover{color:#cb2127;border:1px solid #cb2127}
  125. .share-filled .stumbleupon .share{background:#eb4923}
  126. .share-filled .stumbleupon .count,.share-filled .stumbleupon .count:hover{color:#eb4923;border:1px solid #eb4923}
  127. .share-filled .twitter:hover .count{background:#09b0ed!important}
  128. .share-filled .facebook:hover .count{background:#3d5a98!important}
  129. .share-filled .googlePlus:hover .count{background:#dd4c39!important}
  130. .share-filled .linkedin:hover .count{background:#035a87!important}
  131. .share-filled .youtube:hover .count{background:#cc181e!important}
  132. .share-filled .pinterest:hover .count{background:#cb2127!important}
  133. .share-filled .stumbleupon:hover .count{background:#eb4923!important}
  134. .share-filled .sharrre:hover .count{color:#fff}
  135. .share-outlined .twitter .share,.share-outlined .twitter .count,.share-outlined .twitter .count:hover{border:1px solid #09b0ed;color:#09b0ed}
  136. .share-outlined .facebook .share,.share-outlined .facebook .count,.share-outlined .facebook .count:hover{border:1px solid #3d5a98;color:#3d5a98}
  137. .share-outlined .googlePlus .share,.share-outlined .googlePlus .count,.share-outlined .googlePlus .count:hover{border:1px solid #dd4c39;color:#dd4c39}
  138. .share-outlined .linkedin .share,.share-outlined .linkedin .count,.share-outlined .linkedin .count:hover{border:1px solid #035a87;color:#035a87}
  139. .share-outlined .youtube .share,.share-outlined .youtube .count,.share-outlined .youtube .count:hover{border:1px solid #cc181e;color:#cc181e}
  140. .share-outlined .pinterest .share,.share-outlined .pinterest .count,.share-outlined .pinterest .count:hover{border:1px solid #cb2127;color:#cb2127}
  141. .share-outlined .stumbleupon .share,.share-outlined .stumbleupon .count,.share-outlined .stumbleupon .count:hover{border:1px solid #eb4923;color:#eb4923}
  142. .share-outlined.share-small .share,.share-outlined.share-medium .share{border-right:none!important}
  143. .share-outlined.share-tall .share{border-top:none!important}
  144. .share-outlined .twitter:hover .share,.share-outlined .twitter:hover .count{background:#09b0ed}
  145. .share-outlined .facebook:hover .share,.share-outlined .facebook:hover .count{background:#3d5a98}
  146. .share-outlined .googlePlus:hover .share,.share-outlined .googlePlus:hover .count{background:#dd4c39}
  147. .share-outlined .linkedin:hover .share,.share-outlined .linkedin:hover .count{background:#035a87}
  148. .share-outlined .youtube:hover .share,.share-outlined .youtube:hover .count{background:#cc181e}
  149. .share-outlined .pinterest:hover .share,.share-outlined .pinterest:hover .count{background:#cb2127}
  150. .share-outlined .stumbleupon:hover .share,.share-outlined .stumbleupon:hover .count{background:#eb4923}
  151. .share-outlined .sharrre:hover .count,.share-outlined .sharrre:hover .share{color:#fff}
  152. .download-post{margin-bottom:50px;text-align:center;display:inline-block;width:100%;border:#ebebeb 1px solid;position:relative}
  153. .download-post:hover{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-webkit-box-shadow:rgba(0,0,0,0.2) 4px 10px 10px;-moz-box-shadow:rgba(0,0,0,0.2) 4px 10px 10px;box-shadow:rgba(0,0,0,0.2) 4px 10px 10px}
  154. .download-post:before{background:url(../img/shadow-right.png) bottom center no-repeat;content:'';display:block;width:100px;height:15px;position:absolute;bottom:-10px;right:-7px;z-index:3;opacity:.5}
  155. .download-post:after{background:url(../img/shadow-left.png) bottom center no-repeat;content:'';display:block;width:100px;height:15px;position:absolute;bottom:-10px;left:-10px;z-index:3;opacity:.5}
  156. .download-post .download-details{position:relative;background:#fff;text-align:center;padding:30px 10px 0}
  157. .download-post p{color:#aaa;font-size:13px}
  158. .download-post h4{margin:0 auto 3px}
  159. .download-button{width:70%;min-width:180px;max-width:225px;margin-bottom:30px;height:50px;display:inline-block;border:3px solid #aaa;font-family:'Roboto',sans-serif;font-size:18px;font-weight:500;text-align:center;text-decoration:none;color:#ee7624;overflow:hidden;position:relative}
  160. .download-button .icon{margin-right:6px}
  161. .download-button .face-primary,.download-button .face-secondary{display:block;padding:0 32px;line-height:48px;transition:margin .4s}
  162. .download-button .face-primary{background-color:#aaa;color:#fff}
  163. .download-post:hover .download-button .face-primary{background-color:#ee7624;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
  164. .download-post:hover .download-button{border:3px solid #ee7624;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
  165. .download-button:hover .face-primary{margin-top:-50px}
  166. .download-button:active{top:3px}
  167. .face-secondary,.face-secondary:hover{color:#ee7624!important}
  168. .download-button .genericon-cloud-download,.download-button .genericon-document{font-size:20px;vertical-align:middle;margin-top:-4px}
  169. .news-list .about-nav a {
  170. display:inline-block}
  171. .news-list .about-nav{ padding: 0;
  172. margin-top: 10px; z-index:1}
  173. .news-list .detail-title{
  174. float:left}
  175. .bg-joinus{ padding: 15px;
  176. background: #ffebdd;
  177. border-radius: 10px;
  178. display: inline-block;
  179. margin-bottom: 30px;}
  180. .news-detail .news-detail-p a{ color: #ee7624;
  181. text-decoration: underline;}