@charset "UTF-8";
/* *******************************************************
 *
 * 본 파일은 웹사이트 전체에 영향을 주는 것으로
 * 되도록 본파일은 건들지 말고 캐스캐이딩(상송)받아 쓰도록 하세요
 *
 * filename : common.css
 * description :
 * - 공통 컴포넌트 스타일, 모든 페이지에서 사용 CSS
 * - 외부라이브러리에서 사용하는것들 커스터마이징 포함
 *
******************************************************** */
/* ***************************
 * 이게보이면안됨
 *************************** */
.todo {
  background-color: red;
  font-size: 50px;
  font-weight: bold;
  font-family: Helvetica;
  text-align: center;
  color: white;
}

/* ***************************
 * 공통 (다이얼로그창에서쓰는 코드스니펫)
 *************************** */
.codesnip {
  display: none;
}

.codewrap {
  position: relative;
  margin: 0 auto;
  padding-top: 10px;
  min-width: 230px;
  max-width: 330px;
  text-align: left;
}

/* ***************************
 * 버튼 : 페이지버튼 (pbtns)
 *************************** */
div.pbtns {
  padding: 0 15px 20px;
}
div.pbtns.mx360 {
  max-width: 360px;
  margin: auto !important;
}
div.pbtns.kakao {
  margin: 24px auto 0 auto;
  max-width: 420px;
  gap: 16px;
  border-radius: 0;
}
div.pbtns.kakao .btns {
  border-radius: 0;
  gap: 16px;
  display: flex;
}
div.pbtns.kakao .btns .btn {
  border-radius: 0 !important;
  flex: 1;
}
div.pbtns.kakao .btns .btn.kakao-sign {
  max-width: 134px;
  background: #FCEC5D;
  color: #000;
}
div.pbtns.kakao .btns .btn.kakao-sign:before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../img/sub/kakao/ch.svg) no-repeat;
  background-size: 18px;
  position: relative;
  margin-right: 10px;
  top: 3px;
  display: inline-flex;
}
div.pbtns.fullwidth {
  padding: 0;
  margin: 0 -20px;
  width: 50%; /*update hj 230825*/
  margin: auto; /*update hj 230825*/
}

div.pbtns.left {
  margin: 0 -17px;
  width: 50%;
  /*margin: auto; !*update hj 230825*!*/
}

div.pbtns.fullwidth.pdbt30 {
  padding-bottom: 30px;
}
div.pbtns.fullwidth div.btns {
  border-radius: 0;
}
div.pbtns.fullwidth div.btns button.btn,
div.pbtns.fullwidth div.btns a.btn {
  border-radius: 0;
  text-align: center;
}
div.pbtns.fullwidth div.btns button.btn:first-child,
div.pbtns.fullwidth div.btns a.btn:first-child {
  border-radius: 0;
  border-left: 0;
}
div.pbtns.fullwidth div.btns button.btn:last-child,
div.pbtns.fullwidth div.btns a.btn:last-child {
  border-radius: 0;
  border-right: 0;
}
div.pbtns div.btns {
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
div.pbtns div.btns button.btn,
div.pbtns div.btns a.btn {
  flex: 1;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  height: 60px;
  line-height: 59px;
  font-size: 16px;
  word-spacing: -0.07em;
  font-weight: 700;
  background-color: #fff;
}
div.pbtns div.btns button.btn.bd0,
div.pbtns div.btns a.btn.bd0 {
  border: 0;
}
div.pbtns div.btns button.btn.bd1,
div.pbtns div.btns a.btn.bd1 {
  border: 1px solid #777;
}
div.pbtns div.btns button.btn.csx,
div.pbtns div.btns a.btn.csx {
  font-size: 16px;
}
div.pbtns div.btns button.btn:first-child,
div.pbtns div.btns a.btn:first-child {
  border-radius: 10px 0 0 10px;
}
div.pbtns div.btns button.btn:nth-child(2),
div.pbtns div.btns a.btn:nth-child(2) {
  border-right: 0;
  border-left: 0;
}
div.pbtns div.btns button.btn:last-child,
div.pbtns div.btns a.btn:last-child {
  border-radius: 0 10px 10px 0;
}
div.btns button.btn.fullradius{ /* create 2023/09/13 jh */
  border-radius: 10px !important;
}
div.pbtns div.btns button.btn.white,
div.pbtns div.btns a.btn.white {
  background-color: #fff;
  border-color: #777;
  color: #222 !important;
}
div.pbtns div.btns button.btn.gray,
div.pbtns div.btns a.btn.gray {
  background-color: #969DAC;
  border-color: #969DAC;
  color: #fff !important;
}
div.pbtns div.btns button.btn.blue,
div.pbtns div.btns a.btn.blue {
  background-color: #1976D2;
  border-color: #1976D2;
  color: #fff !important;
}
div.pbtns.mypage {
  max-width: 580px;
  margin: auto;
}
div.pbtns.mypage .btns {
  gap: 16px;
  border-radius: 0 !important;
}
div.pbtns.mypage .btns button,
div.pbtns.mypage .btns a {
  border-radius: 0 !important;
}
div.pbtns.mypage .btns button {
  min-width: 320px;
}
div.pbtns.mypage-submit, div.pbtns.ctspage-submit, div.pbtns.payment-submit {
  max-width: 420px;
  margin: auto;
  padding: 0;
}
div.pbtns.mypage-submit .btns, div.pbtns.ctspage-submit .btns, div.pbtns.payment-submit .btns {
  border-radius: 6px !important;
  gap: 16px;
}
div.pbtns.mypage-submit .btns button,
div.pbtns.mypage-submit .btns a, div.pbtns.ctspage-submit .btns button,
div.pbtns.ctspage-submit .btns a, div.pbtns.payment-submit .btns button,
div.pbtns.payment-submit .btns a {
  border-radius: 6px !important;
  font-size: 16px;
}
div.pbtns.bbsdetail {
  max-width: 580px;
  margin: auto;
}
div.pbtns.bbsdetail .btns {
  gap: 16px;
  border-radius: 0 !important;
}
div.pbtns.bbsdetail .btns button,
div.pbtns.bbsdetail .btns a {
  border-radius: 0 !important;
}
div.pbtns.bbsdetail .btns button {
  min-width: 200px;
}

/* ***************************
 * 버튼 : 화면중앙에 들어가는 중간(middle)사이즈 타입_1(mbtn1)
 * color : blue, gray, black,orange
 * 색깔 채우려면 fill 클래스
 * @example
 * class="mbtn1"             - 기본
 * class="mbtn1 blue"        - 파란색 버튼
 * class="mbtn1 blue fill"   - 바탕이 바란색, 폰트 흰색 버튼
 *************************** */
button.mbtn1,
a.mbtn1 {
  display: inline-block !important;
  height: 50px !important;
  border: solid 1px #222 !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
button.mbtn1 span,
a.mbtn1 span {
  white-space: nowrap !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #222 !important;
  text-align: center !important;
  line-height: 49px !important;
  text-align: center !important;
}
button.mbtn1.btn-type40,
a.mbtn1.btn-type40 {
  height: 40px !important;
  padding: 0 40px !important;
  border-radius: 4px !important;
}
button.mbtn1.btn-type40 span,
a.mbtn1.btn-type40 span {
  line-height: 39px !important;
  font-size: 14px;
}
button.mbtn1.blue,
a.mbtn1.blue {
  border-color: #1976D2 !important;
}
button.mbtn1.blue span,
a.mbtn1.blue span {
  color: #1976d2 !important;
}
button.mbtn1.blue.fill,
a.mbtn1.blue.fill {
  background-color: #1976D2 !important;
  color: #fff !important;
}
button.mbtn1.blue.fill span,
a.mbtn1.blue.fill span {
  color: #fff !important;
}
button.mbtn1.blue.mb,
a.mbtn1.blue.mb {
  background-color: #5B90F7 !important;
  border-color: #5B90F7 !important;
}
button.mbtn1.gray,
a.mbtn1.gray {
  border-color: #788490 !important;
}
button.mbtn1.gray span,
a.mbtn1.gray span {
  color: #56606a !important;
}
button.mbtn1.gray.fill,
a.mbtn1.gray.fill {
  background-color: #788490 !important;
  color: #fff !important;
}
button.mbtn1.gray.fill span,
a.mbtn1.gray.fill span {
  color: #fff !important;
}
button.mbtn1.black,
a.mbtn1.black {
  border-color: #222 !important;
}
button.mbtn1.black span,
a.mbtn1.black span {
  color: #222 !important;
}
button.mbtn1.black.fill,
a.mbtn1.black.fill {
  background-color: #222 !important;
  color: #fff !important;
}
button.mbtn1.black.fill span,
a.mbtn1.black.fill span {
  color: #fff !important;
}
button.mbtn1.green,
a.mbtn1.green {
  border-color: #09aa5c !important;
}
button.mbtn1.green span,
a.mbtn1.green span {
  color: #09aa5c !important;
}
button.mbtn1.green.fill,
a.mbtn1.green.fill {
  background-color: #09aa5c !important;
  color: #fff !important;
}
button.mbtn1.green.fill span,
a.mbtn1.green.fill span {
  color: #fff !important;
}
button.mbtn1.orange,
a.mbtn1.orange {
  border-color: #ff7a00 !important;
}
button.mbtn1.orange span,
a.mbtn1.orange span {
  color: #ff7a00 !important;
}
button.mbtn1.orange.fill,
a.mbtn1.orange.fill {
  background-color: #ff7a00 !important;
}
button.mbtn1.orange.fill span,
a.mbtn1.orange.fill span {
  color: #fff !important;
}

div.mbtns {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 3px;
}
div.mbtns.call-manage {
  justify-content: flex-end;
}
div.mbtns.call-manage.fullwidth a {
  max-width: 100%;
}
div.mbtns.call-manage a {
  /*border-radius: !important;*/
  height: 40px !important;
  max-width: 320px;
}
div.mbtns.call-manage a span {
  font-size: 14px !important;
  line-height: 39px !important;
}
div.mbtns button.mbtn1,
div.mbtns a.mbtn1 {
  flex: 1 1;
}

div.mbtns + div.mbtns {
  margin-top: 6px;
}

.mbtn1 + .mbtn1 {
  margin-left: 10px;
}

/* ***************************
 * 버튼 : 마이페이지등 상단 Heros색에 따라 검은색(20%)알파값 버튼
 * @example
 *	<div class="alphabtns">
 *	   <a class="alphabtn" href="memberChangeBusiness.html">기업회원 전환</a>
 *	   <a class="alphabtn" href="memberChangeElection.html">선거회원 전환</a>
 *	</div>
 *************************** */
div.alphabtns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
  background-clip: border-box;
}
div.alphabtns .alphabtn {
  border-radius: 4px;
  display: block;
  flex: 1 1;
  padding: 9px 0;
  background: #1976D2;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  color: #fff;
  width: 100%;
}
div.alphabtns .alphabtn:hover {
  background: #000;
}
div.alphabtns .alphabtn:nth-child(1), div.alphabtns .alphabtn:nth-child(2) {
  flex: 1 1;
  max-width: 100%;
}
div.alphabtns .alphabtn:only-child {
  flex: 1 1;
  max-width: 320px;
}

/* ***************************
 * jconfirm 테마
 *************************** */
.jconfirm.jconfirm-munjaking .jconfirm-bg {
  background-color: rgba(0, 0, 0, 0.7);
}
.jconfirm.jconfirm-munjaking .jconfirm-box {
  padding: 0;
  border-radius: 10px;
}
.jconfirm.jconfirm-munjaking .jconfirm-box .jconfirm-title-c {
  text-align: center;
  padding: 15px 15px 3px;
}
.jconfirm.jconfirm-munjaking .jconfirm-box .jconfirm-title-c .jconfirm-title {
  font-size: 20px;
  font-weight: 700;
  width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #222;
}
.jconfirm.jconfirm-munjaking .jconfirm-box .jconfirm-content {
  text-align: center;
  padding: 15px 15px 0;
  font-size: 16px;
  font-weight: 400;
}
.jconfirm.jconfirm-munjaking .jconfirm-box .jconfirm-buttons {
  padding: 0;
  height: 50px;
  display: flex;
}
.jconfirm.jconfirm-munjaking .jconfirm-box .jconfirm-buttons button {
  border: 0;
  border-top: solid 1px #efeff0;
  margin: 0;
  border-radius: 0;
  background-color: #fff !important;
  width: 100%;
  height: 50px;
  line-height: 40px;
  color: #222;
}
.jconfirm.jconfirm-munjaking .jconfirm-box .jconfirm-buttons button:last-child {
  border-left: solid 1px #efeff0;
}

/* ***************************
 *
 * 공지사항 식 리스트뷰 class="DesignLineListTypeA"
 *
 *************************** */
article.DesignLineListTypeA {
  border-top: solid 1px #eaebf0;
  padding: 20px 0px 15px 0px;
  /* 리스트 없을 경우 */
}
article.DesignLineListTypeA .listNone {
  height: 300px;
  background: #fff;     /* update 2023/09/07 lyh*/
  border-bottom: 1px solid #ddd;  /* update 2023/09/07 lyh*/
}
article.DesignLineListTypeA .listNone span {
  position: relative;
  height: 30px;
  line-height: 30px;
  top: calc(50% + 15px);
  font-size: 14px;
  color: #777;
  display: block;
  text-align: center;
}
article.DesignLineListTypeA .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;
}
article.DesignLineListTypeA .listTR .post_item {
  display: block;
  padding: 10px 40px;
  border-bottom: 1px dotted #eaebf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
article.DesignLineListTypeA .listTR .post_item .titbox {
  display: flex;
  max-width: calc(100% - 200px);
}
article.DesignLineListTypeA .listTR .post_item .titbox .tit {
  flex: 0 1 auto;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #292a2e;
}
article.DesignLineListTypeA .listTR .post_item .titbox .new {
  display: flex;
  flex: 0 0 auto;
  font-size: 17px;
  margin-left: 4px;
  color: #ff6200;
  align-items: flex-end;
  justify-content: flex-end;
}
article.DesignLineListTypeA .listTR .post_item .info {
  min-width: 200px;
  display: flex;
  text-align: right;
  align-items: center;
  justify-content: end;
}
article.DesignLineListTypeA .listTR .post_item .info .icon {
  display: inline-block;
  margin-right: 1px;
  padding: 3px 5px 2px;
  border: 1px solid #8F8F8F;
  border-radius: 4px;
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
  color: #8F8F8F;
  vertical-align: top;
  order: 1;
  margin-left: 48px;
  letter-spacing: -0.5px; /* update 2023/10/13 lyh */
}
article.DesignLineListTypeA .listTR .post_item .info .date {
  display: inline-block;
  font-size: 12px;
  line-height: 17px;
  color: #8F8F8F;
  vertical-align: top;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Apple SD Gothic Neo", sans-serif;
}

/* ***************************
 * 리스트 페이징처리
 *************************** */
.listPagination {
  margin-top: 30px; /*update hj 230825*/
  margin-bottom: 30px; /*update hj 230825*/
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 10px 4px;
  border: 0px solid #eaebf0;
  /*margin: auto;*/ /*update hj 230825*/
  max-width: 1000px;
}
.listPagination.auto {
  margin: 24px 0;
}
.listPagination button {
  position: relative;
  top: 0;
  width: auto;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #aaa;
  background-color: #fff;
  line-height: 9px;
  padding: 0 10px;
}
.listPagination button:disabled {
  opacity: 0.3;
}
.listPagination button.prev {
  left: 0;
  min-width: 40px;
}
.listPagination button.next {
  right: 0;
  min-width: 40px;
}
.listPagination .pages {
  position: relative;
  padding: 0 0px;
  text-align: center;
  justify-content: center;
  gap: 7px;
  display: flex;
}
.listPagination .pages ol {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
}
.listPagination .pages ol > li a {
  display: inline-block;
  color: #aaa;
  text-align: center;
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 28px;
  font-size: 15px;
}
.listPagination .pages ol > li a.current {
  font-weight: 700;
  color: #222;
}
.listPagination .pagekip {
  display: flex;
  margin: 12px 0 0;
  padding-top: 3px;
  border-top: 1px solid #eee;
}
.listPagination .pagekip button {
  flex: 1 1;
  position: relative;
  padding: 10px;
  line-height: 14px;
  color: #222;
}
.listPagination .pagekip button.first, .listPagination .pagekip button.last {
  min-width: 45px;
}
.listPagination .pagekip button:disabled {
  opacity: 0.3;
}
.listPagination .pagekip button span {
  display: inline-block;
  position: relative;
}
.listPagination .pagekip button span::before, .listPagination .pagekip button span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  background: url(../img/icon/paginghandler.svg) no-repeat 50%/contain;
}
.listPagination .pagekip button.first span::before {
  left: -20px;
  transform: rotate(180deg);
}
.listPagination .pagekip button.first span::after {
  display: none;
}
.listPagination .pagekip button.last span::before {
  display: none;
}
.listPagination .pagekip button.last span::after {
  right: -20px;
}
.listPagination .pagekip button.last::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 16px;
  background-color: #cacaca;
}

