@charset "utf-8";

/* 상세검색 */
.detail-search {margin-bottom:50px; padding:30px 0; background:#f8f8f8; color:#454545;}
.detail-search .wrap {display:flex; flex-wrap:wrap; gap:12px;}
.detail-search .car-cate {width:calc(29% - 6px); display:grid; gap:12px;}
.detail-search .car-cate + .car-brand {width:calc(71% - 6px);}
.detail-search .car-cate .link {display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#fff; border:1px solid #ddd; border-radius:var(--radius-10); color:#878787; font-size:var(--font-size-18); font-weight:600;}
.detail-search .car-cate .link.active {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.detail-search .car-brand {width:100%; padding:20px 30px 30px; text-align:center;}
.detail-search .car-brand .swiper-slide {width:auto;}
.detail-search .car-brand .swiper-scrollbar {margin-top:17px; height:3px; border-radius:0; background:#f2f3f7;}
.detail-search .car-brand .swiper-scrollbar-drag {background:#ddd; border-radius:0;}
.detail-search .car-brand .link {position:relative; display:block; width:100%; padding:12px 5px;}
.detail-search .car-brand .link .img {display:flex; justify-content:center; align-items:center; width:100%; max-width:80px; height:43px; margin:0 auto; color:#b9b9b9; font-size:var(--font-size-22); font-weight:800; line-height:1.3em;}
.detail-search .car-brand .link .tit {display:block; padding:4px 0; margin-top:4px; line-height:1.3em;}
.detail-search .car-brand .link.active:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid var(--color-primary); border-radius:var(--radius-10); opacity:.5;}
.detail-search .car-brand .link.active .img,
.detail-search .car-brand .link.active .tit {color:var(--color-primary);}
.detail-search .car-model {width:calc(68% - 6px);}
.detail-search .car-search {display:flex; align-items:center; width:calc(32% - 6px); padding:0 20px; font-size:14px;}
.detail-search .car-search label {width:76px; color:#878787;}
.detail-search .car-search input {flex:1 1 auto; min-width:0; width:1%; height:60px; padding:0; border:0; outline:none; background:none; font-size:14px;}
.detail-search .car-search input::-webkit-input-placeholder {color:#afafaf;}
.detail-search .car-search input:-moz-placeholder {color:#afafaf;}
.detail-search .car-search input::-moz-placeholder {color:#afafaf;}
.detail-search .car-search input:-ms-input-placeholder {color:#afafaf;}
.detail-search .car-search input:placeholder-shown {color:#afafaf;}
.detail-search .car-search button {width:20px; height:20px; margin-left:6px; background:none; border:0;}
.detail-search .car-range {width:calc(68% - 6px); height:60px; padding:17px 45px 0 30px;}
.detail-search .car-check {width:calc(32% - 6px);}
.detail-search .box {position:relative; background:#fff; border-radius:var(--radius-10);}
.detail-search .items {display:flex; padding:15px 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;}

.slider-range {position:relative; height:4px; background:#f2f3f7;}
.slider-range:before,
.slider-range:after {content:''; position:absolute; top:50%; margin-top:-9px; width:18px; height:18px; background:#f2f3f7; border-radius:100%;}
.slider-range:before {left:-9px;}
.slider-range:after {right:-9px;}
.slider-range .ui-slider-range {position:absolute; top:0; left:0; height:100%; background:var(--color-primary); z-index:2;}
.slider-range .ui-slider-handle {position:absolute; top:50%; width:18px; height:18px; margin-top:-9px; margin-left:-9px; background:var(--color-primary); border:2px solid #fff; border-radius:100%; box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.15); transition:none; z-index:2;}

.range-scale {display:flex; justify-content:space-between; text-align:center; white-space:nowrap; font-size:14px; line-height:1.3em;}
.range-scale span {position:relative; width:2px; height:10px; background:#f2f3f7; cursor:pointer;}
.range-scale span ins {position:absolute; top:13px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); text-decoration:none;}
.range-scale span:first-child,
.range-scale span:last-child {background:none;}

/* 상품정렬 */
.goods-sort {position:relative; z-index:10; margin-bottom:37px;}
.goods-sort .sort {position:relative; display:flex; justify-content:flex-end;}
.goods-sort .sort .sort-name {display:none;}
.goods-sort .sort ul {display:flex; justify-content:flex-end;}
.goods-sort .sort ul li {position:relative; padding:0 23px;}
.goods-sort .sort ul li:after {content:""; position:absolute; top:50%; right:0; width:1px; height:12px; background:#ddd; margin-top:-6px;}
.goods-sort .sort ul li:last-child {padding-right:0;}
.goods-sort .sort ul li:last-child::after {display:none;}
.goods-sort .sort ul li a {display:block; color:#454545; line-height:1.5em;}
.goods-sort .sort ul li.active a {color:var(--color-primary); font-weight:600;}

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

.car-box {position:relative; height:100%; border-radius:var(--radius-16); border:1px solid #ddd; background:#fff;}
.car-box .thumb {position:relative; border-radius:var(--radius-16) var(--radius-16) 0 0; overflow:hidden;}
.car-box .thumb:before {content:''; display:block; padding-bottom:75%;}
.car-box .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; transition:.4s; transform-origin:center center; object-fit:cover;}
.car-box .badge-area {position:absolute; top:20px; left:10px; display:flex; gap:5px;} 
.car-box .badge {display:inline-block; min-width:58px; border-radius:5px; color:#fff; font-size:13px; font-weight:600; line-height:28px; text-align:center;}
.car-box .badge.update {background:#d7563e;}
.car-box .badge.best {background:#4d4d4d;}
.car-box .cnt {padding:19px; border-radius:0 0 var(--radius-16) var(--radius-16);}
.car-box .tit {color:#242424; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.car-box .option {display:grid; gap:5px 0; margin:14px 0 17px; color:#878787; font-size:var(--font-size-14); line-height:1.4em;}
.car-box .option .opt {display:flex; align-items:center; flex-wrap:wrap;}
.car-box .option .bar {display:inline-block; margin:0 7px; width:1px; height:10px; background:#ddd;}
.car-box .option strong {color:#454545; font-weight:500; margin-left:12px;}
.car-box .price-wrap {display:flex; flex-wrap:wrap; gap:5px 11px;}
.car-box .price {color:#242424; font-size:var(--font-size-14); line-height:1.3em; letter-spacing:-.03em;}
.car-box .price span {display:inline-block; margin-right:3px; width:20px; height:20px; background:#f37010; border-radius:5px; color:#fff; font-size:var(--font-size-14); line-height:20px; text-align:center;} /**color:#878787;**/
.car-box .month {color:#242424; font-size:var(--font-size-14); line-height:1.3em; letter-spacing:-.03em;}
.car-box .month span {display:inline-block; margin-right:3px; width:20px; height:20px; background:#0084cf; border-radius:5px; color:#fff; line-height:20px; text-align:center;}
.car-box:hover .thumb img {-webkit-transform:scale(1.05); transform:scale(1.05);}

/* 상품 상세 */
.goods-summary {display:flex; gap:20px; margin-top:60px;}

.goods-photo {width:55%;}
.goods-photo .item {position:relative; overflow:hidden;}
.goods-photo .item:before {content:''; display:block; padding-bottom:75%;}
.goods-photo .item img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transform-origin:center center;}
.goods-photo .slider {position:relative;}
.goods-photo .slider .slide-btn {position:absolute; top:50%; z-index:50; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:30px; height:30px; border:0; background:none;}
.goods-photo .slider .slide-btn svg {width:100%; height:100%;}
.goods-photo .slider .slide-btn.prev {left:12px;}
.goods-photo .slider .slide-btn.next {right:12px;}
.goods-photo .title {padding:11px; background:#242424; text-align:center; color:#fff; font-size:14px; font-weight:500; line-height:1.33em;}
.goods-photo .thumbs {background:#f7f7f7;}
.goods-photo .thumbs .items {display:grid; grid-template-columns:repeat(10, 1fr);}
.goods-photo .thumbs .item {cursor:pointer;}
.goods-photo .thumbs .item.active:after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid var(--color-primary);}

.goods-info {display:flex; flex-direction:column; justify-content:space-between; gap:25px; width:45%; padding:30px; border:1px solid #ddd; border-radius:5px;}
.goods-info .title {margin-bottom:5%;}
.goods-info .title h1 {margin-bottom:15px; font-size:var(--font-size-24); line-height:1.3em;}
.goods-info .title .info {color:#878787; line-height:1.6em;}
.goods-info .title .info .bar {display:inline-block; margin:0 2px; width:1px; height:12px; background:#ddd;}
.goods-info .price-area {display:flex; justify-content:center; padding:20px 0; margin-top:27px; border:5px solid #f1f1f1; border-radius:var(--radius-10); text-align:center; font-weight:500;}
.goods-info .price-area dl {position:relative; padding:0 21px;}
.goods-info .price-area dl:before {content:''; position:absolute; top:50%; left:0; margin-top:-8px; width:1px; height:16px; background:#ddd;}
.goods-info .price-area dl:first-child::before {display:none;}
.goods-info .price-area dt {margin-bottom:2px; color:#686868; font-size:var(--font-size-14); line-height:1.5em;}
.goods-info .price-area dd strong {font-size:var(--font-size-18);}
.goods-info .call-area {text-align:center;}
.goods-info .call-area a {display:inline-flex; justify-content:center; align-items:center; width:240px; height:54px; background:var(--color-primary); border-radius:50px; color:#fff; font-size:var(--font-size-22); font-weight:700;}
.goods-info .call-area a:before {content:''; width:20px; height:20px; margin-right:10px; background:url('../images/sub/icon-tel.png') 50% 50%/contain no-repeat;}
.goods-info .inquiry-area {text-align:center;}
.goods-info .inquiry-area a {display:inline-flex; width:100%; max-width:320px;}
.goods-info .inquiry-area .txt {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; padding:6px 14px; border:1px solid #ddd; border-right:0; border-radius:5px 0 0 5px; color:#878787; font-size:var(--font-size-14); line-height:1.33em;}
.goods-info .inquiry-area .btn {display:flex; justify-content:center; align-items:center; padding:6px 16px; background:var(--color-primary); border-radius:0 5px 5px 0; color:#fff; font-weight:600;}
.goods-info .inquiry-area a:hover .txt {border-color:var(--color-primary);}
.goods-info .schedule-area a {display:block; padding:18px; border-radius:5px; background:#f2f2f2; text-align:center; color:#686868; line-height:1.4em;}
.goods-info .schedule-area strong {font-weight:600;}
.goods-info .schedule-area a:hover {background:#686868; color:#fff;}
.goods-info .goods-number {font-weight:500; line-height:1.3em;}

.hr-line {margin:50px 0; border-bottom:1px solid #ddd;}

.gds-tit {margin-bottom:30px; font-size:var(--font-size-22); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}

.goods-options .gds-tit {margin-bottom:50px;}
.goods-options .option {display:flex; line-height:1.5em;}
.goods-options .option:not(:last-child) {margin-bottom:55px;}
.goods-options h4 {width:160px; font-weight:600;}
.goods-options ul {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-wrap:wrap; gap:25px; color:#454545;}
.goods-options ul li {min-width:200px;}

.goods-insurance {line-height:1.5em;}
.goods-insurance .row {display:flex; flex-wrap:wrap;}
.goods-insurance .col {width:50%;}
.goods-insurance .item {display:flex; padding:8px 0;}
.goods-insurance .item dt {width:260px; font-weight:600;}
.goods-insurance .item dd {flex:1 1 auto; min-width:0; width:1%; display:flex; color:#454545;}
.goods-insurance .item dd:before {content:''; min-width:100px; height:1px; margin:11px 35px 0 0; background:#ddd;}
.goods-insurance .date {font-weight:600;}
.goods-insurance .hr-line {margin:8px 0 16px; border-bottom-style:dashed;}

.goods-rent .items {display:grid; gap:25px;}
.goods-rent .item {display:flex;}
.goods-rent .item dt {width:160px; font-weight:600;}
.goods-rent .item dd {flex:1 1 auto; min-width:0; width:1%; display:flex; color:#454545;}
.goods-rent .item dd:before {content:''; min-width:50px; height:1px; margin:11px 40px 0 0; background:#ddd;}
.goods-rent .item .between {display:flex; align-items:center; width:100%;}
.goods-rent .item .between .txt {flex:1 1 auto; min-width:0; width:1%;}
.goods-rent .item .between .pri {font-size:var(--font-size-20); font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.goods-rent .item .radios {display:flex; gap:10px 30px; width:80%;}
.goods-rent .item .radios .radiobox {flex:1;}
.goods-rent .hr-line {margin:30px 0; border-bottom-style:dashed;}
.goods-rent .total {display:flex; align-items:center; justify-content:space-between; margin-bottom:60px;}
.goods-rent .total .txt {font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.goods-rent .total .pri {font-size:var(--font-size-22); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.goods-rent .btn {display:inline-block; padding:14px 30px; border:1px solid var(--color-primary); border-radius:30px; color:var(--color-primary); font-weight:600; line-height:1.3em;}
.goods-rent .btn:hover {background:var(--color-primary); color:#fff;}

.goods-detail {padding-bottom:50px; margin-bottom:40px; border-bottom:1px solid #ddd;}

.btn-list {display:inline-block; min-width:260px; padding:14px 30px; background:var(--color-primary); border-radius:30px; color:#fff; font-weight:600; line-height:1.3em;}

/* 리뷰 - 목록 */
.review-list .items {display:flex; flex-wrap:wrap; margin:0 -20px;}
.review-list .item {width:33.33333333%; padding:0 20px; margin-bottom:60px;}
.review-list .none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}

.review-box {position:relative; height:100%; border-radius:var(--radius-16); box-shadow:0px 3px 20px 0px rgba(0, 0, 0, 0.1); background:#fff;}
.review-box .thumb {position:relative; padding-bottom:60%; border-radius:var(--radius-16) var(--radius-16) 0 0; overflow:hidden;}
.review-box .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; transition:.4s; transform-origin:center center; object-fit:cover;}
.review-box .cnt {padding:30px; border-radius:0 0 var(--radius-16) var(--radius-16);}
.review-box .tit {height:calc(1.33em * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#242424; font-size:var(--font-size-18); font-weight:600; line-height:1.33em; letter-spacing:-.03em;}
.review-box .txt {margin:13px 0 16px; height:calc(1.43em * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#878787; font-size:var(--font-size-14); line-height:1.43em;}
.review-box .info {display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid #ddd; line-height:1.33em;}
.review-box .info .user {display:flex; align-items:center; color:#454545;}
.review-box .info .ico-user {width:35px; height:35px; margin-right:15px; background:url('/images/bbs/user.png') 50% 50%/contain no-repeat;}
.review-box .info .date {color:#878787;}
.review-box:hover .thumb img {-webkit-transform:scale(1.05); transform:scale(1.05);}
.review-box:hover::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid var(--color-primary); border-radius:var(--radius-16); z-index:2;}

/* 팝업 - 리뷰상세 */
.review-skin {border-radius:10px;}

.review-view-wrap {width:80vw; max-width:800px; height:80vh; max-height:800px; padding:35px; margin:5px; overflow:auto;}
.review-view-wrap::-webkit-scrollbar {width:3px; height:5px; background:transparent; border-radius:5px;}
.review-view-wrap::-webkit-scrollbar-thumb {background:#919191; border-radius:5px;}

.review-image img {width:100%;}

.review-heading {padding:30px 0 20px; margin-bottom:30px; border-bottom:1px solid #ddd;}
.review-heading h2 {color:#242424; font-size:var(--font-size-20); font-weight:600; line-height:1.33em; letter-spacing:-.03em;}
.review-heading .info {display:flex; align-items:center; margin-top:15px; line-height:1.33em;}
.review-heading .info .user {display:flex; align-items:center; color:#454545; margin-right:40px;}
.review-heading .info .ico-user {width:35px; height:35px; margin-right:15px; background:url('/images/bbs/user.png') 50% 50%/contain no-repeat;}
.review-heading .info .date {color:#878787;}
.review-content {color:#454545; font-size:var(--font-size-15);}

.pop-outside-close {position:absolute; top:0; right:-90px; width:60px; height:60px; background:var(--color-primary) url('/images/close.svg') 50% 50% no-repeat; background-size:22px; border-radius:100%;}

.pop-inside-close {position:absolute; top:20px; right:20px; width:24px; height:24px; background:url('/images/close-b.svg') 50% 50% no-repeat; background-size:16px;}
.pop-inside-close.lg {top:60px; right:40px; background-size:contain;}

/* 팝업 */
.pop-inq-skin {border-radius:15px;}

.pop-inq-wrap {width:80vw; max-width:520px; padding:60px 40px;}
.pop-inq-wrap .head {margin-bottom:30px;}
.pop-inq-wrap .head h2 {font-size:var(--font-size-24); font-weight:500; line-height:1.42em; letter-spacing:-.03em;}
.pop-inq-wrap .question {display:grid; gap:10px;}
.pop-inq-wrap .question .radiobox {display:block; margin-top:0;}
.pop-inq-wrap .question .radiobox label {display:flex; align-items:center; padding:12px 19px; border:1px solid #ddd; border-radius:24px; color:#454545; line-height:1.33em;}
.pop-inq-wrap .question .radiobox label:before {min-width:18px; margin:0 15px 0 0;}
.pop-inq-wrap .question .radiobox input:checked + label {border-color:var(--color-primary);}
.pop-inq-wrap .form {display:grid; gap:12px;}
.pop-inq-wrap .form .tit {display:block; margin-bottom:7px; font-size:14px; line-height:1.3em;}
.pop-inq-wrap .form .required {color:var(--color-primary);}
.pop-inq-wrap .form .input {display:block; width:100%; height:48px; border-radius:5px; font-size:14px;}
.pop-inq-wrap .button {margin-top:30px; text-align:center;}
.pop-inq-wrap .submit {display:inline-block; padding:12px 20px; background:var(--color-primary); border:0; border-radius:30px; color:#fff; font-weight:500; line-height:1.3em;}

.pop-lease-wrap {width:80vw; max-width:830px; padding:60px 40px;}
.pop-lease-wrap .head {margin-bottom:30px;}
.pop-lease-wrap .head h2 {font-size:var(--font-size-24); font-weight:500; line-height:1.42em; letter-spacing:-.03em;}
.pop-lease-wrap .table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #ddd; font-size:var(--font-size-15); line-height:1.5em; letter-spacing:-.03em;}
.pop-lease-wrap .table table th {padding:12px 20px; border-bottom:1px solid #ddd; background:#f8f8f8; font-weight:500; color:#454545; text-align:left;}
.pop-lease-wrap .table table td {padding:12px 20px; border-bottom:1px solid #ddd; color:#454545; text-align:right;}

.pop-lease-wrap .info-guide {display:flex; flex-wrap:wrap; gap:0 10px; margin-top:30px; color:#686868; font-size:var(--font-size-14); line-height:1.5em;}
.pop-lease-wrap .info-guide .col {width:370px;}
.pop-lease-wrap .info-guide ul li {position:relative; padding-left:10px; margin-bottom:6px;}
.pop-lease-wrap .info-guide ul li:before {content:'·'; position:absolute; top:0; left:0;}
.pop-lease-wrap .info-guide ul li strong {font-weight:500; color:#242424;}

.pop-sch-wrap {width:90vw; max-width:1280px; padding:60px 40px;}
.pop-sch-wrap .head {margin-bottom:23px;}
.pop-sch-wrap .head h2 {font-size:var(--font-size-22); line-height:1.42em; letter-spacing:-.03em;}
.pop-sch-wrap .cnt {position:relative; max-height:80vh; overflow:auto;}