
#contents {
    width: 100%;
}
#contents .full_page {
    width: 1066px;
    margin: 0 auto;
} 
.page {
    margin: 100px auto;
}
#mypage {
    width: 100%;
}  
#mypage .order_check {
    margin-bottom: 45px;
} 
.mp_title {
    margin: 0; 
    font-size: 25px;
    color: #191919;
    margin-top: 40px;
    font-family: var(--main-fonts);
    display: flex;
    align-items: flex-start;
} 
#mypage .mp_title {
    margin-top: 0;
}
div.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
} 
div.title a {
    font-size: 16px;
    color: #7f7f7f;
    font-family: var(--main-fonts);
    display: flex;
    align-items: center;
}
div.title a img {
    margin-left: 5px;
    width: 5px;
    height: 8px;
}


.han {
    font-family: var(--main-fonts) !important;
}
.num {
    font-family: var(--main-fonts) !important;
}

.order_info_wrap {
    width: 100%; 
    background: #f7f7f7;
    padding: 15px 20px;
    border-radius: 5px;
}
.order_info_wrap * {
    font-family: var(--main-fonts);
}
.order_info_wrap .search_date {
    padding-bottom: 15px;
    font-size: 17px;
    border-bottom: 1px solid #e3e3e3;
}
.order_info_wrap .search_date span {
    font-family: var(--main-fonts);
}

