@charset "UTF-8";

/***************************************************************************************************
	Font
***************************************************************************************************/
/* =========================
   1) Webfont: Pretendard
   - 형식 우선순위: woff2 > woff > otf
   - 필요 굵기만 남기면 성능↑ (예: 400/500/700)
   ========================= */
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"),
       url("../font/Pretendard/Pretendard-Light.woff2") format("woff2"),
       url("../font/Pretendard/Pretendard-Light.woff") format("woff"),
       url("../font/Pretendard/Pretendard-Light.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"),
       url("../font/Pretendard/Pretendard-Regular.woff2") format("woff2"),
       url("../font/Pretendard/Pretendard-Regular.woff") format("woff"),
       url("../font/Pretendard/Pretendard-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"),
       url("../font/Pretendard/Pretendard-Medium.woff2") format("woff2"),
       url("../font/Pretendard/Pretendard-Medium.woff") format("woff"),
       url("../font/Pretendard/Pretendard-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"),
       url("../font/Pretendard/Pretendard-SemiBold.woff2") format("woff2"),
       url("../font/Pretendard/Pretendard-SemiBold.woff") format("woff"),
       url("../font/Pretendard/Pretendard-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"),
       url("../font/Pretendard/Pretendard-Bold.woff2") format("woff2"),
       url("../font/Pretendard/Pretendard-Bold.woff") format("woff"),
       url("../font/Pretendard/Pretendard-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"),
       url("../font/Pretendard/Pretendard-Black.woff2") format("woff2"),
       url("../font/Pretendard/Pretendard-Black.woff") format("woff"),
       url("../font/Pretendard/Pretendard-Black.otf") format("opentype");
}
/* noto sans cjk kr */
@font-face {
	font-family:"Noto Sans KR";
	font-style: normal;
	font-weight: normal;
	src: local("Noto Sans CJK KR"), url("../font/NotoSansKR-Regular.otf") format("opentype"),
	url("../font/NotoSansKR-Regular.woff") format("woff"), url("../font/NotoSansKR-Regular.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family:"Noto Sans KR";
	font-style: normal;
	font-weight: 500;
	src: local("Noto Sans CJK KR Medium"), url("../font/NotoSansKR-Medium.otf") format("opentype"),
	url("../font/NotoSansKR-Medium.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family:"Noto Sans KR";
	font-style: normal;
	font-weight: bold;
	src: local("Noto Sans CJK KR Bold"), url("../font/NotoSansKR-Bold.woff") format("font-woff2"),
	url("../font/NotoSansKR-Bold.woff2") format("font-woff2");
	font-display: swap;
}


:root {
	--font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo",
               -apple-system, system-ui, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
               
    --font: "Noto Sans KR";   /* font-face 로 지정한 폰트명 */

    --normal: #313131;
    --primary: #15CED1;
    --secondary: #012C5F;
    --red: #FC523B;
    --red_light: #FF837E;   /* [2026-09-17] 삭제 버튼 — 모바일 common_m.css 와 같은 값 */

    --sub: #595959;
    --light: #959595;
    --placeholder: #C9C9C9;

    --border: #DCDCDC;
}



/***************************************************************************************************
	Reset
***************************************************************************************************/
body {-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {width: 100%; height:100%; margin:0; padding:0; -webkit-text-size-adjust:none;}
html, body, * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
html {font:normal 16px var(--font), 'arial', 'verdana', sans-serif; background:transparent;}
html {font:normal 16px "Pretendard", "Noto Sans KR", 'arial', 'verdana', sans-serif; background:transparent;}
body {min-height:100%; font-family: var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); background:transparent; word-break: break-all; overflow-wrap: break-word;}
body {min-height:100%; font-family: "Pretendard", 'arial', 'verdana', sans-serif; color:var(--normal); background:transparent; word-break: break-all; overflow-wrap: break-word;}

img {border:none;}
p, ul, li, ol, h1, h2, h3, h4, h5, h6, dl, dt, dd, em, figure {margin:0; padding:0; box-sizing: border-box;}
li {list-style:none; box-sizing: border-box;}
fieldset {margin:0; padding:0; border:none;}
legend {position:absolute; left:-1000px; top:-1000px; height:0; font-size:0; line-height:0; visibility:hidden;}
a {margin:0; color:var(--normal); text-decoration:none; box-sizing: border-box;}
table {border-collapse:collapse; font-size:1em;}
table caption {display:none;position:absolute; left:-999px; height:0; font-size:0; line-height:0; visibility:hidden; overflow:hidden;}
table td, table th {padding:0;}
button {margin:0; padding:0; font: 500 1em var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); vertical-align:middle; background:0; border:none; overflow:visible; cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);}
button:focus {outline:none;}
button:disabled {opacity: 0.2;}
input[type=text], input[type=password], input[type=number], input[type=tel], input[type=rang], input[type=email], input[type=url], input[type=date], input[type=datetime], input[type=month], input[type=tel], input[type=search], input[type=color] {
    display:inline-block; max-width: 100%; height: 40px; margin: 0; padding: 3px 10px; font: normal 1rem var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); vertical-align:middle;
    background:#fff; border:1px solid var(--border); border-radius: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
