@charset "utf-8";
:root { --size:16px; --sizer:0.925rem; --small:0.875rem; --smaller:0.75rem; --smallest:0.625rem; --large:1.125rem; --larger:1.25rem; --largest:1.5rem; --line-height:1.5; --normal:400; --bold:600; --border-radius:0.5rem; --transition:0.4s;
--lightest:#ffffff; --light:#f4f5f6; --dark:#505050; --darkest:#000000; --neutral-lightest:#ecedee; --neutral-light:#cccdce; --neutral:#aaabac; --neutral-dark:#878889; --neutral-darkest:#656667; --link:#365f88; --link-active:#274563; --input:#ffffff; --input-border:none; --border:#f1f1f1; --button:#ffffff; --button-border:none; --primary:#132466; --primary-active:#33228e; --secondary:#06ad56; --secondary-active:#059546; --error:#fa5151; --error-active:#d62b2b; --warning:#ffc300; --warning-active:#ff9700; --shadow:0 0 5px rgba(0,0,0,0.25); --box-shadow:0 0 50px rgba(0,0,0,0.1); }

* { margin:0; padding:0; font-family:system-ui, -apple-system, -sans-serif; font-size:var(--size); font-weight:var(--normal); line-height:var(--line-height); color:var(--darkest); box-sizing:border-box; }

body { background:var(--light); -webkit-text-size-adjust:none; }
body[theme=plain] { background:var(--lightest); }
a { color:var(--darkest); text-decoration:none; cursor:pointer; }
a:hover { color:var(--darkest); text-decoration:none; transition:var(--transition); }
img { width:100%; height:100%; object-fit:cover; }
input,select,textarea { font-size:var(--small); background:var(--input); border:var(--input-border); border-radius:var(--input-radius); appearance:none; }
input:focus { outline:none; appearance:none; }
input.text { width:100%; height:2rem; line-height:2rem; padding:0; }
input.button { height:40px; line-height:40px; -font-weight:var(--bold); color:var(--button); background:var(--primary); border:none; border-radius:var(--button-radius); cursor:pointer; -webkit-appearance:none; }
input.button:hover { background:var(--primary-active); transition:var(--transition); }
input.click, input.click:hover { background:var(--neutral); cursor:default; }
input.radio { position:relative; width:1rem; height:1rem; margin-bottom:2px; background:var(--input); border:1px solid var(--neutral-dark); border-radius:50%; appearance:none; }
input.radio:checked::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:70%; height:70%; background:var(--dark); border-radius:50%; }
input.checkbox { position:relative; width:1rem; height:1rem; -margin-bottom:2px; background:var(--input); border:1px solid var(--neutral-dark); appearance:none; }
input.checkbox:checked::after { content:""; position:absolute; left:2px; top:3px; width:8px; height:3px; background:transparent; border:2px solid var(--dark); border-top:none; border-right:none; transform:rotate(-50deg); }
input[type=file] { display:none; }
input::placeholder { color:var(--neutral); }
input:-webkit-autofill { transition:background-color 86400s; }
select.select { margin-left:-0.25rem; appearance:auto; }
select.select:active,select.select:focus { outline:none; }
select.select[disabled] { display:none; }
button { height:2.5rem; padding:0 1.5rem; background:var(--primary); border:var(--input-border); border-radius:1.5rem; font-size:var(--sizer); font-weight:var(--bold); color:var(--lightest); white-space:nowrap; }
button.s { background:var(--neutral-lightest); color:var(--primary); }
button.t { background:transparent; color:var(--primary); }
button.small { height:2rem; padding:0 1rem; font-size:var(--small); font-weight:var(--normal); }
button.smaller { height:1.75rem; padding:0 0.6rem; font-size:var(--smaller); font-weight:var(--normal); }
button[disabled] { background:var(--neutral-light)!important; color:var(--lightest); }

header { position:fixed; top:0; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; background:var(--lightest); z-index:9; }
main { position:relative; display:flex; flex-flow:column nowrap; }
main.tab { padding-bottom:4rem; }
footer { position:fixed; bottom:0; width:100vw; height:4rem; display:flex; flex-flow:row nowrap; justify-content:space-around; align-items:center; background:var(--lightest); box-shadow: 0 0 0.5px rgba(0,0,0,0.1); z-index:9; }
footer .tab { width:100%; height:100%; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; font-size:var(--smallest); color:var(--dark); }
footer .tab.a { color:var(--link-active); }
footer .tab img { width:1.75rem; height:1.75rem; user-select:none; }

