@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
html {
    background: rgba(200, 200, 200, 0.2);
}
html,body {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 450px;
    height: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
}
body {

    background: #ffffff;
    /*transform: translate(0, 0);*/
}
*::-webkit-scrollbar {width: 10px;height: 10px;}
*::-webkit-scrollbar-track {background: transparent;}
*::-webkit-scrollbar-thumb {background-color: #D7D8DB;border-radius: 6px;background-clip: padding-box;border: 3px solid transparent;}
*::-webkit-scrollbar-thumb:hover {background: #888;background-clip: padding-box;}

a,input,label { -webkit-tap-highlight-color : transparent !important;}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox  */
input[type='number'] {
    -moz-appearance: textfield;
}

#hd,#ft {display: none}

.modal_container{display: none !important;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 99999;overflow: hidden;align-items: center;justify-content: center;background:rgba(0,0,0,0.8)}
.modal_container.show{display: flex !important; align-items: center; justify-content: center;}
.modal_container .modal_wrapper{position:relative;width: 450px; padding: 0 10px}
.modal_container .modal_wrapper .closeIcon {position: absolute;top: 20px;right: 30px;z-index: 5; border: none;background: transparent;}
.modal_container .modal_wrapper .closeIcon img {height: 16px}
.modal_container .inner{padding:40px 20px 32px;width: 100%;max-width: 100%;max-height: 90vh;box-shadow: 0 3px 6px rgb(0 0 0 / 16%);background: #fff;position: relative;display: flex;flex-direction: column;}
.modal_container .title{margin: 0 0 20px 0;line-height: 20px;font-size: 18px;font-weight: bold;color: #111;text-align: center;}
.modal_container .text{line-height:20px;font-size: 16px;font-weight: 500;color:#333333;text-align:center;}
.modal_container .button{margin:24px 0 0 0;display:flex;align-items:center;justify-content:center;}
.modal_container .button .btn{display:flex;align-items:center;justify-content:center;padding:12px 16px;width:100%;height:40px;border-radius:40px;border:1px solid #ddd;font-size:14px;font-weight:500;}
.modal_container .button .btn + .btn{margin-left:8px}

.mainBackColor {background: #4285F4 !important;}
.mainFontColor {color: #4285F4 !important;}

#container_title {height: 56px;box-shadow: 0px 2px 2px 0px #0000001A;padding: 17px 12px;}
#container_title a {display: flex; height: 100%;align-items: center;gap: 4px;font-size: 16px; font-weight: 500;letter-spacing: -0.4px;color: #333}
#container_title a img {height: 100%}

#container input[type=text],#container input[type=number] {height: 50px; width: 100%; border: 1px solid #bebebe; border-radius: 10px;padding: 17px 10px; font-size: 16px;outline: none !important;line-height: 50px}
#container input[type=text]::placeholder,#container input[type=number]::placeholder {color: #bebebe;font-size: 16px;}

.btnBT {width: 100%;height: 50px;border-radius: 10px;display: flex;justify-content: center;align-items: center;font-size: 14px;line-height: 14px;color: #fff;background: #4285F4; transition: all .2s;font-weight: 500}
.btnBT.disabled {background: #BEBEBE !important; pointer-events: none}

.checkBox { display: flex; gap: 10px 40px; flex-wrap: wrap}
.checkBox label { display: flex; align-items: center; cursor: pointer}
.checkBox label input {display: none}
.checkBox label input[type=radio]~i,.checkBox label input[type=checkbox].radio~i { width: 24px; height: 24px;flex-shrink: 0; margin: 0 8px 0 0; background: url("../img/radioOff.png") no-repeat 50% 50%/contain}
.checkBox label input[type=checkbox]~i { width: 20px; height: 20px;flex-shrink: 0; margin: 0 12px 0 0; background: url("../img/checkOff.png") no-repeat 50% 50%/contain}
.checkBox label input~p { font-size: 14px; font-weight: 700; color: #333}
.checkBox label input[type=radio]:checked~i,.checkBox label input[type=checkbox].radio:checked~i { background: url("../img/radioOn.png") no-repeat 50% 50%/contain}
.checkBox label input[type=checkbox]:checked~i { background: url("../img/checkOn.png") no-repeat 50% 50%/contain}

#appbar {
}

#appbar .appbar {
    width: 100%;
    background: #fff;
    box-shadow: 0px -1px 4px 0px #0000000D;
    z-index: 1013;
    transition: all .5s;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 450px;
}

#appbar .appbar ul {
    display: flex;
    height: 55px
}

#appbar .appbar li {
    flex: 1
}

#appbar .appbar li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%
}

#appbar .appbar li a i {
    width: 24px;
    height: 24px;
    background: #fafafa
}

#appbar .appbar li a p {
    margin: 3px 0 0;
    line-height: 10px;
    font-size: 10px;
    color: #BEBEBE;
    font-weight: 400
}
#appbar .appbar li.on a p {color: #4285F4}
#appbar .appbar li.home a i { background: url("../img/appbar1off.png") no-repeat 50% 50%/contain }
#appbar .appbar li.home.on a i { background: url("../img/appbar1on.png") no-repeat 50% 50%/contain }
#appbar .appbar li.receive a i { background: url("../img/appbar2off.png") no-repeat 50% 50%/contain}
#appbar .appbar li.receive.on a i { background: url("../img/appbar2on.png") no-repeat 50% 50%/contain}
#appbar .appbar li.send a i {background: url("../img/appbar3off.png") no-repeat 50% 50%/contain}
#appbar .appbar li.send.on a i {background: url("../img/appbar3on.png") no-repeat 50% 50%/contain}
#appbar .appbar li.mypage a i { background: url("../img/appbar4off.png") no-repeat 50% 50%/contain}
#appbar .appbar li.mypage.on a i { background: url("../img/appbar4on.png") no-repeat 50% 50%/contain}

.starting {padding:85px 20px; height: calc(var(--vh, 1vh) * 100);}
.starting .mainText {font-size: 28px; font-weight: 700;padding:0 8px;margin-bottom: 50px;color: #1c1c1c}
.starting .logo {text-align: center;padding: 0 55px;margin-bottom: 75px}
.starting .logo img {width: 100%}
.starting .buttonBox {margin-bottom: 35px}
.starting .buttonBox .startBtn {width: 100%;height: 50px;border-radius: 10px;display: flex;justify-content: center;align-items: center;font-size: 14px;line-height: 14px;color: #fff}
.starting .useAccount p {color: #BEBEBE;font-size: 14px;text-align: center;font-weight: 500}
.starting .useAccount p a {margin-left: 8px;font-weight: 700;}

.register {height: calc((var(--vh, 1vh) * 100) - 56px);}
.register .tab{padding: 24px 20px;}
.register .mainTitle {font-size: 24px; font-weight: 700; line-height: 30px; color: #333;margin-bottom: 16px}
.register .subTitle {font-size: 14px; font-weight: 500; color: #333; line-height: 17.5px;margin-bottom: 24px}
.register .buttonBox {margin-top: 40px}
.register .privacy-btn {margin-top: 40px}
.register .privacy-btn a{font-size: 14px; color: #4285F4;display: block; text-align: center}
.register .inputBox{}
.register .inputBox input+input {margin-top: 8px}
.register .buttonBox2 {margin-top: 24px}
.register .checkBox {padding: 16px 0;margin-top: 0;border-bottom: 1px solid #ECECEC;border-top: 1px solid #ECECEC;margin-bottom: 40px}
.register .checkBox.all {margin-top: 32px;padding-top: 0;padding-bottom: 16px; border: 0;margin-bottom: 0}
.register .checkBox label+label {margin-top: 16px}
.register .form {}
.register .form .row {margin-bottom: 24px}
.register .form .row p {font-size: 13px;color: #333;margin-bottom: 4px}
.register .form .row input+input {margin-top: 8px}
.register .form .row input.search {background: transparent url(../img/search.png) no-repeat right 15px center / auto 20px !important;cursor: pointer}
.register .form .attention {display: flex;align-items: center;gap: 4px;font-size: 14px; font-weight: 500;line-height: 20px}
.register .form .attention img {height: 20px}

.register.login .buttonBox3 {margin-top: 24px;}

#popup_address .addressSearch {display: none;height: 466px !important;}
#popup_address .addressSearch.show {display: block !important;}
#popup_address .addressDetail {display: none}
#popup_address .addressDetail.show {display: flex;flex-direction: column;gap: 10px}
#popup_address .addressDetail p {margin-bottom: 5px;font-size: 14px;}
#popup_address .addressDetail input {width: 100%;font-size: 16px;padding: 5px 10px}

#popup_view .inner {padding: 0;border-radius: 10px;overflow: hidden}
#popup_view .modal_wrapper {padding: 0 20px}
#popup_view .modal_wrapper .closeIcon {position: absolute;top: -31px;right: 20px;z-index: 5; border: none;background: transparent;}
#popup_view .modal_wrapper .closeIcon img {height: 30px}


.transBack {background: transparent;z-index: 1;display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%}
.send_f {min-height: calc((var(--vh, 1vh) * 100) - 56px);background: #fff}
.send-wrap .inp .sub-title {font-size: 13px}
.send-wrap .picture-wrap {display: flex;gap: 16px;position: relative}
.send-wrap .picture-wrap .camera-wrap label {display: none}
.send-wrap .picture-wrap .camera-wrap label.on {display: block}
.send-wrap .picture-wrap .img-wrap {display: flex;gap: 8px}
.send-wrap .picture-wrap .img-wrap .imgBox {width: 72px;height: 72px;overflow: hidden;border-radius: 10px;position: relative;display: none}
.send-wrap .picture-wrap .img-wrap .imgBox.on {display: block}
.send-wrap .picture-wrap .img-wrap .imgBox .thumb-img{width: 100%;height: 100%;object-fit: cover}
.send-wrap .picture-wrap .img-wrap .imgBox .imgRemoveBtn {background: transparent;width: 16px;height: 16px;position: absolute;top: 2px; right: 2px}
.send-wrap .picture-wrap .img-wrap .imgBox .imgRemoveBtn img {width: 100%;}

#popup_item .modal_wrapper {padding: 0 20px}
#popup_item .modal_wrapper .closeIcon {position: absolute;top: 2.5px;right: 23px;z-index: 5; border: none;background: transparent;}
#popup_item .modal_wrapper .closeIcon img {height: 30px}
#popup_item .inner {padding: 0}
#popup_item .itemTitle {height: 35px; color: #fff; font-size: 16px;font-weight: 700;background:#4285F4;display: flex;align-items: center;justify-content: center}
#popup_item .itemSubTitle {padding: 16px 0; text-align: center;font-size: 13px; font-weight: 500}
#popup_item .itemTable .row {border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;height: 40px;display: flex;}
#popup_item .itemTable .row+.row {border-top: 0}
#popup_item .itemTable .row .subj {width: 116px; border-right: 1px solid #ddd;display: flex;align-items: center;justify-content: center;font-size: 11px;}
#popup_item .itemTable .row .cont {padding: 0 8px; display: flex;align-items: center;font-size: 10px}
#popup_item .description {padding: 16px 8px}
#popup_item .description p {color: #BEBEBE;font-weight: 400; line-height: 13.77px;font-size: 11px}
#popup_item .description p+p {margin-top: 7px}

.mainCodeBT {font-size: 28px;line-height: 36px;height: 36px}

#popup_direct {background: transparent}
#popup_direct .modal_wrapper {background: #fff; height: 100%;padding: 0}
#popup_direct .modalHead {height: 56px;box-shadow: 0px 2px 2px 0px #0000001A;padding: 17px 12px;}
#popup_direct .modalHead a {display: flex; height: 100%;align-items: center;gap: 4px;font-size: 16px; font-weight: 500;letter-spacing: -0.4px;color: #333}
#popup_direct .modalHead a img {height: 100%}

#popup_select {background: transparent;}
#popup_select .modal_wrapper {background: #EEF4FF;height: 100%;padding: 0}
#popup_select .modalHead {height: 56px;box-shadow: 0px 2px 2px 0px #0000001A;padding: 17px 12px;background: #fff}
#popup_select .modalHead a {display: flex; height: 100%;align-items: center;gap: 4px;font-size: 16px; font-weight: 500;letter-spacing: -0.4px;color: #333}
#popup_select .modalHead a img {height: 100%}
#popup_select .selectAddrList {height: calc((var(--vh, 1vh) * 100) - 56px);overflow-y: auto;padding: 24px 20px;width: 100%}
#popup_select .select-title {font-size: 13px; line-height: 13px; font-weight: 500; color: #333;margin-bottom: 16px }
#popup_select .direct-btn {display: flex;justify-content: center;align-items: center;gap: 8px; background: #fff; border-radius: 4px; border: 1px solid #4285F4; width: 100%; height: 60px; font-size: 14px; font-weight: 400;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);margin-bottom: 24px;line-height: 24px}
#popup_select .direct-btn img {height: 24px}
.boxLine {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
}

#popup_confirm .modal_wrapper{padding:0 20px}
#popup_confirm .inner {border-radius: 20px; padding:56px 40px 32px}
#popup_confirm .inner .message {font-size: 16px;text-align: center;font-weight: 500}
#popup_confirm .button {margin-top: 42px}
#popup_confirm .button .btn {border: 1px solid #4285F4; color: #4285F4;height: 50px; font-size: 14px; border-radius: 10px}
#popup_confirm .button .btn + .btn {
    margin-left: 16px;
    background: #4285F4; color: #fff;
}

#popup_alert .modal_wrapper{padding:0 20px}
#popup_alert .inner {border-radius: 20px; padding:56px 40px 32px}
#popup_alert .inner .message {font-size: 16px;text-align: center;font-weight: 500}
#popup_alert .button {margin-top: 42px}
#popup_alert .button .btn {border: 1px solid #4285F4; background: #4285F4; color: #fff;height: 50px; font-size: 14px; border-radius: 10px;width: 112px}

.btnBox {padding-top:8px}

.inquiryInp {border: 1px solid #bebebe; border-radius: 10px !important; padding:17px 10px !important;}
.inquiryInp p {line-height: 16px}

.inquiryInpB {border: 1px solid #bebebe; border-radius: 10px !important; padding:17px 10px !important;}
.inquiryInpB p {line-height: 20px}


.main-hide {display: none !important;}

.main-t-bg {background: #4285F4 !important;}
.main-bg-new {background: linear-gradient(225deg, rgba(113, 178, 245, 1) 0%, rgba(94, 146, 249, 1) 100%) !important;}
.main-container {position: relative; width: 100%; padding: 34px 20px 26px 20px;}
.main-box {box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);border-radius: 4px !important;}
.top-title-box {padding-bottom: 32px}
.main-top-title {padding-bottom: 11px; font-size: 20px; font-weight: 400; color: #fff}
.main-top-title.nb {padding-bottom: 0}
.user-name-title {font-size: 32px; font-weight: 500;line-height: 40px;margin-right: 9px;padding-left: 9px}
.main-top-flex {gap: 9px}

.weight-wrap {padding: 24px 20px}
.weight-wrap .sec {}
.weight-wrap .sec.hide {display: none}
.weight-wrap .sec + .sec{margin-top: 40px}
.weight-wrap .sec .weight-title{font-size: 32px; font-weight: 500; line-height: 40.06px;}
.weight-wrap .sec .sub-title{margin-top: 5px; font-size: 13px; font-weight: 500; color: #4285F4;margin-bottom: 32px}
.weight-wrap .sec .radio-box {display: flex; gap: 20px}
.weight-wrap .sec .radio-box a{width: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center; border-radius: 10px; border:1px solid #4285F4;height: 98px}
.weight-wrap .sec .radio-box a p {font-size: 24px; font-weight: 500; color: #4285F4;line-height: 24px;margin-bottom: 11px}
.weight-wrap .sec .radio-box a span {font-size: 14px; font-weight: 500; color: #4285F4;line-height: 14px}
.weight-wrap .sec .radio-box a.on{background: #4285F4}
.weight-wrap .sec .radio-box a.on p {color: #fff}
.weight-wrap .sec .radio-box a.on span{color: #fff}

.selectBox2 {padding: 25px 10px !important;}
.selectBox2 p {font-size: 16px !important; line-height: 16px !important; padding-bottom: 25px !important;}
.selectBox2 p:last-child {padding-bottom: 0 !important;}

.addrBox-v2 {padding: 0 0 15px !important;}
.addrBox-v2 .addr-title { background: #fff; padding: 6px 15px !important; font-size: 16px !important;border-bottom: 1px solid #4285F4;border-radius: 4px 4px 0 0;color: #4285F4;line-height: 23px;display: flex;align-items: center;position: relative}
.addrBox-v2 .addr-title.basic {background: rgba(66, 133, 244, 1); color: #fff;border-radius: 0;}
.addrBox-v2 .addr-title.basic .basic-label {color:#4285F4;font-size: 12px; font-weight: 500; width: 60px;height: 20px; border-radius: 20px; background: #fff;margin-left: 8px; display: flex;align-items: center;justify-content: center }
.addrBox-v2 .addr-title .delete-addr {position: absolute; font-size: 13px;top: 10px; right: 15px;color: #4285F4;line-height: 16px}
.addrBox-v2 .addr-title.basic .delete-addr {color: #fff}
.addrBox-v2 p { padding: 8px 15px 0 !important; font-size: 14px !important;}

.address-wrap {padding: 24px 20px}
.address-wrap .address-title {font-size: 32px; font-weight: 500; line-height: 40.06px;margin-bottom: 32px}
.set-address-box {margin-bottom: 20px}
.set-address-title {display: flex; align-items: center; justify-content: space-between;padding: 0 16px;background: #4285F4;height: 36px;border-radius: 4px 4px 0 0;}
.set-address-title p {color: #fff; font-weight: 500; font-size: 16px;}
.set-address-title a {color: #fff; font-weight: 500; font-size: 16px;}
.set-address-body {padding: 8px 16px 16px;border: 1px solid #4285F4; }
.set-address-body p+p {padding-top: 8px}
.set-address-body p {font-size: 14px; font-weight: 400; color: #333}

.finish-box {padding: 116px 20px 0 20px !important;}
.finish-box h1 {line-height: 40px}
.finish-box .complete-send {margin-bottom: 30px !important;}
.finish-box .text-send {padding-top: 60px}
.finish-box span {display: block; text-align: center; font-size: 18px; color: #4285F4; font-weight: 500;line-height: 22.54px;margin-bottom: 50px}

.addr-add-btn {display: flex;justify-content: center;align-items: center;gap: 8px; background: #fff; border-radius: 4px; border: 1px solid #4285F4; width: 100%; height: 60px; font-size: 14px; font-weight: 400;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);margin-bottom: 24px;line-height: 24px}
.addr-add-btn img {height: 24px}