input::-webkit-input-placeholder {color: var(--placeholder);}
input[readonly] {color: var(--light); background-color: #EBEDF4;}
input.h02 {height: 50px; font-size: 1.25rem;}

input[type=text]:only-child, input[type=password]:only-child, input[type=search]:only-child, input[type=number]:only-child, input[type=date]:only-child, input[type=email]:only-child, input[type=tel]:only-child {max-width:100%; width:100%;}

input[type=number]::-webkit-input-placeholder {text-align:left;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; appearance:none; margin:0;}
input[type=number] {-moz-appearance:textfield; appearance:textfield;}
input[type="number"]:hover, input[type="number"]:focus {-moz-appearance:number-input; appearance:number-input;}

input[type=checkbox], input[type=radio] {margin:0; vertical-align:middle; font-size:1em; border:none; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
input[type=checkbox]:only-child, input[type=radio]:only-child {margin:0;}
input[type=checkbox] {min-width: 26px; height: 26px; background:url("../images/checkbox_off.svg") no-repeat center center; border:none;}
input[type=checkbox]:checked {background-image:url("../images/checkbox_on.svg");}
/*TODO*/
/*input[type=checkbox]:disabled {background-image: url("../images/checkbox_disabled.svg");}*/
input[type=checkbox]:checked:disabled {}
input.check02:checked {background-image:url("../images/checkbox_primary_on.svg") !important;}

input[type=radio] {min-width: 20px; height: 20px; background:url("../images/radio_off.svg") no-repeat left center; border:none;}
input[type=radio]:checked {background-image:url("../images/radio_on.svg");}
input[type=radio]:disabled {background-image: url("../images/radio_disabled.svg");}
input[type=radio]:checked:disabled {background-image: url("../images/radio_on_disabled.svg");}


input:focus, textarea:focus, select:focus {outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0.2);}
input:focus:not([type=checkbox]):not([type=radio]), select:focus, textarea:focus {border-color: var(--normal);}
input:disabled:not([type=radio]):not([type=checkbox]) {color: var(--disabled); border-color: #DBE0EA;}

select {margin:0; max-width:100%; height: 40px; padding: 0 40px 0 10px; font: normal .875rem var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); vertical-align:middle;
    background: url("../images/select_arrow.svg") no-repeat right center; background-color: #fff; border: 1px solid var(--border); border-radius: 0; -webkit-appearance:none; -moz-appearance:none; appearance:none; white-space:nowrap; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
/*
select:disabled {color: #B8BCC3; background-image: url("../images/select_arrow_disabled.svg"); background-color: #F4F6F9; opacity: 1;}
*/
select:disabled {opacity: 0.5;}
select.sm {height: 32px;}

label, label > span {vertical-align:middle;}
label input[type=checkbox] + *, label input[type=radio] + * {margin-left: 7px; vertical-align:middle;}
textarea {width:100%; padding: 10px; font:normal .875rem/1.33 var(--light), 'arial', 'verdana', sans-serif;
    background: #fff; border: 1px solid var(--border); border-radius: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    resize:none;
}
textarea[readonly=readonly] {background: #f6f6f6; box-shadow: none;}
textarea:only-child {vertical-align:top;}
textarea::-webkit-input-placeholder {font-size: .875rem; color: #b5b5b5;}
hr {height:0; margin: 14px 0; border:none; border-top:1px solid var(--border);}
div {box-sizing:border-box; -webkit-box-sizing:border-box;}
article, aside, footer, header, hgroup, nav, section, figure {display:block; padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;}
a[href^=tel] {text-decoration:underline;}
em, address {font-style:normal;}
em {color:var(--red);}
sub {font-weight:normal; vertical-align:middle;}
/* [2026-09-16] height:auto 추가 — img 에 width/height 속성을 넣어도 좌은 화면에서 찌그러지지 않게 한다.
   적용 시점에 height 속성을 가진 img 는 0건이라 기존 화면은 변화가 없다(속성이 없으면 원래 auto). */
img {max-width:100%; height:auto; vertical-align:top;}

del {text-decoration-color: var(--primary);}


/******** common class ********/
.vtop {vertical-align:top !important;}
.vmid {vertical-align: middle;}
.c_btn {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; margin: 30px 0; text-align:center;}
.c_btn:first-child {margin-top: 0;}
.c_btn:last-child {margin-bottom: 0;}
.c_btn > *:not(:first-child) {margin-left: 10px;}
.c_btn button, .c_btn a {-webkit-flex: 1; flex: 1;}
.c_btn02 {margin: 25px 0; text-align: center;}
.c_btn02 > button, .c_btn02 > a {min-width: 160px; margin: 0 4px;}
.pop_cont .c_btn02 > button {min-width: 120px;}
.c_btn02:last-child {margin-bottom: 0;}
.l_btn {margin: 10px 0;}
.l_btn:last-child {margin-bottom: 0;}
.r_btn {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; margin: 10px 0; text-align: right; justify-content: right;}
.r_btn > *:not(:first-child) {margin-left: 8px;}
.r_btn:last-child {margin-bottom: 0;}
.com_btn_area {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; margin: 10px 0; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px;}
.com_btn_area:first-child {margin-top: 0;}
.com_btn_area:last-child {margin-bottom: 0;}
.com_btn_area button, .c_btn a {-webkit-flex: 1; flex: 1;}
.com_btn_area .w_auto {-webkit-flex: 1; flex: none;}

.btn_list {display: block; margin: 15px 0 0;}
.c_btn.btn_list {display: block;}
.btn_list > button, .c_btn.btn_list > button {width: 100%; margin: 20px 0 0;}
.btn_list > button:first-child {margin-top: 0 !important;}
.btn_list:first-child {margin-top: 0;}
.btn_list:last-child {margin-bottom: 0;}
.font_normal {font-weight: normal !important;}
.text_right {text-align:right !important;}
.text_left {text-align:left !important;}
.cen {text-align:center !important;}
.hide {position:absolute !important; left:-10000px; top:-10000px; visibility:hidden;}
/* 2026-07-13 접근성: 화면엔 숨기되 스크린리더에는 전달(.hide는 visibility:hidden이라 SR도 숨겨짐).
   ⚠️ display/visibility를 명시해야 함 — `table caption{display:none;visibility:hidden}`(위 리셋) 때문에
   미선언 시 caption에 붙여도 SR에서 숨겨짐(클래스가 element보다 우선하나, 미선언 속성은 element 값 유지). */
.sr_only {position:absolute !important; display:block !important; visibility:visible !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.none {display:none !important;}
.ellipsis {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.ellipsis_line2 {display: -webkit-box; -webkit-box-orient: vertical; text-overflow:ellipsis; -webkit-line-clamp: 2; overflow:hidden;}
.nowrap {white-space: nowrap;}
.noimg img {display:none !important;}
.prewrap {white-space: pre-wrap;}
.word_keep {word-break:keep-all;}
.txt_underline {color:inherit; text-decoration: underline;}
.block {display: block !important;}
.dflex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.flex_column {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;}
.flex_cont {-webkit-flex: 1; flex: 1;}
.dflex .flex_cont:not(:first-child) {padding-left: 10px;}
.dflex button {margin: 0 5px;}
.dflex button:first-child {margin-left: 0;}
.dflex button:last-child {margin-right: 0;}
.space_between {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between;}
.space_between > * + * {margin-left: 20px;}
.flex_none {-webkit-flex: none !important; flex: none !important;}
.align_mid {-webkit-box-align: center; align-items: center; vertical-align: middle;}

.txt_nodata {margin: 10px 0; font-size: 1.125rem; color: var(--placeholder); text-align: center;}
table .txt_nodata {margin: 17px 0; font-size: 1rem; color: var(--light);}
.cont_box_sub .txt_nodata {margin: 30px 0;}

.pd0 {padding:0 !important;}
.mg0 {margin: 0 !important;}
.base_margin {margin: 10px 0;}
.base_margin:first-child {margin-top: 0;}
.base_margin:last-child {margin-bottom: 0;}
.nobg {background-color: transparent !important;}
.noborder {border: none !important;}
.bg_w {background-color: #fff !important;}
.bg_gray {background-color: #F6F7FB !important;}


/******************************/

.logo01 {height: 23px; margin-bottom: 10px; text-indent: -999px; background: url("../images/logo.svg") no-repeat center center; overflow: hidden;}
span.logo01 {display: inline-block; width: 116px; margin: 0; vertical-align: middle;}
.logo01.sm {width: 85px; height: 24px; background-size: 100% auto;}

/***** Layout *****/
.subWrap01 {position: relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-flex-direction: column; flex-direction: column; min-width: 1200px; min-height: 100%; background-color: #F6F7FB;}
.subWrap02 {position: relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-flex-direction: column; flex-direction: column; min-width: 1200px; min-height: 100%; background-color: #F6F7FB;}

.web_container {max-width: 1260px; margin: 0 auto; padding: 0 10px;}

.headerWrap {position: -webkit-sticky; position: sticky; top: 0; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; height: 70px; padding: 0; background-color: #fff; border-bottom: 1px solid #DCDCDC; z-index: 200;}
.headerWrap .logo {width: 240px; height: 70px; margin: 0 0 -1px; background: #15CED1 url("../images/logo_w.svg") no-repeat center center;}
.headerWrap .logo a {display: block; width: 100%; height: 100%; text-indent: -999em; opacity: 0;}
.GNBWrap {-webkit-flex: 1; flex: 1; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; padding: 15px 20px;}
.GNBWrap > * {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.menuWrap li {margin-right: 15px;}
.GNBWrap a {display: block; height: 100%; padding: 5px 10px 5px 40px; font-weight: 400; color: var(--light); line-height: 29px;}
.GNBWrap a.on {color: var(--normal);}
.menu_sms {background: url("../images/ico_menu_sms.png") no-repeat 10px center;}
.menu_sms.on {background: url("../images/ico_menu_sms_on.png") no-repeat 10px center;}
.menu_kakao {background: url("../images/ico_menu_kakao.png") no-repeat 10px center;}
.menu_kakao.on {background: url("../images/ico_menu_kakao_on.png") no-repeat 10px center;}
.menu_RCS {background: url("../images/ico_menu_RCS.png") no-repeat 10px center;}
.menu_RCS.on {background: url("../images/ico_menu_RCS_on.png") no-repeat 10px center;}
.menu_election {background: url("../images/ico_menu_election.png") no-repeat 10px center;}
.menu_election.on {background: url("../images/ico_menu_election_on.png") no-repeat 10px center;}
/* [2026-09-12] 기업전용서비스 — 아이콘만 SVG 다.
   기존 PNG 와 쓰는 방식(배경 이미지 + no-repeat 10px center)은 똑같고,
   색만 다른 3벌(흰색/회색/진회색)을 바이너리 없이 만들 수 있어 SVG 로 뒀다.
   모양은 사옥(빌딩)이라 말풍선·코인·주소록 등 기존 아이콘과 겹치지 않는다. */
.menu_corp {background: url("../images/ico_menu_corp.svg") no-repeat 10px center;}
.menu_corp.on {background: url("../images/ico_menu_corp_on.svg") no-repeat 10px center;}
.menu_charge {background: url("../images/ico_menu_charge.png") no-repeat 10px center;}
.menu_charge.on {background: url("../images/ico_menu_charge_on.png") no-repeat 10px center;}
.menu_sms {background: url("../images/ico_menu_sms.png") no-repeat 10px center;}
.utilWrap {margin-left: auto;}
.utilWrap > li > a {position: relative; padding: 5px 12px; font-size: 1rem; color: var(--normal);}
.utilWrap > li > a::before {content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background-color: var(--light);}
.utilWrap a.on {text-decoration: underline;}
.utilWrap > li:first-child a::before {display: none;}
.utilWrap .menu_out {margin-left: 40px; padding: 5px 34px 5px 10px; background: url("../images/ico_menu_out.png") no-repeat right center;}
.utilWrap .menu_out::before {display: none;}

/* [2026-09-15] 1440px 이하에서만 로그인 후 헤더를 2줄로 나눈다.
     윗줄 = 보조 링크(마이페이지·고객센터·로그아웃·나가기), 우측 정렬
     아랫줄 = 주 메뉴

   기업전용서비스 메뉴가 늘면서 한 줄에 로고 240 + 메뉴 668 + 우측 284 + 여백
   = 약 1,566px 이 필요해졌다. 1440px 아래에서는 글자가 2줄로 접히며 70px 헤더를
   넘어 겹쳐 보였다(`문자 발 / 송`).

   줄을 나누면 필요 폭이 948px 로 떨어져 본문 min-width(1200px) 안에서 여유가 생긴다.
   **1441px 이상은 기존 한 줄 배치를 그대로 둔다** — 그 폭에서는 겹치지 않는다.

   헤더 높이 70px 은 양쪽 모두 유지한다. 본문 위치·sticky 계산이 바뀌지 않는다.
   로그인 전 화면(.subWrap01)은 헤더 include 자체가 달라(sendm_public_header.jsp)
   영향받지 않으므로 .subWrap02 로 범위를 묶었다.

   order:-1 로 CSS 에서만 순서를 바꾼다. 마크업은 menuWrap 다음이 utilWrap 그대로라
   접근성 순서와 기존 JS 셀렉터가 유지된다. */
@media screen and (max-width: 1440px) {
    .subWrap02 .GNBWrap {-webkit-flex-wrap: wrap; flex-wrap: wrap; align-content: center; padding: 5px 20px;}
    .subWrap02 .GNBWrap a {white-space: nowrap;}
    .subWrap02 .menuWrap > li, .subWrap02 .utilWrap > li {-webkit-flex-shrink: 0; flex-shrink: 0;}

    .subWrap02 .GNBWrap > .utilWrap {-webkit-order: -1; order: -1; width: 100%; -webkit-justify-content: flex-end; justify-content: flex-end; margin-left: 0;}
    .subWrap02 .GNBWrap > .menuWrap {width: 100%;}

    .subWrap02 .utilWrap > li > a {padding: 0 9px; font-size: 0.8125rem; line-height: 20px;}
    .subWrap02 .utilWrap .menu_out {margin-left: 6px; padding: 0 24px 0 8px;}
    .subWrap02 .menuWrap a {line-height: 28px;}
}

@media screen and (max-width: 1280px) {
    .menuWrap li {margin-right: 5px;}
    .utilWrap a {padding: 5px 10px;}
    .utilWrap .menu_out {margin-left: 10px;}
}

/*** 로그인 전 화면 ***/
.subWrap01 .headerWrap {display: block; height: 80px;}
.subWrap01 .headerWrap .web_container {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; height: 100%;}
.subWrap01 .headerWrap .logo {width: 130px; height: 100%; margin-right: 35px; background: url("../images/logo.svg") no-repeat left center;}
.subWrap01 .GNBWrap {padding: 0;}
.subWrap01 .menuWrap {padding-top: 20px;}
.subWrap01 .menuWrap > li {margin-right: 15px;}
.subWrap01 .menuWrap > li > a {position: relative; padding: 5px 20px; font-weight: 500; font-size: 1.125rem; color: var(--normal);}
.subWrap01 .menuWrap > li:hover > a::before {content: ""; position: absolute; left: 50%; bottom: 0; width: 60px; height: 4px; margin-left: -30px; background-color: var(--primary);}
.subWrap01 .menuWrap > li > a.on::before {content: ""; position: absolute; left: 50%; bottom: 0; width: 60px; height: 4px; margin-left: -30px; background-color: #000;}
.sub_menuWrap {position: absolute; left: 0; top: 100%; width: 100%; height: 0; background-color: #fff; opacity: 0; overflow: hidden;}
.sub_menuWrap ul {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; max-width: 1260px; margin: 0 auto;}
.sub_menuWrap li:first-child a {padding-left: 10px;}
.sub_menuWrap a {display: block; height: 59px; padding: 10px 26px; font-size: 1rem; color: var(--light); line-height: 39px; white-space: nowrap; box-sizing: border-box;}
.sub_menuWrap a:hover {}
.sub_menuWrap a.sub_on {color: #000;}
.menuWrap li:hover .sub_menuWrap, .on + .sub_menuWrap {height: 61px; border: 1px solid var(--border); border-width: 1px 0; opacity: 1;}


.GNBWrap .btn_go_member {height: auto; margin: auto 0 auto auto !important; padding: 10px 40px 10px 10px; font-weight: 500; color: var(--normal) !important; line-height: 32px; background: url("../images/ico_go.svg") no-repeat right 1px center;}
.GNBWrap .btn_go_member > span:nth-child(1) { font-size: 1.125em; }
.btn_go_member .logo01 {margin-left: 10px; margin-top: -2px;}

.subWrap01 .contentsWrap {display: block;}

.key_visual {position: relative; overflow: hidden;}
.key_visual li {position: relative; min-height: 460px;}
.key_visual .image {position: absolute; left: 0; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-align: center; align-items: center; justify-content: center; overflow: hidden;
    background-color: #ffffff;}
.key_visual .image > span {display: block; height: 100%; text-align: center;}
.key_visual .image img {display: block; max-width: inherit; min-height: 100%;}
.key_visual .text_area {position: relative; padding: 87px 0 110px;}
.key_visual .text_area .tit {margin-bottom: 50px; font-weight: bold; font-size: 40px; line-height: 1.2;}
.key_visual .text_area a {position: relative; display: inline-block; padding: 2px 75px 2px 0; font-weight: 500; font-size: 22px;}
.key_visual .text_area a .logo01 {display: block; height: 20px; margin: 0 0 3px -6px; background-size: auto 100%;}
.key_visual .text_area a::after {content: ""; position: absolute; right: 0; top: 50%; width: 50px; height: 50px; margin-top: -25px; background: url("../images/ico_go.svg") no-repeat left center; background-size: 100% auto;}
.visual_paging {position: absolute; left: 0; bottom: 80px; width: 100%; z-index: 10;}
.visual_paging .swiper-pagination {position: static; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1260px; margin: 0 auto; padding: 0 10px;}
.visual_paging .swiper-pagination .swiper-pagination-bullet {width: 20px; height: 20px; margin-right: 30px; background-color: #D2D2D2; border-radius: 20px; opacity: 1; overflow: hidden;}
.visual_paging .swiper-pagination .swiper-pagination-bullet-active {width: 60px; background-color: var(--primary);}

.main_cont .web_container {padding-top: 50px; padding-bottom: 70px; overflow: hidden;}
.tit_main {margin: 20px 0 60px; font-size: 30px; text-align: center;}
.benefit_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.benefit_list li {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: calc((100% - 100px) / 3); min-height: 180px; margin: 40px 0 0 50px; padding: 20px 30px 20px 109px;
    -webkit-box-align: center; align-items: center; background-color: #fff; border-radius: 30px; box-shadow: 4px 4px 5px rgba(27, 27, 27, 0.1); box-sizing: border-box;
}
.benefit_list li:nth-child(-n + 3) {margin-top: 0;}
.benefit_list li:nth-child(3n + 1) {margin-left: 0;}
.benefit_list li::before {content: ""; position: absolute; left: 0; top: 0; width: 109px; height: 100%;}
.benefit_list dt {margin-bottom: 8px; font-weight: bold; font-size: 1.125rem;}
.benefit_list dd {color: var(--light); line-height: 1.57;}
.benefit_list .info {font-size: .875rem;}

.benefit_list .price::before {background: url("../images/ico_benefit_price.png") no-repeat center center;}
.benefit_list .recharge::before {background: url("../images/ico_benefit_recharge.png") no-repeat center center;}
.benefit_list .bill::before {background: url("../images/ico_benefit_bill.png") no-repeat center center;}
.benefit_list .reject::before {background: url("../images/ico_benefit_reject.png") no-repeat center center;}
.benefit_list .bulk::before {background: url("../images/ico_benefit_bulk.png") no-repeat center center;}
.benefit_list .photo::before {background: url("../images/ico_benefit_photo.png") no-repeat center center;}
.benefit_list .free::before {background: url("../images/ico_benefit_free.png") no-repeat center center;}
.benefit_list .speed::before {background: url("../images/ico_benefit_speed.png") no-repeat center center;}

.major_menu {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; justify-content: space-around;}
.major_menu li {padding-top: 168px; font-weight: 500; font-size: 1.125rem; text-align: center;}
.major_menu h3 {margin-bottom: 14px; font-size: 1.5rem;}
.major_menu .btn_area {margin-top: 12px;}
.major_menu .btn01 {font-size: .875rem;}
.major_menu .charge {background: url("../images/ico_major_charge.png") no-repeat center top;}
.major_menu .template {background: url("../images/ico_major_template.png") no-repeat center top;}
.major_menu .result {background: url("../images/ico_major_result.png") no-repeat center top;}

.main_notice {background-color: #E7FAF7;}
.main_notice .web_container {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 200px; padding-top: 40px; padding-bottom: 30px; overflow: hidden;}
.main_notice .web_container::before {content: ""; position: absolute; left: 50%; top: 50px; width: 1px; height: 80px; background-color: var(--border);}
.main_notice .web_container >  * {-webkit-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 0 78px;}
.main_notice .web_container >  *:first-child {padding-left: 10px;}
.main_notice .web_container >  *:last-child {padding-right: 10px;}
.main_notice .title_area {width: 30%; padding-top: 4px;}
.main_notice .tit {margin-bottom: 10px; font-size: 1.25rem;}
.main_notice .btn_more {padding: 5px 20px 5px 0; font-size: 1rem;}
/* 2026-07-14 min-width:0 추가 — 공지 제목이 길어지면서 드러난 버그 수정.
   ul 은 flex 아이템인데 기본 min-width:auto 라 min-content(제목이 white-space:nowrap 이라 500px+) 아래로 못 줄어든다.
   → 남는 공간이 음수가 되어 옆의 title_area(width:30%)가 min-content(약 34px)까지 찌그러졌고,
     그 안의 "공지사항"/"더보기 >" 가 word-break:break-all 을 만나 한 글자씩 세로로 쌓였다.
   → min-width:0 이면 ul 이 정상적으로 줄어들어 title_area 는 30%(165px)를 유지하고,
     span 의 text-overflow:ellipsis 가 비로소 발동해 긴 제목이 "..." 로 잘린다. */
.main_notice ul {-webkit-flex: 1; flex: 1; min-width: 0;}
.main_notice ul a {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 5px; font-size: 1rem; color: var(--light);}
.main_notice ul a > *:first-child {-webkit-flex: 1; flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.main_notice .date {margin-left: 10px;}

.member_join {color: #fff; text-align: center; background-color: var(--primary);}
.member_join .web_container {position: relative; padding-top: 28px; padding-bottom: 20px; overflow: inherit;}
.member_join .web_container::before {content: ""; position: absolute; right: 60px; bottom: 0; width: 275px; height: 157px; background: url("../images/img_main_join.png") no-repeat 0 0;}
.member_join h3 {font-size: 1.5rem;}
.member_join .c_btn02 {margin: 14px 0 0;}
.member_join .c_btn02 a {display: inline-block; min-width: 140px; height: 40px; padding: 5px 10px; font-weight: 500; font-size: 1.25rem; color: #fff; line-height: 30px; background-color: #045C7F; border-radius: 4px; box-sizing: border-box;}

.main_footerWrap {min-height: 320px; font-size: .875rem; color: rgba(255, 255, 255, 0.5); background-color: #515463;}
.main_footerWrap a {color: #fff;}
.main_footerWrap .web_container {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 35px 10px 20px;}
.copyright_cont {-webkit-flex: 1; flex: 1;}
.footer_menu {height: 72px; padding: 10px 0; border-bottom: 1px solid #383A45;}
.footer_menu ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1260px; height: 51px; margin: 0 auto;}
.footer_menu li {position: relative; padding-left: 1px;}
.footer_menu li::before {content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background-color: #73757C;}
.footer_menu a {display: block; height: 100%; padding: 5px 22px; font-size: 1rem; line-height: 41px; box-sizing: border-box;}
.footer_menu li:first-child::before {display: none;}
.footer_menu li:first-child a {padding-left: 10px;}
.main_footerWrap .logo {width: 133px; height: 27px; margin: 5px 0 26px; text-indent: -999em; background: url("../images/logo_w.svg") no-repeat center center; background-size: contain;}
.main_footerWrap .info dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 7px;}
.main_footerWrap .info dt {color: #fff; margin-right: 5px;}
.main_footerWrap .info dd + dt {margin-left: 20px;}
.main_footerWrap .copyright {margin-top: 20px;}
.customer_cont {min-width: 450px;}
.customer_cont h2 {margin-bottom: 12px; font-size: 1.125rem; color: #fff;}
.customer_cont .sns_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 30px;}
.customer_cont .sns_list li {margin-right: 5px;}
.customer_cont .sns_list a {display: block; min-height: 50px; padding: 5px 20px 5px 60px; color: rgba(255, 255, 255, 0.5); background-position: 0 0; background-size: auto; box-sizing: border-box;}


/*** sub page ***/
.sub_visual {background-color: #fff; overflow: hidden;}
.sub_visual .web_container {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 260px; padding-top: 60px; -webkit-box-align: center; align-items: center;}
.sub_visual .text_area {-webkit-flex: 1; flex: 1; padding: 30px 250px; font-weight: 500; font-size: 1.375rem; color: var(--light); text-align: center; line-height: 1.37;}
.sub_visual .tit {margin-bottom: 5px; font-size: 36px; color: var(--normal); line-height: 1.5;}
.sub_visual .image {position: absolute; top: 50%; right: 0; width: 230px; margin-top: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.sub_visual.pd0 .web_container {padding-top: 0;}
.sub_visual.pd0 .image {margin-top: 0;}


.sms_type_intro .web_container {padding: 80px 10px;}
.guide_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; text-align: center; overflow: auto;}
.guide_list li {position: relative; width: 300px; margin-right: 13px;}
.guide_list li:last-child {margin: 0}
.guide_list .cont {padding: 20px 10px; color: var(--light);}
.guide_list .tit {position: absolute; left: 0; top: 0; width: 100%; height: 53px; font-weight: 500; font-size: 1.125rem; color: #fff; line-height: 53px;}
.guide_list .stit {margin: 0 0 9px; font-weight: 500; font-size: 1.25rem; color: var(--normal);}
.guide_list em {color: var(--primary);}
.guide_list.sm {font-size: .875rem;}
.guide_list.sm .stit {font-size: 1.125rem;}

.info_cont .web_container {padding-top: 73px; padding-bottom: 80px; overflow: hidden;}
.info_cont .btn01 {height: 60px; font-size: 1.25rem; line-height: 40px;}
.info_cont .btn01:only-child {min-width: 530px;}
.info_cont hr {margin: 35px 0 32px;}
.info_cont .sub_title + hr {margin-top: -35px;}

.sub_title {margin-bottom: 70px; font-weight: 500; font-size: 1.125rem; color: var(--light); text-align: center;}
.sub_title .tit {margin-bottom: 8px; font-size: 1.75rem; color: var(--normal);}
.sub_title + .c_btn02 {margin-top: -40px;}
.sub_title .txt_r_info {margin-top: -10px; font-weight: normal; font-size: .875rem; color: var(--normal); text-align: right;}

.service_intro {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.service_intro > * + * {margin-left: 110px;}
.service_intro > * + .guide {margin-left: 50px;}
.service_intro .cont {-webkit-flex: 1; flex: 1; color: var(--light);}
.service_intro .cont .tit_cont {margin-bottom: 8px; font-size: 1.75rem; color: var(--normal);}
.service_intro dl {margin-bottom: 24px;}
.service_intro dt {font-weight: 500; font-size: 1.125rem; color: var(--normal);}
.service_intro .bul_list {line-height: 1.875;}
.service_intro .bul_list:last-child {margin-bottom: 0;}
.service_intro .bul_list li::before {top: .9375em;}
.service_intro .btn_area a {display: inline-block; min-width: 340px; height: 60px; padding: 15px 30px; font-weight: 500; font-size: 1.25rem; color: #fff; text-align: center; line-height: 30px; background-color: var(--primary); border-radius: 4px;}
.service_intro .btn_area a > span {position: relative; display: inline-block; padding-right: 45px;}
.service_intro .btn_area a > span::after {content: ""; position: absolute; right: 0; top: 50%; width: 33px; height: 33px; margin-top: -16.5px; background: url("../images/ico_go_w.svg") no-repeat left center; background-size: 100% auto;}
.service_intro.election dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 21px;}
.service_intro.election dt {position: relative; width: 190px; padding-left: 32px; font-weight: 500; font-size: 1.125rem; color: var(--normal);}
.service_intro.election dt::before {content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 27px; background: url("../images/checkbox_on.svg") no-repeat left center;}
.sub_dl {margin-left: 10px; font-size: .875rem;}
.sub_dl dt {margin-bottom: 2px; font-size: .875rem;}
.sub_dl + .sub_dl {margin-top: 14px;}
.bul_list + .sub_dl {margin-top: -14px;}
.sub_dl + .btn_area {margin-top: 33px;}

.api_case {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 23px;}
.api_case li {position: relative; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 140px; margin-right: 13px; padding: 20px; -webkit-box-align: center; align-items: center;
    background-color: #fff; border: 1px solid #E5E5E5; border-radius: 20px;}
.api_case .num {position: absolute; left: 17px; top: 12px; color: var(--primary);}
.api_case .txt {display: block; width: 100%; text-align: center;}
.api_main_function {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 32px 0 60px; overflow: auto;}
.api_main_function li {position: relative; width: 240px; height: 240px; margin-right: 10px; padding: 145px 20px 20px; font-weight: 500; font-size: 1.125rem; color: var(--normal); text-align: center; border: 1px solid #E5E5E5; border-radius: 300px; box-sizing: border-box;}
.api_main_function li:last-child {margin: 0;}
.api_main_function li::before {content: ""; position: absolute; left: 50%; top: 53px; width: 100px; height: 70px; margin-left: -50px;}
.api_main_function .sms::before {background: url("../images/ico_api_main_function01.png") no-repeat center center;}
.api_main_function .result::before {background: url("../images/ico_api_main_function02.png") no-repeat center center;}
.api_main_function .send_num::before {background: url("../images/ico_api_main_function03.png") no-repeat center center;}
.api_main_function .key::before {background: url("../images/ico_api_main_function04.png") no-repeat center center;}
.api_main_function .ip::before {background: url("../images/ico_api_main_function05.png") no-repeat center center;}

.api_service {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 40px;}
.api_service > * {-webkit-flex: 1; flex: 1; min-height: 380px; margin-right: 20px; padding: 30px 20px; border: 1px solid #E5E5E5; border-radius: 20px; box-sizing: border-box;}
.api_service .tit01 {margin-bottom: 24px;}
.language_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 63px;}
.language_list > * {position: relative; -webkit-flex: 1; flex: 1; padding: 94px 20px 10px; text-align: center;}
.language_list > *:not(:first-child)::before {content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #E5E5E5;}
.language_list dt {font-weight: bold; font-size: 1.25rem;}
.language_list dt::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 86px; background: url("../images/ico_api_language01.png") no-repeat center center;}
.language_list dd {color: var(--light);}
.language_list dd:nth-child(2) dt::before {background-image: url("../images/ico_api_language02.png");}
.api_service + .c_btn02 {margin-bottom: 30px;}

.tag_list {margin-top: 15px; text-align: center;}
.tag_box {display: inline-block; margin: 5px; padding: 2px 16px; font-size: .875rem; color: var(--normal); line-height: 26px; border: 1px solid var(--primary); border-radius: 30px;}

.charge_info {background-color: var(--primary);}
.service_charge {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 20px;}
.service_charge li {position: relative; -webkit-flex: 1; flex: 1; min-height: 280px; padding: 142px 20px 20px; font-size: 1.25rem; color: var(--normal); text-align: center; background-color: #fff; border-radius: 30px; box-sizing: border-box;}
.service_charge li:not(:first-child)::before {content: ""; position: absolute; left: 0; top: 30px; height: 140px; border-left: 1px dashed var(--border);}
.service_charge .image {position: absolute; left: 0; top: 52px; width: 100%; text-align: center;}
.service_charge li:hover .image { -webkit-animation: char_img .3s .2s forwards; animation: char_img .3s .2s forwards;}
.service_charge dt {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 50px; line-height: 1.2; -webkit-box-align: center; align-items: center;}
.service_charge dt > * {width: 100%;}
.service_charge dd {font-weight: bold; font-size: 2rem; color: var(--primary);}
.service_charge dd .unit {font-size: 1.5rem;}
.service_charge .txtc_light {font-size: 1.5rem; line-height: 1.95;}

@-webkit-keyframes char_img {
    40% {margin-top: -20px;}
    80% {margin-top: 2px;}
    100% {margin-top: 0;}
}
@keyframes char_img {
    40% {margin-top: -20px;}
    80% {margin-top: 2px;}
    100% {margin-top: 0;}
}

.charge_calculator {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 35px 20px; border: 1px solid var(--border); border-width: 1px 0;}
.sub_title + .charge_calculator {margin-top: -35px;}
.charge_calculator .charge {width: 480px;}
.charge_calculator .result {-webkit-flex: 1; flex: 1; margin-left: 20px;}
.charge_calculator .tit {margin-bottom: 15px; font-weight: 500; font-size: 1.125rem; text-align: center;}
.charge_input_box {height: 200px; padding: 24px 40px 15px; font-weight: 500; text-align: center; background-color: #F6F7FB; border: 1px solid #E5E5E5;}
.charge_input_box .info {font-size: .875rem; color: var(--light);}
.charge_input_box .form_row {margin: 25px 0 5px;}
.charge_input_box .form_row input {height: 50px; padding: 5px 20px; font-weight: bold; font-size: 1.5rem; text-align: right;}
.to_coin {font-weight: bold; font-size: 1.5rem; text-align: right;}
.to_coin em {color: var(--primary);}
.to_coin .unit {margin-left: 5px; font-weight: normal; font-size: 1.125rem; color: var(--normal);}
.charge_calculator .table02 td {padding-top: 5px; padding-bottom: 5px;}
.calculator_payment {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 30px 20px; font-size: 1.25rem; -webkit-box-align: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; border-bottom: 1px solid var(--border);}
.calculator_payment .amount_area {margin-right: 20px;}
.calculator_payment .amount {margin: 0 5px 0 24px; font-weight: bold; font-size: 36px; color: var(--primary);}
.calculator_payment .unit {font-weight: bold; font-size: 1.125rem;}
.calculator_payment button {min-width: 200px;}



/* 고객센터 dropdown menu */
.dropdownWrap {position: relative;}
.btn_dropdown {position: relative; padding-right: 25px !important;}
.btn_dropdown::after {content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("../images/btn_acc.svg") no-repeat center center;  -webkit-transition: all .2s linear; transition: all .2s linear;}
.dropdown_layer {position: absolute; top: 100%; left: 50%; min-width: 120px; height: 0; margin-top: 7px; background-color: #fff; white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden;}
.dropdown_layer::before {content: ""; position: absolute; left: 50%; top: -11px; width: 20px; height: 20px; margin-left: -10px; background-color: #fff; border: 1px solid #C9C9C9; border-width: 1px 0 0 1px; transform: rotate(45deg);}
.dropdown_layer a {display: block; padding: 5px 12px; font-size: .875rem; color: var(--light);}
.dropdown_layer .selected a {color: var(--normal); text-decoration: underline;}
.drop_open .btn_dropdown {color: var(--normal);}
.drop_open .btn_dropdown::after {-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
.drop_open .dropdown_layer {height: auto; padding: 10px 0; border: 1px solid #C9C9C9; overflow: inherit;}


.contentsWrap {position: relative; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}

/*.sub_menu_cont {position: -webkit-sticky; position: sticky; top: 70px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 240px; height: calc(100vh - 70px); -webkit-flex: none; flex: none; -webkit-flex-direction: column; flex-direction: column; color: #fff; background-color: #757986; overflow: auto; z-index: 100;}*/
.sub_menu_cont {position: -webkit-sticky; position: sticky; top: 70px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 240px; -webkit-flex: none; flex: none; -webkit-flex-direction: column; flex-direction: column; color: #fff; background-color: #757986; overflow: auto; z-index: 100;}

.sub_detail_cont {-webkit-flex: 1; flex: 1; max-width: 1190px; padding: 20px 190px 120px 30px;}
.sub_detail_cont_l {-webkit-flex: 1; flex: 1; max-width: 1400px; padding: 20px 190px 120px 30px;}
.sub_detail_cont_xl {-webkit-flex: 1; flex: 1; max-width: 1600px; padding: 20px 190px 120px 30px;}
/* [2026-10-07] flex 항목의 기본 min-width:auto 때문에 본문이 표(min-width 1100)보다 좁아지지 못해
   1366·1280 화면에서 페이지 전체가 가로 스크롤되고 표가 영역 밖으로 나갔다(발송내역 4개 화면).
   min-width:0 으로 본문이 화면에 맞게 줄고, 넓은 표는 원래 설계대로 .table02.scrollable 안에서 가로 스크롤된다. */
.sub_detail_cont, .sub_detail_cont_l, .sub_detail_cont_xl {min-width: 0;}

/***** 로그인 이후 layout *****/
.login_info {padding: 15px 15px 20px; background-color: #505463;}
.user_name {position: relative; margin-bottom: 9px; padding-right: 25px;}
.btn_setting {position: absolute; right: 0; top: 0; width: 20px; height: 25px; text-indent: -999em; background: url("../images/btn_setting.png") no-repeat center center;}
.btn_setting::before {content: ""; position: absolute; left: -5px; top: -5px; width: 30px; height: 35px;}
.my_coin {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 10px; font-size: .75rem; color: #fff; -webkit-box-align: center; align-items: center; background-color: #383B45;}
.my_coin .coin {-webkit-flex: 1; flex: 1; display: inline-block; min-width: 4em; font-weight: bold; font-size: 1.25rem; color: var(--primary); text-align: right;}
.my_coin .unit {margin: 0 8px 0 5px;}
.btn_charge {display: inline-block; min-width: 30px; padding: 1px 4px; color: var(--normal); line-height: 18px; text-align: right; background-color: var(--primary); border-radius: 2px;}
.sns_possible {margin-top: 4px;}
.sns_possible .tit {position: relative; padding: 12px 0 12px 32px; font-weight: 500; font-size: .875rem; border-bottom: 1px solid #383B45;}
.sns_possible .tit::before {content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 20px; margin-top: -8px; background: url("../images/ico_sms_w.png") no-repeat left center;}
.sns_possible dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 10px; font-size: .8125rem; -webkit-box-align: center; align-items: center;}
.sns_possible dt {position: relative; padding-left: 11px;}
.sns_possible dt::before {content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: #959595; border-radius: 4px;}
.sns_possible dd {-webkit-flex: 1; flex: 1; text-align: right;}
.sns_possible em {font-size: .875rem; color: var(--primary);}
.sns_possible .unit {margin-left: 5px;}

.sub_menu_wrapper {-webkit-flex: 1; flex: 1; }
/* scroll bar style
.sub_menu_cont::-webkit-scrollbar {width: 10px; height: 10px; -webkit-appearance: none;}
.sub_menu_cont::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.2); border-radius: 10px;}
.sub_menu_cont::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3); border-radius: 10px;}
*/
.sub_menu_wrapper a {color: #C2C3C8;}
.menu_row {border-bottom: 1px solid #686B79;}
.menu_row .title {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 55px; padding: 5px 10px; -webkit-box-align: center; align-items: center;}
.menu_row .title a {-webkit-flex: 1; flex: 1; padding: 5px 5px 5px 40px; font-size: .975rem; color: #fff; text-align: left;}
/*
.menu_row .btn_acc {position: relative; width: 30px; height: 45px; text-indent: -999em;}
.menu_row .btn_acc::after {right: 0; width: 13px; background: url("../images/btn_acc_menu.svg") no-repeat center center; -webkit-transition: all .2s linear; transition: all .2s linear;}
*/
/**2023-11-03 PATCH*/
.menu_row .btn_acc {width: calc(100%); text-indent: -999em;}
.menu_row .btn_acc::after {right: 20px; width: 13px; background: url("../images/btn_acc_menu.svg") no-repeat center center; -webkit-transition: all .2s linear; transition: all .2s linear;}
.menu_row:last-child {
        margin-bottom: 200px;
}
.sub_depth {height: 0; overflow: hidden; opacity: 0;}
.sub_depth a {display: block; padding: 10px 30px; font-size: .975rem;}
.sub_depth a.on, .sub_depth a:hover {background: #fff;color: var(--normal);}

.submenu_open .btn_acc::after {-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
.submenu_open .sub_depth {height: auto; padding-bottom: 15px; opacity: 1;}
.submenu_open .sub_depth li {min-height: 30px; list-style: none; box-sizing: border-box; display: list-item; text-align: -webkit-match-parent;}

.smenu_charge {background: url("../images/ico_submenu_charge.png") no-repeat left center;}
.smenu_corp {background: url("../images/ico_submenu_corp.svg") no-repeat left center;}
.smenu_sendresult {background: url("../images/ico_submenu_sendresult.png") no-repeat left center;}
.smenu_address {background: url("../images/ico_submenu_address.png") no-repeat left center;}
.smenu_call {background: url("../images/ico_submenu_call.png") no-repeat left center;}
.smenu_template {background: url("../images/ico_submenu_template.png") no-repeat left center;}
.smenu_rejectnum {background: url("../images/ico_submenu_rejectnum.png") no-repeat left center;}
.smenu_rcs {background: url("../images/ico_submenu_rcs") no-repeat left center;}
.smenu_election {background: url("../images/ico_submenu_election") no-repeat left center;}

/***** quick *****/
/* [2026-07-17] 중복 정의 정리 : `top:90px right:60px width:132px` 가 바로 아래 규칙에 덮여 죽은 코드였음 → 제거.
   (동일 선택자 2줄이 연속으로 있어 뒤가 항상 이겼다) */
.quickWrap {position: absolute; top: 150px; right: 20px; width: 130px; z-index: 50;}
.benefit {position: relative; min-height: 100px; padding: 45px 10px 5px; font-size: .8125rem; color: #434343; text-align: center; line-height: 1.15; background: var(--primary) url("../images/ico_quick_benefit_sms.png") no-repeat center 13px;}
.benefit em {position: absolute; left: 50%; top: 6px; width: 20px; height: 20px; margin-left: 9px; font-weight: 900; font-size: .625rem; color: #fff; text-align: center; line-height: 20px; background-color: #045C7F; border-radius: 20px;}
.quickWrap .box {padding: 10px 14px; font-size: .75rem; color: var(--light); background-color: #fff; border: 1px solid #eee;}
.quickWrap .box .tit {margin-bottom: 7px; font-weight: normal; font-size: .875rem; color: #434343;}
.quickWrap .box a {font-weight: normal; color: var(--light);}
.quickWrap .box  + .box {margin-top: -1px;}
.qmenu_list a {display: block; padding: 5px 0 5px 25px; text-align: left;}
.qmenu_list a.on {color: var(--normal);}
.qmenu_noti {background: url("../images/ico_qmenu_noti.png") no-repeat 1px center;}
.qmenu_noti.on {background-image: url("../images/ico_qmenu_noti_on.png");}
.qmenu_faq {background: url("../images/ico_qmenu_faq.png") no-repeat left center;}
.qmenu_inquiry {background: url("../images/ico_qmenu_inquiry.png") no-repeat left center;}
.qmenu_api {background: url("../images/ico_qmenu_api.png") no-repeat left center;}
.quickWrap .sns_list li {margin-top: 3px;}
.quickWrap .sns_list a {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 30px; padding: 5px 0 5px 40px; font-size: .8125rem; line-height: 1.2;}
.qmenu_kakao {background: url("../images/ico_sns_kakao.png") no-repeat left center; background-size: auto 30px;}
.qmenu_naver {background: url("../images/ico_sns_naver.png") no-repeat left center; background-size: auto 30px;}
.qmenu_telegram {background: url("../images/ico_sns_telegram.png") no-repeat left center; background-size: auto 30px;}
.qmenu_blog {background: url("../images/ico_sns_blog.png") no-repeat left center; background-size: auto 30px;}

.quickWrap .box .tel {display: block; padding: 5px 0; font-weight: bold; font-size: .875rem; color: #1B1B1B; text-decoration: none;}
.quickWrap .box .tel .area {font-size: .75rem;}
.quickWrap .box dl > * {display: inline;}
.remote_servie { text-align: center; background: #505463;}
.remote_servie a {display: block; height: 100px; padding-top: 60px; font-size: .8125rem; color: #fff; line-height: 1.23; background: url("../images/bg_remote.png") no-repeat center top;}

/* [2026-07-17] 중복 정의 정리 : `right:20px bottom:120px` 가 아래 규칙에 덮여 죽은 코드였음 → 제거. */
.btn_top {position: fixed; right: 60px; bottom: 220px; display: inline-block; width: 44px; height: 44px; text-indent: -999em; background: url("../images/btn_top.svg") no-repeat center top;}

.quickWrap.left {right: auto; left: 1270px;}

/* [2026-07-17] 좁은 화면에서 퀵메뉴 숨김.
   .quickWrap 은 position:absolute; right:20px 으로 본문 **바깥 우측**에 떠 있는데,
   본문(.subWrap02)이 min-width:1200px 라 화면이 좁아지면 퀵메뉴가 본문 위로 겹친다.
   1200(본문) + 130(퀵) + 여백 ≈ 1400 이 겹치기 직전이라 그 미만에서 숨긴다.

   ※ TOP 버튼은 유지한다. .btn_top 은 마크업상 .quickWrap 안에 있지만 position:fixed 라
     화면에 고정되므로, .quickWrap 을 통째로 숨기면 TOP 까지 사라진다.
     → .quickWrap 의 자식(.box/.remote_servie)만 숨기고 컨테이너와 .top 은 남긴다. */
@media screen and (max-width: 1400px) {
    .quickWrap > .box,
    .quickWrap > .benefit,
    .quickWrap > .remote_servie {display: none;}
}
@media screen and (max-width: 1450px) {
    .quickWrap.left {left: auto; right: 40px;}
    .btn_top {right: 78px;}
}
@media screen and (max-width: 1199px) {
    .quickWrap.left {right: auto; left: 1040px;}
    .btn_top {right: auto; left: 1061px;}
}
@media screen and (max-height: 810px) {
    .btn_top {left: auto; right: 100px; bottom: 25px;}
}


.footerWrap {position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; padding: 10px 50px; font-size: .75rem; color: var(--light); text-align: center; line-height: 29px; background-color: #fff; border-top: 1px solid #DCDCDC;}
.sub_menu_cont ~ .footerWrap {padding-left: 290px;}

/***** login *****/
.tit_lgin_intro {margin: 11px 0 30px; font-size: 1.5rem; text-align: center;}
.tit_lgin_intro strong {font-weight: 500;}
.loginWrap .inp_box {margin-bottom: 12px;}
.loginWrap .inp_box input {height: 50px;}
.login_option {margin: 6px 0 15px; font-size: .875rem; color: var(--light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;}
.loginWrap .c_btn {margin: 14px 0;}
/* =========================================================
   [2026-09-12] 로그인 / 회원가입 버튼 — 골격은 공통, 색만 다르게

   같은 자리에 세로로 붙어 있는 두 버튼인데 선언이 따로 놀아
   글자 크기(20px vs 16px)와 정렬 방식이 달라 미세하게 어긋나 보였다.
   골격(크기·정렬·글자·모서리)은 여기 한 곳에서만 선언하고,
   차이나는 것(면을 채우는가 / 테두리만 두는가)만 각자 둔다.

   영향 범위 : 두 클래스 모두 pc/login/login.jsp 에서만 쓴다.
     · 모바일 GNB 의 a.btn_login 은 common_m.css 와 mobile_gnb.jsp 인라인 스타일이
       따로 관리하며, 모바일은 이 파일(pc/css/common.css)을 읽지 않는다.
   ========================================================= */
.btn_login,
.btn-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1;
    /* 채움형에도 같은 두께의 투명 테두리를 줘서 두 버튼의 안쪽 크기를 맞춘다. */
    border: 2px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

/* 채움형 — 기본 동작(로그인) */
.btn_login {color: #fff; background-color: var(--primary); border-color: var(--primary);}
.loginWrap .tit {margin: 20px 0 15px; font-size: 1.25rem; text-align: center;}
.login_menu {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 15px; -webkit-justify-content: center; justify-content: center;}
.login_menu > * {position: relative; margin-left: 1px; padding: 2px 10px; font-size: 1rem; color: var(--normal); text-align: center;}
.login_menu > *::before {content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background-color: var(--light);}
.login_menu > *:first-child {margin: 0;}
.login_menu > *:first-child::before {display: none;}

.sns_login {margin-top: 15px;}
.sns_login button {width: 100%; height: 50px; border-radius: 4px;}
.sns_login button > span {position: relative; display: inline-block; padding-left: 42px;}
.sns_login button > span::before {content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px;}

.divider{
  position:relative; text-align:center; margin:18px 0;
}
.divider:before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:#e5e5e5;
}
.divider span{
  position:relative; background:#fff; padding:0 10px;
  font-size:12px; color:#999;
}

.btn_join {color: var(--primary);line-height: 23px;background-color: #fff;border: 1px solid var(--primary);}
/* 선형 — 보조 동작(회원가입). 골격은 위 공통 선언을 그대로 쓰고 색만 바꾼다. */
.btn-signup {color: var(--primary); background-color: #fff; border-color: var(--primary);
    transition: background-color .2s, color .2s;}
.btn-signup:hover {color: #fff; background-color: var(--primary);}

/* 회원가입 버튼의 "아이콘 자리" 제거.
   .sns_login button > span 의 padding-left:42px 와 34x34 ::before 는
   네이버·카카오 버튼의 아이콘 자리다. 회원가입 버튼은 같은 .sns_login 안에 있다는
   이유만으로 그 규칙을 함께 받아, 아이콘도 없는데 글자가 중심에서 21px 오른쪽으로
   밀려 있었다. (실측: 버튼 중심 864px / 글자 중심 885px)
   .sns_login button > span (0,1,2) 보다 높은 특정도가 필요해 클래스를 하나 더 건다. */
.sns_login .btn-signup > span {padding-left: 0;}
.sns_login .btn-signup > span::before {display: none;}

.c_btn.sns_login{
  display:flex;
  gap:10px;              /* 버튼 사이 간격 */
  align-items:stretch;   /* ⭐ 버튼 높이 동일하게 */
}

.btn_login_naver {color: #fff; background-color: #00C43A;}
.btn_login_naver > *::before {background: url("../images/ico_login_naver.png") no-repeat center center;}
.btn_login_kakao {color: #3C1D1E; background-color: #FAE100;}
.btn_login_kakao > *::before {background: url("../images/ico_login_kakao.png") no-repeat center center;}

.btn_login_naver,
.btn_login_kakao{
  display:flex;
  align-items:center;     /* 수직 중앙 */
  justify-content:center; /* 전체 가운데 */
  border:0;
  padding:0 12px;         /* 좌우 여백 */
  border-radius:10px;
  cursor:pointer;
}

.btn_login_naver span,
.btn_login_kakao span{
  display:flex;          /* ⭐ span도 flex로 */
  align-items:center;    /* 아이콘+텍스트 수직 중앙 */
  gap:8px;
  line-height:1;         /* ⭐ inline 기본 line-height 흔들림 제거 */
  font-size:14px;        /* 원하는 값 */
  font-weight:600;       /* 옵션 */
}

.btn_login_naver span::before,
.btn_login_kakao span::before{
  content:"";
  display:inline-block;
  width:20px;
  height:20px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px; /* ⭐ contain 말고 고정 추천 */
  flex:0 0 20px;
}

.btn_login_naver{
  color:#fff;
  background-color:#00C43A;
}
.btn_login_naver span::before{
  background-image:url("../images/ico_login_naver.png");
}

.btn_login_kakao{
  color:#3C1D1E;
  background-color:#FAE100;
}
.btn_login_kakao span::before{
  background-image:url("../images/ico_login_kakao.png");
}

/*** find id/pw ***/
.find_result .tit {padding-top: 60px; font-size: 1.5rem; text-align: center; background: url("../images/ico_find.png") no-repeat center top;}
.find_result .tit strong {font-weight: 500; color: var(--primary);}
.result_data {height: 120px; margin: 30px 0; padding: 25px; font-size: 40px; text-align: center; line-height: 78px; border: 1px solid var(--border);}
.find_result .tit.certify {background-image: url("../images/ico_certification.png");}



/***** 회원가입 *****/
.txt_join {margin-bottom: 20px; font-size: 1.5rem; text-align: center;}
.txt_join strong {font-weight: 500;}

/*** 약관 동의 ***/
.agree_list {margin: 30px 0;}
.agree_list .all_chk {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 60px; padding: 15px 20px; -webkit-box-align: center; align-items: center; color: #fff; background-color: var(--primary);}
.agree_list > ul {border: 1px solid var(--border); border-top: none;}
.agree_list > ul > li {position: relative; padding: 10px 40px 10px 19px; border-top: 1px solid var(--border);}
.agree_list li:first-child {border-top: none;}
.agree_list .btn_detail {left: auto; right: 0; width: 50px;}
.agree_list label {display: block;}
.agree_list li ul {margin: 15px 0 0 36px;}
.agree_list li li {margin-top: 10px;}

.join_complete {margin-top: 30px; padding-top: 60px; font-size: 1.5rem; text-align: center; background: url("../images/ico_join_complete.png") no-repeat center top;}
.join_complete strong {display: block; font-weight: 500;}
.user_info_box {margin: 24px 0 36px; border: 1px solid var(--border);}
.user_info_box .tit {height: 60px; margin: -1px -1px 0; padding: 15px 20px; font-weight: normal; font-size: 1.125rem; color: #fff; text-align: center; line-height: 30px; background-color: #818591;}
.user_info {padding: 35px 40px 36px 60px; font-size: 1rem; text-align: left;}
.user_info dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 12px; -webkit-box-align: center; align-items: center;}
.user_info dl:first-child {margin-top: 0;}
.user_info dt {position: relative; min-width: 110px; padding: 0 12px; font-size: .875rem; color: var(--light); box-sizing: border-box;}
.user_info dt::before {content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background-color: var(--light); border-radius: 4px;}
.user_info dt::after {content: ":"; position: absolute; right: 0; top: 0;}
.user_info dd {-webkit-flex: 1; flex: 1; padding-left: 28px ;}
.join_complete ~ .c_btn > * {-webkit-flex: 1 1 auto; flex: 1 1 auto;}

/* 회원탈퇴 */
.withdrawal_caution {max-width: 750px; margin: 25px auto; border-bottom: 1px solid var(--border);}
.withdrawal_caution dl {min-height: 33px; margin-top: 25px; padding-left: 70px;}
.withdrawal_caution dd {font-size: .875rem; color: var(--light);}
.withdrawal_caution .data {background: url("../images/ico_withdrawal_data.png") no-repeat left center;}
.withdrawal_caution .cash {background: url("../images/ico_withdrawal_cash.png") no-repeat left center;}
.withdrawal_caution .rejoin {background: url("../images/ico_withdrawal_rejoin.png") no-repeat left center;}
.withdrawal_caution .chk {margin: 38px 0 30px; font-size: .875rem; color: var(--light);}

/***** system message *****/
.system_error {position: relative; min-height: 100vh; font-size: 1.125rem; text-align: center; background-color: #F6F7FB;}
.system_error .wrapper {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.system_error h1 {padding-bottom: 128px; font-weight: normal; font-size: 30px; background: url("../images/ico_404.png") no-repeat center bottom;}
.system_error .code {display: block; font-size: 60px;}
.system_error .tit_sub {display: block; margin: 26px 0 11px;}
.system_error .txt_detail {font-size: .875rem; color: var(--light);}
.system_500 {background-image: url("../images/ico_500.png") !important;}



/***** tab *****/
.tab01 {margin: 25px 0; overflow-x: auto;}
.tab01:first-child {margin-top: 0;}
.tab01:last-child {margin-bottom: 0;}
.tab01 ul {display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; min-width: 100%;}
.tab01 li {position: relative; -webkit-flex: 1; flex: 1;}
.tab01 li:first-child {margin: 0;}
.tab01 button {position: relative; width: 100%; height: 50px; padding: 5px 15px; font-weight: 500; font-size: 1rem; color: var(--light); background-color: #E6E6E6; white-space: nowrap;}
.tab01 .on button {color: #fff; background-color: var(--primary);}
.tab02 {margin: 25px 0;}
.tab02:first-child {margin-top: 0;}
.tab02:last-child {margin-bottom: 0;}
.tab02 ul {display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex;}
.tab02 li {position: relative; -webkit-flex: 1; flex: 1; min-width: 128px; margin-right: 10px;}
.tab02 li:last-child {margin: 0;}
.tab02 a {display: block; height: 32px; margin: 0; padding: 5px 10px; font-size: .875rem; color: #626262; text-align: center; line-height: 20px; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 4px; white-space: nowrap; box-sizing: border-box;}
.tab02 .on a {color: #fff; background-color: var(--primary); border-color: var(--primary);}
.tab02 .item2 li {flex-basis: auto; min-width: 168px;}
.tab02 .item2 a {padding: 5px 20px;}
.tab02 .option {margin-left: auto;}
.tab02 select {height: 32px;}

.tab03 {margin: 20px 0; border-bottom: 1px solid #AEB1BB;}
.tab03 ul {display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; margin-bottom: -1px; padding: 0 5px 0 10px;}
.tab03 li {position: relative; -webkit-flex: 1; flex: 1; min-width: 100px; margin-right: 5px;}
.tab03 a {display: block; height: 32px; margin: 0; padding: 5px 10px; font-size: .875rem; color: #626262; text-align: center; line-height: 20px; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 4px 4px 0 0; white-space: nowrap; box-sizing: border-box;}
.tab03 .on a {color: #fff; background-color: var(--primary); border-color: var(--primary);}
/* [2026-07-17] 건수 색상.
   전역 규칙 `em {color:var(--red)}`(211행 부근) 때문에 em.count 가 빨간색으로 보이던 문제.
   선택 안 된 탭은 탭 글씨색(#626262)을, 선택된 탭은 흰색을 따르도록 명시한다. */
.tab03 .count {margin-left: 5px; font-size: .75rem; color: inherit;}

.step {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 20px 0; font-size: .875rem; color: var(--light); border-top: 1px solid #AEB1BB;}
.step li {-webkit-flex: 1; flex: 1; padding: 15px 5px 22px; text-align: center; border-bottom: 6px solid #E0E1E4;}
.step li > * {display: block;}
.step .no {font-size: 1.5rem;}
.step .cur {color: var(--normal); border-bottom-color: var(--primary);}




/***** button *****/
.btn01 {display: inline-block; min-width: 5em; height: 50px; padding: 10px 20px; font-weight: 500; color: #fff; background-color: var(--primary); border-radius: 4px; white-space: nowrap;}
/*2024-01-17 ADD MJ*/
.btn05 {display: inline-block; min-width: 5em; min-height: 32px; padding: 5px; font-size: .875rem; color: #fff; background-color: var(--primary); border: 1px solid #AEB1BB; border-radius: 4px;}
.btn05.yellow {color: #3c1d1e; background-color: #FAE100;}

.c_btn .btn01:only-child {font-size: 1.25rem;}
a.btn01 {line-height: 30px;}
.btn01.yellow {color: #3A1B1E; background-color: #FAE100;}
.btn01.gray {color: #fff; background-color: #818592;}
.btn01.sm {height: 32px; padding: 5px 20px; font-size: .875rem;}
a.btn01.sm {line-height: 22px;}
.btn02 {display: inline-block; min-width: 5em; height: 40px; padding: 5px 20px; font-size: .875rem; color: #fff; background-color: #818592; border-radius: 4px;}
.btn02.line {color: var(--normal); background-color: #fff; border: 1px solid #AEB1BB;}
.btn02.primary {background-color: var(--primary); border: 1px solid var(--primary);}   /* [2026-10-07] 본문 주요 버튼(btn02 크기 + 메인색). chDt 인라인 style 대체 */
.btn03 {display: inline-block; min-width: 5em; min-height: 32px; padding: 5px; font-size: .875rem; color: #626262; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 4px;}
.btn03.dark, .btn03.active {color: #fff; background-color: #818592; border-color: #818592;}
.btn03.dark.active {color: #fff; background-color: #505463; border-color: #505463;}
.c_btn .btn03 {-webkit-flex: 1; flex: 1;}
.btn04 {display: inline-block; min-width: 58px; height: 26px; padding: 2px 14px; font-size: .875rem; color: #fff; line-height: 20px; text-align: center; background-color: #818592; border: 1px solid #818592; border-radius: 4px;}
.btn04:disabled {color: #959595; background-color: #E5E5E5; border-color: #AEB1BB; opacity: 1;}
.c_btn .w_auto {-webkit-flex: none; flex: none;}
.btn_line {position: relative;  height: 50px; padding: 10px 20px; border: 1px solid #AEB1BB; border-radius: 4px; white-space: nowrap;}
a.btn_line, div.btn_line {-webkit-flex: 1; flex: 1; line-height: 28px;}
.btn_line input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.form_row button {height: 40px;}
.btn_link {display: inline-block; padding: 5px; text-decoration: underline;}
.btn_un_link {display: inline-block; padding: 5px;}

.bt_ico > *:first-child {position: relative; padding-left: 39px;}
.bt_ico > *:first-child::before {content: ""; position: absolute; left: 0; top: 50%; width: 39px; height: 40px; margin-top: -20px;}
.bt_ico.excel > *:first-child::before {background: url("../images/ico_bt_excel.png") no-repeat left center;}
.bt_ico.folder > *:first-child::before {background: url("../images/ico_bt_folder.png") no-repeat left center;}
.bt_ico.print > *:first-child {padding-left: 29px;}
.bt_ico.print > *:first-child::before {background: url("../images/ico_bt_print.png") no-repeat left center;}
.bt_ico.sample > *:first-child::before {background: url("../images/ico_bt_sample.png") no-repeat left center;}

.btn_sm {min-width: 4em; height: 32px; padding: 5px 10px; font-weight: normal; font-size: 1rem !important;}
.btn_md {min-width: 4em; height: 40px; padding: 5px 10px; font-weight: 500; font-size: 1rem !important;}


.btn_reset {padding: 4px 5px 4px 20px; font-size: .75rem; color: #434343; background: url("../images/ico_reset.png") no-repeat 5px center;}
.btn_all_del {padding: 4px 5px 4px 20px; font-size: .75rem; color: #434343; background: url("../images/btn_del_sm_black.svg") no-repeat 5px center;}
.btn_help {position: relative; width: 28px; height: 26px; text-indent: -999em; vertical-align: middle; background: url("../images/ico_help.svg") no-repeat center center;}
.btn_more {padding: 5px 0 5px 10px; font-size: .875rem;}
.btn_search {width: 40px; height: 40px; text-indent: -999em; background: url("../images/ico_search.svg") no-repeat center center;}
.btn_search02 {min-width: 40px; height: 32px; text-indent: -999em; background: var(--primary) url("../images/ico_search_w.svg") no-repeat center center; border-radius: 5px;}
.btn_edit {width: 40px; height: 40px; text-indent: -999em; background: url("../images/btn_edit.png") no-repeat center center;}
.btn_save {width: 40px; height: 40px; text-indent: -999em; background: url("../images/btn_save.png") no-repeat center center;}
.btn_del02 {width: 40px; height: 40px; text-indent: -999em; background: url("../images/btn_del02.svg") no-repeat center center;}

.btn_acc {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -999em;}
.btn_acc::after {content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("../images/btn_acc.svg") no-repeat center center; -webkit-transition: all .2s linear; transition: all .2s linear;}
.btn_close01 {width: 40px; height: 30px; text-indent: -999em; text-indent: -999em; background: url("../images/btn_close01.svg") no-repeat center center;}

.btn_detail {position: absolute; left:0; top:0; width:100%; height:100%; text-indent: -999em; font-weight: 500; font-size: 1.0625rem; color: var(--sub);}
.btn_detail.arrow::after {content: ""; position: absolute; right: 16px; top:0; width: 20px; height:100%; background: url("../images/ico_rarrow01.svg") no-repeat right center;}

/***** search *****/
.searchWrap {margin: 18px 0;}
.searchWrap select, .searchWrap input, .searchWrap button, .searchWrap a {height: 32px; font-size: .875rem;}
.searchWrap button, .searchWrap a {padding: 2px 14px; line-height: 28px;}
.search_row {margin-bottom: 16px;}

.board_search {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 17px 0 20px;}
.board_search .search_row {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-left: auto; -webkit-box-align: center; align-items: center;}
.board_search .search_row:last-child {margin-bottom: 0;}
.board_search .search_row > *:not(:first-child) {margin-left: 10px; margin-top: 0 !important;}
.board_search input, .board_search select, .board_search a, .board_search button {height: 38px;}
.board_search .search_row.full {flex: 1; margin-left: 0;}
.board_search > * + * {margin-left: 10px;}

.period {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.period input.inp_cal {max-width: 170px; font-size: .875rem;}
.period > span {margin: 0 10px;}
.period > span + input {margin: 0 !important;}





/***** title *****/
.tit01 {margin: 24px 0 15px; font-size: 1.25rem;}
.tit01:first-child {margin-top: 0;}
.tit02 {margin: 22px 0 11px; font-weight: 500; font-size: 1rem;}
.tit02:first-child {margin-top: 0;}
.tit02 strong {font-weight: 500; font-size: 1.125rem;}
.tit02.border {padding-bottom: 15px; border-bottom: 1px solid #AEB1BB;}
.tit03 {margin-bottom: 11px; font-weight: normal; font-size: .875rem;}
.tit_logo {position: relative; padding-right: 110px; font-weight: 500; font-size: 1.125rem; color: var(--normal);}
.tit_logo::after {content: ""; position: absolute; right: 0; top: 50%; width: 102px; height: 30px; margin-top: -15px; background: url("../images/logo.svg") no-repeat right center; background-size: contain;}

/***** text *****/
.txt01 {font-size: 1rem; color: var(--normal);}
.txt02 {font-size: .875rem; color: var(--normal);}
.txt03 {font-size: .875rem; color: var(--light);}
.unit {white-space: nowrap;}

.txt_num {font-weight: bold; font-size: 1.125rem; color: var(--primary);}
.txt_num + .unit {margin-left: 3px; color: var(--normal);}
.txt_inp_msg {margin: 5px 0; font-size: .75rem;}
.txt_caution {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: .75rem; color: var(--red); line-height: 1.34;}
.txt_caution .bul {padding-right: 5px;}
.txt_caution02 {margin: 1em 0; font-size: .875rem; color: var(--red);}
.txt_election {position: relative; display: inline-block; padding-right: 23px;}
.txt_election::after {content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("../images/ico_election.svg") no-repeat center center; border-radius: 20px; overflow: hidden;}
.txt_info {font-size: .875rem; color: var(--light);}
.txt_subinfo {font-size: .75rem; color: var(--light);}
.txt_bul {position: relative; margin: 15px 0; padding-left: 10px;}
.txt_bul::before {content: ""; position: absolute; left: 0; top: 0.71em; width: 4px; height: 4px; margin-top: -2px; background-color: var(--light); border-radius: 4px;}
.tit01 + .bul_list {margin-top: 13px;}

.txtc_normal {color: var(--normal) !important;}
.txtc_primary {color: var(--primary) !important;}
.txtc_light {color: var(--light) !important;}
.txtc_red {color: var(--red) !important;}


.fsize_normal {font-size: 1rem !important;}
.fsize_xlg {font-size: 1.25rem !important;}

.caution01 {margin-top: 22px; font-size: .875rem; color: var(--light);}
.caution01 dt {position: relative; margin-bottom: 5px; padding-left: 25px; font-weight: 500; font-size: 1rem; color: var(--normal);}
.caution01 dt::before {content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("../images/ico_caution.svg") no-repeat left center;}

.ico_check {display: inline-block; width: 26px; height: 26px; text-indent: -999em; background: url("../images/checkbox_on.svg") no-repeat center center; overflow: hidden;}


.txtbox01 {display: inline-block; height: 20px; margin: 0 5px; padding: 1px 7px; font-size: .75rem; color: var(--primary); text-align: center; line-height: 16px; border: 1px solid var(--primary); border-radius: 20px;}
.txtbox01.type02 {min-width: 60px; height: 24px; margin-right: 10px; vertical-align: middle; line-height: 20px;}
.txtbox01.type02:first-child {margin-left: 0}
.txtbox01.disabled {color: var(--light); background-color: #EBEDF4; border-color: var(--border);}
/* [2026-09-18] 테두리형 라벨 — 모바일 common_m.css .txtbox03 과 같은 모양·크기. .red 는 삭제 색(--red_light).
   작은 행 동작 버튼에도 쓴다(발신번호 목록 승인요청 [취소]). */
.txtbox03 {display: inline-block; min-width: 40px; padding: 0 10px; font-weight: bold; font-size: .75rem; color: #366CE8; text-align: center; line-height: 20px; background-color: #fff; border: 1px solid #366CE8; border-radius: 20px; white-space: nowrap; box-sizing: border-box;}
.txtbox03.red {color: var(--red_light); border-color: var(--red_light);}
button.txtbox03 {margin-left: 4px; vertical-align: middle;}
.txtbox02 {display: inline-block; min-width: 68px; height: 30px; margin: 0 5px; padding: 4px 19px; font-size: .875rem; color: var(--primary); text-align: center; line-height: 20px; border: 1px solid var(--primary); border-radius: 30px; box-sizing: border-box;}
.txtbox02:first-child {margin-left: 0;}
.txtbox02.primary {color: #fff; background-color: var(--primary);}
.txtbox02.light {color: var(--light); background-color: #F6F7FB; border: 1px solid #AEB1BB;}






/***** list *****/



.accWrap {border-top: 1px solid #E5E5E5;}
.acc_head {position: relative; padding: 15px 30px 15px 0; -webkit-box-align: center; align-items: center;}
.acc_tit {font-weight: normal; font-size: .875rem; color: var(--normal);}
.btn_acc {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -999em;}
.btn_acc::after {content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("../images/btn_acc.svg") no-repeat center center; -webkit-transition: all .2s linear; transition: all .2s linear;}

.acc_cont {height: 0; padding: 0; overflow: hidden; opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear;}

.open .acc_cont {height: auto; overflow: inherit; opacity: 1;}
.open .btn_acc::after {-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}


.bul_list {margin: 25px 0; font-size: 1rem; color: var(--light); line-height: 1.6;}
.bul_list:first-child {margin-top: 0;}
.bul_list li {position: relative; padding-left: 10px;}
.bul_list li::before {content: ""; position: absolute; left: 0; top: 0.71em; width: 4px; height: 4px; margin-top: -2px; background-color: var(--light); border-radius: 4px;}
.tit01 + .bul_list {margin-top: 13px;}
.write_form {margin: 15px 0;}
.bul_list.type02 li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 0;}
.bul_list.type02 li::before {display: none;}
.bul_list .bul {margin-right: 5px;}
.bul_list.primary li::before {background-color: var(--primary);}


.dlist01 {display: table; width: 100%; color: var(--normal);}
.dlist01 dl {display: table-row;}
.dlist01 dt, .dlist01 dd {display: table-cell; padding: 5px 0; vertical-align: middle; box-sizing: border-box;}
.dlist01 dt {position: relative; width: 20%; padding-right: 10px; font-size: .875rem; color: var(--light);}
.dlist01.colon dt::after {content: ":"; position: absolute; right: 0;}
.dlist01.colon dd {padding-left: 20px;}
.pop_cont .cont_box03 .dlist01 dt {padding-left: 20px; padding-right: 20px; white-space: nowrap;}




/***** grid *****/
.row {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.row > * {margin: 0 0 0 10px;}
.row > *:first-child {margin-left: 0;}
.row .inp_box {margin-top: 0;}
.col {-webkit-flex:1; flex:1; box-sizing: border-box;}
.col.auto {-webkit-flex: 0 1 auto; flex: 0 1 auto;}
.col-1 {max-width: 8.333%;}
.col-2 {max-width: 16.666%;}
.col-3 {max-width: 25%;}
.col-4 {max-width: 33.333%;}
.col-5 {max-width: 41.666%;}
.col-6 {max-width: 50%;}
.col-7 {max-width: 58.333%;}
.col-8 {max-width: 66.666%;}
.col-9 {max-width: 75%;}
.col-10 {max-width: 83.333%;}
.col-11 {max-width: 91.666%;}
.col-12 {min-width: 100%;}



/***** table *****/
.table01 table {width: 100%; font-size: .875rem; color: var(--light); border: 1px solid var(--border); border-collapse: collapse;}
.table01 th, .table01 td {padding: 10px; text-align: center; border: 1px solid var(--border);}
.table01 thead {color: var(--normal); background-color: #F6F7FB;}
.table01 thead th {font-weight: normal;}
.table01.sm th, .table01.sm td {padding: 5px;}
.table02 {margin: 10px 0;}
.table02 table {width: 100%; font-size: .875rem; background-color: #fff; border: 1px solid var(--border); border-collapse: collapse;}
.table02 th, .table02 td {padding: 10px; text-align: center; border: 1px solid var(--border);}
.table02 th {font-weight: normal; background-color: #EBEDF4;}
.table02 .bg {background-color: #F6F7FB;}
.table02 .unit {color: var(--normal);}
.table02.txtc_light thead {color: var(--normal);}

/* ------------------------------------------------------------------
   [2026-08-08] 리스트형 표 — 화면이 좁아도 세로로 깨지지 않게

   table-layout 이 auto 라 컨테이너가 좁아지면 브라우저가 셀을 강제로
   압축해 헤더가 한 글자씩 세로로 쌓였다. 아래 3가지로 해결한다.
     1) 래퍼를 가로 스크롤 박스로
     2) 표에 최소 폭을 줘서 그 아래로는 압축되지 않게
     3) 넘치는 글자는 줄바꿈 대신 ... 처리

   .table02 전체가 아니라 별도 클래스로 둔 이유 — table-layout:fixed 는
   colgroup 이 없는 표를 균등분할로 바꾼다. .table02 는 입력폼용 표에도
   쓰이므로 전역 적용하면 엉뚱한 화면이 틀어진다. 리스트 화면에만 붙인다.

   사용법 : <div class="table02 txtc_light scrollable">
   ------------------------------------------------------------------ */
.table02.scrollable {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;}
.table02.scrollable table {table-layout: fixed; min-width: 1100px;}
.table02.scrollable th, .table02.scrollable td {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 셀 안의 링크/텍스트도 같이 잘리도록 (a, span 이 셀보다 넓어지는 것 방지) */
.table02.scrollable td > a, .table02.scrollable td > span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

thead th > span {display: inline-block;}

.form_table table {width: 100%; font-size: .875rem; color: var(--light);}
.form_table th, .form_table td {padding: 10px 12px;}
.form_table th {font-weight: normal; color: var(--normal); text-align: left;}
.form_table th.vtop {padding-top: 20px;}
.group_type tr:first-child > * {padding-top: 20px;}
.group_type tr:last-child > * {padding-bottom: 20px;}
.group_type tr > *:first-child {padding-left: 30px;}
.group_type tr > *:last-child {padding-right: 30px;}
.form_table .bg {background-color: #F6F7FB; border-bottom: 1px solid #E0E1E4;}
.form_table th .btn_area {margin-top: 5px;}
.form_table th .btn_area button {height: 20px; padding: 2px 5px; font-size: .75rem; line-height: 1;}

.data_btn_area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 30px 0; padding-top: 29px; border-top: 1px solid var(--border)}
.data_btn_area:last-child {margin-bottom: 0;}
.data_btn_area .right {margin-left: auto;}
.data_btn_area button:not(:first-child) {margin-left: 10px;}
.data_btn_area button {min-width: 140px; height: 40px; padding: 5px 20px; font-weight: 500; font-size: .875rem;}
.data_btn_area.cen {display: block; text-align: center;}
.cont_box02 .data_btn_area {padding-top: 20px;}
.cont_box02 .write_form + .data_btn_area {margin-top: 15px;}

.board_list {margin: 20px 0 30px; font-size: .875rem; color: var(--light); text-align: center;}
.board_list table {width: 100%; border: 1px solid #AEB1BB; border-width: 1px 0;}
.board_list tr {border-bottom: 1px solid #E5E5E5;}
.board_list tr:last-child {border-bottom: 1px solid #AEB1BB;}
.board_list th, .board_list td {padding: 15px 10px;}
.board_list a {display: block; color: var(--normal); text-align: left;}
.board_list.link tr {position: relative;}
.board_list.link tr a::before {content: ""; position: absolute; left: 0; width: 100%; height: 100%; max-height: 50px; margin-top: -15px;}
.board_list.link tr > *:last-child {padding-right: 28px; background: url("../images/ico_rarrow01.svg") no-repeat right 10px center;}

.board_title {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 20px 0 0; padding: 16px 10px; border: 0 solid #AEB1BB; border-width: 1px 0;}
.board_title .title {-webkit-flex: 1; flex: 1; font-weight: 500; font-size: 1.125rem;}
.board_title .title > * {vertical-align: middle;}
.board_title .info {margin: auto 0 auto 44px; font-size: .875rem; color: var(--light);}
.board_cont {min-height: 200px; padding: 20px; font-size: .875rem; color: var(--light); line-height: 1; border-bottom: 1px solid #AEB1BB; white-space: pre-line;}


/*** paging ***/
.paging {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; margin: 30px 0 15px; text-align: center;}
.paging a {display: inline-block; width: 30px; height: 30px; font-weight: normal; font-size: 1rem; color: var(--light); text-align: center; line-height: 28px; border-radius: 4px; box-sizing: border-box;}
.paging > a:not(.btn01) {background-color: #fff !important; border: 1px solid #AEB1BB;}
.paging > a + a {margin-left: 10px}
.paging ol {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 20px;}
.paging ol a {width: auto; padding: 0 3px;}
.paging li + li {margin-left: 5px;}
.paging .cur a {color: var(--normal);}
.btn_page {text-indent: -999em !important; overflow: hidden;}
.btn_page.fir {background: url("../images/btn_page_fir.svg") no-repeat center center;}
.btn_page.prev {background: url("../images/btn_page_prev.svg") no-repeat center center;}
.btn_page.next {background: url("../images/btn_page_next.svg") no-repeat center center;}
.btn_page.end {background: url("../images/btn_page_end.svg") no-repeat center center;}

.paging .btn01 {position: absolute; right: 0; top: 50%; width: auto; height: 32px; margin-top: -16px; padding: 1px 20px;}


/*** FAQ ***/
.faq_list {margin: 20px 0; border: 0 solid #AEB1BB; border-width: 1px 0;}
.faq_list li {border-bottom: 1px solid #E5E5E5;}
.faq_list li:last-child {border: none;}
.faq_list .acc_head {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 15px 40px 15px 10px; -webkit-box-align: center; align-items: center;}
.faq_list .acc_tit {-webkit-flex: 1; flex: 1; padding: 0 10px;}
.faq_list .category {min-width: 8em; font-size: .875rem; color: var(--primary);}
.faq_list .date {font-size: .875rem; color: var(--light);}
.faq_list .btn_acc::after {right: 5px;}
.faq_list .acc_cont {padding: 0 !important; background-color: #F6F7FB;}
.faq_list .acc_cont .board_cont {margin: 0; padding: 15px 20px 15px 122px; font-size: .9375rem; color: var(--light); border-top: 1px solid #E5E5E5;}

/*** 1:1 ***/
.answer_cont {position: relative; padding: 34px 20px 20px 90px; font-size: .875rem; color: var(--light); background: #F6F7FB url("../images/ico_answer.svg") no-repeat 20px 36px; border: 1px solid var(--border);}
.answer_cont .board_cont {padding: 0; border: none;}
.answer_cont .reg_date {margin-top: 20px;}



/***** form *****/
.inp_box {position: relative; margin-top: 12px;}
.inp_box:first-child {margin-top: 0;}
.inp_box .inp {position: relative;}
.inp_box label {display: block; margin-bottom: 5px; font-size: .875rem;}
.inp_box input {width: 100%; text-overflow: ellipsis;}
.inp_box button {position: absolute; top: 0; display: none; height: 100%;}
.btn_inp_del {right: 0; min-width: 40px; height: 42px; text-indent: -999em; background: url("../images/btn_inp_del.svg") no-repeat center center;}
.btn_inp_text {right: 5px; width: 32px; height: 42px; text-indent: -999em; background: url("../images/btn_inp_text_hide.png") no-repeat center center;}
.btn_inp_text.show {background-image: url("../images/btn_inp_text_show.png");}
.btn_inp_text::before {content: "Hide";}
.btn_inp_text.show::before {content: "Show";}
.btn_inp_text + .btn_inp_del {right: 37px; width: 30px;}
.inp_box.active input {padding-right: 45px;}
.inp_box.active input[type=password] {padding-right: 75px;}
.inp_box.active button {display: inline-block;}
.inp_box .btn_area {position: absolute; top: 0; right: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%;}
.inp_box .btn_area button {position: static;}
.inp_box .btn_area button:not(.btn_inp_del) {display: inline-block;}

.form_row {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 12px;}
.form_row:first-child {margin-top: 0;}
.form_row .inp_box {margin-top: 0;}
.form_row_wrapper .label {display: block; width: 100%; margin-bottom: 5px; font-size: .875rem; margin-top: 12px;}
.form_row_wrapper:first-child {margin-top: 0;}
.form_row_wrapper .form_row {margin: 0;}
.form_row.email .inp {min-width: 30%;}
.form_row.email .txt {margin: auto -3px auto 7px; font-size: 1.25rem; color: var(--normal);}
.form_row.email .inp:first-child {-webkit-flex: 1; flex: 1;}
.form_row.email select {min-width: 140px; margin-left: 5px;}
.form_row > * + * {margin-left: 10px;}
.form_row > *:only-child {-webkit-flex: 1; flex: 1;}
.form_row .form_row {margin: 0;}
.form_datetime {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 10px; -webkit-box-align: center; align-items: center;}
.form_datetime:first-child {margin: 0;}
.form_datetime > * {margin-left: 10px;}
.form_datetime > *:first-child {margin-left: 0;}
.form_datetime input {max-width: 210px !important;}
.form_datetime .time {-webkit-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 110px; margin-left: 10px; -webkit-box-align: center; align-items: center;}
.form_datetime .time select {-webkit-flex: 1; flex: 1;}
.form_datetime .time .unit {margin-left: 5px;}
.form_datetime label {min-width: 90px;}
.form_datetime label + * {width: 110px; max-width: 110px;}
.form_datetime > .unit {flex: none; min-width: 40px; margin-left: 5px;}
.form_datetime > .unit + * {width: 90px;}


.form_inline_list > label {display: inline-block; margin: 5px 27px 5px 0;}
.form_inline_list > label:last-child {margin-right: 0 !important;}
.marketing_chk > label {margin-right: 25px; letter-spacing: -0.01em;}
.row_type .form_inline_list > label {margin-right: 20px;}

.write_form {margin: 30px 0; font-size: .875rem; color: var(--light);}
.write_form > dl:not(:first-child) {margin-top: 12px;}
.write_form dt {margin-bottom: 5px; color: var(--normal);}
.write_form + .write_form {margin-top: -20px;}
/*
.write_form.line > dl, .write_form.line > .row_type {margin: 0; padding: 15px 0; border-top: 1px solid #E5E5E5;}
*/
.write_form.line > dl, .write_form.line > .row_type {margin: 0; padding: 5px 0;}
.write_form .vtop {margin-bottom: auto;}
.optWrap + form .write_form {margin-top: 0;}
.row_type {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 10px; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center;}
.row_type:first-child {margin-top: 0;}
.row_type dt {min-width: 25%; margin: 0; padding: 5px 20px 5px 0;}
.row_type dt.vtop {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 40px; margin: 0 0 auto; -webkit-box-align: center; align-items: center;}
.row_type dd {-webkit-flex: 1; flex: 1;}
.row_type dd > select:only-child, .row_type dd > .btn03:only-child {min-width: 226px;}

/* [2026-07-17] select + 버튼을 한 줄에 두는 행의 표준. 반드시 dd 하나에 select 와 버튼을 함께 넣고
   그 dd 에 sel_btn_row 를 준다.  <dd class="form_inline_list sel_btn_row">
   - 배경: dd 를 2개로 나누면 .row_type dd{flex:1} 때문에 각 50%를 차지해 서로 맞닿고,
           하나로 합쳐도 간격이 inline 공백에 의존해 화면마다 제각각이었다(발신번호/브랜드/채널ID/템플릿 행).
   - 높이: select 는 height:40px 고정인데 .btn03/.btn05 는 min-height:32px 라 8px 어긋나므로 40px 로 맞춘다.
   - 전용 클래스인 이유: .form_inline_list 는 라디오/체크박스 라벨 행에도 13곳 쓰이므로
     거기에 flex 를 걸면 그 행들이 깨진다. 따라서 이 패턴에만 쓰는 클래스를 별도로 둔다. */
.row_type dd.sel_btn_row {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center; gap: 8px;}
/* [2026-07-17] dt 아래로 밀려 내려가는 것 방지.
   `.row_type` 에 flex-wrap:wrap 이 있어(1290행), option 문구/브랜드명이 길어 select 가 커지면
   dd 가 **다음 줄로 줄바꿈**되어 라벨(dt)만 남는 현상이 있었다(/rcs/bizRcs 브랜드 선택).
   dd 를 줄이지 못하게 막고(min-width:0) select 는 넘치면 말줄임 처리해 항상 한 줄에 유지한다. */
.row_type dd.sel_btn_row {-webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0;}
.row_type dd.sel_btn_row > select {-webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; text-overflow: ellipsis;}
.row_type dd.sel_btn_row > .btn03,
.row_type dd.sel_btn_row > .btn05 {-webkit-flex: 0 0 auto; flex: 0 0 auto; height: 40px;}
.row_type .full {min-width: 100%; margin-top: 12px;}
.row_type dd .form_row:only-child {justify-content: flex-end;}
dt.chk_type_dt {padding-right: 0;}
.chk_type_dt + dd {padding-left: 36px;}
div.row_type {color: var(--normal); -webkit-box-align: center; align-items: center;}
.pop_cont .row_type dt {min-width: 6em;}

.write_form.st02 {display: table; width: 100%; max-width: 750px; margin: 0 auto;}
.write_form.st02 > dl {display: table-row;}
.write_form.st02 dt, .write_form.st02 dd {display: table-cell; margin: 0; padding-top: 10px; padding-bottom: 10px; vertical-align: middle; box-sizing: border-box;}
.write_form.st02 dt {width: 20%; padding-right: 20px;}
.write_form.st02 dt.form_vtop {vertical-align: top; line-height: 40px;}
.pop_cont .write_form.st02 {max-width: 100%;}

.write_form.border {margin-top: 18px; border: 1px solid var(--border); border-width: 1px 0;}
.write_form.border:first-child {margin-top: 0; border-top: none;}
.write_form.border dl:first-child > * {padding-top: 20px;}
.write_form.border dl:last-child > * {padding-bottom: 20px;}
.write_form.border:first-child dl:first-child {padding-top: 10px;}

/* [2026-07-22] 회원 정보 / 기업 정보 입력영역 카드형 분리 */
.sec_card {margin: 18px auto; padding: 22px 26px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-sizing: border-box;}
.write_form.sec_card {margin: 18px auto;}
.write_form.sec_card + .write_form.sec_card {margin-top: 18px;} /* .write_form + .write_form 음수마진 상쇄 */
.write_form.st02.sec_card {max-width: 750px;} /* st02 표 레이아웃 폭 유지 + 카드 패딩 적용 */
.sec_card > .join-sec:first-child, .sec_card > h3:first-child {margin-top: 0;}
.sec_card_title {max-width: 750px; margin: 18px auto 0;} /* 카드 위 섹션 제목(표 카드용, 항상 카드와 좌우폭 정렬) */


@media screen and (max-width: 1260px) {
    .form_datetime input:not(.inp_cal) {max-width: 120px !important;}
    .form_datetime input.inp_cal {max-width: 160px !important;}
    .form_datetime label + * {width: 70px; max-width: 70px;}
    .form_datetime > .unit + * {width: 70px;}
    .chk_type_dt + dd {padding-left: 20px;}
}

.popcont_group {margin: -25px -30px 0; padding: 25px 30px; background-color: #F6F7FB; border-bottom: 1px solid #E0E1E4;}


.file_upload_list {display: table; width: 100%; margin: 7px 0; border: 1px solid var(--border); border-width: 1px 0; border-collapse: collapse;}
.file_upload_list dl {display: table-row; margin: 0; border-bottom: 1px solid var(--border);}
.file_upload_list dl > * {display: table-cell; padding-top: 6px; padding-bottom: 6px; vertical-align: middle}
.file_upload_list dt {position: relative; width: 10%; padding-left: 22px; padding-right: 10px; white-space: nowrap;}
.file_upload_list dt::before {content: ""; position: absolute; left: 10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background-color: var(--light); border-radius: 5px;}
.fileWrap {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center; font-size: .75rem; color: var(--primary);}
.inp_file {position: relative; margin-right: 12px;}
.inp_file label {display: inline-block; width: 96px; height: 26px; font-size: .875rem; color: #626262; text-align: center; line-height: 24px; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 4px; cursor: pointer;}
.inp_file input {position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; opacity: 0; cursor: pointer;}
.file_name {position: relative; padding-right: 40px;}
.write_form .file_name {position: absolute; left: 110px; top: 50%; max-width: calc(100% - 110px); padding-right: 40px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.file_name_txt {display: inline-block; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.file_name .btn_del {position: absolute; right: 0; top: 50%; width: 40px; height: 30px; margin-top: -15px; text-indent: -999em; background: url("../images/btn_del01.svg") no-repeat center center;}

.att_file_list {margin-top: 20px;}
.att_file_list li {margin-top: 10px;}
.att_file_list .fileWrap {font-size: .875rem;}
.att_file_list .txt_guide {color: #C9C9C9;}

.msg_regWrap {position: relative;}
.reg_box {position: relative; background-color: #fff; border: 1px solid var(--border);}
.reg_box textarea {vertical-align: top; border: none;}
.reg_box textarea:only-child::-webkit-input-placeholder {text-align: center;}
.reg_box .input_info {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 30px; padding: 0 10px; font-size: .75rem; color: var(--light); -webkit-box-align: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end;}
.reg_box .text {position: relative; margin-left: 5px; padding-left: 10px; line-height: 1.5;}
.reg_box .text::before {content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -5px; background-color: var(--light); opacity: .5;}
.reg_box .text:first-child:before {display: none;}
.reg_box .input_info strong {font-weight: normal; color: #434343;}
.reg_box .txt_nodata {position: absolute; left: 0; top: 50%; width: 100%; margin: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.reg_box + .c_btn {margin-top: 10px;}
.add_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 55px; padding: 11px 1px 11px 11px; flex-wrap: wrap;}
.btn_data_del {min-width: 120px; height: 24px; padding: 0 25px 0 11px; font-size: .75rem; color: #434343; text-align: left; background: #EBEDF4 url("../images/btn_del_sm.svg") no-repeat right 10px center; border-radius: 30px;}
.btn_data_del::after {content: "삭제"; position: absolute; opacity: 0;}
.add_list button {margin: 0 10px 10px 0;}
.msg_layer {position: absolute; left: 0; top: 100%; width: 100%; height: 0; padding: 0 5px; background-color: #fff; border: 0 solid #AEB1BB; overflow: hidden; opacity: 0; -webkit-transition: all .3s linear; transition: all .3s linear; z-index: 100;}
.msg_layer .cont {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; z-index: 10;}
.msg_layer p {width: 100%; margin-bottom: 10px; padding: 0 8px; font-weight: 500; box-sizing: border-box;}
.msg_layer a {display: inline-block; min-width: 30px; margin: 3px 5px; padding: 5px; text-align: center; box-sizing: border-box;}
.btn_layer_close {position: fixed; left: 0; top: 0; width: 0; height: 0; opacity: 0; cursor: auto;}
.msg_layer.show {height: auto; margin-top: 5px; padding: 5px; border-width: 1px; overflow: inherit; opacity: 1;}
.msg_layer.show .btn_layer_close {width: 100%; height: 100%; z-index: 1;}
.msg_layer.emoticon a {min-width: 40px;}
.msg_layer.variable .cont {padding: 10px 0; justify-content: space-between;}
.msg_layer.variable a {min-width: 30px;}
.modalWrap .msg_layer {position: static; width: auto; max-width: 840px; height: auto; margin: 0 -10px; padding: 0; opacity: 1;}
/***** file upload *****/
.upload_file_Wrap {position: relative; margin: 20px 0; background-color: #F6F7FB; border: 1px solid var(--border);}
.upload_file_Wrap .add_list {min-height: 68px;}
.upload_file_Wrap:last-child {margin-bottom: 0;}



.switch_list {display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex;}
.switch_list label {position: relative; display: inline-block; width: 110px; -webkit-flex: 1; flex: 1; margin-left: 6px; white-space: nowrap;}
.switch_list label input {position: absolute; opacity: 0;}
.switch_list label input + * {display: block; height: 32px; margin: 0; padding: 5px 10px; font-size: .875rem; color: #626262; text-align: center; line-height: 20px; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 4px; box-sizing: border-box;}
.switch_list label:first-child {margin: 0;}
.switch_list input:checked + * {color: #fff; background-color: var(--primary); border-color: var(--primary);}
.optWrap > .switch_list:first-child {flex: none !important;}
.row_type .switch_list label {min-width: inherit;}
.switch_list.kakao input:checked + * {background-color: #3C1D1E; border-color: #3C1D1E;}


input.inp_cal {min-width: 120px; max-width: 210px; padding-right: 40px; background: #fff url("../images/ico_calendar.svg") no-repeat right 10px center;}


/***** sort *****/
.sortWrap {margin: 20px 0;}
.sortWrap ol {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap;}
.sortWrap li {margin-right: 5px; margin-top: 4px;}
.sortWrap label {position: relative; display: inline-block; white-space: nowrap;}
.sortWrap label input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.sortWrap label input + * {display: inline-block; min-width: 38px; height: 32px; margin: 0; padding: 2px 6px; font-size: .875rem; color: #626262; text-align: center; line-height: 26px; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 4px; box-sizing: border-box;}
.sortWrap .text input + * {min-width: 78px;}
.sortWrap input:checked + * {color: #fff; background-color: var(--primary); border-color: var(--primary);}

@media screen and (max-width: 1320px) {
    .sortWrap label input + * {min-width: 32px;}
    .sortWrap .text input + * {min-width: 60px;}
}

.edit_list {margin-top: 20px; border: 0 solid #eaeaea; border-width: 1px 0;}
.edit_list li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 10px 0; border-top: 1px solid #eaeaea;}
.edit_list li:first-child {border: none;}
.edit_list .inp {margin-right: 10px;}
.edit_list input[readonly] {color: var(--normal); background-color: transparent; border: none;}



/********** contents style **********/
.ui_column {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.ui_column > * {min-width: 310px;}
.ui_column > * + * {margin-left: 40px;}

.cont_group {margin: 40px 0;}

.cont_box01 {width: 580px; margin: 58px auto 100px; padding: 30px; background-color: #fff; border: 1px solid #E5E5E5; border-radius: 10px;}
.cont_box01.sm {width: 500px;}
.cont_box02 {margin: 28px 0; padding: 30px; background-color: #fff; border: 1px solid #E5E5E5; border-radius: 10px;}
.cont_box02 .container {max-width: 750px; margin: 0 auto;}
.cont_box03 {margin-bottom: 29px; padding: 10px 20px; background-color: #fff; border: 1px solid #E5E5E5;}
.cont_box03 + .txt_info {margin-top: -19px;}
.cont_box_sub {max-width: 750px; margin: 20px auto; padding: 20px 0; border-top: 1px solid var(--border);}
.cont_box_sub.border {margin: 20px auto; padding: 10px 20px; border: 1px solid var(--border);}
.box_row {min-height: 60px; margin: 16px 0; padding: 10px 19px; background-color: #fff; border: 1px solid #E5E5E5; box-sizing: border-box;}
.box_row > dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 38px; -webkit-box-align: center; align-items: center; box-sizing: border-box;}
.box_row + .box_row {margin-top: -17px;}
.table02 + .box_row {margin-top: 40px;}
.box_row dt {font-weight: 500;}
.box_row > dl dd {margin-left: auto; color: var(--light); text-align: right;}
.box_row_sub {margin: 10px -19px 0; padding: 17px 19px; border-top: 1px solid #E5E5E5;}
.box_row .write_form {max-width: 100%;}
.box_row_sub .write_form > dl > dt {width: 15%;}
.box_row_sub .write_form dd > .form_row > *:first-child {min-width: 200px;}
.box_row_sub .write_form dd > .form_row > *:first-child + * {margin: 0;}
.box_row_sub .check {margin-top: 20px; font-size: .875rem; color: var(--normal);}

.noti_box {position: relative; margin-bottom: 24px; padding: 9px 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: .875rem; color: #1B8688; -webkit-box-align: center; align-items: center; background-color: #A1F0F3; border: 1px solid #15CED1;}
.noti_box strong {color: #434343;}
.noti_box .btn_area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-left: auto; padding-left: 10px; -webkit-box-align: center; align-items: center;}
.noti_box a {display: inline-block; min-width: 80px; height: 32px; padding: 5px 10px; font-size: .875rem; color: #434343; text-align: center; line-height: 20px; background-color: #fff; border: 1px solid #15CED1; border-radius: 4px; box-sizing: border-box;}
.noti_box .btn_area .btn_close01 {margin-left: 5px; margin-right: -10px;}


.code_copy {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 40px; padding: 5px 10px; font-size: .875rem; color: var(--light); -webkit-box-align: center; align-items: center; background-color: #F6F7FB; border: 1px solid var(--border);}
.code_copy .code {-webkit-flex: 1; flex: 1; padding-right: 20px;}



/***** 문자 발송 *****/
.sms_cont_box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.left_cont {-webkit-flex: 1; flex: 1;}
.right_cont {padding-left: 24px;}




/*** 미리보기 ***/
.previewWrap {position: -webkit-sticky; position: sticky; top: 90px;}
/**max-width: 320px;**/
.phone_preview {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; flex-direction: column; min-width: 260px; max-width: 260px; height: 640px; padding: 9px; background: #fff; border: 1px solid #AEB1BB; border-radius: 30px; overflow: hidden;}
.phone_titlebar {position: relative; height: 70px; padding: 31px 5px 12px; font-size: 1.125rem; color: #fff; text-align: center; background: #505463 url("../images/bg_phone_titlebar.png") no-repeat 0 0; border-radius: 22px 22px 0 0;}
.phone_titlebar::after {content: ""; position: absolute; right: 0; top: 0; width: 50%; height: 30px; background: url("../images/bg_phone_titlebar_r.png") no-repeat right top;}
.phone_titlebar h1 {font-size: 1.125rem;}
.call_num {height: 50px; padding: 5px 0 5px 24px; font-size: .875rem; color: #434343; line-height: 40px; background: url("../images/ico_back.svg") no-repeat 9px center;}
.phone_msg_box {-webkit-flex: 1; flex: 1; padding: 17px 15px; font-size: .875rem; color: #434343; line-height: 1.43; background-color: #EBEDF4; border-radius: 0 0 22px 22px; overflow: auto; overflow-x: hidden;}
.phone_msg_box:first-child {border-radius: 22px;}
.phone_msg_box .cont {white-space: pre-line;}
.phone_msg_box .image {margin: 5px 0;}
.phone_msg_box .image:first-child {margin-top: 0;}
.phone_msg_box a {display: block; color: #0391FC; text-decoration: underline;}
.previewWrap .c_btn {margin-top: 10px;}

/* scroll bar style */
.phone_msg_box::-webkit-scrollbar {width: 6px; -webkit-appearance: none;}
.phone_msg_box::-webkit-scrollbar-track {background: transparent;}
.phone_msg_box::-webkit-scrollbar-thumb {background: #F6F7FB; border: 1px solid #DDDEE3; border-radius: 10px;}



/* kakao - 알림톡 */
.kakao_preview .phone_titlebar {background-color: #3C1D1E;}
.kakao_preview .call_num {background-color: #ABC2D0;}
.kakao_preview .phone_msg_box {background-color: #ABC2D0;}
.kakao_wrapper {position: relative; padding: 20px 5px 10px;}
.kakao_wrapper .channel {position: absolute; left: 0; top: 0; padding-left: 28px; font-size: .625rem;}
.kakao_wrapper .channel::before {content: ""; position: absolute; left: -7px; top: 0; width: 28px; height: 28px; background-color: #fff; border-radius: 10px;}
.kakao_wrapper .channel h1 {font-weight: normal; color: #6A6D72;}
.talk_box {position: relative; background-color: #fff; border-radius: 10px;}
.channel + .talk_box {margin-left: 0px;}
.kakao_wrapper .title::after {content: ""; position: absolute; right: -10px; top: -12px; width: 36px; height: 36px; background: url("../images/ico_kakao.svg") no-repeat center center; background-size: 100% auto;}
.talk_box .title {padding: 12px 15px; background-color: #FEE701; border-radius: 10px 10px 0 0;}
.talk_box .title > * {font-size: .75rem;}
.talk_box .image {margin: 0px;}
.talk_box .cont {padding: 10px 10px 20px;}
.talk_box .extra {padding: 0 15px;color: #999;}
.talk_box .ad {padding: 12px 15px 0px 15px;color: #999;}
.talk_box .btn_area {padding: 15px 10px 24px;}
/* 카카오 알림톡 실제 버튼 느낌 (배경 #F6F7F8 / 테두리 #DADDE1 / 글자 #222 / radius 4px) */
.talk_box .btn_area button {display: block; width: 100%; height: 30px; font-weight: normal; font-size: .875rem; color: #222222; background-color: #F6F7F8; border: 1px solid #DADDE1; border-radius: 4px;}
/* 버튼이 여러 개일 때만 아주 작은 간격 (첫 버튼에는 미적용) */
.talk_box .btn_area button + button {margin-top: 4px;}

.kakao_ui02 {padding: 0; border: none; border-radius: 20px;}
.kakao_ui02 .type_title {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 70px; margin-bottom: -20px; padding: 0 10px 20px; font-weight: 500; font-size: .875rem; color: #fff; text-align: center; -webkit-box-align: center; align-items: center; background-color: #3D1E1E; border-radius: 20px 20px 0 0;}
.type_title .tt {flex: 1; font-size: 1.125rem;}
.kakao_ui02 .phone_msg_box {padding: 20px 10px 10px; border-radius: 20px;}
.kakao_ui02 .kakao_wrapper {height: 100%; padding: 0 !important;}
.kakao_ui02 .kakao_wrapper .talk_box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-flex-direction: column; flex-direction: column; border-radius: 16px;}
.kakao_ui02 .kakao_wrapper .title {border-radius: 16px 16px 0 0;}
.kakao_ui02 .kakao_wrapper .title::after {right: -2px;}
.kakao_ui02 .kakao_wrapper .cont {-webkit-flex: 1; flex: 1; overflow: auto;}
.kakao_ui02 .kakao_wrapper .extra {padding: 0 15px;color: #999;}
.kakao_ui02 .kakao_wrapper .ad { border-radius: 16px 16px 0 0;padding: 12px 15px 0px 15px;color: #999; }
.kakao_ui02 .kakao_wrapper .ad::after {right: -2px;}
.kakao_ui02 .type_title ~ .phone_msg_box {padding: 20px 8px 8px; border: 2px solid #ABC2D0; border-top: none;}
.kakao_ui02 .type_title ~ .phone_msg_box .kakao_wrapper {height: auto;}

/* kakao - 친구톡 */
.friend_talk {padding-right: 0;}
.friend_talk .title::after {display: none;}
.friend_talk .talk_box > *:first-child {border-radius: 10px 10px 0 0;}
.friend_talk .talk_box .image {margin: 0 0 10px; overflow: hidden;}

/* swiper */
.kakao_swiper {margin: 0 -15px 0 -20px; padding: 0 30px 0 45px; overflow: hidden;}
.kakao_swiper .swiper-slide {height: auto; overflow: hidden;}

/* RCS */
.phone_msg_box.sms_type {padding: 0 15px 20px 5px; background-color: transparent;}
.sms_wrapper {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-left: 45px; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.sms_wrapper .user {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 40px; margin: 0 5px 5px -45px; font-size: .875rem; -webkit-box-align: center; align-items: center;}
.sms_wrapper .user h1 {width: 40px; min-width: 40px; height: 40px; font-size: 10px; color: #fff; text-align: center; line-height: 40px; text-align: center; background-color: var(--primary); border-radius: 50px;}
.sms_wrapper .user * {font-weight: normal; letter-spacing: -1px;}
.sms_wrapper .user h2 {margin-left: 5px; font-size: .875rem; white-space: nowrap;}
.sms_wrapper .talk_box {-webkit-flex: 1; flex: 1; min-width: 90%; font-size: .875rem; background-color: #EBEDF4; border-radius: 20px;}
.sms_wrapper .talk_box > *:first-child {border-radius: 20px 20px 0 0; overflow: hidden;}
.sms_wrapper .talk_box .image {margin: 0;}
.sms_wrapper .talk_box .cont {padding: 16px 20px; white-space: pre-line;}


.template_list {font-size: 1rem; color: var(--normal); overflow: auto;}
.template_list ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1170px; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.template_list li {-webkit-flex: 1; flex: 1; max-width: 260px; margin: 0 16px 40px;}
.template_list .phone_preview {height: 450px;}
.template_list .kakao_wrapper {margin: 0 -2px; padding: 5px 2px;}
.template_list .sms_type {padding: 10px 0;}
.template_list .sms_type .talk_box {margin-top: -10px;}
.template_list .sms_type .talk_box .cont {padding: 16px 10px;}
.pop_cont .template_list {max-height: calc(100vh - 150px); margin: 18px -16px 0;
  overflow: visible;
  max-height: none;
}
.template_list .phone_preview + .optWrap label {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.template_cont {margin-top: 15px; text-align: center; letter-spacing: -0.02em;}
.template_cont dt {font-size: 1.125rem;}
.template_cont dd {margin-top: 5px; font-size: .875rem; color: var(--light);}
.type_list li {margin: 0 10px 40px;}
.pop_cont .template_list.type_list {max-height: inherit;}
.cont_box02 .template_list ul {justify-content: space-around;}



/* 텍스트 파일 업로드 */
.txt_file_set {-webkit-flex: 1; flex: 1;}
.txt_file_set dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 50px; font-size: 1rem; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
.txt_file_set dt {padding: 5px 30px 5px 36px; color: var(--normal); background: url("../images/ico_txtfile_divider.png") no-repeat left center;}
.txt_file_set label:not(:last-child) {margin-right: 30px;}


/* 이미지 첨부 */
.att_img_list ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end;}
.att_img_list li {position: relative; margin-left: 10px;}
.att_img_list .image {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 80px; height: 50px; -webkit-box-align: center; align-items: center; background-color: #fff; border: 1px solid var(--border); overflow: hidden;}
.att_img_list .btn_del {position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; text-indent: -999em; background: url("../images/btn_del01.svg") no-repeat center center;}
.btn_img_add {position: absolute; left: 0; top: 0; display: none; width: 100%; height: 100%; text-indent: -999em; background: url("../images/btn_img_add.svg") no-repeat center center;}
.image.noimg ~ .btn_del {display: none;}
.image.noimg ~ .btn_img_add {display: inline-block;}

/*** 충전 ***/
.charge_enter {padding: 26px 50px 36px;}
.charge_enter .tit02 {margin: 0;}
.charge_enter .charge {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 810px; margin: 25px auto 0;}
.charge_enter .charge > * {position: relative; -webkit-flex: 1; flex: 1; height: 50px; border: 1px solid var(--border);}
.charge_enter .charge input {width: 100%; height: 48px; padding-right: 40px; font-weight: bold; font-size: 1.5rem; text-align: right; background-color: #ebedf4; border: none;}
.charge_enter .amount .unit {position: absolute; right: 18px; top: 0; line-height: 50px;}
.charge_enter .coin {margin-left: 70px; font-size: 1.125rem; line-height: 48px; text-align: center;}
.charge_enter .coin::before {content: ""; position: absolute; left: -70px; top: 0; width: 70px; height: 100%; background: url("../images/ico_charge_arrow.svg") no-repeat center center;}
.charge_enter .coin .txt_num {font-size: 1.5rem;}

.optWrap {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; align-items: center; margin: 10px 0; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.optWrap:first-child {margin-top: 0 !important;}
.optWrap:last-child {margin-bottom: 0 !important;}
.optWrap > *:first-child:not(.option) {-webkit-flex:1; flex:1; margin: 0;}
.optWrap .option {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 0 0 auto; padding-left: 8px; -webkit-box-align: center; align-items: center; -webkit-column-gap: 4px; column-gap: 4px;}
.optWrap .option label input + * {margin-left: 5px;}
.optWrap .option select {min-width: 130px;}
.optWrap .vtop {margin-bottom: auto;}
.optWrap .vbot {margin-top: auto;}
.optWrap.nowrap { flex-wrap: nowrap;}
.tab_cont > .optWrap .option > button:only-child {min-width: 160px;}
.optWrap .option.board_search {column-gap: 0;}
.optWrap .option.board_search > .inp_box:only-of-type {min-width: 370px;}


/***** 영수증 *****/
.receipt_box {margin-top: 21px; padding: 17px 30px; font-size: 1rem; color: var(--normal); background: #fff; border: 1px solid var(--border);}
.receipt_box .group {margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border);}
.receipt_box .group:first-child {margin: 0; padding: 0; border: none;}
.receipt_box .tit {margin-bottom: 15px; font-weight: 500; font-size: 1rem;}
.receipt_box .group dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 15px; -webkit-box-align: center; align-items: center;}
.receipt_box .group dl:first-child {margin: 0;}
.receipt_box .group dt {font-size: .875rem; color: var(--light);}
.receipt_box .group dd {margin-left: auto;}
.receipt_box .total dt {font-size: 1rem; color: var(--normal);}
.receipt_box .total dd {font-size: 1.125rem;}
.receipt_box .total dd strong {font-weight: 500;}



/***** chart *****/
.chartWrap {position: relative; min-height: 240px;}



/***** tooltip *****/
.tooltipWrap {position: relative; height: 26px; z-index: 10;}
.tooltipWrap .tooltip_box {position: absolute; left: 20px; top: -10px; min-width: 350px; height: 0; padding: 0 20px; font-size: .875rem; color: var(--light); line-height: 1.43; background-color: #fff; border: 0 solid #AEB1BB; opacity: 0; overflow: hidden; -webkit-transition: opacity .3s linear; transition: opacity .3s linear;}
.tooltipWrap .tooltip_box::before {content: ""; position: absolute; left: -12px; top: 10px; width: 12px; height: 24px; background: url("../images/ico_tooltip_arrow.svg") no-repeat left center;}
.tooltipWrap.tip_open .tooltip_box {height: auto; padding: 20px 20px 16px; border-width: 1px; overflow: inherit; opacity: 1;}
.btn_tip_close {position: absolute; right: 0; top: 0; width: 40px; height: 30px; text-indent: -999em; background: url("../images/btn_pop_close02.svg") no-repeat center center;}




/***** 약관 *****/
.terms_cont {max-height: 300px; margin: 15px 0; padding: 20px 10px; font-size: .875rem; color: var(--light); line-height: 1.43; border: 1px solid var(--border); -webkit-overflow-scrolling: touch; overflow: auto;}
.pop_cont .terms_cont {max-height: inherit; margin: 0; padding: 0; border: none;}
.terms_cont h1, .terms_cont h2 {margin: 20px 0 10px; font-size: 1rem}
.terms_cont h3 {margin: 10px 0 5px; font-size: .875rem;}
.terms_cont h1:first-child, .terms_cont h2:first-child {margin-top: 0;}
.terms_cont li ol, .terms_cont li ul {padding-left: 10px;}
.terms_cont ol li {padding-left: 1.2em; text-indent: -1.2em;}
.terms_cont ol li * {text-indent: 0;}
.terms_cont p {margin: 10px 0;}
.terms_cont p:first-child {margin-top: 0;}
.terms_cont table {width: 100%; margin: 25px 0; border: 1px solid #D2D2D2; border-collapse: collapse;}
.terms_cont table:last-child {margin-bottom: 0;}
.terms_cont table th, .terms_cont table td {height: 25px; padding: 5px 12px; font-weight: normal; font-size: .875rem; color: var(--light); line-height: 1.43; border: 1px solid var(--border);}
.terms_cont table th {color: #000; text-align: center; background-color: #F6F7FB;}





.agree_box {margin: 30px 0; padding-top: 24px; font-size: .875rem; color: var(--light); border-top: 1px solid #D2D2D2;}
.tit_agree {margin-bottom: 11px; font-weight: normal; font-size: 1rem; color: var(--normal);}
.agree_box p {line-height: 1.43;}


/***** popup *****/
/** 2023-04-04
.modalWrap {position: absolute;
**/
.modalWrap {position: fixed; left:0; top:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:100%; height:100%; padding: 50px; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; background:rgba(0,0,0,.7); overflow: auto; z-index:1000;}
.dialog_box {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; flex-direction: column; min-width: 880px; max-width: 1200px; max-height: 100%; margin: 0 auto; background:#fff; box-shadow: 0 8px 8px rgba(0,0,0,.16); overflow: hidden; z-index:1000;}
/* 알림톡 템플릿 등록 팝업: 입력 항목이 많아 세로 여유 확보.
   .dialog_box 의 max-height:100% 는 .modalWrap 의 padding(50px) 만큼 줄어든 높이라,
   이 팝업이 열렸을 때만 상하 패딩을 줄여 약 60px 더 확보한다. (:has 미지원 브라우저는 기존 높이 유지) */
.modalWrap:has(.popupKakaoTemplate) {padding-top: 20px; padding-bottom: 20px;}
/* 레이어(.modalWrap)로 에러 화면이 로드된 경우: .dialog_box 와 달리 폭 지정이 없어 좌측(9시)에 붙으므로 정중앙 정렬 */
.modalWrap .system_error {width: 100%; min-height: auto; margin: 0 auto; padding: 60px 0; background-color: #fff;}
.modalWrap .system_error .wrapper {position: relative; left: auto; top: auto; -webkit-transform: none; transform: none;}
.dialog_box .pop_header {position: relative; min-height: 60px; padding: 15px 55px 15px 30px; font-weight: bold; color: #fff; line-height: 30px; background-color: var(--primary); z-index: 20;}
.pop_header h1, .pop_header h2 {font-size: 1.25rem;}
.btn_pop_close {position:absolute; right:10px; top: 50%; width: 50px; height: 50px; margin-top: -25px; text-indent:-999em; background:url("../images/btn_pop_close.svg") no-repeat center center;}
.dialog_box .pop_cont {-webkit-flex:1; flex:1; width:100%; height:100%; padding: 25px 30px; font-size: .875rem; color: var(--light); line-height: 1.43; overflow:auto;}
.dialog_box.w_auto {min-width: auto;}
.dialog_box.w_sm {width: 600px; min-width: inherit;}
.dialog_box.w_md {width: 800px; min-width: inherit;}
.dialog_box.w_lg {width: 1200px; min-width: inherit;}
.dialog_box.alert {min-width: auto; width: 500px;}
.dialog_box.alert .pop_cont {padding: 50px 30px; font-size: 1rem; color: var(--normal);}

.pop_cont:first-child {padding-top:20px;}
.pop_cont:last-child {padding-bottom:20px;}
.pop_cont .c_btn button:only-child {min-width: 160px;}


.pop_btn {display:-webkit-box; display:flex; padding: 20px 30px; -webkit-justify-content: center; justify-content: center; background-color: #F6F7FB; border-top: 1px solid #E0E1E4;}
.pop_btn button {min-width: 160px; height: 40px; font-weight: 500; font-size: 1rem; color: #fff; background-color: var(--primary); border-radius: 4px;}
.pop_btn button + button {margin-left:10px;}
.pop_btn .btn_pop_cancel {color: var(--normal); background-color: #fff; border: 1px solid #AEB1BB;}



/***** jquery datepicker *****/
.ui-datepicker {display: none; width: 320px; padding: 10px 20px 20px; background-color: #fff; border: 1px solid #AEB1BB; border-radius: 0; z-index: 20 !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.13);}
.ui-datepicker-header {position: relative; padding: 5px 20px 10px; font-size: 1rem; color: var(--normal); text-align: center;}
.ui-datepicker-header a {position: absolute; width: 30px; height: 30px; text-indent: -999em;}
.ui-datepicker-header select {height: 30px; margin: 0 5px;}
.ui-datepicker-prev {left: 10px; background: url("../images/ico_prev01.svg") no-repeat center center;}
.ui-datepicker-next {right: 10px; background: url("../images/ico_next01.svg") no-repeat center center;}
.ui-datepicker-calendar {width: 100%; font-size: 0.75rem;}
.ui-datepicker-calendar thead th {height: 25px; padding: 5px 4px;}
.ui-datepicker-calendar thead th:first-child {color: #E34949;}
.ui-datepicker-calendar thead th:last-child {color: #366CE8;}
.ui-datepicker-calendar tbody th, .ui-datepicker-calendar tbody td {background-color: #D0F5F6; border: 1px solid var(--border);}
.ui-datepicker-calendar td {padding: 0; text-align: center;}
.ui-datepicker-calendar .ui-state-default {display: inline-block; width: 100%; height: 30px; padding: 5px; font-size: .75rem; color: #222; text-align: center; line-height: 20px; box-sizing: border-box;}
.ui-datepicker-calendar .ui-state-disabled {color: #B5B5B5; background-color: #F6F7FB;}
.ui-datepicker-calendar .ui-datepicker-other-month {background-color: #fff;}
.ui-datepicker-calendar td:first-child .ui-state-default {color: #E34949;}
.ui-datepicker-calendar td:last-child .ui-state-default {color: #366CE8;}
.ui-datepicker-other-month .ui-state-default {color: #BDBDBD !important;}
.ui-datepicker-today .ui-state-default {color: #fff; background-color: #15CED1;}
.ui-datepicker-current-day .ui-state-default {color: #fff; background-color: #06A5B9;}



/***** loading *****/
.loading_page {position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-indent: -999em; background: url("../images/loading01.svg") no-repeat center center; background-color: rgba(255, 255, 255, .7); z-index: 1000;}
.loading_pop {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -999em; background: url("../images/loading02.svg") no-repeat center center; background-color: rgba(255, 255, 255, .7); z-index: 10;}

.form_inline_list{
	font-size: 1rem;
}

/* =========================
   Header top-right CTA (btn_go_member) 강화
   ========================= */

/* (1) 버튼 전체를 “칩+배지”처럼 만들기 */
.headerWrap .btn_go_member{
  display:flex;
  align-items:center;
  gap:10px;
  height: 44px;
  padding: 0 14px;
  background: rgba(25,148,164,.10);
  font-weight: 900;
  letter-spacing: -0.2px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  position: relative;
  overflow: hidden;
  background-color: var(--primary);
      
}

/* (2) 살짝 “반짝” 하이라이트 */
.headerWrap .btn_go_member::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width: 60%;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  opacity: .7;
}

/* (3) hover/focus 시 더 눌러보게 */
.headerWrap .btn_go_member:hover{
  transform: translateY(-1px);
}
.headerWrap .btn_go_member:active{
  transform: translateY(0);
}
.headerWrap .btn_go_member:focus-visible{
  outline: 3px solid rgba(25,148,164,.35);
  outline-offset: 2px;
}

@media (max-width: 1100px){

}


/**
2026-02-26
**/
/* 전체 상단 바 */
.topbar {
  width: 100%;
  border-bottom: 1px solid #eee;
  background: #F6F7FB;
  background: #fff;
}

.topbar-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;   /* 👉 우측 정렬 핵심 */
  align-items: center;
  height: 36px;                /* 얇은 높이 */
  padding: 0 10px;
}

.top-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-links li {
  margin-left: 10px;
}

.top-links a {
  font-size: 13px;
  color: #666;
  text-decoration: none;
}

.top-links a:hover {
  color: #000;
}

.divider {
  color: #ccc;
  font-size: 12px;
}
/* ==========================================================================
   [2026-08-06] 전송자격인증 대응으로 추가한 화면의 버튼 스타일
     · 2차 인증(/login/mfa) · 발송자 추가 인증 팝업 · 공통 안내 레이어팝업

   사이트 전반에 버튼 hover 규칙이 없어서 이번에 추가한 버튼만 범위를 좁혀 정리한다.
   (기존 화면의 버튼 모양은 건드리지 않는다)

   기준색 : --primary (#15CED1)
     - 주 버튼   : 민트 채움 → hover 시 한 톤 진하게
     - 보조 버튼 : 흰 배경 + 민트 테두리/글자 → hover 시 아주 옅은 민트 배경
     - 비활성    : 회색. hover 반응 없음 (눌리는 것처럼 보이면 안 된다)
   ========================================================================== */
:root{
	--primary-dark: #11B0B3;      /* hover */
	--primary-darker: #0E9598;    /* active(눌림) */
	--primary-tint: rgba(21, 206, 209, .08);
}

/* 공통 전환 효과 */
.mfa_btns button,
.btn_mfa_other,
.sendAuthWrap .pop_btn button,
.sendAuthWrap .form_row button,
.modalWrap .dialog_box.alert .pop_btn button{
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* ── 주 버튼 (민트 채움) ─────────────────────────────────────── */
.sendAuthWrap .form_row #btnSendAuthVerify,
.mfa_btns .btn01:not(.line){
	color:#fff; background-color:var(--primary); border:1px solid var(--primary);
}
.sendAuthWrap .form_row #btnSendAuthVerify:hover:not(:disabled),
.mfa_btns .btn01:not(.line):hover:not(:disabled),
.sendAuthWrap .pop_btn .btn_pop01:hover:not(:disabled),
.modalWrap .dialog_box.alert .pop_btn .btn_pop01:hover{
	background-color:var(--primary-dark); border-color:var(--primary-dark);
}
.sendAuthWrap .form_row #btnSendAuthVerify:active:not(:disabled),
.mfa_btns .btn01:not(.line):active:not(:disabled),
.sendAuthWrap .pop_btn .btn_pop01:active:not(:disabled),
.modalWrap .dialog_box.alert .pop_btn .btn_pop01:active{
	background-color:var(--primary-darker); border-color:var(--primary-darker);
}

/* ── 보조 버튼 (흰 배경 + 민트 테두리) ───────────────────────── */
.sendAuthWrap .form_row #btnSendAuthIssue,
.mfa_btns .btn01.line,
.btn_mfa_other{
	color:var(--primary); background-color:#fff; border:1px solid var(--primary);
}
.sendAuthWrap .form_row #btnSendAuthIssue span,
.mfa_btns .btn01.line span,
.btn_mfa_other span{ color:var(--primary); }

.sendAuthWrap .form_row #btnSendAuthIssue:hover:not(:disabled),
.mfa_btns .btn01.line:hover:not(:disabled),
.btn_mfa_other:hover{
	background-color:var(--primary-tint); border-color:var(--primary-dark);
}
.sendAuthWrap .form_row #btnSendAuthIssue:hover:not(:disabled) span,
.mfa_btns .btn01.line:hover:not(:disabled) span,
.btn_mfa_other:hover span{ color:var(--primary-dark); }

.sendAuthWrap .form_row #btnSendAuthIssue:active:not(:disabled),
.mfa_btns .btn01.line:active:not(:disabled),
.btn_mfa_other:active{
	background-color:rgba(21, 206, 209, .16); border-color:var(--primary-darker);
}

/* ── 취소 버튼 ─────────────────────────────────────────────── */
.sendAuthWrap .pop_btn .btn_pop_cancel:hover{
	background-color:#F2F3F6; border-color:#9BA0AB;
}

/* ── 비활성 ────────────────────────────────────────────────── */
.sendAuthWrap button:disabled,
.mfa_btns button:disabled{
	color:#fff; background-color:#C7CAD1; border-color:#C7CAD1; cursor:default;
}
.sendAuthWrap button:disabled span,
.mfa_btns button:disabled span{ color:#fff; }

/* ── 팝업 닫기(X) ───────────────────────────────────────────── */
.sendAuthWrap .btn_pop_close:hover{ opacity:.7; }

/* =========================================================
   [2026-09-12] 비밀번호 보기 토글 (PC)

   지금까지 PC 에는 이 규칙이 **없었다**. 그래서 common.js 가 붙인 버튼이
   입력칸 바깥(right:-14.7px)으로 밀려나고 폭도 글자에 눌려 찌그러져 있었다.
   모바일(common_m.css)과 같은 구조로 맞춘다.

   .pw_field 는 display:block 이라 기존 블록 흐름을 그대로 유지하고,
   버튼은 absolute 로 얹어 입력칸 높이(50px)를 바꾸지 않는다.
   ========================================================= */
.pw_field {position: relative; display: block; width: 100%;}
.pw_field > input {width: 100%; padding-right: 46px;}
/* [2026-09-12] 브라우저 기본 비밀번호 아이콘 숨김.
   Edge 는 type=password 에 눈 아이콘(::-ms-reveal)과 X(::-ms-clear)를,
   Safari 는 자동완성 열쇠 아이콘을 입력칸 안쪽에 스스로 그린다.
   우리 토글(.pw_toggle)과 겹쳐 아이콘이 두 개로 보이므로 브라우저 것을 끈다. */
.pw_field > input::-ms-reveal,
.pw_field > input::-ms-clear {display: none; width: 0; height: 0;}
.pw_field > input::-webkit-credentials-auto-fill-button,
.pw_field > input::-webkit-strong-password-auto-fill-button {display: none !important;
    visibility: hidden; pointer-events: none; margin: 0; width: 0;}
.pw_toggle {position: absolute; right: 1px; top: 1px; bottom: 1px; width: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9AA0AC; background: transparent; border: none;
    border-radius: 0 4px 4px 0; cursor: pointer;}
/* 아이콘 크기 고정 — 버튼 폭이나 글꼴에 영향받지 않는다 */
.pw_toggle svg {width: 20px; height: 20px; display: block; pointer-events: none;}
.pw_toggle:hover {color: var(--normal);}
.pw_toggle.on {color: var(--primary);}
.pw_toggle:focus-visible {outline: 2px solid var(--primary); outline-offset: -2px;}

/* =========================================================================
   [2026-09-17] 발신번호 등록 필수증빙 폼 (공통 패턴)
     사용 : pc/sms/senderTelList.jsp (레이어) · mobile/sms/layer/callerReg.jsp (하단 시트)
            스크립트 /WEB-INF/include/caller_doc_form.jsp
     종전 include 안의 <style> 을 공통 CSS 로 옮겼다. 색은 이 사이트 토큰을 쓴다.
   ========================================================================= */
/* 레이어 폭 고정 — 안내 펼침·긴 파일명에도 가로로 늘지 않게(세로 스크롤은 .pop_cont). 공통 w_lg(1200px)는 다른 화면이 써서 건드리지 않는다 */
.dialog_box.popupCaller {width: 920px; min-width: inherit;}
#wiredPnForm .cr_step {margin: 24px 0 8px; padding: 0; font-size: 1.05em; font-weight: 700; color: var(--secondary, #012C5F);}
.cr_step em {display: inline-block; min-width: 1.5em; margin-right: 6px; padding: 0 6px; font-size: .85em; font-style: normal; color: #fff; text-align: center; background: var(--primary); border-radius: 10px;}
.cr_field_msg, .cr_doc_msg {display: block; margin-top: 6px; font-size: .875em; line-height: 1.5; color: var(--red);}
.cr_field_msg:empty, .cr_doc_msg:empty {display: none;}
.cr_biz_result {margin-top: 10px; padding: 12px 14px; font-size: .9em; line-height: 1.7; background: #F6F7FB; border: 1px solid var(--border); border-radius: 6px;}
.cr_biz_row {display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 1px 0;}
.cr_biz_k {-webkit-flex: 0 0 6.5em; flex: 0 0 6.5em; font-weight: 400; color: var(--sub);}
.cr_biz_v {-webkit-flex: 1; flex: 1; font-weight: 600; color: var(--normal); word-break: break-all;}
.cr_biz_result .cr_biz_note {margin-top: 6px; font-weight: 400; color: var(--sub);}
.cr_biz_result .cr_biz_err {margin-top: 6px; font-weight: 600; color: var(--red);}
.cr_biz_result button {margin-top: 8px;}
.cr_doc {margin-top: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 6px;}
.cr_doc.cr_err {border-color: var(--red);}
.cr_doc_head {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; gap: 4px 10px;}
.cr_doc_tit {font-weight: 700; color: var(--normal);}
.cr_doc_tit small {font-size: .85em; font-weight: 400; color: var(--light);}
.cr_doc_state {font-size: .875em; font-weight: 600;}
.cr_st_ok .cr_doc_state {color: #06A5B9;}
.cr_st_need .cr_doc_state {color: var(--red);}
.cr_st_na .cr_doc_state {color: var(--light);}
.cr_doc_body {margin-top: 8px;}
.cr_doc_guide {margin-top: 6px; font-size: .85em; line-height: 1.6; color: var(--sub);}
.cr_doc_guide.cr_deleg_download {margin: 0 0 8px;}
.cr_issue_row {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; gap: 6px 10px; margin-top: 8px;}
.cr_issue_row label {font-size: .9em; font-weight: 600; color: var(--normal);}
.cr_issue_row input[type=date] {height: 36px; padding: 0 8px; font-size: .95em; color: var(--normal); background: #fff; border: 1px solid var(--border); border-radius: 4px;}
.cr_issue_row.cr_err input[type=date] {border-color: var(--red);}
.cr_telco {margin-top: 6px; padding: 8px 12px; font-size: .85em; line-height: 1.7; color: var(--sub); background: #F6F7FB; border-radius: 4px;}
.cr_link_btn {padding: 0; font-size: .85em; color: #06A5B9; text-decoration: underline; background: none; border: 0; cursor: pointer;}
.cr_check_box {margin: 0 0 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--red); border-radius: 6px;}
.cr_check_msg {font-weight: 700; line-height: 1.5; color: var(--red);}
.cr_check_list {margin-top: 8px;}
.cr_check_list li {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; gap: 4px 8px; padding: 4px 0; font-size: .9em; line-height: 1.5;}
.cr_ck_icon {display: inline-block; width: 1.1em; font-weight: 700; text-align: center;}
.cr_ck_ok .cr_ck_icon {color: #06A5B9;}
.cr_ck_bad .cr_ck_icon, .cr_ck_bad .cr_ck_label {color: var(--red);}
.cr_ck_na {color: var(--light);}
.cr_ck_label {font-weight: 600;}
.cr_ck_desc {color: var(--sub);}
.cr_notice_digit {margin-top: 18px;}
.cr_notice_toggle {margin-top: 10px;}
.cr_notice_more {margin-top: 8px;}
.caller_usage {font-size: .875rem; line-height: 1.6; color: var(--sub);}
.caller_over {font-weight: 700; color: var(--red);}

/* [2026-09-17] 공통 보조 클래스 (발신번호 관리에서 처음 사용) */
.btn03.red {color: var(--red_light); border-color: var(--red_light);}          /* 삭제 버튼 — 모바일 .btn01.red 와 같은 색 */
.btn_link.no_line {text-decoration: none;}                                     /* 밑줄 없는 텍스트 링크 */
.noti_box.no_mb {margin-bottom: 0;}                                            /* 칸의 마지막 안내 박스 */
.bul_list.sub_list {margin-top: 6px;}                                          /* 안내 목록 안의 하위 목록 */