LifeCenter/src/main/webapp/resources/css/mobile/style.css

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 모바일 가로모드 폰트확대 방지 */
body{background-color:#fff;-webkit-text-size-adjust:none;}
body.active { position: fixed; width: 100%; }

/* 마진과 패딩의 초기화 */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, hr{margin:0;padding:0;}
button { background-color: #fff; border:0px; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}

/* 헤더 폰트 사이즈 초기화 */
h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}

/* 폰트 설정 기본값 400 ( 200 / 300 / 400 / 700 ) */
body,th,td,button{font-size:14px;font-family:'Noto Sans KR',serif;color:#333333;}

/* a{color:#666;text-decoration:none;} */
a{color:#333333;text-decoration:none;}
a:active{text-decoration:none;}
a:hover{text-decoration:none;}

/* 폼태그의 초기화 */
select, input, textarea {font-family:'Noto Sans KR',serif;vertical-align:middle;color:#333333;}
input[type="text"]{ border:1px solid #eaeaea; }
input[type="radio"]{vertical-align:middle;}

/* 줄간격 */
body, select, input, a, button{line-height:1.25;}

/* 스타일 제거 */
ol, ul {list-style:none;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;}

/* 테이블 스타일 초기화 */
table {border-collapse:collapse;border:0;border-spacing:0;table-layout:fixed;width:100%;}
table th{word-wrap:break-word}
table td{word-wrap:break-word}

/* 이미지 및 필드셋에서 보더 표시 초기화 */
fieldset, img {border:0;}
img{vertical-align:middle;}

/* 캡션 텍스트 정렬 초기화 */
caption {text-align:left;}

.container { max-width: 600px; width: 100%; margin: 0px auto; }

/* LOGIN PAGE */
#login { background-color: #CDE4FE; padding: 80px 15px 0px 15px; height: 100vh; }
#login .title { font-size: 36px; color:#426DDB; text-align: center; line-height: 42px; font-weight: 700; }
#login .title span { display: block; font-weight: 400; }
#login .login_box { position: fixed; left: 15px; right: 15px; bottom: 0px;  }
#login .visual img { width: 100%; }
#login .form {background-color: #FFFFFF; padding: 15px 30px 30px 30px; border-top-left-radius: 30px; border-top-right-radius: 30px;}
#login .part { border-bottom: 1px solid #DDDDDD; }
#login .part:nth-child(4),
#login .part:nth-child(5) { border-bottom: 0px; }
#login .selectbox { position: relative; z-index: 1; }
#login .selectbox:before { content: ""; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333; }
#login .selectbox label { position: absolute; top: 50%; left: 5px; margin-top: -8px; color: #426DDB; z-index: -1; }
#login .selectbox select { width: 100%; height: 45px; line-height: 45px; font-family: inherit; padding: 0 10px; border: 0; opacity: 0; filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#login .input input { width: 100%; line-height: 45px; height: 40px; border: 0px; padding: 0 10px 0 30px; }
#login .input input.number { background-image: url('../../images/mobile/login_number_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
#login .input input.login-id { background-image: url('../../images/mobile/login_number_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
#login .input input.date { background-image: url('../../images/mobile/login_date_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
#login .input input.login-pw { background-image: url('../../images/mobile/login_date_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
#login .alert { font-size: 13px; color:#D70000; margin: 10px 0px 15px 0px; }
#login .button button { display: block; background-color: #426DDB; font-size: 15px; font-weight: 700; color:#FFFFFF; text-align: center; line-height: 50px; height: 50px; width: 100%; border-radius: 25px; }

/* MAIN PAGE */
#main {}
#main .nav { display: none; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(0,0,0,0.7); z-index: 20; }
#main .nav.active { display: block; }
#main .nav_box { position: absolute; left: 0px; right: 70px; top: 0px; bottom: 0px; background-color: rgba(255,255,255,1); padding: 60px 30px 30px 30px; z-index: 30; }
#main .nav .close {position: absolute;right: 20px;top:20px;}
#main .nav .close a { width:20px; height:20px; display:inline-block; position: relative; text-indent:-9999em;-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; -o-transition:.5s ease-in-out; transition:.5s ease-in-out;}
#main .nav .close span {display:block; position:absolute; height:3px; width:50%; background-color:#000000; opacity:1; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out;}
#main .nav .close span:nth-child(1) {left:2px; top:4px;}
#main .nav .close span:nth-child(2) {left:calc(50% - 2px); top:4px;}
#main .nav .close span:nth-child(3) {left:2px; top:10px;}
#main .nav .close span:nth-child(4) {left:calc(50% - 2px); top:10px;}
#main .nav .close span:nth-child(1), #main .nav .close span:nth-child(4) {-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}
#main .nav .close span:nth-child(2), #main .nav .close span:nth-child(3) {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
#main .nav .name { position: relative; font-size: 14px; margin-bottom: 30px; }
#main .nav .name span { font-size: 24px; font-weight: 900; }
#main .nav .name a.logout {position: absolute;top:50%;right: 0px; background-color: #40A3DF; color:#FFFFFF;line-height:30px;height:30px;padding:0px 10px;border-radius:5px;margin-top:-15px; }
#main .nav .category li { border-bottom: 1px solid #DDDDDD; }
#main .nav .category li a { display: block; font-size: 16px; font-weight: 500; line-height: 60px; height: 56px; }
#main .nav .version { position: absolute; font-size: 13px; color:#333333; right: 20px; bottom: 20px; }
#main .header { position: absolute; left: 0px; right: 0px; top: 0px; height: 60px; padding:20px 0px; z-index: 10; }
#main .header:after { display: block; content: ''; clear: both; }
#main .header .menu_bar { position: absolute; left: 20px; top: 20px; }
#main .header .menu_bar a { display: block; background-image: url('../../images/mobile/menu_bar.png'); background-position: center; background-size: 28px 17px; width: 28px; height: 17px; text-indent: -9999px; }
#main .header .alram { position: absolute; right: 20px; top: 20px; }
#main .header .alram a { display: block; background-image: url('../../images/mobile/alram_icon.png'); background-position: center; background-size: 17px 20px; width: 17px; height: 20px; text-indent: -9999px; }
#main .banner { background-image: url('../../images/mobile/main_bg.png'); background-position: top center; background-size: cover; padding: 100px 30px 30px 30px; }
#main .banner .name { font-size: 18px; color:#FFFFFF; font-weight: 700; margin-bottom: 50px; }
#main .banner .caption { color: #FFFFFF; }
#main .banner .caption .title { font-size: 16px; font-weight: 500; margin-bottom: 10px; }
#main .banner .caption .info { font-size: 26px; font-weight: 700; line-height: 32px; }
#main .banner .caption .title {}
#main .quick_menu { margin: 5%; }
#main .quick_menu ul { font-size: 0px; text-align: center; }
#main .quick_menu li { display: inline-block; width: 42%; margin: 5% 2%; }
#main .quick_menu li a { display: block; font-size: 16px; font-weight: 500; }
#main .quick_menu li a div.menu-eng { font-size: 12px; }
#main .quick_menu li .image { position: relative; margin-bottom: 15px; }
#main .quick_menu li .new_icon { position: absolute; top: 0px; right: 0px; background-color: #F85767; font-size: 11px; color:#FFFFFF; padding: 3px 6px; border-radius: 4px; z-index: 10; }
#main .quick_menu li img { width: 55%; }
#main .user_guide {  background-color: #F6F6F6; text-align: center;}
#main .user_guide a { display: block; font-size: 16px; line-height: 80px;  }
#main .user_guide a .icon { display: inline-block; 
/* background-image: url('../../images/mobile/man_bg.png'); */
 margin-right: 10px; }
#main .user_guide a .icon img { width: 40px; }


/* SUB PAGE */
#sub { padding-bottom: 100px; }
#sub .header { position: relative; background-image: url('../../images/mobile/sub_header_bg.png'); background-position: top center; background-size: cover; padding: 20px; }
#sub .header .previous { position: absolute; left: 20px; top: 50%; margin-top: -9px; }
#sub .header .previous a { display: block; background-image: url('../../images/mobile/previous_icon.png'); background-size: 10px 18px; background-position: center; background-repeat: no-repeat; width: 10px; height: 18px; text-indent: -9999px; }
#sub .header .title { font-size: 18px; font-weight: 500; color:#FFFFFF; text-align: center; }
#sub .alert { background-color: #FAFAFA; font-size: 14px; font-weight: 500; color:#428ADC; padding: 15px 20px; border-bottom: 1px solid #CCCCCC; }
.list input[type="checkbox"] { display:none; }
.list input[type="checkbox"] + label { font-size: 14px; letter-spacing: -1px; }
.list input[type="checkbox"] + label span { display:inline-block; width:19px; height:19px; margin:-2px 10px 0 0; vertical-align:middle; background-image:url('../../images/mobile/check_circle_icon.png'); background-repeat: no-repeat; background-position: center; background-size: 19px; cursor:pointer; }
.list input[type="checkbox"]:checked + label span {  background-image:url('../../images/mobile/check_circle_icon_check.png'); background-repeat: no-repeat; background-position: center; background-size: 19px; }
input[type="radio"] {height:0;width:0;margin:0;padding:0;}
input[type="radio"] + label { font-size: 14px; letter-spacing: -1px; }
input[type="radio"] + label span { display:inline-block; width:19px; height:19px; margin:-2px 10px 0 0; vertical-align:middle; background-image:url('../../images/mobile/check_circle_icon.png'); background-repeat: no-repeat; background-position: center; background-size: 19px; cursor:pointer; }
input[type="radio"]:checked + label span {  background-image:url('../../images/mobile/check_circle_icon_check.png'); background-repeat: no-repeat; background-position: center; background-size: 19px; }
.btn_group { position: fixed; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.btn_group li a { display: block; width: 100%; font-size: 16px; font-weight: 700; text-align: center; line-height: 50px; height: 50px; }
.btn_group .half:after { display: block; content: ''; clear: both; }
.btn_group .half li { float: left; width: 50%; }
.btn_group li a { position: relative; }
.btn_group li a.previous {  }
.btn_group li a.previous:after { position: absolute; left: 10px; top: 50%; margin-top: -8px; display: block; content: ''; clear: both; width: 20px; height: 16px; background-image: url('../../images/mobile/btn_previous_icon.png'); background-repeat: no-repeat; background-position: center; }
.btn_group li a.confirm { background-color: #427BDC; color:#FFFFFF; font-weight: 700; }
.btn_group li a.confirm span.check { background-repeat: no-repeat; background-image: url(../../images/mobile/btn_check_icon.png); padding-left: 30px; background-position: left center;  }

.btn_group li button { display: block; width: 100%; font-size: 16px; font-weight: 700; text-align: center; line-height: 50px; height: 50px; }
.btn_group li button { position: relative; }
.btn_group li button.previous {  }
.btn_group li button.previous:after { position: absolute; left: 10px; top: 50%; margin-top: -8px; display: block; content: ''; clear: both; width: 20px; height: 16px; background-image: url('../../images/mobile/btn_previous_icon.png'); background-repeat: no-repeat; background-position: center; }
.btn_group li button.confirm { background-color: #427BDC; color:#FFFFFF; font-weight: 700; }
.btn_group li button.confirm span.check { background-repeat: no-repeat; background-image: url(../../images/mobile/btn_check_icon.png); padding-left: 30px; background-position: left center;  }

/* Check LIST */
.check_list {}
.check_list .part { padding: 20px; border-bottom: 1px solid #DDDDDD; }
.check_list .title { font-size: 16px; font-weight: 500; margin-bottom: 15px; }
.check_list .title .mini { display: block; font-size: 13px; color:#666666; margin-top: 5px; }
.check_list .data {}
.check_list .data label { display: inline-block; margin-right: 10px; }
.check_list .data label:last-child { margin-right: 0px; }
.check_list .data label input[type="text"] { max-width: 60px; height: 30px; line-height: 30px; }
.check_list .date {}
.check_list .date:after { display: block; content: ''; clear: both; }
.check_list .date input[type="text"] {width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); width: -ms-calc(100% - 30px); line-height: 30px; height: 30px; border: 1px solid #EAEAEA; }
.check_list .date select { width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); width: -ms-calc(100% - 30px); line-height: 30px; height: 30px; border: 1px solid #EAEAEA; }
.check_list .date .year { float: left; width: 40%; font-size: 14px; line-height: 30px; height: 30px; }
.check_list .date .month { float: left; width: 30%; }
.check_list .date .day { float: left; width: 30%; }
.check_list .list ul:after { display: block; content: ''; clear: both; }
.check_list .list li { float: left; width: 100%; margin: 10px 0px;}
.check_list .list .half:after { display: block; content: ''; clear: both; } 
.check_list .list .half li { width: 50%;}
.check_list .list .half li.full { width: 100%;}
.check_list .list li .comment { border-bottom : 1px solid #DDDDDD; margin-top: 10px; }
.check_list .list li .comment input[type="text"]{ width: 100%; line-height: 30px; height: 30px; border: 0px; }

/* GUIDE LIST */
.faq .list { list-style:none; padding:0; width: 100%; }
.faq .list li a { position: relative; display: block; border-bottom: 1px solid #dddddd; color: #393939; font-size: 17px;text-align: left;padding: 20px 55px 20px 15px}
.faq .list li a:after { display: block; content: ''; width: 15px; height: 9px; position: absolute; top: 50%; right: 20px; background-image: url('../../images/mobile/arrow_open.png'); background-repeat: no-repeat; background-position: center; margin-top: -4px; }
.faq .list li a.active:after { background-image: url('../../images/mobile/arrow_close.png'); }
.faq .list li a span.num { display: inline-block; font-weight: 900; color:#4276DC; margin-right: 10px; }
.faq .list li .answer { background-color: #F2F2F2; font-size: 15px; line-height: 21px; color:#666666; padding: 10px; border-bottom: 1px solid #DDDDDD; }

/* ALRAM HISTORY LIST */
.alram .list { list-style:none; padding:0; width: 100%; }
.alram .list li a { position: relative; display: block; border-bottom: 1px solid #dddddd; color: #393939; font-size: 16px;text-align: left;padding: 20px 110px 20px 15px}
.alram .list li a:after { display: block; content: ''; width: 15px; height: 9px; position: absolute; top: 50%; right: 20px; background-image: url('../../images/mobile/arrow_open.png'); background-repeat: no-repeat; background-position: center; margin-top: -4px; }
.alram .list li a.active:after { background-image: url('../../images/mobile/arrow_close.png'); }
.alram .list li a span.num { display: inline-block; font-weight: 900; color:#4276DC; margin-right: 10px; }
.alram .list li a span.date { font-size: 11px; line-height: 16px; height: 16px; position: absolute; right: 40px; top: 50%; margin-top: -7px; }
.alram .list li .answer { background-color: #F2F2F2; font-size: 15px; line-height: 25px; color:#666666; padding: 20px; border-bottom: 1px solid #DDDDDD; }

/* ASK LIST */
.ask .list { list-style:none; padding:0; width: 100%; }
.ask .list li a { position: relative; display: block; border-bottom: 1px solid #dddddd; color: #393939; font-size: 16px;text-align: left;padding: 20px 110px 20px 15px}
.ask .list li a span.date { display: block; font-size: 11px; line-height: 16px; height: 16px;  }
.ask .list li a .step { position: absolute; right: 20px; top:50%; background-color: #929DA3; font-size: 14px; color:#FFFFFF; padding: 5px 30px 5px 10px; border-radius: 4px; margin-top: -15px; background-image: url('../../images/mobile/ask_arrow_down.png'); background-repeat: no-repeat; background-position: right 10px center; }
.ask .list li a .step.noreply{  border:2px solid #929DA3;  }
.ask .list li a .step.reply{ background-color: #40A3DF;  border:2px solid #40A3DF;  }
.ask .list li a.active .step.reply { background-color: #FFFFFF; color:#40A3DF;box-sizing: border-box; background-image: url('../../images/mobile/ask_arrow_up.png'); }
.ask .list li .answer { background-color: #F2F2F2; font-size: 15px; line-height: 25px; color:#666666; padding: 20px; border-bottom: 1px solid #DDDDDD; }
.ask .list li .answer .reply { font-size: 14px; color:#4277DC; line-height: 20px; padding-top: 15px; border-top: 1px solid #DDDDDD; margin-top: 15px; }
.ask .list li .answer .reply .date { font-size: 13px; margin-top: 5px; }
.ask .nodata { position: absolute; left: 0px; right: 0px; top: 50%; margin-top: -15px; font-size: 16px; font-weight: 700; line-height: 30px; height: 30px; text-align: center; }
.ask .write { padding: 20px; }
.ask .write .part { margin-bottom: 20px; }
.ask .write .part:last-child { margin-bottom: 0px; }
.ask .write .title { font-size: 15px; font-weight: 500; }
.ask .write .input input[type="text"] { width: 100%; height: 40px; line-height: 40px; padding: 0px 10px; border: 0px; border-bottom: 1px solid #DDDDDD; }
.ask .write .input textarea { width: 100%; min-height: 100px; line-height: 20px; padding:10px; border: 0px; border-bottom: 1px solid #DDDDDD; }
.ask .write .count { margin-top: 5px; text-align: right; color:#999999; }
.ask .write .count span { font-weight: 500; color:#333333; }

/* CONNECT PAGE */
.device_control {}
.device_control .part { position: relative; padding: 20px; border-bottom: 1px solid #DDDDDD; }
.device_control .part:after { display: block; content: ''; clear: both; }
.device_control .part .title { font-size: 16px; font-weight: 900; padding-left: 45px; background-repeat: no-repeat; background-size: 34px 34px; background-position: left center; }
.device_control .part .title .name { font-size: 12px; color:#4276DC; font-weight: 500; }
.device_control .part .connect { position: absolute; top: 50%; right: 20px; margin-top: -15px; z-index: 10; }
.device_control .part .connect a { display: block; font-size: 14px; color:#FFFFFF; padding: 0px 10px; line-height: 30px; height: 30px; border-radius: 5px; }
.device_control .part .date { display: none; position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: #666666; letter-spacing: -0.5px; }
.device_control .part.link .date { display: block; }
.device_control .part.unlink.one .title { background-image: url('../../images/mobile/device_connect_unlink_1.png'); }
.device_control .part.unlink.two .title { background-image: url('../../images/mobile/device_connect_unlink_2.png'); }
.device_control .part.unlink.three .title { background-image: url('../../images/mobile/device_connect_unlink_3.png'); }
.device_control .part.unlink.four .title { background-image: url('../../images/mobile/device_connect_unlink_4.png'); }
.device_control .part.unlink.five .title { background-image: url('../../images/mobile/device_connect_unlink_5.png'); }
.device_control .part.unlink .title .name { color:#666666; }
.device_control .part.unlink .connect a { background-color: #BBc2C6; }
.device_control .part.link.one .title { background-image: url('../../images/mobile/device_connect_link_1.png'); }
.device_control .part.link.two .title { background-image: url('../../images/mobile/device_connect_link_2.png'); }
.device_control .part.link.three .title { background-image: url('../../images/mobile/device_connect_link_3.png'); }
.device_control .part.link.four .title { background-image: url('../../images/mobile/device_connect_link_4.png'); }
.device_control .part.link.five .title { background-image: url('../../images/mobile/device_connect_link_5.png'); }
.device_control .part.link .title .name { color:#4276DC; }
.device_control .part.link .connect a { background-color: #40A3DF; } 
.device_find { text-align: center; margin-top: 44%; }
.device_find .name { display: inline-block; background-color: #EFEFEF; padding: 20px; border-radius: 10px; margin-bottom: 30px;}
.device_find .name .brand { color:#999999; }
.device_find .text { font-size: 16px; font-weight: 700; }

/* MY HISTORY */
.examination {}
.examination .daily {position: relative; font-size: 26px; font-weight: 900; text-align: center; margin-top: 50px; margin-bottom:20px;}
.examination .daily a { position: absolute; top: 50%; margin-top: -8px; width: 8px; height: 16px; background-repeat: no-repeat; background-position: center; text-indent: -9999px; }
.examination .daily a.previous { background-image: url('../../images/mobile/daily_L_arrow.png'); left: 50%; margin-left: -100px; }
.examination .daily a.previous.active { background-image: url('../../images/mobile/daily_L_arrow_active.png'); }
.examination .daily a.next { background-image: url('../../images/mobile/daily_R_arrow.png'); right: 50%; margin-right: -100px; }
.examination .daily a.next.active { background-image: url('../../images/mobile/daily_R_arrow_active.png'); }
.examination .history{ text-align: center; margin-bottom: 30px; }
.examination .history a { display: inline-block; padding: 5px 10px; border-radius: 30px; background-color: #427BDC; font-size: 14px; color:#FFFFFF; }
.examination .data {}
.examination .data .point { background-color: #FAFAFA; font-size: 15px; color:#428ADC; line-height: 20px; height: 40px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 10px 20px; }
.examination .data .table th, .examination .data .table td { text-align: center; padding: 20px 5px; border-bottom: 1px solid #DDDDDD; }
.examination .data .table .check { font-size: 14px; color:#427BDC; font-weight: 700; margin-bottom: 5px; }
.examination .data .table .mini { font-size: 12px; color:#427BDC; margin-bottom: 5px; }
.examination .data .table .date { font-size: 12px; color:#989898; }
.examination .data .table thead.gray th { background-color: #427BDC; color:#FFFFFF; }

/* Displayphone */
#displayphone .box { position: relative; }
#displayphone .bigCam { height: 100vh; background-image: url('../../images/mobile/bigCam_sample.png'); background-size: cover; background-position: center; }
#displayphone .miniCam { position: absolute; right: 10px; bottom: 110px; background-image: url('../../images/mobile/miniCam_sample.png'); background-size: contain; background-position: center;  width: 82px; height: 126px; box-shadow: 0px 0px 6px rgba( 0,0,0,0.2); z-index: 10;  }
#displayphone .icon_list { position: absolute; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF;padding: 20px 0px; z-index: 10;}
#displayphone .icon_list ul { font-size: 0px; text-align: center; }
#displayphone .icon_list li { display: inline-block; width: 30%; }
#displayphone .icon_list li a { display: inline-block; width: 60px; height: 60px; }
#displayphone .icon_list li a.mic{ background-image: url('../../images/mobile/displayphone_1.png'); }
#displayphone .icon_list li a.end{ background-image: url('../../images/mobile/displayphone_2.png');  }
#displayphone .icon_list li a.cam{ background-image: url('../../images/mobile/displayphone_3.png'); } 
#displayphone .link_alert { background-color: rgba( 0, 0, 0, 0.8); position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 30; }
#displayphone .link_alert span { display: inline-block; position: absolute; left: 0px; top: 50%; right: 0px; font-size: 16px; line-height: 30px; color: #FFFFFF; text-align: center; margin-top: -15px; z-index: 40; } 


/* HEALTH INFOMATION */
.device_tab { background-color: #FAFAFA; padding: 10px 0px; border-bottom: 1px solid #DDDDDD; }
.device_tab ul:after { display: block; content: ''; clear: both; }
.device_tab li { float: left; width: 20%; }
.device_tab li a { display: block; font-size: 12px; color:#666666; letter-spacing: -0.5px; text-align: center; padding-top: 40px; background-repeat: no-repeat; background-position: top center; background-size: 34px; }
.device_tab li a.active { font-weight: 700; color:#333333; } 
.device_tab li a.one { background-image: url('../../images/mobile/device_connect_unlink_1.png'); }
.device_tab li a.two { background-image: url('../../images/mobile/device_connect_unlink_2.png'); }
.device_tab li a.three { background-image: url('../../images/mobile/device_connect_unlink_3.png'); }
.device_tab li a.four { background-image: url('../../images/mobile/device_connect_unlink_4.png'); }
.device_tab li a.five { background-image: url('../../images/mobile/device_connect_unlink_5.png'); }
.device_tab li a.one.active { background-image: url('../../images/mobile/device_connect_link_1.png'); }
.device_tab li a.two.active { background-image: url('../../images/mobile/device_connect_link_2.png'); }
.device_tab li a.three.active { background-image: url('../../images/mobile/device_connect_link_3.png'); }
.device_tab li a.four.active { background-image: url('../../images/mobile/device_connect_link_4.png'); }
.device_tab li a.five.active { background-image: url('../../images/mobile/device_connect_link_5.png'); }
.device_tab li a span.eng {display:block;font-size:10px;font-weight:400;margin-top:3px;}

.health { padding: 20px; }
.health .part { margin-bottom: 15px; }
.health .part .title { font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.health .part .input { position: relative; }
.health .part .input input[type="text"]{ width: 100%; font-size: 15px; color:#427BDC; padding: 10px; border: 0px; border-bottom: 1px solid #DDDDDD; }
.health .part .input input[type="text"]::placeholder { color:#427BDC; }
.health .part .input input.datePicker{outline:none;}
.health .part .input input.timePicker{outline:none;}
.health .part .input.day a { background-image: url('../../images/mobile/health_calendar.png'); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; margin-top: -10px; z-index: 10; text-indent: -9999px; }
.health .part .input.time a { background-image: url('../../images/mobile/health_time.png'); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; margin-top: -10px; z-index: 10; text-indent: -9999px; }
.health .data { background-color: #404C60; text-align: center; padding: 20px; border-radius: 10px; }
.health .data.link { color:#FFFFFF; }
.health .data.unlink{ color:#FFFFFF; }
.health .data .point { font-size: 18px;  }
.health .data input[type="text"] { background-color: inherit; max-width: 80px; color: #FFFFFF; height: 40px; line-height: 30px; text-align: center; padding: 0px 4px; font-size: 27px; border: 1px solid #999999; border-top:0;border-left:0;border-right:0; outline:none;}
.health .data input[type="number"] { background-color: inherit; max-width: 80px; color: #FFFFFF; height: 40px; line-height: 30px; text-align: center; padding: 0px 4px; font-size: 27px; border: 1px solid #999999; border-top:0;border-left:0;border-right:0; outline:none;}
.health .data input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}
.health .data input[type="tel"] { background-color: inherit; max-width: 50px; color: #FFFFFF; height: 40px; line-height: 30px; text-align: center; padding: 0px 4px; font-size: 27px; border: 1px solid #999999; border-top:0;border-left:0;border-right:0; outline:none;}
.health .data span.dot{line-height: 40px;margin-bottom: -5px;display: inline-block;width: 2px;border-bottom: 2px solid #ffffff;}
.health .data input.prev{margin-right:-7px;text-align:right;padding-right:10px;}
.health .data input.next{margin-left:-7px;text-align:left;padding-left:10px;}
.health .data input.m1{width:40px;}
.health .data input.m3{width:60px;max-width:60px;}
.health .data .point span.mini { position: relative; margin-left: 10px; font-size: 20px; }
.health .data .point span.line { padding-left: 10px; }
.health .data .point span.line:after { position: absolute; left: 0px; top: 50%; margin-top:-5px; display: block; content: ''; clear: both; width: 1px; height: 10px; background-color: rgba(255,255,255,0.5); }
.health .data .table { margin-top: 20px; margin-bottom: 15px; }
.health .data .table th { font-size: 13px; color:#8EB8FF; }
.health .data .table td { font-size: 30px; color:#FFFFFF; }
.health .data .table th:first-child { border-right: 1px solid rgba(255,255,255,0.4); }
.health .data .table td:first-child { border-right: 1px solid rgba(255,255,255,0.4); }
.health .data .table td .mini { display: block; font-size: 13px; }
.health .data .guide { font-size: 12px; margin-top: 5px; }


.popup { display: none; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(0,0,0,0.4); z-index: 100; }
.pop_inner { max-width: 700px; width: 90%; padding: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0px 2px 6px rgba(0,0,0,1); border-radius: 3px; background: #fff; } }
.pop_inner ul {list-style-type: none;}
.pop_inner .month { padding: 20px 25px; width: 100%; background: #1abc9c; text-align: center; }
.pop_inner .month ul { margin: 0; padding: 0; }
.pop_inner .month ul li { color: white; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; }
.pop_inner .month ul li span { display: block; font-size: 14px; margin-bottom: 5px; }
.pop_inner .month .prev { float: left; padding-top: 10px; }
.pop_inner .month .prev a { color:#FFFFFF; }
.pop_inner .month .next { float: right; padding-top: 10px; }
.pop_inner .month .next a { color:#FFFFFF; }
.pop_inner .weekdays { margin: 0; padding: 10px 0; background-color:#ddd; }
.pop_inner .weekdays:after { display: block; content: ''; clear: both; }
.pop_inner .weekdays li { float: left; width: 14.28%; color: #666; text-align: center; }
.pop_inner .days { padding: 10px 0; margin: 0; }
.pop_inner .days:after { display: block; content: ''; clear: both; }
.pop_inner .days li { float: left; list-style-type: none; width: 14.28%; text-align: center; margin-bottom: 5px; font-size:12px; color: #777; }
.pop_inner .days li span.active {  background-color: #1abc9c; color: white !important }
.pop_inner .days li span:hover { color: #1abc9c; }
.pop_inner .days li span { display: block; padding: 5px; }
.pop_inner .time {}
.pop_inner .time:after { display: block; content: ''; clear: both; }
.pop_inner .time label { float: left; width: 32%; margin-right: 2% }
.pop_inner .time label:last-child { margin-right: 0px; }
.pop_inner .time select { width: 100%; height: 40px; font-size: 16px; line-height: 40px; padding: 0px 10px; }
.pop_inner .btn { text-align: right; margin-top: 10px;}
.pop_inner .btn ul li { display: inline-block; }
.pop_inner .btn ul li a { display: block; width: 70px; height: 30px; line-height: 30px; text-align: center; }
.pop_inner .btn ul li a.cancle { background-color: #666666; color:#FFFFFF; }
.pop_inner .btn ul li a.confirm { background-color: #1abc9c; color:#FFFFFf; }
.error-box{outline:none !important;width:0 !important;height:0 !important;margin:0 !important;border:0 !important;}

/* Custom dialog styles */
#popup_title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 1.75em;
    color: #FFFFFF;
    background: #006699;
    border: solid 1px #006699;
    border-bottom: solid 1px #006699;
    cursor: default;
    padding: 0em;
    margin: 0em;
}

#popup_container {
    font-family: AntipastoRegular, sans-serif;
    font-size: 14px;
    min-width: 300px; /* Dialog will be no smaller than this */
    max-width: 600px; /* Dialog will wrap after this width */
    background: #FFFFFF;
    border: solid 5px #006699;
    color: #000000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#popup_content {
    /*background: 16px 16px no-repeat url(images/info.gif);*/
    padding: 1em 1.75em;
    margin: 0em;
}

/*
#popup_content.alert {
    background-image: url(images/info.gif);
}

#popup_content.confirm {
    background-image: url(images/important.gif);
}

#popup_content.prompt {
    background-image: url(images/help.gif);
}
*/

#popup_message {
    /*padding-left: 10px;*/
    margin:0px auto;
}

#popup_panel {
    text-align: center;
    margin: 1em 0em 0em 1em;
}

#popup_prompt {
    margin: .5em 0em;
}


#popup_container INPUT[type='button'] {
    width: 100px;
    height: 30px;
    border: outset 2px #006699;
    color: #FFFFFF;
    background: #006699;
}
div.symptom-eng{margin-left:29px;font-size:12px;}
.fs12{font-size:12px;}
.error{color:red;}
.tac{text-align:center;}
.mt30{margin-top:30px;}
.mt20{margin-top:20px;}
.mt10{margin-top:10px;}
input[readonly]{background:#EDEDED;outline:none;}