loading { visibility:hidden; position:fixed; width:100%; height:100%; left:0; top:0; z-index:10; }
loading div { position:absolute; width:8rem; height:8rem; left:0; right:0; top:0; bottom:0; margin:auto; background:rgba(0,0,0,0.75) url(../img/spinner.gif) center no-repeat; background-size:3rem 3rem; border-radius:1rem; }
toast { visibility:hidden; position:fixed; width:100%; height:100%; left:0; top:0; display:flex; flex-flow:column; justify-content:center; align-items:center; z-index:10; pointer-events:none; }
toast div { padding:0.5rem 1rem; background:rgba(0,0,0,0.75); border-radius:var(--border-radius); font-size:var(--smaller); color:var(--lightest); }
alert { visibility:hidden; position:fixed; width:100%; height:100%; left:0; top:0; display:flex; flex-flow:column; justify-content:center; align-items:center; background:rgba(0,0,0,0.5); z-index:10; }
alert div { min-width:65%; max-width:85%; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:center; background:var(--lightest); border-radius:1rem; overflow:hidden; }
alert span { display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; padding:2rem; font-size:var(--sizer); font-weight:var(--bold); line-height:2rem; }
alert ok { width:100%; height:3rem; line-height:3rem; background:var(--neutral-lightest); --color:var(--lightest); font-size:var(--small); font-weight:var(--bold); text-align:center; }
alert success { width:5rem; height:5rem; background:url("../img/icon/success.svg") center no-repeat; background-size:100%; border-radius:50%; margin-bottom:1rem; }
confirm { visibility:hidden; position:fixed; width:100%; height:100%; left:0; top:0; display:flex; flex-flow:column; justify-content:center; align-items:center; background:rgba(0,0,0,0.5); z-index:10; }
confirm div { min-width:65%; max-width:85%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; background:var(--lightest); border-radius:1rem; overflow:hidden; }
confirm span { width:100%; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; padding:2.5rem; font-size:var(--sizer); font-weight:var(--bold); line-height:2rem; }
confirm ok { width:50%; height:3rem; line-height:3rem; background:var(--primary); color:var(--lightest); font-size:var(--small); font-weight:var(--bold); text-align:center; }
confirm no { width:50%; height:3rem; line-height:3rem; background:var(--neutral-lightest); color:var(--neutral); font-size:var(--small); font-weight:var(--bold); text-align:center; }

