@charset "utf-8";

body{  }
.wrap {position: relative; height: 100%; max-width: 430px; margin: 0 auto;}
.detail_wrap{display: none;}
.none{ display: none !important;}
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bi::before {
    font-size: 22px;
    margin-top: 0;
    vertical-align: middle !important;
}

.login {height: 100%; background:url('../images/bg.png') top center no-repeat #dadfea; background-size:100%;}
.login .logo {margin:0; padding:120px 0 40px; display: flex; justify-content: center;}
.login .inp_box {position:relative; margin:40px 20px 0; padding: 20px 20px 50px; background:rgba(255,255,255,0.4); border-radius:25px; box-shadow: 0 0 30px rgb(0 0 0 / 16%);}
.login .inp_box::before {content:""; position:absolute; top:-40px; left:50%; width:40px; height:1px; background:#1b2549; margin-left: -20px;}
.login .inp_box .inp {margin-bottom:14px; position:relative; overflow:hidden;}
.login .inp_box .inp label {display:block; margin-bottom:10px}
.login .inp_box .inp .otp_btn {position:absolute; top:12px; right:12px; width:70px; height:22px; line-height:22px; text-align:center; z-index:9; font-size:12px; background: #1b2549; color: #fff; border-radius: 25px;}
.login .inp_box input[type=text], .login .inp_box input[type=password] { border-radius:0; background: transparent; padding: 12px 10px 12px 46px; height:auto; font-size:14px; border: none; border-bottom: 1px solid #c1c7d6;}
.login .inp_box .inp.mail::before {content:""; position:absolute; top:12px; left:8px; width:24px; height:24px; background:url('../images/ico_mail.png') center no-repeat;}
.login .inp_box .inp.phone::before {content:""; position:absolute; top:12px; left:8px; width:24px; height:24px; background:url('../images/ico_phone.png') center no-repeat;}
.login .inp_box .inp.otp::before {content:""; position:absolute; top:12px; left:8px; width:24px; height:24px; background:url('../images/ico_otp.png') center no-repeat;}
.login .inp_box .clfix {display: flex; justify-content: center;}
.login .inp_box input[type=checkbox] {display:none;}
.login .inp_box input[type=checkbox] + label {display:inline-block; background:url('../images/ico_check.png') left 2px center no-repeat; padding:0 10px 0 24px; line-height:20px;}
.login .inp_box input[type=checkbox] + label:last-child {padding:0 0 0 24px;}
.login .inp_box input[type=checkbox]:checked + label {background:url('../images/ico_checked.png') left 2px center no-repeat;}
.login .btn_login {margin:-25px 40px 0; position:relative;}
.login .btn_login a {display:flex; align-items: center; justify-content: center; height:50px; text-align:center; background:#1b2549; color:#fff; border-radius:25px; padding:0; margin:0; font-weight: 700;}
.login .btn_login a::before {content:""; display:inline-block; width:24px; height:24px; margin-right:6px; background:url('../images/ico_login.png') center no-repeat;}

.menu_wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:999; background-color: rgba(44, 51, 73, 0.6); display: flex; justify-content: flex-end; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}
.menu_wrap .menu_box {background: #fff; width:180px; height: 100%; box-shadow: 1px 0 20px rgba(39, 46, 79, .6); display: flex; flex-direction: column; justify-content: space-between;}
.menu_wrap .menu_box .menu_list {}
.menu_wrap .menu_box .menu_list h3 {padding: 15px 20px; display: flex;}
.menu_wrap .menu_box .menu_list h3 .menu_close {display: inline-block; background:url('../images/ico_menu.png') center no-repeat; background-size: 24px; width: 30px; height: 30px;}
.menu_wrap .menu_box .menu_list ul {margin: 0; padding: 0; padding: 0 20px;}
.menu_wrap .menu_box .menu_list ul li {margin: 0; padding: 0; border-bottom: 1px dotted #dce0ea;}
.menu_wrap .menu_box .menu_list ul li:first-child {border-top: 1px dotted #dce0ea;}
.menu_wrap .menu_box .menu_list ul li a {display: block; line-height: 40px;}
.menu_wrap .menu_box .logout_btn {padding: 20px; display: flex; justify-content: flex-end;}
.menu_wrap .menu_box .logout_btn .logout {display: block; background:url('../images/ico_logout.png') right center no-repeat; padding-right: 24px;}

.header {padding: 0; position: absolute; top: 0; left: 0; right: 0; z-index:99; background:url('../images/bg.png') top center no-repeat; background-size:100%; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
.header h1 {padding: 15px; margin:0; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 99; line-height: 30px; font-size: 18px; font-weight: 600;}
.header h1 a {display:inline-block;}
.header h1 .blank {width: 30px; height: 30px;}
.header h1 .logo {margin: 20px 0;}
.header h1 .gohome {background:url('../images/ico_home.png') center no-repeat; background-size: 24px; width: 30px; height: 30px;}
.header h1 .menu {background:url('../images/ico_menu.png') center no-repeat; background-size: 24px; width: 30px; height: 30px;}
.header h1 img {height:30px; display: block;}
.header h1 .logout {line-height:20px; display: inline-block; font-size: 12px; position: absolute; top: 10px; right: 12px; z-index:99; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}

.header .bi::before {font-size: 20px;}

.search {padding:20px; box-shadow: 1px 0 20px rgba(39, 46, 79, .2); border-radius: 30px 30px 0 0; background: #fff;}
.header.main .search {padding:20px 20px 10px;}
.search h2 {font-size:20px; font-weight:700; color:#fff; margin-bottom:10px; text-indent: 12px;}
.search .inp {display: flex; justify-content: space-between; height: 40px; font-size: 14px; padding: 0; border-radius: 20px; background: #ebeef3; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset; }
.search .inp .func {display: flex;}
.search .inp .srch {width:40px; height:40px; background:url('../images/ico_search.png') center no-repeat #1b2549; border: 0; border-radius: 20px;}
.search .inp .calendar {background:url('../images/ico_calendar.png') center no-repeat transparent; width:40px; height:40px; border: 0; display: inline-block;}
.search .inp input[type=text] {height: 40px; padding: 0; border:0; width: auto !important; flex-grow: 1; background: transparent; text-indent: 20px;}
.search .inp input[type=reset] {width:40px; height:40px; background:url('../images/ico_clear.png') center no-repeat transparent; border: 0; font-size: 0;}

.main_cont {
	padding-top: calc(constant(safe-area-inset-top) + 10px); 
	padding-top: calc(env(safe-area-inset-top) + 10px); 
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 20px); 
	padding-left: 20px;
	padding-right: 20px;
	position: absolute; 
	top: 170px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	background: #fff;
	z-index:99;
}

.main_cont .icons {
	position: relative;
    width: 100%; /* 원하는 너비 */
}
 
.main_cont .icons::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 비율 */
}

.main_cont .icons .icon {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(3, 1fr); 
	gap: 8px;
}

.main_cont .item {border:1px solid #d3d4d6; border-radius: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; background:#fff; box-shadow: 0 0 10px rgb(0 0 0 / 10%); position: relative;}
.main_cont .item::before {content: ""; display: block; width:30%; height:30%; background:#aceac8; position: absolute; right:25%; bottom: 40%; border-radius: 100px;}
.main_cont .item img {width:40%; position: relative;}
.main_cont .item p {font-size: 15px; letter-spacing:-.5px; margin-top:5px;}
.main_cont .item .num {position:absolute; top:0; right:0; width:24px; height:24px; border-radius:12px; background: #1b2548; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px;}

.main_cont .article_list {margin-top:30px;}
.main_cont .article_list h3 {font-weight:700; display: flex; justify-content: space-between;}
.main_cont .article_list h3 .more {font-size: 12px; font-weight:900;}
.main_cont .article_list ul {margin: 0; padding: 0; border-bottom: 1px dotted #dce0ea; margin-top:12px;}
.main_cont .article_list ul li {margin: 0; padding: 0; border-top: 1px dotted #dce0ea;}
.main_cont .article_list ul li a {display:block; padding: 6px 0;}
.main_cont .article_list ul li a .title {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; position: relative; padding-right:20px; letter-spacing: -.6px;}
.main_cont .article_list ul li a .title .new {display: inline-block; width:16px; height:16px; background:#00ab4e; border-radius: 8px; position:absolute; top:50%; right:0; transform: translateY(-50%); display: flex; justify-content: center;}
.main_cont .article_list ul li a .title .new::before {content:"N"; color:#fff; font-size:9px; font-weight:normal; line-height: 16px;}
.main_cont .article_list ul li a.visited .title .new {display: none;}

.sub_cont {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 20px); 
	padding-left: 20px;
	padding-right: 20px;
	position: absolute; 
	top: 140px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
	z-index:99;
}
.sub_cont h3 {margin-bottom:10px; font-size:15px;}
.sub_cont .keyword {margin-bottom: 20px;}
.sub_cont u {box-shadow: inset 0 -8px 0 #caf3c9; text-decoration: none;}

.view_cont {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 60px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 60px); 
	padding-left: 20px;
	padding-right: 20px;
	position: absolute; 
	top: 90px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
	z-index:99;
}

.btn-group {display: flex; justify-content: flex-end; margin-bottom:20px;}
.btn-group button {border:0; padding:5px 0; width:32px; height:32px; border:1px solid #dce0ea; border-radius:0;}
.btn-group button {background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #ededed));
	background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%, #ededed 100%);
	background: -o-linear-gradient(top,  #ffffff 0%, #ededed 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%, #ededed 100%);
	background: linear-gradient(top,  #ffffff 0%, #ededed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', gradientType=0);}
.btn-group button:nth-child(2) {border-left:0; border-right:0;}
.btn-group button sub {vertical-align: baseline; font-size:8px;}

.foot_btn {
	background:#fff; 
	position:absolute; 
	right:0; 
	left:0; 
	bottom:0; 
	padding-top: calc(constant(safe-area-inset-top) + 10px); 
	padding-top: calc(env(safe-area-inset-top) + 10px); 
	padding-bottom: calc(constant(safe-area-inset-bottom) + 10px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 10px); 
	padding-left: 20px;
	padding-right: 20px;
	height:40px;
	box-shadow: 1px 0 20px rgba(39, 46, 79, .2); 
	z-index:99;
}
.foot_btn {display: flex; justify-content: space-between; align-items: center;}
.foot_btn a {line-height:20px;}
.foot_btn .bi::before {
    font-size: 20px;
    margin-top: 0;
    vertical-align: top !important;
}
dl.inp {padding:15px 20px; margin:0;} 
dl.inp dt {display:none;}
dl.inp dd { margin:0; padding:5px 0;}
dl.inp dd input[type=text], dl.inp dd select {width:100%;}
dl.inp dd input[type=radio] {display:none;}
dl.inp dd input[type=radio] + label {height:18px; margin:0; padding-left:18px; line-height:18px; height:18px; display:inline-block; font-weight: normal; position: relative; margin-right: 10px;}
dl.inp dd input[type=radio] + label::before {content:""; position:absolute; top:2px; left:0; width:14px; height:14px; border-radius:10px; border:3px solid #dce0ea; box-sizing:border-box;}
dl.inp dd input[type=radio]:checked + label {color:#333;}
dl.inp dd input[type=radio]:checked + label::before {content:""; position:absolute; top:2px; left:0; width:14px; height:14px; border-radius:10px; border:3px solid #dce0ea; background:#0049d3; box-sizing:border-box;}

ul.tree {list-style-type: none; margin: 0; padding: 0;}
ul.tree li {padding: 0 0 0 20px; position: relative;}
ul.tree ul::before {content:""; position:absolute; top:25px; left:8px; right:0; bottom:5px; width:1px; background:#e7e7e9;}
ul.tree li ul {padding: 0; margin: 0;}
ul.tree li label {cursor: pointer; display:block; padding: 10px 0 10px 24px; line-height: 18px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
ul.tree li label + a {border-bottom: 1px dotted #dce0ea;}
ul.tree li label.hover {}
ul.tree li label .thumb {width:30px; height:30px; border-radius:50%; background:url('../images/thumb.png') top center no-repeat #eceef7; background-size:cover; float:left;}
ul.tree li label span:nth-child(2) { margin-left:10px; line-height: 30px;}
ul.tree > li > label > span {font-weight: 700;}
ul.tree li .arrow {width: 17px; height: 17px; padding: 0; margin: 0; cursor: pointer; background: transparent center no-repeat; position: absolute; top:10px; left:0;}
ul.tree li .collapsed { background-image: url('../images/ico_plus.png');}
ul.tree li .expanded { background-image: url('../images/ico_minus.png');}
ul.tree li .checkbox {width: 20px; height: 18px; padding: 0; margin: 0; cursor: pointer; background:url('../images/bg_checked-off.png') center no-repeat; background-size: 16px; position:absolute; top:10px;}
ul.tree li .checked {background:url('../images/bg_checked.png') center no-repeat; background-size: 16px;}
ul.tree li .half_checked {background:url('../images/bg_checked-off.png') center no-repeat; background-size: 16px;}
ul.tree li.fav .checkbox {}

.board_list {margin: 0; padding: 0; border-bottom: 1px dotted #dce0ea;}
.board_list li {margin: 0; padding: 0; border-top: 1px dotted #dce0ea;}
.board_list li a {display:block; padding: 8px 0;}
.board_list li a:visited,.board_list li a.visited {color: #959595;}
.board_list li a .title {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; position: relative; padding-right:20px; letter-spacing: -.6px;}
.board_list li a .title .new {display: inline-block; width:16px; height:16px; background:#00ab4e; border-radius: 8px; position:absolute; top:50%; right:0; transform: translateY(-50%); display: flex; justify-content: center;}
.board_list li a .title .new::before {content:"N"; color:#fff; font-size:9px; font-weight:normal; line-height: 16px;}
.board_list li a .date {font-size: 12px; color:#9296aa;}

.person_list {margin: 0; padding: 0; border-bottom: 1px dotted #dce0ea;}
.person_list li {margin: 0; padding: 0; border-top: 1px dotted #dce0ea;}
.person_list li a {display:flex; align-items: center; padding: 12px 0;}
.person_list li a .thumb {width:60px; height:60px; border-radius:50%; background:url('../images/thumb.png') center no-repeat #eceef7; background-size:cover;}
.person_list li a .info {margin-left:12px;}

.board_view {margin-bottom: 12px;}
.board_view .title {font-weight: 700; margin-bottom: 6px; letter-spacing: -.6px;}
.board_view .date {font-size: 12px; display: flex; justify-content: space-between; align-items: center; color:#9296aa;}
.board_view .date .att .bi::before {font-size: 10px;}
.board_view .date input[type=checkbox] {display:none;}
.board_view .date input[type=checkbox] + label:after {content:"\F229"; display: inline-block; font-family: bootstrap-icons !important; margin-left:2px;}
.board_view .date input[type=checkbox]:checked + label:after {content:"\F235";}
.board_view .date label {display:none;}
.board_view .att_list {border-top: 1px solid #dce0ea; border-bottom: 1px solid #dce0ea; padding: 6px 0;}
.board_view .att_list li {background:url('../images/ico_file.png') left center no-repeat; background-size: 14px; padding-left: 20px; margin: 2px 0;}
.board_view .att_list li a {line-height: 1.2; box-shadow: inset 0 -8px 0 #f5eaca;}

.dim_bg { position: absolute; background-color: rgba(44, 51, 73, 0.6); top:0; left:0; bottom:0; right:0; z-index:99999;} 
.dim_bg.trans {background-color: rgba(44, 51, 73, 0);}
.dim_bg.white {background-color: rgba(255, 255, 255, 0.6);}
.dim_bg .popup { border-radius: 6px; overflow: hidden; position: absolute; top: 50%; left:12px; right:12px; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); transform: translateY(-50%);}
.dim_bg .popup h3 { padding:12px; background:#eceef7; line-height: 16px; color: #000; font-size:14px; font-weight:700;}
.dim_bg .popup .popup_close {display:block; position:absolute; width:40px; height:40px; top:0px; right:0px; background:url('../images/ico_close.png') center no-repeat; cursor:pointer;}
.dim_bg .popup .popup_head {background:url('../images/bg_detail.png') center no-repeat; background-size: 100%; padding: 20px 30px; display: flex; align-items: center;}
.dim_bg .popup .popup_head .photo {width:90px; height:90px; border-radius: 45px; background:url('../images/thumb.png') top center no-repeat #eceef7; background-size:cover; margin-right: 12px;}
.dim_bg .popup .popup_head .profile {color:#161b30; font-weight:700;}
.dim_bg .popup .popup_head .profile .role {}
.dim_bg .popup .popup_head .profile .name {font-size:20px;}
.dim_bg .popup .popup_container{}
.dim_bg .popup .popup_container .p20 {padding:20px}
.dim_bg .popup .popup_container .ment {text-align:center; padding:40px 20px 30px;}
.dim_bg .popup .popup_container hr {border: 0px; border-bottom: 1px dotted #dce0ea; margin:10px 0;}
.dim_bg .popup .popup_container .sounds {overflow:hidden; padding:10px 20px;}
.dim_bg .popup .popup_container .sounds li {margin-top:20px;}
.dim_bg .popup .popup_container .sounds li:first-child {margin-top:0;}
.dim_bg .popup .popup_container .my {}
.dim_bg .popup .popup_container .cs {display:none;}
.dim_bg .popup .popup_container .cont_box {overflow: auto;}
.dim_bg .popup .popup_container .cont_box .term {margin:0; padding:12px;}
.dim_bg .popup .popup_container .cont_box .term li {margin:0; padding:0;}
.dim_bg .popup .popup_container .cont_box .term li:first-child {margin-bottom: 6px;}
.dim_bg .popup .popup_container .cont_box h4 {font-weight:700;}
.dim_bg .popup .popup_container .cont_box .txt {padding:24px 12px; text-align:center;}
.dim_bg .popup .popup_container .popup_btn { text-align: center; margin: 0 0 12px; }
.dim_bg .popup .popup_container .btn {line-height:20px; width: 100px; background-color: #50587d;}
.dim_bg .popup .popup_container .btn.blue {background:#4361ee;}
.dim_bg .popup .popup_container .btn.blue:hover {color:#fff;}
.dim_bg .popup .popup_container a:hover {color:#fff;}

.detail_info {margin:0; padding:0;}
.detail_info .cont_box {padding: 12px; color: #161b30;}
.detail_info .cont_box dl {overflow:hidden; margin:0; padding:0; line-height:40px; font-family: 'M PLUS 1','Noto Sans KR',sans-serif; display: flex;}
.detail_info .cont_box dl dt {float:left; width:25%; margin:0; border-bottom: 1px dotted #fff; vertical-align: bottom; line-height: 19px; padding:10px 0;}
.detail_info .cont_box dl dd { width:75%; margin:0; position: relative; border-bottom: 1px dotted #dce0ea; display: inline-block; vertical-align: bottom; line-height: 19px; padding:10px 0;}
.detail_info .cont_box dl:last-child dd {border-bottom: 0;} 
.detail_info .cont_box dl dd .menu {position: absolute; right:0; top:50%; transform: translateY(-50%); height: 34px;}
.detail_info .cont_box dl dd .menu a {display:inline-block; width:34px; height:34px; border-radius:17px;}
.detail_info .cont_box dl dd .menu a.tel {background:url('../images/ico_profile_tel.png') center no-repeat; background-size:cover; vertical-align: middle;}
.detail_info .cont_box dl dd .menu a.cell {background:url('../images/ico_profile_cell.png') center no-repeat; background-size:cover; vertical-align: middle;}
.detail_info .cont_box dl dd .menu a.msg {background:url('../images/ico_profile_msg.png') center no-repeat; background-size:cover; vertical-align: middle;}
.detail_info .cont_box dl dd .menu a.mail {background:url('../images/ico_profile_mail.png') center no-repeat; background-size:cover; vertical-align: middle;}
.detail_info .cont_box dl dd p {margin-bottom: 4px; line-height: 20px;}

table.boardList { border-collapse:collapse; width:100%; margin:0; padding:0; border:0; }
table.boardList th { height:30px; font-weight:normal; background:#f2f4fb; position:relative; text-align: center; border: 1px solid #dce0ea;}
table.boardList td { text-align:center; border-bottom:1px solid #ddd; padding:10px; position: relative; border: 1px solid #dce0ea;}

.dialpad {}
.dialpad .number_wrap {height:70px;}
.dialpad .number_box {height:70px; background:#f2f3f7; border: 1px solid #dce0ea; border-radius: 20px;}
.dialpad .number {font-family: 'M PLUS 1', sans-serif; font-size:1.8em; padding:14px 0; margin: 0 20px; line-height: 40px; text-align:center; overflow: hidden;}

.dialpad .dials-wrapper {position:fixed; top:216px; width: 100%;}
.dialpad .dials .digits {width:33.333%; float:left; font-family: 'M PLUS 1', sans-serif; margin: 20px 0; font-size: 30px; line-height: 30px; text-align: center; cursor: pointer; -webkit-user-select: none; /*Safari*/ -ms-user-select: none; /*IE 10 and IE 11*/ user-select: none; /*Standard syntax*/};
.dialpad .dials .digits.active {}

.dialpad .dials {overflow: hidden; padding:20px 0;}
.dialpad .dials .digits.star {font-size:50px; line-height:48px; font-weight:300;}
.dialpad .dials .digits.clear {width:21px; height:21px; background:url('../images/ico_clear.png') center no-repeat; position: absolute; top:24px; right:54px; font-size:0;}
.dialpad .dials .digits.clear a {height: auto; padding:0; line-height: 21px;}
.dialpad .dials .digits.delete {width:27px; height:21px; background:url('../images/ico_delete.png') center no-repeat; position: absolute; top:24px; right:30px; font-size:0;}
.dialpad .dials .digits.delete a {height: auto; padding:0; line-height: 21px;}

.dialpad .dials .digits.delete, .dialpad .dials .digits.clear{margin:0;}
.dialpad .dials .digits.clear {top: -100px;}
.dialpad .dials .digits a {display:block; border-radius: 4px; color:#21262d;}
.dialpad .dials .digits a:focus {color:#72bf8f;}
.dialpad .dials .digits sub {display:block; font-size:11px; line-height:12px;}

.dialpad .action {overflow:hidden; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center;}
.dialpad .action li {width:40%; display: flex; justify-content: center;}
.dialpad .action li a.videocall {display:block; width:100%; height: 70px; background:url('../images/ico_videocall.png') center no-repeat;}
.dialpad .action li a.del {display:block; width:100%; height: 70px; background:url('../images/ico_del_digit.png') center no-repeat;}
.dialpad .action li a.blue {background:#0049d3; width: 100%; color: #fff; height: 52px; display: flex; justify-content: center; align-items: center; margin: 0 5px; border-radius: 30px;}
.dialpad .action li a.blue .bi::before {margin-right: 6px;}
.dialpad .action li a.gray {background:#b4b7c7; width: 100%; color: #fff; height: 52px; display: flex; justify-content: center; align-items: center; margin: 0 5px; border-radius: 30px;}
.dialpad .action li a.gray .bi::before {margin-right: 6px;}