@charset "UTF-8";
/* *******************************************************
 * filename : sendmesg.css
 * description : 문자발송관련 CSS 모음
 * date : 2023-05-23
******************************************************** */
/* ***************************
 * 선거일정
 *************************** */
fieldset.electionCalendar .mbtns {
  margin-top: 10px;
}

/* ***************************
 * 특수기호
 *************************** */
.popspecchars > ul li a {
  font-size: 18px !important;
}

.charmojiwrap {
  padding: 0 15px 15px;
}
.charmojiwrap ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.charmojiwrap ul li {
  height: 40px;
}
.charmojiwrap ul li button {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 18px;
  font-family: Helvetica;
  cursor: pointer;
}
.charmojiwrap ul.spec_ul li {
  width: 12.5%;
}
.charmojiwrap ul.emoji_ul li {
  width: 25%;
}
.charmojiwrap ul.kkoji_ul li {
  height: 50px;
  padding: 10px;
  width: 20%;
  text-align: center;
}
.charmojiwrap ul.kkoji_ul li img {
  width: 50px;
  cursor: pointer;
}

/* ***************************
 * 조합문자란
 *************************** */
.johabMesgGuide {
  position: relative;
  padding: 0;
  text-align: center;
}
.johabMesgGuide article.step {
  padding: 60px 15px 20px;
}
.johabMesgGuide article.step:last-child {
  /*padding-bottom: 200px;*/ /*update hj 230906*/
}
.johabMesgGuide article.step h3 {
  padding: 10px 0 20px;
  font-size: 25px;
  font-weight: 700;
  line-height: 29px;
  word-spacing: -1px;
  color: #333940;
}
.johabMesgGuide article.step p {
  font-size: 15px;
  color: #555;
  line-height: 1.6em;
  padding-bottom: 20px;
  word-spacing: -1px;
  text-align: left;
}
.johabMesgGuide article.step p .blue_f,
.johabMesgGuide article.step p em {
  color: #1976d2;
}
.johabMesgGuide article.step figure.imgwrap {
  overflow: hidden;
  position: relative;
  display: block;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
.johabMesgGuide article.step figure.imgwrap img {
  width: 100%;
  border: 0;
}

.whatsjohabHeros {
  position: relative;
  padding: 0 15px 5px;
  background-color: #6a6e72;
}
.whatsjohabHeros h3 {
  font-size: 34px;
  font-weight: 500;
  color: #fff;
  padding: 80px 0 20px;
  text-shadow: var(--shadow_mypage_txt);
}
.whatsjohabHeros h3 strong {
  font-weight: 900;
}
.whatsjohabHeros p {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}
.whatsjohabHeros p .red {
  color: #f00;
}
.whatsjohabHeros figure {
  position: relative;
  padding: 15px 25px;
  border-radius: 10px;
  border: solid 1px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.1);
}
.whatsjohabHeros figure img {
  width: 100%;
  border: 0;
}
.whatsjohabHeros figure::before {
  content: "※변수치환 방식";
  white-space: nowrap;
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 12px;
  color: #fff;
  opacity: 0.7;
}
.whatsjohabHeros::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -16px;
  left: 125px;
  transform: rotate(-23deg);
  background: url(../img/icon/ico_excel3d.png) no-repeat 50%/contain;
  filter: blur(4px);
}
.whatsjohabHeros::after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  top: -46px;
  left: 188px;
  background: url(../img/icon/ico_excel3d.png) no-repeat 50%/contain;
}

/* ***************************
 * 이통사 스팸필터링
 *************************** */
.spamFilteringHeros {
  position: relative;
  padding: 25px 15px 10px;
  background-color: #fff;
}
.spamFilteringHeros h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4em;
}
.spamFilteringHeros h3 strong {
  font-size: 24px;
  font-weight: 900;
  color: #1976d2;
}
.spamFilteringHeros p {
  font-size: 13px;
  margin-bottom: 10px;
  padding: 10px 0;
}
.spamFilteringHeros p .red {
  color: #f00;
}

.telecomwrap {
  padding: 15px 15px 80px;
  background-color: #edf4ff;
}
.telecomwrap .blockspamsites {
  padding: 0 15px 15px;
  border-radius: 10px;
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 15px;
}
.telecomwrap .blockspamsites:last-child {
  margin-bottom: 0;
}
.telecomwrap .blockspamsites h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  border-bottom: solid 1px #eee;
}
.telecomwrap .blockspamsites h4 a {
  font-size: 12px;
  color: #999;
  font-weight: 400;
  text-decoration: underline;
}
.telecomwrap .blockspamsites .blockconfirm {
  padding-top: 15px;
  font-size: 13px;
}
.telecomwrap .blockspamsites .blockconfirm figure {
  padding: 20px 0 0;
}
.telecomwrap .blockspamsites .blockconfirm figure img {
  width: 100%;
  border-radius: 8px;
  border: solid 1px #fff;
  box-shadow: 0 2px 10px 10px rgba(0, 0, 0, 0.08);
}

