@charset "utf-8";

/* Basic */
html {margin: 0; overscroll-behavior: none;}
html, body {position: relative; height: 100%; margin: 0; padding: 0; overflow: auto;}
body { margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; color:#1b2549;}
body.login {background:#ededed;}
body.pop {background:#fff; padding:30px;}
body.dial-mode .search .inp {
  display: none !important;
}
img {border:none; }
a { color:#1b2549; text-decoration:none; }
a:hover, a:focus { text-decoration: none; color: inherit;}
* {box-sizing:border-box;}

input, select {margin:0; padding:0; color:#1b2549; font-family: 'Noto Sans KR', sans-serif;  vertical-align:top;}
fieldset {margin:0; padding:0; border:0px none;}
legend {visibility:hidden; position:absolute; top:-99999px; left:-99999px; margin-top:-99999px; margin-left:-99999px;}

/**/
select.slim {height:36px; width:100%; padding-left: 10px; border: 1px solid #dce0ea; border-radius: 4px; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url(../images/select-icons.png) right 5px top -116px no-repeat #fff;}

input[type=text], input[type=file], input[type=password], input[type=time], textarea, select {padding:1px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; border:1px solid #dce0ea; box-sizing:border-box; border-radius:4px; width:200px;}
input[type=text]:focus, input[type=file]:focus, input[type=password]:focus, textarea:focus, select:focus {border:1px solid #b8becd; outline:0;}
input[type=text], input[type=password], input[type=time] {padding:0 10px; height:36px;}
textarea {padding:10px; border:1px solid #dce0ea; width:100%; min-height:141px; resize: none; border-radius:2px; resize: vertical;}
input[type=checkbox], input[type=radio] {margin:0; padding:0;vertical-align:middle;}
input[type=text].inp,input[type=password].inp {padding:10px;}
input[type=file] {padding:5px; background:#fff;}
input[type=text].date {background: url('../images/ico_calendar.png') right 6px center no-repeat #fff; background-size:14px;}
input.full {width:100%;}
button {font-family: 'Noto Sans KR', sans-serif; border-radius:2px; font-size:14px; vertical-align:top; cursor:pointer;}
button:focus {border:0; outline:0;}

option {padding: 5px 2px;}

p {margin:0; padding:0;}

form {margin: 0; padding: 0;}
a img {border: 0 none;}
a:focus {outline:0; }
noscript {position:absolute; z-index:10; background:#EFEFEF;}
noscript p {margin:0;}
label {cursor:pointer;}
caption {visibility:hidden; height:0; width:0; font-size:0; line-height:0;}
ul{list-style:none; }
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; line-height: 1em; font-weight:normal;  font-family: 'Noto Sans KR', sans-serif; }

iframe {border:0; width: 100%; height:100%; }

.overflow-hidden { overflow: hidden;}
.clfix:after { content: ""; display: block; clear: both; }

.fl {float:left;}
.fr {float:right;}
.fn {float:none !important; padding:0 5px;}
.half {width:47% !important; float:left;}
.to {width:6% !important; float:left; text-align:center; line-height:32px;}
.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.ml10 {margin-left:10px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt40 {margin-top:40px !important;}
.p12 {padding:12px;}
.p20 {padding:20px;}
.f12 {font-size:12px;}

.btns {overflow:hidden; text-align:center; padding:0; line-height:28px;}
.btns a {display:inline-block; width:91px; border-radius:3px; text-align:center;}
.btns .blue {background:#0049d3; color:#fff; }
.btns .red {background:#002f87; color:#fff;}
.btns .gray { background:#a5a8af; color:#fff;}

.blue_s {background:#0049d3; color:#fff; display:inline-block; width:50px; border-radius:10px; text-align:center; line-height:14px; font-size:13px; padding:4px 0;}

.btns .blue_line {color:#67719c; border:1px solid #67719c; margin:0 1px; line-height:38px; border-radius:20px;}
.btns .gray_line {color:#67719c; border:1px solid #e7e8eb; margin:0 1px; width:100px; background:#fff; line-height:38px; border-radius:20px;}
.btns .blue_fill {color:#fff; margin:0 1px; width:100px; background:#67719c; border:1px solid #67719c; line-height:38px; border-radius:20px;}

.center {text-align:center;}

.scroll_box {overflow-y: auto;}
.scroll_box::-webkit-scrollbar { width: 0px;}
.scroll_box:hover::-webkit-scrollbar {width: 0px;}
.scroll_box::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0); transition: transform 0.2s ease; }
.scroll_box:hover::-webkit-scrollbar-thumb { background-color: #7c84a0;}
.scroll_box::-webkit-scrollbar-track { background-color: rgba(0,0,0,0); transition: transform 0.2s ease;}
.scroll_box:hover::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.05); }

.jsTree .itemParent p input[type=checkbox] {display:none;}
.jsTree .itemParent p input[type=checkbox] + label {height:18px; margin:0; background:url('../images/bg_checked-off.png') no-repeat; padding-left:22px; line-height:18px; height:18px; display:inline-block; font-weight: normal;}
.jsTree .itemParent p input[type=checkbox]:checked + label {background:url('../images/bg_checked.png') no-repeat; color:#333;}

.selectboxs select {position: absolute; left:0px; top:0; width: 100%; border: 1px solid #999; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; filter:alpha(opacity=0); line-height: 32px; font-family: inherit; padding: 0 9px; border: 0; opacity: 0;}
.selectboxs select:hover { cursor: pointer; }
.selectboxs { position: relative; height: 34px; width: 100%; border: 1px solid #ddd; z-index: 1; border-radius: 3px;}
.selectboxs:before { content: "";  position: absolute; top: 0px; right: 0px; width: 32px; height: 32px; margin-top: -1px;  background:url(../images/select-icons.png)0 -115px no-repeat; }
.selectboxs label { position: absolute; top: 0px; left: 0; padding: 0 9px; color: #999; z-index: -1; color: #666; font-weight: normal; margin-bottom: 0; line-height: 32px; }
.selectboxs select option { display: block;}


 .btn {
    display: inline-block;
    padding: 6px 10px;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    height: 34px;
    background-color: #1c1c1f;
    color: #fff;
}
.btn.full {width:100% !important;}
.mb0 {margin-bottom:0 !important;}


/* Contents */
.wrap {position: relative; height: 100%; max-width: 430px; margin: 0 auto; background: #dadfea; font-size: 15px;}
.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;
}

.login {height: 100%; background:url('../images/bg.png') top center no-repeat; background-size:100%; position:relative;}
.login .logo {margin:0; padding:100px 0 20px; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.login .logo img {height: 40px;}
.login .logo h1 {position:relative; margin-top: 20px; padding-top: 20px; font-size: 18px; font-weight: 700;}
.login .logo h1::before {content:""; position:absolute; top:0; left:50%; width:40px; height:1px; background:#1b2549; margin-left: -20px;}
.login .inp_box {position:relative; margin:20px 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 .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:15px; border: none; border-bottom: 1px solid #c1c7d6;}
.login .inp_box .inp.id::before {content:""; position:absolute; top:12px; left:8px; width:24px; height:24px; background:url('../images/ico_id.png') center no-repeat;}
.login .inp_box .inp.pw::before {content:""; position:absolute; top:12px; left:8px; width:24px; height:24px; background:url('../images/ico_pw.png') center no-repeat;}
.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 26px; line-height:20px;}
.login .inp_box input[type=checkbox] + label:last-child {padding:0 0 0 26px;}
.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;}
.login .btn_back {display: flex; justify-content: center; align-items: center; margin-top: 20px;}
.login .btn_back a .bi::before {vertical-align:top !important; }
.login .ver {position: absolute; left: 20px; bottom: 20px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); font-size: 12px;}

.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: 15px 0;}
.header h1 .gohome {width: 30px; height: 30px; z-index:1; position: relative; display: flex; justify-content: center; align-items: center;}
.header h1 .setting {width: 30px; height: 30px; z-index:1; position: relative; display: flex; justify-content: center; align-items: center;}
.header h1 img {height:30px; display: block;}
.header h1 svg path {fill:#1b2549;}
.header h1::before {content:""; display: block; width: 30px; height:30px; background:url('../images/bg_header_corner.png') center no-repeat; background-size: 100%; position: absolute; bottom: 0; right: 0; z-index:0;}
.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 20px 10px; box-shadow: 1px 0 30px rgba(39, 46, 79, .3); border-radius: 30px 0 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 .tab {color: #9a9eb0; font-weight: 700; letter-spacing: -.5px;}
.search .tab.on {color: #1b264a; box-shadow: inset 0 -8px 0 #caf3c9;}
.search .inp {display: flex; justify-content: space-between; height: 40px; padding: 0; margin-bottom: 10px; 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-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #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) + 40px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 40px); 
	padding-left: 20px;
	padding-right: 20px;
	position: absolute; 
	top: 160px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	background: #fff;
	z-index:99;
}
.main_cont.active {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 90px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 90px); 
}

.main_cont .item {border:1px solid #d3d4d6; border-radius: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; background:#fff; position: relative; height: 100%;}
.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 {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;}

.sub_cont {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 40px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 40px); 
	padding-left: 20px;
	padding-right: 20px;
	position: absolute; 
	top: 180px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
	z-index:99;
}
.sub_cont.active {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 100px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 100px); 
}
.sub_cont h3 {margin-bottom:10px;}
.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) + 90px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 90px); 
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 10px 0 0 0;
	position: absolute; 
	top: 80px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
	z-index:100;
}
.view_cont.active {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 140px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 140px); 
}

.call_cont {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 30px); /* ajhong */
	padding-bottom: calc(env(safe-area-inset-bottom) + 30px); /* ajhong */
	padding-left: 20px;
	padding-right: 20px;
	position: absolute; 
	top: 140px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
	z-index:99;
}
.call_cont.active {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 80px); /* ajhong */
	padding-bottom: calc(env(safe-area-inset-bottom) + 80px); /* ajhong */
}

.dial_cont {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 100px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 100px); 
	padding-left: 0px;
	padding-right: 0px;
	position: absolute; 
	top: 90px; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	overflow: auto; 
	background:#fff;
	z-index:99;
}
.dial_cont.active {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 40px); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 40px); 
}

.logout {display: flex; justify-content: space-between; margin-bottom:20px;}
.logout .logout_btn {background:url('../images/ico_logout.png') left center no-repeat; background-size: 16px; padding-left: 22px; letter-spacing: -.5px;}

.func {display: flex; justify-content: space-between; margin-bottom:20px;}
.comm-group {line-height: 32px;}
.comm-group .bi::before {font-size: 18px; margin-top: -4px;}
.btn-group {display: flex;}
.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 {
	position:sticky; 
	top: calc(100% - 70px);
	right:0; 
	left:0; 
	bottom:0; 
	padding-top: calc(constant(safe-area-inset-top) + 0); 
	padding-top: calc(env(safe-area-inset-top) + 0); 
	padding-bottom: calc(constant(safe-area-inset-bottom) + 0); 
	padding-bottom: calc(env(safe-area-inset-bottom) + 0); 
	padding-left: 14px;
	padding-right: 14px;
	height: 40px;
	
	z-index:101;
	transform: translateY(0);
	transition:transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.foot_btn.active {
	transform: translateY(-50px);
}
.foot_btn {display: flex; justify-content: space-between; align-items: flex-start;}
.foot_btn a { display: inline-block; width: 36px; text-align:center; background:#fff; box-shadow: 1px 0 20px rgba(39, 46, 79, .4); border-radius:50%;}
.foot_btn .bi::before { font-size: 20px; line-height:36px; width: 36px; margin-top: 0; vertical-align: top !important;}
.foot_btn a.edit { height:36px; width: 36px; line-height:36px; font-size: 0; background:url('../images/ico_edit.png') center no-repeat #fff; background-size: 18px;}
.foot_btn a.save { height:36px; width: 36px; line-height:36px; font-size: 0; background:url('../images/ico_edit_w.png') center no-repeat #4361ee; background-size: 18px;}
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: 18px; position:absolute; top:10px;}
ul.tree li .checked {background:url('../images/bg_checked.png') center no-repeat; background-size: 18px;}
ul.tree li .half_checked {background:url('../images/bg_checked-off.png') center no-repeat; background-size: 18px;}
ul.tree li.fav .checkbox {}


.empty {display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center;}
.empty .bi::before {font-size:60px;}

.board_tab {display: flex; justify-content: space-between; margin-bottom: 10px;}
.board_tab .tab input[type=radio] {display:none;}
.board_tab .tab input[type=radio] + label {margin-right: 6px; line-height:20px; color: #9a9eb0; font-weight:700;}
.board_tab .tab input[type=radio]:checked + label {box-shadow: inset 0 -8px 0 #c9dbf3; color: #1b264a;}
.board_tab .act {font-size: 12px; line-height:20px;}
.board_tab .act a:first-child {margin-right: 6px;}

.board_list {margin: 0; padding: 0; border-bottom: 1px dotted #dce0ea; width: 100%; overflow: hidden;}
.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:1px; 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 .sub_title {display: flex; justify-content: space-between; align-items: center; line-height: 18px; margin-top: 6px;}
.board_list li a .sub_title .edit button {border: 0; outline: 0; padding: 0; width: 18px; height: 18px; margin-left: 3px;}
.board_list li a .sub_title .edit .btn-delete {background: url('../images/ico_trash.png') center no-repeat; background-size: 18px;}
.board_list li a .sub_title .edit .btn-edit {background:url('../images/ico_edit.png') center no-repeat; background-size: 18px;}
.board_list li a .sub_title .edit .btn-send {background:url('../images/ico_send.png') center no-repeat; background-size: 18px;}
.board_list li a .date {font-size: 12px; color:#9296aa; display: inline-block; line-height: 18px;}
.board_list li a .date strong {margin-left: 10px;}
.board_list li a .date strong .bi::before {font-size: 12px; margin-top: -2px;}

/*
.board_list .item {position: relative; height:59px; width: calc(100% + 120px); display: flex; justify-content: space-between;}
.board_list .item .item-swipe {background: #ffffff;  width: calc(100% - 120px); }
.board_list .item .item-swipe.open {background: #333333;}
.board_list .item .item-swipe.swiped {transition: all 0.1s linear;}
.board_list .item a.item-swipe {text-decoration: inherit;}
.board_list .item a.item-swipe:active {color: inherit;}
.board_list .item .item-back {width: 110px; background: #ebeef3; display: flex; justify-content: center; padding: 13px 0;}
.board_list .item .item-back .action {border: inherit; outline: inherit; padding: 0; width: 32px;}
.btn-delete {background: url('../images/ico_trash.png') center no-repeat; background-size: 18px;}
.btn-edit {background:url('../images/ico_edit.png') center no-repeat; background-size: 18px;}
.btn-send {background:url('../images/ico_send.png') center no-repeat; background-size: 18px;}
*/

.board_edit {margin: 0; padding: 0; border-top: 1px dotted #dce0ea; position: relative; height:100%;}
.board_edit dl {display: flex; justify-content: space-between; margin: 0; padding:6px 0; border-bottom: 1px dotted #dce0ea;}
.board_edit dl dt {width:50px; line-height: 32px; font-weight:700;}
.board_edit dl dd {width:calc(100% - 50px); margin: 0; font-size: 14px;}
.board_edit dl dd input[type=text] {width: 100%; height: 32px; font-size: 14px;}
.board_edit dl dd.bw {display: flex; justify-content: space-between; line-height: 32px;}
.board_edit dl dd.bw .set {font-size:13px; width: 20px; text-align: center;}
.board_edit dl dd.bw .set .bi::before {font-size:15px; line-height: 32px;}
.board_edit dl dd.rd {line-height: 32px;}
.board_edit dl dd.rd input[type=radio] {display:none;}
.board_edit dl dd.rd input[type=radio] + label {height:18px; margin:0; padding-left:22px; line-height:18px; height:18px; display:inline-block; font-weight: normal; position: relative; margin-right: 6px; letter-spacing:-.5px;}
.board_edit dl dd.rd input[type=radio] + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; box-sizing:border-box; background:#a3a3b4}
.board_edit dl dd.rd input[type=radio]:checked + label {color:#333;}
.board_edit dl dd.rd input[type=radio]:checked + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; background:#0049d3; box-sizing:border-box;}
.board_edit .editor {margin-top: 10px;}
.board_edit .editor .parts {padding: 0 0 10px;}
.board_edit .editor .parts .part {background:#272e4f; font-size: 12px; color:#fff; padding:2px 6px 3px; line-height:12px; border-radius: 4px;}
.board_edit .editor .parts .part .bi::before {font-size: 14px; color:#fff; line-height:12px;}
.board_edit .editor textarea {font-size: 14px;}

.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; 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: 13px; 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: 20px; overflow: hidden; position: absolute; top: 50%; left:20px; right:20px; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); transform: translateY(-50%);}

.dim_bg .popup h3 { padding:14px 20px; background:#eceef7; line-height: 16px; font-size:16px; font-weight:700; position:relative;}
.dim_bg .popup h3 .num {font-size:13px; font-weight:400;}
.dim_bg .popup h3.comm { padding:17px 20px; background:#fff; line-height: 16px; font-size:16px; font-weight:700; border-bottom: 1px solid #dce0ea;}
.dim_bg .popup h3.comm::before {content:""; position:absolute; top:10px; left:50%; width:40px; height:4px; transform: translateX(-50%); border-radius:10px; background:#d2d8e5;}
.dim_bg .popup .popup_close {display:block; position:absolute; width:44px; height:44px; top:0px; right:0px; background:url('../images/ico_close.png') center no-repeat; cursor:pointer;}
.dim_bg .popup .popup_close.wh {display:block; position:absolute; width:50px; height:50px; top:0px; right:0px; background:url('../images/ico_close.png') center no-repeat; cursor:pointer; }
.dim_bg .popup .popup_head {background:url('../images/bg.png') top center no-repeat #dadfea; 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{position: relative;}
.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 .call_num {margin:20px 0; padding:0 20px;}
.dim_bg .popup .popup_container .cont_box .call_num li {line-height: 30px;}
.dim_bg .popup .popup_container .cont_box .call_num li label {display: block;}

.dim_bg .popup .popup_container .cont_box .call_num li input[type=radio] {display:none;}
.dim_bg .popup .popup_container .cont_box .call_num li input[type=radio] + label {height:18px; margin:0; padding-left:24px; line-height:18px; height:18px; display:inline-block; font-weight: normal; position: relative; margin-right: 10px;}
.dim_bg .popup .popup_container .cont_box .call_num li input[type=radio] + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; box-sizing:border-box; background:#a3a3b4}
.dim_bg .popup .popup_container .cont_box .call_num li input[type=radio]:checked + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; background:#0049d3; box-sizing:border-box;}

.dim_bg .popup .popup_container .cont_box .term {margin:0; padding:20px;}
.dim_bg .popup .popup_container .cont_box .term li {margin:0 0 6px; padding:0;}
.dim_bg .popup .popup_container .cont_box .term li input[type=checkbox] {display:none;}
.dim_bg .popup .popup_container .cont_box .term li input[type=checkbox] + label {display:inline-block; background:url('../images/ico_check.png') left 2px center no-repeat; padding:0 10px 0 26px; line-height:20px;}
.dim_bg .popup .popup_container .cont_box .term li input[type=checkbox] + label:last-child {padding:0 0 0 26px;}
.dim_bg .popup .popup_container .cont_box .term li input[type=checkbox]:checked + label {background:url('../images/ico_checked.png') left 2px center no-repeat;}
.dim_bg .popup .popup_container .cont_box .term li label {font-size: 14px;}
.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 20px; }
.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;}
.dim_bg .popup.bottom_up {border-radius: 30px 30px 0 0; position: absolute; transform: translateY(120%); top:0; left:0; right:0; bottom: 0; transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); height: calc(100% - 140px);}
.dim_bg .popup.bottom_up.active { transform: translateY(140px); position: absolute; top:0; left:0; right:0; bottom: 0;}
.dim_bg .popup.bottom_up .iframe_wrap {position: absolute; top: 50px; left:0; right:0; bottom: 0; }
.dim_bg .popup.bottom_up .iframe_wrap iframe {position: absolute; top: 0; left:0; right:0; bottom: 0; }

.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: 30px;}
.detail_info .cont_box dl dd .menu a {display:inline-block; width:30px; height:30px; 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:80px;}
.dialpad .number_box {border-radius: 4px; border-radius: 0px; background: #ebeef3; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;}
.dialpad .number {font-family: 'M PLUS 1', sans-serif; font-size:1.6em; font-weight:500; padding:10px 20px; line-height: 40px; text-align:center; overflow: hidden;}

.dialpad .number_box .apx {margin:0; padding:0 20px 10px; display: flex; justify-content: space-between;}
.dialpad .number_box .apx .apx_unit {margin:0; padding:0; display: flex;}
.dialpad .number_box .apx .apx_unit .thumb {width:40px; height:40px; border-radius:35%; background:url('../images/thumb.png') center no-repeat #d5d8e7; background-size: cover; border: 1px solid #d5d8e7;}
.dialpad .number_box .apx .apx_unit .who {padding:0 8px;}
.dialpad .number_box .apx .apx_unit .who .name {font-weight: 700;}
.dialpad .number_box .apx .apx_unit .who .num {font-family: 'M PLUS 1', sans-serif; font-size: 11px;}
.dialpad .number_box .apx .apx_unit .who .num .key {box-shadow: inset 0 -8px 0 rgba(0,73,211,0.2); text-decoration: none;}
.dialpad .number_box .apx .apx_more {display: flex; align-items: center; padding-right: 26px; font-family: 'M PLUS 1', sans-serif; font-size:13px; background:url('../images/ico_memo.png') right center no-repeat}

.search_num {margin:0; padding:0;}
.search_num li {display:block; border-bottom: 1px solid #eceef7;}
.search_num li:hover {background:#fbfcfc;}
.search_num li a {display: table; margin:0; padding:0; overflow:hidden; padding:10px 20px;}
.search_num li .thumb {width:40px; height:40px; border-radius:35%; background:url('../images/thumb.png') center no-repeat #eceef7; background-size:cover;}
.search_num li .who {padding:0 10px; display: table-cell; vertical-align: middle;}
.search_num li .who .name {font-size:13px;} 
.search_num li .who .role {font-size:11px; color: #a4aabf;}
.search_num li .who .num {font-family: 'M PLUS 1', sans-serif; font-size:11px;}

.dialpad .dials-wrapper {position:fixed; top:216px; width: 100%;}
.dialpad .dials .digits {width:33.333%; float:left; font-family: 'M PLUS 1', sans-serif; padding: 16px 0; font-size: 1.8em; line-height: 1; 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 20px 10px;}
.dialpad .dials .digits.star {font-size:48px; line-height:39px; font-weight:300;}
.dialpad .dials .digits.clear {width:21px; background:url('../images/ico_clear.png') center no-repeat; background-size:24px; position: absolute; top:0; right:54px; font-size:0;}
.dialpad .dials .digits.clear a {height: auto; padding:0; line-height: 21px;}
.dialpad .dials .digits.delete {width:27px; background:url('../images/ico_delete.png') center no-repeat; background-size:24px; position: absolute; top:0; 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: -200px;}
.dialpad .dials .digits a {display:block; border-radius: 4px; color:#21262d;}
.dialpad .dials .digits a:focus {color:#272e4f;}
.dialpad .dials .digits sub {display:block; font-size:11px; height:12px;}

.dialpad .action {overflow:hidden; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center;}
.dialpad .action li {width:45%; 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:#67719c; 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;}

.recent {margin: 0 0 10px 0; padding:0; border-top: 1px dotted #dce0ea;}
.recent > li {border-bottom: 1px dotted #dce0ea; position: relative; display: flex; align-items: center; justify-content: space-between;}
.recent li .accordion-title {padding: 10px 0;}
.recent li .accordion-title .del {display:none; position:absolute; width:11px; height:11px; top:10px; right:20px; background:url('../images/ico_list_del.png') center no-repeat; z-index:999; opacity:0.3; transition: all 0.1s ease;}
.recent li .accordion-title .del:hover {opacity:1;}
.recent li .accordion-title:hover .del {display:block;}
.recent li .accordion-content {position: relative; padding:0 0 14px 99px; font-family: 'M PLUS 1', sans-serif; }
.recent li .accordion-content li {margin:0; border-left: 1px solid #f5f6f6; padding-left: 10px; font-size: 11px; line-height:18px;}
.recent li .accordion-content li a {display:block; width:40px; height:40px; border-radius:20px; opacity:0.5; transition: all 0.2s ease;}
.recent li .accordion-content li a:hover {opacity:1;}
.recent li .accordion-content li:nth-child(1) a {background:url('../images/ico_recent01.png') center no-repeat #7c84a0;}
.recent li .accordion-content li:nth-child(2) a {background:url('../images/ico_recent02.png') center no-repeat #7c84a0;}
.recent li .accordion-content li:nth-child(3) a {background:url('../images/ico_recent03.png') center no-repeat #7c84a0;}
.recent li .accordion-content li:nth-child(4) a {background:url('../images/ico_recent04.png') center no-repeat #7c84a0;}
.recent li .accordion-content li:nth-child(5) a {background:url('../images/ico_recent05.png') center no-repeat #7c84a0;}
.recent li .stat {display:block; width:20px; height:50px; float:left;}
.recent li .stat.out {background:url('../images/ico_out.png') center no-repeat;}
.recent li .stat.in {background:url('../images/ico_in.png') center no-repeat;}
.recent li .stat.not {background:url('../images/ico_not.png') center no-repeat;}
.recent li .thumb {width:50px; height:50px; border-radius:35%; float:left; background:url('../images/thumb.png') center no-repeat #eceef7; background-size:cover; margin-left:10px}
.recent li .who {float:left; height:50px; margin-left:10px;}
.recent li .who .cont {position: relative;}
.recent li .who .name {line-height: 1; overflow: hidden; display: flex; text-overflow: ellipsis; white-space: nowrap; vertical-align:top;}
.recent li .who .name span {line-height: 1; padding: 2px 0; display:inline-block; font-size: 12px; margin-right:5px; text-align: center; border-radius:3px; width:40px; font-family: 'M PLUS 1', sans-serif;}
.recent li .who .name .bl { background: -webkit-gradient(linear, left top, right top, color-stop(0, #565656), color-stop(1, #000000)); color:#fff;}
.recent li .who .name .wh { background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffffff), color-stop(1, #e7e7e7)); color:#000; border: 1px solid #bcc3db; box-sizing:border-box; padding: 1px 0;}
.recent li .who .name .vp { background: -webkit-gradient(linear, left top, right top, color-stop(0, #d3c68c), color-stop(1, #b19a61)); color:#fff;}
.recent li .who .role {font-size: 11px; color:#a4aabf; font-weight:300;}
.recent li .who .num {font-family: 'M PLUS 1', sans-serif; font-size: 12px; line-height: 1; position: relative; margin-top:5px;}
.recent li .who .date {font-family: 'M PLUS 1', sans-serif; font-size: 11px; line-height: 1; color:#a2aac9; margin-top:5px;}

a.call {
	width: 26px; 
	height: 26px;
	border-radius: 50%; 
	background: url(../images/ico_call_big.png) center no-repeat #0049d3; 
	background-size: 20px;
	margin: 8px 0;
}
.recent > li a.call {}

.contact {padding: 0;}
.contact .accordion {padding:10px 0; position: relative; }
.contact .accordion span {position: relative; z-index:1; background:#fff; padding-right: 10px;}
.contact .accordion:before {content:""; position:absolute; top:50%; left:20px; right: 0; height:1px; background:#f5f6f6;}
.contact .closed {}
.contact .accordion_panel {padding:0 0 10px; margin: 0;}
.contact .accordion_panel li { padding: 0; display: flex; align-items: center; justify-content: space-between; position: relative; border-bottom: 1px solid #f3f5f6;}
.contact .accordion_panel li .accordion_list {margin:0; padding:0; display: flex; align-items: center; padding:10px 0;}
.contact .accordion_panel li .fav {margin-right: 10px;}
.contact .accordion_panel li .fav input[type=checkbox] {display:none;}
.contact .accordion_panel li .fav input[type=checkbox] + label {display:inline-block; background:url('../images/bg_checked-off.png') center no-repeat; background-size: 18px; width: 20px; height:20px;}
.contact .accordion_panel li .fav input[type=checkbox]:checked + label {background:url('../images/bg_checked.png') center no-repeat; background-size: 18px;}
.contact .accordion_panel li .thumb {width:40px; height:40px; border-radius:35%; background:url('../images/thumb.png') center no-repeat #eceef7; background-size:cover;}
.contact .accordion_panel li .who {padding:2px 10px;}
.contact .accordion_panel li .who .name {} 
.contact .accordion_panel li .who .num {font-family: 'M PLUS 1', sans-serif; font-size:12px;}

.mcaller_menu {transform: translateY(45px); display: flex; justify-content: center; align-items: center; background:transparent; border-radius: 40px; margin: 0 10px; padding: 5px 25px; position: sticky; top: calc(100% - 80px); left:0; bottom:0; right:0; z-index:999; transition:transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); -webkit-filter: url("#goo"); filter: url("#goo");}
.mcaller_menu a.menu {display:none;}
.mcaller_menu a.toggle {box-shadow: 1px 0 20px rgba(39, 46, 79, .3); border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background:url('../images/ico_up.png') top 10px center no-repeat #272e4f; background-size:14px;}
.mcaller_menu a.toggle img {width: 36px;}
.mcaller_menu a p {font-size: 12px;}

.mcaller_menu.active {transform: translateY(0); justify-content: space-between; background:#d2d8e5; }
.mcaller_menu.active a.menu {display: flex; flex-direction: column; align-items: center; letter-spacing: -.6px; width: 42px;}
.mcaller_menu.active a.toggle {background:url('../images/ico_m.png') center no-repeat #272e4f; background-size:36px;}

.tab_btn_setting { position: relative; margin: 0; padding: 0; display: flex;}
.tab_btn_setting li {width: 25%; position: relative; border-radius: 0; background: #eceef7; border-left: 1px solid #dce0ea; border-right: 1px solid #dce0ea;}
.tab_btn_setting li:first-child {border-radius: 6px 0 0 6px; border: none;}
.tab_btn_setting li:last-child {border-radius: 0 6px 6px 0;  border: none;}
.tab_btn_setting li a { display: block; width: 100%; height: 100%; text-align: center; color: #7c839c; line-height: 40px; letter-spacing: -1px; font-size: 14px;}
.tab_btn_setting li.on { position: relative; z-index:999; background: #1b2549;}
.tab_btn_setting li.on a {color: #fff;}
.tab_wrap_setting { padding: 20px 0; margin: 0;}
/* .tab_wrap_setting > li { display: none; } ajhong*/ 
.tab_wrap_setting > li.show { display: block; }
.tab_wrap_setting > li .foot {position:absolute; width:100%; bottom:0; border-top: 1px solid #e7e8eb; padding:10px 0 0; background:#fff;}
.tab_wrap_setting > li .scroll_box {position: absolute; top: 0; left: 0; right: 0; bottom: 50px;}

.ring_status {text-align: center; border-radius: 6px; color: #1b2549; height: 70px; border: 1px solid #dce0ea; margin: 10px 0; box-shadow: 0 0 30px rgba(0, 33, 89, 0.1) inset; display: flex; align-items: center; justify-content: center}
.ring_status.on {background: #0049d3; box-shadow: 0 0 30px rgba(0, 33, 89, 0.5) inset; color: #fff;}
.set_item {margin:0; padding:10px 0; }
.set_item dt {padding:0 0 5px 9px; position: relative;}
.set_item dt:before {content:""; position:absolute; top:9px; left:0; width:4px; height:4px; background:#1b2549;}
.set_item dd {margin:0; padding:4px 0; overflow:hidden; position: relative;}
.set_item dd.line {border-bottom: 1px solid #dce0ea; line-height:32px;}
.set_item dd input[type=radio] {display:none;}
.set_item dd input[type=radio] + label {height:18px; margin:0; padding-left:24px; line-height:18px; height:18px; display:inline-block; font-weight: normal; position: relative; margin-right: 10px;}
.set_item dd input[type=radio] + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; box-sizing:border-box; background:#a3a3b4}
.set_item dd input[type=radio]:checked + label {color:#333;}
.set_item dd input[type=radio]:checked + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; background:#0049d3; box-sizing:border-box;}
.set_item dd input {width:100%;}
.set_item dd p .half {width: 70% !important;}
.set_item dd p {overflow:hidden;}
.set_item dd p span {line-height:31px; margin-left:2%; display:inline-block; color:#999; float:left; width:28%; border-bottom:1px dotted #dce0ea;}
.set_item dd .audioplayer {margin-top:10px;}
.set_item dd .audioplayer-volume-adjust > div {width:250px;}

.set_item dd .swiper-slide input[type=radio] {display:none;}
.set_item dd .swiper-slide input[type=radio] + label {margin:0; padding-left:18px; line-height:18px; height:18px; display:flex; font-weight: normal; position: relative;}
.set_item dd .swiper-slide input[type=radio] + label:before {content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:10px; border:4px solid #fff; box-sizing:border-box; background:#a3a3b4}
.set_item dd .swiper-slide input[type=radio]:checked + label {}
.set_item dd .swiper-slide input[type=radio]:checked + label:before {content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:10px; border:4px solid #fff; background:#0049d3; box-sizing:border-box;}

.set_item dd .skin input[type=radio] {display:none;}
.set_item dd .skin input[type=radio] + label {margin:0; padding-left:18px; line-height:18px; height:18px; display:flex; font-weight: normal; position: relative; position:absolute; top: 0; left: 0;}
.set_item dd .skin input[type=radio] + label:before {content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:10px; border:5px solid #fff; box-sizing:border-box; background:#a3a3b4; box-shadow: 0 0 5px rgba(39, 46, 79, .3);}
.set_item dd .skin input[type=radio]:checked + label {}
.set_item dd .skin input[type=radio]:checked + label:before {content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:10px; border:4px solid #fff; background:#0049d3; box-sizing:border-box;}

.set_item dd .font-size {display:flex; justify-content: space-between; align-items: center;}
.set_item dd .font-size:before {content:""; position:absolute; top:13px; width:100%; height:8px; border-radius:10px; background:#eceef7;}
.set_item dd .font-size input[type=radio] {display:none;}
.set_item dd .font-size input[type=radio] + label {margin:0; padding-left:0; line-height:1; height:auto; font-weight: normal; position: relative; text-align: center; width: 33.333%}
.set_item dd .font-size input[type=radio] + label span {display:block; margin-top:10px;}
.set_item dd .font-size input[type=radio] + label span.small {font-size: 14px;}
.set_item dd .font-size input[type=radio] + label span.big {font-size: 16px;}
.set_item dd .font-size input[type=radio] + label:before {content:""; display:inline-block; position:static; width:24px; height:24px; border-radius:12px; border:7px solid #fff; box-sizing:border-box; background:#a3a3b4; box-shadow: 0 0 5px rgba(39, 46, 79, .3);}
.set_item dd .font-size input[type=radio]:checked + label {}
.set_item dd .font-size input[type=radio]:checked + label:before {content:""; display:inline-block; position:static; width:24px; height:24px; border-radius:12px; border:7px solid #fff; background:#0049d3; box-sizing:border-box; }

.set_item dd .profile {margin-bottom: 10px; display: flex; position: relative;}
.set_item dd .profile img {width: 100%;}
.set_item dd .profile input[type=radio] {display:none;}
.set_item dd .profile input[type=radio] + label {height:auto; margin:0; padding-left:0; line-height:1; display:inline-block; font-weight: normal; position:absolute; bottom: 30px; right: 30px;}
.set_item dd .profile input[type=radio] + label:before {content:""; position:absolute; top:0; left:0; width:24px; height:24px; display:inline-block; border-radius:12px; border:7px solid #fff; box-sizing:border-box; background:#a3a3b4; box-shadow: 0 0 5px rgba(39, 46, 79, .3);}
.set_item dd .profile input[type=radio]:checked + label {}
.set_item dd .profile input[type=radio]:checked + label:before {content:""; position:absolute; width:24px; height:24px; border-radius:12px; border:7px solid #fff; background:#0049d3; box-sizing:border-box; }

.set_basic {margin:0; padding:6px 0; display: flex; justify-content: space-between; border-bottom: 1px dotted #dce0ea;}
.set_basic dt {width: 90px; padding:0; position: relative; line-height:36px; letter-spacing: -1px; font-size: 14px;}
.set_basic.sub dt {color: #7c839c; padding-left: 8px;}
.set_basic dd {width: calc(100% - 90px); height:36px; margin:0; padding: 0; position: relative;}
.set_basic dd.rt {text-align: right;}
.set_basic dd .tx {line-height:36px; margin-left: 5px; font-size: 14px; color: #7c839c;}
.set_basic dd input[type=checkbox] {display:none;}
.set_basic dd input[type=checkbox] + label {margin: 6px 0; display:inline-block; width: 52px; height:26px; background:#dce0ea; border-radius:13px; text-align: left;}
.set_basic dd input[type=checkbox] + label:before {content:""; width:18px; height:18px; border-radius:10px; background:#fff; display:inline-block; margin: 4px; box-shadow: 0 0 3px rgba(39, 46, 79, .3);}
.set_basic dd input[type=checkbox]:checked + label {background:#0049d3; text-align: right;}
.set_basic dd input[type=checkbox]:checked + label:before {content:""; width:18px; height:18px; border-radius:10px; background:#fff; display:inline-block; margin: 4px;}
.set_basic dd input[type=text] {width:100%;}
.set_basic dd input[type=text]:read-only {background:#eceef7;}
.set_basic dd input[type=text].half {width:50%;}
.set_basic dt input[type=radio] {display:none;}
.set_basic dt input[type=radio] + label {height:18px; margin:0; padding-left:24px; line-height:18px; height:18px; display:inline-block; font-weight: normal; position: relative; margin-right: 10px;}
.set_basic dt input[type=radio] + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; box-sizing:border-box; background:#a3a3b4}
.set_basic dt input[type=radio]:checked + label {color:#333;}
.set_basic dt input[type=radio]:checked + label:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:10px; border:4px solid #dce0ea; background:#0049d3; box-sizing:border-box;}
.set_basic dd .bt {margin: 4px 0; display:inline-block; width: 80px; height:26px; background:#dce0ea; border-radius:13px; text-align: center; font-size: 13px; line-height:26px;}
.set_basic.long {margin:0; padding:6px 0; display: flex; justify-content: space-between; border-bottom: 1px dotted #dce0ea;}
.set_basic.long dt {width: 120px; padding:0; position: relative; line-height:36px; letter-spacing: -1px; font-size: 14px;}
.set_basic.long dd {width: calc(100% - 120px); height:36px; margin:0; padding: 0; position: relative;}

ul.num_list { list-style: none; padding: 0 0 20px; margin: 10px 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-bottom: 1px solid #c4c9d7;}
ul.num_list li { margin: 0; position: relative; display:block; z-index:99; cursor:pointer; border: 1px solid #dce0ea; border-radius: 6px;  overflow: hidden; }
ul.num_list li div::before {content:"\F14E"; font-family: bootstrap-icons; font-size: 11px; position:absolute; top: 5px; right: 5px; display: block; color: #686c79;}
ul.num_list li div {padding:16px 0; display: flex; justify-content: center; font-size: 0.92em; letter-spacing: -.5px;}
ul.num_list li div .name {line-height: 20px;}

/* theme00 *****************************************/
.wrap.theme00 .login .logo img {content:url('../images/logo.png')}
.wrap.theme00 .header h1 img {content:url('../images/logo.png')}

/* theme01 *****************************************/
.wrap.theme01 {background: #454d6e;}
.wrap.theme01 .login {color: #fff;}
.wrap.theme01 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme01 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme01 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme01 .login .inp_box input[type=text], .wrap.theme01 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme01 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme01 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme01 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme01 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme01 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme01 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme01 .login .btn_back a {color:#fff;}
.wrap.theme01 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme01 .login .btn_login a {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #58c284), color-stop(1, #4fae77));
	background: -moz-linear-gradient(top, #58c284 0%, #4fae77 100%);
	background: -webkit-linear-gradient(top,  #58c284 0%, #4fae77 100%);
	background: -o-linear-gradient(top,  #58c284 0%, #4fae77 100%);
	background: -ms-linear-gradient(top,  #58c284 0%, #4fae77 100%);
	background: linear-gradient(top,  #58c284 0%, #4fae77 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#58c284', endColorstr='#4fae77', gradientType=0);

	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme01 .header h1 {color: #fff;}
.wrap.theme01 .header h1 svg path {fill: #fff;}
.wrap.theme01 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #58c285;
	border: 0; 
	border-radius: 20px;
}
.wrap.theme01 .main_cont .item::before {}
.wrap.theme01 .main_cont .article_list ul li a .title .new {background-color: #58c285;}
.wrap.theme01 .board_list li a .title .new {background-color: #58c285;}
.wrap.theme01 .search .tab.on {}

.wrap.theme01 .mcaller_menu.active {background-color: #454d6e;}
.wrap.theme01 .mcaller_menu a.toggle {background-color: #58c285;}
.wrap.theme01 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme01 .dialpad .action li a.blue {background-color: #58c285;}
.wrap.theme01 a.call {background-color: #58c285;}

/* theme02 *****************************************/
.wrap.theme02 {background: #456867;}
.wrap.theme02 .login {color: #fff;}
.wrap.theme02 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme02 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme02 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme02 .login .inp_box input[type=text], .wrap.theme02 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme02 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme02 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme02 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme02 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme02 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme02 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme02 .login .btn_back a {color:#fff;}
.wrap.theme02 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme02 .login .btn_login a {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff9354), color-stop(1, #e5864b));
	background: -moz-linear-gradient(top, #ff9354 0%, #e5864b 100%);
	background: -webkit-linear-gradient(top,  #ff9354 0%, #e5864b 100%);
	background: -o-linear-gradient(top,  #ff9354 0%, #e5864b 100%);
	background: -ms-linear-gradient(top,  #ff9354 0%, #e5864b 100%);
	background: linear-gradient(top,  #ff9354 0%, #e5864b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9354', endColorstr='#e5864b', gradientType=0);

	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme02 .header h1 {color: #fff;}
.wrap.theme02 .header h1 svg path {fill: #fff;}
.wrap.theme02 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #ff9354;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme02 .main_cont .item::before {background: #ffd4bb;}
.wrap.theme02 .main_cont .article_list ul li a .title .new {background-color: #ff9354;}
.wrap.theme02 .board_list li a .title .new {background-color: #ff9354;}
.wrap.theme02 .search .tab.on {box-shadow: inset 0 -8px 0 #ffd4bb;}

.wrap.theme02 .mcaller_menu.active {background-color: #456867;}
.wrap.theme02 .mcaller_menu a.toggle {background-color: #ff9354;}
.wrap.theme02 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme02 .dialpad .action li a.blue {background-color: #ff9354;}
.wrap.theme02 a.call {background-color: #ff9354;}

/* theme03 *****************************************/
.wrap.theme03 {background: #6d6155;}
.wrap.theme03 .login {color: #fff;}
.wrap.theme03 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme03 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme03 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme03 .login .inp_box input[type=text], .wrap.theme03 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme03 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme03 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme03 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme03 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme03 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme03 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme03 .login .btn_back a {color:#fff;}
.wrap.theme03 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme03 .login .btn_login a {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffb625), color-stop(1, #e6a421));
	background: -moz-linear-gradient(top, #ffb625 0%, #e6a421 100%);
	background: -webkit-linear-gradient(top,  #ffb625 0%, #e6a421 100%);
	background: -o-linear-gradient(top,  #ffb625 0%, #e6a421 100%);
	background: -ms-linear-gradient(top,  #ffb625 0%, #e6a421 100%);
	background: linear-gradient(top,  #ffb625 0%, #e6a421 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb625', endColorstr='#e6a421', gradientType=0);

	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme03 .header h1 {color: #fff;}
.wrap.theme03 .header h1 svg path {fill: #fff;}
.wrap.theme03 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #ffb625;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme03 .main_cont .item::before {background: #ffe1a8;}
.wrap.theme03 .main_cont .article_list ul li a .title .new {background-color: #ffb625;}
.wrap.theme03 .board_list li a .title .new {background-color: #ffb625;}
.wrap.theme03 .search .tab.on {box-shadow: inset 0 -8px 0 #ffe1a8;}

.wrap.theme03 .mcaller_menu.active {background-color: #6d6155;}
.wrap.theme03 .mcaller_menu a.toggle {background-color: #ffb625;}
.wrap.theme03 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme03 .dialpad .action li a.blue {background-color: #ffb625;}
.wrap.theme03 a.call {background-color: #ffb625;}

/* theme04 *****************************************/
.wrap.theme04 {background: #483565;}
.wrap.theme04 .login {color: #fff;}
.wrap.theme04 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme04 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme04 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme04 .login .inp_box input[type=text], .wrap.theme04 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme04 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme04 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme04 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme04 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme04 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme04 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme04 .login .btn_back a {color:#fff;}
.wrap.theme04 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme04 .login .btn_login a {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d44f77), color-stop(1, #bf476b));
	background: -moz-linear-gradient(top, #d44f77 0%, #bf476b 100%);
	background: -webkit-linear-gradient(top,  #d44f77 0%, #bf476b 100%);
	background: -o-linear-gradient(top,  #d44f77 0%, #bf476b 100%);
	background: -ms-linear-gradient(top,  #d44f77 0%, #bf476b 100%);
	background: linear-gradient(top,  #d44f77 0%, #bf476b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d44f77', endColorstr='#bf476b', gradientType=0);

	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme04 .header h1 {color: #fff;}
.wrap.theme04 .header h1 svg path {fill: #fff;}
.wrap.theme04 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #d44f77;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme04 .main_cont .item::before {background: #eeb9c9;}
.wrap.theme04 .main_cont .article_list ul li a .title .new {background-color: #d44f77;}
.wrap.theme04 .board_list li a .title .new {background-color: #d44f77;}
.wrap.theme04 .search .tab.on {box-shadow: inset 0 -8px 0 #eeb9c9;}

.wrap.theme04 .mcaller_menu.active {background-color: #483565;}
.wrap.theme04 .mcaller_menu a.toggle {background-color: #d44f77;}
.wrap.theme04 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme04 .dialpad .action li a.blue {background-color: #d44f77;}
.wrap.theme04 a.call {background-color: #d44f77;}

/* theme05 *****************************************/
.wrap.theme05 {
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #4c74a1), color-stop(1, #61c18b));
	background: -moz-linear-gradient(-45deg, #4c74a1 0%, #61c18b 100%);
	background: -webkit-linear-gradient(-45deg,  #4c74a1 0%, #61c18b 100%);
	background: -o-linear-gradient(-45deg,  #4c74a1 0%, #61c18b 100%);
	background: -ms-linear-gradient(-45deg,  #4c74a1 0%, #61c18b 100%);
	background: linear-gradient(-45deg,  #4c74a1 0%, #61c18b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c74a1', endColorstr='#61c18b', gradientType=1);
}
.wrap.theme05 .login {color: #fff;}
.wrap.theme05 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme05 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme05 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme05 .login .inp_box input[type=text], .wrap.theme05 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme05 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme05 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme05 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme05 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme05 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme05 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme05 .login .btn_back a {color:#fff;}
.wrap.theme05 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme05 .login .btn_login a {
	background: #1c274c;
	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme05 .header h1 {color: #fff;}
.wrap.theme05 .header h1 svg path {fill: #fff;}
.wrap.theme05 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #1c274c;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme05 .main_cont .item::before {background: #c0e6d0;}
.wrap.theme05 .main_cont .article_list ul li a .title .new {background-color: #61c18b;}
.wrap.theme05 .board_list li a .title .new {background-color: #61c18b;}
.wrap.theme05 .search .tab.on {box-shadow: inset 0 -8px 0 #c0e6d0;}

.wrap.theme05 .mcaller_menu.active {background-color: #1c274c;}
.wrap.theme05 .mcaller_menu a.toggle {background-color: #61c18b;}
.wrap.theme05 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme05 .dialpad .action li a.blue {background-color: #61c18b;}
.wrap.theme05 a.call {background-color: #61c18b;}

/* theme06 *****************************************/
.wrap.theme06 {
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #6396a7), color-stop(1, #c6a683));
	background: -moz-linear-gradient(-45deg, #6396a7 0%, #c6a683 100%);
	background: -webkit-linear-gradient(-45deg,  #6396a7 0%, #c6a683 100%);
	background: -o-linear-gradient(-45deg,  #6396a7 0%, #c6a683 100%);
	background: -ms-linear-gradient(-45deg,  #6396a7 0%, #c6a683 100%);
	background: linear-gradient(-45deg,  #6396a7 0%, #c6a683 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6396a7', endColorstr='#c6a683', gradientType=1);
}
.wrap.theme06 .login {color: #fff;}
.wrap.theme06 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme06 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme06 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme06 .login .inp_box input[type=text], .wrap.theme06 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme06 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme06 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme06 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme06 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme06 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme06 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme06 .login .btn_back a {color:#fff;}
.wrap.theme06 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme06 .login .btn_login a {
	background: #1c274c;
	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme06 .header h1 {color: #fff;}
.wrap.theme06 .header h1 svg path {fill: #fff;}
.wrap.theme06 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #1c274c;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme06 .main_cont .item::before {background: #e8dbcd;}
.wrap.theme06 .main_cont .article_list ul li a .title .new {background-color: #c6a683;}
.wrap.theme06 .board_list li a .title .new {background-color: #c6a683;}
.wrap.theme06 .search .tab.on {box-shadow: inset 0 -8px 0 #e8dbcd;}

.wrap.theme06 .mcaller_menu.active {background-color: #1c274c;}
.wrap.theme06 .mcaller_menu a.toggle {background-color: #c6a683;}
.wrap.theme06 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme06 .dialpad .action li a.blue {background-color: #c6a683;}
.wrap.theme06 a.call {background-color: #c6a683;}

/* theme07 *****************************************/
.wrap.theme07 {
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #6ba5ce), color-stop(1, #584f97));
	background: -moz-linear-gradient(-45deg, #6ba5ce 0%, #584f97 100%);
	background: -webkit-linear-gradient(-45deg,  #6ba5ce 0%, #584f97 100%);
	background: -o-linear-gradient(-45deg,  #6ba5ce 0%, #584f97 100%);
	background: -ms-linear-gradient(-45deg,  #6ba5ce 0%, #584f97 100%);
	background: linear-gradient(-45deg,  #6ba5ce 0%, #584f97 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ba5ce', endColorstr='#584f97', gradientType=1);
}
.wrap.theme07 .login {color: #fff;}
.wrap.theme07 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme07 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme07 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme07 .login .inp_box input[type=text], .wrap.theme07 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme07 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme07 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme07 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme07 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme07 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme07 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme07 .login .btn_back a {color:#fff;}
.wrap.theme07 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme07 .login .btn_login a {
	background: #1c274c;
	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme07 .header h1 {color: #fff;}
.wrap.theme07 .header h1 svg path {fill: #fff;}
.wrap.theme07 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #1c274c;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme07 .main_cont .item::before {background: #bdb9d6;}
.wrap.theme07 .main_cont .article_list ul li a .title .new {background-color: #584f97;}
.wrap.theme07 .board_list li a .title .new {background-color: #584f97;}
.wrap.theme07 .search .tab.on {box-shadow: inset 0 -8px 0 #bdb9d6;}

.wrap.theme07 .mcaller_menu.active {background-color: #1c274c;}
.wrap.theme07 .mcaller_menu a.toggle {background-color: #584f97;}
.wrap.theme07 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme07 .dialpad .action li a.blue {background-color: #584f97;}
.wrap.theme07 a.call {background-color: #584f97;}

/* theme08 *****************************************/
.wrap.theme08 {
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f0c57b), color-stop(1, #d1694f));
	background: -moz-linear-gradient(-45deg, #f0c57b 0%, #d1694f 100%);
	background: -webkit-linear-gradient(-45deg,  #f0c57b 0%, #d1694f 100%);
	background: -o-linear-gradient(-45deg,  #f0c57b 0%, #d1694f 100%);
	background: -ms-linear-gradient(-45deg,  #f0c57b 0%, #d1694f 100%);
	background: linear-gradient(-45deg,  #f0c57b 0%, #d1694f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c57b', endColorstr='#d1694f', gradientType=1);
}
.wrap.theme08 .login {color: #fff;}
.wrap.theme08 .login .logo h1::before {background: rgba(255, 255, 255, 0.3);}
.wrap.theme08 .login .inp_box {background: rgba(255, 255, 255, 0.1);}
.wrap.theme08 .login .inp_box::before {background:rgba(255,255,255,0.5);}
.wrap.theme08 .login .inp_box input[type=text], .wrap.theme08 .login .inp_box input[type=password] {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.wrap.theme08 .login .inp_box input::placeholder {color: rgba(255,255,255,0.5);}
.wrap.theme08 .login .inp_box .inp.mail::before {background: url(../images/ico_mail_w.png) center no-repeat;}
.wrap.theme08 .login .inp_box .inp.phone::before {background: url(../images/ico_phone_w.png) center no-repeat;}
.wrap.theme08 .login .inp_box .inp.id::before {background: url(../images/ico_id_w.png) center no-repeat;}
.wrap.theme08 .login .inp_box .inp.pw::before {background: url(../images/ico_pw_w.png) center no-repeat;}
.wrap.theme08 .login .inp_box .inp.otp::before {background: url(../images/ico_otp_w.png) center no-repeat;}
.wrap.theme08 .login .btn_back a {color:#fff;}
.wrap.theme08 .login .inp_box input[type=checkbox] + label {color:#fff;}
.wrap.theme08 .login .btn_login a {
	background: #1c274c;
	box-shadow: 0 0 20px rgb(0 0 0 / 16%);
}
.wrap.theme08 .header h1 {color: #fff;}
.wrap.theme08 .header h1 svg path {fill: #fff;}
.wrap.theme08 .search .inp .srch {
	width:40px; 
	height:40px; 
	background-image:url('../images/ico_search.png');
	background-position: center;
	background-repeat: no-repeat; 
	background-color: #1c274c;
	border: 0; 
	border-radius: 20px;
}

.wrap.theme08 .main_cont .item::before {background: #edc8b9;}
.wrap.theme08 .main_cont .article_list ul li a .title .new {background-color: #d1694f;}
.wrap.theme08 .board_list li a .title .new {background-color: #d1694f;}
.wrap.theme08 .search .tab.on {box-shadow: inset 0 -8px 0 #edc8b9;}

.wrap.theme08 .mcaller_menu.active {background-color: #1c274c;}
.wrap.theme08 .mcaller_menu a.toggle {background-color: #d1694f;}
.wrap.theme08 .mcaller_menu.active a.menu {color: #fff;}

.wrap.theme08 .dialpad .action li a.blue {background-color: #d1694f;}
.wrap.theme08 a.call {background-color: #d1694f;}



.wrap.font_small {font-size:14px;}
.wrap.font_small input[type=text], .wrap.font_small input[type=file], .wrap.font_small input[type=password], .wrap.font_small textarea, .wrap.font_small select {font-size:14px;}

.wrap.font_big {font-size:16px;}
.wrap.font_big input[type=text], .wrap.font_big input[type=file], .wrap.font_big input[type=password], .wrap.font_big textarea, .wrap.font_big select {font-size:16px;}

