@charset "euc-kr";

html,body { font-family: 'Pretendard Variable', sans-serif; height: 100%; position: relative; color: var(--black); }
:root {
  --bg: #f0f3f7;
  /* --base: #3b74da; */
  --base: #2e73ef;
  --base2: #2c60bc;
  --base3: #1b3563;
  --base01: rgba(59,116,218,.1);
  --base02: rgba(59,116,218,.2);
  --base03: rgba(59,116,218,.3);
  --blue: #3bb8d3;
  --blue2: #eefbff;
  --green: #78aa0d;
  --green2: #076b33;
  --orange: #ff8100;
  --yellow: #ffd142;
  --border: #ebeff2;
  --border2: #e1e1e1;
  --gray: #8490a1;
  --gray2: #e5ecf9;
  --gray3: #d0d8e3;
  --red: #ff5454;
  --red2: #dd4b4b;
  --w: #fff;
  --w2: #e7e8e9;
  --w3: #f3f3f3;
  --w4: #f5f5f5;
  --w5: #f7f7f7;
  --black: #192a42;
  --black2: #222222;
  --black3: #393939;
  --black4: #6c7a8f;
  --w01: rgba(255,255,255,.1);
  --w02: rgba(255,255,255,.2);
  --w03: rgba(255,255,255,.3);
  --w04: rgba(255,255,255,.4);
  --w05: rgba(255,255,255,.5);
  --w06: rgba(255,255,255,.6);
  --w07: rgba(255,255,255,.7);
  --black01: rgba(0,0,0,.1);
  --black02: rgba(0,0,0,.2);
  --black03: rgba(0,0,0,.3);
  --red01: rgba(255,84,84,.1);
  --y01: rgba(255,218,0,.1);
  --shadow: 0px 2px 6px rgb(26,122,255,.1);
  --shadow2: 0 0 2px rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.1);
  --select: url('../images/icons/down_arrow.png') no-repeat right center;
  --arrow: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="%233b74da"><path d="M8 4.85c.23 0 .46.087.636.263l4.5 4.5a.9.9 0 11-1.272 1.273L8 7.022l-3.864 3.864a.9.9 0 11-1.272-1.273l4.5-4.5A.897.897 0 018 4.85"></path></svg>') no-repeat 50% 50%;
  --check: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="%23aaa"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%;
  --checked: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="%23247cff"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%;
}

input[type="text"] { font-family: 'Pretendard Variable', sans-serif; font-size: 13px; border: 1px solid var(--border2); padding: 0 10px; outline: none; border-radius: 5px; box-sizing: border-box; }
input[type="text"]::placeholder { color: var(--gray); }
input[type="text"]:disabled { background-color: var(--w3) !important; color: var(--gray); }
input[type="password"] { font-family: 'Pretendard Variable', sans-serif; font-size: 13px; border: 1px solid var(--border2); padding: 0 10px; outline: none; border-radius: 5px; box-sizing: border-box; }
input[type="password"]::placeholder { color: var(--gray); }
input[type=tel] { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Pretendard Variable",sans-serif; outline: none; padding: 0 5px; border: 1px solid var(--border2); box-sizing: border-box; }
input[type=tel]:disabled { background-color: var(--red01) !important; border-color: var(--red) !important; }
input[type=tel]:disabled::placeholder { color: var(--red) !important; }
input[type=button] { font-size: 13px; font-family: "Pretendard Variable",sans-serif; outline: none; border: none; box-sizing: border-box; cursor: pointer; }
input[type=password] { font-family: "Pretendard Variable",sans-serif; outline: none; }
input[type=checkbox] { cursor: pointer; margin:0; }
input[type="submit"] { font-family: "Pretendard Variable",sans-serif; border: none; cursor: pointer; }
input[type="radio"] { vertical-align: middle; margin-top: 0; }
input[type="date"] { position: relative; padding-left: 10px; font-family: 'Pretendard Variable', sans-serif; font-size: 15px; outline: none; border: 1px solid var(--border2); box-sizing: border-box; }
input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; z-index: 1; } 
input[type="date"]:after{ position: absolute; top:50%; right:5px; content: ''; width: 20px; height: 20px; background: url(../images/msg/calendar_icon.png) no-repeat; transform: translateY(-50%); }
input[type="time"] { position: relative; padding: 0 5px 0 10px; font-family: 'Pretendard Variable', sans-serif; font-size: 15px; outline: none; border: 1px solid var(--border2); box-sizing: border-box; }
input[type="time"]::-webkit-clear-button, input[type="time"]::-webkit-inner-spin-button { display: none; }
input[type="time"]::-webkit-calendar-picker-indicator { background: transparent; z-index: 1; } 
input[type="time"]:after{ position: absolute; top:50%; right:10px; content: ''; width: 20px; height: 20px; background: url(../images/msg/time_icon.png) no-repeat; transform: translateY(-50%); }
textarea { font-family: "Pretendard Variable",sans-serif; resize: none; box-sizing: border-box; outline: none; border: 1px solid var(--border2); padding: 10px; line-height: 1.4; }
textarea::placeholder { color: gray !important; }
textarea:disabled { background-color: var(--border) !important; }
textarea:disabled::placeholder { color: transparent; }
select { -webkit-appearance: none; cursor: pointer; -moz-appearance: none; appearance: none; filter: alpha(opacity=0); background: var(--select); padding: 0 20px 0 10px; outline: none; font-family: 'Pretendard Variable', sans-serif; background-color: var(--w); font-weight: 500; }
select::-ms-expand { display:none; }
select { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--border2); background-color: var(--w); border-radius: 4px; }
select.focus { border: 1px solid var(--base) !important; }
button { background: none; border: none; cursor: pointer; border-radius: 4px; }

input[type="text"].focus { border-color: var(--base) !important; background-color: var(--base01) !important; }
input[type="tel"].focus { border-color: var(--base) !important; background-color: var(--base01) !important; }
input[type="password"].focus { border-color: var(--base) !important; background-color: var(--base01) !important; }

table { width: 100%; table-layout: fixed; background-color: var(--w); }
table thead th { padding: 10px; border: 1px solid var(--border2); text-align: center; font-size: 14px; font-weight: 600; box-sizing: border-box; background-color: var(--w3); }
table thead td { padding: 10px; line-height: 1.4; border-bottom: 1px solid var(--border2); text-align: center; font-size: 13px; font-weight: 500; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table thead th:first-child { border-left: none; }
table thead th:last-child { border-right: none; }
table tbody th { padding: 10px; border-bottom: 1px solid var(--border2); text-align: center; font-size: 14px; font-weight: 600; box-sizing: border-box; background-color: var(--w3); }
table tbody td { padding: 10px; line-height: 1.4; border-bottom: 1px solid var(--border2); text-align: center; font-size: 13px; font-weight: 500; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.error-layer { min-width: 310px; background-color: var(--w); padding: 20px; border-radius: 20px; box-shadow: 0px 10px 30px -3px rgba(78,89,104,0.05), 0px 15px 80px -5px rgba(78,89,104,0.2); position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; display: none; }
.error-layer { min-width: 310px; background-color: var(--w); padding: 20px; border-radius: 20px; box-shadow: 0px 10px 30px -3px rgba(78,89,104,0.05), 0px 15px 80px -5px rgba(78,89,104,0.2); position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; display: none; }
.error-layer .error-top { display: flex; flex-direction: column; gap: 10px; }
.error-layer .error-title { font-size: 17px; font-weight: 600; color: var(--black); }
.error-layer .error-msg { display: block; font-size: 15px; line-height: 1.4; color: var(--gray); margin-top: 15px; }
.error-layer .error-btn { display: flex; gap: 10px; margin-top: 20px; }
.error-layer .error-btn button { flex: 1; height: 45px; border: none; border-radius: 10px; background-color: var(--base); color: var(--w); font-size: 15px; }
.error-layer .error-btn button:first-child { background-color: var(--w2); color: var(--gray); }

.info_popup { width: max-content; position: absolute; background-color: var(--w); border: 1px solid var(--base3); padding: 10px; right: 0; bottom: 110%; display: none; }
.info_popup span { display: block; line-height: 1.4; font-size: 13px; font-weight: 500; text-align: left; }
.info_popup span b { color: var(--red); }
.question { display: flex; width: 18px; height: 18px; background: url('../images/icons/question-icon.png') no-repeat 50% 50%; border-radius: 100%; }
.question:hover .info_popup { display: block; }

.select-items-box { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.select-items-box .select-items { display: flex; align-items: center; gap: 5px; }
.select-items-box button { font-size: 13px; color: var(--w); height: 35px; background-color: var(--base); padding: 0 10px; }
.select-items-box select { height: 35px; }
.select-items-box input { height: 35px; }
.select-items-box a { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 5px; height: 35px; border: 1px solid var(--border2); padding: 0 10px; border-radius: 4px; }
.select-items-box input[name="year"] { width: 120px; height: 35px; border-radius: 5px; font-size: 13px; font-weight: 500; border-color: transparent;  background: url('../images/icons/calendar-icon.png') no-repeat 95% 50% var(--w3); }

.page { margin-top: 20px; }
.page ul { display: flex; align-items: center; justify-content: center; gap: 5px; }
.page ul li a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; color: var(--gray); background-color: var(--w3); border-radius: 5px; }
.page ul li a:hover { background-color: var(--w2); }
.page ul li a svg { fill: var(--gray); }
.page ul li.this a { color: var(--w); background-color: var(--base); }

.info-item ul { display: flex; flex-direction: column; gap: 5px; padding: 15px 15px 12px 15px; border: 1px dashed var(--border2); }
.info-item ul li { font-size: 13px; list-style-type: disc; color: var(--gray); margin-left: 15px; line-height: 1.6; }
.info-item ul li b { color: var(--red); font-weight: 500; text-decoration: underline; }
.info-item ul li a { display: inline-block; color: var(--base2); font-weight: 500; }

.change-mode { border-radius: 100px; background: var(--gray); width: 48px; height: 24px; display: block; margin-left: 5px; margin-top: -4px; position: relative; cursor: pointer; overflow: hidden; line-height: 13px; }
.change-mode a { width: 14px; height: 14px; border-radius: 100%; background: var(--w); display: block; position: absolute; top: 50%; left: 4px; transform: translate(0,-50%); transition: 0.2s; }
.change-mode a > span { position: absolute; top: 1px; font-size: 11px; color: var(--w); }
.change-mode.on { background: var(--base); }
.change-mode.on a { left: 30px; }
.change-mode .change-on { left: -20px; }
.change-mode .change-off { right: -24px; }

.rep { background-color: var(--base); color: var(--w); font-size: 11px; padding: 2px 6px; line-height: normal; }
.t_sms { font-size: 11px; font-weight: 400; background-color: var(--black3); color: var(--w); padding: 4px 6px; border-radius: 4px; }
.t_lms { font-size: 11px; font-weight: 400; background-color: var(--blue); color: var(--w); padding: 4px 6px; border-radius: 4px; }
.t_mms { font-size: 11px; font-weight: 400; background-color: var(--green); color: var(--w); padding: 4px 6px; border-radius: 4px; }
.t_red { color: var(--red) !important; }
.t_blue { color: var(--base) !important; }
.t_green { color: var(--green2) !important; }
.t_gray { color: var(--gray) !important; }

.must { font-size: 11px; font-weight: 500; padding: 5px 7px; border-radius: 5px; color: var(--red); background-color: var(--red01); }
.info { font-size: 11px; font-weight: 500; padding: 5px 7px; border-radius: 5px; color: var(--base); background-color: var(--base01); }
.stand { font-size: 12px; font-weight: 500; padding: 5px 8px; border-radius: 5px; color: var(--gray); background-color: var(--w3); }
.complete { font-size: 12px; font-weight: 500; padding: 5px 8px; border-radius: 5px; color: var(--base); background-color: var(--base01); }

.blank { background-color: transparent !important; border: none !important; }
.blank_td { height: 4px !important; background-color: transparent !important; padding: 0 !important; }
.none { display: none !important; }

.btn { font-weight: 400 !important; background-color: var(--base) !important; color: var(--w) !important; border-color: var(--base) !important; }
.btn2 { font-weight: 400 !important; background-color: var(--base2) !important; color: var(--w) !important; border-color: var(--base2) !important; }
.btn3 { font-weight: 400 !important; background-color: var(--black3) !important; color: var(--w) !important; border-color: var(--base2) !important; }
.btn30 { display: flex; align-items: center; justify-content: center; height: 30px; font-size: 12px; font-weight: 500 !important; background-color: var(--w2) !important; color: var(--gray) !important; border-radius: 4px; }
.rbtn { font-weight: 400 !important; background-color: var(--red) !important; color: var(--w) !important; border-color: var(--base) !important; }
.gbtn { font-weight: 400 !important; background-color: var(--black3) !important; color: var(--w) !important; border-color: var(--base) !important; }

.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }

.wrap { width: 1180px; margin: 0 auto; position: relative; }
.wrapper { min-width: 1240px; position: relative; overflow: hidden; }
.wrapper .wrap { margin: 0 auto; display: flex; }

.section { width: 920px; display: flex; flex-direction: column; gap: 25px; padding: 20px 0 40px 20px; background-color: var(--w); }

.title-item { display: flex; align-items: center; padding-top: 10px; padding-left: 10px; position: relative; margin-bottom: -15px; }
.title-item span { font-size: 16px; font-weight: 600; }
.title-item i { display: flex; align-items: center; gap: 5px; position: absolute; right: 0; bottom: 0; }
.title-item i a { font-size: 12px; padding: 8px 10px; background-color: var(--base); color: var(--w); border-radius: 4px; }
.title-item::after { width: 10px; height: 2px; background-color: var(--base); content: ''; position: absolute; left: 0; top: 0; }
.title-item::before { width: 2px; height: 10px; background-color: var(--base); content: ''; position: absolute; left: 0; top: 0; }

.tab-menu { width: 100%; display: flex; gap: 5px; border-bottom: 1px solid var(--border); }
.tab-menu a { font-size: 14px; line-height: 38px; color: var(--base); font-weight: 500; padding: 0 15px; border-top-right-radius: 5px; border-top-left-radius: 5px; background-color: var(--base01); }
.tab-menu a:hover { background-color: var(--base02); }
.tab-menu a.this { color: var(--w); background-color: var(--base2); }

.tab-menu-bar { display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--border2); width: calc(100% + 20px); background-color: var(--w); position: relative; top: -20px; left: -20px; padding: 20px 20px 0 20px; margin-bottom: -20px; }
.tab-menu-bar dl { display: flex; align-items: end; gap: 5px; }
.tab-menu-bar dl dd a { font-size: 14px; line-height: 38px; color: var(--base); font-weight: 500; padding: 0 15px; border-top-right-radius: 5px; border-top-left-radius: 5px; background-color: var(--base01); }
.tab-menu-bar dl dd a:hover { background-color: var(--base02); }
.tab-menu-bar dl dd a.this { color: var(--w); background-color: var(--base2); }

