.pc-ui {display:none !important;}
.pc-flex-ui {display:none !important;}
.detail {padding-top:0;}
.order-detail-view {padding:0;}
.order-detail-view h2 {font-size:20px;border-bottom:1px solid #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding:2px 0;}
.order-detail-view .image-wrap {margin-top:20px;}
.order-detail-view .image-wrap img {width:100%;}

.order-sub-items .image-box {position:relative;margin-bottom:5px;}
.order-sub-items .image-box span {position:absolute;bottom:5px;left:50%;margin-left:-35px;background: #ff765d;color:#fff;padding:2px 10px;border-radius: 3px;font-size:14px;white-space: nowrap}

.detail-comment {margin-top:10px;}
.detail-comment h2 {border-bottom:0;}
/*.order-detail-view .option-item {margin-top:20px;}*/
.order-detail-view .option-item > span {display:block;font-size:11.84px;font-weight:bold;text-align: left;margin:5px;}
.order-detail-view .option-item ul {display: flex;flex-wrap: wrap;border:1px solid #000;padding:10px}
.order-detail-view .option-item ul li {width:33%;padding:0 5px;}
.order-detail-view .option-item ul li button {background: transparent;border:0;cursor: pointer}
.order-detail-view .option-item ul li .option-name {
    color:#000;
}
.order-detail-view .option-item ul li .option-name,
.order-detail-view .option-item ul li .goods-price {
    display:block;font-size:11px;
    color:#000;
}

.order-detail-view .option-item ul li .goods-price {
    font-weight: bold;
}

.order-summary .title-wrap {
    display:flex;justify-content: space-between;align-items: center;padding:10px;margin-top:10px;border-bottom: 1px solid #040000}
.order-summary .title-wrap h3 {font-size:15px;}
.order-summary .title-wrap button {background: transparent;border:1px solid #686868;color:#686868;padding:3px;font-size:10px;cursor: pointer}

.order-items {}
.order-items .order-items-title {
    display:flex;
    justify-content: start;
    align-items: center;
    padding:10px 0;
    border-bottom:1px solid #000;
}
.order-items .order-items-title h2 {
    border:0;
    margin:0 20px 0 0;
    font-size:15px;
    color:#686868;
}

.order-items .order-items-title button,
button.delete-item-btn{
    background: #fff;
    font-size:10px;
    border:1px solid #040000;
    padding:3px 10px;
}


.order-items .option {border-top:0;}
.order-items > ul li {
    border-bottom:1px solid #d6d6d6;
    padding:10px 0;
}
.order-items > ul li .flex-wrap {
    display:flex;
    align-items: flex-start;
    padding:0;
    border-bottom:1px solid #d6d6d6;
}

.mobile-flex-group {
    width:100%;
    display: flex;
    /*align-items: flex-start;*/
}

.mobile-flex-group .checkbox {
    flex-basis: 20px;
    padding:0 10px;
    align-items: center;
}

.mobile-flex-group .image {
    width:68px;
    flex-basis: 68px;
    margin-right:8px;
}

.mobile-flex-group .title-wrap {
    align-items: center;
    text-align: left;
}

.mobile-flex-group .title-wrap h4 {
    font-size:11px;
    color: #242424;
}

.mobile-flex-group .image img {
    width:68px;
    height:68px;
}

.price-section {
    font-size:11px;
    font-weight: bold;
    text-align: right;
    flex:auto;
}

.price-section span {
    color:#ff0000;
}

.order-items ul {
    padding:10px 0;
}

.order-items ul li section.checkbox {
    display: flex;
    justify-content: center;
    /*flex-basis: auto;*/
    /*display:none;*/
    /*flex-basis: 33px;*/
}

.order-items ul li section.image {
    /*width:86px;*/
    /*flex-basis: 86px;*/
    /*margin-right:8px;*/
    /*width:100%;*/
    margin-bottom:10px;
    flex-basis: auto;

}

.order-items ul li section.info {
    flex-basis: 100%;
    /*flex-basis: 314px;*/
}

.order-items ul li section.image img {
    width:100%;
    /*height:86px;*/
    border:1px solid #040000
}
.order-items ul li section.info .options {
    display:flex;
    justify-content: space-between;
    border:0;
}

.order-items ul li section.info ul li {
    border:0;
    display: block;
}

.order-items ul li section.info .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0;
    padding:12px 10px 3px;
    border-bottom:0;
}

.order-items ul li section.info .title-wrap h4 {
    font-weight: 300;
    font-size: 13px;
    margin:0;
}

.order-items ul li section.info .title-wrap p > span {
    color: #ff0000;
    font-size: 13px;
}

.order-modify-btn {
    background: #ff765d;
    border:1px solid #ff765d;
    height:25px;
    line-height:23px;
    box-sizing: border-box;
    border-radius: 15px;
    font-size:14px;
    color:#fff;
    padding:0 8px;
    cursor: pointer;
    width:100%;

}

.order-modify-btn.deactive {
    background: #11984d;
    border:1px solid #11984d;
}

.option-wrap {
    box-sizing: border-box;
    padding:0 1px;
    font-size:10px;
    flex-basis: 33%;
}

.option-wrap .minus-option-btn {
    background: #ff765d;
    border:1px solid #d9462b;
    height:15px;
    line-height:15px;
    box-sizing: border-box;
    border-radius: 0;
    font-size:10px;
    color:#fff;
    padding:0 5px;
    cursor: pointer;
    width: auto;
    margin-left:3px;
}

.option-wrap button + span {
    display: block;
    text-align: left;
    margin-top:6px;
}
.option-wrap .desc-order {
    margin-top:6px;
    padding:0 6px;
}
.option-wrap .desc-order > span {
    display: block;
    text-align: left;

}

.option-wrap .total-info,
.option-wrap .option-items-info {
    text-align: left;
}
.option-wrap .option-items-info ul {
    padding:0;
}
.option-wrap .option-items-info li {
    padding:3px 0;
}

.order-item-total-price {
    text-align: right;
    padding:12px 10px 3px;
    color:#ff0000;
    font-size:12px;
}

.bonus-section {
    margin-top:20px;
}
.bonus-section .bonus-section-header {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:6px 5px;
    border-bottom:1px solid #000;
}
.bonus-section .bonus-section-header h3 {
    font-size:13px;
    color:#0e050a;
    margin-right:5px;
}

.bonus-section .bonus-section-header p {
    font-size:10px;
    padding:4px 2px 1px;
    color:#fff;
    background: #0e8342;
}

.bonus-section .bonus-section-header p span {
    color:#ff0000;
}

.bonus-section .bonus-section-body {
    border-bottom:1px solid #d6d6d6;
    padding:0 0 10px;
}

.bonus-section .bonus-section-body table {
    width:100%;
    border-collapse: collapse;
}
.bonus-section .bonus-section-body table thead th {
    font-size:10px;
    background: #eeeeed;
    color:#040000;
    font-weight: 400;
    padding:10px 0;
}

.bonus-section .bonus-section-body table thead .table-col-size1 {
    width:20px;
}
.bonus-section .bonus-section-body table tbody td {
    font-size:10px;
    padding:5px 0
}
.bonus-section .bonus-section-body table tbody td select {
    width:50px;
}

.bonus-section .bonus-section-body table tbody td input {
    width: 97%;
}

.bonus-section .bonus-section-body table tbody td input::placeholder {
    color: #1f1f1f;
}

.order-total-info {
    margin-top:20px;
    padding:10px 0;
    background: #f5f4f3;
}

.order-total-info .order-price-section {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:10px;
}

.order-total-info .order-price-section .plus-icon {
    font-size:20px;
    color:#040000;
    font-weight: 500;
}

.order-total-info .order-price-section h4 {
    font-size:13px;
    color:#040000;
}

.order-total-info .order-price-section p span {
    color:#ff0000;
}

.order-total-info .order-total-price {
    padding:0 10px;
    font-size:13px;
    color:#ff0000;
    display: flex;
    justify-content: flex-end;
}

.order-total-info .order-total-price h4 {
    margin-right:10px;
    font-weight: 300;
}
.order-total-info .order-total-price h4,
.order-total-info .order-total-price p {
    font-size: 15px;
    color: #282828;
    font-weight: bold;
}

.order-total-info .order-total-price p span {
    color:#ff0000;
}

.alert-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    z-index: 1000;
}

.alert-box.alert-noti.on {
    display: block;
}

.alert-box.alert-noti2.on {
    display: block;
}

.alert-box .alert-content {
    position: fixed;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
}

.alert-box.alert-noti2 .alert-content {
    background: #f2b641;
}

.alert-box.alert-noti2 .alert-content h3 {
    border-bottom:2px solid #0c7d4a;
    padding:10px 20px;
    text-align: center;
    margin-bottom:10px;
    font-size:30px;
}

.alert-box.alert-noti2 .alert-content .btn-box {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.alert-box.alert-noti2 .alert-content .btn-box div {
    color:#fff;
    background: #0c7d4a;
    display: inline-block;
    width:48%;
    height: 150px;
    padding:25px 20px;
    text-align: center;
    font-size:30px;
    border-radius: 1em;
    text-decoration: none;
    cursor: pointer;
}

.alert-box.alert-noti2 .alert-content .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color:#fff;
    cursor: pointer;
    background: transparent;
    width:25px;
}
.alert-box.alert-noti2 .alert-content .explain-box {
    background: #fcefec;
    padding:5px 10px;
    text-align: center;
    color:#040000;
    line-height: 1.5;
    margin-top:20px;
    font-size:15px;
}



.alert-box.alert-noti2 .alert-content .btn-box div span {
    display: block;
    font-size:20px;
}

.alert-box .alert-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 500;
}



@media (min-width:478px) {
    .alert-box.alert-noti2 .alert-content {
        width: 420px;
    }
    .order-items ul li section.checkbox {
        flex-basis: 33px;
        display:block;
    }
    .order-items ul li section.image {
        width:86px;
        flex-basis: 86px;
        margin-right:8px;
    }

    .order-items ul li section.info {
        min-width: 314px;
        flex-basis: calc(100% - 127px);
    }

    .order-items ul li section.image img {
        height:86px;
    }

    .bonus-section .bonus-section-body table tbody td select {
        width:80px;
        padding:5px;
        margin-right:5px;
    }
    .bonus-section .bonus-section-body table tbody td input {
        width:95%;
    }
}

@media (min-width:540px) {
    .bonus-section .bonus-section-body table tbody td select {
        font-size:12px;
    }
}

@media (min-device-width:1400px) {
    .alert-box .alert-content {
        width: auto;
        max-width: 500px;
    }
    .pc-ui {
        display:block !important;
    }
    .pc-flex-ui {
        display:flex !important;
    }
    .mobile-ui {
        display:none !important;
    }
    .order-detail-view {
        width:1400px;
        margin:auto;
    }
    .order-detail-view h2 {
        font-size:30px;
        text-align: left;
        margin-top: 0;
        margin-bottom:0;
    }

    .order-detail-view .goods-info {
        display: flex;
        justify-content: space-between;
    }

    .order-detail-view .image-wrap {
        flex-basis: 600px;
    }
    .order-detail-view .option-item {
        flex-basis: 660px;
        margin-right:60px;
    }
    .order-detail-view .option-item .order-sub-items {
        min-height:490px;
    }
    .order-detail-view .option-item ul {
        border:0;
        padding:0;
        /*min-height:490px;*/
        margin-bottom:10px;
    }

    .order-detail-view .option-item ul li {
        width:20%;
        padding:0;
    }

    .order-detail-view .option-item ul li button .image-box {
        border:1px solid #000;
        width:124px;
        height:124px;
        overflow:hidden;
        position:relative;
    }

    .order-detail-view .option-item ul li button .image-box img {
        width:100%;
    }

    .order-detail-view .option-item ul li button .image-box span {
        bottom:5px;
        font-size:14px;
        background: #ff765d;
        color:#fff;
        /*position:relative;*/
        padding:0 10px 2px;
        border-radius: 3px;
    }

    .order-detail-view .option-item ul li {
        margin-bottom:10px;
    }

    .order-detail-view .option-item .subitem-selected-info {
        align-items: self-start;
        display:flex;
        justify-content: space-between;
        padding:10px 0 0 0;
        border:0;
        margin-top:10px;
        margin-bottom:20px;
    }

    .order-detail-view .option-item .subitem-selected-info > div {
        height:66px;
    }

    .order-detail-view .option-item .subitem-selected-info h2 {
        width:510px;
        font-size:30px;
        border:0;
        margin:0;
    }

    .order-detail-view .option-item .subitem-selected-info h2 + p {
        width:510px;
        font-size:14px;
        color:#7d7d7d;
        text-align: left;

    }
    .subitem-selected-info .price-section {
        font-size:30px;
        color:#ff765d;
        font-weight: bold;
    }

    .mobile-option-seelctor {

    }
    .mobile-option-seelctor select {
        width:100%;
    }
    .order-summary .title-wrap {
        justify-content: end;
    }
    .order-summary .title-wrap button {
        width:128px
    }

    .order-summay-header {
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding:10px 0;
        border-bottom:1px solid #000;
        background:#f1f1f1;
        color:#000;
        font-weight: 400;
        font-size:20px;
    }

    .table-colunm {
        text-align: center;
    }
    .table-colunm.coulnm-1 {
        width:50px;
    }

    .table-colunm.coulnm-2 {
        width:226px;
    }
    .table-colunm.coulnm-3 {
        width:854px;
    }
    .table-colunm.coulnm-4 {
        width:220px;
    }

    .option-wrap {
        font-size:15px;
        flex-basis: 300px;

    }
    .order-items > ul li .flex-wrap {
        align-items: center;
        border-bottom:0;
    }
    .order-items .mobile-flex-group {
        width: auto;
    }
    .order-items ul li section.checkbox {
        flex-basis: 50px;
        display: inherit;
    }

    .order-items ul li section.image {
        flex-basis: 120px;
        width:120px;
    }
    .order-items ul li section.info .title-wrap {
        padding:0;
    }
    .order-items ul li section.info .title-wrap h4 {
        font-size:15px;
        font-weight: bold;
        text-align: left;
    }
    .order-items ul li section.image img {
        width:86px;
        height:86px;
    }

    .order-items ul li section.info {
        flex-basis: 930px;
    }


    .order-items ul li section.order-price-total {
        margin-left:20px;
        color:#ff0101;
        font-size:20px;
        text-align: center;
        flex-basis: 280px;
        font-weight: bold;
        align-items: center;
        justify-content: end;
    }

    .order-modify-btn {
        height:50px;
        line-height:50px;
        font-size:15px;
    }
    .bonus-section .bonus-section-body table thead th {font-size:20px;font-weight:400}
    .bonus-section .bonus-section-body table thead .table-col-size1 {width:60px;}
    .bonus-section .bonus-section-body table thead .table-col-size2 {width:270px;}
    .bonus-section .bonus-section-body table thead .table-col-size3 {width:150px;}
    /*.bonus-section .bonus-section-body table thead .table-col-size4 {width:150px;}*/
    .bonus-section .bonus-section-body table tbody td {
        font-size: 15px;
    }
    .bonus-section .bonus-section-body table tbody td select.select-size {
        width:131px;
    }
    .bonus-section .bonus-section-body table tbody td select.select-color {
        width:246px;
    }
    .bonus-section .bonus-section-body table tbody td select:not([disabled]).select-size,
    .bonus-section .bonus-section-body table tbody td select:not([disabled]).select-color {
        color: blue;
    }

    .bonus-section-header.pc-ui {
        text-align: center;
        padding:10px 0 35px;
        display: block;
    }

    .bonus-section-header.pc-ui h3 {
        color:#0e050a;
        font-size:25px;
    }

    .bonus-desc {
        margin:20px auto;
        background: #a6a6a6;
        color:#fff;
        padding:13px;
        border:1px solid #000;
        font-size:20px;
        width:978px;
    }

    .bonus-desc span {
        color:#ff0000;
    }

    .order-total-info {
        display: flex;
        font-size:20px;
        align-items: center;
        justify-content : center;
    }
    .order-total-info .order-price-section {
        padding:10px 0;
    }

    .order-total-info .order-total-price {
        padding:0;
    }
    .order-total-info .order-price-section h4 {
        font-size:20px;
    }

    .order-total-info .goods-total-price,
    .order-total-info .print-total-price,
    .order-total-info .initial-total-price,
    .order-total-info .delivery-total-price {
        display: flex;
        align-items: center;

    }

    .order-total-info .order-price-section .plus-icon {
        font-size:30px;
        margin:0 20px;
        font-weight: bold;
    }
    .order-total-info .order-price-section p span,
    .order-total-info .order-total-price p span {
        color:#fab300;
    }

    .order-total-info .order-price-section p span {
        display: inline-block;
        margin:0 0 0 20px;
    }

    .order-total-info .order-total-price h4,
    .order-total-info .order-total-price p {
        font-size:20px;
    }

    .order-items ul li section.info ul li {
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .order-items ul li section.info ul li img {
        width:50px;
        margin-right:10px;
    }

}