.order_info_wrap .search_date span.rel {
    margin-left: 35px; 
    position: relative;
}
.order_info_wrap .search_date span.rel::before {
    position: absolute;
    top: 2px;
    left: -19px;
    content: '';
    width: 1px;
    height: 17px;
    background: #dddddd;
}
.order_info_wrap .order_sch_wrap p {
    margin: 0;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 17px;
}
.period {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.period li {
    width: 18.5%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #f1f1f1; 
    background: #fff;
    color: #7f7f7f;
    cursor: pointer;
}
.period li div {
    display: block;
}
.period li.on {
    border: 1px solid #191919;
    color: #191919;
}

.order_info_wrap .order_sch_wrap p span {
    margin-left: 5px;
    font-size: 15px;
    color: #7f7f7f;
}
.prd_stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prd_stat li {
    width: 11.5%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #f1f1f1;
    background: #fff;
    color: #7f7f7f;
    cursor: pointer;
}
.prd_stat li div {
    display: block;
}
.prd_stat li.on {
    border: 1px solid #191919;
    color: #191919;
}

.product_info {
    border-bottom: 1px solid #e3e3e3;
    background:#fff;
}
.order_info {
    padding: 35px 0 20px 0;
    border-bottom: 2px solid #191919;
}
.order_stat {
    font-size: 16px;
    margin-left: 0px;
    position:relative;
    font-family: var(--main-fonts);
}
.order_stat a {
    font-size: 16px;
    margin-left: 0px;
    position:relative;
    font-family: var(--main-fonts);
}
.order_mng_wrap .date {
    margin-right: 15px;
    position:relative;
    color:#191919;
    font-weight: bold;
    font-size: 24px;
    font-family: var(--main-fonts);
    letter-spacing: -.5px;
}
.order_mng_wrap .order_num {
    position: relative;
    color: #191919;
    font-size: 17px;
}
.detail {
    color: #7f7f7f;
    font-size: 17px;
    float: right; 
    padding-top: 8px;
    font-family: var(--main-fonts);
}
.order_mng_wrap {border-bottom:none;}
.prd_item {
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 35px 0;
}
.prd_item > div.prdlitem {
    display: flex;
    align-items: center;
}
.prd_img {width:120px;height:120px;margin-right:20px;}
.prd_img img {width:100%;}
.prd_img .thumb{position:relative;padding-top:100%;overflow:hidden;}
.prd_img .thumb .centered{position:absolute;top:0;left:0;right:0;bottom:0;transform:translate(50%,50%);}
.prd_img .thumb img {position:absolute;top:0;left:0;max-width:100%;max-height:100%;transform:translate(-50%,-50%);filter: brightness(0.95);}
.prd_info {width:400px;}
.prd_info .sub_title {
    font-family: var(--main-fonts);
    color: #8f8f8f;
    letter-spacing: -.5px;
    font-size: 15px; 
    margin-bottom: 5px;
    margin-top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} 
.prd_info .name {
    color: #0e0e0e;
    overflow: hidden;
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-family: var(--main-fonts);
    font-weight: 500;
    letter-spacing: -1px;
    font-size: 17px;
    margin: 0;
    margin-bottom: 10px;
}
.prd_info .option {
    font-family: var(--main-fonts);
    color: #8f8f8f;
    letter-spacing: -.5px;
    font-size: 16px; 
    margin-bottom: 5px;
    margin-top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prd_info p {font-size:15px;margin-bottom:12px;}
.prd_info .price .price_1, .prd_info .price .order_amount {
    font-family: var(--main-fonts);
    font-size: 19px;
    color: #0e0e0e;
    font-weight: 600;
    letter-spacing: -.5px;
}
.prd_info .price small {
    font-family: var(--main-fonts);
    font-size: 14px;
    font-weight: 600;
}
.prd_info .price .order_amount {
    margin-left:30px;
    position:relative;
    color:#797979;
    font-size: 16px;
}
.prd_info .price .order_amount::before {
    content: '';
    position: absolute; 
    top: 4px;
    left: -16px; 
    background: #ebebeb;
    width: 1px;
    height: 15px;
}
.delivery_info {text-align:center;}
.torder_detail {
    margin:5px auto;
    font-size:16px;
    border:1px solid #e3e3e3;
    display:block; 
    width:110px;
    height:36px;
    text-align:center;
    line-height:36px;
    background:#fff;
    color:#7f7f7f;
    font-family: var(--main-fonts);
}
.product_info {position:relative;}
/*.product_info:after {
    position: absolute; 
    display: none;
    content: '';
    width: 10px; 
    height: 10px;
    top: -7px; 
    left: 20px;
    margin-top: -3px;
    border-bottom: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    transform: rotate(225deg) translateY(-50%);
    background:#fff;
}*/
.order_info_close {float:right;}
.datepick {
    text-align: center;
    display: none;
}
.datepick_input {display:flex;align-items:center;justify-content:flex-start;margin-left:194px;margin-top:18px;margin-bottom:20px;}
.datepicker {
    outline: 0;
    border: none;
    padding: 10px 0px;
    width: 150px;
    text-align: center; 
    font-family: var(--main-fonts);
}
.date_btn {
    text-align: center;
    margin-top: 30px;
}
.datepicker_label {margin-left:5px;cursor:pointer;background:#323232;border-radius:17px;width:34px;height:34px;display:inline-block;text-align:center;}
.datepicker_label img {width:23px;padding-top:7px;padding-left:1px;}
.ui-state-default, .ui-widget-content .ui-state-default {
    border:1px solid #fff;background:#fff;color:#323232;text-align:center;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background:#5f0080;color:#fff;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background:#802e9e;color:#fff;border:none;;
}
.ui-datepicker .ui-datepicker-title {font-weight:500;display:flex;justify-content:center;height:45px;line-height:45px;}
.ui-datepicker .ui-datepicker-title select {border:0; outline:0;background:#191919;color:#fff;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width:20%;}
.order_info_wrap button {
    width: 165px;
    height: 50px; 
    outline: 0;
    cursor: pointer;
    border-radius: 5px;
}
.date_btn_l {border: 1px solid #323232;color:#323232;background:#fff;margin-right:6px;}
.date_btn_r {border: 1px solid #323232;background:#323232;color:#fff;}
#ui-datepicker-div * {font-family: var(--main-fonts) !important;}
#ui-datepicker-div {top:684px !important;}
.ui-datepicker {width:400px;height:auto;padding:0;border-radius:0px;}
.ui-datepicker .ui-datepicker-header {background:#191919;color:#fff;border-radius:0;padding:0;height:45px;}
.ui-widget-header {border:none;}
.ui-icon-circle-triangle-w {background:url(/common/front/img/mypage/date_left.png) no-repeat !important;}
.ui-icon-circle-triangle-e {background:url(/common/front/img/mypage/date_right.png) no-repeat !important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top:8px;}
.ui-state-default, .ui-widget-content .ui-state-default {height:55px;box-sizing:border-box;padding-top:18px;}
.ui-datepicker th {color:#797979;font-weight:500;}
.ui-datepicker-calender {border-bottom:1px solid #dcdcdc;}
.ui-datepicker table {padding:20px;border-collapse:inherit;}
.ui-datepicker select.ui-datepicker-year {margin-right:10px;}
a.ui-datepicker-prev.ui-corner-all:hover, a.ui-datepicker-next.ui-corner-all:hover{cursor:pointer;background:#191919;border:1px solid #191919;}

.prd_rep {position:relative; }
.prd_btn {display:flex; padding-top: 15px;}
.prd_btn .btn_pr {cursor:pointer;font-size:15px;border:1px solid dimgrey;color:dimgrey;outline:0;padding:4px 14px;margin-right:10px; border-radius: 5px;}
.prd_btn .btn_pr:last-child {margin-right:0;}
.rep_wrapper {display:none;cursor:auto;position:absolute;top:36px;left:0px;z-index:2;}
.rep_wrapper.open {display:block !important;}
.rep_div {width:208px;border:1px solid #191919;background:#fff;position:relative;padding:8px;}
.rep_div p {font-size:14px;color:#191919;margin:0;margin-bottom:3px;}
.rep_div .close_rep {cursor:pointer;position:absolute;top:8px;right:8px;width:12px;height:12px;}
.rep_div:after {position: absolute;content: '';width: 8px; height: 8px;top: -5px; left: 20px;margin-top: -4px;border-bottom: 1px solid #191919;border-right: 1px solid #191919;transform: rotate(225deg) translateY(-50%);background:#fff;}
.rep_yes button{font-size:14px;background:#802e9e;color:#fff;width:75px;height:24px;border:0;outline:0;}
.rep_no span {font-size:13px;}

.order_info_wrap * {
    transition: all .3s;
}
.search_date .closed {
    color: #7f7f7f;
    float: right;
    cursor: pointer;
}
.search_date .closed img {
    width: 10px;
    height: 10px;
    transform: rotate(-90deg);
    margin-left: 8px;
}
.order_info_wrap.hide .search_date {
    padding-bottom: 0;
    border-bottom: none;
}
.order_info_wrap.hide .closed img {
    transform: rotate(90deg);
}
.reorder{
  background-color:#fff;border-radius:3px;border:1px solid; padding:5px;
}