style.css 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. /* ui-form
  2. -----------------------------------------------------------------------------*/
  3. .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; }
  4. .input-group { border-collapse: separate; display: table; position: relative; }
  5. .input-group label { display: block; }
  6. .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%; }
  7. .input-group-addon:first-child { border-right: 0; }
  8. .input-group-addon .iconfont { color: #b4b4b4; font-size: 18px; }
  9. .input-group-addon.focus .iconfont { color: #37a6ed; }
  10. .input-group-btn { position: absolute; right: 5px; top: 7px; }
  11. .input-group-btn .c-btn { padding: 5px; border: #ddd 1px solid; }
  12. .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; }
  13. .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); transform: rotate(135deg); position: absolute; top: 15px; right: 15px; }
  14. .input-group .form-control {padding-right:30px;}
  15. .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; }
  16. .input-group .form-control:focus, .input-group .form-select:focus, .input-group .form-textarea:focus { color: #333; }
  17. .input-group .form-control::-webkit-input-placeholder, .input-group .form-textarea::-webkit-input-placeholder {
  18. color: #bfbfbf;
  19. }
  20. .input-group .form-control:-moz-placeholder, .input-group .form-textarea:-moz-placeholder {
  21. color: #bfbfbf;
  22. }
  23. .input-group .form-control::-moz-placeholder, .input-group .form-textarea::-moz-placeholder {
  24. color: #bfbfbf;
  25. }
  26. .input-group .form-control:-ms-input-placeholder, .input-group .form-textarea:-ms-input-placeholder {
  27. color: #bfbfbf;
  28. }
  29. .input-group .form-textarea { height: auto; resize: none; margin: 0; }
  30. .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; }
  31. .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; }
  32. .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; }
  33. .input-group-text { font-size: 14px; color: #555; }
  34. .input-merge .input-group .input-group-addon, .input-group.input-border .input-group-addon { border-bottom-left-radius: 0; border-top-left-radius: 0; }
  35. .input-group.input-border .input-group-addon { border-left: 0; font-size: 15px; color: #333; padding: 10px 20px; }
  36. .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; }
  37. .input-merge .input-group:first-child .input-group-addon { border-top-left-radius: 4px; }
  38. .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; }
  39. .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; }
  40. .input-merge .input-group:last-child .input-group-addon { border-bottom-left-radius: 4px; }
  41. .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; }
  42. .input-merge .input-group.input-border { padding-left: 20px; }
  43. .input-merge .input-group.input-border .input-group-addon { padding-left: 0 }
  44. .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; }
  45. .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; }
  46. .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; }
  47. .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; }
  48. .input-merge.input-merge-border { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; background: #fff; }
  49. .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; }
  50. .input-group .form-input { height: 45px; border-top: 1px solid #e1e1e1; position: relative; padding: 7px 0; }
  51. .input-group .form-input-text { color: #909090; font-size: 15px; }
  52. .input-group .form-select-box { display: inline-block; position: relative; margin-right: 10px; }
  53. .input-group .form-select-box .form-select { width: 100%; }
  54. .input-group .form-select-box .form-select-arrow { top: 7px; right: 12px }
  55. .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; }
  56. .input-group .input-clear { position: absolute; right: 8px; top: 8px; background: #ccc; border-radius: 50%; width: 26px; height: 26px; text-align: center; }
  57. .input-group .input-clear .close { position: relative; display: inline-block; width: 15px; height: 15px; overflow: hidden; top: 6px; }
  58. .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; }
  59. .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); }
  60. .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); }
  61. .input-group-checkbox, .input-group-radio { display: inline-block; position: relative; font-size: 14px; color: #909090; }
  62. .input-group-checkbox label { display: block; cursor: pointer; }
  63. .input-group-checkbox label input[type="checkbox"], .input-group-radio label input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
  64. .input-group-checkbox div input[type="checkbox"], .input-group-radio div input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
  65. .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; }
  66. .input-group-radio .input-group-pack { border-radius: 50%; }
  67. .input-group-checkbox .input-group-pack.input-group-pack-disabled, .input-group-radio .input-group-pack.input-group-pack-disabled { background-color: #f0f0f0; }
  68. .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; }
  69. .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); }
  70. .input-group-radio .input-group-pack .disc { display: block; content: "" !important; width: 0px; height: 0px; border-radius: 50%; background-color: #4dcd70; margin: 4px; }
  71. .input-group-checkbox input[type="checkbox"]:checked ~ .tick, .input-group-checkbox .input-group-pack.checked .tick { top: 0px; }
  72. .input-group-radio input[type="radio"]:checked ~ .disc, .input-group-radio .input-group-pack.checked .disc { width: 10px; height: 10px; }
  73. .input-group-switch { position: relative; font-size: 16px; width: 52px; height: 32px; line-height: 1em; }
  74. .input-group-switch input { width: 52px; height: 32px; position: absolute; z-index: 10; border: none; background: none; -webkit-appearance: none; outline: none; }
  75. .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; }
  76. .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; }
  77. .input-group-switch input:checked:after { left: 21px; }
  78. .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; }
  79. .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; }
  80. .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; }
  81. .input-group-switch input.thread:checked:after { left: 33px; }
  82. .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; }
  83. /* css c-list
  84. -----------------------------------------------------------------------------*/
  85. .list-icon { height: 8px; width: 8px; position: relative; display: inline-block; }
  86. .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); }
  87. .c-list-group { }
  88. .c-list-group h3 { padding: 6px 15px; background-color: #f9f9f9; font-size: 13px; color: #5b5b5b; margin: 0; vertical-align: middle; }
  89. .c-list { background-color: #fff; }
  90. .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; }
  91. .c-list > .c-list-text { line-height: 20px; padding: 12px 15px 12px 0; }
  92. .c-list > .c-list-function { border-top: none; }
  93. .c-list > .c-list-function .c-list-info { border-top: 1px solid #f1f1f1; }
  94. .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 }
  95. .c-list > .c-list-cover { padding-left: 15px !important; margin-left: 0 !important; }
  96. .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; }
  97. .c-list h4 { color: #333 !important; }
  98. .c-list .c-list-info > h4 { font-size: 15px; line-height: 20px }
  99. .c-list .c-list-info > p { font-size: 13px; line-height: 20px; color: #909090; }
  100. .c-list .c-list-label { font-size: 13px !important; color: #909090 !important; padding: 10px 15px 10px 0!important; border-top: 1px dashed #e1e1e1 !important; }
  101. .c-list .c-list-key { margin-right: 15px; }
  102. .c-list .c-list-img { width: 100px; height: 68px; margin: 10px 10px 10px 0; position: relative }
  103. .c-list .c-list-img img { width: auto; height: 68px; }
  104. .c-list > .c-list-link:active { background-color: #e5e6e7; padding-left: 15px; margin-left: 0 }
  105. .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 }
  106. .c-list .c-list-value { color: #909090; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  107. .c-list .c-list-title { }
  108. .c-list .c-list-link .c-list-value, .c-list .c-list-link .c-list-title { padding-right: 20px; }
  109. .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; }
  110. .c-list-link .c-list-badge, .c-list-link .c-list-action { right: 35px }
  111. .c-list-link .list-icon { position: absolute; right: 15px; top: 50%; margin-top: -4px; }
  112. .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; }
  113. .c-list-indent-s { padding-right: 70px !important; }
  114. .c-list-indent-m { padding-right: 110px !important; }
  115. .c-list-action .input-group-checkbox .input-group-pack, .c-list-action .input-group-radio .input-group-pack { margin: 0 0 0 5px; }
  116. .c-avatar-s { width: 26px; height: 26px; }
  117. .c-avatar-m { width: 40px; height: 40px; }
  118. .c-avatar-l { width: 54px; height: 54px; }
  119. .c-avatar-s img, .c-avatar-m img, .c-avatar-l img { width: 100%; height: 100%; }
  120. .c-list-text .c-t-right { color: #909090 !important; }
  121. .c-list-text .c-t-right { padding-right: 0px; color: #909090; }
  122. .c-list-link .c-t-right { padding-right: 20px !important; }
  123. /* css search
  124. -----------------------------------------------------------------------------*/
  125. .c-ser-hold { width: 100%; height: 43px; background-color: #e8e8e8; padding: 6px 10px 0 10px; }
  126. .c-ser-into { background: #f2f2f2; height: 28px; line-height: 28px; border-radius: 5px; color: #8e8e93; padding:0 8px;}
  127. .c-serdet { display: -webkit-box; display: box; padding: 7px 10px 0 10px; }
  128. .ser-icon { position: relative; display: inline-block; width: 13px; height: 13px; font-size: 1px; background: none; top:1px;}
  129. .ser-icon:before, .ser-icon:after { content: ""; position: absolute; left: 0; background: transparent; font-size: 1px; }
  130. .ser-icon-search:before { left: 1px; top: 1px; width: 9px; height: 9px; border: 1px solid #8e8e93; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; }
  131. .ser-icon-search:after { left: 9px; top: 11px; width: 5px; height: 1px; background: #8e8e93; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); }
  132. .c-ser-back { width: 20px; -webkit-box-flex: 0; box-flex: 0; overflow: hidden; }
  133. .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; }
  134. .c-ser-main { -webkit-box-flex: 1; box-flex: 1; background: #eeeff3; height: 28px; line-height: 28px; border-radius: 3px; font-size: 15px; color: #8e8e93; position: relative; padding-left: 25px; overflow: hidden; }
  135. .c-ser-main i { position: absolute; left: 7px; top: 7px; }
  136. .c-ser-input { width: 100%; background: #eeeff3; height: 22px; line-height: 22px; border: none; color: #8e8e93; border-radius: 5px; padding: 3px 5px 3px 0; }
  137. .c-ser-btn { margin-left: 10px; -webkit-box-flex: 0; box-flex: 0; }
  138. .c-ser-btn a { display: block; height: 30px; line-height: 30px; padding: 0 10px; background: #3aa7ed; color: #fff; font-size: 14px; border-radius: 4px; }
  139. .c-ser-canc { margin-left: 10px; -webkit-box-flex: 0; box-flex: 0; }
  140. .c-ser-canc a { display: block; height: 30px; line-height: 30px; padding: 0 5px; }
  141. .c-ser-main .input-clear { position: absolute; right: 6px; top: 6px; background: #7e7e7e; border-radius: 50%; width: 16px; height: 16px; text-align: center; }
  142. .c-ser-main .input-clear:before, .c-ser-main .input-clear:after { content: ''; position: absolute; height: 2px; width: 10px; top:7px; left:3px; background: #fff; border-radius: 6px; }
  143. .c-ser-main .input-clear:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
  144. .c-ser-main .input-clear:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
  145. /* buttons color
  146. -----------------------------------------------------------------------------*/
  147. .c-btn-4dcd70 { background-color: #4dcd70; }
  148. .c-btn-4dcd70:hover { background-color: #45b865; }
  149. .c-btn-fff { background-color: #ffffff; color: #999999; border: #e1e1e1 1px solid; }
  150. .c-btn-fff:hover { background-color: #e5e5e5; }
  151. .c-btn-588cd5 { background-color: #588cd5; }
  152. .c-btn-588cd5:hover { background-color: #4680d0; }
  153. .c-btn-fff-other { background-color: #ffffff; color: #4dcd70; border: #e1e1e1 1px solid; }
  154. .c-btn-fff-other:hover { background-color: #e5e5e5; }
  155. /* css ui-arrow
  156. -----------------------------------------------------------------------------*/
  157. .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; }
  158. .ui-arrow-r, .ui-arrow-r s { border-left-color: #aaa; border-left-style: solid; }
  159. .ui-arrow-r s { border-left-color: #fff; position: absolute; left: -7px; top: -5px; }
  160. .ui-arrow-l, .ui-arrow-l s { border-right-color: #aaa; border-right-style: solid; }
  161. .ui-arrow-l s { border-right-color: #fff; position: absolute; right: -7px; top: -5px; }
  162. .ui-arrow-t, .ui-arrow-t s { border-bottom-color: #aaa; border-bottom-style: solid; }
  163. .ui-arrow-t s { border-bottom-color: #fff; position: absolute; left: -5px; top: -3px; }
  164. .ui-arrow-b, .ui-arrow-b s { border-top-color: #aaa; border-top-style: solid; }
  165. .ui-arrow-b s { border-top-color: #fff; position: absolute; left: -5px; bottom: -3px; }
  166. /* css getmore
  167. -----------------------------------------------------------------------------*/
  168. .c-get-more { width: 100%; }
  169. .c-get-more a { display: block; text-align: center; line-height: 35px; font-size: 14px; color: #909090; }
  170. .c-get-more a.blue { color: #007cd9; }
  171. body{ font-size:14px; color:#333; background-color:#f9f9f9;}
  172. .c-ccc{ color:#ccc;}
  173. .c-e60012{ color:#e60012;}
  174. .c-37a6eb{ color:#37a6eb;}
  175. .bgc-ff8100{ background-color:#ff8100;}
  176. .bgc-4dcd70{ background-color:#4dcd70;}
  177. .bgc-bbbbbb{ background-color:#bbbbbb;}
  178. /* position*/
  179. .r-pos{ right:15px; top:16px;}
  180. .r-arrow-r{ right:-5px; top:16px; }
  181. /*挂号成功*/
  182. .c-4ed964{ color:#4ed964;}
  183. .win-message{ background:#fffce5; padding:10px 10px 25px 10px; font-size:13px; line-height:1.6; position:relative;}
  184. .win-message .icon-guanbi2{ position:absolute; right:10px; bottom:3px; font-size:18px; color:#e71f19;}
  185. .win-register { text-align: center; }
  186. .win-detail{ border-top:1px solid #f2f2f2; padding:10px 0;}
  187. .win-detail > .c-list-text{ padding:3px 10px 3px 0px;}
  188. .win-detail > li{ border-top:none; font-size:13px;}
  189. .win-detail h4{ color:#909090 !important;}
  190. .b-height i, iconfont { font-size: 60px; }
  191. .b-height { height: 80px; height: 80px; line-height: 80px; text-align: center }
  192. .doc-suggst{}
  193. .doc-suggst-top{ line-height:30px; padding:0 10px; font-size:13px; color:#5b5b5b; border-bottom:1px solid #f2f2f2; background:#fff;}
  194. .doc-suggst li{ display:box; display:-webkit-box; position:relative; font-size:13px; color:#909090; background:#fff;}
  195. .doc-suggst li:active{ background:#e5e6e7;}
  196. .doc-suggst li.s-nolink:active{ background:#fff;}
  197. .doc-suggst .s-link:active{ background:#e5e6e7;}
  198. .doc-avatar { -webkit-box-flex: 0; box-flex: 0; width: 45px; height: 45px; border-radius: 50%; overflow: hidden; margin:15px 10px;}
  199. .doc-avatar img{ width: 45px; height: 45px; border-radius:50%;}
  200. .doc-info { -webkit-box-flex: 1; box-flex: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border-top:1px solid #f2f2f2; padding-top:10px; padding-bottom:10px;}
  201. .doc-info h4{ line-height:18px; margin-bottom:2px; word-break:break-all;}
  202. .doc-suggst li:first-child .doc-info{ border-top:none;}
  203. .hosp-avatar{ -webkit-box-flex: 0; box-flex: 0; width:75px; height:55px; overflow: hidden; margin:15px 10px; position:relative;}
  204. .hosp-avatar img{ width:75px; height:55px; border-radius:5px;}
  205. .hosp-avatar .hosp-lv{ position:absolute; width:50px; height:13px; line-height:13px; text-align:center; background:#f60; position:absolute; left:-14px; top:5px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); font-size:10px; color:#fff;}
  206. .hosp-address{ padding-right:50px; position:relative;}
  207. .hosp-address .hosp-pack{ position:absolute; right:0; line-height:20px; top:0; color:#ccc;}
  208. .doc-suggst-charge{ border-top:1px solid #f2f2f2; padding:5px 10px}
  209. .charge-mess{ -webkit-box-flex: 1; box-flex: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  210. .charge-link{ -webkit-box-flex: 0; box-flex: 0; width: 50px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  211. .doc-suggst li .arrow-right{ position:absolute; top:50%; margin-top:-4px; right:10px;}
  212. .doc-suggst-order li{ display:block; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; margin-bottom:10px;}
  213. .doc-suggst-order li .doc-info{ border-top:none;}
  214. .do-hosp{ line-height:35px; font-size:13px; padding:0 10px; border-bottom:1px solid #f2f2f2;}
  215. .do-mess{ display:box; display:-webkit-box;}
  216. .do-state{ line-height:37px; font-size:13px; padding:0 10px; border-top:1px solid #f2f2f2;}
  217. .do-state a{ display:block; width:75px; height:25px; line-height:25px; text-align:center; background:#4dcd70; color:#fff; font-size:13px; border:1px solid #4dcd70; border-radius:3px; margin-top:5px;}
  218. .do-state a:active{ background:#34b758;}
  219. .do-state a.state-again{ background:#fff; border:1px solid #e1e1e1; color:#4dcd70;}
  220. .do-state a.state-cancle{ background:#ccc; border:1px solid #ccc; color:#fff;}
  221. .do-state a.state-again:active{ background:#d9d7d7; color:#fff;}
  222. .must-tb{ color:#ff8100; display:inline-block; margin-right:5px;}
  223. .state-hold{ width:69px; height:19px; position:absolute; right:0; top:0;}
  224. .state-hold div{ float:right; width:45px; height:19px; line-height:19px; background: #abdaf0; position: relative; border-radius: 0 0 0 50px; font-size:10px; color:#fff;}
  225. .state-hold div:before{ content: ""; position: absolute; width:20px; height:19px; top:0; left:-10px; background: #abdaf0; -webkit-transform:skewX(40deg); transform:skewX(40deg); border-radius: 0 0 0 8px;}
  226. .state-hold div span{ display:block; width:54px; height:19px; line-height:19px; position:absolute; right:0px; top:0; z-index:500; text-align:center;}
  227. .no-sched div{ background:#ccc;}
  228. .no-sched div:before{ background:#ccc;}
  229. .lih25{ line-height:25px !important;}
  230. .dis-box{ display:box; display:-webkit-box;}
  231. .datum-list { width:92px; color: #909090; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  232. .datum-right{ border-top: 1px solid #f1f1f1; border: 0; background-image: none; -webkit-box-flex: 1; box-flex: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  233. .bottom-box { padding-left:10px; padding-right:10px;}
  234. .bottom-box a.c-btn { width: 48%; padding: 10px 5px; border-radius:3px;}
  235. .bottom-box a.c-btn-fff{ color:#333;}
  236. .bottom-box { box-sizing: border-box; }
  237. .bottom-box a { box-sizing: border-box; }
  238. .bot-b{ border:1px solid #4dcd70;}
  239. .h55{ height:55px;}
  240. .help-tip{ padding:10px 15px 25px 15px; width:100%; text-align:center;}
  241. .htposi{ position:fixed; left:0; bottom:0; z-index:500; background-color:#f9f9f9;}
  242. /*挂号失败*/
  243. .group-box{ line-height:30px;}
  244. .y-btn { width:62px; height:26px; line-height:26px; text-align:center; border-radius: 4px; padding:0px 2px}
  245. .y-btn-right{ right:15px; top:9px;}
  246. .c-warp{ width:100%; height:100%;background:rgba(0,0,0,.8); position:fixed; left:0; top:0; z-index:500;}
  247. .close-r{ right:20px; top:60px; font-size:px; border-radius: 50%; width:20px; height:20px; text-align:center; line-height:20px;}
  248. .ui-arrow2, .ui-arrow2 s { position: relative; display: block; font-size: 0; line-height: 0; width: 0; height: 0; border-color: transparent; border-style: dashed; border-width: 7px; }
  249. .ui-arrow-r2, .ui-arrow-r2 s { border-left-color: #aaa; border-left-style: solid; }
  250. .ui-arrow-r2 s { border-left-color: #333; position: absolute; left: -9px; top: -7px; }
  251. .ui-arrow-b2, .ui-arrow-b2 s { border-top-color: #aaa; border-top-style: solid; }
  252. .ui-arrow-b2 s { border-top-color: #333; position: absolute; left: -7px; bottom: -5px; }
  253. .c-nowrap-multi4 {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:4;}
  254. .over-y{ overflow:auto; width:100%; height:100%;}
  255. /*申请开通*/
  256. .h-box{ line-height:40px;}
  257. .r-textarea { width: 100%; border: 0; padding: 0; resize: none; background:#fff;}
  258. /*预约详情*/
  259. .det-list { width:100px; color: #333; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  260. .det-right{ text-align:right; border: 0; background-image: none; -webkit-box-flex: 1; box-flex: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; }
  261. /*我的预约信息*/
  262. .pay-t{ right:15px; top:-6px; width:60px; height:24px; line-height:24px;padding:0px 2px}
  263. .pay-button{ right:13px; top:28px; width:62px; height:28px; line-height:28px; text-align:center; border-radius: 4px; padding:0px 2px}
  264. .quit-button{ right:12px; top:50%; margin-top:-14px; width:62px; height:28px; line-height:28px; text-align:center; border-radius: 4px; padding:0px 2px}
  265. .sur-minute{ right:15px; top:58px; }
  266. .tri-left{ width:0px; height:0px; border-top:5px solid transparent; border-bottom: 0px solid transparent; right:79px; top:-6px}
  267. .tri-right{ width:0px; height:0px; border-top:5px solid transparent; border-bottom: 0px solid transparent; right:10px; top:-6px}
  268. .b-rdb6f00{ border-right: 5px solid #db6f00;}
  269. .b-ldb6f00{ border-left: 5px solid #db6f00;}
  270. .b-r399752{ border-right: 5px solid #399752;}
  271. .b-l399752{ border-left: 5px solid #399752;}
  272. .b-r909090{ border-right: 5px solid #909090;}
  273. .b-l909090{ border-left: 5px solid #909090;}
  274. .bgc-ccc{ background-color:#ccc;}
  275. .b-bor{ border:1px solid #dcdcdc; border-radius: 4px;}
  276. .mess-con{ background:#fff; padding:10px 15px; line-height:22px;}
  277. .lih33{ line-height:33px;}
  278. .h35{ height:35px;}
  279. .h40{ height:40px;}
  280. .appoint-lab{ width:100%; height:40px; position:fixed; left:0; top:0; z-index:500; background-color:#fff;}
  281. .appoint-lab a{ display:block; width:50%; line-height:39px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; float:left; text-align:center; position:relative; z-index:502; color:#333;}
  282. .appoint-lab a.hit{ border-bottom:2px solid #4dcd70; color:#4dcd70;}
  283. .appoint-lab:before{ content:''; display:block; width:50%; height:27px; border-right:1px solid #e1e1e1; position:absolute; left:0; top:50%; margin-top:-13px; z-index:501;}
  284. .appoint-con li .doc-warp{ padding-right:85px;}
  285. /*选择医生*/
  286. .noopen-tip i{ margin:70px 0 0 0;}
  287. .noopen-tip .openbtn{ width:100px; height:35px; line-height:35px !important;}
  288. .doc-suggst-lab{ height:45px;}
  289. .doc-suggst-lab ul{ width:100%; height:44px; display:box; display:-webkit-box; position:fixed; left:0; top:0; background:#fff; z-index:600; border-bottom:1px solid #e1e1e1;}
  290. .doc-suggst-lab ul.top35{ top:35px;}
  291. .doc-suggst-lab ul.docpage{ position:relative;}
  292. .doc-suggst-lab li{ -webkit-box-flex:1; box-flex:1; width:1px; text-align:center;}
  293. .doc-suggst-lab li a{ display:block; width:100%; line-height:44px; font-size:13px; color:#909090; position:relative;}
  294. .doc-suggst-lab li a.curr{ color:#4dcd70;}
  295. .doc-suggst-lab li a.curr:before{ content:''; display:block; width:100%; height:3px; background:#4dcd70; position:absolute; left:0; bottom:-1px;}
  296. .h45{ height:45px;}
  297. .h55{ height:55px;}
  298. .date-top{ width:100%; height:45px; display: box; display: -webkit-box; background:#fff; position:fixed; left:0; top:45px; z-index:600; padding:0 10px; border-bottom:1px solid #e1e1e1;}
  299. .date-top .presel{ display:block; width:44px; height:44px; line-height:1.4; font-size:12px; text-align:center; display:box; display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:center; color:#666;}
  300. .date-top .presel.curr{ background-color:#abdaf0; color:#fff;}
  301. .date-top .dtmid{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; position:relative; padding:0 20px;}
  302. .dtmid-time{ width:100%; height:44px; overflow:hidden; position:relative;}
  303. .date-top .dtmid ul{ display:block; width:1000px; position:absolute;}
  304. .date-top .dtmid li{ float:left; color:#666;}
  305. .date-top .dtmid .arrow-right{ position:absolute; right:3px; top:50%; margin-top:-5px;}
  306. .date-top .dtmid .arrow-right:first-child{ right:auto; left:3px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg);}
  307. .do-sched{ border-top:1px dashed #f2f2f2; margin-left:10px; padding:8px 0;}
  308. .do-sched dl{ display:box; display:-webkit-box; line-height:30px; padding:5px 10px 5px 0;}
  309. .do-sched dl dd{ box-flex:1; -webkit-box-flex:1; font-size:13px;}
  310. .do-sched a.sched-btn{ display:inline-block; width:70px; height:30px; line-height:30px; text-align:center; background:#4dcd70; color:#fff; font-size:13px; border-radius:2px;}
  311. .do-sched a.disab{ background:#ccc;}
  312. .do-sched a.sched-btn:active{ background:#34b758;}
  313. .do-sched a.disab:active{ background:#ccc;}
  314. .doc-sched{ line-height:35px; background:#fff; position:relative; padding:0 10px; font-size:13px; color:#ff8100;}
  315. .doc-sched .arrow-right{ position:absolute; right:10px; top:10px; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transition:all .3s ease;}
  316. .doc-sched .arrow-right.ashow{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); top:16px;}
  317. .doc-suggst-tip{ width:100%; height:35px; line-height:34px; background:#f9f9f9; position:fixed; left:0; top:0; z-index:600; border-bottom:1px solid #e1e1e1; color:#5b5b5b; font-size:13px; padding:0 10px;}
  318. .doc-suggst-tip .icon-yiwen{ position:absolute; right:10px; top:0px; font-size:18px; color:#0066ff;}
  319. /*首页*/
  320. .search-hold{ height:45px;}
  321. .search-hold .c-ser-hold{ height:45px; position:fixed; left:0; top:0; background:#fff; z-index:800; padding:8px 10px 0 10px; display:box; display:-webkit-box; display:-moz-box;}
  322. .search-hold .ser-area{ box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; max-width:100px; padding-right:23px; position:relative; line-height:30px; color:#37a6eb; margin-right:4px;}
  323. .search-hold .ser-area .arrow-right{ display:inline-block; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); position:absolute; right:6px; top:8px;}
  324. .search-hold .c-ser-into{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1;}
  325. .index-tit{ line-height:32px;}
  326. .index-myyy{ background:#fff;}
  327. .index-myyy .iy-tit{ line-height:30px; padding:5px 15px 0 15px;}
  328. .index-myyy .iy-tit a{ color:#007cd9;}
  329. .index-myyy .c-list-action{ width:85px; text-align:right;}
  330. .index-myyy .c-list-action a.c-btn{ width:75px; height:30px; line-height:29px !important; padding:0; font-size:15px;}
  331. .c-list-indent-h { padding-right: 80px !important; }
  332. .index-myyy .myhosp{ display:inline-block; width:auto; max-width:100%; position:relative; font-size:13px; color:#909090; padding-right:34px;}
  333. .htit10{ height:10px; background:#f5f5f5;}
  334. .index-hosp .ih-top{ height:10px; background:#f5f5f5;}
  335. .htit35{ height:35px; background:#fff;}
  336. .itfixed{ width:100%; position:fixed; left:0; top:49px; z-index:810;}
  337. .index-hosp .ih-tit{ line-height:25px; padding:8px 15px 2px 15px; background:#fff; font-size:15px;}
  338. .ihfixed{ width:100%; position:fixed; left:0; top:59px; z-index:810; border-bottom:1px solid #e1e1e1;}
  339. .index-hosp .icon-dizhi{ display:inline-block; vertical-align:middle; margin:0 2px 3px 0;}
  340. .index-hosp .ih-tit .arrow-right{ display:inline-block; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); margin:0 0 2px 5px;}
  341. .index-hosp .c-list .c-list-info h4{ float:left; width:auto; max-width:100%; padding-right:34px; position:relative; color:#666;}
  342. .mysj{ display:inline-block; width:30px; height:15px; line-height:15px; background:#f47f1f; font-size:10px; color:#fff; text-align:center; border-radius:3px; position:absolute; right:0; top:3px;}
  343. .index-myyy .c-list-indent-h{ padding-right:85px !important;}
  344. .search-result{}
  345. .ser-nomess{ text-align:center; padding:0 15px; line-height:20px; font-size:14px;}
  346. .noopen{ display:inline-block; width:110px; height:110px; background:url(../images/search-tb.png) no-repeat; background-size:100% 100%; -webkit-background-size:100% 100%; -moz-background-size:100% 100%; -ms-background-size:100% 100%;}
  347. .ser-nomess i{ display:inline-block; margin:90px 0 20px 0; font-size:50px; color:#ccc;}
  348. .ser-doclist{ background:#fff;}
  349. .sd-num{ display:block; line-height:33px; color:#909090; font-size:13px; background:#f9f9f9;}
  350. .sd-more{ display:block; line-height:40px; text-align:center; color:#007cd9; border-top:1px solid #f2f2f2;}
  351. .ser-hosplist .c-list .c-list-info h4{ float:left; width:auto; max-width:100%; padding-right:34px; position:relative; color:#666;}
  352. .ser-hosplist{ background:#fff;}
  353. .ser-hosplist .c-list .c-list-info{ padding-right:40px;}
  354. .ser-doclist .c-list .c-list-info h4{ padding-right:0;}
  355. .ser-doclist .c-list .c-list-info{ padding-right:40px;}
  356. .ser-defu-his{}
  357. .ser-defu-his li{ line-height:45px; background:#fff; padding:0 15px; border-top:1px solid #f2f2f2;}
  358. .ser-defu-his li:first-child{ border-top:none;}
  359. .ser-defu-his li .icon-lishijilu{ display:inline-block; vertical-align:middle; margin-bottom:1px;}
  360. .ser-defu-tip{ width:200px; margin:60px auto 0 auto;}
  361. .ser-defu-tip .st-tit{ font-size:19px; color:#909090; text-align:center; line-height:45px;}
  362. .ser-defu-tip .st-type{ border-top:1px solid #f2f2f2; overflow:hidden; padding:10px 0;}
  363. .ser-defu-tip .st-type span{ display:block; width:50%; float:left; text-align:center; font-size:12px; color:#909090; line-height:1.2;}
  364. .ser-defu-tip .st-type span .iconfont{ font-size:26px;}
  365. .noopen{ display:inline-block; width:110px; height:110px; background:url(../images/search-tb.png) no-repeat; background-size:100% 100%; -webkit-background-size:100% 100%; -moz-background-size:100% 100%; -ms-background-size:100% 100%;}
  366. /* 选择地区 */
  367. .area-top{ height:40px; line-height:40px; background:#fff; padding:0 10px; position:relative; z-index:600; overflow:hidden;}
  368. .area-top .icon-dangqianweizhi{ vertical-align:middle; display:inline-block; margin-right:3px; margin-bottom:2px; color:#ccc;}
  369. .area-box{ width:100%; height:100%; position:fixed; left:0; top:0; padding-top:85px; font-size:15px; z-index:500;}
  370. .area-province{ width:100%; height:100%; float:left; overflow:hidden; background:#f9f9f9;}
  371. .area-province li{ display:block; line-height:20px; padding-top:12px; padding-bottom:12px; padding-right:4px; padding-left:10px; border-top:1px solid #ebeaea;}
  372. .area-province li:first-child{ border-top:none;}
  373. .area-province li:active{ background:#abdaf0; color:#fff;}
  374. .area-province li.curr{ background:#fff;}
  375. .area-city{ width:65%; height:100%; float:left; overflow:hidden; background:#fff; right:-65%; position:relative;}
  376. .area-city li{ display:block; line-height:21px; padding:12px 4px 12px 15px; color:#666;}
  377. .area-city li:active{ background:#abdaf0; color:#fff;}
  378. .openbtn{ width:70px; height:28px; line-height:28px !important; padding:0; text-align:center; font-size:15px;}
  379. .noopen-tip i{ margin:70px 0 0 0;}
  380. .deptpart{ padding-top:83px;}
  381. .dept-top{ padding:0 35px 0 15px; height:40px; line-height:40px; position:relative; z-index:600; overflow:hidden; background-color:#fff;}
  382. .dept-top .icon-qiehuan{ position:absolute; right:10px; top:0px; color:#0066ff; padding-left:20px;}
  383. .dept-top-mess{ display:inline-block; padding-right:34px; position:relative;}
  384. .dept-top-mess .mysj{ top:50%; margin-top:-8px;}
  385. .dept-top .arrow-right{ position:absolute; right:15px; top:50%; margin-top:-4px;}
  386. .area-province li label{ display:inline-block; width:0px; transition:all .3s ease; -webkit-transition:all .3s ease; overflow:hidden; vertical-align:middle; margin-bottom:4px;}
  387. .area-province li.curr label{ width:15px;}
  388. .area-province li .ui-arrow{ position:relative; display:block; font-size:0; line-height:0; width:0; height:0; border-color:transparent; border-style:dashed; border-width: 5px; border-left-color:#0066ff; border-left-style:solid; opacity:0;}
  389. .area-province li.curr .ui-arrow{ opacity:1;}
  390. /* 填写信息 */
  391. .mlpr40{ padding-right:40px !important;}
  392. .ml-collect{ display:block; width:23px; height:23px; line-height:23px; border:2px solid #ccc; color:#ccc; text-align:center; border-radius:50%; position:absolute; right:15px; top:50%; margin-top:-13px;}
  393. .ml-collect.msaved{ border:2px solid #ffc815; color:#ffc815;}
  394. .mess-lock{ background:#fffcf2; line-height:35px; border-bottom:1px solid #f2f2f2;}
  395. .mess-lab{ line-height:38px; background:#fff; position:relative;}
  396. .mess-lab li{ display:block; height:38px; line-height:38px; float:left; position:relative;}
  397. .mess-lab li span{ display:block; height:14px; line-height:14px; padding:0 25px; border-right:1px solid #f2f2f2; margin-top:12px;}
  398. .mess-lab li.hit{ color:#4dcd70; border-bottom:2px solid #4dcd70;}
  399. .mess-lab li .hasnews{ display:block; width:8px; height:8px; line-height:8px; background:#f00; border-radius:50%; position:absolute; left:50%; margin-left:27px; top:9px;}
  400. .mess-lab .labhide{ width:45px; height:38px;}
  401. .mess-lab .arrow-right{ position:absolute; right:15px; top:50%; margin-top:-5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); transition:all .3s ease;}
  402. .mess-lab .arrow-right.ashow{ margin-top:-7px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg);}
  403. .mess-con{ background:#fff; padding:10px 15px; line-height:22px;}
  404. .mess-form{ background:#fff;}
  405. .mess-form li{ border-top:1px solid #f2f2f2; position:relative;}
  406. .mess-form li:first-child{ border-top:none;}
  407. .mform-tit{ display:box; display:-webkit-box; line-height:45px; padding:0 10px; position:relative;}
  408. .mform-tit .icon-haoyuan,.mform-tit .icon-jiuzhenren,.mform-tit .icon-zhengjianleixing,.mform-tit .icon-chushengnianyue,.mform-tit .icon-xingbie,.mform-tit .icon-dangqianweizhi,.mform-tit .icon-weiguanzhu{ position:absolute; right:10px; top:0; font-size:18px; color:#0066ff;}
  409. .mform-tit h4{ box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:95px;}
  410. .mform-tit .mtmess{ display:block; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1;}
  411. .mess-detail{ position:fixed; width:100%; height:100%; background:rgba(0,0,0,.9); overflow:auto; left:0; top:0; z-index:800; padding:10% 20px 10% 20px; display:none;}
  412. .mess-detail .arrow-right{ position:absolute; right:15px; top:22px; transition:all .3s ease;}
  413. .mess-detail .arrow-right.ashow{ -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg);}
  414. .md-intro{ position:relative; border-top:1px solid #f2f2f2;}
  415. .mess-form li .arrow-right.seljt{ position:absolute; right:13px; top:50%; margin-top:-8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg);}
  416. .mf-select{ width:100%; border:none; padding:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none;}
  417. .agreepop{ padding:15px 0 60px 0; line-height:1.7; position:fixed; width:90%; height:80%; left:5%; top:10%; margin-top:20px; z-index:800; background-color:#fff; border-radius:5px; display:none;}
  418. .agreepop .agree-box{ position:relative; height:100%; overflow:auto; padding:0 15px;}
  419. .agreepop p{ word-break:break-all;}
  420. .agreepop .c-btn{ position:absolute; left:5%; bottom:10px; width:90%; border-radius:5px;}
  421. .agreemb{ position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.6); z-index:700; display:none;}
  422. .human-add{ padding:5px; position:relative; z-index:500; background:#fff;}
  423. .human-add a{ display:block; width:100%; height:45px; line-height:45px; background:#4dcd70; border-radius:2px; font-size:16px; color:#fff; text-align:center;}
  424. .human-add a:active{ background:#34b758;}
  425. .jzr-more{ text-align:center; line-height:26px; font-size:13px; color:#5b5b5b; padding-top:3px;}
  426. .jzr-more .arrow-right{ display:inline-block; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); margin:0 0 3px 10px; transition:all .3s ease;}
  427. .jzr-more .arrow-right.ashow{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); margin-bottom:-2px;}
  428. /* ----就诊时间 */
  429. .mform-time{ display:box; display:-webkit-box; border-top:1px solid #6eb2c1; background:#e9f8fc;}
  430. .mform-time dt{ display:block; height:40px; 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:none;}
  431. .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;}
  432. .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 dashed #bddfe8; border-right:1px dashed #bddfe8; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;}
  433. .mform-time dd label:first-child{border-top:1px solid #bddfe8;}
  434. .mform-time .mtleft{ display:block; box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:40px;}
  435. .mform-time .mtleft .go-left span,.mform-time .mtright .go-right span{ display:inline-block; width:21px; height:21px; background:#a0a9ac; text-align:center; border-radius:50%; margin-top:2px;}
  436. .mform-time .mtleft .go-left i{ margin:5px 0 0 7px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg); border:solid #fff; border-width: 2px 2px 0 0;}
  437. .mform-time .mtright .go-right i{ margin:5px 0 0 4px; border:solid #fff; border-width: 2px 2px 0 0;}
  438. .mform-time .mtmid{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; overflow:hidden; position:relative;}
  439. .mform-time .mtmid dl{ display:block; width:60px; float:left;}
  440. .mform-time .mtmid dl:nth-child(2n) dd{ background:#fff;}
  441. .mform-time .mtright{ box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:40px;}
  442. .mform-time .mtmid a.mt-open{ display:block; width:100%; height:100%; text-align:center; background-color:#4dcd70; color:#fff; font-size:13px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  443. .mform-time .mtmid a.mt-full{ display:block; width:100%; height:100%; text-align:center; background-color:#f5f5f5; color:#909090; font-size:13px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  444. .mt-filter{ line-height:35px; background:#e9f8fc; border-top:1px solid #bddfe8; font-size:13px; color:#3399cc; text-align:center;}
  445. /* ----预约号源 */
  446. .mform-num{ display:box; display:-webkit-box; border-top:1px solid #f2f2f2; padding:15px 0 15px 15px;}
  447. .mform-num .mnleft{ height:60px; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; position:relative; overflow:hidden;}
  448. .mform-num .mnleft ul{ display:block; position:absolute;}
  449. .mform-num .mnleft li{ display:block; float:left; width:72px; height:60px; margin-right:10px; background:#fff; border:1px solid #31cc71; border-radius:2px; text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;}
  450. .mform-num .mnleft li .lnum{ display:block; height:36px; line-height:18px; color:#31cc71; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  451. .mform-num .mnleft li .ltime{ display:block; width:100%; height:24px; line-height:24px; background:#31cc71; font-size:12px;}
  452. .mform-num .mnright{ box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:30px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  453. .mform-num .mnright i{ margin-left:10px;}
  454. .choosepop{ width:100%; max-height:50%; bottom:0px; left:0; z-index:800; position:fixed; display:none; -webkit-animation:choopop .3s ease; animation:choopop .3s ease; background:#fff; overflow:hidden;}
  455. @-webkit-keyframes choopop{
  456. 0%{ bottom:-200px;}
  457. 100%{ bottom:0px;}
  458. }
  459. @keyframes choopop{
  460. 0%{ bottom:-200px;}
  461. 100%{ bottom:0px;}
  462. }
  463. .choosepop ul{ display:block; overflow:hidden; background:#fff;}
  464. .choosepop li{ display:block; width:100%; line-height:38px; text-align:center; color:#5b5b5b; font-size:15px; border-top:1px solid #f2f2f2;}
  465. .choosepop li.curr{ color:#00a0e9;}
  466. .choosepop li:first-child{ border-top:none;}
  467. .choosepop .c-add{ display:block; line-height:40px; text-align:center; border-bottom:1px solid #e1e1e1; position:relative; z-index:500; background:#fff;}
  468. .choosepop .c-close{ display:block; width:55px; height:40px; position:absolute; right:2px; top:0; border-left:1px solid #f2f2f2;}
  469. .choosepop .c-close:before{ content:''; display:block; width:30px; height:1px; background:#909090; position:absolute; left:14px; top:20px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);}
  470. .choosepop .c-close:after{ content:''; display:block; width:30px; height:1px; background:#909090; position:absolute; left:14px; top:20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}
  471. .choosepop-mb{ width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0,0,0,.7); z-index:700;}
  472. /* ----就诊人 */
  473. .bor-t-f2{ border-top:1px solid #f2f2f2;}
  474. .mform-human{ height:30px; padding:15px 0; position:relative; overflow:hidden;}
  475. .mform-human ul{ display:block; position:absolute;}
  476. .mform-human li{ display:block; float:left; width:70px; height:30px; line-height:30px; text-align:center; background:#4dcd70; border-radius:5px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; margin-right:8px;}
  477. .mform-human li.mhadd{ border:1px dashed #e1e1e1; background:#fff; position:relative;}
  478. .mform-human li.mhadd:before{ content:''; display:block; width:5px; height:17px; position:absolute; left:50%; margin-left:-2px; top:50%; margin-top:-8px; background:#e1e1e1;}
  479. .mform-human li.mhadd:after{ content:''; display:block; width:17px; height:5px; position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-2px; background:#e1e1e1;}
  480. .notice-box{ background:#fff; padding-left:15px;}
  481. .nb-tit{ line-height:40px; position:relative; border-bottom:1px solid #f2f2f2;}
  482. .nb-tit .arrow-right{ position:absolute; right:15px; top:50%; margin-top:-3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transition:all .3s ease; -webkit-transition:all .3s ease;}
  483. .nb-tit .arrow-right.nhide{ transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); margin-top:-7px;}
  484. .nb-con{ height:70px; overflow:auto; line-height:24px; margin:5px 0 5px 0; padding-right:10px;}
  485. .ncxz{ display: box; display: -webkit-box; line-height:22px;}
  486. .xzleft{ box-flex:0; -webkit-box-flex:0; -moz-box-flex:0; width:160px;}
  487. .xzright{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1;}
  488. /* 2015-11-03 */
  489. .yuyue-sm{ background:#fff; padding:10px 15px;}
  490. .yuyue-sm li{ position:relative;padding-bottom:5px; padding-left:15px; font-size:13px; color:#666; }
  491. .yuyue-sm li em{ position:absolute; top:0;left:0;font-size:15px; color:#ff8100;}
  492. .yuyue-sm li:last-child{ padding-bottom:0;}
  493. .bq-text-box{ border:1px solid #f2f2f2; border-radius:4px; padding:5px 10px;}
  494. .bq-text-box textarea{width:100%; margin:0; padding:0; border:none; resize:none; white-space: pre-wrap;}
  495. .mf-select {margin-left:-2px; background:#fff;}
  496. .mform-tit h4{ width:100px;}
  497. .yuyue-js{ width:100%; min-height:60px; white-space: pre-wrap; word-wrap: break-word;}
  498. /* 预约等待中 */
  499. .wait-tip{ background:#fff; text-align:center; padding:25px 15px 70px 15px;}
  500. .doc-info .icon-daohang{ display:inline-block; vertical-align:middle; margin:0 5px 2px 0; font-size:17px;}
  501. .lih15{ line-height:15px;}
  502. .state-center{ display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; width:100%; height:100%; position:fixed; left:0; top:0; background-color:#fff;}
  503. .state-center .htposi{ background-color:#fff;}
  504. /* 蓝色配色 */
  505. .webcor-blue .c-btn-4dcd70{ background-color:#007cd9;}
  506. .webcor-blue .c-btn-fff-other{ color:#007cd9;}
  507. .webcor-blue .bottom-box a.c-btn-fff{ color:#007cd9; border-color:#47aaf4;}
  508. .webcor-blue .bot-b{ border-color:#007cd9;}
  509. .webcor-blue .b-r399752{ border-right: 5px solid #154c75;}
  510. .webcor-blue .b-l399752{ border-left: 5px solid #154c75;}
  511. .webcor-blue .bgc-4dcd70{ background-color:#007cd9;}
  512. .webcor-blue .mform-time .mtmid a.mt-open{ background-color:#007cd9; border-color:#007cd9;}
  513. .webcor-blue .mform-num .mnleft li{ border-color:#2d91dc;}
  514. .webcor-blue .mform-num .mnleft li .lnum{ color:#2d91dc;}
  515. .webcor-blue .mform-num .mnleft li .ltime{ background-color:#2d91dc;}
  516. .webcor-blue .mform-human li{ background-color:#007cd9;}
  517. .webcor-blue .doc-warp .c-4dcd70{ color:#007cd9;}
  518. .webcor-blue .appoint-lab a.hit{ border-bottom:2px solid #007cd9; color:#007cd9;}
  519. .webcor-blue .area-province li.hit{ border-left:2px solid #007cd9; color:#007cd9;}
  520. .webcor-blue .date-top .presel.hit{ background-color:#007cd9; border-color:#007cd9;}
  521. /* error */
  522. .error-box{ width:100%; height:100%; position:fixed; z-index:500; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center;}
  523. .error-tb{ display:inline-block; width:111px; height:90px; background:url(../images/error-page.png) no-repeat; background-size:100% 100%; -webkit-background-size:100% 100%; -moz-background-size:100% 100%; -ms-background-size:100% 100%;}
  524. /* 绑定提示 */
  525. .realname-pop{ position:fixed; left:0; top:0; width:100%; height:100%; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; z-index:900; text-align:center; color:#fff;}
  526. .realname-img{ display:inline-block; width:197px; height:197px; background:url(../images/activity1-bg.png) no-repeat; background-size:100% 100%; margin-bottom:10px;}
  527. .realname-pop-mb{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:880; background:rgba(0,0,0,.7);}
  528. .realname-pop a.rnbtn{ display:inline-block; width:210px; height:40px; line-height:40px; text-align:center; background:#ff8100; color:#fff; font-size:15px; border-radius:3px; margin-top:10px;}
  529. .realname-pop .realname-pop-close{ position:absolute; right:20px; top:20px; width:23px; height:23px; background:#ccc; border-radius:50%;}
  530. .realname-pop .realname-pop-close:before{ content:''; display:block; width:13px; height:2px; background:#4c4c4c; border-radius:2px; position:absolute; left:5px; top:11px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}
  531. .realname-pop .realname-pop-close:after{ content:''; display:block; width:13px; height:2px; background:#4c4c4c; border-radius:2px; position:absolute; left:5px; top:11px; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg);}
  532. .bindtip-box p{ margin:2px 0 !important; font-size:15px; line-height:1.2;}
  533. .bindtip-box p.c-f18{ font-size:18px !important;}
  534. .bindtip-success{ display:inline-block; width:63px; height:63px; background:url(../images/bind-poptb.png) no-repeat; background-size:126px 63px; margin-top:10px !important;}
  535. .bindtip-failed{ display:inline-block; width:63px; height:63px; background:url(../images/bind-poptb.png) -63px 0 no-repeat; background-size:126px 63px;}
  536. /* 无数据 */
  537. .no-mess{ padding:0 10px; text-align:center; font-size:13px; color:#5b5b5b;}
  538. .no-mess-tb{ display:inline-block; width:123px; height:123px; background:url(../images/no-mess.png) no-repeat; background-size:100% 100%; margin:80px 0 5px 0;}
  539. /* 医生详情 */
  540. .doc-follow{ -webkit-box-flex:0; box-flex:0; width:55px; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; z-index:900; text-align:center; color:#909090; font-size:13px; line-height:1.2;}
  541. .doc-follow .icon-weiguanzhu{ font-size:20px;}
  542. .f-checked{ color:#ff8100;}
  543. .f-checked .icon-weiguanzhu:before { content:"\d617";}
  544. .doc-detail-mess{ padding:10px 10px 30px 10px; font-size:13px; color:#666; line-height:1.7;}
  545. .appoin-detail{ background:#fff; font-size:13px;}
  546. .appoin-detail label{ display:block; margin-left:10px; color:#ff8100; line-height:30px; border-bottom:1px solid #f2f2f2;}
  547. .appoin-detail-con{ padding:5px 10px; line-height:1.6; color:#909090; word-break:break-all;}
  548. .c-nowrap-three {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
  549. .ac-more{ display:block; text-align:center; line-height:25px; color:#0066ff;}
  550. .ac-more .arrow-right{ display:inline-block; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); vertical-align:middle; margin:0 0 7px 5px; border: solid #0066ff; border-width: 2px 2px 0 0; transition:all .3s ease;}
  551. .ac-more .arrow-right.ashow{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); margin-bottom:-2px;}
  552. .plr10 .border-radius-rounded{ border-radius:3px;}
  553. .record-fast{ width:57px; height:57px; background:rgba(0,0,0,.5); border-radius:50%; text-align:center; position:fixed; right:10px; bottom:30px; z-index:600; font-size:10px; line-height:1.2; box-shadow:0px 0px 4px rgba(0,0,0,.5);}
  554. .record-fast a{ display:block; width:100%; height:100%; display:box; display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:center; color:#fff;}
  555. .record-fast .icon-yuyuejilu{ font-size:18px;}
  556. /* demo */
  557. .mt-hosplab{ background:#f3f3f3; padding:10px;}
  558. .mt-hosplab-ul{ display:box; display:-webkit-box; border:1px solid #ececec; border-radius:4px; overflow:hidden;}
  559. .mt-hosplab-ul li{ box-flex:1; -webkit-box-flex:1; height:30px; line-height:30px; color:#4dcd70; text-align:center; border:none; background:#fff;}
  560. .mt-hosplab-ul li.curr{ background:#4dcd70; color:#fff;}
  561. .bor-t-6eb2c1{ border-top:1px solid #6eb2c1;}
  562. .ncds-top{ line-height:45px; font-size:15px; background:#fff; padding:0 15px;}
  563. .ncds-top-jt{ display:inline-block; font-size:0; line-height:0; width:0; height:0; border-color:transparent; border-style:dashed; border-width:6px; border-top-color:#ddd; border-top-style:solid; vertical-align:middle; margin:5px 0 0 5px;}