.tab-inner { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--base3); font-weight: 500; padding: 0 0 10px 0; margin-right: -10px; }
.tab-inner a { display: flex; align-items: center; gap: 3px; }
.tab-inner p { content: ''; width: 12px; height: 12px; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="%23111"><path d="M8 4.85c.23 0 .46.087.636.263l4.5 4.5a.9.9 0 11-1.272 1.273L8 7.022l-3.864 3.864a.9.9 0 11-1.272-1.273l4.5-4.5A.897.897 0 018 4.85"></path></svg>') no-repeat 50% 50%; transform: rotate(90deg); background-size: 12px; }

.tab-item { width: 100%; }
.tab-item ul { display: flex; }
.tab-item ul li { flex: 1; text-align: center; line-height: 50px; font-size: 15px; border: 1px solid var(--border2); color: var(--gray); background-color: var(--w3); cursor: pointer; }
.tab-item ul li:last-child { border-left: none; }
.tab-item ul li.this { color: var(--base2); font-weight: 600; border-top: 2px solid var(--base2); border-bottom: transparent; background-color: var(--w); }

.sub-title { display: flex; align-items: end; justify-content: space-between; padding: 0 5px; }
.sub-title h4 { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; color: var(--base3); }
.sub-title a { font-size: 12px; color: var(--base2); font-weight: 600; padding: 5px 7px; background-color: var(--base01); border-radius: 5px; }
.sub-title span { font-size: 12px; color: var(--gray); padding: 4px; border-bottom: 1px dashed var(--border2); }

.bottom-btn { display: flex; align-items: center; justify-content: center; gap: 5px; }
.bottom-btn a { width: 100px; display: flex; align-items: center; justify-content: center; height: 40px; background-color: var(--base); font-size: 14px; color: var(--w); border-radius: 5px; }
.bottom-btn a:first-child { background-color: var(--black3); }
.bottom-btn a:last-child { background-color: var(--base); }

.check-box { width: fit-content; height: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; }
.check-box label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gray); position: relative; line-height: 20px; left: -25px; padding-left: 25px; margin-right: -25px; letter-spacing: -0.2px; }
.check-box label b { color: var(--red); }
.check-box input { min-width: 18px !important; width: 18px !important; min-height: 18px !important; height: 18px !important; opacity: 0; margin: 0 !important; position: relative; z-index: 1; cursor: pointer; }
.check-box.radio input { min-width: 18px !important; width: 18px !important; min-height: 18px !important; height: 18px !important; opacity: 0; margin: 0 !important; position: relative; z-index: 1; cursor: pointer; }
.check-box.radio::after { border-radius: 100%; }
.check-box.radio::before { content: ''; width: 10px; height: 10px; background-color: var(--base); position: absolute; left: 4px; top: 4px; transform: scale(0); border-radius: 100%; transition: 0.2s; }
.check-box.radio.on::after { border-color: var(--base) !important; background: none !important; }
.check-box.radio.on::before { transform: scale(1); }
.check-box.radio.on label { color: var(--base); }
.check-box::after { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid var(--border2); border-radius: 4px; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="%23fff0"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50% var(--w); content: ''; box-sizing: border-box; }
.check-box:hover::after { background-color: var(--black01); transition: 0.2s; }
.check-box.on::after { border: 1px solid transparent; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="%23fff"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%; background-color: var(--base); }
.check-box.disabled::after { background-color: var(--black01); }

/* 헤더 */
.header { width: 100%; min-width: 1240px; overflow: hidden; position: relative; z-index: 9; }
.header .header-inner { width: 100%; display: flex; background-color: var(--base2); }
.header .header-inner .wrap { height: 30px; display: flex; align-items: center; justify-content: end; gap: 15px; }
.header .header-inner a { font-size: 12px; font-weight: 500; color: var(--w); }
.header .header-inner a:last-child { color: var(--yellow); letter-spacing: -0.4px; font-weight: 600; }

