@import url('../../../../oxjs/addon.css');

/* common */
.ox_func {margin-bottom:10px; text-align:right;}
.ox_func+h4,
.ox_func+.ox_head {margin-top:0;}

.ox_stt_o, .ox_stt_r, .ox_stt_b, .ox_stt_g, .ox_stt_y, .ox_stt_k {display:inline-block; height:1.8em; padding:0 0.4em; background:#F96; font-size:0.9375em; color:#FFF; line-height:1.8em; vertical-align:middle; white-space:nowrap;}
.ox_stt_r {background:#F47;}
.ox_stt_b {background:#3BE;}
.ox_stt_g {background:#8B4;}
.ox_stt_y {background:#FC3; color:#000;}
.ox_stt_k {background:#E6E6E6; color:#000;}
.ox_stt_w {font-size:0.9375em;}

.ox_state {margin-bottom:30px;}
.ox_state dl {width:84%; height:100px; margin:0 auto; padding:0;}
.ox_state dt {position:absolute; overflow:hidden; width:1px; height:1px;}
.ox_state dd {float:left; position:relative; width:25%; height:100px; margin:0; padding:0; line-height:30px; text-align:center;}
.ox_state dd b {position:absolute; top:0; right:0; left:0; height:30px; background:#FFF;}
.ox_state dd a {display:block; position:relative; height:70px; line-height:70px; color:#000;}
.ox_state dd a i {font-weight:bold; font-size:50px; transition:font-size 0.1s;}
.ox_state dd a i:before, .ox_state dd a i:after {display:none;}
.ox_state dd a:hover {color:#000; text-decoration:none;}
.ox_state dd a:hover i {font-size:60px;}
.ox_state .stt_o a:hover i {color:#F96;}
.ox_state .stt_r a:hover i {color:#F47;}
.ox_state .stt_b a:hover i {color:#3BE;}
.ox_state .stt_g a:hover i {color:#8B4;}
.ox_state .stt_y a:hover i {color:#FC3;}
.ox_state .stt_k a:hover i {color:#888;}

.ox_srch {margin-bottom:50px; padding:20px 30px; border-radius:3px; background:#F7F7F7;}
.ox_srch .kwd {width:30%; min-width:150px; max-width:300px;}
.ox_srch select {min-width:100px; max-width:60%;}
.btn_srch_opt {height:1.715em; margin:0 4px; padding:0; border:0; background:none; font-size:0.875rem; line-height:1.715em;}
.btn_srch_opt:before {float:left; margin-right:4px; font-size:12px; color:#333; content:'\25BC';}
.btn_srch_opt.on:before {content:'\25B2';}
.ox_srch .opt+.opt {margin-top:10px;}
.ox_srch .kwd_bar+.opt_bar {margin-top:20px; border-top:2px solid #DDD;}
.ox_srch .opt_bar .opt {margin:20px 0;}
.ox_srch .gap,
.ox_srch .opt select+label,
.ox_srch .opt input[type="number"]+label {margin-left:15px;}
.ox_srch input:read-only {font-style:italic; color:#888;}
.ox_srch .sl {display:inline-block; width:1px; height:1em; margin:0 12px; background:#BBB; vertical-align:middle;}
.ox_srch .btns {margin:10px 0; text-align:center;}
.ox_srch .btns .btn_b {margin:0 2px;}

.ox_tbl_wrap {overflow-x:auto;}
.ox_tbl_wrap>table {min-width:600px;}

.ox_tbl_list tr.go:hover {cursor:pointer;}
.ox_tbl_list tr.go a:hover {color:#000; text-decoration:none;}
.ox_tbl_list tr.go td[onclick] {cursor:default;}
.ox_tbl_list th.num {width:70px;}
.ox_tbl_list td.num {padding-left:5px; padding-right:5px; white-space:nowrap;}
.ox_tbl_list th.edit {width:20px; font-size:10px; letter-spacing:-10px; color:#F6F6F6;}
.ox_tbl_list.fixed div.nobr {overflow:hidden; width:100%; text-overflow:ellipsis;}

tr.disabled td,
tr.disabled a,
tr.disabled a:hover,
td.disabled,
td.disabled a,
td.disabled a:hover {font-style:italic; color:#888!important;}

.a_pop {border-bottom:1px solid #000; color:#000;}
.a_pop:hover {border-bottom:none; color:#000; text-decoration:none;}

.btn_pay {display:inline-block; min-width:150px; height:2.5em; margin:7px 5px; padding:0 20px; border-radius:1.25em; background:#567; font-size:1.125em; color:#FFF; line-height:2.5em; text-align:center; vertical-align:middle; white-space:nowrap; transition:background 0.3s;}
.btn_pay:hover {background:#345; color:#FFF; text-decoration:none;}

.lst_pay, .lst_pay ul {margin:0; padding:0; list-style:none;}
.lst_pay li {margin:0; padding:0;}
.lst_pay>li {border-bottom:1px solid #DDD;}
.lst_pay>li:first-child {border-top:3px solid #888;}
.lst_pay .empty {padding:50px 0; text-align:center;}
.lst_pay .item {padding:30px 0;}
.lst_pay .item:after {display:block; clear:both; content:'';}
.lst_pay .stt_o, .lst_pay .stt_r, .lst_pay .stt_b, .lst_pay .stt_k {float:left; width:84px; height:84px; margin:-3px -120px -3px 0; border:3px solid #BBB; border-radius:50%; font-weight:normal; font-size:15px; color:#888; line-height:84px; text-align:center;}
.lst_pay .stt_b {border-color:#555; color:#000;}
.lst_pay .note {margin-left:120px; line-height:28px;}
.lst_pay .date {}
.lst_pay .txt {color:#888;}
.lst_pay .amt {font-weight:600;}
.lst_pay .btn_receipt {display:inline-block; height:22px; margin:2px 5px; padding:0 5px; border:1px solid #BBB; border-radius:3px; font-weight:normal; font-size:14px; color:#888; line-height:22px; vertical-align:top;}
.lst_pay .btn_receipt:hover {border-color:#555; color:#000; text-decoration:none;}
.lst_pay .pay {}
.lst_pay .cd:before {content:'\0028';}
.lst_pay .cd:after {content:'\0029';}
.lst_pay .code {color:#888;}
.lst_pay .more {float:right; overflow:hidden; width:24px; height:24px; margin:0; padding:0; border:1px solid #BBB; border-radius:0; background:#FFF; font-size:14px; -webkit-appearance:none;}
.lst_pay .more:before {float:left; width:8px; height:8px; margin:5px 7px 9px; box-shadow:inset -1px -1px #999; transform:rotate(45deg); content:'';}
.lst_pay .more.on:before {margin:9px 7px 5px; transform:rotate(225deg);}
.lst_pay .note+div {clear:both; padding-top:30px;}
.lst_pay .log {padding:10px 20px; border-radius:10px; background:#F3F3F3;}
.lst_pay .log b {margin:0 5px;}
.lst_pay>li:hover .more {border-color:#000;}
.lst_pay>li:hover .more:before {box-shadow:inset -1px -1px #000;}

/* receipt */
.ox_receipt {width:100%; max-width:550px; margin:0 auto; padding:0 20px; border:2px solid #000; box-sizing:border-box;}
.ox_receipt h2 {font-size:30px; line-height:90px; text-align:center; text-indent:30px; letter-spacing:30px;}
.ox_receipt table {width:100%; border:1px solid #000; table-layout:fixed;}
.ox_receipt caption {display:none;}
.ox_receipt th, .ox_receipt td {padding:10px 0; border:1px solid #000; font-size:13px;}
.ox_receipt th {width:20%; background:#F6F6F6; font-weight:normal; text-align:center;}
.ox_receipt td {padding:10px; text-align:left;}
.ox_receipt p {margin-top:50px; font-size:17px; text-align:center;}
.ox_receipt .date {margin-top:0;}
.ox_receipt .sign {margin:30px 0; font-weight:600; font-size:19px; text-align:center;}
.ox_receipt .sign .nm {letter-spacing:-1px;}
.ox_receipt .sign .in {display:inline-block; position:relative; width:100px; height:100px; line-height:100px; text-align:center; vertical-align:middle;}
.ox_receipt .sign .in img {position:absolute; top:0; left:0; width:100px; height:100px;}