/* index_top */
.book-step2 section.chf_index_top{height: 200px;}
.book-step2 .txtBox_mid{left: calc((100% - 1100px) / 2);}

.book-step2 .chf_index_cont_wrap{background-color: var(--bgGray);}
.step2container {padding: 48px calc((100% - 1100px) / 2); width: 100%; min-width: 1140px; background-color: var(--bgGray);}
.step2container h1{margin-bottom: 28px;}
.card.vehicle_items{padding: 48px 36px 40px; margin-right: 16px; margin-bottom: 16px; height: 480px; width: calc(33.3333% - 11px); background: none; float: unset; border-radius: 0; background-color: var(--whiteColor); border: 1px solid var(--grayColor);}
.card.vehicle_items:nth-child(3n){margin-right: 0;}
.card.vehicle_items .carImg{width: 80%; margin: 0 auto;}
.card .checkmark{top: 20px; right: 20px; width: 24px; height: 24px; border-radius: 24px; border: 1px solid #d9d9d9; cursor: pointer;}
.card .checkmark:after{content: ''; top: 4px; left: 4px; width: 14px; height: 14px; background-color: var(--pointRed); border-radius: 20px;}
.cartxtBox{margin-top: 16px;}
.cartxtBox li:first-child{margin-top: 8px;}
.cartxtBox li:nth-child(2){display: flex; justify-content: center; margin: 16px 0;}
.cartxtBox li:nth-child(2) p{display: flex; align-items: center; font-size: 18px;}
.cartxtBox li:nth-child(2) p:first-child{margin-right: 32px;}
.cartxtBox li:nth-child(2) p img{margin: 0 4px; width: 20px;}
.cartxtBox li:last-child{text-align: left;}
.cartxtBox li:last-child p{position: relative; padding-left: 12px;}
.card h3.price{position: absolute; bottom: 40px; font-size: 28px;}
.card .decoration-card{margin-top: 0; border: solid 1px var(--pointRed); border-radius: 0;}

.addOptContainer{display: flex;}
.addOptContainer > div{width: 50%;}
.addoptBox{position: relative; margin-right: 8px;}
.selectoptWrapper{margin-left: 8px;}
.selectoptTitle_mo{display: none;}
.optTitle{margin-bottom: 8px;}
.selectOption{background: #fff url(/view/images/select_arrow.svg) top 12px right 8px no-repeat !important; line-height: 1.4 !important;}
.fakesselect{position: absolute; z-index: 1; width: 100%; height: 200px; overflow-y: auto; background-color: #fff; border: 1px solid var(--graydeepColor); border-top: none;}
.fakesselect li{padding: 12px 20px;}
.fakesselect li.selected{background-color: #eeedec; color: var(--pointRed);}
.selectoptList li{display: flex; margin-bottom: 8px;}
.selectoptList li:last-child{margin-bottom: 0;}
.selectOpt_wrapper{background-color: #eeedec !important; display: flex; align-items: center; justify-content: space-between; margin-right: 8px; width: calc(100% - 118px);}
.selectOpt_wrapper p{width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.quantity_wrapper{position: relative; width: 110px;}
.quantity_wrapper .fakesselect{}

.step2container.additional_chf_box{margin: 0; padding-top: 0;}
.total_amount{margin-bottom: 0; padding: 52px 36px; background-color: var(--whiteColor); border-top: 1px solid var(--pointRed);}
.total_amount h1{margin-bottom: 0 !important;}
.totalPrice{font-weight: 500; color: var(--pointRed);}
.step2container.chf_cont_button_wrap{padding-bottom: 0;}

/* laptop */
@media screen and (max-width: 1140px) {
    .book-step2 .txtBox_mid{left: calc((100% - 950px) / 2);}
    .step2container {padding: 48px calc((100% - 950px) / 2); min-width: 990px;}
    .card.vehicle_items{padding: 40px 24px 28px; height: 450px;}
    .card h3.price{bottom: 28px;}
}

/* tablet */
@media screen and (max-width: 990px) {
    .book-step2 .txtBox_mid{left: calc((100% - 728px) / 2);}
    .step2container {padding: 40px calc((100% - 728px) / 2); min-width: 768px;}
    .step2container.additional_option_chf_box{padding-top: 0;}
    .step2container h1{margin-bottom: 24px;}
    /* 차량 카드 2개씩 */
    .card.vehicle_items{width: calc(50% - 11px); height: 440px;}
    .card.vehicle_items:nth-child(3n){margin-right: 16px;}
    .card.vehicle_items:nth-child(even){margin-right: 0;}
    .card.vehicle_items .carImg{width: 80%;}
    .total_amount{padding: 40px 24px;}
}
@media screen and (max-width: 768px) {
    .book-step2 section.chf_index_top{height: 140px;}
    .book-step2 .txtBox_mid{top: 68px; left: 20px; right: unset; width: calc(100% - 40px);}
    .step2container {padding: 36px 20px; min-width: unset;}
    .card.vehicle_items{padding: 40px 20px 28px; height: 400px;}
    .card .checkmark{width: 20px; height: 20px;}
    .card .checkmark:after{top: 4px; left: 4px; width: 10px; height: 10px;}
    .cartxtBox li:nth-child(2){margin: 20px 0;}
    .cartxtBox li:nth-child(2) p{font-size: 16px;}
    .card h3.price{font-size: 24px;}

    .addOptContainer > div:first-child{width: 45%;}
    .addOptContainer > div:nth-child(2){width: 55%;}
    .selectOpt_wrapper{width: calc(100% - 78px);}
    .quantity_wrapper{width: 70px;}
}
@media screen and (max-width: 580px) {
    .book-step2 .chf_index_cont_wrap{padding-bottom: 0;}
    .step2container h1{margin-bottom: 16px;}

    .card.vehicle_items{padding: 36px 20px 28px; width: 100%; margin-right: 0; margin-bottom: 12px;}
    .card.vehicle_items .carImg{width: 60%;}
    .card.vehicle_items:nth-child(3n){margin-right: 0;}
    .card.vehicle_items:last-child{margin-bottom: 0;}
    .cartxtBox li:nth-child(2){margin: 8px 0 16px;}

    .step2container.additional_option_chf_box{margin-bottom: 12px;}
    .selectoptTitle_mo{display: block;}
    .selectoptWrapper .optTitle{display: none;}
    .addOptContainer{position: relative; flex-wrap: wrap;}
    .addOptContainer > div{width: 100% !important;}
    .addoptBox{margin-bottom: 28px; margin-right: 0;}
    .selectoptTitle_mo{position: absolute; top: 94px; left: 0;}
    .selectoptTitle_mo p:nth-child(2){color: #525252;}
    .selectoptWrapper{margin-top: 20px; margin-left: 0;}
    .selectOpt_wrapper p{font-size: 14px;}

    .step2container.additional_chf_box{padding: 0;}
    .total_amount{padding: 24px 20px;}

    .book-step2 .chf_cont_button_wrap{padding: 0 20px 60px !important; background-color: #fff !important;}
}

/* mobile */
@media screen and (max-width: 480px) {
    .card.vehicle_items{height: 390px;}
    .card.vehicle_items .carImg{width: 70%;}
}
@media screen and (max-width: 360px) {
    .book-step2 .txtBox_mid{top: 64px;}
    .card.vehicle_items .carImg{width: 80%;}
    .total_amount{align-items: center;}
    .total_amount h1:first-child{font-size: 14px;}
}
@media screen and (max-width: 320px) {
    .card.vehicle_items{height: 360px;}
    .selectoptTitle_mo p:nth-child(2){font-size: 12px;}
}