.header .header-item { border-bottom: 1px solid var(--border); }
.header .header-item .wrap { height: 90px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.header .header-menu-box { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
.header .header-menu { display: flex; align-items: center; gap: 35px; }
.header .header-menu > li a { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; padding: 20px 5px; position: relative; }
.header .header-menu > li a::after { width: 100%; height: 3px; content: ''; background-color: var(--base); position: absolute; left: 0; bottom: -20px; transition: 0.2s; }
.header .header-menu > li a:hover::after { bottom: -15px; }
.header .header-menu > li a.this { color: var(--base); }

/* 푸터 */
.footer { background-color: var(--w); padding: 30px 0 60px 0; border-top: 1px solid var(--border); }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; }
.footer .ft-inner { display: flex; align-items: center; gap: 25px; }
.footer .ft-inner li { font-size: 13px; color: #64748b; font-weight: 500; }
.footer .ft-inner span { font-size: 14px; display: flex; align-items: center; gap: 5px; }
.footer .ft-inner span b { font-size: 18px; color: #1a7aff; font-weight: 500; }
.footer .ft-bottom { display: flex; gap: 15px; margin-top: 30px; }
.footer .ft-bottom li { font-size: 13px; color: #64748b; }
.footer .ft-btn { display: flex; flex-direction: column; gap: 5px; }
.footer .ft-btn a { display: flex; align-items: center; justify-content: center; gap: 5px; width: 130px; height: 40px; font-size: 13px; background-color: var(--w3); color: var(--gray); border: 1px solid var(--border2); }
.footer .ft-btn a img { width: 26px; }
.footer i > span { font-size: 11px; color: #64748b; display: block; margin-top: 20px; }

/* 메뉴 */
.menu { width: 260px; border-right: 1px solid var(--border); position: relative; }
.menu .menu-item { display: flex; flex-direction: column; gap: 15px; padding: 20px 20px 40px 0; }

.menu .login-box { display: flex; flex-direction: column; gap: 5px; padding-bottom: 15px; border-bottom: 1px dashed var(--border2); }
.menu .login-box i { display: flex; align-items: center; gap: 15px; margin: 5px 0; }
.menu .login-box input { width: 100%; height: 40px; }
.menu .login-box ul { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; }
.menu .login-box ul li a { width: 75px; text-align: center; font-size: 13px; color: var(--gray); }
.menu .login-btn { display: flex; flex-direction: column; gap: 5px; }
.menu .login-btn a { width: 100%; text-align: center; line-height: 40px; background-color: var(--base); font-size: 13px; color: var(--w); border-radius: 5px; }
.menu .login-btn a:last-child { background-color: var(--gray2); color: var(--base2); font-weight: 600; }

.menu .logined-box { display: flex; flex-direction: column; gap: 10px; padding-bottom: 15px; border-bottom: 1px dashed var(--border2); }
.menu .logined-box h3 { display: flex; align-items: center; justify-content: space-between; height: 28px; padding-left: 8px; padding-top: 8px; box-sizing: border-box; }
.menu .logined-box h3 span { display: flex; align-items: end; gap: 5px; font-size: 15px; }
.menu .logined-box h3 h4 { font-size: 16px; max-width: 132px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.menu .logined-box h3 a { font-size: 11px; font-weight: 600; padding: 5px 7px; background-color: var(--base01); color: var(--base2); border-radius: 5px; }
.menu .logined-box ul { display: flex; flex-direction: column; gap: 18px; padding: 15px 0 5px 0; border-top: 1px solid var(--border); }
.menu .logined-box ul li { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 45px 0 7px; }
.menu .logined-box ul li span { display: flex; align-items: center; gap: 3px; font-size: 13.5px; }
.menu .logined-box ul li span img { margin-right: 5px; }
.menu .logined-box ul li span b { color: var(--red); font-weight: 600; }
.menu .logined-box ul li span a { font-size: 11px; font-weight: 600; padding: 5px 7px; background-color: var(--base01); color: var(--base2); border-radius: 5px; position: absolute; right: 0; }
.menu .logined-box i { display: flex; gap: 5px; flex-direction: column; }
.menu .logined-box i a { width: 100%; text-align: center; line-height: 40px; background-color: var(--base); font-size: 13px; color: var(--w); border-radius: 5px; }
.menu .logined-box i a:last-child { background-color: var(--gray2); color: var(--base2); font-weight: 600; }

.menu .link-box { display: flex; flex-wrap: wrap; gap: 5px; }
.menu .link-box .link-banner { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; background-color: var(--bg); padding: 10px; border: 1px solid var(--border2); border-radius: 5px; position: relative; overflow: hidden; }
.menu .link-box .link-banner::after { content: ''; width: 15px; height: 30px; background-color: var(--base); position: absolute; top: -14px; left: -2px; transform: rotate(45deg); }
.menu .link-box .link-banner h3 { width: 100%; font-size: 15px; font-weight: 700; padding: 5px; text-align: center; }
.menu .link-box .link-banner h3 b { color: var(--gray); font-size: 12px; font-weight: 500; }
.menu .link-box .link-banner a { flex: 1 1 45%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 45px; border-radius: 5px; background-color: var(--w); }
.menu .link-box .link-banner a img { width: 24px; }
.menu .link-box .link-banner a span { font-size: 13.5px; color: var(--base3); font-weight: 600; }
.menu .link-box .link-btn { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; border-radius: 5px; padding: 8px 15px; border: 1px solid var(--border); }
.menu .link-box .link-btn span { font-size: 14px; font-weight: 600; color: var(--base); }
.menu .link-box .link-btn a { width: 45px; text-align: center; line-height: 30px; font-size: 12px; font-weight: 600; color: var(--base); background-color: var(--gray2); border-radius: 5px; }
.menu .link-box .link-btn a:hover { background-color: var(--base); color: var(--w); font-weight: 500; }
.menu .link-box .bank-btn { width: 100%; margin-top: 5px; }
.menu .link-box .bank-btn a { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 38px; background-color: var(--gray2); border-radius: 5px; }
.menu .link-box .bank-btn a span { font-size: 13px; font-weight: 600; color: var(--base); }

.menu .number-box { display: flex; flex-direction: column; gap: 10px; margin-top: 5px;}
.menu .number-box h3 { font-size: 15px; font-weight: 600; }
.menu .number-box h3 b { font-size: 12px; color: var(--red); font-weight: 400; }
.menu .number-box h4 { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 700; margin-bottom: 5px; }
.menu .number-box span { font-size: 13px; color: var(--gray); }
.menu .number-box a { width: 90px; text-align: center; font-size: 12px; font-weight: 500; color: var(--base); background-color: var(--bg); border-radius: 5px; padding: 8px 0; }

/* 문자전송 */
.msg-area { display: flex; flex-wrap: wrap; gap: 15px 20px; padding-top: 3px; }
.msg-area .check-box label { font-size: 14px; }
.msg-area .check-box::after { top: 1px; }

.btn-area { display: flex; flex-wrap: wrap; gap: 5px; }
.btn-area a { width: 100%; flex: 1 1 45%; display: flex; align-items: center; justify-content: center; gap: 5px; height: 40px; font-size: 13px; font-weight: 500; border-radius: 5px; background-color: var(--base01); }

.rec-area { width: 290px; display: flex; flex-direction: column; gap: 10px; }
.rec-box { width: 100%; border: 1px solid var(--base02); position: relative; }
.rec-box .rec-top { height: 36px; border-bottom: 1px solid var(--border); }
.rec-box .rec-top ul { display: flex; }
.rec-box .rec-top ul li { width: 100%; text-align: center; height: 35px; line-height: 35px; background: var(--base01); font-size: 13px; font-weight: 500; border-left: 1px solid var(--base02); box-sizing: border-box; }
.rec-box .rec-top ul li:nth-child(1) { border-left: none; }
.rec-box .rec-top ul li:nth-child(n+3) { display: none; }
.rec-box .rec-item { width: 100%; height: 275px; overflow: hidden; position: relative; }
.rec-box .rec-item .rec-box-line { display: flex; position: absolute; top:0; width: 100%; height: 100%; }
.rec-box .rec-item .rec-box-line li { width: 100%; height: 100%; content: ''; border-left: 1px dashed var(--border); }
.rec-box .rec-item .rec-box-line li:first-child { border: none; }
.rec-box .rec-item .rec-box-line li:nth-child(n+3) { display: none; }
.rec-box .rec-item textarea { width: 100%; height: 100%; border: none; font-size: 13px; line-height: 1.77em; background-image: -webkit-linear-gradient(top , transparent, transparent 1.72em, var(--border) 0); background-size: 100% 1.77em; background-color: var(--w); padding: 0 5px; position: relative; }
.rec-box .rec-item textarea::placeholder { font-size: 13px; color: var(--red) !important; line-height: 1.77em; opacity: 0.9; }
.rec-box .rec-item .rec_notice { position: absolute; }
.rec-box .rec-item .rec_notice > p { font-size: 13px; color:var(--red); line-height: 1.64; opacity: 0.9; } 
.rec-box .rec-ft { display: flex; align-items: center; justify-content: space-between; height: 35px; background: var(--base01); padding: 0 10px; border-top: 1px solid var(--border); }
.rec-box .rec-ft span { line-height: 35px; font-weight: 600; font-size: 13px; letter-spacing: -0.04rem; }
.rec-box .rec-ft span b { color: var(--red); }
.rec-box .rec-ft a { font-size: 12px; color: var(--w); padding: 6px 10px; background: var(--base); border-radius: 5px; }
.rec-info { display: none; height: 125px; padding: 12px 15px 12px 30px; border: 1px solid var(--border2); border-radius: 5px; box-sizing: border-box; }
.rec-info li { font-size: 13px; color: var(--gray); list-style-type: disc; line-height: 25px; }
.rec-info li b { color: var(--red); }

.ad-text { font-size: 15px; font-weight: 600; line-height: 1.4; display: none; }
.title-text { font-size: 15px; font-weight: 600; line-height: 1.6; display: none; }
.refusal-text { font-size: 14px; color: var(--base); line-height: 1.4; display: none; }
.img-view { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; max-height: 115px; overflow-y: auto; margin-bottom: 5px; }
.img-view img { height: 100%; }

.transmit-area { width: 310px; display: flex; flex-direction: column; gap: 10px; }
.transmit-box { display: flex; flex-direction: column; gap: 10px; flex: 1; border-radius: 10px; padding: 5px; background-color: var(--w); border: 1px solid var(--border2); position: relative; }
.transmit-item { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 5px; background-color: var(--base); border-radius: 12px; padding: 10px; transition: 0.2s; }
.transmit-item.sms { background-color: var(--base); }
.transmit-item.lms { background-color: var(--blue); }
.transmit-item.mms { background-color: var(--green); }
.transmit-item .btn-area { gap: 8px; }
.transmit-item .btn-area a { background-color: var(--w); }
.transmit-header { display: flex; align-items: center; justify-content: space-between; }
.transmit-type { font-size: 13px; border-radius: 50px; padding: 5px 10px; background-color: var(--black); color: var(--w); }
.transmit-byte { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--w); }
.transmit-byte b { font-weight: 600; }
.transmit-byte span { opacity: 0.8; }
.transmit-title { height: 40px; min-height: 40px; }
.transmit-title .transmit-info { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 40px; border-radius: 5px; background-color: var(--gray2); }
.transmit-title .transmit-info span { font-size: 14px; font-weight: 500; color: var(--base3); letter-spacing: -0.4px; }
.transmit-title .transmit-info span b { color: var(--red2); }
.transmit-title input { font-size: 14px; width: 100%; height: 40px; border-radius: 5px; background-color: var(--w) !important; padding: 0 10px; border: none; display: none; }
.transmit-title input.focus { background-color: var(--w) !important; border-color: var(--w) !important; }
.transmit-title input::placeholder { font-size: 13px; }
.transmit-content { display: flex; flex-direction: column; gap: 5px; width: 100%; height: 100%; border-radius: 8px; background-color: var(--w); padding: 10px; margin-bottom: 5px; }
.transmit-content textarea { flex: 1; font-size: 14px; line-height: 1.4; border: none; padding: 0; }
.transmit-content textarea::placeholder { font-size: 14px; color: var(--gray) !important; line-height: 1.4; }

.function-area { width: 260px; display: flex; flex-direction: column; gap: 10px; }
.function-area i { display: flex; align-items: center; justify-content: end; gap: 5px; margin-bottom: -5px; }
.function-area i a { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 10px; font-size: 12px; color: var(--base2); font-weight: 600; border-radius: 4px; border: 1px solid var(--base2); }
.function-area .btn-area a:first-child { flex: 1 1 100%; }
.function-area > a { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 40px; background-color: var(--w); border-radius: 5px; border: 1px solid var(--border2); font-size: 13px; font-weight: 600; }

.function-btn-box { display: flex; flex-direction: column; gap: 5px; border-top: 1px dashed var(--border2); padding-top: 10px; }
.function-btn-box a { display: flex; align-items: center; gap: 5px; width: 100%; height: 40px; background-color: var(--w); border-radius: 5px; border: 1px solid var(--border2); font-size: 13px; font-weight: 600; padding: 0 15px; }

.emoticon { flex: 1; padding: 10px; background-color: var(--base01); border-radius: 5px; margin-top: -5px; }
.emoticon ul { display: flex; flex-wrap: wrap; gap: 5px; height: 100%; }
.emoticon ul li { flex: 1 1 10%; }
.emoticon ul li a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; background-color: var(--w); border: 1px solid transparent; border-radius: 5px; }
.emoticon ul li a:hover { border-color: var(--base); }

.function-check { padding: 10px; background-color: var(--bg); border-radius: 5px; border: 1px solid var(--border); }
.function-check ul { display: flex; flex-direction: column; gap: 8px; }
.function-check ul li { display: flex; flex-direction: column; gap: 5px; border-bottom: 1px dashed var(--border2); padding-bottom: 8px; }
.function-check ul li > a { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 40px; background-color: var(--w); border-radius: 5px; border: 1px solid var(--border2); font-size: 13px; font-weight: 600; }
.function-check ul li > a img { width: 20px; }
.function-check ul li .check-box a { font-size: 12px; color: var(--base2); padding: 4px 6px; background-color: var(--base01); border: 1px solid var(--base); }
.function-check ul li:last-child { padding-bottom: 0; border: none; }
.function-check ul li label { font-size: 14px; font-weight: 600; color: var(--black); }
.function-check ul li span { font-size: 12px; line-height: 1.4; margin-left: 22px; }
.function-check ul li span b { color: var(--red); font-weight: 500; }
.function-check ul li span button { font-size: 11px; padding: 4px 6px; border: 1px solid var(--border2); background-color: var(--w); }

.send-area { display: flex; flex-direction: column; flex: 1; }
.send-option { flex: 1; display: flex; gap: 20px; border-top: 1px dashed var(--border); padding-top: 15px; }
.info-btn-box { display: flex; flex-direction: column; gap: 8px; padding: 8px; background-color: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
.info-btn-box a { display: flex; align-items: center; gap: 5px; height: 40px; font-size: 13px; color: var(--lb6); font-weight: 600; padding: 0 10px; background-color: var(--lb2); border-radius: 5px; }
.info-btn-box a:hover { opacity: 0.7; }

.reply-item { width: 310px; display: flex; flex-direction: column; gap: 10px; }
.reply-item .sub-title { margin-bottom: 0; }
.reply-box { display: flex; align-items: center; gap: 5px; padding: 8px; background-color: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
.reply-box a { min-width: fit-content; text-align: center; font-size: 13px; color: var(--w); font-weight: 500; line-height: 35px; padding: 0 10px; background-color: var(--base); border-radius: 5px; }
.reply-box a:last-child { background-color: var(--black3); }
.reply-box input { width: 100%; display: flex; align-items: center; height: 35px; padding: 0 10px; border-radius: 5px; }

.send-item { width: 260px; }
.send-settting { height: 24px; display: flex; align-items: center; gap: 10px; }
.send-btn-area { display: flex; flex-direction: column; gap: 10px; }
.send-btn-area .check-box { height: 22px; }
.send-btn-area .check-box::after { top: 2px; }
.send-btn-box { display: flex; align-items: center; gap: 5px; }
.send-btn-box a { display: inline-block; width: 100%; height: 53px; line-height: 53px; text-align: center; font-size: 16px; font-weight: 500; color: var(--w); background: var(--black3); border-radius: 8px; }
.send-btn-box a:last-child { flex: 1 1 140%; background-color: var(--base); }

.setting-item { width: 290px; display: flex; flex-direction: column; gap: 10px; }
.send-time { display: flex; align-items: center; height: 53px; padding: 8px; background-color: var(--bg); border: 1px solid var(--border); border-radius: 5px; position: relative; }

.reserve-time { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; position: relative; }
.reserve-time input[name="year"] { width: 140px; height: 35px; border-radius: 5px; font-size: 13.5px; border-color: var(--border2); background: url('../images/icons/calendar-icon.png') no-repeat 95% 50% var(--w); }
.reserve-time select { height: 35px; border-radius: 5px; font-size: 13px; border: 1px solid var(--border2); background-color: var(--w); }
.reserve-time i { font-size: 12px; font-weight: 400; color: var(--red); position: absolute; bottom: -30px; }

.repeat-time { display: flex; flex-direction: column; gap: 5px; }
.repeat-time b { font-size: 13px; } 

.repeat-time-layer { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; left: -13px; top: -300px; background-color: var(--w); padding: 15px; border-radius: 8px; border: 1px solid var(--border2); box-shadow: var(--shadow2); }
.repeat-time-layer > h3 { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
.repeat-time-layer > h3 button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background-color: var(--base01); border-radius: 100%; }
.repeat-time-layer > h3 button img { width: 14px; }
.repeat-time-layer > a { display: inline-block; padding: 10px; background-color: var(--base); color: var(--w); font-size: 12px; font-weight: 500; border-radius: 5px; }
.repeat-time-layer ul { display: flex; flex-direction: column; gap: 10px; }
.repeat-time-layer ul li { display: flex; align-items: center; gap: 10px; }
.repeat-time-layer ul li p { width: 25px; font-size: 13px; margin: 0; }
.repeat-time-layer ul li i { display: flex; align-items: center; gap: 5px; flex: 1; }
.repeat-time-layer ul li input[type="text"] { flex: 1; height: 30px; font-size: 13px; border-radius: 5px; }
.repeat-time-layer ul li input[type="date"] { flex: 1; width: 100px; height: 30px; font-size: 13px; border-radius: 5px; padding-left: 5px; cursor: pointer; }
.repeat-time-layer ul li input[name="year"] { flex: 1; max-width: 115px; height: 30px; border-radius: 5px; font-size: 13px; border-color: var(--border2); background: url('../images/icons/calendar-icon.png') no-repeat 95% 50% var(--w); }
.repeat-time-layer ul li select { font-size: 13px; font-weight: 400; height: 30px; padding: 0 20px 0 5px; border: 1px solid var(--border2); border-radius: 5px; background-color: var(--w); }
.repeat-time-layer ul li span { font-size: 12px; font-weight: 400; color: var(--red); }

/* 메일머지 */
.merge .rec-area { width: 575px; }
.merge .transmit-area { width: 300px; }
.merge .rec-area .btn-area { flex-wrap: nowrap; }
.merge .rec-box .rec-top ul li:nth-child(n+3) { display: block; }
.merge .rec-box .rec-item .rec-box-line li:nth-child(n+3) { display: block; }
.merge .transmit-area .function-check { height: 125px; }
.merge .transmit-area .function-check ul { height: 100%; justify-content: center; }
.merge .transmit-area .transmit-item { height: 431px; }
.merge .send-item { width: 300px; }
.merge .setting-item { width: 280px; }
.merge .reserve-time input[name="year"] { width: 130px; }
.merge .reply-item { width: 275px; }
.merge .rec-info { display: block; }

/* 수신거부 결과 전송 */
.refusal .send-settting .check-box:last-child { display: none; }
.refusal-info { border: 1px solid var(--red); background-color: var(--red01); border-radius: 5px; padding-bottom: 10px; margin-top: 35px; }
.refusal-info h3 { font-size: 15px; padding: 10px; background-color: var(--red2); color: var(--w); text-align: center; }
.refusal-info span { display: block; padding: 10px; font-size: 13px; line-height: 1.6; }
.refusal-info span strong { color: var(--red); }
.refusal-info ul { display: flex; flex-direction: column; gap: 10px; padding: 12px 15px; background-color: var(--w); border-radius: 5px; margin: 0 10px; }
.refusal-info ul h4 { text-align: center; font-size: 14px; color: var(--red2); font-weight: 600; border-bottom: 2px solid var(--red2); padding-bottom: 10px; }
.refusal-info ul li { font-size: 13px; list-style-type: disc; margin-left: 20px; }

/* 초대량 전송 */
.bulk-area { width: 290px; height: 518px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.bulk-area.blur::after { position: absolute; top: 24px; left: 0; width: 100%; height: 493px; content: ''; background-color: var(--w07); border: 1px solid var(--border2); border-radius: 10px; box-sizing: border-box; }
.bulk-area.blur .bulk-file-area { border-color: transparent; }
.bulk-area.blur .bulk-group-area { border-color: transparent; }
.bulk-info { border: 1px solid var(--border); background: var(--bg); padding: 10px; }
.bulk-info > h3 { font-size: 14px; font-weight: 600; padding-left: 10px; position: relative; margin-top: 10px; }
.bulk-info > h3:first-child { margin: 0; }
.bulk-info > h3::after { content: ''; display: block; position: absolute; top: 50%; left: 0; margin: -5px 0; width: 0; height: 0; border: 4px solid transparent; border-left-color: var(--bg); }
.bulk-info > h3::before { content: ''; display: block; position: absolute; top: 50%; left: 1px; margin: -5px 0; width: 0; height: 0; border: 4px solid transparent; border-left-color: var(--black); }
.bulk-info > p { font-size: 13px; margin-top: 8px; color: var(--base3); font-weight: 600; padding-left: 4px; }
.bulk-info > span { display: block; font-size: 12px; margin-top: 8px; padding-left: 10px; }
.bulk-info .ex-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; background: var(--w); border: 1px solid var(--border2); font-size: 12px; }
.bulk-file-area { display: flex; flex-direction: column; gap: 5px; border-bottom: 1px dashed var(--border2); position: relative; border: 1px solid var(--black); border-radius: 8px; padding: 8px; }
.bulk-file-area.blur { border-color: var(--border); }
.bulk-file-area.blur::after { position: absolute; top: 30px; left: 0; width: 100%; height: calc(100% - 30px); content: ''; background-color: var(--w07); border-radius: 8px; }
.bulk-file-area i { display: flex; align-items: center; gap: 5px; }
.bulk-file-area input[type="text"] { flex: 1; height: 35px; }
.bulk-file-area button { height: 35px; border-radius: 5px; font-size: 13px; border: none; background-color: var(--base); color: var(--w); padding: 0 10px; }
.bulk-file-area > button { height: 40px; font-size: 14px; background-color: var(--base3); }
.bulk-group-area { display: flex; flex-direction: column; gap: 5px; position: relative; padding: 8px; border: 1px solid var(--black); border-radius: 8px; }
.bulk-group-area.blur { border-color: var(--border); }
.bulk-group-area.blur::after { position: absolute; top: 30px; left: 0; width: 100%; height: calc(100% - 30px); content: ''; background-color: var(--w07); border-radius: 8px; }
.bulk-group-area a { text-align: center; line-height: 40px; height: 40px; font-size: 14px; font-weight: 500; background-color: var(--w3); border-radius: 5px; border: 1px solid var(--border2); margin-bottom: 1px; }
.bulk-upload { display: none; width: calc(100% - 20px); background-color: var(--w); border: 4px solid var(--border2); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-55%); z-index: 9; }
.bulk-upload h3 { font-size: 13px; font-weight: 600; text-align: center; height: 35px; line-height: 35px; background: var(--bg); border-bottom: 1px solid var(--border); }
.bulk-upload h3 b { color: var(--orange); }
.bulk-upload-item { padding: 10px; }
.bulk-upload-item p { height: 15px; display: flex; align-items: center; gap: 3px; }
.bulk-upload-item p a { display: flex; margin-bottom: 1px; }
.bulk-upload-item p span { font-size: 13px; font-weight: 600; }
.bulk-upload-item #viewUpFilename { line-height: 25px; font-size: 12px; }
.bulk-upload-info { padding: 10px; background: var(--bg); font-size: 13px; border: 1px solid var(--border); }
.bulk-upload-info h4 { margin-bottom: 8px; }
.bulk-upload-info h4 b { color: var(--orange); }
.bulk-upload-info ul { display: flex; flex-direction: column; gap: 8px; }
.bulk-upload-info ul li { color: #888; }

/* 이미지 전송 */
.transmit-item.mms .title-item { display: block; }
.transmit-item.mms .images-area { display: flex; flex-direction: column; gap: 10px; margin-bottom: 5px; }
.transmit-item.mms .images-area i { display: flex; align-items: center; gap: 3px; position: relative; }
.transmit-item.mms .images-area i p { font-size: 13px; color: var(--w); font-weight: 500; position: relative; }
.transmit-item.mms .images-box { display: flex; gap: 5px; }
.transmit-item.mms .msg_wrap .img_upload > ul dl { width: 100%; display: flex; gap: 10px; }
.transmit-item.mms .image-item-box { flex: 1; height: 90px; display: flex; align-items: center; justify-content: center; background-color: var(--w); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; position: relative; }
.transmit-item.mms .image-item-box .image-item { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; padding: 5px; border-radius: 5px; }
.transmit-item.mms .image-item-box .image-item img { width: 100%; }
.transmit-item.mms .image-item-box span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 13px; color: var(--w); padding: 8px; background-color: var(--base3); border-radius: 5px; z-index: 9; display: none; }
.transmit-item.mms .image-item-box.img-load:hover::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--w07); border-radius: 5px; }
.transmit-item.mms .image-item-box.img-load:hover span { display: block; }
.transmit-item.mms .image-item-box p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; background-color: var(--border2); border-radius: 50px; }
.transmit-item.mms .image-item-box p::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 2px; background-color: var(--w); content: ''; }
.transmit-item.mms .image-item-box p::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 2px; height: 10px; background-color: var(--w); content: ''; }
.transmit-item.mms .image-item-box:hover { border-color: var(--base3); }
.transmit-item.mms .image-item-box:hover p { background-color: var(--base3); }
.transmit-item.mms .image .rec-box .rec-item { height: 361px; }

