mplus.mobile.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. /*
  2. M-Care Plus Mobile CSS
  3. 1. 공통 CSS는 mplus.common.css에 설정
  4. */
  5. @charset "UTF-8";
  6. @import "mplus.common.css";
  7. @media all and (max-width: 720px) {
  8. /* html, body {
  9. width: 100%;
  10. height: 100%;
  11. -webkit-text-size-adjust: none;
  12. -moz-text-size-adjust: none;
  13. -ms-text-size-adjust: none;
  14. -webkit-overflow-scrolling: touch;
  15. }
  16. body, ul, ol, li {
  17. margin: 0;
  18. padding: 0;
  19. }
  20. ul, ol {
  21. list-style: none;
  22. }
  23. body {
  24. font-family: Arial, 맑은 고딕, malgun gothic, AppleGothicNeoSD, Apple SD 산돌고딕 Neo, Microsoft NeoGothic, Droid sans, sans-serif;
  25. font-size: 15px;
  26. font-weight: 400;
  27. letter-spacing: -0.02em;
  28. margin: 0;
  29. padding: 0;
  30. color: #777;
  31. }
  32. div, td{
  33. -ms-user-select: none;
  34. -moz-user-select: -moz-none;
  35. -khtml-user-select: none;
  36. -webkit-user-select: none;
  37. user-select: none;
  38. }
  39. a,
  40. a:hover,
  41. a:focus {
  42. color: inherit;
  43. text-decoration: none;
  44. transition: all 0.3s;
  45. }
  46. .navbar {
  47. padding: 15px 10px;
  48. background: #fff;
  49. border: none;
  50. border-radius: 0;
  51. margin-bottom: 40px;
  52. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  53. }
  54. .navbar-btn {
  55. box-shadow: none;
  56. outline: none !important;
  57. border: none;
  58. }
  59. .line {
  60. width: 100%;
  61. height: 1px;
  62. border-bottom: 1px dashed #ddd;
  63. margin: 40px 0;
  64. }
  65. */
  66. /* ---------------------------------------------------
  67. Main Menu
  68. ----------------------------------------------------- */
  69. /* #divMainMenu {
  70. width: 300px;
  71. position: fixed;
  72. top: 0;
  73. right: -1000px;
  74. height: 100vh;
  75. z-index: 999;
  76. background: #7386D5;
  77. color: #fff;
  78. transition: all 0.3s;
  79. overflow-y: scroll;
  80. box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  81. }
  82. #divMainMenu.active {
  83. right: 0;
  84. }
  85. #dismiss {
  86. width: 35px;
  87. height: 35px;
  88. line-height: 35px;
  89. text-align: center;
  90. background: #7386D5;
  91. position: absolute;
  92. top: 10px;
  93. right: 10px;
  94. cursor: pointer;
  95. -webkit-transition: all 0.3s;
  96. -o-transition: all 0.3s;
  97. transition: all 0.3s;
  98. }
  99. #dismiss:hover {
  100. background: #fff;
  101. color: #7386D5;
  102. }
  103. .overlay {
  104. display: none;
  105. position: fixed;
  106. width: 100vw;
  107. height: 100vh;
  108. background: rgba(0, 0, 0, 0.7);
  109. z-index: 998;
  110. opacity: 0;
  111. transition: all 0.5s ease-in-out;
  112. }
  113. .overlay.active {
  114. display: block;
  115. opacity: 1;
  116. }
  117. #divMainMenu .sidebar-header {
  118. padding: 20px;
  119. background: #6d7fcc;
  120. }
  121. */
  122. /* ---------------------------------------------------
  123. CONTENT STYLE
  124. ----------------------------------------------------- */
  125. /* #divContent {
  126. padding: 10px;
  127. min-height: 100vh;
  128. transition: all 0.3s;
  129. top: 0;
  130. right: 0;
  131. } */
  132. /* ---------------------------------------------------
  133. quick menu
  134. ----------------------------------------------------- */
  135. /* #divQuickMenu {
  136. width: 150px;
  137. position: fixed;
  138. top: 0px;
  139. right: -1000px;
  140. height: 100vh;
  141. z-index: 999;
  142. background: #7386D5;
  143. color: #fff;
  144. transition: all 0.3s;
  145. overflow-y: scroll;
  146. box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  147. }
  148. #divQuickMenu.active {
  149. right: 0px;
  150. } */
  151. /* ---------------------------------------------------
  152. modal fullscreen
  153. ----------------------------------------------------- */
  154. .modal-full {
  155. min-width: 100%;
  156. min-height: 100%;
  157. background-color: rgba(255,255,255,1);
  158. margin: 0;
  159. }
  160. .modal-full .modal-content {
  161. min-height: 100vh;
  162. }
  163. /* .modal-full .modal-body {
  164. margin-bottom: 55px;
  165. } */
  166. /* ---------------------------------------------------
  167. loading ...
  168. ----------------------------------------------------- */
  169. .wrap-loading{
  170. z-index: 9999;
  171. position: absolute;
  172. padding: auto;
  173. width: 100%;
  174. height: 100vh;
  175. background-color: rgba(0,0,0,0.1);
  176. top: 0px;
  177. }
  178. .loader {
  179. position: absolute;
  180. top:50%;
  181. left:50%;
  182. margin-left: -25px;
  183. margin-top: -25px;
  184. }
  185. /* ---- Publishing CSS { ---- */
  186. /* ---- 3줄 collapse 설정 { ---- */
  187. .chart-info2 .chart-title .row div{padding:5px 0;font-size:13px;}
  188. .main_fixed_wrap .chart-info2 div p{display:block}
  189. .container-fluid .chart-info2.list{width:100%;padding:324px 16px 16px 16px}
  190. .container-fluid .chart-info2.list.up{padding-top:192px;}
  191. .main_fixed_wrap .chart-info2{width:100%;padding:0 16px 4px 16px;}
  192. .chart-info2 .chart-content div p{display:block;font-size:14.5px}
  193. .chart-info2 .chart-content .row div:nth-child(odd){padding:12px 0px 4px 4px} .chart-info2 .chart-content .row div:nth-child(even){padding:4px 0px 12px 4px}
  194. .chart-info2 .chart-content .row div.p-info-02 p:first-child{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;width:80px;margin:0 auto}
  195. .chart-info2 .chart-content.same-name .row:before{height:72px}
  196. .chart-info2.list .chart-content div p:last-child:before{content:""}
  197. .chart-info2 .chart-content .row div.p-info-02, .chart-info2 .chart-content .row div.p-info-03, .chart-info2 .chart-content .row div.p-info-04 {padding: 16px 0;}
  198. .chart-info2.prescription span.ascending::before{border-bottom: solid 9px #0067a1;border-left: solid 5px transparent;border-right: solid 5px transparent;content: "";}
  199. .chart-info2.prescription span.descending::before{border-top: solid 9px #0067a1;border-left: solid 5px transparent;border-right: solid 5px transparent;}
  200. .chart-info2.prescription{padding-top:15px;}
  201. .container-fluid .chart-info2.list.prescription{padding-top:0px;}
  202. .chart-info2.prescription{padding-top:15px;}
  203. .container-fluid .chart-info2.list.prescription{padding-top:0px;}
  204. .main_fixed_wrap .collapse2{height: 132px;transition: all 0.2s;overflow: hidden;}
  205. .main_fixed_wrap .collapse2.up{height: 0 !important;}
  206. .collapse2 .row div{padding:0;padding-right:4px;height:40px;line-height:40px;font-size:13px}
  207. .collapse2 .row div:last-child{margin-right:0}
  208. .container-fluid .main_fixed_wrap .collapse2{height:132px}
  209. /* ---- 3줄 collapse 설정 } ---- */
  210. /*---- 검사결과 조건 ---- */
  211. .select_toggle button, .select_toggle input, .select_toggle select{ height:40px;}
  212. /*---- 환자목록 환자명 ----*/
  213. .lbl_patient_name { color: #ffa71c; font-weight: bold;}
  214. /*---- 환자목록 생년월일 ----*/
  215. .lbl_patient_birth { color: #01aa01; font-weight: bold;}
  216. /* ---- Publishing CSS } ---- */
  217. } /* end of @media all and (max-width: 768px) */
  218. /* ---- Publishing CSS { ---- */
  219. /* 기 본 공 통 영 역 */
  220. *{ box-sizing: border-box; font-family: 'NSR', Sans-serif; letter-spacing: -0.5px }
  221. body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
  222. /*html{overflow-y:scroll}*/
  223. html,body{position:relative;height:auto}
  224. body{color:#444444;}
  225. img{ vertical-align: middle;}
  226. img,fieldset{border:0}
  227. ul,ol{list-style:none}
  228. em,address{font-style:normal}
  229. table { width: 100%; border-collapse: collapse; }
  230. a{text-decoration:none;color:#444444}
  231. a:hover,a:active,a:focus{text-decoration:none}
  232. hr{display:none}
  233. legend{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
  234. caption{visibility:hidden;overflow:hidden;width:1px;height:1px;font-size:0;line-height:0}
  235. img,button{border:0}
  236. label,button,a{cursor:pointer}
  237. a:active{background-color:transparent}
  238. @media (max-width:720px) {/*720미만*/
  239. body{line-height:1.5}
  240. body .container{width:100%;}
  241. .container-fluid .navigation{padding:17px 0;}
  242. .container-fluid .navigation h1{font-size:26px;line-height:1.2}
  243. .navigation .navi_menu_wrap button{top:18px;font-size:32px;}
  244. .main_fixed_wrap .select_toggle input,.main_fixed_wrap .select_toggle select{font-size:14px;line-height: 40px;height: 40px;text-indent:1px}
  245. .main_fixed_wrap .select_toggle select{background: #fff url(../images/publishing/select_arrow.png) no-repeat right 7px center;background-size: 13px;}
  246. .main_fixed_wrap .dropdown{padding:10px 20px;margin-bottom:10px;}
  247. .main_fixed_wrap .dropdown button.dropdown_btn{width:40px;height:34px;background-size: 20px;}
  248. .main_fixed_wrap .dropdown button.dropdown_btn.on{background: url(../images/publishing/dropdown_down.png) no-repeat center;background-size:20px; }
  249. .main_fixed_wrap .dropdown button.submit{font-size:16px;bottom:10px}
  250. .main_fixed_wrap .dropdown button.reset{font-size:16px;bottom:10px}
  251. .chart-info .chart-title .row div{padding:5px 0;font-size:13px;}
  252. .main_fixed_wrap .chart-info div p{display:block}
  253. .chart-content .row div{font-size:15px;line-height: 20px;}
  254. .container-fluid .chart-info.list{width:100%;padding:283px 16px 16px 16px}
  255. .container-fluid .chart-info.list.up{padding-top:192px;}
  256. .main_fixed_wrap .collapse{height: 92px;transition: all 0.2s;overflow: hidden;}
  257. .main_fixed_wrap .collapse.up{height: 0 !important;}
  258. .select_toggle #datepicker{background: #fff url(../images/publishing/cal.png) no-repeat right 8% center;background-size: 20px;}
  259. .navigation .navi_menu_wrap button.left_menu_btn{left:16px;}
  260. .navi_menu_wrap .right_menu_btn{right:20px;}
  261. .side-right .nav-right-title{padding: 14px 0 !important;font-size: 14px;line-height: 18px;}
  262. .side-right .nav-right a i{position:inherit;height:100%;top:0;left:0;display:flex;flex-direction: column;justify-content: center;margin-right:0;}
  263. .nav-right .side-right .nav-right.list-group div{padding:0}
  264. .list-group-item.item-4 i{font-size:28px;}
  265. .side-right .nav-right a{padding:0;height:11%;font-size:15px;}
  266. .side-right .nav-right a span{margin-left:0}
  267. .side-right .nav-right-bar{font-size:16px;}
  268. .side-left #mainMenu .menu_top{height: 76px;}
  269. .side-left #mainMenu .menu_top h5{font-size: 30px;line-height: 72px;}
  270. .side-left #mainMenu .menu_top div{width:55%;padding:12px 0 12px 16px;}
  271. .side-left #mainMenu .menu_top .name p{font-size:21px;line-height: 28px;}
  272. .side-left #mainMenu .menu_top .name span{font-size:15px;}
  273. .side-left #mainMenu .menu_top .btn button{font-size:30px;}
  274. .side-left #mainMenu .menu_item h5{font-size:17px;}
  275. .side-left #mainMenu .menu_item ul i{font-size:23px;}
  276. .side-left #mainMenu .menu_item ul span{font-size:15px;margin-top:-4px;}
  277. .side-left #mainMenu .menu_item ul li{padding: 28px 0 22px 0;height: 103px;}
  278. .side-left #mainMenu .menu_item.treatment h5{padding: 94px 0px 93px 0;font-size:17px}
  279. .side-left #mainMenu .menu_item.schedule h5{padding: 32px 0 31px 0;line-height:1.2}
  280. .side-left #mainMenu .menu_item.search h5{padding:41px 0;line-height:1.2}
  281. .side-left .nav-left .btn_wrap{padding:18px 6%;}
  282. .side-left .nav-left .btn_wrap button{font-size:15px;}
  283. .side-left #mainMenu .menu_top .btn{float:right;padding-top:30px;width:29%;height: 76px;padding:25px 0;}
  284. .side-left #mainMenu .menu_top .btn button{color:#333333;font-size:40px;background: none;opacity: 1;}
  285. .side-left #mainMenu .menu_top .btn button.close{float:right;width: 22px;height: 22px;background: url(../images/publishing/ico_close_main.png) no-repeat;background-size: 22px;margin-right:20px}
  286. .side-left #mainMenu .menu_top .btn button.setting{float:left;width: 24px;height: 24px;background: url(../images/publishing/ico_setting.png) no-repeat;background-size: 24px;margin-left:20px;margin-right:0;}
  287. .navigation .navi_menu_wrap button.left_menu_btn{width: 30px;height: 30px;background: url(../images/publishing/ico_menu.png) no-repeat left center;background-size: 26px;}
  288. .navigation .navi_menu_wrap button.right_menu_btn{width: 30px;height: 35px;background: url(../images/publishing/ico_doctor.png) no-repeat left center;background-size: 22px;}
  289. .navigation .navi_menu_wrap button.right_menu_btn{top:16px;left:92%}
  290. .side-left #mainMenu .menu_top .name span a{display: inline-block;width: 24px;height: 24px;background: url(../images/publishing/ico_pen.png) no-repeat;background-size: 18px;}
  291. .menu_wrap .side-right .side-right-content .inner{width: 100px;height:100%;box-shadow: 0px 3px 15px 3px #00000052;border-top-left-radius:0.4em;border-bottom-left-radius: 0.4em;}
  292. .side-left #mainMenu .menu_item.search i{height: 40px;}
  293. .side-left #mainMenu .menu_item.search .nfc i{background: url(../images/publishing/ico_nfc_main.png) no-repeat center top;background-size:30px;}
  294. .side-left #mainMenu .menu_item.search .qr i{background: url(../images/publishing/ico_qr_main.png) no-repeat center 3px;background-size:30px;}
  295. .side-left #mainMenu .menu_item.search .bar i{background: url(../images/publishing/ico_bar_main.png) no-repeat center 7px;background-size:36px;}
  296. .side-left #mainMenu .menu_item.search .down i{background: url(../images/publishing/ico_down_main.png) no-repeat center 7px;background-size:36px;}
  297. /* 1210 */
  298. /* .side-right{opacity:0;} */
  299. .collapse .row div{padding:0;padding-right:4px;height:40px;line-height:40px;font-size:13px}
  300. .collapse .row div:last-child{margin-right:0}
  301. .menu_wrap .side-right .side-right-content {overflow-y:hidden;;}
  302. .menu_wrap .side-right .side-right-content,
  303. .menu_wrap .side-right .side-right-overlay {transform: translateX(100%);right: 0;left:auto;transition: all .3s ease-in-out 0s;}
  304. .menu_wrap .side-right.active .side-right-overlay,.menu_wrap .side-left.active .side-left-overlay{opacity:0}
  305. .side-right.active .side-right-content {transform: translateX(0);}
  306. .side-right.active .side-right-overlay {opacity: 1;transform: scale(1);height:100vh;}
  307. .menu_wrap .side-right .side-right-content {padding-left:20px;}
  308. .fixed_navi_wrap{position:static;top:0;left:0;width: 100%;z-index: 11;box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.35);}
  309. .container-fluid .main_fixed_wrap .select_toggle{width:100%;padding:8px 16px 0 16px;border:none}
  310. .navigation .navi_menu_wrap button.right_menu_btn{display:block;}
  311. .main_fixed_wrap .dropdown{width:100%}
  312. .container-fluid .fixed_navi_wrap.main{width:100%}
  313. /* .container-fluid .main_fixed_wrap{padding-top:0} */
  314. .main_fixed_wrap .chart-info{width:100%;padding:0 16px 4px 16px;}
  315. .side-right-content .nav-right-title{margin:0;padding:5px 0 !important;font-size:14px;font-weight: bold;line-height:18px;color:#3e4ea2;border-bottom:2px solid #3b5cb5;text-align: center;background:#fff;border-top-left-radius: 9px ;}
  316. .side-right-content .nav-right.list-group{height:100%;text-align:center;margin-bottom:0}
  317. .side-right-content .nav-right-title{height:auto;}
  318. .side-right-content .nav-right-title span{display:block}
  319. .side-right-content .nav-right a span{display: block;font-size:14px}
  320. .side-right-content .nav-right-bar{margin-bottom:10px;background:#0067a1;font-size:14px}
  321. .side-right-content .list-group-item.search{display: block;width: 40px;height: 40px;border: none;}
  322. .select_toggle input, .select_toggle select{height:40px}
  323. .container-fluid .main_fixed_wrap .collapse{height:92px}
  324. .dropdown button.dropdown_btn{width: 40px;height: 34px;}
  325. .dropdown{padding:10px 20px}
  326. .chart-info .chart-content div p{display:block;font-size:14.5px}
  327. .chart-info .chart-content .row div:nth-child(odd){padding:12px 0px 4px 4px} .chart-info .chart-content .row div:nth-child(even){padding:4px 0px 12px 4px}
  328. .chart-info .chart-content .row div.p-info-02 p:first-child{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;width:80px;margin:0 auto}
  329. .chart-info .chart-content.same-name .row:before{height:72px}
  330. .chart-info.list .chart-content div p:last-child:before{content:""}
  331. .nav-right a i{height:auto}
  332. .select_toggle .shinhan .cst-control-label{display:block;padding-left:15px;font-weight:400;font-size:14px}
  333. .select_toggle .shinhan .cst-control-label span{display:none}
  334. .select_toggle .shinhan .cst-control-label::before{width:20px;height:20px;top:11px;left:2px;transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
  335. .select_toggle .shinhan .cst-control-label::after{left:9px;top:13px;width:7px;height:14px;}
  336. .custom-control.shinhan{font-size:14px}
  337. .custom-control-input{position:absolute;z-index:-1;opacity:0}
  338. .menu_wrap .side-left .side-left-content{overflow-y: auto;width:90%;transform: translateX(-100%);}
  339. .menu_wrap .side-left.active .side-left-content {transform: translateX(0%);border: none;border-top-right-radius:0.5em;border-bottom-right-radius: 0.5em;border-top-left-radius:0;border-bottom-left-radius: 0}
  340. .nav-right .list-group-item.item-2 i:before, .nav-right .list-group-item.item-3 i:before, .nav-right .list-group-item.item-4 i:before, .nav-right .list-group-item.item-5 i:before, .nav-right .list-group-item.item-6 i:before{font-size:24px}
  341. .nav-right.list-group .list-group-item.on::before{display:block;left: -20px;transform: rotate(-90deg);}
  342. .chart-info .chart-content .row div.p-info-02, .chart-info .chart-content .row div.p-info-03, .chart-info .chart-content .row div.p-info-04 {padding: 16px 0;}
  343. .menu_wrap .side-right .nav-right.list-group div{padding:0}
  344. .sub_wrap.layout_has_fixed_bottom{padding-bottom: 60px;}
  345. /* 당직일정 */
  346. /* common */
  347. .container.container-fluid.duty .select_toggle .col-xs-2 button{width:33px;height:33px;line-height:100%}
  348. .duty .collapse .row{padding:0}
  349. .duty .collapse .row div{height:100%;line-height:1.5em}
  350. .duty .collapse .row div.wave{margin:0 10px}
  351. .duty .collapse .row div.starting-date .data-year, .duty .collapse .row div.ending-date .data-year{font-size:12px}
  352. .duty .collapse .row div.starting-date .data-day, .duty .collapse .row div.ending-date .data-day{font-size:18px}
  353. .container.container-fluid.duty .main_fixed_wrap .collapse{height:134px}
  354. .container-fluid.duty .duty-schedule{padding-top:245px}
  355. .container-fluid.duty .duty-schedule.up{padding-top:115px}
  356. .duty-schedule .duty-tit{height:90px}
  357. .duty-schedule .duty-tit div{padding:0;margin:0}
  358. .duty-schedule .duty-tit:first-child p, .duty-schedule .duty-tit button{font-size:11.8px}
  359. .duty-schedule .duty-tit div button span{font-size:15.34px}
  360. .duty-schedule .duty-tit:first-child p, .duty-schedule .duty-tit button{padding:16px 0}
  361. .container.container-fluid.duty .duty-person div:first-child span{font-size:12.98px}
  362. .container.container-fluid.duty .duty-person div:first-child{font-size:13px; padding-top: 3px}
  363. .container.container-fluid.duty .duty-person div p{padding:3px 0;font-size:11px}
  364. .container.container-fluid.duty .duty-person.ICU div:first-child{font-size:13px}
  365. /* personal */
  366. .container-fluid.duty.personal .duty-schedule{padding-top:290px}
  367. .container-fluid.duty.personal .duty-schedule.up{padding-top:150px}
  368. .personal .duty-schedule .duty-tit:first-child p{padding:0}
  369. .personal .duty-schedule .duty-tit{padding:0}
  370. .duty-schedule .duty-calendar p{font-size:15.36px}
  371. }
  372. /* sub */
  373. @media (max-width:576px) {/*576미만*/
  374. p.patient-name{font-size: 22px;padding-left:42px;line-height: 35px;background: url(../images/publishing/patient_icon01.png) no-repeat;background-size: 25px;}
  375. .patient-info{font-size:16px;}
  376. .chart-view-item .btn{font-size:15px;padding:7px 7px;}
  377. .chart-view-item .btn.icon-btn{padding:50px 0 10px 0;;}
  378. .chart-view-item .icon-btn.camera-icon{background: #fff url(../images/publishing/patient_icon02.png) no-repeat center 15px;background-size:30px; }
  379. .chart-view-item .icon-btn.eye-icon{background: #fff url(../images/publishing/patient_icon03.png) no-repeat center 15px;background-size:38px; }
  380. .chart-view-item .icon-btn.medicine-icon{background: #fff url(../images/publishing/patient_icon04.png) no-repeat center 10px;background-size:31px; }
  381. .chart-notice .notice{font-size:13px;}
  382. .chart-notice .text{font-size:15px;}
  383. .chart-view-top{padding-top:5px;}
  384. .patient-info span.description{padding-top:5px;}
  385. .chart-view-item .view-item-title{padding-top:0px;font-size:16px;margin-bottom:3px;}
  386. .chart-view-item{margin-top:5px;}
  387. .notice-more-btn{padding-left:36px;background: url(../images/publishing/more_btn.png) no-repeat left center; background-size:30px;font-size:17px;line-height: 30px;color:#222222;}
  388. .chart-notice{padding:25px 0 18px 0;}
  389. .go-top-btn{position: absolute;bottom: 24px;right: 22px;height: 42px;width: 42px;background: #fff url(../images/publishing/top_btn.png) no-repeat center; background-size: 18px;}
  390. .chart-view-history-top .patient-info span:last-child{display: block;float: inherit;padding-top:8px;}
  391. .view-history-text{font-size:18px;line-height: 28px;}
  392. .inquiry-btn{font-size:16px;line-height: 48px;}
  393. .input-date-wrap{padding:10px 0;font-size:16px;border-left:0;}
  394. .history-card p{font-size:16px;}
  395. .history-card p span{display: block;float:inherit;}
  396. .history-card .icon-wrap{font-size:16px;}
  397. .inquiry-slide-btn{font-size:16px;}
  398. .inquiry-slide-btn::after{width: 10px;height: 10px; border-left: 3px solid #c1c2c4;border-top: 3px solid #c1c2c4;}
  399. .modal-body{font-size:16px;line-height: 24px;padding:30px 15px !important;}
  400. .modal-title{font-size:18px;}
  401. .modal-header .close{font-size: 28px;padding: 0;line-height: 20px;margin: 0;margin-top:4px;margin-right:-5px;}
  402. .btn-dialog, .btn-dialog-blue{font-size:16px;padding:0px 5px !important;}
  403. .bottom-fixed-menu button{font-size:17px;line-height: 50px;}
  404. .custom-control{font-size:16px;padding:12px 7px 12px 60px !important;}
  405. .cst-control-label::before{top:-3px;left:-47px;width: 30px;height: 30px;}
  406. .cst-control-label::after{top:2px;left:-36px;width: 9px;height: 16px;}
  407. .modal-header{padding:0.7rem 1.5rem 0.5rem 1.5rem!important}
  408. .modal-footer{padding:0.7rem 1.5rem 0.7rem 1.5rem!important}
  409. .chart-view-item + .chart-view-item{margin-top:5px;}
  410. .container-fluid.sub{padding-top:90px;}
  411. .layout_has_fixed_bottom{padding-bottom:75px;}
  412. .input-date-wrap .date{background: url(../images/publishing/cal.png) no-repeat right 6px center;background-size: 19px;}
  413. .navi_menu_wrap button.page_close_btn{width: 25px;height: 25px;background: url(../images/publishing/ico_close.png) no-repeat center;background-size:25px;margin-top:3px;}
  414. .chart-view-item .view-item-title i{font-size:21px;}
  415. .chart-view-item .view-item-title i.icon-patient02{margin-right:7px;}
  416. .patient-info span:last-child a.sms{width: 24px;height: 24px;background: url(../images/publishing/ico_talk.png) no-repeat center;background-size: 24px;margin-right:10px;}
  417. .patient-info span:last-child a.smssub{width: 20px;height: 20px;background: url(../images/publishing/ico_talk.png) no-repeat center;background-size: 18px;margin-right:5px;vertical-align: middle;}
  418. .patient-info span:last-child a.tel{width: 24px;height: 24px;background: url(../images/publishing/ico_phone.png) no-repeat center;background-size: 24px;}
  419. .patient-info span:last-child a.telsub{width: 20px;height: 20px;background: url(../images/publishing/ico_phone.png) no-repeat center;background-size: 18px;margin-right:5px;vertical-align: middle;}
  420. .patient-info span:last-child{line-height: 24px;}
  421. .patient-name + .patient-info{float: right;padding-top:10px;}
  422. .cst-control-label{font-size:16px;}
  423. /* 복약안내 */
  424. .drug_nm:before{
  425. content: '';
  426. width: 1em;
  427. height: 1em;
  428. display: inline-block;
  429. vertical-align: middle;
  430. background: url(../images/mobile/pill_icos.png) no-repeat center center;
  431. background-size: 1em auto;
  432. position: absolute;
  433. left: 0;
  434. }
  435. .poc-demo {display: none !important;}
  436. .custom-radio .cst-control-label::after{width: 30px;height: 30px;top: -3px;
  437. left: -47px;}
  438. }
  439. @media (max-width: 400px){/*400미만*/
  440. p.patient-name{font-size: 20px;}
  441. .chart-view-item .btn{font-size:13px;letter-spacing:-0.5px;padding:6px 3px;}
  442. }
  443. /* sub */
  444. @media (max-width:375px) {/*576미만*/
  445. /*576미만 font수정*/
  446. .main_fixed_wrap .select_toggle input,.main_fixed_wrap .select_toggle select{font-size:11px;line-height: 40px;height: 40px;text-indent:1px}
  447. .chart-info .chart-title .row div{padding:5px 0;font-size:10px;}
  448. .chart-content .row div{font-size:10px;line-height: 20px;}
  449. .select_toggle button, .select_toggle input, .select_toggle select{ font-size: 12px;}
  450. .chart-info .chart-content div p{display:block;font-size:10px}
  451. .patient-info{font-size:14px;}
  452. .select_toggle .shinhan .cst-control-label{display:block;padding-left:15px;font-weight:400;font-size:12px}
  453. /* end */
  454. }
  455. @media (max-width: 576px){
  456. .chart-view-item{margin-top:10px;}
  457. .chart-view-item+.chart-view-item{margin-top:10px;}
  458. .chart-view-item + .chart-view-item{margin-bottom:20px;}
  459. .chart-notice{padding:20px 15px;}
  460. .chart-view-top{padding-top:16px;}
  461. .view-history-text{font-size:16px;line-height: 26px;}
  462. .patient-info{padding-top:10px;}
  463. .row.description{margin-top:15px;}
  464. .description + .description{margin-top:10px;}
  465. .login_wrap .logo_wrap{padding-top: 37%;}
  466. /*.login_wrap .input_line{border-bottom:2px solid #fff;}*/
  467. .login_wrap .input_line{border-bottom:2px solid #226f4a;}
  468. .login_wrap .input_line label{width: 30%;font-size:16px;line-height: 30px;}
  469. .login_wrap .input_line input{width: 66%;font-size:16px;line-height: 30px;}
  470. .login_wrap .input_line + .input_line{margin-top:22px}
  471. /*.login_wrap button{border:2px solid #fff;font-size:16px;padding:12px 0;margin-bottom:12px;}*/
  472. .login_wrap button{border:2px solid #226f4a;font-size:16px;padding:12px 0;margin-bottom:12px;}
  473. .login_wrap .footer{font-size:13px;padding:10px 0 20px 0;}
  474. .login_wrap .checkbox_wrap{margin:3px 0;}
  475. .login_wrap .checkbox_wrap .custom-control:first-child {margin-left: 0;}
  476. .login_wrap .custom-control{ padding: 12px 7px 12px 37px !important;}
  477. .login_wrap .inner {width: calc(100% - 20%);}
  478. .login_wrap .cst-control-label::before{left:-36px;}
  479. .login_wrap .cst-control-label::after{left:-25px;}
  480. .login_wrap .cst-control-label{font-size:14px;line-height: 26px;}
  481. .often_use_login{padding:40px 15px;}
  482. .often_use_login h5{font-size:18px;}
  483. .often_use_login p{font-size:14px;line-height: 22px;}
  484. .often_use_login .pic{padding:20px 0;}
  485. .often_use_login .pic img{width: 90px;}
  486. .radio_wrap{margin-top:15px;}
  487. .radio_wrap .custom-control{padding:13px 7px 13px 60px !important;}
  488. .chart-info.prescription span.ascending::before{border-bottom: solid 9px #0067a1;border-left: solid 5px transparent;border-right: solid 5px transparent;content: "";}
  489. .chart-info.prescription span.descending::before{border-top: solid 9px #0067a1;border-left: solid 5px transparent;border-right: solid 5px transparent;}
  490. .prescription_slide_wrap dl{padding:15px 30px;}
  491. .prescription_slide_wrap dl dt{font-size:14px;padding-bottom:3px;}
  492. .prescription_slide_wrap dl dd{font-size:14px;}
  493. .prescription_slide_wrap dl dd strong{font-size:16px;}
  494. .prescription_slide_wrap dl dd + dt{padding-top:10px;}
  495. .prescription_slide_wrap .btn_wrap button{font-size:13px;padding:10px 0;}
  496. .chart-info.prescription{padding-top:15px;}
  497. .container-fluid .chart-info.list.prescription{padding-top:0px;}
  498. .main_fixed_wrap.prescription .dropdown{margin-bottom:0;}
  499. .main_fixed_wrap.prescription{padding-top:4px;}
  500. .sub_wrap{padding:10px;}
  501. }
  502. input[type=date]{
  503. -webkit-appearance:none;
  504. }
  505. /* ---- Publishing CSS } ---- */