@charset "utf-8";

/* 결제페이지 */
.payment {display:flex; width:100%; max-width:880px; margin:0 auto; padding:120px 0;}
.payment .left {flex:1 1 auto; min-width:0; width:1%;}
.payment .right {width:50%; max-width:344px; margin-left:16px;}
.payment .group {margin-bottom:24px; padding:24px; background:#fff;}
.payment .group:last-child {margin-bottom:0;}
.payment .group.mb0 {margin-bottom:0;}
.payment .group h3 {margin-bottom:1.25em; font-size:16px; font-weight:600; line-height:1.2; letter-spacing:0; color:#000;}

.order-product .inner {display:flex; align-items:center;}
.order-product .image {width:81px;}
.order-product .info {flex:1 1 auto; min-width:0; width:1%; padding-left:12px;}
.order-product .info .thumb {position:relative; padding-bottom:100%; overflow:hidden;}
.order-product .info .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.order-product .info .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.order-product .info .tit {margin-bottom:0.43em; font-size:14px; font-weight:500; line-height:1.2; letter-spacing:0; color:#000;}
.order-product .info .date {margin-bottom:10px; font-size:13px; font-weight:500; line-height:1; letter-spacing:0; color:#A1A1A1;}
.order-product .info .date span {display:inline-block; margin-right:6px; padding:2px 4px; border:1px solid #a2a2a2; font-size:12px;}
.order-product .info .price {font-size:14px; font-weight:700; line-height:1.2; letter-spacing:0; color:#000;}

.orderer {position:relative;}
.orderer dl {font-size:14px; font-weight:500; line-height:1.3; letter-spacing:0; color:#9B9B9B;}
.orderer dt {margin-bottom:0.71em; color:#000;}
.orderer .btn {position:absolute; right:0; top:0;}
.orderer .btn a {display:inline-block; padding:6px 8px; background:#E7411B; font-size:13px; font-weight:400; line-height:1; letter-spacing:0; color:#fff;}

.refund-agree p {margin-bottom:0.86em; font-size:14px; font-weight:400; line-height:1.3; letter-spacing:0; color:#000;}
.refund-agree .checkbox label {font-size:14px; font-weight:400; cursor:pointer;}
.refund-agree .checkbox label:before {width:18px; height:18px; border-radius:100%; border-width:1px;}

.order-price .wrap {padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #EAEAEA;}
.order-price .wrap dl {display:flex; align-items:center; justify-content:space-between; margin-bottom:1em; font-size:14px; font-weight:400; line-height:1; letter-spacing:0; color:#8D8D8D;}
.order-price .wrap dl:last-child {margin-bottom:0;}
.order-price .wrap dd {font-size:12px; color:#000;}

.total-price dl {display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:400; line-height:1; letter-spacing:0; color:#000;}
.total-price dd {font-weight:700;}

.point-info {margin-bottom:24px; padding:20px 24px; background:#F9F9F9;}
.point-info p {font-size:14px; font-weight:400; line-height:1; letter-spacing:0; color:#000;}

.pay-info {display:flex; flex-wrap:wrap;}
.pay-info .item {display:inline-block; width:50%; margin-bottom:15px;}
.pay-info .radiobox {font-size:14px; font-weight:400; line-height:1.3; letter-spacing:0; color:#000;}
.pay-info .radiobox label:before {content:""; display:inline-block; vertical-align:middle; margin:-.2em 8px 0 0; width:18px; height:18px; background-color:#f4f4f4; border:1px solid #ccc; border-radius:100%;}
.pay-info .radiobox input:checked + label:before {background:#fff url("/images/bbs/radiobox.png") 50% 50% no-repeat;}
.pay-info .radiobox input:focus + label:before {outline:2px solid highlight;}

.bank .input {border-radius:4px; color:#000;}
.bank .input::placeholder {color:#000;}
.chk-agree {margin-top:14px; padding-left:10px;}
.chk-agree img {display:inline-block; margin-right:10px; vertical-align:text-top;}

.pay-btn .btn-pack {display:block; height:54px; line-height:54px; padding:0 20px; background:#2D2D2D; font-weight:700; letter-spacing:0; color:#fff;}

/* 결제완료 */
.complete {padding-top:clamp(50px, calc( 143 / var(--inner) * 100vw ), 143px);}
.pay-complete-info {display:flex; align-items:center; justify-content:center; margin-bottom:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.pay-complete-info .ico {margin-right:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.pay-complete-info .tit {font-size:clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight:700; line-height:1.4; letter-spacing:0; color:#000;}
.pay-complete-info .txt {margin:1.13em auto clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight:400; line-height:1.2; letter-spacing:0; color:#000;}
.pay-complete-info dl {display:flex; color:#000; line-height:1.7;}

.pay-complete-group {margin-bottom:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}
.pay-complete-group .tit {margin-bottom:0.75em; padding-left:0.63em; font-size:16px; font-weight:700; line-height:1.4; letter-spacing:0; color:#121212;}
.pay-complete-group .price {font-size:1.13em;}
.pay-complete-group table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #D4D4D4; line-height:1.5; letter-spacing:0; color:#000;}
.pay-complete-group table th {padding:16px 24px; border-bottom:1px solid #D4D4D4; background:#FBFBFB; font-weight:500; color:#000; text-align:left;}
.pay-complete-group table td {padding:16px 18px; border-bottom:1px solid #D4D4D4; color:#000;}
.pay-complete-group tfoot th,
.pay-complete-group tfoot td {background:#FBF9FA; height:72px;}
.pay-complete-group tfoot td {text-align:right;}
.pay-complete-group tfoot td strong {}

.pay-in {display:flex; align-items:center;}
.pay-in .image {width:77px; margin-right:14px;}
.pay-in .image .thumb {position:relative; padding-bottom:100%; overflow:hidden;}
.pay-in .image .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.pay-in .info {flex:1 1 auto; min-width:0; width:1%;}
.pay-in .info .tt {margin-bottom:0.5em; font-size:0.88em; font-weight:600; line-height:1.4; letter-spacing:0; color:#000;}
.pay-in .info .date {font-size:0.81em; font-weight:500; line-height:1.4; letter-spacing:0; color:#A1A1A1;}
.pay-in .info .date span {display:inline-block; padding:3px 4px; margin-right:6px; border:1px solid #A2A2A2; color:#999; font-size:0.75em; line-height:1;}

.complete + .buttons {margin:clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px) auto 0;}
.complete + .buttons .btn-pack {margin:0 10px; min-width:180px;}