/* payment, booking 공통 */
._payment section.chf_index_top, ._booking section.chf_index_top{height: auto; background: none;}
.paymntcontainer, .bookingContainer{padding: 48px calc((100% - 1100px) / 2); width: 100%; min-width: 1140px;}
.paymntcontainer > h1, .bookingContainer > h1{margin-bottom: 28px;}
.paymntcontainer > div, .bookingContainer > div{margin-bottom: 48px;}
.paymntcontainer > div:last-child, .bookingContainer > div:last-child{padding: 0; margin-bottom: 0;}
.paymntcontainer .bigText, .bookingContainer .bigText{padding-bottom: 12px;}
.grayBox{padding: 52px 48px; background-color: var(--bgGray); border-radius: 0;}
/* payment review */
.payment_box li{position: relative; padding: 12px 0 12px 24px; border-bottom: 1px dotted var(--graydeepColor);}
.payment_box li::before{content: ''; position: absolute; top: 20px; left: 10px; width: 4px; height: 4px; border-radius: 4px; background-color: #000;}
.payment_box li:first-child{padding-top: 0;}
.payment_box li:first-child::before{top: 10px;}
.payment_box li.total{padding: 24px 0 0; border-bottom: none; text-align: right;}
.payment_box li.total::before{display: none;}
.payment_box li.total._payment h2{color: var(--pointRed);}

/* payment page */
/* pay method */
.paymntcontainer._payMethod{padding-bottom: 0;}
._radio {display: flex; align-items: center;}
._radio > div{margin-right: 12px;}
._radio > div:last-child{margin-right: 0;}
.payRadio[type=radio]{display: none;}
.payRadio[type=radio] + label{display: flex; justify-content: center; cursor: pointer; width: auto; min-width: 240px; height: 100%; padding: 12px; margin: 0; background-color: #fff; border: 1px solid #000; color: #000;}
.payRadio[type=radio] + label .fakeRadio{position: relative; margin-right: 8px; width: 20px; height: 20px; border: 1px solid var(--graydeepColor); border-radius: 20px;}
.payRadio[type=radio]:checked + label{border: 1px solid var(--pointRed); color: var(--pointRed);}
.payRadio[type=radio]:checked + label .fakeRadio::before{content: ''; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; background-color: var(--pointRed); border-radius: 16px;}
/* termbox */
.paymntcontainer.termBox{padding-top: 0; margin: 20px 0 0; text-align: center;}
._chk{display: flex; justify-content: center; align-items: center; margin-top: 12px;}
._chk label.checkbox{margin-top: 0; margin-right: 8px;}
._chk label.checkbox input[type=checkbox], ._chk label.checkbox input[type=checkbox]:hover{border: 1px solid var(--pointRed); border-radius: 0; border-color: var(--pointRed) !important;}
._chk label.checkbox input[type=checkbox]:checked{background-color: var(--pointRed);}
.termBtn:hover, .termBtn:focus{color: #000 !important;}

/* booking page */
.bookingContainer .grayBox{border-top: 1px solid #000;}
.bookingContainer .cancelTerm .grayBox{border-top: 1px solid var(--pointRed);}
.bookTitle{display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px !important;}
.bookNumDate{text-align: right;}
.bookingNumber span{color: var(--pointRed);}

.userInfo > div{margin-bottom: 40px;}
.userInfo > div:last-child{margin-bottom: 0;}
.userInfo .bigText {margin-bottom: 12px; width: 100%; border-bottom: 1px dotted var(--graydeepColor);}
.userInfo ._top > h2{margin-bottom: 8px;}
.userInfo ._top > p{color: var(--pointRed);}
.userInfo ._info > ul{display: flex; flex-wrap: wrap;}
.userInfo ._info > ul li{display: flex; align-items: flex-start; padding: 12px 0; width: 33.3333%;}
.userInfo .serviceInfo > ul li{width: 50%;}
.userInfo ._info > ul li img{margin-right: 8px;}
.userInfo ul.book-summary-box{padding: 0; margin-top: 24px;}
.userInfo ul.book-summary-box li:first-child{padding-bottom: 20px;}
.adtnlNote{margin-top: 24px;}
.cancelTerm div p{display: flex; align-items: center; margin-bottom: 8px;}
.cancelTerm div p:last-child{margin-bottom: 0;}

.cancelTerm p .dot{width: 4px; height: 4px; border-radius: 4px; background-color: #000; margin-right: 8px;}

.bookingContainer.cmpltFooter{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 0;}
.bookingContainer.cmpltFooter p:first-child{margin-right: 12px;}
.paymntcontainer.chf_cont_button_wrap, .bookingContainer.chf_cont_button_wrap{padding-bottom: 0;}
.bookingContainer.chf_cont_button_wrap a{margin-right: 0 !important;}

/* laptop */
@media screen and (max-width: 1140px) {
    .paymntcontainer, .bookingContainer{padding: 48px calc((100% - 950px) / 2); width: 100%; min-width: 990px;}
}

/* tablet */
@media screen and (max-width: 990px) {
    .paymntcontainer, .bookingContainer{padding: 40px calc((100% - 728px) / 2); min-width: 768px;}
    .paymntcontainer > h1, .bookingContainer > h1{margin-bottom: 24px;}
    .paymntcontainer > div, .bookingContainer > div{margin-bottom: 40px;}
    .bookTitle{margin-bottom: 24px !important;}
    .grayBox{padding: 40px 36px;}
    .userInfo > div{margin-bottom: 28px;}
    .userInfo ._info > ul li{padding: 8px 0;}
    .userInfo ul.book-summary-box li:first-child{padding-bottom: 20px;}
    /* payment */
    .paymntcontainer.termBox{margin: 40px 0 0;}
    .paymntcontainer.termBox p:first-child{margin-bottom: 8px;}
    ._chk{margin-top: 20px;}
    .bookingContainer.cmpltFooter p:first-child{margin-right: 8px;}
}
@media screen and (max-width: 768px) {
    .paymntcontainer, .bookingContainer{padding: 36px 20px; min-width: unset;}
    .grayBox{padding: 32px 28px;}
    .userInfo ul.book-summary-box li:first-child{padding-bottom: 16px;}
    .userInfo ._info > ul li{width: 50%;}
    /* payment */
    ._radio > div{width: 50%;}
    .payRadio[type=radio] + label{width: 100%; min-width: unset;}
    .paymntcontainer.termBox p:first-child br{display: none;}
}
@media screen and (max-width: 580px) {
    .paymntcontainer > div, .bookingContainer > div{margin-bottom: 32px;}
    .paymntcontainer > h1, .bookingContainer > h1{margin-bottom: 16px;}
    .bookTitle{margin-bottom: 16px !important;}
    .grayBox{padding: 24px 20px;}
    .paymntcontainer .bigText, .bookingContainer .bigText{padding-bottom: 8px;}
    .userInfo .bigText{margin-bottom: 8px;}
    .userInfo ul.book-summary-box{margin-top: 16px;}
    .adtnlNote{margin-top: 16px;}
    .userInfo ._info > ul li{width: 100%;}
    .userInfo ._info > ul li img{width: 20px;}
    .payment_box li{padding: 12px 0 12px 18px;}
    .payment_box li::before{left: 6px;}
    .payment_box li.total{padding: 20px 0 0;}
    /* payment */
    .paymntcontainer.termBox{margin: 32px 0 0;}
    ._chk{justify-content: flex-start; align-items: flex-start;}
    ._chk label{margin-top: 2px;}
}

/* mobile */
@media screen and (max-width: 480px) {
    .paymntcontainer, .bookingContainer{padding: 24px 20px;}
    .paymntcontainer > div, .bookingContainer > div{margin-bottom: 28px;}
    .bookTitle{display: block; margin-bottom: 8px !important;}
    .bookNumDate{text-align: left; margin-top: 8px;}

    .bookingContainer.chf_cont_button_wrap a{width: 100%;}
    .bookingContainer.cmpltFooter{padding-bottom: 40px;}
    /* payment */
    ._radio{flex-wrap: wrap;}
    ._radio > div{width: 100%;}
    ._radio > div:first-child{margin-right: 0; margin-bottom: 8px;}
    .paymntcontainer.termBox{margin: 28px 0 0; text-align: left;}
    
}
@media screen and (max-width: 360px) {
    .grayBox{padding: 20px 16px;}
    .bookingRvw h1{flex-wrap: wrap;}
    .bookingContainer .bigText.bookingNumber{margin-top: 8px; width: 100%; text-align: left;}
    .bookingContainer .bigText.bookingNumber span{display: inline-block;}
    .payment_box li.total h2{text-align: center;}
    /* payment */
    .payment_box li.total h1{text-align: center;}
}
@media screen and (max-width: 320px) {
    .userInfo ul.book-summary-box li:first-child{padding-bottom: 12px;}
}