table + .listPagination {
  border: 0;
  border-bottom-width: 1px;
  border-radius: 0;
}

.sendlist_swipe_area + .listPagination,
.myMesgboxs + .listPagination {
  border-radius: 0;
}

/* ***************************
 * 리스트타입 FAQ
 *************************** */
article.DesignFAQList {
  padding: 15px 0;
  position: relative;
  /* 리스트 없을 경우 */
  /* 리스트 페이징처리 */
}
article.DesignFAQList:before {
  content: "";
  width: 100%;
  height: 60px;
  background-color: var(--color_bg_gray);
  position: absolute;
  left: 0;
  top: 0;
}
article.DesignFAQList.guide:before {
  display: none;
}
article.DesignFAQList h3.faq_category {
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  padding: 15px 0;
  color: #222;
}
article.DesignFAQList h3.faq_category .current_category {
  font-weight: 700;
}
article.DesignFAQList .qna_list {
  min-width: 275px;
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 0px;
}
article.DesignFAQList .qna_list .qna_item {
  border-top: 1px solid #eaebf0;
}
article.DesignFAQList .qna_list .qna_item.open button.btn_more .txt::after {
  transform: rotate(180deg);
}
article.DesignFAQList .qna_list .qna_item.open .answer_box {
  display: block;
}
article.DesignFAQList .qna_list .qna_item.open .answer_box img{
  width: 100%;   /* update 2023/09/05 lyh */
}
article.DesignFAQList .qna_list .qna_item:first-child {
  border-top: 0;
}
article.DesignFAQList .qna_list .qna_item:last-child .answer_box {
  border-radius: 0 0 10px 10px;
}
article.DesignFAQList .qna_list .qna_item button.btn_more {
  display: block;
  position: relative;
  width: 100%;
  padding: 17px 35px 15px 40px;
  text-align: left;
  border-radius: 10px 10px 0 0;
}
article.DesignFAQList .qna_list .qna_item button.btn_more .ico {
  position: absolute;
  top: 17px;
  left: 40px;
  font-family: Helvetica;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  color: #292a2e;
}
article.DesignFAQList .qna_list .qna_item button.btn_more .txt {
  display: block;
  position: relative;
  padding-right: 27px;
  font-size: 15px;
  line-height: 19px;
  color: #222;
  font-weight: 500;
  word-spacing: -1px;
  padding-left: 25px;
}
article.DesignFAQList .qna_list .qna_item button.btn_more .txt::after {
  background: url(../img/icon/ico_dropdown.svg) no-repeat center right/contain;
  width: 15px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 10px;
  content: "";
}
article.DesignFAQList .qna_list .qna_item .answer_box {
  border-top: solid 1px #dadada;
  background-color: #f3f5f7;
  padding: 15px;
  display: none;
  position: relative;
}
article.DesignFAQList .qna_list .qna_item .answer_box .misc {
  position: relative;
  display: block;
  padding-left: 40px;
}
article.DesignFAQList .qna_list .qna_item .answer_box .misc .ico {
  display: inline-block;
  font-family: Helvetica;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  color: #292a2e;
}
article.DesignFAQList .qna_list .qna_item .answer_box .misc .category {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 5px 2px;
  border: 1px solid #3781ff;
  border-radius: 11px;
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
  color: #0080ff;
  vertical-align: top;
}
article.DesignFAQList .qna_list .qna_item .answer_box .answer {
  line-height: 20px;
  color: #555;
  padding: 7px 40px 15px 40px;
}
article.DesignFAQList .listNone {
  height: 300px;
  background: #fff;     /* update 2023/09/07 lyh*/
  border-bottom: 1px solid #ddd;  /* update 2023/09/07 lyh*/
}
article.DesignFAQList .listNone span {
  position: relative;
  height: 30px;
  line-height: 30px;
  top: calc(50% + 15px);
  font-size: 14px;
  color: #777;
  display: block;
  text-align: center;
}
article.DesignFAQList .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;
}
article.DesignFAQList .listPagination {
  margin-top: 15px;
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 10px;
  max-width: 1000px;
  margin: 15px auto 0 auto;
}
article.DesignFAQList .listPagination .pages {
  position: relative;
  padding: 0 0px;
  text-align: center;
  gap: 7px;
  display: flex;
  justify-content: center;
}
article.DesignFAQList .listPagination .pages ol {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
}
article.DesignFAQList .listPagination .pages ol > li {
  flex: 1;
}
article.DesignFAQList .listPagination .pages ol > li a {
  display: inline-block;
  color: #aaa;
  text-align: center;
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 28px;
  font-size: 15px;
}
article.DesignFAQList .listPagination .pages ol > li a.current {
  font-weight: 700;
  color: #222;
}
article.DesignFAQList .listPagination .pages button {
  position: relative;
  top: 0;
  min-width: 32px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #aaa;
  background-color: #fff;
  line-height: 9px;
}
article.DesignFAQList .listPagination .pages button:disabled {
  opacity: 0.3;
}
article.DesignFAQList .listPagination .pages button.prev {
  left: 0;
}
article.DesignFAQList .listPagination .pages button.next {
  right: 0;
}
article.DesignFAQList .listPagination .pagekip {
  display: flex;
  margin: 12px 0 0;
  max-width: 150px;
  margin: 12px auto 0 auto;
  padding-top: 3px;
}
article.DesignFAQList .listPagination .pagekip button {
  flex: 1 1;
  position: relative;
  padding: 10px;
  line-height: 14px;
  color: #222;
}
article.DesignFAQList .listPagination .pagekip button:disabled {
  opacity: 0.3;
}
article.DesignFAQList .listPagination .pagekip button span {
  display: inline-block;
  position: relative;
}
article.DesignFAQList .listPagination .pagekip button span::before, article.DesignFAQList .listPagination .pagekip button span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  background: url(../img/icon/paginghandler.svg) no-repeat 50%/contain;
}
article.DesignFAQList .listPagination .pagekip button.first span::before {
  left: -20px;
  transform: rotate(180deg);
}
article.DesignFAQList .listPagination .pagekip button.first span::after {
  display: none;
}
article.DesignFAQList .listPagination .pagekip button.last span::before {
  display: none;
}
article.DesignFAQList .listPagination .pagekip button.last span::after {
  right: -20px;
}
article.DesignFAQList .listPagination .pagekip button.last::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 16px;
  background-color: #dcdee0;
}

/* ***************************
 * 리스트타입 : 회색바탕 라운드 리스트뷰 class="DesignRoundListTypeA"
 * @example
 * <article class="DesignRoundListTypeA">
 *  <div class="listTit"><h3><strong>타이틀들어가는곳</strong></h3></div>
 * 	<div class="listTR">TR들어가는곳</div>
 * 	<div class="listPagination">페이징 처리</div>
 * 	<div class="listNone">내역이 없어요</div>
 * </article>
 *************************** */
