/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
	=product-list
-----------------------------------------------------------------------------*/

#content-main .order h2 {
    display: none;
}

.order .wrap h3 {
    display: none;
}

.order .detail-wrap,
.order .check-wrap {
    position: relative;
    border: 1px solid #f09192;
}

/**
*
* =list
*
**/

#content-main .order .list ul,
#content-main .order .detail .product-info ul {
    list-style: none;
}

#content-main .order .list ul li {
    margin: 0 1% 40px;
}

#content-main .order .list ul li .info,
#content-main .order .product-info ul li .info {
    overflow: hidden;
    padding: 10px;
    background-color: #cceaef;
    line-height: 32px;
}

#content-main .order .list ul li .info h4,
#content-main .order .product-info ul li .info h4 {
    float: left;
    margin-right: 20px;
    color: #0095b1;
    font-size: 20px;
}

#content-main .order .list ul li .info p,
#content-main .order .product-info ul li .info p {
    float: left;
    color: #0095b1;
    font-weight: bold;
    font-size: 20px;
}

#content-main .order .list ul li .info p span,
#content-main .order .product-info ul li .info p span {
    display: inline-block;
    width: 70px;
    height: 27px;
    margin: 0 0 0 20px;
    background: url(../../i/icon-pay.png) no-repeat 0 0;
    vertical-align: middle;
}

#content-main .order .list ul li .info .func,
#content-main .order .product-info ul li .info .func {
    float: right;
}

#content-main .order .list ul li .info .func a,
#content-main .order .product-info ul li .info .func a {
    color: #be5c26;
}

#content-main .order .list ul li .info .func a.msg,
#content-main .order .product-info ul li .info .func a.msg {
    color: #be5c26;
}

#content-main .order .list ul li .info .func a.msg:after,
#content-main .order .product-info ul li .info .func a.msg:after {
    content: "|";
    padding: 0 0 0 7px;
    color: #be5c26;
}

#content-main .order .list ul li ul,
#content-main .order .product-info ul li ul {
    border: 1px solid #cceaef;
    background-color: #fff;
}

#content-main .order .list ul li ul li,
#content-main .order .product-info ul li ul li {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #cceaef;
}

#content-main .order .list ul li ul li:last-child,
#content-main .order .product-info ul li ul li:last-child {
    border: none;
}

#content-main .order .list ul li ul li img,
#content-main .order .product-info ul li ul li img {
    float: left;
    margin: 0 50px;
}

#content-main .order .list ul li ul li h5,
#content-main .order .product-info ul li ul li h5 {
    margin-right: 30px;
    padding: 20px 0 0;
    color: #008ca5;
    font-weight: normal;
    font-size: 20px;
    vertical-align: middle;
}

#content-main .order .list ul li ul li h5 span,
#content-main .order .product-info ul li ul li h5 span {
    display: block;
    color: #e56452;
    font-weight: bold;
}

#content-main .order .list ul li ul li p,
#content-main .order .product-info ul li ul li p {
    position: absolute;
    top: 30px;
    right: 10px;
    color: #0095b1;
    font-weight: bold;
    font-size: 20px;
}

#content-main .order .list ul li ul li p.subtotal,
#content-main .order .product-info ul li ul li p.subtotal {
    position: absolute;
    top: auto;
    bottom: 10px;
    right: 10px;
    font-size: 18px;
}

#content-main .order .list ul li ul li p.subtotal span,
#content-main .order .product-info ul li ul li p.subtotal span {
    margin-left: 20px;
    color: #be5c26;
    font-weight: bold;
    font-size: 20px;
}

#content-main .order .list ul li .summary,
#content-main .order .product-info ul li .summary {
    overflow: hidden;
    padding: 10px;
    border: 1px solid #0095b1;
    background-color: #cceaef;
    color: #0095b1;
    font-weight: bold;
    font-size: 20px;
}

#content-main .order .list ul li .summary p,
#content-main .order .product-info ul li .summary p {
    float: left;
    margin: 0 2%;
}

#content-main .order .list ul li .summary p span.shipping {
    margin: 0 10px;
    color: #303030;
}

#content-main .order .list ul li .summary p span.shipping:before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url(../../i/icon-family-logo.jpg) no-repeat -5px 0;
    vertical-align: middle;
}

#content-main .order .list ul li .summary p.total,
#content-main .order .product-info ul li .summary p.total {
    float: right;
    margin: 0;
}

#content-main .order .list ul li .summary p.total span,
#content-main .order .product-info ul li .summary p.total span {
    margin-left: 10px;
    color: #be5c26;
}

/**
*
* =page
*
**/

#content-main .order .list .page {
    overflow: hidden;
    width: 60%;
    height: 25px;
    margin: 50px auto 20px;
    padding-top: 50px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

#content-main .order .list .page a {
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 5px;
    border: 2px solid #e5b025;
    border-radius: 8px;
    color: #e5b025;
    vertical-align: middle;
    outline: none;
}

#content-main .order .list .page a.active {
    border: 2px solid #008ca5;
    color: #008ca5;
}

