.sub-header {position:relative;width:100%; margin:0; padding:5rem 0 0;} .sub-header .head-title {display:block;font-size:2.8rem;letter-spacing:-.08rem;line-height:1; font-weight:bold; color:#333; } .sub-header .head-txt {display:block; margin-top:1.1rem; font-size:1.015rem;width:70%; line-height:1.6rem; font-weight:400; color:var(--txt-light-grey); letter-spacing:-.06em;} .sub-header.cardetail {display:none;} @media all and (max-width:1024px) { .sub-header {padding:3.75rem 0 1rem;} .searchopen .sub-header {padding-top:9.375em;} } @media all and (max-width:800px) { .sub-header .head-title {font-size:1.65rem; display:none;} } /*=============================================================================================================== 모바일 모드 ================================================================================================================*/ .pop.cardetail .sub-header {display:none;} @media screen and ( max-width:1024px ) { .pop.cardetail .sub-header, .sub .sub-header {display:block;padding:0;} .sub .sub-header h2, .pop .sub-header h2 {display:block;text-align:center !important;line-height:3.5rem;font-size:1.125rem !important;color:#333 !important;letter-spacing:0 !important;} .sub .car_right .head-title {display:block;text-align:center !important;;line-height:3.5rem;font-size:1.125rem !important;color:#333 !important;letter-spacing:0 !important;} .sub .header_mo, .pop .header_mo {display:block;position:relative;z-index:10;} .sub .header_mo, .poptype .header_mo {display:block;} .sub .header_mo .btn_winclose {display:none;} .pop .header_mo .btn_back {display:none;} .sub .header_mo .btn_back {display:block;} .sub .visual, .pop .visual {height:auto !important;background:none !important;} .sub .visual .bgimg, .pop .visual .bgimg {display:none;} .sub .visual .visual_image, .pop .visual .visual_image {min-height:auto !important;padding:0 !important;} .sub .visual .visual_image h2 span, .pop .visual .visual_image h2 span {display:none;} .sub .visual .visual_image h2 {display:block;text-align:center !important;line-height:3.5rem;font-size:.95rem !important;color:#555 !important;letter-spacing:0 !important;} .pop.cardetail .visual.sub1 .visual_image h2 {display:block;line-height:3.5rem;} } /* 네이게이션 */ .navigation {position:relative; margin:0 auto;} .navigation ul { display:block; width:100%; text-align:right;} .navigation ul li {display:inline-block;vertical-align:top; font-size:0.85rem; color:#888; padding-left:18px; line-height:20px; height:20px; margin-left:8px; background:url('/images/inc/ico_arrow.png') no-repeat left ; } .navigation ul li:first-child {background:url('/images/inc/ico_home.png') no-repeat center 1px ; background-size:auto 16px; width:20px; height:20px; padding:0; text-indent:-9999px;font-size:0; overflow:hidden; } .navigation ul li:last-child {color:var(--txt-default); font-weight:500;} @media all and (max-width:1024px) { .navigation {display:none;} } span.note {display:inline-block; font-size:0.9rem; color:#555; padding:0 5px;} p.note {display:block; font-size:0.9rem; color:#777; padding:7px 0;} /************************************************************* 차량검색 *************************************************************/ /* 좌측 검색 */ .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(--txt-default);font-size:1.1rem; margin-top:1rem;} .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.col3 {background-color:#f4f6fa; border-radius:6px; overflow:hidden;} .car_left .square.col3 input[type=radio] + label {width:33.333% !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(--txt-default);} .car_left select {border:1px solid #dedede; background-color:#fff;} .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;*/ color:#fff;} .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_left .search_title {display:block;} .car_wrap .cate_wrap, .car_wrap .car_left .button_group_wrap, .car_left .search_title {display:block;} } .car_right {float:right;width:calc(100% - 16rem);padding-left:2.5rem;-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:url('/images/ico_search_mobile.png') no-repeat 40% center; text-indent:2rem; background-size:auto 1.85rem; height:3.25rem; line-height:3.25rem; background-color:#f5f7fb; /*border:1px solid #e5eaf4;*/font-size:1rem;color:var(--txt-default);font-weight:bold;} .car_wrap.full .cate_wrap button:hover {border-color:#555;} .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 {border-top:1px solid #555;} .optionWrap > li {border-top:1px solid #e5e5e5;} .optionWrap > li > p {position:relative;display:block;margin:0;padding:0 .625rem;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:#f0f3f6;} .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.5rem;} .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(--txt-default); border-color:var(--txt-default); 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; border-radius:7px;} .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:.7rem;} .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 0;font-style:normal;color:#111;letter-spacing:-1px;font-size:.9rem;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:#aaa;font-style:normal;font-size:.75rem;} .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=3") 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 .depth4, .optionWrap > li .selected-item.depth4 {height: 1.9rem !important} .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 .option input[type=checkbox] + label {line-height:1.8rem; } .optionWrap > li.notoggle > p:after {display:none;} .optionWrap > li.notoggle .searchbox input {display:inline-block;width:calc(100% - 65px); color:#333; font-size:0.875rem; height:2.8rem; 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; } .car_wrap.full .car_left {display: none; position: fixed; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 3333; background-color: rgba(0,0,0,0.3);} .car_wrap.full .car_left .filter {position: absolute; left: 0; bottom: 0; width: 100%; height: 97%; background: #fff; padding: 15px 12px 100px; overflow-y: auto; overflow-x: hidden; border-radius: 1.563rem 1.563rem 0 0; border: 1px solid #eee; box-shadow: 5px -5px 10px rgba(0,0,0,0.1);} } /* 차량리스트 */ .carList-Wrap {margin:0 auto;position:relative;font-size:0;} .page-sangsa .car-right { display:block; width:100%;} /* 정렬 */ .sortbox {position:relative;min-height:2.8rem;padding:0 0 1rem;} .sortbox span {display:block;line-height:3rem;color:#555;font-size:1rem;} .sortbox span strong {padding:0 .3rem;font-size:1.5rem;font-weight:bold;} .sortbox button {height:2.8rem;padding:0 1rem; border:1px solid #ddd; font-size:0.85rem;font-weight:500; color:#333;border-radius:.3rem;margin-left:.2rem; } .sortbox button.trans_hot { color:#f00; border-color:#f00} .sortbox button.apply_mg { color:var(--txt-default); border-color:var(--txt-default)} .sortbox .compare {border:0; color:#fff; margin-left:.65rem; background:url('/images/sub/ico_vs_w.png') no-repeat 1rem center #2a3446;text-indent:1.5rem; background-size:auto 1rem;} .sortbox .right {position:absolute;right:0;top:0;} .sortbox .right > * {padding-left:.4rem;} .sortbox .right select {height:2rem;border:0;font-size:.9rem;color:#888;text-align:right;} .sortbox .list_type {display:inline-block;vertical-align:top;font-size:0;} .sortbox .list_type span {position:relative;display:inline-block;vertical-align:middle; width:2.8rem;height:2.8rem;margin-left:-1px;border:1px solid #f0f3f6;background-color:#f0f3f6;background-repeat:no-repeat;background-size:auto 50%;background-position:center;font-size:0;z-index:1;cursor:pointer;} .sortbox .list_type span.on {box-shadow:2px 2px 5px rgba(0,0,0,0.1);border:1px solid #aaa;border-radius:.2rem;background-color:#fff;z-index:2;} .sortbox .list_type span.gallery {background-image:url('/images/sub/icon_list.png');} .sortbox .list_type span.gallery.on {background-image:url('/images/sub/icon_list_on.png');} .sortbox .list_type span.list {background-image:url('/images/sub/icon_gallery.png');} .sortbox .list_type span.list.on {background-image:url('/images/sub/icon_gallery_on.png');} .sortbox .reset:before {content:"\e973"; font-family:'xeicon'; display:inline-block; vertical-align:middle; font-size:1rem;margin-right:.2rem;} .sortbox .modify:before {content:"\e9c4"; font-family:'xeicon'; display:inline-block; vertical-align:middle; font-size:1rem;margin-right:.2rem;} .sortbox.bbs {display:flex; justify-content: space-between; margin-top:2rem;} .sortbox .right.mypage {display:flex; width:80%;align-items: center; justify-content: flex-end; gap:.5rem} .sortbox .btn_area {display:inline-block;} .note_list {display:block; padding:1.5rem 0; } .note_list li {position:relative; padding-left:.8rem; font-size:.85rem; color:#555; line-height:1.3em; margin-bottom:.2rem; } .note_list li:before {content:''; width:2px; height:2px; background-color:#888; position:absolute; left:3px; top:7px; } /* QR코드 */ .qr_wrap {display:flex; justify-content: space-between; align-items: center; padding:2rem; } .qr_wrap .img { text-align:center; width:50%;} .qr_wrap .img img {width:90%;} .qr_wrap dl { text-align:center; width:50%;} .qr_wrap dl dt span{display:inline-block; border:1px solid #999; border-radius:var(--radius-default);height:3.65rem; line-height:3.45rem; padding:0 3rem; font-size:1.8rem; font-weight:700; color:#333; box-shadow:3px 3px 5px rgba(0,0,0,0.1)} .qr_wrap dl dd {padding-top:1rem; font-size:1.1rem; line-height:1.5em; color:#333;} /* 정렬 버튼 마이페이지*/ .mypage .sortbox {display:flex; justify-content: space-between; align-items: center; } .mypage .sortbox .count {margin-right:.5rem;} .mypage .sortbox div.column {width:auto; padding:0; margin:0;display:flex; align-items: center; } .mypage .sortbox .right {position:relative; width:auto; text-align:right;} @media screen and ( max-width:800px ) { .sortbox {padding:0 1rem;margin:0 -1rem; position:relative;} .sortbox > span {border-bottom:1px solid #eee;} .sortbox > span strong {padding:0 .1rem;font-size:1.1rem;} .sortbox .right {position:static;} .sortbox .right.mypage {position:static; width:100%; display:block;} .sortbox .right select {width:50% !important;height:3rem;font-size:.8rem;text-indent:0;text-align:left;} .sortbox .list_type {position:absolute;right:1rem;top:0;} .sortbox .list_type span {width:2.5rem;height:2.5rem;} .sortbox .compare {display:none;} .sortbox .btn_area {position:absolute; display:block; width:100%; text-align:right; top:0px; right:0} .sortbox .btn_area button {border:0} .sortbox button {height:2.1rem;padding:0 .4rem; } .mypage .sortbox {flex-direction: column;} .mypage .sortbox div.column {width:100%;} .sortbox .reset:before, .sortbox .modify:before{display:none;} } /* 차량리스트 일반형 */ .car_list { position:relative; display:flex; flex-wrap:wrap; margin-top:0;border-top:1px solid #555;font-size:0;} .car_list > li a {display:block; width:100%; height:100%;} .car_list > li {display:block; position:relative;height:auto;border-bottom:1px solid #eaeaea;font-size:0; width:100%;} .car_list > li:hover {background-color:#f2f7fb;} .car_list > li .check-area {position:absolute;right:.5rem; top:.5rem; margin-top:0px; width:18px; height:18px; z-index:1} .car_list > li .img-wrap {position:relative;display:inline-block; width:7rem; height:5rem;border-radius:.3rem;background-image:url('/images/nophoto.png?ver=1');background-size:cover; background-repeat:no-repeat ; background-position:center center;vertical-align:middle;} .car_list > 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;} .car_list .car-info {position:relative;display:inline-block;vertical-align:middle;width:calc(100% - 7rem);padding:2rem 1.5rem 1.8rem; font-size:0;} .car_list .button {padding:0 2.5rem;} .car_list .car-info .infoBox {width:calc(100% - 16rem);} .car_list .car-info .infoBox .title {display:block;font-weight:bold;font-size:1.1rem;word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;overflow:hidden;} .car_list .car-info .infoBox .car-hash {max-height:1.8rem;padding:.25rem 0;font-size:0.85rem;color:var(--txt-default);overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;} .car_list .car-info .infoBox2 {width:calc(100% - 14rem);} .car_list .car-info .infoBox2 .title {display:block;font-weight:bold;font-size:1.1rem;word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;overflow:hidden;} .car_list .car-info .infoBox2 .car-hash {max-height:1.8rem;padding:.25rem 0;font-size:0.85rem;color:var(--txt-default);overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;} .car_list .car-info .car-desc {display:inline-block;margin-top:0.5rem;vertical-align:middle;} .car_list .car-info .car-desc span {display:inline-block; vertical-align:middle;font-size:0.9rem; color:#666; padding-right:10px;} .car_list .car-info .car-desc span:after {content:''; display:inline-block; vertical-align:middle; margin-left:10px; width:2px; height:2px; border-radius:5px; background-color:#c3c7d3;} .car_list .car-info .car-desc span:last-of-type::after {display:none;} .car_list .car-info .car-desc span:last-child:after { display:none !important; } .car_list .car-info .car-desc .dealer {position:relative;background-color:transparent;color:#111;font-weight:bold;font-size:.9rem;} .car_list .car-info .car-desc .dealer:after {content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#555;} .car_list .car-info .car-desc .dealer:hover {color:var(--txt-default);} .car_list .car-info .car-desc .dealer:hover::after {background:var(--txt-default);} .car_list .car-info .car-desc br {display:none;} .car_list .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; } .car_list .auc-info .price {position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1rem; color:#111;} .car_list .auc-info .price em {padding-right:10px;font-size:.9rem;} .car_list .auc-info .price strong{font-size:1.8rem; font-weight:bold;letter-spacing:0;} .car_list .auc-info .cn-manage {display:block; font-size:0.8rem; padding-top:0.65rem; } .car_list .auc-info .cn-manage .car-state {display:block; } .car_list .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; } .car_list .auc-info .cn-manage p.carN {display:block;font-size:0.75rem; padding-top:0.25rem;} .car_list .auc-info .car-date {display:block; font-size:0.9rem; color:#555; margin-bottom:0.65rem} .car_list .car-select {position:absolute;right:2rem;top:.1rem;} .car_list .car-select button {display:inline-block; width:2rem; height:2rem;background-color:transparent;text-align:center;font-size:0;opacity:.45; background-position:center center; background-repeat:no-repeat;background-size:1.1rem auto; } .car_list .car-select button:hover {opacity:1;} .car_list .car-select button.wish { background-image:url('/images/sub/ico_wish_off.png'); } .car_list .car-select button.wish.on {background-image:url('/images/sub/ico_wish_on.png');} .car_list .car-select button.vs { background-image:url('/images/sub/ico_vs_off.png'); } .car_list .car-select button.vs.on {background-image:url('/images/sub/ico_vs_on.png');border-color:#fff;} .car_list .car-select button.on {opacity:1;border-color:var(--txt-default);} .car_list .car-info button.carcheck {position:absolute;right:9rem;top:50%;height:2.5rem;padding:0 1rem;font-weight:bold;font-size:.9rem;background-color:var(--txt-default);color:#fff;transform:translateY(-50%);vertical-align:middle;} .car_list .car-badge {display:inline-block;margin-top:0.5rem;vertical-align:middle;} .car_list .car-badge span {line-height:1.7rem;} .car_list > li .button.text {height:1.5rem;margin:0.5rem 0 0 1rem;font-weight:bold;font-size:.9rem;} /* 관리자화면 */ .car_list .car-info .manage_status {position:absolute; bottom:.75rem; right:0rem; display:flex; justify-content: flex-end; gap:.35rem;} .car_list .car-info .manage_status button {height:2.0rem; line-height:2.0rem; border-radius:var(--radius-round); padding:0 1.2rem; font-size:.85rem; color:#333; border:1px solid #eaeaea; background-color:#f8f8f8; font-weight:500; } .mypage .car_list .auc-info .price { top:45%;} .mypage .car_list .car-info {padding: 1rem 1.5rem} .mypage .car_list .car-info button.carcheck { top:45%;} .mypage .car_list .car-info .views {display:block; font-size:.9rem; font-weight:500; color:#999; margin-top:.1rem; } @media all and (max-width:1024px) { .mypage .car_list .car-info .views {display:none;} } @media all and (max-width:700px) { .car_list {margin:0 -1.5rem;border-top:.7rem solid #f1f1f1;} .car_list > li {border-bottom:.7rem solid #f1f1f1;} .car_list > li .check-area, .car_list .car-info .car-desc span:after {display:none;} .car_list > li a {padding:0 1rem; padding-left:0;overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .car_list .car-info {padding:1rem .5rem 1rem 1rem;} .car_list .car-info .infoBox {width:100%;} .car_list .car-info .infoBox2 {width:100%;} .car_list .car-info .car-desc span {font-size:.8rem;} .car_list .car-select {right:4.65rem;top:auto;bottom:1rem;} .car_list .car-select button.vs {display:none;} .car_list .car-info button.carcheck {right:0.25rem;bottom:1rem;height:2rem;top:auto;padding:0 .5rem;transform:none;} .car_list .auc-info .price {position:static;transform:none;padding-top:1rem;} .car_list .auc-info .price strong {font-size:1.4rem;} .mypage .car_list .car-info .manage_status {position:relative; bottom:-.3rem; } .mypage .car_list .car-info button.carcheck {right:0.25rem;bottom:3rem;height:2rem;top:auto;padding:0 .5rem;transform:none;} .mypage .car_list .car-select {bottom:3rem;} } /* 차량리스트 갤러리형 */ .car_list.gallery {border:0;} .car_list.gallery > li { display:inline-block;vertical-align:top; position:relative;width:calc(33.3% - .8rem);margin:0 1rem 2rem 0;border:1px solid #eee;border-radius:.5rem;overflow:hidden; } .car_list.gallery > li:nth-child(3n) {margin-right:0} .car_list.gallery > li:hover {background-color:#fff; box-shadow:0 0 0.65rem rgba(0,0,0,.1); } .car_list.gallery > li .img-wrap { width:100%; height:12rem;border-radius:0.3rem 0.3rem 0 0;} .car_list.gallery .car-info {position:static;width:100%;background:#fff; } .car_list.gallery .car-info .infoBox {width:100%;} .car_list.gallery .car-info .infoBox .title { white-space:normal;} .car_list.gallery .car-info .infoBox .car-hash {font-size:.8rem; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .car_list.gallery .car-badge {position:absolute;top:0;left:.5rem;} .car_list.gallery .car-badge span {border:0;line-height:2rem;} .car_list.gallery .car-badge span.color-red {background-color:rgba(245,57,48,.85);color:#fff;} .car_list.gallery .car-badge span.color-green {background-color:rgba(24,36,57,.85);color:#fff;} .car_list.gallery .car-badge span.color-blue {background-color:rgba(24,36,57,.85);color:#fff;} .car_list.gallery .car-info .car-desc {display: block;min-height:3rem;margin-top:.5rem;padding-top:.5rem;line-height: 1.5;border-top:1px solid #f1f1f1;} .car_list.gallery .car-info .car-desc span.week {display:none;} .car_list.gallery .auc-info {position:static;top:auto;width:100%;} .car_list.gallery .auc-info .price {position:static;text-align: right;transform:none;} .car_list.gallery .car-info button.carcheck {top:auto;right:unset;bottom:0.3rem;} .car_list.gallery .car-select {position:static;text-align:right;} .car_list.gallery .car-select button {width:2.5rem;height:2.5rem;background-size:1.415rem auto; margin-top:0.5rem; } @media all and (max-width:1200px) { .car_list.gallery > li {width:calc(50% - .8rem);} .car_list.gallery > li:nth-child(3n) {margin-right:1rem;} .car_list.gallery > li:nth-child(2n) {margin-right:0} } @media all and (max-width:1024px) { .car_list.gallery > li {width:100%;margin:0 0 1.5rem !important;border:0;border-bottom:0rem solid #eee; border-radius:0} .car_list.gallery > li:hover {box-shadow:none;} .car_list.gallery > li .img-wrap {display:block;width:auto;border-radius:0;} .car_list.gallery > li a {padding:0;} .car_list.gallery .car-info .infoBox .title {height:auto;} .car_list.gallery .car-info .car-desc {min-height:auto;} .car_list.gallery .car-info button.carcheck {bottom:1rem;padding:0 1.5rem;} .car_list.gallery .auc-info .price strong {font-size:2rem;} .car_list.gallery .car-select button {z-index:330} } /*=============================================================================================================== 차량상세 ================================================================================================================*/ /* sns 버튼 */ .sns_wrap {padding:.7rem 0;position:relative;background:#f9f9f9;z-index:1;text-align:right;} .sns_wrap button:first-child {margin-left:0} .sns_wrap button {display:inline-block;margin-left:1.5rem;padding-left:1.5rem;background-size:auto 1rem;background-position:left center;background-repeat:no-repeat;font-size:0.8rem;text-align:center;} .sns_wrap button.vs { background-image:url('/images/sub/ico_vs_off.png'); } .sns_wrap button.vs.on {background-image:url('/images/sub/ico_vs_on.png'); } .sns_wrap button.print { background-image:url('/images/sub/ico_print_off.png'); } .sns_wrap button.singo { background-image:url('/images/sub/ico_singo.png'); } .sns_wrap button.btn_sns { background-image:url('/images/sub/ico_sns.png'); } .sns_wrap button.print.on {background-image:url('/images/sub/ico_print_on.png'); } .sns_wrap button.link {background-image:url('/images/sub/ico_link.png'); } @media screen and ( max-width:900px ) { .sns_wrap {display:none;} } /* 차량상세 */ .slideWrap {} .cardetail .row {padding:4rem 0;} .cardetail .visual.sub1 {animation:none;} .cardetail h3 {padding-bottom:1rem;border-bottom:1px solid #555;font-weight:bold;color:#323232;font-family:'Pretendard';text-align:left;} .cardetail h3.no_line {border:0} .cardetail .sub_nav li a {border-top:0;} .cardetail h4 {padding-top:0;} .cardetail .btn-consult {height:3.5rem;} .cardetail_name button.wish {width:3.2rem;background-color:transparent;background-image:url('/images/sub/ico_wish_off.png');background-size:auto 50%;opacity:.5;} .cardetail_name button.wish:hover {background-color:transparent;opacity:1;} .cardetail_name button.wish.on {background-image:url('/images/sub/ico_wish_on.png');opacity:1;} .cardetail_name button.btn_sns {width:3.2rem;background-color:transparent;background-image:url('/images/sub/ico_sns.png');background-size:auto 50%;opacity:.5;} @media screen and ( max-width:900px ) { .cardetail h3 {padding-bottom:1rem;font-size:1.3rem;} .cardetail .cardetail_info {padding:2rem 0;} } @media screen and ( max-width:700px ) { .cardetail .sub_nev_wrap {display:none;} } .dt-title {display:block;padding-bottom:2rem;text-align:center;} .dt-title h4 {font-size:2.2rem;line-height:1.3;font-weight:100;} .dt-title h4 .thin {font-weight:300;} .dt-title h4 strong{color:red;font-size:inherit;font-family:inherit;} .dt-title p.desc {font-size:1.1rem;line-height:1.5;color:#999;word-break:keep-all;} .dt-title p.desc strong{font-weight:500;color:#000;font-size:inherit;} @media screen and ( max-width:1200px ) { .dt-title h4 {font-size:2rem;} } @media screen and ( max-width:900px ) { .dt-title p.desc {font-size:.9rem;} } @media screen and ( max-width:700px ) { .dt-title h4 {padding-top:1rem;font-size:1.3rem;font-weight:500;} } .carphoto_big {padding:0 !important;background:#2a3136;overflow:hidden;} .carphoto_big .btns .button {background-color:rgba(0,0,0,.4);border-radius:.3rem;font-size:.9rem;} .carphoto_big .swipe-detail-wrap {vertical-align:top;} @media screen and (max-width:1200px){ .carphoto_big .swipe-detail-wrap {display:block;width:auto;padding:0;margin:0 -1.5rem;} } /* 차량상세 슬라이더 */ .swipe-detail-wrap .icon {display:inline-block;vertical-align:middle;-webkit-box-flex:0;-webkit-flex:none;-moz-box-flex:0;-ms-flex:none;flex:none;} .swipe-detail-wrap .icon.swiper-prev, .icon.swiper-next {width:100%;height:2.5rem;background-repeat:no-repeat;background-position:center center;-webkit-background-size:auto auto;-moz-background-size:auto;background-size:auto;} .swipe-detail-wrap .icon.swiper-prev {background-image:url('/images/sub/slide_prev.png');} .swipe-detail-wrap .icon.swiper-next {background-image:url('/images/sub/slide_next.png');} .swipe-detail-wrap {position:relative;} .swipe-detail-wrap .btns {position:absolute;left:0;bottom:0;z-index:2;} .swipe-detail-wrap .btns .left {position:absolute;left:0;top:1.5rem;} .swipe-detail-wrap .btns .left span.label {position:relative;border:0;padding:2rem 1.5rem 0;background-repeat:no-repeat;background-size:auto 45%;background-position:center 0;background-image:url('/images/sub/icon_calender.png');font-weight:bold;font-size:1.05rem;color:#333;} .swipe-detail-wrap .btns .left span.label:after {content:'';position:absolute;right:0;top:20%;height:50%;width:1px;background:#ddd;} .swipe-detail-wrap .btns .left span.label.km {background-image:url('/images/sub/icon_km.png');} .swipe-detail-wrap .btns .left span.label.km:after {display:none;} .swipe-detail-wrap .btns .button {padding:0 2.5rem;} .swipe-detail-wrap .btns > .button {height:3.7rem;border:1px solid #eee;border-radius:10rem;background:#fff;color:#2f2f2f;font-size:1rem;font-weight:bold;text-align:center;} .swipe-detail-wrap .btns > .button span {display:inline-block;width:4rem;height:2rem;background-repeat:no-repeat;background-position:center;background-size:auto 1.7rem;vertical-align:middle;font-size:0;} .swipe-detail-wrap .btns > .button.encar span {background-image:url('/images/sub/btn_icon_encar.png');} .swipe-detail-wrap .btns > .button.kbchachacha span {width:5rem;background-image:url('/images/sub/btn_icon_chachacha.png');} .swipe-detail-wrap .btns .button:hover {border-color:#555;} .swipe-detail-wrap .btns .btn_zoom { position:absolute; left:0; bottom:0; z-index:333; width:3.7rem;height:3.7rem;padding:0 !important; border-radius:0;background-image:url('/images/sub/ico-zoom.png');border-color:transparent;background-color:rgba(0,0,0,.3); background-position:center;background-repeat:no-repeat;background-size:auto 1.5rem;font-size:0 !important; display:none; } .swipe-detail-wrap .btns .btn_zoom.zoomout {left:1rem;bottom:1rem; border-radius:50%;background-image:url('/images/sub/ico-zoom-out.png');border-color:rgba(255,255,255,.3);} .swipe-detail-wrap .btns .repair {flex:1;height:3.7rem;border:1px solid #fff;border-radius:10rem;margin-right:.2rem;background:#fff;color:#111;font-weight:bold;font-size:1rem;text-align:center;opacity:.4;} .swipe-detail-wrap .btns .repair.on {opacity:1;border:1px solid rgb(245, 25, 46, .5);box-shadow:0 0 1rem rgba(0,0,0,.03);} .swipe-detail-wrap .btns .repair span {display:inline-block;width:2.5rem;height:2.5rem;background-image:url('/images/sub/icon_repair.png');background-repeat:no-repeat;background-position:center;background-size:auto 2rem;vertical-align:middle;} .swipe-detail-wrap .btns .repair.on span {background-image:url('/images/sub/icon_repair_on.png');} @media screen and (max-width:1000px){ .swipe-detail-wrap .btns {text-align:center;} .swipe-detail-wrap .btns .left {position:static;padding-top:1rem;text-align:center;} } @media screen and (max-width:700px){ .swipe-detail-wrap .btns .button {height:3.2rem;padding:0;padding:0 1rem !important;border-radius:0 !important;font-size:.85rem;} .swipe-detail-wrap .btns .button span {width:2.8rem;background-size:auto 1.3rem;} .swipe-detail-wrap .btns .button.kbchachacha span {width:3.2rem;} .swipe-detail-wrap .btns .btn_zoom {width:3.2rem; display:none;} .swipe-detail-wrap .btns .left {padding-top:.5rem;} .swipe-detail-wrap .btns .repair {width:90%;} } @media screen and (max-width:500px){ .swipe-detail-wrap .btns .left span.label {width:47%;margin-top:1rem;padding-top:1.5rem;font-size:.85rem;} .car_wrap.full .cate_wrap button {background:url('/images/ico_search_mobile.png') no-repeat 30% center; background-size:auto 1.85rem;} } .swipe-detail-wrap .car-details {position:relative;font-size:0;background:#171a1d; } .swipe-detail-wrap .car-details > .detail-slide-gallery-top {display:inline-block;width:85%;vertical-align:top; } .swipe-detail-wrap .car-details > .detail-slide-gallery-thumbs {display:inline-block;width:15%; padding-left:1px;vertical-align:top;} /*.swipe-detail-wrap .car-details > .detail-slide-gallery-thumbs .swiper-wrapper {background:url('/images/nophoto.png');background-size:25% 20%;}*/ .swipe-detail-wrap .detail-slide-gallery-top {background-size:100%; background-repeat:no-repeat; background-position:center 0; border:0px solid #f00; background-image:url('/images/noimg_txt.png?ver=6') } .swipe-detail-wrap .detail-slide-gallery-top:after {content:'';position:absolute;left:.5rem;bottom:.5rem;z-index:2;} .swipe-detail-wrap .detail-slide-gallery-top .swiper-slide .img {display:block; background-repeat:no-repeat;background-size: contain; background-position:center 0 !important;} .swipe-detail-wrap .detail-slide-gallery-top .swiper-slide .img img {width:100%;} .swipe-detail-wrap .detail-slide-gallery-thumbs {margin-top:1px;overflow:hidden;} .swipe-detail-wrap .detail-slide-gallery-thumbs > .swiper-wrapper {transform:none !important;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-slide {cursor:pointer;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-slide:after {transition:all 0.2s ease-in;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-slide.swiper-slide-thumb-active:after {content:''; position:absolute; left:0;top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7);background-image:url('/images/sub/icon_check_w.png'); background-repeat:no-repeat; background-position:center center ; background-size:auto 40%; z-index:5; } .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-slide .img {height:100%;font-size:0;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-slide .img img{width:100%;height:100%; } .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-wrapper {display:block;font-size:0;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-wrapper .swiper-slide {display:inline-block;width:calc(50% - 1px) !important; border:0px solid #f00; height:65px; margin-right:1px;margin-bottom:1px;font-size:0;transform:none !important;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-wrapper .swiper-slide .img {font-size:0;} @media screen and (max-width:1300px){ .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-wrapper .swiper-slide { height:auto ;} .swipe-detail-wrap .detail-slide-gallery-top .swiper-slide .img { } } @media screen and (max-width:800px){ .swipe-detail-wrap .car-details {flex-direction: column;} .swipe-detail-wrap .car-details > .detail-slide-gallery-top {display:block;width:100%} .swipe-detail-wrap .car-details > .detail-slide-gallery-thumbs {width:100%;padding-top:1px 0 0;} .swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-wrapper .swiper-slide {width:calc(10% - 1px) !important;} } .swipe-detail-wrap .zoom-swiper-button-prev, .swipe-detail-wrap .zoom-swiper-button-next {position:absolute;top:0;left:0;bottom:0;width:3.5rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:5;cursor:pointer;opacity:.5;} .swipe-detail-wrap .zoom-swiper-button-prev.swiper-button-disabled, .swipe-detail-wrap .zoom-swiper-button-next.swiper-button-disabled {opacity:.1 !important;} .swipe-detail-wrap .zoom-swiper-button-prev:hover, .swipe-detail-wrap .zoom-swiper-button-next:hover {opacity:1;} .swipe-detail-wrap .zoom-swiper-button-next {right:0;left:auto;} .swipe-detail-wrap .swiper-scrollbar {bottom:10px;left:0;width:100%;height:10px; display:none;} .swipe-detail-wrap .swiper-pagination-wrap {display:none;} .swipe-detail-wrap .swiper-pagination {position:static;width:5rem;border-radius:.3rem;line-height:3.2rem;background-color:rgba(0,0,0,0.2);color:#eee;} .swipe-detail-wrap .swiper-pagination * {color:#fff;} /* zoom-mode */ .swipe-detail-wrap.zoomMode {position:fixed;top:0px;left:0;right:0;bottom:0;width:100%;padding:0;margin:0;z-index:999;overflow-y:auto;-ms-overflow-y:auto;background-color:#171a1d;} .swipe-detail-wrap.zoomMode .detail-slide-gallery-top:after {background:url('/images/sub/ico-zoom-out.png') center no-repeat;} .swipe-detail-wrap.zoomMode .car-details > .detail-slide-gallery-top {width:85%;} .swipe-detail-wrap.zoomMode .car-details > .detail-slide-gallery-thumbs {width:15%;} .swipe-detail-wrap.zoomMode .detail-slide-gallery-thumbs .swiper-wrapper .swiper-slide {width:calc(50% - 1px) !important;} .swipe-detail-wrap.zoomMode .btns {position:static;text-align:center;} .swipe-detail-wrap.zoomMode .btns .button, .swipe-detail-wrap.zoomMode .btns .left {display:none;} .swipe-detail-wrap.zoomMode .btns .button.btn_zoom {display:inline-block;} @media screen and (max-width:800px){ .swipe-detail-wrap.zoomMode {padding:0;} .swipe-detail-wrap.zoomMode .car-details > .detail-slide-gallery-top {display:inline-block;} .swipe-detail-wrap.zoomMode .car-details > .detail-slide-gallery-thumbs {display:inline-block;} } /* 정보 스타일 */ .ul_style {font-size:0;} .ul_style li {display:block; margin-bottom:1rem; font-size:0; text-align:left; } .ul_style li span {display:inline-block; vertical-align:top; font-size:1.05rem;font-weight:bold;color:#555;} .ul_style li span:first-child {width:40%; margin-right:1rem; position:relative; } .ul_style li span:first-child:after {content:''; position:absolute; left:0; top:12px; width:100%; height:1px; border-bottom:1px dashed #ccc; z-index:0;} .ul_style li span:first-child em {position:relative;padding-right:1rem; background-color:#fff;color:#888; font-size:1.1rem;z-index:1;} .ul_style li .impact {color:red;} @media screen and (max-width:900px){ .ul_style li span {font-size:.95rem;} .ul_style li span:first-child em {font-size:.85rem;} } /* 차랑정보 */ .cardetail_name {clear:both;position:relative;padding:0 !important;} .cardetail_name .infoBox {position:relative;padding:3.5rem 0 2.5rem;/*border-bottom:1px solid #555;*/} .cardetail_name .infoBox .button.btn_cal {height:2rem;padding:0 0 0 1.5rem !important;background:url('/images/sub/icon_cal.png') 0 center no-repeat transparent;background-size:auto 1rem;font-size:.95rem;color:#8a8a8a;text-decoration:underline;} .cardetail_name .cartitle {display:inline-block;max-width:calc(100% - 27rem);padding-right:.5rem;font-weight:bold;font-size:2rem;letter-spacing:-1.5px;word-break:keep-all;line-height:1.3;vertical-align:middle;} .cardetail_name .car-hash {padding-bottom:.3rem;font-size:.95rem;color:var(--txt-default);} .cardetail_name .car-badge {display:inline-block;padding:.5rem 0;vertical-align:middle;} .cardetail_name .car-badge span {height:1.5rem; line-height:1.5rem;} .cardetail_name .car-badge span.color-red {border:1px dashed rgba(245,57,48,.85);background-color:transparent;color:rgba(245,57,48,1);} .cardetail_name .car-badge span.color-green, .cardetail_name .car-badge span.color-blue {border:1px dashed rgba(24,36,57,.85);background-color:transparent;color:rgba(24,36,57,1);} .cardetail_name .price {position:absolute;right:0;bottom:2rem;padding-top:1.5rem;text-align:right;} .cardetail_name .price .sale-price {display:inline-block;padding-right:1rem;font-weight:bold;color:#00aaf4;font-size:1.3rem;vertical-align:middle;} .cardetail_name .price .sale-price em {padding:0 .1rem 0 1rem;font-size:2.4rem;font-weight:bold;} .cardetail_name .price .button {display:inline-block;height:2.2rem;padding:0 1rem;border-color:#ccc;margin-top:0.3rem; font-weight:500;font-size:.85rem;} .cardetail_name .price .month-price {font-size:.95rem;} .cardetail_name .price .month-price i {display:inline-block;border:1px dotted #aaa;border-radius:.3rem;padding:.2rem .5rem;background-color:#fff;font-size:.8rem;vertical-align:middle;} .cardetail_name .price .month-price b {padding-left:.3rem;font-size:1.1rem;} .cardetail_name .price .btn_ins { background-color:#fff; color:var(--txt-default); border:1px solid var(--txt-default)} .cardetail_name .usedcar-icon > span {line-height:1.8rem;} .cardetail_name .usedcar-opt {padding-top:.5rem;} .cardetail_name .usedcar-opt span {position:relative;padding:0 1rem;font-size:.95rem;} .cardetail_name .usedcar-opt span:after {content:'';position:absolute;right:0;top:50%;width:3px;height:3px;border-radius:50%;background:#ccc;} .cardetail_name .usedcar-opt span:last-of-type::after {display:none;} .cardetail_name .car-icon {top:100%;left:0;right:auto;} .cardetail_name .car-icon .label {width:4rem;height:6rem;} @media screen and (max-width:1000px){ .cardetail_name .infoBox {padding:4rem 0 2rem;text-align:center;} .cardetail_name .cartitle {max-width:calc(100% - 22rem);font-size:1.5rem;} .cardetail_name .price {position:static;} .cardetail_name .price .sale-price {margin-right:0;} .cardetail_name .price .sale-price em {font-size:2rem;} .cardetail_name .car-icon {left:0;} .cardetail_name .car-icon .label {width:2rem;height:3.5rem;} } @media screen and (max-width:900px){ .cardetail_name .price .button {padding:0 .5rem;} .cardetail_name button.wish {position:absolute;left:-.5rem;bottom:1rem;z-index:10;} .cardetail_name button.btn_sns {position:absolute;left:-.5rem;top:-3rem;opacity:.7;z-index:10;} } @media screen and (max-width:700px){ .cardetail_name .column {padding:0 .5rem} .cardetail_name .infoBox {padding:1.5rem 0;} .cardetail_name .cartitle {max-width:100%;font-size:1.3rem;} .cardetail_name .usedcar-icon {padding-top:.5rem;} .cardetail_name .price {position:static;padding-top:1rem;} .cardetail_name .price .sale-price em {font-size:1.7rem;} .cardetail_name .usedcar-opt span {padding:0 .5rem;} } .cardetail_info h3 {border:0;padding-bottom:2rem;font-size:1.25rem;} .cardetail_info .box_wrap {vertical-align:top;font-size:0;} .cardetail_info .box {position:relative;display:inline-block;width:30%;min-height:20.5rem;vertical-align:top;word-break:keep-all;} .cardetail_info .box.btnbox {padding:2rem 2.5rem;background:#f6f8fa;margin-right:5%;} .cardetail_info .box + .box + .box {width:33.5%;margin-right:0;padding:0;} .cardetail_info .box p {padding-bottom:1rem;font-size:1rem;} .cardetail_info .box .button {width:100%;padding:0;margin-bottom:.5rem;} .cardetail_info .box .btns {display:flex;padding-top:2rem;} .cardetail_info .btnbox .box1, .cardetail_info .btnbox .box2 {border-radius:.5rem;} .cardetail_info .btnbox h3 {padding:1rem 0 .5rem;} .cardetail_info .btnbox .box1 {padding-bottom:1rem;border-bottom:1px dashed #ddd;} .cardetail_info .btnbox .box2 h3 {padding-top:2rem;} .cardetail_info .btnbox .button[disabled] {opacity:.3;} .cardetail_info .box + .box p {font-size:.9rem;letter-spacing:-1px;} .cardetail_info .seller {position:relative;padding-left:5rem;text-align:left;} .cardetail_info .seller .photo-wrap {position:absolute;left:0;top:0;display:inline-block;width:4rem;height:4rem;border-radius:50%;background-image:url('/images/sub/profile.png');background-color:#f0f3f6;background-size:cover;background-repeat:no-repeat;background-position:center center; } .cardetail_info .seller .mg-name {display:block;padding:.2rem 0 .3rem;font-size:1.1rem;font-weight:bold;} .cardetail_info .seller .mg-name span {display:inline-block;padding-right:.3rem;vertical-align:middle;font-size:.95rem;} .cardetail_info .seller .info {font-size:.9rem;color:#888;} .cardetail_info .hp {padding:.7rem 0 .9rem;font-size:1.6rem;color:#00aaf4;font-weight:bold;text-align:center;} .cardetail_info .hp:before {content:'\e9d3';display:inline-block;font-family:'xeicon'; width:2rem;height:1.7rem; line-height:1.7rem; vertical-align:top;margin-top:.2rem; font-size:1.75rem;background-size:auto 90%;} .cardetail_info .button_group {height:3.5rem;padding:0;} .cardetail_info .button_group .button {margin:0;} .cardetail_info .button_group.fixed .button {position:fixed;left:0;right:0;bottom:0;width:auto;border-radius:0;z-index:100;} .cardetail_info ul {padding:0;} .cardetail_info li {margin-bottom:.5rem;font-size:.9rem;font-weight:bold;} .cardetail_info li span {font-size:.95rem;} .cardetail_info li span:first-child {width:30%;} .cardetail_info li span:first-child em {font-size:.9rem} .cardetail_info .profile {position: relative;height:14rem;border:1px solid #ddd;border-top:2px solid #555;border-radius:1rem;padding:.5rem 1rem;background:url('/images/sub/kucar_logo.png') no-repeat 90% 95%;background-size:auto 2rem;} .cardetail_info .profile img {position:absolute;left:1rem;top:4.5rem;width:4rem;height:5rem;} .cardetail_info .profile .year {border-bottom:1px solid #555;text-align:right;font-weight:bold;font-size:1.5rem;} .cardetail_info .profile .info {padding-left:5.2rem;} .cardetail_info .profile .info b {display:block;padding:.5rem 0 .3rem;text-align:right;font-weight:bold;font-size:1rem;letter-spacing:-.5px;} .cardetail_info .profile .info span {display:inline-block;width:calc(100% - 5.2rem);font-size:1rem;font-weight:bold;letter-spacing:-1px;word-break:break-all;vertical-align:top;} .cardetail_info .profile .info div {padding:.1rem 0;} .cardetail_info .profile .info div span:first-child {width:5rem;font-size:.8rem;color:#555;font-weight:normal;line-height:1.7;} .cardetail_info .profile .btn_seller {width:1.5rem;height:1.5rem;border-radius:50%;margin:0 0 0 .2rem;background-color:#999;color:#fff;font-size:1rem;} .cardetail_info .column .infoBox{width: 94%; height:25px; text-align: right; display:none;} .cardetail_info .column .infoBox 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; height: 100%;} .cardetail_info .infoBox .btn_sns{background-image: url('/images/sub/ico_sns.png');} .cardetail_info button.wish {background-color:transparent;background-image:url('/images/sub/ico_wish_off.png');background-size:auto 50%;opacity:.3;} .cardetail_info button.wish:hover {background-color:transparent;opacity:1;} .cardetail_info button.wish.on {background-image:url('/images/sub/ico_wish_on.png');opacity:1;} .cardetail_info .sangsa_info {display:block; border-top:1px dashed #ddd; padding:.65rem 0; } .cardetail_info .sangsa_info p {font-size:.9rem; font-weight:500; margin:.5rem 0; padding:0} .cardetail_info .sangsa_info p span {display:inline-block; vertical-align:top; line-height:1.3em; color:#666; } .cardetail_info .sangsa_info p span:first-child {width:100px; } .cardetail_info .sangsa_info p span:first-child + span {color:#000; width:calc(100% - 105px;) } /* 팝업의 판매자 정보 */ .seller_info li span {width:calc(70% - 1rem);font-size:1.05rem;} .seller_info li span:first-child {width:30%;} .seller_info li span:first-child em {font-size:.95rem;} @media screen and (max-width:1200px){ .cardetail_info .box {width:100%;margin:0;} .cardetail_info .box .ul_style li {display:inline-block;width:50%;} .cardetail_info .box:nth-of-type(2), .cardetail_info .box:nth-of-type(3) {width:48%;} .cardetail_info .box:nth-of-type(3) {margin-right:0;} } @media screen and (max-width:900px){ .cardetail_info h3 {font-size:1.2rem;} .cardetail_info .box {width:100% !important;min-height:auto;margin:0 0 .5rem !important;padding:2rem 0 1rem;} .cardetail_info .box + .box + .box {padding:3rem 0;} .cardetail_info .box.btnbox {padding:2rem;} .cardetail_info .box .ul_style li {width:100%;} .cardetail_info .seller .photo-wrap {width:3rem;height:3rem;} .cardetail_info .box p {font-size:.9rem;} .cardetail_info .column .infoBox {display:block;} } /* 기본정보 */ .cardetail_basic .ul_style {padding-top:1rem;} .cardetail_basic .ul_style li {display:inline-block;width:33.33%;} @media screen and (max-width:1000px){ .cardetail_basic .ul_style li {width:50%;} .cardetail_basic .ul_style li span:first-child em {font-size:.95rem;} .cardetail_basic .ul_style li span {font-size:1rem;} .cardetail_basic .ul_style li span:first-child {width:34%;} } @media screen and (max-width:700px){ .cardetail_basic .ul_style li {width:100%;margin-bottom:.5rem;} .cardetail_basic .ul_style li span {font-size:1rem;} } .car-option {display:block;padding:3rem 4rem;margin:0 auto;background:#f7f9fb;font-size:0;} .car-option li {display:inline-block;vertical-align:top;width:13.6%;padding:1rem 0;margin:0 .6% .6% 0;border-radius:.5rem;opacity:0.3;text-align:center;} .car-option li:nth-of-type(7n) {margin-right:0;} .car-option li.on {opacity:1;background-color:#fff;border:1px dashed #ccc;} .car-option li p {display:block;clear:both;padding-top:.5rem;font-size:1rem;font-weight:bold;} .car-option li img {height:3rem;} .car-option.col9 li {width:11%;} .car-option.col8 li {width:12.5%;} .car-option.col7 li {width:14.2%;} .car-option.col6 li {width:16.6%;} .car-option.col5 li, .car-option.col4 li, .car-option.col3 li, .car-option.col2 li, .car-option.col1 li {width:15%;} /*.car-option.col0 {display:none;}*/ @media screen and ( max-width:1300px ) { .car-option li {width:19%;margin:0 .8% .8% 0;} .car-option li:nth-of-type(5n) {margin-right:0;} .car-option li:nth-of-type(7n) {margin-right:.8%;} .car-option li img {height:3rem;} } @media screen and ( max-width:1000px ) { .car-option { padding:2rem 1rem;} .car-option li p {font-size:.85rem;} } @media screen and ( max-width:800px ) { .car-option li {width:32.5%;margin:0 .8% .8% 0;padding:1rem 0;} .car-option li:nth-of-type(5n) {margin-right:.8%;} .car-option li:nth-of-type(3n) {margin-right:0;} .car-option li img {height:1.8rem;} } @media screen and ( max-width:700px ) { .car-option li {width:48.5%;margin:0 .8% .8% 0 !important;padding:.7rem 0;} .car-option li:nth-of-type(2n) {margin-right:0 !important;} .car-option li img {height:1.5rem;} } .car-optionlist {font-size:0;} .car-optionlist ul {display:inline-block;width:25%;border-left:1px dashed #eee;font-size:0;vertical-align:top;} .car-optionlist ul:first-child {border:0;} .car-optionlist ul li {padding:.2rem 2rem;font-size:.9rem;} .car-optionlist ul li.title {padding-top:2rem;padding-bottom:1rem;font-size:1.1rem;font-weight:bold;} .car-optionlist ul li i {opacity:.4;letter-spacing:-1px;} .car-optionlist ul li i.active {color:var(--txt-default);font-weight:bold;opacity:1;} @media screen and ( max-width:1000px ) { .car-optionlist ul {width:50%;border:0;padding-left:0;} .car-optionlist ul li {padding:.2rem .5rem;} .car-optionlist ul li {font-size:.85rem;} .car-optionlist ul li i.active {font-weight:bold;} } /* 차량설명 */ .car_explain .context {padding:2rem 0;font-size:1.1rem;color:#777;/*white-space:pre-wrap;*/word-break:break-all;word-wrap:break-word;} @media screen and ( max-width:700px ) { .car_explain .context {padding:0;font-size:.95rem;} } /* 차량비교 */ .compare-wrap {text-align:center; width:100%;} .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:.9rem; 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; position:relative; width:100%;} .compare-wrap .t_normal tbody th, .compare-wrap .t_normal tbody td {padding:8px;margin:0; font-size:.9rem; line-height:1.4em; } .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:1.2rem;padding:0;background:#333;color:#fff;} .compare-wrap .pic p{position:relative;width:8rem;margin:0 auto;height:5rem;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:.9rem;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:.9rem; 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; } } /* 계산기 */ .calc-area {padding:1.5rem 0;} .article-list.default-list {padding-top:.3rem;} .article-list.default-list li {clear:both;overflow:hidden;padding:0rem .5rem;border-bottom:1px solid #eaeaea;} .article-list.default-list li .right {float:right;max-width:calc(100% - 100px);line-height:3rem;font-weight:bold;font-size:1rem; text-align:right;} .article-list.default-list li .right input {margin:0;} .article-list.default-list li .article-name {font-weight:normal;font-size:1rem;line-height:3rem;} .article-list.default-list li .btn_toggle {border:0;} .article-list.default-list li.total {border:0;} .article-list.default-list li.total span {height:auto;font-weight:bold;line-height:3rem;font-size:1.1rem;} .article-list.default-list li.total .right {font-size:1.25rem;color:#ff1c1c;} .article-list.default-list li .slider-area {margin:.5rem .3rem 1.5rem;} .article-list.default-list li input[readonly] {background-color:transparent;border:0;} .article-list.default-list li input {display:inline-block;width:100px;text-align:right;} .article-list.default-list li .article-name .btn-mini {margin-left:7px;} .article-list.default-list li label {display:inline-block;font-size:17px;font-weight:500;} .article-list.default-list li select, .article-list.default-list li input[type=text], .article-list.default-list li input[type=number] {height:2.1rem;margin:0;font-weight:bold;vertical-align:baseline;} .article-list.default-list li select, .article-list.default-list li input, .article-list.default-list li input + label {font-size:1rem;} .article-list.default-list li .btn-toggle {height:3.125rem;line-height:3rem;} .article-list.default-list li button {height:2.1rem;padding:0 1.25rem;line-height:2.1rem;font-size:.95rem; border-radius:.3rem } .article-list.default-list li .t_normal tbody td {padding:4px 10px;font-weight:bold;text-align:right;} .article-list.default-list li .t_normal tbody th {padding-left:1rem; line-height:1.5rem; padding-right:1rem;} .article-list.default-list li .t_normal tbody td input.w-price {width:calc(100% - 3.125rem)} .cardetail .calculate_pop h3 {padding:2rem 0 .5rem;border:0;font-size:1.5rem;} @media screen and ( max-width:700px ) { .article-list.default-list li .right {line-height:2.2rem;font-size:.9rem;} .article-list.default-list li .article-name {line-height:2.2rem;font-size:.8rem;} .article-list.default-list li input, .article-list.default-list li select, .article-list.default-list li input + label {height:2.1rem;font-size:.9rem;font-weight:bold;} .article-list.default-list li .t_normal tbody td input[type=text], .article-list.default-list li .t_normal tbody td select {font-size:.8rem; } .article-list.default-list li .button {font-size:.95rem;} .article-list.default-list li.total span {font-size:1rem;} .calculate_pop {max-width:100%;max-height:100%;border-radius:0;} .calculate_pop .pop_cont {padding-top:0;} } /* 동급차량 */ .samecar .car_list_item .car-select {display:none; } /*=============================================================================================================== 성능정보 ================================================================================================================*/ .cardetail_repair {position:relative;text-align:center;} .cardetail_repair .button_group {position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(255,255,255,.6);align-items:center;justify-content:center;z-index:11;} .cardetail_repair .button_group .button {max-width:25rem;padding:0;} .check-car-wrap {position:relative;padding:2rem 0;overflow-x:auto;font-size:0;border:0;text-align:center; } .check-car {position:relative;margin:0 auto;border:0;width:730px;height:465px;background:url('/images/checkcar/check_bg_car.jpg') no-repeat;z-index:10;} .check-car .check_link_bg {position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;} @media screen and ( max-width:1100px ) { .check-car {zoom:0.8;} } @media screen and ( max-width:900px ) { .check-car {zoom:0.4;} .cardetail_repair .button {flex:none;width:70%;min-width:auto;height:3.2rem;padding:0 !important;font-size:1rem;} } .check-car .condition-mark {position:relative;width:100%;height:100%;} .check-car .condition-mark > p {display:none;position:absolute;top:0;left:0;z-index:50;text-indent:-9999px;width:100%;height:100%;} .i-mark {z-index:300;display:inline-block;margin:0 !important;padding:0;width:2rem;height:2rem;font-size:.9rem;font-weight:bold;color:#fff;line-height:2rem;text-align:center;overflow:hidden;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;} .mark-name {margin:0 auto;padding:30px 0;width:775px;height:auto;} .mark-name:after {content:"";display:block;float:none;clear:both;} .mark-name > li {position:relative;display:table;float:left;margin:0 20px 30px;padding:0;width:110px;height:auto;text-align:left;} .mark-name > li > h3 {display:table-cell;vertical-align:middle;margin:0;padding:0;width:100%;height:30px;font-size:12px;font-weight:normal;color:#666;} .mark-name > li > span {position:absolute;top:0;right:0;z-index:100;display:block;margin:0 !important;padding:0;width:30px;height:30px;font-size:15px;font-weight:bold;color:#fff;line-height:30px;text-align:center;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;-o-border-radius:15px;} .bg-C {background-color:#7342a4;} .bg-C input[type=checkbox]:checked {background:url('/images/icon_checkbox_red.png') no-repeat #fff;background-size:33px 33px;} .bg-X {background-color:#007ae4;} .bg-W {background-color:#e10f30;cursor:pointer;} .bg-A {background-color:#3a3a3a;} .bg-U {background-color:#ff9824;} .bg-T {background-color:#4dbf50;} /* i￠Œi¸¡ */ .check_FL_foglamp {background:url('/images/checkcar/check_FL_foglamp.png') no-repeat;} .check_FL_wheel {background:url('/images/checkcar/check_FL_wheel.png') no-repeat;} .check_RL_wheel {background:url('/images/checkcar/check_RL_wheel.png') no-repeat;} .check_L_side {background:url('/images/checkcar/check_L_side.png') no-repeat;} .check_L_fender {background:url('/images/checkcar/check_L_fender.png') no-repeat;} .check_FL_door {background:url('/images/checkcar/check_FL_door.png') no-repeat;} .check_RL_door {background:url('/images/checkcar/check_RL_door.png') no-repeat;} .check_L_quarterpanel {background:url('/images/checkcar/check_L_quarterpanel.png') no-repeat;} .check_RL_foglamp {background:url('/images/checkcar/check_RL_foglamp.png') no-repeat;} .check_LA_filler {background:url('/images/checkcar/check_LA_filler.png') no-repeat;} .check_LB_filler {background:url('/images/checkcar/check_LB_filler.png') no-repeat;} .check_LC_filler {background:url('/images/checkcar/check_LC_filler.png') no-repeat;} .check_FL_window {background:url('/images/checkcar/check_FL_window.png') no-repeat;} .check_RL_window {background:url('/images/checkcar/check_RL_window.png') no-repeat;} /* i?갻?¨ */ .check_F_bumper {background:url('/images/checkcar/check_F_bumper.png') no-repeat;} .check_grill {background:url('/images/checkcar/check_grill.png') no-repeat;} .check_L_lamp {background:url('/images/checkcar/check_L_lamp.png') no-repeat;} .check_R_lamp {background:url('/images/checkcar/check_R_lamp.png') no-repeat;} .check_bonnet {background:url('/images/checkcar/check_bonnet.png') no-repeat;} .check_F_window {background:url('/images/checkcar/check_F_window.png') no-repeat;} .check_R_window {background:url('/images/checkcar/check_R_window.png') no-repeat;} .check_roof {background:url('/images/checkcar/check_roof.png') no-repeat;} .check_L_mirror {background:url('/images/checkcar/check_L_mirror.png') no-repeat;} .check_R_mirror {background:url('/images/checkcar/check_R_mirror.png') no-repeat;} .check_trunk {background:url('/images/checkcar/check_trunk.png') no-repeat;} .check_L_taillight {background:url('/images/checkcar/check_L_taillight.png') no-repeat;} .check_R_taillight {background:url('/images/checkcar/check_R_taillight.png') no-repeat;} .check_R_bumper {background:url('/images/checkcar/check_R_bumper.png') no-repeat;} /* i??i²´ */ .check_radiator {background:url('/images/checkcar/check_radiator.png') no-repeat;} .check_F_panel {background:url('/images/checkcar/check_F_panel.png') no-repeat;} .check_FL_insidepanel {background:url('/images/checkcar/check_FL_insidepanel.png') no-repeat;} .check_FL_sidemember {background:url('/images/checkcar/check_FL_sidemember.png') no-repeat;} .check_FL_wheelhouse {background:url('/images/checkcar/check_FL_wheelhouse.png') no-repeat;} .check_FR_insidepanel {background:url('/images/checkcar/check_FR_insidepanel.png') no-repeat;} .check_FR_sidemember {background:url('/images/checkcar/check_FR_sidemember.png') no-repeat;} .check_FR_wheelhouse {background:url('/images/checkcar/check_FR_wheelhouse.png') no-repeat;} .check_crossmember {background:url('/images/checkcar/check_crossmember.png') no-repeat;} .check_dashpanel {background:url('/images/checkcar/check_dashpanel.png') no-repeat;} .check_floorpanel {background:url('/images/checkcar/check_floorpanel.png') no-repeat;} .check_packagetray {background:url('/images/checkcar/check_packagetray.png') no-repeat;} .check_RL_wheelhouse {background:url('/images/checkcar/check_RL_wheelhouse.png') no-repeat;} .check_RL_sidemember {background:url('/images/checkcar/check_RL_sidemember.png') no-repeat;} .check_trunkfloor {background:url('../images/checkcar/check_trunkfloor.png') no-repeat;} .check_RR_sidemember {background:url('../images/checkcar/check_RR_sidemember.png') no-repeat;} .check_RR_wheelhouse {background:url('../images/checkcar/check_RR_wheelhouse.png') no-repeat;} .check_rearpanel {background:url('../images/checkcar/check_rearpanel.png') no-repeat;} /* i?°i¸¡ */ .check_FR_foglamp {background:url('../images/checkcar/check_FR_foglamp.png') no-repeat;} .check_FR_wheel {background:url('../images/checkcar/check_FR_wheel.png') no-repeat;} .check_RR_wheel {background:url('../images/checkcar/check_RR_wheel.png') no-repeat;} .check_R_side {background:url('../images/checkcar/check_R_side.png') no-repeat;} .check_R_fender {background:url('../images/checkcar/check_R_fender.png') no-repeat;} .check_FR_door {background:url('../images/checkcar/check_FR_door.png') no-repeat;} .check_RR_door {background:url('../images/checkcar/check_RR_door.png') no-repeat;} .check_R_quarterpanel {background:url('../images/checkcar/check_R_quarterpanel.png') no-repeat;} .check_RR_foglamp {background:url('../images/checkcar/check_RR_foglamp.png') no-repeat;} .check_RA_filler {background:url('../images/checkcar/check_RA_filler.png') no-repeat;} .check_RB_filler {background:url('../images/checkcar/check_RB_filler.png') no-repeat;} .check_RC_filler {background:url('../images/checkcar/check_RC_filler.png') no-repeat;} .check_FR_window {background:url('../images/checkcar/check_FR_window.png') no-repeat;} .check_RR_window {background:url('../images/checkcar/check_RR_window.png') no-repeat;} .car_icon {display:inline-block;padding:5px 0;color:#333; text-align:center; font-size:14px;vertical-align:top;} .car_icon li:nth-child(n+5) {margin-top:10px;} .car_icon li img {width:35px;} .car_icon li p{padding:10px 0;font-size:14px;} .car_icon.mycar li img {width:65px;} .check_RC_filler {background:url('/images/checkcar/check_RC_filler.png') no-repeat;} .check_FR_window {background:url('/images/checkcar/check_FR_window.png') no-repeat;} .check_RR_window {background:url('/images/checkcar/check_RR_window.png') no-repeat;} @media screen and ( max-width:420px ) { } /*=============================================================================================================== 회원사 ================================================================================================================*/ .company_list {display:flex; width:100%;font-size:0; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;gap:1.255rem; } .company_list .item {width:calc(25% - 0.95rem);padding:1.5rem; border-radius:0.8rem; border:1px solid #e4e5ea; } .company_list .item .txt-name {font-size:1.095rem; line-height:1.2rem; font-weight:500; color:var(--txt-dark-grey);text-align:center; } .company_list .item .txt-sangsa {position:relative;padding:.5rem 0 1.5rem;font-size:1.095rem; line-height:1.2rem; font-weight:600; color:var(--txt-default);text-align:center;text-indent:-1rem;} .company_list .item .txt-sangsa:before {content:'';display:inline-block;width:3rem;height:3rem;margin-right:.5rem;background:url('/images/inc/noimg_sangsa.png') no-repeat center;background-size:auto 100%;background-color:#f3f5f8;border-radius:50%;vertical-align:middle;} .company_list .item .txt-number {font-size:1.05rem; line-height:1.2rem;padding-top:0.6rem; font-weight:bold; color:var(--txt-default)} .company_list .item a {display:block; color:var(--txt-default);font-size:1.095rem; line-height:1.2rem; font-weight:600; } .company_list .item ul {display:block;padding:1.5rem 0; border-top:1px solid #eceff3; } .company_list .item ul li {padding:.2rem 0;font-size:0.9rem;} .company_list .item ul li span {display:inline-block; vertical-align:top; } .company_list .item ul li span:first-child {width:75px; color:#777;} .company_list .item ul li span:first-child + span {width:calc(100% - 75px); color:#222 } .company_list .item .button_group {padding:.3rem 0;gap:0.45rem;} .company_list .item .button_group button {height:2.8rem;padding:0;font-size:.9rem;} .company_list .item .button_group button.sell { background-color:#e9effe; color:var(--txt-default); } .company_list .item .button_group button.buy { background-color:#3a71fc; color:#fff; } .company_list .item .button_group button.dealer { background-color:#e7f5ff; color:var(--txt-default); } .company_list .item .button_group button.carlist { background-color:#e9effe; color:var(--txt-default); } @media all and (max-width:1200px) { .company_list .item {width:calc(33.33% - 0.95rem);} } @media all and (max-width:900px) { .company_list .item {width:calc(50% - 0.95rem);} } @media all and (max-width:700px) { .company_list .item {width:100%;} } /*@media all and (max-width:1200px) { .company_list { gap:1.1rem; } .company_list .item {padding:1rem; } } @media all and (max-width:1020px) { .company_list {flex-wrap: wrap; gap:1rem; } .company_list .item { width:calc(50% - 0.5rem); } .company_list .item ul li { padding-left:0; font-size:0.9rem;margin-bottom:0.6rem; } .company_list .item .btn-area {padding-top:0.5rem; } } @media all and (max-width:677px) { .company_list {padding:1rem 0;gap:0.8rem; } .company_list .item { width:calc(50% - 0.4rem); padding:1rem; border-radius:0.5rem; } } @media all and (max-width:480px) { .company_list .item { width:100% !important; } }*/ /* 회원사 상세 */ .sangsa_info_wrap {padding-bottom:1rem;} .sangsa_info_wrap .search_box {position:relative;display:flex;font-size:0;margin:0 auto;padding:.8rem 1rem;border:1px solid #e4e5ea;border-top:1px solid #555;overflow:hidden;font-size:0;z-index:5;box-shadow:.2rem .2rem .8rem rgba(30,80,141,.15);} .sangsa_info_wrap .search_box select {border:0;width:40%;font-weight:bold; font-size:1.125rem;} .sangsa_info_wrap .search_box select:first-child {width:calc(60% - 2.5rem);} .sangsa_info_wrap .search_box .btn-search {display:inline-block;vertical-align:middle;border:0;outline:0;width:2.8rem;height:2.8rem;background-image:url('/images/sub/ico_search.png'); background-size:auto 1.5rem;background-repeat:no-repeat;background-position:center center;font-size:0;} .sangsa_info_wrap .sangsa_info {position:relative;border-radius:.5rem;background-color:#f0f7fc;padding:2rem 3rem;} .sangsa_info_wrap .sangsa_info ul {font-size:0;} .sangsa_info_wrap .sangsa_info ul li {display:inline-block;width:33.3%;padding:.5rem 0;font-size:0;vertical-align:top;} .sangsa_info_wrap .sangsa_info ul li span {display:inline-block;font-size:1rem;letter-spacing:-.5px;vertical-align:top; } .sangsa_info_wrap .sangsa_info ul li span:first-child {width:6rem;color:#888;font-size:.95rem;} .sangsa_info_wrap .sangsa_info ul li.full {width:100%; } .sangsa_info_wrap .sangsa_info ul li.full span:first-child + span { padding-top:.5rem;} .sangsa_info_wrap .sangsa_info ul li.full i {display:inline-block;border-radius:5rem;border:1px solid #dde5e7;margin-right:.2rem;margin-bottom: .2rem;background:#fff;padding:0 1.5rem;font-size:1rem;line-height:2.5rem;cursor:pointer;} .sangsa_info_wrap .sangsa_info ul li.full i:hover {border-color:#999;} .sangsa_info_wrap .sangsa_info ul li.full i.active {border-color:var(--txt-default);color:var(--txt-default);font-weight:bold;} .sangsa_info_wrap .sangsa_info button.carlist-sangsa {display:inline-block; vertical-align:top; margin-left:5px; border-radius:6rem; height:24px;line-height:23px; padding:0 0.5rem; color:var(--txt-default); border:1px solid var(--txt-default); background-color:#fff; font-size:0.8rem; font-weight:600; } .sangsa_info_wrap .sangsa_info p {font-size:1rem;} @media all and (max-width:900px) { .sangsa_info_wrap .sangsa_info {padding:1.5rem 2rem;} .sangsa_info_wrap .sangsa_info p {font-size:.85rem;} .sangsa_info_wrap .sangsa_info ul li {width:100%;padding:.3rem 0;} .sangsa_info_wrap .sangsa_info ul li span:first-child {font-size:.85rem;} .sangsa_info_wrap .sangsa_info ul li span {font-size:.9rem;} .sangsa_info_wrap .sangsa_info ul li.full i {margin:.2rem .4rem .2rem 0;} } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 중고차상담 - 추천딜러 ///////////////////////////////////////////////////////////////////////////////////////////*/ .recomm-dealer {display:flex; width:100%; margin-top:0; margin-bottom:1.5rem; padding-top:0rem; font-size:0; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;gap:1.255rem; } .recomm-dealer .item { width:calc(25% - 0.95rem); padding:1.3rem 1.2rem 1.3rem; border-radius:0.8rem; border:1px solid #e4e5ea; text-align:center; } .recomm-dealer .item .profile {display:inline-block;margin-bottom:1rem; width:6.8rem; height:6.8rem; border-radius:50%; background-color:#f3f5f8; background-repeat:no-repeat; background-position:center 0; background-size:cover; } .recomm-dealer .item .txt-name{font-size:1.095rem; line-height:1.2rem; font-weight:500; color:#222; } .recomm-dealer .item .txt-sangsa{font-size:1.095rem; line-height:1.2rem; font-weight:600; color:var(--txt-default); } .recomm-dealer .item .txt-number {font-size:1.05rem; line-height:1.2rem;padding-top:0.6rem; font-weight:bold; color:var(--txt-default)} .recomm-dealer .item a {display:block; color:var(--txt-default);font-size:1.095rem; line-height:1.2rem; font-weight:600; } .recomm-dealer .item ul {display:block; margin-top:1rem; padding-top:1.2rem; border-top:1px solid #dfe0e5; } .recomm-dealer .item ul li {position:relative; display:block; padding-left:0.8rem; font-size:0.95rem;margin-bottom:1rem; text-align:left; } .recomm-dealer .item ul li span {display:inline-block; vertical-align:top; } .recomm-dealer .item ul li span:first-child {width:75px; color:#777;} .recomm-dealer .item ul li span:first-child + span {width:calc(100% - 75px); color:#222 } .recomm-dealer .item .btn-area {font-size:0; padding-top:0.3rem; display:flex; width:100%;flex-direction: row; gap:0.45rem; } .recomm-dealer .item .btn-area button {width:100%; height:2.813rem; height:2.813rem; font-size:0.9rem;font-weight:500; border:0; border-radius:7px; } .recomm-dealer .item .btn-area button.sell { background-color:#e9effe; color:var(--txt-default); } .recomm-dealer .item .btn-area button.buy { background-color:#3a71fc; color:#fff; } .recomm-dealer .item .btn-area button.dealer { background-color:#e9effe; color:var(--txt-default); } .recomm-dealer .item .btn-area button.sangsa { background-color:#3a71fc; color:#fff; } .recomm-dealer .item .btn-area button.carlist { background-color:#e9effe; color:var(--txt-default); } @media all and (max-width:1320px) { .recomm-dealer { gap:1.1rem; } .recomm-dealer .item {padding:1rem; } } @media all and (max-width:1024px) { .recomm-dealer {flex-wrap: wrap; gap:1rem; } .recomm-dealer .item { width:calc(50% - 0.5rem); } .recomm-dealer .item ul li { padding-left:0; font-size:0.9rem;margin-bottom:0.6rem; } .recomm-dealer .item .btn-area {padding-top:0.5rem; } } @media all and (max-width:677px) { .recomm-dealer {gap:0.8rem; } .recomm-dealer .item { width:calc(50% - 0.4rem); padding:1rem; border-radius:0.5rem; } } @media all and (max-width:480px) { .recomm-dealer .item { width:100% !important; } } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* table - 입력 ///////////////////////////////////////////////////////////////////////////////////////////*/ .table_type_write {text-align:left; font-weight:400; width:100%; border-top:1px solid #ccc; width: 100%; empty-cells: show; border-collapse: separate; } .table_type_write .ess:after {content:''; display:inline-block; vertical-align:middle; margin-top:-5px; margin-left:6px; width:5px; height:5px; border-radius:50%; background-color:var(--txt-default); } .table_type_write.line {border-top:1px solid #555; padding-top:5px;} .table_type_write colgroup {display:table-column-group;} .table_type_write tbody {display:table-row-group; } .table_type_write tr {display:table-row; } .table_type_write th, .table_type_write td {display:table-cell; padding:0.5rem; border-bottom:1px solid #dedede;} .table_type_write th {font-weight:normal; padding-left:0.8rem; padding:1.15rem 0 1.15rem 0.8rem;background-color:#f9f9f9;} .table_type_write td span{font-size:14px; color:#777; line-height:41px;} .table_type_write th.vTop {vertical-align:top; padding-top:1rem; } .table_type_write.no_bdr {border:0;} .table_type_write td.txt {padding:1.1rem 0.5rem !important} .table_type_write .flex {display:flex; width:100%; gap:0.35rem; justify-content: space-between;flex-wrap: nowrap; } .table_type_write .flex select {width:50%; } .table_type_write textarea {border-radius:5px;height:200px; background-color:#fff; border:1px solid #dedede;padding:0.8rem; font-size:1.05rem; line-height:1.6rem; font-weight:normal !important; color:#333; } .table_type_write textarea:focus {background-color:#fff;border:1px solid var(--txt-default);} .table_type_write select, .table_type_write input[type="text"], .table_type_write input[type="password"]{ height:46px; line-height:46px; } .table_type_write select {border:1px solid #dedede} .item_email { display:flex; align-items: center; gap:5px;width:50%;} .item_email input {width:30%; } .item_email input.or1 {width:33%} .item_email input.or2 {width:33%} .item_email select {width:34%; } .item_email em { text-align:center; color:#999} .item_phone { display:flex; align-items: center; gap:5px; width:50%;} .item_phone select {width:25%; } .item_phone input {width:35%; } .item_phone em { text-align:center; color:#999} .item_unit {position:relative; display:inline-block;} .item_unit em {position:absolute; right:10px; top:50%; height:46px; line-height:46px; margin-top:-23px;} .item_unit input {padding-right:40px; text-align:right; color:var(--txt-default) } .item-extra {display:inline-block; vertical-align:middle; margin-left:5px; } .item-col5 { display:flex; flex-wrap:nowrap; gap:5px; } .item-col5 input, .item-col5 select {width:50%; } .item-spam input { width:120px; } .item-column {display:flex; flex-direction: column; align-items: flex-start;gap:0.2rem; } @media all and (max-width:1024px) { .item_email, .item_phone { width:100%;} } @media all and (max-width:1024px) { .table_type_write colgroup {display:none;} .table_type_write tbody {display:block;} .table_type_write tr {display:block;} .table_type_write th, .table_type_write td {display:block; } .table_type_write th { background-color:transparent; border:0;padding:1.2rem 0 0.65rem;} .table_type_write td {padding:0 0 1rem; } .table_type_write .flex {width:100%; gap:0.35rem; flex-wrap: wrap; } .table_type_write .flex select {width:calc(50% - 0.175rem); } .item_unit { width:65%; min-width:auto; } } @media all and (max-width:667px) { /* 상품용차량검색 */ .bbs-list.bbs-sch {border:0} .bbs-list.bbs-sch colgroup {display:none;} .bbs-list.bbs-sch tbody {display:block; width:100%; } .bbs-list.bbs-sch tr {display:block; border:1px solid #dedede; border-radius:0.5rem ;padding:1rem; } .bbs-list.bbs-sch td {display:block !important; width:100%; border:0px solid #f00; border-bottom:1px dashed #dedede; } .bbs-list.bbs-sch td:last-child {border:0} .bbs-list.bbs-sch .table-head {display:none;} .bbs-list.bbs-sch td .tbh-title {display:inline-flex; } .bbs-list.bbs-sch td .mb-wrap { justify-content: space-between;} .table_type_write td {border-bottom:4px solid #f2f2f2;} .item_unit { width:100%; min-width:100%; } .item-extra {margin-left:0 ; display:flex; padding-top:8px; justify-content: flex-end; } .item-extra input[type=checkbox] + label {padding-right:0} .table_type_write select, .table_type_write input[type="text"], .table_type_write input[type="password"] { font-size:1.1rem;height:50px; line-height:50px;} .item_unit em { height:50px; line-height:50px; margin-top:-25px;} .table_type_write .w50pc {width:100% !important} /*.page-join .table_type_write {border-top:0}*/ } @media all and (max-width:460px) { .item_email { flex-wrap: wrap; } .item_email input.or1 {width:calc(50% - 22px)} .item_email input.or2 {width:50%} .item_email select {width:100%; } .item_email em {width:12px; } } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 중고차상담 - 상담신청 ///////////////////////////////////////////////////////////////////////////////////////////*/ .inquiry-top {padding:2.3rem 0; background:url('/images/sub/ico_bubble.png') no-repeat right ; background-size:auto 105%; } .inquiry-top .dealer-info {display:inline-block; width:50%; font-size:0; } .inquiry-top .dealer-info .profile {display:inline-block; vertical-align:middle; width:6.8rem; height:6.8rem; border-radius:50%; background-color:#e9eef7; background-repeat:no-repeat; background-position:center 0; background-size:cover; } .inquiry-top .dealer-info .info {display:inline-block; vertical-align:middle; width:calc(100% - 6.8rem); padding-left:1.5rem; font-size:0;} .inquiry-top .dealer-info .info li {display:inline-block; margin:0.4rem 0; width:50%; } .inquiry-top .dealer-info .info li span {display:inline-block; vertical-align:top; font-size:1rem; color:#777; line-height:25px; font-weight:500 } .inquiry-top .dealer-info .info li span:first-child {width:80px; } .inquiry-top .dealer-info .info li span:first-child + span {width:calc(100% - 80px); color:#222 ; } .inquiry-top .dealer-info .info .count {display:inline-block; vertical-align:top; color:#fff; background-color:var(--txt-default); height:25px; line-height:24px; padding:0 0.8rem; font-size:0.825rem; font-weight:bold; border-radius:60px; } .cont_title {position:relative; margin-top:2.5rem; margin-bottom:1.5rem;font-size:1.65rem; line-height:1.6rem; font-weight:700; color:#222; letter-spacing:-.06em; } .cont_title.first {margin-top:0} .cont_title .txt-ess {position:absolute; right:0; top:5px;font-size:0.85rem;padding-left:5px; font-weight:500; letter-spacing:0; line-height:1rem; color:#777;} .cont_title .txt-ess:before {content:''; display:inline-block; vertical-align:middle;margin-right:5px; margin-top:-2px; width:5px; height:5px; border-radius:50%; background-color:var(--txt-default); } .cont_title .s-title {font-size:1.05rem; line-height:1.3em; font-weight:bold; color:var(--txt-default); margin:1rem 0;} .inquiry-cont {font-size:0; } .inquiry-cont.line {border-top:1px solid #555; border-bottom:1px solid #f1f1f1; padding-bottom:0.5rem} .inquiry-cont .item-line {display:flex; justify-content: space-between; width:100%; gap:1rem;flex-wrap: nowrap; } .inquiry-cont .item {width:100%; position:relative; padding-top:0.5rem;font-size:0; border:0; margin:0} .inquiry-cont .item.first {padding-top:0.8rem;border-top:1px solid #555 } /*.inquiry-cont .item:after {content:''; position:absolute; left:0; bottom:0; width:100%; border-bottom:2px solid #ededed;z-index:0 }*/ .inquiry-cont .item.col5 {display:inline-block; width:50%; } .inquiry-cont .item .item-title { display:inline-block; vertical-align:top; width:120px; font-size:1.02rem; line-height:50px; padding-left:5px; color:#9296a1; font-weight:500;letter-spacing:-.08em; } .inquiry-cont .item .item-title.ess:after {content:''; display:inline-block; vertical-align:middle; margin-top:-5px; margin-left:6px; width:5px; height:5px; border-radius:50%; background-color:var(--txt-default); } .inquiry-cont .item .item-cont { display:inline-block; vertical-align:top; width:calc(100% - 120px); font-size:0; } .inquiry-cont .item .item-cont .text {display:inline-block; font-size:1rem; color:#333; line-height:50px; height:50px; } .inquiry-cont .item.text {font-size:1rem; height:4.5rem; line-height:4.5rem; font-weight:500; margin:0;padding:0 } .inquiry-cont .item.text a.link {display:inline-block; margin-left:10px; text-decoration:underline; color:#333; font-size:0.85rem; height:1.75rem; line-height:1.75rem; padding:0 0.85rem; border-radius:4px; background-color:#f0f0f0 } .inquiry-cont input, .inquiry-cont select {border:0; height:50px; line-height:50px; color:#222; font-size:1rem; font-weight:500; border:1px solid #d9dce4; border-radius:5px; } .inquiry-cont select { background-size:auto 18px; width:20%; letter-spacing:-.06em;background-position:calc(100% - 20px);} .inquiry-cont input:focus, .inquiry-cont select:focus {border-color:var(--txt-default); position:relative; z-index:3} .inquiry-cont .select-box {display:inline-block; width:25%; } .inquiry-cont .item-cont.col5 .select-box {width:50%; } .inquiry-cont .select-box select {width:100%;color:#444 !important; } .inquiry-cont .note {display:inline-block; font-size:0.9rem; color:#555; font-weight:500; padding:0 10px;} .inquiry-cont .unit {display:block;width:50%; } .inquiry-cont .unit input {text-align:right; width:50% !important; color:var(--txt-default)} .inquiry-cont .unit em {display:inline-block; vertical-align:middle; font-size:0.85rem; font-weight:500; color:#999;z-index:5; } .inquiry-cont textarea {border-radius:5px;height:200px; background-color:#f8f8f8; border:2px solid #f8f8f8; padding:1.5rem; font-size:1.05rem; line-height:1.6rem; color:#333; font-weight:500;margin-top:2rem; } .inquiry-cont textarea:focus {background-color:#fff;border:2px solid var(--txt-default);} .inquiry-cont .spam input {background-color:#fafafa; width:120px; border-radius:12px 12px 0 0} .inquiry-cont textarea.inquiry {height:300px;} .inquiry-cont input[type=checkbox]:checked + label { color:var(--txt-default); } .inquiry-cont-type2 {font-size:0; } .inquiry-cont-type2 .col-wrap {display:flex; width:100%; gap:0.35rem; justify-content: space-between;flex-wrap: nowrap; } .inquiry-cont-type2 .col-wrap select {width:50%;} .inquiry-cont-type2 .item-body {border-top:1px solid #ccc; margin-top:10px; } .inquiry-cont-type2 .item-line {display:flex; width:100%; } .inquiry-cont-type2 .item { width:100%; position:relative;font-size:0; border:0; margin:0; border-bottom:1px solid #dedede;display:flex; width:100%; align-items: stretch;} .inquiry-cont-type2 .item:after {content:''; position:absolute; left:0; bottom:0; width:100%; border-bottom:0px solid #ededed;z-index:0 } .inquiry-cont-type2 .item.col5 {width:50%; } .inquiry-cont-type2 button.reset {display:inline-block; margin-left:5px; height:45px; line-height:43px; padding:0 1.3rem; border-radius:5px; background-color:#f4f4f4; border:1px solid #dedede; color:#555; font-size:0.95rem; font-weight:500; } .inquiry-cont-type2 .item .item-title { display:inline-block; vertical-align:top; width:120px; font-size:1.02rem; padding:0.5rem 0;line-height:45px; padding-left:12px; color:#9296a1;background-color:#f9f9f9; font-weight:500;letter-spacing:-.08em; } .inquiry-cont-type2 .item .item-title.ess:after {content:''; display:inline-block; vertical-align:middle; margin-top:-5px; margin-left:6px; width:5px; height:5px; border-radius:50%; background-color:var(--txt-default); } .inquiry-cont-type2 .item .item-cont { display:inline-block; vertical-align:top; width:calc(100% - 120px); font-size:0; padding:0.5rem;} .inquiry-cont-type2 .item .item-cont .text {display:inline-block; font-size:1rem; color:#333; } .inquiry-cont-type2 .item.text {font-size:1rem; font-weight:500; margin:0; padding:1rem } .inquiry-cont-type2 .item a.link {display:inline-block; margin-left:10px; text-decoration:underline; color:#333; font-size:0.85rem; height:1.75rem; line-height:1.75rem; padding:0 0.85rem; border-radius:4px; background-color:#f0f0f0 } .inquiry-cont-type2 input, .inquiry-cont-type2 select {border:0; height:45px; line-height:45px; color:#222; font-size:0.95rem; font-weight:500; border:1px solid #dedede; background-color:#fff; border-radius:5px; } .inquiry-cont-type2 select { background-size:auto 18px; width:20%; letter-spacing:-.06em;background-position:calc(100% - 20px);} .inquiry-cont-type2 input:focus, .inquiry-cont-type2 select:focus {border-color:var(--txt-default); background-color:#fff; position:relative; z-index:3} .inquiry-cont-type2 select {min-width:140px; } .inquiry-cont-type2 .select-box {display:inline-block; width:25%; } .inquiry-cont-type2 .item-cont.col5 .select-box {width:50%; } .inquiry-cont-type2 .select-box select {width:100%;color:#444 !important; } .inquiry-cont-type2 .note {display:inline-block; font-size:0.9rem; color:#555; font-weight:500; padding:0 10px;} .inquiry-cont-type2 .unit {display:block;width:50%; } .inquiry-cont-type2 .unit input {text-align:right; width:50% !important; color:var(--txt-default)} .inquiry-cont-type2 .unit em {display:inline-block; vertical-align:middle; font-size:0.85rem; padding-left:5px; font-weight:500; color:#999;z-index:5; } .inquiry-cont-type2 textarea {border-radius:12px;height:200px; background-color:#f8f8f8; border:1px solid #dedede;padding:1.5rem; font-size:1.05rem; line-height:1.6rem; color:#333; font-weight:500;margin-top:0.85rem; } .inquiry-cont-type2 textarea:focus {background-color:#fff;border:1px solid var(--txt-default);} .inquiry-cont-type2 .spam input { width:120px; } .inquiry-cont-type2 textarea.inquiry { display:block !important; width:calc(100% - 0rem); margin:0.5rem auto 0;height:300px;} .inquiry-cont-type2 input[type=checkbox]:checked + label { color:var(--txt-default); } .inquiry-cont-type2 .note_prof {display:inline-block; vertical-align:middle; font-size:0.85rem; line-height:1.4em; color:#666; padding:1rem; } .letter {display:block; padding:1rem 0; font-size:0.95rem; } .letter span{ display:inline-block; margin-right:15px; } .letter input[type=radio] + label {font-size:0.95rem;} .write_ht {height:500px; } .w_prof {width:50% !important;} .text_intro {border-radius:5px !important; background-color:#fff !important; height:80px !important; margin:0 !important; padding:0.65rem !important} .inquiry-cont .attach {display:block; padding-top:0.35rem; font-size:0.85rem;padding-bottom:1rem; line-height:34px; } .inquiry-cont button.fileDown { position:relative;margin-right:1rem; margin-bottom:0.5rem;display:inline-block; vertical-align:middle; height:30px; line-height:28px; border:0px solid #ccc; text-align:left; padding-right:25px; width:auto;max-width:130px; overflow:hidden; border-radius:60px; font-size:13px;overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .inquiry-cont button.fileDown:after {content:'\e921';position:absolute; right:0; top:5px; width:20px; height:20px;line-height:20px;font-size:0.65rem; border-radius:6rem; color:#fff; background-color:#999; text-align:center; } .inp-file {display: inline-block; vertical-align: middle; padding:0} .inp-file label {display: block; position:relative; text-align: center; box-sizing: border-box; height:38px; line-height:38px; width:120px; padding: 0 5px;border: 1px solid #ccc;border-radius: 7px; background-color: #fff; cursor: pointer;} .inp-file label:hover {border:1px solid var(--txt-default)} .inp-file label:hover:before, .inp-file label:hover span {color:var(--txt-default); height:38px !important} .inp-file label:before {content:"\eb7b"; display:inline-block;font-family:'xeicon'; vertical-align:top; margin-right:5px; font-size:18px;line-height:38px; } .inp-file label span {display: inline-block;vertical-align: top;height:38px !important; line-height:38px !important; font-size: 14px;color: #666;} .inp-file input[type="file"] { display:none;} .inp-file .disabled label { cursor: default; background-color: #f1f1f1 !important; } .inp-file .disabled label span { color: #999; } .addfile-list {font-size:0;display:flex; justify-content: flex-start; gap:0.3rem; padding:0.65rem 0 0.3rem; } .addfile-list span {display:inline-flex; justify-content: space-between;align-items: center;gap:0.65rem; padding:2px 2px 2px 12px; position:relative; font-size:13px; height:30px; line-height:28px; border-radius:60px; border:1px solid #ddd;} .addfile-list span .file-delete { width:24px; height:24px; color:#000; font-size:0; background-color:transparent; padding:0;z-index:5; } .addfile-list span .file-delete:after {content:"\e9af"; display:inline-flex; align-items: center; justify-content: center; font-size:11px; font-weight:bold; width:100%;height:100%; border-radius:30px; text-align:center; background-color:#555; color:#fff; font-family:'xeicon';} .addfile-list a.filedown {display:inline-block; vertical-align:middle; position:relative; font-size:0.85rem; margin-right:5px; margin-bottom:5px;height:30px; line-height:28px; padding:0px; padding-right:15px; padding-left:15px;border-radius:60px; border:1px solid #ddd;} .addfile-list a.filedown:hover, .addfile-list a.filedown:hover:after{color:var(--txt-default)} .addfile-list a.filedown:after {content:"\eb7c"; display:inline-block; vertical-align:middle; margin-left:5px; font-size:18px; color:#666; } .addfile-list.file {padding-top:1rem; border-top:1px solid #eee; align-items: center; } .addfile-list .file-title {display:inline-block;vertical-align:middle; font-size:1rem; color:#333; margin-right:2.5rem; } @media all and (max-width:1320px) { .inquiry-top .dealer-info {width:80%; } .inquiry-cont {padding:0 10px;} } @media all and (max-width:1024px) { .inquiry-top {padding:1.5rem 0; background-size:auto 100%; } .cont_title {margin-top:2rem; font-size:1.313rem; line-height:1.313;font-weight:bold; margin-bottom:1rem;} .cont_title:first-child {margin-top:1rem;} .cont_title .txt-ess {position:relative; width:100%; display:block; clear:both; font-weight:500; margin-top:5px; font-size:0.815rem;color:#666; letter-spacing:-.06em;} .inquiry-cont .item:after {display:none; } .inquiry-cont input, .inquiry-cont select {height:3.125rem; line-height:3.125rem; background-color:#f8f8f8; font-size:0.95rem; border-radius:5px; } .inquiry-cont .item .item-cont .text {background-color:#f8f8f8; width:100%;padding:0 0.5rem;height:3.125rem; line-height:3.125rem;border-radius:5px; } .inquiry-cont .item { padding-top:0.6rem; } .inquiry-cont .item.col5 {display:block;width:100% !important; } .inquiry-cont .item .item-title { width:100px; font-size:0.95rem; line-height:50px; padding-left: 0} .inquiry-cont .item .item-cont { width:calc(100% - 100px); line-height:50px; } .inquiry-cont .select-box { width:calc(50% - 3px);margin-left:6px; margin-bottom:6px;} .inquiry-cont .select-box:nth-child(1), .inquiry-cont .select-box:nth-child(3), .inquiry-cont .item-cont.col5 .select-box:first-child {margin-left:0; } .inquiry-cont .item-cont.col5 .select-box { width:calc(50% - 3px);margin-left:6px; } .inquiry-cont .unit em {padding-left:5px; } .inquiry-cont select { background-size:auto 14px; background-position:calc(100% - 10px);} .inquiry-cont textarea {border-radius:5px;height:150px; padding:1rem; font-size:1rem; line-height:1.5rem; margin-top:1rem; } .inquiry-cont .spam input { border-radius:5px} .inquiry-cont textarea.inquiry {height:250px;} .inquiry-cont-type2 .item-line {display:block; } .inquiry-cont-type2 .item { flex-wrap: wrap; padding-top:0rem; } .inquiry-cont-type2 .item:after {display:none; } .inquiry-cont-type2 input, .inquiry-cont-type2 select {background-color:#f8f8f8; font-size:0.95rem; border-radius:5px; } .inquiry-cont-type2 .item .item-cont .text {background-color:#f8f8f8; width:100%;padding:0 0.5rem;border-radius:5px; } .inquiry-cont-type2 .item.col5 { width:100% !important; } .inquiry-cont-type2 .item .item-title { width:100px; font-size:0.95rem; line-height:50px; padding-left: 7px;} .inquiry-cont-type2 .item .item-cont { width:calc(100% - 100px); line-height:50px; } .inquiry-cont-type2 .select-box { width:calc(50% - 3px);margin-left:6px; margin-bottom:6px;} .inquiry-cont-type2 .select-box:nth-child(1), .inquiry-cont-type2 .select-box:nth-child(3), .inquiry-cont-type2 .item-cont.col5 .select-box:first-child {margin-left:0; } .inquiry-cont-type2 .item-cont.col5 .select-box { width:calc(50% - 3px);margin-left:6px; } .inquiry-cont-type2 .unit em {padding-left:5px; } .inquiry-cont-type2 select { background-size:auto 14px; background-position:calc(100% - 10px);} .inquiry-cont-type2 textarea {border-radius:5px;height:150px; padding:1rem; font-size:1rem; line-height:1.5rem; margin-top:1rem; } .inquiry-cont-type2 .spam input { border-radius:5px} .inquiry-cont-type2 textarea.inquiry {height:250px;} } @media all and (max-width:798px) { .inquiry-top { background:none;} .inquiry-top .dealer-info {width:100%;} } @media all and (max-width:677px) { .inquiry-top {background-color:#f0f4fb; padding:1.2rem 1rem; } .inquiry-top .dealer-info .profile {background-color:#fff;width:5rem; height:5rem; } .inquiry-top .dealer-info .info { width:calc(100% - 5rem); padding-left:1rem; } .inquiry-top .dealer-info .info li { margin:0.25rem 0; } .inquiry-top .dealer-info .info li span { font-size:0.9rem; line-height:1.25rem; } .inquiry-top .dealer-info .info .count {height:1.3rem; line-height:1.3rem; padding:0 0.6rem; font-size:0.78rem; } .inquiry-top .dealer-info .info li span:first-child {width:70px; } .inquiry-top .dealer-info .info li span:first-child + span {width:calc(100% - 70px);} .inquiry-cont textarea.inquiry {height:150px;} .inquiry-cont .item.text a.link { margin-left:0px; font-size:0.75rem; height:1.5rem; line-height:1.5rem; padding:0 0.5rem; } .inquiry-cont .item .item-title {width:100%; display:block; line-height:2rem; padding-top:0rem; } .inquiry-cont .item .item-cont { width:100%; display:block; } .inquiry-cont .item { padding-top:0.45rem; } .inquiry-cont .select-box { width:100%;margin-left:0px; margin-bottom:5px;} .inquiry-cont-type2 .col-wrap { width:100%; flex-wrap: wrap;} .inquiry-cont-type2 .col-wrap select {width:calc(50% - 0.2rem);} .inquiry-cont-type2 .item .item-title {width:100%; display:block; line-height:2rem; padding-top:0.3rem; background-color:#fff; padding-bottom:0; margin-bottom:0; } .inquiry-cont-type2 .item .item-cont { width:100%; display:block; padding-top:0 } .inquiry-cont-type2 .select-box { width:100%;margin-left:0px; margin-bottom:0px;} .inquiry-cont-type2 textarea.inquiry {width:calc(100% - 1rem);} .cont_title { font-size:1.125rem; line-height:1.2; } .cont_title .txt-ess {font-size:0.8rem;color:#999; margin-bottom:0.5rem;} .w_prof {width:100% !important;} } @media all and (max-width:520px) { .inquiry-top .dealer-info .profile, .inquiry-top .dealer-info .info {vertical-align:top; } .inquiry-top .dealer-info .info li { display:block; width:100% } } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 회원사 - 딜러검색 ///////////////////////////////////////////////////////////////////////////////////////////*/ .dealer-cont {display:flex; flex-direction: row;justify-content: center;gap:3rem; align-items: center; width:100%; border-radius:12px; background-color:#f5f5f5; padding:2rem; } .dealer-cont figure{ width:120px; height:200px; background-image:url('/images/inc/noimg_dealer.png'); background-repeat:no-repeat; background-position:center center; background-size:auto 85%; } .dealer-cont dl dt{font-size:1.35rem; line-height:1.25rem; color:#222; font-weight:bold; } .dealer-cont dl dd {font-size:1rem; color:#888; padding-top:1.2rem; line-height:1.6em; } .dealer-cont.search-car figure {background-image:url('/images/inc/noimg_car.png'); } .sangsa-info-wrap {display:block; width:100%; margin-bottom:1.5rem; } .sangsa-info-wrap .search-box {position:relative; font-size:0; margin:0px auto -1.75rem; font-size:0; width:380px;padding:0.313rem 0.625rem 0.313rem 1.5rem; height:3.75rem; border-radius:9rem; background-color:#fff; box-shadow:5px 5px 15px rgba(0,0,0,0.08); z-index:5} .sangsa-info-wrap .search-box select { width:calc(100% - 50px);border:0; height:50px; font-size:1rem; color:#333; background-color:transparent; font-weight:500; cursor:pointer; letter-spacing:-.04em; } .sangsa-info-wrap .search-box .btn-search {display:inline-block; vertical-align:middle; border:0; outline:0; width:50px; height:50px; background-image:url('/images/sub/ico_search.png'); background-size:auto 30px; background-repeat:no-repeat; background-position:center center; font-size:0;} .sangsa-info-wrap .sangsa-info {position:relative;margin-top:0rem; border-radius:12px; background-color:#f0f5fc; padding:4rem 5rem 2.5rem;display:flex; flex-direction: row;justify-content: center;align-items: center; gap:3rem; z-index:0 } .sangsa-info-wrap .sangsa-info figure { width:130px; height:160px; border:1px solid #ddd; border-radius:5px;padding:0;background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:cover; } .sangsa-info-wrap .sangsa-info ul { width:calc(100% - 130px);font-size:0; } .sangsa-info-wrap .sangsa-info ul li {display:inline-block; vertical-align:top; width:280px; margin:0.65rem 0; font-size:0;} .sangsa-info-wrap .sangsa-info ul li:first-child, .sangsa-info-wrap .sangsa-info ul li:nth-child(2n+1) {width:calc(100% - 280px); } .sangsa-info-wrap .sangsa-info ul li span {display:inline-block; vertical-align:top; font-size:1.015rem; line-height:1.5em; font-weight:400; color:#888; } .sangsa-info-wrap .sangsa-info ul li span:first-child {width:90px; } .sangsa-info-wrap .sangsa-info ul li span:first-child + span {width:calc(100% - 90px); color:#444; } .sangsa-info-wrap .sangsa-info ul li.address {width:100% !important} .sangsa-info-wrap .sangsa-info button.carlist-sangsa {display:inline-block; vertical-align:top; margin-left:5px; border-radius:6rem; height:24px;line-height:23px; padding:0 0.5rem; color:var(--txt-default); border:1px solid var(--txt-default); background-color:#fff; font-size:0.8rem; font-weight:600; } /* 회원사 - 협력업체 갤러리게시판 */ div.gallery-toggle {margin-top:1rem;} .gallery-toggle .toggle_dl {position:relative; margin-bottom:20px; outline: 1px solid #e3e8f0; border: 2px solid transparent; overflow:hidden; border-radius:12px; font-size:0; padding:2rem 2.5rem 2rem; transition: all 0.2s ease-in; } .gallery-toggle .toggle_dl:hover {outline: 0px solid transparent;border: 2px solid var(--txt-default); box-shadow:3px 3px 15px rgba(0,67,255,0.1)} .gallery-toggle .toggle_dl .item {position:relative; cursor:pointer;width:auto; } .gallery-toggle .toggle_dl .item:after {content:"\e913"; position:absolute;right:0rem; bottom:0rem;font-family :'xeicon'; color:#999; font-size:1.3rem; font-weight:normal; cursor:pointer; transition: all 0.2s ease-in;} .gallery-toggle .toggle_dl .item.on:after {content:"\e91a"; } .gallery-toggle .toggle_dl:hover .item:after { color:var(--txt-default); } .gallery-toggle .toggle_dl .item figure {display:inline-block; vertical-align:middle; padding:0; width:125px; height:125px; border-radius:0.5rem;overflow:hidden; background-color:#f9f9f9 ; background-repeat:no-repeat; background-position:center center; background-size:cover; } .gallery-toggle .toggle_dl .item .info {display:inline-block; vertical-align:middle; width:calc(100% - 125px); font-size:0;padding-left:2rem; } .gallery-toggle .toggle_dl .item .info li { display:inline-block; vertical-align:top; width:50%; margin:0.75rem 0; } .gallery-toggle .toggle_dl .item .info li span {display:inline-block; vertical-align:top; font-size:1rem; font-weight:500; color:#777; } .gallery-toggle .toggle_dl .item .info li span:first-child {width:100px; } .gallery-toggle .toggle_dl .item .info li span:first-child + span {width:calc(100% - 100px); color:#333; } .gallery-toggle .toggle_dl .content {position:relative; width:100%; margin-top:2rem; font-size:1rem; line-height:1.8em; color:#333; font-weight:500; padding:1.8rem 2rem; border-radius:0.5rem; background-color:#f7f9fb; font-family:'Spoqa Han Sans' } @media all and (max-width:1024px) { .sangsa-info-wrap .sangsa-info { border-radius:8px; padding:3.2rem 1.5rem 2rem; gap:1.5rem;align-items: flex-start; } .sangsa-info-wrap .sangsa-info figure { width:100px; height:125px; } .sangsa-info-wrap .sangsa-info ul { width:calc(100% - 100px); } .sangsa-info-wrap .sangsa-info ul li {width:100%; margin:0; margin-bottom:0.5rem; font-size:0; } .sangsa-info-wrap .sangsa-info ul li:last-child {margin-bottom:0} .sangsa-info-wrap .sangsa-info ul li:nth-child(2n+1) {width:100%; } .sangsa-info-wrap .sangsa-info ul li span {font-size:0.915rem; } .sangsa-info-wrap .sangsa-info ul li span:first-child {width:80px; } .sangsa-info-wrap .sangsa-info ul li span:first-child + span {width:calc(100% - 80px); } .sangsa-info-wrap .sangsa-info button.carlist-sangsa {margin-left:3px;font-size:0.75rem; font-weight:normal; height:22px;line-height:21px;} /* 회원사 - 협력업체 갤러리게시판 */ .gallery-toggle .toggle_dl { border-radius:8px; padding:1rem 1rem 1rem; } .gallery-toggle .toggle_dl .item figure { width:90px; height:90px; border-radius:0.3rem; } .gallery-toggle .toggle_dl .item .info { width:calc(100% - 90px); padding-left:0.8rem; } .gallery-toggle .toggle_dl .item .info li { width:50%; margin:0.35rem 0; } .gallery-toggle .toggle_dl .item .info li span { font-size:0.9rem; } .gallery-toggle .toggle_dl .item .info li span:first-child {width:60px; } .gallery-toggle .toggle_dl .item .info li span:first-child + span {width:calc(100% - 60px); } .gallery-toggle .toggle_dl .content { margin-top:1rem; font-size:0.9rem; line-height:1.5em; padding:1rem; border-radius:0.3rem; } } @media all and (max-width:677px) { .dealer-cont { gap:0rem; border-radius:8px; padding:1rem; margin-bottom:2.5rem; } .dealer-cont figure{ width:100px; height:100px; background-size:100% } .dealer-cont dl {width:calc(100% - 100px)} .dealer-cont dl dt{font-size:0.965rem; } .dealer-cont dl dd {font-size:0.815rem; padding-top:0.5rem; line-height:1.5em; } .sangsa-info-wrap .search-box { margin:2rem auto -1.75rem; width:90%;padding:0rem 0.625rem 0rem 1rem; height:3.125rem;} .sangsa-info-wrap .search-box select {font-size:0.9rem; height:2.5rem;} .sangsa-info-wrap .search-box .btn-search {background-size:auto 25px; } } @media all and (max-width:500px) { .sangsa-info-wrap .search-box { margin:1.5rem auto -1.5rem; } .sangsa-info-wrap .sangsa-info {flex-direction: column; margin-top:0rem;} .sangsa-info-wrap .sangsa-info figure {margin:0 auto; } .sangsa-info-wrap .sangsa-info ul { width:100%;} /* 회원사 - 협력업체 갤러리게시판 */ .gallery-toggle .toggle_dl { padding:0.8rem; margin:0; border-radius:0 } .gallery-toggle .toggle_dl .item:after {font-size:1.1rem; } .gallery-toggle .toggle_dl .item figure { width:70px; height:70px; vertical-align:top; } .gallery-toggle .toggle_dl .item .info { width:calc(100% - 70px); vertical-align:top; } .gallery-toggle .toggle_dl .item .info li { width:100%; margin:0; margin-bottom:0.6rem; } .gallery-toggle .toggle_dl .item .info li span { font-size:0.815rem; } .gallery-toggle .toggle_dl .item:after { bottom:-3px;} } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 커뮤니티 ///////////////////////////////////////////////////////////////////////////////////////////*/ .result-bbs {display:flex;justify-content: space-between;align-items: center; } /* 자동차뉴스 */ .gallery-list {display:flex; width:100%;padding-top:2.5rem; font-size:0; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;gap:1.6rem; } .gallery-list .item { width:calc(25% - 1.2rem); padding:0; border-radius:0.8rem; } .gallery-list .item a {display:block;} .gallery-list .item figure {display:block; height:180px; border-radius:8px; overflow:hidden; background-color:#f9f9f9 ; background-repeat:no-repeat; background-position:center center; background-size:cover;transition: all 0.2s ease-in; } .gallery-list .item a:hover figure {box-shadow:3px 3px 10px rgba(0,0,0,0.09)} .gallery-list .item .title {display:block; margin-top:1rem; line-height:1.6rem; color:#222; font-size:1.065rem; font-weight:500; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .gallery-list .item a:hover .title {color:var(--txt-default)} .gallery-list .item .date {display:block; margin-top:0.65rem; color:#999; font-size:0.915rem; font-weight:500; } .gallery-list .item .date span {display:inline-block; vertical-align:top; margin-top:3px; width:1px; height:15px; background-color:#ddd; margin:0 1rem} .gallery-list.general { flex-direction: row; gap:0.65rem; } .gallery-list.general .item {width:99.8%; } .gallery-list.general .item a { position:relative; border-radius:8px; outline: 1px solid #e5e8ed; border: 2px solid transparent;padding:1.2rem 1rem;display:flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; align-items: center;justify-content: center; } .gallery-list.general .item a:after {content: "\e93e"; font-family:'xeicon';position:absolute; right:2rem; top:50%; margin-top:-15px; color:transparent; font-size:1.5rem; width:30px; height:30px; line-height:30px; text-align:center;transition: all 0.2s ease-in; } .gallery-list.general .item a:hover {outline: 0px solid transparent;border: 2px solid var(--txt-default); box-shadow:3px 3px 15px rgba(0,67,255,0.1)} .gallery-list.general .item a:hover:after {color:var(--txt-default);right:1.3rem; } .gallery-list.general .item .date { margin:0; width:8rem; text-align:center;font-family:'Spoqa Han Sans' ; } .gallery-list.general .item .date strong { display:block;color:#666; font-size:2rem; line-height:2.05rem; letter-spacing:0.05em;color:#222} .gallery-list.general .item .date em{ display:block; font-size:0.85rem; line-height:1.3em; color:#999; padding-top:0.35rem; letter-spacing:-.04em !important;} .gallery-list.general .item .notice { display:inline-block !important; font-size:14px !important; color:#333; font-family:'NotoSans'; height:26px !important; line-height:26px !important; border-radius:60px; padding:0 15px !important; background-color:#edf4fd; } .gallery-list.general .item a .cont {width:calc(100% - 8rem); margin-top:0; padding-left:1rem; } .gallery-list.general .item a .cont .title {margin-top:0} .gallery-list.general .item a .cont .name {display:block; margin-top:0.65rem; color:#999; font-size:0.915rem; font-weight:500; } .gallery-list.general .item a .cont .name span {display:inline-block; vertical-align:top; margin-top:3px; width:1px; height:15px; background-color:#ddd; margin:0 1rem} @media all and (max-width:1320px) { .gallery-list { gap:1.1rem; } } @media all and (max-width:1024px) { .gallery-list {flex-wrap: wrap; gap:2rem 1rem; } .gallery-list .item { width:calc(33.3% - 0.68rem); } } @media all and (max-width:677px) { .gallery-list { gap:0.8rem; padding-top:1rem; } .gallery-list .item { width:calc(50% - 0.4rem); } .gallery-list.general .item a { border-radius:6px;border: 1px solid transparent;padding:1rem 0.65rem;} .gallery-list.general .item a:hover {border: 1px solid var(--txt-default); } .gallery-list.general .item a:after { right:1rem; margin-top:-10px;font-size:1rem; width:20px; height:20px; line-height:20px; } .gallery-list.general .item a:hover:after { right:0.5rem; } .gallery-list.general .item .date {display:none;} .gallery-list.general .item a .cont {width:100%; padding-left:0.3rem; padding-right:1.5rem;} .gallery-list.general .item a .cont .title {font-size:0.9rem;} .gallery-list.general .item a .cont .name { margin-top:0.3rem; font-size:0.815rem; } } @media all and (max-width:480px) { .gallery-list {gap:2rem 0;} .gallery-list .item { width:100% !important; } } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 게시판리스트 - 중고차상담 ///////////////////////////////////////////////////////////////////////////////////////////*/ .board-wrap:after {content:''; clear:both; display:block; width:100%; } .bbs-search {clear:both; padding-top:2.5rem; margin-bottom:0rem; display:block; text-align:center; position:relative;} .bbs-search .title { display:block; font-size:1.563rem; line-height:2rem; color:#333; font-weight:400; } .bbs-search .title span {display:inline-block;} .bbs-search .row {display:flex; width:580px; gap:0.5rem; flex-direction: row; justify-content: center; flex-wrap: nowrap;align-items: center; font-size:0;margin:0 auto; } .bbs-search .row input[type="text"], .bbs-search .row select, .bbs-search .row button {display:inline-block; border-radius:6px; height: 3.438rem; line-height:3.4rem;border:0; font-size:1rem; font-weight:500 } .bbs-search .row input[type="text"], .bbs-search .row select { width:17rem; border:2px solid #f1f3f6; background-color:#f1f3f6; color:#555; padding-left:1.2rem; background-position:calc(100% - 18px); } .bbs-search .row input[type="text"] {width:100%; } .bbs-search .row select:focus, .bbs-search .row input[type="text"]:focus { border:2px solid var(--txt-default); background-color:rgba(255,255,255,0.5)} .bbs-search .row button { background-color:var(--txt-default); width:8rem; color:#fff; font-weight:bold; } .txt-pc {display:inline-block;} .bbs-list {position:relative; width:100%; border-top:1px solid #666;margin-top:0rem; font-size:0.85rem; font-weight:500;} .bbs-list select {border:0; background-color:transparent; font-size:1rem; font-weight:400; width:auto;font-size:0.9rem; min-width:80px; letter-spacing:-.06em; } .bbs-list input[type=checkbox] + label {padding-right:0px;} .bbs-list th { padding:0.95rem 0.15rem; background-color:#f8f8f8; border-bottom:1px solid #e0e0e0; text-align:center; } .bbs-list td {padding:0.65rem 0.15rem; border-bottom:1px solid #e0e0e0; text-align:center; } .bbs-list td .tbh-title {display:none; } .bbs-list td .mb-wrap {display:flex; justify-content: space-between; align-items: center; } .bbs-list a {display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } .bbs-list a:hover {color:var(--txt-default)} .bbs-list .cellcheck {width:35px; } .bbs-list .cellN {width:3.7rem; } .bbs-list .cellSort {width:10%; } .bbs-list .cellModel {width:8%; } .bbs-list .cellTitle {width:*; } .bbs-list .cellName {width:5.625rem; } .bbs-list .cellDate {width:7.25rem; } .bbs-list .cellState {width:6.25rem; } .bbs-list tbody .cellTitle {text-align:left; padding-left:0.5rem;} .bbs-list.consultMy .cellcheck {width:35px; } .bbs-list.consultMy .cellN {width:50px; } .bbs-list.consultMy .cellSort {width:70px; } .bbs-list.consultMy .cellModel {width:80px; } .bbs-list.consultMy .cellTitle {width:*; } .bbs-list.consultMy .cellName {width:100px; } .bbs-list.consultMy .cellDate {width:80px; } .bbs-list.consultMy .cellState {width:80px; } @media screen and (max-width:1024px){ .bbs-search {padding-bottom:1rem;} .bbs-search .title { font-size:1.313rem; } .bbs-search .row {padding:0 0rem; margin-top:1rem; } .bbs-list {margin-top:1rem; font-size:0.85rem;} .bbs-list th, .bbs-list td {padding:0.65rem 0.25rem; } } @media screen and (max-width:768px){ .bbs-search .row select, .bbs-search .row button {font-size:0.95rem;} .bbs-search .row input[type="text"], .bbs-search .row select, .bbs-search .row button {height:3.125rem; line-height:3.125rem;} } @media screen and (max-width:677px){ .txt-pc {display:none !important;} .bbs-search {font-size:0; width:100%;position:relative; margin:1.5rem 0 0; padding:0; } .bbs-search .title { position:absolute; bottom:-36px; left:10px; font-size:0.85rem; line-height:1.2rem; text-align:left; } .bbs-search .row {width:100%; padding:0; margin:0; gap:0} .bbs-search .row select { padding:0 10px; min-width:6.25rem;width:10rem; font-size:0.9rem; border:2px solid #f6f6f6; background-position:calc(100% - 5px); margin:0; border-radius:0 } .bbs-search .row button {padding:0;min-width:3.5rem; width:6.5rem;border-radius:0; } .bbs-search .row input[type="text"] { margin:0; padding:0 0px;border-radius:0; } .bbs-search thead {display:none;} .bbs-list {margin-top:5px; } .bbs-list select {width:auto; min-width:auto; } .page-img .bbs-search {padding:20px 0px 0.7rem;} .page-img .bbs-search .row {border-radius:5px; overflow:hidden;} .page-img .resultWrap .align-wrap{ justify-content: flex-end; } .page-img .resultWrap {padding:0} } @media screen and (max-width:500px){ .bbs-list td {padding-left:0; padding-right:0} .bbs-list .cellcheck {width:25px !important;} .bbs-list .cellSort {width:60px;} .bbs-list .cellName {width:60px;} .bbs-list .cellState {width:80px; } .bbs-list.bs-consult .cellN, .bbs-list.bs-consult .cellModel, .bbs-list.bs-consult .cellDate{display:none } .bbs-list.consultMy .cellN, .bbs-list.consultMy .cellSort, .bbs-list.consultMy .cellModel {display:none } .bbs-list.consultMy .cellTitle {width:*; } .bbs-list.consultMy .cellName {width:60px; } .bbs-list.consultMy .cellDate{display:none } .bbs-list.consultMy .cellState {width:80px; } .bbs_myMain tr th:first-child, .bbs_myMain tr td:first-child {display:none;} } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 게시판 view ///////////////////////////////////////////////////////////////////////////////////////////*/ .bbs-view {padding-top:3rem;} .bbs-view .item-top {display:block; border-bottom:0px solid #ddd; padding-bottom:0rem; } .bbs-view .item-top.noline {padding:0; border:0; text-align:left;} .bbs-view .title { font-size:1.65rem; line-height:2.4rem; color:#222; font-weight:700; } .bbs-view .info {display:block; margin-top:1rem; font-size:1rem; color:#666; font-family:'Spoqa Han Sans'} .bbs-view .info span {display:inline-block; margin-left:1.2rem; font-size:1rem; font-weight:500; } .bbs-view .info span:first-child {margin-left:0} .bbs-view .consult-info {display:block; margin-top:1.5rem; border-radius:7px; background-color:#f2f6fa;border:1px solid #e4ecf6; padding:0.85rem 1.5rem; font-family:'Spoqa Han Sans' } .bbs-view .consult-info div.row {display:block; border-top:1px solid #dde4f1;padding:1rem; font-size:0; } .bbs-view .consult-info div.row:first-child {border:0} .bbs-view .consult-info div.row .item{display:inline-block; vertical-align:top; width:33.3%; font-size:1rem; font-weight:500; margin:0.55rem 0 } .bbs-view .consult-info div.row .item span {display:inline-block; vertical-align:middle; color:#666 } .bbs-view .consult-info div.row .item span:first-child {width:110px; } .bbs-view .consult-info div.row .item span:first-child + span{width:calc(100% - 110px); color:#000; letter-spacing:0 } .bbs-view .content { margin-top:0rem; padding:2.5rem 0.5rem; font-size:1.085rem; line-height:1.9rem; min-height:400px; border-bottom:1px solid #eee; } .bbs-view .content img {position:relative; /*width:90%;*/ margin:0 auto; } .bbs-view textarea { display:block; margin-top:2rem; margin-bottom:2rem; padding:1rem 1.5rem; font-size:0.95rem; border-radius:7px !important; border:2px solid transparent; background-color:#fff; color:#333; line-height:1.9rem; height:22rem; } .bbs-view textarea:focus {border-color:#fff; background-color:#fff;} .bbs-view textarea:read-only {border-radius:0; border-bottom:1px solid #dedede; padding:1rem; margin-top:0.5rem} textarea.answer { display:block; margin-top:0rem; margin-bottom:2rem; padding:0.65rem 1rem 0.65rem; font-size:0.95rem; background-color:#fafafa; border-radius:7px !important; border:2px solid transparent; color:#333; line-height:1.9rem; height:15rem; } textarea.answer:focus {border-color:var(--txt-default); background-color:#fff;} @media screen and (max-width:1024px){ .bbs-view .consult-info { padding-top:1rem; border-radius:5px; padding:0.65rem 1rem; } .bbs-view .consult-info div.row { padding:0.5rem; } .bbs-view .consult-info div.row .item{width:33.3%; font-size:0.9rem; margin:0.35rem 0 } .bbs-view .consult-info div.row .item span:first-child {width:90px; } .bbs-view .consult-info div.row .item span:first-child + span{width:calc(100% - 90px); } } @media screen and (max-width:768px){ .bbs-view .consult-info div.row .item{width:50%; } .bbs-view .content img {width:100% !important; height:auto !important} } @media screen and (max-width:677px){ .bbs-view {padding-top:1.8rem;} .bbs-view .info span {margin-left:1rem; font-size:0.85rem; } .bbs-view .title { font-size:1.65rem; line-height:2.1rem; padding:0 10px; } .bbs-view .info { margin-top:0.5rem; font-size:0.9rem; padding:0 10px; } .bbs-view .consult-info div.row { padding:0.5rem 0; } .bbs-view .content {padding:1.2rem 0.5rem; font-size:0.95rem; line-height:1.6rem; min-height:250px;} } @media screen and (max-width:500px){ .bbs-view {padding-top:1.5rem;} .bbs-view .title { font-size:1.25rem; line-height:1.4rem;} .bbs-view .consult-info div.row .item{font-size:0.85rem; width:100%;} .bbs-view .consult-info div.row .item span:first-child {width:80px; } .bbs-view .consult-info div.row .item span:first-child + span{width:calc(100% - 80px); } } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 오토서비스 ///////////////////////////////////////////////////////////////////////////////////////////*/ .service-cont {padding-top:0rem;} .service-cont .title {display:block; font-size:1.688rem; line-height:1.8rem;color:#333; font-weight:400; padding-top:60px; margin-bottom:2rem; } .service-cont .title strong {font-weight:bold;} .service-cont .title.pdt0 {padding-top:0} .service-cont .s-title {font-size:1.165rem; font-weight:bold; color:#333; margin-top:1.5rem;padding-top:2rem; } .service-cont .s-title:first-child {margin-top:0} .service-cont .n-title {font-size:1.125rem;line-height:1.3rem; font-weight:bold; color:var(--txt-default); margin:1rem 0;} .service-cont .txtCont {display:block; position:relative; padding:1.5rem 0 0.9rem; clear:both; border:0px solid #f00} .service-cont .txtCont.first{padding-top:0} .service-cont .txtCont.pd0 {padding:0 !important} .service-cont .txtCont h1 {font-size:1.125rem; font-weight:bold; color:#333; margin-top:1.5rem;padding-top:2rem; } .service-cont .txtCont h1:first-child {padding-top:0; margin-top:0} .service-cont .txtCont h2 {font-size:1.05em; font-weight:bold; color:#333; margin-top:0.5rem; } .service-cont .txtCont p {font-size:0.98rem; padding-top:0.75rem; color:#666; line-height:1.5em; } .service-cont .txtCont p.sm {font-size:0.9rem; } .service-cont .txtCont ul li {display:block; padding:1rem 0; } .service-cont .t-note {display:inline-block; margin-left:5px; } .service-cont .t-note em {display:inline-block; height:30px; line-height:30px; font-size:0.815rem; font-weight:500; color:var(--txt-default);background-color:#fff; border:1px solid #ddd; padding:0 10px; border-radius:6rem; } .service-cont dl.type1 {display:block; padding-left:0.15rem;} .service-cont dl.type1 dt {font-size:1.1rem; line-height:1.3rem; font-weight:bold; color:var(--txt-default); margin-top:1.5rem; } .service-cont dl.type1 dd {font-size:0.985rem; color:#666; padding-top:0.5rem; line-height:1.5rem; } .service-cont dl.type1 dt:first-child {margin-top:0} .service-cont section.bg1 {display:block; clear:both; margin-top:3rem; background-color:#e8edf8; padding-bottom:60px; } .service-cont section.bg2 {display:block; clear:both; margin-top:3rem; padding-bottom:60px; background:url('/images/sub/bg_rate.jpg') no-repeat center ; background-size:cover; } .service-cont section.bg2 .title {color:#fff !important} .service-cont section:after {content:''; clear:both; width:100%; display:block} .service-cont .item {font-size:0;} .service-cont .item li {display:block; background-color:#f5f6fb; padding:2.5rem 3rem; margin-top:1.3rem; font-size:0; border-radius:12px; } .service-cont .item li:nth-child(1) {margin:0} .service-cont .item li figure {display:inline-block; vertical-align:middle; width:170px; height:170px; margin:0; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size: auto} .service-cont .item li:nth-child(1) figure {background-image:url('/images/sub/icon_busin_type1.png')} .service-cont .item li:nth-child(2) figure {background-image:url('/images/sub/icon_busin_type2.png')} .service-cont .item li:nth-child(3) figure {background-image:url('/images/sub/icon_busin_type3.png')} .service-cont .item li dl {display:inline-block; vertical-align:middle; width:calc(100% - 170px); padding:0; margin:0;padding-left:1.6rem;} .service-cont .item li dl dt { display:block; font-size:1.25rem; line-height:1.25rem; color:#222; font-weight:bold; } .service-cont .item li dl dd {display:block; padding:0; margin-top:1.2rem; color:#5f626b; line-height:1.6em; font-size:1rem; letter-spacing:-.06em; font-family:'Spoqa Han Sans'} .service-cont .item.type2 {display:flex; width:100%; flex-wrap: wrap;justify-content: space-between;align-items: stretch;} .service-cont .item.type2 li {display:inline-block; vertical-align:top !important; width:calc(50% - 10px); margin:0 0 20px 20px; padding:1.5rem 2.5rem 2rem; border-radius:12px; background-color:#fff; } .service-cont .item.type2 li:nth-child(1), .service-cont .item.type2 li:nth-child(2n+1) {margin-left:0; } .service-cont .item.type2 li:nth-child(7) {width:100%; margin-left:0 !important; } .service-cont .item.type2 li figure {display:block; width:auto; height:60px; background-position:left ; border-radius:0; background-repeat:no-repeat; background-size: auto} .service-cont .item.type2 li dl {display:block; width:100%; padding:0; padding-top:1rem; } .service-cont .item.type2 li dl dt{color:var(--txt-default); font-weight:bold; } .service-cont .item.type2 li figure {background-size:auto 60px; } .service-cont .item.type2 li:nth-child(1) figure { background-image:url('/images/sub/icon_check_tip1.png')} .service-cont .item.type2 li:nth-child(2) figure { background-image:url('/images/sub/icon_check_tip2.png')} .service-cont .item.type2 li:nth-child(3) figure { background-image:url('/images/sub/icon_check_tip3.png')} .service-cont .item.type2 li:nth-child(4) figure { background-image:url('/images/sub/icon_check_tip4.png')} .service-cont .item.type2 li:nth-child(5) figure { background-image:url('/images/sub/icon_check_tip5.png')} .service-cont .item.type2 li:nth-child(6) figure { background-image:url('/images/sub/icon_check_tip6.png')} .service-cont .item.type2 li:nth-child(7) figure { background-image:url('/images/sub/icon_check_tip1.png')} .service-cont .item.type3 { border-radius:12px; padding:2rem 3rem; background-color:#f5f7fb; display:flex; width:100%;justify-content: space-between; flex-direction: row; } .service-cont .item.type3 div {width:auto; } .service-cont .item.type3 div .txt-title { position:relative; font-size:1.25rem; line-height:1.25rem; font-weight:600; color:#222; letter-spacing:-.06em; } .service-cont .item.type3 div ol {padding-top:1.3rem; font-size:0; width:100%; } .service-cont .item.type3 div ol li {display:block; width:100%; font-size:1rem; line-height:1.3em; color:#666; padding:0; padding-left:10px; position:relative; margin:0; margin-bottom:0.65rem; } .service-cont .item.type3 div ol li:before {content:''; position:absolute; left:2px; top:7px; width:4px; height:4px; border-radius:5px; background-color:#9fa8bd;} .service-cont .item.type4 { border-radius:12px; font-size:0; margin-top:2rem; display:flex; width:100%; flex-start;flex-wrap: wrap; justify-content: space-between; flex-direction: row; align-items: stretch; gap:2rem;} .service-cont .item.type4 li {width:calc(50% - 1rem); border-radius:0.85rem; padding:1.5rem 2rem; background-color:#f3f5f9; margin:0 !important;} .service-cont .item.type4 li h2 {font-size:1.125rem; font-weight:bold; color:#222; line-height:1.5rem; margin-bottom:1rem; } .service-cont .item.type4 li p {position:relative; font-size:0.95rem; color:#666; font-weight:500; line-height:1.5em; margin:0.65rem 0; padding-left:0.85rem; letter-spacing:-.06em; } .service-cont .item.type4 li p:before {content:''; position:absolute; left:3px; top:9px; width:5px; height:5px; border-radius:1rem; background-color:#9fa8bd;} .service-cont .item.type4 li p.note {font-size:0.895rem; font-weight:500; padding-top:0.5rem;padding-left:0 } .service-cont .item.type4 li p.note:before {display:none; } .service-cont .item.type4 li.wide {width:100%; } .service-cont .item.type4 dl {display:flex; flex-direction: row; margin:0; padding:0; width:100%; gap:1.5rem; justify-content: space-between; flex-wrap: nowrap;align-items: stretch; } .service-cont .item.type4 dl dd {position:relative;width:25%; margin:0; background-color:#fff; padding:1.5rem; border-radius:0.654rem; font-size:1.05rem; font-weight:500; font-weight:bold; color:var(--txt-default); text-align:center; font-family:'NotoSans'} .service-cont .item.type4 .item-list {display:flex; flex-wrap: wrap;flex-direction: row;gap:0.35rem; margin-bottom:1rem} .service-cont .item.type4 .item-list span {height:30px; line-height:30px; background-color:#fff; border-radius:6rem; padding:0 0.98rem; font-size:0.915rem; font-weight:500;} .service-cont .item.type4 .item-list.process { flex-direction:column;gap:0.5rem;} .service-cont .item.type4 .item-list.process span {width:100%;padding:0 1.35rem; height:38px; line-height:38px; } .service-cont .item.type4 .item-list.process span strong {color:var(--txt-default)} .service-cont .car-rate {display:block; border-radius:12px; margin-top:1.5rem; padding:5rem 3rem; margin:5rem 0 5rem; background-color:rgba(255,255,255,0.2)} .service-cont .car-rate p {font-size:1rem; font-weight:500; color:#fff; padding-top:1.2rem; line-height:1.7rem; } .service-cont .car-rate p:first-child {padding-top:0} .service-cont .car-rate p span {color:#00f4fd} /* 중고차 구입요령 */ .service-cont .process-car {margin:2rem 0 3rem; text-align:center; font-size:0; } .service-cont .process-car li {display:inline-block; vertical-align:top; position:relative; width:16.6%;} .service-cont .process-car li:after {content:''; position:absolute; right:-10px; top:30%; width:20px; height:20px; background:url('/images/sub/arrow2.png') no-repeat center; } .service-cont .process-car li:last-child:after {display:none;} .service-cont .process-car li dl{padding-top:1rem;} .service-cont .process-car li dl dt {font-size:1.05rem; line-height:1.3em; font-weight:bold; color:var(--txt-default); text-transform:uppercase; } .service-cont .process-car li dl dd {padding-top:0.5rem; font-size:1rem; line-height:1.3em; font-weight:500; color:#222; letter-spacing:-.06em; } .service-cont .process-car.n5 { border-radius:0.65rem; padding:2rem; border:1px solid #eee;} .service-cont .process-car.n5 li {width:20%; margin-bottom:0} .service-cont .item.typecircle { margin-top:2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap:5rem; } .service-cont .item.typecircle li { position: relative; vertical-align:middle;width:16rem; height:16rem; margin:0;padding:0; border-radius:50%;background-color:#007eff; box-sizing: border-box; text-align: center; } .service-cont .item.typecircle li:last-child {margin-right:0} .service-cont .item.typecircle li p { display:block; text-align:center; vertical-align:middle; padding:6.25rem 2rem; font-size:1.1rem; line-height:1.7rem; color:#fff; font-weight:bold; } .service-cont .item.typecircle.mgb {margin-bottom:10rem; 0} .service-cont .quality-n { font-size:0;display:flex; justify-content:start; flex-direction: row;align-items: stretch;gap:5rem; } .service-cont .quality-n dl { padding:1rem 0.5rem; border:0px solid #e4e5e7; } .service-cont .quality-n dl dt {font-size:1.05rem; line-height:1.3rem; font-weight:600; color:#333; } .service-cont .quality-n dl dt em {font-size:85%;color:#666; font-weight:500;font-family:'NotoSans';} .service-cont .quality-n dl dd {margin-top:0.5rem;font-size:1.45rem;line-height:1.5rem; font-weight:bold; color:var(--txt-default);font-family:'Roboto';} table.table-scroll { font-family: 'Spoqa Han Sans'; position:relative; margin: 0; border: none; border-collapse:separate; border-spacing: 0; table-layout: fixed !important; word-break:keep-all; } table.table-scroll thead th { position: sticky; position: -webkit-sticky; top: 0px; z-index: 1; width:120px; padding:1rem 0.125rem; border-top:1px solid #555; border-bottom:1px solid #ccc; border-right:1px solid #ebebec; font-weight:normal; background-color:#f8f8f8; } table.table-scroll thead th:first-child { position: sticky; position: -webkit-sticky; left: 0; top:0; width:100px; z-index: 3;border-right:1px solid #ccc; } table.table-scroll thead th:last-child {border-right:0;} table.table-scroll th {font-size:0.90rem; } table.table-scroll tbody th { position: sticky; left: 0; font-size:0.90rem;width:100px; padding:0.85rem 5px; z-index: 2; border-right:1px solid #ccc; background-color:#f8f8f8; font-weight:normal; border-bottom:1px solid #ebebec; } table.table-scroll tbody td {text-align:right;font-size:0.90rem;width:120px; padding:0.85rem 5px;border-left:0; border-right:1px solid #ebebec;border-bottom:1px solid #ebebec; } table.table-scroll tbody td:last-child {border-right:0;} [role="region"][aria-labelledby][tabindex] { width: 100%;/* max-height: calc(100vh - 460px); */ overflow:scroll; } [role="region"][aria-labelledby][tabindex]:focus { outline: 0;} .table.phone thead th:first-child, .table.phone tbody th {width:90px; } .table.phone tbody td { text-align:center !important; width:30%} .pnTop {display:flex; align-items: baseline; width:100%; padding-right:150px;min-height:110px; padding-top:2.5rem; padding-bottom:10px; background:url('/images/sub/img_call.png') no-repeat right 0 ; background-size:auto 110px; } .public-number {position:relative; width:100%; border-top:1px solid #555; } .public-number li {display:block; width:100%; font-size:0; text-align:center;} .public-number li.area-title { background-color:#f8f8f8; } .public-number li.area-title ul {display:table; width:100%; } .public-number li.area-title ul li {display:table-cell; font-weight:500; color:#333; } .public-number li ul li {display:inline-block; width:25%; padding:1.1rem 0.2rem; font-size:1rem; border-left:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8 } .public-number li ul li:first-child {border-left:0 !important} .public-number li.area-name {background-color:#fff;} .public-number li.area-name ul li .part-number {font-family: 'Spoqa Han Sans'; } #tab_contents {position:relative; display:block; width: 100%; z-index:10} #tab_contents ul.tabs {margin:0 0 0 0px; padding: 0;list-style: none; font-size:0; width:100%; height:60px;} #tab_contents ul.tabs li {position: relative; display:inline-block;width:33.3%; margin-left:-1px; height:60px;text-align:center; overflow: visible;} #tab_contents ul.tabs li:first-child {margin-left:0; } #tab_contents ul.tabs li a { text-decoration: none; position:relative; height:60px;line-height:60px; display: block;font-weight:500;border:1px solid #ddd; font-size:16px; letter-spacing:-.04em;; transition: all 0.3s ease-out; } #tab_contents ul.tabs li.active a {height:60px; line-height:60px;color:#000; border:1px solid #222; border-bottom:1px solid #fff; position:relative; font-weight:500; } #tab_contents .tab_container1 { clear: both;display:block; width:100%; padding:15px 0 0 ; } #tab_contents .tab_content { position:relative; display:block; width:100%; transition: all 0.3s ease-out;} @media all and (max-width:1320px) { .service-cont .inr {padding:0 10px;} .service-cont .title {font-size:1.5rem; line-height:1.5rem; margin-top:3rem; margin-bottom:1.5rem; } .service-cont .item li {padding:1.5rem 2rem; margin-top:1rem;} .service-cont .item li figure {width:120px; height:120px;background-size: auto 55%} .service-cont .item li dl { width:calc(100% - 120px); padding-left:1.1rem;padding-top:1rem; } .service-cont .item li dl dt { font-size:1.125rem; line-height:1.125rem;} .service-cont .item li dl dd {margin-top:1rem; line-height:1.6em; font-size:0.95rem;} /* 중고차 구입요령 */ .service-cont .process-car li img {width:60%;} .service-cont .item.typecircle { margin-top:1rem; gap:2rem; } .service-cont .item.typecircle.mgb {margin-bottom:0} .pnTop {padding-top:1rem; background-position:right center; } } @media all and (max-width:1024px) { .service-cont .title {font-size:1.25rem } .service-cont .txtCont p {font-size:0.9rem; line-height:1.5rem; } .service-cont .item li {padding:1.1rem 1.5rem; margin-top:0.9rem;} .service-cont .item li figure {width:100px; height:100px;vertical-align:top; } .service-cont .item li dl { width:calc(100% - 100px);vertical-align:top; padding-left:1rem; } .service-cont .item.type2 li {width:calc(50% - 5px); margin:0 0 10px 10px; padding:1rem; border-radius:8px; } .service-cont .item.type3 { border-radius:8px; padding:1rem 1rem;} .service-cont .item.type3 div .txt-title { position:relative; font-size:1rem; } .service-cont .item.type3 div ol {padding-top:1rem;} .service-cont .item.type3 div ol li { font-size:0.925rem; line-height:1.4em;} .service-cont .item.type4 { border-radius:8px; gap:1rem;} .service-cont .item.type4 li {width:calc(50% - 0.5rem); padding:1rem; } .service-cont .item.type4 li h2 {font-size:1.05rem; margin-bottom:0.8rem; } .service-cont .item.type4 li p { font-size:0.9rem; line-height:1.4em; margin:0.45rem 0; } .service-cont .item.type4 dl {gap:0.5rem; } .service-cont .item.type4 dl dd {padding:0.6rem; font-size:0.915rem; } .service-cont .process-car.n5 { padding:1rem; } .service-cont .process-car.n5 li dl dt {font-size:0.85rem; } .service-cont .process-car.n5 li dl dd {font-size:0.85rem; } .service-cont .t-note {display:block; margin-top:0.5rem; margin-left:0;} .service-cont .t-note em { height:26px; line-height:24px; font-size:0.815rem; padding:0 0.8rem; } .service-cont section.bg2 { margin-top:2rem; padding-bottom:30px; } .service-cont .car-rate { border-radius:8px; padding:1rem 1rem; margin:2rem 0 2rem; } .service-cont .car-rate p {font-size:0.9rem; padding-top:0.8rem; line-height:1.5rem; } /* 중고차 구입요령 */ .service-cont .process-car {padding:0 1rem} .service-cont .process-car li { width:33.3%; margin-bottom:2rem;} .service-cont .item.typecircle {gap:1rem; } .service-cont .item.typecircle li { width:10rem; height:10rem; } .service-cont .item.typecircle li p { padding:3rem 1.5rem; font-size:0.95rem; line-height:1.5rem; } .public-number li ul li { padding:1rem 0; font-size:0.915rem; } } @media all and (max-width:677px) { .service-cont {padding-top:0;} .service-cont .title {padding-top:30px; margin-top:0; margin-bottom:1rem; } .service-cont .n-title {font-size:0.95rem; margin-bottom:0.5rem; } .service-cont .item li {padding:1.5rem; margin-top:0.65rem;} .service-cont .item li figure {display:none;} .service-cont .item li dl {width:100%; padding:0} .service-cont .item li dl dt {color:var(--txt-default)} .service-cont .item li dl dd {margin-top:0.85rem; font-size:0.90rem;} .service-cont .item.type3 {flex-direction: column;} .service-cont .quality-n { flex-direction: column; gap:1.5rem; } .service-cont .quality-n dl { padding:0rem 0.5rem 0 0; border:0px solid #e4e5e7; } .service-cont .quality-n dl dt {font-size:0.85rem;} .service-cont .quality-n dl dd {font-size:1.2rem;} .public-number {border:0 } .public-number li ul li {display:block; width:100%; border:0 !important; } .public-number li.area-name {margin-bottom:1rem; } .public-number li.area-name ul li.branch-name {background-color:#f4f4f4; border-radius:6px; margin-top:0.55rem; padding:0.65rem 0;margin-bottom:0rem; font-size:0.95rem; border:0 !important; } .public-number li.area-name ul li {padding:1rem 0.35rem; font-size:0.9rem; border-bottom:1px solid #eee !important; letter-spacing:-.06em;} .public-number li.area-name ul li:last-child {border-bottom:0 !important;} .public-number li.area-name ul li.branch-name {text-align:center; font-weight:bold; } .public-number li.area-name ul li .part-title, .public-number li.area-name ul li .part-number {display:inline-block; vertical-align:top;text-align:left; } .public-number li.area-name ul li .part-title {width:145px; color:#666; } .public-number li.area-name ul li .part-number { min-width:150px; padding-left:0.3rem; font-weight:bold ; color:#111; letter-spacing:0; } } @media all and (max-width:500px) { /* 중고차 구입요령 */ .service-cont .process-car {padding:0 0.5rem} .service-cont .process-car li { width:50%; margin-bottom:1.5rem;} .service-cont .process-car li dl dt {font-size:0.95rem;} .service-cont .process-car li dl dd { font-size:0.95rem; } .service-cont .item.type2 li {width:100%; margin:0 0 10px 0px; padding:1rem; } .service-cont .item.type4 { border-radius:0; margin-top:0rem;gap:0.8rem;} .service-cont .item.type4 li {width:100% ; border-radius:0.35rem; padding:1rem; } .service-cont .item.type4 dl {flex-wrap: wrap;} .service-cont .item.type4 dl dd {width:calc(50% - 0.3rem)} .service-cont .item.typecircle {gap:0.65rem; } .service-cont .item.typecircle li { width:100%; height:auto; border-radius:1rem; text-align:left; } .service-cont .item.typecircle li p { padding:1.5rem 1.5rem; line-height:1.1rem; } .service-cont .process-car li:after {display:none;} .service-cont .process-car.n5 {padding:1rem 0.5rem 0} .service-cont .process-car.n5 li {width:50%; margin-bottom:1rem} .pnTop {padding:0; background:none;} [role="region"][aria-labelledby][tabindex] { max-height: calc(100vh - 250px); } } @media all and (max-width:360px) { .public-number li.area-name ul li {padding:1rem 0rem; font-size:0.825rem; } .public-number li.area-name ul li .part-number { min-width:135px; } } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 마이페이지 ///////////////////////////////////////////////////////////////////////////////////////////*/ .mypage .car_wrap { display:flex; justify-content: space-between; } .mypage .car_left {width:13rem; } .mypage .car_right {width:calc(100% - 13rem); padding:0; padding-left:3.5rem; padding-top:0.5rem; } .mypage .leftMenu { width:100%; display:inline-block; vertical-align:top; margin-top:0rem; } .mypage .leftMenu .left-title { display:block; font-size:1.65rem; line-height:2rem; font-weight:700; color:#222; letter-spacing:-.06em } .mypage .leftMenu .menu {display:flex; flex-direction: column; padding-top:1rem;} .mypage .leftMenu .menu ul {display:block;margin:0; padding:0.35rem 0.2rem; border-top:1px solid #f0f0f0} .mypage .leftMenu .menu ul:first-child {border:0; } .mypage .leftMenu .menu ul li { display:block; width:100%; padding:0.65rem 0; } .mypage .leftMenu .menu ul li a { display:block; width:100%; font-size:1.0rem; font-weight:500; line-height:1.5em; letter-spacing:-.06em; color:#888; position:relative; } .mypage .leftMenu .menu ul li a:hover{color:var(--txt-default);} .mypage .leftMenu .menu ul li a.on {color:var(--txt-default); text-decoration:underline; } /*.mypage .leftMenu .menu li a:after { content:"\e93f"; position:absolute; right:10px; top:12px; font-size:1.05rem; color:#999; font-weight:normal; font-family:'xeicon';}*/ .mypage .leftMenu .menu li:first-child { margin-top:0; } .mypage .leftMenu.fixed {position:fixed;top:10px;z-index:100;} .mypage .bbs-view {padding-top:0} .mypage .bbs-search {padding-top:0} .mypage .search-box {display:flex; justify-content: center; align-items: stretch;flex-direction: row; flex-wrap: nowrap; width:100%;margin-top:1.5rem; margin-bottom:1.2rem; border-radius:7px; background-color:#f6f6f6; padding:0.85rem; gap:0rem; } .mypage .search-box .row {width:calc(100% - 120px); display:flex; flex-direction: column; } .mypage .search-box button.search {width:120px; background-color:var(--txt-default) ;color:#fff; font-size:1rem; font-weight:500; color:#fff; text-align:center; padding:0;border-radius:0px; } .mypage .search-box .row .column {display:flex; width:100%; padding:0 !important; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .mypage .search-box select, .mypage .search-box input[type="text"] { display:inline-block; width:20%; height:36px; padding:0 12px; border-radius:0; background-color:#fff; border:1px solid #dedede; font-size:0.865rem; font-weight:500; margin-left:0px; } .mypage .search-box select{border-right:0;} .mypage .search-box .row .column.c2 {margin-top:-1px; } .mypage .search-box .row .column.c2 select {width:25%;} .mypage .search-box .row .column.c2 input[type=text] {width:100%; border-right:0} .mypage .search-box.clt {display:block; text-align:center; margin-bottom:2rem} .mypage .search-box.clt select {width:7rem;} .mypage .search-box.clt input[type="text"] {width:18rem; border-right:0;} .mypage .search-box.clt button.search{display:inline-block; height:36px; } .mypage .search-box.type2 {padding:3rem 0;flex-direction:column;align-items:center;} .mypage .search-box.type2 select {border-right:1px solid #dedede;margin-bottom:.5rem;} .mypage .search-box.type2 button.search {width:25%;height:3rem;} @media all and (max-width:1024px) { .mypage .container{padding-top:0} .mypage .column {padding:0 1rem;} .mypage .car_list {margin:0} .mypage .car_list > li a {padding:0} .mypage .car_wrap {padding:0rem 0.5rem;} .mypage .car_left {display:none} .mypage .car_right {width:100% !important; padding:0 } } @media screen and (max-width:677px){ .mypage .search-box .row {width:calc(100% - 50px); } .mypage .search-box button.search {width:50px; } .mypage .search-box select {width:50% !important; height:32px; border:1px solid #dedede !important; border-right:0 !important;} .mypage .search-box input[type="text"] {border-top:0; width:50%; font-size:0.85rem;height:32px; border:0; } .mypage .search-box .row .column.c2 select {width:50%;} .mypage .search-box .row .column.c2 input[type=text] {width:50%; border-top:1px solid #dedede ; } .mypage .search-box {position:relative;padding:0; background-color:#fff; } .mypage .search-box:after {content:''; position:absolute; left:0; bottom:0px; height:1px;width:100%; border-bottom:1px solid #dedede; } .mypage .search-box .column.c2 {flex-wrap: wrap; margin-top:0} .mypage .search-box .column.c2 select{ border:1px solid #dedede; border-right:0} .mypage .search-box .column.c2 select.s-dealer {border-top:0;} .mypage .search-box .column.ins-sch {display:inline-block;} .mypage .search-box .column.ins-sch select {width:50%;} .mypage .search-box .slt-or3{border-left:1px solid #dedede;} .mypage .search-box .slt-or3, .mypage .search-box .slt-or4{border-top:0;} .mypage .search-box .conn {border-left:1px solid #ddd;} .mypage .search-box .car_n {border-left:1px solid #ddd !important;} .mypage .search-box.clt {padding:0 0px; font-size:0 } .mypage .search-box.clt select {width:100px !important; display:inline-block !important; font-size:0.85rem;} .mypage .search-box.clt input[type="text"] {width:calc(100% - 80px);display:inline-block !important; font-size:0.85rem; border:1px solid #ddd !important; } .mypage .search-box.clt button.search {width:80px; height:32px;} } .mypage_header {position:relative; background-color:#f1f5fa; padding:2.5rem 3rem; border-radius:0.5rem; margin-bottom:1.8rem; display:flex; justify-content: space-between; flex-wrap: nowrap; align-items: flex-start; } .mypage_header .head-title{display:none;} .mypage_header .dealer_name {width:150px; } .mypage_header .dealer_name h2 { font-size:1.5rem; font-weight:bold; } .mypage_header .dealer_name .btn_modify {clear:both; margin-top:1rem; display:inline-block; font-size:0.9rem; text-decoration:underline; color:#666;} .mypage_header .myMenu { width:calc(100% - 150px); display:flex; justify-content: space-between; flex-wrap: nowrap;flex-direction: row; justify-content: center; text-align:center; gap:0rem; } .mypage_header .myMenu a { width:25%; text-align:center; justify-content: center; flex-direction: column; text-align:center; gap:1rem; } .mypage_header .myMenu .count {width:100%; font-weight:bold;color:#000; font-size:1.95rem; line-height:2rem; padding-top:0.85rem; } .mypage_header .myMenu .name {width:100% !important;font-size:0.95rem;line-height:1rem; font-weight:500; color:#777; } .mypage_header .myMenu a:hover .count, .mypage_header .myMenu a:hover .name {color:var(--txt-default)} .mypage_header .note {display:block; padding:2rem; text-align:center; } .mypage_header .note p { display:inline-block; color:#333; font-size:0.915rem; line-height:1.4rem; letter-spacing:-.04em; font-family:'Spoqa Han Sans'; } .mypage_header .note em {color:#fcff00; } @media screen and (max-width:1024px){ .mypage_header { background-color:#fff; padding:0rem; border-radius:0rem; margin-bottom:1rem; flex-direction: column;} .mypage_header .dealer_name {width:100%; display:flex; justify-content: space-between; flex-direction: row; align-items: center; } .mypage_header .dealer_name h2 { font-size:1.2rem; line-height:1.6rem;font-weight:bold; } .mypage_header .dealer_name .btn_modify { font-size:0.9rem;margin:0; padding:0 } .mypage_header .myMenu { width:calc(100% + 3rem); background-color:#f1f5fa; margin-top:1rem; margin-left:-1.5rem; margin-right:-1.5rem; padding:2rem; border-radius:0rem;justify-content: center; text-align:center; } .mypage_header .myMenu a { width:25%; } } /* page title */ .mypage .head-title {position:relative;width:100%; font-size:1.85rem; line-height:1.5rem; font-weight:bold; color:#222; margin-bottom:2rem;} .cont-title {display:flex; position:relative; margin:2rem 0 1rem; justify-content: space-between; align-items: center; flex-wrap: nowrap; } .cont-title h2 {width:100%; font-size:1.5rem; line-height:1.5rem; font-weight:bold; color:#222; } .cont-title h3 {width:100%; font-size:1.35rem; line-height:1.5rem; font-weight:bold; color:#222; } .cont-title h3:first-child {margin-top:1.9rem;} .cont-title h3.first {margin-top:0} .cont-title h4 {width:100%; font-size:1.25rem; line-height:1.5rem; font-weight:bold; color:#444; margin:0; padding:0 } .cont-title .t_modi {width:100%; font-size:1.125rem; line-height:1.4rem; font-weight:bold; color:#0638b8; margin-top:2rem; } .cont-title a.more {width:100px;font-size:0.9rem; line-height:1rem; font-weight:500; color:#666; text-align:right; letter-spacing:-.06em; } .cont-title a.more:after {content:"\e93f"; display:inline-block; line-height:1rem; vertical-align:top; font-family:'xeicon'; font-size:1.2rem; } .cont-title .txt-ess {position:absolute; right:0; top:5px;font-size:0.85rem;padding-left:5px; line-height:1rem; color:#777;} .cont-title .txt-ess:before {content:''; display:inline-block; vertical-align:middle;margin-right:5px; margin-top:-2px; width:5px; height:5px; border-radius:50%; background-color:var(--txt-default); } .mypage .cont-title h3:first-child {margin-top:0.3rem;} .mypage .head-title button { height:2rem; line-height:2rem; padding:0 1rem; font-size:0.85rem; font-weight:500; border:1px solid #ddd;color:#222; border-radius:0.35rem; } .mypage .head-title button.withdraw {top:0; display:none;} .mypage .mypageRight .cont-title {padding:0 !important; height:auto; margin-bottom:1rem; display:flex; justify-content: space-between; } @media screen and (max-width:1024px){ .mypage .head-title button.withdraw {display:block; } } /* 딜러조회 */ .dealer-search {display:block; text-align:center; margin-top:1.9rem; } .dealer-search input[type="text"] {display:inline-block; vertical-align:top; background-color:#fff; border-radius:12px; width:370px; height:3.75rem; line-height:3.75rem; padding:0 1.5rem; font-size:1.215rem;color:var(--txt-default); } .dealer-search button {display:inline-block; vertical-align:top; margin-left:0.35rem; height:3.75rem; line-height:3.75rem; padding:0 2rem; border-radius:12px; background-color:var(--txt-default); color:#fff; font-size:1.085rem; font-weight:bold; } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 마이페이지- 차량등록 ///////////////////////////////////////////////////////////////////////////////////////////*/ .carRegist {margin-top:1rem; padding:0} .carRegist p.title {position:relative; font-size:1.05rem; line-height:1.3rem; font-weight:bold; color:var(--txt-default);margin:0; padding-top:2rem; } .carRegist p.title:first-child {padding-top:0.85rem; } .carRegist p.title button {position:absolute; right:0; top:5px; height:2rem; line-height:2rem; padding:0 1rem; font-size:0.85rem; font-weight:500; border:1px solid #ddd;color:var(--txt-dark-grey); border-radius:0.35rem; z-index:5} .carRegist .item-box {position:relative; width:100%; border-top:1px solid #555;margin-top:1rem; margin-bottom:0rem; font-size:0;} .carRegist .item-box figure {display:inline-block; vertical-align:top; width:130px; height:160px; margin-top:0.9rem;border-radius:7px; background-color:#f4f4f4; background-repeat:no-repeat; background-position:center center; background-size:cover; } .carRegist .item-box .seller-info {display:inline-block; vertical-align:top; width:calc(100% - 130px); padding-left:2.5rem; } .carRegist .item-box .item {display:inline-block;width:100%; border-bottom:1px solid #eee; padding:0.85rem 0.3rem; } .carRegist .item-box .item.col5 {width:50% !important; display:inline-block; vertical-align:top; } .carRegist .item-box .item.col5 .item-cont {padding-right:1rem;} .carRegist .item-box .item .item-title {display:block; width:100%; position:relative; font-size:0.95rem; font-weight:600; color:#333; margin-bottom:0.65rem; } .carRegist .item-box .item .item-title:before {content:''; display:inline-block; vertical-align:middle;margin-right:5px; margin-top:-2px; width:5px; height:5px; border-radius:50%; background-color:var(--txt-default); } .carRegist .item-box .item .item-cont {display:block; border:0px solid #f00; width:100%} .carRegist .item-box .item .item-cont p.txt { position:relative; font-size:0.85rem; color:#666; padding-top:8px; font-family:'Spoqa Han Sans'} .carRegist .item-box .item .item-cont span.txt {display:inline-block; vertical-align:middle; font-size:0.85rem;padding:0 4px; color:#666; font-family:'Spoqa Han Sans'} .carRegist input[type="text"], .carRegist select, .carRegist textarea {border-radius:5px; border:1px solid transparent; background-color:#f3f4f8; padding:0 10px; height:2.65rem; margin-left:5px; font-weight:500; font-size:0.915rem; color:#111;} .carRegist button.confirm {border-radius:5px; border:0; background-color:#444; color:#fff; font-size:0.915rem; height:2.65rem; line-height:2.65rem; font-weight:500; padding:0 1rem; margin:0 5px; } .carRegist input[type="text"]:focus, .carRegist textarea:focus, .carRegist select:focus {border:1px solid var(--txt-default); background-color:#fff;} .carRegist input[type="text"]:first-child, .carRegist select:first-child {margin-left:0} .carRegist input[type=checkbox] + label, .carRegist input[type=radio] + label{font-size:0.915rem; font-weight:500; margin-right:1.5rem; line-height:2.65rem;} .carRegist textarea {height:12rem; padding:1rem; margin:0.65rem 0; line-height:1.7rem;} .carRegist .w-title {width:calc(100% - 120px)} .carRegist .w-count {width:70px; margin-left:5px;} .carRegist .car-select {background-image:none; height:12.5rem; border:2px solid #c5d8f7; background-color:#fff; color:#333; font-size:1rem;padding:0.25rem 0.65rem;} .carRegist .car-select:focus {border-width:2px;} .carRegist .car-select option.select-title {background:#fff !important; color:#333 !important;font-weight:bold !important } .carRegist .car-select option {height:2rem;padding-top:5px; padding-left:5px; border-bottom:1px solid #f4f4f4; color:#666; font-size:0.95rem;font-weight:500;} .carRegist .car-select option:first-child {background:#fff !important; color:#333 !important;font-weight:600} .carRegist .car-select option:checked{ background:#e9f0fc; color:#0060ff; font-weight:bold; } .carRegist .carSelect-step1 {width:20%;} .carRegist .carSelect-step2 {width:25%;} .carRegist .carSelect-step3 {width:calc(30% - 20px);} .carRegist .carSelect-step4 {width:23%;} .carRegist .item-box .item .item-title .btn-area {position:absolute; right:0; top:0px;} .carRegist ::-webkit-scrollbar { width: 4px;height:4px; } .carRegist ::-webkit-scrollbar-thumb { background:#3979e1; } .carRegist .option-box {display:flex; width:100%; flex-direction: column;} .carRegist .option-box div.box {padding:1rem; background-color:#f9f9f9; border-radius:7px;display:flex; flex-direction: row; width:100%; flex-wrap: nowrap; margin-top:0.65rem; } .carRegist .option-box div.box:first-child {margin:0} .carRegist .option-box .opt-title {width:100px; font-size:0.985rem; font-weight:bold; padding:0.4rem 0 0 1rem; } .carRegist .option-box .option-list {font-size:0; width:calc(100% - 100px); display:flex; flex-direction: row; flex-wrap: wrap; } .carRegist .option-box input[type=checkbox] + label {width:25%; line-height:1.3rem; padding-right:0; margin:0;font-size:0.90rem; } .carRegist .option-box input[type=checkbox]:checked + label {color:var(--txt-default)} .carRegist .option-box input[type=checkbox] + label {line-height:1.4rem; margin:0.3rem 0} .carRegist .option-box input[type=checkbox] + label:before {top:3px;transform:translateY(0);} .carRegist .option-box input[type=checkbox] + label:after { top:4px; margin:0;} .carRegist .ex-phrase {display:block; padding:0rem 0.5rem 0; font-size:0; } .carRegist .ex-phrase span {display:inline-block; vertical-align:top; width:50%; position:relative; padding-left:10px; font-size:0.9rem; margin-bottom:0.5rem; font-weight:500; color:#666; font-family:'Spoqa Han Sans'; cursor:pointer; } .carRegist .ex-phrase span:before {content:''; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:5px; background-color:#c6d7f2} .carRegist .ex-phrase span:hover {color:var(--txt-default)} .carRegist .detail-item {display:block; padding:0.5rem 0; font-size:0; } .carRegist .detail-item li {display:inline-block; vertical-align:top; width:50%; margin-bottom:0.5rem; } .carRegist .detail-item li div{display:inline-block; vertical-align:top; font-size:0.9rem; font-weight:500; font-size:0.9rem;} .carRegist .detail-item li div:first-child {width:90px; line-height:2.65rem; padding-left:10px;} .carRegist .detail-item li div:first-child + div {width:calc(100% - 100px)} .carRegist.sms .item-box {display:flex;} .carRegist.sms .item-box .item:nth-of-type(2) {padding:1rem 2rem;margin:0 1.5rem;border-left:1px solid #eee;border-right:1px solid #eee;} .carRegist.sms .item-box .item select, .carRegist.sms .item-box .item input {width:100%;margin:0.65rem 0;} .carRegist.sms .item-box .item p b span {padding:0 .3rem;color:var(--txt-default);} .carRegist.sms .item-box .item .button {width:3rem;height:2rem;font-size:.9rem;} .form-select { display: block; width: 100%; padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem + 1px) 0.625rem; -moz-padding-start: calc(0.625rem - 3px); font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.25; color: #000; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'%3e%3cpath d='M7 7L0 0h14L7 7z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.625rem top calc(50% + 1px); background-size: 0.875rem 1rem; border: 0.125rem solid #ccc; border-radius: 0; transition: border-color 0.2s ease-in-out, outline-offset 0.2s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media (prefers-reduced-motion: reduce) { .form-select { transition: none; } } .form-select:focus { border-color: currentColor !important; } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 0.625rem; background-image: none; } .form-select:disabled { color: #666; background-color: #eee; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'%3e%3cpath fill='%23666' d='M7 7L0 0h14L7 7z'/%3e%3c/svg%3e"); } .form-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } /* 강조아이콘 */ .carRegist .emph-icon { margin-top:0.85rem; display:flex; width:100%; flex-direction: row;flex-wrap: wrap;} .carRegist .emph-icon input[type=checkbox] + label {padding-right:0; margin:0; margin-right:5px; vertical-align:middle; } .carRegist .emph-icon li {width:20% !important; margin:0.35rem 0; border:0px solid #ddd} .carRegist .emph-icon .badge-style {padding:0 0.65rem; } .btn-carCheckInfo {display:inline-block; height:3.05rem; line-height:3.05rem; padding:0 1.6rem; border-radius:9rem; font-size:1rem; font-weight:500; color:#fff; background:#70c248; box-shadow:3px 3px 7px rgba(0,0,0,0.05)} /* 차량사진 */ .carPhoto {font-size:0;position:relative; width:100%; margin:1.5rem 0 0.5rem; } .carPhoto .form-image {padding:0;} .carPhoto .form-image div.box {position:relative; display:inline-block; vertical-align:top; width:calc(16.6% - 7px); height:120px;margin-bottom:8px;margin-right:8px;border-radius:6px; overflow:hidden; } .carPhoto .form-image div.box:nth-child(6n){margin-right:0;} .carPhoto .form-image button:before {font-size:20px; line-height:20px; margin-top:-20px;} .carPhoto .form-image .box.ui-sortable-handle {background-color:transparent; } .carPhoto .form-image .box.ui-sortable-handle > .button {position:relative;height:100%;background-color:#f5f5f5;cursor:pointer;background-repeat: no-repeat;background-size: cover; background-position: center center;} .carPhoto .form-image .box.ui-sortable-handle > .button span{position:absolute; top:60%; left:0; width:100%; text-align:center;font-size:0.815rem; color:#888; } .carPhoto .form-image .box input {display:none;} .carPhoto .form-image.ui-sortable {font-size:0;} .carPhoto .form-image .box.ui-sortable-handle button {display:none;} .carPhoto .form-image .box.ui-sortable-handle .button:before {line-height:110px;} .carPhoto .form-image.ui-sortable .box.on .button:before {display:none;} .carPhoto .form-image a.close {display:none; position:absolute; right:0px; top:0px; width:21px; height:21px; text-align:center; font-size:15px;padding:0; border:0; border-radius:0; background-color:rgba(0,0,0,0.5); z-index:55;} .carPhoto .form-image a.close:before {content:"\e921"; display:inline-block; font-size:11px; vertical-align:top; line-height:21px; margin:0; color:#fff; } .carPhoto .form-image .box.on a.close {display:block;} .carPhoto .form-image .box.on button:before, .form-image .box.on .button span {display:none;} .carPhoto .form-image button:before, .form-image .button {position:relative;} .carPhoto .form-image button:before, .form-image .button:before {content:"\e9c5"; display:block;font-size:19px; line-height:20px;color:#666; text-align:center; } @media screen and (max-width:1024px){ .carPhoto .form-image .box { height:100px;} .carPhoto .form-image button:before, .form-image .button:before { position:absolute; left:0; top:-5px;width:100%; text-align:center; font-size:18px; line-height:20px;color:#666; text-align:center; } .carRegist .item-box .item.col5 {width:100% !important;} .carRegist .item-box .item.col5 .item-cont {padding-right:0} .carRegist .detail-item li {width:100%} .carRegist .detail-item li div:first-child {padding:0; width:70px; } .carRegist .detail-item li div:first-child + div {width:calc(100% - 70px)} } @media screen and (max-width:677px){ .carRegist .item-box figure { display:none;} .carRegist .item-box .seller-info {padding-left:0rem; width:100%} .carRegist input[type=checkbox] + label, .carRegist input[type=radio] + label { padding-right:0} .carRegist .item-box .item .w35pc {width:49% !important} .carRegist .item-box .item .item-cont .w33pc {width:70% !important} .carRegist .option-box div.box {flex-direction: column;} .carRegist .option-box .opt-title {padding:0; width:100%; padding-bottom:0.65rem;} .carRegist .option-box .option-list {width:100%;} .carRegist .option-box input[type=checkbox] + label { width:33.3%;letter-spacing:-.06em; font-size:0.9rem; } .carRegist .emph-icon li {width:25% !important; } .carPhoto .form-image {margin-left:-4px !important; margin-right:-4px !important; } .carPhoto .form-image div.box {width:calc(25% - 8px); height:110px; margin-left:4px !important; margin-right:4px !important;} } @media screen and (max-width:500px){ .carRegist .car-select { height:2.8rem; border:1px solid #c5d8f7; vertical-align:top; margin:0 !important; color:#000 !important; margin-bottom:5px !important; -webkit-appearance:default; appearance:default; background:url(/images/icon_select.png) no-repeat right ;padding-right:35px; background-size:auto 14px; background-position:calc(100% - 10px) ; } .carRegist .car-select:focus {border-width:1px;} .carRegist .carSelect-step1, .carRegist .carSelect-step2, .carRegist .carSelect-step3{width:100% !important; } .carRegist .car-select option {height:2.8rem; padding-top:9px; border-bottom:0px solid #f4f4f4; } .carRegist .detail-item li div:first-child {width:100%; } .carRegist .detail-item li div:first-child + div {width:100%} .carRegist .detail-item .w150 {width:40% !important;} .carRegist .detail-item .w100 {width:25% !important;} .carRegist input[type="text"], .carRegist select {margin-left:2px;} .carRegist .option-box input[type=checkbox] + label { width:50%; } .carRegist .item-box .item {padding: 0.65rem 0 1rem;} .carRegist .item-box .item .item-title {margin-top:0.7rem} .carRegist .ex-phrase { padding:0; } .carRegist .ex-phrase span {width:100%; margin-bottom:0.35rem;} .carRegist .emph-icon input[type=checkbox] + label {margin-right:0} .carRegist .emph-icon li {width:33.3% !important; } .carPhoto .form-image div.box {width:calc(33.3% - 8px); height:80px; } .carPhoto .form-image button:before, .form-image .button:before { top:-20px; } .carPhoto .form-image .box.ui-sortable-handle > .button span{top:53%; font-size:0.785rem; } .carPhoto .form-image a.close {width:28px; height:28px; } .carPhoto .form-image a.close:before { font-size:16px; line-height:28px; } } @media screen and (max-width:420px){ .carRegist .option-box input[type=checkbox] + label { font-size:0.785rem; } } .note_box {display:block; margin:1.5rem 0 0; border-radius:var(--radius-default); background-color:#f5f5f5; border:1px solid #eaeaea; padding:1.5rem; font-size:.85rem; line-height:1.3em;} /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 회사소개 ///////////////////////////////////////////////////////////////////////////////////////////*/ /* 인사말 */ .greeting {padding:5rem 0;} .greeting .greeting_text p b {font-size:2rem;} .greeting .greeting_text p {line-height:1.8;font-size:1.1rem;} .greeting .media {padding-top:5rem;} /* 연혁 */ .history li {position:relative;padding:0 0 1.2rem 22rem;font-size:1.15rem;} .history li .date {position:absolute;top:0;left:15.5rem;padding-bottom:.2rem;font-size:1.125rem;/*position:absolute;left:9rem;top:.2rem;*/font-weight:bold ; } .history li p {padding-top:.2rem;font-size:.85rem;} .history li:before {content:'';position:absolute;left:12.5rem;top:.4rem;bottom:0;width:1px;height:100%;background:#ddd;} .history li:after {content:'';position:absolute;left:12.2rem;top:.25rem;width:10px;height:10px;border-radius:50%;background:#c1c1c1;overflow:hidden;} .history li.last {padding-bottom:0;} .history li.last:before {display:none;} .history li.newyear {padding-top:3.5rem;} .history li.newyear .year {position:absolute;left:0;top:2.7rem;font-weight:bold;font-size:2.5rem;} .history li.newyear .date {top:3.5rem;} .history li.newyear:after {top:3.7rem;} @media screen and ( max-width: 900px ) { .greeting .greeting_text p b {font-size:1.35rem; line-height:1.55em;} .greeting .greeting_text p {line-height:1.7;font-size:1.05rem;} .history li {padding-left:11rem;font-size:1rem;} .history li .date {left:7rem; font-size:1rem;} .history li:before {left:5.5rem;} .history li:after {left:5.2rem;} .history li.newyear .year {top:3.3rem;font-size:1.5rem;} .greeting .media {padding-top:2rem; width:100% !important; } .greeting .media iframe {width:100%; height:200px !important;} } /* 지도 */ .map .root_daum_roughmap {width:100% !important;} .location_how {padding-top:2rem;font-size:0;} .location_how dl {position:relative;float:left;width:50%;padding:0 1rem;box-sizing:border-box;} .location_how dl.devide {padding-left:4rem;} .location_how dl.devide:before {content:'';position:absolute;left:0px;top:0;clear:both;background:#eee;height:100%;width:1px;} .location_how dt {padding:0 0 0 0rem;background:url("/images/sub/location_icon2.png") 0 center no-repeat;line-height:5rem;font-size:1.45rem;font-weight:bold;} .location_how .box + .box dt {background:url("/images/sub/location_icon1.png") 0 50% no-repeat;} .location_how .table_row {padding-top:1rem;} .location_how dd i {float:left;display:inline-block;padding:0 1rem;line-height:2.5rem;margin-right:.3rem;margin-bottom:.3rem;border-radius:.3rem;color:#fff;font-size:1.05rem;text-align:center;} .location_how dd .l, .location_how dd .r {display:table-cell;width:auto;vertical-align:top;} .location_how dd .r {color:#555;font-size:1.1rem;} .location_how .box .l {width:70%;} .location_how .box i {background:#00afbd;} .location_how .box i.type2 {background:#47af1b;} @media screen and ( max-width:900px ) { .location_how dl {width:100%;padding:0;} .location_how dl + dl:before {display:none;} .location_how dt {padding:0 0 0 0rem;background-size:auto 95% !important;line-height:3rem;font-size:1.15rem;} .location_how dd i {padding:0 1rem;font-size:.9rem;line-height:2rem;} .location_how .box + .box {padding-top:1rem;margin-top:1rem;border-top:1px solid #eee;} .location_how .table_row {padding-top:1rem;} .location_how dd .r {font-size:1rem;} .location_how dl.devide {padding-left:0} } /* BTN */ .btnWrap {display:block; margin:0; text-align:center; font-size:0; margin-top:2rem; } .btnWrap.bd0 {border:0;} .btnWrap.pd0 {padding:0 !important;} .btnWrap button {display:inline-block; vertical-align:top; margin:0 5px; border-radius:7px; font-size:1rem; color:#666;background-color:#f4f4f4; border:1px solid #f4f4f4; height:55px; line-height:53px; padding: 0 1.5rem; font-weight:500 } .btnWrap button:before {content:''; display:inline-block; vertical-align:top; margin-right:5px; font-size:1.2rem;font-family:"xeicon" !important; } .btnWrap button.save { background-color:var(--txt-default); border-color:var(--txt-default); color:#fff; padding:0 2.6rem; } .btnWrap button.confirm { background-color:var(--txt-default); border-color:var(--txt-default); color:#fff; padding:0 2.6rem; } .btnWrap button.list { background-color:#f4f4f4; border-color:#f4f4f4; color:#222; padding: 0 2rem; } .btnWrap button.modify {background-color:#eef1fb; color:var(--txt-default)} .btnWrap button.modify.gallery {margin-top:-3rem} .btnWrap button.cancel {background-color:#fff; color:#222; border-color:#dedede} .btnWrap button.print {background-color:#e1eafa; color:var(--txt-default); border-color:#e1eafa;} .btnWrap.right {text-align:right;} .btnWrap.right .confirm {margin-top:-80px;} .btnWrap button.delete {background-color:#fff; color:#222; border-color:#eee} .btnWrap button.delete:before {content: "\e96f"; } .btnWrap button.modify:before {content: "\ea39"; } .btnWrap button.list:before {content: "\e91c"; } .btnWrap button.save:before {content: "\e928"; } @media screen and (max-width:1024px){ .btnWrap button {margin:0 3px; border-radius:5px; font-size:0.9rem; height:45px; line-height:43px; padding: 0 1rem; } .btnWrap button:before {margin-right:2px; font-size:1rem;} .btnWrap button.list { padding: 0 1.8rem; } .mypage .leftMenu { display:none; } } @media screen and (max-width:677px){ .btnWrap {clear:both;position:relative;height:50px; } .btnWrap .box {position:fixed; z-index:101; left:0; bottom:0;height:50px; width:100%; padding:0; display:flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; gap:0} .btnWrap button {width:100%; margin:0; border-radius:0;border:0; height:50px; line-height:50px;} .btnWrap button.modify.gallery {margin:0} .btnWrap button.modify { background-color: var(--txt-default); color:#fff;} .btnWrap button.modify:before {color:#fff;} .btnWrap button.cancel {border:0; color:#fff; background-color:#666} .btnWrap button.list {background-color:#444; color:#fff;} .btnWrap button.list:before {color:#fff;} .btnWrap button.delete {background-color:#aaa; color:#fff;} .btnWrap button.delete:before {color:#fff;} .btnWrap.right .confirm {margin-top:0px;} } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* pagination ///////////////////////////////////////////////////////////////////////////////////////////*/ .pagination { display:inline-block; width:100%; margin:2.5rem 0 0rem; padding:0; font-size:0;text-align:center;} .pagination:after {content:''; clear:both; } .pagination span { display:inline-block; margin:0 3px; } .pagination span a { display:inline-block;position:relative; font-size:14px; border:1px solid #dcdde0; width:40px; height:40px; line-height:38px;color:#333;background:#fff; vertical-align:middle; border-radius:12rem; transition:300ms ease-out 0ms;} .pagination span a:before {content:'';position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; background-repeat:no-repeat; background-position:center center; background-size:auto 18px; font-size:24px; color:#333; } .pagination span .first:before {/*content:"\F13D"; */ background-image:url('/images/arrow_first.png')} .pagination span .prev:before {/*content: "\F141"; */ background-image:url('/images/arrow_prev.png')} .pagination span .next:before {/*content:"\F142";*/ background-image:url('/images/arrow_next.png') } .pagination span .last:before {/*content:"\F13E";*/background-image:url('/images/arrow_last.png')} .pagination span .prev {margin-right:5px; } .pagination span .next {margin-left:5px; } .pagination span a.on { background:var(--txt-default); border:1px solid var(--txt-default); color:#fff; } .pagination span a.off { display:none; opacity:0.4} .pagination span a.first{ margin-left:0;border-left:1px solid #dcdde0; } .pagination span .first.on, .pagination span .prev.on, .pagination span .next.on, .pagination span .last.on { background-color:#fff; color:#111; border-color:#aaa} @media screen and (max-width:1024px){ .pagination span { margin:0 2px; } .pagination span a { font-size:13px; width:30px; height:30px; line-height:28px; } .pagination span a:before {font-size:21px; background-size:auto 14px; } } @media screen and (max-width:677px){ .pagination {margin:1.5rem 0 1.875rem;} .pagination span a { font-size:14px; width:25px; height:25px; line-height:23px; } } /* @media screen and (max-width:360px){ .pagination {margin:0rem 0;} .pagination span { margin:0 0.5px; } .pagination span a { font-size:11px; width:21px; height:21px; line-height:20px; } .pagination span a:before {font-size:18px;} .pagination span .prev{margin-right:3px; } .pagination span .next {margin-left:3px; } }*/ /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 팝업알림 ///////////////////////////////////////////////////////////////////////////////////////////*/ .inform-box {display:flex;align-items: stretch; align-items: center; justify-content: center;width:100%; height:100%; text-align:center; font-size:0.95rem; line-height:1.5rem; color:#666; font-weight:500} /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 이용약관/개인정보처리방침 ///////////////////////////////////////////////////////////////////////////////////////////*/ .agreement {margin-top:2rem} .agreement.mt0 {margin-top:0} .agreement h1 {font-size:1.75rem; line-height:1.75rem; color:#000; font-weight:400; margin-top:3rem; } .agreement h1:first-child {margin-top:0; } .agreement h2 {font-size:1.125rem; font-weight:500; color:#333; margin:3rem 0 1.1rem; color:var(--txt-default) } .agreement h2:first-child {margin-top:0} .agreement p {font-size:0.985rem; line-height:1.6rem; color:#333; letter-spacing:-.04em; margin:0.5rem 0 0;font-weight:normal !important;} .agreement .idx {display:block; margin:2rem 0; padding:1.5rem 3rem; border-radius:0.65rem; background-color:#f8f8f8; font-size:0; } .agreement .idx li {display:inline-block; vertical-align:top; width:50%; } .agreement .idx li a {display:block; font-size:0.95rem; line-height:1.9rem; font-weight:normal } .agreement ol {margin:1rem 0; } .agreement ol li {position:relative; font-size:0.985rem; color:#666; line-height:1.5rem;font-weight:500; margin-bottom:0.85rem; color:#333} .agreement ol li ol {padding-top:0.35rem; padding-left:0.65rem;} .agreement ol li ol li {padding-left:0.65rem; color:#666 !important;margin-bottom:0.45rem; font-weight:normal;} .agreement ol li ol li:before {content:''; position:absolute; left:0; top:11px; width:5px; height:1px; background-color:#555;} .modal-popup.ty03 .pop-content .agreement {margin-top:0rem} .modal-popup.ty03 .pop-content .idx { margin:1rem 0; padding:1rem 1rem; } .modal-popup.ty03 .pop-content .agreement .idx li {display:block; width:100%; } .modal-popup.ty03 .pop-content .agreement .idx li a { font-size:0.9rem; line-height:1.5rem; } .modal-popup.ty03 .pop-content h1 {font-size:1.5rem; line-height:1.5rem; margin-top:2rem; } .modal-popup.ty03 .pop-content h2 {font-size:1.05rem; margin:2rem 0 0rem; } .modal-popup.ty03 .pop-content .agreement p {font-size:0.85rem; line-height:1.5rem; } .modal-popup.ty05 .pop-content .agreement {margin-top:0rem} .modal-popup.ty05 .pop-content .idx { margin:1rem 0; padding:1rem 1rem; } .modal-popup.ty05 .pop-content .agreement .idx li {display:block; width:100%; } .modal-popup.ty05 .pop-content .agreement .idx li a { font-size:0.9rem; line-height:1.5rem; } .modal-popup.ty05 .pop-content h1 {font-size:1.5rem; line-height:1.5rem; margin-top:2rem; } .modal-popup.ty05 .pop-content h2 {font-size:1.05rem; margin:2rem 0 0rem; } .modal-popup.ty05 .pop-content .agreement p {font-size:0.85rem; line-height:1.5rem; } @media screen and (max-width:1024px){ .agreement {margin-top:1rem} .agreement h1 {font-size:1.128rem; line-height:1.5rem; margin-top:2rem; } .agreement h2 {font-size:0.985rem; margin:1.5rem 0 0.8rem; } .agreement p {font-size:0.9rem; line-height:1.5rem; } .agreement .idx { margin:1rem 0; padding:1rem 1.2rem; border-radius:0.35rem; } .agreement .idx li {width:100%; } .agreement .idx li a {display:block; font-size:0.95rem; line-height:1.9rem; font-weight:500 } .agreement ol {margin:1rem 0; } .agreement ol li { font-size:0.85rem; margin-bottom:0.515rem; } .agreement ol li ol li {padding-left:0.65rem; margin-bottom:0.35rem; } .agreement ol li ol li:before {content:''; position:absolute; left:0; top:11px; width:5px; height:1px; background-color:#555;} } @media screen and (max-width:500px){ .page-csView .container {padding-top:45px; } .pageRT .container{padding-top:30px;} .pageMy .container {padding-top:50px;} .head-title-mob {display:block; position:absolute; top:20px;margin:0; left:60px; z-index:333 ; font-weight:bold ;color:#222; font-size:1.125rem; line-height:1.125rem;} } .waves { position: absolute; left: 0; bottom: 0; width: 100%; height:6vh; min-height:80px; max-height:130px;} .waves2 { position: absolute; left: 0; bottom: 0; width: 100%; height:12vh; min-height:90px; max-height:180px;} .parallax > use { animation: move-forever 100s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } } /*Shrinking for mobile*/ @media (max-width: 1024px) { .waves { display:none; } .waves2 { height:8vh; } } @media (max-width: 667px) { .waves2 { height:6vh; min-height:50px; max-height:100px; } } /*관리자*/ .sub-header2 {position:relative;width:100%; margin:0;} .sub-header2 .head-title {display:block; font-size:1.563rem; line-height:1.563rem; font-weight:bold; color:#333; } .sub-header2 .head-txt {display:block; margin-top:1.1rem; font-size:1.015rem;width:70%; line-height:1.6rem; font-weight:400; color:#999; letter-spacing:-.06em;} /* 약식 약관동의 */ .agreeBox {width:100%; margin:15px auto; font-size:14px; border-radius:0px; border:0px solid #e1e6ed; overflow:hidden; padding:0px; border-radius:7px; border:1px solid #e4ebf3;} .agreeBox div.top {height:auto; position:relative; line-height:40px; padding:0px 10px; background-color:#fafcfd; position:relative; border-top:1px solid #e4ebf3; } .agreeBox div.top:first-child {border-top:0; } .agreeBox .fuc_toggle:after {content:"\e943"; position:absolute; right:0px; color:#555; top:0px; width:40px; height:40px; line-height:40px; text-align:center; font-size:18px;font-family:'xeicon'; transform: rotate( 180deg ); cursor:pointer; border:0px solid #f00} .agreeBox .fuc_toggle.on:after {transform: rotate( 0deg );} .agreeBox input[type=checkbox] + label {padding-left:25px !important; font-size:0.9rem; font-weight:500; color:#333;} .agreeBox input[type=checkbox] + label:before { width:21px; height:21px;border-radius:50%;} .agreeBox input[type=checkbox] + label:after {left:7.0px; margin-top:-7px; ;border-color:#d8dde5; display:block; } .agreeBox input[type=checkbox]:checked + label {padding-left:25px !important; } .agreeBox input[type=checkbox]:checked + label:before { width:21px; height:21px;box-shadow:none;} .agreeBox input[type=checkbox]:checked + label:after { border-color:#fff !important } .agreeBox .terms { display:block; padding:0px 15px; font-family:'SpoqaHanSans';border-top:1px solid #e8ebf0; } .agreeBox .terms li {padding:15px 3px; border-top:1px solid #e1e6ed;font-family:inherit} .agreeBox .terms li:first-child {border:0} .agreeBox .terms h3 {font-size:13px; margin-bottom:10px; line-height:1.3em; color:#333; font-weight:bold; font-family:inherit; padding:0; border:0 } .agreeBox .terms p {font-size:12px; line-height:1.3em; color:#666;font-family:inherit; margin-top:5px; } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 로그인 ///////////////////////////////////////////////////////////////////////////////////////////*/ .login-box {display:block; font-size:0.95rem; line-height:1.5rem; color:#666; } .login-box .inform {padding:0 2.1rem; display:block; width:100%;} .login-box .inform li {display:block; margin-bottom:15px; } .login-box input[type=checkbox] + label {color:#777} .login-box input[type=checkbox]:checked + label {color:var(--txt-default)} .login-box .input_item {background:#f0f2f8; position:relative; border-radius:7px; margin-bottom:1rem; font-size:0} .login-box input[type="text"], .login-box input[type="password"] {position:relative;height:3.75rem;background-color:transparent !important; z-index:2; margin-bottom:0 !important;} .login-box .btn-login {width:100%; background-color:var(--txt-default);height:3.75rem; text-align:center; color:#fff; font-size:1.125rem; border-radius:7px; } .login-box .input_item input[type=text] + label, .login-box .input_item input[type=password] + label {z-index:1;} .login-box .input_item label.filled, .login-box .input_item input:focus + label {top:-15px !important;left:0;background:transparent; z-index:10 !important} .title-box {padding-bottom:2.5rem; margin:0 ; text-align:center; } .title-box .login-logo {display:inline-block; width:220px; height:3.75rem; background:url('/images/inc/logo.png') no-repeat center ; background-size:auto 2.813rem;} .title-box h2 { font-size:1.85rem; line-height:2rem; font-weight:bold; color:#333; } .title-box h3 { font-size:1.85rem; line-height:2rem; font-weight:bold; color:#333; } .title-box p {font-size:0.95rem; color:#666; margin-top:0.85rem; } .input_item input {background-color:transparent !important;border:0; padding-left:1.2rem; color:#000; font-size:1.125rem; font-weight:bold;} .input_item.id:after, .input_item.pw:after, .input_item.title:after{position:absolute;top:1.063rem;right:1.063rem;clear:both;display:inline-block;content:"";font-family:'xeicon';width:20px;height:20px; font-size:1.25rem; color:#aaa;z-index:9;} .input_item.id:after{content:"\e9f5"; } .input_item.pw:after{ content:"\e966";} .input_item input[type=text] + label, .input_item input[type=password] + label {position:absolute;top:50%;left:12px;padding:0 0.65rem;margin-top:-13px;font-size:0.9rem;color:#999; z-index:-1; -webkit-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;} .input_item label.filled, .input_item input:focus + label {top:5px !important; margin-left:7px; margin-top:5px !important; background:#fff !important; color:var(--txt-default); font-size:0.75rem !important;z-index:5 !important; border-radius:20px; border:0px solid #f00} .input_item input:-webkit-autofill {-webkit-text-fill-color:#000;} .input_item input:-webkit-autofill, .input_item input:-webkit-autofill:hover, .input_item input:-webkit-autofill:focus, .input_item input:-webkit-autofill:active {transition:background-color 5000s ease-in-out 0s; border-radius:7px; background:transparent !important} .input_item input:-webkit-autofill + label {top:5px !important; font-size:0.75rem !important; z-index:1 !important;} @media screen and (max-width:677px){ .login-box .inform {padding:0 0rem; } .login-box .inform li { margin-bottom:10px; } .title-box {padding-bottom:1.25rem; } .title-box .login-logo {display:inline-block; width:200px; height:3rem; background:url('/images/inc/logo_mobile.png') no-repeat center ; background-size:auto 2.3rem;} .title-box h2 {margin-top:2rem; font-size:1.5rem; line-height:1.5rem;} .title-box h3 { font-size:1.25rem; line-height:1.7rem; } .title-box p {font-size:0.815rem; margin-top:0.85rem; } } /* 회원탈퇴 */ .leave_box {display:block; clear:both; background-color:#f9f9f9; border-radius:7px; border:1px solid #eee; padding:20px; font-size:15px; color:#555; margin-bottom:20px; } .leave_box h3 {font-size:15px; font-weight:600; line-height:1.5em; margin-bottom:10px; } .leave_box p {font-size:14.5px; line-height:1.5em; color:#777; } @media screen and (max-width:500px){ .leave_box { border-radius:5px; padding:12px; margin-bottom:10px; } .leave_box h3 {font-size:14px; margin-bottom:8px; } .leave_box p {font-size:13px; line-height:1.3em; } } /* 회원가입 */ .btn_member {position:relative; text-align:center; margin-top:2rem; display:flex; width:100%;flex-wrap: nowrap; justify-content: center; gap:0.5rem} .btn_member a {width:100%; height:55px; line-height:55px; border-radius:7px; background-color:var(--txt-default); color:#fff; font-size:1.125rem; } .btn_member a:hover {box-shadow:5px 5px 20px rgba(0,0,0,0.1)} .btn_member a.btn_ok {width:100%;} .btn_member a.confirm {width:70%; } .btn_member a.cancel {width:30%; background-color:#fff; border:1px solid #ddd; color:#999; } .btn_member a.cancel:hover { border-color:#333; color:#fff; background-color:#333;} .container.agree {padding-top:60px;} .join{width:677px; margin:0 auto; padding-top:3rem; } .join_note {display:block; border-radius:7px; background-color:#fafafa; border:1px solid #e1e1e2; padding:1rem 1.2rem; font-size:0.95rem; line-height:1.6rem; letter-spacing:-.02em; font-family:'Notosans'} .join_note strong {font-weight:bold; color:var(--txt-default); font-size:120%; } .join.step_narrow{width:450px; margin:0 auto; } .join.step_cpl {width:400px; margin:0 auto; margin-bottom:5rem;} .agree-check {display:block; background:#fafafa;border:1px solid #e1e1e2;border-radius:7px; overflow:hidden;} .agree-check dt {padding:0 .5rem;border-bottom:1px solid #e1e1e2;background:#fff;} .agree-check dd {padding:1.3rem 1.2rem;} .agree-check .ag-tit { display:block; width:100%; text-align:left !important; padding:15px 10px; } .agree-check .ag-tit label {font-size:16px; color:#111; font-weight:400 !important; padding-left:25px; } .agree-check dd label {display:inline-block;width:65%;padding:.5rem 0 .5rem 1.5rem;font-size:13px;line-height:1;} .agree-check dd p.item_tit {font-size:13px; font-weight:500; color:#333; padding:10px 0 7px 25px; ;} .agree-check dd p.item {display:flex;justify-content: space-between; flex-direction: row;flex-wrap: nowrap; align-items: flex-start; padding-left:25px; padding-bottom:5px; } .agree-check dd p.item span {font-size:13px; color:#555; width:auto; letter-spacing:-.08em; width:100%;} .agree-check dd p.item span:first-child {width:70px; color:#888; } .agree-check .basic_txt{color:#f30000; font-size:12px; vertical-align: middle; margin-left:5px;} .agree-check .basic_txt.black {color:#333;} .agree-check .btn_link{float:right;margin-top:.5rem;margin-right:.5rem;color:#333;font-size:.8rem; border-bottom:1px solid #333;font-weight:bold; } .add_line1 {display:flex; width:100%;flex-wrap: nowrap;} .add_line1 input[type="text"] {width:150px; } .add_line1 .address_btn {width:120px; background-color:#f4f4f4; border:1px solid #ddd; color:#555; margin-left:5px; font-size:0.85rem;} .add_line2 {margin-top:8px;} .btn_line {display:flex; width:100%;flex-wrap: nowrap;} .btn_line input[type="text"] {width:150px; } .btn_line .btn_rp {width:120px; background-color:#f4f4f4; border:1px solid #ddd; color:#555; margin-left:5px; border-radius:.25rem; font-size:0.85rem;} /* 아이디/비번찾기 */ .findLink {display:block; padding-top:0.5rem; text-align:center; } .findLink a { font-size:0.95rem;font-weight:400; color:#666; margin-left:1rem; line-height:1rem; font-family:'Notosans';font-weight:500 } .findLink a.join {font-weight:600; color:var(--txt-default)} .findLink a:first-child {margin-left:0; } .findLink a:before {content:''; display:inline-block; vertical-align:middle; width:1px; height:14px; background-color:#ddd; margin-right:1rem; } .findLink a:first-child:before {display:none; } .login li {display:block; margin-top:1rem; } .login li.save {margin-top:1.2rem; } .login input[type="text"], .login input[type="password"] {position:relative; width:100%; height:55px; line-height:53px; border-radius:0px; border-bottom:1px solid #eee; overflow:hidden; padding:0 0.5rem; font-size:1.05rem; color:#111;background-color:transparent !important; z-index:2; } .login input[type="text"]:focus, .login input[type="password"]:focus {border-color:#000} .login .input_item {display:block; width:100%;background:#fff; position:relative; border-radius:7px; font-size:0} .login .input_item input[type=text] + label, .login .input_item input[type=password] + label {z-index:1;} .login .input_item label.filled, .login .input_item input:focus + label {top:-15px !important;left:0;background:transparent;} .login .remain { position:absolute; width:40px;right:100px;top:15px; text-align:right; font-size:.95rem; color:#02b1e7; z-index:5} /* 가입완료 */ .step_complete {display:block; text-align:center; padding-bottom:2rem;} .step_complete h2 {padding-top:1.25rem; font-size:1.563rem; line-height:1.563rem; font-weight:500; color:#333;} .step_complete .txt {padding-top:0.85rem; font-size:1.05rem; font-weight:400; color:#666; line-height:1.6rem; } .step_complete .txt strong {font-weight:500; color:#f72e41;} .step_complete .txt2 { font-size:1rem; font-weight:400; color:#999; line-height:1.8rem; } .step_complete .txt2 strong {font-weight:500; color:var(--txt-default); display:block; font-size:120%;} .join_result { margin-top:2rem; font-family:'Roboto','Notosans'; text-align:left; border-top:1px solid #555} .join_result li {display:flex; width:100%;justify-content: space-between; align-items: flex-start;padding:1.2rem 0.5rem; border-bottom:1px solid #eee;} .join_result li span {font-size:0.985rem; line-height:1.3rem;} .join_result li span:first-child {width:150px; color:#888; } .join_result li span:first-child + span {color:#333; font-weight:bold; color:var(--txt-default) } /* 아이디/비번찾기 */ .find_box {display:block; width:450px; margin:0rem auto;} /* 아이디/비번 결과*/ .idpw_result{ display:block; text-align:center; padding:0rem 0; } .idpw_result figure {display:inline-block; width:100px; height:100px; background:url('/images/ico_note.png') no-repeat center ; } .idpw_result h2 {padding-top:0rem; font-weight:500; color:#333; font-size:1.25rem; line-height:2rem; margin-bottom:1rem;} .idpw_result h2 span {font-size:1.1rem;} .idpw_result h3 {padding-top:1.2rem; font-weight:500; color:#333; font-size:1.5rem; line-height:2rem; } .idpw_result p{padding:0.5rem 0; font-size:1.025rem; font-weight:400; color:#888; line-height:1.2rem; margin:0; } .idpw_result p strong {color:var(--txt-default2); font-weight:bold;} .idpw_result .box {background-color:#f4f4f4; border-radius:8px; padding:1.5rem 0; margin:2rem 0;} /* 약관 */ .agree-detail { margin-top:20px;} .agree-detail h2 {margin-bottom: 0px; font-size: 23px; color: #333;} .agree-detail h3 {margin-bottom:30px; font-size: 18px; font-weight:500; color:var(--txt-default);} .agree-detail h6 { font-size: 16px; color: #111; padding: 20px 5px 7px 0; font-weight: 500; } .agree-detail h6:first-child {padding-top: 5px;} .agree-detail p {padding: 5px 0 5px 0; color:#888; font-size:14px;line-height:1.4em;} .agree-detail strong {font-weight: bold;} .agree-detail ol { padding: 5px 5px 5px 5px;list-style:none; } .agree-detail ul { padding: 5px 5px 5px 5px; } .agree-detail span {display:inline-block; vertical-align:top;margin-top:-1px; margin-right:3px; font-weight:500;} .agree-detail li { padding: 1px 0 1px 0;font-size:15px;line-height:1.5em;} .agree-detail li.tit {font-size: 14px; color: #111; padding: 20px 5px 10px 0; font-weight: bold;} .agree-detail li.tit:first-of-type {padding-top: 0;} .agree-detail ol li ol {list-style-type:decimal; list-style-position:outside; margin-left:12px; margin:10px 0} .agree-detail ol li ol li {font-size:14px;} /* modal pop */ .agree-detail.pop { margin-top:28px;} .agree-detail.pop h2 {margin-bottom: 20px; font-size: 18px; color: #333;} .agree-detail.pop h3 {margin-top:30px; margin-bottom: 10px; font-size: 16px; font-weight:600; color:var(--txt-default);} .agree-detail.pop h3:nth-child(1) {margin-top:0;} .agree-detail.pop h6 { font-size: 14px; color: #111; padding: 20px 5px 7px 0; font-weight: bold; } .agree-detail.pop h6:first-child {padding-top: 5px;} .agree-detail.pop p {padding: 5px 0 5px 0; color:#888; font-size:13px;line-height:1.4em;} .agree-detail.pop strong {font-weight: bold;} .agree-detail.pop ol { padding: 5px 5px 5px 10px;list-style:none; } .agree-detail.pop ul { padding: 5px 5px 5px 10px; } .agree-detail.pop li { padding: 1px 0 1px 0;font-size:13px;line-height:1.4em;} .agree-detail.pop li.tit {font-size: 14px; color: #111; padding: 20px 5px 10px 0; font-weight: bold;} .agree-detail.pop li.tit:first-of-type {padding-top: 0;} .agree-detail.pop ol li ol {list-style-type:decimal; list-style-position:outside; margin-left:15px; } /* btn */ .btnBox_wrap {position:relative; width:100%;} .page-review .bbs_btn_box {margin-top:-45px;} .bbs_btn_box {position:relative; text-align:right; } .bbs_btn_box a { display:inline-block; height:50px; line-height:50px; border-radius:4px;padding:0 2rem; font-size:0.925rem; font-weight:500;} .bbs_btn_box a.btn_write { background-color:var(--txt-default); border-color:var(--txt-default); color:#fff;} .checkImg {padding-bottom:2rem; } #check-group { animation: 0.32s ease-in-out 1.03s check-group; transform-origin: center;} #check-group #check { animation: 0.34s cubic-bezier(0.65, 0, 1, 1) 0.6s forwards check; stroke-dasharray: 0, 75px; stroke-linecap: square; stroke-linejoin: square;} #check-group #outline {animation: 0.38s ease-in outline; transform: rotate(0deg); transform-origin: center;} #check-group #white-circle { animation: 0.35s ease-in 0.35s forwards circle; transform: none; transform-origin: center;} @keyframes outline { from { stroke-dasharray: 0, 345.576px; } to { stroke-dasharray: 345.576px, 345.576px; } } @keyframes circle { from { transform: scale(1); } to { transform: scale(0); } } @keyframes check { from { stroke-dasharray: 0, 75px; } to { stroke-dasharray: 75px, 75px; } } @keyframes check-group { from { transform: scale(1); } 50% { transform: scale(1.09); } to { transform: scale(1); } } .checkmark{width: 86px;height: 86px;border-radius: 50%;display: block;stroke-width: 3;stroke: #fff;stroke-miterlimit: 10;margin:0 auto;box-shadow: inset 0px 0px 0px var(--txt-default);animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both} .checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width:4;stroke-miterlimit: 10;stroke: var(--txt-default);fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards} .checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards} @keyframes stroke{ 100%{stroke-dashoffset: 0} } @keyframes scale{ 0%, 100%{transform: none} 50%{transform: scale3d(1.1, 1.1, 1)} } @keyframes fill{ 100%{box-shadow: inset 0px 0px 0px 60px var(--txt-default)} } /* tab */ .tab_menu {display:block; font-size:0;} .tab_menu:after{display:block;content:'';clear:both;} .tab_menu li {display:inline-block; cursor:pointer;font-size:0;} .tab_menu li.active{z-index:1;} .tab_menu li.active:before{display:none;} .tab_menu li a, .tab_menu li span {display:block;border-style: solid;border-width: 1px;border-color: #ddd;margin-left: -1px;background: #f5f5f5;line-height:3.125rem;text-align:center; letter-spacing:-.04em;font-size:1.105rem; font-weight:600;} .tab_menu li.active a, .tab_menu li.active span {position:relative;border-width: 1px 1px 0 1px;border-color: var(--txt-default);background: #fff;color:var(--txt-default);z-index: 1;} .tab_menu.col3 li {width:33.33%;} .tab_item .btn_area{display:block; text-align:center;} .tab_item .btn-more {display:inline-block; margin:2rem auto 0; clear:both; height:2.65rem; line-height:2.6rem; background-color:transparent; border:1px solid #ccc; padding:0 2rem; border-radius:4px; color:#444; font-size:0.95rem; font-weight:500; } .tab_item .btn-more:after {content:"\e90b";font-family:'xeicon'; display:inline-block; vertical-align:top; margin-top:0px; margin-left:10px; font-size:1.2rem; } .tab_item .btn-more:hover {border-color:#fff; background-color:#fff; box-shadow:7px 7px 15px rgba(0,0,0,0.05)} .tab_item .slick-dots {margin-top:0.95rem;text-align: center; display:none; } .tab_item.slick-dots > li {display: inline-block;vertical-align: top;width: 12px !important;height:12px !important;margin: 0 5px !important; padding:0 !important; background:#fff;border-radius: 12px !important;cursor: pointer;-webkit-transition: all 400ms;transition: all 400ms;} .tab_item .slick-dots > li.slick-active {background: #4aa955 !important;} .tab_item .slick-dots > li > button {text-indent:-9999px;} .tab_menu.type2 {position:relative;z-index:2 } .tab_menu.type2 > ul { display:flex; justify-content: space-between;flex-wrap: nowrap; flex-direction: row; } .tab_menu.type2 > ul:after {content:''; position:absolute;width:100%; left:0; bottom:-3px; height:1px;background:#ccc; z-index:-1 } .tab_menu.type2 > ul > li{ width:100%; height:60px;text-align:center; margin:0; background-color:transparent; } .tab_menu.type2 > ul > li > span { display:block; color:#777; font-size:1.1rem; line-height:50px; padding:0; padding-bottom:10px; border:0; border-bottom:3px solid transparent;background-color:transparent; font-weight:500; border-radius:0rem; } .tab_menu.type2 > ul > li.on > span { color:var(--txt-default); background-color:transparent; border-color:var(--txt-default)} .tab_menu.type2 > ul > li.on {border-color:var(--txt-default)} @media all and (max-width:700px) { .tab_menu {margin-left:-1.5rem; margin-right:-1.5rem;} .tab_menu li a, .tab_menu li span {font-size:1.05rem; background-color:#fff; border:0; border-bottom:2px solid transparent; } .tab_menu li.active a, .tab_menu li.active span {border-bottom:2px solid var(--txt-default)} } @media screen and (max-width:1024px){ .container.agree {min-height:auto; padding-top:50px;} .join{ padding-top:2rem; } .join_note br {display:none;} .join .btn_member {position:fixed; left:0; bottom:0; width:100%; gap:0; } .join .btn_member a {border-radius:0} .join .btn_member a.cancel {background-color:#444; border-color:#444; color:#fff;} .mypage .btn_member {position:fixed; left:0; bottom:0; width:100%; gap:0;z-index:333 } .mypage .btn_member a {border-radius:0} .mypage .btn_member a.cancel {background-color:#444; border-color:#444; color:#fff;} .join.step_cpl .btn_member {position:relative; left:auto; bottom:auto; margin:1rem auto 0; } .join.step_cpl .btn_member a {border-radius:8px} .btnBox_wrap {margin-top:3.75rem; } .btnBox_mg0 .btnBox_wrap {margin-top:0rem; } .step_complete {padding-top:2rem; } .step_complete figure {height:100px; background-size:auto 90%; } .step_complete h2 {padding-top:1.25rem; font-size:1.25rem; line-height:1.25rem;} .step_complete .txt {padding-top:0.65rem; font-size:0.95rem; line-height:1.5rem; } .tab_menu_wrap .column {padding:0} } @media screen and (max-width:677px){ .container.agree { padding-top:30px !important;} .join{width:100%;padding:0 1rem; position:relative; } .join_note { padding:0.85rem 0.9rem; font-size:0.85rem; line-height:1.45rem; letter-spacing:-.06em; } .join_note strong { font-size:110%; } .agree-check .ag-tit label { font-size:14px; } .mypage .btn_member a.confirm {width:60%; } .mypage .btn_member a.cancel {width:40%; } .step_complete {padding:2rem 0 1rem; } .step_complete figure {height:80px; background-size:auto 100%; } .step_complete h2 {padding-top:1rem; font-size:1.125rem;} .step_complete .txt {padding-top:0.5rem; font-size:0.90rem; line-height:1.3rem; } .step_complete .txt2 { font-size:0.95rem; line-height:1.4rem; } .step_complete .txt2 strong {margin-bottom:0.3rem;} /* 아이디/비번찾기*/ .find_box {width:100%; padding:2rem 1rem;} .idpw_result h2 {font-size:1.05rem; line-height:1.5em; } .idpw_result h2 span {font-size:0.95rem;font-weight:normal; color:#777; letter-spacing:-0.08em; line-height:1.5em; padding-top:0.3rem; } } @media screen and (max-width:500px){ .join.step_narrow{width:100%; padding:0 0rem;} .join.step_cpl{width:85%; margin-bottom:auto; } .join .btn_member a {font-size:1rem;} .mypage .btn_member a {font-size:1rem;} } @media screen and (max-width:380px){ .join_info {padding:0.9rem;} .join_info li {width:100%; flex-wrap: wrap; border-top:1px solid #dedede; padding-top:10px;} .join_info li:first-child {border:0; padding:0;} .join_info li span:first-child {width:100%; font-weight:bold; padding-bottom:5px; } .join_info li span:first-child + span {width:100%} } @media screen and (max-width:350px){ .find_box { padding:1rem 1.5rem;} .join_info li span:first-child {width:100% } .join_info li span:first-child + span {width:100% } }