.DesignRoundListTypeA {
  border-top: solid 1px #aaa;
  margin-top: 15px;
  background-color: var(--color_bg_gray);
  /* 리스트 제목 */
  /* 리스트 Row */
  /* 리스트 페이징처리 */
  /* 리스트 없을 경우 */
}
.DesignRoundListTypeA.bd0 {
  border-top: 0;
}
.DesignRoundListTypeA.mgt24 {
  margin-top: 24px;
}
.DesignRoundListTypeA.receiverNolist, .DesignRoundListTypeA.payment, .DesignRoundListTypeA.kakao {
  background: #fff;
  border-top: 0;
}
.DesignRoundListTypeA.receiverNolist .listTit.returnlist, .DesignRoundListTypeA.receiverNolist .listTit.cm, .DesignRoundListTypeA.payment .listTit.returnlist, .DesignRoundListTypeA.payment .listTit.cm, .DesignRoundListTypeA.kakao .listTit.returnlist, .DesignRoundListTypeA.kakao .listTit.cm {
  background: #505153;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
}
.DesignRoundListTypeA.receiverNolist .listTit.returnlist h3.tit, .DesignRoundListTypeA.receiverNolist .listTit.cm h3.tit, .DesignRoundListTypeA.payment .listTit.returnlist h3.tit, .DesignRoundListTypeA.payment .listTit.cm h3.tit, .DesignRoundListTypeA.kakao .listTit.returnlist h3.tit, .DesignRoundListTypeA.kakao .listTit.cm h3.tit {
  color: #fff;
  font-size: 12px;
}
.DesignRoundListTypeA.receiverNolist .listTit.returnlist h3.tit strong, .DesignRoundListTypeA.receiverNolist .listTit.cm h3.tit strong, .DesignRoundListTypeA.payment .listTit.returnlist h3.tit strong, .DesignRoundListTypeA.payment .listTit.cm h3.tit strong, .DesignRoundListTypeA.kakao .listTit.returnlist h3.tit strong, .DesignRoundListTypeA.kakao .listTit.cm h3.tit strong {
  font-size: 12px;
  color: #fff;
  font-weight: 400;
}
.DesignRoundListTypeA.receiverNolist .listTit.returnlist .totalamount, .DesignRoundListTypeA.receiverNolist .listTit.cm .totalamount, .DesignRoundListTypeA.payment .listTit.returnlist .totalamount, .DesignRoundListTypeA.payment .listTit.cm .totalamount, .DesignRoundListTypeA.kakao .listTit.returnlist .totalamount, .DesignRoundListTypeA.kakao .listTit.cm .totalamount {
  color: #fff;
}
.DesignRoundListTypeA.receiverNolist .listTit.returnlist .totalamount em, .DesignRoundListTypeA.receiverNolist .listTit.cm .totalamount em, .DesignRoundListTypeA.payment .listTit.returnlist .totalamount em, .DesignRoundListTypeA.payment .listTit.cm .totalamount em, .DesignRoundListTypeA.kakao .listTit.returnlist .totalamount em, .DesignRoundListTypeA.kakao .listTit.cm .totalamount em {
  font-weight: 700;
  font-size: 18px;
  font-family: Helvetica;
}
.DesignRoundListTypeA.sendTest { /*create hj 230823*/
  background-color: #fff;
  border-top: 0;
}
.DesignRoundListTypeA > .listTit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0 10px;
}

.DesignRoundListTypeA.sendTest > .listTit { /*create hj 230823*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #E9ECEF;
}

.DesignRoundListTypeA > .listTit h3.tit {
  display: flex;
  align-items: center;
  font-size: 0;
}
.DesignRoundListTypeA > .listTit h3.tit strong {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #222;
  line-height: 30px;
}
.DesignRoundListTypeA > .listTit h3.tit span {
  position: relative;
  display: inline-block;
  padding-left: 16px;
  font-size: 14px;
  line-height: 30px;
  color: #555;
  box-sizing: border-box;
}
.DesignRoundListTypeA > .listTit h3.tit span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: #ccc;
  position: absolute;
  top: 8px;
  left: 8px;
}
.DesignRoundListTypeA > .listTit h3.tit span em {
  font-family: Helvetica;
}
.DesignRoundListTypeA > .listTit .btns {
  height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.DesignRoundListTypeA > .listTit .btns a.listdown,
.DesignRoundListTypeA > .listTit .btns button.listdown {
  position: relative;
  line-height: 29px;
  border: solid 1px #ccc;
  box-shadow: var(--shadow_content);
  padding: 0 7px 0 26px;
  background-color: #fff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
}
.DesignRoundListTypeA > .listTit .btns a.listdown:before,
.DesignRoundListTypeA > .listTit .btns button.listdown:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 5px;
  background: url(../img/icon/ico_excel_c.svg) no-repeat 0 2px/18px;
}

.DesignRoundListTypeA > .listTit .btns a.refreshBtn,
.DesignRoundListTypeA > .listTit .btns button.refreshBtn { /*update hj 230822*/
  position: relative;
  line-height: 29px;
  border: solid 1px #ccc;
  box-shadow: var(--shadow_content);
  padding: 0 7px 0 26px;
  background-color: #fff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
}
.DesignRoundListTypeA > .listTit .btns a.refreshBtn:before,
.DesignRoundListTypeA > .listTit .btns button.refreshBtn:before { /*update hj 230822*/
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 5px;
  background: url(../img/icon/ico_refresh.svg) no-repeat 0 2px/18px;
}

.DesignRoundListTypeA > .listTR {
  min-width: 275px;
  border-radius: 0px;
  background-color: #fff;
  margin-bottom: 1px;
  box-sizing: border-box;
}
.DesignRoundListTypeA > .listTR a, .DesignRoundListTypeA > .listTR div.hdswrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.DesignRoundListTypeA > .listTR span {
  flex: 1;
  text-align: center;
}
.DesignRoundListTypeA > .listPagination {
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 10px 4px;
  border: 0px solid #eaebf0;
  margin: auto;
  max-width: 1000px;
}
.DesignRoundListTypeA > .listPagination .pages {
  position: relative;
  padding: 0 0px;
  text-align: center;
  gap: 7px;
  display: flex;
}
.DesignRoundListTypeA > .listPagination .pages ol {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
}
.DesignRoundListTypeA > .listPagination .pages ol > li a {
  display: inline-block;
  color: #aaa;
  text-align: center;
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 28px;
  font-size: 15px;
}
.DesignRoundListTypeA > .listPagination .pages ol > li a.current {
  font-weight: 700;
  color: #222;
}
.DesignRoundListTypeA > .listPagination .pages button {
  position: relative;
  top: 0;
  width: auto;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #aaa;
  background-color: #fff;
  line-height: 9px;
}
.DesignRoundListTypeA > .listPagination .pages button:disabled {
  opacity: 0.3;
}
.DesignRoundListTypeA > .listPagination .pages button.prev {
  left: 0;
}
.DesignRoundListTypeA > .listPagination .pages button.next {
  right: 0;
}
.DesignRoundListTypeA > .listPagination .pages button.first, .DesignRoundListTypeA > .listPagination .pages button.last {
  min-width: 45px;
}
.DesignRoundListTypeA > .listPagination .pagekip {
  display: flex;
  margin: 12px 0 0;
  padding-top: 3px;
  border-top: 1px solid #f0f2f4;
}
.DesignRoundListTypeA > .listPagination .pagekip button {
  flex: 1 1;
  position: relative;
  padding: 10px;
  line-height: 14px;
  color: #222;
}
.DesignRoundListTypeA > .listPagination .pagekip button:disabled {
  opacity: 0.3;
}
.DesignRoundListTypeA > .listPagination .pagekip button span {
  display: inline-block;
  position: relative;
}
.DesignRoundListTypeA > .listPagination .pagekip button span::before, .DesignRoundListTypeA > .listPagination .pagekip button span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  background: url(../img/icon/paginghandler.svg) no-repeat 50%/contain;
}
.DesignRoundListTypeA > .listPagination .pagekip button.first span::before {
  left: -20px;
  transform: rotate(180deg);
}
.DesignRoundListTypeA > .listPagination .pagekip button.first span::after {
  display: none;
}
.DesignRoundListTypeA > .listPagination .pagekip button.last span::before {
  display: none;
}
.DesignRoundListTypeA > .listPagination .pagekip button.last span::after {
  right: -20px;
}
.DesignRoundListTypeA > .listPagination .pagekip button.last::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 16px;
  background-color: #dcdee0;
}
.DesignRoundListTypeA > .listNone {
  height: 300px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  /*margin-bottom: 20px; !*update hj 230906*!*/
}
.DesignRoundListTypeA > .listNone span {
  position: relative;
  height: 30px;
  line-height: 30px;
  top: calc(50% + 15px);
  font-size: 14px;
  color: #777;
  display: block;
  text-align: center;
}
.DesignRoundListTypeA > .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;
}

/* ***************************
 * 리스트 타입 : 테이블 형태의 목록 class="DesignTableListTypeA"
 * @example
 * <article class="DesignRoundListTypeA">
 *  <div class="listTit"><h3><strong>타이틀들어가는곳</strong></h3></div>
 * 	<table class="fixed">테이블들어가는곳</table>
 * </article>
 *************************** */
article.DesignTableListTypeA {
  position: relative;
  padding-top: 15px;
  /* 리스트 제목 */
  /* 리스트 테이블 */
}
article.DesignTableListTypeA > .listTit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px 10px;
}
article.DesignTableListTypeA > .listTit h3.tit {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
}
article.DesignTableListTypeA > .listTit h3.tit x strong {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #222;
  line-height: 30px;
  word-spacing: -1.6px;
}
article.DesignTableListTypeA > .listTit h3.tit span {
  position: relative;
  display: inline-block;
  padding-left: 16px;
  font-size: 14px;
  line-height: 30px;
  color: #555;
  box-sizing: border-box;
}
article.DesignTableListTypeA > .listTit h3.tit span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: #ccc;
  position: absolute;
  top: 8px;
  left: 8px;
}
article.DesignTableListTypeA > .listTit h3.tit span em {
  font-weight: bold;
  font-family: Helvetica;
}
article.DesignTableListTypeA > .listTit .btns {
  height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
article.DesignTableListTypeA > .listTit .btns a.listdown,
article.DesignTableListTypeA > .listTit .btns button.listdown {
  position: relative;
  line-height: 29px;
  border: solid 1px #ccc;
  box-shadow: var(--shadow_content);
  padding: 0 7px 0 26px;
  background-color: #fff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
}
article.DesignTableListTypeA > .listTit .btns a.listdown:before,
article.DesignTableListTypeA > .listTit .btns button.listdown:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 5px;
  background: url(../img/icon/ico_excel_c.svg) no-repeat 0 2px/18px;
}
article.DesignTableListTypeA .tablewrap {
  width: 100%;
  font-size: 0;
  position: relative;
}
article.DesignTableListTypeA .tablewrap.scrollarea {
  overflow: scroll hidden;
}
article.DesignTableListTypeA .tablewrap table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
  background-clip: padding-box;
  border-top: solid 2px #1976d2;
}
article.DesignTableListTypeA .tablewrap table.fixed tbody th,
article.DesignTableListTypeA .tablewrap table.fixed tbody td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
article.DesignTableListTypeA .tablewrap table thead,
article.DesignTableListTypeA .tablewrap table tbody,
article.DesignTableListTypeA .tablewrap table th,
article.DesignTableListTypeA .tablewrap table td {
  position: relative;
  box-sizing: border-box;
  background-clip: padding-box;
  border-bottom: solid 1px #ccc;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4em;
}
article.DesignTableListTypeA .tablewrap table thead {
  background-color: #e6eef5;
}
article.DesignTableListTypeA .tablewrap table thead th,
article.DesignTableListTypeA .tablewrap table thead td {
  height: 40px;
  color: #222;
  font-size: 13px;
  border-top: 0;
  border-bottom: solid 1px #aaa;
  padding: 3px 7px;
}
article.DesignTableListTypeA .tablewrap table tbody {
  background-color: #fff;
}
article.DesignTableListTypeA .tablewrap table tbody th,
article.DesignTableListTypeA .tablewrap table tbody td {
  height: 40px;
  color: #555;
  font-size: 13px;
  padding: 3px 7px;
  word-spacing: -1.2px;
  border-color: #ecedf1;
}
article.DesignTableListTypeA .tablewrap table tbody th.l, article.DesignTableListTypeA .tablewrap table tbody th.left,
article.DesignTableListTypeA .tablewrap table tbody td.l,
article.DesignTableListTypeA .tablewrap table tbody td.left {
  text-align: left;
  padding-left: 5px;
}
article.DesignTableListTypeA .tablewrap table tbody th.r, article.DesignTableListTypeA .tablewrap table tbody th.right,
article.DesignTableListTypeA .tablewrap table tbody td.r,
article.DesignTableListTypeA .tablewrap table tbody td.right {
  text-align: right;
  padding-left: 5px;
}
article.DesignTableListTypeA .tablewrap table tbody th.noData,
article.DesignTableListTypeA .tablewrap table tbody td.noData {
  height: 500px;
  background: #f7f7f7;
}
article.DesignTableListTypeA .tablewrap table tbody th.noData span,
article.DesignTableListTypeA .tablewrap table tbody td.noData span {
  position: relative;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #777;
  display: block;
  text-align: center;
}
article.DesignTableListTypeA .tablewrap table tbody th.noData span::before,
article.DesignTableListTypeA .tablewrap table tbody td.noData 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;
}
article.DesignTableListTypeA .tablewrap table tbody th a,
article.DesignTableListTypeA .tablewrap table tbody td a {
  font-size: 13px;
  color: #1976d2;
}
article.DesignTableListTypeA .tablewrap table th.chktd,
article.DesignTableListTypeA .tablewrap table td.chktd {
  vertical-align: top;
  padding-top: 12px;
}

article.inspection{ /* create 23/09/12 jh */
  padding: 0 15px !important;
}

/* ***************************
 * 상세보기 타입A (공지, 상담글)
 *************************** */
