@import url('/css/icheck-material.css');

/* member_center */
.member_center {margin: .5em;outline: .5em color-mix(in srgb, var(--g_100) 60%, white) solid;border: 1px var(--g_100) solid;background-color: #fff;}

/* copy */
[data-action="copy"] { margin-left: 1em; padding: .3em 1em; background: var(--blue); color: white; }
[data-action="copy"]:active { -webkit-animation: bounce .2s 1 linear; animation: bounce .2s 1 linear; }

.btnBox{display:flex;flex-direction:column;align-items: center;margin:40px 0}
.btnBox .send_btn{padding:.4em .5em;width:10em;background:var(--primary);display:block;text-align:center;color:white;cursor:pointer}


/* card_title */
.card_title { padding: 1em; border-bottom: 1px var(--g_100) solid; display: flex; flex-wrap: wrap; align-items: center; }
.card_title .focus { margin: 0 1em; line-height: 1; font-size: 1.3em; color: var(--primary); }

/* table_box */
.table_box { margin: 1em; }
.table_box table { position: relative; width: 100%; table-layout: fixed; }
.table_box table tr >* { padding: 1.3em .3em; border-bottom: 1px var(--g_200) solid; text-align: center; }
.table_box table tr th { padding: .5em .3em; border-bottom: 2px var(--g_600) solid; font-weight: 500; font-size: 1.1em; }
.table_box table tr:nth-child(2n) td , .table_box table tr.even td { background: color-mix(in srgb, var(--g_200) 20%, white); }
.table_box table tr:last-child td { border-color: transparent; }
.table_box table tr .operate button { padding: .3em 1em; background: var(--primary); display: inline-block; text-align: center; color: white; cursor: pointer; }
.table_box table tr .show_time { display: flex; align-items: center; }
.table_box table tr .show_time font { line-height: 1.2; }
.table_box table tr.order_detail td { padding: 0 .3em; background: white; border-bottom: 0; }
.table_box table tr.order_detail[data-type="1"] td { padding: .3em; }

/* delall */
#delall { padding: .2em 1em; background: var(--red); color: white; }

/* track_list */
#track_list { margin: 1em; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.3em; }
#track_list .item_row { border: 2px var(--g_100) solid; }
#track_list .category_btn { position: absolute; padding: .4em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; top: 1em; left: 1em; z-index: 2; }
#track_list .img_box img { width: 100%; aspect-ratio: 1/1; }
#track_list .info_box { position: relative; padding: 1em; }
#track_list .info_box * { margin-bottom: .3em; text-align: center; }
#track_list .info_box [class*="icheck-material"] { position: absolute; margin: 0; top: .5em; right: .2em; z-index: 5; }
#track_list .info_box button { padding: .1em .8em; position: relative; background: var(--red); font-size: .9em; color: white; z-index: 11; }
#track_list .price_box { margin-bottom: 0; display: flex; align-items: baseline; justify-content: center; }
#track_list .price_box * { margin: 0 .2em; font-weight: 500; font-size: .9em; color: var(--g_300); }
#track_list .price_box ins { text-decoration: none; font-size: 1em; color: var(--primary); }

/* order_detail */
.order_detail .row { position: absolute; right: 0; left: 0; opacity: 0; z-index: -1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top center; transform-origin: top center; }
.order_detail .order_list .row_item { grid-template-columns: 60px repeat(6, 1fr); }
.order_detail .order_list .row_item.list .img a { width: 55px; }
.order_detail .amt_box { margin-top: 1em; }
.order_detail .amt_box p { display: flex; justify-content: flex-end; align-items: center; }
.order_detail .amt_box p font { width: 10em; text-align: right; }
.order_detail .order_box { margin-top: 0; padding: .8em 0 1em; background: transparent; }
.order_detail .order_box h5 { margin: 0 0 .2em; }
.order_detail .order_box >div { padding: 0; grid-gap: 0; }
.order_detail .form_box .flex_style { border-bottom: 1px var(--g_100) solid; }
.order_detail .form_box .flex_style:last-child { border-bottom: 0; }
.order_detail[data-type="1"] .row { position: static; opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); }

@keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(.85); } to { transform: scale(1); } }
@-webkit-keyframes bounce { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(.85); } to { -webkit-transform: scale(1); } }

@media screen and (max-width: 980px) {
	.order_detail .order_list .row_item { grid-template-columns: 80px 1fr 150px; }
	.order_detail .order_list .row_item.list .img a { width: 70px; }
}
@media screen and (min-width: 769px) {
	.table_box table tr .operate { padding: 1em .3em; }
	.table_box table tr .show_time { padding: 1em .3em; flex-direction: column; }
}
@media screen and (max-width: 768px) {
	.table_box table tr th { display: none; }
	.table_box table tr td { padding: .3em 1em; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 0; }
	.table_box table tr td:before { margin-right: 2em; width: 6em; font-weight: 500; text-align: left; color: var(--g_600); content: attr(data-th); }
	.table_box table tr td:nth-child(1) { padding-top: 1em; }
	.table_box table tr td.icheck { padding-top: 0; }
	.table_box table tr td.icheck .icheck-material-custom { position: absolute; top: 1.5em; right: 1em; }
	.table_box table tr td:last-child { padding-bottom: 1rem; border-bottom: 1px var(--g_100) solid; }
	.table_box table tr .time { margin-right: .2em; }
	.table_box table tr .show_time font { margin-right: .2em; color: currentColor; }
	.table_box table tr.order_detail td { padding: 0 .3em; display: block; }
	.table_box table tr.order_detail td:before { display: none; }
	#track_list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 551px) {
	.order_detail .form_box .flex_style label { margin-right: 1em; padding: .5em; width: 8.5em; background: color-mix(in srgb, var(--g_100) 50%, white); text-align: inherit; text-justify: inherit; text-align-last: inherit; }
}
@media screen and (max-width: 550px) {
	#track_list { margin: 1em auto; width: min(100%, 300px); grid-template-columns: repeat(1, 1fr); }
	.table_box table tr td { align-items: flex-start; }
	.table_box table tr td:before { width: 100%; }
	.order_detail .order_list .row_item { grid-template-columns: repeat(1, 1fr); }
	.order_detail .form_box .form_item label { padding: .5em; width: 100%; background: color-mix(in srgb, var(--g_100) 50%, white); display: block; }
	.order_detail .form_box .flex_style >font { padding: .5em; min-height: 2.5em; }
}