@charset "utf-8";
* {
  -webkit-tap-highlight-color: transparent;
}

/* Basic */
html {
  margin: 0; 
  overscroll-behavior: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
}

html, body {position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto;}
body { margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; color:#1b2549; font-size: 100%;}
body.login {background:#ededed;}
body.pop {background:#fff; padding:1.8em;}
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], input[type=number], textarea, select {padding:1px; font-family: 'Noto Sans KR', sans-serif; font-size: 1em; border:1px solid #dce0ea; box-sizing:border-box; border-radius:0.25em;}
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], input[type=number] {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:1em; 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: 1em; display: flex; flex-direction: column;}
.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 {background:url('../images/bg.png') top center no-repeat; background-size:100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0;}
.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: 1.25em; font-weight: 700;  display: flex; align-items: center;}
.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;}

@media (max-height: 600px) {
  .login .ver {
    display: none;
  }
}
@media (min-height: 600px) {
  .login .ver {
    display: block;
  }
}

.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; 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: 1em; margin:0; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 99; font-size: 1.25em; font-weight: 700;}
.header h1 a {display:flex; align-items: center; width: 1.5rem; height: 1.5rem; position: relative;}
.header h1 p {line-height: 1;}
.header h1 .blank {width: 3em;}
.header h1 .home {width: 3em; display:flex; align-items: center;}
.header h1 .home a:first-child {margin-right: 5px; }
.header h1 .home a:first-child .num {position: absolute; top: 1px; right: 1px; z-index:99; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); background:#ff4e00; width:8px; height:8px; border-radius: 50%;}
.header h1 .set {width: 3em; display:flex; align-items: center; justify-content: flex-end;}
.header h1 .set a:last-child {margin-left: 5px; }
.header h1 .set a:first-child .num {position: absolute; top: 1px; right: 1px; z-index:99; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); background:#ff4e00; width:8px; height:8px; border-radius: 50%;}
.header h1 .logo {margin: 0.5em 0; display: flex; align-items: center;}
.header h1 .gohome {z-index:1; position: relative; display: flex; justify-content: center; align-items: center;}
.header h1 .setting {z-index:1; position: relative; display: flex; justify-content: center; align-items: center;}
.header h1 img {height:1.5em; display: inline-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:1em; box-shadow: 1px 0 30px rgba(39, 46, 79, .3); border-radius: 1.5em 0 0 ; background: #fff;}
.header.main .search {padding:1em;}
.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 {padding: 0; border-radius: 30px; background: #ebeef3; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset; position: relative;}
.search .inp > div {display: flex; margin-bottom: 0; position: absolute; top: 0; right:0;}
.search .inp .srch {
  width:2.5em; 
  height:2.5em; 
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #1b2549;
  border: 0; 
  border-radius: 1.25em;
}
.search .inp .calendar {background:url('../images/ico_calendar.png') center no-repeat transparent; width:2.5em; height:2.5em; border: 0; display: flex; position: absolute; right: 2.5em;}
.search .inp input[type=text] {padding: 0 5em 0 1.25em; border:0; width: 100%; background: transparent; height:2.5em;}
.search .inp input[type=reset] {width:2.5rem; height:2.5rem; background:url('../images/ico_clear.png') center no-repeat transparent; border: 0; font-size: 0; display: flex; position: absolute; right: 2.5em;}

.main_cont {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 40px); 
  padding-bottom: calc(env(safe-area-inset-bottom) + 40px); 
  padding-left: 1em;
  padding-right: 1em;
  overflow: auto;
  background: #fff;
  flex: 1 1 0;
}
.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: 1em; 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: 100%;}
.main_cont .item img {width:40%; position: relative;}
.main_cont .item p {letter-spacing:-.5px; margin-top:0.25em;}
.main_cont .item .num {position:absolute; top:0; right:0; width:1.5rem; height:1.5rem; border-radius:100%; background: #1b2548; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6em;}

.main_cont .article_list {margin-top:30px;}
.main_cont .article_list h3 {font-weight:700; font-size: 1em; display: flex; justify-content: space-between;}
.main_cont .article_list h3 .more {font-size: 0.75em; font-weight:900;}
.main_cont .article_list ul {margin: 0; padding: 0; border-bottom: 1px dotted #dce0ea; margin-top:0.75em;}
.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: 0.25em 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: 1em;
  padding-right: 1em;
  overflow: auto; 
  background:#fff;
  flex: 1 1 0;
}
.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: 1em;
  padding-right: 1em;
  overflow: auto; 
  background:#fff;
  flex: 1 1 0;
}
.view_cont.active {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 140px); 
  padding-bottom: calc(env(safe-area-inset-bottom) + 140px); 
}