section.detailTypeA {
  background-color: #fff;
  padding: 20px 20px 20px;
}
section.detailTypeA.notice_detail {
  background: #E9ECEF;
  padding: 24px;
  border-radius: 8px;
  margin-top: 24px;
}
section.detailTypeA.notice_detail div.titwrap {
  background: #fff;
  border-radius: 8px 8px 0px 0px;
  padding: 16px 24px;
}
section.detailTypeA.notice_detail article.contents {
  padding: 24px;
  border-radius: 0px 0px 8px 8px;
  background: #FFF;
}
section.detailTypeA div.titwrap {
  padding: 15px 0;
  border-bottom: solid 1px #ddd;
}
section.detailTypeA div.titwrap h3 {
  width: 100%;
  color: #222;
  font-size: 22px;
  font-weight: bold;
  word-spacing: -0.08em;
  line-height: 1.4em;
  font-weight: 700;
  word-break: break-all;
  padding-bottom: 5px;
}
section.detailTypeA div.titwrap time {
  font-style: normal;
  font-size: 13px;
  color: #aaa;
}
section.detailTypeA div.titwrap div.writerinfo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  min-width: 300px;
}
section.detailTypeA div.titwrap div.writerinfo > * {
  position: relative;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  margin-right: 14px;
}
section.detailTypeA div.titwrap div.writerinfo strong.name {
  font-size: 14px;
}
section.detailTypeA div.titwrap div.writerinfo span.wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: -7px;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ccc;
}
section.detailTypeA div.titwrap div.writerinfo span.wrap span.mail,
section.detailTypeA div.titwrap div.writerinfo span.wrap span.phone {
  color: #999;
  font-size: 13px;
}
section.detailTypeA div.titwrap div.writerinfo span.wrap span.mail i,
section.detailTypeA div.titwrap div.writerinfo span.wrap span.phone i {
  position: relative;
  top: 1.5px;
  font-size: 16px;
  margin-right: 2px;
}
section.detailTypeA article.contents {
  padding: 20px 16px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6em;
  color: #444;
  word-break: break-all;
  word-wrap: break-word;
}
section.detailTypeA article.contents p {
  padding-bottom: 1em;
}
section.detailTypeA article.contents > * {
  font-size: 15px;
  line-height: 1.6em;
  word-break: break-all;
  word-wrap: break-word;
}
section.detailTypeA article.contents img {
  width: 100% !important;
  border: 0;
}
section.detailTypeA article.contents ul.attachedfiles {
  padding-top: 15px;
  margin-top: 20px;
  border-top: dashed 1px #ddd;
}
section.detailTypeA article.resultcontents {
  background-color: #f4f4f4;
  border-radius: 10px;
  padding: 16px;
}
section.detailTypeA article.resultcontents div.respondent {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  min-width: 300px;
}
section.detailTypeA article.resultcontents div.respondent > * {
  position: relative;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  margin-right: 14px;
}
section.detailTypeA article.resultcontents div.respondent strong {
  font-size: 14px;
}
section.detailTypeA article.resultcontents div.respondent strong::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: -9px;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ccc;
}
section.detailTypeA article.resultcontents div.respondent time {
  font-style: normal;
  font-size: 13px;
  color: #aaa;
}
section.detailTypeA article.resultcontents div.reply {
  padding: 10px 0 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.6em;
  color: #666;
  word-break: break-all;
  word-wrap: break-word;
}
section.detailTypeA article.resultcontents div.reply p {
  padding-bottom: 1em;
}
section.detailTypeA article.resultcontents div.reply > * {
  color: #666;
  font-size: 15px;
  line-height: 1.6em;
  word-break: break-all;
  word-wrap: break-word;
}

div.ftwrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
div.ftwrap.alone {
  justify-content: flex-end;
}
div.ftwrap a, div.ftwrap button {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  /* 16.31px */
  border-radius: 20px;
  border: 1px solid #C7CBCF;
  padding: 4px 10px;
}
div.ftwrap a + button, div.ftwrap button + button {
  margin-left: 5px;
}
div.ftwrap a + a, div.ftwrap button + a {
  margin-left: 5px;
}

/* ***************************
 * 상세보기 타입(약관)
 *************************** */
section.detailTypePolicy {
  background-color: #E9ECEF;
  padding: 24px;
  border-radius: 8px;
}
section.detailTypePolicy article.contents {
  padding: 24px;
  background: #fff;
  text-align: left;
  font-size: 12px;
  line-height: 1.6em;
  color: #777;
  word-break: normal;
  word-wrap: break-word;
}
section.detailTypePolicy article.contents h3 {
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 1em;
  color: #333;
}
section.detailTypePolicy article.contents p {
  padding-bottom: 1em;
  font-size: 12px;
}
section.detailTypePolicy article.contents p b {
  font-size: 12px;
}
section.detailTypePolicy article.contents p ul {
  padding-bottom: 1em;
}
section.detailTypePolicy article.contents ul {
  padding-bottom: 1em;
}
section.detailTypePolicy article.contents * {
  font-size: 12px;
  line-height: 1.6em;
  word-break: normal;
  word-wrap: break-word;
}

/* ******************************************************
 * 커스텀 폼태그 영역
 * 필요라이브러리 : fakeForm-0.5.js
 * 참조 : http://psyonline.github.io/jquery-fakeform/index.html
 ***************************************************** */
input::placeholder,
textarea::placeholder,
input[data-placeholder] {
  color: #ccc;
}

input[data-placeholder] {
  text-align: center;
}

label.tit {
  position: relative;
  display: inline-block;
  padding-right: 10px;
  font-size: 15px;
  color: #555967;
  font-weight: 700;
  height: 30px;
  line-height: 29px;
  user-select: none;
  cursor: default;
}
label.tit.required::before {
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  width: 5px;
  height: 5px;
  background-color: #f00;
  border-radius: 5px;
  content: "";
}

div.elewrap {
  position: relative;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #fff;
  border: solid 1px #d9d9d9;
  /*기간*/
}
div.elewrap.textarea {
  padding: 10px 0 10px 10px;
}
div.elewrap.on {
  background-color: #fff;
  border-color: #aaa;
}
div.elewrap.disabled {
  background-color: #f5f5f5;
}
div.elewrap.disabled input,
div.elewrap.disabled textarea {
  -webkit-text-fill-color: #ccc;
  /* ios 패치 */
  opacity: 1;
  /* ios 패치 */
  color: #ccc !important;
}
div.elewrap.disabled select {
  opacity: 0.3;
  background-color: transparent;
}
div.elewrap.readonly {
  background-color: #f7f7f7;
}
div.elewrap.readonly input,
div.elewrap.readonly select,
div.elewrap.readonly textarea {
  color: #ccc !important;
}
div.elewrap button.btn_clear {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 45px;
  background: url(../img/icon/ico_close.svg) no-repeat 50%;
  background-size: 16px;
}
div.elewrap button.btn_clear span {
  display: none;
}
div.elewrap.textarea button.btn_clear {
  right: 15px;
}
div.elewrap input[type="text"],
div.elewrap input[type="tel"],
div.elewrap input[type="number"],
div.elewrap input[type="file"],
div.elewrap input[type="phone"],
div.elewrap input[type="email"],
div.elewrap input[type="url"],
div.elewrap input[type="password"],
div.elewrap input[type="file"],
div.elewrap select,
div.elewrap textarea {
  outline: 0;
  border: 0;
  width: 100%;
  height: 40px;
  line-height: 39px;
  font-size: 14px !important;
  box-sizing: border-box;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  padding-left: 14px;
}
div.elewrap input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
div.elewrap select {
  appearance: none;
  background: url(../img/icon/ico_dropdown.svg) no-repeat calc(100% - 12px);
  background-size: 18px;
  cursor: pointer;
  color: #333;
}
div.elewrap textarea {
  height: 200px;
  line-height: 1.6em !important;
  color: #222;
  overflow-y: auto;   /* update 2023/08/31 lyh */
  resize: none !important;
}
div.elewrap textarea::-webkit-scrollbar {
  width: 5px;
}
div.elewrap textarea::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
  background-clip: padding-box;
  border: 1px solid transparent;
}
div.elewrap textarea::-webkit-scrollbar-track {
  border-radius: 5px;
}
div.elewrap input[type="date"],
div.elewrap input[type="datetime"],
div.elewrap input[type="datetime-local"] {
  position: relative;
  outline: 0;
  border: 0;
  height: 40px;
  line-height: 39px;
  font-size: 14px !important;
  box-sizing: border-box;
  background-color: transparent;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  font-family: Helvetica, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  		/* iPhone지원안함
  		&::-webkit-datetime-edit-text {
  			-webkit-appearance: none;
  			appearance: none;
  			display: none;
  		}
  
  		&::-webkit-datetime-edit-month-field {
  			-webkit-appearance: none;
  			appearance: none;
  			display: none;
  		}
  
  		&::-webkit-datetime-edit-day-field {
  			-webkit-appearance: none;
  			appearance: none;
  			display: none;
  		}
  
  		&::-webkit-datetime-edit-year-field {
  			-webkit-appearance: none;
  			appearance: none;
  			display: none;
  		}*/
  /* iOS에서 :valid :valid 적용안되서 주석처리 */
}
div.elewrap input[type="date"]::-webkit-date-and-time-value,
div.elewrap input[type="datetime"]::-webkit-date-and-time-value,
div.elewrap input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: center !important;
}
div.elewrap input[type="date"]::-webkit-clear-button, div.elewrap input[type="date"]::-webkit-inner-spin-button,
div.elewrap input[type="datetime"]::-webkit-clear-button,
div.elewrap input[type="datetime"]::-webkit-inner-spin-button,
div.elewrap input[type="datetime-local"]::-webkit-clear-button,
div.elewrap input[type="datetime-local"]::-webkit-inner-spin-button {
  display: none;
}
div.elewrap input[type="date"]::placeholder,
div.elewrap input[type="datetime"]::placeholder,
div.elewrap input[type="datetime-local"]::placeholder {
  color: #222;
  text-align: center;
}
div.elewrap input[type="date"]::-webkit-calendar-picker-indicator,
div.elewrap input[type="datetime"]::-webkit-calendar-picker-indicator,
div.elewrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background: red;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  background-color: transparent;
  cursor: pointer;
  /* iOS적용안됨
  filter: invert(48%) sepia(30%) saturate(0%) hue-rotate(203deg) brightness(90%) contrast(95%);
  padding: 5px;
  font-size: 16px;
  border-radius: 3px;
  &:hover {
  	filter: invert(60%) sepia(100%) saturate(1854%) hue-rotate(3deg) brightness(107%) contrast(106%);
  } */
}
div.elewrap input[type="date"]:focus::before, div.elewrap input[type="date"]:valid::before,
div.elewrap input[type="datetime"]:focus::before,
div.elewrap input[type="datetime"]:valid::before,
div.elewrap input[type="datetime-local"]:focus::before,
div.elewrap input[type="datetime-local"]:valid::before {
  font-size: 0;
  visibility: hidden;
  display: none;
}
div.elewrap.dateperiod.calendar {   /* update 2023/08/25 lyh */
  overflow: hidden;
  padding-left: 120px;
  max-width: calc(75%)
}
div.elewrap.dateperiod {
  overflow: hidden;
  padding-left: 120px;
  max-width: calc(50% - 5px);
}
div.elewrap.dateperiod:before {
  content: "검색기간";
  color: #333;
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  left: 16px;
  top: 8px;
}
div.elewrap.dateperiod span {
  display: inline-block;
  text-align: center;
  width: 10px;
}
div.elewrap.dateperiod.calendar span {    /* update 2023/08/25 lyh */
  display: inline-block;
  text-align: center;
  width: 10px;
  margin: 9px auto;
}
div.elewrap.dateperiod input[type="date"],
div.elewrap.dateperiod input[type="datetime"],
div.elewrap.dateperiod input[type="datetime-local"] {
  width: calc((100% - 30px) / 2);
  /* padding:20, 틸드 10 */
  text-align: center;
  /* iOS 패치 */
}
div.elewrap.dateperiod input[type="date"]:first-child,
div.elewrap.dateperiod input[type="datetime"]:first-child,
div.elewrap.dateperiod input[type="datetime-local"]:first-child {
  text-align: center;
}
div.elewrap.dateperiod input[type="date"]:first-child::-webkit-input-placeholder, div.elewrap.dateperiod input[type="date"]:first-child::-webkit-date-and-time-value,
div.elewrap.dateperiod input[type="datetime"]:first-child::-webkit-input-placeholder,
div.elewrap.dateperiod input[type="datetime"]:first-child::-webkit-date-and-time-value,
div.elewrap.dateperiod input[type="datetime-local"]:first-child::-webkit-input-placeholder,
div.elewrap.dateperiod input[type="datetime-local"]:first-child::-webkit-date-and-time-value {
  text-align: center;
}
div.elewrap.dateperiod input[type="date"]:first-child::before,
div.elewrap.dateperiod input[type="datetime"]:first-child::before,
div.elewrap.dateperiod input[type="datetime-local"]:first-child::before {
  text-align: center;
}
div.elewrap.dateperiod input[type="date"]:last-child,
div.elewrap.dateperiod input[type="datetime"]:last-child,
div.elewrap.dateperiod input[type="datetime-local"]:last-child {
  text-align: center;
}
div.elewrap.dateperiod input[type="date"]:last-child::-webkit-input-placeholder, div.elewrap.dateperiod input[type="date"]:last-child::-webkit-date-and-time-value,
div.elewrap.dateperiod input[type="datetime"]:last-child::-webkit-input-placeholder,
div.elewrap.dateperiod input[type="datetime"]:last-child::-webkit-date-and-time-value,
div.elewrap.dateperiod input[type="datetime-local"]:last-child::-webkit-input-placeholder,
div.elewrap.dateperiod input[type="datetime-local"]:last-child::-webkit-date-and-time-value {
  text-align: center;
}
div.elewrap.dateperiod input[type="date"]:last-child::before,
div.elewrap.dateperiod input[type="datetime"]:last-child::before,
div.elewrap.dateperiod input[type="datetime-local"]:last-child::before {
  text-align: center;
}
div.elewrap.dateperiod.in_ico input[type="date"],
div.elewrap.dateperiod.in_ico input[type="datetime"],
div.elewrap.dateperiod.in_ico input[type="datetime-local"] {
  width: calc((100% - 30px) / 2);
  /* padding:20, 틸드 10 아이콘 10 */
}
div.elewrap + div.elewrap {
  margin-top: 10px;
}
div.elewrap.in_btn {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
}
div.elewrap.in_btn button.btn_ele {
  width: 100px;
  height: 32px;
  border-radius: 4px;
  padding: 0 5px;
  background-color: #788490;
  margin-right: 6px;
}
div.elewrap.in_btn button.btn_ele span {
  display: inline-block;
  line-height: 31px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  word-spacing: -0.08em;
  letter-spacing: -0.3px; /* update 2023/10/12 lyh */
}
div.elewrap.in_btn button.btn_ele.blue {
  background-color: var(--color_primary);
}
div.elewrap.in_btn button.btn_clear {
  right: 105px;
}
div.elewrap.in_btn input {
  width: calc(100% - 110px);
}
div.elewrap.in_ico {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
}
div.elewrap.in_ico button.ico_search {
  width: 40px;
  height: 40px;
  background: url(../img/icon/ico_search.svg) no-repeat 50%;
  background-size: 14px;
}
div.elewrap.in_ico button.ico_search span {
  display: none;
}
div.elewrap.in_ico button.btn_clear {
  right: 30px;
}
div.elewrap.in_ico input {
  width: calc(100% - 40px);
}
div.elewrap.in_unit {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
}
div.elewrap.in_unit .unit {
  display: inline-block;
  width: 15px;
  padding-right: 10px;
  font-size: 16px;
  color: #666;
  text-align: right;
}
div.elewrap.in_unit input {
  text-align: right !important;
  width: calc(100% - 30px);
}
div.elewrap.in_unit button.btn_clear {
  left: 5px;
  right: initial;
}