/* ***************************
 * 테스트전송
 *************************** */
.mesgSendTestTR a.mesgSendTest {
  position: relative;
  display: block;
  padding: 10px;
  min-width: 270px;
}
.mesgSendTestTR a.mesgSendTest .up {
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mesgSendTestTR a.mesgSendTest .up .time {
  flex: initial;
  display: block;
  font-size: 12px;
  line-height: 15px;
  height: 15px;
  color: #aaaaac;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #9195B4;
}
.mesgSendTestTR a.mesgSendTest .up .status {
  flex: initial;
  display: block;
}
.mesgSendTestTR a.mesgSendTest .up .status em {
  line-height: 19px;
  font-size: 12px;
  font-weight: 700;
  /* 전송결과: 전송성공(success)/전송중(sending)/ 전송실패(failure)*/
}
.mesgSendTestTR a.mesgSendTest .up .status em.success {
  color: var(--color_status_succ);
}
.mesgSendTestTR a.mesgSendTest .up .status em.failure {
  color: var(--color_status_fail);
}
.mesgSendTestTR a.mesgSendTest .up .status em.sending {
  color: var(--color_status_wait);
}
.mesgSendTestTR a.mesgSendTest .phone {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mesgSendTestTR a.mesgSendTest .phone .caller{
  display: inline-block;
  font-family: Helvetica;
  height: 25px;
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  color: #555;
  width: 150px;
  flex-basis: 150px;
}

.mesgSendTestTR a.mesgSendTest .phone .msgText {
  display: inline-block;
  font-family: Helvetica;
  height: 25px;
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 600px;
  flex-basis: 600px;
}

.mesgSendTestTR a.mesgSendTest .phone .receiver {
  display: inline-block;
  font-family: Helvetica;
  height: 25px;
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  color: #555;
  width: 50px;
  flex-basis: 50px;
}
.mesgSendTestTR a.mesgSendTest .phone .caller {
  text-align: left;
}
.mesgSendTestTR a.mesgSendTest .phone .receiver {
  text-align: right;
}
.mesgSendTestTR a.mesgSendTest .phone .arrow {
  display: inline-block;
  width: 18px;
  height: 25px;
  background: url(../img/icon/ico_arrow.svg) no-repeat 50%/14px;
  opacity: 0.5;
}
.mesgSendTestTR a.mesgSendTest .mesg_isolate {
  display: none;
}

.mesgSendTestMessage {
  padding: 10px;
  text-align: left;
  border: solid 1px #eee;
  border-top-color: #ccc;
  background-color: var(--color_bg_box);
  border-radius: 10px;
  font-size: 13px;
}

/* ***************************
 * 내 문자함
 *************************** */
.myMesgboxs {
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.myMesgboxs .myMesgbox {
  width: 50%;
  padding: 3px 3px 15px;
  font-size: 0;
}
.myMesgboxs .myMesgbox:hover .mid,
.myMesgboxs .myMesgbox:hover .down, .myMesgboxs .myMesgbox.on .mid,
.myMesgboxs .myMesgbox.on .down {
  border-color: #bbb;
}
.myMesgboxs .myMesgbox .up {
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.myMesgboxs .myMesgbox .up .mesgtype {
  display: inline-block;
  background-color: #222;
  height: 20px;
  font-size: 12px;
  line-height: 19px;
  padding: 0 7px;
  color: #fff;
  border-radius: 4px 4px 0 0;
}
.myMesgboxs .myMesgbox .up .mesgtype.nsms {
  background-color: var(--color_nsms);
}
.myMesgboxs .myMesgbox .up .mesgtype.nlms {
  background-color: var(--color_nlms);
}
.myMesgboxs .myMesgbox .up .mesgtype.nmms {
  background-color: var(--color_nmms);
}
.myMesgboxs .myMesgbox .up .mesgtype.esms {
  background-color: var(--color_esms);
}
.myMesgboxs .myMesgbox .up .mesgtype.elms {
  background-color: var(--color_elms);
}
.myMesgboxs .myMesgbox .up .mesgtype.emms {
  background-color: var(--color_emms);
}
.myMesgboxs .myMesgbox .up .mesglength {
  display: inline-block;
  font-size: 11px;
  font-family: Helvetica;
  line-height: 11px;
  color: #999;
}
.myMesgboxs .myMesgbox .mid {
  border: solid 1px #dcdcdc;
  cursor: pointer;
  border-radius: 0 10px 0 0;
  box-sizing: border-box;
  background-clip: content-box;
  overflow: hidden;
}
.myMesgboxs .myMesgbox .mid .mesg_tit {
  height: 32px;
  line-height: 31px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  background-color: #fff;
}
.myMesgboxs .myMesgbox .mid .mesg_photo {
  height: 100px;
  overflow: hidden auto;
  border-top: dashed 1px #ccc;
  background-color: #333940;
}
.myMesgboxs .myMesgbox .mid .mesg_photo img {
  width: 100%;
}
.myMesgboxs .myMesgbox .mid .mesg_cnts {
  border-top: dashed 1px #ccc;
  height: 250px;
  overflow: hidden;
  padding: 5px;
  font-size: 12px;
  line-height: 1.5em;
  background-color: #fff;
  overflow: auto;
  white-space: pre-line;
}
.myMesgboxs .myMesgbox .down {
  border: solid 1px #dcdcdc;
  border-top: 0;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}
.myMesgboxs .myMesgbox .down .time {
  display: inline-block;
  font-size: 11px;
  font-family: Helvetica;
  line-height: 11px;
  color: #999;
  padding-left: 5px;
}
.myMesgboxs .myMesgbox .down .btn_delete {
  width: 30px;
  height: 30px;
  background: url(../img/icon/ico_delete.svg) no-repeat 50%/20px;
  filter: invert(100%);
  opacity: 0.3;
  cursor: pointer;
}
.myMesgboxs .listNone {
  width: 100%;
  flex: none;
  height: 300px;
}
.myMesgboxs .listNone span {
  position: relative;
  height: 30px;
  line-height: 30px;
  top: calc(50% + 15px);
  font-size: 14px;
  color: #777;
  display: block;
  text-align: center;
}
.myMesgboxs .listNone span::before {
  content: "";
  position: absolute;
  top: -50px;
  left: calc(50% - 25px);
  display: block;
  width: 50px;
  height: 50px;
  opacity: 0.4;
  background: url(../img/icon/nop.svg) no-repeat 50%;
  background-size: contain;
}

/* ***************************
 *
 * 문자 발송창 공통
 *
 *************************** */
.nospam {
  background-color: #e9ecef;
  padding: 30px 20px;
  width: calc(100% - 30px);
  margin: auto;
}
.nospam h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 20px;
  color: #555;
}
.nospam h4 strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1976d2;
}
.nospam .btn_nospam {
  cursor: pointer;
  display: block;
  font-size: 16px;
  word-spacing: -1.2px;
  color: #222;
  background-color: #fff;
  border: solid 1px #888;
  padding: 3px 10px 4px;
  max-width: 280px;
  margin: auto;
  text-align: center;
}
.nospam .btn_nospam em {
  color: #f00;
}

.sendMesgField {
  position: relative;
  padding: 0;
  /* 상단 발신번호 및 기타정보 */
  /* 전송대상 */
  /* 전송시작 */
  /* 분할전송 */
}
.sendMesgField .extrainfo {
  height: 50px;
  font-size: 0;
  border-bottom: 1px solid #ddd;
}
.sendMesgField .extrainfo span {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  height: 50px;
  box-sizing: border-box;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px 10px 0 0;
  background-color: #9f9f9f;
  margin-right: 1px;
  /* width: 92px; */
  /* update 08/25 */
  min-width: 92px;
  text-align: center;
  line-height: 50px;
}
.sendMesgField .extrainfo span em {
  font-size: 16px;
  line-height: 20px;
  font-family: Helvetica;
}
.sendMesgField .extrainfo span.isjohab, .sendMesgField .extrainfo span.isbook, .sendMesgField .extrainfo span.issep {
  display: none;
}
.sendMesgField .extrainfo span.mesgtype.nsms {
  background-color: var(--color_nsms);
}
.sendMesgField .extrainfo span.mesgtype.nlms {
  background-color: var(--color_nlms);
}
.sendMesgField .extrainfo span.mesgtype.nmms {
  background-color: var(--color_nmms);
}
.sendMesgField .extrainfo span.mesgtype.esms {
  background-color: var(--color_esms);
}
.sendMesgField .extrainfo span.mesgtype.elms {
  background-color: var(--color_elms);
}
.sendMesgField .extrainfo span.mesgtype.emms {
  background-color: var(--color_emms);
}
.sendMesgField .extrainfo span.mesgtype.kkoa {
  background-color: var(--color_kkoa);
}
.sendMesgField .extrainfo span.mesgtype.kkoc {
  background-color: var(--color_kkoc);
}
.sendMesgField .extrainfo span.mesgtype.kkop {
  background-color: var(--color_kkop);
}
/*디자인대기*/
.sendMesgField .extrainfo span.mesgtype.rsms {
  background-color: var(--color_rsms);
}
.sendMesgField .extrainfo span.mesgtype.rlms {
  background-color: var(--color_rlms);
}
.sendMesgField .extrainfo span.mesgtype.rmms {
  background-color: var(--color_rmms);
}
.sendMesgField .upperinfo {
  padding: 0 15px;  /* update 2023/09/01 lyh */
}
.sendMesgField .upperinfo .callnumwrap {
  background-color: #575b5d;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.sendMesgField .upperinfo .callnumwrap .callerset {
  padding-left: 10px;
  height: 50px;
  width: 100px;
  cursor: pointer;
}
.sendMesgField .upperinfo .callnumwrap .callerset em,
.sendMesgField .upperinfo .callnumwrap .callerset span {
  vertical-align: top;
  display: inline-block;
}
.sendMesgField .upperinfo .callnumwrap .callerset span {
  color: #aaa;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
}
.sendMesgField .upperinfo .callnumwrap .callerset em {
  width: 20px;
  height: 50px;
  background: url(../img/icon/ico_setting.svg) no-repeat 0 17px/17px;
  filter: invert(100);
  opacity: 0.5;
}
.sendMesgField .upperinfo .callnumwrap .selectcaller {
  height: 50px;
  width: 185px;
  cursor: pointer;
}
.sendMesgField .upperinfo .callnumwrap .selectcaller select {
  width: 100%;
  border: 0;
  outline: none;
  height: 50px;
  font-size: 22px;
  font-family: Helvetica;
  color: #fff;
  font-weight: 700;
  appearance: none;
  background: url(../img/icon/ico_dropdownwhite.svg) no-repeat calc(100% - 12px)/18px;
  cursor: pointer;
}
.sendMesgField .upperinfo .callnumwrap .selectcaller select option {
  color: #333;
}
.sendMesgField .mesgtab {
  padding: 0 15px;
  display: flex;
}
.sendMesgField .mesgtab li {
  display: block;
  height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
  cursor: pointer;
  border-bottom: solid 2px #fff;
}
.sendMesgField .mesgtab li span {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #aaa;
  line-height: 50px;
  word-spacing: -4px;
  font-weight: 700;
}
.sendMesgField .mesgtab li span em {
  font-weight: 700;
  font-family: Helvetica;
}
.sendMesgField .mesgtab li span::before {
  position: absolute;
  top: 50%;
  left: -16px;
  margin-top: -7px;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  opacity: 0.5;
}
.sendMesgField .mesgtab li.text span::before {
  background-image: url(../img/icon/ico_textphase.svg);
}
.sendMesgField .mesgtab li.photo span::before {
  background-image: url(../img/icon/ico_photo.svg);
}
.sendMesgField .mesgtab li:hover, .sendMesgField .mesgtab li.on {
  border-color: #222;
}
.sendMesgField .mesgtab li:hover span, .sendMesgField .mesgtab li.on span {
  color: #222;
}
.sendMesgField .mesgtab li:hover span::before, .sendMesgField .mesgtab li.on span::before {
  opacity: 1;
}
.sendMesgField .mesgtab li.photo {
  display: none;
}
.sendMesgField .middlesendbox {
  padding: 0 15px 15px;
  border-bottom: solid 0 #e9ecef;
}
.sendMesgField .middlesendbox .mesgTitle {
  border: solid 1px #777;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}
.sendMesgField .middlesendbox .mesgTitle input {
  width: 100%;
  height: 38px;
  line-height: 37px;
  border: 0;
  outline: none;
  appearance: none;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  word-spacing: -2px;
}
.sendMesgField .middlesendbox .mesgTitle + .sendboxTextWrap {
  border-top: 0;
}
.sendMesgField .middlesendbox .sendboxTextWrap {
  display: block;
  border: solid 1px #777;
  box-sizing: border-box;
  border-radius: 0 0 10px 10px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .free080Call {
  height: 40px;
  background-color: #f4f4f4;
  border-top: solid 1px #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sendMesgField .middlesendbox .sendboxTextWrap .free080Call span {
  display: inline-block;
  color: #777;
  font-size: 13px;
  line-height: 39px;
  height: 40px;
  padding: 0 10px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .free080Call .freeCallNumberWrap {
  width: 120px;
  height: 40px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .free080Call .freeCallNumberWrap select {
  width: 100%;
  border: 0;
  outline: none;
  height: 40px;
  font-size: 16px;
  font-family: Helvetica;
  color: #555;
  font-weight: 700;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/icon/ico_dropdown.svg) no-repeat calc(100% - 5px)/12px;
  cursor: pointer;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls {
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn {
  position: relative;
  width: 33.33%;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  height: 35px;
  line-height: 34px;
  text-align: center;
  color: #777;
  font-weight: 500;
  font-size: 14px;
  background-color: #eaecf2;
  cursor: pointer;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn.no-overrides {
  color: initial !important;
  font-weight: normal !important;
}

.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn:first-child {
  border-left: 0;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn:nth-child(4) {
  border-left: 0;
  border-radius: 0 0 0 10px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn:last-child {
  border-radius: 0 0 10px 0;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn.seljohab {
  font-size: 0;
  background: #eaecf2 url(../img/icon/ico_dropdown.svg) no-repeat calc(100% - 8px)/14px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn.seljohab select {
  width: 100%;
  height: 35px;
  background: transparent;
  appearance: none;
  border: 0;
  outline: none;
  padding-left: calc(50% - 26px);
  cursor: pointer;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls .ctrlbtn i.xi-help {
  font-size: 18px;
  color: #bbb;
  vertical-align: -2px;
}


/*RCS 추가 CSS*/
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls2 {
  height: 35px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls2 .ctrlbtn {
  position: relative;
  width: 33.33%;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  height: 35px;
  line-height: 34px;
  text-align: center;
  color: #777;
  font-weight: 500;
  font-size: 14px;
  background-color: #eaecf2;
  cursor: pointer;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls2 .ctrlbtn:first-child {
  border-left: 0;
  border-radius: 0 0 0 10px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls2 .ctrlbtn:last-child {
  border-radius: 0 0 10px 0;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgCtrls2 .ctrlbtn i.xi-help {
  font-size: 18px;
  color: #bbb;
  vertical-align: -2px;
}
/*RCS 추가 CSS*/



.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody {
  padding: 10px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .isAdInfo {
  font-size: 16px;
  display: block;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody textarea {
  width: 100%;
  height: 205px; /*update hj 230908*/
  resize: none;
  border: none;
  outline: none;
  appearance: none;
  font-size: 16px;
  /*line-height: 1.4em;*/ /*update hj 230908*/
  /*word-spacing: -2px;*/ /*update hj 230908*/
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .isphrase span {
  font-size: 16px;
  display: block;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .btnbytewrap {
  height: 27px;
  padding-top: 5px;
  display: flex;
  justify-content: space-between;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .btnbytewrap .btns {
  height: 22px;
  font-size: 0;
  display: flex;
  gap: 2px;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .btnbytewrap .btns .btn {
  display: inline-block;
  height: 22px;
  line-height: 21px;
  padding: 0 7px;
  border-radius: 3px;
  font-size: 13px;
  background-color: #ccc;
  cursor: pointer;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .btnbytewrap .btns .btn.on {
  background-color: #565460;
  color: #fff;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .bytes {
  text-align: right;
  font-size: 12px;
  color: #777;
}
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .bytes .maxbytes,
.sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .bytes .curbytes {
  font-size: 13px;
  font-family: Helvetica;
  font-weight: 500;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap {
  display: none;
  border: solid 1px #777;
  box-sizing: border-box;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoArea {
  background: url(../img/sub/message/attachbg.png) repeat;
  height: 321.59px;
  overflow: hidden;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoArea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoCtrls {
  height: 35px;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoCtrls .btn {
  height: 35px;
  border-radius: 0 0 10px 10px;
  border-top: solid 1px #ddd;
  height: 35px;
  line-height: 34px;
  text-align: center;
  color: #777;
  font-weight: 500;
  font-size: 14px;
  background-color: #eaecf2;
  cursor: pointer;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoCtrls .btn.btn_delelte {
  display: none;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoCtrls .btn.btn_upload label {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  height: 35px;
  line-height: 34px;
  color: #777;
  font-weight: 500;
  font-size: 14px;
}
.sendMesgField .middlesendbox .sendboxPhotoWrap .photoCtrls .btn.btn_upload input[type="file"] {
  display: none;
}
.sendMesgField .sendtargetwrap {
  padding: 0px 15px 15px;
  border-bottom: solid 0 #e9ecef;
  /* 조합문자 사용하지 않을때 */
  /* 조합문자 사용할때 */
}
.sendMesgField .sendtargetwrap h3.tit {
  padding: 10px 0 10px; /*update hj 230830*/
  display: flex;
  align-items: center;
}
.sendMesgField .sendtargetwrap h3.tit strong {
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  padding-right: 20px;
}
.sendMesgField .sendtargetwrap h3.tit i.xi-help {
  font-size: 20px;
  color: #a8a8a8;
  cursor: pointer;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap {
  border-radius: 10px;
  border: solid 1px #777;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiName,
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiPhone,
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap button {
  width: 33.33%;
  height: 40px;
  display: block;
  border-left: solid 1px #ddd;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiName:first-child,
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiPhone:first-child,
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap button:first-child {
  border-left: none;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap button {
  background-color: #eaecf2;
  border-bottom: solid 1px #ddd;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap button:last-child {
  border-bottom: none;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiName,
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiPhone {
  padding: 0 3px;
  background-color: #fff;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiName input,
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiPhone input {
  width: 100%;
  height: 100%;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
}
.sendMesgField .sendtargetwrap .notUseJohab .readBtnsWrap div.addIndiName {
  border-left: none;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers {
  display: block;
  width: 100%;
  border: solid 1px #aaa;
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead {
  display: block;
  background-color: #eaecf2;
  border-bottom: solid 1px #aaa;
  height: 30px;
  box-sizing: border-box;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead tr {
  width: 100%;
  height: 30px;
  font-size: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead tr th {
  display: block;
  border-left: solid 1px #ddd;
  box-sizing: border-box;
  height: 30px;
  text-align: center;
  font-size: 14px;
  line-height: 29px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2a2a2a;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead tr th i {
  font-size: 20px;
  color: #a8a8a8;
  vertical-align: middle;
  margin-top: -2px;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead tr th:first-child {
  width: 140px; /*2023/10/30 update jh*/
  border-left: none;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead tr th:nth-child(2) {
  width: calc(100% - 210px);
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers thead tr th:last-child {
  /*padding: 0px 0px 0px 10px;*/
  /*margin-right: 10px;*/
  width: 45px;
  text-align: left;
  padding-left: 5px;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody {
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden scroll;
  box-sizing: border-box;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr {
  width: 100%;
  height: 30px;
  font-size: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: solid 1px #ddd;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr .groupNname { /*update hj 230911*/
  border-left: none;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr td {
  display: block;
  height: 30px;
  line-height: 29px;
  box-sizing: border-box;
  padding: 0 5px; /*update hj 230911*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #777;
  border-left: solid 1px #ddd; /*update hj 230911*/
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr td i {
  font-size: 20px;
  color: #a8a8a8;
  vertical-align: middle;
  margin-top: -2px;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr td:first-child {
  width: 147px;
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr td:nth-child(2) {
  width: calc(100% - 195px);
}
.sendMesgField .sendtargetwrap .notUseJohab table.tblReceivers tbody tr td:last-child {
  width: 35px;
  text-align: left;
  padding-left: 5px;
  /*padding: 0px 2px 0px 7px; !* 2023/10/30 update jh *!*/
}
.sendMesgField .sendtargetwrap .useJohab {
  display: none;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep {
  margin-bottom: 15px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep:last-child {
  margin-bottom: 0;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .step {
  font-size: 14px;
  line-height: 20px;
  word-spacing: -1px;
  margin-bottom: 5px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .step em {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  background-color: #333;
  color: #fff;
  font-weight: 700;
  font-family: Helvetica;
  font-size: 11px;
  padding: 0 5px;
  border-radius: 3px;
  margin-right: 3px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .step em i {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-family: Helvetica;
  padding-left: 8px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .step em i::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  display: inline-block;
  width: 1px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .btn_sample {
  display: block;
  height: 40px;
  background-color: #eaecf2;
  border: solid 1px #aaa;
  border-radius: 6px;
  text-align: center;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .btn_sample span {
  position: relative;
  display: inline-block;
  line-height: 39px;
  color: #555;
  font-weight: 700;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .btn_sample span::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  left: -20px;
  background: url(../img/icon/ico_excel_c.svg) no-repeat 0 2px/18px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .btn_inspecterr {
  display: block;
  height: 40px;
  width: 100%;
  background: orangered;
  border: solid 1px #d03800;
  border-radius: 6px;
  text-align: center;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .btn_inspecterr span {
  position: relative;
  display: inline-block;
  line-height: 39px;
  color: #fff;
  font-weight: 700;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .btn_inspecterr span::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  left: -22px;
  background: url(../img/icon/ico_inspect.svg) no-repeat 50%/18px;
  filter: invert(100%);
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults {
  height: 80px;
  border: solid 1px #aaa;
  border-radius: 10px 10px 0 0;
  padding: 0 7px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer; /*update hj 230825*/
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li:first-child {
  border-bottom: dashed 1px #aaa;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li span,
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li strong {
  display: inline-block;
  line-height: 39px;
  height: 40px;
  color: #555;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li span {
  width: 60px;
  font-size: 13px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li strong {
  width: calc(100% - 60px);
  font-weight: 400;
  text-align: right;
  font-size: 15px;
}
.sendMesgField .sendtargetwrap .useJohab .johabstep .readresults li strong em {
  font-family: Helvetica;
  font-weight: 700;
  font-size: 15px;
}
.sendMesgField .sendtargetwrap .receiversNumber {
  width: 100%;
  height: 40px;
  border-radius: 0 0 10px 10px;
  border: solid 1px #aaa;
  border-left-color: #575b5e;
  border-bottom-color: #575b5e;
  margin-top: -1px;
  height: 40px;
  /*cursor: pointer;*/ /*update hj 230824*/
  background-color: #575b5e;
  padding: 0 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sendMesgField .sendtargetwrap .receiversNumber button.goCallBlockListx {
  width: 133px;
  background: #EAECF2;
  margin-right: -8px;
  border-radius: 0 0px 10px 0;
  border: 1px solid #aaa;
  /*margin-top: -1px; 230907 kh */
  height: calc(100% + 2px);
  color: #2A2A2A;
  text-align: center;
  font-size: 13px;
  line-height: 40px;
  padding: 0 5px;
  letter-spacing: -2.2px; /* update 2023/10/11 lyh */
}
.sendMesgField .sendtargetwrap .receiversNumber button.goCallBlockListx:before {
  content: "";
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  background: url(../img/icon/settings-ico.svg);
  background-size: 20px;
  margin-right: 5px;
}
.sendMesgField .sendtargetwrap .receiversNumber span,
.sendMesgField .sendtargetwrap .receiversNumber strong {
  display: inline-block;
  line-height: 39px;
  height: 40px;
  color: #fff;
}
.sendMesgField .sendtargetwrap .receiversNumber span {
  width: 60px;
  font-size: 13px;
  letter-spacing: -2.2px; /* update 2023/10/11 lyh */
}
.sendMesgField .sendtargetwrap .receiversNumber strong {
  width: calc(100% - 60px);
  font-weight: 400;
  text-align: right;
  font-size: 16px;
  padding-right: 10px;
}
.sendMesgField .sendtargetwrap .receiversNumber strong em {
  font-family: Helvetica;
  font-weight: 700;
  font-size: 20px;
}
.sendMesgField .sendtargetwrap .mbtns {
  padding-top: 15px;
}
.sendMesgField .sendschedulewrap {
  border-bottom: solid 0 #e9ecef;
  padding: 20px 0 0;
}
.sendMesgField .sendschedulewrap h3.tit {
  padding: 0 15px;
  margin-bottom: 20px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sendMesgField .sendschedulewrap h3.tit strong {
  display: inline-block;
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  margin-right: 10px;
}
.sendMesgField .sendschedulewrap .settingwrap {
  padding: 10px 0;
  margin: 0 15px 20px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 10px 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.sendMesgField .sendschedulewrap .settingwrap .titchk {
  min-width: 100px;
}
.sendMesgField .sendschedulewrap .settingwrap .schwrap {
  height: 30px;
  text-align: left;
  flex: 1;
}
.sendMesgField .sendschedulewrap .settingwrap .schwrap input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  appearance: none;
  background-color: #f2f2f2;
  text-align: center;
  border-radius: 4px;
}
.sendMesgField .sendschedulewrap .settingwrap .schwrap:first-child {
  min-width: 55%;
}
.sendMesgField .sendseperatewrap {
  border-bottom: solid 0 #e9ecef;
  padding: 00px 0 20px;
}
.sendMesgField .sendseperatewrap h3.tit {
  padding: 0 15px;
  margin-bottom: 20px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sendMesgField .sendseperatewrap h3.tit strong {
  display: inline-block;
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  margin-right: 10px;
}
.sendMesgField .sendseperatewrap .settingwrap {
  padding: 10px 0;
  margin: 0 15px 20px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 10px 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.sendMesgField .sendseperatewrap .settingwrap .titchk {
  min-width: 100px;
  flex: 1;
  display: inline-block;
}
.sendMesgField .sendseperatewrap .settingwrap .sepwrap {
  height: 30px;
  text-align: left;
  flex: 1;
  min-width: calc(50% - 60px);
  letter-spacing: -1.1px; /* update 2023/10/11 lyh */
}
.sendMesgField .sendseperatewrap .settingwrap .sepwrap #sepSendTime { /*update hj 230907*/
  width: 68% !important;  /* update 2023/10/11 lyh */
}
.sendMesgField .sendseperatewrap .settingwrap .sepwrap input {
  height: 100%;
  width: 80%;
  border: none;
  outline: none;
  appearance: none;
  background-color: #f2f2f2;
  text-align: right; /*update hj 230830*/
  border-radius: 4px;
  padding: 8px; /*update hj 230830*/
}
.sendMesgField .sendseperatewrap .settingwrap .sepwrap input::-webkit-inner-spin-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.sendMesgField .sendseperatewrap .settingwrap .sepwrap input::placeholder {
  text-align: right;
  padding-right: 8px; /*update hj 230830*/
}
.sendMesgField .pd25 {
  padding-left: 25px;
}

/* 모바일 경우 스크롤바 영역이 없어서... 헐..*/
body.mobile table.tblReceivers thead tr th:first-child {
  width: 120px !important;
  border-left: none;
}
body.mobile table.tblReceivers thead tr th:nth-child(2) {
  width: calc(100% - 150px) !important;
}
body.mobile table.tblReceivers thead tr th:last-child {
  width: 30px !important;
  text-align: center !important;
  padding: 0 !important;
}
body.mobile table.tblReceivers tbody tr td:first-child {
  width: 120px !important;
  border-left: none;
}
body.mobile table.tblReceivers tbody tr td:nth-child(2) {
  width: calc(100% - 150px) !important;
}
body.mobile table.tblReceivers tbody tr td:last-child {
  width: 30px !important;
  text-align: center !important;
  padding: 0 !important;
}

/* ***************************
 * 문자 발송창의 미리보기화면
 * (발송결과의 미리보기화면과 다름)
 *************************** */
.messagePreview {
  max-width: 480px;
  margin: auto;
}
.messagePreview .sendMesgField {
  /*height: calc(75vh - 150px);   !* update 2023/09/01 lyh *!*/
}
.messagePreview .sendMesgField .middlesendbox {
  border-bottom: none;
  padding-bottom: 0;
  /*height: calc(100% - 20px);*/    /* update 2023/09/01 lyh */
}
.messagePreview .sendMesgField .middlesendbox .mesgTitle {
  line-height: 37px;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  word-spacing: -2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.messagePreview .sendMesgField .middlesendbox .sendboxTextWrap {
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.messagePreview .sendMesgField .middlesendbox .sendboxTextWrap .photoBody {
  height: inherit;  /* update 2023/09/01 kh */
  border-bottom: solid 1px #777;
}
.messagePreview .sendMesgField .middlesendbox .sendboxTextWrap .photoBody img {
  width: 100%;
  /*height: 100%;  !* update 2023/09/01 kh *!*/
  -o-object-fit: cover;
  object-fit: cover;
}
.messagePreview .sendMesgField .middlesendbox .sendboxTextWrap .mesgBody {
  height: 100%;
  overflow: hidden auto;
  padding: 10px;
  min-height: 550px;  /* update 2023/09/01 lyh */
}
.messagePreview .sendMesgField .middlesendbox .sendboxTextWrap .mesgBody .mesgContent {
  font-size: 16px;
  line-height: 1.4em;
  word-spacing: -2px;
  white-space: break-spaces;    /* update 2023/08/31 lyh */
}
.messagePreview .diffview {
  height: 60px;
  padding: 0 15px;
  color: #fff;
  line-height: 60px;
  font-size: 13px;
  background-color: #3a3d57;
  margin-top: 25px;   /* update 2023/09/01 lyh */
}

label.iptbefore {
  min-width: 110px;
  padding-left: 10px;
}

.msgnotix {
  padding-left: 25px;
  font-size: 12px;
  color: #f00;
}

.settingwrap + .msgnotix {
  margin-top: -20px;
  margin-bottom: 20px;
}