/* 주소록 */
.adr-area { display: flex; gap: 10px; }
.adr-area table th { border-top: none; }
.adr-header { height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--border2); }
.adr-header h3 { font-size: 15px; font-weight: 600; }
.adr-header i { display: flex; align-items: center; gap: 5px; }
.adr-header i a { height: 30px; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; border: 1px solid var(--border2); padding: 0 10px; border-radius: 4px; }
.adr-area select { height: 35px; }
.adr-area input { width: 100%; height: 35px; border-radius: 5px; }
.adr-area input[type="button"] { min-width: 65px; width: 65px; background-color: var(--base); font-size: 13px; color: var(--w); }
.adr-add-box { display: flex; align-items: center; gap: 5px; padding: 10px; border-bottom: 1px solid var(--border2); }

.group-box { flex: 1 1 30%; border: 1px solid var(--border2); }
.group-box-tit { line-height: 40px; padding: 0 10px; }
.group-box-tit a { font-size: 14px; font-weight: 600; color: var(--base); }
.group-box-item ul { height: 390px; overflow-y: scroll; display: flex; flex-direction: column; gap: 8.5px; padding: 10px; border-top: 1px solid var(--border2); }
.group-box-item ul li { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-weight: 500; }
.group-box-item ul li i { display: flex; align-items: center; gap: 5px; }
.group-box-item ul li i:last-child { width: 100%; width: fit-content; gap: 2px; }
.group-box-item ul li i a { display: flex; font-size: 13px; }
.group-box-item ul li i a p { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-box-item ul li i input { margin: 0 3px; }
.group-box-item ul li.gl { padding-left: 31px; }
.group-box-item ul li.gl i:first-child::before { display: block; width: 10px; height: 10px; content: ''; border-left: 1px dotted var(--black4); border-bottom: 1px dotted var(--black4); margin-bottom: 10px; }
.group-box-item ul li.gl a p { max-width: 85px; }
.group-box-item > a { display: flex; align-items: center; }
.group-refusal-box { padding: 10px; border-top: 1px solid var(--border2); }
.group-refusal-box a { display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; font-size: 13px; font-weight: 500; border: 1px solid var(--border2); border-radius: 4px; }
.group-refusal-box a i { display: flex; align-items: center; gap: 5px; }
.group-btn-box { height: 48px; display: flex; align-items: center; gap: 5px; padding: 10px; border-top: 1px solid var(--border2); }
.group-btn-box a { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; height: 30px; border: 1px solid var(--border2); border-radius: 4px; }
.group-bottom-box { padding: 10px; border-top: 1px solid var(--border2); }
.group-bottom-box a { display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; font-size: 13px; background-color: var(--base2); color: var(--w); border-color: var(--base2); border-radius: 4px; }

.list-box { flex: 1 1 70%; border: 1px solid var(--border2); }
.list-box-item { padding-bottom: 10px; }
.list-box-item .page { margin-top: 10px; }
.list-box-table { height: 401px; overflow-y: scroll; }
.list-box-table table td { height: 40px; padding: 0 10px; }
.list-box-table table td i { display: flex; justify-content: center; gap: 5px; }
.list-box-table table td i a { display: flex; }
.list-search-box { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-top: 1px solid var(--border2); }
.list-search-box i { display: flex; align-items: center; gap: 5px; }
.list-search-box i input[type="button"] { min-width: auto; width: auto; padding: 0 10px; }
.list-view-box { border-top: 1px solid var(--border2); padding: 10px; }
.list-view-box ul { display: flex; gap: 5px; }
.list-view-box ul li { flex: 1; min-width: fit-content; height: 25px; border: 1px solid var(--border2); border-radius: 4px; }
.list-view-box ul li.this { background-color: var(--black3); color: var(--w); border-color: var(--black3); }
.list-view-box ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 13px; }
.list-view-box ul li:nth-child(1) a { padding: 0 10px; }
.list-view-box ul li:nth-last-child(1) a { padding: 0 10px; }
.list-view-box ul li:nth-last-child(2) a { padding: 0 10px; }
.list-btn-box { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-top: 1px solid var(--border2); }
.list-btn-box i { display: flex; align-items: center; gap: 5px; }
.list-btn-box a { font-size: 13px; font-weight: 500; display: flex; align-items: center; height: 35px; padding: 0 10px; border: 1px solid var(--border2); border-radius: 4px; }
.list-btn-box > a { background-color: var(--base2); color: var(--w); border-color: var(--base2); font-weight: 400; }

/* 수신거부 관리 */
.refusal-add { flex: 1 1 30%; border: 1px solid var(--border2); }
.refusal-add .rec-box { border: none; }
.refusal-add .rec-box .rec-top { height: 39.5px; border-bottom: none; }
.refusal-add .rec-box .rec-top ul li { height: 39.5px; line-height: 39.5px; background-color: var(--w3); font-size: 14px; font-weight: 600; }
.refusal-add .rec-box .rec-item { height: 468px; }
.refusal-add .rec-box .rec-item textarea { border-top: 1px solid var(--border2);     background-image: -webkit-linear-gradient(top, transparent, transparent 1.67em, var(--border) 0); background-size: 100% 1.72em; line-height: 1.72em; }
.refusal-add .rec-box .rec-ft { height: 40px; background-color: var(--w3); border-top: 1px solid var(--border2); }
.refusal-list table td p { content: ''; width: 20px; height: 20px; background: var(--checked); display: inline-block; }
.refusal-add-btn { padding: 10px; border-top: 1px solid var(--border2); }
.refusal-add-btn a { display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; font-size: 13px; background-color: var(--base2); color: var(--w); border-color: var(--base2); border-radius: 4px; }

/* 내문자 */
.message-area { width: 100%; display: flex; gap: 20px; }
.category-box { flex: 1 1 20%; height: calc(100% - 50px); background-color: var(--w5); padding: 8px; border-radius: 10px; overflow: hidden; }
.category-box ul { display: flex; flex-direction: column; position: relative; }
.category-box > ul { overflow-y: auto; height: 100%; padding-right: 5px; }
.category-box > ul > li > a::before { content: ''; width: 20px; height: 20px; background: var(--check); }
.category-box ul li { display: flex; flex-direction: column; line-height: 35px; border-radius: 5px; }
.category-box ul li a { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; padding: 0 10px; }
.category-box ul li:last-child { border-bottom: none; }
.category-box ul li ul { gap: 5px; display: none; border-left: 1px solid var(--black01); margin: 0 10px 15px 20px; padding-left: 10px; }
.category-box ul li ul li { line-height: 30px; position: relative; }
.category-box ul li ul li::before { content: ''; width: 3px; height: 30px; background-color: var(--base); border-radius: 50px; position: absolute; left: -11.5px; display: none; }
.category-box ul li ul li a { font-size: 13px; }
.category-box ul li ul li:hover { background-color: var(--base02); }
.category-box ul > li.this { background-color: var(--base01); }
.category-box ul > li.this > a { color: var(--base); font-weight: 600; }
.category-box ul > li.this > a::before { background: var(--checked); }
.category-box ul li.this ul { display: flex; }
.category-box ul li.this ul li.this::before { display: block; }
.category-box ul li.this ul li.this a { color: var(--base3); }

.message-box { flex: 1 1 80%; }
.message-box-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--border2); padding-bottom: 10px; }
.message-box-header i { display: flex; align-items: center; gap: 5px; }
.message-box-header i span { font-size: 13px; color: var(--gray); margin-top: 15px; }
.message-box-header i span b { color: var(--red); }
.message-box-header i a { font-size: 13px; font-weight: 500; display: flex; align-items: center; height: 35px; padding: 0 10px; border: 1px solid var(--border2); border-radius: 4px; }
.message-box-header .hot-keyword { width: 100%; height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px 0 15px; border: 1px solid var(--border2); border-radius: 5px; position: relative; }
.message-box-header .hot-keyword::before { content: ''; width: 32px; height: 32px; background: url('../images/icons/hot-icon.png') no-repeat 50% 50%; position: absolute; right: 5px; top: -5px; }
.message-box-header .hot-keyword a { font-size: 14px; font-weight: 600; }
.message-box-header input { height: 35px; }
.message-box-header input[type="button"] { border-radius: 4px; background-color: var(--base); color: var(--w); padding: 0 10px; }