div.chkrdo,
span.chkrdo {
  display: inline-block;
  height: 30px;
  user-select: none;
  /* fakeForm check */
  /* fakeForm radio */
}
div.chkrdo label,
div.chkrdo .checklabel,
span.chkrdo label,
span.chkrdo .checklabel {
  white-space: nowrap;
  display: inline-block;
  line-height: 29px;
  font-size: 14px !important;
  padding: 0 10px 0 5px;
  color: #999;
}
div.chkrdo .disabled + .checklabel,
span.chkrdo .disabled + .checklabel {
  color: #aaa;
}
div.chkrdo .checked + .checklabel,
span.chkrdo .checked + .checklabel {
  color: #666;
}
div.chkrdo .checkbox,
span.chkrdo .checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 0%;
  vertical-align: -4px;
  background-size: 20px;
  border: 1px solid #777;
  box-sizing: border-box;
  background-position: center center;
}
div.chkrdo .checkbox.focus,
span.chkrdo .checkbox.focus {
  border: 1px solid #777;
}
div.chkrdo .checkbox.checked,
span.chkrdo .checkbox.checked {
  background-image: url(../img/icon/ico_chk_on.svg);
  border: 1px solid #777;
}
div.chkrdo .checkbox.checked.disabled,
span.chkrdo .checkbox.checked.disabled {
  background-image: url(../img/icon/ico_chk_off.svg);
}
div.chkrdo .checkbox.disabled,
span.chkrdo .checkbox.disabled {
  background-image: url(../img/icon/check_disabled_off.svg);
}
div.chkrdo.circle .checkbox,
span.chkrdo.circle .checkbox {
  vertical-align: -5px;
  border-radius: 50%;
}
div.chkrdo.circle .checkbox.checked,
span.chkrdo.circle .checkbox.checked {
  background-image: url(../img/icon/check_default_on.svg);
  border: 1px solid #1976D2;
}
div.chkrdo.circle .checkbox.checked.disabled,
span.chkrdo.circle .checkbox.checked.disabled {
  background-image: url(../img/icon/check_disabled_on.svg);
}
div.chkrdo .radio,
span.chkrdo .radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 3px;
  background: url(../img/icon/radio_default_off.svg) no-repeat 0;
  background-size: 20px;
}
div.chkrdo .radio.focus,
span.chkrdo .radio.focus {
  background-image: url(../img/icon/radio_default_off.svg);
}
div.chkrdo .radio.checked,
span.chkrdo .radio.checked {
  background-image: url(../img/icon/radio_default_on.svg);
}
div.chkrdo .radio.checked.disabled,
span.chkrdo .radio.checked.disabled {
  background-image: url(../img/icon/radio_disabled_on.svg);
}
div.chkrdo .radio.disabled,
span.chkrdo .radio.disabled {
  background-image: url(../img/icon/radio_disabled_off.svg);
}

div.elewrap + .chkrdo {
  margin-top: 6px;
}

div.eletxt {
  position: relative;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 0 10px;
  border: solid 1px #eee;
  height: 47px;
  line-height: 46px;
  font-size: 16px;
  color: #666;
  background-color: #eee;
}
div.eletxt.num {
  text-align: right;
}
div.eletxt.num strong {
  font-family: Helvetica;
  margin-right: 7px;
}

p.billiad {
  display: block;
  position: relative;
  padding: 5px 0 0 18px;
  font-size: 13px;
  line-height: 1.4em;
  color: #999;
}
p.billiad::before {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 13px;
  content: "※";
}
p.billiad.warn, p.billiad.red {
  color: #f00 !important;
}

p.frm_etcmesg {
  display: block;
  position: relative;
  padding: 15px 0 20px;
  font-size: 14px;
  line-height: 1.6em;
  color: #777;
}
p.frm_etcmesg.warn, p.frm_etcmesg.red {
  color: #f00 !important;
}

ul.disc {
  margin-left: 25px;
  list-style-type: disc;
  padding-inline-start: 0.1em;
  padding-bottom: 10px;
}
ul.disc.nonedisc {
  list-style-type: none;
}
ul.disc li {
  font-size: 13px;
  line-height: 18px;
  color: #777;
  padding-bottom: 3px;
  /*letter-spacing: -1px;*/  /*update hj 230908*/
  /*word-spacing: -1px;*/    /*update hj 230908*/
}
ul.disc li::marker {
  font-size: 0.6em;
  color: #333;
}
ul.disc li ul li::marker {
  font-size: 0.6em;
  color: #bbb;
}
ul.disc li strong {
  font-weight: 700;
  color: #333;
  word-spacing: -1px;
}
ul.disc li strong.ud {
  text-decoration: underline;
}
ul.disc li em {
  font-weight: 500;
  color: #333;
  word-spacing: -1px;
}
ul.disc li ul.disc {
  padding: 2px 0 1px;
}

ol.roundno {
  display: block;
  margin-left: 18px;
  list-style: none;
  counter-reset: numList;
  padding-inline-start: 0.1em;
  padding-bottom: 10px;
}
ol.roundno li {
  font-size: 12px;
  line-height: 18px;
  color: #777;
  padding-bottom: 3px;
  word-spacing: -1px;
  position: relative;
}
ol.roundno li::before {
  counter-increment: numList;
  content: counter(numList);
  position: absolute;
  left: -17px;
  top: 3px;
  width: 12px;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  font-family: Helvetica;
  border: solid 1px #777;
  color: #777;
  border-radius: 999px;
}

.page_wait {
  padding: 15px;
  border-radius: 10px;
  background-color: #e7edef;
}
.page_wait.mypage {
  margin-top: 24px;
  padding: 36px 36px;
  border-radius: 20px;
}
.page_wait.mypage + .pbtns {
  margin-top: 24px;
}
.page_wait .warn {
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8em;
  padding-bottom: 10px;
}
.page_wait h4 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3em;
  padding-bottom: 20px;
  word-spacing: -1.2px;
  color: #444;
}
.page_wait h4 strong {
  font-size: 20px;
  font-weight: bold;
  display: block;
  color: var(--color_primary);
}
.page_wait h3 {
  font-size: 16px;
  color: #222;
  font-weight: 700;
  padding: 5px 0 10px;
}
.page_wait p.sub_tit {
  margin: 16px 0 2px;
  font-size: 14px;
  font-weight: 700;
}

