cross.ui.css 52 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. @charset "utf-8";
  2. /* assist
  3. -----------------------------------------------------------------------------*/
  4. .ui-reddot { position: relative; display: inline-block; padding: 0 5px; }
  5. .ui-reddot:after { content: ''; position: absolute; display: block; width: 8px; height: 8px; background-color: #f76249; border-radius: 5px; right: -3px; top: -3px; -webkit-background-clip: padding-box; background-clip: adding-box; }
  6. /* buttons color
  7. -----------------------------------------------------------------------------*/
  8. .c-btn-087eff { background-color: #087eff; }
  9. .c-btn-087eff:hover { background-color: #0771e5; }
  10. .c-btn-588cd5 { background-color: #588cd5; }
  11. .c-btn-588cd5:hover { background-color: #4680d0; }
  12. .c-btn-37a6ec { background-color: #37a6ec; }
  13. .c-btn-37a6ec:hover { background-color: #3195d4; }
  14. .c-btn-4dcd70 { background-color: #4dcd70; }
  15. .c-btn-4dcd70:hover { background-color: #45b865; }
  16. .c-btn-4db944 { background-color: #4db944; }
  17. .c-btn-4db944:hover { background-color: #45a63d; }
  18. .c-btn-309765 { background-color: #309765; }
  19. .c-btn-309765:hover { background-color: #2b885b; }
  20. .c-btn-ff9600 { background-color: #ff9600; }
  21. .c-btn-ff9600:hover { background-color: #e58700; }
  22. .c-btn-ff8100 { background-color: #ff8100; }
  23. .c-btn-ff8100:hover { background-color: #e57400; }
  24. .c-btn-fc6155 { background-color: #fc6155; }
  25. .c-btn-fc6155:hover { background-color: #e2574c; }
  26. .c-btn-ff3b2f { background-color: #ff3b2f; }
  27. .c-btn-ff3b2f:hover { background-color: #e5352a; }
  28. .c-btn-f9f9f9 { background-color: #f9f9f9; color: #087eff; border: #c0c0bc 1px solid; }
  29. .c-btn-f9f9f9:hover { background-color: #e0e0e0; }
  30. .c-btn-ffffff { background-color: #ffffff; color: #4dcd70; border: #e1e1e1 1px solid; }
  31. .c-btn-ffffff:hover { background-color: #e5e5e5; }
  32. .c-btn-fff { background-color: #ffffff; color: #999999; border: #e1e1e1 1px solid; }
  33. .c-btn-fff:hover { background-color: #e5e5e5; }
  34. .c-btn-ff3 { background-color: #ffffff; color: #ff3b2d; border: #e1e1e1 1px solid; }
  35. .c-btn-ff3:hover { background-color: #e5e5e5; }
  36. /* css3-Grid
  37. -----------------------------------------------------------------------------*/
  38. .ui-grid { display: -webkit-box; display: box; }
  39. .ui-grid-middle { -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; }
  40. .ui-grid-vertical { -webkit-box-orient: vertical; box-orient: vertical; }
  41. .ui-grid-label { -webkit-box-flex: 0; box-flex: 0; width: 100px; font-weight: 600; }
  42. .ui-col-0 { -webkit-box-flex: 0; box-flex: 0; }
  43. .ui-col-1 { -webkit-box-flex: 1; box-flex: 1; }
  44. .ui-col-2 { -webkit-box-flex: 2; box-flex: 2; }
  45. .ui-col-3 { -webkit-box-flex: 3; box-flex: 3; }
  46. .ui-col-4 { -webkit-box-flex: 4; box-flex: 3; }
  47. .ui-col-5 { -webkit-box-flex: 5; box-flex: 5; }
  48. .ui-col-6 { -webkit-box-flex: 6; box-flex: 6; }
  49. /* css ui-arrow
  50. -----------------------------------------------------------------------------*/
  51. .ui-arrow, .ui-arrow s { position: relative; display: block; font-size: 0; line-height: 0; width: 0; height: 0; border-color: transparent; border-style: dashed; border-width: 5px; }
  52. .ui-arrow-r, .ui-arrow-r s { border-left-color: #aaa; border-left-style: solid; }
  53. .ui-arrow-r s { border-left-color: #fff; position: absolute; left: -7px; top: -5px; }
  54. .ui-arrow-l, .ui-arrow-l s { border-right-color: #aaa; border-right-style: solid; }
  55. .ui-arrow-l s { border-right-color: #fff; position: absolute; right: -7px; top: -5px; }
  56. .ui-arrow-t, .ui-arrow-t s { border-bottom-color: #aaa; border-bottom-style: solid; }
  57. .ui-arrow-t s { border-bottom-color: #fff; position: absolute; left: -5px; top: -3px; }
  58. .ui-arrow-b, .ui-arrow-b s { border-top-color: #aaa; border-top-style: solid; }
  59. .ui-arrow-b s { border-top-color: #fff; position: absolute; left: -5px; bottom: -3px; }
  60. .ui-arrow-circle { line-height: 100%; overflow: hidden; font-family: Tahoma, Helvetica; font-size: 18px; color: #aaa; }
  61. .tipBox { width: 200px; margin-top: 10px; }
  62. .tipBox .hd { height: 5px; position: relative; }
  63. .tipBox .hd .ui-arrow { position: absolute; top: -5px; left: 10px; }
  64. .tipBox .hd .ui-arrow s { top: -4px; }
  65. .tipBox .bd { border: 1px solid #aaa; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  66. .tipBoxA .ui-arrow s { border-bottom-color: #f6f6f6; }
  67. .tipBoxA .bd { background: #f6f6f6; }
  68. /* ui-form
  69. -----------------------------------------------------------------------------*/
  70. .input-group, .input-group *, .input-group-checkbox, .input-group-radio, .input-group-checkbox *, .input-group-radio * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
  71. .input-group { border-collapse: separate; display: table; position: relative; }
  72. .input-group label { display: block; }
  73. .input-group-addon { background-color: #fff; border: 1px solid #e1e1e1; border-radius: 4px; border-bottom-right-radius: 0; border-top-right-radius: 0; color: #333; font-size: 14px; font-weight: 400; line-height: 1; padding: 10px; text-align: center; display: table-cell; vertical-align: middle; white-space: nowrap; width: 1%; }
  74. .input-group-addon:first-child { border-right: 0; }
  75. .input-group-addon .iconfont { color: #b4b4b4; font-size: 18px; }
  76. .input-group-addon.focus .iconfont { color: #37a6ed; }
  77. .input-group-btn { position: absolute; right: 5px; top: 7px; }
  78. .input-group-btn .c-btn { padding: 5px; border: #ddd 1px solid; }
  79. .input-group .form-control, .input-group .form-select, .input-group .form-textarea { -webkit-appearance: none; appearance: none; background-color: #fff; background-image: none; border: 1px solid #e1e1e1; border-radius: 5px; color: #333; display: block; font-size: 14px; height: 45px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; outline: 0; }
  80. .input-group .form-select-arrow { display: block; width: 10px; height: 10px; border: solid #ccc; border-width: 2px 2px 0 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 15px; right: 15px; }
  81. .input-group .form-control {padding-right:30px;}
  82. .input-group.input-border .form-control, .input-group.input-border .form-select, .input-group.input-border .form-textarea { border-radius: 0px; border-right: 0; font-size: 15px; height: 45px; line-height: 1.52857; }
  83. .input-group .form-control:focus, .input-group .form-select:focus, .input-group .form-textarea:focus { color: #333; }
  84. .input-group .form-control::-webkit-input-placeholder, .input-group .form-textarea::-webkit-input-placeholder {
  85. color: #bfbfbf;
  86. }
  87. .input-group .form-control:-moz-placeholder, .input-group .form-textarea:-moz-placeholder {
  88. color: #bfbfbf;
  89. }
  90. .input-group .form-control::-moz-placeholder, .input-group .form-textarea::-moz-placeholder {
  91. color: #bfbfbf;
  92. }
  93. .input-group .form-control:-ms-input-placeholder, .input-group .form-textarea:-ms-input-placeholder {
  94. color: #bfbfbf;
  95. }
  96. .input-group .form-textarea { height: auto; resize: none; margin: 0; }
  97. .input-group .form-control:nth-child(2), .input-group .form-textarea:nth-child(2) { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left: 0; padding-left: 0; }
  98. .input-group .form-control, .input-group label .form-control, .input-group label .form-select, .input-group label .form-textarea { border-radius: 4px; padding-left: 12px; border-left: 1px #e1e1e1 solid; }
  99. .input-group .input-group-addon + .form-control, .input-group .input-group-addon + .form-select { border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding-left: 0px; border-left: 0px; }
  100. .input-group-text { font-size: 14px; color: #555; }
  101. .input-merge .input-group .input-group-addon, .input-group.input-border .input-group-addon { border-bottom-left-radius: 0; border-top-left-radius: 0; }
  102. .input-group.input-border .input-group-addon { border-left: 0; font-size: 15px; color: #333; padding: 10px 20px; }
  103. .input-merge .input-group .form-control, .input-merge .input-group .form-select, .input-merge .input-group .form-textarea { border-bottom-right-radius: 0; border-top-right-radius: 0; }
  104. .input-merge .input-group:first-child .input-group-addon { border-top-left-radius: 4px; }
  105. .input-merge .input-group:first-child .form-control, .input-merge .input-group:first-child .form-select, .input-merge .input-group:first-child .form-textarea { border-top-right-radius: 4px; }
  106. .input-merge .input-group:last-child .form-control, .input-merge .input-group:last-child .form-select, .input-merge .input-group:last-child .form-textarea { border-bottom-right-radius: 4px; }
  107. .input-merge .input-group:last-child .input-group-addon { border-bottom-left-radius: 4px; }
  108. .input-merge .input-group.input-border .input-group-addon, .input-merge .input-group.input-border .form-control, .input-merge .input-group.input-border .form-select, .input-merge .input-group.input-border .form-textarea, .input-merge .input-group.input-border .form-control, .input-merge .input-group.input-border .form-select, .input-merge .input-group.input-border .form-textarea, .input-merge .input-group.input-border .input-group-addon { border-radius: 0px; }
  109. .input-merge .input-group.input-border { padding-left: 20px; }
  110. .input-merge .input-group.input-border .input-group-addon { padding-left: 0 }
  111. .input-merge .input-group .input-group-addon, .input-merge .input-group .form-control, .input-merge .input-group .form-select, .input-merge .input-group .form-textarea { border-bottom: 0; }
  112. .input-merge .input-group:last-child .input-group-addon, .input-merge .input-group:last-child .form-control, .input-merge .input-group:last-child .form-select, .input-merge .input-group:last-child .form-textarea { border-bottom: 1px solid #e1e1e1; }
  113. .input-merge.input-merge-border .input-group:first-child .input-group-addon, .input-merge.input-merge-border .input-group:first-child .form-control, .input-merge.input-merge-border .input-group:first-child .form-select, .input-merge.input-merge-border .input-group:first-child .form-textarea { border-top: 0; }
  114. .input-merge.input-merge-border .input-group:last-child .input-group-addon, .input-merge.input-merge-border .input-group:last-child .form-control, .input-merge.input-merge-border .input-group:last-child .form-select, .input-merge.input-merge-border .input-group:last-child .form-textarea { border-bottom: 0; }
  115. .input-merge.input-merge-border { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; background: #fff; }
  116. .input-group-addon-disabled, .form-control[disabled], .form-control:disabled, .form-textarea[disabled], .form-textarea:disabled, .form-textarea[disabled], .form-textarea:disabled, .form-select[disabled], .form-select:disabled { background-color: #f9f9f9; }
  117. .input-group .form-input { height: 45px; border-top: 1px solid #e1e1e1; position: relative; padding: 7px 0; }
  118. .input-group .form-input-text { color: #909090; font-size: 15px; }
  119. .input-group .form-select-box { display: inline-block; position: relative; margin-right: 10px; }
  120. .input-group .form-select-box .form-select { width: 100%; }
  121. .input-group .form-select-box .form-select-arrow { top: 7px; right: 12px }
  122. .input-group.input-border .form-input .form-control, .input-group.input-border .form-input .form-select { height: 31px; border: #e1e1e1 1px solid !important; border-radius: 2px; display: inline-block; vertical-align: baseline; line-height: 1.2; }
  123. .input-group .input-clear { position: absolute; right: 8px; top: 8px; background: #ccc; border-radius: 50%; width: 26px; height: 26px; text-align: center; }
  124. .input-group .input-clear .close { position: relative; display: inline-block; width: 15px; height: 15px; overflow: hidden; top: 6px; }
  125. .input-group .input-clear .close::before, .input-group .input-clear .close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0px; margin-top: -1px; background: #fff; border-radius: 6px; }
  126. .input-group .input-clear .close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
  127. .input-group .input-clear .close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
  128. .input-group-checkbox, .input-group-radio { display: inline-block; position: relative; font-size: 14px; color: #909090; }
  129. .input-group-checkbox label { display: block; cursor: pointer; }
  130. .input-group-checkbox label input[type="checkbox"], .input-group-radio label input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
  131. .input-group-checkbox .input-group-pack, .input-group-radio .input-group-pack { width: 20px; height: 20px; background-color: #ffffff; border: 1px #d3d3d3 solid; padding: 0; margin: 0 5px 0 0; position: relative; display: inline-block; vertical-align: middle; border-radius: 5px; overflow: hidden; top: -2px; }
  132. .input-group-radio .input-group-pack { border-radius: 50%; }
  133. .input-group-checkbox .input-group-pack.input-group-pack-disabled, .input-group-radio .input-group-pack.input-group-pack-disabled { background-color: #f0f0f0; }
  134. .input-group-checkbox .input-group-pack .tick { display: block; width: 12px; height: 2px; background: #4dcd70; margin: 8px 0 0 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: 50px; }
  135. .input-group-checkbox .input-group-pack .tick:after { content: ''; width: 8px; height: 2px; background: #4dcd70; position: absolute; top: -3px; left: -5px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
  136. .input-group-radio .input-group-pack .disc { display: block; content: "" !important; width: 0px; height: 0px; border-radius: 50%; background-color: #4dcd70; margin: 4px; }
  137. .input-group-checkbox input[type="checkbox"]:checked ~ .tick, .input-group-checkbox .input-group-pack.checked .tick { top: 0px; }
  138. .input-group-radio input[type="radio"]:checked ~ .disc, .input-group-radio .input-group-pack.checked .disc { width: 10px; height: 10px; }
  139. .input-group-switch { position: relative; font-size: 16px; width: 52px; height: 32px; line-height: 1em; }
  140. .input-group-switch input { width: 52px; height: 32px; position: absolute; z-index: 10; border: none; background: none; -webkit-appearance: none; outline: none; }
  141. .input-group-switch input:before { content: ''; width: 50px; height: 30px; border: 1px solid #e5e5e5; background-color: #fff; border-radius: 20px; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; user-select: none; -webkit-box-sizing: content-box; box-sizing: content-box; border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; box-shadow: #dfdfdf 0px 0px 0px 0px inset; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s; -webkit-background-clip: content-box; background-clip: content-box; }
  142. .input-group-switch input:checked:before { border-color: #4cd964; -webkit-box-shadow: #4cd964 0px 0px 0px 16px inset; box-shadow: #4cd964 0px 0px 0px 16px inset; background-color: #4cd964; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; background-color: #4cd964; }
  143. .input-group-switch input:checked:after { left: 21px; }
  144. .input-group-switch input:after { content: ''; width: 30px; height: 30px; position: absolute; top: 1px; left: 0; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.2s; transition: left 0.2s; }
  145. .input-group-switch input.thread:before { content: ''; width: 50px; height: 3px; border: 1px solid #e5e5e5; background-color: #e5e7ea; border-radius: 20px; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; user-select: none; -webkit-box-sizing: content-box; box-sizing: content-box; border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; box-shadow: #dfdfdf 0px 0px 0px 0px inset; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s; -webkit-background-clip: content-box; background-clip: content-box; }
  146. .input-group-switch input.thread:checked:before { border-color: #4cd964; -webkit-box-shadow: #4cd964 0px 0px 0px 16px inset; box-shadow: #4cd964 0px 0px 0px 16px inset; background-color: #4cd964; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; background-color: #4cd964; }
  147. .input-group-switch input.thread:checked:after { left: 33px; }
  148. .input-group-switch input.thread:after { content: ''; width: 20px; height: 20px; position: absolute; top: 3px; left: 0; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.2s; transition: left 0.2s; }
  149. /* onoffswitch
  150. -----------------------------------------------------------------------------*/
  151. .onoffswitch { position: relative; width: 65px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
  152. .onoffswitch input.onoffswitch-checkbox { opacity: 0 }
  153. .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border-radius: 6px; }
  154. .onoffswitch-inner { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; }
  155. .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; }
  156. .onoffswitch-inner:before, .onoffswitch-inner:after { float: left; width: 50%; height: 28px; padding: 0; line-height: 28px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
  157. .onoffswitch-inner:before { content: "ON"; padding-left: 5px; background-color: #4cd964; color: #FFFFFF; }
  158. .onoffswitch-inner:after { content: "OFF"; padding-right: 5px; background-color: #e5e7ea; color: #a4a9ae; text-align: right; }
  159. .onoffswitch-switch { width: 22px; height: 22px; margin: 4px; background: #FFFFFF; border-radius: 6px; position: absolute; top: 50%; margin-top: -1px; right: 35px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; }
  160. .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }
  161. /* css c-list
  162. -----------------------------------------------------------------------------*/
  163. .list-icon { height: 8px; width: 8px; position: relative; display: inline-block; }
  164. .arrow-right { display: block; width: 8px; height: 8px; border: solid #cdcdcd; border-width: 2px 2px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
  165. .c-list-group { }
  166. .c-list-group h3 { padding: 6px 15px; background-color: #f9f9f9; font-size: 13px; color: #5b5b5b; margin: 0; vertical-align: middle; }
  167. .c-list { background-color: #fff; }
  168. .c-list > li, .c-list > .c-list-div { font-size: 15px; color: #333; position: relative; display: -webkit-box; display: box; margin-left: 15px; border-top: 1px solid #f1f1f1; }
  169. .c-list > li > a {position: relative; display: -webkit-box; display: box; width:100%;}
  170. .c-list > .c-list-text { line-height: 20px; padding: 12px 15px 12px 0; }
  171. .c-list > .c-list-function { border-top: none; }
  172. .c-list > .c-list-function .c-list-info { border-top: 1px solid #f1f1f1; }
  173. .c-list > li:first-child, .c-list > .c-border-t:first-child, .c-list >li:first-child .c-border-t, .c-list > .c-list-function:first-child, .c-list > .c-list-function:first-child .c-list-info, .c-list > div:first-child .c-border-t, .c-list > div:first-child { border: 0; background-image: none }
  174. .c-list > .c-list-cover { padding-left: 15px !important; margin-left: 0 !important; }
  175. .c-list .c-list-info { -webkit-box-flex: 1; box-flex: 1; padding-right: 15px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  176. .c-list h4 { color: #333 !important; }
  177. .c-list .c-list-info > h4 { font-size: 18px; line-height: 20px }
  178. .c-list .c-list-info > p { font-size: 16px; line-height: 20px; color: #909090; }
  179. .c-list .c-list-label { font-size: 13px !important; color: #909090 !important; padding: 10px 15px 10px 0!important; border-top: 1px dashed #e1e1e1 !important; }
  180. .c-list .c-list-key { margin-right: 15px; }
  181. .c-list .c-list-img { width: 100px; height: 68px; margin: 10px 10px 10px 0; position: relative }
  182. .c-list .c-list-img img { width: auto; height: 68px; }
  183. .c-list > .c-list-link:active { background-color: #e5e6e7; padding-left: 15px; margin-left: 0 }
  184. .c-list-link:active, .c-list-link.c-border-t:active, .c-list-link:active + .c-border-t, .c-list-link:active + .c-border-t { background-image: none; border-top-color: #e5e6e7 }
  185. .c-list .c-list-value { color: #909090; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  186. .c-list .c-list-title { }
  187. .c-list .c-list-link .c-list-value, .c-list .c-list-link .c-list-title { padding-right: 20px; }
  188. .c-list .c-list-badge, .c-list .c-list-action { font-size: 13px; color: #909090; position: absolute; height: 100%; right: 15px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; top: 0; }
  189. .c-list-link .c-list-badge, .c-list-link .c-list-action { right: 35px }
  190. .c-list-link .list-icon { position: absolute; right: 15px; top: 50%; margin-top: -4px; }
  191. .c-list .c-avatar-s, .c-list .c-avatar-m, .c-list .c-avatar-l { margin: 10px 15px 10px 0; overflow: hidden; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
  192. .c-list-indent-s { padding-right: 70px !important; }
  193. .c-list-indent-m { padding-right: 110px !important; }
  194. .c-list-action .input-group-checkbox .input-group-pack, .c-list-action .input-group-radio .input-group-pack { margin: 0 0 0 5px; }
  195. .c-avatar-s { width: 26px; height: 26px; }
  196. .c-avatar-m { width: 43px; height: 43px; }
  197. .c-avatar-l { width: 54px; height: 54px; }
  198. .c-avatar-s img, .c-avatar-m img, .c-avatar-l img { width: 100%; height: 100%; }
  199. .c-list-text .c-t-right { color: #909090 !important; }
  200. .c-list-text .c-t-right { padding-right: 0px; color: #909090; }
  201. .c-list-link .c-t-right { padding-right: 20px !important; }
  202. /* css c-lab1
  203. -----------------------------------------------------------------------------*/
  204. .c-lab-les { display: -webkit-box; display: box; border: 1px solid #37a6eb; overflow: hidden; }
  205. .c-lab-les li { -webkit-box-flex: 1; box-flex: 1; height: 30px; line-height: 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; text-align: center; border-left: 1px solid #37a6eb; }
  206. .c-lab-les li:first-child { border-left: none; }
  207. .c-lab-les li a { display: block; width: 100%; height: 30px; color: #37a6eb; }
  208. .c-lab-les li.hit { background-color: #37a6eb; }
  209. .c-lab-les li.hit a { color: #fff; }
  210. /* css c-lab2
  211. -----------------------------------------------------------------------------*/
  212. .c-lab-mor { display: -webkit-box; display: box; overflow: hidden; background: #fff; }
  213. .c-lab-mor li { -webkit-box-flex: 1; box-flex: 1; height: 40px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; text-align: center; padding-top: 6px; border-bottom: 1px solid #e1e1e1; }
  214. .c-lab-mor li:first-child { border-left: none; }
  215. .c-lab-mor li a { display: block; width: 100%; height: 28px; line-height: 28px; color: #333; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; border-left: 1px solid #ddd; }
  216. .c-lab-mor li:first-child a { border-left: none; }
  217. .c-lab-mor li.hit { border-bottom: 3px solid #37a6eb; }
  218. .c-lab-mor li.hit a { color: #37a6eb; }
  219. /* css step
  220. -----------------------------------------------------------------------------*/
  221. .step-box { width: 100%; height: 200px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border: 1px solid #ddd; }
  222. .step-bar { text-align: center; overflow: hidden; counter-reset: step; }
  223. .step-bar li { color: #909090; text-transform: uppercase; font-size: 12px; float: left; position: relative; padding-top: 25px; }
  224. .step-n2 li { width: 50%; }
  225. .step-n3 li { width: 33.33%; }
  226. .step-n4 li { width: 25%; }
  227. .step-n5 li { width: 20%; }
  228. .step-n6 li { width: 16.66%; }
  229. .step-bar li:before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 50%; width: 20px; line-height: 20px; display: inline-block; font-size: 12px; color: #909090; background: #dcdcdc; border-radius: 50%; margin-left: -10px; z-index: 2; }
  230. .step-bar li:after { content: ""; width: 100%; height: 2px; background: #dcdcdc; position: absolute; left: -50%; top: 9px; z-index: 1; }
  231. .text-up li { padding-bottom: 25px; }
  232. .text-up li:before { top: auto; bottom: 0; }
  233. .text-up li:after { top: auto; bottom: 9px; }
  234. .step-bar li:first-child:after { content: none; }
  235. .step-bar li.active { color: #37a1ff }
  236. .step-bar li.active:before, .step-bar li.active:after { background: #37a1ff; color: #fff; }
  237. .step-bar-icon li { padding-top: 45px; }
  238. .step-bar-icon li:before { content: none; }
  239. .step-bar-icon li:after { height: 3px; top: 19px; }
  240. .step-bar-icon li .step-icon { position: absolute; display: box !important; display: -webkit-box !important; ; -webkit-box-orient: vertical; -webkit-box-pack: center; top: 0; left: 50%; width: 40px; height: 40px; color: #909090; background: #dcdcdc; display: inline-block; margin-left: -20px; z-index: 2; border-radius: 50%; }
  241. .step-bar-icon li .step-icon i { font-size: 24px; }
  242. .step-bar li.active .step-icon { background: #37a1ff; color: #fff; }
  243. .step-bar-w { display: table; width: 100%; padding: 0; margin: 0; position: relative }
  244. .step-bar-w li { display: table-cell; text-align: center; width: 1%; }
  245. .step-bar-w li .step { position: relative; display: inline-block; width: 40px; height: 40px; border: 4px solid #ced1d6; color: #546474; border-radius: 50%; background-color: #FFF; z-index: 2; line-height: 40px; text-align: center; vertical-align: middle; }
  246. .step-bar-w li:before { display: block; content: ""; width: 100%; height: 1px; font-size: 0; overflow: hidden; border-top: 4px solid #ced1d6; position: relative; top: 27px; z-index: 1 }
  247. .txt-up li { position: relative; padding-top: 30px; }
  248. .txt-up li .title { width: 100%; text-align: center; position: absolute; top: 0; left: 0; }
  249. .step-bar-w li:last-child:before { max-width: 50%; width: 50% }
  250. .step-bar-w li:first-child:before { max-width: 51%; left: 50% }
  251. .step-bar-w li.active:before, .step-bar-w li.complete:before, .step-bar-w li.active .step, .step-bar-w li.complete .step { border-color: #37a1ff }
  252. .step-bar-w li.complete .step:before { display: block; content: ""; position: absolute; top: 11px; left: 11px; width: 16px; height: 9px; border-left: 4px solid #87ba21; border-bottom: 4px solid #87ba21; text-align: center; z-index: 3; color: #87ba21; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
  253. .step-bar-w li .title { display: block; margin-top: 4px; max-width: 100%; color: #949ea7; z-index: 100; text-align: center; table-layout: fixed; word-wrap: break-word; }
  254. .step-bar-w li.complete .title, .step-bar-w li.active .title { color: #2b3d53; }
  255. .step-bar-w li .iconfont { color: #37a1ff; font-size: 28px !important; }
  256. .step-bar-w li .iconfont { color: #ced1d6; font-size: 28px !important; }
  257. .step-bar-w li.active .iconfont, .step-bar-w li.complete .iconfont, .step-bar-w li.active .step .iconfont, .step-bar-w li.complete .step .iconfont { color: #37a1ff; }
  258. /*pagination - 1
  259. -------------------------------------------------------*/
  260. .page-full { height: 30px; line-height: 30px; color: #555; }
  261. .page-full a { display: inline-block; min-width: 20px; _width: 20px; height: 28px; padding: 0 4px; line-height: 28px; margin-right: 10px; text-align: center; border: 1px solid #cacaca; background-color: #f2f2f2; color: #717171; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; vertical-align: middle; *display:inline;
  262. *zoom:1;
  263. }
  264. .page-full a:link, .page-full a:visited { color: #717171; }
  265. .page-full a:hover { color: #717171; border-color: #a9a9a9; }
  266. .page-full a.page-current { border-color: #009839; background-color: #4db944; color: #f2f2f2; cursor: default; }
  267. .page-full a.page-current:link, .page-full a.page-current:visited { color: #f2f2f2; }
  268. .page-full a.page-current:hover { color: #f2f2f2; border-color: #009839; }
  269. .page-full a.disabled, .page-full a.disabled:hover { border-color: #cbcbcb; background-color: #e2e2e2; cursor: default; }
  270. .page-full a.page-prev, .page-full a.page-next { font-weight: bold; line-height: 25px; }
  271. .page-full span { display: inline-block; height: 30px; line-height: 30px; margin-right: 10px; vertical-align: middle; *display:inline;
  272. *zoom:1;
  273. }
  274. .page-full .pageto { display: inline-block; width: 90px; text-align: left; vertical-align: middle; *display:inline;
  275. *zoom:1;
  276. position: relative; }
  277. .page-full .pageto .input-pageto { display: inline-block; width: 50px; height: 20px; line-height: 20px; padding: 4px 0; border: 1px solid #ccc; text-align: center; background-color: #fff; color: #555; position: relative; z-index: 2; vertical-align: middle; *display:inline;
  278. *zoom:1;
  279. }
  280. .page-full .pageto .btn-pageto { display: inline-block; width: 50px; height: 30px; margin-right: 10px; border: 0; text-align: center; background-color: #4db944; color: #fff; cursor: pointer; vertical-align: middle; *display:inline;
  281. *zoom:1;
  282. }
  283. .page-full .pageto .btn-pageto-w { position: absolute; left: 0; top: 0; *top:1px;
  284. width: 100px; text-align: left; }
  285. .page-full .pageto.pageto-focus .input-pageto { border-color: #4db944; }
  286. .page-full .pageto.pageto-focus .btn-pageto-w { left: 50px; }
  287. .page-full .pageto.pageto-focus .btn-pageto { display: inline-block; *display:inline;
  288. *zoom:1;
  289. }
  290. /*pagination - 2
  291. -------------------------------------------------------*/
  292. .page { height: 30px; line-height: 30px; color: #555; font-size: 0; }
  293. .page a { display: inline-block; min-width: 20px; _width: 20px; height: 28px; padding: 0 4px; line-height: 28px; margin-right: 10px; text-align: center; border: 1px solid #ebebeb; background-color: #fff; font-size: 12px; color: #666; vertical-align: middle; *display:inline;
  294. *zoom:1;
  295. }
  296. .page a:link, .page a:visited { color: #717171; }
  297. .page a:hover { color: #18bd9c; border-color: #18bd9c; }
  298. .page a.page-current { border-color: #18bd9c; background-color: #18bd9c; cursor: default; }
  299. .page a.page-current:link, .page a.page-current:visited { color: #fff; }
  300. .page a.page-current:hover { color: #f2f2f2; border-color: #18bd9c; }
  301. .page a.disabled, .page a.disabled:hover { border-color: #cbcbcb; background-color: #e2e2e2; cursor: default; }
  302. .page a.page-prev, .page a.page-next { font-size: 26px; line-height: 22px; }
  303. .page a.page-prev b, .page a.page-next b { font-weight: normal; }
  304. .page span { display: inline-block; margin-right: 10px; height: 30px; line-height: 24px; font-size: 12px; vertical-align: middle; *display:inline;
  305. *zoom:1;
  306. }
  307. /*table
  308. -------------------------------------------------------*/
  309. .tb { table-layout: fixed; }
  310. .tb th, .tb td { padding: 10px 5px; text-align: center; word-wrap: break-word; word-break: break-all; }
  311. .tb th { border-top: 1px solid #e1e1e1; background-color: #f5f5f5; color: #222; }
  312. .tb td { border-bottom: 1px solid #dae5ec; font-size: 12px; }
  313. .tb-border th, .tb-border td { border: 1px solid #e1e1e1; }/*添加表格边框*/
  314. .tb-hover tr:hover td { background-color: #f5f9fc; }/*鼠标滑过加底色*/
  315. /* css search
  316. -----------------------------------------------------------------------------*/
  317. .c-ser-hold { width: 100%; height: 43px; background-color: #e8e8e8; padding: 6px 10px 0 10px; }
  318. .c-ser-into { background: #fff; height: 28px; line-height: 28px; border: 1px solid #e1e1e1; border-radius: 5px; font-size: 15px; color: #8e8e93; text-align: center; }
  319. .c-serdet { display: -webkit-box; display: box; padding: 7px 10px 0 10px; }
  320. .ser-icon { position: relative; display: inline-block; width: 13px; height: 13px; font-size: 1px; background: none; }
  321. .ser-icon:before, .ser-icon:after { content: ""; position: absolute; left: 0; background: transparent; font-size: 1px; }
  322. .ser-icon-search:before { left: 10%; top: 5%; width: 55%; height: 55%; border: 1px solid #8e8e93; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; }
  323. .ser-icon-search:after { left: 59%; top: 75%; width: 45%; height: 12%; background: #8e8e93; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); }
  324. .c-ser-back { width: 20px; -webkit-box-flex: 0; box-flex: 0; overflow: hidden; }
  325. .c-ser-back .si-right { display: block; width: 12px; height: 12px; border: solid #a3a3a7; border-width: 0 0 2px 2px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin: 7px 0 0 2px; float: left; }
  326. .c-ser-main { -webkit-box-flex: 1; box-flex: 1; background: #fff; height: 28px; line-height: 28px; border: 1px solid #e1e1e1; border-radius: 5px; font-size: 15px; color: #8e8e93; position: relative; padding-left: 25px; overflow: hidden; }
  327. .c-ser-main i { position: absolute; left: 7px; top: 7px; }
  328. .c-ser-input { width: 100%; background: #fff; height: 22px; line-height: normal; border: none; font-size: 15px; color: #8e8e93; border-radius: 5px; padding: 3px 0; }
  329. .c-ser-btn { margin-left: 10px; -webkit-box-flex: 0; box-flex: 0; }
  330. .c-ser-btn a { display: block; height: 30px; line-height: 30px; padding: 0 10px; background: #3aa7ed; color: #fff; font-size: 14px; border-radius: 4px; }
  331. .c-ser-canc { margin-left: 10px; -webkit-box-flex: 0; box-flex: 0; }
  332. .c-ser-canc a { display: block; height: 30px; line-height: 30px; color: #37a6ec; font-size: 16px; padding: 0 5px; }
  333. .c-ser-main .input-clear { position: absolute; right: 6px; top: 6px; background: #7e7e7e; border-radius: 50%; width: 16px; height: 16px; text-align: center; }
  334. .c-ser-main .input-clear .close { position: relative; display: inline-block; width: 10px; height: 10px; overflow: hidden; top: -7px; }
  335. .c-ser-main .input-clear .close::before, .c-ser-main .input-clear .close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0px; margin-top: -1px; background: #fff; border-radius: 6px; }
  336. .c-ser-main .input-clear .close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
  337. .c-ser-main .input-clear .close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
  338. /* css c-table two
  339. -----------------------------------------------------------------------------*/
  340. .c-table { width: 100%; border-collapse: collapse }
  341. .c-table th { font-weight: 700; }
  342. .c-table td, .c-table th {border-bottom: 1px solid #f1f1f1;border-right: 1px solid #f1f1f1;text-align: center;padding:10px;}
  343. .c-table tr td:last-child, .c-table tr th:last-child { border-right: 0 }
  344. .c-table tr:last-child td{ border-bottom: 0}
  345. .c-table th , .c-table td {vertical-align:middle}
  346. /* css getmore
  347. -----------------------------------------------------------------------------*/
  348. .c-get-more { width: 100%; }
  349. .c-get-more a { display: block; text-align: center; line-height: 35px; font-size: 14px; color: #909090; }
  350. .c-get-more a.blue { color: #007cd9; }
  351. /* css n-list
  352. -----------------------------------------------------------------------------*/
  353. .ptb12 { padding-top: 12px; padding-bottom: 12px; }
  354. .n-list { background-color: #fff; }
  355. .n-list > li, .n-list > .n-list-li { position: relative; display: -webkit-box; display: box; box-pack: center; padding-right: 15px; margin-left: 15px; border-top: 1px solid #f1f1f1; clear: both; }
  356. .n-list > li:first-child, .n-list > .n-list-li:first-child { border-top: none; }
  357. .n-list > .n-list-link:active { background-color: #f7f7f7; padding-left: 15px; margin-left: 0 }
  358. .n-list > .n-list-cover { padding-left: 15px; margin-left: 0; }
  359. .n-list > .list-arrow-r, .n-list > .list-arrow-d, .n-list > .list-arrow-u { padding-right: 30px }
  360. .n-list > .list-arrow-r:after, .n-list > .list-arrow-d:after, .n-list > .list-arrow-u:after { position: absolute; top: 50%; right: 15px; margin-top: -5px; content: ""; display: block; width: 8px; height: 8px; border: solid #cdcdcd; border-width: 2px 2px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
  361. .n-list > .list-arrow-u:after { right: 13px; margin-top: -2px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
  362. .n-list > .list-arrow-d:after { right: 13px; margin-top: -8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
  363. .n-list-title { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; }
  364. .n-list-key, .n-list-info { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; }
  365. .n-list-info { display: -webkit-box; display: -moz-box; display: box; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
  366. .n-list-flex { display: -webkit-box; display: -moz-box; display: box; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
  367. .n-list > .n-list-function { border-top: none; padding-right: 0; }
  368. .n-list > .n-list-function .n-list-flex { border-top: 1px solid #f1f1f1; }
  369. .n-list > .n-list-function:first-child .n-list-flex { border-top: none; }
  370. .n-list > li:first-child, .n-list > .n-list-function:first-child, .n-list > .n-list-function:first-child .n-list-info, .n-list > div:first-child { border: 0; }
  371. .n-list > .n-list-label { border-top: none; padding-right: 0; }
  372. .n-list .n-list-img { width: 100px; height: 68px; overflow: hidden; position: relative }
  373. .n-list .n-list-img img { width: 100%; height: auto; }
  374. .required { position: relative; }
  375. .required:before { content: "*"; position: absolute; color: #f00; font-size: 14px; height: 12px; line-height: 12px; vertical-align: middle; left: -10px; top: 50%; margin-top: -5px; }
  376. .n-avatar-s, .n-avatar-m, .n-avatar-l { width: 26px; height: 26px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
  377. .n-avatar-m { width: 40px; height: 40px; }
  378. .n-avatar-l { width: 54px; height: 54px; }
  379. .n-avatar-s img, .n-avatar-m img, .n-avatar-l img { width: 100%; height: 100%; }
  380. /*单选框和复选框*/
  381. .c-radio, .c-check { display: block; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; margin: 7px 0; }
  382. .c-radio .disc, .c-check .tick { display: block; position: relative; width: 26px; height: 26px; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #e1e1e1; border-radius: 50%; background: #fff; top: 0; left: 0; z-index: 2; }
  383. .c-check .tick { border-radius: 6px; }
  384. .c-radio > input, .c-check > input { display: inline-block; vertical-align: baseline; position: absolute; z-index: 3; width: 26px; height: 26px; background: transparent; background: rgba(0, 0, 0, 0); -webkit-appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0; outline: 0; }
  385. .c-radio > input:checked + .disc:after, label.checked .disc:after { position: absolute; content: ""; width: 12px; height: 12px; border-radius: 50%; background: #4dcd70; left: 6px; top: 6px; box-sizing: border-box; -webkit-box-sizing: border-box; }
  386. .c-check > input:checked + .tick:after, label.checked .tick:after { position: absolute; content: ""; width: 13px; height: 8px; border: solid #4dcd70; border-width: 0 0 2px 2px; left: 5px; top: 5px; -webkit-transform: rotate(-45deg); }
  387. .c-radio > input:disabled + .disc, .c-check > input:disabled + .tick { background: #f0f0f0; }
  388. .c-radio > input:disabled, .c-check > input:disabled { cursor: auto; }
  389. .c-radio .txt, .c-check .txt { display: inline-block; position: absolute; height: 28px; line-height: 28px; vertical-align: middle; top: 0; left: 32px; }
  390. /*下拉选框*/
  391. .c-select { display: block; position: relative; height: 36px; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; }
  392. .c-select:after { position: absolute; content: ''; width: 8px; height: 8px; border: solid #e1e1e1; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); right: 15px; top: 50%; margin-top: -7px; }
  393. .c-select > select { display: inline-block; vertical-align: baseline; position: relative; z-index: 2; width: 100%; height: 36px; color: #909090; background: transparent; background: rgba(0, 0, 0, 0); border: none; -webkit-appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0 25px 0 10px; }
  394. .c-select > select:focus { color: #4d5a5e; outline: 0; }
  395. .c-input { position: relative; display: inline-block; min-width: 40px; height: 36px; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; }
  396. .c-input > input { display: inline-block; vertical-align: baseline; position: relative; z-index: 2; width: 100%; height: 36px; color: #80989f; background: transparent; background: rgba(0, 0, 0, 0); border: none; -webkit-appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 6px 12px; }
  397. .c-input > input:focus { color: #4d5a5e; outline: 0; }
  398. .c-textarea { position: relative; display: block; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; }
  399. .c-textarea > textarea { display: inline-block; vertical-align: baseline; position: relative; z-index: 2; width: 100%; color: #80989f; background: transparent; background: rgba(0, 0, 0, 0); border: none; -webkit-appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 6px 12px; }
  400. .c-textarea > textarea:focus { color: #4d5a5e; outline: 0; }
  401. /*图片放大*/
  402. .imgzoom-pack { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, .7); display: none; z-index: 3000;}
  403. .imgzoom-pack:after { content: ""; position: absolute; height: 50px; line-height: 50px; width: 100%; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 5;}
  404. .imgzoom-pack .imgzoom-x { color: #fff; height: 50px; width: 60px; line-height: 50px; text-align: center; font-size: 17px; position: absolute; left: 50%; margin-left:-35px; bottom: 0; z-index: 10; cursor: pointer;}
  405. .imgzoom-del { color: #fff; height: 50px; width: 60px; line-height: 50px; vertical-align: middle; text-align: center; position: absolute; right:0; bottom: 0; z-index: 10; cursor: pointer;}
  406. .imgzoom-del .iconfont { font-size: 24px; color: #fff;}
  407. .imgzoom-pack .imgzoom-img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
  408. .imgzoom-pack .imgzoom-img img { width: 100%; position: absolute; top: 50%;}
  409. .ax-popup.dr-jj .ui-dialog-body{ padding-top:0;}
  410. /* css nomess
  411. -----------------------------------------------------------------------------*/
  412. .c-nomess { padding:150px 15px 50px 15px;}
  413. .no-mess { position: relative; background: #dfdfdf; width: 90px; height: 90px; border-radius: 50%; margin: 0 auto; }
  414. .no-mess:after { position: absolute; content: ""; background: #fff; width: 45px; height: 45px; top: 23px; left: 23px; border-radius: 3px; }
  415. .no-mess i { position: relative; display: inline-block; }
  416. .no-mess-ico1 { width: 4px; height: 9px; background: #fff; border: 2px solid #dfdfdf; border-radius: 9px; top: 16px; left: 40px; z-index: 110; }
  417. .no-mess-ico1:before, .no-mess-ico1:after { position: absolute; content: ""; width: 4px; height: 9px; background: #fff; border: 2px solid #dfdfdf; border-radius: 9px; top: -2px; left: -13px; z-index: 111; }
  418. .no-mess-ico1:before { top: -2px; left: 10px; }
  419. .no-mess-ico2 { width: 32px; height: 5px; background: #dfdfdf; border-radius: 9px; top: 28px; left: 19px; z-index: 120; }
  420. .no-mess-ico2:before, .no-mess-ico2:after { position: absolute; content: ""; width: 23px; height: 5px; background: #dfdfdf; border-radius: 9px; top: 10px; left: 0px; z-index: 111; }
  421. .no-mess-ico2:after { width: 18px; height: 5px; background: #dfdfdf; border-radius: 9px; top: 20px; left: 0px; z-index: 111; }
  422. .no-mess-ico3 { width: 16px; height: 4px; background: #fff; border: 2px solid #dfdfdf; border-radius: 9px; top: 54px; left: 15px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); z-index: 130; }
  423. .no-mess-ico3:before { position: absolute; content: ""; width: 4px; height: 6px; background: #fff; border-radius: 9px 9px 0 0; border: 2px solid #dfdfdf; border-bottom: none; top: -8px; left: 4px; z-index: 131; }
  424. .no-mess-ico3:after { position: absolute; content: ""; width: 4px; height: 6px; background: #fff; border-radius: 9px 9px 0 0; border: 2px solid #dfdfdf; border-bottom: none; top: 4px; left: 4px; z-index: 131; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); }
  425. .c-nomess p { text-align: center; font-size: 14px; color: #666; line-height: 20px; padding:5px 0;}
  426. .c-nomess a{ color:#007cd9; margin-left:2px;}
  427. @media (orientation: landscape) {
  428. .c-nomess { padding:50px 15px 20px 15px;}
  429. }
  430. /*head*/
  431. .h45{ height:45px;}
  432. .demo-comtop{ width:100%; height:45px; line-height:44px; background:#fff; color:#333; text-align:center; font-size:16px; padding-left:45px; padding-right:45px; position:fixed; z-index:9999; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; border-bottom:1px solid #e1e1e1;}
  433. .demo-comtop .mui-action-back{ display: block; width:45px; height:45px; position:absolute; left:0; top:0;}
  434. .demo-comtop .mui-action-back:before{ content:''; display: block; width: 12px; height: 12px; border: solid #17b3ec; border-width: 1px 1px 0 0; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); position:absolute; left:18px; top:16px;}
  435. .demo-comtop h1{ max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color: #17b3ec; position: relative;}
  436. .header-tabs {margin: 5px 30px 0;}
  437. .header-tabs .c-lab-les {border-radius: 5px;}
  438. .header-tabs .c-lab-les li {width: 0;}
  439. .header-menu-bg , .header-title-downbg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color:rgba(0, 0, 0, 0.3);}
  440. .header-menu , .header-people , .header-group , .header-link {position: absolute;}
  441. .header-menu , .header-people , .header-group {right: 10px; top: 50%; margin-top: -9px;}
  442. .header-menu a.menu img {width: 20px; height: 17px;}
  443. .header-people a.people img {width: 20px; height: 20px;}
  444. .header-group a.group img {width: 27px; height: 20px;}
  445. .header-tipBox {width: 100px; position: absolute; right: 5px; top: 29px;}
  446. .header-tipBox .bd {background: #fff; border-color:#e1e1e1; }
  447. .header-tipBox .hd .ui-arrow {left:auto; right: 10px;}
  448. .header-a-list li {border-bottom: 1px solid #e1e1e1; line-height: 36px;}
  449. .header-a-list li:last-child {border-bottom: 0;}
  450. .header-link {top: 0px; right: 10px;}
  451. .header-link a.link {color: #17b3ec;}
  452. .header-title-down .ui-arrow {display: inline-block; top: 2px; margin-left: 2px;}
  453. .header-title-downbox {left: 50%; margin-left: -75px; top:28px;}
  454. .header-title-downbox .tipBox {width: 150px;}
  455. .header-title-downbox .tipBox .bd {background-color: #fff; border-color: #e1e1e1;}
  456. .header-title-downbox .tipBox .hd .ui-arrow {left: 50%; margin-left: -5px;}
  457. .header-title-downbox .tipBox .bd li a {color: #333; line-height: 34px; display: block; text-align: left; border-bottom: 1px solid #e1e1e1; padding-left: 5px;}
  458. .header-title-downbox .tipBox .bd li:last-child a {border-bottom: 0;}
  459. .header-title-downbox .tipBox .bd li a img {width: 15px; height: 15px; vertical-align: middle; margin-right: 5px;}
  460. .demo-comtop .mui-msg {display: block; width:45px; height:45px; position:absolute; left:0; top:0; color:#17b3ec;}
  461. .demo-comtop .mui-msg i.iconfont {font-size:18px;}
  462. /*底部导航*/
  463. #navFooter .iconfont { font-size: 22px; line-height: 1em; }
  464. nav { display: -webkit-box; position: fixed; bottom: 0; background: #fefefe; border-top: 1px solid #cbcbcb; font-size: 12px; width: 100%; text-align: center; color: #3d3d3d; height: 50px; z-index: 999; }
  465. nav a { color: #3d3d3d; color: inherit; }
  466. nav > div { -webkit-box-flex: 1; width: 0; padding-top: 8px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; background: #fefefe; z-index: 1000; }
  467. nav div.curr { color: #17b3ec; }
  468. nav > div:first-child { border-left: none; }
  469. nav .haslist { position: absolute; display: block; font-size: 0; line-height: 0; width: 0; height: 0; border-color: transparent; border-style: dashed; border-width: 6px; border-left-color: #dddddd; border-left-style: solid; right: -2px; bottom: -5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); z-index: 1000; }
  470. nav .nav-list { width: 106%; position: absolute; left: -3%; bottom: 52px; box-shadow: 0 0 10px rgba(0,0,0,.2); display: none; }
  471. nav .nav-list a { display: block; width: 100%; height: 45px; line-height: 45px; border-top: 1px solid #e1e1e1; background: #fff; color: #3d3d3d; font-size: 15px; }
  472. nav .nav-list a:first-child { border-top: none; }
  473. nav div .icon-tag { width: 38px; margin: 0 auto; }
  474. nav div .icon-num { position: absolute; top: -2px; right: 0; width: 17px; height: 17px; border-radius: 50%; font-size: 12px; color: #fff; }
  475. nav .icon-num-red { background-color: #ff3824; }
  476. nav .curr .icon-tongjibaobiao:before { content: "\e605"; }
  477. nav .curr .icon-kehuguanli:before { content: "\e606"; }
  478. nav .curr .icon-xingdongrizhi:before { content: "\e607"; }
  479. nav .curr .icon-wo:before { content: "\e602"; }
  480. .nav-mb { width: 100%; height: 100%; background: rgba(0,0,0,0); position: fixed; left: 0; bottom: 0px; z-index: 998; display: none; }
  481. /* css visit time
  482. -----------------------------------------------------------------------------*/
  483. .c-mform-time{ display:box; display:-webkit-box; border-top:1px solid #f2f2f2;}
  484. .c-mform-time dt{ display:block; height:35px; line-height:15px; text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border-right:1px solid #f2f2f2;}
  485. .c-mform-time dd{ display:block; text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;}
  486. .c-mform-time dd label{ display:block; width:100%; height:50px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border-top:1px solid #f2f2f2; border-right:1px solid #f2f2f2; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;}
  487. .c-mform-time .mtleft{ display:block; box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:40px;}
  488. .c-mform-time .mtleft .go-left i{ margin:0 0 0 15px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
  489. .c-mform-time .mtright .go-right i{ margin:0 0 0 13px;}
  490. .c-mform-time .mtmid{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; overflow:hidden; position:relative;}
  491. .c-mform-time .mtmid dl{ display:block; width:60px; float:left;}
  492. .c-mform-time .mtright{ box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:40px;}
  493. .c-mform-time .mtmid a.mt-open{ display:inline-block; width:45px; height:26px; line-height:26px; text-align:center; background-color:#4dcd70; color:#fff; border:1px solid #4dcd70; border-radius:6px; font-size:15px;}
  494. .c-mform-time .mtmid a.mt-full{ display:inline-block; width:45px; height:26px; line-height:26px; text-align:center; background-color:#fff; color:#ff8100; border:1px solid #e1e1e1; border-radius:6px; font-size:15px;}