.link { color:var(--link)!important; }
.darkest { color:var(--darkest)!important; }
.lightest { color:var(--lightest)!important; }
.wide { position:relative; width:calc(100% - 2rem); margin:0 auto; }
.wider { position:relative; width:calc(100% - 1rem); }
.box { background:var(--lightest); border-radius:var(--border-radius); overflow:hidden; }
.border { border-bottom:1px solid var(--border); }
.arrow { position:relative; }
.arrow::after { content:""; position:absolute; width:0.4rem; height:0.4rem; right:0; top:0; bottom:0; margin:auto; border-top:1px solid var(--link); border-right:1px solid var(--link); transform:rotate(45deg); }
.sticky { position:sticky; top:0; background:var(--light) url("../img/bg.jpg") no-repeat top / 100% auto; z-index:5; }
.border-bottom-none { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.mx { margin-left:1rem; margin-right:1rem; }
.my { margin-top:1rem; margin-bottom:1rem; }
.sp { width:100%; height:1rem; }

.logo { user-select:none; }
.header { width:100vw; height:3rem; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; z-index:1; }
.header .title { padding:0; font-size:var(--size); font-weight:var(bold); }
.back { flex:none; position:relative; width:3rem; height:3rem; }
.back::after { content:""; position:absolute; width:0.5rem; height:0.5rem; left:0.25rem; right:0; top:0; bottom:0; margin:auto; border-left:2px solid var(--darkest); border-bottom:2px solid var(--darkest); transform:rotate(45deg); }
.back.dark::after { border-color:var(--lightest); }
.back.radius { background:rgba(0,0,0,0.25); border-bottom-right-radius:var(--border-radius); }
.tail { flex:none; position:relative; width:3rem; height:3rem; display:flex; justify-content:flex-end; align-items:center; }
.title { padding:0 1rem; font-size:var(--large); font-weight:var(--bold); text-align:center; }
.plain { padding:2rem 1rem; font-size:var(--small); }
.banner { width:100vw; height:50vw; overflow:hidden; }
.pagenav { height:2.5rem; display:flex; flex-flow:row nowrap; color:var(--neutral-dark); font-size:var(--small); background:var(--primary); overflow-x:auto; }
.pagenav .button { display:inline-block; line-height:2.5rem; padding:0 1rem; color:var(--neutral); }
.pagenav .current { display:inline-block; line-height:2.5rem; padding:0 1rem; font-weight:var(--bold); color:var(--lightest); }
.pagenon { padding:1rem 0; color:var(--neutral-light); font-size:var(--small); text-align:center; }
.footer { position:fixed; bottom:0; width:100vw; height:4rem; padding:0 1rem; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; background:var(--lightest); border-top:1px solid var(--border); z-index:1; }
.footer .price { line-height:1.5rem; font-size:var(--larger); font-weight:var(--bold); color:var(--error); }
.footer .price span { font-size:var(--size); color:var(--error); margin-right:0.1rem; }

.tabs { position:sticky; top:0; width:100%; height:3rem; display:flex; flex-flow:row nowrap; justify-content:space-around; align-items:center; background:var(--light); z-index:8; }
.tabs .tab { position:relative; flex:auto; line-height:3rem; font-size:var(--sizer); color:var(--neutral-dark); text-align:center; white-space:nowrap; }
.tabs .tab.a { font-size:var(--size); font-weight:var(--bold); color:var(--darkeset); }
.tabs .tab.a::after { content:""; position:absolute; width:100%; height:3px; left:0; right:0; bottom:0px; margin:0 auto; background:var(--primary-active); border-radius:2px; }

.states { position:sticky; top:3rem; width:100%; height:3rem; display:flex; flex-flow:row nowrap; justify-content:space-around; align-items:center; background:var(--light); z-index:8; }
.states .state { position:relative; padding:0 1rem; line-height:2rem; font-size:var(--small); color:var(--neutral-dark); text-align:center; white-space:nowrap; }
.states .state.a { font-size:var(--sizer); font-weight:var(--bold); color:var(--darkest); background:var(--lightest); border-radius:2rem; }

.list { width:100%; }
.list .item { margin:1rem auto; padding:0.75rem 1rem; display:flex; flex-flow:column nowrap; }
.list .item .tit { font-size:var(--sizer); font-weight:var(--bold); margin-bottom:0.25rem; }
.list .item .tit span { font-size:var(--small); font-weight:var(--bold); }
.list .item .txt { font-size:var(--smaller); color:var(--neutral); }
.list .item .head { width:100%; height:2rem; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:flex-start; font-size:var(--small); color:var(--dark); }
.list .item .st { font-size:var(--small); font-weight:bold; color:var(--primary); }
.list .item .sts { margin-right:1rem; width:1.25rem; height:1.25rem; line-height:1.25rem; font-size:var(--smaller); color:var(--lightest); background:var(--primary); border-radius:50%; text-align:center; }
.list .item .body { width:100%; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
.list .item .img { flex:none; width:6rem; height:6rem; margin:0.25rem 0.75rem 0 0; border-radius:0.35rem; overflow:hidden; }
.list .item .img img { object-fit:contain; }
.list .item .avatar { width:3rem; height:3rem; margin:0 0.75rem 0 0; }
.list .item .desc { flex:auto; display:flex; flex-flow:column nowrap; }
.list .item .desc .name { line-height:1.5rem; font-size:var(--sizer); font-weight:var(--bold); }
.list .item .desc .name .num { margin-left:1rem; font-size:Var(--small); font-weight:var(--bold); color:var(--neutral); }
.list .item .desc .desc { margin:0.5rem 0; line-height:1.25rem; font-size:var(--smaller); }
.list .item .desc .username { display:flex; flex-flow:row nowrap; align-items:center; line-height:1.5rem; font-size:var(--small); }
.list .item .desc .username span { display:inline-block; width:1.25rem; height:1.25rem; line-height:1.25rem; text-align:center; margin-right:0.5rem; border-radius:50%; font-size:var(--smaller); }
.list .item .desc .username .seller { color:var(--lightest); background:var(--neutral-dark); }
.list .item .desc .username .buyer { color:var(--lightest); background:var(--link); }
.list .item .desc .price { line-height:1.5rem; font-size:var(--smaller); font-weight:var(--bold); color:var(--error); }
.list .item .desc .price span { font-size:var(--smaller); color:var(--error); margin-right:0.1rem; }
.list .item .desc .price p { display:inline; font-size:var(--smaller); }
.list .item .foot { width:100%; display:flex; flex-flow:column nowrap; justify-content:space-between; -align-items:flex-end; }
.list .item .status { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:flex-start; }
.list .item .times { display:flex; flex-flow:column nowrap; }
.list .item .times span { display:block; font-size:var(--smaller); color:var(--neutral); }
.list .item .times span:first-child { margin-top:0.5rem; }
.list .item .prices { display:flex; flex-flow:column nowrap; }
.list .item .prices .price { font-size:var(--size); font-weight:var(--bold); color:var(--error); text-align:right; }
.list .item .prices .price span { font-size:var(--smaller); color:var(--error); margin-right:0.1rem; }
.list .item .prices .price p { display:inline; font-size:var(--smaller); }
.list .item .btns { display:flex; flex-flow:row nowrap; justify-content:flex-end; }
.list .item button { height:2rem; margin-top:0.5rem; margin-left:0.5rem; font-size:var(--small); padding:0 1rem; border:none;  }
.list .item.arrow::after { right:0.5rem; }

.grid { width:100%; display:grid; grid-template-columns:repeat(2, 1fr); padding:0.75rem; grid-gap:0.75rem; }
.grid .fall { width:calc((100vw - 0.75rem * 3) / 2); display:flex; flex-flow:column nowrap; gap:0.75rem; }
.grid .item { width:100%; display:flex; flex-flow:column nowrap; justify-content:space-between; line-height:0; }
.grid .item .img { width:100%; height:calc((100vw - 0.75rem * 3) / 2); line-height:0; }
.grid .item img { object-fit:cover; }
.grid .item .name { flex:auto; padding:0.5rem; font-size:var(--small); word-break:break-all; }
.grid .item .ellipsis2 { max-height:3.25rem; }
.grid .item .desc { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; padding:0.5rem; padding-top:0; }
.grid .item .desc .price { font-size:var(--size); font-weight:var(--bold); color:var(--error); }
.grid .item .desc .price span { font-size:var(--smaller); color:var(--error); margin-right:0.1rem; }

.form { display:flex; flex-flow:column nowrap; margin-top:1rem; padding:0 1rem; background:var(--lightest); }
.form .item { display:flex; flex-flow:column nowrap; padding:0.5rem 0; border-bottom:1px solid var(--border); }
.form .field { display:flex; flex-flow:row nowrap; justify-content:space-between; height:2.25rem; padding-top:0.5rem; font-size:var(--small); font-weight:var(--bold); color:var(--dark); }
.form .value { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; font-size:var(--small); }
.form .value .link { width:4.25rem; font-size:var(--smaller); white-space:nowrap; }
.form .sms { flex:none; width:7rem; margin-left:1rem; }
.form .ac { flex:none; width:6rem; height:2rem; }
.form .area .group { width:100%; height:2rem; display:flex; flex-flow:row nowrap; gap:5%; }
.form .area .group select { width:30%; height:2rem; }

.consent { display:flex; flex-flow:row nowrap; margin:1rem 0; }
.consent input.checkbox { flex:none; margin:0.1rem 0.5rem 0 0; }
.consent label { font-size:var(--smaller); color:var(--dark); }
.consent label a { font-size:var(--smaller); }

.picture { margin-top:-3rem; }

.counter { position:sticky; width:100%; height:5rem; top:0; background:var(--light); }
.counter .cd { height:2.5rem; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
.counter .cd div { display:flex; flex-flow:row nowrap; align-items:center; font-size:var(--small); }
.counter .cd div span { padding:0 0.1rem; font-weight:var(--bold); color:var(--error); -background:var(--lightest); }

.avatar { width:4rem; height:4rem; margin:0.5rem 0; border-radius:50%; overflow:hidden; }

.user { width:100vw; height:40vw; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:flex-start; background:url("../img/bg.jpg") no-repeat top / 100% auto; }
.user .desc { flex:auto; margin-top:2rem; }
.user .desc .name { font-size:var(--large); font-weight:var(--bold); color:var(--lightest); }
.user .desc .subname { font-size:var(--smaller); color:var(--lightest); }
.user .desc .subname span { font-size:var(--smaller); color:var(--lightest); }
.user .tool { width:1.5rem; height:1.5rem; margin:1.5rem 1rem; }
.user .avatar { margin:1.5rem 1rem; }
.user .back { top:2rem; margin-right:-1rem; }

.up { margin:-3rem auto 0 auto; }

.stat { height:5.5rem; display:flex; flex-flow:row nowrap; justify-content:space-around; align-items:center; }
.stat .item { width:100%; height:100%; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; font-size:var(--smaller); }
.stat .item .num { font-size:var(--size); font-weight:var(--bold); color:var(--primary); margin-bottom:0.25rem; }

.stats { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; background:var(--light); -border-radius:var(--border-radius); overflow:hidden; }
.stats .item { position:relative; flex:auto; padding:0.75rem 0; font-size:var(--smaller); color:var(--neutral-dark); text-align:center; }
.stats .item.a { background:var(--lightest); -border-radius:var(--border-radius); font-size:var(--small); font-weight:var(--bold); color:var(--darkeset); }
.stats .item .num { font-size:var(--size); font-weight:var(--bold); color:var(--neutral); }
.stats .item.a .num { color:var(--primary); }

.qrcode { padding:2rem; }
.broad { width:100%; padding:0 1rem; display:flex; flex-flow:row nowrap; justify-content:space-evenly; gap:1rem; }

.card { flex:auto; -width:50%; }
.card .item { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
.card .item .icon { width:2.5rem; height:2.5rem; margin:1rem 0; }
.card .item .num { margin-left:0.5rem; font-size:var(--size); font-weight:var(--bold); color:var(--primary); }
.card .item .tit { margin-left:0.5rem; flex:auto; font-size:var(--size); font-weight:var(--bold); }
.card .item .name { margin-left:0.5rem; flex:auto; font-size:var(--smaller); color:var(--dark); white-space:nowrap; }
.card .item .more { margin-right:0.75rem; font-size:var(--smaller); color:var(--neutral-light); }
.card .item .desc { flex:auto; margin:1rem 0; display:flex; flex-flow:column nowrap; }

.func { display:flex; flex-flow:row wrap; }
.func .head { width:100%; padding:0.75rem 1rem; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; font-size:var(--small); font-weight:var(--bold); }
.func .head .more { font-size:var(--smaller); color:var(--link); padding-right:0.6rem; }
.func .item { width:25%; height:5rem; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; font-size:var(--smaller); }
.func .item .icon { width:2rem; height:2rem; margin-bottom:0.5rem; }

.menu { display:flex; flex-flow:column nowrap; }
.menu .item { font-size:var(--small); height:3.25rem; line-height: 3.25rem; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
.menu .item span { margin-right:1rem; font-size:var(--small); color:var(--neutral); }

.about { margin:1rem; padding:1rem; }
.about .logo { margin:3rem 0; font-size:2rem; font-weight:var(--bold); letter-spacing:0.25rem; text-align:center; }
.about div { margin-top:0.5rem; font-size:var(--small); }
.about a { font-size:var(--small); }

alert .popup.in { animation: popup 400ms cubic-bezier(0.215, 0.61, 0.355, 1) both; }
alert .popup.out { animation: fadeOut 200ms both; }

@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
@keyframes popup {
  0% { opacity:0; transform:scale(0.72); }
  75% { opacity:1; transform:scale(1.02); }
  100% { opacity:1; transform:scale(1); }
}