div.filewrap {
  position: relative;
  box-sizing: border-box;
  border-radius: 6px;
  border: solid 1px #788490;
  height: 45px;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  line-height: 44px;
  background-color: #788490;
  color: #fff;
}
div.filewrap input[type="file"] {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

div.uploadfiles {
  position: relative;
  display: block;
  margin: 10px 0;
}
div.uploadfiles div.MultiFile-label {
  position: relative;
  width: 100%;
  border: solid 1px #d9d9d9;
  background-color: #fff;
  border-radius: 6px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 0;
}
div.uploadfiles div.MultiFile-label:last-child {
  margin-bottom: 0;
}
div.uploadfiles div.MultiFile-label a.MultiFile-remove {
  cursor: pointer;
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 35px;
  height: 40px;
}
div.uploadfiles div.MultiFile-label a.MultiFile-remove i {
  width: 35px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  opacity: 0.1;
  text-align: center;
}
div.uploadfiles div.MultiFile-label:hover a.MultiFile-remove i {
  opacity: 0.2;
}
div.uploadfiles div.MultiFile-label > span {
  position: relative;
  display: inline-block;
  font-size: O;
}
div.uploadfiles div.MultiFile-label > span span.MultiFile-label {
  display: inline-block;
  height: 39px;
}
div.uploadfiles div.MultiFile-label > span span.MultiFile-label span.MultiFile-title {
  position: relative;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 39px;
  max-width: 210px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #444;
  padding: 0 20px 0;
}
div.uploadfiles div.MultiFile-label > span span.MultiFile-label span.MultiFile-title::before {
  position: absolute;
  top: 1px;
  left: -8px;
  display: block;
  width: 30px;
  height: 40px;
  content: "";
  background: url(../img/icon/ico_attach.svg) no-repeat 50%;
  background-size: 18px;
}

.elewrap + .page_wait {
  margin-top: 10px;
}

.mbtns + .page_wait {
  margin-top: 10px;
}

ul.uploadedfiles {
  display: block;
  margin: 10px 0;
}
ul.uploadedfiles li.uploadedfile {
  position: relative;
  width: 100%;
  border: solid 1px #d9d9d9;
  background-color: #fff;
  height: 40px;
  border-radius: 6px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
ul.uploadedfiles li.uploadedfile:last-child {
  margin-bottom: 0;
}
ul.uploadedfiles li.uploadedfile a.file {
  cursor: pointer;
  position: relative;
  display: block;
  font-size: 14px;
  height: 40px;
  min-width: 240px;
  width: 250px;
  line-height: 39px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #222 !important;
  padding-left: 20px;
}
ul.uploadedfiles li.uploadedfile a.file::before {
  position: absolute;
  top: 1px;
  left: -8px;
  display: block;
  width: 30px;
  height: 40px;
  content: "";
  background: url(../img/icon/ico_attach.svg) no-repeat 50%;
  background-size: 18px;
}
ul.uploadedfiles li.uploadedfile i {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  opacity: 0.1;
  text-align: center;
}
ul.uploadedfiles li.uploadedfile:hover i {
  opacity: 0.2;
}

@media screen and (max-width: 320px) {
  ul.uploadedfiles li.uploadedfile a.file {
    min-width: 175px;
    width: 175px;
  }
}
div.filedesc {
  margin-top: 10px;
  border-radius: 6px;
  padding: 10px;
  background-color: #f0f0f0;
}
div.filedesc ul {
  margin-left: 20px;
  list-style-type: disc;
  padding-inline-start: 0.1em;
}
div.filedesc ul li {
  font-size: 13px;
  line-height: 1.4em;
  color: #777;
}

ul.attachedfiles {
  display: block;
}
ul.attachedfiles li.attachedfile {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  font-size: 0;
}
ul.attachedfiles li.attachedfile a.file {
  position: relative;
  display: inline-block;
  font-size: 14px;
  height: 30px;
  line-height: 29px;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--color_link) !important;
  padding-left: 16px;
}
ul.attachedfiles li.attachedfile a.file::before {
  position: absolute;
  top: 1px;
  left: -8px;
  display: block;
  width: 30px;
  height: 30px;
  content: "";
  background: url(../img/icon/ico_attach.svg) no-repeat 50%;
  background-size: 16px;
}

/* ******************************************************
 *
 *  일반영역(등록폼, 수정폼) 영역
 *
 ***************************************************** */
fieldset.customfield {
  width: 100%;
  padding: 0 0 0px;
  background-color: #fff;
}
fieldset.customfield div.cus {
  padding: 10px 0;
}
fieldset.customfield div.cus.cts {
  text-align: center;
}
fieldset.customfield div.cus + .cnts_tab {
  margin-top: 40px;
}
fieldset.customfield.electionCalendar {
  padding: 0 15px;
}

/* ******************************************************
 *
 *  검색영역 필드
 *
 ***************************************************** */
/* 검색 기본틀 */
fieldset.searcharea {
  width: 100%;
  background-color: #6c6c6e;
  padding: 0;
  /* 기본 스타일 */
  /* 기본: 안보여지는 영역 */
  /* 기본: 안보여지는 영역 */
  /* 기본: 안보여지는 영역 */
  /* 기본: 보이는 영역 */
  /* 폼이 펼쳐져서 보여질때 스타일 리셋 */
}
fieldset.searcharea.cts, fieldset.searcharea.kakaoSend {
  background: #E9ECEF;
  border-radius: 8px;
  padding: 20px 24px;
}
fieldset.searcharea.cts .innerbxe, fieldset.searcharea.kakaoSend .innerbxe {
  display: flex;
  width: 100%;
}
fieldset.searcharea.cts .innerbxe > div, fieldset.searcharea.kakaoSend .innerbxe > div {
  display: flex;
}
fieldset.searcharea.cts form, fieldset.searcharea.kakaoSend form {
  max-width: 100%;
  padding: 0;
}
fieldset.searcharea.cts.mgt24, fieldset.searcharea.kakaoSend.mgt24 {
  margin-top: 24px;
}
fieldset.searcharea.kakaoSend .search_hide.end {
  padding-bottom: 0;
}
fieldset.searcharea.kakaoSend .search_hide .elewrap.valueipt {
  min-width: 300px;
}
fieldset.searcharea.kakaoSend .search_hide .elewrap.valueipttemp {
  min-width: 470px;
}
fieldset.searcharea.kakaoSend .search_hide .elewrapgrp {
  /*margin-left: 33px; !* update 2023/09/07 jh *!*/
  display: flex;
  flex: 1;
  gap: 8px; /* update 2023/09/07 jh */
  align-items: center;
}
fieldset.searcharea.kakaoSend .search_hide .elewrapgrp label {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  /* 100% */
  color: #555967;
}
fieldset.searcharea form {
  display: block;
  width: 100%;
  padding: 15px;
  max-width: 620px;
  margin: auto;
}
fieldset.searcharea form div.elewrap {
  border: 1px solid #464649;
  background-color: #fff;
  border-radius: 4px;
}
fieldset.searcharea form div.elewrap.on {
  border-color: #565659;
}
fieldset.searcharea form div.elewrap:last-child {
  margin-bottom: 0;
}
fieldset.searcharea form div.elewrap button.btn_clear {
  opacity: 1;
}
fieldset.searcharea form div.elewrap input {
  color: #333;
  text-align: left;
  margin-left: 10px; /*update hj 230823*/
}
fieldset.searcharea form div.elewrap input::placeholder {
  color: #ccc;
}
fieldset.searcharea form div.elewrap select {
  color: #333;
}
fieldset.searcharea form div.elewrap.dateperiod span {
  color: #333;
}
fieldset.searcharea form div.elewrap input[type="date"]::-webkit-calendar-picker-indicator,
fieldset.searcharea form div.elewrap input[type="datetime"]::-webkit-calendar-picker-indicator,
fieldset.searcharea form div.elewrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-right: -0.35em;
  filter: invert(48%) sepia(30%) saturate(0%) hue-rotate(203deg) brightness(90%) contrast(95%);
  cursor: pointer;
  background-color: transparent;
  filter: invert(1);
}
fieldset.searcharea form div.elewrap input[type="date"]::-webkit-calendar-picker-indicator:hover,
fieldset.searcharea form div.elewrap input[type="datetime"]::-webkit-calendar-picker-indicator:hover,
fieldset.searcharea form div.elewrap input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  filter: invert(60%) sepia(100%) saturate(1854%) hue-rotate(3deg) brightness(107%) contrast(106%);
}
fieldset.searcharea form div.elewrap:last-child {
  margin-bottom: 0;
}
fieldset.searcharea form div.elewrap button.btn_clear {
  opacity: 1;
}
fieldset.searcharea form div.elebtnwrap {
  width: 100%;
  position: relative;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
}
fieldset.searcharea form div.elebtnwrap div.elebtns {
  width: 100%;
  position: relative;
  display: flex;
  gap: 6px;
}
fieldset.searcharea form div.elebtnwrap button.elebtn {
  flex: 1;
  background-color: #fff;
  border: 1px solid #CCD4DB;
  box-sizing: border-box;
  color: #444;
  font-size: 14px;
  line-height: 39px;
  padding: 0px 5px;
  border-radius: 4px;
  vertical-align: top;
  margin: 0 0px 0px 0;
  cursor: pointer;
}
fieldset.searcharea form div.elebtnwrap button.elebtn:hover, fieldset.searcharea form div.elebtnwrap button.elebtn.on {
  background-color: #fff;
  border: 1px solid #1976D2;
  color: #1976D2;
}
fieldset.searcharea form div.elebtnwrap:last-child {
  margin-bottom: 0;
}
fieldset.searcharea .search_show {
  padding-bottom: 9px;
}
fieldset.searcharea .elewrap + .search_show {
  padding-bottom: 0;
}
fieldset.searcharea .search_hide {
  display: none;
  padding-bottom: 9px;
}
fieldset.searcharea .search_hide .elewrap {
  flex: 1;
}
fieldset.searcharea .search_guide {
  display: none;
  padding: 10px;
}
fieldset.searcharea .search_guide .sub_tit {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  border-bottom: 1px dotted #ddd;
  padding-bottom: 10px;
  text-transform: uppercase;
}
fieldset.searcharea .search_guide .sub_tit span.chk {
  color: #1976D2;
}
fieldset.searcharea .search_guide .sub_tit i {
  font-size: 16px;
  margin-right: 4px;
}
fieldset.searcharea .search_guide .sub_tit i.xi-message:before {
  content: "" !important;
  background-image: url(../img/sub/common/ckpoint.svg);
  background-size: 100%;
  background-position: center;
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
}
fieldset.searcharea .search_guide ul.disc {
  padding: 5px 0 0;
}
fieldset.searcharea .search_guide ul.disc li {
  color: #333;
}
fieldset.searcharea .search_guide em,
fieldset.searcharea .search_guide span,
fieldset.searcharea .search_guide p {
  color: #ddd;
}
fieldset.searcharea .search_guide strong {
  color: #A40505;
}
fieldset.searcharea .search_guide a {
  color: #0080FF;
}
fieldset.searcharea .search_guide a > * {
  color: #0080FF;
}
fieldset.searcharea .search_bottom {
  display: none;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: var(--color_bg_search);
  border-top: 1px solid #515151;
  text-align: right;
}
fieldset.searcharea .search_bottom button {
  display: block;
  width: 100%;
  line-height: 49px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
fieldset.searcharea .search_show .elewrap {
  border-radius: 60px;
  border-color: #CCD4DB;
  background-color: transparent;
}
fieldset.searcharea .search_show .elewrap.on {
  background-color: #fff;
}
fieldset.searcharea .search_show .elewrap input::placeholder {
  color: #CCCCCC !important;
}
fieldset.searcharea.on {
  background-image: none;
}
fieldset.searcharea.on form {
  border-radius: 4px;
}
fieldset.searcharea.on form .search_hide,
fieldset.searcharea.on form .search_guide {
  display: flex;
  gap: 8px;
}
fieldset.searcharea.on form .search_guide {
  background: #fff;
  border-radius: 4px;
  flex-direction: column;
}
fieldset.searcharea.on form div.elewrap {
  border-radius: 4px;
  border-color: #CCD4DB;
  background-color: #fff;
}
fieldset.searcharea.on form div.elewrap.bd0 {
  border: 0;
}
fieldset.searcharea.on form div.elewrap.on {
  border-color: #333;
}
fieldset.searcharea.on form div.elewrap input::placeholder {
  color: #ccc;
}
fieldset.searcharea.on form div.elewrap + div.elewrap {
  margin-top: 0px;
}
fieldset.searcharea.on .search_bottom {
  display: block;
}

/* ******************************************************
 *
 * 탭: 텍스트형 (class="tabtxt1")
 * 센터정렬일 경우 class="tabtxt1 center"
 ***************************************************** */
div.tabtxt1 {
  width: 100%;
  border-bottom: solid 1px #444;
  margin-bottom: 20px;
  background-color: #fff;
}
div.tabtxt1 > ul {
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 15px;
}
div.tabtxt1 > ul li {
  display: inline-block;
  border-bottom: solid 2px transparent;
}
div.tabtxt1 > ul li a {
  display: block;
  line-height: 50px;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: #aaa;
}
div.tabtxt1 > ul li:hover, div.tabtxt1 > ul li.on {
  border-bottom-color: #444;
}
div.tabtxt1 > ul li:hover a, div.tabtxt1 > ul li.on a {
  color: #222;
  font-weight: 700;
}
div.tabtxt1.center > ul {
  justify-content: center;
}

/* ******************************************************
 *
 * 탭: 버튼형 (class="tabbtn1") 기본 센터정렬
 *
 ***************************************************** */
div.tabbtn1 {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 15px;
}
div.tabbtn1 > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  border: solid 1px #444;
  box-sizing: border-box;
  background-clip: border-box;
}
div.tabbtn1 > ul li {
  flex: 1;
  display: block;
  border-right: solid 1px #eee;
}
div.tabbtn1 > ul li:last-child {
  border-right: 0;
}
div.tabbtn1 > ul li a {
  display: block;
  text-align: center;
  line-height: 40px;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: #aaa;
}
div.tabbtn1 > ul li.on {
  background-color: var(--color_secondary);
}
div.tabbtn1 > ul li.on a {
  color: #fff;
  font-weight: 700;
}
div.tabbtn1 > ul li.on:hover {
  background-color: var(--color_secondary);
}
div.tabbtn1 > ul li.on:hover a {
  color: #fff;
  font-weight: 700;
}
div.tabbtn1 > ul li:hover {
  background-color: #eee;
}
div.tabbtn1 > ul li:hover a {
  color: #aaa;
}
div.tabbtn1.blue.on {
  background-color: var(--color_primary);
}
div.tabbtn1.blue.on:hover {
  background-color: var(--color_primary);
}

/* ******************************************************
 *
 * 정보성 상세화면 : Design_DetailType_INFO (클래스명 변경금지)
 * 스크립트 제어중
 *
 ***************************************************** */
