support.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{margin:0;padding:0;font-size:12px;line-height:22px;font-family:"Microsoft YaHei",Arial;-webkit-text-size-adjust:none;}
  4. html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p{margin:0;padding:0;}
  5. input,select,textarea{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;}
  6. a{color:#333;text-decoration:none;}
  7. .tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}
  8. .dis{display:block;}.undis{display:none;}
  9. .fl{float:left;}.fr{float:right;}.cl{clear:both;}.fb{font-weight:bold;}.fnb{font-weight:200;margin-left:-1px;}
  10. .hr_1,.hr_10{font-size:1px;line-height:1px;clear:both;}
  11. .hr_1{height:1px;}.hr_10{height:10px;}
  12. input[type="text"]:focus,input[type="password"]:focus,textarea:focus{outline:none;}
  13. .header{
  14. position: relative;
  15. margin: 0 auto;
  16. max-width: 1160px;
  17. height: 71px;
  18. padding: 0 5%;
  19. align-items: center;
  20. display: flex;
  21. justify-content: space-between;
  22. }
  23. @media (min-width: 1160px){
  24. .header {
  25. padding: 0;
  26. width: 90%;
  27. }
  28. }
  29. .header .logo img{
  30. max-height: 50px;
  31. }
  32. .header .language {
  33. display: inline-block;
  34. cursor: pointer;
  35. }
  36. .header .language img {
  37. vertical-align: middle;
  38. }
  39. .header .language label {
  40. color: #0754b4;
  41. font-size: 15px;
  42. font-weight: 300;
  43. margin-right: 8px;
  44. cursor: pointer;
  45. }
  46. .header .language .arrow-down {
  47. width: 10px;
  48. height: 6px;
  49. }
  50. .header .language-box {
  51. display: none;
  52. padding: 10px 0;
  53. position: absolute;
  54. width: 134px;
  55. background: #fff;
  56. border: 1px solid #d8d8d8;
  57. border-radius: 3px;
  58. box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
  59. right: 0;
  60. top: 50px;
  61. z-index: 1000;
  62. }
  63. .header .language-box p a{
  64. display: block;
  65. padding: 7px 40px 7px 20px;
  66. overflow: hidden;
  67. color: #333;
  68. font-size: 16px;
  69. }
  70. .header .language-box p a:hover{
  71. background: #f3f3f3;
  72. color: #0754b4;
  73. }
  74. .main .container-divider{
  75. border-top: 1px solid #ddd;
  76. margin-bottom: 20px;
  77. }
  78. .main .hero{
  79. margin-bottom: 60px;
  80. height: 200px;
  81. padding: 0 20px;
  82. text-align: center;
  83. background: url('../ecshe_img/bg_support.jpg') center;
  84. background-size: cover;
  85. }
  86. .main .hero-inner{
  87. position: relative;
  88. top: 50%;
  89. transform: translateY(-50%);
  90. max-width: 610px;
  91. margin: 0 auto;
  92. }
  93. .main .hero-inner .search-full input{
  94. max-width: 100%;
  95. font-size: 1rem;
  96. font-weight: 300;
  97. outline: none;
  98. transition: border .12s ease-in-out;
  99. }
  100. .main .hero-inner .search-full input[type="search"]{
  101. border: 1px solid #fff;
  102. border-radius: 30px;
  103. box-sizing: border-box;
  104. color: #999;
  105. height: 40px;
  106. padding-left: 40px;
  107. padding-right: 20px;
  108. -webkit-appearance: none;
  109. width: 100%;
  110. }
  111. .main .hero-inner .search-full .icon{
  112. position: absolute;
  113. top:25%;
  114. left: 15px;
  115. height: 18px;
  116. }
  117. .container{
  118. max-width: 1160px;
  119. margin: 0 auto;
  120. padding: 0 5%;
  121. }
  122. @media (min-width: 768px){
  123. .container .list {margin: 0 -15px;}
  124. }
  125. .container .list{
  126. display: flex;
  127. flex-wrap: wrap;
  128. margin-bottom: 60px;
  129. }
  130. .container .list li{
  131. margin: 0 0 30px;
  132. max-width: 100%;
  133. display: flex;
  134. flex: 1 0 340px;
  135. flex-direction: column;
  136. justify-content: center;
  137. text-align: center;
  138. border: 1px solid #0754b4;
  139. border-radius: 4px;
  140. }
  141. @media (min-width: 768px){
  142. .container .list li{margin: 0 15px 30px;}
  143. }
  144. .container .list li a{
  145. color: #0754b4;
  146. font-size: 17px;
  147. padding: 20px 30px;
  148. text-align: center;
  149. }
  150. .container .list li a:hover{
  151. color: #fff;
  152. background-color: #0754b4;
  153. }
  154. .container .recent-activity{
  155. border-top: 1px solid #ddd;
  156. padding: 30px 0;
  157. }
  158. .container .recent-activity .recent-activity-header{
  159. margin-bottom: 10px;
  160. text-align: center;
  161. font-size: 22px;
  162. font-weight: 400;
  163. }
  164. .container .recent-activity-list{
  165. }
  166. .container .recent-activity-list li{
  167. padding: 20px 0;
  168. border-bottom: 1px solid #ddd;
  169. }
  170. .container .recent-activity-list li a{
  171. display: inline-block;
  172. }
  173. .container .recent-activity-list li a h3{
  174. margin: 6px 0;
  175. color: #333;
  176. font-size: 16px;
  177. font-weight: 500;
  178. }
  179. .container .recent-activity-list li a p{
  180. margin: 6px 0;
  181. color: #333;
  182. font-size: 14px;
  183. font-weight: 300;
  184. }
  185. .container .recent-activity-list li span{
  186. display: inline-block;
  187. float: none;
  188. color: #666;
  189. font-size: 13px;
  190. font-weight: 300;
  191. margin: 15px 0 0 0;
  192. }
  193. @media (min-width: 768px){
  194. .container .recent-activity-list li span{float:right;margin:0;margin-top:20px;}
  195. }
  196. .container .sub-nav{
  197. display: flex;
  198. flex-direction: column;
  199. justify-content: space-between;
  200. margin-bottom: 30px;
  201. min-height: 50px;
  202. padding-bottom: 15px;
  203. }
  204. @media (min-width: 768px){
  205. .container .sub-nav {align-items:baseline;flex-direction:row;}
  206. }
  207. .container .sub-nav ol{
  208. margin: 0 0 15px 0;
  209. padding: 0;
  210. }
  211. @media (min-width: 768px){
  212. .container .sub-nav ol {margin: 0;}
  213. }
  214. .container .sub-nav ol li{
  215. display: inline;
  216. max-width: 450px;
  217. overflow: hidden;
  218. font-weight: 300;
  219. color: #949494;
  220. font-size: 15px;
  221. text-overflow: ellipsis;
  222. }
  223. .container .sub-nav ol li span{
  224. margin: 0 8px;
  225. }
  226. .container .sub-nav ol li a{
  227. color: #0754b4;
  228. }
  229. .container .sub-nav .search{
  230. position: relative;
  231. }
  232. .container .sub-nav .search input[type="search"] {
  233. border: 1px solid #ddd;
  234. border-radius: 30px;
  235. box-sizing: border-box;
  236. color: #999;
  237. height: 40px;
  238. padding-left: 40px;
  239. padding-right: 20px;
  240. -webkit-appearance: none;
  241. width: 100%;
  242. }
  243. @media (min-width: 768px){
  244. .container .sub-nav .search input[type="search"] {min-width:300px;}
  245. }
  246. .container .sub-nav .search input{
  247. max-width: 100%;
  248. font-size: 1rem;
  249. font-weight: 300;
  250. outline: none;
  251. transition: border .12s ease-in-out;
  252. }
  253. .container .sub-nav .search .icon{
  254. position: absolute;
  255. top:25%;
  256. left: 15px;
  257. height: 18px;
  258. }
  259. .container .category-content{
  260. }
  261. .container .category-content .page-header{
  262. display: flex;
  263. flex-direction: column;
  264. flex-wrap: wrap;
  265. justify-content: space-between;
  266. margin: 10px 0;
  267. }
  268. @media (min-width: 768px){
  269. .container .category-content .page-header{align-items:baseline;flex-direction:row;margin:0;}
  270. }
  271. .container .category-content .page-header h1{
  272. margin-bottom: 30px;
  273. font-size: 32px;
  274. font-weight: 400;
  275. flex-grow: 1;
  276. color: #2a3a4b;
  277. }
  278. .container .category-content .page-header p.page-header-description{
  279. font-style: italic;
  280. font-size: 17px;
  281. color: #2a3a4b;
  282. font-weight: 300;
  283. margin: 0 0 30px 0;
  284. word-break: break-word;
  285. }
  286. @media (min-width: 1024px){
  287. .container .category-content .page-header p.page-header-description{flex-basis: 100%;}
  288. }
  289. .container .category-content .section-tree{
  290. display: flex;
  291. flex-direction: column;
  292. flex-wrap: wrap;
  293. justify-content: space-between;
  294. }
  295. .container .category-content .section-tree .section{
  296. flex: initial;
  297. margin-bottom: 40px;
  298. }
  299. @media (min-width: 768px){
  300. .container .category-content .section-tree{flex-direction: row;}
  301. .container .category-content .section-tree .section{flex: 0 0 45%;}
  302. }
  303. .container .category-content .section-tree .meta-group{
  304. margin-top: 5px;
  305. margin-bottom: 15px;
  306. color: #929292;
  307. font-size: 13px;
  308. }
  309. .container .category-content .section-tree .search-result-description{
  310. color: #2a3a4b;
  311. font-size: 15px;
  312. }
  313. .container .category-content .section-tree .section h3{
  314. margin-bottom: 0;
  315. font-size: 18px;
  316. font-weight: 600;
  317. }
  318. .container .category-content .section-tree .section h3 a:hover{
  319. color: #0754b4;
  320. text-decoration: underline;
  321. }
  322. .container .category-content .section-tree .section ul{
  323. list-style: none;
  324. margin: 0;
  325. padding: 0;
  326. }
  327. .container .category-content .section-tree .section ul li{
  328. border-bottom: 1px solid #ddd;
  329. font-size: 16px;
  330. padding: 15px 0;
  331. }
  332. .container .category-content .section-tree .section ul li a{
  333. color: #333;
  334. vertical-align: middle;
  335. }
  336. .container .category-content .section-tree .section ul li a:hover{
  337. color: #0373fd;
  338. text-decoration: underline;
  339. }
  340. .container .category-content .section-tree .section ul li img{
  341. vertical-align: middle;
  342. height: 22px;
  343. margin-right: 8px;
  344. }
  345. .container .category-content .section-tree .section .more{
  346. display: block;
  347. line-height: 50px;
  348. font-size: 16px;
  349. color: #0754b4;
  350. }
  351. .container .category-content .section-tree .section .more:hover{
  352. text-decoration: underline;
  353. }
  354. .wdh100{margin:0 auto;width:100%;}
  355. @media (min-width: 900px){
  356. .wdh100{width:800px;}
  357. }
  358. .article-container{
  359. display: flex;
  360. flex-direction: column;
  361. }
  362. @media (min-width: 1024px){
  363. .article-container{flex-direction: row;}
  364. }
  365. .article-container .article-sidebar{
  366. padding: 10px 0;
  367. border-bottom: 1px solid #ddd;
  368. border-top: 1px solid #ddd;
  369. flex: 1 0 auto;
  370. margin-bottom: 20px;
  371. }
  372. .article-container .article-sidebar .sidenav-title{
  373. padding: 10px 0;
  374. font-size: 15px;
  375. font-weight: 600;
  376. position: relative;
  377. }
  378. .article-container .article-sidebar ul{
  379. margin-top: 10px;
  380. }
  381. .article-container .article-sidebar ul li{
  382. }
  383. .article-container .article-sidebar ul li a{
  384. margin-bottom: 10px;
  385. padding: 10px;
  386. display: block;
  387. color: #333;
  388. font-size: 15px;
  389. font-weight: 300;
  390. border-radius: 4px;
  391. }
  392. .article-container .article-sidebar ul li a.on{
  393. background-color: #2680f1;
  394. color: #fff;
  395. text-decoration: none;
  396. }
  397. @media (min-width: 1024px){
  398. .article-container .article-sidebar{border:0;flex:0 0 17%;height:auto;}
  399. }
  400. @media (max-width: 640px){
  401. .article-sidebar ul{display: none;}
  402. }
  403. .article-container .article{
  404. flex: 1 0 auto;
  405. }
  406. @media (min-width: 1024px){
  407. .article-container .article{flex:1 0 66%;min-width:640px;padding:0 30px;}
  408. }
  409. .article-container .article .article-header{
  410. align-items: flex-start;
  411. display: flex;
  412. flex-direction: column;
  413. flex-wrap: wrap;
  414. justify-content: space-between;
  415. margin-bottom: 20px;
  416. margin-top: 20px;
  417. }
  418. .article-container .article .article-header h1{line-height:1.5em;font-size:32px;font-weight:400;}
  419. .article-container .article .article-header .times{line-height:3em;font-size:1.2em;color:#b7b7b7;}
  420. @media (min-width: 768px){
  421. .article-container .article .article-header{flex-direction:row;margin-top:0;}
  422. .article-container .article .article-title{flex-basis:100%;}
  423. }
  424. .article-content{
  425. font-size:1rem;
  426. line-height: 2rem;
  427. }
  428. .article-content img{
  429. height: auto;
  430. max-width: 100%;
  431. }
  432. /* Fee */
  433. .table-container{
  434. overflow: hidden;
  435. }
  436. .fee-table{
  437. border-collapse: collapse;
  438. color: #546e7a;
  439. }
  440. .fee-table b{
  441. font-weight: 700;
  442. }
  443. .fee-table th,.fee-table td{
  444. padding: 10px;
  445. border: 1px solid #ddd;
  446. font-size: 12px;
  447. text-transform:uppercase;
  448. }
  449. .fee-table th{
  450. background: #f4f4f4;
  451. font-size: 12px;
  452. }
  453. .fee-table td.icons{
  454. text-align: center;
  455. }
  456. .fee-table td img {
  457. display: block;
  458. margin: 0 auto;
  459. }
  460. @media (min-width: 768px){
  461. .fee-table th{
  462. font-size: 15px;
  463. }
  464. .fee-table td{
  465. font-size: 14px;
  466. }
  467. .fee-table td.icons{
  468. text-align: left;
  469. }
  470. .fee-table td img {
  471. display: inline-block;
  472. margin-left: 30%;
  473. margin-right: 5px;
  474. margin-top: -4px;
  475. vertical-align: middle;
  476. }
  477. }
  478. /* 数据分页 */
  479. .pages {
  480. clear: both;
  481. margin: 15px 15px 0px;
  482. text-align: center;
  483. font-size: 13px;
  484. }
  485. .pages a {
  486. background-color: #fff;
  487. padding: 5px 12px;
  488. border-radius: 3px;
  489. border: 1px solid #646464;
  490. margin: 0 2px;
  491. color: #646464;
  492. font-size: 13px;
  493. }
  494. .pages a:hover {
  495. background-color: #ececec;
  496. text-decoration: none;
  497. }
  498. .pages .current {
  499. background-color: #106cde;
  500. color: #fff;
  501. padding: 5px 12px;
  502. border-radius: 3px;
  503. margin: 0 2px;
  504. }
  505. .pages a.arr {
  506. width: 19px;
  507. height: 19px;
  508. display: inline-block;
  509. border-radius: 0;
  510. border: 0;
  511. }
  512. .pages a.arr.prev {
  513. background-position: -182px -286px;
  514. }
  515. .pages a:hover.arr.prev {
  516. background-position: -182px -265px;
  517. }
  518. .pages a.arr.next {
  519. background-position: -206px -265px;
  520. }
  521. .pages a:hover.arr.next {
  522. background-position: -206px -286px;
  523. }
  524. /* Footer */
  525. .footer{
  526. border-top: 1px solid #ddd;
  527. margin-top: 60px;
  528. padding: 30px 0;
  529. }
  530. .footer .footer-inner{
  531. display: flex;
  532. max-width: 1160px;
  533. margin: 0 auto;
  534. padding: 0 5%;
  535. color: #666;
  536. font-size: 16px;
  537. justify-content: space-between;
  538. }
  539. @media (min-width: 1160px){
  540. .footer .footer-inner{padding:0;width:90%;}
  541. }
  542. .footer .footer-inner a{
  543. color: #666;
  544. font-size: 16px;
  545. }