@charset "utf-8";
/* 공통 */
[type="radio"]:checked, [type="radio"]:not(:checked) {position: absolute; left: -9999px;}
[type="radio"]:checked + label, [type="radio"]:not(:checked) + label {position: relative; padding-left: 20px; cursor: pointer; display: inline-block; color: #333;}
[type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {content: ''; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border: 1px solid #ddd; border-radius: 100%; background: #fff;}
[type="radio"]:checked + label:before {border: 1px solid #42ade2;}
[type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after {content: ''; width: 5px; height: 5px; background: #ddd; position: absolute; top: 6px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
[type="radio"]:checked + label:after {background-color: #42ade2;}
[type="radio"]:checked + label:after {opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
::-webkit-inner-spin-button {display:none;}
input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {display:none; -webkit-appearance: none; appearance: none;}
input[type="date"]::-webkit-inner-spin-button {display: none; -webkit-appearance: none;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; appearance: none; margin: 0;}
select {appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(/front/images/ico_select.png); background-position: 95% 50%; background-size: 8px; background-repeat: no-repeat; padding: 12px; box-sizing: border-box; font-size: 15px; border: 1px solid #ddd;}

.input-wrap .input-item {display: flex; align-items: center; height: 45px; border: 1px solid #ddd; padding: 8px 0; box-sizing: border-box; font-size: 15px; margin-bottom: 16px;}
.input-wrap .input-item:last-child {margin-bottom: 0;}
.input-wrap .input-item > label {width: 116px; height: 100%; line-height: 27px; border-right: 1px solid #ddd; padding: 0 5px 0 20px; box-sizing: border-box;}
.input-wrap .input-item.label-long > label {width: 148px;}
.input-wrap .input-item .input-radio {margin-left: 26px; display: flex; width: calc(100% - 116px); gap: 5%;}
.input-wrap .input-item .input-radio .radio-item {display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500;}
.input-wrap .input-item .input-radio input:checked + label {color: #42ade2;}
.input-wrap .input-item .input-text {width: calc(100% - 116px); position: relative;}
.input-wrap .input-item.label-long .input-text {width: calc(100% - 150px);}
.input-wrap .input-item .input-text.has-btn {display: grid; grid-template-columns: 3fr auto; gap: 3px; padding-right: 6px; box-sizing: border-box;}
.input-wrap .input-item .input-text input {border: none; width: 100%; height: 100%; background-color: transparent; padding: 0 15px 0 26px; box-sizing: border-box; font-size: 14px;}
.input-wrap .input-item .input-text input::placeholder {color: #999; font-weight: 300;}
.input-wrap .input-item .input-text.has-btn .btn-normal {height: 30px;}
.input-wrap .input-item .input-file input {text-align: right;}
.input-wrap .email {display: flex; gap: 7px;}
.input-wrap .email .input-item .input-text {display: flex; align-items: center; gap: 2px;}
.input-wrap .email .input-item .input-text input:first-child {padding: 0 5px 0 26px;}
.input-wrap .email .input-item .input-text input:nth-child(3) {padding: 0 5px}
.input-wrap .email select {width: 140px; height: 45px; line-height: 15px; color: #333;}
.input-file .file-name {appearance: none; -webkit-appearance: none; -moz-appearance: none; color: #999;}
.input-file input[type=file] {position: absolute; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.input-file label {line-height: 27px;}
.input-item-top {color: #999; margin-bottom: 10px; font-size: 14px;}

.btn-wrap {display: flex; justify-content: center; gap: 8px;}
.btn-normal {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 68px; height: 35px; line-height: 25px; padding: 0 18px; border: 1px solid #42ade2; background-color: #42ADE2; color: #fff; font-size: 14px; text-align: center; border-radius: 4px; box-sizing: border-box; font-weight: 500;}
.btn-small {display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 25px; line-height: 25px; padding: 0 8px; border: 1px solid #42ade2; background-color: #42ADE2; color: #fff; font-size: 12px; text-align: center; border-radius: 4px; box-sizing: border-box;}
.btn-white {background-color: #fff; color: #333; border: 1px solid #ddd;}
.btn-gray {background-color: #5b5959; color: #fff; border: 1px solid #5b5959;}

.yellow {color: #ffd800!important;}
.blue {color: #42ade2!important;}
.red {color: #ef4036!important;}
.bg-gray {background-color: #f2f2f3;}
.sub-title {font-size: 16px; color: #42ade2; margin-bottom: 24px; }

.tab-menu {border-bottom: 1px solid #42ade2;}
.tab-menu ul {display: flex; justify-content: space-between; gap: 24px;}
.tab-menu ul li {width: 100%; height: 38px; line-height: 38px; font-size: 16px; text-align: center; background-color: #fff; color: #fff; border: 1px solid #ddd; color: #666; cursor: pointer;}
.tab-menu ul li.active {background-color: #42ADE2; color: #fff; border: 1px solid #42ade2;}
.tab-con > div {display: none;}
.tab-con > div.on {display: block;}

.tbl {width: 100%; text-align: center;}
.tbl tr th, .tbl tr td {padding: 7px 5px; border-bottom: 1px solid #ccc; height: 47px; box-sizing: border-box; vertical-align: middle;}
.tbl th {font-size: 15px; color: #666; font-weight: 500; background-color: #f5f5f5; border-top: 2px solid #656565;}
.tbl td {font-size: 17px; color: #000;}
.tbl .tbl-input {border: 1px solid #42ade2; padding: 3px; text-align: center; width: 90%;}
.tbl .chk-item input[type=checkbox] + label.label-cb {vertical-align: baseline;}
.tbl .chk-item input[type="checkbox"]:checked + label.label-cb::after {left: -1.5px; top: -4px;}
.txt-tbl tr th, .txt-tbl tr td {border: 1px solid #ddd; height: 30px; color: #000; font-size: 14px;}
.txt-tbl tr th {font-weight: 600;}

.thead-sticky {overflow-y: auto;}
.x-scroll {overflow-x: auto;}
.thead-sticky .tbl {border-collapse: separate; border-spacing: 0; table-layout: fixed;}
.thead-sticky .tbl thead {position: sticky; top: 0;}
.tbl-bottom {margin-top: 20px;}
.tbl-bottom .btn-wrap {justify-content: flex-end;}
.tbl-bottom .btn-wrap .excel {border: 1px solid #15a815;}
.tbl-bottom .btn-wrap .btn-gray {background-color: #969696; border: 1px solid #969696;}
.tbl-top .txt-box, .tbl-bottom .txt-box {padding: 0; border: none;}
td.no-data {color: #999!important; font-size: 14px;}

.thead-sticky::-webkit-scrollbar {width: 10px; background-color: #f5f5f5;}
.thead-sticky::-webkit-scrollbar-track {border-radius: 0px; background-color: #f0f0f0;}
.thead-sticky::-webkit-scrollbar-thumb {border-radius: 5px; border: 2px solid transparent; background-color: #c9c9c9; background-clip: padding-box;}

textarea::-webkit-scrollbar {width: 10px; background-color: transparent;}
textarea::-webkit-scrollbar-track {border-radius: 0px; background-color: #f0f0f0;}
textarea::-webkit-scrollbar-thumb {border-radius: 5px; border: 2px solid transparent; background-color: #c9c9c9; background-clip: padding-box;}
pre::-webkit-scrollbar {width: 10px; background-color: transparent;}
pre::-webkit-scrollbar-track {border-radius: 0px; background-color: #f0f0f0;}
pre::-webkit-scrollbar-thumb {border-radius: 5px; border: 2px solid transparent; background-color: #c9c9c9; background-clip: padding-box;}

.search-box {height: 40px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; display: flex; gap: 40px; padding-right: 10px; background-color: #fff;}
.search-box input {border: none; padding: 12px 0 12px 15px; height: 100%; box-sizing: border-box; font-size: 14px; background-color: transparent;}
.search-box button {border: none; background-color: transparent;}
.search-box button img {height: 20px; vertical-align: middle;}

.txt-box {width: 100%; border: 1px solid #ddd; padding: 25px 30px; box-sizing: border-box; font-size: 12px; color: #666;}
.txt-box ul li {margin-bottom: 7px; position: relative; padding-left: 12px; word-break: keep-all; line-height: 135%;}
.txt-box ul li:last-child {margin-bottom: 0;}
.txt-box ul li::before {position: absolute; display: block; content: ''; width: 3px; height: 3px; border-radius: 100%; background-color: #666; top: 50%; left: 0; transform: translateY(-50%);}

.tooltip {position: relative!important; cursor: pointer;}
.tooltip > span {visibility: hidden; opacity: 0; position: absolute; z-index: 9999!important; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: cubic-bezier(0.35, 0, 0.35, 1); -moz-transition-timing-function:  cubic-bezier(0.35, 0, 0.35, 1); -o-transition-timing-function:  cubic-bezier(0.35, 0, 0.35, 1); -ms-transition-timing-function:  cubic-bezier(0.35, 0, 0.35, 1);}
.tooltip > span {width: max-content; border: 1px solid #42ADE2; border-radius: 5px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05); box-sizing: border-box; padding: 15px 10px; line-height: 130%; color: #303030; top: 30%; left: 10%; margin-top: 15px; background-color: #fff; -webkit-transition-property: opacity, margin-top, visibility; -moz-transition-property:  opacity, margin-top, visibility; -o-transition-property:  opacity, margin-top, visibility; -ms-transition-property:  opacity, margin-top, visibility; transition-property:  opacity, margin-top, visibility;  font-size: 12px; font-weight: 400; word-break: keep-all; display: inline-flex; align-items: flex-start; gap: 10px;}
.tooltip .emoji-box {display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; top: 65%; right: 0; left: auto;} 
.tooltip .emoji-box span {border: 1px solid #dedede; border-radius: 3px; font-size: 13px; width: 22px; height: 22px; line-height: 22px; text-align: center;}
.tooltip.active > span {visibility: visible; opacity: 1;}

/* 2023-10-04 */
.tooltip2 {position: relative!important; cursor: pointer;}
.tooltip2 > span {visibility: hidden; opacity: 0; position: absolute; z-index: 9999!important; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: cubic-bezier(0.35, 0, 0.35, 1); -moz-transition-timing-function:  cubic-bezier(0.35, 0, 0.35, 1); -o-transition-timing-function:  cubic-bezier(0.35, 0, 0.35, 1); -ms-transition-timing-function:  cubic-bezier(0.35, 0, 0.35, 1);}
.tooltip2 > span {width: max-content; border: 1px solid #42ADE2; border-radius: 5px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05); box-sizing: border-box; padding: 15px 10px; line-height: 130%; color: #303030; top: 30%; left: 10%; margin-top: 15px; background-color: #fff; -webkit-transition-property: opacity, margin-top, visibility; -moz-transition-property:  opacity, margin-top, visibility; -o-transition-property:  opacity, margin-top, visibility; -ms-transition-property:  opacity, margin-top, visibility; transition-property:  opacity, margin-top, visibility;  font-size: 12px; font-weight: 400; word-break: keep-all; display: inline-flex; align-items: flex-start; gap: 10px;}
.tooltip2 .value-box {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; top: 65%; right: 0; left: auto;} 
.tooltip2 .value-box span {border: 1px solid #dedede; border-radius: 3px; font-size: 13px; /* width: 22px; */ height: 22px; line-height: 22px; text-align: center;}
.tooltip2.active > span {visibility: visible; opacity: 1;}

.pagination {display: flex; justify-content: center; gap: 2.5px;}
.pagination span {border: 1px solid #dee2e6; border-radius: 5px; width: 40px; height: 40px; line-height: 38px; text-align: center; cursor: pointer;}
.pagination span.arrow {background-color: #f6f6f6;}
.pagination span.active {background-color: #42ADE2; color: #fff;}

/* 메인 */
section .con {max-width: 1200px; width: 1200px; position: relative; margin: 0 auto;}
.con-large {max-width: 1220px; width: 1220px; position: relative; margin: 0 auto;;}
.con {max-width: 1246px; width: 1246px; position: relative; margin: 0 auto;}
.con-main {max-width: 1220; width: 1220px; position: relative; margin: 0 auto;}
.grid-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}
.chk-item .label-cb {width: 12px; height: 12px; background-color: #fff; border-radius: 2.5px;}
.chk-item input[type=checkbox] {width: 0; height: 0; display: none;}
.chk-item input[type=checkbox] + label.label-cb {display: inline-block; border: 1px solid #bcbcbc; cursor: pointer; margin-right: 5px; vertical-align: sub;}
.chk-item input[type="checkbox"]:checked + label.label-cb {position: relative;}
.chk-item input[type="checkbox"]:checked + label.label-cb::after {content: url('/front/images/main/ico_check.png'); position: absolute; left: -1.2px; top: -3px; width: 100%; transform: scale(0.53);}
.chk-item label {font-size: 14px; color: #616161; font-weight: 500; vertical-align: middle;}

.section1 {position: relative; margin-top: 105px;}
.section1 .user-box.login-box {display: block;}
.section1 .user-box {display: none; position: absolute; top: 25px; right: 100px; width: 343px; height: 435px; padding: 45px 30px 35px; box-sizing: border-box; background-color: #fff; border-radius: 60px 0 60px 0; z-index: 2; box-shadow: -10px 10px 5px rgba(48,48,47,0.2);}
.login-wrap .login-title {color: #42ADE2; font-size: 30px; font-weight: 900; border-bottom: 1px solid #c6c6c6; padding-bottom: 16px; margin-bottom: 20px;}
.login-wrap .login-input input {width: 100%; background-color: #EAF3FC; border-radius: 7px; padding: 10px 20px 10px 20px; font-size: 14px; border: none; box-sizing: border-box; margin-bottom: 7px;}
.login-wrap .login-input input::placeholder {color: #a0a0a0; padding-left: 50px;}
.login-wrap .login-input input[type=text]::placeholder {background-image: url(/front/images/main/ico_login_user.png); background-position: 25px 50%; background-repeat: no-repeat; background-size: 15px;}
.login-wrap .login-input input[type=password]::placeholder {background-image: url(/front/images/main/ico_password.png); background-position: 25px 50%; background-repeat: no-repeat; background-size: 15px;}
.login-wrap .login-check {margin: 0px 0 12px;}
.name-wrap {display: flex; justify-content: space-between; border-bottom: 1px solid #c6c6c6; padding-bottom: 16px; margin-bottom: 15px;}
.name-wrap img {height: 30px;}
.name-wrap .name {color: #616161; font-size: 16px;}
.name-wrap .name span:nth-child(1) {margin-right: 8px;}
.name-wrap .name strong {font-size: 22px; color: #1e1d1d;}
.number-wrap table {width: 100%; margin-bottom: 15px;}
.number-wrap table tr {height: 35px;}
.number-wrap table tr th, .number-wrap table tr td {vertical-align: middle;}
.number-wrap table tr th {color: #1e1d1d;; font-weight: 600; font-size: 16px; text-align: left;}
.number-wrap table tr td {color: #42ADE2; font-size: 15px; text-align: right;}
/* .number-wrap table tr:nth-child(1) td:nth-child(2) {padding-right: 0;} */
.number-wrap table tr td:nth-child(2) {padding-right: 8px;}
.number-wrap table tr th:nth-child(3) {padding-left: 8px;}
.section1 .btn-wrap {display: block;}
.section1 .btn-wrap button {width: 100%; height: 46px; box-sizing: border-box; margin-bottom: 8px;}
.section1 .btn-wrap button:last-child {letter-spacing: -0.5px;}
.section1 .btn-wrap button img {height: 18px;}
.section1 .btn-normal {background-color: #42ADE2; border-radius: 8px; color: #fff; font-size: 16px; font-weight: 600; border: 2px solid #42ADE2; display: inline-flex; justify-content: center; align-items: center; gap: 10px;}
.section1 .btn-white {background-color: #fff; color: #42ADE2; border: 2px solid #42ADE2;}
.link-wrap {margin-top: 7px; color: #616161; font-size: 15px; text-align: center; font-weight: 500;}
.link-wrap a {margin-right: 25px; position: relative;;}
.link-wrap a:last-child {margin-right: 0;}
.link-wrap a::after {display: block; position: absolute; content: ''; background-color: #616161; width: 2px; height: 14px; top: 55%; right: -16px; transform: translateY(-50%);}
.link-wrap a:last-child::after {display: none;}

.section1 .main-swiper {height: 428px;}
.section1 .main-swiper .visual-wrap {position: relative; height: 100%;}
.section1 .main-swiper .text-box {position: absolute; top: 45%; transform: translateY(-50%); left: 80px; color: #fff; z-index: 2;}
.section1 .main-swiper .circle {position: absolute; top: 45%; transform: translateY(-50%); left: 35px; width: 230px; height: 230px; border-radius: 100%; background-color: #42ADE2; position: absolute;}
.section1 .main-swiper .text-box .sub-text {font-size: 15px; margin-bottom: 12px; font-weight: 500;}
.section1 .main-swiper .text-box .main-text {font-size: 32px; font-weight: 500; line-height: 135%;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {position: absolute; z-index: 9; left: 464px !important; bottom: 30px !important;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 16px 0 0;}
.swiper-pagination-bullet {background-color: transparent; border: 2px solid #fff; opacity: 1; width: 8px; height: 8px;}
.swiper-pagination-bullet-active {background-color: #42ADE2; border: 2px solid #42ADE2;}

.section2 {padding: 50px 0 0;}
.section2 .grid-wrap {grid-template-columns: repeat(3, 1fr); column-gap: 22px;}
.section2 .grid-wrap .grid-item {min-height: 380px; border-radius: 34px; border: 2.5px solid #42ade2; padding: 50px 40px 30px; box-sizing: border-box; text-align: center;}
.section2 .grid-wrap .grid-item img {margin-bottom: 34px;}
.section2 .grid-wrap .grid-item .title {font-size: 20px; font-weight: 700; margin-bottom: 18px; white-space: inherit;}
.section2 .grid-wrap .grid-item .desc {font-size: 14px; font-weight: 500; line-height: 135%; width: 80%; margin: 0 auto; word-break: keep-all;}

.section2.stat {padding: 80px 0 20px;}
.section2.stat .stat-wrap {display: flex; gap: 15px; border: 1px solid #d6d6d6; max-width: 1200px; width: 1200px; margin: 0 auto; position: relative;}
.section2.stat .stat-wrap .left {width: 60%; padding: 25px; box-sizing: border-box;}
.section2.stat .stat-wrap .right {width: calc(40% - 15px); border-left: 1px solid #d6d6d6; padding: 30px 22px 15px 22px; box-sizing: border-box;}
.section2.stat .stat-wrap .stat-title {position: relative; padding-left: 18px; font-size: 22px; font-weight: 600; margin-bottom: 25px;}
.section2.stat .stat-wrap .stat-title::after {position: absolute; display: block; content: ''; background-color: #42ADE2; width: 8px; height: 8px; border-radius: 100%; top: 50%; left: 0; transform: translateY(-60%);}
.section2.stat .stat-wrap .stat-chart-wrap {width: 100%;}
.section2.stat .stat-wrap .stat-month-wrap {width: 100%; background-color: #f4f4f4; padding: 15px; box-sizing: border-box;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item:not(:last-child) {margin-bottom: 20px;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .item-top {margin-bottom: 12px; display: flex; justify-content: space-between; font-size: 16px;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .progress {background-color: #cecece; position: relative; height: 44px; border-radius: 5px;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .progress-bar {position: absolute; height: 100%; color: #fff; font-weight: 600; text-align: center; padding: 0 6px; box-sizing: border-box; display: flex; align-items: center; border-radius: 5px;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .progress-bar.bg-red {background-color: #ef4036;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .progress-bar.bg-orange {background-color: #ff7200;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .progress-bar.bg-green {background-color: #15a815;}
.section2.stat .stat-wrap .stat-month-wrap .stat-month-item .progress-bar.bg-blue {background-color: #42ADE2;}

.section3 {padding: 85px 0 0;}
.sec-title {font-size: 36px; font-weight: 600; margin-bottom: 18px; text-align: center;}
.sec-sub-title {font-size: 18px; font-weight: 500; text-align: center;}
.section3 .tab-wrap {margin: 40px auto 0; text-align: center;}
.section3 .tab-wrap .tab-menu {display: flex; justify-content: center; width: 560px;/*width: 845px;*/ background-color: #f4f4f4; border-radius: 19px; font-weight: 600; font-size: 26px; margin: 0 auto 45px;}
.section3 .tab-wrap .tab-menu li {min-width: 280px; text-align: center; padding: 10px 0; cursor: pointer;}
.section3 .tab-wrap .tab-menu li.active {background-color: #42ade2; border-radius: 19px; color: #fff;}
.section3 .tab-wrap .tab-con > div {display: none;}
.section3 .tab-wrap .tab-con > div.on {display: block;}
.section3 .tab-wrap .tab-con .tab-con-text {font-size: 20px; font-weight: 500; margin-bottom: 55px;}
.section3 .tab-wrap .tab-con .tab-con-img {display: flex; justify-content: center;}
.section3 .tab-wrap .tab-con .tab-con-img img {height: 458px;}
.section3 .tab-wrap .tab-con .tab-con-img .img-item .img-title {margin-top: 50px; font-size: 18px; font-weight: 600;}
.section3 .tab-wrap .tab-con .tab-con-img .img-item .img-title span {display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 400;}

.section4 {padding: 118px 0 0;}
.section4 .template-swiper {margin-top: 65px;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {display: none;}
.swiper-button-next, .swiper-button-prev {top: 64% !important;}
.swiper-button-prev {left: -50px !important; z-index: 8 !important;}
.swiper-button-next {right: -10px !important; z-index: 8 !important;}

.section5 {padding: 70px 0 50px;}
.section5 .con {display: flex; gap: 20px;}
.section5 .con > div {width: 100%;}
.section5 h3 {margin-bottom: 26px; font-size: 24px; font-weight: 600; display: flex; align-items: center; justify-content: space-between;}
.section5 .notice .notice-wrap, .section5 .service .service-wrap {height: 293px;}
.section5 .notice .notice-list {height: 100%; border: 1px solid #ccc; border-radius: 7.85px; padding: 31px 26px; box-sizing: border-box;}
.section5 .notice .notice-list li {padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #ccc; width: 100%;}
.section5 .notice .notice-list li a {display: flex; justify-content: space-between; }
.section5 .notice .notice-list li:last-child {padding-bottom: 0; margin-bottom: 0; border-bottom: navajowhite;}
.section5 .notice .notice-list li .title {padding-left: 10px; position: relative;}
.section5 .notice .notice-list li .title::before {display: block; position: absolute; content: ''; width: 2.5px; height: 2.5px; background-color: #000; border-radius: 100%; top: 50%; left: 0; transform: translateY(-50%);}
.section5 .notice .notice-list li .date {font-size: 12px; color: #666666; font-weight: 600;}
.section5 .service .service-info {border: 1px solid #ccc; border-radius: 7.85px; padding: 34px 13px 15px; box-sizing: border-box; margin-bottom: 15px;}
.section5 .service .service-info .number {display: flex; justify-content: center; align-items: center; gap: 20px; color: #42ade2; font-weight: 900; font-size: 46px; margin-bottom: 12px;}
.section5 .service .service-info .email {font-size: 14px; text-align: left; margin-bottom: 10px; padding-left: 35px;}
.section5 .service .service-info .time {padding: 20px 35px; background-color: #efefef; font-size: 16px; box-sizing: border-box; border-radius: 7.85px; line-height: 145%;}
.section5 .service .quick-list {display: flex; justify-content: space-between; gap: 10px;}
.section5 .service .quick-list li {width: 100%; border: 1px solid #ccc; border-radius: 7.85px; padding: 14px 0; box-sizing: border-box; font-size: 18px; font-weight: 600;}
.section5 .service .quick-list li a {display: inline-flex; justify-content: center; align-items: center; gap: 16px; width: 100%;}

/* 마이페이지 */
.mypage01 {width: 550px; text-align: center; padding-top: 78px; margin: 0 auto;}
.mypage01 h3 {font-size: 22px; margin-bottom: 30px;}
.mypage01 > p {font-size: 16px; font-weight: 500; margin-bottom: 28px; background-color: rgba(38,143,202,0.1); padding: 2px 20px; display: inline-block;}
.mypage01 .input-wrap .input-item > label {text-align: left;}
.mypage01 .btn-wrap {margin-top: 64px;}

.mypage02 .tab-menu {margin-top: 20px; margin-bottom: 35px;}
.mypage02 .input-wrap .input-item {width: 100%; height:52px;}
.mypage02 .input-wrap .input-item > label {line-height: 34px;}
.mypage02 .input-wrap .email select {height: 52px; width: 168px;}
.mypage02 .btn-wrap {margin-top: 40px;}
.mypage02 .password-wrap .input-item > label {width: 145px;}
.mypage02 .password-wrap .input-item:nth-child(1) {margin-bottom: 32px;}
.mypage02 .tbl-wrap {margin-bottom: 64px;}
.mypage02 .tbl .doc-list {height: 125px; box-sizing: border-box; padding-top: 25px;}
.mypage02 .tbl ul li {position: relative; text-align: left; font-size: 16px; padding-left: 28px; box-sizing: border-box; margin-bottom: 12px;}
.mypage02 .tbl ul li:last-child {margin-bottom: 0;}
.mypage02 .tbl ul li::before {position: absolute; display: block; content: ''; width: 4px; height: 4px; background-color: #000; border-radius: 100%; top: 50%; left: 12px; transform: translateY(-50%);}
.mypage02 .doc-tbl th:nth-child(1), .mypage02 .doc-tbl td:nth-child(1) {border-right: 1px solid #ccc;}
.mypage02 .tbl-bottom .btn-wrap {justify-content: center;}
.mypage02 .tbl-bottom .btn-wrap .btn-normal {padding: 0 30px;}

.input-msg {position: absolute; color: #666; font-weight: 300; top: 50%; transform: translateY(-50%); right: 140px; font-size: 14px;}

.mypage03 .tab-menu {margin: 25px 0 18px;}
.mypage03 .input-wrap {margin-top: 30px;}
.mypage03 .input-wrap.radio {margin-top: 0px; margin-bottom: 30px;}
.mypage03 .input-wrap.radio .input-item {border: none; padding: 0; height: auto;}
.mypage03 .input-wrap.radio .input-item .input-radio {margin-left: 0;}
.mypage03 .tbl-wrap .tbl-top {margin-bottom: 15px;}
.mypage03 .tbl-wrap .tbl-top .txt-box ul li {padding-left: 0;}
.mypage03 .tbl-wrap .tbl-top .txt-box ul li::before {display: none;}
.mypage03 .tbl-wrap .tbl td:last-child {text-align: left; padding-left: 15px;}
.mypage03 .btn-wrap {margin-top: 30px;}

/* 주소록 */
.address-wrap {margin-top: 25px;}
.address-wrap .chk-item .label-cb {width: 10px; height: 10px;}
.address-wrap .chk-item input[type=checkbox] + label.label-cb {margin-right: 10px;}
.address01 {display: flex; gap: 20px; justify-content: space-between;}
.group-list-wrap {width: 280px;}
.group-list-wrap .search-box {margin-bottom: 8px;}
.group-list-wrap .group-list-box {border: 1px solid #ddd; background-color: #f5f5f5; border-radius: 5px; padding: 25px 15px 15px; box-sizing: border-box;}
.group-list-wrap .group-list-box .group-list-top {margin-bottom: 8px; display: flex; gap: 6px; height: 35px;}
.group-list-wrap .group-list-box .group-list-top input {width: calc(100% - 50px); border: 1px solid #ddd; padding: 10px 13px; box-sizing: border-box; font-size: 13px; border-radius: 5px; background-color: #fff;}
.group-list-wrap .group-list-box .group-list-top button {min-width: 55px; background-color: #f6f8fb; border: 1px solid #c5d8f2; padding: 0px; color: #000; border-radius: 5px; font-size: 15px; line-height: 30px;}
.group-list-wrap .group-list-box .group-list {height: 400px; overflow-y: auto; border: 1px solid #ddd; background-color: #fff; border-radius: 5px; padding: 25px 15px; box-sizing: border-box;}
.group-list-wrap .group-list-box .group-list ul li {margin-bottom: 14px; font-size: 15px;}
.group-list-wrap .group-list-box .group-list ul li:last-child {margin-bottom: 0;}
.group-list-wrap .group-list-box .group-list ul li img {margin-right: 8px; vertical-align: middle;}
.group-list-wrap .group-list-box .group-list ul li span {vertical-align: middle;}
.group-list-wrap .group-list-box .btn-wrap {margin-top: 14px; justify-content: flex-end;}
.group-member-wrap {/* margin-top: 64px; */ width: calc(100% - 300px);}
.group-member-wrap .tbl-wrap .tbl-top {margin-bottom: 16px;}
.group-member-wrap .tbl-wrap .tbl-top .member-info {display: flex; align-items: center;}
.group-member-wrap .tbl-wrap .tbl-top .member-info span {font-size: 16px; display: flex; align-items: center;}
.group-member-wrap .tbl-wrap .tbl-top .member-info span img {margin-right: 8px;}
.group-member-wrap .tbl-wrap .tbl-top .member-info .group-name img {height: 16px;}
.group-member-wrap .tbl-wrap .tbl-top .member-info .member-count img {height: 20px;}
.group-member-wrap .tbl-wrap .tbl-top .member-info > img {margin: 0 15px; height: 10px;}
.group-member-wrap .tbl-wrap .thead-sticky {max-height: 340px;}
.group-member-wrap .tbl-wrap .tbl {table-layout: fixed;}
.group-member-wrap .tbl-wrap .tbl tr:last-child td {border-bottom: none;}

.address02 .tbl-wrap {margin-top: 24px;}
.address02 .tbl-wrap .thead-sticky {max-height: 450px;}

.side-user-wrap .btn-user {position: fixed; top: 125px; left: 10px; z-index: 1000; display: flex; justify-content: center; align-items: center; transition: left 0.3s; background-color: #fff; border: 1px solid #ddd; width: 40px; height: 40px; border-radius: 5px;}
.side-user-wrap .btn-user img {height: 22px;}
.side-user-wrap .side-user {visibility: hidden; position: fixed; top: 125px; left: -300px; width: 286px; height: calc(100% - 125px); background-color: #fff; transition: left 0.3s; box-sizing: border-box; z-index: 9999;}
.side-user-wrap .side-user > div {height: 100%!important; overflow-y: auto; padding: 50px 20px 60px;}
.side-user-wrap.active .side-user {left: 0px; visibility: visible;}
.side-user-wrap.active .btn-user {left: 290px;}
.side-user-wrap.active .btn-user img {transform: rotate(180deg);}

/* 일반 문자 */
.sms-wrap {margin-top: 25px;}
.sms-wrap .btn-wrap input{height: 30px; border: 1px solid #ddd; background-color: #fff; padding: 5px 6px; box-sizing: border-box; font-size: 13px; color: #999;}
.sms-wrap .txt-box {margin-bottom: 12px;}
.sms-box {display: flex; justify-content: space-between; gap: 25px;}
.sms-box .left {width: 260px;}
.sms-box .right {width: calc(100% - 285px);}
.sms-box .sub-title {margin-bottom: 16px ;}
.sms-wrap div::-webkit-scrollbar {width: 10px; background-color: #f5f5f5;}
.sms-wrap div::-webkit-scrollbar-track {border-radius: 0px; background-color: #fff;}
.sms-wrap div::-webkit-scrollbar-thumb {border-radius: 5px; border: 2px solid transparent; background-color: #c9c9c9; background-clip: padding-box;}

.sms-box .preview {margin-top: 22px;}
.sms-box .phone-wrap .img-wrap {height: 415px; background-size: contain; background-repeat: no-repeat; padding: 40px 20px; box-sizing: border-box;}
.sms-box .phone-wrap .phone-box .phone-top {display: flex; justify-content: space-between; gap: 6px; margin-bottom: 20px; height: 30px;}
.sms-box .phone-wrap .phone-box .phone-top > * {height: 100%;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip {color: #999; font-size: 13px; padding: 0 15px; border: 1px solid #ddd; cursor: pointer; text-align: center;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > div {display: flex; align-items: center; gap: 20px; height: 100%;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip img {height: 6px; margin-top: 3px;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span {top: -60%; left: -2px; width: 103%; display: block;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span ul li {margin-bottom: 2px;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span ul li:last-child {margin-bottom: 0;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span .chk-item .label-cb {width: 10px; height: 10px;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span .chk-item label {font-size: 13px;} 
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span .chk-item input[type="checkbox"]:checked + .label-cb + label {color: #42ade2;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span .chk-item input[type="checkbox"]:checked + label.label-cb::after {content: url('/front/images/sms/ico_check_blue.png'); top: -4.4px; left: -1.8px; transform: scale(0.6); z-index: 0;}
.sms-box .phone-wrap .phone-box .phone-top .tooltip > span button {border: 1px solid #42ADE2; border-radius: 3px; padding: 5px 10px; background-color: #f6f8fb; width: 90%; margin: 10px auto 0; color: #42ADE2;}
.sms-box .phone-wrap .phone-box .phone-top button {background-color: #f6f8fb; padding: 6px 8px; font-size: 13px; border: 1px solid #42ADE2; border-radius: 3px; line-height: 10px;}
.sms-box .phone-wrap .phone-box .phone-con {height: 255px; overflow-y: auto;}
.sms-box .phone-wrap .phone-box .phone-con .phone-preview-con { position: relative; width: 100%; background-color: #f2f2f2; border-radius: 10px; padding: 20px; box-sizing: border-box; line-height: 1.5; font-size: 15px; font-weight: 400; letter-spacing: -0.5px; margin: 0 0 20px 0; word-break: break-all; color: #555;}
.sms-box .phone-wrap .phone-box .phone-con .phone-preview-con .none-text { color: #999; font-weight: 300; font-size: 13px;}
.sms-box .phone-wrap .phone-box .phone-con .phone-preview-con p { word-break: break-all; }
.sms-box .phone-wrap .phone-box .phone-con .phone-img img {width: fit-content; margin-bottom: 10px; width: 100%;}
.sms-box .phone-wrap .phone-box .phone-con pre {/* min-height: 100px;  */box-sizing: border-box; width: 100%; border-radius: 5px; word-break: break-word; white-space: pre-wrap; font-size: 14px; line-height: 135%;}
.history-view .view-wrap .phone-con .phone-test-preview-con { position: relative; width: 100%; background-color: #f2f2f2; border-radius: 10px; padding: 20px; box-sizing: border-box; line-height: 1.5; font-size: 15px; font-weight: 400; letter-spacing: -0.5px; margin: 0 0 20px 0; word-break: break-all; color: #555;}
.history-view .view-wrap .phone-con .phone-test-preview-con .none-text { color: #999; font-weight: 300; font-size: 13px;}
.history-view .view-wrap .phone-con .phone-test-preview-con p { word-break: break-all; }
.history-view .view-wrap .phone-con .phone-img img {width: fit-content; margin-bottom: 10px; width: 100%;}
.history-view .view-wrap .phone-con pre {/* min-height: 100px;  */box-sizing: border-box; width: 100%; border-radius: 5px; word-break: break-word; white-space: pre-wrap; font-size: 14px; line-height: 135%;}
.sms-box .sms-img .sms-img-box {padding: 15px 10px; box-sizing: border-box; background-color: #f6f6f6; height: 140px;}
.sms-box .sms-img .sms-img-box ul {display: flex; justify-content: space-between; gap: 10px; height: 100%;}
.sms-box .sms-img .sms-img-box ul li {width: 100%; border-radius: 10px; background-color: #fff;}
.sms-box .sms-img .sms-img-box ul li .img-wrap {position: relative; height: 100%; background-repeat: no-repeat; background-size: cover;}
.sms-box .sms-img .sms-img-box ul li .img-wrap img {position: absolute; cursor: pointer; width: 20px; height: 20px;}
.sms-box .sms-img .sms-img-box ul li .img-wrap img.del {right: -10px; top: -10px;}
.sms-box .sms-img .sms-img-box ul li .img-wrap img.add {top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sms-box .sms-content {padding-top: 18px; border-top: 4px solid #42ADE2; margin-bottom: 18px;}
.sms-box .sms-content > div {display: flex; justify-content: space-between; gap: 15px;}
.sms-box .sms-content .sms-name-box {width: calc(100% - 145px); border: 1px solid #ddd; border-radius: 5px; background-color: #f5f5f5; padding: 12px; box-sizing: border-box; margin-bottom: 7px;}
.sms-box .sms-content .sms-name-box input {font-size: 14px; border: none; background-color: transparent; width: 100%; resize: none; ;}
.sms-box .sms-content .sms-content-box {width: calc(100% - 145px); height: 200px; border: 1px solid #ddd; border-radius: 5px; background-color: #f5f5f5; padding: 12px; box-sizing: border-box;}
.sms-box .sms-content .sms-content-box textarea {font-size: 14px; border: none; background-color: transparent; width: 100%; height: 150px; resize: none; ;}
.sms-box .sms-content .sms-content-box .sms-content-info {font-size: 13px; color: #888; text-align: right;}
.sms-box .sms-content .sms-content-box .sms-content-info .tag {border: 1px solid #c5d8f2; border-radius: 5px; padding: 3px 6px; box-sizing: border-box; color: #42ADE2; background-color: #fff; margin: 0 7px;}
.sms-box .sms-content .sms-content-box .sms-content-info button {border: none; background-color: transparent; color: #888; padding: 0;}
.sms-box .sms-content .sms-content-btn-wrap {height: 100%; width: 130px;}
.sms-box .sms-content .sms-content-btn-wrap button {width: 100%; margin-bottom: 6px;}
.sms-box .sms-content .sms-content-btn-wrap button:last-child {margin-bottom: 0;}
.sms-box .number {padding-top: 16px; border-top: 1px solid #42ade2; margin-bottom: 10px;}
.sms-box .number .number-top {display: flex; align-items: center; gap: 25px; margin-bottom: 14px;}
.sms-box .number .number-top .sub-title {margin-bottom: 0;}
.sms-box .number .number-top .btn-wrap {display: flex; gap: 10px;}
.sms-box .number .number-top .btn-wrap button {border: 1px solid #42ADE2; background-color: #f6f8fb; width: 80px; height: 33px; color: #000;}
.sms-box .number .number-box {position: relative; display: flex; justify-content: space-between; gap: 8px; align-items: center; height: 160px;}
.sms-box .number .number-box .btn-del {font-size: 12px; color: #919191; position: absolute; right: -5px; top: -22px; border: none; background-color: transparent;}
.sms-box .number .number-box .number-input {width: 280px; height: 100%; border: 1px solid #ddd; background-color: #f5f5f5; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; border-radius: 5px;}
.sms-box .number .number-box .number-input input {border: none; background-color: transparent; width: 100%; font-size: 14px;}
.sms-box .number .number-box .number-input textarea {border: none; background-color: transparent; width: 100%; font-size: 14px; resize: none; height: 100%;}
.sms-box .number .number-box img {height: 10px;}
.number-list {width: calc(100% - 233px); border: 1px solid #ddd; border-radius: 5px; height: 100%; padding: 10px 8px; box-sizing: border-box; overflow-y: auto;}
.number-list ul li {background-color: #f6f6f6; border-radius: 5px; padding: 10px 12px; box-sizing: border-box; font-size: 14px; margin-bottom: 7px;}
.number-list ul li:last-child {margin-bottom: 0;}
.number-list ul li span {margin-right: 5px; display: inline-block;}
.number-list ul li button {border: none; padding: 0; background-color: transparent;}
.number-list ul li button img {height: 14px; vertical-align: middle;}
.sms-box .number .btn-wrap {justify-content: flex-start; margin-top: 5px;}
.sms-box .number .btn-wrap button {width: 90px; height: 30px; padding: 0px;}
.sms-box .number > p {text-align: right; font-size: 16px;}
.sms-box .send-setting {padding-top: 20px; border-top: 1px solid #42ADE2;}
.sms-box .send-setting .setting-select {margin-bottom: 14px; display: flex; gap: 8px; justify-content: space-between;}
.sms-box .send-setting .setting-select > div {width: 100%;}
.sms-box .send-setting .setting-select > div > select {width: 60%; border-radius: 5px; border: 1px solid #ddd; padding: 5px 12px 5px 50px; box-sizing: border-box; font-size: 15px; margin-bottom: 10px;}
.sms-box .send-setting .setting-select > div > div {display: grid; column-gap: 4px;}
.sms-box .send-setting .setting-select > div > div > * {border: none; background-color: #f6f6f6; border-radius: 5px; padding: 7px 10px; font-size: 12px;}
.sms-box .send-setting .setting-select .reserve > select {background: url(/front/images/sms/ico_reserve.png) 7% center no-repeat, url(/front/images/ico_select.png) 95% center no-repeat; background-size: 15px, 8px;}
.sms-box .send-setting .setting-select .divide > select {background: url(/front/images/sms/ico_send.png) 7% center no-repeat, url(/front/images/ico_select.png) 95% center no-repeat; background-size: 15px, 8px;}
.sms-box .send-setting .setting-select .reserve .reserve-setting {grid-template-columns: 2fr 1fr 1fr;}

.sms-box .send-setting .setting-select .reserve .reserve-setting input[type=date]::-webkit-calendar-picker-indicator {background-image: url(/front/images/ico_calendar.png); background-repeat: no-repeat; background-position: 5% 50%; background-size: 14px;}
.sms-box .send-setting .setting-select .divide .divide-setting {grid-template-columns: repeat(2, 1fr);}
.sms-box .send-setting .btn-wrap {justify-content: flex-end;}

.sms-box .number .receive-count {margin-left: auto; display: flex; align-items: center; font-weight: bold;}

.sms02 .tab-menu ul {justify-content: flex-start;}
.sms02 .tab-con {margin-top: 40px;}
.sms02 .sms-type-list {width: 85%; margin: 0 auto 40px; display: flex; flex-wrap: wrap; gap: 20px 35px; justify-content: center;}
.sms02 .sms-type-list span {display: inline-block; font-weight: 500; position: relative; cursor: pointer;}
.sms02 .sms-type-list span.active {color: #42ADE2;}
.sms02 .sms-type-list span::after {position: absolute; display: block; content: ''; border-radius: 100%; background-color: #7f7f7f; width: 5px; height: 5px; top: 50%; right: -18px; transform: translateY(-50%);}
.sms02 .sms-type-list span:last-child::after {display: none;}
.sms02 .sms-rec-list {margin: 0 auto 70px; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 14.5px; row-gap: 48px;}
.sms-con {width: 175px; border-radius: 5px; border: 1px solid #ddd; padding: 8px 8px 15px 8px; box-sizing: border-box;}
.sms-con pre {border-radius: 5px; background-color: #f6f6f6; height: 165px; overflow-y: auto; overflow-x: hidden; white-space: pre-wrap; padding: 14px 8px; box-sizing: border-box; font-size: 12px; line-height: 140%; margin-bottom: 5px; cursor: pointer;}
.sms-con .sms-con-img {height: 180px; overflow-y: auto;}
.sms-con .sms-con-img img {display: inline-block; border-radius: 5px; background-color: #f6f6f6; height: 165px; overflow-y: auto; overflow-x: hidden; white-space: pre-wrap; padding: 14px 8px; box-sizing: border-box; font-size: 12px; line-height: 140%; margin-bottom: 5px; width:100%;}
/* .sms-con div {text-align: right;} */
.sms-con div span {color: #606060; display: inline-block; font-size: 12px;}
.sms02 .sms-rec-list .chk-item {margin-top: 14px; text-align: center;  overflow-y: auto;}
.sms02 .sms-rec-list .chk-item label {font-size: 15px; font-weight: 500; color: #161616;}
.sms02 .sms-rec-list .chk-item input[type=checkbox] + label.label-cb {border-radius: 100%;}
.sms02 .sms-rec-list .chk-item input[type="checkbox"]:checked + label.label-cb::after {transform: scale(0.46);}

/* 충전 */
.charge-wrap .tab-menu {margin: 25px 0 18px}
.charge-wrap .txt-box {margin: 0 0 18px; padding: 15px 32px;}
.charge-wrap .input-wrap .input-item {padding: 0; border: none;}
.pay-type {display: flex; align-items: center; gap: 30px; margin-bottom: 28px;}
.pay-type .sub-title {width: 60px; margin-bottom: 0;}
.pay-type .input-wrap {width: calc(100% - 90px);}
.price .price-input-wrap {border: 1px solid #42ADE2; border-radius: 5px; padding: 15px; box-sizing: border-box; background-color: #f6f8fb; display: inline-block;}
.price .price-input-wrap input {height: 40px; border: 1px solid #ddd; background-color: #fff; padding: 5px 6px; box-sizing: border-box; font-size: 13px; color: #999;}
.price .price-input-wrap input[type=number] {text-align: right;}
.price .price-input-wrap .input-text.has-text {display: flex; align-items: center;}
.price .price-input-wrap .input-text.has-text input {width: 360px;}
.price .price-input-wrap .input-text.has-text span {margin-left: 5px; display: inline; font-size: 14px; color: #3d3d3d; font-weight: 500;}
.price .price-input-wrap .input-button {display: flex; align-items: center; gap: 5px; margin-top: 8px;}
.price .price-input-wrap .input-button input {width: 75px; cursor: pointer;}
.price .price-input-wrap .input-button input.img-button {width: 40px; background-image: url(/front/images/ico_refresh.png); background-repeat: no-repeat; background-size: 15px; background-position: center;}

.price-tbl-wrap {float: right; width: 65%;}
.price-tbl-wrap .tbl {/* margin-top: 15px; */ border-collapse: collapse;}
.price-tbl-wrap .tbl th, .price-tbl-wrap .tbl td {border: 1px solid #ddd; height: 30px; color: #000; font-size: 14px;}
.price-tbl-wrap .tbl th {font-weight: 600;}
.price-tbl-wrap .tbl .total {background-color: #f1fafe; border: 1px solid #42ade2; color: #42ade2; border-collapse: separate;}
.price-tbl-wrap .tbl-bottom .txt-box {padding: 0; border: none;}

.account-wrap {background-color: #ecf7fc; width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; gap: 30px; margin-bottom: 20px;}
.charge-tbl .tbl-top {display: grid; grid-template-columns: 0.3fr 1fr auto; gap: 12px; margin-bottom: 20px;}
.charge-tbl .tbl-top .search-box {padding-right: 0; height: 35px; width: 100%; gap: 5px;}
.charge-tbl .tbl-top .search-box input {width: 185px; padding: 12px 0 12px 10px;}
.charge-tbl .tbl-top .search-date {margin-bottom: 0;}
.charge-tbl .tbl-top .search-date .input-date {display: flex; align-items: center;}
.charge-tbl .tbl-top .search-date .input-date input {height: 35px;}
.charge-tbl .tbl-top .btn-wrap {justify-content: space-between;}
.charge-tbl .tbl-top .btn-wrap button {padding: 0 10px;}
.charge-tbl .tbl {height: 280px; margin-bottom: 30px;}
.charge-tbl .tbl td.no-data {color: #999; font-size: 14px;}

.search-date {display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-bottom: 30px;}
.search-date .input-date input {border: 1px solid #ddd; border-radius: 5px; padding: 5px; box-sizing: border-box; width: 110px; height: 25px; font-size: 14px; position: relative;}
.serach-date .input-date input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; background-color: transparent; color: transparent; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; display: none; -webkit-appearance: none;;}
.search-date .input-date input::-webkit-calendar-picker-indicator{background-image: url(/front/images/ico_select.png); background-position: 95% 50%; background-size: 10px; background-repeat:no-repeat;}
.search-date .input-date img {margin-right: 10px; height: 20px; vertical-align: sub;}
.search-date button {height: 30px;}

.column-tbl .tbl {border-top: 2px solid #656565; text-align: left;}
.column-tbl .tbl th, .column-tbl .tbl td {border-bottom: 1px solid #c3c3c3; border-top: none; color: #1c1c1c; height: 60px;}
.column-tbl .tbl th {font-weight: 600; font-size: 16px; padding: 7px 25px; background-color: #fafafa;}
.column-tbl .tbl td {padding: 7px 10px; font-size: 15px;}
.column-tbl .tbl td .input-file {display: grid; gap: 10px; grid-template-columns: 5fr auto;}
.column-tbl .tbl td input {border: none; background-color: #fff; font-size: 15px;}
.column-tbl .tbl-bottom .btn-wrap {margin-top: 25px; justify-content: center;}
.column-tbl .tbl td .txt-box {padding: 0; border: none; font-size: 16px; color: #333; margin-top: 10px; font-weight: 500;}

.cash-receipt .input-wrap .input-item {margin-bottom: 30px; height: auto;}
.cash-receipt .input-wrap .input-item .input-radio, .faq .input-wrap .input-item .input-radio {margin-left: 0; width: 100%;}

.bill-info .input-wrap .input-item {margin-bottom: 30px; height: auto;}
.bill-info .input-wrap .input-item .input-radio {margin-left: 0; width: 100%;}

/* 전송결과 */
/* .result-count {display: flex; justify-content: space-between; gap: 10px; margin: 15px auto;} */
.result-count {display: flex; justify-content: space-between; gap: 20px; margin: 15px auto;}
.result-count .count-item {background-color: #fbfbfb; width: 100%; border-radius: 6px; padding: 20px 10px; box-sizing: border-box;}
.result-count .count-item .count-title {font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.result-count .count-item .count-title strong {font-size: 20px; vertical-align: text-bottom; display: inline-block; margin-right: 2px;}
.result-count .count-item .count-title span {font-size: 15px; font-weight: 400;}
/* .result-count .count-item .status-count {width: 100%; position: relative; background-color: #fff; padding: 50px 10px 15px; border-radius: 4px; box-sizing: border-box; font-size: 14px; border: 1px solid #42ade2;} */
.result-count .count-item .status-count {width: 100%; position: relative; background-color: #fff; padding: 49px 15px 15px; border-radius: 4px; box-sizing: border-box; font-size: 14px; border: 1px solid #42ade2;}
.result-count .count-item .status-count .status-top {width: 100%; position: absolute; top: 0; left: 0px; background-color: #ecf7fc; border-radius: 4px 4px 0 0; padding: 10px; box-sizing: border-box; display: block; border-bottom: 1px solid #42ade2;}
.result-count .count-item .status-count dl {display: flex; justify-content: space-between; margin-bottom: 10px;}
.result-count .count-item .status-count dl:last-child {margin-bottom: 0;}

.result-tbl .tbl-top {display: grid; grid-template-columns: 0.3fr 1fr auto; gap: 12px; margin-bottom: 20px;}
.result-tbl .tbl-top .search-box {padding-right: 0; height: 35px; width: 100%; gap: 5px;}
.result-tbl .tbl-top .search-box input {width: 185px; padding: 12px 0 12px 10px;}
.result-tbl .tbl-top .search-date {margin-bottom: 0;}
.result-tbl .tbl-top .search-date .input-date {display: flex; align-items: center;}
.result-tbl .tbl-top .search-date .input-date input {height: 35px;}
.result-tbl .tbl-top .btn-wrap {justify-content: space-between;}
.result-tbl .tbl-top .btn-wrap button {padding: 0 10px;}
.result-tbl .thead-sticky {max-height: 395px;}
.result-tbl .no-data {height: 340px;}

/* 고객센터 */
.faq .input-wrap {margin-bottom: 20px;}
.accor-list li:first-child .accor-title {border-top: 1px solid #656565;}
.accor-list li .accor-title {width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; color: #666; font-size: 14px; padding: 12px 40px 12px 15px; border-top: none; border-bottom: 1px solid #ddd; background-color: #fff; border-left: none; border-right: none; cursor: pointer; position: relative; font-weight: 500; height: 40px;}
.accor-list li .accor-title > span {font-size: 20px; color: #b2b2b2; font-weight: 400;}
.accor-list li .accor-title .faq-num {position: relative; font-weight: 600; font-size: 16px; color: #42ade2; display: inline-block; margin-right: 30px; vertical-align: middle; height: 24px; line-height: 24px;}
.accor-list li .accor-title .faq-num::after {position: absolute; display: block; content: ''; width: 4px; height: 4px; background-color: #666; top: 50%; right: -20px; transform: translateY(-50%);}
.accor-list li .accor-content {max-height: 0; overflow: hidden; transition: max-height .1s ease-out; background-color: #fbfbfb; color: #666; font-size: 13px; padding: 0 66px; box-sizing: border-box; word-break: keep-all;}
.accor-list li .accor-title.active + .accor-content {border-bottom: 1px solid #ddd;}
.accor-content p {line-height: 25px; margin: 20px auto;}

/* 약관 */
/* .terms {padding-top: 50px;} */
.terms-wrap {margin-top: 40px;}
.terms-wrap .tab-menu {border-bottom: none;}
.terms-wrap .tab-menu ul {justify-content: flex-start; gap: 0;}
.terms-wrap .tab-menu ul li {width: 50%; border: 1px solid #efefef; background-color: #f4f4f5; border-radius: 3px; height: 45px; line-height: 43px;}
.terms-wrap .tab-menu ul li.active {background-color: #fff; border: 2px solid #42ade2; color: #42ade2; font-weight: 500;}
.terms-wrap .tab-con {margin-top: 30px; margin-bottom: 50px;}
.terms-box {background-color: #efefef; padding: 25px 30px; box-sizing: border-box; margin-bottom: 30px; border-radius: 6px;}
.terms-box:last-child {margin-bottom: 0;}
.terms-box .terms-title {font-weight: 600; margin-bottom: 20px; font-size: 22px;}
.terms-box .terms-con {height: 610px; overflow-y: scroll; background-color: #fff; padding: 20px; font-size: 15px; line-height: 150%; box-sizing: border-box; border-radius: 4px;}

/* 환불신청내역 */
.refund .tab-menu {margin: 25px 0 18px}
.refund .txt-box {margin: 0 0 18px; padding: 15px 32px;}
.refund .tbl-wrap .tbl-top {margin-bottom: 15px;}
.refund .tbl-wrap .tbl-top .txt-box ul li {padding-left: 0;}
.refund .tbl-wrap .tbl-top .txt-box ul li::before {display: none;}
.refund .tab-con {margin-bottom: 64px;}

/*팝업레이어*/
#front-pop {z-index:9999;position:relative;margin:0 auto;width:100%;height:0}
#front-pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.front-pops {position:absolute;border:1px solid #ddd;background:#fff}
.front-pops-footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.front-pops-footer button {margin:0 5px;padding:5px 10px;border:0;background:#393939;color:#fff}
.sound-only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}

/* 템플릿 */
.content-wrap.leaflet {flex-direction: column;}
.leaflet-wrap {width: 100%;}
.leaflet-wrap .leaflet-title {width: 100%; margin: 30px auto; text-align: center;}
.leaflet-wrap .leaflet-title span {display: block; color: #42ade2; letter-spacing: 3px; margin-bottom: 5px; font-size: 12px; font-weight: 500;}
.leaflet-wrap .leaflet-title h2 {font-weight: 500; font-size: 26px;}
.leaflet-wrap .leaflet-con {display: flex; max-width: 1600px; min-height: 1400px; margin: 0 auto; padding: 30px 0;}
.leaflet-wrap .leaflet-con .preview {width: 40%;}
.leaflet-wrap .leaflet-con .preview .preview-wrap {width: 500px; margin: 50px auto; position: sticky; top: 80px;}
.leaflet-wrap .leaflet-con .preview .preview-wrap .preview-con {background-image: url(/front/images/mockup.png); background-color: #fff; height: 720px; background-size: auto 100%; background-repeat: no-repeat; background-position: center;}
.leaflet-wrap .leaflet-con .preview .preview-wrap .preview-con .phone-preview {position: relative; height: 96%; box-sizing: border-box; padding: 50px 25px 0;}
.leaflet-wrap .leaflet-con .preview .preview-wrap .preview-con .phone-preview .phone-preview-con {position: relative; margin: 20px auto; width: 290px; height: 600px; padding-right: 20px; box-sizing: border-box; overflow-y: auto;;}
.phone-content {font-weight: 600; font-size: 14px; line-height: 135%; letter-spacing: 0; word-spacing: 0; padding: 10px;}
.phone-content > h3 {text-align: center; margin: 10px 0;}
.phone-pic > h3{text-align: center; margin: 10px 0;}
.phone-pic img {width: 100%;}
.phone-map {width:100%; height:200px;}
.phone-yb > h3{text-align: center; margin: 10px 0;}
.phone-yb .video-wrapper {position: relative; padding-bottom: 75.25%; height: 0;}
.phone-yb .video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.leaflet-wrap .leaflet-con .preview .preview-wrap .btn-wrap {width: 60%; margin: 15px auto; display: flex; align-items: center; justify-content: space-between;}
.leaflet-wrap .leaflet-con .preview .preview-wrap .btn-wrap button {font-size: 13px;}
.leaflet-wrap .leaflet-con .right {width: 60%;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap {width: 80%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 30px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 50px auto;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title {text-align: center;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title h3 {font-weight: 500; font-size: 22px; margin-bottom: 30px; position: relative; display: inline-block; text-align: center;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title h3::before, .leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title h3::after {position: absolute; display: block; content: ''; background-color: #42ade2; height: 90%; width: 3px; top: 58%; transform: translateY(-50%);}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title h3::before {left: -15px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title h3::after {right: -15px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-title div {display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 13px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-btn {display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; margin-bottom: 60px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-btn span:nth-child(1) {border-radius: 100%; width: 15px; height: 15px; background-color: #42ADE2; display: flex; justify-content: center; align-items: center; padding: 0; border: none; cursor: inherit;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-btn span:nth-child(1) img {height: 10px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-btn span {border: 1px solid #42ade2; padding: 5px 6px; color: #42ade2; border-radius: 4px; cursor: pointer;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-btn span:hover {background-color: #42ade2; border: 1px solid #fff; padding: 5px 6px; color: #fff; border-radius: 4px; cursor: pointer;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form {display: flex; flex-direction: column; gap: 40px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con {border: 1px solid #666; width: 450px; min-height: 100px; padding: 15px; border-radius: 10px; position: relative; font-size: 15px; background-color: #fff; box-sizing: border-box;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-num {text-align: right; width: 60px; border: 1px solid #42ade2; position: absolute; right: -3.75rem; bottom: 3.7rem; padding: 10px; color: #42ade2; border-radius: 0px 10px 10px 0px; font-weight: 600; font-style: italic; box-sizing: border-box;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-index {text-align: right; width: 80px; position: absolute; right: -5rem; bottom: 0.9rem; padding: 10px; background-color: #42ade2; color: #fff; border-radius: 0 10px 10px 0; box-sizing: border-box;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-title {display: flex; gap: 10px; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-title input {width: 70%; border: 1px solid #ccc; padding: 5px 8px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-title button {width: calc(15% - 10px); border-radius: 4px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic {display: flex; gap: 10px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic > div {width: calc(50% - 5px);}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-wrap {position: relative;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-wrap img {width: 100%; height: 100%;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-wrap button {position: absolute; top: 5px; left: 5px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-click-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-click-wrap select {font-size: 13px; border: 1px solid #ccc; padding: 5px 8px; width: 100%;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-click-wrap input {font-size: 12px; padding: 3px 8px; box-sizing: border-box; border: 1px solid #ccc; width: 100%;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic .img-click-wrap span {font-size: 13px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic-add {flex-direction: column;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic-add > div {width: 100%;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.pic-add .img-click-wrap {align-items: flex-start;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .textarea-wrap {width: 100%;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .textarea-wrap textarea {width: 100%; resize: none; border: 1px solid #ccc; min-height: 120px; padding: 5px 8px; box-sizing: border-box; font-size: 15px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .map-wrap.map-add {text-align: center; font-size: 13px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .map-wrap.map-add button {border: 1px solid #42ade2; color: #42ade2; display: block; margin: 10px auto 0;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .map-wrap .map-item:not(:last-child) {margin-bottom: 6px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .map-wrap .map-item span {display: flex; align-items: center; gap: 3px; margin-bottom: 5px; font-size: 14px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .map-wrap .map-item input {width: 100%; padding: 2px 8px; box-sizing: border-box; border: 1px solid #ccc;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .input-wrap input {width: 100%; padding: 3px 8px; box-sizing: border-box; border: 1px solid #ccc; font-size: 13px;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail.youtube span {display: block; text-align: center; line-height: 135%; font-size: 13px; margin-top: 10px;}
.ico-check {display: inline-block; margin-right: 3px; height: 18px; vertical-align: top;}
.leaflet-wrap .leaflet-con .right .leaflet-item-wrap .leaflet-item-form .form-con .form-con-detail .reservation-wrap span {display: block; text-align: center; line-height: 135%; font-size: 13px;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap {position: fixed; width: 150px; bottom: 4vh; right: 1vw; z-index: 9999; display: flex; flex-direction: column; gap: 10px;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap .btn-fold {border: 1px solid #42ade2; color: #42ade2; font-size: 16px; width: 65%; border-radius: 8px; padding: 6px 0;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap .btn-fold:hover {background-color: #42ade2; border: 1px solid #fff; color: #fff; font-size: 16px; width: 65%; border-radius: 8px; padding: 6px 0;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap .select-type p {border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #42ade2; color: #fff; font-size: 13px; padding: 12px 0; text-align: center;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap .select-type select {padding: 10px 5px; width: 100%; font-size: 12px; background-color: #fff;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap hr {border: 1px solid #ddd; width: 100%; margin: 0;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap .create-item {font-size: 12px; display: flex; gap: 5px; align-items: center; background-color: #42ade2; color: #fff; border-radius: 8px; padding: 12px 0;}
.leaflet-wrap .leaflet-con .right .fixed-btn-wrap .create-item img {height: 10px;}
.temp-input {padding: 5px 8px !important; border: 1px solid #ccc !important;}
#outputButton {border-radius: 5px; padding: 5px; margin-top: 15px; text-align: center; font-size: 13px; font-weight: 600; border: 1px solid #ddd;}
.rcs-content {position: absolute; top: 490px; left: 937px;}
.sms-box .rcs-setting input {background-color: #f6f6f6; border-radius: 5px; padding: 7px 10px; font-size: 12px; border: 1px solid #ddd;}
.sms-box .rcs-setting input:first-child {text-align: center; width: 142px;}
.sms-box .rcs-setting input:nth-child(2) {width: 307px;}
.sms-box .rcs-setting {display: grid; gap: 12px; grid-template-columns: 1fr 2fr; position: absolute; top: 525px; left: 597px;}
.reserve-banner {font-size: 24px; text-align: center; cursor: pointer; padding: 40px 10px; font-weight: bold; background: url(/front/template/images/receipt.jpg) no-repeat; background-size: cover; text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;}
.reserve-form {padding: 10px 0;}
.reserve-form .reserve-input {padding: 5px; font-size: 12px; text-align: center; width: 90%; border: 1px solid #000; margin-left: 10px; margin-bottom: 10px;}
.reserve-form .reserve-input:last-of-type {margin-bottom: 0;}
.reserve-form .reserve-btn {width: 100%; text-align: center; background: #42ade2; color: #fff; font-weight: bold; padding: 5px; margin-top: 15px;}