.call_cont, .chat_cont {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 30px); /* ajhong */
  padding-bottom: calc(env(safe-area-inset-bottom) + 30px); /* ajhong */
  padding-left: 1em;
  padding-right: 1em;
  overflow: auto; 
  background:#fff;
  flex: 1 1 0;
}
.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) + 30px); 
  padding-bottom: calc(env(safe-area-inset-bottom) + 30px); 
  padding-left: 0;
  padding-right: 0;
  overflow: auto; 
  background:#fff;
  flex: 1 1 0;
}
.dial_cont.active {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 90px); 
  padding-bottom: calc(env(safe-area-inset-bottom) + 90px); 
}

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

.view_cont .func {display: flex; justify-content: space-between; margin-bottom:0.5em;}
.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; font-size: 16px; line-height: 1;}
.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:fixed;; 
  top: calc(100% - 4.5em);
  right:0; 
  left: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: 1em;
  padding-right: 1em;
  
  z-index:101;/*ajhong*/
  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; text-align:center; background:#fff; box-shadow: 1px 0 20px rgba(39, 46, 79, .4); border-radius:50%;}
.foot_btn i {display: block;}
.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: 1; 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:35%; background:url('../images/thumb.png') top center no-repeat #eceef7; background-size:cover; float:left;}
ul.tree li label span:nth-child(2) { padding-left:10px; line-height: 30px; width: calc(100% - 54px);}
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 {}

ul.tree.list_org_srch li {padding: 0;}
ul.tree.list_org_srch li label span {display: inline-block;}
ul.tree.list_org_srch li label span strong {display: block; line-height: 1;}
ul.tree.list_org_srch li label span i {display: block; line-height: 1; font-style: normal; font-size: 0.75em; font-weight: 400;margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}

ul.tree.check {}
ul.tree.check li .checkbox {width: 20px; height: 20px; padding: 0; margin: 0; cursor: pointer; background:url('../images/ico_check.png') center no-repeat; background-size: 16px; position:absolute; top:8px;}
ul.tree.check li .checked {background:url('../images/ico_checked.png') center no-repeat; background-size: 15px;}
ul.tree.check li .half_checked {background:url('../images/ico_check.png') center no-repeat; background-size: 15px;}