.message-list { min-height: 545px; display: flex; flex-wrap: wrap; gap: 15px 10px; margin-top: 10px; }
.message-item { width: calc(100% / 4 - 7.5px); display: flex; flex-direction: column; gap: 5px; }
.message-item .check-box label { font-size: 14px; color: var(--black); font-weight: 600; }
.message-item .message-images { min-height: 125px; height: 125px; display: flex; flex-direction: column; align-items: center; gap: 5px; overflow-y: auto; background-color: var(--w); }
.message-item .message-images img { width: 100%; }
.message-item .message-item-top { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; position: relative; }
.message-item .message-item-top i { display: flex; align-items: center; gap: 5px; }
.message-item .message-item-top span { font-size: 12px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.message-item .message-item-top span b { color: var(--red); }
.message-item .message-item-box { display: flex; flex-direction: column; gap: 5px; width: 100%; height: 200px; background-color: var(--w3); border-radius: 10px; border-radius: 10px; padding: 5px; border: 1px solid transparent; }
.message-item .message-item-box:hover { border-color: var(--base); }
.message-item .message-item-box textarea { width: 100%; height: 100%; line-height: 1.4; border-radius: 8px; cursor: pointer; border: none; padding: 5px; }
.message-item .message-item-bottom { display: flex; align-items: center; justify-content: space-between; background-color: var(--w3); padding: 8px 10px; border-radius: 8px; }
.message-item .message-item-bottom span { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.message-item .message-item-bottom > a { display: flex; align-items: center; gap: 5px; justify-content: center; width: calc(100% + 20px); height: 34px; font-size: 13px; border-radius: 8px; margin: -8px -10px; }
.message-item .message-item-bottom ul { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.message-item .message-item-bottom ul li { width: 100%; display: flex; gap: 5px; font-size: 12px; }
.message-item .message-item-bottom ul li strong { display: flex; gap: 5px; }
.message-item .message-item-bottom ul li strong span { color: var(--gray); }
.message-item .message-item-bottom ul li strong b { color: var(--red); }
.message-list.mms .message-item-box { height: 300px; }

/* 예약내역 관리 */
.calendar-area { display: flex; align-items: center; justify-content: space-between; border-radius: 5px; background: #f7f7f7; border: 1px solid var(--border2); position: relative; margin-bottom: 20px; padding: 20px;  }
.calendar-box { width: 100%; gap: 10px; display: flex; align-items: center; justify-content: center; }
.calendar-item { width: 210px; height: 210px; padding: 24px 10px 0 10px; background: url('../images/calendar.png') no-repeat 50% 50%; }
.calendar-item > p { text-align: center; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.calendar-item > p > span { font-size: 20px; color: var(--base); margin-right: 2px; }
.calendar-item table { width: 100%; }
.calendar-item table th { padding: 0; font-size: 13px; height: 20px; border: 1px solid var(--border2) !important; }
.calendar-item table td { height: 21px; font-size: 13px; text-align: center; border: 1px solid var(--border2); padding: 0; }
.calendar-item table .sun { color: red; }
.calendar-item table .sat { color: blue; }
.calendar-item table .on { color: var(--w); background-color: var(--green); cursor: pointer; }

/* 요금결제 */
.payment-area { display: flex; gap: 15px; }
.payment-area .payment-item { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.payment-area h3 { display: flex; align-items: end; justify-content: space-between; font-size: 16px; font-weight: 700; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 2px solid var(--base3); }
.payment-area h3 b { font-size: 12px; font-weight: 400; color: var(--gray); }
.payment-area .payment-type { padding: 20px; border: 1px solid var(--border2); }
.payment-area .payment-type span { display: flex; gap: 30px; }
.payment-area .payment-type label { font-size: 15px; color: var(--black); font-weight: 500; }

.payment-area .payment-table-box { padding: 20px; border: 1px solid var(--border2); }
.payment-area .payment-table ul { display: flex; flex-wrap: wrap; gap: 15px 10px; }
.payment-area .payment-table ul li { flex: 1 1 45%; display: flex; align-items: center; gap: 5px; height: 40px; position: relative; border: 1px solid var(--border2); border-radius: 5px; padding: 0 10px; }
.payment-area .payment-table ul li label { width: 276px; height: 40px; position: absolute; left: -10px; top: -10px; box-sizing: border-box; }
.payment-area .payment-table ul li.disabled { background-color: var(--black01) !important; }
.payment-area .payment-table ul li i { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-left: 5px; letter-spacing: -0.2px; }
.payment-area .payment-table ul li i span { width: 90px; font-size: 15px; font-weight: 600; text-align: right; }
.payment-area .payment-table ul li i b { font-size: 14px; font-weight: 500; color: var(--base); padding-top: 5px; }
.payment-area .payment-table ul li p { position: absolute; right: 10px; top: -10px; width: 45px; text-align: center; font-size: 11px; font-weight: 500; background-color: var(--bg); padding: 4px 0; border-radius: 50px; border: 1px solid var(--border2); }
.payment-area .payment-table ul li:hover { background-color: var(--y01); }
.payment-area .payment-table ul li.this { background-color: var(--y01); }
.payment-area .payment-table ul li:nth-child(2n+8) i { color: var(--base2); }
.payment-area .payment-table ul li:nth-child(2n+8) i b { font-weight: 600; color: var(--red); }

.payment-area .payment-info { flex: 1 1 100%; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background-color: var(--bg); border-radius: 5px; }
.payment-area .payment-info span { font-size: 13px; color: var(--gray); line-height: 1.4; text-align: center; }
.payment-area .payment-info span b { color: var(--black); text-decoration: underline; }
.payment-area .payment-info span i { color: var(--base); }
.payment-area .payment-info a { font-size: 12px; font-weight: 400; padding: 8px 12px; background-color: var(--base3); color: var(--w); border-radius: 4px; }

.payment-area .payment-total-box { min-width: 280px; display: flex; flex-direction: column; }
.payment-area .total-box { padding: 20px; background-color: var(--base3); display: flex; flex-direction: column; gap: 10px; }
.payment-area .total-box h4 { color: var(--w); font-size: 15px; }
.payment-area .total-box i { display: flex; align-items: end; justify-content: space-between; }
.payment-area .total-box i span { font-size: 20px; }
.payment-area .total-box i p { color: var(--w07); font-size: 14px; }
.payment-area .total-box span { color: var(--w); }

.payment-area .payment-total-box a { width: 100%; font-size: 16px; color: var(--w); line-height: 50px; text-align: center; background-color: var(--base); border-radius: 5px; margin-top: 10px; }
.payment-area .payment-total-box .bank-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; border: 1px solid var(--border2); margin-top: 10px; }
.payment-area .payment-total-box .bank-box h4 { font-size: 14px; font-weight: 600; }
.payment-area .payment-total-box .bank-box i { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--base2); }
.payment-area .payment-total-box .bank-box i img { width: 48px; }
.payment-area .payment-total-box .bank-box span { font-size: 13px; color: var(--gray); }

.payment-area .payment-total { padding: 20px; border: 1px solid var(--border2); }
.payment-area .payment-total ul { display: flex; flex-direction: column; gap: 20px; }
.payment-area .payment-total ul p { font-size: 13px; color: var(--gray); border-bottom: 1px solid var(--border2); padding-bottom: 10px; margin-bottom: -5px; }
.payment-area .payment-total ul li { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.payment-area .payment-total ul li span { font-weight: 600; }
.payment-area .payment-total ul li #payType { color: var(--base); }

/* 견적서 발행 */
.fare-area { display: flex; flex-direction: column; gap: 15px; }
.fare-area h3 { font-size: 16px; font-weight: 700; margin-bottom: 15px; }
.fare-area .fare-item { padding: 20px; border: 1px solid var(--border2); }
.fare-area .fare-type { display: flex; gap: 30px; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid var(--border2); }
.fare-area .fare-type label { font-size: 14px; font-weight: 500; }
.fare-area .fare-btn { display: flex; justify-content: center; margin: 20px 0; }
.fare-area .fare-btn a { width: 240px; line-height: 50px; font-size: 15px; color: var(--w); text-align: center; background-color: var(--base); border-radius: 5px; }
.fare-area ul { display: flex; flex-wrap: wrap; gap: 15px; }
.fare-area ul li { display: flex; flex-direction: column; gap: 10px; flex: 1 1 45%; }
.fare-area ul li span { font-size: 14px; font-weight: 600; }
.fare-area ul li input { width: 100%; height: 40px; background-color: var(--w3); border-radius: 0; }
.fare-area ul li i { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.fare-area ul li i input { width: 200px; }
.fare-area .fare-type-item ul { flex: 1 1 100%; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding-left: 20px; }
.fare-area .fare-type-item ul li { display: list-item; font-size: 13px; list-style-type: disc; color: var(--gray); }

.est-item { display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 40px; border: 1px solid var(--border2); }
.est-item > h4 { font-size: 36px; text-align: center; font-weight: 700; margin-bottom: 40px; }
.est-item table { border: 1px solid var(--border2); }
.est-item table caption { font-size: 13px; font-weight: 600; text-align: left; margin-bottom: 10px; }
.est-item table th { font-size: 13px; line-height: 1.6; font-weight: 700; border: 1px solid var(--border2); background-color: var(--w5); }
.est-item table td { line-height: 1.6; border: 1px solid var(--border2); }
.est-item table td strong { font-size: 14px; }
.est-item .est-top { display: flex; gap: 20px; }
.est-item .est-mid table { border: 2px solid var(--black); }
.est-item .est-mid table td { border-color: var(--black); }
.est-item .est-mid table td:nth-child(1) { font-weight: 700; }
.est-item .est-mid table td:nth-child(2) { font-weight: 700; font-size: 15px; text-align: right; }
.est-item .est-note td { height: 200px; }
.est-item .est-note td textarea { width: 100%; height: 100%; border: none; padding: 0; }
.est-btn { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.est-btn a { padding: 15px 45px; font-size: 15px; color: var(--w); background-color: var(--base); border-radius: 5px; }
.est-btn a:first-child { background-color: var(--base3); }

/* 고객센터 */
.support-area .qna-table table td:nth-child(2) { text-align: left; }
.support-area .notice-table table td:nth-child(2) { text-align: left; }

.support-area .support-btn { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.support-area .support-btn a { padding: 15px 40px; background-color: var(--base); font-size: 14px; color: var(--w); border-radius: 5px; }

.support-area .view-table table thead { border-top: 2px solid var(--base3); }
.support-area .view-table table thead td { text-align: left; border-top: 1px solid var(--border2); }
.support-area .view-table table thead td:nth-child(4) { text-align: center; }
.support-area .view-table table tbody td { text-align: left; }

.support-area .write-table table thead { border-top: 2px solid var(--base3); }
.support-area .write-table table thead td { border-top: 1px solid var(--border2); }
.support-area .write-table table thead td { height: 45px; padding: 0 10px; }
.support-area .write-table table thead td input { width: 100%; height: 35px; border-radius: 0; }
.support-area .write-table table tbody td textarea { width: 100%; height: 400px; }
.support-area .write-table table tbody td textarea.focus { border-color: var(--base); background-color: var(--base01); }

.support-area .faq-tab { display: flex; gap: 5px; }
.support-area .faq-tab a { border-radius: 50px; padding: 0 15px; }
.support-area .faq-tab a.this { background-color: var(--base); color: var(--w); border-color: var(--base); }

.answer-area { background-color: var(--w5); padding: 20px; }
.answer-area .answer-title { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.answer-area .answer-title p { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 100%; background-color: var(--base); font-size: 14px; color: var(--w); padding-left: 1px; box-sizing: border-box; }
.answer-area .answer-title h3 { font-size: 17px; font-weight: 700; }
.answer-area .answer-text { font-size: 15px; }

.faq-area .question-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: var(--black4); color: var(--w); font-size: 12px; font-weight: 400; padding-left: 1px; }
.faq-area .answer-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: var(--base); color: var(--w); font-size: 12px; font-weight: 400; padding-left: 1px; position: absolute; left: 15px; top: 15px; }
.faq-area ul { border-top: 1px solid var(--base3); }
.faq-area ul li { cursor: pointer; border-bottom: 1px solid var(--border2); position: relative; }
.faq-area ul li > h4 { display: flex; align-items: center; height: 50px; font-size: 14px; font-weight: 600; padding: 0 15px; }
.faq-area ul li > h4 b { width: 120px; display: flex; align-items: center; gap: 8px; }
.faq-area ul li > h4::before { content: ''; width: 16px; height: 16px; position: absolute; top: 18px; right: 15px; transform: rotate(180deg); background: var(--arrow); }
.faq-area ul li:hover > h4 span { color: var(--base2); }
.faq-area ul li.this > h4 span { color: var(--base2); }
.faq-area ul li.this > h4::before { transform: rotate(0); }
.faq-area ul li .answer-box { display: none; padding: 15px 15px 15px 40px; background-color: var(--w5); border-top: 1px solid var(--border2); position: relative; }
.faq-area ul li .answer-box span { font-size: 13px; line-height: 1.6; }

/* 080 수신거부 서비스 안내 */
.service-area { display: flex; flex-direction: column; gap: 30px; }
.service-area table td { border: 1px solid var(--border2); font-size: 14px; font-weight: 400; }
.service-area table th { border-top: 1px solid var(--border2); line-height: 1.4; }
.service-area table td:last-child { border-right: none; }
.service-area table td:first-child { border-left: none; }
.service-area p { font-size: 14px; line-height: 1.4; padding-left: 10px; }
.service-area p a { color: var(--red); display: inline-block; text-decoration: underline; font-weight: 600; }
.service-area p span { color: var(--gray); }
.service-area p b { color: var(--red); font-weight: 600; }
.service-area .service-type { display: flex; gap: 10px; }
.service-area .service-type .service-type-item { flex: 1; }
.service-area .service-type .service-type-item h4 { line-height: 35px; text-align: center; background-color: var(--base); font-size: 14px; color: var(--w); }
.service-area .service-type .service-type-item:last-child h4 { background-color: var(--base3); }
.service-area .service-type .service-type-item ul { display: flex; flex-direction: column; gap: 15px; padding: 15px 15px 18px 30px; border: 1px solid var(--border2); }
.service-area .service-type .service-type-item ul li { font-size: 13px; list-style-type: disc; }
.service-area .service-type .service-type-item ul li b { font-size: 11px; padding: 3px 5px; background-color: var(--red); color: var(--w); border-radius: 4px; position: relative; top: -1px; }
.service-area > ul { display: flex; flex-direction: column; gap: 10px; }
.service-area > ul li { font-size: 13px; color: var(--gray); list-style-type: disc; margin-left: 18px; }
.service-area > ul strong { font-size: 13px; color: var(--gray); }
.service-area .service-table table tr:first-child td:nth-child(2) { background-color: var(--base); color: var(--w); }
.service-area .service-table table tr:first-child td:nth-child(3) { background-color: var(--base3); color: var(--w); }
.service-area .service-table table td i a { display: inline-block; color: var(--base); text-decoration: underline; }
.service-area .service-table table td > a { display: inline-block; padding: 8px 25px; background-color: var(--base3); color: var(--w); border-radius: 5px; }

/* 회원정보 수정 */
.member-area .member-notice-item { width: 100%; margin-bottom: 20px; padding: 10px; border: 1px solid var(--border2); }
.member-area .member-notice-item > p { font-size: 13px; color: var(--gray); margin-top: 10px; }
.member-area .member-notice-text { text-align: center; padding: 20px; background-color: var(--bg); line-height: 1.6; }
.member-area .member-notice-text h3 { font-size: 17px; font-weight: 600; color: var(--base); }
.member-area .member-notice-text h4 { font-size: 17px; font-weight: 600; color: var(--base3); }
.member-area .member-notice-text span { font-size: 14px; color: var(--red); }
.member-area .member-notice-text p { font-size: 14px; }
.member-area .member-notice-text a { display: flex; align-items: center; justify-content: center; width: 146px; margin: 10px 40% 0px 40%; height: 35px; line-height: 35px; padding: 0 10px; border-radius: 5px; background-color: var(--base); color: var(--w); font-weight: 400; }
.member-area table { border-top: 1px solid var(--base3); }
.member-area table th { text-align: left; padding: 0 20px; }
.member-area table th.check { background: url('../images/icons/check-ricon.gif') no-repeat 20px center var(--w3); padding: 0 20px 0 40px;}
.member-area table th img { margin-right: 8px; }
.member-area table td { text-align: left; height: 50px; padding: 0 10px; }
.member-area table td a { display: inline-block; height: 35px; line-height: 35px; padding: 0 10px; border-radius: 5px; background-color: var(--base); color: var(--w); font-weight: 400; }
.member-area table td i { display: flex; align-items: center; gap: 5px; line-height: 1; }
.member-area table td i > input { height: 35px; }
.member-area table td i > select { height: 35px; }
.member-area table td i .check-box { margin: 0 5px; }

/* 회신번호 관리 */
.callback-area { display: flex; flex-direction: column; gap: 30px; }
.callback-area .callback-notice-box { display: flex; flex-direction: column; gap: 10px; position: relative; }
.callback-area .callback-notice-box > p { font-size: 13px; color: var(--gray); }
.callback-area .callback-notice { width: 100%; padding: 10px; border: 1px solid var(--border2); }
.callback-area .callback-notice-item { text-align: center; padding: 20px 30px; background-color: var(--bg); position: relative; }
.callback-area .callback-notice-item a { display: flex; align-items: center; gap: 5px; background-color: var(--w); font-size: 13px; font-weight: 500; border: 1px solid var(--base2); padding: 8px; position: absolute; right: 8px; top: 8px; }
.callback-area .callback-notice-item a b { color: var(--base2); }
.callback-area .callback-notice-item h3 { font-size: 16px; font-weight: 600; color: var(--base3); line-height: 1.6; }
.callback-area .callback-notice-item h3 b { color: var(--base2); }
.callback-area .callback-notice-item ul { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.callback-area .callback-notice-item ul li { flex: 1; display: flex; flex-direction: column; gap: 10px; background-color: var(--w); border-radius: 50px; padding: 18px 0; }
.callback-area .callback-notice-item ul li strong { font-size: 15px; }
.callback-area .callback-notice-item ul li span { font-size: 14px; color: var(--base); }
.callback-area .callback-notice-item ul li p { font-size: 13px; color: var(--gray); }
.callback-area .callback-notice-item ul i { width: 30px; height: 30px; display: block; position: relative; }
.callback-area .callback-notice-item ul i::after { content: ''; width: 2px; height: 10px; background-color: var(--black); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.callback-area .callback-notice-item ul i::before { content: ''; width: 10px; height: 2px; background-color: var(--black); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.callback-area .callback-list-box { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border2); }
.callback-area .callback-list-table table { position: relative; }
.callback-area .callback-list-table table th { border-top: none; }
.callback-area .callback-list-table table td { padding: 0 5px; height: 35px; }
.callback-area .callback-list-table table i { display: flex; align-items: center; justify-content: center; gap: 5px; line-height: 1; }
.callback-area .callback-list-table table i input { width: 100%; height: 24px; padding: 0 5px; }
.callback-area .callback-list-table table i a { display: flex; }
.callback-area .callback-list-table table td strong { color: var(--red); }
.callback-area .callback-list-table table tr:nth-child(n+6) { width: 450px; position: absolute; left: 449px; }
.callback-area .callback-list-table table tr:nth-child(n+6) td:nth-child(1) { width: 55px; border-left: 1px solid var(--border2); }
.callback-area .callback-list-table table tr:nth-child(n+6) td:nth-child(2) { width: 120px; }
.callback-area .callback-list-table table tr:nth-child(n+6) td:nth-child(3) { width: 155px; }
.callback-area .callback-list-table table tr:nth-child(n+6) td:nth-child(4) { width: 120px; }
.callback-area .callback-list-table table tr:nth-child(6) { top: 34px; }
.callback-area .callback-list-table table tr:nth-child(7) { top: 69px; }
.callback-area .callback-list-table table tr:nth-child(8) { top: 104px; }
.callback-area .callback-list-table table tr:nth-child(9) { top: 139px; }
.callback-area .callback-list-table table tr:nth-child(10) { top: 174px; }

.callback-area .callback-all-header { margin-bottom: -10px; border-right: 10px solid var(--w3); }
.callback-area .callback-all-header th { border-top: none; }
.callback-area .callback-all-table { width: 100%; height: 176px; overflow-y: scroll; border-bottom: 1px solid var(--border2); }
.callback-area .callback-all-table table { position: relative; }
.callback-area .callback-all-table table td { padding: 0 5px; height: 35px; }
.callback-area .callback-all-table table i { display: flex; align-items: center; justify-content: center; gap: 5px; line-height: 1; }
.callback-area .callback-all-table table i input { width: 100%; height: 24px; padding: 0 5px; }
.callback-area .callback-all-table table i a { display: flex; }
.callback-area .callback-all-table table td strong { color: var(--red); }
.callback-area .callback-all-table table tr:nth-child(n+11) { width: 440px; position: absolute; left: 449px; }
.callback-area .callback-all-table table tr:nth-child(n+11) td:nth-child(1) { width: 55px; border-left: 1px solid var(--border2); }
.callback-area .callback-all-table table tr:nth-child(n+11) td:nth-child(2) { width: 120px; }
.callback-area .callback-all-table table tr:nth-child(n+11) td:nth-child(3) { width: 155px; }
.callback-area .callback-all-table table tr:nth-child(n+11) td:nth-child(4) { width: 110px; }
.callback-area .callback-all-table table tr:nth-child(10) td { border-bottom: none; }
.callback-area .callback-all-table table tr:nth-child(11) { top: 0; }
.callback-area .callback-all-table table tr:nth-child(12) { top: 35px; }
.callback-area .callback-all-table table tr:nth-child(13) { top: 70px; }
.callback-area .callback-all-table table tr:nth-child(14) { top: 105px; }
.callback-area .callback-all-table table tr:nth-child(15) { top: 140px; }
.callback-area .callback-all-table table tr:nth-child(16) { top: 175px; }
.callback-area .callback-all-table table tr:nth-child(17) { top: 210px; }
.callback-area .callback-all-table table tr:nth-child(18) { top: 245px; }
.callback-area .callback-all-table table tr:nth-child(19) { top: 280px; }
.callback-area .callback-all-table table tr:nth-child(20) { top: 315px; }
.callback-area .callback-all-table table tr:nth-child(20) td { border-bottom: none; }
.callback-area .callback-list-btn { display: flex; align-items: center; gap: 5px; }
.callback-area .callback-list-btn a { font-size: 13px; font-weight: 500; display: flex; align-items: center; height: 35px; padding: 0 10px; border: 1px solid var(--border2); border-radius: 4px; }

.callback-area .callback-register-box { padding: 5px; background-color: var(--w3); border-radius: 10px; margin-bottom: -10px; }
.callback-area .callback-register { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 20px; background-color: var(--w); border: 1px solid var(--border2); border-radius: 10px; }
.callback-area .callback-register h4 { border-radius: 50px; background-color: var(--base); font-size: 15px; color: var(--w); padding: 10px 30px; }
.callback-area .callback-register p { font-size: 15px; margin-top: 10px; }
.callback-area .callback-register p b { color: var(--red); }
.callback-area .callback-register ul { display: flex; gap: 20px; }
.callback-area .callback-register ul li { font-size: 15px; }
.callback-area .callback-register ul li b { color: var(--base); }
.callback-area .callback-register ul li a { font-size: 14px; display: flex; align-items: center; gap: 5px; color: var(--base2); text-decoration: underline; }

.callback-area .raw-layer { display: none; font-size: 12px; position: absolute; top: 0; width: 100%; background-color: var(--w); padding: 10px; border: 1px solid var(--border2); z-index: 9; }
.callback-area .raw-layer > p { display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px; }
.callback-area .raw-layer > p strong { display: flex; gap: 5px; }
.callback-area .raw-layer > p strong img { width: 12px; height: 11px; }
.callback-area .raw-layer > p button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.callback-area .raw-layer > p button img { width: 18px; }
.callback-area .raw-layer .raw-layer-item { border-top: 1px dotted var(--border2); padding-top: 10px; }
.callback-area .raw-layer .raw-layer-item ul li { line-height: 1.6; padding-bottom: 5px; }
.callback-area .raw-layer .raw-layer-item ul li.disc { list-style-type: disc; margin-left: 15px; color: var(--gray); }
.callback-area .raw-layer .raw-layer-item ul li a { display: inline-block; color: var(--base2); }

/* 보안 로그인 설정 */
.security-area { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 40px; }
.security-area h4 { font-size: 30px; font-weight: 700; }
.security-area span { font-size: 16px; letter-spacing: -0.4px; }
.security-area span b { color: var(--red); }
.security-area .security-input-item { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.security-area i { width: 300px; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background-color: var(--w3); border-radius: 10px; border: 1px solid var(--border); }
.security-area i select { width: 130px; height: 35px; border-radius: 4px; padding-left: 10px; background-size: 12px; border: 1px solid #ebeff2; cursor: pointer; }
.security-area i input { width: 70%; font-size: 15px; height: 35px; border: none; }
.security-area i:last-child { background-color: var(--w); }
.security-area i input.focus { border: none !important; box-shadow: none !important; }
.security-area i a { font-size: 13px; background-color: var(--base); color: var(--w); line-height: 35px; padding: 0 10px; border-radius: 5px; }

.security-set-area { display: flex; gap: 20px; }
.security-set-top { width: 100%; display: flex; align-items: end; justify-content: space-between; margin-bottom: 10px; }
.security-set-top i { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.security-set-top i span { font-size: 13px; color: var(--gray); }
.security-set-item { flex: 1; }
.security-set-item p { font-size: 13px; color: var(--gray); margin-top: 5px; }
.security-set-item ul { display: flex; flex-direction: column; border-top: 1px solid var(--base3); border-bottom: 1px solid var(--border2); position: relative; }
.security-set-item ul.off::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: calc(100% + 2px); background-color: var(--w06); }
.security-set-item ul li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border2); border-bottom: none; padding: 10px; }
.security-set-item ul li i { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.security-set-item ul li i input { width: 100%; height: 30px; }
.security-set-item ul li a { min-width: 45px; width: 45px; text-align: center; line-height: 30px; font-size: 12px; font-weight: 500; background-color: var(--w2); color: var(--gray); border-radius: 5px; }
.security-set-item ul li a.del { background-color: var(--black3); color: var(--w); font-weight: 400; }

/* 로그인 */
.login-area { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 400px; margin: 0 auto; padding: 40px 0; }
.login-area h4 { width: 100%; font-size: 30px; font-weight: 700; text-align: left; margin-bottom: 15px; }
.login-area input { width: 100%; height: 50px; font-size: 14px; }
.login-area .login-input { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.login-area .login-input i { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.login-area .login-input i p { font-size: 14px; }
.login-area > i { width: 100%; display: flex; align-items: center; gap: 10px; }
.login-area .check-box label { font-size: 14px; }
.login-area .check-box::after { top: 1px; }
.login-area .login-btn { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.login-area .login-btn a { width: 100%; text-align: center; font-size: 16px; line-height: 55px; background-color: var(--base); color: var(--w); border-radius: 5px; }
.login-area .login-btn a:last-child { background-color: var(--gray2); color: var(--base2); font-weight: 500; }
.login-area ul { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.login-area ul li { display: flex; justify-content: center; gap: 5px; }
.login-area ul li a { font-size: 15px; text-align: center; width: 85px; color: var(--gray); }

/* 아아디/비밀번호 찾기 */
.find-area { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 460px; margin: 0 auto; padding: 40px 0; }
.find-area > p { width: 100%; font-size: 13px; color: var(--gray); line-height: 1.6; }
.find-area input { width: 100%; height: 40px; font-size: 14px; }
.find-area .find-input { width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 30px; border: 1px solid var(--border2); }
.find-area .find-input-tab { display: flex; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.find-area .find-input-tab .check-box label { font-size: 16px; font-weight: 500; }

.find-area .find-input i { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.find-area .find-input i span { display: flex; align-items: center; gap: 5px; }
.find-area .find-input i span b { min-width: 30px; width: 30px; text-align: center; font-size: 15px; }
.find-area .find-input i span input { text-align: center; }
.find-area .find-input i span .check-box { margin: 5px 10px 5px 0; }
.find-area .find-input i span .check-box label { font-size: 14px; }
.find-area .find-input i p { font-size: 14px; }
.find-area .find-input a { width: 100%; font-size: 16px; line-height: 55px; text-align: center; background-color: var(--base); color: var(--w); border-radius: 5px; }
.find-area .find-input .find-btn { display: flex; gap: 10px; }

.find-area .find-list { width: 100%; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border2); padding: 30px; }
.find-area .find-list span { display: flex; align-items: center; justify-content: space-between; background-color: var(--w3); padding: 10px; }
.find-area .find-list span input { width: 70%; border: none; font-weight: 600; height: 30px; padding: 0; background-color: transparent; }
.find-area .find-list span a { font-size: 13px; line-height: 30px; padding: 0 10px; background-color: var(--black3); color: var(--w); border-radius: 5px; }

/* 회원가입 */
.join-area { width: 900px; padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0 auto; }
.join-area > a { width: 185px; text-align: center; padding: 20px 0; background-color: var(--base); font-size: 16px; color: var(--w); border-radius: 5px; }

.join-area .join-step { margin-bottom: 20px; }
.join-area .join-step ul { display: flex; position: relative; padding-bottom: 20px; }
.join-area .join-step ul::after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 5px; background-color: var(--base); border-radius: 50px; }
.join-area .join-step ul li { width: 110px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.join-area .join-step ul li span { font-size: 14px; font-weight: 600; }
.join-area .join-step ul li p { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: var(--w3); color: var(--gray); font-size: 13px; font-weight: 600; border-radius: 100%; }
.join-area .join-step.step1 ul::after { background: linear-gradient(90deg, var(--base) 33%, var(--w3) 33%); }
.join-area .join-step.step1 ul li:nth-child(1) span { color: var(--base); }
.join-area .join-step.step2 ul::after { background: linear-gradient(90deg, var(--base) 66%, var(--w3) 66%); }
.join-area .join-step.step2 ul li:nth-child(2) span { color: var(--base); }
.join-area .join-step.step3 ul::after { background-color: var(--base); }
.join-area .join-step.step3 ul li:nth-child(3) span { color: var(--base); }

.join-area .counsel-box { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.join-area .counsel-box > .check-box label { font-size: 15px; color: var(--black); font-weight: 600; }
.join-area .counsel-box > p { font-size: 14px; margin-left: 22px; }
.join-area .counsel-box > ul { display: flex; gap: 10px; padding: 22px; background-color: var(--w4); border: 1px solid var(--border2); }
.join-area .counsel-box > ul label { font-size: 14px; color: var(--black); }
.join-area .counsel-box > ul i { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--base); font-weight: 500; }

.join-area .counsel-item { width: 100%; height: 140px; overflow-y: scroll; padding: 0 22px 22px 22px; background-color: var(--w4); border: 1px solid var(--border2); }

.join-area .join-type { width: 450px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.join-area .join-type-item { width: 100%; text-align: center; padding: 30px; border: 1px solid var(--border2); }
.join-area .join-type-item span { font-size: 16px; line-height: 1.6; }
.join-area .join-type-item span b { color: var(--red); }
.join-area .join-type-item a { width: 100%; text-align: center; line-height: 55px; color: var(--base); border-radius: 5px; border: 1px solid var(--base); margin-top: 20px; }
.join-area .join-type-item a:hover { background-color: var(--base); color: var(--w); }

.join-area .join-success { width: 450px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.join-area .join-success h4 { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.join-area .join-success span { font-size: 17px; }
.join-area .join-success span strong { color: var(--base); }
.join-area .join-success i { padding: 30px; border: 1px solid var(--border2); }
.join-area .join-success i p { font-size: 13px; color: var(--gray); line-height: 1.6; margin-top: 20px; }
.join-area .join-success i a { width: 100%; text-align: center; line-height: 55px; color: var(--w); background-color: var(--base); border-radius: 5px; margin-top: 20px; }

/* 약관공통 */
.counsel-item { width: 100%; height: auto; }
.counsel-item h4 { font-size: 15px; font-weight: 600; margin: 20px 0 10px 0; }
.counsel-item h5 { font-size: 13px; color: var(--base2); font-weight: 600; margin: 10px 0; line-height: 1.4; }
.counsel-item p { font-size: 12px; line-height: 1.6; }
.counsel-item dt { font-size: 12px; line-height: 1.6; color: var(--gray); }
.counsel-item dd { font-size: 12px; line-height: 1.6; color: var(--gray); }
.counsel-item span { font-size: 12px; line-height: 1.6; color: var(--gray); margin-left: 20px; }
.counsel-item table { margin: 5px 0; }
.counsel-item table th { border: 1px solid var(--border2); }
.counsel-item table td { border: 1px solid var(--border2); }

.terms-target i { display: flex; align-items: center; justify-content: space-between; color: var(--base2); font-size: 13px; }
.terms-target i p { display: flex; align-items: center; gap: 5px; }
.terms-target .terms-target-item { display: flex; gap: 140px; padding: 20px; border: 1px solid var(--border2); margin: 10px 0 30px 0; }
.terms-target .terms-target-item ul { display: flex; flex-direction: column; gap: 10px; }
.terms-target .terms-target-item ul h4 { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.terms-target .terms-target-item ul li a { font-size: 13px; color: var(--base2); font-weight: 500; }
.terms-target .terms-target-item ul li a:hover { opacity: 0.7; }

/* 레이어 */
.layer-cover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgb(19,50,97,.3); content: ''; z-index: 1000; display: none; }
.layer-cover.on { display: block; }
.layer { padding: 20px; background-color: var(--w); position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 15px; box-shadow: 0px 10px 30px -3px rgba(78,89,104,0.05), 0px 15px 80px -5px rgba(78,89,104,0.2); display: none; z-index: 1001; }
.layer.short { position: absolute; top: 50px; transform: translate(-50%,0); }
.layer .layer-title { height: 50px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--border); padding: 5px 20px 0 20px; margin: -20px -20px 15px -20px; }
.layer .layer-title button { width: 30px; height: 30px; content: ''; background: url('../images/icons/close-icon.png') no-repeat 50% 50%; background-size: 20px; position: relative; }
.layer .layer-title button::after { width: 30px; height: 30px; border-radius: 8px; content: ''; background-color: var(--w3); transform: scale(0); transition: 0.2s; position: absolute; left: 0; top: 0; z-index: -1; }
.layer .layer-title button:hover::after { transform: scale(1); }
.layer .layer-btn { display: flex; gap: 10px; margin-top: 20px; }
.layer .layer-btn button { flex: 1; height: 45px; border: none; border-radius: 10px; background-color: var(--base); color: var(--w); font-size: 15px; }
.layer .layer-btn button:first-child { background-color: var(--w2); color: var(--gray); }

/* 문자전송 레이어 */
.send-layer { height: 370px; }
.send-layer .warning-message { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.send-layer .warning-message strong { font-size: 16px; line-height: 1.6; font-weight: 600; }
.send-layer .warning-message strong b { color: var(--red); }
.send-layer .warning-message strong p { font-size: 13px; color: var(--gray); font-weight: 400; }
.send-layer .warning-message a { font-size: 13px; color: var(--base); font-weight: 600; text-decoration: underline; }
.send-layer ul { display: flex; flex-direction: column; gap: 15px; border-top: 1px dashed var(--border2); padding-top: 20px; margin-top: 20px; }
.send-layer ul li { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.send-layer ul li span { font-weight: 600; }
.send-layer ul li span b { color: var(--base); }

/* 미리보기 레이어 */
.preview-layer { height: 586px; }
.preview-layer .send-preview-box { display: flex; gap: 15px; }
.preview-layer .preview-transmit-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.preview-layer .preview-transmit-box .transmit-box { width: 310px; height: 500px; flex: auto; }
.preview-layer .warning-message { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.preview-layer .warning-message strong { font-size: 16px; line-height: 1.6; font-weight: 600; }
.preview-layer .warning-message strong b { color: var(--red); }
.preview-layer .warning-message strong p { font-size: 13px; color: var(--gray); font-weight: 400; }
.preview-layer .warning-message a { font-size: 13px; color: var(--base); font-weight: 600; text-decoration: underline; }
.preview-layer .preview-info { width: 300px; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--border); padding-left: 15px; }
.preview-layer .preview-info dl { display: flex; flex-direction: column; gap: 10px; padding: 15px; border: 1px solid var(--border2); }
.preview-layer .preview-info dl dd { font-size: 13px; }
.preview-layer .preview-info ul { display: flex; flex-direction: column; gap: 15px; border-top: 1px dashed var(--border2); padding-top: 20px; margin: 20px 0; }
.preview-layer .preview-info ul li { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.preview-layer .preview-info ul li span { font-weight: 600; }
.preview-layer .preview-info ul li span b { color: var(--base); }

/* 발신번호 레이어 */
.reply-layer { width: 530px; }
.reply-layer .reply-tab { display: flex; gap: 5px; margin-bottom: 10px; padding: 5px; background-color: var(--w3); border-radius: 5px; }
.reply-layer .reply-tab span { width: 100%; line-height: 40px; font-size: 14px; font-weight: 500; text-align: center; border-radius: 5px; background-color: var(--w2); color: var(--gray); cursor: pointer; }
.reply-layer .reply-tab span.this { background-color: var(--base); color: var(--w); font-weight: 400; }
.reply-layer .reply-search { width: 100%; height: 45px; position: relative; }
.reply-layer .reply-search input { font-size: 14px; width: 100%; height: 100%; }
.reply-layer .reply-search button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background-color: var(--base3); border-radius: 5px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.reply-layer .reply-list { height: 320px; margin: 10px 0; }
.reply-layer .reply-list ul { display: flex; max-height: 100%; flex-wrap: wrap; gap: 5px; overflow-y: scroll; }
.reply-layer .reply-list ul li { flex: 1 1 45%; max-width: 236px; }
.reply-layer .reply-list ul li a { display: flex; align-items: center; justify-content: space-between; height: 35px; padding: 0 10px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; box-sizing: border-box; border-radius: 5px; }
.reply-layer .reply-list ul li a:hover { background-color: var(--lb); }
.reply-layer .reply-list ul li i { display: flex; align-items: center; gap: 5px; }
.reply-layer .reply-list ul li b { font-weight: 600; }
.reply-layer .reply-list ul li span { width: 75px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--gray); }

/* 팝업 공통 */
.popup-wrap .popup-title { background-color: var(--w); display: flex; align-items: center; height: 40px; border-bottom: 1px solid var(--border2); }
.popup-wrap .popup-title h3 { font-size: 16px; font-weight: 500; padding: 0 20px; }
.popup-wrap .popup-info { padding: 20px; padding-bottom: 0; }
.popup-wrap .popup-info ul { display: flex; flex-direction: column; gap: 10px; border-radius: 5px; border: 1px solid var(--border2); padding: 15px 15px 15px 30px; }
.popup-wrap .popup-info ul li { font-size: 13px; list-style-type: disc; }
.popup-wrap .popup-info ul li b { color: var(--red); }
.popup-wrap .popup-content { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.popup-wrap .popup-content .msg-wrap { justify-content: center; }
.popup-wrap .popup-content .msg-wrap i { width: 400px; }
.popup-wrap .popup-content .transmit-box { flex: auto; height: 480px; }
.popup-wrap .popup-content .transmit-box .transmit-title { display: block; }
.popup-wrap .popup-content .transmit-box .transmit-title input { display: block; }
.popup-wrap .popup-box { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.popup-wrap .popup-box > p { font-size: 14px; font-weight: 600; flex: 1 1 100%; margin-bottom: 5px; }
.popup-wrap .popup-box .popup-input { flex: 1 1 45%; }
.popup-wrap .popup-box .date-input { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: 5px; }
.popup-wrap .popup-box .date-input input { width: 100% !important; height: 40px; text-align: left; font-size: 14px; }
.popup-wrap .popup-input { display: flex; flex-direction: column; gap: 15px; }
.popup-wrap .popup-input select { width: 100%; height: 40px; font-size: 13px; padding: 0 10px; border: 1px solid var(--border); border-radius: 5px; margin-bottom: 5px; background-position: 98% 50%; }
.popup-wrap .popup-input input { width: 100%; height: 40px; font-size: 13px; padding: 0 10px; border: 1px solid var(--border); border-radius: 5px; }
.popup-wrap .popup-input textarea { width: 100%; height: 100px; font-size: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; }
.popup-wrap .popup-input i { display: block; position: relative; }
.popup-wrap .popup-input i input { padding-right: 30px; text-align: right; }
.popup-wrap .popup-input i input::placeholder { text-align: left; }
.popup-wrap .popup-input i b { font-size: 13px; color: var(--g2); position: absolute; right: 15px; top: 50%; transform: translate(0,-50%); }
.popup-wrap .popup-input p { display: flex; align-items: center; font-size: 13px; gap: 10px; color: var(--gray); margin-bottom: 10px; opacity: 0.7; }
.popup-wrap .popup-input p::after { flex: 1; height: 1px; background-color: var(--border); content: ''; }

.popup-wrap .input-name-area { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.popup-wrap .input-name-box { display: flex; flex-direction: column; gap: 8px; }
.popup-wrap .input-name-box p { font-size: 13px; font-weight: 600; }
.popup-wrap .input-name-box input { width: 100%; height: 40px; }
.popup-wrap .input-name-box select { width: 100%; height: 40px; }
.popup-wrap .input-name-box i { display: flex; gap: 5px; }
.popup-wrap .input-name-box i a { min-width: 50px; width: 50px; line-height: 40px; text-align: center; background-color: var(--base); font-size: 13px; color: var(--w); border-radius: 5px; }

.popup-wrap .pop-btn { display: flex; justify-content: center; gap: 5px; }
.popup-wrap .pop-btn a { height: 35px; line-height: 35px; padding: 0 20px; background-color: var(--base); color: var(--w); font-size: 13px; border-radius: 4px; }
.popup-wrap .pop-btn input { height: 35px; padding: 0 20px; border: none; font-size: 13px; border-radius: 4px; background-color: var(--black3); color: var(--w); }
.popup-wrap .pop-btn input:nth-child(2n) { background-color: var(--base); }

/* 엑셀파일 불러오기 팝업 */
.excel-popup { display: flex; gap: 20px; padding: 20px; }
.excel-popup .excel-table { width: 580px; height: 401px; overflow-y: scroll; border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.excel-popup .excel-table table { width: auto; table-layout: auto; }
.excel-popup .excel-table table th { height: 25px; font-size: 13px; padding: 0; border: 1px solid var(--border2); }
.excel-popup .excel-table table td { height: 25px; cursor: cell; padding: 0 5px; font-size: 13px; border: 1px solid var(--border2); overflow: visible; }
.excel-popup .excel-table table td.cell-on { border: 2px solid var(--base); background: var(--w); position: relative; }
.excel-popup .excel-table table td.cell-on::after { display: block; content: ''; position: absolute; background: var(--base); width: 9px; height: 9px; right: -4.5px; bottom: -4.5px; border: 2px solid var(--w); box-sizing: border-box; cursor: crosshair; z-index: 99; }
.excel-popup .excel-table table td.fill { background: var(--w3); }
.excel-popup .excel-table table thead tr:first-child th { border-top: none; }
.excel-popup .excel-table table tbody tr:last-child th { border-bottom: none; }
.excel-popup .excel-table table tbody tr:last-child td { border-bottom: none; }
.excel-popup .excel-btn { width: 180px; }
.excel-popup .excel-btn input[type="button"] { width: 100%; height: 45px; line-height: 45px; background-color: var(--black3); color: var(--w); font-size: 15px; border-radius: 4px; }
.excel-popup .excel-btn ul { padding: 10px; background-color: var(--w5); border: 1px solid var(--border2); margin: 10px 0; border-radius: 4px; }
.excel-popup .excel-btn ul > li { font-size: 13px; border-bottom: 1px dashed var(--border2); padding-bottom: 10px; margin-bottom: 10px; }
.excel-popup .excel-btn ul > li > span { display: flex; align-items: center; font-weight: 700; margin-bottom: 10px; gap: 5px; padding-left: 5px; }
.excel-popup .excel-btn ul > li > span img { width: 5px; }
.excel-popup .excel-btn ul > li > select { width: 100%; height: 30px; border: 1px solid var(--border2); background-color: var(--w); }
.excel-popup .excel-btn ul > li > .excel-del-box { display: flex; flex-direction: column; gap: 10px; }
.excel-popup .excel-btn ul > li > .excel-del-box > span { display: flex; align-items: center; gap: 5px; }
.excel-popup .excel-btn ul > li:last-child { margin:0; padding:0; border: none; }
.excel-popup .excel-btn a { width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: var(--base); color: var(--w); font-size: 15px; border-radius: 4px; }

/* 주소록 불러오기 팝업 */
.address-popup .group-box-item ul { height: 494px; }
.address-popup .adr-add-box { display: none; }
.address-popup .adr-header i { display: none; }
.address-popup .group-refusal-box { display: none; }
.address-popup .group-btn-box { display: none; }
.address-popup .group-box-item ul li i:last-child { display: none; }
.address-popup .list-btn-box i a:nth-child(2) { display: none; }
.address-popup .list-btn-box i a:nth-child(3) { display: none; }
.address-popup .list-btn-box i a:nth-child(4) { display: none; }
.address-popup .list-btn-box i a:nth-child(5) { display: none; }
.address-popup .list-btn-box i a:nth-child(6) { display: none; }
.address-popup .adr-area table th:last-child { display: none; }
.address-popup .adr-area table colgroup col:nth-child(3) { width: 120px; }
.address-popup .adr-area table colgroup col:nth-child(4) { width: 120px; }
.address-popup .adr-area table colgroup col:nth-child(5) { width: 120px; }
.address-popup .adr-area table colgroup col:nth-child(6) { width: 120px; }
.address-popup .adr-area table colgroup col:last-child { width: 0; }
.address-popup .list-box-table table td:last-child { display: none; }
.address-popup .list-box-table table colgroup col:last-child { width: 0; }
.address-popup .list-box-table table colgroup col:nth-child(3) { width: 120px; }
.address-popup .list-box-table table colgroup col:nth-child(4) { width: 120px; }
.address-popup .list-box-table table colgroup col:nth-child(5) { width: 120px; }
.address-popup .list-box-table table colgroup col:nth-child(6) { width: 110px; }

/* 그룹 불러오기 팝업 */
.group-popup .adr-add-box { display: none; }
.group-popup .adr-header i { display: none; }
.group-popup .group-refusal-box { display: none; }
.group-popup .group-btn-box { display: none; }
.group-popup .group-box-item ul li i:last-child { display: none; }

/* 수신거부 목록 불러오기 팝업 */
.refusal-popup .adr-header i { display: none; }
.refusal-popup .list-btn-box i a:last-child { display: none; }
.refusal-popup .adr-area table th:last-child { display: none; }
.refusal-popup .adr-area table colgroup col:last-child { width: 0; }
.refusal-popup .adr-area table colgroup col:nth-child(2) { width: 140px; }
.refusal-popup .adr-area table colgroup col:nth-child(3) { width: 110px; }
.refusal-popup .adr-area table colgroup col:nth-child(4) { width: 180px; }
.refusal-popup .adr-area table colgroup col:nth-child(5) { width: 90px; }
.refusal-popup .list-box-table table td:last-child { display: none; }
.refusal-popup .list-box-table table colgroup col:last-child { width: 0; }
.refusal-popup .list-box-table table colgroup col:nth-child(2) { width: 140px; }
.refusal-popup .list-box-table table colgroup col:nth-child(3) { width: 110px; }
.refusal-popup .list-box-table table colgroup col:nth-child(4) { width: 180px; }
.refusal-popup .list-box-table table colgroup col:nth-child(5) { width: 80px; }

/* 전송내역 불러오기 팝업 */
.popup-content .transmit-list-area { width: 100%; }
.popup-content .transmit-table table td a { display: inline; text-align: left; color: var(--base); text-decoration: underline; }
.popup-content .message-list { width: 100%; min-height: auto; }
.popup-content .message-list .check-box::after { display: none; }
.popup-content .message-list .check-box label { padding-left: 5px; }

/* 전송내역 상세보기 팝업 */
.popup-content .transmit-view-area { width: 600px; }
.popup-content .transmit-view-area .pop-btn { margin-top: 20px; }
.popup-content .transmit-view-area p { font-size: 11px; padding: 3px 8px; color: var(--w); }
.popup-content .transmit-view-area p.tr_su { background-color: var(--blue); }
.popup-content .transmit-view-area p.tr_sp { background-color: var(--black3); }
.popup-content .transmit-view-area p.tr_st { background-color: var(--gray); }
.popup-content .transmit-view-top { display: flex; justify-content: space-between; }
.popup-content .transmit-view-detail { display: flex; flex-direction: column; gap: 15px; }
.popup-content .transmit-view-detail ul { display: flex; flex-direction: column; gap: 10px; padding-bottom: 15px; border-bottom: 1px dashed var(--border2); }
.popup-content .transmit-view-detail ul li { list-style-type: disc; margin-left: 18px; font-size: 13px; }
.popup-content .transmit-view-detail ul li i { display: flex; align-items: center; gap: 10px; }
.popup-content .transmit-view-detail ul li i h4 { font-weight: 600; }
.popup-content .transmit-view-detail ul li input { width: 140px; height: 35px; }
.popup-content .transmit-view-detail ul li select { height: 35px; background-color: var(--w); border: 1px solid var(--border2); }
.popup-content .transmit-view-detail ul li input[name="date"] { background: url('../images/icons/calendar-icon.png') no-repeat 95% 50% var(--w); }
.popup-content .transmit-view-detail dl { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border2); }
.popup-content .transmit-view-detail dl dd { display: flex; align-items: center; gap: 8px; }
.popup-content .transmit-view-detail dl dd span { display: flex; gap: 5px; font-size: 12px; color: var(--gray); }
.popup-content .transmit-view-detail dl dd b { color: var(--base); }
.popup-content .transmit-view-msg { width: 170px; }
.popup-content .transmit-view-msg .message-item { width: 100%; }
.popup-content .transmit-view-msg .message-item .message-item-box:hover { border-color: transparent; }
.popup-content .transmit-view-msg .message-item textarea { cursor: inherit; }
.popup-content .transmit-view-msg .message-item .message-images { min-height: 80px; height: 80px; }
.popup-content .transmit-view-msg .message-item .message-images img { width: auto; height: 100%; }
.popup-content .transmit-view-mid { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: var(--bg); margin-top: 15px; border: 1px solid var(--border2); }
.popup-content .transmit-view-mid span { font-size: 13px; }
.popup-content .transmit-view-mid i { display: flex; align-items: center; gap: 5px; }
.popup-content .transmit-view-mid select { height: 30px; background-color: var(--w); border: 1px solid var(--border2); }
.popup-content .transmit-view-mid input { height: 30px; }
.popup-content .transmit-view-mid input[type="button"] { font-size: 12px; background-color: var(--black3); color: var(--w); border-radius: 5px; padding: 0 10px; }
.popup-content .transmit-view-table { margin-top: 10px; }
.popup-content .transmit-view-table-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.popup-content .transmit-view-table-top span { font-size: 14px; }
.popup-content .transmit-view-table-top i { display: flex; align-items: center; gap: 5px; }
.popup-content .transmit-view-table-top a { height: 30px; display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 0 8px; border: 1px solid var(--border2); border-radius: 4px; }

/* 견적서 발행 팝업 */
.popup-content .fare-area { width: 100%; }
.popup-content .fare-area ul { flex-direction: column; }
.popup-content .est-area { width: 890px; }
.popup-content .est-print-area { width: 100%; }
.popup-content .est-print-area strong { font-size: 15px; }
.popup-content .est-print-area i { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding-top: 10px; border-top: 1px dashed var(--border2); }
.popup-content .est-print-area i label { color: var(--black); font-size: 14px; }
.popup-content .est-print-area i .check-box::after { top: 1px; }

/* 요금결제 팝업 */
.popup-content .payment-popup ul { padding: 10px 15px; background-color: var(--bg); border: 1px solid var(--border2); }
.popup-content .payment-popup ul li { line-height: 24px; font-size: 14px; font-weight: 500; }
.popup-content .payment-popup ul li h3 { width: 100px; font-weight: 600; display: inline-block; }
.popup-content .payment-popup table { border-top: 2px solid var(--base3); margin-top: 20px; }
.popup-content .payment-popup table td { border-left: 1px solid var(--border2); }
.popup-content .payment-popup table td:first-child { border-left: none; }
.popup-content .payment-popup table td select { height: 30px; border-radius: 0; }
.popup-content .payment-popup p { font-size: 12px; color: var(--gray); margin-top: 10px; }
.popup-content .payment-popup .bank-box { margin-top: 20px; }
.popup-content .payment-popup .bank-box > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.popup-content .payment-popup .bank-box > h2 { font-size: 13px; font-weight: 500; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border2); }
.popup-content .payment-popup .bank-box > h2 b { color: var(--red); font-weight: 600; }
.popup-content .payment-popup .bank-box > h2 input { width: 125px; height: 26px; font-weight: 600; border-radius: 0; border-color: var(--black); padding: 0 5px; }
.popup-content .payment-popup .bank-box i { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 3px solid var(--border2); box-sizing: border-box; }
.popup-content .payment-popup .bank-box i h3 { font-size: 18px; font-weight: 800; }
.popup-content .payment-popup .bank-box i img { width: 48px; }
.popup-content .payment-popup .bank-box i span { font-size: 12px; color: var(--gray); font-weight: 500; }
.popup-content .payment-popup .pay-info { padding: 15px; border: 1px solid var(--border2); font-size: 14px; margin-top: 20px; }
.popup-content .payment-popup .pay-info strong { display: block; margin-bottom: 10px; }
.popup-content .payment-popup .pay-info span { display: block; line-height: 1.4; font-size: 13px; color: var(--gray); }
.popup-content .payment-popup .pay-info b { font-weight: 500; }

/* 공용 080 서비스 신청 팝업 */
.popup-content .common080-area { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.popup-content .common080-area > p { font-size: 13px; color: var(--base); font-weight: 600; }
.popup-content .common080-area ul { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border2); padding-top: 15px; }
.popup-content .common080-area ul strong { font-size: 13px; margin-bottom: 5px; }
.popup-content .common080-area ul li { font-size: 12px; color: var(--gray); list-style-type: disc; margin-left: 15px; }

/* 전용 080 서비스 신청 팝업 */
.popup-content .use080-area { width: 100%; }
.popup-content .use080-area h4 { display: flex; align-items: center; gap: 4px; font-weight: 600; margin-bottom: 10px; position: relative; }
.popup-content .use080-area h4::before { content: ''; position: relative; top: -2px; width: 12px; height: 12px; transform: rotate(90deg); background: var(--arrow); }
.popup-content .use080-area h4 b { color: var(--base); }
.popup-content .use080-area i { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; }
.popup-content .use080-area i a { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--w); height: 35px; padding: 0 15px 0 20px; background-color: var(--base3); }
.popup-content .use080-area p { font-size: 13px; color: var(--gray); }
.popup-content .use080-area .use080-tab { margin-top: 10px; margin-bottom: 20px; }
.popup-content .use080-area .use080-tab > ul { display: flex; }
.popup-content .use080-area .use080-tab > ul li { width: 100%; text-align: center; font-size: 14px; line-height: 35px; border: 1px solid var(--border2); cursor: pointer; }
.popup-content .use080-area .use080-tab > ul li:nth-child(2) { border-left: none; }
.popup-content .use080-area .use080-tab > ul li:last-child { border-left: none; }
.popup-content .use080-area .use080-tab > ul li.this { font-weight: 600; background: var(--w4); border-bottom: none; height: 40px; }
.popup-content .use080-area .use080-item { display: inline-block; width: 100%; height: 130px; background: var(--w4); color: var(--gray); padding: 15px; border: 1px solid var(--border2); border-top: none; }
.popup-content .use080-area .use080-item ul li { line-height: 24px; font-weight: 500; font-size: 14px; }

/* 주소록 대량 입력 팝업 */
.popup-content .address-bulk-area { width: 560px; }
.popup-content .address-bulk-table { border: 1px solid var(--border2); border-top: none; }
.popup-content .address-bulk-table .address-bulk-text { position: relative; padding: 0; }
.popup-content .address-bulk-table .address-bulk-text textarea { width: 100%; height: 295px; line-height: 1.77em; background-image: -webkit-linear-gradient(top, transparent, transparent 1.72em, var(--border) 0); background-size: 100% 1.77em; padding: 0; border: none; }
.popup-content .address-bulk-table .address-bulk-text span { position: absolute; height: 300px; border-left: 1px solid #ddd; content: ''; }
.popup-content .address-bulk-table .address-bulk-text span:nth-child(1) { left: 128px; }
.popup-content .address-bulk-table .address-bulk-text span:nth-child(2) { left: 258px; }
.popup-content .address-bulk-table .address-bulk-text span:nth-child(3) { left: 408px; }
.popup-content .address-bulk-table .address-bulk-ft { background: var(--w3); padding: 10px; border-bottom: none; }
.popup-content .address-bulk-table .address-bulk-ft ul { display: flex; align-items: center; justify-content: space-between; }
.popup-content .address-bulk-table .address-bulk-ft ul li { display: flex; align-items: center; gap: 10px; }
.popup-content .address-bulk-table .address-bulk-ft ul li a { padding: 6px 10px; font-size: 12px; font-weight: 500; border-radius: 5px; }
.popup-content .address-bulk-table .address-bulk-ft ul li:first-child a { border: 1px solid var(--border2); background-color: var(--w); }
.popup-content .address-bulk-table .address-bulk-ft ul li:last-child a { background-color: var(--base); color: var(--w); }
.popup-content .address-bulk-table .address-bulk-ft ul li span { font-size: 13px; font-weight: 600; letter-spacing: -0.04rem; }
.popup-content .address-bulk-notice { font-size: 13px; color: var(--gray); margin: 10px 0; line-height: 20px; border-bottom: 1px dashed #ccc; padding-bottom: 10px; }
.popup-content .address-bulk-notice span { color: #ff5753 }
.popup-content .address-bulk-notice span strong { font-weight: bold; }

/* 주소록 엑셀 등록 팝업 */
.address-excel-area { width: 840px; }
.address-excel-area .excel-popup .excel-table { width: 100%; }
.address-excel-area .excel-popup { flex-direction: column; gap: 10px; }
.address-excel-area .excel-popup .excel-btn { width: 100%; display: flex; gap: 10px; }
.address-excel-area .excel-popup .excel-btn ul { margin: 0; display: flex; flex-wrap: wrap; gap: 15px 10px; }
.address-excel-area .excel-popup .excel-btn ul li { width: 120px; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.address-excel-area .excel-popup .excel-btn ul li i { display: flex; flex-direction: column; gap: 5px; }
.address-excel-area .excel-popup .excel-btn > i { min-width: 125px; width: 125px; display: flex; flex-direction: column; gap: 5px; }
.address-excel-area .excel-popup .excel-btn > i input { flex:  1 1 50%; }
.address-excel-area .excel-popup .excel-btn > i a { flex:  1 1 50%; display: flex; align-items: center; justify-content: center; line-height: 1.4; }

 /* 그룹 등록 팝업 */
.popup-content .group-add-area { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.popup-content .group-add-area > p { font-size: 13px; color: var(--gray); border-top: 1px solid var(--border2); padding-top: 15px; }

 /* 그룹 삭제 팝업 */
.popup-content .group-del-area { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.popup-content .group-del-area > p { font-size: 13px; color: var(--gray); border-top: 1px solid var(--border2); padding-top: 15px; }
.popup-content .group-del-info { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.popup-content .group-del-info b { color: var(--red); }

 /* 그룹 수정 팝업 */
.popup-content .group-edit-area { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.popup-content .group-edit-info { font-size: 14px; }

/* 주소 및 우편번호 찾기 팝업 */
.popup-content .address-find-area { width: 100%; }
.popup-content .address-search-item { display: flex; align-items: center; gap: 5px; background-color: var(--w3); border: 1px solid var(--border2); padding: 10px; }
.popup-content .address-search-item input { height: 30px; border-radius: 4px; }
.popup-content .address-search-item input[type="text"] { flex: 1; }
.popup-content .address-search-item input[type="button"] { min-width: 70px; width: 70px; background-color: var(--black3); color: var(--w); }
.popup-content .address-search-info ul { display: flex; flex-direction: column; padding: 15px 20px; }
.popup-content .address-search-info ul li { list-style-type: disc; font-size: 13px; color: var(--gray); line-height: 1.4; }
.popup-content .address-search-info ul li b { color: var(--base2); }
.popup-content .address-search-result { background-color: var(--bg); border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); padding: 10px; }
.popup-content .address-search-result .no-result { width: 100%; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; text-align: center; }
.popup-content .address-search-result .no-result span { line-height: 1.6; }
.popup-content .search-result-item { background-color: var(--w); padding: 10px; border-top: 1px solid var(--border2); cursor: pointer; }
.popup-content .search-result-item ul { display: flex; flex-direction: column; gap: 5px; }
.popup-content .search-result-item ul li { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.popup-content .search-result-item ul li h4 { color: var(--red); }
.popup-content .search-result-item ul li dl { display: flex; align-items: center; gap: 5px; }
.popup-content .search-result-item ul li dl dt { font-size: 11px; padding: 4px 0; width: 40px; text-align: center; border-radius: 4px; color: var(--w); }
.popup-content .search-result-item ul li:nth-child(2) dl dt { background-color: var(--base3); }
.popup-content .search-result-item ul li:nth-child(3) dl dt { background-color: var(--gray); }
.popup-content .search-result-item ul li:nth-child(3) dl dd { color: var(--gray); }

/* 회신번호 등록 팝업 */
.callback-popup { width: 620px; display: flex; flex-direction: column; gap: 15px; padding: 20px; }
.callback-popup > h3 { text-align: center; font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.callback-popup .callback-popup-title span { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.callback-popup .callback-popup-title span b { color: var(--red); font-weight: 600; }
.callback-popup .callback-popup-title ul { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.callback-popup .callback-popup-title ul li { list-style-type: disc; margin-left: 20px; font-size: 13px; color: var(--gray); }
.callback-popup .callback-popup-title ul li b { color: var(--red); font-weight: 600; }
.callback-popup .callback-popup-info { border-bottom: 1px dashed var(--border2); padding-bottom: 15px; }
.callback-popup .callback-popup-info > ul { display: flex; align-items: center; border: 1px solid var(--border2); margin-top: 10px; padding: 10px; }
.callback-popup .callback-popup-info > ul li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.callback-popup .callback-popup-info > ul li strong { background-color: var(--base2); color: var(--w); font-weight: 400; font-size: 11px; border-radius: 50px; padding: 8px 12px; }
.callback-popup .callback-popup-info > ul li span { text-align: center; line-height: 1.4; font-size: 13px; font-weight: 500; }
.callback-popup .callback-popup-info > ul li span b { color: var(--red); }
.callback-popup .callback-popup-info > ul p { content: ''; width: 30px; height: 30px; background: var(--arrow); transform: rotate(90deg); }
.callback-popup .callback-popup-cer > ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.callback-popup .callback-popup-cer > ul li { flex: 1 1 45%; height: 45px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border2); border-radius: 5px; }
.callback-popup .callback-popup-cer > ul li span { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.callback-popup .callback-popup-cer > ul li p { width: 100px; height: 24px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border2); }
.callback-popup .callback-popup-cer > ul li p img { height: 100%; }
.callback-popup .callback-popup-cer > ul li b { color: var(--base2); }
.callback-popup .callback-popup-input { display: flex; flex-direction: column; gap: 8px; }
.callback-popup .callback-popup-input p { font-size: 15px; font-weight: 600; }
.callback-popup .callback-popup-input i { display: flex; align-items: center; gap: 10px; padding: 10px; background-color: var(--bg); box-sizing: border-box; margin-bottom: 5px; }
.callback-popup .callback-popup-input i input { width: 100%; height: 40px; text-align: center; border-radius: 0; }
.callback-popup .callback-popup-input > input { width: 100%; height: 50px; background-color: var(--base); font-size: 16px; color: var(--w); }

/* 회원탈퇴 팝업 */
.popup-content .withdrawal-area h4 { font-size: 14px; font-weight: 600; }
.popup-content .withdrawal-area ul { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.popup-content .withdrawal-area ul li { list-style-type: disc; font-size: 13px; margin-left: 18px; line-height: 1.4; }
.popup-content .withdrawal-area ul li b { color: var(--red); }

/* 모달공통 */
.modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgb(19,50,97,.3); z-index: 1000; }
.modal .modal-item { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; }
.modal .modal-item > .modal-cancel { width: 28px; height: 28px; background: url('../images/icons/close-wicon.png') no-repeat 50% 50% var(--black); background-size: 18px; position: absolute; right: 12px; top: 17px; border-radius: 100%; }
.modal .modal-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; position: absolute; left: 0; bottom: 0; padding: 10px; background-color: #e04644; }
.modal .modal-bottom label { color: var(--w); }
.modal .modal-bottom button { color: var(--w); }

.modal-layer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgb(19,50,97,.3); z-index: 1000; }
.modal-layer .modal-layer-item { display: flex; border-radius: 20px; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; }
.modal-layer .modal-layer-item a { width: 205px; height: 45px; left: 50%; bottom: 38px; transform: translate(-50%,0); position: absolute; border-radius: 50px; }

.event-popup { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgb(19,50,97,.3); z-index: 1000; }
.event-popup .event-popup-item { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; }
.event-popup .event-popup-item > .event-popup-cancel { width: 28px; height: 28px; background: url('../images/icons/close-wicon.png') no-repeat 50% 50% var(--black); background-size: 18px; position: absolute; right: 12px; top: 17px; border-radius: 100%; }
.event-popup .event-popup-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; position: absolute; left: 0; bottom: 0; padding: 10px; background-color: var(--black); }
.event-popup .event-popup-bottom label { color: var(--w); }
.event-popup .event-popup-bottom button { color: var(--w); }