/* 추후 홈페이지 css 입힐 때 조율해야할 css 내용들 시작 */
.wrap {
    margin-top: 20px;
}
.container {
    width: 1200px;
    margin: 0 auto;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
}
/* 추후 홈페이지 css 입힐 때 조율해야할 css 내용들 끝 */
.point_p-img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    background-color: #fff;
    height: 100%;
}
.point_p-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.list-box_point ul {
    display: flex;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
}
.list-box_point ul li {
    width: 23.5%;
    margin-bottom: 30px;
    margin-right: 1.2%;
}
.list-box_point ul li:nth-child(4n+0) {
    margin-right: 0;
}
.list-box_point a:active,
.list-box_point a:focus,
.list-box_point a:hover {
    color: #000;
}
.list-box_point .point_p-img {
    height: 260px;
    width:260px;
    margin:0 auto 15px;
    border:1px solid #ebebeb;
}
.list-box_point .point_p-img.no-img {
    background-color: #ebebeb;
}
.list-box_point .point_p-img img {
    vertical-align: middle;
    width:100%;
}
.list-box_point .b-txt {
    padding: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-box_point .b-txt:hover {
    color: #FF5B1F;
}
.point-pay {
    text-align: right;
}
.point-pay img {
    width: 27px;
    vertical-align: middle;
    padding-right: 5px;
}
.point-pay span {
    font-size: 20px;
    font-weight: 900;
    vertical-align: middle;
}
.point-con {
    display: flex;
    justify-content: flex-start;
    height: 500px;
    margin-top: 20px;
}
.point-con .point_l-con {
    width: 500px;
}
.point-con .point_r-con {
    width: 500px;
    margin-left: 6%;
    position: relative;
}
.point-con .point_r-con .t-title-box .b-title {
    font-size: 30px;
    font-weight: 700;
}
.point-con .point_r-con .t-title-box .span-title {
    font-size: 17px;
}
.point-con .point_r-con .t-title-box .point-pay {
    margin: 30px 0;
}
.point-con .point_r-con .t-title-box .point-pay span {
    font-size: 30px;
}
.btn_sendNew {
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 2.5;
    font-size: 23px;
    border-radius: 5px;
    margin-top: 20px;
}
.btn_sendNew button {
    width:100%;
}
.point-infoList {
    width: 100%;
    position: absolute;
    bottom: 0;
    font-size: 18px;
    color: #999;
    padding-top: 5px;
}
.point-infoList_Btn {
    display: flex;
    justify-content: flex-start;
    bottom: 0;
}
.point-infoList_Btn a {
    font-size: 14px;
    width: 50%;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 20px 10px;
    margin-top: 10px;
}
.point-infoList_Btn a:first-child {
    margin-right: 5px;
}
.point-tab {
    display: flex;
    margin-top: 40px;
}
.point-tab li {
    width: 33%;
    text-align: center;
}
.point-tab li {
    background-color: #000;
}
.point-tab li.non {
    background-color: #fff;
    border-bottom: 1px solid #000;
}
.point-tab li.on {
    background-color: #fff;
    border: 1px solid #000;
    border-bottom: 1px solid #fff;
}
.point-tab li a div {
    width: 100%;
    line-height: 3;
    color: #fff;
}
.point-tab li.on a div {
    color: #000;
}
.point-contents {
    padding: 30px 0;
}
.point-contents .point-title .t-title {
    color: #666666;
    font-size: 14px;
    font-weight: 700;
    line-height: 3.5;
}
.point-contents table {
    border-top: 1px solid #dcdcdc;
    border-bottom: 0;
    color: #666;
    text-align: left;
    font-size: 14px;
    width: 100%;
}
.point-contents table tbody tr td,
.point-contents table tbody tr th {
    font-weight: 300;
    line-height: 1.4;
    padding: 14px 20px;
    border-bottom: 1px solid #dcdcdc;
}
.point-contents table tbody tr th {
    background-color: #fafafa;
}
.point-contents .point-cont {
    padding: 20px 0;
}
.point-common {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}
.pay_area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.pay_thumb {
    height: 50px;
    width: 50px;
}
.pay_content table {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin: 0 0 10px;
}
.pay_content table tbody td,
.pay_content table tbody th,
.pay_content table thead th {
    padding: 12px 10px;
}
.pay_content table thead th {
    border-bottom: 1px solid #e5e5e5;
}
.pay_content table td.item .item_pay_thumb
/* ,.pay_content table.pay_itemList tbody td.item  */
{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.pay_content table.pay_point {
    text-align: left;
    margin: 10px 0;
    border-bottom:0px;
}
.pay_content textarea {
    width:100%;
    text-align:left;
    border:1px solid #ededed;
    background-color:#f6f6f6;
    height:127px;
    padding:10px;
    font-size:14px;
    margin-bottom:20px;
}
.pay_content table.pay_point .own {
    font-weight: 700;
}
.pay_content table.pay_point button {
    background-color: #000;
    color: #fff;
    border: 0;
    padding: 9px 20px;
    border-radius: 5px;
}
.pay_content table.pay_point tbody {
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.pay_content table.pay_point tbody tr:first-child {
    margin-right:30px;
}
.pay_content table input[type="number"] {
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 5px;
}
.pay_content .pay_nameArea {
    text-align: left;
    padding-left: 10px;
}
.pay_content .pay_nameArea div:first-child {
    font-size: 14px;
    font-weight: 700;
}
.pay_content .pay_nameArea div:last-child {
    font-size: 12px;
}
.pay_content .pay_nameArea2 div:last-child {
    display:none;
}
.pay_content .pay_name {
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;
    width: 300px;
    max-width:100%;
    text-align: left;
}
.pay_content .pay_thumb .point_p-img {
    border-radius: 0;
}
.pay_content .result,
.pay_info ul li.result dl dd {
    color: #FF5B1F;
    font-size: 20px;
    font-weight: 700;
}
.pay_content .main-title_non {
    display:none;
}
.num_stepper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.num_stepper span {
    display:none;
}
.num_stepper input[type="text"],
.num_stepper button {
    text-align: center;
    width: 35px;
    height: 35px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
}
.pay_info {
    border-bottom: 1px solid #000;
}
.pay_info ul li dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pay_info ul {
    margin: 15px 0 0;
}
.pay_info ul li {
    padding: 0 0 15px;
}
.pay_info ul li.result {
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
    padding-bottom: 18px;
    font-weight: 700;
}
.pay_chk {
    margin-top: 20px;
}
.pay_chk input[type="checkbox"] {
    margin-right: 10px;
}
.warning_txt {
    color: #FF0000;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}
.btn_paySubmit {
    width: 100%;
    background-color: #ff5b1f;
    color: #fff;
    height: 70px;
    font-size: 23px;
    border: 0;
    border-radius: 5px;
    margin: 20px 0 10px;
}
.btn_payPointReturn {
    border: 1px solid #e5e5e5;
    text-align: center;
    line-height: 2;
    border-radius: 5px;
    background-color: #fff;
    padding: 2px 30px;
    color:#000;
    display:block;
    width:114px;
    margin:0 auto;
}
.btn_payPointRefund {
    border: 1px solid #e5e5e5;
    text-align: center;
    line-height: 2;
    border-radius: 5px;
    background-color: #fff;
    padding: 2px 30px;
    color:#000;
    display:block;
    width:114px;
    margin:0 auto;
}
.pay_content table.pay_cont {
    text-align: left;
}
.pay_content table.pay_cont tbody th {
    border-right: 1px solid #e5e5e5;
    width:100px;
}
.pay_content table.pay_itemList {
    border-bottom:0px;
}
.pay_content table.pay_itemList tbody td {
    border-bottom:1px solid #e5e5e5;
}
.purchase_filter {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 15px;
    margin-bottom:20px;
}
.purchase_filter b {
    width:50px;
    height:35px;
}
.purchase_filter > ul {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 15px;
}

.purchase_filter > ul > a > li {
    line-height: 35px;
    height: 35px;
    border-radius: 5px;
    min-width: 70px;
    padding: 0 10px;
    text-align: center;
    margin-right: 10px;
    background-color: #f3f3f3;
    color: #000;
}
.purchase_filter > ul > a.on > li {
    background-color: #000;
    color: #fff;
}
.sub_title {
    font-size:20px;
    font-weight:700;
    margin-bottom:20px;
}

.list-box_point .point_p-img.point_p-img_soldout {
    background-color:#4e4e4e;
}
.point_p-img_soldout span {
    position:absolute;
    z-index: 1;
    color:#fff;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.point_p-img_soldout img {
    opacity: 0.3;
}
.pay_content_txt {
    font-size:13px;
    margin-bottom:20px;
}
.pay_content_txt a {
    text-decoration: underline;
    font-weight:700;
}
input[type="radio"]#od_settle_card,
.pay_chk input[type="checkbox"] {
    display:none;
}
input[type="radio"]#od_settle_card + label,
.pay_chk input[type="checkbox"]+label {
    display:inline-block;
    cursor:pointer;
    width:24px; 
    height: 24px;
    border-radius: 50%;
    background: #ffff; 
    cursor: pointer; 
    border:1px solid #e5e5e5;
}
input[type="radio"]#od_settle_card:checked + label,
.pay_chk input[type="checkbox"]:checked + label{
    background:url('../../../img/check.png')#FFDCC3 no-repeat center/18px 18px;
    border:1px solid #FF5B1F;
}
input[type="radio"]#od_settle_card + label div,
.pay_chk input[type="checkbox"] + label div {
    text-align:left;
    width:120px;
    padding-left:34px;
}
.pay_chk input[type="checkbox"] + label div {
    width:250px;
}
#od_tot_price {
    margin-bottom:13px;
}
.purchaseArea {
    display:flex;
    align-items: center;
}
.purchaseArea .purchase_filter:last-child {
    margin-left:30px;
}
/* 래플캐시 관련 */
.btn_sendNew.btn_sendNew_cash {
    display:flex;
    line-height:3;
    font-size:20px;
    margin-top:0px;
}
.btn_sendNew.btn_sendNew_cash button:first-child {
    background-color:#ff8a00;
}
.btn_sendNew.btn_sendNew_cash button:last-child {
    background-color:#ff6229;
}
/* ----------- 반응형 ------------- */
@media all and (max-width: 1200px) {
    .container {
        width:90%;
        padding:0px 10px;
    }
    .pay_area {
        flex-direction: column;
    }
    .list-box_point .point_p-img {
        width:200px;
        height:200px;
    }
}
@media all and (max-width: 1000px) {
    
    .list-box_point .point_p-img {
        width:150px;
        height:150px;
    }
}
@media all and (max-width: 960px) {
    .pay_content .pay_name {
        width:200px;
    }
    
    .btn_payPointReturn {
        padding:5px;
    }
    
    .btn_payPointRefund {
        padding:5px;
    }
    .point-con {
        height:auto;
        flex-direction: column;
    }
    .point-con .point_l-con {
        height:500px;
    }
    .point-con .point_l-con,
    .point-con .point_r-con,
    .point-infoList {
        margin:0 auto;
        position:static;
    }
    .point-con .point_r-con {
        margin-top:20px;
    }
    .point-infoList {
        margin-top:20px;
    }
    .point-tab li.non {
        display:none;
    }
}
@media all and (max-width: 800px) {

    .list-box_point .point_p-img {
        width:120px;
        height:120px;
    }
}
@media all and (max-width:768px) { 
    .purchaseArea {
        flex-direction: column;
        align-items:flex-start;
    }
    .purchaseArea .purchase_filter:last-child {
        margin-left:0px;
    }
    
    .purchase_filter {
        flex-direction:column;
        align-items: flex-start;
        margin-bottom:0px;
    }
}
@media all and (max-width: 760px) {
    .list-box_point ul {
        display:block;
    }
    .list-box_point ul.pagination {
        display:flex;
    }
    .list-box_point ul li {
        width:100%;
        margin-right:0px;
    }
    .list-box_point ul li a {
        display:flex;
        align-items: center;
        width:100%;
    }
    
    .list-box_point .point_p-img {
        width:260px;
        height:260px;
        margin:0px;
    }
    .point-pay {
        text-align:left;
    }
    .list-box_point .b-txt {
        font-size:20px;
    }
    .point-pay span {
        font-size:27px;
    }
    .list-box_point ul li a .point_p-txt {
        margin-left:20px;
    }
    .boxy-warp.pay_area {
        padding:0px;
        max-width:100%;
    }
    .pay_content table.pay_itemList tbody td.item{
        border-bottom:0px;
    }
    /* .pay_content table.pay_itemList tbody td, */
    .pay_content table.pay_itemList tbody tr{
        display:flex;
        flex-direction: column;
    }
    .pay_content table.pay_itemList tbody td.item .pay_thumb,
    .pay_content table.pay_itemList tbody td.item .pay_nameArea2 {
        display:inline-block;
        vertical-align: middle;
    }
    .pay_content table.pay_itemList tbody td.item .pay_thumb {
        width:20%;
    }
    .pay_content table.pay_itemList tbody td.item .pay_nameArea2 {
        width:80%;
    }
    .pay_content table.pay_itemList thead th,
    .pay_content table.pay_itemList tbody td:first-child,
    .pay_content table.pay_itemList tbody td:nth-child(3),
    .pay_content table.pay_itemList tbody td:nth-child(4) {
        display:none;
    }
    .btn_payPointReturn {
        width:100%;
    }
    .btn_payPointRefund {
        width:100%;
    }
    .pay_content .pay_nameArea2 div:last-child {
        display:block;
    }
    .point-contents table tbody tr td, 
    .point-contents table tbody tr th {
        display:block;
    }
    .point-con .point_l-con,
    .point-con .point_r-con {
        width:100%;
    }
    .point-con .point_l-con {
        height:300px;
    }
    .pay_content table.pay_point tbody {
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .pay_content table.pay_point tbody tr:first-child {
        margin-right:0px;
    }
}
@media all and (max-width: 500px) {
    .container {
        position:static;
        margin-bottom:70px;
    }
    .list-box_point .point_p-img {
        width:100px;
        height:100px;
    }
    .list-box_point .b-txt {
        font-size:15px;
    }
    .point-pay span {
        font-size:20px;
    }
    .point-tab {
        position:sticky;
        top:0px;
    }
    .point-con .point_r-con .t-title-box .b-title,
    .point-con .point_r-con .t-title-box .point-pay span {
        font-size:25px;
    }
    .btn_sendNew {
        font-size:20px;
    }
    .list-box_point ul li a .point_p-txt {
        margin-left:10px;
        width:60%;
    }
    .pay_content table input[type="number"] {
        width:140px;
    }
    .pay_content table.pay_item {
        border-top:0px;
        border-bottom:1px solid #e5e5e5;
    }
    .pay_content table.pay_item tbody td.item {
        display:block;
    }
    .pay_content table.pay_item tbody td:nth-child(2),
    .pay_content table.pay_item tbody td:last-child{
        display:block;
    }
    .pay_content table.pay_item thead th {
        display:none;
    }
    .pay_content table.pay_item tbody td:nth-child(2) {
        float: left;
    }
    .pay_content table.pay_item tbody td:last-child {
        float:right;
    }
    .pay_content .main-title_non {
        display:block;
    }
    .pay_content table.pay_item2 {
        border:0px;
    }
    .pay_content table.pay_item2 tbody td.item2 {
        display:unset;
    }
    .pay_content table.pay_item2 tbody td:last-child {
        float:unset;
    }
    
    .num_stepper span {
        display:block;
    }
    .pay_content .pay_name {
        width:100%;
    }
    .btn_sendNew.btn_sendNew_cash {
        flex-wrap:wrap;
    }
}
/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
	/* 이 안에 Safari(10.1 이상)에서만 적용할 스타일 작성 */
    .point-contents table tbody tr td, 
    .point-contents table tbody tr th {
        display:revert;
        padding:10px;
    }
    .point-contents table tbody tr th {
        width:56px;
    }
}}