#content-main .order .list .page a.first {
    background: url(../../i/icon-first.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.prev {
    background: url(../../i/icon-prev.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.next {
    background: url(../../i/icon-next.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.last {
    background: url(../../i/icon-last.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.hid {
    border-color: #e9e9e9;
}

#content-main .order .list .page a.first.hid {
    background: url(../../i/icon-first-hid.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.prev.hid {
    background: url(../../i/icon-prev-hid.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.next.hid {
    background: url(../../i/icon-next-hid.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.last.hid {
    background: url(../../i/icon-last-hid.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a:hover {
    border: 2px solid #008ca5;
    color: #008ca5;
    text-decoration: none;
}

#content-main .order .list .page a:focus {
    text-decoration: none;
}

#content-main .order .list .page a.first:hover {
    background: url(../../i/icon-first-hover.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.prev:hover {
    background: url(../../i/icon-prev-hover.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.next:hover {
    background: url(../../i/icon-next-hover.png) no-repeat center center;
    background-size: 65% 65%;
}

#content-main .order .list .page a.last:hover {
    background: url(../../i/icon-last-hover.png) no-repeat center center;
    background-size: 65% 65%;
}

/**
*
* =detail
*
**/

.order .detail {
    position: relative;
    margin: 0 1% 50px;
}

#content-main .order .detail h3 {
    display: block;
    padding: 10px;
    border: 2px solid #0095b1;
    color: #0095b1;
    font-size: 20px;
}

.order .detail .product-info {
    margin-bottom: 30px;
}

.order .detail .product-info .shot {
    display: block;
    position: absolute;
    top: -33px;
    right: 10px;
    padding: 0 0 0 38px;
    background: url(../../i/icon-shot.png) no-repeat 0 3px;
    color: #a35253;
    font-size: 24px;
}

.order .detail .product-info img {
    float: left;
    margin: 0 30px 0 0;
    border: 1px solid #008ca5;
}

.order .detail .product-info h5 {
    color: #303030;
    font-size: 24px;
}

.order .detail .product-info .btn-msg {
    float: right;
    width: 56px;
    height: 76px;
    background: url(../../i/icon-msg.png) no-repeat 0 0;
    text-indent: -100000px;
    outline: none;
}

.order .detail .order-info,
.order .detail .pay-info {
    margin-bottom: 30px;
}

.order .detail h6 {
    margin-bottom: 8px;
    padding: 0 0 0 34px;
    background: url(../../i/icon-money.png) no-repeat left center;
    color: #0095b1;
    font-weight: normal;
    font-size: 24px;
}

.order .detail table {
    width: 100%;
}

.order .detail table {
    margin-bottom: 8px;
    border: 1px solid #cceaef;
    color: #838383;
    font-size: 24px;
}

.order .detail table td {
    padding: 10px;
    border-bottom: 1px dashed #0095b1;
    font-weight: bold;
}

.order .detail table td:last-child {
    color: #595959;
}

.order .detail table tr:last-child td {
    border: none;
}

.order .detail table td.title {
    width: 200px;
    background-color: #cceaef;
    text-align: right;
}

.order .detail table .no-border td {
    border: none;
}

.order .detail table td.premium {
    background-color: #fff;
}

.order .detail table td.premium span {
    display: inline-block;
    width: 75px;
    height: 35px;
    padding-left: 40px;
    background: url(../../i/icon-diamond.png) no-repeat 0 0;
}

.order .detail table td.ship span {
    display: inline-block;
    padding-left: 70px;
    background: url(../../i/icon-truck01.png) no-repeat 0 0;
}

.order .detail table td img {
    margin-right: 8px;
    vertical-align: -5px;
}

.order .detail table td .map {
    display: inline-block;
    min-height: 30px;
    margin: 0 0 0 20px;
    padding: 0 0 0 35px;
    background: url(../../i/icon-map.png) no-repeat 0 0;
    color: #26acec;
}

.order .detail table td .invoice-status {
    margin-left: 40px;
}

.order .detail .deliver-info table {
    margin-bottom: 8px;
    border: 1px solid #e5b025;
    color: #838383;
    font-size: 24px;
}

.order .detail .deliver-info h6 {
    background: url(../../i/icon-car.png) no-repeat left center;
    color: #e5b025;
}

.order .detail .deliver-info table td.title {
    background-color: #f9eccb;
}

/**
*
* =check
*
**/

.order .check-wrap {
    padding-bottom: 30px;
}

.order .check-wrap ul {
    list-style: none;
}

.order .check-wrap ul li {
    padding: 0 0 10px;
}

.order .check-wrap ul li .info {
    overflow: hidden;
    padding: 10px 20px;
    background-color: #f9d3d3;
}

.order .check-wrap ul li .info p {
    float: left;
    margin: 0 50px 10px 0;
    color: #000;
    font-size: 20px;
}

.order .check-wrap ul li .info p strong {
    display: block;
    color: #a35253;
    font-weight: normal;
}

.order .check-wrap ul li .info p a {
    display: inline-block;
    position: relative;
    padding: 0 20px 0 0;
    color: #00a0e9;
}

.order .check-wrap ul li .info p a:after {
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
    content: " ";
    width: 15px;
    height: 10px;
    background: url(../../i/icon-arrow-down05.png) no-repeat 0 0;
}

.order .check-wrap ul li .info .total {
    margin-right: 0;
}

.order .check-wrap ul li .info p.pickup {
    float: right;
    margin: 0;
}

.order .check-wrap ul li .info p.pickup img {
    margin: 0 5px 0 0;
    vertical-align: -7px;
}

.order .check-wrap ul li .detail {
    margin-bottom: 20px;
    padding: 20px;
}

.order .check-wrap ul li .detail img {
    float: left;
    border: 1px solid #f09192;
}

.order .check-wrap ul li .detail .content {
    position: relative;
    margin-left: 165px;
    padding: 0 63px 10px 0;
    border-bottom: 1px dashed #f09192;
}

.order .check-wrap ul li .detail .content h4 {
    margin-bottom: 30px;
    background-color: transparent;
    color: #303030;
    font-size: 24px;
}

.order .check-wrap ul li .detail .content p {
    margin-bottom: 20px;
    color: #e56452;
    font-size: 24px;
}

.order .check-wrap ul li .detail .content p.status {
    margin: 0;
    color: #000;
}

.order .check-wrap ul li .detail .content .btn-order {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 76px;
    background: url(../../i/icon-msg.png) no-repeat 0 0;
    text-indent: -100000px;
}

.order .check-wrap ul li .progress {
    overflow: hidden;
    width: 70%;
    margin: 0 auto;
    list-style: none;
}

.order .check-wrap ul li .progress li {
    float: left;
    overflow: hidden;
    width: 25%;
    text-align: center;
}

.order .check-wrap ul li .progress li span {
    display: block;
    position: relative;
    z-index: 2;
    height: 25px;
    margin: 0 auto 5px;
    background: url(../../i/icon-circle03.png) no-repeat center;
}

.order .check-wrap ul li .progress li.active span:before,
.order .check-wrap ul li .progress li.active span:after {
    background: url(../../i/line03.png) no-repeat center;
}

.order .check-wrap ul li .progress li span:before,
.order .check-wrap ul li .progress li span:after,
.order .check-wrap ul li .progress li.now span:after {
    display: block;
    position: absolute;
    top: 8px;
    content: " ";
    width: 100%;
    height: 10px;
    background: url(../../i/line02.png) no-repeat center;
}

.order .check-wrap ul li .progress li span:before {
    right: 50%;
    margin-right: 13px;
}

.order .check-wrap ul li .progress li span:after {
    left: 50%;
    margin-left: 13px;
}

.order .check-wrap ul li .progress li:first-child span:before,
.order .check-wrap ul li .progress li:last-child span:after {
    content: "";
    background: none;
}


.order .check-wrap ul li .progress li.active span {
    background: url(../../i/icon-circle01.png) no-repeat center;
}

.order .check-wrap ul li .progress li.now span {
    background: url(../../i/icon-circle02.png) no-repeat center;
    
}

.order .check-wrap ul li .progress li em {
    display: block;
    color: #9fa0a0;
    font-style: normal;
    font-weight: bold;
    font-size: 21px;
}

.order .check-wrap ul li .progress li.now em {
    color: #00a0e9;
}

/* +width: 900↓
*----------------------------------------------------------------------------*/

@media screen and (max-width: 900px) {

#content-main .order .wrap {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

#content-main .order .list ul li .summary p,
#content-main .order .product-info ul li .summary p {
    margin: 0 30px;
}
}

/* +width: 680↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 680px) {

#content-main .order .list ul li .info .func,
#content-main .order .detail .product-info ul li .info .func {
    float: none;
    clear: both;
}

#content-main .order .list ul li .summary p,
#content-main .order .detail .product-info ul li .summary p {
    float: none !important;
    margin: 0;
}


.order .check-wrap ul li .progress {
    width: 98%;
}

#content-main .order .list .page {
    width: 100%;
}
}

/* +width: 550↓
*----------------------------------------------------------------------------*/

@media screen and (max-width: 550px) {

#content-main .order .list ul li ul li img,
#content-main .order .product-info ul li ul li img {
    display: block;
    float: none;
    margin: 0 auto;
}

#content-main .order .list ul li ul li h5,
#content-main .order .product-info ul li ul li h5 {
    float: left;
    margin-right: 50px;
}

#content-main .order .list ul li ul li p,
#content-main .order .product-info ul li ul li p {
    position: absolute;
    top: auto;
    right: 10px;
    padding-top: 20px;
}
}

/* +width: 480↓
*----------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {

.order .detail table td.title {
    width: 150px;
}

.order .detail .product-info {
    padding-top: 35px;
}

.order .detail .product-info .shot {
    top: 0;
}

.order .detail .product-info img {
    display: block;
    float: none;
    clear: both;
    max-width: 100%;
    margin: 0 auto;
}

.order .detail .product-info .btn-msg {
    float: right;
    width: 56px;
    height: 76px;
    background: url(../../i/icon-msg.png) no-repeat 0 0;
    text-indent: -100000px;
    outline: none;
}
}