div.Design_DetailType_INFO {
  background-color: #fff;
  padding: 0px 40px;
  margin: auto;
}
div.Design_DetailType_INFO.messageSend, div.Design_DetailType_INFO.memberchangedetail, div.Design_DetailType_INFO.payment, div.Design_DetailType_INFO.common {
  display: flex;
  border-radius: 20px;
  padding: 16px;
  gap: 16px;
  background-color: #EFEFEF;
  margin-top: 24px;
  flex-wrap: wrap;
}
div.Design_DetailType_INFO.messageSend + .common, div.Design_DetailType_INFO.memberchangedetail + .common, div.Design_DetailType_INFO.payment + .common, div.Design_DetailType_INFO.common + .common {
  margin-top: 16px;
}
div.Design_DetailType_INFO.messageSend + .pbtns, div.Design_DetailType_INFO.memberchangedetail + .pbtns, div.Design_DetailType_INFO.payment + .pbtns, div.Design_DetailType_INFO.common + .pbtns {
  margin-top: 24px;
}
div.Design_DetailType_INFO.messageSend .innerbxs, div.Design_DetailType_INFO.memberchangedetail .innerbxs, div.Design_DetailType_INFO.payment .innerbxs, div.Design_DetailType_INFO.common .innerbxs {
  min-width: calc(50% - 8px);
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
div.Design_DetailType_INFO.messageSend .innerbxs .inner-row, div.Design_DetailType_INFO.memberchangedetail .innerbxs .inner-row, div.Design_DetailType_INFO.payment .innerbxs .inner-row, div.Design_DetailType_INFO.common .innerbxs .inner-row {
  display: flex;
  flex: 1;
  overflow: visible;
}
div.Design_DetailType_INFO.messageSend .innerbxs .inner-row .info_item, div.Design_DetailType_INFO.memberchangedetail .innerbxs .inner-row .info_item, div.Design_DetailType_INFO.payment .innerbxs .inner-row .info_item, div.Design_DetailType_INFO.common .innerbxs .inner-row .info_item {
  flex: 1;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
div.Design_DetailType_INFO.messageSend .innerbxs .inner-row + .inner-row, div.Design_DetailType_INFO.memberchangedetail .innerbxs .inner-row + .inner-row, div.Design_DetailType_INFO.payment .innerbxs .inner-row + .inner-row, div.Design_DetailType_INFO.common .innerbxs .inner-row + .inner-row {
  margin-top: 16px;
}
div.Design_DetailType_INFO.messageSend .innerbxs.fullwidth, div.Design_DetailType_INFO.memberchangedetail .innerbxs.fullwidth, div.Design_DetailType_INFO.payment .innerbxs.fullwidth, div.Design_DetailType_INFO.common .innerbxs.fullwidth {
  min-width: 100%;
  background: #fff;
}
div.Design_DetailType_INFO.messageSend .innerbxs.listadd, div.Design_DetailType_INFO.memberchangedetail .innerbxs.listadd, div.Design_DetailType_INFO.payment .innerbxs.listadd, div.Design_DetailType_INFO.common .innerbxs.listadd {
  flex-direction: column;
}
div.Design_DetailType_INFO.messageSend .innerbxs.listadd.max250, div.Design_DetailType_INFO.memberchangedetail .innerbxs.listadd.max250, div.Design_DetailType_INFO.payment .innerbxs.listadd.max250, div.Design_DetailType_INFO.common .innerbxs.listadd.max250 {
  max-height: 250px;
}
div.Design_DetailType_INFO.messageSend .innerbxs.listadd .axs, div.Design_DetailType_INFO.memberchangedetail .innerbxs.listadd .axs, div.Design_DetailType_INFO.payment .innerbxs.listadd .axs, div.Design_DetailType_INFO.common .innerbxs.listadd .axs {
  max-height: 240px;
  border-radius: 20px;
}
div.Design_DetailType_INFO.messageSend .innerbxs.listadd .axs + .axs, div.Design_DetailType_INFO.memberchangedetail .innerbxs.listadd .axs + .axs, div.Design_DetailType_INFO.payment .innerbxs.listadd .axs + .axs, div.Design_DetailType_INFO.common .innerbxs.listadd .axs + .axs {
  margin-top: 16px;
}
div.Design_DetailType_INFO.messageSend .innerbxs.listadd.rowadd, div.Design_DetailType_INFO.memberchangedetail .innerbxs.listadd.rowadd, div.Design_DetailType_INFO.payment .innerbxs.listadd.rowadd, div.Design_DetailType_INFO.common .innerbxs.listadd.rowadd {
  box-shadow: none;
  overflow: visible;
}
div.Design_DetailType_INFO.messageSend .innerbxs .info_item, div.Design_DetailType_INFO.memberchangedetail .innerbxs .info_item, div.Design_DetailType_INFO.payment .innerbxs .info_item, div.Design_DetailType_INFO.common .innerbxs .info_item {
  padding: 20px;
  min-width: 475px;
  flex: 1;
}
div.Design_DetailType_INFO .info_item {
  min-width: 275px;
  border-radius: 0px;
  background-color: #fff;
  margin-bottom: 0px;
  padding: 0 40px 20px 40px;
  box-sizing: border-box;
}
div.Design_DetailType_INFO .info_item.half {
  min-width: 50%;
}
div.Design_DetailType_INFO .info_item.mypage {
  max-width: 1000px;
}
div.Design_DetailType_INFO .info_item.mypage .info_body fieldset {
  max-width: 100%;
}
div.Design_DetailType_INFO .info_item + .info_item {
  padding-top: 10px;
  padding-bottom: 10px;
}
div.Design_DetailType_INFO .info_item:last-child {
  margin-bottom: 0;
}
div.Design_DetailType_INFO .info_item.mypage {
  max-width: 420px;
  margin: auto;
}
div.Design_DetailType_INFO .info_item.mypage.fullpage {
  max-width: 864px;
}
div.Design_DetailType_INFO .info_item.mypage.fullpage .halfgridwrap {
  display: flex;
  gap: 24px;
}
div.Design_DetailType_INFO .info_item.mypage.fullpage .halfgridwrap .innerbxhf {
  flex: 1;
}
div.Design_DetailType_INFO .info_item.mypage.inputbx {
  padding: 10px 0;
}
div.Design_DetailType_INFO .info_item.mypage.write, div.Design_DetailType_INFO .info_item.mypage.update {
  max-width: 100%;
  padding: 0;
}
div.Design_DetailType_INFO .info_item .info_head {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  user-select: none;
}
div.Design_DetailType_INFO .info_item .info_head h3 {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
div.Design_DetailType_INFO .info_item .info_head h3 i {
  cursor: pointer;
  padding-left: 4px;
  font-size: 18px;
  color: #999;
}
div.Design_DetailType_INFO .info_item .info_head .info_head_right {
  display: inline-block;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  justify-items: center;
}
div.Design_DetailType_INFO .info_item .info_head .info_head_right .link {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding-right: 10px;
  font-size: 13px;
  text-decoration: underline;
}
div.Design_DetailType_INFO .info_item .info_head .info_head_right .updown {
  cursor: pointer;
  position: relative;
  margin-right: -5px;
  width: 20px;
  height: 30px;
  opacity: 0.7;
  background: url(../img/icon/ico_dropdown.svg) no-repeat center right/contain;
  transition: all 0.1s;
}
div.Design_DetailType_INFO .info_item .info_head .info_head_right .updown span {
  display: none;
}
div.Design_DetailType_INFO .info_item .info_head + .info_body {
  margin-top: 10px;
}
div.Design_DetailType_INFO .info_item .info_body {
  display: none;
  font-size: 14px;
  line-height: 1.8em;
  padding: 10px 0;
}
div.Design_DetailType_INFO .info_item .info_body fieldset {
  padding: 0;
  max-width: 420px;
  margin: auto;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  user-select: none;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > thead,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > thead > tr,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr {
  border: 0;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td {
  border: 0;
  position: relative;
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  vertical-align: top;
  text-align: left;
  line-height: 24px;
  padding: 3px 0 6px;
  box-sizing: border-box;
  background-clip: border-box;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.center, div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.c,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.center,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.c {
  text-align: center;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.right, div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.r,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.right,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.r {
  text-align: right;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.left, div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.l,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.left,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.l {
  text-align: left;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.top,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.top {
  vertical-align: top;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.bottom,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.bottom {
  vertical-align: bottom;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th.middle,
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td.middle {
  vertical-align: middle;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr th {
  color: #999;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td {
  color: #222;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td .btn_intbl {
  display: inline-flex;
  font-size: 13px;
  line-height: 14px;
  background-color: #788590;
  padding: 6px 8px 6px;
  color: #fff;
  border-radius: 3px;
  margin-left: 10px;
  word-spacing: -0.08em;
  max-width: 100px;
  align-content: ju;
  align-items: center;
  min-height: 26px;
}
div.Design_DetailType_INFO .info_item .info_body table.tbl_info > tbody > tr td .btn_intbl.right {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}
div.Design_DetailType_INFO .info_item .info_body.check_page_wait {
  border-top: 0;
  padding-top: 0;
  border-radius: 10px;
  box-sizing: border-box;
  background-clip: border-box;
}
div.Design_DetailType_INFO .info_item.open .info_body {
  display: block;
}
div.Design_DetailType_INFO .info_item.open .updown {
  transform: rotate(180deg);
}
div.Design_DetailType_INFO > .page_wait {
  min-width: 275px;
  max-width: 420px;
  margin: auto;
  background-color: transparent;
}
div.Design_DetailType_INFO > .page_wait.mypage {
  max-width: 864px;
}
div.Design_DetailType_INFO > .page_seperator {
  width: 100%;
  position: relative;
  padding-top: 10px;
  border-bottom: dashed 1px #bbb;
  margin-bottom: 20px;
}
div.Design_DetailType_INFO > .page_seperator .septxt {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50px;
  display: inline-block;
  height: 20px;
  line-height: 19px;
  font-size: 12px;
  width: 100px;
  text-align: center;
  color: #aaa;
  background-color: #e9ecef;
}
div.Design_DetailType_INFO .example_item {
  min-width: 275px;
  border-radius: 8px;
  background-color: #EBF0F1;
  margin-bottom: 15px;
  padding: 0;
  box-sizing: border-box;
  margin-top: 24px;
}
div.Design_DetailType_INFO .example_item .example_head {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  user-select: none;
}
div.Design_DetailType_INFO .example_item .example_head h3 {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  padding-left: 15px;
}
div.Design_DetailType_INFO .example_item .example_head h3 strong.example_tit {
  position: relative;
  display: inline-block;
}
div.Design_DetailType_INFO .example_item .example_head h3 strong.example_tit::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -24px;
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 2px 5px 0 0;
  background: url(../img/icon/ico_lightbulb.svg) no-repeat 50%/18px;
}
div.Design_DetailType_INFO .example_item .example_head h3 i {
  cursor: pointer;
  padding-left: 4px;
  font-size: 18px;
  color: #999;
}
div.Design_DetailType_INFO .example_item .example_head .example_head_right {
  display: inline-block;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  justify-items: center;
}
div.Design_DetailType_INFO .example_item .example_head .example_head_right .link {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding-right: 10px;
  font-size: 13px;
  text-decoration: underline;
}
div.Design_DetailType_INFO .example_item .example_head .example_head_right .updown {
  cursor: pointer;
  position: relative;
  margin-right: -5px;
  width: 20px;
  height: 30px;
  opacity: 0.7;
  background: url(../img/icon/ico_dropdown.svg) no-repeat center right/contain;
  transition: all 0.1s;
}
div.Design_DetailType_INFO .example_item .example_head .example_head_right .updown span {
  display: none;
}
div.Design_DetailType_INFO .example_item .example_body {
  display: none;
  border-top: solid 1px #dadada;
  background-color: #f3f5f7;
  padding: 24px 32px;
  position: relative;
  border-radius: 0 0 10px 10px;
}
div.Design_DetailType_INFO .example_item .example_body h4 {
  color: #222;
  font-weight: bold;
  word-spacing: -1px;
}
div.Design_DetailType_INFO .example_item:last-child {
  margin-bottom: 0;
}
div.Design_DetailType_INFO .example_item.open .example_body {
  display: block;
}
div.Design_DetailType_INFO .example_item.open .updown {
  transform: rotate(180deg);
}

table.example {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
table.example thead,
table.example tbody {
  border: 0;
}
table.example thead {
  background-color: #eee;
}
table.example tbody {
  background-color: #fff;
}
table.example th,
table.example td {
  padding: 5px 5px 4px;
  vertical-align: middle;
  font-size: 13px;
  height: 34px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}
table.example thead th {
  height: 34px;
  vertical-align: middle;
}
table.example tbody td,
table.example tbody th {
  line-height: 20px;
  text-align: center;
  color: #666;
}
table.example tbody td span,
table.example tbody th span {
  display: block;
}
table.example tbody td span em,
table.example tbody th span em {
  display: inline-block;
  padding-left: 10px;
  font-family: Helvetica;
}
table.example tbody th {
  background-color: #eee;
}

/* ******************************************************
 *
 * 툴팁(수동): 버튼형 (class="tooltip_box") 기본 right
 * 기본 : display:none;
 ***************************************************** */
.tooltip_box {
  /*display: none;*/  /* update 2023/09/08 lyh */
  position: absolute;
  /*top: 0;*/   /* update 2023/09/08 lyh */
  /*right: 0;*/   /* update 2023/09/08 lyh */
  margin-top: -18px;
  white-space: nowrap;
  margin-left: 1000px;	/* update 2023/09/08 lyh */
}
.tooltip_box::before {
  display: none;
  position: absolute;
  top: -5px;
  right: 25px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #2d3339;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
}
/*.tooltip_box::after {*/   /* update 2023/09/08 lyh */
/*  position: absolute;*/
/*  top: 32px;*/
/*  right: 25px;*/
/*  width: 0;*/
/*  height: 0;*/
/*  border-top: 6px solid #2d3339;*/
/*  border-right: 6px solid transparent;*/
/*  border-left: 6px solid transparent;*/
/*  content: "";*/
/*}*/
.tooltip_box .tooltip_inner {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: 8px 12px 8px 12px;	/* update 2023/09/08 lyh */
  border-radius: 8px;
  background-color: #2d3339;
  font-size: 13px;
  line-height: 16px;
  color: #fff;
  vertical-align: top;
}
.tooltip_box .tooltip_inner strong {
  color: #03c75a;
  font-weight: 700;
}
.tooltip_box .tooltip_inner button {
  position: absolute;
  top: 0;
  right: 1px;
  padding: 10px;
  width: 32px;
  height: 32px;
}
.tooltip_box .tooltip_inner button.btn_close {
  box-sizing: border-box;
  background-color: #fff;
  mask: url(../img/icon/btn_mn_close.svg) no-repeat 50%/12px;
  -webkit-mask: url(../img/icon/btn_mn_close.svg) no-repeat 50%/12px;
}

/* ******************************************************
 *
 *  내용안내 테이블 class="grayline"
 *
 ***************************************************** */
table.grayline {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: solid 1px #ccc;
}
table.grayline th,
table.grayline td {
  border: solid 1px #ccc;
  font-size: 13px !important;
  line-height: 1.4em !important;
  text-align: center;
  box-sizing: border-box;
  padding: 6px 5px 5px;
  color: #777;
}
table.grayline th.l,
table.grayline td.l {
  text-align: left;
}
table.grayline th.r,
table.grayline td.r {
  text-align: right;
}
table.grayline thead th {
  font-weight: 700;
  color: #555;
  background-color: #f6f7f9;
}

/* ******************************************************
 *
 *  가로스크롤 영역: 카테고리 선택 class="xscroll_area"
 *
 ***************************************************** */
div.xscroll_area {
  position: relative;
  padding: 0 35px 15px 0;
  max-width: 1040px;  /* update 2023/08/30 lyh */
  margin: 0 60px;    /* update 2023/08/30 lyh */
  display: flex;
  justify-content: center;
  /* 툴팁이 있을 경우 */
}
div.xscroll_area div.scroll_wrap {
  position: relative;
  overflow: auto;   /* update 2023/08/30 lyh */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  white-space: nowrap;
  font-size: 0;
}
div.xscroll_area div.scroll_wrap::-webkit-scrollbar {
  display: none;
}
div.xscroll_area div.scroll_wrap ul.scroll_items {
  vertical-align: top;
}
div.xscroll_area div.scroll_wrap ul.scroll_items li {
  position: relative;
  display: inline-block;
  margin: 0 2px 4px 0;
  vertical-align: top;
}
div.xscroll_area div.scroll_wrap ul.scroll_items li a {
  display: block;
  padding: 5px 10px 4px;
  border-radius: 4px;
  border: 1px solid #cfcff0;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #767678;
  letter-spacing: -1.2px; /* update 2023/10/11 lyh */
}
div.xscroll_area div.scroll_wrap ul.scroll_items li a.on {
  color: #fff;
  font-weight: 700;
  border-color: #2c333a;
  background-color: #2c333a;
}
div.xscroll_area div.scroll_wrap ul.scroll_items li:last-child {
  margin-right: 20px;
}
div.xscroll_area button.scroll_fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #dcdee0;
  line-height: 10px;
  background: #fff url(../img/icon/ico_dropdown.svg) no-repeat 50%/14px;
  display: none;
}
div.xscroll_area:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 35px;
  /*width: 15px;*/    /* update 2023/08/30 lyh */
  background-image: linear-gradient(270deg, #e8ebee 6px, rgba(244, 246, 248, 0));
}
div.xscroll_area.fold .scroll_wrap {
  white-space: normal;
}
div.xscroll_area.fold button.scroll_fold {
  transform: rotate(180deg);
}
div.xscroll_area.fold:after {
  display: none;
}
div.xscroll_area .tooltip_box {
  right: initial;
  left: 0;
}
div.xscroll_area .tooltip_box .tooltip_inner {
  left: 0;
  top: -24px;
  right: initial;
}
div.xscroll_area .tooltip_box::after {
  top: 8px;
  right: initial;
  left: 25px;
  bottom: 0;
  border-bottom: 0;
}
div.xscroll_area .tooltip_box.down {
  top: initial;
  bottom: 10px;
}
div.xscroll_area .tooltip_box.down .tooltip_inner {
  top: initial;
}
div.xscroll_area .tooltip_box.down::after {
  top: initial;
  border-top: 0;
  border-bottom: 6px solid #2d3339;
}

/* ******************************************************
 *
 *  스텝아이콘 class="bulletstep orange"
 *  TYPE : orange/blue/black
 ***************************************************** */
.bulletstep {
  display: inline-block;
  font-family: Helvetica;
  border-radius: 3px;
  background-color: #aaa;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  height: 12px;
  line-height: 12px;
  padding: 3px 5px;
  margin-right: 5px;
}
.bulletstep.orange {
  background-color: #ff7a00;
}
.bulletstep.blue {
  background-color: #1976d2;
}
.bulletstep.black {
  background-color: #222;
}
.bulletstep em {
  position: relative;
  display: inline-block;
  font: Helvetica;
  font-size: 12px;
  font-weight: bold;
  padding-left: 3px;
}
.bulletstep em::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin-right: 3px;
  background-color: rgba(255, 255, 255, 0.5);
}

.toastMsg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px;
  box-sizing: border-box;
  background: var(--color_primary);
  color: #fff;
  font-size: 15px;
  line-height: 1.4em;
}

ul.cnts_tab {
  margin-top: 24px;
  display: flex;
}
ul.cnts_tab.iptprc {
  border-bottom: 1px solid #E4E5EC;
  margin-top: 0;
  margin-bottom: 10px;
}
ul.cnts_tab.iptprc li {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 10px;
  justify-content: flex-start;
  border-bottom: 0px;
}
ul.cnts_tab.cm {
  padding-left: 20px;
  border-bottom: 1px solid #ddd;
  margin-top: 0;
  margin-bottom: 10px;
}
ul.cnts_tab.cm.justify-center {
  justify-content: center;
}
ul.cnts_tab.cm li {
  height: 40px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 10px;
  justify-content: flex-start;
  border-bottom: 3px solid transparent;
  color: #AAAAAA;
}
ul.cnts_tab.cm li a {
  color: inherit;
}
ul.cnts_tab.cm li + li {
  margin-left: 10px;
}
ul.cnts_tab li {
  font-size: 16px;
  color: #adadad;
  flex: 1;
  font-weight: 400;
  text-align: center;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing-border: box;
  border-bottom: 1px solid #ADADAD;
  cursor: pointer;
}
ul.cnts_tab li.active {
  color: #333;
  font-weight: 700;
  border-bottom: 3px solid #333;
}

div.Design_DetailType_INFO .info_item .info_head.right {
  justify-content: flex-end;
}

div.Design_DetailType_INFO .info_item .info_head.center {
  justify-content: center;
}

.infobx-wrap {
  margin-top: 14px;
  padding: 20px 40px;
  border-radius: 8px;
  background: #EBF0F1;
}
.infobx-wrap.memberout {
  padding: 20px 32px;
}
.infobx-wrap.caller {
  margin-top: 24px;
}
.infobx-wrap.caller .infobx {
  flex-direction: column;
  gap: 10px;
}
.infobx-wrap.kakao {
  background: #F7F7F7;
  padding: 16px 24px;
}
.infobx-wrap.kakao .infobx {
  flex-direction: column;
  gap: 10px;
}
.infobx-wrap.notix h2 {
  color: #333;
  font-size: 30px;
  font-weight: 500;
  line-height: 29px;
  /* 96.667% */
  position: relative;
  display: inline-block;
}
.infobx-wrap.notix h2 strong {
  font-weight: 700;
}
.infobx-wrap.notix p.mini-titx {
  color: #999;
  font-size: 12px;
  font-weight: 500;
  line-height: 29px;
  /* 241.667% */
}
.infobx-wrap.notix .infobx {
  margin-top: 20px;
}
.infobx-wrap.notix .infobx .innerbxo.left {
  min-width: 520px;
}
.infobx-wrap.notix .infobx .innerbxo.right {
  text-align: right;
}
.infobx-wrap.notix h2:after {
  content: "";
  width: 80px;
  height: 80px;
  display: inline-block;
  background: url(../img/sub/callregiperson.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  right: -318px;
  top: 0;
}
.infobx-wrap h3 {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  margin-bottom: 15px;
}
.infobx-wrap h3 span.xew {
  color: #333;
  font-size: 12px;
  font-weight: 500;
  line-height: 22px;
  /* 183.333% */
  top: -10px;
  position: relative;
}
.infobx-wrap .infobx {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.infobx-wrap .innerbxo {
  flex: 1;
}
.infobx-wrap ul {
  margin-left: 15px;
  list-style-type: disc;
  padding-inline-start: 0.1em;
}
.infobx-wrap ul.callinfo + .mbtns {
  margin-top: 10px;
}
.infobx-wrap ul li {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  word-break: keep-all;
}
.infobx-wrap span.red {
  color: #F91D2A;
}
.infobx-wrap span.black {
  color: #333;
}
.infobx-wrap span.blue {
  color: #1976D2;
  font-weight: 700;
}
.infobx-wrap span.gray {
  color: #707483;
}
.infobx-wrap span.indt {
  padding-left: 24px;
}

.dateperiod input[type="time"],
.dateperiod input[type="date"] {
  bbackground: #fff;
  /* 스타일을 여기에 추가 */
  position: relative;
}
.dateperiod input[type="time"]::-webkit-calendar-picker-indicator,
.dateperiod input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
.dateperiod input[type="time"] label,
.dateperiod input[type="date"] label {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  z-index: 2;
}
.dateperiod input[type="time"] label:before,
.dateperiod input[type="date"] label:before {
  content: "";
  width: calc(100% + 10px);
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: #f2f2f2;
}

.schwrap {
  position: relative;
}
.schwrap input[type="time"],
.schwrap input[type="date"] {
  /* 스타일을 여기에 추가 */
  position: relative;
}
.schwrap input[type="time"]::-webkit-calendar-picker-indicator,
.schwrap input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
.schwrap input[type="time"]::-webkit-clear-button, .schwrap input[type="time"]::-webkit-inner-spin-button, .schwrap input[type="time"]::-webkit-outer-spin-button,
.schwrap input[type="date"]::-webkit-clear-button,
.schwrap input[type="date"]::-webkit-inner-spin-button,
.schwrap input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.schwrap input[type="time"]::-moz-calendar-picker-indicator,
.schwrap input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}
.schwrap input[type="time"]::before {
  background-image: url(../img/common/ClockCircle.svg);
  background-size: 15px 15px;
  background-repeat: no-repeat;
}
.schwrap input[type="date"]::-webkit-inner-spin-button,
.schwrap input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.schwrap label {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  z-index: 2;
}
.schwrap label:before {
  content: "";
  width: calc(100% + 10px);
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: #f2f2f2;
}
.schwrap label:after {
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.schwrap label.date:after {
  background-image: url(../img/common/Calendar.svg);
  background-size: 15px 15px;
  background-repeat: no-repeat;
}
.schwrap label.time:after {
  background-image: url(../img/common/ClockCircle.svg);
  background-size: 15px 15px;
  background-repeat: no-repeat;
}

.highlighted { /*update hj 230828*/
  background: rgba(69, 147, 224, 0.2);
}

.normalBtn { /*update hj 230828*/
  position: relative;
  line-height: 29px;
  border: solid 1px #ccc;
  box-shadow: var(--shadow_content);
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
}

.eleSendBtn { /*update hj 230828*/
  border: solid 1px;
  border-right: none;
}

.blueBtn {
  position: relative;
  line-height: 29px;
  border: solid 1px #ccc;
  box-shadow: var(--shadow_content);
  padding: 10px;
  background-color: #1976D2;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}