/*app*/
html{background: #F3F4F6;}
body{background: #F3F4F6;max-width: 450px; padding:calc(70px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom))!important; min-height: 100vh;position: relative;overflow-x: hidden;}
body:has(.float-btn-wrap:not(footer .float-btn-wrap)){padding:calc(70px + env(safe-area-inset-top)) 0 calc(115px + env(safe-area-inset-bottom))!important;}
body.white {background: #ffffff;}
header {background: #F3F4F6;z-index: 3;padding: 0px 20px;height: 60px; display: flex; align-items: center; position: fixed; width: 100%; top: 0; max-width: 450px; left: 50%; transform: translateX(-50%)}
body.white header {background: #ffffff;}
body:has(.sidebar.open) {max-height: 100vh; overflow: hidden}
header.grid {display: grid; grid-template-columns: 60px 1fr 60px}
header.grid span {display: flex;justify-content: end; align-items: center; gap: 20px}
header.grid span .fa-home {font-size: 1.3em}
header img {height: 25px;}
header i {font-size: 1.5em}
header p {font-size: 1.125em; font-weight: 600; text-align: center}

.sidebar {width: calc(100% - 50px);height: 100vh;background-color: #fff;position: absolute;top: 0;right:  calc(-100% + 50px); transition: right 0.3s ease-in-out 0s, background-color 0.3s ease-in-out 0.3s;z-index: 1000;padding: 10px 20px;user-select: none;}
.sidebar.open {right: 0;}
.sidebar a.close-btn {margin-bottom: 20px;font-size: 1.538em;text-align: right;width: 100%;display: block;}
.sidebar a.login {font-size: 24px;}
.sidebar h1 {font-size: 24px;margin-bottom: 20px}
.sidebar .copy {position: absolute;bottom:30px;color: #aaa;left: 50%;transform: translateX(-50%)}
.sidebar .copy a {color: #666;padding:5px 10px;}
.sidebar .copy p {text-align:center;}
.sidebar ul li{margin-bottom:5px;}
.sidebar ul li a {padding: 10px 0;display: block;font-size:1.2em;}
.sidebar-overlay{position:absolute;width:100%;height:100%;background:#00000050;top:0;left:0;visibility:hidden;opacity:0;z-index:900;transition: all 0.3s ease-in-out;}
.sidebar-overlay.show{visibility:visible;opacity:1;}
form .section{display:flex;flex-direction:column;gap:5px;}

/*공통*/
.text-sm{font-size:14px;}
.table.privacy{margin-top:0;}
.table.privacy > * {margin: 0  0 15px}
.table.privacy h6{margin:30px 0 10px;}
.table.privacy h6:first-child{margin-top:0;}
.table.privacy li{margin:3px 0;}
.table.privacy ol{padding-left:28px;}
.table.privacy ol > li{margin-bottom:10px;}
.table.privacy ol > li > ul {padding-left:0;list-style: none;}
.table.privacy ol > li > ul > li{counter-increment:circle-counter;padding-left: 18px;position: relative;}
.table.privacy ol > li > ul > li:before{content: counter(circle-counter);background:none;width: 12px;height: 12px;border-radius: 50%;display: inline-block;font-size: 9px;line-height: 12px;color: #666;text-align: center;margin-right: 0;position: absolute;top: 6px;left: 0;border:1px solid #888;}
.table.privacy ol > li > ul > li > span{display: inline-block;margin-top: -3px;}
.tab {background: #f3f4f6;border-radius: 30px;padding: 5px;display: flex;flex-direction: row;gap: 7px;align-items: center;justify-content: center;align-self: stretch;flex-shrink: 0;position: relative;overflow: hidden;}
.tab .tablinks {cursor: pointer;border-radius: 20px;padding: 12px;display: flex;flex-direction: row;gap: 5px;align-items: center;justify-content: center;width: 100%;border:none;background:transparent;font-weight:700;color:#666;}
.tab .tablinks.active {background: #ffffff;color:#111;}
.switcher-wrap {background: #f3f4f6;border-radius: 30px;padding: 5px;display: flex;flex-direction: row;gap: 7px;align-items: center;justify-content: center;align-self: stretch;flex-shrink: 0;position: relative;overflow: hidden;}
.switcher-wrap > div {cursor: pointer;border-radius: 20px;padding: 12px;display: flex;flex-direction: row;gap: 5px;align-items: center;justify-content: center;width: 100%;}
.switcher-wrap > div span {display: block;line-height: 13px;color: #888;}
.switcher-wrap > div p {line-height: 13px;color: #666;font-weight: 700;}
.switcher-wrap > div.active {background: #ffffff;}
.switcher-wrap > div.active span {color: #006ffd;font-weight: 700;}
.switcher-wrap > div.active p{color: #111;font-weight: 700;}
.switcher-wrap > .fa-pipe {color: transparent;}
.float-btn-wrap{position:fixed;width:100%;display:flex;bottom:0;left:0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));background:#F3F4F688;gap:20px;backdrop-filter:blur(12px);border-radius:0;}
.float-btn-wrap .btn{margin:0;}
.plus {flex:1;transition: all 0.7s ease;white-space: nowrap;color: #fff!important;background: #006ffd;border-radius: 12px;padding: 10px;display: flex;flex-direction: row;gap: 10px;align-items: center;justify-content: center;height: 50px;box-shadow: 4px 4px 21.3px 0px rgba(129, 164, 210, 1);overflow: hidden;}
.plus:hover {background: #0257c3!important}
.plus i {font-size: 1em}
.plus p {font-size: 20px}
.list {flex:1;transition: all 0.7s ease;white-space: nowrap;color: #fff!important;background: #666;border-radius: 12px;padding: 10px;display: flex;flex-direction: row;gap: 10px;align-items: center;justify-content: center;height: 50px;box-shadow: 4px 4px 21.3px 0px rgb(180, 180, 180);overflow: hidden;}
.list:hover {background: #444!important;}
.list i {font-size: 1em;}
.list p {font-size: 20px;}
.modal .float-btn-wrap{background:#ffffff90}
.white-box{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 20px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.white-box .section{width:100%;}

.cont-box {border-radius: 20px;padding: 15px; width: 100%}
.contract-cont {width: 100%;position: relative;padding: 20px 0 0}
.contract-cont li{padding-bottom: 25px;margin-bottom: 25px;border-bottom: 1px solid #eeeeee;}
.contract-cont li:last-child, .contract-cont li.empty{border-bottom:none;margin-bottom:0;}
.contract-cont .cont-title {width: 100%;color: #444;display: flex;gap: 10px;align-items: center;justify-content: space-between;align-self: stretch;flex-shrink: 0;position: relative; margin-bottom: 10px}
.contract-cont .cont-title h5 {font-size: 1.2em;font-weight: 500;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.contract-cont .cont-title .pick {color:#D9D9D9;text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25);}
.contract-cont .cont-title .pick.active {color:#FFCA80;}
.cont-info {width: 100%;display: flex;flex-wrap:wrap;gap: 10px;align-items: flex-start;justify-content: flex-start;align-self: stretch;flex-shrink: 0;position: relative;}
.cont-info .icon {font-size: 1.5em;border-radius: 10px;display: flex;flex-direction: row;gap: 10px;align-items: center;justify-content: center;flex-shrink: 0;width: 50px;height: 50px;position: relative;overflow: hidden;}
.cont-info .icon.month {background: #e0f1ff;color: #46828F;}
.cont-info .icon.once {background: #E1FAE6;color: #709678;}
.cont-info .icon.cost {background: #eeeeee;color: #858D6B;}
.cont-info .icon.rent {background: #FFEBBF;color: #FFEFCB;}
.cont-info .icon.end {background: #E9E9E9;color: #F8F8F8;}
.cont-info .icon img{width:30px;}
.cont-info .icon.ready {background: #f4f4f4;color: #fff;}
.cont-info .icon.ready .txt-red{font-size:14px;color:#222!important;}
.cont-info .icon.progress {background: #f4f4f4;color: #fff;}
.cont-info .icon.progress .txt-blue{font-size:14px;}
.cont-info .icon.reject {background: #f4f4f4;color: #fff;}
.cont-info .icon.reject .txt-gray{font-size:14px;color:#fd0000;}
.cont-info .text{flex:1;}
.cont-info p {color: #006ffd;font-size: 15px;display:flex;gap:0 8px;flex-wrap:wrap;align-items:center;}
.cont-info .contract-type{color:#222;font-size: 16px;}
.cont-info p i {margin:0 3px;}
.cont-info h7 {color: #242424;font-weight: 800}
.cont-info h6 {color: #242424;font-size: 1.154em;font-weight: 800}
.cont-info h6:after {content: '원'; display: inline-block}
.cont-info .btn-area{display:flex;gap:10px;flex:1 1 100%;margin-top:5px;}
.cont-info .btn-area .btn{transition: all 0.2s ease;font-size:1em;font-weight:bold;flex:0 1 100%;}
.cont-info .more {background: #fff;color: #666;border:1px solid #ddd;}
.cont-info .more:hover {background: #eee;color: #333;}
.cont-info .remit {color: #181818;background: rgba(0, 0, 0, 0.07);}
.cont-info .remit:hover {background: rgba(0, 0, 0, 0.30);}
.cont-info .pay {color:#006FFD;background: rgba(0, 111, 253, 0.11);}
.cont-info .pay:hover {background: rgba(0, 111, 253, 0.2);}
.cont-info .cancel {color: #fd0000;background: rgba(253, 0, 0, 0.08);}
.cont-info .cancel:hover{background: rgba(253, 0, 0, 0.2);}
.cont-info .main-btn{display:flex;flex-direction:column;align-items:center;}
.cont-info .main-btn p{color:#999;font-size:12px;line-height:24px;}
.contract-box {margin: 10px 0}
.board-title{margin-bottom:10px;}
.board-title .icon{margin-bottom:5px;}
.board-title h5{font-size:20px;margin-bottom:10px;}
.board-title .date{color:#888;}



.login-form {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.login-form .logo{margin:0 auto 50px;height:50px;width:auto;}
.login-form > div{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 25px;background: #fff;border-radius: 20px;padding: 20px; width: 100%}
.login-form > div > * {width: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;}
.login-form > div > * > *  {width: 100%;}
.login-form button {margin-top: 20px}
.login-form a {color: #888888; font-weight: 700}
.login-form p {color: #71727A}
.login-form .input-wrap a {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #8F9098; font-size: 1.154em}

.find-form {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.find-form .logo{margin:0 auto 50px;height:50px;width:auto;}
.find-form > div {width: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 0px;background: #fff;border-radius: 20px;padding: 20px; width: 100%}
.find-form form {width: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 20px;}
.find-form div > *  {width: 100%;}
.find-form form > *  {width: 100%;}
.find-form .tab {display: flex;margin-bottom: 20px;}
.find-form .tabcontent {display: none;}
.find-form .tabcontent.active {display: block;}
.find-form .btn{margin-top:20px;}
.find-form .find-result {text-align: center}

.signup-form {width: 100%;padding: 0px 20px;}
.signup-form h2 {color:#242424;font-size: 1.385em; font-weight: 700; margin-bottom: 20px}
.signup-form > form > div{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 20px;background: #fff;border-radius: 20px;padding: 20px; width: 100%}
.signup-form > form > div > *  {width: 100%;}
.signup-form .input-wrap a {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #8F9098; font-size: 1.154em}
.signup-form .agree-box li:not(.box-blue) {padding: 5px 10px;}
.signup-form .box-blue {border:1px solid #ccc;background:#fff;border-radius: 12px;padding: 10px; margin-bottom: 10px}
.signup-form .box-blue:has(:checked) {background: #006ffd;border-color:#006ffd;}
.signup-form .box-blue:has(:checked) label {color: #fff}
.signup-form .select-wrap {min-width: 100px;}
.signup-form input + label {cursor: pointer; width: 100%;border-radius: 12px!important;}
.signup-form .agree-box li  {display: flex;align-items: center; }
.signup-form .agree-box li input{flex:0 0 24px;}
.signup-form .agree-box li label {width: fit-content;font-size:14px;}
.signup-form .agree-box li label+ a {font-size: 11px; line-height: 13px; margin-left: auto; }
.signup-form button {margin-top: 20px}
.signup-form #agree ~ label {color: #71727A; cursor: pointer}
.signup-form #agree ~ a {color: #006ffd;font-weight: 700;}
.signup-form #done {max-width: 450px;opacity: 1;transition: opacity 0.3s ease!important;position: fixed;width: 100%;height: 100vh;background: #F3F4F6; text-align: center; top: 0; left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;}
.signup-form #done i{animation: rotate3D 2s linear 1;color: #006ffd;font-weight: 700; font-size: 100px}
.signup-form #done h1{color: #006ffd;font-weight: 700; font-size: 25px; margin-bottom: 10px}
.signup-form #done p{color: #242424;font-weight: 700; font-size: 1.154em}
.signup-form > form:has(input:focus) {padding-bottom: 80px}


/**/


main {user-select: none;}
main .wrap {padding: 0px 20px;display: flex;flex-direction: column;gap: 24px;align-items: flex-start;justify-content: flex-start;position: relative;}
main .login-box {cursor: pointer;border-radius: 20px;padding: 20px;display: flex;flex-direction: column;gap: 10px;align-items: flex-start;justify-content: flex-start;align-self: stretch;flex-shrink: 0;position: relative;margin-bottom: 0px}
main .login-box h6 {color: #006ffd;font-size: 1em;margin-bottom:5px;}
main .login-box h5 {color: #000;font-size: 26px;font-weight: 800;line-height:36px;}
main .login-box img {height: 120px; margin-left: auto;margin-bottom:10px;}
main .noti-box {cursor: pointer;border-radius: 20px;padding: 10px 15px;display: flex;gap: 0px;align-items: center;justify-content: flex-start;align-self: stretch;flex-shrink: 0;height: 70px;position: relative;margin-bottom: 20px}
main .noti-box + .noti-box {margin-top: -40px}
main .noti-box p {color: #006FFD;text-align: left;font-size: 14px;font-weight: 400;position: relative;}
main .noti-box h6 {color: #242424;font-size: 1.2em;font-weight: 600;}
main .noti-box img {width: 48px;height: 48px;margin-right:5px;}
main .noti-box .text {margin-right: auto}
main .noti-box i {font-size: 25px}
/*main .contract-cont .cont-info p {color: #888;font-size: 1em;gap:5px;}
main .contract-cont .cont-info .contract-type{color:#222;}
main .contract-cont .cont-info p i {margin:0 1.5px;}
main .contract-cont .cont-info p {letter-spacing:-0.4px;}
main .contract-cont .cont-info h6 {color: #242424;font-size: 1.154em;font-weight: 800}
main .contract-cont .cont-info .text {margin-left:2px;margin-right: auto}*/
main .modal-body .contract-cont {padding: 0px; border-radius: 10px}
main a.box-blue {margin-top: 20px;border-radius: 20px;padding: 10px 20px; width: 100%;color: #fff;display: flex;gap: 10px;align-items: center;justify-content: space-between;}
main a.box-blue img {width:80px;}
#reminderModal  .modal-body .total-box {padding: 20px;margin-bottom:30px;margin-top:-20px;background:#f4f4f4;border-radius:20px;}
#reminderModal  .modal-body .total-box h6{margin-bottom:10px;}
#reminderModal  .modal-body .total-box p {display: flex; justify-content: space-between; align-items: center}
#reminderModal  .modal-body .total-box p strong{font-size:20px;}
/**/


.contract-intro {user-select: none;}
.contract-intro h2 {color:#242424;font-size: 1.385em; font-weight: 700;}
.contract-intro .wrap {padding: 0px 20px;display: flex;flex-direction: column;gap: 24px;align-items: flex-start;justify-content: flex-start;position: relative;}
.contract-intro .choose-wrap  {display: flex;flex-direction: row;gap: 15px;align-items: flex-start;justify-content: flex-start;flex-wrap: wrap;align-content: flex-start;align-self: stretch;flex-shrink: 0;position: relative;}
.contract-intro .choose {transition: all 0.2s ease;background: #ffffff;border-radius: 20px;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;text-align: center;flex-shrink: 0;width: calc( ( 100% - 15px ) / 2 );aspect-ratio: 1/1.2;position: relative;overflow: hidden;}
.contract-intro .choose:hover {box-shadow: 4px 4px 21.3px 0px rgba(0, 0, 0, 0.07)}
.contract-intro i {font-size: 30px;}
.contract-intro img{width:60px;height:auto;}
.contract-intro p {font-size: 14px;font-weight: 600; margin:10px 0 0px}
.contract-intro h6 {color: #000000;font-size: 1.25em;font-weight: 700;}
.contract-intro .month p,.contract-intro .month i {color: #197ad8;}
.contract-intro .once p,.contract-intro .once i {color: #49a83c;}
.contract-intro .rent p,.contract-intro .rent i {color:  #d7980e;}
.contract-intro .cost p,.contract-intro .cost i {color: #666;}

.contract-photo {user-select: none;}
.contract-photo .wrap {padding: 0px 20px;display: flex;flex-direction: column;gap: 24px;align-items: flex-start;justify-content: flex-start;position: relative;}
.contract-photo .photo-wrap {border-radius: 20px;overflow: hidden; width: 100%; aspect-ratio: 9/16!important;}
.contract-photo .photo-wrap button {width: 100%}
.contract-photo .shutter {transition: all 0.2s ease;background: #006ffd;border-radius: 50px;padding: 10px;display: flex;flex-direction: column;gap: 0px;align-items: center;justify-content: center;width: 50px;height: 50px;box-shadow: 4px 4px 21.3px 0px rgba(129, 164, 210, 1);overflow: hidden;margin: 0 auto}
.contract-photo .shutter:hover {background: #0056c5;box-shadow: -4px 4px 21.3px 0px rgba(129, 164, 210, 1);}
.contract-photo .ellipse-1 {border-radius: 50%;border-style: solid;border-color: #ffffff;border-width: 1px;flex-shrink: 0;width: 36px;height: 36px;position: relative;}
.contract-photo .shutter-wrap {width: 100%}
.contract-photo p {text-align: center;color: #000000; margin-bottom: 10px; font-weight: 600}

.contract-form {width: 100%;padding: 0px 20px;}
.contract-form h2 {color:#242424;font-size: 1.385em; font-weight: 700; margin-bottom: 20px}
.contract-form .white-box > *  {width: 100%;}
.contract-form .input-wrap p {position: absolute; top: 10px; left: 12px; color: #8F9098; font-size: 1.2em}
.contract-form .input-wrap:has(p) input {padding-left: 25px}
/*.contract-form > form:has(input:focus) {padding-bottom: 80px}*/
/*
.contract-form > form > div:has(input:focus) .input-wrap:has(input:not(:focus)) {display: none;}
.contract-form .input-wrap:has(input:focus:not(:read-only)) + label {display: none;}
.contract-form > form > div:has(input:focus) .input-wrap:has(input:not(:focus)) ~ label {display: none;}
*/


.contract-done {user-select: none;}
.contract-done {max-width: 450px;opacity: 1;transition: opacity 0.3s ease!important;width: 100%;height: calc( 100vh - 90px );background: #F3F4F6; text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;}
.contract-done i{animation: rotate3D 2s linear 1;color: #006ffd;font-weight: 700; font-size: 100px}
.contract-done h1{color: #006ffd;font-weight: 700; font-size: 25px; margin-bottom: 10px}
.contract-done p{color: #242424;font-weight: 700; font-size: 1.154em}


/**/


.pay-main {user-select: none;height:100%;}
.pay-main .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;justify-content: flex-start;position: relative;}
.pay-main .box-line {overflow: hidden;display: flex;border-radius: 12px;padding: 15px;width: 100%;justify-content: space-between; align-items: center; color: #71727A}
.pay-main .contract-cont{padding:15px 15px 10px;background:#fff;border-radius:20px;margin-top:-10px;}
.pay-main .cont-info p{font-size:16px;}
.pay-main .cont-info .row{display:flex;gap:10px}
.pay-main .cont-money-info{display:flex;justify-content:space-between;padding:5px 0 0;font-weight:bold;font-size:20px;align-items:center;}
.pay-main .cont-money-info .title{font-size:14px;color:#888;font-weight:normal;}

.pay-main div.select {display: flex; gap: 10px;width:100%;}
.pay-main div.select label {width: 100%; border-radius: 7px}
.pay-main .count-box {width: 100%;position: relative; margin:10px auto;display: flex;flex-direction: column;align-items: center;justify-content: center}
.pay-main .count-box .speech-bubble {box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.25);position: absolute;top: -50px;left:50%;transform: translateX(-50%);background: #FFE9E9;padding: 10px 15px;border-radius: 10px;text-align: center;color: #A95A5C; width: fit-content; white-space: nowrap}
.pay-main .count-box .speech-bubble::after {box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.25);content: '';position: absolute;bottom: -10px;left:50%;transform: translateX(-50%);border-width: 10px 10px 0;border-style: solid;border-color: #FFE9E9 transparent;}
.pay-main .count-box p {color: #888; font-weight: 600; font-size: 1em}
.pay-main .count-box .money {margin-right: 28px;margin-bottom:5px;color: #000000; font-weight: 700; font-size: 24px; display: flex; align-items: center; gap: 0;line-height:40px;}
.pay-main .count-box .money input {height: 40px;line-height: 40px;text-align: right;color: #000000; font-weight: 700; font-size: 30px; padding: 0; background: #fff0!important; border-radius: 0!important;}
.pay-main .count-box .real-amt{font-weight:normal;color:#222;}
.pay-main .count-box .real-amt span{font-weight:bold;color:#006ffd;font-size:20px;padding:0 2px;transform:translateY(2px);display:inline-block;}
.keypad-box {position: fixed;bottom:0px;left:50%;transform: translateX(-50%);max-width: 450px;width: 100%;background:#fff;padding:10px 20px env(safe-area-inset-bottom);}
.keypad-box .btn-wrap{padding:10px 0 20px;}
.keypad-box .btn-wrap p{text-align:center;}
.keypad {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5px;margin: 0 auto;height: auto;}
.keypad button {background: #fff0;font-size: 24px;border: none;border-radius: 5px;color: #242424;cursor: pointer;transition: background-color 0.2s;height:45px;}
.keypad button.clear, .keypad button.backspace{font-size:16px;color:#888;}
.keypad button:hover {background-color: #6c757d20;}
.keypad button:active {background-color: #6c757d20}
#regCardModal .modal-body label {display: flex; gap: 15px; padding: 10px 15px; border-radius: 7px; border: 1px solid #eee; cursor: pointer; align-items: center; transition: all 0.3s ease}
#regCardModal .modal-body label i {font-size: 1.538em}
#regCardModal .modal-body label input {display: none}
#regCardModal .modal-body label:not(:last-child) {margin-bottom: 10px}
#regCardModal .modal-body label:has(:checked) {border:2px solid #006ffd; background: #006ffd10}
#regCardModal .modal-body a.btn-gray.w100 {margin-bottom: 10px}
#addCardModal .modal-body {display: flex;flex-direction: column;gap: 5px;align-items: flex-start;justify-content: flex-start;position: relative;}
#addCardModal .modal-body .flex + label {margin-top: 10px}
#addCardModal .modal-body > input + label {margin-top: 5px}
#addCardModal .modal-body .flex{gap: 5px; background: #f2f3f5; padding: 5px; border-radius: 7px;width: 100%}
#addCardModal .modal-body .flex > * {background: #f2f3f5; }
#addCardModal .modal-body .flex input {background: #f2f3f5; }
#addCardModal .modal-body > input {background: #f2f3f5; padding: 10px 5px!important; height: fit-content; border-radius: 7px}
#addCardModal .modal-body ul {margin-top: 10px;display: flex;flex-direction: column;gap: 10px;align-items: flex-start;justify-content: flex-start;position: relative;;width: 100%}
#addCardModal .modal-body ul li:not(:first-child) {display: flex;gap: 5px;align-items: center;width: 100%}
#addCardModal .modal-body ul li:not(:first-child) > input {margin-left: auto!important;}
#addCardModal .modal-body ul li:not(:first-child) > a {text-decoration: underline; color:#006ffd;font-size: 0.8em }
#addCardModal .modal-body ul li:first-child {width: 100%}
#addCardModal .modal-body ul li:first-child label {display: inline-block;background: #f2f3f5; padding: 5px; border-radius: 7px;width: 100%}
#addCardModal .modal-body ul li:first-child label:has(:checked) {background: #006ffd; color:#fff}
#termsOverlay {overflow: hidden;padding: 20px;border-radius: 20px 20px 0 0;position: fixed;top: 0;left: 50%;transform: translateX(-50%); max-width: 450px;width: 100%;height: 100%;background-color: #fff;z-index: 9999;display: flex;justify-content: center;transition: opacity 0.3s ease;}
#termsOverlay article {overflow: auto; max-height: 85vh; margin-top: 20px; word-break: break-all}
#termsOverlay article .terms_wrap{padding-right: 5px}
#termsOverlay article .item{margin-bottom: 20px;}
#termsOverlay article .con{padding: 10px 0;}
#termsOverlay article td{vertical-align: top;}ol{margin: 6px 0 10px;padding-left: 18px;color: #444;}
#termsOverlay article ol.circle{padding-left:0;list-style: none;}
#termsOverlay article ol.circle > li{counter-increment:circle-counter;padding-left: 18px;position: relative;}
#termsOverlay article ol.circle > li:before{content: counter(circle-counter);background:none;width: 12px;height: 12px;border-radius: 50%;display: inline-block;font-size: 9px;line-height: 12px;color: #666;text-align: center;margin-right: 0;position: absolute;top: 1px;left: 0;border:1px solid #888;}
#termsOverlay article ol.circle > li > span{display: inline-block;margin-top: -3px;}
#termsOverlay article ol.bracket_r{counter-reset: bracket_r;list-style: none;}
#termsOverlay article ol.bracket_r > li:before{counter-increment: bracket_r;content: counter(bracket_r) ") ";}
#termsOverlay article ol.hangul{list-style: hangul;padding-left: 18px;}
#termsOverlay article ol.hangul-consonant{list-style: hangul-consonant;padding-left: 10px;}
#termsOverlay article ol.upper-alpha{list-style: upper-alpha;}
#termsOverlay article ol li{margin-bottom: 6px;}
#termsOverlay article ul{padding-left:16px;margin-top: 6px;list-style: disc;}
#termsOverlay article ul li{margin-bottom: 4px;}
#termsOverlay article ul li::marker{color: #aaa;}
#termsOverlay article .important_text{color: #0d47b4; font-size: 1.154em; font-weight: bold;}
#termsOverlay article p{color: #000; text-align: left;}

.pay-result {user-select: none;}
.pay-result .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative;}
.pay-result .wrap > div {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.pay-result .result-box {max-width: 450px;opacity: 1;transition: opacity 0.3s ease!important;width: 100%; text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;margin-top;30px;}
.pay-result .result-box.success i{animation: gelatine 0.5s 1;color: #006ffd;font-weight: 700; font-size: 100px}
.pay-result .result-box.success h1{color: #006ffd;font-weight: 700; font-size: 25px; margin-bottom: 10px}
.pay-result .result-box.fail i{animation: fade-in-down 2s ease 1;color: #fd0000;font-weight: 700; font-size: 100px}
.pay-result .result-box.fail h1{color: #fd0000;font-weight: 700; font-size: 25px; margin-bottom: 10px}
.pay-result .result-box h6{color: #242424;font-weight: 700; font-size: 1.385em}
.pay-result .result-box p{color: #939393; font-size: 1.154em}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.pay-list .wrap {padding: 0px 20px;display: flex;flex-direction: column;gap: 12px;align-items: flex-start;justify-content: flex-start;position: relative;}
.pay-list .btn-wrap {display: flex; gap: 0px; align-items: center; width: 100%; position: fixed; bottom:0; left: 50%; transform: translateX(-50%); max-width: 450px}
.pay-list .btn-wrap .btn{border-radius: 0}
.pay-list .noti-box {border-radius: 20px;padding: 15px; width: 100%; display: flex; gap: 10px; align-items: center}
.pay-list .noti-box i {font-size: 25px;color: #006ffd;}
.pay-list .noti-box p {color: #00000050; font-weight: 600; text-align: left}
.pay-list .cont-box {width: 100%}
.pay-list .cont-box .box-line{border-radius: 20px;padding: 15px; width: 100%}
.pay-list .cont-box ul {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;border-radius: 20px; width: 100%; padding-bottom: 50px}
.pay-list .cont-box ul li {width: 100%; }
.pay-list .cont-box ul.active { padding-bottom: 120px}
.pay-list .cont-box ul.active li {cursor: pointer}
.pay-list .cont-box ul.active li label {cursor: pointer}
.pay-list .cont-box ul.active li label > div {margin-bottom: 0;}
.pay-list .cont-box ul.active li:has(:checked) {border:2px solid #006ffd; background: #006ffd10}
.pay-list .cont-box ul.active li:has(:disabled) {opacity: 0.3}
.pay-list .cont-box ul li label input {display: none}
.pay-list .cont-box ul li .btn-box {display: flex; gap: 10px; align-items: center; width: 100%;}
.pay-list .cont-box ul li .btn-box .btn {width: 100%;}
.pay-list .cont-box ul li label > div {width: 100%; row-gap: 10px; display: grid; grid-template-columns: repeat(2, 1fr); padding: 10px; border-radius: 8px; background: #f3f3f3; margin: 10px 0}
.pay-list .cont-box ul li label > div p:nth-child(even) {text-align: right}
.pay-list .total-box {width: 100%;position: fixed; bottom:47.59px; left: 50%; transform: translateX(-50%); max-width: 450px; padding: 15px; text-align: center; background: #f0f7ff}

.remit-main {user-select: none;}
.remit-main h6 {width: 100%}
.remit-main ul {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;border-radius: 20px; width: 100%;}
.remit-main ul li {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #fff;border-radius: 20px;padding: 20px 15px 15px; width: 100%}
.remit-main ul li > * {width: 100%}
.remit-main ul li > h5 {text-align: right; font-weight: 800}
.remit-main ul li > div {width: 100%; row-gap: 10px; display: grid; grid-template-columns: repeat(2, 1fr); padding: 10px; border-radius: 8px; background: #f3f3f3; margin: 5px 0 0}
.remit-main ul li > div p:nth-child(even) {text-align: right}
.remit-main .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative;}
.remit-main .wrap > div {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.remit-main .wrap > div > div {width: 100%}
.remit-main ~ .flatpickr-calendar {left: unset!important;right: unset!important;width: 100%}
.remit-main ~ .flatpickr-calendar .flatpickr-current-month{display: flex;flex-direction: row-reverse;justify-content: center;left: unset;padding: unset;width: 100%;}
.remit-main ~ .flatpickr-calendar .flatpickr-current-month input.numInput.cur-year {line-height: 1.8em;}
.remit-main ~ .flatpickr-calendar .flatpickr-innerContainer{width: 100%}
.remit-main ~ .flatpickr-calendar .flatpickr-rContainer{width: 100%}
.remit-main ~ .flatpickr-calendar .flatpickr-days{width: 100%}
.remit-main ~ .flatpickr-calendar .dayContainer{width: 100%;max-width: unset}
.remit-main ~ .flatpickr-calendar .flatpickr-day {width: calc(100% / 7);max-width: unset;}
.remit-main .switcher-wrap {background: #f3f4f6;border-radius: 20px;padding: 5px 8px 5px 8px;display: flex;flex-direction: row;gap: 7px;align-items: center;justify-content: center;align-self: stretch;flex-shrink: 0;position: relative;overflow: hidden;}
.remit-main .switcher-wrap > div {cursor: pointer;border-radius: 12px;padding: 5px 12px 5px 12px;display: flex;flex-direction: row;gap: 5px;align-items: center;justify-content: center;width: 100%;}
.remit-main .switcher-wrap > div.active {background: #ffffff;}
.remit-main .switcher-wrap > div.active p {color: #006ffd;font-weight: 700;}
.remit-main .switcher-wrap > div span {display: block;line-height: 13px;color: #BABBC0;}
.remit-main .switcher-wrap > div p {line-height: 13px;color: #1f2024;font-weight: 700;}
.remit-main .switcher-wrap > .fa-pipe {color: #1f2024;}
/**/
.receipt-main {user-select: none;}
.receipt-main .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative;}
.receipt-main .wrap > div {position: relative;background:#fff;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;padding: 20px 15px 20px 15px; width: 100%}
.receipt-main .wrap > div:before {content: '';position: absolute;top: -10px;left: 0;width: 100%;height: 10px;background: radial-gradient(circle at 10px 10px, transparent 10px, #fff 10px);background-size: 20px 20px;background-position: -10px -10px;}
.receipt-main .wrap > div:after {content: '';position: absolute;bottom: -10px;left: 0;width: 100%;height: 10px;background: radial-gradient(circle at 10px 10px, transparent 10px, #fff 10px);background-size: 20px 20px;background-position: -10px -10px;transform: rotate(180deg);}
.receipt-main .wrap > div > div {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;padding: 5px 0 15px; width: 100%}
.receipt-main .wrap > div > div:not(:last-child) {border-bottom: 1px dashed #eee}
.receipt-main .wrap div > * {width: 100%}
.receipt-main .wrap div h6 {text-align: right}

/**/


.faq-list .tab-container {overflow-y: hidden;overflow-x: auto;white-space: nowrap;width: 100%;-webkit-overflow-scrolling: touch;touch-action: pan-x;}
.faq-list .tabs {display: inline-flex;min-width: max-content;border-bottom: 1px solid #ddd;}
.faq-list .tab {cursor: pointer;font-weight: 500;color: #aaa;position: relative;white-space: nowrap;font-size: 1.125em;padding: 15px;}
.faq-list .tab.active {color: #000;font-weight: 700;}
.faq-list .tab.active::after {content: "";position: absolute;bottom: -2px;left: 0;right: 0;height: 2px;background: #000;}
.faq-list .tab-contents {padding-top: 20px;}
.faq-list .tab-content {display: none;padding: 0 20px}
.faq-list .tab-content.active {display: block;}

.accordion-item{background:#fff;border-radius:20px;}
.accordion-item + .accordion-item {margin-top: 20px;}
.accordion-header {background: none;border: none;padding: 20px;width: 100%;text-align: left;font-size: 1.125em;font-weight: 600;cursor: pointer;display: flex;justify-content: space-between;align-items: center;background-color: #fff;border-radius: 20px;}
.accordion-icon {transition: transform 0.3s ease;}
.accordion-item.open .accordion-icon {transform: rotate(180deg);}
.accordion-body {max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease;padding: 0 20px;background-color: #fff;border-radius: 20px}
.accordion-body img {max-width: 100%}
.accordion-item.open .accordion-body {max-height: 100vh;padding:0 20px 20px;}


/**/


.notice-list {user-select: none;}
.notice-list .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: center;justify-content: flex-start;position: relative;}
.notice-list .wrap > a {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 5px;background: #fff;border-radius: 20px;padding: 20px; width: 100%}
.notice-list .wrap > a > div {display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.125em; width: 100%}
.notice-list .wrap > a > span {color: #999;font-size:14px;}
.notice-view .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 20px;align-items: flex-start;justify-content: flex-start;position: relative;}
.notice-view .wrap .cont-box  {background: #fff;border-radius: 20px;padding: 20px; width: 100%;font-size:max(20px);}
.notice-view .wrap .cont-box *{font-size:max(20px);}
.notice-view .wrap .cont-box img {max-width: 100%}
.notice-view .wrap .cont-box p:has(br){height:10px;}
.notice-view .wrap h5 {word-break: break-all;}


/**/


.board-list {user-select: none;}
.board-list .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative;}
.board-list .wrap > a  {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #fff;border-radius: 20px;padding: 15px; width: 100%}
.board-list .wrap > a > div {display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.385em; width: 100%}
.board-list .wrap > a > span {color: #8F9098}
.board-list .wrap > a > span i {margin: 0 3px; font-size: 0.8em}
.board-list .plus {transform-style: preserve-3d;transition: all 0.7s ease;white-space: nowrap;color: #fff;background: #006ffd;border-radius: 50px;padding: 10px;display: flex;flex-direction: column;gap: 0px;align-items: center;justify-content: center;width: 50px;height: 50px;position: fixed;bottom: 20px;right: max(calc((100vw - 600px)/2 + 100px), 20px);box-shadow: 4px 4px 21.3px 0px rgba(129, 164, 210, 1);overflow: hidden;}
.board-list .plus:hover {background: #242424;transform: perspective(300px) rotateY(360deg);}
.board-list .plus i {font-size: 1.538em}
.board-list .plus p {font-size: 10px}

.board-view .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative;}
.board-view .wrap .cont-box  {background: #fff;border-radius: 20px;padding: 15px; width: 100%}
.board-view .wrap .cont-box img {max-width: 100%}
.board-view .wrap > p i {margin: 0 3px; font-size: 0.8em; opacity: 0.3}

.comment-section {margin-top: 20px;width: 100%;}
.comment-input {display: flex;flex-direction: column;gap: 8px;}
.comment-input textarea {width: 100%;height: 60px;border-radius: 10px;border: 1px solid #ccc;padding: 10px;resize: none;font-size: 1.077em;}
.comment-input button {align-self: flex-end;padding: 6px 12px;border: none;background-color: #333;color: white;border-radius: 6px;cursor: pointer;font-size: 1.077em;}
.comment-list {margin-top: 20px;}
.comment-box {background: #f9f9f9;padding:15px;border-radius: 20px;margin-bottom: 12px;}
.comment-box .meta {font-size: 12px;color: #777;margin-bottom: 6px;}
.comment-box .text {font-size: 1.077em;}
.comment-box .reply {margin-left: 20px;position: relative}
.comment-box .reply:before {position: absolute;top: 0;left: -15px;content: "\f3e5";font-family: "Font Awesome 6 Pro";display: block; transform: rotate(180deg); opacity: 0.5}
.comment-box > div:not(:last-of-type) {margin-bottom: 10px}

.board-form .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative;}
.board-form input {width: 100%;border-radius: 10px;border: 1px solid #ccc;padding: 10px;resize: none;font-size: 1.077em;height: 40px}
.board-form textarea {width: 100%;min-height: 60vh;border-radius: 10px;border: 1px solid #ccc;padding: 10px;resize: none;font-size: 1.077em;}
.board-form .upload-box {width: 100%;border-radius: 10px;background: #fff;border: 1px dashed #aaa;padding: 20px;text-align: center;cursor: pointer;}
.board-form .preview-area {display: flex;flex-wrap: wrap;margin-top: 0px;gap: 10px;}
.preview-area .img-wrap {position: relative;width: 80px;height: 80px;}
.board-form .preview-area img {width: 80px;height: 80px;object-fit: cover;border: 1px solid #ccc;border-radius: 4px;}
.board-form .preview-area .remove-btn {position: absolute;top: 4px;right: 4px;background: rgba(0,0,0,0.6);color: #fff;border: none;border-radius: 50%;width: 20px;height: 20px;font-size: 1.077em;cursor: pointer;line-height: 20px;text-align: center;}
.board-form input[type="file"] {display: none;}


/**/


.mypage-main {user-select: none;}
.mypage-main .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.mypage-main .wrap:last-child{border:none;}
.mypage-main .box-line2 {width: 100%;overflow: hidden;display: flex;border-radius: 20px;gap: 10px;padding: 20px 15px;justify-content: space-between; align-items: center; color: #71727A}
.mypage-main .box-line2 h5 {color: #222;font-size:20px;}
.mypage-main .box-line2 a {margin-left: auto}
.mypage-main .box-line2 i {font-size: 30px; color: #ccc;}
.mypage-main .grid {width: 100%; gap: 20px}
.mypage-main .grid.grid2 a {color: #707070; display: flex; align-items: center; justify-content: space-between}
.mypage-main .grid.grid2 a:after {content: "\f054";font-family: "Font Awesome 6 Pro";display: inline-block;}
.mypage-main a.box-blue {border-radius: 20px;padding: 10px 20px; width: 100%;color: #fff;display: flex;gap: 10px;align-items: center;justify-content: space-between;}
.mypage-main a.box-blue i {font-size: 30px}
.mypage-main a.box-blue img{width:80px;}

.mypage-main .wrap > a.flex {gap: 10px;align-items: center;width: 100%}
.mypage-main .wrap > a.flex h6 {color: #000000;text-align: left;}
.mypage-main .wrap > a.flex h6.none {color: #adadad;text-align: left; font-weight: 400}
.mypage-main .wrap > a.flex p {color: #8f9098;text-align: left;}
.mypage-main .wrap > a.flex > span  {height: 40px;line-height: 40px;font-size: 1em;color: #006ffd;background: rgba(0, 111, 253, 0.04);border-radius: 20px;padding: 10px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;align-self: stretch;flex-shrink: 0;position: relative;overflow: hidden;}
.mypage-main .wrap > a.flex > * ~ span  {margin-left: auto;}
.mypage-main .wrap > a.flex > span + *  {margin-left: auto;}
.mypage-main .wrap > a.flex:not(:has(span)):after{margin-left: auto;}
.mypage-main .wrap > a.flex:after {content: "\f054";font-family: "Font Awesome 6 Pro";display: inline-block;color: #707070;}
.mypage-main .wrap > ul {width: 100%}
.mypage-main .wrap > ul li {width: 100%}
.mypage-main .wrap > ul li.empty {padding:6% 0 8%!important;}
.mypage-main .wrap > ul li:not(:last-of-type) {margin-bottom: 15px}
.mypage-main .wrap > ul li a {display: grid; grid-template-columns: 50px 1fr 110px;width: 100%}
.mypage-main .wrap > ul li a p {color: #8f9098;}
.mypage-main .wrap > ul li a .date {color: #8f9098;font-weight: 700}
.mypage-main .wrap > ul li a .text {display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;word-break: break-all;white-space: nowrap;}
.mypage-main .wrap > ul li a .text h6 {font-weight: 700;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.mypage-main .wrap > ul li a .pay {text-align: right}
.mypage-main .wrap > ul li a .pay h6{color: #006ffd;font-weight: 600}

@media (max-width: 400px) {
    .mypage-main .wrap > ul li a {grid-template-columns: 50px 1fr;}
    .mypage-main .wrap > ul li .pay {grid-column: 1 / 4;display: flex;flex-direction: column-reverse}
}


/**/


.profile-box {width: 100%;padding: 0px 20px;}
.profile-box .input-wrap a {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #8F9098; font-size: 1.154em}

/**/


.mypage-contract {user-select: none;}
.mypage-contract .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.mypage-contract .noti-box {border-radius: 20px;padding: 15px; width: 100%; }
.mypage-contract .noti-box > h7{display: flex; gap: 5px;color:#222;align-items:flex-start;font-weight:bold;}
.mypage-contract .noti-box i {font-size: 20px;color: #adadad;margin-top:4px;}
.mypage-contract .noti-box p.text-sm {color: #888; font-weight: 400;margin-top:10px;}
.mypage-contract .cont-box {border-radius: 20px;padding: 15px; width: 100%}
.mypage-contract .switcher-wrap {background: #eaebec;}
#menuModal .modal-body {padding-top: 0;}
#menuModal button + button {margin-top: 10px}


.contract-view {user-select: none;}
.contract-view .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6;}
.contract-view .wrap > div:not(.box-red) {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.contract-view .wrap > div.box-red {display: flex;flex-direction:column;gap: 10px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.contract-view .wrap > div.box-red > *:not(.btn) {color: #222;}
.contract-view .wrap > div.box-red h6 {margin-bottom: 5px;color:#fd0000;display:flex;align-items:center;gap:5px;}
.contract-view .wrap > div.box-red .btn{width:100%;}
.contract-view .wrap > .contract-box {margin:0;}
.contract-view form {width: 100%;}
.contract-view .input-wrap p {position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #8F9098; font-size: 1.154em}
.contract-view .input-wrap:has(p) input {padding-left: 25px}
.contract-view .contract-box .cont-info h6:empty:after {content: '별칭 없음'; display: inline-block}
#contractImgModal .modal-body{}
#contractImgModal img{width:100%;height:auto;}


/**/
.mypage-card {user-select: none;}
.mypage-card .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.mypage-card .cont-box {border-radius: 20px;padding: 15px; width: 100%}
.mypage-card .card-cont li:not(:last-of-type){padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #eeeeee;}
.mypage-card .card-cont .cont-info {width: 100%;display: flex;gap: 3px;align-items: center;justify-content: flex-start;align-self: stretch;flex-shrink: 0;position: relative;}
.mypage-card .card-cont .cont-info p {color: #a6a6a6;font-size: 1em; margin-top: 5px}
.mypage-card .card-cont .cont-info h6 {color: #242424;font-size: 1.154em;font-weight: 800}
.mypage-card .card-cont .cont-info h6 span {margin-right: 5px;color: #006ffd;background: rgba(0, 111, 253, 0.04);border-radius: 10px;padding: 5px 10px 5px 10px;display: inline-flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;align-self: stretch;flex-shrink: 0;position: relative;overflow: hidden;}
.mypage-card .card-cont .text {cursor: pointer}
.mypage-card .card-cont .more {transition: all 0.2s ease;margin-left: auto;background: #ffffff;border-radius: 50px;border-style: solid;border-color: #f2f2f2;color: #ddd;border-width: 0.5px;display: flex;flex-direction: row;gap: 10px;align-items: center;justify-content: center;flex-shrink: 0;width: 38px;height: 38px;position: relative;overflow: hidden;aspect-ratio: 1;}
.mypage-card .card-cont .more:hover {background: #f8f8f8;color: #333}
.mypage-card .empty i {display: block; font-size: 35px;margin-bottom: 10px}

.card-form {width: 100%;padding: 0px 20px;}
.card-form h2 {color:#242424;font-size: 1.385em; font-weight: 700; margin-bottom: 20px}
.card-form > form > div{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.card-form > form > div > *  {width: 100%;}
.card-form .input-wrap {display: flex; align-items: center; gap: 5px}
.card-form button { position: fixed; width: calc( 100% - 40px ); bottom: 20px; max-width: 410px; left: 50%; transform: translateX(-50%)}
.card-form #agree ~ label {color: #71727A; cursor: pointer}


/**/

.mypage-send .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.mypage-send .wrap ul.send-box {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 0px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.mypage-send .wrap ul li {width: 100%}
.mypage-send .wrap ul li:not(:last-of-type){padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #eeeeee;}
.mypage-send .wrap ul li a + div.flex {padding-top: 5px;margin-top: 5px;border-top: 1px dashed #eeeeee;}
.mypage-send .wrap ul li a {display: grid; grid-template-columns: 50px 1fr 110px;width: 100%}
.mypage-send .wrap ul li a p {color: #8f9098;}
.mypage-send .wrap ul li a .date {color: #8f9098;font-weight: 700}
.mypage-send .wrap ul li a .text {display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;word-break: break-all;white-space: nowrap;}
.mypage-send .wrap ul li a .text h6 {font-weight: 700;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.mypage-send .wrap ul li a .pay {text-align: right}
.mypage-send .wrap ul li a .pay h6{color: #006ffd;font-weight: 600}
.mypage-send form {width: 100%;}

.search-container {margin-top: -15px;background-color: white;padding:0 20px;border-radius: 20px;width: 100%;max-height: 0; overflow: hidden;transition: all 0.3s ease-in-out; }
.search-container > div {width: 100%;display: flex;flex-direction: column;gap: 20px;align-items: flex-start;justify-content: flex-start;position: relative;margin-bottom: 30px}
.search-container > div div {width: 100%;display: flex;gap: 5px;}
.search-container.open {max-height:unset;height:auto;padding: 20px;margin-top: 0;}
.search-container h3 {font-size: 1.385em;margin: 0 0 15px;color: #333;}
.search-container input[type="date"] {width: 48%;display: inline-block;}
.search-container input[type="date"] + .search-container  input[type="date"] {margin-left: 4%;}

.send-view .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.send-view .send-result {background: #f2f3f5;border-radius: 8px;padding: 15px;display: flex;gap: 10px;align-items: flex-start;justify-content: space-between;align-self: stretch;flex-shrink: 0;position: relative;box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.25);}
.send-view .send-result > div {text-align: right}
.send-view .send-result h6 {font-size: 1.154em}
.send-view .send-result p {opacity: 0.5;}
.send-view .send-result.done {background: #dff9ff;}
.send-view .send-info{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #f2f3f5;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.send-view .send-info div{width: 100%}
.send-view .input-wrap p{position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #8F9098; font-size: 1.154em}
.send-view .input-wrap:has(p) input {padding-left: 25px}
.send-view .wrap > ul {width: 100%}
.send-view .wrap > ul li {width: 100%}
.send-view .wrap > ul li:not(:last-of-type) {margin-bottom: 15px}
.send-view .wrap > ul li a {display: grid; grid-template-columns: 50px 1fr 110px;width: 100%}
.send-view .wrap > ul li a p {color: #8f9098;}
.send-view .wrap > ul li a .date {color: #8f9098;font-weight: 700}
.send-view .wrap > ul li a .text {display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;word-break: break-all;white-space: nowrap;}
.send-view .wrap > ul li a .text h6 {font-weight: 700;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.send-view .wrap > ul li a .pay {text-align: right}
.send-view .wrap > ul li a .pay h6{color: #006ffd;font-weight: 600}

/**/

.mypage-pay .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.mypage-pay .wrap ul.send-box {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 0px;background: #fff;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.mypage-pay .wrap ul li {width: 100%}
.mypage-pay .wrap ul li:not(:last-of-type){padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #eeeeee;}
.mypage-pay .wrap ul li a + div.flex {padding-top: 5px;margin-top: 5px;border-top: 1px dashed #eeeeee;}
.mypage-pay .wrap ul li a {display: grid; grid-template-columns: 50px 1fr 110px;width: 100%}
.mypage-pay .wrap ul li a p {color: #8f9098;}
.mypage-pay .wrap ul li a .date {color: #8f9098;font-weight: 700}
.mypage-pay .wrap ul li a .text {display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;word-break: break-all;white-space: nowrap;}
.mypage-pay .wrap ul li a .text h6 {font-weight: 700;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.mypage-pay .wrap ul li a .pay {text-align: right}
.mypage-pay .wrap ul li a .pay h6{color: #006ffd;font-weight: 600}
.mypage-pay form {width: 100%;}

.pay-view .wrap {width: 100%;padding: 0px 20px;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;justify-content: flex-start;position: relative; border-bottom: 4px solid #f3f4f6; margin-bottom: 20px; padding-bottom: 20px;}
.pay-view .send-result {background: #f2f3f5;border-radius: 8px;padding: 15px;display: flex;gap: 10px;align-items: flex-start;justify-content: space-between;align-self: stretch;flex-shrink: 0;position: relative;box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.25);}
.pay-view .send-result > div {text-align: right}
.pay-view .send-result h6 {font-size: 1.154em}
.pay-view .send-result p {opacity: 0.5;}
.pay-view .send-result.cancel {background: #ffdfdf;}
.pay-view .send-info{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 10px;background: #f2f3f5;border-radius: 20px;padding: 20px 15px 20px 15px; width: 100%}
.pay-view .send-info div{width: 100%}
.pay-view .input-wrap p{position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #8F9098; font-size: 1.154em}
.pay-view .input-wrap:has(p) input {padding-left: 25px}
.pay-view .wrap > ul {width: 100%}
.pay-view .wrap > ul li {width: 100%}
.pay-view .wrap > ul li:not(:last-of-type) {margin-bottom: 15px}
.pay-view .wrap > ul li a {display: grid; grid-template-columns: 50px 1fr 110px;width: 100%}
.pay-view .wrap > ul li a p {color: #8f9098;}
.pay-view .wrap > ul li a .date {color: #8f9098;font-weight: 700}
.pay-view .wrap > ul li a .text {display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;word-break: break-all;white-space: nowrap;}
.pay-view .wrap > ul li a .text h6 {font-weight: 700;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.pay-view .wrap > ul li a .pay {text-align: right}
.pay-view .wrap > ul li a .pay h6{color: #006ffd;font-weight: 600}