.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; align-items: center; line-height: 18px; margin-top: 6px;}
.board_list li a .date {font-size: 0.75em; 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 li a .edit {margin-top: 6px;}
.board_list li a .edit button {border: 0; outline: 0; padding: 0; width: 18px; height: 18px; margin-right: 3px;}
.board_list li a .edit .btn-delete {background: url('../images/ico_trash.png') center no-repeat; background-size: 18px;}
.board_list li a .edit .btn-edit {background:url('../images/ico_edit.png') center no-repeat; background-size: 18px;}
.board_list li a .edit .btn-send {background:url('../images/ico_send.png') center no-repeat; background-size: 18px;}

/*
.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: 0.75em;}
.board_view .title {font-weight: 700; margin-bottom: 0.25em; letter-spacing: -.6px;}
.board_view .date {font-size: 0.75em; display: flex; justify-content: space-between; align-items: center; color:#9296aa;}
.board_view .date .att .bi::before {font-size: 0.75em;}
.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: 0.25em 0; margin: 0.5em 0;}
.board_view .att_list li {background:url('../images/ico_file.png') left center no-repeat; background-size: 1em; padding-left: 1.25em; 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: 0 20px; background: #eceef7; line-height: 44px; font-size: 16px; font-weight: 700; position: relative; display: flex;}
.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 h3 .chat_popup_close {display: inline-block; width: 24px; height:44px; position:relative;}
.dim_bg .popup h3 .chat_popup_close::after {content:"\F12C"; display: inline-block; font-family: bootstrap-icons !important; font-size: 24px; font-weight: 400; margin-left: -6px;}
.dim_bg .popup h3.white {background: #fff; box-shadow: 0 0 20px rgba(39, 46, 79, .2);}
.dim_bg .popup .popup_close {display:block; position:absolute; width:44px; height:44px; top:0px; right:0px; z-index: 1; 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_setting {display:block; position:absolute; width:44px; height:44px; top:0px; right:0px; background:url('../images/ico_setting.png') center no-repeat; cursor:pointer}
.side_menu {
    position: fixed;
    top: 0;
    right: -50vw;
    width: 50vw;
    height: 100%;
    background: #1b2549e8;
    color: #fff;
    transition: right 0.3s ease;
    padding: 20px;
    z-index: 999999;
}
.side_menu.open {
    right: 0;
}
.side_menu h4 {}
.side_menu ul {margin: 1em 0; padding: 0; border-top: 1px dotted #dce0ea85;}
.side_menu ul li {margin: 0; padding: 1em 0; border-bottom: 1px dotted #dce0ea40; display: flex; justify-content: space-between; align-items: center;}
.side_menu ul li a {color:#fff; font-size: 0.9em;}
.side_menu_close_btn {
    position: absolute;
    top: 1em;
    right: 0.9em;
    z-index: 999;
    color: white;
    cursor: pointer;
    display: block;
    width: 1.5em;
    text-align: center;
}

.side_menu ul li input[type=checkbox] {display:none;}
.side_menu ul li input[type=checkbox] + label {margin: 0; display:inline-block; width: 40px; height:20px; background:#dce0ea; border-radius:13px; text-align: left;}
.side_menu ul li input[type=checkbox] + label:before {content:""; width:12px; height:12px; border-radius:10px; background:#fff; display:inline-block; margin: 4px; box-shadow: 0 0 3px rgba(39, 46, 79, .3);}
.side_menu ul li input[type=checkbox]:checked + label {background:#0049d3; text-align: right;}
.side_menu ul li input[type=checkbox]:checked + label:before {content:""; width:12px; height:12px; border-radius:10px; background:#fff; display:inline-block; margin: 4px;}

.dim_bg .popup .popup_head {background:url('../images/bg.png') top center no-repeat #dadfea; background-size: 100%; padding: 1em; display: flex; align-items: center; position: relative;}
.dim_bg .popup .popup_head .photo {width:5em; height:5em; border-radius: 50%; background:url('../images/thumb.png') top center no-repeat #eceef7; background-size:cover; margin-right: 0.75em;}
.dim_bg .popup .popup_head .profile {color:#161b30; flex: 1 1 0;}
.dim_bg .popup .popup_head .profile .role {}
.dim_bg .popup .popup_head .profile .name {font-size:1.25em; font-weight:700;}
.dim_bg .popup .popup_head .profile .type {}
.dim_bg .popup .popup_head .bookmark {position: absolute; bottom: 0.75em; right: 0.75em; cursor: pointer;}
.dim_bg .popup .popup_head .bookmark::before {content: "\F19C"; font-family: bootstrap-icons !important; font-size: 22px;}
.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 .popup_btn.fix { margin: 0; padding: 1em; position:absolute; bottom: 0; left:0; width:100%; background:#fff; box-shadow: 0 0 20px rgba(39, 46, 79, .2);}
.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 .popup_container .search {
    padding: 1em 0;
    margin: 0 1em;
    box-shadow: none;
    border-radius: 0;
    background: none;
    border-bottom: 1px dotted #dce0ea;
}
.dim_bg .popup .popup_container .search .inp {
    margin-bottom: 0;
}
.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; }

.dim_bg .popup.full { border-radius: 0; overflow: hidden; position: absolute; top: 0; left:0; bottom:0; right:0; background: #fff; transform: translateY(0);}
.dim_bg .popup.full .popup_container{height: calc(100% - 44px);}

.dim_bg.alert_pop,.dim_bg.confirm_pop { z-index:100100;}
.dim_bg.call_pop { z-index: 100010; }

.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; font-size: 0.9em}
.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: 1.2; padding:10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.detail_info .cont_box dl dd.pd1 {padding-right: 2.2em;}
.detail_info .cont_box dl dd.pd2 {padding-right: 4.5em;}
.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: 2em;}
.detail_info .cont_box dl dd .menu a {display:inline-block; width:2em; height:2em; border-radius:50%;}
.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;}
.detail_info .cont_box dl dd .part {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px;}

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 {position:relative; height: 100%;}
.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; height: 60px; 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; width: 100%;}
.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 .digits {font-family: 'M PLUS 1', sans-serif; padding: 0; font-size: 3.6vh; line-height: 1; height: 36px; text-align: center; cursor: pointer; height: 100%;};
.dialpad .dials .digits.active {}

.dialpad .dials {position: relative; padding:1em; display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); align-items: center; height: calc(100% - 180px);}
.dialpad .dials .digits.star {font-size:6vh; 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: 3rem;
  height: 3rem;
  position: absolute;
  top: auto;
  bottom: -3rem;
  right: 1rem;
  font-size: 0;
  padding: 0; 
  display: flex;
}
.dialpad .dials .digits.delete a {padding:0; width:100%; height: 100%; margin: auto; background: url(../images/ico_del_digit.png) center no-repeat; background-size: 2rem;}


.dialpad .dials .digits.delete, .dialpad .dials .digits.clear{margin:0;}
.dialpad .dials .digits.clear {display: none;}
.dialpad .dials .digits a {display:block; border-radius: 10px; line-height: 1; color:#21262d; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}
.dialpad .dials .digits a:active,.dialpad .dials .digits a.active  {background-color:#ecf2fb;}
.dialpad .dials .digits sub {display:block; font-size:0.4em; height:1em;}

.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:#67719c; width: 100%; color: #fff; height: 3em; 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: 3em; 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; width: calc(100% - 26px); display: flex;}
.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:11px; height:12px; float:left; margin-right: 3px;}
.recent li .stat.out {background:url('../images/ico_out.png') center no-repeat; background-size: 100%}
.recent li .stat.in {background:url('../images/ico_in.png') center no-repeat; background-size: 100%}
.recent li .stat.out_not {background:url('../images/ico_out_not.png') center no-repeat; background-size: 100%}
.recent li .stat.in_not {background:url('../images/ico_in_not.png') center no-repeat; background-size: 100%}
.recent li .thumb {width:50px; height:50px; border-radius:35%; background:url('../images/thumb.png') center no-repeat #eceef7; background-size:cover;}
.recent li .who {/*height:50px;*/ padding-left:10px; width: calc(100% - 50px);}
.recent li .who .cont {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.recent li .who .name {line-height: 1.2; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px;min-height: 1.2;}/*ajhong*/
.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: 0.75em; font-weight:300; line-height: 1; margin-top:4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px;}
.recent li .who .num {font-family: 'M PLUS 1', sans-serif; font-size: 0.7em; line-height: 1; position: relative; margin-top:4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.recent li .who .num .date {font-family: 'M PLUS 1', sans-serif; color:#a2aac9; margin-left:3px; letter-spacing: -.6px;}

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; width: calc(100% - 26px);}
.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; width: calc(100% - 70px);}
.contact .accordion_panel li .who .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight:700; padding-right: 10px;} /*ajhong*/
.contact .accordion_panel li .who .num {font-family: 'M PLUS 1', sans-serif; font-size:0.75em;}

