@charset "utf-8";
/*결제 관련 css*/

/*========캐디피 결제========*/
.pay .grade{
    padding: 0 0.5rem 1.5rem 0.5rem;
    margin-top: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    border-bottom: 1px solid #E6E6E6;
}
.pay .grade .grade_check{
    display: flex;
    gap: 0.625rem;
} 

.pay .grade .grade_check i::before {
    width: 32px;
    height: 32px;
}
@media (max-width: 320px) {
    .pay .grade .grade_check{
        display: flex;
        gap: 0.4rem;
    }
    .pay .grade .grade_check i::before {
        width: 28px;
        height: 28px;
    }
}
@media (max-width: 280px) {
    .pay .grade .grade_check{
        display: flex;
        gap: 0.3rem;
    }
    .pay .grade .grade_check i::before {
        width: 26px;
        height: 26px;
    }
}

.pay .sort.gift_card li{
    position: relative;
    background-image: url(../image/img/gift_card_bg_1.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.pay .sort.gift_card li.active{
    background-image: url(../image/img/gift_card_bg.svg);
}

.pay .sort.gift_card li.active .sort_badge{
    border: 1px solid #289D72;
    color: #289D72;
}

.pay .sort.gift_card li .sort_badge{
    position: absolute;
    top: 0;
    right:0;
    transform: translateY(-65%);
    box-shadow: 0px 0px 4px rgba(22, 22, 22, 0.2);
    background: #ffffff;
    color: #999999;
}

.pay .point_use .point_info p{
    text-align: end;
    color: #161616;
    padding-bottom: 0.5rem;
}
.pay .point_use .point_info p.sub,
.pay .point_use .point_info p.sub span{
    color:#999999;
    font-weight: 400;
}
.pay .pay_methods {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 1rem;
}
.pay .pay_methods .method{
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 0;
    color: #565656;
    font-weight: 400;
    background: #ffffff;
    border: 1px solid #dadada;
    border-radius: 10px;
}
.pay .pay_methods .method.active {
    border: 2px solid #161616;
    font-weight: 700;
}
.pay .select_card .card_obj {
    padding: 0 0.5rem;
}
.pay .select_card .card_obj .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    min-height: 180px;
}
.pay .select_card .card_obj .card .right_top_logo {
    width: 35px;
}
.pay .select_card .card_obj .card.card_1{
    background: linear-gradient(70.69deg, #76E4CA -4.45%, #0CA17B 37.34%, #0068DE 106.98%);
}
.pay .select_card .card_obj .card.card_2 {
    background: var(--gradient-primary0);
}
.pay .select_card .card_obj .card.card_3 {
    background: var(--gradient-primary1);
}
/*카드종류 추가*/
.pay .select_card .card_obj .card.card_4 {
    background: #289D72;
}
.pay .select_card .card_obj .card.card_5 {
    background: #13B2A9;
}
.pay .select_card .card_obj .card.card_6 {
    background: #C5BD00;
}
.pay .select_card .card_obj .card.card_7 {
    background: #3A3FB4;
}
.pay .select_card .card_obj .card.card_8 {
    background: #8929B7;
}
.pay .select_card .card_obj .card.card_9 {
    background: #9D2828
}
.pay .select_card .card_obj .card.card_10 {
    background: #7E7E7E
}
.pay .select_card .card_obj .card.card_11 {
    background: var(--gradient-primary2);
}
.pay .select_card .card_obj .card.card_add {
    border: 1px dashed #999999;
    text-align: center;
}
.pay .select_card .card_obj .card.card_add {
    border: 1px dashed #999999;
    text-align: center;
}
.pay .select_card .card_obj .card.card_add span {
    display: block;
    padding-top: 1rem;
    color: #999999;
    font-weight: 400;
    font-size: 0.875rem;
}
.pay .select_card .card_obj .card.card_add i.icon_plus::before {
    filter: brightness(1.8);
}
.pay .method_info {
    padding: 1rem;
    display: none;
} 
.pay .method_info.active {
    display: block;
}

.pay .select_account .card.card_add {
    border: 1px dashed #999999;
    text-align: center;
    border-radius: 12px;
}

/*========거래 확인증========*/
.pay.bill .box {
    height: calc(100% - 2rem);
}
.pay.bill .bill_content{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pay.bill .bill_content .top_info .info{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 1.25rem;
}
.pay.bill .bill_content .bottom_info{
    margin-top: auto;
    padding-bottom: 36px;
}
.pay.bill .bill_content .bottom_info p,
.pay.bill .bill_content .bottom_info span {
    font-size: 0.813rem;
    font-weight: 400;
    color: #535353;
    margin-bottom: 0.75rem;
}

/*=============== 캐디피 상품권: 결제 ===============*/
.pay.giftCard .giftCard_obj {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
}
.pay.giftCard .giftCard_obj .img_area {
    padding-right: 0.5rem;
    padding-top: 1rem;
}
.pay.giftCard .giftCard_obj .img_area>img {
    width: 100%;
    border-radius: 0.5rem;
}
.pay.giftCard .giftCard_obj .info_area{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    line-height: 120%;
}
.pay.giftCard .giftCard_obj .info_area .type,
.pay.giftCard .giftCard_obj .info_area .count {
    font-weight: 400;
    font-size: 0.8rem;
    color: #666666;
}
.pay.giftCard .giftCard_obj .info_area .price {
    text-align: end;
    font-size: 0.8rem;
    color: #666666;
}

.pay.giftCard .giftCard_obj .info_area .bill {
    text-align: end;
    color: #666666;
    font-weight: 400;
}

/*=============== 캐디피 상품권: 결제 완료(구매 내역 상세) ===============*/

.pay.giftCard.finish .finish_topArea {
    width: 100%;
}

.pay.giftCard.finish .finish_topArea .finish_title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 2rem 0;
}
.pay.giftCard.finish .finish_topArea .finish_title>i::before {
    width: 40px;
    height: 40px;
}
.pay.giftCard.finish .finish_topArea .finish_info .date>span{
    display: inline-block;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.pay.giftCard.finish .finish_topArea .finish_info .gift{
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #E6E6E6;
}

.pay.giftCard.finish .finish_topArea .finish_info .gift .bill i.icon_arrow_right::before{
    filter: brightness(20) grayscale(100);
}

/*========파트너: 캐디피 결제========*/
.partner.pay .box.qr_area {
    padding-top: 1rem;
    height: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.partner.pay .box.qr_area.line_1 {
    height: calc(100% - 50px);
    padding: 0;
    margin: 0;
}

.partner.pay .box.qr_area>button {
    background-color: #FDB13F;
}
.partner.pay .box.qr_area>.img_area {
    width:200px;
}
.partner.pay .box.info_area {
    padding-bottom: 50px;/*하단 고정버튼 영역 안겹치도록*/
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px 0px 24px rgba(22, 22, 22, 0.08);
    bottom:0;
    position: absolute;
    
}
.partner.pay .box.info_area.line_1{
    padding-bottom: 60px;
    position: absolute;
    bottom:0;
}

.partner.pay .box.info_area .people_count>button {
    width: 44px;
    height: 44px;
    background: #EAEAEA;
    color: #666666;
    font-weight: 400;
    font-size: 1.25rem;
    border-radius: 100%;
}
.partner.pay .box.info_area .people_count>button.active {
    background: #25B18C;
    color: #FFFFFF;
    font-weight: 700;
}