gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GNB & 차량 리스트 개선 UX _20250804

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-08-10 22:12:44 +09:00
parent 02a97a7e88
commit e51a668184
7 changed files with 5029 additions and 4537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
kr/assets/css/common.css
View File

@@ -1227,6 +1227,13 @@ video::-webkit-media-controls {
align-items: center;
height: 8rem;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carItem {
height: 3.2rem;
padding: 0 1.2rem;
border: 1px solid #dedede;
}
}
.hederWarp_n .headerInner .func .carlist .carItem::after {
content: "";
display: block;
@@ -1236,10 +1243,20 @@ video::-webkit-media-controls {
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carItem::after {
margin-left: 2rem;
}
}
.hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus {
border: none;
outline: none;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus {
border: 1px solid #dedede;
}
}
.hederWarp_n .headerInner .func .carlist .carItem.on::after {
transform: rotate(-180deg);
background-position-x: left;
@@ -1277,6 +1294,15 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem {
top: 3.2rem;
left: 0;
right: 0;
transform: initial;
width: 100%;
}
}
.hederWarp_n .headerInner .func .carlist .carlistItem.on {
display: block;
}
@@ -1300,6 +1326,28 @@ video::-webkit-media-controls {
background-color: #fff;
border: 1px solid #dedede;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem ul {
margin-top: 0.5rem;
padding: 1.2rem;
max-height: 70rem;
overflow-y: auto;
/* WebKit 기반 브라우저용 스크롤바 스타일 */
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar {
width: 0.4rem; /* 폭 4px */
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-track {
background: transparent; /* 트랙 투명 */
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-thumb {
background-color: #dedede; /* 스크롤바 색상 */
border-radius: 0.2rem;
}
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li {
align-items: center;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li a {
display: flex;
font-size: 1.4rem;
@@ -1309,13 +1357,18 @@ video::-webkit-media-controls {
color: #000;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li a span {
color: #9ea1a2;
color: #05141f;
font-weight: 400;
display: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem ul li a span {
display: inline;
}
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li a span + span::before {
content: "";
display: block;
@@ -1325,9 +1378,69 @@ video::-webkit-media-controls {
margin-left: 1rem;
margin-right: 1rem;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem ul li a {
position: relative;
display: inline;
}
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li button {
display: inline;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem ul li {
position: relative;
padding-left: 2rem;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li > span {
display: inline;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li button {
text-align: left;
}
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info {
display: inline-block;
position: relative;
width: 1.3rem;
height: 1.3rem;
margin-left: 0.4rem;
background: url("../images/common/ico_info.png") center center no-repeat;
background-size: 1.3rem auto;
cursor: pointer;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info:hover .tooltip {
display: flex;
left: -2.4rem;
top: 2.4rem;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 1.4rem;
height: 1.4rem;
margin-right: 0.4rem;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li.selected:before {
content: "";
display: block;
width: 1.4rem;
height: 1.4rem;
background: url("../images/common/ico_selected.png") center center no-repeat;
background-size: 1.4rem auto;
}
.hederWarp_n .headerInner .func .carlist .carlistItem ul li + li {
margin-top: 1rem;
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem ul li + li {
margin-top: 1.2rem;
}
}
.hederWarp_n .headerInner .func .userLogin {
position: relative;
display: block;
@@ -4325,7 +4438,6 @@ video::-webkit-media-controls {
}
.agree-result .popInner .tableStyle {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin-top: 3rem;
margin-bottom: 5rem;
}
@@ -4393,4 +4505,32 @@ video::-webkit-media-controls {
display: block;
}
}
.tooltip {
display: none;
position: absolute;
z-index: 1;
}
.tooltip-bubble {
position: relative;
padding: 1.6rem 1.6rem 1.4rem;
background: #fff;
border: 1px solid #0b1320; /* 테두리 추가 */
border-radius: 0.6rem;
font-size: 1.4rem;
color: #0b1320;
filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.18));
}
.tooltip-bubble .edge {
position: absolute;
top: -0.7rem; /* border 두께 때문에 살짝 조정 */
left: 2.4rem;
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-left: 1px solid #0b1320; /* 포인터 테두리 */
border-top: 1px solid #0b1320;
transform: rotate(45deg);
}
/*# sourceMappingURL=common.css.map */

2
kr/assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

168
kr/assets/css/common.scss
View File

@@ -188,7 +188,8 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
@include desktopMin {}
@include desktopMin {
}
.boxBullet {
display: none;
@@ -693,7 +694,6 @@ video::-webkit-media-controls {
.moblieMenu {
.slide-open {
.burgur {
.top-line,
.bot-line {
background-color: #000;
@@ -754,9 +754,7 @@ video::-webkit-media-controls {
background-image: url(../images/common/icon-user.svg) !important;
}
.headerInner {
.gnb {
.logoWrap {
a {
@@ -835,11 +833,7 @@ video::-webkit-media-controls {
}
}
}
}
}
.headerInner {
@@ -850,7 +844,6 @@ video::-webkit-media-controls {
height: 8rem;
margin: 0 auto;
@media (max-width: 1120px) {
height: 5.6rem;
}
@@ -1252,11 +1245,11 @@ video::-webkit-media-controls {
height: 1.5rem;
transform: rotate(90deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
transition: transform .2s ease;
transition: transform 0.2s ease;
}
&.on {
margin-bottom: .3rem;
margin-bottom: 0.3rem;
&::after {
content: "";
@@ -1349,7 +1342,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 400;
color: #9ea1a2;
padding: .8rem 0;
padding: 0.8rem 0;
&.active {
color: #05141f;
@@ -1360,7 +1353,7 @@ video::-webkit-media-controls {
}
@media (max-width: 1120px) {
padding: .6rem 0;
padding: 0.6rem 0;
}
}
}
@@ -1444,6 +1437,12 @@ video::-webkit-media-controls {
align-items: center;
height: 8rem;
@include desktopMin {
height: 3.2rem;
padding: 0 1.2rem;
border: 1px solid #dedede;
}
&::after {
content: "";
display: block;
@@ -1452,12 +1451,20 @@ video::-webkit-media-controls {
margin-top: -0.4rem;
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
@include desktopMin {
margin-left: 2rem;
}
}
&:hover,
&:focus {
border: none;
outline: none;
@include desktopMin {
border: 1px solid #dedede;
}
}
&.on {
@@ -1503,6 +1510,14 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
@include desktopMin {
top: 3.2rem;
left: 0;
right: 0;
transform: initial;
width: 100%;
}
&.on {
display: block;
}
@@ -1529,7 +1544,29 @@ video::-webkit-media-controls {
background-color: #fff;
border: 1px solid #dedede;
@include desktopMin {
margin-top: 0.5rem;
padding: 1.2rem;
max-height: 70rem;
overflow-y: auto;
/* WebKit 기반 브라우저용 스크롤바 스타일 */
&::-webkit-scrollbar {
width: 0.4rem; /* 폭 4px */
}
&::-webkit-scrollbar-track {
background: transparent; /* 트랙 투명 */
}
&::-webkit-scrollbar-thumb {
background-color: #dedede; /* 스크롤바 색상 */
border-radius: 0.2rem;
}
}
li {
align-items: center;
a {
display: flex;
font-size: 1.4rem;
@@ -1542,10 +1579,13 @@ video::-webkit-media-controls {
}
span {
color: #9ea1a2;
color: #05141f;
font-weight: 400;
display: flex;
width: fit-content;
@include desktopMin {
display: inline;
}
}
span + span {
@@ -1559,11 +1599,74 @@ video::-webkit-media-controls {
margin-right: 1rem;
}
}
@include desktopMin {
position: relative;
display: inline;
}
}
button {
display: inline;
}
@include desktopMin {
position: relative;
padding-left: 2rem;
> span {
display: inline;
}
button {
text-align: left;
}
}
.btn-info {
display: inline-block;
position: relative;
width: 1.3rem;
height: 1.3rem;
margin-left: 0.4rem;
background: url("../images/common/ico_info.png") center center no-repeat;
background-size: 1.3rem auto;
cursor: pointer;
&:hover {
.tooltip {
display: flex;
left: -2.4rem;
top: 2.4rem;
}
}
}
&:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 1.4rem;
height: 1.4rem;
margin-right: 0.4rem;
}
&.selected {
&:before {
content: "";
display: block;
width: 1.4rem;
height: 1.4rem;
background: url("../images/common/ico_selected.png") center center no-repeat;
background-size: 1.4rem auto;
}
}
}
li + li {
margin-top: 1rem;
@include desktopMin {
margin-top: 1.2rem;
}
}
}
}
@@ -2496,7 +2599,8 @@ video::-webkit-media-controls {
margin-bottom: 0rem;
}
@include desktopMax {}
@include desktopMax {
}
dt {
color: #676767;
@@ -4005,7 +4109,6 @@ video::-webkit-media-controls {
}
.carswBtn {
width: 18rem;
margin: 0 auto;
margin-top: 3rem;
@@ -4233,14 +4336,11 @@ video::-webkit-media-controls {
}
}
}
}
#ad_popup {
.popInner .content {
.carswBtn {
width: 100%;
margin: 0 auto;
margin-top: 3rem;
@@ -4251,7 +4351,6 @@ video::-webkit-media-controls {
}
}
}
}
.termsContents {
@@ -4815,7 +4914,6 @@ video::-webkit-media-controls {
.tableStyle {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin-top: 3rem;
margin-bottom: 5rem;
@@ -4887,3 +4985,31 @@ video::-webkit-media-controls {
display: block;
}
}
.tooltip {
display: none;
position: absolute;
z-index: 1;
}
.tooltip-bubble {
position: relative;
padding: 1.6rem 1.6rem 1.4rem;
background: #fff;
border: 1px solid #0b1320; /* 테두리 추가 */
border-radius: 0.6rem;
font-size: 1.4rem;
color: #0b1320;
filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.18));
.edge {
position: absolute;
top: -0.7rem; /* border 두께 때문에 살짝 조정 */
left: 2.4rem;
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-left: 1px solid #0b1320; /* 포인터 테두리 */
border-top: 1px solid #0b1320;
transform: rotate(45deg);
}
}

BIN
kr/assets/images/common/ico_info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
kr/assets/images/common/ico_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 B

92
kr/assets/js/common.js
View File

@@ -1392,3 +1392,95 @@ function btnActive(selector) {
const selectedText = selectedValue.next(".coupon-item").find("strong").text();
$(".coupon-active strong").text(selectedText);
}
// 동적으로 추가되는 .btn-info 요소를 위한 이벤트
$(document).on("mouseenter", ".carlist .btn-info", function (e) {
// 이미 툴팁이 있다면 제거
$(".tooltip").remove();
const $btn = $(this);
const $tooltip = $('<div class="tooltip"></div>');
// 툴팁 내용 설정
const tooltipText = $btn.data("tooltip") || "정보를 확인하세요";
console.log("🚀 ~ tooltipText:", $btn.attr("data-tooltip"));
$tooltip.html('<div class="tooltip-bubble"><em class="edge"></em>' + tooltipText + "</div>");
// 툴팁을 .carlist에 추가
$(".carlist").append($tooltip);
// .carlist 요소의 offset 정보 가져오기
const $carlist = $(".carlist");
const carlistOffset = $carlist.offset();
const carlistScrollTop = $carlist.scrollTop();
const carlistScrollLeft = $carlist.scrollLeft();
// 툴팁 위치 계산
const tooltipWidth = $tooltip.outerWidth();
const tooltipHeight = $tooltip.outerHeight();
// .carlist 내에서의 상대적 위치 계산
let left = e.pageX - carlistOffset.left + carlistScrollLeft - tooltipWidth / 2;
let top = e.pageY - carlistOffset.top + carlistScrollTop - tooltipHeight + 70;
// .carlist 내에서의 경계 체크
const carlistWidth = $carlist.width();
const carlistHeight = $carlist.height();
const padding = 10; // 경계에서의 여백
// 오른쪽 경계 체크 - 툴팁이 오른쪽으로 넘어가면 경계에 딱 붙게
if (left + tooltipWidth > carlistWidth - padding) {
left = carlistWidth - tooltipWidth - padding;
$(".tooltip").addClass("right");
console.log("오른쪽 경계에 딱 붙음");
}
// 왼쪽 경계 체크 - 툴팁이 왼쪽으로 넘어가면 경계에 딱 붙게
if (left < padding) {
left = padding;
$(".tooltip").addClass("left");
console.log("왼쪽 경계에 딱 붙음");
}
// 툴팁 위치 설정
$tooltip.css({
position: "absolute",
left: left + "px",
top: top + "px",
zIndex: 9999,
});
// .edge 요소를 .btn-info 요소 위치로 이동
const $edge = $tooltip.find(".edge");
const edgeWidth = $edge.outerWidth();
const edgeHeight = $edge.outerHeight();
// .btn-info 요소의 위치 정보 가져오기
const btnOffset = $btn.offset();
const btnWidth = $btn.outerWidth();
// .btn-info 요소가 툴팁 내에서의 상대적 위치 계산
const btnXInTooltip = btnOffset.left - carlistOffset.left + carlistScrollLeft - left + btnWidth / 2;
const btnYInTooltip = btnOffset.top - carlistOffset.top + carlistScrollTop - top;
// .edge 요소의 위치 설정 (.btn-info 요소 위치 기준)
$edge.css({
position: "absolute",
left: btnXInTooltip - edgeWidth / 2 + "px",
});
// 툴팁 표시
$tooltip.fadeIn(200);
});
$(document).on("mouseleave", ".btn-info", function () {
$(".tooltip").fadeOut(200, function () {
$(this).remove();
});
});
$(document).on("mouseleave", ".tooltip", function () {
$(this).fadeOut(200, function () {
$(this).remove();
});
});

156
kr/mypage/coupon-list_new.html
View File

@@ -86,8 +86,9 @@
<div class="mobileCarlist">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="item">
<span>MV</span>
<span>161어 1660</span>
<!-- <span>MV</span>
<span>161어 1660</span> -->
쏘렌토(MQ4) 하이브리드-플러그인 상품성개선
</div>
<div class="arrow"></div>
</a>
@@ -180,8 +181,9 @@
<!-- PC 전용 차량 선택 UI입니다. -->
<div class="carlist">
<a href="javascript:void(0)" class="carItem">
<span>MV</span>
<span>161어 1660</span>
<!-- <span>MV</span>
<span>161어 1660</span> -->
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
</a>
<div class="carlistItem">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
@@ -189,23 +191,155 @@
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<li>
<li class="selected">
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</span>
</a>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
</ul>
</div>