/* 상세검색 */
.detail-search {margin-bottom:var(--space-50); color:#454545; border:1px solid #ddd; border-radius:10px;}
.detail-search .wrap {display:flex; flex-wrap:wrap; gap:12px;}

.car-brand {gap:var(--space-20) 0; max-height:520px; overflow-y:scroll; padding:var(--space-25); margin-bottom:var(--space-50); border-radius:var(--radius-16); display:flex; flex-wrap:wrap; text-align:center; border:1px solid #ddd;}
.car-brand .item {width:calc(100%/9);}
.car-brand .link {border-radius:100%; position:relative; padding:10px 5px; aspect-ratio:1 / 1; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.car-brand .link .img {width:56px; height:56px; display:flex; justify-content:center; align-items:center; margin:0 auto; background-color:#f4f4f4; border-radius:100%;}
.car-brand .link .tit {margin-top:13px; font-weight:700; letter-spacing:-.03em; color:var(--color-bk); display:block; line-height:1.3em;}
.car-brand .link.active {background-color:var(--color-primary);}
.car-brand .link.active .tit {color:#fff;}

.car-search {padding:0 var(--space-20); font-size:var(--font-size-14); max-width:900px; margin:0 auto var(--space-40); display:flex; align-items:center; border:1px solid #454545; border-radius:50px;}
.car-search input {height:70px; font-size:var(--font-size-18); flex:1 1 auto; min-width:0; width:1%; padding:0; border:0; outline:none; background:none;}
.car-search input::-webkit-input-placeholder {color:#afafaf;}
.car-search input:-moz-placeholder {color:#afafaf;}
.car-search input::-moz-placeholder {color:#afafaf;}
.car-search input:-ms-input-placeholder {color:#afafaf;}
.car-search input:placeholder-shown {color:#afafaf;}
.car-search button {width:20px; height:20px; margin-left:6px; background:none; border:0;}

.car-total {font-size:var(--font-size-24); margin-bottom:var(--space-50); letter-spacing:-.03em; line-height:1.2em; font-weight:700; color:var(--color-bk);}
.car-total span {color:var(--color-primary);}

.detail-search .box {position:relative; background:#fff; border-radius:var(--radius-10);}
.detail-search .items {display:flex; padding:var(--space-15) 0;}
.detail-search .item {position:relative; flex:1; text-align:center; font-size:var(--font-size-17); line-height:30px;}
.detail-search .item:before {content:''; position:absolute; top:50%; left:0; width:1px; height:14px; margin-top:-7px; background:#ddd;}
.detail-search .item:first-child::before {display:none;}
.detail-search .item input {display:none;}
.detail-search .item label {display:block; cursor:pointer;}
.detail-search .item input:checked + label {color:var(--color-primary); font-weight:600;}

.detail-car {padding:var(--space-30) var(--space-40) 0;}
.detail-car-name {display:flex; gap:var(--space-15);}
.detail-car-name .car-logo {padding-top:10px; max-width:51px;}
.detail-car-name .car-logo img {/* margin:-4px 6px 0 0; vertical-align:middle; height:auto; max-height:20px; */}
.detail-car-name .col-r {flex:1;}
.detail-car-name .tit {font-size:var(--font-size-22); font-weight:700; letter-spacing:-.03em; color:var(--color-bk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.detail-car-name .type {font-weight:500; color:#a8a8a8;}

.detail-car-price {margin:var(--space-20) 0 var(--space-35); display:grid; gap:var(--space-15);}
.detail-car-price .itm {display:flex; justify-content:space-between;}
.detail-car-price .itm span {font-weight:500; color:var(--color-bk); display:block; line-height:1.2em;}
.detail-car-price .itm p {font-size:var(--font-size-22); text-align:right; letter-spacing:-.03em; color:var(--color-bk);  flex:1;}
.detail-car-price .special p {color:var(--color-primary);} 

.detail-car-btn {display:flex; gap:10px;}
.detail-car-btn a {height:56px; font-size:var(--font-size-18); align-items:center; justify-content:center; font-weight:500; letter-spacing:-.03em; line-height:1.4em; display:flex; width:100%; border-radius:30px; text-align:center;}
.detail-car-btn .btn1 {background-color:#fff; border:1px solid #878787;}
.detail-car-btn .btn2 {background-color:#000; color:#fff;}

/* 상품 리스트 */
.goods-list .none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.goods-list .items {display:flex; flex-wrap:wrap; margin:0 -10px;}
.goods-list .item {width:25%; padding:0 10px; margin-bottom:40px;}

.car-box {padding:var(--space-70) 0 var(--space-40); position:relative; height:100%; border-radius:var(--radius-16); background-color:#f8f8f8;}
.car-box .thumb {position:relative; padding-bottom:60%; overflow:hidden;}
.car-box .thumb img {transform:scale(1.0); transition:transform .3s; 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:90%; max-height:100%; object-fit:contain;}
.car-box:hover .thumb img {transform:translate(-50%,-50%) scale(1.07); -ms-transform:translate(-50%,-50%) scale(1.07);}

.car-box .badge-area {position:absolute; top:var(--space-20); left:var(--space-20); gap:6px; display:flex;} 
.car-box .badge {min-width:92px; line-height:32px; display:inline-block; border-radius:var(--radius-16); color:#fff; font-size:var(--font-size-15); font-weight:500; text-align:center;}
.car-box .badge.new {background:var(--color-secondary);}
.car-box .badge.best {background:var(--color-primary);}

.car-box .cnt {padding:0 var(--space-40);}
.car-box .brand {font-size:var(--font-size-14); font-weight:500; letter-spacing:-0.03em; line-height:1.3em; color:#a8a8a8;}
.car-box .name {font-size:var(--font-size-22); margin:10px 0; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; color:var(--color-bk);}
.car-box .info {font-size:var(--font-size-15); letter-spacing:-0.03em; line-height:1.47em;}
.car-box .total {font-size:var(--font-size-18); margin:var(--space-35) 0; letter-spacing:-0.03em; line-height:1.3em;}
.car-box .price-wrap {font-size:var(--font-size-15); margin-bottom:var(--space-40); letter-spacing:-0.03em; line-height:1.25em; display:grid; gap:10px;}
.car-box .price-wrap .flex {display:flex; align-items:center; gap:10px;}
.car-box .price-wrap .price strong {font-size:var(--font-size-20); font-weight:500; color:var(--color-bk);}
.car-box .price-wrap span {display:block; color:#a8a8a8;}
.car-box .price-wrap p {flex:1; display:flex; justify-content:flex-end;}
.car-box .price-wrap s {padding-right:5px; color:#a8a8a8;}

.required {padding-left:5px; color:var(--color-primary);}

/* 자동차 상세페이지 */
.car-top {display:flex; align-items:center}
.car-top .doc-btn {margin-top:var(--space-80); text-align:left;}

.car-top-image {order:2; width:40%;}
.car-top-image .thumb {position:relative; padding-bottom:48%; overflow:hidden;}
.car-top-image .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;}

.car-detail-info {flex:1; position:relative;}
.car-detail-info .name {font-size:var(--font-size-42); gap:var(--space-20); display:flex; align-items:center; font-weight:700; letter-spacing:-.03em; color:var(--color-bk); line-height:1.3em;}
.car-detail-info .name .img {width:51px;}
.car-detail-info .name .img img {margin-top:-5px; width:100%; max-width:100%; vertical-align:middle;}
.car-detail-info .name p {flex:1;}
.car-detail-info .wrap {margin-top:var(--space-50); font-weight:500; line-height:1.8em; letter-spacing:-.03em;}
.car-detail-info .option {margin-top:var(--space-25);}
.car-detail-info .option .opt {display:flex; align-items:center; flex-wrap:wrap;}
.car-detail-info .option .bar {padding:0 8px;}

.option-choice {display:flex; gap:var(--space-30);}
.option-choice .col {width:50%;}

.cardetail-tit {font-size:var(--font-size-30); margin-bottom:var(--space-30); line-height:1.3em; font-weight:700; letter-spacing:-.03em; color:var(--color-bk);}

.border-padding {padding-bottom:var(--space-100); margin-bottom:var(--space-100); border-bottom:1px solid #ddd;}

.detail-opt {height:450px; overflow-y:scroll;}
.detail-opt .list .item {margin-bottom:10px;}
.detail-opt .list .item:last-child {margin-bottom:0;}
.detail-opt .tit {font-weight:500; border:1px solid #ddd; border-radius:10px; line-height:1.5em; letter-spacing:-.02em;}
.detail-opt .tit a {height:64px; padding-left:var(--space-20); position:relative; display:flex; align-items:center; background-color:#fff; border-radius:10px;}
.detail-opt .tit a:after {width:12px; height:12px; right:20px; top:23px; content:""; position:absolute; display:inline-block; border-right:2px solid #505050; border-bottom:2px solid #505050; transform:rotate(45deg);}
.detail-opt .cnt {padding:var(--space-15) var(--space-20); margin-top:10px; border:1px solid #ddd; border-radius:10px; display:none; position:relative; color:#878787; background-color:#fff;}
.detail-opt .cnt li {margin-bottom:var(--space-15); display:flex; align-items:center; justify-content:space-between;}
.detail-opt .cnt li:last-child {margin-bottom:0;}
.detail-opt .cnt li:hover {color:var(--color-primary); font-weight:600;}
.detail-opt .item.active {position:relative;}
.detail-opt .item.active .tit a:after {transform:rotate(-135deg); margin-top:6px;}
.detail-opt .cnt li .radiobox input:checked + label,
.detail-opt .cnt li.selected .radiobox label,
.detail-opt .cnt li.selected p,
.detail-opt .item.has-selected .tit a {color:var(--color-primary) !important; font-weight:600;}

.color-head {margin-bottom:var(--space-20); display:flex; align-items:flex-end;}
.color-head strong {font-size:var(--font-size-22); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#242424; display:block; flex:1;}
.color-head .control {display:flex; gap:10px; position:relative;}

.car-color .swiper {margin:0 -5px;}
.car-color .group {position:relative; margin-bottom:var(--space-80);}
.car-color .group:last-child {margin-bottom:0;}
.car-color .item {padding:0 5px;}
.car-color .item input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.car-color .item label {display:block;}
.car-color .item label .img {display:block; border-radius:10px; position:relative; padding-bottom:61%; overflow:hidden;}
.car-color .item label 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;}
.car-color .item input:checked + label .img:after {border-radius:10px; position:absolute; content:''; top:0; left:0; right:0; bottom:0; border:2px solid var(--color-primary);}
.car-color .item input:checked + label p {color:var(--color-primary); font-weight:600;}
.car-color .item p {margin-top:var(--space-15); letter-spacing:-.03em; line-height:1.5em; text-align:center;}
.car-color .slide-btn {width:var(--slide-arrow2); height:var(--slide-arrow2); z-index:20; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%; background-size:contain; display:inline-block;}
.car-color .slide-btn.prev {background-image:url("../images/sub/review-prev.png");}
.car-color .slide-btn.next {background-image:url("../images/sub/review-next.png");}

.option-use .group {margin-bottom:var(--space-35);}
.option-use .group:last-child {margin-bottom:0;}
.option-use .group .tt {font-size:var(--font-size-22); font-weight:700; letter-spacing:-.03em; line-height:1.3em; color:var(--color-bk);}
.option-use ul {margin-top:var(--space-15); display:flex;}
.option-use li {flex-basis:50%;}
.option-use li .radiobox {display:block;}
.option-use li input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.option-use li label {height:64px; display:flex; align-items:center; justify-content:center;}
.option-use li label:before {display:none;}
.option-use li input + label {font-weight:500; text-align:center; border:1px solid #ddd; width:100%; cursor:pointer;}
.option-use li input:checked + label {color:var(--color-primary); border:1px solid var(--color-primary); font-weight:600;}
.option-use li:first-child input + label {border-top-left-radius:7px; border-bottom-left-radius:7px;}
.option-use li:last-child input + label {border-top-right-radius:7px; border-bottom-right-radius:7px;}

.chocie-total {margin-bottom:var(--space-60); padding:var(--space-30) var(--space-40); font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.4em; border:1px solid #ddd; border-radius:20px; display:flex;}
.chocie-total .col-l {flex:1 800px; max-width:800px;}
.chocie-total .col-r {flex:1;}
.chocie-total li {margin-bottom:var(--space-30); display:flex;}
.chocie-total li:last-child {margin-bottom:0;}
.chocie-total span {color:#a8a8a8; display:block;}
.chocie-total li p {color:var(--color-bk); flex:1;}
.chocie-total .col-l span {width:125px;}
.chocie-total .col-r span {width:100px;}
.chocie-total .color-in {flex:1; display:flex;}
.chocie-total .color-in .thumb {width:80px; height:50px; margin-right:var(--space-20); border-radius:5px; position:relative; overflow:hidden;}
.chocie-total .color-in .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;}