/*=============================================================================================================== 차량리스트 ================================================================================================================*/ /* 좌측 검색 */ .car_wrap {font-size:0;overflow:hidden;} .car_wrap .cate_wrap, .car_wrap .car_left .button_group_wrap, .car_left .search_title {display:none;} .car_wrap .car_left .button_group {font-size:0;} .car_wrap .car_left .button_group button {width:100%;height:4rem;background:var(--color-main);font-size:1.1rem; margin-top:1rem;} .car_wrap -wrap .cate-list .has-sm-cate > .title, -wrap .cate-list .has-sm-cate > .title2 {position:relative;display:block;margin:0;padding:0 .625rem;color:var(--txt-dark-grey);font-weight:500;font-size:1rem;cursor:pointer;} .car_wrap -wrap .has-sm-cate > .title:before{display:block;content:"";position:absolute;right:1rem;top:50%;width:16px;height:16px;margin-top:-8px; background:url('/images/inc/ico_plus.png') no-repeat center ;} .car_wrap -wrap .has-sm-cate.open > .title:before{ background:url('/images/inc/ico_minus.png') no-repeat center ;} .car_wrap -wrap .custom-checkbox .check-label {font-size:.875rem;} .car_wrap -wrap .filter-content .search-box {margin:0; padding:0} .car_wrap -wrap .filter-content .search-box .search-input {width:100%;height:2.5rem;background:#f0f0f0;border:0;} .car_wrap -wrap .filter-content .search-box .btn {width:40px;height:40px;margin:0;line-height:40px;background:url('/images/common/btn_search.png') no-repeat center center #22252a;background-size:auto 70%;text-indent:-9999px;} .car_wrap -wrap select {height:2.5rem; line-height:2.5rem; padding-left:.313rem;background-color:#fff; border-radius:4px; border:1px solid #eee; } .car_wrap -wrap select.col2 {width:calc(50% - 8px); } .car_wrap -wrap em {height:20px; line-height:20px; width:16px; text-align:center; } .car_wrap -wrap .sm-cate-list {/*-webkit-overflow-scrolling: touch;*/} .uscar_wrapedcar -wrap .sm-cate-list.range {padding:0 0rem;} .car_wrap -wrap .sm-cate-list li .custom-checkbox, .usedcar -wrap .sm-cate-list li .custom-checkbox label {width:100%;/* padding:.15rem 0 .15rem .75rem;*/ line-height:1.2rem;word-break:keep-all;cursor:pointer;} .car_wrap -wrap .sm-cate-list li .tit {display:block;padding:.3rem 0;line-height:1.3rem;white-space:unset;cursor:pointer;} .car_wrap .filter-box-wrap .sm-cate-list li {position:relative;} .car_wrap .filter-box-wrap .sm-cate-list li.choice1, .car_wrap .filter-box-wrap .sm-cate-list li.choice2, .car_wrap .filter-box-wrap .sm-cate-list li.choice3, .car_wrap .filter-box-wrap .sm-cate-list li.choice4 {display:none;background:url("/images/sub/btn_cate_del.png?ver=241202") no-repeat 100% center;background-size:auto 16px;font-weight:bold;color:#111; cursor:pointer;} .car_wrap .filter-box-wrap .sm-cate-list li.c2, .car_wrap .filter-box-wrap .sm-cate-list li.c3 {display:none;} .car_wrap .filter-box-wrap .sm-cate-list .step2 li.choice1 {display:block;padding-left:0rem;padding-right:2.2rem;} .car_wrap .filter-box-wrap .sm-cate-list .step2 li {padding-left:1rem;} .car_wrap .filter-box-wrap .sm-cate-list .step2 li.c1 {display:none;} .car_wrap .filter-box-wrap .sm-cate-list .step2 li.c2 {display:block;} .car_wrap .filter-box-wrap .sm-cate-list .step3 li.choice2 {display:block;padding-left:0.65rem;} .car_wrap .filter-box-wrap .sm-cate-list .step3 li.choice3 {display:block;padding-left:1.2rem;} .car_wrap .filter-box-wrap .sm-cate-list .step3 li {padding-left:1.3rem;} .car_wrap .filter-box-wrap .sm-cate-list .step3 li.c1, .car_wrap .filter-box-wrap .sm-cate-list .step3 li.c2 {display:none;} .car_wrap .filter-box-wrap .sm-cate-list .step3 li.c3 {display:block;} .car_wrap .filter-box-wrap .sm-cate-list .step4 li.choice4 {display:block;padding-left:0.65rem;} .car_wrap .filter-box-wrap .sm-cate-list .step4 li.choice4 {display:block;padding-left:1.2rem;} .car_wrap .filter-box-wrap .sm-cate-list .step4 li {padding-left:1.3rem;} .car_wrap .filter-box-wrap .sm-cate-list .step4 li.c1, .car_wrap .filter-box-wrap .sm-cate-list .step4 li.c2, .car_wrap .filter-box-wrap .sm-cate-list .step4 li.c3 {display:none;} .car_wrap .filter-box-wrap .sm-cate-list .step4 li.c4 {display:block;} .car_left {float:left;width:16rem;} .car_left .title_wrap {padding:1rem 0 1rem;} .car_left .title_wrap button {padding-left:2rem;background:url('/images/inc/ico_reset.png') no-repeat 12px center transparent;background-size:auto 1rem;border-radius:50px;font-size:.95rem;color:#111;} .car_left .square.col2 {background-color:#f4f4f4; border-radius:6px; overflow:hidden;} .car_left .square.col2 input[type=radio] + label {width:50% !important;padding:0;margin:0 !important; font-size:1rem;line-height:3.25rem;font-weight:bold; text-align:center; } .car_left .square.col2 input[type=radio] + label:after {display:none;} .car_left .square.col2 input[type=radio]:checked + label {position:relative;z-index:1; color:#fff; background-color:var(--color-main);} .car_left .square.col3 {background-color:#f4f4f4; border-radius:6px; overflow:hidden; display:flex;} .car_left .square.col3 input[type=radio] + label {width:33.3% !important;padding:0;margin:0 !important; font-size:1rem;line-height:3.25rem;font-weight:bold; text-align:center; } .car_left .square.col3 input[type=radio] + label:after {display:none;} .car_left .square.col3 input[type=radio]:checked + label {position:relative;z-index:1; color:#fff; background-color:var(--color-main);} .car_left .square {display:block;} .car_left .search_title {display:none;} .car_left .search_title span {display:block;line-height:3.5rem;font-size:.9rem;text-align:center;color:#888;} .car_left .search_title .button {position:absolute;right:0;top:0;width:3.5rem;height:3.5rem;padding:0;background:url('/images/btn_close.png') no-repeat center transparent;background-size:auto 1.5rem;font-size:0;} @media screen and ( max-width:800px ) { .car_left .title_wrap button {font-size:.85rem;} .car_left .square.col3 input[type=radio] + label {line-height:2.8rem;} .car_wrap .filter-box-wrap .sm-cate-list li.choice1, .car_wrap .filter-box-wrap .sm-cate-list li.choice2, .car_wrap .filter-box-wrap .sm-cate-list li.choice3, .car_wrap .filter-box-wrap .sm-cate-list li.choice4 {background-size:auto 1.3rem; margin:.5rem 0} } .car_right {float:right;width:calc(100% - 16rem);padding-left:4rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .car_wrap.full .car_right {float:none;width:100%;padding:0;} .car_wrap.full .cate_wrap {display:block;padding-bottom:2rem; } .car_wrap.full .cate_wrap button {width:100%; background-size:auto 1.85rem; height:3.25rem;background-color:#fff; border:1px solid var(--color-main);font-size:1rem;color:var(--color-main);font-weight:bold;} .car_wrap.full .cate_wrap button:after {content: "\e913"; font-family:'xeicon'; display:inline-flex; align-items: center; margin:0; width:auto;margin-left:.35rem; font-size:1rem; color:var(--color-main); } .car_wrap.full .car_left {position:fixed;left:-100%;top:0;bottom:0;width:100%;height:100%;padding:0 1rem 1rem;background:#fff;z-index:100;overflow:auto;} .car_wrap.full .car_left.active {left:0; } .car_wrap.full .car_left.active .search_title {display:block;} .car_wrap.full .car_left.active .button_group_wrap {display:block;} .optionWrap {} .optionWrap > li {border-top:1px solid #e5e5e5;} .optionWrap > li > p {position:relative;display:block;margin:0;padding:0 1rem;color:#333;font-weight:bold;font-size:.9rem;line-height:3.8rem;cursor:pointer;} .optionWrap > li > p:hover, .optionWrap > li.on > p {font-weight:bold;} .optionWrap > li > p:after {position:absolute;top:1.4rem;right:1rem;clear:both;display:inline-block;content:'';width:15px;height:15px;background-image:url("/images/inc/ico_plus.png");background-position:center;background-repeat:no-repeat;background-size:auto 1rem;} .optionWrap > li .option {display:none;} .optionWrap > li .option {font-size:.9rem;} .optionWrap > li .option.col2 {font-size:0;} .optionWrap > li .option.col2 li {display:inline-block;width:50%;} .optionWrap > li.on.modelpart .slimScrollDiv, .optionWrap > li.on.modelpart .option {height:20rem !important;} .optionWrap > li.on > p:after{background-image:url("/images/inc/ico_minus.png");} .optionWrap > li.on .option {display:block;background-color:#f9fafb;} .optionWrap > li .slimScrollBar {width:5px !important;opacity:0.2 !important;-webkit-transition:width .2s ease;-ms-transition:width .2s ease;transition:width .2s ease;} .optionWrap > li input, .optionWrap > li select {height:2.8rem;} .optionWrap > li .slimScrollBar:hover, .optionWrap > li .slimScrollBar:active {width:15px !important;opacity:0.6 !important;} .optionWrap > li .option.col2 input[type=checkbox] + label { width:100%;padding:0rem; text-align:center; margin:0;font-size:.9rem;color:#555;line-height:2.3rem;; background-color:#fff; border:1px solid #dedede; border-radius:6px; transition: all 0.2s ease-in;} .optionWrap > li .option.col2 input[type=checkbox]:checked + label { color:var(--color-main); border-color:var(--color-main); transition: all 0.2s ease-in;} .optionWrap > li .option.col2 input[type=checkbox] + label:before, .optionWrap > li input[type=radio] + label:before {top:.8rem; display:none;} .optionWrap > li .option.col2 input[type=checkbox] + label:after, .optionWrap > li input[type=radio] + label:after {top:.8rem; display:none; } .optionWrap > li .option.col2 input[type=checkbox] + label:after {width:.3rem;height:.6rem;background-size:1rem auto !important; display:none; } .optionWrap > li input, .optionWrap > li select {font-size:.9rem;margin:0;} .optionWrap > li select {width:83%;margin-bottom:2px;} .optionWrap > li .year {width:45%;} .optionWrap > li .month {width:37%;} .optionWrap > li .range {display:none;} .optionWrap > li .range input {display:inline-block;width:83%;height:34px;margin-bottom:2px;} .optionWrap > li .option {padding:1rem;} .optionWrap > li .option.col2 li {padding:0.15rem; } .optionWrap > li .option .opt, .optionWrap > li .selected-item {display:table;width:100%;} .optionWrap > li .option .opt em, .optionWrap > li .selected-item em {display:table-cell;width:100%;padding:3px 5px 3px 0;font-style:normal;color:#46485;letter-spacing:-1px;font-size:.9rem; font-weight:500; cursor:pointer;} .optionWrap > li .option .opt em:hover {text-decoration:underline;} .optionWrap > li .option .opt span, .optionWrap > li .selected-item span {display:table-cell;text-align:right;} .optionWrap > li .option .opt span i {color:#54555a;font-style:normal;font-size:.78rem; padding-right:2px;} .optionWrap > li .selected-item span .r_close { display:inline-block;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;background:url("/images/sub/btn_cate_del.png?ver=241202") 0 0 no-repeat; background-size:cover; } .optionWrap > li .selected-item em {color:#111;font-weight:bold;} .optionWrap > li .selected-item.depth2 em, .optionWrap > li .selected-item.depth3 em {color:#111;} .optionWrap > li .option .opt .depth2, .optionWrap > li .selected-item.depth2 {padding-left:10px;} .optionWrap > li .option .opt .depth3, .optionWrap > li .selected-item.depth3 {padding-left:20px;} .optionWrap > li .option .opt .depth4, .optionWrap > li .selected-item.depth4 {padding-left:30px;} .optionWrap > li .option .opt .depth4 em {padding:0;} .optionWrap > li.notoggle > p:after {display:none;} .optionWrap > li.notoggle .searchbox input {display:inline-block;width:calc(100% - 65px);font-size:0.875rem; border-radius:6px 0 0 6px;} .optionWrap > li.notoggle .searchbox button {padding:0 1rem;height:2.8rem; border-radius:0 6px 6px 0} @media all and (max-width:1024px) { .car_wrap.full .cate_wrap {padding:0 0.85rem 1rem; } .optionWrap > li .option .opt em, .optionWrap > li .selected-item em {font-size:1rem; padding:.4rem .2rem} } /* 차량리스트 */ .carList-Wrap {width:1200px; margin:0 auto;position:relative; } .page-sangsa .car-right { display:block; width:100%;} .car-right{display:inline-block; vertical-align:top; width:calc(100% - 320px); margin-top:0rem; } .car-right .keyword {display:block; margin:25px 0 0; padding:20px 30px; border-radius:7px; background-color:#f4f4f4} .car-right .keyword button {display:inline-block; margin-left:25px; font-size:15px; line-height:1.3em;color:#333; } .car-right .keyword button:first-child {margin-left:0} .car-right .keyword button:after {content:"\e921"; display:inline-block; vertical-align:top; margin-left:5px; margin-top:0px; line-height:1.3em;font-size:15px; color:#333;font-family:'xeicon'; } .car-right .keyword button:hover::after {color:var(--color-main);} .car-right .order-pc {display:inline-block;} .car-right .order-mobile {display:none;} /* 마이페이지 내차관리*/ .car-right.my{float:right;width:calc(100% - 180px); margin-top:0rem;padding-left:3.125rem; } .resultWrap {margin:0 0 10px; font-size:0; display:flex; width:100%; justify-content: space-between;flex-direction: row;align-items: center; } .resultWrap input[type=checkbox] + label{ padding-right:0px; } .resultWrap button { font-weight:500; padding:0 0.85rem; border:1px solid #ddd; font-size:0.85rem; font-weight:500; color:#333; border-radius:4px; } .resultWrap button.consult-done {background-color:#0cacff; color:#fff; border-color:#0cacff} .resultWrap select {display:inline-block; vertical-align:middle; border:1px solid #dedede; border-radius:5px; padding-right:35px; } .resultWrap .count {display:inline-block; vertical-align:middle; width:auto; padding-right:10px; font-size:18px; line-height:38px; font-weight:500; color:#555;} .resultWrap .count strong{font-weight:bold;font-size:110%; color:var(--color-main)} .resultWrap .align-wrap {display:inline-block; vertical-align:middle; width:calc(100% - 100px) ; text-align:right; } .resultWrap .align-wrap .seq {display:inline-block; vertical-align:middle; } .resultWrap .align-wrap .seq ul {display:inline-block; vertical-align:middle; } .resultWrap .align-wrap .seq ul button{display:inline-block; margin-left:10px; font-size:14px; font-weight:500; color:#777; } .resultWrap .align-wrap .seq ul button:first-child {margin-left:0; padding-left:0; } .resultWrap .align-wrap .seq ul button:before {content:''; display:inline-block; vertical-align:middle; margin-right:10px; height:14px; width:1px; background-color:#ddd; } .resultWrap .align-wrap .seq ul button:first-child:before {display:none; } .resultWrap .align-wrap .seq ul button.on {font-weight:bold; color:#333} .resultWrap .align-wrap .seq ul button.on:before {display:none;} .resultWrap .align-wrap select {display:inline-block; vertical-align:middle; font-weight:500; border:1px solid #dedede; border-radius:5px; min-width:120px; margin:0 2px; padding:0 25px 0 8px; background-position:calc(100% - 5px) ; } .resultWrap .align-wrap select.select-align {display:inline-block;} .resultWrap .compare {display:inline-block; vertical-align:middle; margin-right:5px;height:38px; padding:0 15px 0 20px; font-size:14px; border:1px solid var(--color-main); color:var(--color-main); border-radius:5px; font-weight:bold; background:url('/images/sub/ico_vs_on.png') no-repeat 15px ; text-indent:15px; background-size:auto 16px; } .resultWrap .btn-align {display:inline-block; vertical-align:middle; margin-left:5px; width:auto; font-size:0; height:auto;right:0; padding:0px; background-color:#fff; border-radius:4px;border:1px solid #aaa; } .resultWrap .btn-align a { display:inline-block; vertical-align:top; width:38px; height:36px; border-radius:5px; background-size:auto 25px; background-repeat:no-repeat; background-position:center center; background-image: url('/images/sub/icon_bbs_gallery.png');transition: all 0s ease-in;} .resultWrap .btn-align a.on {background-image:url('/images/sub/icon_bbs_list.png'); background-color:#fff; } .resultWrap .btn-box a {display:inline-block; height:40px; line-height:40px; padding:0 20px; border-radius:6px; font-size:0.95rem; font-weight:500; } .resultWrap .btn-box a.write {background-color:#061c5b; color:#fff; } .resultWrap select, .resultWrap input, .resultWrap button {height:38px; line-height:38px; } .resultWrap.my {display:flex;justify-content: space-between;flex-direction: row; align-items: center; flex-wrap: nowrap; } .resultWrap.my .row {display:flex; flex-direction: row; gap:0.2rem; align-items: center; } .resultWrap.my input[type=checkbox] + label {padding-right:3px; display:inline-block; vertical-align:middle; } .resultWrap.my select, .resultWrap.my button, .resultWrap.my .compare { font-size:0.85rem; } .resultWrap.my .compare {border-color:var(--color-main); color:var(--color-main); padding-left:25px !imortant; background-position:10px ; margin:0;} .resultWrap.my .btn-upload {background-color:#5e39ff; border-color:#5e39ff; color:#fff; } .resultWrap.my .delete {background-color:#444; border-color:#444; color:#fff;} /* 차량리스트 일반형 */ .page-MY .result-carlist > li:first-child {border-top:1px solid #666;} .result-carlist { position:relative; display:block; margin-top:0px; } .result-carlist.no-chk > li {padding-left:0.35rem; padding-right:0.35rem; } .result-carlist > li { display:block; position:relative; height:auto; width:100%; padding-left:25px; font-size:0;padding-bottom:25px; padding-top:25px; border-bottom:1px solid #eee;} .result-carlist > li:first-child {border-top:1px solid #ddd;} .result-carlist > li > a {display:block; } .result-carlist > li .check-area {position:absolute; left:2px; top:50%; margin-top:-10px; z-index:3; } .result-carlist > li .img-wrap {display:inline-block; position:relative; vertical-align:middle; width:190px; height:135px; border-radius:5px; /*background:url('/images/no_img_400.jpg') no-repeat center ; */background-size:cover; background-repeat:no-repeat ; background-position:center center;} .result-carlist > li .img-wrap a {display:block;position:relative; width:100%; height:100%; background-size:cover; background-repeat:no-repeat ; background-position:center center; } .result-carlist > li.viewed .img-wrap:before {content: "\e950";display:grid;position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0.35);font-size:26px; line-height:1;font-weight:lighter !important; color:#fff; border:0px;align-items:center;text-align:center;z-index:10;} .result-carlist > li > .car-info .title a{ font-size:1.063rem;font-weight:600; color:#222; letter-spacing:-.04em;overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } .result-carlist > li > .car-info .title a:hover {text-decoration:underline;} .result-carlist .car-info {display:inline-block;vertical-align:middle; width:calc(100% - 190px); padding:0px 0 0 30px; font-size:0; } .result-carlist .car-info .infoBox {display:inline-block; vertical-align:middle; width:calc(100% - 200px); } .result-carlist .car-info .infoBox .title {display:block;} .result-carlist .car-info .infoBox .title a { display:block; font-weight:bold; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } .result-carlist .car-info .car-desc {display:block; font-size:14px; margin:0.35rem 0; } .result-carlist .car-info .car-desc em { display:inline-block; vertical-align:middle; margin:0px 10px 0; width:4px; height:4px; border-radius:5px; background-color:#c3c7d3;} .result-carlist .car-info .car-desc span {display:inline-block; vertical-align:middle;font-size:0.85rem; color:#666; margin-right:6px; padding-right:0px;} .result-carlist .car-info .car-desc span:after {content:''; display:inline-block; vertical-align:middle; margin-left:6px; width:4px; height:4px; border-radius:5px; background-color:#c3c7d3;} .result-carlist .car-info .car-desc span:last-child:after { display:none !important; } .result-carlist .car-info .car-desc .dealer {color:#111;display:inline-block; vertical-align:middle; font-weight:bold; } .result-carlist .car-info .car-desc br {display:none;} .result-carlist .car-info .car-exp {display:block; padding-top:0.565rem;font-weight:500; color:#555; font-size:0.85rem; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } .result-carlist .car-info .special_wrap {/*position:relative; */} .result-carlist .mark { display:none; position:absolute; right:10px; top:10px; z-index:3; width:45px; height:65px; background-image:url('/images/40year.png'); background-size:cover; background-repeat:no-repeat; background-position:center 0 } .result-carlist .car-hash { display:none; font-size:0.85rem; color:#36acff; font-weight:500; margin-top:5px; height:26px; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .result-carlist .auc-info {position:relative;display:inline-block; vertical-align:middle; width:200px; text-align:right; } .result-carlist .auc-info .price {display:block;font-size:17px; color:#555;} .result-carlist .auc-info .price em {padding-right:10px;font-size:14px;} .result-carlist .auc-info .price strong{font-size:24px; font-weight:bold; color:var(--color-main); letter-spacing:0} .result-carlist .auc-info .cn-manage {display:block; font-size:0.8rem; padding-top:0.65rem; } .result-carlist .auc-info .cn-manage .car-state {display:block; } .result-carlist .auc-info .cn-manage button.save-done {display:inline-block;vertical-align:middle; border:0; background-color:#999; color:#fff;height:22px; line-height:20px; padding:0 0.65rem; border-radius:9rem; font-size:0.8rem; font-weight:500; } .result-carlist .auc-info .cn-manage p.carN {display:block;font-size:0.75rem; padding-top:0.25rem;} .result-carlist .auc-info .car-date {display:block; font-size:0.9rem; color:#555; margin-bottom:0.65rem} .result-carlist .car-select {position:relative;display:block; margin-top:10px; display:none;} .result-carlist .car-select button {display:inline-block; width:30px; height:30px; line-height:30px; text-align:center; margin-left:8px;} .result-carlist .car-select button:hover {border-color:#555 !important;opacity:1;} .result-carlist .car-select button.wish { background-image:url('/images/sub/ico_wish_off.png'); background-size:24px 24px; background-position:center center; background-repeat:no-repeat; } .result-carlist .car-select button.wish.on {background-image:url('/images/sub/ico_wish_on.png'); border-color:var(--color-main) !important;opacity:1;} .result-carlist .car-select button.vs { background-image:url('/images/sub/ico_vs_off.png'); background-size:24px 24px; background-position:center center; background-repeat:no-repeat; } .result-carlist .car-select button.vs.on {background-image:url('/images/sub/ico_vs_on.png'); border-color:var(--color-main) !important;opacity:1;} .result-carlist .label_area {display:flex; justify-content: flex-start; padding-top:0.5rem; gap:4px;} .result-carlist .carcheck {display:inline-block; clear:both; padding:0 0.5rem;border:1px solid #777;border-radius:.2rem;color:#111;font-size:.8rem; height:26px; line-height:24px; font-weight:500; margin-top:.3rem; } .result-carlist .block_chain {padding:0 0.5rem; border:0; background-color:#eef6fc; border-radius:.2rem;color:var(--color-main);font-size:.8rem;height:26px; line-height:26px; font-weight:500 } .result-carlist button, .result-carlist a { transition: all 0s ease-in; } /* 차량리스트 갤러리형 */ .result-carlist.gallery {position:relative; border-top:0; margin-top:20px; font-size:0; display:flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;gap:25px; } .result-carlist.gallery li { position:relative;width:calc(33.3% - 17px); padding:0;border:0; background-color:transparent; border-radius:7px; overflow:hidden;display:flex; flex-direction:column; flex-wrap: wrap; align-items: stretch; } .result-carlist.gallery li .check-area {left:5px; top:5px !important; margin-top:0px; width:18px; height:18px; z-index:1} .result-carlist.gallery .img-wrap { width:100%; height:200px; position:relative; border-radius:.65rem} .result-carlist.gallery > li.viewed .img-wrap:before {font-size:36px;line-height:36px;} .result-carlist.gallery .car-badge label {font-size:0.721rem; padding:0px 10px 0; height:22px; line-height:22px;} .result-carlist.gallery .car-hash {margin-top:0px;} .result-carlist.gallery .car-info { display:flex; flex-direction: column; justify-content: space-between; align-items: stretch; width:100%; margin:0;padding:15px .25rem 0; border:0px solid #f00} .result-carlist.gallery .car-info .infoBox { width:100%; position:relative; } .result-carlist.gallery .car-info .car-desc {font-size:0.85rem; line-height:1.3rem;/*height:1.5rem;*/ letter-spacing:-.07em;} .result-carlist.gallery .car-info .car-desc em {margin:0px 5px 0; width:3px; height:3px; } .result-carlist.gallery .car-info .carcheck {position:absolute; bottom:1.4rem; right:0; margin:0;z-index:10; cursor:pointer; } .result-carlist.gallery .auc-info { display:flex; flex-direction: row; justify-content: space-between; width:100%;height:auto; margin:0 auto;right:auto;top:auto;padding:.5rem 0px 1.2rem;} .result-carlist.gallery .auc-info .price {width:50%; font-size:18px; text-align:left;margin-top:5px;} .result-carlist.gallery .auc-info .car-select {width:50%;margin-top:0 ; text-align:right; display:none;} .result-carlist.gallery .auc-info .car-select button {margin-left:5px; margin-right:0px; } .result-carlist.gallery .auc-info .cn-manage {display:none} .result-carlist.gallery .btnArea {padding:0 12px 15px 15px; } .result-carlist.gallery .btnArea button {height:42px;line-height:42px;font-size:14px; } /* 상사별 */ .page-sangsa .result-carlist.gallery li {width:calc(25% - 19px); } @media screen and (max-width:1200px){ .car-right{ width:calc(100% - 270px); } .page-sangsa .car-right {margin-top:0} .result-carlist > li { padding-bottom:15px; padding-top:15px;} .result-carlist > li .img-wrap {width:150px; height:115px; } .result-carlist .car-info { width:calc(100% - 150px); padding:0px 0 0 20px; } .result-carlist .car-info .infoBox { width:calc(100% - 170px); } .result-carlist .car-hash {font-size:0.75rem;height:20px; } .result-carlist > li > .car-info .title a{ font-size:1rem; } .result-carlist .car-select button {width:25px; height:25px; line-height:25px; } .result-carlist .car-select button.wish, .result-carlist .car-select button.vs { background-size:20px 20px; } .result-carlist .auc-info {width:170px; } .result-carlist .auc-info .price {font-size:15px;} .result-carlist .auc-info .price em {padding-right:5px;font-size:12px;} .result-carlist .auc-info .price strong{font-size:20px; } .car-badge {min-height:auto; } .result-carlist .car-info .car-desc {margin-top:5px;} .result-carlist.gallery {gap:20px; } .result-carlist.gallery li {width:calc(33.3% - 13.5px); border-radius:5px; } .result-carlist.gallery .car-info { padding:10px 15px 0; min-height:auto;} .result-carlist.gallery .auc-info { padding:20px 0px 20px;} .result-carlist.gallery .auc-info .price { font-size:1rem;margin-top:0px; } /* 상사별 */ .page-sangsa .result-carlist.gallery {gap:20px;} .page-sangsa .result-carlist.gallery li {width:calc(33.3% - 14px); border-radius:5px; } } @media screen and (max-width:1024px){ .result-carlist.no-chk > li {padding-left:0rem; padding-right:0rem; } .car-right{display:block;clear:both; width:100%; } .resultWrap{margin:0; } .resultWrap .count { font-size:1.1rem; } .resultWrap select {height:30px ; line-height:30px;} .resultWrap .align-wrap .compare {margin-right:5px; font-size:0.75rem; height:30px ;} .resultWrap .align-wrap .seq ul {margin-right:0px;} .resultWrap .btn-align {margin-left:5px; } .resultWrap .btn-align a { width:28px; height:28px; background-size:auto 22px;} .car-right .order-pc {display:none !important;} .car-right .order-mobile {display:inline-block !important;} .result-carlist{margin-top:15px; } .result-carlist .car-info .car-desc {font-size:13px; margin-top:5px; } .result-carlist .car-info .car-desc em { margin:0px 7px 0; width:3px; height:3px; } .result-carlist.gallery {margin-top:15px; } .result-carlist.gallery .car-info {min-height:auto;} .result-carlist.gallery .car-info .car-desc {height:auto; } .resultWrap.my {padding:0 5px;} .check-area {display:none !important;} .result-carlist .car-select button.vs, .result-carlist.gallery .car-select button.vs, .slideWrap .sellerInfo .info-left button.vs {display:none; } .resultWrap .compare {display:none;} .slideWrap .sellerInfo .info-left {padding-right:0} .resultWrap button.car-modify, .resultWrap button.save, .resultWrap button.move, .resultWrap .view-count, .resultWrap .btn-upload {display:none;} .resultWrap.my .delete {display:none !important;} } @media screen and (max-width:677px){ .car-right .order-mobile {display:none !important;} .car-right {margin-top:0px;padding:0 } .resultWrap {padding:0 0.85rem 2.8rem; display:flex;justify-content: space-between;position:relative; } .resultWrap .count {width:auto; font-size:1rem; line-height:0.9rem; } .resultWrap .align-wrap {width:auto; display:inline-block;} .resultWrap .align-wrap .seq {width:calc(100% - 1.8rem); position:absolute; left:0.9rem; bottom:0px;padding-top:0.35rem; border-top:1px solid #eaeaea; } .resultWrap .align-wrap .seq ul {width:100%; display:flex; justify-content: center; align-items: center;} .resultWrap .align-wrap .seq ul select {width:49% !important;} /*.resultWrap .align-wrap .compare {display:none !important}*/ .car-badge {display:none;} .resultWrap .btn-align {margin-left:0px; } .resultWrap .btn-align a { } .resultWrap .item-pc{display:none;} .resultWrap.my {margin-top:0.65rem;} .result-carlist .mark {top:5px; right:5px; width:30px; height:45px;} .result-carlist .auc-info {display:block; width:100%; text-align:left;padding-top:3px;} .result-carlist .auc-info .cn-manage, .result-carlist .auc-info .car-date, .result-carlist .car-info .car-exp {display:none;} .result-carlist > li { padding-top:1rem; padding-bottom:1rem; padding-left:0; border-top:0} .result-carlist > li .img-wrap {width:120px;height:95px !important; vertical-align:top; border-radius:0 } .result-carlist > li > .car-info .title { margin-top:0.3rem; } .result-carlist .car-hash {height:auto; padding:0; margin:0; display:none; } .result-carlist .car-info { width:calc(100% - 120px); padding-left:10px; padding-top:0px; vertical-align:top; } .result-carlist .car-info .infoBox { width:100%; } .result-carlist .car-info .car-desc em { margin:0px 6px 0; width:2px; height:2px; } .result-carlist .auc-info .car-select {display:inline-block; vertical-align:top; margin-top:0; margin-left:5px; display:none;} .result-carlist .auc-info .price {display:inline-block;vertical-align:top; font-size:0.85rem; } .result-carlist .auc-info .price strong{font-size:1.05rem; } .result-carlist .car-select button {width:20px; height:20px; line-height:20px; margin-left:5px; } .result-carlist .car-select button.wish, .result-carlist .car-select button.vs { background-size:auto 16px; } .result-carlist .carcheck {position:absolute; right:5px; bottom:0; font-size:11px; height:22px; line-height:20px; padding:0 5px;} .result-carlist .label_area {position:absolute; right:0; bottom:3px; } .result-carlist.gallery .label_area {position:relative; display:flex; justify-content: flex-start; padding-top:0.5rem; gap:4px; } .result-carlist.gallery {gap:10px;} .result-carlist.gallery li, .result-carlist.gallery li:after{border-radius:0} .result-carlist.gallery li {width:calc(50% - 5px); } .result-carlist.gallery .img-wrap {border-radius:0} .result-carlist.gallery .car-info { padding:10px 18px 0;} .result-carlist.gallery .car-info .infoBox {min-height:auto;} .result-carlist.gallery .auc-info { padding:15px 0px 20px;} .result-carlist.gallery .auc-info .car-select {width:auto; } .result-carlist.gallery > li .img-wrap {height:12rem !important;} .result-carlist.gallery > li > .car-info .title {margin:0 0 .3rem;} .result-carlist.gallery .car-badge { right:5px; top:5px; } .result-carlist.gallery .car-badge label {font-size:0.65rem; padding:0px 8px 0; height:18px; line-height:18px;} .result-carlist.gallery .car-select button {width:23px; height:23px; line-height:23px; margin-left:5px; } .result-carlist.gallery .car-select button.wish, .result-carlist.gallery .car-select button.vs { background-size:auto 21px; } .result-carlist.gallery .auc-info .price strong{font-size:1.25rem; } .result-carlist.gallery .carcheck {width:60px;} /* 상사별 */ .page-sangsa .result-carlist.gallery li { border-radius:0px; } .page-sangsa .result-carlist.gallery {gap:10px;} .page-sangsa .result-carlist.gallery li {width:calc(50% - 5px); } .resultWrap button { padding:0 0.35rem; font-size:0.75rem; height:24px; } .resultWrap select {height:30px; line-height:30px; border:0;font-size:0.85rem; background-position:calc(100% - 5px) ; background-size:auto 12px;} .resultWrap .align-wrap select {border:0;min-width:auto;} .resultWrap button.consult-done {display:inline-block;} .page-consult .resultWrap {display:block; text-align:right; padding:0 8px; margin-top:-20px !important;} } @media screen and (max-width:580px){ .result-carlist.gallery .car-badge {display:block !important} .resultWrap.my input[type=checkbox] + label {padding-left:16px; border:0px solid #f00 } .result-carlist.gallery > li > .car-info .title a {margin-top:1rem; font-size:1rem;} .result-carlist.gallery .car-info .car-desc {font-size:0.85rem;line-height:1.1rem;height:auto;} .result-carlist.gallery .car-info .car-desc em {margin:0px 5px 0; width:1px; height:1px; } /* .badge */ .badge-style {margin-right:2px; font-size:0.7rem;padding:0px 6px 0; height:20px; line-height:20px; ;} } @media screen and (max-width:460px){ .resultWrap select {border:0; width:auto; text-overflow: ellipsis;} .resultWrap.my select {width:auto;font-size:0.8rem; height:28px; line-height:26px;padding-left:0.4rem;padding-right:23px;background-position:calc(100% - 5px) ; } .resultWrap.my button{font-size:0.8rem; height:28px; line-height:26px;padding:0 0.5rem; } .carList-Wrap { padding:0; } .result-carlist .img-wrap {border:0px solid #f00} .result-carlist.gallery {gap:0} .result-carlist.gallery li {border-radius:0px; } .result-carlist.gallery > li .img-wrap {border-radius:0; height:14rem !important; border-bottom:0px solid #f00 } .result-carlist.gallery li:after {display:none; } .result-carlist.gallery li {width:100%; margin-left:0px !important; margin-bottom:20px; } .result-carlist.gallery .auc-info { padding:10px 0px 0px;} .result-carlist.gallery .car-info .infoBox {padding-bottom:0;} .result-carlist.gallery .car-info .carcheck {display:block; position:relative; font-size:0.80rem; bottom:0;} .page-sangsa .result-carlist.gallery li {width:100%; margin-left:0px !important; margin-bottom:30px; } } @media screen and (max-width:390px){ .carList-Wrap { padding:0; } .resultWrap .align-wrap .item-pc {display:none !important; } .result-carlist.general > li .img-wrap {height:90px; } /* 상사별 */ .page-sangsa .resultWrap .align-wrap select {font-size:0.75rem;} } @media screen and (max-width:360px){ .result-carlist.gallery .car-info { padding:10px 10px 0; } } @media screen and (max-width:350px){ .page-sangsa .resultWrap .align-wrap .compare {font-size:0;width:20px;height:20px;margin:0; } .resultWrap .align-wrap select {padding-left:0 !important} .resultWrap .align-wrap {width:calc(100% - 60px); } .resultWrap .align-wrap .seq ul select {width:100px !important;} .resultWrap .align-wrap .seq ul select:first-child {width:90px !important;} } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 차량상세페이지 ///////////////////////////////////////////////////////////////////////////////////////////*/ .page-detail .carN-top {display:none; } .slideWrap .mark {position:absolute; left:20px; top:20px; z-index:5; width:100px; height:130px; background-image:url('/images/40year.png'); background-size:cover; background-repeat:no-repeat; background-position:center 0} .slideWrap {padding-top:160px;position:relative; width:1200px; margin:0 auto; } .slideWrap .detail-headInfo { position:absolute; left:0; top:1rem;height:140px; width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom:2.125rem} .slideWrap .detail-headInfo .infoWrap {display:inline-block; width:calc(100% - 400px); } .slideWrap .detail-headInfo .label-area {position:relative;display:block; font-size:0; } .slideWrap .detail-headInfo .label-area label {display:inline-block; vertical-align:top; background-color:var(--color-main); color:#fff; width:auto; border-radius:6rem; height:24px; line-height:24px; padding:0 0.85rem;margin-right:5px; font-size:0.75rem; font-weight:500; letter-spacing:-.07em; } .slideWrap .detail-headInfo .car-title {font-size:1.7rem; font-weight:600; line-height:1.9rem; margin-top:10px; color:#222; letter-spacing:-.06em;} .slideWrap .detail-headInfo .car-desc {font-size:0.938rem; line-height:0.938rem; letter-spacing:-.07em; color:#666; font-weight:500; margin-top:0.85rem; letter-spacing:0 ; } .slideWrap .detail-headInfo .car-desc em {margin:3px 10px 0; } .slideWrap .detail-headInfo .priceBox {display:flex; align-items:center; justify-content: flex-end; gap:.65rem;width:400px;font-size:0; position:relative;} .slideWrap .detail-headInfo .priceBox .price{ display:flex; align-items: center; color:var(--color-main); font-weight:bold; font-size:1.75rem; line-height:1.75rem;letter-spacing:0; } .slideWrap .detail-headInfo .priceBox .price em {padding-left:2px; font-size:75%; font-weight:500; } .slideWrap .detail-headInfo .priceBox button.all-calc {display:flex; justify-content: center; align-items: center; height:2.65rem; font-size:.95rem; border-radius:.35rem;padding:0 .65rem; background-color:#fff; border:1px solid #ddd;font-weight:500; color:#666; } .slideWrap .detail-headInfo .priceBox .btn-consult {width:auto; display:flex; gap:.25rem;} .slideWrap .detail-headInfo .priceBox .btn-consult a { display:flex; justify-content: center; align-items: center;height:2.65rem;font-size:1rem;border-radius:.35rem; padding:0 1.5rem;background-color:var(--color-main); color:#fff; font-weight:bold; } .slideWrap .detail-headInfo .priceBox .s-txt {font-size:0.85rem !important; color:#777; font-weight:normal; margin-right:5px; } .slideWrap .sellerInfo {position:relative; display:flex; flex-direction: row; justify-content: space-between; width:100%; background-color:#f2f3f4; height:60px; padding:0 1rem; border-radius: 0 0 12px 12px; } .slideWrap .sellerInfo .info-left {width:45%;padding:1rem 1rem 0 1rem; position:relative;} .slideWrap .sellerInfo .info-left button:first-child {margin-left:0} .slideWrap .sellerInfo .info-left button {display:inline-block;margin-left:1.45rem; padding-left:25px; font-size:0.855rem;font-weight:500;line-height:25px; text-align:center; background-size:auto 21px; background-position:left center; background-repeat:no-repeat; } .slideWrap .sellerInfo .info-left button.wish { background-image:url('/images/sub/ico_wish_off.png'); } .slideWrap .sellerInfo .info-left button.wish.on {background-image:url('/images/sub/ico_wish_on.png'); } .slideWrap .sellerInfo .info-left button.vs { background-image:url('/images/sub/ico_vs_off.png'); } .slideWrap .sellerInfo .info-left button.vs.on {background-image:url('/images/sub/ico_vs_on.png'); } .slideWrap .sellerInfo .info-left button.print { background-image:url('/images/sub/ico_print_off.png'); } .slideWrap .sellerInfo .info-left button.btn_sns { background-image:url('/images/sub/ico_sns.png'); } .slideWrap .sellerInfo .info-left button.print.on {background-image:url('/images/sub/ico_print_on.png'); } .slideWrap .sellerInfo .seller-right{width:55%; font-size:0.9rem; text-align:right; padding:1rem 1rem 0 0;} .slideWrap .sellerInfo .seller-right span {display:inline-block; margin-left:1rem; font-size:1.125rem; font-weight:500; color:#555 } .slideWrap .sellerInfo .seller-right span:first-child {margin-left:0} .slideWrap .sellerInfo .seller-right span.seller:before {content:''; display:inline-block; vertical-align:top; width:20px; height:20px;background:url('/images/sub/ico_call.png') no-repeat left ; background-size:auto 18px; } .slideWrap .sellerInfo .seller-right span.seller a { display:inline-block; font-weight:bold; color:var(--color-main); margin-left:5px;font-size:105% } .slideWrap .sellerInfo .seller-right span.number {font-size:0.85rem; } .slideWrap .sellerInfo .seller-right span.number a {display:inline-block; margin-left:5px; height:1.75rem; line-height:1.75rem; padding:0 0.85rem; border-radius:6rem; background-color:var(--color-sub); color:#fff; font-weight:bold; } /* .detail-headInfo .auc-info li button:before {content:'';position:absolute;left:0;right:0;top:0;height:35px;background:rgba(255,255,255,.6); } .detail-headInfo .auc-info li button.on:before, .detail-headInfo .auc-info li.active button:before {display:none;} .detail-headInfo .auc-info li button.on:after, .detail-headInfo .auc-info li.active button:after {color:#37bdfc;} .detail-headInfo .auc-info li button.vs { background-image:url('/images/inc/ico_vs_off.png'); } .detail-headInfo .auc-info li button.vs.on { background-image:url('/images/inc/ico_vs_on.png'); } .detail-headInfo .auc-info li button.vs:after {content:'비교하기'; } .detail-headInfo .auc-info li button.share { background-image:url('/images/inc/ico_share_off.png'); } .detail-headInfo .auc-info li.active button.share { background-image:url('/images/inc/ico_share_on.png'); } .detail-headInfo .auc-info li button.share:after {content:'공유하기'; } .detail-headInfo .auc-info .shareWrap{position:relative;} .detail-headInfo .auc-info .socialBox{display:none;position:absolute;right:0;bottom:-70px; font-size:0;min-width:160px;width:max-content;height:auto;line-height:normal;padding:13px ;background:#fff;border:1px solid #949494; box-shadow: 7px 7px 15px -3px rgba(0, 0, 0, 0.15); border-radius:7px; text-align:center; z-index:30;transition: all 0.2s ease-in;} .detail-headInfo .auc-info .socialBox:before{clear:both;display:block;content:'';position:absolute;top:-10px;right:17px;width:21px;height:10px;background:url("/images/inc/social_box_arrow.gif") center 0 no-repeat; background-size:21px 10px; } .detail-headInfo .auc-info .socialBox a {display:inline-block; vertical-align:top; margin:0 4px; width:35px; height:35px; border-radius:5px; text-align:center; } .detail-headInfo .auc-info .socialBox a:before {content:''; display:inline-block; line-height:35px; font-size:20px;font-family:'xeicon';} .detail-headInfo .auc-info .socialBox a.fb {background-color:#3c7bd9; color:#fff; } .detail-headInfo .auc-info .socialBox a.fb:before { content:"\ebd3"; } .detail-headInfo .auc-info .socialBox a.kakao {background-color:#f2da00; color:#2d191a; } .detail-headInfo .auc-info .socialBox a.kakao:before { content:"\ebee"; font-size:22px ; } .detail-headInfo .auc-info .socialBox a.twitter {background-color:#1c9cea; color:#fff; } .detail-headInfo .auc-info .socialBox a.twitter:before { content:"\ec1f"; } .detail-headInfo .auc-info .shareWrap.active .socialBox{display:block;} */ .CDV_Topmenu.fixed{position:fixed; top:0; left:0; width:100%; margin-top:0 !important; z-index: 99; } @media screen and (max-width:1200px){ .slideWrap {width:100%; } .slideWrap .detail-headInfo{ padding:0 5px; } .slideWrap .detail-headInfo .label-area label{ height:20px; line-height:20px; padding:0 0.75rem;margin-right:3px; font-size:0.715rem; } .slideWrap .detail-headInfo .car-title{font-size:1.563rem; line-height:1.8rem; margin-top:10px; } .slideWrap .detail-headInfo .car-desc{ margin-top:0.5rem; font-size:0.813rem; line-height:0.813rem; } .slideWrap .detail-headInfo .car-desc em {margin:3px 6px 0; } .slideWrap .detail-headInfo .priceBox {padding-top:0.85rem;} .slideWrap .sellerInfo {border-radius:0} .slideWrap .sellerInfo .info-left {padding-left:0} .slideWrap .sellerInfo .seller-right{ padding-right:0} } @media screen and (max-width:1024px){ .slideWrap .detail-headInfo { height:140px;} .slideWrap .detail-headInfo .car-title{font-size:1.4rem; line-height:1.7rem; letter-spacing:-.06em;} } @media screen and (max-width:768px){ .slideWrap .detail-headInfo .car-title {font-size:1.438em; line-height:1.438rem;} .slideWrap .detail-headInfo .infoWrap { width:calc(100% - 300px);} .slideWrap .detail-headInfo .priceBox { width:300px; position:relative; } .slideWrap .detail-headInfo .priceBox .price{ font-size:1.438rem; line-height:1.438rem; } .slideWrap .detail-headInfo .priceBox .btn-consult { width:9rem;} .slideWrap .detail-headInfo .priceBox .btn-consult a{ font-size:1.125rem; height:3.5rem; line-height:3.5rem; } } @media screen and (max-width:677px){ .page-detail {padding-bottom:80px;} .page-detail footer {display:none; } .page-detail a.go-back {display:none !important; } .slideWrap { padding-top:60px;position:relative;} .slideWrap .mark { left:5px; top:5px; width:50px; height:65px; } .slideWrap .detail-headInfo {position:relative; top:auto; height:auto; padding:0 15px; margin-top:20px; flex-direction: column; } .slideWrap .detail-headInfo .infoWrap { width:100%;position:relative; } .slideWrap .detail-headInfo .car-title {font-size:1.188rem; line-height:1.5rem;font-weight:bold; } .slideWrap .detail-headInfo .car-desc { margin-top:0.85rem; font-size:0.813rem; line-height:0.813rem; color:#666} .slideWrap .detail-headInfo .priceBox { display:block; width:100% !important; margin-top:1rem; text-align:left; position:relative;} .slideWrap .detail-headInfo .priceBox .price { width:100%; text-align:left;font-size:1.563rem; line-height:1.563rem;position:relative; } .slideWrap .sellerInfo { background-color:transparent;padding:0; } .slideWrap .sellerInfo .info-left { width:94%; text-align:right; position:absolute; margin-top:-45px;padding:0; z-index:0} .slideWrap .sellerInfo .info-left button {font-size:0; margin-left:0.85rem;} .slideWrap .sellerInfo .seller-right {text-align:center; border:1px solid #d1d7e0; border-radius:10px;width: 96%;height:auto;padding:1rem 0; display:block; margin:0 auto; } .slideWrap .sellerInfo .info-left button.wish {z-index:10} .slideWrap .sellerInfo .info-left button.btn_sns {background-size:auto 27px;} .slideWrap .sellerInfo .info-left button.print {display:none;} /* 모바일 하단 고정버튼 */ .slideWrap .detail-headInfo .priceBox button.all-calc {position:fixed; width:50%; bottom:0; left:0; z-index:332; height:3.75rem; line-height:3.75rem; border-radius:0; font-size:1.1rem; border:0; background-color:#444; color:#fff; font-weight:bold ; } .slideWrap .detail-headInfo .priceBox .btn-consult a{position:fixed; width:50%; bottom:0; right:0; z-index:332; height:3.75rem; line-height:3.75rem; font-size:1.1rem; border-radius:0rem; } } @media screen and (max-width:360px){ .slideWrap .sellerInfo .seller-right {height:5.3rem;} .slideWrap .sellerInfo .seller-right span {display:block; margin-left:0rem; } .slideWrap .sellerInfo .seller-right span.number {margin-top:0.35rem; } } #detail-cont {display:block; position:relative;} .detailWrapper {position:relative; display:block; width:100%} .carDetail-wrap {display:inline-block;position:relative; vertical-align:top; width:100%; margin-top:3rem; } .carDetail-wrap .column { margin:1.2rem 0 4rem} /* 차량상세정보 */ .car-detail-inner {position:relative; z-index:0;display:block; margin:0; padding:0;} .car-detail-inner h2.title {display:block; clear:both;position:relative;font-size:1.313rem; line-height:1.313rem; color:#111; padding:50px 0 15px;letter-spacing:-.06em; font-weight:500; } .car-detail-inner h2.title span {display:inline-block; margin-left:5px; font-size:80%; color:#888} .car-detail-inner h2.title:first-child {padding-top:0} .car-detail-inner h2.title a.btn-more {position:absolute; right:5px; bottom:0rem; font-size:0.98rem; line-height:1.1rem; font-weight:500; color:#222; } .car-detail-inner h2.title a.btn-more:after {content:"\e93f"; display:inline-block; vertical-align:top;font-family:'xeicon'; font-size:1.4rem; } .car-detail-inner h2.title .txt-link {display:inline-block; margin-left:1rem; font-size:0.9rem; color:#777; } .car-detail-inner h2.title .txt-link i {text-decoration:underline; color:#000 } .car-detail-inner h2.title .btn-pop {position:absolute; right:0; bottom:5px;height:2.813rem; line-height:2.8rem; padding:0 1.3rem; border-radius:5px ; border:1px solid #ddd; font-size:0.95rem; font-weight:500; color:#333; } .car-detail-inner h2.title .btn-pop:hover {border-color:var(--color-main); background-color:var(--color-main); color:#fff;} .btn-pop2 {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:360px; height:2.813rem; line-height:2.8rem;text-align:center; border-radius:2px ; border:0px solid #ddd; font-size:0.95rem; font-weight:500; background-color:#888; color:#fff !important; } .btn-pop2:hover {background-color:var(--color-main); color:#fff !important;} .car-detail-inner h2.title a.info{display:inline-block; vertical-align:top; margin-top:0px; margin-left:8px; position:relative;text-align:center; width:20px; height:20px; border-radius:25px; background-color:#fff; border:1px solid #aaa; } .car-detail-inner h2.title a.info:before {content:"?"; display:inline-block; vertical-align:top; font-size:14px; line-height:20px; color:#555; } .car-detail-inner h2.title a.info + div.expLayer {display:none;position:absolute;left:110px; top:-10px; width:50%;padding:15px 15px;border:1px solid #ccc; border-radius:7px; background:#fff;font-size:13px; color:#777; line-height:1.3em; text-align:left; box-shadow:1px 1px 10px rgba(0,0,0,.1);z-index:1;} .car-detail-inner h2.title a.info + div.expLayer:after {content:'';position:absolute;left:-6px;top:14px;width:10px;height:10px;border-width:0 0 1px 1px;border-color:#999;border-style:solid;background:#fff;z-index:2;transform:rotate(45deg);} .car-detail-inner h2.title a.info:hover + div {display:block;} .car-detail-inner .box_style { background-color:#fff; border:1px solid #dfe4ea;border-radius:8px; } /* 차량정보 */ .car-detail-inner p.txt-exp { display:block; font-size:15px; color:#666; line-height:1.4em; } .car-detail-inner .detail-info01 {display:block; padding:20px 20px 20px 30px; } .car-detail-inner .detail-info01 ul{font-size:0;} .car-detail-inner .detail-info01 ul li {display:inline-block; vertical-align:top; width:20%; line-height:1.3em; font-size:1rem; margin:1rem 0;color:#888;font-weight:400;} .car-detail-inner .detail-info01 ul li p {display:block; margin-top:8px; font-size:102%; line-height:1.3em; color:#222; letter-spacing:-.02em} @media screen and ( max-width:1024px ) { .carDetail-wrap {padding:0 1rem;} .carDetail-wrap .column { margin:0.85rem 0 2rem} .car-detail-inner .detail-info01 { padding:1rem; border-radius:5px; margin-bottom:3rem; } .car-detail-inner .detail-info01 ul li { width:25%;} .car-detail-inner h2.title { font-size:1.125rem; line-height:1.125rem; padding:40px 0 15px; font-weight:bold;} } @media screen and ( max-width:677px ) { .page-detail .carN-top {display:block; position:absolute; top:0; left:60px; width:calc(100% - 120px); height:3.75rem; line-height:3.75rem; text-align:center; font-size:1.25rem; font-weight:bold; color:#333; letter-spacing:0; z-index:333} .carDetail-wrap .column { margin:0.5rem 0 1.3rem ; } .car-detail-inner .detail-info01 ul li { width:33.3%;margin:0.85rem 0;} .car-detail-inner h2.title .btn-pop { bottom:8px; right:10px;height:1.875rem; line-height:1.87rem; padding:0 0.9rem;font-size:0.75rem; } .btn-pop2 { height:2.5rem; line-height:2.5rem; width:80%;padding:0 0.65rem; font-size:0.85rem;} } @media screen and ( max-width:500px ) { .page-detail .carN-top { font-size:1.185rem;} .car-detail-inner .detail-info01 ul li { width:50%;} .car-detail-inner .detail-info01 ul li {font-size:0.85rem; } .carDetail-wrap { margin-top:0 !important; } .carDetail-wrap .column { margin:0.5rem 0 1rem} .car-detail-inner h2.title a.btn-more { right:0px; bottom:0.65rem; font-size:0.765rem; } } @media screen and ( max-width:320px ) { .car-detail-inner .detail-info01 ul li {font-size:0.85rem; } .car-detail-inner .detail-info01 ul li p {margin-top:0.35rem;} } .detail-quickinfo {display:flex; margin:1rem 0 2rem;} .detail-quickinfo .box {position:relative;flex:1;padding:2rem 14rem 2rem 2rem;background:#f2f3f4;border-radius:8px;} .detail-quickinfo .box:first-child {margin:0 .5rem 0 0;} .detail-quickinfo .box h3 {font-size:1.2rem;letter-spacing:-.08rem;} .detail-quickinfo .box p {padding:.5rem 0 0;font-size:.9rem;letter-spacing:-.07rem;} .detail-quickinfo .box .button {position:absolute;right:2rem;top:2rem;width:10rem;height:2.8rem;border-radius:5px;background:#fff; outline:0; border:1px solid var(--color-main);color:var(--color-main);font-size:.95rem;letter-spacing:-.07rem;} .detail-quickinfo .box .button:hover {background:var(--color-main);color:#fff; border:1px solid var(--color-main);} .detail-quickinfo .box .button[disabled] {border:0;background:#eee !important;color:#fff !important; cursor:default; } @media screen and ( max-width:800px ) { .detail-quickinfo {padding:0 1rem;} .detail-quickinfo .box {padding:0;background:transparent;} .detail-quickinfo .box h3, .detail-quickinfo .box p {display:none;} .detail-quickinfo .box .button {position:relative;right:auto;top:auto;width:100%;height:3rem;border-radius: 10px;} } /* 차량옵션 */ .car-detail-inner .carOption {display:block;} .car-detail-inner .carOption ul { padding:0px; font-size:0;text-align:center; width:100%; } .carOption ul li {display:inline-block; vertical-align:top; width:16.6%; } .carOption ul li figure {display:inline-block; width:150px; height:150px; background-size:auto 4.375rem; background-position:center 30%; background-repeat:no-repeat; transition: all 0s ease-in; border-radius:30px; } .carOption ul li figure.option1 {background-image:url('/images/optionParts/sub_icon1.png'); } .carOption ul li figure.option2 {background-image:url('/images/optionParts/sub_icon2.png');} .carOption ul li figure.option3 {background-image:url('/images/optionParts/sub_icon3.png');} /*.carOption ul li figure.option4 {background-image:url('/images/optionParts/sub_icon4.png');}*/ .carOption ul li figure.option4 {background-image:url('/images/optionParts/sub_icon5.png');} .carOption ul li figure.option5 {background-image:url('/images/optionParts/sub_icon6.png');} .carOption ul li figure.option6 {background-image:url('/images/optionParts/sub_icon7.png');} .carOption ul li figure.option7 {background-image:url('/images/optionParts/sub_icon8.png');} .carOption ul li figure.option8 {background-image:url('/images/optionParts/sub_icon9.png');} .carOption ul li figure.option9 {background-image:url('/images/optionParts/sub_icon10.png');} .carOption ul li figure.option10 {background-image:url('/images/optionParts/sub_icon11.png');} /*.carOption ul li figure.option11 {background-image:url('/images/optionParts/sub_icon12.png');}*/ .carOption ul li figure.option11 {background-image:url('/images/optionParts/sub_icon13.png');} .carOption ul li figure.option12 {background-image:url('/images/optionParts/sub_icon14.png');} .carOption ul li figure p {font-size:0.915rem; color:#999; font-weight:500; margin-top:6.25rem; letter-spacing:-.08rem} .carOption ul li.active figure {} .carOption ul li.active figure p {color:#222;} .carOption ul li.active figure.option1 {background-image:url('/images/optionParts/sub_icon1_on.png');} .carOption ul li.active figure.option2 {background-image:url('/images/optionParts/sub_icon2_on.png');} .carOption ul li.active figure.option3 {background-image:url('/images/optionParts/sub_icon3_on.png');} /*.carOption ul li.active figure.option4 {background-image:url('/images/optionParts/sub_icon4_on.png');}*/ .carOption ul li.active figure.option4 {background-image:url('/images/optionParts/sub_icon5_on.png');} .carOption ul li.active figure.option5 {background-image:url('/images/optionParts/sub_icon6_on.png');} .carOption ul li.active figure.option6 {background-image:url('/images/optionParts/sub_icon7_on.png');} .carOption ul li.active figure.option7 {background-image:url('/images/optionParts/sub_icon8_on.png');} .carOption ul li.active figure.option8 {background-image:url('/images/optionParts/sub_icon9_on.png');} .carOption ul li.active figure.option9 {background-image:url('/images/optionParts/sub_icon10_on.png');} .carOption ul li.active figure.option10 {background-image:url('/images/optionParts/sub_icon11_on.png');} /*.carOption ul li.active figure.option11 {background-image:url('/images/optionParts/sub_icon12_on.png');}*/ .carOption ul li.active figure.option11 {background-image:url('/images/optionParts/sub_icon13_on.png');} .carOption ul li.active figure.option12 {background-image:url('/images/optionParts/sub_icon14_on.png');} .carOption .plusOption {display:block; margin-top:0rem; margin-bottom:2rem; text-align:center; } .carOption .plusOption a {display:inline-block; height:2.813rem; line-height:2.810rem; padding:0 2rem; background-color:#eff2f6; border-radius:9rem; font-size:1rem; font-weight:500; color:#333; } .carOption .plusOption a:after {content:''; display:inline-block; vertical-align:top; margin-left:5px; width:20px; height:2.75rem; background:url('/images/ico_plus.png') no-repeat center ; background-size:auto 0.85rem;} @media screen and ( max-width:1024px ) { .carOption ul {padding:0} .carOption ul li {margin-bottom:1rem} .carOption ul li figure {width:130px; height:130px; background-size:auto 3.75rem; } .carOption ul li figure p {font-size:0.85rem;margin-top:5.5rem; } .carOption .plusOption a { height:2.188rem; line-height:2.188rem; padding:0 1.3rem; font-size:0.85rem; } .carOption .plusOption a:after { margin-left:3px; width:20px; height:2.18rem; background-size:auto 0.65rem;} } @media screen and ( max-width:870px ) { .carOption ul li {width:25%; margin-bottom:0.65rem} } @media screen and ( max-width:667px ) { .car-detail-inner .carOption {padding: 0 10px;} .carOption ul li figure {width:120px; height:120px; background-size:auto 3.05rem; } .carOption ul li figure p {font-size:0.85rem;margin-top:4.1rem; } } @media screen and ( max-width:530px ) { .carOption ul {display:flex; width:100%; flex-direction: row; align-items: stretch; flex-wrap: wrap; justify-content: space-between; gap:0.5rem } .carOption ul li {width:31%; margin-bottom:0.15rem; padding:0rem;} .carOption ul li figure { width:100%; height:100%; padding:1.5rem 0; border-radius:20px;} .carOption ul li figure p {font-size:0.75rem;margin-top:3rem; } } @media screen and ( max-width:360px ) { .carOption ul li figure { padding:1rem 0} } .carOption ul li.tip {position:relative;} .carOption ul li.tip div {display:none;position:absolute;width:100%;padding:15px 15px;border:1px solid #999;background:#fff;font-size:17px;box-shadow:1px 1px 10px rgba(0,0,0,.1);z-index:1;} .carOption ul li.tip div img {width:100%;height:auto;} .carOption ul li.tip div:after {content:'';position:absolute;left:15px;top:-6px;width:10px;height:10px;border-width:0 0 1px 1px;border-color:#999;border-style:solid;background:#fff;z-index:2;transform:rotate(135deg);} .carOption ul li.tip div strong {display:inline-block;padding:5px 0;font-weight:bold;font-size:16px;} .carOption ul li.tip div p {color:#888;font-size:14px;font-weight:normal;} .carOption ul li.tip:hover + div {display:block;} .carOptD { width:100%; } .carOptD th {text-align:center; padding:10px 0 5px; background-color:#f5f5f5;} .carOptD td, .carOptD th {border-right:1px solid #eaeaea !important; } .carOptD td{vertical-align:top;padding:20px; text-align:left; } .carOptD i{display:block;line-height:1.5em;font-size:1rem;color:#ddd; font-weight:300; cursor:pointer; letter-spacing:-.06em;} .carOptD i.active{color:#333; font-weight:500} .carOptD i.tip {padding-left:0;} .carOptD i.tip + div {display:none;position:absolute;width:50% ; left:50%; top:50%; transform: translate(-50%,-50%); padding:15px 15px;border:1px solid #ddd; border-radius:5px; background:#fff;font-size:17px;box-shadow:5px 5px 10px rgba(0,0,0,.06);z-index:1;} .carOptD i.tip + div img {width:100%;} .carOptD i.tip + div:after { display:none; content:'';position:absolute;left:15px;top:-6px;width:10px;height:10px;border-width:0 0 1px 1px;border-color:#ddd;border-style:solid;background:#fff;z-index:2;transform:rotate(135deg);} .carOptD i.tip + div strong {display:inline-block;padding:5px 0;font-weight:bold;font-size:16px;} .carOptD i.tip + div p {color:#888;font-size:14px;font-weight:normal;} .carOptD i.tip:hover + div {display:block;} /* .carOptD.hide{display:none;}*/ .car-detail-inner .basic_T {border-right:0px solid #eaeaea} .carOptD h2.option-title {display:block; font-size:1.3rem; color:#333; font-weight:700; margin:1.5rem 0; border-top:1px dashed #ddd; padding:2rem 0 0 } .carOptD h2.option-title:first-child {border:0;padding-top:0; margin-top:1rem; } .carOptD ul {font-size:0; } .carOptD ul li {display:inline-block; vertical-align:top; width:25%; margin:0.65rem 0 } @media screen and ( max-width:1024px ) { .carOptD i{font-size:0.95rem;} .carOptD ul li { width:33.3%; margin:0.45rem 0 } } @media screen and ( max-width:667px ) { .carOptD ul li { width:50%; margin:0.25rem 0 } .carOptD i.tip + div { width:80% ; } } @media screen and ( max-width:460px ) { .carOptD i{font-size:0.85rem; letter-spacing:-.1em;} } @media screen and ( max-width:360px ) { .carOptD i{font-size:0.75rem;} } /* 차량설명 */ .carDetail-wrap .car-exp { padding:40px; font-size:1rem; line-height:1.5rem; color:#444; min-height:150px; } .carDetail-wrap .car-exp.disable:after { content:'차량설명이 없습니다.'; display:block; width:100%; text-align:center; line-height:300px; font-size:1rem; color:#888; font-weight:500; } /* 판매자정보 */ .carDetail-wrap .dealerInfo { padding:2rem 1rem 2rem 4rem; font-size:0; display:flex; flex-direction: row;justify-content: space-between;align-items: center; width:100%; } .carDetail-wrap .dealerInfo .profile-img { width:120px; height:155px; border:0px solid #e5e6e9; background-color:#f5f7fa; border-radius:5px; overflow:hidden; background-repeat:no-repeat; background-position:center 0; background-size:cover; } .carDetail-wrap .dealerInfo .profile-info {width:calc(100% - 120px); padding-left:3rem; font-size:0; } .carDetail-wrap .dealerInfo .profile-info li { display:inline-block; width:50%; vertical-align:top; font-size:1rem; color:#a3a4a6; font-weight:400; margin:0.65rem 0; } .carDetail-wrap .dealerInfo .profile-info li span {display:inline-block;vertical-align:top; } .carDetail-wrap .dealerInfo .profile-info li span:first-child {width:120px; color:#999;} .carDetail-wrap .dealerInfo .profile-info li span:first-child + span {color:#333; font-weight:600; width:calc(100% - 120px)} /* 보증정보 */ .carDetail-wrap .w-info { } .carDetail-wrap .w-info h3.tit1 { font-size:1.063rem; font-weight:bold; color:var(--color-main); line-height:1.8rem; margin-top:1.5rem; } .carDetail-wrap .w-info h3.tit1:first-child {margin-top:0} .carDetail-wrap .w-info p.txt1 {margin-top:0.5rem; font-size:1rem; color:#777; line-height:1.8rem; font-weight:400; } .carDetail-wrap .w-info .noteBox {margin:1rem 0 0; border-radius:8px; padding:2rem 3rem; background-color:#f5f6f7} .carDetail-wrap .w-info .noteBox p {font-size:0.95rem; color:#666; line-height:1.4rem; margin:0.65rem 0; font-weight:400; } .carDetail-wrap .w-info .noteBox p.note{color:var(--color-orange)} .carDetail-wrap .w-info .noteBox p.note:before {content:''; display:inline-block; vertical-align:top; margin-right:3px; width:21px; height:21px; background:url(/images/ico_note_blue.png) no-repeat center ; background-size:cover; } /* 동급 차량 */ .sameCar {overflow:hidden; position:relative; margin-top:1.2rem; margin-left:-0.65rem; margin-right:-0.65rem;height:320px; } .sameCarlist .car_list_item {margin-left:.5rem; margin-right:.5rem;} .sameCarlist .car_list_item figure { height:180px; } @media screen and ( max-width:1024px ) { /* 차량설명 */ .carDetail-wrap .car-exp {padding:1.3rem; } /* 판매자정보 */ .carDetail-wrap .dealerInfo { border-radius:8px; padding:1.5rem 0.9rem 1.5rem 2rem; } .carDetail-wrap .dealerInfo .profile-img { width:110px; height:130px;} .carDetail-wrap .dealerInfo .profile-info {width:calc(100% - 110px); padding-left:1.5rem; } .carDetail-wrap .dealerInfo .profile-info li { font-size:0.9rem; margin:0.45rem 0; } .carDetail-wrap .dealerInfo .profile-info li span:first-child {width:100px; } .carDetail-wrap .dealerInfo .profile-info li span:first-child + span { width:calc(100% - 100px)} /* 동급 차량 */ .sameCar { width:calc(100% + 2rem); margin-left:-1rem !important; margin-right:-1rem !important;} .sameCarlist { padding: 0 1.2rem; } .sameCarlist .slick-list{overflow: visible;} .sameCarlist li.car_list_item {margin:0 5px 10px; } } @media screen and ( max-width:798px ) { /* 판매자정보 */ .carDetail-wrap .dealerInfo { padding:1.1rem 0.6rem 1.1rem 1.3rem; } .carDetail-wrap .dealerInfo .profile-img { width:90px; height:110px;} .carDetail-wrap .dealerInfo .profile-info {width:calc(100% - 90px); padding-left:0.8rem; } .carDetail-wrap .dealerInfo .profile-info li { display:inline-block; width:50%; font-size:0.85rem; margin:0.35rem 0; } .carDetail-wrap .dealerInfo .profile-info li span:first-child {width:80px; } .carDetail-wrap .dealerInfo .profile-info li span:first-child + span { width:calc(100% - 80px)} } @media screen and ( max-width:677px ) { /* 차량설명 */ .carDetail-wrap .car-exp { padding:1rem; font-size:0.85rem; line-height:1.5em; } .carDetail-wrap .car-exp.disable:after { line-height:150px; font-size:0.85rem; } /* 판매자정보 */ .carDetail-wrap .dealerInfo {padding:2rem 1rem; align-items: flex-start; } .carDetail-wrap .dealerInfo .profile-img {margin-top:0.5rem;} .carDetail-wrap .dealerInfo .profile-info { padding-left:1rem; display:flex; flex-direction: column; gap:.65rem; } .carDetail-wrap .dealerInfo .profile-info li { width:100%; margin:0; display:flex; justify-content: space-between;} .carDetail-wrap .dealerInfo .profile-info li span {font-size:.9rem; font-weight:500;} .carDetail-wrap .dealerInfo .profile-info li span + span {text-align:right;} .carDetail-wrap .w-info h3.tit1 { font-size:1rem; font-weight:bold; color:var(--color-main); line-height:1.2rem; margin-top:1.5rem; } .carDetail-wrap .w-info p.txt1 {margin-top:0.5rem; font-size:0.85rem; line-height:1.4rem; } .carDetail-wrap .w-info .noteBox {margin:0.65rem 0 0; border-radius:5px; padding:1rem; } .carDetail-wrap .w-info .noteBox p {font-size:0.80rem; line-height:1.3rem; margin:0.35rem 0;} .carDetail-wrap .w-info .noteBox p.note:before {width:18px; height:18px; margin-top:0.2rem; } } @media screen and ( max-width:400px ) { .carDetail-wrap .dealerInfo {padding:1.3rem; flex-direction: column; justify-content: center;} .carDetail-wrap .dealerInfo .profile-img {margin:0 auto; width:120px; height:120px; border-radius:50%;} .carDetail-wrap .dealerInfo .profile-info {padding:0; width:100%; margin-top:0.65rem} } /* 차량비교 */ .compare-wrap { padding:20px 0;text-align:center;} .compare-wrap .basic_T {margin-top:5px; } .compare-wrap .basic_T tbody th, .compare-wrap .basic_T tbody td {padding:7.5px;margin:0; font-size:14px; line-height:1.3em; } .compare-wrap .basic_T tbody th, .compare-wrap .basic_T tbody tr {padding:0; margin:0; } .compare-wrap .t_normal {margin-top:5px; } .compare-wrap .t_normal tbody th, .compare-wrap .t_normal tbody td {padding:7.5px;margin:0; font-size:14px; line-height:1.3em; } .compare-wrap .t_normal tbody th, .compare-wrap .t_normal tbody tr {padding:0; margin:0; } .compare-wrap .th_tit i{display:block;width:100%;height:50px;margin-bottom:15px;background:url("/images/carDetail_view/vs_ico.png") 50% 50% no-repeat;} .compare-wrap .mid_tit {height:30px;padding:0;background:#555;color:#fff;} .compare-wrap .pic {padding:5px 0 0 !important;vertical-align:top;} .compare-wrap .pic p{position:relative;width:200px;margin:0 auto;height:120px;overflow:hidden;} .compare-wrap .pic p i{position:absolute;top:0;left:0;width:100%;height:100%;display:block;} .compare-wrap .pic p i.imgWrap img {overflow:hidden;width:100%;height:100%;object-fit:cover;}/* ie,엣지 외 다른브라우저위해 꼭 필요함 */ .compare-wrap .pic p a{position:absolute;top:0;right:0;display:block;height:18px;width:18px;background:url("/images/r_del.png") 0 0 no-repeat;} .compare-wrap .pic em{display:block;padding:5px 8px;font-weight:500;text-align:center;font-size:14px;color:#000;letter-spacing:-.5px;word-break:keep-all;} .compare-wrap .button-group { margin-top:20px; padding:0;text-align:center;} .compare-wrap .button-group button {width:150px;height:45px;font-size:14px; display:inline-block; margin-left:10px; } .compare-wrap .button-group button:first-child {margin-left:0; } .compare-wrap .btn-close { background-color:#444; color:#fff; } .compare-wrap .btn-close:hover { background-color:#111; color:#fff; } .compare-wrap .btn-print { background-color:#02b1e7; color:#fff; } .compare-wrap .btn-print:hover { background-color:#02b1e7; color:#fff; } @media screen and ( max-width:767px ) { .compare-wrap .pic p{ width:180px ; height:110px; } } @media screen and ( max-width:550px ) { .compare-wrap .pic {padding:0 !important;} .compare-wrap .pic p{ width:100%; height:90px; } }