@charset "utf-8";

body{  }
.wrap {position: relative; height: 100%; }
.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') bottom center no-repeat; background-size:100%;}
.login .logo {margin:0 0 20px;}
.login .logo img {width:100%;}
.login .inp_box {margin:40px 20px; padding: 40px 20px; background:#fff; border-radius:25px; box-shadow: 0 0 20px rgb(0 0 0 / 10%);}
.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: #2e2970; color: #fff; border-radius: 25px;}
.login .inp_box input[type=text], .login .inp_box input[type=password] { border-radius:6px; background: transparent; padding: 12px 10px 12px 46px; height:auto; font-size:14px;}
.login .inp_box .inp.mail:before {content:""; position:absolute; top:12px; left:12px; 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:12px; 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:12px; width:24px; height:24px; background:url('../images/ico_otp.png') center no-repeat;}
.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-left:28px; line-height:20px; width:50%; float:left;}
.login .inp_box input[type=checkbox]:checked + label {background:url('../images/ico_checked.png') left 2px center no-repeat;}
.login .btn_login {margin:0 20px;}
.login .btn_login a {display:flex; align-items: center; justify-content: center; height:50px; text-align:center; background:#2e2970; 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;}

.header {padding: 0; position: fixed; top: 0; left: 0; right: 0; z-index:99; background: #fff; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
.header h1 {padding: 10px 12px; margin:0; display: flex; justify-content: center; align-items: center; box-shadow: 1px 0 20px rgba(39, 46, 79, .2); position:relative; z-index:99;}
.header h1 a {display:inline-block;}
.header h1 img {height:20px; 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:18px 3px 12px; background:url('../images/bg_title.png') top center no-repeat; background-size: 100%;}
.search.main {padding:3px; background:#72bf8f;}
.search h2 {font-size:20px; font-weight:700; color:#fff; margin-bottom:10px; text-shadow: 0 0 5px rgb(0 0 0 / 40%); text-indent: 12px;}
.search .inp {display: flex; justify-content: space-between; height: 40px; font-size: 14px; padding: 0 6px 0 12px; border-radius: 0; border-color:#42b16c; border-width:1px 0; background: #fff;}
.search .inp .srch {width:32px; height:40px; background:url('../images/ico_search.png') center no-repeat transparent; border: 0;}
.search .inp .calendar {background:url('../images/ico_calendar.png') center no-repeat transparent; width:32px; height:40px; border: 0; display: inline-block;}
.search .inp input[type=text] {height: 40px; font-size: 16px; padding: 0; border:0; width: auto !important; flex-grow: 1;}
.search .inp input[type=reset] {width:32px; height:40px; background:url('../images/ico_clear.png') center no-repeat transparent; border: 0; font-size: 0;}

.main_cont {
	border: 3px solid #72bf8f; 
	border-top:none; 
	padding-top: calc(constant(safe-area-inset-top) + 12px); 
	padding-top: calc(env(safe-area-inset-top) + 12px); 
	padding-bottom: calc(constant(safe-area-inset-bottom) + 12px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 12px); 
	padding-left: 12px;
	padding-right: 12px;
	position: fixed; 
	top: 86px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(3, 1fr); 
	gap: 8px; 
	background:url('../images/bg.png') bottom center no-repeat; 
	background-size:100%;
}

.main_cont .item {border:1px solid #c8ccd3; border-radius: 8px; display: flex; justify-content: center; align-items: center; flex-direction: column; background:#fff; box-shadow: 0 0 5px rgb(0 0 0 / 10%); position: relative;}
.main_cont .item img {width:80%;}
.main_cont .item p {font-size: 4.6vw; font-weight:700; letter-spacing:-.5px; margin-top:10px;}
.main_cont .item .num {position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:10px; background: #ff5500; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px;}

.sub_cont {
	border: 3px solid #72bf8f; 
	border-top:none; 
	padding-top: calc(constant(safe-area-inset-top) + 6px); 
	padding-top: calc(env(safe-area-inset-top) + 6px); 
	padding-bottom: calc(constant(safe-area-inset-bottom) + 12px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 12px); 
	padding-left: 12px;
	padding-right: 12px;
	position: fixed; 
	top: 140px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
}
.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 {
	border: 3px solid #72bf8f;
	padding-top: calc(constant(safe-area-inset-top) + 12px); 
	padding-top: calc(env(safe-area-inset-top) + 12px); 
	padding-bottom: calc(constant(safe-area-inset-bottom) + 60px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 60px); 
	padding-left: 12px;
	padding-right: 12px;
	position: fixed; 
	top: 90px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
}

.btn-group {display: flex; justify-content: flex-end; margin-bottom:12px;}
.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:fixed; 
	right:3px; 
	left:3px; 
	bottom:3px; 
	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: 12px;
	padding-right: 12px;
	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:first-child {border-top: 0;}
.board_list li a {display:block; padding: 6px 0;}
.board_list li a:visited,.board_list li a.visited {color: #959595;}
.board_list li a .title {font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; position: relative; padding-right:20px;}
.board_list li a .title .new {display: inline-block; width:16px; height:16px; background:#f2590d; 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;}

/*
.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:44px; height:60px; border-radius:35%; 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;}
.board_view .date {font-size: 12px; display: flex; justify-content: space-between; align-items: center;}
.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;}
.board_view .att_list li a { font-size: 14px; line-height: 24px; box-shadow: inset 0 -8px 0 #fbf4d6; font-weight: 700;}

.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: 4px;}
.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:36px; right:20px; 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;}