@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
html,body,p,ul,ol,header,footer,h1, h2, h3, h4, h5, h6 {margin:0;padding:0}
html,body {font-size:16px;line-height:16px}
html, body {overflow-x:hidden;overflow-y:auto}
html,body {position:relative;min-height:100vh;color: #222;font-family:"Noto Sans KR",serif;font-weight:400;/* Noto Sans KR Regular */background-color:#fff;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;}
br {font-family:Verdana, Tahoma, sans-serif}
ul,ol {list-style:none}
a {color:inherit;text-decoration:none}
button {background:none;border:none;padding: 0;}
::-webkit-input-placeholder { /* Edge */color: #999;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #999;}
::placeholder {color: #999;}
input[type="radio"] {width:0;height:0;opacity:0;position:absolute;}
input[type="checkbox"] {width:0;height:0;opacity:0;position:absolute;}

.home,.logout,.linkPassword {display:inline-block;color:#222;font-size:.875rem;font-weight: bold;vertical-align:middle;}
.home {font-family: 'Roboto', sans-serif;}
.home::before,.logout::before,.linkPassword::before,.goPrev::before {content:"";display:inline-block;vertical-align: sub;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;}
.home {line-height:1.125em;}
.home::before {width:15px;height:18px;margin-right:7px;background-position:0 0;}
.logout,.linkPassword {line-height:1.063rem;letter-spacing: -1px;}
.logout::before {width:17px;height:18px;background-position:-75px -25px;margin-right: 8px;}
.logout {margin-left: 31px;}
.linkPassword::before {width:16px;height:17px;background-position:-25px 0;margin-right:9px;}
.goPrev {position:absolute;left:20px;top:50%;margin-top:-16px;color: transparent;font-size:0;width:32px;height:32px;}
.goPrev::before {width:25px;height:12px;background-position:-50px 0;}
.goPrev:disabled {opacity:.3;}
.menuBtn {position:absolute;right:20px;top:50%;margin-top:-8px;width:19px;height:16px;color: transparent;font-size:0;}
.menuBtn::before,.menuBtn::after {content:"";position:absolute;left:0;right:0;height:2px;border-radius:1px;background-color:#000;}
.menuBtn::before {top:0;}
.menuBtn::after {bottom:0;}
.menuBtn i {position:absolute;width:60.5%;height:2px;border-radius:1px;background-color:#000;left:0;top:50%;margin-top:-1px;}
.menuBtn:disabled {opacity:.3;}

header {position:fixed;left:0;right:0;top:0;height:6.4vh;padding:0 50px;background-color:rgba(255,255,255,1);z-index:900;}
header h1 {color:#000;font-size:1.063rem;line-height:6.4vh;text-align:center;}
header .logo {position:absolute;left:20px;top:50%;display:inline-block;width:84.5px;height:26px;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-200px 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
header .logo h1 {color: transparent;font-size: 0;line-height:0;}

/* 메뉴 */
.navigation {position:fixed;top:0;bottom:0;left:100%;right:-100%;background-color:rgba(0,0,0,.8);z-index:1000;height:100vh;}
.navWrap {position:relative;background-color:#FFF;border-radius:20px 0 0 20px;margin-left: 14vw;height:100vh;}
.navHead {position:relative;height: 14vh;padding-left: 8vw;padding-right:6.6vw;padding-top: 6vh;}
.navHead .navClose:before,
.navHead .navClose:after {content:'';position: absolute;top: 50%;left: 0;margin-top: -1px;display:block;width: 100%;height: 2px;background: #000;}
.navHead .navClose:before {transform:rotate(45deg)}
.navHead .navClose:after {transform:rotate(-45deg)}
.navHead .navClose {display:block;position:absolute;top: 50%;right: 20px;width: 20px;height: 20px;color:#fff;background:none;border:0;margin-top: -10px;}
.navFooter {position:absolute;left:0;right:0;bottom:0;padding-left: 7.6vw;height:23vh;}
.navFooter p {color:#000;font-size:.75rem;line-height:2rem;margin-top: 10px;}
.navFooter p span {font-family: 'Roboto', sans-serif;letter-spacing: 0;}

.menuWrap {overflow-y:auto;overflow-x:hidden;padding: 0;margin-right:7.2vw;background:#fff;padding-left: 7.6vw;height:calc(100vh - 38vh);overflow-y:scroll;}
.menuWrap {-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
.menuWrap::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
ul.menuTree {}
ul.menuTree > li:after {content:'';display:block;clear:both;}
ul.menuTree > li {padding: 0 0 20px;}
ul.menuTree > li > i {display:block;width:100%;font-size:1rem;line-height:1.625rem;font-style:normal;font-weight:600;color:#999;}
ul.menuTree > li > strong,ul.menuTree > li > a {display:block;font-size: 1.250rem;line-height: 2.0rem;font-weight: bold;position: relative;}
ul.menuTree > li > strong i {display:inline-block;width:15px;height:15px;position: absolute;right: 0;top: 50%;background-color:#FFF;transition:transform 0.5s, margin-top 0.5s;margin-top: -8px;}
ul.menuTree > li > strong i::after {content:"";display:block;width: 10px;height: 10px;border-left: 3px solid #cecece;border-bottom: 3px solid #cecece;transform: rotate(-45deg);}
ul.menuTree > li > ul {display:none;margin-top: 3%;margin-left: 7%;}
ul.menuTree > li > ul > li {padding: 8px 0;}
ul.menuTree > li > ul a {font-size: 0.938rem;line-height: 0.938rem;}
ul.menuTree > li.on > strong i {transform: rotateX(180deg);margin-top:-3px;}
ul.menuTree li.depth01 {padding-top:0;}
ul.menuTree li.on ul {display:block;}
ul.menuTree li.on a.current {color:#ff6c46;}

i.icon {display:inline-block;width:20px;height:19px;margin-right:18px;vertical-align:middle;background:url('/images/smartmoneyon/sprite.png') 0 0 no-repeat;background-size:400px 200px;margin-top: -2px;}
.icon.menu11 {background-position:0 -100px;}
.icon.menu12 {background-position:-25px -100px;}
.icon.menu13 {background-position:-50px -100px;}
.icon.menu14 {background-position:-75px -100px;}
.icon.menu21 {background-position:-100px -100px;}
.icon.menu22 {background-position:-125px -100px;}
.icon.menu23 {background-position:-150px -100px;}
.icon.menu31 {background-position:-175px -100px;}
.icon.menu32 {background-position:-200px -100px;}
.icon.menu41 {background-position:-225px -100px;} /*2020-06-04 추가*/

.current .icon.menu11 {background-position:0 -125px;}
.current .icon.menu12 {background-position:-25px -125px;}
.current .icon.menu13 {background-position:-50px -125px;}
.current .icon.menu14 {background-position:-75px -125px;}
.current .icon.menu21 {background-position:-100px -125px;}
.current .icon.menu22 {background-position:-125px -125px;}
.current .icon.menu23 {background-position:-150px -125px;}
.current .icon.menu31 {background-position:-175px -125px;}
.current .icon.menu32 {background-position:-200px -125px;}
.current .icon.menu41 {background-position:-225px -125px;} /*2020-06-04 추가*/


.hline {margin:20px 0;height:1px;background-color:#ececea;}
.sectionWrap {padding:6.4vh 25px 6.7vh;}
section.searchArea {margin-top:22px;}
section h1 {font-size:0.938rem;font-weight:bold;line-height:30px;}
.section {margin-top:42px;}
.section h1 {margin-bottom:10px;}

.inp_date {height:40px;width:45%;border-bottom:1px solid #ececea;}
.inp_date::before {content:"";display:inline-block;width:16px;height:17px;margin-right:7px;vertical-align:middle;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:0 -25px;}
.selectWrap {position:relative;height:35px;border:1px solid #ececea;border-radius:10px;}
.selectWrap::after {content:"";position:absolute;right:12px;top:50%;margin-top: -5.5px;width:5px;height:5px;border-left: 1.5px solid #cfcfcf;border-bottom: 1.5px solid #cfcfcf;transform: rotate(-45deg);}
.selectWrap select {width:100%;height:31px;padding-left:15px;color:#000;font-size:.875rem;background-color:transparent;border:none;
border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/}
.select_item2 {display: flex;justify-content: space-between;}
.select_item2 .selectWrap {width:48% !important;}
.inp_txt {height:35px;color:#000;font-size:.875rem;text-align:left;border:1px solid #ececea;border-radius:10px;padding:0 15px;}

.periodBtn {display:inline-block;width: 23%;height:29px;color:#222;font-size:0.75rem;font-weight:bold;text-align:center;border-radius:20px;background-color:#fff;border:1px solid #ededeb;}
.periodBtn.on {color:#ff6c46;border-color:#ff6c46;box-shadow: 3px 3px 6px #d9d9d9;}
.detailBtn {display:inline-block;width:115px;height:40px;color:#ff6c46;font-size:.875rem;font-weight:bold;text-align:center;border-radius:20px;background-color:#fef0eb;}
.detailBtn::after {content:"";display:inline-block;width:20px;height:19px;margin-left:8px;vertical-align:top;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-50px  -25px;}
.smallBlue {height:20px;padding:0 11px;color:#fff;font-size:0.625rem;font-weight:bold;background-color:#3147ff;border-radius:10px;line-height:20px;}
.alarmBtn {display:inline-block;width:115px;height:40px;color:#ff6c46;font-size:.875rem;font-weight:bold;text-align:center;border-radius:20px;background-color:#fef0eb;float: right;}
.alarmBtn::after {content:"";display:inline-block;width:20px;height:19px;margin-left:8px;vertical-align:top;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-25px  -25px;}
.alarmBtn:disabled {color:#000;background-color:#f6f6f6;}
.btnMore {display:block;margin-top:15px;width:100%;height: 45px;color: #666;font-size: .875rem;background-color: #fff;border-radius: 10px;border:1px solid #ececea;}

.toggleWrap {display:none;padding-bottom:20px;}
.toggleWrap .field {padding-right:33px;}

.field {position:relative;display: flex;}
.field + .field {margin-top:10px;}
.field .m_dash {width:10%;text-align:center;color:#e0e0e0;font-size:0.938rem;font-family: 'Roboto', sans-serif;line-height:39px;}
.field > .inp_txt {width:100%;}
.field.period {display: flex;padding-right:85px;}
.field.period > .inp_date > input[type="text"] {display:inline-block;width:calc(100% - 23px);height:39px;color:#777;font-family: 'Roboto', sans-serif;font-size:.875rem;border:none;}
.field.period > .btn {position:absolute;right:0;top:0;width:80px;height:40px;color:#FFF;font-size:0.875rem;font-weight:bold;border-radius:20px;background-color:#ff6c46;box-shadow: 3px 3px 6px #d9d9d9;}
.field.inLabel label {width:20%;color:#000;font-size:.875rem;line-height:35px;}
.field.inLabel .selectWrap,.field.inLabel .select_item2,.field.inLabel .select_time {width:80%;}
.field.inLabel .cardWrap {width:80%;display: flex;justify-content: space-between;}
.field.inLabel .cardWrap .inp_txt {width:23%;text-align:center;padding:0;font-family: 'Roboto', sans-serif;}
.field.inLabel label + .inp_txt {width:80%;}
.field.select .selectWrap {width: 100%;}
.field.email > .inp_txt {width:45%;}
.field.email > .selectWrap {width:45%;}
.field .resetBtn {position:absolute;right:1px;top:17.5px;margin-top:-10px;width:20px;height:20px;color: transparent;font-size:0;border-radius:100%;background-color:#cfcfcf;}
.field .resetBtn::after {content:"";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-4px;width:8px;height:2px;background-color:#FFF;}

.select_time {display: flex;justify-content: space-between;}
.select_time .selectWrap {width:20% !important;}
.field .select_time .m_dash {width:auto;}
.field .select_time .selectWrap::after {right:7px;}
.field .select_time .selectWrap select {padding-left:7px;}
.field.month.period .inp_date {width:100%;}

.field.column {display:flex;flex-direction: column;}
.field .info_txt {display:none;color:#ff6c46;font-size:.75rem;line-height:1.5rem;}

.btnWrap.period {padding-top:20px;padding-bottom:20px;display: flex;justify-content: space-between;}
.btnWrap {padding-top:5px;text-align:center;}

.resultArea {padding-top:30px;}
.noResult {padding-top:55px;color:#666;font-size:1.125rem;text-align:center;line-height:1.6rem;}
.salesTotal {display: flex;justify-content: space-between;border-bottom:1px solid #000;padding:20px 0;}
.total_number {color:#222;font-size:0.938rem;}
.total_sum {color:#2656e9;font-size:0.938rem;}
.total_number span, .total_sum span {font-family: 'Roboto', sans-serif;font-weight:bold;}

.salesList {}
.salesList > li {display: flex;justify-content: space-between;padding: 21px 0 21px 5px;}
.salesList > li .payMethod {position:relative;padding-left:0;/* padding-left: 56px; */}
.salesList > li .payMethod .logo {position:absolute;left: 0;top:50%;margin-top:-20px;}
.salesList > li .payValue {text-align:right;}
.salesList > li + li {border-top:1px solid #ececea;}

.pay_name {color:#222;font-size:.938rem;font-weight:bold;line-height: 1.563rem;}
.pay_date {font-family: 'Roboto', sans-serif;color:#999;font-size:.75rem;line-height: 1.250rem;}
.pay_total {color:#222;font-size:.938rem;font-weight:bold;line-height: 1.563rem;}
.pay_number,.card_info,.approval_info,.date_info {color:#999;font-size:.75rem;line-height: 1.250rem;}
.pay_state {font-size:.938rem;font-weight:bold;line-height:2.563rem;}
.pay_state.approval {color:#2656e9;}
.pay_state.cancel {color:#ff6c46;}

.salesList > li.detailsBox {padding: 0 17px 15px 17px;border:1px solid #ececea;box-shadow: 0  4px 8px rgba(0, 0, 0, .04);border-radius: 10px;overflow: hidden;margin-top: 20px;flex-direction: column;}
.detailsBox .pay_date {color:#aaa;font-size:.875rem;line-height:2.563rem;}
.detailsBox .pay_date i {display:inline-block;width:1px;height:12px;margin:0 8px;background-color:#e9e9e9;vertical-align: middle;margin-top: -3px;}
.detailsBox .payInfo {display: flex;justify-content: space-between;flex-direction: row;border-bottom:1px solid #ececea;}
.detailsBox .flexBox {padding-top:20px;}
.detailsBox .flexBox .payMethod .logo {top:0;margin-top:0;}

.logo {width:40px;height:40px;overflow:hidden;border-radius:10px;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;}
.logo.shinhan {background-color:#00b7f7;background-position:0 -100px;} /*신한카드*/
.logo.kb {background-color:#ffcc00;background-position:-50px -100px;} /*국민카드*/
.logo.samsung {background-color:#f5f5f5;background-position:-150px -100px;} /*삼성카드*/
.logo.hyundai {background-color:#010101;background-position:-250px -100px;} /*현대카드*/
.logo.bc {background-color:#e83d44;background-position:-200px -100px;} /*비씨카드*/
.logo.nh {background-color:#0066b3;background-position:-100px -100px;} /*농협카드*/

.depositStatus {margin-top:15px;padding:30px;border:1px solid #ececea;box-shadow: 0 3px 10px rgba(0, 0, 0, .06);border-radius: 10px;overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
.depositStatus .tit {font-size:.875rem;font-weight:bold;line-height:1.563rem;}
.depositStatus .pay_total {color:#000;font-size:.75rem;font-weight:normal;}
.depositStatus .pay_total span {font-size:1.375rem;font-weight:bold;}
.depositStatus .number {font-size:.75rem;text-align:center;line-height:2.5rem;}
.depositStatus .number span {font-size:.875rem;font-weight:bold;}
.depositStatus.sales .tit {color:#3147ff;}
.depositStatus.non-deposited .tit {color:#ff6c46;}
.depositStatus.settlement .tit {color:#59cbe8;}
.depositStatus.sales .number {color:#3147ff;}
.depositStatus.non-deposited .number {color:#ff6c46;}
.depositStatus.settlement .number {color:#59cbe8;}

.noticeWrap {padding:6.4vh 0 6.7vh;border-top:1px solid #000;}
.noticeList {border-top:1px solid #000;}
.noticeList > li {border-bottom:1px solid #ececea;}
.noticeTit {position:relative;padding:20px 50px 18px 25px;color:#000;font-size:.875rem;line-height:1.250rem;}
.noticeTit i {position:absolute;top:27px;right:30px;width:14px;height:14px;transition:transform 0.5s;}
.noticeTit i::before {content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1px;height:2px;background-color:#cfcfcf;}
.noticeTit i::after {content:"";position:absolute;left:50%;top:0;bottom:0;margin-left:-1px;width:2px;background-color:#cfcfcf;}
.noticeTit span.date {display:block;color:#999;font-size:.75rem;line-height:1.375rem;}
.noticeTit.on i {transform: rotate(45deg);}
.noticeTit.on i::before,.noticeTit.on i::after {background-color:#000;}
.noticeCon {display:none;padding:22px 25px 23px;font-size:.75rem;background-color:#f6f6f4;}

.storeInfo {border-top:1px solid #000;}
.storeInfo dl {display: flex;justify-content:space-between;margin:0;padding: 16px 0;border-bottom:1px solid #ececea;}
.storeInfo dl dt {padding-left:5px;color:#999;font-size:0.938rem;}
.storeInfo dl dd {padding-right:5px;color:#000;font-size:0.938rem;}
.storeInfo dl dd span {font-weight:bold;}

.tableWrap {border:1px solid #ececea;border-radius:10px;overflow:hidden;}
.tableWrap table {width:100%;border-collapse: collapse;bd+}
.tableWrap table th, .tableWrap table td {padding:16px 0;font-size:.875rem;text-align:center;font-weight:normal;border-left:1px solid #ececea;border-top:1px solid #ececea;}
.tableWrap table tr th:first-child,.tableWrap table tr td:first-child {border-left:none;}
.tableWrap table thead th {color:#666;background-color:#f6f6f4;border-top:none;}
.tableWrap table tbody td {color:#000;}
.tableWrap table tfoot td {color:#fe6448;font-weight:normal;}
.tableWrap table td.ta_r {text-align:right;padding-right:10px;}

.surtaxData {position:relative;}
.surtaxData .smallBlue {position:absolute;right:0;top:8px;box-shadow: 3px 3px 6px #d9d9d9;}

.salesAlarm {position:relative;padding-bottom:60px;}
.salesAlarm .smallBlue {position:absolute;right:0;top:8px;}
.salesAlarm h1{}
.salesAlarm h1::before {content:"";display:inline-block;width:20px;height:20px;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-25px -25px;vertical-align: sub;margin-right:9px;}
.alarmList li {display: flex;justify-content:space-between;margin-top:15px;padding:0 20px;height:53px;border:1px solid #ececea;border-radius:10px;box-shadow: 0 3px 8px rgba(0, 0, 0, .05);}
.alarmList li .day {display:inline-block;color:#000;font-size:1.063rem;line-height:48px;font-weight:bold;margin-right:20px;}
.alarmList li .time {display:inline-block;color:#000;font-size:1.063rem;line-height:48px;}
.alarmList li button {color:#bbb;font-size:.875rem;line-height:.875rem;}
.alarmList li.on {border-color:#ff6c46;}
.alarmList li.on .day,.alarmList li.on .time,.alarmList li.on button {color:#ff6c46;}

.timeWrap {overflow:hidden;padding-top:28px;height:112px;}
.timeWrap .slick-arrow {display:none;}
.timeSlider div.radioWrap {width:33vw;float:left;}
.timeSlider input[type="radio"] + label {display:block;text-align:center;color:#dbdbdb;font-size:4.375rem;line-height:76px;}
.timeSlider input[type="radio"]:checked + label {color:#000;}
.timeTxt {padding-top:18px;color:#000;font-size:1.063rem;line-height:1.5rem;text-align:center;}
.radioBtn_wrap {text-align:center;margin-top:38px;}
.radioBtn_wrap span {display:inline-block;}
input[type="radio"][name="halfDay"] + label {display:block;padding:0 19px;margin:0 3px;height:30px;color:#333;font-size:.875rem;font-weight:bold;line-height:25px;border-radius:15px;background-color:#f4f4f4;border:2px solid #f4f4f4;overflow:hidden;}
input[type="radio"][name="halfDay"]:checked + label {background-color:#FFF;color:#ff6c46;border-color:#ff6c46;}
input[type="checkbox"][name="day_code"] + label {display:block;width:9.3vw;height:9.3vw;margin:0 3px;color:#666;font-size:.875rem;font-weight:bold;line-height:8vw;border-radius:100%;background-color:#fff;border:2px solid #f4f4f4;border-color:transparent;overflow:hidden;}
input[type="checkbox"][name="day_code"]:checked + label {color:#ff6c46;border-color:#ff6c46;}

ul.tab {padding:0;border-bottom:1px solid #ececea;overflow:hidden;margin:0 -25px;}
ul.tab li {position:relative;list-style-type:none;width:33.3333%;height:40px;float:left;}
ul.tab li.on::after {content:"";position:absolute;bottom: 0px;width: 70%;height:3px;border-radius:1px;background-color:#ff6c46;margin-left: -35%;left: 50%;}
ul.tab li a {display:block;color:#cfcfcf;font-size:.875rem;line-height:1.75rem;font-weight:500;text-align:center;outline:none;}
ul.tab li a.selected {color:#000;text-decoration:none;cursor:default;}
.telListBox {margin-top:15px;padding:24px 30px;border:1px solid #ececea;box-shadow: 0 3px 10px rgba(0, 0, 0, .06);border-radius: 10px;overflow: hidden;display: flex;justify-content: space-between;}
.telListBox .info .name {color:#999;font-size:.75rem;font-weight:bold;line-height:1.438rem;}
.telListBox .info .number {color:#333;font-family: 'Roboto', sans-serif;font-size:1.375rem;font-weight:bold;line-height:1.75rem;}
.telListBox .telLink {position:relative;width:50px;height:50px;overflow:hidden;border-radius:15px;color: transparent;font-size: 0;background-color:#ff6c46;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-150px 0px;}

.passCopy {margin:0 0 32px;color:#000;font-size:1.375rem;line-height:1.688rem;text-align:center;}
input[type="password"].inp_pass {padding:0 6px;width:100%;height:47px;font-size:.875rem;border:none;border-bottom:1px solid #ececea;}
.noteWrap {margin-top:40px;padding-left:2px;}
.noteWrap .tit {margin-bottom:15px;color:#000;font-size:.75rem;font-weight:bold;}
.noteWrap .tit::before {content:"";display:inline-block;width:15px;height:15px;margin-right:7px;vertical-align:sub;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-75px 0px;}
.noteWrap li {position:relative;padding-left:12px;padding-bottom:6px;color:#666;font-size:.75rem;line-height:1.063rem;word-break: keep-all;}
.noteWrap li::before {content:"-";position:absolute;left:0;top:0;}

.layerPopup {display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);z-index:2000;}
.layerHead h1 {color:#000;font-size:1.250rem;font-weight:bold;}
.layerPopup .closeWrap {height:32px;}
.layerPopup .layerClose {position:absolute;width: 20px;height: 20px;right: 0;color: transparent;font-size: 0;top: 7px;}
.layerPopup .layerClose::before, .layerPopup .layerClose::after {content:"";left:0;right:0;top:0;height:3px;background-color:#FFF;border-radius:1px;width: 100%;position: absolute;}
.layerPopup .layerClose::before {transform: rotate(45deg);}
.layerPopup .layerClose::after {transform: rotate(-45deg);}
.layerPopup .layerContainer {position: absolute;left: 7vw;right: 7vw;top: 50%;transform: translate(0, -50%);}
.layerPopup .layerWrap {margin:0 auto;padding: 29px 6vw;/* width:86vw; */background-color:#FFF;border-radius:20px;top: 50%;}
.layerPopup .layerHead {margin-bottom:24px;}
.layerPopup .layerWrap h2 {color:#000;font-size:0.938rem;line-height:0.938rem;font-weight:bold;}
.layerPopup .layerContent {max-height:53vh;overflow-y:auto;}
.layerPopup .layerWrap .layerFooter {padding-top:18px;}
.layerPopup .layerWrap .layerFooter button {width:100%;height:60px;color:#FFF;font-size:1.063rem;font-weight:bold;background-color:#ff6c46;border-radius:15px;}
.layerPopup .detailContents dl {display: flex;justify-content:space-between;}
.layerPopup .detailContents dt,.mailContents dd {font-size:.875rem;}
.layerPopup .detailContents dt {min-width: 25%;color:#999;}
.layerPopup .detailContents dd {color:#000;text-align:right;}
#emailPopup .mailForm {padding-top:36px;}
#emailPopup .mailForm h2 {margin-bottom:20px;}

#alarmSet .layerContainer {position:absolute;left:0;right:0;bottom:0;border-radius:50px;background-color:#FFF;height:100vh;}
#alarmSet .closeWrap {position:absolute;right: 25px;top:28px;}
#alarmSet .layerClose {width: 20px;height: 20px;color: transparent;font-size: 0;}
#alarmSet .layerClose::before,#alarmSet .layerClose::after {content:"";left:0;right:0;top:50%;height:3px;background-color:#000;border-radius:1px;width: 100%;position: absolute;}
#alarmSet .layerClose::before {transform: rotate(45deg);}
#alarmSet .layerClose::after {transform: rotate(-45deg);}
#alarmSet .layerHead {padding-left:19px;}
#alarmSet .layerHead h1::after {content:"";display:inline-block;width:20px;height:20px;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-25px -25px;vertical-align: top;margin-left:10px;}
#alarmSet .layerWrap {padding-top:39px;border-radius:50px;}
#alarmSet.layerPopup  .layerContent {max-height:100vh;overflow-y:hidden;}
#alarmSet .copy {color:#000;font-size:0.938rem;line-height:1.375rem;padding-left:19px;padding-top:6vw;padding-bottom:15px;}

.fixedArea {position:fixed;left:0;right:0;bottom:0;text-align: center;}
.fixedArea button {width:100%;height:60px;color:#FFF;font-size:1.063rem;font-weight:bold;background-color:#ff6c46;}
.fixedArea button:disabled {background-color:#cfcfcf;}
button.reset {display:inline-block;color:#3147ff;font-size:.875rem;background-color:#FFF;margin-bottom: 18px;width: auto;margin: 0 auto 18px;}
button.reset::before {content:"";display:inline-block;width:13px;height:15px;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-100px 0;vertical-align: top;margin-right: 8px;margin-top: 2px;}
.copyright {position: fixed;bottom: 3px;color:#898989;font-size:0.625rem;line-height:2rem;text-align:center;width: 100%;}
.copyright .flogo {display:block;margin:0 auto;width:96px;height:20px;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-300px 0;}
.loginWrap {width:100vw;height:100vh;display:flex;flex-direction: column;align-items: center;}
.loginWrap .loginForm {width:84vw;}
.loginWrap .loginForm h1 {color:#000;font-size:1.563rem;line-height:2rem;font-family: 'Roboto', sans-serif;font-weight:bold;text-align:center;padding-bottom:25px;}
.loginWrap .loginForm .field ::-webkit-input-placeholder { /* Edge */color: #dadada;font-family: 'Roboto', sans-serif;font-weight:normal;}
.loginWrap .loginForm .field :-ms-input-placeholder { /* Internet Explorer 10-11 */color: #dadada;font-family: 'Roboto', sans-serif;font-weight:normal;}
.loginWrap .loginForm .field ::placeholder {color: #dadada;font-family: 'Roboto', sans-serif;font-weight:normal;}
.loginWrap .loginForm .field.on ::-webkit-input-placeholder { /* Edge */color: #f36b22;font-weight:bold;}
.loginWrap .loginForm .field.on :-ms-input-placeholder { /* Internet Explorer 10-11 */color: #f36b22;font-weight:bold;}
.loginWrap .loginForm .field.on ::placeholder {color: #f36b22;font-weight:bold;}

.loginWrap .loginForm {position: absolute;top: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
.loginWrap .loginForm .field {position:relative;width:100%;height:55px;margin-top:20px;border:1px solid #fff;border-radius:28px;box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .06);overflow:hidden;}
.loginWrap .loginForm .field.id::before,
.loginWrap .loginForm .field.pass::before {content:"";display:block;position:absolute;left:26px;top:50%;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-color:#dbdbdb;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
.loginWrap .loginForm .field.id::before {width:12px;height:14px;background-position:0 -150px;}
.loginWrap .loginForm .field.pass::before {width:14px;height:15px;background-position:-25px -150px;}
.loginWrap .loginForm input[type="text"],
.loginWrap .loginForm input[type="password"]{width:100%;height:55px;padding-left:56px;color:#f36b22;font-size:.75rem;font-weight:bold;border:none;}
.loginWrap .loginForm .field.on {color:#f36b22;border-color:#f36b22;}
.loginWrap .loginForm .field.on::before {background-color:#f36b22;}
.loginWrap .loginForm button {display:block;width:48vw;height:55px;margin:23px auto 0;color:#FFF;font-size:.75rem;font-weight:bold;border-radius:28px;background-color:#00239c;border:none;}

.checkWrap {display: block;position: relative;margin-top: 15px;color:#808080;font-size: .75rem;line-height:2rem;text-align:center;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkWrap input {position: absolute;width: 0;height: 0;opacity: 0;cursor: pointer;}
.checkmark {display:inline-block;width: 14px;height: 14px;margin-right:8px;vertical-align:middle;border:4px solid #dbdbdb;border-radius:4px;background-color: #FFF;}
.checkWrap input:checked ~ .checkmark {border-color:#f36b22;}
.checkmark:after {content: "";position: absolute;display: none;}
.checkWrap input:checked ~ .checkmark:after {display: block;}
.checkWrap .checkmark:after {top: 5px;left: 9px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);transform: rotate(45deg);}

.mainContainer {margin-top:6.4vh;height:93.6vh;}
.mainContainer .loginInfo {padding:0 30px;display: flex;justify-content: space-between;position: relative;font-size: 1.563rem;line-height: 2.250rem;align-items: flex-end;padding: 7vh 30px;}
.mainContainer .loginInfo strong {}
.mainContainer .menuContainer {width:100vw;padding-bottom:4vw;overflow-x: scroll;}
/* scrollwidth */.mainContainer .menuContainer::-webkit-scrollbar {margin:20px;height:5px;}
/* scrollTrack */.mainContainer .menuContainer::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #f6f6f6; border-radius: 10px;}
/* scrollHandle */.mainContainer .menuContainer::-webkit-scrollbar-thumb {background: #dbdbdb; background-clip: padding-box;border-left: 35px solid transparent;border-right: 35px solid transparent;}
.mainContainer .mainMenu {width: calc(36.4vw * 4 + 4vw);}
.mainContainer .mainMenu a {display:inline-block;width:31.4vw;height:38.6vw;margin-left:4vw;padding-left:26px;border-radius:23px;box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, .16);padding-top: 12.8vw;font-size: .875rem;color: #FFF;font-weight: bold;}
.mainContainer .mainMenu a.menu1 {background:#00239c url(/images/smartmoneyon/main_menu1.png) right 0 no-repeat;background-size:100% auto;}
.mainContainer .mainMenu a.menu2 {background:#59cbe8 url(/images/smartmoneyon/main_menu2.png) 0 0 no-repeat;background-size:100% auto;}
.mainContainer .mainMenu a.menu3 {background:#f36b22 url(/images/smartmoneyon/main_menu3.png) 0 0 no-repeat;background-size:100% auto;}
.mainContainer .mainMenu a.menu4 {background:#66d2cf url(/images/smartmoneyon/main_menu4.png) 0 0 no-repeat;background-size:100% auto;}
.mainContainer .mainMenu a i.icon {display:block;width:20px;height:20px;margin: 0 0 8vw 0;}
.mainContainer .mainMenu a i.menu11 {background-position:0 -75px;}
.mainContainer .mainMenu a i.menu12 {background-position:-25px -75px;}
.mainContainer .mainMenu a i.menu13 {background-position:-50px -75px;}
.mainContainer .mainMenu a i.menu14 {background-position:-75px -75px;}
.mainContainer .notice {position:relative;padding: 6vh 30px;}
.mainContainer .notice .tit {color:#000;font-size:0.938rem;font-weight:bold;}
.mainContainer .notice .tit::after {content:"";display:inline-block;width:19px;height:17px;margin-left:5px;vertical-align:sub;background-image:url('/images/smartmoneyon/sprite.png');background-size:400px 200px;background-repeat:no-repeat;background-position:-100px -25px;}
.mainContainer .notice .textLink {color:#777;font-size:.75rem;padding-right: 50px;word-break: keep-all;}
.mainContainer .notice .btnLink {position:absolute;right:30px;top:50%;width:30px;height:30px;border:1px solid #000;border-radius:10px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
.mainContainer .notice .btnLink::before {content: "";position:absolute;top:50%;left:50%;width: 12px;height: 9px;background-image: url(/images/smartmoneyon/sprite.png);background-size: 400px 200px;background-repeat: no-repeat;background-position: -125px 0;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);}
.mainContainer .bannerWarp {margin:0 30px;position: relative;border-radius:15px;overflow:hidden;}
.mainContainer .bannerWarp .menu {position:relative;background-color:#f6f6f4;overflow:hidden;display: table;width: 100%;}
.mainContainer .bannerWarp .menu::after {content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:#eeeeed;}
.mainContainer .bannerWarp .menu > a {display: table-cell;width:50%;text-align: center;height: 50px;vertical-align: middle;}
.mainContainer .bannerWarp .menu > a > .icon {margin-right:15px;}
.mainContainer .bannerWarp .menu > a > .menu2 {width:21px;height:15px;background-position:-225px -50px;}
.mainContainer .bannerWarp .menu > a > .menu32 {width:20px;height:17px;background-position:-250px -50px;}
.mainContainer .bannerWarp .banner {position: absolute;left: -2px;right: -2px;top: -2px;bottom:-2px;overflow: hidden;}
.mainContainer .bannerWarp .banner img {display:block;width:100%;}
.mainContainer .bannerWarp .banner .bnClose {position:absolute;width: 18px;height: 18px;top: 50%;right: 15px;font-size: 0;color: transparent;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
.mainContainer .bannerWarp .banner .bnClose::before, .mainContainer .bannerWarp .banner .bnClose::after {content:"";left:0;right:0;top:50%;height:2px;background-color:#FFF;border-radius:1px;width: 100%;position: absolute;}
.mainContainer .bannerWarp .banner .bnClose::before {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.mainContainer .bannerWarp .banner .bnClose::after {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

.ui-datepicker {box-shadow:4px 4px 16px #d9d9d9;font-family: 'Roboto', sans-serif;}

.mt23 {margin-top:23px;}
.mt15 {margin-top:15px;}
.fRoboto,.pay_total span, .pay_number span, .card_info, .approval_info span, .date_info span, .depositStatus .pay_total span, .depositStatus .number span, .noticeTit span.date,.storeInfo dl dd strong {font-family: 'Roboto', "Noto Sans KR", sans-serif;}
.flexBox {display: flex;box-align: center;align-itrems: center;justify-content:space-between;overflow: hidden;}

.loadingBox {z-index:10000;}
.loadingBox .dim {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7);z-index:10000;}
.loadingBox .circle {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:70px; height:70px; border:6px solid #fff; border-top:6px solid #ff6600; border-radius:50em; transition:all .2s;z-index:10000;
    animation-name:spinCircle;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes spinCircle {
    from {
        transform:translate(-50%, -50%) rotate(0);
    }
    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}

.newLayerPopup {display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);z-index:2000;}
.newLayerPopup .closeWrap {height:32px;}
.newLayerPopup .layerClose {position:absolute;width: 20px;height: 20px;right: 0;color: transparent;font-size: 0;top: 7px;}
.newLayerPopup .layerClose::before, .layerPopup .layerClose::after {content:"";left:0;right:0;top:0;height:3px;background-color:#FFF;border-radius:1px;width: 100%;position: absolute;}
.newLayerPopup .layerClose::before {transform: rotate(45deg);}
.newLayerPopup .layerClose::after {transform: rotate(-45deg);}
.newLayerPopup .layerContainer {position: absolute;left: 7vw;right: 7vw;top: 50%;transform: translate(0, -50%);}
.newLayerPopup .layerWrap {margin:0 auto;padding: 29px 6vw;/* width:86vw; */background-color:#FFF;border-radius:20px;top: 50%;}
.newLayerPopup .layerContent {max-height:53vh;overflow-y:auto;}
.newLayerPopup {
    width: 100vw;
    height: 100vh;
    text-align: center;
    font-family:"Noto Sans KR",serif;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.025em;
    color: #000;
    box-sizing: border-box;
}

.newLayerPopup .layerContainer {
    left: 50%;
    right: initial;
    top: 50%;
    width: calc(100vw - 30px);
    height: calc(100vh - 30px);
    transform: translate(-50%, -50%);
}

.newLayerPopup .closeWrap {
    position: absolute;
    top: 26.5px;
    right: 25px;
    height: auto;
}

.newLayerPopup .layerClose {
    position: relative;
    top: 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url('/images/smartmoneyon/i-update-close.png');
    background-color: #000000;
    border-radius: 10px;
}

.newLayerPopup .layerClose::before,
.newLayerPopup .layerClose::after {
    display: none;
}

.newLayerPopup .layerWrap {
    width: 100%;
    height: 100%;
    padding: 25px;
    padding-top: 26.5px;
}

.newLayerPopup .layerHead {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

.newLayerPopup .update-head {
    width: 133px;
    height: 42.5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('/images/smartmoneyon/img-update-head.png');
}


.newLayerPopup .layerContent {
    max-height: initial;
}

.newLayerPopup .update-box {
    display: flex;
    flex-direction: column;
    padding-top: 90px;
    width: 100%;
    height: calc(100vh - 122.5px);
}

.newLayerPopup .update-img {
    margin: 0 auto;
    width: 101.5px;
    height: 84.5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('/images/smartmoneyon/img-update.png');
}

.newLayerPopup .update-tit {
    margin-top: 50px;
    margin-bottom: 29px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.newLayerPopup .btn {
    margin-top: auto;
    width: 100%;
    min-height: 60px;
    background-color: #ff5f00;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.newLayerPopup .update-checkbox {
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: auto;
    margin-right: 50px;
}

.newLayerPopup .update-checkbox .checkWrap {
    margin-top: 0;
}

.newLayerPopup .update-checkbox .checkWrap input:checked ~ .checkmark:after {
    display: none;
}

.newLayerPopup .update-img-box {
    padding-top: 20px;
    width: 100%;
    height: calc(100vh - 122.5px);
}

.newLayerPopup .update-img-box img {
    display: block;
    width: 100%;
    height: auto;
}