.chat_list {margin: 0 0 10px 0; padding:0; border-top: 1px dotted #dce0ea;}
.chat_list > li {border-bottom: 1px dotted #dce0ea; position: relative; }
.chat_list > li a {display: block;}
.chat_list li .chat-title {padding: 10px 0; display: flex;}
.chat_list li .thumb {width:50px; height:50px; border-radius:35%; background:url('../images/thumb.png') center no-repeat #eceef7; background-size:cover;}
.chat_list li .thumb2 {width:50px; height:50px; border-radius:35%; background:url('../images/thumb2.png') center no-repeat #eceef7; background-size:cover;}
.chat_list li .chat-cont {height:50px; padding-left:10px; width: calc(100% - 80px);}
.chat_list li .chat-cont .cont {position: relative;}
.chat_list li .chat-cont .name {line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; padding-right: 10px;}
.chat_list li .chat-cont .msg {line-height: 1; font-size: 12px; position: relative; margin-top:4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.chat_list li .chat-cont .date {font-family: 'M PLUS 1', sans-serif; font-size: 11px; line-height: 1; color:#a2aac9; margin-top:4px;}
.chat_list li .num {background: #0049d3; width:20px; height:20px; color:#fff; text-align: center; font-size: 10px; line-height: 20px; border-radius: 50%;}

.chat_add {cursor: pointer; position: absolute; bottom: 20px; right: 20px; width:40px; height:40px; border-radius:50%; background:url('../images/ico_chat_add.png') center no-repeat #0049d3; background-size: 20px; box-shadow: 0 0 10px rgba(39, 46, 79, .2); transition:all 0.6s cubic-bezier(0.77, 0, 0.175, 1);}
.chat_add.active {bottom: 90px;}

.mcaller_menu {transform: translateY(45px); display: flex; justify-content: center; align-items: center; background:transparent; border-radius: 100px; margin: 0 auto; max-width: 410px; padding: 0.25em 1.5em; position: fixed; left:10px; bottom:10px; right:10px; 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: 3.5em; height: 3.5em; 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: 0.75em;}

.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: 3em;}
.mcaller_menu.active a.menu .bi::before {font-size: 1.25em;}
.mcaller_menu.active a.toggle {background:url('../images/ico_m.png') center no-repeat #272e4f; background-size:2em;}

.tab_btn_setting { position: relative; margin: 0; padding: 0; display: flex; border-bottom: 1px solid #dce0ea; width: auto; overflow-x: auto; overflow-y: hidden;}
.tab_btn_setting li {position: relative; border-radius: 0; margin-left:10px; margin-bottom: -1px; font-size: 0.9em;}
.tab_btn_setting li:first-child {border-radius: 0; border: none; margin-left:0;}
.tab_btn_setting li:last-child {border-radius: 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; word-break: keep-all;}
.tab_btn_setting li.on { position: relative; z-index:999;}
.tab_btn_setting li.on a {color: #1b2549; border-bottom: 2px solid #1b2549; font-weight: 700;}
.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 0; position: relative; font-weight: 700;}
/*.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:14px; left: 20px; right: 20px; height:4px; border-radius:10px; background:#eceef7;}

.set_item dd .font-size label.font_s {width: 10%; font-size: 0.8em; line-height: 24px;}
.set_item dd .font-size label.font_b {width: 10%; font-size: 1.2em; line-height: 24px; text-align: right;}
.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: 16%;}
.set_item dd .font-size input[type=radio] + label span {display:block; margin-top:10px; line-height:20px;}
.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_item dd .profile iframe body {padding: 0 !important;}

.set_basic {margin:0; padding:6px 0; display: flex; justify-content: space-between; border-bottom: 1px dotted #dce0ea;}
.set_basic dt {width: 120px; padding:0; position: relative; line-height:2.25rem; letter-spacing: -1px; font-size: 0.9em;}
.set_basic.sub dt {color: #7c839c; padding-left: 0.5em;}
.set_basic dd {width: calc(100% - 120px); 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.day {display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2em;}
.set_basic dd.day input[type=checkbox] + label {margin: 6px 0; display:inline-block; width: auto; height:26px; background:#dce0ea; border-radius:4px; text-align: center; font-size: 0.92em; line-height: 1.6;}
.set_basic dd.day input[type=checkbox] + label:before {content:""; display:none;}
.set_basic dd.day input[type=checkbox]:checked + label {background:#0049d3; color:#fff;}
.set_basic dd.day input[type=checkbox]:checked + label:before {content:""; display:none;}

.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 dd input[type=number] {width: 50%; text-align: center;}
.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; background:#dce0ea; border-radius:20px; text-align: center;}
.set_basic.long {margin:0; padding:6px 0; display: flex; justify-content: space-between; border-bottom: 1px dotted #dce0ea;}
.set_basic.long dt {width: 160px; padding:0; position: relative; line-height:36px; letter-spacing: -1px; font-size: 0.9em;}
.set_basic.long dd {width: calc(100% - 160px); 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:1em 0; display: flex; justify-content: center; font-size: 0.92em; letter-spacing: -.5px;}
ul.num_list li div .name {line-height: 1.5;}

/* 권한알림관련 시작*/
.auth_wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);/* display: none; */z-index: 99;padding-top: env(safe-area-inset-top);padding-bottom: env(safe-area-inset-bottom);}
.auth_box { position: absolute; top: 20px; left: 20px; bottom:20px; right:20px; padding: 15px; background-color: #fff; border-radius: 6px; overflow-y: auto;}
.auth_box h3 { font-size: 16px; padding-bottom: 10px;}
.auth {border-top: 1px solid #dce0ea; margin-top:20px;}
.auth dl {border-bottom: 1px solid #dce0ea; overflow:hidden; display:flex; margin: 0; padding: 10px 0;}
.auth dl dt {width: 20%; margin: 0; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.auth dl dt .bi::before {font-size: 30px; line-height: 60px;}
.auth dl dd {width: 80%; margin:0; padding-left:10px; display: flex; justify-content: center; flex-direction: column;}
.auth dl dd h3 {font-size:14px; font-weight:700; margin-bottom:5px;}
.view_btn { text-align: center; margin: 10px 0 ; }
.view_btn .btn.blue {background:#4361ee; padding: 7px 20px 7px 14px; border-radius: 20px; height:auto; color:#fff;}

/* 권한알림관련 끝*/

/* loaderWrap 시작 */
.loaderWrap {
  position: fixed; top:0; width:100%; height: 100%; left: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.5);
}
.lds-roller {
  display: block;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* loaderWrap 끝 */

/* 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 {
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #58c285;
  border: 0; 
}
.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 { 
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #ff9354;
  border: 0; 
}

.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 {
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #ffb625;
  border: 0; 
}

.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 {
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #d44f77;
  border: 0; 
}

.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 {
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #1c274c;
  border: 0; 
}

.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 {
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #1c274c;
  border: 0; 
}

.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 {
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #1c274c;
  border: 0; 
}

.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 { 
  background-image:url('../images/ico_search.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-color: #1c274c;
  border: 0;
}

.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;}

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

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

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

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


.wrap.font_tiny {font-size:0.8em;}
.wrap.font_tiny input[type=text], .wrap.font_tiny input[type=file], .wrap.font_tiny input[type=password], .wrap.font_tiny input[type=number], .wrap.font_tiny textarea, .wrap.font_tiny select {font-size:0.8rem;}

.wrap.font_small {font-size:0.9em;}
.wrap.font_small input[type=text], .wrap.font_small input[type=file], .wrap.font_small input[type=password], .wrap.font_small input[type=number], .wrap.font_small textarea, .wrap.font_small select {font-size:0.9rem;}

.wrap.font_big {font-size:1.1em;}
.wrap.font_big input[type=text], .wrap.font_big input[type=file], .wrap.font_big input[type=password], .wrap.font_big input[type=number], .wrap.font_big textarea, .wrap.font_big select {font-size:1.1rem;}

.wrap.font_large {font-size:1.2em;}
.wrap.font_large input[type=text], .wrap.font_large input[type=file], .wrap.font_large input[type=password], .wrap.font_large input[type=number], .wrap.font_large textarea, .wrap.font_large select {font-size:1.2rem;}

.wrap.font_large .mcaller_menu {padding: 0.25em 1em;}